/* =====================================================================
   Système de mouvement du site — cabinet Cyril Mangeolle
   Une seule source pour les durées, les courbes et les micro-interactions.
   Règles : entrées en décélération, déplacements en ease-in-out, aucun ressort,
   sorties 20 % plus courtes que les entrées, décalage de 30 ms entre éléments.
   Tout est coupé si le visiteur a demandé moins d'animations.
   ===================================================================== */
:root{
  /* Courbes */
  --mo-ease-out:cubic-bezier(.23,1,.32,1);        /* entrées : décélération naturelle */
  --mo-ease-poids:cubic-bezier(.16,1,.3,1);       /* révélations « avec masse » : départ franc, longue décélération */
  --mo-ease-in-out:cubic-bezier(.77,0,.175,1);    /* déplacement de A vers B */
  --mo-ease-sortie:cubic-bezier(.32,0,.67,0);     /* sortie : accélère et s'efface */
  /* Durées (entrée → sortie = 80 %) */
  --mo-instant:120ms;  --mo-instant-s:96ms;      /* appui */
  --mo-menu:200ms;     --mo-menu-s:160ms;        /* menus déroulants : 150 à 250 ms */
  --mo-pop:240ms;      --mo-pop-s:192ms;         /* popovers, fenêtres */
  --mo-moyen:320ms;    --mo-moyen-s:256ms;
  --mo-revele:720ms;   --mo-revele-s:576ms;      /* révélation d'une étape */
  --mo-trajet:520ms;                             /* déplacement d'un repère */
  /* Chorégraphie et micro-interactions */
  --mo-decalage:30ms;
  --mo-appui:.97;
  --mo-popover:.95;
  --mo-etirement:1.12;
  /* Palette anatomique commune à tous les schémas du site
     (d'après les planches de référence fournies par Cyril, novembre 2026) */
  --ana-os:#F4E1C2;        --ana-os-trait:#C79F84;      /* os : ivoire chaud, contour brun clair */
  --ana-os-ombre:#E2C2A6;                                /* os : faces dans l'ombre */
  --ana-disque:#97CBD6;                                  /* disques : anneau bleu pâle */
  --ana-noyau:#97D6C2;                                   /* disques : noyau vert d'eau */
  --ana-cartilage:#B1D7E6;                               /* cartilage articulaire */
  --ana-muscle:#C9777D;    --ana-muscle-trait:#9E4E5A;  /* muscle au repos : vieux rose */
  --ana-muscle-court:#BA5D6B;                            /* muscle raccourci */
  --ana-fibre:#A9505E;                                   /* fibres musculaires */
  --ana-tendon:#E6D4C8;                                  /* tendons, ligaments */
  --ana-fascia:rgba(220,228,221,.45); --ana-fascia-trait:#B7C3C9;   /* fascias : voile gris perle */
  --ana-nerf:#EDD58C;      --ana-nerf-trait:#C9A86A;    /* nerfs : jaune paille */
  --ana-peau:#FDE0D1;                                    /* silhouette du corps */
  --ana-inflammation:#EF623B;                            /* zone irritée */
  --ana-tension:#E3B04B;                                 /* tension, signal nociceptif : or */
  --ana-frein:#21808d;                                   /* modulation, apaisement : bleu-vert */
}

/* ---------- Menus déroulants : naissent sous leur bouton et s'y replient ---------- */
.nav .dd-list{transform-origin:50% 0;scale:var(--mo-popover);
  transition:opacity var(--mo-menu-s) var(--mo-ease-out),translate var(--mo-menu-s) var(--mo-ease-out),scale var(--mo-menu-s) var(--mo-ease-out),visibility 0s linear var(--mo-menu-s)}
.nav .dd.open .dd-list{scale:1;
  transition:opacity var(--mo-menu) var(--mo-ease-out),translate var(--mo-menu) var(--mo-ease-out),scale var(--mo-menu) var(--mo-ease-out),visibility 0s}
