/* 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;
  /* Une taille par niveau de titre, sur toutes les pages (08/10/2026) : accroches (h1), titres (h2),
     titres de cartes (h3). Les titres d'étapes des récits en trois temps ont leur propre taille, commune aux 3 pages. */
  --h1: clamp(38px, 4.8vw, 66px);
  --h2: clamp(32px, 4vw, 48px);
  --h3: 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: var(--h2); }
h3 { font-size: var(--h3); 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%; animation: drift 28s ease-in-out infinite alternate; }
/* Dessinées déjà floues (14/10/2026) : le dégradé, calculé par main.js pour la largeur de l'écran, déborde de 480 px
   (3 × le flou de 160 px d'origine). Plus de filter: blur, que Safari recalculait à chaque image. */
.bg-blobs i::before { content: ""; position: absolute; inset: -480px; border-radius: 50%; background: var(--degrade, none); }
.bg-blobs .b1 { width: 42vw; height: 42vw; left: -12vw; top: -10vw; }
.bg-blobs .b2 { width: 36vw; height: 36vw; left: 18vw; top: 30vh; animation-duration: 34s; }
.bg-blobs .b3 { width: 40vw; height: 40vw; right: -10vw; top: -6vw; animation-duration: 31s; }
.bg-blobs .b4 { width: 34vw; height: 34vw; left: 36vw; bottom: -14vw; animation-duration: 38s; }
.bg-blobs .b5 { width: 30vw; height: 30vw; right: -6vw; bottom: 10vh; 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 ---------- */
.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 22px at calc(100% - 28px) 50%, transparent 21.5px, #000 22px); mask: radial-gradient(circle 22px at calc(100% - 28px) 50%, transparent 21.5px, #000 22px); }
.btn.cta:hover { background: none; --g1: #3F5CC8; --g2: #091759; }
.btn.cta .ico-circle { width: 42px; height: 42px; 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: var(--h1); 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 : le titre et le produit (version 1, retenue le 09/10/2026) ---------- */
.hero-vision .orb { display: none; }
.hv-split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; text-align: left; }
.hv-split h1 { font-size: var(--h1); 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: hvFloatRot 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; width: 318px;   /* largeur fixe : le texte tient en 3 lignes sur tous les écrans */ padding: 16px 18px; z-index: 2; animation: hvFloatRot 9s -4.5s ease-in-out infinite alternate;
  top: calc(16px + 10%); }   /* 08/10/2026 : abaissé de 10 % de la hauteur de la vignette (le % porte sur .hv-stage, aussi haut qu'elle) */
.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.webp") no-repeat 38% 12% / 190%; transform: scaleX(-1); }
@keyframes hvFloat { from { transform: translateY(-7px); } to { transform: translateY(7px); } }
/* Version E2 retenue le 08/10/2026 : les deux cartes tournées du même angle autour de l'axe vertical seulement,
   chacune avec sa propre perspective (sinon le message, près du point de fuite, paraît à peine tourné).
   La rotation est aussi posée hors animation, pour rester quand les animations sont coupées (préférence système). */
.hv-dash, .hv-msg { transform: perspective(1100px) rotateY(-12deg); }
@keyframes hvFloatRot { from { transform: perspective(1100px) rotateY(-12deg) translateY(-7px); } to { transform: perspective(1100px) rotateY(-12deg) translateY(7px); } }
/* Ombre au sol, très diffuse, centrée sous les deux cartes (dimensions avant la réduction à 85 % de .hv-stage) */
.hv-sol { position: absolute; z-index: -1; left: -81px; top: calc(100% + 49px); width: 658px; height: 54px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(29,43,109,.16), transparent); filter: blur(14px); pointer-events: none; }
@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; } }

/* Arrivée sur la page (essai, 08-09/10/2026) : les cartes de droite sont là dès l'arrivée, telles quelles ; le titre
   s'écrit lettre par lettre (sans curseur), puis les deux pastilles (« temps », « patients ») apparaissent en fondu,
   le sous-titre et « Découvrir » 0,3 s après (« Découvrir » avec eux depuis le 12/10/2026). Piloté par main.js (classes intro-js, intro-tag).
   « intro » est posé dans le HTML pour ne rien montrer avant le script ; si le script ne tourne pas, tout
   réapparaît seul au bout de 4 s. Pour retirer l'essai : enlever la classe « intro » de la section. */
.hero-vision.intro .hv-split h1, .hero-vision.intro .hv-split .hero-tag,
.hero-vision.intro .scroll-cue { opacity: 0; animation: introSecours .6s 4s forwards; }
@keyframes introSecours { to { opacity: 1; } }
.intro-js .hv-split h1 .ch { opacity: 0; }   /* les lettres apparaissent d'un coup, sans fondu (09/10/2026) */
.intro-js .hv-split h1 .ch.on { opacity: 1; }
/* Pastilles et sous-titre : même fondu, au même moment, une fois le titre écrit */
/* Le fond des pastilles passe sur une couche à part (::before) dont on fait varier l'opacité, comme le sous-titre :
   un fondu de la couleur seule, très transparente, se voyait plus tard que celui du sous-titre (09/10/2026).
   Le fondu n'est posé que sur l'état final : au départ, rien ne s'efface à l'écran. */
.intro-js .hv-split h1 .pill { position: relative; background-color: transparent; border-color: transparent; isolation: isolate; }
.intro-js .hv-split h1 .pill::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit;
  border: 1px solid var(--glass-line); background: rgba(220, 214, 255, .7); opacity: 0; }
.intro-js .hv-split h1 .pill.pink::before { background: rgba(255, 190, 214, .55); }
.intro-js .hv-split h1 .pill.green::before { background: rgba(140, 224, 190, .5); }
.intro-js.intro-tag .hv-split h1 .pill::before { opacity: 1; transition: opacity 2.6s ease; }
/* 14/10/2026 : pendant le fondu, Safari dessinait le fond de la pastille PAR-DESSUS les lettres (mot voilé puis net).
   Les lettres sont posées explicitement au-dessus du fond ; et le fond a sa propre couche dès le départ, pour que Safari
   ne change pas de mode de dessin au milieu du fondu. */
