/* Geometrico Bold — LA typo du logo (FSdesign Filippo Salmina, 2016).
       Vérifié en superposant au masque du wordmark : les lettres correspondent,
       seul le croissant est un ajout dessiné. Contrairement à l'ExtraLight
       ci-dessous, elle a tous les accents (é è ê à ç) et l'apostrophe.
       Sous-ensemblée aux 16 caractères de .hero-brandline : 101 Ko -> 2,4 Ko.
       Refaire le subset (pyftsubset --text=…) si on l'emploie sur d'autres mots. */
    @font-face {
      font-family: 'Geometrico';
      src: url('../fonts/Geometrico-Bold.woff2') format('woff2'),
           url('../fonts/Geometrico-Bold.ttf') format('truetype');
      font-weight: 700;
      font-style: normal;
      font-display: swap;
    }
    /* ⚠️ Geometrico ExtraLight — AUTRE fonte, qui partage seulement le nom
       (Fontself/« Dreamstale », pas FSdesign) : chasse 15 % plus large, aucun
       accent, dessin différent. Ce n'est pas la typo du logo, et plus rien ne
       l'utilise depuis que le wordmark est passé en masques PNG. Conservée telle
       quelle (code mort préexistant, pas à nous de trancher), mais repondérée à
       200 — son vrai poids — pour qu'elle n'intercepte plus le 700 du Bold :
       elle était déclarée « 400 900 », ce qui rendait tout font-weight inopérant. */
    @font-face {
      font-family: 'Geometrico';
      src: url('../fonts/Geometrico.woff2') format('woff2'),
           url('../fonts/Geometrico.otf') format('opentype');
      font-weight: 200;
      font-style: normal;
      font-display: swap;
    }
    :root {
      --navy-deep: #1E3A5F;
      --navy-medium: #2D5A80;
      --navy-soft: #4A7BA7;
      --navy-shell: #162D46;
      /* Le header en verre. Le plancher de contraste vient de la TEINTE, pas du
         flou : backdrop-filter floute, il ne fonce pas. À 72 % de --navy-shell,
         le pire cas imaginable (une photo blanche qui défile dessous) compose à
         rgb(87,104,122), soit 5,7:1 pour le texte blanc — au-dessus des 4,5:1.
         Corollaire : si backdrop-filter n'est pas supporté, on perd le flou mais
         jamais la lisibilité. Baisser cette valeur se paie en contraste (0.65
         tombe à 4,6:1, la marge disparaît). */
      --navy-glass: rgba(22, 45, 70, .72);
      --navy-ink: #0F2138;
      --orange-action: #E07B39;
      --orange-action-h: #D96A26;
      --orange-ink: #AD5117;      /* orange lisible en texte : 5.3:1 sur blanc, 4.7:1 sur crème ; l'orange-action (2.97:1) reste réservé aux aplats et décors. Même logique pour le dégradé des boutons orange : #9E4712/#BA5A1E gardent le blanc à 6.2/4.6:1 (l'ancien stop #F5A66E tombait à 2:1) */
      --gold-accent: #D4A84A;
      --gold-warm: #7B5912;
      --gold-deep: #A5822A;
      --teal-success: #2D9B7B;
      --teal-deep: #1D7A60;   /* le vert qui porte le blanc (≈ 5:1) — fonds pleins (cartes formation) */
      --gray-surface: #E8EEF2;
      --gray-warm: #F4F1EC;
      --border-subtle: #D9E2EA;
      --neutral-fg: #1E3A5F;
      --neutral-bg: #FFFFFF;
      --muted-fg: #2D5A80;
      --font: 'Inter Tight', 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
      --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
      --font-mono: 'DM Mono', 'SF Mono', ui-monospace, Menlo, monospace;
      /* Gamme de corps (lot design typo 2026-07-19) : 4 crans sous la base 16px.
         Toute nouvelle taille < 16px prend un de ces tokens. Exceptions qui
         restent en px : compression vue unique (body:has(.oneview…)), scatter
         équipe (.js-scatter), couche morte. */
      --text-micro: 11px;     /* micro-étiquettes mono uppercase, badges, nav */
      --text-meta: 12.5px;    /* méta, légendes, contrôles UI, eyebrows de section */
      --text-corps: 14px;     /* corps des composants et boutons */
      --text-confort: 15.5px; /* corps confort, ledes de section */
      --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-2xl: 16px; --radius-full: 9999px;
      --hero-img: url('../images/hero.webp');
      --decor-img: url('../images/decor.webp');
    }
    @media (max-width: 768px) {
      :root {
        --hero-img: url('../images/hero-mobile.webp');
        --decor-img: url('../images/decor-mobile.webp');
      }
    }
    *, *::before, *::after { box-sizing: border-box; }
    /* [hidden] doit TOUJOURS gagner (2026-08-20, bug du voile écran 4 en
       prod) : une règle de classe posant display (ex. .pp-verrou-voile
       { display: flex }) écrase sinon le display: none UA de l'attribut,
       et l'élément « caché » reste à l'écran. */
    [hidden] { display: none !important; }
    html { scroll-behavior: smooth; scroll-padding-top: 96px; }
    /* Lenis smooth scroll — Lenis ajoute .lenis-smooth sur <html> dès qu'il est actif */
    html.lenis, html.lenis body { height: auto; }
    html.lenis.lenis-smooth { scroll-behavior: auto !important; }
    html.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
    html.lenis.lenis-stopped { overflow: clip; }
    html.lenis.lenis-smooth iframe { pointer-events: none; }
    body {
      margin: 0;
      font-family: var(--font);
      font-size: 16px;
      line-height: 1.5;
      color: var(--neutral-fg);
      background: var(--neutral-bg);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; color: inherit; cursor: pointer; }

    /* SKIP LINK (a11y) — visible only on keyboard focus */
    .skip-link {
      position: fixed; top: 12px; left: 12px; z-index: 100;
      padding: 10px 16px; background: var(--navy-deep); color: white;
      border-radius: 8px; font-weight: 600; font-size: var(--text-corps);
      transform: translateY(-200%); transition: transform 180ms ease-out;
    }
    .skip-link:focus { transform: translateY(0); outline: 3px solid var(--gold-accent); outline-offset: 2px; }

    /* Improved focus visible for keyboard users */
    a:focus-visible, button:focus-visible {
      outline: 3px solid var(--gold-accent);
      outline-offset: 3px;
      border-radius: 4px;
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
      .hero-bg { transform: none; animation: none; }
    }
    img, svg { display: block; max-width: 100%; }
    h1, h2, h3, h4, p, ul, ol { margin: 0; padding: 0; }
    ul, ol { list-style: none; }
    .label { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-fg); }
    .mono { font-family: var(--font-mono); font-feature-settings: 'tnum' on; }
    .container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
    .container-wide { max-width: 1380px; margin: 0 auto; padding: 0 24px; }

    /* BUTTONS */
    .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 22px; border-radius: var(--radius-full); font-weight: 600; font-size: var(--text-corps); border: none; outline: 2px solid transparent; outline-offset: 2px; transition: background 220ms ease-out, color 220ms ease-out, border-color 220ms ease-out, transform 120ms ease-out, box-shadow 220ms ease-out, outline-color 180ms ease-out; min-height: 44px; letter-spacing: -0.005em; cursor: pointer; }
    .btn:disabled { opacity: .55; cursor: not-allowed; }
    .btn:active { transform: translateY(1px); }
    .btn:focus-visible { box-shadow: 0 0 0 3px rgba(224, 123, 57, 0.4); }
    .btn-primary {
      color: white;
      background-image: linear-gradient(325deg, #9E4712 0%, #BA5A1E 55%, #9E4712 90%);
      background-size: 280% auto;
      background-position: 0% 50%;
      box-shadow: 0 0 20px rgba(224, 123, 57, 0.45), 0 5px 5px -1px rgba(196, 93, 31, 0.28), inset 4px 4px 8px rgba(255, 200, 150, 0.45), inset -4px -4px 8px rgba(180, 70, 20, 0.35);
      transition: background-position 700ms ease, transform 120ms ease-out, box-shadow 220ms ease-out;
    }
    .btn-primary:hover { background-position: 100% 0%; box-shadow: 0 0 24px rgba(224, 123, 57, 0.6), 0 6px 8px -1px rgba(196, 93, 31, 0.32), inset 4px 4px 8px rgba(255, 200, 150, 0.55), inset -4px -4px 8px rgba(180, 70, 20, 0.4); }
    .btn-primary:focus-visible { box-shadow: 0 0 0 3px rgba(224, 123, 57, 0.5), 0 0 20px rgba(224, 123, 57, 0.45), inset 4px 4px 8px rgba(255, 200, 150, 0.45), inset -4px -4px 8px rgba(180, 70, 20, 0.35); }
    .btn-light { background: white; color: var(--navy-deep); }
    .btn-light:hover { background: var(--gray-surface); }
    .btn-ghost-light { position: relative; overflow: hidden; isolation: isolate; background: rgba(255,255,255,0.04); color: white; border: 1px solid rgba(255,255,255,0.32); text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px; font-weight: 700; padding: 14px 22px; transition: background 320ms ease-in, color 320ms ease-in, border-color 320ms ease-in, box-shadow 320ms ease-in, transform 120ms ease-out; }
    .btn-ghost-light::before { content: ''; position: absolute; top: 7%; left: -120%; width: 30%; height: 86%; background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.85) 50%, transparent 100%); transform: skewX(-20deg); filter: blur(6px); opacity: 0; transition: opacity 0ms; pointer-events: none; z-index: 1; }
    .btn-ghost-light:hover { background: var(--gold-accent); color: var(--navy-deep); border-color: var(--gold-accent); box-shadow: 0 0 30px 5px rgba(212, 168, 74, 0.55), 0 0 60px 10px rgba(212, 168, 74, 0.18); }
    .btn-ghost-light:hover::before { animation: btn-shine 900ms ease-out forwards; opacity: 1; }
    .btn-ghost-light:active { transform: translateY(1px); box-shadow: 0 0 12px rgba(212, 168, 74, 0.4); }
    .btn-ghost-light:focus-visible { box-shadow: 0 0 0 3px rgba(212, 168, 74, 0.45); }
    .btn-ghost-light > * { position: relative; z-index: 2; }
    @keyframes btn-shine { from { left: -120%; } to { left: 120%; } }
    .btn-outline { position: relative; overflow: hidden; isolation: isolate; background: transparent; color: var(--navy-deep); border: 1px solid var(--navy-deep); text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px; font-weight: 700; padding: 14px 22px; transition: background 320ms ease-in, color 320ms ease-in, box-shadow 320ms ease-in, transform 120ms ease-out; }
    .btn-outline::before { content: ''; position: absolute; top: 7%; left: -120%; width: 30%; height: 86%; background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.95) 50%, transparent 100%); transform: skewX(-20deg); filter: blur(6px); opacity: 0; pointer-events: none; z-index: 1; }
    .btn-outline:hover { background: var(--navy-deep); color: white; box-shadow: 0 0 30px 5px rgba(30, 58, 95, 0.4), 0 0 60px 10px rgba(30, 58, 95, 0.14); }
    .btn-outline:hover::before { animation: btn-shine 900ms ease-out forwards; opacity: 1; }
    .btn-outline:active { transform: translateY(1px); box-shadow: 0 0 12px rgba(30, 58, 95, 0.3); }
    .btn-outline > * { position: relative; z-index: 2; }
    .btn svg { width: 16px; height: 16px; }

    /* TOP NAV */
    /* Verre CLAIR, sans teinte, et un seul état (rev Loïc 2026-07-17). Avant, le
       header sautait de transparent+encre navy à navy plein+texte blanc à 60px de
       scroll : deux changements d'un coup, et ça claquait.
       Ici un voile crème à 42 % seulement : invisible sur les aplats crème (le
       header disparaît dans la page, c'est voulu), mais il garde le wordmark navy
       lisible quand un bloc navy défile dessous (4.4:1 mesuré sur navy-deep pur ;
       transparent intégral, la marque tombait à ~1:1 sur portfolio et demandes).
       Ce qui rend ça tenable : le site est clair sur 20 pages sur 21, donc l'encre
       navy (plus bas) est la règle et non l'exception. Seul le monde partenaire,
       dont le hero est navy, garde une teinte. */
    .topnav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 12px 0;
      background: rgba(244, 241, 236, 0.42);
      backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%);
      border-bottom: 1px solid rgba(15,33,56,0.08); }
    .topnav-inner { display: flex; align-items: center; gap: 32px; }
    .nav-brand { display: inline-flex; align-items: center; gap: 12px; color: white; font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
    .nav-brand .nb-mark { width: 34px; height: 34px; border-radius: 9px; background: var(--orange-action); display: grid; place-items: center; color: white; font-weight: 700; font-size: 16px; box-shadow: inset 0 -8px 14px rgba(0,0,0,0.18); }
    .nav-brand .nb-text .n { display: block; line-height: 1; }
    .nav-brand .nb-text .t { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.72); margin-top: 4px; }
    .nav-links { display: flex; gap: 10px; align-items: center; margin-left: auto; }
    .nav-link {
      position: relative; overflow: hidden; display: inline-flex; align-items: center;
      color: rgba(255,255,255,0.85); padding: 9px 16px; font-size: var(--text-micro); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
      white-space: nowrap;
      border-radius: 6px; border: 1px solid rgba(255,255,255,0.22); background: transparent;
      transition: background 280ms ease-out, color 280ms ease-out, border-color 280ms ease-out, box-shadow 280ms ease-out;
    }
    .nav-link::before {
      content: ''; position: absolute; top: 8%; bottom: 8%; left: -120%; width: 30%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.85), transparent);
      transform: skewX(-22deg); filter: blur(2px); opacity: 0; pointer-events: none;
      transition: left 900ms ease, opacity 200ms ease-out;
    }
    .nav-link:hover {
      color: var(--navy-deep); background: rgba(255,255,255,0.92); border-color: rgba(255,255,255,0.92);
      box-shadow: 0 0 24px rgba(255,255,255,0.32), 0 0 4px rgba(255,255,255,0.5);
    }
    .nav-link:hover::before { left: 120%; opacity: 1; }
    .nav-link:active { box-shadow: none; transform: translateY(1px); }
    .nav-cta {
      display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; color: white; border-radius: 999px; font-weight: 600; font-size: var(--text-corps);
      white-space: nowrap;
      background-image: linear-gradient(325deg, #9E4712 0%, #BA5A1E 55%, #9E4712 90%);
      background-size: 280% auto;
      background-position: 0% 50%;
      box-shadow: 0 0 16px rgba(224, 123, 57, 0.4), 0 4px 4px -1px rgba(196, 93, 31, 0.25), inset 3px 3px 6px rgba(255, 200, 150, 0.45), inset -3px -3px 6px rgba(180, 70, 20, 0.32);
      transition: background-position 700ms ease, transform 120ms ease-out, box-shadow 220ms ease-out;
    }
    .nav-cta:hover { background-position: 100% 0%; box-shadow: 0 0 20px rgba(224, 123, 57, 0.55), 0 5px 6px -1px rgba(196, 93, 31, 0.3), inset 3px 3px 6px rgba(255, 200, 150, 0.55), inset -3px -3px 6px rgba(180, 70, 20, 0.38); }
    .nav-cta:active { transform: translateY(1px); }
    .nav-cta svg { width: 14px; height: 14px; }
    /* Burger — ouvre le menu déroulant mobile (≤1024px). Masqué en desktop. */
    .nav-burger { display: none; margin-left: auto; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .nav-burger-lines { position: relative; display: block; width: 22px; height: 2px; border-radius: 2px; background: currentColor; transition: background 160ms ease; }
    .nav-burger-lines::before, .nav-burger-lines::after { content: ''; position: absolute; left: 0; width: 22px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 240ms ease; }
    .nav-burger-lines::before { top: -7px; }
    .nav-burger-lines::after { top: 7px; }
    .nav-burger[aria-expanded="true"] .nav-burger-lines { background: transparent; }
    .nav-burger[aria-expanded="true"] .nav-burger-lines::before { transform: translateY(7px) rotate(45deg); }
    .nav-burger[aria-expanded="true"] .nav-burger-lines::after { transform: translateY(-7px) rotate(-45deg); }
    /* 1025-1200px : 6 pilules + CTA tiennent sur une seule ligne — encre compactée */
    @media (max-width: 1200px) {
      .nav-links { gap: 8px; }
      .nav-link { padding: 9px 12px; font-size: var(--text-micro); letter-spacing: 0.1em; }
    }
    /* ≤1024px : nav repliée dans un panneau déroulant (burger). Les 3 liens + le
       CTA « Nos solutions » s'empilent dans une carte navy ancrée sous la barre. */
    @media (max-width: 1024px) {
      .nav-burger { display: inline-flex; }
      .topnav-inner { position: relative; }
      .nav-links {
        position: absolute; top: calc(100% + 10px); right: 0; left: auto;
        margin-left: 0; width: max-content; min-width: 250px; max-width: calc(100vw - 32px);
        flex-direction: column; align-items: stretch; gap: 6px;
        padding: 10px; border-radius: 16px;
        background: var(--navy-shell); border: 1px solid rgba(255,255,255,0.10);
        box-shadow: 0 26px 50px -20px rgba(0,0,0,0.6);
        opacity: 0; visibility: hidden; transform: translateY(-10px) scale(0.97);
        transform-origin: top right;
        transition: opacity 220ms ease, transform 220ms ease, visibility 220ms;
      }
      .nav-links.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
      .nav-links .nav-link {
        display: flex; width: 100%; justify-content: flex-start;
        padding: 13px 14px; font-size: var(--text-micro); letter-spacing: 0.1em;
        color: rgba(255,255,255,0.9); border-color: transparent; border-radius: 10px;
      }
      .nav-links .nav-link:hover { color: #fff; background: rgba(255,255,255,0.08); border-color: transparent; box-shadow: none; }
      .nav-links .nav-cta { width: 100%; justify-content: center; margin-top: 4px; padding: 14px 18px; font-size: var(--text-corps); }
    }

    /* HERO — remplacé par le hero fireside (.hero-fs, en fin de feuille) */
    .hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.92); width: fit-content; }
    .hero-eyebrow .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--gold-accent); box-shadow: 0 0 0 3px rgba(212, 168, 74, 0.18); }
    .hero-eyebrow .star { width: 13px; height: 13px; color: var(--gold-accent); fill: var(--gold-accent); }

    /* BRAND WORDMARK — logo texte statique « anesth·é·a » : disque orange
       derrière le a + masque couleur de fond par-dessus = croissant.
       Tout est posé en pur CSS (aucun JS), donc le logo suit la taille du
       wordmark à tous les viewports. */
    .nav-brand { gap: 0; position: relative; align-items: center; display: inline-flex; }
    /* Logo « anesth·é·a » — masques CSS générés depuis le logo source client
       (assets/images/wm-base.png = anesth+a, wm-accent.png = é+demi-lune).
       Typo d'origine (Geometrico) conservée. Le texte prend la couleur
       courante (blanc sur navy, navy sur header clair) ; l'é et la demi-lune
       restent en or plat. */
    .brand-wordmark {
      display: inline-block;
      position: relative;
      width: 168px;
      aspect-ratio: 318 / 74;
      color: #fff;
      user-select: none;
    }
    .brand-wordmark .bl-base,
    .brand-wordmark .bl-accent {
      content: "";
      position: absolute;
      inset: 0;
      -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
      -webkit-mask-position: center; mask-position: center;
      -webkit-mask-size: contain; mask-size: contain;
    }
    .brand-wordmark .bl-base {
      background: currentColor;
      -webkit-mask-image: url(/assets/images/wm-base.png?v=97);
      mask-image: url(/assets/images/wm-base.png?v=97);
      transition: background 280ms ease-out;
    }
    .brand-wordmark .bl-accent {
      background: var(--gold-deep); /* même or que les titres italiques .accent-i */
      -webkit-mask-image: url(/assets/images/wm-accent.png?v=97);
      mask-image: url(/assets/images/wm-accent.png?v=97);
    }
    /* (styles hero-h1/sub/cta/trust retirés avec l'ancien hero) */

    /* HERO RIGHT — glassmorphic cards on photo + navy gradient (marketing surface, not the app) */
    .hero-right { display: flex; flex-direction: column; gap: 16px; padding-top: 28px; }
    .stats-card { background: rgba(255,255,255,0.06); backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%); border: 1px solid rgba(255,255,255,0.14); border-radius: 24px; padding: 28px; color: white; box-shadow: 0 24px 48px -16px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08); position: relative; overflow: hidden; }
    .stats-card::before { content: ''; position: absolute; top: -100px; right: -100px; width: 260px; height: 260px; border-radius: 999px; background: radial-gradient(closest-side, rgba(212, 168, 74, 0.32), transparent 70%); filter: blur(8px); pointer-events: none; }
    .stats-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(155deg, rgba(255,255,255,0.05) 0%, transparent 40%); pointer-events: none; border-radius: inherit; }
    .stats-card > * { position: relative; z-index: 1; }
    .stats-head { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
    .stats-head .ic { width: 52px; height: 52px; border-radius: 14px; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.18); color: white; display: grid; place-items: center; }
    .stats-head .ic svg { width: 22px; height: 22px; }
    .stats-head .num { font-weight: 700; font-size: 34px; letter-spacing: -0.02em; line-height: 1; color: white; }
    .stats-head .lbl { font-size: 13px; color: rgba(255,255,255,0.6); margin-top: 4px; font-weight: 500; }
    .stats-bar { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
    .stats-bar-row { display: flex; justify-content: space-between; align-items: baseline; }
    .stats-bar-row .k { font-size: 13px; color: rgba(255,255,255,0.6); }
    .stats-bar-row .v { font-family: var(--font-mono); font-weight: 600; font-size: 14px; color: white; }
    .stats-bar-track { position: relative; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; }
    .stats-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, var(--gold-accent), #E5C171); box-shadow: 0 0 12px rgba(212, 168, 74, 0.5); transform-origin: left; animation: bar-grow 1.4s 300ms cubic-bezier(.22,.7,.18,1) both; }
    @keyframes bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    .stats-divider { height: 1px; background: rgba(255,255,255,0.1); margin: 4px 0 20px; }
    .stats-mini { display: grid; grid-template-columns: 1fr 1px 1fr 1px 1fr; gap: 8px; align-items: center; }
    .stat-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 0; }
    .stat-item .v { font-weight: 700; font-size: 18px; letter-spacing: -0.01em; color: white; font-family: var(--font-mono); font-feature-settings: 'tnum' on; }
    .stat-item .k { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.72); }
    .stats-mini .vline { background: rgba(255,255,255,0.1); width: 1px; height: 36px; align-self: center; }
    .stats-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
    .stat-tag { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.14); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: rgba(255,255,255,0.92); }
    .stat-tag .pulse { position: relative; display: inline-flex; width: 8px; height: 8px; }
    .stat-tag .pulse::before { content: ''; position: absolute; inset: 0; border-radius: 999px; background: var(--teal-success); opacity: 0.6; animation: pulse-grow 1.6s ease-in-out infinite; animation-play-state: var(--pulse-state, running); }
    .stat-tag .pulse::after { content: ''; position: absolute; inset: 1px; border-radius: 999px; background: var(--teal-success); }
    @keyframes pulse-grow { 0%,100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.6); opacity: 0; } }
    .stat-tag svg { width: 11px; height: 11px; color: var(--gold-accent); }

    /* MARQUEE CARD */
    .marq-card { background: rgba(255,255,255,0.05); backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%); border: 1px solid rgba(255,255,255,0.12); border-radius: 24px; padding: 24px 0; box-shadow: 0 18px 36px -16px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06); position: relative; overflow: hidden; }
    .marq-head { display: flex; justify-content: space-between; align-items: center; padding: 0 26px 16px; }
    .marq-head .lbl { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.72); }
    .marq-head .meta { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(255,255,255,0.6); font-weight: 500; }
    .marq-head .meta .pip { width: 6px; height: 6px; border-radius: 999px; background: var(--gold-accent); box-shadow: 0 0 8px rgba(212, 168, 74, 0.6); }
    .marq-track-wrap { position: relative; mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent); }
    .marq-track { display: flex; gap: 36px; padding: 4px 24px; white-space: nowrap; animation: marq-roll 32s linear infinite; }
    @keyframes marq-roll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
    .marq-track:hover { animation-play-state: paused; }
    .marq-item { display: inline-flex; align-items: center; gap: 10px; color: rgba(255,255,255,0.92); transition: opacity 220ms ease-out; opacity: 0.78; }
    .marq-item:hover { opacity: 1; }
    .marq-item .pin { width: 28px; height: 28px; border-radius: 8px; background: rgba(255,255,255,0.12); color: var(--gold-accent); display: grid; place-items: center; border: 1px solid rgba(255,255,255,0.14); }
    .marq-item .pin svg { width: 14px; height: 14px; }
    .marq-item .city { font-weight: 700; font-size: 15px; letter-spacing: -0.005em; color: white; }
    .marq-item .canton { font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,0.7); margin-left: 4px; }

    /* TILT 3D (hover) */
    .tilt-3d { transform-style: preserve-3d; transition: transform 360ms cubic-bezier(.22,.7,.18,1); will-change: transform; }

    /* SCROLL EXPAND */
    .se { position: relative; background: var(--navy-ink); color: white; }
    .se::before { content: ''; position: absolute; inset: 0; background: radial-gradient(900px 600px at 50% 20%, rgba(74, 123, 167, 0.32), transparent 60%); pointer-events: none; }
    .se-track { position: relative; height: 240vh; }
    .se-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; }
    .se-bg { position: absolute; inset: 0; background-image: var(--decor-img); background-size: cover; background-position: center 28%; opacity: 0.62; transition: opacity 200ms ease-out; will-change: opacity; }
    .se-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 33, 56, 0.5) 0%, rgba(15, 33, 56, 0.72) 60%, rgba(15, 33, 56, 0.85) 100%); }
    .se-content { position: relative; z-index: 2; width: 100%; max-width: 1380px; padding: 0 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; }
    .se-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.68); }
    .se-eyebrow .bar { width: 28px; height: 1px; background: rgba(255,255,255,0.4); }
    .se-titles { position: relative; display: flex; align-items: center; justify-content: center; gap: 32px; flex-wrap: wrap; width: 100%; }
    .se-title { font-weight: 700; font-size: clamp(54px, 9vw, 132px); line-height: 0.92; letter-spacing: -0.035em; color: white; transition: transform 100ms linear; will-change: transform; }
    .se-title.right { color: var(--gold-accent); font-style: italic; font-weight: 500; }
    .se-media-wrap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; will-change: width, height; transition: box-shadow 300ms ease-out; box-shadow: 0 30px 80px -16px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06); border-radius: 18px; overflow: hidden; }
    .se-media { width: 100%; height: 100%; position: relative; background: linear-gradient(155deg, var(--navy-medium) 0%, var(--navy-deep) 50%, var(--navy-ink) 100%); display: grid; place-items: center; color: rgba(255,255,255,0.85); }
    .se-media::before { content: ''; position: absolute; inset: 0; background-image: var(--decor-img); background-size: cover; background-position: center 28%; opacity: 0.92; z-index: 0; }
    .se-media::after { content: ''; position: absolute; inset: 0; background: radial-gradient(closest-side, rgba(15, 33, 56, 0.05) 30%, rgba(15, 33, 56, 0.55) 100%); z-index: 1; }
    .se-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: 0; transition: opacity 600ms ease-out; transform: scale(1.18); transform-origin: center center; }
    .se-video.is-ready { opacity: 1; }
    .se-media.has-video::before { display: none; }
    .se-play { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 14px; transition: opacity 400ms ease-out; }
    .se-media.has-video .se-play { opacity: 0; pointer-events: none; }
    .se-play-circle { width: 84px; height: 84px; border-radius: 999px; background: var(--orange-action); color: white; display: grid; place-items: center; box-shadow: 0 0 0 8px rgba(224, 123, 57, 0.18), 0 0 0 22px rgba(224, 123, 57, 0.08); transition: transform 220ms ease-out, box-shadow 220ms ease-out; cursor: pointer; }
    .se-play-circle:hover { transform: scale(1.04); box-shadow: 0 0 0 8px rgba(224, 123, 57, 0.28), 0 0 0 28px rgba(224, 123, 57, 0.12); }
    .se-play-circle svg { width: 30px; height: 30px; transform: translateX(2px); }
    .se-play-meta { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.78); display: flex; flex-direction: column; align-items: center; gap: 4px; text-shadow: 0 1px 4px rgba(0,0,0,0.3); }
    .se-play-meta .small { font-size: 11px; font-weight: 500; color: rgba(255,255,255,0.72); letter-spacing: 0.1em; }
    .se-cue { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.72); display: inline-flex; align-items: center; gap: 8px; transition: opacity 240ms ease-out; }
    .se-cue::after { content: ''; width: 1px; height: 28px; background: linear-gradient(to bottom, rgba(255,255,255,0.5), transparent); animation: cue-drop 1.6s ease-in-out infinite; }
    @keyframes cue-drop { 0%,100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(6px); opacity: 0.4; } }

    /* SECTIONS */
    .section { padding: 96px 0; }
    .section-eyebrow { display: inline-flex; font-family: var(--font-mono); align-items: center; gap: 10px; font-size: var(--text-meta); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-fg); margin-bottom: 18px; }
    .section-eyebrow .bar { width: 28px; height: 1px; background: var(--border-subtle); }
    .section-eyebrow .gold { color: var(--gold-warm); }
    .section h2.section-title { font-weight: 700; font-size: clamp(34px, 4.4vw, 56px); line-height: 1.05; letter-spacing: -0.025em; color: var(--navy-deep); margin-bottom: 22px; max-width: 22ch; }
    .section .section-lede { font-size: 18px; line-height: 1.55; color: var(--muted-fg); max-width: 60ch; }
    .section .section-lede strong { color: var(--navy-deep); font-weight: 600; }

    /* SCROLL REVEAL — applied via JS to titles, ledes, cards & rows */
    .reveal { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 820ms cubic-bezier(.16,.84,.24,1), transform 820ms cubic-bezier(.16,.84,.24,1); will-change: opacity, transform; }
    .reveal.is-visible { opacity: 1; transform: translate3d(0, 0, 0); }
    @media (prefers-reduced-motion: reduce) {
      .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    }

    /* QUOTE */
    .quote { background: var(--gray-warm); position: relative; }
    .quote-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 64px; align-items: center; }
    .quote-mark { display: block; font-family: var(--font); font-weight: 700; font-size: 156px; line-height: 0.6; color: var(--gold-accent); opacity: 0.85; margin-bottom: -8px; letter-spacing: -0.06em; }
    .quote-body { font-weight: 500; font-size: clamp(28px, 3vw, 40px); line-height: 1.18; letter-spacing: -0.018em; color: var(--navy-deep); }
    .quote-body em { font-family: var(--font); font-style: normal; font-weight: 600; color: var(--gold-warm); border-bottom: 2px solid rgba(212, 168, 74, 0.32); padding-bottom: 1px; }
    .quote-attr { display: flex; align-items: center; gap: 14px; margin-top: 36px; }
    .quote-attr .av { width: 48px; height: 48px; border-radius: 999px; background: linear-gradient(135deg, var(--navy-soft), var(--navy-medium)); color: white; font-weight: 700; font-size: 16px; display: grid; place-items: center; letter-spacing: 0.02em; }
    .quote-attr .meta { display: flex; flex-direction: column; gap: 2px; }
    .quote-attr .meta .name { font-weight: 700; font-size: 15px; color: var(--navy-deep); }
    .quote-attr .meta .name .amp { font-weight: 500; color: var(--gold-warm); }
    .quote-attr .meta .role { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--muted-fg); }
    .quote-side { display: flex; flex-direction: column; gap: 12px; padding: 28px 32px; background: white; border-radius: 18px; box-shadow: 0 0 0 1px rgba(15, 33, 56, 0.06), 0 18px 36px -18px rgba(15, 33, 56, 0.25); }
    .qs-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border-subtle); }
    .qs-row:last-child { border-bottom: none; padding-bottom: 0; }
    .qs-row:first-child { padding-top: 0; }
    .qs-row .ic { width: 36px; height: 36px; border-radius: 10px; background: rgba(224, 123, 57, 0.1); color: var(--orange-ink); display: grid; place-items: center; flex-shrink: 0; }
    .qs-row .ic svg { width: 16px; height: 16px; }
    .qs-row.gold .ic { background: rgba(212, 168, 74, 0.16); color: var(--gold-warm); }
    .qs-row.teal .ic { background: rgba(45, 155, 123, 0.14); color: #1e7558; }
    .qs-row .text { display: flex; flex-direction: column; gap: 2px; flex: 1; }
    .qs-row .text .k { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-fg); }
    .qs-row .text .v { font-weight: 600; font-size: 14.5px; color: var(--navy-deep); }
    .qs-row .text .v small { font-weight: 500; color: var(--muted-fg); margin-left: 4px; font-size: 12.5px; }

    /* Riviera sweep — subtle gold gradient revealed on hover */
    .conf-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, transparent 30%, rgba(212, 168, 74, 0.08) 50%, transparent 70%); opacity: 0; transition: opacity 320ms ease-out; border-radius: inherit; }
    .conf-card:hover::after { opacity: 1; }

    /* SPECIALITIES */
    .specs { background: var(--gray-warm); }
    .specs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
    @media (max-width: 880px) { .specs-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 560px) { .specs-grid { grid-template-columns: 1fr; } }
    .spec-row { display: grid; grid-template-columns: 40px 1fr auto; gap: 16px; align-items: center; padding: 18px 20px; background: white; border-radius: 14px; transition: transform 220ms ease-out, box-shadow 220ms ease-out; cursor: default; }
    .spec-row:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -16px rgba(30, 58, 95, 0.3); }
    .spec-row .ic { width: 40px; height: 40px; border-radius: 10px; background: var(--gray-surface); color: var(--navy-deep); display: grid; place-items: center; }
    .spec-row .ic svg { width: 18px; height: 18px; }
    .spec-row .text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .spec-row .text .name { font-weight: 600; font-size: 14.5px; letter-spacing: -0.005em; color: var(--navy-deep); }
    .spec-row .text .sub { font-size: 12px; color: var(--muted-fg); }
    .spec-row .arrow { color: var(--muted-fg); opacity: 0; transition: opacity 220ms ease-out, transform 220ms ease-out; }
    .spec-row:hover .arrow { opacity: 1; transform: translateX(3px); }
    .spec-row .arrow svg { width: 14px; height: 14px; }

    /* MOBILE CONCEPT */
    .mobile-section { background: var(--navy-deep); color: white; position: relative; overflow: hidden; }
    .mobile-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(800px 500px at 100% 0%, rgba(74, 123, 167, 0.4), transparent 60%); pointer-events: none; }
    .mobile-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 80px; align-items: center; position: relative; }
    .mobile-section h2.section-title { color: white; }
    .mobile-section .section-eyebrow { color: rgba(255,255,255,0.72); }
    .mobile-section .section-eyebrow .bar { background: rgba(255,255,255,0.25); }
    .mobile-section .section-lede { color: rgba(255,255,255,0.72); }
    .mobile-section .section-lede strong { color: white; }
    .mobile-points { display: flex; flex-direction: column; gap: 12px; margin-top: 36px; }
    .mobile-point { display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: start; padding: 14px 0; border-top: 1px solid rgba(255,255,255,0.08); }
    .mobile-point:first-child { border-top: none; }
    .mobile-point .ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: rgba(255,255,255,0.06); color: var(--gold-accent); }
    .mobile-point .ic svg { width: 14px; height: 14px; }
    .mobile-point .text { display: flex; flex-direction: column; gap: 4px; }
    .mobile-point .text .h { font-weight: 700; font-size: 15px; letter-spacing: -0.005em; color: white; }
    .mobile-point .text .b { font-size: 13.5px; color: rgba(255,255,255,0.65); line-height: 1.5; }
    .mobile-illu { position: relative; aspect-ratio: 4 / 5; border-radius: 22px; background-image: var(--hero-img); background-size: cover; background-position: center 30%; box-shadow: 0 30px 64px -20px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06); overflow: hidden; }
    .mobile-illu::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 33, 56, 0.18) 0%, rgba(15, 33, 56, 0.6) 100%); }
    .mobile-illu .badge-on-photo { position: absolute; left: 22px; bottom: 22px; right: 22px; background: rgba(15, 33, 56, 0.78); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 18px 20px; display: flex; align-items: center; gap: 16px; z-index: 2; }
    .mobile-illu .badge-on-photo .ic { width: 42px; height: 42px; border-radius: 10px; background: var(--orange-action); color: white; display: grid; place-items: center; flex-shrink: 0; }
    .mobile-illu .badge-on-photo .ic svg { width: 18px; height: 18px; }
    .mobile-illu .badge-on-photo .copy { display: flex; flex-direction: column; gap: 2px; }
    .mobile-illu .badge-on-photo .copy .h { font-weight: 700; font-size: 14px; color: white; }
    .mobile-illu .badge-on-photo .copy .b { font-size: 12px; color: rgba(255,255,255,0.7); }
    @media (max-width: 880px) { .mobile-grid { grid-template-columns: 1fr; gap: 48px; } .mobile-illu { aspect-ratio: 16 / 11; } }

    /* CONFRÈRES */
    .confreres { background: var(--navy-deep); color: white; position: relative; overflow: hidden; }
    .confreres::before { content: ''; position: absolute; inset: 0; background: radial-gradient(900px 600px at 0% 100%, rgba(212, 168, 74, 0.16), transparent 60%); pointer-events: none; }
    .confreres .container { position: relative; }
    .confreres .section-eyebrow .gold { color: var(--gold-accent); }
    .confreres h2.section-title { color: white; max-width: 24ch; }
    .confreres h2.section-title .title-accent { color: var(--gold-accent); display: block; }
    .confreres .section-lede { color: rgba(255, 255, 255, 0.78); }
    .confreres .section-lede strong { color: white; font-weight: 600; }
    .confreres-head { max-width: 760px; margin-bottom: 56px; }
    .confreres-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 80px; }
    @media (max-width: 1280px) { .confreres-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
    @media (max-width: 880px) { .confreres-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 560px) { .confreres-grid { grid-template-columns: 1fr; } }
    .conf-card { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 18px; padding: 26px; backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); position: relative; overflow: hidden; transition: border-color 320ms ease-out, transform 320ms ease-out; }
    .conf-card:hover { border-color: rgba(212, 168, 74, 0.32); transform: translateY(-2px); }
    .conf-ic { width: 42px; height: 42px; border-radius: 10px; background: rgba(212, 168, 74, 0.14); color: var(--gold-accent); display: grid; place-items: center; margin-bottom: 20px; }
    .conf-ic svg { width: 20px; height: 20px; }
    .conf-card h3 { font-weight: 700; font-size: 17px; color: white; margin-bottom: 8px; letter-spacing: -0.01em; }
    .conf-card p { font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, 0.72); }
    .confreres-app { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: center; padding-top: 48px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
    @media (max-width: 880px) { .confreres-app { grid-template-columns: 1fr; gap: 32px; } }
    .conf-app-text h3 { font-weight: 700; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; color: white; margin: 20px 0 18px; letter-spacing: -0.018em; max-width: 22ch; }
    .conf-app-text p { font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.78); margin-bottom: 28px; max-width: 50ch; }
    .conf-app-text p strong { color: white; font-weight: 600; }
    .conf-app-cta { display: flex; flex-wrap: wrap; gap: 12px; }
    .conf-app-visual { display: grid; place-items: center; }
    .conf-app-mockup { position: relative; background: linear-gradient(155deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)); border: 1px solid rgba(255,255,255,0.14); border-radius: 32px; aspect-ratio: 9 / 17; width: 100%; max-width: 260px; padding: 28px 18px; display: flex; flex-direction: column; box-shadow: 0 30px 60px -30px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06); }
    .conf-app-mockup .mockup-notch { width: 60px; height: 5px; background: rgba(255,255,255,0.18); border-radius: 999px; margin: 0 auto 24px; }
    .conf-app-mockup .mockup-label { color: rgba(255,255,255,0.65); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; text-align: center; margin-bottom: 22px; }
    .conf-app-mockup .mockup-rows { display: flex; flex-direction: column; gap: 10px; flex: 1; }
    .conf-app-mockup .mockup-rows span { display: block; height: 30px; border-radius: 8px; background: linear-gradient(90deg, rgba(212,168,74,0.18), rgba(255,255,255,0.06)); }
    .conf-app-mockup .mockup-rows span:nth-child(2) { width: 82%; }
    .conf-app-mockup .mockup-rows span:nth-child(3) { width: 64%; }
    .conf-app-mockup .mockup-rows span:nth-child(4) { width: 90%; }

    /* TESTIMONIALS */
    .testi { background: white; }
    .testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
    @media (max-width: 980px) { .testi-grid { grid-template-columns: 1fr; } }
    /* Cartes STATIQUES à l'entrée (décision Loïc 2026-07-20, comme le carton
       contact) : pas de masquage, pas de reveal — le survol et le carrousel
       restent. La couture vidéo TESTI_MEDIA (bulle) est indépendante. */
    .testi-card { position: relative; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; isolation: isolate; transition: transform 320ms cubic-bezier(.22,.7,.18,1), box-shadow 320ms ease-out; }
    .testi-card:hover { transform: translateY(-4px) scale(1.005); box-shadow: 0 30px 56px -22px rgba(15, 33, 56, 0.45); }
    .testi-bg { position: absolute; inset: 0; z-index: 0; }
    .testi-bg.bg-1 { background: linear-gradient(155deg, var(--navy-medium) 0%, var(--navy-deep) 50%, var(--navy-ink) 100%); }
    .testi-bg.bg-2 { background: linear-gradient(165deg, var(--navy-soft) 0%, var(--navy-medium) 45%, var(--navy-deep) 100%); }
    .testi-bg.bg-3 { background: linear-gradient(150deg, var(--navy-deep) 0%, var(--navy-shell) 60%, var(--navy-ink) 100%); }
    .testi-bg::before { content: ''; position: absolute; inset: 0; background: radial-gradient(closest-side, rgba(74, 123, 167, 0.4), transparent 65%); top: -30%; left: -20%; }
    .testi-bg::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 4px 4px; opacity: 0.5; mix-blend-mode: overlay; }
    .testi-mark { position: absolute; right: -20px; top: 40px; font-family: var(--font); font-weight: 650; font-size: 280px; line-height: 0.6; color: rgba(212, 168, 74, 0.08); letter-spacing: -0.06em; pointer-events: none; user-select: none; z-index: 1; transition: color 320ms ease-out, transform 320ms ease-out; }
    .testi-card:hover .testi-mark { color: rgba(212, 168, 74, 0.18); transform: scale(1.04); }
    .testi-initials { position: absolute; left: 28px; top: 32px; font-family: var(--font); font-weight: 650; font-size: 96px; line-height: 0.85; letter-spacing: -0.03em; color: rgba(255,255,255,0.08); z-index: 1; transition: color 320ms ease-out; }
    .testi-card:hover .testi-initials { color: rgba(255,255,255,0.14); }
    /* Portrait en médaillon, là où le monogramme tenait la place. Posé sur le
       dégradé navy de la carte, donc il lui faut un liseré clair pour ne pas
       flotter. 104px : la source ne fait que 200px, on reste ainsi à ~2x sur
       un écran retina. Le monogramme reste en service pour les cartes sans
       photo — la mixité est temporaire, le temps que les deux autres arrivent. */
    .testi-portrait { position: absolute; left: 28px; top: 30px; z-index: 1;
      width: 104px; height: 104px; border-radius: 50%; object-fit: cover;
      box-shadow: 0 0 0 1px rgba(255,255,255,.28), 0 14px 30px -14px rgba(15,33,56,.85);
      transition: transform 320ms cubic-bezier(.22,.7,.18,1), box-shadow 320ms ease-out; }
    .testi-card:hover .testi-portrait { transform: scale(1.04);
      box-shadow: 0 0 0 1px rgba(212,168,74,.6), 0 18px 34px -14px rgba(15,33,56,.9); }
    .testi-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, rgba(15, 33, 56, 0.2) 35%, rgba(15, 33, 56, 0.78) 70%, rgba(15, 33, 56, 0.94) 100%); z-index: 2; pointer-events: none; }
    .testi-content { position: absolute; inset: auto 0 0 0; padding: 28px 26px 24px; z-index: 3; color: white; display: flex; flex-direction: column; gap: 14px; text-align: left; }
    .testi-quote-icon { width: 32px; height: 32px; color: rgba(255,255,255,0.4); transition: color 320ms ease-out; }
    .testi-card:hover .testi-quote-icon { color: var(--gold-accent); }
    .testi-quote-icon svg { width: 100%; height: 100%; }
    /* Deux retraits du 2026-08-14 : .testi-stars avec les notes 5/5 (les vrais
       confrères donnent un témoignage, pas une note) et .testi-iconbox, la
       pastille d'icône du coin (Loïc fournira des photos). */
    .testi-body { font-weight: 500; font-size: var(--text-confort); line-height: 1.5; color: white; letter-spacing: -0.005em; }
    /* Carte en attente du texte du confrère : la mention est en italique pour
       ne pas se lire comme une citation, et les deux ornements de citation
       (le grand guillemet du fond, l'icône) s'effacent — un guillemet sans
       phrase citée fait inachevé. Tout revient seul quand le texte arrive. */
    .testi-soon { font-style: italic; color: rgba(255,255,255,0.72); }
    .testi-card:has(.testi-soon) .testi-quote-icon,
    .testi-card:has(.testi-soon) .testi-mark { display: none; }
    .testi-attr { padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.14); display: flex; flex-direction: column; gap: 2px; }
    .testi-attr .n { font-weight: 700; font-size: var(--text-corps); color: white; letter-spacing: -0.005em; }
    .testi-attr .r { font-size: var(--text-micro); font-weight: 600; letter-spacing: 0.04em; color: rgba(255,255,255,0.6); }
    /* Lien vers le site du confrère, quand il en a un (aujourd'hui le seul
       Dr Maillard). Or de la carte (le même que le survol de l'icône de
       citation), pas le gris de la ligne au-dessus : un lien doit se voir. Le
       carrousel suit déjà les liens de la carte centrale et neutralise le clic
       après un glissement, rien à câbler côté JS. */
    .testi-link { margin-top: 6px; align-self: flex-start; font-size: var(--text-micro); font-weight: 600;
      letter-spacing: 0.03em; color: var(--gold-accent); text-decoration: none;
      border-bottom: 1px solid rgba(200, 164, 79, 0.42); padding-bottom: 1px;
      transition: color 200ms ease-out, border-color 200ms ease-out; }
    .testi-link:hover, .testi-link:focus-visible { color: #E8D9A8; border-bottom-color: #E8D9A8; }

    /* CONTACT — le carton gravé (spec 2026-07-18-contact-carton-grave-design.md).
       Un carton d'invitation seul sur le blanc : crème, double filet or (le
       filet intérieur est un SVG que GSAP trace), le numéro comme seul CTA.
       PIÈGE : GSAP écrit y/scale sur .cgrave et ses lignes → aucune transition
       CSS sur transform ici, les survols ne touchent que la couleur. */
    .contact { background: white; }
    .cgrave { position: relative; width: min(100%, 640px); margin: 0 auto; text-align: center;
      background: var(--gray-warm); border: 1px solid rgba(165, 130, 42, .55); border-radius: 4px;
      padding: 54px 48px 44px; box-shadow: 0 24px 48px -32px rgba(15, 33, 56, .35); }
    .cgrave-filet { position: absolute; inset: 9px; width: calc(100% - 18px); height: calc(100% - 18px);
      pointer-events: none; overflow: visible; }
    .cgrave-filet rect { fill: none; stroke: rgba(165, 130, 42, .32); stroke-width: 1; vector-effect: non-scaling-stroke; }
    .cgrave-wm { width: 200px; color: var(--navy-ink); }
    .cgrave-rule { display: flex; align-items: center; justify-content: center; gap: 12px;
      margin: 20px 0; color: var(--gold-deep); font-size: var(--text-meta); }
    .cgrave-rule::before, .cgrave-rule::after { content: ''; width: 64px; height: 1px; background: rgba(165, 130, 42, .4); }
    .cgrave-sub { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-warm); }
    /* La formule tient sur deux lignes : on interdit la coupure DANS
       « · Suisse romande », sinon la ligne du haut se termine par le séparateur
       et « romande » se retrouve seul en dessous. La coupure tombe donc avant
       le point médian, à l'endroit qui a du sens. */
    .cgrave-sub .nb { white-space: nowrap; }
    .cgrave-invite { margin: 14px 0 0; font-family: var(--font-display); font-style: italic; font-weight: 480;
      font-size: 17px; color: var(--muted-fg); }
    .cgrave-tel { display: inline-block; margin: 22px 0 4px; padding: 4px 10px; font-family: var(--font-mono);
      font-weight: 500; font-size: clamp(26px, 3vw, 32px); letter-spacing: .01em; color: var(--navy-ink);
      transition: color 200ms ease-out; }
    .cgrave-tel:hover { color: var(--orange-ink); }
    .cgrave-hours { display: grid; grid-template-columns: auto auto; gap: 6px 26px; justify-content: center; margin: 14px 0 0; }
    .cgrave-hours dt { font-size: var(--text-micro); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
      color: var(--muted-fg); align-self: center; text-align: right; }
    .cgrave-hours dd { margin: 0; font-family: var(--font-mono); font-size: var(--text-corps); color: var(--navy-ink); text-align: left; }
    .cgrave-note { margin: 10px 0 0; font-size: var(--text-meta); color: var(--muted-fg); }
    /* .cgrave-regions (la ligne des cantons) retirée le 2026-08-14. Son
       margin-top de 16px passe à l'e-mail : sans ça, le retrait d'une ligne
       resserrait aussi ce qui restait dessous. */
    .cgrave-mailrow { margin: 16px 0 0; }
    .cgrave-mail { font-family: var(--font-mono); font-size: var(--text-corps); }
    .cgrave-mail, .cgrave-doors a { color: var(--navy-deep); text-decoration: underline;
      text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: rgba(165, 130, 42, .45);
      transition: color 180ms ease-out, text-decoration-color 180ms ease-out; }
    .cgrave-mail:hover, .cgrave-doors a:hover { color: var(--orange-ink); text-decoration-color: var(--orange-ink); }
    .cgrave-doors { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 34px; margin-top: 24px; }
    .cgrave-doors a { font-weight: 600; font-size: var(--text-corps); padding: 8px 2px; }
    @media (max-width: 640px) {
      .cgrave { padding: 34px 22px 28px; }
      .cgrave-wm { width: 160px; }
      .cgrave-rule::before, .cgrave-rule::after { width: 44px; }
      .cgrave-sub { font-size: 10.5px; letter-spacing: .18em; }
      .cgrave-tel { padding: 8px 12px; }
      .cgrave-mail, .cgrave-doors a { display: inline-block; padding-top: 12px; padding-bottom: 12px; }
    }
    @media (max-width: 400px) {
      .cgrave-wm { width: 140px; }
      .cgrave-hours { grid-template-columns: 1fr; gap: 2px; }
      .cgrave-hours dt, .cgrave-hours dd { text-align: center; }
      .cgrave-hours dd { margin-bottom: 6px; }
    }
    /* Écrans mobiles COURTS (~640px de haut, petits téléphones et paysage) :
       le carton se resserre pour tenir dans la vue unique. Placé APRÈS le bloc
       400px pour regagner les horaires en deux colonnes (même spécificité,
       la cascade tranche). Mesuré : carton 653px à 360x640 sans cette passe. */
    @media (max-width: 1023px) and (max-height: 700px) {
      .contact.section { padding-top: 36px; padding-bottom: 20px; }
      .cgrave { padding: 22px 18px 18px; }
      .cgrave-wm { width: 118px; }
      .cgrave-rule { margin: 10px 0; }
      .cgrave-invite { margin-top: 6px; font-size: var(--text-confort); }
      .cgrave-tel { margin: 10px 0 0; font-size: 23px; padding: 6px 10px; }
      .cgrave-hours { margin-top: 6px; grid-template-columns: auto auto; gap: 4px 20px; }
      .cgrave-hours dt { text-align: right; }
      .cgrave-hours dd { text-align: left; margin-bottom: 0; }
      .cgrave-note { margin-top: 6px; font-size: var(--text-meta); }
      .cgrave-mailrow { margin-top: 6px; }
      .cgrave-doors { margin-top: 6px; gap: 6px 22px; }
      /* 12px de padding = cible 44px (HIG), déjà mesuré sous les 44 à 10px */
      .cgrave-mail, .cgrave-doors a { padding-top: 12px; padding-bottom: 12px; }
    }

    /* .hero-fs-cta .phone-strong : plus utilisé depuis la refonte du hero
       (code mort préexistant, conservé en l'état — cf. garde-fous CLAUDE.md). */
    .hero-fs-cta .phone-strong { display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px; border-radius: 999px; background: white; border: 1px solid var(--border-subtle); font-family: var(--font-mono); font-weight: 600; font-size: 15px; color: var(--navy-deep); transition: background 220ms ease-out; }
    .hero-fs-cta .phone-strong:hover { background: var(--gray-surface); }
    .hero-fs-cta .phone-strong .ic { width: 28px; height: 28px; border-radius: 8px; background: rgba(224, 123, 57, 0.12); color: var(--orange-action); display: grid; place-items: center; }
    .hero-fs-cta .phone-strong .ic svg { width: 14px; height: 14px; }

    /* FOOTER */
    footer.foot { background: var(--navy-shell); color: rgba(255,255,255,0.7); padding: 56px 0 32px; }
    .foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 48px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.08); }
    @media (max-width: 880px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
    .foot-brand { display: flex; flex-direction: column; gap: 14px; }
    .foot-brand .nb { display: inline-flex; align-items: center; gap: 12px; color: white; font-weight: 700; font-size: 17px; }
    .foot-brand .nb-mark { width: 32px; height: 32px; border-radius: 8px; background: var(--orange-action); display: grid; place-items: center; color: white; font-weight: 700; font-size: 15px; }
    /* Footer logo — static PNG of the rendered brand mark. */
    .foot-logo .brand-wordmark { width: 200px; }
    .foot-brand .foot-name { font-size: 14px; font-weight: 600; letter-spacing: 0.06em; color: rgba(255,255,255,0.62); text-transform: uppercase; }
    .foot-brand p { font-size: var(--text-corps); max-width: 320px; line-height: 1.55; }
    /* Numéro du footer cliquable (TODO validé le 2026-07-17) : même rendu que
       l'ancien <p>, souligné discret au survol. */
    .foot-telrow { margin: 0; }
    .foot-tel { font-family: var(--font-mono); font-size: var(--text-meta); color: rgba(255,255,255,0.72);
      text-decoration: none; transition: color 180ms ease-out; }
    .foot-tel:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
    .foot-col h3 { font-size: var(--text-micro); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.72); margin-bottom: 14px; }
    .foot-col ul li { padding: 5px 0; font-size: var(--text-corps); color: rgba(255,255,255,0.78); transition: color 220ms ease-out; }
    .foot-col ul li:hover { color: white; }
    .foot-meta { display: flex; justify-content: space-between; align-items: center; padding-top: 28px; gap: 16px; flex-wrap: wrap; }
    .foot-meta .copy { font-size: var(--text-meta); color: rgba(255,255,255,0.7); letter-spacing: 0.02em; }
    .foot-meta .lang { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); }
    .foot-meta .lang .active { padding: 5px 14px; border-radius: 999px; background: rgba(255,255,255,0.1); color: white; font-size: var(--text-micro); font-weight: 700; letter-spacing: 0.1em; }

    /* RESPONSIVE */
    @media (max-width: 1080px) {
      .container, .container-wide { padding-left: 20px; padding-right: 20px; }
      .section { padding: 88px 0; }
    }
    @media (max-width: 980px) {
      .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
      .hero-right { padding-top: 0; }
      .quote-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
      .se-track { height: 200vh; }
      .section { padding: 80px 0; }
      .testi-grid { gap: 16px; margin-top: 40px; }
    }
    @media (max-width: 880px) {
      .topnav-inner { gap: 16px; }
      .nav-brand .nb-text .t { font-size: 9.5px; }
      .brand-wordmark { width: 156px; }
      .foot-logo .brand-wordmark { width: 184px; }
      .se-titles { gap: 18px; }
      .se-title { font-size: clamp(48px, 11vw, 96px); }
      .se-media-wrap { width: 280px !important; height: 190px !important; }
      .testi-card { aspect-ratio: 5 / 6; }
      .testi-mark { font-size: 200px; top: 24px; }
      .testi-initials { font-size: 80px; }
      .testi-portrait { width: 88px; height: 88px; }
      .quote-mark { font-size: 112px; }
    }
    @media (max-width: 640px) {
      .section { padding: 64px 0; }
      .container, .container-wide { padding-left: 16px; padding-right: 16px; }
      .hero-eyebrow { font-size: 10.5px; padding: 6px 12px; }
      .stats-card { padding: 22px 18px; }
      .marq-card { padding: 22px 0; }
      .marq-head { padding: 0 20px 14px; }
      .marq-track { gap: 24px; padding: 4px 20px; }
      .stats-head { margin-bottom: 22px; gap: 12px; }
      .stats-head .num { font-size: 28px; }
      .stats-head .ic { width: 44px; height: 44px; border-radius: 12px; }
      .stats-head .ic svg { width: 18px; height: 18px; }
      .stats-mini { grid-template-columns: 1fr 1px 1fr 1px 1fr; gap: 4px; }
      .stats-mini .vline { height: 26px; }
      .stat-item .v { font-size: 16px; }
      .stat-item .k { font-size: 9.5px; }
      .stats-tags { gap: 6px; margin-top: 18px; }
      .stat-tag { font-size: 10px; padding: 4px 10px; }
      .nav-brand .nb-text .t { display: none; }
      .nav-brand .nb-text .n { font-size: 15px; }
      .nav-brand .nb-mark { width: 32px; height: 32px; font-size: 15px; }
      .brand-wordmark { width: 140px; }
      .foot-logo .brand-wordmark { width: 165px; }
      .topnav { padding: 12px 0; }
      .nav-cta { padding: 8px 14px; font-size: var(--text-meta); white-space: nowrap; }
      .testi-card { aspect-ratio: 4 / 5; }
      .testi-mark { font-size: 160px; top: 20px; right: -10px; }
      .testi-initials { font-size: 64px; left: 22px; top: 26px; }
      .testi-portrait { width: 74px; height: 74px; left: 22px; top: 24px; }
      .testi-content { padding: 22px 22px 22px; gap: 12px; }
      .testi-body { font-size: var(--text-corps); line-height: 1.45; }
      .testi-attr .n { font-size: var(--text-corps); }
      .testi-attr .r { font-size: var(--text-micro); }
      .quote-mark { font-size: 84px; line-height: 0.5; }
      .quote-body { font-size: clamp(22px, 6.2vw, 28px); }
      .quote-side { padding: 22px 20px; border-radius: 16px; }
      .qs-row { padding: 12px 0; gap: 12px; grid-template-columns: 32px 1fr; }
      .qs-row .ic { width: 32px; height: 32px; border-radius: 8px; }
      .qs-row .ic svg { width: 14px; height: 14px; }
      .qs-row .text .v { font-size: 13.5px; }
      .qs-row .text .v small { font-size: 11.5px; }
      .se-titles { gap: 14px; flex-direction: column; }
      .se-title { font-size: clamp(40px, 12.5vw, 64px); }
      .se-title.right { line-height: 0.95; }
      .se-media-wrap { width: 220px !important; height: 150px !important; border-radius: 14px; }
      .se-play-circle { width: 60px; height: 60px; }
      .se-play-circle svg { width: 22px; height: 22px; }
      .se-play-meta { font-size: 11px; }
      .se-play-meta .small { font-size: 10px; }
      .se-cue { font-size: 10px; bottom: 24px; letter-spacing: 0.12em; }
      .se-cue::after { height: 22px; }
      .foot-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-bottom: 28px; }
      .foot-meta { flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 20px; }
      footer.foot { padding: 44px 0 28px; }
      .hero-fs-cta .phone-strong { font-size: 13.5px; padding: 12px 18px; }
      .mobile-illu { aspect-ratio: 4 / 3; border-radius: 18px; }
      .mobile-illu .badge-on-photo { left: 16px; right: 16px; bottom: 16px; padding: 14px 16px; gap: 12px; border-radius: 12px; }
      .mobile-illu .badge-on-photo .ic { width: 36px; height: 36px; }
      .mobile-illu .badge-on-photo .ic svg { width: 16px; height: 16px; }
      .mobile-illu .badge-on-photo .copy .h { font-size: 13px; }
      .mobile-illu .badge-on-photo .copy .b { font-size: 11.5px; }
      .mobile-point { grid-template-columns: 24px 1fr; gap: 12px; padding: 12px 0; }
      .mobile-point .ic { width: 24px; height: 24px; border-radius: 7px; }
      .mobile-point .ic svg { width: 12px; height: 12px; }
      .mobile-point .text .h { font-size: 14px; }
      .mobile-point .text .b { font-size: 12.5px; }
      .section h2.section-title { font-size: clamp(28px, 7.4vw, 36px); margin-bottom: 16px; }
      .section .section-lede { font-size: var(--text-confort); }
      .spec-row { grid-template-columns: 36px 1fr auto; padding: 14px 16px; gap: 12px; }
      .spec-row .ic { width: 36px; height: 36px; }
      .spec-row .ic svg { width: 16px; height: 16px; }
      .spec-row .text .name { font-size: 14px; }
      .spec-row .text .sub { font-size: 11.5px; }
      .quote-attr .av { width: 42px; height: 42px; font-size: 14px; }
      .quote-attr .meta .name { font-size: 14px; }
      .quote-attr .meta .role { font-size: 11.5px; }
    }
    @media (max-width: 400px) {
      .container, .container-wide { padding-left: 14px; padding-right: 14px; }
      .stats-mini { grid-template-columns: 1fr; gap: 2px; }
      .stats-mini .vline { display: none; }
      .stat-item { padding: 6px 0; }
      .nav-brand .nb-mark { width: 28px; height: 28px; font-size: 13px; border-radius: 7px; }
      .nav-brand .nb-text .n { font-size: 13.5px; }
      .brand-wordmark { width: 122px; }
      .foot-logo .brand-wordmark { width: 150px; }
      .nav-cta { padding: 7px 12px; font-size: var(--text-meta); gap: 6px; }
      .nav-cta svg { width: 12px; height: 12px; }
      .se-media-wrap { width: 190px !important; height: 130px !important; }
      .se-title { font-size: clamp(34px, 13vw, 56px); }
      .quote-mark { font-size: 72px; }
      .testi-mark { font-size: 140px; }
      .testi-initials { font-size: 56px; }
      .testi-portrait { width: 64px; height: 64px; }
    }

    /* ===== Vidéos d'ambiance en couverture (hero encadré + outro) =====
       Les conteneurs (.hero-frame, .outro) portent le poster en background :
       quand la vidéo est masquée (mobile / reduced-motion), l'image reste. */
    .hero-video { position: absolute; inset: 0; width: 100%; height: 100%;
      object-fit: cover; object-position: center 50%; z-index: 1; pointer-events: none;
      will-change: transform; transform-origin: 50% 45%; }
    /* ⚠️ Cadrage FIXE à 50 %, pour toutes les scènes, et le JS n'y touche pas.
       Historique, à ne pas rejouer (Loïc, 2026-08-14) : le cadrage valait 40 %
       et une classe `.is-nom` le basculait à 50 % sur la scène du nom, EN
       TRANSITION — à chaque bouclage l'image montait de 30 px pendant que le
       logo apparaissait (« anesthéa arrive du bas puis se recentre »). Corrigé
       d'abord en gravant la remontée dans la vidéo, ce qui a produit un autre
       défaut : la compensation dépend des proportions du cadre (0 px sur une
       fenêtre haute, 45 px en 1280x800, 56 px en 1280x720), donc une valeur
       gravée tombe forcément à côté quelque part. Le bloc du nom est
       maintenant CENTRÉ dans la vidéo et le cadrage vaut 50 % partout : exact à
       tous les formats, sans bascule ni animation. Les 4 scènes d'expertise ont
       donc été recadrées 10 % plus bas, ce qui a été revu et validé. */
    /* Dans l'outro, la vidéo déborde du cadre (116 % de haut, top -8 %) : le
       parallax (yPercent -6 → +6, cf. anesthea.js 2a) glisse à l'intérieur de
       ce débord sans jamais découvrir le fond de la section. */
    .outro .hero-video { top: -8%; height: 116%; }
    @media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }
    /* (mobile : la vidéo joue aussi depuis le 2026-07-18 — l'ancien
       display:none < 641px est retiré, comme le gate JS correspondant) */

    /* ===== Page head (pages sans hero) — P2 ===== */
    .page-head { padding: 148px 0 40px; }
    .page-head .page-h1 { font-size: clamp(38px, 5vw, 64px); font-weight: 700; line-height: 1.02; letter-spacing: -0.025em; color: var(--navy-deep); margin: 0 0 16px; }
    .page-head .page-lede { font-size: 18px; line-height: 1.55; color: var(--muted-fg); max-width: 640px; }

    /* Le forçage « nav solide sur pages sans hero » (P2-T7) a disparu ici : la nav
       n'a plus d'état transparent à rattraper, .topnav est en verre partout. */

    /* « Réduire la transparence » (réglage système iOS/macOS) : le verre redevient
       plein. Le texte est déjà blanc partout, il n'y a rien d'autre à rattraper. */
    /* (« Réduire la transparence » est traité plus bas, après la règle partenaire :
       il doit pouvoir la surcharger, et à spécificité égale c'est l'ordre source
       qui tranche.) */

    /* ===== Solutions numériques — grille 2 colonnes : hub (cartes) + preuves (P4-T1) ===== */
    .solutions-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
    @media (max-width: 880px) { .solutions-grid { grid-template-columns: 1fr; } }


