@charset "UTF-8";
/* =====================================================================
   Waky Coaching — feuille unique.

   Deux thèmes de section, jamais deux feuilles : .nuit et .jour
   redéfinissent les mêmes jetons. Une section change d'ambiance en
   changeant de classe, rien d'autre ne bouge.

   Les jetons nomment un RÔLE (--fond, --texte, --accent), jamais un
   pigment : une couleur peut être remplacée sans relire la feuille.

   Palette relevée sur waky.be et sur le logotype :
     cyan du logo      #00ADC5      teal profond   #00829E
     bleu nuit du logo #024361      noir du thème  #181818
   ===================================================================== */

/* ── 1. Jetons ──────────────────────────────────────────────────────── */

:root {
  /* Les pigments de la marque. Ils ne sont jamais employés directement
     dans les règles : ils n'alimentent que les jetons de rôle. */
  --p-cyan:        #00c0da;   /* le cyan du logo, remonté en luminosité */
  --p-cyan-vif:    #3ad9ef;
  --p-teal:        #00829e;
  --p-nuit:        #024361;
  --p-noir:        #0a1014;
  --p-noir-2:      #101a20;
  --p-noir-3:      #18242c;
  --p-blanc:       #ffffff;
  --p-craie:       #f4f7f8;
  --p-craie-2:     #e7edef;
  --p-gris:        #5d6f78;

  /* Rythme */
  --pas: 8px;
  --marge-page: clamp(20px, 5vw, 72px);
  --largeur: 1280px;
  --largeur-texte: 68ch;
  --rayon: 18px;
  --rayon-s: 10px;
  --rayon-l: 28px;

  /* Mouvement */
  --vite: 180ms;
  --moyen: 340ms;
  --lent: 700ms;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-sortie: cubic-bezier(.4, 0, .2, 1);

  /* Typographie */
  --titre: 'Archivo', 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --corps: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Thème NUIT par défaut : le site s'ouvre dans le noir. */
  --fond:        var(--p-noir);
  --fond-2:      var(--p-noir-2);
  --fond-3:      var(--p-noir-3);
  --texte:       #eef4f6;
  --texte-2:     #a8bcc5;
  --texte-3:     #7c929c;
  --accent:      var(--p-cyan);
  --accent-vif:  var(--p-cyan-vif);
  --sur-accent:  #05242e;
  --liseré:      rgba(255, 255, 255, .11);
  --liseré-fort: rgba(255, 255, 255, .22);
  --voile:       rgba(10, 16, 20, .72);
  --ombre:       0 24px 60px -24px rgba(0, 0, 0, .9);
  --ombre-douce: 0 2px 20px -8px rgba(0, 0, 0, .7);
  --lueur:       0 0 0 1px rgba(0, 192, 218, .3), 0 18px 50px -20px rgba(0, 192, 218, .45);
}

/* Une section peut forcer son ambiance. Les deux classes redéfinissent
   exactement les mêmes jetons — c'est ce qui permet à un composant
   d'être écrit une seule fois et de fonctionner des deux côtés. */
.nuit {
  --fond:        var(--p-noir);
  --fond-2:      var(--p-noir-2);
  --fond-3:      var(--p-noir-3);
  --texte:       #eef4f6;
  --texte-2:     #a8bcc5;
  --texte-3:     #7c929c;
  --accent:      var(--p-cyan);
  --accent-vif:  var(--p-cyan-vif);
  --sur-accent:  #05242e;
  --liseré:      rgba(255, 255, 255, .11);
  --liseré-fort: rgba(255, 255, 255, .22);
  --voile:       rgba(10, 16, 20, .72);
  --ombre:       0 24px 60px -24px rgba(0, 0, 0, .9);
  --ombre-douce: 0 2px 20px -8px rgba(0, 0, 0, .7);
  --lueur:       0 0 0 1px rgba(0, 192, 218, .3), 0 18px 50px -20px rgba(0, 192, 218, .45);
  color-scheme: dark;
}

.jour {
  --fond:        var(--p-craie);
  --fond-2:      var(--p-blanc);
  --fond-3:      var(--p-craie-2);
  --texte:       #0d1a20;
  --texte-2:     #44585f;
  --texte-3:     var(--p-gris);
  --accent:      #046a85;                 /* le cyan assombri, lisible sur clair */
  --accent-vif:  var(--p-teal);
  --sur-accent:  #ffffff;
  --liseré:      rgba(2, 67, 97, .13);
  --liseré-fort: rgba(2, 67, 97, .26);
  --voile:       rgba(244, 247, 248, .8);
  --ombre:       0 24px 60px -30px rgba(2, 67, 97, .35);
  --ombre-douce: 0 2px 18px -10px rgba(2, 67, 97, .3);
  --lueur:       0 0 0 1px rgba(4, 106, 133, .22), 0 18px 46px -22px rgba(4, 106, 133, .35);
  color-scheme: light;
}

/* ── 2. Réinitialisation ────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* `manipulation` supprime le double-tap qui zoome — et les 300 ms
     d'attente qu'il impose avant chaque clic sur mobile. Le pincement,
     lui, reste possible : on n'enlève pas au visiteur son zoom. */
  touch-action: manipulation;
  scroll-padding-top: calc(var(--haut-entete, 76px) + 16px);
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--corps);
  font-size: clamp(15.5px, .35vw + 14.6px, 17px);
  font-weight: 400;
  line-height: 1.68;
  letter-spacing: .004em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

h1, h2, h3, h4, h5 {
  font-family: var(--titre);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.028em;
  margin: 0;
  font-stretch: 108%;
  text-wrap: balance;
}
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
blockquote, figure, dl, dd { margin: 0; }
address { font-style: normal; }

:focus-visible {
  outline: 2px solid var(--accent-vif);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--accent); color: var(--sur-accent); }

/* ── 3. Utilitaires de mise en page ─────────────────────────────────── */

.enveloppe {
  width: min(100% - var(--marge-page) * 2, var(--largeur));
  margin-inline: auto;
}
.enveloppe--etroite { width: min(100% - var(--marge-page) * 2, 920px); margin-inline: auto; }

.section {
  background: var(--fond);
  color: var(--texte);
  padding-block: clamp(64px, 9vw, 132px);
  position: relative;
}
.section--serree { padding-block: clamp(44px, 6vw, 84px); }
.section--sansHaut { padding-top: 0; }
.section--sansBas  { padding-bottom: 0; }

/* La couture entre deux ambiances : un trait de lumière très fin, pour
   que le passage nuit → jour ne soit pas une simple coupure franche. */
.section + .section::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--liseré-fort) 22%, var(--liseré-fort) 78%, transparent);
}

.pile > * + * { margin-top: var(--e, 16px); }

.masque-visuel {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── 4. Titres de section ───────────────────────────────────────────── */

.surtitre {
  font-family: var(--titre);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.surtitre::before {
  content: "";
  width: 34px; height: 2px;
  background: currentColor;
  flex: none;
  border-radius: 2px;
}

.titre-xxl { font-size: clamp(2.6rem, 7.2vw, 6rem); }
.titre-xl  { font-size: clamp(1.95rem, 3.6vw, 3.15rem); }
.titre-l   { font-size: clamp(1.55rem, 2.6vw, 2.3rem); }
.titre-m   { font-size: clamp(1.15rem, 1.5vw, 1.45rem); letter-spacing: -.018em; }
.titre-s   { font-size: 1.02rem; letter-spacing: -.012em; font-weight: 700; }

.chapo {
  font-size: clamp(1.06rem, 1.25vw, 1.32rem);
  line-height: 1.55;
  color: var(--texte-2);
  font-weight: 300;
  max-width: 62ch;
}

.entete-section { margin-bottom: clamp(36px, 5vw, 64px); max-width: 78ch; }
.entete-section .chapo { margin-top: 18px; }

.entete-section--rang {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  max-width: none;
}

/* ── 5. Boutons ─────────────────────────────────────────────────────── */

.bouton {
  --fond-bouton: var(--accent);
  --texte-bouton: var(--sur-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 15px 26px;
  border-radius: 999px;
  background: var(--fond-bouton);
  color: var(--texte-bouton);
  font-family: var(--titre);
  font-weight: 700;
  font-size: .96rem;
  letter-spacing: -.008em;
  line-height: 1.2;
  /* Un bouton garde son libellé sur une ligne : cassé en deux, il perd sa
     forme de pilule et son texte se décentre. Les libellés sont tenus
     courts pour cela — c'est une contrainte de rédaction, pas de style.
     `max-width` est la ceinture : un libellé trop long rétrécit plutôt
     que de déborder de la page. */
  white-space: nowrap;
  max-width: 100%;
  border: 1.5px solid transparent;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--vite) var(--ease),
              box-shadow var(--moyen) var(--ease),
              background-color var(--vite) var(--ease),
              color var(--vite) var(--ease),
              border-color var(--vite) var(--ease);
  will-change: transform;
}
/* Le halo qui balaie le bouton au survol. Purement décoratif : il vit
   derrière le texte et ne modifie aucune couleur de fond. */
.bouton::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 18%, rgba(255,255,255,.34) 50%, transparent 82%);
  transform: translateX(-120%);
  transition: transform var(--lent) var(--ease);
}
.bouton:hover { transform: translateY(-2px); box-shadow: var(--lueur); }
.bouton:hover::after { transform: translateX(120%); }
.bouton:active { transform: translateY(0); }

