/* Feuille de style de Quaestio.
   La palette vient de la charte SSPC — les deux sites doivent se reconnaître.
   Le rythme, lui, est celui d'un jeu : grandes cibles, contraste franc,
   retour immédiat sur l'action. L'écran de jeu passe sur fond sombre pour
   qu'on sache, sans y penser, qu'on n'est plus en train de lire mais de
   jouer. */

:root {
  /* Teinte unique des petits textes discrets posés sur fond sombre :
     sous-titre de la marque, mention du pied, astuces. Choisie parce
     qu'elle passe le seuil de 4,5 sur les TROIS fonds sombres du site —
     la barre (6,62), les barres de jeu (4,76) et le plateau (6,09). Les
     valeurs plus foncées essayées avant échouaient sur l'un ou l'autre,
     ce qui rendait ces textes illisibles selon la page. */
  --discret:#9E9581;
  --ivoire:#F7F2E7; --papier:#FDFBF6; --blanc:#FFFFFF;
  --encre:#1B1B1B; --encre-2:#55503F;
  /* Assombri de #847C66 : les petits textes qui s'en servent — étiquettes,
     notes, compteurs — tombaient entre 3,72 et 4,15 selon le fond clair, sous
     le seuil de 4,5. La nouvelle valeur passe sur les trois : blanc (5,30),
     papier (5,13) et ivoire (4,75). */
  --encre-3:#726B58;
  --or:#D9AE1F; --or-clair:#F0C64A;
  /* Assombri de #8A6C0C, qui valait 4,45 sur l'ivoire — juste sous le seuil.
     Les surtitres en majuscules espacées y sont particulièrement exposés. */
  --or-texte:#7E6206;
  --vert:#2E5A44; --vert-vif:#3E9268; --rouge:#8E2B2B; --rouge-vif:#C4514F;
  --filet:#E4DCC7; --filet-2:#CFC3A4;
  --nuit:#171613; --nuit-2:#211F1A; --nuit-3:#2E2B23;
  /* La barre est nettement plus dense que le héros : c'est ce qui les
     sépare. Deux surfaces sombres d'une même teinte se confondent — la
     faute déjà commise avec deux aplats d'ivoire. */
  --barre:#0C0B09;
  --sur-nuit:#F2EDE0; --sur-nuit-2:#A79E88;
  /* Une seule échelle, tenue partout : boutons, cartes, encarts. Quatre
     rayons différents pris au hasard, c'est ce qui distingue une page
     assemblée d'une page dessinée. */
  --rayon:6px; --rayon-2:12px;
  /* Les ombres sont teintées chaud, pas grises : une ombre neutre sur un
     fond ivoire se voit comme une salissure. */
  --ombre-1:0 1px 2px rgba(58,48,22,.045), 0 4px 14px rgba(58,48,22,.05);
  --ombre-2:0 2px 6px rgba(58,48,22,.06), 0 18px 40px rgba(58,48,22,.10);
}

* { box-sizing:border-box; }

body {
  margin:0; background:var(--papier); color:var(--encre);
  font-family:Inter,system-ui,-apple-system,sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}

h1,h2,h3 { margin:0; font-family:Montserrat,system-ui,sans-serif;
  letter-spacing:-.025em; line-height:1.1; text-wrap:balance; }
p { margin:0; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; }

.coquille { max-width:1120px; margin:0 auto; padding:0 24px; }
.coquille.lecture { max-width:1040px; }
.coquille.etroit { max-width:680px; }

.surtitre {
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:12px;
  font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--or-texte);
}

/* ------------------------------------------------------------- en-tête */
/* Sombre partout, y compris hors du jeu : c'est ce qui détache franchement
   la barre du contenu, et ce qui relie l'accueil à l'écran de jeu. Avant,
   barre et bandeau partageaient le même ivoire et se confondaient. */

.entete { background:var(--barre); border-bottom:1px solid rgba(217,174,31,.16); }
.entete .coquille { display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:16px 24px; }
.marque { display:flex; flex-direction:column; gap:1px; }
.marque-nom { font-family:Montserrat,sans-serif; font-weight:800; font-size:22px;
  color:var(--sur-nuit); letter-spacing:-.02em; }
.marque-sous { font-family:'IBM Plex Mono',monospace; font-size:10.5px;
  letter-spacing:.08em; color:var(--discret); }
.nav { display:flex; gap:22px; font-size:14.5px; font-weight:500; align-items:center; }
.nav a { color:var(--sur-nuit-2); padding:5px 0; border-bottom:2px solid transparent; transition:color .14s ease, border-color .14s ease; }
.nav a:hover { color:var(--sur-nuit); border-bottom-color:rgba(217,174,31,.5); }
.nav a.actif { color:var(--sur-nuit); font-weight:700; border-bottom-color:var(--or); }
.moi { display:inline-flex; align-items:center; gap:8px; color:var(--sur-nuit);
  font-weight:600; }
.avatar { border-radius:50%; vertical-align:middle; }
.lien-quitter { color:var(--discret) !important; font-size:13.5px; }
.lien-quitter:hover { color:var(--sur-nuit-2) !important; }
.lien-discord { color:var(--or-clair) !important; font-weight:700; }

/* --------------------------------------------------------------- héros */
/* Prolonge l'en-tête sans couture, puis cède la place au clair : c'est ce
   contraste qui donne au haut de page sa présence. */

.heros {
  /* Dégradé plutôt qu'aplat : la surface respire, et elle se distingue de
     la barre qui la surmonte. */
  background:linear-gradient(168deg, #28241C 0%, var(--nuit) 48%, #100F0C 100%);
  color:var(--sur-nuit);
  padding:70px 0 76px; position:relative; overflow:hidden;
}
.heros::after {
  /* Lueur dorée diffuse, du côté droit, pour que le noir ne soit pas mort. */
  content:""; position:absolute; inset:-30% -14% auto auto;
  width:680px; height:680px; border-radius:50%;
  background:radial-gradient(circle, rgba(217,174,31,.22), rgba(217,174,31,.05) 45%, transparent 66%);
  pointer-events:none;
}
.heros::before {
  /* Filet doré sous la barre : la couture se voit, au lieu d'être devinée. */
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(217,174,31,.34) 22%,
                             rgba(217,174,31,.34) 78%, transparent);
}
.heros > .coquille { position:relative; z-index:1; }
.heros h1 { font-size:clamp(34px,6vw,60px); font-weight:800; margin-top:14px;
  color:var(--sur-nuit); max-width:16ch; }
.heros .surtitre { color:var(--or-clair); }
.heros .chapo { color:var(--sur-nuit-2); margin-top:18px; max-width:54ch; }

.reperes { display:flex; gap:40px; flex-wrap:wrap; margin-top:36px;
  padding-top:26px; border-top:1px solid rgba(255,255,255,.09); }
.repere .v { font-family:Montserrat,sans-serif; font-weight:800; font-size:28px;
  color:var(--or); line-height:1; }
.repere .l { font-family:'IBM Plex Mono',monospace; font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--discret); margin-top:6px; }

/* ------------------------------------------------------------- bandeau */
/* Conservé pour les pages secondaires (classement, erreur). */

.bandeau { background:var(--ivoire); border-bottom:1px solid var(--filet);
  padding:44px 0 40px; }
.bandeau h1 { font-size:clamp(30px,5vw,46px); font-weight:800; margin-top:10px; }
.chapo { margin-top:14px; color:var(--encre-2); max-width:60ch; font-size:17.5px; }

.bande { padding:56px 0 48px; }
.bande.serre { padding:0 0 52px; }
/* Un filet à l'entrée de chaque section : sans lui, « Par difficulté » et
   « Par thème » flottaient sur le même aplat sans qu'on voie où l'une
   finit et l'autre commence. */
.bande.serre > .coquille { border-top:1px solid var(--filet); padding-top:46px; }
.titre-bande { display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:4px; }
.titre-bande .note { font-size:14px; color:var(--encre-3); }

/* --------------------------------------------------------- modes de jeu */
/* Le défi occupe deux tiers de la largeur : la hiérarchie se lit sans qu'on
   ait besoin de l'expliquer. */

.modes { display:grid; gap:18px; margin-top:26px;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); }

.mode {
  position:relative; display:flex; flex-direction:column; gap:12px;
  border-radius:var(--rayon-2); padding:32px 34px 30px;
  border:1px solid var(--filet); background:var(--blanc);
  box-shadow:var(--ombre-1);
  transition:transform .14s ease, box-shadow .14s ease;
}
.mode:hover { transform:translateY(-3px); box-shadow:var(--ombre-2); }
.mode h2 { font-size:26px; font-weight:800; }
.mode p { color:var(--encre-2); font-size:15.5px; max-width:44ch; }
.mode .pied-mode { margin-top:auto; padding-top:20px; display:flex; gap:12px;
  flex-wrap:wrap; align-items:center; }