/* ============================================================
   MOTION — Carrousel « nos solutions » (.wheel, coverflow draggable)
   Le JS (buildSolutionsWheel) remplace la grille par un coverflow : les
   cartes (.wheel-track > .wheel-card, absolues) se placent selon leur
   distance à la carte centrale ; on tourne au drag/swipe/boutons, boucle
   infinie. Les cartes GARDENT leur couleur de base (différenciation) et
   leurs badges épinglés. Flux normal (plus d'épinglage plein écran).
   Repli reduced-motion / no-JS : la grille .sol d'origine reste telle quelle.
   ============================================================ */
/* .wheel remplit la vue : header + titre + carrousel + boutons tiennent sur un
   écran (tout sauf le footer) ; hauteur posée par média (desktop / mobile) */
.wheel { position: relative; width: 100%; overflow: hidden; touch-action: pan-y; margin-top: 2px;
  isolation: isolate; } /* contexte d'empilement isolé : les cartes (z-index ≤50) restent SOUS le header fixe (z-index 50) au scroll */
.wheel-track { position: absolute; inset: 0; cursor: grab; touch-action: pan-y; }
.wheel-track:active { cursor: grabbing; }
/* cartes grandes + lisibles ; on ne touche qu'au layout (position/taille) — la
   couleur de base de chaque .sol-card est conservée. Contour or via --glow
   (posé par le JS) qui apparaît/disparaît sur la carte de premier plan ;
   AUCUNE ombre portée. La hauteur laisse ~20px au badge et au halo or. */
