/* ============================================================
   BASE — reset, rythme vertical, conteneurs, composants.
   Aucune couleur en dur : tout vient de tokens.css.
   Desktop d'abord (1440), dégradés à 1200 / 900 / 600.
   ============================================================ */

/* ---------- Reset ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

html,
body {
  overflow-x: clip;
}

body {
  background: var(--c-base);
  min-height: 100vh;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

h1,
h2,
h3,
h4 {
  font-weight: inherit;
  line-height: inherit;
}

/* Le focus passe en turquoise : il reste visible aussi bien sur les fonds
   clairs que sur le marine du héros et du pied. */
:focus-visible {
  outline: 2px solid var(--c-action);
  outline-offset: 2px;
}

::selection {
  background: var(--c-action);
  color: var(--c-on-action);
}

.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Conteneurs, sections, rythme ---------- */

.conteneur {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.conteneur--etroit {
  max-width: 860px;
}

.section {
  padding-block: clamp(56px, 8vw, 96px);
}

.section--alt {
  background: var(--g-surface-douce);
}

.section--serree {
  padding-block: clamp(32px, 5vw, 56px);
}

/* ---------- Semis de points (décor de fond) ----------
   Réservé à deux sections de la page d'accueil : posé partout, il perd
   son effet et alourdit la lecture. Le décor est en fond (z-index 0), le
   contenu passe au-dessus, rien ne déborde de la section, et un masque
   dégradé l'efface avant toute zone de texte. */

.section--motif {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.section--motif > .conteneur {
  position: relative;
  z-index: 1;
}

.section--motif-points::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: radial-gradient(
    color-mix(in srgb, var(--c-vif) 45%, transparent) 1.4px,
    transparent 1.5px
  );
  background-size: 20px 20px;
  /* s'efface avant d'atteindre les cartes */
  mask-image: linear-gradient(to bottom, #000 0, transparent 42%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0, transparent 42%);
  opacity: 0.55;
  pointer-events: none;
}


.section__entete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-bottom: var(--sp-7);
}

.section__titre {
  font-size: var(--fs-2xl);
  /* pas de plafond en ch : les titres de section tiennent sur une ligne
     en desktop, et se répartissent proprement quand ils doivent passer */
  text-wrap: balance;
}

.section__intro {
  margin-top: var(--sp-3);
  max-width: 60ch;
  color: var(--c-secondary);
}

.section__action {
  flex: none;
  padding-bottom: var(--sp-1);
}

.grille {
  display: grid;
  gap: var(--sp-5);
}

.grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grille--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.prose {
  max-width: 68ch;
}

.prose p {
  margin-block: var(--sp-4);
  line-height: 1.65;
}

.prose p:first-child {
  margin-top: 0;
}

.prose h3 {
  font-size: var(--fs-lg);
  font-weight: 700;
  margin-top: var(--sp-7);
  margin-bottom: var(--sp-3);
}

.prose ul {
  margin-block: var(--sp-4);
  padding-left: var(--sp-4);
}

.prose ul li {
  position: relative;
  padding-left: var(--sp-4);
  margin-block: var(--sp-2);
}

.prose ul li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--c-faint);
}

.texte-secondaire { color: var(--c-secondary); }
.texte-faible { color: var(--c-faint); }

hr.hairline {
  border: none;
  border-top: 1px solid var(--c-hairline);
  margin-block: var(--sp-6);
}

/* ---------- Eyebrow ---------- */

.eyebrow {
  font-size: var(--fs-xs);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-secondary);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

/* Le filet d'eyebrow s'épaissit et prend le dégradé accent : c'est lui qui
   distribue la couleur dans tout le corps de page, section après section. */
.eyebrow::before {
  content: '';
  width: 26px;
  height: 3px;
  background: var(--g-accent);
  flex: none;
}

.eyebrow--nu::before {
  display: none;
}

/* ---------- Boutons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.1;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

/* Primaire = dégradé accent plein, libellé off-white. Pas de bordure du
   tout : le liseré transparent du .btn de base laisse filer un fil de
   couleur au-dessus d'un dégradé ; le padding compense le pixel perdu. */
.btn--primary {
  background: var(--g-accent);
  color: var(--c-on-accent);
  border: none;
  padding: 14px 23px;
}

.btn--primary:hover {
  background: var(--g-accent-profond);
}

/* Bouton WhatsApp : charte du service, pas celle du club — dégradé vert
   et bords en pilule, comme le bouton officiel « Chat on WhatsApp ».
   `box-shadow` est ajouté à la transition du .btn de base, qui ne couvre
   que background, color et border-color. */
.btn--whatsapp {
  background: var(--g-whatsapp);
  color: var(--m-whatsapp-texte);
  border-color: transparent;
  border-radius: 999px;
  padding-inline: 26px;
  box-shadow: 0 0 0 0 transparent;
  transition: background 0.15s ease, box-shadow 0.2s ease;
}

/* Ombre teintée, propre à ce bouton : elle reprend le vert de la marque
   plutôt que l'ombre marine du reste du site. */
.btn--whatsapp:hover,
.btn--whatsapp:focus-visible {
  background: var(--g-whatsapp-survol);
  box-shadow: 0 8px 22px -4px color-mix(in srgb, var(--m-whatsapp) 62%, transparent);
}

.btn--outline {
  border-color: var(--c-line);
  color: var(--c-text);
}

.btn--outline:hover {
  background: var(--g-accent-profond);
  color: var(--c-on-accent);
}

.btn--ghost {
  padding: 6px 2px;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}

.btn--ghost:hover {
  color: var(--c-secondary);
}

.btn--grand {
  padding: 18px 34px;
  font-size: var(--fs-base);
}

/* même compensation du pixel de bordure en taille grande */
.btn--primary.btn--grand {
  padding: 19px 35px;
}

/* Boutons posés sur fond inversé : le primaire garde son turquoise, qui
   ressort sur le marine (6,7:1) — seul le contour bascule en off-white. */
.bandeau .btn--outline,
.hero-plein .btn--outline,
.pied .btn--outline {
  border-color: var(--c-on-accent);
  color: var(--c-on-accent);
}

.bandeau .btn--outline:hover,
.hero-plein .btn--outline:hover,
.pied .btn--outline:hover {
  background: var(--c-on-accent);
  color: var(--c-accent);
}

/* ---------- Puces de filtre ---------- */

.puce {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 8px 16px;
  border: 1px solid var(--c-hairline);
  border-radius: 999px;
  font-size: var(--fs-sm);
  font-weight: 550;
  color: var(--c-secondary);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.puce:hover {
  border-color: var(--c-vif);
  color: var(--c-text);
}

.puce.est-active {
  background: var(--g-accent-profond);
  border-color: var(--c-accent);
  color: var(--c-on-accent);
}

.puce__compte {
  font-size: var(--fs-xs);
  color: var(--c-faint);
}

.puce.est-active .puce__compte {
  color: var(--c-on-accent);
}

.rang-puces {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

/* ---------- Étiquettes ---------- */

.tag {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 3px 9px;
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-sm);
  color: var(--c-secondary);
  white-space: nowrap;
}

.tag--plein {
  background: var(--g-accent-profond);
  border-color: var(--c-accent);
  color: var(--c-on-accent);
}

/* ---------- Placeholder image ---------- */

.ph {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--r-md);
  color: var(--c-text);
}

.ph__label {
  position: absolute;
  left: var(--sp-3);
  bottom: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 9px;
  background: color-mix(in srgb, var(--c-base) 88%, transparent);
  border-radius: var(--r-sm);
}

.ph__tag {
  position: absolute;
  right: var(--sp-3);
  top: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 9px;
  background: var(--g-accent-profond);
  color: var(--c-on-accent);
  border-radius: var(--r-sm);
}

/* ---------- En-tête ---------- */

/* Cible d'un lien d'ancre : l'en-tête collant ne doit pas manger le
   bloc visé, et un liseré signale brièvement où l'on vient d'atterrir. */
.cible-ancre {
  scroll-margin-top: calc(var(--h-entete) + var(--sp-5));
}

.cible-ancre:target {
  animation: cible-ancre 2.4s ease-out;
}

@keyframes cible-ancre {
  from { background: color-mix(in srgb, var(--c-accent) 12%, transparent); }
  to { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .cible-ancre:target {
    animation: none;
  }
}

.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-base);
  border-bottom: 1px solid var(--c-hairline);
}