.bouton .fleche { transition: transform var(--moyen) var(--ease); flex: none; }
.bouton:hover .fleche { transform: translateX(4px); }

.bouton--fantome {
  --fond-bouton: transparent;
  --texte-bouton: var(--texte);
  border-color: var(--liseré-fort);
  backdrop-filter: blur(6px);
}
.bouton--fantome:hover {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: none;
}

.bouton--clair {
  --fond-bouton: var(--texte);
  --texte-bouton: var(--fond);
}

.bouton--petit { padding: 11px 19px; font-size: .88rem; }

.groupe-boutons { display: flex; flex-wrap: wrap; gap: 14px; }

/* Lien souligné qui se construit au survol. */
.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--titre);
  font-weight: 700;
  color: var(--accent);
  padding-bottom: 3px;
  position: relative;
}
.lien-fleche::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--moyen) var(--ease);
}
.lien-fleche:hover::after { transform: scaleX(1); transform-origin: left; }
.lien-fleche svg { transition: transform var(--moyen) var(--ease); }
.lien-fleche:hover svg { transform: translateX(4px); }

/* ── 6. En-tête ─────────────────────────────────────────────────────── */

.saut-contenu {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 200;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--p-cyan);
  color: #05242e;
  font-weight: 700;
  transform: translateY(-160%);
  transition: transform var(--vite) var(--ease);
}
.saut-contenu:focus { transform: translateY(0); }

.entete {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  transition: background-color var(--moyen) var(--ease),
              box-shadow var(--moyen) var(--ease),
              border-color var(--moyen) var(--ease);
  border-bottom: 1px solid transparent;
}
.entete__barre {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.5vw, 34px);
  height: var(--h-entete, 84px);
  min-width: 0;
  transition: height var(--moyen) var(--ease);
}
/* Posé : l'en-tête se compacte et prend un fond flouté. */
.entete.posee {
  background: color-mix(in srgb, var(--p-noir) 82%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: rgba(255, 255, 255, .1);
}
.entete.posee .entete__barre { --h-entete: 68px; }

.marque { flex: none; display: flex; align-items: center; }
.marque img {
  width: clamp(104px, 9vw, 132px);
  height: auto;
  transition: width var(--moyen) var(--ease);
}
.entete.posee .marque img { width: clamp(96px, 7.6vw, 116px); }

.nav { margin-left: auto; }
.nav__liste { display: flex; align-items: center; gap: clamp(2px, .5vw, 8px); }
.nav__lien {
  display: block;
  padding: 9px 10px;
  border-radius: 999px;
  font-size: .93rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .78);
  white-space: nowrap;
  position: relative;
  transition: color var(--vite) var(--ease), background-color var(--vite) var(--ease);
}
.nav__lien:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.nav__lien[aria-current="page"] { color: var(--p-cyan); }
.nav__lien[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--p-cyan);
  box-shadow: 0 0 12px var(--p-cyan);
}

.entete__actions { display: flex; align-items: center; gap: 10px; flex: none; }
/* La navigation porte le `margin-left: auto` qui pousse tout à droite ;
   quand elle disparaît, les commandes doivent reprendre ce rôle. */
@media (max-width: 1180px) {
  .entete__actions { margin-left: auto; }
}

/* Sélecteur de langue */
.langues { position: relative; }
.langues__bouton {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .2);
  color: rgba(255, 255, 255, .85);
  font-family: var(--titre);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: border-color var(--vite) var(--ease), color var(--vite) var(--ease);
}
.langues__bouton:hover { border-color: var(--p-cyan); color: var(--p-cyan); }
.langues__bouton svg { transition: transform var(--vite) var(--ease); }
.langues[data-ouvert="oui"] .langues__bouton svg { transform: rotate(180deg); }
.langues__liste {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  min-width: 156px;
  padding: 7px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--p-noir-2) 96%, transparent);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 22px 50px -22px rgba(0, 0, 0, .95);
  backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-7px) scale(.97);
  transform-origin: top right;
  transition: opacity var(--vite) var(--ease), transform var(--vite) var(--ease), visibility var(--vite);
}
.langues[data-ouvert="oui"] .langues__liste {
  opacity: 1; visibility: visible; transform: translateY(0) scale(1);
}
.langues__liste a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 13px;
  border-radius: 9px;
  font-size: .92rem;
  color: rgba(255, 255, 255, .82);
  transition: background-color var(--vite) var(--ease), color var(--vite) var(--ease);
}
.langues__liste a:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.langues__liste a[aria-current="true"] { color: var(--p-cyan); font-weight: 600; }

/* Bouton d'ouverture du tiroir */
/* Trois barres empilées en colonne, espacées d'un `gap` connu : c'est ce
   gap qui donne la translation exacte pour que les deux barres extrêmes se
   croisent au centre et forment une croix. */
.burger {
  display: none;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .2);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: none;
}
.burger span {
  display: block;
  width: 19px; height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform var(--moyen) var(--ease), opacity var(--vite) var(--ease);
}
body.tiroir-ouvert .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.tiroir-ouvert .burger span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
body.tiroir-ouvert .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Tiroir mobile */
.tiroir {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: color-mix(in srgb, var(--p-noir) 97%, transparent);
  backdrop-filter: blur(20px);
  /* Le tiroir tient dans l'écran : le menu occupe la place disponible et
     les actions restent posées en bas, sans que rien ne défile. */
  display: flex;
  flex-direction: column;
  padding: calc(var(--haut-entete, 84px) + 12px) var(--marge-page)
           calc(20px + env(safe-area-inset-bottom));
  height: 100svh;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--moyen) var(--ease), visibility var(--moyen);
}
body.tiroir-ouvert .tiroir { opacity: 1; visibility: visible; }
.tiroir__liste {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  gap: 0;
}
.tiroir__lien {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* La hauteur de chaque entrée suit celle de l'écran : neuf entrées
     tiennent aussi bien sur un petit téléphone que sur une tablette. */
  padding: clamp(9px, 1.35svh, 16px) 4px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  font-family: var(--titre);
  font-size: clamp(1.08rem, 2.6svh, 1.42rem);
  font-weight: 700;
  letter-spacing: -.02em;
  color: rgba(255, 255, 255, .92);
  opacity: 0;
  transform: translateY(14px);
}
body.tiroir-ouvert .tiroir__lien {
  animation: entreeTiroir var(--moyen) var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 45ms + 90ms);
}
@keyframes entreeTiroir { to { opacity: 1; transform: translateY(0); } }
.tiroir__lien[aria-current="page"] { color: var(--p-cyan); }
.tiroir__pied {
  flex: none;
  margin-top: clamp(14px, 2.4svh, 28px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.tiroir__pied .bouton { width: 100%; }
.tiroir__contact { color: rgba(255, 255, 255, .6); font-size: .95rem; line-height: 1.7; }
.tiroir__contact a { color: #fff; }

/* ── 7. Hero ────────────────────────────────────────────────────────── */

/* Le contenu du hero est ancré en HAUT, avec un retrait constant : le
   surtitre et le titre tombent alors à la même hauteur sur TOUTES les
   pages, l'accueil comprise, quelle que soit la hauteur de l'image ou le
   nombre de lignes du chapô. */
.hero {
  position: relative;
  min-height: clamp(560px, 86svh, 880px);
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  background: var(--p-noir);
  isolation: isolate;
  padding-block: clamp(132px, 22svh, 215px) clamp(52px, 7vw, 92px);
}
/* Les pages intérieures gardent le même ancrage, sur un hero plus court. */
.hero--court {
  min-height: clamp(420px, 62svh, 620px);
  padding-bottom: clamp(40px, 6vw, 72px);
}

.hero__fond {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.hero__fond img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  animation: respire 26s var(--ease) infinite alternate;
}
@keyframes respire {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.15) translate3d(-1.2%, -1.4%, 0); }
}

/* Le voile : deux dégradés superposés. Le premier assombrit le bas pour
   asseoir le texte, le second refroidit l'image vers le cyan de marque
   sans la teindre franchement. */
.hero__voile {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, var(--p-noir) 2%, rgba(10, 16, 20, .82) 26%, rgba(10, 16, 20, .34) 58%, rgba(10, 16, 20, .55) 100%),
    linear-gradient(112deg, rgba(2, 67, 97, .5) 0%, transparent 52%);
}
/* Grain, fait en CSS : aucune image à télécharger. */
.hero__voile::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .5;
  mix-blend-mode: overlay;
  background-image: radial-gradient(rgba(255,255,255,.12) .5px, transparent .5px);
  background-size: 3px 3px;
}

