/* =========================================================================
   CIB-5 — Colloque International sur la Biodiversité · « Entre Terre et Mer »
   Implémentation du design system officiel
   (projet Claude Design « Système design AREBIO CIB5 » — Design System CIB-5).
   Toutes les valeurs ci-dessous sont issues du fichier source du design system.
   ========================================================================= */

/* --- Tokens ------------------------------------------------------------- */
:root{
  /* Palette principale */
  --vert-foret:#0F4D3A;      /* Vert forêt profond */
  --vert-bio:#2E7D32;        /* Vert biodiversité */
  --vert-vegetal:#7FBF5A;    /* Vert clair végétal */
  --bleu-ocean:#0B5C7A;      /* Bleu océan profond */
  --bleu-lagon:#1EA7B6;      /* Bleu lagon */
  --blanc-casse:#F5F7F4;     /* Blanc cassé */

  /* Couleurs secondaires */
  --vert-tendre:#DCEACF;
  --vert-medicinal:#A4C69B;
  --vert-sauge:#E9F2E6;
  --beige-sable:#EBDCC0;
  --gris-vert:#6B7D6F;
  --gris-clair:#F0F2F0;

  /* Accents étendus (avec parcimonie) */
  --emeraude:#004B2B;
  --vert-recif:#228A5D;
  --menthe-lagon:#65C99E;
  --terre-mangrove:#9F4435;  /* « brique » — réservé à l'action principale (DS) */
  --brique-fonce:#803428;    /* survol du primaire */
  --brun-racine:#4A0B00;

  /* Dégradés officiels du design system (section « Dégradés ») */
  --grad-terre-mer:linear-gradient(135deg,#0F4D3A 0%,#0B5C7A 55%,#1EA7B6 100%);
  --grad-canopee:linear-gradient(135deg,#0F4D3A 0%,#2E7D32 100%);
  --grad-lagon:linear-gradient(135deg,#0B5C7A 0%,#1EA7B6 60%,#65C99E 100%);
  --grad-terre-chaude:linear-gradient(135deg,#4A0B00 0%,#9F4435 100%);
  /* Variante « terre → mer » pour le TEXTE. Même bornes que le dégradé officiel,
     mais la dernière est poussée à 130 % — hors de la boîte — exactement comme le
     hero du DS. Le texte tend donc vers le lagon sans jamais l'atteindre : il
     finit à ~#137A92 (4,9:1 sur blanc, 4,0:1 sur le bleu clair des sections mer).
     Le lagon #1EA7B6 pur ne ferait que 2,9:1 sur blanc → illisible. */
  --grad-titre:linear-gradient(135deg,#0F4D3A 0%,#0B5C7A 80%,#1EA7B6 130%);
  /* Titres sur fond foncé (hero). S'arrête au vert tendre : le menthe #65C99E
     tomberait à 3,0:1 sur le bleu du hero. Là on tient 12,7:1 → 4,9:1. */
  --grad-titre-clair:linear-gradient(135deg,#ffffff 0%,#DCEACF 100%);

  /* Système */
  --encre:#2A3A30;
  --bordure:#E4EBE2;
  --blanc:#ffffff;
  --bleu-clair:#D6EBEF;      /* fond badge « récif corallien » */
  --terre-clair:#F3E1DC;     /* fond badge « terrain » */

  /* Typographies */
  --f-titre:'Montserrat',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-texte:'Lato',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* Signature : Lumios Marker depuis le 16/07 (mise à jour du DS par le client),
     en remplacement de Caveat Brush. */
  --f-signature:'Lumios Marker',cursive;

  /* Formes */
  --ombre:0 4px 18px var(--s-ombre);
  --ombre-forte:0 8px 24px rgba(15,77,58,.35);
  --radius:14px;
  --radius-lg:16px;
  --pill:100px;
  --wrap:1080px;
  --h-header:66px;   /* hauteur de l'en-tête fixed — le hero compense en padding */

  /* Alias rétro-compat (composants existants) */
  --vert:var(--vert-bio); --vert-fonce:var(--vert-foret); --vert-clair:var(--vert-sauge);
  --accent:var(--vert-vegetal); --feuille:var(--vert-vegetal);
  --mer:var(--bleu-ocean); --mer-fonce:var(--bleu-ocean); --mer-clair:var(--bleu-clair);
  --sable:var(--blanc-casse); --gris:var(--gris-vert);

  /* --- Surfaces : le seul jeu qui bascule en thème sombre ---------------
     Les couleurs de MARQUE (vert forêt, brique, lagon…) ne bougent JAMAIS :
     une charte reste une charte. Seules changent les surfaces et le texte. */
  --s-fond:var(--blanc-casse);   /* fond de page */
  --s-alt:#ffffff;               /* section alternée */
  --s-tendre:var(--vert-sauge);  /* section verte douce */
  --s-carte:#ffffff;             /* fond de carte */
  --s-bordure:var(--bordure);
  --s-texte:var(--encre);
  /* Texte doux : #57685C et non --gris-vert (#6B7D6F) — l'audit du 18/07 a mesuré
     le gris-vert à 3,49:1 sur le vert tendre et 4,39:1 sur blanc (AA exige 4,5).
     #57685C tient 4,72:1 sur le PIRE fond clair du site (vert tendre #DCEACF)
     tout en restant dans la même famille gris-vert. */
  --s-texte-doux:#57685C;
  --s-titre:var(--vert-foret);
  /* Liens au fil du texte + sous-titres bleus (horaires du programme). En clair,
     le bleu océan tient 5,9:1 sur le pire fond ; en sombre il tombait à 2,2:1
     sur les cartes (audit 18/07) → les deux tokens basculent sur le lagon clair
     #54C7D8, déjà la borne du dégradé de titre sombre (7,6:1 au pire). */
  --s-lien:var(--bleu-ocean);
  --s-subhead:var(--bleu-ocean);
  /* État « accompli » (frise) : le vert récif #228A5D ne faisait que 4,3:1 sur
     blanc — assombri d'un cran en clair, menthe en sombre. */
  --s-fait:#1B7550;
  /* Barre de marque : en-tête + pied. En clair c'est le vert forêt de la charte ;
     en sombre elle bascule sur un vert TRÈS foncé (demande client 17/07) — sinon
     le bandeau vert forêt tranche trop violemment sur la page quasi noire. */
  --s-marque:var(--vert-foret);
  --s-ombre:rgba(15,77,58,.08);
  --s-ombre-forte:rgba(15,77,58,.16);
}

/* --- Thème sombre (valeurs exactes du design system) ---------------------
   Deux sélecteurs, dans cet ordre précis :
     1. [data-theme="dark"]  → choix explicite de l'utilisateur ;
     2. :root:not([data-theme]) + prefers-color-scheme → préférence système,
        UNIQUEMENT si aucun choix explicite n'a été posé.
   Sans le :not(), choisir « clair » sur un système en sombre ne servirait à
   rien : la media query gagnerait. */
:root[data-theme="dark"]{
  --s-fond:#0C1712; --s-alt:#0F1D17; --s-tendre:#132A20; --s-carte:#14231C;
  --s-bordure:#213629; --s-texte:#DCEAE0; --s-texte-doux:#8FA89A;
  --s-titre:#7FD6A8;
  --s-lien:#54C7D8; --s-subhead:#54C7D8; --s-fait:#65C99E;
  --s-marque:#0A2019;   /* en-tête + pied en vert très foncé (cf. --s-marque en :root) */
  --s-ombre:rgba(0,0,0,.4); --s-ombre-forte:rgba(0,0,0,.55);
  /* Le dégradé de titre doit s'éclaircir : le vert forêt sur #0C1712 serait
     illisible (1,4:1). Menthe → lagon = 8,9:1 → 6,1:1. */
  --grad-titre:linear-gradient(135deg,#7FD6A8 0%,#54C7D8 100%);
  /* Badges : les fonds clairs du DS deviennent des teintes profondes. */
  --vert-tendre-b:#1D3B2C; --bleu-clair-b:#123243; --terre-clair-b:#3A211C;
  --gris-clair-b:#1B2A22;
  color-scheme:dark;   /* barres de défilement, champs natifs, etc. */
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme]){
    --s-fond:#0C1712; --s-alt:#0F1D17; --s-tendre:#132A20; --s-carte:#14231C;
    --s-bordure:#213629; --s-texte:#DCEAE0; --s-texte-doux:#8FA89A;
    --s-titre:#7FD6A8;
    --s-lien:#54C7D8; --s-subhead:#54C7D8; --s-fait:#65C99E;
    --s-marque:#0A2019;
    --s-ombre:rgba(0,0,0,.4); --s-ombre-forte:rgba(0,0,0,.55);
    --grad-titre:linear-gradient(135deg,#7FD6A8 0%,#54C7D8 100%);
    --vert-tendre-b:#1D3B2C; --bleu-clair-b:#123243; --terre-clair-b:#3A211C;
    --gris-clair-b:#1B2A22;
    color-scheme:dark;
  }
}

/* --- Base --------------------------------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* Toute cible d'ancre (#soumettre, #h-form après l'envoi d'un formulaire…) se cale
   sous l'en-tête fixe (66 px) au lieu de se glisser dessous. */
:target{scroll-margin-top:84px}
body{margin:0;font-family:var(--f-texte);color:var(--s-texte);background:var(--s-fond);
  transition:background .25s ease, color .25s ease;
  line-height:1.65;font-size:16px}
img{max-width:100%;height:auto;display:block}
/* --s-lien et non bleu-ocean figé : sur les cartes sombres, l'océan tombait à
   2,2:1 (« politique de confidentialité », « S'inscrire » — audit 18/07). */
a{color:var(--s-lien);text-decoration:none}
a:hover{color:var(--bleu-lagon)}
::selection{background:var(--vert-vegetal);color:var(--vert-foret)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,
summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--bleu-lagon);outline-offset:2px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
/* Visible pour les lecteurs d'écran uniquement — sert aux mentions qu'on ne
   veut pas à l'écran mais qu'il faut annoncer (ex. « nouvelle fenêtre »,
   critère Opquast). Pas de display:none : ça les rendrait muettes aussi. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* --- Sélecteur de thème --------------------------------------------------
   flex:0 0 auto + white-space:nowrap : sans ça, il comprime la marque et
   « Entre Terre et Mer » se casse sur quatre lignes. */
/* Sélecteur volontairement discret (client 17/07) : c'est un réglage de confort,
   pas une rubrique — il ne doit pas peser autant que « S'inscrire » juste à côté. */
.theme-switch{display:inline-flex;flex:0 0 auto;gap:1px;padding:2px;border-radius:var(--pill);
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);margin-left:8px;
  white-space:nowrap}
.theme-btn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border:0;border-radius:50%;background:transparent;color:var(--vert-tendre);cursor:pointer;
  transition:background .18s ease,color .18s ease}
.theme-btn svg{width:13px;height:13px}
.theme-btn:hover{background:rgba(255,255,255,.14);color:#fff}
.theme-btn[aria-pressed="true"]{background:var(--vert-vegetal);color:var(--vert-foret)}
/* Le libellé n'a de sens QUE dans le tiroir mobile : là, le sélecteur se retrouve
   seul en bas de liste, sans voisin qui l'explique. Dans la barre desktop, deux
   pastilles soleil/lune au bout du menu se lisent sans mot. */
.theme-lbl{display:none}
@media(max-width:1340px){ .theme-switch{margin-left:8px} }

.skip{position:absolute;left:-9999px;top:auto}
.skip:focus{position:fixed;left:12px;top:12px;z-index:50;display:inline-block;
  background:var(--vert-vegetal);color:var(--vert-foret);padding:8px 14px;border-radius:8px;font-weight:700}
.placeholder{background:#FFF7E6;border-left:4px solid var(--vert-vegetal);padding:2px 8px;
  border-radius:4px;font-style:italic;color:#6B5320}

/* --- Boutons (design system) -------------------------------------------- */
/* PRIMAIRE = accent brique. Le design system est explicite :
   « L'accent brique est réservé à l'action principale (inscription, appel à
   l'action) POUR RESSORTIR SUR LES FONDS VERTS. »
   Blanc sur #9F4435 = 6,3:1 (AA large + normal), survol #803428 = 8,6:1 (AAA).
   C'est la seule couleur chaude de la charte : elle tranche sur tout le site. */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--f-titre);font-weight:700;
  font-size:14px;text-decoration:none;padding:12px 22px;border-radius:var(--pill);border:none;
  cursor:pointer;min-height:46px;background:var(--terre-mangrove);color:#fff;
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease}
.btn:hover{background:var(--brique-fonce);color:#fff;transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(159,68,53,.42)}
.btn--sm{padding:9px 18px;min-height:40px;font-size:13px}
/* SECONDAIRE — outline bleu océan, sur fond clair (DS) */
.btn--secondaire{background:#fff;color:var(--bleu-ocean);border:1.5px solid var(--bleu-ocean);padding:11px 22px}
.btn--secondaire:hover{background:var(--bleu-ocean);color:#fff}
/* TERTIAIRE — vert forêt plein, blanc (9,8:1). Action de second rang sur fond clair (DS) */
.btn--tertiaire{background:var(--vert-foret);color:#fff}
.btn--tertiaire:hover{background:var(--vert-bio);color:#fff;box-shadow:0 8px 22px rgba(15,77,58,.3)}
/* FANTÔME — sur fond foncé (hero), en accompagnement du primaire brique */
.btn--ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.7)}
.btn--ghost:hover{background:rgba(255,255,255,.14);color:#fff;box-shadow:none;transform:translateY(-2px)}
/* LIEN TEXTE — brique souligné (DS) */
.btn--lien{background:transparent;color:var(--terre-mangrove);padding:12px 6px;min-height:auto;
  text-decoration:underline;text-underline-offset:4px}
.btn--lien:hover{background:transparent;color:var(--brun-racine);box-shadow:none;transform:none}
/* Bouton désactivé (ex. « inscriptions bientôt disponibles ») */
/* Contrôle désactivé : exempté de contraste (WCAG 1.4.3). Couleurs FIGÉES à
   dessein — le fond gris-clair ne bascule pas en sombre, le texte non plus. */
.btn[aria-disabled="true"]{background:var(--gris-clair);color:#6B7D6F;cursor:not-allowed;
  pointer-events:none}

/* --- Badges & étiquettes (design system) -------------------------------- */
.badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-titre);font-weight:600;
  font-size:12px;padding:6px 14px;border-radius:var(--pill)}
.badge--mangrove{background:var(--vert-tendre-b,var(--vert-tendre));color:var(--s-titre)}
.badge--recif{background:var(--bleu-clair-b,var(--bleu-clair));color:var(--s-subhead,var(--bleu-ocean))}
.badge--table-ronde{background:var(--vert-bio);color:#fff}
.badge--conference{background:var(--bleu-ocean);color:#fff}
.badge--terrain{background:var(--terre-clair-b,var(--terre-clair));color:var(--terre-mangrove)}
.badge--complet{background:var(--gris-clair-b,var(--gris-clair));color:var(--s-texte-doux)}
.badge--complet::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--vert-vegetal)}

/* --- Header / nav -------------------------------------------------------
   Le bandeau vert plein coupait le hero par une ligne franche (retour client
   16/07). Il est maintenant TRANSPARENT au-dessus du hero — on voit le dégradé
   et l'image passer dessous — puis prend son fond plein dès qu'on scrolle.
   FAIL-SAFE : l'état par défaut est le fond PLEIN. C'est main.js qui ajoute
   .top--transparent en haut de page et la retire au scroll. Sans JS, le menu
   reste donc lisible (un menu transparent bloqué sur du contenu clair serait
   invisible) — cf. aussi le <noscript> dans header.php. */
/* fixed (et non sticky) : sticky reste dans le flux, le hero commencerait donc
   SOUS le header et « transparent » ne montrerait que le fond du body. En fixed,
   le header flotte au-dessus du hero, qui compense par son padding-top. */
header.top{background:var(--s-marque);color:#fff;position:fixed;top:0;left:0;right:0;z-index:30;
  transition:background .3s ease, box-shadow .3s ease}
header.top.top--transparent{background:transparent;box-shadow:none}
/* Au scroll : fond plein + flou d'arrière-plan si supporté. Le fond translucide
   dérive de --s-marque via color-mix, donc il suit le thème comme le fond plein.
   Si color-mix n'est pas supporté, la déclaration tombe et on garde le fond plein
   de la règle ci-dessus (repli propre). */
header.top:not(.top--transparent){box-shadow:0 2px 20px var(--s-ombre-forte)}
@supports (backdrop-filter:blur(8px)){
  header.top:not(.top--transparent){background:color-mix(in srgb, var(--s-marque) 92%, transparent);backdrop-filter:blur(10px)}
}
/* ⚠️ Padding en LONGHAND, et c'est tout l'enjeu : `.wrap` pose `padding:0 20px`,
   et un `padding:12px 0` ici l'écraserait entièrement — même spécificité, déclaré
   après, il gagne. Résultat mesuré le 17/07 : en mobile, où le wrap fait toute la
   largeur, l'en-tête n'avait plus AUCUNE marge et le logo se collait à x=0, l'air
   coupé. Invisible sur desktop, où la max-width du wrap crée la marge elle-même.
   En longhand, les 20 px horizontaux de `.wrap` survivent. */
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-top:12px;padding-bottom:12px}
/* flex:0 0 auto + nowrap : la marque ne doit jamais se faire comprimer par le
   menu ou le sélecteur de thème (« Entre Terre et Mer » se cassait sur 4 lignes). */
/* align-items:center et non baseline : la marque est désormais une IMAGE, et une
   image alignée sur la ligne de base pose son bas sur celle du texte voisin —
   le colibri se retrouvait décalé vers le haut. */
.brand{display:flex;flex:0 0 auto;align-items:center;gap:.6rem;color:#fff;text-decoration:none;
  white-space:nowrap}
.brand:hover{color:#fff}
/* Logo livré en vert #0A5727 : sur l'en-tête vert forêt il ferait 1,1:1.
   Le filtre le passe en blanc pur — c'est la déclinaison « Inversé, fond foncé »
   du design system, pas une invention. brightness(0) écrase toutes les couleurs
   en noir SANS toucher à l'alpha, invert(1) retourne le tout en blanc. */
.brand-logo{display:block;height:48px;width:auto;filter:brightness(0) invert(1)}
/* Le lien de marque garde 44 px de haut au doigt même quand le logo rétrécit :
   c'est le retour à l'accueil, il ne doit pas se rater. */
@media(max-width:760px){ .brand-logo{height:40px} .brand{min-height:44px;gap:.4rem} }
/* Slogan en BLANC et à 2.1rem (demande client 16/07). Le menthe lagon d'origine
   le faisait passer pour une annotation ; en blanc il fait corps avec le logo,
   qui est lui aussi blanc (cf. .brand-logo). */
.brand-txt{font-family:var(--f-signature);font-size:2.1rem;color:#fff;line-height:1}
/* Logo AREBio dans le footer (version blanche, fond foncé uniquement) */
.foot-logo{width:114px;height:auto;margin-bottom:12px}
.menu{display:flex;align-items:center;gap:.2rem}
.menu a.link{display:inline-flex;align-items:center;gap:.4rem;color:var(--vert-tendre);text-decoration:none;
  font-family:var(--f-titre);font-weight:600;padding:8px 9px;border-radius:8px;font-size:.82rem;white-space:nowrap}
.menu a.link svg{flex:0 0 auto;opacity:.8}
.menu a.link:hover{color:#fff;background:rgba(255,255,255,.08)}
.menu a.link:hover svg{opacity:1}
.menu a.link[aria-current="page"]{color:#fff;background:rgba(255,255,255,.14)}
.menu a.link[aria-current="page"] svg{opacity:1}
/* CTA nav : brique — c'est LE bouton d'action principal du site, sur un en-tête
   vert forêt. Un bouton vert sur en-tête vert se noyait ; la brique tranche.
   Placé en fin de liste et détaché, pour se lire comme une ACTION et non comme
   une rubrique de navigation. */
.menu a.link--cta{background:var(--terre-mangrove);color:#fff;font-weight:700;
  margin-left:10px;padding:9px 16px}
.menu a.link--cta svg{opacity:1}
.menu a.link--cta:hover{background:var(--brique-fonce);color:#fff}
/* 44x44 : c'est le bouton le plus touché du site en mobile (tout passe par lui).
   Il faisait 38x38 — sous le seuil Opquast, et ça se sentait au doigt. */
.nav-toggle{display:none;background:transparent;border:0;color:#fff;cursor:pointer;
  padding:6px;min-width:44px;min-height:44px;align-items:center;justify-content:center}
/* Panneau = menu + sélecteur de thème. En desktop il n'est qu'une rangée : la
   barre se lit exactement comme avant son introduction. Son intérêt est en
   mobile, où il devient le tiroir — et emporte donc le sélecteur avec lui. */
.nav-panneau{display:flex;align-items:center;gap:1rem}

@media(max-width:1340px){ .brand-txt{display:none} }
/* Slogan RÉAFFICHÉ dès que le menu se replie (≤1024, burger) : la place se libère.
   Toujours INLINE à côté du logo, comme en desktop (demande client 17/07) — jamais
   empilé. ≤760, taille FLUIDE : garde le 2.1rem du desktop dès ~435 px (et sur
   tablette), et ne se réduit QUE sur les téléphones étroits pour tenir à côté du
   burger — plancher 1.35rem calé à la mesure sur 320 px (16 px de garde avant le
   burger). La pente (100vw-205)/5.5 vient de la largeur mesurée du slogan (5,5 px
   par px de police). Déclaré APRÈS la base .brand-txt pour gagner au ≤760. */
@media(max-width:1024px){ .brand-txt{display:block} }
@media(max-width:760px){ .brand-txt{font-size:clamp(1.35rem, calc((100vw - 205px) / 5.5), 2.1rem)} }
@media(max-width:1024px){
  .nav-toggle{display:inline-flex}
  .nav-panneau{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    gap:0;background:var(--vert-foret);padding:8px 20px 18px;box-shadow:var(--ombre-forte);display:none}
  .nav-panneau.is-open{display:flex}
  .menu{flex-direction:column;align-items:stretch;gap:0}
  .menu a.link{padding:13px 10px;font-size:.95rem;border-bottom:1px solid rgba(255,255,255,.08)}
  /* la rubrique juste avant le CTA n'a pas de filet : la marge du CTA sépare déjà */
  .menu a.link:has(+ .link--cta){border-bottom:0}
  .menu a.link--cta{margin:18px 0 0;padding:14px 16px;justify-content:center;border-bottom:0;
    font-size:1rem;box-shadow:0 6px 18px rgba(0,0,0,.18)}
  /* Le sélecteur en bas du tiroir : aligné à gauche comme les rubriques, et
     cibles portées à 44 px (Opquast — on est au doigt, plus à la souris). */
  .theme-switch{align-self:flex-start;align-items:center;margin:20px 0 0;padding:4px;gap:4px}
  .theme-lbl{display:inline-block;font-family:var(--f-titre);font-weight:600;font-size:.9rem;
    color:var(--vert-tendre);padding:0 6px 0 10px}
  .theme-btn{width:44px;height:44px}
}

/* --- Hero (gradient terre → mer, design system) -------------------------
   padding-top = hauteur du header (fixed, donc hors du flux) + respiration. */
.hero{position:relative;overflow:hidden;color:#fff;
  padding:calc(var(--h-header) + 52px) 0 104px;
  background:linear-gradient(160deg,var(--vert-foret) 0%,var(--bleu-ocean) 100%)}
/* halos organiques du design system */
.hero::before{content:"";position:absolute;inset:0;opacity:.14;pointer-events:none;
  background:radial-gradient(circle at 85% 20%,var(--menthe-lagon) 0,transparent 42%),
             radial-gradient(circle at 15% 90%,var(--bleu-lagon) 0,transparent 45%)}
/* Hero illustré (accueil) — image « Entre Terre et Mer » + voile dégradé
   pour garantir le contraste du texte (blanc sur voile ≥ 7:1 à gauche). */
.hero--image{
  background-image:
    linear-gradient(100deg, rgba(16,58,32,.97) 0%, rgba(15,77,58,.92) 30%,
                    rgba(11,92,122,.62) 62%, rgba(11,92,122,.38) 100%),
    url('../img/hero-mangrove-2.webp');
  background-size:cover, cover;
  background-position:center, center;
  background-repeat:no-repeat, no-repeat;
}
/* Voile de contraste sous le menu transparent. Sans lui, les items de droite
   (Contact, S'inscrire) tombent sur le ciel clair de la photo — le voile
   principal n'est qu'à .38 d'opacité à cet endroit. Ce dégradé vertical
   garantit le contraste du menu sur TOUTE la largeur, puis disparaît.
   (Remplace les halos radiaux, qui feraient doublon avec l'image.) */
.hero--image::before{
  display:block;opacity:1;inset:0 0 auto 0;height:calc(var(--h-header) + 80px);
  background:linear-gradient(180deg,rgba(9,38,26,.88) 0%,rgba(9,38,26,.45) 55%,transparent 100%)}
/* Voile du hero CENTRÉ : radial, pas linéaire. Le dégradé horizontal ci-dessus
   était taillé pour un texte à gauche (sombre à gauche, clair à droite). Une fois
   le texte centré, il faut l'inverse : sombre au CENTRE pour porter le titre,
   léger sur les bords pour laisser voir la photo — et c'est précisément ce qui
   rend le crabe lisible, lui qui tombe à ~72 % de la largeur. */
.hero--centre.hero--image{
  background-image:
    radial-gradient(86% 92% at 50% 46%, rgba(9,38,26,.94) 0%, rgba(12,62,54,.84) 52%,
                    rgba(11,92,122,.36) 100%),
    url('../img/hero-mangrove-2.webp');
}
@media(max-width:760px){
  /* En mobile, l'image est trop rognée : on renforce le voile pour la lisibilité */
  .hero--image{background-image:
    linear-gradient(170deg, rgba(16,58,32,.97) 0%, rgba(15,77,58,.93) 45%, rgba(11,92,122,.80) 100%),
    url('../img/hero-mangrove-2.webp');}
  /* Même spécificité que la règle centrée (0,2,0) : sans ce doublon, la règle
     ci-dessus perdrait l'arbitrage et le mobile garderait le voile radial. */
  .hero--centre.hero--image{background-image:
    linear-gradient(170deg, rgba(16,58,32,.97) 0%, rgba(15,77,58,.93) 45%, rgba(11,92,122,.80) 100%),
    url('../img/hero-mangrove-2.webp');}
}

/* Vague « Entre Terre et Mer » — tracé exact du design system.
   État de base : vague blanche peinte dans le SVG (comportement d'origine, juste
   en thème clair). Le bloc @supports juste dessous la repeint selon le thème. */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:60px;pointer-events:none;z-index:1;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C240,80 480,0 720,32 C960,64 1200,8 1440,40 L1440,80 L0,80 Z' fill='%23ffffff'/%3E%3C/svg%3E") repeat-x;
  background-size:1440px 60px;animation:wave-drift 22s linear infinite}
@keyframes wave-drift{from{background-position-x:0}to{background-position-x:1440px}}

/* La vague doit prendre la couleur de CE QU'ELLE BORDE, pas un blanc figé.
   Le blanc était codé en dur dans le SVG : en thème sombre il laissait une bande
   claire entre le hero et le contenu — un « trou blanc » (retour client 16/07).
   Toutes les pages ont `.sec-alt` juste après le hero (vérifié) : --s-alt est donc
   la bonne cible, et elle suit le thème toute seule.
   Le tracé devient un MASQUE et c'est background-color qui le peint — c'est le seul
   moyen : une variable CSS ne s'interpole pas dans une data-URI.
   @supports : sans masque on garde la vague blanche (juste en clair) plutôt qu'un
   bandeau plein, qui serait franchement cassé. */
@supports ((-webkit-mask-image:url("")) or (mask-image:url(""))){
  .hero::after{
    background-image:none;
    background-color:var(--vague,var(--s-alt));
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C240,80 480,0 720,32 C960,64 1200,8 1440,40 L1440,80 L0,80 Z' fill='%23000000'/%3E%3C/svg%3E") repeat-x;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C240,80 480,0 720,32 C960,64 1200,8 1440,40 L1440,80 L0,80 Z' fill='%23000000'/%3E%3C/svg%3E") repeat-x;
    -webkit-mask-size:1440px 60px;mask-size:1440px 60px;
    animation-name:wave-drift-mask}
  /* La page d'attente n'a rien sous son hero : son fond à elle est le vert forêt,
     figé quel que soit le thème. On lui laisse donc sa vague blanche d'origine —
     le bug signalé ne la concerne pas, on ne change pas ce qui va. */
  body.attente{--vague:#ffffff}
}
@keyframes wave-drift-mask{
  from{-webkit-mask-position:0 0;mask-position:0 0}
  to{-webkit-mask-position:1440px 0;mask-position:1440px 0}}
.hero .wrap{position:relative;z-index:2}
/* Le hero déborde du wrap standard (1080px) : le hub a besoin de 1100 px pour
   loger le macaron de 520 px ET ses six nœuds sans qu'ils se chevauchent. */
.hero .wrap{max-width:1240px}

/* --- Hero centré (accueil) ----------------------------------------------
   Le macaron passe au centre (demande client 16/07). Ce n'est pas qu'une
   affaire de goût : calé à droite, il se posait pile sur le crabe violoniste.
   Le crabe est à 69 % en largeur et 50,3 % en HAUTEUR de la photo, et `cover`
   ajuste l'image sur la hauteur (débordement vertical mesuré : 0) — le crabe
   est donc cloué à mi-hauteur du hero, exactement l'emprise du macaron.
   Aucun réglage de background-position n'y pouvait rien : seul un déplacement
   du macaron libère la droite de l'image. */
/* Les surcharges de centrage vivent PLUS BAS, juste après la typo du hero :
   `.hero h1` et `.hero p.lead` y fixent leurs marges, à spécificité égale ou
   supérieure — placées ici, elles perdaient l'arbitrage et le titre restait
   collé à gauche. */

/* --- Hub : le macaron au centre, les formats du colloque en orbite -------
   Les nœuds sont placés en %, les courbes tracées dans un viewBox 1100×520 avec
   preserveAspectRatio="none" : le SVG épouse la boîte, donc les deux repères
   restent alignés quelles que soient ses dimensions — sans une ligne de JS.

   La hauteur suit l'ÉCRAN, elle n'est pas fixe. Empiler la composition coûte
   ~400 px par rapport au côte-à-côte : avec un macaron figé à 520 px, le hero
   montait à 1338 px et « Soumettre une communication » tombait à y=1130 —
   sous la ligne de flottaison de tout portable. Le macaron est donc aussi grand
   que l'écran le permet, plafonné aux 520 px demandés (atteints dès ~1240 px de
   haut). En prime, un hero moins haut rogne moins la photo : `cover` l'ajuste
   sur la hauteur, donc chaque pixel de hero en trop est de la largeur d'image
   perdue. */
.hub{position:relative;width:100%;max-width:1100px;height:clamp(280px,40vh,520px);
  margin:6px auto 12px;display:flex;align-items:center;justify-content:center}

/* Halos concentriques derrière le macaron. Le cercle de base est masqué par le
   macaron lui-même (même diamètre) : il n'existe que pour la lueur ; ce sont
   les deux anneaux, plus larges, qu'on voit. */
.hub-halos{position:absolute;top:50%;left:50%;translate:-50% -50%;z-index:0;
  width:47.3%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(101,201,158,.18) 0%,transparent 72%);
  animation:hub-respire 9s ease-in-out infinite}
.hub-halos::before,.hub-halos::after{content:"";position:absolute;top:50%;left:50%;
  translate:-50% -50%;border-radius:50%;aspect-ratio:1;
  border:1px solid rgba(220,234,207,.13)}
.hub-halos::before{width:124%}
.hub-halos::after{width:152%;border-color:rgba(220,234,207,.08)}
@keyframes hub-respire{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.06);opacity:.75}}

/* Courbes de liaison. vector-effect : l'épaisseur ne suit pas la mise à
   l'échelle du SVG, le trait reste fin à toutes les tailles. */
.hub-lignes{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.hub-ligne{fill:none;stroke:var(--menthe-lagon);stroke-width:1.6;stroke-linecap:round;
  opacity:.7;vector-effect:non-scaling-stroke;
  /* pathLength="1" sur le <path> : la longueur est normalisée à 1, le tracé
     s'anime donc en CSS pur — pas de getTotalLength(), pas de JS.
     État de BASE = tracé (dashoffset:0). `backwards` ne pose l'état « non
     tracé » que pendant le délai : si l'animation ne se joue pas, les courbes
     sont là. Jamais d'invisible par défaut. */
  stroke-dasharray:1;stroke-dashoffset:0;
  animation:hub-trace 1.15s cubic-bezier(.65,0,.35,1) backwards}
@keyframes hub-trace{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
/* Chaque courbe part APRÈS que son nœud est posé (cf. délais des nœuds plus bas).
   L'ordre inverse — celui du premier jet — donnait des traits qui se tendaient vers
   le vide pendant une demi-seconde : au chargement, ça se lisait comme un bug, et
   le client l'a photographié. Une liaison ne se dessine qu'entre deux choses qui
   existent déjà. Paires gauche/droite synchrones : plus calme que six départs. */
.hub-ligne:nth-child(1),.hub-ligne:nth-child(4){animation-delay:1.25s}
.hub-ligne:nth-child(2),.hub-ligne:nth-child(5){animation-delay:1.36s}
.hub-ligne:nth-child(3),.hub-ligne:nth-child(6){animation-delay:1.47s}

/* Nœuds. `translate` (propriété autonome) porte le centrage, `transform` reste
   libre pour les animations — sans ça, pop et flottement s'écrasent l'un l'autre.

   La boîte du <li> vaut EXACTEMENT l'icône (52×52), et le libellé est en absolu
   dessous : c'est ce qui permet aux courbes de viser le centre de l'icône. Quand
   la boîte englobait icône + libellé, son centre tombait entre les deux et les
   traits arrivaient trop bas. */
.hub-nodes{list-style:none;margin:0;padding:0}
.hub-node{position:absolute;translate:-50% -50%;z-index:5;width:52px;height:52px;
  animation:hub-pop .7s cubic-bezier(.34,1.56,.64,1) backwards,
            hub-flotte 6.5s ease-in-out infinite}
@keyframes hub-pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes hub-flotte{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-7px) rotate(1.5deg)}}
@keyframes hub-flotte-alt{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(7px) rotate(-1.5deg)}}
/* Positions : % du hub, dans le MÊME repère que le viewBox 1100×520 du SVG.
   15.45% × 1100 = 170, 12.27% × 1100 = 135, 15% × 520 = 78, 85% × 520 = 442.
   Ne toucher à l'un sans l'autre, c'est décrocher les courbes des nœuds. */
.hub-node--1{left:15.45%;top:15%}
.hub-node--2{left:12.27%;top:50%}
.hub-node--3{left:15.45%;top:85%}
.hub-node--4{left:84.55%;top:15%}
.hub-node--5{left:87.73%;top:50%}
.hub-node--6{left:84.55%;top:85%}
/* Chaque nœud est posé à 1,25 / 1,36 / 1,47 s — soit très exactement le départ de
   SA courbe (cf. délais ci-dessus). Rythme ralenti d'environ 30 % le 16/07 :
   « un peu trop rapide » (client). Séquence bouclée à ~2,6 s.
   Le flottement démarre APRÈS le tracé de la courbe : sinon le nœud se dérobe
   pendant qu'on dessine vers lui. */
.hub-node--1,.hub-node--4{animation-delay:.55s,2.45s}
.hub-node--2,.hub-node--5{animation-delay:.66s,2.56s}
.hub-node--3,.hub-node--6{animation-delay:.77s,2.67s}
/* flottements en opposition + durées décalées : six mouvements synchrones font mécanique */
.hub-node--2,.hub-node--4,.hub-node--6{animation-name:hub-pop,hub-flotte-alt}
.hub-node--2,.hub-node--5{animation-duration:.7s,7.2s}
.hub-node--3,.hub-node--6{animation-duration:.7s,6.9s}

.hub-ic{display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  border-radius:16px;background:rgba(9,38,26,.92);border:1px solid rgba(220,234,207,.24);
  color:var(--menthe-lagon);box-shadow:0 10px 26px rgba(0,0,0,.30);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), border-color .25s ease, color .25s ease}
.hub-node:hover .hub-ic{transform:scale(1.12);border-color:var(--menthe-lagon);color:#fff}
/* Pastille sous le libellé : le nœud tombe au BORD du hero, là où le voile est
   le plus léger et la photo la plus claire. Sans fond opaque, le texte y perdrait
   son contraste (Opquast). Une ombre portée n'aurait pas suffi : elle ne compte pas. */
.hub-lbl{position:absolute;top:calc(100% + 8px);left:50%;translate:-50% 0;
  font-family:var(--f-titre);font-weight:600;font-size:.72rem;letter-spacing:.3px;
  color:var(--vert-tendre);background:rgba(9,38,26,.78);padding:3px 10px;border-radius:var(--pill);
  border:1px solid rgba(220,234,207,.14);white-space:nowrap}

/* Le macaron : cœur du hub. Sa HAUTEUR mène (le hub est piloté par la hauteur
   d'écran), la largeur suit — il reste rond et ne percute jamais les nœuds, qui
   sont ancrés à 12–15 % des bords. */
.hero-logo{position:relative;z-index:10;height:100%;width:auto;
  filter:drop-shadow(0 14px 40px rgba(0,0,0,.4))}

@media(max-width:880px){
  /* L'ORBITE est géométriquement impossible ici : à 375 px il reste 67 px de
     chaque côté du macaron pour des nœuds qui en font 90 — ils lui rentreraient
     dedans. Les courbes et les halos n'ont donc plus de sens non plus.
     Mais les six formats, eux, gardent leur place : on les repose simplement en
     grille sous le macaron (demande client 17/07 — ils avaient purement disparu). */
  .hub{height:auto;display:block;margin:10px auto 6px}
  .hub-lignes,.hub-halos{display:none}
  /* Les formats passent APRÈS le bouton. Mesuré : posés juste sous le macaron,
     ils repoussaient « Soumettre une communication » de 655 à 801 px, soit
     128 px sous la ligne de flottaison — on retombait dans le défaut qu'on venait
     de corriger. Ici on a les deux : le bouton reste dans l'écran, les formats
     restent lisibles juste en dessous.
     Le tour de passe-passe : `.hub` en `display:contents` livre ses enfants au
     wrap, qui devient une colonne flex — les nœuds peuvent alors être réordonnés
     indépendamment du macaron, alors qu'ils sont imbriqués dans le même bloc. */
  .hero--centre .wrap{display:flex;flex-direction:column;align-items:stretch}
  .hub{display:contents}
  .hero--centre .eyebrow{order:1}
  .hero-logo{order:2}
  .hero--centre h1{order:3}
  .hero--centre .theme{order:4}
  .hero--centre p.lead{order:5}
  .hero--centre .cta-row{order:6}
  .hub-nodes{order:7}
  .hero--centre .countdown{order:8}
  .hero--centre .meta-band{order:9}
  .hub-nodes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px 6px;margin:26px 0 0;padding:0;list-style:none}
  /* `position:static` défait l'orbite ; sans lui les nœuds resteraient empilés
     au même point. `animation:none` : le flottement n'a plus de sens en grille. */
  .hub-node{position:static;translate:none;width:auto;height:auto;
    display:flex;flex-direction:column;align-items:center;gap:7px;animation:none}
  .hub-ic{width:42px;height:42px;flex:0 0 auto}
  /* Le libellé redevient un simple texte sous l'icône : la pastille opaque
     servait à le détacher du bord de la photo, or au centre le voile est déjà
     à .94 — le contraste est acquis sans elle. */
  .hub-lbl{position:static;translate:none;background:none;border:0;padding:0;
    white-space:normal;text-align:center;font-size:.68rem;line-height:1.25}
  /* `margin-inline:auto` est OBLIGATOIRE ici : passer .hub en `display:block`
     (pour lui rendre sa hauteur naturelle) supprime le `justify-content:center`
     du flex, et le macaron retombait collé à gauche — décalé de 67 px, mesuré.
     `text-align:center` du wrap ne centre pas une image en display:block. */
  .hero-logo{width:min(200px,54vw);height:auto;margin-inline:auto}
}

/* --- Hero mobile : ramener le CTA dans l'écran -------------------------
   Mesuré sur 375x812 : « Soumettre une communication » tombait à y=737, soit
   34 px sous la ligne de flottaison — et le 812 est THÉORIQUE. Sur un vrai
   iPhone, la barre d'URL de Safari laisse ~720 px utiles (et ~570 sur un SE) :
   le bouton était donc réellement 100 à 170 px trop bas. L'action principale du
   site, sur la page où atterrit le trafic des réseaux, invisible sans scroller.

   On récupère la hauteur sur les RESPIRATIONS, pas sur le contenu : aucun texte
   n'est raccourci, aucun corps réduit. Seul le macaron passe de 248 à 200 px —
   il reste le plus gros élément de l'écran. */
@media(max-width:760px){
  .hero{padding-top:calc(var(--h-header) + 26px);padding-bottom:72px}
  .hero .eyebrow{margin-bottom:12px}
  .hero .theme{margin-bottom:10px}
  .hero p.lead{margin-bottom:18px}
  .hero .countdown{margin-top:20px}
  .hero .meta-band{margin-top:24px;padding-top:18px}
}
.hero .eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-titre);font-weight:600;
  font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--vert-medicinal);margin-bottom:20px}
.hero .eyebrow::before{content:"";width:26px;height:1px;background:var(--vert-medicinal)}
/* APRÈS la règle ci-dessus — même spécificité, donc c'est l'ordre qui tranche.
   Placée plus haut (dans le bloc mobile du hero), elle était purement décorative :
   le `letter-spacing:3px` de la ligne précédente gagnait, et je l'ai mesuré.
   Pourquoi 1,5 px : à 3 px la ligne réclame 364 px pour 335 disponibles, donc
   « MARTINIQUE » passe à la ligne — le texte se recentre alors SANS le tiret du
   ::before, qui reste planté à gauche, orphelin. À 1,5 px il faut 315 px : tout
   tient sur une ligne et le tiret retrouve son rôle. */
@media(max-width:760px){ .hero .eyebrow{letter-spacing:1.5px} }
.hero h1{font-family:var(--f-titre);font-weight:800;font-size:clamp(2rem,5vw,3.2rem);line-height:.98;
  letter-spacing:-1.5px;margin:.2rem 0 .6rem;max-width:16ch}
.hero p.lead{font-size:17px;line-height:1.65;max-width:620px;color:var(--vert-tendre);margin:0 0 28px}
/* Sur `.cta-row` et non `.hero .cta-row` : le gap n'existait QUE dans le hero,
   si bien que les deux boutons du bandeau CTA se touchaient (écart mesuré : 0 px,
   `gap: normal`). Un composant doit porter ses propres espacements, pas dépendre
   du bloc qui l'accueille. */
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.meta-band{display:flex;flex-wrap:wrap;gap:24px;margin-top:34px;padding-top:24px;
  border-top:1px solid rgba(255,255,255,.18)}
.meta-band .item{display:flex;align-items:center;gap:.6rem;font-size:.98rem;color:var(--vert-tendre)}
.meta-band svg{flex:0 0 auto}
/* Signature « Entre Terre et Mer » — Lumios Marker */
.hero .theme{display:block;font-family:var(--f-signature);font-size:clamp(1.6rem,4vw,2.6rem);
  color:var(--menthe-lagon);line-height:1;margin:0 0 18px}
.hero .theme i{color:var(--vert-vegetal);font-style:normal}

/* --- Hero centré (accueil) : surcharges ---------------------------------
   Déclarées APRÈS la typo du hero, à dessein : `.hero h1` pose `margin:.2rem 0`
   et `.hero p.lead` pose `margin:0 0 28px` avec une spécificité au moins égale
   (`.hero p.lead` = 0,2,1). Placées plus haut, ces surcharges perdaient et le
   titre restait aligné à gauche dans une composition censée être centrée. */
.hero--centre .wrap{text-align:center}
.hero--centre .eyebrow{justify-content:center}
.hero--centre h1{max-width:19ch;margin-left:auto;margin-right:auto}
.hero--centre p.lead{max-width:58ch;margin-left:auto;margin-right:auto}
.hero--centre .cta-row{justify-content:center}
.hero--centre .countdown{justify-content:center}
.hero--centre .meta-band{justify-content:center}

/* --- Page d'attente ------------------------------------------------------
   Page autonome (sans nav) : le hero occupe tout l'écran. */
/* Figée hors thème : le pied ne doit pas virer au vert foncé sur un OS en sombre
   (elle n'a pas le script de thème). On rétablit donc --s-marque au vert forêt. */
body.attente{background:var(--vert-foret);--s-marque:var(--vert-foret)}
.hero--attente{display:flex;align-items:center;min-height:100vh;min-height:100svh;
  padding:56px 0 96px}
.hero--attente .wrap{width:100%}
.hero--attente h1{font-size:clamp(1.9rem,4.4vw,2.9rem);max-width:18ch}
.hero--attente .lead{max-width:56ch}
.att-mark{margin:0 0 22px}
.att-mark img{width:150px;height:150px}
@media(max-width:760px){ .att-mark img{width:112px;height:112px} }
.hero--attente .meta-band .item{margin:0}
.hero--attente .meta-band a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.hero--attente .meta-band a:hover{color:var(--menthe-lagon)}
body.attente footer{padding:26px 0}
body.attente .legal{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between;
  margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.14);font-size:.82rem}

/* --- Compte à rebours --------------------------------------------------- */
.countdown{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.countdown .cd{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);
  border-radius:12px;padding:12px 18px;min-width:78px;text-align:center}
.countdown .cd .n{display:block;font-family:var(--f-titre);font-size:1.9rem;font-weight:800;line-height:1;
  font-variant-numeric:tabular-nums}
.countdown .cd .u{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--vert-tendre)}
/* En mobile, les 4 cases débordaient et « SEC » partait seul à la ligne (3 + 1).
   Une grille de 4 colonnes égales les garde sur un seul rang ; le padding et le
   corps sont réduits pour que « 146 » tienne dans une colonne. */