.entete__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  min-height: var(--h-entete);
  /* un peu d'air au-dessus : la barre ne colle plus au bord de l'écran */
  padding-block: var(--sp-3);
}

/* Trois zones : marque et bouton prennent une part égale de l'espace
   restant, ce qui centre exactement la navigation dans la barre. */
.entete__marque {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
}

.nav-principale {
  flex: 0 1 auto;
  align-self: stretch;
  display: flex;
  justify-content: center;
}

.nav-principale__liste {
  display: flex;
  align-items: stretch; /* la zone de survol occupe toute la hauteur de l'en-tête */
  gap: var(--sp-1);
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-principale__lien {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  color: var(--c-secondary);
  transition: color 0.15s ease;
}

.nav-principale__lien:hover {
  color: var(--c-text);
}

.nav-principale__lien.est-actif {
  background: var(--g-accent-profond);
  color: var(--c-on-accent);
}

.nav-item__chevron {
  font-size: 9px;
  line-height: 1;
  opacity: 0.55;
  transition: transform 0.16s ease;
}

.nav-item:hover .nav-item__chevron,
.nav-item:focus-within .nav-item__chevron {
  transform: translateY(2px);
}

/* ---------- Dropdown de navigation (survol + focus clavier) ---------- */

.nav-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 70;
  padding-top: 1px; /* colle au filet de l'en-tête, pas de trou au survol */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}

.nav-item:hover > .nav-menu,
.nav-item:focus-within > .nav-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-menu__panneau {
  min-width: 250px;
  background: var(--c-base);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: var(--sp-2);
  box-shadow: 0 10px 22px var(--c-shadow);
}

.nav-menu__lien {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 550;
  color: var(--c-secondary);
  white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease;
}

.nav-menu__lien:hover {
  background: var(--c-surface);
  color: var(--c-text);
}

.nav-menu__lien.est-actif {
  background: var(--g-accent-profond);
  color: var(--c-on-accent);
}

.nav-menu__note {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-faint);
}

.nav-menu__lien.est-actif .nav-menu__note {
  color: color-mix(in srgb, var(--c-on-accent) 70%, transparent);
}

/* Les dernières entrées ouvrent vers la gauche pour ne pas sortir du cadre */
.nav-item:nth-last-child(-n + 3) .nav-menu {
  left: auto;
  right: 0;
}

.entete__cta {
  flex: 1 1 0;
  display: flex;
  justify-content: flex-end;
}

.entete__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  margin-left: auto;
}

.entete__burger span {
  display: block;
  height: 2px;
  background: var(--c-line);
  transition: background 0.25s ease;
}

/* ---------- En-tête de l'accueil : flottant par-dessus le héros ---------- */

/* Sur l'accueil l'en-tête est fixe dans les deux états : il ne prend jamais
   de place dans le flux, donc aucun saut de mise en page à la bascule. */
.entete--accueil {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.entete--flottante {
  background: transparent;
  border-bottom-color: transparent;
}

/* Tout tient dans une seule barre arrondie posée sur le visuel */
.entete--flottante .entete__inner {
  margin-top: var(--sp-6);
  min-height: 62px;
  padding-inline: var(--sp-5);
  gap: var(--sp-5);
  /* barre à angles vifs plutôt qu'une pilule : l'esprit du reste du site
     est anguleux (--r-sm vaut 2px), la pilule y faisait exception */
  border-radius: 0;
  border: 1px solid color-mix(in srgb, var(--c-on-accent) 25%, transparent);
  /* même voile marine translucide qu'avant sur les deux premiers tiers,
     qui glisse vers le pétrole sur la fin seulement — la barre garde son
     aspect verre fumé, juste réchauffée à droite */
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--c-text) 45%, transparent) 0%,
    color-mix(in srgb, var(--c-text) 45%, transparent) 60%,
    color-mix(in srgb, var(--c-vif) 50%, transparent) 100%
  );
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--c-on-accent);
}

.entete--flottante .nav-principale__lien {
  color: color-mix(in srgb, var(--c-on-accent) 78%, transparent);
}

.entete--flottante .nav-principale__lien:hover {
  color: var(--c-on-accent);
}

.entete--flottante .nav-principale__lien.est-actif {
  background: var(--c-on-accent);
  color: var(--c-accent);
}

.entete--flottante .btn--outline {
  border-color: var(--c-on-accent);
  color: var(--c-on-accent);
}

.entete--flottante .btn--outline:hover {
  background: var(--c-on-accent);
  color: var(--c-accent);
}

.entete--flottante .entete__burger span {
  background: var(--c-on-accent);
}

/* le panneau se détache de la barre arrondie */
.entete--flottante .nav-menu {
  padding-top: var(--sp-3);
}

/* ---------- Marque en couleur dans l'en-tête ----------
   Le fond de l'en-tête reste clair : c'est la marque qui porte le dégradé
   accent. Le logotype SVG le prend via le paint server défini dans le
   composant ; le logo (PNG) via un masque, dans Wordmark.jsx. */

.logotype--degrade {
  fill: url('#logotype-degrade');
}

/* Le CTA de l'en-tête clair reste non rempli mais son contour et son
   libellé prennent le dégradé accent : border-image pour le contour
   (le rayon de 2px se perd, l'esprit anguleux n'y perd rien), et le
   même dégradé découpé par le texte via background-clip. */
.entete:not(.entete--flottante) .btn--outline {
  border-color: transparent;
  border-image: var(--g-accent) 1;
  background: var(--g-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* au survol, retour à un remplissage plein — le dégradé redevient un fond */
.entete:not(.entete--flottante) .btn--outline:hover {
  border-image: none;
  border-color: transparent;
  background: var(--g-accent-profond);
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--c-on-accent);
}

/* Menu mobile plein écran */
.menu-mobile {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--c-base);
  display: flex;
  flex-direction: column;
  padding: var(--sp-4) var(--gutter) var(--sp-8);
  overflow-y: auto;
  animation: apparition 0.2s ease;
}

.menu-mobile__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  margin-bottom: var(--sp-6);
}

.menu-mobile__fermer {
  font-size: 26px;
  line-height: 1;
  width: 44px;
  height: 44px;
}

.menu-mobile__liens {
  display: flex;
  flex-direction: column;
}

.menu-mobile__groupe {
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--c-hairline);
}

.menu-mobile__lien {
  font-size: var(--fs-xl);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.menu-mobile__lien.est-actif::after {
  content: '●';
  font-size: var(--fs-xs);
}

/* Sous-liens : mêmes destinations que les dropdowns desktop */
.menu-mobile__sous-liens {
  display: flex;
  flex-direction: column;
  margin-top: var(--sp-3);
  padding-left: var(--sp-4);
  border-left: 1px solid var(--c-hairline);
}

.menu-mobile__sous-lien {
  display: block;
  padding: 7px 0;
  font-size: var(--fs-base);
  color: var(--c-secondary);
}

.menu-mobile__sous-lien.est-actif {
  color: var(--c-text);
  font-weight: 700;
}

.menu-mobile__pied {
  margin-top: var(--sp-7);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* ---------- Pied de page ---------- */

.pied {
  background: var(--g-accent-profond);
  color: var(--c-on-accent);
  padding-block: var(--sp-9) var(--sp-6);
  margin-top: auto;
}

.pied a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.pied__haut {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--sp-7);
  padding-bottom: var(--sp-8);
}

.pied__logotype {
  display: block;
  margin-top: var(--sp-5);
  width: min(100%, 220px);
  height: auto;
}

.pied__col h3 {
  font-size: var(--fs-xs);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--c-on-accent) 60%, transparent);
  margin-bottom: var(--sp-4);
}

.pied__col ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
}