/* La largeur se pose sur chaque texte, pas sur le bloc : un titre court
   comme « Coaching & Paramedic » se retrouvait cassé en trois lignes,
   avec le « & » seul sur la sienne. En `em`, la contrainte suit la taille
   réelle du titre, quelle que soit la largeur de l'écran. */
.hero__contenu { position: relative; color: #fff; max-width: min(100%, 52rem); }
/* Quand une annonce est posée, le contenu du hero descend juste assez
   pour ne pas la toucher. */
.hero:has(.annonce:not([hidden])) .hero__contenu { margin-top: clamp(34px, 5vh, 58px); }
.hero__titre { max-width: 13em; }
.hero__contenu--large .hero__titre { max-width: 11em; }
.hero .surtitre { color: var(--p-cyan); }

.hero__titre {
  font-size: clamp(2.7rem, 6.4vw, 5.4rem);
  line-height: .96;
  letter-spacing: -.035em;
  font-weight: 800;
  text-transform: uppercase;
  font-stretch: 112%;
}
.hero__titre em {
  font-style: normal;
  color: var(--p-cyan);
  display: block;
}
.hero__chapo {
  margin-top: clamp(20px, 2.4vw, 30px);
  max-width: 42ch;
  font-size: clamp(1.06rem, 1.4vw, 1.38rem);
  font-weight: 300;
  color: rgba(255, 255, 255, .84);
  max-width: 46ch;
  line-height: 1.55;
}
.hero .groupe-boutons { margin-top: clamp(28px, 3.2vw, 42px); }

/* Indice de défilement */
.hero__indice {
  position: absolute;
  right: var(--marge-page);
  bottom: clamp(52px, 7vw, 92px);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  writing-mode: vertical-rl;
}
.hero__indice::after {
  content: "";
  width: 1px; height: 54px;
  background: linear-gradient(to bottom, var(--p-cyan), transparent);
  animation: filet 2.4s var(--ease) infinite;
}
@keyframes filet {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ── 7 bis. Bandeau d'annonce ───────────────────────────────────────── */

/* Une ligne fine posée sous l'en-tête, sur l'accueil seulement, pour
   l'actualité qui a un enjeu : un séjour à places limitées, une
   inscription qui ferme. Le visiteur peut la refermer. */
.annonce {
  position: absolute;
  inset: calc(var(--haut-entete, 84px) + 10px) 0 auto;
  z-index: 3;
  animation: venueAnnonce 520ms var(--ease) 260ms both;
}
@keyframes venueAnnonce {
  from { opacity: 0; transform: translateY(-10px); }
}
.annonce[hidden] { display: none; }

.annonce__barre {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--p-noir-2) 78%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 16px 38px -18px rgba(0, 0, 0, .8);
}

.annonce__lien {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  color: #eef4f6;
  font-size: .9rem;
}
.annonce__etiquette {
  flex: none;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--p-cyan);
  color: #05242e;
  font-family: var(--titre);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.annonce__titre {
  font-family: var(--titre);
  font-weight: 700;
  letter-spacing: -.012em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.annonce__quand { color: rgba(255, 255, 255, .6); white-space: nowrap; }
.annonce__voir {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  color: var(--p-cyan);
  font-family: var(--titre);
  font-weight: 700;
  font-size: .86rem;
}
.annonce__lien:hover .annonce__voir svg { transform: translateX(4px); }
.annonce__voir svg { transition: transform var(--moyen) var(--ease); }

.annonce__fermer {
  flex: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, .6);
  transition: background-color var(--vite) var(--ease), color var(--vite) var(--ease);
}
.annonce__fermer:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* Sur un téléphone, la date et l'appel à l'action cèdent la place : il
   reste l'étiquette, le titre, et la flèche. */
@media (max-width: 860px) {
  .annonce__quand { display: none; }
}
/* Sous 860 px, la date part ; sous 720 px, le libellé du lien part aussi
   et il ne reste que la flèche : c'est le TITRE qui doit rester entier. */
@media (max-width: 720px) {
  .annonce__voirTexte { display: none; }
  .annonce__voir { margin-left: 8px; }
}
@media (max-width: 640px) {
  .annonce { inset: calc(var(--haut-entete, 84px) + 8px) 0 auto; }
  .annonce__barre { padding: 6px 6px 6px 6px; gap: 8px; }
  .annonce__lien { gap: 9px; font-size: .84rem; }
  .annonce__etiquette { font-size: .62rem; padding: 3px 9px; }
}

/* ── 8. Bandeau de repères chiffrés ─────────────────────────────────── */

.reperes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--liseré);
  border-block: 1px solid var(--liseré);
}
.repere {
  background: var(--fond);
  padding: clamp(26px, 3.4vw, 44px) clamp(18px, 2vw, 30px);
  text-align: center;
}
.repere__valeur {
  font-family: var(--titre);
  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.repere__valeur span { font-size: .5em; margin-left: 2px; }
.repere__libelle {
  margin-top: 10px;
  font-size: .87rem;
  color: var(--texte-2);
  line-height: 1.4;
}

/* ── 9. Grilles de cartes ───────────────────────────────────────────── */

.grille {
  display: grid;
  gap: clamp(16px, 1.8vw, 26px);
}
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grille--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.grille--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.grille--visages {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 208px), 1fr));
  /* Toutes les rangées à la même hauteur : sans cela, un rôle de trois
     lignes fait grandir sa rangée seule, et le mur devient irrégulier. */
  grid-auto-rows: 1fr;
}

/* La carte-photo : le visuel occupe toute la carte, le texte se pose
   dessus dans un dégradé. Au survol, l'image avance et le texte monte. */
.carte-photo {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(280px, 30vw, 400px);
  border-radius: var(--rayon);
  overflow: hidden;
  isolation: isolate;
  background: var(--fond-3);
  color: #fff;
  padding: clamp(20px, 2vw, 28px);
  transition: transform var(--moyen) var(--ease), box-shadow var(--moyen) var(--ease);
}
.carte-photo img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--lent) var(--ease), filter var(--lent) var(--ease);
}
.carte-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(6, 12, 16, .92) 4%, rgba(6, 12, 16, .55) 42%, rgba(6, 12, 16, .08) 76%);
  transition: opacity var(--moyen) var(--ease);
}
.carte-photo:hover { transform: translateY(-5px); box-shadow: var(--ombre); }
.carte-photo:hover img { transform: scale(1.07); }
.carte-photo__titre { font-size: clamp(1.25rem, 1.8vw, 1.6rem); }
.carte-photo__texte {
  margin-top: 9px;
  font-size: .95rem;
  color: rgba(255, 255, 255, .8);
  line-height: 1.5;
  max-width: 34ch;
}
.carte-photo__fleche {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--titre);
  font-weight: 700;
  font-size: .9rem;
  color: var(--p-cyan);
}
.carte-photo__fleche svg { transition: transform var(--moyen) var(--ease); }
.carte-photo:hover .carte-photo__fleche svg { transform: translateX(5px); }

/* Un liseré cyan qui se dessine au survol, sans décaler la carte. */
.carte-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1.5px var(--p-cyan);
  opacity: 0;
  transition: opacity var(--moyen) var(--ease);
}
.carte-photo:hover::before { opacity: 1; }