@media(max-width:520px){
  .countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
  .countdown .cd{min-width:0;padding:10px 4px}
  .countdown .cd .n{font-size:1.5rem}
  /* .62rem = 9,9 px : sous les 12 px en dessous desquels un texte n'est plus
     confortable, même en capitales. .72rem (11,5 px) tient encore dans la
     colonne — vérifié : « HEURES », le plus long, ne casse pas. */
  .countdown .cd .u{font-size:.75rem;letter-spacing:0}
}

/* --- Éléments décoratifs (issus du visuel Save the Date) -----------------
   Lianes, feuillages, ADN, tortue, coraux : les mêmes éléments que l'affiche,
   donc la même identité. Règles que rien ne doit enfreindre :
     1. `pointer-events:none` — ils ne doivent jamais intercepter un clic ;
     2. `z-index:0` + contenu à `z-index:1` — jamais par-dessus le texte ;
     3. `overflow:hidden` sur la section — ils débordent volontairement du cadre,
        sans quoi ils créeraient une barre de défilement horizontale ;
     4. `aria-hidden` + `alt=""` côté HTML — purement décoratifs ;
     5. masqués sous 900 px — sur un petit écran ils mangeraient le texte
        (le DS dit « décoratif discret, jamais dominant »).
   La position vient du nom de fichier fourni (top-left, bottom-right…). */
