/* ===========================================================================
   HABILLAGE COMMUN — « Dossier disparu » et ses pages (rébus, quiz)
   ---------------------------------------------------------------------------
   Règles (skill qualite-visuelle-interfaces, 15/10/2026) :
   - texte du contenu NOIR sur fond clair ; la couleur va au DÉCOR (bandeau,
     bordures, pastilles, onglets de dossier) ;
   - plusieurs nuances d'UN bleu dominant + un jaune « tampon » pour l'action ;
   - contrastes : texte >= 7:1, composants >= 3:1, focus orange foncé 3 px ;
   - décor (emojis, dessins SVG) toujours aria-hidden, masquable ;
   - options pour malvoyants (affichage.js) : data-* sur <html>.
   Le mode sombre automatique ne vaut QUE si aucun thème n'est choisi
   (:root:not([data-theme])), sinon un thème choisi serait écrasé.
   =========================================================================== */

@font-face{ font-family:"Atkinson Next"; font-style:normal; font-weight:400; font-display:swap;
  src:url("polices/atkinson-hyperlegible-next-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:"Atkinson Next"; font-style:normal; font-weight:700; font-display:swap;
  src:url("polices/atkinson-hyperlegible-next-latin-700-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:"Atkinson Next"; font-style:normal; font-weight:400; font-display:swap;
  src:url("polices/atkinson-hyperlegible-next-latin-ext-400-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:"Atkinson Next"; font-style:normal; font-weight:700; font-display:swap;
  src:url("polices/atkinson-hyperlegible-next-latin-ext-700-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* ---------- Thème clair (par défaut) ---------- */
:root{
  --fond:#e9f1fb;          /* bleu très pâle, fond de page */
  --surface:#ffffff;       /* cartes */
  --surface-2:#f3f8ff;     /* cartes secondaires, champs */
  --texte:#0a0a0a;
  --doux:#2c3a52;          /* texte secondaire : 10:1 sur blanc */
  --bord:#3d6aa8;          /* bordures de composants : > 4:1 sur blanc */
  --bord-doux:#9dbbe3;     /* filets décoratifs */
  --bleu-nuit:#0b2545;     /* bandeau */
  --bleu-1:#13315c; --bleu-2:#1d4e89; --bleu-3:#2f6fbf; --bleu-4:#8ab6f2; --bleu-5:#d4e5fb;
  --or:#ffcc33;            /* bouton principal, tampon (texte noir dessus) */
  --or-fonce:#7a5200;
  --succes-fond:#dff3e5; --succes:#145a2e;
  --alerte-fond:#fde4dc; --alerte:#8f1d04;
  --focus:#c2410c;         /* orange foncé : tranche sur les bleus */
  --ombre:0 2px 0 #0b254514, 0 6px 18px #0b25451f;
  --bandeau-texte:#ffffff;
  --taille:100%;
  --interligne:1.6; --espace-lettres:normal; --espace-mots:normal;
  --largeur:46rem;
  color-scheme:light;
}
/* ---------- Sombre automatique (seulement sans thème choisi) ---------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --fond:#0b1322; --surface:#14213a; --surface-2:#1b2b4a; --texte:#f5f8fd; --doux:#c9d6ee;
    --bord:#8ab6f2; --bord-doux:#3d5a86; --bleu-nuit:#06101f; --bleu-5:#1d3358;
    --succes-fond:#123a22; --succes:#9be3b3; --alerte-fond:#45180c; --alerte:#ffb4a2;
    --ombre:0 2px 0 #0006, 0 6px 18px #0008; color-scheme:dark;
  }
}
:root[data-theme="clair"]{ color-scheme:light; }
:root[data-theme="sombre"]{
  --fond:#0b1322; --surface:#14213a; --surface-2:#1b2b4a; --texte:#f5f8fd; --doux:#c9d6ee;
  --bord:#8ab6f2; --bord-doux:#3d5a86; --bleu-nuit:#06101f; --bleu-5:#1d3358;
  --succes-fond:#123a22; --succes:#9be3b3; --alerte-fond:#45180c; --alerte:#ffb4a2;
  --ombre:0 2px 0 #0006, 0 6px 18px #0008; color-scheme:dark;
}
:root[data-theme="contraste"]{
  --fond:#000; --surface:#000; --surface-2:#000; --texte:#fff; --doux:#fff;
  --bord:#ffff00; --bord-doux:#ffff00; --bleu-nuit:#000; --bleu-1:#000; --bleu-2:#000; --bleu-3:#ffff00;
  --bleu-4:#ffff00; --bleu-5:#000; --or:#ffff00; --succes-fond:#000; --succes:#7CFF7C;
  --alerte-fond:#000; --alerte:#ff9e9e; --focus:#00ffff; --ombre:none; --bandeau-texte:#ffff00;
  color-scheme:dark;
}
:root[data-theme="jaune"]{
  --fond:#ffeb3b; --surface:#fff59d; --surface-2:#fff9c4; --texte:#000; --doux:#000;
  --bord:#000; --bord-doux:#000; --bleu-nuit:#000; --bleu-1:#000; --bleu-2:#000; --bleu-3:#000;
  --bleu-4:#000; --bleu-5:#fff59d; --or:#000; --succes-fond:#fff59d; --succes:#000;
  --alerte-fond:#fff59d; --alerte:#000; --focus:#c2410c; --ombre:none; --bandeau-texte:#ffeb3b;
  color-scheme:light;
}
:root[data-theme="jaune"] .bouton-principal, :root[data-theme="jaune"] button.principal{ color:#ffeb3b; }

/* ---------- Réglages malvoyants ---------- */
:root[data-taille="grande"]{ --taille:118%; }
:root[data-taille="tres-grande"]{ --taille:140%; }
:root[data-taille="enorme"]{ --taille:170%; }
:root[data-espacement="aere"]{ --interligne:1.85; --espace-lettres:.04em; --espace-mots:.12em; }
:root[data-espacement="tres-aere"]{ --interligne:2.1; --espace-lettres:.12em; --espace-mots:.16em; }
:root[data-largeur="etroite"]{ --largeur:34rem; }
:root[data-epaisseur="epaisse"] body{ font-weight:700; }
:root[data-epaisseur="epaisse"] strong, :root[data-epaisseur="epaisse"] b{ background:var(--or); color:#000; padding:0 .15em; }
:root[data-decor="masque"] .deco{ display:none !important; }
:root[data-animations="reduites"] *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
:root[data-animations="reduites"]{ scroll-behavior:auto; }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }

/* ---------- Base ---------- */
html{ font-size:var(--taille); -webkit-text-size-adjust:100%; }
*{ box-sizing:border-box; }
body{
  margin:0; min-height:100vh; color:var(--texte);
  background:
    radial-gradient(60rem 30rem at 85% -10%, var(--bleu-5), transparent 70%),
    radial-gradient(40rem 24rem at -10% 110%, var(--bleu-5), transparent 70%),
    var(--fond);
  font-family:"Atkinson Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:1.05rem; line-height:var(--interligne);
  letter-spacing:var(--espace-lettres); word-spacing:var(--espace-mots);
}
:root[data-theme="contraste"] body, :root[data-theme="jaune"] body{ background:var(--fond); }
main{ max-width:var(--largeur); margin:0 auto; padding:1.2rem 1rem 3rem; }
main > *{ min-width:0; }
h1, h2, h3, p, li, legend, label{ overflow-wrap:anywhere; }
h1{ font-size:1.65rem; line-height:1.25; margin:.3rem 0 1rem; }
h2{ font-size:1.2rem; line-height:1.3; margin:1.6rem 0 .5rem; }
h3{ font-size:1.05rem; margin:1.1rem 0 .4rem; }
p{ margin:.55rem 0; }
a{ color:var(--bleu-2); text-decoration:underline; text-underline-offset:.18em; }
:root[data-theme="sombre"] a{ color:#bcd6ff; }
@media (prefers-color-scheme: dark){ :root:not([data-theme]) a{ color:#bcd6ff; } }
:root[data-liens="visibles"] a{ background:#ffeb3b; color:#000 !important; padding:0 .15em; text-decoration-thickness:2px; }
.doux{ color:var(--doux); }
.cachee, .visuellement-cache{ position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; }

[hidden]{ display:none !important; }

/* ---------- Focus ---------- */
:focus-visible, h1:focus, [tabindex]:focus{ outline:3px solid var(--focus); outline-offset:3px; border-radius:.3rem; }
h1[tabindex="-1"]:focus:not(:focus-visible), h2[tabindex="-1"]:focus:not(:focus-visible){ outline:none; }
:root[data-focus="renforce"] :focus, :root[data-focus="renforce"] :focus-visible{
  outline:6px solid var(--focus) !important; outline-offset:3px; box-shadow:0 0 0 10px #ffeb3b !important; }

/* ---------- Bandeau ---------- */
.bandeau{ background:var(--bleu-nuit); color:var(--bandeau-texte);
  border-bottom:4px solid var(--or); }
.bandeau-interieur{ max-width:calc(var(--largeur) + 8rem); margin:0 auto; padding:.55rem 1rem;
  display:flex; flex-wrap:wrap; gap:.5rem .8rem; align-items:center; }
.bandeau-interieur > *{ min-width:0; }
.marque{ display:flex; align-items:center; gap:.55rem; font-weight:700; font-size:1.08rem;
  color:var(--bandeau-texte); margin-right:auto; }
.marque svg{ width:2rem; height:2rem; flex:none; }
.bandeau .jauge{ font-variant-numeric:tabular-nums; color:var(--bandeau-texte); font-weight:700; }
.bandeau button{ background:#fff; color:#000; border:2px solid #fff; min-height:2.75rem; }
.bandeau button:hover{ background:#ffeb9c; }
.bandeau button[aria-expanded="true"], .bandeau button[aria-pressed="true"]{ background:#fff3b0; border-color:var(--or); }
:root[data-theme="contraste"] .bandeau button{ background:#000; color:#ffff00; border-color:#ffff00; }
:root[data-theme="jaune"] .bandeau button{ background:#ffeb3b; color:#000; border-color:#ffeb3b; }

/* ---------- Boutons ---------- */
button{ font:inherit; letter-spacing:inherit; word-spacing:inherit; padding:.55rem 1rem; border-radius:.6rem;
  border:2px solid var(--bord); background:var(--surface); color:var(--texte);
  cursor:pointer; min-height:2.75rem; line-height:1.3; }
button:hover{ background:var(--surface-2); }
button.principal{ background:var(--or); color:#000; border-color:var(--bleu-nuit); font-weight:700;
  box-shadow:0 3px 0 var(--bleu-nuit); }
button.principal:hover{ filter:brightness(1.05); }
button.principal:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--bleu-nuit); }
:root[data-theme="contraste"] button.principal{ background:#ffff00; color:#000; border-color:#ffff00; box-shadow:none; }
:root[data-theme="jaune"] button.principal{ background:#000; color:#ffeb3b; border-color:#000; box-shadow:none; }
button.danger{ border-color:var(--alerte); color:var(--alerte); }
button[aria-pressed="true"]{ background:var(--bleu-5); border-color:var(--bleu-2); border-width:3px; }
:root[data-theme="contraste"] button[aria-pressed="true"]{ background:#333300; border-color:#ffff00; }
.rangee{ display:flex; flex-wrap:wrap; gap:.55rem; margin:.9rem 0; align-items:center; }
.rangee > *{ min-width:0; }

/* ---------- Champs ---------- */
input[type=text], input[type=search]{ font:inherit; padding:.6rem .75rem; border-radius:.55rem;
  border:2px solid var(--bord); background:var(--surface); color:var(--texte);
  min-height:2.9rem; width:min(100%, 22rem); }
input[type=radio], input[type=checkbox]{ width:1.3rem; height:1.3rem; accent-color:var(--bleu-2); vertical-align:middle; }
fieldset{ border:2px solid var(--bord-doux); border-radius:.8rem; padding:.8rem .95rem; margin:1rem 0;
  background:var(--surface); }
legend{ padding:0 .45rem; font-weight:700; }

/* ---------- Cartes « dossier » ---------- */
.carte{ position:relative; background:var(--surface); border:2px solid var(--bord-doux);
  border-radius:.25rem .9rem .9rem .9rem; padding:1rem 1.05rem; margin:1.2rem 0 1rem;
  box-shadow:var(--ombre); }
.carte.onglet{ margin-top:2rem; }
.carte.onglet::before{ content:""; position:absolute; left:-2px; top:-1.25rem; width:8.5rem; height:1.25rem;
  background:var(--surface); border:2px solid var(--bord-doux); border-bottom:none;
  border-radius:.6rem .6rem 0 0; }
.carte > :first-child{ margin-top:0; }
.carte > :last-child{ margin-bottom:0; }
.carte.importante{ border-color:var(--bleu-2); border-left-width:.5rem; }
.consigne{ font-weight:700; font-size:1.12rem; }
.pastille{ display:inline-flex; align-items:center; gap:.35rem; padding:.2rem .7rem; border-radius:999px;
  background:var(--bleu-5); color:var(--texte); border:2px solid var(--bleu-3); font-weight:700; font-size:.95rem; }
:root[data-theme="contraste"] .pastille{ border-color:#ffff00; }
.tampon{ display:inline-block; transform:rotate(-6deg); border:3px solid #b3261e; color:#b3261e;
  padding:.1rem .6rem; font-weight:700; letter-spacing:.12em; border-radius:.3rem; font-size:.85rem;
  text-transform:uppercase; background:#fff8; }
:root[data-theme="sombre"] .tampon{ color:#ff9c94; border-color:#ff9c94; background:transparent; }
@media (prefers-color-scheme: dark){ :root:not([data-theme]) .tampon{ color:#ff9c94; border-color:#ff9c94; background:transparent; } }
:root[data-theme="contraste"] .tampon, :root[data-theme="jaune"] .tampon{ color:var(--texte); border-color:var(--texte); background:transparent; }

.illustration{ display:flex; justify-content:center; margin:.4rem 0 1rem; }
.illustration svg{ width:min(100%, 15rem); height:auto; }

/* ---------- Messages ---------- */
.bravo-visuel{ background:var(--succes-fond); border:2px solid var(--succes); color:var(--texte);
  border-radius:.7rem; padding:.55rem .85rem; font-weight:700; }
.alerte-visuelle{ background:var(--alerte-fond); border:2px solid var(--alerte); color:var(--texte);
  border-radius:.7rem; padding:.55rem .85rem; font-weight:700; }

/* ---------- Journal ---------- */
.journal{ margin-top:2.2rem; border-top:2px dashed var(--bord-doux); padding-top:.6rem;
  color:var(--doux); font-size:.95rem; }
.journal h2{ font-size:1rem; margin-top:.4rem; }
.journal ul{ padding-left:1.2rem; margin:.3rem 0; }
.journal li{ margin:.2rem 0; }

/* ---------- Pied de page ---------- */
footer.pied{ max-width:var(--largeur); margin:0 auto; padding:.5rem 1rem 2rem; color:var(--doux); font-size:.92rem; }
footer.pied .rangee{ margin:.4rem 0; }

/* ---------- Fenêtres (aide F1, affichage, postes) ---------- */
dialog{ background:var(--surface); color:var(--texte); border:3px solid var(--bleu-2);
  border-radius:1rem; max-width:40rem; width:calc(100% - 1.5rem); max-height:calc(100vh - 2rem);
  padding:1.1rem 1.2rem; overflow:auto; box-shadow:0 20px 60px #0008; }
dialog::backdrop{ background:#0b2545cc; }
dialog h2:first-child{ margin-top:0; }
dialog fieldset{ margin:.7rem 0; }
dialog .choix{ display:flex; flex-wrap:wrap; gap:.3rem .9rem; }
dialog .choix label{ display:inline-block; padding:.25rem 0; }
dialog .ligne-raccourci{ margin:.25rem 0; padding:.35rem .5rem; border-left:4px solid var(--bleu-4); background:var(--surface-2); }
dialog.plein{ max-width:none; width:100vw; height:100vh; height:100dvh; max-height:none; margin:0; border-radius:0;
  border:none; padding:0; display:flex; flex-direction:column; }
dialog.plein:not([open]){ display:none; }
dialog.plein .barre-poste{ background:var(--bleu-nuit); color:#fff; padding:.5rem 1rem;
  display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; border-bottom:4px solid var(--or); }
dialog.plein .barre-poste h2{ margin:0 auto 0 0; font-size:1.1rem; color:#fff; }
dialog.plein .barre-poste button{ background:#fff; color:#000; border-color:#fff; }
dialog.plein iframe{ flex:1 1 auto; width:100%; border:0; background:var(--fond); }
dialog.plein iframe[hidden]{ display:none !important; }
dialog.plein .barre-poste .jauge{ color:#fff; font-weight:700; font-variant-numeric:tabular-nums; }

/* ---------- Grands écrans de taille : décor réduit ---------- */
:root[data-taille="enorme"] .illustration svg{ width:9rem; }
@media (max-width: 380px){ h1{ font-size:1.4rem; } .marque span.long{ display:none; } }

@media print{
  .bandeau, footer.pied, .journal, .deco, .lecteur-musique{ display:none !important; }
  body{ background:#fff; color:#000; }
}

/* Options cochées (pilules, cartes de thème) : visibles dans les thèmes forts aussi. */
:root[data-theme="contraste"] .selectionnee{ border-color:#ffff00 !important; background:#333300 !important; outline:3px solid #ffff00; }
:root[data-theme="jaune"] .selectionnee{ background:#000 !important; color:#ffeb3b !important; border-color:#000 !important; }
:root[data-theme="jaune"] .selectionnee .doux{ color:#ffeb3b; }

/* Thème jaune + lettres épaisses : le surligneur du gras devient noir, le
   texte jaune (sinon noir sur noir, relecture du 17/10/2026). */
:root[data-theme="jaune"][data-epaisseur="epaisse"] strong, :root[data-theme="jaune"][data-epaisseur="epaisse"] b{ background:#000; color:#ffeb3b; }
:root[data-theme="contraste"][data-epaisseur="epaisse"] strong, :root[data-theme="contraste"][data-epaisseur="epaisse"] b{ background:#ffff00; color:#000; }

/* ===========================================================================
   UN SEUL ECRAN (demande de Med, 19/10/2026) : la page ne defile pas. Le bandeau
   et le pied restent en place, le contenu se range sur deux colonnes quand la
   fenetre est assez large, et tout est compacte. Si l'ecran est vraiment trop
   petit (ou le texte tres agrandi dans « Affichage »), SEUL le contenu defile,
   dans sa zone : rien n'est jamais coupe ni inaccessible.
   =========================================================================== */
body.cadre{ height:100vh; height:100dvh; min-height:0; overflow:hidden; display:flex; flex-direction:column; }
body.cadre > header.bandeau, body.cadre > footer.pied, body.cadre > .lecteur-paul{ flex:none; }
body.cadre > main{ flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; width:100%;
  max-width:74rem; padding:.3rem 1rem .4rem; }
body.cadre .bandeau{ border-bottom-width:3px; }
body.cadre .bandeau-interieur{ max-width:74rem; padding:.3rem 1rem; gap:.3rem .6rem; }
body.cadre .marque{ font-size:1rem; }
body.cadre .marque svg{ width:1.6rem; height:1.6rem; }
body.cadre .bandeau button{ min-height:2.4rem; padding:.2rem .7rem; font-size:.95rem; }
body.cadre h1{ font-size:1.4rem; margin:.1rem 0 .3rem; }
body.cadre h2{ font-size:1.05rem; margin:.7rem 0 .3rem; }
body.cadre p{ margin:.3rem 0; }
body.cadre .titre-ligne{ display:flex; flex-wrap:wrap; align-items:center; gap:.2rem .8rem; }
body.cadre .titre-ligne .entete-etape{ margin:0; }
body.cadre .colonnes{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 1.4rem; align-items:start; }
body.cadre .colonnes > .col{ min-width:0; }
body.cadre .carte{ padding:.55rem .8rem; margin:.5rem 0; }
body.cadre .carte.onglet{ margin-top:1.3rem; }
body.cadre .carte.onglet::before{ top:-.85rem; height:.85rem; width:6rem; }
body.cadre .rangee{ margin:.45rem 0; gap:.4rem; }
body.cadre button{ min-height:2.4rem; padding:.3rem .8rem; }
body.cadre input[type=text]{ min-height:2.4rem; padding:.3rem .6rem; }
body.cadre fieldset{ margin:.5rem 0; padding:.5rem .7rem; }
body.cadre .illustration{ margin:.1rem 0 .3rem; }
body.cadre .illustration svg{ width:6rem; }
body.cadre footer.pied{ max-width:74rem; width:100%; padding:.25rem 1rem .35rem; font-size:.88rem; border-top:2px solid var(--bord-doux); }
body.cadre footer.pied .rangee{ margin:.1rem 0; }
body.cadre footer.pied button{ min-height:2rem; padding:.1rem .6rem; font-size:.88rem; }
body.cadre .dernier-msg{ flex:1 1 14rem; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.cadre .lecteur-paul{ padding:.2rem 1rem; }
@media (max-height:760px){ body.cadre .illustration{ display:none; } }
@media (max-width:640px){
  body.cadre .colonnes{ grid-template-columns:minmax(0,1fr); }
}
@media print{ body.cadre{ height:auto; overflow:visible; } body.cadre > main{ overflow:visible; } }
/* Pages de jeu (rebus, quiz) : du journal, on ne garde que la derniere annonce. */
body.cadre .journal{ margin-top:.4rem; padding-top:.2rem; font-size:.9rem; }
body.cadre .journal h2{ display:none; }
body.cadre .journal ul{ list-style:none; padding:0; margin:0; }
body.cadre .journal li:nth-child(n+2){ display:none; }
body.cadre footer.pied p{ margin:.05rem 0; font-size:.8rem; line-height:1.35; }

/* Ecran trop petit (ou texte tres agrandi) : la zone de contenu serait minuscule.
   affichage.js pose alors « cadre-libre » : la page redevient une page normale
   qui defile, rien n'est coupe ni inatteignable. */
body.cadre.cadre-libre{ height:auto; min-height:100vh; overflow:visible; display:block; }
body.cadre.cadre-libre > main{ overflow:visible; }
/* Le champ des codes d'urgence cache ce qu'on tape aux yeux de la salle ; le
   lecteur d'ecran, lui, lit toujours le contenu du champ. */
.champ-masque{ -webkit-text-security:disc; text-security:disc; }