.pied__bas {
  border-top: 1px solid color-mix(in srgb, var(--c-on-accent) 25%, transparent);
  padding-top: var(--sp-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: space-between;
  font-size: var(--fs-sm);
  color: color-mix(in srgb, var(--c-on-accent) 60%, transparent);
}

/* Signature de l'atelier : « Fait avec » et « par » restent atténués comme
   le reste du bandeau ; seuls le cœur et le nom de l'atelier passent en blanc. */
.pied__signature {
  margin-left: auto;
}

.pied__coeur,
.pied__signature a {
  color: #fff;
}

.pied__signature a {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------- Héros plein écran ---------- */

.hero-plein {
  position: relative;
  isolation: isolate;
  display: flex;
  overflow: hidden;
  /* fond de repli sous les visuels : noir neutre, pas le marine */
  background: var(--c-visuel-encre);
  color: var(--c-on-accent);
  /* plein écran : l'en-tête flotte par-dessus, il ne prend pas de hauteur.
     dvh suit la hauteur réellement visible sur mobile (barre d'URL rétractée
     ou non) — svh laissait une bande vide sous le héros. */
  min-height: 100vh;
  min-height: 100dvh;
}


.hero-plein__fonds {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero-plein__fond {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.hero-plein__fond.est-visible {
  opacity: 1;
}

.hero-plein__fond--photo {
  background-size: cover;
  /* cadrage haut : sur mobile, le format se resserre et c'est la partie
     supérieure des photos qui porte le sujet (horizon, coureurs) */
  background-position: 50% 35%;
  background-repeat: no-repeat;
  /* Flou léger : assez pour calmer les détails sous le logotype, pas assez
     pour rendre la scène méconnaissable. L'agrandissement compense les
     bords délavés que produit le flou en limite d'élément. */
  filter: blur(var(--hero-flou));
  transform: scale(1.06);
}

/* Voile : garantit le contraste du texte blanc quel que soit le visuel.
   La trame de lignes, jusqu'ici propre aux placeholders, passe au-dessus
   des photos : elle unifie les cinq visuels et casse les zones claires. */
.hero-plein__voile {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
      110deg,
      color-mix(in srgb, var(--c-visuel-base) 7%, transparent) 0 1px,
      transparent 1px 11px
    ),
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--c-visuel-encre) 55%, transparent),
      color-mix(in srgb, var(--c-visuel-encre) 42%, transparent) 40%,
      color-mix(in srgb, var(--c-visuel-encre) 88%, transparent)
    );
}

.hero-plein__contenu {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  /* l'en-tête flotte par-dessus : on réserve sa hauteur en haut */
  padding-block: calc(var(--h-entete) + var(--sp-5)) var(--sp-6);
  gap: var(--sp-3);
}

/* Bloc marque + boutons recentré dans la zone souple. C'est l'écart entre
   la baseline et les boutons, resté modéré, qui suffit à poser le logotype
   au centre optique sans le pousser sur la bande de chiffres. */
