/* =========================================================
   GABARIT FICHE PATHOLOGIE
   Marque : elle n'apparait qu'a 3 endroits, tous marques par
   le commentaire "MARQUE" dans le corps de page. Un changement
   de nom = 3 lignes, pas une refonte.
   ========================================================= */
:root{
  --titre:"Poppins","Segoe UI",Helvetica,Arial,sans-serif;
  --texte:"Open Sans","Segoe UI",Helvetica,Arial,sans-serif;
  --gut:clamp(1.15rem,3.6vw,4rem); --r:14px; --r-l:24px; --t:.35s cubic-bezier(.4,0,.2,1);
}
:root,:root[data-theme="clair"],:root[data-theme="light"]{
  --bg:#FBF9F5; --surface:#FFFFFF; --surface-2:#F4EFE9;
  --ink:#241820; --ink-2:#584A52; --muted:#8B7C84; --line:rgba(36,24,32,.12);
  --primary:#7A1440; --primary-2:#99194F; --on-primary:#FFFFFF;
  --accent:#C26A00; --accent-soft:#FBEEDC; --warm:#F3E3D0;
  --alerte:#B4531F; --alerte-soft:#F9EBE1;
  --sh:0 1px 2px rgba(36,24,32,.05),0 10px 30px -14px rgba(36,24,32,.18);
  --sh-2:0 2px 6px rgba(36,24,32,.06),0 26px 54px -22px rgba(36,24,32,.3);
}
:root[data-theme="sombre"],:root[data-theme="dark"]{
  --bg:#241A20; --surface:#302330; --surface-2:#3B2C39; --ink:#F2EAEE;
  --ink-2:#CDBCC5; --muted:#9A8892; --line:rgba(242,234,238,.16);
  --primary:#E0799F; --primary-2:#EA93B2; --on-primary:#2A0E1C;
  --accent:#F19200; --accent-soft:rgba(241,146,0,.16); --warm:#453341;
  --alerte:#E8A06E; --alerte-soft:rgba(180,83,31,.2);
  --sh:0 1px 2px rgba(0,0,0,.4),0 10px 30px -14px rgba(0,0,0,.6);
  --sh-2:0 2px 6px rgba(0,0,0,.4),0 26px 54px -22px rgba(0,0,0,.75);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{background-color:var(--bg);color:var(--ink);font-family:var(--texte);font-size:16px;
  line-height:1.65;-webkit-font-smoothing:antialiased;transition:background-color var(--t),color var(--t)}
.no-anim,.no-anim *,.no-anim *::before,.no-anim *::after{transition:none!important}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--gut)}
h1,h2,h3,h4,h5{font-family:var(--titre);font-weight:600;letter-spacing:-.02em;line-height:1.15;text-wrap:balance}
.lab{font-family:var(--titre);font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--titre);
  font-weight:600;font-size:.9rem;padding:.85rem 1.6rem;border-radius:100px;background:var(--primary);
  color:var(--on-primary);border:2px solid var(--primary);transition:var(--t);cursor:pointer;text-align:center}
.btn:hover{background:var(--primary-2);border-color:var(--primary-2);transform:translateY(-2px);box-shadow:var(--sh-2)}
.btn-o{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-o:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn-full{width:100%}
.nav .btn{white-space:nowrap}
.lbl-court{display:none}

.theme{position:fixed;right:1rem;bottom:1rem;z-index:9999;display:flex;gap:.25rem;background:var(--surface);
  border:1px solid var(--line);border-radius:100px;padding:.28rem;box-shadow:var(--sh-2)}
.theme button{font-family:var(--titre);font-size:.72rem;font-weight:600;padding:.45rem .8rem;border:0;
  border-radius:100px;background:transparent;color:var(--muted);cursor:pointer;transition:var(--t)}
.theme button.on{background:var(--primary);color:var(--on-primary)}

/* >>> HEADER:CSS:DEBUT <<< */
/* Icones vectorielles. Emises en 1em, elles heritent de la taille de police
   de leur contexte : le CSS ecrit pour les emoji continue de s'appliquer. */
.icn{display:inline-block;vertical-align:-.14em;flex:0 0 auto;overflow:visible}

/* ===== HEADER A DEUX NIVEAUX =====
   Bandeau de service : navigation secondaire (cabinet, prescripteurs).
   Elle n'apparait qu'ici, jamais en double dans le menu principal.
   Rangee principale : logo, navigation principale, actions.
   Sans le tiroir, le site n'etait pas navigable en dessous de 1040px. */
header{position:sticky;top:0;z-index:900;background:var(--bg);border-bottom:1px solid var(--line)}

/* --- bandeau de service --- */
.hdr-serv{background:var(--surface-2);border-bottom:1px solid var(--line)}
.hdr-serv-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-top:.42rem;padding-bottom:.42rem;font-family:var(--titre);font-size:.78rem}
.hdr-lieux{color:var(--muted);font-weight:500;letter-spacing:.02em;white-space:nowrap}
.hdr-lieux i{font-style:normal;opacity:.45;margin:0 .4rem}
.hdr-liens{display:flex;gap:1.5rem}
.hdr-liens a{color:var(--ink-2);font-weight:500;transition:var(--t);white-space:nowrap}
.hdr-liens a:hover{color:var(--accent)}

