/* Maison Manga — la feuille du jeu.
 *
 * DIRECTION ARTISTIQUE (maquette du 29 juillet 2026) : on entre dans le bureau d'une maison
 * d'édition, pas dans un tableau de gestion. Fond charbon, lumière rasante, une photo de
 * bureau en périphérie, et au milieu un dossier de papier crème qu'on ouvre.
 *
 * L'équilibre visé : 60 % interface claire, 25 % récit, 15 % décor. Le décor reste donc en
 * périphérie et ne passe JAMAIS devant une information. Règle de relecture : masquer toutes
 * les images doit laisser le jeu entièrement jouable et lisible.
 *
 * Ce que ça implique, et qui est assumé :
 *   - le jeu a SES tokens : les --kr-* sont redéfinis sur .lm-page, rien n'est inventé, tout
 *     est dérivé. Le sombre reste le défaut, y compris sans attribut de thème.
 *   - depuis le 30 juillet 2026, le bureau se joue AUSSI DE JOUR (demande de Guillaume). La
 *     bascule du gabarit est donc rendue. Le papier du dossier, lui, ne change jamais : c'est
 *     l'ancre de la direction artistique, et il se lit sur une table sombre comme sur une
 *     table claire. Seule la scène autour de lui a deux états, décrits par les tokens --lm-*.
 *   - l'annotation manuscrite passe par la pile de polices du système. Aucun webfont n'est
 *     ajouté pour un post-it : là où rien de cursif n'existe, l'italique et l'inclinaison
 *     suffisent à dire « écrit à la main ».
 *
 * Tout est scopé .lm-*, sauf les quelques surcharges du gabarit commun, en tête.
 */