.hero-plein__centre {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Le logotype fourni remplace le sigle typographique */
.hero-plein__sigle {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* ---------- Animation d'entrée du logotype ----------
   Trois temps : un seul A centré, puis il se dédouble et les deux A
   rejoignent leur place, puis le C et le N apparaissent.
   Les décalages de départ amènent chaque A au centre du viewBox (281,5) :
   le A gauche est centré sur 93,25 → +188,25 ; le droit sur 481 → −199,5.
   Sans .logotype--anime, les lettres sont à leur place, opaques. */

.logotype--anime .logotype__a--gauche {
  animation: logo-a-gauche 2.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.logotype--anime .logotype__a--droite {
  animation: logo-a-droite 2.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.logotype--anime .logotype__lettre {
  animation: logo-lettre 2.4s ease-out both;
}

@keyframes logo-a-gauche {
  0% {
    transform: translateX(188.25px);
    opacity: 0;
  }
  10%,
  23% {
    transform: translateX(188.25px);
    opacity: 1;
  }
  56%,
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes logo-a-droite {
  /* invisible tant qu'il est superposé au premier : c'est son apparition
     nette à 23 % qui donne la lecture du dédoublement */
  0%,
  22.9% {
    transform: translateX(-199.5px);
    opacity: 0;
  }
  23% {
    transform: translateX(-199.5px);
    opacity: 1;
  }
  56%,
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes logo-lettre {
  0%,
  56% {
    opacity: 0;
    transform: translateY(9px);
  }
  81%,
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Cascade d'entrée du reste du héros : simples fondus, enchaînés après
   les 2,4 s du logotype. La baseline d'abord, puis boutons, chiffres et
   en-tête ensemble. Un seul point de réglage : --entree-delai. */
/* `backwards` et non `both` : l'état de départ s'applique pendant le délai,
   mais aucun style n'est retenu après coup. Un `transform` conservé sur
   l'en-tête créerait un bloc conteneur et casserait le `position: fixed`
   du menu mobile. C'est aussi `.entete--accueil`, stable, qui porte
   l'animation et non `.entete--flottante`, qui se pose et se retire au
   scroll — elle rejouerait le fondu à chaque retour en haut de page. */
.hero-plein__nom,
.hero-plein__actions,
.hero-plein__bas,
.entete--accueil {
  animation: entree-fondu 0.8s ease-out backwards;
  animation-delay: var(--entree-delai);
}

.hero-plein__nom {
  --entree-delai: 2.3s;
}

.hero-plein__actions {
  --entree-delai: 2.9s;
}

.hero-plein__bas,
.entete--accueil {
  --entree-delai: 3.2s;
}

@keyframes entree-fondu {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .logotype--anime .logotype__a--gauche,
  .logotype--anime .logotype__a--droite,
  .logotype--anime .logotype__lettre,
  .hero-plein__nom,
  .hero-plein__actions,
  .hero-plein__bas,
  .entete--accueil,
  .contact-whatsapp__fleche {
    animation: none;
  }
}

.hero-plein__logotype {
  width: min(76vw, 620px);
  height: auto;
  display: block;
}

.hero-plein__nom {
  margin-top: var(--sp-4);
  /* tenue sur une seule ligne à toutes les largeurs */
  white-space: nowrap;
  font-size: min(3vw, 20px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Les boutons descendent vers le bas du bloc centré : ils se rapprochent
   de la bande de chiffres, le logotype reste calé au centre optique. */
.hero-plein__actions {
  margin-top: clamp(var(--sp-6), 8vh, 80px);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
}

.hero-plein__bas {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.hero-plein__chiffres {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid color-mix(in srgb, var(--c-on-accent) 32%, transparent);
}

.hero-plein__chiffres li {
  padding: clamp(var(--sp-3), 2.5vw, var(--sp-5)) clamp(6px, 2vw, var(--sp-4)) 0;
  border-left: 1px solid color-mix(in srgb, var(--c-on-accent) 22%, transparent);
  text-align: center;
}

.hero-plein__chiffres li:first-child {
  border-left: none;
}

/* Corps fluide : les 4 chiffres restent sur une seule ligne jusqu'aux
   plus petites largeurs, sans jamais devenir énormes sur grand écran. */
.hero-plein__nombre {
  display: block;
  font-size: clamp(22px, 5.4vw, 46px);
}

.hero-plein__legende-chiffre {
  display: block;
  margin-top: var(--sp-1);
  font-size: clamp(8px, 1.15vw, 11px);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.3;
  /* les légendes longues ne doivent jamais pousser la colonne */
  overflow-wrap: break-word;
  hyphens: auto;
  color: color-mix(in srgb, var(--c-on-accent) 62%, transparent);
}

.hero-plein__puces {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
}

.hero-plein__puce {
  position: relative;
  display: block;
  width: 36px;
  height: 20px;
}

.hero-plein__puce::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 9px;
  height: 2px;
  background: color-mix(in srgb, var(--c-on-accent) 35%, transparent);
  transition: background 0.2s ease;
}

.hero-plein__puce:hover::before {
  background: color-mix(in srgb, var(--c-on-accent) 70%, transparent);
}

.hero-plein__puce.est-active::before {
  background: var(--c-action);
}

@media (prefers-reduced-motion: reduce) {
  .hero-plein__fond {
    transition: none;
  }
}

/* En-tête de page interne */
.tete-page {
  padding-block: clamp(40px, 6vw, 72px) clamp(32px, 5vw, 56px);
  border-bottom: 1px solid var(--c-hairline);
}

.tete-page__titre {
  font-size: var(--fs-4xl);
  max-width: 14ch;
}

.tete-page__intro {
  margin-top: var(--sp-5);
  max-width: 62ch;
  font-size: var(--fs-md);
  color: var(--c-secondary);
}

/* ---------- Tête de page sombre (antennes) ----------
   Bandeau pleine largeur dans l'esprit du héros de l'accueil, mais le
   texte reste calé à gauche : la photo se fond sur la droite plutôt que
   d'occuper tout le fond. Contrairement à `.tete-page` seule, ce bloc
   n'est pas le conteneur — il en enveloppe un. */

.tete-page--sombre {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--g-accent-profond);
  color: var(--c-on-accent);
  border-bottom: none;
  padding-block: clamp(56px, 8vw, 100px) clamp(48px, 7vw, 84px);
}

/* La photo couvre tout le bloc et disparaît avant d'atteindre le texte.
   `to left` : opaque au bord droit, transparente vers la gauche. */
.tete-page__photo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  mask-image: linear-gradient(to left, #000 0, transparent 72%);
  -webkit-mask-image: linear-gradient(to left, #000 0, transparent 72%);
  /* discrète : la carte du maillage se pose par-dessus, à droite, et deux
     éléments à pleine force au même endroit se brouilleraient */
  opacity: 0.42;
}

/* Le texte du bloc passe en clair : les classes de base visent des
   couleurs d'encre sur fond clair. */
.tete-page--sombre .tete-page__intro {
  color: color-mix(in srgb, var(--c-on-accent) 78%, transparent);
}

.tete-page--sombre .eyebrow {
  color: color-mix(in srgb, var(--c-on-accent) 70%, transparent);
}

.tete-page--sombre .eyebrow::before {
  background: var(--c-action);
}

.tete-page--sombre .info-cle dt {
  color: color-mix(in srgb, var(--c-on-accent) 55%, transparent);
}

/* Texte à gauche, carte du maillage à droite. La colonne de la carte est
   plafonnée : au-delà, elle écrase le titre de l'antenne. */
.tete-page__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(38%, 400px);
  gap: clamp(var(--sp-6), 5vw, var(--sp-9));
  align-items: center;
}

.tete-page__carte {
  /* la carte respire un peu à l'écart du bord droit */
  padding-right: var(--sp-3);
}

/* ---------- Carte du maillage sur fond sombre ----------
   Les couleurs de base visent une encre foncée sur fond clair : filets,
   libellés et contours des points disparaîtraient ici. */

.tete-page--sombre .carte-territoire__relief,
.tete-page--sombre .carte-territoire__liaison {
  stroke: color-mix(in srgb, var(--c-on-accent) 24%, transparent);
}

.tete-page--sombre .carte-pt__point {
  fill: var(--c-on-accent);
  stroke: transparent;
}

.tete-page--sombre .carte-pt text {
  fill: color-mix(in srgb, var(--c-on-accent) 76%, transparent);
}

.tete-page--sombre .carte-pt__siege {
  fill: color-mix(in srgb, var(--c-on-accent) 50%, transparent);
}

/* l'antenne courante ressort en turquoise, seule couleur du bloc */
.tete-page--sombre .carte-pt.est-actif .carte-pt__point,
.tete-page--sombre .carte-pt:hover .carte-pt__point {
  fill: var(--c-action);
  stroke: var(--c-action);
}

.tete-page--sombre .carte-pt.est-actif text {
  fill: var(--c-on-accent);
}

.tete-page--sombre .carte-pt__anneau {
  stroke: var(--c-action);
}

/* Galerie à cheval : la bande remonte sur le bandeau sombre, dont elle
   mord la moitié basse. Ce n'est plus une section — pas de padding de
   section, seulement la marge basse qui la sépare du bloc suivant.
   Le `z-index` la fait passer devant le fond sombre ; l'ombre décolle les
   visuels du noir sur lequel ils empiètent. */
/* Le bandeau réserve la hauteur du chevauchement sous son texte, mais
   seulement quand une galerie suit : sinon les antennes sans visuels
   auraient un grand vide sombre en bas. */
.tete-page--sombre:has(+ .galerie-chevauchee) {
  padding-bottom: clamp(148px, 16vw, 210px);
}

.galerie-chevauchee {
  position: relative;
  z-index: 1;
  margin-top: clamp(-104px, -7vw, -48px);
  margin-bottom: clamp(40px, 6vw, 72px);
}

.galerie-chevauchee .ph {
  box-shadow: 0 12px 32px var(--c-shadow-fort);
}

/* ---------- Bande de chiffres ---------- */

.chiffres {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block: 1px solid var(--c-hairline);
}

.chiffres__item {
  padding: var(--sp-6) var(--sp-5);
  border-left: 1px solid var(--c-hairline);
}

.chiffres__item:first-child {
  border-left: none;
}

.chiffres__nombre {
  font-size: var(--fs-3xl);
  display: block;
}

.chiffres__legende {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-secondary);
}

/* ---------- Lignes de liste (antennes, agenda, actus) ---------- */

.lignes {
  border-top: 1px solid var(--c-line);
}

.ligne {
  display: grid;
  align-items: center;
  gap: var(--sp-5);
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--c-hairline);
  transition: background 0.15s ease;
}

a.ligne:hover {
  background: var(--c-surface);
}

.ligne__titre {
  font-size: var(--fs-xl);
}

.ligne__fleche {
  font-size: var(--fs-lg);
  color: var(--c-faint);
  justify-self: end;
}

a.ligne:hover .ligne__fleche {
  color: var(--c-text);
}

.ligne--antenne {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 2.2fr) auto auto;
}

/* Variante pour colonne étroite (accueil) : nom et types empilés */
.ligne--antenne-compacte {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
}

.ligne__bloc {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ligne--antenne-compacte .ligne__titre {
  /* deux lignes au maximum, jamais plus */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-wrap: balance;
}

.ligne__types {
  font-size: var(--fs-sm);
  line-height: 1.4;
}

.ligne__frequence {
  font-size: var(--fs-sm);
  white-space: nowrap;
}

.ligne--agenda {
  grid-template-columns: auto minmax(0, 2.4fr) minmax(0, 1.2fr) auto auto;
}

/* les lieux sont centrés dans leur colonne : alignés à gauche, des noms de
   longueurs très inégales donnaient une colonne en escalier */
.ligne--agenda__lieu {
  text-align: center;
}

.ligne--actu {
  grid-template-columns: 180px auto minmax(0, 1fr) auto;
}

/* ---------- Bloc date ---------- */

.bloc-date {
  width: 68px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  text-align: center;
  padding: var(--sp-2) 0 var(--sp-1);
  background: var(--c-base);
}

.bloc-date__jour {
  font-size: 30px;
  line-height: 1;
  display: block;
}

.bloc-date__mois {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-secondary);
  margin-top: 3px;
}

/* ---------- Bandeau inversé ---------- */

/* Le dégradé plein s'autorise ici : le titre et le texte restent calés à
   gauche, sur la moitié marine/pétrole — la droite (actions ou photo)
   peut monter jusqu'au turquoise vif. */
.bandeau {
  background: var(--g-accent);
  color: var(--c-on-accent);
  border-radius: var(--r-lg);
  padding: clamp(32px, 5vw, 56px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-7);
}

/* Bandeau illustré : la photo occupe la moitié droite et se fond dans le
   marine avant d'atteindre le texte. Un masque plutôt qu'une colonne
   d'image — le bandeau garde sa mise en page et ses proportions. */
.bandeau--illustre {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.bandeau--illustre::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bandeau-photo, url('/photos/hero-trail-coutach.jpg')) center / cover no-repeat;
  mask-image: linear-gradient(to left, #000 0, transparent 62%);
  -webkit-mask-image: linear-gradient(to left, #000 0, transparent 62%);
  opacity: 0.6;
}

.bandeau__titre {
  font-size: var(--fs-2xl);
  max-width: 20ch;
}

.bandeau__texte {
  margin-top: var(--sp-3);
  max-width: 52ch;
  color: color-mix(in srgb, var(--c-on-accent) 75%, transparent);
}

.bandeau__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  flex: none;
}

/* ---------- Fiches ---------- */

.fiche {
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  background: var(--c-base);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  transition: border-color 0.15s ease;
}

a.fiche:hover {
  border-color: var(--c-vif);
}

.fiche__titre {
  font-size: var(--fs-xl);
}

.fiche__texte {
  color: var(--c-secondary);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

/* Visuel de carte, pleine largeur : marges négatives pour annuler le
   padding de la carte, ratio et recadrage imposés. Toutes les images ont
   donc exactement les mêmes dimensions, quel que soit leur format
   d'origine — c'est `object-fit: cover` qui absorbe l'écart. */
.fiche__photo {
  display: block;
  width: calc(100% + var(--sp-5) * 2);
  /* le reset global pose `img { max-width: 100% }`, ce qui écrêtait cette
     largeur à la boîte de contenu : l'image débordait à gauche par sa marge
     négative mais s'arrêtait avant le bord droit. */
  max-width: none;
  height: auto;
  margin: calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) 0;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center;
  border-radius: var(--r-md) var(--r-md) 0 0;
}

/* Carte à vignette latérale : image à gauche sur toute la hauteur, texte
   à droite. La largeur de la vignette est fixe et non proportionnelle —
   les cartes changent de largeur selon le nombre de colonnes de la
   grille, une valeur en % donnerait des vignettes inégales d'une rupture
   à l'autre. Le ratio 9/16 fixe la hauteur minimale de la carte ; si le
   texte la dépasse, l'image s'étire et recadre. */
.fiche--laterale {
  display: grid;
  /* deux tiers de la largeur d'origine (88 / 12vw / 124) */
  grid-template-columns: clamp(59px, 8vw, 83px) minmax(0, 1fr);
  gap: var(--sp-4);
  padding: 0;
  overflow: hidden;
}

.fiche__vignette {
  width: 100%;
  height: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  display: block;
}

.fiche__corps {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-5) var(--sp-5) 0;
  min-width: 0;
}

/* Chapo tronqué : toutes les cartes d'une rangée gardent la même hauteur */
.fiche__extrait {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.fiche__pied {
  margin-top: auto;
  padding-top: var(--sp-3);
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-faint);
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
}

/* Le compteur d'antennes ne se coupe jamais ; c'est le public qui cède. */
.fiche__pied > :first-child {
  min-width: 0;
}

.fiche__pied > :last-child {
  white-space: nowrap;
  flex: none;
}

/* ---------- Boutique ---------- */

.article__nom {
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.25;
}

.article__pied {
  margin-top: auto;
  padding-top: var(--sp-3);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}

.article__prix {
  font-size: var(--fs-xl);
}

.article__stock {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: right;
}

/* ---------- Fiche produit ---------- */

.produit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: start;
}

.produit__visuels {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  position: sticky;
  top: calc(var(--h-entete) + var(--sp-5));
}

.produit__vignettes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
}

.produit__infos {
  display: flex;
  flex-direction: column;
}

.produit__nom {
  font-size: var(--fs-3xl);
  max-width: 16ch;
}

.produit__prix {
  font-size: var(--fs-2xl);
  margin-top: var(--sp-3);
}

.produit__note {
  align-self: flex-start;
  margin-top: var(--sp-4);
}

.produit__description {
  margin-top: var(--sp-5);
}

.produit__champ {
  margin-top: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.produit__label {
  font-size: var(--fs-xs);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-faint);
}

.compteur {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  align-self: flex-start;
}

.compteur__bouton {
  width: 44px;
  height: 44px;
  font-size: var(--fs-lg);
  line-height: 1;
}

.compteur__bouton:hover {
  background: var(--c-surface);
}

.compteur__valeur {
  min-width: 44px;
  text-align: center;
  font-weight: 650;
  border-inline: 1px solid var(--c-hairline);
  line-height: 44px;
}

.produit__actions {
  margin-top: var(--sp-7);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  align-items: flex-start;
}

.produit__actions .btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.produit__details {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-hairline);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--c-secondary);
}