.nav .dd.open .dd-list>li{animation:mo-ligne var(--mo-menu) var(--mo-ease-out) both}
.nav .dd.open .dd-list>li:nth-child(2){animation-delay:calc(var(--mo-decalage)*1)}
.nav .dd.open .dd-list>li:nth-child(3){animation-delay:calc(var(--mo-decalage)*2)}
.nav .dd.open .dd-list>li:nth-child(4){animation-delay:calc(var(--mo-decalage)*3)}
.nav .dd.open .dd-list>li:nth-child(5){animation-delay:calc(var(--mo-decalage)*4)}
.nav .dd.open .dd-list>li:nth-child(6){animation-delay:calc(var(--mo-decalage)*5)}
.nav .dd.open .dd-list>li:nth-child(7){animation-delay:calc(var(--mo-decalage)*6)}
.nav .dd.open .dd-list>li:nth-child(8){animation-delay:calc(var(--mo-decalage)*7)}
@keyframes mo-ligne{from{opacity:0;translate:0 -4px}}
.nav .chev{transition:transform var(--mo-menu) var(--mo-ease-in-out)}

/* ---------- Passage d'une page à l'autre : la sortie est 20 % plus courte ---------- */
::view-transition-old(root){animation-duration:240ms}
::view-transition-new(root){animation-duration:300ms}

/* ---------- Changement d'icône : fondu + flou ---------- */
.mo-ico{animation:mo-ico var(--mo-moyen) var(--mo-ease-out) both}
@keyframes mo-ico{from{opacity:0;filter:blur(4px);scale:.9}}
@keyframes mo-flou-sort{to{opacity:0;filter:blur(6px)}}
@keyframes mo-flou-entre{from{opacity:0;filter:blur(6px)}}

/* ---------- Réussite : pulsation nette, sans rebond ---------- */
.mo-succes{animation:mo-succes 520ms var(--mo-ease-out)}
@keyframes mo-succes{
  0%{box-shadow:0 0 0 0 rgba(33,128,141,.45);scale:1}
  35%{scale:1.03}
  100%{box-shadow:0 0 0 14px rgba(33,128,141,0);scale:1}}

/* =====================================================================
   Récit en étapes : une fibre nerveuse relie les étapes.
   La gaine de myéline est découpée en segments ; l'influx saute d'un nœud à l'autre
   (conduction saltatoire) au fil du défilement, et chaque étape s'allume à son passage.
   ===================================================================== */
