:root{
  color-scheme:light;
  --papier:#FFFFFF; --encre:#111111; --gris:#6E6E6E;
  --filet:#E6E6E6; --repere:#F0F0F0; --titre-couleur:#2E2E2E;
  --mono:"Courier New","Courier Prime","Nimbus Mono PS",monospace;
  --serif:"Crimson Pro",Georgia,serif;
  --titre:var(--serif); --titre-taille:1.16; --titre-interligne:1.28;
  --e1:.5rem; --e2:1rem; --e3:1.5rem; --e4:2.5rem; --e5:4rem;
  --marge:clamp(1.5rem,6vw,5.5rem);
  --gouttiere:clamp(2rem,5vw,4rem);
  --rythme:clamp(4.5rem,14vw,11rem);
  --mesure:64ch; --conteneur:1160px; --toucher:44px;
}
:root:not([data-theme="light"]),
:root[data-theme="dark"]{--papier:#FFFFFF;--encre:#111111;}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--papier); color:var(--encre);
  font-family:var(--mono); font-weight:400;
  font-size:1.0625rem; line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;}
:focus-visible{outline:2px solid var(--encre);outline-offset:3px;}
h1,h2,h3{font-family:var(--titre);font-weight:400;color:var(--titre-couleur);letter-spacing:0;margin:0;}
h1{font-size:calc(clamp(1.5rem,4.5vw,1.875rem) * var(--titre-taille));line-height:var(--titre-interligne);}
h2{font-size:calc(clamp(1.125rem,3vw,1.25rem) * var(--titre-taille));line-height:1.5;}
h3{font-size:calc(1rem * var(--titre-taille));line-height:1.5;}

/* Grille en tiers */
.tiers{position:relative;display:grid;grid-template-columns:1fr;column-gap:var(--gouttiere);
  max-width:var(--conteneur);margin-inline:auto;padding-inline:var(--marge);}
.tiers > *{grid-column:1;}
.reperes{position:absolute;inset:0;display:none;grid-template-columns:1fr 1fr 1fr;
  column-gap:var(--gouttiere);padding-inline:var(--marge);pointer-events:none;z-index:0;}
.reperes i{position:relative;}
.reperes i + i::before{content:"";position:absolute;left:calc(var(--gouttiere) / -2);
  top:0;bottom:0;width:1px;background:var(--repere);}
.sans-reperes .reperes{display:none;}

/* Flux de lecture */
.contenu{position:relative;z-index:1;}
.contenu > *{max-width:var(--mesure);margin-block:0;}
.contenu > * + *{margin-top:1.75em;}
.contenu > :first-child{margin-top:var(--rythme);}
.contenu > .pleine,.contenu > .large{max-width:none;}

.meta{font-size:.75rem;color:var(--gris);}
.tete{padding-bottom:calc(var(--rythme) * .35);}

/* Action */
.action{display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--toucher);padding:0 1.25rem;
  font-family:var(--mono);font-size:.8125rem;line-height:1;letter-spacing:.04em;
  color:var(--encre);background:transparent;
  border:1px solid var(--encre);border-radius:0;cursor:pointer;
  transition:background-color .12s linear,color .12s linear;}
.action:hover{background:var(--encre);color:var(--papier);}
.action--pleine{background:var(--encre);color:var(--papier);}
.action--pleine:hover{background:var(--papier);color:var(--encre);}
.action--nue{border-color:transparent;padding:0 .25rem;text-decoration:underline;text-underline-offset:.22em;}
.action[disabled]{color:var(--gris);border-color:var(--filet);cursor:not-allowed;background:transparent;}
.action[disabled]:hover{background:transparent;color:var(--gris);}
.action[aria-pressed="true"]{background:var(--encre);color:var(--papier);}
.action[aria-pressed="true"]:hover{background:var(--papier);color:var(--encre);}
.barre{display:flex;flex-wrap:wrap;gap:var(--e1);}
.barre label.action{position:relative;overflow:hidden;}
.barre label.action input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer;}

/* Champ */
.champ{display:block;max-width:44ch;}
.champ__etiquette{display:flex;justify-content:space-between;gap:var(--e2);
  font-size:.75rem;color:var(--gris);margin-bottom:.45rem;}