/* ---------- le monde du jeu ---------- */
.lm-page {
  --kr-bg: #14141b;
  --kr-surface: #1c1c26;
  --kr-surface-2: #23232f;
  --kr-border: #32323f;
  --kr-text: #f3f1ec;
  --kr-text-2: #c6c3bc;
  --kr-text-3: #8d8a85;
  --kr-link: #a78bfa;
  --kr-score-low: #e8746e;
  --kr-score-good: #6ec08a;
  --kr-shadow: 0 1px 2px rgba(0,0,0,.4), 0 18px 40px rgba(0,0,0,.45);
  /* le papier du dossier : une seule teinte, déclinée */
  --lm-papier: #f2ece0;
  --lm-papier-2: #e6dece;
  --lm-encre: #2b2620;
  --lm-encre-2: #5d564c;
  --lm-encre-3: #8a8175;
  /* les quatre états, partout les mêmes : rien ne se dit par la seule couleur, chacun a
     toujours un mot à côté */
  --lm-bon: #6ec08a;
  --lm-vigilance: #d9a441;
  --lm-danger: #e8746e;

  /* ---- LA SCÈNE, EN DEUX ÉTATS ----
     Le bureau se joue de nuit à la lampe, ou de jour à la fenêtre. Le PAPIER, lui, ne change
     jamais : c'est l'ancre de la direction artistique, et un dossier crème se lit aussi bien
     sur une table sombre que sur une table claire. Tout ce qui suit décrit donc la scène
     autour du papier, et rien d'autre. */
  --lm-carte: rgba(28,28,38,.86);        /* une carte de la scène : série, choix, fiche */
  --lm-carte-fort: rgba(38,38,50,.95);   /* la même, au survol */
  --lm-trait-fort: #47475a;              /* sa bordure au survol */
  --lm-creux: #0f0f16;                   /* le fond d'une vignette, derrière un portrait */
  --lm-voile: rgba(255,255,255,.04);     /* le survol d'un onglet */
  --lm-voile-fort: rgba(255,255,255,.07);
  --lm-bande: 14,14,20;                  /* composantes de la barre de décisions */
  --lm-glose-fond: #1b1b25;
  --lm-glose-trait: #3a3a4a;
  --lm-barre: rgba(16,16,22,.86);
  --lm-pied: #101016;
  --lm-decor: .85;                       /* la présence de la photo de bureau */
  background: radial-gradient(120% 90% at 50% -10%, #26262f 0%, #14141b 55%, #0e0e14 100%);
  min-height: 100vh;
}

/* ---------- LE MÊME BUREAU, DE JOUR ----------
   Demandé le 30 juillet. La photo de bureau est prise à la lampe, de nuit : la garder sous
   une interface claire donnerait un trou noir au milieu de la page. De jour, on voit donc la
   TABLE plutôt que la scène éclairée — un bois chaud, très lavé — et le papier du dossier
   reste exactement le même, ce qui garde les deux thèmes cohérents.
   Le mode sombre reste le défaut, y compris sans attribut de thème : c'est l'identité du jeu,
   et l'index de la page force l'attribut pour que la bascule ne parte pas à contre-sens. */
html[data-theme="light"] .lm-page {
  --kr-bg: #efece5;
  --kr-surface: #fbf9f5;
  --kr-surface-2: #f2eee6;
  --kr-border: #d8d2c6;
  --kr-text: #23201b;
  --kr-text-2: #4d473e;
  --kr-text-3: #736c60;
  --kr-link: #5b2ec4;
  --kr-score-low: #b23b32;
  --kr-score-good: #2f7a52;
  --kr-shadow: 0 1px 2px rgba(60,50,35,.10), 0 14px 34px rgba(60,50,35,.14);
  --lm-bon: #2f7a52;
  --lm-vigilance: #9a6b12;
  --lm-danger: #b23b32;
  --lm-carte: rgba(255,253,249,.88);
  --lm-carte-fort: #fffefb;
  --lm-trait-fort: #c0b7a6;
  --lm-creux: #e7e1d5;
  --lm-voile: rgba(90,74,50,.06);
  --lm-voile-fort: rgba(90,74,50,.10);
  /* ⚠️ La bande de décisions est COLLÉE EN BAS de l'écran, et le fond de page est un dégradé
     radial qui s'assombrit vers le bas (#e4dfd4 en périphérie). Peinte avec la teinte du
     MILIEU du dégradé, elle formait une dalle plus claire que ce qu'il y a derrière : on
     voyait un rectangle blanchâtre posé sur la page. Elle prend donc la teinte du BAS. */
  --lm-bande: 228,223,212;
  --lm-glose-fond: #fbf9f5;
  --lm-glose-trait: #cdc5b6;
  --lm-barre: rgba(247,244,238,.88);
  --lm-pied: #e7e2d8;
  --lm-decor: 0;                          /* la photo de nuit disparaît */
  background:
    radial-gradient(120% 90% at 50% -10%, #f7f4ee 0%, #efece5 52%, #e4dfd4 100%);
}
/* De jour, la table est claire et le papier l'est aussi : sans un filet, le dossier flotte
   sans bord. C'est la seule chose que le papier emprunte au thème. */
/* De jour, le fond de scène et le papier ont presque la même teinte : la bande de décisions
   ne se détachait plus du tout et le texte du dossier transparaissait au travers. Elle devient
   franche dès le premier pixel, et un filet dit où elle commence. */
html[data-theme="light"] .lm-decisions {
  /* même teinte que le bas du dégradé de page : la bande doit disparaître dans le fond, on ne
     doit voir que les cartes posées dessus. Le filet reste, discret, pour dire où elle commence. */
  /* ⚠️ En clair, la bande et le papier du dossier sont deux crèmes voisines : opaque et sans
     relief, la frontière disparaît et les cartes ont l'air imprimées sur la même feuille.
     Il faut donc un décroché franc, filet plus une ombre portée vers le haut : la bande doit
     se lire comme un plan posé DEVANT le papier, pas comme la suite du papier. */
  background: rgb(228,223,212);
  box-shadow: 0 -1px 0 rgba(0,0,0,.17), 0 -12px 20px -12px rgba(0,0,0,.22);
}
html[data-theme="light"] .lm-plateau--seul .lm-decisions { box-shadow: none; }
/* reposée dans le flux (bande trop haute pour l'écran) : plus de bande du tout, donc plus de
   teinte de bande à peindre par-dessus le fond de page */
html[data-theme="light"] .lm-decisions.est-posee { background: none; }

/* Les pastilles d'état étaient calées sur un fond sombre : en clair, un vert pâle sur un
   papier pâle ne se lit plus. Chaque état reprend un contraste franc. */
html[data-theme="light"] .lm-etat--stable     { color: #1f6b41; background: rgba(47,122,82,.14); }
html[data-theme="light"] .lm-etat--surveiller { color: #6f4708; background: rgba(154,107,18,.16); }
html[data-theme="light"] .lm-etat--menacee    { color: #a33228; background: rgba(178,59,50,.14); }
html[data-theme="light"] .lm-etat--danger     { color: #8d2019; background: rgba(178,59,50,.24); }
html[data-theme="light"] .lm-etat--arretee    { color: var(--kr-text-3); background: rgba(90,74,50,.10); }
html[data-theme="light"] .lm-etat--terminee   { color: #1f5b8b; background: rgba(31,91,139,.14); }

html[data-theme="light"] .lm-dossier {
  border: 1px solid #ddd5c5;
  box-shadow: 0 2px 0 rgba(90,74,50,.06), 0 18px 40px -16px rgba(90,74,50,.28),
              inset 0 1px 0 rgba(255,255,255,.7);
}
/* Le bureau, en photo, tenu en périphérie : la lampe et les planches encadrent la scène,
   le centre reste noir pour que le dossier s'y détache. */
.lm-page::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(64% 52% at 50% 42%, #0e0e14 30%, rgba(14,14,20,.72) 62%, transparent 100%),
    url("img/bureau.webp");
  background-size: cover, cover;
  background-position: center, center;
  opacity: var(--lm-decor);
}
/* et par-dessus, le vignettage et la lumière de la lampe */
.lm-page::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(80% 55% at 50% 0%, rgba(255,246,224,.05), transparent 70%),
    radial-gradient(130% 100% at 50% 50%, transparent 42%, rgba(0,0,0,.62) 100%);
}
/* De jour il n'y a pas de lampe : le vignettage sombre deviendrait une salissure aux quatre
   coins. On lui substitue une lumière de fenêtre, très légère. */
html[data-theme="light"] .lm-page::after {
  background:
    radial-gradient(70% 50% at 50% -5%, rgba(255,255,255,.55), transparent 72%),
    radial-gradient(130% 100% at 50% 50%, transparent 55%, rgba(120,100,70,.10) 100%);
}
.lm-page .kj-main {
  position: relative; z-index: 1; padding: 18px 16px 32px;
  /* ⚠️ GARDE GÉNÉRALE : rien de ce qui est posé en absolu (infobulle du glossaire, tampon,
     bande de jauges en pleine largeur) ne doit pouvoir faire glisser la page à l'horizontale.
     `clip` plutôt que `hidden` : on ne crée pas de conteneur de défilement, et le décor en
     position fixe n'est pas emprisonné. */
  overflow-x: clip;
}
/* le panneau du gabarit s'efface : la scène EST le fond */
.lm-page .kj-aire {
  max-width: 1360px; background: transparent; border: 0; box-shadow: none; padding: 0;
}
.lm-page .kj-entete { display: none; }        /* l'en-tête du jeu est refait ci-dessous */
.lm-page .kj-barre { background: var(--lm-barre); border-bottom-color: var(--kr-border); }
/* la bascule de thème est de retour : le bureau se joue de nuit ou de jour */
/* le pied du magazine coupait l'immersion : il reste, en sourdine */
.lm-page footer.kr-footer, .lm-page .kr-footer { background: var(--lm-pied); color: var(--kr-text-3); }
.lm-page .kr-footer a { color: var(--kr-text-3); }
.lm-page .kr-footer a:hover { color: var(--kr-text-2); }
/* ⚠️ KRINEIN.COM est écrit en dur en blanc dans krinein-ui.css, parce que le pied du magazine
   est un aplat violet. Ici le pied prend `--lm-pied`, crème en mode jour : la marque devenait
   du blanc sur du crème, donc invisible. Les liens et les icônes, eux, suivaient déjà par la
   règle du dessus, ce qui rendait le trou d'autant plus visible. Un cran plus appuyé que la
   nav : c'est la marque, elle se lit, mais le pied reste en sourdine. */
.lm-page .kr-footer__brand { color: var(--kr-text-2); }

/* ---------- le bandeau de la maison ---------- */
.lm-entete {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 14px 24px; margin-bottom: 16px;
}
/* ---------- LE MENU DE LA MAISON ----------
   « Recommencer la partie » était en bas de page, sous les cartes : l'endroit où l'on arrive
   après avoir tout lu, donc le pire pour une action qui efface tout, et le plus mauvais pour
   la retrouver quand on la cherche. Il passe en haut à droite, là où on va chercher ce genre
   de chose. Demandé par Guillaume. */
/* ⚠️ Il vit dans `.kj-barre`, la barre PARTAGÉE par tous les jeux : il doit donc se fondre
   dans son voisinage plutôt que d'imposer le style du dossier. Mêmes dimensions et même
   silhouette que la bascule jour/nuit d'à côté, sans quoi on verrait deux boutons de deux
   familles collés l'un à l'autre. */
.lm-menu { position: relative; flex: 0 0 auto; align-self: center; }
.lm-menu[hidden] { display: none; }
.lm-menu__bouton {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; cursor: pointer;
  border: 0; border-radius: 999px;
  background: transparent; color: var(--kr-text-2);
}
.lm-menu__bouton:hover { background: var(--kr-surface-2); color: var(--kr-text); }
.lm-menu__bouton:focus-visible { outline: 2px solid var(--kr-link); outline-offset: 2px; }
.lm-menu__bouton svg { width: 18px; height: 18px; }
.lm-menu__volet {
  /* la barre est en `position: sticky` avec son propre empilement : le volet doit passer
     au-dessus du plateau, d'où un z-index franc. */
  position: absolute; top: calc(100% + 7px); right: 0; z-index: 60; min-width: 210px;
  padding: 6px; border-radius: 11px;
  border: 1px solid var(--lm-glose-trait); background: var(--lm-glose-fond);
  box-shadow: 0 4px 10px rgba(0,0,0,.35), 0 18px 44px rgba(0,0,0,.5);
  /* ⚠️ pas de transition sur `visibility` : propriété discrète, si la transition ne
     s'exécute pas le volet ne s'afficherait jamais (piège déjà payé sur le glossaire). */
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .13s ease, transform .13s ease;
}
.lm-menu__bouton[aria-expanded="true"] + .lm-menu__volet {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.lm-menu__volet button {
  display: block; width: 100%; text-align: left; cursor: pointer;
  font: inherit; font-size: 13.5px; padding: 9px 11px; border: 0; border-radius: 7px;
  background: none; color: var(--kr-text-2);
}
.lm-menu__volet button:hover { background: rgba(127,127,150,.16); color: var(--kr-text); }

.lm-marque { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lm-marque__nom {
  font-family: Iowan Old Style, Palatino, "Palatino Linotype", Georgia, serif;
  font-size: clamp(28px, 4vw, 40px); line-height: 1; font-weight: 600;
  color: var(--kr-text); letter-spacing: -.01em; margin: 0;
}
.lm-marque__filet { width: 46px; height: 3px; background: var(--kr-primary); border-radius: 2px; }
.lm-marque__date {
  display: flex; align-items: baseline; gap: 10px; font-size: 13.5px; color: var(--kr-text-2);
  font-variant-numeric: tabular-nums; margin-top: 3px;
}
.lm-marque__date b { color: var(--kr-text); font-weight: 700; }
.lm-marque__date span { color: var(--kr-text-3); }

/* ---------- les cinq jauges de maison ----------
   Cinq et pas six : au-delà, le bandeau devient un tableau de bord d'avion. La caisse
   commande tout, elle est la seule en plein. */
.lm-ressources { display: flex; flex-wrap: wrap; gap: 9px; margin: 0; padding: 0; list-style: none; }

/* Le bord fondu des bandes qui défilent (jauges, onglets). L'attribut est posé par le jeu
   APRÈS mesure, et seulement du côté où il reste vraiment quelque chose : une carte coupée
   net au bord de l'écran se lit comme un bug, une carte qui s'efface se lit comme une suite.
   ⚠️ On fond, on ne peint pas : le décor du bureau est une photo, un dégradé opaque au bord
   ferait une bande grise en travers. */
.lm-ressources[data-defile],
.lm-onglets ul[data-defile] {
  --lm-fondu: linear-gradient(to right, #000, #000);
  -webkit-mask-image: var(--lm-fondu); mask-image: var(--lm-fondu);
}
.lm-ressources[data-defile="fin"], .lm-onglets ul[data-defile="fin"] {
  --lm-fondu: linear-gradient(to right, #000 calc(100% - 34px), transparent);
}
.lm-ressources[data-defile="debut"], .lm-onglets ul[data-defile="debut"] {
  --lm-fondu: linear-gradient(to left, #000 calc(100% - 34px), transparent);
}
.lm-ressources[data-defile="deux"], .lm-onglets ul[data-defile="deux"] {
  --lm-fondu: linear-gradient(to right, transparent, #000 34px,
                              #000 calc(100% - 34px), transparent);
}
.lm-res {
  display: flex; align-items: center; gap: 9px; min-width: 128px;
  padding: 9px 13px; border-radius: 12px;
  border: 1px solid var(--kr-border); background: var(--lm-carte);
  backdrop-filter: blur(3px);
}
.lm-res svg { width: 17px; height: 17px; flex: none; color: var(--kr-text-3); }
.lm-res__bloc { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.lm-res__nom {
  font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--kr-text-3);
}
.lm-res__val {
  font-size: 18px; font-weight: 700; color: var(--kr-text);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.lm-res__val i { font-style: normal; font-size: 11px; font-weight: 500; color: var(--kr-text-3); }
.lm-res__sous { font-size: 10.5px; color: var(--kr-text-3); font-variant-numeric: tabular-nums; }
.lm-res--caisse {
  background: var(--kr-primary); border-color: var(--kr-primary-600);
  box-shadow: 0 8px 22px -10px rgba(109,40,217,.9);
}
.lm-res--caisse svg, .lm-res--caisse .lm-res__nom,
.lm-res--caisse .lm-res__sous { color: rgba(255,255,255,.78); }
.lm-res--caisse .lm-res__val { color: #fff; font-size: 20px; }
.lm-res--caisse.est-bas { background: #7f2222; border-color: #9b2c2c; box-shadow: none; }

/* ---------- les six rubriques ----------
   Des onglets, pas un couloir : on y revient quand on veut. Le nombre porté par un onglet
   est le nombre de décisions qui y attendent, jamais un badge décoratif. */
.lm-onglets { margin: 0 0 18px; border-bottom: 1px solid var(--kr-border); }
.lm-onglets ul {
  display: flex; gap: 2px; margin: 0; padding: 0; list-style: none;
  overflow-x: auto; scrollbar-width: none;
}
.lm-onglets ul::-webkit-scrollbar { display: none; }
.lm-onglet {
  font: inherit; cursor: pointer; position: relative;
  display: flex; align-items: center; gap: 9px; white-space: nowrap;
  padding: 9px 15px 11px; border: 0; border-radius: 10px 10px 0 0;
  background: transparent; color: var(--kr-text-2); text-align: left;
  transition: background .12s ease, color .12s ease;
}
.lm-onglet__rond {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  border: 1px solid var(--kr-border); background: var(--kr-surface); color: var(--kr-text-3);
  flex: none;
}
.lm-onglet__rond svg { width: 16px; height: 16px; }
.lm-onglet__bloc { display: flex; flex-direction: column; line-height: 1.2; }
.lm-onglet__nom { font-size: 14px; font-weight: 600; color: var(--kr-text-2); }
.lm-onglet__quoi { font-size: 11px; color: var(--kr-text-3); }
.lm-onglet__compte {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; flex: none;
  display: grid; place-items: center; background: var(--kr-primary); color: #fff;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.lm-onglet:hover { background: var(--lm-voile); }
.lm-onglet:focus-visible { outline: 2px solid var(--kr-link); outline-offset: -2px; }
.lm-onglet.est-active {
  background: linear-gradient(180deg, rgba(109,40,217,.24), rgba(109,40,217,.08));
  box-shadow: inset 0 2px 0 var(--kr-primary-600);
}
.lm-onglet.est-active .lm-onglet__nom { color: var(--kr-text); font-weight: 700; }
.lm-onglet.est-active .lm-onglet__quoi { color: var(--kr-link); }
.lm-onglet.est-active .lm-onglet__rond {
  background: var(--kr-primary); border-color: var(--kr-primary); color: #fff;
}
.lm-onglet.est-urgente .lm-onglet__rond { border-color: var(--kr-primary-600); color: var(--kr-link); }
.lm-onglet.est-bloquee { opacity: .38; cursor: not-allowed; }
.lm-onglet.est-bloquee:hover { background: transparent; }

/* ---------- le plateau : trois colonnes qui ne bougent jamais ---------- */
.lm-plateau {
  display: grid; grid-template-columns: 236px minmax(0, 1fr) 272px;
  gap: 18px; align-items: start;
}
.lm-plateau--seul { grid-template-columns: minmax(0, 1fr); max-width: 780px; margin: 0 auto; }
.lm-colonne__titre {
  font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--kr-text-3); margin: 0 0 9px;
}

/* ---------- colonne de gauche : le sommaire de la maison ---------- */
/* Une maison qui a tourné trois ans porte une vingtaine de séries : sans plafond, la colonne
   mesurait mille cinq cents pixels et poussait le reste de la page hors de l'écran. Elle
   défile chez elle, et le bureau ne bouge plus. */
.lm-series ul {
  margin: 0 0 12px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px;
  max-height: min(62vh, 560px); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin;
}
.lm-series ul::-webkit-scrollbar { width: 8px; }
.lm-series ul::-webkit-scrollbar-thumb { background: var(--lm-trait); border-radius: 99px; }
.lm-serie {
  font: inherit; cursor: pointer; width: 100%; text-align: left;
  display: flex; gap: 10px; align-items: center;
  padding: 9px 10px; border-radius: 11px;
  border: 1px solid var(--kr-border); background: var(--lm-carte); color: var(--kr-text);
  transition: border-color .12s ease, background .12s ease;
}
.lm-serie:hover { border-color: var(--lm-trait-fort); background: var(--lm-carte-fort); }
.lm-serie:focus-visible { outline: 2px solid var(--kr-link); outline-offset: 2px; }
.lm-serie.est-active {
  border-color: var(--kr-primary-600);
  /* ⚠️ LA TEINTE SE POSE SUR LA CARTE, elle ne la remplace pas. Écrit `background:
     rgba(109,40,217,.18)` tout court, le fond opaque de la carte disparaissait et c'est la
     photo du bureau qui passait derrière le texte : en mode jour, le nom de l'auteur et le
     numéro de chapitre devenaient illisibles sur le seul élément de la colonne qu'on veut
     justement lire. Deux couches : le violet, puis la carte. */
  background: linear-gradient(rgba(109,40,217,.18), rgba(109,40,217,.18)), var(--lm-carte);
  box-shadow: inset 3px 0 0 var(--kr-primary-600);
}
.lm-serie.est-hors { opacity: .42; cursor: default; }
.lm-serie.est-hors:hover { border-color: var(--kr-border); background: var(--lm-carte); }
.lm-serie--vide {
  display: block; font-size: 12.5px; color: var(--kr-text-3); cursor: default;
  border-style: dashed; padding: 14px 12px; text-align: center;
}
.lm-serie__vignette {
  width: 42px; height: 42px; border-radius: 8px; flex: none; overflow: hidden;
  background: var(--lm-creux); display: grid; place-items: center;
}
.lm-serie__vignette img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.lm-serie__vignette svg { width: 18px; height: 18px; color: var(--kr-text-3); }
.lm-serie__bloc { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.lm-serie__titre {
  font-size: 13.5px; font-weight: 700; line-height: 1.2; color: var(--kr-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lm-serie__ligne { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.lm-serie__auteur {
  font-size: 11px; color: var(--kr-text-3); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.lm-serie__bas { font-size: 11px; color: var(--kr-text-3); font-variant-numeric: tabular-nums; }
.lm-serie__rang { font-weight: 700; color: var(--kr-text-2); }
.lm-serie__rang i { font-style: normal; font-weight: 500; color: var(--kr-text-3); }
.lm-serie__rang.est-bas { color: var(--lm-danger); }

/* les quatre états d'une série, toujours écrits en toutes lettres */
.lm-etat {
  font-size: 8.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px; white-space: nowrap; flex: none;
}
.lm-etat--stable     { color: #8fd6a8; background: rgba(110,192,138,.16); }
.lm-etat--surveiller { color: #f0c26b; background: rgba(217,164,65,.18); }
.lm-etat--menacee    { color: #f5a08d; background: rgba(232,116,110,.18); }
.lm-etat--danger     { color: #ff9c93; background: rgba(232,116,110,.3); }
.lm-etat--arretee    { color: var(--kr-text-3); background: var(--lm-voile-fort); }
/* terminee : une histoire finie n'est ni un succes en cours ni un echec */
.lm-etat--terminee   { color: #9ec9ec; background: rgba(110,163,208,.18); }

.lm-ajout {
  font: inherit; cursor: pointer; width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 12px; border-radius: 11px; border: 1px dashed var(--kr-border);
  background: transparent; color: var(--kr-text-3); font-size: 12.5px;
}
.lm-ajout svg { width: 15px; height: 15px; }
.lm-ajout:hover { border-color: var(--kr-primary-600); color: var(--kr-link); }
.lm-ajout:focus-visible { outline: 2px solid var(--kr-link); outline-offset: 2px; }
.lm-ajout.est-urgente { border-color: var(--kr-primary-600); color: var(--kr-link); border-style: solid; }

/* ---------- le centre : le dossier de papier ---------- */
.lm-scene { min-width: 0; display: flex; flex-direction: column; }
.lm-dossier {
  position: relative;
  background:
    linear-gradient(180deg, var(--lm-papier) 0%, var(--lm-papier-2) 100%);
  color: var(--lm-encre);
  border-radius: 4px;
  padding: 30px 30px 0;
  box-shadow: 0 2px 0 rgba(0,0,0,.18), 0 22px 50px -14px rgba(0,0,0,.8),
              inset 0 1px 0 rgba(255,255,255,.55);
}
/* GARDE-FOU. Un <svg> sans width/height s'étale à sa taille par défaut : une classe
   oubliée à une refonte a suffi à poser un bonhomme de 300 px au milieu d'un écran. Toute
   icône du dossier a donc une taille par défaut, que les règles suivantes affinent. */
.lm-dossier svg, .lm-suite svg { width: 16px; height: 16px; flex: none; }
/* les feuilles dessous, à peine visibles : c'est une pile, pas une page */
.lm-dossier::before {
  content: ""; position: absolute; inset: 7px -7px -9px -7px; z-index: -1;
  background: var(--lm-papier-2); border-radius: 4px; opacity: .3;
}
/* le trombone, photographié, posé sur le coin */
.lm-dossier::after {
  content: ""; position: absolute; top: -16px; left: 26px; width: 26px; height: 62px;
  background: url("img/bureau/trombone.webp") no-repeat center / contain;
  transform: rotate(-7deg); filter: drop-shadow(1px 2px 3px rgba(0,0,0,.45));
  pointer-events: none;
}
.lm-dossier.est-neuf { animation: lm-pose .28s ease-out; }
@keyframes lm-pose { from { opacity: 0; transform: translateY(12px) rotate(-.3deg); } }

/* l'onglet de chapeau : une languette de papier plus clair, glissée sous le bord haut */
.lm-dossier__onglet {
  display: inline-block; margin: 0 0 14px 42px;
  padding: 5px 14px; border-radius: 3px;
  background: #e2d6b8; color: #6b4fa8;
  font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  transform: rotate(-.8deg); box-shadow: 0 2px 5px -2px rgba(0,0,0,.45);
}
/* LE TAMPON DE FIN. Une partie qui s'achève doit se voir comme telle : sans lui, on
   enchaînait sur « Nouvelle partie » sans réaliser qu'on venait de terminer. */
.lm-tampon {
  position: absolute; top: 22px; right: 30px; z-index: 2;
  width: 118px; height: 118px; border-radius: 50%;
  display: grid; place-content: center; text-align: center; gap: 2px;
  transform: rotate(-13deg); pointer-events: none;
  border: 3px double currentColor;
}
.lm-tampon b {
  display: block; font-size: 21px; font-weight: 700; line-height: 1.05;
  letter-spacing: -.01em;
}
.lm-tampon em {
  display: block; font-style: normal;
  font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  opacity: var(--lm-decor);
}
.lm-tampon--faillite { color: rgba(163,59,52,.62); }
.lm-tampon--terme { color: rgba(80,64,140,.55); }

/* la date limite, sur un bout de papier arraché posé en haut à droite */
.lm-echeance {
  position: absolute; top: 16px; right: 24px; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 9px 16px 10px; background: #f7f3e9;
  border: 1px solid rgba(0,0,0,.1); border-radius: 2px;
  transform: rotate(1.6deg); box-shadow: 0 6px 14px -8px rgba(0,0,0,.5);
  text-align: center;
}
.lm-echeance b {
  font-size: 8.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--lm-encre-3);
}
.lm-echeance span {
  font-family: Iowan Old Style, Palatino, "Palatino Linotype", Georgia, serif;
  font-size: 19px; color: var(--lm-encre); line-height: 1.1; font-variant-numeric: tabular-nums;
}
.lm-echeance em { font-size: 10.5px; font-style: normal; color: #a33b34; }

.lm-dossier__titre {
  font-family: Iowan Old Style, Palatino, "Palatino Linotype", Georgia, serif;
  font-size: clamp(26px, 3vw, 36px); line-height: 1.06; font-weight: 600;
  color: var(--lm-encre); margin: 0 0 5px; letter-spacing: -.01em;
  max-width: 28ch;
}
.lm-credits {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  font-size: 13.5px; color: var(--lm-encre-2); margin: 0 0 16px;
  max-width: 46ch;
}
.lm-credits b { font-weight: 700; }
.lm-revue { color: #6b4fa8; letter-spacing: .04em; text-transform: uppercase; font-size: 12.5px; }
.lm-etiq {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; border: 1px solid currentColor;
}
.lm-etiq svg { width: 12px; height: 12px; }
.lm-etiq--maison { color: #2f7a63; }
.lm-etiq--licence { color: #6d4aa8; }
/* un auteur dont on a déjà mené une série au bout : c'est la récompense d'une bonne partie */
.lm-etiq--retour { color: #a8722a; }

/* La colonne de texte s'arrête avant les extraits punaisés à droite et avant l'annotation
   manuscrite : ce sont eux qui s'adaptent au texte, jamais l'inverse. */
.lm-pitch {
  font-family: Iowan Old Style, Palatino, "Palatino Linotype", Georgia, serif;
  font-size: 16.5px; line-height: 1.5; color: var(--lm-encre); margin: 0 0 18px;
  max-width: 62ch;
}
.lm-pitch em { color: var(--lm-encre-2); font-style: italic; }

/* le problème du moment : le seul bloc du dossier qui porte un intertitre */
.lm-probleme { max-width: 62ch; margin: 0 0 18px; }

/* Un dossier ILLUSTRÉ, et lui seul, rétrécit sa colonne de texte pour laisser la place aux
   extraits punaisés à droite. Ailleurs (l'intro, le relevé, les écrans à vide) rien ne
   justifie de brider la lecture : un paragraphe étroit au-dessus d'une liste pleine largeur
   donne l'impression d'une mise en page cassée.

   ⚠️ LA RÉSERVE SE MESURE DANS LA MÊME UNITÉ QUE L'IMAGE, sans quoi les deux ne peuvent pas
   s'accorder. Elle était écrite en `ch` (20ch pour le titre, 34ch pour le texte) pendant que
   les extraits sont posés en pourcentage : sur un dossier de 704 px, 20ch valait 428 px alors
   que l'image commençait à 376, et un titre de trois lignes lui passait dessous. Signalé par
   Guillaume sur le Magazine. On part donc de la largeur de la bande d'extraits elle-même,
   plus une gouttière. Le calc() se résout sur la boîte du TEXTE, plus étroite que celle qui
   porte l'image (le papier a sa marge) : la gouttière absorbe l'écart. */
.lm-dossier { --lm-extraits-l: min(44%, 340px); --lm-extraits-gout: 34px; }
.lm-dossier.est-illustre .lm-pitch,
.lm-dossier.est-illustre .lm-probleme,
.lm-dossier.est-illustre .lm-credits,
.lm-dossier.est-illustre .lm-dossier__titre {
  max-width: none;
  padding-right: calc(var(--lm-extraits-l) + var(--lm-extraits-gout));
}
/* Le tampon est posé en absolu dans le coin : sans réserve, un titre de bilan long lui passe
   dessous et les deux deviennent illisibles. On lui garde sa place. */
.lm-dossier.est-tamponne .lm-dossier__titre { padding-right: 132px; }
.lm-probleme__quoi {
  font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: #6b4fa8; margin: 0 0 5px;
}
.lm-probleme__titre {
  font-size: 19px; font-weight: 700; line-height: 1.25; color: var(--lm-encre); margin: 0 0 6px;
}
.lm-probleme__texte { font-size: 14.5px; line-height: 1.5; color: var(--lm-encre-2); margin: 0; }

/* Les extraits de name, punaisés à droite du dossier. Leur hauteur est BORNÉE : une planche
   à l'italienne et une planche à la française n'ont pas le même format, et sans plafond la
   pile descendait sur la bande de mesures. Un extrait est du décor, on le recadre sans
   scrupule. */
.lm-extraits {
  position: absolute; right: 18px; top: 118px; width: var(--lm-extraits-l); z-index: 1;
  pointer-events: none;
}
.lm-extrait { display: block; position: relative; }
.lm-extrait img {
  width: 100%; height: auto; display: block; border-radius: 2px;
  border: 1px solid rgba(0,0,0,.14);
  box-shadow: 0 10px 22px -10px rgba(0,0,0,.65);
  max-height: 176px; object-fit: cover; object-position: center;
}
.lm-extrait--1 { transform: rotate(-1.4deg); }
.lm-extrait--2 { transform: rotate(1.2deg) translate(-6%, -6%); width: 88%; margin-left: 12%; }
.lm-extrait--2 img { max-height: 112px; }
/* un bout de ruban adhésif sur chacun */
.lm-extrait::before {
  content: ""; position: absolute; top: -11px; left: 22%; width: 62px; height: 21px;
  background: url("img/bureau/ruban-court.webp") no-repeat center / contain;
  transform: rotate(-4deg); opacity: .92;
}
.lm-extrait--2::before { left: auto; right: 18%; transform: rotate(5deg); }

/* L'annotation manuscrite, sur un carré de papier collé, POSÉE DANS LE FLUX sous le
   problème du chapitre.
   Elle a d'abord été calée en absolu dans la gouttière (left: 47%), et ça ne pouvait pas
   tenir : la largeur de la colonne de texte se mesure en caractères, la position de la note
   en pourcentage de la carte. Les deux ne parlent pas la même langue, donc selon la
   longueur du titre et la largeur de l'écran la note passait sur le texte. Dans le flux,
   le recouvrement est impossible par construction. */
/* ---------- LE PAPIER, EN CSS PUR ----------
 * Arbitrage de Guillaume : « pour ce genre de choses on devrait le faire en pur CSS ».
 * Il a raison, et les deux tentatives précédentes le démontrent. Une IMAGE de feuille pose
 * trois problèmes qu'aucun réglage ne résout :
 *   · en `cover` elle est recadrée, donc ses bords déchirés sont coupés ;
 *   · en `100% 100%` elle est étirée, donc la déchirure se déforme avec la boîte ;
 *   · et son ombre reste celle de la BOÎTE, un rectangle net derrière une forme qui n'en est
 *     pas un — c'est ce que Guillaume a vu deux fois.
 * `clip-path` découpe la vraie forme, à n'importe quelle taille et sans fichier à charger, et
 * `filter: drop-shadow` suit le canal alpha, donc la découpe. Le texte ne projette pas d'ombre
 * de son côté : il est posé sur une zone opaque, l'alpha y est uniforme.
 * ⚠️ `clip-path` COUPE AUSSI LES ENFANTS : ce qui doit dépasser (le ruban adhésif du post-it)
 * ne peut pas vivre dans un élément découpé. */
.lm-page {
  /* la découpe, écrite une fois : les deux papiers du jeu s'en servent. Le coin bas-droit
     rentre franchement, c'est lui qui donne la feuille arrachée plutôt que le rectangle. */
  --lm-dechirure: polygon(
    1% 4%, 13% 0%, 31% 3%, 52% 0.5%, 71% 3%, 88% 0%, 99.5% 2.5%,
    100% 26%, 98% 52%, 100% 71%, 87% 100%,
    66% 97%, 43% 100%, 21% 96.5%, 4% 99%,
    0.5% 74%, 2% 50%, 0% 27%
  );
}

.lm-main {
  display: block; max-width: 240px; margin: 0 0 20px; padding: 20px 18px 26px 22px;
  background: linear-gradient(160deg, #f6efd9, #ece2c4 62%, #e4d8b6);
  -webkit-clip-path: var(--lm-dechirure); clip-path: var(--lm-dechirure);
  filter: drop-shadow(0 6px 7px rgba(0,0,0,.4));
  color: #40372a; transform: rotate(-1.8deg);
  font-family: "Bradley Hand", "Segoe Script", "Snell Roundhand", "Apple Chancery", cursive;
  font-size: 15px; line-height: 1.45; font-style: italic;
}


/* La bande de mesures, en bas du dossier, toujours au même endroit. Elle passe DEVANT le
   décor : un dossier court laisse les extraits descendre plus bas que le texte, et un
   chiffre à moitié caché par une planche de manga est un chiffre perdu. */
.lm-mesures {
  position: relative; z-index: 3;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  margin: 4px -30px 0; border-top: 1px solid rgba(0,0,0,.14);
  background: var(--lm-papier-2); border-radius: 0 0 4px 4px;
}
.lm-mesure {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto;
  gap: 0 8px; padding: 13px 16px 15px; border-right: 1px solid rgba(0,0,0,.1);
  align-content: start; min-width: 0;
}
.lm-mesure:last-child { border-right: 0; }
.lm-mesure svg { grid-row: 1; width: 15px; height: 15px; color: var(--lm-encre-3); margin-top: 1px; }
/* Le libellé passe à la ligne plutôt que de se couper : « TOME BOUCLÉ … » ne veut rien dire,
   et cinq mesures dans une colonne de 880 px, ça arrive dès le portable de 1280. */
.lm-mesure__nom {
  grid-column: 2; grid-row: 1;
  font-size: 8.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  line-height: 1.35; color: var(--lm-encre-2);
}
.lm-mesure__val {
  grid-column: 1 / -1; grid-row: 2; margin-top: 4px;
  font-size: 20px; font-weight: 700; color: var(--lm-encre);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.lm-mesure__val i { font-style: normal; font-size: 12px; font-weight: 500; color: var(--lm-encre-3); }
.lm-mesure__sous { grid-column: 1 / -1; grid-row: 3; font-size: 11px; color: var(--lm-encre-3); }
.lm-mesure.est-vigilance .lm-mesure__val { color: #a8722a; }
.lm-mesure.est-vigilance .lm-mesure__sous { color: #a8722a; }
.lm-mesure.est-danger .lm-mesure__val { color: #a33b34; }
.lm-mesure.est-danger .lm-mesure__sous { color: #a33b34; }
/* la note du tome quand elle est bonne : c'est le seul encouragement du jeu, il doit se voir */
.lm-mesure.est-bon .lm-mesure__val { color: #3f7150; }
.lm-mesure.est-bon .lm-mesure__sous { color: #3f7150; }

/* ---------- ce qui se lit sur le papier ---------- */
.lm-urgences { display: flex; flex-direction: column; gap: 9px; margin: 0 0 20px; }
.lm-urgence {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 11px 13px; border-radius: 7px; background: rgba(255,255,255,.42);
  border-left: 3px solid var(--lm-encre-3);
}
.lm-urgence svg { width: 17px; height: 17px; color: var(--lm-encre-3); margin-top: 1px; }
.lm-urgence span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lm-urgence b { font-size: 14.5px; font-weight: 700; color: var(--lm-encre); line-height: 1.3; }
.lm-urgence em { font-size: 12.5px; font-style: normal; color: var(--lm-encre-2); }
.lm-urgence.est-danger { border-left-color: #a33b34; }
.lm-urgence.est-danger svg { color: #a33b34; }
.lm-urgence.est-vigilance { border-left-color: #a8722a; }
.lm-urgence.est-vigilance svg { color: #a8722a; }

.lm-apres {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  background: rgba(109,40,217,.10); border: 1px solid rgba(109,40,217,.22);
  border-radius: 8px; padding: 10px 14px; margin: 0 0 18px; max-width: 42ch;
  font-size: 14px; color: var(--lm-encre-2);
}
/* Ce qu'une décision d'atelier a coûté, annoté sur le dossier lui-même : c'est ce qui remplace
   l'écran plein « Continuer » qu'on subissait après chaque name. Écrit à la main dans la
   marge, pas affiché comme un tableau de bord. */
.lm-annote {
  margin: 0 0 18px; padding: 0 0 0 14px; list-style: none; max-width: 42ch;
  border-left: 2px solid rgba(109,40,217,.35);
}
.lm-annote li {
  font-size: 13.5px; line-height: 1.5; color: var(--lm-encre-2);
  font-style: italic;
}
/* le titre dont la maison se souviendra, en tête du bilan */
.lm-phare {
  display: flex; align-items: center; gap: 10px; margin: 0 0 18px; max-width: 46ch;
  font-size: 15px; line-height: 1.5; color: var(--lm-encre-2);
}
.lm-phare svg { width: 18px; height: 18px; flex: none; color: var(--kr-link); }
.lm-phare b { color: var(--lm-encre); }
.lm-apres svg { width: 16px; height: 16px; color: var(--kr-link); }
.lm-apres b { color: var(--lm-encre); font-variant-numeric: tabular-nums; }
.lm-apres__fleche { color: var(--lm-encre-3); }
.lm-manque {
  font-size: 13.5px; color: #a33b34; margin: 0 0 18px; max-width: 42ch;
  border-left: 2px solid #a33b34; padding-left: 12px;
}
/* Une série menée à son terme : la seule bonne nouvelle du relevé, en vert et non en rouge. */
.lm-conclusion {
  font-size: 13.5px; color: #3f7150; margin: 0 0 18px; max-width: 42ch;
  border-left: 2px solid #3f7150; padding-left: 12px;
}
.lm-regles { display: flex; flex-direction: column; gap: 10px; margin: 0 0 6px; padding: 0; list-style: none; }
.lm-regles li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; line-height: 1.45; color: var(--lm-encre-2); }
.lm-regles svg { width: 18px; height: 18px; margin-top: 2px; color: var(--lm-encre-3); }
.lm-regles b { color: var(--lm-encre); }
.lm-note-bas { font-size: 12.5px; color: var(--lm-encre-3); margin: 16px 0 24px; line-height: 1.45; }

.lm-etagere { margin: 4px 0 22px; border-top: 1px solid rgba(0,0,0,.12); padding-top: 14px; }
.lm-etagere__titre {
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--lm-encre-3); margin: 0 0 10px;
}
/* ⚠️ CE SONT DES COUVERTURES DE LIVRES : elles se montrent debout, en format livre.
   Le cadre portait bien `aspect-ratio: 2/3`, mais un `max-height: 132px` l'écrasait : sur une
   colonne de 330 px le cadre devenait 330 × 132, donc un bandeau paysage, et `object-fit:
   cover` recadrait la couverture en tranche. On borne donc la LARGEUR et on laisse le rapport
   commander la hauteur, ce qui est le seul ordre qui tienne. Signalé par Guillaume. */
.lm-jaquettes {
  display: grid; grid-template-columns: repeat(4, minmax(0, 106px)); gap: 14px;
  margin: 0; padding: 0; list-style: none;
}
.lm-jaq { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lm-jaq a { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 6px; }
.lm-jaq__cadre {
  display: block; aspect-ratio: 2 / 3; width: 100%; height: auto; overflow: hidden;
  border-radius: 3px; border: 1px solid rgba(0,0,0,.18); background: rgba(0,0,0,.06);
  box-shadow: 0 6px 14px -8px rgba(0,0,0,.6);
}
.lm-jaq__cadre img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lm-jaq__titre {
  font-size: 12.5px; line-height: 1.3; color: #4a3d86; text-decoration: underline;
  text-underline-offset: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lm-jaq__meta { font-size: 11.5px; color: var(--lm-encre-3); font-variant-numeric: tabular-nums; }
.lm-jaq__meta b { color: var(--lm-encre-2); }

.lm-parutions { margin: 0 0 18px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.lm-parutions li {
  font-size: 16px; color: var(--lm-encre); display: flex; flex-direction: column; gap: 2px;
  border-bottom: 1px solid rgba(0,0,0,.1); padding-bottom: 12px;
}
.lm-parutions li:last-child { border-bottom: 0; padding-bottom: 0; }
.lm-verdict { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; color: var(--lm-encre-2); font-variant-numeric: tabular-nums; }
.lm-verdict svg { width: 14px; height: 14px; }
.lm-verdict b { color: var(--lm-encre); }
.lm-cause { font-size: 13px; color: var(--lm-encre-3); font-style: italic; line-height: 1.4; }

/* ---------- LES TITRES D'ŒUVRES ----------
   Demande de Guillaume : un titre de manga s'écrit en italique, « ce serait plus facile de
   voir de quoi on parle ». C'est aussi l'usage typographique, et dans ce jeu les titres
   inventés se mêlent en permanence à la prose : sans marque, on ne sait pas où ils commencent.
   ⚠️ ET L'INVERSE DANS UN BLOC DÉJÀ EN ITALIQUE. Un italique posé dans de l'italique ne se
   voit pas : le titre y revient donc AU DROIT, et c'est le contraste qui le désigne. La règle
   vaut pour les six blocs penchés du jeu (annotation manuscrite, post-it, note de l'atelier,
   règle de la fiche, cause d'une note, mot du rayon) et pour tout `<em>` ou `<i>` parent. */
.lm-titre { font-style: italic; }
em .lm-titre,
i .lm-titre,
.lm-main .lm-titre,
.lm-annote li .lm-titre,
.lm-postit__texte .lm-titre,
.lm-fiche__regle .lm-titre,
.lm-cause .lm-titre,
.lm-rayon__mot .lm-titre,
.lm-notice__source .lm-titre { font-style: normal; }
.lm-rappel { font-size: 14px; color: var(--lm-encre-2); margin: 0 0 14px; border-left: 2px solid var(--kr-primary); padding-left: 14px; }
.lm-rappel strong { color: var(--lm-encre); }

.lm-releve { display: grid; gap: 22px; align-items: start; margin-bottom: 24px; }
@media (min-width: 900px) { .lm-releve { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } }
.lm-compte { margin: 0 0 24px; display: flex; flex-direction: column; gap: 4px; }
.lm-compte > div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.lm-compte dt { color: var(--lm-encre-2); margin: 0; }
.lm-compte dd { margin: 0; color: var(--lm-encre); font-variant-numeric: tabular-nums; }
.lm-compte .lm-total { border-top: 1px solid rgba(0,0,0,.18); padding-top: 8px; margin-top: 4px; font-weight: 700; }
.lm-compte .lm-total dd.lm-moins { color: #a33b34; }
.lm-releve .lm-compte { margin-bottom: 0; }

.lm-graph { margin: 0; max-width: 460px; }
.lm-graph figcaption {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--lm-encre-3); margin-bottom: 8px;
}
.lm-graph__periode { font-weight: 500; letter-spacing: .02em; text-transform: none; }
.lm-graph svg { width: 100%; height: auto; display: block; overflow: visible; }
.lm-graph__aire { fill: var(--kr-primary); opacity: .12; }
.lm-graph__ligne { fill: none; stroke: var(--kr-primary); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.lm-graph__zero { stroke: #a33b34; stroke-width: 1; stroke-dasharray: 3 3; opacity: .7; }
.lm-graph__fin { fill: var(--kr-primary); }
.lm-graph__pt { fill: transparent; }

/* ---------- LE GLOSSAIRE ----------
   Un mot du métier porte sa définition. Le mot EST un bouton : il s'atteint au tabulateur,
   s'ouvre à l'entrée comme au survol, et se touche au doigt. L'infobulle du site ne répond
   qu'à la souris, elle ne pouvait pas servir ici. */
.lm-mot {
  font: inherit; color: inherit; background: none; border: 0; padding: 0;
  cursor: help; position: relative;
  text-decoration: underline dotted currentColor;
  text-decoration-thickness: 1.5px; text-underline-offset: 3px;
}
.lm-mot:hover { text-decoration-style: solid; }
/* La variante posée DANS une carte de décision : elle n'est pas un bouton (interdit dans un
   bouton) et n'ouvre donc pas de panneau, elle porte l'infobulle native du navigateur. Mêmes
   pointillés, pas de curseur d'aide qui ferait croire qu'on peut cliquer dessus séparément. */
.lm-mot--plat { cursor: inherit; background: none; border: 0; padding: 0; font: inherit; color: inherit; }
.lm-mot:focus-visible { outline: 2px solid var(--kr-link); outline-offset: 2px; border-radius: 2px; }
.lm-glose {
  /* ⚠️ Elle est ancrée à GAUCHE du mot : quand le mot glosé tombe près du bord droit, ses
     320 px sortaient de la fenêtre et faisaient glisser toute la page à l'horizontale (mesuré
     à 23 px de débordement sur l'Atelier et le Magazine). `position-area` n'étant pas encore
     partout, on la laisse à gauche mais on l'empêche de dépasser : le navigateur la replie
     sur la droite du mot quand il n'y a plus la place. */
  position: absolute; left: 0; right: auto; top: calc(100% + 9px); z-index: 30;
  width: min(320px, 78vw); max-width: min(320px, calc(100vw - 32px));
  padding: 13px 15px 14px; text-align: left;
  background: var(--lm-glose-fond); color: var(--kr-text-2);
  border: 1px solid var(--lm-glose-trait); border-radius: 11px;
  box-shadow: 0 4px 10px rgba(0,0,0,.35), 0 18px 44px rgba(0,0,0,.55);
  font-family: var(--kr-font); font-size: 13px; line-height: 1.5; font-weight: 400;
  font-style: normal; letter-spacing: 0; text-transform: none;
  opacity: 0; visibility: hidden; transform: translateY(4px);
  /* On ne transitionne PAS la visibilité : c'est une propriété discrète, et si la transition
     ne s'exécute pas (navigateur qui ne compose pas, animations coupées), le panneau ne
     s'afficherait jamais. Elle bascule sèchement, seule l'opacité s'anime. */
  transition: opacity .14s ease, transform .14s ease;
  pointer-events: none;
}
.lm-glose b {
  display: block; margin-bottom: 5px; color: var(--kr-text); font-weight: 700;
  font-size: 13.5px;
}
/* Le mot ouvert est LEVÉ, pas seulement son panneau : sinon le texte qui suit dans la même
   liste se dessine par-dessus la définition, et on lit les deux en même temps. */
.lm-mot:hover, .lm-mot:focus-visible, .lm-mot[aria-expanded="true"] { z-index: 40; }

/* ⚠️ ET LE BLOC PENCHÉ AVEC LUI. Un `transform` crée un CONTEXTE D'EMPILEMENT : tout ce
   qu'il contient est peint à SON niveau à lui, et aucun z-index d'enfant ne peut en sortir.
   Le post-it est tourné de 1,2° depuis toujours ; le jour où l'on a glosé son texte, sa
   définition s'est donc retrouvée sous la bande de décisions (z-index 4) au lieu de passer
   par-dessus. Signalé par Guillaume : « parfois c'est en dessous ».
   On lève donc le BLOC ENTIER tant qu'une définition y est ouverte. `:has()` couvre le
   survol et le clavier ; la classe couvre le doigt, posée par le jeu, et sert de filet si
   `:has()` venait à manquer. */
.lm-postit:has(.lm-mot:hover),
.lm-postit:has(.lm-mot:focus-visible),
.lm-postit:has(.lm-mot[aria-expanded="true"]),
.lm-postit.est-devant,
.lm-main:has(.lm-mot:hover),
.lm-main:has(.lm-mot[aria-expanded="true"]),
.lm-main.est-devant { z-index: 50; }
/* Dans la colonne de droite (`.lm-cote` : la fiche de l'auteur, sa note éditoriale, son
   historique), l'infobulle s'ancre à DROITE du mot. Ancrée à gauche, ses 320 px sortaient de
   la fenêtre et faisaient glisser toute la page à l'horizontale. */
.lm-cote .lm-glose { left: auto; right: 0; }
.lm-mot:hover .lm-glose,
.lm-mot:focus-visible .lm-glose,
.lm-mot[aria-expanded="true"] .lm-glose {
  opacity: 1; visibility: visible; transform: translateY(0);
}
/* près du bord droit, la définition s'ancre de l'autre côté */
.lm-mot.est-a-droite .lm-glose { left: auto; right: 0; }
/* sur le papier crème, le mot reste dans l'encre du dossier */
.lm-dossier .lm-mot { color: inherit; }
@media (max-width: 700px) { .lm-glose { width: min(300px, 86vw); } }

/* ---------- les cartes de décision ---------- */
/* LA DÉCISION RESTE ATTEIGNABLE SANS CHERCHER. Mesuré sur un portable de 1280 × 800 : sans
   ce collage, le dossier des Projets pousse ses cartes 137 px sous la ligne de flottaison,
   et l'intro 29 px. Le critère de réussite est explicite : les actions principales sont
   visibles sans défilement. Sur une page courte, sticky ne change rien.
   C'est le BLOC ENTIER qui colle, question comprise : coller la seule grille faisait
   disparaître « Comment voulez-vous intervenir ? » sous la bande. */
.lm-decisions {
  position: sticky; bottom: 0; z-index: 4; padding: 14px 0 10px;
  /* Fondu COURT et déjà opaque : un dégradé long laisse le papier transparaître sous les
     cartes et donne une salissure.
     ⚠️ Le départ était à .82, et sur mobile, où le dossier occupe tout l'écran, le texte du
     problème se lisait littéralement À TRAVERS la bande, barré par les cartes. Le fondu ne
     sert qu'à éviter une arête franche : il doit être court et haut. */
  /* ⚠️ OPAQUE DÈS LE PREMIER PIXEL. Le fondu partait de .82, puis de .90, et à chaque fois
     le texte du dossier transparaissait DERRIÈRE les cartes : sur le bureau d'avril, on
     lisait « dans quarante magasins » barré par la question. Une phrase à moitié visible
     sous un panneau ne se lit pas comme « il y a la suite plus bas », elle se lit comme un
     défaut d'affichage. Le filet du haut suffit à dire où la bande commence, et il évite
     l'arête franche que le dégradé était censé adoucir. */
  background: rgba(var(--lm-bande),1);
  box-shadow: 0 -1px 0 rgba(255,255,255,.07);
}
/* SAUF sur les écrans qu'on lit : l'intro et le bilan. Ils n'ont pas de décision à rendre
   atteignable en urgence, leur carte est longue, et la bande venait trancher le papier en
   plein milieu du graphique. */
.lm-plateau--seul .lm-decisions,
.lm-decisions.est-posee {
  position: static; background: none; padding-top: 20px;
}
.lm-question {
  font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--kr-link); margin: 0 0 10px;
}
/* Et la bande de mesures du dossier reste dégagée quand on est descendu au bas de la page :
   sans cette réserve, le dernier chiffre du dossier vivait sous les cartes en permanence. */
.lm-dossier { margin-bottom: 8px; }
.lm-choix-grille { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
.lm-choix-grille.est-une { grid-template-columns: minmax(0, 340px); }
/* Une réponse unique n'est pas un choix à comparer : elle n'a pas besoin de la hauteur
   d'une carte de décision, et un grand cadre vide sous une seule ligne se voit. */
.lm-choix-grille.est-une .lm-choix { min-height: 0; }
@media (min-width: 1100px) {
  .lm-choix-grille { grid-template-columns: repeat(3, 1fr); }
  .lm-choix-grille.est-quatre { grid-template-columns: repeat(4, 1fr); }
}
.lm-choix {
  font: inherit; cursor: pointer; text-align: left; min-height: 96px;
  display: flex; flex-direction: column; gap: 7px;
  padding: 13px 14px 14px; border-radius: 12px;
  border: 1px solid var(--kr-border); background: var(--lm-carte); color: var(--kr-text);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.lm-choix:hover { background: var(--lm-carte-fort); border-color: var(--lm-trait-fort); transform: translateY(-1px); }
.lm-choix:active { transform: translateY(0); }
.lm-choix:focus-visible { outline: 2px solid var(--kr-link); outline-offset: 3px; }
.lm-choix.est-premier { border-color: var(--kr-primary-600); background: rgba(109,40,217,.16); }
.lm-choix.est-premier:hover { background: rgba(109,40,217,.24); }
.lm-choix:disabled { opacity: .42; cursor: not-allowed; }
.lm-choix:disabled:hover { transform: none; background: var(--lm-carte); border-color: var(--kr-border); }
.lm-choix__tete { display: flex; align-items: flex-start; gap: 9px; }
.lm-choix__tete svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--kr-link); }
.lm-choix__tete b { font-size: 14.5px; font-weight: 700; line-height: 1.25; }
.lm-choix__texte { font-size: 12.5px; line-height: 1.4; color: var(--kr-text-3); flex: 1; }
.lm-effets { display: flex; flex-wrap: wrap; gap: 3px 11px; margin-top: auto; padding-top: 4px; }
.lm-effet {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 700; color: var(--kr-text-3); font-variant-numeric: tabular-nums;
}
.lm-effet svg { width: 12px; height: 12px; flex: none; }
.lm-effet.est-gain { color: var(--kr-score-good); }
.lm-effet.est-perte { color: var(--kr-score-low); }

/* ---------- colonne de droite : la fiche de qui est au centre ---------- */
.lm-cote { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.lm-fiche, .lm-bloc {
  border: 1px solid var(--kr-border); border-radius: 12px;
  background: var(--lm-carte); padding: 13px 14px 14px;
}
.lm-fiche__tete { display: flex; gap: 11px; align-items: center; margin-bottom: 12px; }
.lm-fiche__portrait {
  width: 62px; height: 62px; border-radius: 10px; overflow: hidden; flex: none;
  background: var(--lm-creux); display: block;
}
.lm-fiche__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.lm-fiche__nom { font-size: 15px; font-weight: 700; color: var(--kr-text); margin: 0 0 5px; line-height: 1.2; }
.lm-jauge {
  display: inline-flex; align-items: baseline; gap: 6px; margin: 0;
  padding: 3px 9px; border-radius: 6px; background: rgba(109,40,217,.2);
  border: 1px solid rgba(109,40,217,.34);
  font-size: 11px; color: var(--kr-text-2);
}
.lm-jauge b { font-size: 12.5px; color: var(--kr-text); font-variant-numeric: tabular-nums; }
.lm-jauge b i { font-style: normal; font-weight: 500; color: var(--kr-text-3); }
.lm-fiche__dl { margin: 0; display: flex; flex-direction: column; gap: 7px; }
.lm-fiche__dl > div { display: grid; grid-template-columns: 78px 1fr; gap: 10px; align-items: baseline; }
.lm-fiche__dl dt {
  margin: 0; font-size: 8.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--kr-text-3);
}
.lm-fiche__dl dd { margin: 0; font-size: 12.5px; color: var(--kr-text-2); line-height: 1.35; }
/* ce que le trait change vraiment, sous le trait : c'est une règle du jeu, pas un ornement */
.lm-fiche__regle {
  display: block; margin-top: 2px; font-size: 11.5px; font-style: italic;
  color: var(--kr-text-3); line-height: 1.35;
}
.lm-fiche__dl dd.est-bon { color: var(--lm-bon); }
.lm-fiche__dl dd.est-vigilance { color: var(--lm-vigilance); }
.lm-fiche__dl dd.est-danger { color: var(--lm-danger); font-weight: 700; }

.lm-histo { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.lm-histo li {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center;
  font-size: 12.5px; color: var(--kr-text-2);
}
.lm-histo__ch { color: var(--kr-text-2); }
.lm-histo__humeur svg { width: 15px; height: 15px; display: block; }
.lm-histo__humeur.est-bon { color: var(--lm-bon); }
.lm-histo__humeur.est-moyen { color: var(--kr-text-3); }
.lm-histo__humeur.est-mauvais { color: var(--lm-danger); }
.lm-histo__rang { font-variant-numeric: tabular-nums; color: var(--kr-text-2); min-width: 46px; text-align: right; }
.lm-histo__rang i { font-style: normal; color: var(--kr-text-3); }
.lm-histo li.est-encours { color: var(--kr-link); }
.lm-histo li.est-encours .lm-histo__ch,
.lm-histo li.est-encours .lm-histo__rang { color: var(--kr-link); }

.lm-note-edito { font-size: 12.5px; line-height: 1.45; color: var(--kr-text-2); margin: 0 0 8px; }
.lm-note-edito__potentiel {
  font-size: 12.5px; color: var(--kr-text); margin: 0; font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.lm-note-edito__potentiel i { font-style: normal; font-weight: 500; color: var(--kr-text-3); }

.lm-agenda { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.lm-agenda li { display: grid; grid-template-columns: 56px 1fr; gap: 8px; font-size: 12.5px; color: var(--kr-text-2); line-height: 1.35; }
.lm-agenda__j { color: var(--kr-text-3); font-variant-numeric: tabular-nums; }
.lm-arrive { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.lm-arrive li { font-size: 12.5px; color: var(--kr-text-2); line-height: 1.35; }
.lm-arrive li:last-child { color: var(--kr-text); font-weight: 600; }

/* Le post-it : le seul endroit où l'on parle au joueur, pas à l'éditeur qu'il joue.
   Le papier est une IMAGE qui remplit tout le bloc : rien ne sépare le texte de son bord
   à part ce rembourrage, et il était trop maigre — l'écriture partait du pli. Plus à
   gauche qu'à droite, comme une marge de cahier, et plus bas pour dégager la corne. */
/* ⚠️ Le post-it porte un ruban adhésif QUI DÉPASSE en haut. `clip-path` coupant aussi les
   enfants, la feuille découpée ne peut pas le contenir : elle passe donc sur un ::before, et
   le ruban reste dans l'élément, non découpé. */
.lm-postit {
  /* ⚠️ PAS DE `z-index` ICI. `position: relative` seul ne crée PAS de contexte
     d'empilement ; y ajouter un z-index, si. Et un contexte d'empilement EMPRISONNE
     l'infobulle du glossaire, qui vit à l'intérieur du post-it depuis qu'on y glose le
     vocabulaire : elle passait alors sous le dossier et sous les cartes de décision au lieu
     de passer par-dessus. Régression introduite le 1er août avec le papier en CSS pur, vue
     par Guillaume. Le ::before descend derrière le texte par son propre z-index négatif,
     ce qui suffit et n'enferme rien. */
  position: relative; padding: 28px 26px 34px 30px;
  color: #40372a; transform: rotate(-1.2deg);
}
.lm-postit::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(158deg, #fbf6e6, #efe6cb 58%, #e4d8b6);
  -webkit-clip-path: var(--lm-dechirure); clip-path: var(--lm-dechirure);
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.5));
}
.lm-postit::after {
  content: ""; position: absolute; top: -10px; left: 50%; width: 66px; height: 22px;
  transform: translateX(-50%) rotate(-3deg);
  background: url("img/bureau/ruban.webp") no-repeat center / contain; opacity: .9;
}
.lm-postit__titre {
  font-size: 9.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: #6b4fa8; margin: 0 0 8px;
}
.lm-postit__texte {
  margin: 0; font-size: 14px; line-height: 1.5;
  font-family: "Bradley Hand", "Segoe Script", "Snell Roundhand", "Apple Chancery", cursive;
  font-style: italic;
}

/* ---------- la suite d'une décision ---------- */
.lm-suite {
  background: var(--kr-surface); border: 1px solid var(--kr-border); border-radius: 14px;
  padding: 26px 28px 24px; box-shadow: var(--kr-shadow);
  animation: lm-pose .24s ease-out;
}
.lm-suite__tampon {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 13px; border-radius: 999px; border: 2px solid currentColor;
  transform: rotate(-2deg);
}
.lm-suite__tampon svg { width: 15px; height: 15px; }
.lm-suite__tampon.est-signe { color: var(--kr-score-good); }
.lm-suite__tampon.est-refus { color: var(--kr-text-3); }
.lm-suite__phrase {
  font-family: Iowan Old Style, Palatino, "Palatino Linotype", Georgia, serif;
  font-size: 20px; line-height: 1.4; color: var(--kr-text); margin: 0 0 16px; max-width: 52ch;
}
.lm-suite ul { margin: 0 0 20px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.lm-suite li { font-size: 14.5px; color: var(--kr-text-2); display: flex; gap: 9px; align-items: baseline; }
.lm-suite li::before { content: "·"; color: var(--kr-link); font-weight: 700; }

/* ---------- pied de partie ---------- */
.lm-btn {
  font: inherit; cursor: pointer; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 10px 18px; border-radius: 10px;
  border: 1px solid var(--kr-border); background: var(--kr-surface-2); color: var(--kr-text);
  font-size: 14px; font-weight: 700;
}
.lm-btn:hover { background: #2c2c39; border-color: #43434f; }
.lm-btn--premier { background: var(--kr-primary); border-color: var(--kr-primary); color: #fff; }
.lm-btn--premier:hover { background: var(--kr-primary-600); }
.lm-pied { margin-top: 22px; text-align: center; }
.lm-pied button {
  font: inherit; font-size: 13px; background: none; border: 0; cursor: pointer;
  color: var(--kr-text-3); text-decoration: underline; text-underline-offset: 3px; padding: 6px;
}
.lm-pied button:hover { color: var(--kr-text-2); }
/* le contour par défaut du navigateur se voit mal sur ce fond : on le pose nous-mêmes */
.lm-pied button:focus-visible, .lm-btn:focus-visible {
  outline: 2px solid var(--kr-link); outline-offset: 3px;
}
.lm-confirme {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center;
  margin-top: 20px; font-size: 14px; color: var(--kr-text-2);
}
.lm-panne {
  border: 1px solid var(--kr-border); border-left: 3px solid var(--kr-score-low);
  border-radius: 8px; padding: 12px 14px; margin: 0 0 14px; font-size: 14px; color: var(--kr-text-2);
}

/* ---------- ordinateur portable : la colonne de droite passe dessous ---------- */
@media (max-width: 1180px) {
  .lm-plateau { grid-template-columns: 210px minmax(0, 1fr); }
  /* ⚠️ `--seul` (l'intro, le bilan, tout écran sans colonnes latérales) doit être REDIT ici :
     la règle de base est écrasée par celle-ci, et entre 900 et 1180 px le dossier se
     retrouvait dans une colonne de 210 px, collé à gauche, avec le titre cassé mot par mot.
     C'est toute la zone tablette en paysage et les petits portables. */
  .lm-plateau--seul { grid-template-columns: minmax(0, 1fr); }
  .lm-cote {
    grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: flex-start;
  }
  .lm-cote > * { flex: 1 1 240px; }
  /* la bande rétrécit : la réserve du texte doit suivre, elle est branchée sur la même
     variable et n'a donc rien à redéclarer ici */
  .lm-dossier { --lm-extraits-l: min(40%, 340px); }
}

/* ---------- tablette : une seule colonne, les séries en bandeau ---------- */
@media (max-width: 900px) {
  .lm-plateau { grid-template-columns: minmax(0, 1fr); }
  .lm-series ul {
    flex-direction: row; overflow-x: auto; padding-bottom: 4px;
    scroll-snap-type: x proximity; margin-inline: -16px; padding-inline: 16px;
  }
  .lm-series li { flex: 0 0 220px; scroll-snap-align: start; }
  .lm-serie { height: 100%; }
  /* le décor s'efface avant l'information : les extraits reprennent leur place dans le flux */
  .lm-extraits {
    position: static; width: auto; max-width: none; margin: 0 0 18px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  }
  .lm-extrait--2 { transform: rotate(1deg); width: 100%; margin-left: 0; }
  .lm-extrait--1 { transform: rotate(-1deg); }
  .lm-main { max-width: none; }
  .lm-pitch, .lm-probleme, .lm-credits, .lm-dossier__titre, .lm-apres, .lm-manque { max-width: none; }
  /* les extraits sont revenus dans le flux : plus rien à réserver à droite */
  .lm-dossier.est-illustre .lm-pitch,
  .lm-dossier.est-illustre .lm-probleme,
  .lm-dossier.est-illustre .lm-credits,
  .lm-dossier.est-illustre .lm-dossier__titre { padding-right: 0; }
  .lm-mesures { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .lm-mesure { border-right: 0; border-top: 1px solid rgba(0,0,0,.1); }
  .lm-mesure:nth-child(odd) { border-right: 1px solid rgba(0,0,0,.1); }
}

/* ---------- téléphone ---------- */
@media (max-width: 700px) {
  .lm-page .kj-main { padding: 14px 12px 26px; }
  .lm-tampon { width: 88px; height: 88px; top: 14px; right: 16px; }
  .lm-dossier.est-tamponne .lm-dossier__titre { padding-right: 0; margin-top: 76px; }
  .lm-tampon b { font-size: 16px; }
  .lm-page::before { opacity: .5; }        /* le décor recule encore : l'écran est petit */
  .lm-entete { gap: 12px; }
  /* ⚠️ La barre de jauges défile en PLEINE LARGEUR (margin-inline négatif de 12 px). Sans
     couper ici, ces 12 px débordent du document : toute la page glisse à l'horizontale sur
     mobile, ce qui se lit comme un défaut de fabrication. On coupe sur le conteneur, pas sur
     .lm-page, pour ne pas emprisonner le décor en position fixe. */
  .lm-page .kj-main { overflow-x: clip; }   /* (aussi posé hors media query, voir plus haut) */
  /* les jauges défilent à l'horizontale plutôt que de manger l'écran */
  .lm-ressources {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity;
    margin-inline: -12px; padding: 0 12px 4px; scrollbar-width: none;
    /* sans ça, l'accroche de la première jauge tombe à 12 px (la largeur du débord) et la
       bande s'ouvre déjà décalée : elle se croit défilée, et fond son bord gauche pour rien */
    scroll-padding-left: 12px;
  }
  .lm-ressources::-webkit-scrollbar { display: none; }
  .lm-res { flex: 0 0 auto; scroll-snap-align: start; }
  .lm-onglet { padding: 8px 11px 10px; }
  .lm-onglet__quoi { display: none; }      /* le sous-titre tient mal sur un onglet de 90 px */
  .lm-dossier { padding: 22px 18px 0; }
  .lm-dossier::after { left: 18px; width: 22px; height: 52px; }
  .lm-dossier__onglet { margin-left: 30px; }
  .lm-echeance { position: static; display: inline-flex; margin: 0 0 12px; transform: none; }
  .lm-mesures { margin-inline: -18px; }
  .lm-choix-grille { grid-template-columns: minmax(0, 1fr); }
  .lm-choix { min-height: 0; }
  .lm-jaquettes { display: flex; overflow-x: auto; gap: 10px; scroll-snap-type: x proximity; }
  .lm-jaq { flex: 0 0 100px; scroll-snap-align: start; }
  .lm-cote { flex-direction: column; }
  .lm-cote > * { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .lm-glose { transition: none; }
  .lm-dossier.est-neuf, .lm-suite { animation: none; }
  .lm-choix, .lm-onglet, .lm-serie { transition: none; }
  .lm-choix:hover { transform: none; }
}

/* ---------- le nom sur la porte ----------
   Un champ, une ligne, et tout le jeu parle ensuite de VOTRE maison. Il vit dans le papier du
   dossier d'intro : il doit donc se lire comme une mention manuscrite, pas comme un formulaire. */
.lm-baptise {
  display: flex; flex-direction: column; gap: 6px;
  margin: 18px 0 6px; max-width: 34ch;
}
.lm-baptise label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--lm-encre-3);
}
.lm-baptise input {
  font: inherit; font-size: 17px; color: var(--lm-encre);
  background: rgba(0,0,0,.03); border: 1px solid rgba(0,0,0,.18);
  border-bottom-width: 2px; border-radius: 6px; padding: 8px 11px;
}
.lm-baptise input::placeholder { color: var(--lm-encre-3); opacity: .7; }
.lm-baptise input:focus-visible { outline: 2px solid var(--kr-link); outline-offset: 1px; }

/* ---------- les quatre axes du bilan ----------
   Un score sans décomposition est un chiffre ; décomposé, il devient une liste de choses qu'on
   aurait pu faire, et c'est ce qui donne envie de rejouer autrement. */
.lm-axes { margin: 4px 0 20px; }
.lm-axes__note { display: flex; align-items: baseline; gap: 7px; margin: 0 0 10px; }
.lm-axes__note b { font-size: 34px; font-weight: 700; color: var(--lm-encre); font-variant-numeric: tabular-nums; }
.lm-axes__note span { font-size: 12px; color: var(--lm-encre-3); }
.lm-axes ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; max-width: 42ch; }
.lm-axes li { display: grid; grid-template-columns: 8.5ch 1fr 5.5ch; align-items: center; gap: 10px; }
.lm-axes__nom { font-size: 12px; color: var(--lm-encre-2); }
.lm-axes__jauge { height: 7px; border-radius: 99px; background: rgba(0,0,0,.10); overflow: hidden; }
.lm-axes__jauge i { display: block; height: 100%; border-radius: 99px; background: var(--kr-primary); }
.lm-axes__val { font-size: 12px; color: var(--lm-encre); text-align: right; font-variant-numeric: tabular-nums; }
.lm-axes__val em { font-style: normal; color: var(--lm-encre-3); }
/* la glose de faillite : elle dit ce que le chiffre mesure, elle ne doit pas peser autant
   que lui. Petite, en encre pâle, décrochée par un filet. */
.lm-axes__glose {
  margin: 12px 0 0; padding-top: 10px; border-top: 1px solid rgba(0,0,0,.12);
  font-size: 13px; line-height: 1.5; color: var(--lm-encre-3);
}
/* ce que dirait la fin si elle tombait aujourd'hui, au bas du relevé */
.lm-sifin {
  margin: 14px 0 0; padding-top: 12px; border-top: 1px solid rgba(0,0,0,.12);
  font-size: 13px; color: var(--lm-encre-2); max-width: 46ch;
}
.lm-sifin b { color: var(--lm-encre); }

/* ---------- la notice ----------
   L'article qu'on lirait vingt ans plus tard sur cette maison. Elle se lit comme une page
   d'encyclopédie posée sur le papier du dossier : colonne étroite, texte au fil, et le nom de
   la maison en tête comme un titre d'entrée. */
.lm-notice {
  margin: 4px 0 22px; padding: 16px 0 0; border-top: 1px solid rgba(0,0,0,.14);
  max-width: 54ch;
}
.lm-notice h3 {
  margin: 0 0 10px; font-family: var(--lm-serif, "Iowan Old Style", Palatino, Georgia, serif);
  font-size: 21px; font-weight: 600; color: var(--lm-encre);
}
.lm-notice p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.62; color: var(--lm-encre-2); }
.lm-notice i { font-style: italic; color: var(--lm-encre); }
.lm-notice__source { font-size: 12px; font-style: italic; color: var(--lm-encre-3); margin-top: 14px; }
.lm-notice a { color: var(--kr-link); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- le mur du bureau ----------
   Ce que la maison a déjà réussi, et qui peut être battu. Écrit comme des étiquettes punaisées,
   pas comme un tableau de bord. */
.lm-mur ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.lm-mur li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; }
.lm-mur__quoi { font-size: 11px; color: var(--kr-text-3); text-transform: uppercase; letter-spacing: .07em; }
.lm-mur__val { grid-row: 1 / 3; align-self: center; font-size: 17px; font-weight: 700;
               color: var(--kr-text); font-variant-numeric: tabular-nums; }
.lm-mur__sous { font-size: 12px; color: var(--kr-text-2); }

/* ---------- le programme de l'année ----------
   Rappelé à chaque relevé : un engagement qu'on oublie n'engage personne. */
.lm-engagement {
  display: flex; align-items: flex-start; gap: 9px; margin: 0 0 16px; max-width: 46ch;
  padding: 9px 12px; border-radius: 8px;
  background: rgba(109,40,217,.08); border: 1px solid rgba(109,40,217,.20);
  font-size: 13.5px; line-height: 1.5; color: var(--lm-encre-2);
}
.lm-engagement svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--kr-link); }
.lm-engagement b { color: var(--lm-encre); }
.lm-engagement.est-tenu { background: rgba(63,113,80,.10); border-color: rgba(63,113,80,.28); }
.lm-engagement.est-tenu svg { color: #3f7150; }

/* ---------- le rayon des maisons passées ----------
   Sans compte ni serveur : huit fiches dans le navigateur, sous une clé que « Reprendre une
   maison » ne touche jamais. On ne repart pas de rien, on ouvre la suivante. */
/* ⚠️ ET UNE MARGE EN BAS. Le dossier a `padding: 30px 30px 0` : son bas est nul, parce que
   c'est la bande de mesures qui vient d'ordinaire le fermer. Le bilan n'en a pas, donc la
   dernière maison du rayon touchait le bord du papier. Signalé par Guillaume. */
.lm-rayon {
  margin: 22px 0 30px; padding-top: 16px;
  border-top: 1px solid rgba(0,0,0,.12); max-width: 46ch;
}
.lm-rayon h3 {
  margin: 0 0 10px; font-size: 10.5px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--lm-encre-3);
}
.lm-rayon ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.lm-rayon li {
  display: grid; grid-template-columns: 1fr auto; gap: 1px 10px;
  padding: 8px 10px; border-radius: 8px; background: rgba(0,0,0,.035);
}
.lm-rayon li.est-celle-ci { background: rgba(109,40,217,.10); }
.lm-rayon__nom { font-size: 14px; font-weight: 600; color: var(--lm-encre); }
.lm-rayon__verdict { grid-column: 1; font-size: 12.5px; color: var(--lm-encre-2); }
.lm-rayon__note {
  grid-row: 1 / 3; align-self: center; font-size: 20px; font-weight: 700;
  color: var(--lm-encre); font-variant-numeric: tabular-nums;
}
.lm-rayon__sous { grid-column: 1; font-size: 11.5px; color: var(--lm-encre-3); }
.lm-rayon__mot {
  margin: 16px 0 0; font-size: 14px; line-height: 1.5; color: var(--lm-encre);
  max-width: 46ch; font-style: italic;
}