.sec-deco{position:relative;overflow:hidden;isolation:isolate}
.sec-deco > .wrap{position:relative;z-index:1}
.deco{position:absolute;z-index:0;pointer-events:none;user-select:none;
  opacity:.85;filter:saturate(.92)}
/* Ancrages — les décalages négatifs font « sortir » l'élément du cadre, ce qui
   évite l'effet vignette collée et donne l'impression qu'il pousse hors-champ. */
.deco--tl{top:-14px;left:-18px}
.deco--tr{top:-10px;right:-12px}
.deco--bl{bottom:-16px;left:-14px}
.deco--br{bottom:-18px;right:-16px}
.deco--r {top:50%;right:18px;transform:translateY(-50%)}
.deco--l {top:50%;left:18px;transform:translateY(-50%)}
/* Discrétion : sur fond clair et derrière du texte, on baisse encore. */
.deco--fantome{opacity:.42}
/* Flottement très lent, désynchronisé par élément — le site respire sans
   attirer l'œil. Neutralisé par la règle prefers-reduced-motion globale. */
@keyframes deco-flotte{0%,100%{transform:translateY(0) rotate(0)}
                       50%{transform:translateY(-9px) rotate(1.2deg)}}
.deco--anime{animation:deco-flotte 11s ease-in-out infinite}
.deco--anime.deco--lent{animation-duration:15s;animation-delay:-4s}
/* Les ancrages centrés ont déjà un transform : on anime la translation seule
   pour ne pas écraser le translateY(-50%) de centrage. */