.wheel-track .wheel-card { position: absolute; left: 50%; top: 50%; margin: 0; --glow: 0;
  width: clamp(280px, 24vw, 344px); height: calc(100% - 40px);
  transform: translate(-50%, -50%); transition: none; will-change: transform, opacity;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold-accent) calc(var(--glow) * 92%), transparent),
              0 0 18px -2px color-mix(in srgb, var(--gold-accent) calc(var(--glow) * 55%), transparent);
  -webkit-user-drag: none; user-select: none; }
.wheel-track .wheel-card::after { display: none; }               /* pas de sheen */
.wheel-track .wheel-card p { -webkit-line-clamp: 6; }            /* garde-fou anti-débordement */
.wheel-track .wheel-card .btn-primary { padding: 11px 20px; }
/* couleurs distinctes reprises des anciens bandeaux (VVP / Rejoindre) */
.wheel-card.sol-dark { background: var(--navy-ink); border-color: rgba(255,255,255,.14); }
.wheel-card.sol-dark h3 { color: #fff; }
.wheel-card.sol-dark p { color: rgba(255,255,255,.72); }
.wheel-card.sol-dark .ic { background: rgba(212,168,74,.16); color: var(--gold-accent); }
.wheel-card.sol-dark .sol-link { color: var(--gold-accent); }
/* .sol-card.featured impose son box-shadow (ombre) à spécificité égale et plus
   bas dans le fichier : on le reprend en plus spécifique → contour or, zéro ombre */
.wheel-track .wheel-card.featured {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold-accent) calc(var(--glow) * 92%), transparent),
              0 0 18px -2px color-mix(in srgb, var(--gold-accent) calc(var(--glow) * 55%), transparent); }
/* boutons Préc./Suiv. — sous le carrousel, en flux normal */
.wheel-actions { display: flex; justify-content: center; gap: 12px; margin-top: 8px; }
.wheel-actions button { font: inherit; font-weight: 600; font-size: var(--text-meta); letter-spacing: .01em;
  cursor: pointer; min-height: 44px; padding: 11px 24px; border-radius: 999px; color: var(--navy-deep);
  background: #fff; border: 1px solid var(--border-subtle);
  box-shadow: 0 10px 24px -16px rgba(15,33,56,.5); transition: transform .2s ease, border-color .2s ease; }
.wheel-actions button:hover { border-color: color-mix(in srgb, var(--gold-accent) 55%, var(--border-subtle)); transform: translateY(-1px); }
.wheel-actions button:focus-visible { outline: 2px solid var(--gold-accent); outline-offset: 2px; }
.wheel-count { align-self: center; min-width: 52px; text-align: center; font-family: var(--font-mono); font-size: 12.5px; color: var(--muted-fg); }
/* desktop : en-tête compacte + centrée → les 5 cartes tiennent sur un écran */
@media (min-width: 701px) {
  body:has(.wheel) .page-head { padding: 88px 0 2px; text-align: center; }
  body:has(.wheel) .page-head .page-h1 { font-size: clamp(34px, 3.4vw, 46px); }
  /* :has(.wheel .sol-card) et pas :has(.wheel) : depuis que l'accueil a son
     carrousel témoignages, un .wheel n'implique plus la page nos-solutions —
     sans ce garde, ces paddings écraseraient les sections pleine page. */
  body:has(.wheel .sol-card) .section { padding-top: 4px; padding-bottom: 8px; }
  .wheel { height: calc(100svh - 214px); min-height: 452px; }
}
/* mobile : une carte en grand ; header + titre + carte tiennent sur un écran */
@media (max-width: 700px) {
  body:has(.wheel) .page-head { padding-top: 80px; padding-bottom: 4px; text-align: center; }
  body:has(.wheel) .page-head .page-h1 { font-size: 30px; line-height: 1.08; }
  body:has(.wheel .sol-card) .section { padding-top: 4px; padding-bottom: 10px; }
  .wheel { height: calc(100svh - 196px); min-height: 384px; }
  .wheel-track .wheel-card { width: min(88vw, 360px); }
}

/* — Carrousel témoignages (accueil, construit par le JS sous 1024px) :
   hauteur calée sur le budget « une page » de la section, cartes bornées.
   La bulle .testi-media (vidéos TESTI_MEDIA, dormante tant que la table est
   vide côté JS) couvre TOUTE la carte : même cercle --r/--rx/--ry que
   .sol-media, mais pas de découpage top/foot (cartes en couches absolues). — */
.testi .wheel { height: calc(100svh - 288px); min-height: 420px; }
.testi .wheel-track .wheel-card { width: min(88vw, 360px); }
/* en-tête centré comme les autres sections (le texte des cartes, lui, reste
   aligné à gauche) ; le titre porte un max-width inline → marges auto */
.testi > .container > .section-eyebrow { display: flex; justify-content: center; }
.testi h2.section-title { text-align: center; margin-left: auto; margin-right: auto; }
.testi-media { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden;
  border-radius: inherit; clip-path: circle(var(--r) at var(--rx) var(--ry)); }
.testi-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   FIRESIDE — typographie éditoriale (Fraunces + Inter Tight)
   Le serif s'applique à TOUS les niveaux de titres (fireside met
   IvyPresto de h1 à h6, jusqu'aux prix) ; le corps, les boutons
   et les labels restent sur --font (Inter Tight).
   Graisse : Fraunces est chargée en 400..650 (head.html) — le 650
   ci-dessous est la graisse réelle du « bold » serif ; avant, le 700
   hérité du navigateur était écrêté à 650 en silence. Si on élargit
   un jour la plage chargée, garder 650 ici (sinon tout épaissit).
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 650;
  letter-spacing: -0.005em;
  font-variation-settings: 'opsz' 60;
}
/* exception assumée : intitulés de colonnes du footer = labels (11px capitales), pas des titres */
.foot-col h3 { font-family: var(--font); }
/* les grands chiffres et ornements typographiques suivent le serif */
.quote-mark, .testi-mark, .testi-initials { font-family: var(--font-display); }
/* L'esperluette : c'est le DESSIN du « & » romain de Fraunces qui déplaît
   (Loïc 2026-08-19), pas le signe. Planche de six variantes comparées à
   taille réelle, Loïc a choisi celle d'Inter Tight, la police du corps de
   texte : un « & » droit et net au milieu du serif. Les italiques de
   Fraunces (forme cursive du « et » latin) ont été écartées. */
.amp { font-family: var(--font); font-weight: 500; }
/* exception : dans les étiquettes d'étape (DM Mono 11 px, graisse 400),
   le 500 ferait peser le signe plus lourd que les mots qui l'entourent. */
.bls-num .amp { font-weight: 400; }
/* graisse posée des grands titres (les petits restent au 650 ci-dessus) */
.hero-h1, .section h2.section-title, .page-head .page-h1, .conf-app-text h3, .outro-line {
  font-weight: 560;
  font-variation-settings: 'opsz' 90;
}
.hero-h1 { line-height: 1.0; }
.hero-h1 .accent { font-style: italic; font-weight: 520; }
.hero-h1 .small { font-family: var(--font); }
/* accent éditorial : la fin de phrase bascule en italique or (façon fireside) */
.accent-i { font-style: italic; font-weight: 480; color: var(--gold-deep); }

/* ============================================================
   APPROCHE PATIENT — l'anneau de garde (spec
   docs/superpowers/specs/2026-07-28-approche-patient-design.md).
   Fond blanc dans le fil 360°/atouts (décision Loïc 2026-07-28,
   d'abord conçu navy), disque navy en écho du hub 360°. Le texte
   vit en HTML (.apx-points), le SVG est décoratif. AUCUN masquage
   en CSS : les états initiaux d'animation sont posés par gsap.set
   en JS (module 2a bis) — sans JS ou en mouvement réduit, tout
   est visible. Pas de transition CSS sur les transforms : GSAP
   les écrit. L'or en TEXTE est --gold-warm (lisible sur blanc),
   jamais --gold-accent.
   ============================================================ */
.apx { background: white; }
.apx-head { max-width: 760px; margin: 0 auto; text-align: center; }
.apx-head .section-title, .apx-head .section-lede { margin-left: auto; margin-right: auto; }
.apx-stage { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: auto auto auto; gap: 14px 30px; align-items: center;
  justify-items: center; max-width: 980px; margin: 34px auto 0; }
.apx-ringwrap { grid-column: 2; grid-row: 2; position: relative; width: 380px; max-width: 100%; }
.apx-ring { display: block; width: 100%; height: auto; }
.apx-disc { fill: var(--navy-deep); }
.apx-arc { fill: none; stroke: var(--gold-accent); stroke-width: 15; stroke-linecap: round; }
.apx-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  margin: 0; font-family: var(--font-display); font-size: 24px; font-weight: 600; color: white; }
.apx-points { display: contents; }
.apx-point { list-style: none; }
.apx-point h3 { margin: 0 0 6px; font-family: var(--font-display); font-size: 18px; font-weight: 600;
  letter-spacing: .01em; color: var(--gold-warm); }
.apx-point p { margin: 0; font-size: var(--text-corps); line-height: 1.5; color: var(--muted-fg); }
.apx-point[data-pos="n"] { grid-column: 2; grid-row: 1; text-align: center; max-width: 380px; }
.apx-point[data-pos="e"] { grid-column: 3; grid-row: 2; justify-self: start; text-align: left; max-width: 250px; }
.apx-point[data-pos="s"] { grid-column: 2; grid-row: 3; text-align: center; max-width: 380px; }
.apx-point[data-pos="o"] { grid-column: 1; grid-row: 2; justify-self: end; text-align: right; max-width: 250px; }
@media (max-width: 1023px) {
  .apx-stage { display: block; margin-top: 26px; }
  .apx-ringwrap { width: 300px; margin: 0 auto; }
  .apx-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 22px; max-width: 640px; margin: 26px auto 0; padding: 0; }
  .apx-point[data-pos] { grid-column: auto; grid-row: auto; max-width: none; text-align: left; justify-self: stretch; }
}
@media (max-width: 640px) {
  .apx { padding: 44px 0 40px; }
  /* disque = 47,5 % de l'anneau : à 200px il fait ~95px, la fonte 15px
     garde « Le patient » dans le cercle (≈ 77px) */
  .apx-ringwrap { width: 200px; }
  .apx-center { font-size: 15px; }
  .apx-points { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 16px; }
  .apx-point h3 { font-size: 16px; margin-bottom: 4px; }
  .apx .section-lede { font-size: var(--text-confort); }
}
/* Vue unique écrans courts : l'anneau se resserre, rien n'est masqué.
   Calibré pour 1280x720 (le gabarit piège) : ~680px de contenu total. */
@media (min-width: 1081px) and (max-height: 800px) {
  .apx { padding: 40px 0 32px; }
  /* Plus de font-size ici : les deux en-têtes à diagramme sont réglés ensemble
     dans le bloc min-width: 1024px (clamp calé sur la hauteur), et une valeur
     fixe posée ici ne s'appliquerait qu'à l'anneau — c'est exactement ce qui
     les avait désaccordés. Le resserrement de la marge, lui, vaut pour les
     deux : c'est de l'espacement, pas du corps. */
  .apx-head h2.section-title, .a360-head h2.section-title { margin-bottom: 14px; }
  .apx-stage { margin-top: 16px; gap: 8px 26px; }
  .apx-ringwrap { width: 270px; }
  .apx-center { font-size: 20px; }
}

/* ============================================================
   ANESTHEA 360 — le diagramme orbital (hub wordmark + 6 solutions
   cliquables, une couleur par expertise). Remplace la cascade
   #offres et la pile #chirurgiens (2026-07-18, spec
   docs/superpowers/specs/2026-07-18-anesthea-360-orbite-design.md).
   Desktop ≥1024 : orbite absolue sur un stage au ratio 1000/760,
   centrage via la propriété translate (PAS transform : GSAP anime
   scale/autoAlpha sur les slots sans écraser le centrage).
   En dessous de 1024 : hub compact + rangées tappables. Le
   masquage d'entrée est fait par GSAP au runtime : sans JS ou en
   mouvement réduit, tout est visible d'emblée.
   ============================================================ */
.a360 { background: white; }
/* en-tête centré (le titre et la lede ont un max-width : marges auto pour
   centrer leurs boîtes, text-align pour les lignes, l'eyebrow est inline-flex) */
.a360-head { max-width: 760px; margin: 0 auto; text-align: center; }
.a360-head .section-title, .a360-head .section-lede { margin-left: auto; margin-right: auto; }
/* la couleur d'expertise, posée sur tout ce qui porte data-exp */
.a360 [data-exp="anesthesie"], .atouts [data-exp="anesthesie"] { --exp: var(--navy-medium); --exp-ink: var(--navy-deep); }
.a360 [data-exp="formation"], .atouts [data-exp="formation"] { --exp: var(--teal-success); --exp-ink: var(--teal-success); }
.a360 [data-exp="numerique"], .atouts [data-exp="numerique"] { --exp: var(--gold-accent); --exp-ink: var(--gold-deep); }
.a360 [data-exp="personnel"], .atouts [data-exp="personnel"] { --exp: var(--orange-action); --exp-ink: var(--orange-action-h); }

/* — Le hub (commun aux deux formats) : disque navy, arcs colorés, wordmark —
   ⚠️ Pas de transition/transform CSS sur .a360-hub ni .a360-slot : GSAP écrit
   leurs transforms (éclosion), une transition CSS empoisonne ses lectures et
   décentre le hub. Le hover vit sur le disque enfant, que GSAP ne touche pas. */
.a360-hub { position: relative; display: block; border-radius: 50%; text-decoration: none; }
.a360-hub:hover .a360-hub-disc { transform: translateY(-3px); }
.a360-hub:focus-visible, .a360-node:focus-visible { outline: 3px solid var(--gold-accent); outline-offset: 4px; }
.a360-hub-arcs { position: absolute; inset: 0; width: 100%; height: 100%; animation: a360spin 60s linear infinite; }
.a360-hub-arcs circle { fill: none; stroke: var(--exp); stroke-width: 2; stroke-dasharray: 22 78; stroke-linecap: round; }
/* Disque BLANC depuis le 2026-08-14 (demande Loïc) : le monogramme y est dans
   ses couleurs de fond clair, « a » en navy et croissant or, au lieu du « a »
   blanc sur navy. La section étant déjà blanche, le disque a besoin d'un
   contour pour rester un objet posé : un liseré en ombre interne (pas un
   border, qui jouerait avec inset) plus l'ombre portée qui le décolle. */
.a360-hub-disc { position: absolute; inset: 8%; border-radius: 50%; background: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  box-shadow: 0 24px 48px -26px rgba(15, 33, 56, .38), inset 0 0 0 1px var(--border-subtle);
  transition: transform 280ms cubic-bezier(.22,.7,.18,1); }
/* le monogramme (a + croissant, logo simplifié) remplit le disque */
.a360-hub-mono { width: 62%; height: auto; }

/* — Format compact (<1024) : hub en tête puis les 6 solutions en rangées — */
.a360-stage { margin-top: 40px; }
.a360-decor { display: none; }
.a360-hub { width: 132px; aspect-ratio: 1; margin: 0 auto; }
.a360-nodes { list-style: none; margin: 28px 0 0; padding: 0; }
.a360-slot + .a360-slot { border-top: 1px solid var(--border-subtle); }
.a360-node { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  min-height: 64px; padding: 12px 2px; text-decoration: none; border-radius: 8px; }
.a360-ring { display: none; }
.a360-ic { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--exp);
  display: grid; place-items: center; color: var(--exp-ink); background: #fff; }
