/* ==========================================================================
   KEEPUP v5 - Feuille de style unique
   --------------------------------------------------------------------------
   Direction artistique : theme clair aux couleurs du site actuel keepup.ch
   (fond gris clair #f4f4f4 et blanc, texte noir ardoise, bleu KeepUp #005cb9),
   hero photo/video sous voile bleu en duotone, typographie condensee massive
   conservee de la v4, une couleur d'identite par univers.

   SOMMAIRE
     1.  Tokens et theme par univers
     2.  Reset et base
     3.  Utilitaires de mise en page
     4.  Typographie utilitaire
     5.  Boutons et liens
     6.  Reveal au scroll
     7.  Curseur
     8.  Header et menu plein ecran
     9.  Hero (duotone), repere d'etage et marquee
     10. Les trois univers (bandes de l'accueil)
     11. Chiffres
     12. Equipe en defilement horizontal
     13. News
     14. CTA final
     15. Footer
     16. Responsive et prefers-reduced-motion

   --------------------------------------------------------------------------
   THEME PAR UNIVERS (training.html / studio.html / therapy.html)
   --------------------------------------------------------------------------
   Trois couleurs d'identite, une par etage. Le fond, la typo et la structure
   restent identiques d'une page a l'autre : seule la couleur change.

       <body data-univers="training">   bleu KeepUp   #005cb9 (la marque)
       <body data-univers="studio">     cuivre        #c98a4b
       <body data-univers="therapy">    vert enseigne #4fd18b

   L'attribut marche aussi sur un conteneur (bande, carte, etiquette) pour
   teinter une portion de page : c'est ce que fait l'accueil sur ses bandes.

   Variables redefinies par chaque theme, consommees partout :
       --accent       aplat : boutons pleins, filets, puces, pastilles
       --accent-text  variante foncee lisible (>= 4.5:1 sur #f4f4f4, #fff et
                      #e9ecf0) : TOUT texte, lien ou icone de la couleur
       --accent-ink   texte pose SUR --accent
       --tint-soft    aplat tres pale du meme ton (fonds, survols, focus)
       --glow         lueur discrete (rarement utilisee sur fond clair)
       --veil         couleur du duotone du hero et du degrade des bandes
                      (blanc dessus >= 5.6:1)
       --hero-em      teinte claire du mot mis en avant dans le titre du hero
   Le cuivre et le vert ne s'ecrivent JAMAIS en texte sur fond clair : on
   passe par --accent-text. Le bleu electrique #208fff (--volt) ne sert plus
   qu'a une lueur de survol, jamais en texte.

   --------------------------------------------------------------------------
   CLASSES UTILITAIRES DISPONIBLES POUR LES AUTRES PAGES
   --------------------------------------------------------------------------
   Mise en page : .wrap  .wrap--wide  .sec  .sec--tight  .sec--alt  .sec--line
                  .grid-2  .stack  .flow
   Typo         : .h-xl  .h-lg  .h-md  .h-sm  .lede  .label  .eyebrow
                  .note  .muted  .tag  .tag--accent  .rule
   Boutons      : .btn  .btn--ghost  .btn--ink  .btn--block  .btns  .lnk
                  (data-magnetic sur un bouton = effet magnetique au curseur)
   Hero         : .lvl (pastille d'etage dans la couleur de l'univers)
   Animation    : .rv (reveal au scroll)  .rv--right  .rv--scale  .is-in
                  data-split="chars" ou "words" sur un titre = SplitText
                  data-count="420" sur un nombre = compteur
   ========================================================================== */