.produit__details dd {
  position: relative;
  padding-left: var(--sp-4);
}

.produit__details dd::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--c-faint);
}

.produit__retrait {
  margin-top: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--c-faint);
  max-width: 46ch;
}

/* ---------- Carte encadrant ---------- */

.carte-encadrant {
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-base);
  display: flex;
  flex-direction: column;
}

/* Portrait en médaillon, comme les cases d'organigramme : le même visage
   se retrouve d'une page à l'autre. La seconde ligne du sélecteur reprend
   la largeur avec un cran de spécificité de plus, sinon le width: 100%
   d'img.ph (wp.css, chargé après) étalerait la photo — le placeholder,
   lui, suivrait. */
.carte-encadrant .ph,
.carte-encadrant img.ph {
  --carte-portrait: 132px;
  width: var(--carte-portrait);
  border-radius: 50%;
  margin: var(--sp-5) auto 0;
  border: 1px solid var(--c-hairline);
}

.carte-encadrant__corps {
  padding: var(--sp-4) var(--sp-4) var(--sp-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  text-align: center;
}

/* Sans portrait, le corps occupe toute la carte et se centre : dans une
   rangée alignée sur la carte la plus haute, le nom ne reste pas collé en
   haut d'un grand vide. Avec portrait, le corps garde sa place sous le
   médaillon. */
.carte-encadrant--sans-portrait .carte-encadrant__corps {
  flex: 1;
  justify-content: center;
  padding-block: var(--sp-5);
}

.carte-encadrant__nom {
  font-size: var(--fs-lg);
}

.carte-encadrant__role {
  font-size: var(--fs-sm);
  color: var(--c-secondary);
}

.carte-encadrant__diplomes {
  font-size: var(--fs-xs);
  color: var(--c-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.carte-encadrant__email {
  font-size: var(--fs-sm);
}

.carte-encadrant__email a {
  color: var(--c-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.carte-encadrant__email a:hover {
  color: var(--c-text);
}

.carte-encadrant__antennes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-1);
  margin-top: var(--sp-1);
}

/* ---------- Liens réseaux ---------- */

.reseaux {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.reseaux__titre {
  font-size: var(--fs-xs);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-faint);
}

.reseaux__liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.reseaux--boutons .reseaux__liste {
  gap: var(--sp-3);
}

/* Pseudos et noms de groupes : pas de capitales forcées */
.btn--marque {
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: var(--fs-base);
  padding: 13px 20px;
}

.btn svg {
  flex: none;
}


.reseau {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 7px 13px;
  border: 1px solid var(--c-hairline);
  border-radius: 999px;
  font-size: var(--fs-sm);
  font-weight: 550;
  color: var(--c-secondary);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.reseau svg {
  flex: none;
}

.reseau:hover {
  background: var(--g-accent-profond);
  border-color: var(--c-accent);
  color: var(--c-on-accent);
}

/* ---------- Organigramme d'antenne ---------- */

/* Trois rangs reliés par des filets : responsable, encadrement, support.
   Le rang de tête est en inversion — c'est le seul marqueur de hiérarchie
   possible sans couleur. Un rang à une seule case perd sa barre
   horizontale et ne garde que la tige : sobre, pas cassé. */

.orga {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* Plusieurs organigrammes sous la même section : côte à côte, un par
   colonne, chacun annoncé par son titre. Le schéma et les coordonnées
   partagent la même grille — mêmes colonnes, même conteneur — pour que
   l'on descende d'une pratique à son numéro sans changer de colonne.
   Sous 900 px (ou dès qu'une colonne descend sous 320 px) ils
   s'empilent, séparés par un filet. */
/* Seuls les schémas et leurs coordonnées débordent du conteneur : un
   organigramme à plusieurs colonnes étouffe dans 1200 px, alors que le
   titre et le chapeau de la section gardent leur largeur de lecture.
   Le débord est borné par la fenêtre, gouttière comprise. */
.colonnes-orga,
.orga-pleine {
  --largeur-colonnes: min(1560px, calc(100vw - var(--gutter) * 2));
  width: var(--largeur-colonnes);
  margin-inline: calc((100% - var(--largeur-colonnes)) / 2);
}

/* Un schéma large tient tout seul sur sa ligne, au-dessus des colonnes,
   séparé d'elles par un filet — le même vocabulaire que les filets
   verticaux qui séparent les colonnes entre elles. */
.orgas > * + *,
.contacts-orga > * + * {
  margin-top: var(--sp-7);
  padding-top: var(--sp-7);
  border-top: 1px solid var(--c-hairline);
}

.colonnes-orga {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--sp-7) var(--sp-8);
  align-items: start;
}

.colonnes-orga > * + * {
  border-inline-start: 1px solid var(--c-hairline);
  padding-inline-start: var(--sp-8);
}

/* Au-delà de quatre responsabilités (colonnes-orga--3, posée par le
   gabarit), la grille tient forcément sur deux rangs. Le filet vertical
   ci-dessus suppose une ligne unique : sans les règles qui suivent, la
   première colonne du second rang hériterait d'une barre orpheline et
   les deux rangs se toucheraient sans séparation. Le nombre de colonnes
   est donc explicite à chaque palier — `auto-fit` le laisserait varier
   avec la largeur, et les :nth-child ne tomberaient plus en face des
   vraies têtes de ligne. */
@media (min-width: 901px) and (max-width: 1239px) {
  .colonnes-orga--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .colonnes-orga--3 > :nth-child(2n + 1) {
    border-inline-start: 0;
    padding-inline-start: 0;
  }

  .colonnes-orga--3 > :nth-child(n + 3) {
    padding-top: var(--sp-7);
    border-top: 1px solid var(--c-hairline);
  }
}

/* Trois colonnes dès que le conteneur tient 3 × 320 px, gouttières et
   retraits de filet compris. */
@media (min-width: 1240px) {
  .colonnes-orga--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .colonnes-orga--3 > :nth-child(3n + 1) {
    border-inline-start: 0;
    padding-inline-start: 0;
  }

  .colonnes-orga--3 > :nth-child(n + 4) {
    padding-top: var(--sp-7);
    border-top: 1px solid var(--c-hairline);
  }
}

/* Numéros secondaires : les coachs sous le responsable. Trois colonnes
   alignées d'une ligne à l'autre (les <li> disparaissent dans la grille,
   d'où les rôles ARIA sur la liste), l'ensemble centré sous le QR. */
.contacts-secondaires__titre {
  margin-top: var(--sp-4);
  margin-bottom: 0;
}

.contacts-secondaires {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: var(--sp-2) var(--sp-6);
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  text-align: left;
  font-size: var(--fs-sm);
}

.contacts-secondaires > li {
  display: contents;
}

.contacts-secondaires__nom {
  font-weight: 650;
}

.contacts-secondaires__tel,
.contacts-secondaires__mail {
  color: var(--c-secondary);
}

@media (max-width: 620px) {
  .contacts-secondaires {
    grid-template-columns: auto;
    justify-items: center;
    text-align: center;
    gap: 0;
  }

  .contacts-secondaires > li {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: var(--sp-3);
  }
}

/* Colonne de coordonnées : centrée sous son schéma, du titre au QR. */
.contact-orga {
  /* Cible du bouton « Contacter » et des liens du planning : l'en-tête
     collant ne doit pas manger le haut du bloc. */
  scroll-margin-top: calc(var(--h-entete) + var(--sp-5));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
}

/* En colonnes, le QR n'a plus de place à sa droite : l'appel passe
   dessous et la flèche, qui ne pointerait plus rien, s'efface. */
.contacts-orga--multi .contact-whatsapp__appel {
  position: static;
  transform: none;
  margin: var(--sp-2) 0 0;
  justify-content: center;
  text-align: center;
  max-width: 24ch;
}

.contacts-orga--multi .contact-whatsapp__fleche {
  display: none;
}

.contacts-orga--multi .contact-whatsapp__qr {
  flex-direction: column;
  align-items: center;
}

@media (max-width: 900px) {
  .colonnes-orga > * + * {
    border-inline-start: 0;
    padding-inline-start: 0;
    padding-top: var(--sp-7);
    border-top: 1px solid var(--c-hairline);
  }
}

.orga__titre {
  margin-bottom: var(--sp-5);
}

.orga__rang {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
}

.orga__rang:not(.orga__rang--tete) {
  padding-top: calc(var(--sp-6) * 2);
}

/* tige descendante depuis le rang précédent */
.orga__rang:not(.orga__rang--tete)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: var(--sp-6);
  background: var(--c-line);
}

.orga__cellule {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  max-width: 270px;
  padding-inline: var(--sp-3);
  display: flex;
}

.orga__rang--tete .orga__cellule {
  flex: 0 1 auto;
  max-width: 340px;
}

/* barre horizontale qui relie les cases d'un même rang */
.orga__rang:not(.orga__rang--tete) .orga__cellule::before {
  content: '';
  position: absolute;
  top: calc(-1 * var(--sp-6));
  left: 0;
  right: 0;
  height: 1px;
  background: var(--c-line);
}

.orga__rang:not(.orga__rang--tete) .orga__cellule:first-child::before {
  left: 50%;
}

.orga__rang:not(.orga__rang--tete) .orga__cellule:last-child::before {
  right: 50%;
}

.orga__rang:not(.orga__rang--tete) .orga__cellule:only-child::before {
  display: none;
}

/* tige montante de chaque case */
.orga__rang:not(.orga__rang--tete) .orga__cellule::after {
  content: '';
  position: absolute;
  top: calc(-1 * var(--sp-6));
  left: 50%;
  width: 1px;
  height: var(--sp-6);
  background: var(--c-line);
}

.orga__case {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--sp-4);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-base);
  text-align: center;
}

.orga__rang--tete .orga__case {
  background: var(--g-accent-profond);
  border-color: var(--c-accent);
  color: var(--c-on-accent);
  padding-inline: var(--sp-6);
}

.orga__rang--support .orga__case {
  background: var(--c-surface);
  border-color: var(--c-hairline);
}

/* Poste à pourvoir : la case existe, elle attend un nom. */
/* Coordonnées signalées à l'arrivée d'un lien du planning : un anneau
   tenu le temps qu'on les repère, puis estompé. Pas de mouvement — au
   bout d'un défilement, ce qu'il faut c'est retrouver le numéro, pas
   voir la carte gesticuler. L'outline et son décalage sont hors flux :
   rien ne bouge autour. */
@keyframes orga-repere {
  0%, 68% {
    outline-color: var(--c-action);
  }

  100% {
    outline-color: transparent;
  }
}

.contact-orga.est-repere {
  outline: 3px solid transparent;
  outline-offset: var(--sp-4);
  border-radius: var(--r-md);
  animation: orga-repere 2.4s ease-out;
}

/* Personne sans photo : rien ne remplace le médaillon, le texte se
   centre dans la hauteur que les cases à portrait imposent au rang. */
.orga__case--sans-portrait {
  justify-content: center;
}

.orga__case--vide {
  justify-content: center;
  border-style: dashed;
  background: transparent;
  color: var(--c-faint);
}

.orga__nom--vide {
  font-weight: 650;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Bloc « venir essayer » : conclusion centrée de l'organigramme, sans cadre */
.antenne__essayer {
  margin-top: var(--sp-9);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--c-hairline);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-4);
}

.antenne__essayer .eyebrow {
  justify-content: center;
  margin-bottom: 0;
}

.antenne__essayer-titre {
  font-size: var(--fs-2xl);
  max-width: 20ch;
}

.antenne__essayer-texte {
  max-width: 56ch;
  color: var(--c-secondary);
}

.antenne__essayer-infos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4) var(--sp-8);
  margin-top: var(--sp-2);
}