.a360-ic svg { width: 21px; height: 21px; }
.a360-txt { display: block; min-width: 0; }
.a360-exp { display: block; font-size: var(--text-micro); font-weight: 600; letter-spacing: .02em; color: var(--muted-fg); }
.a360-t { display: block; font-size: 16px; font-weight: 600; color: var(--navy-ink); letter-spacing: -0.005em; line-height: 1.3; }
.a360-t br { display: none; } /* libellé sur une ligne en rangée (l'espace avant chaque <br> garde les mots séparés) */
.a360-go { color: var(--muted-fg); display: grid; place-items: center; }
.a360-go svg { width: 16px; height: 16px; }
.a360-legend { display: none; }

/* — Format orbite (≥1024) — */
@media (min-width: 1024px) {
  .a360-stage { position: relative; max-width: 980px; aspect-ratio: 1000 / 760; margin: 56px auto 0; }
  .a360-decor { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
  .a360-orbit { fill: none; stroke: var(--border-subtle); stroke-width: 1; stroke-dasharray: 2 7; }
  .a360-link { fill: none; stroke: var(--exp); stroke-width: 1.5; opacity: .7; } /* trait PLEIN : le tracé dashoffset (GSAP) est incompatible avec un pointillé */
  .a360-dot { fill: var(--exp); }
  .a360-hub { position: absolute; left: 50%; top: 49.34%; translate: -50% -50%; width: 23%; aspect-ratio: 1; margin: 0; }
  .a360-nodes { margin: 0; }
  /* 16,4 % -> 19 % le 2026-08-20 (Loïc : « agrandir les bulles » en desktop) ;
     au pire des voisines (_2/_3) il reste ~65 px d'air, et 114 px devant le hub. */
  .a360-slot { position: absolute; translate: -50% -50%; width: 19%; aspect-ratio: 1; }
  .a360-slot + .a360-slot { border-top: 0; }
  .a360-slot._1 { left: 50%; top: 15.79%; }
  .a360-slot._2 { left: 79.8%; top: 32.5%; }
  .a360-slot._3 { left: 79.8%; top: 66.05%; }
  .a360-slot._4 { left: 50%; top: 82.89%; }
  .a360-slot._5 { left: 20.2%; top: 66.05%; }
  .a360-slot._6 { left: 20.2%; top: 32.5%; }
  .a360-node { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 7px; text-align: center; padding: 14px; min-height: 0;
    background: #fff; border: 1.8px solid var(--exp); border-radius: 50%;
    box-shadow: 0 16px 38px -26px rgba(15, 33, 56, .38);
    transition: transform 280ms cubic-bezier(.22,.7,.18,1), box-shadow 280ms ease-out; }
  .a360-node:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -26px rgba(15, 33, 56, .5); }
  .a360-ring { display: block; position: absolute; inset: -8%; width: 116%; height: 116%; animation: a360spin 26s linear infinite; }
  .a360-slot:nth-child(even) .a360-ring { animation-duration: 34s; animation-direction: reverse; }
  .a360-ring circle { fill: none; stroke: var(--exp); stroke-width: 1.3; stroke-dasharray: 72 28; opacity: .45; }
  .a360-ic { width: auto; height: auto; border: 0; background: none; border-radius: 0; }
  .a360-ic svg { width: 25px; height: 25px; }
  .a360-txt { display: contents; }
  /* l'expertise reste lue par lecteur d'écran (la couleur seule ne suffit pas) */
  .a360-exp { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .a360-t { font-size: var(--text-corps); line-height: 1.28; }
  .a360-t br { display: inline; }
  .a360-go { display: none; }
  .a360-legend { list-style: none; display: flex; justify-content: center; flex-wrap: wrap;
    gap: 10px 36px; margin: 38px 0 0; padding: 0; font-size: var(--text-corps); font-weight: 600; color: var(--muted-fg); }
  .a360-legend li { display: inline-flex; align-items: center; gap: 9px; }
  .a360-legend .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--exp); }
}
@keyframes a360spin { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .a360-hub-arcs, .a360-ring { animation: none; }
  .a360-hub-disc, .a360-node { transition: none; }
}

/* — Atouts (accueil) : « Ce que votre établissement y gagne » — les 4
   expertises du diagramme traduites en bénéfices, sous un arc d'orbite
   pointillé (≥1024) portant un point coloré par colonne. Couleurs --exp
   héritées des sélecteurs data-exp de la 360 (étendus ci-dessus). Aucun
   lien : réassurance pure, l'action vit dans le diagramme et le carton.
   ⚠️ Masquage d'entrée par gsap.set en JS UNIQUEMENT (contrat 360/carton) :
   rien n'est pré-masqué ici. */
.atouts { background: #fff; }
.atouts-head { max-width: 760px; margin: 0 auto; text-align: center; }
.atouts-head .section-title { margin-left: auto; margin-right: auto; }
.atouts-arc { display: none; }
.atouts-grid { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 20px; margin: 24px 0 0; padding: 0; }
.atouts-col { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px;
  align-items: start; }
.atouts-picto { width: 44px; height: 44px; margin-top: 2px; }
.atouts-txt { min-width: 0; }
.atouts-exp { display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--text-micro); font-weight: 600; letter-spacing: .02em; color: var(--muted-fg); }
.atouts-exp .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--exp); flex: none; }
.atouts-t { margin: 4px 0 5px; font-family: var(--font-display); font-weight: 560;
  font-size: 18px; line-height: 1.22; letter-spacing: -0.01em; color: var(--navy-ink); }
.atouts-p { margin: 0; font-size: var(--text-corps); line-height: 1.55; color: var(--muted-fg); }
/* Formation : le bénéfice est une liste de gestes, pas une phrase (demande
   Loïc 2026-08-14). Seule colonne à énumérer, donc seule à porter des puces —
   rondes, à la couleur de l'expertise, calées sur la première ligne. */
.atouts-list { list-style: none; margin: 7px 0 0; padding: 0;
  font-size: var(--text-corps); line-height: 1.5; color: var(--muted-fg); }
.atouts-list li { position: relative; padding-left: 15px; margin-top: 4px; }
.atouts-list li::before { content: ""; position: absolute; left: 0;
  top: calc(.75em - 2.5px); width: 5px; height: 5px; border-radius: 50%; background: var(--exp); }
@media (min-width: 640px) and (max-width: 1023px) {
  .atouts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 22px; margin-top: 28px; }
}
/* Format arc (≥1024) : 4 colonnes sous l'arc, points alignés sur les centres
   de colonnes (12,5 / 37,5 / 62,5 / 87,5 % — le SVG garde son ratio, les
   proportions tiennent à toute largeur de conteneur). Tiges PLEINES : le
   tracé dashoffset (GSAP) est incompatible avec un pointillé. */