/* -------------------------------------------------- 1. Tokens et theme */
:root {
  --bg: #f4f4f4;            /* gris clair du site actuel */
  --bg-2: #ffffff;          /* cartes, bandes alternees */
  --bg-3: #e9ecf0;          /* fonds de media, champs inactifs */
  --ink: #0b1420;           /* noir ardoise */
  --ink-soft: #3a4656;
  /* #6b7685 demande par le brief tombe a 4.19:1 sur #f4f4f4 : fonce a
     #5f6a79 (4.99:1 sur #f4f4f4, 4.63:1 sur #e9ecf0). */
  --grey: #5f6a79;
  --line: rgba(11, 20, 32, 0.12);
  --line-strong: rgba(11, 20, 32, 0.26);
  --card-line: rgba(11, 20, 32, 0.08);
  --field-line: #8b94a1;    /* bord des champs : 3:1 sur blanc (WCAG 1.4.11) */
  --shadow: 0 14px 34px -18px rgba(11, 20, 32, 0.22);

  --blue: #005cb9;          /* bleu de marque KeepUp */
  --blue-2: #014f9e;        /* secondaire du site actuel */
  --blue-dk: #004386;       /* fonce du site actuel */
  --volt: #208fff;          /* bleu electrique : lueur de survol uniquement */

  --u-training: #005cb9;
  --u-studio: #c98a4b;
  --u-therapy: #4fd18b;     /* vert neon de l'enseigne du 2e etage */

  --accent: var(--blue);
  --accent-text: #005cb9;
  --accent-ink: #ffffff;
  --tint-soft: rgba(0, 92, 185, 0.07);
  --glow: rgba(32, 143, 255, 0.28);
  --veil: #005cb9;
  --hero-em: #9fd0ff;

  --maxw: 1280px;
  --gut: clamp(1.15rem, 4vw, 3.25rem);
  --r: 4px;

  --ff-display: "Bebas Neue", "Barlow Condensed", Impact, sans-serif;
  --ff-cond: "Barlow Condensed", "Arial Narrow", sans-serif;
  --ff-body: "Barlow", "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Chaque theme ecrit ses valeurs en dur : une var() est resolue sur
   l'element qui la declare, une chaine de var() heritee resterait bleue. */
[data-univers="training"] {
  --accent: #005cb9;
  --accent-text: #005cb9;     /* 5.91:1 sur #f4f4f4 */
  --accent-ink: #ffffff;      /* 6.50:1 */
  --tint-soft: rgba(0, 92, 185, 0.07);
  --glow: rgba(32, 143, 255, 0.28);
  --veil: #005cb9;
  --hero-em: #9fd0ff;         /* 4.00:1 sur le voile, titre geant */
}
[data-univers="studio"] {
  --accent: #c98a4b;
  /* #9a6530 propose : 4.46:1 sur #f4f4f4 et 4.14:1 sur #e9ecf0, donc fonce
     a #8f5c2a (5.12:1 et 4.75:1). */
  --accent-text: #8f5c2a;
  --accent-ink: #0b1420;      /* 6.36:1 sur le cuivre */
  --tint-soft: rgba(201, 138, 75, 0.12);
  --glow: rgba(201, 138, 75, 0.3);
  --veil: #8f5c2a;            /* blanc dessus : 5.63:1 */
  --hero-em: #f0c79a;         /* 3.57:1 sur le voile, titre geant */
}
[data-univers="therapy"] {
  --accent: #4fd18b;
  /* #1f8a52 propose : 3.96:1 sur #f4f4f4, insuffisant : fonce a #17733f
     (5.36:1 sur #f4f4f4, 4.98:1 sur #e9ecf0). */
  --accent-text: #17733f;
  --accent-ink: #0b1420;      /* 9.54:1 sur le vert */
  --tint-soft: rgba(79, 209, 139, 0.14);
  --glow: rgba(79, 209, 139, 0.3);
  --veil: #17733f;            /* blanc dessus : 5.90:1 */
  --hero-em: #a8f0c6;         /* 4.48:1 sur le voile */
}

/* -------------------------------------------------- 2. Reset et base */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
/* Lenis : scroll-behavior DOIT repasser en auto des que Lenis est actif,
   sinon ScrollTrigger mesure faux au refresh (positions de pin negatives). */
html.lenis,
html.lenis body { height: auto; scroll-behavior: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ff-body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  line-height: 1.6;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, video, svg, iframe { max-width: 100%; }
img, video { height: auto; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

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

:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
}
/* sur les aplats colores (hero, CTA, footer, bandes) l'anneau passe en blanc */
.hero :focus-visible,
.cta :focus-visible,
.ftr :focus-visible,
.hdr:not(.is-stuck):not(.is-menu) :focus-visible { outline-color: #fff; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 400;
  background: var(--blue);
  color: #fff;
  padding: 0.75rem 1.2rem;
  font-family: var(--ff-cond);
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
.skip:focus { left: 0; }

/* -------------------------------------------------- 3. Mise en page */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.wrap--wide { max-width: 1640px; }

.sec { padding-block: clamp(4rem, 9vw, 8.5rem); }
.sec--tight { padding-block: clamp(2.6rem, 5vw, 4.5rem); }
.sec--alt { background: var(--bg-2); }
.sec--line { border-top: 1px solid var(--line); }
[id] { scroll-margin-top: 90px; }

.grid-2 {
  display: grid;
  gap: clamp(1.8rem, 4vw, 4rem);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .grid-2 { grid-template-columns: 1fr 1fr; align-items: center; } }

.stack > * + * { margin-top: 1.1rem; }
.flow { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }

/* -------------------------------------------------- 4. Typographie */
.h-xl { font-size: clamp(3.2rem, 12vw, 9.5rem); }
.h-lg { font-size: clamp(2.6rem, 7.4vw, 6rem); }
.h-md { font-size: clamp(1.9rem, 4vw, 3.2rem); }
.h-sm { font-size: clamp(1.35rem, 2.2vw, 1.8rem); }

.lede {
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  color: var(--ink-soft);
  max-width: 60ch;
  font-weight: 400;
}

.label {
  font-family: var(--ff-cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  color: var(--accent-text);
  margin: 0;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--ff-cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.74rem;
  color: var(--accent-text);
  margin: 0 0 1.2rem;
}
.eyebrow::before {
  content: "";
  width: clamp(26px, 5vw, 62px);
  height: 2px;
  background: var(--accent);
  flex: none;
}

.note {
  font-family: var(--ff-cond);
  text-transform: uppercase;
  letter-spacing: 0.17em;
  font-size: 0.7rem;
  color: var(--grey);
}
.muted { color: var(--grey); }

.tag {
  display: inline-block;
  font-family: var(--ff-cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.66rem;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--line-strong);
  color: var(--grey);
}
.tag--accent { border-color: var(--accent); color: var(--accent-text); }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* -------------------------------------------------- 5. Boutons et liens */
.btns { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* Bouton plein : aplat de la couleur d'univers, un voile noir ardoise monte
   au survol (texte blanc lisible quelle que soit la teinte). */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 44px;
  font-family: var(--ff-cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.92rem;
  line-height: 1;
  padding: 1.05rem 1.8rem;
  border: 1px solid var(--accent);
  border-radius: var(--r);
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease);
  will-change: transform;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform 0.45s var(--ease);
}
.btn:hover::before { transform: scaleY(1); }
.btn:hover { color: #fff; border-color: var(--ink); }
.btn svg { width: 17px; height: 17px; flex: none; }

/* Contour noir ardoise */
.btn--ghost {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}

/* Bouton pose sur un aplat colore (CTA) : plein blanc, texte bleu */
.btn--ink {
  background: #fff;
  border-color: #fff;
  color: var(--blue);
}
.btn--ink:hover { border-color: var(--ink); }
/* le second bouton d'un CTA passe en contour blanc */
.btn--ink ~ .btn--ink { background: transparent; color: #fff; }

.btn--block { width: 100%; }

.lnk {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  font-family: var(--ff-cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.17em;
  font-size: 0.85rem;
  color: var(--accent-text);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}
.lnk:hover { border-bottom-color: currentColor; }
.lnk svg { width: 15px; height: 15px; transition: transform 0.35s var(--ease); }
.lnk:hover svg { transform: translate(3px, -3px); }

/* -------------------------------------------------- 6. Reveal au scroll */
.rv {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.rv--right { transform: translate3d(-28px, 0, 0); }
.rv--scale { transform: scale(1.04); }
.rv.is-in { opacity: 1; transform: none; }
.no-js .rv { opacity: 1; transform: none; }

/* -------------------------------------------------- 7. Curseur */
/* Bleu KeepUp ; un liseré blanc le garde visible sur le hero bleu. */
.cursor,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 350;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  will-change: transform;
}
.cursor {
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  background: var(--blue);
  box-shadow: 0 0 0 1.5px #fff;
}
.cursor-ring {
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border: 1.5px solid var(--blue);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6), 0 0 18px var(--glow);
  transform: scale(0.3);
  transition: transform 0.35s var(--ease), opacity 0.3s;
}
body.has-cursor .cursor,
body.has-cursor .cursor-ring { opacity: 1; }
body.has-cursor.is-hovering .cursor-ring { transform: scale(1); }
body.has-cursor.is-hovering .cursor { opacity: 0.35; }

/* -------------------------------------------------- 8. Header */
/* Le header est la marque : bleu KeepUp sur toutes les pages, quel que soit
   l'univers. Transparent et blanc sur le hero, blanc translucide au scroll. */
.hdr {
  --accent: #005cb9;
  --accent-text: #005cb9;
  --accent-ink: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  color: #fff;
  border-bottom: 1px solid transparent;
  transition: background 0.4s, border-color 0.4s, backdrop-filter 0.4s, color 0.4s;
}
.hdr.is-stuck,
.hdr.is-menu { color: var(--ink); }
.hdr.is-stuck {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--line);
}
.hdr__in {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  min-height: 88px;
  transition: min-height 0.4s var(--ease);
}
.hdr.is-stuck .hdr__in { min-height: 66px; }

.brand { display: inline-flex; color: #fff; transition: color 0.4s; }
.hdr.is-stuck .brand,
.hdr.is-menu .brand { color: var(--blue); }
.brand svg {
  width: 82px;
  height: auto;
  transition: width 0.4s var(--ease);
}
.hdr.is-stuck .brand svg { width: 66px; }

.nav { margin-left: auto; }
.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 2rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__list a {
  font-family: var(--ff-cond);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 1.08rem;
  color: inherit;
  position: relative;
  padding-block: 0.4rem;
}
.nav__list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.hdr.is-stuck .nav__list a::after { background: var(--blue); }
.nav__list a:hover::after,
.nav__list a[aria-current="page"]::after { transform: scaleX(1); }
.nav__list .btn { padding: 0.75rem 1.2rem; font-size: 1.04rem; min-height: 44px; }
.nav__list .btn::after { display: none; }
/* sur le hero : bouton blanc texte bleu ; au scroll : bouton bleu texte blanc */
.hdr:not(.is-stuck) .nav__list .btn { background: #fff; border-color: #fff; color: var(--blue); }
.hdr:not(.is-stuck) .nav__list .btn:hover { color: #fff; border-color: var(--ink); }
.hdr.is-stuck .nav__list .btn { color: #fff; }

.burger {
  display: none;
  margin-left: auto;
  width: 46px;
  height: 46px;
  background: none;
  border: 1px solid currentColor;
  border-radius: var(--r);
  color: inherit;
  cursor: pointer;
  position: relative;
  z-index: 2;
}
.burger span,
.burger span::before,
.burger span::after {
  position: absolute;
  left: 50%;
  width: 20px;
  height: 1.5px;
  background: currentColor;
  transform: translateX(-50%);
  transition: transform 0.35s var(--ease), opacity 0.2s;
}
.burger span { top: 50%; margin-top: -0.75px; }
.burger span::before { content: ""; left: 0; transform: translateY(-6px); }
.burger span::after { content: ""; left: 0; transform: translateY(6px); }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(0) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: translateY(0) rotate(-45deg); }

.menu {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: #fff;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-content: safe center; /* trop haut pour l'ecran : on part du haut, jamais sous le logo */
  overflow-y: auto;
  padding: 6rem var(--gut) 3rem;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.7s var(--ease);
  visibility: hidden;
}
.menu.is-open { clip-path: inset(0 0 0 0); visibility: visible; }
.menu__list { list-style: none; margin: 0; padding: 0; }
.menu__list li { overflow: hidden; border-bottom: 1px solid var(--line); }
.menu__list a {
  display: block;
  font-family: var(--ff-display);
  /* 8 liens depuis l'ajout de Shop (11.11.2026) : la taille suit aussi la hauteur de l'ecran */
  font-size: clamp(2rem, min(11vw, 6.4vh), 4.2rem);
  line-height: 1.08;
  text-transform: uppercase;
  color: var(--ink);
  padding: 0.35rem 0;
  transform: translateY(105%);
  transition: transform 0.75s var(--ease), color 0.3s;
}
.menu__list a:hover,
.menu__list a[aria-current="page"] { color: var(--blue); }
.menu.is-open .menu__list a { transform: translateY(0); }
/* cascade a l'ouverture */
.menu.is-open .menu__list li:nth-child(1) a { transition-delay: 0.1s; }
.menu.is-open .menu__list li:nth-child(2) a { transition-delay: 0.16s; }
.menu.is-open .menu__list li:nth-child(3) a { transition-delay: 0.22s; }
.menu.is-open .menu__list li:nth-child(4) a { transition-delay: 0.28s; }
.menu.is-open .menu__list li:nth-child(5) a { transition-delay: 0.34s; }
.menu.is-open .menu__list li:nth-child(6) a { transition-delay: 0.4s; }
.menu.is-open .menu__list li:nth-child(7) a { transition-delay: 0.46s; }
.menu.is-open .menu__list li:nth-child(8) a { transition-delay: 0.52s; }
.menu__foot {
  margin-top: 2.4rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
}
.menu .btn { --accent: #005cb9; --accent-ink: #fff; }

/* -------------------------------------------------- 9. Hero */
/* Voile bleu facon site actuel : la video passe en niveaux de gris, un aplat
   --veil a 85 % la recouvre (melange normal, pas multiply : la video de la
   salle est sombre, en multiply le hero virait au noir). Le gris le plus clair
   de l'image ne remonte qu'a 15 %, et un degrade plus profond tapisse le bas
   ou se pose le texte : blanc dessus >= 4.5:1 partout, ~6:1 en moyenne. */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding-top: 110px;
  background: var(--veil);
  color: #fff;
  isolation: isolate;
}
.hero__media {
  position: absolute;
  inset: -8% 0;
  z-index: 0;
  will-change: transform;
}
.hero__media video,
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.15) brightness(1.05);
}
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: color-mix(in srgb, var(--veil) 80%, transparent);
}
.hero__veil::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--veil) 45%, #000) 0%,
    transparent 24%,
    transparent 46%,
    color-mix(in srgb, var(--veil) 55%, #000) 100%);
  opacity: 0.55;
}
.hero__in {
  position: relative;
  z-index: 2;
  padding-bottom: clamp(2.4rem, 6vw, 4.6rem);
}
.hero__title {
  font-size: clamp(3.4rem, 13.5vw, 11rem);
  line-height: 0.86;
  margin: 0.6rem 0 1.4rem;
  color: #fff;
}
.hero__title em { font-style: normal; color: var(--hero-em); }
/* le titre attend son decoupage SplitText : masque uniquement si JS est actif */
html.js .hero__title { opacity: 0; }
@media (prefers-reduced-motion: reduce) { html.js .hero__title { opacity: 1; } }
.hero__sub {
  font-family: var(--ff-cond);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: clamp(0.76rem, 1.4vw, 0.92rem);
  color: #fff;
  margin-bottom: 1.8rem;
}
.hero .label { color: #fff; }
.hero .lede { color: rgba(255, 255, 255, 0.92); }
/* Ligne de confiance sous les boutons du hero (note Google, Training et Therapy) */
.hero__trust { margin-top: 1.1rem; font-size: 0.92rem; color: rgba(255, 255, 255, 0.86); letter-spacing: 0.02em; }

/* boutons du hero : plein blanc texte couleur, contour blanc */
.hero .btn {
  background: #fff;
  border-color: #fff;
  color: var(--accent-text);
}
.hero .btn:hover { color: #fff; border-color: var(--ink); }
.hero .btn--ghost {
  background: transparent;
  border-color: #fff;
  color: #fff;
}
.hero .btn--ghost::before { background: #fff; }
.hero .btn--ghost:hover { color: var(--ink); border-color: #fff; }

.hero__scroll {
  display: none;
  position: absolute;
  right: var(--gut);
  bottom: clamp(2.4rem, 6vw, 4.6rem);
  z-index: 2;
  align-items: center;
  gap: 0.7rem;
  writing-mode: vertical-rl;
  font-family: var(--ff-cond);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: 0.68rem;
  color: #fff;
}
@media (min-width: 900px) { .hero__scroll { display: flex; } }
.hero__scroll i {
  display: block;
  width: 1px;
  height: 54px;
  background: linear-gradient(#fff, transparent);
}

/* fine barre de la couleur d'univers sous le hero des pages d'etage */
[data-univers] .hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--accent);
  z-index: 3;
}

/* Pastille d'etage : « 00 | Rez-de-chaussee · 420 m² » */
.lvl {
  display: inline-flex;
  align-items: stretch;
  margin: 0 0 0.6rem;
  border-radius: var(--r);
  overflow: hidden;
  font-family: var(--ff-cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: clamp(0.68rem, 1.2vw, 0.78rem);
  line-height: 1.25;
  background: #fff;
  color: var(--ink);
}
.lvl__n {
  display: grid;
  place-items: center;
  padding: 0.45rem 0.75rem;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: 1.35em;
  letter-spacing: 0.04em;
}
.lvl__t { padding: 0.55rem 0.85rem; align-self: center; }
.lvl__t b { font-weight: 500; color: var(--grey); letter-spacing: 0.14em; }
.lvl__t b::before { content: " · "; color: var(--ink-soft); }

/* Marquee */
.marquee {
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(0, 20, 50, 0.22);
  overflow: hidden;
  padding-block: 0.85rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.marquee__group {
  display: flex;
  align-items: center;
  flex: none;
}
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: clamp(1.1rem, 2.4vw, 2.2rem);
  padding-inline: clamp(0.55rem, 1.2vw, 1.1rem);
  font-family: var(--ff-cond);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: clamp(0.82rem, 1.5vw, 1.02rem);
  color: #fff;
  white-space: nowrap;
}
.marquee__wolf {
  width: 15px;
  height: 22px;
  color: var(--hero-em);
  flex: none;
}

/* -------------------------------------------------- 10. Les trois univers */
/* Piece centrale de l'accueil : trois grandes vignettes empilees comme les
   trois etages, photo en couleur, degrade de la couleur d'identite qui monte
   du bas et porte le titre en blanc. */
.bands {
  background: var(--bg-2);
  padding-top: clamp(3rem, 7vw, 6rem);
}
.bands__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-bottom: clamp(1.6rem, 3.5vw, 2.8rem);
}
.bands__head .lede { max-width: 44ch; }
.bands__list {
  display: grid;
  gap: clamp(6px, 0.7vw, 10px);
}
.band {
  position: relative;
  display: block;
  height: 40vh;
  min-height: 300px;
  overflow: hidden;
  color: #fff;
  background: var(--veil);
  transition: height 0.6s var(--ease);
}
@media (min-width: 900px) and (hover: hover) {
  .band:hover,
  .band:focus-visible { height: 52vh; }
}
.band:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.band__bg {
  position: absolute;
  inset: 0;
}
.band__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  /* photo en couleur, juste un cran plus basse pour porter un titre blanc */
  filter: brightness(0.86) saturate(1.05);
}
/* le calque fait 160 % de la bande, ancre en bas : au repos il est pousse
   vers le bas, au survol il remonte (transform seulement). */
.band__shade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 160%;
  background: linear-gradient(to top,
    color-mix(in srgb, var(--veil) 95%, transparent) 0%,
    color-mix(in srgb, var(--veil) 88%, transparent) 24%,
    color-mix(in srgb, var(--veil) 70%, transparent) 46%,
    color-mix(in srgb, var(--veil) 34%, transparent) 64%,
    transparent 84%);
  transform: translate3d(0, 8%, 0);
  transition: transform 0.8s var(--ease);
  will-change: transform;
}
.band:hover .band__shade,
.band:focus-visible .band__shade { transform: translate3d(0, 0, 0); }
.band__in {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: clamp(1.3rem, 3vw, 2.4rem);
}
.band__txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  transition: transform 0.6s var(--ease);
}
.band:hover .band__txt,
.band:focus-visible .band__txt { transform: translate3d(clamp(0.4rem, 1vw, 1rem), 0, 0); }
.band__lvl {
  display: inline-block;
  margin-bottom: 0.9rem;
  padding: 0.42rem 0.7rem;
  border-radius: var(--r);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--ff-cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.7rem;
  line-height: 1.2;
}
.band__title {
  display: block;
  font-family: var(--ff-display);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: clamp(2.7rem, 10vw, 8.6rem);
  line-height: 0.86;
  color: #fff;
  white-space: nowrap;
  will-change: transform;
}
.band__job {
  display: block;
  margin-top: 0.7rem;
  font-weight: 500;
  font-size: clamp(0.98rem, 1.4vw, 1.22rem);
  line-height: 1.4;
  color: #fff;
  max-width: 46ch;
}
.band__arrow {
  width: 60px;
  height: 60px;
  border-radius: var(--r);
  display: grid;
  place-items: center;
  flex: none;
  background: var(--accent);
  color: var(--accent-ink);
}
.band__arrow svg { width: 22px; height: 22px; transition: transform 0.5s var(--ease); }
.band:hover .band__arrow svg { transform: translate3d(5px, 0, 0); }

/* -------------------------------------------------- 11. Chiffres */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
@media (min-width: 820px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat {
  padding: clamp(1.4rem, 3.4vw, 2.6rem) clamp(0.9rem, 2vw, 1.6rem);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stat__n {
  display: flex;
  align-items: baseline;
  gap: 0.15rem;
  font-family: var(--ff-display);
  font-size: clamp(3.2rem, 8vw, 6.4rem);
  line-height: 0.85;
  color: var(--ink);
}
.stat__n sup {
  align-self: flex-start;
  top: 0;
  margin-top: 0.3em;
  font-family: var(--ff-cond);
  font-weight: 700;
  font-size: 0.22em;
  letter-spacing: 0.08em;
  color: var(--accent-text);
}
.stat__l {
  display: block;
  margin-top: 0.9rem;
  font-family: var(--ff-cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.7rem;
  color: var(--accent-text);
}
.stat__d {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 32ch;
}

/* -------------------------------------------------- 12. Equipe */
.team { overflow: hidden; }
.team__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.team__viewport { margin-top: clamp(1.8rem, 4vw, 3rem); }
.team__track {
  display: flex;
  gap: clamp(0.9rem, 1.6vw, 1.4rem);
  padding-inline: var(--gut);
  width: max-content;
  will-change: transform;
}
@media (max-width: 899px) {
  .team__viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .team__viewport::-webkit-scrollbar { display: none; }
  .team__card { scroll-snap-align: center; }
}
.team__card {
  position: relative;
  width: clamp(220px, 26vw, 310px);
  flex: none;
}
.team__ph {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--bg-3);
  border: 1px solid var(--card-line);
  border-radius: var(--r);
  overflow: hidden;
}
.team__ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04);
  transition: filter 0.6s var(--ease);
}
.team__card:hover .team__ph img { filter: grayscale(0); }
.team__ini {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--ff-display);
  font-size: clamp(3rem, 6vw, 4.6rem);
  color: var(--accent-text);
  background:
    radial-gradient(70% 70% at 50% 35%, var(--tint-soft), transparent 70%),
    var(--bg-3);
}
.team__name {
  margin: 0.9rem 0 0.25rem;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
}
.team__role {
  font-family: var(--ff-cond);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.7rem;
  color: var(--grey);
}

/* -------------------------------------------------- 13. News */
.news { border-top: 1px solid var(--line); }
.news__item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem 1.6rem;
  align-items: center;
  padding: clamp(1.2rem, 3vw, 2rem) 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 820px) { .news__item { grid-template-columns: 120px 1fr auto; } }
/* Telephone : colonne de date fixe pour aligner tous les textes, etiquette (Complet) sous le texte (01.11.2026) */
@media (max-width: 819px) {
  .news__item { grid-template-columns: 76px minmax(0, 1fr); }
  .news__item > .tag { grid-column: 2; justify-self: start; }
}
.news__item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease);
}
.news__item:hover::after { transform: scaleX(1); }
.news__item .news__date {
  font-family: var(--ff-display);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 0.85;
  margin: 0;
  color: var(--ink);
}
.news__date small {
  display: block;
  font-family: var(--ff-cond);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-top: 0.4rem;
}
.news__item h3 { font-size: clamp(1.3rem, 2.4vw, 1.9rem); margin-bottom: 0.4rem; }
.news__item p { color: var(--ink-soft); margin: 0; font-size: 0.95rem; }

