/*
 * Site d'assistance OTL | WL™ — Las Venturas.
 *
 * Palette nuit : bleu profond légèrement violacé, accent VIOLET électrique,
 * menthe pour ce qui va bien, corail pour ce qui ne va pas. Le logo apporte
 * sa propre chaleur — le site lui sert d'écrin, il ne le copie pas.
 */

:root {
  /* fonds — bleu nuit profond, légèrement violacé */
  --nuit: #0c1020;
  --bois: #141a2e;
  --bois-clair: #1a2138;
  --bois-releve: #232c47;
  --bordure: #2a3450;
  --bordure-vive: #3d4a70;

  /* encres */
  --parchemin: #eef2ff;
  --parchemin-doux: #96a1c4;

  /* accents — violet électrique, menthe, corail */
  --laiton: #7c6cff;
  --laiton-vif: #9b8cff;
  --laiton-sombre: #5b48e8;
  --braise: #ff5d73;
  --sauge: #2fd6a8;

  --rayon: 16px;
  --rayon-doux: 11px;
  --ombre: 0 4px 24px rgba(0, 0, 0, 0.4);
  --halo: 0 0 0 3px rgba(124, 108, 255, 0.22);

  --serif: Onest, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sans: Onest, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/*
 * Onest — police libre (SIL OFL), hébergée avec le site plutôt que tirée d'un
 * CDN : une dépendance de moins, rien à demander à un tiers à chaque visite, et
 * la page garde la même allure si Google est injoignable.
 *
 * Un seul fichier par sous-ensemble : c'est une police variable, les graisses
 * 100 à 900 sortent du même fichier. Le cyrillique est écarté — 16 Ko que
 * personne ici n'affichera. `swap` laisse le texte lisible pendant le
 * chargement plutôt que de le retenir.
 */
@font-face {
  font-family: Onest;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/polices/onest-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: Onest;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/polices/onest-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}


* { box-sizing: border-box; }

/**
 * `hidden` cache VRAIMENT.
 *
 * L'attribut ne vaut qu'un `display: none` de la feuille du navigateur : la
 * moindre règle d'auteur posant un `display` le bat. Un bloc `.duo { display:
 * flex }` marqué `hidden` restait donc affiché — et la fenêtre de création de
 * question montrait « Sélections min/max » et « Caractères min/max » sur des
 * types qui n'en ont pas l'usage, sans que rien ne l'explique.
 *
 * Corrigé deux fois au cas par cas (`.voile`, `.choix-riche`) avant d'être
 * corrigé ici, une bonne fois : `!important` est justement fait pour ça.
 */
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--nuit);
  color: var(--parchemin);
  font: 16px/1.65 var(--sans);

  /* Deux halos colorés très diffus : la page respire sans image à télécharger. */
  background-image:
    radial-gradient(90% 60% at 15% -5%, rgba(124, 108, 255, 0.20), transparent 62%),
    radial-gradient(70% 50% at 95% 8%, rgba(47, 214, 168, 0.11), transparent 60%);
  background-attachment: fixed;
}

a { color: var(--laiton); text-decoration: none; }
a:hover { color: var(--laiton-vif); text-decoration: underline; }

h1, h2, h3 { font-family: var(--serif); letter-spacing: 0.01em; }

/* ---------------------------------------------------------------- en-tête */

.entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 14px 24px;
  background: linear-gradient(180deg, var(--bois-clair), var(--bois));
  border-bottom: 1px solid var(--bordure);
  box-shadow: var(--ombre);
  position: sticky;
  top: 0;
  z-index: 10;
}

.marque { display: flex; align-items: center; gap: 12px; }
.marque:hover { text-decoration: none; }
.marque img { height: 46px; width: auto; display: block; }

.nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.nav a {
  padding: 7px 13px;
  border-radius: 999px;
  color: var(--parchemin-doux);
  font-size: 15px;
}
.nav a:hover { color: var(--parchemin); background: rgba(255, 255, 255, 0.05); text-decoration: none; }
.nav a.actif { color: var(--nuit); background: var(--laiton); font-weight: 600; }

/* `.nav a` est plus spécifique que `.bouton` : sans ces deux règles, les
   boutons de l'en-tête héritent de la couleur de lien et deviennent illisibles. */
.nav a.bouton { color: #ffffff; background: linear-gradient(180deg, var(--laiton-vif), var(--laiton-sombre)); }
.nav a.bouton.discret { color: var(--parchemin-doux); background: transparent; }
.nav a.bouton.discret:hover { color: var(--parchemin); background: var(--bois-clair); }

.visiteur {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 13px 5px 5px;
  border: 1px solid var(--bordure);
  border-radius: 999px;
  font-size: 15px;
}
.visiteur img { border-radius: 50%; border: 1px solid var(--bordure-vive); }

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

.bouton {
  display: inline-block;
  padding: 11px 20px;
  border: none;
  border-radius: var(--rayon-doux);
  background: linear-gradient(180deg, var(--laiton-vif), var(--laiton-sombre));
  color: #ffffff;
  font: 600 15px/1.2 var(--sans);
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: transform 0.08s ease, filter 0.15s ease;
}
.bouton:hover { filter: brightness(1.08); text-decoration: none; color: #ffffff; }
.bouton:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); }
.bouton.grand { padding: 14px 26px; font-size: 16px; }

.bouton.discret {
  background: transparent;
  color: var(--parchemin-doux);
  border: 1px solid var(--bordure);
  box-shadow: none;
}
.bouton.discret:hover { background: var(--bois-clair); color: var(--parchemin); }

.bouton.danger {
  background: linear-gradient(180deg, #ff7386, #d93a52);
  color: #fff;
}

/* ---------------------------------------------------------------- contenu */

.contenu {
  flex: 1;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: 32px 20px 60px;
}

.page-titre { margin: 0 0 6px; font-size: 30px; }
.sous-titre { margin: 0 0 24px; color: var(--parchemin-doux); }

.section-titre {
  margin: 36px 0 14px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--laiton);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-titre::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--bordure), transparent);
}

.bloc-titre { margin: 0 0 18px; font-size: 20px; color: var(--laiton-vif); }

.carte {
  background: linear-gradient(180deg, var(--bois-clair), var(--bois));
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 22px 24px;
  margin-bottom: 16px;
  box-shadow: var(--ombre);
}

/* --------------------------------------------------------------- bannière */