@media (min-width: 1024px) {
  .atouts-arc { display: block; width: 100%; height: auto; margin: 30px 0 8px; }
  /* Perles rondes (dasharray quasi nul + linecap round) sur le dégradé
     #atouts-grad du markup : gris → la couleur de chaque expertise, atteinte
     juste avant son point (demande Loïc 2026-08-10). */
  .atouts-orbit { fill: none; stroke: url(#atouts-grad); stroke-width: 2.5; stroke-dasharray: 0.1 8; stroke-linecap: round; }
  .atouts-grad-start { stop-color: var(--border-subtle); }
  .atouts-grad-anesthesie { stop-color: var(--navy-medium); }
  .atouts-grad-formation { stop-color: var(--teal-success); }
  .atouts-grad-numerique { stop-color: var(--gold-accent); }
  .atouts-grad-personnel { stop-color: var(--orange-action); }
  .atouts-stem { stroke: var(--exp); stroke-width: 1.5; opacity: .7; }
  .atouts-dot { fill: var(--exp); }
  /* gap 0 + padding interne : les centres de colonnes restent à 12,5/37,5/
     62,5/87,5 % du conteneur à TOUTE largeur — une gouttière en gap
     décalerait les points de l'arc (mesuré : ±13px à 1280). */
  .atouts-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 0; }
  .atouts-col { display: block; padding: 0 17px; }
  .atouts-picto { width: 58px; height: 58px; margin: 0 0 12px; }
  .atouts-exp .dot { display: none; } /* le point de l'arc porte déjà la couleur */
  .atouts-t { font-size: 19.5px; margin: 5px 0 7px; }
  .atouts-p { font-size: var(--text-confort); }
  .atouts-list { font-size: var(--text-confort); }
}

/* ============================================================
   PLEINE PAGE (desktop ≥1024) — chaque section de l'accueil tient
   sur un écran : min-height 100vh, contenu centré verticalement,
   SANS snap ni pin (défilement libre). C'est la hauteur qui
   contraint (piège connu du projet) : le titre 360 se cale en vh,
   l'orbite en calc(100vh - réserve de l'en-tête) avec un plancher
   de 420px, et les textes de l'orbite en unités de conteneur
   (cqw) pour suivre sa taille. Sous ~760px de hauteur la section
   360 atteint son plancher et peut légèrement défiler : voulu
   (min-height, jamais de hauteur figée qui masquerait du
   contenu). Le padding haut de la 360 dégage la nav fixe (69px) ;
   témoignages et contact s'en écartent par leur centrage.
   Ne touche pas au mobile (<1024). Testé à 1280x720 / 1280x800 /
   1440x900. ============================ */
@media (min-width: 1024px) {
  .a360, .atouts, .testi, .contact { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
  /* Piège flex : .container a margin: 0 auto, et des marges transverses auto
     EMPÊCHENT l'étirement d'un item flex (priorité sur align-items: stretch) —
     le conteneur se rétractait à la largeur de son contenu (cartes témoignages
     écrasées). width: 100% ré-étire, max-width + marges auto recentrent. */
  .a360 > .container, .atouts > .container, .testi > .container, .contact > .container { width: 100%; }
  .a360 { padding: 84px 0 16px; }
  .atouts { padding: 48px 0 40px; }
  .testi { padding: 48px 0; }
  .contact { padding: 48px 0; }
  /* main .outro : la règle de base .outro (86vh) arrive plus LOIN dans le
     fichier, il faut la battre à la spécificité (l'ordre ne suffit pas) */
  main .outro { min-height: 100vh; }
  /* En-têtes des deux sections à diagramme, condensés et calés sur la HAUTEUR
     d'écran : sous chacune il y a une figure qui doit tenir dans la vue, donc
     c'est la hauteur qui commande, pas la largeur.
     ⚠️ Les DEUX ensemble, jamais l'une sans l'autre (Loïc 2026-08-17 : « il y a
     une différence de taille d'écriture entre la prise en charge et
     l'écosystème »). L'anneau n'avait pas de règle ici et retombait sur le
     clamp générique en 4.4vw : 56 px contre 45 à 1440x900, et jusqu'à 44 contre
     27 en tablette large. Deux sections qui se suivent avec le même en-tête
     (eyebrow + titre + lede) se règlent d'un seul endroit. */
  .a360-head h2.section-title, .apx-head h2.section-title { font-size: clamp(30px, 5vh, 52px); }
  .a360-head .section-lede, .apx-head .section-lede { font-size: 16px; }
  /* réserve 380px = paddings 100 + en-tête ~210 + marges stage/légende 50 + légende 20 */
  .a360-stage { height: min(745px, max(420px, calc(100vh - 380px))); width: auto; margin: 28px auto 0; container-type: size; }
  .a360-legend { margin-top: 22px; }
  .a360-t { font-size: clamp(11.5px, 2.3cqw, 15px); max-width: 86%; }
  .a360-ic svg { width: clamp(18px, 2.9cqw, 27px); height: clamp(18px, 2.9cqw, 27px); }
  .a360-node { padding: clamp(8px, 1.4cqw, 14px); gap: clamp(4px, 0.72cqw, 7px); }
  /* témoignages : bandeau resserré pour tenir l'écran */
  .testi-grid { margin-top: 32px; }
}

/* — PLEINE PAGE mobile / tablette (<1024) : mêmes intentions, en unités svh
   (les barres des navigateurs mobiles mangent le vh classique). La 360 se
   compacte (hub et rangées resserrés, cibles tactiles ≥ 44px conservées),
   les témoignages passent en CARROUSEL à balayage horizontal (une carte par
   écran, scroll-snap natif, zéro JS), le contact est centré mais garde son
   défilement quand son contenu dépasse : min-height, jamais de hauteur figée.
   Sur les petits téléphones (svh < ~750) la 360 peut déborder légèrement,
   c'est le même compromis assumé qu'en desktop court. — */
@media (max-width: 1023px) {
  .a360, .atouts, .testi, .contact { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
  .a360 > .container, .atouts > .container, .testi > .container, .contact > .container { width: 100%; }
  .a360 { padding: 84px 0 20px; }
  .atouts { padding: 76px 0 28px; }
  .testi { padding: 76px 0 28px; }
  .contact { padding: 84px 0 32px; }
  /* Outro : la vidéo est en 16:9 (1600x900) — en portrait, la couvrir plein
     écran ne montre qu'~1/5 de la scène (zoom flou, que de l'eau). On la
     redimensionne par format : bandeau aux 3/4 d'écran en tablette, plus
     court encore en mobile (bloc 640 plus bas), plein cadre en desktop.
     À ces hauteurs le cover n'écrête presque plus verticalement : ciel,
     montagnes, village et bateau tiennent tous dans le cadre. */
  main .outro { min-height: 76svh; }
  /* 360 compacte — et l'anneau de la prise en charge avec elle, même en-tête,
     même règle (cf. le bloc min-width: 1024px) */
  .a360-head h2.section-title, .apx-head h2.section-title { font-size: clamp(24px, 3.4svh, 34px); }
  .a360-head .section-lede, .apx-head .section-lede { font-size: var(--text-confort); line-height: 1.45; }
  .a360-stage { margin-top: 18px; }
  .a360-hub { width: clamp(84px, 13svh, 120px); }
  .a360-nodes { margin-top: 14px; }
  .a360-node { min-height: 52px; padding: 7px 2px; gap: 12px; grid-template-columns: 40px minmax(0, 1fr) auto; }
  .a360-ic { width: 40px; height: 40px; }
  .a360-ic svg { width: 18px; height: 18px; }
  .a360-exp { font-size: var(--text-micro); }
  .a360-t { font-size: var(--text-confort); }
  /* témoignages : carrousel à balayage, une carte par écran */
  .testi-grid { display: flex; gap: 14px; margin-top: 24px; overflow-x: auto;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 8px; }
  .testi-grid::-webkit-scrollbar { display: none; }
  /* scopé .testi-grid : ce repli (no-JS / reduced-motion) ne doit pas
     dimensionner les cartes une fois déplacées dans le carrousel .wheel */
  .testi-grid .testi-card { flex: 0 0 min(84%, 380px); scroll-snap-align: center; max-height: min(56svh, 460px); }
}

/* ============================================================
   FIRESIDE — hero encadré : deux lignes serif centrées sur deux
   niveaux + vidéo dans un cadre arrondi (barre-titre incluse),
   et OUTRO vidéo pleine largeur avant la prise de contact.
   ============================================================ */
.hero-fs { background: var(--gray-warm); min-height: 100vh; min-height: 100svh;
  display: flex; padding: 92px 0 26px; }
.hero-fs-inner { --hero-gap: clamp(18px, 3.4vh, 36px);
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--hero-gap); }
.hero-fs-h1 { text-align: center; margin: 0; color: var(--navy-deep);
  font-weight: 560; font-size: clamp(30px, 4.5vw, 62px); line-height: 1.08;
  letter-spacing: -0.01em; font-variation-settings: 'opsz' 120;
  /* le slogan tient sur une ligne en desktop et se coupe en deux en mobile :
     balance pour que la coupe tombe sur la virgule du miroir votre/notre. */
  text-wrap: balance; }
/* La moitié qui nous revient, en or (demande Loïc 2026-08-17). --gold-deep,
   l'or des titres : mesuré, il tient 3,2:1 sur le beige du hero, ce qui passe
   ici et seulement ici — le H1 fait 57,6 px en desktop et 27,8 px en mobile,
   donc « grand texte » au sens WCAG (seuil 3:1) aux deux formats. La même
   couleur sur une ligne de corps échouerait, d'où le --muted-fg de l'UVP. */
.hero-fs-h1 .or { color: var(--gold-deep); }
/* UVP. MÊME typo que le H1, en italique (demande Loïc 2026-08-17) : l'italique
   n'apparaît qu'ici dans le hero, il marque la ligne subordonnée. Couleur
   --muted-fg et surtout PAS l'or des .accent-i du site : mesuré, --gold-deep
   tombe à 3,2:1 sur le beige du hero, ce qui passe pour un H1 (gros texte,
   seuil 3:1) mais pas pour une ligne de ce corps ; --muted-fg tient 6,5:1.
   ⚠️ Elle est passée SOUS LA VIDÉO le 2026-08-17 : elle ne fait donc plus bloc
   avec le titre et ne porte plus le retrait négatif qui l'y collait. Elle est
   aussi sortie du pré-masquage : elle n'est plus animée (voir plus bas). */
/* ⚠️ La pente du clamp est calée sur la TABLETTE, pas sur le desktop. L'ancienne
   (1.35vw) ne valait que 10,4 px à 768 px de large : l'UVP y retombait sur son
   plancher de 15,5 px pendant que le titre faisait 34,6 px, et Loïc l'a signalé
   le 2026-08-17 (« on ne la voit pas bien en tablette »). 2.35vw la met à 18 px
   à 768 et atteint le plafond dès ~850 px, donc le desktop ne bouge pas.
   Le poids 450 (Fraunces est variable) compense l'affinement de l'italique
   serif aux petits corps. */
.hero-fs-lede { margin: 0; max-width: 62ch;
  text-align: center; text-wrap: pretty;
  font-family: var(--font-display); font-style: italic; font-weight: 450;
  font-size: clamp(16px, 2.35vw, 20px); line-height: 1.45;
  color: var(--muted-fg); }
/* Pré-masquage pour le reveal SplitText du H1 (anesthea.js) : évite le flash
   « titre plein -> effondré -> réanimé » au premier chargement, quand Fraunces
   arrive après le premier paint. visibility (pas opacity/display) : SplitText
   garde la géométrie pour mesurer, et l'espace reste réservé (zéro décalage).
   CONDITIONNEL, pour ne jamais bloquer le titre invisible côté défaut :
   - no-JS : un <noscript> placé APRÈS cette feuille (head.html) le repasse visible ;
   - reduced-motion : la media query juste dessous ;
   - JS sans GSAP : anesthea.js force visibility en inline-style.
   L'élément LCP reste l'image poster du cadre, plus grande, pas ce titre.
   ⚠️ Le TITRE SEUL : l'UVP n'est plus animée depuis le 2026-08-17 (demande
   Loïc), donc elle ne doit surtout pas être pré-masquée — sinon elle resterait
   invisible, plus personne ne la repassant visible. */
.hero-fs-h1 { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .hero-fs-h1 { visibility: visible; } }
/* La ligne « anesthésie . et . accompagnement » (.hero-brandline) qui ouvrait
   le hero a été RETIRÉE le 2026-08-17 à la demande de Loïc, markup et styles.
   Le lockup n'a pas disparu du site : il vit toujours en tête de la boucle
   hero-scenes*.mp4, où « anesth·é·a » se déploie. Le @font-face Geometrico Bold
   (tête de feuille) n'a plus d'usage CSS depuis ce retrait — il est GARDÉ
   volontairement, c'est la vraie typo du logo, à ne pas jeter sans décision.
   Pour restaurer la ligne : git show 50ec8e3 -- assets/css/anesthea.css. */
/* l'encadré absorbe la hauteur restante du premier écran (pas d'aspect-ratio
   fixe) : la vidéo remplit en cover — cinémascope sur desktop, plus carré
   sur mobile — et tout le hero tient dans 100svh.
   AGRANDI le 2026-08-17 (demande Loïc, en même temps que le nouvel ordre du
   hero) : le plafond passe de min(62vh, 640px) à min(72vh, 760px) et la largeur
   de 1060 à 1180 px. La place vient du retrait de la ligne de marque et du
   passage des deux portes en une seule rangée. ⚠️ C'est `flex: 1 1 0` qui fixe
   la hauteur réelle : le plafond ne sert que sur les écrans HAUTS. */
.hero-frame { position: relative; flex: 1 1 0; min-height: 200px; max-height: min(72vh, 760px);
  width: 100%; max-width: 1180px;
  border-radius: 28px; overflow: hidden;
  background: url('../images/hero-poster.jpg') center 40% / cover no-repeat; }
/* Titre de scène : CENTRÉ et plus affirmé (demande Loïc 2026-08-14 : « recentre
   les 4 expertises et mets-les en valeur »). Le voile vit sur ::before pour
   pouvoir disparaître EN FONDU pendant la scène du nom, qui n'a pas de titre :
   sans titre, pas de voile. */
.hero-frame-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  padding: 20px 24px 26px; pointer-events: none; text-align: center;
  font-family: var(--font-display); font-weight: 560; font-size: clamp(17px, 2vw, 27px);
  color: #fff; letter-spacing: .005em; text-shadow: 0 1px 14px rgba(15,33,56,.45);
  /* ⚠️ opsz FIGÉ À 20 — c'est l'esperluette qui commande (Loïc 2026-08-17 : « je
     veux le & que tu as mis dans la vidéo en mobile », « en desktop il n'est pas
     beau »). Fraunces change le DESSIN du « & » selon l'axe optique : classique
     jusqu'à opsz 20, variante ronde « wonky » à partir de 22 (mesuré glyphe par
     glyphe). La barre étant en clamp(17px, 2vw, 27px) avec
     `font-optical-sizing: auto`, le mobile restait à 17 (donc classique) et le
     desktop montait à 25,6 (donc rond) : deux esperluettes différentes sur le
     même site. On fige à 20, la plus haute valeur qui garde le « & » classique.
     Effet sur les lettres : négligeable à ce corps, vérifié en juxtaposition.
     Concerne les deux libellés qui portent un « & » (Ambulatoire & stationnaire,
     Application & site web). */
  font-variation-settings: 'opsz' 20;
  /* les libellés longs passent à 2 lignes en mobile : on coupe au point logique
     (après le séparateur) plutôt qu'en laissant « & » finir une ligne */
  text-wrap: balance; }
.hero-frame-bar::before { content: ""; position: absolute; inset: 0; z-index: -1;
  transition: opacity .45s ease;
  background: linear-gradient(180deg, rgba(15,33,56,.62), rgba(15,33,56,.22) 62%, rgba(15,33,56,0)); }
.hero-frame-bar.is-blank::before { opacity: 0; }
/* .no-anim : le tout premier état (scène du nom) est posé sans transition,
   sinon le voile se voit s'éteindre et le cadrage glisser au démarrage. */
.hero-frame-bar.no-anim::before { transition: none; }
/* La couleur porte le séparateur, pas le texte : l'or de la marque marque la
   césure « Domaine · précision » et le blanc garde son contraste sur la photo.
   Le domaine est légèrement appuyé pour la hiérarchie. */
.hero-frame-bar .fb-sep { color: var(--gold-accent); }
.hero-frame-bar .fb-dom { font-weight: 600; }
/* Titres de scène (spec 2026-07-26) : le JS remplace le texte de la barre par
   un rotateur à 2 couches superposées (crossfade opacity) calé sur les scènes
   de hero-scenes.mp4. Sans lecture vidéo, le texte source reste tel quel. */
.hero-frame-bar .fbar-rot { display: grid; }
/* > span : les DEUX couches du crossfade seulement. Sans le chevron, les spans
   internes du titre (.fb-dom / .fb-sep) héritaient de l'opacity 0 et le titre
   disparaissait. */
.hero-frame-bar .fbar-rot > span { grid-area: 1 / 1; opacity: 0; transition: opacity .3s ease; }
.hero-frame-bar .fbar-rot > span.is-on { opacity: 1; }
/* Les deux portes : empilées, même largeur, on choisit son monde. Le libellé
   porte le public, la ligne dessous ce qu'on y trouve ; pas de séparateur, la
   typo suffit. La flèche s'étend sur les 2 rangées.
   Couleurs reprises du système « deux mondes » de .split-pane : patient en
   clair, partenaire en navy-shell. Ce n'est pas décoratif, c'est le code du
   site. Et c'est aussi le seul lisible : mesuré, blanc sur --orange-action
   tombe à 2,97:1 (échoue même le seuil 3:1 du grand texte), blanc sur
   --navy-shell donne 14,02:1. */
/* CÔTE À CÔTE et à la même hauteur depuis le 2026-08-17 (demande Loïc) : les
   deux portes étaient empilées. `align-items: stretch` + `flex: 1 1 0` leur
   donne exactement la même largeur ET la même hauteur, quelle que soit la
   longueur des deux descriptifs. Repasse en colonne sous 640px (bloc mobile en
   fin de feuille) : à cette largeur, deux cartes côte à côte tomberaient sous
   les 44 px de cible tactile utile. */
.hero-fs-cta { display: flex; flex-direction: row; align-items: stretch;
  gap: 12px; width: min(880px, 100%); }
.hero-fs-cta .hero-door { flex: 1 1 0; min-width: 0; }
.hero-door { display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; column-gap: 16px;
  padding: 13px 20px; border-radius: 18px; text-align: left;
  background: #fff; border: 1px solid var(--border-subtle); color: var(--navy-deep);
  transition: transform 200ms ease-out, box-shadow 200ms ease-out, border-color 200ms ease-out; }
.hero-door .k { grid-column: 1; grid-row: 1; font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.hero-door .d { grid-column: 1; grid-row: 2; font-size: var(--text-corps); line-height: 1.35; color: var(--muted-fg); }
.hero-door svg { grid-column: 2; grid-row: 1 / span 2; width: 18px; height: 18px; flex: none; }
.hero-door:hover, .hero-door:focus-visible { transform: translateY(-2px); border-color: var(--navy-deep);
  box-shadow: 0 16px 34px -18px rgba(15,33,56,.4); outline: none; }
.hero-door--pro { background: var(--navy-shell); border-color: var(--navy-shell); color: #fff; }
.hero-door--pro .d { color: rgba(255,255,255,.82); }
.hero-door--pro svg { color: var(--gold-accent); }
.hero-door--pro:hover, .hero-door--pro:focus-visible { background: var(--navy-ink);
  border-color: var(--navy-ink); box-shadow: 0 16px 34px -18px rgba(15,33,56,.65); }
/* Les deux portes AGRANDIES à partir de la tablette (Loïc 2026-08-17 : « je
   trouve maintenant que Patient et Partenaire sont trop petits », en tablette).
   Le mobile est expressément exclu (min-width: 641px) : il a été validé tel
   quel, et sous 640 px les portes sont empilées et pleine largeur, elles n'ont
   pas le même problème d'échelle.
   Même piège que l'UVP : une pente en vw calée sur le desktop laisserait la
   tablette au plancher. 2.4vw / 1.9vw atteignent leur plafond vers 875 px, donc
   768 px profite de la montée. La hauteur gagnée est prise sur l'encadré vidéo
   (`flex: 1 1 0`), qui absorbe tout : vérifié, le hero tient toujours dans un
   écran aux quatre formats. */
@media (min-width: 641px) {
  .hero-door { padding: 20px 26px; border-radius: 20px; }
  .hero-door .k { font-size: clamp(18px, 2.4vw, 21px); }
  .hero-door .d { font-size: clamp(15px, 1.9vw, 16.5px); }
  .hero-door svg { width: 22px; height: 22px; }
}
/* Écrans COURTS (1280x720 et compagnie) : le hero tient toujours dans 100svh,
   mais c'est l'encadré vidéo qui paie — il est en flex: 1 1 0, donc il absorbe
   tout ce que les autres blocs prennent. Mesuré à 1280x720 : l'UVP a ramené la
   vidéo de 289 à 202 px de haut, soit une fente de 5,25:1, plus basse que les
   deux portes juste dessous. On récupère la place sur les marges du bloc, pas
   sur la vidéo (frame ~237 px, 4,5:1).
   min-width: 641px pour laisser le mobile au bloc 640, qui a déjà ses valeurs.
   La formule des retraits négatifs (.hero-brandline, .hero-fs-lede) est
   insensible au gap : les deux lignes du titre restent collées à 12 et 11 px. */
@media (min-width: 641px) and (max-height: 800px) {
  .hero-fs { padding-top: 78px; padding-bottom: 18px; }
  .hero-fs-inner { --hero-gap: 18px; }
}
/* ===========================================================================
   LE HERO TIENT DANS UN ÉCRAN À TOUS LES FORMATS (exigence Loïc 2026-08-17 :
   « ça doit tenir sur une page à chaque fois »)
   ===========================================================================
   Le bloc ci-dessus ne couvrait que les écrans larges et courts. Mesuré au
   balayage : à 320x568 le hero débordait de 127 px, à 812x375 (téléphone en
   PAYSAGE) de 189 px — la vidéo est en `flex: 1 1 0` mais son `min-height` de
   200 px l'empêchait de céder, et tous les autres postes gardaient leur taille
   de plein écran. On resserre donc par paliers de HAUTEUR, jamais de largeur
   seule. ⚠️ Les deux paliers commencent sous 700 px de haut : le 375x812 validé
   par Loïc (et tous les iPhone récents, ≥ 812) n'est PAS touché. */
/* Palier 1 — petits mobiles (iPhone SE 320x568, Android 360x640, iPhone 8
   375x667). Le descriptif de la porte patient passe à 2 lignes sous ~360 px,
   d'où la réduction de son corps. */
@media (max-width: 640px) and (max-height: 700px) {
  .hero-fs { padding: 76px 0 12px; }
  .hero-fs-inner { gap: 10px; }
  .hero-fs-h1 { font-size: clamp(22px, 6.2vw, 27px); }
  .hero-fs-lede { font-size: 14px; line-height: 1.4; }
  .hero-frame { min-height: 130px; }
  .hero-fs-cta { gap: 8px; }
  .hero-door { padding: 10px 16px; }
  .hero-door .k { font-size: 15px; }
  .hero-door .d { font-size: 13px; }
}
/* Palier 2 — toute fenêtre TRÈS basse, en pratique le téléphone tenu à
   l'horizontale (812x375, 667x375). Cas extrême assumé : la vidéo se réduit à
   une bande, mais rien ne disparaît et rien ne déborde. Le plafond `max-height`
   de l'encadré est levé, il n'a plus de sens ici. */
@media (max-height: 480px) {
  .hero-fs { padding: 72px 0 10px; }
  .hero-fs-inner { gap: 8px; }
  .hero-fs-h1 { font-size: clamp(20px, 2.6vw, 26px); }
  .hero-fs-lede { font-size: 13px; line-height: 1.35; max-width: 78ch; }
  .hero-frame { min-height: 104px; max-height: none; }
  .hero-fs-cta { gap: 8px; }
  .hero-door { padding: 8px 16px; }
  .hero-door .k { font-size: 15px; }
  .hero-door .d { font-size: 13px; }
}
/* ===========================================================================
   Encre du header — décidée par la PAGE, jamais par le scroll
   ===========================================================================
   Le verre étant clair, c'est le fond de la page qui porte le contraste. Or il
   est crème ou blanc presque partout ; seules exceptions à tête navy : le monde
   partenaire (hero navy) et le tunnel du parcours patient (bandeau
   .parcours-head des 5 étapes + antichambre .pp-gate, tous deux navy-deep).
   D'où le :not() plutôt qu'une liste positive — une nouvelle page claire hérite
   de l'encre navy sans qu'on y pense, et c'est le cas courant.
   Le blanc de base de .nav-link/.nav-brand/.nav-burger reste donc en place pour
   ces mondes navy (wordmark blanc, é + demi-lune déjà en or deep), et pour le
   panneau burger (fond navy) ci-dessous. */
body:not(:has(.espace-hero--partenaire, .parcours-head, .pp-gate)) .topnav .brand-wordmark { color: var(--navy-ink); }
body:not(:has(.espace-hero--partenaire, .parcours-head, .pp-gate)) .topnav .nav-burger { color: var(--navy-ink); }
/* Encre sombre : nav inline DESKTOP uniquement. Au ≤1024px les liens vivent dans
   le panneau burger, qui a son propre fond navy → ils y restent clairs. */
@media (min-width: 1025px) {
  body:not(:has(.espace-hero--partenaire, .parcours-head, .pp-gate)) .topnav .nav-link { color: rgba(15,33,56,.8); border-color: rgba(15,33,56,.24); }
  body:not(:has(.espace-hero--partenaire, .parcours-head, .pp-gate)) .topnav .nav-link:hover { color: #fff; background: var(--navy-ink); border-color: var(--navy-ink); box-shadow: 0 12px 26px -14px rgba(15,33,56,.5); }
}
/* Les mondes navy gardent leur teinte : hero partenaire et écrans du parcours
   sont navy, le blanc de base y tient (14:1) — et la teinte reste derrière
   l'encre blanche quand le contenu clair des étapes défile dessous. */
body:has(.espace-hero--partenaire, .parcours-head, .pp-gate) .topnav { background: var(--navy-glass); border-bottom-color: rgba(255,255,255,0.06); }

/* Halo — SEULEMENT l'accueil. Le verre clair laisse défiler dessous des photos
   dont le fond va du ciel clair (encre navy à 9,9:1) à l'eau nuit (1,1:1, logo
   invisible). L'encre ne pouvant pas s'adapter sans réintroduire le flip qu'on
   vient de retirer, on donne au logo et au burger un liseré blanc via drop-shadow
   (qui suit la forme des lettres, contrairement à un box-shadow) : imperceptible
   sur le crème — halo blanc sur crème quasi blanc — il décolle le tracé dès que le
   fond fonce. Les 19 autres pages navy sont uniformément claires, elles n'en ont
   pas besoin, donc on ne les alourdit pas. */
body:has(.hero-fs) .topnav .brand-wordmark,
body:has(.hero-fs) .topnav .nav-burger {
  filter: drop-shadow(0 0 2px rgba(255,255,255,.55)) drop-shadow(0 0 6px rgba(255,255,255,.4));
}
/* Les liens de nav (desktop) tombent aussi sous l'outro plein cadre : mesuré à
   4,1:1 sur ses bandes bleu moyen, sous AA. Même liseré, en text-shadow puisque
   ce sont de vraies lettres, pas un masque. */
@media (min-width: 1025px) {
  body:has(.hero-fs) .topnav .nav-link {
    text-shadow: 0 0 2px rgba(255,255,255,.6), 0 0 6px rgba(255,255,255,.45);
  }
}

/* « Réduire la transparence » (réglage système iOS/macOS). Attention au piège :
   opacifier le header en navy plein rendrait l'encre navy des 20 pages claires
   invisible. Le verre clair n'a de toute façon aucun fond à opacifier — on retire
   juste le flou, et l'encre navy sur page claire reste lisible telle quelle. Seule
   la teinte des mondes navy (partenaire + parcours) devient pleine. */
@media (prefers-reduced-transparency: reduce) {
  .topnav { backdrop-filter: none; -webkit-backdrop-filter: none; }
  body:has(.espace-hero--partenaire, .parcours-head, .pp-gate) .topnav { background: var(--navy-shell); }
}

.outro { position: relative; overflow: hidden; isolation: isolate; min-height: 86vh;
  display: flex; align-items: flex-end;
  background: url('../images/hero-poster.jpg') center 40% / cover no-repeat; }
.outro-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgba(15,33,56,.55) 0%, rgba(15,33,56,0) 36%); }
.outro-inner { position: relative; z-index: 2; width: 100%; padding-bottom: 9vh; }
/* aligné à DROITE depuis le 2026-08-19 (demande Loïc) : la signature se pose
   dans le coin bas-droit de la vidéo. Le bord suivi est celui du .container,
   pas celui de la fenêtre, pour rester sur la grille du site. */
.outro-line { margin: 0; color: #fff; font-size: clamp(30px, 4vw, 54px); line-height: 1.06;
  text-align: right; }

@media (max-width: 640px) {
  .hero-fs { padding: 84px 0 18px; }
  .hero-fs-inner { gap: 16px; }
  .hero-fs-h1 { font-size: clamp(26px, 7.4vw, 34px); }
  .hero-frame { border-radius: 18px; }
  .hero-frame-bar { padding: 12px 16px; }
  /* les deux portes se réempilent : côte à côte, à 375px, chaque carte ferait
     ~160px de large et le descriptif passerait à trois lignes. */
  .hero-fs-cta { flex-direction: column; width: 100%; }
  .hero-fs-cta .btn, .hero-fs-cta .phone-strong { flex: 1 1 100%; justify-content: center; }
  /* main .outro : même spécificité que la règle 76svh tablette, plus tard
     dans le fichier — c'est elle qui gagne sous 640px. */
  main .outro { min-height: 58svh; }
}

/* ============================================================
   ESPACES — split deux mondes (espaces.html) + squelettes P8
   ============================================================ */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* espaces.html (split 2-colonnes) retiré : la grille .split n'existe plus. Les
   classes .split-pane* / .split-eyebrow / .split-title / .split-lede / .split-cta
   / .split-more ci-dessous sont RÉUTILISÉES par .espace-hero (pages de garde). */
.split-pane { display: flex; flex-direction: column; justify-content: center;
  padding: clamp(110px, 16vh, 170px) clamp(24px, 5vw, 76px) clamp(48px, 8vh, 96px); }
.split-pane.patient { background: var(--gray-warm); }
.split-pane.partenaire { background: var(--navy-shell); }
.split-eyebrow { align-self: center; display: inline-block; padding: 8px 22px;
  border: 1px solid; border-radius: 999px; font-family: var(--font-mono);
  font-size: var(--text-meta); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.patient .split-eyebrow { color: var(--gold-warm); border-color: rgba(212, 168, 74, .55); background: rgba(212, 168, 74, .07); }
.partenaire .split-eyebrow { color: var(--gold-accent); border-color: rgba(212, 168, 74, .45); background: rgba(212, 168, 74, .10); }
.split-title { margin: 18px 0 0; font-size: clamp(32px, 3.6vw, 54px); line-height: 1.06;
  letter-spacing: -0.015em; font-weight: 560; max-width: 12em; }
.patient .split-title { color: var(--navy-deep); }
.partenaire .split-title { color: #fff; }
.split-lede { margin: 18px 0 0; font-size: 16px; line-height: 1.6; max-width: 30em; }
.patient .split-lede { color: var(--muted-fg); }
.partenaire .split-lede { color: rgba(255,255,255,.78); }
.split-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 30px; }
.split-more { font-size: var(--text-corps); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.patient .split-more { color: var(--navy-deep); }
.partenaire .split-more { color: rgba(255,255,255,.85); }
/* .split-after / .split-join / .split-signature retirés avec espaces.html */
/* Volets côte à côte : le titre partenaire fait 3 lignes, le patient 2. On
   réserve 3 lignes de titre des deux côtés (min-height ≈ 3 lignes, line-height
   1.06) pour que eyebrow, titre, lede et boutons tombent au même niveau. */
@media (min-width: 881px) {
  .split-title { min-height: 3.2em; }
  /* fantôme (pseudo) côté patient : réserve la hauteur de la ligne
     « Médecin anesthésiste ? » du volet partenaire, pour que les deux blocs
     centrés gardent la même hauteur et restent alignés — la ligne reste
     groupée sous les CTA partenaire */
  .split-pane.patient::after { content: "Médecin anesthésiste FMH indépendant·e ? Devenez membre accrédité Anesthéa →";
    visibility: hidden; margin-top: 26px; padding-top: 20px; font-size: 14.5px;
    max-width: 30em; border-top: 1px solid transparent; }
}
@media (max-width: 880px) {
  .split { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .split-pane { min-height: 54svh; padding: 110px 24px 48px; }
  .split-pane.partenaire { padding-top: 56px; }
  .split-after-inner { flex-direction: column; align-items: flex-start; }
}

/* — Hero « page de garde » d'un espace : un seul pane, pleine largeur, en tête de
   page. Réutilise .split-pane / .split-eyebrow / .split-title / .split-lede /
   .split-cta. Revue UI/UX (pattern « Minimal Single Column ») : composition
   CENTRÉE et respirante. L'héritage du split 2-colonnes laissait l'eyebrow centré
   mais titre/lede/CTA collés à gauche → petit bloc déséquilibré, ~55 % de vide à
   droite. On centre tout, on agrandit le titre, on maîtrise la mesure. */
.espace-hero { display: flex; }
.espace-hero .split-pane {
  flex: 1; min-height: 100vh; min-height: 100svh;
  align-items: center; text-align: center;
  gap: clamp(32px, 6.3vh, 72px); /* respiration généreuse ENTRE chaque bloc (eyebrow / titre / lede / CTA) */
  padding: clamp(100px, 12vh, 124px) clamp(24px, 6vw, 64px) clamp(56px, 8vh, 88px);
}
.espace-hero--patient .split-pane { background: var(--gray-warm); }
.espace-hero--partenaire .split-pane { background: var(--navy-shell); }
.espace-hero .split-pane.patient::after { content: none; } /* pas d'alignement fantôme hors split 2-colonnes */
.espace-hero .split-eyebrow { margin: 0; }
.espace-hero .split-title { margin: 0; min-height: 0; max-width: 14em; font-size: clamp(36px, 5vw, 68px); line-height: 1.08; }
.espace-hero .split-lede { margin: 0; max-width: 52ch; font-size: clamp(16px, 1.25vw, 19px); }
.espace-hero .split-cta { margin: 0; justify-content: center; }
@media (max-width: 640px) {
  .espace-hero .split-pane { padding-top: 100px; gap: clamp(28px, 4.8vh, 42px); }
  .espace-hero .split-title { font-size: clamp(34px, 9.2vw, 46px); }
}
/* Page équipe : « page de garde » plein écran — seulement le titre « Notre
   équipe » + la galerie de cartes, centrés verticalement, footer masqué (sous la
   ligne de flottaison). Tient sur un écran, desktop comme mobile. */
body:has(.js-scatter) footer, body:has(.js-deck) footer { display: none; }
/* page « une vue » : on borne le défilement — les cartes qui montent du bas
   pendant l'entrée (et le léger débord de la pile) ne créent pas de scroll. */
/* … mais uniquement quand le JS a posé son mode (scatter/deck) : sans JS ou en
   mouvement réduit, la pile de cartes empilées doit pouvoir défiler. */
:root:has(.js-scatter), :root:has(.js-deck), body:has(.js-scatter), body:has(.js-deck) { overflow: hidden; }
body:has(.page-head.equipe) #main { min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center; }
body:has(.page-head.equipe) .page-head { text-align: center; padding: 84px 0 0; }
body:has(.page-head.equipe) .section { padding: 16px 0 24px; }

/* ===== Page d'accès « maintenir pour déverrouiller » (parcours-acces.html) =====
   Antichambre navy plein écran, carte crème centrée. Preuve d'interaction humaine
   avant d'ouvrir le parcours : on maintient le bouton, la barre se remplit dessus. */
.pp-gate { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center;
  background: var(--navy-deep); padding: clamp(100px, 14vh, 140px) 20px clamp(48px, 8vh, 80px); }
.pp-gate-card { width: min(100%, 33rem); text-align: center; display: flex; flex-direction: column; align-items: center;
  gap: clamp(16px, 2.6vh, 26px); padding: clamp(30px, 5vw, 52px) clamp(24px, 5vw, 46px);
  background: var(--gray-warm); border: 1px solid rgba(212, 168, 74, .22); border-radius: 26px;
  box-shadow: 0 44px 100px -46px rgba(0, 0, 0, .65); }
.pp-gate-eyebrow { font-family: var(--font-mono); font-size: var(--text-meta); font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-warm); }
.pp-gate-title { margin: 0; font-size: clamp(28px, 4.4vw, 40px); line-height: 1.1; letter-spacing: -.015em;
  font-weight: 560; color: var(--navy-deep); }
.pp-gate-lede { margin: 0; max-width: 42ch; font-size: var(--text-confort); line-height: 1.6; color: var(--muted-fg); }
.pp-gate-hint { margin: 2px 0 0; font-size: var(--text-meta); line-height: 1.5; color: var(--muted-fg); opacity: .85; }
.pp-gate-hint.is-insist { color: var(--navy-ink); opacity: 1; font-weight: 600; }

/* Bouton hold : barre de progression directement sur le bouton */
.hold-gate { position: relative; overflow: hidden; isolation: isolate; margin-top: 6px;
  width: 100%; max-width: 340px; justify-content: center; padding: 16px 30px; font-size: var(--text-confort);
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  transition: box-shadow 200ms ease-out, transform 120ms ease-out; }
.hold-gate .hold-gate-label { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 8px; pointer-events: none; }
.hold-gate .hold-gate-fill { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(255, 255, 255, .38); transform: scaleX(0); transform-origin: left center; will-change: transform; }
.hold-gate.is-resetting .hold-gate-fill { transition: transform .32s cubic-bezier(.4, 0, .2, 1); }
.hold-gate.is-holding { box-shadow: 0 0 0 4px rgba(224, 123, 57, .28), 0 10px 24px -6px rgba(196, 93, 31, .45); }
.hold-gate.is-done .hold-gate-fill { background: rgba(255, 255, 255, .52); }
@media (prefers-reduced-motion: reduce) { .hold-gate.is-resetting .hold-gate-fill { transition: none; } }

/* ===== Flux parcours patient (page d'accès + 7 étapes) : chaque écran = UNE VUE.
   Pas de footer, pas de scroll de page, desktop ET mobile. Sur petit écran le
   gros poste est l'en-tête (barre de progression + H1 + lede) : on le resserre
   fortement — l'interactif (champs, boutons) garde ses tailles tactiles. ===== */
body:has(.oneview.parcours) footer,
body:has(.pp-gate) footer { display: none; }

@media (max-width: 1080px) {
  body:has(.oneview.parcours) #main { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
  body:has(.oneview.parcours) .section.oneview.parcours {
    flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; padding: 8px 0 16px; }
  body:has(.oneview.parcours) .parcours-head { padding: 84px 0 2px; }
  body:has(.oneview.parcours) .parcours-head .page-h1 { font-size: clamp(24px, 5.6vw, 31px); line-height: 1.12; margin: 4px 0; }
  body:has(.oneview.parcours) .parcours-head .pp-lead,
  body:has(.oneview.parcours) .parcours-head .page-lede { font-size: 14px; line-height: 1.45; margin-top: 6px; }
  /* Champs à 16px : évite le zoom auto iOS au focus (préserve le « sans scroll ») */
  body:has(.oneview.parcours) input,
  body:has(.oneview.parcours) select,
  body:has(.oneview.parcours) textarea { font-size: 16px; }
  /* Écran 5 (fin) : l'encadré hypnose → on resserre pour tenir l'écran */
  body:has(.oneview.parcours) .direct { padding: 18px 20px; }
  body:has(.oneview.parcours) .direct h2 { margin-bottom: 6px; font-size: 20px; }
  body:has(.oneview.parcours) .direct p { margin-bottom: 12px; font-size: 14px; }
  /* Étape 4 (appel + équipe) : fiches membres en rangée compacte pour tenir l'écran
     avec le bloc « urgence » (scopé #pp-equipe → la page Équipe autonome est intacte) */
  body:has(.oneview.parcours) .pp-equipe { gap: 10px; margin: 8px 0 4px; }
  body:has(.oneview.parcours) #pp-equipe .member {
    display: grid; grid-template-columns: auto 1fr; align-items: center;
    column-gap: 14px; row-gap: 1px; padding: 12px 16px; }
  /* écran 4 rééquilibré le 2026-08-20 (Loïc) : le médecin d'abord (portrait
     72 px, nom 19), l'urgence en retrait (amorce discrète, boutons côte à
     côte compacts — et le tel est passé btn-outline dans le markup). */
  body:has(.oneview.parcours) #pp-equipe .member .avatar { grid-row: 1 / span 3; width: 72px; height: 72px; font-size: 22px; margin: 0; }
  body:has(.oneview.parcours) #pp-equipe .member .name { margin: 0; font-size: 19px; }
  body:has(.oneview.parcours) #pp-equipe .member .role { margin: 0; font-size: 13px; }
  body:has(.oneview.parcours) #pp-equipe .member .hint { margin: 3px 0 0; font-size: 12px; }
  body:has(.oneview.parcours) .direct #pp-direct-lead { font-size: 13px; color: var(--muted-fg); }
  body:has(.oneview.parcours) .direct .row { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; }
  body:has(.oneview.parcours) .direct .row .btn { width: auto; flex: 0 0 auto; padding: 10px 12px; font-size: 13.5px; }
  /* Écran 2 (documents, 2026-08-20) : deux fichiers CMDL + trois retours
     débordaient de ~90px en 390x844 avec les réglages desktop. Rangées de
     téléchargement compactes, carte moins rembourrée (302px de texte utile
     à 390 avec 28px de padding, c'était le premier poste de replis de
     lignes) — la carte est partagée par les 5 écrans, tous y gagnent. */
  body:has(.oneview.parcours) .pp-card { padding: 20px 16px; }
  body:has(.oneview.parcours) .pp-docs { gap: 8px; margin-bottom: 12px; }
  /* rangée en grille : badge | titre | télécharger, sous-titre dessous —
     en flex, « Télécharger » prenait sa propre rangée (~28px par carte) */
  body:has(.oneview.parcours) .pp-doc { display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center; column-gap: 10px; row-gap: 3px; padding: 10px 12px; }
  body:has(.oneview.parcours) .pp-doc-body { display: contents; }
  body:has(.oneview.parcours) .pp-doc-badge { grid-row: 1; grid-column: 1; font-size: 10px; padding: 3px 5px; border-radius: 6px; }
  body:has(.oneview.parcours) .pp-doc-t { grid-row: 1; grid-column: 2; font-size: 15px; }
  body:has(.oneview.parcours) .pp-doc-s { grid-row: 2; grid-column: 2 / 4; font-size: 12.5px; }
  body:has(.oneview.parcours) .pp-doc-go { grid-row: 1; grid-column: 3; margin: 0; font-size: 12px; }
  body:has(.oneview.parcours) .pp-retours-titre { font-size: 16px; margin-bottom: 6px; }
  body:has(.oneview.parcours) .pp-retours { gap: 5px; font-size: 13px; line-height: 1.5; }
  body:has(.oneview.parcours) .pp-doc-row { margin: 8px 0 6px; }
  body:has(.oneview.parcours) .pp-card .profil-note { font-size: 12px; }
  body:has(.oneview.parcours) .pp-nav { margin-top: 12px; }
  /* écran 3 : le double bloc adultes/enfants s'empile — lignes resserrées */
  body:has(.oneview.parcours) .pp-jeune-cols { gap: 12px; margin-bottom: 10px; }
  body:has(.oneview.parcours) .pp-jeune { gap: 6px; }
  body:has(.oneview.parcours) .pp-jeune li { font-size: 13.5px; line-height: 1.5; }
  body:has(.oneview.parcours) .pp-check { margin: 12px 0 4px; }
  /* écran 4 : le panneau du verrou documents, compact en mobile */
  body:has(.oneview.parcours) .pp-verrou-titre { font-size: 19px; }
  body:has(.oneview.parcours) .pp-verrou-lead { font-size: 13.5px; }
  body:has(.oneview.parcours) .pp-verrou-voile { gap: 8px; padding: 6px; }
  body:has(.oneview.parcours) .pp-verrou-voile .pp-spec { font-size: 15.5px; padding: 12px 15px; }
}

/* Écrans 2-3 sur téléphone (≤ 860px de haut : couvre les 844 des iPhone
   courants ET les 812 des petits modèles) — même logique que le bloc desktop
   max-height : les replis de lignes se cumulent en étroit. Gate passée de
   830 à 860 le 2026-08-20 quand la ligne GLP-1 a fait déborder le 390x844. */
@media (max-width: 640px) and (max-height: 860px) {
  body:has(.oneview.parcours) .parcours-head { padding-top: 78px; }
  body:has(.oneview.parcours) .parcours-head .page-h1 { font-size: 20px; margin: 2px 0; }
  body:has(.oneview.parcours) .parcours-head .pp-lead { font-size: 13px; line-height: 1.4; margin-top: 4px; }
  body:has(.oneview.parcours) .pp-card { padding: 16px 14px; }
  body:has(.oneview.parcours) .pp-docs { gap: 6px; margin-bottom: 10px; }
  body:has(.oneview.parcours) .pp-doc-t { font-size: 14.5px; }
  body:has(.oneview.parcours) .pp-doc-s { font-size: 12px; }
  body:has(.oneview.parcours) .pp-retours-titre,
  body:has(.oneview.parcours) .pp-jeune-titre { font-size: 15px; margin-bottom: 4px; }
  body:has(.oneview.parcours) .pp-retours { gap: 4px; font-size: 12.5px; }
  body:has(.oneview.parcours) .pp-doc-row { margin: 6px 0 4px; }
  body:has(.oneview.parcours) .pp-card .profil-note { font-size: 11.5px; }
  body:has(.oneview.parcours) .pp-nav { margin-top: 10px; }
  body:has(.oneview.parcours) .pp-jeune-cols { gap: 9px; margin-bottom: 8px; }
  body:has(.oneview.parcours) .pp-jeune { gap: 4px; }
  body:has(.oneview.parcours) .pp-jeune li { font-size: 12.5px; line-height: 1.45; }
  body:has(.oneview.parcours) .pp-jeune-titre { font-size: 14px; margin-bottom: 3px; }
}

/* Piliers (espace-partenaire, rejoindre) */
.pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 8px; }
@media (max-width: 880px) { .pillars { grid-template-columns: minmax(0, 1fr); } }
.pillar { background: #fff; border: 1px solid var(--border-subtle); border-radius: 18px; padding: 26px; }
.pillar h3 { margin: 0 0 8px; font-size: 21px; color: var(--navy-deep); }
.pillar p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.55; color: var(--muted-fg); }
.pillar .plink { font-size: 13px; font-weight: 600; color: var(--navy-deep);
  text-decoration: underline; text-underline-offset: 4px; }

/* Étapes du parcours patient (squelette) */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 980px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .steps { grid-template-columns: minmax(0, 1fr); } }
.step { background: #fff; border: 1px solid var(--border-subtle); border-radius: 18px; padding: 24px; }
.step .k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-warm); }
.step h3 { margin: 10px 0 8px; font-size: 20px; color: var(--navy-deep); }
.step p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted-fg); }

/* Espace patient — parcours « rivière » : tracé SVG qui se dessine au scroll */
.esp-river { padding-top: 20px; }
.river { position: relative; max-width: 720px; margin: 0 auto; }
.river-line { position: absolute; left: 0; top: 0; width: 120px; height: 100%; overflow: visible; pointer-events: none; }
.river-bg { fill: none; stroke: var(--border-subtle); stroke-width: 2; }
.river-fg { fill: none; stroke: var(--gold-deep); stroke-width: 2.6; stroke-linecap: round; }
.river-dot { position: absolute; left: 0; top: 0; width: 15px; height: 15px; border-radius: 50%; z-index: 2;
  background: radial-gradient(circle, var(--gold-accent), rgba(212,168,74,.12) 70%, transparent);
  transform: translate(-50%,-50%); opacity: 0; transition: opacity .4s ease; pointer-events: none; }