.intro-js .hv-split h1 .pill .ch { position: relative; z-index: 1; }
.intro-js .hv-split h1 .pill::before { will-change: opacity; }
.intro-js .hv-split .hero-tag { opacity: 0; }
.intro-js.intro-tag .hv-split .hero-tag { transition: opacity 2.6s ease .3s; }   /* un peu après les pastilles : l'œil les voit d'abord (09/10/2026 ; 0,45 s avant le 12/10/2026) */
.intro-js .scroll-cue { opacity: 0; translate: 0 10px; }
.intro-js.intro-tag .scroll-cue { transition: opacity 2.6s ease .3s, translate 2.6s ease .3s; }   /* même fondu que le sous-titre (12/10/2026) */
.intro-js.intro-tag .hv-split .hero-tag, .intro-js.intro-tag .scroll-cue { opacity: 1; translate: 0 0; }
/* 08/10/2026 : slogan décalé de 50 px vers la gauche sur grand écran, sans rejoindre le bord gauche de l'en-tête
   (à 1440 px : 177 px contre 100 px pour l'en-tête et 130 px pour le logo). En dessous de 1200 px, il est déjà près du bord. */
@media (min-width: 1200px) { .hv-split > div:first-child { position: relative; left: -50px; } }

/* ---------- Pourquoi (12/10/2026) : plein écran au défilement, d'après la section why d'instituteofhealth.com ----------
   Piste « A bis » de sources/pages-temporaires/_propositions-why.html. Section haute de 5 écrans, scène figée ; main.js pose
   data-ecran (0 à 3) selon l'avancement et dessine les particules. Fond : le bleu de Stēto Labs. */
.why { --why-ease: cubic-bezier(.2, .7, .2, 1); position: relative; padding: 0; height: calc(5 * 70vh + 100vh); }   /* 70 % d'écran de défilement par écran */
.why-stage { position: sticky; top: 0; height: 100vh; height: 100svh; height: 100dvh; overflow: hidden; color: #fff; isolation: isolate; background: #0F1742; }
.why-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.why-tissu { position: absolute; inset: -10%; z-index: 0; filter: blur(50px); opacity: .6; transition: opacity 2.4s ease, filter 2.4s ease; }
.why-tissu i { position: absolute; border-radius: 50%; animation: why-flot 26s ease-in-out infinite alternate; }
.why-tissu i:nth-child(1) { left: 5%; top: 10%; width: 40vw; height: 34vw; background: radial-gradient(closest-side, rgba(255,167,194,.3), transparent); }
.why-tissu i:nth-child(2) { right: 0; top: 30%; width: 52vw; height: 46vw; background: radial-gradient(closest-side, rgba(76,107,216,.45), transparent); animation-duration: 32s; }
.why-tissu i:nth-child(3) { left: 30%; bottom: -10%; width: 44vw; height: 34vw; background: radial-gradient(closest-side, rgba(88,242,187,.22), transparent); animation-duration: 22s; }
@keyframes why-flot { to { transform: translate(5vw, -4vh) scale(1.12); } }
.why[data-mode="1"] .why-tissu { opacity: .75; filter: blur(40px) saturate(150%); }
.why[data-mode="2"] .why-tissu { opacity: .3; filter: blur(80px); }
.why-veil { position: absolute; inset: 0; z-index: 2; pointer-events: none; transition: opacity 2s;
  background: radial-gradient(70% 60% at 50% 45%, rgba(15,23,66,.42), transparent 75%), linear-gradient(to bottom, rgba(15,23,66,.25), transparent 30%, transparent 70%, rgba(15,23,66,.45)); }
.why[data-mode="1"] .why-veil { opacity: .55; }
.why-screens { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 0 6vw; pointer-events: none; }
.why-screen { grid-area: 1 / 1; text-align: center; opacity: 0; filter: blur(12px); transform: translateY(22px) scale(.985);
  transition: opacity .8s var(--why-ease), filter .9s var(--why-ease), transform 1.1s var(--why-ease); }
.why-screen.on { opacity: 1; filter: none; transform: none; transition-delay: .12s; }
.why-big { color: inherit; font-size: clamp(26px, 3.2vw, 50px); font-weight: 400; line-height: 1.12; letter-spacing: -.025em; max-width: 21em; margin: 0 auto; text-wrap: balance;
  text-shadow: 0 2px 30px rgba(15,23,66,.25); }
.why-big.trois { max-width: 26em; }   /* écran 4 : une phrase par ligne */
.why-q { font-style: italic; font-weight: 300; }   /* écrans 1-3 : pensées du médecin, entre guillemets */
.why-q::before { content: "« "; } .why-q::after { content: " »"; }
.why-fin { margin-top: -5vh; }         /* écran 5 : juste au-dessus de la mer de particules (-10vh et mer à 66 % avant le 12/10/2026) */
/* Écran 4 : mots dans des cartes translucides, posés un peu partout, qui flottent sans tourner. Pas de flou d'arrière-plan :
   il floutait les particules en un voile opaque une fois la carte apparue (12/10/2026). */
.why-screen.why-mots { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 6vw; }   /* texte au centre, cartes autour */
.why-mots span { position: absolute; left: var(--x); top: var(--y); white-space: nowrap;
  transform: translate(-50%, -50%) translateY(14px); opacity: 0; filter: blur(10px);
  transition: opacity .6s var(--d), filter .7s var(--d), transform .9s var(--why-ease) var(--d); }
.why-mots span i { display: block; font-style: normal; font-size: calc(var(--t) * .88); font-weight: 500; letter-spacing: -.01em; line-height: 1;
  padding: .6em 1em .68em; border-radius: 20px; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  animation: why-flotte var(--f, 5s) ease-in-out infinite alternate; }
.why-screen.on.why-mots span { opacity: 1; filter: none; transform: translate(-50%, -50%); }
@keyframes why-flotte { from { transform: translate(-6px, 4px); } to { transform: translate(7px, -6px); } }
.why-bars { position: absolute; z-index: 6; left: 50%; bottom: 3.2vh; transform: translateX(-50%); display: flex; gap: 6px; }
.why-bars i { width: min(230px, 20vw); height: 2px; background: rgba(255,255,255,.22); border-radius: 2px; overflow: hidden; }
.why-bars b { display: block; height: 100%; width: 0; background: rgba(255,255,255,.9); }
@media (prefers-reduced-motion: reduce) { .why-tissu i, .why-mots span i { animation: none; } }

@media (prefers-reduced-motion: reduce) { .hv-dash, .hv-msg { animation: none; } }


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

.site-footer p.footer-fin { margin: 28px 0 0; color: inherit; font-size: 12px; font-style: italic; line-height: 1.55; }   /* italique 12 px (Vincent, 20/10/2026) */ .footer-reglementaire p:last-child { margin-bottom: 0; }

.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-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; } }
/* 19/10/2026 (Vincent) : la fenêtre prend le style verre clair de l'encart « Parlons-en ! » (reflets menthe, rose,
   lavande sur blanc translucide), et les deux choix deviennent des cartes claires au texte centré. */