/* La carte sobre, sur fond de section. */
.carte {
  background: var(--fond-2);
  border: 1px solid var(--liseré);
  border-radius: var(--rayon);
  padding: clamp(22px, 2.4vw, 32px);
  transition: transform var(--moyen) var(--ease),
              border-color var(--moyen) var(--ease),
              box-shadow var(--moyen) var(--ease);
}
.carte:hover { transform: translateY(-3px); border-color: var(--liseré-fort); box-shadow: var(--ombre-douce); }
.carte__numero {
  font-family: var(--titre);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--accent);
  margin-bottom: 14px;
  display: block;
}
.carte__titre { margin-bottom: 11px; }
.carte__texte { color: var(--texte-2); font-size: .97rem; }

/* ── 10. Bloc image + texte ─────────────────────────────────────────── */

.duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(30px, 5vw, 78px);
  align-items: center;
}
/* Quand les deux colonnes sont du texte, les centrer verticalement décale
   leurs titres : ils doivent partir de la même ligne. */
.duo--haut { align-items: start; }
.duo--inverse .duo__visuel { order: 2; }
.duo__texte { max-width: 56ch; }
.duo__texte p { color: var(--texte-2); }
.duo__texte .titre-xl + p { margin-top: 22px; }
.duo__texte .groupe-boutons { margin-top: 28px; }

.duo__visuel {
  position: relative;
  border-radius: var(--rayon-l);
  overflow: hidden;
  aspect-ratio: 4 / 3.2;
  background: var(--fond-3);
}
.duo__visuel img { width: 100%; height: 100%; object-fit: cover; }

/* Une carte, un plan, un logo : ce qui doit se lire en entier n'est pas
   rogné mais posé au centre de son cadre. */
.duo__visuel--contenu { background: var(--fond-2); }
.duo__visuel--contenu img { object-fit: contain; padding: clamp(14px, 2vw, 28px); }

/* L'accent géométrique derrière l'image : un rappel des diagonales du
   site d'origine, réduit à un simple cadre décalé. */
.duo__visuel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--liseré-fort);
  pointer-events: none;
}
.duo__cadre {
  position: relative;
}
.duo__cadre::before {
  content: "";
  position: absolute;
  inset: auto -18px -18px auto;
  width: 62%; height: 62%;
  border: 1.5px solid var(--accent);
  border-radius: var(--rayon-l);
  z-index: -1;
  opacity: .5;
}

/* ── 11. Bandeau plein écran ────────────────────────────────────────── */

.bandeau {
  position: relative;
  min-height: clamp(380px, 52vw, 560px);
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  padding-block: clamp(56px, 7vw, 96px);
}
.bandeau img {
  position: absolute;
  inset: -12% 0;              /* la marge que la parallaxe va consommer */
  z-index: -2;
  width: 100%; height: 124%;
  object-fit: cover;
  will-change: transform;
  transform: translate3d(0, var(--parallaxe, 0px), 0);
}
/* Sans JavaScript — ou avec le mouvement réduit —, l'image reprend sa
   place exacte : la marge de débord ne doit jamais se voir. */
html:not(.js) .bandeau img { inset: 0; height: 100%; transform: none; }
.bandeau::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(8, 14, 18, .93) 8%, rgba(8, 14, 18, .74) 44%, rgba(8, 14, 18, .3) 100%);
}
.bandeau__contenu { max-width: 54ch; }
.bandeau__contenu p { color: rgba(255, 255, 255, .84); }
.bandeau .surtitre { color: var(--p-cyan); }

/* ── 12. Appel à l'action ───────────────────────────────────────────── */

.appel {
  position: relative;
  border-radius: var(--rayon-l);
  overflow: hidden;
  isolation: isolate;
  padding: clamp(34px, 5vw, 68px);
  background:
    radial-gradient(120% 140% at 12% 8%, rgba(0, 192, 218, .22), transparent 58%),
    var(--fond-2);
  border: 1px solid var(--liseré);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 56px);
  flex-wrap: wrap;
}
.appel__texte { max-width: 46ch; }
.appel__texte p { color: var(--texte-2); margin-top: 12px; }

/* ── 13. Onglets ────────────────────────────────────────────────────── */

.onglets__barre {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 6px;
  background: var(--fond-2);
  border: 1px solid var(--liseré);
  border-radius: 999px;
  width: fit-content;
  max-width: 100%;
  margin-bottom: clamp(26px, 3vw, 40px);
}
.onglets__bouton {
  padding: 11px 22px;
  border-radius: 999px;
  font-family: var(--titre);
  font-weight: 600;
  font-size: .93rem;
  color: var(--texte-2);
  white-space: nowrap;
  transition: background-color var(--vite) var(--ease), color var(--vite) var(--ease);
}
.onglets__bouton:hover { color: var(--texte); }
.onglets__bouton[aria-selected="true"] {
  background: var(--accent);
  color: var(--sur-accent);
}
.onglets__panneau[hidden] { display: none; }
.onglets__panneau {
  animation: fondu var(--moyen) var(--ease);
}
@keyframes fondu { from { opacity: 0; transform: translateY(9px); } }

.liste-valeurs { display: grid; gap: 0; }
.liste-valeurs li {
  display: grid;
  grid-template-columns: minmax(12rem, 18rem) 1fr;
  gap: 8px 28px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--liseré);
  font-size: .98rem;
}
.liste-valeurs li:last-child { border-bottom: 0; }
.liste-valeurs b {
  font-family: var(--titre);
  font-weight: 700;
  color: var(--texte);
  letter-spacing: -.012em;
}
.liste-valeurs span { color: var(--texte-2); }

/* Sous 620 px, deux colonnes écraseraient le texte : la valeur passe
   sous sa clé. */
@media (max-width: 620px) {
  .liste-valeurs li { grid-template-columns: 1fr; gap: 3px; }
}

.citation {
  margin-top: 30px;
  padding-left: 22px;
  border-left: 2px solid var(--accent);
  font-family: var(--titre);
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.4;
  color: var(--texte);
}
.citation footer { margin-top: 9px; font-size: .84rem; font-style: normal; color: var(--texte-3); letter-spacing: .08em; text-transform: uppercase; font-family: var(--corps); }

/* ── 14. Accordéon ──────────────────────────────────────────────────── */

.accordeon { border-top: 1px solid var(--liseré); }
.accordeon__item { border-bottom: 1px solid var(--liseré); }
.accordeon__tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  width: 100%;
  padding: 22px 2px;
  text-align: left;
  font-family: var(--titre);
  font-size: clamp(1.02rem, 1.3vw, 1.18rem);
  font-weight: 700;
  letter-spacing: -.014em;
  color: var(--texte);
  transition: color var(--vite) var(--ease);
}
.accordeon__tete:hover { color: var(--accent); }
.accordeon__signe {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--liseré-fort);
  display: grid;
  place-items: center;
  transition: transform var(--moyen) var(--ease), background-color var(--vite) var(--ease), border-color var(--vite) var(--ease);
}
.accordeon__tete[aria-expanded="true"] .accordeon__signe {
  transform: rotate(45deg);
  background: var(--accent);
  border-color: var(--accent);
  color: var(--sur-accent);
}
.accordeon__corps {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--moyen) var(--ease);
}
.accordeon__item.ouvert .accordeon__corps { grid-template-rows: 1fr; }
.accordeon__corps > div { overflow: hidden; }
.accordeon__corps p {
  color: var(--texte-2);
  padding-bottom: 24px;
  max-width: 72ch;
  font-size: .98rem;
}

/* ── 15. Les cours ──────────────────────────────────────────────────── */

.filtres {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: clamp(24px, 3vw, 38px);
}
.filtre {
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--liseré-fort);
  font-size: .89rem;
  font-weight: 500;
  color: var(--texte-2);
  transition: all var(--vite) var(--ease);
}
.filtre:hover { color: var(--texte); border-color: var(--texte-3); }
.filtre[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--sur-accent);
  font-weight: 600;
}

.cours-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr)); gap: clamp(12px, 1.4vw, 20px); }

.cours-carte {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  border-radius: var(--rayon-s);
  overflow: hidden;
  aspect-ratio: 4 / 3.4;
  isolation: isolate;
  background: var(--fond-3);
  color: #fff;
  transition: transform var(--moyen) var(--ease), box-shadow var(--moyen) var(--ease), opacity var(--moyen) var(--ease);
}
.cours-carte img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--lent) var(--ease);
}
.cours-carte::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(6, 12, 16, .9) 6%, rgba(6, 12, 16, .3) 56%, rgba(6, 12, 16, .05));
  transition: background var(--moyen) var(--ease);
}
.cours-carte:hover { transform: translateY(-4px); box-shadow: var(--ombre); }
.cours-carte:hover img { transform: scale(1.08); }
.cours-carte__nom {
  position: absolute;
  inset: auto 14px 13px;
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -.015em;
  line-height: 1.15;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .6);
}
.cours-carte__plus {
  position: absolute;
  top: 12px; right: 12px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(.7);
  transition: opacity var(--moyen) var(--ease), transform var(--moyen) var(--ease), background-color var(--vite) var(--ease);
}
.cours-carte:hover .cours-carte__plus,
.cours-carte:focus-visible .cours-carte__plus { opacity: 1; transform: scale(1); }
.cours-carte[hidden] { display: none; }