.rc{position:relative}
.rc-nerf{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;z-index:0}
.rc-actif>.rc-etape{position:relative;z-index:1}
.rc-actif::before,.rc-actif::after{display:none!important}          /* l'ancien rail est remplacé par la fibre */
.rc-mesure>.rc-etape{transform:none!important;transition:none!important}
.rc-colonne>.rc-etape::before{visibility:hidden}
.rc-nerf .ax-coeur{fill:none;stroke:var(--ana-nerf-trait);stroke-width:2.2;opacity:.7}
.rc-nerf .ax-gaine{fill:none;stroke-linecap:round}
.rc-nerf .ax-g1{stroke:#C4A47E;stroke-width:11}
.rc-nerf .ax-g2{stroke:#EAD8BE;stroke-width:8}
.rc-nerf .ax-g3{stroke:#FFFaF2;stroke-width:2.4;opacity:.9;transform:translate(-1.6px,-1.2px)}
.rc-nerf .ax-actif{fill:none;stroke:url(#rc-grad);stroke-width:3;stroke-linecap:round}
.rc-nerf .ax-ranvier{fill:#E3B04B;opacity:0;transform-box:fill-box;transform-origin:center}
.rc-nerf .ax-ranvier.flash{animation:mo-ranvier 620ms var(--mo-ease-out)}
@keyframes mo-ranvier{0%{opacity:.95;scale:.6}100%{opacity:0;scale:2.2}}
.rc-nerf .ax-influx .halo{fill:#E3B04B;opacity:.28}
.rc-nerf .ax-influx .noyau{fill:#E3B04B;stroke:#fff;stroke-width:1.5}

/* Étapes : masquées avant le passage de l'influx (uniquement quand le récit est actif) */
.rc-actif>.rc-etape:not(.rc-on){opacity:0;transform:translateY(30px) scale(.985)}
.rc-actif>.rc-etape{transition:opacity var(--mo-revele-s) var(--mo-ease-out),transform var(--mo-revele-s) var(--mo-ease-sortie)}
.rc-actif>.rc-etape.rc-on{transition:opacity calc(var(--mo-revele)*.7) var(--mo-ease-out),transform var(--mo-revele) var(--mo-ease-poids)}
.rc-actif .rc-ligne{transition:opacity calc(var(--mo-revele)*.7) var(--mo-ease-out),transform var(--mo-revele) var(--mo-ease-poids);transition-delay:calc(var(--mo-i,0)*var(--mo-decalage) + 90ms)}
.rc-actif>.rc-etape:not(.rc-on) .rc-ligne{opacity:0;transform:translateY(12px);transition-delay:0s;transition-duration:var(--mo-moyen-s)}
.rc-actif>.rc-etape.rc-cur{--rc-cur:1}
.rc-tout-visible.rc-actif>.rc-etape:not(.rc-on),.rc-tout-visible.rc-actif>.rc-etape:not(.rc-on) .rc-ligne{opacity:1;transform:none}

/* Repère de vertèbre (pages motifs) : vue de profil, s'éclaire au passage */
.rc-vert{position:absolute;overflow:visible;pointer-events:none}
.rc-vert .os{fill:url(#rc-os);stroke:#9C7A58;stroke-width:.9;transition:stroke var(--mo-moyen-s) var(--mo-ease-out)}
.rc-vert .ombre{fill:#8A6240;opacity:.28}
.rc-vert .trab{fill:none;stroke:#C9AE8D;stroke-width:.5;opacity:.45}
.rc-vert .cort{fill:none;stroke:#fff;stroke-width:1.1;opacity:.6}
.rc-vert .plateau{fill:none;stroke:#B99872;stroke-width:1.3}
.rc-vert .lueur{fill:#21808d;opacity:0;transition:opacity var(--mo-moyen-s) var(--mo-ease-out)}
.rc-cur>.rc-vert .lueur{opacity:.12;transition-duration:var(--mo-moyen)}
.rc-cur>.rc-vert .os{stroke:#21808d;transition-duration:var(--mo-moyen)}

@media (prefers-reduced-motion:reduce){
  .nav .dd.open .dd-list>li,.mo-ico,.mo-succes,.rc-nerf .ax-ranvier.flash{animation:none}
  .rc-actif>.rc-etape,.rc-actif .rc-ligne{opacity:1!important;transform:none!important;transition:none}
}

/* Téléphone : la vertèbre a besoin d'un peu de marge à gauche */
@media (max-width:600px){.rc-colonne.tl li{padding-left:74px}.rc-colonne.tl li::before{left:17px}}


/* =====================================================================
   SYSTÈME DE DESIGN COMMUN : typographie, largeurs, rythme vertical
   Une seule échelle pour tout le site. Les classes ds-* sont posées sur les balises
   (titres et paragraphes) ; les largeurs de chaque page pointent vers les mêmes jetons.
   ===================================================================== */
:root{
  --ds-titre:'Lora',Georgia,serif;
  --ds-texte-police:'Outfit',system-ui,sans-serif;
  --ds-h1:clamp(2.15rem,1.35rem + 2.5vw,3.3rem);     /* 34 → 53 px */
  --ds-h2:clamp(1.75rem,1.25rem + 1.6vw,2.5rem);     /* 28 → 40 px */
  --ds-h3:clamp(1.12rem,1.02rem + .35vw,1.3rem);     /* 18 → 21 px */
  --ds-h4:1.06rem;
  --ds-chapeau:clamp(1.06rem,1rem + .25vw,1.16rem);  /* paragraphe d'introduction */
  --ds-corps:1rem;
  --ds-petit:.95rem;                                   /* texte des cartes */
  --ds-large:1150px;                                   /* contenu large : grilles, en-têtes */
  --ds-moyen:820px;                                    /* questions, formulaires */
  --ds-etroit:720px;                                   /* chapeaux de section */
  --ds-marge:5%;                                       /* marge latérale (1,2 rem sur téléphone) */
  --ds-section:clamp(3rem,7vw,5.5rem);                 /* espace vertical d'une section */
  --ds-gouttiere:clamp(1rem,2.2vw,1.6rem);
}
.ds-h1,.ds-h2,.ds-h3,.ds-h4{font-family:var(--ds-titre)!important;font-weight:600!important;text-wrap:balance}
.ds-h1{font-size:var(--ds-h1)!important;line-height:1.12!important;letter-spacing:-.012em!important}
.ds-h2{font-size:var(--ds-h2)!important;line-height:1.18!important;letter-spacing:-.006em!important}
.ds-h3{font-size:var(--ds-h3)!important;line-height:1.32!important;letter-spacing:0!important}
.ds-h4{font-size:var(--ds-h4)!important;line-height:1.38!important;letter-spacing:0!important}
.ds-chapeau,.ds-texte,.ds-petit{font-family:var(--ds-texte-police)!important;letter-spacing:0!important;text-wrap:pretty}
.ds-chapeau{font-size:var(--ds-chapeau)!important;line-height:1.65!important}
.ds-texte{font-size:var(--ds-corps)!important;line-height:1.7!important}
.ds-petit{font-size:var(--ds-petit)!important;line-height:1.65!important}

/* ---------- Sommaire interactif ----------
   Ordinateur (souris, ≥ 1200 px) : un rail de traits discret à droite, un curseur qui suit la lecture ;
   survol ou clavier : le rail s'ouvre en panneau avec les titres, apparition décalée de 30 ms.
   Tablette (≥ 744 px, iPad et iPad Pro en portrait comme en paysage) : pastille flottante en bas à droite
   (section en cours + anneau de progression) ; un toucher ouvre la liste, cibles de 46 px. */
@supports (overflow:clip){html,body{overflow-x:clip!important}}   /* coupe ce qui dépasse sans casser les éléments collants (position: sticky) */
.sommaire{display:none}
@media (min-width:1200px) and (hover:hover) and (pointer:fine){
  .som-bouton{display:none}
  .som-panneau{display:contents}
  .sommaire{display:block;position:fixed;z-index:880;right:clamp(10px,1.4vw,26px);top:50%;translate:0 -50%;
    padding:14px 12px 14px 16px;border-radius:18px;opacity:0;visibility:hidden;scale:.98;transform-origin:100% 50%;
    transition:opacity var(--mo-moyen-s) var(--mo-ease-out),scale var(--mo-moyen-s) var(--mo-ease-out),visibility 0s linear var(--mo-moyen-s),background-color var(--mo-moyen-s) var(--mo-ease-out),box-shadow var(--mo-moyen-s) var(--mo-ease-out)}
  .sommaire.som-visible{opacity:1;visibility:visible;scale:1;transition:opacity var(--mo-moyen) var(--mo-ease-out),scale var(--mo-moyen) var(--mo-ease-out),visibility 0s,background-color var(--mo-moyen) var(--mo-ease-out),box-shadow var(--mo-moyen) var(--mo-ease-out)}
  .sommaire.som-ouvert{background:rgba(248,245,240,.9);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
    box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 0 0 1px rgba(176,137,104,.16),0 24px 48px -20px rgba(45,38,34,.28)}
  .sommaire ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
  .sommaire a{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:12px;min-height:22px;padding:2px 0;
    color:var(--t,#2D2622);text-decoration:none;font:500 .82rem/1.2 var(--ds-texte-police);outline:none}
  .som-texte{white-space:nowrap;opacity:0;translate:6px 0;pointer-events:none;
    transition:opacity var(--mo-menu-s) var(--mo-ease-out),translate var(--mo-menu-s) var(--mo-ease-out),color var(--mo-menu-s) var(--mo-ease-out)}
  .som-ouvert .som-texte{opacity:.62;translate:0 0;pointer-events:auto;
    transition:opacity var(--mo-menu) var(--mo-ease-out) calc(var(--i)*var(--mo-decalage)),translate var(--mo-menu) var(--mo-ease-out) calc(var(--i)*var(--mo-decalage)),color var(--mo-menu) var(--mo-ease-out)}
  .som-ouvert a:hover .som-texte,.som-ouvert a:focus-visible .som-texte{opacity:1}
  .som-ouvert a[aria-current] .som-texte{opacity:1;color:var(--pd,#8A6240);font-weight:600}
  .som-trait{flex:none;width:14px;height:2px;border-radius:2px;background:rgba(45,38,34,.22);transform-origin:100% 50%;
    transition:transform var(--mo-menu) var(--mo-ease-out),background-color var(--mo-menu) var(--mo-ease-out)}
  .sommaire a:hover .som-trait,.sommaire a:focus-visible .som-trait{transform:scaleX(1.45);background:rgba(45,38,34,.45)}
  .sommaire a[aria-current] .som-trait{background:transparent}
  .sommaire a:active{scale:var(--mo-appui);transition:scale var(--mo-instant) var(--mo-ease-out)}
  .sommaire a:focus-visible .som-texte{outline:2px solid var(--gold,#E3B04B);outline-offset:3px;border-radius:4px}
  /* curseur unique : glisse d'une section à l'autre (morphing continu, sans ressort) */
  .som-curseur{position:absolute;right:12px;top:14px;width:22px;height:6px;margin-top:-3px;border-radius:6px;pointer-events:none;
    background:linear-gradient(90deg,var(--gold,#E3B04B),var(--a,#21808d));box-shadow:0 0 0 3px rgba(248,245,240,.85),0 4px 12px -2px rgba(33,128,141,.45);
    transform-origin:50% 50%;will-change:transform}
  /* sur fond sombre (sections foncées), le rail reste lisible grâce au halo clair du curseur et au panneau au survol */
}
@media (min-width:744px){
  .sommaire.som-pastille{display:block;position:fixed;z-index:880;right:max(18px,env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom));
    opacity:0;visibility:hidden;translate:0 14px;transition:opacity var(--mo-moyen-s) var(--mo-ease-out),translate var(--mo-moyen-s) var(--mo-ease-out),visibility 0s linear var(--mo-moyen-s)}
  .som-pastille.som-visible{opacity:1;visibility:visible;translate:0 0;transition:opacity var(--mo-moyen) var(--mo-ease-out),translate var(--mo-moyen) var(--mo-ease-out),visibility 0s}
  .som-pastille .som-bouton{display:flex;align-items:center;gap:10px;min-height:52px;max-width:min(330px,46vw);padding:6px 16px 6px 10px;border:0;border-radius:999px;
    background:rgba(248,245,240,.9);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
    box-shadow:0 1px 0 rgba(255,255,255,.75) inset,0 0 0 1px rgba(176,137,104,.2),0 18px 40px -18px rgba(45,38,34,.5);
    color:#2D2622;font:600 .95rem/1.15 var(--ds-texte-police);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
    transition:scale var(--mo-instant) var(--mo-ease-out)}
  .som-pastille .som-bouton:active{scale:var(--mo-appui)}
  .som-pastille .som-bouton:focus-visible{outline:2px solid var(--gold,#E3B04B);outline-offset:3px}
  .som-anneau{flex:none;width:30px;height:30px;rotate:-90deg}
  .som-anneau circle{fill:none;stroke:rgba(45,38,34,.13);stroke-width:3}
  .som-anneau .som-prog{stroke:var(--gold,#E3B04B);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100}
  .som-etiq{display:flex;flex-direction:column;min-width:0}
  .som-etiq small{font:600 .66rem/1 var(--ds-texte-police);letter-spacing:.09em;text-transform:uppercase;color:#8A6240;margin-bottom:4px}
  .som-actuel{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .som-chev{flex:none;width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.55;transition:rotate var(--mo-menu) var(--mo-ease-out)}
  .som-pastille.som-ouvert .som-chev{rotate:180deg}
  .som-pastille .som-panneau{position:absolute;right:0;bottom:calc(100% + 10px);width:min(340px,calc(100vw - 36px));max-height:min(62vh,560px);overflow:auto;overscroll-behavior:contain;
    padding:8px;border-radius:20px;background:rgba(248,245,240,.95);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
    box-shadow:0 1px 0 rgba(255,255,255,.75) inset,0 0 0 1px rgba(176,137,104,.18),0 28px 56px -22px rgba(45,38,34,.45);
    opacity:0;visibility:hidden;scale:.96;translate:0 8px;transform-origin:100% 100%;
    transition:opacity var(--mo-menu-s) var(--mo-ease-out),scale var(--mo-menu-s) var(--mo-ease-out),translate var(--mo-menu-s) var(--mo-ease-out),visibility 0s linear var(--mo-menu-s)}
  .som-pastille.som-ouvert .som-panneau{opacity:1;visibility:visible;scale:1;translate:0 0;
    transition:opacity var(--mo-menu) var(--mo-ease-out),scale var(--mo-menu) var(--mo-ease-out),translate var(--mo-menu) var(--mo-ease-out),visibility 0s}
  .som-pastille ol{list-style:none;margin:0;padding:0;position:relative}
  .som-pastille a{position:relative;z-index:1;display:flex;align-items:center;min-height:46px;padding:10px 14px;border-radius:12px;color:#2D2622;text-decoration:none;
    font:500 1rem/1.25 var(--ds-texte-police);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
  .som-pastille .som-texte{opacity:.72}
  .som-pastille a[aria-current] .som-texte{opacity:1;color:#8A6240;font-weight:600}
  .som-pastille .som-trait{display:none}
  .som-pastille a:active{background:rgba(45,38,34,.05)}
  .som-pastille a:focus-visible{outline:2px solid var(--gold,#E3B04B);outline-offset:-2px}
  /* surligneur unique : glisse d'une entrée à l'autre au fil du défilement */
  .som-pastille .som-curseur{position:absolute;left:8px;right:8px;top:8px;height:46px;border-radius:12px;pointer-events:none;will-change:transform;
    background:linear-gradient(90deg,rgba(227,176,75,.22),rgba(33,128,141,.12));box-shadow:inset 3px 0 0 var(--gold,#E3B04B)}
}
.progress-nav{display:none!important}
/* téléphone : barre de contact masquée pendant les sections animées ou interactives (classe posée par motion.js) */
@media (max-width:760px){
  html.cta-cache :is(.dock,.sticky-cta,.sticky-mobile-cta){opacity:0!important;translate:none!important;transform:translateY(160%)!important;pointer-events:none!important;
    transition:opacity .22s cubic-bezier(.23,1,.32,1),transform .32s cubic-bezier(.23,1,.32,1)!important}
}   /* ancien sommaire de quelques pages, remplacé par le sommaire commun */
@media (prefers-reduced-motion:reduce){.sommaire,.som-texte,.som-trait,.som-panneau,.som-chev,.som-bouton{transition:none!important}}