@keyframes deco-flotte-y{0%,100%{transform:translateY(-50%)}
                         50%{transform:translateY(calc(-50% - 9px))}}
.deco--r.deco--anime,.deco--l.deco--anime{animation-name:deco-flotte-y}
/* Mobile : par défaut on masque (elles mangeraient le texte), SAUF celles
   marquées .deco--mobile — côté TERRE de préférence (lianes, feuillages,
   branches), qui font respirer sans encombrer. Elles sont alors plus petites
   et plus discrètes. */
@media(max-width:900px){
  .deco{display:none}
  /* L'origine doit être le coin d'ANCRAGE, sinon la réduction décolle la déco de
     son coin : un `br` réduit depuis `top right` remonte de 38 % de sa hauteur
     et flotte au milieu de la section. */
  .deco--mobile{display:block;opacity:.3;transform:scale(.62);transform-origin:var(--org,top left)}
  .deco--mobile.deco--tr{--org:top right}
  .deco--mobile.deco--bl{--org:bottom left}
  .deco--mobile.deco--br{--org:bottom right}
  /* le flottement combinerait deux transform : on le coupe en mobile */
  .deco--mobile.deco--anime{animation:none}
  .deco--r.deco--mobile,.deco--l.deco--mobile{display:none}  /* centrés : trop au milieu du texte */
}

