/* =====================================================================
   DNA association — v4 « double hélice »
   Charte : teal #006064, orange #FF5722, cyan #4FC3F7, pêche #FFAB91.
   Titres Montserrat, texte Poppins, accents en Fraunces italique.
   Toute animation est neutralisée sous html.a11y-nomotion et prefers-reduced-motion (voir a11y.css).
   ===================================================================== */

@font-face { font-family: 'Montserrat'; src: url('/assets/fonts/montserrat-var.woff2') format('woff2'); font-weight: 500 900; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/assets/fonts/poppins-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/assets/fonts/poppins-400i.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/assets/fonts/poppins-600.woff2') format('woff2'); font-weight: 600 700; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('/assets/fonts/fraunces-600i.woff2') format('woff2'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible'; src: url('/assets/fonts/atkinson-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible'; src: url('/assets/fonts/atkinson-700.woff2') format('woff2'); font-weight: 600 900; font-display: swap; }
@font-face { font-family: 'OpenDyslexic'; src: url('/assets/fonts/OpenDyslexic-Regular.woff') format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'OpenDyslexic'; src: url('/assets/fonts/OpenDyslexic-Bold.woff') format('woff'); font-weight: 600 900; font-display: swap; }

:root {
  --teal: #006064; --teal-2: #00393c; --nuit: #012628; --teal-clair: #e3f1f0;
  --orange: #FF5722; --orange-txt: #ad3608; --cyan: #4FC3F7; --peche: #FFAB91; --peche-clair: #ffd3c2;
  --papier: #fffcf7; --sable: #f4eee5; --sable-2: #ebe3d6; --encre: #0b2b2d; --gris: #46605f; --trait: rgba(11, 43, 45, .14);
  --blanc: #fff;
  --f-titre: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --f-texte: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --f-accent: 'Fraunces', Georgia, 'Times New Roman', serif;
  --lh: 1.7; --lh-titre: 1.02;
  --r: 28px; --r-s: 16px;
  --wrap: 1240px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ombre: 0 24px 60px -24px rgba(1, 38, 40, .35);
  color-scheme: light;
}

/* ------------------------------------------------------------------ Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) { html:not(.a11y-nomotion) { scroll-behavior: smooth; } }
body { margin: 0; font-family: var(--f-texte); font-size: 1.0625rem; line-height: var(--lh); color: var(--encre); background: var(--papier); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--teal); text-underline-offset: .18em; text-decoration-thickness: .08em; }
a:hover { color: var(--orange-txt); }
h1, h2, h3, h4 { font-family: var(--f-titre); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 .5em; color: var(--encre); text-wrap: balance; font-weight: 800; }
h2 em, h1 em, .h2 em, h3 em { font-family: var(--f-accent); font-style: italic; font-weight: 600; letter-spacing: -.01em; color: var(--teal); }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { padding-left: 1.2em; }
button { font: inherit; color: inherit; }
::selection { background: var(--peche); color: var(--encre); }
:focus-visible { outline: 3px solid var(--orange-txt); outline-offset: 3px; border-radius: 6px; }
.sr, .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap, .container { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(20px, 4vw, 44px); }
main { display: block; outline: none; }
main > section, .v2c > section { position: relative; }
.center { text-align: center; }
.mt-30 { margin-top: 26px; }
.mb-20 { margin-bottom: 20px; }

.evitement { position: fixed; left: 12px; top: -80px; z-index: 300; background: #0b2b2d; color: #fff; padding: 12px 18px; border-radius: 12px; font-weight: 600; text-decoration: none; }
.evitement:focus { top: 12px; color: #fff; }

/* Titres */
.titre-xxl { font-size: clamp(3.1rem, 7.6vw, 7.4rem); line-height: .96; letter-spacing: -.045em; font-weight: 850; }
.titre-xl { font-size: clamp(2.4rem, 5.6vw, 5.2rem); line-height: 1; letter-spacing: -.04em; font-weight: 850; }
.h2, .v2c .section-head h2, .prose h2 { font-size: clamp(1.9rem, 4vw, 3.3rem); line-height: 1.04; letter-spacing: -.035em; font-weight: 800; }
.kicker, .surtitre { display: inline-flex; align-items: center; gap: .6em; font-family: var(--f-titre); font-weight: 800; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--orange-txt); margin-bottom: 18px; }
.kicker::before { content: ""; width: 26px; height: 2px; background: currentColor; border-radius: 2px; }
.lead { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.6; color: var(--gris); max-width: 62ch; }
.resume { display: none; }
.accent { font-family: var(--f-accent); font-style: italic; font-weight: 600; color: var(--teal); }

/* Mots découpés : révélation (activée par motion.js) */
.split .w, .lumiere .w { display: inline-block; }

