/* Mise en page : une ouverture en grand titre, puis un « instrument » (le cabinet des 100 patients) qui pilote toute la page ; le reste se lit comme une fiche de consultation. */
:root{
  --papier:#f4f6f8;
  --surface:#ffffff;
  --bande:#e9eef4;
  --encre:#18223a;
  --encre-douce:#4b5672;
  --trait:#d3dae4;
  --ocre:#a35d0b;
  --ocre-vif:#c9771c;
  --ocre-fond:#f7ebda;
  --perdu:#c7cfdb;
  --f-titre:"Newsreader", Georgia, "Times New Roman", serif;
  --f-texte:"Atkinson Hyperlegible", "Segoe UI", Arial, sans-serif;
  --rayon:14px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --papier:#111827; --surface:#182133; --bande:#1c2740; --encre:#eceff6; --encre-douce:#aab4c8;
    --trait:#2c3852; --ocre:#e7a556; --ocre-vif:#f0b468; --ocre-fond:#3b2b15; --perdu:#3a465f; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --papier:#111827; --surface:#182133; --bande:#1c2740; --encre:#eceff6; --encre-douce:#aab4c8;
  --trait:#2c3852; --ocre:#e7a556; --ocre-vif:#f0b468; --ocre-fond:#3b2b15; --perdu:#3a465f; color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0;background:var(--papier);color:var(--encre);font-family:var(--f-texte);font-size:1.125rem;line-height:1.6}
.large{padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
.col{max-width:46rem;margin:0 auto}
h1,h2,h3{font-family:var(--f-titre);line-height:1.12;text-wrap:balance;margin:0}
h1{font-size:clamp(2.4rem, 7vw, 4rem);font-weight:700;letter-spacing:-0.015em}
h2{font-size:clamp(1.6rem, 4.2vw, 2.1rem);font-weight:650}
h3{font-size:1.3rem;font-weight:650}
p{margin:0}
.note{font-size:.95rem;color:var(--encre-douce)}
:focus-visible{outline:3px solid var(--ocre-vif);outline-offset:3px;border-radius:4px}

/* Ouverture */
.ouverture{padding-block:3.5rem 2.5rem}
.ouverture .col{display:flex;flex-direction:column;gap:1.25rem}
.surtitre{font-size:.95rem;color:var(--encre-douce);display:flex;align-items:center;gap:.6rem}
.surtitre::before{content:"";width:1.6rem;height:2px;background:var(--ocre)}
.chapeau{font-size:1.25rem;color:var(--encre-douce);max-width:38rem}
.reponse-courte{font-family:var(--f-titre);font-size:clamp(1.25rem,3.4vw,1.55rem);border-left:4px solid var(--ocre);padding:.2rem 0 .2rem 1rem;max-width:38rem}

/* Instrument : 100 patients */
.instrument{padding-block:1rem 3rem}
.cabinet{background:var(--surface);border:1px solid var(--trait);border-radius:var(--rayon);padding:clamp(1.1rem,3vw,2rem);display:flex;flex-direction:column;gap:1.4rem;max-width:58rem;margin:0 auto;box-shadow:0 1px 0 var(--trait)}
.cabinet-tete{display:flex;flex-direction:column;gap:.35rem}
.reglage{display:flex;flex-direction:column;gap:.6rem}
.reglage label{font-weight:700}
.segments{display:grid;grid-template-columns:repeat(10, minmax(0,1fr));border:1px solid var(--trait);border-radius:10px;overflow:hidden;background:var(--papier)}
.segments button{font:inherit;font-size:1.05rem;font-variant-numeric:tabular-nums;padding:.6rem 0;border:0;border-left:1px solid var(--trait);background:transparent;color:var(--encre);cursor:pointer;min-width:0}
.segments button:first-child{border-left:0}
.segments button:hover{background:var(--bande)}
.segments button[aria-pressed="true"]{background:var(--encre);color:var(--surface);font-weight:700}
.vue{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(1.25rem,4vw,2.5rem);align-items:center}
@media (max-width:640px){.vue{grid-template-columns:1fr}}
.grille{display:grid;grid-template-columns:repeat(10,1fr);gap:clamp(4px,1vw,7px);width:100%;max-width:21rem}
.grille i{display:block;aspect-ratio:1;border-radius:50%;background:var(--perdu);transition:background .3s ease, transform .3s ease}
.grille i.ok{background:var(--ocre-vif)}
.legende{display:flex;flex-wrap:wrap;gap:1rem;font-size:.95rem;color:var(--encre-douce);margin-top:.75rem}
.legende span{display:inline-flex;align-items:center;gap:.4rem}
.legende span::before{content:"";width:.8rem;height:.8rem;border-radius:50%;background:var(--ocre-vif)}
.legende span.p::before{background:var(--perdu)}
.lecture{display:flex;flex-direction:column;gap:.75rem;min-width:0}
.grand{font-family:var(--f-titre);font-weight:700;font-size:clamp(3.4rem,10vw,5rem);line-height:1;color:var(--ocre);font-variant-numeric:tabular-nums}
.grand small{font-size:.38em;color:var(--encre-douce);font-weight:500;margin-left:.2rem}
.phrase{font-size:1.15rem}
.compare{font-size:.98rem;color:var(--encre-douce);border-top:1px solid var(--trait);padding-top:.75rem}
@media (prefers-reduced-motion: reduce){.grille i{transition:none}}

/* Sections de lecture */
.bloc{padding-block:2.75rem}
.bloc .col{display:flex;flex-direction:column;gap:1.1rem}
.bloc.teinte{background:var(--bande)}
.defile{overflow-x:auto;background:var(--surface);border:1px solid var(--trait);border-radius:var(--rayon)}
.positions{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;min-width:30rem}
.positions th,.positions td{text-align:left;padding:.85rem 1rem;border-bottom:1px solid var(--trait);vertical-align:top}
.positions tr:last-child td{border-bottom:0}
.positions th{font-size:.9rem;color:var(--encre-douce);font-weight:700}
.positions td:last-child,.positions th:last-child{text-align:right;white-space:nowrap}
.positions td:last-child{font-family:var(--f-titre);font-size:1.35rem;font-weight:650}
.positions tr.depart td{background:var(--ocre-fond)}
.positions tr.depart td:last-child{color:var(--ocre)}
.etiquette{display:inline-block;font-size:.8rem;font-weight:700;color:var(--ocre);border:1px solid var(--ocre);border-radius:999px;padding:0 .5rem;margin-left:.4rem;vertical-align:middle}

.piece{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}
.piece div{background:var(--surface);border:1px solid var(--trait);border-radius:10px;padding:1rem;display:flex;flex-direction:column;gap:.25rem}
.piece b{font-family:var(--f-titre);font-size:1.8rem;font-variant-numeric:tabular-nums}
.piece div.depart{border-color:var(--ocre);background:var(--ocre-fond)}
.piece div.depart b{color:var(--ocre)}
@media (max-width:520px){.piece{grid-template-columns:1fr}}

.questions{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));gap:.9rem}
.questions li{background:var(--surface);border:1px solid var(--trait);border-radius:var(--rayon);padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.4rem;min-width:0}
.questions li strong{font-size:1.08rem}
.questions li span{color:var(--encre-douce);font-size:.98rem}
.resume{font-family:var(--f-titre);font-size:1.3rem;font-weight:650;border-left:4px solid var(--ocre);padding-left:1rem}

