/* Studio 550 — page unique, piste B.
   Direction artistique relevée sur le site existant : dégradés maillés grainés,
   voile bleu-canard sur les visuels, chiffre 550 en filigrane, boutons pilule. */

.s5{
  --p:#2B484B; --p-l:#3B6266; --p-d:#1B3436;
  --mist:#D7E7EB;

  /* ---------------------------------------------------------------
     Palette d'accent — deux jeux, un rôle par teinte.
     « feed » reprend le jaune des publications du club, qui n'emploie
     pas de corail ; « web » conserve l'accent du site actuel. Le
     sélecteur pose data-palette sur .s5 ; sans attribut, c'est le jeu
     du feed qui s'applique.
     --------------------------------------------------------------- */
  --acc:#F68671; --acc-d:#E8705A; --acc-l:#F79075; --acc-xl:#FFA48F;
  --acc-xxl:#FFB7A3; --acc-d2:#EA735C; --acc-pale:#FFC0AE; --acc-mid:#FBA48D;
  --acc-txt:#FFE0D8;
  --acc-rgb:246,134,113; --acc-d2-rgb:214,92,70; --acc-xxl-rgb:255,183,163;
  --acc-clair:#A63C22; --acc-clair-l:#B44528; --acc-clair-d:#98341C;
  --acc-lab-clair:#8E3F2E; --etoiles:#8A5A12;
  --band-txt:#33120C; --band-txt2:#3E1710;

  /* Métal brossé relevé sur le feed : sert de fond aux blocs qui étaient
     entièrement en aplat d'accent, quelle que soit la palette choisie. */
  --metal:
    repeating-linear-gradient(96deg, rgba(255,255,255,.07) 0 2px, rgba(22,41,43,.05) 2px 5px),
    linear-gradient(163deg, #EDEFEF 0%, #C2CACD 26%, #E4E8E9 46%, #A8B2B6 68%, #D3D9DA 88%, #B6BFC2 100%);
  --metal-txt:#14262A;

  --coral:var(--acc); --coral-d:var(--acc-d);
  --cream:#FFFDF9; --ink:#17282A; --muted:#6B8285; --onDark:#EAF3F4;
  --s5-respire:clamp(16px, 3.4vh, 38px);
  --grain:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27260%27%20height%3D%27260%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.82%27%20numOctaves%3D%274%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27%20opacity%3D%270.55%27%2F%3E%3C%2Fsvg%3E");
  --s5-gout:14px;
  background:var(--cream); color:var(--ink); padding:var(--s5-gout);
  font-family:Commissioner,system-ui,-apple-system,sans-serif; line-height:1.6;
  position:relative;
}
/* Jaune du feed, conservé en option de comparaison. */
.s5[data-palette="feed"],
.s5[data-palette="feed-da"]{
  --acc:#EDE22F; --acc-d:#D9CE1F; --acc-l:#F2E85C; --acc-xl:#F5EC72;
  --acc-xxl:#F9F29B; --acc-d2:#CFC41A; --acc-pale:#F6EE7A; --acc-mid:#E8DD3A;
  --acc-txt:#F6EE7A;
  --acc-rgb:237,226,47; --acc-d2-rgb:207,196,26; --acc-xxl-rgb:249,242,155;
  /* sur crème le jaune tombe à 1,3:1 : le feed y écrit en canard */
  --acc-clair:#24413F; --acc-clair-l:#2B4B49; --acc-clair-d:#17302E;
  --acc-lab-clair:#24413F; --etoiles:#6A5A0A;
  --band-txt:#2A2705; --band-txt2:#33300A;
}
.s5 *{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
.s5 h1,.s5 h2,.s5 h3{
  font-family:'Fugaz One',Impact,sans-serif; font-weight:400;
  text-transform:uppercase; line-height:1.16; letter-spacing:.005em; margin:0;
}
.s5 p{margin:0 0 12px; max-width:64ch}
.s5 a{color:inherit}

/* ---------------------------------------------------------------
   Panneaux : dégradé maillé plutôt qu'aplat, + grain par-dessus
   --------------------------------------------------------------- */
.s5-panel{
  position:relative; isolation:isolate;
  border-radius:26px; margin-bottom:14px; overflow:hidden;
  padding:clamp(24px,3.6vw,52px);
  color:var(--onDark);
  background:
    radial-gradient(115% 85% at 12% 8%,  rgba(72,113,118,.85) 0%, rgba(72,113,118,0) 58%),
    radial-gradient(95% 75% at 88% 96%,  rgba(20,42,44,.9)   0%, rgba(20,42,44,0)   62%),
    linear-gradient(155deg, #305055 0%, #24403F 52%, #1D3739 100%);
}
/* le grain, posé sur chaque panneau */
.s5-panel::after,
.s5-mq::after,
.s5-photo::after{
  content:""; position:absolute; inset:0; z-index:2;
  background-image:var(--grain); background-size:260px 260px;
  opacity:.3; mix-blend-mode:overlay; pointer-events:none;
}
.s5-panel>*{position:relative; z-index:3}

.s5-light{
  color:var(--p);
  background:
    radial-gradient(110% 80% at 88% 6%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(90% 70% at 6% 94%,  rgba(178,205,212,.75) 0%, rgba(178,205,212,0) 62%),
    linear-gradient(150deg, #E2EEF1 0%, #D3E4E9 55%, #C4DAE0 100%);
}
.s5-light::after{opacity:.2; mix-blend-mode:multiply}

.s5-lab{
  font-size:11px; letter-spacing:.15em; text-transform:uppercase;
  font-weight:800; color:var(--coral); margin-bottom:10px;
}
.s5-light .s5-lab{color:var(--acc-lab-clair)}
.s5-intro{font-size:16px; color:var(--mist)}
.s5-intro.s5-dark{color:var(--p)}

/* ---------------------------------------------------------------
   Boutons : encre foncée sur corail + halo diffus
   Le site actuel met du blanc sur ce corail : 2,45:1, sous le seuil.
   L'encre foncée monte à 6,24:1 sans changer la couleur de marque.
   --------------------------------------------------------------- */
.s5-btn{
  display:inline-flex; align-items:center; gap:10px; position:relative;
  background:linear-gradient(145deg, var(--acc-xl) 0%, var(--coral) 45%, var(--coral-d) 100%);
  color:var(--ink) !important; text-decoration:none;
  font-weight:800; font-size:15px; padding:14px 26px; border-radius:999px;
  border:none; cursor:pointer; font-family:inherit; white-space:nowrap;
  box-shadow:0 6px 22px rgba(var(--acc-rgb),.34), inset 0 1px 0 rgba(255,255,255,.42);
  transition:transform .2s, box-shadow .2s, filter .2s;
}
.s5-btn:hover,.s5-btn:focus{
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(var(--acc-rgb),.46), inset 0 1px 0 rgba(255,255,255,.5);
}
.s5-btn:focus-visible{outline:3px solid var(--onDark); outline-offset:3px}

/* ---------------------------------------------------------------
   Ouverture : filigrane 550, comme sur le site actuel
   --------------------------------------------------------------- */
.s5-nav{display:flex; align-items:center; justify-content:space-between; gap:18px;
  flex-wrap:wrap; margin-bottom:34px}
.s5-navlinks{display:flex; gap:20px; list-style:none; margin:0; padding:0;
  font-size:13.5px; font-weight:600; opacity:.9}
.s5-nav a{text-decoration:none}
.s5-navlinks a{color:var(--onDark)}
.s5-hero{
  /* la fenêtre, moins les marges du gabarit, la hauteur du bandeau et
     une respiration : le bandeau s'arrête un peu avant le bas de l'écran,
     ce qui montre que la page continue au lieu de sembler s'arrêter là.
     --s5-mq est mesuré au chargement ; 66px est le repli. */
  min-height:calc(100vh - 28px - var(--s5-mq, 66px) - var(--s5-respire));
  min-height:calc(100svh - 28px - var(--s5-mq, 66px) - var(--s5-respire));
  display:flex; flex-direction:column;
}
.s5-hero h1{font-size:clamp(30px,5.8vw,70px); max-width:12ch; margin-top:auto;
  text-shadow:0 2px 30px rgba(10,22,24,.34)}
.s5-h1lead{display:block}
.s5-watermark{
  /* entièrement dans le container : coin haut droit, dégagé des boutons
     (en bas) comme du titre (à gauche). */
  position:absolute; z-index:1; right:4%; top:7%;
  height:clamp(220px,32vw,440px); width:auto;
  opacity:.055; pointer-events:none; user-select:none;
}
.s5-herofoot{display:flex; flex-direction:column; align-items:flex-start;
  gap:22px; margin-top:32px}
.s5-herofoot p{max-width:46ch; color:var(--mist); margin:0; font-size:16px}

/* Sur ordinateur : les boutons reprennent leur place à droite de
   l'accroche, et l'ensemble remonte — le titre a de l'air sous lui
   plutôt que d'être plaqué en bas du panneau. */
@media (min-width:900px){
  .s5-herofoot{
    flex-direction:row; flex-wrap:wrap;
    align-items:flex-end; justify-content:space-between;
    gap:26px; margin-bottom:clamp(18px, 6vh, 76px);
  }
  .s5-herofoot p{max-width:42ch}
  .s5-herofoot .s5-cta2{flex:none}
}

/* ---------------------------------------------------------------
   Bandeau défilant
   --------------------------------------------------------------- */
.s5-mq{
  /* la marge basse vaut la respiration : la section suivante commence
     donc pile sous la ligne de flottaison, sans liseré qui dépasse. */
  position:relative; overflow:hidden; border-radius:26px;
  /* +4px de tolérance : les arrondis des clamp laissaient parfois
     un liseré du panneau suivant dépasser sous la ligne. */
  margin-bottom:calc(max(14px, var(--s5-respire, 14px)) + 4px);
  padding:14px 0; color:var(--ink);
  background:
    radial-gradient(80% 140% at 12% 50%, rgba(var(--acc-xxl-rgb),.9) 0%, rgba(var(--acc-xxl-rgb),0) 55%),
    radial-gradient(70% 130% at 88% 50%, rgba(var(--acc-d2-rgb),.55) 0%, rgba(var(--acc-d2-rgb),0) 60%),
    linear-gradient(100deg, var(--acc-l) 0%, var(--acc) 46%, var(--acc-d2) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
}
.s5-mq::after{opacity:.45; mix-blend-mode:soft-light}
.s5-mrow{display:flex; gap:32px; width:max-content; animation:s5sl 34s linear infinite; position:relative; z-index:3}
.s5-mrow span{font-family:'Fugaz One',Impact,sans-serif; text-transform:uppercase;
  font-size:clamp(15px,2vw,23px); display:flex; align-items:center; gap:32px; white-space:nowrap}
.s5-mrow span::after{content:""; width:8px; height:8px; border-radius:50%;
  background:var(--p); flex:none; opacity:.55}
@keyframes s5sl{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.s5-mrow{animation:none}}

/* ---------------------------------------------------------------
   En-tête de panneau, colonnes
   --------------------------------------------------------------- */
.s5-head{display:flex; flex-wrap:wrap; gap:18px; align-items:flex-start;
  justify-content:space-between; margin-bottom:28px}
.s5-head h2{font-size:clamp(22px,4vw,46px); margin-left:auto; text-align:right;
  max-width:16ch; order:2}
.s5-head .s5-lab{order:1; padding-top:8px; margin:0}
.s5-split{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  gap:clamp(20px,3vw,42px); align-items:center}
.s5-split h2{font-size:clamp(21px,3.4vw,40px); margin-bottom:14px}
.s5-splitmedia{min-width:0}

/* ---------------------------------------------------------------
   Emplacements photo : voile bleu-canard + grain, comme les visuels du site
   --------------------------------------------------------------- */
.s5-photo{
  position:relative; overflow:hidden; width:100%; border-radius:18px;
  display:grid; place-items:center;
  background:
    radial-gradient(90% 70% at 25% 20%, rgba(88,132,138,.55) 0%, rgba(88,132,138,0) 60%),
    linear-gradient(150deg, #43696E 0%, #2B484B 55%, #1D3739 100%);
  box-shadow:inset 0 0 0 1.5px rgba(234,243,244,.14), inset 0 -60px 90px -50px rgba(0,0,0,.5);
}
.s5-photo::after{opacity:.4}
.s5-photo span{
  position:relative; z-index:3; font-size:12.5px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:rgba(234,243,244,.62);
  text-align:center; padding:10px;
}

/* ---------------------------------------------------------------
   Disciplines, planning, tarifs
   --------------------------------------------------------------- */
.s5-disc{display:grid; grid-template-columns:repeat(auto-fit,minmax(178px,1fr)); gap:16px}
.s5-d{
  background:linear-gradient(158deg, rgba(255,253,249,.13) 0%, rgba(255,253,249,.05) 100%);
  border:1px solid rgba(234,243,244,.1);
  border-radius:18px; padding:26px 22px 22px; transition:transform .2s, background .2s;
}
.s5-d:hover{transform:translateY(-3px); background:linear-gradient(158deg, rgba(255,253,249,.19) 0%, rgba(255,253,249,.08) 100%)}
.s5-d h3{font-size:19px; margin-bottom:12px; line-height:1.2}
.s5-d p{font-size:13px; color:var(--mist); opacity:.88; margin:0}

.s5-planning-wrap{
  background:var(--cream); border-radius:18px; padding:clamp(14px,2vw,24px);
  box-shadow:0 18px 44px rgba(12,26,28,.28);
}
/* .s5 p impose une mesure de 64ch, plus spécifique que .s550-cta : le
   paragraphe du bouton restait à 668 px et le bouton se centrait dedans. */
/* La même règle ramenait sa marge à 0 0 12px : le bouton touchait la
   dernière carte du planning. */
.s5 .s550-cta{max-width:none; width:100%; margin:26px 0 0}

/* pendant la mesure des hauteurs, aucune transition ne doit fausser le relevé */

/* Chaque carte est sélectionnable. Le bouton couvre la carte entière ;
   le lien d'inscription passe au-dessus. Deux éléments interactifs frères,
   jamais imbriqués. */

.s5-t{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
.s5-pr{font-family:'Fugaz One',Impact,sans-serif; font-size:clamp(24px,3.2vw,38px);
  line-height:1; text-align:right; display:none;
  /* « 44 € » se coupait entre le nombre et l'euro dès que le nom de la
     formule tenait sur deux lignes et rognait la place disponible. */
  white-space:nowrap; flex:0 0 auto}
.s5-pr small{display:block; font-family:inherit; font-size:12px; opacity:.6; font-weight:400}
.s5-acc{color:var(--mist); font-size:13.5px; margin:0}
.s5-lignes{display:none; list-style:none; padding:0; margin:2px 0 0;
  flex-direction:column; gap:9px}
.s5-lignes li{display:flex; gap:9px; font-size:13.5px; line-height:1.4}
.s5-lignes li::before{content:"\2713"; color:var(--coral-d); font-weight:800; flex:none}

/* --- carte sélectionnée --- */

@media (prefers-reduced-motion:reduce){
}

.s5-legal{font-size:12.5px; color:var(--mist); opacity:.7; margin:16px 0 0; max-width:60ch}


/* ---------------------------------------------------------------
   Rappel final + signalements de contenu manquant
   --------------------------------------------------------------- */


@media (max-width:860px){
  .s5-split{grid-template-columns:1fr}
  .s5-split .s5-splitmedia{order:-1}
  .s5-watermark{height:clamp(180px,44vw,320px); right:3%; top:6%}
}
@media (max-width:720px){
  .s5-head h2{text-align:left; margin-left:0}
  
}

/* ---------------------------------------------------------------
   Équipe — cartes à retournement, reprises de la page « à propos ».
   Le verso est toujours dans le code : lisible par Google et par les
   lecteurs d'écran, même quand il n'est pas affiché.
   --------------------------------------------------------------- */
/* Le nombre de portraits varie — quatre coachs, quatre praticiens, et
   demain peut-être cinq. La grille s'ajuste au lieu d'imposer trois
   colonnes, qui laissaient la quatrième carte seule sur sa ligne. */
.s5-coachs{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
  gap:16px; margin-top:26px;
}
@media (max-width:900px){.s5-coachs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.s5-coachs{grid-template-columns:1fr}}
.s5-coach{position:relative; perspective:1400px}
.s5-coach-in{
  position:relative; transform-style:preserve-3d;
  transition:transform .62s cubic-bezier(.4,.2,.2,1);
  aspect-ratio:3 / 4;
}
.s5-coach:hover .s5-coach-in,
.s5-coach.is-flipped .s5-coach-in,
.s5-coach:focus-within .s5-coach-in{transform:rotateY(180deg)}

.s5-coach-face,.s5-coach-back{
  position:absolute; inset:0; border-radius:20px; overflow:hidden;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
.s5-coach-face img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(.35) contrast(1.04);
}
/* le voile bleu-canard des visuels du site */
.s5-coach-face::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(168deg, rgba(43,72,75,.18) 0%, rgba(29,55,57,.9) 78%);
}
.s5-coach-id{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:18px 18px 20px;
}
.s5-coach-id h3{font-size:20px; color:#FFFDF9; margin:0 0 3px}
.s5-coach-id p{
  margin:0; font-size:12px; letter-spacing:.09em; text-transform:uppercase;
  font-weight:800; color:var(--coral);
}
.s5-coach-back{
  transform:rotateY(180deg); padding:22px;
  display:flex; flex-direction:column; gap:10px; justify-content:center;
  background:linear-gradient(158deg, #305055 0%, #24403F 55%, #1B3436 100%);
  color:var(--onDark);
}
.s5-coach-back h3{font-size:18px; color:var(--coral)}
.s5-coach-back p{font-size:13px; line-height:1.5; margin:0; color:var(--mist)}

.s5-coach-flip{
  position:absolute; inset:0; z-index:3; border:none; background:transparent;
  cursor:pointer; border-radius:20px; padding:0; font:inherit;
}
.s5-coach-flip:focus-visible{outline:3px solid var(--coral); outline-offset:3px}

/* Sans 3D : on empile et on montre le verso, plutôt qu'un effet dégradé. */
@media (prefers-reduced-motion:reduce){
  .s5-coach-in{transition:none}
  .s5-coach:hover .s5-coach-in,
  .s5-coach.is-flipped .s5-coach-in,
  .s5-coach:focus-within .s5-coach-in{transform:none}
  .s5-coach-face,.s5-coach-back{backface-visibility:visible}
  .s5-coach-back{transform:none; opacity:0; transition:none}
  .s5-coach:hover .s5-coach-back,
  .s5-coach.is-flipped .s5-coach-back,
  .s5-coach:focus-within .s5-coach-back{opacity:1}
}

/* Deux appels à l'action côte à côte : essai gratuit et drop-in. */
.s5-cta2{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.s5-cta2.s5-center{justify-content:center}
.s5-ghost{
  background:transparent !important; color:var(--onDark) !important;
  border:1.5px solid rgba(234,243,244,.5) !important;
  box-shadow:none !important;
}
.s5-ghost:hover,.s5-ghost:focus{
  background:rgba(234,243,244,.12) !important;
  box-shadow:none !important;
}
.s5-light .s5-ghost{color:var(--p) !important; border-color:rgba(43,72,75,.4) !important}
.s5-light .s5-ghost:hover{background:rgba(43,72,75,.08) !important}

/* ---------------------------------------------------------------
   Mantra — le bloc de texte suivi de la page. Sur une page unique,
   c'est quasiment le seul endroit où Google trouve de la prose :
   il porte donc les mots-clés locaux, placés dans les 50 premiers mots.
   --------------------------------------------------------------- */
.s5-mantra{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1fr);
  gap:clamp(24px,4vw,54px); align-items:center}
.s5-mantra blockquote{margin:0}
.s5-mantra-line{
  font-family:'Fugaz One',Impact,sans-serif; text-transform:uppercase;
  font-size:clamp(26px,4.2vw,52px); line-height:1.14; margin:0 0 14px;
  color:var(--onDark); max-width:11ch;
}
.s5-mantra blockquote cite{
  font-style:normal; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:800; color:var(--coral);
}
.s5-mantra-txt p{font-size:15px; color:var(--mist); max-width:62ch}
.s5-mantra-txt p:last-child{margin-bottom:0}
.s5-mantra-txt strong{color:var(--onDark); font-weight:700}
@media (max-width:860px){.s5-mantra{grid-template-columns:1fr}.s5-mantra-line{max-width:none}}

/* ---------------------------------------------------------------
   Panneaux photographiés — la photo passe sous le voile bleu-canard
   et sous le grain, pour rester dans la DA du site.
   Ordre des couches : 0 photo · 1 voile · 2 grain · 3 contenu.
   --------------------------------------------------------------- */
.s5-haspic{background:#16292B}
.s5-bg{
  position:absolute; inset:0; z-index:0; width:100%; height:100%;
  object-fit:cover; filter:grayscale(.28) contrast(1.06);
  transition:opacity 1.1s ease;
}
/* Fondu enchaîné : la photo se retire pendant que la vidéo se révèle,
   au lieu de rester visible dessous. Sans transition parallèle des deux
   couches, on lirait deux images superposées. */
.s5-hero.is-video .s5-bg{opacity:0}
.s5-haspic::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(105% 80% at 12% 8%, rgba(58,98,102,.62) 0%, rgba(58,98,102,0) 58%),
    linear-gradient(152deg, rgba(38,64,67,.82) 0%, rgba(27,52,54,.93) 58%, rgba(20,40,42,.96) 100%);
}

/* Le hero porte une vidéo : voile plus dense que le mantra, avec un
   renfort sombre à droite pour masquer le logo/véhicule de la vidéo et
   asseoir les boutons. */
.s5-hero.s5-haspic::before{
  background:
    /* Voile allégé : la vidéo de fond était presque entièrement masquée.
       Le dégradé reste plus dense en bas à gauche, là où se posent le
       titre et les boutons, et s'éclaircit sur le reste de l'image. */
    radial-gradient(120% 90% at 100% 30%, rgba(16,32,34,.5) 0%, rgba(16,32,34,0) 58%),
    radial-gradient(105% 80% at 12% 8%, rgba(58,98,102,.34) 0%, rgba(58,98,102,0) 60%),
    linear-gradient(152deg, rgba(34,58,61,.52) 0%, rgba(24,46,48,.7) 52%, rgba(18,36,38,.84) 100%);
}

/* Emplacements photo : même traitement, image réelle ou pas. */
.s5-photo img{
  position:absolute; inset:0; z-index:0; width:100%; height:100%;
  object-fit:cover; filter:grayscale(.28) contrast(1.06);
}
.s5-photo::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(158deg, rgba(43,72,75,.34) 0%, rgba(29,55,57,.62) 100%);
}

/* ---------------------------------------------------------------
   Appel à l'action de mi-page — même corail grainé que le bandeau
   défilant, pour que les deux se répondent. Placé juste après le
   planning : le moment où le visiteur repère un créneau qui lui va.
   --------------------------------------------------------------- */
.s5-band{
  color:var(--ink);
  background:
    radial-gradient(70% 130% at 14% 20%, rgba(var(--acc-xxl-rgb),.92) 0%, rgba(var(--acc-xxl-rgb),0) 58%),
    radial-gradient(70% 130% at 86% 90%, rgba(var(--acc-d2-rgb),.55) 0%, rgba(var(--acc-d2-rgb),0) 62%),
    linear-gradient(112deg, var(--acc-l) 0%, var(--acc) 48%, var(--acc-d2) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
}
.s5-band::after{opacity:.45; mix-blend-mode:soft-light}
.s5-band-in{
  display:flex; flex-wrap:wrap; gap:26px;
  align-items:center; justify-content:space-between;
}
.s5-band-lab{
  font-size:11px; letter-spacing:.15em; text-transform:uppercase;
  font-weight:800; color:var(--band-txt); margin-bottom:10px;
}
.s5-band h2{font-size:clamp(24px,4vw,46px); margin:0 0 10px; max-width:15ch}
.s5-band p{margin:0; max-width:46ch; font-size:15.5px; color:var(--band-txt2)}

/* Sur le corail, le bouton s'inverse : bleu-canard plein, texte crème. */
.s5-btn-dark{
  background:linear-gradient(150deg, #35565A 0%, var(--p) 55%, #1F393B 100%) !important;
  color:var(--cream) !important;
  box-shadow:0 8px 26px rgba(20,40,42,.32), inset 0 1px 0 rgba(255,255,255,.14) !important;
}
.s5-btn-dark:hover,.s5-btn-dark:focus{
  box-shadow:0 14px 34px rgba(20,40,42,.42), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.s5-btn-dark:focus-visible{outline:3px solid var(--band-txt); outline-offset:3px}

/* ---------------------------------------------------------------
   « Au cœur de l'effort » — section épinglée.
   La section est haute (le « rail » de défilement) ; à l'intérieur,
   un bloc collant occupe l'écran et ne bouge plus. Le défilement ne
   fait donc plus avancer la page : il pilote l'animation.
   Aucun overflow:hidden sur le rail, sinon le collant ne colle plus.
   --------------------------------------------------------------- */
.s5-echo{
  --p:0;
  height:280vh; margin-bottom:14px;
  position:relative;
}
.s5-echo-pin{
  position:sticky; top:14px;
  height:calc(100vh - 28px);
  height:calc(100svh - 28px);
  display:grid; place-items:center;
  border-radius:26px; overflow:hidden; isolation:isolate;
  color:var(--onDark);
  background:
    radial-gradient(115% 85% at 12% 8%,  rgba(72,113,118,.85) 0%, rgba(72,113,118,0) 58%),
    radial-gradient(95% 75% at 88% 96%,  rgba(20,42,44,.9)   0%, rgba(20,42,44,0)   62%),
    linear-gradient(155deg, #305055 0%, #24403F 52%, #1D3739 100%);
}
.s5-echo-pin::after{
  content:""; position:absolute; inset:0; z-index:2;
  background-image:var(--grain); background-size:260px 260px;
  opacity:.3; mix-blend-mode:overlay; pointer-events:none;
}
.s5-echo-wrap{
  position:relative; z-index:3; display:grid; place-items:center;
  transform:scale(.38); will-change:transform;
}
.s5-echo-l,.s5-echo-top{
  grid-area:1 / 1;
  font-family:'Fugaz One',Impact,sans-serif; font-weight:400;
  text-transform:uppercase; text-align:center;
  font-size:clamp(38px,9.5vw,118px); line-height:.92; letter-spacing:.005em;
  white-space:nowrap;
}
.s5-echo-l{
  color:transparent;
  -webkit-text-stroke:1.4px rgba(234,243,244,.62);
  opacity:0; will-change:transform,opacity; z-index:1;
}
.s5-echo-top{color:var(--onDark); position:relative; z-index:2}


/* Sans animation : pas de rail, la section tient sur un écran et
   le texte est directement à sa taille finale, contours écartés. */
@media (prefers-reduced-motion:reduce){
  .s5-echo{height:auto}
  .s5-echo-pin{position:static; min-height:calc(100svh - 28px)}
  .s5-echo-wrap{transform:none}
  .s5-echo-l{opacity:.5}
  .s5-echo-l[data-e="1"]{transform:translateY(.13em)}
  .s5-echo-l[data-e="2"]{transform:translateY(.26em)}
  .s5-echo-l[data-e="3"]{transform:translateY(.39em)}
  .s5-echo-l[data-e="4"]{transform:translateY(.52em)}
  .s5-echo-l[data-e="5"]{transform:translateY(.65em)}
}

/* ---------------------------------------------------------------
   Appel à l'action de mi-page — même corail grainé que le bandeau
   défilant, pour que les deux se répondent. Placé juste après le
   planning : le moment où le visiteur repère un créneau qui lui va.
   --------------------------------------------------------------- */
.s5-band{
  color:var(--ink);
  background:
    radial-gradient(70% 130% at 14% 20%, rgba(var(--acc-xxl-rgb),.92) 0%, rgba(var(--acc-xxl-rgb),0) 58%),
    radial-gradient(70% 130% at 86% 90%, rgba(var(--acc-d2-rgb),.55) 0%, rgba(var(--acc-d2-rgb),0) 62%),
    linear-gradient(112deg, var(--acc-l) 0%, var(--acc) 48%, var(--acc-d2) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
}
.s5-band::after{opacity:.45; mix-blend-mode:soft-light}
.s5-band-in{
  display:flex; flex-wrap:wrap; gap:26px;
  align-items:center; justify-content:space-between;
}
.s5-band-lab{
  font-size:11px; letter-spacing:.15em; text-transform:uppercase;
  font-weight:800; color:var(--band-txt); margin-bottom:10px;
}
.s5-band h2{font-size:clamp(24px,4vw,46px); margin:0 0 10px; max-width:15ch}
.s5-band p{margin:0; max-width:46ch; font-size:15.5px; color:var(--band-txt2)}

/* Sur le corail, le bouton s'inverse : bleu-canard plein, texte crème. */
.s5-btn-dark{
  background:linear-gradient(150deg, #35565A 0%, var(--p) 55%, #1F393B 100%) !important;
  color:var(--cream) !important;
  box-shadow:0 8px 26px rgba(20,40,42,.32), inset 0 1px 0 rgba(255,255,255,.14) !important;
}
.s5-btn-dark:hover,.s5-btn-dark:focus{
  box-shadow:0 14px 34px rgba(20,40,42,.42), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.s5-btn-dark:focus-visible{outline:3px solid var(--band-txt); outline-offset:3px}

/* ---------------------------------------------------------------
   Logos
   --------------------------------------------------------------- */
.s5-logo{display:block; flex:none; line-height:0}
.s5-logo img{height:clamp(30px,3.4vw,42px); width:auto; display:block}
.s5-logo:focus-visible{outline:3px solid var(--coral); outline-offset:4px; border-radius:6px}

.s5-affil{
  width:min(150px,38vw); height:auto; display:block;
  margin:clamp(26px,4vw,40px) auto 0; opacity:.5;
  filter:brightness(0) invert(1);   /* le SVG est noir : on le passe en clair */
}

/* ---------------------------------------------------------------
   Menu — au survol, la pastille passe en corail grainé.
   isolation:isolate confine le z-index:-1 à l'intérieur du lien,
   sinon la pastille passerait derrière le fond du panneau.
   --------------------------------------------------------------- */
.s5-navlinks a{
  position:relative; isolation:isolate;
  display:inline-block; padding:8px 15px; border-radius:999px;
  transition:color .22s ease;
}
.s5-navlinks a::before,
.s5-navlinks a::after{
  content:""; position:absolute; inset:0; z-index:-1;
  border-radius:999px; opacity:0; transition:opacity .22s ease;
}
.s5-navlinks a::before{
  background:
    radial-gradient(80% 140% at 18% 40%, rgba(var(--acc-xxl-rgb),.95) 0%, rgba(var(--acc-xxl-rgb),0) 60%),
    linear-gradient(104deg, var(--acc-l) 0%, var(--acc) 50%, var(--acc-d2) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
}
.s5-navlinks a::after{
  background-image:var(--grain); background-size:260px 260px;
  mix-blend-mode:soft-light;
}
.s5-navlinks a:hover,
.s5-navlinks a:focus-visible{color:var(--ink)}
.s5-navlinks a:hover::before,
.s5-navlinks a:focus-visible::before{opacity:1}
.s5-navlinks a:hover::after,
.s5-navlinks a:focus-visible::after{opacity:.45}
.s5-navlinks a:focus-visible{outline:3px solid rgba(234,243,244,.8); outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .s5-navlinks a,.s5-navlinks a::before,.s5-navlinks a::after{transition:none}
}

/* ---------------------------------------------------------------
   Signature de fin — le compteur qui devient le logo.
   Même mécanique épinglée que « Au cœur de l'effort » : la section
   est un rail, le bloc reste collé, le défilement fait tourner le
   compteur jusqu'à 550 puis fond vers le logotype.
   --------------------------------------------------------------- */
.s5-count{--p:0; height:230vh; margin-bottom:14px; position:relative}
.s5-count-pin{
  position:sticky; top:14px;
  height:calc(100vh - 28px);
  height:calc(100svh - 28px);
  display:grid; place-items:center; align-content:center; gap:clamp(18px,3vw,30px);
  border-radius:26px; overflow:hidden; isolation:isolate; color:var(--onDark);
  background:
    radial-gradient(110% 80% at 82% 12%, rgba(72,113,118,.8) 0%, rgba(72,113,118,0) 58%),
    radial-gradient(90% 70% at 10% 92%, rgba(18,38,40,.92) 0%, rgba(18,38,40,0) 60%),
    linear-gradient(200deg, #2C4B50 0%, #213B3D 54%, #172E30 100%);
}
.s5-count-pin::after{
  content:""; position:absolute; inset:0; z-index:2;
  background-image:var(--grain); background-size:260px 260px;
  opacity:.3; mix-blend-mode:overlay; pointer-events:none;
}
.s5-count-stage{position:relative; z-index:3; display:grid; place-items:center}

.s5-count-num{
  grid-area:1 / 1;
  font-family:'Fugaz One',Impact,sans-serif; font-weight:400;
  font-size:clamp(96px,26vw,320px); line-height:.86;
  color:var(--onDark); display:flex; letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}
.s5-count-num i{font-style:normal; display:block; will-change:transform}
/* le 5 de tête garde un léger jeu, comme dans le logotype */
.s5-d1{transform-origin:50% 60%}

.s5-count-logo{
  grid-area:1 / 1; align-self:center;
  width:min(460px,74vw); height:auto;
  opacity:0; will-change:opacity,transform;
}
/* Sous le logotype : une vraie phrase, pas une ligne de chiffres. C'est
   le dernier bloc de texte de la page, autant qu'il serve. */
.s5-count-cap{
  position:relative; z-index:3; margin:0 auto; text-align:center;
  max-width:58ch; font-size:14px; line-height:1.65;
  color:rgba(234,243,244,.62); letter-spacing:0; text-transform:none;
  font-weight:400;
}

@media (prefers-reduced-motion:reduce){
  .s5-count{height:auto}
  .s5-count-pin{position:static; min-height:calc(100svh - 28px)}
  .s5-count-num{display:none}
  .s5-count-logo{opacity:1}
}

/* ---------------------------------------------------------------
   Pied de page — l'appel à l'action, les infos pratiques, et les
   liens vers les pages satellites. Ce sont eux qui relient la page
   unique à son dispositif de référencement local.
   --------------------------------------------------------------- */
.s5-foot{display:flex; flex-direction:column; gap:clamp(30px,5vw,52px)}
.s5-foot-cta{text-align:center}
.s5-foot-cta h2{font-size:clamp(24px,4.4vw,50px); margin:0 0 12px}
.s5-foot-cta p{margin:0 auto 22px; color:var(--mist); max-width:52ch}

.s5-foot-cols{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:clamp(20px,3vw,36px);
  border-top:1px solid rgba(234,243,244,.16); padding-top:clamp(26px,4vw,40px);
}
.s5-foot-cols h3{
  font-family:Commissioner,sans-serif; font-weight:800; text-transform:uppercase;
  font-size:11px; letter-spacing:.15em; color:var(--coral); margin:0 0 12px;
}
.s5-foot-cols p{margin:0 0 10px; font-size:14px; color:var(--mist); max-width:none}
.s5-foot-cols ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px}
.s5-foot-cols a{font-size:14px; color:var(--mist); text-decoration:none; border-bottom:1px solid transparent}
.s5-foot-cols a:hover,.s5-foot-cols a:focus-visible{color:var(--onDark); border-bottom-color:var(--coral)}

.s5-foot-bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:16px 26px;
  border-top:1px solid rgba(234,243,244,.16); padding-top:clamp(20px,3vw,28px);
}
.s5-foot-bar .s5-affil{margin:0; width:120px}
.s5-foot-legal{margin:0; font-size:12.5px; color:rgba(234,243,244,.55)}
.s5-foot-bar nav{display:flex; flex-wrap:wrap; gap:8px 18px; margin-left:auto}
.s5-foot-bar nav a,
.s5-foot-credit a{font-size:12.5px; color:rgba(234,243,244,.55); text-decoration:none}
.s5-foot-bar nav a:hover,.s5-foot-bar nav a:focus-visible,
.s5-foot-credit a:hover,.s5-foot-credit a:focus-visible{color:var(--coral)}
@media (max-width:640px){.s5-foot-bar nav{margin-left:0}}

/* ---------------------------------------------------------------
   Menu mobile — le bouton d'essai quitte la barre au profit d'un
   menu dépliant. Il n'est pas perdu pour autant : il est repris à
   l'intérieur du menu, avec le drop-in.
   --------------------------------------------------------------- */
.s5-burger{
  display:none; flex:none; width:44px; height:44px; padding:11px 9px;
  border:none; background:transparent; cursor:pointer;
  flex-direction:column; justify-content:space-between;
}
.s5-burger span{
  display:block; height:2px; width:100%; border-radius:2px;
  background:var(--onDark); transition:transform .28s ease, opacity .2s ease;
}
.s5-burger:focus-visible{outline:3px solid var(--coral); outline-offset:2px; border-radius:8px}
.s5-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.s5-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.s5-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

.s5-menu{display:none}
.s5-menu-cta{display:none}

@media (max-width:820px){
  .s5-nav{gap:12px}
  .s5-burger{display:flex}
  .s5-nav-cta{display:none}          /* le bouton quitte la barre */
  .s5-navlinks{display:none}         /* les liens passent dans le menu */

  .s5-menu{
    display:flex; position:fixed; inset:0; z-index:90;
    display:flex; flex-direction:column; justify-content:center; gap:26px;
    padding:clamp(28px,7vw,56px);
    background:
      radial-gradient(90% 60% at 80% 8%, rgba(72,113,118,.7) 0%, rgba(72,113,118,0) 60%),
      linear-gradient(165deg, #2B484B 0%, #1D3739 60%, #14282A 100%);
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity .26s ease, transform .26s ease, visibility .26s;
  }
  .s5-menu.is-open{opacity:1; visibility:visible; transform:none}

  .s5-menu ul{
    display:flex; flex-direction:column; gap:4px;
    list-style:none; margin:0; padding:0;
  }
  .s5-menu ul a{
    position:relative; isolation:isolate;
    display:block; padding:13px 16px; border-radius:14px;
    font-family:'Fugaz One',Impact,sans-serif; font-weight:400;
    text-transform:uppercase; font-size:clamp(22px,6.4vw,34px);
    color:var(--onDark); text-decoration:none; opacity:1;
    transition:color .2s ease;
  }
  .s5-menu ul a::before,
  .s5-menu ul a::after{
    content:""; position:absolute; inset:0; z-index:-1;
    border-radius:14px; opacity:0; transition:opacity .2s ease;
  }
  .s5-menu ul a::before{
    background:
      radial-gradient(70% 160% at 16% 50%, rgba(var(--acc-xxl-rgb),.95) 0%, rgba(var(--acc-xxl-rgb),0) 60%),
      linear-gradient(104deg, var(--acc-l) 0%, var(--acc) 50%, var(--acc-d2) 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
  }
  .s5-menu ul a::after{
    background-image:var(--grain); background-size:260px 260px;
    mix-blend-mode:soft-light;
  }
  .s5-menu ul a:hover,
  .s5-menu ul a:focus-visible,
  .s5-menu ul a:active{color:var(--ink)}
  .s5-menu ul a:hover::before,
  .s5-menu ul a:focus-visible::before,
  .s5-menu ul a:active::before{opacity:1}
  .s5-menu ul a:active::before,
  .s5-menu ul a:active::after{transition:none}
  .s5-menu ul a:hover::after,
  .s5-menu ul a:focus-visible::after,
  .s5-menu ul a:active::after{opacity:.45}
  .s5-menu ul a:focus-visible{outline:3px solid rgba(234,243,244,.8); outline-offset:2px}
  .s5-menu-cta{
    display:flex; flex-direction:column; gap:10px;
    border-top:1px solid rgba(234,243,244,.18); padding-top:22px;
  }
  .s5-menu-cta .s5-btn{justify-content:center}

}

/* Le corps ne défile plus derrière le menu ouvert. */
/* La croix de fermeture : le hamburger est sous l'overlay, donc
   inatteignable une fois le menu ouvert. */
.s5-menu-close{
  position:absolute; top:clamp(18px,4vw,26px); right:clamp(18px,4vw,26px);
  width:46px; height:46px; border:none; background:transparent; cursor:pointer;
  display:grid; place-items:center;
}
.s5-menu-close span{
  grid-area:1 / 1; display:block; width:24px; height:2px; border-radius:2px;
  background:var(--onDark);
}
.s5-menu-close span:nth-child(1){transform:rotate(45deg)}
.s5-menu-close span:nth-child(2){transform:rotate(-45deg)}
.s5-menu-close:hover span{background:var(--coral)}
.s5-menu-close:focus-visible{outline:3px solid var(--coral); outline-offset:2px; border-radius:10px}

.s5-menu-ouvert{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .s5-burger span,.s5-menu{transition:none}
}

/* ---------------------------------------------------------------
   Avis Google
   --------------------------------------------------------------- */
.s5-avis{display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:14px; margin-top:26px}
.s5-avis-c{
  margin:0; background:rgba(255,253,249,.72); border:1px solid rgba(43,72,75,.12);
  border-radius:16px; padding:20px 20px 18px;
  display:flex; flex-direction:column; gap:10px;
}
.s5-etoiles{color:var(--etoiles); font-size:15px; letter-spacing:.12em; line-height:1}
.s5-avis-c blockquote{margin:0; font-size:14px; line-height:1.55; color:var(--p)}
.s5-avis-c figcaption{
  margin-top:auto; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  font-weight:800; color:#4B6C70;
}

/* ---------------------------------------------------------------
   Plan d'accès — OpenStreetMap : aucun cookie, donc pas de bandeau
   de consentement à gérer, contrairement à Google Maps.
   --------------------------------------------------------------- */
.s5-carte{
  border-radius:18px; overflow:hidden; border:1px solid rgba(234,243,244,.18);
  aspect-ratio:4 / 3; background:#20393B;
}
.s5-carte iframe{width:100%; height:100%; border:0; display:block; filter:grayscale(.2) contrast(1.02)}
/* .s5 a{color:inherit} est plus spécifique : sans le sélecteur
   descendant, ce lien héritait de la couleur du panneau. */
.s5 a.s5-carte-lien{
  display:inline-block; margin-top:12px; font-size:12.5px; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; color:var(--mist);
  text-decoration:none; padding-bottom:3px;
  border-bottom:1px solid rgba(215,231,235,.45);
  transition:color .2s ease, border-color .2s ease;
}
.s5 a.s5-carte-lien:hover,
.s5 a.s5-carte-lien:focus-visible{border-bottom-color:var(--coral)}

@supports ((-webkit-background-clip: text) or (background-clip: text)){
  .s5 a.s5-carte-lien:hover,
  .s5 a.s5-carte-lien:focus-visible{
    background-image:var(--grain),
      linear-gradient(96deg, var(--acc-pale) 0%, var(--acc-mid) 52%, var(--coral) 100%);
    background-size:260px 260px, 100% 100%;
    background-blend-mode:soft-light, normal;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
  }
}

/* ---------------------------------------------------------------
   Infos pratiques — paires libellé / valeur plutôt qu'une suite de
   paragraphes : on cherche une information précise ici, on ne lit pas.
   --------------------------------------------------------------- */
.s5-venir{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(24px,3.4vw,48px); align-items:start}
.s5-venir-txt{min-width:0}
.s5-venir h2{margin-bottom:clamp(20px,2.6vw,30px)}

.s5-infos{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2vw,26px); margin:0 0 clamp(22px,3vw,32px);
}
.s5-infos dt{
  font-size:10.5px; letter-spacing:.15em; text-transform:uppercase;
  font-weight:800; color:var(--coral); margin-bottom:6px;
}
.s5-infos dd{margin:0; font-size:14.5px; line-height:1.6; color:var(--mist)}
.s5-infos dd a{color:var(--onDark)}
.s5-infos dd a:hover,.s5-infos dd a:focus-visible{color:var(--coral)}
/* la note tient sur une seule ligne : elle accompagne l'adresse,
   elle n'est pas un paragraphe */
.s5-infos-note{display:block; white-space:nowrap; font-size:13.5px; opacity:.8}
.s5-infos > div:nth-child(3){grid-column:1 / -1}
@media (max-width:900px){
  .s5-venir{grid-template-columns:1fr}
  .s5-venir-media{order:2}
}
@media (max-width:520px){
  .s5-infos{grid-template-columns:1fr}
  .s5-infos > div:nth-child(3){grid-column:auto}
}

/* ---------------------------------------------------------------
   Vidéo de fond du hero — balise vidéo native, jamais un lecteur
   intégré : pas de bouton, pas de titre au survol, pas de message
   d'erreur, pas de traceur. Elle se pose entre la photo et le voile ;
   si elle ne charge pas, la photo reste et rien ne manque.
   --------------------------------------------------------------- */
.s5-video{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.1s ease;
  pointer-events:none;
  filter:grayscale(.28) contrast(1.06);
}
/* Pleine opacité : l'assombrissement est le rôle du voile (z-index 1),
   pas celui d'une demi-transparence qui laissait voir la photo dessous. */
.s5-video.is-on{opacity:1}

/* Second recours YouTube. Le cadre est surdimensionné et recentré : la
   barre de contrôle et le titre du lecteur, qui se logent en haut et en
   bas de sa surface, tombent hors du panneau. Rien de l'interface de
   YouTube n'est donc visible, et rien n'est cliquable. */
.s5-video-yt{overflow:hidden}
.s5-video-yt iframe{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:100vw; height:56.25vw; min-width:177.78vh; min-height:132%;
  border:0; pointer-events:none;
}
@media (prefers-reduced-motion:reduce){ .s5-video{display:none} }

/* Écrans bas (portables 13", fenêtres réduites) : le contenu du hero
   dépasserait la hauteur calculée et repousserait le bandeau sous la
   ligne de flottaison. On resserre plutôt que de laisser déborder. */
@media (max-height:840px) and (min-width:900px){
  .s5-hero{padding-block:clamp(20px,2.6vw,34px)}
  .s5-hero h1{font-size:clamp(28px,4.4vw,54px)}
  .s5-hero .s5-nav{margin-bottom:22px}
  .s5-herofoot{margin-top:22px; gap:16px}
  .s5-herofoot p{font-size:15px}
}
@media (max-height:700px) and (min-width:900px){
  .s5-hero h1{font-size:clamp(26px,3.6vw,44px)}
  .s5-hero .s5-nav{margin-bottom:16px}
  .s5-herofoot{margin-top:16px; gap:13px}
}

/* ---------------------------------------------------------------
   Variante centrée du panneau d'ouverture.
   Le bloc se cale au milieu de l'écran plutôt qu'en bas, et le signe
   en filigrane passe derrière le titre au lieu de fuir dans l'angle.
   --------------------------------------------------------------- */
.s5-hero.is-centre{justify-content:center; text-align:center}
.s5-hero.is-centre .s5-nav{position:absolute; top:0; left:0; right:0;
  padding:clamp(24px,3.6vw,52px); margin:0; z-index:4}
/* le bloc ne colle pas à la barre de navigation ni au bas du panneau */
.s5-hero.is-centre{
  /* la barre flotte au-dessus : on ajoute sa hauteur à la marge haute
     pour que l'air au-dessus du titre égale celui sous les boutons. */
  padding-block:calc(var(--s5-navh, 64px) + clamp(28px, 5vh, 72px)) clamp(28px, 5vh, 72px);
}
.s5-hero.is-centre h1{
  margin:0 auto; max-width:18ch;
  line-height:1.2; letter-spacing:.012em;
}
.s5-hero.is-centre .s5-herofoot{
  flex-direction:column; align-items:center; justify-content:center;
  margin:clamp(28px, 5.2vh, 56px) auto 0;
  gap:clamp(22px, 3.6vh, 36px);
}
.s5-hero.is-centre .s5-herofoot p{
  margin:0 auto; max-width:46ch;
  font-size:clamp(15px, 1.25vw, 17.5px); line-height:1.72;
}
.s5-hero.is-centre .s5-cta2{justify-content:center; gap:14px}
.s5-hero.is-centre .s5-watermark{
  right:auto; bottom:auto; left:50%; top:50%;
  transform:translate(-50%,-50%);
  height:clamp(340px,54vw,820px); opacity:.045;
}
/* La disposition en ligne de la version alignée à gauche ne doit pas
   reprendre le dessus ici : on rétablit la colonne et les espacements. */
@media (min-width:900px){
  .s5-hero.is-centre .s5-herofoot{
    flex-direction:column; align-items:center; justify-content:center;
    margin:clamp(30px, 5.4vh, 58px) auto 0;
    gap:clamp(24px, 3.8vh, 38px);
    margin-bottom:0;
  }
}
/* La barre reste ancrée en haut du panneau à toutes les tailles :
   dans le flux, elle subissait la marge haute du centrage et descendait
   au tiers de l'écran. */
@media (max-width:820px){
  .s5-hero.is-centre .s5-nav{padding:clamp(18px,5vw,28px)}
  .s5-hero.is-centre{padding-block:calc(var(--s5-navh, 60px) + clamp(18px, 3.4vh, 44px)) clamp(18px, 3.4vh, 44px)}
}

/* Version centrée sur écran bas : sans cela le bloc déborde la hauteur
   calculée, se retrouve comprimé sous la barre et repousse le bandeau. */
@media (max-height:860px) and (min-width:900px){
  .s5-hero.is-centre{
    padding-block:calc(var(--s5-navh, 64px) + clamp(14px, 2.4vh, 34px)) clamp(14px, 2.4vh, 34px);
  }
  .s5-hero.is-centre h1{max-width:22ch; line-height:1.16}
  .s5-hero.is-centre .s5-herofoot{
    margin-top:clamp(16px, 2.8vh, 32px);
    gap:clamp(14px, 2.2vh, 24px);
  }
  .s5-hero.is-centre .s5-herofoot p{font-size:15px; line-height:1.6}
}
@media (max-height:740px) and (min-width:900px){
  .s5-hero.is-centre h1{font-size:clamp(24px,3.2vw,40px); max-width:26ch}
}

/* Lien « En savoir plus » d'une carte discipline. Facultatif : il n'apparaît
   que si un lien est renseigné, la page unique reste autonome sans lui. */
.s5-plus{
  margin-top:auto; padding-top:18px;
  font-size:11.5px; letter-spacing:.11em; text-transform:uppercase;
  font-weight:800; text-decoration:none;
  display:inline-flex; align-items:center; gap:6px;
}
.s5-d{display:flex; flex-direction:column}

/* Caractéristiques d'un cours : durée, capacité, fréquence. Reprises du
   planning réel — c'est ce qu'un prospect cherche avant de s'inscrire. */
/* La ligne de caractéristiques devient l'ancre visuelle de la carte :
   c'est l'information qu'on cherche avant de lire quoi que ce soit. */
.s5-d-meta{
  font-size:12px; line-height:1.5; letter-spacing:.055em; text-transform:uppercase;
  font-weight:800; color:var(--coral); margin:0 0 14px;
  padding-bottom:14px; border-bottom:1px solid rgba(234,243,244,.14);
}
/* Deux colonnes plutôt que cinq : à largeur double, le même texte tient
   sur trois ou quatre lignes au lieu de huit. On garde la matière — donc
   les mots-clés — tout en allégeant la lecture.
   La carte esseulée en fin de grille occupe les deux colonnes : sans cela
   elle paraîtrait orpheline. */
@media (min-width:900px){
  .s5-disc{grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px}
  .s5-disc > :last-child:nth-child(odd){grid-column:1 / -1}
  .s5-d{padding:30px 30px 26px}
  .s5-d p{font-size:14.5px; max-width:64ch}
}
@media (max-width:899px){.s5-disc{grid-template-columns:1fr}}
.s5-d p{font-size:13.5px; line-height:1.65; color:var(--mist); opacity:.92}

/* ---------------------------------------------------------------
   Fil Instagram — rendu par l'extension Instagram Feed déjà installée
   sur le site. On ne fait que lui donner un cadre et de l'espace.
   --------------------------------------------------------------- */
.s5-insta{margin-top:24px; border-radius:16px; overflow:hidden}
.s5-insta #sb_instagram{padding-bottom:0 !important}
.s5-insta img{border-radius:10px}
.s5-insta-repli{
  background:rgba(43,72,75,.07); border:1px dashed rgba(43,72,75,.28);
  border-radius:14px; padding:26px; text-align:center;
  color:var(--muted); font-size:14px; margin:0;
}
.s5-insta-lien{text-align:center; margin:22px 0 0}
.s5-light .s5-insta-lien .s5-ghost{color:var(--p) !important; border-color:rgba(43,72,75,.4) !important}

/* ---------------------------------------------------------------
   Titres d'activité et liens « En savoir plus » en corail grainé.
   Le grain est appliqué au texte par background-clip : le dégradé
   corail et le bruit sont fondus en soft-light, puis découpés à la
   forme des lettres.

   La couleur pleine est déclarée d'abord et sert de repli : sans
   background-clip, le texte reste corail au lieu de disparaître.
   --------------------------------------------------------------- */
.s5-d h3{
  color:var(--coral);
}
/* .s5 a{color:inherit} est plus spécifique que .s5-plus : sans le
   sélecteur descendant, le lien héritait de la couleur du panneau. */
.s5 a.s5-plus{
  color:var(--mist);
  transition:color .2s ease;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)){
  .s5-d h3,
  .s5 a.s5-plus:hover,
  .s5 a.s5-plus:focus-visible{
    background-size:260px 260px, 100% 100%;
    background-blend-mode:soft-light, normal;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;   /* Safari */
  }

  /* Titre : 19 px gras, donc « grand texte » — le seuil est de 3:1 et
     le dégradé peut descendre jusqu'au corail foncé. */
  .s5-d h3{
    background-image:var(--grain),
      linear-gradient(96deg, var(--acc-xxl) 0%, var(--coral) 46%, var(--acc-d2) 100%);
  }

  /* « En savoir plus » : 11,5 px, donc petit texte — seuil 4,5:1.
     Le dégradé s'arrête au corail de marque, qui tient 4,56:1 ;
     descendre plus bas rendrait la fin du mot moins lisible. */
  .s5 a.s5-plus:hover,
  .s5 a.s5-plus:focus-visible{
    background-image:var(--grain),
      linear-gradient(96deg, var(--acc-pale) 0%, var(--acc-mid) 52%, var(--coral) 100%);
  }
}

/* Sur panneau clair, le corail de marque tombe à 2,2:1. Il faut
   descendre bien plus bas pour rester lisible. */
.s5-light .s5-d h3,
.s5 .s5-light a.s5-plus{color:var(--acc-clair)}
@supports ((-webkit-background-clip: text) or (background-clip: text)){
  .s5-light .s5-d h3,
  .s5-light .s5-plus:hover,
  .s5-light .s5-plus:focus-visible{
    background-image:var(--grain),
      linear-gradient(96deg, var(--acc-clair-l) 0%, var(--acc-clair) 50%, var(--acc-clair-d) 100%);
  }
}

@media (prefers-reduced-motion:reduce){ .s5-plus{transition:none} }

/* Lien contextuel vers la page abonnements, sous la mention légale du carrousel. */
.s5 a.s5-legal-lien{
  display:inline-block; margin-left:10px; color:var(--coral);
  text-decoration:none; border-bottom:1px solid transparent; white-space:nowrap;
}
.s5 a.s5-legal-lien:hover,.s5 a.s5-legal-lien:focus-visible{border-bottom-color:currentColor}
@media (max-width:560px){.s5 a.s5-legal-lien{display:block; margin:6px 0 0}}

/* ---------------------------------------------------------------
   Les autres espaces — mêmes cartes que les disciplines, mais posées
   sur un panneau clair : le fond translucide blanc des .s5-d y est
   invisible et le texte « mist » illisible. Il faut la variante claire.
   --------------------------------------------------------------- */
.s5-serv{grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
/* Les disciplines passent à deux colonnes au-delà de 900 px, et la carte
   impaire de fin s'étale sur toute la largeur. Les trois espaces n'ont pas
   besoin de ce traitement : trois colonnes, et rien qui s'étale. */
@media (min-width:900px){
  .s5-disc.s5-serv{grid-template-columns:repeat(3,minmax(0,1fr))}
  .s5-disc.s5-serv > :last-child:nth-child(odd){grid-column:auto}
}
.s5-light .s5-d{
  background:linear-gradient(158deg, rgba(43,72,75,.075) 0%, rgba(43,72,75,.03) 100%);
  border-color:rgba(43,72,75,.16);
}
.s5-light .s5-d:hover{
  background:linear-gradient(158deg, rgba(43,72,75,.11) 0%, rgba(43,72,75,.05) 100%);
}
/* #2B484B sur le fond de carte éclairci : 8,7:1. */
.s5-light .s5-d p{color:var(--p); opacity:1; font-size:13.5px}
.s5-serv .s5-d{display:flex; flex-direction:column}
.s5-serv .s5-plus{margin-top:auto; padding-top:14px; font-size:11.5px;
  text-transform:uppercase; letter-spacing:.08em; text-decoration:none}

/* ---------------------------------------------------------------
   Questions fréquentes — accordéon natif de l'élément « details ».
   Pas d'animation de hauteur : le navigateur ne l'anime pas sans JS,
   et un demi-effet saccadé vaut moins que pas d'effet du tout.
   (Les chevrons sont évités dans les commentaires : cette feuille est
   servie telle quelle dans un bloc « style », où une balise fermante
   écrite par inadvertance couperait le bloc.)
   --------------------------------------------------------------- */
.s5-faq{display:grid; gap:10px; max-width:78ch; margin-inline:auto}
.s5-faq-item{
  background:linear-gradient(158deg, rgba(255,253,249,.11) 0%, rgba(255,253,249,.04) 100%);
  border:1px solid rgba(234,243,244,.1); border-radius:16px;
  transition:background .2s ease;
}
.s5-faq-item:hover{background:linear-gradient(158deg, rgba(255,253,249,.16) 0%, rgba(255,253,249,.06) 100%)}
.s5-faq-item[open]{background:linear-gradient(158deg, rgba(255,253,249,.17) 0%, rgba(255,253,249,.07) 100%)}
.s5-faq-item summary{
  display:flex; align-items:center; gap:16px; cursor:pointer;
  padding:17px 20px; font-size:15.5px; font-weight:600; color:var(--onDark);
  list-style:none;
}
.s5-faq-item summary::-webkit-details-marker{display:none}
.s5-faq-item summary:focus-visible{outline:3px solid var(--coral); outline-offset:2px; border-radius:16px}

/* Le signe : deux barres en corail, dont la verticale disparaît à l'ouverture. */
.s5-faq-signe{
  flex:0 0 auto; margin-left:auto; position:relative; width:14px; height:14px;
}
.s5-faq-signe::before,.s5-faq-signe::after{
  content:""; position:absolute; inset:0; margin:auto;
  background:var(--coral); border-radius:2px;
}
.s5-faq-signe::before{width:14px; height:2px}
.s5-faq-signe::after{width:2px; height:14px; transition:transform .22s ease, opacity .22s ease}
.s5-faq-item[open] .s5-faq-signe::after{transform:rotate(90deg); opacity:0}

.s5-faq-rep{padding:0 20px 19px; font-size:14.5px; line-height:1.65; color:var(--mist)}
.s5-faq-rep a{color:var(--coral)}

@media (prefers-reduced-motion:reduce){
  .s5-faq-item,.s5-faq-signe::after{transition:none}
}
@media (max-width:560px){
  .s5-faq-item summary{font-size:14.5px; padding:15px 16px; gap:12px}
  .s5-faq-rep{padding:0 16px 17px; font-size:14px}
}

/* ---------------------------------------------------------------
   Prix d'appel annuel.
   La carte annonce le mensuel de l'offre annuelle — le plus bas —
   surmonté d'un « à partir de » et suivi, en clair et à taille
   lisible, de ce qu'il faut payer pour l'obtenir. Un tarif d'appel
   dont la condition se lit à la loupe est une pratique trompeuse ;
   la condition est donc dans le flux, pas en note de bas de carte.
   --------------------------------------------------------------- */
.s5-des{
  display:block; font-family:Commissioner,system-ui,sans-serif;
  font-size:11px; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  color:var(--mist); margin-bottom:5px; white-space:nowrap;
}

.s5-cond{
  margin:-2px 0 12px; font-size:12.5px; line-height:1.5; color:var(--mist);
  max-width:none;
}
/* L'économie est le seul chiffre mis en couleur : c'est l'argument. */
/* Fond assombri plutôt qu'un voile corail : le dégradé du panneau varie
   d'un bout à l'autre, et un voile clair laissait le contraste dériver
   sous le seuil selon l'endroit où tombait la carte. */
.s5-eco{
  display:inline-block; background:rgba(11,25,26,.42);
  color:var(--acc-pale); border-radius:999px; padding:2px 9px; margin-right:2px;
  font-weight:700; font-size:12px; font-variant-numeric:tabular-nums;
}
/* Sur la carte active, le fond passe au crème : le corail clair n'y tient
   plus le contraste, on descend au corail foncé sur voile plus dense. */

@media (max-width:560px){
  .s5-cond{font-size:12px}
  .s5-des{font-size:10.5px}
}

/* ---------------------------------------------------------------
   Barre de navigation flottante (voir page.js).
   Fond dense et léger flou : le menu doit rester lisible au-dessus
   de n'importe quelle section, claire comme sombre.
   --------------------------------------------------------------- */
.s5-nav-fantome{height:0}
.s5-nav.is-flottante{
  position:fixed; top:0; left:0; right:0; z-index:60;
  margin:0; padding:11px clamp(16px,3.4vw,46px);
  background:rgba(20,38,40,.9);
  border-bottom:1px solid rgba(234,243,244,.12);
  box-shadow:0 10px 30px rgba(8,18,20,.26);
  /* Aucune animation d'entrée : une barre qui glisse depuis le haut part
     par définition hors de l'écran, et il suffit que le navigateur gèle
     l'animation — onglet en arrière-plan, animations suspendues — pour
     qu'elle y reste. Un menu doit être visible, pas joli à l'apparition. */
}
@supports (backdrop-filter:blur(2px)){
  .s5-nav.is-flottante{background:rgba(20,38,40,.74); backdrop-filter:blur(14px) saturate(1.25)}
}
/* barre compacte : le logo cède un tiers de sa hauteur */
.s5-nav.is-flottante .s5-logo img{height:34px; width:auto}
.s5-nav.is-flottante .s5-btn{padding-block:9px; font-size:13px}

@media (max-width:899px){
  .s5-nav.is-flottante{padding:9px 16px}
  .s5-nav.is-flottante .s5-logo img{height:30px}
}

/* ===============================================================
   Revue graphique du 09/09/2026 — corrections
   =============================================================== */

/* 1. Surtitre et titre partageaient une ligne, l'un ferré à gauche et
      l'autre à droite : plus aucun axe commun, l'œil devait chercher
      où se poser. Ils s'empilent désormais sur le même axe gauche. */
.s5 .s5-head{flex-direction:column; align-items:flex-start; gap:10px}
.s5 .s5-head h2{margin-left:0; text-align:left; max-width:22ch}
.s5 .s5-head .s5-lab{order:-1; padding-top:0}

/* 2. Corail lisible en petit corps sur fond sombre.
      var(--acc) plafonne à 4,02:1 sur le vert foncé et tombe à 2,74:1 sur
      la partie claire du dégradé — sous le seuil AA dans les deux cas.
      Ce ton tient 4,75:1 au pire endroit tout en restant corail.
      Les titres (≥ 19 px gras) gardent le corail de marque : le seuil
      y est de 3:1, et le corail le passe. */
.s5{--coral-txt:var(--acc-txt)}
.s5 .s5-coach-id p,
.s5 .s5-mantra blockquote cite,
.s5 .s5-infos dt,
.s5 .s5-d-meta,
.s5 .s5-foot-cols h3,
.s5 a.s5-legal-lien,
.s5 .s5-faq-rep a{color:var(--coral-txt)}
.s5 .s5-foot-bar nav a:hover,
.s5 .s5-foot-bar nav a:focus-visible,
.s5 .s5-foot-credit a:hover,
.s5 .s5-foot-credit a:focus-visible,
.s5 .s5-infos dd a:hover,
.s5 .s5-infos dd a:focus-visible{color:var(--coral-txt)}

/* 3. Boutons : aplats francs à la place des dégradés, et halos colorés
      ramenés à une ombre portée neutre. Le « glow » corail donnait un
      rendu daté ; la teinte de marque, elle, ne change pas. */
.s5 .s5-btn{
  background:var(--coral);
  box-shadow:0 4px 14px rgba(12,26,28,.22);
}
.s5 .s5-btn:hover,
.s5 .s5-btn:focus-visible{
  background:var(--coral-d);
  box-shadow:0 7px 20px rgba(12,26,28,.28);
}
.s5 .s5-btn-dark{
  background:var(--p) !important;
  box-shadow:0 4px 14px rgba(12,26,28,.24) !important;
}
.s5 .s5-btn-dark:hover,
.s5 .s5-btn-dark:focus-visible{
  background:var(--p-d) !important;
  box-shadow:0 7px 20px rgba(12,26,28,.3) !important;
}

/* 4. Photos : la désaturation retirait de l'énergie à des images qui
      doivent donner envie de bouger. On garde un très léger accord
      colorimétrique, sans éteindre l'image. */
.s5 .s5-bg,
.s5 .s5-photo img,
.s5 .s5-coach-face img,
.s5 .s5-video{filter:saturate(1.04) contrast(1.02)}
.s5 .s5-carte img{filter:none}

/* 5. Disciplines en accordéon.
      Les cinq fiches développées à la suite imposaient une lecture
      continue avant de saisir l'offre. Les titres sont désormais tous
      visibles d'un coup, le détail s'ouvre au clic — le texte reste
      dans le HTML, donc rien n'est perdu pour le référencement. */
.s5-disc.s5-acc{display:grid; grid-template-columns:1fr; gap:10px; max-width:none}
.s5-acc .s5-d{
  padding:0; border-radius:16px;
  background:linear-gradient(158deg, rgba(255,253,249,.11) 0%, rgba(255,253,249,.04) 100%);
  border:1px solid rgba(234,243,244,.1);
  transition:background .2s ease;
}
.s5-acc .s5-d:hover{background:linear-gradient(158deg, rgba(255,253,249,.16) 0%, rgba(255,253,249,.06) 100%)}
.s5-acc .s5-d[open]{background:linear-gradient(158deg, rgba(255,253,249,.17) 0%, rgba(255,253,249,.07) 100%)}
.s5-acc .s5-d:hover{transform:none}

.s5-acc summary{
  display:flex; align-items:center; gap:18px; cursor:pointer;
  padding:18px 22px; list-style:none;
}
.s5-acc summary::-webkit-details-marker{display:none}
.s5-acc summary:focus-visible{outline:3px solid var(--coral); outline-offset:2px; border-radius:16px}
.s5-d-tete{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px; flex:1 1 auto; min-width:0}
.s5-acc .s5-d h3{margin:0; font-size:clamp(18px,2.2vw,23px)}
.s5-acc .s5-d-meta{margin:0; font-size:11.5px}
.s5-acc .s5-faq-signe{margin-left:auto}
.s5-acc .s5-d[open] .s5-faq-signe::after{transform:rotate(90deg); opacity:0}

.s5-d-corps{padding:0 22px 20px}
.s5-acc .s5-d-corps p{margin:0 0 14px; font-size:14.5px; max-width:70ch}
.s5-acc .s5-plus{font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; text-decoration:none}

@media (max-width:560px){
  .s5-acc summary{padding:15px 16px; gap:12px}
  .s5-d-corps{padding:0 16px 17px}
  .s5-acc .s5-d-corps p{font-size:14px}
}

/* 6. Formules : onglets plutôt que carrousel dépliant.
      Le haut de carte cumulait trop de signaux (graisses, tailles,
      typographies) et une seule offre était lisible à la fois. Ici tout
      l'onglet est visible d'un bloc, et la hiérarchie tient en deux
      niveaux : le nom, puis le prix. */
.s5-onglets{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:0 0 22px; padding:5px;
  background:rgba(11,25,26,.3); border-radius:999px;
  width:fit-content; max-width:100%;
}
.s5 .s5-onglet{
  border:0; cursor:pointer; border-radius:999px;
  padding:10px 20px; font:inherit; font-size:13.5px; font-weight:600;
  letter-spacing:.02em; color:var(--mist); background:transparent;
  transition:background .18s ease, color .18s ease;
}
.s5 .s5-onglet:hover{background:rgba(255,253,249,.09); color:var(--onDark)}
.s5 .s5-onglet.is-on{background:var(--coral); color:var(--ink)}
.s5 .s5-onglet:focus-visible{outline:3px solid var(--coral); outline-offset:3px}
.s5-light .s5-onglets{background:rgba(43,72,75,.09)}
.s5-light .s5-onglet{color:var(--p)}

.s5-offres{display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:16px}
/* « display:grid » l'emporte sur l'attribut hidden : sans cette règle,
   les trois onglets s'affichent en même temps. */
.s5-offres[hidden]{display:none}
.s5-offre{
  display:flex; flex-direction:column; gap:11px;
  border-radius:18px; padding:24px;
  background:linear-gradient(158deg, rgba(255,253,249,.13) 0%, rgba(255,253,249,.05) 100%);
  border:1px solid rgba(234,243,244,.11);
}
/* un seul accent visuel par carte : le prix */
.s5-offre h3{font-size:20px; margin:0}
.s5-offre .s5-pr{display:block; text-align:right; font-size:clamp(26px,3vw,36px)}
.s5-offre .s5-acc{margin:0; font-size:13.5px; color:var(--mist); opacity:.9; max-width:none}
.s5-offre .s5-lignes{margin:0; padding:0; list-style:none; display:grid; gap:7px}
.s5-offre .s5-lignes li{
  font-size:13px; color:var(--mist); padding-left:20px; position:relative; line-height:1.45;
}
.s5-offre .s5-lignes li::before{
  content:"\2713"; position:absolute; left:0; top:0; color:var(--coral-txt); font-size:12px;
}
.s5-offre .s5-cond{margin:0}
.s5-offre .s5-btn{margin-top:auto; align-self:flex-start}

@media (max-width:560px){
  /* « flex:1 1 auto » faisait grossir les trois onglets jusqu'au retour à la
     ligne : « Kids & Teens » se retrouvait seul, centré sous les deux autres.
     Ils gardent désormais leur largeur propre, sur une seule ligne, et la
     bande défile si l'écran est vraiment étroit — avec un point d'ancrage,
     pour ne jamais s'arrêter au milieu d'un onglet. */
  .s5-onglets{
    width:100%; justify-content:flex-start; flex-wrap:nowrap;
    overflow-x:auto; scrollbar-width:none;
    scroll-snap-type:x proximity; gap:4px; padding:4px;
  }
  .s5-onglets::-webkit-scrollbar{display:none}
  .s5 .s5-onglet{flex:none; padding:9px 9px; font-size:12px; scroll-snap-align:start}
  .s5-offre{padding:20px}
}

/* le trait sous les caractéristiques venait de l'ancienne carte ;
   dans le résumé d'accordéon il souligne le texte sans raison */
.s5-acc .s5-d-meta{border-bottom:0; padding-bottom:0; margin:0}

/* 7. Cartes coachs : le retournement était déjà pilotable au clavier et
      au doigt (bouton avec aria-expanded), mais rien ne signalait que la
      carte s'ouvrait. Une pastille visible le dit maintenant. */
.s5-coach-flip{border-radius:18px}
.s5-coach-flip::after{
  content:"En savoir plus \2192";
  /* Le nom et le rôle du coach occupent tout le bas de la carte
     (.s5-coach-id est en bottom:0) : la pastille se posait dessus.
     Elle passe en haut à droite, sur la seule zone libre. */
  position:absolute; top:14px; right:14px;
  padding:7px 13px; border-radius:999px;
  background:rgba(11,25,26,.62); color:var(--onDark);
  font-family:Commissioner,system-ui,sans-serif;
  font-size:11.5px; font-weight:600; letter-spacing:.05em;
  transition:opacity .2s ease, transform .2s ease;
  pointer-events:none;
}
.s5-coach:hover .s5-coach-flip::after,
.s5-coach.is-flipped .s5-coach-flip::after{opacity:0; transform:translateY(4px)}
/* Au doigt, il n'y a pas de survol : le retournement ne doit dépendre que
   du bouton, sinon la carte reste bloquée après le premier appui. */
@media (hover:none){
  .s5-coach:hover .s5-coach-in{transform:none}
  .s5-coach.is-flipped .s5-coach-in{transform:rotateY(180deg)}
}
@media (prefers-reduced-motion:reduce){
  .s5-coach-in{transition:none}
}

/* 8. Avis Google en défilement horizontal : la grille empilait six
      cartes et étirait la section en hauteur. */
.s5-avis{
  display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:8px; scrollbar-width:thin;
  grid-template-columns:none;
}
.s5-avis > *{flex:0 0 clamp(250px,30%,310px); scroll-snap-align:start}
.s5-avis::-webkit-scrollbar{height:6px}
.s5-avis::-webkit-scrollbar-thumb{background:rgba(43,72,75,.3); border-radius:99px}

/* 9. Deux sections épinglées demandaient près de trois hauteurs d'écran
      de défilement pour une seule phrase. Ramenées à ce qu'elles
      montrent réellement. */
.s5-echo{height:170vh}
.s5-count{height:150vh}
.s5-count-pin{height:auto; min-height:72vh; padding-block:clamp(40px,9vh,90px)}

/* 10. La photo du club occupait une hauteur sans rapport avec le texte
       qu'elle accompagne : elle allongeait le défilement sans rien
       ajouter. */
.s5-split .s5-photo{max-height:min(58vh,470px)}
.s5-split .s5-photo img{object-fit:cover}

/* 11. Repère de défilement, dans le panneau d'ouverture.
       Un visiteur qui ne connaît pas le CrossFit n'a rien qui l'invite à
       descendre : le premier écran se suffit visuellement. */
.s5 a.s5-descendre{
  position:absolute; left:50%; bottom:clamp(14px,2.6vh,26px); transform:translateX(-50%);
  z-index:5; display:flex; flex-direction:column; align-items:center; gap:7px;
  text-decoration:none; color:var(--onDark);
  font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  opacity:.82; transition:opacity .2s ease;
}
.s5 a.s5-descendre:hover,
.s5 a.s5-descendre:focus-visible{opacity:1}
.s5 a.s5-descendre:focus-visible{outline:3px solid var(--coral); outline-offset:6px; border-radius:8px}
.s5-descendre-fleche{
  width:20px; height:20px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); animation:s5-desc 1.9s ease-in-out infinite;
}
@keyframes s5-desc{0%,100%{transform:rotate(45deg) translate(0,0)}50%{transform:rotate(45deg) translate(3px,3px)}}
@media (prefers-reduced-motion:reduce){ .s5-descendre-fleche{animation:none} }
/* Le repère n'a de place que sur grand écran : sur mobile il retombait
   sur les boutons du panneau d'ouverture, et la page y est de toute
   façon défilée d'emblée au doigt. */
@media (max-height:700px), (max-width:899px){ .s5 a.s5-descendre{display:none} }

/* 12. Citation du fondateur : sans guillemets ni attribution explicite,
       la phrase se lisait comme un titre et le nom comme sa signature. */
.s5-cit footer{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin-top:14px}
.s5-cit cite{font-style:normal}
.s5-cit-role{
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mist); opacity:.8;
}
.s5-guil{color:var(--coral); padding:0 .12em}

/* ---------------------------------------------------------------
   Rupture de rythme.
   La page empilait des panneaux identiques — même rayon, même marge —
   du haut en bas, sans jamais varier. Deux respirations passent donc
   bord à bord, sans arrondi : le bandeau des disciplines et la citation
   du fondateur. Ce sont des transitions, pas des blocs de contenu, et
   les voir déborder du cadre relance la lecture sans casser le bento.
   --------------------------------------------------------------- */
.s5-band,
.s5-mantra{
  /* Débordement pleine largeur, indépendant de l'imbrication : une marge
     négative fondée sur la gouttière supposait une structure précise et
     tombait à côté. « 50% - 50vw » ramène le bloc aux bords de la fenêtre
     quel que soit le nombre de conteneurs au-dessus. */
  margin-inline:calc(50% - 50vw);
  border-radius:0;
}
/* une respiration plus large de part et d'autre de chaque rupture */
.s5-band{margin-block:clamp(20px,3.4vh,40px) clamp(20px,3.4vh,40px)}
.s5-mantra{margin-block:clamp(20px,3.4vh,40px) clamp(20px,3.4vh,40px)}
/* la citation gagne de l'air maintenant qu'elle occupe toute la largeur */
.s5-mantra{padding-inline:clamp(24px,6vw,90px)}

@media (max-width:560px){
  .s5-band,.s5-mantra{margin-block:14px}
}

/* Le surtitre existe sur les deux fonds : le corail éclairci sert au
   panneau sombre, le brique au panneau clair. Sans le préfixe « .s5 »
   sur la variante claire, la règle sombre l'emportait par simple ordre
   d'apparition et le surtitre tombait à 1,39:1 sur le crème. */
.s5 .s5-lab{color:var(--coral-txt)}
.s5 .s5-light .s5-lab{color:var(--acc-lab-clair)}

/* Le panneau d'ouverture s'élève au-dessus des suivants tant que sa barre
   est en position fixe. Il est alors hors de l'écran : rien d'autre n'est
   affecté visuellement. */
.s5-hero.is-navflottante{z-index:60}

/* Survol de « Prendre contact » / « En savoir plus » sur panneau clair.
   La règle du fond sombre — « .s5 a.s5-plus:hover », spécificité (0,3,1) —
   l'emportait sur la variante claire « .s5-light .s5-plus:hover » (0,3,0) :
   au survol, le lien prenait le dégradé pâle et tombait à 2,3:1 sur le
   crème. Le sélecteur ci-dessous repasse devant. */
.s5 .s5-light a.s5-plus:hover,
.s5 .s5-light a.s5-plus:focus-visible{
  color:var(--acc-clair);
  -webkit-text-fill-color:var(--acc-clair);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)){
  .s5 .s5-light a.s5-plus:hover,
  .s5 .s5-light a.s5-plus:focus-visible{
    background-image:var(--grain),
      linear-gradient(96deg, var(--acc-clair-l) 0%, var(--acc-clair) 50%, var(--acc-clair-d) 100%);
    background-size:260px 260px, 100% 100%;
    background-blend-mode:soft-light, normal;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
  }
}

/* Survol de « En savoir plus » sur panneau sombre.
   Le dégradé corail était appliqué au texte lui-même : selon l'endroit du
   panneau, le fond va de #1D3739 à rgba(72,113,118) — le corail y tient
   entre 2,7 et 4,0:1, sous le seuil de 4,5 pour 11,5 px, partout.
   Aucune teinte corail ne peut passer sur le point le plus clair : on rend
   donc le contraste indépendant du fond en posant une pastille opaque,
   comme pour l'étiquette d'économie des formules. */
.s5-acc a.s5-plus,
.s5 .s5-acc a.s5-plus,
.s5-panel:not(.s5-light) a.s5-plus,
.s5 .s5-panel:not(.s5-light) a.s5-plus{
  display:inline-block; padding:6px 12px; border-radius:999px;
  background:transparent; transition:background .18s ease, color .18s ease;
}
.s5-acc a.s5-plus:hover,
.s5-acc a.s5-plus:focus-visible,
.s5 .s5-acc a.s5-plus:hover,
.s5 .s5-acc a.s5-plus:focus-visible,
.s5-panel:not(.s5-light) a.s5-plus:hover,
.s5-panel:not(.s5-light) a.s5-plus:focus-visible,
.s5 .s5-panel:not(.s5-light) a.s5-plus:hover,
.s5 .s5-panel:not(.s5-light) a.s5-plus:focus-visible{
  background:rgba(11,25,26,.55);
  background-image:none;
  color:var(--acc-pale);
  -webkit-text-fill-color:var(--acc-pale);
}

/* Corrections issues de la mesure au pixel (Chrome), qui tient compte du
   grain — invisible au calcul théorique et responsable d'environ un point
   de contraste perdu sur chaque panneau. */
/* « / mois » : l'opacité 0,6 le faisait tomber à 3,2:1 */
.s5 .s5-pr small{opacity:.82}
/* repli du fil Instagram, sur panneau clair */
.s5 .s5-insta-repli{color:var(--p)}

/* ===============================================================
   Troisième jeu : la direction artistique du feed, au-delà de la
   couleur. Trois marqueurs relevés sur les publications du club —
   le métal brossé des posts d'information, l'italique condensée
   des titres, et le jaune. Les deux premiers manquaient encore.
   =============================================================== */
.s5[data-palette="feed-da"]{
  /* le métal et l'accent viennent des jeux ci-dessus ; ici, le traitement */
}

/* Titres inclinés : la signature typographique du feed. Fugaz One n'a
   pas d'italique dessinée, on l'incline donc — 7 degrés, la valeur qui
   correspond le mieux aux visuels sans déformer les contreformes. */
.s5[data-palette="feed-da"] h1,
.s5[data-palette="feed-da"] h2,
.s5[data-palette="feed-da"] .s5-echo-l,
.s5[data-palette="feed-da"] .s5-echo-top,
.s5[data-palette="feed-da"] .s5-mantra-line,
.s5[data-palette="feed-da"] .s5-count-num{
  transform:skewX(-7deg);
  transform-origin:left bottom;
}
/* le compteur est centré : l'inclinaison doit partir de son axe */
.s5[data-palette="feed-da"] .s5-count-num{transform-origin:center}

/* Panneau de transition et compteur en métal brossé, comme les posts
   « ÇA SE PASSE EN AOÛT » ou « LES COURS ». Le fond devient clair :
   textes et voiles basculent en conséquence. */
.s5[data-palette="feed-da"] .s5-echo-pin,
.s5[data-palette="feed-da"] .s5-count-pin{
  background:var(--metal);
  color:var(--metal-txt);
}
.s5[data-palette="feed-da"] .s5-echo-pin::after,
.s5[data-palette="feed-da"] .s5-count-pin::after{opacity:.16; mix-blend-mode:multiply}
/* .s5-echo-top porte le texte plein, .s5-echo-l les contours qui s'écartent
   au défilement : sur métal clair, l'un passe en encre, l'autre en tracé
   sombre. Les intervertir rend le titre invisible. */
.s5[data-palette="feed-da"] .s5-echo-top{
  color:var(--metal-txt); -webkit-text-stroke:0;
}
.s5[data-palette="feed-da"] .s5-echo-l{
  color:transparent; -webkit-text-stroke:1.4px rgba(20,38,42,.5);
}
.s5[data-palette="feed-da"] .s5-count-cap{color:#33474A}
.s5[data-palette="feed-da"] .s5-count-num{color:var(--metal-txt)}

/* Le bandeau défilant passe lui aussi en métal : dans le feed, le jaune
   est réservé aux annonces, pas aux listes. */
.s5[data-palette="feed-da"] .s5-band{
  background:var(--metal);
  color:var(--metal-txt);
}
.s5[data-palette="feed-da"] .s5-band::after{opacity:.18; mix-blend-mode:multiply}
.s5[data-palette="feed-da"] .s5-band-lab,
.s5[data-palette="feed-da"] .s5-band p{color:#2C3E41}
.s5[data-palette="feed-da"] .s5-mrow span{color:var(--metal-txt)}

@media (prefers-reduced-motion:reduce){
  .s5[data-palette="feed-da"] h1,
  .s5[data-palette="feed-da"] h2{transform:none}
}

/* Pied de page : deux natures de liens, deux traitements.
   Sur une page unique, rien ne disait si « CrossFit à Vendenheim » ramenait
   à une section plus haut ou quittait la page. Les ancres portent un chevron
   vers le bas, les pages détaillées une flèche sortante. */
.s5-foot-ancres a,
.s5-foot-pages a{display:inline-flex; align-items:center; gap:7px}
.s5-foot-ancres a::before{
  content:""; flex:none; width:7px; height:7px;
  border-right:1.5px solid var(--acc-txt); border-bottom:1.5px solid var(--acc-txt);
  transform:rotate(45deg) translate(-1px,-1px); opacity:.85;
}
.s5-foot-pages a::after{
  /* « ↗ » (U+2197) a une présentation emoji par défaut : iOS l'affichait en
     pastille bleue. On dessine le coin, comme le chevron voisin — aucun
     caractère, donc aucune police à qui faire confiance. */
  content:""; flex:none; width:7px; height:7px;
  border-top:1.5px solid var(--acc-txt); border-right:1.5px solid var(--acc-txt);
  opacity:.85;
}

/* Le logo de la signature est un PNG monochrome clair, dessiné pour le
   panneau sombre. Sur le métal brossé il disparaît. « brightness(0) »
   ramène chaque pixel opaque au noir en conservant la transparence ;
   la teinte est ensuite ramenée vers le canard de la marque. */
.s5[data-palette="feed-da"] .s5-count-logo{
  filter:brightness(0) saturate(100%)
         invert(11%) sepia(19%) saturate(1180%) hue-rotate(151deg) brightness(96%) contrast(94%);
}

/* ---------------------------------------------------------------
   Les deux blocs qui étaient en aplat d'accent — le bandeau défilant
   et l'appel à l'action de mi-page — passent au métal brossé du feed.
   Le corail reste la couleur d'accent partout ailleurs.
   --------------------------------------------------------------- */
/* Seul l'appel à l'action passe au métal : le bandeau défilant qui suit le
   panneau d'ouverture reste en corail. */
.s5 .s5-band{
  background:var(--metal);
  color:var(--metal-txt);
}
.s5 .s5-band::after{opacity:.18; mix-blend-mode:multiply}
/* Le surtitre reprend l'accent. Le corail de marque ne tient pas sur le
   métal — de 1,1 à 2,1:1 selon l'endroit du dégradé : c'est la variante
   foncée, celle des panneaux clairs, qui s'applique. */
.s5 .s5-band-lab{color:var(--acc-clair)}
.s5 .s5-band p{color:#2C3E41}
/* Le bouton d'appel reprend l'accent : sur le métal, c'est le seul point
   corail du bloc, et c'est lui qu'on doit voir en premier. La variante
   sombre du bouton porte un « !important » hérité du fond corail. */
.s5 .s5-band .s5-btn,
.s5 .s5-band .s5-btn-dark{background:var(--acc) !important; color:var(--ink) !important}
.s5 .s5-band .s5-btn:hover,
.s5 .s5-band .s5-btn-dark:hover{background:var(--acc-d) !important}

/* Chapeau d'onglet : ce qui vaut pour toutes les formules d'une famille. */
.s5-chapeau{
  margin:0 0 16px; max-width:78ch;
  font-size:14px; line-height:1.6; color:var(--mist); opacity:.92;
}
.s5-chapeau[hidden]{display:none}

/* Commande de défilement des avis. Elle se retire d'elle-même quand la
   rangée tient dans l'écran (voir page.js). */
.s5-avis-nav{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:12px; margin:22px 0 10px;
}
.s5-avis-nav[hidden]{display:none}
.s5-avis-aide{
  margin:0; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  font-weight:600; color:var(--muted);
}
.s5-avis-fleches{display:flex; gap:8px}
.s5 .s5-avis-b{
  width:40px; height:40px; border-radius:50%; cursor:pointer; font:inherit; font-size:15px;
  background:rgba(43,72,75,.08); color:var(--p); border:1px solid rgba(43,72,75,.22);
  transition:background .18s ease, opacity .18s ease;
}
.s5 .s5-avis-b:hover:not(:disabled){background:rgba(43,72,75,.16)}
.s5 .s5-avis-b:disabled{opacity:.32; cursor:default}
.s5 .s5-avis-b:focus-visible{outline:3px solid var(--acc); outline-offset:3px}
/* la rangée reçoit le focus clavier : il faut qu'il se voie */
.s5-avis:focus-visible{outline:3px solid var(--acc); outline-offset:4px; border-radius:14px}

/* Pôle santé : même facture que l'équipe sportive, sans le retournement —
   il n'y a pas de biographie à révéler tant que les praticiens ne sont pas
   nommés. */
.s5-sante{margin-top:clamp(34px,5vw,60px)}
.s5-sante-t{
  font-size:clamp(19px,2.6vw,27px); margin:0 0 8px;
}
.s5-sante-intro{
  margin:0 0 22px; font-size:14.5px; color:var(--p); max-width:62ch;
}
.s5-sante-grille{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px;
}
.s5-pro{
  display:flex; flex-direction:column; overflow:hidden; border-radius:18px;
  background:linear-gradient(158deg, rgba(43,72,75,.075) 0%, rgba(43,72,75,.03) 100%);
  border:1px solid rgba(43,72,75,.16);
}
.s5-pro .s5-photo{border-radius:0; margin:0}
.s5-pro-txt{padding:18px 20px 20px; display:flex; flex-direction:column; gap:7px; flex:1}
.s5-pro h4{
  font-family:'Fugaz One',Impact,sans-serif; font-weight:400; text-transform:uppercase;
  font-size:17px; margin:0; color:var(--acc-clair);
}
.s5-pro-nom{
  margin:0; font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted);
}
/* un emplacement vide s'annonce comme tel plutôt que de passer inaperçu */
.s5-pro-vide{
  color:#8A5A12; background:rgba(138,90,18,.1);
  padding:2px 8px; border-radius:999px; align-self:flex-start;
}
.s5-pro-txt p:not(.s5-pro-nom){margin:0; font-size:13.5px; color:var(--p); line-height:1.55}
.s5-pro .s5-plus{margin-top:auto; padding-top:12px; font-size:11.5px;
  text-transform:uppercase; letter-spacing:.08em; text-decoration:none}

/* Calcul d'itinéraire, sous la carte. */
.s5-route{display:flex; flex-direction:column; gap:9px; margin-top:14px}
.s5-route label{
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--acc-txt);
}
.s5-route-ligne{display:flex; flex-wrap:wrap; gap:9px}
.s5 .s5-route input{
  flex:1 1 210px; min-width:0; font:inherit; font-size:14.5px;
  padding:12px 15px; border-radius:999px;
  background:rgba(255,253,249,.1); color:var(--onDark);
  border:1px solid rgba(234,243,244,.24);
}
.s5 .s5-route input::placeholder{color:var(--mist); opacity:.62}
.s5 .s5-route input:focus-visible{outline:3px solid var(--acc); outline-offset:2px}
.s5 .s5-route .s5-btn{flex:0 0 auto}
.s5-route-note{margin:0; font-size:12.5px; color:var(--mist); opacity:.85; max-width:52ch}
@media (max-width:560px){
  .s5 .s5-route input{flex:1 1 100%}
  .s5 .s5-route .s5-btn{width:100%; justify-content:center}
}

/* ---------------------------------------------------------------
   Cibles d'ancre : la barre flottante recouvrait le haut de chaque
   section quand on arrivait par le menu ou par le pied de page.
   La réserve vaut la hauteur de la barre plus un peu d'air ; le
   script l'ajuste à la mesure réelle dès qu'elle devient flottante.
   --------------------------------------------------------------- */
.s5{--s5-ancre:80px}
.s5 section[id],
.s5 .s5-mq[id],
.s5 [id="signature"]{scroll-margin-top:var(--s5-ancre)}
/* 68 px ne laissaient que 5 px sous une barre qui en fait 63 : la marge
   est trop mince si le script n'a pas encore ajusté la valeur. */
@media (max-width:899px){ .s5{--s5-ancre:80px} }

/* Déplacement adouci vers l'ancre, sauf si le visiteur s'en passe. */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}


/* ---------------------------------------------------------------
   Pages intérieures : mêmes panneaux, en-tête plus court.
   L'ouverture de la page unique occupe l'écran entier ; ici le
   contenu commence tout de suite, c'est lui qu'on vient chercher.
   --------------------------------------------------------------- */
.s5-hero-court{min-height:clamp(380px,58vh,560px)}
.s5-hero-court h1{font-size:clamp(27px,4.6vw,54px); max-width:18ch; margin-top:auto}
.s5-fil{
  font-size:12.5px; letter-spacing:.04em; color:var(--mist);
  display:flex; gap:8px; align-items:center; margin-top:auto; margin-bottom:10px;
}
.s5-fil a{color:var(--mist); text-decoration:none; opacity:.85}
.s5-fil a:hover,.s5-fil a:focus-visible{opacity:1; color:var(--coral)}
.s5-fil span[aria-hidden]{opacity:.5}
.s5-hero-court h1{margin-top:0}

/* photo à droite plutôt qu'à gauche, pour alterner sur une page longue */
.s5-split-inverse .s5-splitmedia{order:2}

/* ---------------------------------------------------------------
   Zone desservie : commune, distance, durée. En colonnes sur
   grand écran, en liste lisible sur téléphone.
   --------------------------------------------------------------- */
.s5-zone{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.s5-zone li{
  display:grid; grid-template-columns:1fr auto auto; gap:14px; align-items:baseline;
  padding:11px 14px; border-radius:12px; background:rgba(43,72,75,.05);
}
.s5-zone li:nth-child(odd){background:rgba(43,72,75,.09)}
.s5-zone-ville{font-weight:700; color:var(--p)}
.s5-zone-dist{font-size:13px; color:var(--muted); min-width:72px; text-align:right}
.s5-zone-duree{
  font-size:13px; font-weight:800; color:var(--acc-lab-clair);
  min-width:62px; text-align:right;
}
.s5-light .s5-zone + .s5-legal{margin-top:14px; color:var(--muted)}
@media (max-width:520px){
  .s5-zone li{grid-template-columns:1fr auto; row-gap:2px}
  .s5-zone-dist{grid-column:2; text-align:right}
  .s5-zone-duree{grid-column:2; text-align:right}
}

/* ---------------------------------------------------------------
   Reprise de la main sur le reset du thème.

   Hello Elementor habille tous les boutons du site :
   `[type=button],[type=submit],button` leur pose une bordure #c36,
   un display:inline-block, un padding, et un fond magenta au survol.
   Un sélecteur d'attribut pèse autant qu'une classe (0,1,0), et la
   feuille du thème est chargée après la nôtre : à égalité, c'était
   elle qui l'emportait. D'où le cadre rose autour du burger et des
   cartes coachs. Nos boutons sont donc repris ici avec le préfixe
   .s5, qui les fait repasser devant.
   --------------------------------------------------------------- */
.s5 .s5-burger,
.s5 .s5-menu-close,
.s5 .s5-coach-flip{
  border:none; border-radius:0; background-color:transparent;
  color:inherit; font:inherit; padding:0; width:auto;
}
.s5 .s5-burger:hover,.s5 .s5-burger:focus,
.s5 .s5-menu-close:hover,.s5 .s5-menu-close:focus,
.s5 .s5-coach-flip:hover,.s5 .s5-coach-flip:focus{
  background-color:transparent; color:inherit;
}
.s5 .s5-burger{display:none; width:44px; height:44px; padding:11px 9px}
@media (max-width:820px){.s5 .s5-burger{display:flex}}
.s5 .s5-menu-close{display:grid; width:46px; height:46px}
.s5 .s5-coach-flip{border-radius:18px}

/* Le bouton d'itinéraire est un vrai <button type="submit">, pas un lien. */
.s5 button.s5-btn{
  border:none; border-radius:999px; padding:14px 26px;
  font-size:15px; font-weight:800; width:auto;
}
.s5 button.s5-btn:hover,
.s5 button.s5-btn:focus{color:var(--ink)}

/* ---------------------------------------------------------------
   Lettre d'information : fenêtre modale, mêmes codes que les
   panneaux. Elle reste dans le DOM en permanence ; c'est l'attribut
   [hidden] qui décide, et le déclencheur est réglé dans Elementor.
   --------------------------------------------------------------- */
.s5-news[hidden]{display:none}
.s5-news{position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:18px}
.s5-news-voile{position:absolute; inset:0; background:rgba(11,25,26,.72); backdrop-filter:blur(3px)}
.s5-news-boite{
  position:relative; z-index:1; width:min(520px,100%);
  max-height:calc(100vh - 36px); overflow:auto;
  border-radius:22px; padding:clamp(24px,4vw,38px);
  color:var(--onDark);
  background:
    radial-gradient(115% 85% at 12% 8%, rgba(72,113,118,.85) 0%, rgba(72,113,118,0) 58%),
    linear-gradient(155deg, #305055 0%, #24403F 52%, #1D3739 100%);
  box-shadow:0 24px 70px rgba(11,25,26,.5);
}
.s5-news-boite h2{font-size:clamp(22px,3.4vw,32px); margin-bottom:10px}
.s5-news-boite p{color:var(--mist); font-size:15px; max-width:46ch}
.s5-news-x{
  position:absolute; top:14px; right:14px; width:40px; height:40px;
  display:grid; place-items:center; cursor:pointer;
}
.s5-news-x span{
  grid-area:1 / 1; display:block; width:18px; height:2px; border-radius:2px;
  background:var(--onDark);
}
.s5-news-x span:nth-child(1){transform:rotate(45deg)}
.s5-news-x span:nth-child(2){transform:rotate(-45deg)}
.s5-news-x:hover span{background:var(--coral)}
.s5-news-x:focus-visible{outline:3px solid var(--coral); outline-offset:2px; border-radius:10px}

.s5-news-form{margin-top:18px; display:flex; flex-direction:column; gap:8px}
.s5-news-label{font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:800; color:var(--mist)}
.s5-news-champ{
  width:100%; padding:13px 16px; border-radius:12px; font:inherit; font-size:15px;
  color:var(--onDark); background:rgba(255,255,255,.07);
  border:1px solid rgba(234,243,244,.22);
}
.s5-news-champ::placeholder{color:rgba(234,243,244,.45)}
.s5-news-champ:focus{outline:3px solid var(--coral); outline-offset:1px; border-color:transparent}
.s5-news-consent{display:flex; gap:10px; align-items:flex-start; margin:6px 0 4px; font-size:13px; color:var(--mist)}
.s5-news-consent input{margin-top:3px; width:17px; height:17px; flex:none; accent-color:var(--coral)}
.s5-news-consent span{line-height:1.5}
/* Le lien RGPD doit se voir : même teinte que le texte, il passait inaperçu. */
.s5-news-consent a{color:var(--acc-txt); text-decoration:underline; text-underline-offset:2px}
.s5-news-form .s5-btn{align-self:flex-start; margin-top:6px}
.s5-news-msg{margin:8px 0 0; font-size:13.5px; min-height:1.2em}
.s5-news-msg.is-ok{color:var(--acc-txt); font-weight:700}
.s5-news-msg.is-ko{color:#FFC9BD; font-weight:700}
/* Le piège à robots : hors écran, jamais au clavier, jamais lu à voix haute. */
.s5-news-piege{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* Le reset du thème habille aussi ces boutons : on repasse devant. */
.s5 .s5-news-x{border:none; background-color:transparent; color:inherit; padding:0; border-radius:0; width:40px}
.s5 .s5-news-x:hover,.s5 .s5-news-x:focus{background-color:transparent; color:inherit}

/* ---------------------------------------------------------------
   Cartes coachs : fondu au lieu du retournement 3D.
   Pendant la rotation, Safari laissait voir la face avant à travers
   le verso (le nom et la photo en miroir) : backface-visibility ne
   tient pas avec les enfants positionnés et le voile en ::after.
   Un fondu ne montre jamais rien à l'envers.
   Le verso ne s'ouvre plus sur :focus-within : au doigt, Android
   garde le focus sur le bouton et la carte ne se refermait plus.
   --------------------------------------------------------------- */
.s5 .s5-coach-in,
.s5 .s5-coach:hover .s5-coach-in,
.s5 .s5-coach.is-flipped .s5-coach-in,
.s5 .s5-coach:focus-within .s5-coach-in{transform:none; transition:none}
.s5 .s5-coach-face,.s5 .s5-coach-back{backface-visibility:visible; -webkit-backface-visibility:visible}
/* sans la 3D, le nom de la face (z-index:2) passait devant le verso */
.s5 .s5-coach-face{z-index:1}
.s5 .s5-coach-back{z-index:2}
.s5 .s5-coach-back{
  transform:none; opacity:0; visibility:hidden;
  transition:opacity .35s ease, visibility 0s linear .35s;
}
.s5 .s5-coach.is-flipped .s5-coach-back{opacity:1; visibility:visible; transition:opacity .35s ease}
@media (hover:hover){
  .s5 .s5-coach:hover .s5-coach-back{opacity:1; visibility:visible; transition:opacity .35s ease}
}
@media (prefers-reduced-motion:reduce){
  .s5 .s5-coach-back,.s5 .s5-coach.is-flipped .s5-coach-back{transition:none}
}

/* ---------------------------------------------------------------
   Avis : la rangée file jusqu'au bord du panneau, la carte suivante
   coupée par le bord dit d'elle-même que ça défile. Le premier avis
   reste aligné sur le titre grâce au scroll-padding.
   Les flèches sont centrées, sous la consigne.
   --------------------------------------------------------------- */
#avis.s5-panel{--bord:clamp(24px,3.6vw,52px); padding-inline:var(--bord)}
.s5 #avis .s5-avis{
  margin-inline:calc(-1 * var(--bord));
  padding-inline:var(--bord);
  scroll-padding-inline:var(--bord);
}
.s5 #avis .s5-avis-nav{flex-direction:column; justify-content:center; text-align:center}
.s5 #avis .s5-avis-fleches{justify-content:center}

/* ---------------------------------------------------------------
   Cartes coachs au doigt : sans survol, rien ne dit que la carte
   cache une biographie. La pastille passe en corail, dit quoi faire
   et respire doucement ; la carte fait un petit rebond la première
   fois qu'elle entre à l'écran (classe posée par page.js). Dès que
   le visiteur a ouvert une carte, la pastille arrête de pulser.
   --------------------------------------------------------------- */
@keyframes s5-halo{
  0%  {box-shadow:0 0 0 0 color-mix(in srgb, var(--coral) 75%, transparent)}
  70% {box-shadow:0 0 0 12px color-mix(in srgb, var(--coral) 0%, transparent)}
  100%{box-shadow:0 0 0 0 transparent}
}
@keyframes s5-rebond{
  0%,100%{transform:none}
  30%{transform:scale(.965)}
  60%{transform:scale(1.015)}
}
@media (hover:none){
  .s5 .s5-coach-flip::after{
    content:"Appuie pour découvrir +";
    background:var(--coral); color:#1B3436; font-weight:700;
    animation:s5-halo 2.2s ease-out infinite;
  }
  .s5 .s5-coach.s5-deja .s5-coach-flip::after{animation:none}
  .s5 .s5-coach.s5-coucou .s5-coach-in{animation:s5-rebond .7s cubic-bezier(.3,.7,.4,1) .15s}
}
@media (hover:none) and (prefers-reduced-motion:reduce){
  .s5 .s5-coach-flip::after,
  .s5 .s5-coach.s5-coucou .s5-coach-in{animation:none}
}

/* Barre du pied de page : le thème pose une marge de 12 px sous chaque
   <p>, qui l'emporte sur .s5-foot-legal. Les droits et le crédit étaient
   centrés 6 px plus haut que les liens légaux. Même hauteur de ligne
   que ces liens, pour que les trois textes partagent la même ligne. */
.s5 .s5-foot-bar .s5-foot-legal{margin:0; line-height:24px}

/* Flèches des avis : le reset du thème pose padding:12px 24px sur tout
   <button>. Dans un rond de 40 px il ne restait que quelques pixels de
   contenu, et la flèche débordait sur la droite — nettement sur iPhone. */
.s5 .s5-avis-b{
  width:44px; height:44px; padding:0; min-width:0;
  display:grid; place-items:center; line-height:1; font-size:17px;
}