.champ__valeur{color:var(--encre);}
.champ__aide{display:block;font-size:.75rem;color:var(--gris);line-height:1.5;margin-top:.45rem;max-width:46ch;}
.champ__saisie{display:block;width:100%;min-height:var(--toucher);padding:.6rem .75rem;
  font-family:var(--mono);font-size:1rem;line-height:1.5;color:var(--encre);
  background:var(--papier);border:1px solid var(--filet);border-radius:0;}
.champ__saisie:focus{border-color:var(--encre);}

/* Curseur de réglage : quantité continue, déduite de la table des états.
   Filet au repos, carré plein en encre pour la position, aucun arrondi. */
input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;
  height:var(--toucher);background:transparent;margin:0;cursor:pointer;}
input[type=range]::-webkit-slider-runnable-track{height:1px;background:var(--filet);}
input[type=range]::-moz-range-track{height:1px;background:var(--filet);}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;
  background:var(--encre);border:0;border-radius:0;margin-top:-6px;}
input[type=range]::-moz-range-thumb{width:13px;height:13px;background:var(--encre);border:0;border-radius:0;}

/* Liste et tableau */
.liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--filet);counter-reset:pas;}
ol.liste li{counter-increment:pas;}
ol.liste li::before{content:counter(pas);float:left;width:2ch;margin-left:-1rem;color:var(--gris);}
ol.liste li{padding-left:2.5rem;}
.liste li{border-bottom:1px solid var(--filet);padding:.85rem 0 .85rem 1rem;border-left:1px solid transparent;}
.liste li[aria-selected="true"]{border-left-color:var(--encre);font-weight:700;}
table{border-collapse:collapse;width:100%;font-size:.8125rem;}
th,td{text-align:left;vertical-align:top;padding:.7rem 1.25rem .7rem 0;border-bottom:1px solid var(--filet);}
th{font-weight:400;color:var(--gris);border-bottom-color:var(--encre);}

/* Scène et bande */
.scene{position:relative;background:var(--papier);aspect-ratio:4 / 3;overflow:hidden;touch-action:none;}
.scene video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1);}
.scene canvas{position:absolute;inset:0;width:100%;height:100%;}
.vide{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;
  justify-content:flex-end;gap:var(--e2);padding:var(--e3);background:var(--papier);}
.bande{display:block;width:100%;height:190px;border:1px solid var(--filet);background:var(--papier);}

/* Message et avancement */
.message{border-left:1px solid var(--encre);padding-left:var(--e2);}
.message b{font-weight:700;}
.avancement{display:block;height:1px;background:var(--filet);width:100%;max-width:44ch;}
.avancement span{display:block;height:1px;background:var(--encre);width:0;}

/* Réglages : trois colonnes calées sur les tiers */
.reglages{display:grid;grid-template-columns:1fr;column-gap:var(--gouttiere);row-gap:var(--e3);}
.reglages .champ{max-width:none;}

@media (min-width:900px){
  body{font-size:1.09375rem;}
  .tiers{grid-template-columns:1fr 1fr 1fr;}
  .tiers > *{grid-column:2 / 4;}
  .reperes{display:grid;}
  .contenu{grid-column:1 / 4;display:grid;grid-template-columns:1fr 1fr 1fr;column-gap:var(--gouttiere);}
  .contenu > *{grid-column:2 / 4;}
  .contenu > .gauche{grid-column:1 / 2;}
  .contenu > .centre{grid-column:2 / 3;}
  .contenu > .droite{grid-column:3 / 4;}
  .contenu > .large{grid-column:1 / 3;}
  .contenu > .pleine{grid-column:1 / 4;}
  .reglages{grid-template-columns:1fr 1fr 1fr;}
  .bande{height:230px;}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;}}
@media print{
  :root{--marge:24mm;}
  .reperes,.barre,.reglages,.avancement{display:none;}
  .scene,.bande{break-inside:avoid;}
  .contenu > :first-child{margin-top:0;}
  a{text-decoration:none;}
}

/* Barre de navigation (section 09) : une ligne collante, fond blanc, fermée par un filet. */
.barre-nav{position:sticky;top:0;z-index:10;background:var(--papier);border-bottom:1px solid var(--filet);}
.barre-nav .dedans{display:flex;align-items:center;justify-content:space-between;gap:var(--e2);
  max-width:var(--conteneur);margin-inline:auto;padding-inline:var(--marge);}