.banniere {
  text-align: center;
  padding: 40px 24px 34px;
  margin-bottom: 20px;
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(124, 108, 255, 0.20), transparent 70%),
    linear-gradient(180deg, var(--bois-clair), var(--bois));
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
}
.banniere img {
  width: 100%;
  max-width: 460px;
  height: auto;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.6));
}
.banniere .accroche { margin: 18px 0 0; color: var(--parchemin-doux); font-size: 17px; }

.compteurs {
  margin: 16px 0 0;
  color: var(--parchemin-doux);
  font-size: 14px;
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.pastille { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--parchemin-doux); }
.pastille.en-ligne { background: var(--sauge); box-shadow: 0 0 8px var(--sauge); }

/* ------------------------------------------------------------ état, cartes */

.carte.etat { border-left: 4px solid var(--parchemin-doux); }
.carte.etat strong { display: block; font-size: 17px; }
.carte.etat p { margin: 8px 0 0; color: var(--parchemin-doux); font-size: 15px; }

.carte.etat.correct { border-left-color: var(--sauge); }
.carte.etat.correct strong { color: var(--sauge); }
.carte.etat.sanctionne { border-left-color: var(--braise); }
.carte.etat.sanctionne strong { color: var(--braise); }
.carte.etat.avertissement { border-left-color: var(--laiton); }
.carte.etat.avertissement strong { color: var(--laiton); }

.carte.appel { text-align: center; }
.carte.appel h2 { margin: 0 0 10px; font-size: 22px; }
.carte.appel p { margin: 0 0 18px; color: var(--parchemin-doux); }

.carte.recap { display: flex; gap: 34px; flex-wrap: wrap; }
.carte.recap div { display: flex; flex-direction: column; }
.carte.recap .nombre { font-family: var(--serif); font-size: 32px; font-weight: 700; color: var(--laiton-vif); line-height: 1.1; }
.carte.recap .libelle { color: var(--parchemin-doux); font-size: 13px; }

.carte.vide p { margin: 0 0 8px; }
.carte.vide p:last-child { margin-bottom: 0; }
.note { color: var(--parchemin-doux); font-size: 14px; }
.alerte { color: var(--laiton); }

.carte.demande { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.carte.demande p { margin: 5px 0 0; color: var(--parchemin-doux); font-size: 15px; }

.etiquette {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
  background: var(--bois-releve);
  border: 1px solid var(--bordure);
  color: var(--parchemin-doux);
}
.etiquette.attente { color: var(--laiton); border-color: var(--laiton-sombre); }
.etiquette.en-cours, .etiquette.acceptee { color: var(--sauge); border-color: #3f5f4c; }
.etiquette.refusee { color: var(--braise); border-color: #6b2f21; }
.etiquette.levee { color: var(--parchemin-doux); }

/* ------------------------------------------------- listes de liens (menus) */

.formulaires { list-style: none; margin: 0; padding: 0; }

.formulaire-lien a,
.formulaire-lien div {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  margin-bottom: 10px;
  background: linear-gradient(180deg, var(--bois-clair), var(--bois));
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  color: var(--parchemin);
  transition: border-color 0.15s ease, transform 0.08s ease;
}
.formulaire-lien a:hover {
  border-color: var(--laiton-sombre);
  text-decoration: none;
  transform: translateX(2px);
}
.formulaire-lien.verrouille div { opacity: 0.45; cursor: not-allowed; }

.formulaire-lien .icone { font-size: 24px; line-height: 1; }
.formulaire-lien .texte { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.formulaire-lien .texte strong { font-size: 16px; }
.formulaire-lien .texte small { color: var(--parchemin-doux); font-size: 13px; margin-top: 2px; }
.formulaire-lien .fleche { color: var(--laiton); font-size: 24px; }

.retour { display: inline-block; margin-bottom: 14px; color: var(--parchemin-doux); font-size: 14px; }

/* ------------------------------------------------------------ formulaires */

.formulaire .champ { margin-bottom: 24px; }
.formulaire label { display: block; font-weight: 600; margin-bottom: 5px; }
.formulaire .aide { margin: 0 0 10px; color: var(--parchemin-doux); font-size: 14px; }
.requis { color: var(--braise); }

.formulaire input[type="text"],
.formulaire input[type="url"],
.formulaire textarea,
.formulaire select,
.filtres input[type="text"],
.filtres select,
.ligne input[type="text"],
.action-levee textarea {
  width: 100%;
  padding: 11px 13px;
  background: var(--nuit);
  color: var(--parchemin);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-doux);
  font: inherit;
  transition: border-color 0.15s ease;
}
.formulaire textarea { resize: vertical; min-height: 100px; }
.formulaire input:focus, .formulaire textarea:focus, .formulaire select:focus,
.filtres input:focus, .filtres select:focus {
  outline: none;
  border-color: var(--laiton);
  box-shadow: var(--halo);
}

.champ.en-erreur input, .champ.en-erreur textarea { border-color: var(--braise); }
.message-erreur { margin: 7px 0 0; color: var(--braise); font-size: 14px; }

.options { display: flex; flex-direction: column; gap: 9px; }
/* `label.option` et non `.option` : `.formulaire label { display: block }` est
   plus spécifique qu'une classe seule et gagnait, si bien que la coche et son
   texte s'empilaient au lieu de se ranger côte à côte. */
label.option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 15px;
  background: var(--nuit);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-doux);
  font-weight: 400;
  cursor: pointer;
  margin: 0;
  transition: border-color 0.15s ease;
}
.option:hover { border-color: var(--bordure-vive); }
.option:has(input:checked) { border-color: var(--laiton); background: rgba(124, 108, 255, 0.10); }
.option input { margin-top: 4px; accent-color: var(--laiton); }
.option span { display: flex; flex-direction: column; }
.option em { color: var(--parchemin-doux); font-size: 14px; font-style: normal; }

/* ------------------------------------------- le questionnaire du joueur
 *
 * Réservé au formulaire que remplit le joueur — `.champ` et `.formulaire`
 * servent aussi au panel, qui garde son allure.
 *
 * Deux partis pris, contre la version précédente :
 *
 *  - chaque question est une CARTE. Empilées sans cadre, les questions et
 *    leurs aides se confondaient en un mur de texte où l'on ne savait plus
 *    quelle explication allait avec quelle réponse.
 *  - une option est une LIGNE, pas un pavé. Chaque « Oui / Non » occupait la
 *    largeur entière sur trois lignes de haut : deux réponses prenaient plus
 *    de place que la question. La coche revient à sa taille, le texte à côté.
 */

.questionnaire .champ {
  margin-bottom: 12px;
  padding: 17px 19px;
  background: var(--bois);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
}
.questionnaire .champ:last-of-type { margin-bottom: 18px; }
.questionnaire label { font-size: 15px; margin-bottom: 3px; }
.questionnaire .aide { margin: 0 0 12px; font-size: 13px; line-height: 1.5; }
.questionnaire .champ > .aide:last-child { margin-bottom: 0; }

/* La carte entière signale l'erreur : un liseré sur le seul champ se perdait
   au milieu de la page. */
.questionnaire .champ.en-erreur {
  border-color: var(--braise);
  background: color-mix(in srgb, var(--braise) 7%, var(--bois));
}

.questionnaire .options { gap: 1px; }
.questionnaire .option {
  align-items: flex-start;
  gap: 11px;
  padding: 6px 8px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  line-height: 1.45;
  transition: background 0.12s ease;
}
.questionnaire .option:hover { background: var(--bois-clair); }
.questionnaire .option:has(input:checked) { background: transparent; }

/* Coche et bouton radio redessinés : à taille native, ils juraient avec le
   reste et changeaient d'aspect d'un navigateur à l'autre. */
.questionnaire .option input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  display: grid;
  place-content: center;
  background: var(--nuit);
  border: 1.5px solid var(--bordure-vive);
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
/* Rond pour un choix unique, carré pour un choix multiple : la forme dit à
   elle seule si l'on peut cocher plusieurs réponses. */
.questionnaire .option input[type="radio"] { border-radius: 50%; }
.questionnaire .option input:hover { border-color: var(--laiton); }
.questionnaire .option input:checked { background: var(--laiton); border-color: var(--laiton); }
.questionnaire .option input:focus-visible { outline: 2px solid var(--laiton); outline-offset: 2px; }

.questionnaire .option input[type="checkbox"]:checked::after {
  content: '';
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
}
.questionnaire .option input[type="radio"]:checked::after {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
}

.questionnaire .option span { gap: 1px; }
.questionnaire .option em { font-size: 13px; }

/* Les blocs informatifs suivent le même gabarit que les questions : dégradé,
   ombre et rembourrage d'origine, ils flottaient au milieu d'une pile plate. */
.questionnaire .carte {
  margin-bottom: 12px;
  padding: 17px 19px;
  background: var(--bois);
  box-shadow: none;
}
.questionnaire .bouton.grand { margin-top: 4px; }

.cases { display: flex; flex-wrap: wrap; gap: 10px 20px; }
/* Qualifiées par l’élément pour battre « .formulaire label { display: block } » :
   une classe seule perd, et la case se retrouve empilée sous son texte. */
label.case { display: flex; align-items: center; gap: 9px; font-weight: 400; cursor: pointer; margin: 0; }
.case input { accent-color: var(--laiton); }

/* --------------------------------------------------------- choix de rôles */

.selecteur-roles {
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-doux);
  background: var(--nuit);
  overflow: hidden;
}