.modal-box.profil-box { color: var(--navy); border: 1px solid rgba(255,255,255,.85); border-radius: 32px; background-color: #EEEFF5;
  /* reflets plus marqués que dans « Parlons-en ! » (20/10/2026, Vincent) : les deux cartes blanches ressortent */
  background-image:
    radial-gradient(65% 85% at 0% 0%, rgba(88,242,187,.40), transparent 70%),
    radial-gradient(60% 75% at 100% 100%, rgba(255,167,194,.40), transparent 70%),
    radial-gradient(55% 65% at 85% 10%, rgba(140,160,255,.36), transparent 70%),
    linear-gradient(135deg, rgba(255,255,255,.45), rgba(255,255,255,.18));
  box-shadow: 0 24px 70px rgba(29,43,109,.18), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(29,43,109,.04); }
.modal-box.profil-box h2 { color: var(--navy); padding-right: 0; }   /* pas de croix dans cette fenêtre : titre centré */
.profil-box .profil-btn { justify-content: center; align-items: center; text-align: center; color: var(--navy);
  background: rgba(255,255,255,.82); border: 1px solid rgba(255,255,255,.95); box-shadow: 0 10px 30px rgba(29,43,109,.08); }
.profil-box .profil-btn:hover, .profil-box .profil-btn:focus-visible { background: rgba(88,242,187,.18); border-color: var(--mint); }
.profil-box .profil-btn span { color: var(--ink-2); }
/* 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: 68px; }   /* + 72 px de la section suivante + 4 px d'interligne = 144 visibles */
.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%); } }
/* À propos (12/10/2026) : espaces doublés entre les logos ; marge droite égale à l'espace pour que la boucle (-50 %) tombe
   juste, et durée allongée d'autant pour garder la même vitesse de défilement. */
#inst-track { gap: 144px; padding-right: 144px; animation-duration: 55s; }
.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; }
.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; }


/* Infirmiers, version « plein écran » (09/10/2026). Chaque infirmier occupe tout l'écran à son tour au défilement
   (main.js) : prénom géant en blanc derrière la photo détourée, nom à gauche, citation et parcours à droite, titre de la
   section en haut à gauche. Collée à « Concentrez-vous sur l'essentiel » (-72 px : sa marge basse), sans bande entre les deux ;
   l'en-tête du site reste affiché (12/10/2026 : il ne disparaît plus nulle part). */
.ful-s { --ful-ease: cubic-bezier(.2, .7, .2, 1); padding: 0; margin-top: -72px; }
.ful { height: 330vh; padding: 0; position: relative; }
.ful-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; height: 100dvh; }   /* dvh : suit l'écran visible quand la barre du navigateur se replie (Firefox Android, 15/10/2026) */
.ful-frame { position: relative; height: 100%; overflow: hidden; }
.ful-titre { position: absolute; z-index: 4; left: 5vw; top: max(7vh, 112px);   /* sous l'en-tête, toujours affiché */ color: var(--navy); pointer-events: none; }
.ful-eyebrow { display: block; font-size: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(29,43,109,.65); margin-bottom: 14px; }
.ful-titre h2 { margin: 0; font-size: clamp(30px, 3.2vw, 48px); letter-spacing: -.025em; line-height: 1.04; }
.ful-layer { position: absolute; inset: 0; background: var(--bgc); opacity: 0; transition: opacity 1s var(--ful-ease); }
.ful-layer.on { opacity: 1; }
.ful-name { position: absolute; left: 0; right: 0; top: max(20vh, 250px); text-align: center; font-size: min(27vw, 46vh); font-weight: 600; line-height: .8; letter-spacing: -.05em; color: #fff;
  transform: translateY(30px) scale(.97); transition: transform 1.4s var(--ful-ease); white-space: nowrap; }
