:root {

  color-scheme: dark;
  accent-color: var(--bleu);

  --fond: #1e1f22;
  --flanc: #2b2d31;
  --aire: #313338;
  --carte: #383a40;
  --carte-survol: #404249;
  --ligne: #3f4147;

  --texte: #f2f3f5;
  --doux: #b5bac1;
  --faible: #949ba4;

  --fond-gris: #40434a;   --vif-gris: #5c5e66;
  --fond-bleu: #33407a;   --vif-bleu: #8b96ff;
  --fond-vert: #1f5237;   --vif-vert: #45d17f;

  --fond-ambre: #8a4508;  --vif-ambre: #f0b232;
  --fond-violet: #4a3172; --vif-violet: #b08bff;
  --fond-rose: #6d2d52;   --vif-rose: #ff8ac4;
  --fond-cyan: #175c63;   --vif-cyan: #4dd0d8;

  --bleu: #5865f2;
  --bleu-clair: #7983f5;
  --vert: #23a55a;
  --jaune: #f0b232;
  --rouge: #da373c;

  --rond: 8px;
  --rond-large: 12px;

  --controle-h: 38px;
  --controle-pad-y: 8px;
  --controle-pad-x: 12px;
  --controle-fs: 14px;
  --controle-lh: 1.4;

  --ecriture-fs: 15px;

  --geste-t: 28px;

  --plan-contenu: 1;
  --plan-tiroir: 20;
  --plan-modale: 30;
  --plan-menu: 40;
  --plan-image: 50;

  --plan-bulle: 60;

  --voile-0: rgba(0, 0, 0, .1);
  --voile-1: rgba(0, 0, 0, .25);
  --voile-2: rgba(0, 0, 0, .45);
  --voile-3: rgba(0, 0, 0, .6);

  --voile-4: rgba(0, 0, 0, .85);

  --lueur-1: rgba(255, 255, 255, .04);
  --lueur-2: rgba(255, 255, 255, .08);
  --lueur-3: rgba(255, 255, 255, .14);

  --ombre-posee: 0 2px 8px var(--voile-1);
  --ombre-levee: 0 10px 26px var(--voile-1);
  --ombre-flottante: 0 14px 32px var(--voile-2);

  --flanc-large: 260px;
  --haut-haut: 64px;
}

@media (pointer: coarse), (max-width: 820px) {
  :root {
    --controle-fs: 16px;
    --controle-h: 44px;
    --ecriture-fs: 16px;
  }

  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  textarea,
  select,
  [contenteditable] { font-size: max(16px, var(--controle-fs)); }

  .tags .tag-champ,
  .tv-cherche input,
  .accueil-topics input { font-size: 16px; }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--aire);
  color: var(--texte);
  font: 15px/1.5 "gg sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