/* Le tiroir de détail d'un cours */
/* ATTENTION : un <dialog> fermé est masqué par la feuille du navigateur
   (`display: none`). Toute règle `display` posée sans condition l'écrase
   et laisse la boîte visible en permanence — un panneau vide, par-dessus
   la page, que rien ne peut fermer puisqu'il n'a jamais été ouvert.
   Le `display` d'un dialogue se pose donc TOUJOURS sur `[open]`. */
.fiche {
  position: fixed;
  inset: 0;
  z-index: 120;
  place-items: end center;
  padding: 0;
  border: 0;
  background: transparent;
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.fiche[open] { display: grid; }
.fiche:not([open]) { display: none; }
.fiche::backdrop { background: rgba(4, 9, 12, .78); backdrop-filter: blur(7px); }
.fiche__panneau {
  position: relative;
  width: min(100%, 680px);
  max-height: 88svh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--p-noir-2);
  color: #eef4f6;
  border: 1px solid rgba(255, 255, 255, .13);
  border-bottom: 0;
  border-radius: var(--rayon-l) var(--rayon-l) 0 0;
  padding: 0 0 clamp(26px, 3vw, 38px);
}
@media (min-width: 720px) {
  .fiche[open] { place-items: center; }
  .fiche__panneau { border-radius: var(--rayon-l); border-bottom: 1px solid rgba(255, 255, 255, .13); max-height: 84svh; }
}
.fiche__visuel { position: relative; aspect-ratio: 16 / 8; overflow: hidden; }
.fiche__visuel img { width: 100%; height: 100%; object-fit: cover; }
.fiche__visuel::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--p-noir-2), rgba(16, 26, 32, .1) 62%);
}
.fiche__corps { padding: 0 clamp(22px, 3vw, 38px); margin-top: -46px; position: relative; }
.fiche__famille {
  display: inline-block;
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--p-cyan);
  color: #05242e;
  font-family: var(--titre);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.fiche__titre { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.fiche__chapo { margin-top: 14px; font-size: 1.06rem; color: #c3d4db; font-weight: 300; line-height: 1.55; }
.fiche__texte { margin-top: 18px; color: #a8bcc5; font-size: .98rem; }
.fiche__texte p + p { margin-top: .9em; }
.fiche__liste { margin-top: 18px; display: grid; gap: 10px; }
.fiche__liste li { display: flex; gap: 11px; color: #a8bcc5; font-size: .96rem; }
.fiche__liste li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--p-cyan); margin-top: .58em; }
.fiche__profs {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.fiche__profsTitre {
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #7c929c;
  margin-right: 4px;
}
.fiche__prof {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 13px 4px 4px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .2);
  font-size: .84rem;
  color: #c3d4db;
  white-space: nowrap;
}
/* Au survol (et à la tabulation), la pastille montre la personne : son
   portrait en grand et son rôle complet. Le nom seul ne dit pas ce
   qu'elle enseigne, et une vignette de 28 px ne la montre pas. */
.fiche__prof { position: relative; cursor: help; }

.fiche__bulle {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  transform: translateX(-50%) translateY(5px);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 14px;
  width: max-content;
  max-width: min(34ch, 80vw);
  padding: 12px;
  border-radius: 16px;
  background: #05242e;
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 22px 44px -16px rgba(0, 0, 0, .9);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--vite) var(--ease), transform var(--vite) var(--ease), visibility var(--vite);
}
.fiche__prof:hover .fiche__bulle,
.fiche__prof:focus-visible .fiche__bulle {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
/* La flèche qui rattache la bulle à sa pastille. */
.fiche__bulle::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: #05242e;
}
.fiche__bulleVisage {
  width: 92px;
  height: 92px;
  border-radius: 12px;
  object-fit: cover;
  flex: none;
  background: #18242c;
}
.fiche__bulleTexte { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fiche__bulleNom {
  font-family: var(--titre);
  font-weight: 700;
  font-size: .95rem;
  color: #fff;
  letter-spacing: -.012em;
}
.fiche__bulleRole {
  font-size: .78rem;
  font-weight: 400;
  line-height: 1.45;
  color: #a8bcc5;
  white-space: normal;
}

/* Près du bord du panneau, la bulle rentrerait dans le décor : les deux
   premières pastilles d'une ligne la poussent vers la droite. */
@media (max-width: 560px) {
  .fiche__bulle { max-width: min(30ch, 74vw); gap: 11px; padding: 10px; }
  .fiche__bulleVisage { width: 72px; height: 72px; }
}

.fiche__profVisage {
  width: 28px; height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: #18242c;
}
/* Sans portrait, la pastille retrouve une marge symétrique. */
.fiche__prof:not(:has(.fiche__profVisage)) { padding: 5px 13px; }
.fiche__actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; }
.fiche__actions .bouton { font-size: .88rem; padding: 12px 18px; }
.fiche__fermer {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 2;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(8, 14, 18, .62);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .2);
  color: #fff;
  display: grid;
  place-items: center;
  transition: background-color var(--vite) var(--ease), transform var(--vite) var(--ease);
}
.fiche__fermer:hover { background: rgba(8, 14, 18, .9); transform: rotate(90deg); }

/* ── 16. Visages ────────────────────────────────────────────────────── */

.visage { text-align: left; }

/* La carte d'une personne. Sans elle, les portraits flottaient sur le fond
   et les lignes de contact ne s'alignaient jamais d'une carte à l'autre.
   La carte fixe le cadre ; `1fr` sur le corps aligne les pieds. */
.visage--carte {
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--fond-2);
  border: 1px solid var(--liseré);
  border-radius: var(--rayon);
  overflow: hidden;
  transition: border-color var(--moyen) var(--ease),
              transform var(--moyen) var(--ease),
              box-shadow var(--moyen) var(--ease);
}
.visage--carte:hover {
  border-color: var(--liseré-fort);
  transform: translateY(-3px);
  box-shadow: var(--ombre-douce);
}
.visage--carte .visage__cadre { border-radius: 0; margin-bottom: 0; }
.visage__corps {
  display: flex;
  flex-direction: column;
  padding: 16px 16px 18px;
  gap: 5px;
}
/* Les contacts se posent au bas de la carte : d'une carte à l'autre, ils
   sont sur la même ligne, quelle que soit la longueur du rôle. */
.visage__corps .visage__contact { margin-top: auto; padding-top: 12px; }
.visage__cadre {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--fond-3);
  margin-bottom: 14px;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  cursor: zoom-in;
}
.visage__cadre img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.02);
  transition: filter var(--lent) var(--ease), transform var(--lent) var(--ease);
}
.visage:hover .visage__cadre img { filter: grayscale(0); transform: scale(1.04); }
.visage__cadre::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 192, 218, .3), transparent 58%);
  opacity: 0;
  transition: opacity var(--moyen) var(--ease);
}
.visage:hover .visage__cadre::after { opacity: 1; }
.visage__nom { font-family: var(--titre); font-weight: 700; font-size: 1.02rem; letter-spacing: -.016em; }
.visage__role { margin-top: 3px; font-size: .84rem; color: var(--texte-2); line-height: 1.45; text-wrap: pretty; }
.visage__fonction {
  display: block;
  font-family: var(--titre);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .01em;
  color: var(--accent);
  margin-top: 4px;
}
.visage__detail {
  display: block;
  margin-top: 5px;
  font-size: .79rem;
  line-height: 1.5;
  color: var(--texte-3);
}
.visage__contact { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 6px; font-size: .83rem; }

/* Une pastille : l'action tient dans sa largeur, elle ne casse jamais la
   carte — l'adresse complète reste dans le title et dans l'aria-label. */
.pastille {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--liseré-fort);
  color: var(--texte-2);
  font-size: .82rem;
  font-weight: 500;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--vite) var(--ease), color var(--vite) var(--ease), background-color var(--vite) var(--ease);
}
.pastille:hover { border-color: var(--accent); color: var(--accent); }
.pastille svg { flex: none; color: var(--accent); }
.pastille--icone { padding: 7px; }