.ful-layer.on .ful-name { transform: none; }
.ful-photo { position: absolute; left: 50%; bottom: 0; height: 78vh; width: auto; max-width: none; transform: translate(-50%, 8vh); transition: transform 1.3s var(--ful-ease); }
.ful-layer.on .ful-photo { transform: translate(-50%, 0); }
.ful-side { position: absolute; bottom: 7vh; width: min(300px, 22vw); color: var(--navy); opacity: 0; transform: translateY(16px); transition: opacity .7s .25s, transform 1s .25s var(--ful-ease); }
.ful-layer.on .ful-side { opacity: 1; transform: none; }
.ful-l { left: 5vw; bottom: calc(7vh + 84px); }
.ful-r { right: 5vw; }
.ful-num { font-size: 14px; font-weight: 600; letter-spacing: .14em; color: rgba(29,43,109,.6); margin-bottom: 18px; }
.ful-l h3 { font-size: 44px; font-weight: 600; letter-spacing: -.02em; margin: 0 0 6px; }
.ful-l .ful-role { font-size: 17px; font-weight: 500; }
.ful-l .ful-place { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; margin-top: 16px; padding: 7px 13px 7px 10px; border-radius: 99px; background: rgba(255,255,255,.55); }
.ful-l .ful-place img { width: 14px; }
.ful-r blockquote { margin: 0 0 18px; font-size: 21px; line-height: 1.35; color: var(--navy); }
.ful-r ul { list-style: none; margin: 0; padding: 0; font-size: 15px; font-weight: 500; }
.ful-r li { padding: 9px 0; border-top: 1px solid rgba(29,43,109,.14); }
.ful-prog { position: absolute; z-index: 5; top: 50%; left: 26px;   /* à gauche : à droite, le sélecteur « Équipe » les masquerait */ transform: translateY(-50%); display: flex; flex-direction: column; gap: 8px; }
.ful-prog i { width: 4px; height: 34px; border-radius: 4px; background: rgba(29,43,109,.15); overflow: hidden; position: relative; }
.ful-prog i b { position: absolute; left: 0; right: 0; top: 0; height: var(--p, 0%); background: var(--navy); border-radius: 4px; }
.ful-cta { position: absolute; z-index: 5; left: 5vw; bottom: 7vh; }
@media (max-width: 980px) {
  .ful-side { width: auto; left: 20px; right: 20px; }
  .ful-l { top: 52vh; bottom: auto; display: none; }
  .ful-r { bottom: 3vh; padding: 16px; border-radius: 20px; background: rgba(255,255,255,.7); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
  .ful-r blockquote { font-size: 17px; }
  .ful-r ul { display: none; }
  .ful-photo { height: 66vh; }
  .ful-cta { display: none; }
}
@media (max-width: 560px) {
  .ful-titre h2 { font-size: 26px; }
}

/* 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; }   /* plus de trait ni de ligne de copyright dessous : le copyright est dans la 1re colonne (20/10/2026) */
.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: var(--h1); 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 details:last-child { margin-bottom: 0; }
.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 { max-width: 22ch; 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: fixed; inset: 0; width: 100%; height: 100%; opacity: .55; z-index: -1; pointer-events: none; }   /* fond de toute la page : les ondes restent en place et continuent d'onduler au défilement (08/10/2026) */
.hero-labs .inner { position: relative; z-index: 2; }   /* même largeur que le reste de la page (.wrap) */
.hero-labs h1 { font-size: var(--h1); 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: var(--h1); 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 .thumb { display: block; aspect-ratio: 16/9; margin-bottom: 22px; border-radius: 14px; overflow: hidden; }
.article .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.article .thumb:hover img { transform: scale(1.03); }
.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 20px; }   /* 20 px sur les côtés : « Dispositif Médical » tient sur une ligne à côté du logo CE */
.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 { 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 (08/10/2026, piste A) : titre figé à gauche, citations à droite ----------
   Même mise en page que les récits en trois temps (colonne gauche figée sous l'en-tête). */
.temoins-grid { display: grid; grid-template-columns: 0.8fr 1.6fr; gap: 72px; }
.temoins-head { position: sticky; top: var(--temoins-haut, 110px); align-self: start; }   /* se fige centré verticalement (main.js) */
.temoins-head h2 { margin-bottom: 0; }
.temoins-list { display: grid; gap: 56px; margin-top: 48px; }   /* le haut du 1er témoignage au niveau du haut du titre (sous la pastille « Les médecins témoignent ») */
.temoin { margin: 0; display: grid; grid-template-columns: 120px 1fr; gap: 32px; align-items: center; }
.temoin img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; object-position: center top; }
.temoin blockquote { margin: 0 0 10px; font-size: clamp(20px, 1.9vw, 25px); line-height: 1.38; color: var(--navy); }
.temoin figcaption { font-size: 17px; font-weight: 500; color: var(--ink-2); }
@media (max-width: 980px) {
  .temoins-grid { grid-template-columns: 1fr; gap: 36px; }
  .temoins-head { position: static; }
  .temoins-list { margin-top: 0; }
  .temoin { grid-template-columns: 88px 1fr; gap: 20px; align-items: start; }
  .temoin img { width: 88px; height: 88px; }
}

/* ---------- 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%; }
@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; }
/* sans cadre, le dessin s'arrête 34 px au-dessus du bas de l'illustration (marge des scènes) : on les retire
   de la marge de section, pour garder 144 px visibles jusqu'à la section suivante, comme partout */
body.labs .story { padding-bottom: 38px; }
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; } }

/* « 02 · Stratifier le risque patient » (Stēto Labs, A bis, 08/10/2026), à la place du sablier. Boucle de 12 s :
   les patients, dispersés, se rangent à la base (0-17 %) ; l'algorithme en pré-trie 8 (anneaux de gauche à droite,
   20-28 %, mauve à 31 %) ; ils montent chez les infirmiers (32-43 %) ; anneaux sur 3 d'entre eux (46-52 %), roses à 56 % ;
   ces 3 montent au médecin (57-67 %) ; tout se défait (88-98 %). Chaque icône n'apparaît qu'à l'arrivée des patients à
   son étage. Positions et retards des anneaux dans le SVG (labs.html), générés par sources/pages-temporaires/labs-02/genere.py.
   Animé seulement quand la scène est affichée : elle repart du début à chaque arrivée sur l'étape. */