.fiche{background:var(--surface);border:2px solid var(--encre);border-radius:6px;padding:clamp(1.1rem,3vw,1.75rem);display:flex;flex-direction:column;gap:1.1rem}
.ligne{display:flex;flex-direction:column;gap:.3rem}
.ligne p{font-weight:700}
.ligne span{display:block;border-bottom:1px dashed var(--encre-douce);height:1.9rem}
.actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.copier{font:inherit;font-size:1rem;padding:.65rem 1.1rem;border-radius:8px;border:1px solid var(--encre);background:var(--encre);color:var(--surface);cursor:pointer}
.copier:hover{opacity:.9}
#copie-etat{font-size:.95rem;color:var(--encre-douce)}

.limites ul{margin:0;padding-left:1.2rem;display:flex;flex-direction:column;gap:.4rem}
.pied{padding-block:2rem 3rem;border-top:1px solid var(--trait);font-size:.9rem;color:var(--encre-douce)}
.pied .col{display:flex;flex-direction:column;gap:.5rem}
.pied a{color:inherit}

@media print{
  :root{--papier:#fff;--surface:#fff;--bande:#fff;--encre:#000;--encre-douce:#333;--trait:#999;--ocre:#000;--ocre-vif:#000;--ocre-fond:#eee;--perdu:#ccc}
  .reglage,.actions,.ecran{display:none!important}
  .bloc,.ouverture,.instrument{padding-block:1rem}
}