/* --- rangee principale --- */
.nav{display:flex;align-items:center;justify-content:space-between;gap:1.4rem;
  padding-top:.5rem;padding-bottom:.5rem}
/* libelle long par defaut, libelle court en dessous de 760px.
   Ces deux regles doivent rester dans le bloc header : sans elles,
   le bouton affiche ses deux libelles et deborde. */
.nav .btn{white-space:nowrap}
.lbl-court{display:none}
.brand{display:flex;align-items:center;gap:.7rem;flex:0 0 auto}
/* Logo : PNG a fond transparent, de rapport 6,26. A 38px de haut il occupe
   238px de large : c'est l'element le plus large de la rangee, d'ou le menu
   principal limite a trois entrees. */
.logo-img{height:75px;width:auto;display:block}
/* Deux fichiers plutot qu'un filtre : l'inversion en blanc plein detruisait
   l'orange et le pourpre. La version sombre ne blanchit que le lettrage. */
/* OceanWP imprime en bas de page son tiroir de panier et son apercu
   rapide. Prives de son CSS, ils s'affichaient en clair comme du contenu
   brut sous le pied de page. Nos pages ont leur propre panier. */
#oceanwp-cart-sidebar-wrap,#owp-qv-wrap{display:none!important}

.logo-sombre{display:none}
:root[data-theme="sombre"] .logo-clair,
:root[data-theme="dark"] .logo-clair{display:none}
:root[data-theme="sombre"] .logo-sombre,
:root[data-theme="dark"] .logo-sombre{display:block}
footer .logo-img{height:55px}

.menu{display:flex;align-items:center;gap:.35rem;font-family:var(--titre);font-size:.88rem;font-weight:500}
.mi{position:relative}
.mi > a{display:inline-flex;align-items:center;gap:.4rem;color:var(--ink-2);
  padding:.7rem 1.1rem;border-radius:10px;transition:var(--t);white-space:nowrap}
.mi > a:hover,.mi.open > a,.mi > a.on{color:var(--primary);background:var(--surface-2)}
.chev{font-style:normal;font-size:.58rem;opacity:.5;transition:transform var(--t)}
.mi.open .chev{transform:rotate(180deg)}
.sub{position:absolute;top:calc(100% + .4rem);left:0;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-2);padding:.6rem;
  min-width:262px;max-height:min(70vh,420px);overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-7px);
  transition:var(--t);z-index:20}
.mi.open .sub{opacity:1;visibility:visible;transform:none}
.sub a{display:block;padding:.5rem .75rem;border-radius:8px;font-size:.85rem;
  font-weight:400;color:var(--ink-2);font-family:var(--texte)}
.sub a:hover{background:var(--accent-soft);color:var(--accent)}
.sub-large{display:grid;grid-template-columns:repeat(3,minmax(168px,1fr));gap:0 .9rem;min-width:590px}
.sub-large.pos-right{left:auto;right:0}
.sub h4{font-family:var(--titre);font-size:.65rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);padding:.5rem .75rem .2rem;margin:0}

.hactions{display:flex;align-items:center;gap:.5rem;flex:0 0 auto}
/* icones sans bordure : quatre cadres cote a cote alourdissaient la rangee */
.ic-btn{width:44px;height:44px;border-radius:12px;border:0;display:grid;
  place-items:center;font-size:1.4rem;transition:var(--t);position:relative;color:var(--ink-2);
  background:transparent;cursor:pointer}