.barre-nav .nom{font-size:.8125rem;letter-spacing:.05em;color:var(--encre);}
.barre-nav ul{display:flex;gap:var(--e2);list-style:none;margin:0;padding:0;}
.barre-nav a{display:inline-flex;align-items:center;min-height:var(--toucher);
  font-size:.8125rem;letter-spacing:.04em;color:var(--gris);text-decoration:none;}
.barre-nav a:hover{color:var(--encre);}
.barre-nav a[aria-current="page"]{color:var(--encre);border-bottom:1px solid var(--encre);font-weight:700;}
@media print{.barre-nav{display:none;}}

/* Instrument : progression en trois étapes */
.introduction > *{margin-block:0;}
.introduction > * + *{margin-top:1.25rem;}
.introduction p{max-width:58ch;}
.section-app{padding-block:var(--e4);border-top:1px solid var(--filet);}
.section-app__entete{display:grid;grid-template-columns:3rem 1fr;gap:var(--e2);align-items:start;margin-bottom:var(--e3);}
.section-app__entete > *{margin-block:0;}
.section-app__entete > div > *{margin-block:0;}
.section-app__entete > div > * + *{margin-top:.35rem;}
.barre--principale{align-items:stretch;}
.barre--etats{margin-block:var(--e2) var(--e3);}
.action--developper{margin-top:var(--e3);}
.reglages-avances{margin-top:var(--e4);border-top:1px solid var(--encre);}
.reglages-avances[hidden]{display:none;}
.sous-section{padding-block:var(--e4);border-bottom:1px solid var(--filet);}
.sous-section > h3{margin:0;}
.diagnostic{padding-block:var(--e3);border-bottom:1px solid var(--filet);}
.diagnostic summary{min-height:var(--toucher);display:flex;align-items:center;font-size:.8125rem;text-decoration:underline;text-underline-offset:.22em;cursor:pointer;}
.diagnostic summary::marker{content:"";}
.diagnostic p{padding-left:var(--e2);border-left:1px solid var(--encre);}
.champ--court{width:min(100%,18rem);}
.barre > .champ--court{margin:0;}
.vide p{max-width:46ch;margin:0;}
.vide p + p{margin-top:var(--e1);}

/* Guide : voile blanc, filet et position sur les tiers */
.guide[hidden]{display:none;}
.guide__voile{position:fixed;inset:0;z-index:100;background:rgba(255,255,255,.9);}
.guide__panneau{position:fixed;z-index:102;left:var(--marge);right:var(--marge);bottom:var(--e2);max-height:48vh;overflow:auto;padding:var(--e3);background:var(--papier);border:1px solid var(--encre);}
.guide__panneau > *{margin-block:0;}
.guide__panneau > * + *{margin-top:var(--e2);}
.guide__actions{justify-content:flex-end;align-items:center;}
.guide__actions .action--nue{margin-right:auto;}
.guide-ouvert .contenu{z-index:auto;}
.guide-cible{position:relative!important;z-index:101!important;background:var(--papier);outline:2px solid var(--encre);outline-offset:3px;scroll-margin-block:5rem 55vh;}

@media (min-width:900px){
  .reglages--essentiels{grid-template-columns:1fr 1fr;}
  .guide__panneau{left:calc(33.3333% + var(--gouttiere) / 2);right:max(var(--marge),calc((100vw - var(--conteneur)) / 2 + var(--marge)));}
}

@media (max-width:640px){
  .barre-nav .dedans{overflow-x:auto;align-items:stretch;}
  .barre-nav .nom{display:none;}
  .barre-nav ul{width:max-content;gap:var(--e3);}
  .section-app__entete{grid-template-columns:2rem 1fr;}
  .barre .action{flex:1 1 100%;}
  .guide__panneau{max-height:56vh;}
  .guide__actions .action{flex:0 1 auto;}
  .guide__actions .action--nue{flex-basis:100%;margin-right:0;}
}

@media print{
  .guide,.action--developper{display:none!important;}
  .reglages-avances[hidden]{display:block;}
}