/* ════════════════════════════════════════════════════════════
   REX — Retour d'expérience · Formation télépilote
   Parti pris : un registre, pas une application. Règles fines,
   chiffres tabulaires, serif éditorial, aucune ombre décorative.
   ════════════════════════════════════════════════════════════ */

:root {
  --encre:        #12151a;
  --encre-douce:  #2b323c;
  --gris:         #6b7280;
  --gris-clair:   #9aa1ab;
  --papier:       #f5f2ec;
  --papier-creux: #ebe6db;
  --papier-vif:   #fffdf8;
  --filet:        #d8d1c4;
  --filet-fort:   #b9b0a0;

  --vert:         #0f6b4f;
  --vert-clair:   #e3efe9;
  --brique:       #b4510e;
  --brique-clair: #f6ece2;
  --rouge:        #9b2c2c;

  --rail: 260px;
  --mesure: 68ch;

  --sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--encre);
  background: var(--papier);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
button { font: inherit; color: inherit; }

/* ── Chiffres : toujours tabulaires, toujours mono quand ils comptent ── */
.chiffre { font-family: var(--mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ── Étiquettes : petites capitales espacées ── */
.etiquette {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .14em; color: var(--gris);
}

/* ══════════════ RAIL DE GAUCHE (cartouche) ══════════════ */
.rail {
  position: fixed; inset: 0 auto 0 0; width: var(--rail);
  background: var(--encre); color: #d9d4c8;
  display: flex; flex-direction: column;
  padding: 26px 0 18px;
  z-index: 20;
}

.cartouche { padding: 0 24px 22px; border-bottom: 1px solid #262c36; }
.cartouche .sigle {
  font-family: var(--serif); font-size: 40px; line-height: .9; font-weight: 500;
  color: var(--papier-vif); letter-spacing: -.02em;
}
.cartouche .sigle span { color: var(--vert); }
.cartouche .sous {
  margin-top: 10px; font-size: 12px; line-height: 1.45; color: #8b93a0;
  max-width: 19ch;
}

.rail nav { padding: 18px 12px; flex: 1; overflow-y: auto; }
.rail .groupe {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .16em;
  color: #59616e; padding: 16px 12px 7px;
}
.rail a.item {
  display: flex; align-items: baseline; gap: 10px;
  padding: 8px 12px; border-radius: 3px;
  text-decoration: none; color: #c3bdb0; font-size: 14px;
  border-left: 2px solid transparent;
}
.rail a.item:hover { background: #1b2028; color: #fff; }
.rail a.item.actif {
  background: #1b2028; color: #fff; border-left-color: var(--vert);
}
.rail a.item .num {
  font-family: var(--mono); font-size: 10.5px; color: #59616e; min-width: 18px;
}
.rail a.item.actif .num { color: var(--vert); }

.rail .pied {
  padding: 14px 24px 0; border-top: 1px solid #262c36;
  font-size: 11.5px; line-height: 1.5; color: #6d7583;
}
.promo-active {
  margin: 0 12px 12px; padding: 11px 13px;
  background: #1b2028; border-left: 2px solid var(--vert); border-radius: 3px;
}
.promo-active .etiquette { color: #59616e; }
.promo-active strong { display: block; font-size: 13px; color: #fff; margin-top: 3px; font-weight: 500; }
.promo-active button {
  margin-top: 7px; background: none; border: none; padding: 0;
  font-size: 11.5px; color: #8b93a0; cursor: pointer; text-decoration: underline;
  text-underline-offset: 2px;
}
.promo-active button:hover { color: #fff; }

/* ══════════════ CORPS ══════════════ */
.corps { margin-left: var(--rail); min-height: 100vh; }
.vue { display: none; }
.vue.active { display: block; }

.bandeau {
  border-bottom: 1px solid var(--filet);
  padding: 40px 48px 0;
  background: var(--papier-vif);
}
.bandeau h1 {
  font-family: var(--serif); font-weight: 500; font-size: 42px; line-height: 1.08;
  letter-spacing: -.02em; max-width: 22ch;
}
.bandeau .chapeau {
  margin-top: 14px; max-width: 62ch; font-size: 16px; line-height: 1.62; color: var(--encre-douce);
}
.bandeau .chapeau em { font-style: italic; color: var(--encre); }

/* compteurs du bandeau */
.compteurs { display: flex; gap: 0; margin: 30px 0 0; border-top: 1px solid var(--filet); }
.compteur { padding: 14px 30px 16px 0; margin-right: 30px; border-right: 1px solid var(--filet); }
.compteur:last-child { border-right: none; }
.compteur .n { font-family: var(--mono); font-size: 26px; font-weight: 500; line-height: 1; }
.compteur .l { margin-top: 5px; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--gris); }

.contenu { padding: 32px 48px 80px; }

/* ══════════════ BARRE DE FILTRES ══════════════ */
.filtres {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 14px 48px; background: var(--papier-vif);
  border-bottom: 1px solid var(--filet);
  position: sticky; top: 0; z-index: 10;
}
.filtre {
  padding: 5px 12px; font-size: 13px; border: 1px solid var(--filet);
  background: transparent; border-radius: 2px; cursor: pointer; color: var(--encre-douce);
}
.filtre:hover { border-color: var(--filet-fort); }
.filtre.on { background: var(--encre); color: var(--papier-vif); border-color: var(--encre); }
.filtres .sep { width: 1px; height: 20px; background: var(--filet); margin: 0 6px; }
.filtres .pousse { margin-left: auto; }
.filtres-sep { width: 1px; height: 22px; background: var(--filet); margin: 0 4px; }

/* Ordre du classement : un seul bloc à deux volets, pas deux pastilles */
.segment { display: flex; border: 1px solid var(--filet-fort); border-radius: 2px; overflow: hidden; }
.segment .filtre {
  border: none; border-radius: 0; background: #fff;
  padding: 8px 15px; font-size: 13px;
}
.segment .filtre + .filtre { border-left: 1px solid var(--filet); }
.segment .filtre:hover { background: var(--papier-creux); }
.segment .filtre.on { background: var(--encre); color: var(--papier-vif); }
.segment .filtre.on + .filtre { border-left-color: var(--encre); }

/* Ce que le filtre donne, en clair, sous la barre */
.filtres-etat {
  margin: 0; padding-top: 11px;
  font-size: 12.5px; color: var(--gris); display: flex; align-items: baseline; gap: 8px;
}
.filtres-etat .n { font-family: var(--mono); color: var(--encre); font-weight: 500; }
.filtres-etat button {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--vert); text-decoration: underline; text-underline-offset: 2px;
}
.filtres-etat button:hover { color: #0a4e3a; }
.filtres-etat:empty { display: none; }

/* Onglets d'administration : un bandeau, qui défile plutôt que de s'empiler */
.filtres-admin { flex-direction: row; align-items: center; flex-wrap: wrap; }
.onglets-admin { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Sélecteur de rubrique : une étiquette et une liste, d'un seul tenant */
.selecteur {
  display: flex; align-items: stretch;
  border: 1px solid var(--filet-fort); border-radius: 2px;
  background: #fff; overflow: hidden;
}
.selecteur label {
  display: flex; align-items: center; padding: 0 11px;
  background: var(--papier-creux); border-right: 1px solid var(--filet);
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em;
  color: var(--gris); white-space: nowrap;
}
.selecteur select {
  width: auto; min-width: 190px; border: none; border-radius: 0;
  padding: 7px 32px 7px 11px; font-size: 13.5px; background-color: #fff;
}
.selecteur select:focus { box-shadow: none; }
.selecteur:focus-within { border-color: var(--encre); box-shadow: 0 0 0 3px rgba(18,21,26,.07); }
.selecteur.actif { border-color: var(--encre); }
.selecteur.actif label { background: var(--encre); color: var(--papier-vif); border-right-color: var(--encre); }

/* ══════════════ LE CLASSEMENT ══════════════ */
.classement { border-top: 1px solid var(--filet); }

.entree {
  display: grid; grid-template-columns: 58px 76px 1fr; gap: 0;
  border-bottom: 1px solid var(--filet);
  background: var(--papier-vif);
}
.entree:hover { background: #fff; }

.entree .rang {
  font-family: var(--mono); font-size: 13px; color: var(--gris-clair);
  padding: 22px 0 0 18px; letter-spacing: -.02em;
}
.entree:nth-child(-n+3) .rang { color: var(--brique); font-weight: 600; }

/* colonne de vote */
.scrutin {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: 18px 12px; border-right: 1px solid var(--filet);
}
.scrutin .fleche {
  border: none; background: none; cursor: pointer; padding: 2px 8px; line-height: 1;
  color: var(--filet-fort); font-size: 15px;
}
.scrutin .fleche:hover { color: var(--encre); }
.scrutin .fleche.actif { color: var(--vert); }
.scrutin .fleche.actif.bas { color: var(--rouge); }
.scrutin .score {
  font-family: var(--mono); font-size: 19px; font-weight: 600; line-height: 1.2;
  margin: 1px 0;
}
.scrutin .score.positif { color: var(--vert); }
.scrutin .score.negatif { color: var(--rouge); }

.entree .texte { padding: 19px 26px 20px 20px; }
.entree h3 {
  font-family: var(--serif); font-size: 21px; font-weight: 500; line-height: 1.25;
  letter-spacing: -.01em; margin-bottom: 7px;
}
.entree .extrait {
  font-size: 14.5px; line-height: 1.62; color: var(--encre-douce); max-width: var(--mesure);
  white-space: pre-wrap;
}
.entree .meta {
  margin-top: 11px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 12px; color: var(--gris);
}
.entree .meta .point { width: 3px; height: 3px; border-radius: 50%; background: var(--filet-fort); }

/* jetons de rubrique */
.jeton {
  display: inline-block; padding: 2px 8px; font-size: 11px; font-weight: 500;
  border: 1px solid var(--filet-fort); border-radius: 2px; color: var(--encre-douce);
  text-transform: lowercase; letter-spacing: .01em;
}
.jeton.instructeurs { border-color: #9a7fb0; color: #6b4d84; }
.jeton.rythme       { border-color: #7f9ab0; color: #4d6b84; }
.jeton.programme    { border-color: #b0a37f; color: #84744d; }
.jeton.cours        { border-color: #7fb096; color: #2f7a5c; }
.jeton.restauration { border-color: #b08a7f; color: #8a4f3d; }
.jeton.logistique   { border-color: #8f8f8f; color: #5c5c5c; }
.jeton.autre        { border-color: var(--filet-fort); color: var(--gris); }

.registre-marque { font-weight: 600; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; }
.registre-marque.eloge      { color: var(--vert); }
.registre-marque.constat    { color: var(--encre-douce); }
.registre-marque.suggestion { color: var(--brique); }

.signature { font-style: italic; }
.signature.anonyme { color: var(--gris-clair); }

/* ══════════════ FORMULAIRES ══════════════ */
.feuille {
  background: var(--papier-vif); border: 1px solid var(--filet);
  max-width: 760px; padding: 30px 34px 34px;
}
.feuille h2 {
  font-family: var(--serif); font-size: 27px; font-weight: 500; letter-spacing: -.01em;
  margin-bottom: 6px;
}
.feuille .intro { color: var(--encre-douce); font-size: 14.5px; margin-bottom: 26px; max-width: 58ch; }

.champ { margin-bottom: 20px; }
.champ > label { display: block; margin-bottom: 7px; }
.champ .aide { font-size: 12.5px; color: var(--gris); margin-top: 5px; line-height: 1.5; }

input[type="text"], textarea, select {
  width: 100%; font: inherit; font-size: 15px; color: var(--encre);
  padding: 10px 12px; background: #fff;
  border: 1px solid var(--filet-fort); border-radius: 2px;
}
input[type="text"]:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--encre); box-shadow: 0 0 0 3px rgba(18,21,26,.07);
}
textarea { min-height: 120px; resize: vertical; line-height: 1.6; }

select {
  appearance: none; -webkit-appearance: none;
  padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'><path d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23566' stroke-width='1.4'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center;
}
select:hover { border-color: var(--encre); }
.compteur-car { font-size: 11.5px; color: var(--gris-clair); text-align: right; margin-top: 4px; font-family: var(--mono); }

/* choix en ligne */
.choix { display: flex; flex-wrap: wrap; gap: 7px; }
.choix button {
  padding: 7px 14px; font-size: 13.5px; background: #fff; cursor: pointer;
  border: 1px solid var(--filet-fort); border-radius: 2px;
}
.choix button:hover { border-color: var(--encre-douce); }
.choix button.on { background: var(--encre); color: var(--papier-vif); border-color: var(--encre); }

.bouton {
  padding: 11px 24px; font-size: 14.5px; font-weight: 500; cursor: pointer;
  background: var(--encre); color: var(--papier-vif); border: 1px solid var(--encre);
  border-radius: 2px;
}
.bouton:hover { background: #000; }
.bouton:disabled { opacity: .4; cursor: not-allowed; }
.bouton.creux { background: transparent; color: var(--encre); }
.bouton.creux:hover { background: var(--papier-creux); }
.bouton.vert { background: var(--vert); border-color: var(--vert); }
.bouton.vert:hover { background: #0c5a42; }

.avis { padding: 11px 14px; border-left: 3px solid; font-size: 14px; margin-bottom: 20px; }
.avis.erreur  { border-color: var(--rouge); background: #fbeeee; color: #7a2323; }
.avis.succes  { border-color: var(--vert);  background: var(--vert-clair); color: #0b5340; }
.avis.info    { border-color: var(--filet-fort); background: var(--papier-creux); color: var(--encre-douce); }

/* ══════════════ CORPUS RÉGLEMENTAIRE ══════════════ */
.pile-textes { border-top: 1px solid var(--filet); }
.texte-ligne {
  display: grid; grid-template-columns: 116px 1fr auto; gap: 24px; align-items: baseline;
  padding: 20px 48px; border-bottom: 1px solid var(--filet);
  background: var(--papier-vif); cursor: pointer; text-align: left; width: 100%;
  border-left: none; border-right: none; border-top: none;
}
.texte-ligne:hover { background: #fff; }
.texte-ligne .genre {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--gris);
}
.texte-ligne h3 {
  font-family: var(--serif); font-size: 19px; font-weight: 500; line-height: 1.3; margin-bottom: 4px;
}
.texte-ligne .resume { font-size: 13.5px; color: var(--encre-douce); max-width: 70ch; }
.texte-ligne .compte { font-family: var(--mono); font-size: 12px; color: var(--gris); white-space: nowrap; }

/* lecture d'un texte */
.lecture { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 0; }
.lecture .colonne { padding: 34px 44px 90px; border-right: 1px solid var(--filet); }
.lecture .marge { padding: 34px 28px 90px; background: var(--papier-creux); }

.entete-texte { padding-bottom: 22px; border-bottom: 2px solid var(--encre); margin-bottom: 30px; }
.entete-texte .genre { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--gris); }
.entete-texte h2 {
  font-family: var(--serif); font-size: 31px; font-weight: 500; line-height: 1.2;
  letter-spacing: -.015em; margin: 8px 0 12px; max-width: 30ch;
}
.entete-texte .ref { font-family: var(--mono); font-size: 12.5px; color: var(--gris); }
.entete-texte .resume { margin-top: 14px; font-size: 15px; line-height: 1.65; max-width: var(--mesure); color: var(--encre-douce); }

.article {
  display: grid; grid-template-columns: 70px 1fr; gap: 20px;
  padding: 22px 0; border-bottom: 1px solid var(--filet);
}
.article .no {
  font-family: var(--mono); font-size: 12px; color: var(--gris); padding-top: 4px;
  text-align: right; overflow-wrap: anywhere; hyphens: auto; line-height: 1.4;
}
/* repères non numérotés (« structure », « sanctions », « licence »…) */
.article .no .hors-num {
  display: inline-block; font-size: 8.5px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--gris-clair); border: 1px solid var(--filet); padding: 2px 4px; border-radius: 2px;
  hyphens: none; white-space: nowrap;
}
.article h4 {
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
  color: var(--gris); margin-bottom: 8px;
}
.article .prose {
  font-family: var(--serif); font-size: 17.5px; line-height: 1.66; max-width: var(--mesure);
  white-space: pre-wrap;
}
.article .prose.resume-seul { font-family: var(--sans); font-size: 15px; color: var(--encre-douce); }
.article .note {
  margin-top: 10px; font-size: 13px; color: var(--gris); border-left: 2px solid var(--filet-fort);
  padding-left: 11px; line-height: 1.55;
}
.article .barre {
  margin-top: 13px; display: flex; align-items: center; gap: 14px; font-size: 12.5px;
}
.article .barre button {
  background: none; border: none; cursor: pointer; color: var(--vert); font-size: 12.5px;
  text-decoration: underline; text-underline-offset: 3px; padding: 0;
}
.article .barre button:hover { color: #0a4e3a; }

/* marques de fiabilité */
.fiabilite { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; }
.fiabilite.haute   { color: var(--vert); }
.fiabilite.moyenne { color: var(--brique); }
.fiabilite.basse   { color: var(--rouge); }
.marque-verbatim {
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--filet-fort); padding: 1px 6px; color: var(--gris);
}

/* ══════════════ PROPOSITIONS ══════════════ */
.prop {
  background: var(--papier-vif); border: 1px solid var(--filet); padding: 16px 18px;
  margin-bottom: 12px;
}
.prop .tete { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.prop .nature {
  font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
  padding: 2px 7px; border: 1px solid;
}
.prop .nature.modifier  { color: var(--brique); border-color: var(--brique); }
.prop .nature.supprimer { color: var(--rouge); border-color: var(--rouge); }
.prop .nature.ajouter   { color: var(--vert); border-color: var(--vert); }
.prop .nature.clarifier { color: var(--encre-douce); border-color: var(--filet-fort); }
.prop h4 { font-family: var(--serif); font-size: 18px; font-weight: 500; line-height: 1.3; }
.prop .bloc { margin-top: 10px; }
.prop .bloc .etiquette { display: block; margin-bottom: 3px; }
.prop .bloc p { font-size: 14px; line-height: 1.6; white-space: pre-wrap; }
.prop .pied {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--filet);
  display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--gris);
}
.prop .voter { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.prop .voter button {
  background: none; border: 1px solid var(--filet-fort); cursor: pointer;
  padding: 2px 9px; border-radius: 2px; font-size: 13px; line-height: 1.4;
}
.prop .voter button:hover { border-color: var(--encre); }
.prop .voter button.on { background: var(--vert); color: #fff; border-color: var(--vert); }
.prop .voter button.on.bas { background: var(--rouge); border-color: var(--rouge); }
.prop .voter .score { font-family: var(--mono); font-weight: 600; min-width: 24px; text-align: center; }

.marge h3 {
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em;
  color: var(--gris); padding-bottom: 10px; border-bottom: 1px solid var(--filet-fort);
  margin-bottom: 16px;
}

/* ══════════════ MODALE ══════════════ */
.voile {
  position: fixed; inset: 0; background: rgba(18,21,26,.55);
  display: none; align-items: flex-start; justify-content: center;
  padding: 60px 20px; overflow-y: auto; z-index: 40;
}
.voile.ouvert { display: flex; }
.modale {
  background: var(--papier-vif); max-width: 700px; width: 100%;
  border: 1px solid var(--filet-fort); padding: 28px 32px 32px;
}
.modale .fermer {
  float: right; background: none; border: none; cursor: pointer; font-size: 22px;
  color: var(--gris); line-height: 1; padding: 0;
}
.modale .fermer:hover { color: var(--encre); }

/* ══════════════ ÉTATS ══════════════ */
.vide {
  padding: 60px 48px; text-align: center; color: var(--gris);
  font-family: var(--serif); font-size: 18px; font-style: italic;
}
.chargement { padding: 50px 48px; color: var(--gris-clair); font-size: 14px; }

/* ══════════════ PORTE D'ENTRÉE ══════════════ */
.porte {
  position: fixed; inset: 0; background: var(--encre); color: var(--papier);
  display: flex; align-items: center; justify-content: center; z-index: 60; padding: 24px;
}
.porte .boite { max-width: 430px; width: 100%; }
.porte .sigle {
  font-family: var(--serif); font-size: 62px; line-height: .9; color: var(--papier-vif);
  letter-spacing: -.03em;
}
.porte .sigle span { color: var(--vert); }
.porte h1 {
  font-family: var(--serif); font-size: 23px; font-weight: 400; line-height: 1.35;
  margin: 22px 0 10px; color: #e8e3d7;
}
.porte p { font-size: 14px; line-height: 1.62; color: #8b93a0; margin-bottom: 24px; }
.porte input {
  background: #1b2028; border: 1px solid #333b47; color: #fff;
  font-family: var(--mono); font-size: 17px; letter-spacing: .12em; text-transform: uppercase;
  padding: 13px 15px;
}
.porte input:focus { border-color: var(--vert); box-shadow: none; }
.porte input::placeholder { color: #4d5563; letter-spacing: .08em; }
.porte .bouton { width: 100%; margin-top: 12px; background: var(--vert); border-color: var(--vert); color: #fff; }
.porte .bouton:hover { background: #0c5a42; }
.porte .note { margin-top: 20px; font-size: 12.5px; color: #6d7583; line-height: 1.55; }
.porte .avis { margin-top: 14px; margin-bottom: 0; background: #2a1c1c; border-color: var(--rouge); color: #e8b4b4; }

/* ══════════════ RESPONSIVE ══════════════ */
@media (max-width: 1080px) {
  .lecture { grid-template-columns: 1fr; }
  .lecture .colonne { border-right: none; border-bottom: 1px solid var(--filet); }
}
/* ══════════════ BARRE MOBILE + TIROIR ══════════════ */
.barre-mobile { display: none; }
.voile-rail { display: none; }
.fermer-rail { display: none; }

@media (max-width: 860px) {
  :root { --rail: 0px; }

  /* ── La barre fixe : sigle, bouton, vue courante ── */
  .barre-mobile {
    display: flex; align-items: center; gap: 14px;
    position: fixed; inset: 0 0 auto 0; height: 54px; padding: 0 14px;
    background: var(--encre); color: var(--papier-vif);
    border-bottom: 1px solid #262c36;
    z-index: 40;
  }
  .barre-mobile .sigle-mobile {
    font-family: var(--serif); font-size: 21px; font-weight: 500; letter-spacing: -.02em;
    line-height: 1;
  }
  .barre-mobile .sigle-mobile span { color: var(--vert); }
  .barre-mobile .titre-vue {
    font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: #8b93a0;
    padding-left: 14px; border-left: 1px solid #333b47;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* ── Le bouton : trois filets qui deviennent une croix ── */
  .burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 40px; height: 40px; margin-left: -8px; padding: 0 9px;
    background: none; border: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .burger span {
    display: block; height: 1.5px; background: var(--papier-vif);
    transition: transform .22s ease, opacity .16s ease;
    transform-origin: center;
  }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  /* ── Le rail devient un tiroir : il garde sa forme complète ── */
  .rail {
    position: fixed; inset: 54px auto 0 0; width: min(85vw, 310px);
    flex-direction: column; padding: 20px 0 18px;
    overflow-y: auto; overscroll-behavior: contain;
    border-top: 1px solid #262c36;
    transform: translateX(-101%);
    transition: transform .26s cubic-bezier(.4, 0, .2, 1);
    z-index: 35;
  }
  .rail.ouvert { transform: none; }
  /* Le sigle est déjà dans la barre : ne pas le répéter dans le tiroir. */
  .cartouche { padding: 0 22px 18px; border-bottom: 1px solid #262c36; border-right: none; }
  .cartouche .sigle { display: none; }
  .cartouche .sous { display: block; margin-top: 0; max-width: 26ch; font-size: 12.5px; }
  /* La navigation prend le mou : la note et le pied restent en bas. */
  .rail nav { display: block; padding: 14px 12px; flex: 1 0 auto; }
  .rail .groupe { display: block; }
  .rail a.item {
    display: flex; white-space: normal;
    padding: 12px; border-left: 2px solid transparent; border-bottom: none;
    font-size: 15px;
  }
  .rail a.item.actif { border-left-color: var(--vert); border-bottom-color: transparent; }
  .promo-active { display: block; margin: 8px 12px 14px; }
  .rail .pied { display: block; }

  .fermer-rail {
    display: block; margin: 4px 12px 14px; padding: 9px 12px;
    background: none; border: 1px solid #333b47; border-radius: 3px;
    color: #8b93a0; font-family: var(--sans); font-size: 12px;
    text-transform: uppercase; letter-spacing: .12em; cursor: pointer;
  }
  .fermer-rail:hover { color: #fff; border-color: #59616e; }

  .voile-rail {
    display: block; position: fixed; inset: 54px 0 0 0;
    background: rgba(18, 21, 26, .5);
    opacity: 0; transition: opacity .26s ease; z-index: 30;
  }
  .voile-rail.ouvert { opacity: 1; }
  body.tiroir-ouvert { overflow: hidden; }

  /* ── Le corps passe sous la barre ── */
  .corps { margin-left: 0; padding-top: 54px; }

  /* ── Densité et cibles tactiles ── */
  .bandeau { padding: 26px 18px 0; }
  .contenu, .filtres { padding-left: 18px; padding-right: 18px; }
  /* Le corpus : une seule colonne. Le genre et le nombre d'articles
     passent sur une même ligne au-dessus du titre. */
  .texte-ligne {
    grid-template-columns: 1fr auto; gap: 4px 12px;
    padding: 16px 18px 18px; align-items: baseline;
  }
  /* 1re colonne = genre + numéro, mis en ligne ; le titre passe dessous. */
  .texte-ligne > div:first-child { grid-area: 1 / 1; display: flex; align-items: baseline; gap: 8px; }
  .texte-ligne > div:first-child .chiffre { margin-top: 0 !important; }
  .texte-ligne > .compte { grid-area: 1 / 2; justify-self: end; }
  .texte-ligne > div:nth-child(2) { grid-area: 2 / 1 / 3 / 3; }
  .texte-ligne h3 { font-size: 18px; margin-top: 3px; }
  .bandeau h1 { font-size: 26px; line-height: 1.15; }
  .bandeau .chapeau { font-size: 14.5px; }

  .compteurs { flex-wrap: wrap; gap: 0 4px; margin-top: 22px; }
  .compteur { padding: 12px 18px 12px 0; margin-right: 18px; }
  .compteur .n { font-size: 21px; }
  .compteur:last-child { border-right: none; margin-right: 0; }

  .filtres { padding-top: 12px; padding-bottom: 12px; }
  .filtres-rangee { gap: 7px; }
  .filtre { padding: 7px 13px; font-size: 13px; }
  .filtres .pousse { margin-left: 0; width: 100%; height: 0; }
  .filtres-sep { display: none; }
  .selecteur { width: 100%; }
  .segment { width: 100%; }
  .segment .filtre { flex: 1; text-align: center; padding: 10px 8px; }
  .filtres-etat { padding-top: 10px; }
  .selecteur select { flex: 1; min-width: 0; font-size: 16px; padding: 10px 32px 10px 11px; }
  .filtres-rangee .bouton.compact { width: 100%; text-align: center; padding: 10px 14px; }

  /* Le classement : le scrutin passe à gauche, en colonne étroite */
  .entree { grid-template-columns: 30px 54px 1fr; }
  .entree .rang { padding-left: 8px; font-size: 10.5px; }
  .entree .texte { padding: 15px 16px 17px 12px; }
  .entree h3 { font-size: 17px; line-height: 1.3; }
  .entree .extrait { font-size: 13.5px; }
  .entree .meta { font-size: 11px; flex-wrap: wrap; gap: 6px; }
  /* La flèche occupe toute la colonne : une cible atteignable au pouce. */
  .scrutin { padding: 15px 2px; }
  .scrutin .fleche { width: 100%; padding: 11px 0; font-size: 18px; }

  /* Lecture d'un texte : une seule colonne, la marge passe dessous */
  .lecture { grid-template-columns: 1fr; }
  .lecture .colonne { padding: 26px 18px 40px; border-right: none; border-bottom: 1px solid var(--filet); }
  .lecture .marge { padding: 24px 18px 60px; }
  .article { grid-template-columns: 46px 1fr; gap: 12px; }
  .article h4 { font-size: 15px; }
  .article .prose { font-size: 15.5px; }

  /* Formulaires : pas de zoom iOS sous 16 px */
  input[type="text"], textarea, select { font-size: 16px; padding: 11px 12px; }
  .feuille { padding: 22px 18px 26px; }
  .feuille h2 { font-size: 22px; }
  .bouton { padding: 11px 20px; }
  .champ { margin-bottom: 17px; }

  /* Administration */
  .filtres-admin { flex-direction: column; align-items: stretch; min-width: 0; }
  /* Sans min-width:0 l'élément flex se dimensionne sur son contenu
     et le bandeau est rogné au lieu de défiler. */
  .onglets-admin {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    min-width: 0; width: calc(100% + 36px);
    margin: 0 -18px; padding: 0 18px 2px; gap: 6px;
  }
  .onglets-admin::-webkit-scrollbar { display: none; }
  .onglets-admin .filtre { white-space: nowrap; flex: 0 0 auto; }
  .filtres-admin .pousse { display: none; }
  .filtres-admin #admin-quitter { width: 100%; text-align: center; }
  .admin-onglet { overflow-x: auto; }
  .article-admin summary { flex-wrap: wrap; gap: 8px 12px; padding: 12px; }
  .article-admin .ae-titre { flex: 1 1 100%; order: 3; }
  .ae-ligne { gap: 10px; }
  .ae-ligne .bouton.compact { flex: 1 1 auto; }
}

@media (max-width: 420px) {
  .bandeau h1 { font-size: 23px; }
  .barre-mobile .titre-vue { display: none; }
  /* Le rang disparaît : l'ordre et le score le disent déjà.
     Deux colonnes, sinon la grille se décale d'un cran. */
  .entree { grid-template-columns: 46px 1fr; }
  .entree .rang { display: none; }
  .entree .texte { padding: 14px 14px 16px 10px; }
  .compteur { padding-right: 14px; margin-right: 14px; }
  .article { grid-template-columns: 1fr; gap: 4px; }
  .article .no { display: flex; align-items: baseline; gap: 8px; }
}

/* Le tiroir ne s'anime pas pour qui n'en veut pas */
@media (prefers-reduced-motion: reduce) {
  .rail, .voile-rail, .burger span { transition: none; }
}

@media print {
  .rail, .filtres, .scrutin, .voile { display: none !important; }
  .corps { margin-left: 0; }
  .entree { grid-template-columns: 40px 1fr; break-inside: avoid; }
  body { background: #fff; }
}

/* ── Rail : note « registre ouvert » (remplace l'ancien bloc de promotion) ── */
.promo-active.ouvert { border-left-color: var(--vert); }
.promo-active.ouvert p {
  margin-top: 5px; font-size: 11.5px; line-height: 1.5; color: #8b93a0;
}

/* ── Jetons des nouvelles rubriques ── */
.jeton.tarifs   { border-color: #a89060; color: #7a6535; }
.jeton.langue   { border-color: #7f93b0; color: #4d6084; }
.jeton.materiel { border-color: #9aa07f; color: #66704a; }
.jeton.examen   { border-color: #b07f9a; color: #844d6b; }

/* ══════════════ ADMINISTRATION ══════════════ */
.grille-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 18px; }
.titre-bloc {
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em;
  color: var(--gris); padding-bottom: 9px; border-bottom: 1px solid var(--filet-fort); margin-bottom: 14px;
}
.deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }

/* barres de répartition */
.barres { display: flex; flex-direction: column; gap: 7px; }
.barre-ligne { display: grid; grid-template-columns: 130px 1fr 44px; gap: 12px; align-items: center; font-size: 13.5px; }
.barre-nom { color: var(--encre-douce); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barre-piste { height: 9px; background: var(--papier-creux); border-radius: 1px; overflow: hidden; }
.barre-jauge { display: block; height: 100%; background: var(--vert); }
.barre-n { text-align: right; font-size: 13px; color: var(--gris); }

/* tableaux d'administration */
.tableau-admin { width: 100%; border-collapse: collapse; background: var(--papier-vif); border: 1px solid var(--filet); }
.tableau-admin th {
  text-align: left; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
  color: var(--gris); padding: 10px 12px; border-bottom: 1px solid var(--filet-fort); white-space: nowrap;
}
.tableau-admin td { padding: 11px 12px; border-bottom: 1px solid var(--filet); font-size: 14px; vertical-align: middle; }
.tableau-admin tr:last-child td { border-bottom: none; }
.tableau-admin tr:hover td { background: #fff; }
.tableau-admin tr.masque td { opacity: .5; }
.tableau-admin td.anonyme { color: var(--gris-clair); font-style: italic; }
.tableau-admin td.actions { text-align: right; white-space: nowrap; }
.tableau-admin td.actions button {
  background: none; border: 1px solid var(--filet-fort); border-radius: 2px; cursor: pointer;
  font-size: 12px; padding: 3px 9px; margin-left: 5px; color: var(--encre-douce);
}
.tableau-admin td.actions button:hover { border-color: var(--encre); background: var(--papier-creux); }
.tableau-admin td.actions button.danger { color: var(--rouge); border-color: #e2c4c4; }
.tableau-admin td.actions button.danger:hover { background: #fbeeee; border-color: var(--rouge); }

.etat { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.etat.ouvert { color: var(--vert); }
.etat.ferme  { color: var(--gris-clair); }

@media (max-width: 1080px) { .deux-colonnes { grid-template-columns: 1fr; gap: 26px; } }
@media (max-width: 860px)  { .tableau-admin { display: block; overflow-x: auto; } }

/* ── Barre de filtres : rangées distinctes ──────────────────
   Les boutons de rubrique sont injectés dans un conteneur ;
   `display:contents` les fait devenir des enfants directs de la
   rangée flex, au lieu de former un seul bloc qui se replie mal. */
.filtres { flex-direction: column; align-items: stretch; gap: 10px; }
.filtres-rangee { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
#filtres-rubriques { display: contents; }

/* variante compacte, à la hauteur des filtres */
.bouton.compact { padding: 5px 14px; font-size: 13px; }

/* ── Administration : édition du corpus ── */
.article-admin { border: 1px solid var(--filet); background: var(--papier-vif); margin-bottom: 8px; }
.article-admin summary {
  display: flex; align-items: center; gap: 14px; padding: 11px 14px; cursor: pointer;
  font-size: 14px; list-style: none;
}
.article-admin summary::-webkit-details-marker { display: none; }
.article-admin summary:hover { background: #fff; }
.article-admin[open] summary { border-bottom: 1px solid var(--filet); background: var(--papier-creux); }
.article-admin summary .chiffre { color: var(--gris); min-width: 74px; }
.article-admin .ae-titre { flex: 1; font-weight: 500; }
.ae-corps { padding: 16px 14px; }
.ae-corps .etiquette { display: block; margin: 12px 0 5px; }
.ae-corps .etiquette:first-child { margin-top: 0; }
.ae-corps textarea { font-family: var(--serif); font-size: 15px; line-height: 1.6; }
.ae-ligne { display: flex; align-items: center; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.ae-ligne label { display: flex; align-items: center; gap: 7px; font-size: 13.5px; }
.ae-ligne select { width: auto; padding: 6px 30px 6px 10px; font-size: 13px; }
.ae-etat { font-size: 12.5px; }
.ae-etat.ok { color: var(--vert); }
.ae-etat.ko { color: var(--rouge); }