/* au-cabinet.fr/douleur — feuille de la page « Douleur en médecine générale ».
   1) jetons ; 2) composants repris de l'outil d'origine (étapes, options, répertoire, fenêtre de remplissage,
   fiches imprimables) ; 3) habillage « Chrome & encre » (docs/charte-graphique.md) et mise en page par onglets
   sur le modèle de la page MDPH. Chargée AVANT /_commun/charte.css et le gabarit commun (/_commun/gabarit-mdph.css). Tailles de police en rem. */
:root{
  --paper:#F5F1E6; --paper-2:#EDE7D8; --paper-3:#E6DDF0;
  --ink:#1B2B38; --ink-2:#3A4A56; --muted:#4A5A66; --line:#D3C9B3;
  --brand:#6B4585; --brand-2:#9468B0; --brand-ink:#1B2B38; --magenta:#9A3A24;
  --lvl-low:#2F6B4F; --lvl-low-bg:#D8EFE2;
  --lvl-mid:#8A5410; --lvl-mid-bg:#FBE3BE;
  --lvl-high:#9A3A24; --lvl-high-bg:#F6D3C8;
  --ok:#2F6B4F; --warn:#8A5410; --alert:#9A3A24;
  --radius:3px; --radius-s:3px; --radius-l:3px;
  --shadow:6px 6px 0 #1B2B38; --shadow-s:none;
  --font-display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --font-body:"Atkinson Hyperlegible","Segoe UI",system-ui,sans-serif;
  --encre:#1B2B38; --surface:#FFFDF7;
}
*{box-sizing:border-box}
html{font-size:100%}
body{margin:0;background:#F5F1E6;color:#1B2B38;font-family:var(--font-body);line-height:1.55;-webkit-font-smoothing:antialiased}
.muted{color:var(--muted)} .small{font-size:.85rem}
a{color:#9A3A24}

/* ══════════ 2. Composants repris de l'outil d'origine ══════════ */
/* ---- panneau / étapes ---- */
.panel{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-l); box-shadow:var(--shadow); overflow:hidden; }
.panel-hd{ padding:1.1rem 1.2rem; background:linear-gradient(120deg,var(--brand-ink),var(--brand) 60%,var(--magenta)); color:#fff; }
.panel-hd h2,.panel-hd h3{ color:#fff; font-size:1.4rem; margin:0; }
.panel-hd p{ margin:.35rem 0 0; color:rgba(255,255,255,.9); font-size:.95rem; }
.panel-bd{ padding:1.2rem; }

.step{ border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); box-shadow:var(--shadow-s); overflow:hidden; margin-bottom:.8rem; }
.step > summary{ list-style:none; cursor:pointer; padding:.9rem 1rem; display:flex; align-items:center; gap:.8rem; }
.step > summary::-webkit-details-marker{ display:none; }
.step > summary:hover{ background:var(--paper-2); }
.step .sn{ width:38px; height:38px; border-radius:11px; flex:none; display:grid; place-items:center; background:var(--paper-3); color:var(--brand); font-family:var(--font-display); font-weight:800; font-size:1.05rem; }
.step[data-done="1"] .sn{ background:var(--lvl-low); color:#fff; }
.step .sh{ flex:1; min-width:0; }
.step .sh b{ font-family:var(--font-display); font-weight:700; color:var(--brand-ink); font-size:1.06rem; display:block; line-height:1.2; }
.step .sh .sub{ font-size:.86rem; color:var(--muted); }
.step .chev{ flex:none; color:var(--brand-2); transition:transform .25s ease; }
.step[open] > summary .chev{ transform:rotate(180deg); }
.step[open] > summary{ border-bottom:1px solid var(--line); }
.step-bd{ padding:1rem 1.1rem 1.2rem; }
.q{ margin:0 0 1.1rem; }
.q:last-child{ margin-bottom:0; }
.qlbl{ display:block; font-family:var(--font-display); font-weight:700; color:var(--brand-ink); font-size:1rem; margin-bottom:.15rem; }
.hint{ display:block; font-size:.85rem; color:var(--muted); font-weight:400; margin-bottom:.5rem; }

/* ---- options ---- */
.opts{ display:flex; flex-wrap:wrap; gap:.4rem; }
.opts button{ font-family:var(--font-body); cursor:pointer; border:1.5px solid var(--line); background:var(--paper); border-radius:999px; padding:.45rem .85rem; font-size:.94rem; font-weight:700; color:var(--ink-2); text-align:left; }
.opts button:hover{ border-color:var(--brand-2); background:var(--paper-2); }
.opts button[aria-pressed="true"]{ border-color:var(--brand); background:var(--paper-2); color:var(--brand-ink); box-shadow:inset 0 0 0 1px var(--brand); }
.opts.grid2{ display:grid; grid-template-columns:repeat(auto-fill,minmax(13rem,1fr)); }
.opts.grid2 button{ border-radius:var(--radius-s); }

/* ---- curseurs 0-10 ---- */
.slide{ display:flex; align-items:center; gap:.9rem; margin:.35rem 0 .1rem; flex-wrap:wrap; }
.slide input[type=range]{ flex:1; min-width:11rem; -webkit-appearance:none; appearance:none; height:14px; border-radius:999px; background:linear-gradient(90deg,#e3f6ef 0%,#e3f6ef 28%,#fdf1dc 30%,#fdf1dc 68%,#fbe4e7 70%,#fbe4e7 100%); border:1.5px solid var(--line); outline:none; }
.slide input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:26px; height:26px; border-radius:50%; background:var(--brand); border:3px solid #fff; box-shadow:var(--shadow-s); cursor:pointer; }
.slide input[type=range]::-moz-range-thumb{ width:22px; height:22px; border-radius:50%; background:var(--brand); border:3px solid #fff; cursor:pointer; }
.slide .sv{ font-family:var(--font-display); font-weight:800; font-size:1.5rem; color:var(--brand-ink); min-width:2.6rem; text-align:right; }
.slide .sv small{ font-size:.7rem; font-weight:600; color:var(--muted); display:block; line-height:1; }
.slide-ends{ display:flex; justify-content:space-between; font-size:.8rem; color:var(--muted); font-style:italic; margin:0 0 .2rem; }

/* ---- champs ---- */
input[type=text],input[type=number],textarea,select{ font-family:var(--font-body); font-size:1rem; padding:.5rem .7rem; border:1.5px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); width:100%; }
input:focus,textarea:focus,select:focus{ border-color:var(--brand); outline:none; }
textarea{ resize:vertical; line-height:1.5; }
.field{ display:flex; gap:.7rem; flex-wrap:wrap; }
.field .fg{ flex:1; min-width:9rem; }
.field label{ font-size:.88rem; font-weight:700; color:var(--ink-2); display:block; margin-bottom:.2rem; }

/* ---- boutons ---- */
.btn{ font-family:var(--font-display); font-weight:700; cursor:pointer; border:none; border-radius:999px; padding:.7rem 1.2rem; font-size:1rem; text-decoration:none; display:inline-flex; align-items:center; gap:.4rem; }
.btn-primary{ background:linear-gradient(120deg,var(--brand),var(--magenta)); color:#fff; }
.btn-primary:hover{ filter:brightness(1.06); }
.btn-ghost{ background:#fff; border:1.5px solid var(--line); color:var(--brand-ink); }
.btn-ghost:hover{ background:var(--paper-2); border-color:var(--brand-2); }
.btn-danger{ background:#fff; border:1.5px solid #f0bcc3; color:var(--alert); }
.btn-danger:hover{ background:var(--lvl-high-bg); }
.btn.sm{ padding:.4rem .8rem; font-size:.86rem; }
.btnrow{ display:flex; flex-wrap:wrap; gap:.6rem; }

/* ---- tags / callouts ---- */
.tag{ display:inline-block; font-family:var(--font-display); font-weight:700; font-size:.74rem; text-transform:uppercase; letter-spacing:.04em; padding:.12rem .5rem; border-radius:999px; white-space:nowrap; }
.tag.low{ background:var(--lvl-low-bg); color:var(--lvl-low); }
.tag.mid{ background:var(--lvl-mid-bg); color:var(--lvl-mid); }
.tag.high{ background:var(--lvl-high-bg); color:var(--lvl-high); }
.tag.info{ background:var(--paper-3); color:var(--brand); }
.callout{ display:flex; gap:.8rem; border-radius:var(--radius); padding:.9rem 1.1rem; margin:1rem 0; align-items:flex-start; }
.callout.info{ background:var(--paper-2); border:1px solid var(--line); }
.callout.warn{ background:var(--lvl-mid-bg); border:1px solid #f0d9a8; }
.callout.alert{ background:var(--lvl-high-bg); border:1.5px solid #eeaab3; }
.callout .ci{ flex:none; font-size:1.3rem; line-height:1.2; }
.callout p{ margin:0; font-size:.95rem; }
.callout p + p{ margin-top:.4rem; }
.callout b{ color:var(--brand-ink); font-family:var(--font-display); }
.disclaimer{ background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); padding:.9rem 1.1rem; font-size:.9rem; color:var(--ink-2); }
.disclaimer b{ color:var(--brand-ink); }

/* ---- schéma corporel ---- */
.bodywrap{ display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; align-items:flex-start; }
.bodyfig{ text-align:center; flex:0 0 auto; }
.bodyfig svg{ width:100%; max-width:190px; height:auto; touch-action:manipulation; }
.bodyfig .cap{ font-family:var(--font-display); font-weight:700; color:var(--brand-ink); font-size:.9rem; margin-top:.2rem; }
.zone{ cursor:pointer; fill:transparent; stroke:#c9bcdd; stroke-width:1; stroke-dasharray:3 3; transition:fill .15s; }
.zone:hover{ fill:rgba(123,71,196,.14); stroke:var(--brand-2); }
.zone[data-l="1"]{ fill:rgba(217,138,31,.42); stroke:#d98a1f; stroke-dasharray:none; }
.zone[data-l="2"]{ fill:rgba(210,60,78,.5); stroke:#d23c4e; stroke-dasharray:none; }
.bodylegend{ display:flex; gap:.8rem; flex-wrap:wrap; justify-content:center; font-size:.85rem; color:var(--ink-2); margin-top:.6rem; }
.bodylegend i{ width:.85rem; height:.85rem; border-radius:50%; display:inline-block; vertical-align:-1px; margin-right:.25rem; border:1px solid var(--line); }

/* ---- résumé / bilan ---- */
.sum{ border:1px solid var(--line); border-radius:var(--radius); padding:1rem 1.1rem; background:var(--paper); margin-bottom:.8rem; }
.sum h4{ font-size:1rem; margin:0 0 .5rem; display:flex; align-items:center; gap:.5rem; }
.sumline{ display:flex; gap:.6rem; padding:.4rem 0; border-top:1px dashed var(--line); font-size:.94rem; align-items:baseline; flex-wrap:wrap; }
.sumline:first-of-type{ border-top:0; }
.sumline .k{ color:var(--muted); min-width:11rem; flex:none; }
.sumline .v{ font-family:var(--font-display); font-weight:700; color:var(--brand-ink); flex:1; }
.statline{ display:flex; flex-wrap:wrap; gap:.6rem 1.3rem; margin:.3rem 0 .8rem; padding:.7rem .9rem; background:var(--paper-2); border-radius:12px; }
.statline .s b{ font-family:var(--font-display); color:var(--brand-ink); font-size:1.3rem; display:block; line-height:1.1; }
.statline .s span{ font-size:.76rem; color:var(--muted); }
.flag{ display:flex; gap:.7rem; padding:.7rem .9rem; border-radius:12px; margin-bottom:.5rem; align-items:flex-start; font-size:.94rem; }
.flag.f-info{ background:var(--paper-2); border:1px solid var(--line); }
.flag.f-mid{ background:var(--lvl-mid-bg); border:1px solid #f0d9a8; }
.flag.f-high{ background:var(--lvl-high-bg); border:1.5px solid #eeaab3; }
.flag b{ font-family:var(--font-display); color:var(--brand-ink); }
.flag .fi{ flex:none; font-size:1.15rem; line-height:1.2; }
#dossierTxt{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.82rem; min-height:16rem; background:var(--paper-2); }

/* ---- répertoire soignant ---- */
.tabs{ display:flex; flex-wrap:wrap; gap:.5rem; margin:1.2rem 0 1rem; }
.tab{ font-family:var(--font-display); font-weight:700; cursor:pointer; border:1.5px solid var(--line); background:#fff; border-radius:999px; padding:.55rem 1rem; font-size:.98rem; color:var(--brand-ink); display:inline-flex; align-items:center; gap:.45rem; }
.tab:hover{ background:var(--paper-2); border-color:var(--brand-2); }
.tab .dot{ width:.6rem; height:.6rem; border-radius:50%; flex:none; }
.tab[aria-selected="true"]{ background:var(--brand-ink); color:#fff; border-color:var(--brand-ink); }
.tab[aria-selected="true"] .cnt{ color:rgba(255,255,255,.72); }
.tab .cnt{ font-size:.78rem; font-weight:600; color:var(--muted); }
.filterbar{ display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; margin-bottom:1.2rem; }
.filterbar input{ flex:1; min-width:14rem; max-width:24rem; border-radius:999px; }
.chips{ display:flex; flex-wrap:wrap; gap:.4rem; }
.chip{ font-family:var(--font-display); font-weight:600; font-size:.84rem; cursor:pointer; background:var(--paper-2); border:1px solid var(--line); border-radius:999px; padding:.3rem .7rem; color:var(--ink-2); }
.chip:hover{ border-color:var(--brand-2); }
.chip[aria-pressed="true"]{ background:var(--brand); border-color:var(--brand); color:#fff; }
.grp{ margin:1.6rem 0 0; } .grp:first-child{ margin-top:0; }
.grp-h{ display:flex; align-items:center; gap:.7rem; margin-bottom:.7rem; }
.grp-h h3{ font-size:1.05rem; margin:0; }
.grp-h .ln{ flex:1; height:1px; background:var(--line); }
.grid{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); }
.scale{ background:var(--paper); border:1px solid var(--line); border-left:5px solid var(--brand); border-radius:var(--radius); padding:1rem 1.1rem; box-shadow:var(--shadow-s); display:flex; flex-direction:column; }
.scale[data-t="aigue"]{ border-left-color:var(--lvl-high); }
.scale[data-t="chronique"]{ border-left-color:var(--brand); }
.scale[data-t="mixte"]{ border-left-color:var(--lvl-mid); }
.scale-hd{ display:flex; align-items:flex-start; justify-content:space-between; gap:.6rem; }
.scale h4{ font-size:1.14rem; margin:0; line-height:1.15; }
.scale .full{ font-size:.86rem; color:var(--muted); margin:.15rem 0 0; }
.kv{ margin:.7rem 0 0; display:flex; flex-direction:column; gap:.28rem; font-size:.88rem; }
.kv div{ display:flex; gap:.5rem; }
.kv span{ color:var(--muted); min-width:5.2rem; flex:none; }
.kv b{ font-family:var(--font-display); font-weight:700; color:var(--brand-ink); }
.kv .seuil b{ color:var(--magenta); }
.scale .note{ font-size:.92rem; color:var(--ink-2); margin:.7rem 0 0; }
.scale .acts{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.9rem; padding-top:.75rem; border-top:1px dashed var(--line); }
.badge-print{ font-family:var(--font-display); font-weight:700; font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; background:var(--lvl-low-bg); color:var(--lvl-low); border-radius:999px; padding:.14rem .5rem; white-space:nowrap; }
.scoreform{ display:flex; gap:.5rem; align-items:center; margin-top:.6rem; flex-wrap:wrap; }
.scoreform input{ width:5.5rem; text-align:center; font-family:var(--font-display); font-weight:700; }
.scoreform .out{ font-size:.88rem; font-weight:700; }

/* ---- fiches ---- */
.sheet-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:1.1rem 1.15rem; box-shadow:var(--shadow-s); display:flex; flex-direction:column; }
.sheet-card h3{ font-size:1.08rem; margin:0 0 .3rem; }
.sheet-card p{ font-size:.93rem; color:var(--ink-2); margin:0; flex:1; }
.sheet-card .fmt{ font-size:.8rem; color:var(--muted); margin:.7rem 0 .8rem; }
.ico{ width:42px; height:42px; border-radius:11px; display:grid; place-items:center; margin-bottom:.6rem; background:var(--paper-3); color:var(--brand); font-family:var(--font-display); font-weight:800; font-size:1.05rem; }

/* ---- tuiles ---- */
details.tile{ border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); box-shadow:var(--shadow-s); overflow:hidden; }
details.tile + details.tile{ margin-top:.7rem; }
details.tile > summary{ list-style:none; cursor:pointer; padding:.9rem 1rem; display:flex; align-items:center; gap:.8rem; }
details.tile > summary::-webkit-details-marker{ display:none; }
details.tile > summary:hover{ background:var(--paper-2); }
summary .ti{ width:42px; height:42px; border-radius:11px; flex:none; display:grid; place-items:center; background:var(--paper-3); color:var(--brand); font-family:var(--font-display); font-weight:800; }
summary .th{ flex:1; min-width:0; }
summary .th b{ font-family:var(--font-display); font-weight:700; color:var(--brand-ink); font-size:1.05rem; display:block; line-height:1.2; }
summary .th .sub{ font-size:.85rem; color:var(--muted); }
summary .chev{ flex:none; color:var(--brand-2); transition:transform .25s ease; }
details.tile[open] > summary .chev{ transform:rotate(180deg); }
details.tile[open] > summary{ border-bottom:1px solid var(--line); }
.tile-bd{ padding:.9rem 1rem 1.1rem; }
.tile-bd p{ font-size:.94rem; color:var(--ink-2); margin:.4rem 0; }
.tile-bd ul{ margin:.3rem 0 .6rem; padding-left:1.15rem; }
.tile-bd li{ margin:.25rem 0; font-size:.93rem; color:var(--ink-2); }
.sources a{ display:flex; gap:.7rem; padding:.55rem 0; border-bottom:1px dashed var(--line); text-decoration:none; color:var(--ink-2); align-items:baseline; font-size:.92rem; }
.sources a:last-child{ border-bottom:0; }
.sources a:hover{ color:var(--brand); }
.sources a span{ font-family:var(--font-display); font-weight:700; font-size:.74rem; text-transform:uppercase; letter-spacing:.04em; color:var(--magenta); min-width:6.4rem; flex:none; }

/* ---- footer / toast ---- */
.toast{ position:fixed; left:50%; bottom:1.2rem; transform:translateX(-50%) translateY(2rem); opacity:0; background:var(--brand-ink); color:#fff; padding:.7rem 1.1rem; border-radius:999px; font-family:var(--font-display); font-weight:700; box-shadow:var(--shadow); z-index:200; transition:.3s; pointer-events:none; font-size:.92rem; max-width:90vw; text-align:center; }
.toast.show{ transform:translateX(-50%) translateY(0); opacity:1; }


/* ---- modale de remplissage ---- */
.modal[hidden]{ display:none; }
.modal{ position:fixed; inset:0; z-index:300; display:flex; align-items:flex-end; justify-content:center; }
@media (min-width:640px){ .modal{ align-items:center; } }
.modal-back{ position:absolute; inset:0; background:rgba(35,26,46,.6); }
.modal-box{ position:relative; background:var(--paper); width:min(700px,100%); max-height:94vh; display:flex; flex-direction:column; border-radius:var(--radius-l) var(--radius-l) 0 0; box-shadow:var(--shadow); }
@media (min-width:640px){ .modal-box{ border-radius:var(--radius-l); } }
.modal-hd{ padding:1rem 1.1rem; background:linear-gradient(120deg,var(--brand-ink),var(--brand) 60%,var(--magenta)); color:#fff; border-radius:var(--radius-l) var(--radius-l) 0 0; display:flex; gap:.8rem; align-items:flex-start; flex:none; }
.modal-hd h3{ color:#fff; font-size:1.2rem; margin:0; flex:1; }
.modal-hd .sub{ display:block; font-size:.85rem; color:rgba(255,255,255,.88); font-family:var(--font-body); font-weight:400; margin-top:.15rem; }
.modal-x{ flex:none; background:rgba(255,255,255,.18); border:none; color:#fff; width:34px; height:34px; border-radius:50%; font-size:1.3rem; line-height:1; cursor:pointer; font-family:var(--font-display); }
.modal-x:hover{ background:rgba(255,255,255,.32); }
.modal-bd{ padding:1.1rem; overflow-y:auto; flex:1; }
.modal-ft{ padding:.9rem 1.1rem; border-top:1px solid var(--line); background:var(--paper-2); display:flex; gap:.7rem; align-items:center; flex-wrap:wrap; flex:none; border-radius:0 0 var(--radius-l) var(--radius-l); }
.modal-ft .res{ flex:1; min-width:9rem; }
.modal-ft .res b{ font-family:var(--font-display); font-size:1.45rem; color:var(--brand-ink); display:block; line-height:1.1; }
.mrow{ display:flex; gap:.7rem; align-items:center; padding:.55rem 0; border-bottom:1px dashed var(--line); flex-wrap:wrap; }
.mrow:last-of-type{ border-bottom:0; }
.mrow .ml{ flex:1; min-width:11rem; font-size:.95rem; }
.mrow .ml b{ font-family:var(--font-display); color:var(--brand-ink); display:block; font-size:.98rem; }
.mrow .ml span{ font-size:.84rem; color:var(--muted); }
.mseg{ display:flex; gap:.25rem; flex-wrap:wrap; }
.mseg button{ font-family:var(--font-display); font-weight:700; cursor:pointer; border:1.5px solid var(--line); background:#fff; color:var(--ink-2); border-radius:999px; min-width:2.3rem; padding:.3rem .6rem; font-size:.9rem; }
.mseg button:hover{ border-color:var(--brand-2); background:var(--paper-2); }
.mseg button[aria-pressed="true"]{ background:var(--brand); border-color:var(--brand); color:#fff; }
.mchk{ display:flex; flex-wrap:wrap; gap:.4rem; }
.mchk button{ font-family:var(--font-body); font-weight:700; cursor:pointer; border:1.5px solid var(--line); background:#fff; color:var(--ink-2); border-radius:999px; padding:.4rem .8rem; font-size:.92rem; text-align:left; }
.mchk button:hover{ border-color:var(--brand-2); background:var(--paper-2); }
.mchk button[aria-pressed="true"]{ background:var(--paper-2); border-color:var(--brand); color:var(--brand-ink); box-shadow:inset 0 0 0 1px var(--brand); }
.msec{ margin:0 0 1.1rem; }
.msec > h4{ font-size:1rem; margin:0 0 .2rem; }
.msec > .hint{ margin-bottom:.55rem; }
.mnote{ background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius-s); padding:.7rem .9rem; font-size:.88rem; color:var(--ink-2); margin:0 0 1rem; }
.mnote b{ color:var(--brand-ink); font-family:var(--font-display); }
.mcalc{ display:grid; grid-template-columns:repeat(auto-fill,minmax(6.2rem,1fr)); gap:.5rem; }
.mcalc label{ font-size:.78rem; color:var(--muted); display:block; margin-bottom:.1rem; }
.mcalc input{ text-align:center; font-family:var(--font-display); font-weight:700; padding:.35rem; }
.fillbtn{ margin-top:.6rem; }
.done-badge{ font-family:var(--font-display); font-weight:700; font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; background:var(--lvl-low-bg); color:var(--lvl-low); border-radius:999px; padding:.14rem .5rem; margin-left:.3rem; }


/* ---- info-bulles « i » ---- */
.ibtn{ display:inline-grid; place-items:center; width:1.25rem; height:1.25rem; border-radius:50%; border:none;
  background:var(--brand-2); color:#fff; font-family:var(--font-display); font-weight:800; font-size:.74rem;
  line-height:1; cursor:pointer; vertical-align:middle; margin-left:.3rem; font-style:normal; padding:0; flex:none; }
.ibtn:hover{ background:var(--brand); }
.ibtn:focus-visible{ outline:3px solid var(--magenta); outline-offset:2px; }
.ipop{ position:absolute; z-index:330; width:min(360px,92vw); max-height:70vh; overflow-y:auto;
  background:var(--brand-ink); color:#fff; padding:.8rem .9rem; border-radius:12px; font-size:.85rem;
  line-height:1.5; box-shadow:0 8px 30px rgba(20,8,40,.4); font-family:var(--font-body); font-weight:400; }
.ipop b{ color:#fff; font-family:var(--font-display); font-weight:700; }
.ipop p{ margin:0; color:rgba(255,255,255,.92); }
.ipop p b{ display:inline-block; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:#e6b8dc; margin-bottom:.1rem; }
.ipop-x{ flex:none; background:rgba(255,255,255,.18); border:none; color:#fff; width:24px; height:24px;
  border-radius:50%; font-size:1rem; line-height:1; cursor:pointer; font-family:var(--font-display); }
.ipop-x:hover{ background:rgba(255,255,255,.34); }
.glossbar{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; background:var(--paper-2);
  border:1px solid var(--line); border-radius:var(--radius); padding:.7rem 1rem; margin:1rem 0 0; font-size:.9rem; color:var(--ink-2); }
.glossbar b{ font-family:var(--font-display); color:var(--brand-ink); }

/* ---- impression ---- */
#print-area{ display:none; }
.psheet{ font-family:var(--font-body); color:#000; }
.psheet .ph{ border-bottom:2.5pt solid #5b2d90; padding-bottom:5px; margin-bottom:12px; display:flex; justify-content:space-between; align-items:baseline; gap:14px; }
.psheet .ph h1{ font-family:var(--font-display); font-size:19pt; margin:0; color:#3c1c66; }
.psheet .ph em{ font-family:var(--font-display); font-size:8.5pt; font-style:normal; text-transform:uppercase; letter-spacing:.06em; color:#c2258f; font-weight:700; }
.psheet .pi{ font-size:10pt; line-height:1.45; margin:0 0 11px; }
.psheet .pbox{ border:1.2pt solid #5b2d90; border-radius:8pt; padding:5mm; }
.psheet .plbl{ font-family:var(--font-display); font-weight:700; font-size:8.5pt; text-transform:uppercase; letter-spacing:.06em; color:#5b2d90; margin-bottom:4mm; }
.psheet .pf{ position:fixed; bottom:8mm; left:0; right:0; font-size:7.5pt; color:#555; border-top:.5pt solid #bbb; padding-top:4px; display:flex; justify-content:space-between; gap:10px; }
.psheet table.bil{ width:100%; border-collapse:collapse; font-size:9.5pt; margin:0 0 4mm; }
.psheet table.bil td{ border-bottom:.5pt solid #d9cfe8; padding:1.8mm 2mm; vertical-align:top; }
.psheet table.bil td.k{ color:#5b2d90; width:38%; font-family:var(--font-display); font-weight:600; }
.idbox{ display:flex; gap:10px; font-size:9pt; margin:0 0 12px; }
.idbox div{ flex:1; border-bottom:1pt solid #999; padding-bottom:2px; color:#555; }
@media print{
  @page{ size:A4; margin:14mm; }
  html{ font-size:16px; }
  body{ background:#fff; }
  body.is-printing > *:not(#print-area){ display:none !important; }
  body.is-printing #print-area{ display:block !important; }
    body:not(.is-printing) .btn,
    body:not(.is-printing) .filterbar,
  body:not(.is-printing) .tabs{ display:none !important; }
  .scale,.sum,.step{ break-inside:avoid; }
  a{ text-decoration:none; }
}
@media (max-width:560px){
  .slide .sv{ font-size:1.25rem; }
  .sumline .k{ min-width:100%; }
}

/* ══════════ 3. Habillage « Chrome & encre » et mise en page ══════════ */

/* Barre d'encre, onglets, sous-menu, chapitres : gabarit commun (/_commun/gabarit-mdph.css). */
.lead{max-width:90ch;color:#3A4A56}

html[data-onglet]:not([data-onglet="evaluer"]) .chiffres{display:none}
.chiffres{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:6px 0 0}
.ch-c{background:#FFFDF7;border:3px solid #1B2B38;border-radius:3px;box-shadow:5px 5px 0 #9468B0;padding:10px 14px}
.ch-c b{display:block;font:italic 800 2rem/1 var(--ac-logo);color:#1B2B38}
.ch-c span{font-size:.88rem;color:#3A4A56}
@media (max-width:760px){.chiffres{grid-template-columns:repeat(2,minmax(0,1fr))}.ch-c b{font-size:1.6rem}}

.cartes2,.cartes3{display:grid;gap:18px;margin:0 0 18px}
.cartes2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cartes3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1000px){.cartes3{grid-template-columns:1fr}}
@media (max-width:860px){.cartes2{grid-template-columns:1fr}}
.carte,.bloc{background:#FFFDF7;border:3px solid #1B2B38;border-radius:3px;box-shadow:6px 6px 0 #1B2B38;padding:14px 18px;min-width:0}
.carte h3,.bloc h3{font-size:1.25rem;margin:0 0 .5rem}
.carte p,.carte li,.bloc p,.bloc li{font-size:.98rem}
.carte ul,.bloc ul,.alerte ul{margin:.2rem 0 .2rem;padding-left:1.1rem}
.carte li,.bloc li,.alerte li{margin:.3rem 0}
.bloc{margin:0 0 18px}
.alerte{background:#FFF3DF;border:3px solid #1B2B38;border-left:10px solid #B5462C;border-radius:3px;padding:12px 16px;margin:0 0 18px}
.alerte h3{font-size:1.15rem;margin:0 0 .3rem}
.mini{font-size:.88rem;color:#3A4A56;margin:.6rem 0 0}
.src{font-size:.86rem;color:#3A4A56;border-top:1.5px dashed #D3C9B3;padding-top:10px;margin:6px 0 0;max-width:none}
.tbl{width:100%;border-collapse:collapse;font-size:.95rem;margin:.3rem 0}
.tbl th{font:800 .95rem/1.2 var(--ac-display);text-transform:uppercase;letter-spacing:.03em;text-align:left;background:#1B2B38;color:#FFFDF7;padding:8px 10px}
.tbl td{border-bottom:1.5px solid #D3C9B3;padding:8px 10px;vertical-align:top}
.tbl-large{background:#FFFDF7;border:3px solid #1B2B38;box-shadow:6px 6px 0 #1B2B38;margin:0 0 20px}
@media (max-width:640px){.tbl-large,.tbl-large tbody,.tbl-large tr,.tbl-large td,.tbl-large th{display:block;width:100%}
  .tbl-large tr:first-child{display:none}.tbl-large tr{border-bottom:3px solid #1B2B38;padding:4px 0}.tbl-large td{border:0;padding:4px 10px}}
.liste-src{margin:0;padding-left:1.2rem}
.liste-src li{margin:.45rem 0}

/* ─── panneau « Scores saisis » ─── */
.nb-scores{display:inline-flex;align-items:baseline;gap:6px;margin-top:.3rem}
.nb-scores b{font:italic 800 2.4rem/1 var(--ac-logo);color:#FFD84F}
.nb-scores span{font:600 .75rem/1 var(--ac-mono);letter-spacing:.08em;text-transform:uppercase;color:#FFFDF7}

/* carte de résultat (convertisseur, ORT, POMI) */
.res-carte{position:relative;background:#FFFDF7;border:3px solid #1B2B38;border-radius:3px;box-shadow:6px 6px 0 #1B2B38;padding:14px 16px;transition:box-shadow .25s ease}
.res-carte[data-niveau="bas"]{box-shadow:6px 6px 0 var(--ac-bas)}
.res-carte[data-niveau="moyen"]{box-shadow:6px 6px 0 var(--ac-moyen)}
.res-carte[data-niveau="haut"]{box-shadow:6px 6px 0 #E0502C;background:#FFF1EC}
.res-k{display:block;font:600 .75rem/1.2 var(--ac-mono);letter-spacing:.1em;text-transform:uppercase;color:#4A5A66}
.res-n{display:flex;align-items:baseline;gap:8px;margin:.2rem 0}
.res-n b{display:inline-block;font:900 3.4rem/1 var(--ac-display);font-variant-numeric:tabular-nums;color:#1B2B38}
.res-n span{font:600 .85rem/1 var(--ac-mono);color:#3A4A56}
.res-carte[data-niveau="haut"] .res-n b{color:#9A3A24}
.res-carte[data-niveau="bas"] .res-n b{color:#2F6B4F}
.res-f{font:600 .78rem/1.3 var(--ac-mono);color:#4A5A66;margin:.3rem 0 0}
.res-t{font-weight:700;margin:.4rem 0 .2rem;font-size:.95rem}
.res-carte .ac-feux{position:absolute;right:14px;top:14px}
.res-mini .res-n b{font-size:2.6rem}
.r-jauge{position:relative;height:16px;margin:10px 0 4px;border:2px solid #1B2B38;border-radius:2px;background:#FFFDF7;overflow:hidden}
.r-jauge i{display:block;height:100%;width:0;background:#1B2B38;transition:width .5s cubic-bezier(.2,.9,.3,1),background-color .3s ease;
  background-image:radial-gradient(circle,rgba(27,43,56,.3) 1.2px,transparent 1.7px);background-size:7px 7px}
[data-niveau="bas"] .r-jauge i{background-color:var(--ac-bas)}
[data-niveau="moyen"] .r-jauge i{background-color:var(--ac-moyen)}
[data-niveau="haut"] .r-jauge i{background-color:var(--ac-haut)}
.r-mark{position:absolute;top:-2px;bottom:-2px;width:2px;background:#1B2B38}
.r-mark-haut{width:3px;background:#B5462C}
.res-ech{position:relative;height:1rem;font:600 .7rem/1 var(--ac-mono);color:#4A5A66}
.res-ech span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.res-ech .d{left:0;transform:none}.res-ech .f{right:0;transform:none}
@media (prefers-reduced-motion:reduce){.r-jauge i,.res-carte{transition:none}}

/* convertisseur */
.cv-ligne{display:grid;grid-template-columns:minmax(0,1fr) 13rem 2.6rem;gap:10px;align-items:end;padding:10px 0;border-bottom:1.5px dashed #D3C9B3}
.cv-mol,.cv-dose{display:grid;gap:4px;min-width:0}
.cv-mol>span,.cv-dose>span:first-child{font:600 .75rem/1.2 var(--ac-mono);letter-spacing:.06em;text-transform:uppercase;color:#4A5A66}
.cv-in{display:flex;align-items:center;gap:6px}
.cv-in i{font:600 .78rem/1 var(--ac-mono);font-style:normal;white-space:nowrap}
.cv select,.cv input,#cvCible{font:inherit;font-size:1rem;padding:.5rem .6rem;border:2px solid #1B2B38;border-radius:3px;background:#FFFDF7;color:#1B2B38;width:100%;min-width:0}
.cv-x{height:2.6rem;border:2px solid #1B2B38;background:#FFFDF7;border-radius:3px;font-size:1.3rem;cursor:pointer}
.cv .btnrow{margin-top:12px}
.cv-rot{display:grid;gap:8px;margin-top:12px}
.cv-rot>div{background:#F5F1E6;border:2px solid #1B2B38;border-radius:3px;padding:8px 12px}
.cv-rot .k{display:block;font:600 .72rem/1.2 var(--ac-mono);letter-spacing:.08em;text-transform:uppercase;color:#4A5A66}
.cv-rot b{font:900 1.6rem/1.1 var(--ac-display)}
.cv-rot .cv-dep{border-width:3px;box-shadow:4px 4px 0 #9468B0;background:#FFFDF7}
@media (max-width:560px){.cv-ligne{grid-template-columns:minmax(0,1fr) 2.6rem}.cv-dose{grid-column:1/2}.cv-x{grid-row:1;grid-column:2}}

/* cases à cocher (ORT, POMI) */
.cks{display:grid;gap:6px;margin:10px 0}
.ck{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;background:#FFFDF7;border:2px solid #1B2B38;border-radius:3px;cursor:pointer}
.ck:has(input:checked){background:#E6DDF0;box-shadow:3px 3px 0 #1B2B38}
.ck input{width:1.2rem;height:1.2rem;margin:.15rem 0 0;accent-color:#1B2B38;flex:none}
.ck span{flex:1;font-size:.95rem}
.ck .pt{font:italic 800 1rem/1.3 var(--ac-logo);color:#6B4585;flex:none}
.seg{display:inline-flex;border:2px solid #1B2B38;border-radius:3px;overflow:hidden}
.seg label{padding:6px 12px;cursor:pointer;font-weight:700}
.seg label:has(input:checked){background:#1B2B38;color:#FFFDF7}
.seg input{position:absolute;opacity:0;pointer-events:none}
.calc .res-carte{margin-top:12px}

/* fiche « Validité et utilité » (comme /scores/) */
.valid{margin:14px 0 0;border:2px solid #1B2B38;border-radius:3px;background:#F5F1E6}
.valid summary{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 12px;cursor:pointer;list-style:none;
  font:600 .78rem/1.3 var(--ac-mono);letter-spacing:.08em;text-transform:uppercase;color:#1B2B38}
.valid summary::-webkit-details-marker{display:none}
.valid summary::before{content:"+";display:inline-flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;border:2px solid #1B2B38;
  background:#9468B0;color:#FFFDF7;font:italic 800 1rem/1 var(--ac-logo)}
.valid[open] summary::before{content:"−"}
.valid dl{margin:0;padding:4px 14px 12px}
.valid dl>div{padding:6px 0;border-top:1px dashed #D3C9B3}
.valid dt{font:600 .72rem/1.3 var(--ac-mono);letter-spacing:.08em;text-transform:uppercase;color:#6B4585}
.valid dd{margin:.15rem 0 0;font-size:.92rem;overflow-wrap:anywhere}

/* ─── composants de l'outil d'origine, à la charte ─── */
.step,details.tile,.sheet-card,.scale,.panel,.sum,.callout,.disclaimer,.glossbar,.mnote,.statline,.flag{border-radius:3px!important}
.step,details.tile,.sheet-card,.panel{background:#FFFDF7;border:3px solid #1B2B38;box-shadow:6px 6px 0 #1B2B38}
.step{margin-bottom:14px;overflow:visible}
.step>summary:hover,details.tile>summary:hover{background:#F5F1E6}
.step .sn,summary .ti,.ico{border-radius:3px;background:#E6DDF0;color:#1B2B38;border:2px solid #1B2B38;font:italic 800 1.05rem/1 var(--ac-logo)}
.step[data-done="1"] .sn{background:#2F6B4F;color:#FFFDF7}
.step .sh b,summary .th b,.qlbl,.sheet-card h3,.scale h4,.grp-h h3,.sum h4{font-family:var(--ac-display);font-weight:800;text-transform:uppercase;letter-spacing:.02em;color:#1B2B38}
.step .sh b,summary .th b{font-size:1.12rem}
.step[open]>summary,details.tile[open]>summary{border-bottom:2px solid #1B2B38}
.opts button,.mchk button,.mseg button{border:2px solid #1B2B38;border-radius:3px;background:#FFFDF7;color:#1B2B38}
.opts button:hover,.mchk button:hover,.mseg button:hover{background:#F5F1E6;border-color:#1B2B38}
.opts button[aria-pressed="true"],.mchk button[aria-pressed="true"]{background:#E6DDF0;color:#1B2B38;border-color:#1B2B38;box-shadow:3px 3px 0 #1B2B38}
.mseg button[aria-pressed="true"]{background:#1B2B38;color:#FFFDF7;border-color:#1B2B38}
input[type=text],input[type=number],input[type=search],textarea,select{border:2px solid #1B2B38;border-radius:3px;background:#FFFDF7;font-family:var(--ac-body);font-size:1rem}
input:focus,textarea:focus,select:focus{outline:3px solid #F47A30;outline-offset:1px}
.btn{font-family:var(--ac-display);font-weight:800;text-transform:uppercase;letter-spacing:.04em;border-radius:3px;border:3px solid #1B2B38;box-shadow:4px 4px 0 #1B2B38;padding:.55rem 1rem;line-height:1.1}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #1B2B38}
.btn-primary{background:#1B2B38;color:#FFFDF7;box-shadow:4px 4px 0 #F47A30}
.btn-primary:hover{filter:none;color:#FFD84F}
.btn-ghost{background:#FFFDF7;color:#1B2B38}
.btn-ghost:hover{background:#F5F1E6;border-color:#1B2B38}
.btn-danger{background:#FFFDF7;color:#9A3A24;border-color:#1B2B38}
.btn.sm{padding:.4rem .75rem;font-size:.92rem;box-shadow:3px 3px 0 #1B2B38}
.btn-primary.sm{box-shadow:3px 3px 0 #F47A30}
.tag{border-radius:2px;border:1.5px solid currentColor;font-family:var(--ac-mono);font-weight:600;font-size:.7rem;letter-spacing:.04em}
.tag.info{background:#E6DDF0;color:#6B4585}
.callout.info,.disclaimer,.glossbar,.mnote{background:#FFFDF7;border:2px solid #1B2B38}
.callout.warn{background:#FFF3DF;border:2px solid #1B2B38}
.callout.alert{background:#F6D3C8;border:2px solid #1B2B38}
.callout b,.disclaimer b,.mnote b,.glossbar b{font-family:var(--ac-body);color:#1B2B38}
.tabs .tab{font-family:var(--ac-display);font-weight:800;text-transform:uppercase;letter-spacing:.04em;border:3px solid #1B2B38;border-radius:3px;background:#FFFDF7;color:#1B2B38;box-shadow:3px 3px 0 #1B2B38}
.tabs .tab[aria-selected="true"]{background:#1B2B38;color:#FFFDF7;box-shadow:3px 3px 0 #9468B0}
.tab .dot{border:1.5px solid #1B2B38}
.chip{font-family:var(--ac-mono);font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:.74rem;border:2px solid #1B2B38;border-radius:3px;background:#FFFDF7;color:#1B2B38}
.chip[aria-pressed="true"]{background:#1B2B38;border-color:#1B2B38;color:#FFFDF7}
.filterbar input{border-radius:3px}
.grp-h .ln{height:3px;background:#1B2B38}
.scale{background:#FFFDF7;border:3px solid #1B2B38;border-left:10px solid #9468B0;box-shadow:6px 6px 0 #1B2B38}
.scale[data-t="aigue"]{border-left-color:#B5462C}
.scale[data-t="chronique"]{border-left-color:#9468B0}
.scale[data-t="mixte"]{border-left-color:#D08A35}
.scale h4{font-size:1.35rem}
.kv b{font-family:var(--ac-body);font-weight:700;color:#1B2B38}
.kv .seuil b{color:#9A3A24}
.scale .acts{border-top:1.5px dashed #D3C9B3}
.badge-print,.done-badge{border-radius:2px;border:1.5px solid #2F6B4F;font-family:var(--ac-mono);font-weight:600;letter-spacing:.04em}
.panel-hd{background:#1B2B38;color:#FFFDF7}
.panel-hd h2,.panel-hd h3{color:#FFFDF7}
.sumline .v{font-family:var(--ac-body);color:#1B2B38}
.statline{background:#F5F1E6;border:2px solid #1B2B38}
.statline .s b{font:italic 800 1.4rem/1.1 var(--ac-logo);color:#1B2B38}
.flag{border-width:2px!important;border-color:#1B2B38!important}
.slide input[type=range]{border:2px solid #1B2B38}
.slide input[type=range]::-webkit-slider-thumb{background:#1B2B38;border:3px solid #FFD84F;box-shadow:none}
.slide input[type=range]::-moz-range-thumb{background:#1B2B38;border:3px solid #FFD84F}
.slide .sv{font:italic 800 1.6rem/1 var(--ac-logo);color:#1B2B38}
.zone:hover{fill:rgba(148,104,176,.18);stroke:#6B4585}
.ibtn{border-radius:3px;background:#1B2B38;color:#FFD84F;font-family:var(--ac-mono)}
.ibtn:hover{background:#6B4585}
.ipop{background:#1B2B38;border:3px solid #1B2B38;border-radius:3px;box-shadow:5px 5px 0 #9468B0}
.ipop p b{color:#FFD84F}
.toast{background:#1B2B38;border-radius:3px;box-shadow:4px 4px 0 #F47A30;font-family:var(--ac-body)}
.sources a span{color:#9A3A24;font-family:var(--ac-mono);font-weight:600}
.sheet-card.sources{box-shadow:6px 6px 0 #9468B0}
.grid{gap:20px}

/* fenêtre de remplissage : le résultat, bien visible, prend la couleur du palier */
.modal{z-index:2147483200}
.modal-back{background:rgba(27,43,56,.62)}
.modal-box{background:#FFFDF7;border:3px solid #1B2B38;border-radius:3px!important;box-shadow:8px 8px 0 #9468B0}
.modal-hd{background:#1B2B38;border-radius:0!important}
.modal-hd h3{font-family:var(--ac-display);font-weight:900;text-transform:uppercase;letter-spacing:.03em;font-size:1.4rem}
.modal-x{border-radius:3px}
.modal-ft{background:#F5F1E6;border-top:3px solid #1B2B38;border-radius:0!important}
.modal-ft .res{padding:4px 10px;border-left:8px solid #D3C9B3;transition:border-color .25s ease}
.modal-ft .res b{font:900 2rem/1.05 var(--ac-display);font-variant-numeric:tabular-nums;color:#1B2B38}
.modal-ft .res .n{display:inline-block}
.modal-ft .res.ac-palier-bas{border-left-color:var(--ac-bas)}
.modal-ft .res.ac-palier-moyen{border-left-color:var(--ac-moyen)}
.modal-ft .res.ac-palier-haut{border-left-color:var(--ac-haut)}
.modal-ft .res.ac-palier-haut b{color:#9A3A24}
.mcalc input{border:2px solid #1B2B38}

/* texte agrandi sur téléphone */
@media (max-width:760px){
  html.ac-texte-grand .cv-ligne{grid-template-columns:minmax(0,1fr) 2.6rem}
}
@media print{
  .chiffres{display:none!important}
  .chap{break-inside:auto}
  .psheet .ptxt{font-family:var(--ac-mono);font-size:9.5pt;white-space:pre-wrap}
}
.psheet .ph{border-bottom-color:#1B2B38}
.psheet .ph h1{font-family:var(--ac-display);text-transform:uppercase;color:#1B2B38}
.psheet .ph em{color:#6B4585}
.btn[hidden]{display:none!important}