/* --- Sections ----------------------------------------------------------- */
section{padding:56px 0}
.sec-alt{background:var(--s-alt)}
.sec-green{background:var(--s-tendre)}
.sec-mer{background:var(--bleu-clair)}
.sec-mer h2{color:var(--bleu-ocean)}
h1,h2,h3,h4{font-family:var(--f-titre)}
h2{font-weight:700;font-size:clamp(1.5rem,3.2vw,1.65rem);color:var(--s-titre);margin:0 0 .4rem;
  letter-spacing:-.5px}
h2.center{text-align:center}
/* Filet d'accent : reprend le dégradé « Lagon » du DS, là où celui du titre
   s'arrête (bleu océan) — le titre fait terre→mer, le filet prolonge mer→lagon. */
section > .wrap > h2::after{content:"";display:block;width:58px;height:4px;border-radius:2px;margin-top:12px;
  background:linear-gradient(90deg,var(--bleu-ocean) 0%,var(--bleu-lagon) 60%,var(--menthe-lagon) 100%)}
section > .wrap > h2.center::after{margin-left:auto;margin-right:auto}

/* --- Titres en dégradé (design system, section « Dégradés ») -------------
   Garde-fou @supports OBLIGATOIRE : sans background-clip:text, le
   color:transparent rendrait tous les titres INVISIBLES. Sans le support, on
   garde le vert plein hérité (fail-open).
   width:fit-content est nécessaire : sur une boîte pleine largeur, le dégradé
   se calcule sur toute la ligne et un titre court n'en montrerait que le tout
   début (donc un vert plat, sans transition visible). */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  /* :not(.cta-band) — cette bande a un fond dégradé FONCÉ : le dégradé de titre
     sombre y serait invisible. Elle garde son titre blanc plein. */
  section:not(.cta-band) > .wrap > h2,
  .stat:not(.stat--fonce) .big{
    background-image:var(--grad-titre);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
    width:fit-content;
  }
  section:not(.cta-band) > .wrap > h2.center{margin-left:auto;margin-right:auto}
  .stat:not(.stat--fonce) .big{margin-left:auto;margin-right:auto}
  /* Hero : dégradé clair (blanc → vert tendre). Il s'arrête au vert tendre car
     le menthe #65C99E ne tiendrait que 3,0:1 sur le bleu du hero. */
  .hero h1{
    background-image:var(--grad-titre-clair);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
    width:fit-content;
  }
}
.section-intro{color:var(--s-texte-doux);max-width:640px;margin:0 0 34px;line-height:1.6}
.section-intro.center{margin-left:auto;margin-right:auto;text-align:center}
/* « Le colloque » : texte à gauche, illustration à droite. Le `max-width:640px`
   de .section-intro sert la longueur de ligne ; dans une colonne il ne sert plus
   à rien et l'empêcherait de se remplir — la grille borne déjà. */
.colloque{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px;
  align-items:stretch;margin-bottom:34px}
.colloque-txt .section-intro{max-width:none}
.colloque-txt .section-intro:last-child{margin-bottom:0}
/* L'image épouse la hauteur du texte. `position:absolute` plutôt que height:100%,
   qui ne se résout pas de façon fiable dans un élément de grille étiré ; min-height
   couvre le cas d'un texte plus court (ex. une future version anglaise). */
.colloque-fig{margin:0;position:relative;min-height:280px;border-radius:18px;overflow:hidden;
  box-shadow:0 16px 40px rgba(15,77,58,.18);border:1px solid var(--s-bordure)}
.colloque-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.22,1,.36,1)}
.colloque-fig:hover img{transform:scale(1.04)}
@media(max-width:860px){
  .colloque{grid-template-columns:1fr;gap:24px}
  /* En pile, l'image n'a plus de texte dont copier la hauteur : on lui rend son ratio. */
  .colloque-fig{min-height:0;aspect-ratio:1000/627}
}

/* Variante AFFICHE (portrait « Save the Date ») : montrée EN ENTIER, encadrée, pas
   recadrée — l'inverse du object-fit:cover paysage. Déclarée après la base et le
   media query pour gagner à spécificité égale ; l'ancre `.colloque` force le
   aspect-ratio:auto par-dessus la règle mobile. */
.colloque-fig--affiche{position:static;min-height:0;border:0;background:none;box-shadow:none;
  border-radius:0;overflow:visible;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-start;gap:16px}
.colloque .colloque-fig--affiche{aspect-ratio:auto}
.colloque-fig--affiche img{position:static;width:auto;height:auto;max-width:100%;
  max-height:min(460px,60vh);object-fit:contain;border-radius:16px;
  box-shadow:0 18px 44px var(--s-ombre-forte)}
.colloque-fig--affiche:hover img{transform:none}
.affiche-suivre{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center}
.affiche-suivre-txt{font-family:var(--f-titre);font-weight:600;font-size:.92rem;color:var(--s-texte-doux)}
.affiche-soc{display:flex;gap:10px}
.affiche-soc a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:50%;background:var(--s-tendre);color:var(--s-titre);
  transition:background .2s ease, color .2s ease, transform .2s ease}
.affiche-soc a:hover{background:var(--terre-mangrove);color:#fff;transform:translateY(-2px)}
/* Ajout à l'agenda, sous l'affiche « Save the Date » : bouton principal (.ics) +
   lien Google discret. Surfaces --s-* → suit le thème ; cible ≥44 px (Opquast). */
.affiche-agenda{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:2px}
.btn-agenda{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 18px;
  border-radius:999px;border:1.5px solid var(--s-bordure);background:var(--s-tendre);
  color:var(--s-titre);font-family:var(--f-titre);font-weight:700;font-size:.88rem;text-decoration:none;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease}
.btn-agenda:hover{background:var(--terre-mangrove);border-color:var(--terre-mangrove);color:#fff;transform:translateY(-2px)}
.btn-agenda svg{flex:0 0 auto}
/* min-height 44px : c'est un lien SEUL (une action), pas un lien au fil du
   texte — il mesurait 21 px de haut au doigt (audit 18/07). */
.agenda-google{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;
  font-size:.8rem;color:var(--s-texte-doux);text-decoration:underline;text-underline-offset:3px}
.agenda-google:hover{color:var(--terre-mangrove)}

/* --- Chiffres-clés ------------------------------------------------------ */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:14px}
.stat{background:var(--s-carte);border:1px solid var(--s-bordure);border-radius:var(--radius);padding:20px;text-align:center}
.stat .big{font-family:var(--f-titre);font-weight:800;font-size:2.1rem;color:var(--s-titre);line-height:1}
/* « FR ↔ EN » est le plus large des quatre chiffres-clés : à 2,1rem dans une
   carte de 161 px, il sortait de 10 px à droite (mesuré : marge droite = -10).
   Les trois autres tiennent, donc on ne touche pas au corps général — on le
   laisse simplement s'adapter à la place réelle. `clamp` plutôt qu'une valeur
   fixe : la carte rétrécit encore à 320 px. */
@media(max-width:760px){
  .stat{padding:18px 12px}
  .stat .big{font-size:clamp(1.35rem,6.4vw,2.1rem)}
}
.stat .lbl{font-size:13px;color:var(--s-texte-doux);margin-top:4px}
.stat--fonce{background:var(--vert-foret);border-color:var(--vert-foret)}
.stat--fonce .big{color:var(--menthe-lagon)}
.stat--fonce .lbl{color:var(--vert-tendre)}

/* --- Cartes ------------------------------------------------------------- */
/* ⚠️ `minmax(min(Npx,100%),1fr)` et jamais `minmax(Npx,1fr)`. La seconde forme
   ne descend JAMAIS sous N : dans un conteneur plus étroit, la colonne garde sa
   largeur et déborde. Mesuré le 17/07 sur un écran de 320 px : `.grid2` calculait
   une colonne de 320 px dans un conteneur de 280, et les deux cartes
   « nouveautés » sortaient de 20 px — rognées en silence par l'overflow:hidden de
   la section, donc invisibles à l'œil mais bel et bien coupées.
   `min(Npx,100%)` plafonne le minimum à la place disponible. Les 6 grilles du
   site avaient le défaut ; il ne réapparaît qu'en dessous du seuil, d'où
   l'importance de tester à 320 px et pas seulement à 375. */
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:18px}
/* 2 colonnes : minmax plus large qu'en grid3 pour éviter qu'un texte long ne
   se retrouve dans une colonne étroite. */
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:18px}
.card{background:var(--s-carte);border:1px solid var(--s-bordure);border-radius:var(--radius-lg);padding:24px;
  box-shadow:var(--ombre)}
.card .ic{width:44px;height:44px;border-radius:12px;background:var(--vert-sauge);color:var(--vert-foret);
  display:grid;place-items:center;margin-bottom:12px}
.card h3{margin:.2rem 0 .4rem;font-weight:600;font-size:1.1rem;color:var(--s-titre)}
.card p{margin:0;color:var(--s-texte-doux);font-size:.95rem}

/* --- Tags (axes transversaux / valeurs visuelles) ----------------------- */
.tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.tag{font-family:var(--f-titre);font-weight:600;font-size:14px;color:var(--vert-foret);background:#fff;
  padding:9px 16px;border-radius:var(--pill);border:1px solid var(--vert-tendre)}

/* --- Timeline / dates --------------------------------------------------- */
/* --- Frise chronologique (appel à communications) ------------------------
   Remplace 4 cartes alignées, qui ne racontaient aucune progression.
   Ligne horizontale en desktop, verticale en mobile. Les états (passé /
   prochain / à venir) viennent de PHP : le rendu est juste sans JS.
   FAIL-SAFE : la frise est ENTIÈREMENT LISIBLE sans animation. Le JS ne fait
   qu'ajouter .is-vue pour lancer le remplissage de la ligne et la cascade —
   s'il ne tourne pas, tout est simplement déjà à l'état final. */
.frise{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:20px;
  grid-template-columns:repeat(4,1fr);position:relative}
/* le rail */
.frise::before{content:"";position:absolute;top:13px;left:calc(12.5% - 0px);right:calc(12.5% - 0px);
  height:3px;border-radius:2px;background:var(--vert-tendre)}