.river-steps { position: relative; z-index: 1; display: grid; gap: 30px; margin: 0; padding: 0; list-style: none; }
.river-step { display: grid; grid-template-columns: 120px minmax(0,1fr); align-items: center; }
.river-node { width: 16px; height: 16px; border-radius: 50%; justify-self: center;
  background: var(--neutral-bg); border: 2px solid var(--border-subtle);
  transition: background .5s ease, border-color .5s ease, box-shadow .5s ease; }
.river-step:nth-child(odd) .river-node { transform: translateX(-26px); }
.river-step:nth-child(even) .river-node { transform: translateX(26px); }
.river-node.lit { border-color: var(--gold-deep); background: var(--gold-deep);
  box-shadow: 0 0 0 5px rgba(212,168,74,.16), 0 0 16px rgba(212,168,74,.4); }
.river-card { --glow: 0; background: var(--neutral-bg); border-radius: 18px; padding: 22px 24px;
  border: 1px solid color-mix(in srgb, var(--gold-deep) calc(var(--glow) * 100%), var(--border-subtle));
  box-shadow: 0 6px 30px -10px rgba(165,130,42, calc(var(--glow) * .42)); }
.river[data-anim] .river-card { opacity: var(--rev, 0); transform: translateY(calc((1 - var(--rev, 0)) * 22px)); }
.river[data-anim] .river-node { opacity: var(--rev, 0); }
.river-n { font-family: var(--font-mono); font-size: var(--text-meta); letter-spacing: .14em; color: var(--gold-deep); }
.river-card h3 { font-family: var(--font-display); font-weight: 560; font-size: 22px; letter-spacing: -.01em;
  color: var(--navy-deep); margin: 6px 0 8px; }
.river-card p { margin: 0; font-size: var(--text-corps); line-height: 1.6; color: var(--muted-fg); }
.river-card .btn { margin-top: 16px; }
.river-card--photo { position: relative; overflow: hidden; min-height: 264px;
  display: flex; flex-direction: column; justify-content: center; }
/* Photo porteuse en <img> (lot M3, SEO images + alt) : l'image remplit la carte
   SOUS le voile ::before (z-index 1) ; --river-pos, posé en style inline par la
   page, pilote object-position comme il pilotait background-position. */
.river-card--photo .river-photo { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--river-pos, center 32%); z-index: 0; border-radius: inherit; }
.river-card--photo::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1;
  background: linear-gradient(90deg, var(--neutral-bg) var(--veil-a, 42%), color-mix(in srgb, var(--neutral-bg) 62%, transparent) var(--veil-b, 60%), transparent var(--veil-c, 84%)); }
.river-card--photo > * { position: relative; z-index: 1; }
.river-card--photo > :is(.river-n, h3, p, .plink) { max-width: 56%; }

/* Accompagnement — cartes révélées au scroll + contour or (sans serpentin) */
.glow-cards { display: grid; gap: 22px; max-width: 720px; margin: 0 auto; }
.glow-cards[data-anim] .river-card { opacity: var(--rev, 0); transform: translateY(calc((1 - var(--rev, 0)) * 22px)); }
.river-contact { text-align: center; margin-top: 34px; }
.river-contact p { font-size: var(--text-corps); color: var(--muted-fg); margin: 0 0 12px; }
@media (max-width: 560px) {
  .river-line { width: 60px; }
  .river-step { grid-template-columns: 60px minmax(0,1fr); }
  .river-step:nth-child(odd) .river-node { transform: translateX(-14px); }
  .river-step:nth-child(even) .river-node { transform: translateX(14px); }
  /* Cartes photo : sur mobile, photo en haut + texte en bas sur voile crème vertical */
  .river-card--photo { min-height: 420px; justify-content: flex-end; }
  .river-card--photo .river-photo { object-position: 72% top; }
  /* Voile crème translucide sur toutes les cartes : on devine le décor derrière, texte lisible grâce à l'ombre crème */
  .river-card--photo::before { background: linear-gradient(0deg, color-mix(in srgb, var(--neutral-bg) 74%, transparent) 0, color-mix(in srgb, var(--neutral-bg) 64%, transparent) 50%, transparent 76%); }
  .river-card--photo > :is(.river-n, h3, p, .plink) { max-width: none; text-shadow: 0 1px 12px var(--neutral-bg), 0 0 5px var(--neutral-bg); }
  /* Première vue mobile : nav + en-tête + carte 1 tiennent sans scroll (svh = barre d'URL prise en compte) — espace-patient ET accompagnement */
  .page-head.esp-patient, .page-head.acc-head { padding-top: 74px; padding-bottom: 12px; }
  .esp-patient .page-h1, .acc-head .page-h1 { font-size: 27px; line-height: 1.12; }
  .esp-patient .page-lede, .acc-head .page-lede { font-size: var(--text-corps); line-height: 1.45; margin-top: 8px; }
  .esp-river, .acc-section { padding-top: 8px; }
  .river-step:first-child .river-card--photo { min-height: calc(100vh - 240px); min-height: calc(100svh - 240px); }
  .glow-cards .river-card--photo:first-child { min-height: calc(100vh - 240px); min-height: calc(100svh - 240px); }
}
@media (prefers-reduced-motion: reduce) {
  .river-dot { display: none; }
}

/* Bloc contact direct (pages demande v1 légère) */
.direct .lien-wa { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px;
  font-weight: 600; color: var(--navy-deep); text-decoration: underline; text-underline-offset: 4px; }
.direct .lien-wa svg { width: 15px; height: 15px; }
.direct .row { align-items: center; }
.direct { background: #fff; border: 1px solid var(--border-subtle); border-radius: 18px;
  padding: 28px; max-width: 560px; }
.direct h2 { margin: 0 0 10px; font-size: 24px; color: var(--navy-deep); }
.direct p { margin: 0 0 18px; color: var(--muted-fg); font-size: var(--text-confort); line-height: 1.55; }
.direct .row { display: flex; flex-wrap: wrap; gap: 12px; }

/* Besoin urgent (espace partenaire) */
.urgent { background: var(--navy-ink); border-radius: 18px; padding: 26px 28px; color: #fff;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.urgent strong { font-family: var(--font-display); font-size: 22px; font-weight: 560; }
.urgent a { color: var(--gold-accent); font-family: var(--font-mono); font-weight: 600; font-size: 18px; }

/* ============================================================
   MONDE PATIENT (P8·B) — membres/fiche, profil local, préparation,
   documents
   ============================================================ */
.members { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 980px) { .members { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .members { grid-template-columns: minmax(0, 1fr); } }
.member { text-align: left; background: #fff; border: 1px solid var(--border-subtle);
  border-radius: 18px; padding: 24px; cursor: pointer; font: inherit; color: inherit;
  transition: transform 200ms ease-out, box-shadow 200ms ease-out, border-color 200ms ease-out; }
.member:hover, .member:focus-visible { transform: translateY(-2px); border-color: var(--navy-deep);
  box-shadow: 0 16px 34px -18px rgba(15,33,56,.35); outline: none; }
.member .avatar, .fiche-avatar { width: 56px; height: 56px; border-radius: 999px;
  background: var(--navy-shell); color: var(--gold-accent); display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 560; font-size: 19px; overflow: hidden; }
/* portrait du médecin (écran 4 + fiche) : cadrage haut, le crâne des portraits
   4:5 de la série est à ~7-10 % du haut */
.member .avatar img, .fiche-avatar img { width: 100%; height: 100%; object-fit: cover;
  object-position: center 12%; display: block; }
/* la fiche du parcours (écran 4) centre son en-tête : portrait agrandi, nom
   et rôle centrés (demande Loïc 2026-08-20) */
.fiche-avatar { width: 104px; height: 104px; margin: 0 auto; font-size: 30px; }
.fiche-name, .fiche-role { text-align: center; }
.member .name { display: block; margin: 14px 0 2px; font-family: var(--font-display); font-weight: 560; font-size: 20px; color: var(--navy-deep); }
.member .role { font-size: var(--text-meta); color: var(--muted-fg); }
.member .hint { display: block; margin-top: 12px; font-size: var(--text-meta); font-weight: 600;
  color: var(--navy-deep); text-decoration: underline; text-underline-offset: 4px; }
#fiche { position: fixed; inset: 0; z-index: 9999; background: rgba(15,33,56,.58);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  /* filet petits écrans : à 320x568 la fiche remplit l'écran à 14 px près,
     une bio plus longue doit pouvoir défiler (mesuré 2026-08-20) */
  overflow-y: auto; }
#fiche[hidden] { display: none; }
.fiche-card { background: #fff; border-radius: 24px; max-width: 520px; width: 100%;
  padding: clamp(26px, 4vw, 40px); position: relative;
  box-shadow: 0 46px 110px -34px rgba(15,33,56,.65); }
.fiche-close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px;
  border-radius: 999px; border: 1px solid var(--border-subtle); background: #fff;
  cursor: pointer; font-size: 16px; color: var(--navy-deep); }
.fiche-name { margin: 14px 0 2px; font-size: 26px; color: var(--navy-deep); }
.fiche-role { font-size: var(--text-corps); color: var(--muted-fg); }
.fiche-bio { margin: 14px 0 0; font-size: var(--text-corps); line-height: 1.6; color: var(--muted-fg); }
.fiche-skills { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.fiche-skills li { font-family: var(--font-mono); font-size: var(--text-micro); padding: 6px 10px;
  border-radius: 999px; background: var(--gray-warm); color: var(--navy-deep); }

/* ============================================================
   GALERIE ÉQUIPE — cartes « album » (recto monogramme / verso parcours)
   Baseline sans JS : dispersion CSS (desktop) ou pile verticale (mobile),
   flip au survol (desktop) ou au focus/tap (tactile). JS = entrée « on pose
   les cartes » + deck à swiper en mobile (.js-deck). Voir buildEquipeDeck().
   ============================================================ */
.equipe-deck { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: 30px 26px; max-width: 860px; margin: 10px auto 0; }
.tcard { position: relative; width: 258px; height: 344px; perspective: 1300px;
  background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; }
.tcard:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 5px; border-radius: 22px; }
.tcard-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  transition: transform .75s cubic-bezier(.2,.75,.2,1); will-change: transform; }
.tcard-face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden;
  border-radius: 20px; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 32px 64px -34px rgba(15,33,56,.55); }

/* recto : cadre « polaroid » blanc — la photo remplit le cadre (fine bordure),
   le nom en gras dessous. En attendant les vraies photos : monogramme sur navy
   dans la zone photo ; une vraie image se glisse via <img> dans .tcard-photo. */
.tcard-front { background: #fff; border: 1px solid var(--border-subtle); padding: 9px 9px 0; }
.tcard-photo { flex: 1; min-height: 0; border-radius: 11px; overflow: hidden; display: grid; place-items: center;
  color: var(--gold-accent); background: radial-gradient(130% 90% at 50% 0%, var(--navy-shell), var(--navy-deep));
  font-family: var(--font-display); font-weight: 560; font-size: 58px; letter-spacing: .01em; }
.tcard-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tcard-cap { padding: 12px 10px 14px; text-align: center; }
.tcard-name { display: block; font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1.12; color: var(--navy-ink); }
.tcard-role { display: block; margin-top: 3px; font-size: var(--text-micro); line-height: 1.3; color: var(--muted-fg); }

/* verso : endos de la photo — parcours en points sur fond blanc */
.tcard-back { transform: rotateY(180deg); background: #fff; border: 1px solid var(--border-subtle);
  padding: 24px 22px; text-align: left; }
.tcard-back-head { display: block; font-family: var(--font-mono); font-size: var(--text-micro); font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 14px; }
.tcard-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.tcard-points li { display: flex; gap: 9px; font-size: var(--text-meta); line-height: 1.42; color: var(--navy-ink); }
.tcard-points svg { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--gold-deep); }
/* lien vers le site personnel d'un membre, quand il en a un : posé en bas du
   verso, au-dessus du rappel de retournement */
.tcard-lien { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 14px;
  font-size: var(--text-micro); font-weight: 600; color: var(--gold-deep); text-decoration: none; }
.tcard-lien svg { flex: none; width: 13px; height: 13px; }
.tcard-lien:hover, .tcard-lien:focus-visible { color: var(--orange-ink); text-decoration: underline; }
.tcard-soon { margin: 6px 0 0; font-size: var(--text-corps); line-height: 1.5; color: var(--muted-fg); }

/* flip : survol/clavier (desktop) et focus/tap (tactile) — sans JS.
   ⚠️ :focus-within et pas :focus — sinon, dès qu'on touche le lien du verso, le
   focus quitte la carte pour le lien, `.tcard:focus` ne matche plus et la carte
   se retourne AVANT que le clic aboutisse : les liens étaient intouchables en
   tactile (bug signalé par Loïc le 2026-08-17). Même raison au clavier. */
@media (hover: hover) {
  .tcard:hover .tcard-inner, .tcard:focus-visible .tcard-inner,
  .tcard:focus-within .tcard-inner { transform: rotateY(180deg); }
}
@media (hover: none) {
  .tcard:focus-within .tcard-inner { transform: rotateY(180deg); }
}

/* — dispersion « posée » (desktop/tablette, baseline sans JS ; le JS reprend la main) — */
@media (min-width: 700px) {
  .equipe-deck { gap: 40px 34px; padding: 14px 0 10px; }
  .tcard { transform-origin: 50% 100%; }
  .tcard:nth-child(odd)  { transform: rotate(-3.5deg); }
  .tcard:nth-child(even) { transform: rotate(2.5deg) translateY(16px); }
  .tcard:nth-child(3n)   { transform: rotate(1.5deg) translateY(-10px); }
}

/* — deck empilé à swiper (mobile + tablette, activé par JS : .js-deck) —
   Taille élastique (2026-08-17, demande Loïc « cartes assez grandes ») : la carte
   prend la largeur disponible (marges 24px) ou la hauteur d'écran restante
   (~310px de tête + pastilles), plafonnée à 420px de large, plancher 230px
   (téléphone en paysage : la page scrolle, tant pis). Ratio 3:4 conservé. */
@media (max-width: 1023px) {
  .equipe-deck.js-deck { --carte-l: max(230px, min(100vw - 48px, 420px, (100svh - 310px) * 0.75));
    display: block; position: relative; width: var(--carte-l);
    height: calc(var(--carte-l) / 0.75 + 22px); margin: 16px auto 0; }
  .equipe-deck.js-deck .tcard { position: absolute; top: 0; left: 0; touch-action: pan-y;
    width: var(--carte-l); height: calc(var(--carte-l) / 0.75); }
  .equipe-deck.js-deck .tcard-inner { transition: transform .55s cubic-bezier(.2,.75,.2,1); }
  /* la typo suit la taille de la carte (demande Loïc 2026-08-17 : « textes plus
     gros en tablette, le lien aussi ») — ratios calés sur la carte d'origine de
     258px, plafonds pour la carte tablette de 420px. */
  .equipe-deck.js-deck .tcard-name { font-size: clamp(20px, calc(var(--carte-l) * 0.0775), 30px); }
  .equipe-deck.js-deck .tcard-role { font-size: clamp(11px, calc(var(--carte-l) * 0.0427), 16px); }
  .equipe-deck.js-deck .tcard-back-head { font-size: clamp(11px, calc(var(--carte-l) * 0.0427), 17px); }
  .equipe-deck.js-deck .tcard-points { gap: clamp(12px, calc(var(--carte-l) * 0.0465), 19px); }
  .equipe-deck.js-deck .tcard-points li { font-size: clamp(12.5px, calc(var(--carte-l) * 0.0485), 20px); }
  .equipe-deck.js-deck .tcard-points svg { width: clamp(15px, calc(var(--carte-l) * 0.058), 23px);
    height: clamp(15px, calc(var(--carte-l) * 0.058), 23px); margin-top: 3px; }
  .equipe-deck.js-deck .tcard-lien { font-size: clamp(11px, calc(var(--carte-l) * 0.0427), 17px); }
  .equipe-deck.js-deck .tcard-lien svg { width: clamp(13px, calc(var(--carte-l) * 0.05), 20px);
    height: clamp(13px, calc(var(--carte-l) * 0.05), 20px); }
  .equipe-deck.js-deck .tcard-soon { font-size: clamp(14px, calc(var(--carte-l) * 0.054), 21px); }
}
/* — éparpillage plein écran « photos posées sur une table » (desktop, JS : .js-scatter) —
   Cartes plus petites, positions absolues ; le survol ramène la carte au premier
   plan (z + flip) donc le léger chevauchement reste lisible. */
@media (min-width: 1024px) {
  /* hauteur élastique (2026-08-17) : le conteneur prend tout l'écran sous le titre
     (~205px de tête) au lieu du min(64vh, 560px) d'origine qui laissait 160px
     morts en 1440x900 ; place() dimensionne les cartes dessus (plafond 214px). */
  .equipe-deck.js-scatter { display: block; position: relative; left: 50%; transform: translateX(-50%);
    width: 94vw; max-width: 1240px; height: clamp(400px, 100svh - 205px, 700px); margin: 0; }
  .equipe-deck.js-scatter .tcard { position: absolute; top: 0; left: 0; width: 162px; height: 216px; }
  .equipe-deck.js-scatter .tcard:hover, .equipe-deck.js-scatter .tcard:focus-visible { z-index: 100; }
  .equipe-deck.js-scatter .tcard-front { padding: 6px 6px 0; }
  .equipe-deck.js-scatter .tcard-photo { font-size: 40px; border-radius: 9px; }
  /* légende desserrée et nom d'un demi-point plus bas : les noms longs
     (« Dr Nathalie Rochat », « Gabriella Flückiger ») passaient à la ligne
     pour 2 à 3 px. 138 px utiles pour 130 au plus long — le ratio 0.085 x --cw
     (posée par place()) garde cette réserve à toutes les tailles de carte. */
  .equipe-deck.js-scatter .tcard-cap { padding: 9px 5px 10px; }
  .equipe-deck.js-scatter .tcard-name { font-size: clamp(13px, calc(var(--cw, 162px) * 0.085), 18px); }
  .equipe-deck.js-scatter .tcard-role { font-size: clamp(9px, calc(var(--cw, 162px) * 0.058), 12px); margin-top: 1px; }
  /* verso resserré (2026-08-17) : les parcours réels tiennent en 4 puces de
     deux lignes, ce que l'espacement d'origine ne permettait pas. Le rappel
     « ↺ Retour » a été retiré le même jour (demande Loïc) : c'est lui qui
     rendait la fiche la plus remplie (8 lignes de puces + lien) débordante. */
  .equipe-deck.js-scatter .tcard-back { padding: 12px 10px; }
  .equipe-deck.js-scatter .tcard-back-head { margin-bottom: 6px; font-size: clamp(9.5px, calc(var(--cw, 162px) * 0.062), 12px); }
  .equipe-deck.js-scatter .tcard-points { gap: 5px; }
  .equipe-deck.js-scatter .tcard-points li { font-size: clamp(10px, calc(var(--cw, 162px) * 0.065), 13.5px); line-height: 1.28; }
  .equipe-deck.js-scatter .tcard-points svg { width: 13px; height: 13px; margin-top: 1px; }
  .equipe-deck.js-scatter .tcard-soon { font-size: 11.5px; }
  /* le lien descend à 9px (et le verso se resserre latéralement) pour qu'un nom
     de domaine long tienne sur UNE ligne : sinon l'URL se coupe et la flèche
     part seule à la ligne suivante. Mesuré sur hypnose-accompagnement.ch, le
     plus long de la série. */
  .equipe-deck.js-scatter .tcard-lien { padding-top: 7px; font-size: clamp(8.5px, calc(var(--cw, 162px) * 0.056), 11.5px); gap: 5px; line-height: 1.25; }
  .equipe-deck.js-scatter .tcard-lien svg { width: 11px; height: 11px; }
  /* parcours long (Dr Bauer, 2026-08-19) : 3 puces de 3 lignes au lieu de 3 de
     deux. La carte resserre SA propre typo, la galerie garde la sienne. */
  .equipe-deck.js-scatter .tcard-dense .tcard-points { gap: 4px; }
  .equipe-deck.js-scatter .tcard-dense .tcard-points li { font-size: clamp(8.5px, calc(var(--cw, 162px) * 0.054), 11.5px); line-height: 1.18; }
  .equipe-deck.js-scatter .tcard-dense .tcard-lien { padding-top: 4px; }
}
/* le deck (mobile/tablette) n'avait pas de recette dense : les mêmes cartes
   longues y frôlaient le lien (Horn à -1 px, mesuré le 2026-08-20). Réduction
   relative, la taille du deck n'étant pas pilotée par --cw. */
.equipe-deck:not(.js-scatter) .tcard-dense .tcard-points { gap: 5px; }
.equipe-deck:not(.js-scatter) .tcard-dense .tcard-points li { font-size: 0.93em; line-height: 1.22; }
/* survol scatter : la carte grandit en se retournant, le parcours passe en taille
   de lecture (162x216 → ~251x335, la taille des cartes pleines — demande Loïc
   2026-08-10). Le scale vit sur .tcard-inner (transition du flip) : GSAP écrit
   les transforms de .tcard, on n'y transitionne jamais rien. */
@media (min-width: 1024px) and (hover: hover) {
  /* --tx/--ty sont posées par place() : le verso zoomé glisse vers l'intérieur de
     l'écran (boîte englobante réelle, rotation comprise). ⚠️ le translate se place
     AVANT le rotateY : après, le miroir du flip inverse le sens de tx. Et jamais
     d'origine X excentrée : rotateY basculerait hors écran (2026-08-17). */
  .equipe-deck.js-scatter .tcard:hover .tcard-inner,
  .equipe-deck.js-scatter .tcard:focus-visible .tcard-inner { transform: translate(var(--tx, 0px), var(--ty, 0px)) rotateY(180deg) scale(1.55); }
}
@media (min-width: 1024px) and (hover: none) {
  .equipe-deck.js-scatter .tcard:focus .tcard-inner { transform: translate(var(--tx, 0px), var(--ty, 0px)) rotateY(180deg) scale(1.55); }
}
/* pastilles de position sous le deck mobile (injectées par buildEquipeDeck) */
.deck-dots { display: flex; justify-content: center; gap: 8px; margin: 22px 0 2px; }
.deck-dots span { width: 7px; height: 7px; border-radius: 999px; background: var(--border-subtle);
  transition: background .25s, transform .25s; }
.deck-dots span.on { background: var(--gold-deep); transform: scale(1.3); }

.profil-hello { font-family: var(--font-display); font-weight: 560; font-variation-settings: 'opsz' 90;
  font-size: clamp(20px, 2.4vw, 28px); color: var(--navy-deep); margin: 0 0 18px; }
.profil-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto auto;
  gap: 12px; align-items: end; background: #fff; border: 1px solid var(--border-subtle);
  border-radius: 18px; padding: 22px; }
@media (max-width: 880px) { .profil-form { grid-template-columns: minmax(0, 1fr); } }
.profil-form label { display: block; font-size: 12px; font-weight: 600; color: var(--navy-deep); margin-bottom: 6px; }
.profil-form input { width: 100%; padding: 10px 12px; border: 1px solid var(--border-subtle);
  border-radius: 10px; font: inherit; font-size: 14px; color: var(--navy-ink); background: var(--gray-warm); }
.profil-note { margin-top: 10px; font-size: var(--text-meta); color: var(--muted-fg); }
.btn-plain { padding: 10px 16px; border-radius: 999px; border: 1px solid var(--border-subtle);
  background: #fff; cursor: pointer; font: inherit; font-size: var(--text-corps); font-weight: 600; color: var(--navy-deep); }

.prep { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.prep li { background: #fff; border: 1px solid var(--border-subtle); border-radius: 12px; }
.prep label { display: flex; gap: 12px; align-items: center; padding: 14px 16px;
  font-size: 14.5px; color: var(--navy-ink); cursor: pointer; }
.prep input { width: 18px; height: 18px; accent-color: var(--orange-ink); }
.prep-track { height: 8px; border-radius: 999px; background: #fff;
  border: 1px solid var(--border-subtle); overflow: hidden; margin-top: 16px; }
#prep-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-accent), var(--orange-action));
  transition: width 400ms ease-out; }


.docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.docs li { display: flex; justify-content: space-between; gap: 14px; align-items: center;
  background: #fff; border: 1px solid var(--border-subtle); border-radius: 12px;
  padding: 14px 16px; font-size: 14.5px; color: var(--navy-ink); }
.docs .state { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted-fg); white-space: nowrap; }

/* ============================================================
   MONDE PRO (P8·C) — formulaires de demande, onglets, démo
   ============================================================ */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.dform { background: #fff; border: 1px solid var(--border-subtle); border-radius: 18px;
  padding: clamp(22px, 3vw, 32px); }
.dform-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 640px) { .dform-grid { grid-template-columns: minmax(0, 1fr); } }
.dform label { display: block; font-size: var(--text-meta); font-weight: 600; color: var(--navy-deep); margin-bottom: 6px; }
.dform input, .dform select, .dform textarea { width: 100%; padding: 10px 12px;
  border: 1px solid var(--border-subtle); border-radius: 10px; font: inherit; font-size: var(--text-corps);
  color: var(--navy-ink); background: var(--gray-warm); }
.dform textarea { resize: vertical; }
.dform-full { grid-column: 1 / -1; }
.dform-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 18px; }
.dform-note { font-size: var(--text-meta); color: var(--muted-fg); max-width: 34em; }
.demande-fallback { margin-top: 22px; transition: box-shadow 300ms ease-out, border-color 300ms ease-out; }
.demande-fallback.show { border-color: var(--orange-ink); box-shadow: 0 0 0 3px rgba(224,123,57,.18); }
.demande-status { margin-bottom: 22px; }

/* Onglets accessibles (portail démo) */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.tab { padding: 10px 18px; border-radius: 999px; border: 1px solid var(--border-subtle);
  background: #fff; cursor: pointer; font: inherit; font-size: var(--text-meta); font-weight: 600; color: var(--navy-deep); }
.tab[aria-selected="true"] { background: var(--navy-shell); border-color: var(--navy-shell); color: #fff; }
.demo-note { display: inline-block; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--gold-warm);
  border: 1px dashed var(--gold-accent); border-radius: 999px; padding: 6px 12px; margin-bottom: 16px; }

/* Planning semaine (démo) */
.gantt { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 880px) { .gantt { grid-template-columns: minmax(0, 1fr); } }
.gday { background: #fff; border: 1px solid var(--border-subtle); border-radius: 14px; padding: 14px; min-height: 130px; }
.gday .d { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted-fg); margin-bottom: 10px; }
.mission { display: block; width: 100%; text-align: left; font: inherit; border-radius: 10px;
  padding: 10px 12px; font-size: 13px; line-height: 1.4; margin-top: 8px; cursor: pointer; border: 1px solid transparent; }
.mission.ok { background: rgba(212,168,74,.14); border-color: rgba(212,168,74,.4); color: var(--navy-ink); cursor: default; }
.mission.prop { background: var(--gray-warm); border-style: dashed; border-color: var(--border-subtle); color: var(--muted-fg); }
.mission.prop:hover { border-color: var(--orange-action); color: var(--navy-ink); }
.mission .tag { display: block; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: 3px; }
.mission.ok .tag { color: var(--gold-warm); }
.mission.prop .tag { color: var(--orange-ink); }

/* Matériel (démo) + steppers */
.mat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 880px) { .mat { grid-template-columns: minmax(0, 1fr); } }
.mat-card { background: #fff; border: 1px solid var(--border-subtle); border-radius: 14px; padding: 18px; }
.mat-card h4 { margin: 0 0 4px; font-size: 17px; color: var(--navy-deep); }
.mat-card p { margin: 0 0 12px; font-size: 13px; color: var(--muted-fg); line-height: 1.5; }
.stepper { display: inline-flex; align-items: center; gap: 12px; }
.stepper button { width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--border-subtle);
  background: #fff; cursor: pointer; font-size: 16px; color: var(--navy-deep); line-height: 1; }
.stepper button:hover { border-color: var(--navy-deep); }
.recap { margin-top: 18px; background: var(--navy-ink); color: rgba(255,255,255,.88); border-radius: 14px; padding: 18px 20px; }
.recap h4 { margin: 0 0 8px; font-family: var(--font-display); font-weight: 560; font-size: 18px; color: #fff; }
.recap ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 13.5px; }
.recap .gold { color: var(--gold-accent); }

/* Tracker BLS (démo) */
.bls-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bls-list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--border-subtle); border-radius: 12px; padding: 13px 16px; font-size: 14px; }
.badge { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; border-radius: 999px; padding: 5px 10px; white-space: nowrap; }
.badge.ok { background: rgba(212,168,74,.16); color: var(--gold-warm); }
.badge.warn { background: rgba(224,123,57,.14); color: var(--orange-ink); }
.badge.late { background: rgba(15,33,56,.08); color: var(--navy-ink); }