/* trait legerement epaissi : a cette taille, 1,75 paraissait trop fin */
.ic-btn .icn{stroke-width:1.9}
.ic-btn:hover{background:var(--surface-2);color:var(--primary)}
.ic-btn b{position:absolute;top:3px;right:3px;background:var(--accent);color:#fff;
  font-family:var(--titre);font-size:.58rem;font-weight:700;width:17px;height:17px;
  border-radius:50%;display:grid;place-items:center}
.hactions .btn{margin-left:.35rem}
.burger{display:none}
/* Le bouton porte les deux icones ; c'est aria-expanded qui decide laquelle
   s'affiche. Reecrire son contenu en JavaScript ramenait un emoji. */
.burger .i-fermer{display:none}
.burger[aria-expanded="true"] .i-menu{display:none}
.burger[aria-expanded="true"] .i-fermer{display:block}

/* tiroir mobile */
.drawer{display:none;border-top:1px solid var(--line);background:var(--bg);
  max-height:calc(100dvh - 62px);overflow-y:auto;padding:.6rem var(--gut) 2rem}
.drawer.open{display:block}
.drawer .grp{padding:1rem 0;border-bottom:1px solid var(--line)}
.drawer .grp > b{font-family:var(--titre);font-size:.68rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);display:block;margin-bottom:.45rem}
.drawer a{display:block;padding:.5rem 0;font-family:var(--titre);font-size:.95rem;
  font-weight:500;color:var(--ink);transition:var(--t)}
.drawer a:hover{color:var(--primary);padding-left:.35rem}
.drawer .sous a{font-weight:400;font-size:.88rem;color:var(--ink-2);padding-left:.9rem}
.drawer .actions{padding-top:1.3rem;display:grid;gap:.6rem}

@media(max-width:1100px){
  .menu{display:none}
  .burger{display:grid;place-items:center}
}
/* sous 900px le bandeau disparait : ses liens sont dans le tiroir */
@media(max-width:900px){.hdr-serv{display:none}}
@media(max-width:760px){
  .logo-img{height:59px}
  .nav .btn{padding:.68rem 1.1rem;font-size:.84rem}
  .lbl-long{display:none}
  .lbl-court{display:inline}
}
@media(max-width:600px){.nav .btn{display:none}}
@media(max-width:520px){.logo-img{height:49px}}
@media(max-width:420px){
  .logo-img{height:42px}
  .ic-btn{width:36px;height:36px}
  .hactions{gap:.3rem}
  .ic-compte{display:none}   /* le compte reste accessible depuis le tiroir */
}
/* >>> HEADER:CSS:FIN <<< */






































/* barre de progression de lecture */
.prog{position:fixed;top:0;left:0;height:3px;width:0;background:var(--accent);z-index:1000;transition:width .1s linear}



/* fil d'ariane */
.fil{padding:1.2rem 0 .4rem;font-size:.8rem;color:var(--muted)}
.fil a:hover{color:var(--primary);text-decoration:underline}
.fil span{margin:0 .35rem}

/* en-tete d'article */
.ahead{padding:1rem 0 2rem;max-width:62ch}
.chip{display:inline-flex;align-items:center;gap:.5rem;background:var(--accent-soft);color:var(--accent);
  padding:.4rem 1rem;border-radius:100px;font-family:var(--titre);font-size:.76rem;font-weight:600}
h1{font-size:clamp(1.9rem,4.4vw,3rem);margin:1.2rem 0 1rem;font-weight:700}
.meta{display:flex;gap:1.4rem;flex-wrap:wrap;font-size:.83rem;color:var(--muted);
  padding-top:1rem;border-top:1px solid var(--line)}
.meta b{font-weight:600;color:var(--ink-2)}

/* encadre l'essentiel */
.essentiel{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:var(--r);padding:1.5rem 1.7rem;margin-bottom:2.6rem}
.essentiel h2{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem}
.essentiel ul{list-style:none;display:grid;gap:.65rem}
.essentiel li{font-size:.94rem;color:var(--ink-2);padding-left:1.6rem;position:relative;line-height:1.7}
.essentiel li::before{content:"→";position:absolute;left:0;color:var(--accent);font-weight:700}

/* mise en page article */
.agrid{display:grid;grid-template-columns:250px 1fr;gap:clamp(2rem,4vw,4rem);
  padding-bottom:clamp(2.5rem,5vw,4rem);align-items:start}
