/* Congés Ados : mobile d'abord, sans bibliothèque. Palette reprise du prototype du 06/09. */
:root{
  --bg:#f4f5f7; --card:#ffffff; --ink:#16191d; --ink2:#4a5058; --line:#d8dce2;
  --accent:#1d4ed8; --accent-ink:#ffffff;
  --warn-bg:#fff7e6; --warn-line:#e0a800; --warn-ink:#6b4e00;
  --stop-bg:#fdeaea; --stop-line:#c0392b; --stop-ink:#8b1f14;
  --ok-bg:#e9f6ec; --ok-line:#2e7d32; --ok-ink:#1b5e20;
  --mute:#6b7280; --gris:#9aa3ae;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font:16px/1.5 "Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif}
a{color:var(--accent)}
h1{font-size:1.45rem;margin:16px 0 10px}
h2{font-size:1.1rem;margin:0 0 8px}
h3{font-size:.9rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink2);margin:16px 0 6px}
code,.mono{font-family:Consolas,Menlo,monospace;font-size:.92em}
pre.mono{white-space:pre-wrap;word-break:break-word;background:#f7f8fa;border:1px solid var(--line);border-radius:8px;padding:10px;font-size:.88rem}
.choix{user-select:all;word-break:break-all}

.entete{background:#12161c;color:#fff}
.entete-int{max-width:1100px;margin:0 auto;padding:10px 14px;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.marque{color:#fff;text-decoration:none;font-weight:700;font-size:1.05rem}
.sous{font-size:.8rem;color:var(--gris)}
.nav{display:flex;flex-wrap:wrap;gap:4px;width:100%}
.nav a,.nav .btn.lien{color:#dfe4ea;text-decoration:none;background:#232a33;border:1px solid #333c47;border-radius:6px;padding:6px 10px;font-size:.88rem}
.nav a[aria-current="page"]{background:var(--accent);border-color:var(--accent);color:#fff}
.principal{max-width:1100px;margin:0 auto;padding:6px 14px 40px}
.pied{max-width:1100px;margin:0 auto;padding:14px;color:var(--mute);font-size:.82rem;border-top:1px solid var(--line)}

.carte{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px;margin-bottom:14px}
.carte.inactif{opacity:.75}
.carte.etroit{max-width:460px}
.colonnes{display:grid;gap:14px}
@media(min-width:800px){.colonnes{grid-template-columns:1fr 1fr}}
.lede{color:var(--ink2);margin:0 0 12px}
.muet{color:var(--mute);font-size:.9rem}
.mini{font-size:.8rem;color:var(--mute)}
.petit-texte{font-size:.82rem}
.fort{font-weight:700}
.neg{color:var(--stop-ink);font-weight:700}
.rappel{background:var(--warn-bg);border-left:4px solid var(--warn-line);padding:8px 10px;border-radius:6px;color:var(--warn-ink)}
.cadre .rappel{margin:10px 0}
.accuse{border-color:var(--ok-line);background:var(--ok-bg)}
.texte-long h1{font-size:1.35rem}
.texte-long h2{font-size:1.05rem;margin-top:18px}
.texte-long mark{background:#fff1a8}
.texte-long hr{border:0;border-top:1px solid var(--line);margin:14px 0}

.flash{padding:10px 12px;border-radius:8px;margin:10px 0;border:1px solid}
.flash-ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok-ink)}
.flash-erreur{background:var(--stop-bg);border-color:var(--stop-line);color:var(--stop-ink)}
.flash-avert{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn-ink)}

label{display:block;font-weight:600;font-size:.92rem;margin-bottom:4px}
label.radio{font-weight:400;display:flex;gap:8px;align-items:flex-start;margin:6px 0}
label.radio input{margin-top:4px;width:auto}
.obl{color:var(--stop-ink);font-weight:400;font-size:.82rem}
.fac{color:var(--mute);font-weight:400;font-size:.82rem}
.hint{color:var(--mute);font-size:.84rem;margin:4px 0 0}
.hint.avert{color:var(--warn-ink)}
.erreur{color:var(--stop-ink);font-size:.88rem;margin:4px 0 0}
input,select,textarea{width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;font:inherit;background:#fff;color:var(--ink)}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--stop-line)}
fieldset{border:1px solid var(--line);border-radius:8px;padding:8px 12px;margin:0 0 12px}
legend{font-weight:600;font-size:.92rem;padding:0 4px}
.champ{margin-bottom:12px}
.deux{display:grid;gap:10px}
@media(min-width:560px){.deux{grid-template-columns:1fr 1fr}}
.ligne-form{display:grid;gap:10px;align-items:end}
@media(min-width:700px){.ligne-form{grid-template-columns:1fr 1fr 1fr auto}}
.ligne-form .champ{margin:0}

.btn{display:inline-block;border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);padding:10px 16px;border-radius:8px;font:inherit;cursor:pointer;text-decoration:none;line-height:1.2}
.btn.secondaire{background:#fff;color:var(--accent)}
.btn.danger{background:#fff;color:var(--stop-ink);border-color:var(--stop-line)}
.btn.petit{padding:6px 10px;font-size:.86rem}
.btn.lien{background:transparent;border-color:#333c47}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.principal-btn{font-weight:600}
form.inline{display:inline}
.actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0 0}

.solde{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin:0}
.solde div{background:#f7f8fa;border-radius:8px;padding:8px 10px}
.solde dt{font-size:.78rem;color:var(--mute)}
.solde dd{margin:0;font-size:1.1rem}
.solde.compact dd{font-size:1rem}
.recap{margin:0}
.recap div{display:grid;grid-template-columns:130px 1fr;gap:6px;padding:5px 0;border-bottom:1px solid #eef0f3}
.recap dt{color:var(--mute);font-size:.88rem}
.recap dd{margin:0}

ul.demandes{list-style:none;padding:0;margin:0}
ul.demandes li.demande{border:1px solid var(--line);border-radius:8px;padding:10px;margin-bottom:8px}
.ligne{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.note{background:var(--warn-bg);border-radius:6px;padding:6px 8px;margin-top:6px;font-size:.9rem}
.statut-RETIREE,.statut-NONRETENUE{opacity:.65}
.historique{padding-left:18px;font-size:.9rem}
.historique time{color:var(--mute)}

.feu{display:inline-block;min-width:14px;height:14px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);vertical-align:middle;font-size:.78rem;line-height:14px;padding:0 4px;color:#fff}
.feu-v{background:var(--ok-line)} .feu-o{background:var(--warn-line)} .feu-r{background:var(--stop-line)} .feu-g{background:var(--gris)}
.signaux .feu,.feu:not(:empty){padding:2px 10px;height:auto;line-height:1.3;border-radius:12px;font-weight:600}
.liste-signaux{list-style:none;padding:0;margin:8px 0 0}
.liste-signaux li{padding:6px 8px;border-radius:6px;margin-bottom:4px;font-size:.9rem;border-left:4px solid}
.liste-signaux .code{font-family:Consolas,Menlo,monospace;font-size:.78rem;color:var(--mute);margin-right:4px}
.niv-r{background:var(--stop-bg);border-color:var(--stop-line);color:var(--stop-ink)}
.niv-o{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn-ink)}
.niv-i{background:#f3f4f6;border-color:#c7ccd3;color:var(--ink2)}
span.niv-r,span.niv-o{padding:1px 6px;border-radius:10px;border:1px solid;display:inline-block;margin:1px 0}

.badge{display:inline-block;font-size:.76rem;padding:2px 8px;border-radius:10px;background:#eef0f3;color:var(--ink2)}
.badge-statut{background:#e8eefc;color:#1e3a8a}
.badge-r{background:var(--stop-bg);color:var(--stop-ink)} .badge-o{background:var(--warn-bg);color:var(--warn-ink)} .badge-v{background:var(--ok-bg);color:var(--ok-ink)}

.defilant{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:.9rem}
th,td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.8rem;text-transform:uppercase;letter-spacing:.03em;color:var(--ink2);background:#f7f8fa}
.grille th[scope="row"]{white-space:nowrap;font-size:.84rem;text-transform:none;letter-spacing:0}
.grille td.abs{background:#e8eefc}
.grille td.abs-non{color:var(--mute)}
.grille tr.depasse td,.grille tr.depasse th{background:var(--stop-bg)}
/* Avenant 6 (DEC-160) : trois états visuels au lieu de deux sur la ligne de semaine. */
.grille tr.toleree td,.grille tr.toleree th{background:var(--warn-bg)}
/* Avenant 7 : une semaine sans place se voit avant d'ouvrir le formulaire, même quand elle n'est
   ni tolérée ni refusée. Une marque de bord, pas un fond, pour ne pas écraser les trois niveaux. */
.grille tr.sans-place th[scope="row"]{box-shadow:inset 3px 0 0 var(--warn-line)}
.grille td.places{white-space:normal}
.grille tr.sans-place td.places{font-weight:600}
/* Avenant 9 (§17.4, DEC-168) : une indisponibilité structurelle n'est pas un congé. Elle porte sa
   propre marque, hachurée et sans fond bleu, pour qu'aucune couleur ne la fasse passer pour une
   absence de congé. */
.grille td.structurelle{background:repeating-linear-gradient(45deg,#f2f3f5,#f2f3f5 5px,#e6e8ec 5px,#e6e8ec 10px)}
.marque-structurelle{display:inline-block;border:1px dashed var(--gris);color:var(--ink2);font-size:.7rem;border-radius:6px;padding:0 5px;line-height:1.5}
.grille td.places .repos-semaine,.grille td.places .structurelle-semaine{display:block;white-space:normal}
.detail-structurelles li{color:var(--ink2)}
.detail-structurelles{border-top:1px dashed var(--line);margin-top:3px;padding-top:3px}
.filtres{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.filtres a{font-size:.86rem;padding:4px 10px;border:1px solid var(--line);border-radius:14px;text-decoration:none;color:var(--ink2);background:#fff}
.filtres a[aria-current="true"]{background:var(--accent);color:#fff;border-color:var(--accent)}
.liens-export{list-style:none;padding:0}
.liens-export li{margin-bottom:10px}
.lien-perso{font-size:.84rem;background:#f7f8fa;padding:8px;border-radius:6px;border:1px solid var(--line)}

.hors-periode-liste{background:var(--warn-bg);border-left:4px solid var(--warn-line);padding:8px 10px;border-radius:6px;font-size:.9rem}
.code-affiche{border-color:var(--warn-line);background:var(--warn-bg)}
.code-personnel{font-family:Consolas,Menlo,monospace;font-size:2rem;letter-spacing:.3em;margin:6px 0;user-select:all}
.apercu{border:1px dashed var(--line);border-radius:8px;padding:12px;margin:14px 0;background:#fafbfc}
.apercu h2{font-size:1rem}
.apercu .chiffre{font-size:1.3rem;font-weight:700}
details summary{cursor:pointer;color:var(--accent)}

/* Lot 3 : jours de repos souhaités (CH). Blocs montrés ou cachés par le type choisi (JavaScript) ; sans JavaScript, tout est visible. */
[hidden]{display:none !important}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bloc-ch[aria-invalid="true"]{border-color:var(--stop-line)}
.grille-ch{display:grid;gap:6px;margin:8px 0 12px}
.semaine-ch{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.semaine-ch-titre{grid-column:1 / -1;font-size:.8rem;color:var(--mute);margin-top:4px}
.entete-ch .semaine-ch-titre{display:none}
.jour-ch-entete{font-size:.74rem;color:var(--mute);text-align:center;text-transform:uppercase}
.jour-ch{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:56px;padding:6px 2px;border:1px solid var(--line);border-radius:8px;background:#fff;font-weight:400;font-size:.82rem;margin:0;cursor:pointer;position:relative;text-align:center}
.jour-ch input{width:20px;height:20px;margin:0;accent-color:var(--accent)}
.jour-ch .jj{color:var(--mute);font-size:.72rem}
.jour-ch .num{font-weight:600}
.jour-ch .marque{font-size:.68rem;font-weight:700;text-decoration:none;border-radius:8px;padding:0 5px;line-height:1.4}
.jour-ch.reunion{background:var(--warn-bg);border-color:var(--warn-line)}
.jour-ch.reunion .marque{background:var(--warn-line);color:#fff}
.jour-ch.ferie{background:#f3f4f6}
.jour-ch.ferie .marque{background:var(--gris);color:#fff}
.jour-ch.dimanche{background:#f3f4f6;color:var(--mute)}
.jour-ch.vide{border:0;background:transparent;min-height:0}
.jour-ch:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 2px var(--accent);background:#e8eefc}
.jour-ch:focus-within{outline:2px solid var(--accent);outline-offset:1px}
.jour-ch .marques{display:flex;gap:2px;justify-content:center;flex-wrap:wrap}
.jour-ch.repartir{background:#eef2ff;border-color:var(--accent)}
/* Avenant 2 du 08/09 (DEC-154) : navigation par mois de la grille des jours de repos. */
/* Filtre de « Mes demandes » (avenant 3 du 08/09, DEC-156). Cibles confortables au doigt. */
.filtre-demandes{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin:0 0 12px;padding:10px;background:#f7f8fa;border-radius:8px}
.filtre-demandes .champ-filtre{flex:1 1 200px;margin:0}
.filtre-demandes select{width:100%;min-height:44px}
.filtre-retirees{flex:1 1 100%;display:flex;align-items:center;gap:8px;margin:0;min-height:44px}
.filtre-retirees input{width:20px;height:20px}
.filtre-retirees label{margin:0}
.filtre-compteur{flex:1 1 100%;margin:0;font-size:.86rem;font-weight:600;color:var(--ink2)}
.filtre-vide{margin:0 0 8px;color:var(--mute)}
.ch-nav{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin:8px 0 4px}
.ch-nav .champ-mois{flex:1 1 200px;margin:0}
.ch-nav select{width:100%}
.ch-compteur{margin:0 0 6px;font-size:.86rem;font-weight:600;color:var(--ink2)}
.jour-ch.hors-mois{opacity:.55;background:#fafbfc}
.jour-ch.hors-mois .num{font-weight:400}
.ch-ailleurs{margin:4px 0 10px;padding:8px 10px;border:1px dashed var(--line);border-radius:8px;background:#fbfcfd}
.ch-ailleurs h3{margin:0 0 6px}
.ch-ailleurs ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.ch-ailleurs li{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:8px;padding:3px 6px;background:#fff;font-size:.84rem}
.ch-ailleurs button{min-height:32px;padding:2px 8px;font-size:.8rem;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink2);cursor:pointer}
.ch-ailleurs button:hover{border-color:var(--accent);color:var(--accent)}
.jour-ch .marque.marque-jr{background:var(--accent);color:#fff}
.champ-autre-jour{margin-top:8px}

/* Avenant du 08/09 (DEC-152) : jours à répartir, mis en évidence par une lettre, pas par la seule couleur. */
.marque-repartir{display:inline-block;background:var(--accent);color:#fff;font-size:.68rem;font-weight:700;text-decoration:none;border-radius:8px;padding:0 5px;line-height:1.4}
.jours-repartir{margin-top:12px;background:#eef2ff;border-left:4px solid var(--accent);padding:8px 10px;border-radius:6px}
.jours-repartir h3{margin-top:0}
.liste-repartir{margin:6px 0 0;padding-left:20px;font-size:.9rem}
.liste-repartir li{margin-bottom:2px}
.ligne-repartir{font-size:.9rem;color:var(--ink2);margin:0 0 12px}
.apercu-jours{list-style:none;padding:0;margin:8px 0 0}
.apercu-jours>li{padding:8px 0;border-top:1px solid var(--line)}
.apercu-jours>li:first-child{border-top:0}
@media(max-width:400px){.jour-ch{min-height:50px;font-size:.76rem;padding:4px 1px}.jour-ch .jj{display:none}}

/* Avenant 4 du 08/09 (DEC-158) : détail jour par jour d'une semaine du calendrier.
   Le panneau vit dans une ligne de tableau qui couvre toutes les colonnes, pour ne casser ni la
   structure du tableau ni l'en-tête. Sans JavaScript il reste déplié : rien n'est perdu. */
.detail-controles{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 10px}
.detail-controles .mini{margin:0}
.detail-bouton{display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:32px;padding:0;margin-right:2px;vertical-align:middle;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--accent);cursor:pointer;font:inherit;line-height:1}
.detail-bouton:hover{border-color:var(--accent)}
.detail-bouton:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.detail-bouton .fleche::before{content:"\25BE"}
.detail-bouton[aria-expanded="true"] .fleche::before{content:"\25B4"}
.grille tr.detail-semaine>td{background:#fafbfc;padding:8px 10px 12px}
.detail-titre{margin:0 0 6px}
/* Sept colonnes, toujours : le panneau montre la semaine entière du lundi au dimanche, et jamais
   un jour renvoyé à la ligne ou hors de vue. Les colonnes valent 1/7 de la largeur du tableau, si
   bien que le panneau n'élargit jamais la grille : on fait défiler l'un comme l'autre. */
.detail-jours{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.detail-jour{border:1px solid var(--line);border-radius:8px;background:#fff;padding:6px;min-width:0}
.detail-date{margin:0 0 4px;font-size:.82rem}
.detail-date .jj{color:var(--mute)}
.detail-date .num{font-weight:600}
.detail-jour .marque{font-size:.68rem;font-weight:700;text-decoration:none;border-radius:8px;padding:0 5px;line-height:1.4;background:var(--gris);color:#fff}
.detail-jour .marque.marque-jr{background:var(--accent)}
.detail-jour.dimanche{background:#f3f4f6;color:var(--mute)}
.detail-jour.ferie{background:#f3f4f6}
.detail-jour.repartir{border-color:var(--accent)}
.detail-jour.hors-periode-jour{opacity:.6;background:#fafbfc}
.detail-jour.depasse-jour{background:var(--stop-bg)}
.detail-jour.toleree-jour{background:var(--warn-bg)}
.detail-jour.pic{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.detail-jour.pic.depasse-jour{border-color:var(--stop-line);box-shadow:inset 0 0 0 1px var(--stop-line);background:var(--stop-bg)}
.detail-jour.pic.toleree-jour{border-color:var(--warn-line);box-shadow:inset 0 0 0 1px var(--warn-line);background:var(--warn-bg)}
.detail-pic{margin:0 0 4px}
.detail-pic .badge{font-size:.7rem}
.detail-qui{list-style:none;margin:0;padding:0;font-size:.84rem}
.detail-qui li{padding:1px 0;word-break:break-word}
.detail-personne{margin:0}

/* Avenant 5 (DEC-159) : les congés trimestriels se lisent en états, pas en compteurs de jours.
   Chaque trimestre est une carte à part, celui de la période préparée est mis en avant. */
.trimestres{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:8px}
.trimestre{border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:#f7f8fa}
.trimestre p{margin:0}
.trimestre-titre{margin:0 0 2px}
.trimestre.en-avant{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:#fff}
.trimestre.etat-pris{background:var(--ok-bg)}
.trimestre.etat-perdu,.trimestre.etat-sansObjet{color:var(--mute)}
.champ-large{grid-column:1/-1}

/* Avenant 13 du 09/09 (DEC-174) : onglet « Jeu », Snake à la manière du 3310.
   Rien de tout cela ne touche à une donnée : c'est un écran, un canevas et six boutons.
   Aucune ressource externe, aucune police chargée ailleurs : la politique de sécurité du site
   l'interdit, et le jeu n'en a pas besoin. */
.jeu{max-width:440px}
/* La bordure d'écran du téléphone : un cadre sombre autour d'un afficheur vert-gris. */
.jeu-ecran{background:#33382b;border:1px solid #22261c;border-radius:12px;padding:10px;box-shadow:inset 0 0 0 2px #4a5140}
#jeu-toile{display:block;width:100%;height:auto;background:#c2ceac;border-radius:2px;touch-action:none;image-rendering:pixelated}
#jeu-toile:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.jeu-scores{margin:10px 0 2px;font-size:1.05rem}
.jeu-scores strong{font-family:Consolas,Menlo,monospace}
.jeu-sep{color:var(--mute)}
.jeu-etat{margin:0 0 10px;color:var(--ink2);min-height:1.5em}
.jeu-aide{padding-left:18px}
.jeu-aide li{margin:2px 0}

/* Les flèches à l'écran ne sont jamais décidées par une détection d'appareil ni de navigateur :
   c'est la CAPACITÉ DU POINTEUR qui commande. Un appareil tactile les montre, un ordinateur non,
   et une tablette avec clavier a les deux. Le clavier, lui, fonctionne toujours et partout. */
.jeu-fleches{display:none}
@media (pointer: coarse){
  .jeu-fleches{display:grid;grid-template-columns:repeat(3,64px);grid-template-rows:repeat(3,64px);
    justify-content:center;gap:6px;margin:12px 0 4px}
  .jeu-haut{grid-column:2;grid-row:1}
  .jeu-gauche{grid-column:1;grid-row:2}
  .jeu-droite{grid-column:3;grid-row:2}
  .jeu-bas{grid-column:2;grid-row:3}
}
.jeu-fleche{display:flex;align-items:center;justify-content:center;font-size:1.5rem;line-height:1;
  border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);cursor:pointer;
  touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.jeu-fleche:active{background:#e8ebef}
.jeu-fleche:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Avenant 15 du 10/09 (DEC-176) : page de choix de l'onglet « Jeu », et « Douze ».
   Rien de tout cela ne touche à une donnée : deux cartes, un canevas et quatre boutons. Aucune
   ressource externe, aucune police chargée ailleurs, aucune image : tout est dessiné au trait sur
   le canevas, et la politique de sécurité du site reste tenue sans avoir à y toucher. */
.jeu-choix{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:10px}
.jeu-choix a{display:block;border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:#fff;
  color:var(--ink);text-decoration:none}
.jeu-choix a:hover,.jeu-choix a:focus-visible{border-color:var(--accent);background:#f7f9fc}
.jeu-choix strong{display:block;font-size:1.1rem;margin-bottom:2px}
.jeu-choix span{display:block;color:var(--ink2)}

.douze{max-width:960px}
/* Le trait vectoriel, et rien qui rappelle l'afficheur du Serpent : fond clair, cadre fin. */
.douze-ecran{background:#eef2f6;border:1px solid var(--line);border-radius:10px;padding:6px}
#douze-toile{display:block;width:100%;height:auto;background:#eef2f6;border-radius:6px;touch-action:none}
#douze-toile:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.douze-tableau{margin:10px 0 2px;font-size:1.05rem}
.douze-tableau strong,.douze-records strong{font-family:Consolas,Menlo,monospace}
.douze-records{margin:0 0 6px;color:var(--ink2)}
.douze-sep{color:var(--mute)}
.douze-etat{margin:0 0 10px;color:var(--ink2);min-height:1.5em}
.douze-aide{padding-left:18px}
.douze-aide li{margin:2px 0}

/* Le bouton « Calmer » n'est jamais décidé par une détection d'appareil ni de navigateur : c'est la
   CAPACITÉ DU POINTEUR qui commande, comme pour les flèches du Serpent. Au clavier, la flèche du
   bas fait la même chose, partout et toujours. */
.douze-tactiles{display:none}
@media (pointer: coarse){
  .douze-tactiles{display:flex;justify-content:center;margin:12px 0 4px}
}
.douze-calmer{display:flex;align-items:center;justify-content:center;min-width:200px;min-height:64px;
  font-size:1.2rem;line-height:1;border:1px solid var(--line);border-radius:10px;background:#fff;
  color:var(--ink);cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none;
  -webkit-tap-highlight-color:transparent}
.douze-calmer:active{background:#e8ebef}
/* Tant qu'une chamaillerie court, le bouton n'est pas inerte : il s'allume et bat. C'est le second
   signal, pour le pouce qui est justement posé dessus et qui ne regarde pas le canevas. */
.douze-calmer.appelle{border-color:#d92d20;color:#7a1710;background:#fee4e2;animation:douze-appel .7s ease-in-out infinite}
@keyframes douze-appel{0%,100%{box-shadow:0 0 0 0 rgba(217,45,32,.55)}50%{box-shadow:0 0 0 10px rgba(217,45,32,0)}}
.douze-calmer:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Le mouvement de fond gêne certaines personnes : le parallaxe s'arrête alors (le jeu le lit
   lui-même par matchMedia), et plus rien ici ne bouge non plus. */
@media (prefers-reduced-motion: reduce){
  .jeu-choix a{transition:none}
  /* Le battement du bouton disparaît, mais pas son changement de couleur : le signal reste, c'est
     le mouvement qui s'en va. */
  .douze-calmer.appelle{animation:none}
}

/* Avenant 16 du 11/09 (DEC-177) : le quiz, sa bibliothèque et ses écrans d'administration.
   Rien de tout cela ne touche à une donnée : des questions, des boutons radio et des liens. Aucune
   ressource externe, aucune police chargée ailleurs, aucune image. Mobile d'abord : les choix sont
   de larges cibles, et c'est la CAPACITÉ DU POINTEUR, par la requête de média (pointer: coarse),
   qui les agrandit encore sous le doigt. Aucune détection d'appareil. */
.quiz{max-width:760px;margin-bottom:14px}
.quiz-tableau{margin:4px 0 2px;font-size:1.05rem}
.quiz-tableau strong,.quiz-records strong{font-variant-numeric:tabular-nums}
.quiz-records{margin:0 0 6px;color:var(--ink2)}
.quiz-sep{color:var(--mute)}
.quiz-etat{margin:0 0 10px;color:var(--ink2);min-height:1.5em}
.quiz-sans-js,.quiz-vide{background:var(--warn-bg);border-left:4px solid var(--warn-line);padding:8px 10px;border-radius:6px;color:var(--warn-ink)}
.quiz-reprise{margin:0 0 4px;color:var(--ink2)}
.quiz-titre{font-size:1rem;margin:12px 0 6px;color:var(--ink2)}
.quiz-titre:focus-visible,.quiz-retour:focus-visible,.quiz-fin:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* Le contour ne s'efface que pour un focus venu de la souris ou du doigt : au clavier, il reste visible (la règle précédente). */
.quiz-titre:focus:not(:focus-visible),.quiz-retour:focus:not(:focus-visible),.quiz-fin:focus:not(:focus-visible){outline:none}
fieldset.quiz-question{border:0;padding:0;margin:0 0 8px;min-width:0}
legend.quiz-enonce{float:left;width:100%;padding:0;margin:0 0 12px;font-size:1.08rem;font-weight:600;line-height:1.45;white-space:normal}
.quiz-choix{clear:both;display:grid;gap:8px}
.quiz-option{display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px 10px;margin:0;padding:12px;min-height:48px;border:1px solid var(--line);
  border-radius:10px;background:#fff;font-weight:400;font-size:1rem;line-height:1.4;cursor:pointer;touch-action:manipulation}
.quiz-option input{flex:0 0 auto;width:22px;height:22px;margin:0;accent-color:var(--accent)}
.quiz-option-texte{flex:1 1 12em;min-width:0}
.quiz-option:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 2px var(--accent);background:#e8eefc}
.quiz-option:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.quiz-option:has(input:disabled){cursor:default}
/* Après la réponse, le vert et le rouge l'emportent sur le style « coché » : la règle a un sélecteur de
   plus que celle de :has(input:checked), sans quoi la réponse choisie restait bleue, juste ou fausse. */
.quiz-choix .quiz-option.bonne{border-color:var(--ok-line);background:var(--ok-bg);box-shadow:inset 4px 0 0 var(--ok-line)}
.quiz-choix .quiz-option.fausse{border-color:var(--stop-line);background:var(--stop-bg);box-shadow:inset 4px 0 0 var(--stop-line)}
.quiz-marque{display:inline-block;font-size:.78rem;font-weight:700;padding:1px 8px;border-radius:10px;border:1px solid currentColor;white-space:nowrap}
.quiz-option.bonne .quiz-marque{color:var(--ok-ink)}
.quiz-option.fausse .quiz-marque{color:var(--stop-ink)}
.quiz-retour{margin:12px 0;padding:10px 12px;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:8px;background:#f7f9fc}
.quiz-verdict{margin:0 0 4px;font-size:1.3rem;font-weight:700}
.quiz-verdict.juste{color:var(--ok-ink)}
.quiz-verdict.faux{color:var(--stop-ink)}
.quiz-suite{margin:0 0 8px;font-weight:600;color:var(--ink2)}
.quiz-bonne{margin:0 0 8px;font-weight:600}
.quiz-explication{margin:0 0 8px;line-height:1.55}
.quiz-sources-titre{margin:10px 0 4px}
.quiz-sources{margin:0 0 6px;padding-left:20px}
.quiz-sources li{margin:4px 0;word-break:break-word}
.quiz-onglet{font-size:.8rem;color:var(--mute)}
.quiz-fin{margin:12px 0;padding:10px 12px;border:1px solid var(--ok-line);border-radius:8px;background:var(--ok-bg)}
.quiz-fin h2{margin:0 0 6px}
.quiz-aide{padding-left:18px}
.quiz-effacer{margin:12px 0;padding-top:10px;border-top:1px solid var(--line);color:var(--ink2);font-size:.9rem}
.quiz-effacer .btn{margin-top:6px}
.quiz-aide li{margin:2px 0}
@media (pointer: coarse){
  .quiz-option{min-height:56px;padding:14px 12px}
  .quiz-option input{width:26px;height:26px}
  .quiz .btn{min-height:48px}
}

/* La bibliothèque : les séries closes, et elles disent leur âge. La date de vérification est
   discrète ; une question périmée, elle, se voit tout de suite, et pas seulement par la couleur. */
.biblio-filtre{margin:8px 0 0;padding:10px;background:#f7f8fa;border-radius:8px}
.biblio-filtre input{min-height:44px}
.biblio-compte{margin:6px 0 0;font-size:.9rem;font-weight:600;color:var(--ink2)}
.biblio-vide{background:#f3f4f6;border-left:4px solid var(--gris);padding:8px 10px;border-radius:6px}
.biblio-niveau h3{margin-top:18px}
.biblio-questions{margin:0;padding-left:22px}
.biblio-question{padding:10px 0;border-top:1px solid #eef0f3}
.biblio-question:first-child{border-top:0}
.biblio-question p{margin:0 0 6px}
.biblio-enonce,.apercu-enonce{font-weight:600}
.biblio-sources,.apercu-sources{margin:0 0 6px;padding-left:18px}
.biblio-sources li,.apercu-sources li{margin:3px 0;word-break:break-word}
.biblio-date{font-size:.8rem;color:var(--mute)}
.biblio-perimee{background:var(--warn-bg);border-left:4px solid var(--warn-line);color:var(--warn-ink);padding:6px 10px;border-radius:6px}

/* Les écrans d'administration du quiz : l'aperçu avant publication et les séries publiées. */
.apercu-questions{margin:0;padding-left:22px}
.apercu-question{padding:10px 0;border-top:1px solid #eef0f3}
.apercu-question:first-child{border-top:0}
.apercu-question p{margin:0 0 6px}
.apercu-choix{margin:0 0 6px;padding-left:18px}
.apercu-choix li.bonne{color:var(--ok-ink);font-weight:600}
.apercu-adresse{display:block;font-size:.78rem;word-break:break-all}
.perimee-form{margin-top:8px;padding:8px 10px;background:#f7f8fa;border-radius:8px}
.perimee-form .champ{margin:6px 0 0}
/* Complément du 11/09 : les alertes (longueur des réponses, formules absolues), un avis à l'auteur, jamais un
   refus. Elles se voient sans alarmer : la couleur d'avertissement du site, un titre, et la sorte d'alerte
   écrite en toutes lettres. */
.alerte-indices{background:var(--warn-bg);border-left:4px solid var(--warn-line);color:var(--warn-ink)}
.alerte-indices h2{margin-top:0}
.alerte-indices-liste{margin:6px 0 0;padding-left:20px}
.alerte-indices-liste li{margin:6px 0;line-height:1.45}
.alerte-note,.alerte-resume{background:var(--warn-bg);border-left:4px solid var(--warn-line);color:var(--warn-ink);padding:6px 10px;border-radius:6px;font-size:.92rem}