/* ── 17. Horaires ───────────────────────────────────────────────────── */

.horaires {
  background: var(--fond-2);
  border: 1px solid var(--liseré);
  border-radius: var(--rayon);
  padding: clamp(22px, 2.6vw, 34px);
}
.horaires__titre {
  font-family: var(--titre);
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: -.01em;
  padding-bottom: 15px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--liseré);
  display: flex;
  align-items: center;
  gap: 11px;
}
.horaires__titre svg { color: var(--accent); flex: none; }
.horaires__titre span { text-wrap: nowrap; }
.horaires__ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 0;
  font-size: .95rem;
  border-bottom: 1px solid var(--liseré);
}
.horaires__ligne:last-child { border-bottom: 0; }
.horaires__jour { color: var(--texte-2); }
.horaires__heure {
  font-family: var(--titre);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.horaires__heure--ferme { color: var(--texte-3); font-weight: 500; }

/* ── 18. Contact ────────────────────────────────────────────────────── */

.coord { display: grid; gap: 22px; }
.coord__bloc {
  padding: 20px 0;
  border-bottom: 1px solid var(--liseré);
}
.coord__bloc:last-child { border-bottom: 0; }
.coord__role {
  font-size: .76rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 9px;
}
.coord__personnes { font-family: var(--titre); font-weight: 700; font-size: 1.04rem; margin-bottom: 8px; }
.coord__liens { display: flex; flex-direction: column; gap: 8px; font-size: .95rem; }
/* Les `svg` sont en `display: block` (réinitialisation) : sans `inline-flex`
   sur le lien, l'icône se retrouve seule sur sa ligne, au-dessus du texte. */
.coord__liens a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--texte-2);
  transition: color var(--vite) var(--ease);
  overflow-wrap: anywhere;
}
.coord__liens a svg { flex: none; color: var(--accent); }
.coord__liens a:hover { color: var(--accent); }

.carte-plan {
  border-radius: var(--rayon-l);
  overflow: hidden;
  border: 1px solid var(--liseré);
  background: var(--fond-3);
  min-height: 320px;
  position: relative;
}
.carte-plan svg { width: 100%; height: 100%; display: block; }

/* Le plan. Une carte OpenStreetMap statique tient la place ; la carte
   Google, elle, n'est chargée qu'au clic — elle dépose des cookies, et le
   site n'a volontairement aucun bandeau de consentement. */
.plan {
  position: relative;
  border-radius: var(--rayon-l);
  overflow: hidden;
  border: 1px solid var(--liseré);
  background: var(--fond-3);
  aspect-ratio: 16 / 7;
  min-height: 280px;
}
.plan > img { width: 100%; height: 100%; object-fit: cover; }
.plan iframe { width: 100%; height: 100%; border: 0; display: block; }

.plan__epingle {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -100%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--p-cyan);
  color: #05242e;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 26px -8px rgba(0, 0, 0, .55);
  pointer-events: none;
}
/* Le halo qui bat doucement, pour que l'œil trouve le point. */
.plan__epingle::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid var(--p-cyan);
  opacity: .55;
  animation: battement 2.6s var(--ease) infinite;
}
@keyframes battement {
  0%   { transform: scale(.72); opacity: .6; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

.plan__ouvrir {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 22px;
  border-radius: 999px;
  background: var(--p-noir);
  color: #fff;
  font-family: var(--titre);
  font-weight: 700;
  font-size: .92rem;
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .6);
  transition: transform var(--vite) var(--ease), background-color var(--vite) var(--ease);
}
.plan__ouvrir:hover { transform: translateX(-50%) translateY(-2px); }
.plan__credit {
  position: absolute;
  right: 10px; bottom: 8px;
  margin: 0;
  font-size: .68rem;
  color: #2c3b42;
  background: rgba(255, 255, 255, .82);
  padding: 3px 8px;
  border-radius: 6px;
  max-width: min(100%, 46ch);
}
/* Une fois la carte Google en place, l'habillage du fond n'a plus lieu d'être. */
.plan[data-charge="oui"] .plan__epingle,
.plan[data-charge="oui"] .plan__ouvrir,
.plan[data-charge="oui"] .plan__credit,
.plan[data-charge="oui"] > img { display: none; }

@media (max-width: 680px) {
  .plan { aspect-ratio: 4 / 3.4; }
  .plan__credit { left: 10px; right: 10px; text-align: center; max-width: none; }
  .plan__ouvrir { bottom: 46px; font-size: .86rem; padding: 11px 17px; }
}

/* Formulaire */
.formulaire { display: grid; gap: 18px; }
.champ { display: grid; gap: 8px; }
.champ__etiquette { font-size: .87rem; font-weight: 500; color: var(--texte-2); }
.champ input, .champ textarea, .champ select {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--rayon-s);
  border: 1px solid var(--liseré-fort);
  background: var(--fond-2);
  color: var(--texte);
  font-size: .98rem;
  transition: border-color var(--vite) var(--ease), box-shadow var(--vite) var(--ease);
}
.champ select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 44px;
}
.champ textarea { resize: vertical; min-height: 140px; }
.champ input:focus, .champ textarea:focus, .champ select:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
.champ input::placeholder, .champ textarea::placeholder { color: var(--texte-3); }
.champ--duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 18px; }
/* Champ piège à robots : jamais affiché, jamais lu par un lecteur d'écran.
   Le nom « website » est celui qu'inspecte la fonction d'envoi. */
.piege { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }
.formulaire__pied { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.formulaire__rgpd { font-size: .82rem; color: var(--texte-3); max-width: 42ch; }
.message {
  padding: 14px 18px;
  border-radius: var(--rayon-s);
  font-size: .94rem;
  border: 1px solid;
}
.message--ok { border-color: color-mix(in srgb, #49d981 44%, transparent); background: color-mix(in srgb, #49d981 12%, transparent); color: var(--texte); }
.message--ko { border-color: color-mix(in srgb, #fd6251 48%, transparent); background: color-mix(in srgb, #fd6251 12%, transparent); color: var(--texte); }
.message[hidden] { display: none; }

/* ── 19. Avis ───────────────────────────────────────────────────────── */

.avis {
  background: var(--fond-2);
  border: 1px solid var(--liseré);
  border-radius: var(--rayon);
  padding: clamp(24px, 2.6vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.avis__etoiles { display: flex; gap: 3px; color: #f1bc54; }
.avis__texte { font-size: 1.04rem; line-height: 1.5; flex: 1; }
.avis__auteur { font-size: .85rem; color: var(--texte-3); }
.avis__auteur b { color: var(--texte-2); font-weight: 600; }

/* ── 20. Actualités ─────────────────────────────────────────────────── */

.actu {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border: 1px solid var(--liseré);
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--fond-2);
  transition: border-color var(--moyen) var(--ease), box-shadow var(--moyen) var(--ease);
}
.actu:hover { border-color: var(--liseré-fort); box-shadow: var(--ombre-douce); }
@media (min-width: 760px) {
  .actu--large { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  /* La colonne de texte commande la hauteur ; la photo la remplit au lieu
     de garder son format et de laisser un vide sous elle. */
  .actu--large .actu__visuel { aspect-ratio: auto; height: 100%; min-height: 100%; }
  .actu--large .actu__visuel img { height: 100%; }
}
.actu__visuel { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--fond-3); }
.actu__visuel img { width: 100%; height: 100%; object-fit: cover; }
.actu__visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--lent) var(--ease); }
.actu:hover .actu__visuel img { transform: scale(1.05); }
.actu__corps { padding: clamp(22px, 2.6vw, 36px); display: flex; flex-direction: column; }
.actu__etiquettes { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 16px; }
.etiquette {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-family: var(--titre);
  border: 1px solid var(--liseré-fort);
  color: var(--texte-2);
}
.etiquette--vif { background: var(--accent); border-color: var(--accent); color: var(--sur-accent); }
.actu__titre { font-size: clamp(1.4rem, 2.4vw, 2rem); }
.actu__chapo { margin-top: 14px; color: var(--texte-2); }
.actu__texte { margin-top: 16px; color: var(--texte-2); font-size: .97rem; }
.actu__liste { margin-top: 18px; display: grid; gap: 9px; }
.actu__liste li { display: flex; gap: 11px; font-size: .95rem; color: var(--texte-2); }
.actu__liste li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-top: .6em; }
.actu__notes { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--liseré); font-size: .88rem; color: var(--texte-3); }
.actu__notes p + p { margin-top: 6px; }
.actu__actions {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.actu__contactQui { font-size: .86rem; color: var(--texte-3); }

/* ── 21. Sommaire ancré ─────────────────────────────────────────────── */

.sommaire {
  position: sticky;
  top: calc(var(--haut-entete, 76px) + 14px);
  z-index: 20;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fond-2) 92%, transparent);
  backdrop-filter: blur(12px);
  border: 1px solid var(--liseré);
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  box-shadow: var(--ombre-douce);
}
.sommaire a {
  padding: 9px 18px;
  border-radius: 999px;
  font-size: .89rem;
  font-weight: 500;
  color: var(--texte-2);
  white-space: nowrap;
  transition: background-color var(--vite) var(--ease), color var(--vite) var(--ease);
}
.sommaire a:hover { color: var(--texte); background: var(--fond-3); }
.sommaire a.actif { background: var(--accent); color: var(--sur-accent); font-weight: 600; }

/* ── 22. Galerie ────────────────────────────────────────────────────── */

.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: clamp(10px, 1.2vw, 16px);
}
.galerie__item {
  position: relative;
  border-radius: var(--rayon-s);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--fond-3);
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  cursor: zoom-in;
  text-align: left;
  color: inherit;
}
/* La loupe qui paraît au survol : elle annonce que l'image s'ouvre. */
.galerie__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 192, 218, .16);
  opacity: 0;
  transition: opacity var(--moyen) var(--ease);
  pointer-events: none;
}
.galerie__item:hover::after, .galerie__item:focus-visible::after { opacity: 1; }
.galerie__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--lent) var(--ease); }
.galerie__item:hover img { transform: scale(1.06); }
.galerie__item:hover img { transform: scale(1.06); }
/* Un badge opaque, et non un dégradé : sur une photo claire — un accueil
   en bois blond, une salle zen en plein jour — le texte blanc posé sur un
   simple voile devient illisible. Le badge, lui, tient sur n'importe quel
   fond. */