.scene .sr-pb { fill: rgba(255,255,255,.4); transform: translate(var(--xs), var(--ys)); }
.scene .sr-repere { opacity: 0; transform-box: fill-box; transform-origin: center; }
.scene .sr-ico { stroke: rgba(255,255,255,.45); opacity: 0; }
.scene.on .sr-reste { animation: sr-mb 12s ease-in-out infinite; }
.scene.on .sr-monte1 { animation: sr-m1 12s ease-in-out infinite, sr-c1 12s ease infinite; }
.scene.on .sr-monte2 { animation: sr-m2 12s ease-in-out infinite, sr-c2 12s ease infinite; }
.scene.on .sr-repere { animation: sr-repere 12s ease-out infinite; }   /* retard propre à chaque anneau, dans le SVG */
.scene.on .sr-algo { animation: sr-algo 12s ease infinite, sr-vu-algo 12s ease infinite; }
.scene.on .sr-ide { animation: sr-ide 12s ease infinite, sr-vu-ide 12s ease infinite; }
.scene.on .sr-med { animation: sr-med 12s ease infinite, sr-vu-med 12s ease infinite; }
@keyframes sr-mb { 0%, 5% { transform: translate(var(--xs), var(--ys)); } 17%, 88% { transform: translate(var(--x0), var(--y0)); } 98%, 100% { transform: translate(var(--xs), var(--ys)); } }
@keyframes sr-m1 { 0%, 5% { transform: translate(var(--xs), var(--ys)); } 17%, 32% { transform: translate(var(--x0), var(--y0)); } 43%, 88% { transform: translate(var(--x1), var(--y1)); } 98%, 100% { transform: translate(var(--xs), var(--ys)); } }
@keyframes sr-m2 { 0%, 5% { transform: translate(var(--xs), var(--ys)); } 17%, 32% { transform: translate(var(--x0), var(--y0)); } 43%, 57% { transform: translate(var(--x1), var(--y1)); } 67%, 88% { transform: translate(var(--x2), var(--y2)); } 98%, 100% { transform: translate(var(--xs), var(--ys)); } }
@keyframes sr-c1 { 0%, 27% { fill: rgba(255,255,255,.4); } 31%, 88% { fill: #B9B0FF; } 95%, 100% { fill: rgba(255,255,255,.4); } }
@keyframes sr-c2 { 0%, 27% { fill: rgba(255,255,255,.4); } 31%, 53% { fill: #B9B0FF; } 56%, 88% { fill: #FFA7C2; } 95%, 100% { fill: rgba(255,255,255,.4); } }
/* bref éclair de 0,54 s : un anneau s'éteint avant que son patient ne monte */
@keyframes sr-repere { 0% { opacity: 0; transform: scale(.5); } 1.5% { opacity: 1; transform: scale(1); } 3.5% { opacity: 1; } 4.5%, 100% { opacity: 0; transform: scale(1); } }
@keyframes sr-algo { 0%, 18% { stroke: rgba(255,255,255,.45); } 20%, 30% { stroke: #58F2BB; } 35%, 100% { stroke: rgba(255,255,255,.45); } }
@keyframes sr-ide { 0%, 41% { stroke: rgba(255,255,255,.45); } 44%, 58% { stroke: #58F2BB; } 63%, 100% { stroke: rgba(255,255,255,.45); } }
@keyframes sr-med { 0%, 66% { stroke: rgba(255,255,255,.45); } 69%, 88% { stroke: #58F2BB; } 94%, 100% { stroke: rgba(255,255,255,.45); } }
@keyframes sr-vu-algo { 0%, 14% { opacity: 0; } 18%, 88% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes sr-vu-ide { 0%, 40% { opacity: 0; } 44%, 88% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes sr-vu-med { 0%, 64% { opacity: 0; } 68%, 88% { opacity: 1; } 95%, 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 0; }
.vtrack { position: relative; height: calc(var(--w) * 9 / 16 + 40px); }   /* vidéo + légende */
/* Une seule vidéo (V0) : elle s'affiche plus grande, sans place réservée pour une voisine */
.vcarousel:not(:has(.vslide + .vslide)) { --w: min(720px, 60vw); }
.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); }
/* Le CV part par mail et non avec le formulaire (22/10/2026) : les pièces jointes demandent un forfait
   Formspree payant. Les règles du champ fichier (`.file`) ont été retirées avec lui. */
.modal-box .form-note { color: #9EA7D4; font-size: 15px; margin: 2px 0 4px; }
@media (max-width: 760px) { .modal-box { padding: 34px 22px; } }

/* ---------- À propos : vidéo de fond (montage de plans de 3,5 s) ---------- */
.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 video.film { opacity: 0; transition: opacity 1.5s ease; } .cadre-fond video.film.on { opacity: 1; }   /* chargé en différé (13/10/2026) : arrive en fondu */
.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; }

/* Images : fondu à l'arrivée (08/10/2026), posé par main.js sur les images pas encore chargées */
img.img-attente { opacity: 0; }
img.img-fondu { animation: img-fondu .45s ease-out; }
@keyframes img-fondu { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { img.img-fondu { animation: none; } }

/* ---------- Patients : essai (08/10/2026) — patient et infirmière dans un cadre de verre ----------
   Même cadre que l'illustration « Vos patients accompagnés » de la page Médecins, mais sans fond :
   la personne détourée se découpe sur le fond du site, le bas de la photo est coupé par l'intérieur
   arrondi du cadre, et le message déborde du cadre. Pour revenir en arrière : retirer la classe
   « encadre » et l'enveloppe « cadre-personne » dans patients.html (et ce bloc). */
.patient-stage.encadre { place-items: end center; }
.patient-stage.nurse-stage.encadre { place-items: end start; }
/* Seul l'anneau du cadre est en verre (08/10/2026, demande de Vincent) : l'intérieur est vide et laisse voir
   le fond du site. L'anneau est dessiné par un pseudo-élément dont on masque le centre. */
.cadre-personne { position: relative; width: min(440px, 88%); padding: 19px; border-radius: 30px; }
.cadre-personne::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 19px; pointer-events: none;
  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);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.cadre-personne > div { position: relative; border-radius: 23px; overflow: hidden; padding-top: 28px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.75); }   /* liseré du bord intérieur de l'anneau, sans fond */
.patient-stage .cadre-personne img { width: 100%; margin: 0 auto; }
/* 15/10/2026 : sur un écran peu haut (téléphone, portable 13-14 pouces), main.js réduit le cadre juste assez pour que la
   photo et « Découvrir » tiennent dans l'écran (--cadre-max) ; sur un écran assez haut, la variable n'est pas posée. */
.hero-patient .cadre-personne { width: min(440px, 88%, var(--cadre-max, 440px)); }
.hero-patient.ajuste .patient-stage { min-height: 0; }
.patient-stage.encadre .notif { left: -64px; z-index: 2; }
.patient-stage.nurse-stage.encadre .notif { left: auto; right: -40px; }


/* ---------- Page Médecins : « Concentrez-vous sur l'essentiel » (09/10/2026) ----------
   Le médecin est plongé dans le produit : l'écran « Mes patients » (recréé en HTML d'après la maquette produit,
   patients fictifs) grandit au défilement jusqu'à occuper l'écran sous l'en-tête (toujours affiché depuis le 12/10/2026), puis des messages
   apparaissent sur l'écran, un à la fois. Mécanique dans main.js (« Immersion »). */
.immersion { padding: 0; height: 420vh; margin: -48px 0 72px; }   /* -48 + 120 du titre = 72 : 144 px visibles depuis le récit ; +72 en bas = 144 */
.imm-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.imm-tete { position: absolute; left: 0; right: 0; top: 120px; text-align: center; z-index: 2; }
.imm-tete h2 { margin: 0; }
.imm-ecran { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 50% 0; overflow: hidden; border-radius: 24px;
  box-shadow: 0 30px 90px rgba(29,43,109,.18), 0 0 0 1px rgba(29,43,109,.06); will-change: transform; background: #F3F4F8; }
.site-header { transition: opacity .35s ease, transform .35s ease; }

/* L'écran du produit */
.app { position: absolute; inset: 0; display: flex; zoom: 1.15; font-size: 13px; color: #1B1A3C; background: #F3F4F8; text-align: left; }
.app .i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.app-nav { width: 60px; flex: none; background: #fff; border-right: 1px solid #ECECF1; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 0 14px; }
.app-logo { width: 34px; height: 34px; border-radius: 50%; background: #111; color: #fff; font-size: 10.5px; font-weight: 600; display: grid; place-items: center; letter-spacing: -.02em; margin-bottom: 6px; }
.app-lien { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: #3A3950; }
.app-lien.actif { background: #EEEEF4; }
.app-moi { margin-top: auto; width: 34px; height: 34px; border-radius: 50%; background: #E6E6F2; font-size: 11px; font-weight: 600; display: grid; place-items: center; color: #2E2462; }
.app-main { flex: 1; min-width: 0; padding: 18px 28px 28px; display: flex; flex-direction: column; }
.app-titre { font-size: 21px; font-weight: 700; margin: 2px 0 18px; color: #1B1A3C; letter-spacing: 0; }
.app-carte { flex: 1; min-height: 0; background: #fff; border-radius: 10px; padding: 18px 22px; overflow: hidden; box-shadow: 0 1px 2px rgba(27,26,60,.04); }
.app-barre { display: flex; align-items: center; gap: 26px; margin-bottom: 22px; }
.app-onglets { display: flex; border-bottom: 1px solid #E9E9EF; }
.app-onglets span { padding: 8px 12px 10px; color: #3A3950; display: flex; align-items: center; gap: 6px; position: relative; }
.app-onglets span.actif { color: #2E2462; box-shadow: inset 0 -2px 0 #2E2462; }
.app-onglets i { font-style: normal; font-size: 10.5px; background: #ECECF5; border-radius: 7px; padding: 1px 6px; }
.app-onglets em { position: absolute; top: 4px; right: 4px; width: 5px; height: 5px; border-radius: 50%; background: #C9C9DC; }
.app-recherche { display: flex; align-items: center; gap: 8px; color: #9A99AC; border-bottom: 1px solid #E2E2EA; padding: 6px 4px; width: 210px; }
.app-recherche .i { width: 15px; height: 15px; }
.app-ajout { margin-left: auto; display: flex; align-items: center; gap: 8px; background: #2E2462; color: #fff; font-weight: 600; border-radius: 6px; padding: 8px 14px; }
.app-ajout .i { width: 15px; height: 15px; }
.app-table { width: 100%; border-collapse: collapse; }
.app-table th { font-weight: 600; font-size: 12px; color: #3A3950; text-align: left; padding: 0 8px 10px; border-bottom: 1px solid #ECECF1; white-space: nowrap; }
.app-table th .tri { color: #B5B4C5; font-size: 10px; margin-left: 2px; }
.app-table th .i { width: 14px; height: 14px; color: #8C8BA0; }
.app-table td { padding: 0 8px; height: 45px; white-space: nowrap; transition: opacity .4s ease; }
.app-table .c-nom { width: 26%; }
.app-table .c-nom b { font-weight: 600; margin-right: 10px; }
.app .tag { text-transform: none; letter-spacing: 0; margin-bottom: 0;   /* la règle .tag du site ajoute 12 px dessous */ display: inline-block; font-size: 10.5px; font-weight: 600; border-radius: 4px; padding: 3px 7px; margin-right: 4px; vertical-align: 1px; }
.app .t-rouge { background: #FBE1E2; color: #C2283A; } .app .t-rose { background: #FBE6E6; color: #A83A3A; }
.app .t-lilas { background: #E7E6F7; color: #2E2462; } .app .t-violet { background: #E6D9F7; color: #4F2C86; }
.app .chip { display: inline-flex; align-items: center; gap: 3px; background: #E7E7F2; border-radius: 5px; padding: 3px 7px; color: #2E2462; }
.app .chip .i { width: 13px; height: 13px; } .app .chip b { margin-left: 3px; font-weight: 600; }
.app .tir b { font-size: 14px; font-weight: 700; } .app .tir small { font-size: 10px; margin-left: 2px; opacity: .8; }
.app .fl { margin-left: 10px; font-size: 14px; font-weight: 700; }
.app .tir-rouge { color: #E53344; } .app .tir-jaune { color: #B49B1E; } .app .tir-vert { color: #1E9E6A; } .app .tir-gris { color: #6E6D80; }
.app .ico-chip { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; margin-right: 5px; }
.app .ico-chip .i { width: 12px; height: 12px; }
.app .ico-chip.jaune { background: #FBF0C2; color: #9C7A10; } .app .ico-chip.gris { background: #E9E9EE; color: #55546A; }
.app .suivi { display: inline-flex; align-items: center; gap: 6px; background: #EFEFF6; border-radius: 99px; padding: 2px 9px 2px 2px; font-weight: 600; font-size: 12px; color: #2E2462; }
.app .suivi img, .app .av-moi { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; object-position: center 15%; }
.app .av-moi { display: grid; place-items: center; background: #E1E1EE; color: #2E2462; } .app .av-moi .i { width: 11px; height: 11px; }
.app .d-dt1 { background: #E6DBFA; color: #4F2C86; } .app .d-dt2 { background: #FBEFC9; color: #876712; } .app .d-dg { background: #FBDCE7; color: #A3285A; }
.app .d-gross { background: #FCE7EF; color: #A3285A; }
.app .p-stylo { background: #E6EDF8; color: #2E4A7D; } .app .p-pompe { background: #DDF2EE; color: #1F6B62; }
.app .p-stylo, .app .p-pompe { width: 22px; padding: 0; justify-content: center; }   /* pictogramme seul, carré comme « Patient signalé » */
.app .p-stylo .i, .app .p-pompe .i { width: 15px; height: 15px; }
/* Toutes les étiquettes du tableau à la même hauteur : celle de « Expirée récemment » (22 px), contenu centré (09/10/2026) */
.app .tag, .app .chip, .app .sig, .app .suivi { box-sizing: border-box; height: 22px; display: inline-flex; align-items: center; padding-top: 0; padding-bottom: 0; line-height: 1; vertical-align: top; }
/* Texte des cellules sur la même hauteur de ligne que les étiquettes (22 px) : le nom reste centré dans sa ligne, avec ou
   sans étiquette (sinon l'étiquette agrandissait la ligne de texte et remontait le nom de 4 px) */
.app .app-table td { line-height: 22px; }
.app .sig { width: 22px; justify-content: center; }
.app .sig .i { width: 13px; height: 13px; }
.app .suivi { padding-left: 2px; }
.app .sig { border-radius: 5px; background: #DCDCF6; color: #2E2462; }
.app th.trie .tri { color: #2E2462; font-weight: 700; }
.app tbody tr { transition: transform .9s cubic-bezier(.3, .7, .2, 1); }
.app .vu { display: inline-block; font-size: 11px; font-weight: 600; border-radius: 4px; padding: 4px 8px; }
.app .v-rouge { background: #FBE1E2; color: #C2283A; } .app .v-gris { background: #EEEEF1; color: #4A4960; } .app .v-vert { background: #DDF6EA; color: #1E7F55; }

/* Messages : la ligne visée reste nette, les autres s'estompent ; la cellule visée est cernée */
.app.focus tbody tr:not(.vise) td { opacity: .32; }
.app .cible { position: relative; }
.app .cible::after { content: ""; position: absolute; inset: 6px 0; border-radius: 8px; box-shadow: 0 0 0 2px var(--mint), 0 0 0 6px rgba(88,242,187,.25); pointer-events: none; }
.app th.cible::after { inset: -8px -10px 2px -10px; }   /* en-tête : cadre plus large que le texte, qui respire */
.imm-msg { position: absolute; z-index: 3; width: 320px; padding: 16px 20px; border-radius: 16px; background: rgba(255,255,255,.94); color: var(--navy); font-size: 17px; font-weight: 500; line-height: 1.4;
  box-shadow: 0 20px 50px rgba(29,43,109,.18), 0 0 0 1px rgba(29,43,109,.06); opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease; pointer-events: none; }
.imm-msg b { display: block; color: var(--navy); font-weight: 600; font-size: 17px; margin-bottom: 4px; }
.imm-msg.on { opacity: 1; transform: none; }
.imm-msg::after { content: ""; position: absolute; left: var(--fleche, 50%); bottom: -7px; width: 14px; height: 14px; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 3px; }
.imm-msg.dessous::after { bottom: auto; top: -7px; }
.imm-msg.gauche::after { left: auto; right: -7px; bottom: auto; top: var(--fleche, 22px); transform: translateY(-50%) rotate(45deg); }   /* à gauche de la cible : ne cache pas la colonne visée */

@media (max-width: 900px) {
  .immersion { height: auto; margin: 0; padding: 56px 0; }
  .imm-pin { position: static; height: auto; overflow: visible; }
  .imm-tete { position: static; margin-bottom: 24px; }
  .imm-ecran { position: relative; height: 560px; transform: none !important; border-radius: 16px !important; }
  .imm-msg { display: none; }
}

/* ---------- « Parlons-en ! » : encart de contact de la page Médecins (09/10/2026) ----------
   Verre clair de la page BFM Business (mêmes dégradés, sans backdrop-filter), carte de Tiphaine Nicoud à gauche.
   Grille à deux lignes : titre | texte, puis carte | formulaire ; la carte et les cases commencent à la même hauteur,
   et le message s'étire pour que le bas du bouton tombe au bas de la carte. Sert aussi dans la fenêtre « Recontactez-moi ». */
.contact.parlons { color: var(--navy); border: 1px solid rgba(255,255,255,.85); padding: 40px; column-gap: 36px; row-gap: 22px;
  grid-template-areas: "titre texte" "carte form"; grid-template-rows: auto 1fr; align-items: end;
  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); }
.modal-box.bare .contact.parlons { background-color: #F7F7FA; }   /* dans la fenêtre, le fond du site n'est pas derrière */
.contact.parlons h2 { grid-area: titre; color: var(--navy); margin: 0; }
.contact.parlons > p { grid-area: texte; color: var(--ink-2); margin: 0; }
.contact.parlons .parlons-carte { grid-area: carte; align-self: stretch; }
.contact.parlons .form { grid-area: form; align-self: stretch; grid-template-rows: auto auto 1fr auto; }
.contact.parlons .form input, .contact.parlons .form textarea { background: rgba(255,255,255,.62); border: 1px solid rgba(29,43,109,.12); color: var(--navy); }
.contact.parlons .form input::placeholder, .contact.parlons .form textarea::placeholder { color: var(--muted); }
.contact.parlons .form input:focus, .contact.parlons .form textarea:focus { outline: 2px solid rgba(43,166,129,.45); outline-offset: 1px; border-color: transparent; }
.contact.parlons .btn.cta { --g1: #4C6BD8; --g2: #1D2B6D; }
.contact.parlons .btn.cta:hover { --g1: #3F5CC8; --g2: #091759; }
.contact.parlons .form textarea { align-self: stretch; min-height: 96px; }
.contact.parlons .form-ok { grid-area: form; align-self: start; }
.contact.parlons .form-ok h3 { color: var(--navy); }
.contact.parlons .form-ok p { color: var(--ink-2); }
.contact.parlons .form-erreur { color: #B3261E; }
.parlons-carte { border-radius: 22px; padding: 30px 38px 28px; background: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 10px 30px rgba(29,43,109,.06); }
.parlons-qui { display: flex; align-items: center; gap: 22px; margin-bottom: 22px; }
.parlons-av { position: relative; width: 116px; height: 116px; flex: none; }
.parlons-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 30%; border: 3px solid #fff; box-shadow: 0 8px 20px rgba(29,43,109,.14); }
.parlons-av::before, .parlons-av::after { content: ""; position: absolute; right: 4px; bottom: 6px; width: 22px; height: 22px; border-radius: 50%; background: var(--mint); }
.parlons-av::after { border: 3px solid #fff; }
.parlons-av::before { animation: parlons-pouls 2.2s ease-out infinite; }   /* pastille « disponible » qui respire */
@keyframes parlons-pouls { from { transform: scale(1); opacity: .7; } to { transform: scale(2.6); opacity: 0; } }
.parlons-qui b { display: block; font-size: 22px; font-weight: 500; color: var(--navy); }
.parlons-qui small { color: var(--muted); font-size: 15px; }
.contact.parlons .parlons-citation { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.4; color: var(--navy); margin: 0; letter-spacing: -.01em; }
.parlons-citation::before { content: "«\00a0"; color: var(--green); }
.parlons-citation::after { content: "\00a0»"; color: var(--green); }
@media (prefers-reduced-motion: reduce) { .parlons-av::before { animation: none; opacity: 0; } }
@media (max-width: 980px) {
  .contact.parlons { grid-template-areas: "titre" "carte" "texte" "form"; grid-template-rows: none; padding: 32px 22px; }
  .parlons-carte { padding: 24px 22px; }
  .parlons-av { width: 88px; height: 88px; }
}

/* ---------- Téléphone (revue du 13/10/2026, étape 4) ----------
   Tout ce bloc ne s'applique que sous 760 px de large : l'ordinateur et la tablette ne bougent pas (vérifié par
   comparaison de la mise en page avant / après, à 1440, 1280, 1024 et 800 px). */
.nav .nav-login, .story-steps .step-illu { display: none; }
@media (max-width: 760px) {
  /* Menu : fond opaque (le titre de la page se lisait à travers), « Me connecter » dedans, ☰ qui devient ✕ */
  .nav { background: #FAFAFD; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 8px 22px 16px; }
  body.labs .nav { background: #0F1742; }
  .nav a { font-size: 18px; padding: 13px 0; border-bottom: 1px solid rgba(29,43,109,.08); }
  .nav a:last-child { border-bottom: 0; }
  body.labs .nav a { border-bottom-color: rgba(255,255,255,.1); }
  .nav .nav-login { display: block; }
  .burger { width: 44px; height: 44px; padding: 0; font-size: 24px; }

  /* Accueil Médecins : les deux cartes tiennent dans la largeur, sous le sous-titre ; « Découvrir » en dessous */
  .hero-vision { padding: 104px 0 120px; align-items: flex-start; }
  .hv-split { gap: 28px; }
  .hv-stage { transform: none; margin: 4px 0 44px; }
  .hv-sol { display: none; }
  .hv-dash { margin: 0 0 0 auto; width: 78%; padding: 16px 16px 12px; }
  .hv-who { padding-left: 0; margin-bottom: 12px; }
  .hv-kpis { gap: 10px; margin-bottom: 12px; }
  .hv-kpi { padding: 10px 12px; }
  .hv-kpi .v { font-size: 22px; }
  .hv-msg { left: 0; top: auto; bottom: -40px; width: 82%; padding: 13px 15px; }
  .hv-msg p { font-size: 13.5px; }

  /* « Vos patients accompagnés en continu » : la photo au-dessus du texte (elle était écrasée en bande étroite) */
  .split.illu { grid-template-columns: 1fr; gap: 40px; }
  .illu-frame { min-height: 0; height: 400px; max-width: 280px; }
  .illu-frame .glyc { width: 170px; left: -34px; }
  .illu-frame .hba1c { width: 126px; right: -34px; bottom: 6%; }
  .split.illu .btn { white-space: nowrap; }

  /* « Concentrez-vous sur l'essentiel » : retirée sur téléphone (le tableau de l'écran produit ne tient pas) */
  .immersion { display: none; }

  /* Récits en trois temps : l'illustration de chaque étape sous son titre et son texte, sans les grands vides */
  .story-steps .step, .story-steps .step:first-child, .story-steps .step:last-child { margin: 0; padding: 22px 0; }
  .story-steps .step-illu { display: block; position: relative; height: 260px; margin: 20px 0 0; border-radius: 24px; overflow: hidden; }
  .story-steps .step-illu .scene { position: absolute; inset: 18px; width: calc(100% - 36px); height: calc(100% - 36px); }
  body.labs .story-steps .step-illu { background: none; box-shadow: none; border: 0; }

  /* Bandeau des dispositifs : le titre hors du fondu des bords */
  .marquee { margin: 56px 0; }
  .marquee-title { padding: 0 44px; font-size: 12px; letter-spacing: .06em; line-height: 1.5; }

  /* Schéma « Extraire le signal clinique » (Labs) : version de haut en bas, dessinée par labs.html */
  .fusion { padding: 14px 8px; border-radius: 24px; }

  /* Conseil scientifique : photo à gauche, nom et texte à droite, au lieu de quatre portraits pleine largeur */
  .advisors { grid-template-columns: 1fr; gap: 30px; }
  .advisor { display: grid; grid-template-columns: 104px 1fr; column-gap: 16px; align-items: start; }
  .advisor-photo { grid-row: span 2; border-radius: 16px; }
  .advisor h3 { margin: 0 0 6px; font-size: 18px; }
  .advisor p { font-size: 14px; }

  /* Espaces entre sections : 88 px au lieu de 112 à 144 */
  section { padding: 44px 0; }
  section.last { padding-bottom: 88px; }

  /* Accueil Patients (15/10/2026) : marges resserrées pour que texte, photo et « Découvrir » tiennent dans l'écran */
  .hero-patient { padding: 92px 0 88px; }
  .hero-patient .split { gap: 22px; }
  .hero-patient h1 { margin-bottom: .4em; }
  .hero-patient .scroll-cue { bottom: 22px; }

  /* Pied de page (15/10/2026) : logo sur toute la largeur, puis « Le site » et « Légales » côte à côte, puis « Suivre Stēto » */
  .site-footer .top { display: grid; grid-template-columns: 1fr 1.4fr; gap: 32px 20px; }
  .site-footer .top > div:first-child, .site-footer .top > div:nth-child(4) { grid-column: 1 / -1; }

  /* Détails */
  .modal-box h2 { padding-right: 48px; }
}

/* ---------- Accessibilité (étape 6 de la revue) ----------
   Rien de visible à la souris. « Aller au contenu » n'apparaît que lorsqu'on arrive dessus avec la touche Tab. */
.aller-contenu { position: fixed; left: 16px; top: 12px; z-index: 300; padding: 10px 18px; border-radius: 99px; background: var(--navy);
  color: #fff; font-weight: 600; text-decoration: none; transform: translateY(-160%); }
.aller-contenu:focus { transform: none; outline: 2px solid var(--mint); outline-offset: 2px; }
.modal-box:focus { outline: none; }   /* la fenêtre reçoit le curseur clavier à l'ouverture, sans repère visible */
/* Pages Patients et À propos : trois garanties (« Remboursé à 100% » retiré le 20/10/2026) */
@media (min-width: 761px) { body[data-page="patients"] .guarantees, body[data-page="apropos"] .guarantees { grid-template-columns: repeat(3, 1fr); } }
/* Mentions réglementaires (20/10/2026) : sous la FAQ Patients (demande QARA) et sous les projets de Stēto Labs */
.faq-conseil { max-width: 820px; margin: 22px auto 0; padding: 0 24px; text-align: left; font-size: 15px; color: var(--muted); }   /* alignée sur le texte des questions (Vincent, 20/10/2026) */
.labs-mention { margin: 28px 0 0; font-size: 14px; line-height: 1.5; color: #B7BEE2; opacity: .85; }