/* -------------------------------------------------- 14. CTA final */
/* Toujours bleu KeepUp, quelle que soit la page : la fin de chaque parcours
   ramene a la marque. */
.cta {
  --accent-text: #ffffff;
  background: var(--blue);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.cta__wolf {
  position: absolute;
  right: -4%;
  top: 50%;
  width: min(46vw, 560px);
  transform: translateY(-50%);
  mix-blend-mode: multiply;
  filter: grayscale(1) contrast(1.1) brightness(1.15);
  opacity: 0.7;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(70% 70% at 62% 50%, #000 35%, transparent 78%);
  mask-image: radial-gradient(70% 70% at 62% 50%, #000 35%, transparent 78%);
}
@media (max-width: 900px) {
  .cta__wolf { right: -18%; width: 78vw; opacity: 0.35; }
}
.cta h2 {
  font-size: clamp(3rem, 11vw, 9rem);
  line-height: 0.85;
  margin: 0 0 1.6rem;
  color: #fff;
}
.cta .label { color: #fff; }
.cta .lede { color: rgba(255, 255, 255, 0.92); }
.cta__in { position: relative; z-index: 2; display: grid; gap: clamp(1.6rem, 4vw, 2.6rem); }
.cta__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.4rem;
  align-items: center;
  margin-top: clamp(2rem, 5vw, 3.4rem);
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  font-family: var(--ff-cond);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.76rem;
  color: #fff;
}

/* -------------------------------------------------- 15. Footer */
/* Bleu fonce de la charte (#004386) plutot que #005cb9 : le CTA juste au-dessus
   est deja en bleu KeepUp, le fonce garde la marque tout en marquant la
   separation (blanc dessus : 9.78:1). */
.ftr {
  background: var(--blue-dk);
  color: #fff;
  padding-block: clamp(3rem, 6vw, 5rem) 2rem;
}
.ftr__top {
  display: grid;
  gap: 2.4rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .ftr__top { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; } }
.ftr__brand svg { width: 92px; height: auto; color: #fff; }
.ftr__brand p { margin-top: 1.1rem; color: rgba(255, 255, 255, 0.86); font-size: 0.92rem; max-width: 34ch; }
.ftr h4 {
  font-family: var(--ff-cond);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #c7d6e6;           /* 6.61:1 */
  margin-bottom: 1rem;
}
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.ftr ul a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: #fff;
  font-size: 0.94rem;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}
.ftr ul a:hover { border-bottom-color: #fff; }
.ftr__bottom {
  margin-top: clamp(2.4rem, 5vw, 3.6rem);
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 2rem;
  justify-content: space-between;
  font-family: var(--ff-cond);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.7rem;
  color: #c7d6e6;
}
.ftr__bottom a { color: #fff; }

/* -------------------------------------------------- 16. Responsive */
@media (max-width: 980px) {
  .nav { display: none; }
  .burger { display: block; }
}

/* Bouton d'action de la barre (mobile) : apparait des que le header se reduit au scroll */
.hdr__cta { display: none; }
@media (max-width: 980px) {
  .hdr__cta {
    display: inline-flex;
    margin-left: auto;
    padding: 0.7rem 0.95rem;
    font-size: 0.86rem;
    letter-spacing: 0.12em;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0s 0.35s, color 0.35s var(--ease), border-color 0.35s var(--ease);
  }
  .hdr__cta + .burger { margin-left: 0; }
  .hdr.is-stuck:not(.is-menu) .hdr__cta {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }
}
@media (max-width: 340px) { .hdr__cta { padding: 0.65rem 0.7rem; letter-spacing: 0.08em; } }
/* Therapy : le bouton « Prendre RDV » de la barre reprend le vert du bouton OneDoc de la page (01.11.2026) */
[data-univers="therapy"] .hdr__cta { --accent: #4fd18b; --accent-ink: #0b1420; }
/* Therapy : tous les boutons RDV (OneDoc) de la barre et du menu en vert, comme sur la page (01.11.2026) */
[data-univers="therapy"] .nav__list .btn,
[data-univers="therapy"] .menu .btn { --accent: #4fd18b; --accent-ink: #0b1420; }
[data-univers="therapy"] .hdr:not(.is-stuck) .nav__list .btn { color: #17733f; }
[data-univers="therapy"] .hdr.is-stuck .nav__list .btn { color: #0b1420; }

@media (max-width: 899px) {
  .hero { min-height: 92svh; }
  .band { height: 32vh; min-height: 250px; }
  .band__in { padding-bottom: 1.2rem; }
  .band__arrow { position: absolute; top: 1rem; right: var(--gut); width: 44px; height: 44px; }
  .band__lvl { margin-bottom: 0.7rem; }
  .band__title { font-size: clamp(2.5rem, 12vw, 4.6rem); }
}

/* Mouvement reduit : tout est pose, rien ne bouge */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .rv { opacity: 1; transform: none; }
  .cursor, .cursor-ring { display: none; }
  .band:hover,
  .band:focus-visible { height: 40vh; }
  .band:hover .band__txt { transform: none; }
}

/* Ordinateur : petits titres au-dessus des titres en 17 px (le telephone garde sa taille) */
@media (min-width: 981px) {
  .label,
  .eyebrow,
  .band__lvl,
  .lvl { font-size: 1.06rem; }
  .hero .label { font-size: 1.32rem; }
}

/* Petits textes en capitales sous les titres : meme taille que les boutons (0.92rem) */
.hero__sub,
.cta__foot,
.stat__l,
.news__date small,
.team__role { font-size: 0.92rem; }

/* Rangée de photos qui défile seule, pause au survol (Therapy, Événements) */
.photorow { margin-top: clamp(2rem, 4vw, 3rem); overflow: hidden; }
.photorow__track { display: flex; width: max-content; animation: photorow 70s linear infinite; }
.photorow:hover .photorow__track { animation-play-state: paused; }
.photorow__group { display: flex; gap: 12px; padding-right: 12px; flex: none; }
.photorow__group img { height: clamp(220px, 30vw, 420px); width: auto; display: block; object-fit: cover; }
@keyframes photorow { to { transform: translateX(-50%); } }
.photorow--rev .photorow__track { animation-direction: reverse; }
@media (prefers-reduced-motion: reduce) {
  .photorow { overflow-x: auto; }
  .photorow__track { animation: none; }
  .photorow__group[aria-hidden] { display: none; }
}

/* Événements : titre + mois, phrase des cours */
.ev__m {
  font-family: var(--ff-cond); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.16em; font-size: 0.32em; color: var(--accent-text);
  vertical-align: middle; margin-left: 0.6rem; white-space: nowrap;
}
.ev__claim { max-width: 34ch; }

/* Titres animés : le masque de ligne coupait les accents des capitales (É) */
.split-mask-line-mask { overflow-clip-margin: 0.22em; }

/* Mosaïque de photos (Événements) : colonnes façon mur de photos, chaque
   photo garde ses proportions, aucun trou */
.mosaic { column-count: 2; column-gap: 8px; margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.mosaic img {
  width: 100%; height: auto; display: block; margin-bottom: 8px;
  border-radius: 4px; break-inside: avoid;
}
@media (min-width: 700px)  { .mosaic { column-count: 3; } }
@media (min-width: 1100px) { .mosaic { column-count: 5; } }
/* peu de photos : on garde 3 colonnes pleines */
@media (min-width: 700px) { .mosaic--3 { column-count: 3; } }
@media (min-width: 1100px) { .mosaic--4 { column-count: 4; } }

/* Événements : rangées plus rapides, sans pause au survol */
.photorow--fast .photorow__track { animation-duration: var(--dur, 22s); }
.photorow--fast:hover .photorow__track { animation-play-state: running; }

/* QualiCert : pastille (accueil), rappel sous les tarifs, bloc Contact */
.qc-line {
  display: inline-flex; align-items: center; gap: 0.8rem;
  margin-top: 1.6rem; color: #fff; text-decoration: none;
  font-family: var(--ff-cond); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.16em; font-size: 0.95rem;
}
.qc-line img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; display: block; flex: none; }
.qc-line u { text-underline-offset: 4px; white-space: nowrap; }
@media (max-width: 480px) { .qc-line { letter-spacing: 0.1em; font-size: 0.85rem; gap: 0.65rem; } .qc-line img { width: 40px; height: 40px; } }
.qc-line:hover u { opacity: 0.8; }
.qc-line--ftr { margin-top: 1.4rem; font-size: 0.8rem; }
.qc-line--hero { margin-top: 1.2rem; font-size: 0.72rem; gap: 0.55rem; }
.qc-line--hero img { width: 30px; height: 30px; }
.qc-line--ftr img { width: 40px; height: 40px; }
.ftr__adr { white-space: nowrap; }
@media (max-width: 340px) { .ftr__adr { white-space: normal; } }
.qc-note {
  display: flex; align-items: center; gap: 1rem;
  margin-top: clamp(1.4rem, 3vw, 2rem); padding: 0.7rem 1.1rem 0.7rem 0.7rem;
  background: #fff; border: 1px solid var(--card-line); border-radius: var(--r);
  color: var(--ink-soft); text-decoration: none; max-width: 760px;
}
.qc-note img { width: 84px; height: auto; flex: none; display: block; }
.qc-note b { color: var(--accent-text); white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
.qc-note:hover b { color: var(--ink); }
.qc__band { margin: 0; border-radius: var(--r); overflow: hidden; }
.qc__band img { width: 100%; aspect-ratio: 4 / 1; object-fit: cover; object-position: 50% 45%; display: block; }
.qc__grid { margin-top: clamp(1.8rem, 4vw, 2.8rem); align-items: start; }
.qc__head { display: flex; align-items: center; gap: clamp(0.8rem, 2vw, 1.4rem); }
.qc__head h2 { white-space: nowrap; }
.qc__logo { mix-blend-mode: multiply; width: clamp(84px, 9vw, 120px); height: auto; display: block; flex: none; }
.qc__steps { margin: 1.2rem 0 0; padding-left: 1.3rem; color: var(--ink-soft); }
.qc__steps li + li { margin-top: 0.6rem; }
.qc__steps a { color: var(--accent-text); }
@media (max-width: 560px) { .qc-note { align-items: flex-start; } .qc-note img { width: 64px; } }

/* Pied de page : icônes devant les liens « Nous joindre » */
.ftr__lnk { display: inline-flex; align-items: center; gap: 0.6rem; }
.ftr__ico { width: 18px; height: 18px; flex: none; opacity: 0.85; }

/* Haut d'Événements : deux boutons de taille normale, l'un au-dessus de l'autre,
   même largeur (celle du plus long) */
.btns--duo { display: inline-grid; grid-template-columns: 1fr; gap: 0.85rem; }
.btns--duo .btn { justify-content: center; }

/* Fiches coachs (accueil) : portrait cliquable + fenêtre <dialog> (fiches.js) */
.team__card--bio { cursor: pointer; }
.team__card--bio .team__ph { overflow: hidden; }
.team__card--bio .team__ph img { transition: filter 0.5s var(--ease), transform 0.6s var(--ease); }
.team__card--bio:hover .team__ph img, .team__card--bio:focus-visible .team__ph img { transform: scale(1.06); filter: grayscale(0); }
.bio {
  width: min(920px, calc(100vw - 2rem)); max-height: calc(100svh - 2rem);
  padding: 0; border: 0; border-radius: var(--r); background: #fff; color: var(--ink);
  overflow: auto; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.5);
}
.bio::backdrop { background: rgba(11, 20, 32, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.bio__in { display: grid; grid-template-columns: 1fr; }
@media (min-width: 760px) { .bio__in { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } }
.bio__ph img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; display: block; }
@media (max-width: 759px) { .bio__ph img { aspect-ratio: 1 / 1; } }
.bio__txt { padding: clamp(1.4rem, 3.5vw, 2.4rem); }
.bio__nom { font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 0.9; }
.bio__role {
  margin-top: 0.4rem; font-family: var(--ff-cond); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.16em; font-size: 0.78rem; color: var(--accent-text);
}
.bio__corps { margin-top: 1.2rem; color: var(--ink-soft); }
.bio__corps p + p { margin-top: 0.8rem; }
.bio__faits { margin-top: 1.4rem; border-top: 1px solid var(--line); }
.bio__faits div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
.bio__faits dt { font-family: var(--ff-cond); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.74rem; color: var(--grey); }
.bio__faits dd { margin: 0; text-align: right; font-weight: 500; }
.bio__x {
  position: absolute; top: 0.7rem; right: 0.7rem; z-index: 1; width: 2.6rem; height: 2.6rem;
  border: 0; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center;
  cursor: pointer; box-shadow: var(--shadow);
}
.bio__x svg { width: 1.2rem; height: 1.2rem; }
.bio__nav { display: flex; justify-content: flex-end; gap: 0.6rem; padding: 0 clamp(1.4rem, 3.5vw, 2.4rem) clamp(1.2rem, 3vw, 1.8rem); }
.bio__nav[hidden] { display: none; }
.bio__nav button {
  width: 2.8rem; height: 2.8rem; border-radius: 50%; border: 1px solid var(--line-strong);
  background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer;
}
.bio__nav svg { width: 1.2rem; height: 1.2rem; }

/* Page Équipe : mosaïque de portraits ronds (coachs et thérapeutes) */
.hero__sub-em { display: inline-block; font-size: 0.4em; line-height: 1; margin-top: 0.35em; }
.crew {
  display: grid; gap: clamp(1.6rem, 3vw, 2.6rem) clamp(1rem, 2.5vw, 2rem);
  grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(1.8rem, 4vw, 2.8rem);
}
@media (min-width: 760px) { .crew { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.crew__card { text-align: center; }
.crew__ph {
  aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--bg-3);
  width: min(100%, 240px); margin: 0 auto; display: grid; place-items: center;
}
.crew__ph img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%;
  filter: grayscale(1) contrast(1.04); transition: filter 0.5s var(--ease), transform 0.6s var(--ease);
}
.crew__card:hover .crew__ph img { filter: grayscale(0); }
.team__card--bio:hover .crew__ph img, .team__card--bio:focus-visible .crew__ph img { transform: scale(1.06); filter: grayscale(0); }
.crew__ini { font-family: var(--ff-display); font-size: clamp(2.6rem, 6vw, 4rem); color: var(--grey); }
.crew__name { margin-top: 1rem; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1; }
.crew__role {
  margin-top: 0.35rem; font-family: var(--ff-cond); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; font-size: 0.72rem; color: var(--accent-text);
}
@media (min-width: 760px) { .bio__in { grid-template-columns: 1fr 1fr; } }

/* -------------------------------------------------- Avis Google (accueil + Therapy), deplaces de pages-b.css le 01.11.2026 */
.avis { display: grid; gap: clamp(1rem, 2.4vw, 1.6rem); grid-template-columns: 1fr; }
@media (min-width: 900px) { .avis { grid-template-columns: repeat(3, 1fr); } }
.avis__item {
  border: 1px solid var(--card-line);
  border-top: 4px solid var(--accent);
  border-radius: var(--r);
  background: var(--bg-2);
  padding: clamp(1.3rem, 2.8vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.stars { display: flex; gap: 0.2rem; color: var(--accent-text); }
.stars svg { width: 17px; height: 17px; }
.avis__item p { color: var(--ink-soft); font-size: 0.99rem; margin: 0; }
.avis__item footer {
  margin-top: auto;
  font-family: var(--ff-cond);
  text-transform: uppercase;
  letter-spacing: 0.17em;
  font-size: 0.68rem;
  color: var(--grey);
}

/* Avis Google : carrousel, flèches gauche / droite ou défilement au doigt */
.avis-sl .avis {
  display: flex; gap: clamp(1rem, 2.4vw, 1.6rem);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; padding-bottom: 4px;
}
.avis-sl .avis::-webkit-scrollbar { display: none; }
.avis-sl .avis__item { flex: 0 0 86%; scroll-snap-align: start; }
@media (min-width: 700px) { .avis-sl .avis__item { flex-basis: calc((100% - clamp(1rem, 2.4vw, 1.6rem)) / 2); } }
@media (min-width: 1100px) { .avis-sl .avis__item { flex-basis: calc((100% - 2 * clamp(1rem, 2.4vw, 1.6rem)) / 3); } }
.avis-sl__nav { display: flex; gap: 0.6rem; margin-top: 1.4rem; }
.avis-sl__nav button {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer;
  transition: background 0.2s, color 0.2s, opacity 0.2s;
}
.avis-sl__nav button:hover { background: var(--ink); color: #fff; }
.avis-sl__nav button[disabled] { opacity: 0.3; cursor: default; background: transparent; color: var(--ink); }
.avis-sl__nav svg { width: 20px; height: 20px; }

/* Note Google : 5 petites étoiles au-dessus de la phrase (05.11.2026) */
.gnote .gstars { display: flex; gap: 3px; margin-bottom: 0.45rem; color: var(--accent-text); }
.hero__trust.gnote .gstars { color: #ffa346; }
.gnote .gstars svg { width: 15px; height: 15px; }