/* ==========================================================================
   My Doctor — Parcours narratif au scroll
   Langage : lignes · nœuds · branches · états. Couleurs :
   bleu = action / progression · teal = validé / disponible / terminé.
   Seules transform et opacity sont animées (pas de width/height/top/left).
   ========================================================================== */
:root{
  
  --j-track:#DCE5EF;           /* ligne non encore parcourue */
  --j-fill:var(--blue);        /* ligne parcourue */
  --j-sel:#EBF5FB;             /* fond de sélection */
}

/* ---------- Mise en page : un TRONC à gauche, le contenu à droite ----------
   Inspirations : graphe de branches Git (une voie principale d'où partent des
   branches courbes qui se refondent), arborescence de fichiers (├─ └─) sur
   mobile, tracé SVG piloté par stroke-dashoffset (pathLength = 1).          */
:root{--rw:88px;--jgap:24px}
.jsec{position:relative}
.jsec-search{padding:0!important}
.jsec-end{padding-bottom:var(--s20)}
.jt{position:relative;padding-left:var(--rw)}
.jt-line{position:absolute;left:calc(var(--rw) / 2 - 1px);top:0;bottom:0;width:2px;border-radius:2px;background:var(--j-track)}
.jt-line .jl-fill{background:linear-gradient(180deg,var(--teal),var(--blue))}
.jt-first .jt-line{top:28px}
.jt-last .jt-line{bottom:0}
/* tête lumineuse : suit la plume pendant que le tronc se dessine */
.jt-tip{position:absolute;left:50%;top:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 5px color-mix(in oklab,var(--blue) 16%,transparent),0 0 18px 2px color-mix(in oklab,var(--blue) 28%,transparent);transform:translateY(calc(var(--p,0) * var(--h,0px)));opacity:0;transition:opacity .25s}
.jt-line[data-live] .jt-tip{opacity:1}
.jspacer{height:72px}