/* la portion parcourue — largeur pilotée par --progression (PHP) */
.frise::after{content:"";position:absolute;top:13px;left:12.5%;height:3px;border-radius:2px;
  width:calc((75%) * var(--progression) / 100);
  background:linear-gradient(90deg,var(--vert-foret),var(--vert-recif),var(--menthe-lagon));
  transform-origin:left center}
.frise-item{position:relative;padding-top:40px;text-align:center}
/* pastille du jalon */
.frise-point{position:absolute;top:4px;left:50%;transform:translateX(-50%);
  width:22px;height:22px;border-radius:50%;background:var(--s-carte);
  border:3px solid var(--vert-tendre);display:flex;align-items:center;justify-content:center;
  color:#fff;transition:background .3s ease,border-color .3s ease,transform .3s ease}
.frise-point svg{width:12px;height:12px}
.is-passe .frise-point{background:var(--vert-recif);border-color:var(--vert-recif)}
.is-prochain .frise-point{background:var(--vert-vegetal);border-color:var(--vert-foret);
  box-shadow:0 0 0 5px rgba(127,191,90,.28)}
/* halo pulsé sur le jalon en cours — le seul mouvement en boucle de la frise */
.is-prochain .frise-point::after{content:"";position:absolute;inset:-3px;border-radius:50%;
  border:2px solid var(--vert-vegetal);animation:frise-pulse 2.4s ease-out infinite}
@keyframes frise-pulse{0%{transform:scale(1);opacity:.9}70%{transform:scale(2.1);opacity:0}100%{opacity:0}}

.frise-carte{background:var(--s-tendre);border:1px solid transparent;border-radius:var(--radius);
  padding:18px 16px;height:100%;transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s ease}
.is-prochain .frise-carte{background:var(--vert-foret);border-color:var(--vert-foret);
  box-shadow:0 10px 30px rgba(15,77,58,.24)}
.is-avenir .frise-carte{background:var(--s-carte);border-color:var(--s-bordure)}
.frise-carte:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(15,77,58,.16)}
.frise-date{display:block;font-family:var(--f-titre);font-weight:800;font-size:1.15rem;
  color:var(--s-titre);line-height:1.2}
.is-prochain .frise-date{color:var(--menthe-lagon)}
.frise-libelle{margin:6px 0 0;font-family:var(--f-titre);font-weight:600;font-size:.9rem;
  color:var(--s-texte)}
.is-prochain .frise-libelle{color:#fff}
.frise-texte{margin:6px 0 0;font-size:.82rem;color:var(--s-texte-doux);line-height:1.45}
.is-prochain .frise-texte{color:var(--vert-tendre)}
.frise-compte{margin:12px 0 0;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--f-titre);font-weight:700;font-size:.74rem;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--emeraude);background:var(--vert-vegetal);
  padding:5px 12px;border-radius:var(--pill)}
.frise-fait{margin:12px 0 0;font-family:var(--f-titre);font-weight:600;font-size:.72rem;
  letter-spacing:1.2px;text-transform:uppercase;color:var(--s-fait)}
.frise--compacte .frise-carte{padding:14px}
.frise--compacte .frise-date{font-size:1rem}

/* Animation d'entrée : la ligne se remplit, les jalons montent en cascade.
   Ne s'applique QUE si le JS a posé .is-vue — sinon l'état final est déjà là. */
.frise.js-anim .frise-item{opacity:0;transform:translateY(16px)}
.frise.js-anim::after{width:0}
.frise.js-anim.is-vue .frise-item{opacity:1;transform:none;
  transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1)}
.frise.js-anim.is-vue::after{width:calc((75%) * var(--progression) / 100);
  transition:width 1.1s cubic-bezier(.22,1,.36,1) .25s}
.frise.js-anim.is-vue .frise-item:nth-child(1){transition-delay:.05s}
.frise.js-anim.is-vue .frise-item:nth-child(2){transition-delay:.18s}
.frise.js-anim.is-vue .frise-item:nth-child(3){transition-delay:.31s}
.frise.js-anim.is-vue .frise-item:nth-child(4){transition-delay:.44s}

@media(max-width:860px){
  /* vertical : le rail passe à gauche, les cartes s'alignent à sa droite */
  .frise{grid-template-columns:1fr;gap:14px}
  .frise::before{top:10px;bottom:10px;left:11px;right:auto;width:3px;height:auto}
  .frise::after{top:10px;left:11px;width:3px;
    height:calc((100% - 20px) * var(--progression) / 100);
    background:linear-gradient(180deg,var(--vert-foret),var(--vert-recif),var(--menthe-lagon))}
  .frise.js-anim::after{width:3px;height:0}
  .frise.js-anim.is-vue::after{width:3px;
    height:calc((100% - 20px) * var(--progression) / 100);
    transition:height 1.1s cubic-bezier(.22,1,.36,1) .25s}
  .frise-item{padding:0 0 0 40px;text-align:left}
  .frise-point{top:10px;left:0;transform:none}
  .frise-compte{margin-top:10px}
}

/* --- Modalités (2 colonnes) -------------------------------------------- */
.modal-list{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
@media(max-width:640px){.modal-list{grid-template-columns:1fr}}
.mod{background:var(--s-carte);border:1px solid var(--s-bordure);border-radius:var(--radius);padding:20px}
.mod h3{margin:0 0 .4rem;font-weight:600;color:var(--s-titre);display:flex;align-items:center;gap:.5rem}
.mod ul{margin:.4rem 0 0;padding-left:1.1rem;color:var(--s-texte-doux)}

/* --- Onglets programme -------------------------------------------------- */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px;border-bottom:2px solid var(--s-bordure)}
.tab{background:transparent;border:0;border-bottom:3px solid transparent;margin-bottom:-2px;
  padding:12px 18px;font-family:var(--f-titre);font-weight:600;font-size:14px;color:var(--s-texte-doux);
  cursor:pointer;border-radius:8px 8px 0 0}
/* Survol et onglet sélectionné : surfaces adaptatives, sinon menthe sur vert clair
   (illisible) en thème sombre. */
.tab:hover{color:var(--s-titre);background:var(--s-tendre)}
.tab[aria-selected="true"]{color:var(--s-titre);border-bottom-color:var(--vert-vegetal)}
.tabpanel{display:none}
.tabpanel.is-active{display:block}
.slot{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--s-bordure)}
/* --s-subhead et non bleu-lagon : le lagon en texte sur blanc = 2,9:1, interdit
   par la règle du projet — l'audit 18/07 l'a retrouvé ici. */
.slot .h{font-family:var(--f-titre);font-weight:700;font-size:12px;letter-spacing:1px;color:var(--s-subhead);
  text-transform:uppercase;padding-top:3px}
.slot .c h4{margin:0 0 .2rem;font-weight:700;color:var(--s-titre);font-size:1.05rem}
.slot .c p{margin:0;color:var(--s-texte-doux);font-size:.95rem}
@media(max-width:560px){.slot{grid-template-columns:1fr;gap:4px}}

/* --- Programme : clé d'accès (gratuit / payant / inscription) ------------ */
.prog-cle{background:var(--s-carte);border:1px solid var(--s-bordure);border-radius:var(--radius);
  padding:16px 18px;margin:0 0 22px;display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center}
.prog-cle-row{display:flex;align-items:center;gap:10px;flex:1 1 260px}
.prog-cle-txt{font-size:.9rem;color:var(--s-texte-doux)}
.prog-cle-note{flex:1 1 100%;display:flex;gap:9px;align-items:flex-start;margin:0;
  padding-top:13px;border-top:1px solid var(--s-bordure);font-size:.9rem;color:var(--s-texte)}
.prog-cle-note svg{flex:0 0 auto;margin-top:1px;color:var(--bleu-lagon)}
/* Mobile : « la distinction conférence VS workshop n'est pas assez claire » (retour
   Anna-Gaëlle 17/07, vu sur téléphone). Les deux lignes s'empilaient déjà sous ~620px,
   mais l'étiquette d'accès et le format restaient CÔTE À CÔTE : le texte se comprimait
   sur plusieurs lignes contre le badge, et rien ne séparait les deux formats. Ici
   chaque ligne devient un bloc — étiquette au-dessus, format dessous en pleine
   largeur — et un filet sépare gratuit de payant. */
@media(max-width:640px){
  .prog-cle{gap:0}
  .prog-cle-row{flex:1 1 100%;flex-direction:column;align-items:flex-start;gap:6px;padding:12px 0}
  .prog-cle-row:first-of-type{padding-top:0}
  .prog-cle-row + .prog-cle-row{border-top:1px solid var(--s-bordure)}
}

/* Étiquette d'accès. « payant » en brique plein + blanc (l'action a un coût) ;
   « gratuit » reprend le fond tendre des badges Session ; « inscription » est un
   contour neutre. Les trois passent le thème sombre (fonds -b ou surfaces). */
.acces{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--f-titre);font-weight:700;
  font-size:.72rem;text-transform:uppercase;letter-spacing:.03em;padding:5px 11px;
  border-radius:var(--pill);white-space:nowrap}
.acces--gratuit{background:var(--vert-tendre-b,var(--vert-tendre));color:var(--s-titre)}
.acces--payant{background:var(--terre-mangrove);color:#fff}
.acces--inscription{background:transparent;border:1.5px solid var(--s-bordure);color:var(--s-texte-doux)}

.slot-badges{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:.55rem 0 0}

/* Workshop en parallèle : rail brique + fond légèrement teinté, pour qu'il se
   lise comme une VOIE simultanée, distincte du programme principal gratuit.
   color-mix dégrade proprement (fond transparent) là où il n'est pas supporté :
   le rail et l'étiquette suffisent alors à porter le sens. */
.slot--parallele .c{border-left:3px solid var(--terre-mangrove);
  background:color-mix(in srgb, var(--terre-mangrove) 7%, transparent);
  border-radius:0 10px 10px 0;padding:12px 14px;margin-top:2px}
.slot-para{display:inline-block;margin-top:5px;font-family:var(--f-titre);font-weight:700;
  font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--s-texte-doux)}
@media(max-width:560px){.slot-para{margin-top:2px}}

/* --- Partenaires -------------------------------------------------------- */
.partners{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(130px,100%),1fr));gap:14px;align-items:center}
.partner{background:#fff;border:1px solid var(--bordure);border-radius:12px;min-height:82px;
  display:grid;place-items:center;padding:14px;color:var(--s-texte-doux);font-size:.85rem;text-align:center}

/* --- Conférenciers ------------------------------------------------------ */
.speakers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:18px}
.speaker{background:var(--s-carte);border:1px solid var(--s-bordure);border-radius:var(--radius-lg);
  box-shadow:var(--ombre);padding:22px}
.speaker .head{display:flex;gap:14px;align-items:center}
.speaker .avatar{width:34px;height:34px;border-radius:50%;flex:0 0 auto;background:var(--vert-tendre);
  display:grid;place-items:center;color:var(--vert-foret);font-family:var(--f-titre);font-weight:700;
  font-size:13px;overflow:hidden}
.speaker .avatar img{width:100%;height:100%;object-fit:cover}
.speaker .name{margin:0;font-weight:700;font-size:1.05rem;color:var(--s-titre)}
.speaker .aff{color:var(--s-texte-doux);font-size:.88rem;margin:.15rem 0 0}
.speaker .talk{margin:14px 0 0;padding:12px 14px;background:var(--vert-sauge);border-radius:10px;
  font-style:italic;color:var(--vert-foret);font-size:.93rem}
.speaker details{margin-top:12px;border-top:1px solid var(--bordure);padding-top:10px}
.speaker summary{cursor:pointer;color:var(--bleu-ocean);font-family:var(--f-titre);font-weight:600;
  font-size:.88rem;list-style:none}
.speaker summary::-webkit-details-marker{display:none}
.speaker summary::after{content:" ▾";color:var(--vert-vegetal)}
.speaker details[open] summary::after{content:" ▴"}
.speaker details p{margin:.6rem 0 0;color:var(--s-texte-doux);font-size:.93rem}

/* --- Posters ------------------------------------------------------------ */
.poster-session{margin-bottom:34px}
.poster-session h3{font-weight:700;color:var(--s-titre);border-left:4px solid var(--vert-vegetal);
  padding-left:12px;margin:0 0 16px}
