/* steto.care — refonte 2027.
   Palette et police reprises du site actuel (feuille Webflow, relevée le 25/09/2026) :
   TT Commons Pro, #1D2B6D, #091759, #58F2BB, #FFA7C2, #FFDDED, #DCD6FF, #D5E4FF, #1128F3, #2BA681, fond #EAEAEA. */
@font-face { font-family: "TT Commons Pro"; src: url("../fonts/TT_Commons_Pro_Light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "TT Commons Pro"; src: url("../fonts/TT_Commons_Pro_Normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "TT Commons Pro"; src: url("../fonts/TT_Commons_Pro_Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "TT Commons Pro"; src: url("../fonts/TT_Commons_Pro_DemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "TT Commons Pro"; src: url("../fonts/TT_Commons_Pro_Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --navy: #1D2B6D;
  --navy-deep: #091759;
  --mint: #58F2BB;
  --green: #2BA681;
  --pink: #FFA7C2;
  --pink-soft: #FFDDED;
  --lilac: #DCD6FF;
  --sky: #D5E4FF;
  --blue: #1128F3;
  --bg: #F2F2F4;
  --ink: #1D2B6D;
  --ink-2: #4A5480;
  --muted: #758696;
  --glass: rgba(255, 255, 255, .42);
  --glass-strong: rgba(255, 255, 255, .62);
  --glass-line: rgba(255, 255, 255, .55);
  --glass-shadow: 0 10px 40px rgba(29, 43, 109, .08);
  --ann: #E8590C;
  --ann-bg: #FFF4E6;
  --radius: 20px;
  --max: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "TT Commons Pro", "Outfit", system-ui, sans-serif; font-size: 18px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; position: relative; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { line-height: 1.1; margin: 0 0 .5em; font-weight: 500; letter-spacing: -.01em; }
h2 { font-size: clamp(32px, 4vw, 48px); }
h3 { font-size: 22px; font-weight: 500; }
p { margin: 0 0 1em; color: var(--ink-2); }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
section { padding: 72px 0; position: relative; }
section.last { padding-bottom: 144px; }

/* ---------- Fond liquid glass ---------- */
.bg-blobs { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bg-blobs i { position: absolute; border-radius: 50%; filter: blur(160px); animation: drift 28s ease-in-out infinite alternate; }
.bg-blobs .b1 { width: 42vw; height: 42vw; left: -12vw; top: -10vw; background: rgba(43, 166, 129, .20); }
.bg-blobs .b2 { width: 36vw; height: 36vw; left: 18vw; top: 30vh; background: rgba(255, 167, 194, .30); animation-duration: 34s; }
.bg-blobs .b3 { width: 40vw; height: 40vw; right: -10vw; top: -6vw; background: rgba(17, 40, 243, .10); animation-duration: 31s; }
.bg-blobs .b4 { width: 34vw; height: 34vw; left: 36vw; bottom: -14vw; background: rgba(120, 110, 255, .15); animation-duration: 38s; }
.bg-blobs .b5 { width: 30vw; height: 30vw; right: -6vw; bottom: 10vh; background: rgba(43, 166, 129, .16); animation-duration: 26s; }
@keyframes drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(6vw, 5vh) scale(1.12); } }

.glass, .testi, .card, .tier, .faq details, .article, .press-logos, .join, .badge {
  background: var(--glass); border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  box-shadow: var(--glass-shadow);
}

/* Pastilles translucides derrière un mot, comme sur le site actuel */
.hl, .pill {
  display: inline-block; padding: .06em .2em .2em; border-radius: .22em; line-height: 1;
  background: rgba(220, 214, 255, .7); border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.hl.pink, .pill.pink { background: rgba(255, 190, 214, .55); }
.hl.green, .pill.green { background: rgba(140, 224, 190, .5); }

.eyebrow {
  display: inline-block; font-size: 15px; font-weight: 500; color: var(--navy);
  background: rgba(196, 221, 243, .95); padding: 4px 16px; border-radius: 99px; margin-bottom: 18px;
}
.center { text-align: center; }
.btn {
  display: inline-flex; align-items: center; gap: 10px; background: var(--navy); color: #fff;
  text-decoration: none; padding: 14px 26px; border-radius: 99px; border: 0;
  font: inherit; font-weight: 600; cursor: pointer; transition: transform .15s, background .15s;
}
.btn:hover { background: var(--navy-deep); transform: translateY(-1px); }
.btn.ghost { background: var(--glass-strong); color: var(--navy); }
.btn.mint { background: var(--mint); color: var(--navy); }

/* ---------- En-tête flottant façon kiro.bio ---------- */
.site-header { position: fixed; top: 14px; left: 0; right: 0; z-index: 50; padding: 0 16px; pointer-events: none; }
.site-header .bar {
  pointer-events: auto; max-width: 1240px; margin: 0 auto; height: 72px; border-radius: 99px;
  display: flex; align-items: center; justify-content: space-between; padding: 0 10px 0 30px;
  background: rgba(255, 255, 255, .26); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 8px 32px rgba(29, 43, 109, .06); transition: background .25s, box-shadow .25s;
}
.site-header.scrolled .bar { background: rgba(255, 255, 255, .38); box-shadow: 0 10px 40px rgba(29, 43, 109, .12); }
.site-header .logo img { height: 30px; width: auto; }
.nav { display: flex; gap: 34px; }
.nav a { text-decoration: none; font-weight: 500; font-size: 17px; color: var(--navy); opacity: .75; padding: 6px 0; }
.nav a:hover { opacity: 1; }
.nav a.active { opacity: 1; font-weight: 600; }
.btn.cta { --g1: #4C6BD8; --g2: #1D2B6D; padding: 7px 7px 7px 24px; gap: 14px; background: none; color: #fff; position: relative; isolation: isolate; }
.btn.cta::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; background: linear-gradient(95deg, var(--g1), var(--g2));
  -webkit-mask: radial-gradient(circle 23px at calc(100% - 29px) 50%, transparent 22.5px, #000 23px); mask: radial-gradient(circle 23px at calc(100% - 29px) 50%, transparent 22.5px, #000 23px); }
.btn.cta:hover { background: none; --g1: #3F5CC8; --g2: #091759; }
.btn.cta .ico-circle { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.28); color: var(--navy); border: 1px solid rgba(255,255,255,.7); display: grid; place-items: center; flex: none; }
.login { font-size: 16px; }
.burger { display: none; background: none; border: 0; font-size: 26px; color: var(--navy); cursor: pointer; padding: 0 14px; }

/* ---------- Annotations de maquette ---------- */
.ann {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; line-height: 1.3;
  color: var(--ann); background: var(--ann-bg); border: 1px dashed var(--ann); border-radius: 8px;
  padding: 4px 9px; margin: 0 0 12px; max-width: 100%;
}
.ann::before { content: "✎"; }
.ann.block { display: flex; margin: 0 auto 28px; width: fit-content; }
.ph {
  border: 0; background: var(--glass);
  border-radius: var(--radius); color: var(--muted); display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; font-weight: 600; font-size: 15px; padding: 24px; gap: 6px;
}
.ph small { font-weight: 500; color: var(--muted); }
body.clean .ann { display: none; }
body.clean .ph { border: 0; background: var(--glass); color: var(--muted); }
body.clean .ph small { color: var(--muted); }
.ann-toggle {
  position: fixed; right: 18px; bottom: 18px; z-index: 100; background: var(--ann); color: #fff; border: 0;
  border-radius: 99px; padding: 11px 18px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
body.clean .ann-toggle { background: var(--navy); }

/* ---------- Accroche médecins ---------- */
.hero-vision { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; padding: 120px 0 90px; }
.orb {
  position: absolute; width: min(418px, 68vw); aspect-ratio: 1; border-radius: 50%; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.95) 0 6%, transparent 30%),
    radial-gradient(circle at 72% 78%, rgba(88,242,187,.7), transparent 55%),
    radial-gradient(circle at 22% 70%, rgba(255,190,214,.8), transparent 55%),
    radial-gradient(circle at 75% 25%, rgba(214,228,255,.95), transparent 55%),
    radial-gradient(circle, #EEF0FF 0%, #D8DEFF 60%, #C3CEFF 100%);
  opacity: .7; animation: morph 10s ease-in-out infinite;
  box-shadow: 0 0 100px 30px rgba(255,255,255,.35);
}
@keyframes morph {
  0%, 100% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; }
  25% { border-radius: 63% 37% 57% 43% / 41% 61% 39% 59%; }
  50% { border-radius: 40% 60% 38% 62% / 61% 39% 62% 38%; }
  75% { border-radius: 59% 41% 64% 36% / 38% 57% 43% 62%; }
}
.hero-vision .inner { position: relative; z-index: 2; }
.hero-vision h1 { font-size: clamp(34px, 4.5vw, 66px); letter-spacing: -.02em; margin: 0 auto .55em; line-height: 1.22; }
.hero-tag { font-size: 17px; padding: 6px 20px; }
.hero-vision h1 .pill { padding: .05em .16em .19em; }
.hero-vision .sub { font-size: 20px; color: var(--navy); font-weight: 500; opacity: .8; }
.scroll-cue { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--navy); font-size: 15px; font-weight: 500; padding: 8px 10px 8px 18px; border-radius: 99px;
  background: var(--glass); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.scroll-cue i { width: 30px; height: 30px; border-radius: 50%; background: var(--navy); position: relative; }
.scroll-cue i::after { content: ""; position: absolute; left: 50%; top: 42%; width: 8px; height: 8px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: translate(-50%, -50%) rotate(45deg); animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0%, 100% { margin-top: -2px; } 50% { margin-top: 3px; } }

/* ---------- Accueil : trois versions à départager (28/09/2026) ----------
   Une seule est affichée, selon data-accueil sur .hero-vision. À nettoyer une fois le choix fait. */
.hero-vision [data-v] { display: none; }
.hero-vision[data-accueil="1"] [data-v~="1"], .hero-vision[data-accueil="2"] [data-v~="2"], .hero-vision[data-accueil="3"] [data-v~="3"] { display: block; }
.hero-vision[data-accueil="1"] .hv-split { display: grid; }
.hero-vision .orb { display: none; }

/* 2 · Les gouttes : trois gouttes qui fusionnent, dans la matière de l'ancienne boule */
.hv-goo { position: absolute; inset: 0; filter: url(#goo); opacity: .7; pointer-events: none; }
.hv-goo i { position: absolute; left: 50%; top: 50%; border-radius: 50%; }
.hv-goo i:nth-child(1) { width: 52vmin; height: 52vmin; margin: -26vmin 0 0 -31vmin; animation: hvA 13s ease-in-out infinite alternate;
  background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.95) 0 6%, transparent 30%),
              radial-gradient(circle at 22% 70%, rgba(255,190,214,.8), transparent 55%),
              radial-gradient(circle, #EEF0FF 0%, #D8DEFF 60%, #C3CEFF 100%); }
.hv-goo i:nth-child(2) { width: 46vmin; height: 46vmin; margin: -23vmin 0 0 -15vmin; animation: hvB 11s ease-in-out infinite alternate;
  background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.9) 0 5%, transparent 28%),
              radial-gradient(circle at 72% 78%, rgba(88,242,187,.7), transparent 55%),
              radial-gradient(circle, #EEF0FF 0%, #D8DEFF 60%, #C3CEFF 100%); }
.hv-goo i:nth-child(3) { width: 34vmin; height: 34vmin; margin: -22vmin 0 0 -17vmin; animation: hvC 9s ease-in-out infinite alternate;
  background: radial-gradient(circle at 75% 25%, rgba(214,228,255,.95), transparent 55%),
              radial-gradient(circle, #EEF0FF 0%, #D8DEFF 60%, #C3CEFF 100%); }
@keyframes hvA { to { transform: translate(10vmin, 6vmin); } }
@keyframes hvB { to { transform: translate(-12vmin, -4vmin); } }
@keyframes hvC { to { transform: translate(4vmin, 8vmin); } }

/* 3 · Les lignes : les ondes de l'accroche de Stēto Labs, en bleu nuit sur fond clair */
.hv-waves { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* 1 · Le titre et le produit */
.hv-split { grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; text-align: left; }
.hv-split h1 { font-size: clamp(34px, 4.2vw, 64px); margin: 0 0 .55em; }
.hv-split h1 .l { display: block; white-space: nowrap; } /* trois lignes fixes, quelle que soit la largeur */
/* Réduite de 15 % pour laisser le slogan au premier plan */
/* Grille : le message couvre les rangées 1-2, la vignette démarre à la rangée 2 (52 px avant le bas du message),
   quelle que soit la hauteur du message selon la largeur de l'écran. */
.hv-stage { position: relative; transform: scale(.85); transform-origin: 50% 50%; }
.hv-card { background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.75); border-radius: 24px;
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); box-shadow: 0 20px 60px rgba(29,43,109,.10); }
/* La vignette des indicateurs reste entière en haut ; le message se pose en dessous de « Mme D. »,
   assez large pour tenir en 3 lignes, et déborde sur la gauche de la vignette. */
.hv-dash { margin-left: 200px;   /* bord gauche à 200 px : le message (bord droit à 258 px) recouvre le début de l'HbA1c */
   margin-right: -163px;   /* 20 % plus large, même hauteur */ padding: 24px 26px 18px; animation: hvFloat 9s ease-in-out infinite alternate; }
.hv-who { font-size: 13px; color: var(--muted); margin-bottom: 18px; padding-left: 46px; }   /* à gauche, juste après le message */
.hv-who b { color: var(--navy); font-weight: 600; font-size: 15px; margin-right: 8px; }
.hv-kpis { display: grid; grid-template-columns: 1fr 1.4fr; gap: 14px; margin-bottom: 16px; }
.hv-kpi { background: rgba(255,255,255,.6); border-radius: 14px; padding: 12px 14px; }
.hv-kpi small { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.hv-kpi .v { font-size: 26px; font-weight: 500; line-height: 1; color: var(--navy); }
.hv-kpi .v span { font-size: 14px; color: var(--muted); margin-left: 2px; }
.hv-tir { display: flex; height: 8px; border-radius: 99px; overflow: hidden; margin-top: 10px; gap: 2px; }
.hv-tir i:nth-child(1) { flex: 12; background: #F08A5D; } .hv-tir i:nth-child(2) { flex: 28; background: #F7C873; }
.hv-tir i:nth-child(3) { flex: 56; background: #6FDDB7; } .hv-tir i:nth-child(4) { flex: 3; background: #F4A7A0; } .hv-tir i:nth-child(5) { flex: 1; background: #E36B6B; }
.hv-agp-box small { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.hv-agp { display: block; border-radius: 8px; }
.hv-msg { position: absolute; left: -60px; top: 16px; width: 318px;   /* largeur fixe : le texte tient en 3 lignes sur tous les écrans */ padding: 16px 18px; z-index: 2; animation: hvFloat 9s -4.5s ease-in-out infinite alternate; }
.hv-msg small { display: block; color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.hv-msg b { font-weight: 600; font-size: 15px; color: var(--navy); }
.hv-msg p { margin: 4px 0 0; color: var(--ink-2); font-size: 14px; line-height: 1.4; }
/* Photo de Sarah B. en miroir : elle regarde vers le message */
.hv-msg { display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; align-items: center; }   /* photo et nom côte à côte, texte dessous */
.hv-msg p { grid-column: 1 / -1; margin-top: 10px !important; }
.hv-msg .av { width: 40px; height: 40px; border-radius: 50%; background: #DDF3EA url("../img/soignants/infirmiere-sarah-b.png") no-repeat 38% 12% / 190%; transform: scaleX(-1); }
@keyframes hvFloat { from { transform: translateY(-7px); } to { transform: translateY(7px); } }
@media (max-width: 1150px) { .hv-dash { margin-right: -60px; } }   /* la vignette ne sort pas de l'écran */
@media (max-width: 900px) { .hv-split { grid-template-columns: 1fr; } .hv-split h1 .l { white-space: normal; } }

/* Sélecteur de version, sur le bord droit */
.hv-switch { position: fixed; right: 14px; top: 50%; transform: translateY(-50%); z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 7px; border-radius: 99px; background: rgba(255,255,255,.6); border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 8px 28px rgba(29,43,109,.12); }
.hv-switch span { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); writing-mode: vertical-rl; transform: rotate(180deg); margin-bottom: 2px; }
.hv-switch button { width: 30px; height: 30px; border-radius: 50%; border: 0; background: transparent; color: var(--navy); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.hv-switch button:hover { background: rgba(29,43,109,.08); }
.hv-switch button[aria-pressed="true"] { background: var(--navy); color: #fff; }
@media (prefers-reduced-motion: reduce) { .hv-goo i, .hv-dash, .hv-msg { animation: none; } }

/* Sélecteur V0 / VCible de la maquette, en bas à droite de toutes les pages */
.version-switch { position: fixed; right: 14px; bottom: 14px; z-index: 60; display: flex; align-items: center; gap: 4px; padding: 5px 5px 5px 14px;
  border-radius: 99px; background: rgba(255,255,255,.7); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 8px 28px rgba(29,43,109,.12); }
.version-switch span { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.version-switch button { border: 0; border-radius: 99px; padding: 6px 12px; background: transparent; color: var(--navy); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.version-switch button:hover { background: rgba(29,43,109,.08); }
.version-switch button[aria-pressed="true"] { background: var(--navy); color: #fff; }

/* Stēto Labs : nos conseils, quatre profils côte à côte */
.advisors { margin-top: 40px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.advisor h3 { font-size: 20px; margin: 20px 0 10px; }
.advisor p { font-size: 15px; line-height: 1.5; margin: 0; }
/* Portraits détourés et cadrés à l'identique (outils/portrait.py), posés sur un fond uni */
.advisor-photo { aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; background: #D8F3E8; }   /* menthe à l'eau clair */
.advisor-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 1000px) { .advisors { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .advisors { grid-template-columns: 1fr; } }

.footer-note { font-size: 13px; line-height: 1.5; opacity: .6; margin: 28px 0 0; }   /* une seule ligne sur ordinateur */

.footer-tagline { font-size: 15px; white-space: nowrap; }   /* une seule ligne */
@media (max-width: 560px) { .footer-tagline { white-space: normal; } }

/* Fenêtre « Vous êtes… » (premier passage) */
.profil-box { width: min(580px, 100%); text-align: center; }
.modal-box.profil-box h2 { margin-bottom: 32px; }
.profil-btn { justify-content: flex-start; }   /* textes alignés en haut */
.profil-choix { display: grid; grid-template-columns: repeat(2, 245px); justify-content: center; gap: 16px; }
.profil-btn { display: flex; flex-direction: column; gap: 6px; padding: 26px 22px; border-radius: 20px; cursor: pointer; font: inherit; text-align: left;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); color: #fff; transition: background .15s, border-color .15s; }
.profil-btn:hover, .profil-btn:focus-visible { background: rgba(88,242,187,.14); border-color: var(--mint); outline: none; }
.profil-btn b { font-size: 19px; font-weight: 600; }
.profil-btn span { font-size: 15px; color: #C9CFEA; }
@media (max-width: 560px) { .profil-choix { grid-template-columns: 1fr; justify-content: stretch; } }
/* Champ piège des formulaires : hors de l'écran, jamais vu ni atteint au clavier par un humain */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Chiffres clés, posés sur le fond ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 0; text-align: center; }
#temoignages { padding-bottom: 34px; }
.kpi b { display: block; font-size: clamp(44px, 4.6vw, 64px); font-weight: 400; color: var(--navy); line-height: 1; margin-bottom: 10px; letter-spacing: -.02em; }
.kpi b em { font-style: normal; }
.kpi span { color: var(--ink-2); font-size: 17px; font-weight: 500; }

/* ---------- Témoignages ---------- */
.testis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.testi-col { display: flex; flex-direction: column; align-items: center; }
.testi-col > img { width: 136px; height: 136px; border-radius: 50%; object-fit: cover; margin-bottom: -40px; position: relative; z-index: 2; box-shadow: 0 14px 40px rgba(29,43,109,.15); }
.testi { border-radius: var(--radius); padding: 60px 26px 26px; display: flex; flex-direction: column; width: 100%; flex: 1; }
.testi blockquote { margin: 0 0 20px; font-size: 17px; color: var(--ink); flex: 1; }
.testi blockquote.todo { color: var(--ann); font-style: italic; }
body.clean .testi blockquote.todo { color: var(--muted); }
.testi .who b { display: block; font-size: 17px; font-weight: 600; }
.testi .who span { font-size: 14.5px; color: var(--muted); }

/* ---------- Bandeaux qui défilent ---------- */
.marquee {
  overflow: hidden; padding: 30px 0; position: relative; margin: 120px 0;
  background: rgba(255,255,255,.35); border-block: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee .track { display: flex; gap: 72px; width: max-content; animation: slide 40s linear infinite; align-items: center; }
.marquee img { height: 34px; width: auto; max-width: 150px; object-fit: contain; }
.marquee .txt-logo { font-weight: 700; font-size: 22px; color: #9aa0b8; white-space: nowrap; border: 1.5px dashed #F0A76B; padding: 4px 12px; border-radius: 8px; }
body.clean .marquee .txt-logo { border-color: transparent; }
@keyframes slide { to { transform: translateX(-50%); } }
.marquee-title { text-align: center; font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 22px; }

/* ---------- Deux colonnes ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split.rev > :first-child { order: 2; }
.media-frame { border-radius: 28px; overflow: hidden; position: relative; box-shadow: var(--glass-shadow); }
.media-frame img { width: 100%; height: 100%; object-fit: cover; }
.floating-card { position: absolute; background: var(--glass-strong); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-radius: 16px; padding: 12px; box-shadow: 0 12px 40px rgba(29,43,109,.16); }

/* ---------- Cartes ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.card { border-radius: var(--radius); padding: 30px; }
.card .ico { width: 54px; height: 54px; border-radius: 16px; background: rgba(88,242,187,.25); display: grid; place-items: center; margin-bottom: 20px; }
.card .ico img { width: 28px; height: 28px; }
.card p:last-child { margin-bottom: 0; }

/* Infirmiers : grandes cartes façon site actuel, photo à droite fondue dans le bleu nuit */
.nurses { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 2px 18px; scrollbar-width: none; }
.nurses::-webkit-scrollbar { display: none; }
.nurse-slide { flex: 0 0 min(900px, 90vw); scroll-snap-align: center; display: flex; align-items: flex-end; position: relative; }
/* Les 3 cadres ont la même hauteur : celle du premier, réduite de 10 % (320 → 288 px) */
.nurse-card { flex: 1; border-radius: 22px; color: #fff; padding: 30px 44px; margin-right: -60px; background: var(--navy-deep); height: 288px; display: flex; align-items: center; }
/* Pas d'ombre portée : les détourages gardent un voile de pixels presque transparents que l'ombre
   rendrait visible sous forme de rectangle. */
.nurse-photo { position: relative; z-index: 2; height: 360px; width: auto; flex: none; }
.nurse-card .in { position: relative; max-width: 530px; }
.nurse-card .head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.nurse-card .avatar { width: 46px; height: 46px; border-radius: 12px; background: rgba(88,242,187,.2); display: grid; place-items: center; }
.nurse-card .avatar img { width: 26px; }
.nurse-card h3 { color: #fff; margin: 0; font-size: 21px; }
.nurse-card .role { font-size: 15px; color: var(--pink); font-weight: 500; }
.nurse-card .meta { display: flex; align-items: center; gap: 8px; font-size: 15px; color: #C9CFEA; margin-bottom: 14px; }
.nurse-card .meta img { width: 16px; filter: brightness(0) invert(1); opacity: .8; }
.nurse-card p { color: #E6E9F7; font-size: 16.5px; margin: 0; }
.nurse-nav { display: flex; gap: 10px; justify-content: center; margin-top: 8px; }
.nurse-nav button { width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--glass); color: var(--navy); font-size: 20px; cursor: pointer; }

/* Niveaux de remboursement : trois cartes égales, teintées comme sur le site actuel */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.tier { border-radius: 18px; padding: 24px 24px 36px; }
.tier.t-blue { background: rgba(156, 186, 255, .28); }
.tier.t-green { background: rgba(120, 214, 170, .26); }
.tier.t-pink { background: rgba(255, 167, 194, .26); }
.tier .name { color: #fff; font-weight: 700; font-size: 22px; text-align: center; border-radius: 8px; padding: 10px; box-shadow: 0 4px 30px rgba(74,7,51,.14); }
.t-blue .name { background: #668AD2; } .t-green .name { background: #4FC290; } .t-pink .name { background: #E07C9E; }
.tier .price { font-size: 50px; font-weight: 700; line-height: 1.1; margin: 22px 0 2px; text-align: center; }
.tier .per { font-size: 14.5px; color: var(--muted); margin-bottom: 20px; text-align: center; }
.tier ul { list-style: none; padding: 0; margin: 0; }
.tier li { padding: 7px 0 7px 30px; position: relative; font-size: 15.5px; color: var(--ink-2); }
.tier li::before { content: "✓"; position: absolute; left: 0; top: 7px; width: 20px; height: 20px; border-radius: 50%; color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.t-blue li::before { background: #668AD2; } .t-green li::before { background: #4FC290; } .t-pink li::before { background: #E07C9E; }

/* Garanties */
.badges { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; }
.badge { display: flex; align-items: center; gap: 14px; font-weight: 600; border-radius: 16px; padding: 14px 22px; }
.badge img { width: 40px; height: 40px; }

/* Formulaire */
.contact { background: var(--navy); color: #fff; border-radius: 32px; padding: 56px; display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; box-shadow: 0 30px 80px rgba(29,43,109,.25); }
.contact h2 { color: #fff; }
.contact p { color: #C9CFEA; }
.form { display: grid; gap: 12px; }
.form input, .form textarea { font: inherit; font-size: 16px; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: #fff; }
.form input::placeholder, .form textarea::placeholder { color: #9EA7D4; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ---------- Pied de page ---------- */
.site-footer { background: var(--navy); color: #C9CFEA; padding: 56px 0 30px; position: relative; }
.site-footer .top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; margin-bottom: 40px; }
.site-footer img.logo { height: 30px; width: auto; margin-bottom: 14px; }
.site-footer h4 { color: #fff; margin: 0 0 12px; font-size: 16px; font-weight: 600; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 15px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--mint); }
.site-footer .bottom { border-top: 1px solid rgba(255,255,255,.12); padding-top: 22px; font-size: 13.5px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }

/* ---------- Patients ---------- */
/* L'accroche occupe toute la hauteur de l'écran, quelle qu'elle soit : la section suivante n'apparaît qu'au défilement */
.hero-patient { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 120px 0 110px; overflow: hidden; }
.hero-patient > .wrap { width: 100%; }
.hero-patient h1 { font-size: clamp(40px, 5vw, 66px); letter-spacing: -.02em; }
.hero-patient h1 .soft { background: linear-gradient(100deg, #2BA681, #1D9ADD); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Même principe sur l'accroche de Stēto Labs, en teintes plus claires pour le fond bleu nuit */
.hero-labs h1 .soft { background: linear-gradient(100deg, #58F2BB, #6FB8FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stores { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.stores img { height: 50px; width: auto; }
.patient-stage { position: relative; display: grid; place-items: end center; min-height: 560px; }
.patient-stage img { position: relative; width: min(468px, 90%); }
.patient-stage .notif { position: absolute; left: -110px; top: 60%; background: var(--glass-strong); max-width: 250px; font-size: 14.5px; line-height: 1.35; border-radius: 16px; padding: 14px 16px; }
.patient-stage .notif b { display: block; font-size: 13px; color: var(--green); margin-bottom: 2px; }

.videos { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.video-ph { aspect-ratio: 16/9; }
.video-ph .play { width: 58px; height: 58px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-size: 22px; margin-bottom: 6px; }
.video-cap { margin-top: 12px; font-weight: 600; }
.video-cap span { display: block; font-weight: 500; color: var(--muted); font-size: 15px; }

.faq { max-width: 820px; margin: 0 auto; }
.faq details { border-radius: 16px; margin-bottom: 10px; padding: 0 24px; }
.faq summary { cursor: pointer; list-style: none; font-weight: 600; padding: 20px 0; display: flex; justify-content: space-between; gap: 20px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 24px; line-height: 1; color: var(--green); }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding-bottom: 18px; }
.faq .todo { color: var(--ann); font-style: italic; }
body.clean .faq .todo { color: var(--muted); }

.support { background: var(--navy); color: #fff; border-radius: 32px; padding: 52px 56px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; box-shadow: 0 30px 80px rgba(29,43,109,.25); }
.support h2 { font-size: clamp(24px, 3vw, 34px); max-width: 26ch; margin: 0; color: #fff; }
.support .lbl { font-weight: 600; margin-bottom: 10px; color: #C9CFEA; }
.support .tel { font-size: clamp(20px, 2.4vw, 26px); white-space: nowrap; }

/* ---------- Stēto Labs (fond sombre) ---------- */
body.labs { --bg: #0F1742; background: var(--bg); color: #fff; }
body.labs .site-header .bar { background: rgba(15, 23, 66, .35); box-shadow: 0 8px 32px rgba(0,0,0,.25); }
body.labs .site-header.scrolled .bar { background: rgba(15, 23, 66, .55); }
body.labs .nav a, body.labs .burger { color: #fff; }
body.labs h1, body.labs h2, body.labs h3 { color: #fff; }
body.labs p { color: #B7BEE2; }
body.labs .eyebrow { background: rgba(88,242,187,.12); color: var(--mint); }
body.labs .card { background: rgba(255,255,255,.06); box-shadow: none; }
body.labs .card .ico { background: rgba(88,242,187,.12); color: var(--mint); font-size: 24px; }
.hero-labs { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; overflow: hidden; padding-top: 120px; }
.hero-labs canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; }
.hero-labs .inner { position: relative; z-index: 2; }   /* même largeur que le reste de la page (.wrap) */
.hero-labs h1 { font-size: clamp(38px, 4.8vw, 68px); letter-spacing: -.02em; }
.labs-note { font-size: 15px; color: #8C95C6; border-left: 3px solid var(--mint); padding-left: 14px; margin-top: 26px; max-width: 60ch; }
.fusion { background: rgba(255,255,255,.04); border-radius: 32px; padding: 32px; }
.fusion svg { width: 100%; height: auto; }
.works { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.work { background: rgba(255,255,255,.05); border-radius: 28px; overflow: hidden; }
.work .viz { background: #0B1236; padding: 22px; }
.work .viz svg { width: 100%; height: auto; display: block; }
.work .body { padding: 28px; }
.tag { display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--navy); background: var(--mint); border-radius: 99px; padding: 3px 11px; margin-bottom: 12px; }
body.labs .ph { background: rgba(255,255,255,.03); border-color: rgba(240,167,107,.6); }
body.labs.clean .ph { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.12); color: #8C95C6; }
body.labs .site-footer { background: #0A1035; }

/* ---------- À propos ---------- */
.hero-video { min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; color: #fff; padding-bottom: 80px; }
.hero-video .bgv { position: absolute; inset: 0; background: linear-gradient(120deg, #1D2B6D, #3B4FB8 40%, #2BA681 100%); background-size: 300% 300%; animation: pan 18s ease infinite; }
.hero-video .bgv::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 30%, rgba(255,167,194,.28), transparent 40%), radial-gradient(circle at 80% 70%, rgba(88,242,187,.35), transparent 45%), linear-gradient(0deg, rgba(9,23,89,.75), transparent 60%); }
@keyframes pan { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.hero-video .inner { position: relative; z-index: 2; max-width: 1040px; }
.hero-video .inner p { max-width: none; } /* le texte occupe la même largeur que le titre */
.hero-video h1 { color: #fff; font-size: clamp(40px, 5.4vw, 72px); letter-spacing: -.02em; }
.hero-video p { color: #E1E6FA; font-size: 20px; }
.hero-video .ann { position: absolute; top: 104px; right: 24px; margin: 0; z-index: 3; }
.press-logos { display: grid; grid-template-columns: repeat(6, 1fr); border-radius: var(--radius); padding: 34px 28px; gap: 30px; align-items: center; justify-items: center; }
.press-logos img { height: 34px; width: auto; max-width: 130px; object-fit: contain; }
.articles { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.article { border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; }
.article .src { font-size: 13.5px; font-weight: 600; color: var(--green); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.article h3 { font-size: 20px; }
.article .actions { margin-top: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.article .actions a { font-size: 15px; padding: 10px 18px; }
.join { border-radius: 32px; overflow: hidden; display: grid; grid-template-columns: 1.2fr 1fr; }
.join .txt { padding: 56px; }
.join .img { display: grid; place-items: center; padding: 24px; }
.join .img img { border-radius: 24px; max-height: 360px; object-fit: cover; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .kpis { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .testis { grid-template-columns: repeat(2, 1fr); }
  .cards, .tiers { grid-template-columns: 1fr; }
  .split, .contact, .join, .works, .videos, .articles { grid-template-columns: 1fr; }
  .split.rev > :first-child { order: 0; }
  .press-logos { grid-template-columns: repeat(3, 1fr); }
  section { padding: 56px 0; }
}
@media (max-width: 760px) {
  .wrap { padding: 0 16px; }
  .site-header { top: 10px; padding: 0 10px; }
  .site-header .bar { height: 60px; padding: 0 6px 0 20px; }
  .nav { display: none; position: absolute; top: 70px; left: 10px; right: 10px; flex-direction: column; gap: 0; border-radius: 24px; padding: 10px 22px;
    background: rgba(255,255,255,.75); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: 0 10px 40px rgba(29,43,109,.12); }
  body.labs .nav { background: rgba(15,23,66,.9); }
  .nav.open { display: flex; }
  .nav a { padding: 12px 0; }
  .burger { display: block; }
  .login { display: none; }
  .testis { grid-template-columns: 1fr; }
  .contact, .support, .join .txt { padding: 32px 22px; }
  .form .row { grid-template-columns: 1fr; }
  .patient-stage { min-height: 420px; }
    .patient-stage .notif { display: none; }
  .press-logos { grid-template-columns: repeat(2, 1fr); }
  .badges { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }

/* ---------- Illustration « accompagné » : cadre verre, photo, cartes glycémie et HbA1c ---------- */
.split.stretch { align-items: stretch; }
.split.illu { grid-template-columns: 0.72fr 1.28fr; }
.illu-frame { position: relative; max-width: 360px; width: 100%; justify-self: center; }
.glass-frame { position: absolute; inset: 0; padding: 19px; border-radius: 30px; background: rgba(255,255,255,.18); border: 1px solid var(--glass-line);
  box-shadow: 0 20px 150px rgba(0,0,0,.08); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.glass-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center top; border-radius: 23px; }
.illu-frame .corner { position: absolute; filter: drop-shadow(0 12px 30px rgba(29,43,109,.12)); }
.illu-frame .glyc { width: 221px; left: -66px; top: 42%; }
.illu-frame .hba1c { width: 165px; right: -78px; bottom: calc(13% - 34px); }

/* ---------- Récit en trois temps (Stēto à vos côtés) ---------- */
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; }
.story-sticky { position: sticky; top: 110px; align-self: start; }
.story-sticky h2 { margin-bottom: 26px; }
.story-stage { position: relative; height: min(440px, calc(100vh - 330px)); min-height: 340px; border-radius: 32px; overflow: hidden; }
.story-stage .scene { position: absolute; inset: 34px; width: calc(100% - 68px); height: calc(100% - 68px); opacity: 0; transform: scale(.96); transition: opacity .6s ease, transform .6s ease; font-family: inherit; }
.story-stage .scene.on { opacity: 1; transform: none; }
.scene.on .a-doc { animation: draw1 1.2s ease both; }
.scene.on .a-ide { animation: draw2 1.4s .2s ease both; }
@keyframes draw1 { from { stroke-dasharray: 0 100; } }
@keyframes draw2 { from { stroke-dasharray: 0 100; } }
.scene .curve { stroke-dasharray: 100; stroke-dashoffset: 100; }
.scene.on .curve { animation: curve 2s ease forwards; }
@keyframes curve { to { stroke-dashoffset: 0; } }
.story-steps .step { min-height: 43vh; display: flex; flex-direction: column; justify-content: center; opacity: .3; transition: opacity .4s; }
.story-steps .step.on { opacity: 1; }
.story-steps .step:first-child { padding-top: 0; min-height: 0; margin-bottom: 15vh; }
.story-steps .step:last-child { min-height: 0; margin-top: 15vh; }
.step-head { display: flex; align-items: last baseline; gap: 18px; margin-bottom: 14px; }
.step-head h3 { margin: 0; }
.story-steps .num { font-size: 56px; font-weight: 300; line-height: 1; flex: none;
  color: var(--navy); }
.story-steps h3 { font-size: clamp(22px, 2.1vw, 29px); font-weight: 500; line-height: 1.2; }
.story-steps p { font-size: 19px; max-width: 44ch; }

/* ---------- Garanties ---------- */
.guarantees-sec { }
.guarantees { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.guarantee { border-radius: 20px; padding: 28px 24px; }
.guarantee .head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.guarantee img { height: 44px; width: auto; max-width: 64px; flex: none; }
.guarantee h3 { font-size: 19px; margin: 0; }
.guarantee p { font-size: 15px; margin: 0; }

@media (max-width: 980px) {
  .story-grid { grid-template-columns: 1fr; gap: 0; }
  .story-sticky { position: static; }
  .story-stage { display: none; }
  .story-steps .step, .story-steps .step:first-child { min-height: 0; opacity: 1; padding: 28px 0; }
  .guarantees { grid-template-columns: 1fr 1fr; }
  .illu-frame { min-height: 520px; max-width: 420px; }
  .illu-frame .glyc { left: -4%; }
  .illu-frame .hba1c { right: -2%; }
}
@media (max-width: 760px) { .guarantees { grid-template-columns: 1fr; } .hero-vision h1 br { display: none; } }
/* Sur fond bleu nuit, le bouton maison passe dans une teinte plus claire pour rester lisible */
.contact .btn.cta, .support .btn.cta { --g1: #5F80EA; --g2: #3450C4; }
.contact .btn.cta:hover, .support .btn.cta:hover { --g1: #5474E0; --g2: #2A45B5; }
.contact .btn.cta .ico-circle, .support .btn.cta .ico-circle { background: var(--bg); border-color: var(--bg); color: var(--navy); }

.scene .tick { stroke-dasharray: 10; stroke-dashoffset: 10; }
.scene.on .t1 { animation: curve .5s .5s ease forwards; }
.scene.on .t2 { animation: curve .5s 1.1s ease forwards; }

/* ---------- Témoignages : un médecin à la fois, titre figé ---------- */
.quotes { padding: 0; }
.quotes-pin { position: sticky; top: 0; height: 100vh; display: flex; align-items: stretch; padding: 0; }
.quotes-pin .wrap { display: flex; flex-direction: column; align-items: flex-start; }
.quotes-pin .quote-stage { flex: 1; align-self: stretch; }
.quotes-pin .wrap { width: 100%; }
.quote-stage { position: relative; overflow: hidden; margin-top: 8px; }
.quote-track { display: flex; flex-direction: column; gap: 240px; padding-top: 136px; will-change: transform; }
.quote { margin: 0; display: grid; grid-template-columns: 190px 1fr; gap: 48px; align-items: center; align-content: center; }
.quote .head { width: 190px; height: 190px; border-radius: 50%; object-fit: cover; object-position: center top; }
.quote blockquote { margin: 0 0 16px; font-size: clamp(22px, 2.3vw, 31px); line-height: 1.35; color: var(--navy); font-weight: 400; }
.quote figcaption { font-size: 18px; font-weight: 500; color: var(--ink-2); }
.quote .ann { margin-top: 14px; }
@media (max-width: 760px) {
  .quote { grid-template-columns: 1fr; gap: 16px; align-content: start; }
  .quote .head { height: 120px; width: 120px; }
  .quote blockquote { font-size: 21px; }
  .quote-stage { height: calc(100vh - 260px); }
}

/* ---------- Patients : infirmière détourée, pendant de la photo du patient ---------- */
.split.bottom { align-items: end; }
.split.bottom > div:last-child > p:last-child { margin-bottom: 0; }
.nurse-stage { place-items: end start; min-height: 0; }
.nurse-stage img { width: min(460px, 86%); }
.nurse-stage .notif { left: auto; right: -24px; top: 30%; }
.story-sticky h2.compact { font-size: clamp(28px, 3vw, 40px); }
@media (max-width: 760px) {
  .nurse-slide { flex-direction: column-reverse; align-items: center; }
  .nurse-card { margin: -30px 0 0; padding: 50px 24px 26px; height: auto; }
  .nurse-photo { height: 220px; }
}

/* ---------- À propos : animation provisoire à la place de la vidéo ---------- */
.hero-video .glass-shapes { position: absolute; inset: 0; overflow: hidden; }
.hero-video .glass-shapes i { position: absolute; border-radius: 42%; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 30px 80px rgba(9,23,89,.25); animation: glide 26s ease-in-out infinite alternate, morph 12s ease-in-out infinite; }
.hero-video .glass-shapes i:nth-child(1) { width: 102vw; height: 102vw; left: 30%; top: -60%; }
.hero-video .glass-shapes i:nth-child(2) { width: 66vw; height: 66vw; left: 62%; top: 20%; animation-duration: 32s, 14s; animation-delay: -6s, -3s; }
.hero-video .glass-shapes i:nth-child(3) { width: 48vw; height: 48vw; left: -18%; top: -20%; animation-duration: 29s, 10s; animation-delay: -12s, -5s; }
.hero-video .glass-shapes i:nth-child(4) { width: 78vw; height: 78vw; left: -10%; top: 40%; animation-duration: 35s, 13s; animation-delay: -18s, -7s; }
.hero-video .glass-shapes i:nth-child(5) { width: 30vw; height: 30vw; left: 45%; top: 55%; animation-duration: 24s, 9s; animation-delay: -9s, -2s; background: rgba(88,242,187,.16); }
.hero-video .glass-shapes i:nth-child(6) { width: 36vw; height: 36vw; left: 80%; top: -15%; animation-duration: 27s, 11s; animation-delay: -4s, -6s; background: rgba(255,167,194,.14); }
@keyframes glide {
  0% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-4vw, 3vh) rotate(18deg); }
  100% { transform: translate(3vw, -4vh) rotate(-12deg); }
}
.hero-video .inner, .hero-video .ann { z-index: 3; }

/* ---------- Stēto Labs : récit en trois temps sur fond sombre ---------- */
body.labs .story-stage { background: none; box-shadow: none; border: 0; }
body.labs .story-steps .num { color: var(--mint); }
.scene .signal { stroke-dasharray: 100; stroke-dashoffset: 100; }
.scene.on .signal { animation: curve 2.2s .3s ease forwards; }
.scene .ping { opacity: .35; }
.scene.on .ping { animation: ping 2.4s ease-in-out infinite; }
@keyframes ping { 0%, 100% { opacity: .35; r: 5; } 50% { opacity: 1; r: 8; } }

/* Scène 3 : dans la file active, trois patients s'allument l'un après l'autre (rose = signal),
   puis passent au vert, cochés, et le restent. Cycle de 9 s : un patient toutes les 2,4 s,
   les trois coches tiennent jusqu'à 93 %, puis tout s'efface et la boucle repart.
   Sans animation, on voit l'état final : trois patients cochés. */
.scene .pt .dot { fill: #58F2BB; }
.scene .pt .ring { transform-box: fill-box; transform-origin: center; opacity: 0; }
.scene .pt .check { stroke-dasharray: 30; }
.scene.on .p1 .dot { animation: p1-dot 9s ease infinite; }
.scene.on .p1 .ring { animation: p1-ring 9s ease-out infinite; }
.scene.on .p1 .check { animation: p1-check 9s ease infinite; }
.scene.on .p1 .halo { animation: p1-halo 9s ease infinite; }
@keyframes p1-dot { 0%, 5.6% { fill: rgba(255,255,255,.22); } 7.6%, 18.9% { fill: #FFA7C2; } 21.9%, 93% { fill: #58F2BB; } 100% { fill: rgba(255,255,255,.22); } }
@keyframes p1-ring { 0%, 5.6% { transform: scale(.4); opacity: 0; } 6.6% { opacity: .9; } 17.6%, 100% { transform: scale(3); opacity: 0; } }
@keyframes p1-check { 0%, 18.9% { stroke-dashoffset: 30; opacity: 1; } 24.9%, 93% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes p1-halo { 0%, 18.9% { opacity: 0; } 23.9%, 93% { opacity: 1; } 100% { opacity: 0; } }
.scene.on .p2 .dot { animation: p2-dot 9s ease infinite; }
.scene.on .p2 .ring { animation: p2-ring 9s ease-out infinite; }
.scene.on .p2 .check { animation: p2-check 9s ease infinite; }
.scene.on .p2 .halo { animation: p2-halo 9s ease infinite; }
@keyframes p2-dot { 0%, 32.2% { fill: rgba(255,255,255,.22); } 34.2%, 45.6% { fill: #FFA7C2; } 48.6%, 93% { fill: #58F2BB; } 100% { fill: rgba(255,255,255,.22); } }
@keyframes p2-ring { 0%, 32.2% { transform: scale(.4); opacity: 0; } 33.2% { opacity: .9; } 44.2%, 100% { transform: scale(3); opacity: 0; } }
@keyframes p2-check { 0%, 45.6% { stroke-dashoffset: 30; opacity: 1; } 51.6%, 93% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes p2-halo { 0%, 45.6% { opacity: 0; } 50.6%, 93% { opacity: 1; } 100% { opacity: 0; } }
.scene.on .p3 .dot { animation: p3-dot 9s ease infinite; }
.scene.on .p3 .ring { animation: p3-ring 9s ease-out infinite; }
.scene.on .p3 .check { animation: p3-check 9s ease infinite; }
.scene.on .p3 .halo { animation: p3-halo 9s ease infinite; }
@keyframes p3-dot { 0%, 58.9% { fill: rgba(255,255,255,.22); } 60.9%, 72.2% { fill: #FFA7C2; } 75.2%, 93% { fill: #58F2BB; } 100% { fill: rgba(255,255,255,.22); } }
@keyframes p3-ring { 0%, 58.9% { transform: scale(.4); opacity: 0; } 59.9% { opacity: .9; } 70.9%, 100% { transform: scale(3); opacity: 0; } }
@keyframes p3-check { 0%, 72.2% { stroke-dashoffset: 30; opacity: 1; } 78.2%, 93% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes p3-halo { 0%, 72.2% { opacity: 0; } 77.2%, 93% { opacity: 1; } 100% { opacity: 0; } }

/* Sablier : le sable s'écoule, puis le sablier se retourne. Symétrique, donc la boucle est invisible. */
.scene .hourglass { transform-origin: 200px 180px; transform-box: view-box; }
.scene .sand-top, .scene .sand-bot { transform-box: fill-box; transform-origin: 50% 100%; }
.scene .sand-bot { transform: scaleY(0); }
.scene.on .hourglass { animation: flip 3.65s ease-in-out infinite; }
.scene.on .sand-top { animation: drain 3.65s linear infinite; }
.scene.on .sand-bot { animation: fill 3.65s linear infinite; }
.scene.on .stream { animation: stream 3.65s linear infinite; }
/* Cycle de 3,65 s : 2,35 s d'écoulement (0-64 %), courte pause, 1,2 s de retournement (67-100 %). */
@keyframes flip { 0%, 67% { transform: rotate(0deg); } 100% { transform: rotate(180deg); } }
@keyframes drain { 0% { transform: scaleY(1); } 64%, 100% { transform: scaleY(0); } }
/* Sable aux 7/10 : il repose au fond de l'ampoule du bas, puis glisse vers le col pendant le retournement.
   En fin de cycle il occupe, retourné, exactement la place du sable du haut au départ : la boucle reste invisible.
   Volumes égaux : 66 de haut contre le col, 45,5 posé sur le fond ; 66 / 45,5 = 1,4505 et 186 + 66 - 270 = -18. */
@keyframes fill { 0% { transform: translateY(0) scaleY(0); } 64%, 67% { transform: translateY(0) scaleY(1); } 100% { transform: translateY(-18px) scaleY(1.4505); } }
@keyframes stream { 0%, 63% { opacity: 1; } 64%, 100% { opacity: 0; } }

.video-cap { display: flex; align-items: center; gap: 12px; }
.video-cap img { height: 26px; width: auto; }

/* ---------- Patients : carrousel des vidéos ----------
   La vidéo active est centrée ; la suivante s'affiche entière à sa droite, en plus petit, avec son titre. */
.vcarousel { --w: min(560px, 46vw); --wn: min(230px, 17vw); position: relative; overflow: hidden; padding: 10px 0 4px; }
.vtrack { position: relative; height: calc(var(--w) * 9 / 16 + 64px); }
.vslide { position: absolute; margin: 0; transition: left .6s ease, width .6s ease, top .6s ease, opacity .6s ease; cursor: pointer; }
.vslide.on { width: var(--w); left: calc(50% - var(--w) / 2); top: 0; opacity: 1; cursor: default; z-index: 2; }
.vslide.next { width: var(--wn); left: calc(50% + var(--w) / 2 + 32px); top: calc((var(--w) - var(--wn)) * 9 / 32); opacity: .85; z-index: 1; }
.vslide.prev { width: var(--wn); left: calc(50% - var(--w) / 2 - 32px - var(--wn)); top: calc((var(--w) - var(--wn)) * 9 / 32); opacity: .85; z-index: 1; }
.vslide .video-ph, .vslide video { width: 100%; aspect-ratio: 16/9; border-radius: var(--radius); display: flex; object-fit: cover; }
.vslide video { background: var(--navy); }
.vslide:not(.on) video { pointer-events: none; } /* la vidéo d'à côté se choisit d'un clic, sans déclencher ses propres commandes */
.vslide.next .video-ph, .vslide.prev .video-ph { border-radius: 14px; font-size: 12px; padding: 10px; }
.vslide.next .play, .vslide.prev .play { width: 34px; height: 34px; font-size: 13px; }
.vslide.next .video-cap, .vslide.prev .video-cap { font-size: 14px; }
.vslide.next .video-cap img, .vslide.prev .video-cap img { height: 18px; }
@media (max-width: 760px) {
  .vcarousel { --w: 100%; }
  .vtrack { height: auto; display: grid; gap: 24px; }
  .vslide, .vslide.on, .vslide.next, .vslide.prev { position: static; width: 100%; opacity: 1; }
}

/* ---------- À propos : fenêtre de candidature ---------- */
.modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; background: rgba(9,23,89,.45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.modal[hidden] { display: none; }
.modal-box { position: relative; width: min(720px, 100%); max-height: calc(100vh - 40px); overflow: auto; background: var(--navy); color: #fff; border-radius: 28px; padding: 56px; box-shadow: 0 30px 80px rgba(9,23,89,.4); }
.modal-box h2 { color: #fff; margin-bottom: 10px; }
.modal-box p { color: #C9CFEA; margin-bottom: 26px; }
.modal-close { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--bg); color: var(--navy); font-size: 26px; line-height: 1; cursor: pointer; }
/* Fenêtre qui reprend un encart existant (ex. « Demandez à être recontacté ! ») : l'encart garde son propre fond. */
.modal-box.bare { width: min(1100px, 100%); background: none; padding: 0; box-shadow: none; border-radius: 32px; }
.modal-box.bare .modal-close { z-index: 2; }
.modal-box .btn.cta { --g1: #5F80EA; --g2: #3450C4; }
.modal-box .btn.cta .ico-circle { background: var(--bg); border-color: var(--bg); color: var(--navy); }
.file { display: flex; align-items: center; gap: 14px; cursor: pointer; margin: 4px 0 10px; }
.file input { display: none; }
.file-btn { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); border-radius: 99px; padding: 10px 18px; font-size: 15px; font-weight: 500; }
.file-name { color: #9EA7D4; font-size: 15px; }
@media (max-width: 760px) { .modal-box { padding: 34px 22px; } }

/* ---------- À propos : vidéo de fond (montage de plans de 3,5 s, façon kiro.bio) ---------- */
.hero-video .bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-video .bgv { z-index: 0; }
.hero-video .bg-video { z-index: 1; }
.hero-video::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(0deg, rgba(9,23,89,.72), rgba(9,23,89,.25) 55%, rgba(9,23,89,.35)); }
@media (prefers-reduced-motion: reduce) { .hero-video .bg-video { display: none; } }

/* ---------- Page isolée « Stēto sur BFM Business » (06/10/2026) ----------
   Envoyée par mail, liée depuis aucune page, sans en-tête. Logos, titre discret, vidéo en lecture
   automatique (muette) avec les chapitres à sa droite, intervenants, vision, « Être rappelé ». */
/* Cadre bleu nuit (06/10/2026) : fond de page bleu nuit, bandeau des logos en haut, contenu dans un
   panneau clair posé avec des marges bleues ; le pied de page, bleu nuit lui aussi, ferme le cadre. */
body[data-isolee] { background: #172461; }
body[data-isolee] .site-footer { background: transparent; }   /* le fond en relief continue sous le pied de page */
/* Fond, fixe derrière le cadre (06/10/2026, retenu parmi trois essais) : l'émission elle-même, en copie
   minuscule et donc floue, sous un voile bleu et les ondes de Stēto Labs. On ne le voit que dans le bandeau,
   les marges bleues et sous le pied de page. */
.cadre-fond { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: strict;   /* ne fait recalculer que lui-même */
  background: #172461; }
.cadre-fond video.film, .cadre-fond .voile, .cadre-fond canvas.ondes { position: absolute; inset: 0; width: 100%; height: 100%; }
.cadre-fond video.film { object-fit: cover; }   /* 112 × 64 agrandie en plein écran : floue d'elle-même */
.cadre-fond .voile { background: radial-gradient(70% 60% at 18% 0%, rgba(76,107,216,.35), transparent 70%), rgba(23,36,97,.78); }
.cadre-fond canvas.ondes { opacity: .75; }
.cadre-tete { padding: 44px 16px 42px; text-align: center; }
.cobrand { display: inline-flex; align-items: center; gap: 34px; }
.cobrand img { height: 64px; width: auto; }
.cobrand img.bfm { height: 100px; margin: -18px 0; border-radius: 10px; }   /* logo carré : plus haut pour le même poids visuel */
.cobrand span { font-size: 40px; font-weight: 300; color: #fff; opacity: .6; }
.cadre-contenu { --marge: 40px;   /* même écart entre la vidéo et le bord du panneau en haut et sur les côtés */
  display: block; border-radius: 8px; overflow: hidden; margin: 0 auto;
  /* le panneau épouse la vidéo et ses chapitres : le bleu occupe tout le reste de la largeur */
  width: min(calc(100% - 32px), calc(min(1120px, (100vh - 284px) * 16 / 9 + 360px) + 2 * var(--marge)));
  background: radial-gradient(60% 50% at 0% 0%, rgba(43,166,129,.14), transparent 70%),
              radial-gradient(50% 45% at 100% 8%, rgba(17,40,243,.08), transparent 70%),
              radial-gradient(55% 40% at 30% 60%, rgba(255,167,194,.14), transparent 70%),
              radial-gradient(50% 40% at 90% 95%, rgba(120,110,255,.12), transparent 70%), var(--bg); }
.cadre-contenu section.last { padding-bottom: 72px; }
/* Pas de verre dépoli dans le panneau : derrière lui, le fond bouge à chaque image et le navigateur
   recalculerait le flou en permanence. Le panneau est opaque, le rendu ne change pas. */
.cadre-contenu .chapters-box { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255,255,255,.5); }
.cadre-contenu .wrap { max-width: none; padding: 0 var(--marge); }
.cadre-contenu .emission-video { padding-top: var(--marge); }
.emission-video { padding-top: 40px; }
/* Vidéo + chapitres : la vidéo tient entière dans l'écran sous le titre, quelle que soit sa hauteur */
.emission-grid, .speakers { max-width: min(1120px, calc((100vh - 284px) * 16 / 9 + 360px)); min-width: min(100%, 760px); margin-left: auto; margin-right: auto; }
.emission-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; }
.player { position: relative; border-radius: 24px; overflow: hidden; background: var(--navy); box-shadow: 0 30px 80px rgba(29,43,109,.18); align-self: start; }
.player video { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--navy); }
.sound-on { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px; border: 1px solid rgba(255,255,255,.35); border-radius: 99px; background: rgba(9,23,89,.78); color: #fff;
  font: inherit; font-size: 17px; font-weight: 600; white-space: nowrap; cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .15s; }
.sound-on:hover { background: rgba(9,23,89,.92); }
.sound-on[hidden] { display: none; }
/* Cadre des chapitres : hauteur de la rangée (donc de la vidéo), la liste défile à l'intérieur */
.chapters-box { position: relative; border-radius: 24px; background: var(--glass); border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); box-shadow: var(--glass-shadow); }
.chapters-box > h2 { position: absolute; top: 0; left: 0; right: 0; margin: 0; padding: 18px 22px 10px; font-size: 19px; font-weight: 600; }
.chapters { position: absolute; top: 54px; bottom: 8px; left: 0; right: 0; overflow-y: auto; list-style: none; margin: 0; padding: 0 8px; scrollbar-width: thin; }
.chapters li + li { border-top: 1px solid rgba(29,43,109,.08); }
.chapters button { width: 100%; display: grid; grid-template-columns: 48px 1fr; gap: 6px; padding: 11px 14px; border: 0; border-radius: 12px; background: none;
  text-align: left; font: inherit; font-size: 14px; line-height: 1.35; color: var(--muted); cursor: pointer; transition: background .15s; }
.chapters button:hover { background: rgba(255,255,255,.55); }
.chapters time { font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.chapters b { display: block; font-size: 16px; font-weight: 500; color: var(--navy); margin-bottom: 2px; }
.chapters button.on { background: rgba(255,255,255,.8); }
.chapters button.on time { color: var(--green); }
.chapters button.on b { font-weight: 600; }
.speakers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 28px; }
/* Logo du rattachement sous le nom et la fonction, aligné en bas d'une colonne à l'autre ;
   même hauteur pour tous, le carré de BFM un peu plus haut */
.speakers > div { display: flex; flex-direction: column; align-items: flex-start; }
.speakers img { display: block; height: 26px; width: auto; max-width: 150px; object-fit: contain; object-position: left center; margin-top: auto; padding-top: 14px; box-sizing: content-box; }
.speakers img.carre { height: 38px; padding-top: 8px; border-radius: 6px; }
.speakers b { display: block; font-size: 16px; font-weight: 600; color: var(--navy); }
.speakers span { display: block; font-size: 14px; line-height: 1.4; color: var(--muted); margin-top: 2px; }
/* Vision (06/10/2026) : marges resserrées, texte aligné sur la largeur de la vidéo et de ses chapitres */
.cadre-contenu .emission-video { padding-bottom: 40px; }
.cadre-contenu .vision { padding: 16px 0 40px; }
.vision-in { max-width: 1000px; margin: 0 auto; }   /* bloc centré, même marge à gauche et à droite ; texte aligné à gauche */
.vision p { font-size: 20px; }
.cadre-contenu #contact { padding-top: 16px; }
.contact .form-note { font-size: 14px; opacity: .75; margin-top: 24px; }
.form-ok h3 { color: #fff; font-size: 26px; margin-bottom: 8px; }
.form-erreur { color: var(--pink); font-size: 15px; margin: 4px 0 0; }
@media (max-width: 980px) {
  .emission-grid { grid-template-columns: 1fr; min-width: 0; }
  .chapters-box > h2, .chapters { position: static; }
  .chapters { max-height: 320px; padding-bottom: 8px; }
  .speakers { grid-template-columns: 1fr 1fr; min-width: 0; }
}
@media (max-width: 560px) {
  .cadre-tete { padding: 24px 10px 22px; }
  .cadre-contenu { --marge: 16px; border-radius: 6px; }
  .cobrand { gap: 16px; }
  .cobrand img { height: 44px; }
  .cobrand img.bfm { height: 70px; margin: -13px 0; }
  .cobrand span { font-size: 30px; }
  .speakers { grid-template-columns: 1fr; }
  .sound-on { font-size: 15px; padding: 10px 18px; }
}
/* Chapitres : une ligne par intervenant, son rattachement à côté du nom (06/10/2026) */
.chapters i { display: block; font-style: normal; }
.chapters i em { font-style: normal; color: var(--muted); opacity: .8; }

/* Page BFM Business : « Être rappelé » en verre clair plutôt qu'en bloc bleu nuit (07/10/2026).
   Pas de backdrop-filter (le fond animé derrière le panneau le ferait recalculer en permanence) :
   l'effet verre vient de dégradés translucides, d'un liseré blanc et d'un reflet en haut. */
.cadre-contenu .contact { color: var(--navy); border: 1px solid rgba(255,255,255,.85);
  background:
    radial-gradient(60% 80% at 0% 0%, rgba(88,242,187,.22), transparent 70%),
    radial-gradient(55% 70% at 100% 100%, rgba(255,167,194,.22), transparent 70%),
    radial-gradient(50% 60% at 85% 10%, rgba(140,160,255,.20), transparent 70%),
    linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,255,255,.42));
  box-shadow: 0 24px 70px rgba(29,43,109,.10), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(29,43,109,.04); }
.cadre-contenu .contact h2 { color: var(--navy); }
.cadre-contenu .contact p { color: var(--ink-2); }
.cadre-contenu .contact .form-note { color: var(--muted); opacity: 1; }
.cadre-contenu .form input, .cadre-contenu .form textarea { background: rgba(255,255,255,.62); border: 1px solid rgba(29,43,109,.12); color: var(--navy); }
.cadre-contenu .form input::placeholder, .cadre-contenu .form textarea::placeholder { color: var(--muted); }
.cadre-contenu .form input:focus, .cadre-contenu .form textarea:focus { outline: 2px solid rgba(43,166,129,.45); outline-offset: 1px; border-color: transparent; }
.cadre-contenu .contact .btn.cta { --g1: #4C6BD8; --g2: #1D2B6D; }   /* bouton maison d'origine, lisible sur fond clair */
.cadre-contenu .contact .btn.cta:hover { --g1: #3F5CC8; --g2: #091759; }
.cadre-contenu .form-ok h3 { color: var(--navy); }
.cadre-contenu .form-erreur { color: #B3261E; }