/* Origine : le tronc naît du logo */
.jorigin-row{position:relative;display:flex;align-items:center;height:56px}
.jorigin{position:absolute;left:calc(var(--rw) / -2);top:0;transform:translateX(-50%);width:56px;height:56px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-2);display:grid;place-items:center;z-index:1}
.jorigin img{width:30px;height:30px;object-fit:contain}
.jorigin-lab{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* Étape ancrée sur le tronc */
.jstep{position:relative;padding:64px 0 28px}
.jstep-node{position:absolute;left:calc(var(--rw) / -2);top:60px;transform:translateX(-50%);z-index:1}
.jstep-body{display:grid;gap:14px;max-width:780px;justify-items:start}
.jstep-body .demo-tag{justify-self:start}

/* Branches courbes */
.jfork{position:relative;margin-left:calc(var(--rw) * -1)}
.jfork svg{position:absolute;left:0;top:0;overflow:visible}
.jf-track,.jf-fill{fill:none;stroke-width:2;stroke-linecap:round}
.jf-track{stroke:var(--j-track)}
.jf-fill{stroke:var(--j-fill);stroke-dasharray:1 2;stroke-dashoffset:1}
.jcols{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:var(--jgap)}
.jcol{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0}
.jcol-top{display:flex;flex-direction:column;align-items:center;margin-top:-11px}
.jcol .jcard{max-width:440px}
.jcol-grow{min-height:20px}

/* Élément unique accroché au tronc par un coude (├─) */
.jattach{position:relative;padding-top:32px}
.jattach::before{content:"";position:absolute;left:calc(var(--rw) / -2 - 1px);top:0;width:calc(var(--rw) / 2 + 1px);height:62px;border-left:2px solid var(--j-track);border-bottom:2px solid var(--j-track);border-bottom-left-radius:16px;transition:border-color .5s var(--ease-out)}
.jattach:has(.is-in)::before{border-color:var(--j-fill)}
.jattach > .jcard{max-width:480px}
.jattach.is-wide > .jcard{max-width:none}

/* ---------- Ligne (segment vertical) ---------- */
.jl{position:relative;width:2px;flex:none;border-radius:2px;background:var(--j-track)}
.jl-grow{flex:1 1 auto}
.jl-fill{position:absolute;inset:0;border-radius:inherit;background:var(--j-fill);transform-origin:50% 0;transform:scaleY(var(--p,0))}

/* ---------- Nœud ---------- */
.jn{display:flex;flex-direction:column;align-items:center;gap:10px;flex:none}
.jn-mark{position:relative;width:22px;height:22px;display:block}
.jn-core,.jn-halo{position:absolute;border-radius:50%}
.jn-core{inset:0;background:#fff;border:2px solid var(--line-2);transform:scale(.62);transition:transform .3s var(--ease-out),background-color .25s,border-color .25s,box-shadow .25s}
.jn-halo{inset:-7px;background:color-mix(in oklab,var(--blue) 13%,transparent);opacity:0;transform:scale(.6);transition:opacity .3s,transform .4s var(--ease-out)}
.jn-check{position:absolute;left:50%;top:50%;margin:-6px 0 0 -6px;color:#fff;opacity:0;transform:scale(.5);transition:opacity .2s .08s,transform .3s var(--ease-out) .08s}
.jn-lab{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);transition:color .3s;text-align:center;line-height:1.3}
/* actif : légèrement plus grand, halo subtil qui « respire » */
.jn[data-state="active"] .jn-core{transform:scale(.86);background:var(--blue);border-color:var(--blue);box-shadow:inset 0 0 0 3px #fff}
.jn[data-state="active"] .jn-halo{opacity:1;transform:none}
/* en cours : un seul nœud à la fois respire, très légèrement */
.jn[data-state="active"][data-current] .jn-halo{animation:j-breathe 3.2s ease-in-out infinite;will-change:transform,opacity}
.jn[data-state="active"] .jn-lab{color:var(--navy)}
/* terminé : check */
.jn[data-state="done"] .jn-core{transform:none;background:var(--teal-strong);border-color:var(--teal-strong)}
.jn[data-state="done"] .jn-check{opacity:1;transform:none}
.jn[data-state="done"] .jn-lab{color:var(--teal-600)}
@keyframes j-breathe{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.14);opacity:.55}}
/* nœud final */
.jn-big .jn-mark{width:40px;height:40px}
.jn-big .jn-check{width:20px;height:20px;margin:-10px 0 0 -10px}
.jn-big .jn-halo{inset:-10px}

/* ---------- Cartes reliées ---------- */
.jcard{position:relative;width:100%;max-width:320px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:var(--sh-1);text-align:left}
.jcard-head{display:flex;gap:12px;align-items:center}
.jcard-ic{width:36px;height:36px;flex:none;border-radius:11px;display:grid;place-items:center}
.jcard-t{font-weight:600;color:var(--navy);font-size:15px;line-height:1.3}
.jcard-s{font-size:13px;color:var(--muted);line-height:1.4;margin-top:2px}
.jchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.jchip{height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--line-2);background:#fff;font-size:13px;font-weight:500;color:var(--ink-2);transition:transform .2s var(--ease-out),border-color .2s,background-color .2s,color .2s}
.jchip:hover{border-color:var(--blue);background:var(--j-sel);color:#0057A8;transform:translateY(-2px)}
.jchip:active{transform:none}
.jcard-doc{max-width:400px}
.jdoc{display:flex;gap:12px;align-items:center}
.jdoc-badge{margin-left:auto;flex:none}
.jdoc-act{display:flex;gap:8px;align-items:center;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:14px;font-weight:600;color:var(--blue)}
.jslots{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.jslots span{font-size:12px;font-weight:500;padding:4px 9px;border-radius:8px;border:1px solid var(--line-2);color:var(--navy)}
.jslots .on{background:var(--blue);border-color:var(--blue);color:#fff}
.jslots .off{background:var(--bg-mute);border-color:transparent;color:var(--muted-2);text-decoration:line-through}
.jcard-confirm{max-width:400px;display:grid;gap:14px;justify-items:start}
.jconfirm{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:14px;color:var(--ink-2)}
.jconfirm li{display:flex;gap:10px;align-items:center}
.jconfirm svg{color:var(--teal-600);flex:none}
.jcard-wide{max-width:440px}
.jend{display:grid;gap:12px;justify-items:center;text-align:center;margin-top:20px;max-width:620px}
.jend h3{font-size:clamp(22px,2.4vw,26px)}
.jend p{color:var(--ink-3)}
.jend-cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:8px}

/* Entrée des cartes : opacité + translateY + scale très légers */
@keyframes j-card-in{from{opacity:0;transform:translateY(14px) scale(.98)}}
@media (prefers-reduced-motion:no-preference){
  .js-rv .jcard.rv.is-in,.js-rv .jend.rv.is-in{animation:j-card-in .6s var(--ease-out) var(--rv-delay) backwards}
}

/* ---------- CHOISIR : les branches arrivent sur les cartes médecins ---------- */
.dgrid.is-connected{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:20px;row-gap:20px}
.is-connected .dcard-in{position:relative}
.is-connected .dcard-in:nth-child(-n+3)::before{content:"";position:absolute;left:50%;top:-6px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#fff;border:2px solid var(--j-fill);z-index:1}
@media (max-width:1080px){
  .dgrid.is-connected{grid-template-columns:repeat(2,minmax(0,1fr))}
  .is-connected .dcard-in:nth-child(3)::before{display:none}
}

/* ---------- CONSULTER : scène de téléconsultation ---------- */
.tc-scroll{--sticky:0;position:relative}
.tc-stage{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center;padding-block:24px}
@media (prefers-reduced-motion:no-preference){
  .tc-scroll{--sticky:1;height:170vh}
  .tc-stage{position:sticky;top:88px;min-height:calc(100vh - 112px)}
}
.tc-track{list-style:none;margin:0;padding:0;display:grid;gap:8px;position:relative}
.tc-track::before,.tc-track::after{content:"";position:absolute;left:17px;top:30px;bottom:30px;width:2px;border-radius:2px;background:var(--j-track)}
.tc-track::after{background:var(--j-fill);transform-origin:50% 0;transform:scaleY(var(--p,0));transition:transform .12s linear}
.tc-step{position:relative;display:flex;gap:16px;align-items:flex-start;padding:12px 0;opacity:.5;transition:opacity .35s}
.tc-step b{display:block;color:var(--navy);font-size:17px;line-height:1.3}
.tc-step p{font-size:14px;color:var(--ink-3);margin-top:4px}
.tc-node{position:relative;z-index:1;width:36px;height:36px;flex:none;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid var(--line-2);color:var(--muted);transition:background-color .3s,border-color .3s,color .3s,box-shadow .3s}
/* états pilotés par data-k (0 → 3) */
.tc-scroll[data-k="1"] .tc-step:nth-child(-n+1),.tc-scroll[data-k="2"] .tc-step:nth-child(-n+2),.tc-scroll[data-k="3"] .tc-step:nth-child(-n+3){opacity:1}
.tc-scroll[data-k="1"] .tc-step:nth-child(-n+1) .tc-node,.tc-scroll[data-k="2"] .tc-step:nth-child(-n+2) .tc-node,.tc-scroll[data-k="3"] .tc-step:nth-child(-n+3) .tc-node{background:var(--teal-strong);border-color:var(--teal-strong);color:#fff}
.tc-scroll[data-k="0"] .tc-step:nth-child(1),.tc-scroll[data-k="1"] .tc-step:nth-child(2),.tc-scroll[data-k="2"] .tc-step:nth-child(3),.tc-scroll[data-k="3"] .tc-step:nth-child(4){opacity:1}
.tc-scroll[data-k="0"] .tc-step:nth-child(1) .tc-node,.tc-scroll[data-k="1"] .tc-step:nth-child(2) .tc-node,.tc-scroll[data-k="2"] .tc-step:nth-child(3) .tc-node,.tc-scroll[data-k="3"] .tc-step:nth-child(4) .tc-node{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 0 0 6px color-mix(in oklab,var(--blue) 13%,transparent)}

.tc-call{background:#fff;border:1px solid var(--line);border-radius:26px;box-shadow:var(--sh-3);overflow:hidden}
.tc-top{display:flex;gap:12px;align-items:center;padding:16px 18px}
.tc-name{font-weight:600;color:var(--navy);line-height:1.3}
.tc-spec{font-size:13px;color:var(--muted)}
.tc-status{margin-left:auto;display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:600;background:var(--bg-mute);color:var(--ink-3);white-space:nowrap;transition:background-color .3s,color .3s}
.tc-dot{width:8px;height:8px;border-radius:50%;background:var(--muted-2);transition:background-color .3s}
.tc-s1,.tc-s3{display:none}
.tc-scroll:is([data-k="1"],[data-k="2"]) .tc-s0,.tc-scroll[data-k="3"] .tc-s0{display:none}
.tc-scroll:is([data-k="1"],[data-k="2"]) .tc-s1{display:inline}
.tc-scroll[data-k="3"] .tc-s3{display:inline}
.tc-scroll:not([data-k="0"]) .tc-status{background:var(--teal-50);color:var(--teal-600)}
.tc-scroll:not([data-k="0"]) .tc-dot{background:var(--teal-strong)}
.tc-screen{position:relative;margin:0 16px;aspect-ratio:16/10;border-radius:18px;overflow:hidden;background:linear-gradient(160deg,#1B3A5C,var(--navy))}
.tc-screen > *{position:absolute;transition:opacity .5s var(--ease-out),transform .6s var(--ease-out);will-change:opacity,transform} /* couches composées : pas de repeinte */
.tc-video{inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%;opacity:0;transform:scale(1.04)}
.tc-idle,.tc-wait,.tc-conn{inset:0;display:grid;place-content:center;justify-items:center;gap:8px;color:rgba(255,255,255,.75);font-size:14px;text-align:center;padding:16px;opacity:0;transform:translateY(8px)}
.tc-wait b,.tc-conn b{color:#fff;font-size:16px}
.tc-wait-ic{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:rgba(127,227,214,.16);color:#7FE3D6}
.tc-conn .spin{width:22px;height:22px;color:#7FE3D6}
.tc-conn-bar{width:160px;height:3px;border-radius:3px;background:rgba(255,255,255,.15);overflow:hidden}
.tc-conn-bar i{display:block;height:100%;background:#7FE3D6;transform-origin:0 50%;transform:scaleX(clamp(0,calc(var(--p,0) * 4 - 2),1))}
.tc-self{right:14px;bottom:14px;width:78px;height:100px;border-radius:12px;background:linear-gradient(160deg,#35506F,#1C3553);border:2px solid rgba(255,255,255,.55);display:grid;place-items:center;color:rgba(255,255,255,.6);opacity:0;transform:translateY(10px)}
.tc-scroll[data-k="0"] .tc-idle,.tc-scroll[data-k="1"] .tc-wait,.tc-scroll[data-k="2"] .tc-conn{opacity:1;transform:none}
.tc-scroll[data-k="3"] .tc-video,.tc-scroll[data-k="3"] .tc-self{opacity:1;transform:none}
.tc-ctrl{display:flex;justify-content:center;gap:12px;padding:16px}
.tc-ctrl span{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--bg-mute);color:var(--ink-2);opacity:.45;transition:opacity .4s}
.tc-ctrl .end{background:var(--red);color:#fff}
.tc-scroll[data-k="3"] .tc-ctrl span{opacity:1}
.tc-after{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding-top:64px;align-items:start}
.tc-h3{font-size:18px;margin-bottom:14px}
.jsec-tele .req li{background:#fff;border:1px solid var(--line)}

@media (max-width:900px){
  .tc-stage{grid-template-columns:1fr;gap:20px}
  .tc-track{grid-template-columns:repeat(4,1fr);gap:0}
  .tc-track::before,.tc-track::after{left:12.5%;right:12.5%;top:17px;bottom:auto;width:auto;height:2px}
  .tc-track::after{transform-origin:0 50%;transform:scaleX(var(--p,0))}
  .tc-step{flex-direction:column;align-items:center;text-align:center;gap:8px;padding:0}
  .tc-step b{font-size:12px}
  .tc-step p{display:none}
  .tc-after{grid-template-columns:1fr;gap:28px;padding-top:40px}
}
@media (max-width:900px) and (prefers-reduced-motion:no-preference){
  .tc-scroll{height:150vh}
  .tc-stage{top:80px;min-height:0;align-content:start;padding-top:12px}
}

/* ---------- Navigation de progression (desktop large) ---------- */
.jrail{position:fixed;right:28px;top:50%;transform:translateY(-50%);z-index:50;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.jrail.is-on{opacity:1;visibility:visible}
.jrail ol{list-style:none;margin:0;padding:0;display:grid;gap:18px;position:relative}
.jrail ol::before,.jrail ol::after{content:"";position:absolute;right:5px;top:6px;bottom:6px;width:2px;margin-right:-1px;border-radius:2px;background:var(--j-track)}
.jrail ol::after{background:var(--j-fill);transform-origin:50% 0;transform:scaleY(var(--ja,0));transition:transform .5s var(--ease-out)}
.jrail button{display:flex;align-items:center;justify-content:flex-end;gap:10px;background:none;border:0;padding:0;font-size:12px;font-weight:500;color:var(--muted);min-height:14px}
.jrail-lab{opacity:0;transform:translateX(4px);transition:opacity .2s,transform .2s var(--ease-out);white-space:nowrap}
.jrail:hover .jrail-lab,.jrail:focus-within .jrail-lab,.jrail li[data-state="active"] .jrail-lab{opacity:1;transform:none}
.jrail li[data-state="active"] .jrail-lab{color:var(--navy);font-weight:600}
.jrail-dot{position:relative;z-index:1;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--line-2);transform:scale(.75);transition:transform .25s var(--ease-out),background-color .25s,border-color .25s,box-shadow .25s}
.jrail li[data-state="done"] .jrail-dot{background:var(--teal-strong);border-color:var(--teal-strong)}
.jrail li[data-state="active"] .jrail-dot{background:var(--blue);border-color:var(--blue);transform:none;box-shadow:0 0 0 4px color-mix(in oklab,var(--blue) 14%,transparent)}
.jrail button:hover .jrail-dot{transform:none}
/* barre fine sous le header (écrans plus étroits) */
.jbar-top{position:fixed;left:0;right:0;top:72px;height:2px;z-index:59;pointer-events:none;opacity:0;transition:opacity .3s}
.jbar-top.is-on{opacity:1}
.jbar-top span{display:block;height:100%;background:var(--j-fill);transform-origin:0 50%;transform:scaleX(var(--jp,0))}
@media (max-width:1379px){.jrail{display:none}}
@media (min-width:1380px){.jbar-top{display:none}}

/* ---------- Mobile : une arborescence verticale (├─ └─) ---------- */
@media (max-width:720px){
  :root{--rw:36px;--jgap:14px}
  .jorigin-row{height:40px}
  .jorigin{width:40px;height:40px}
  .jorigin img{width:22px;height:22px}
  .jt-first .jt-line{top:20px}
  .jstep{padding:52px 0 20px}
  .jstep-node{top:50px}
  .jn-num .jn-mark{width:34px;height:34px}
  .jn-num .jn-n{font-size:12px}
  .jfork{display:none}
  .jcols{grid-template-columns:1fr;padding-top:18px}
  .jcol{align-items:stretch}
  .jcol-top,.jcol-grow{display:none}
  .jcol .jcol-link{margin-left:24px;align-self:flex-start;height:18px!important}
  .jcol::before,.is-connected .dcard-in::after{content:"";position:absolute;left:calc(var(--rw) / -2 - 1px);top:-18px;width:calc(var(--rw) / 2 + 1px);height:46px;border-left:2px solid var(--j-track);border-bottom:2px solid var(--j-track);border-bottom-left-radius:12px;transition:border-color .5s var(--ease-out)}
  .jcol:has(.is-in)::before{border-color:var(--j-fill)}
  .is-connected .dcard-in::after{border-color:var(--j-fill)}
  .jattach::before{height:56px;border-bottom-left-radius:12px}
  .jattach{padding-top:24px}
  .dgrid.is-connected{grid-template-columns:1fr;row-gap:18px;padding-top:18px}
  .is-connected .dcard-in::before{display:none}
  .jcard{padding:14px;border-radius:14px}
  .jcard-ic{width:32px;height:32px}
  .jcard-t{font-size:14px}
  .jchip{height:30px;padding:0 10px;font-size:12px}
  .jn-lab{font-size:12px;letter-spacing:.1em}
  .jdoc{flex-wrap:wrap}
  .jdoc-badge{margin-left:0}
  .jspacer{height:48px}
}

/* ---------- Mouvement réduit : tout est tracé, états conservés ---------- */
@media (prefers-reduced-motion:reduce){
  .jn-halo{animation:none!important}
  .jl-fill,.tc-track::after,.jattach::before,.jcol::before{transition:none!important}
  .jf-fill{stroke-dashoffset:0!important}
  .jt-tip{display:none}
}

/* ==========================================================================
   « DU FLOU À LA CLARTÉ » — inspiration Ahead Health (Vicine Design)
   Les titres se mettent au point ; le mot-clé est net d'emblée.
   Flou limité (≤ 8 px), sur du texte, une seule fois : pas de flou massif.
   ========================================================================== */
.focus-t .fw{display:inline-block}
/* Effet de flou retiré à la demande : les titres apparaissent simplement (fondu + légère montée). */

/* Neutre chaud : sortir du cliché « bleu clinique » sans quitter la marque */
main .section.soft,.jsec-tele{background:var(--sand)}

/* ---------- Carnet de suivi (ligne du temps) ---------- */
.jtl{max-width:880px;padding:20px 22px 22px}
.jtl-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap;margin-bottom:22px}
.jtl-body{position:relative}
.jtl-track{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:relative}
.jtl-track::before{content:"";position:absolute;left:10%;right:10%;top:35px;height:2px;background:repeating-linear-gradient(90deg,var(--j-track) 0 6px,transparent 6px 11px)}
.jtl-track::after{content:"";position:absolute;left:10%;right:40%;top:35px;height:2px;border-radius:2px;background:var(--j-fill);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.jtl-ev{position:relative;display:grid;justify-items:center;align-content:start;text-align:center;gap:4px;padding:0 6px}
.jtl-m{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);height:20px}
.jtl-dot{position:relative;z-index:1;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--line-2);margin:5px 0 8px}
.is-done .jtl-dot{background:var(--teal-strong);border-color:var(--teal-strong)}
.is-next .jtl-dot{border-color:var(--blue);box-shadow:0 0 0 4px color-mix(in oklab,var(--blue) 14%,transparent)}
.jtl-ev b{font-size:14px;color:var(--navy);line-height:1.3}
.jtl-s{font-size:12.5px;color:var(--muted);line-height:1.4}
.jtl-flag{font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px;margin-top:6px}
.f-done{background:var(--teal-50);color:var(--teal-600)}
.f-next{background:var(--j-sel);color:#0057A8}
.f-plan{background:var(--bg-mute);color:var(--muted)}
.jtl-today{position:absolute;left:60%;top:0;transform:translateX(-50%);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);background:#fff;padding:0 4px}
.jtl-today::after{content:"";position:absolute;left:50%;top:18px;width:2px;height:14px;margin-left:-1px;background:var(--blue);border-radius:2px}
@media (max-width:720px){
  .jtl{padding:16px}
  .jtl-track{grid-template-columns:1fr;gap:16px}
  .jtl-track::before,.jtl-track::after{left:69px;right:auto;top:10px;width:2px;height:auto}
  .jtl-track::before{bottom:10px;background:repeating-linear-gradient(180deg,var(--j-track) 0 6px,transparent 6px 11px)}
  .jtl-track::after{bottom:42%;transform-origin:50% 0;transform:scaleY(var(--p,0))}
  .jtl-ev{grid-template-columns:52px 16px 1fr;column-gap:10px;justify-items:start;text-align:left;gap:2px 10px;padding:0}
  .jtl-m{grid-column:1;grid-row:1;height:auto;padding-top:1px}
  .jtl-dot{grid-column:2;grid-row:1;margin:3px 0 0}
  .jtl-ev b,.jtl-s,.jtl-flag{grid-column:3}
  .jtl-ev b{grid-row:1}
  .jtl-flag{justify-self:start;margin-top:4px}
  .jtl-today{display:none}
}
.focus-t .fw-g{white-space:nowrap}

/* ---------- Nœud d'étape numéroté (01 → 05) ---------- */
.jn-num .jn-mark{width:44px;height:44px}
.jn-num .jn-core{transform:none;background:#fff;border-color:var(--line-2)}
.jn-n{position:absolute;inset:0;display:grid;place-items:center;font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--muted);transition:color .25s,opacity .2s}
.jn-num[data-state="active"] .jn-core{transform:none;background:var(--blue);border-color:var(--blue);box-shadow:none}
.jn-num[data-state="active"] .jn-n{color:#fff}
.jn-num[data-state="done"] .jn-n{opacity:0}
.jn-num .jn-check{width:18px;height:18px;margin:-9px 0 0 -9px}
.jn-num .jn-halo{inset:-8px}

/* ---------- Fin du tronc ---------- */
.jend-node{position:relative;height:40px;margin-top:48px}
.jend-node .jn{position:absolute;left:calc(var(--rw) / -2);top:0;transform:translateX(-50%)}
.jt-last .jt-line{bottom:20px}
.jend{margin:-40px 0 0 var(--rw);justify-items:start;text-align:left;max-width:640px;padding-left:4px}
.jend h3{line-height:40px}
.jend-cta{justify-content:flex-start}
.tc-stage{padding-inline:0}
@media (max-width:480px){.tc-top{flex-wrap:wrap;row-gap:8px}.tc-status{margin-left:0;order:3;height:26px;font-size:12px}}

/* ---------- Landing resserrée ---------- */
.jslot-lab{font-size:12px;font-weight:600;color:var(--muted);margin-top:12px}
.jslot-lab + .jslots{margin-top:6px}
.res-more{display:flex;justify-content:center;margin-top:20px}
.tc-after{display:grid;grid-template-columns:1fr;gap:12px;padding-top:40px}
.tc-more{border:1px solid var(--line);border-radius:16px;background:#fff}
.tc-more summary{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:56px;padding:0 20px;cursor:pointer;font-weight:600;color:var(--navy);list-style:none}
.tc-more summary::-webkit-details-marker{display:none}
.tc-more summary svg{transition:transform .2s var(--ease)}
.tc-more[open] summary svg{transform:rotate(180deg)}
.tc-more-in{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:4px 20px 20px}
@media (max-width:900px){.tc-more-in{grid-template-columns:1fr}}