.galerie__item .galerie__legende {
  position: absolute;
  left: 12px;
  bottom: 12px;
  right: auto;
  max-width: calc(100% - 24px);
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(8, 14, 18, .82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #fff;
  font-family: var(--titre);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: -.008em;
  line-height: 1.25;
  text-align: left;
  text-wrap: balance;
  transition: background-color var(--vite) var(--ease), border-color var(--vite) var(--ease);
}
.galerie__item:hover .galerie__legende,
.galerie__item:focus-visible .galerie__legende {
  background: rgba(0, 192, 218, .92);
  border-color: transparent;
  color: #05242e;
}
/* Le pavage de la mosaïque des espaces. Dix vignettes, quatre colonnes,
   quatre rangées pleines — aucune case orpheline :

     ┌───────┬───┬───┐   1 occupe 2×2
     │   1   │ 2 │ 3 │
     │       ├───┼───┤
     │       │ 4 │ 5 │
     ├───────┼───┼───┤
     │   6   │ 7 │ 8 │   6 occupe 2×1
     ├───────┼───┴───┤
     │   9   │  10   │   9 et 10 occupent 2×1
     └───────┴───────┘                                            */
@media (min-width: 900px) {
  .galerie--vedette {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: clamp(150px, 15vw, 210px);
  }
  .galerie--vedette .galerie__item { aspect-ratio: auto; }
  .galerie--vedette .galerie__item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .galerie--vedette .galerie__item:nth-child(6),
  .galerie--vedette .galerie__item:nth-child(9),
  .galerie--vedette .galerie__item:nth-child(10) { grid-column: span 2; }
}

/* Entre 620 et 900 px, deux colonnes et une vedette en tête. */
@media (min-width: 620px) and (max-width: 899px) {
  .galerie--vedette { grid-template-columns: repeat(2, 1fr); }
  .galerie--vedette .galerie__item:nth-child(1) { grid-column: span 2; aspect-ratio: 16 / 9; }
}

/* ── 22 bis. Visionneuse ────────────────────────────────────────────── */

/* Une seule visionneuse pour tout le site : les mosaïques d'espaces, les
   séjours, les portraits de l'équipe et des praticiens. Elle se déplace au
   clavier (flèches), au doigt (glissement) et au clic. */

.visionneuse {
  position: fixed;
  inset: 0;
  z-index: 200;
  border: 0;
  padding: 0;
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  background: transparent;
  overflow: hidden;
  /* Le glissement horizontal nous appartient ; le vertical reste au
     navigateur pour que le geste de fermeture du téléphone fonctionne. */
  touch-action: pan-y;
}
.visionneuse::backdrop { background: rgba(3, 7, 9, .97); backdrop-filter: blur(6px); }
.visionneuse[open] { display: grid; }
.visionneuse:not([open]) { display: none; }

/* L'image et sa légende forment un seul bloc, centré : avec la légende
   plaquée en bas de l'écran, un portrait se retrouvait à trois cents
   pixels du texte qui le nomme. */
.visionneuse__scene {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(56px, 8vh, 84px) clamp(12px, 4vw, 80px) clamp(18px, 3vh, 34px);
  gap: clamp(14px, 2.4vh, 26px);
  /* Filet : sur un écran très bas avec une longue légende, on défile
     plutôt que de couper le texte. */
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Le cadre prend la place laissée par le pied, et l'image est posée
   DEDANS en absolu : tant qu'elle reste dans le flux, c'est elle qui
   dicte la hauteur du cadre, et la zone d'affichage change à chaque
   cliché. Hors du flux, la zone est la même pour tous. */
.visionneuse__cadre {
  position: relative;
  min-height: 0;
  flex: 1 1 auto;
}
/* `max-height: 100%` seul ne borne rien : le cadre se dimensionne sur son
   contenu, donc l'image reste à sa taille naturelle et pousse la scène
   au-delà de l'écran — les flèches, calées sur la scène, s'en vont avec.
   La hauteur se borne donc à l'écran, moins la place du pied. */
/* L'image OCCUPE la zone du cadre et s'y inscrit (`contain`) : à s'en
   tenir à `max-width/max-height`, chaque cliché gardait sa taille native —
   un portrait de 900 × 1200 débordait de l'écran et chassait la légende,
   une vignette de 320 px flottait au milieu du noir. Toutes les images
   occupent maintenant la même place, quel que soit leur format. */
/* `inset: 0` + `margin: auto` + `max-*: 100%` : l'image reste hors du flux
   (la zone d'affichage ne dépend donc pas d'elle), tout en gardant sa
   taille propre et son format. C'est ce qui permet à l'arrondi de suivre
   les bords réels du cliché — avec `object-fit: contain`, il aurait suivi
   ceux de la zone, invisibles sur le fond noir. */
.visionneuse__image {
  position: absolute;
  inset: 0;
  margin: auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  border-radius: 14px;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9);
  /* Le glissement d'un cliché à l'autre : la translation est posée par le
     script pendant le geste, puis relâchée. */
  transform: translateX(var(--glisse, 0px));
  transition: transform var(--moyen) var(--ease), opacity var(--vite) var(--ease);
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
.visionneuse[data-glisse="oui"] .visionneuse__image { transition: none; }
.visionneuse[data-change="oui"] .visionneuse__image { opacity: 0; }

/* La légende se pose SOUS l'image, centrée : étalée sur toute la largeur
   de l'écran, elle se retrouvait à des centaines de pixels du cliché
   qu'elle décrit, et ne se lisait plus comme sa légende. */
.visionneuse__pied {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  color: rgba(255, 255, 255, .9);
  text-align: center;
  width: min(100%, 62ch);
  margin-inline: auto;
  /* Hauteur FIXE, et non minimale : un rôle de trois lignes rabotait la
     zone du cliché, qui changeait alors de taille d'une image à l'autre.
     Le rôle est borné à deux lignes ; il est donné en entier sur la page
     de l'équipe. */
  height: clamp(96px, 13vh, 118px);
}
.visionneuse__texte { min-width: 0; }
.visionneuse__legende {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--titre);
  font-weight: 700;
  font-size: clamp(1.1rem, 1.9vw, 1.5rem);
  letter-spacing: -.02em;
  line-height: 1.15;
  text-wrap: balance;
}
.visionneuse__role {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--corps);
  font-weight: 300;
  font-size: .92rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .66);
  margin-top: 8px;
  text-wrap: pretty;
}
.visionneuse__compteur {
  flex: none;
  display: inline-block;
  padding: 4px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .18);
  font-family: var(--titre);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: .78rem;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .6);
}

