:root {
  --page: #FBF8EF;
  --carte: #FFFFFF;
  --encre: #23201B;
  --encre2: #4A443A;
  --encre3: #6B6457;
  --bord: #DDD6C4;
  --sep: #E5DECD;
  --vert: #2F6F50;
  --vert-clair: #E6F2EB;
  --or: #D2BA66;
  --or-clair: #FBF3D9;
  --orange: #F6961E;
  --orange-clair: #FFF1DE;
  --rouge: #C21A26;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--encre2);
  font: 400 15px/1.45 "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  display: flex;
  flex-direction: column;
}
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; }
kbd { font: 600 11px/1 "Segoe UI", sans-serif; padding: 2px 5px; border: 1px solid currentColor; border-radius: 4px; opacity: .7; margin-left: 4px; }

/* Haut de page : la marque, l'état de l'atelier, qui commente */
.haut { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 18px; border-bottom: 1px solid var(--sep); background: var(--carte); flex-wrap: wrap; }
.marque { display: flex; align-items: center; gap: 10px; }
.marque img { border-radius: 8px; }
.marque strong { font: 600 20px "Crimson Pro", Georgia, serif; color: var(--encre); }
.marque span { color: var(--encre3); }
.haut-droite { display: flex; align-items: center; justify-content: flex-end; gap: 6px 16px; flex-wrap: wrap; min-width: 0; }
.serveur { font-size: 13.5px; color: var(--vert); }
.serveur.panne { color: var(--rouge); font-weight: 600; }
.qui { display: flex; align-items: center; gap: 10px; font-size: 13.5px; white-space: nowrap; }
.qui strong { color: var(--encre); }
.admin { background: var(--rouge); color: #fff; border-radius: 999px; padding: 2px 10px; font-size: 12.5px; font-weight: 700; }
.lien-discret { border: 0; background: none; padding: 0; font-size: inherit; color: var(--vert); text-decoration: underline; text-underline-offset: 2px; }
.admin .lien-discret { color: #fff; font-weight: 400; margin-left: 4px; }

/* Bandeau « nouvelle version prête » (quand un commentaire est en cours) */
.maj { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 9; display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 24px); padding: 7px 8px 7px 16px; border-radius: 999px; background: var(--encre); color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 8px 24px rgba(35, 32, 27, .28); white-space: nowrap; }
.maj button { border: 0; border-radius: 999px; padding: 5px 14px; background: var(--or); color: var(--encre); font-weight: 700; }
.maj button.danger { background: var(--rouge); color: #fff; }

.atelier { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(210px, 290px) minmax(350px, 1fr) minmax(320px, 410px); }
.atelier > * { min-height: 0; overflow: auto; }

/* Pages */
.pages { border-right: 1px solid var(--sep); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.bascule { display: none; }
.pages-corps { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.mode { display: flex; gap: 6px; }
.mode button, .filtres button, .actions button, .nav-pages button, .f-boutons button, .f-niveau button {
  border: 1px solid var(--bord); background: var(--carte); border-radius: 999px; padding: 6px 12px; font-size: 13.5px; font-weight: 600; white-space: nowrap;
}
.mode button { padding: 6px 10px; font-size: 13px; }
.mode button[aria-pressed="true"], .filtres button[aria-pressed="true"] { background: var(--vert); border-color: var(--vert); color: #fff; }
.mode .icone { margin-left: auto; padding: 6px 10px; }
#cherche { width: 100%; border: 1px solid var(--bord); border-radius: 10px; padding: 8px 10px; font: inherit; background: var(--carte); }
#liste-pages { overflow: auto; flex: 1; }
.groupe { margin: 12px 0 4px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--encre3); font-weight: 700; }
.page-item { display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left; border: 0; background: none; padding: 6px 8px; border-radius: 8px; }
.page-item:hover { background: var(--vert-clair); }
.page-item[aria-current="page"] { background: var(--vert); color: #fff; }
.page-item .lab { font-weight: 700; white-space: nowrap; font-size: 13px; }
.page-item .tit { flex: 1; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-item .nb { background: var(--orange); color: #fff; border-radius: 999px; font-size: 11px; font-weight: 700; padding: 1px 7px; }

/* Scène */
.scene { display: flex; flex-direction: column; align-items: center; padding: 12px 16px; gap: 10px; overflow: hidden; }
.nav-pages { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 560px; }
.titre-page { flex: 1; min-width: 0; text-align: center; font: 600 17px "Crimson Pro", Georgia, serif; color: var(--encre); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-pages button:disabled, .actions button:disabled { opacity: .4; }
.cadre { flex: none; position: relative; }
.telephone { position: absolute; top: 0; left: 0; width: 414px; height: 868px; padding: 12px; background: #1E1B17; border-radius: 46px; box-shadow: 0 18px 40px rgba(35, 32, 27, .25); transform-origin: top left; }
.telephone iframe { width: 390px; height: 844px; border: 0; border-radius: 34px; background: var(--page); display: block; }
.telephone.commente { box-shadow: 0 0 0 4px var(--orange), 0 18px 40px rgba(35, 32, 27, .25); }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.actions .principal[aria-pressed="true"] { background: var(--orange) !important; border-color: var(--orange) !important; color: #fff; }
.principal { background: var(--vert) !important; border-color: var(--vert) !important; color: #fff; }
.aide { margin: 0; font-size: 13.5px; color: var(--encre3); text-align: center; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Commentaires */
.commentaires { border-left: 1px solid var(--sep); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.nouveau { background: var(--carte); border: 2px solid var(--orange); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 8px; scroll-margin-top: 12px; }
.f-tete { display: flex; flex-direction: column; gap: 2px; }
.f-tete strong { color: var(--encre); }
.f-tete span { font-size: 12.5px; color: var(--encre3); }
.apercu { border: 1px solid var(--bord); border-radius: 10px; padding: 0; background: var(--page); overflow: hidden; max-height: 260px; }
.apercu img { width: 100%; display: block; }
.f-element { margin: 0; font-size: 13px; color: var(--encre2); }
.f-niveau { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 12.5px; color: var(--encre3); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { border: 1px solid var(--bord); background: var(--page); border-radius: 999px; padding: 4px 11px; font-size: 13px; }
.chips button[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: #fff; }
.voix { display: flex; align-items: center; gap: 10px; }
.parler { flex: none; white-space: nowrap; border: 0; background: var(--vert); color: #fff; border-radius: 999px; padding: 9px 16px; font-weight: 700; }
.parler.enreg { background: var(--rouge); animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(194, 26, 38, .2); } }
.voix-etat { font-size: 12.5px; color: var(--encre3); }
.voix-etat.alerte { color: var(--rouge); }
.f-audio { display: flex; align-items: center; gap: 8px; }
.f-audio audio { flex: 1; min-width: 0; height: 34px; }
.lien { border: 0; background: none; color: var(--rouge); font-size: 12.5px; text-decoration: underline; padding: 0; }
#f-texte { width: 100%; border: 1px solid var(--bord); border-radius: 10px; padding: 8px 10px; font: inherit; resize: vertical; background: var(--page); }
.f-boutons { display: flex; justify-content: flex-end; gap: 8px; }

.filtres { display: flex; flex-wrap: wrap; gap: 5px; }
.filtres button { padding: 5px 10px; font-size: 13px; }
.filtres span { font-weight: 400; opacity: .85; }
.liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.carte { background: var(--carte); border: 1px solid var(--bord); border-radius: 12px; padding: 10px; display: grid; grid-template-columns: 74px 1fr; gap: 10px; }
.carte.traite { background: #FAFCFA; border-color: #CFE3D6; }
.carte.sans-photo { grid-template-columns: 1fr; }
.carte.mien { box-shadow: inset 3px 0 0 var(--orange); }
.vignette { position: relative; border: 1px solid var(--sep); border-radius: 8px; padding: 0; overflow: hidden; height: 150px; background: var(--page); }
.vignette img { width: 100%; display: block; }
.vignette .avant { position: absolute; top: 4px; left: 4px; padding: 1px 6px; border-radius: 5px; background: rgba(35, 32, 27, .8); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.corps { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ligne1 { display: flex; gap: 6px; align-items: center; font-size: 12.5px; flex-wrap: wrap; }
.num { font-weight: 700; color: var(--encre); }
.type { background: var(--orange-clair); color: #8A4B00; border-radius: 6px; padding: 1px 7px; font-weight: 700; }
.statut { border-radius: 6px; padding: 1px 7px; background: var(--sep); }
.statut.traite { background: var(--vert-clair); color: var(--vert); font-weight: 700; }
.par { margin: 0; font-size: 12px; color: var(--encre3); }
.lien-page { border: 0; background: none; padding: 0; text-align: left; color: var(--vert); font-weight: 600; font-size: 13px; text-decoration: underline; text-underline-offset: 2px; }
.texte { margin: 0; color: var(--encre); white-space: pre-wrap; overflow-wrap: anywhere; }
.sur { margin: 0; font-size: 12px; color: var(--encre3); overflow-wrap: anywhere; }
.carte audio { width: 100%; height: 32px; }
.reponse { margin: 2px 0 0; padding: 6px 8px; border-left: 3px solid var(--or); background: var(--or-clair); border-radius: 6px; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.corrige { margin: 2px 0 0; font-size: 12.5px; font-weight: 600; color: var(--vert); }
.voir { align-self: flex-start; border: 1px solid var(--vert); background: var(--vert-clair); color: var(--vert); border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 700; }
.voir:hover { background: var(--vert); color: #fff; }
.admin-zone { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; padding: 8px; border: 1px dashed var(--or); border-radius: 8px; background: #FFFCF3; }
.admin-zone label { font-size: 12px; font-weight: 700; color: var(--encre3); }
.admin-zone textarea { width: 100%; border: 1px solid var(--bord); border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 13.5px; resize: vertical; background: #fff; }
.admin-boutons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.admin-boutons button { border: 1px solid var(--bord); background: var(--carte); border-radius: 999px; padding: 4px 11px; font-size: 12.5px; font-weight: 700; }
.admin-boutons button.ok { background: var(--vert); border-color: var(--vert); color: #fff; }
.outils { display: flex; flex-wrap: wrap; gap: 12px; }
.outils button { border: 0; background: none; padding: 0; font-size: 12.5px; color: var(--encre3); text-decoration: underline; }
.outils button.danger { color: var(--rouge); font-weight: 700; }
.edition { display: flex; flex-direction: column; gap: 6px; }
.edition textarea { width: 100%; border: 1px solid var(--bord); border-radius: 8px; padding: 6px 8px; font: inherit; }
.vide { color: var(--encre3); text-align: center; }

/* Fenêtre d'accueil (premier passage, ou pour changer de prénom) */
.accueil { position: fixed; inset: 0; z-index: 12; display: flex; padding: 16px; overflow: auto; background: rgba(20, 18, 15, .55); }
.accueil-boite { margin: auto; width: 100%; max-width: 520px; display: flex; flex-direction: column; gap: 10px; padding: 22px 24px; border-radius: 18px; background: var(--carte); box-shadow: 0 24px 60px rgba(20, 18, 15, .35); }
.accueil h1 { margin: 0 0 2px; font: 600 24px/1.2 "Crimson Pro", Georgia, serif; color: var(--encre); }
.accueil p { margin: 0; }
.accueil ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 3px; }
.accueil-sous { font-weight: 700; color: var(--encre); }
.accueil label { margin-top: 6px; font-weight: 700; color: var(--encre); }
.accueil label span { font-weight: 400; color: var(--encre3); }
.accueil input { width: 100%; border: 1px solid var(--bord); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 16px; background: var(--page); }
.accueil-raison { padding: 6px 10px; border-radius: 8px; background: var(--orange-clair); color: #8A4B00; font-weight: 600; }
.accueil-erreur { color: var(--rouge); font-size: 13px; }
.accueil-note { font-size: 13px; color: var(--encre3); }
.accueil-boutons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.accueil-boutons button { border: 1px solid var(--bord); background: var(--carte); border-radius: 999px; padding: 8px 16px; font-weight: 700; }
.accueil-boutons button:disabled { opacity: .6; }
.etape, .nom-libre { display: flex; flex-direction: column; gap: 6px; }
.accueil-label { margin-top: 6px !important; font-weight: 700; color: var(--encre); }
.noms { display: flex; flex-wrap: wrap; gap: 6px; max-height: 230px; overflow: auto; padding: 2px; }
.noms button { border: 1px solid var(--bord); background: var(--page); border-radius: 999px; padding: 6px 13px; font-weight: 600; }
.noms button:hover { border-color: var(--vert); }
.noms button[aria-checked="true"] { background: var(--vert); border-color: var(--vert); color: #fff; }
.hors-liste { margin: 2px 0 0 !important; font-size: 13px; color: var(--encre3); }

/* « Ta partie » (en haut des pages) */
.ma-partie { background: var(--or-clair); border: 1px solid var(--or); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.mp-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.mp-titre { font: 600 17px "Crimson Pro", Georgia, serif; color: var(--encre); }
.mp-vague { font-size: 12px; font-weight: 700; color: #7A5C00; }
.mp-consigne { margin: 0; font-size: 13px; font-weight: 600; color: #8A4B00; }
.mp-partie { background: var(--carte); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; }
.mp-partie.finie { background: var(--vert-clair); }
.mp-nom { margin: 0; font-weight: 700; font-size: 13.5px; color: var(--encre); }
.mp-desc { margin: 0; font-size: 13px; }
.mp-note { margin: 4px 0 2px; padding: 6px 8px; border-radius: 8px; background: var(--orange-clair); color: #8A4B00; font-size: 12.5px; font-weight: 600; line-height: 1.4; }
.mp-etat { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--vert); }
.mp-boutons { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 4px; }
.mp-boutons button { border: 1px solid var(--bord); background: var(--carte); border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 600; }
.mp-boutons .lien-discret { border: 0; background: none; padding: 0; font-weight: 400; }

/* Le sommaire par parties de la campagne : un bandeau par partie, qui reste en haut de la liste
   pendant qu'on parcourt ses pages, avec ses testeurs bien visibles. */
.groupe-partie { position: sticky; top: 0; z-index: 1; margin: 14px 0 6px; padding: 8px 10px; border: 1px solid #CFE3D6; border-radius: 10px; background: #EEF5F0; box-shadow: 0 3px 0 var(--page); }
.section-pages:first-child .groupe-partie { margin-top: 2px; }
.groupe-partie.mienne { border-color: var(--or); background: var(--or-clair); }
.gp-ligne { display: flex; align-items: baseline; gap: 8px; }
.gp-nom { font: 700 16px "Crimson Pro", Georgia, serif; color: var(--encre); }
.gp-pages { font-size: 12px; font-weight: 600; color: var(--encre3); }
.gp-moi { margin-left: auto; align-self: center; padding: 1px 9px; border-radius: 999px; background: var(--or); color: var(--encre); font-size: 11px; font-weight: 700; }
.gp-titre { margin: 2px 0 0; font-size: 12.5px; line-height: 1.35; color: var(--encre2); }
.gp-noms { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.gp-testeur { padding: 2px 10px; border: 1px solid var(--vert); border-radius: 999px; background: var(--carte); color: var(--vert); font-size: 12.5px; font-weight: 700; }
.gp-testeur.fini { background: var(--vert); color: #fff; }
.gp-aucun { font-size: 12px; font-weight: 600; color: #8A4B00; }
/* La consigne d'une partie (écrite par l'administrateur) : trois lignes au plus dans le bandeau, en entier au survol.
   La marge du bas est une bordure : la quatrième ligne, coupée, ne dépasse pas dans un rembourrage. */
.gp-consigne { margin: 6px 0 0; padding: 5px 8px 0; border-bottom: 5px solid var(--orange-clair); border-radius: 7px; background: var(--orange-clair); color: #8A4B00; font-size: 12px; font-weight: 600; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gp-modifier { margin-left: auto; align-self: center; padding: 1px 9px; border: 1px solid var(--bord); border-radius: 999px; background: var(--carte); color: var(--encre2); font-size: 11px; font-weight: 700; }
.gp-moi + .gp-modifier { margin-left: 0; }
.gp-editeur { margin: -2px 0 10px; padding: 10px; border: 1px solid var(--or); border-radius: 10px; background: var(--carte); }
.gp-editeur textarea { display: block; width: 100%; box-sizing: border-box; padding: 7px 8px; border: 1px solid var(--bord); border-radius: 8px; font: inherit; font-size: 13px; line-height: 1.4; resize: vertical; }
.gp-aide { margin: 6px 0 8px; font-size: 11.5px; line-height: 1.35; color: var(--encre3); }
.gp-boutons { display: flex; justify-content: flex-end; gap: 8px; }

/* Les testeurs et leurs parties (administrateur) */
.campagne { position: fixed; inset: 0; z-index: 12; display: flex; padding: 16px; overflow: auto; background: rgba(20, 18, 15, .55); }
.campagne-boite { margin: auto; width: 100%; max-width: 1000px; display: flex; flex-direction: column; gap: 10px; padding: 20px 22px; border-radius: 18px; background: var(--carte); box-shadow: 0 24px 60px rgba(20, 18, 15, .35); }
.campagne-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.campagne h2 { margin: 0; font: 600 23px/1.2 "Crimson Pro", Georgia, serif; color: var(--encre); }
.campagne-tete button, .campagne-vague button, .campagne-ajout button { border: 1px solid var(--bord); background: var(--carte); border-radius: 999px; padding: 6px 14px; font-weight: 700; }
.campagne-vague { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-weight: 700; color: var(--encre); }
.campagne-vague button.danger, .ct-retirer.danger { background: var(--rouge); border-color: var(--rouge); color: #fff; text-decoration: none; }
.campagne-aide { margin: 0; font-size: 13px; color: var(--encre3); }
.campagne-libres { margin: 0; font-size: 13px; font-weight: 600; color: var(--vert); }
.campagne-libres.alerte { color: #8A4B00; }
.campagne-table { display: flex; flex-direction: column; gap: 4px; }
.ct-ligne { display: grid; grid-template-columns: 170px 1fr auto; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; background: var(--page); }
.ct-nom { display: flex; flex-direction: column; min-width: 0; }
.ct-n { font-weight: 700; color: var(--encre); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-r { font-size: 12px; color: var(--encre3); }
.ct-parties { display: flex; flex-wrap: wrap; gap: 4px; }
.ct-parties button { min-width: 34px; border: 1px solid var(--bord); background: var(--carte); border-radius: 8px; padding: 3px 6px; font-size: 12.5px; font-weight: 700; color: var(--encre3); }
.ct-parties button[aria-pressed="true"] { background: var(--vert); border-color: var(--vert); color: #fff; }
.ct-parties button.fini { box-shadow: inset 0 0 0 2px var(--or); }
.ct-retirer { border: 0; background: none; color: var(--rouge); font-size: 12.5px; text-decoration: underline; padding: 4px 8px; border-radius: 999px; }
.campagne-ajout { display: flex; gap: 8px; }
.campagne-ajout input { flex: 1; min-width: 0; border: 1px solid var(--bord); border-radius: 10px; padding: 8px 10px; font: inherit; background: var(--page); }

/* Sur un téléphone ou une tablette : l'atelier ne s'ouvre pas */
.ordinateur { position: fixed; inset: 0; z-index: 20; display: flex; padding: 24px; overflow: auto; background: var(--page); }
.ordinateur-boite { margin: auto; max-width: 460px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.ordinateur img { border-radius: 14px; }
.ordinateur h1 { margin: 0; font: 600 26px/1.2 "Crimson Pro", Georgia, serif; color: var(--encre); }
.ordinateur p { margin: 0; }
body.bloque > :not(.ordinateur) { display: none !important; }

.loupe { position: fixed; inset: 0; background: rgba(20, 18, 15, .82); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; z-index: 10; }
.loupe-titre { margin: 0; padding: 3px 12px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; font-weight: 700; font-size: 13.5px; }
.loupe img { max-height: calc(100vh - 120px); max-width: 92vw; border-radius: 12px; background: var(--page); }
.loupe-barre { display: flex; gap: 10px; }
.loupe-barre button { border: 0; border-radius: 999px; padding: 7px 14px; background: var(--carte); font-weight: 600; }
.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); max-width: calc(100vw - 32px); background: var(--encre); color: #fff; padding: 9px 16px; border-radius: 999px; font-weight: 600; text-align: center; z-index: 11; }

/* Petit écran (téléphone, tablette en hauteur) : une seule colonne, le téléphone puis les
   commentaires ; la liste des pages se replie. */
@media (max-width: 899px) {
  html, body { height: auto; }
  body { display: block; }
  .haut { padding: 8px 16px; }
  .haut-droite { justify-content: flex-start; }
  .atelier { display: flex; flex-direction: column; }
  .atelier > * { overflow: visible; }
  .pages { border-right: 0; border-bottom: 1px solid var(--sep); padding: 8px 16px; }
  .bascule { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 12px; border: 1px solid var(--bord); border-radius: 10px; background: var(--carte); font-weight: 700; color: var(--encre); }
  .bascule::after { content: "▾"; }
  .bascule[aria-expanded="true"]::after { content: "▴"; }
  .pages.repliee .pages-corps { display: none; }
  #liste-pages { flex: none; max-height: 55vh; }
  .scene { padding: 10px 16px; }
  /* les boutons restent à portée de pouce tant qu'on voit le téléphone */
  .actions { position: sticky; bottom: 0; z-index: 4; width: calc(100% + 32px); margin: 0 -16px; padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px)); background: rgba(251, 248, 239, .96); border-top: 1px solid var(--sep); }
  .aide { white-space: normal; }
  .commentaires { border-left: 0; border-top: 1px solid var(--sep); padding: 12px 16px 72px; }
  .maj, .toast { white-space: normal; border-radius: 16px; }
  .maj { top: 8px; width: max-content; }
  #cherche, #f-texte, .edition textarea, .admin-zone textarea { font-size: 16px; }
  .ct-ligne { grid-template-columns: 1fr; }
}

/* Écran tactile : pas de clavier, on n'en parle pas. */
@media (pointer: coarse) {
  kbd, .clavier { display: none; }
}