/* ==========================================================================
   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: 0.82rem;
  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: 0.78rem; 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;
  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);
  font-size: clamp(2.4rem, 12vw, 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__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); }

/* 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; } }
.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; }
}

@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; }
}