/* Le défi : fond doré, la seule vraie tache de couleur de la page. */
.mode.defi {
  background:linear-gradient(150deg, #E8BE2C 0%, var(--or) 55%, #C39A15 100%);
  border-color:#C39A15; color:#241C00;
  box-shadow:0 4px 20px rgba(217,174,31,.28);
}
.mode.defi:hover { box-shadow:0 12px 34px rgba(217,174,31,.36); }
.mode.defi h2 { color:#1C1500; }
.mode.defi p { color:#4A3B02; }
.mode.defi .surtitre { color:#5E4B04; }
.mode.defi .bouton { background:var(--nuit); border-color:var(--nuit); color:var(--sur-nuit); }
.mode.defi .bouton:hover { background:#000; }
.mode.defi .bouton.fantome { background:transparent; color:#3A2E01; border-color:rgba(0,0,0,.28); }
.mode.defi .bouton.fantome:hover { border-color:#241C00; background:rgba(255,255,255,.22); }

.etiquette {
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--encre-3);
}
.mode.defi .etiquette { color:#5E4B04; }

/* --------------------------------------------------------------- lots */
/* Toute la tuile est cliquable : sur un jeu, viser un petit bouton « Jouer »
   est une friction inutile. */

.lots { display:grid; grid-template-columns:repeat(auto-fill,minmax(212px,1fr));
  gap:12px; margin-top:22px; }

.lot { margin:0; }
.lot button {
  display:flex; flex-direction:column; align-items:flex-start; gap:5px;
  width:100%; height:100%; text-align:left; cursor:pointer;
  background:var(--blanc); border:1px solid var(--filet);
  border-radius:var(--rayon-2); box-shadow:var(--ombre-1);
  padding:18px 20px 16px; color:var(--encre);
  transition:border-color .14s ease, transform .12s ease, box-shadow .14s ease;
}
.lot button:hover { border-color:var(--or); transform:translateY(-2px);
  box-shadow:var(--ombre-2); }
.lot .titre-lot { font-family:Montserrat,sans-serif; font-weight:700;
  font-size:16.5px; line-height:1.25; }
.lot .compte { font-family:'IBM Plex Mono',monospace; font-size:11.5px;
  color:var(--encre-3); margin-top:auto; padding-top:10px; }

/* ------------------------------------------------------------ boutons */

.bouton {
  display:inline-block; border-radius:var(--rayon); padding:13px 22px;
  font-weight:600; font-size:15px; cursor:pointer; border:1px solid var(--encre);
  background:var(--encre); color:var(--papier); text-align:center;
}
.bouton:hover { background:#000; }
.bouton.or { background:var(--or); border-color:var(--or); color:#241C00; }
.bouton.or:hover { background:var(--or-clair); }
.bouton.fantome { background:transparent; color:var(--encre); border-color:var(--filet-2); }
.bouton.fantome:hover { border-color:var(--encre); }
.mode.defi .bouton.fantome { color:var(--sur-nuit); border-color:#4A463A; }
.mode.defi .bouton.fantome:hover { border-color:var(--sur-nuit-2); }
.bouton.petit { padding:9px 16px; font-size:14px; }
.bouton[disabled] { opacity:.45; cursor:not-allowed; }

/* Trois longueurs, donc un seul objet à trois segments — et non trois
   boutons distincts. Le motif revenait quatre fois dans la page : assemblé,
   il faisait du remplissage ; dessiné, il fait partie de la mise en page. */
.choix-longueur { display:inline-flex; flex-wrap:wrap;
  border:1px solid var(--filet-2); border-radius:var(--rayon); overflow:hidden;
  background:var(--blanc);
  /* `inline-flex` ne suffit pas : dans une carte en colonne, le parent étire
     ses enfants et le cadre s'ouvrait sur toute la largeur alors que les
     boutons n'en occupaient que la moitié. Le vide se retrouvait après le
     dernier segment, qui paraissait démesuré — d'autant que son séparateur
     est retiré. Il faut donc dire deux fois que le cadre épouse son contenu :
     une fois pour le flux, une fois pour le parent qui l'étire. */
  width:fit-content; max-width:100%; align-self:flex-start; }
/* Le séparateur est une ombre interne, non une bordure : une bordure occupe
   de la place, si bien que le dernier segment — le seul à ne pas en porter —
   se retrouvait plus étroit d'un pixel que ses voisins. Les trois font
   maintenant exactement la même largeur. */
.choix-longueur .bouton { border:0; border-radius:0; background:transparent;
  color:var(--encre-2); font-variant-numeric:tabular-nums;
  box-shadow:inset -1px 0 0 var(--filet-2);
  transition:background .12s, color .12s; }
.choix-longueur .bouton:last-child { box-shadow:none; }
.choix-longueur .bouton:hover { background:var(--or); color:#241C00; }

/* ============================ ÉCRAN DE JEU ============================ */
/* Fond sombre et pleine hauteur : on quitte la lecture, on entre dans le jeu. */

body.jeu { background:var(--nuit); color:var(--sur-nuit); }
body.jeu .entete { background:var(--barre); }

.plateau { padding:34px 0 60px; }

.barre-jeu { display:flex; align-items:center; justify-content:space-between;
  gap:14px; margin-bottom:14px; }
.compteur { font-family:'IBM Plex Mono',monospace; font-size:13px;
  color:var(--sur-nuit-2); letter-spacing:.04em; }
.compteur b { color:var(--sur-nuit); font-weight:500; }

.serie { display:inline-flex; align-items:center; gap:6px;
  font-family:'IBM Plex Mono',monospace; font-size:12.5px;
  color:var(--or-clair); }
.serie::before { content:"◆"; font-size:9px; }

.jauge { height:4px; background:var(--nuit-3); border-radius:3px; overflow:hidden; }
.jauge span { display:block; height:100%; background:var(--or);
  transition:width .35s cubic-bezier(.2,.7,.3,1); }

.niveau { display:inline-flex; gap:3px; vertical-align:middle; margin-left:10px; }
.niveau i { width:5px; height:5px; border-radius:50%; background:var(--nuit-3);
  display:inline-block; }
.niveau i.on { background:var(--or); }

.enonce { font-size:clamp(23px,3.6vw,33px); font-weight:800; margin:30px 0 6px;
  font-family:Montserrat,sans-serif; line-height:1.2; color:var(--sur-nuit); }
.origine { font-family:'IBM Plex Mono',monospace; font-size:12px;
  color:var(--sur-nuit-2); }

.propositions { display:flex; flex-direction:column; gap:11px; margin-top:28px; }

.proposition {
  display:flex; align-items:center; gap:15px; width:100%; text-align:left;
  font-size:17px; background:var(--nuit-2); color:var(--sur-nuit);
  border:1px solid var(--nuit-3); border-radius:var(--rayon);
  padding:17px 20px; cursor:pointer;
  transition:border-color .12s ease, background .12s ease, transform .08s ease;
}
.proposition:hover { border-color:var(--or); background:var(--nuit-3); }
.proposition:active { transform:scale(.995); }
.proposition .lettre {
  flex:none; width:29px; height:29px; border-radius:6px; display:grid;
  place-items:center; background:var(--nuit-3); border:1px solid #3B3830;
  font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--sur-nuit-2);
}
.proposition.juste { border-color:var(--vert-vif); background:rgba(62,146,104,.14); }
.proposition.juste .lettre { background:var(--vert-vif); border-color:var(--vert-vif); color:#08150E; }
.proposition.faux { border-color:var(--rouge-vif); background:rgba(196,81,79,.13); }
.proposition.faux .lettre { background:var(--rouge-vif); border-color:var(--rouge-vif); color:#1B0808; }
.proposition[disabled] { cursor:default; }
.proposition[disabled]:hover { border-color:var(--nuit-3); background:var(--nuit-2); }
.proposition.juste[disabled]:hover { border-color:var(--vert-vif); background:rgba(62,146,104,.14); }
.proposition.faux[disabled]:hover { border-color:var(--rouge-vif); background:rgba(196,81,79,.13); }

/* -------------------------------------------------------------- verdict */

.verdict { margin-top:26px; padding:20px 22px; border-radius:var(--rayon);
  background:var(--nuit-2); border-left:3px solid var(--nuit-3); }
.verdict.juste { border-left-color:var(--vert-vif); }
.verdict.faux  { border-left-color:var(--rouge-vif); }
.verdict b { font-family:Montserrat,sans-serif; font-size:17px; display:block;
  margin-bottom:6px; }
.verdict.juste b { color:var(--vert-vif); }
.verdict.faux b  { color:var(--rouge-vif); }
.verdict p { color:var(--sur-nuit-2); font-size:16px; }
.verdict .ref { font-family:'IBM Plex Mono',monospace; font-size:12px;
  color:var(--discret); display:block; margin-top:10px; }

.apres { margin-top:26px; display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.apres .bouton.or { padding:15px 30px; font-size:16px; }
.astuce { font-family:'IBM Plex Mono',monospace; font-size:11.5px;
  color:var(--discret); }

/* ------------------------------------------------------------- résultat */

.resultat { text-align:center; padding:40px 0 20px; }
.score { font-family:Montserrat,sans-serif; font-weight:800;
  font-size:clamp(60px,15vw,110px); letter-spacing:-.04em; line-height:1;
  color:var(--or); }
.score small { font-size:.34em; color:var(--sur-nuit-2); font-weight:700; }
.mention { margin-top:14px; color:var(--sur-nuit-2); font-size:19px; }
.stats { display:flex; gap:34px; justify-content:center; margin-top:32px;
  flex-wrap:wrap; }
.stat { text-align:center; }
.stat .v { font-family:Montserrat,sans-serif; font-weight:800; font-size:26px;
  color:var(--sur-nuit); }
.stat .l { font-family:'IBM Plex Mono',monospace; font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--discret); }
.resultat .apres { justify-content:center; margin-top:36px; }

/* -------------------------------------------------------------- tableau */

.filtres { display:flex; gap:8px; flex-wrap:wrap; margin-top:20px; }
.filtre { font-size:13.5px; padding:7px 15px; border-radius:20px;
  border:1px solid var(--filet-2); color:var(--encre-2); background:var(--blanc); }
.filtre:hover { border-color:var(--or); }
.filtre.actif { background:var(--encre); border-color:var(--encre); color:var(--papier); }

.tableau-enveloppe { overflow-x:auto; margin-top:22px; }
table { width:100%; border-collapse:collapse; font-size:15.5px; min-width:480px; }
th,td { text-align:left; padding:13px 16px 13px 0; border-bottom:1px solid var(--filet); }
th { font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--encre-3);
  border-bottom-color:var(--filet-2); }
td.chiffre { font-variant-numeric:tabular-nums; }
.rang { font-family:Montserrat,sans-serif; font-weight:800; color:var(--encre-3); }
tr:nth-child(1) .rang { color:var(--or-texte); }
tr.ligne-moi td { background:rgba(217,174,31,.05); }
.badge-moi { font-size:11px; color:var(--or-texte); font-weight:600; font-family:'IBM Plex Mono',monospace; }
.badge-sommet { display:inline-block; font-size:11px; font-weight:700; font-family:'IBM Plex Mono',monospace; background:rgba(217,174,31,.18); color:var(--or-texte); border:1px solid rgba(217,174,31,.4); padding:2px 8px; border-radius:12px; margin-left:6px; }

.vide { color:var(--encre-3); margin-top:20px; }
.mention-petite { margin-top:10px; font-size:14.5px; color:var(--encre-3); max-width:60ch; }
.mention-petite a { color:var(--or-texte); border-bottom:1px solid var(--filet-2); }

/* ----------------------------------------------------------------- pied */

/* Le pied reprend le noir de la barre : la page est ainsi tenue en haut et
   en bas par la même matière. Avant, il partageait l'ivoire du corps avec un
   filet de 1 px pour toute séparation — le bas de page se dissolvait au lieu
   de conclure. C'est la même faute que barre et bandeau avaient déjà faite. */
.pied { background:var(--barre); color:var(--sur-nuit-2); margin-top:72px;
  padding:40px 0 34px; font-size:14px; position:relative; }
.pied::before { content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(217,174,31,.30) 22%,
                             rgba(217,174,31,.30) 78%, transparent); }
.pied-haut { display:flex; align-items:flex-start; justify-content:space-between;
  gap:28px; flex-wrap:wrap; padding-bottom:24px;
  border-bottom:1px solid rgba(255,255,255,.07); }
.pied .marque-nom { font-size:19px; }
.pied-liens { display:flex; gap:26px; flex-wrap:wrap; font-size:14.5px; }
.pied-liens a { color:var(--sur-nuit-2); padding-bottom:2px;
  border-bottom:1px solid transparent; }
.pied-liens a:hover { color:var(--sur-nuit); border-bottom-color:var(--or); }
.pied-mention { margin-top:22px; font-size:13px; color:var(--discret); }
.pied-mention em { color:var(--sur-nuit-2); font-style:italic; }

a:focus-visible, button:focus-visible { outline:2px solid var(--or); outline-offset:3px; }

@media (prefers-reduced-motion:reduce) { * { transition:none !important; } }

@media (max-width:760px) {
  .modes { grid-template-columns:1fr; }
}

@media (max-width:520px) {
  .marque-sous { display:none; }
  .nav { gap:13px; font-size:13.5px; }
  .stats { gap:22px; }
  .reperes { gap:26px; }
  .heros { padding:46px 0 52px; }
  .mode { padding:24px 22px; }
}

/* ------------------------------------------------------------ chronomètre */

.chrono { font-family:'IBM Plex Mono',monospace; font-size:13px;
  color:var(--sur-nuit-2); font-variant-numeric:tabular-nums; }
.chrono.urgence { color:var(--rouge-vif); font-weight:500; }

/* La barre s'écoule par animation CSS : elle part du temps restant calculé
   par le serveur, donc elle reste juste même après un rechargement. */
.sablier { height:3px; background:var(--nuit-3); border-radius:2px;
  overflow:hidden; margin-top:7px; }
.sablier span { display:block; height:100%; width:100%;
  background:var(--or); transform-origin:left;
  animation-name:ecouler; animation-timing-function:linear;
  animation-fill-mode:forwards; }
.sablier.urgence span { background:var(--rouge-vif); }

@keyframes ecouler { from { transform:scaleX(1); } to { transform:scaleX(0); } }

/* Sans animation, on garde une barre pleine plutôt qu'un clignotement :
   le chiffre en secondes suffit à informer. */
@media (prefers-reduced-motion:reduce) {
  .sablier span { animation:none; }
}

/* --------------------------------------------------------------- points */
/* Un score sans son maximum ne veut rien dire : « 10 points » sur quoi ? */

.valeur { color:var(--or); margin-left:12px; font-weight:500; }
.unite { font-family:'IBM Plex Mono',monospace; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--discret); margin-top:6px; }
.bareme { font-size:14px; margin-top:2px; }
.mode.defi .bareme { color:#4A3B02; }
.mode.defi .bareme b { color:#1C1500; }
.points-forts { font-weight:700; color:var(--encre); }
.points-forts .sur { font-weight:400; color:var(--encre-3); }

/* --------------------------------------------------------- par difficulté */

.niveaux { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:14px; margin-top:22px; }
.niveau-carte { display:flex; flex-direction:column; gap:6px;
  background:var(--blanc); border:1px solid var(--filet);
  border-radius:var(--rayon-2); box-shadow:var(--ombre-1);
  padding:22px 24px; border-left:3px solid var(--filet-2); }
.niveau-carte.n1 { border-left-color:#7FA88C; }
.niveau-carte.n2 { border-left-color:var(--or); }
.niveau-carte.n3 { border-left-color:#B4645F; }
.niveau-titre { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.niveau-titre h3 { font-size:17.5px; font-weight:700; }
.valeur-niveau { font-family:'IBM Plex Mono',monospace; font-size:11.5px;
  color:var(--or-texte); }
.pastilles { display:inline-flex; gap:3px; }
.pastilles i { width:6px; height:6px; border-radius:50%;
  background:var(--filet-2); display:inline-block; }
.niveau-carte.n1 .pastilles i.on { background:#7FA88C; }
.niveau-carte.n2 .pastilles i.on { background:var(--or); }
.niveau-carte.n3 .pastilles i.on { background:#B4645F; }
.niveau-carte .compte { font-family:'IBM Plex Mono',monospace; font-size:11.5px;
  color:var(--encre-3); }
.niveau-carte .choix-longueur { margin-top:14px; }

/* La tuile de thème n'a plus qu'un titre : elle se centre. */
.lot button { justify-content:center; min-height:74px; }

/* --------------------------------------------------------------- profil */

.tete-profil { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.grand-avatar { border-radius:50%; border:2px solid var(--filet-2); flex:none; }

.chiffres { display:grid; gap:1px; margin-top:8px;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  background:var(--filet); border:1px solid var(--filet); border-radius:6px;
  overflow:hidden; }
.chiffre { background:var(--blanc); padding:20px 22px; }
.chiffre .v { font-family:Montserrat,sans-serif; font-weight:800; font-size:30px;
  line-height:1; color:var(--encre); font-variant-numeric:tabular-nums; }
.chiffre .v .sur { font-size:.5em; font-weight:700; color:var(--encre-3); }
.chiffre .l { font-family:'IBM Plex Mono',monospace; font-size:10.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--encre-3); margin-top:8px; }

/* Des barres plutôt que des chiffres seuls : un écart se voit d'un coup
   d'œil, et c'est bien un écart qu'on cherche — celui qui dit quoi réviser. */
.barres { display:flex; flex-direction:column; gap:2px; margin-top:20px; }
.barre-ligne { display:grid; align-items:center; gap:14px;
  grid-template-columns:minmax(120px,1.3fr) minmax(80px,3fr) 52px 62px;
  padding:11px 0; border-bottom:1px solid var(--filet); }
.barre-ligne:last-child { border-bottom:0; }
.barre-nom { font-weight:500; font-size:15.5px; }
.barre-piste { height:8px; background:var(--ivoire); border-radius:5px;
  overflow:hidden; border:1px solid var(--filet); }
.barre-part { display:block; height:100%; border-radius:5px;
  transition:width .4s cubic-bezier(.2,.7,.3,1); }
.barre-part.n1, .barre-part.bon    { background:#5D9377; }
.barre-part.n2, .barre-part.moyen  { background:var(--or); }
.barre-part.n3, .barre-part.faible { background:#B4645F; }
.barre-chiffre { font-family:'IBM Plex Mono',monospace; font-size:14px;
  font-variant-numeric:tabular-nums; text-align:right; font-weight:500; }
.barre-detail { font-family:'IBM Plex Mono',monospace; font-size:11.5px;
  color:var(--encre-3); text-align:right; }

@media (max-width:620px) {
  .barre-ligne { grid-template-columns:1fr 46px 56px; }
  .barre-piste { grid-column:1 / -1; order:3; }
}

/* ---------------------------------------- l'encart « podium du jour »

   Il occupe la moitié droite du héros, restée vide : le chapô plafonne à
   596 pixels sur une coquille de 1000, et la bande faisait 508 de haut pour
   rien. Le classement y gagne d'être vu sans qu'on aille le chercher.
   Sur fond sombre, donc : texte clair, or pour la première place.          */

.heros .coquille { display:grid; gap:20px 64px; align-items:start;
  grid-template-columns:minmax(0,1fr) 320px; }
.heros-texte { min-width:0; }

.encart { align-self:center;
  border:1px solid rgba(240,198,74,.24); border-radius:8px;
  background:rgba(255,255,255,.05); padding:18px 20px 16px; }
.encart-tete { padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.09); }
.encart .surtitre { color:var(--or-clair); }

.rangs { list-style:none; margin:0; padding:0; }
.rang { display:grid; align-items:center; gap:11px;
  grid-template-columns:14px 24px minmax(0,1fr) auto;
  padding:9px 10px; margin:0 -10px;
  border-bottom:1px solid rgba(255,255,255,.07); }
.rang:last-child { border-bottom:0; }
.rang-n { font-family:Montserrat,sans-serif; font-weight:800; font-size:13px;
  color:var(--sur-nuit-2); text-align:center; }
.rang:first-child .rang-n { color:var(--or-clair); }
.rang-nom { color:var(--sur-nuit); font-size:14.5px; font-weight:500;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rang-pts { font-family:Montserrat,sans-serif; font-weight:800; font-size:15px;
  color:var(--sur-nuit); font-variant-numeric:tabular-nums; }
.rang:first-child .rang-pts { color:var(--or-clair); }
.rang.moi-meme { background:rgba(240,198,74,.12); border-radius:3px; }

.encart .avatar { border-radius:50%; }
.avatar-vide { display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:50%;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.14);
  color:var(--sur-nuit-2); font-family:Montserrat,sans-serif;
  font-weight:700; font-size:10.5px; line-height:1; }

.encart-vide { color:var(--sur-nuit-2); font-size:14.5px; margin:14px 0 12px; }
.encart-moi { margin-top:12px; font-size:13.5px; color:var(--sur-nuit-2); }
.encart-moi b { color:var(--sur-nuit); }
.encart-lien { display:inline-block; margin-top:14px; font-size:13.5px;
  color:var(--or-clair); border-bottom:1px solid rgba(240,198,74,.35); }
.encart-lien:hover { border-bottom-color:var(--or-clair); }

/* Sous 900 pixels la colonne de droite n'a plus de place : l'encart repasse
   sous le texte, où il reste utile sans écraser le titre. */
@media (max-width:900px) {
  .heros .coquille { grid-template-columns:minmax(0,1fr); gap:28px; }
  .encart { align-self:stretch; }
}

/* ------------------------------------------- retouches de finition

   Trois points relevés sur la page d'accueil : les dix tuiles de thème ne
   proposaient qu'un titre centré sans aucun signe qu'on pouvait cliquer ;
   l'encart du héros était calé sur une largeur trop juste depuis que la
   coquille s'est élargie ; et les chiffres du héros méritaient l'alignement
   tabulaire, sans quoi les colonnes dansent d'un chiffre à l'autre.

   La largeur d'encart avait été corrigée ci-dessus, dans la règle de base —
   pas ici. Une seconde déclaration de `.heros .coquille`, sans media query,
   se plaçait après le point de rupture à 900px et le rendait inopérant :
   sur téléphone, la grille restait forcée sur deux colonnes (1fr + 320px),
   ce qui écrasait le podium du jour sur le texte du héros.               */

.repere .v { font-variant-numeric:tabular-nums; }

/* La tuile de thème gagne un chevron qui vient à la rencontre du curseur :
   de quoi signaler qu'elle est cliquable, ce que rien n'indiquait. */
.lot button { position:relative; padding-right:34px; }
.lot button::after {
  content:"→"; position:absolute; right:16px; top:50%;
  transform:translate(-6px,-50%); color:var(--or-texte);
  font-size:15px; opacity:0; transition:opacity .14s ease, transform .14s ease;
}
.lot button:hover::after { opacity:1; transform:translate(0,-50%); }

@media (prefers-reduced-motion:reduce) {
  .mode, .lot button, .lot button::after, .choix-longueur .bouton { transition:none; }
  .mode:hover, .lot button:hover { transform:none; }
}

/* Dix thèmes sur quatre colonnes laissaient un dernier rang de deux tuiles,
   qui se lit comme un oubli. Une colonne de plus, et la grille tombe juste
   en deux rangs pleins. `auto-fill` continue de gérer les autres largeurs
   et les thèmes qui viendront s'ajouter. */
.lots { grid-template-columns:repeat(auto-fill,minmax(196px,1fr)); }

/* ------------------------- les barres de l'écran de jeu

   Défaut livré, puis corrigé : sur l'écran de jeu, le pied noir posé sur le
   plateau presque noir ne donnait que 1,09 d'écart — la valeur même qui avait
   déjà été jugée trop faible ailleurs. Assombrir ne pouvait rien : le
   contraste s'écrase près du noir, et même le noir absolu plafonne à 1,16
   contre ce plateau. La séparation ne peut donc venir que d'une surface PLUS
   CLAIRE. `--nuit-3` donne 1,28, soit l'écart barre/héros déjà retenu.

   La barre du haut souffrait exactement du même mal : elle est traitée avec
   le pied, sans quoi l'écran de jeu aurait un bord réparé et l'autre non.
   Les deux encadrent maintenant le plateau, qui se creuse entre elles.      */

body.jeu .entete,
body.jeu .pied { background:var(--nuit-3); }

/* Il n'y a plus de reprise à faire ici : « --discret » a été choisie pour
   passer le seuil aussi bien sur ce fond que sur les deux autres. */

/* Sur une page courte — une erreur, une correction brève — le pied remontait
   au milieu de l'écran, laissant une bande de fond nue en dessous : le regard
   la lit comme du contenu manquant. Le corps occupe donc au moins la hauteur
   de la fenêtre, et c'est le contenu qui absorbe le surplus. */
body { min-height:100svh; display:flex; flex-direction:column; }
body > main { flex:1 0 auto; }
body > .pied { flex:none; }

/* ============================== SCALA ===============================

   La tour aux cent paliers. Dix étages empilés, le sommet en haut — le
   dessin se lit dans le sens de la montée, ce qui exclut de le poser à
   l'horizontale. Chaque étage montre ses dix paliers : plein pour ce qui
   est franchi, creux pour ce qui reste, cerclé pour le gardien du dixième,
   rouge à l'endroit exact de la chute.                                   */

.scala-heros .scala-depart { display:flex; gap:12px; flex-wrap:wrap;
  align-items:center; margin-top:32px; }

.scala-regles { display:grid; gap:16px; margin-top:22px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.scala-regle { background:var(--blanc); border:1px solid var(--filet);
  border-radius:var(--rayon-2); box-shadow:var(--ombre-1); padding:22px 24px; }
.scala-regle h3 { font-size:17px; font-weight:700; margin-bottom:8px; }
.scala-regle p { color:var(--encre-2); font-size:15px; }

/* ------------------------------------------------- la page d'ascension */

.scala-page { display:grid; gap:40px; align-items:start;
  grid-template-columns:320px minmax(0,1fr); }

/* ------------------------------------------------------------ la tour */

.tour { border:1px solid var(--nuit-3); border-radius:var(--rayon-2);
  background:rgba(255,255,255,.03); padding:16px 18px; }
.tour-faite { font-family:Montserrat,sans-serif; font-weight:800; font-size:26px;
  color:var(--or-clair); line-height:1; padding-bottom:14px; margin-bottom:6px;
  border-bottom:1px solid rgba(255,255,255,.08); font-variant-numeric:tabular-nums; }
.tour-faite span { font-family:'IBM Plex Mono',monospace; font-size:11px;
  font-weight:400; color:var(--sur-nuit-2); letter-spacing:.06em; margin-left:6px; }

.etage { display:grid; gap:4px 10px; align-items:center; padding:7px 0;
  grid-template-columns:16px 1fr; }
.etage-n { font-family:'IBM Plex Mono',monospace; font-size:11px;
  color:var(--sur-nuit-2); text-align:right; }
.etage-titre { grid-column:2; font-size:12.5px; color:var(--sur-nuit-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.paliers { display:flex; gap:4px; }
.paliers i { width:100%; height:9px; border-radius:2px; display:block;
  background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px rgba(255,255,255,.05); }
.paliers i.palier-fait { background:var(--or); box-shadow:none; }
.paliers i.palier-gardien { box-shadow:inset 0 0 0 1px var(--sur-nuit-2); }
.paliers i.palier-fait.palier-gardien { background:var(--or-clair);
  box-shadow:inset 0 0 0 1px var(--or-clair); }
.paliers i.palier-chute { background:var(--rouge-vif); box-shadow:none; }

/* L'étage où l'on se trouve : c'est le seul qui compte pendant qu'on joue. */
.etage.courant { background:rgba(240,198,74,.07); border-radius:5px;
  margin:0 -8px; padding:7px 8px; }
.etage.courant .etage-n, .etage.courant .etage-titre { color:var(--sur-nuit); }
.etage.a-venir .etage-titre { color:#5B5548; }

/* Le sommet se distingue : c'est le seul étage sans thème. */
.etage.sommet .etage-titre { color:var(--or-clair); letter-spacing:.06em;
  font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; }
.etage.sommet { border-bottom:1px solid rgba(240,198,74,.18); padding-bottom:12px;
  margin-bottom:4px; }

/* -------------------------------------------------- le choix du thème */

.scala-choix h1 { font-size:clamp(26px,4vw,38px); font-weight:800;
  margin-top:12px; color:var(--sur-nuit); }
.scala-choix .chapo { color:var(--sur-nuit-2); margin-top:14px; }
.scala-choix .surtitre { color:var(--or-clair); }
.scala-choix .score { text-align:left; }
.scala-choix .mention { text-align:left; }

.scala-cartes { display:grid; gap:12px; margin-top:30px;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.scala-carte { display:flex; flex-direction:column; gap:10px; width:100%;
  height:100%; text-align:left; cursor:pointer;
  background:var(--nuit-2); color:var(--sur-nuit);
  border:1px solid var(--nuit-3); border-radius:var(--rayon-2);
  padding:22px 22px 18px;
  transition:border-color .14s ease, background .14s ease, transform .1s ease; }
.scala-carte:hover { border-color:var(--or); background:var(--nuit-3);
  transform:translateY(-2px); }
.scala-carte-titre { font-family:Montserrat,sans-serif; font-weight:700;
  font-size:18px; line-height:1.25; }
.scala-carte-pied { font-family:'IBM Plex Mono',monospace; font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--sur-nuit-2);
  margin-top:auto; }
.scala-carte:hover .scala-carte-pied { color:var(--or-clair); }

.scala-record { margin-top:14px; color:var(--or-clair); font-size:15px; }

@media (max-width:820px) {
  .scala-page { grid-template-columns:minmax(0,1fr); gap:28px; }
}
@media (prefers-reduced-motion:reduce) {
  .scala-carte { transition:none; }
  .scala-carte:hover { transform:none; }
}

/* --------------------------------- l'appel à la tour, sur l'accueil

   Seule tache sombre de la partie claire : le mode est à part, et cela se
   voit avant qu'on ait lu un mot.                                        */

.scala-appel { display:grid; gap:32px; align-items:center;
  grid-template-columns:minmax(0,1fr) 132px;
  background:linear-gradient(140deg, #2A251A 0%, var(--nuit) 62%, #100F0C 100%);
  border:1px solid #3A3427; border-radius:var(--rayon-2);
  padding:34px 36px; margin-top:22px; color:var(--sur-nuit);
  box-shadow:var(--ombre-1);
  transition:border-color .14s ease, transform .12s ease, box-shadow .14s ease; }
.scala-appel:hover { border-color:var(--or); transform:translateY(-3px);
  box-shadow:0 14px 40px rgba(20,17,8,.32); }
.scala-appel .surtitre { color:var(--or-clair); }
.scala-appel h2 { font-size:clamp(24px,3.4vw,32px); font-weight:800;
  margin-top:10px; color:var(--sur-nuit); }
.scala-appel p { margin-top:12px; color:var(--sur-nuit-2); font-size:15.5px;
  max-width:56ch; }
.scala-appel-lien { display:inline-block; margin-top:18px; color:var(--or-clair);
  font-weight:600; font-size:15px; }
.scala-appel-lien::after { content:" →"; }

/* Une tour miniature : dix barres empilées, sans autre rôle que de dire de
   quoi il s'agit avant qu'on ait lu le texte. */
.scala-appel-tour { display:flex; flex-direction:column; gap:5px; justify-self:end; }
.mini-etage { display:block; width:112px; height:11px; border-radius:2px;
  background:rgba(255,255,255,.08); }
.mini-etage.sommet { background:rgba(240,198,74,.45); }
.scala-appel:hover .mini-etage { background:rgba(255,255,255,.13); }
.scala-appel:hover .mini-etage.sommet { background:var(--or-clair); }

/* Le compteur, pendant une ascension. */
.mot-palier { font-family:'IBM Plex Mono',monospace; font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--sur-nuit-2); }
.gardien-signe { display:inline-block; margin-left:8px; padding:2px 8px;
  border-radius:20px; background:rgba(196,81,79,.18);
  border:1px solid rgba(196,81,79,.5); color:#E39B99;
  font-family:'IBM Plex Mono',monospace; font-size:10.5px;
  letter-spacing:.1em; text-transform:uppercase; }

@media (max-width:720px) {
  .scala-appel { grid-template-columns:minmax(0,1fr); gap:22px; }
  .scala-appel-tour { flex-direction:row; justify-self:start; }
  .mini-etage { width:11px; height:44px; }
}
@media (prefers-reduced-motion:reduce) {
  .scala-appel { transition:none; }
  .scala-appel:hover { transform:none; }
}

/* -------------------------- le bouton secondaire sur fond sombre

   « fantome » a été dessiné pour les pages claires : texte --encre, bordure
   --filet-2. Posé sur l'écran de jeu, son texte tombait à 1,05 de contraste
   contre le plateau — de la même valeur que le fond, donc illisible, alors
   que sa bordure claire à 10,34 le faisait paraître présent. Le bouton
   existait sans qu'on puisse le lire.

   Le défaut touchait « Les records » sur la fin d'une ascension et
   « Continuer à s'entraîner » sur l'écran de résultat. La carte dorée du
   défi avait déjà sa reprise ; l'écran sombre, non.                       */

.heros .bouton.fantome,
.scala-heros .bouton.fantome,
.scala-depart .bouton.fantome,
body.jeu .bouton.fantome {
  color:var(--sur-nuit);
  border-color:rgba(255,255,255,.3);
  background:rgba(255,255,255,.07);
}
.heros .bouton.fantome:hover,
.scala-heros .bouton.fantome:hover,
.scala-depart .bouton.fantome:hover,
body.jeu .bouton.fantome:hover {
  color:#FFFFFF;
  border-color:var(--or);
  background:rgba(217,174,31,.18);
}

/* Un bouton plein « --encre » se confondrait de même avec le plateau : sa
   forme disparaîtrait, seul son texte flotterait. */
.heros .bouton:not(.or):not(.fantome),
.scala-heros .bouton:not(.or):not(.fantome),
.scala-depart .bouton:not(.or):not(.fantome),
body.jeu .bouton:not(.or):not(.fantome) {
  background:var(--nuit-3); border-color:#4A463A; color:var(--sur-nuit);
}
.heros .bouton:not(.or):not(.fantome):hover,
.scala-heros .bouton:not(.or):not(.fantome):hover,
.scala-depart .bouton:not(.or):not(.fantome):hover,
body.jeu .bouton:not(.or):not(.fantome):hover {
  background:#3A362B; border-color:var(--or);
}

/* ============================== ADMIN ================================ */

.admin-cartes { display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.admin-carte { display:block; background:var(--blanc); border:1px solid var(--filet);
  border-radius:var(--rayon-2); box-shadow:var(--ombre-1); padding:22px 24px;
  color:var(--encre); transition:border-color .14s ease, transform .12s ease; }
.admin-carte:hover { border-color:var(--or); transform:translateY(-2px); }
.admin-carte h3 { font-size:17px; font-weight:700; margin-bottom:8px; }
.admin-carte p { color:var(--encre-2); font-size:14.5px; }

.admin-journal { margin-top:18px; }
.admin-journal td { font-size:14px; vertical-align:top; }
.admin-journal-quand { font-family:'IBM Plex Mono',monospace; font-size:12.5px;
  color:var(--encre-3); white-space:nowrap; }
.admin-journal-qui { font-weight:600; white-space:nowrap; }
.admin-journal-action { color:var(--or-texte); white-space:nowrap; }

.admin-recherche { display:flex; gap:10px; align-items:center; margin-bottom:22px; }
.admin-recherche input { padding:10px 14px; border:1px solid var(--filet-2);
  border-radius:var(--rayon); font-size:15px; font-family:inherit; min-width:220px; }
.admin-recherche input:focus { outline:2px solid var(--or); outline-offset:1px; }

.admin-table { margin-top:6px; }
.admin-table th { white-space:nowrap; }
.admin-table td { vertical-align:middle; }
.admin-table .avatar { border-radius:50%; vertical-align:middle; margin-right:6px; }
.admin-table form { display:inline-block; }

.etiquette-admin { display:inline-block; margin-left:8px; padding:2px 8px;
  border-radius:20px; background:rgba(217,174,31,.14); border:1px solid rgba(217,174,31,.4);
  color:var(--or-texte); font-family:'IBM Plex Mono',monospace; font-size:10px;
  letter-spacing:.08em; text-transform:uppercase; }

.admin-erreurs { background:rgba(196,81,79,.08); border:1px solid rgba(196,81,79,.35);
  border-radius:var(--rayon-2); padding:16px 20px; color:#7A2E2C; }
.admin-erreurs p { margin:4px 0; font-size:14.5px; }

.admin-groupe { margin-bottom:36px; }
.admin-champ { margin-top:18px; }
.admin-champ label { display:block; font-size:13.5px; font-weight:600;
  color:var(--encre-2); margin-bottom:6px; }
.admin-champ textarea { width:100%; padding:11px 14px; border:1px solid var(--filet-2);
  border-radius:var(--rayon); font-family:inherit; font-size:15px; line-height:1.5;
  resize:vertical; color:var(--encre); }
.admin-champ textarea:focus { outline:2px solid var(--or); outline-offset:1px; }
.admin-champ.personnalise textarea { border-color:var(--or); background:rgba(217,174,31,.04); }
.etiquette-perso { font-weight:500; color:var(--or-texte); text-transform:none;
  letter-spacing:0; font-size:12px; margin-left:6px; }
.admin-reinit { margin-top:6px; background:none; border:0; padding:0;
  font-size:12.5px; color:var(--encre-3); text-decoration:underline; cursor:pointer; }
.admin-reinit:hover { color:var(--or-texte); }

/* ----------------------------------------------- Historique des Parties */

.admin-stats-grille { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:14px; margin-bottom:20px; }
.admin-stat-bloc { background:var(--blanc); border:1px solid var(--filet); border-radius:var(--rayon-2); padding:16px 20px; box-shadow:var(--ombre-1); }
.admin-stat-bloc .v { display:block; font-family:Montserrat,sans-serif; font-weight:800; font-size:26px; color:var(--or-texte); line-height:1.1; margin-bottom:4px; }
.admin-stat-bloc .l { display:block; font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--encre-3); }

.badge-mode { display:inline-block; font-size:12px; font-weight:600; padding:3px 9px; border-radius:var(--rayon); border:1px solid transparent; white-space:nowrap; }
.badge-mode.mode-defi { background:rgba(217,174,31,.15); color:#8C6A00; border-color:rgba(217,174,31,.4); }
.badge-mode.mode-scala { background:rgba(123,31,162,.12); color:#6A1B9A; border-color:rgba(123,31,162,.3); }
.badge-mode.mode-theme { background:rgba(21,101,192,.12); color:#1565C0; border-color:rgba(21,101,192,.3); }
.badge-mode.mode-difficulte { background:rgba(0,137,123,.12); color:#00695C; border-color:rgba(0,137,123,.3); }
.badge-mode.mode-rapide { background:rgba(0,0,0,.06); color:var(--encre-2); border-color:var(--filet); }

.badge-invite { display:inline-block; font-size:12px; color:var(--encre-3); font-style:italic; }
.badge-statut-partie { display:inline-block; font-size:11.5px; font-weight:600; font-family:'IBM Plex Mono',monospace; padding:2px 8px; border-radius:12px; }
.badge-statut-partie.terminee { background:rgba(46,125,50,.1); color:#2E7D32; border:1px solid rgba(46,125,50,.25); }
.badge-statut-partie.en-cours { background:rgba(217,174,31,.12); color:#8C6A00; border:1px solid rgba(217,174,31,.3); }

.admin-joueur-nom { display:inline-flex; align-items:center; gap:6px; }

/* ------------------------------------------- Administration des Questions */

.bandeau-avec-action { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.bandeau-actions { display:flex; gap:10px; }

.alerte { padding:14px 18px; border-radius:var(--rayon); font-size:14.5px; margin-bottom:20px; font-weight:500; }
.alerte.succes { background:rgba(46,125,50,.1); border:1px solid rgba(46,125,50,.3); color:#1B5E20; }
.alerte.erreur { background:rgba(196,81,79,.1); border:1px solid rgba(196,81,79,.3); color:#8A1C18; }

.admin-filtres-barre { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:20px; background:var(--blanc); padding:16px 18px; border:1px solid var(--filet); border-radius:var(--rayon-2); box-shadow:var(--ombre-1); }
.admin-filtre-item { min-width:140px; }
.admin-filtre-recherche { flex:1; min-width:240px; }
.admin-filtres-barre .champ-saisie { width:100%; background:var(--papier); color:var(--encre); border:1px solid var(--filet-2); padding:8px 12px; font-size:14px; }
.admin-filtre-boutons { display:flex; gap:8px; align-items:center; }

.admin-table-enveloppe { background:var(--blanc); border:1px solid var(--filet); border-radius:var(--rayon-2); box-shadow:var(--ombre-1); overflow-x:auto; }
.admin-table-questions { width:100%; margin:0; border-collapse:collapse; }
.admin-table-questions th, .admin-table-questions td { padding:12px 16px; border-bottom:1px solid var(--filet); font-size:14px; }
.admin-table-questions th { background:var(--papier); text-align:left; font-weight:600; color:var(--encre-2); }
.admin-table-questions tr:last-child td { border-bottom:none; }
.admin-table-questions tr:hover td { background:rgba(217,174,31,.04); }
.admin-table-questions tr.ligne-masquee td { opacity:.6; background:rgba(0,0,0,.02); }

.admin-q-id { font-family:'IBM Plex Mono',monospace; font-weight:700; color:var(--or-texte); font-size:13px; }
.badge-theme { display:inline-block; font-size:12px; font-weight:600; background:var(--ivoire); color:var(--encre-2); padding:3px 8px; border-radius:var(--rayon); white-space:nowrap; border:1px solid var(--filet); }
.admin-q-texte { max-width:400px; }
.admin-q-enonce { display:block; font-size:14px; line-height:1.45; color:var(--encre); margin-bottom:4px; }
.admin-q-bonne-rep { font-size:12.5px; color:var(--encre-2); }
.etiquette-rep { font-weight:700; color:#2E7D32; font-family:'IBM Plex Mono',monospace; }

.badge-difficulte { display:inline-block; font-size:11.5px; font-weight:700; padding:2px 8px; border-radius:12px; white-space:nowrap; font-family:'IBM Plex Mono',monospace; }
.badge-difficulte.facile { background:rgba(46,125,50,.12); color:#2E7D32; border:1px solid rgba(46,125,50,.3); }
.badge-difficulte.moyen { background:rgba(217,174,31,.15); color:#8C6A00; border:1px solid rgba(217,174,31,.35); }
.badge-difficulte.difficile { background:rgba(196,81,79,.12); color:#C62828; border:1px solid rgba(196,81,79,.3); }

.ref-cec-badge { font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--or-texte); text-decoration:underline; font-weight:600; }
.discret { color:var(--encre-3); font-size:13px; }

.bouton-statut { border:none; background:transparent; cursor:pointer; font-size:12.5px; font-weight:600; padding:3px 8px; border-radius:var(--rayon); transition:all .15s ease; font-family:inherit; }
.bouton-statut.actif { color:#2E7D32; background:rgba(46,125,50,.1); border:1px solid rgba(46,125,50,.25); }
.bouton-statut.inactif { color:var(--encre-3); background:rgba(0,0,0,.05); border:1px solid var(--filet); }
.bouton-statut:hover { transform:scale(1.03); }

.admin-actions-cell { text-align:right; white-space:nowrap; }
.bouton.micro { padding:4px 8px; font-size:12px; border-radius:var(--rayon); display:inline-block; }
.bouton.micro.danger { background:rgba(196,81,79,.1); color:#C62828; border:1px solid rgba(196,81,79,.3); }
.bouton.micro.danger:hover { background:#C62828; color:#fff; }

.pagination { display:flex; justify-content:center; align-items:center; gap:16px; margin-top:24px; }
.pagination-page { font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:600; color:var(--encre-2); }

/* Formulaire d'édition de question */
.admin-form-carte { background:var(--blanc); border:1px solid var(--filet); border-radius:var(--rayon-2); box-shadow:var(--ombre-1); padding:28px 32px; display:flex; flex-direction:column; gap:22px; }
.admin-form-grille-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.champ-groupe { display:flex; flex-direction:column; gap:6px; }
.champ-groupe .champ-saisie { background:var(--papier); color:var(--encre); border:1px solid var(--filet-2); padding:10px 14px; font-size:15px; width:100%; }
.champ-groupe .champ-saisie:focus { background:var(--blanc); }
.champ-groupe textarea.champ-saisie { resize:vertical; line-height:1.5; }
.requis { color:#C62828; }
.admin-aide-champ { font-size:13px; color:var(--encre-3); margin-bottom:6px; }

.admin-diff-choix { display:flex; gap:12px; flex-wrap:wrap; }
.radio-diff { display:flex; align-items:center; gap:6px; cursor:pointer; font-size:14px; }
.radio-diff input { cursor:pointer; }

.admin-propositions-bloc { display:flex; flex-direction:column; gap:10px; }
.admin-prop-ligne { display:flex; align-items:center; gap:10px; background:var(--papier); padding:10px 14px; border:1px solid var(--filet); border-radius:var(--rayon); transition:all .15s ease; }
.admin-prop-ligne.bonne { background:rgba(46,125,50,.06); border-color:rgba(46,125,50,.35); box-shadow:0 0 0 1px rgba(46,125,50,.2); }
.admin-prop-radio { display:flex; align-items:center; gap:6px; cursor:pointer; flex-shrink:0; font-weight:600; font-size:13.5px; }
.admin-prop-radio input { cursor:pointer; }
.admin-prop-num { font-family:'IBM Plex Mono',monospace; color:var(--encre-2); }
.admin-prop-ligne.bonne .admin-prop-num { color:#2E7D32; font-weight:700; }
.admin-prop-ligne .champ-saisie { background:var(--blanc); }

.admin-case-publie { padding:10px 0; }
.etiquette-case { display:flex; align-items:center; gap:10px; cursor:pointer; font-size:15px; }
.etiquette-case input { width:18px; height:18px; cursor:pointer; accent-color:var(--or); }
.admin-form-actions { display:flex; gap:12px; align-items:center; margin-top:12px; padding-top:18px; border-top:1px solid var(--filet); }

@media (max-width: 768px) {
  .admin-form-grille-2 { grid-template-columns:1fr; }
  .admin-prop-ligne { flex-direction:column; align-items:stretch; }
  .bandeau-avec-action { flex-direction:column; align-items:flex-start; }
}

/* -------------------------------------------------- Signalement Joueur */

.zone-signalement { margin-top:24px; text-align:center; }
.signalement-toast { display:inline-block; padding:10px 18px; border-radius:var(--rayon); background:rgba(46,125,50,.12); color:#2E7D32; font-size:13.5px; font-weight:600; border:1px solid rgba(46,125,50,.3); }
.signalement-invite { font-size:12.5px; color:var(--encre-3); margin:0; }
.signalement-invite a { color:var(--or-texte); text-decoration:underline; font-weight:600; }

.signalement-details { display:inline-block; text-align:left; width:100%; max-width:540px; margin:0 auto; }
.signalement-declencheur { list-style:none; cursor:pointer; font-size:13px; color:var(--encre-3); text-align:center; padding:6px 12px; border-radius:var(--rayon); transition:all .15s ease; user-select:none; }
.signalement-declencheur::-webkit-details-marker { display:none; }
.signalement-declencheur:hover { color:var(--or-texte); background:rgba(217,174,31,.06); }

.signalement-form { margin-top:12px; background:var(--blanc); border:1px solid var(--filet-2); border-radius:var(--rayon-2); padding:18px 20px; box-shadow:var(--ombre-1); display:flex; flex-direction:column; gap:12px; }
.signalement-ligne { display:flex; flex-direction:column; gap:4px; }
.signalement-label { font-size:12px; font-weight:600; color:var(--encre-2); }
.signalement-form .champ-saisie { width:100%; background:var(--papier); color:var(--encre); border:1px solid var(--filet-2); font-size:13.5px; }
.signalement-form .champ-saisie:focus { background:var(--blanc); }
.signalement-actions { display:flex; justify-content:flex-end; }

/* -------------------------------------------------- Signalements Admin */

.admin-carte.carte-alerte { border-color:rgba(196,81,79,.4); background:linear-gradient(180deg, rgba(196,81,79,.03) 0%, var(--blanc) 100%); }
.surtitre.en-alerte { color:#C62828; font-weight:700; }

.admin-signalements-alerte { background:rgba(217,174,31,.08); border:1px solid rgba(217,174,31,.4); border-radius:var(--rayon-2); padding:18px 22px; margin-bottom:20px; }
.admin-signalements-alerte h4 { font-size:15px; font-weight:700; color:var(--or-texte); margin-bottom:10px; }
.admin-sig-liste-rappel { list-style:none; padding:0; margin:0 0 14px 0; display:flex; flex-direction:column; gap:8px; }
.admin-sig-liste-rappel li { font-size:13.5px; line-height:1.4; color:var(--encre); }
.admin-sig-liste-rappel .badge-motif { margin-right:6px; }
.etiquette-case-mini { display:flex; align-items:center; gap:8px; font-size:13px; cursor:pointer; color:var(--encre-2); padding-top:8px; border-top:1px dashed rgba(217,174,31,.3); }
.etiquette-case-mini input { accent-color:var(--or); }

.admin-signalements-liste { display:flex; flex-direction:column; gap:16px; margin-top:12px; }
.admin-signalement-carte { background:var(--blanc); border:1px solid var(--filet); border-radius:var(--rayon-2); box-shadow:var(--ombre-1); padding:20px 24px; transition:border-color .15s ease; }
.admin-signalement-carte.en-attente { border-left:4px solid #D9AE1F; }
.admin-signalement-carte.traite { border-left:4px solid #2E7D32; opacity:.85; }
.admin-signalement-carte.rejete { border-left:4px solid var(--encre-3); opacity:.6; }

.admin-sig-tete { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:12px; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--filet); }
.admin-sig-meta { display:flex; align-items:center; flex-wrap:wrap; gap:10px; font-size:12.5px; }
.admin-sig-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

.badge-statut { display:inline-block; font-size:11px; font-weight:700; font-family:'IBM Plex Mono',monospace; padding:2px 8px; border-radius:12px; text-transform:uppercase; }
.badge-statut.en-attente { background:rgba(217,174,31,.15); color:#8C6A00; border:1px solid rgba(217,174,31,.4); }
.badge-statut.traite { background:rgba(46,125,50,.12); color:#2E7D32; border:1px solid rgba(46,125,50,.3); }
.badge-statut.rejete { background:rgba(0,0,0,.06); color:var(--encre-3); border:1px solid var(--filet); }

.badge-motif { display:inline-block; font-size:12px; font-weight:600; background:var(--ivoire); color:var(--encre-2); padding:2px 8px; border-radius:var(--rayon); border:1px solid var(--filet); }
.admin-sig-date { font-family:'IBM Plex Mono',monospace; color:var(--encre-3); }
.admin-sig-auteur { color:var(--encre-2); }

.admin-sig-remarque { margin-bottom:14px; }
.admin-sig-remarque .surtitre { display:block; margin-bottom:4px; font-size:11px; color:var(--encre-3); }
.admin-sig-remarque p { font-size:14.5px; line-height:1.5; color:var(--encre); background:rgba(217,174,31,.04); border-left:3px solid var(--or); padding:10px 14px; border-radius:0 var(--rayon) var(--rayon) 0; margin:0; }

.admin-sig-question-rappel { background:var(--papier); border:1px solid var(--filet); border-radius:var(--rayon); padding:12px 16px; font-size:13.5px; display:flex; flex-direction:column; gap:4px; }
.admin-sig-question-rappel .surtitre { font-size:11px; color:var(--encre-3); margin-bottom:2px; }
.admin-sig-enonce { color:var(--encre); font-size:14px; line-height:1.4; }
.admin-sig-reponse { color:#2E7D32; font-size:12.5px; font-weight:600; }

.bouton.micro.succes { background:rgba(46,125,50,.12); color:#2E7D32; border:1px solid rgba(46,125,50,.3); }
.bouton.micro.succes:hover { background:#2E7D32; color:#fff; }

/* --------------------------------------------------------- Catéchisme (CEC) */

.cec-titre-section { margin-bottom:24px; }
.cec-titre-section .surtitre { display:block; margin-bottom:4px; }
.cec-titre-section h2 { font-size:26px; font-weight:800; }

/* Formulaires d'accès rapide et recherche */
.form-saut-cec, .form-recherche-cec { margin-bottom:14px; width:100%; }
.etiquette-champ { display:block; font-size:12px; font-weight:600; color:var(--sur-nuit-2);
  margin-bottom:5px; font-family:'IBM Plex Mono',monospace; letter-spacing:.04em; }
.groupe-saisie { display:flex; gap:6px; width:100%; }
.champ-saisie { flex:1; min-width:0; background:var(--nuit-2); border:1px solid var(--nuit-3);
  color:var(--sur-nuit); padding:9px 12px; border-radius:var(--rayon); font-size:14px;
  font-family:inherit; }
.champ-saisie:focus { outline:2px solid var(--or); border-color:var(--or); }
.champ-saisie.mini { max-width:130px; }
.groupe-saisie .bouton { flex-shrink:0; white-space:nowrap; padding:8px 14px; font-size:13px; }

/* Grille des 4 parties */
.cec-parties-grille { display:grid; grid-template-columns:repeat(2, 1fr);
  gap:24px; margin-top:16px; }
.cec-partie-carte { background:var(--blanc); border:1px solid var(--filet);
  border-radius:var(--rayon-2); box-shadow:var(--ombre-1); display:flex; flex-direction:column;
  overflow:hidden; transition:border-color .15s ease; }
.cec-partie-carte:hover { border-color:var(--filet-2); }
.cec-partie-tete { padding:20px 22px 14px; border-bottom:1px solid var(--filet);
  background:linear-gradient(to bottom, var(--papier), var(--blanc)); }
.cec-partie-tete h3 { font-size:18px; margin:6px 0 2px; }
.cec-partie-soustitre { font-size:13.5px; color:var(--or-texte); font-weight:600; }
.cec-sections-liste { padding:16px 22px; flex:1; display:flex; flex-direction:column; gap:16px; }
.cec-section-titre { font-size:13px; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--encre-2); margin-bottom:6px; font-family:Montserrat,sans-serif; }
.cec-chapitres-liste { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:4px; }
.cec-chapitres-liste a { display:flex; justify-content:space-between; align-items:center;
  gap:12px; padding:6px 8px; border-radius:var(--rayon); font-size:13.5px;
  color:var(--encre); text-decoration:none; transition:background .12s ease; }
.cec-chapitres-liste a:hover { background:var(--ivoire); color:var(--or-texte); }
.cec-chap-nom { font-weight:500; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.cec-chap-bornes { font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--encre-3); white-space:nowrap; flex-shrink:0; }
.cec-partie-pied { padding:14px 22px; background:var(--papier); border-top:1px solid var(--filet); }

/* Fil d'Ariane & Bandeau de contrôle du liseur */
.liseur-entete-bande {
  background: var(--barre);
  color: var(--sur-nuit);
  padding: 16px 0 18px;
  border-bottom: 1px solid rgba(217,174,31,.25);
}

.liseur-barre-haut {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}

.fil-ariane {
  font-size: 13.5px;
  color: var(--sur-nuit-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.fil-ariane a {
  color: var(--or-clair);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}
.fil-ariane a:hover {
  color: #fff;
}
.fil-ariane .sep {
  color: var(--discret);
  font-weight: 400;
}
.fil-ariane .actuel {
  color: #fff;
  font-weight: 700;
}

.liseur-saut-rapide {
  display: flex;
  align-items: center;
  gap: 8px;
}
.saut-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--sur-nuit-2);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.liseur-saut-rapide .champ-saisie {
  background: #000;
  border: 1px solid rgba(255,255,255,.24);
  color: #fff;
  width: 90px;
  padding: 6px 10px;
  font-size: 13.5px;
  text-align: center;
  border-radius: var(--rayon);
}
.liseur-saut-rapide .champ-saisie:focus {
  border-color: var(--or);
  outline: 2px solid var(--or);
}
.liseur-saut-rapide .bouton {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
}

.liseur-barre-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--rayon);
  padding: 8px 12px;
}

.liseur-btn-nav {
  background: rgba(255,255,255,.1) !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  color: #FFFFFF !important;
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--rayon);
  text-decoration: none;
  transition: all .15s ease;
}
.liseur-btn-nav:hover {
  background: rgba(240,198,74,.22) !important;
  border-color: var(--or-clair) !important;
  color: var(--or-clair) !important;
}
.liseur-btn-nav.desactive {
  background: rgba(255,255,255,.02) !important;
  border-color: rgba(255,255,255,.08) !important;
  color: var(--discret) !important;
  cursor: not-allowed;
  opacity: .5;
}

.liseur-indicateur {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--or-clair);
  text-align: center;
}
.liseur-indicateur small {
  font-size: 11px;
  font-weight: 400;
  color: var(--sur-nuit-2);
}

/* Corps de lecture */
.liseur-corps { padding:40px 0 60px; background:var(--papier); }
.cec-texte-colonne { display:flex; flex-direction:column; gap:18px; }
.cec-titre-chapitre { font-size:24px; font-weight:800; color:var(--encre); margin:28px 0 8px;
  padding-bottom:8px; border-bottom:2px solid var(--or); }
.cec-titre-article { font-size:19px; font-weight:700; color:var(--encre-2); margin:18px 0 4px; }
.cec-sous-titre { font-size:14.5px; font-weight:700; color:var(--or-texte); text-transform:uppercase;
  letter-spacing:.06em; margin:12px 0 2px; font-family:'IBM Plex Mono',monospace; }

/* Paragraphes du Catéchisme */
.cec-paragraphe { display:grid; grid-template-columns:80px 1fr; gap:20px;
  background:var(--blanc); border:1px solid var(--filet); border-radius:var(--rayon-2);
  padding:24px 28px; box-shadow:var(--ombre-1); transition:all .2s ease; scroll-margin-top:24px; }
.cec-paragraphe.cible { border-color:var(--or); box-shadow:0 0 0 2px rgba(217,174,31,.25), var(--ombre-2);
  background:rgba(255,253,245,1); }
.cec-paragraphe.en-bref { background:linear-gradient(135deg, rgba(217,174,31,.08) 0%, rgba(255,255,255,1) 100%);
  border-color:rgba(217,174,31,.4); }
.cec-num-col { text-align:right; }
.cec-num-ancre { font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:700;
  color:var(--or-texte); text-decoration:none; padding:4px 8px; border-radius:var(--rayon);
  background:var(--ivoire); display:inline-block; white-space:nowrap; }
.cec-num-ancre:hover { background:var(--or); color:var(--blanc); }
.cec-contenu { display:flex; flex-direction:column; gap:8px; min-width:0; }
.etiquette-en-bref { align-self:flex-start; font-family:'IBM Plex Mono',monospace; font-size:10px;
  font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--or-texte);
  background:rgba(217,174,31,.18); padding:2px 8px; border-radius:12px; }
.cec-texte { font-size:17.5px; line-height:1.78; color:var(--encre); text-wrap:pretty; }

/* Encart d'incitation au quiz (Passerelle lecture -> jeu) */
.cec-passerelle-quiz { margin-top:40px; background:linear-gradient(145deg, #24211A 0%, var(--nuit) 100%);
  color:var(--sur-nuit); border:1px solid rgba(217,174,31,.3); border-radius:var(--rayon-2);
  padding:26px 30px; display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:20px; box-shadow:var(--ombre-2); }
.cec-passerelle-texte h3 { font-size:20px; margin:4px 0 6px; color:var(--sur-nuit); }
.cec-passerelle-texte p { font-size:14.5px; color:var(--sur-nuit-2); }

/* Liens de bas de liseur */
.liseur-pied-nav { display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:12px; margin-top:36px; padding-top:24px; border-top:1px solid var(--filet); }

/* Écran de recherche */
.recherche-grand-form { margin-top:20px; }
.recherche-grand-form .champ-saisie { font-size:16px; padding:12px 16px; }
.recherche-liste { display:flex; flex-direction:column; gap:14px; margin-top:16px; }
.recherche-carte { display:block; background:var(--blanc); border:1px solid var(--filet);
  border-radius:var(--rayon-2); padding:18px 22px; box-shadow:var(--ombre-1);
  color:var(--encre); text-decoration:none; transition:border-color .14s ease, transform .12s ease; }
.recherche-carte:hover { border-color:var(--or); transform:translateY(-2px); }
.recherche-carte-tete { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.recherche-num { font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:13px;
  color:var(--or-texte); background:var(--ivoire); padding:2px 8px; border-radius:var(--rayon); }
.recherche-contexte { font-size:12px; color:var(--encre-3); text-transform:uppercase; letter-spacing:.04em; }
.recherche-titre { font-size:16px; font-weight:700; margin-bottom:6px; }
.recherche-extrait { font-size:14.5px; color:var(--encre-2); line-height:1.55; }
.recherche-aucun, .recherche-vide { text-align:center; padding:40px 0; color:var(--encre-2); }
.recherche-aucun h3 { margin-bottom:8px; }

/* Liens de référence CEC dans les corrections de quiz */
.ref-cec-lien { color:var(--or-texte); text-decoration:underline; font-weight:600; text-underline-offset:2px; }
.ref-cec-lien:hover { color:var(--encre); background:rgba(217,174,31,.18); border-radius:3px; padding:1px 3px; }

@media (max-width: 850px) {
  .cec-parties-grille { grid-template-columns:1fr; }
}

@media (max-width: 600px) {
  .cec-paragraphe { grid-template-columns:1fr; gap:8px; padding:16px 18px; }
  .cec-num-col { text-align:left; }
  .liseur-barre-controles { flex-direction:column; align-items:stretch; }
  .liseur-nav-boutons { justify-content:space-between; width:100%; }
}

/* --------------------------------------------------- Succès et Trophées */

.succes-banniere-gains {
  background:linear-gradient(135deg, rgba(217,174,31,.22) 0%, rgba(217,174,31,.08) 100%);
  border:2px solid var(--or); border-radius:var(--rayon-2); padding:18px 22px;
  margin:24px 0 28px; box-shadow:0 6px 20px rgba(217,174,31,.25); text-align:left;
  animation:surgirSucces .4s cubic-bezier(.175,.885,.32,1.275);
}
@keyframes surgirSucces {
  from { opacity:0; transform:scale(.95) translateY(-8px); }
  to { opacity:1; transform:scale(1) translateY(0); }
}
.surtitre-succes { display:block; font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em; color:var(--or-texte); margin-bottom:10px; }
.succes-gains-liste { display:flex; flex-direction:column; gap:8px; }
.succes-gain-item { display:flex; align-items:center; gap:12px; font-size:15px; color:var(--encre); }
.succes-gain-icone { font-size:24px; line-height:1; }
.succes-gain-texte strong { color:var(--or-texte); }

.succes-jauge-enveloppe {
  width:160px; height:10px; background:var(--ivoire); border:1px solid var(--filet);
  border-radius:10px; overflow:hidden;
}
.succes-jauge-barre {
  height:100%; background:linear-gradient(90deg, #D9AE1F, #F0C434); border-radius:10px;
  transition:width .6s ease;
}

.succes-grille {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:16px; margin-top:20px;
}
.succes-carte {
  display:flex; align-items:flex-start; gap:16px; padding:18px 20px;
  border-radius:var(--rayon-2); background:var(--blanc); border:1px solid var(--filet);
  box-shadow:var(--ombre-1); transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.succes-carte.debloque {
  border-color:rgba(217,174,31,.5); background:linear-gradient(180deg, #FFFFFF 0%, #FAF6ED 100%);
}
.succes-carte.debloque:hover {
  transform:translateY(-2px); border-color:var(--or); box-shadow:0 8px 24px rgba(217,174,31,.18);
}
.succes-carte.verrouille {
  opacity:.65; background:var(--ivoire); border-color:var(--filet-2); filter:grayscale(.4);
}
.succes-carte.verrouille:hover {
  opacity:.9; filter:grayscale(0);
}
.succes-icone {
  font-size:32px; line-height:1; flex-shrink:0; padding-top:2px;
}
.succes-infos { flex:1; min-width:0; }
.succes-famille {
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase;
  letter-spacing:.08em; color:var(--encre-3); margin-bottom:2px;
}
.succes-titre {
  font-size:16px; font-weight:700; margin:0 0 4px; color:var(--encre);
}
.succes-carte.debloque .succes-titre { color:var(--or-texte); }
.succes-desc {
  font-size:13.5px; line-height:1.45; color:var(--encre-2); margin:0 0 8px;
}
.succes-date {
  display:inline-block; font-size:11.5px; font-weight:600; font-family:'IBM Plex Mono',monospace;
  color:#2E7D32; background:rgba(46,125,50,.1); padding:2px 7px; border-radius:10px;
}
.succes-verrou {
  display:inline-block; font-size:11.5px; font-family:'IBM Plex Mono',monospace;
  color:var(--encre-3); font-style:italic;
}