/* Calées sur la scène (et non sur le cadre, dont la hauteur suit celle de
   l'image), les flèches restent au milieu de l'écran quel que soit le
   format du cliché. */
.visionneuse__bouton {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: clamp(44px, 5vw, 56px);
  height: clamp(44px, 5vw, 56px);
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(10px);
  color: #fff;
  display: grid;
  place-items: center;
  transition: background-color var(--vite) var(--ease), transform var(--vite) var(--ease), opacity var(--vite) var(--ease);
}
.visionneuse__bouton:hover { background: rgba(255, 255, 255, .2); }
.visionneuse__bouton--prec { left: clamp(8px, 2vw, 26px); }
.visionneuse__bouton--suiv { right: clamp(8px, 2vw, 26px); }
.visionneuse__bouton:disabled { opacity: .25; cursor: default; }
.visionneuse__bouton[hidden] { display: none; }
/* Le chevron de base pointe vers le bas : on le fait pivoter. */
.pivot-gauche { transform: rotate(90deg); }
.pivot-droite { transform: rotate(-90deg); }

.visionneuse__fermer {
  position: absolute;
  top: clamp(12px, 2vh, 22px);
  right: clamp(12px, 3vw, 26px);
  z-index: 3;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(10px);
  color: #fff;
  display: grid;
  place-items: center;
  transition: background-color var(--vite) var(--ease), transform var(--vite) var(--ease);
}
.visionneuse__fermer:hover { background: rgba(255, 255, 255, .2); transform: rotate(90deg); }

/* Sur petit écran, les flèches encombreraient l'image : le glissement
   prend le relais, et les deux boutons se posent au pied. */
@media (max-width: 680px) {

  .visionneuse__bouton { top: auto; bottom: 0; transform: none; }
  .visionneuse__bouton--prec { left: 0; }
  .visionneuse__bouton--suiv { right: 0; }
  .visionneuse__pied { padding-inline: 58px; gap: 8px; min-height: 52px; }
}

/* ── 23. Pied de page ───────────────────────────────────────────────── */

.pied {
  background: var(--p-noir);
  color: #d5e2e7;
  padding-block: clamp(56px, 7vw, 92px) 34px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.pied__haut {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: clamp(30px, 4vw, 56px);
  padding-bottom: clamp(36px, 4vw, 52px);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.pied__marque img { width: 136px; margin-bottom: 18px; }
.pied__baseline { color: rgba(255, 255, 255, .55); font-size: .9rem; max-width: 30ch; }
.pied__titre {
  font-family: var(--titre);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--p-cyan);
  margin-bottom: 18px;
}
.pied__liste { display: grid; gap: 10px; font-size: .94rem; }
.pied__liste a, .pied address a { color: rgba(255, 255, 255, .72); transition: color var(--vite) var(--ease); }
.pied__liste a:hover, .pied address a:hover { color: var(--p-cyan); }
.pied address { font-style: normal; font-size: .94rem; line-height: 1.75; color: rgba(255, 255, 255, .72); }
.pied__reseaux { display: flex; gap: 10px; margin-top: 18px; }
.pied__reseaux a {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18);
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, .78);
  transition: all var(--vite) var(--ease);
}
.pied__reseaux a:hover { border-color: var(--p-cyan); color: var(--p-cyan); transform: translateY(-2px); }
.pied__bas {
  padding-top: 26px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: .84rem;
  color: rgba(255, 255, 255, .45);
}
.pied__bas nav { display: flex; gap: 20px; flex-wrap: wrap; }
.pied__signature {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin: 0;
}
.pied__signature a { color: rgba(255, 255, 255, .78); font-weight: 600; }
.pied__signature a:hover { color: var(--p-cyan); }
.pied__coeur { color: #fd6251; }
.pied__bas a:hover { color: rgba(255, 255, 255, .8); }

/* ── 24. Barre d'appel mobile ───────────────────────────────────────── */

.barre-appel {
  position: fixed;
  inset: auto 0 0;
  z-index: 90;
  display: none;
  /* Fond opaque sur la barre elle-même : avec un `gap` sur un conteneur
     transparent, la page défilait dans les interstices. Les séparateurs
     sont donc des bordures, pas des vides. */
  background: var(--p-noir-2);
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding-bottom: env(safe-area-inset-bottom);
}
.barre-appel a {
  flex: 1 1 0;
  min-width: 0;
  background: var(--p-noir-2);
  color: #fff;
  /* Hauteur commune : les trois entrées s'alignent quelle que soit la
     longueur de leur libellé. */
  min-height: 60px;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  border-left: 1px solid rgba(255, 255, 255, .14);
}
.barre-appel a:first-child { border-left: 0; }
.barre-appel a.principal { background: var(--p-cyan); color: #05242e; border-left-color: transparent; }
.barre-appel svg { flex: none; }

/* ── 25. Apparitions au défilement ──────────────────────────────────── */

/* L'opacité de départ n'est posée que si le JavaScript a démarré : sans
   lui, aucune section ne peut rester invisible. */
.js [data-anime] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
  transition-delay: var(--retard, 0ms);
}
.js [data-anime].vu { opacity: 1; transform: none; }
.js [data-anime="cote"]:not(.vu) { transform: translateX(-28px); }
.js [data-anime="zoom"]:not(.vu) { transform: scale(.965); }

/* ── 26. Transitions entre pages ────────────────────────────────────── */

@view-transition { navigation: auto; }

::view-transition-old(root) { animation: sortiePage 220ms var(--ease-sortie) both; }
::view-transition-new(root) { animation: entreePage 380ms var(--ease) both; }
@keyframes sortiePage { to { opacity: 0; } }
@keyframes entreePage { from { opacity: 0; transform: translateY(12px); } }

/* ── 27. Adaptations ────────────────────────────────────────────────── */

/* Le menu complet demande de la place : neuf entrées, le sélecteur de
   langue et le bouton de réservation. On lâche le bouton d'abord, le menu
   ensuite, plutôt que de laisser la barre déborder. */
@media (max-width: 1460px) {
  .entete__actions .bouton--entete { display: none; }
}

@media (max-width: 1180px) {
  .nav { display: none; }
  .burger { display: flex; }
}

@media (max-width: 760px) {
  /* Sur un téléphone, une hauteur en `svh` laissait jusqu'à 190 px de noir
     sous les boutons : le hero prend désormais la hauteur de son contenu,
     et l'image s'arrête là où le contenu s'arrête. Le retrait du haut ne
     bouge pas — le titre reste à la même place que sur les autres pages. */
  .hero { min-height: 0; padding-bottom: clamp(48px, 9vw, 68px); }
  .hero--court { min-height: 0; padding-bottom: clamp(40px, 8vw, 60px); }
  /* Le voile s'allège dans le bas : avec un hero plus court, l'image doit
     rester lisible jusqu'en bas. */
  .hero__voile {
    background:
      linear-gradient(to top, var(--p-noir) 1%, rgba(10, 16, 20, .74) 22%, rgba(10, 16, 20, .4) 62%, rgba(10, 16, 20, .58) 100%),
      linear-gradient(112deg, rgba(2, 67, 97, .46) 0%, transparent 58%);
  }

  .barre-appel { display: flex; }
  body { padding-bottom: 64px; }
  .hero__indice { display: none; }
  .duo--inverse .duo__visuel { order: 0; }
  .duo__cadre::before { display: none; }
  .appel { flex-direction: column; align-items: flex-start; }
  .entete__actions .langues__bouton span { display: none; }
  .sommaire { border-radius: var(--rayon); }
}

@media (max-width: 420px) {
  /* Sur les écrans les plus étroits, mieux vaut un bouton pleine largeur
     qu'un libellé tronqué. */
  .groupe-boutons { width: 100%; }
  .groupe-boutons .bouton { flex: 1 1 100%; white-space: normal; }
  .onglets__barre { border-radius: var(--rayon); }
  .onglets__bouton { padding: 10px 15px; font-size: .87rem; }
}

@media print {
  .entete, .tiroir, .barre-appel, .hero__indice, .fiche { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ── 28. Mouvement réduit ───────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-anime] { opacity: 1; transform: none; }
  .hero__fond img { animation: none; transform: scale(1.02); }
  .bandeau img { inset: 0; height: 100%; transform: none !important; }
  @view-transition { navigation: none; }
}