.antenne__essayer .reseaux__liste {
  justify-content: center;
}

/* Contact WhatsApp du responsable : le bouton sur mobile, le QR sur
   ordinateur. Les deux sont rendus, seul le CSS tranche — la page passe
   par un cache, elle ne peut pas dépendre du terminal côté serveur. */
/* Le QR reste seul dans le flux, donc centré comme le reste du bloc :
   l'appel qui l'accompagne est sorti du flux et posé à sa droite. */
.contact-whatsapp__qr {
  position: relative;
  display: flex;
  justify-content: center;
}

/* Le cartouche blanc porte le code puis sa signature : les deux
   partagent le même fond, pour qu'on lise « WhatsApp » comme la légende
   du carré juste au-dessus et non comme un élément flottant. */
/* Carré strict : la signature ajoutée sous le code allongeait le
   cartouche. Côté et hauteur de signature sont posés en dur plutôt
   qu'en aspect-ratio et pistes « auto » — la carte est parfois un
   élément de flex en ligne (organigramme unique), où le stretch du
   conteneur écrase un aspect-ratio, et une piste de hauteur indéfinie
   ne sait pas résoudre les pourcentages du SVG. Tout est définitif ici,
   donc rien à négocier. La carte s'élargit de 152 à 176 px pour que le
   code garde la taille qu'il avait, celle à laquelle un téléphone le
   lit sans hésiter. */
.qr {
  --qr-cote: 176px;
  --qr-signature: 16px;
  width: var(--qr-cote);
  height: var(--qr-cote);
  align-self: center;
  flex: 0 0 auto;
  display: grid;
  grid-template-rows: 1fr var(--qr-signature);
  justify-items: center;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-md);
  /* Blanc franc et modules encre : un lecteur de QR veut du contraste,
     pas le blanc cassé de la page. */
  background: #fff;
  color: var(--p-marine);
}

/* La rangée du haut a une hauteur définie (côté moins signature, gap
   et retraits) : le code s'y cale en hauteur et déduit sa largeur de
   son ratio, au lieu d'être étiré sur la largeur, plus grande. */
.qr__code {
  display: block;
  height: 100%;
  width: auto;
  aspect-ratio: 1;
  min-height: 0;
}