/* Simulateur — contrôles internes des colonnes du deck partagé .bls
   (le simulateur réutilise .bls/.bls-col/.bls-recap pour être visuellement
   jumeau de la réservation BLS — rev Loïc) */
.sim-line { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 12px 0; }
.sim-line + .sim-line { border-top: 1px solid var(--border-subtle); }
.sim-line .lbl { font-size: var(--text-corps); color: var(--navy-ink); }
.sim-line .lbl small { display: block; font-size: var(--text-micro); line-height: 1.4; color: var(--muted-fg); margin-top: 3px; }
.sim-line .chip { flex: none; }
.sim-field { margin-top: 16px; }
.sim-field > label { display: block; font-size: var(--text-meta); font-weight: 600; color: var(--navy-deep); margin-bottom: 8px; }
.bls-recap .gold { color: var(--gold-accent); font-weight: 600; }

/* Demande démo — contrôles du deck partagé : type de structure en pastilles
   radio, besoins en cases à cocher, heure + date dans la colonne navy */
.type-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.type-opt { position: relative; border: 1.5px solid var(--border-subtle); border-radius: 999px;
  padding: 8px 14px; cursor: pointer; font-size: var(--text-meta); font-weight: 600; color: var(--navy-deep);
  transition: border-color 180ms ease-out, background 180ms ease-out; }
.type-opt input { position: absolute; opacity: 0; pointer-events: none; }
.type-opt:hover { border-color: var(--navy-soft); }
.type-opt:has(:checked) { background: var(--navy-shell); border-color: var(--navy-shell); color: #fff; }
.need-opt { display: flex; align-items: center; gap: 10px; margin-top: 8px; cursor: pointer;
  border: 1.5px solid var(--border-subtle); border-radius: 12px; padding: 11px 12px;
  font-size: var(--text-corps); line-height: 1.35; color: var(--navy-ink);
  transition: border-color 180ms ease-out, background 180ms ease-out; }
.need-opt input { flex: none; width: 17px; height: 17px; accent-color: var(--navy-deep); }
.need-opt:hover { border-color: var(--navy-soft); }
.need-opt:has(:checked) { border-color: var(--navy-deep); background: rgba(30,58,95,.05); }
.bls-recap .bls-field select { width: 100%; padding: 10px 12px; font: inherit; font-size: var(--text-corps);
  color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px; color-scheme: dark; }
.bls-recap .bls-field input[type="date"] { color-scheme: dark; }
.bls-recap .recap-note { margin: 14px 0 0; font-size: var(--text-meta); line-height: 1.45; color: rgba(255,255,255,.6); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border-subtle);
  background: var(--gray-warm); cursor: pointer; font: inherit; font-size: var(--text-meta); font-weight: 600; color: var(--navy-deep); }
.chip[aria-pressed="true"] { background: var(--navy-shell); border-color: var(--navy-shell); color: #fff; }

/* Transitions de pages natives (progressive enhancement) */
@view-transition { navigation: auto; }

/* Solutions trio — BLS en vedette au centre (produit d'appel, rev Loïc) */
.sol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; margin-top: 34px; }
@media (max-width: 980px) { .sol { grid-template-columns: minmax(0, 1fr); margin-top: 24px; } }
.sol-card { position: relative; background: #fff; border: 1px solid var(--border-subtle);
  border-radius: 20px; padding: 30px 26px 26px; display: flex; flex-direction: column; text-align: center; }
.sol-card .ic { width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 16px;
  background: rgba(212,168,74,.14); color: var(--gold-warm); display: grid; place-items: center; }
.sol-card .ic svg { width: 26px; height: 26px; }
.sol-eyebrow { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted-fg); }
.sol-card h3 { margin: 10px 0; font-size: 22px; color: var(--navy-deep); }
.sol-card p { margin: 0 0 20px; font-size: var(--text-corps); line-height: 1.6; color: var(--muted-fg); flex: 1; }
.sol-card .note { font-size: var(--text-meta); color: var(--muted-fg); margin-top: 12px; }
.sol-card .sol-lead { flex: 0 0 auto; margin: 0 0 14px; font-size: var(--text-meta); line-height: 1.5; color: var(--muted-fg); }
.sol-points { list-style: none; margin: 0 0 6px; padding: 0; flex: 1; display: flex; flex-direction: column; gap: 11px; text-align: left; }
.sol-points li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--text-corps); line-height: 1.45; color: var(--navy-deep); }
.sol-points li svg { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 1px; color: var(--gold-warm); }
.sol-cert { align-self: center; display: inline-block; margin: 2px 0 16px; padding: 8px 12px; background: #fff;
  border: 1px solid var(--border-subtle); border-radius: 12px; box-shadow: 0 6px 16px -10px rgba(15,33,56,.25); }
.sol-cert img { display: block; height: 64px; width: auto; }
.sol-card.featured { border: 2px solid var(--navy-deep);
  background: linear-gradient(180deg, rgba(30,58,95,.045), rgba(30,58,95,0) 60%), #fff;
  box-shadow: 0 24px 54px -28px rgba(15,33,56,.4); }
@media (min-width: 981px) { .sol-card.featured { transform: scale(1.03); } }
.sol-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--navy-deep); color: var(--gold-accent); font-family: var(--font-mono);
  font-size: var(--text-micro); letter-spacing: .12em; text-transform: uppercase; padding: 6px 14px;
  border-radius: 999px; white-space: nowrap; }
/* encadrés du CORPS de la carte — rectangle or, distincts des épingles
   « thème » en pilule (.sol-badge, épinglée au bord) :
   .sol-new    « Nouveauté », carte VVP, sous le texte juste au-dessus du CTA
   .sol-cible  « Anesthésiste FMH », carte partenariat, sous le picto */
.sol-new, .sol-cible { align-self: center; margin: 2px 0 14px; padding: 7px 15px; border-radius: 10px;
  font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-warm); background: rgba(212,168,74,.12);
  border: 1px solid color-mix(in srgb, var(--gold-accent) 42%, transparent); }
.sol-cible { margin: 0 0 6px; }   /* .ic pose déjà 18px dessous, h3 10px dessus */
.sol-link { font-size: var(--text-corps); font-weight: 600; color: var(--navy-deep);
  text-decoration: underline; text-underline-offset: 4px; }
.sol-links { display: flex; flex-direction: column; gap: 8px; }
.sol-card .btn { justify-content: center; }
/* — Cartes teintées par monde (demande Loïc 2026-07-28) : anesthésie navy,
   formation vert, numérique gold, personnel orange — texte blanc. Nuances
   foncées porteuses (--teal-deep, --gold-warm, --orange-ink) : le blanc y
   reste ≥ 4,5:1 ; les teintes vives (teal-success, gold-accent,
   orange-action) restent aux décors du 360° et des atouts. Le badge épinglé
   prend un liseré blanc pour se détacher du fond. */