/* ------------------------------------------------------------------ Boutons */
.btn { --bg: var(--teal); --fg: #fff; display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 52px; padding: .85em 1.5em; border-radius: 999px; border: 2px solid transparent; background: var(--bg); color: var(--fg); font-family: var(--f-titre); font-weight: 750; font-size: 1rem; letter-spacing: -.005em; text-decoration: none; cursor: pointer; position: relative; isolation: isolate; overflow: hidden; transition: transform .35s var(--ease-out), background-color .25s, color .25s, border-color .25s, box-shadow .35s; }
.btn .ico-fl { width: 1.15em; height: 1.15em; flex: none; transition: transform .35s var(--ease-out); }
.btn:hover { color: var(--fg); box-shadow: 0 14px 30px -14px rgba(1, 38, 40, .55); }
.btn:hover .ico-fl { transform: translateX(4px); }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--survol, rgba(255, 255, 255, .18)); transform: translateY(101%); border-radius: inherit; transition: transform .45s var(--ease-out); }
.btn:hover::before { transform: none; }
.btn--orange, .btn-o, .btn-primary { --bg: var(--orange); --fg: #0b2b2d; --survol: #ff8a65; }
.btn--teal, .btn-c, .btn-secondary { --bg: var(--teal); --fg: #fff; --survol: var(--teal-2); }
.btn--ligne, .btn-outline { --bg: transparent; --fg: var(--teal); border-color: currentColor; --survol: var(--teal-clair); }
.btn--ligne-clair, .btn-g { --bg: transparent; --fg: #fff; border-color: rgba(255, 255, 255, .7); --survol: rgba(255, 255, 255, .14); }
.btn-w { --bg: #fff; --fg: var(--teal-2); --survol: var(--peche-clair); }
.btn--petit { min-height: 44px; padding: .55em 1.15em; font-size: .95rem; }
.lien-fleche, .elink { display: inline-flex; align-items: center; gap: .4em; font-family: var(--f-titre); font-weight: 750; color: var(--teal); text-decoration: none; border-bottom: 2px solid var(--peche); padding-bottom: 2px; }
.lien-fleche:hover, .elink:hover { border-color: var(--orange); color: var(--orange-txt); }

/* ------------------------------------------------------------------ En-tête */
.hd { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--papier) 88%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s; view-transition-name: entete; }
.hd.is-scrolled { border-color: var(--trait); box-shadow: 0 10px 30px -22px rgba(1, 38, 40, .5); }
.hd__in { max-width: 1400px; margin: 0 auto; padding: 10px clamp(16px, 3vw, 36px); display: flex; align-items: center; gap: 18px; min-height: 76px; }
.marque { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--encre); flex: none; }
.marque img { height: 56px; width: auto; transition: transform .5s var(--ease-out); }
.marque:hover img { transform: rotate(-8deg) scale(1.05); }
.marque__txt { display: flex; flex-direction: column; font-family: var(--f-titre); line-height: 1.1; }
.marque__txt b { font-size: 1.02rem; font-weight: 850; letter-spacing: -.02em; }
.marque__txt span { font-size: .78rem; font-weight: 600; color: var(--gris); }
.nav { margin-left: auto; }
.nav__liste { list-style: none; display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; }
.nav__item { position: relative; }
.nav__lien, .nav__btn { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 8px 12px; border-radius: 999px; border: 0; background: none; font-family: var(--f-titre); font-weight: 650; font-size: .95rem; color: var(--encre); text-decoration: none; cursor: pointer; transition: background-color .2s, color .2s; }
.nav__lien:hover, .nav__btn:hover, .nav__btn[aria-expanded="true"] { background: var(--sable); color: var(--encre); }
.nav__lien[aria-current="page"], .nav__item.is-actif > .nav__btn { color: var(--teal); box-shadow: inset 0 -2px 0 var(--orange); border-radius: 12px 12px 4px 4px; }
.ico-chev { width: 16px; height: 16px; transition: transform .3s var(--ease-out); }
.nav__btn[aria-expanded="true"] .ico-chev { transform: rotate(180deg); }
.sousmenu { list-style: none; margin: 0; padding: 10px; position: absolute; top: calc(100% + 10px); left: -8px; min-width: 290px; background: var(--papier); border: 1px solid var(--trait); border-radius: 20px; box-shadow: 0 30px 60px -28px rgba(1, 38, 40, .45); opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98); transform-origin: top left; transition: opacity .25s, transform .35s var(--ease-out), visibility 0s .35s; }
.nav__btn[aria-expanded="true"] + .sousmenu { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .35s var(--ease-out), visibility 0s; }
.sousmenu a { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 14px; border-radius: 12px; color: var(--encre); text-decoration: none; font-weight: 600; font-size: .98rem; }
.sousmenu a .ico-fl { width: 18px; height: 18px; opacity: 0; transform: translateX(-6px); transition: opacity .2s, transform .3s var(--ease-out); color: var(--orange-txt); }
.sousmenu a:hover, .sousmenu a:focus-visible { background: var(--sable); }
.sousmenu a:hover .ico-fl, .sousmenu a:focus-visible .ico-fl { opacity: 1; transform: none; }
.sousmenu a[aria-current="page"] { color: var(--teal); background: var(--teal-clair); }
.hd__actions { display: flex; align-items: center; gap: 10px; }
.btn-simple { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px 6px 8px; border-radius: 999px; border: 2px solid var(--teal); background: transparent; color: var(--teal); font-family: var(--f-titre); font-weight: 750; font-size: .9rem; cursor: pointer; transition: background-color .2s, color .2s; }
.btn-simple svg { width: 28px; height: 28px; padding: 4px; border-radius: 50%; background: var(--teal); color: #fff; }
.btn-simple:hover { background: var(--teal-clair); }
.btn-simple[aria-pressed="true"] { background: var(--teal); color: #fff; }
.btn-simple[aria-pressed="true"] svg { background: #fff; color: var(--teal); }
.btn-simple--clair { border-color: #fff; color: #fff; }
.btn-simple--clair svg { background: #fff; color: var(--teal-2); }
.btn-simple--clair:hover { background: rgba(255, 255, 255, .12); }
.burger { display: none; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--encre); background: transparent; cursor: pointer; align-items: center; justify-content: center; }
.burger__barres { display: grid; gap: 5px; width: 20px; }
.burger__barres i { display: block; height: 2px; background: #0b2b2d; border-radius: 2px; transition: transform .35s var(--ease-out), opacity .2s; }
.burger[aria-expanded="true"] .burger__barres i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__barres i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__barres i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1180px) {
  .marque__txt { display: none; }
  .nav__lien, .nav__btn { padding: 8px 9px; font-size: .9rem; }
}
/* Navigation compacte (burger) : posée par a11y-init.js sous 1020 px, ou jusqu'à 1500 px quand le texte est agrandi */
html.nav-compacte .hd { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--papier); }
html.nav-compacte .burger { display: inline-flex; }
html.nav-compacte .hd__actions { margin-left: auto; }
html.nav-compacte .hd__cta { display: none; }
html.nav-compacte .nav { position: fixed; inset: 76px 0 0 0; background: var(--papier); padding: 18px clamp(20px, 5vw, 40px) 120px; overflow-y: auto; visibility: hidden; opacity: 0; transform: translateY(-12px); transition: opacity .3s, transform .4s var(--ease-out), visibility 0s .4s; margin: 0; }
html.nav-compacte .nav.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity .3s, transform .4s var(--ease-out), visibility 0s; }
html.nav-compacte .nav__liste { flex-direction: column; align-items: stretch; gap: 6px; }
html.nav-compacte .nav__lien, html.nav-compacte .nav__btn { width: 100%; justify-content: space-between; font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; padding: 14px 6px; border-radius: 12px; border-bottom: 1px solid var(--trait); }
html.nav-compacte .nav__lien[aria-current="page"], html.nav-compacte .nav__item.is-actif > .nav__btn { box-shadow: none; color: var(--teal); }
html.nav-compacte .sousmenu { position: static; min-width: 0; box-shadow: none; border: 0; background: transparent; padding: 4px 0 10px 8px; display: none; opacity: 1; visibility: visible; transform: none; transition: none; }
html.nav-compacte .nav__btn[aria-expanded="true"] + .sousmenu { display: block; }
html.nav-compacte .sousmenu a { font-size: 1.1rem; }
html.nav-compacte .ico-chev { width: 24px; height: 24px; }
@media (max-width: 560px) {
  .btn-simple span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .btn-simple { padding: 6px; }
  .marque img { height: 48px; }
}

/* ------------------------------------------------------------------ Hero (accueil) */
.hero { position: relative; min-height: min(100svh, 980px); display: flex; align-items: center; color: #fff; background: radial-gradient(120% 90% at 85% 40%, #00585c 0%, var(--teal-2) 45%, var(--nuit) 100%); overflow: hidden; padding: 120px 0 140px; margin-top: -1px; }
.helix { position: absolute; pointer-events: none; }
.helix--hero { right: -4vw; top: -6%; width: min(62vw, 900px); height: 112%; }
.hero__voile { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(1, 38, 40, .82) 0%, rgba(1, 38, 40, .5) 42%, rgba(1, 38, 40, 0) 70%); pointer-events: none; }
.hero__in { position: relative; z-index: 2; }
.hero__over { color: var(--peche); }
.hero__over::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 6px rgba(79, 195, 247, .18); }
.hero h1 { color: #fff; max-width: 11.5ch; margin-bottom: .35em; }
.hero h1 em { color: var(--peche); display: inline-block; }
.hero__sub { font-size: clamp(1.08rem, 1.45vw, 1.3rem); max-width: 54ch; color: rgba(255, 255, 255, .9); line-height: 1.65; margin-bottom: 34px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 26px; }
.hero__quiet { font-size: .95rem; color: rgba(255, 255, 255, .85); margin: 0; }
.hero__quiet button { background: none; border: 0; padding: 4px 2px; color: #fff; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; font-weight: 600; }
.badge { position: absolute; right: clamp(20px, 5vw, 80px); top: clamp(30px, 6vh, 70px); z-index: 3; width: clamp(120px, 12vw, 168px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(6px); }
.badge__anneau { position: absolute; inset: 0; width: 100%; height: 100%; animation: tourne 22s linear infinite; }
.badge__anneau text { font-family: var(--f-titre); font-weight: 800; font-size: 14.6px; letter-spacing: .14em; text-transform: uppercase; fill: #fff; }
.badge__ico { width: 46%; border-radius: 50%; transition: transform .6s var(--ease-out); }
.badge:hover .badge__ico, .badge:focus-visible .badge__ico { transform: rotate(-30deg) scale(1.1); }
.badge:hover .badge__anneau { animation-duration: 6s; }
@keyframes tourne { to { transform: rotate(360deg); } }
.hero__defile { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0; font-size: .72rem; letter-spacing: .25em; text-transform: uppercase; color: rgba(255, 255, 255, .7); font-family: var(--f-titre); font-weight: 700; z-index: 2; }
.hero__defile span { width: 2px; height: 44px; background: linear-gradient(var(--peche), transparent); border-radius: 2px; transform-origin: top; animation: goutte 2.2s var(--ease) infinite; }
@keyframes goutte { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (max-width: 760px) {
  .hero { padding: 90px 0 180px; min-height: auto; }
  .helix--hero { right: -30vw; width: 100vw; opacity: .55; }
  .hero__voile { background: linear-gradient(180deg, rgba(1, 38, 40, .55), rgba(1, 38, 40, .85)); }
  .badge { right: 16px; top: auto; bottom: 96px; width: 104px; }
  .badge__anneau text { font-size: 15.5px; }
  .hero__defile { display: none; }
}

/* Bandeau de mots */
.ticker { background: var(--orange); color: #0b2b2d; overflow: hidden; border-block: 2px solid var(--encre); transform: rotate(-1.4deg) scale(1.02); margin: -26px 0 0; position: relative; z-index: 4; }
.ticker__piste { display: flex; width: max-content; animation: defile 34s linear infinite; }
.ticker__lot { display: flex; align-items: center; gap: 28px; padding: 16px 14px; font-family: var(--f-titre); font-weight: 850; font-size: clamp(1.4rem, 3vw, 2.4rem); letter-spacing: -.03em; text-transform: uppercase; white-space: nowrap; }
.ticker__lot i { font-style: normal; font-size: .7em; color: var(--teal-2); }
@keyframes defile { to { transform: translateX(-50%); } }

/* ------------------------------------------------------------------ Bloc Douala : styles d'origine + habillage v4 */

/* Bloc « À la une » — DNA sans frontières, Douala 2026 (ajout 02/10/2026) */
.dsf { padding: 80px 0 30px; background: var(--paper, #fff); }
.dsf-card { position: relative; background: #fff; border: 1px solid rgba(0,96,100,.14); border-radius: var(--r, 24px); box-shadow: 0 18px 60px rgba(0,96,100,.14); overflow: hidden; }
.dsf-flags { display: grid; grid-template-columns: repeat(6, 1fr); height: 10px; }
.dsf-flags span:nth-child(1) { background: #0055A4; } .dsf-flags span:nth-child(2) { background: #e9e9e9; } .dsf-flags span:nth-child(3) { background: #EF4135; }
.dsf-flags span:nth-child(4) { background: #007A5E; } .dsf-flags span:nth-child(5) { background: #CE1126; } .dsf-flags span:nth-child(6) { background: #FCD116; }
.dsf-head { padding: 44px 52px 0; text-align: center; }
.dsf-une { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-t, 'Montserrat', sans-serif); font-weight: 800; font-size: .78rem; letter-spacing: 3px; text-transform: uppercase; color: #fff; background: var(--orange, #FF5722); padding: 8px 18px; border-radius: 50px; margin-bottom: 14px; }
.dsf-badge { font-family: var(--font-t, 'Montserrat', sans-serif); font-weight: 800; font-size: .85rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--teal, #006064); margin-bottom: 12px; }
.dsf .h2 { font-size: clamp(1.7rem, 3.6vw, 2.7rem); max-width: 820px; margin: 0 auto 10px; }
.dsf-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 44px; padding: 30px 52px 52px; align-items: start; }
.dsf-grid > * { min-width: 0; }
.dsf-lead { color: var(--ink, #12383a); font-size: 1.05rem; margin-bottom: 20px; }
.dsf-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 30px; padding: 0; }
.dsf-facts li { background: var(--soft, #f0f7f7); border-radius: 50px; padding: 8px 16px; font-size: .92rem; color: var(--ink, #12383a); }
.dsf-facts strong { color: var(--teal, #006064); margin-right: 6px; }
.dsf-sub { font-size: 1.15rem; margin-bottom: 14px; }
.dsf-use { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.dsf-use li { display: grid; grid-template-columns: 92px 1fr; gap: 16px; align-items: center; background: var(--soft, #f0f7f7); border-radius: 16px; padding: 14px 18px; color: var(--ink, #12383a); font-size: .95rem; }
.dsf-num { font-family: var(--font-t, 'Montserrat', sans-serif); font-weight: 900; font-size: 1.15rem; color: var(--orange, #FF5722); text-align: center; }
.dsf-don { background: linear-gradient(160deg, #013d40, var(--teal, #006064)); color: #fff; border-radius: 22px; padding: 32px 28px; }
.dsf-don h3 { color: #fff; font-size: 1.35rem; margin-bottom: 12px; }
.dsf-don p { color: rgba(255,255,255,.92); font-size: .95rem; }
.dsf-don a:not(.btn) { color: #fff; font-weight: 600; }
.dsf-tax { margin-bottom: 20px; }
.dsf-tax strong { color: #FFD3C2; }
.dsf-btn { width: 100%; justify-content: center; font-size: 1.05rem; padding: 18px 24px; }
.dsf-small { font-size: .82rem !important; text-align: center; margin-top: 10px; }
.dsf-don hr { border: 0; border-top: 1px solid rgba(255,255,255,.25); margin: 22px 0; }
.dsf-alt { margin-bottom: 14px; }
.dsf-collecte { padding: 0 52px 52px; }
.dsf-collecte-intro { color: var(--ink, #12383a); margin: 0 0 18px; max-width: 720px; }
.dsf-pts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.dsf-pts li { display: flex; flex-direction: column; gap: 4px; background: var(--soft, #f0f7f7); border-radius: 16px; padding: 14px 18px 14px 44px; font-size: .95rem; color: var(--ink, #12383a); position: relative; }
.dsf-pts li::before { content: "📍"; position: absolute; left: 16px; top: 15px; }
.dsf-pts strong { color: var(--teal, #006064); }
@media (max-width: 900px) { .dsf-pts { grid-template-columns: 1fr 1fr; } .dsf-collecte { padding: 0 22px 30px; } }
@media (max-width: 600px) { .dsf-pts { grid-template-columns: 1fr; } }
html.a11y-simple .dsf-pts li { background: #fff; border: 1px solid #004d51; }
.dsf-pts-cat { font-weight: 700; color: var(--teal, #006064); margin: 22px 0 10px; font-size: 1rem; }
.dsf-pts .dsf-h { font-size: .85rem; color: var(--ink, #12383a); }
.dsf-pts .dsf-h::before { content: "🕒 "; }
.dsf-collecte-note { font-size: .85rem; color: var(--ink, #12383a); margin: 12px 0 0; }
.dsf-find { margin: 0 0 16px; max-width: 520px; }
.dsf-find-l { display: block; font-weight: 700; font-size: .9rem; color: var(--teal, #006064); margin-bottom: 6px; }
.dsf-find input { width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem; padding: 12px 16px; border: 2px solid #cfe3e3; border-radius: 999px; background: #fff; color: var(--ink, #12383a); }
.dsf-find input:focus { outline: none; border-color: var(--teal, #006064); box-shadow: 0 0 0 3px rgba(0,96,100,.15); }
.dsf-find-none { margin: 10px 0 0; font-size: .9rem; color: var(--ink, #12383a); }
.dsf-q { border: 1px solid #d7e9e9; border-radius: 18px; margin: 0 0 12px; background: #fff; overflow: hidden; }
.dsf-q > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 16px 52px 16px 20px; position: relative; }
.dsf-q > summary::-webkit-details-marker { display: none; }
.dsf-q > summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; background: var(--soft, #f0f7f7); color: var(--teal, #006064); font-weight: 700; font-size: 1.2rem; line-height: 28px; text-align: center; }
.dsf-q[open] > summary::after { content: "−"; }
.dsf-q > summary:hover { background: #f7fbfb; }
.dsf-q > summary:focus-visible { outline: 3px solid var(--teal, #006064); outline-offset: -3px; }
.dsf-q-t { font-weight: 700; font-size: 1.08rem; color: var(--teal, #006064); }
.dsf-q-n { font-weight: 700; font-size: .85rem; color: #fff; background: var(--teal, #006064); border-radius: 999px; padding: 2px 10px; }
.dsf-q-d { font-size: .85rem; color: var(--ink, #12383a); flex-basis: 100%; }
.dsf-q .dsf-pts { padding: 0 16px 16px; }
.dsf-pts .dsf-tag { font-style: normal; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--teal, #006064); }
.dsf-pts li.dsf-creche::before { content: "🧸"; }
.dsf-pts li.dsf-pharma::before { content: "💊"; }
.dsf-pts li.dsf-commerce::before { content: "🛍️"; }
.dsf-pts li.dsf-asso::before { content: "🤝"; }
.dsf-pts li[hidden] { display: none; }
html.a11y-simple .dsf-q { border: 2px solid #004d51; }
html.a11y-simple .dsf-q-n { background: #004d51; }
@media (max-width: 600px) { .dsf-q > summary { padding: 14px 48px 14px 16px; } .dsf-q .dsf-pts { padding: 0 10px 12px; } }
@keyframes dsfscroll { from { transform: translateX(0); } to { transform: translateX(-33.3333%); } }
.dsf-part-titre { margin-top: 30px; }
.dsf-marquee { overflow: hidden; min-width: 0; max-width: 100%; contain: inline-size; padding: 22px 0 14px; margin: 0 -8px;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.dsf-track { display: flex; width: max-content; animation: dsfscroll 22s linear infinite; }
.dsf-marquee:hover .dsf-track, .dsf-marquee:focus-within .dsf-track { animation-play-state: paused; }
.dsf-set { display: flex; align-items: center; gap: 0 64px; padding-right: 64px; }
.dsfl { display: inline-flex; align-items: center; justify-content: center; height: 72px; transition: transform .25s ease, filter .25s ease; will-change: transform; filter: grayscale(.25) opacity(.85); }
.dsfl img { height: 56px; width: auto; max-width: 170px; object-fit: contain; display: block; }
.dsfl-ooc img { height: 72px; max-width: 190px; }
.dsfl-sq img { height: 68px; width: 68px; border-radius: 14px; box-shadow: 0 6px 18px rgba(232,93,36,.28); }
.dsfl.is-focus, .dsfl:hover, .dsfl:focus-visible { filter: none; }
@media (prefers-reduced-motion: reduce) { .dsf-marquee { mask-image: none; -webkit-mask-image: none; } .dsf-track { animation: none; flex-wrap: wrap; width: auto; gap: 20px 0; } .dsf-set[aria-hidden] { display: none; } .dsf-set { flex-wrap: wrap; gap: 20px 40px; padding-right: 0; } .dsfl { transform: none !important; filter: none; } }
html.a11y-nomotion .dsf-marquee { mask-image: none; -webkit-mask-image: none; }
html.a11y-nomotion .dsf-track { animation: none !important; flex-wrap: wrap; width: auto; gap: 20px 0; }
html.a11y-nomotion .dsf-set[aria-hidden] { display: none; }
html.a11y-nomotion .dsf-set { flex-wrap: wrap; gap: 20px 40px; padding-right: 0; }
html.a11y-nomotion .dsfl { transform: none !important; filter: none; }
html.a11y-simple .dsf-marquee { mask-image: none; -webkit-mask-image: none; }
html.a11y-simple .dsf-track { animation: none !important; flex-wrap: wrap; width: auto; gap: 20px 0; }
html.a11y-simple .dsf-set[aria-hidden] { display: none; }
html.a11y-simple .dsf-set { flex-wrap: wrap; gap: 20px 40px; padding-right: 0; }
html.a11y-simple .dsfl { transform: none !important; filter: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 900px) { .dsf-grid { grid-template-columns: 1fr; gap: 28px; padding: 26px 22px 30px; } .dsf-head { padding: 34px 22px 0; } .dsf { padding: 56px 0 10px; } .dsf-use li { grid-template-columns: 74px 1fr; } }
html.a11y-simple .dsf-card { box-shadow: none; border: 2px solid #004d51; border-radius: 8px; }
html.a11y-simple .dsf-une { background: #ba3300; }
html.a11y-simple .dsf-don { background: #004d51; }
html.a11y-simple .dsf-don p, html.a11y-simple .dsf-don h3 { color: #fff; }
html.a11y-simple .dsf-use li, html.a11y-simple .dsf-facts li { background: #fff; border: 1px solid #004d51; }
html.a11y-simple .dsf-num { color: #ba3300; }
.dsf-opt { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 16px; padding: 18px 18px 20px; margin-bottom: 14px; }
.dsf-opt p { margin-bottom: 14px; }
.dsf-who { font-family: var(--font-t, 'Montserrat', sans-serif); font-weight: 800; font-size: .78rem !important; letter-spacing: 2px; text-transform: uppercase; color: var(--cyan, #4FC3F7) !important; margin-bottom: 6px !important; }
.dsf-opt strong { color: #FFD3C2; }
.btn-w { background: #fff; color: var(--teal, #006064); box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.dsf-use li { grid-template-columns: 92px 1fr; }
html.a11y-simple .dsf-opt { background: transparent; border-color: #fff; }
html.a11y-simple .dsf-who { color: #fff !important; }
html.a11y-simple .btn-w { background: #fff; color: #004d51; }

.dsf { padding: clamp(80px, 9vw, 130px) 0 40px; background: var(--papier); }
.dsf-card { border-radius: 36px; border: 1px solid var(--trait); box-shadow: 0 40px 90px -50px rgba(1, 38, 40, .55); background: #fff; }
.dsf-flags { height: 12px; }
.dsf-head { padding: 54px 60px 0; text-align: left; display: grid; gap: 4px; }
.dsf-une { justify-self: start; background: #0b2b2d; color: #fff; letter-spacing: .18em; }
.dsf-une span { color: var(--orange); }
.dsf-badge { color: var(--orange-txt); letter-spacing: .14em; }
.dsf .h2 { font-size: clamp(2rem, 4.4vw, 3.8rem); max-width: 18ch; margin: 0 0 6px; }
.dsf-grid { padding: 34px 60px 56px; gap: 52px; }
.dsf-lead { font-size: 1.12rem; line-height: 1.7; }
.dsf-facts li { background: var(--sable); }
.dsf-use li { background: var(--sable); border-radius: 18px; transition: transform .35s var(--ease-out), background-color .25s; }
.dsf-use li:hover { transform: translateX(6px); background: var(--peche-clair); }
.dsf-num { color: var(--orange-txt); font-size: 1.35rem; letter-spacing: -.03em; }
.dsf-don { border-radius: 28px; background: radial-gradient(130% 100% at 100% 0%, #00585c, var(--teal-2) 60%, var(--nuit)); position: relative; overflow: hidden; }
.dsf-don::after { content: ""; position: absolute; width: 260px; height: 260px; right: -110px; top: -110px; border-radius: 50%; border: 36px solid rgba(255, 171, 145, .12); pointer-events: none; }
.dsf-don .btn-o { --fg: #0b2b2d; }
.dsf-don .btn-o::after, .dsf-don .btn-w::after { content: "›"; font-size: 1.3em; line-height: 1; }
.dsf-don h3 { font-size: 1.6rem; letter-spacing: -.03em; }
.dsf-don a:not(.btn) { color: var(--peche); }
.dsf-collecte { padding: 0 60px 60px; }
.dsf-collecte .dsf-sub { font-family: var(--f-titre); font-weight: 800; font-size: 1.5rem; letter-spacing: -.03em; color: var(--encre); }
.dsf-q { border-radius: 20px; border-color: var(--trait); transition: box-shadow .3s, border-color .3s; }
.dsf-q[open] { border-color: var(--teal); box-shadow: 0 18px 40px -30px rgba(1, 38, 40, .6); }
.dsf-q > summary { min-height: 56px; }
.dsf-q > summary::after { transition: transform .35s var(--ease-out), background-color .2s; background: var(--sable); }
.dsf-q[open] > summary::after { background: var(--orange); color: #0b2b2d; transform: translateY(-50%) rotate(180deg); }
.dsf-pts li { background: var(--sable); border-radius: 16px; }
.dsf-find input { border-color: var(--sable-2); min-height: 52px; }
.dsf-find input:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(0, 96, 100, .18); outline: 3px solid transparent; }
.dsf-part-titre { font-family: var(--f-titre); font-weight: 800; }
@media (max-width: 900px) { .dsf-head { padding: 36px 22px 0; } .dsf-grid { padding: 26px 22px 30px; } .dsf-collecte { padding: 0 18px 30px; } .dsf-card { border-radius: 26px; } }

/* ------------------------------------------------------------------ Manifeste */
.manifeste { padding: clamp(90px, 11vw, 170px) 0; background: var(--sable); overflow: hidden; }
.manifeste__grille { display: grid; grid-template-columns: 1.35fr .65fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.titre-lumiere { font-size: clamp(2.1rem, 5vw, 4.6rem); line-height: 1.02; letter-spacing: -.045em; margin-bottom: 32px; }
.lumiere .w { color: #637573; transition: color .45s var(--ease); }
.lumiere em .w { color: #3f7d82; }
.lumiere .w.is-lit { color: var(--encre); }
.lumiere em .w.is-lit { color: var(--teal); }
.citation { margin: 34px 0 0; padding: 0 0 0 28px; position: relative; }
.citation::before { content: "«"; position: absolute; left: -14px; top: -.35em; font-family: var(--f-accent); font-style: italic; font-size: 5rem; line-height: 1; color: var(--orange); }
.citation p { font-family: var(--f-accent); font-style: italic; font-weight: 600; font-size: clamp(1.4rem, 2.3vw, 2rem); line-height: 1.25; color: var(--teal); margin: 0; }
.manifeste__logo { position: relative; aspect-ratio: 1; display: grid; place-items: center; }
.manifeste__logo::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle, #fff 0%, rgba(255, 255, 255, 0) 70%); }
.manifeste__logo img { position: relative; width: 78%; rotate: var(--rot, 0deg); transition: rotate .2s linear; }
@media (max-width: 860px) { .manifeste__grille { grid-template-columns: 1fr; } .manifeste__logo { max-width: 280px; margin: 0 auto; order: -1; } }

/* ------------------------------------------------------------------ Impact */
.impact { padding: clamp(90px, 10vw, 150px) 0; background: var(--papier); }
.impact .h2 { max-width: 20ch; }
.chiffres { list-style: none; padding: 0; margin: 56px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--encre); }
.chiffre { padding: 28px 22px 10px 0; border-right: 1px solid var(--trait); display: flex; flex-direction: column; gap: 12px; }
.chiffre:last-child { border-right: 0; }
.chiffre + .chiffre { padding-left: 22px; }
.chiffre__n { font-family: var(--f-titre); font-weight: 850; font-size: clamp(3rem, 6.4vw, 6rem); line-height: .9; letter-spacing: -.06em; color: var(--teal); font-variant-numeric: tabular-nums; }
.chiffre:nth-child(2) .chiffre__n { color: var(--orange-txt); }
.chiffre__l { font-size: 1rem; color: var(--gris); max-width: 22ch; }
@media (max-width: 860px) { .chiffres { grid-template-columns: 1fr 1fr; } .chiffre:nth-child(2) { border-right: 0; } .chiffre:nth-child(3) { padding-left: 0; } .chiffre:nth-child(n+3) { border-top: 1px solid var(--trait); } }
@media (max-width: 420px) { .chiffres { grid-template-columns: 1fr; } .chiffre, .chiffre + .chiffre { padding-left: 0; border-right: 0; border-top: 1px solid var(--trait); } }

/* ------------------------------------------------------------------ Slogan géant */
.slogan { background: #006064; color: #fff; padding: clamp(70px, 9vw, 130px) 0; overflow: hidden; }
.slogan__geant { margin: 0; font-family: var(--f-titre); font-weight: 900; font-size: clamp(2.2rem, 9.4vw, 11rem); line-height: .86; letter-spacing: -.06em; text-transform: uppercase; display: flex; flex-direction: column; padding-inline: clamp(16px, 3vw, 40px); }
.slogan__l { display: block; white-space: nowrap; translate: var(--dx, 0) 0; }
.slogan__l:first-child { color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, .85); }
.slogan__l:last-child { align-self: flex-end; color: var(--peche); }
.flip { position: relative; display: inline-block; }
.flip__a, .flip__b { display: inline-block; }
.flip__b { position: absolute; left: 0; top: 0; opacity: 0; }
.slogan.is-in .flip__a { animation: accent-a 4.8s var(--ease) 1s infinite; }
.slogan.is-in .flip__b { animation: accent-b 4.8s var(--ease) 1s infinite; }
@keyframes accent-a { 0%, 40% { opacity: 1; transform: none; } 50%, 90% { opacity: 0; transform: translateY(-.25em) rotate(-12deg); } 100% { opacity: 1; transform: none; } }
@keyframes accent-b { 0%, 40% { opacity: 0; transform: translateY(.25em) rotate(12deg); } 50%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* ------------------------------------------------------------------ Rejoindre : portes */
.rejoindre { padding: clamp(90px, 10vw, 150px) 0; background: var(--papier); }
.rejoindre__grille { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px, 6vw, 90px); align-items: start; }
.rejoindre__tete { position: sticky; top: 120px; }
.portes { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--encre); }
.porte { --p: 0; position: relative; display: grid; grid-template-columns: 54px 1fr 48px; grid-template-areas: "n t f" "n d f"; column-gap: 18px; padding: 26px 8px 26px 4px; border-bottom: 1px solid var(--trait); text-decoration: none; color: var(--encre); isolation: isolate; overflow: hidden; }
.porte::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--peche-clair); transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease-out); }
.porte:hover::before, .porte:focus-visible::before { transform: none; }
.porte:hover, .porte:focus-visible { color: var(--encre); }
.porte__num { grid-area: n; font-family: var(--f-titre); font-weight: 800; font-size: .9rem; color: var(--orange-txt); padding-top: .55em; }
.porte__t { grid-area: t; font-family: var(--f-titre); font-weight: 850; font-size: clamp(1.5rem, 3vw, 2.4rem); letter-spacing: -.04em; line-height: 1.1; transition: transform .5s var(--ease-out); }
.porte:hover .porte__t { transform: translateX(10px); }
.porte__d { grid-area: d; color: var(--gris); margin-top: 6px; transition: transform .5s var(--ease-out) .03s; }
.porte:hover .porte__d { transform: translateX(10px); }
.porte__fl { grid-area: f; align-self: center; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--encre); display: grid; place-items: center; transition: background-color .3s, transform .5s var(--ease-out); }
.porte__fl svg { width: 22px; height: 22px; transition: transform .5s var(--ease-out); }
.porte:hover .porte__fl { background: #0b2b2d; color: #fff; transform: rotate(-45deg); }
@media (max-width: 860px) { .rejoindre__grille { grid-template-columns: 1fr; } .rejoindre__tete { position: static; } .porte { grid-template-columns: 40px 1fr 44px; } .porte__fl { width: 44px; height: 44px; } }

/* ------------------------------------------------------------------ Records (cartes empilées) */
.records { padding: clamp(90px, 10vw, 150px) 0; background: var(--nuit); color: #fff; }
.records .h2, .records h3 { color: #fff; }
.records .h2 em { color: var(--peche); }
.records .kicker { color: var(--peche); }
.records .lead { color: rgba(255, 255, 255, .82); }
.records .lead a { color: var(--peche); }
.records__tete { max-width: 760px; margin-bottom: 60px; }
.records__pile { display: grid; gap: 28px; }
.record { position: sticky; top: calc(110px + var(--k, 0) * 26px); display: grid; grid-template-columns: auto 1fr; grid-template-areas: "an t" "n n" "d d"; gap: 8px 22px; align-items: baseline; padding: clamp(28px, 4vw, 54px); border-radius: 32px; background: linear-gradient(160deg, #fff 0%, var(--sable) 100%); color: var(--encre); box-shadow: 0 -20px 60px -30px rgba(0, 0, 0, .6); }
.record:nth-child(2) { --k: 1; background: linear-gradient(160deg, var(--peche-clair) 0%, var(--peche) 100%); }
.record__an { grid-area: an; font-family: var(--f-titre); font-weight: 850; background: #0b2b2d; color: #fff; border-radius: 999px; padding: 6px 14px; font-size: .9rem; }
.record__t { grid-area: t; color: var(--encre) !important; font-size: clamp(1.3rem, 2.4vw, 2rem); margin: 0; }
.record__n { grid-area: n; margin: 18px 0 8px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
.record__big { font-family: var(--f-titre); font-weight: 900; font-size: clamp(3.6rem, 11vw, 9.5rem); letter-spacing: -.06em; line-height: .85; color: var(--teal); }
.record:nth-child(2) .record__big { color: var(--encre); }
.record__u { font-family: var(--f-accent); font-style: italic; font-weight: 600; font-size: clamp(1.1rem, 2vw, 1.6rem); color: var(--encre); }
.record__d { grid-area: d; max-width: 70ch; margin: 0; color: #20403f; }
.scards { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 90px; }
.scard { background: #0a3a3c; border: 1px solid rgba(255, 255, 255, .1); border-radius: 30px; overflow: hidden; display: flex; flex-direction: column; }
.scard .sphoto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; clip-path: inset(var(--clip, 0) 0 0 0 round 0); transition: transform 1s var(--ease-out); }
.scard:hover .sphoto { transform: scale(1.04); }
.scard .sphoto-bbq { object-position: center 30%; }
.scard-body { padding: 30px clamp(22px, 3vw, 38px) 36px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.scard-body p { color: rgba(255, 255, 255, .86); }
.scard-logos { display: flex; gap: 14px; align-items: center; }
.scard-logos img, .lyleoo-logo { height: 54px; width: auto; max-width: 210px; object-fit: contain; align-self: flex-start; background: #fff; border-radius: 12px; padding: 6px 10px; }
.scard h3 { font-size: clamp(1.35rem, 2vw, 1.7rem); letter-spacing: -.03em; margin: 6px 0 0; }
.scard .lien-fleche { color: var(--peche); border-color: rgba(255, 171, 145, .5); align-self: flex-start; margin-top: auto; }
.scard .lien-fleche:hover { color: #fff; border-color: #fff; }
@media (max-width: 860px) { .scards { grid-template-columns: 1fr; } .record { position: relative; top: 0; } }

/* ------------------------------------------------------------------ Facebook */
.fb { padding: clamp(80px, 9vw, 130px) 0; background: var(--papier); }
.fbcar { margin-top: 30px; }
.fb-viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: 14px; border-radius: 22px; }
.fb-track { display: flex; gap: 20px; }
.fb-card { scroll-snap-align: start; flex: 0 0 min(340px, 82vw); background: #fff; border: 1px solid var(--trait); border-radius: 22px; overflow: hidden; text-decoration: none; color: var(--encre); display: flex; flex-direction: column; transition: transform .4s var(--ease-out), box-shadow .4s; }
.fb-card:hover { transform: translateY(-6px); box-shadow: var(--ombre); color: var(--encre); }
.fb-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.fb-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.fb-date { font-family: var(--f-titre); font-weight: 800; font-size: .8rem; color: var(--orange-txt); text-transform: uppercase; letter-spacing: .1em; }
.fb-text { font-size: .95rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.fb-navs { display: flex; gap: 10px; justify-content: flex-end; margin-top: 10px; }
.fb-nav { width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--encre); background: transparent; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.fb-nav:hover { background: #0b2b2d; color: #fff; }
.fb__suivre { margin-top: 30px; }

/* ------------------------------------------------------------------ FAQ */
.faq-s { padding: clamp(80px, 9vw, 130px) 0; background: var(--sable); }
.faq-s__grille { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(30px, 5vw, 80px); align-items: start; }
.faq { border-top: 2px solid var(--encre); }
.faq details { border-bottom: 1px solid var(--trait); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 22px 4px; font-family: var(--f-titre); font-weight: 750; font-size: clamp(1.05rem, 1.6vw, 1.3rem); letter-spacing: -.02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #fff; font-size: 1.4rem; transition: transform .4s var(--ease-out), background-color .3s; }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--orange); color: #0b2b2d; }
.faq details p { padding: 0 4px 24px; margin: 0; max-width: 64ch; color: #20403f; }
@media (max-width: 860px) { .faq-s__grille { grid-template-columns: 1fr; } }
@supports (interpolate-size: allow-keywords) {
  .faq details, .dsf-q { interpolate-size: allow-keywords; }
  .faq details::details-content, .dsf-q::details-content { height: 0; overflow: clip; transition: height .45s var(--ease-out), content-visibility .45s allow-discrete; }
  .faq details[open]::details-content, .dsf-q[open]::details-content { height: auto; }
}

/* ------------------------------------------------------------------ Pied de page */
.pied { background: var(--nuit); color: rgba(255, 255, 255, .86); padding-top: 70px; overflow: hidden; position: relative; }
.pied a { color: #fff; }
.pied a:hover { color: var(--peche); }
.pied__label { font-family: var(--f-titre); font-weight: 800; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--peche); }
.pmarquee { overflow: hidden; padding: 18px 0 30px; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ptrack { display: flex; width: max-content; animation: defile 46s linear infinite; }
.pmarquee:hover .ptrack, .pmarquee:focus-within .ptrack { animation-play-state: paused; }
.pset { display: flex; align-items: center; gap: 22px; padding-right: 22px; }
.pset img { height: 64px; width: auto; max-width: 170px; object-fit: contain; background: #fff; border-radius: 16px; padding: 8px 14px; transition: transform .35s var(--ease-out); }
.pset a:hover img, .pset a:focus-visible img { transform: translateY(-4px) rotate(-2deg); }
.pied__grille { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; padding-top: 50px; padding-bottom: 40px; border-top: 1px solid rgba(255, 255, 255, .12); }
.pied__marque img { width: 120px; margin-bottom: 18px; }
.pied__manif { font-family: var(--f-accent); font-style: italic; font-weight: 600; font-size: 1.5rem; color: var(--peche); margin-bottom: 8px; }
.pied__titre { color: #fff; font-size: .82rem; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 16px; }
.pied ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.pied__a11y { margin-top: 20px; }
.pied__geant { font-family: var(--f-titre); font-weight: 900; font-size: clamp(3.6rem, 15.5vw, 16rem); line-height: .8; letter-spacing: -.07em; white-space: nowrap; text-align: center; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 171, 145, .45); user-select: none; margin: 10px 0 -.12em; transition: color .8s var(--ease); }
.pied__geant:hover { color: rgba(255, 171, 145, .16); }
.pied__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; padding-block: 22px 30px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .88rem; position: relative; }
.pied__haut { text-decoration: none; font-weight: 600; }
@media (max-width: 900px) { .pied__grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pied__grille { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ Barre de lecture */
.lecture-progress { position: fixed; left: 0; top: 0; height: 4px; width: 100%; z-index: 120; background: linear-gradient(90deg, var(--orange), var(--peche), var(--cyan)); transform-origin: 0 50%; transform: scaleX(var(--progress, 0)); pointer-events: none; }
@supports (animation-timeline: scroll()) {
  .lecture-progress { animation: progress linear both; animation-timeline: scroll(root block); }
  @keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* ------------------------------------------------------------------ En-tête des pages intérieures */
.phero { position: relative; background: radial-gradient(120% 100% at 90% 30%, #00585c 0%, var(--teal-2) 50%, var(--nuit) 100%); color: #fff; padding: clamp(60px, 8vw, 110px) 0 clamp(70px, 9vw, 120px); overflow: hidden; }
.helix--page { right: -2vw; top: -20%; width: min(46vw, 640px); height: 140%; opacity: .9; }
.phero__in { position: relative; z-index: 2; }
.phero h1 { color: #fff; max-width: 16ch; margin: 18px 0 22px; }
.phero h1 em { color: var(--peche); }
.phero__sub { font-size: clamp(1.05rem, 1.5vw, 1.28rem); color: rgba(255, 255, 255, .9); max-width: 60ch; margin: 0; }
.phero__sub strong { color: var(--peche); }
.phero .surtitre { color: var(--peche); }
.ariane ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; font-size: .88rem; font-weight: 600; }
.ariane li { display: flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .8); }
.ariane li + li::before { content: "/"; color: var(--peche); }
.ariane a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .4); }
.ariane a[aria-current] { border: 0; color: var(--peche); }
@media (max-width: 760px) { .helix--page { right: -40vw; width: 100vw; opacity: .45; } }

/* ------------------------------------------------------------------ Contenus repris (pages intérieures) */
.v2c section { padding: clamp(64px, 8vw, 110px) 0; }
.v2c section.alt { background: var(--sable); }
.v2c .section-head { max-width: 780px; margin-bottom: 44px; }
.v2c .section-head.center, .center .section-head { margin-inline: auto; }
.v2c .section-head .kicker { display: inline-flex; }
.v2c .section-head h2 .accent { color: var(--teal); }
.v2c .section-head p { font-size: 1.12rem; color: var(--gris); }
.grid { display: grid; gap: 22px; }
.grid > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
.card { background: #fff; border: 1px solid var(--trait); border-radius: var(--r); overflow: hidden; position: relative; transition: transform .45s var(--ease-out), box-shadow .45s, border-color .3s; }
.v2c section:not(.alt) .card { background: var(--papier); }
.card:hover { transform: translateY(-4px); box-shadow: var(--ombre); }
.card-body { padding: clamp(24px, 3vw, 38px); }
.card h3 { font-size: clamp(1.2rem, 1.8vw, 1.5rem); letter-spacing: -.025em; }
.card .meta { font-family: var(--f-titre); font-weight: 700; font-size: .85rem; color: var(--orange-txt); }
.card img.cover { width: 100%; height: 100%; object-fit: cover; }
.value-card { padding: clamp(24px, 3vw, 34px); }
.value-card .vicon { width: 64px; height: 64px; border-radius: 18px; background: var(--sable); display: grid; place-items: center; margin-bottom: 18px; transition: transform .5s var(--ease-out); }
.value-card .vicon svg { width: 42px; height: 42px; }
.card:hover .vicon { transform: rotate(-8deg) scale(1.06); }
.grid-3 .value-card, .grid-4 .value-card { counter-increment: carte; }
.grid-3, .grid-4 { counter-reset: carte; }
.grid-3 .value-card:not(:has(.vicon))::before, .grid-4 .value-card:not(:has(.vicon))::before { content: counter(carte, decimal-leading-zero); display: block; font-family: var(--f-titre); font-weight: 850; font-size: 2.6rem; letter-spacing: -.05em; line-height: 1; color: var(--orange); margin-bottom: 16px; }
.tag { display: inline-block; font-family: var(--f-titre); font-weight: 750; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); background: var(--teal-clair); border-radius: 999px; padding: 5px 12px; margin: 0 6px 12px 0; }
.badge-list { display: flex; flex-wrap: wrap; gap: 8px; }
.badge-list span { font-family: var(--f-titre); font-weight: 700; font-size: .85rem; border: 1.5px solid var(--teal); color: var(--teal); border-radius: 999px; padding: 6px 14px; }
.prose { max-width: 760px; margin-inline: auto; }
.prose h2 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); margin-top: 1.6em; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { font-size: 1.08rem; }
.form-note { font-size: .9rem; color: var(--gris); }
.cta-band { background: var(--orange) !important; color: #0b2b2d; text-align: left; overflow: hidden; }
.cta-band .container { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px 50px; align-items: end; }
.cta-band h2 { font-size: clamp(2rem, 4.6vw, 4rem); line-height: 1; letter-spacing: -.045em; margin: 0; grid-column: 1; grid-row: 1; }
.cta-band p { grid-column: 1; grid-row: 2; font-size: 1.15rem; margin: 0; max-width: 56ch; }
.cta-band .btn { grid-column: 2; justify-self: start; align-self: center; margin: 4px; }
.cta-band .btn-primary { --bg: #0b2b2d; --fg: #fff; --survol: var(--teal); }
.cta-band .btn-outline { --fg: #0b2b2d; }
.cta-band .container > .btn:only-of-type { grid-row: 1 / span 2; }
@media (max-width: 760px) { .cta-band .container { grid-template-columns: 1fr; } .cta-band h2, .cta-band p, .cta-band .btn, .cta-band .container > .btn:only-of-type { grid-column: 1; grid-row: auto; } }
.quote { background: #006064 !important; color: #fff; text-align: center; }
.quote blockquote { margin: 0 auto; max-width: 22ch; font-family: var(--f-accent); font-style: italic; font-weight: 600; font-size: clamp(2rem, 5vw, 4.2rem); line-height: 1.08; color: #fff; }
.quote cite { display: block; margin-top: 22px; font-style: normal; color: #ffd3c2; }
.info-line { display: flex; gap: 12px; align-items: flex-start; }
.info-line .ico { display: none; }
.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field label { font-family: var(--f-titre); font-weight: 700; font-size: .92rem; }
.field input, .field select, .field textarea { font: inherit; padding: 13px 16px; border: 2px solid #8aa3a2; border-radius: 14px; background: #fff; color: var(--encre); min-height: 52px; width: 100%; transition: border-color .2s, box-shadow .2s; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid transparent; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(0, 96, 100, .2); }
.price { font-family: var(--f-titre); font-weight: 850; font-size: 2rem; letter-spacing: -.04em; color: var(--orange-txt); margin-bottom: 0; }
.timeline { list-style: none; padding: 0; margin: 0 auto; max-width: 820px; position: relative; }
.timeline::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 3px; background: var(--sable-2); border-radius: 3px; }
.timeline::after { content: ""; position: absolute; left: 11px; top: 8px; width: 3px; height: calc((100% - 16px) * var(--tl, 1)); background: linear-gradient(var(--orange), var(--teal)); border-radius: 3px; }
.timeline li { position: relative; padding: 0 0 36px 52px; }
.timeline li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 21px; height: 21px; border-radius: 50%; background: #fff; border: 4px solid var(--teal); z-index: 1; }
.timeline .year { font-family: var(--f-titre); font-weight: 850; font-size: clamp(1.15rem, 2vw, 1.5rem); letter-spacing: -.03em; color: var(--encre); display: block; margin-bottom: 4px; }
.team-card { text-align: left; }
.team-card .img-wrap { aspect-ratio: 4 / 5; overflow: hidden; background: var(--sable); }
.team-card .img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.team-card:hover .img-wrap img { transform: scale(1.06); }
.team-card .card-body { padding: 16px 18px 20px; }
.team-card h3 { margin: 0 0 2px; font-size: 1.15rem; }
.team-card p { margin: 0; color: var(--gris); font-size: .92rem; }
.plogo { height: 110px; width: 100%; object-fit: contain; padding: 22px; background: #fff; border-bottom: 1px solid var(--trait); }
.expo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }

/* Sections spécifiques reprises de la v3 (qui sommes-nous, actions, agenda) */
.piliers, .reseau, .histoires, .actions, .compose, .evts { padding: clamp(70px, 9vw, 130px) 0; }
.piliers { background: var(--papier); }
.piliers .cards { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: 50px; border-top: 2px solid var(--encre); text-align: left; }
.pcard { padding: 26px 18px 26px 0; border-right: 1px solid var(--trait); outline-offset: -3px; }
.pcard + .pcard { padding-left: 18px; }
.pcard:last-child { border-right: 0; }
.pcard svg { width: 34px; height: 34px; stroke: var(--orange); margin-bottom: 22px; transition: transform .6s var(--ease-out); }
.pcard:hover svg, .pcard:focus-visible svg { transform: rotate(-12deg) scale(1.15); }
.pcard h3 { font-size: clamp(1.6rem, 2.6vw, 2.4rem); letter-spacing: -.045em; margin-bottom: 10px; }
.pcard p { color: var(--gris); font-size: .98rem; margin: 0; }
@media (max-width: 960px) { .piliers .cards { grid-template-columns: 1fr 1fr; } .pcard, .pcard + .pcard { padding: 22px 14px 22px 0; border-right: 0; border-bottom: 1px solid var(--trait); } }
.reseau { background: var(--nuit); color: #fff; }
.reseau .h2 { color: #fff; } .reseau .h2 em { color: var(--peche); } .reseau .kicker { color: var(--peche); } .reseau .lead { color: rgba(255, 255, 255, .82); margin-inline: auto; }
.net { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 50px; align-items: center; text-align: left; }
.nodes { position: relative; aspect-ratio: 1; max-width: 460px; width: 100%; margin: 0 auto; border-radius: 50%; border: 1px dashed rgba(255, 171, 145, .4); }
.nodes::before { content: ""; position: absolute; inset: 32%; border-radius: 50%; background: url('/assets/img/DNA_Icon_Seul.webp') center / 70% no-repeat, rgba(255, 255, 255, .95); box-shadow: 0 0 0 14px rgba(255, 255, 255, .05), 0 0 0 30px rgba(255, 255, 255, .03); }
.node { --a: 0deg; position: absolute; left: 50%; top: 50%; translate: -50% -50%; transform: rotate(var(--a)) translateY(calc(-1 * min(205px, 40vw))) rotate(calc(-1 * var(--a))); min-height: 48px; padding: 10px 18px; border-radius: 999px; border: 2px solid rgba(255, 255, 255, .5); background: var(--teal-2); color: #fff; font-family: var(--f-titre); font-weight: 750; cursor: pointer; transition: background-color .25s, border-color .25s, color .25s, scale .35s var(--ease-out); }
.node:nth-child(1) { --a: 0deg; } .node:nth-child(2) { --a: 60deg; } .node:nth-child(3) { --a: 120deg; } .node:nth-child(4) { --a: 180deg; } .node:nth-child(5) { --a: 240deg; } .node:nth-child(6) { --a: 300deg; }
.node:hover { border-color: var(--peche); scale: 1.06; }
.node[aria-expanded="true"] { background: var(--orange); border-color: var(--orange); color: #0b2b2d; }
.reveal-box { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: 28px; padding: clamp(26px, 3vw, 40px); min-height: 220px; }
.reveal-box h3 { color: var(--peche); font-size: clamp(1.5rem, 2.4vw, 2.1rem); }
.reveal-box p { color: rgba(255, 255, 255, .9); font-size: 1.1rem; margin: 0; }
@media (max-width: 860px) { .net { grid-template-columns: 1fr; } .nodes { aspect-ratio: auto; border: 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .nodes::before { display: none; } .node { position: static; translate: none; transform: none; } }
.histoires { background: var(--papier); }
.hgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 46px; }
.hcard { background: #fff; border: 1px solid var(--trait); border-radius: 28px; overflow: hidden; transition: transform .45s var(--ease-out), box-shadow .45s; }
.hcard:hover { transform: translateY(-6px); box-shadow: var(--ombre); }
.hcard img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hcard img.fit-art { object-fit: cover; }
.htxt { padding: 24px 26px 30px; }
.htxt em { font-family: var(--f-titre); font-style: normal; font-weight: 800; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-txt); }
.htxt h3 { margin: 8px 0 10px; font-size: 1.4rem; }
.htxt p { color: var(--gris); margin: 0; }
@media (max-width: 900px) { .hgrid { grid-template-columns: 1fr; } }
.actions { background: var(--papier); }
.filtres { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 34px; }
.fbtn { min-height: 46px; padding: 8px 20px; border-radius: 999px; border: 2px solid var(--encre); background: transparent; font-family: var(--f-titre); font-weight: 750; cursor: pointer; transition: background-color .2s, color .2s; }
.fbtn:hover { background: var(--sable); }
.fbtn[aria-pressed="true"] { background: #0b2b2d; color: #fff; }
.acards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.acard { background: #fff; border: 1px solid var(--trait); border-radius: 26px; padding: 28px 28px 30px; display: flex; flex-direction: column; gap: 6px; view-transition-name: var(--vt); transition: transform .45s var(--ease-out), box-shadow .45s; }
.acard:hover { transform: translateY(-5px); box-shadow: var(--ombre); }
.acard h3 { font-size: 1.45rem; letter-spacing: -.03em; }
.acard p { color: var(--gris); }
.acard > a { margin-top: auto; font-family: var(--f-titre); font-weight: 750; text-decoration: none; }
.acard > a:hover { text-decoration: underline; }
@media (max-width: 960px) { .acards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .acards { grid-template-columns: 1fr; } }
.compose { background: var(--teal-2); color: #fff; }
.compose .h2 { color: #fff; } .compose .h2 em { color: var(--peche); } .compose .kicker { color: var(--peche); } .compose .lead { color: rgba(255, 255, 255, .85); }
.compose form { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 36px; }
.compose fieldset { border: 1px solid rgba(255, 255, 255, .2); border-radius: 24px; padding: 22px 24px 18px; margin: 0; display: grid; gap: 6px; }
.compose legend { font-family: var(--f-titre); font-weight: 800; font-size: 1.2rem; padding: 0 8px; }
.compose label { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 12px; border-radius: 12px; cursor: pointer; }
.compose label:hover { background: rgba(255, 255, 255, .08); }
.compose input[type=radio] { width: 22px; height: 22px; accent-color: var(--orange); }
.compose .go { grid-column: 1 / -1; }
.resultat { grid-column: 1 / -1; display: none; background: var(--papier); color: var(--encre); border-radius: 26px; padding: 30px 34px; }
.resultat.show { display: block; animation: monte .6s var(--ease-out); }
.resultat h3 { color: var(--teal); font-size: 1.7rem; }
@keyframes monte { from { opacity: 0; transform: translateY(20px); } }
@media (max-width: 760px) { .compose form { grid-template-columns: 1fr; } }
.evts { background: var(--papier); }
.egrid-v { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; }
.ecv { background: #fff; border: 1px solid var(--trait); border-radius: 26px; overflow: hidden; display: flex; flex-direction: column; transition: transform .45s var(--ease-out), box-shadow .45s; }
.ecv:hover { transform: translateY(-5px) rotate(-.4deg); box-shadow: var(--ombre); }
.ecv > img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ecv-noimg { aspect-ratio: 16 / 9; background: #006064; display: grid; place-items: center; position: relative; overflow: hidden; }
.ecv-noimg::after { content: ""; position: absolute; width: 70%; aspect-ratio: 1; right: -20%; bottom: -40%; border-radius: 50%; border: 30px solid rgba(255, 171, 145, .2); }
.egrid-v:not(.past) .ecv:nth-child(2) .ecv-noimg { background: var(--orange); }
.egrid-v:not(.past) .ecv:nth-child(2) .ecv-noimg span { color: #0b2b2d; }
.ecv-noimg span { font-family: var(--f-titre); font-weight: 900; font-size: clamp(2.4rem, 4vw, 3.6rem); line-height: .9; letter-spacing: -.05em; color: #fff; text-align: center; text-transform: uppercase; }
.ecv-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.edate { font-family: var(--f-titre); font-weight: 800; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--orange-txt); margin: 0; }
.ecv h3 { font-size: 1.3rem; letter-spacing: -.025em; margin: 4px 0 6px; }
.ecv .elink { margin-top: 8px; align-self: flex-start; }
.past-head { margin-top: 90px; }
.h3-past { font-size: clamp(1.8rem, 3.4vw, 2.8rem); letter-spacing: -.04em; }
@media (max-width: 960px) { .egrid-v { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .egrid-v { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ Exposition : galerie entraînée par le défilement */
.galerie { background: var(--nuit); color: #fff; padding: clamp(70px, 8vw, 110px) 0; }
.galerie .h2 { color: #fff; } .galerie .h2 em { color: var(--peche); } .galerie .kicker { color: var(--peche); }
.galerie__tete p { color: rgba(255, 255, 255, .8); }
.galerie__piste { list-style: none; margin: 30px 0 0; padding: 0 clamp(20px, 4vw, 44px); display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; max-width: var(--wrap); margin-inline: auto; }
.galerie__btn { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 22px; overflow: hidden; cursor: zoom-in; background: #000; text-align: left; }
.galerie__btn img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .9s var(--ease-out), opacity .4s; }
.galerie__btn:hover img, .galerie__btn:focus-visible img { transform: scale(1.06); opacity: .85; }
.galerie__nom { position: absolute; left: 16px; bottom: 14px; font-family: var(--f-titre); font-weight: 800; font-size: 1.2rem; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .8); }
.galerie__num { position: absolute; right: 14px; top: 12px; font-family: var(--f-titre); font-weight: 800; font-size: .8rem; color: #0b2b2d; background: var(--peche); border-radius: 999px; padding: 4px 10px; }
/* version « défilement horizontal » (grand écran, animations actives) */
html.motion-ok .galerie--h { height: var(--h, 300vh); padding: 0; }
html.motion-ok .galerie--h .galerie__collant { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: 90px 0 40px; }
html.motion-ok .galerie--h .galerie__piste { display: flex; gap: 22px; width: max-content; max-width: none; margin: 30px 0 0; padding: 0 clamp(20px, 4vw, 44px); transform: translateX(var(--gx, 0)); will-change: transform; }
html.motion-ok .galerie--h .galerie__item { width: clamp(300px, 34vw, 520px); flex: none; }
html.motion-ok .galerie--h .galerie__item:nth-child(even) { margin-top: 60px; }
.visionneuse { border: 0; padding: 0; background: transparent; max-width: min(1100px, 94vw); width: 100%; color: #fff; }
.visionneuse::backdrop { background: rgba(1, 20, 21, .92); }
.visionneuse figure { margin: 0; }
.visionneuse img { width: 100%; max-height: 78vh; object-fit: contain; border-radius: 18px; }
.visionneuse figcaption { font-family: var(--f-titre); font-weight: 800; font-size: 1.5rem; margin-top: 14px; }
.visionneuse__nav { display: flex; gap: 10px; justify-content: flex-end; margin-top: -40px; }
.visionneuse__nav button { min-width: 52px; min-height: 52px; border-radius: 999px; border: 2px solid #fff; background: transparent; color: #fff; font-size: 1.4rem; padding: 0 16px; cursor: pointer; font-family: var(--f-titre); font-weight: 750; }
.visionneuse__nav .vis-fermer { font-size: 1rem; }
.visionneuse__nav button:hover { background: #fff; color: var(--encre); }

/* ------------------------------------------------------------------ Don : simulateur */
.calcul { padding: clamp(70px, 9vw, 120px) 0 !important; background: var(--papier); }
.calcul__boite { display: grid; grid-template-columns: 1.1fr .9fr; border-radius: 36px; overflow: hidden; border: 1px solid var(--trait); box-shadow: var(--ombre); }
.calcul__txt { padding: clamp(28px, 4vw, 56px); background: #fff; }
.calcul__txt h2 { font-size: clamp(1.8rem, 3.4vw, 3rem); letter-spacing: -.04em; }
.calcul__qui { border: 0; padding: 0; margin: 22px 0; display: flex; flex-wrap: wrap; gap: 10px; }
.calcul__qui label { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 18px; border: 2px solid var(--encre); border-radius: 999px; cursor: pointer; font-weight: 600; }
.calcul__qui label:has(input:checked) { background: #0b2b2d; color: #fff; }
.calcul__qui input { width: 20px; height: 20px; accent-color: var(--orange); }
.calcul__label { display: block; font-family: var(--f-titre); font-weight: 750; font-size: 1.15rem; margin-bottom: 8px; }
.calcul__label output { font-weight: 900; color: var(--teal); font-size: 1.5rem; }
.calcul__range { width: 100%; height: 44px; accent-color: var(--orange); cursor: pointer; }
.calcul__res { padding: clamp(28px, 4vw, 56px); background: var(--teal-2); color: #fff; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.calcul__res-l { font-family: var(--f-titre); font-weight: 750; color: var(--peche); margin: 0; }
.calcul__res-n { font-family: var(--f-titre); font-weight: 900; font-size: clamp(3.4rem, 8vw, 6.4rem); letter-spacing: -.06em; line-height: .9; margin: 0; font-variant-numeric: tabular-nums; }
.calcul__res-d { color: rgba(255, 255, 255, .85); margin-bottom: 18px; }
.calcul__res .btn { align-self: flex-start; }
@media (max-width: 860px) { .calcul__boite { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ Révélations (activées seulement si les animations sont permises) */
html.motion-ok [data-reveal]:not(.is-in), html.motion-ok .reveal-auto:not(.is-in) { opacity: 0; transform: translateY(36px); }
html.motion-ok [data-reveal], html.motion-ok .reveal-auto { transition: opacity .9s var(--ease-out), transform 1s var(--ease-out); transition-delay: var(--d, 0s); }
html.motion-ok .split:not(.is-in) .w { opacity: 0; transform: translateY(.45em) rotate(2deg); filter: blur(6px); }
html.motion-ok .split .w { transition: opacity .8s var(--ease-out), transform .9s var(--ease-out), filter .8s var(--ease-out); transition-delay: calc(var(--i) * 55ms); }
/* titre principal : animé dès le premier affichage (toujours présent pour le LCP) */
html.motion-ok .hero h1 .w, html.motion-ok .phero h1 .w { animation: mot 1s var(--ease-out) both; animation-delay: calc(120ms + var(--i) * 70ms); }
html.motion-ok .hero h1, html.motion-ok .phero h1 { opacity: 1; }
@keyframes mot { from { opacity: .01; transform: translateY(.5em) rotate(3deg); filter: blur(8px); } }
html.motion-ok .hero__sub, html.motion-ok .hero__ctas, html.motion-ok .hero__quiet, html.motion-ok .hero__over, html.motion-ok .phero__sub, html.motion-ok .ariane { animation: monte 1s var(--ease-out) both; }
html.motion-ok .hero__sub { animation-delay: .55s; } html.motion-ok .hero__ctas { animation-delay: .7s; } html.motion-ok .hero__quiet { animation-delay: .85s; } html.motion-ok .phero__sub { animation-delay: .45s; }
html.motion-ok .badge { animation: badge 1.4s var(--ease-out) .6s both; }
@keyframes badge { from { opacity: 0; transform: scale(.6) rotate(-90deg); } }
/* images révélées par un rideau */
html.motion-ok .scard .sphoto, html.motion-ok .hcard img, html.motion-ok .ecv > img { clip-path: inset(0 0 var(--rideau, 0%) 0); }
html.motion-ok .scard:not(.is-in) .sphoto, html.motion-ok .hcard:not(.is-in) img, html.motion-ok .ecv:not(.is-in) > img { --rideau: 100%; }
html.motion-ok .scard .sphoto, html.motion-ok .hcard img, html.motion-ok .ecv > img { transition: clip-path 1.2s var(--ease-out) .15s, transform 1s var(--ease-out); }

/* Halo + inclinaison au pointeur */
.tilt { transform-style: preserve-3d; }
.tilt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 171, 145, .28), transparent 45%); opacity: 0; transition: opacity .3s; }
.tilt:hover::after { opacity: 1; }

/* Transitions de page natives (View Transitions) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-sort .35s var(--ease) both; }
  ::view-transition-new(root) { animation: vt-entre .55s var(--ease-out) both; }
  ::view-transition-group(entete) { animation: none; }
}
@keyframes vt-sort { to { opacity: 0; transform: translateY(-20px) scale(.985); } }
@keyframes vt-entre { from { opacity: 0; transform: translateY(30px); } }
.cta-band .container > .btn:first-of-type:not(:only-of-type) { align-self: end; margin-bottom: 8px; }
.cta-band .container > .btn:last-of-type:not(:only-of-type) { align-self: start; margin-top: 8px; }

/* =====================================================================
   Accessibilité avancée — classes posées sur <html> AVANT le rendu par a11y-init.js
   a11y-simple (mode un clic) · a11y-nomotion · a11y-contrast · a11y-dark · a11y-font-atkinson · a11y-font-dys
   a11y-lh-1/2 · a11y-sp-1/2 · a11y-underline · a11y-cursor · a11y-noimg · a11y-resumes · a11y-guide
   ===================================================================== */

/* ---------- Arrêt des animations (réglage ou préférence système) */
html.a11y-nomotion *, html.a11y-nomotion *::before, html.a11y-nomotion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.a11y-nomotion [data-reveal], html.a11y-nomotion .split .w, html.a11y-nomotion .reveal-auto { opacity: 1 !important; transform: none !important; filter: none !important; }
html.a11y-nomotion .ticker__piste, html.a11y-nomotion .ptrack { animation: none !important; flex-wrap: wrap; width: auto; justify-content: center; }
html.a11y-nomotion .ticker__lot + .ticker__lot, html.a11y-nomotion .pset-dup { display: none !important; }
html.a11y-nomotion .ticker__lot, html.a11y-nomotion .pset { flex-wrap: wrap; justify-content: center; white-space: normal; padding-right: 0; }
html.a11y-nomotion .pmarquee { mask-image: none; -webkit-mask-image: none; }
html.a11y-nomotion .ticker { transform: none; margin-top: 0; }
html.a11y-nomotion .flip__a { display: none; }
html.a11y-nomotion .flip__b { position: static; opacity: 1; }
html.a11y-nomotion .lecture-progress { display: none; }
html.a11y-nomotion .record { position: relative; top: 0; }
html.a11y-nomotion .slogan__l { translate: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .ticker__piste, .ptrack { animation: none !important; flex-wrap: wrap; width: auto; justify-content: center; }
  .ticker__lot + .ticker__lot, .pset-dup { display: none !important; }
  .ticker__lot, .pset { flex-wrap: wrap; justify-content: center; white-space: normal; padding-right: 0; }
  .pmarquee { mask-image: none; -webkit-mask-image: none; }
  .ticker { transform: none; margin-top: 0; }
  .flip__a { display: none; }
  .flip__b { position: static; opacity: 1; }
  .badge__anneau { animation: none !important; }
  .record { position: relative; top: 0; }
}

/* ---------- Contraste renforcé */
html.a11y-contrast { --teal: #003b3e; --teal-2: #002325; --nuit: #000; --orange-txt: #9a2c00; --gris: #1d2b2b; --encre: #000; --trait: #000; --papier: #fff; --sable: #fff; --sable-2: #000; --peche: #ffd3c2; --peche-clair: #fff; --teal-clair: #fff; }
html.a11y-contrast body { background: #fff; color: #000; }
html.a11y-contrast .card, html.a11y-contrast .acard, html.a11y-contrast .ecv, html.a11y-contrast .hcard, html.a11y-contrast .fb-card, html.a11y-contrast .dsf-card, html.a11y-contrast .dsf-q, html.a11y-contrast .record, html.a11y-contrast .calcul__boite { border: 2px solid #000 !important; box-shadow: none !important; }
html.a11y-contrast .hero, html.a11y-contrast .phero, html.a11y-contrast .records, html.a11y-contrast .pied, html.a11y-contrast .reseau, html.a11y-contrast .compose, html.a11y-contrast .galerie, html.a11y-contrast .slogan, html.a11y-contrast .calcul__res, html.a11y-contrast .dsf-don, html.a11y-contrast .quote { background: #000 !important; color: #fff; }
html.a11y-contrast .hero__voile, html.a11y-contrast .helix, html.a11y-contrast .dsf-don::after, html.a11y-contrast .ecv-noimg::after { display: none !important; }
html.a11y-contrast .hero h1 em, html.a11y-contrast .phero h1 em, html.a11y-contrast .records .h2 em { color: #ffd3c2; }
html.a11y-contrast .slogan__l:first-child { color: #fff; -webkit-text-stroke: 0; }
html.a11y-contrast .pied__geant { -webkit-text-stroke: 2px #fff; }
html.a11y-contrast .btn--orange, html.a11y-contrast .btn-o, html.a11y-contrast .btn-primary { --bg: #ffab91; --fg: #000; border-color: #000; }
html.a11y-contrast .hd { background: #fff; border-bottom: 3px solid #000; backdrop-filter: none; }
html.a11y-contrast :focus-visible { outline: 4px solid #000; box-shadow: 0 0 0 7px #ffd3c2; }
html.a11y-contrast .lumiere .w { color: #000 !important; }
html.a11y-contrast .lumiere em .w { color: var(--teal) !important; }
html.a11y-contrast .dsf-une { background: #000; }
html.a11y-contrast .ticker { background: #ffab91; }
html.a11y-contrast .cta-band { background: #ffab91 !important; }
html.a11y-contrast .dsf-pts li, html.a11y-contrast .dsf-use li, html.a11y-contrast .dsf-facts li { background: #fff; border: 1px solid #000; }

/* ---------- Mode sombre */
html.a11y-dark { --papier: #0e1a1b; --sable: #142627; --sable-2: #24403f; --encre: #e8f1f0; --gris: #b7cdcc; --trait: rgba(232, 241, 240, .18); --teal: #58c7cc; --teal-clair: #183536; --orange-txt: #ff8a65; --peche-clair: #3a2a24; color-scheme: dark; }
html.a11y-dark body { background: var(--papier); color: var(--encre); }
html.a11y-dark .card, html.a11y-dark .acard, html.a11y-dark .ecv, html.a11y-dark .hcard, html.a11y-dark .fb-card, html.a11y-dark .dsf-card, html.a11y-dark .dsf-q, html.a11y-dark .calcul__txt, html.a11y-dark .field input, html.a11y-dark .field select, html.a11y-dark .field textarea, html.a11y-dark .dsf-find input, html.a11y-dark .plogo { background: #13292a !important; color: var(--encre); }
html.a11y-dark .v2c section:not(.alt) .card { background: #13292a; }
html.a11y-dark .dsf-pts li, html.a11y-dark .dsf-use li, html.a11y-dark .dsf-facts li, html.a11y-dark .dsf-lead, html.a11y-dark .dsf-collecte-intro, html.a11y-dark .dsf-q-d, html.a11y-dark .dsf-pts .dsf-h, html.a11y-dark .dsf-collecte-note, html.a11y-dark .dsf-find-none { color: var(--encre); }
html.a11y-dark .dsf-pts strong, html.a11y-dark .dsf-q-t, html.a11y-dark .dsf-facts strong, html.a11y-dark .dsf-pts .dsf-tag, html.a11y-dark .dsf-find-l { color: #8fe0e4; }
html.a11y-dark .dsf-q > summary:hover { background: #183536; }
html.a11y-dark .record { background: #13292a; color: var(--encre); }
html.a11y-dark .record__t, html.a11y-dark .record__u, html.a11y-dark .record__big, html.a11y-dark .record:nth-child(2) .record__big { color: var(--encre) !important; }
html.a11y-dark .record__d { color: var(--gris); }
html.a11y-dark .faq summary::after { background: #13292a; }
html.a11y-dark .faq details p, html.a11y-dark .record__d { color: var(--gris); }
html.a11y-dark .hd { background: color-mix(in srgb, #0e1a1b 92%, transparent); }
html.a11y-dark .burger { border-color: var(--encre); }
html.a11y-dark .burger__barres i { background: var(--encre); }
html.a11y-dark .marque img, html.a11y-dark .manifeste__logo::before { filter: none; }
html.a11y-dark .manifeste__logo::before { background: radial-gradient(circle, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, 0) 70%); }
html.a11y-dark .cta-band { color: #0b2b2d; }
html.a11y-dark .cta-band h2, html.a11y-dark .cta-band p { color: #0b2b2d; }
html.a11y-dark .ticker { color: #0b2b2d; }
html.a11y-dark .btn--orange, html.a11y-dark .btn-o, html.a11y-dark .btn-primary { --fg: #0b2b2d; }
html.a11y-dark .sousmenu { background: #13292a; }
html.a11y-dark .tag { color: #8fe0e4; }
html.a11y-dark.a11y-contrast { --papier: #000; --sable: #000; --encre: #fff; --gris: #f0f0f0; --trait: #fff; --teal: #8fe0e4; --orange-txt: #ffab91; }
html.a11y-dark.a11y-contrast body { background: #000; color: #fff; }
html.a11y-dark.a11y-contrast .card, html.a11y-dark.a11y-contrast .acard, html.a11y-dark.a11y-contrast .ecv, html.a11y-dark.a11y-contrast .hcard, html.a11y-dark.a11y-contrast .dsf-card, html.a11y-dark.a11y-contrast .record { background: #000 !important; border-color: #fff !important; }
html.a11y-dark.a11y-contrast .hd { background: #000; border-bottom-color: #fff; }

/* ---------- Polices lisibles */
html.a11y-font-atkinson body, html.a11y-font-atkinson body *:not(svg):not(svg *) { font-family: 'Atkinson Hyperlegible', Verdana, Arial, sans-serif !important; font-style: normal !important; }
html.a11y-font-dys body, html.a11y-font-dys body *:not(svg):not(svg *) { font-family: 'OpenDyslexic', 'Comic Sans MS', Verdana, sans-serif !important; font-style: normal !important; }
html.a11y-font-atkinson .titre-xxl, html.a11y-font-dys .titre-xxl { font-size: clamp(2.3rem, 6vw, 5.2rem); letter-spacing: -.01em; }
html.a11y-font-dys .titre-xxl, html.a11y-font-dys .titre-xl, html.a11y-font-dys .h2 { letter-spacing: 0; line-height: 1.2; }

/* ---------- Interlignage et espacement */
html.a11y-lh-1 { --lh: 1.95; --lh-titre: 1.2; }
html.a11y-lh-2 { --lh: 2.3; --lh-titre: 1.3; }
html.a11y-lh-1 p, html.a11y-lh-1 li, html.a11y-lh-1 dd { line-height: 1.95 !important; }
html.a11y-lh-2 p, html.a11y-lh-2 li, html.a11y-lh-2 dd { line-height: 2.3 !important; }
html.a11y-lh-1 h1, html.a11y-lh-1 h2, html.a11y-lh-1 h3 { line-height: 1.25 !important; }
html.a11y-lh-2 h1, html.a11y-lh-2 h2, html.a11y-lh-2 h3 { line-height: 1.35 !important; }
html.a11y-sp-1 body *:not(svg):not(svg *) { letter-spacing: .06em !important; word-spacing: .16em !important; }
html.a11y-sp-2 body *:not(svg):not(svg *) { letter-spacing: .12em !important; word-spacing: .3em !important; }
html.a11y-sp-1 p, html.a11y-sp-2 p { margin-bottom: 1.6em; }

/* ---------- Liens soulignés */
html.a11y-underline a:not(.btn) { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: .2em; }
html.a11y-underline .btn { outline: 2px solid currentColor; outline-offset: -6px; }

/* ---------- Curseur agrandi */
html.a11y-cursor, html.a11y-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M6 3l30 21-13 2 8 16-6 3-8-16-11 9z' fill='%23000' stroke='%23fff' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, auto !important; }
html.a11y-cursor a, html.a11y-cursor a *, html.a11y-cursor button, html.a11y-cursor button *, html.a11y-cursor label, html.a11y-cursor summary, html.a11y-cursor input[type=range] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='18' fill='%23ff5722' fill-opacity='.35' stroke='%23000' stroke-width='3'/%3E%3Ccircle cx='24' cy='24' r='4' fill='%23000' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") 24 24, pointer !important; }

/* ---------- Images décoratives masquées */
html.a11y-noimg [data-deco], html.a11y-noimg img[alt=""], html.a11y-noimg .helix, html.a11y-noimg .hero__voile, html.a11y-noimg .badge, html.a11y-noimg .ticker, html.a11y-noimg .manifeste__logo, html.a11y-noimg .pied__geant, html.a11y-noimg .slogan, html.a11y-noimg .dsf-flags, html.a11y-noimg .ecv-noimg::after, html.a11y-noimg .dsf-don::after { display: none !important; }
html.a11y-noimg .manifeste__grille { grid-template-columns: 1fr; }

/* ---------- Résumés en langage simple (FALC) */
html.a11y-resumes .resume, html.a11y-simple .resume { display: block; background: var(--teal-clair); color: var(--encre); border-left: 6px solid var(--teal); border-radius: 0 14px 14px 0; padding: 14px 18px; margin: 18px 0; font-size: 1.02rem; max-width: 70ch; }
html.a11y-resumes .hero .resume, html.a11y-resumes .records .resume, html.a11y-resumes .reseau .resume, html.a11y-resumes .compose .resume { background: #fff; color: #0b2b2d; }
html.a11y-resumes .resume::before, html.a11y-simple .resume::before { content: none; }

/* ---------- Mode accessible en un clic : compléments de mise en page */
html.a11y-simple .ticker, html.a11y-simple .badge, html.a11y-simple .hero__defile, html.a11y-simple .hero__voile, html.a11y-simple .helix, html.a11y-simple .pied__geant, html.a11y-simple .slogan, html.a11y-simple .lecture-progress { display: none !important; }
html.a11y-simple .hero { min-height: 0; padding: 60px 0; }
html.a11y-simple .hero h1, html.a11y-simple .titre-xxl { font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: 0; }
html.a11y-simple .titre-xl { font-size: clamp(2rem, 4.4vw, 3.2rem); letter-spacing: 0; }
html.a11y-simple .h2, html.a11y-simple .titre-lumiere { letter-spacing: 0; }
html.a11y-simple .rejoindre__tete { position: static; }
html.a11y-simple .chiffre__n, html.a11y-simple .record__big { letter-spacing: -.01em; }
html.a11y-simple .galerie__piste { transform: none !important; }

/* ---------- Bouton flottant et panneau de réglages */
.a11y-fab { position: fixed; right: 18px; bottom: 18px; z-index: 210; display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 20px 8px 10px; border-radius: 999px; border: 2px solid #fff; background: var(--encre, #0b2b2d); color: #fff; font-family: var(--f-titre); font-weight: 800; font-size: .95rem; box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .55); cursor: pointer; transition: transform .3s var(--ease-out), background-color .2s; }
html.a11y-dark .a11y-fab { background: #000; }
.a11y-fab svg { width: 38px; height: 38px; padding: 8px; border-radius: 50%; background: var(--orange); color: #0b2b2d; }
.a11y-fab:hover { transform: translateY(-3px); }
.a11y-fab[aria-expanded="true"] { background: var(--orange); color: #0b2b2d; }
.a11y-fab[aria-expanded="true"] svg { background: #0b2b2d; color: #fff; }
@media (max-width: 560px) { .a11y-fab { padding: 8px; } .a11y-fab span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }

.a11y-panneau { position: fixed; right: 18px; bottom: 88px; z-index: 220; width: min(440px, calc(100vw - 24px)); max-height: calc(100vh - 180px); overflow-y: auto; background: #fff; color: #0b2b2d; border: 2px solid #0b2b2d; border-radius: 26px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6); padding: 22px 22px 18px; font-family: var(--f-texte); font-size: 1rem; line-height: 1.45; }
.a11y-panneau[hidden] { display: none; }
html.motion-ok .a11y-panneau:not([hidden]) { animation: panneau .35s var(--ease-out); }
@keyframes panneau { from { opacity: 0; transform: translateY(16px) scale(.98); } }
html.a11y-dark .a11y-panneau { background: #0e1a1b; color: #e8f1f0; border-color: #e8f1f0; }
.a11y-panneau h2 { font-family: var(--f-titre); font-size: 1.3rem; letter-spacing: -.02em; margin: 0 0 4px; color: inherit; }
.a11y-panneau .a11y-intro { font-size: .9rem; margin: 0 0 14px; color: inherit; opacity: .85; }
.a11y-panneau fieldset { border: 0; margin: 0; padding: 12px 0; border-top: 1px solid rgba(11, 43, 45, .18); }
html.a11y-dark .a11y-panneau fieldset { border-top-color: rgba(232, 241, 240, .25); }
.a11y-panneau legend { font-family: var(--f-titre); font-weight: 800; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; padding: 0; margin-bottom: 8px; float: left; width: 100%; }
.a11y-panneau legend + * { clear: both; }
.a11y-ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; }
.a11y-ligne label { flex: 1; cursor: pointer; font-weight: 600; }
.a11y-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.a11y-seg label { position: relative; flex: 1 1 auto; }
.a11y-seg input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.a11y-seg span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px 12px; border: 2px solid currentColor; border-radius: 12px; font-weight: 700; font-size: .92rem; text-align: center; }
.a11y-seg input:checked + span { background: #0b2b2d; color: #fff; border-color: #0b2b2d; }
html.a11y-dark .a11y-seg input:checked + span { background: #e8f1f0; color: #0b2b2d; border-color: #e8f1f0; }
.a11y-seg input:focus-visible + span { outline: 3px solid var(--orange-txt, #c2410c); outline-offset: 2px; }
.a11y-taille { display: flex; align-items: center; gap: 10px; }
.a11y-taille button { width: 48px; height: 48px; border-radius: 12px; border: 2px solid currentColor; background: transparent; font-family: var(--f-titre); font-weight: 900; font-size: 1.05rem; cursor: pointer; }
.a11y-taille button:hover { background: rgba(0, 96, 100, .12); }
.a11y-taille output { min-width: 4.2em; text-align: center; font-family: var(--f-titre); font-weight: 900; font-size: 1.2rem; }
/* interrupteurs (input checkbox role=switch) */
.a11y-switch { appearance: none; -webkit-appearance: none; flex: none; width: 56px; height: 32px; border-radius: 999px; background: #8aa3a2; border: 2px solid #0b2b2d; position: relative; cursor: pointer; margin: 0; transition: background-color .2s; }
.a11y-switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 1px solid #0b2b2d; transition: transform .25s var(--ease-out); }
.a11y-switch:checked { background: var(--teal, #006064); }
.a11y-switch:checked::after { transform: translateX(24px); }
.a11y-switch:focus-visible { outline: 3px solid var(--orange-txt, #c2410c); outline-offset: 3px; }
html.a11y-dark .a11y-switch { border-color: #e8f1f0; }
.a11y-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; border-top: 1px solid rgba(11, 43, 45, .18); padding-top: 14px; margin-top: 4px; }
.a11y-actions button { min-height: 46px; padding: 8px 16px; border-radius: 999px; border: 2px solid currentColor; background: transparent; font-weight: 700; cursor: pointer; }
.a11y-actions .a11y-fermer { background: #0b2b2d; color: #fff; border-color: #0b2b2d; }
html.a11y-dark .a11y-actions .a11y-fermer { background: #e8f1f0; color: #0b2b2d; }
.a11y-note { font-size: .82rem; opacity: .85; margin: 10px 0 0; }
.a11y-panneau .a11y-simple-box { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #e3f1f0; color: #0b2b2d; border-radius: 16px; padding: 12px 14px; margin-bottom: 8px; }
.a11y-panneau .a11y-simple-box label { font-weight: 800; font-family: var(--f-titre); }
.a11y-panneau .a11y-simple-box small { display: block; font-weight: 400; font-family: var(--f-texte); font-size: .82rem; }

/* ---------- Guide de lecture */
.guide-lecture { position: fixed; left: 0; right: 0; z-index: 205; pointer-events: none; background: rgba(0, 0, 0, .55); }
.guide-lecture--haut { top: 0; height: var(--gy, 40vh); }
.guide-lecture--bas { bottom: 0; top: calc(var(--gy, 40vh) + var(--gh, 84px)); }
.guide-lecture--ligne { top: calc(var(--gy, 40vh) + var(--gh, 84px)); height: 3px; background: var(--orange); }
html.a11y-dark .lumiere .w { color: #8fa5a3; }
html.a11y-dark .lumiere em .w { color: #6fb3b7; }
html.a11y-dark .lumiere .w.is-lit { color: var(--encre); }
html.a11y-dark .lumiere em .w.is-lit { color: var(--teal); }
html.a11y-dark.a11y-contrast .dsf-pts li, html.a11y-dark.a11y-contrast .dsf-use li, html.a11y-dark.a11y-contrast .dsf-facts li { background: #000; border-color: #fff; color: #fff; }
html.a11y-dark .ticker, html.a11y-dark .cta-band, html.a11y-dark .cta-band * { color: #0b2b2d; }
html.a11y-dark .cta-band .btn-primary { color: #fff; }