/* Vert de marque : c'est le seul endroit du thème où WhatsApp se signe
   sur fond blanc, hors du bouton en pilule. */
.qr__marque {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--m-whatsapp);
  font-size: var(--fs-sm);
  font-weight: 650;
  line-height: 1;
}

/* Appel manuscrit posé à droite du QR : la flèche revient vers lui. */
.contact-whatsapp__appel {
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  margin-left: var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: max-content;
  max-width: 26ch;
  text-align: left;
  font-size: var(--fs-sm);
  color: var(--c-text);
}

.contact-whatsapp__fleche {
  flex: none;
  width: 56px;
  height: auto;
  color: var(--c-faint);
  /* Léger flottement pour attirer l'œil sur le QR sans clignoter. */
  animation: flotte-fleche 2.8s ease-in-out infinite;
}

@keyframes flotte-fleche {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-5px);
  }
}

/* Écran étroit ou pointeur tactile : on ne scanne pas son propre écran,
   le bouton reprend la main. Si le terminal n'annonce aucun pointeur,
   aucune des deux règles ne s'applique et les deux restent visibles. */
@media (max-width: 900px), (pointer: coarse) {
  .contact-whatsapp__qr {
    display: none;
  }
}

@media (min-width: 901px) and (pointer: fine) {
  .contact-whatsapp__bouton {
    display: none;
  }
}

.orga__portrait {
  /* Taille unique des visages — placeholder comme photo, tête comprise :
     une seule valeur à bouger. */
  --orga-portrait: 108px;
  width: var(--orga-portrait);
  border-radius: 50%;
  margin: 0 auto var(--sp-2);
  border: 1px solid var(--c-hairline);
}

/* Une photo de la médiathèque arrive avec le width: 100% d'img.ph
   (wp.css, chargé après) : on le reprend ici avec un cran de
   spécificité de plus, sinon seul le placeholder suivait la taille. */
.orga__case img.orga__portrait {
  width: var(--orga-portrait);
}

/* Descente vers les coordonnées, en pied de schéma : détachée des cases
   pour se lire comme une suite du schéma, pas comme une case de plus.
   Un simple lien de texte — un bouton pèserait autant que le schéma. */
.orga__action {
  margin-top: var(--sp-4);
  text-align: center;
  font-size: var(--fs-sm);
}

.orga__action a {
  color: var(--c-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.orga__action a:hover {
  color: var(--c-text);
}

/* La tête ne se distingue plus que par sa bordure : un portrait plus
   large qu'un autre déséquilibrait la grille des visages. */
.orga__rang--tete .orga__portrait {
  border-color: color-mix(in srgb, var(--c-on-accent) 35%, transparent);
}

.orga__nom {
  font-weight: 700;
  font-size: var(--fs-base);
}

.orga__rang--tete .orga__nom {
  font-size: var(--fs-lg);
}

.orga__role {
  font-size: var(--fs-xs);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-faint);
}

.orga__rang--tete .orga__role {
  color: color-mix(in srgb, var(--c-on-accent) 70%, transparent);
}

.orga__specialites {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin-top: var(--sp-2);
}

.orga__specialites li {
  font-size: var(--fs-xs);
  line-height: 1.4;
  padding: 2px 8px;
  border: 1px solid var(--c-hairline);
  border-radius: 999px;
  color: var(--c-secondary);
}
/* ---------- Planning hebdo ---------- */

.planning {
  border-top: 2px solid var(--c-line);
}

.planning__jour {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--c-hairline);
}

.planning__nom-jour {
  font-size: var(--fs-lg);
  text-transform: uppercase;
  padding-top: 4px;
}

.planning__creneau {
  display: grid;
  grid-template-columns: 130px minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-4);
  padding-block: var(--sp-2);
  align-items: baseline;
}

.planning__creneau + .planning__creneau {
  border-top: 1px solid var(--c-hairline);
}

.planning__heures {
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.planning__pratique {
  font-weight: 600;
}

.planning__pratique a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.planning__public {
  color: var(--c-secondary);
  font-size: var(--fs-sm);
}

.planning__lieu {
  color: var(--c-faint);
  font-size: var(--fs-sm);
}

/* Vue globale « La semaine au club » : une colonne de plus, l'antenne */
.planning--global .planning__creneau {
  grid-template-columns: 130px minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.8fr);
}

.planning__antenne {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.planning__antenne a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------- Carte du territoire ---------- */

.carte-territoire {
  width: 100%;
  height: auto;
  display: block;
}

.carte-territoire__relief {
  stroke: var(--c-hairline);
  fill: none;
  stroke-width: 1;
}

.carte-territoire__liaison {
  stroke: var(--c-hairline);
  stroke-dasharray: 3 5;
  stroke-width: 1;
}

.carte-pt {
  cursor: pointer;
}

/* ATTENTION — ne pas revenir à un sélecteur `.carte-pt circle` ici : il est
   plus spécifique (une classe + un type) que `.carte-pt__halo` ou
   `.carte-pt__zone`, et repeignait donc les halos ET la zone de clic en
   disque opaque, par-dessus tout le reste. On cible chaque classe. */
.carte-pt__point {
  fill: var(--c-base);
  stroke: var(--c-line);
  stroke-width: 1.5;
  transition: fill 0.15s ease;
  /* ombre portée, pour que le point se détache du relief. Le point respire
     aussi : sans ça, seule l'onde bouge et il paraît figé au centre. */
  filter: drop-shadow(0 2px 4px var(--c-shadow-fort));
  transform-box: fill-box;
  transform-origin: center;
  animation: pt-respire 2.6s ease-in-out infinite;
}

/* Halo qui scintille : signale que le point est cliquable, en permanence
   et sans survol. Turquoise pour ressortir sur le fond clair, deux ondes
   déphasées, décalées d'un point à l'autre pour que la carte respire au
   lieu de clignoter d'un bloc. */
.carte-pt__halo {
  fill: none;
  stroke: var(--c-action);
  stroke-width: 1.5;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: scintille 2.6s ease-out infinite;
  pointer-events: none;
}

@keyframes scintille {
  0% {
    transform: scale(0.75);
    opacity: 0;
  }
  15% {
    opacity: 0.85;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}

@keyframes pt-respire {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.14);
  }
}

/* Survol : on accentue au lieu d'arrêter — l'onde s'accélère, s'épaissit,
   et le point passe au turquoise plein. */
.carte-pt:hover .carte-pt__halo,
.carte-pt:focus-visible .carte-pt__halo {
  animation-duration: 1.2s;
  stroke-width: 2.5;
}

.carte-pt:hover .carte-pt__point,
.carte-pt:focus-visible .carte-pt__point {
  animation-duration: 1.2s;
  fill: var(--c-action);
}

/* zone de clic élargie : le point seul est trop petit à la souris.
   Invisible — c'est elle que `.carte-pt circle` repeignait en disque
   opaque de 22 px de rayon, masquant point et halos. */
.carte-pt__zone {
  fill: transparent;
  stroke: none;
}

@media (prefers-reduced-motion: reduce) {
  .carte-pt__point {
    animation: none;
  }

  /* pas d'onde, mais le halo reste dessiné : le point doit rester
     repérable comme cliquable sans recourir au mouvement */
  .carte-pt__halo {
    animation: none;
    opacity: 0.5;
    transform: scale(1.7);
  }
}


.carte-pt text {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 550;
  fill: var(--c-secondary);
}

.carte-pt__anneau {
  fill: none;
  stroke: var(--c-line);
  stroke-width: 1;
}

.carte-pt.est-actif .carte-pt__point {
  fill: var(--c-accent);
  stroke: var(--c-accent);
}

.carte-pt.est-actif text {
  fill: var(--c-text);
  font-weight: 700;
}

.carte-pt__siege {
  font-size: 10px;
  letter-spacing: 0.1em;
  fill: var(--c-faint);
  text-transform: uppercase;
}

/* ---------- Sheet ---------- */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 80;
}

.sheet__fond {
  position: absolute;
  inset: 0;
  background: var(--c-scrim);
  animation: apparition 0.2s ease;
}

.sheet__panneau {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(460px, 92vw);
  background: var(--c-base);
  border-left: 1px solid var(--c-line);
  display: flex;
  flex-direction: column;
  animation: sheet-lateral 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.sheet__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border-bottom: 1px solid var(--c-hairline);
}

.sheet__titre {
  font-size: var(--fs-xl);
}

.sheet__fermer {
  width: 40px;
  height: 40px;
  font-size: 20px;
  line-height: 1;
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-sm);
}