body.app {
  display: grid;
  grid-template-columns: var(--flanc-large) 1fr;
  grid-template-rows: var(--haut-haut) 1fr;
  grid-template-areas: "flanc haut" "flanc aire";

  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.flanc {
  grid-area: flanc;

  overflow-y: auto;
  background: var(--flanc);
  border-right: 1px solid var(--fond);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.marque {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  color: var(--texte);
  text-decoration: none;
  font-size: 16px;
}
.sceau {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 12px;
  background: var(--bleu);
  color: #fff;
  font-weight: 700;
}

.menu { display: flex; flex-direction: column; gap: 2px; }

.entree {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--rond);
  color: var(--doux);
  text-decoration: none;
}
@media (hover: hover) {
.entree:hover { background: var(--carte); color: var(--texte); } }
.entree.actif { background: var(--carte); color: #fff; }
.entree svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

.point {
  flex: none;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--faible);
}
.point.brouillon { background: var(--faible); }
.point.vote { background: var(--bleu); }
.point.programmee { background: var(--vert); }
.point.passee { background: var(--vif-gris); }

.haut {
  grid-area: haut;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 max(28px, env(safe-area-inset-right)) 0 max(28px, env(safe-area-inset-left));
  background: var(--aire);
  border-bottom: 1px solid var(--ligne);
}

.moi {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  margin-left: auto;
  padding-left: 12px;

  border-left: 1px solid var(--ligne);
  color: var(--doux);
}
.moi-qui {
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
}

.moi-qui b {
  font-weight: 500; font-size: 14px;
  max-width: 140px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.moi-partir {
  display: grid; place-items: center;
  width: 32px; height: 32px; flex: none;
  padding: 0; border: 0; border-radius: 8px;
  background: transparent; color: var(--faible); cursor: pointer;
}
.moi-partir svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
@media (hover: hover) {
.moi-partir:hover { background: rgba(233,90,90,.18); color: #f3a3a3; } }

@media (max-width: 620px) {

  .moi { padding-left: 4px; gap: 2px; border-left: 0; }
  .moi-qui b { display: none; }
}
.pastille-avatar {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bleu);
  color: #fff; font-weight: 600; font-size: 14px;
}

.aire {
  grid-area: aire;
  padding:
    28px
    max(32px, env(safe-area-inset-right))
    calc(48px + env(safe-area-inset-bottom))
    max(32px, env(safe-area-inset-left));

  overscroll-behavior: contain;
  overflow-x: auto;

  overflow-y: scroll;
  scrollbar-gutter: stable;
}

.fil { color: var(--faible); margin-bottom: 10px; }

.entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
}
.entete h1 { font-size: 34px; font-weight: 700; margin: 0; letter-spacing: -.02em; }
.gestes { display: flex; gap: 14px; align-items: center; }

.bouton:disabled,
.bouton[aria-disabled="true"] {
  opacity: .45;
  cursor: default;
  filter: saturate(.6);
}
@media (hover: hover) {
.bouton:disabled:hover { filter: saturate(.6); } }

.bouton {

  display: inline-flex; align-items: center; justify-content: center; gap: 8px;

  white-space: nowrap;

  min-height: var(--controle-h);
  padding: 0 16px;
  border: 0;
  border-radius: var(--rond);
  font: inherit;
  font-size: var(--controle-fs);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}
.bouton.primaire { background: var(--bleu); color: #fff; }
@media (hover: hover) {
.bouton.primaire:hover { background: var(--bleu-clair); } }
.bouton.fantome { background: var(--carte); color: var(--doux); }
@media (hover: hover) {
.bouton.fantome:hover { background: var(--carte-survol); color: var(--texte); } }

.tableau {
  display: grid;
  grid-template-columns: repeat(4, minmax(260px, 1fr));
  gap: 16px;
  align-items: start;
}

.chapeau {
  display: flex;
  align-items: center;
  gap: 10px;

  min-height: 47px;
  padding: 12px 16px;
  border-radius: var(--rond-large);
  font-weight: 600;
  margin-bottom: 14px;
}

.chapeau.gris   { background: var(--fond-gris); }
.chapeau.bleu   { background: var(--fond-bleu); }
.chapeau.bleu   .point { background: var(--vif-bleu); }
.chapeau.vert   { background: var(--fond-vert); }
.chapeau.vert   .point { background: var(--vif-vert); }
.chapeau.sombre { background: #2c2d31; color: var(--faible); }
.chapeau.sombre .point { background: var(--vif-gris); }

.compte { margin-left: auto; opacity: .65; font-weight: 500; }

.pile { display: flex; flex-direction: column; gap: 12px; }

.fiche {
  position: relative;
  background: var(--carte);
  border: 1px solid transparent;
  border-radius: var(--rond-large);
  padding: 14px;
}
@media (hover: hover) {
.fiche:hover { background: var(--carte-survol); border-color: var(--ligne); } }
.couvre { position: absolute; inset: 0; border-radius: inherit; z-index: 0; }
.fiche > *:not(.couvre) { position: relative; z-index: var(--plan-contenu); pointer-events: none; }

.fiche :is(button, a, input, textarea, select, label):not(.couvre) { pointer-events: auto; }

.fiche h3 {
  font-size: 15px; font-weight: 600;
  margin: 12px 0 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.rang { display: flex; align-items: center; gap: 8px; }

.etiquette {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
}
.etiquette.vote { background: var(--fond-bleu); color: #b3bbff; }
.etiquette.direct { background: var(--fond-vert); color: #7ae0a3; }

.menu-carte {
  margin-left: auto;
  border: 0; background: none;
  color: var(--faible);
  font-size: 15px; line-height: 1;
  padding: 4px 8px; border-radius: 6px;
  cursor: pointer;
  opacity: 0;
}
@media (hover: hover) {
.fiche:hover .menu-carte { opacity: 1; } }
@media (hover: hover) {
.menu-carte:hover { background: var(--rouge); color: #fff; } }

:root { --h-planche: 118px; }

.planche {
  display: grid; gap: 6px; margin-top: 12px;
  aspect-ratio: 16 / 9;
}
.planche.n1 { grid-template-columns: 1fr; }
.planche.n2 { grid-template-columns: repeat(2, 1fr); }
.planche.n3 { grid-template-columns: repeat(3, 1fr); }

.jaquette {
  height: 100%; min-width: 0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--fond);
  display: grid; place-items: center;
  color: var(--faible);
  font-weight: 600;
}

.jaquette img { width: 100%; height: 100%; object-fit: cover; display: block; }

.vide-planche {

  aspect-ratio: 16 / 9;
  border: 1px dashed var(--ligne);
  border-radius: 8px;
  margin-top: 12px;
}

.pied {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 10px;
  min-height: 22px;
}
.menu-mot { color: var(--faible); }
.menu-val { color: var(--doux); text-transform: capitalize; }

/* ── Autres bots : une règle par bot ───────────────────────────────────── */
.regle-bot {
  margin: 0 0 16px; padding: 14px 16px;
  background: var(--flanc); border-radius: var(--rond-large);
}
.regle-tete { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.regle-tete .nom { max-width: 220px; }
.regle-tete .prefixes { max-width: 160px; font-family: var(--mono, monospace); }
.regle-tete .oter { margin-left: auto; }

/* Les salons sont des pastilles : une liste à cocher sur trente salons ferait
   une colonne plus haute que l'écran. */
.regle-salons, .reserve-salons { display: flex; flex-wrap: wrap; gap: 6px; }
.regle-salons .salon, .reserve-salons .salon {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px; cursor: pointer;
  background: var(--carte); color: var(--doux); font-size: 13px;
}
.regle-salons .salon:hover, .reserve-salons .salon:hover { background: var(--carte-survol); }
.regle-salons .salon.pris { background: var(--bleu); color: #fff; }
.regle-salons .salon input, .reserve-salons .salon input { accent-color: #fff; }

/* La réserve EFFACE des messages. Elle ne porte donc pas la couleur de « le bot
   répond ici », qui n'enlève rien à personne : cocher les deux listes n'a pas
   du tout les mêmes conséquences, et la page doit le montrer sans le dire. */
.reserve-salons .salon.pris { background: var(--rouge); color: #fff; }

.legende {
  margin: 0 0 6px; font-size: 12px; color: var(--faible);
  text-transform: uppercase; letter-spacing: .04em;
}
.regle-reserve { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--carte); }
.ligne-reserve {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 10px; font-size: 13px; color: var(--doux);
}
.ligne-reserve .discussion { max-width: 280px; }

#regles.refuse { outline: 1px solid var(--rouge); outline-offset: 6px; border-radius: var(--rond-large); }

/* Le lien à donner, en tête : c'est le premier geste de cette page. */
.invitation {
  margin: 0 0 28px; padding: 16px 20px;
  background: var(--flanc); border-radius: var(--rond-large);
}
.invitation .quoi { display: block; margin-bottom: 8px; }
.invitation .sous { display: block; margin-top: 8px; max-width: 62ch; }
.invitation input { min-width: min(520px, 100%); }

/* ── Serveurs invités : la grille qu'on voit en arrivant ───────────────── */
/*
 * On répond d'abord à « à qui l'ai-je prêté » : des écussons, en grand, et
 * rien d'autre. Les réglages du serveur choisi prennent ensuite toute la page.
 *
 * `minmax(150px, 1fr)` : quatre ou cinq tuiles par ligne sur un écran large,
 * deux sur un téléphone, sans media query — la grille se replie toute seule.
 */
.invite-grille {
  display: grid; gap: 12px; margin: 0 0 28px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.invite-tuile {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 20px 14px; border-radius: var(--rond-large);
  background: var(--flanc); border: 1px solid transparent;
  color: inherit; font: inherit; text-align: center; cursor: pointer;
}
@media (hover: hover) {
  .invite-tuile:hover { background: var(--carte); border-color: var(--ligne); }
}
.invite-tuile:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }

/* Le nom passe à la ligne plutôt que de déborder : les serveurs Discord
 * s'appellent parfois « Le club de la nuit et des jours qui suivent ». */
.invite-tuile-nom { font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.invite-tuile-compte { font-size: 12px; color: var(--doux); }

/* ── Serveurs invités : un bloc par serveur ────────────────────────────── */
.invite {
  margin: 0 0 28px; padding: 18px 20px;
  background: var(--flanc); border-radius: var(--rond-large);
}

.invite-tete {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
  justify-content: space-between; margin-bottom: 16px;
}

.invite-qui { display: flex; gap: 12px; align-items: center; }
.invite-mots { display: flex; flex-direction: column; gap: 2px; }
.invite-mots b { font-size: 16px; }

.invite-ecu {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none;
}
.invite-ecu.vide {
  display: grid; place-items: center;
  background: var(--carte); color: var(--doux); font-weight: 600;
}

/* Le même écusson, à la taille d'une vignette qu'on reconnaît de loin. */
.invite-ecu.grand { width: 64px; height: 64px; font-size: 24px; }

/* Le retour se lit au-dessus du nom, pas à côté. */
.invite-retour { align-self: flex-start; margin: 0 0 14px; }

/* L'adresse se copie plus souvent qu'elle ne se lit : le bouton est à côté. */
.invite-lien { display: flex; gap: 8px; align-items: center; }
.invite-lien input { min-width: 260px; color: var(--doux); }

/* ── Ce serveur : les domaines qu'on prête ─────────────────────────────── */
.note-edition {
  max-width: 62ch; margin: 0 0 20px; color: var(--doux); line-height: 1.6;
}

.grille-domaines {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.domaine {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border-radius: 12px;
  background: var(--carte); border: 1px solid var(--ligne);
  cursor: pointer;
}
.domaine:hover { background: var(--carte-survol); }
.domaine input { margin-top: 3px; accent-color: var(--bleu); }

.domaine-mots { display: flex; flex-direction: column; gap: 3px; }
.domaine-mots b { font-weight: 600; }
.domaine-mots .sous { font-size: 12px; color: var(--doux); line-height: 1.45; }

/* Ce qui ne se prête pas reste lisible, mais ne se clique pas. */
.domaine.bride { cursor: default; opacity: .6; }
.domaine.bride:hover { background: var(--carte); }
.bride-mot { font-style: italic; }

/* Ce que le prochain clic va faire, dit avant qu'on le fasse. */
.dit-mode { margin: 8px 0 0; font-size: 12px; color: var(--doux); }

.alerte {
  padding: 4px 10px;
  border-radius: 20px;
  background: #4a3a1e;
  color: #f5c46a;
  font-size: 13px;
}

.creux {
  margin: 0;
  padding: 20px 16px;
  border: 1px dashed var(--ligne);
  border-radius: var(--rond-large);
  color: var(--faible);
  text-align: center;
}

.rameau-nom {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-transform: capitalize;
}

body:not(.app) { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; }

.page-vide { text-align: center; padding: 40px; }
.page-vide h1 { font-size: 28px; font-weight: 600; margin: 0 0 16px; }
.page-vide p { color: var(--faible); margin: 0; }
.lien {
  display: inline-block;
  padding: 10px 20px;
  border-radius: var(--rond);
  background: var(--bleu);
  color: #fff;
  text-decoration: none;
}

.menu-carte.arme { background: var(--rouge); color: #fff; opacity: 1; font-size: 13px; }

.avancer {
  margin-left: auto;
  border: 0;
  background: var(--ligne);
  color: var(--doux);
  font: inherit;
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 20px;
  cursor: pointer;
  opacity: 0;
}
@media (hover: hover) {
.fiche:hover .avancer { opacity: 1; } }
@media (hover: hover) {
.avancer:hover { background: var(--bleu); color: #fff; } }
.avancer.refuse { background: #4a3a1e; color: #f5c46a; opacity: 1; }
.avancer + .menu-carte { margin-left: 0; }

.titre-section {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  padding: 10px 0;
}
.titre-section h2 { font-size: 16px; font-weight: 600; margin: 0; }

.chevron {
  width: 22px; height: 22px;
  border: 0; background: none;
  cursor: pointer;
  position: relative;
}
.chevron::before {
  content: '';
  position: absolute; inset: 0;
  margin: auto;
  width: 8px; height: 8px;
  border-right: 2px solid var(--faible);
  border-bottom: 2px solid var(--faible);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .15s;
}
.replie .chevron::before { transform: rotate(-45deg) translate(-2px, 2px); }
.replie .corps { display: none; }

.repliable { margin-bottom: 20px; }
.corps { display: flex; flex-direction: column; gap: 2px; }

.ligne {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--rond);
  background: var(--carte);
  color: inherit;
  text-decoration: none;
}
@media (hover: hover) {
.ligne:hover { background: var(--carte-survol); } }
.ligne b { font-weight: 500; }
.ligne .alerte { margin-left: auto; }
.ligne .menu-val { margin-left: auto; }

.colonne.repliee { }
.colonne.repliee .pile { display: none; }
.colonne.repliee .chapeau { opacity: .6; }

.affiche-large {
  display: block;
  position: relative;
  height: 260px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--carte);
  color: inherit;
  text-decoration: none;
  margin-bottom: 20px;
}
.affiche-large .derriere {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .55;
}
.affiche-large .dessus {
  position: absolute; inset: auto 0 0 0;
  padding: 28px;
  background: linear-gradient(transparent, var(--voile-4));
}
.affiche-large h2 { font-size: 28px; font-weight: 700; margin: 10px 0 4px; }
.affiche-large p { margin: 0; color: var(--doux); text-transform: capitalize; }

.creux.grand {
  display: grid;
  place-items: center;
  height: 180px;
  margin-bottom: 20px;
  text-decoration: none;
}

.compteurs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 32px; }
.compteur {
  background: var(--carte);
  border-radius: var(--rond-large);
  padding: 20px 20px;
  color: inherit;
  text-decoration: none;
}
@media (hover: hover) {
.compteur:hover { background: var(--carte-survol); } }
.compteur b { display: block; font-size: 28px; font-weight: 700; line-height: 1.25; }
.compteur span { color: var(--faible); }

.rayons { display: flex; flex-direction: column; }

.affiche-large p,
.menu-val,
.rameau-nom,
.fiche .date { text-transform: none; }
.affiche-large p::first-letter,
.menu-val::first-letter,
.rameau-nom::first-letter { text-transform: uppercase; }

.proprietes { max-width: 900px; }

.propriete {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--ligne);
}
.propriete:last-child { border-bottom: 0; }

@media (max-width: 620px) {
  .propriete { flex-direction: column; align-items: stretch; gap: 6px; }
  .quoi { width: auto; padding-top: 0; }

  .valeur { flex: none; width: 100%; }
}

:is(.panneau, .cadence, .fiche-neuve, .fiche) :is(.champ, input[type="text"], input[type="search"], textarea, .liste-tete, .date-tete, .date, .choix, .visage-choix) {
  background: var(--fond);
  border-color: var(--ligne);
}

:is(.panneau, .cadence, .fiche-neuve, .fiche) .bouton.fantome { background: var(--fond); }
@media (hover: hover) {
:is(.panneau, .cadence, .fiche-neuve, .fiche) .bouton.fantome:hover { background: var(--carte-survol); } }

.proprietes .champ:focus,
.proprietes input[type="text"]:focus,
.proprietes input[type="search"]:focus,
.proprietes textarea:focus { border-color: var(--bleu); }

.quoi {
  flex: none;
  width: 130px;
  padding-top: 6px;
  color: var(--faible);
}
.valeur { flex: 1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.valeur.en-ligne { gap: 10px; }
.fleche { color: var(--faible); }

.etiquette.neutre { background: var(--ligne); color: var(--doux); }

.date, .choix {
  min-height: var(--controle-h);
  border: 1px solid transparent;
  background: var(--carte);
  color: var(--texte);
  font: inherit;
  font-size: var(--controle-fs);
  line-height: var(--controle-lh);
  padding: var(--controle-pad-y) var(--controle-pad-x);
  border-radius: var(--rond);
  cursor: pointer;
}
@media (hover: hover) {
.date:hover, .choix:hover { border-color: var(--ligne); background: var(--carte-survol); } }
.date:focus, .choix:focus { outline: 0; border-color: var(--bleu); }
.date:disabled, .choix:disabled { opacity: .5; cursor: default; }
.date::-webkit-calendar-picker-indicator { filter: invert(.7); cursor: pointer; }

.pris { border-color: var(--vert) !important; }
.rate { border-color: var(--rouge) !important; }

.pastilles { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.pastille-oeuvre {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 12px 4px 4px;
  border-radius: 20px;
  background: var(--carte);
}
.pastille-oeuvre img {
  width: 30px; height: 30px;
  border-radius: 50%;
  object-fit: cover;
}
.pastille-oeuvre b { font-weight: 500; }
.oter {
  border: 0; background: none;
  color: var(--faible);
  font-size: 16px; line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  border-radius: 50%;
}
@media (hover: hover) {
.oter:hover { color: var(--rouge); } }

.ajout {
  width: 40px; height: 40px;
  border: 1px dashed var(--ligne);
  border-radius: 50%;
  background: none;
  color: var(--faible);
  font-size: 20px;
  cursor: pointer;
}
@media (hover: hover) {
.ajout:hover { border-color: var(--bleu); color: var(--bleu); border-style: solid; } }

.voile {
  position: fixed; inset: 0;
  background: var(--voile-3);
  display: grid;
  place-items: start center;
  padding-top: 12vh;
  z-index: var(--plan-modale);
}
.panneau {
  width: min(720px, 92vw);
  background: var(--flanc);
  border: 1px solid var(--ligne);
  border-radius: 16px;
  padding: 16px;
  max-height: 70vh;
  overflow: auto;
}

.grille-oeuvres {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.carte-oeuvre {
  display: block;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  padding: 0;
}

.carte-oeuvre .jaquette {
  display: block; width: 100%; height: auto;
  aspect-ratio: 2/3; margin-bottom: 8px;
}

.grille-oeuvres { align-items: start; }
.carte-oeuvre b {
  display: block;
  font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.carte-oeuvre .sous { color: var(--faible); font-size: 13px; }
@media (hover: hover) {
.carte-oeuvre:hover .jaquette { outline: 2px solid var(--bleu); outline-offset: 2px; } }
.carte-oeuvre.refuse .sous { color: #f5c46a; }

.bouton.primaire.refuse { background: #4a3a1e; color: #f5c46a; }

[hidden] { display: none !important; }

.apercu { margin-top: 36px; max-width: 900px; }
.planche-apercu {
  width: 100%;
  border-radius: var(--rond-large);
  border: 1px solid var(--ligne);
  display: block;
  background: var(--carte);
}

.avancer { opacity: 1; }
.fiche .menu-carte { opacity: 0; }
@media (hover: hover) {
.fiche:hover .menu-carte { opacity: 1; } }

.dit {
  color: var(--faible);
  align-self: center;
  text-transform: none;
}
.dit::first-letter { text-transform: uppercase; }

.bascule {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 6px 12px 6px 6px;
  border-radius: 20px;
  border: 1px solid transparent;
}
@media (hover: hover) {
.bascule:hover { background: var(--carte); } }
.bascule input { display: none; }
.bascule span {
  width: 42px; height: 24px;
  border-radius: 12px;
  background: var(--ligne);
  position: relative;
  transition: background .15s;
}
.bascule span::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--doux);
  transition: transform .15s, background .15s;
}
.bascule input:checked + span { background: var(--vert); }
.bascule input:checked + span::after { transform: translateX(18px); background: #fff; }
.bascule input:disabled + span { opacity: .4; }
.bascule b { font-weight: 500; }

.pilote { margin-top: 36px; max-width: 900px; }
.pilote .ligne.fait { opacity: .5; }
.pilote .ligne.fait b { text-decoration: line-through; }

.sondage {
  background: var(--carte);
  border-radius: var(--rond-large);
  padding: 16px 20px;
  margin-bottom: 12px;
}
.sondage.fini { opacity: .72; }
.sondage h3 { font-size: 20px; font-weight: 600; margin: 12px 0 14px; }
.sondage .rang { align-items: center; }
.sondage .menu-carte { opacity: .5; margin-left: 0; }
@media (hover: hover) {
.sondage:hover .menu-carte { opacity: 1; } }
.sondage .avancer { opacity: 1; margin-left: auto; }

.barres { display: flex; flex-direction: column; gap: 8px; }
.barre-ligne { display: flex; align-items: center; gap: 14px; }
.barre-nom {
  flex: none; width: 190px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.barre-piste {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: var(--fond);
  overflow: hidden;
}
.barre-plein {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--bleu);
  transition: width .22s;
}
.barre-chiffre { flex: none; width: 30px; text-align: right; color: var(--faible); }

.reponses { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.reponses .champ { margin-bottom: 0; }
.reglages { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.fin-panneau { margin-top: 18px; justify-content: flex-end; display: flex; }

.liste { position: relative; display: inline-block; }

.liste-tete {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 170px;
  min-height: var(--controle-h);
  padding: var(--controle-pad-y) var(--controle-pad-x);
  border: 1px solid transparent;
  border-radius: var(--rond);
  background: var(--carte);
  color: var(--texte);
  font: inherit;
  font-size: var(--controle-fs);
  line-height: var(--controle-lh);
  cursor: pointer;
  text-align: left;
}
@media (hover: hover) {
.liste-tete:hover { background: var(--carte-survol); border-color: var(--ligne); } }
.liste.ouverte .liste-tete { border-color: var(--bleu); }
.liste.vide .liste-tete span { color: var(--faible); }
.liste-tete span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.liste-tete i {
  flex: none;
  width: 8px; height: 8px;
  border-right: 2px solid var(--faible);
  border-bottom: 2px solid var(--faible);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .15s;
}
.liste.ouverte .liste-tete i { transform: rotate(-135deg) translate(-3px, -3px); }

.liste-choix {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  max-height: 280px;
  overflow: auto;
  background: var(--flanc);
  border: 1px solid var(--ligne);
  border-radius: var(--rond-large);
  padding: 6px;
  z-index: var(--plan-menu);
  box-shadow: var(--ombre-flottante);
}
.liste.ouverte .liste-choix { display: block; }

.liste-choix button {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--doux);
  font: inherit;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}
@media (hover: hover) {
.liste-choix button:hover { background: var(--carte); color: var(--texte); } }
.liste-choix button.choisi { background: var(--bleu); color: #fff; }

.datier { position: relative; display: inline-block; }

.date-tete {
  min-height: var(--controle-h);
  padding: var(--controle-pad-y) var(--controle-pad-x);
  border: 1px solid transparent;
  border-radius: var(--rond);
  background: var(--carte);
  color: var(--texte);
  font: inherit;
  font-size: var(--controle-fs);
  line-height: var(--controle-lh);
  cursor: pointer;
  white-space: nowrap;
}
.date-tete::first-letter { text-transform: uppercase; }
@media (hover: hover) {
.date-tete:hover { background: var(--carte-survol); border-color: var(--ligne); } }
.datier.ouverte .date-tete { border-color: var(--bleu); }
.datier.vide .date-tete { color: var(--faible); }

.date-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 268px;
  background: var(--flanc);
  border: 1px solid var(--ligne);
  border-radius: var(--rond-large);
  padding: 14px;
  z-index: var(--plan-menu);
  box-shadow: var(--ombre-flottante);
}
.datier.ouverte .date-menu { display: block; }

.date-mois {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.date-mois b { font-weight: 600; text-transform: capitalize; }

.fleche-mois {
  width: 28px; height: 28px;
  border: 0; border-radius: 6px;
  background: none;
  cursor: pointer;
  position: relative;
}
@media (hover: hover) {
.fleche-mois:hover { background: var(--carte); } }
.fleche-mois::before {
  content: '';
  position: absolute; inset: 0; margin: auto;
  width: 8px; height: 8px;
  border-left: 2px solid var(--doux);
  border-bottom: 2px solid var(--doux);
  transform: rotate(45deg) translate(1px, -1px);
}
.fleche-mois.apres::before { transform: rotate(-135deg) translate(1px, -1px); }

.date-entetes, .date-grille {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.date-entetes span {
  text-align: center;
  color: var(--faible);
  font-size: 13px;
  padding-bottom: 6px;
}
.date-grille button {
  aspect-ratio: 1;
  border: 0; border-radius: 6px;
  background: none;
  color: var(--doux);
  font: inherit;
  cursor: pointer;
}
@media (hover: hover) {
.date-grille button:hover { background: var(--carte); color: var(--texte); } }
.date-grille button.choisi { background: var(--bleu); color: #fff; font-weight: 600; }

.date-heure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--ligne);
}
.date-heure b { min-width: 26px; text-align: center; font-weight: 600; }
.date-heure i { color: var(--faible); font-style: normal; margin: 0 4px; }
.pas {
  width: 26px; height: 26px;
  border: 0; border-radius: 6px;
  background: var(--carte);
  color: var(--doux);
  font: inherit;
  cursor: pointer;
}
@media (hover: hover) {
.pas:hover { background: var(--bleu); color: #fff; } }

.desactive { opacity: .45; pointer-events: none; }

.aire[data-rubrique="forum"] { overflow-x: clip; }

* { scrollbar-width: thin; scrollbar-color: var(--ligne) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--ligne); border-radius: 6px; }
@media (hover: hover) {
*::-webkit-scrollbar-thumb:hover { background: var(--faible); } }

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration { -webkit-appearance: none; display: none; }

::selection { background: var(--bleu); color: #fff; }

.champ,
input[type="text"],
input[type="search"],
textarea {
  width: 100%;
  min-height: var(--controle-h);
  padding: var(--controle-pad-y) var(--controle-pad-x);

  border: 1px solid transparent;
  border-radius: var(--rond);
  background: var(--carte);
  color: var(--texte);

  font: inherit;
  font-size: var(--controle-fs);
  line-height: var(--controle-lh);

  outline: 0;

  caret-color: var(--bleu);
  transition: border-color .15s;
  -webkit-appearance: none;
  appearance: none;
}
.champ:focus,
input[type="text"]:focus,
input[type="search"]:focus,
textarea:focus { border-color: var(--bleu); }

.champ::placeholder,
input::placeholder,
textarea::placeholder { color: var(--faible); opacity: 1; }

button { font: inherit; -webkit-appearance: none; appearance: none; }

a:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }

.champ:focus-visible,
input:focus-visible,
textarea:focus-visible,
.liste-tete:focus-visible,
.date-tete:focus-visible,
.bouton:focus-visible,
.menu-carte:focus-visible,
.avancer:focus-visible,
.oter:focus-visible,
.ajout:focus-visible,
.chevron:focus-visible,

.liste-tete:focus-visible,
.date-tete:focus-visible { border-color: var(--bleu); }
.bouton:focus-visible { box-shadow: 0 0 0 2px var(--fond), 0 0 0 4px var(--bleu); }
.liste-choix button:focus-visible,
.date-grille button:focus-visible,
.pas:focus-visible,
.fleche-mois:focus-visible { background: var(--carte-survol); color: var(--texte); }
.chevron:focus-visible::before,

a { text-decoration: none; color: inherit; }
a.souligne { text-decoration: underline; }

button, input, select, textarea, optgroup { font: inherit; color: inherit; }

.bouton, .champ, .date-tete, .liste-tete, .etiquette, .fiche, .ligne,
.sondage, .compteur, .rythme li, .creux { transition: background .15s, border-color .15s, color .15s; }

img, .etiquette, .point, .sceau, .pastille-avatar { -webkit-user-drag: none; user-select: none; }

* { -webkit-tap-highlight-color: transparent; }

button, a, label, summary, .liste-tete, .date-tete, .bascule, [role="button"] {
  touch-action: manipulation;

  -webkit-touch-callout: none;
}

img { color: transparent; }

.sortie { color: var(--faible); }
@media (hover: hover) {
.sortie:hover { color: var(--texte); } }
.entree { color: var(--doux); }
.lien { background: var(--bleu); color: #fff; }

.fiche[draggable] { cursor: grab; }
.fiche.saisie { opacity: .4; cursor: grabbing; }

.colonne.accueille .pile {
  outline: 2px dashed var(--ligne);
  outline-offset: 6px;
  border-radius: var(--rond-large);
  min-height: 90px;
}
.colonne.visee .pile { outline-color: var(--bleu); background: rgba(88, 101, 242, .06); }

.dit-carte {
  margin: 10px 0 0;
  padding: 6px 10px;
  border-radius: 6px;
  background: #4a3a1e;
  color: #f5c46a;
  font-size: 13px;
}

.oter-carte {
  margin-left: auto;
  flex: none;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 6px;
  background: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s, background .15s;
}
@media (hover: hover) {
.fiche:hover .oter-carte { opacity: .6; } }
@media (hover: hover) {
.oter-carte:hover { opacity: 1; background: var(--ligne); } }
.oter-carte svg {
  width: 16px; height: 16px;
  fill: none; stroke: var(--faible); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
@media (hover: hover) {
.oter-carte:hover svg { stroke: var(--texte); } }

.oter-carte.arme { opacity: 1; background: var(--rouge); animation: bat 1.1s infinite; }
.oter-carte.arme svg { stroke: #fff; }
@keyframes bat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

[hidden] { display: none !important; }

.mur { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.debat { background: var(--carte); border-radius: var(--rond-large); padding: 16px 20px; }
.debat .rang { align-items: center; }
.debat h3 { font-size: 16px; font-weight: 600; margin: 12px 0 10px; }
.debat .oter-carte { opacity: .4; }
@media (hover: hover) {
.debat:hover .oter-carte { opacity: 1; } }

.panneau.large { width: min(860px, 94vw); }
.apercu-debat { margin-top: 16px; position: relative; }
.apercu-debat img { width: 100%; border-radius: var(--rond-large); display: block; }
.apercu-debat img:not([src]) { display: none; }
.apercu-debat .creux { padding: 48px 16px; }

.prochain {

  grid-column: span 2; max-width: none;
  display: flex; align-items: center; gap: 20px;
  padding: 20px 24px;
  border-radius: 16px; color: inherit; text-decoration: none;
  background: var(--aire);
  border: 1px solid var(--ligne);
  transition: transform .15s, box-shadow .15s;
}
@media (hover: hover) {
a.prochain:hover { transform: translateY(-2px); box-shadow: var(--ombre-levee); } }

.prochain.cine  { background: rgba(35,165,90,.16);  border-color: rgba(35,165,90,.40); }
.prochain.debat { background: rgba(121,131,245,.18); border-color: rgba(121,131,245,.42); }
.prochain.vote  { background: rgba(240,178,50,.15);  border-color: rgba(240,178,50,.38); }

.prochain-affiche {
  width: 68px; height: 102px; object-fit: cover; flex: none;
  border-radius: 12px; background: var(--carte);
  box-shadow: var(--ombre-posee);
}
.prochain-pastille {
  width: 12px; height: 12px; flex: none; border-radius: 50%;
  background: var(--faible);
}
.prochain.cine  .prochain-pastille { background: var(--vert); }
.prochain.debat .prochain-pastille { background: var(--bleu-clair); }
.prochain.vote  .prochain-pastille { background: var(--jaune); }

.prochain-texte { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }

.prochain-texte em {
  font-style: normal; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em;
}
.prochain.cine  .prochain-texte em { color: #4ade80; }
.prochain.debat .prochain-texte em { color: #a5adf8; }
.prochain.vote  .prochain-texte em { color: #f6c860; }
.prochain-texte > b { font-size: 20px; font-weight: 600; letter-spacing: -.015em; }
.prochain-texte > span { font-size: 13px; color: var(--doux); }

.prochain-geste, .rdv-geste {
  flex: none; padding: 8px 14px; border-radius: 8px;
  border: 1px solid var(--lueur-3); background: var(--lueur-2);
  color: var(--texte); font-size: 13px; cursor: pointer; font-family: inherit;
  white-space: nowrap;
}
@media (hover: hover) {
.prochain-geste:hover, .rdv-geste:hover { background: var(--lueur-3); } }

.grille-rdv {
  display: grid; gap: 14px;

  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}

.carte {

  max-width: 480px;
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px 16px; border-radius: 16px;
  color: inherit; text-decoration: none;
  background: var(--aire); border: 1px solid var(--ligne);
  transition: transform .15s, box-shadow .15s, background .15s;
}
@media (hover: hover) {
a.carte:hover { transform: translateY(-3px); box-shadow: var(--ombre-levee); } }

.carte.cine       { background: rgba(35,165,90,.13);  border-color: rgba(35,165,90,.26); }
@media (hover: hover) {
a.carte.cine:hover  { background: rgba(35,165,90,.20); } }
.carte.debat      { background: rgba(121,131,245,.15); border-color: rgba(121,131,245,.28); }
@media (hover: hover) {
a.carte.debat:hover { background: rgba(121,131,245,.22); } }
.carte.vote       { background: rgba(240,178,50,.12);  border-color: rgba(240,178,50,.26); }
@media (hover: hover) {
a.carte.vote:hover  { background: rgba(240,178,50,.19); } }

.carte-haut { display: flex; align-items: center; gap: 12px; min-width: 0; }

.carte-affiche {
  width: 40px; height: 60px; object-fit: cover; flex: none;
  border-radius: 6px; background: var(--carte);
  box-shadow: var(--ombre-posee);
}

.carte .tache { width: 40px; flex: none; height: 12px; position: relative; }
.carte .tache::after {
  content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 12px; height: 12px; border-radius: 50%; background: var(--faible);
}
.carte.cine  .tache::after { background: var(--vert); }
.carte.debat .tache::after { background: var(--bleu-clair); }
.carte.vote  .tache::after { background: var(--jaune); }

.carte-quand { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.carte-quand em {
  font-style: normal; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em; color: var(--faible);
}
.carte.cine  .carte-quand em { color: #4ade80; }
.carte.debat .carte-quand em { color: #a5adf8; }
.carte.vote  .carte-quand em { color: #f6c860; }
.carte-quand b {
  font-size: 13px; font-weight: 600; color: var(--doux);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.carte-titre {
  font-size: 15px; font-weight: 500; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.carte-bas { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: auto; }

.rdv-type {
  flex: none; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  background: var(--lueur-2); color: var(--doux);
}
.carte.cine  .rdv-type { background: rgba(35,165,90,.28);  color: #7ee2a8; }
.carte.debat .rdv-type { background: rgba(121,131,245,.30); color: #bcc2fa; }
.carte.vote  .rdv-type { background: rgba(240,178,50,.26);  color: #f8d68a; }
.rdv-salon {
  font-size: 12px; color: var(--faible); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rdv-geste { margin-left: auto; }

.carte.libre { background: none; border: 1px dashed var(--ligne); }
@media (hover: hover) {
.carte.libre:hover { background: var(--lueur-1); } }
.carte.libre .carte-titre { font-weight: 400; color: var(--doux); }
.carte.libre .tache::after { background: none; box-shadow: inset 0 0 0 1.5px var(--faible); }
.carte.libre .rdv-type { background: var(--lueur-1); color: var(--faible); }

.carte.heurte { box-shadow: inset 0 0 0 1px rgba(240,178,50,.55); }
.carte-note {
  flex: none; font-size: 11px; color: #f6c860;
  background: rgba(240,178,50,.16); padding: 4px 8px; border-radius: 999px;
}

.prochain.libre {
  background: none; border: 1px dashed var(--ligne);
}
.prochain.libre .prochain-texte > b { font-weight: 500; color: var(--doux); }
.prochain.libre .prochain-texte em { color: var(--faible); }

.agenda-vide {
  display: flex; flex-direction: column; gap: 6px;
  padding: 44px 0; text-align: center;
}
.agenda-vide b { font-size: 16px; font-weight: 500; }
.agenda-vide span { font-size: 13px; color: var(--faible); }
.agenda-vide a { color: var(--bleu-clair); }

.note-heurts { font-size: 13px; color: var(--jaune); white-space: nowrap; }
.note-heurts::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 6px; height: 6px; margin-right: 7px;
  border-radius: 50%; background: var(--jaune);
}

.tableau.rubriques {
  align-items: start;

  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.colonne.rubrique.dormante { opacity: .5; }

.chapeau .oter-carte { margin-left: 4px; }

.chapeau.ambre  { background: var(--fond-ambre); }
.chapeau.ambre  .point { background: var(--vif-ambre); }
.chapeau.violet { background: var(--fond-violet); }
.chapeau.violet .point { background: var(--vif-violet); }

.roue {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex: none; margin-left: 2px;
  border: 0; border-radius: 6px; background: none; cursor: pointer;
  opacity: .6; transition: opacity .15s, background .15s, transform .22s;
}
.roue svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

@media (hover: hover) {
  .roue:hover { opacity: 1; background: var(--lueur-3); }
}
.colonne.ouverte .roue { opacity: 1; transform: rotate(60deg); background: var(--lueur-3); }

.resume {
  margin: 8px 2px 12px; font-size: 12px; color: var(--faible);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.colonne.dormante .resume { font-style: italic; }

.cadence {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px; margin-bottom: 12px;

  background: var(--carte); border-radius: var(--rond);
}
.rangee {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 4px; border-radius: 6px; min-width: 0;
}
.rangee > span:first-child {
  flex: 1; min-width: 0; font-size: 13px; color: var(--doux);
}
.rangee .bascule.seule b { display: none; }

.liste.nue { display: inline-block; min-width: 0; flex: none; }
.liste.nue .liste-tete { min-width: 0; width: auto; gap: 8px; }

.liste.nue .liste-tete span {
  min-width: 0; max-width: min(280px, 62vw);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.liste.nue.ouverte .liste-tete { background: var(--carte-survol); }
.liste.nue.vide .liste-tete span { color: var(--faible); font-style: italic; }

.liste.nue .liste-choix { min-width: 168px; left: auto; right: 0; }

.oter-rubrique {
  display: flex; align-items: center; justify-content: center;
  width: 100%; margin-top: 6px;
  min-height: var(--controle-h); padding: 0 14px;
  border: 0; border-radius: var(--rond); background: none;
  font: inherit; font-size: var(--controle-fs); color: var(--faible); cursor: pointer;
  transition: background .15s, color .15s;
}
@media (hover: hover) {
.oter-rubrique:hover { background: var(--rouge); color: #fff; } }
.oter-rubrique.arme { background: var(--rouge); color: #fff; }

.fiche.debat h3 {
  margin: 6px 0 0; font-size: 14px; font-weight: 500;
  line-height: 1.4; white-space: normal;
}
.fiche.debat.muette h3 { color: var(--faible); font-style: italic; }

.tour {
  display: inline-flex; align-items: center; justify-content: center;
  width: 19px; height: 19px; flex: none;
  border-radius: 50%; font-size: 11px; font-weight: 700;
  background: var(--ligne); color: var(--doux);
}
.tour.suivant { background: var(--bleu); color: #fff; }
.quand-debat {
  flex: 1; min-width: 0; font-size: 12px; color: var(--faible);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.fiche.saisie { opacity: .4; }
.fiche.occupe { opacity: .5; pointer-events: none; }
.pile.visee { background: rgba(88,101,242,.06); border-radius: var(--rond); }

.trait {
  height: 2px; margin: 3px 0; border-radius: 4px;
  background: var(--bleu); pointer-events: none;
}

.ajout-ligne {
  width: 100%; padding: 8px; margin-bottom: 4px;
  background: transparent; color: var(--faible);
  border: 1px dashed var(--ligne); border-radius: var(--rond);
  font: inherit; font-size: 13px; cursor: pointer;
  transition: border-color .15s, color .15s;
}
@media (hover: hover) {
.ajout-ligne:hover { border-color: var(--bleu); color: var(--texte); } }

.rendezvous {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; margin-bottom: 6px;
  background: var(--aire); border-radius: var(--rond);
  transition: background .15s;
}
@media (hover: hover) {
.rendezvous:hover { background: var(--carte); } }
.corpsrdv { min-width: 0; flex: 1; }
.corpsrdv h3 {
  margin: 0; font-size: 15px; font-weight: 600; line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.corpsrdv .sous { margin: 2px 0 0; font-size: 13px; color: var(--faible); }
.rendezvous .etiquette, .rendezvous .oter-carte { position: relative; z-index: var(--plan-contenu); flex: none; }

.planche-apercu { transition: opacity .22s; }
.planche-apercu:not(.vu) { opacity: 0; }

.coque > main, .grille > *, .semaine > *, .tableau > * { min-width: 0; }
.corpsrdv, .propriete .valeur { min-width: 0; }

html, body { max-width: 100%; overflow-x: clip; }

.chapeau.rose  { background: var(--fond-rose); }
.chapeau.rose  .point { background: var(--vif-rose); }
.chapeau.cyan  { background: var(--fond-cyan); }
.chapeau.cyan  .point { background: var(--vif-cyan); }

.rangee.couleurs { align-items: center; }

.nuancier { display: flex; gap: 4px; flex: none; flex-wrap: wrap; }
.pastille-teinte {
  width: 17px; height: 17px; padding: 0; flex: none;
  border: 0; border-radius: 50%; cursor: pointer;
  box-shadow: 0 0 0 0 var(--texte);
  transition: transform .15s, box-shadow .15s;
}
@media (hover: hover) {
.pastille-teinte:hover { transform: scale(1.18); } }
.pastille-teinte.choisi { box-shadow: 0 0 0 2px var(--aire), 0 0 0 3.5px var(--texte); }

.pastille-teinte.bleu   { background: var(--vif-bleu); }
.pastille-teinte.vert   { background: var(--vif-vert); }
.pastille-teinte.ambre  { background: var(--vif-ambre); }
.pastille-teinte.violet { background: var(--vif-violet); }
.pastille-teinte.rose   { background: var(--vif-rose); }
.pastille-teinte.cyan   { background: var(--vif-cyan); }
.pastille-teinte.gris   { background: var(--vif-gris); }

.apercu-vif .valeur { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.apercu-vif .planche-apercu { max-width: 460px; width: 100%; border-radius: var(--rond); display: block; }
.apercu-vif .planche-apercu:not([src]) { display: none; }

.bouton.petit { min-height: 30px; padding: 0 12px; font-size: 13px; }

.nom-colonne { flex: 1; min-width: 0; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.champ.mince { width: auto; flex: none; max-width: 200px; }

@media (max-width: 620px) {
  .champ.mince { width: 100%; max-width: none; }

  .champ.mince.court { width: auto; }
}

.mention { font-size: 13px; color: var(--faible); white-space: nowrap; }

.bascule-vue {
  display: inline-flex; padding: 2px; gap: 2px;
  background: var(--aire); border-radius: 999px;
}
.bascule-vue a {
  padding: 4px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 500; color: var(--faible);
  transition: background .15s, color .15s;
}
@media (hover: hover) {
.bascule-vue a:hover { color: var(--texte); } }
.bascule-vue a.actif { background: var(--carte); color: var(--texte); }

.jeux {
  display: grid; gap: 16px; margin-bottom: 28px;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}
.jeu {
  background: var(--aire); border-radius: var(--rond-large);
  overflow: hidden; display: flex; flex-direction: column;
  transition: background .15s;
}
@media (hover: hover) {
.jeu:hover { background: var(--carte); } }

.jeux.avec-passe .jeu.jamais { opacity: .55; }
@media (hover: hover) {
.jeux.avec-passe .jeu.jamais:hover { opacity: 1; } }

.planche-jeu { width: 100%; display: block; background: var(--fond); }
.dessous { padding: 12px 14px 14px; }
.dessous h3 { margin: 0; font-size: 15px; font-weight: 600; }
.dessous .quoi {
  margin: 4px 0 0; font-size: 13px; color: var(--doux); line-height: 1.4;
}

.commandes { margin: 9px 0 0; display: flex; flex-wrap: wrap; gap: 4px; }
.commandes code {
  padding: 2px 6px; border-radius: 6px;
  background: var(--fond); color: var(--bleu-clair);
  font-size: 12px; font-family: ui-monospace, Menlo, Consolas, monospace;
}

.chiffres {
  display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 11px;
  font-size: 12px; color: var(--faible);
}
.chiffres b { color: var(--texte); font-weight: 600; }
.chiffres .en-cours { color: var(--vert); }
.dessous .sous { margin: 8px 0 0; font-size: 12px; color: var(--faible); }

.partie {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; margin-bottom: 5px;
  background: var(--aire); border-radius: var(--rond);
}
.partie .emoji { font-size: 20px; flex: none; }
.partie h3 { margin: 0; font-size: 14px; font-weight: 600; }

.joueurs { flex: none; font-size: 12px; color: var(--faible); }
.joueurs b { font-weight: 600; }
.joueurs.assez b { color: var(--vert); }
.joueurs.court b { color: var(--jaune); }
.duree { flex: none; font-size: 12px; color: var(--faible); min-width: 52px; text-align: right; }

.jeu { cursor: pointer; }
.jeu:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }

body.fige { overflow: hidden; }

.visionneuse { position: fixed; inset: 0; z-index: var(--plan-image); display: flex;
  align-items: center; justify-content: center; padding: 28px; }
.visionneuse-fond { position: absolute; inset: 0; background: var(--voile-4); }

.visionneuse-corps {
  position: relative; margin: 0; z-index: var(--plan-contenu);
  width: min(760px, 100%); max-height: 100%;
  display: flex; flex-direction: column;
  background: var(--aire); border-radius: var(--rond-large);
  overflow: auto;
  animation: monte .15s ease-out;
}
@keyframes monte { from { opacity: 0; transform: translateY(10px); } }

.visionneuse-corps img { width: 100%; display: block; background: var(--fond); }
.visionneuse-corps figcaption { padding: 16px 20px 20px; }
.visionneuse-corps h3 { margin: 0; font-size: 20px; font-weight: 600; }
.visionneuse-corps .quoi { margin: 5px 0 0; color: var(--doux); font-size: 14px; }
.visionneuse-corps .commandes { margin: 12px 0 0; }
.visionneuse-corps .sous { margin: 10px 0 0; font-size: 12px; color: var(--faible); }

.visionneuse-fermer {
  position: absolute; top: 10px; right: 10px;
  width: 32px; height: 32px; display: flex;
  align-items: center; justify-content: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--voile-3); backdrop-filter: blur(3px);
  transition: background .15s;
}
@media (hover: hover) {
.visionneuse-fermer:hover { background: var(--voile-4); } }
.visionneuse-fermer svg {
  width: 15px; height: 15px; fill: none; stroke: #fff;
  stroke-width: 2.2; stroke-linecap: round;
}

.damier {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

.pave {
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between; gap: 10px;
  min-height: 116px; padding: 12px 14px 14px;
  border-radius: var(--rond);
  color: var(--texte);

  background: var(--fond-teinte, var(--fond-gris));
  border: 1px solid transparent;

  content-visibility: auto;
  contain-intrinsic-size: 210px 116px;
  transition: transform .15s, border-color .15s;
}
@media (hover: hover) {

.pave:hover {
  transform: translateY(-2px);
  border-color: var(--vif-teinte, transparent);
} }
.pave:focus-visible { outline: 2px solid var(--vif-teinte, var(--bleu)); outline-offset: 2px; }

.pave .numero {
  font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--vif-teinte, var(--faible));
}

.pave h3 {
  margin: 0;
  font-size: 14px; font-weight: 600; line-height: 1.4;

  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.pave .fil-ouvert {
  position: absolute; top: 14px; right: 12px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--vert);
}

.pages {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin-top: 14px; font-size: 13px; color: var(--faible);
}
.pages a { color: var(--bleu-clair); font-weight: 500; }
@media (hover: hover) {
.pages a:hover { text-decoration: underline; } }

.cadre-apercu { position: relative; display: inline-block; max-width: 460px; width: 100%; }
.cadre-apercu:has(img:not([src])) { display: none; }

.gestes-fond {
  position: absolute; top: 10px; right: 10px;
  display: flex; gap: 6px;
}
.changer-fond {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--voile-3); backdrop-filter: blur(4px);
  color: #fff;
  transition: background .15s, transform .15s;
}
.changer-fond svg {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .4s;
}

.changer-fond[disabled] { opacity: .5; cursor: default; }

.entete { display: flex; align-items: center; gap: 14px; }
.entete h1 { flex: 1; min-width: 0; }

.bouton.retour { gap: 6px; padding-left: 12px; }
.bouton svg {
  width: 15px; height: 15px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
@media (hover: hover) {
.bouton.retour:hover svg { transform: translateX(-2px); } }
.bouton.retour svg { transition: transform .15s; }

.coupure {
  height: 1px; border: 0; margin: 10px 12px;
  background: var(--ligne);
}

/* Un intertitre de menu : il annonce un groupe, il ne se clique pas. */
.menu-titre {
  margin: 2px 0 4px;
  padding: 0 12px;
  font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--faible);
}

.dossier-tete { position: relative; }
.dossier-tete .entree { padding-right: 28px; }

.chevron-place {
  position: absolute; right: 6px; top: 2px; bottom: 2px;
  display: grid; place-items: center;
  width: 30px;
  color: var(--faible);
  pointer-events: none;
}

button.entree {
  width: 100%;
  font: inherit;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}
button.entree:focus-visible { outline: 2px solid var(--bleu); outline-offset: -2px; }

.chevron {
  width: 12px; height: 12px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .15s;
}
.dossier.replie .chevron { transform: rotate(-90deg); }
.dossier.replie .rameaux { display: none; }

.rameau-emoji svg {
  width: 14px; height: 14px; display: block; margin: 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

.plume {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex: none;
  border: 0; border-radius: 6px; background: none; cursor: pointer;
  opacity: .6; transition: opacity .15s, background .15s;
}
.plume svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
@media (hover: hover) {
.plume:hover { opacity: 1; background: var(--lueur-3); } }
.plume:disabled { opacity: .3; cursor: default; }

.colonne.rubrique .pile { min-height: 8px; }

.apercu-jeu { margin-bottom: 12px; }
.apercu-jeu img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--rond); display: block; background: var(--fond);
}
.apercu-jeu.occupe { opacity: .5; }

.paliers { display: flex; gap: 4px; margin: 8px 0; }
.palier {
  flex: 1; padding: 4px 0; border: 0; border-radius: 6px;
  background: var(--aire); color: var(--faible);
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background .15s, color .15s;
}
@media (hover: hover) {
.palier:hover { background: var(--carte); color: var(--texte); } }
.palier.choisi { background: var(--bleu); color: #fff; }

.bilan-jeu {
  margin: 0 0 10px; font-size: 12px; color: var(--faible);
  padding: 8px 10px; background: var(--aire); border-radius: var(--rond);
}
.bilan-jeu b { color: var(--texte); }
.fiche.tour h3 { margin: 4px 0 0; font-size: 13px; font-weight: 500; white-space: normal; }

.cherche-oeuvre {
  margin-top: 10px;
  animation: deplie .15s ease-out;
}
@keyframes deplie { from { opacity: 0; transform: translateY(-4px); } }

.cherche-oeuvre .champ { max-width: 420px; }
.cherche-oeuvre .grille-oeuvres { margin-top: 10px; }

.etape { margin-bottom: 2px; }
.etape .ligne {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; border: 0; border-radius: var(--rond);
  background: var(--aire); color: var(--texte);
  font: inherit; font-size: 14px; text-align: left; cursor: pointer;
  transition: background .15s;
}
@media (hover: hover) {
.etape .ligne:hover:not(:disabled) { background: var(--carte); } }
.etape .ligne:disabled { cursor: default; }
.etape .ligne b { flex: 1; min-width: 0; font-weight: 500; }
.etape.fait .ligne b { color: var(--faible); }

.chevron-etape {
  width: 7px; height: 7px; flex: none;
  border-right: 2px solid var(--faible); border-bottom: 2px solid var(--faible);
  transform: rotate(45deg); transition: transform .22s;
}
.ligne.ouverte .chevron-etape { transform: rotate(225deg); }

.etape-apercu { padding: 10px 0 4px; animation: deplie .15s ease-out; }
.etape-apercu img {
  max-width: 420px; width: 100%; display: block;
  border-radius: var(--rond); background: var(--fond);
}

/* ── LES RÉGLAGES DE SÉRIE, EN RANGÉE LISIBLE ────────────────────────────
 *
 * « Saison » et « Épisodes par soir » étaient deux menus nus posés à côté d'un
 * bouton bleu, sans rien qui les tienne : trois objets de trois hauteurs, alignés
 * par le bas, dont on ne savait pas s'ils allaient ensemble.
 *
 * Ils sont maintenant dans un cadre, et le bouton est à droite, séparé — c'est
 * lui qui agit, les deux autres se règlent. */
.reglage-serie {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px;
  padding: 12px 14px;
  background: var(--aire); border: 1px solid var(--ligne);
  border-radius: var(--rond);
}
.reglage-serie #generer { margin-left: auto; }
.mini-champ { display: flex; flex-direction: column; gap: 4px; }
.mini-champ > span { font-size: 12px; color: var(--faible); }
.mini-champ .liste.nue .liste-tete {
  background: var(--aire); padding: 6px 12px;
}
@media (hover: hover) {
.mini-champ .liste.nue .liste-tete:hover { background: var(--carte); } }

.seances { list-style: none; margin: 16px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px; }
.seance-ligne {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; border-radius: var(--rond); background: var(--aire);
  transition: box-shadow .22s;
}
.seance-ligne.pris { box-shadow: inset 0 0 0 1px var(--vert); }
.seance-ligne.faite { opacity: .55; }

.rang-seance {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex: none; border-radius: 50%;
  background: var(--ligne); color: var(--doux);
  font-size: 11px; font-weight: 700;
}
/* ── LE PLANNING DE PUBLICATION ──────────────────────────────────────────
 *
 * La rangée disait « 1 · épisodes 1 à 3 · [date] ». On voyait des dates sans
 * savoir ce qu'elles déclenchaient — or c'est un calendrier de PUBLICATION :
 * l'affiche part à ce moment-là, et le film se lance tout seul derrière.
 *
 * La ligne le dit donc, en petit, sous les épisodes. Et le rang devient une
 * coche quand la séance est passée : le numéro d'une séance qu'on a déjà vue
 * n'apprend plus rien. */
.seance-ligne .seance-mots {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 1px;
}
.seance-ligne .episodes { min-width: 0; font-size: 13px; }
.seance-quand-dit { font-size: 11px; color: var(--faible); }
.seance-ligne.faite .rang-seance { background: var(--vert); color: #fff; }

.faux-discord {
  max-width: 460px; padding: 12px 14px;
  background: var(--fond); border-radius: var(--rond);
}
.entete-msg { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.pastille-bot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--vert); color: #fff; font-size: 12px; font-weight: 700;
}
.entete-msg b { font-size: 13px; }
.tag-app {
  padding: 2px 4px; border-radius: 4px; background: var(--bleu);
  color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .02em;
}
.entete-msg .ou { font-size: 12px; color: var(--faible); }

.corps-msg h4 { margin: 0 0 2px; font-size: 16px; font-weight: 700; }
.corps-msg p { margin: 0 0 2px; font-size: 14px; }
.corps-msg .petit { font-size: 12px; color: var(--faible); }

.cadre-msg {
  border-radius: 8px; overflow: hidden;
  background: var(--aire);
}
.cadre-msg img { width: 100%; display: block; }
.cadre-msg .corps-msg { padding: 10px 12px 12px; }

.boutons-msg {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 0 12px 12px;
}
.faux-bouton {
  padding: 6px 12px; border-radius: 8px;
  background: var(--carte); border: 1px solid var(--ligne);
  color: var(--texte); font-size: 13px; font-weight: 500;
  white-space: nowrap;
}

.faux-bouton:first-child { background: var(--vert); border-color: transparent; color: #fff; }

.rangee-fonds {
  display: flex; gap: 8px;
  overflow-x: auto; padding-bottom: 6px;
  scrollbar-width: thin;
}
.vignette-fond {
  position: relative; flex: none;
  width: 132px; height: 74px;
  padding: 0; border-radius: 6px; overflow: hidden;
  border: 2px solid transparent; background: var(--carte);
  cursor: pointer;
}
.vignette-fond img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (hover: hover) {
.vignette-fond:hover { border-color: var(--ligne); } }
.vignette-fond.choisi { border-color: var(--bleu); }

@media (max-width: 620px) {

  .rangee-fonds { flex-wrap: wrap; overflow-x: visible; width: 100%; }
  .vignette-fond { width: calc((100% - 16px) / 3); height: auto; aspect-ratio: 16 / 9; }
}

.vignette-fond.origine {
  display: flex; align-items: center; justify-content: center;
  padding: 0 10px; color: var(--doux); font-size: 12px; line-height: 1.25;
  border-style: dashed; border-color: var(--ligne);
}
.vignette-fond.origine.choisi { border-style: solid; border-color: var(--bleu); color: var(--texte); }

.marque-texte {
  position: absolute; right: 4px; bottom: 4px;
  padding: 2px 4px; border-radius: 4px;
  background: var(--voile-4); color: var(--doux);
  font-size: 11px; letter-spacing: .02em;
}

.seance-ligne .datier { width: 230px; flex: none; }
.seance-ligne .date-tete { width: 100%; text-align: left; }

.fils-libres { display: flex; flex-wrap: wrap; gap: 8px; }
.fil-libre {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  padding: 10px 14px; border-radius: 12px; cursor: pointer;
  background: none; border: 1px dashed var(--ligne);
  color: inherit; font-family: inherit; text-align: left;
}
@media (hover: hover) {
.fil-libre:hover { background: var(--lueur-1); border-color: var(--faible); } }
.fil-libre b { font-size: 13px; font-weight: 500; }
.fil-libre span { font-size: 11px; color: var(--faible); }

/* ── UN TOPIC QU'ON EQUIPE ─────────────────────────────────────────────────
   Une ligne par topic a qui il manque son salon ou son role : le nom, les deux
   menus, le bouton. En colonne sur telephone, ou trois menus cote a cote
   tiendraient dans cent-vingt pixels chacun. */
.equiper { display: flex; flex-direction: column; gap: 8px; }
.equiper-ligne {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; border-radius: 12px;
  background: none; border: 1px dashed var(--ligne);
}
.equiper-nom { font-size: 13px; font-weight: 500; min-width: 150px; }
.equiper-ligne label {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--faible);
}
/* La règle du navigateur pour [hidden] vaut `display: none`, et la ligne
   au-dessus la bat : le menu « Catégorie » resterait visible alors qu'on a
   choisi de relier un salon qui existe, où il n'a rien à régler. */
.equiper-ligne label[hidden] { display: none; }
.equiper-ligne select {
  background: var(--lueur-1); border: 1px solid var(--ligne); border-radius: 8px;
  color: inherit; font-family: inherit; font-size: 12px; padding: 5px 8px;
  max-width: 190px;
}
.equiper-fait { font-size: 11px; color: var(--faible); }
.equiper-ligne button {
  margin-left: auto;
  padding: 6px 14px; border-radius: 8px; cursor: pointer;
  background: var(--lueur-1); border: 1px solid var(--ligne);
  color: inherit; font-family: inherit; font-size: 12px;
}
.equiper-ligne button:disabled { opacity: .5; cursor: default; }
@media (hover: hover) {
.equiper-ligne button:hover:not(:disabled) { border-color: var(--faible); } }
.equiper-etat { font-size: 11px; color: var(--faible); min-width: 90px; }

@media (max-width: 640px) {
  .equiper-ligne { flex-direction: column; align-items: stretch; }
  .equiper-ligne button { margin-left: 0; }
  .equiper-ligne select { max-width: none; width: 100%; }
}

.avertissement {
  padding: 12px 16px; margin-bottom: 22px; border-radius: 12px;
  background: rgba(240,178,50,.12); border: 1px solid rgba(240,178,50,.30);
  font-size: 13px; color: #f8d68a;
}
.avertissement b { color: #f6c860; }

.lien-nu {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--bleu-clair); font: inherit; text-decoration: underline;
}

.file-ligne {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 8px;
  background: var(--carte);
}
@media (hover: hover) {
.file-ligne:hover { background: var(--carte-survol); } }

.file-ligne.fanee { background: none; padding: 6px 14px; }
@media (hover: hover) {
.file-ligne.fanee:hover { background: var(--carte); } }

.valeur.en-pile { flex-direction: column; align-items: stretch; gap: 8px; }
.relance-rang {
  flex: none; min-width: 22px; text-align: center;
  font-size: 12px; font-weight: 700; color: var(--faible);
  font-variant-numeric: tabular-nums;
}
.relance-corps { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.relance-texte {
  font-size: 13px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.relance-medias { font-size: 11px; color: var(--faible); }

.etiquette {

  flex: none; white-space: nowrap;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  background: var(--lueur-2); color: var(--doux);
}
.etiquette.oeuvre { background: rgba(35,165,90,.26); color: #7ee2a8; }
.etiquette.defi { background: rgba(240,178,50,.24); color: #f8d68a; }
.etiquette.question { background: rgba(121,131,245,.26); color: #bcc2fa; }

.file-gestes { display: flex; gap: 2px; flex: none; }
.file-gestes button {
  display: grid; place-items: center;
  width: var(--geste-t); height: var(--geste-t); padding: 0; border-radius: 6px;
  border: 0; background: none; color: var(--faible);
  cursor: pointer; font-size: 13px; line-height: 1;
}
@media (hover: hover) {
.file-gestes button:hover { background: var(--lueur-2); color: var(--texte); } }
@media (hover: hover) {
.file-gestes [data-maintenant]:hover { color: var(--vif-vert); } }
@media (hover: hover) {
.file-gestes [data-oter]:hover { color: var(--rouge); } }

.pile-vide {
  margin: 0; padding: 24px 0; text-align: center;
  color: var(--faible); font-size: 13px;
}

.fiche-passee { display: flex; gap: 10px; padding: 10px 12px; opacity: .55; }
.passee-date { flex: none; font-size: 11px; color: var(--faible); }
.passee-texte {
  font-size: 12px; min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}

.ligne-phrase { font-size: 12px; min-width: 0; line-height: 1.4; }

.composer {
  display: flex; flex-direction: column; gap: 10px;
  padding: 0; border: 0; background: none;
}
.composer-haut { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.composer-haut .champ { flex: 0 0 180px; }
.composer-aide { font-size: 12px; color: var(--faible); }

.composer .champ.mince {

  width: 100%; max-width: none; box-sizing: border-box;
}
.composer-pied { display: flex; align-items: center; gap: 12px; }

.composer-pied .outils-bascule { margin-left: auto; }
.composer-pied .bouton.primaire:first-of-type { margin-left: auto; }
.composer-pied .outils-bascule ~ .bouton.primaire { margin-left: 0; }
.composer textarea.champ { resize: vertical; font-family: inherit; line-height: 1.4; }

.composer-champ { position: relative; }

.composer-champ.peint textarea.champ,
.composer-miroir {

  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: 8px;
  font: inherit;

  font-size: var(--ecriture-fs);
  line-height: 1.4;
  letter-spacing: normal;
  box-sizing: border-box;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
  tab-size: 4;
}

.composer-champ.peint textarea.champ {
  position: relative; z-index: var(--plan-contenu);
  width: 100%;
  background: transparent;

  color: transparent;
  caret-color: var(--texte);
  resize: vertical;
}

.composer-champ.peint textarea.champ::selection { background: rgba(88, 101, 242, .35); }

.composer-miroir {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--carte);
  color: var(--texte);

  padding-bottom: calc(13px + 1.6em);
}

.p-marque { color: var(--faible); opacity: .75; }

.p-gras { -webkit-text-stroke: .32px currentColor; color: var(--texte); }
.p-italique { font-style: italic; }
.p-souligne { text-decoration: underline; }
.p-barre { text-decoration: line-through; color: var(--faible); }
.p-spoiler { background: var(--ligne); border-radius: 4px; }
.p-code { background: var(--fond); border-radius: 4px; }
.p-lien { color: var(--bleu-clair); }

.p-titre { -webkit-text-stroke: .42px currentColor; color: #fff; }
.p-petit { color: var(--faible); }
.p-citation { color: var(--doux); }
.p-liste { color: var(--texte); }

.p-media {
  color: var(--bleu-clair);
  background: rgba(88, 101, 242, .13);
  border-radius: 4px;
}

.composer-outils { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.composer-outils button {
  background: none; border: 0; cursor: pointer;
  padding: 4px 8px; border-radius: 6px;
  color: var(--faible); font: inherit; font-size: 12px; line-height: 1;
}

.outils-filet { width: 1px; height: 15px; background: var(--ligne); margin: 0 7px; flex: none; }

.outils-bascule { display: flex; gap: 2px; margin-left: auto; flex: none; }
.outils-bascule button {
  background: none; border: 0; cursor: pointer;
  padding: 4px 8px; border-radius: 6px;
  color: var(--faible); font: inherit; font-size: 12px; line-height: 1;
}
@media (hover: hover) {
.outils-bascule button:hover { background: var(--carte-survol); color: var(--texte); } }
.outils-bascule button.on { background: var(--carte); color: var(--texte); }

.composer-outils.lecture { display: none; }

.composer-champ.en-apercu > textarea.champ,
.composer-champ.en-apercu > .composer-miroir { display: none; }

.composer-apercu {
  border: 1px solid var(--ligne);
  border-radius: 8px;
  padding: 14px 16px;
  background: var(--aire);
  display: flex; flex-direction: column; gap: 8px;
  min-height: 120px;
}
.ap-texte { line-height: 1.4; white-space: pre-wrap; overflow-wrap: break-word; }

.ap-h1 { font-size: 20px; font-weight: 700; }
.ap-h2 { font-size: 20px; font-weight: 700; }
.ap-h3 { font-size: 16px; font-weight: 700; }
.ap-petit { font-size: 12px; color: var(--faible); }
.ap-citation { border-left: 4px solid var(--ligne); padding-left: 10px; }
.ap-liste { padding-left: 4px; }
.ap-texte a { color: var(--bleu-clair); text-decoration: none; }
@media (hover: hover) {
.ap-texte a:hover { text-decoration: underline; } }
.ap-texte code {
  background: var(--fond); border-radius: 4px; padding: 2px 4px;
  font-family: Consolas, Menlo, monospace; font-size: 13px;
}

.ap-spoiler {
  background: var(--fond); border-radius: 4px; color: transparent;
  cursor: pointer;
}
.ap-spoiler.vu { color: inherit; background: var(--ligne); }

.ap-media {
  max-width: 100%; max-height: 320px; width: auto;
  border-radius: 8px; display: block;
}

.ap-manque {
  color: var(--faible); font-size: 12px;
  border: 1px dashed var(--ligne); border-radius: 8px; padding: 10px 12px;
}
.ap-vide { color: var(--faible); }

.proprietes .composer textarea.champ.recoit { border-color: var(--bleu); }
.composer-reste { font-size: 11px; color: var(--faible); font-variant-numeric: tabular-nums; }
.composer-reste.court { color: var(--jaune); }

.duel {
  --duel-gouttiere: 14px;
  --duel-vs: 30px;
  display: flex; align-items: flex-start; gap: var(--duel-gouttiere);
  width: 100%; max-width: 520px;
}
.camp { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; position: relative; }

.trio-rangee {
  display: flex; align-items: flex-start; gap: 14px;
  width: 100%; max-width: 700px;
}

.camp-rang {
  position: absolute; top: 8px; left: 8px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--voile-4); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  pointer-events: none;
}

.duel-vs {

  flex: none; align-self: flex-start;
  width: var(--duel-vs); text-align: center;

  margin-top: calc(
    0.375 * (100% - var(--duel-vs) - 2 * var(--duel-gouttiere)) - 0.6em);
  font-family: "Lilita One", var(--police-titre, inherit), sans-serif;
  font-size: 20px; letter-spacing: .04em; color: var(--faible);
}

.camp-affiche {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: var(--rond);
  background: var(--fond);

  border: 1px dashed var(--ligne);
  overflow: hidden;
}
.camp.pris .camp-affiche { border-style: solid; border-color: transparent; }
.camp-affiche img { width: 100%; height: 100%; object-fit: cover; display: block; }
.camp-affiche img:not([src]) { display: none; }

.camp-image { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; }
.camp-image svg { width: 14px; height: 14px; }
@media (hover: hover) {
.camp-image:hover svg { transform: translateY(-2px); } }

.camp-fonds {
  display: flex; gap: 6px;
  overflow-x: auto; overscroll-behavior-x: contain;
  padding-bottom: 2px;
  scrollbar-width: thin;
}
.camp-fonds button {
  flex: none; width: 56px; height: 32px; padding: 0;
  border: 2px solid transparent; border-radius: 6px;
  background: var(--fond) center/cover no-repeat;
  cursor: pointer;
  transition: border-color .15s, opacity .15s;
  opacity: .7;
}
@media (hover: hover) {
.camp-fonds button:hover { opacity: 1; } }

.camp-fonds button.choisi { border-color: var(--bleu); opacity: 1; }

@media (max-width: 620px) {
  .camp-fonds { flex-wrap: wrap; overflow-x: visible; }
  .camp-fonds button { width: calc((100% - 12px) / 3); height: auto; aspect-ratio: 16 / 9; }
}
.camp-nom { text-align: center; }
.camp-nom-fige { text-align: center; color: var(--doux); font-size: 13px; }

.camp-choix {
  position: absolute; top: 100%; left: 0; z-index: var(--plan-menu);
  display: flex; gap: 8px; flex-wrap: wrap;
  width: max(100%, 240px);
  margin-top: 6px; padding: 10px;
  border-radius: var(--rond);
  background: var(--carte); border: 1px solid var(--ligne);
  box-shadow: var(--ombre-flottante);
  max-height: 300px; overflow-y: auto;
}

.serie { display: flex; flex-direction: column; gap: 4px; width: 100%; max-width: 560px; }

.duel-ligne {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px;
  border-radius: var(--rond);
  border: 1px solid transparent;
  background: var(--carte);
  color: var(--doux); text-decoration: none;
  font-size: 13px;
  transition: background .15s, border-color .15s;
}
@media (hover: hover) {
.duel-ligne:hover { background: var(--carte-survol); } }

.duel-ligne.sien { border-color: var(--bleu); color: var(--texte); }

.duel-ligne.parti { opacity: .55; }

.duel-rang {
  flex: none; width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: 50%; background: var(--fond);
  font-size: 11px; font-variant-numeric: tabular-nums; color: var(--faible);
}
.duel-ligne.sien .duel-rang { background: var(--bleu); color: #fff; }

.duel-noms {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.duel-noms i { font-style: normal; color: var(--faible); margin: 0 4px; font-size: 11px; }

.duel-quand { flex: none; font-size: 12px; font-variant-numeric: tabular-nums; }
.duel-quand.sans { color: var(--faible); }

.duel-oter {
  flex: none; width: var(--geste-t); height: var(--geste-t); padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 6px; cursor: pointer;
  background: none; color: var(--faible);
}
@media (hover: hover) {
.duel-oter:hover { background: var(--fond); color: var(--rouge, #e05561); } }
.duel-oter svg {
  width: 13px; height: 13px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
}

.cadre-apercu.large, .apercu-vif .cadre-apercu.large .planche-apercu { max-width: 620px; }

.oeuvre {
  display: flex; flex-direction: column; gap: 4px; width: 84px;
  padding: 6px; border-radius: 8px; cursor: pointer;
  background: none; border: 1px solid var(--ligne); color: inherit;
  font: inherit; text-align: left;
}
@media (hover: hover) {
.oeuvre:hover { border-color: var(--faible); } }
.oeuvre.on { border-color: var(--bleu); background: rgba(88,101,242,.14); }
.oeuvre img { width: 100%; aspect-ratio: 2/3; object-fit: cover; border-radius: 4px; }
.oeuvre span {
  font-size: 11px; line-height: 1.25; color: var(--doux);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.haut-actions {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;

  flex: 1 1 auto;
  min-width: 0;
}

.haut-actions .retour { margin-right: 0; }
.haut-actions .gestes { margin-left: auto; }

.entree.actif {
  background: rgba(88,101,242,.20);
  color: #fff;
}
.entree.actif svg { color: var(--bleu-clair); }

.rameaux { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 8px; }

.rameaux-tete { cursor: pointer; }

.rameau-reglages { color: var(--faible); font-size: 13px; }

.rameaux-tete .chevron {
  margin-left: auto; flex: none; width: 12px; height: 12px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .15s;
}
.rameaux.replie .chevron { transform: rotate(-90deg); }
.rameaux.replie .rameau { display: none; }

.rameau {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 24px; border-radius: 6px;
  color: var(--doux); text-decoration: none; font-size: 13px;
}

.rameau.actif { color: var(--bleu-clair); font-weight: 600; }

.rameau.dormant { opacity: .4; }

.rameau-emoji { flex: none; width: 17px; text-align: center; font-size: 13px; }
.rameau-nom {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.rameau-alerte {
  flex: none; width: 6px; height: 6px; border-radius: 50%;
  background: var(--jaune);
}

img.sceau, img.pastille-avatar { object-fit: cover; padding: 0; }

.bascule-mode {
  display: flex; gap: 4px; padding: 4px;
  background: var(--voile-1); border-radius: 8px;
}
.bascule-mode button {
  flex: 1; padding: 6px 10px; border: 0; border-radius: 6px;
  background: none; color: var(--doux);
  font-family: inherit; font-size: 13px; cursor: pointer;
}
@media (hover: hover) {
.bascule-mode button:hover { color: var(--texte); } }
.bascule-mode button.actif { background: var(--lueur-2); color: var(--texte); }

.mention.alerte { color: #f0a0a0; }

.tableau.trio { grid-template-columns: repeat(3, minmax(260px, 1fr)); max-width: 1120px; }

.jour-titre {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 10px; font-size: 13px;
}
.jour-titre b { font-weight: 600; }
.jour-titre span { color: var(--faible); font-size: 12px; }

.fiche.module.muette { opacity: .55; }
@media (hover: hover) {
.fiche.module.muette:hover { opacity: .85; } }

.fiche.module .tour { font-size: 14px; }
.fiche.module .avance {
  margin-left: auto; min-width: 20px; text-align: center;
  padding: 2px 6px; border-radius: 999px;
  background: var(--voile-1); color: var(--doux);
  font-size: 11px; font-variant-numeric: tabular-nums;
}

.fiche.module .avance.vide { background: rgba(200, 60, 60, .2); color: #f0a0a0; }

.liste.nue.ajouter-module { display: block; }
.liste.nue.ajouter-module .liste-tete {
  width: 100%; padding: 10px; justify-content: center;
  border: 1px dashed var(--ligne); border-radius: 12px;
  color: var(--faible); font-size: 15px;
}
.liste.nue.ajouter-module .liste-tete i { display: none; }
@media (hover: hover) {
.liste.nue.ajouter-module .liste-tete:hover { color: var(--texte); border-color: rgba(255,255,255,.3); } }

.tableau.semaine { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.tableau.semaine .chapeau { padding: 6px 10px; font-size: 12px; }
.tableau.semaine .fiche { padding: 8px 10px; }

.tableau.semaine h3 {
  font-size: 12px; line-height: 1.25; white-space: normal;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tableau.semaine .chapeau { min-height: 0; }

@media (max-width: 1000px) {
  .tableau.semaine {
    grid-template-columns: repeat(7, 160px);
    overflow-x: auto; padding-bottom: 8px;
  }
}

@media (max-width: 620px) {
  .tableau.semaine {
    grid-template-columns: 1fr; gap: 14px;
    overflow-x: visible; padding-bottom: 0;
  }
  .tableau.semaine .jour-libre { min-height: 20px; }

  .tableau.semaine h3 { font-size: 13px; -webkit-line-clamp: 3; }
}

.jour-libre {
  display: block; min-height: 46px; border-radius: 12px;
  border: 1px dashed var(--ligne); opacity: .5;
}

.fiche.module .tour, .bloc .tour { font-size: 13px; color: #fff; }
.fiche.module .tour.bleu, .bloc .tour.bleu { background: var(--fond-bleu); }
.fiche.module .tour.vert, .bloc .tour.vert { background: var(--fond-vert); }
.fiche.module .tour.ambre, .bloc .tour.ambre { background: var(--fond-ambre); }
.fiche.module .tour.violet, .bloc .tour.violet { background: var(--fond-violet); }
.fiche.module .tour.rose, .bloc .tour.rose { background: var(--fond-rose); }
.fiche.module .tour.cyan, .bloc .tour.cyan { background: var(--fond-cyan); }
.fiche.module .tour.gris, .bloc .tour.gris { background: var(--fond-gris); }

.salut {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; margin-bottom: 14px;
  background: var(--flanc);
  border-radius: var(--rond-large);
}
.salut.bleu   { background: var(--fond-bleu); }
.salut.vert   { background: var(--fond-vert); }
.salut.ambre  { background: var(--fond-ambre); }
.salut.violet { background: var(--fond-violet); }
.salut.rose   { background: var(--fond-rose); }
.salut.cyan   { background: var(--fond-cyan); }
.salut.gris   { background: var(--fond-gris); }
.salut-face { border-radius: 50%; flex: none; }
.salut-mots { min-width: 0; }
.salut h2 { font-size: 16px; font-weight: 600; margin: 0; }

.salut-voix { margin: 1px 0 0; font-size: 13px; color: rgba(255, 255, 255, .62); }
.salut-voix b { color: #fff; font-weight: 600; }

.salut-emoji {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--voile-1);
  font-size: 20px;
}

.tete-flanc { display: flex; align-items: center; gap: 8px; }
.tete-flanc .marque { flex: 1; min-width: 0; }

.tete-flanc .marque b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pouls {
  display: flex; align-items: baseline; gap: 4px; flex: none;
  font-size: 12px; color: var(--faible);
}
.pouls b {
  color: var(--texte); font-weight: 600; font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.pouls-vif {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--vif-vert); flex: none;

  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vif-vert) 22%, transparent);
}
.pouls-sur { font-variant-numeric: tabular-nums; margin-left: -1px; }

.valeur.visage { display: flex; align-items: center; gap: 10px; }
.visage-apercu {
  width: 32px; height: 32px; flex: none;
  border-radius: 50%; object-fit: cover;
  background: var(--carte);
}
.visage-apercu.vide { opacity: .45; }

.visage-choix {
  display: inline-flex; align-items: center;
  min-height: var(--controle-h);
  padding: var(--controle-pad-y) var(--controle-pad-x);
  border: 1px solid transparent; border-radius: var(--rond);
  background: var(--carte);
  font-size: var(--controle-fs); line-height: var(--controle-lh); color: var(--doux); cursor: pointer;
}
@media (hover: hover) {
.visage-choix:hover { background: var(--carte-survol); border-color: var(--ligne); color: var(--texte); } }

.deux-temps {
  display: grid; gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 620px) {
  .deux-temps { grid-template-columns: 1fr; gap: 12px; }
  .temps { padding: 12px; }
}

.temps {
  background: var(--flanc);
  border-radius: var(--rond-large);
  padding: 14px;
}

.temps-tete {
  display: flex; align-items: baseline; gap: 8px;
  margin: 0 0 12px;
}
.temps-tete h2 { font-size: 14px; font-weight: 600; margin: 0; }
.temps-compte {
  margin-left: auto; min-width: 20px; text-align: center;
  padding: 2px 6px; border-radius: 999px;
  background: var(--voile-1); color: var(--faible);
  font-size: 11px; font-variant-numeric: tabular-nums;
}

.depot { min-height: 56px; border-radius: var(--rond); }
.pose-en-cours .depot {
  outline: 1px dashed var(--ligne);
  outline-offset: 4px;
}
.pose-en-cours .depot.visee { outline-color: var(--bleu); }

.fiche.module.passage { padding: 10px 12px; border-radius: var(--rond); }
.fiche.module.passage h3 { font-size: 13px; margin-top: 4px; line-height: 1.25; }
.passage-rang { display: flex; align-items: center; gap: 6px; }
.passage-quand {
  flex: 1; min-width: 0; font-size: 12px; color: var(--faible);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.fiche.module.passage.parti { opacity: .45; }
/* EN RETARD N'EST PAS PARTI. Le gris de « parti » dit « c'est fait, passe à la
   suite » ; une entrée en retard demande exactement l'inverse, donc elle garde
   sa pleine opacité et porte la teinte d'un avertissement. */
.fiche.module.passage.en-retard { opacity: 1; border-color: rgba(240,178,50,.35); }
.fiche.module.passage.en-retard .passage-quand { color: #f6c860; }
/* FIGÉ N'EST PAS EN RETARD. L'ambre dit « ça arrive bientôt » ; ici rien
   n'arrivera plus tant que personne n'y touche, et seule une main peut le
   débloquer. Le rouge est la seule teinte du tableau qui demande un geste. */
.fiche.module.passage.fige { opacity: 1; border-color: rgba(232,93,93,.40); }
.fiche.module.passage.fige .passage-quand { color: #f08a8a; }
@media (hover: hover) {
.fiche.module.passage.parti:hover { opacity: .9; } }

.fiche.module.passage .oter-carte { opacity: .4; }
@media (hover: hover) {
.fiche.module.passage:hover .oter-carte { opacity: .75; } }
@media (hover: hover) {
.fiche.module.passage .oter-carte:hover { opacity: 1; background: var(--ligne); } }

.maintenant {
  flex: none;
  padding: 4px 8px;
  border: 1px solid var(--ligne);
  border-radius: 999px;
  background: none;
  color: var(--faible);
  font-size: 11px;
  cursor: pointer;
}
@media (hover: hover) {
.maintenant:hover { background: var(--bleu); border-color: var(--bleu); color: #fff; } }
.maintenant.occupe { opacity: .5; pointer-events: none; }

.manque {
  flex: none;
  font-size: 11px;
  color: var(--faible);
  border: 1px dashed var(--ligne);
  border-radius: 999px;
  padding: 4px 8px;
  white-space: nowrap;
}

.palette {
  padding: 10px; margin-bottom: 14px;
  background: var(--flanc);
  border-radius: var(--rond-large);
}

.blocs {
  display: grid; gap: 8px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 1100px) { .blocs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .blocs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.bloc {
  display: flex; align-items: center; gap: 10px;
  min-height: 56px;
  padding: 8px 14px;
  background: var(--carte);
  border: 1px solid transparent;
  border-radius: var(--rond);
  color: var(--texte);
  font-size: 14px; font-weight: 600;
  text-align: left;
  cursor: grab;
}
@media (hover: hover) {
.bloc:hover { background: var(--carte-survol); border-color: var(--ligne); } }
.bloc:active { cursor: grabbing; }

.bloc .tour { width: 30px; height: 30px; font-size: 16px; color: #fff; }
.bloc.saisie { opacity: .4; }
.bloc.occupe { opacity: .5; pointer-events: none; }

.roue.pose {
  text-decoration: none;
  font-size: 13px; line-height: 1;
  border-radius: 50%;
  background: var(--lueur-2);
  opacity: .75;
}
@media (hover: hover) {
.roue.pose:hover { opacity: 1; background: var(--lueur-3); } }

.gestes-filet {
  width: 1px; height: 18px; flex: none;
  margin: 0 2px;
  background: var(--ligne);
}

.reglage-topic { max-width: 380px; }

.proprietes.fige { opacity: .62; }
.proprietes.fige .liste-tete, .proprietes.fige .date-tete { cursor: default; }

.avertissement.doux { background: var(--lueur-1); color: var(--doux); border-color: var(--ligne); }

.equipe-valeur { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.equipe-jetons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.equipe-jetons .etiquette { cursor: pointer; border: 0; }

.valeur .champ.court { width: 64px; flex: none; text-align: center; }
.valeur.en-ligne .champ:not(.court) { flex: 1; min-width: 0; width: auto; }
.gestes .roue { width: 30px; height: 30px; }
.gestes .roue svg { width: 17px; height: 17px; }

.topic-file { max-width: 640px; margin-top: 26px; }
.topic-file.deja-parti { margin-top: 18px; }

.valeur textarea.champ {
  width: 100%; resize: vertical;
  font-family: inherit; font-size: var(--controle-fs); line-height: 1.5;
}
.valeur code, .menu-val code {
  padding: 2px 4px; border-radius: 4px;
  background: var(--voile-1); font-size: 11px;
}

.salle-projection {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: -8px 0 28px;
  padding: 14px 16px;
  background: var(--carte);
  border: 1px solid var(--ligne);
  border-radius: 12px;
}
.salle-mot {
  font-weight: 600;
  color: var(--texte);
  white-space: nowrap;
}

.salle-projection .liste { flex: 0 1 340px; min-width: 220px; }
.salle-projection .liste-tete { width: 100%; }

.salle-avis {
  flex: 1 1 100%;
  margin: 0;
  color: var(--faible);
  font-size: 14px;
}
.salle-avis strong { color: var(--texte); font-weight: 600; }

/* Les onglets du journal sont des LIENS, pas des boutons : le filtre vit dans
   l'adresse, donc il se partage, se met en favori et survit au rechargement. */
.journal-filtres { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.journal-filtre {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--ligne);
  background: var(--aire);
  color: var(--doux);
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
}
@media (hover: hover) {
.journal-filtre:hover { background: var(--carte-survol); color: var(--texte); } }

.journal-filtre.actif { border-color: var(--bleu); color: var(--texte); background: var(--fond-bleu); }

.journal-compte { font-size: 11px; color: var(--faible); font-variant-numeric: tabular-nums; }
.journal-filtre.actif .journal-compte { color: var(--doux); }

.journal-chercher { position: relative; display: flex; align-items: center; }
.journal-chercher input {
  width: 240px; max-width: 46vw;
  padding: 7px 28px 7px 12px;
  border-radius: var(--rond);
  border: 1px solid var(--ligne);
  background: var(--aire);
  color: var(--texte);
  font-family: inherit; font-size: 13px;
}
.journal-chercher input::placeholder { color: var(--faible); }
.journal-chercher input:focus { outline: none; border-color: var(--bleu); }
.journal-vider {
  position: absolute; right: 9px;
  color: var(--faible); text-decoration: none; font-size: 12px; line-height: 1;
}
@media (hover: hover) {
.journal-vider:hover { color: var(--texte); } }

.etiquette.journal-arrivee { background: var(--fond-vert); color: #7ae0a3; }
.etiquette.journal-depart { background: #3a3d43; color: #c3c8ce; }
.etiquette.journal-edition { background: #5a4718; color: #f5cd77; }
.etiquette.journal-suppression { background: #5c2427; color: #f19295; }
.etiquette.journal-sanction { background: #5a2547; color: #f19ad3; }
.etiquette.journal-alerte { background: #5c2427; color: #f19295; }

.ajout-tete { max-width: 860px; margin-bottom: 20px; }
.ajout-personnage { width: 100%; max-width: 340px; margin-bottom: 10px; }
.ajout-recherche { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ajout-requete { flex: 1 1 320px; min-width: 200px; font-size: 16px; padding: 12px 14px; }

.gifs-televerser { cursor: pointer; }

.gifs-etat { margin: 12px 0 0; color: var(--faible); font-size: 14px; }
.gifs-etat-erreur { color: #f19295; }

.gifs-resultats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin-top: 14px;

  max-height: 40vh;
  overflow-y: auto;
  margin-bottom: 26px;
}
.gifs-trouve {
  padding: 0; border: 2px solid transparent; border-radius: var(--rond);
  background: var(--fond); cursor: pointer; overflow: hidden; line-height: 0;
}
.gifs-trouve img { width: 100%; height: 110px; object-fit: cover; display: block; }
@media (hover: hover) {
.gifs-trouve:hover { border-color: var(--bleu); } }
.gifs-encours { opacity: .5; }

.gifs-garde { border-color: var(--vert); opacity: .45; cursor: default; }

.gifs-compte { color: var(--faible); font-size: 13px; }

.gifs-pages {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; margin-top: 22px;
}

.gifs-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.gifs-carte {
  margin: 0; position: relative;
  background: var(--aire); border: 1px solid var(--ligne);
  border-radius: var(--rond); overflow: hidden;
}
.gifs-carte img { width: 100%; height: 130px; object-fit: cover; display: block; }
.gifs-carte figcaption { padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; }
.gifs-oeuvre { font-size: 14px; font-weight: 500; }
.gifs-meta { color: var(--faible); font-size: 12px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.gifs-retirer {
  position: absolute; top: 6px; right: 6px;
  width: 26px; height: 26px; padding: 0;
  display: grid; place-items: center;
  border: none; border-radius: 50%;
  background: var(--voile-3); color: #fff;
  cursor: pointer; opacity: 0; transition: opacity .15s;
}
@media (hover: hover) {
.gifs-carte:hover .gifs-retirer, .gifs-retirer:focus { opacity: 1; } }
@media (hover: hover) {
.gifs-retirer:hover { background: var(--rouge); } }
.gifs-retirer svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }

.etiquette.gifs-hors { background: #5a4718; color: #f5cd77; font-size: 11px; padding: 2px 6px; }
.etiquette.gifs-rogne { background: var(--fond-bleu); color: #b3bbff; font-size: 11px; padding: 2px 6px; }

.planning {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
@media (max-width: 900px) { .planning { grid-template-columns: 1fr; gap: 24px; } }

.planning-mois { min-width: 0; }
.mois-tete { margin-bottom: 12px; }
.mois-tete b { font-size: 14px; font-weight: 600; text-transform: capitalize; }

.jours-noms, .planning-grille {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.jours-noms span {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--faible);
  padding-bottom: 6px;
}
.planning-grille { grid-auto-rows: 40px; }

.planning .case {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 6px;
  background: var(--fond);
  border: 1px solid transparent;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  color: inherit;
}
.planning .num-jour {
  font-style: normal;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--faible);
}
.planning .case.hors .num-jour { color: #52565e; }
.planning .case.aujourdhui { border-color: var(--bleu); }
.planning .case.aujourdhui .num-jour { color: var(--texte); font-weight: 700; }

.planning .case.plein { background: var(--carte); }
.planning .case.plein .num-jour { color: var(--texte); font-weight: 600; }

.planning .case { cursor: pointer; transition: background .15s, box-shadow .15s; }
@media (hover: hover) {
.planning .case:hover { background: var(--carte-survol); } }
.planning .case:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--bleu); }
.planning .case.choisi {
  background: var(--bleu);
  box-shadow: 0 0 0 1px var(--bleu);
}
.planning .case.choisi .num-jour { color: #fff; font-weight: 700; }

.planning .case.choisi .pt { background: rgba(255, 255, 255, .85); }
.planning .case.choisi .pt.passe { background: rgba(255, 255, 255, .45); }

.pastilles-jour { display: flex; gap: 2px; }
.planning .pt { width: 7px; height: 7px; border-radius: 50%; display: block; }

.teinte-bleu   { --teinte: 121, 131, 245; --fond-teinte: var(--fond-bleu);   --vif-teinte: var(--vif-bleu); }
.teinte-vert   { --teinte:  35, 165,  90; --fond-teinte: var(--fond-vert);   --vif-teinte: var(--vif-vert); }
.teinte-ambre  { --teinte: 240, 178,  50; --fond-teinte: var(--fond-ambre);  --vif-teinte: var(--vif-ambre); }
.teinte-violet { --teinte: 168, 118, 232; --fond-teinte: var(--fond-violet); --vif-teinte: var(--vif-violet); }
.teinte-rose   { --teinte: 232, 106, 152; --fond-teinte: var(--fond-rose);   --vif-teinte: var(--vif-rose); }
.teinte-cyan   { --teinte:  66, 184, 205; --fond-teinte: var(--fond-cyan);   --vif-teinte: var(--vif-cyan); }
.teinte-gris   { --teinte: 148, 155, 164; --fond-teinte: var(--fond-gris);   --vif-teinte: var(--vif-gris); }
.planning .pt.teinte-bleu  { background: var(--bleu-clair); }
.planning .pt.teinte-vert  { background: var(--vert); }
.planning .pt.teinte-ambre { background: var(--jaune); }

.planning-suite { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.suite-jour { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.suite-vide { margin: 0; padding: 16px 0; text-align: center; }

.suite-tete {
  margin: 0 0 2px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--faible);
}

.seance {
  --teinte: 149, 155, 164;
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(var(--teinte), .09);
  border: 1px solid rgba(var(--teinte), .28);
  border-radius: var(--rond);
  padding: 12px 16px;
  text-decoration: none;
  color: inherit;
  transition: background .15s, border-color .15s;
}
@media (hover: hover) {
a.seance:hover { background: rgba(var(--teinte), .15); border-color: rgba(var(--teinte), .48); } }
a.seance:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }

.seance-h {
  flex: none;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: rgb(var(--teinte));
}

.seance-corps { min-width: 0; flex: 1; }

.seance-titre {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.005em;
  overflow-wrap: anywhere;
}
.seance-meta { display: block; margin-top: 3px; font-size: 12px; color: var(--faible); }
.seance-rubrique { color: rgb(var(--teinte)); font-weight: 600; }
.seance-num { font-family: ui-monospace, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }

.seance-dans {
  flex: none;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--faible);
  white-space: nowrap;
}

.planning-vide {
  margin: 0;
  padding: 28px 20px;
  text-align: center;
  background: var(--fond);
  border: 1px dashed var(--ligne);
  border-radius: var(--rond-large);
  font-size: 13px;
  color: var(--faible);
}
.planning-vide b { display: block; color: var(--doux); font-weight: 600; margin-bottom: 4px; }
.planning-vide a { color: var(--bleu-clair); }

.mur-films {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(164px, 1fr));
  gap: 16px;
  align-items: start;
}

.mur-envies {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(164px, 1fr));
  gap: 16px;
  align-items: start;
  margin-top: 22px;
}

.envie-carte { min-width: 0; }

.envie-image {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: var(--rond-large);
  overflow: hidden;
  background: var(--carte);
  display: grid;
  place-items: center;
  margin-bottom: 9px;
}
.envie-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

.envie-compte {
  position: absolute; top: 7px; right: 7px;
  min-width: 22px; height: 22px; padding: 0 6px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(10, 13, 20, .82);
  color: #fff; font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  backdrop-filter: blur(3px);
}

.envie-titre {
  display: block;
  font-size: 13px; font-weight: 600; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.envie-pied {
  display: flex; align-items: center; gap: 6px;
  margin-top: 2px;
}

.envie-carte .envie-qui { flex: 1; min-width: 0; margin-top: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.envie-carte .envie-gestes { margin-right: -4px; }

.jaquette { min-width: 0; }

.jaquette-image {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: var(--rond-large);
  overflow: hidden;
  background: var(--carte);
  display: grid;
  place-items: center;
  transition: transform .15s ease, box-shadow .15s ease;
}
.jaquette-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

.jaquette-init { font-size: 28px; font-weight: 700; letter-spacing: -.02em; color: var(--faible); }

.jaquette-voile {
  position: absolute;
  inset: auto 0 0 0;
  padding: 28px 12px 12px;
  background: linear-gradient(to top, var(--voile-4) 25%, var(--voile-3) 60%, transparent);
  opacity: 0;
  transition: opacity .15s ease;
}
.jaquette-voile b {
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
  overflow-wrap: anywhere;
}
.jaquette-voile span {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: rgba(255,255,255,.72);
  font-variant-numeric: tabular-nums;
}
@media (hover: hover) {

.jaquette:hover .jaquette-voile,
.jaquette:focus-within .jaquette-voile { opacity: 1; } }

@media (prefers-reduced-motion: no-preference) {
  .jaquette:hover .jaquette-image {
    transform: translateY(-3px);
    box-shadow: var(--ombre-flottante);
  }
}

@media (hover: none) {
  .jaquette-voile { opacity: 1; }
}

.envie {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--rond);
  background: var(--carte);
  border: 1px solid var(--bord);
}

.envie-jaquette {
  flex: 0 0 auto;
  width: 34px;
  aspect-ratio: 2 / 3;
  border-radius: 4px;
  overflow: hidden;
  background: var(--fond);
}
.envie-jaquette img { width: 100%; height: 100%; object-fit: cover; display: block; }

.envie-corps { min-width: 0; flex: 1; }

.envie-corps h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.envie-qui {
  display: block;
  margin-top: 1px;
  font-size: 11px;
  color: var(--faible);
  font-variant-numeric: tabular-nums;
}

.envie-gestes { display: flex; gap: 2px; flex: 0 0 auto; }

.envie-gestes button {
  display: grid;
  place-items: center;
  width: var(--geste-t);
  height: var(--geste-t);
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--faible);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.envie-gestes svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (hover: hover) {

.envie-programmer:hover { background: var(--accent-fond); color: var(--accent); } }
@media (hover: hover) {
.envie-oter:hover { color: var(--texte); } }

.envie-oter.arme { background: var(--danger-fond); color: var(--danger); }

.envie-gestes button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.journal {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
}

.journal-entree {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 10px 12px;
  border-radius: var(--rond);
  transition: background .15s ease;
}
@media (hover: hover) {
.journal-entree:hover { background: var(--aire); } }
.journal-entree[hidden] { display: none; }

.log-tete { position: relative; width: 40px; height: 40px; }

.log-photo {
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
  display: grid; place-items: center;
  background: var(--carte);
  color: var(--faible);
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
}

.log-pastille {
  position: absolute; right: -1px; bottom: -1px;
  width: 13px; height: 13px;
  border-radius: 50%;
  border: 2.5px solid var(--flanc);
  background: var(--faible);
}
.log-pastille.journal-suppression { background: var(--rouge); }
.log-pastille.journal-edition     { background: var(--jaune); }
.log-pastille.journal-arrivee     { background: var(--vert); }
.log-pastille.journal-depart      { background: var(--faible); }
.log-pastille.journal-sanction    { background: var(--rouge); }
.log-pastille.journal-alerte      { background: var(--jaune); }

.log-corps { min-width: 0; }

.log-phrase {
  margin: 2px 0 0;
  font-size: 14px; line-height: 1.4; color: var(--doux);
}
.log-phrase b { color: var(--texte); font-weight: 600; }
.log-salon { color: var(--bleu-clair); font-weight: 500; }

.log-texte {
  margin: 5px 0 0;
  padding-left: 10px;
  border-left: 2px solid var(--ligne);
  font-size: 13px; line-height: 1.4;
  color: var(--doux);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.log-details {
  margin: 6px 0 0;
  display: grid; grid-template-columns: auto 1fr; gap: 2px 10px;
  font-size: 12px;
}
.log-details dt { color: var(--faible); }
.log-details dd { margin: 0; color: var(--doux); overflow-wrap: anywhere; }

.log-quand {
  margin-top: 3px;
  font-size: 12px; color: var(--faible);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .journal-entree { grid-template-columns: 40px 1fr; }
  .log-quand { grid-column: 2; margin-top: 6px; }
}

/* ── CE QUE LA LIGNE PORTE EN PLUS DEPUIS QU'ELLE N'EST PLUS DANS DISCORD ──
   Le gras, le code, les liens et les petites lignes grises étaient rendus par
   Discord ; ils arrivent ici en HTML (voir lib/journalLisible.js), et il faut
   donc leur donner une apparence. */
.log-rubrique {
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--aire);
  color: var(--faible);
  font-size: 11px; font-weight: 500;
  white-space: nowrap;
}
.log-phrase a, .log-texte a, .log-details a { color: var(--bleu-clair); }
.log-phrase code, .log-texte code, .log-details code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--aire);
  color: var(--texte);
  font-size: .92em;
}
.log-texte small, .log-details small { display: block; color: var(--faible); font-size: 11px; }

.journal-sujet, .journal-rien { margin: -4px 0 14px; }
.journal-suite { margin: 18px 0 0; }

.diapo { position: relative; display: block; }
.diapo .planche-jeu { transition: opacity .22s ease; }

@media (prefers-reduced-motion: reduce) {
  .diapo .planche-jeu { transition: none; }
}

.arreter {
  margin-left: auto;
  padding: 4px 10px;
  border: 1px solid var(--ligne);
  border-radius: 999px;
  background: transparent;
  color: var(--faible);
  font: inherit; font-size: 11px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
@media (hover: hover) {
.arreter:hover { color: var(--texte); border-color: var(--faible); } }

.arreter.arme { background: var(--rouge); border-color: var(--rouge); color: #fff; }
.arreter:disabled { opacity: .6; cursor: default; }

.affiche {
  position: relative;
  width: min(100%, 520px);
  border-radius: var(--rond);
  overflow: hidden;
  background: var(--fond);
  line-height: 0;
}
.affiche img { width: 100%; display: block; transition: opacity .15s ease; }

.affiche.survol { outline: 2px dashed var(--bleu); outline-offset: -4px; }

.affiche-fleche {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center;
  width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--voile-3); color: #fff;
  cursor: pointer; opacity: .35;
  transition: opacity .15s ease, background .15s ease;
}
@media (hover: hover) {
.affiche:hover .affiche-fleche { opacity: 1; } }
@media (hover: hover) {
.affiche-fleche:hover { background: var(--voile-4); } }
.affiche-fleche:focus-visible { opacity: 1; outline: 2px solid #fff; outline-offset: 1px; }
.affiche-fleche.gauche { left: 8px; }
.affiche-fleche.droite { right: 8px; }
.affiche-fleche svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}

.affiche-rang {
  position: absolute; right: 9px; bottom: 8px;
  padding: 2px 8px; border-radius: 999px;
  background: var(--voile-3);
  font-size: 11px; font-weight: 600; line-height: 1.5;
  color: #fff; font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.affiche-gestes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

.affiche-gestes label.bouton { cursor: pointer; }

.valeur.en-ligne, .valeur .en-ligne {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}

.valeur .champ.court { width: 72px; flex: none; text-align: center; }

.entete .titre-champ, .entete .titre-emoji {
  border: 1px solid transparent;
  border-radius: var(--rond);
  background: var(--carte);
  color: var(--texte);
  font: inherit;
  padding: 4px 12px;
  transition: background .15s ease, border-color .15s ease;
}
.entete .titre-champ {
  flex: 1; min-width: 0; width: auto;
  font-size: 34px; font-weight: 700; letter-spacing: -.02em;
}

.entete .titre-emoji {
  flex: none; width: 54px; min-width: 0;
  font-size: 28px; text-align: center;
}
@media (hover: hover) {

.entete .titre-champ:hover, .entete .titre-emoji:hover { background: var(--carte-survol); } }
.entete .titre-champ:focus, .entete .titre-emoji:focus {
  outline: none; background: var(--carte-survol); border-color: var(--bleu);
}
.entete .titre-champ::placeholder { color: var(--faible); font-weight: 600; }

.tags {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 4px 6px;
  border: 1px solid var(--ligne);
  border-radius: var(--rond);
  background: var(--fond);
  max-width: 520px;
}
.tags:focus-within { border-color: var(--bleu); }

.tags { cursor: text; }
.tags .tag { cursor: default; }

.tag {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 4px 4px 4px 8px;
  border-radius: 999px;
  background: var(--carte);
  color: var(--doux);
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.tag.fige { padding-right: 8px; background: var(--ligne); color: var(--faible); }

.tag button {
  display: grid; place-items: center;
  width: 15px; height: 15px; padding: 0;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--faible); cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
@media (hover: hover) {
.tag button:hover { background: var(--rouge); color: #fff; } }
.tag button svg {
  width: 8px; height: 8px; fill: none; stroke: currentColor;
  stroke-width: 3; stroke-linecap: round;
}

.tags .tag-champ {
  flex: 1; min-width: 70px; width: auto;
  border: 0; background: transparent; color: var(--texte);
  font: inherit; font-size: 13px; padding: 4px 6px;
}
.tags .tag-champ:focus { outline: none; }
.tags .tag-champ::placeholder { color: var(--faible); font-size: 15px; }

.p-couleur {
  flex: none;
  width: 40px; height: 32px; padding: 0;
  border: 1px solid var(--ligne); border-radius: 8px;
  background: transparent; cursor: pointer;
}
.p-couleur::-webkit-color-swatch-wrapper { padding: 4px; }
.p-couleur::-webkit-color-swatch { border: 0; border-radius: 6px; }

.etat-fonds {
  margin-top: 10px; max-width: 520px;
  max-height: 160px; overflow-y: auto;
  padding: 8px 12px;
  border-radius: var(--rond);
  background: var(--fond);
  font-size: 12px; color: var(--doux);
  font-variant-numeric: tabular-nums;
}
.etat-fonds p { margin: 0 0 3px; }
.etat-fonds p.petite { color: #f6c860; }
.etat-fonds p.rate { color: var(--rouge); }

.bouton.danger { color: var(--faible); }
@media (hover: hover) {
.bouton.danger:hover { color: var(--rouge); } }
.bouton.danger.arme { background: var(--rouge); color: #fff; }

.arreter {
  margin-left: auto;
  padding: 4px 10px;
  border: 1px solid var(--ligne);
  border-radius: 999px;
  background: transparent;
  color: var(--faible);
  font: inherit; font-size: 11px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
@media (hover: hover) {
.arreter:hover { color: var(--texte); border-color: var(--faible); } }

.arreter.arme { background: var(--rouge); border-color: var(--rouge); color: #fff; }
.arreter:disabled { opacity: .6; cursor: default; }

.filtre-gens {
  display: flex; gap: 10px; align-items: center;
  max-width: 520px; margin-bottom: 20px;
}
.filtre-gens .champ { flex: 1; }

.galerie-gens {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
}

.tete {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-decoration: none; color: var(--doux);
  transition: color .15s ease;
}
.tete[hidden] { display: none; }
@media (hover: hover) {
.tete:hover { color: var(--texte); } }
.tete b { font-size: 12px; font-weight: 600; text-align: center; line-height: 1.25; }

.tete-image {
  position: relative;
  width: 100%; aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--carte);
  filter: saturate(.7) brightness(.82);
  transition: filter .15s ease, transform .15s ease;
}
.tete-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (hover: hover) {
.tete:hover .tete-image, .tete:focus-visible .tete-image {
  filter: none;
  transform: translateY(-2px);
} }
.tete:focus-visible { outline: none; }
.tete:focus-visible .tete-image { outline: 2px solid var(--bleu); outline-offset: 2px; }

.tete-compte {
  font-size: 11px; color: var(--faible);
  font-variant-numeric: tabular-nums;
}

.pastilles-jour .pt.passe { opacity: .38; }

.case.revolu .num-jour { opacity: .8; }

.classeur {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 16px;
  align-items: start;
}

.classeur-dossier {
  display: grid;
  gap: 6px;
  padding: 16px;
  border-radius: var(--rond-large);
  background: var(--carte);
  border: 1px solid var(--ligne);
  color: inherit;
  text-decoration: none;
  transition: transform .15s ease, border-color .15s ease;
}
@media (hover: hover) {
.classeur-dossier:hover { transform: translateY(-2px); border-color: var(--bleu-clair); } }
.classeur-dossier b { font-size: 15px; font-weight: 600; }

.classeur-pile {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  width: 62px;
  margin-bottom: 8px;
}
.classeur-carre {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 6px;
  background: var(--fond);
  font-size: 14px;
  font-style: normal;
}

.classeur-carre.attente { opacity: .38; }
.classeur-carre.vide { background: color-mix(in srgb, var(--fond) 60%, transparent); }

.classeur-quoi { font-size: 12px; color: var(--faible); line-height: 1.4; }
.classeur-compte {
  font-size: 11px;
  color: var(--faible);
  font-variant-numeric: tabular-nums;
}

.grille-jeux {
  display: grid;
  grid-auto-rows: 1fr;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}

.carte-jeu {
  display: grid;
  gap: 4px;
  padding: 14px;
  border-radius: var(--rond-large);
  background: var(--carte);
  border: 1px solid var(--ligne);
}

.carte-jeu-emoji { font-size: 20px; font-style: normal; line-height: 1; }
.carte-jeu b { font-size: 14px; font-weight: 600; }
.carte-jeu-quoi { font-size: 12px; color: var(--faible); line-height: 1.4; }
.carte-jeu-etat {

  margin-top: auto;
  padding-top: 6px;
  font-size: 11px;
  color: var(--faible);
  font-variant-numeric: tabular-nums;
}

.carte-jeu.a-ecrire { border-style: dashed; }
.carte-jeu.a-ecrire .carte-jeu-emoji { opacity: .45; }
.carte-jeu.a-ecrire b { color: var(--faible); }

.intertitre {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--faible);
  margin: 0 0 12px;
}

.carte-jeu-emoji {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 12px;
  background: var(--fond-gris);
  margin-bottom: 4px;
}
.carte-jeu.gris   .carte-jeu-emoji { background: var(--fond-gris); }
.carte-jeu.bleu   .carte-jeu-emoji { background: var(--fond-bleu); }
.carte-jeu.vert   .carte-jeu-emoji { background: var(--fond-vert); }
.carte-jeu.ambre  .carte-jeu-emoji { background: var(--fond-ambre); }
.carte-jeu.violet .carte-jeu-emoji { background: var(--fond-violet); }
.carte-jeu.rose   .carte-jeu-emoji { background: var(--fond-rose); }
.carte-jeu.cyan   .carte-jeu-emoji { background: var(--fond-cyan); }

.carte-jeu:not(.a-ecrire).gris   { border-color: var(--vif-gris); }
.carte-jeu:not(.a-ecrire).bleu   { border-color: var(--vif-bleu); }
.carte-jeu:not(.a-ecrire).vert   { border-color: var(--vif-vert); }
.carte-jeu:not(.a-ecrire).ambre  { border-color: var(--vif-ambre); }
.carte-jeu:not(.a-ecrire).violet { border-color: var(--vif-violet); }
.carte-jeu:not(.a-ecrire).rose   { border-color: var(--vif-rose); }
.carte-jeu:not(.a-ecrire).cyan   { border-color: var(--vif-cyan); }

.fil-ici { font-size: var(--controle-fs); font-weight: 600; margin: 0 6px; }

.burger { display: none; }

.voile-tiroir {
  position: fixed; inset: 0; z-index: calc(var(--plan-tiroir) - 1);
  background: var(--voile-3);
}

@media (max-width: 820px) {
  body.app {
    grid-template-columns: 1fr;
    grid-template-rows: var(--haut-haut) 1fr;
    grid-template-areas: "haut" "aire";
  }

  .flanc {
    position: fixed; z-index: var(--plan-tiroir);
    top: 0; bottom: 0; left: 0;

    padding-left: env(safe-area-inset-left);
    padding-bottom: env(safe-area-inset-bottom);
    width: calc(min(82vw, 300px) + env(safe-area-inset-left));
    transform: translateX(-102%);
    transition: transform .22s ease;
    box-shadow: 0 0 40px var(--voile-2);
  }

  .flanc.ouvert { transform: none; }

  .burger {
    display: inline-grid; place-items: center;

    width: 40px; height: 40px; margin-right: 4px;
    background: transparent; border: 0; border-radius: 8px;
    color: inherit; cursor: pointer;
  }
  .burger:hover { background: var(--lueur-2); }
  .burger svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

  .aire { padding: 16px 14px 40px; }

  .haut { padding: 8px 12px; gap: 8px; flex-wrap: nowrap; align-items: flex-start; }

  .haut-actions {
    align-content: flex-start;
    align-items: center;
    min-height: 40px;
  }

  .haut-actions .roue {
    width: 40px; height: 40px;
    border-radius: 999px;
    margin-left: 0;
    opacity: .75;
  }
  .haut-actions .roue svg { width: 21px; height: 21px; }
  .haut-actions .roue:active { opacity: 1; background: var(--lueur-3); }

  body.app { grid-template-rows: auto 1fr; }

  .haut-actions { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; gap: 8px; }

  .gestes { gap: 8px; flex-wrap: wrap; min-width: 0; justify-content: flex-end; }
  .haut .bouton {
    padding: 6px 10px; font-size: 13px; white-space: nowrap; flex: none;
  }

  .haut .retour .mot { display: none; }

  .haut #lancer .mot { display: none; }
  .haut .bouton.retour { gap: 0; padding: 6px 8px; }

  .haut-actions .gestes { flex: 1 1 auto; }

  .haut > * { min-width: 0; }

  .tableau { grid-template-columns: 1fr; gap: 20px; }

  .chevron-place { width: 40px; right: 4px; }
  .dossier-tete .entree { padding-right: 44px; }

  .mur-envies { grid-template-columns: 1fr; gap: 8px; margin-top: 16px; }

  .envie-carte {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 10px;
    align-items: center;
    padding: 8px;
    border-radius: var(--rond);
    background: var(--carte);
    border: 1px solid var(--bord);
  }
  .envie-image { grid-row: 1 / 3; width: 40px; margin: 0; border-radius: 4px; }

  .envie-image .jaquette-init { font-size: 14px; }
  .envie-titre { grid-column: 2; align-self: end; }
  .envie-pied { grid-column: 2; align-self: start; }

  .envie-compte { display: none; }

  .envie-gestes button { width: 38px; height: 38px; }
  .envie-gestes svg { width: 18px; height: 18px; }

  .grille-oeuvres { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .flanc { transition: none; }
}

.mur-partenaires {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.carte-partenaire {
  background: var(--carte); border: 1px solid var(--ligne);
  border-radius: 12px; padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
}

.carte-partenaire.dormante { opacity: .5; }

.partenaire-tete { display: flex; align-items: center; gap: 10px; }

.partenaire-type {
  flex: none; width: 34px; height: 34px; border-radius: 8px;
  display: grid; place-items: center; font-size: 16px;
  background: var(--carte-survol);
}
.partenaire-type.violet { background: var(--fond-violet); }
.partenaire-type.rose   { background: var(--fond-rose); }
.partenaire-type.bleu   { background: var(--fond-bleu); }
.partenaire-type.vert   { background: var(--fond-vert); }

.partenaire-qui { display: flex; flex-direction: column; min-width: 0; }
.partenaire-qui b { font-size: 15px; }
.partenaire-qui span {
  font-size: 12px; color: var(--faible);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.bascule-fiche {
  margin-left: auto; flex: none;
  font: inherit; font-size: 12px;
  padding: 4px 10px; border-radius: 999px;
  background: none; border: 1px solid var(--ligne); color: var(--doux);
  cursor: pointer;
}
.bascule-fiche[data-actif="true"] { border-color: var(--vert); color: var(--vert); }
.bascule-fiche:disabled { opacity: .5; cursor: default; }

.partenaire-quoi { font-size: 13px; color: var(--doux); margin: 0; }

.partenaire-images {
  display: grid; gap: 6px;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
}
.partenaire-images img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: 8px; display: block;
}

.partenaire-lien {
  font-size: 12px; color: var(--bleu); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (hover: hover) {
.partenaire-lien:hover { text-decoration: underline; } }

.partenaire-gestes { display: flex; gap: 14px; }
.lien-nu.danger { color: var(--rouge); }

.partenaire-edition {
  display: flex; flex-direction: column; gap: 8px;
  padding-top: 10px; border-top: 1px solid var(--ligne);
}

.partenaire-tiroir { display: flex; flex-wrap: wrap; gap: 6px; }
.vignette { position: relative; width: 64px; height: 64px; }
.vignette img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 8px; display: block;
}

.vignette-ote {
  position: absolute; top: -6px; right: -6px;
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  border: 0; background: var(--rouge); color: #fff;
  font: inherit; font-size: 13px; line-height: 1; cursor: pointer;
}

.fiche-neuve {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--carte); border: 1px solid var(--ligne);
  border-radius: 12px; padding: 14px; margin-bottom: 18px;
}
.rang-champs { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rang-champs > .liste, .rang-champs > .champ { flex: 1 1 180px; min-width: 0; }

.erreur { color: var(--rouge); font-size: 13px; margin: 0; }

@media (max-width: 1000px) {
  .mur-partenaires { grid-template-columns: 1fr; }
}

.partenaire-reseaux { display: flex; flex-wrap: wrap; gap: 6px; }
.pastille-reseau {
  font-size: 12px; padding: 4px 10px; border-radius: 999px;
  background: var(--carte-survol); color: var(--doux);
  text-decoration: none; border: 1px solid var(--ligne);
}
@media (hover: hover) {
.pastille-reseau:hover { color: var(--texte); border-color: var(--bleu); } }

.partenaire-tiroir.vertical { flex-direction: column; gap: 4px; }
.ligne-reseau {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px; border-radius: 8px;
  background: var(--carte-survol); font-size: 12px;
}
.ligne-reseau b { flex: none; }
.ligne-url {
  flex: 1; min-width: 0; color: var(--faible);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ligne-reseau .vignette-ote { position: static; flex: none; }

.tv-direct {
  display: flex; align-items: center; gap: 10px;
  background: var(--carte); border: 1px solid var(--ligne);
  border-radius: 12px; padding: 10px 14px; margin-bottom: 16px;
}
.tv-direct form { margin-left: auto; }
.tv-direct-titre { color: var(--doux); }
.tv-pastille {
  width: 8px; height: 8px; border-radius: 50%; background: var(--rouge);
  flex: none; box-shadow: 0 0 0 3px rgba(237, 66, 69, .18);
}

.tv-barre {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-bottom: 12px;
}
.tv-cherche {
  flex: 1 1 320px; min-width: 0; position: relative;
  display: flex; align-items: center; gap: 8px;
  background: var(--carte); border: 1px solid var(--ligne);
  border-radius: 12px; padding: 0 12px; height: 42px;
}
.tv-cherche:focus-within { border-color: var(--bleu); }
.tv-cherche svg {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: var(--faible); stroke-width: 2; stroke-linecap: round;
}
.tv-cherche input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none;
  font: inherit; color: var(--texte);
}

.tv-compte { font-size: 12px; color: var(--faible); flex: none; }

.tv-vers { display: flex; align-items: center; gap: 8px; flex: none; }
.tv-vers-mot { font-size: 12px; color: var(--faible); }
.tv-vers .liste { min-width: 140px; }

.tv-puces { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.tv-puce {
  font: inherit; font-size: 12px;
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  background: var(--carte); border: 1px solid var(--ligne); color: var(--doux);
}
@media (hover: hover) {
.tv-puce:hover { background: var(--carte-survol); color: var(--texte); } }
.tv-puce.actif { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.tv-puce-liste { min-width: 150px; }

.tv-grille {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.tv-carte {
  position: relative; text-align: left; font: inherit; color: inherit;
  cursor: pointer; padding: 8px;
  display: flex; flex-direction: column; gap: 6px;
  background: var(--carte); border: 1px solid var(--ligne); border-radius: 12px;
}
@media (hover: hover) {
.tv-carte:hover { border-color: var(--bleu); } }
.tv-carte:focus-visible { outline: 2px solid var(--bleu); outline-offset: 1px; }

.tv-carte::after {
  content: 'Lancer'; position: absolute; inset: auto 10px 10px auto;
  background: var(--bleu); color: #fff;
  font-size: 11px; font-weight: 600; padding: 4px 8px; border-radius: 6px;
  opacity: 0; transition: opacity .15s; pointer-events: none;
}
@media (hover: hover) {
.tv-carte:hover::after, .tv-carte:focus-visible::after { opacity: 1; } }

.tv-tuile {
  position: relative; aspect-ratio: 16 / 9;
  display: grid; place-items: center; overflow: hidden;
  border-radius: 6px;

  background:
    linear-gradient(180deg, var(--lueur-1), var(--voile-0)),
    var(--fond);
  box-shadow: inset 0 0 0 1px var(--lueur-1);
}
.tv-tuile img { max-width: 82%; max-height: 82%; object-fit: contain; }

.tv-initiale { font-weight: 700; font-size: 16px; color: var(--faible); letter-spacing: .5px; }

.tv-coeur {
  position: absolute; top: 4px; left: 4px; z-index: var(--plan-contenu);
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  border: 0; cursor: pointer; font-size: 13px; line-height: 1;
  background: var(--voile-2); color: #fff;
}
@media (hover: hover) {
.tv-coeur:hover { background: var(--voile-3); } }
.tv-coeur.aime { color: var(--rouge); }

.tv-nom {
  font-size: 12px; line-height: 1.25; color: var(--texte);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.tv-bas { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.tv-genre {
  font-size: 11px; color: var(--doux);
  background: var(--carte-survol); border-radius: 4px; padding: 2px 6px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tv-qualite {
  font-size: 11px; font-weight: 600; letter-spacing: .3px;
  color: var(--faible); border: 1px solid var(--ligne);
  border-radius: 4px; padding: 2px 4px;
}

.tv-partiel { font-size: 11px; color: var(--ambre, #f0b232); }
.tv-serie { font-size: 11px; color: var(--vif-bleu); }

.tv-plus { display: grid; place-items: center; margin: 20px 0; }

@media (max-width: 1000px) {
  .tv-grille { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .tv-vers { width: 100%; }
  .tv-vers .liste { flex: 1; min-width: 0; }
}

@media (max-width: 1000px) {

  .entree { min-height: 48px; }

  .rameau {
    min-height: 44px;
    padding-top: 10px; padding-bottom: 10px;
    font-size: 14px;
  }
  .rameaux { gap: 2px; }
  .rameau-emoji { width: 20px; font-size: 15px; }

  .burger { width: 44px; height: 44px; }
  .moi-partir { width: 44px; height: 44px; }

  .liste-tete { min-height: 44px; }
  .liste-choix button { min-height: 44px; }
  .date-grille button { min-height: 40px; }
  .date-heure .pas { min-width: 40px; min-height: 40px; }

  .tv-puce { min-height: 40px; padding: 8px 14px; }
  .pastille-reseau { min-height: 38px; display: inline-flex; align-items: center; }
  .bascule-fiche { min-height: 38px; }
  .lien-nu { min-height: 40px; display: inline-flex; align-items: center; }
  .partenaire-gestes { gap: 16px; }

  .tv-coeur, .vignette-ote {
    position: relative;
  }
  .tv-coeur { position: absolute; }
  .tv-coeur::after,
  .vignette-ote::after {
    content: ''; position: absolute; inset: -11px;
  }

  .pastille-teinte { position: relative; }
  .pastille-teinte::after { content: ''; position: absolute; inset: -12px; }
  .nuancier { gap: 10px; }

  .fleche-mois, .tag button, .camp-fonds button { position: relative; }
  .fleche-mois::after,
  .tag button::after,
  .camp-fonds button::after { content: ''; position: absolute; z-index: 0; }
  .fleche-mois::after { inset: -8px; }
  .tag button::after { inset: -8px; }
  .camp-fonds button::after { inset: -6px 0; }

  .oter-carte, .plume, .roue, .gifs-retirer, .changer-fond, .maintenant,
  .duel-oter, .file-gestes button, .envie-gestes button, .composer-outils button {
    position: relative;
  }
  .oter-carte::before, .plume::before, .roue::before, .gifs-retirer::before,
  .changer-fond::before, .maintenant::before, .duel-oter::before,
  .file-gestes button::before, .envie-gestes button::before,
  .composer-outils button::before {
    content: ''; position: absolute; inset: -10px;

    z-index: 0;
  }

  .composer-outils { gap: 4px; }
  .composer-outils button { min-height: 36px; min-width: 36px; }

  .camp-fonds button { min-height: 44px; }

  .outils-bascule button { min-height: 40px; padding: 0 14px; }

  .accueil-topics button { min-height: 44px; padding: 0 16px; }

  .chevron::after { content: ''; position: absolute; inset: -14px; }

  .burger { flex: none; }
}

.ruban-lecture { margin: 0 0 14px; }

.bulle-lecture {
  position: fixed; z-index: var(--plan-image); bottom: calc(22px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  max-width: min(520px, calc(100vw - 32px));
  padding: 10px 16px; border-radius: 999px;
  background: rgba(20,22,26,.96); border: 1px solid var(--ligne);
  color: var(--doux); font-size: 12px; text-align: center;
  box-shadow: var(--ombre-flottante);
}

.tourne-seul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;

  margin-left: -6px;
}
.tourne-seul .dit { margin: 6px 0 0 6px; }

.duel-panneau {
  max-width: 720px;
  background: var(--aire);
  border: 1px solid var(--ligne);
  border-radius: 16px;
  padding: 20px 24px 24px;
}

.duel-panneau .champ { width: 100%; }

.duel-bib {
  margin-top: 12px;
  border: 1px solid var(--ligne);
  border-radius: 12px;
  overflow: hidden;
}

.duel-bib-tete {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--carte);
  border-bottom: 1px solid var(--ligne);
  font-size: 14px;
}

.duel-oeuvre {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
}

.duel-oeuvre + .duel-oeuvre { border-top: 1px solid var(--ligne); }
.duel-oeuvre:hover { background: var(--carte-survol); }
.duel-oeuvre-nom { flex: 1; color: var(--texte); font-weight: 600; }
.duel-oeuvre .compte { color: var(--faible); font-size: 12px; }

#duel-avertit { display: block; margin-top: 12px; color: var(--vif-ambre, #f0a83c); }

.cine { max-width: 1080px; }

.cine-ecran {
  position: relative;
  overflow: hidden;
  background: var(--aire);
  border: 1px solid var(--ligne);
  border-radius: 16px;
}

@media (min-width: 1100px) {
  .cine-ecran {
    position: fixed; top: var(--haut-haut); right: 0; bottom: 0;
    width: min(500px, 100vw);
    z-index: var(--plan-tiroir);
    display: flex; flex-direction: column;
    overflow-y: auto;
    background: var(--flanc);

    border: 0; border-left: 1px solid var(--ligne); border-radius: 0;
  }
  .cine-ecran .cine-ecran-dedans { padding: 20px; }

  /* La toile a été dessinée pour un bandeau large : dans une colonne haute et
   * étroite, son dégradé oblique laisse l'image en clair sur tout le flanc
   * droit, derrière les menus de pistes. On la couche à la verticale et on la
   * baisse : elle situe la séance, elle ne la dispute pas. */
  .cine-ecran .cine-toile { opacity: .12; }
  .cine-ecran .cine-toile::after {
    background: linear-gradient(to bottom, var(--voile-1) 0%, var(--flanc) 55%);
  }

  body.cine-en-salle .aire { padding-right: calc(min(500px, 100vw) + 24px); }
}

.cine-toile {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: .18;
  filter: saturate(1.2);
}
.cine-toile::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, var(--aire) 20%, var(--voile-1) 100%);
}

.cine-ecran-dedans { position: relative; z-index: var(--plan-contenu); padding: 24px; }

.cine-drapeau {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--rouge);
}
.cine-point {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--rouge); box-shadow: 0 0 0 4px rgba(218, 55, 60, .18);
}

.cine-tete-affiche { display: flex; align-items: flex-start; gap: 14px; }
.cine-tete-mots { display: flex; flex-direction: column; min-width: 0; }

.cine-affiche {
  flex: none; width: 78px; aspect-ratio: 2 / 3;
  border-radius: 8px; overflow: hidden;
  background: var(--lueur-2);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
.cine-affiche img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cine-ecran-titre { font-size: 24px; font-weight: 700; line-height: 1.25; color: var(--texte); }
.cine-episode-dit { margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--doux); }
.cine-temps { margin-top: 4px; font-size: 13px; color: var(--faible); }

.cine-suite { margin-top: 18px; border-top: 1px solid var(--ligne); padding-top: 14px; }
.cine-suite-tete {
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--faible);
}
.cine-suite-compte { color: var(--vif-ambre); }
.cine-suite-liste {
  list-style: none; margin: 10px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 2px;
}
/* Chaque ligne est un bouton : la régie se déplace dans la file déjà chargée,
 * donc cliquer un épisode change l'image sans que le bot quitte le vocal. */
.cine-suite-ligne {
  display: block; width: 100%;
  padding: 6px 8px; border: 0; border-radius: 6px;
  font: inherit; font-size: 13px; text-align: left;
  color: var(--doux); background: var(--lueur-1);
  cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (hover: hover) {
  .cine-suite-ligne:hover { background: var(--lueur-2); color: var(--texte); }
}
.cine-suite-ligne:focus-visible { outline: 2px solid var(--bleu); outline-offset: -2px; }
.cine-suite-reste {
  padding: 6px 8px; font-size: 13px;
  color: var(--faible); font-style: italic;
}

.cine-fin { margin-top: 4px; font-size: 12px; color: var(--vif-ambre); }

/* La barre répond au clic : ±1 minute au bouton, sur un film de deux heures,
 * c'est trente clics. Elle se donne de la hauteur au survol pour qu'on voie
 * qu'elle est atteignable — quatre pixels ne se visent pas. */
.cine-piste {
  margin-top: 14px; height: 4px; border-radius: 4px;
  background: var(--lueur-2); overflow: hidden;
  cursor: pointer;
  transition: height .12s ease;
}
@media (hover: hover) { .cine-piste:hover { height: 8px; } }
.cine-piste:focus-visible { outline: 2px solid var(--bleu); outline-offset: 3px; }

/* ── QUI EST DANS LA SALLE ───────────────────────────────────────────────
 * Le bot les compte toutes les trente secondes depuis toujours et n'en faisait
 * rien avant le bilan, c'est-à-dire une fois tout le monde parti. */
.cine-gens {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 12px;
}
.cine-tete-gens {
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  background: var(--lueur-2); color: var(--doux);
  font-size: 11px; font-weight: 700;
}
.cine-tete-gens img { width: 100%; height: 100%; object-fit: cover; }
.cine-gens-mot { font-size: 12px; color: var(--faible); margin-left: 2px; }

/* ── RECALER LES SOUS-TITRES ─────────────────────────────────────────────
 * L'ordre de la régie est absolu et borné à dix secondes : on n'offre donc
 * qu'un pas, et le total se lit entre les deux boutons. */
.cine-recalage {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px;
}
.cine-recalage-mot {
  font-size: 11px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; color: var(--faible);
}
.cine-recalage .bouton { padding: 4px 8px; font-size: 12px; min-height: 0; }
.cine-recalage-dit {
  min-width: 48px; text-align: center;
  font-size: 12px; font-variant-numeric: tabular-nums; color: var(--doux);
}
.cine-jauge {
  display: block; height: 100%; width: 0;
  background: var(--vif-ambre);
  transition: width .22s linear;
}

.cine-commandes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

.cine-pistes { display: flex; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.cine-pistes label { flex: 1 1 220px; font-size: 13px; color: var(--doux); }
.cine-pistes .champ { width: 100%; margin-top: 6px; }

/* ── CE QUI EST PROGRAMMÉ, EN TÊTE DE LA PAGE ────────────────────────────
 *
 * Savoir s'il y a quelque chose ce soir demandait d'ouvrir Séances, une page
 * faite pour PRÉPARER : un tableau, des états, des manques. La question posée
 * en arrivant est plus courte que ça — quand, quoi, où — et tient sur une carte.
 *
 * Les affiches font le décor. Une rangée de rectangles gris avec trois lignes
 * de texte dit la même chose et ne donne envie de rien : c'est le film qu'on
 * reconnaît, pas sa date. */
.cine-agenda {
  display: flex; gap: 12px;
  margin-top: 18px;
  overflow-x: auto;
  padding-bottom: 4px;
  scroll-snap-type: x proximity;
}
/* ── L'ÉTUI DE LA CARTE ──────────────────────────────────────────────────
 *
 * Il porte la largeur et l'accroche de défilement que la carte portait, parce
 * qu'un bouton ne peut pas en contenir un autre : la croix de suppression est
 * la VOISINE de la carte, posée par-dessus en absolu.
 *
 * Elle ne se montre qu'au survol. Une poubelle visible en permanence sur
 * quatre cartes d'affilée transforme un agenda en tableau de bord de
 * suppression — et le geste qu'on fait ici, neuf fois sur dix, c'est ouvrir. */
.cine-agenda-case {
  position: relative;
  flex: 0 0 clamp(200px, 34%, 264px);
  display: flex;
  scroll-snap-align: start;
}
.cine-agenda-case > .cine-agenda-carte { flex: 1 1 auto; min-width: 0; }

.cine-agenda-oter {
  position: absolute; top: 8px; right: 8px;
  width: 28px; height: 28px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 8px;
  background: rgba(0, 0, 0, .55);
  color: var(--faible);
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s ease, color .15s ease, background .15s ease;
}
.cine-agenda-oter svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
@media (hover: hover) {
  .cine-agenda-case:hover .cine-agenda-oter { opacity: 1; }
  .cine-agenda-oter:hover { color: var(--vif-rouge, #ff6b6b); background: rgba(0, 0, 0, .75); }
}
/* Au doigt, il n'y a pas de survol : la croix reste là, en retrait. */
@media (hover: none) { .cine-agenda-oter { opacity: .65; } }
.cine-agenda-oter:focus-visible { opacity: 1; outline: 2px solid var(--bleu); outline-offset: 2px; }

.cine-agenda-carte {
  position: relative; flex: 0 0 clamp(200px, 34%, 264px);
  min-height: 108px;
  display: flex; align-items: flex-end;
  overflow: hidden;
  border: 1px solid var(--ligne); border-radius: 14px;
  background: var(--flanc);
  text-decoration: none;
  scroll-snap-align: start;
  transition: border-color .18s ease, transform .18s ease;
}
@media (hover: hover) {
  .cine-agenda-carte:hover { border-color: var(--bleu); transform: translateY(-2px); }
}
.cine-agenda-carte:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }

/* La première est celle qui arrive : elle porte l'accent, les autres suivent. */
.cine-agenda-carte.premiere { border-color: var(--vif-ambre); }
.cine-agenda-carte.premiere .cine-agenda-quand { color: var(--vif-ambre); }

.cine-agenda-fond {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: .32;
}
/* Le voile monte du bas : le texte s'y pose sans que l'image disparaisse. */
.cine-agenda-fond::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, var(--flanc) 12%, var(--voile-1) 65%, transparent);
}
.cine-agenda-dedans {
  position: relative; z-index: var(--plan-contenu);
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 14px; width: 100%;
}
.cine-agenda-quand {
  font-size: 11px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; color: var(--doux);
}
.cine-agenda-titre {
  font-size: 15px; font-weight: 700; color: var(--texte); line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cine-agenda-ou {
  font-size: 12px; color: var(--faible);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.cine-barre {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 20px;
}

/* ── OÙ ÇA PART, DÉCIDÉ UNE FOIS POUR LA PAGE ────────────────────────────
 *
 * Le menu vivait dans la fiche d'une œuvre : on le retrouvait à chaque
 * ouverture, pour un choix qu'on ne change pas entre deux films. Il est ici,
 * à côté de la recherche, et la fiche se contente de dire où ça ira. */
.cine-vers {
  flex: 0 1 auto;
  display: flex; align-items: center; gap: 8px;
  min-height: var(--controle-h); padding: 0 12px;
  background: var(--flanc);
  border: 1px solid var(--ligne); border-radius: 12px;
}
.cine-vers svg {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: var(--faible); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.cine-vers .champ {
  border: 0; background: none; height: auto; padding: 0;
  max-width: 220px;
}
.cine-vers .champ:focus { outline: none; }

.cine-ou-dit { align-self: center; font-size: 13px; color: var(--faible); }
.cine-cherche {
  position: relative; flex: 1 1 320px;
  display: flex; align-items: center;
}
.cine-cherche svg {
  position: absolute; left: 12px; width: 16px; height: 16px;
  fill: none; stroke: var(--faible); stroke-width: 2;
  stroke-linecap: round; pointer-events: none;
}
.cine-cherche input {
  width: 100%; height: 44px;
  padding: 0 14px 0 40px;
  font: inherit; font-size: var(--controle-fs);
  color: var(--texte); background: var(--flanc);
  border: 1px solid var(--ligne); border-radius: 12px;
}
.cine-cherche input:focus { outline: none; border-color: var(--bleu); }

.cine-cherche input.cherche { border-color: var(--bleu); background: var(--aire); }

.cine-verdict {
  position: absolute; inset: auto 0 0 0;
  padding: 4px 8px;
  font-size: 11px; font-weight: 600; line-height: 1.4;
  color: #fff; background: var(--voile-4);

  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.cine-verdict.tenu { color: var(--vif-vert); }
.cine-verdict.manque { color: #fff; background: var(--rouge); }
.cine-verdict.muet { color: var(--vif-ambre); }

.cine-vers-mot { font-size: 13px; color: var(--faible); white-space: nowrap; }

.cine-section { margin-top: 28px; }

.cine-titre-section {
  margin: 0 0 12px;
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--faible);
}
/* ── LES FACETTES DE LA RECHERCHE ──────────────────────────────────────────
   Une ligne par axe, une puce par valeur, le compte collé au nom. Les puces
   restent discrètes tant qu'on n'y touche pas : ce sont des comptes qu'on lit
   d'abord, des boutons seulement ensuite. */
.cine-facettes {
  display: flex; flex-direction: column; gap: 8px;
  margin: 0 0 14px;
}
.cine-facette { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cine-facette-nom {
  min-width: 78px;
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--faible);
}
.cine-puce {
  padding: 4px 10px; border-radius: 999px;
  font: inherit; font-size: 12px; line-height: 1.4;
  color: var(--faible); background: var(--fond2, rgba(127, 127, 127, .12));
  border: 1px solid transparent; cursor: pointer;
}
.cine-puce:hover { color: inherit; }
.cine-puce.choisie {
  color: #fff; background: var(--bleu);
  border-color: var(--bleu); font-weight: 600;
}
.cine-puce.raz { margin-left: auto; background: none; text-decoration: underline; }
.cine-puce:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }

.cine-grille {
  display: grid; gap: 16px; margin-top: 12px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.cine-carte {
  display: flex; flex-direction: column; gap: 8px;
  padding: 0; text-align: left; font: inherit; color: inherit;
  background: none; border: none; cursor: pointer;
}
.cine-carte:focus-visible { outline: 2px solid var(--bleu); outline-offset: 4px; border-radius: 12px; }

.cine-jaquette {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 2 / 3; overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(160deg, var(--carte), var(--flanc));
  box-shadow: var(--ombre-posee), inset 0 0 0 1px var(--lueur-1);
  transition: transform .22s, box-shadow .22s;
}
.cine-jaquette img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) {
.cine-carte:hover .cine-jaquette { transform: translateY(-4px); box-shadow: var(--ombre-levee), inset 0 0 0 1px var(--lueur-3); } }

.cine-initiale { font-size: 28px; font-weight: 700; color: var(--faible); letter-spacing: 1px; }

.cine-nom {
  font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--texte);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cine-sous { font-size: 12px; color: var(--faible); line-height: 1.4; }

.cine-badge {
  position: absolute; top: 8px; left: 8px;
  padding: 4px 8px; border-radius: 6px;
  font-size: 11px; font-weight: 600; color: #fff;
  background: var(--voile-4);
}

.cine-part {
  position: absolute; inset: auto 0 0 0; height: 4px;
  background: var(--voile-3);
}
.cine-part-plein { display: block; height: 100%; background: var(--bleu); transition: width .22s linear; }

.cine-mot { margin-top: 12px; font-size: 13px; color: var(--faible); line-height: 1.5; }
.cine-dit:empty { display: none; }
.cine-dit { color: var(--doux); }

/* ── LA FICHE D'UNE COPIE EST UN TIROIR, COMME LES AUTRES ────────────────
 *
 * Elle s'ouvrait en modale : un voile noir sur toute la page, un panneau de
 * cinq cent soixante, une ombre portée. La fiche d'une soirée, elle, est un
 * tiroir de cinq cents sans voile — et les deux servent le même geste, à un
 * détail près : l'une part d'une œuvre qu'on a déjà.
 *
 * Deux surfaces différentes pour la même chose obligeaient à réapprendre où
 * cliquer selon la porte par laquelle on était entré. Même bord, même largeur,
 * même façon de fermer. */
.cine-voile {
  position: fixed; top: var(--haut-haut); right: 0; bottom: 0;
  z-index: var(--plan-modale);
  display: flex; justify-content: flex-end;
}
.cine-panneau {
  position: relative;
  width: min(500px, 100vw);
  overflow-y: auto;
  background: var(--flanc);
  border-left: 1px solid var(--ligne);
}

/* La page se retracte comme pour les deux autres tiroirs. */
@media (min-width: 1100px) {
  body.cine-fiche-ouverte .aire,
  /* Le casting fait de même quand ses réglages s'ouvrent : sans ça, la grille
     des personnages passe SOUS le tiroir et on règle à l'aveugle. */
  body.duel-tiroir-ouvert .aire { padding-right: calc(min(500px, 100vw) + 24px); }
}
.cine-fermer {
  position: absolute; top: 12px; right: 12px; z-index: var(--plan-menu);
  width: var(--geste-t); height: var(--geste-t);
  display: grid; place-items: center;
  font: inherit; font-size: 14px; color: #fff;
  background: var(--voile-4); border: none; border-radius: 50%;
  cursor: pointer;
}

.cine-tete {
  display: flex; align-items: flex-end; gap: 16px;
  padding: 24px;
  background-size: cover; background-position: center;
}
.cine-tete .cine-jaquette { width: 96px; flex: none; }
.cine-tete-mots { min-width: 0; }
.cine-tete h2 { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.25; }
.cine-tete-sous { margin: 4px 0 0; font-size: 13px; color: var(--doux); }

.cine-synopsis { margin: 0; padding: 16px 24px 0; font-size: 14px; line-height: 1.5; color: var(--doux); }

.cine-sous-titre {
  padding: 24px 24px 0;
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--faible);
}

.cine-alarme {
  margin: 16px 24px 0;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 13px; line-height: 1.5;
  color: #fff; background: var(--rouge);
}

.cine-alarme.muet { color: var(--fond); background: var(--vif-ambre); }

.cine-gestes {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px 24px 0;
}
.cine-gestes .bouton { width: 100%; }

.cine-ou { display: flex; align-items: center; gap: 8px; }
.cine-ou .champ { flex: 1; min-width: 0; }

.cine-fonds { display: block; }
.cine-fonds-bande {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px;
  scrollbar-width: thin;
}
.cine-fond {
  flex: 0 0 auto; width: 128px; height: 72px; object-fit: cover;
  border-radius: 8px; cursor: pointer;

  border: 2px solid transparent; opacity: .55; transition: opacity .12s;
}
.cine-fond:hover { opacity: .85; }
.cine-fond.choisi { opacity: 1; border-color: var(--accent, #5865f2); }

.cine-gestes .bouton.danger { color: var(--rouge); }

.cine-saisons { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 24px 0; }
.cine-puce {
  min-height: var(--geste-t);
  padding: 0 12px;
  font: inherit; font-size: 13px; font-weight: 500;
  color: var(--doux); background: var(--carte);
  border: 1px solid transparent; border-radius: 999px;
  cursor: pointer; white-space: nowrap;
}
@media (hover: hover) {
.cine-puce:hover { background: var(--carte-survol); color: var(--texte); } }
.cine-puce.actif { background: var(--bleu); border-color: var(--bleu); color: #fff; }

.cine-lignes { padding: 12px 24px 24px; display: flex; flex-direction: column; gap: 8px; }
.cine-ligne {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--carte); border: 1px solid var(--ligne); border-radius: 12px;
}
@media (hover: hover) {
.cine-ligne:hover { border-color: var(--faible); } }
.cine-ligne-mots { flex: 1; min-width: 0; }
.cine-ligne .bouton { flex: none; }

.cine-ligne .bouton.fantome { background: var(--fond); }
@media (hover: hover) {
.cine-ligne .bouton.fantome:hover { background: var(--carte-survol); } }

.cine-marques { display: flex; flex-wrap: wrap; gap: 6px; }
.cine-marque {
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; color: var(--doux);
  background: var(--lueur-1); box-shadow: inset 0 0 0 1px var(--lueur-1);
}
.cine-marque.forte { color: var(--texte); background: var(--lueur-3); }

.cine-fichier {
  margin-top: 6px; font-size: 11px; color: var(--faible);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cine-episode { font-size: 14px; font-weight: 600; color: var(--texte); line-height: 1.4; }

@media (max-width: 720px) {
  .cine-ecran-dedans { padding: 20px; }
  .cine-ecran-titre { font-size: 20px; }
  .cine-grille { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
  .cine-tete { padding: 20px; }
  .cine-lignes { padding: 12px 20px 20px; }
  .cine-sous-titre { padding: 20px 20px 0; }
  .cine-synopsis { padding: 16px 20px 0; }
}

/* ── LE SELECTEUR D'OEUVRE : DES AFFICHES, PLUS DES PASTILLES ─────────────

   C'etait une rangee de pastilles grises, seize noms de la meme taille dans la
   meme couleur. On les lisait un par un jusqu'a tomber sur le bon, a chaque
   visite, parce que rien ne distinguait une pastille d'une autre.

   Une tuile avec la tete d'affiche en fond se reconnait avant d'etre lue. Le
   nom reste, mais il ne sert plus qu'a confirmer ce que l'image a deja dit. */
.dc-oeuvres {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 10px; margin-bottom: 20px;
}

.dc-oeuvre {
  position: relative; isolation: isolate; overflow: hidden;
  aspect-ratio: 4 / 5;
  display: flex; align-items: center; justify-content: center;
  padding: 10px 12px; text-align: center; text-decoration: none;
  border: 1px solid var(--ligne); border-radius: var(--rond-large);
  background: var(--flanc); color: #fff;
}

/* CADREE HAUT, comme les vignettes de la grille : les fiches sont des portraits
   en pied, et un cadrage centre donne un torse sans visage. */
.dc-oeuvre-fond {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 12%;
  transition: transform .35s ease;
}

/* Le voile, et il n'est pas decoratif : un nom blanc pose sur un portrait clair
   ne se lit pas du tout. Il fonce le bas, la ou le nom tombe, et laisse le haut
   de l'image visible. Les z-index sont explicites parce que l'ordre de peinture
   par defaut mettrait l'image au-dessus de ce voile. */
.dc-oeuvre::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(8, 9, 12, .10) 0%, rgba(8, 9, 12, .40) 48%, rgba(8, 9, 12, .78) 100%);
}

.dc-oeuvre-nom {
  position: relative; z-index: 2;
  font-size: 15px; font-weight: 700; line-height: 1.2;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .9);
}

/* Le compte de cartes passe en pastille dans le coin : c'est l'information
   qu'on vient chercher ici, et elle se lit mieux posee sur l'image que collee
   au nom entre parentheses. */
.dc-oeuvre-compte {
  position: absolute; z-index: 2; top: 7px; right: 8px;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(8, 9, 12, .62);
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
}

/* Celle qu'on regarde : un cerclage franc plutot qu'un aplat bleu, sinon
   l'affiche disparait sous la couleur au moment ou elle sert le plus. */
.dc-oeuvre.actif { border-color: var(--bleu); box-shadow: 0 0 0 2px var(--bleu); }
.dc-oeuvre.actif .dc-oeuvre-fond { object-position: center 11%; }

@media (hover: hover) {
.dc-oeuvre:hover .dc-oeuvre-fond { transform: scale(1.07); }
.dc-oeuvre:hover::after { background: linear-gradient(180deg, rgba(8, 9, 12, 0) 0%, rgba(8, 9, 12, .28) 48%, rgba(8, 9, 12, .70) 100%); } }

/* ── LE SAUT D'UNE OEUVRE A L'AUTRE ───────────────────────────────────────

   Un <details> deguise en bouton. Le marqueur natif saute : il est remplace
   par un chevron qui tourne, ce qui dit la meme chose sans dependre du rendu
   de la puce d'un navigateur a l'autre. */
.dc-saut { position: relative; }
.dc-saut > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.dc-saut > summary::-webkit-details-marker { display: none; }
.dc-saut-chevron { width: 16px; height: 16px; transition: transform .18s ease; }
.dc-saut[open] > summary .dc-saut-chevron { transform: rotate(180deg); }

/* La liste flotte au-dessus de la grille des cartes, sinon elle la pousserait
   vers le bas a chaque ouverture et toute la page sauterait. */
.dc-saut-liste {
  position: absolute; z-index: 40; top: calc(100% + 6px); right: 0;
  min-width: 232px; max-height: 60vh; overflow-y: auto;
  padding: 6px; border: 1px solid var(--ligne); border-radius: var(--rond-large);
  background: var(--aire); box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
}
.dc-saut-ligne {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 10px; border-radius: 8px;
  color: var(--texte); text-decoration: none; font-size: 14px; font-weight: 500;
}
.dc-saut-ligne.actif { background: var(--bleu); color: #fff; }
.dc-saut-ligne.actif .compte { color: #fff; opacity: .75; }
@media (hover: hover) {
.dc-saut-ligne:not(.actif):hover { background: var(--carte-survol); } }

/* Sur sa propre page, la grille n'a plus a se faire petite : elle EST la page.
   Des tuiles plus grandes, un peu plus larges que hautes, et le nom qui va
   avec -- c'est un catalogue qu'on parcourt du regard, pas une barre d'onglets
   qu'on subit en haut d'autre chose. */
.dc-oeuvres-catalogue { grid-template-columns: repeat(auto-fill, minmax(186px, 1fr)); gap: 14px; }
.dc-oeuvres-catalogue .dc-oeuvre { aspect-ratio: 6 / 7; }
.dc-oeuvres-catalogue .dc-oeuvre-nom { font-size: 18px; }
.dc-oeuvres-catalogue .dc-oeuvre-compte { font-size: 13px; top: 9px; right: 10px; }

/* Sur telephone, deux tuiles par ligne plutot qu'une enorme : on vient choisir
   dans une liste de seize, pas admirer une affiche. */
@media (max-width: 640px) {
  .dc-oeuvres { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
  .dc-oeuvre-nom { font-size: 13px; }
  .dc-oeuvres-catalogue { grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 10px; }
  .dc-oeuvres-catalogue .dc-oeuvre-nom { font-size: 15px; }
}

.dc-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.dc-carte {
  position: relative; display: flex; flex-direction: column; gap: 0;
  padding: 0; overflow: hidden; text-align: left; cursor: pointer;
  background: var(--aire); border: 1px solid var(--ligne);
  border-radius: var(--rond-large); color: var(--texte); font: inherit;
}
@media (hover: hover) {
.dc-carte:hover { background: var(--carte); border-color: var(--bleu); } }

.dc-vignette { display: block; flex: none; aspect-ratio: 225 / 350; overflow: hidden; background: var(--flanc); }

.dc-vignette img {
  width: calc(100% + 6px); height: calc(100% + 6px); margin: -3px;
  object-fit: cover; object-position: top center; display: block;
}

.dc-nom {
  padding: 9px 11px 2px; font-size: 14px; font-weight: 600; line-height: 1.25;
  min-height: calc(2 * 1.25em + 11px);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.dc-bas { padding: 0 11px 10px; display: flex; align-items: baseline; gap: 8px; }
.dc-puissance { font-size: 17px; font-weight: 800; color: var(--jaune); }
.dc-carte .etiquette { position: absolute; top: 7px; left: 7px; }
.dc-cree { background: var(--fond-vert); color: var(--vif-vert); }
/* Retiree du jeu : la carte reste dans la grille mais ne tombe plus en partie.
   On la pose en gris et on l attenue -- elle doit se voir comme une absence,
   pas comme une erreur. */
.dc-masque { background: var(--fond-gris, #33363d); color: #b9bec9; }

/* ── LA CROIX DU SURVOL ────────────────────────────────────────────────
   Retirer une carte doit se faire depuis la grille : ouvrir un tiroir pour
   trouver un bouton en bas, c'est quatre gestes pour elaguer un casting de
   quatre-vingt-treize. Elle ne se montre qu'au survol pour ne pas couvrir
   la vignette, et reste atteignable au clavier par la carte elle-meme. */
.dc-croix {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1; font-weight: 700;
  background: rgba(20, 21, 25, .82); color: #cfd4de;
  opacity: 0; transition: opacity .12s, background .12s, color .12s;
  cursor: pointer;
}
.dc-carte:hover .dc-croix, .dc-carte:focus-within .dc-croix { opacity: 1; }
.dc-croix:hover { background: var(--fond-rouge, #4a2326); color: #f5a3a6; }
/* Armee : un second clic confirme. Le premier ne fait que prevenir. */
.dc-croix.arme { opacity: 1; background: #b0343a; color: #fff; }

/* Une carte retiree sort de la grille. Le bouton du haut la rappelle, et
   elle revient alors grisee, avec une fleche au lieu d'une croix. */
.dc-grille:not(.dc-voir-retirees) .dc-carte.dc-est-masquee { display: none; }
.dc-carte.dc-est-masquee { opacity: .45; }
.dc-carte.dc-est-masquee:hover, .dc-carte.dc-est-masquee:focus-visible { opacity: .85; }
.dc-retirees { margin: 0 0 12px; }
.dc-retouche { background: var(--fond-ambre); color: var(--vif-ambre); }

.dc-fiche-tete { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }
.dc-champ-nom { font-size: 19px; font-weight: 700; flex: 1; }

.dc-champ-nom[readonly] { background: var(--flanc); color: var(--doux); }

.dc-rang { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.dc-etiquette { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--doux); }
.dc-etiquette .champ { width: 92px; }
.dc-rang .compte { flex: 1; min-width: 200px; }

.dc-parcours {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.dc-parcours .bouton {
  padding: 2px 12px; font-size: 20px; line-height: 1.2; font-weight: 700;
  min-width: 40px;
}
.dc-parcours .bouton:disabled { opacity: .35; cursor: default; }
.dc-parcours .compte { margin-left: auto; }

.dc-phrases { margin-top: 16px; border-top: 1px solid var(--ligne); padding-top: 12px; }

.dc-phrases summary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px; border-radius: var(--rond);
  border: 1px solid var(--ligne); background: var(--flanc);
  cursor: pointer; font-weight: 600; font-size: 14px;
  user-select: none; list-style: none;
  transition: background .16s, border-color .16s;
}
.dc-phrases summary::-webkit-details-marker { display: none; }
.dc-phrases summary::before {
  content: ''; width: 7px; height: 7px; flex: none;
  border-right: 2px solid var(--faible); border-bottom: 2px solid var(--faible);
  transform: rotate(-45deg) translate(-1px, -1px);
  transition: transform .16s;
}
.dc-phrases[open] summary::before { transform: rotate(45deg) translate(-2px, -2px); }
@media (hover: hover) {
  .dc-phrases summary:hover { background: var(--carte); border-color: var(--bleu); }
}
.dc-phrases summary:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }

.dc-phrases summary.arme { border-color: var(--bleu); background: var(--carte); }
.dc-phrases summary.arme::after {
  content: 'cliquer encore pour ouvrir';
  font-weight: 500; font-size: 12px; color: var(--faible);
}
.dc-phrases summary .compte { margin-left: 0; }
.dc-phrases textarea { margin-top: 10px; width: 100%; resize: vertical; line-height: 1.5; }

.dc-variantes {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  align-content: start;
  gap: 9px; max-height: 340px; overflow-y: auto; padding: 2px;
}

.dc-variante {
  margin: 0; position: relative; overflow: hidden;
  aspect-ratio: 225 / 350;
  border-radius: var(--rond); background: var(--flanc);
  border: 1px solid var(--ligne);
}
.dc-variante .dc-choisir { height: 100%; }
.dc-variante img {
  width: calc(100% + 6px); height: calc(100% + 6px); margin: -3px;
  object-fit: cover; object-position: top center; display: block;
}

.dc-variante.morte { opacity: .45; }
.dc-variante.morte::after {
  content: 'image introuvable'; position: absolute; inset: 0;
  display: grid; place-items: center; text-align: center;
  font-size: 11px; color: var(--faible); padding: 8px;
}
.dc-variante figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 3px 6px; font-size: 10px; font-weight: 600;
  background: var(--voile-3); color: #fff;
}
.dc-variante .oter-carte { position: absolute; top: 4px; right: 4px; }

.dc-ajout { display: flex; gap: 8px; margin: 12px 0 6px; }
.dc-ajout .champ { flex: 1; }

.dc-oter { margin-right: auto; background: var(--fond-rouge, #4a2326); color: #f5a3a6; }
.dc-oter.arme { background: var(--rouge); color: #fff; animation: bat 1.1s infinite; }

.dc-variante .dc-arene { color: #7ee2a8; }
.dc-variante .dc-adjuge { color: var(--faible); }

.dc-muet { background: var(--fond-rouge, #4a2326); color: #f5a3a6; }

.dc-choisir {
  display: block; width: 100%; padding: 0; border: 0;
  background: none; cursor: pointer; font: inherit; color: inherit;
  position: relative;
}

.dc-variante.choisi { border-color: var(--vert); box-shadow: 0 0 0 2px var(--vert); }
.dc-variante.choisi::before {
  content: '✓'; position: absolute; z-index: 1; top: 4px; left: 4px;
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--vert); color: #fff; font-size: 12px; font-weight: 800;
}
@media (hover: hover) {
.dc-variante:not(.choisi) .dc-choisir:hover img { opacity: .72; } }
.dc-choisir:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }

.dc-tiroir {
  position: fixed; top: var(--haut-haut); right: 0; bottom: 0;
  width: min(500px, 100vw);
  z-index: var(--plan-modale);
  transform: translateX(100%);
  transition: transform .22s ease;
  pointer-events: none;
}
.dc-tiroir.ouvert { transform: none; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .dc-tiroir { transition: none; } }

.dc-tiroir-corps {
  height: 100%; overflow-y: auto; padding: 16px 18px 24px;
  background: var(--flanc);

  border-left: 1px solid var(--ligne);
}

@media (min-width: 1100px) {
  body.dc-tiroir-ouvert .aire { padding-right: calc(min(500px, 100vw) + 24px); }
}
@media (max-width: 820px) {
  .dc-tiroir { top: var(--haut-haut); }
}

.haut-actions .gestes.dc-gestes { margin-left: 0; }

.dc-tiroir-corps { display: flex; flex-direction: column; gap: 0; }
.dc-champ-puissance { width: 84px; flex: none; text-align: center; }
.dc-fiche-tete .compte { flex: none; }
.dc-tiroir-corps .dc-variantes { flex: 1 1 auto; max-height: none; min-height: 120px; }
.dc-pied {
  position: sticky; bottom: 0; z-index: 1;
  display: flex; align-items: center; gap: 12px;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--ligne);
  background: var(--flanc);
}

.replier {
  display: grid; place-items: center;
  width: 34px; height: 34px; flex: none;
  padding: 0; border: 0; border-radius: var(--rond);
  background: none; color: var(--faible); cursor: pointer;
}
.replier svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
@media (hover: hover) {
.replier:hover { background: var(--carte); color: var(--texte); } }
.replier:focus-visible { box-shadow: 0 0 0 2px var(--fond), 0 0 0 4px var(--bleu); }

body.app.flanc-replie { grid-template-columns: 0 1fr; }
body.app.flanc-replie .flanc {

  width: 0; min-width: 0;
  overflow: hidden;
  padding-left: 0; padding-right: 0;
  border-right: 0;
}

@media (max-width: 820px) {
  .replier { display: none; }
  body.app.flanc-replie { grid-template-columns: 1fr; }
  body.app.flanc-replie .flanc { width: auto; min-width: 0; overflow-y: auto; padding: 16px 12px; }
}

/* ── LE MODE NU : LA PAGE SANS SA COQUE ──────────────────────────────────
 *
 * Une page ouverte DANS un tiroir de la page d'à côté ne rejoue pas le menu, la
 * barre du haut et le compte : ils sont déjà à l'écran, quinze centimètres à
 * gauche. Elle n'a que son contenu à montrer.
 *
 * En CSS et non dans le gabarit : la coque est un seul fichier de trois cent
 * soixante lignes que six écrans incluent, et y poser des conditions autour de
 * l'aside et de l'en-tête ferait porter à tous le poids d'un cas qui n'en
 * concerne qu'un. */
body.nu { grid-template-areas: "aire"; grid-template-columns: 1fr; grid-template-rows: 1fr; }
body.nu .flanc,
body.nu .haut,
body.nu .voile-tiroir { display: none; }
body.nu .aire { padding: 20px 22px 32px; }

/* ── LE TIROIR DE LA SOIRÉE ──────────────────────────────────────────────
 *
 * Composer une soirée demandait de quitter Cinéma pour Séances, d'y créer un
 * brouillon, puis d'ouvrir sa fiche : trois écrans pour un geste, et on
 * revenait par le bouton retour du navigateur.
 *
 * Le geste vit maintenant sur la page, et la fiche s'ouvre à droite — même
 * bord, même largeur et même glissement que le tiroir de la projection et que
 * celui du casting.
 *
 * ── C'EST LA VRAIE PAGE, DANS UN CADRE ───────────────────────────────────
 *
 * L'écran d'édition d'une soirée porte la recherche d'œuvre, les menus de
 * salon, les sélecteurs de date, le découpage en épisodes et le choix du décor.
 * Le refaire ici en aurait fait une seconde version à tenir à jour, et les deux
 * auraient divergé au premier réglage ajouté d'un seul côté.
 *
 * On affiche donc la page elle-même, sans sa coque (voir `body.nu`). */
.cine-tiroir {
  position: fixed; top: var(--haut-haut); right: 0; bottom: 0;
  width: min(500px, 100vw);
  z-index: var(--plan-modale);
  display: flex; flex-direction: column;
  background: var(--flanc);
  border-left: 1px solid var(--ligne);
}
.cine-tiroir[hidden] { display: none; }

.cine-tiroir-tete {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--ligne);
  font-size: 14px; font-weight: 700; color: var(--texte);
}
.cine-tiroir-tete > span:first-child {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cine-tiroir-tete .bouton { padding: 4px 10px; font-size: 12px; min-height: 0; }

.cine-tiroir-fermer {
  flex: none;
  width: 30px; height: 30px; border: 0; border-radius: 8px;
  background: none; color: var(--faible);
  font: inherit; font-size: 20px; line-height: 1;
  cursor: pointer;
}
@media (hover: hover) {
  .cine-tiroir-fermer:hover { background: var(--lueur-2); color: var(--texte); }
}

.cine-tiroir-cadre { flex: 1; width: 100%; border: 0; }

/* La page se retracte comme elle le fait pour la projection. Sous 1100 px le
 * tiroir prend toute la largeur : il se referme d'un bouton, contrairement à
 * celui de la projection qui suit l'état de la régie. */
@media (min-width: 1100px) {
  body.cine-soiree-ouverte .aire { padding-right: calc(min(500px, 100vw) + 24px); }
}

/* Le bouton qui redéplie les fonds : un rectangle gris au même gabarit que les
 * vignettes, pour que la rangée garde sa hauteur quand elle est repliée. */
.vignette-fond.changer {
  display: grid; place-items: center;
  background: var(--lueur-1); color: var(--doux);
  font: inherit; font-size: 13px; font-weight: 600;
  border: 1px dashed var(--ligne);
}
@media (hover: hover) {
  .vignette-fond.changer:hover { background: var(--lueur-2); color: var(--texte); }
}

/* La bande du projecteur partage : un seul appareil, plusieurs salles. Elle ne
   parait que quand elle a quelque chose a dire, donc elle a le droit de se
   voir. */
.projo {
  border-radius: 12px; padding: 12px 16px; margin-bottom: 14px;
  font-size: 14px; line-height: 1.55; color: var(--texte);
  background: var(--carte); border-left: 3px solid var(--doux);
}
.projo b { font-weight: 600; }
.projo i { font-style: normal; color: var(--doux); }
.projo.pris   { border-left-color: #d98b3a; }
.projo.choc   { border-left-color: #d9534f; }
.choc-ligne { display: block; color: var(--doux); margin-top: 3px; }

/* ── Les clans ─────────────────────────────────────────────────────────────
   Deux colonnes tant que l'écran les porte : les styles à gauche, l'aperçu à
   droite. On choisit un style EN REGARDANT la carte — les mettre l'un sous
   l'autre obligerait à faire défiler entre la case et son effet, c'est-à-dire
   à choisir de mémoire. */
.clan-reglage {
  display: grid; gap: 24px; align-items: start;
  grid-template-columns: minmax(0, 1fr) 300px;
  margin-bottom: 32px;
}
@media (max-width: 900px) { .clan-reglage { grid-template-columns: 1fr; } }

.clan-reglage h2 { font-size: 18px; font-weight: 600; margin: 0 0 6px; }
.clan-reglage .sous { color: var(--doux); line-height: 1.6; max-width: 62ch; margin: 0 0 14px; }

.styles { display: grid; gap: 8px; }
/* L'option retenue se voit : sans marque, six cadres identiques ne disent pas
   lequel est actif, et la pastille radio seule est trop petite pour ça. */
.styles .domaine.pris { border-color: var(--bleu); background: var(--carte-survol); }

.clan-apercu { margin: 0; position: sticky; top: 16px; }
.clan-apercu img {
  display: block; width: 100%; border-radius: var(--rond-large);
  background: var(--carte);
  /* Une carte pas encore rendue ne doit pas faire sauter la page : la
     proportion est celle du gabarit (700 × 916). */
  aspect-ratio: 700 / 916; object-fit: cover;
}
.clan-apercu figcaption {
  margin-top: 10px; font-size: 12px; color: var(--doux); line-height: 1.5;
}
.apercu-rang { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.apercu-rang input[type="range"] { flex: 1; height: auto; padding: 0; }

.clan-titre { font-size: 18px; font-weight: 600; margin: 28px 0 12px; }

.clan {
  border: 1px solid var(--ligne); border-radius: var(--rond-large);
  background: var(--flanc); padding: 14px 16px; margin-bottom: 12px;
}
/* Celui que l'aperçu montre. Sans cette marque, on règle une couleur en
   regardant la carte d'un autre clan et rien ne le dit. */
.clan.vise { border-color: var(--bleu); }

.clan-tete { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.clan-tete .retirer { margin-left: auto; }
.clan-nom { font-weight: 600; }

.clan-puce {
  width: 14px; height: 14px; border-radius: 50%; flex: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35);
}

.etiquette.alerte-role { background: var(--fond-ambre); color: var(--vif-ambre); }

.clan-corps {
  display: grid; gap: 14px; margin-top: 14px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.clan-champ { display: flex; flex-direction: column; gap: 6px; }
.clan-champ > span:first-child { font-size: 12px; font-weight: 600; color: var(--doux); }
.clan-champ small { font-size: 11px; color: var(--faible); line-height: 1.45; }

.clan-couleur { display: flex; gap: 8px; align-items: center; }
.clan-couleur input[type="color"] {
  width: 44px; height: var(--controle-h); padding: 2px; flex: none;
  background: var(--carte); border: 1px solid var(--ligne);
  border-radius: var(--rond); cursor: pointer;
}
.clan-couleur .bouton { font-size: 12px; padding: 6px 10px; height: auto; }

/* L'image du clan : la vignette montre exactement ce que la case montrera —
   carrée, coins arrondis, et vide quand l'adresse ne charge pas. */
.clan-image { display: flex; gap: 8px; align-items: center; }
.clan-image .champ { flex: 1; min-width: 0; }
.apercu-image {
  width: 48px; height: 48px; flex: none;
  border-radius: 10px; object-fit: cover;
  background: var(--fond-gris);
  border: 1px solid var(--bord);
}
.apercu-image.vide { opacity: .35; }

.roles-libres { display: flex; flex-wrap: wrap; gap: 8px; }
.role-libre {
  display: flex; gap: 8px; align-items: center;
  padding: 8px 12px; border-radius: 999px; cursor: pointer;
  background: var(--carte); border: 1px solid var(--ligne);
  color: var(--texte); font: inherit; font-size: 13px;
}
.role-libre:hover { background: var(--carte-survol); }
/* Un rôle qui porte des permissions n'est pas interdit — il est signalé. La
   décision reste à qui règle le serveur, mais elle est prise en connaissance. */
.role-libre.arme { border-color: var(--fond-ambre); }
.role-libre.arme::after { content: '⚠'; color: var(--vif-ambre); }

/* ── La première page d'un invité ──────────────────────────────────────────
   Ce qui est ouvert sur ce serveur, une rangée par domaine. Une LISTE et non
   des cartes : la page porte déjà un calendrier, et trois pavés au-dessus
   faisaient deux dessins sur le même écran. Un filet entre les rangées suffit
   à les séparer, et la liste tient aussi bien à dix domaines qu’à trois. */
.ouverts { margin: 0 0 32px; border-top: 1px solid var(--ligne); }
.ouverts-rien { margin: 0 0 32px; }

.ouvert {
  display: flex; align-items: center; gap: 20px;
  padding: 14px 12px; margin: 0 -12px;
  border-bottom: 1px solid var(--ligne);
  color: inherit; text-decoration: none;
}
@media (hover: hover) {
  a.ouvert:hover { background: var(--carte); }
  a.ouvert:hover .ouvert-geste { color: var(--texte); }
}
a.ouvert:focus-visible { outline: 2px solid var(--bleu); outline-offset: -2px; }

.ouvert-mots { display: grid; gap: 2px; min-width: 0; flex: 1; }
.ouvert-mots b { font-size: 15px; font-weight: 600; }
.ouvert-mots .sous { font-size: 13px; line-height: 1.4; }

/* Le geste est gris, pas bleu : il dit où mène la rangée, il ne réclame pas
   le clic à la place du nom. Le chevron ne vient que si ça mène quelque part. */
.ouvert-geste {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  font-size: 12px; color: var(--faible);
}
.ouvert-geste svg {
  width: 14px; height: 14px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Le compte d'un serveur invité dit aussi les refus : c'est la ligne qu'on
   regarde en cochant, donc c'est là que la mauvaise nouvelle doit tomber. */
.invite-compte.refuse-mot { color: var(--rouge); }

/* ── LE CLUB D'ÉCRITURE, CÔTÉ RÉGIE ───────────────────────────────────────
   Le club lui-même a sa propre feuille (ecriture.css) : elle habille une page
   de livre pour des membres. Ces quelques règles-ci sont l'autre moitié — la
   page du tableau de bord d'où le staff pose le thème et règle la porte. */

.ecr-section {
  background: var(--flanc);
  border: 1px solid var(--ligne);
  border-radius: var(--rond-large);
  padding: 18px 20px;
  margin-bottom: 18px;
}
.ecr-section > h2 { font-size: 16px; font-weight: 600; margin: 0 0 4px; }
.ecr-section > .legende { margin: 0 0 14px; }
.ecr-section .champ { width: 100%; }
.ecr-section textarea.champ { margin-bottom: 12px; resize: vertical; }

/* La ligne d'un thème ou d'un texte : ce qu'on lit à gauche, ce qu'on peut
   faire à droite, et un trait qui sépare sans encadrer. */
.ecr-ligne {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--ligne);
}
.ecr-ligne .legende { margin: 3px 0 0; }
.ecr-gestes { margin-left: auto; display: flex; gap: 8px; flex-shrink: 0; }

.ecr-pied {
  display: flex; align-items: center; gap: 12px;
  margin-top: 14px;
}
.ecr-pied .bouton { margin-left: auto; }

.ecr-puce {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--fond-gris);
  color: var(--doux);
  font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  vertical-align: middle;
}
.ecr-puce.vive { background: var(--fond-ambre); color: var(--vif-ambre); }

@media (max-width: 620px) {
  .ecr-ligne { flex-wrap: wrap; }
  .ecr-gestes { margin-left: 0; }
}