.poster-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:18px}
.poster{background:var(--s-carte);border:1px solid var(--s-bordure);border-radius:var(--radius-lg);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--ombre)}
.poster .thumb{aspect-ratio:16/10;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--vert-foret),var(--bleu-ocean),var(--bleu-lagon))}
.poster .body{padding:18px;flex:1;display:flex;flex-direction:column;gap:6px}
.poster .body h4{margin:0;font-weight:700;font-size:1rem;color:var(--s-titre)}
.poster .body .auth{color:var(--s-texte-doux);font-size:.86rem}
.poster .body .actions{margin-top:auto;display:flex;gap:10px;flex-wrap:wrap;padding-top:8px}
.vote-btn{display:inline-flex;align-items:center;gap:.4rem;background:var(--vert-tendre);color:var(--vert-foret);
  border:0;border-radius:var(--pill);padding:7px 14px;font-family:var(--f-titre);font-size:12px;
  font-weight:600;cursor:pointer}
.vote-btn:hover:not(:disabled){background:var(--vert-vegetal)}
.vote-btn:disabled{opacity:.6;cursor:not-allowed}

/* --- FAQ (accordéon) ---------------------------------------------------- */
.faq{max-width:820px}
.faq details{background:var(--s-carte);border:1px solid var(--s-bordure);border-radius:12px;margin-bottom:12px;
  overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:16px 18px;font-family:var(--f-titre);font-weight:600;
  color:var(--s-titre);display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--vert-vegetal);font-size:1.4rem;line-height:1;flex:0 0 auto}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{background:var(--s-tendre)}
.faq .a{padding:4px 18px 18px;color:var(--s-texte-doux)}

/* --- Carte (Lieu) ------------------------------------------------------- */
.map-embed{border:0;width:100%;height:360px;border-radius:var(--radius);box-shadow:var(--ombre);margin-top:8px}

/* --- Formulaire (design system) ----------------------------------------- */
/* Surfaces ADAPTATIVES : en sombre, la carte restait blanche et les libellés
   (--s-texte, clairs) devenaient invisibles dessus (retour client 17/07). Tout le
   formulaire suit désormais les surfaces --s-* : rendu clair inchangé, lisible en
   sombre. Les champs prennent --s-alt (un cran plus foncé que la carte --s-carte
   en sombre → puits en creux ; en clair --s-alt = blanc = strictement identique). */
.form-sec{background:var(--s-tendre)}
form.card-form{background:var(--s-carte);border:1px solid var(--s-bordure);border-radius:var(--radius-lg);padding:28px;
  box-shadow:var(--ombre);max-width:760px}
.field{margin-bottom:18px}
.field label{display:block;font-family:var(--f-titre);font-weight:600;font-size:13px;margin-bottom:8px;
  color:var(--s-texte)}
.field .req{color:var(--terre-mangrove)}
.field input,.field select,.field textarea{width:100%;font-family:var(--f-texte);font-size:14px;
  padding:11px 14px;border:1.5px solid var(--s-bordure);border-radius:10px;background:var(--s-alt);color:var(--s-texte)}
.field input::placeholder,.field textarea::placeholder{color:var(--s-texte-doux);opacity:1}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--bleu-lagon)}
.field textarea{min-height:130px;resize:vertical}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.row2{grid-template-columns:1fr}}

/* ⚠️ 16 px MINIMUM sur les champs en mobile, et ce n'est pas une question de
   confort : sous 16 px, **iOS Safari zoome tout seul** dès qu'on touche un champ.
   La page saute, le reste du formulaire sort de l'écran, et il faut pincer pour
   revenir — à chacun des 11 champs de l'appel à communications. Le seuil est
   codé en dur dans Safari : c'est 16, pas 15,9.
   La hauteur suit (16 px + 13 px de padding ≈ 46 px), ce qui règle du même coup
   la cible tactile de 44 px (Opquast). Ne jamais redescendre sous 16 ici. */
@media(max-width:768px){
  .field input,.field select,.field textarea{font-size:16px;padding:13px 14px}
  .field textarea{min-height:150px}
}
.hint{font-size:12px;color:var(--s-texte-doux);margin-top:8px}
.consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;color:var(--s-texte-doux);
  font-family:var(--f-texte);font-weight:400}
.consent input{width:auto;margin-top:5px}
/* APRÈS la règle ci-dessus, et c'est le point : `.consent input{width:auto}` a la
   même spécificité, donc à égalité c'est l'ordre qui tranche — placé plus haut,
   le width:20px était écrasé (mesuré : la case restait à 13 px de large).
   La zone cliquable, elle, a toujours été le <label> entier (277x96) ; ici il
   s'agit de VOIR la case, pas de l'atteindre. */
@media(max-width:768px){
  .consent input{width:20px;height:20px;margin-top:2px;flex:0 0 auto}
  .consent{font-size:.95rem;align-items:flex-start}
}
.form-status{margin-top:14px;padding:14px 16px;border-radius:10px;display:none}
/* Succès : mêmes fonds -b que les badges (identique en clair, teinte profonde en
   sombre). L'encart d'erreur reste clair à dessein — une erreur doit sauter aux yeux,
   et le texte brique sur terre-clair y est lisible dans les deux thèmes. */
.form-status.ok{display:block;background:var(--vert-tendre-b,var(--vert-sauge));color:var(--s-titre);border:1px solid var(--s-bordure)}
.form-status.err{display:block;background:var(--terre-clair);color:var(--terre-mangrove);border:1px solid #E5C3BB}

/* --- Sécurité formulaires (honeypot) ------------------------------------ */
/* Honeypot : masqué visuellement ET pour les lecteurs d'écran, mais rempli par les bots */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* --- Zone de dépôt de fichiers (drag & drop) ---------------------------- */
.dropzone{position:relative;border:2px dashed var(--vert-medicinal);border-radius:var(--radius);
  background:var(--s-tendre);padding:28px 20px;text-align:center;transition:border-color .15s, background .15s}
.dropzone:hover,.dropzone:focus-within{border-color:var(--bleu-lagon);background:var(--bleu-clair)}
.dropzone.is-dragover{border-color:var(--bleu-lagon);background:var(--bleu-clair);border-style:solid}
.dropzone .dz-ic{color:var(--vert-bio);margin-bottom:8px}
.dropzone .dz-txt{font-family:var(--f-titre);font-weight:600;color:var(--s-titre);font-size:.95rem}
.dropzone .dz-sub{font-size:.82rem;color:var(--s-texte-doux);margin-top:6px}
/* input fichier accessible : reste focusable, superposé à la zone */
.dropzone input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.dz-list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.dz-file{display:flex;align-items:center;gap:10px;background:var(--s-carte);border:1px solid var(--s-bordure);
  border-radius:10px;padding:9px 12px;font-size:.88rem}
.dz-file .fn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--s-texte)}
.dz-file .fs{color:var(--s-texte-doux);font-size:.8rem;flex:0 0 auto;font-variant-numeric:tabular-nums}
.dz-file .rm{background:transparent;border:0;color:var(--terre-mangrove);cursor:pointer;font-size:1.1rem;
  line-height:1;padding:2px 6px;border-radius:6px}
.dz-file .rm:hover{background:var(--terre-clair)}
.dz-file.is-bad{border-color:#E5C3BB;background:var(--terre-clair)}
.dz-err{color:var(--terre-mangrove);font-size:.82rem;margin-top:8px}

/* --- Bande CTA ----------------------------------------------------------
   Refonte 16/07 : l'ancienne version était un aplat dégradé avec du texte
   posé dessus, à gauche, sans rien pour accrocher l'œil. Maintenant :
   dégradé animé + halos + vagues du DS + contenu centré. */
.cta-band{position:relative;overflow:hidden;color:#fff;padding:72px 0;isolation:isolate;
  background:linear-gradient(115deg,var(--vert-foret) 0%,var(--bleu-ocean) 45%,
             var(--vert-recif) 70%,var(--vert-foret) 100%);
  background-size:280% 280%;animation:cta-flux 18s ease infinite}
@keyframes cta-flux{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
/* halos organiques (valeurs du DS) */
.cta-band::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;pointer-events:none;
  background:radial-gradient(circle at 12% 20%,rgba(101,201,158,.5) 0,transparent 45%),
             radial-gradient(circle at 88% 85%,rgba(30,167,182,.45) 0,transparent 50%)}
/* trame d'ADN discrète — « élément signature, jamais dominant » (DS) */
.cta-band::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.09;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60' viewBox='0 0 120 60'%3E%3Cpath d='M0,30 C30,0 30,60 60,30 C90,0 90,60 120,30' fill='none' stroke='%23ffffff' stroke-width='1.5'/%3E%3Cpath d='M0,30 C30,60 30,0 60,30 C90,60 90,0 120,30' fill='none' stroke='%23ffffff' stroke-width='1.5'/%3E%3C/svg%3E") repeat;
  background-size:120px 60px}
.cta-band .wrap{position:relative;z-index:1;text-align:center;max-width:720px}
/* Titre en blanc plein : la bande est DÉJÀ un dégradé, un titre dégradé par
   dessus serait illisible. Cf. l'exclusion :not(.cta-band) plus haut. */
.cta-band h2{color:#fff;font-size:clamp(1.6rem,3.4vw,2.1rem);margin-bottom:.6rem}
.cta-band .section-intro{color:var(--vert-tendre);margin:0 auto 26px;text-align:center}
.cta-band .cta-row{justify-content:center}
.cta-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-titre);font-weight:700;
  font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--menthe-lagon);
  margin:0 0 12px;padding:6px 16px;border:1px solid rgba(101,201,158,.45);border-radius:var(--pill);
  background:rgba(0,0,0,.16)}
/* 11 px + 2,5 px d'interlettrage : lisible sur un écran de bureau, à la limite
   au bras tendu. On remonte à 12 px en mobile et on resserre l'interlettrage,
   qui coûte de la largeur là où il n'y en a plus. */
@media(max-width:760px){ .cta-eyebrow{font-size:12px;letter-spacing:1.6px} }
.cta-note{margin:20px 0 0;font-size:.86rem;color:var(--vert-tendre);opacity:.9}
.jour-theme{font-family:var(--f-titre);font-size:.92rem;color:var(--s-texte-doux);margin:0 0 18px;
  padding-bottom:12px;border-bottom:1px solid var(--s-bordure)}
.jour-theme strong{color:var(--s-titre)}

/* --- Vignettes de démonstration -----------------------------------------
   Le tag « Exemple » n'est pas décoratif : il empêche qu'une illustration
   générique passe pour un vrai poster une fois la galerie en ligne. */