.selecteur-entete {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--bordure);
  background: var(--bois-clair);
}
.selecteur-entete .recherche-role {
  flex: 1;
  padding: 8px 11px;
  background: var(--nuit);
  color: var(--parchemin);
  border: 1px solid var(--bordure);
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
}
.selecteur-entete .recherche-role:focus { outline: none; border-color: var(--laiton); }
.compte-choisis { color: var(--parchemin-doux); font-size: 13px; white-space: nowrap; }

/* La hauteur fixe est le cœur du correctif : la page ne s'étire plus avec le
   nombre de rôles, on fait défiler la liste à la place. */
.liste-roles { max-height: 260px; overflow-y: auto; padding: 6px; }

label.ligne-role {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.ligne-role:hover { background: var(--bois-clair); }
.ligne-role:has(input:checked) { background: rgba(124, 108, 255, 0.14); }
.ligne-role .nom-role { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vide-roles { padding: 14px; margin: 0; }

.pastille-couleur {
  width: 14px;
  height: 34px;
  border-radius: 4px;
  background: var(--teinte, var(--laiton));
  flex-shrink: 0;
}

.apercu-bouton-ligne { display: flex; flex-direction: column; gap: 6px; }
.apercu-bouton {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 8px;
  background: var(--fond, #5865f2);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  width: fit-content;
}

.pastille-role {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--teinte, var(--parchemin-doux));
  flex-shrink: 0;
}

.ligne { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.ligne input[type="text"] { flex: 1; min-width: 200px; width: auto; }

.etat-wl { margin: 0 0 20px; }
.etat-wl strong.ouvert { color: var(--sauge); }
.etat-wl strong.ferme { color: var(--braise); }

.apercu-banniere {
  width: 100%;
  max-width: 420px;
  border-radius: var(--rayon-doux);
  border: 1px solid var(--bordure);
  display: block;
}

/* ---------------------------------------------------------------- dossiers */

.dossiers { list-style: none; margin: 0; padding: 0; }

.dossier, .dossier-panel {
  background: linear-gradient(180deg, var(--bois-clair), var(--bois));
  border: 1px solid var(--bordure);
  border-left: 4px solid var(--parchemin-doux);
  border-radius: var(--rayon);
  padding: 17px 21px;
  margin-bottom: 11px;
  box-shadow: var(--ombre);
}
.dossier.warn, .dossier.mute, .dossier-panel.warn, .dossier-panel.mute { border-left-color: var(--laiton); }
.dossier.kick, .dossier-panel.kick { border-left-color: #d97a35; }
.dossier.ban, .dossier-panel.ban { border-left-color: var(--braise); }
.dossier.levee, .dossier-panel.levee { opacity: 0.6; }

.dossier header, .dossier-panel header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.reference {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  color: var(--laiton);
  margin-right: 6px;
}
.dossier .type { font-weight: 700; }
.dossier .raison, .raison { margin: 9px 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.dossier footer { color: var(--parchemin-doux); font-size: 13px; display: flex; gap: 6px; flex-wrap: wrap; }
.cible { margin: 11px 0 4px; display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }

.action-levee { margin-top: 14px; }
.action-levee summary { cursor: pointer; color: var(--laiton); font-size: 14px; }
.action-levee .formulaire { margin-top: 14px; }
.action-levee textarea { margin-bottom: 12px; min-height: 80px; resize: vertical; }

.dossier-court { list-style: none; margin: 0; padding: 0; }
.dossier-court li { padding: 8px 0; border-bottom: 1px solid var(--bordure); }
.dossier-court li:last-child { border-bottom: none; }
.dossier-court li.levee { opacity: 0.55; }

/* --------------------------------------------------------------- demandes */

.demande-detail { border-left: 4px solid var(--parchemin-doux); }
.demande-detail.attente { border-left-color: var(--laiton); }
.demande-detail.acceptee, .demande-detail.en-cours { border-left-color: var(--sauge); }
.demande-detail.refusee { border-left-color: var(--braise); }

.demande-detail header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.decision {
  margin: 14px 0;
  padding: 14px 16px;
  background: var(--nuit);
  border-radius: var(--rayon-doux);
  border: 1px solid var(--bordure);
}
.decision p { margin: 7px 0 0; overflow-wrap: anywhere; }

.demande-detail details, .journal details { margin-top: 12px; }
.demande-detail summary { cursor: pointer; color: var(--parchemin-doux); font-size: 14px; }

.reponses { margin: 14px 0 0; }
.reponses dt { font-weight: 700; margin-top: 15px; color: var(--laiton-vif); }
.reponses dd { margin: 5px 0 0; color: var(--parchemin-doux); overflow-wrap: anywhere; white-space: pre-wrap; }

/* ------------------------------------------------------------------ panel */

.onglets {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 26px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--bordure);
}
.onglets a {
  padding: 9px 15px;
  color: var(--parchemin-doux);
  border-bottom: 2px solid transparent;
  font-size: 15px;
}
.onglets a:hover { color: var(--parchemin); text-decoration: none; }
.onglets a.actif { color: var(--laiton-vif); border-bottom-color: var(--laiton); font-weight: 600; }

.onglets.secondaires { border-bottom: none; margin-bottom: 16px; }
.onglets.secondaires a { font-size: 14px; padding: 7px 14px; border-radius: 999px; border-bottom: none; }
.onglets.secondaires a.actif { background: var(--bois-releve); color: var(--laiton-vif); }

/* onglets de l'éditeur de formulaire — des boutons, pas des liens */
.onglets-reglages { border-bottom: none; margin-bottom: 14px; gap: 6px; }
.onglets-reglages button {
  padding: 8px 18px;
  border: 1px solid var(--bordure);
  border-radius: 999px;
  background: var(--bois-clair);
  color: var(--parchemin-doux);
  font: 600 14px/1.2 var(--sans);
  cursor: pointer;
}
.onglets-reglages button:hover { color: var(--parchemin); border-color: var(--bordure-vive); }
.onglets-reglages button.actif {
  background: var(--laiton);
  border-color: var(--laiton);
  color: #ffffff;
}

.entete-formulaire { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.entete-formulaire .page-titre { margin-bottom: 0; }

.duo { display: flex; gap: 16px; flex-wrap: wrap; }
.duo .champ { flex: 1; min-width: 200px; }
.duo .champ.court { flex: 0 0 110px; min-width: 110px; }

.intro-formulaire { white-space: pre-wrap; color: var(--parchemin-doux); }

.filtres { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.filtres input[type="text"] { flex: 1; min-width: 190px; width: auto; }
.filtres select { width: auto; }

.mini {
  padding: 6px 12px;
  background: var(--nuit);
  color: var(--parchemin-doux);
  border: 1px solid var(--bordure);
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
}
.mini:hover:not(:disabled) { background: var(--bois-releve); color: var(--parchemin); text-decoration: none; }
.mini:disabled { opacity: 0.3; cursor: default; }
.mini.danger { color: var(--braise); border-color: #6b2f21; }

.questions { list-style: none; margin: 0; padding: 0; }
.question { margin-bottom: 11px; }
.entete-question { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.entete-question small { display: block; color: var(--parchemin-doux); font-size: 13px; }
.actions-question { display: flex; gap: 7px; }
.apercu-options { margin: 10px 0 0; padding-left: 22px; color: var(--parchemin-doux); font-size: 14px; }

.paginateur {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 24px 0;
  color: var(--parchemin-doux);
  font-size: 14px;
}
.paginateur .mini.inactif { opacity: 0.3; pointer-events: none; }

/* ---------------------------------------------------------------- journal */

.journal { list-style: none; margin: 0; padding: 0; }
.journal li {
  display: flex;
  gap: 14px;
  padding: 14px 18px;
  background: linear-gradient(180deg, var(--bois-clair), var(--bois));
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  margin-bottom: 9px;
}
.journal .emoji { font-size: 19px; line-height: 1.4; }
.journal .corps { flex: 1; min-width: 0; }
.journal .ligne-titre { display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap; }
.journal .resume { margin: 5px 0 0; overflow-wrap: anywhere; }
.journal .details {
  margin: 8px 0 0;
  padding-left: 12px;
  border-left: 2px solid var(--bordure);
  color: var(--parchemin-doux);
  font-size: 14px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.journal li > form { flex-shrink: 0; }
.journal li > form .mini { padding: 4px 10px; line-height: 1; }

.auteur-journal {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 7px 0 0;
  color: var(--parchemin-doux);
  font-size: 14px;
  flex-wrap: wrap;
}
.auteur-journal img { border-radius: 50%; display: block; border: 1px solid var(--bordure); }

/* ------------------------------------------------- joueurs sanctionnés */

.joueurs-sanctionnes { list-style: none; margin: 0; padding: 0; }
.joueurs-sanctionnes a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  margin-bottom: 8px;
  background: var(--bois);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  color: var(--parchemin);
  transition: border-color 0.15s ease, transform 0.08s ease;
}
.joueurs-sanctionnes a:hover {
  border-color: var(--laiton-sombre);
  text-decoration: none;
  transform: translateX(2px);
}
.joueurs-sanctionnes .texte { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.joueurs-sanctionnes small { color: var(--parchemin-doux); font-size: 13px; margin-top: 2px; }
.joueurs-sanctionnes .fleche { color: var(--laiton); font-size: 24px; }
.compte-types { display: flex; gap: 6px; flex-wrap: wrap; }

.portrait { border-radius: 50%; display: block; border: 1px solid var(--bordure); flex: none; }
.portrait.vide { width: 44px; height: 44px; background: var(--nuit); }
.portrait.grand { width: 64px; height: 64px; }

.entete-dossier { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.entete-dossier .page-titre { margin: 0; }
.entete-dossier .note { margin: 4px 0 0; }
.recap-types { display: flex; gap: 8px; flex-wrap: wrap; padding: 14px 18px; }
.effacer-dossier { margin-top: 12px; }
.auteur-journal .fleche-auteur { opacity: 0.6; }

.journal.compact li { padding: 10px 16px; }
.journal.compact .resume { font-size: 14px; color: var(--parchemin-doux); }

.etiquette.source { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 9px; }
.page-titre .etiquette { font-size: 13px; vertical-align: middle; margin-left: 10px; }

.carte.erreur { text-align: center; padding: 40px 24px; }
.carte.erreur h1 { margin: 0 0 10px; font-size: 26px; }
.carte.erreur p { margin: 0 0 22px; color: var(--parchemin-doux); }

code {
  background: var(--nuit);
  border: 1px solid var(--bordure);
  padding: 2px 7px;
  border-radius: 6px;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 13px;
  color: var(--laiton-vif);
}

/* ------------------------------------------------------- dépôt d'image */

.depot-image { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.depot-image > div { flex: 1; min-width: 220px; }
.depot-image input[type="file"] {
  width: 100%;
  padding: 9px;
  background: var(--nuit);
  color: var(--parchemin-doux);
  border: 1px dashed var(--bordure-vive);
  border-radius: var(--rayon-doux);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.retirer-icone { margin-top: 4px; }

/* Les deux voies — bibliothèque et envoi — présentées côte à côte, en boutons
   de même poids : aucune n'est « la vraie » façon de mettre une icône. */
.actions-icone { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Le sélecteur de fichier natif est illisible et impossible à styler : on le
   cache derrière un vrai bouton, dont le label fait office de déclencheur. */
.fichier-deguise { position: relative; overflow: hidden; cursor: pointer; margin: 0; }
.fichier-deguise input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  cursor: pointer;
  border: 0;
  padding: 0;
}

.apercu-icone {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: var(--rayon-doux);
  background: var(--nuit);
  border: 1px solid var(--bordure);
  font-size: 30px;
  overflow: hidden;
  flex-shrink: 0;
}
.apercu-icone img { width: 100%; height: 100%; object-fit: cover; display: block; }
.apercu-icone.rond, .apercu-icone.rond img { border-radius: 50%; }

/* ------------------------------------------ bibliothèque d'icônes fournies */

.bibliotheque-icones {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: 8px;
  margin-top: 10px;
  padding: 14px;
  background: var(--nuit);
  border: 1px solid var(--bordure-vive);
  border-radius: var(--rayon-doux);
}
.icone-fournie {
  /* Un bouton entièrement redessiné : on écarte le rendu natif plutôt que de
     compter sur chaque navigateur pour le laisser tranquille. */
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-items: center;
  padding: 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--rayon-doux);
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .12s;
}
.icone-fournie:hover { background: var(--bois); transform: translateY(-1px); }
.icone-fournie img { display: block; width: 40px; height: 40px; }
.icone-fournie.actif {
  border-color: var(--laiton);
  background: color-mix(in srgb, var(--laiton) 18%, transparent);
}
/* Le contour du focus clavier ne doit pas être mangé par la grille serrée. */
.icone-fournie:focus-visible { outline: 2px solid var(--laiton); outline-offset: 2px; }

/* ------------------------------------------------- jauge de remplissage */

.jauge-boutons { padding: 16px 20px; }
.jauge-entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.jauge-piste {
  height: 8px;
  border-radius: 999px;
  background: var(--nuit);
  overflow: hidden;
}
.jauge-remplie {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--sauge);
  transition: width 0.25s ease;
}
.jauge-boutons.presque .jauge-remplie { background: var(--laiton); }
.jauge-boutons.presque .jauge-entete strong { color: var(--laiton-vif); }
.jauge-boutons.plein { border-color: rgba(255, 93, 115, 0.5); }
.jauge-boutons.plein .jauge-remplie { background: var(--braise); }
.jauge-boutons.plein .jauge-entete strong { color: var(--braise); }

/* --------------------------------------------------- choix d'emojis */

.declencheur-emoji {
  width: 100%;
  height: 46px;
  display: grid;
  place-items: center;
  background: var(--nuit);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-doux);
  font-size: 22px;
  cursor: pointer;
  color: var(--parchemin);
}
.declencheur-emoji:hover { border-color: var(--laiton); }
.declencheur-emoji img { width: 24px; height: 24px; display: block; }

.choix-emojis {
  margin: -8px 0 22px;
  padding: 14px;
  background: var(--nuit);
  border: 1px solid var(--bordure-vive);
  border-radius: var(--rayon-doux);
}
.entete-emojis { display: flex; gap: 10px; margin-bottom: 12px; }
.entete-emojis .recherche-emoji {
  flex: 1;
  padding: 8px 11px;
  background: var(--bois);
  color: var(--parchemin);
  border: 1px solid var(--bordure);
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
}

/* Hauteur fixe : un serveur peut avoir cent emojis, la page ne doit pas
   s'étirer pour autant. */
.grille-emojis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
}
.case-emoji {
  display: grid;
  place-items: center;
  padding: 7px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
}
.case-emoji:hover { background: var(--bois-releve); border-color: var(--bordure-vive); }
.case-emoji img { display: block; }

.emoji-libre { margin-top: 14px; }
.emoji-libre label { display: block; font-size: 13px; color: var(--parchemin-doux); margin-bottom: 6px; }
.emoji-libre input {
  width: 90px;
  padding: 8px 11px;
  background: var(--bois);
  color: var(--parchemin);
  border: 1px solid var(--bordure);
  border-radius: 8px;
  font: inherit;
  font-size: 18px;
  text-align: center;
}
.vide-emojis { margin: 0; }

.apercu-bouton img { vertical-align: -3px; margin-right: 5px; }

/* ---------------------------------------------------- bandeau d'état */

/* Pleine largeur, teinté, avec sa pastille : l'état saute aux yeux sans avoir
   à lire. C'est la première chose que le joueur regarde en arrivant. */
.bandeau-etat {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  margin-bottom: 16px;
  border-radius: var(--rayon);
  border: 1px solid;
  font-size: 16px;
}
.bandeau-etat .pictogramme {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
  color: var(--nuit);
}

.bandeau-etat.correct {
  background: rgba(47, 214, 168, 0.10);
  border-color: rgba(47, 214, 168, 0.45);
  color: #8ff0d3;
}
.bandeau-etat.correct .pictogramme { background: var(--sauge); }

.bandeau-etat.sanctionne {
  background: rgba(255, 93, 115, 0.10);
  border-color: rgba(255, 93, 115, 0.45);
  color: #ffb3be;
}
.bandeau-etat.sanctionne .pictogramme { background: var(--braise); color: #fff; }

.bandeau-etat.avertissement {
  background: rgba(124, 108, 255, 0.12);
  border-color: rgba(124, 108, 255, 0.45);
  color: #c3baff;
}
.bandeau-etat.avertissement .pictogramme { background: var(--laiton); color: #fff; }

.bandeau-etat a { color: inherit; text-decoration: underline; }

/* ------------------------------------------------- demandes suivies */

/* L'état colore toute la carte, pas seulement son bord : la couleur devient
   lisible d'un coup d'œil dans une liste, sans pastille à déchiffrer.
   Une seule variable porte la teinte — le fond, les bordures et la flèche en
   découlent, et ajouter un état ne demande qu'une ligne. */
.demande-suivie { --teinte: var(--parchemin-doux); }
.demande-suivie.attente { --teinte: var(--laiton); }
.demande-suivie.acceptee { --teinte: var(--sauge); }
.demande-suivie.refusee { --teinte: var(--braise); }

.demande-suivie a {
  border-color: color-mix(in srgb, var(--teinte) 38%, var(--bordure));
  border-left: 3px solid var(--teinte);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--teinte) 14%, var(--bois-clair)),
    color-mix(in srgb, var(--teinte) 8%, var(--bois))
  );
}
.demande-suivie a:hover {
  border-color: color-mix(in srgb, var(--teinte) 65%, var(--bordure));
  border-left-color: var(--teinte);
}
.demande-suivie .fleche { color: var(--teinte); }
.demande-suivie .texte strong {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.demande-suivie .icone img { border-radius: 6px; display: block; }

/* ------------------------------------------------- fenêtres et barre */

.voile {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(6, 8, 18, 0.78);
  backdrop-filter: blur(3px);
  animation: apparition 0.14s ease;
}

.fenetre {
  width: 100%;
  max-width: 440px;
  padding: 26px 28px;
  background: linear-gradient(180deg, var(--bois-clair), var(--bois));
  border: 1px solid var(--bordure-vive);
  border-radius: var(--rayon);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.fenetre h2 { margin: 0 0 10px; font-size: 21px; }
.fenetre p { margin: 0 0 22px; color: var(--parchemin-doux); }
.fenetre-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* Les fenêtres écrites dans la page — et non créées par le script — arrivent
   avec `hidden`. Sans cette ligne, le `display: flex` du voile l'emporte et
   la fenêtre s'affiche d'emblée. */
.voile[hidden] { display: none; }
.fenetre.large { max-width: 620px; max-height: 86vh; overflow-y: auto; }
.entete-fenetre { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.entete-fenetre h2 { margin: 0; }

.entete-section { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.entete-section .section-titre { margin-bottom: 0; }

/* ------------------------------------------------ choix du type de section */

.choix-types { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.type-section {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 11px 14px;
  text-align: left;
  background: var(--nuit);
  color: var(--parchemin);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-doux);
  cursor: pointer;
  font: inherit;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.type-section:hover { border-color: var(--bordure-vive); }
.type-section.actif { border-color: var(--laiton); background: color-mix(in srgb, var(--laiton) 14%, var(--nuit)); }
.type-section .marque {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--bois-releve);
  color: var(--parchemin-doux);
  font-weight: 700;
}
.type-section.actif .marque { background: var(--laiton); color: #fff; }
.type-section span span, .type-section > span:last-child { display: flex; flex-direction: column; }
.type-section small { color: var(--parchemin-doux); font-size: 13px; }

/* ------------------------------------------------------ options d'une section */

.ligne-option { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.ligne-option input { width: 100%; }
.ligne-option input:first-child { flex: 1 1 42%; }
.ligne-option input:nth-child(2) { flex: 1 1 58%; }
.ligne-option .mini { flex: none; }

/* --------------------------------------------------------------- bascule */

.separateur { border: 0; border-top: 1px solid var(--bordure); margin: 26px 0; }

/* `label.bascule` et non `.bascule` : `.formulaire label { display: block }` est
   plus spécifique qu'une classe seule et gagnait. La bascule retombait alors en
   bloc, sa glissière perdait ses dimensions et venait chevaucher le texte. */
label.bascule {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  cursor: pointer;
  font-weight: 400;
  margin: 0;
}
.bascule input { position: absolute; opacity: 0; width: 0; height: 0; }
.bascule .glissiere {
  position: relative;
  flex: none;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: var(--bordure);
  transition: background 0.14s ease;
}
.bascule .glissiere::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--parchemin);
  transition: transform 0.14s ease;
}
.bascule input:checked + .glissiere { background: var(--laiton); }
.bascule input:checked + .glissiere::after { transform: translateX(18px); }
.bascule input:focus-visible + .glissiere { outline: 2px solid var(--laiton); outline-offset: 2px; }
.fenetre .bibliotheque-icones { max-height: 46vh; overflow-y: auto; }

@keyframes apparition { from { opacity: 0; } to { opacity: 1; } }

.barre-enregistrement {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 12px 14px 12px 22px;
  background: var(--bois-releve);
  border: 1px solid var(--bordure-vive);
  border-radius: 999px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  transform: translate(-50%, 120%);
  opacity: 0;
  transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2), opacity 0.18s ease;
}
.barre-enregistrement.visible { transform: translate(-50%, 0); opacity: 1; }

/* La barre flotte au-dessus de la page : sans cette réserve, elle recouvre le
   dernier bouton — et un bouton que l'on ne peut pas atteindre ressemble en
   tout point à un bouton qui ne marche pas. */
body.avec-barre { padding-bottom: 96px; }
.barre-enregistrement span { font-weight: 600; font-size: 15px; }
.barre-enregistrement div { display: flex; gap: 8px; }
.barre-enregistrement .bouton { padding: 8px 18px; }

/* Les deux réponses d'une question ratée, chacune sur sa ligne et nommée.
   Sur un questionnaire qu'on relit d'une traite, une croix puis une coche
   laissaient prendre la bonne réponse pour celle du candidat. */
.reponses .ligne-correction { display: block; margin-top: 4px; }
.reponses .ligne-correction strong { font-weight: 700; }
.reponses .fausse { color: var(--parchemin); }
.reponses .fausse strong { color: var(--braise); }
.reponses .attendu { color: var(--parchemin-doux); font-size: 14px; }
.reponses .attendu strong { color: var(--sauge); }

.bloc-lecture { border-left: 4px solid var(--laiton); }
.bloc-lecture strong { display: block; margin-bottom: 6px; font-size: 17px; }
.bloc-lecture p { margin: 0; color: var(--parchemin-doux); white-space: pre-wrap; }

.compteur { margin: 6px 0 0; font-size: 13px; color: var(--parchemin-doux); text-align: right; }
.compteur.insuffisant { color: var(--braise); }

.option input:disabled + span { opacity: 0.45; }
.option:has(input:disabled) { cursor: not-allowed; }

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

.pied {
  padding: 26px 20px;
  text-align: center;
  color: var(--parchemin-doux);
  font-size: 13px;
  border-top: 1px solid var(--bordure);
  background: var(--bois);
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 620px) {
  .entete { flex-direction: column; align-items: stretch; gap: 12px; position: static; }
  .marque { justify-content: center; }
  .nav { justify-content: center; }
  .visiteur { display: none; }
  .carte.demande, .demande-detail header { flex-direction: column; align-items: flex-start; }
  .contenu { padding: 22px 15px 44px; }
  .page-titre { font-size: 25px; }
  .banniere { padding: 28px 16px 24px; }
}

.effacer-ligne { margin: -6px 0 10px; text-align: right; }

/* ---------------------------------------------- sélecteurs riches */

.selecteur-riche { position: relative; }
/* Le `<select>` reste dans la page — il porte la valeur et `required` — mais
   hors de vue. `display: none` le retirerait de la validation du navigateur. */
.select-cache {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 100%;
  height: 44px;
}
.selecteur-riche .declencheur {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 13px;
  appearance: none;
  background: var(--nuit);
  color: var(--parchemin);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-doux);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.selecteur-riche .declencheur:hover { border-color: var(--bordure-vive); }
.selecteur-riche .declencheur::after { content: '⌄'; margin-left: auto; opacity: 0.6; }
.selecteur-riche .declencheur .vide { color: var(--parchemin-doux); }
.selecteur-riche img { border-radius: 50%; display: block; flex: none; }
.selecteur-riche .prefixe { color: var(--parchemin-doux); flex: none; }

.liste-riche {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 300px;
  overflow-y: auto;
  padding: 8px;
  background: var(--bois-clair);
  border: 1px solid var(--bordure-vive);
  border-radius: var(--rayon-doux);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
}
.recherche-riche {
  width: 100%;
  padding: 8px 11px;
  margin-bottom: 8px;
  background: var(--nuit);
  color: var(--parchemin);
  border: 1px solid var(--bordure);
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
}
.choix-riche {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  appearance: none;
  background: transparent;
  color: var(--parchemin);
  border: 0;
  border-radius: 8px;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.choix-riche:hover { background: var(--bois-releve); }
.choix-riche[hidden] { display: none; }

.entete-permission { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.entete-permission strong { margin-right: 8px; }

/* ------------------------------------------- rôles repliés sous un bouton */

.replie-roles { width: 100%; }
.declencheur-roles { flex-wrap: wrap; min-height: 44px; gap: 6px; }
.jeton-role {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 10px 3px 8px;
  background: var(--bois-releve);
  border-radius: 999px;
  font-size: 14px;
}
.jeton-role.discret { color: var(--parchemin-doux); }
.panneau-roles {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  min-width: 280px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
}
.panneau-roles .selecteur-roles { border-color: var(--bordure-vive); }

/* ---------------------------------------------- tableau des permissions */

.contenu.pleine { max-width: 1240px; }

.tableau-permissions { padding: 6px 10px; }
.ligne-permission {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 380px);
  align-items: center;
  gap: 18px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--bordure);
}
.ligne-permission:last-child { border-bottom: 0; }
.ligne-permission .intitule { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.ligne-permission .intitule small { color: var(--parchemin-doux); font-size: 13px; line-height: 1.35; }
/* Une action encore attribuée au staff est marquée par un filet et une mention
   sur la même ligne que son explication : dix-sept étiquettes empilées feraient
   plus de bruit que d'aide, et une troisième ligne par action rallonge la page
   d'autant. */
.ligne-permission.par-defaut { border-left: 3px solid var(--laiton-sombre); }
.ligne-permission.par-defaut .intitule small::after {
  content: ' · suit les rôles staff';
  color: var(--laiton);
}
.ligne-permission .attribution { position: relative; }

@media (max-width: 720px) {
  .ligne-permission { grid-template-columns: 1fr; gap: 10px; }
}

.ligne-permission .icone-ligne { border-radius: 4px; vertical-align: -3px; margin-right: 5px; }

/* ----------------------------------------------- activité du staff */

/*
 * Un tableau, mais en grille : les six colonnes doivent rester alignées d'une
 * ligne à l'autre, et un vrai <table> ne se replie pas sur téléphone.
 * Les chiffres sont tabulaires — sans ça, « 11 » paraît plus court que « 99 »
 * et la colonne danse.
 */
.activite-staff { padding: 6px 10px 10px; }
.activite-staff .entete-activite { padding: 10px 12px 4px; }
.activite-staff .entete-activite h2 { margin: 0; font-size: 19px; }
.activite-staff .entete-activite .note { margin: 2px 0 0; }

.ligne-activite {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 62px 68px 72px 84px minmax(130px, auto);
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--bordure);
}
.ligne-activite:last-child { border-bottom: 0; }

.ligne-activite.en-tete {
  color: var(--parchemin-doux);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom-color: var(--bordure-vive);
}

.ligne-activite .intitule { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.ligne-activite .intitule code { font-size: 11.5px; color: var(--parchemin-doux); }

.ligne-activite .chiffre {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: center;
}
/* Le chiffre qui compte vraiment : les dossiers réellement suivis. */
.ligne-activite .chiffre.fort { color: var(--sauge); font-size: 17px; }
.ligne-activite .chiffre.discret { color: var(--parchemin-doux); font-weight: 500; }
.ligne-activite .note { font-size: 12.5px; }

@media (max-width: 760px) {
  /* Sur téléphone, l'en-tête de colonnes n'a plus de colonnes à nommer. */
  .ligne-activite.en-tete { display: none; }
  /* Trois colonnes égales pour les trois chiffres qui restent : le nom et la
     date prennent leur propre ligne, le compteur de messages s'efface. */
  .ligne-activite { grid-template-columns: repeat(3, 1fr); gap: 8px 12px; }
  .ligne-activite .intitule { grid-column: 1 / -1; }
  /* Les colonnes ayant disparu, chaque chiffre porte son propre mot.
     Une classe, et pas `nth-of-type` : les six cellules sont toutes des
     `span`, le compteur ne les distinguerait pas. */
  .ligne-activite .chiffre::after { font-size: 11px; color: var(--parchemin-doux); font-weight: 500; }
  .ligne-activite .chiffre.pris::after { content: ' pris'; }
  .ligne-activite .chiffre.suivis::after { content: ' suivis'; }
  .ligne-activite .chiffre.fermes::after { content: ' fermés'; }
  .ligne-activite .chiffre.discret { display: none; }
  .ligne-activite .note { grid-column: 1 / -1; }
}

.intervenants { margin-top: -4px; }

/* --------------------------------------------- texte écrit par les joueurs */

/*
 * Un background collé d'un seul tenant — « EEEEEE… » sans une espace — n'a
 * aucun endroit où se couper : le navigateur le laisse alors sortir de sa
 * carte et pousser la page vers la droite. `anywhere` l'autorise à casser
 * n'importe où, ce qui est laid pour un mot et juste pour un mur de lettres.
 *
 * Réservé à ce que les joueurs écrivent : sur le texte du site, une coupure au
 * milieu d'un mot serait une faute de composition.
 */
.bloc-lecture p,
.raison,
.reponses dd,
.demande-detail .cible,
.intervenants {
  overflow-wrap: anywhere;
}

/* Les places d'une question « Membre » : les listes s'empilent sans se coller. */
.groupe-membres { display: flex; flex-direction: column; gap: 8px; }

/* ------------------------------------------- échelle des sanctions automatiques */

.echelle-sanctions {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-doux);
  overflow: hidden;
}
.echelle-sanctions li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--bordure);
}
.echelle-sanctions li:last-child { border-bottom: 0; }
/* Le dernier barreau est le seul dont on ne redescend pas : il se voit. */
.echelle-sanctions li:last-child .rang { background: var(--braise); color: #fff; }

.echelle-sanctions .rang {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bois-releve);
  color: var(--parchemin-doux);
  font-size: 13px;
  font-weight: 700;
}
.echelle-sanctions .intitule { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.echelle-sanctions .intitule small { color: var(--parchemin-doux); font-size: 13px; line-height: 1.35; }

/* ------------------------------------------------- fiches de ticket repliées */

/*
 * Chaque ticket est un `<details>` : replié à l'arrivée, ouvert au clic,
 * refermé au clic suivant. Dix tickets étalés demandaient de faire défiler
 * pour en trouver un ; repliés, la page se lit d'un coup d'œil.
 */
.fiche-ticket { padding: 0; overflow: hidden; }

.fiche-ticket > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;           /* le triangle par défaut, remplacé plus bas */
  user-select: none;
}
.fiche-ticket > summary::-webkit-details-marker { display: none; }
.fiche-ticket > summary:hover { background: rgba(255, 255, 255, 0.03); }

/* La flèche, dessinée nous-mêmes pour qu'elle tourne à l'ouverture. */
.fiche-ticket > summary::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-left: 2px;
  border-right: 2px solid var(--parchemin-doux);
  border-bottom: 2px solid var(--parchemin-doux);
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}
.fiche-ticket[open] > summary::after { transform: rotate(45deg); }
.fiche-ticket[open] > summary { border-bottom: 1px solid var(--bordure); }

.fiche-ticket .visage { border-radius: 50%; flex: none; border: 1px solid var(--bordure-vive); }
.fiche-ticket .resume { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.fiche-ticket .resume .titre { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
/* Le motif tient sur une ligne tant que la fiche est repliée : un motif à
   rallonge ne doit pas faire un pavé de trois lignes dans la liste. */
.fiche-ticket .resume .titre strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fiche-ticket .resume .note { margin: 0; font-size: 12.5px; }
.fiche-ticket .etiquette { flex: none; }

.corps-ticket { padding: 16px 18px 18px; }
.corps-ticket > :first-child { margin-top: 0; }

/* Les rôles du joueur, chacun dans sa couleur Discord. */
.roles-joueur { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.pastille-nom {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--teinte, var(--bordure-vive));
  color: var(--teinte, var(--parchemin-doux));
  font-size: 12.5px;
  line-height: 1.5;
  white-space: nowrap;
}
.pastille-nom::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teinte, var(--parchemin-doux));
}

@media (max-width: 620px) {
  /* L'étiquette d'état passe sous le reste plutôt que d'écraser le motif. */
  .fiche-ticket > summary { flex-wrap: wrap; }
  .fiche-ticket .resume { flex: 1 1 100%; order: 2; }
  .fiche-ticket .etiquette { order: 1; }
}

/* --------------------------------------------------- fil d'actions du staff */

/*
 * Un défilement, pas une pagination : on parcourt l'activité de quelqu'un du
 * regard. La hauteur est bornée pour que dix cartes de staff tiennent sur une
 * page — sinon la première pousse toutes les autres hors de l'écran.
 */
.fil-actions {
  list-style: none;
  margin: 12px 0 0;
  padding: 0 10px 0 0;
  max-height: 340px;
  overflow-y: auto;
  border-left: 2px solid var(--bordure);
}
.fil-actions li {
  display: flex;
  gap: 14px;
  padding: 8px 0 8px 14px;
  position: relative;
}
.fil-actions li + li { border-top: 1px solid var(--bordure); }
/* La pastille sur le filet vertical : le fil se lit comme une chronologie. */
.fil-actions li::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 15px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bordure-vive);
}
.fil-actions li:first-child::before { background: var(--laiton); }

.fil-actions .quand {
  flex: none;
  width: 132px;
  color: var(--parchemin-doux);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}
.fil-actions .quoi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fil-actions .entete-action {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}
.fil-actions .sur { color: var(--parchemin-doux); font-size: 13.5px; }
.fil-actions .detail { color: var(--parchemin-doux); font-size: 13px; overflow-wrap: anywhere; }
.fil-actions .detail.discret { opacity: 0.75; }

@media (max-width: 620px) {
  .fil-actions li { flex-direction: column; gap: 3px; }
  .fil-actions .quand { width: auto; }
}

/* --------------------------------------------- modification d'un bouton */

/* L'aperçu du bouton EST le déclencheur de sa modification : c'est là qu'on
   cherche à corriger un texte ou une icône, pas dans un formulaire d'à côté. */
.apercu-bouton.modifiable {
  border: 0;
  cursor: pointer;
  font: inherit;
  transition: filter 0.12s ease, transform 0.08s ease;
}
.apercu-bouton.modifiable:hover { filter: brightness(1.12); }
.apercu-bouton.modifiable:active { transform: translateY(1px); }

.edition-bouton {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--bordure);
}