/* sans min-width:0, une colonne de grille refuse de descendre sous la largeur
   minimale de son contenu et fait deborder la page */
.agrid > *{min-width:0}
.aside{position:sticky;top:88px;display:grid;gap:1.2rem}
.toc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.3rem 1.4rem}
.toc h2{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:.9rem}
.toc a{display:block;font-size:.85rem;color:var(--ink-2);padding:.42rem 0 .42rem .8rem;
  border-left:2px solid var(--line);transition:var(--t);line-height:1.45}
.toc a:hover{color:var(--primary);border-left-color:var(--primary)}
.toc a.on{color:var(--accent);border-left-color:var(--accent);font-weight:600}
.encart-rdv{background:var(--primary);color:var(--on-primary);border-radius:var(--r);padding:1.4rem}
.encart-rdv b{font-family:var(--titre);font-size:1rem;font-weight:600;display:block;margin-bottom:.5rem}
.encart-rdv p{font-size:.84rem;color:rgba(255,255,255,.85);line-height:1.6;margin-bottom:1.1rem}
:root[data-theme="sombre"] .encart-rdv p{color:rgba(5,32,27,.75)}
.encart-rdv .btn{background:var(--on-primary);color:var(--primary);border-color:var(--on-primary);
  font-size:.84rem;padding:.7rem 1rem}
.encart-rdv .btn:hover{background:transparent;color:var(--on-primary)}
@media(max-width:1000px){.agrid{grid-template-columns:1fr}.aside{position:static;
  grid-template-columns:1fr 1fr;display:grid;gap:1rem}}
@media(max-width:640px){.aside{grid-template-columns:1fr}}

/* corps de texte */
.prose{max-width:68ch}
.prose h2{font-size:clamp(1.35rem,2.6vw,1.75rem);margin:2.6rem 0 .9rem;scroll-margin-top:90px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.08rem;margin:1.8rem 0 .6rem}
.prose p{margin-bottom:1.1rem;color:var(--ink-2);line-height:1.85}
.prose ul,.prose ol{margin:0 0 1.3rem 0;padding-left:1.3rem;color:var(--ink-2)}
.prose li{margin-bottom:.55rem;line-height:1.8}
.prose li::marker{color:var(--accent)}
.prose strong{color:var(--ink);font-weight:600}
.prose a:not(.btn){color:var(--primary);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:not(.btn):hover{color:var(--accent)}

/* encadres */
.enc{border-radius:var(--r);padding:1.3rem 1.5rem;margin:1.9rem 0;border:1px solid var(--line)}
.enc b{font-family:var(--titre);font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;display:block;margin-bottom:.6rem}
.enc p{margin:0;font-size:.92rem;line-height:1.75}
.enc-note{background:var(--accent-soft);border-color:transparent}
.enc-note b{color:var(--accent)}
.enc-note p{color:var(--ink-2)}
.enc-alerte{background:var(--alerte-soft);border-color:transparent}
.enc-alerte b{color:var(--alerte)}
.enc-alerte p{color:var(--ink-2)}

/* appel a l'action en cours de lecture */
.cta-inline{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);
  padding:1.8rem;margin:2.4rem 0;display:flex;gap:1.5rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cta-inline h3{font-size:1.15rem;margin-bottom:.4rem}
.cta-inline p{font-size:.89rem;color:var(--muted);margin:0;max-width:44ch;line-height:1.65}

/* questions frequentes */
details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;margin-bottom:.7rem}
summary{padding:1rem 1.3rem;font-family:var(--titre);font-weight:600;font-size:.94rem;cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.3rem;color:var(--accent);font-weight:400;transition:var(--t)}
details[open] summary::after{transform:rotate(45deg)}
details .rep{padding:0 1.3rem 1.2rem;font-size:.9rem;color:var(--ink-2);line-height:1.78}

/* bloc auteur */
.auteur{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);
  padding:1.6rem 1.8rem;margin-top:2.8rem;display:flex;gap:1.4rem;align-items:flex-start;flex-wrap:wrap}
.auteur .av{width:58px;height:58px;border-radius:50%;background:var(--accent-soft);display:grid;
  place-items:center;font-size:1.5rem;flex:0 0 auto}