.thumb--img{padding:0;overflow:hidden;position:relative;aspect-ratio:16/9;background:var(--gris-clair)}
.thumb--img img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.poster:hover .thumb--img img{transform:scale(1.05)}
.thumb-tag{position:absolute;top:10px;left:10px;font-family:var(--f-titre);font-weight:700;
  font-size:10px;letter-spacing:1.5px;text-transform:uppercase;padding:4px 10px;border-radius:var(--pill);
  background:rgba(42,58,48,.82);color:#fff;backdrop-filter:blur(4px)}
.poster--demo .body h4{color:var(--s-texte-doux)}

/* Pages légales : colonne de lecture plus étroite (~70 caractères) */
.wrap--texte{max-width:760px}
.wrap--texte h2{margin-top:34px}
.wrap--texte p,.wrap--texte li{color:var(--s-texte);line-height:1.7}
.wrap--texte ul{padding-left:1.2rem}
.wrap--texte li{margin-bottom:.4rem}
/* Encart « à compléter/valider » — destiné à l'équipe, pas au visiteur : il
   doit disparaître avant l'ouverture publique. */
.encart-attention{background:#FFF7E6;border:1px solid #F0D9A0;border-left:4px solid #E0A33A;
  border-radius:var(--radius);padding:18px 20px;color:#6B5320}
.encart-attention p,.encart-attention li{color:#6B5320}
.encart-attention p:first-child{margin-top:0}
.encart-attention p:last-child,.encart-attention ul:last-child{margin-bottom:0}
:root[data-theme="dark"] .encart-attention{background:#2A2416;border-color:#4A3D1E;color:#E5C98A}
:root[data-theme="dark"] .encart-attention p,
:root[data-theme="dark"] .encart-attention li{color:#E5C98A}

/* Encart de contact sobre (FAQ) */
.encart-contact{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:28px;padding:22px 26px;border-radius:var(--radius);background:var(--s-tendre);
  border:1px solid var(--s-bordure)}
.encart-contact h3{margin:0 0 4px;color:var(--s-titre);font-size:1.05rem}
.encart-contact p{margin:0;color:var(--s-texte-doux);font-size:.92rem}

/* Fiches « intervention » en attente de confirmation */
.avatar--attente{background:var(--vert-sauge);color:var(--vert-recif)}
.speaker-pied{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 0;
  padding-top:12px;border-top:1px solid var(--bordure)}
.speaker-attente{font-size:.8rem;color:var(--s-texte-doux);font-style:italic}
/* Pas de repeinte du bouton ici : le primaire brique ressort déjà sur la bande.
   L'ancienne surcharge le remettait en vert clair SUR UN FOND VERT. */
.cta-band .btn{box-shadow:0 10px 30px rgba(0,0,0,.28)}
@media(prefers-reduced-motion:reduce){ .cta-band{animation:none} }

/* --- Footer ------------------------------------------------------------- */
footer{background:var(--s-marque);color:var(--vert-tendre);padding:44px 0 26px;font-size:.9rem}
/* Marque du colloque en tête de pied de page : logo + slogan, comme dans la barre
   (demande client 16/07) — le titre typographique qui était là ne rappelait pas
   l'identité. Le <h2> subsiste en .sr-only : il nomme la région pour les lecteurs
   d'écran, à qui le logo (alt vide) ne dit rien. */
.foot-marque{display:flex;align-items:center;gap:.7rem;margin:0 0 26px;flex-wrap:wrap}
.foot-marque .brand-logo{height:60px}
.foot-slogan{font-family:var(--f-signature);font-size:2.1rem;color:#fff;line-height:1}
@media(max-width:600px){
  .foot-marque .brand-logo{height:46px}
  .foot-slogan{font-size:1.6rem}
}
footer .cols{display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between}
footer a{color:#fff}
footer a:hover{color:var(--menthe-lagon)}
.foot-h{font-family:var(--f-titre);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:1px;
  color:var(--vert-medicinal);margin:0 0 .6rem}
.foot-about{max-width:340px}
.foot-nav ul{list-style:none;margin:0;padding:0}
.foot-nav li{margin-bottom:6px}
/* Les liens du pied ne faisaient que 17 px de haut : la hauteur du texte, rien
   de plus. C'est le menu de secours du site — celui qu'on cherche justement
   quand on est perdu. On leur donne 44 px UNIQUEMENT en mobile : sur desktop,
   à la souris, l'espacement d'origine reste plus lisible qu'un menu aéré. */
@media(max-width:900px){
  .foot-nav li{margin-bottom:0}
  .foot-nav a{display:flex;align-items:center;min-height:44px}
  footer .legal a{display:inline-flex;align-items:center;min-height:44px}
  .foot-about a{display:inline-flex;align-items:center;min-height:44px}
  /* Un lien SEUL dans son paragraphe, à l'intérieur d'une carte, n'est pas un
     lien au fil du texte : c'est une action (« Itinéraire sur Google Maps »,
     l'adresse e-mail de contact…), et on la vise au doigt. `:only-child` fait
     exactement le tri — un lien noyé dans une phrase garde sa taille, lui, et
     c'est très bien : l'élargir casserait l'interligne du paragraphe.
     Le `.sr-only « nouvelle fenêtre »` compte comme enfant : d'où :first-child
     en complément, sinon la règle raterait tous les liens externes. */
  .card p > a:only-child,
  .card p > a:first-child:last-of-type{display:inline-flex;align-items:center;min-height:44px}
}
footer .legal{margin-top:26px;padding-top:16px;border-top:1px solid rgba(255,255,255,.15);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;color:var(--vert-medicinal)}
.legal .version{font-variant-numeric:tabular-nums}
.soc a{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:9px;
  background:rgba(255,255,255,.1);margin-right:8px}
.soc a:hover{background:var(--vert-vegetal)}
/* 44px au doigt (Opquast). La pastille visible reste à 38 sur desktop : à la
   souris elle suffit, et l'agrandir déséquilibrerait le pied de page. */
@media(max-width:900px){ .soc a{width:44px;height:44px} }
/* Bouton Don. Brique, comme toute action principale du DS — et il n'entre en
   concurrence avec rien ici : le pied de page n'a aucun autre bouton. */
.foot-don{margin:18px 0 0}
.btn--don{min-height:44px}
.btn--don:hover{background:var(--brique-fonce);color:#fff}

/* --- Apparition au scroll (ajoutée par JS si mouvement autorisé) -------- */
.reveal{opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}

/* --- Entrée du hero -----------------------------------------------------
   Animation CSS pure (pas de JS) : elle se joue au chargement, donc rien à
   observer, et aucun risque de contenu bloqué invisible — si l'animation ne
   se joue pas, l'état final est de toute façon celui du CSS.
   `backwards` applique l'état initial pendant le délai. */
@keyframes monte{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes macaron{from{opacity:0;transform:scale(.86) rotate(-6deg)}to{opacity:1;transform:none}}
.hero .eyebrow{animation:monte .7s cubic-bezier(.22,1,.36,1) backwards .05s}
.hero h1{animation:monte .8s cubic-bezier(.22,1,.36,1) backwards .15s}
.hero .theme{animation:monte .8s cubic-bezier(.22,1,.36,1) backwards .3s}
.hero .lead{animation:monte .8s cubic-bezier(.22,1,.36,1) backwards .42s}
.hero .cta-row{animation:monte .8s cubic-bezier(.22,1,.36,1) backwards .54s}
.hero .countdown{animation:monte .8s cubic-bezier(.22,1,.36,1) backwards .66s}
.hero .meta-band{animation:monte .8s cubic-bezier(.22,1,.36,1) backwards .78s}
.hero-logo{animation:macaron 1s cubic-bezier(.22,1,.36,1) backwards .25s}
/* flottement lent du macaron, une fois posé */
@keyframes flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.hero-logo{animation:macaron 1s cubic-bezier(.22,1,.36,1) backwards .25s,
                     flotte 7s ease-in-out 1.25s infinite}

/* --- Survols ------------------------------------------------------------ */
.card,.speaker,.poster,.mod,.tl-card{transition:transform .25s cubic-bezier(.22,1,.36,1),
  box-shadow .25s ease, border-color .25s ease}
.card:hover,.speaker:hover,.poster:hover,.mod:hover,.tl-card:hover{
  transform:translateY(-5px);box-shadow:0 14px 34px rgba(15,77,58,.16);border-color:var(--vert-medicinal)}
.stat{transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease}
.stat:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(15,77,58,.14)}

/* --- Bandeau de consentement -------------------------------------------
   Ancré en bas, au-dessus de tout. Il ne recouvre pas la page (pas de voile
   opaque) : on doit pouvoir lire le site pour décider en connaissance de cause,
   et un mur reste un mur même quand il est légal. */
.cookies{position:fixed;left:0;right:0;bottom:0;z-index:200;
  background:var(--vert-foret);border-top:2px solid var(--menthe-lagon);
  box-shadow:0 -10px 34px rgba(0,0,0,.28);
  animation:cookies-monte .45s cubic-bezier(.22,1,.36,1) backwards .35s}
@keyframes cookies-monte{from{transform:translateY(100%)}to{transform:none}}
.cookies[hidden]{display:none}
/* Bandeau resserré (client 17/07) : il barre le bas de l'écran, il doit se lire
   et se traiter vite — pas s'installer. Le texte reste complet : l'alléger, c'est
   le rendre moins clair, et le consentement doit être éclairé. */
.cookies-in{display:flex;align-items:center;gap:22px;padding-top:10px;padding-bottom:10px}
.cookies-txt{flex:1 1 auto;min-width:0}
.cookies-t{font-family:var(--f-titre);font-weight:700;font-size:.85rem;color:#fff;margin:0 0 1px}
.cookies-txt p{margin:0;font-size:.79rem;line-height:1.45;color:var(--vert-tendre)}
.cookies-txt a{color:var(--menthe-lagon);text-decoration:underline;text-underline-offset:3px}
.cookies-txt a:hover{color:#fff}
.cookies-mini{display:none}   /* version courte : mobile uniquement (cf. media query) */
.cookies-btns{flex:0 0 auto;display:flex;gap:10px}
/* CNIL : refuser doit être aussi simple qu'accepter. Les deux boutons ont donc
   la MÊME taille, la même typo et le même contraste — seul le remplissage
   diffère, pour qu'ils restent distinguables. Pas de « refuser » en lien gris
   minuscule sous le bouton vert : c'est le motif que la CNIL sanctionne. */
/* Boutons resserrés mais TOUJOURS identiques entre eux, et jamais sous 44 px de
   haut : c'est la double contrainte CNIL + Opquast. Réduire ne veut pas dire
   dégrader « Refuser ». */
.btn--cookie{min-width:116px;justify-content:center;padding:10px 18px;font-size:.8rem;min-height:44px}
.cookies-btns .btn--cookie[data-consent="non"]{
  background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.7)}
.cookies-btns .btn--cookie[data-consent="non"]:hover{background:rgba(255,255,255,.14);border-color:#fff}
/* MOBILE : bandeau COMPACT sur une seule ligne (demande client 17/07). On reste en
   RANGÉE ; le titre + la phrase longue passent en sr-only (gardés pour aria-*,
   consentement éclairé), et le visible se réduit à un lien court « Cookies de mesure
   d'audience » + les deux boutons resserrés — toujours IDENTIQUES et à 44 px de haut
   (double contrainte CNIL + Opquast). Le lien ellipse au besoin sous 340 px. */
@media(max-width:760px){
  .cookies-in{flex-direction:row;align-items:center;gap:8px}
  .cookies-t,#cookies-d{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .cookies-txt{flex:1 1 auto;min-width:0}
  .cookies-mini{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    font-family:var(--f-titre);font-weight:600;font-size:.74rem;color:var(--menthe-lagon)}
  .cookies-btns{flex:0 0 auto;gap:6px}
  /* Boutons resserrés pour que « Mesure d'audience » tienne en entier dès 320 px,
     sans jamais descendre sous 44 px de haut (Opquast) ni casser l'égalité CNIL. */
  .cookies-btns .btn--cookie{flex:0 0 auto;min-width:0;padding:8px 10px;font-size:.74rem;min-height:44px}
}

/* --- Accessibilité : mouvement réduit ----------------------------------
   Couvre TOUT ce qui précède (entrée du hero, hub, flottement du macaron,
   cascade, dégradé animé du CTA, survols). Le `.001ms` plutôt que `none` :
   l'animation se joue quand même, instantanément — les événements `animationend`
   continuent donc de se déclencher et rien ne reste bloqué à son état initial.

   Le DÉLAI est neutralisé au même titre que la durée, et ce n'est pas cosmétique :
   avec `backwards`, un élément affiche son état INITIAL pendant tout son délai.
   Les nœuds du hub partent à opacity:0 et jusqu'à 1,3 s de délai — sans cette
   ligne, quelqu'un qui demande moins d'animation fixait un hero incomplet
   pendant plus d'une seconde. Réduire le mouvement, ce n'est pas attendre. */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-delay:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* --- Bouton « retour en haut » -----------------------------------------
   Lien natif (#top posé sur <body>) affiché par main.js une fois la page
   scrollée. Masqué en haut de page ET quand le JS est absent : c'est une
   commodité de navigation, pas du contenu — rien n'est perdu. visibility:hidden
   le retire aussi du parcours clavier tant qu'il est caché. z-index 40 :
   au-dessus du contenu, SOUS le bandeau cookies (200) qui garde la priorité en
   bas d'écran. Brique = action, identique dans les deux thèmes. */
.to-top{position:fixed;right:18px;bottom:18px;z-index:40;
  width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--terre-mangrove);color:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.28);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .25s ease,transform .25s ease,visibility .25s ease,background .2s ease}
.to-top.is-visible{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--brique-fonce);color:#fff}
.to-top:focus-visible{outline:3px solid var(--menthe-lagon);outline-offset:2px}