.sheet__fermer:hover {
  border-color: var(--c-line);
}

.sheet__corps {
  padding: var(--sp-5);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

@keyframes apparition {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes sheet-lateral {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes sheet-montee {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* ---------- Chronologie ---------- */

.chrono {
  border-left: 1px solid var(--c-line);
  padding-left: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  max-width: 60ch;
}

.chrono__item {
  position: relative;
}

.chrono__item::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--sp-6) - 4.5px);
  top: 10px;
  width: 8px;
  height: 8px;
  background: var(--c-base);
  border: 1.5px solid var(--c-line);
  border-radius: 50%;
}

.chrono__annee {
  font-size: var(--fs-xl);
  display: block;
}

.chrono__texte {
  margin-top: var(--sp-2);
  color: var(--c-secondary);
}

/* ---------- Tableaux ---------- */

.tableau {
  width: 100%;
  border-collapse: collapse;
}

.tableau th {
  text-align: left;
  font-size: var(--fs-xs);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-secondary);
  padding: var(--sp-3) var(--sp-4) var(--sp-3) 0;
  border-bottom: 1px solid var(--c-line);
}

.tableau td {
  padding: var(--sp-4) var(--sp-4) var(--sp-4) 0;
  border-bottom: 1px solid var(--c-hairline);
  vertical-align: top;
}

.tableau td.montant {
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  white-space: nowrap;
}

/* ---------- Formulaires (maquette) ---------- */

.formulaire {
  display: grid;
  gap: var(--sp-5);
  max-width: 560px;
}

.champ {
  display: grid;
  gap: 6px;
}

.champ label {
  font-size: var(--fs-sm);
  font-weight: 650;
}

.champ input,
.champ select,
.champ textarea {
  padding: 12px 14px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-base);
  width: 100%;
}

.champ textarea {
  min-height: 130px;
  resize: vertical;
}

.champ__aide {
  font-size: var(--fs-xs);
  color: var(--c-faint);
}

.note-maquette {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-faint);
  border: 1px dashed var(--c-hairline);
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
  display: inline-block;
}

/* ---------- Sommaire (/_ecrans) ---------- */

.sommaire-groupe {
  margin-top: var(--sp-7);
}

.sommaire-groupe h2 {
  font-size: var(--fs-lg);
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}

.sommaire-groupe ul {
  border-top: 1px solid var(--c-line);
}

.sommaire-groupe li a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-2);
  border-bottom: 1px solid var(--c-hairline);
}

.sommaire-groupe li a:hover {
  background: var(--c-surface);
}

.sommaire-groupe code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: var(--fs-sm);
  color: var(--c-faint);
  word-break: break-all;
  text-align: right;
}

.carte-territoire {
  overflow: hidden;
}

/* ---------- Divers ---------- */

.pile {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.rang {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

.encadre {
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: var(--sp-5);
}

.encadre--doux {
  border-color: var(--c-hairline);
}

.info-cle {
  display: grid;
  gap: 2px;
}

.info-cle dt {
  font-size: var(--fs-xs);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-faint);
}

.info-cle dd {
  font-weight: 550;
}

.avertissement {
  border-left: 3px solid var(--c-danger);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface);
  font-size: var(--fs-sm);
}

.avertissement strong {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ============================================================
   RESPONSIVE — 1200 / 900 / 600
   ============================================================ */

@media (max-width: 1200px) {
  .grille--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* La nav se condense avant de basculer sur le burger à 900px */
  .nav-principale__lien {
    padding-inline: 8px;
    letter-spacing: 0.04em;
  }

}

@media (max-width: 900px) {
  .nav-principale,
  .entete__cta {
    display: none;
  }

  .entete__burger {
    display: flex;
  }

  .grille--4,
  .grille--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pied__haut {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-6);
  }

  .bandeau {
    flex-direction: column;
    align-items: flex-start;
  }

  /* en colonne, le texte occupe toute la largeur : la photo se fond
     par le bas et non plus par la gauche */
  .bandeau--illustre::before {
    mask-image: linear-gradient(to bottom, transparent 38%, #000 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 38%, #000 100%);
    opacity: 0.45;
  }

  /* même raison sur la tête de page sombre : plus de place à droite */
  .tete-page__photo {
    mask-image: linear-gradient(to bottom, transparent 45%, #000 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 45%, #000 100%);
    opacity: 0.5;
  }

  .tete-page__grille {
    grid-template-columns: minmax(0, 1fr);
  }

  /* La carte disparaît de l'en-tête sur petit écran : elle empilerait un
     bloc haut avant le contenu, et la même carte réapparaît plus bas dans
     « Autour de cette antenne ». */
  .tete-page__carte {
    display: none;
  }

  .chiffres {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .chiffres__item {
    border-left: none;
    border-top: 1px solid var(--c-hairline);
  }

  .chiffres__item:nth-child(-n + 2) {
    border-top: none;
  }

  .chiffres__item:nth-child(2n) {
    border-left: 1px solid var(--c-hairline);
  }

  /* L'organigramme passe de l'arbre étalé à une colonne à rail gauche */
  .orga__rang {
    flex-direction: column;
    align-items: stretch;
  }

  .orga__rang:not(.orga__rang--tete) {
    padding: var(--sp-5) 0 0 40px;
  }

  .orga__rang:not(.orga__rang--tete)::before {
    left: 20px;
    top: 0;
    bottom: 0;
    height: auto;
  }

  .orga__cellule {
    max-width: none;
    padding-inline: 0;
    margin-top: var(--sp-3);
  }

  .orga__cellule:first-child {
    margin-top: 0;
  }

  .orga__rang:not(.orga__rang--tete) .orga__cellule::after {
    display: none;
  }

  .orga__rang:not(.orga__rang--tete) .orga__cellule::before,
  .orga__rang:not(.orga__rang--tete) .orga__cellule:first-child::before,
  .orga__rang:not(.orga__rang--tete) .orga__cellule:last-child::before,
  .orga__rang:not(.orga__rang--tete) .orga__cellule:only-child::before {
    display: block;
    top: 24px;
    left: -20px;
    right: auto;
    width: 20px;
    height: 1px;
  }

  .orga__case {
    text-align: left;
  }

  .orga__portrait {
    margin-inline: 0;
  }

  .orga__specialites {
    justify-content: flex-start;
  }

  /* la liste des types de sorties, longue, cède avant la fréquence */
  .ligne--antenne { grid-template-columns: minmax(0, 1fr) auto auto; }
  .ligne--antenne .ligne--antenne__milieu { display: none; }

  .ligne--agenda { grid-template-columns: auto minmax(0, 1fr) auto; }
  .ligne--agenda .ligne--agenda__lieu,
  .ligne--agenda .ligne--agenda__type { display: none; }

  .ligne--actu { grid-template-columns: 140px minmax(0, 1fr) auto; }
  .ligne--actu .ligne--actu__meta { display: none; }

  /* la fiche produit passe en une colonne, visuels au-dessus */
  .produit {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
  }

  .produit__visuels {
    position: static;
  }

  .planning__jour {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-2);
  }
}

@media (max-width: 600px) {
  .grille--4,
  .grille--3,
  .grille--2 {
    grid-template-columns: minmax(0, 1fr);
  }

  .section__entete {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
  }

  .ligne--antenne {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .ligne--antenne .ligne--antenne__meta {
    display: none;
  }

  /* sur téléphone, on ne garde que le chiffre */
  .ligne__frequence-unite {
    display: none;
  }

  .ligne--actu {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .ligne--actu .ph {
    display: none;
  }

  .planning__creneau,
  .planning--global .planning__creneau {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-1) var(--sp-4);
  }

  .tableau .colonne-secondaire {
    display: none;
  }

  /* Boutons pleine largeur sur petit écran */
  .btn--grand {
    width: 100%;
    white-space: normal;
    text-align: center;
  }

  .hero-plein__actions,
  .bandeau__actions,
  .rang {
    width: 100%;
  }

  /* les liens réseaux mis en avant passent en pleine largeur */
  .reseaux--boutons,
  .reseaux--boutons .reseaux__liste,
  .reseaux--boutons .reseaux__liste li,
  .reseaux--boutons .btn {
    width: 100%;
  }


  /* Le sheet devient bottom sheet */
  .sheet__panneau {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-height: 84vh;
    border-left: none;
    border-top: 1px solid var(--c-line);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    animation: sheet-montee 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
}