/* Shared additions: navigation, focused home page and static commune portraits. */
[hidden]{display:none!important}
.header nav{gap:18px;flex-wrap:wrap}
.header nav a{white-space:nowrap}
.commune-picker{background:#e9f3f3;color:var(--ink);border-radius:20px;padding:30px}
.commune-picker h2{margin:12px 0}.commune-picker p{line-height:1.6}
.commune-picker form{display:grid;gap:12px;margin:24px 0 16px}
.commune-picker select{width:100%}.commune-picker button{border:0;text-align:center}
.hero-method{display:inline-block;color:#a8e6dd;margin-top:18px}
.featured-reading{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:36px;border:1px solid var(--line);background:white;border-radius:var(--radius)}
.featured-reading .primary-button{margin:20px 0 8px}.featured-reading .source-link{display:block}
.landing-seo .history-home{display:flow-root}.landing-seo .history-home p:not(.eyebrow){margin:20px 0}
.mission .text-link{display:block;margin-top:16px}
.breadcrumb{font-size:14px;margin-top:30px;display:flex;flex-wrap:wrap;gap:8px;color:var(--muted)}
.portrait-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:20px}
.portrait-stats h2{font-size:1rem;letter-spacing:0}.portrait-stats .panel{padding:24px}
.portrait-stat{font-size:clamp(1.6rem,3vw,2.7rem);font-weight:750;letter-spacing:-.04em;margin:10px 0;color:var(--blue)}
.portrait-story{max-width:900px}.portrait-story p{margin:18px 0}.portrait-story .source-link{display:block;margin-top:10px}
.portrait-page .intro .primary-button{margin-top:20px}.portrait-page .feature-grid{margin-top:24px}
.details-status{padding:12px 0}.detail-retry{margin-top:12px}.catalogue-card details p{overflow-wrap:anywhere}
.editorial-note{font-size:13px;color:var(--muted);margin:16px 0}
input:focus-visible,textarea:focus-visible{outline:3px solid #df872b;outline-offset:3px}
@media(max-width:900px){.header{flex-wrap:wrap;gap:18px}.portrait-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.commune-picker{padding:20px}.featured-reading{grid-template-columns:1fr;gap:20px;padding:22px}.portrait-stats .panel{padding:18px}.header nav{gap:0}.portrait-story{padding:20px}.commune-picker .primary-button{width:100%}}
@media(max-width:420px){.portrait-stats{grid-template-columns:1fr}.landing-seo .home-hero h1 span{white-space:normal}.portrait-stats .helper{font-size:14px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Public services in commune portraits */
.portrait-services details.service-group{border-top:1px solid var(--line);padding:14px 0}
.portrait-services summary{font-weight:600;cursor:pointer}
.service-list{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:14px}
.service-list li{display:grid;gap:3px}
.service-list span{color:var(--muted);font-size:14px}

/* Generated analyses and FAQs */
.page-faq{max-width:900px;margin:55px auto}
.page-faq h2{margin-bottom:20px}
.page-faq details{background:var(--white,#fff);border:1px solid var(--line);border-radius:12px;padding:18px 22px;margin-bottom:10px}
.page-faq summary{font-weight:600;cursor:pointer}
.page-faq details p{margin-top:12px;color:var(--muted)}
.portrait-local-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin:18px 0}
.portrait-local-grid div{display:grid;gap:6px}
.portrait-local-grid strong{font-size:32px}
.directory-analysis details{margin-top:14px}
.directory-analysis summary{font-weight:600;cursor:pointer}

/* Curated commune photographs; preserve each complete image and its credits. */
.portrait-page .intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:40px}
.commune-photo{margin:0;min-width:0;background:var(--white);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.commune-photo-image{display:block;background:var(--light);text-align:center}
.commune-photo img{display:block;width:100%;height:340px;object-fit:contain}
.commune-photo figcaption{padding:16px 20px;font-size:12px;line-height:1.65;color:var(--muted)}
.commune-photo figcaption strong{display:block;font-size:15px;color:var(--ink);margin-bottom:6px}
.commune-photo figcaption a{text-decoration:underline;text-underline-offset:3px}
.commune-photo details{margin-top:8px}.commune-photo summary{font-size:12px}.commune-photo details p{margin-top:6px}
@media(max-width:800px){.portrait-page .intro{grid-template-columns:1fr;gap:24px}.commune-photo img{height:auto;max-height:420px}}

/* Elected officials and employment chart */
.elus-mayor{display:grid;gap:4px;margin:14px 0}
.elus-mayor strong{font-size:24px}
.elus-mayor span{color:var(--muted)}
.line-chart{margin:24px 0}
.line-chart svg{width:100%;height:auto;display:block}
.line-chart text{font-size:12px;fill:var(--muted)}
.line-chart .chart-value{fill:var(--ink);font-weight:600}
.chart-line{fill:none;stroke:var(--accent);stroke-width:3;stroke-linejoin:round}
.chart-axis{stroke:var(--line)}
.line-chart figcaption{font-size:13px;color:var(--muted);margin-top:6px}

/* Direct navigation between the 24 commune portraits. */
.portrait-switcher{position:sticky;top:12px;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:22px;padding:14px 20px;background:var(--white);border:1px solid var(--line);border-radius:16px;box-shadow:0 6px 20px #17374b0c}
.portrait-switcher label{font-size:15px;white-space:nowrap}
.portrait-switcher-controls{display:flex;align-items:center;gap:12px;min-width:0}
.portrait-switcher select{width:280px;min-width:0}
.portrait-switcher .primary-button{margin:0;white-space:nowrap;border:0;cursor:pointer;font:inherit;font-size:14px}
@media(max-width:700px){.portrait-switcher{top:8px;display:block;padding:12px}.portrait-switcher label{display:block;margin-bottom:7px;font-size:13px}.portrait-switcher-controls{gap:8px}.portrait-switcher select{flex:1;width:0;font-size:14px;padding-left:10px}.portrait-switcher .primary-button{padding:12px;font-size:12px}}

/* Compact analysis library: scan themes and open the desired reading. */
.analyses-library{margin-bottom:32px}.analysis-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.analysis-filters[hidden],.reading-card[hidden]{display:none}
.analysis-filters button{border:1px solid var(--line);border-radius:24px;padding:9px 16px;background:var(--white);font-size:14px}
.analysis-filters button[aria-pressed="true"]{background:var(--ink);color:var(--white);border-color:var(--ink)}
.analysis-count{font-size:13px;color:var(--muted);margin-bottom:20px}
.reading-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start}
.reading-card{min-width:0;background:var(--white);border:1px solid var(--line);border-radius:18px;scroll-margin-top:24px;overflow:hidden}
.reading-card summary,.analysis-dossier{padding:24px}.reading-card summary{list-style:none;cursor:pointer}.reading-card summary::-webkit-details-marker{display:none}
.reading-card h2{font-size:22px;line-height:1.3;margin-bottom:14px}.reading-card .eyebrow{font-size:10px;line-height:1.6;margin-bottom:10px}
.reading-card .analysis-excerpt,.analysis-dossier>p:not(.eyebrow){font-size:14px;color:var(--muted);line-height:1.65;margin-bottom:18px}
.analysis-read{display:block;color:var(--accent);font-size:14px;font-weight:650}.when-open{display:none}
.reading-card details[open] .when-closed{display:none}.reading-card details[open] .when-open{display:inline}
.reading-card:has(>details[open]){grid-column:1/-1}
.reading-card details[open] summary{border-bottom:1px solid var(--line)}
.analysis-content{padding:24px;max-width:940px}.analysis-content p{margin-bottom:16px}.analysis-content .lead{margin-top:0}
.analysis-content .source-link,.analysis-content .text-link{display:block;margin-top:14px}
.analysis-content .insee-table{overflow:auto}.analysis-content h3{margin:20px 0 12px;font-size:21px}
.analysis-dossier .primary-button{font-size:14px;margin-top:16px}.analysis-dossier .source-link{display:block;font-size:12px;margin-top:12px}
.reading-card summary:focus-visible{outline:3px solid #df872b;outline-offset:-4px}
@media(max-width:1000px){.reading-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.reading-grid{grid-template-columns:1fr;gap:12px}.reading-card summary,.analysis-dossier,.analysis-content{padding:20px}.reading-card h2{font-size:20px}.analysis-filters button{font-size:12px;padding:8px 12px}}

/* Multi-series line charts (fuel prices) */
.chart-grid{stroke:var(--line);stroke-dasharray:2 4}
.chart-line.line-a{stroke:var(--accent)}
.chart-line.line-b{stroke:#c2410c}
.chart-line.line-c{stroke:#15803d}
.legend-item{display:inline-flex;align-items:center;gap:6px;margin-right:16px;font-weight:600;color:var(--ink)}
.legend-item::before{content:"";width:18px;height:3px;border-radius:2px;background:currentColor}
.legend-item.line-a{color:var(--accent)}
.legend-item.line-b{color:#c2410c}
.legend-item.line-c{color:#15803d}
.line-chart figcaption .legend-item+.legend-item{margin-left:0}

/* Commune photo gallery */
.gallery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:18px 0}
.gallery-grid figure{margin:0;display:grid;gap:8px}
.gallery-grid img{width:100%;height:260px;object-fit:cover;border-radius:12px;display:block;background:var(--light)}
.gallery-grid figcaption{display:grid;gap:3px;font-size:14px}
.gallery-grid figcaption span{color:var(--muted);font-size:12px}
@media (max-width:700px){.gallery-grid{grid-template-columns:1fr}.gallery-grid img{height:220px}}
.fuel-prices{margin:24px 0 28px}
.fuel-prices h2{font-size:1.1rem;margin:0 0 14px}
.fuel-price-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.fuel-price-card{background:#eef5f3;border:1px solid #c4d8d2;border-top:4px solid #176b57;border-radius:12px;padding:20px}
.fuel-price-card h3{margin:0 0 12px;font-size:1rem}
.fuel-price-card .fuel-price-value{font-size:clamp(2rem,4vw,3rem);font-weight:800;line-height:1.1;color:#145643;margin:0 0 14px;white-space:nowrap}
.fuel-price-value span{display:block;font-size:.9rem;font-weight:500;margin-top:8px}
.fuel-price-card p:last-child{font-size:.85rem;margin-bottom:0}
.fuel-price-source{font-size:.85rem;margin:12px 0 0}
.fuel-explanation{border:1px solid #c4d8d2;border-radius:10px;margin:16px 0;padding:16px 20px}
.fuel-explanation summary{font-weight:700;cursor:pointer}
.fuel-explanation[open] summary{margin-bottom:20px}
@media(max-width:700px){.fuel-price-grid{grid-template-columns:1fr}.fuel-price-card{padding:16px}.fuel-price-card .fuel-price-value{font-size:2.5rem}}

/* Fuel price composition: DEETS / OPMR, diesel December 2025. */
.fuel-costs{margin:32px 0;padding:24px;background:#f6f8fa;border:1px solid var(--line);border-radius:14px}
.fuel-costs h2{font-size:clamp(1.35rem,2.5vw,1.9rem);margin:8px 0 14px}
.fuel-costs>p:not(.eyebrow){font-size:.95rem;line-height:1.6}
.fuel-cost-layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:28px;align-items:center;margin:24px 0}
.fuel-cost-pump{width:210px;display:flex;flex-direction:column;align-items:center;color:#145643}
.fuel-pump-icon{display:block;width:200px;height:auto;margin-bottom:8px}
.fuel-cost-pump strong{font-size:1.7rem;line-height:1.2}.fuel-cost-pump span{font-size:.8rem}
.fuel-cost-legend{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.fuel-cost-legend li{display:flex;justify-content:space-between;gap:14px;padding:10px 12px;border-left:5px solid var(--fuel-cost-color);background:white;border-radius:4px}
.fuel-cost-legend h3{margin:0;font-size:.9rem;letter-spacing:0;line-height:1.4}
.fuel-cost-legend p{margin:4px 0 0;font-size:.8rem;line-height:1.4}
.fuel-cost-legend strong{flex-shrink:0;font-size:1.4rem;text-align:right;line-height:1.3;color:var(--ink)}
.fuel-cost-legend small{display:block;font-size:.7rem;font-weight:500;white-space:nowrap}
.fuel-costs .fuel-cost-note{font-size:.8rem}
@media(max-width:700px){.fuel-costs{padding:18px}.fuel-cost-layout{grid-template-columns:1fr;gap:20px}.fuel-cost-pump{margin:auto}.fuel-cost-legend li{padding:10px}.fuel-cost-legend strong{font-size:1.25rem}}

/* Separate every page that begins with a panel from the navigation. */
.header + main > .panel:first-child{margin-top:32px}
@media(max-width:700px){.header + main > .panel:first-child{margin-top:24px}}

/* Economy overview: compact topics, optional employment detail. */
.economy-page .intro{padding:32px 8px 24px}
.economy-page h1{font-size:clamp(2rem,3.2vw,3rem)}
.economy-employment{padding:24px;margin-bottom:28px}
.economy-employment h2{font-size:1.5rem}
.economy-stats{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:18px 0}
.economy-stats strong{display:block;font-size:2rem;line-height:1.2;color:var(--blue)}
.economy-stats span{display:block;font-size:.85rem;color:var(--muted);margin-top:6px}
.economy-employment-detail{border-top:1px solid var(--line);padding-top:14px}
.economy-employment-detail summary{font-weight:650;font-size:.9rem}
.economy-employment-detail .article-body p{margin-top:14px;font-size:.95rem}
.economy-topics>h2{font-size:1.4rem;margin-bottom:16px}
.economy-topic-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.economy-card{display:flex;flex-direction:column;padding:20px;background:white;border:1px solid var(--line);border-radius:14px;min-width:0;scroll-margin-top:24px}
.economy-card .eyebrow{font-size:.65rem;margin-bottom:10px;color:var(--muted)}
.economy-card h3{font-size:1.1rem;letter-spacing:-.02em}
.economy-card>p:not(.eyebrow){font-size:.85rem;color:var(--muted);line-height:1.5;margin:10px 0 14px}
.economy-card>a{font-size:.85rem;font-weight:650;line-height:1.5}
.economy-card .source-link{font-size:.7rem;font-weight:400;margin-top:10px}
.economy-page #prix-carburants{margin-top:0}
.economy-page .editorial-note{margin:20px 0}
.economy-page .page-faq{margin-top:28px;padding-top:20px}
@media(max-width:1000px){.economy-topic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.economy-topic-grid{grid-template-columns:1fr;gap:12px}.economy-card{padding:16px}.economy-employment{padding:20px}.economy-stats{gap:14px}.economy-stats strong{font-size:1.65rem}.economy-stats span{font-size:.75rem}.economy-page .intro{padding-top:24px}.economy-page h1{font-size:2rem}}

.economy-card .text-link{display:block;margin-top:auto;padding-top:10px}

/* Aid guide */
.aide-theme{margin:28px 0 12px}
.aide-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.aide-card{display:grid;gap:10px;align-content:start}
.aide-card h3{margin:0}
.aide-card dl{display:grid;gap:8px;margin:0}
.aide-card dt{font-weight:600;font-size:13px;color:var(--ink)}
.aide-card dd{margin:2px 0 0;color:var(--muted);font-size:14px}
.aide-status{display:inline-block;justify-self:start;background:#fef3c7;color:#92400e;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600}
.aide-resources{display:grid;gap:8px;padding-left:18px}
/* Compact links to related data; maintained by scripts/seo_pages.py. */
.seo-related { display: block; margin: 24px 0; padding: 16px 0; border-top: 1px solid #dce4e7; line-height: 1.8; overflow-wrap: anywhere; }
.seo-related a, footer .seo-footer a { display: inline; min-height: 0; width: auto; white-space: normal; }
footer { flex-wrap: wrap; }
footer .seo-footer { flex-basis: 100%; width: 100%; }

/* History: old images and landmarks */
.lontan-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin:18px 0}
.lontan-grid figure{margin:0;display:grid;gap:8px;align-content:start}
.lontan-grid img{width:100%;height:auto;max-height:420px;object-fit:contain;background:var(--light);border-radius:12px;display:block}
.lontan-grid figcaption{display:grid;gap:4px;font-size:14px}
.lontan-grid figcaption span{color:var(--ink)}
.lontan-grid figcaption small{color:var(--muted);font-size:12px}
.reperes-list{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:14px}
.reperes-list li{display:grid;grid-template-columns:150px 1fr;gap:14px;border-top:1px solid var(--line);padding-top:12px}
.repere-date{font-weight:700;color:var(--accent)}
.reperes-list p{margin:0}
.history-next{margin:24px 0}
@media (max-width:700px){.lontan-grid{grid-template-columns:1fr}.reperes-list li{grid-template-columns:1fr;gap:4px}}

/* Compact editorial photos, regenerated from page-photos.json. */
.intro:has(.editorial-photo-heading),.catalogue-intro:has(.editorial-photo-heading){display:block}
.editorial-photo-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,30%);gap:28px;align-items:center;width:100%}
.editorial-photo-copy{min-width:0}
.editorial-photo-heading h1{font-size:clamp(2rem,3.5vw,3.4rem);line-height:1.12}
.editorial-photo{margin:0;min-width:0;width:100%;max-width:340px;justify-self:end}
.editorial-photo img{display:block;width:100%;height:170px;object-fit:cover;border-radius:14px}
.editorial-photo figcaption{margin-top:9px;font-size:12px;line-height:1.5;color:var(--muted);overflow-wrap:anywhere;letter-spacing:normal;word-spacing:normal;white-space:normal}
.editorial-photo figcaption strong{display:block;font-family:inherit;font-size:13px;font-weight:650;line-height:1.5;letter-spacing:normal;word-spacing:normal;color:var(--ink);margin-bottom:3px}
.editorial-photo figcaption span{display:block}
.editorial-photo figcaption a{text-decoration:underline;text-underline-offset:2px;display:inline;font-size:inherit;letter-spacing:normal;min-height:0;margin:0}
.island-stat .editorial-photo{margin-top:16px;max-width:none}
.island-stat .editorial-photo img{height:120px}
.island-stat .editorial-photo figcaption span{font-size:11px}
.today-hero:has(.editorial-photo-heading){max-width:none}
@media(max-width:760px){
 .editorial-photo-heading{grid-template-columns:1fr;gap:18px}
 .editorial-photo-heading h1{font-size:clamp(1.75rem,7.5vw,2.25rem)}
 .editorial-photo{max-width:none;justify-self:stretch}
 .editorial-photo img{height:140px}
}

/* Partner slot (no script, no cookie) */
.partner-slot{max-width:900px;margin:40px auto;border:1px solid var(--line);border-radius:14px;padding:14px 18px;background:var(--white,#fff);display:grid;gap:8px}
.partner-label{margin:0;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.partner-link{display:grid;grid-template-columns:minmax(0,240px) 1fr;gap:16px;align-items:center;text-decoration:none;color:var(--ink)}
.partner-link img{width:100%;height:auto;border-radius:8px;display:block}
.partner-link span{display:grid;gap:4px;font-size:14px;color:var(--muted)}
.partner-link strong{color:var(--ink);font-size:15px}
.partner-rules{font-size:12px;color:var(--muted)}
@media (max-width:700px){.partner-link{grid-template-columns:1fr}}

/* Prominent, compact access to the aid guide */
.aides-highlight{display:flex;align-items:center;justify-content:space-between;gap:24px;background:var(--light);border:1px solid #b9d2df;border-left:4px solid var(--accent);border-radius:16px;padding:22px 26px;margin:0 0 28px;scroll-margin-top:24px}
.aides-highlight-copy{min-width:0;max-width:680px}
.aides-highlight .eyebrow{color:var(--accent);margin-bottom:7px;font-size:11px}
.aides-highlight h2{font-size:clamp(1.2rem,2vw,1.6rem);line-height:1.3;letter-spacing:-.02em}
.aides-highlight-copy>p:last-child{font-size:14px;color:var(--muted);margin-top:8px;line-height:1.5}
.aides-highlight-actions{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:10px}
.aides-highlight .primary-button{margin:0;font-size:14px;min-height:44px;padding:11px 18px}
.aides-highlight-publics{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px;font-size:13px;font-weight:650;color:var(--accent)}
.aides-highlight-publics a{display:inline-flex;align-items:center;gap:6px;min-height:32px}
@media(max-width:760px){.aides-highlight{align-items:stretch;flex-direction:column;gap:16px;padding:20px;margin-bottom:24px}.aides-highlight-actions{align-items:flex-start}.aides-highlight-publics{justify-content:flex-start;gap:8px 20px}}

.landing-seo .home-aides-link{display:inline-block;margin-top:12px;color:#a8e6dd;text-decoration:underline;text-underline-offset:4px;font-size:14px;font-weight:700;line-height:1.5}

/* Separate the home introduction from the aid guide. */
.landing-seo .home-hero + .aides-highlight{margin-top:28px}
@media(max-width:760px){.landing-seo .home-hero + .aides-highlight{margin-top:24px}}

/* Keep the four home discovery cards balanced. */
.landing-seo .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.landing-seo .home-quiz-card{background:var(--light);border-color:#b9d2df}
@media(max-width:760px){.landing-seo .feature-grid{grid-template-columns:1fr}}

/* Highlighted quiz link in the main menu */
nav a.nav-jeu{gap:6px;padding:6px 14px;border-radius:999px;font-weight:700;color:#fff;background:linear-gradient(135deg,#0e7490,#c2410c);box-shadow:0 4px 12px rgba(194,65,12,.25);text-decoration:none;white-space:nowrap}
nav a.nav-jeu:hover{filter:brightness(1.08);text-decoration:none}
nav a.nav-jeu[aria-current=page]{color:#fff;text-decoration:none;outline:2px solid var(--ink);outline-offset:2px}
@media(max-width:700px){.header nav a.nav-jeu{justify-content:center;margin-top:6px;color:#fff;background:linear-gradient(135deg,#0e7490,#c2410c)}}

/* Electricity page */
.elec-kpis{margin:18px 0}
.elec-live-enr{font-size:18px}
.elec-live-bars{list-style:none;padding:0;margin:12px 0;display:grid;gap:6px}
.elec-live-bars li{display:grid;grid-template-columns:150px 1fr 48px;gap:8px;align-items:center;font-size:14px}
.elec-live-bars i{display:block;height:14px;border-radius:4px}
.elec-live-bars i.enr{background:#15803d}.elec-live-bars i.fos{background:#9ca3af}
@media(max-width:600px){.elec-live-bars li{grid-template-columns:110px 1fr 40px}}

/* Navigation directe, recherche et fiches d’aides compactes. */
.site-search{margin:0 0 1.5rem;padding:.75rem 1rem;border:1px solid #d4e0e5;border-radius:16px;background:#fff}
.site-search>summary{cursor:pointer;font-weight:700;color:var(--ink,#17394b);list-style:none;display:flex;justify-content:space-between;gap:1rem}
.site-search form{display:flex;align-items:end;gap:.75rem;margin:1rem 0}
.site-search label{flex:1;min-width:0}.site-search input,.analysis-search input{display:block;width:100%;box-sizing:border-box;margin-top:.35rem;padding:.75rem;border:1px solid #768993;border-radius:10px;font:inherit}
.search-status:empty,.search-results:empty{display:none}.search-results{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}.search-results li{padding:.7rem 0;border-top:1px solid #d4e0e5}.search-results a{font-weight:700}.search-results span{display:block;font-size:.85rem;color:#526976}
.portrait-toc{margin:1.5rem 0 2rem;padding:1rem;border:1px solid #d4e0e5;background:#fff;border-radius:16px}.portrait-toc>strong{display:block;margin-bottom:.6rem}.portrait-toc>div{display:flex;flex-wrap:wrap;gap:.5rem}.portrait-toc a,.home-shortcuts a{display:block;padding:.55rem .85rem;background:#e9f3f5;border-radius:10px;font-weight:700;text-decoration:none}
.portrait-page section[id],.aide-card{scroll-margin-top:2rem}
.aide-filters{display:flex;gap:1rem;align-items:end;margin:1.5rem 0}.aide-filters label{flex:1;min-width:0}.aide-filters select{display:block;width:100%;margin-top:.4rem;padding:.7rem;border:1px solid #768993;border-radius:10px;font:inherit;background:#fff}.aide-filters p{flex:1;margin:0}.aide-card details{border-top:1px solid #d4e0e5;padding-top:.75rem;margin-top:.75rem}.aide-card summary{cursor:pointer;font-weight:700}.aide-card details dl{margin-top:1rem}
.analysis-search{display:block;margin-bottom:1rem;max-width:36rem}
.home-shortcuts{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.5rem}.home-shortcuts a{flex:1;text-align:center}
.home-updates>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.home-updates a{padding:1rem;background:#fff;border:1px solid #d4e0e5;border-radius:14px;text-decoration:none}.home-updates strong,.home-updates span{display:block}.home-updates span{font-size:.85rem;margin-top:.35rem;color:#526976}.home-updates h2{font-size:1.4rem}
.home-explore{display:flex;gap:1rem;flex-wrap:wrap}.home-explore a{flex:1;min-width:180px;padding:1rem;background:#fff;border:1px solid #d4e0e5;border-radius:14px}
[hidden]{display:none!important}
@media(max-width:760px){.site-search form,.aide-filters{flex-direction:column;align-items:stretch}.home-updates>div{grid-template-columns:1fr}.home-shortcuts a{flex:auto}.portrait-toc a{font-size:.9rem}.site-search form button{width:100%}}
.aide-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.aide-grid>.aide-card{margin:0;min-width:0}
.site-search input:focus-visible,.analysis-search input:focus-visible{outline:3px solid #df872b;outline-offset:3px}
.home-shortcuts{min-width:0}.home-shortcuts a{min-width:0}
main>.site-search{margin-top:24px}
@media(max-width:760px){main>.site-search{margin-top:18px}.home-updates a{padding:.8rem}}
.tourisme-office-list{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}.tourisme-office-list li{border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:4px}.tourisme-office-list strong{font-size:15px;line-height:1.35}.tourisme-office-list span{font-size:14px;color:var(--muted)}.tourisme-office-list .source-link{font-size:13px;margin-top:4px}.tourisme-offices>p{margin-top:12px}.portrait-tourisme>p{margin-top:12px}.portrait-tourisme h3{font-size:19px;margin-top:24px}.tourisme-places{padding-left:20px;margin:10px 0 0}.tourisme-places li{margin:8px 0;color:var(--muted)}.tourisme-places strong{color:var(--ink)}
.eau-chart{margin:24px 0}.eau-chart svg{width:100%;height:auto;display:block}.eau-chart rect.eau-bar{fill:#85b4c9}.eau-chart rect.eau-wet{fill:#1c5679}.eau-chart text{font-size:12px;fill:var(--muted)}.eau-chart figcaption{font-size:13px;color:var(--muted);margin-top:8px}.helper-inline{font-size:12px;color:var(--muted)}.source-note{font-size:13px;color:var(--muted);margin-top:20px}
.elec-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}.elec-kpis div{display:grid;gap:2px;padding:12px;border-radius:12px;background:var(--light)}.elec-kpis strong{font-size:22px;font-family:Manrope,Arial,sans-serif}.elec-kpis span{font-size:12px;color:var(--muted)}

/* Catalogue de téléchargement : tableau lisible et défilement local sur mobile. */
.donnees-table{overflow-x:auto;border:1px solid #d5e0e5;border-radius:16px}.donnees-table table{width:100%;border-collapse:collapse;min-width:1000px}.donnees-table th,.donnees-table td{padding:16px;text-align:left;vertical-align:top;border-bottom:1px solid #d5e0e5}.donnees-table thead{background:#e7f1f6}.donnees-table caption{text-align:left;padding:16px;font-weight:700}.donnees-table a{overflow-wrap:anywhere}.donnees-table:focus-visible{outline:3px solid #006da4;outline-offset:4px}

/* Recherche discrète dans la ligne supérieure, sans déplacer le contenu. */
.topline{align-items:center}
.topline-actions{display:flex;align-items:center;gap:18px;margin-left:auto}
.topline .site-search{position:relative;margin:0;padding:0;border:0;border-radius:0;background:transparent}
.topline .site-search>summary{display:flex;align-items:center;justify-content:flex-start;gap:7px;min-height:32px;font-size:12px;font-weight:600;color:var(--muted);border-radius:6px}
.topline .site-search>summary::-webkit-details-marker{display:none}
.topline .site-search>summary:hover,.topline .site-search[open]>summary{color:var(--accent)}
.topline .site-search svg{flex:none}
.search-popover{position:absolute;right:0;top:calc(100% + 10px);z-index:1000;width:min(420px,calc(100vw - 36px));max-height:70vh;overflow-y:auto;padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--white);box-shadow:0 12px 32px #17374b20;font-size:14px;color:var(--ink);text-align:left}
.topline .site-search form{margin:0 0 12px;align-items:end;gap:10px}
.topline .site-search form button{padding:10px 14px;font-size:13px}
.topline .site-search label{font-size:13px}
.topline .site-search input{font-size:16px}
.search-popover .search-results{margin-bottom:0}
@media(max-width:700px){.topline-actions{gap:12px}.topline .site-search form{flex-direction:column;align-items:stretch}.topline .site-search form button{width:100%}}
@media(max-width:380px){.topline-actions{gap:10px}.topline .site-search>summary span{display:none}.topline .site-search>summary{justify-content:center;width:32px}}

/* Contour du bouton de recherche, assorti au bandeau. */
.topline .site-search>summary{padding:5px 12px;border:1px solid #b6cbd7;border-radius:999px;background:var(--white);color:var(--ink);transition:border-color .15s,background-color .15s}
.topline .site-search>summary:hover,.topline .site-search[open]>summary{border-color:var(--accent);background:var(--light)}
@media(max-width:380px){.topline .site-search>summary{width:36px;padding:5px 0}}

/* Séparer le menu principal des accès rapides de l'accueil. */
.landing-seo>.home-shortcuts{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
@media(max-width:700px){.landing-seo>.home-shortcuts{margin-top:12px;padding-top:12px}}

/* Retour visuel des accès rapides au survol et au clavier. */
.home-shortcuts a{transition:background-color .18s,color .18s,transform .18s,box-shadow .18s}
.home-shortcuts a:focus-visible{background:var(--ink);color:#e9f3f5;text-decoration:none}
@media(hover:hover){.home-shortcuts a:hover{background:var(--ink);color:#e9f3f5;transform:translateY(-2px);box-shadow:0 4px 10px #17374b18;text-decoration:none}}
.home-shortcuts a:active{transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.home-shortcuts a{transition:none}.home-shortcuts a:hover{transform:none}}
.patrimoine-list li span{display:block;font-size:14px}.portrait-patrimoine details{margin-top:14px}.portrait-patrimoine summary{font-weight:650}
.home-week-card{display:flex;align-items:center;gap:28px;background:var(--ink);color:#fff;border-radius:20px;padding:28px 32px}.home-week-card strong{font-family:Manrope,Arial,sans-serif;font-size:clamp(40px,6vw,64px);letter-spacing:-2px;white-space:nowrap}.home-week-card p{font-size:17px}.home-week-card .text-link{color:#9ccbe0;margin-top:10px}.home-week .eyebrow{color:var(--muted)}
.duel-panel{margin-bottom:40px}.duel-select{display:flex;gap:16px;align-items:end;flex-wrap:wrap;margin-bottom:20px}.duel-select label{display:flex;flex-direction:column;gap:6px;flex:1;min-width:200px}.duel-select span{font-family:Manrope,Arial,sans-serif;font-weight:800;padding-bottom:12px}#duel-canvas{width:100%;max-width:540px;height:auto;display:block;margin:0 auto;border-radius:14px;border:1px solid var(--line)}
@media(max-width:760px){.home-week-card{flex-direction:column;align-items:flex-start;gap:10px;padding:22px}}
/* Accessibility: touch targets of at least 24px (WCAG 2.2 AA) and readable decorative map labels */
.source-link{padding-block:3px}.text-link{padding-block:2px}.seo-related a,.seo-footer a,th a{display:inline-block;padding-block:4px}
.feature-card h2.feature-card-title{font-size:24px;margin-bottom:16px}
.ocean-label{color:#5f7686}.north{color:#5e6d76}.concept-number .concept-separator{color:#5e7a7c}
.article-body>a{display:inline-block;padding-block:2px}
nav.breadcrumb{display:block;gap:0;font-weight:400}nav.breadcrumb a{display:inline-block;min-height:0;padding-block:4px}
@media(max-width:760px){.elec-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.elec-kpis strong{font-size:19px}}
/* Charts (scripts/charts.py + charts.js) */
.viz{margin:28px 0;padding:0}.viz-title{font-family:Manrope,Arial,sans-serif;font-weight:750;font-size:17px;margin-bottom:10px;color:var(--ink)}.viz svg{width:100%;height:auto;display:block;overflow:visible}
.viz figcaption{font-size:13px;color:var(--muted);margin-top:8px}.viz-label{font-size:13px;fill:#3d4f59}.viz-value{font-size:13px;fill:#3d4f59;font-weight:600}.viz-strong{fill:var(--ink);font-weight:800}
.viz-grid{stroke:#e3e8ea;stroke-width:1}.viz-axis{stroke:#9aa8ae;stroke-width:1}.viz-ref{stroke:#5e6d76;stroke-width:1.5;stroke-dasharray:4 4}
.viz-mark{cursor:default;outline:none}.viz-mark:hover rect:not([fill=transparent]),.viz-mark:focus rect:not([fill=transparent]){filter:brightness(1.12)}.viz-mark:focus-visible{outline:3px solid #df872b;outline-offset:2px}
a .viz-mark{cursor:pointer}.viz-commune{stroke:#fff;stroke-width:1.2;cursor:pointer;transition:fill .25s}.viz-commune:hover,.viz-commune:focus{stroke:#17374b;stroke-width:2.5}
.viz-legend{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:#3d4f59;margin-bottom:6px}.viz-legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.viz-scale{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:#3d4f59;margin-top:8px;align-items:center}.viz-scale i{display:inline-block;width:18px;height:12px;border-radius:2px;margin-right:5px;vertical-align:-1px}.viz-scale small{width:100%;color:var(--muted)}
.viz-map-wrap{max-width:560px;margin:0 auto}.viz-switch{display:flex;gap:10px;align-items:center;font-size:14px;font-weight:650;margin-bottom:8px}.viz-switch select{min-height:40px;padding:6px 34px 6px 10px}
.viz-table{margin-top:10px;font-size:14px}.viz-table summary{font-weight:650;cursor:pointer}
.viz-versus{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center}.viz-versus>div:not(.viz-vs){background:var(--light);border-radius:14px;padding:18px;text-align:center}.viz-versus strong{display:block;font-family:Manrope,Arial,sans-serif;font-size:clamp(30px,6vw,46px);letter-spacing:-1px;color:var(--ink)}.viz-versus>div:first-child strong{color:#1c5cab}.viz-versus span{font-size:14px;color:#3d4f59}.viz-vs{font-weight:800;color:var(--muted)}
.viz-tip{position:fixed;z-index:1000;background:#17374b;color:#fff;font-size:13px;font-weight:600;padding:6px 10px;border-radius:8px;pointer-events:auto;max-width:260px;box-shadow:0 4px 14px #0003}
@media(prefers-reduced-motion:reduce){.viz-commune{transition:none}}
.viz-small{font-size:11px;fill:#5e6d76}
.viz-bars{display:flex;flex-direction:column;gap:4px;position:relative}.viz-row{display:grid;grid-template-columns:minmax(110px,30%) 1fr auto;gap:10px;align-items:center;font-size:14px;color:#3d4f59;padding:3px 4px;border-radius:6px;text-decoration:none}
a.viz-row:hover,.viz-row:focus-visible{background:var(--light)}.viz-row-label{text-align:right;line-height:1.25}.viz-row-track{position:relative;height:18px}.viz-row-track i{display:block;height:100%;background:#b8c3c9;border-radius:0 4px 4px 0}
.viz-row.is-hi{color:var(--ink);font-weight:800}.viz-row.is-hi .viz-row-track i{background:#2a78d6}.viz-row-value{font-weight:650;white-space:nowrap;min-width:52px}
.has-ref .viz-row-track::after{content:"";position:absolute;left:var(--ref);top:-3px;bottom:-3px;border-left:1.5px dashed #5e6d76}.viz-ref-note{font-size:13px;color:#3d4f59;margin-top:6px}.viz-ref-note i{display:inline-block;width:14px;border-top:1.5px dashed #5e6d76;margin-right:6px;vertical-align:middle}
.viz-strip-row{margin:6px 0 14px}.viz-strip-row>p:first-child{display:flex;justify-content:space-between;gap:10px;font-size:14px;color:#3d4f59}.viz-strip-row strong{color:#1c5cab}
.viz-strip-track{position:relative;height:26px;border-bottom:1px solid #dfe5e8;margin:2px 8px 0}.viz-dot{position:absolute;bottom:-5px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:#b8c3c9;border:1.5px solid #fff}
.viz-dot.is-hi{width:18px;height:18px;margin-left:-9px;bottom:-9px;background:#2a78d6;border:2px solid #fff;z-index:1}.viz-strip-ends{display:flex;justify-content:space-between;font-size:12px;color:#5e6d76;margin:8px 8px 0}
@media(max-width:560px){.viz-row{grid-template-columns:minmax(90px,38%) 1fr auto;font-size:13px;gap:6px}}
@media(max-width:560px){.viz-row{grid-template-columns:1fr auto;row-gap:2px}.viz-row-label{grid-column:1/-1;text-align:left}}
.viz-switch{flex-wrap:wrap}.viz-switch select{max-width:100%;flex:1 1 220px;min-width:0}

/* Fil d’Ariane placé plus haut dans les blocs de titre. */
main .breadcrumb:first-child{margin-top:0;margin-bottom:16px;color:#5e6d75;font-weight:500}
/* Discreet hover on buttons (pointer devices only; colour changes only, no movement) */
@media(hover:hover){
.primary-button,.outline-button,.analysis-filters button,.portrait-toc a,.menu-toggle{transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease}
a.primary-button:hover,a.outline-button:hover{text-decoration:none}
.primary-button:not(:disabled):hover{background-color:#27536f;box-shadow:0 3px 10px #17374b24}
.history-home .primary-button:not(:disabled):hover{background-color:#eaf2f6;box-shadow:none}
.landing-seo .home-hero .primary-button:not(:disabled):hover{background-color:#c3efe8;box-shadow:none}
.outline-button:not(:disabled):hover,.menu-toggle:hover{border-color:var(--accent);background-color:var(--light)}
.analysis-filters button:not([aria-pressed=true]):hover{border-color:var(--accent);background-color:var(--light)}
.analysis-filters button[aria-pressed=true]:hover{background-color:#27536f}
.portrait-toc a:hover{background-color:#d6e9ef;text-decoration:none}
}
/* Apple-style motion (anim.js). Active only with html.anim-on, set in <head> unless the visitor prefers reduced motion. */
.anim-on .rv{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*70ms)}
.anim-on .rv-card{transform:translateY(22px) scale(.985)}
.anim-on .rv.is-in{opacity:1;transform:none}
.anim-on .viz:not(.is-in) .viz-row-track i{transform:scaleX(0)}
.anim-on .viz-row-track i{transform-origin:left;transition:transform .9s cubic-bezier(.2,.7,.2,1) calc(.2s + var(--i,0)*45ms)}
.anim-on .viz:not(.is-in) svg rect:not([fill=transparent]),.anim-on .eau-chart:not(.is-in) rect{transform:scaleY(0)}
.anim-on .viz svg rect,.anim-on .eau-chart rect{transform-box:fill-box;transform-origin:bottom;transition:transform .8s cubic-bezier(.2,.7,.2,1) calc(.15s + var(--i,0)*40ms)}
.anim-on .viz:not(.is-in) .viz-commune{opacity:0}
.anim-on .viz-commune{transition:opacity .5s ease calc(.1s + var(--i,0)*35ms),fill .25s}
.anim-on .viz:not(.is-in) .viz-dot{opacity:0;transform:scale(.3)}
.anim-on .viz-dot{transition:opacity .4s ease calc(.2s + var(--i,0)*25ms),transform .5s cubic-bezier(.3,1.4,.5,1) calc(.2s + var(--i,0)*25ms)}
.anim-on .home-hero h1.words .w{display:inline-block;opacity:0;transform:translateY(.45em);filter:blur(6px);transition:opacity .7s ease calc(var(--w)*70ms),transform .8s cubic-bezier(.2,.7,.2,1) calc(var(--w)*70ms),filter .7s ease calc(var(--w)*70ms)}
.anim-on .home-hero h1.words-in .w{opacity:1;transform:none;filter:none}
.anim-on .zoom-frame{overflow:hidden}.anim-on .zoom-frame img{will-change:transform;transform-origin:center}
@media(min-width:901px){
.anim-on body:not(:has(.portrait-switcher)) .header{position:sticky;top:10px;z-index:60;transition:background-color .3s,box-shadow .3s}
.anim-on.scrolled body:not(:has(.portrait-switcher)) .header{background:rgba(255,255,255,.74);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:0 8px 30px #17374b14}}
@media(prefers-reduced-motion:no-preference){@view-transition{navigation:auto}::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}}
/* Sticky story (poverty page) */
.story{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin:36px 0}
.story-visual{position:sticky;top:22vh;height:56vh;display:grid;place-items:center;background:var(--ink);border-radius:28px;overflow:hidden}
.story-slide{grid-area:1/1;text-align:center;padding:24px;color:#fff;opacity:0;transform:scale(.94);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.story-slide.on{opacity:1;transform:none}
.story-slide strong{display:block;font-family:Manrope,Arial,sans-serif;font-size:clamp(64px,9vw,120px);letter-spacing:-3px;line-height:1}
.story-slide span{display:block;margin-top:14px;font-size:18px;color:#cfe3ee}
.story-step{min-height:62vh;display:flex;flex-direction:column;justify-content:center;padding-left:18px;border-left:3px solid transparent;transition:border-color .4s ease}
.story-step.on{opacity:1}.story-step h3,.story-step .story-title{font-size:clamp(24px,3vw,32px);margin-bottom:10px}.story-step p{font-size:17px}
.story:not(.story-live) .story-visual{position:static;height:auto;display:block;padding:20px}
.story:not(.story-live) .story-slide{opacity:1;transform:none;margin:12px 0}
.story:not(.story-live) .story-step{opacity:1;min-height:0;margin:20px 0}
@media(max-width:900px){.story{grid-template-columns:1fr;gap:0}.story-visual{top:8px;height:34vh;z-index:5;border-radius:22px}.story-step{min-height:58vh;padding:0 4px}.story-slide span{font-size:15px}}
@media(prefers-reduced-motion:reduce){.story-slide,.story-step{transition:none}}
.panel:has(.story),.analysis-long:has(.story){overflow:visible}
@media print{.anim-on .rv,.anim-on .viz-row-track i,.anim-on .viz-commune,.anim-on .viz-dot{opacity:1!important;transform:none!important}}
.story-slide strong{font-size:clamp(52px,6.2vw,104px);white-space:nowrap}

/* Catalogue pagination: jump straight to a page */
#catalogue-page{display:inline-flex;align-items:center;gap:6px}#catalogue-goto{min-height:44px;padding:6px 30px 6px 10px;font-weight:650;width:auto}

/* Hub pages (« Vivre à La Réunion »): compact hero, cards led by one key figure, commune band */
.hub-page{padding-bottom:24px}
.hub-hero{padding:44px 0 4px;max-width:780px}
.hub-hero h1{font-size:clamp(2.2rem,4.2vw,3.3rem);letter-spacing:-.045em;line-height:1.08}
.hub-lead{color:var(--muted);font-size:1.08rem;line-height:1.55;margin-top:14px;max-width:640px}
.hub-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:30px}
.hub-card{position:relative;display:flex;flex-direction:column;min-height:200px;padding:18px 18px 16px;border-radius:20px;background:#f3f6f7;border:1px solid #e4ebee;color:var(--ink);text-decoration:none;transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,border-color .25s}
.hub-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px #17374b17;border-color:#cfdde3;text-decoration:none}
.hub-card:focus-visible{outline:3px solid #df872b;outline-offset:3px}
.hub-card-top{display:flex;align-items:center;gap:10px}
.hub-icon{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:#ffffffc4}
.hub-icon svg{width:20px;height:20px}
.hub-kicker{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.hub-figure{margin-top:22px;font-family:Manrope,Arial,sans-serif;font-size:clamp(2rem,3vw,2.5rem);font-weight:800;letter-spacing:-.045em;line-height:1.05}
.hub-unit{margin-top:4px;font-size:14px;line-height:1.4;color:var(--muted)}
.hub-dest{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:18px;font-size:14px;font-weight:700}
.hub-dest span{transition:transform .25s}
.hub-card:hover .hub-dest span{transform:translateX(4px)}
.tone-a{background:#eaf4f6;border-color:#d6e9ee}.tone-a .hub-icon,.tone-a .hub-kicker{color:#0d6680}
.tone-b{background:#eef0fa;border-color:#dde1f3}.tone-b .hub-icon,.tone-b .hub-kicker{color:#3a4aa6}
.tone-c{background:#fbf4e7;border-color:#f1e3c6}.tone-c .hub-icon,.tone-c .hub-kicker{color:#975200}
.tone-d{background:#f9eeec;border-color:#f0dcd8}.tone-d .hub-icon,.tone-d .hub-kicker{color:#a63a32}
.hub-band{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px 28px;margin-top:22px;padding:24px 28px;border-radius:22px;background:#17374b;color:#fff}
.hub-band h2{font-size:1.45rem;color:#fff}.hub-band p{margin-top:6px;color:#c9dbe4;font-size:15px;max-width:520px}
.hub-commune{display:flex;gap:10px;flex-wrap:wrap}
.hub-commune select{min-width:220px;border:0;background:#fff;color:#17374b;font-weight:650}
.hub-band .primary-button{background:#a8e6dd;color:#102f43;border:0;font-weight:700}
.hub-more{margin-top:18px}
@media(max-width:1020px){.hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.hub-hero{padding-top:26px}.hub-grid{gap:10px;margin-top:22px}.hub-card{min-height:0;padding:14px 14px 13px;border-radius:16px}.hub-icon{width:30px;height:30px;border-radius:9px}.hub-icon svg{width:17px;height:17px}.hub-kicker{font-size:11px;letter-spacing:.06em}.hub-figure{margin-top:14px;font-size:1.7rem}.hub-unit{font-size:13px}.hub-dest{padding-top:12px;font-size:13px}.hub-band{padding:20px}.hub-commune,.hub-commune select,.hub-commune button{width:100%}}

/* Lighter rhythm across the site (12 Oct 2026): thinner top bar and header, tighter sections, calmer headings */
.topline{padding:10px 4px 8px}
.header{padding:14px 24px;border-radius:16px;box-shadow:0 4px 16px #233b410b}
.intro{padding-top:36px;padding-bottom:20px}
h1{font-size:clamp(2.1rem,3.7vw,3.3rem)}
.lead{font-size:16.5px;line-height:1.6;margin-top:14px}
.section{margin-top:46px}
.section-heading{margin-bottom:18px}
.section-heading h2{font-size:clamp(1.5rem,2.4vw,1.9rem)}
.panel{padding:24px 26px}
.mission{padding:30px;margin-bottom:44px;gap:40px}
.feature-card{padding:22px}
.analysis-long{padding:28px 30px}
@media(max-width:760px){.topline{padding:8px 0 6px}.header{padding:12px 14px}.intro{padding-top:22px;padding-bottom:12px}.section{margin-top:32px}.panel,.analysis-long{padding:20px 18px}.mission{padding:22px}.lead{font-size:15.5px}}

/* Footer site map in columns */
.seo-footer{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 28px;width:100%;margin-top:22px;padding-top:22px;border-top:1px solid var(--line);font-size:13.5px}
.seo-footer>div{display:flex;flex-direction:column;gap:7px;min-width:0}
.seo-footer a{color:var(--muted);text-decoration:none}.seo-footer a:hover{color:var(--ink);text-decoration:underline}
.seo-footer .seo-footer-title{margin:0 0 3px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.seo-footer .seo-footer-title a{color:var(--ink)}
@media(max-width:760px){.seo-footer{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
.seo-footer>div a{padding-block:2px}
.hub-grid-tight{margin-top:22px}
.hub-unit-text{margin-top:18px;font-size:14.5px;line-height:1.5;color:var(--ink)}
.hub-note{padding:16px 20px;border-radius:16px;background:var(--light);font-size:14.5px;color:var(--muted)}.hub-note strong{color:var(--ink)}

/* Analyses library: lighter cards, two labelled groups */
.reading-grid{gap:14px}
.reading-split{grid-column:1/-1;margin:14px 0 2px;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.reading-split:first-child{margin-top:0}
.reading-card summary,.analysis-dossier{padding:20px}
.reading-card h2{font-size:19px;margin-bottom:10px}
.reading-card .analysis-excerpt,.analysis-dossier>p:not(.eyebrow){margin-bottom:12px}
.analysis-dossier .primary-button{display:inline-flex;align-items:center;min-height:0;padding:0;border:0;background:none;color:var(--accent);font-weight:700;box-shadow:none}
.analysis-dossier .primary-button:hover{background:none;text-decoration:underline}

/* Dossiers first, then reading notes, whatever their order in the page */
.reading-split[data-group="dossier"]{order:-3}.reading-grid .analysis-dossier{order:-2}.reading-split[data-group="note"]{order:-1}

/* Key figures under the title of analysis pages */
.key-figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:22px 0 6px}
.key-fig{display:flex;flex-direction:column;gap:3px;margin:0;padding:14px 16px;border-radius:14px;background:#eef4f6;border:1px solid #dde8ec}
.key-fig strong{font-family:Manrope,Arial,sans-serif;font-size:clamp(1.35rem,2.2vw,1.75rem);font-weight:800;letter-spacing:-.035em;line-height:1.15;color:var(--ink)}
.key-fig span{font-size:13.5px;line-height:1.4;color:var(--muted)}
@media(max-width:560px){.key-figs{grid-template-columns:1fr;gap:8px}.key-fig{flex-direction:row;align-items:baseline;gap:10px;padding:11px 14px}.key-fig strong{font-size:1.3rem;flex:none}}

/* ===== « Vivre à La Réunion » : editorial hero + asymmetric mosaic (bento) ===== */
.v-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:40px;padding:34px 0 10px}
.v-kicker{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.v-hero h1{margin-top:12px;font-size:clamp(2.8rem,6.2vw,5.4rem);line-height:.98;letter-spacing:-.055em}
.v-hero h1 span{color:#2b7f9e}
.v-lead{margin-top:20px;max-width:470px;font-size:1.08rem;line-height:1.6;color:var(--muted)}
.v-jump{display:inline-flex;gap:8px;margin-top:22px;padding:10px 16px;border-radius:999px;border:1px solid var(--line);font-size:14px;font-weight:700;color:var(--ink);text-decoration:none}
.v-jump:hover{border-color:var(--accent);text-decoration:none}
.v-hero-media{position:relative;height:clamp(300px,34vw,430px)}
.v-hero-main{position:absolute;inset:0 0 0 8%;width:92%;height:100%;object-fit:cover;border-radius:34px 34px 34px 120px;box-shadow:0 24px 50px #17374b26}
.v-hero-round{position:absolute;left:-2%;bottom:-6%;width:clamp(110px,13vw,170px);height:clamp(110px,13vw,170px);object-fit:cover;border-radius:50%;border:6px solid var(--paper);box-shadow:0 12px 30px #17374b2e}
.v-hero-badge{position:absolute;right:-10px;top:22px;display:flex;flex-direction:column;padding:12px 16px;border-radius:16px;background:#fff;box-shadow:0 12px 30px #17374b22;transform:rotate(2.5deg)}
.v-hero-badge strong{font-family:Manrope,Arial,sans-serif;font-size:1.5rem;font-weight:800;letter-spacing:-.03em;color:#17374b}
.v-hero-badge span{font-size:12.5px;color:#5e6d76}

.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:minmax(170px,auto);gap:14px;margin-top:44px;
 grid-template-areas:"sante sante sante mobile mobile serv" "sante sante sante elec routes serv" "eau eau pauv pauv pauv elus" "eau eau pauv pauv pauv elus"}
.b-sante{grid-area:sante}.b-mobile{grid-area:mobile}.b-serv{grid-area:serv}.b-elec{grid-area:elec}.b-routes{grid-area:routes}.b-eau{grid-area:eau}.b-pauv{grid-area:pauv}.b-elus{grid-area:elus}
.b{position:relative;display:flex;flex-direction:column;overflow:hidden;padding:20px;border-radius:24px;color:var(--ink);text-decoration:none;isolation:isolate;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.b:hover{transform:translateY(-4px);box-shadow:0 20px 40px #17374b24;text-decoration:none}
.b:focus-visible{outline:3px solid #df872b;outline-offset:3px}
.b-kicker{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.b-num{margin-top:auto;font-family:Manrope,Arial,sans-serif;font-size:2.2rem;font-weight:800;letter-spacing:-.05em;line-height:1}
.b-num-l{font-size:clamp(2.6rem,4.2vw,3.6rem)}.b-num-xl{font-size:clamp(3.6rem,7vw,6.2rem)}
.b-unit{margin-top:6px;font-size:14px;line-height:1.45;max-width:30ch}
.b-dest{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:14px;font-weight:700}
.b-go{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:currentColor;transition:transform .3s}
.b-go{color:inherit}.b:hover .b-go{transform:translateX(4px)}
.b-go{background:transparent;border:1.5px solid currentColor}
/* photo cards */
.b-photo{color:#fff;padding:22px;min-height:200px}
.b-img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.b-photo:hover .b-img{transform:scale(1.05)}
.b-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#0b1d2700 20%,#0b1d27b8 75%,#0b1d27e6)}
.b-body{display:flex;flex-direction:column;margin-top:auto}
.b-photo .b-num{margin-top:8px;color:#fff}.b-photo .b-unit{color:#e3eef3}.b-photo .b-kicker{color:#fff;opacity:.9}
.b-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.b-chips span{padding:5px 10px;border-radius:999px;background:#ffffff26;backdrop-filter:blur(6px);font-size:12.5px;font-weight:600}
.b-sante{border-radius:28px 28px 28px 90px}
.b-eau{border-radius:90px 24px 24px 24px}
/* colour block */
.b-solid{background:#0f4c5c;color:#fff}
.b-solid .b-kicker{color:#9fe0e8}.b-solid .b-unit{color:#d3eef2}
.b-deco{position:absolute;right:-18px;top:-10px;width:190px;height:190px;fill:none;stroke:#ffffff1f;stroke-width:2.2;stroke-linecap:round}
/* tinted blocks with shapes */
.b-tint{border:1px solid transparent}
.b-ring-num{display:grid;place-items:center;width:118px;height:118px;margin:auto 0 0;border-radius:50%;border:2px dashed currentColor;color:#3a4aa6}
.b-ring-num strong{font-family:Manrope,Arial,sans-serif;font-size:2rem;font-weight:800;letter-spacing:-.04em;color:var(--ink)}
.b-serv .b-unit{margin-top:12px}
.b-routes .b-num{color:#a63a32}
.b-donut{display:grid;place-items:center;width:132px;height:132px;margin:18px 0 0;border-radius:50%;background:conic-gradient(#0d6680 calc(var(--p)*1%),#cfe3e9 0)}
.b-donut strong{display:grid;place-items:center;width:96px;height:96px;border-radius:50%;background:#eaf4f6;font-family:Manrope,Arial,sans-serif;font-size:1.6rem;font-weight:800;letter-spacing:-.03em}
.b-elus .b-unit{margin-top:14px}
/* data card */
.b-data{background:#fff;border:1px solid var(--line)}
.b-data .b-num{margin-top:14px;color:#a85a00}
.b-bars{display:flex;flex-direction:column;gap:10px;margin-top:18px;max-width:520px}
.b-bar{display:flex;flex-direction:column;gap:6px}
.b-bar em{font-style:normal;font-size:13px;font-weight:700;color:var(--ink)}
.b-track{display:block;height:12px;border-radius:999px;background:#f1e7d8;overflow:hidden}
.b-track i{display:block;height:100%;border-radius:999px;background:#d9822b}
.b-bar-muted em{color:var(--muted)}.b-bar-muted .b-track i{background:#8fa1aa}
/* credits */
.v-credits{margin-top:18px;font-size:13px;color:var(--muted)}.v-credits summary{cursor:pointer;font-weight:600}.v-credits ul{margin:10px 0 0;padding-left:18px;line-height:1.7}
@media(max-width:1020px){.v-hero{grid-template-columns:1fr;gap:28px}.v-hero-media{height:clamp(240px,52vw,380px)}
 .bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"sante sante" "mobile mobile" "serv elec" "routes elus" "eau eau" "pauv pauv"}
 .b-sante{min-height:340px}.b-eau{min-height:300px}}
@media(max-width:560px){.v-hero{padding-top:20px}.v-hero-badge{right:4px;top:12px}.v-hero-round{left:2%;border-width:4px}.bento{gap:10px;margin-top:34px}
 .b{padding:16px;border-radius:20px}.b-sante{border-radius:22px 22px 22px 60px;min-height:320px}.b-eau{border-radius:60px 20px 20px 20px}
 .b-ring-num{width:92px;height:92px}.b-ring-num strong{font-size:1.6rem}.b-donut{width:104px;height:104px}.b-donut strong{width:76px;height:76px;font-size:1.3rem}.b-unit{font-size:13px}}

/* Mosaic compositions per page (tiles are placed by grid-area k1…k8) */
.bento-eco,.bento-dec{grid-template-areas:none}
.bento-eco{grid-template-areas:"k1 k1 k1 k2 k2 k3" "k1 k1 k1 k4 k4 k3" "k5 k7 k7 k7 k6 k8" "k5 k7 k7 k7 k6 k8"}
.bento-dec{grid-template-areas:"k1 k1 k1 k2 k3 k3" "k1 k1 k1 k2 k4 k4" "k5 k5 k6 k7 k7 k8" "k5 k5 k6 k7 k7 k8"}
.bento-eco .b:nth-child(1),.bento-dec .b:nth-child(1){border-radius:28px 28px 90px 28px;min-height:360px}
.bento-eco .b:nth-child(7){border-radius:24px 90px 24px 24px}
.bento-dec .b:nth-child(5){border-radius:24px 24px 24px 90px}
.b-photo .b-unit-text{margin-top:8px;font-size:15px;color:#fff;max-width:34ch}
.b-tint .b-unit-text,.b-solid .b-unit-text{margin-top:auto}
.b-solid-navy{background:#17374b}.b-solid-navy .b-kicker{color:#9fd0e6}
.b-solid-amber{background:#8a4b0f}.b-solid-amber .b-kicker{color:#ffd9a8}.b-solid-amber .b-unit{color:#fbe7cf}
.b-solid-teal{background:#0f4c5c}
.b-solid-brand{background:linear-gradient(135deg,#1f6f86,#c4561f)}.b-solid-brand .b-kicker{color:#fff3e6}.b-solid-brand .b-unit{color:#fff}
.b-solid .b-num{color:#fff}
@media(max-width:1020px){
 .bento-eco{grid-template-areas:"k1 k1" "k2 k3" "k4 k4" "k5 k6" "k7 k7" "k8 k8"}
 .bento-dec{grid-template-areas:"k1 k1" "k2 k3" "k2 k4" "k5 k5" "k6 k8" "k7 k7"}
 .bento-eco .b:nth-child(1),.bento-dec .b:nth-child(1){min-height:320px}}

/* Editorial opening on every page with a photo: bigger image, asymmetric corners, large title */
.editorial-photo-heading{grid-template-columns:minmax(0,1fr) minmax(0,44%);gap:40px}
.editorial-photo-heading h1{font-size:clamp(2.4rem,4.6vw,4.2rem);line-height:1.02;letter-spacing:-.05em}
.editorial-photo{max-width:none;position:relative}
.editorial-photo img{height:clamp(220px,25vw,320px);border-radius:30px 30px 30px 96px;box-shadow:0 22px 44px #17374b24}
.editorial-photo figcaption{margin-top:10px;text-align:right}
.analysis-long .editorial-photo-heading{grid-template-columns:minmax(0,1fr) minmax(0,40%);gap:28px}
.analysis-long .editorial-photo-heading h1{font-size:clamp(2.1rem,3.6vw,3.2rem)}
.analysis-long .editorial-photo img{height:clamp(200px,22vw,270px);border-radius:26px 26px 26px 80px}
.b-num{white-space:nowrap}
@media(max-width:760px){.editorial-photo-heading{grid-template-columns:1fr;gap:16px}.editorial-photo img{height:clamp(190px,52vw,260px);border-radius:24px 24px 24px 70px}.editorial-photo figcaption{text-align:left}.editorial-photo-heading h1,.analysis-long .editorial-photo-heading h1{font-size:clamp(2rem,9vw,2.6rem)}}

/* Home: photo behind the opening, rubrics mosaic, staged figure of the week */
.landing-seo .home-hero{position:relative;overflow:hidden;isolation:isolate;background:#0f2a3a url("assets/communes/galerie/97422-3.webp") center 60%/cover;border-radius:34px 34px 34px 110px;min-height:520px}
.landing-seo .home-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,#0c2230f2 0%,#0c2230d9 42%,#0c223066 75%,#0c223033)}
.landing-seo .home-hero h1{font-size:clamp(2.6rem,5.2vw,4.6rem);line-height:1.02;letter-spacing:-.05em}
.landing-seo .home-hero .commune-picker{background:#ffffffeb;color:#17374b;border-radius:24px;box-shadow:0 20px 50px #0000004d;backdrop-filter:blur(8px)}
.bento-home{margin-top:20px;grid-template-areas:"k1 k1 k2 k2 k3 k6" "k1 k1 k4 k5 k5 k6"}
.bento-home .b:nth-child(1){border-radius:28px 28px 28px 90px;min-height:360px}
.bento-home .b:nth-child(5){border-radius:24px 24px 90px 24px}
.home-week-card{border-radius:28px 90px 28px 28px;padding:34px 40px}
.home-week-card strong{font-size:clamp(52px,8vw,96px);letter-spacing:-.05em}
@media(max-width:1020px){.bento-home{grid-template-areas:"k1 k1" "k2 k2" "k3 k4" "k5 k5" "k6 k6"}.landing-seo .home-hero{min-height:0;border-radius:28px 28px 28px 70px}}
@media(max-width:760px){.landing-seo .home-hero::before{background:linear-gradient(180deg,#0c2230e6,#0c2230cc 60%,#0c2230b3)}.home-week-card{border-radius:24px 60px 24px 24px;padding:24px}}

/* Ma commune: the 24 communes as photo tiles */
.c-tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:150px;gap:10px;margin-top:20px}
.c-tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;padding:12px 14px;border-radius:18px;color:#fff;text-decoration:none;isolation:isolate;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.c-tile:hover{transform:translateY(-3px);box-shadow:0 16px 32px #17374b2e;text-decoration:none}
.c-tile:focus-visible{outline:3px solid #df872b;outline-offset:3px}
.c-tile-big{grid-column:span 2;grid-row:span 2;border-radius:24px 24px 24px 70px;padding:18px 20px}
.c-img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.c-tile:hover .c-img{transform:scale(1.06)}
.c-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#0b1d2700 35%,#0b1d27cc)}
.c-name{font-family:Manrope,Arial,sans-serif;font-size:15px;font-weight:800;letter-spacing:-.01em;line-height:1.2}
.c-tile-big .c-name{font-size:clamp(1.3rem,2vw,1.8rem);letter-spacing:-.03em}
.c-pop{font-size:12px;color:#e3eef3}
@media(max-width:1020px){.c-tiles{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:130px;grid-auto-flow:dense}}
@media(max-width:560px){.c-tiles{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:120px;gap:8px}.c-tile-big{grid-row:span 2}}

/* ===== Fixes and additions 13 Oct 2026 ===== */
/* Home opening: provided photo of a Creole house as a tall image on the right, picker overlapping it */
.landing-seo .home-hero{background:#0f2a3a;align-items:end;min-height:560px}
.landing-seo .home-hero::before{content:none}
.landing-seo .home-hero::after{content:"";position:absolute;z-index:-1;right:44px;top:40px;width:min(38%,430px);height:calc(100% - 80px);background:url("assets/accueil/case-creole.jpg") center 58%/cover;border-radius:30px 30px 30px 110px}
.landing-seo .home-hero>div{min-width:0;align-self:center}
.landing-seo .home-hero h1{font-size:clamp(2.3rem,4.1vw,3.9rem);overflow-wrap:break-word}
.landing-seo .home-hero h1,.landing-seo .home-hero h1 .w{color:#fff}
.landing-seo .home-hero h1>span:not(.w),.landing-seo .home-hero h1>span:not(.w) .w{color:#81d4df}
.landing-seo .home-hero h1 span,.landing-seo .home-hero h1 .w{white-space:normal}
.landing-seo .home-hero .commune-picker{position:relative;z-index:1;max-width:400px;justify-self:start;margin:0 0 -6px -10px;padding:24px 26px;box-shadow:0 18px 40px #00000040}
@media(max-width:850px){.landing-seo .home-hero{min-height:0;align-items:start}
 .landing-seo .home-hero::after{position:static;order:2;width:100%;height:260px;border-radius:24px 24px 24px 80px}
 .landing-seo .home-hero .commune-picker{order:3;max-width:none;margin:-60px 12px 0}}
/* Text on photos: darker shade where the text sits, soft text shadow */
.b-shade{background:linear-gradient(180deg,#0b1d2714 0%,#0b1d2766 34%,#0b1d27c7 62%,#0b1d27f2 100%)}
.b-photo .b-body,.c-tile{text-shadow:0 1px 3px #00000059}
.c-shade{background:linear-gradient(180deg,#0b1d2700 25%,#0b1d27e0)}
/* Shadows: no resting shadow under photos (it looked like a grey smudge), lighter hover shadows */
.editorial-photo img,.v-hero-main{box-shadow:none}
.island-stat .editorial-photo img{border-radius:16px;height:130px}
.island-stat .editorial-photo figcaption{text-align:left}
.b:hover{box-shadow:0 12px 26px #17374b1f}.c-tile:hover{box-shadow:0 10px 22px #17374b1f}
/* « Quiz du jour » in the main menu only: a light sweep and a soft glow, looping */
.header nav a.nav-jeu{position:relative;overflow:hidden;isolation:isolate;animation:quizGlow 2.4s ease-in-out 2}
.header nav a.nav-jeu::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,#ffffff59 50%,transparent 70%);transform:translateX(-120%);animation:quizSweep 2.3s ease-in-out .3s 2}
@keyframes quizSweep{0%,55%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}
@keyframes quizGlow{0%,100%{box-shadow:0 4px 12px rgba(194,65,12,.25)}50%{box-shadow:0 4px 18px rgba(194,65,12,.5),0 0 0 4px rgba(194,65,12,.12)}}
@media(prefers-reduced-motion:reduce){.header nav a.nav-jeu,.header nav a.nav-jeu::after{animation:none}}
/* History: « Remonter le fil » as a lively illustrated timeline */
.history-overview{grid-template-columns:1fr;gap:26px;background:#17374b;color:#fff;padding:40px 40px 30px;border-radius:30px 30px 30px 110px}
.history-overview .eyebrow{color:#9fd0e6}.history-overview h2{color:#fff;font-size:clamp(2rem,4vw,3.2rem);letter-spacing:-.045em}.history-overview .lead{color:#c9dbe4;max-width:560px}
.ht-track{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin:8px 0 0;padding:0;list-style:none}
.ht-track::before{content:"";position:absolute;left:0;right:0;top:118px;height:2px;background:linear-gradient(90deg,#81d4df,#e3a24a)}
.ht-item{position:relative;display:flex;flex-direction:column;gap:8px}
.ht-low{margin-top:56px}
.ht-media{display:block;width:100%;height:150px;overflow:hidden;border-radius:22px 22px 22px 60px;border:3px solid #ffffff2e;background:#0b1d27}
.ht-low .ht-media{border-radius:60px 22px 22px 22px}
.ht-img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1);filter:sepia(.15) contrast(1.05)}
.ht-item:hover .ht-img{transform:scale(1.07)}
.ht-year{margin-top:6px;font-family:Manrope,Arial,sans-serif;font-size:clamp(2.4rem,4vw,3.4rem);font-weight:800;line-height:1;letter-spacing:-.05em;color:#81d4df}
.ht-item:nth-child(n+3) .ht-year{color:#f0b46a}
.ht-item h3{font-size:1.15rem;line-height:1.3}.ht-item h3 a{color:#fff;text-decoration:none}.ht-item h3 a:hover{text-decoration:underline}
.ht-item p{color:#d6e5ec;font-size:14.5px;line-height:1.55}
.ht-item .source-link{color:#9fbccb;font-size:12px}
.history-overview .text-link{color:#81d4df}.history-overview .v-credits{color:#9fbccb}.history-overview .v-credits a{color:#c9dbe4}
@media(max-width:900px){.ht-track{grid-template-columns:1fr 1fr;gap:26px 18px}.ht-low{margin-top:0}.ht-track::before{display:none}}
@media(max-width:560px){.history-overview{padding:24px 20px;border-radius:24px 24px 24px 70px}.ht-track{grid-template-columns:1fr}.ht-media{height:170px}}
/* Home opening, desktop: text and picker on the left, the Creole house fully visible on the right */
@media(min-width:851px){
 .landing-seo .home-hero{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:start;row-gap:26px}
 .landing-seo .home-hero>div{grid-column:1;grid-row:1}
 .landing-seo .home-hero .commune-picker{grid-column:1;grid-row:2;max-width:560px;margin:0;justify-self:stretch}
 .landing-seo .home-hero::after{width:min(40%,470px);height:calc(100% - 80px)}}
/* Tiles with a large rounded bottom-left corner: keep the text clear of the curve */
.bento-home .b:nth-child(1),.bento-dec .b:nth-child(5),.b-sante{padding-left:34px;padding-bottom:28px}
@media(max-width:760px){.bento-home .b:nth-child(1),.bento-dec .b:nth-child(5),.b-sante{border-bottom-left-radius:46px;padding-left:24px;padding-bottom:22px}
 .bento-eco .b:nth-child(1),.bento-dec .b:nth-child(1){border-bottom-right-radius:46px}.bento-eco .b:nth-child(7){border-top-right-radius:46px}.b-eau{border-top-left-radius:46px}}

/* Story steps: inactive text stays fully readable (contrast), the active step is marked by a coloured rule */
.story-step:not(.on) .story-title{color:var(--muted)}
.story-step.on{border-left-color:#d9822b}
/* Home opening (final): the Creole house as full background of the block, framed on the house, text and picker on top */
.landing-seo .home-hero{background:#0f2a3a url("assets/accueil/case-creole.jpg") center 64%/cover;align-items:center;min-height:540px}
.landing-seo .home-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,#0c2230f0 0%,#0c2230d1 40%,#0c223059 72%,#0c223026)}
.landing-seo .home-hero::after{content:none}
@media(min-width:851px){
 .landing-seo .home-hero{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center}
 .landing-seo .home-hero>div{grid-column:auto;grid-row:auto}
 .landing-seo .home-hero .commune-picker{grid-column:auto;grid-row:auto;max-width:400px;justify-self:end;margin:0}}
@media(max-width:850px){.landing-seo .home-hero{background-position:62% 60%}.landing-seo .home-hero::before{background:linear-gradient(180deg,#0c2230eb,#0c2230c7 55%,#0c2230a6)}.landing-seo .home-hero .commune-picker{margin:0}}
/* 2026-10-13 · RGAA : titres du pied de page et du sommaire des portraits (h2 au lieu de p/strong), focus des communes sur les cartes */
.seo-footer h2.seo-footer-title{font-family:inherit;line-height:1.4;color:inherit}
.portrait-toc>h2.portrait-toc-title{display:block;margin:0 0 .6rem;font-family:inherit;font-size:1rem;line-height:1.4;letter-spacing:0}
svg path[tabindex]:focus-visible,svg a:focus-visible path,svg a:focus-visible{outline:3px solid #df872b;outline-offset:1px;stroke:#df872b;stroke-width:3}
.contact-required{font-weight:400}
/* 2026-10-13 · HTML valide : les résumés des analyses utilisent des span au lieu de p */
.reading-card summary>span.eyebrow,.reading-card summary>span.analysis-excerpt,.reading-card summary>span.analysis-read{display:block}
/* 2026-10-13 · RGAA 10.12 : avec un espacement de texte agrandi, les grands chiffres peuvent passer à la ligne au lieu d'être coupés */
.b .b-num,.viz-versus strong{overflow-wrap:anywhere;white-space:normal}
.viz-versus{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
/* 2026-10-13 · RGAA 3.3 : contour visible (3:1) des listes de choix sans bordure */
.commune-control select,.hub-commune select{border:1px solid #768993}
/* 2026-10-13 · RGAA 9.3 : menus balisés en listes (ul/li), sans changer la mise en page */
.nav-list,.nav-list>li,.seo-footer .seo-list,.seo-footer .seo-list>li,.portrait-toc .seo-list>li{display:contents}
.seo-list{margin:0;padding:0;list-style:none}
.portrait-toc .seo-list{display:flex;flex-wrap:wrap;gap:.5rem}
.seo-related .seo-list,.seo-related .seo-list>li,main>.seo-list,main section>.seo-list,main section>.seo-list>li{display:inline}
.seo-related .seo-list>li:not(:last-child)::after,main section>.seo-list>li:not(:last-child)::after{content:" · "}
/* 2026-10-13 · RGAA 10.6 : dans le texte, les liens sont soulignés (ils avaient parfois la couleur du texte) */
main :is(p,li,td,th,dd,figcaption) a:not([class]),main .seo-related a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
main :is(p,li,td,th,dd,figcaption) a:not([class]):hover{text-decoration-thickness:2px}
/* 2026-10-13 · Version anglaise : sélecteur de langue dans la barre du haut, listes des pages en/ */
.lang-switch{position:relative;flex:none;width:auto;display:inline-flex;gap:0}
.lang-menu{position:relative}
.lang-menu>summary{list-style:none;display:inline-flex;align-items:center;gap:5px;min-height:30px;padding:2px 8px;border:1px solid #768993;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--ink);cursor:pointer}
.lang-menu>summary::-webkit-details-marker{display:none}
.lang-menu>summary::after{content:"▾";content:"▾"/"";font-size:10px;margin-left:1px}
.lang-menu[open]>summary,.lang-menu>summary:hover{background:var(--light)}
.lang-menu>summary:focus-visible{outline:3px solid #df872b;outline-offset:2px}
.lang-list{position:absolute;right:0;top:calc(100% + 6px);z-index:1000;min-width:150px;margin:0;padding:6px;list-style:none;background:var(--white);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px #17374b22}
.lang-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;font-size:14px;color:var(--ink);text-decoration:none}
a.lang-item:hover,a.lang-item:focus-visible{background:var(--light);text-decoration:underline}
a.lang-item:focus-visible{outline:3px solid #df872b;outline-offset:1px}
.lang-item.is-current{font-weight:700}
.lang-item.is-current::after{content:"✓";content:"✓"/"";margin-left:auto;color:var(--accent)}
.lang-flag{width:18px;height:12px;border-radius:2px;box-shadow:0 0 0 1px #0003;flex:none}
.topline-socials{display:inline-flex;align-items:center;gap:2px}
.topline-social{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:999px;color:var(--muted)}
.topline-social svg{width:15px;height:15px;fill:currentColor}
.topline-social:hover,.topline-social:focus-visible{color:var(--ink);background:var(--light)}
.topline-social:focus-visible{outline:3px solid #df872b;outline-offset:1px}
.topline-social-text{width:auto;padding:0 8px;font-size:12px;font-weight:600}
.en-page .en-links,.en-page .en-dates{padding-left:1.2rem;line-height:1.7}
.en-page .en-dates li{margin-bottom:.5rem}
.en-page .feature-grid{margin-top:1rem}
/* 2026-10-14 · RGAA 10.11 : la barre du haut (langue, apparence, recherche) passe à la ligne sur les petits écrans */
.topline,.topline-actions{flex-wrap:wrap;min-width:0}
@media(max-width:480px){.topline-actions{gap:8px 12px;justify-content:flex-end}.topline-actions>span:not([class]){display:none}}
/* 2026-10-14 · Recherche désormais en tête de la barre du haut : la fenêtre s'ouvre vers la droite, et sur toute la largeur sur mobile */
.topline .search-popover{left:0;right:auto}
@media(max-width:700px){.topline .site-search{position:static}.topline{position:relative}.topline .search-popover{left:0;right:0;width:auto}}
/* 2026-10-15 · Histoire : page des portraits */
.history-figures{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:16px;margin:24px 0}
.history-figure{display:flex;flex-direction:column;gap:6px;padding:20px}
.history-figure h2{margin:0;font-size:1.2rem;line-height:1.3}
.history-figure-dates{margin:0;color:var(--muted);font-size:14px;font-weight:600}
.history-figure p{margin:0}
.history-figure .text-link{margin-top:auto}
/* 2026-10-15 · Histoire : frise sur deux rangées (8 dates), portraits illustrés */
.ht-track{row-gap:34px}
.ht-track::before{display:none}
.ht-item:nth-child(n+5) .ht-year{color:#f0b46a}
.history-figure-photo{margin:0 0 6px}
.history-figure-photo img{display:block;width:100%;height:210px;object-fit:cover;object-position:top;border-radius:14px;filter:sepia(.1)}
.history-figure-photo figcaption{margin-top:4px;font-size:11.5px;color:var(--muted)}
/* 2026-10-17 · Pied de page : comptes officiels (X, TikTok) */
.footer-social{flex-basis:100%;width:100%;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:14px}
.footer-social .seo-footer-title{margin:0;font-family:inherit;font-size:12px;font-weight:700;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.footer-social .seo-list{display:flex;flex-wrap:wrap;gap:8px}
.footer-social a{display:inline-flex;align-items:center;min-height:32px;padding:4px 12px;border:1px solid #768993;border-radius:999px;font-size:13px;font-weight:600;color:var(--ink);text-decoration:none}
.footer-social a:hover,.footer-social a:focus-visible{background:var(--light);text-decoration:underline}
/* 2026-10-17 · Mobile : recherche, réseaux, apparence et langue sur une seule ligne (icônes seules ; les noms restent lus par les lecteurs d'écran) */
@media(max-width:560px){
.topline .topline-actions{flex-wrap:nowrap;gap:2px;justify-content:flex-end;width:100%}
.topline .site-search>summary>span,.topline .theme-toggle>span{display:none}
.topline .site-search>summary{width:36px;min-height:36px;padding:0;justify-content:center}
.topline .theme-toggle{width:36px;min-height:36px;padding:0;justify-content:center}
.topline .topline-social{width:34px;height:34px}
.topline .lang-menu>summary{min-height:32px;padding:2px 7px}
}

/* 2026-10-17 · Vitesse : photo case créole en WebP (111 Ko au lieu de 244), JPEG gardé pour les anciens navigateurs ; :root[data-theme] passe devant le jumeau sombre de theme.css */
.landing-seo .home-hero::after,:root[data-theme] .landing-seo .home-hero::after{background-image:image-set(url("assets/accueil/case-creole.webp") type("image/webp"),url("assets/accueil/case-creole.jpg") type("image/jpeg"))}
.landing-seo .home-hero,:root[data-theme] .landing-seo .home-hero{background-image:image-set(url("assets/accueil/case-creole.webp") type("image/webp"),url("assets/accueil/case-creole.jpg") type("image/jpeg"))}

/* 2026-10-24 · Annuaires : résultats d'abord. Bouton « Itinéraire » sur les fiches localisées, offices de tourisme repliés, lien d'accès rapide */
.catalogue-card .catalogue-actions{margin:14px 0 4px}
.catalogue-route{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border:1px solid var(--accent);border-radius:999px;color:var(--accent);font-size:14px;font-weight:650;text-decoration:none}
.catalogue-route:hover{background:var(--light);text-decoration:none}
.tourisme-office-fold{margin-top:16px}
.tourisme-office-fold>summary{display:inline-flex;align-items:center;min-height:44px;font-weight:650;color:var(--accent)}
.tourisme-offices-link{margin:0 0 14px;font-size:15px}
.tourisme-offices-link a{color:var(--accent);font-weight:650;text-decoration:underline}

/* 2026-10-24 · Accueil : trois accès rapides ; sur mobile, le choix de la commune remonte dans le premier écran */
.landing-seo .hero-quick{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:8px;margin-top:20px;width:auto;font-size:15px}
.hero-quick a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid #a8e6dd;border-radius:999px;color:#fff;font-weight:650;text-decoration:none}
.hero-quick a:hover{background:#ffffff1f;text-decoration:none}
.hero-quick a:focus-visible{outline:3px solid #df872b;outline-offset:3px}
@media(max-width:560px){
.landing-seo .home-hero{gap:18px;min-height:0}
.landing-seo .home-hero .lead{margin-top:12px;font-size:16px;line-height:1.55}
.landing-seo .hero-method{display:none}
.landing-seo .hero-quick{margin-top:16px;gap:6px;flex-wrap:nowrap}
.hero-quick a{flex:1 1 auto;justify-content:center;padding:0 8px;font-size:14px;white-space:nowrap}
.landing-seo .hero-note{margin-top:12px}
.commune-picker>.eyebrow,.commune-picker>p:not(.eyebrow):not(.ma-commune-memo){display:none}
.commune-picker h2{margin:0 0 4px;font-size:22px}
.commune-picker form{margin:12px 0 10px}
}
@media(max-width:379px){.landing-seo .hero-quick{flex-wrap:wrap}}

/* 2026-10-24 · « Ma commune » : barre de thèmes collante, bouton de mémorisation, dernières données, voisines, aides par besoin, rappel sur l'accueil */
html:has(.portrait-themes){scroll-padding-top:76px}
.portrait-page .portrait-switcher{position:static} /* the theme bar is the sticky element of the portraits now */
.portrait-themes{position:sticky;top:0;z-index:30;display:flex;gap:6px;width:auto;margin:18px 0 0;padding:10px 0;background:var(--paper);overflow-x:auto;scrollbar-width:none;font-size:14px}
.portrait-themes a{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:var(--white);font-weight:650;color:var(--ink);text-decoration:none}
.portrait-themes a:hover{border-color:var(--accent);text-decoration:none}
.portrait-group{scroll-margin-top:76px}
.ma-commune-save{margin:18px 0}
.ma-commune-save button{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:650}
.ma-commune-save button[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}
.ma-commune-save button span{font-size:18px;line-height:1}
.ma-commune-save .helper{margin-top:8px;text-align:left}
.portrait-updates ul{list-style:none;padding:0;margin:14px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.portrait-updates li{display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.portrait-updates li a{font-weight:650;color:var(--accent);text-decoration:underline}
.portrait-updates li>span{font-size:14px;color:var(--muted)}
.portrait-updates .helper,.portrait-neighbours .helper{text-align:left;margin-top:12px}
.portrait-neighbours .table-scroll{margin-top:14px;border:1px solid var(--line);border-radius:12px}
.portrait-neighbours th,.portrait-neighbours td{padding:12px 16px}
.portrait-neighbours tbody th{text-align:left;font-weight:600}
.portrait-neighbours tr.is-current th,.portrait-neighbours tr.is-current td{background:var(--light);font-weight:750;color:var(--ink)}
.portrait-aides h3{font-size:18px;margin:20px 0 8px}
.aides-besoins{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.aides-besoins li{display:grid;grid-template-columns:170px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.aides-besoins li span{line-height:1.7}
.aides-besoins a{color:var(--accent);text-decoration:underline}
.portrait-aides .text-link{margin-top:18px}
.ma-commune-memo{margin:16px 0 0;padding:12px 14px;border-radius:12px;background:var(--white);border:1px solid #b9d6dd;line-height:1.7}
.ma-commune-memo a{color:var(--accent);font-weight:650;text-decoration:underline}
.ma-commune-forget{min-height:44px;padding:0 4px;border:0;background:none;color:var(--muted);text-decoration:underline;font-size:14px}
@media(max-width:560px){.aides-besoins li{grid-template-columns:1fr;gap:2px}.portrait-themes a{padding:0 13px}.portrait-neighbours th,.portrait-neighbours td{padding:10px 12px}}

/* 2026-10-24 · « Cette semaine, La Réunion en clair » : édition hebdomadaire en cinq cartes, éditions précédentes repliées */
.semaine-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:10px}
.semaine-card{display:flex;flex-direction:column;gap:10px}
.semaine-card h2,.semaine-card h3{font-size:22px;line-height:1.3}
.semaine-card .text-link{margin-top:auto}
.semaine-card a:not(.text-link){color:var(--accent);text-decoration:underline}
.semaine-figure{background:#17374b;color:#fff;border-color:#17374b}
.semaine-figure .eyebrow{color:#9fd0e6}
.semaine-figure .semaine-big{font-size:clamp(44px,7vw,64px);letter-spacing:-.04em;color:#fff}
.semaine-figure .text-link{color:#a8e6dd}
.semaine-quiz{grid-column:1/-1}
.semaine-data{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.semaine-data li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;border-bottom:1px solid var(--line);padding:8px 0}
.semaine-data li span{color:var(--muted);font-size:14px}
.semaine-place{font-weight:650;color:var(--muted)}
.semaine-choices{margin:0;padding-left:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.semaine-choices li{border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.semaine-quiz details summary{display:inline-flex;align-items:center;min-height:44px;font-weight:650;color:var(--accent)}
.semaine-note{margin:6px 0 16px;padding:16px 20px;border-left:4px solid var(--accent);background:var(--white);border-radius:0 12px 12px 0;font-size:17px}
.semaine-share a{display:inline-flex;align-items:center;min-height:44px;color:var(--accent);font-weight:650;text-decoration:underline}
.semaine-past{border-top:1px solid var(--line);padding:6px 0}
.semaine-past>summary{display:flex;align-items:center;min-height:48px;font-weight:650}
.semaine-past[open]>summary{margin-bottom:12px}
@media(max-width:760px){.semaine-grid,.semaine-choices{grid-template-columns:1fr}}
.semaine-card .helper,.semaine-quiz details .helper{text-align:left}

/* 2026-11-01 · « Ce jour-là dans l'histoire » : accueil, calendrier de la page Histoire, carte de l'édition de la semaine */
.ephemeride-list{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:12px}
.ephemeride-list li{display:grid;gap:4px;padding:12px 0;border-bottom:1px solid var(--line)}
.ephemeride-list li strong{font-family:Manrope,Arial,sans-serif;font-size:17px;color:var(--accent)}
.ephemeride-list li small{font-size:13px;color:var(--muted)}
.ephemeride-list li small a{color:var(--accent);text-decoration:underline}
.home-ephemeride{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:28px 32px}
.home-ephemeride h2{font-size:26px}
.home-ephemeride .text-link{margin-top:16px}
.ephemeride-calendar{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px 28px;margin-top:20px}
.ephemeride-mois h3{font-size:20px;margin:14px 0 0}
.semaine-history{grid-column:1/-1}
@media(max-width:560px){.home-ephemeride{padding:20px}.ephemeride-calendar{grid-template-columns:1fr}}

/* 2026-11-01 · Recherche : extrait sous chaque résultat, mot trouvé surligné */
.search-results .search-snippet{margin:.3rem 0 0;font-size:.85rem;line-height:1.5;color:var(--muted)}
.search-results mark{background:#fde9a8;color:#17374b;border-radius:3px;padding:0 2px}

/* 2026-11-01 · Saison cyclonique (accueil) et prochaines données attendues (Données, Cette semaine) */
.home-cyclone{margin-top:24px;padding:24px 28px;border-radius:20px;background:#fff6e8;border:1px solid #f0c98a;color:#17374b}
.home-cyclone .eyebrow{color:#8a4b0f}
.home-cyclone h2{font-size:22px;margin-bottom:10px}
.home-cyclone p{line-height:1.65}
.cyclone-links{list-style:none;padding:0;margin:14px 0;display:flex;flex-wrap:wrap;gap:8px}
.cyclone-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid #d9a35a;border-radius:999px;background:#fff;color:#7a3f08;font-weight:650;text-decoration:none}
.cyclone-links a:hover{background:#fdebd0}
.home-cyclone .helper{text-align:left}
.home-cyclone .helper a{color:#7a3f08;text-decoration:underline}
.upcoming-data ul{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:10px}
.upcoming-data li{display:grid;grid-template-columns:200px 1fr auto;gap:6px 16px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line)}
.upcoming-data li strong{color:var(--accent)}
.upcoming-data li a{color:var(--accent);text-decoration:underline;font-size:14px}
.upcoming-data .helper{text-align:left;margin-top:12px}
@media(max-width:700px){.upcoming-data li{grid-template-columns:1fr}.home-cyclone{padding:20px}}

/* 2026-11-01 · « Cette page vous a-t-elle été utile ? » (compteur anonyme) */
.page-utile{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:40px 0 10px;padding:16px 20px;border:1px solid var(--line);border-radius:14px;background:var(--white)}
.page-utile p{margin:0;font-weight:650}
.page-utile-boutons{display:flex;gap:8px}
.page-utile-boutons button{min-width:72px}
.page-utile .helper{font-weight:400;text-align:left}
.page-utile .helper:empty{display:none}

/* 2026-11-01 · « Le regard de l'Insee » : encadrés d'études récentes (Formation, Électricité, Tourisme) */
.insee-box{border-left:5px solid var(--accent)}
.insee-box h2{margin-bottom:14px}
.insee-box .key-figs{margin:6px 0 18px}
.insee-box p{line-height:1.7;margin:0 0 12px}