.sol-card.sol-navy { background: var(--navy-deep); border-color: rgba(255,255,255,.14); }
.sol-card.sol-vert { background: var(--teal-deep); border-color: rgba(255,255,255,.16); }
.sol-card.sol-gold { background: var(--gold-warm); border-color: rgba(255,255,255,.16); }
.sol-card.sol-orange { background: var(--orange-ink); border-color: rgba(255,255,255,.16); }
.sol-card.featured.sol-navy { border-color: var(--gold-accent); }
.sol-card:is(.sol-navy, .sol-vert, .sol-gold, .sol-orange) h3 { color: #fff; }
.sol-card:is(.sol-navy, .sol-vert, .sol-gold, .sol-orange) p,
.sol-card:is(.sol-navy, .sol-vert, .sol-gold, .sol-orange) .note { color: rgba(255,255,255,.85); }
.sol-card:is(.sol-navy, .sol-vert, .sol-gold, .sol-orange) .sol-points li { color: #fff; }
.sol-card:is(.sol-navy, .sol-vert, .sol-gold, .sol-orange) .sol-points li svg { color: rgba(255,255,255,.85); }
.sol-card:is(.sol-navy, .sol-vert, .sol-gold, .sol-orange) .ic { background: rgba(255,255,255,.13); color: #fff; }
.sol-card:is(.sol-navy, .sol-vert, .sol-gold, .sol-orange) .sol-link { color: #fff; }
.sol-card:is(.sol-navy, .sol-vert, .sol-gold, .sol-orange) .sol-badge { box-shadow: 0 0 0 2px rgba(255,255,255,.9); }
.sol-card:is(.sol-vert, .sol-navy) :is(.sol-new, .sol-cible) { color: #fff; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); }
/* — Bulle-révélation vidéo sur le haut de carte (JS : enableBubbleReveal) —
   .sol-top = zone révélée (picto/titre/texte) ; le badge, hors .sol-top, reste
   au bord. .sol-foot = les CTA, jamais recouverts (la « ligne » d'intouchable).
   La couche .sol-media s'ouvre en cercle depuis le point d'entrée : rayon --r
   animé par GSAP, centre --rx/--ry posé au survol/appui. touch-action:none →
   le scroll page est verrouillé tant que le doigt est sur le haut de carte. */
.sol-top { position: relative; flex: 1; display: flex; flex-direction: column;
  border-radius: 14px; overflow: hidden; touch-action: none;
  /* tap-bascule 2026-08-20 : l'appui long ne doit plus lever la loupe iOS */
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.sol-top > .ic, .sol-top > h3, .sol-top > p, .sol-top > .sol-new, .sol-top > .sol-cible, .sol-top > .sol-points, .sol-top > .sol-cert { position: relative; z-index: 1; }
.sol-foot { position: relative; z-index: 1; display: flex; flex-direction: column; }
.sol-media { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  border-radius: inherit; background: radial-gradient(125% 125% at 30% 20%, #16324f, #0a1829 72%);
  clip-path: circle(var(--r, 0%) at var(--rx, 50%) var(--ry, 50%)); }
.sol-media-glyph { position: absolute; right: -6%; bottom: -10%; width: 60%; height: 60%;
  color: var(--gold-accent); opacity: .18; }
.sol-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.sol-media::after { content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(10,24,41,.12) 0%, rgba(10,24,41,.55) 100%); }
/* état révélé : picto + paragraphe s'effacent, le titre passe en clair sur la
   vidéo (le badge, conservé, ne bouge pas) */
.sol-top .ic, .sol-top p, .sol-top .sol-new, .sol-top .sol-cible, .sol-top .sol-points, .sol-top .sol-cert { transition: opacity 1s ease; }
.sol-top h3 { transition: color 1s ease; }
.sol-card.revealing .sol-top .ic,
.sol-card.revealing .sol-top p,
.sol-card.revealing .sol-top .sol-new,
.sol-card.revealing .sol-top .sol-cible,
.sol-card.revealing .sol-top .sol-points,
.sol-card.revealing .sol-top .sol-cert { opacity: 0; }
.sol-card.revealing .sol-top h3 { color: #fff; }
.sol-wedge { margin: 26px auto 0; text-align: center; font-size: 14.5px; line-height: 1.6;
  color: var(--muted-fg); max-width: 46em; }
.sol-wedge strong { color: var(--navy-deep); }

/* espace-partenaire — titre « Nos solutions » centré, posé juste au-dessus du
   trio (axe central vers la carte « Commencez ici », rev Loïc) */
body:has(.sol) .page-head { text-align: center; }
@media (min-width: 1081px) {
  /* .section.oneview pour l'emporter sur le centrage vertical de la vue unique */
  body:has(.sol) .section.oneview { justify-content: flex-start; }
  body:has(.sol) .page-head { padding-bottom: 0; }
  body:has(.sol) .sol { margin-top: 18px; }
  /* rejoindre — même recette : le bandeau remonte sous le lede au lieu de
     flotter au centre du vide (constat revue 2026-07-18) */
  body:has(.bls-rejoindre) .section.oneview { justify-content: flex-start; }
  body:has(.bls-rejoindre) .page-head { padding-bottom: 0; }
  body:has(.bls-rejoindre) .bls-rejoindre { margin-top: 18px; }
}

/* Réservation BLS — stepper visuel (P8, maquette nano banana) */
.bls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.15fr);
  background: #fff; border: 1px solid var(--border-subtle); border-radius: 22px; overflow: hidden; }
@media (max-width: 1080px) { .bls { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .bls { grid-template-columns: minmax(0, 1fr); } }
/* rejoindre — deck à 6 colonnes : 5 avantages + carte crème « On en parle ? »
   (même famille visuelle que le bandeau crème de espace-partenaire, rev Loïc) */
.bls-rejoindre { grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 1.15fr); }
@media (max-width: 1080px) { .bls-rejoindre { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .bls-rejoindre { grid-template-columns: minmax(0, 1fr); } }
.bls-rejoindre .bls-col { text-align: center; }
.bls-rejoindre .bls-col p { margin: 8px 0 0; font-size: var(--text-corps); line-height: 1.5; color: var(--muted-fg); }
.bls-rejoindre .bls-recap { background: var(--gray-warm); color: var(--muted-fg); }
.bls-rejoindre .bls-recap .bls-num { color: var(--gold-warm); }
.bls-rejoindre .bls-recap .bls-num .ic { background: rgba(212,168,74,.16); color: var(--gold-warm); }
.bls-rejoindre .bls-recap h3 { color: var(--navy-deep); }
.bls-rejoindre .bls-recap p { color: var(--muted-fg); }
.bls-rejoindre .bls-recap .btn-light { background: var(--navy-deep); color: #fff; }
.bls-rejoindre .bls-recap .btn-light:hover { background: var(--navy-shell); }
.bls-rejoindre .bls-recap .bls-cta-row { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 16px; }
.bls-col { padding: 28px 24px; border-left: 1px solid var(--border-subtle); min-width: 0; }
.bls-col:first-child { border-left: none; }
@media (max-width: 1080px) {
  .bls-col { border-left: none; border-top: 1px solid var(--border-subtle); }
  .bls-col:first-child { border-top: none; }
}
.bls-num { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono);
  font-size: var(--text-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-warm); }
.bls-num .ic { width: 40px; height: 40px; border-radius: 12px; background: rgba(212,168,74,.14);
  color: var(--gold-warm); display: grid; place-items: center; }
.bls-num .ic svg { width: 20px; height: 20px; }
.bls-col h3 { margin: 12px 0 14px; font-size: 20px; color: var(--navy-deep); }
.bls-opt { display: block; margin-top: 10px; border: 1.5px solid var(--border-subtle);
  border-radius: 12px; padding: 13px 14px; cursor: pointer; font-size: var(--text-corps); color: var(--navy-ink);
  transition: border-color 180ms ease-out, background 180ms ease-out; }
.bls-opt small { display: block; font-size: var(--text-meta); color: var(--muted-fg); margin-top: 2px; }
.bls-opt input { position: absolute; opacity: 0; pointer-events: none; }
.bls-opt:has(input:checked) { border-color: var(--navy-deep); background: rgba(30,58,95,.05); }
.bls-opt:hover { border-color: var(--navy-soft); }
.pax-row { display: flex; gap: 5px; margin: 16px 0 14px; }
.pax { width: 20px; height: 30px; color: var(--navy-deep); opacity: .18;
  transition: opacity 200ms ease-out, transform 200ms ease-out; }
.pax.on { opacity: 1; }
.pax svg { width: 100%; height: 100%; }
.bls-count { font-family: var(--font-mono); font-weight: 500; font-size: var(--text-confort); color: var(--navy-ink); } /* DM Mono s'arrête à 500 : 600 fabriquait un faux gras */
.bls-field { margin-top: 12px; }
.bls-field label { display: block; font-size: var(--text-meta); font-weight: 600; color: var(--navy-deep); margin-bottom: 6px; }
.bls-field input, .bls-field select, .bls-field textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border-subtle);
  border-radius: 10px; font: inherit; font-size: var(--text-corps); color: var(--navy-ink); background: var(--gray-warm); }
/* Champ date sur iOS (2026-08-20, bug vu par Loïc sur iPhone en prod, écran 1
   du parcours) : sans -webkit-appearance: none, WebKit mobile garde la largeur
   intrinsèque du contrôle natif et le champ DÉBORDE de la carte une fois la
   date choisie ; et la valeur est centrée par le pseudo-élément WebKit. */
.bls-field input[type="date"] { -webkit-appearance: none; appearance: none; display: block;
  min-width: 0; max-width: 100%; min-height: 44px; }
.bls-field input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.bls-field textarea { display: block; resize: vertical; line-height: 1.5; }
/* iOS zoome toute la page au focus d'un champ dont la police est < 16 px :
   sur mobile les champs passent à 16 px (même passe 2026-08-20 que le champ
   date ci-dessus ; c'est aussi la taille lisible du HIG). */
@media (max-width: 640px) {
  .bls-field input, .bls-field select, .bls-field textarea { font-size: 16px; }
}
.bls-recap { background: var(--navy-ink); color: rgba(255,255,255,.88); padding: 28px 24px; }
.bls-recap h3 { margin: 12px 0 14px; font-size: 20px; color: #fff; }
.bls-recap .bls-num { color: var(--gold-accent); }
.bls-recap .bls-num .ic { background: rgba(212,168,74,.18); color: var(--gold-accent); }
.bls-recap ul { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; font-size: var(--text-corps); }
.bls-recap li strong { color: var(--gold-accent); font-weight: 600; }
.bls-recap .bls-field label { color: rgba(255,255,255,.85); }
.bls-recap .bls-field input { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #fff; }
.bls-recap .bls-field input::placeholder { color: rgba(255,255,255,.58); } /* 4.8:1 sur le fond de champ (l'ancien .4 tombait à 3.2:1) */
/* Calendrier multi-dates — colonne « Dates » de demande-personnel */
.cal { border: 1px solid var(--border-subtle); border-radius: 12px; padding: 10px; margin-top: 4px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal-title { font-family: var(--font-mono); font-size: var(--text-meta); font-weight: 500; color: var(--navy-deep); text-transform: capitalize; }
.cal-nav { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-subtle); border-radius: 8px; background: #fff; color: var(--navy-deep); font-size: 17px; line-height: 1; cursor: pointer; }
.cal-nav:hover:not(:disabled) { border-color: var(--navy-soft); }
.cal-nav:disabled { opacity: .3; cursor: default; }
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
.cal-dow span { text-align: center; font-size: var(--text-micro); font-weight: 700; color: var(--muted-fg); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-day { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 8px; background: transparent; font: inherit; font-size: var(--text-meta); color: var(--navy-ink); cursor: pointer; padding: 0; }
button.cal-day:hover:not(:disabled) { background: rgba(30,58,95,.07); }
.cal-day.is-sel { background: var(--navy-deep); border-color: var(--navy-deep); color: #fff; font-weight: 600; }
.cal-day:disabled { color: var(--muted-fg); opacity: .3; cursor: default; }
.cal-day.is-empty { visibility: hidden; }
.cal-hint, .bls-hint { margin: 8px 0 0; font-size: var(--text-meta); color: var(--muted-fg); }
.cal-slots { margin-top: 10px; }
.cal-slots-lbl { display: block; font-size: 12px; font-weight: 600; color: var(--navy-deep); margin-bottom: 6px; }
.cal-slots .chip { padding: 6px 12px; font-size: 13px; }
.cal-dates { margin-top: 10px; display: grid; gap: 12px; }
.cal-date { display: grid; gap: 6px; }
.cal-date-lbl { font-size: var(--text-meta); font-weight: 600; color: var(--navy-deep); }
.cal-dates .chip { padding: 6px 12px; font-size: var(--text-meta); }
@media (min-width: 1081px) {
  body:has(.oneview) .cal { padding: 8px; }
  body:has(.oneview) .cal-grid { gap: 2px; }
  body:has(.oneview) .cal-day { font-size: 12px; aspect-ratio: 1.5 / 1; }
  body:has(.oneview) .cal-hint, body:has(.oneview) .bls-hint { margin-top: 6px; }
  body:has(.oneview) .cal-slots { margin-top: 6px; }
  body:has(.oneview) .cal-dates { margin-top: 6px; }
}
.bls-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 22px; }

/* Réservation BLS — ligne « public cible » sous chaque cours */
.bls-opt .who { display: block; margin-top: 6px; font-size: var(--text-meta); line-height: 1.45;
  color: var(--gold-warm); }
.bls-opt .who b { font-weight: 700; }

/* Encadré « Rejoindre le réseau » — espace-partenaire (bandeau recrutement
   des médecins anesthésistes, distinct des cadrans solutions — rev Loïc) */
.join-band { margin-top: 22px; background: var(--gray-warm); color: var(--muted-fg);
  border: 1px solid var(--border-subtle);
  border-radius: 20px; padding: 26px 30px; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 18px 28px; }
.join-txt { display: grid; gap: 4px; max-width: 62ch; }
.join-eyebrow { font-family: var(--font-mono); font-size: var(--text-meta); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-warm); }
.join-band strong { font-family: var(--font-display); font-weight: 560; font-size: clamp(19px, 2vw, 24px);
  color: var(--navy-deep); line-height: 1.2; }
.join-sub { font-size: var(--text-corps); line-height: 1.5; color: var(--muted-fg); }
.join-band .btn { flex: none; background: var(--navy-deep); color: #fff; }
.join-band .btn:hover { background: var(--navy-shell); }

/* Bandeau « Nouveauté » — nouvelle formation (pose de VVP), posé sous les
   trois cadrans solutions, même format horizontal que .join-band mais liseré
   or + pastille « Nouveauté » qui apparaît (rev Loïc) */
.new-band { position: relative; margin-top: 18px; background: var(--navy-ink);
  color: rgba(255,255,255,.85); border: 1px solid rgba(212,168,74,.38);
  border-radius: 20px; padding: 26px 30px; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between; gap: 18px 28px;
  box-shadow: 0 22px 50px -30px rgba(212,168,74,.5); }
.new-txt { display: grid; gap: 4px; max-width: 66ch; }
.new-eyebrow { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-accent); }
.new-band strong { font-family: var(--font-display); font-weight: 560; font-size: clamp(19px, 2vw, 24px);
  color: #fff; line-height: 1.2; }
.new-sub { font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.68); }
.new-band .btn { flex: none; }
.new-badge { position: absolute; top: -13px; left: 30px; background: var(--gold-accent);
  color: var(--navy-deep); font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px;
  white-space: nowrap; box-shadow: 0 6px 18px -6px rgba(212,168,74,.7);
  transform-origin: 50% 120%; animation: new-badge-pop .55s .35s cubic-bezier(.2,.85,.3,1.3) both; }
@keyframes new-badge-pop { from { opacity: 0; transform: translateY(-3px) scale(.72); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .new-badge { animation: none; } }

/* Portfolio / réalisations (portfolio.html) — galerie application + sites web */
.folio-section-b { padding-top: 0; }
.folio-head { max-width: 60ch; }
.folio-head .folio-title { margin: 12px 0 8px; font-size: clamp(24px, 2.6vw, 34px); font-weight: 560;
  font-variation-settings: 'opsz' 90; letter-spacing: -0.02em; line-height: 1.1; color: var(--navy-deep); }
.folio-head .folio-lede { font-size: 16px; line-height: 1.55; color: var(--muted-fg); }
.folio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 26px; }
@media (max-width: 880px) { .folio { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .folio { grid-template-columns: minmax(0, 1fr); } }
.folio-item { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border-subtle);
  border-radius: 18px; overflow: hidden; color: inherit; text-decoration: none;
  transition: transform 240ms ease-out, box-shadow 240ms ease-out, border-color 240ms ease-out; }
a.folio-item:hover { transform: translateY(-3px); border-color: var(--navy-deep);
  box-shadow: 0 24px 50px -30px rgba(15, 33, 56, .5); }
.folio-shot { aspect-ratio: 16 / 10; position: relative; display: grid; place-items: center;
  color: rgba(255, 255, 255, .92); }
.folio-shot.app { background: linear-gradient(150deg, var(--navy-medium), var(--navy-deep) 60%, var(--navy-ink)); }
.folio-shot.web { background: linear-gradient(150deg, var(--navy-soft), var(--navy-medium) 55%, var(--navy-deep)); }
.folio-shot.soon { background: linear-gradient(150deg, #ece9e2, var(--gray-warm)); color: var(--muted-fg); }
.folio-shot .ic svg { width: 46px; height: 46px; }
.folio-badge { position: absolute; top: 12px; left: 12px; font-family: var(--font-mono); font-size: var(--text-micro);
  letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .16); color: #fff; }
.folio-shot.soon .folio-badge { background: rgba(15, 33, 56, .08); color: var(--navy-ink); }
.folio-item .body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }
.folio-item h3 { margin: 0 0 6px; font-size: 18px; color: var(--navy-deep); }
.folio-item .body p { margin: 0 0 14px; font-size: var(--text-corps); line-height: 1.55; color: var(--muted-fg); flex: 1; }
.folio-item .go { font-size: var(--text-meta); font-weight: 600; color: var(--navy-deep); }
.folio-item.is-soon { opacity: .9; }
.folio-item.is-soon .body p { margin-bottom: 0; }

/* ===========================================================================
   « Une seule vue » desktop — espaces, Nos solutions, demande BLS, simulateur
   (rev Loïc). Le marqueur .oneview est posé sur la <section> de ces pages :
   en-tête + contenu tiennent dans le viewport, le footer se découvre au scroll.
   #main = min-height:100vh pousse le footer juste sous la ligne de flottaison ;
   on resserre en-tête, section et modules pour que le contenu rentre.
   Plancher à 1081px : seuil où la grille BLS (partagée avec le simulateur)
   passe à 4 colonnes ; en dessous (≤1080, tablettes paysage), scroll naturel.
   =========================================================================== */
@media (min-width: 1081px) {
  /* main occupe le viewport ; la section (sous l'en-tête, toujours posé en
     tête) centre son contenu dans l'espace restant — le footer se découvre
     au scroll, juste sous la ligne de flottaison. */
  body:has(.oneview) #main { min-height: 100vh; display: flex; flex-direction: column; }

  /* espaces.html — le split remplit l'espace, le bandeau « rejoindre » se pose
     dessous et tient dans le même écran (footer au scroll) */
  body:has(.oneview) .split { flex: 1 1 auto; min-height: 0; }

  /* En-tête resserré — on ne garde que la garde sous la nav fixe (65px) */
  body:has(.oneview) .page-head { padding: 80px 0 4px; }
  body:has(.oneview) .page-head .page-h1 { font-size: clamp(34px, 3.4vw, 46px); margin: 0 0 6px; }
  body:has(.oneview) .page-head .page-lede { font-size: 15.5px; line-height: 1.5; max-width: 620px; }
  body:has(.oneview) .page-head .section-eyebrow { margin-bottom: 8px; }

  body:has(.oneview) .section { padding: 12px 0 16px; flex: 1 1 auto;
    display: flex; flex-direction: column; justify-content: center; }

  /* Nos solutions — trio de cadrans (resserré pour la vue unique) */
  body:has(.oneview) .sol { margin-top: 6px; }
  body:has(.oneview) .sol-card { padding: 20px 22px 18px; }
  body:has(.oneview) .sol-card .ic { width: 44px; height: 44px; margin-bottom: 9px; }
  body:has(.oneview) .sol-card h3 { margin: 6px 0; font-size: 19px; }
  body:has(.oneview) .sol-card p { margin-bottom: 11px; font-size: 13.5px; }

  /* Bandeaux « Nouveauté » (VVP) + « Rejoindre » resserrés sous le trio */
  body:has(.oneview) .new-band,
  body:has(.oneview) .join-band { margin-top: 10px; padding: 16px 26px; }
  body:has(.oneview) .new-band strong,
  body:has(.oneview) .join-band strong { font-size: 21px; }

  /* Demande BLS — quatre colonnes resserrées */
  body:has(.oneview) .bls-col,
  body:has(.oneview) .bls-recap { padding: 16px; }
  body:has(.oneview) .bls-col h3 { margin: 6px 0 8px; font-size: 18px; }
  body:has(.oneview) .bls-num .ic { width: 34px; height: 34px; }
  body:has(.oneview) .bls-opt { margin-top: 6px; padding: 9px 12px; }
  body:has(.oneview) .bls-field { margin-top: 5px; }
  body:has(.oneview) .bls-field label { margin-bottom: 4px; }
  body:has(.oneview) .bls-field input, body:has(.oneview) .bls-field textarea { padding: 8px 11px; }
  body:has(.oneview) .pax-row { margin: 10px 0 8px; }
  body:has(.oneview) .bls-recap ul { margin-bottom: 8px; gap: 4px; }
  body:has(.oneview) .bls-cta-row { margin-top: 12px; }

  /* Simulateur bloc — mêmes colonnes .bls que la BLS ; on resserre juste
     les contrôles propres au simulateur */
  body:has(.oneview) .sim-line { padding: 9px 0; }
  body:has(.oneview) .sim-field { margin-top: 12px; }

  /* La colonne « Résumé » (liste live + 4 champs de contact) est la plus haute
     des quatre et fait déborder la vue unique : elle pousse le bouton sous la
     ligne de flottaison. On resserre son intérieur, scopé au simulateur (#sim)
     et à la demande BLS (#bls, dont le lede court sur 3 lignes depuis la mention
     FSEA) — pas demande-demo/personnel, qui tiennent déjà. ~45px regagnés. */
  body:has(#sim) .bls-recap h3, body:has(#bls) .bls-recap h3 { margin: 4px 0 8px; }
  body:has(#sim) .bls-recap ul, body:has(#bls) .bls-recap ul { gap: 3px; font-size: 13.5px; }
  body:has(#sim) .bls-recap .bls-field, body:has(#bls) .bls-recap .bls-field { margin-top: 3px; }
  body:has(#sim) .bls-recap .bls-field label, body:has(#bls) .bls-recap .bls-field label { margin-bottom: 2px; }
  body:has(#sim) .bls-recap .bls-field input, body:has(#bls) .bls-recap .bls-field input { padding: 6px 11px; }
  body:has(#sim) .bls-cta-row, body:has(#bls) .bls-cta-row { margin-top: 10px; }
  body:has(#sim) .demande-fallback, body:has(#bls) .demande-fallback { margin-top: 8px; }

  /* demande-vvp — ici c'est la colonne « cours » (publics cibles longs) qui est
     la plus haute, pas le récap. On passe le lede sur 2 lignes et on resserre
     les options, scopé à la page VVP (data-kind) pour ne pas toucher la BLS. */
  body:has([data-kind="vvp"]) .page-head .page-lede { max-width: 880px; }
  body:has([data-kind="vvp"]) .page-head .section-eyebrow { margin-bottom: 4px; }
  body:has([data-kind="vvp"]) .section { padding: 6px 0 10px; }
  body:has([data-kind="vvp"]) .bls-opt { margin-top: 5px; padding: 7px 12px; }
  body:has([data-kind="vvp"]) .bls-opt small { margin-top: 3px; }
  body:has([data-kind="vvp"]) .bls-col,
  body:has([data-kind="vvp"]) .bls-recap { padding: 14px 16px; }

  /* Demande démo — contrôles resserrés */
  body:has(.oneview) .type-opt { padding: 6px 12px; }
  body:has(.oneview) .need-opt { margin-top: 6px; padding: 9px 11px; }

  /* Repli « Vous préférez le direct ? » — barre fine sur une ligne */
  body:has(.oneview) .demande-fallback { max-width: none; margin-top: 12px; padding: 12px 18px;
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
  body:has(.oneview) .demande-fallback h2 { margin: 0; font-size: 16px; }
  body:has(.oneview) .demande-fallback p { display: none; }
  body:has(.oneview) .demande-fallback .row { margin-left: auto; }

  /* Accompagnement — les 4 piliers passent sur une rangée et le CTA se resserre,
     pour que en-tête + piliers + CTA tiennent dans le viewport (footer au scroll).
     .pillars n'existe que sur cette page ; .pillars + .direct cible le seul CTA
     d'accompagnement sans toucher les blocs .direct des pages de demande. */
  body:has(.oneview) .pillars { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 6px; }
  body:has(.oneview) .pillar { padding: 18px; }
  body:has(.oneview) .pillar h3 { margin: 0 0 6px; font-size: 18px; }
  body:has(.oneview) .pillar p { margin: 0 0 10px; font-size: 13.5px; }
  body:has(.oneview) .pillars + .direct { padding: 20px 24px; }
  body:has(.oneview) .pillars + .direct h2 { margin: 0 0 6px; font-size: 20px; }
  body:has(.oneview) .pillars + .direct p { margin: 0 0 12px; }
}

/* ===========================================================================
   Vue unique sur écran COURT (portables 720p/768p, MacBook 13")
   Le bloc ci-dessus suppose la hauteur d'un 1080p. Mesuré : en 1280x800 tout
   passe, en 1280x720 le CTA tombe sous la ligne de flottaison (demande-bls -9,
   simulateur -12, parcours-fin -61). Le symptôme est sournois : rien n'est
   cassé, la page a juste l'air complète et on ne scrolle pas.
   C'est une contrainte de HAUTEUR, pas de largeur : on la traite en max-height
   plutôt qu'en resserrant tous les desktops, pour qu'un grand écran garde ses
   tailles. Les écrans du parcours pèsent le plus lourd (footer masqué, donc
   ils doivent vraiment tenir) : leurs resserrages existaient déjà mais étaient
   enfermés en max-width:1080px, alors qu'ils répondent à la hauteur.
   =========================================================================== */
@media (min-width: 1081px) and (max-height: 800px) {
  body:has(.oneview) .page-head { padding: 74px 0 2px; }
  body:has(.oneview) .page-head .page-h1 { font-size: clamp(30px, 2.6vw, 38px); margin: 0 0 4px; }
  body:has(.oneview) .page-head .page-lede { font-size: 14.5px; line-height: 1.45; }
  body:has(.oneview) .section { padding: 8px 0 12px; }

  /* parcours-appel et parcours-fin : l'encadré .direct est leur plus gros poste */
  body:has(.oneview.parcours) .direct { padding: 18px 20px; }
  body:has(.oneview.parcours) .direct h2 { margin-bottom: 6px; font-size: 20px; }
  body:has(.oneview.parcours) .direct p { margin-bottom: 12px; font-size: 14px; }

  /* parcours-documents : les deux fichiers CMDL + les trois retours font
     déborder de 26px à 1280x720 (mesuré 2026-08-20) — on resserre les
     composants propres à l'écran 2, sans toucher la pp-card des autres */
  body:has(.oneview.parcours) .pp-doc { padding: 9px 14px; }
  body:has(.oneview.parcours) .pp-docs { gap: 8px; margin-bottom: 12px; }
  body:has(.oneview.parcours) .pp-retours { gap: 5px; }
  body:has(.oneview.parcours) .pp-retours-titre { margin-bottom: 6px; }
  body:has(.oneview.parcours) .pp-doc-row { margin: 6px 0; }
  /* parcours-jeune : la ligne GLP-1 (2026-08-20) porte la colonne adultes à
     4 items — le CTA touchait la flottaison à 1280x720 (nav 720/720) */
  body:has(.oneview.parcours) .pp-jeune { gap: 6px; }
  body:has(.oneview.parcours) .pp-jeune li { font-size: 13.5px; line-height: 1.5; }
  body:has(.oneview.parcours) .pp-jeune-cols { margin-bottom: 8px; }
  body:has(.oneview.parcours) .pp-jeune-titre { margin-bottom: 5px; }
  body:has(.oneview.parcours) .pp-check { margin: 12px 0 4px; }

  /* Demandes + simulateur : dépassement de 27 à 76px mesuré sur écran court
     (2026-07-19, préexistant au lot typo qui n'y ajoutait que 3-4px). Critère :
     ces pages gardent leur footer et défilent, donc c'est le BOUTON D'ENVOI qui
     doit tenir au-dessus de la flottaison (mesuré ≤ 687px à 1280x720,
     simulateur rempli inclus) ; le bloc contact secondaire .direct peut passer
     dessous. Compression douce seulement, la densité des formulaires reste. */
  body:has(.demande) .page-head, body:has(#sim) .page-head { padding-top: 70px; }
  body:has(.demande) .section.oneview, body:has(#sim) .section.oneview { padding-bottom: 6px; }
  body:has(.demande) .bls-col, body:has(#sim) .bls-col { padding-top: 11px; padding-bottom: 11px; }
  body:has(.demande) .bls-field, body:has(#sim) .bls-field { margin-top: 8px; }
  body:has(.demande) .bls-field textarea { height: 84px; min-height: 64px; }
  body:has(.demande) .pax-row { margin: 10px 0 10px; }
  body:has(.demande) .bls-recap h3, body:has(#sim) .bls-recap h3 { margin: 8px 0 10px; }
  body:has(.demande) .bls-cta-row, body:has(#sim) .bls-cta-row { margin-top: 8px; }
}

/* ===== Parcours patient (sous-projet A) ===== */
.parcours .container { max-width: 760px; }
.pp-progress { margin: 0 0 6px; }
.pp-track { height: 6px; border-radius: 999px; background: var(--gray-surface); overflow: hidden; }
#pp-bar { height: 100%; width: 0; border-radius: 999px; background: var(--gold-accent); transition: width .4s ease; }
.pp-step { margin: 0 0 18px; font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--muted-fg); }
.pp-card { background: #fff; border: 1px solid var(--border-subtle); border-radius: 20px; padding: 26px 28px; }
.pp-lead { font-size: var(--text-confort); line-height: 1.55; color: var(--muted-fg); margin: 0 0 18px; }
.pp-addr { font-family: var(--font-mono); font-size: var(--text-meta); color: var(--navy-deep); user-select: all; }
.pp-choix-lead { margin: 0 0 14px; font-size: var(--text-corps); line-height: 1.5; color: var(--muted-fg); }
.pp-choix-lead strong { color: var(--navy-deep); font-weight: 600; white-space: nowrap; }
/* Les spécialités du jour : une liste de choix, pas une galerie de personnes.
   Lignes compactes, pour que la journée tienne dans la vue unique quel que soit
   le nombre de spécialités. Aucun nom de médecin ici : le planning fait
   spécialité -> médecin, et le médecin n'apparaît qu'à l'écran 4. */
.pp-specs { display: grid; gap: 10px; margin: 0 auto; max-width: 460px; }
.pp-spec { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%;
  text-align: left; background: #fff; border: 1px solid var(--border-subtle); border-radius: 14px;
  padding: 15px 18px; cursor: pointer; color: var(--navy-deep);
  font-family: var(--font-display); font-weight: 560; font-size: 17px;
  transition: transform 200ms ease-out, box-shadow 200ms ease-out, border-color 200ms ease-out; }
.pp-spec:hover, .pp-spec:focus-visible { transform: translateY(-2px); border-color: var(--navy-deep);
  box-shadow: 0 16px 34px -18px rgba(15,33,56,.35); outline: none; }
.pp-spec::after { content: '→'; color: var(--gold-warm); font-size: 18px; }
/* la sortie de secours : offerte, mais visiblement secondaire */
.pp-spec--autre { border-style: dashed; font-family: inherit; font-weight: 400; font-size: var(--text-corps); color: var(--muted-fg); }
.pp-spec--autre::after { color: var(--muted-fg); }
.pp-equipe { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 10px auto 4px; max-width: 460px; }
.pp-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; }
.pp-nav .pp-next { flex: none; }
.pp-next.is-disabled { opacity: .45; pointer-events: none; filter: grayscale(.3); }
.pp-check { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0; font-size: var(--text-corps); color: var(--navy-deep); }
.pp-doc-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0; }
/* Écran 2 — les documents de la clinique + les trois retours (2026-08-20).
   Les fichiers viennent de la table DOCS d'anesthea.js (clinique raccordée
   via l'annuaire de parcours-jour) ; clinique inconnue → phrase de repli,
   et la liste des retours perd sa ligne postale (l'ol se renumérote seul). */
.pp-docs { display: grid; gap: 10px; margin: 2px 0 18px; }
.pp-doc { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 14px; width: 100%;
  background: #fff; border: 1px solid var(--border-subtle); border-radius: 14px; padding: 13px 16px;
  transition: transform 200ms ease-out, box-shadow 200ms ease-out, border-color 200ms ease-out; }
.pp-doc:hover, .pp-doc:focus-visible { transform: translateY(-2px); border-color: var(--navy-deep);
  box-shadow: 0 16px 34px -18px rgba(15,33,56,.35); outline: none; }
.pp-doc-badge { flex: none; font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: .08em;
  color: var(--gold-warm); border: 1px solid currentColor; border-radius: 7px; padding: 5px 7px; }
.pp-doc-body { flex: 1 1 200px; min-width: 0; display: grid; gap: 2px; }
.pp-doc-t { font-family: var(--font-display); font-weight: 560; font-size: 16.5px; color: var(--navy-deep); }
.pp-doc-s { font-size: 13px; line-height: 1.45; color: var(--muted-fg); }
.pp-doc-go { flex: none; margin-left: auto; font-family: var(--font-mono); font-size: var(--text-meta); color: var(--navy-deep); }
.pp-doc-go::after { content: ' ↓'; color: var(--gold-warm); }
.pp-docs-remis { margin: 2px 0 18px; font-size: var(--text-confort); line-height: 1.55; color: var(--muted-fg); }
.pp-retours-titre, .pp-jeune-titre { margin: 0 0 8px; font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--navy-deep); }
.pp-retours { margin: 0 0 4px; padding-left: 22px; list-style: decimal; display: grid; gap: 7px;
  font-size: 13.5px; line-height: 1.6; color: var(--muted-fg); }
.pp-retours li::marker { font-family: var(--font-mono); font-weight: 500; color: var(--navy-deep); }
.pp-retours .pp-lieu { color: var(--navy-deep); font-weight: 500; }
/* Écran 3 — le rappel des consignes de jeûne sur la vignette (2026-08-20).
   Deux blocs (adultes / enfants) côte à côte en desktop, empilés en mobile. */
.pp-jeune-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 30px; margin: 2px 0 12px; }
@media (max-width: 880px) { .pp-jeune-cols { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
.pp-jeune { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.pp-jeune li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.55; color: var(--muted-fg); }
.pp-jeune li::before { content: '–'; position: absolute; left: 0; color: var(--gold-warm); font-weight: 600; }
.pp-jeune strong { color: var(--navy-deep); font-weight: 600; }
/* Écran 4 — verrou documents (2026-08-20) : la zone médecin + ligne directe se
   floute (le voile pose flou + inert via JS), le panneau de confirmation vit
   PAR-DESSUS en absolu — la hauteur de la vue unique ne bouge pas. */
/* pile de grille (et pas d'absolu) : les deux couches partagent la cellule
   1/1, la hauteur du verrou suit la PLUS GRANDE — en mobile le panneau est
   plus haut que la zone floutée et un absolu débordait sur la nav */
.pp-verrou { display: grid; }
.pp-verrou-contenu, .pp-verrou-voile { grid-area: 1 / 1; }
.pp-verrou-contenu { transition: filter 450ms ease-out, opacity 450ms ease-out; }
.pp-verrou-contenu.pp-voile { filter: blur(9px); opacity: .5; pointer-events: none; user-select: none; }
.pp-verrou-voile { z-index: 2; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; padding: 10px; text-align: center;
  transition: opacity 350ms ease-out; }
.pp-verrou-voile.est-leve { opacity: 0; pointer-events: none; }
.pp-verrou-titre { margin: 0; font-size: 22px; color: var(--navy-deep); }
.pp-verrou-lead { margin: 0 0 4px; font-size: var(--text-corps); line-height: 1.5; color: var(--muted-fg); }
.pp-verrou-voile .pp-spec { max-width: 460px; width: 100%; text-align: left;
  box-shadow: 0 14px 30px -18px rgba(15,33,56,.35); }
.pp-verrou-retour { margin-top: 4px; font-size: var(--text-meta); color: var(--muted-fg);
  text-decoration: underline; text-underline-offset: 3px; }
.pp-verrou-retour:hover, .pp-verrou-retour:focus-visible { color: var(--navy-deep); }
@media (prefers-reduced-motion: reduce) {
  .pp-verrou-contenu, .pp-verrou-voile { transition: none; }
}

/* En-tête navy — écrans du parcours uniquement (le hub espace-patient garde son
   en-tête clair d'accueil, rev Loïc) */
.page-head.parcours-head { background: var(--navy-deep); }
.page-head.parcours-head .page-h1 { color: #fff; }
.page-head.parcours-head .pp-lead { color: rgba(255,255,255,.74); }
.page-head.parcours-head .pp-step { color: var(--gold-accent); }
.page-head.parcours-head .pp-track { background: rgba(255,255,255,.16); }

/* ===========================================================================
   Passe mobile — pages de demande et rejoindre
   Ces pages avaient gardé les réglages desktop, alors que espace-patient,
   parcours et accompagnement avaient déjà reçu leur passe mobile :
     · .page-head garde 148px de haut sous une nav qui n'en fait que 69 ;
     · les champs sont à 14px, et Safari iOS zoome sous 16px sans dézoomer ;
     · steppers, flèches de mois et jours du calendrier passent sous 44px (HIG).
   Portée : `body:has(.demande)` = les 6 demandes + le simulateur (même
   <form class="demande">, mêmes composants, mêmes défauts) ;
   `body:has(.bls-rejoindre)` = rejoindre.html.
   =========================================================================== */
/* 16px : sous ce seuil, Safari iOS zoome à la prise de focus et ne revient
   jamais en arrière. Vrai aussi pour un iPhone en paysage (932px), d'où le
   palier à 1080 et non 640 ; au-delà, la vue unique desktop garde ses 14px. */
@media (max-width: 1080px) {
  body:has(.demande) :is(.bls-field, .dform) :is(input, select, textarea) { font-size: 16px; }
}

@media (max-width: 640px) {
  /* En-tête : on ne garde que la garde sous la nav fixe (mêmes valeurs que
     .page-head.esp-patient, qui a déjà fait ses preuves) */
  body:has(.demande) .page-head,
  body:has(.bls-rejoindre) .page-head { padding: 74px 0 12px; }
  body:has(.demande) .page-head .page-h1,
  body:has(.bls-rejoindre) .page-head .page-h1 { font-size: 27px; line-height: 1.12; }
  body:has(.demande) .page-head .page-lede,
  body:has(.bls-rejoindre) .page-head .page-lede { font-size: 14px; line-height: 1.45; margin-top: 8px; }
  body:has(.demande) .section,
  body:has(.bls-rejoindre) .section { padding-top: 12px; }

  /* Cibles tactiles — 44px (Apple HIG) */
  body:has(.demande) :is(.bls-field, .dform) :is(input, select) { min-height: 44px; }
  body:has(.demande) .stepper button { width: 44px; height: 44px; }
  body:has(.demande) .type-opt { padding: 11px 16px; }
  body:has(.demande) .cal-nav { width: 44px; height: 44px; }
  /* .chip est un <button>, donc inline-block : sans passer en flex, min-height
     ne recentrerait pas le texte. Couvre les créneaux horaires de l'hypnose
     (32px) et les chips du simulateur (38px). */
  body:has(.demande) .chip { min-height: 44px; display: inline-flex; align-items: center; }

  /* Calendrier : 7 colonnes dans 375px, les jours tombaient à 36,7px. On rend
     la grille pleine largeur dans sa carte (les paddings imbriqués mangeaient
     70px) pour ramener le jour au voisinage des 44px. */
  body:has(.demande) .bls-col { padding: 24px 16px; }
  body:has(.demande) .bls-col .cal { margin-left: -12px; margin-right: -12px; padding: 4px; }
  body:has(.demande) .cal-day { font-size: 14px; }

  /* rejoindre — en desktop, les 6 colonnes forment un deck qui se lit d'un
     coup d'œil. Empilées en mobile, les 5 avantages devenaient 5 cartes
     identiques de 194px (icône centrée, titre, texte centré) : un métronome
     qui repoussait le seul CTA de la page à 1425px. Cinq éléments parallèles,
     c'est une liste, pas cinq cartes. On les rend à leur nature (icône en
     marqueur, texte ferré à gauche) ; « On en parle ? » reste la seule carte
     et redevient donc le point de mire. */
  .bls-rejoindre .bls-col:not(.bls-recap) {
    display: grid; grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 14px; align-items: center; text-align: left; padding: 14px 16px;
  }
  .bls-rejoindre .bls-col:not(.bls-recap) .bls-num { grid-row: 1 / span 2; }
  .bls-rejoindre .bls-col:not(.bls-recap) h3 { grid-column: 2; align-self: end; margin: 0; font-size: 17px; }
  .bls-rejoindre .bls-col:not(.bls-recap) p { grid-column: 2; align-self: start; margin: 3px 0 0; }
}

/* Restitution du simulateur : la phrase « Ce qu'Anesthéa compose » sous le
   récapitulatif (le kit n'est plus en écho, il vit dans la phrase). */
.sim-compose { margin: 12px 0 2px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.18); font-size: var(--text-corps); line-height: 1.5; color: rgba(255,255,255,.78); }
.sim-compose strong { color: var(--gold-accent); font-weight: 600; }
@media (min-width: 1081px) and (max-height: 800px) {
  .sim-compose { margin: 8px 0 0; padding-top: 8px; }
}

/* ===========================================================================
   Lot M3 — silo anesthésie (3 pages de fond) + FAQ patient
   =========================================================================== */

/* Deck .bls à 3 colonnes égales : le .bls standard réserve une 4e colonne
   récap (1.15fr) dont les pages du silo n'ont pas l'usage. Sous 1081px, les
   media queries du .bls de base reprennent la main (2 colonnes, puis 1).
   demande-hypnose l'emploie aussi depuis le retrait de son agenda (Vous /
   Lieu / Résumé) : en 2 colonnes, son récap navy occupe toute la 2e rangée
   plutôt que de laisser une case vide à sa droite. */
@media (min-width: 1081px) {
  .bls.bls-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 641px) and (max-width: 1080px) {
  .bls-3 .bls-recap { grid-column: 1 / -1; }
}
.bls-col .sol-link { display: inline-block; margin-top: 10px; }

/* Espacement standard sous les titres de section des pages de fond */
h2.section-title + .bls, h2.section-title + .silo-frise,
h2.section-title + .silo-prose, h2.section-title + .faq-wrap { margin-top: 26px; }
.section-lede + .silo-alt { margin-top: 22px; }

/* Bandeau normatif (anesthesie-partenaires) : le cadre factuel en une ligne */
.silo-norm { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 26px 0 0; padding: 15px 20px;
  background: var(--gray-warm); border: 1px solid var(--border-subtle); border-radius: 14px;
  font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: .12em;
  text-transform: uppercase; color: var(--navy-deep); }
.silo-norm span { display: inline-flex; align-items: center; gap: 10px; }
.silo-norm span::before { content: "◆"; font-size: 8px; color: var(--gold-warm); }

/* Frise numérotée : uniquement pour de vraies séquences (naissance d'un bloc
   éphémère, déroulé du partenariat) — l'ordre porte l'information */
.silo-frise { list-style: none; counter-reset: silo; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.silo-frise li { counter-increment: silo; background: #fff; border: 1px solid var(--border-subtle);
  border-radius: 18px; padding: 24px; min-width: 0; }
.silo-frise li::before { content: counter(silo, decimal-leading-zero); display: block;
  font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: .14em; color: var(--gold-warm); }
.silo-frise h3 { margin: 10px 0 8px; font-size: 19px; color: var(--navy-deep); }
.silo-frise p { margin: 0; font-size: var(--text-corps); line-height: 1.55; color: var(--muted-fg); }
@media (max-width: 880px) { .silo-frise { grid-template-columns: minmax(0, 1fr); } }

/* Prose courte et liens de continuation */
.silo-prose { max-width: 640px; }
.silo-prose p { margin: 0 0 14px; font-size: var(--text-confort); line-height: 1.6; color: var(--muted-fg); }
.silo-prose p:last-child { margin-bottom: 0; }
.silo-prose a { color: var(--navy-deep); font-weight: 600; }
.silo-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 24px; }

/* Alternatives factuelles (recruter / mandater / partenariat) : une liste de
   définitions, pas une séquence — donc sans numéros */
.silo-alt { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
  background: #fff; border: 1px solid var(--border-subtle); border-radius: 18px; overflow: hidden; }
.silo-alt > div { padding: 22px 24px; border-left: 1px solid var(--border-subtle); min-width: 0; }
.silo-alt > div:first-child { border-left: none; }
.silo-alt dt { font-weight: 600; color: var(--navy-deep); font-size: var(--text-confort); }
.silo-alt dd { margin: 8px 0 0; font-size: var(--text-corps); line-height: 1.55; color: var(--muted-fg); }
@media (max-width: 880px) {
  .silo-alt { grid-template-columns: minmax(0, 1fr); }
  .silo-alt > div { border-left: none; border-top: 1px solid var(--border-subtle); }
  .silo-alt > div:first-child { border-top: none; }
}

/* FAQ patient (parcours-patient) : accordéons natifs details/summary, zéro JS */
.faq-wrap { max-width: 760px; }
.faq-item { border-bottom: 1px solid var(--border-subtle); }
.faq-item:first-of-type { border-top: 1px solid var(--border-subtle); }
.faq-item summary { display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 17px 2px; cursor: pointer; list-style: none;
  font-weight: 600; font-size: var(--text-confort); color: var(--navy-deep); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; flex: none; font-family: var(--font-mono); font-size: 18px;
  line-height: 1; color: var(--gold-warm); transition: transform 180ms ease-out; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-a { padding: 0 2px 18px; }
.faq-item .faq-a p { margin: 0; max-width: 65ch; font-size: var(--text-corps); line-height: 1.6; color: var(--muted-fg); }
.faq-item .faq-a a { color: var(--navy-deep); font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .faq-item summary::after { transition: none; }
}

/* Passe mobile des pages du silo — même garde que les pages de demande :
   .page-head part à 148px sous une nav de 69px (piège documenté) */
@media (max-width: 640px) {
  body:has(.silo-head) .page-head { padding: 74px 0 12px; }
  body:has(.silo-head) .page-head .page-h1 { font-size: 27px; line-height: 1.12; }
  body:has(.silo-head) .page-head .page-lede { font-size: 14px; line-height: 1.45; margin-top: 8px; }
  body:has(.silo-head) .section { padding-top: 14px; }
  .silo-norm { gap: 8px 16px; padding: 12px 14px; margin-top: 18px; }
}