.auteur b{font-family:var(--titre);font-size:1rem;font-weight:600;display:block}
.auteur .role{font-size:.82rem;color:var(--accent);font-weight:600;margin-bottom:.6rem;display:block}
.auteur p{font-size:.88rem;color:var(--ink-2);line-height:1.72;max-width:56ch;margin:0}

/* articles lies */
.lies{border-top:1px solid var(--line);padding:clamp(2.4rem,5vw,3.6rem) 0}
.lies h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin-bottom:1.8rem}
.lgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.lien{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);
  padding:1.5rem 1.4rem;transition:var(--t);display:flex;flex-direction:column}
.lien:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:transparent}
.lien .k{font-family:var(--titre);font-size:.66rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.7rem}
.lien h3{font-size:1.05rem;margin-bottom:.5rem}
.lien p{font-size:.85rem;color:var(--muted);line-height:1.65;flex:1}
.lien .go{margin-top:1rem;font-family:var(--titre);font-size:.8rem;font-weight:600;color:var(--primary)}
@media(max-width:860px){.lgrid{grid-template-columns:1fr}}

/* footer */
footer{background:var(--surface);border-top:1px solid var(--line);padding:clamp(2.6rem,5vw,4rem) 0 1.8rem}
.fg{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.2rem;padding-bottom:2rem;border-bottom:1px solid var(--line)}
footer h5{font-family:var(--titre);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:1rem}
footer p,footer a{font-size:.87rem;color:var(--ink-2);line-height:1.85;display:block}
footer a:hover{color:var(--primary)}
.fbrand{display:flex;align-items:center;gap:.7rem;margin-bottom:.9rem}
.fl{margin-top:1.4rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.76rem;color:var(--muted)}
@media(max-width:900px){.fg{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.fg{grid-template-columns:1fr}}

/* >>> FICHE:CSS <<< */
/* ================= MISE EN PAGE DE FICHE =========================
   Titre en bloc plein, puis deux colonnes : le texte, et un encadre qui
   regroupe les reperes, le sommaire et la prise de rendez-vous. */

/* Hauteur de l'en-tete, pour que l'encadre lateral s'y accroche sans
   passer dessous. Les valeurs suivent les points de rupture du bloc
   HEADER : si le logo ou le bandeau de service y changent, les reporter. */
:root{--hdr-h:127px}
@media(max-width:900px){:root{--hdr-h:92px}}
@media(max-width:760px){:root{--hdr-h:76px}}
@media(max-width:520px){:root{--hdr-h:66px}}
@media(max-width:420px){:root{--hdr-h:59px}}

/* Largeur commune au titre et aux deux colonnes : sans elle, la colonne de
   texte s'arretait bien avant l'encadre et laissait un vide au milieu. */
.art .ahead,.art .agrid{max-width:960px;margin-left:auto;margin-right:auto}

/* Le bloc de titre etait trop grand pour ce qu'il portait : un mot-cle, un
   titre et une signature dans un grand carre blanc. Les reperes y sont
   descendus, en ligne, ce qui remplit la place au lieu de la subir. Les
   marges negatives les font affleurer les bords de la carte. */
.art .ahead{--pad-x:clamp(1.4rem,3vw,2rem);--pad-y:clamp(1.3rem,2.4vw,1.8rem);
  max-width:960px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-l);margin-top:1.4rem;margin-bottom:clamp(1.6rem,3vw,2.2rem);
  padding:var(--pad-y) var(--pad-x)}
.art .ahead h1{max-width:22ch;margin-bottom:.75rem}
.art .ahead .meta{border-top:0;padding-top:0}
.art .duree{color:var(--muted)}
.art .duree::before{content:"·";margin:0 .5rem;opacity:.5}

/* les reperes, en ligne, au pied du bloc de titre */
.art .ahead .fx-rep{grid-template-columns:repeat(4,1fr);gap:0;
  margin:var(--pad-y) calc(-1 * var(--pad-x)) calc(-1 * var(--pad-y));
  border-top:1px solid var(--line)}
.art .ahead .fx-rep > div{padding:.95rem var(--pad-x);border-right:1px solid var(--line)}
.art .ahead .fx-rep > div:last-child{border-right:0}
@media(max-width:820px){
  .art .ahead .fx-rep{grid-template-columns:1fr 1fr}
  .art .ahead .fx-rep > div:nth-child(2n){border-right:0}
  .art .ahead .fx-rep > div:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media(max-width:480px){
  .art .ahead .fx-rep{grid-template-columns:1fr}
  .art .ahead .fx-rep > div{border-right:0;border-bottom:1px solid var(--line)}
  .art .ahead .fx-rep > div:last-child{border-bottom:0}
}

/* deux colonnes */
.art .agrid{grid-template-columns:minmax(0,1fr) 320px;gap:clamp(2rem,3vw,3.5rem)}
.art[data-cote="gauche"] .agrid{grid-template-columns:320px minmax(0,1fr)}
.art[data-cote="droite"] .prose{order:1}
.art[data-cote="droite"] .aside{order:2}
.art[data-cote="gauche"] .aside{order:1}
.art[data-cote="gauche"] .prose{order:2}
.art .prose{max-width:none}

/* L'encadre lateral : un seul bloc, trois parties separees par un trait.
   Il peut depasser la hauteur de l'ecran une fois colle en haut ; sans
   defilement interne, la prise de rendez-vous devenait inatteignable. */
.art .aside{gap:0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-l);overflow:hidden;top:calc(var(--hdr-h) + 1.2rem);
  max-height:calc(100vh - var(--hdr-h) - 2.4rem);overflow-y:auto;scrollbar-width:thin}
.art .aside .toc{background:transparent;border:0;border-bottom:1px solid var(--line);
  border-radius:0;padding:1.2rem 1.25rem}
.art .aside .encart-rdv{border-radius:0;padding:1.3rem 1.25rem}

/* reperes */
.fx-rep{display:grid;gap:1px}
.fx-rep > div{display:flex;gap:.85rem;align-items:flex-start;min-width:0}
.fx-rep .fx-ei{width:34px;height:34px;flex:0 0 auto;border-radius:10px;
  background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-size:.98rem}
.fx-rep dt{font-family:var(--titre);font-size:.63rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.2rem}
.fx-rep dd{margin:0;font-family:var(--titre);font-size:.85rem;font-weight:600;
  line-height:1.35;color:var(--ink);overflow-wrap:anywhere}

/* sections numerotees */
.art .prose{counter-reset:sec}
.art .prose h2{counter-increment:sec;display:flex;gap:.85rem;align-items:baseline;
  scroll-margin-top:calc(var(--hdr-h) + 1.5rem)}
.art .prose h2::before{content:counter(sec,decimal-leading-zero);
  font-family:var(--titre);font-size:.78rem;font-weight:700;color:var(--accent);
  letter-spacing:.08em;flex:0 0 auto;transform:translateY(-.15em)}

/* Sur telephone tout s'empile dans l'ordre utile. Les reperes suivent
   deja le titre puisqu'ils sont dans son bloc ; restent le sommaire avant
   le texte et la prise de rendez-vous apres. Les regles portent
   [data-cote], sinon celles du choix de cote, plus specifiques, les
   emportent et le sommaire se retrouve apres tout l'article. */
@media(max-width:1000px){
  .art[data-cote] .agrid{grid-template-columns:1fr}
  .art[data-cote] .aside{display:contents}
  .art[data-cote] .aside .toc{order:1;background:var(--surface);border:1px solid var(--line);
    border-radius:var(--r);margin-bottom:1.6rem}
  .art[data-cote] .prose{order:2;max-width:none}
  .art[data-cote] .aside .encart-rdv{order:3;border-radius:var(--r);margin-top:2rem}
}

/* >>> ACCUEIL:RETOUCHES <<< */
/* Premiere section : moins haute et moins aeree. Elle occupait presque tout
   l'ecran avant qu'on voie le moindre contenu. */
.hero{min-height:clamp(360px,52vh,520px);padding:clamp(2rem,4.5vw,3.4rem) 0}
/* L'image etait cadree sur le mur et la fenetre. On descend le cadrage et on
   resserre, pour amener la semelle et l'orthese dans le champ. */
.hero-bg{background-size:118%;background-position:72% 78%}
@media(max-width:900px){.hero-bg{background-size:cover;background-position:68% 82%}}
.hero h1{font-size:clamp(2.1rem,4.8vw,3.5rem);margin-top:1rem}
.hero .lede{margin-top:1.1rem}
.hero .acts{margin-top:1.6rem}
.hero-note{margin-top:1.5rem}

/* Le choix du theme est masque tant que la version sombre n'est pas revue.
   La regle est volontairement facile a retirer. */
.theme{display:none}