/* Direction artistique « Maison victorienne » [D-34] :
   papier peint damassé dans la nuit, cadres de laiton, cadran d'horloge.
   Vert spectral pour les Visiteurs, violet pour les pouvoirs, laiton pour les cadres et les actions.
   Grandes zones tactiles, lisible dans une pièce sombre. */

/* --- Polices hébergées dans le projet (le jeu fonctionne sans Internet) --- */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500 600; font-display: swap; src: url("/fonts/cormorant-garamond.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500 600; font-display: swap; src: url("/fonts/cormorant-garamond-italique.woff2") format("woff2"); }
@font-face { font-family: "Cormorant SC"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/cormorant-sc.woff2") format("woff2"); }
@font-face { font-family: "Mulish"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/mulish.woff2") format("woff2"); }
@font-face { font-family: "Mulish"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("/fonts/mulish-italique.woff2") format("woff2"); }

:root {
  --nuit: #0f1120;
  --nuit-claire: #171a2d;
  --nuit-plus-claire: #20243d;
  --bordure: #2e3252;
  --texte: #ebe6da;
  --texte-doux: #b7b1c9;
  --laiton: #b89655;
  --laiton-clair: #e2c98f;
  --laiton-voile: rgb(184 150 85 / 0.4);
  --vert: #7dffb3;
  --eclat: #ffffff; /* « blanc éclatant » : joueurs présents dans la même pièce (GDD § 12, valeur à confirmer) */
  --vert-clair: #aef9cf;
  --vert-sombre: #1f5c43;
  --violet: #c3a3ff;
  --danger: #f0a191;
  --camee: radial-gradient(circle at 50% 38%, #f4efe3, #cfc6ad); /* fond ivoire des portraits */

  --police-titre: "Cormorant Garamond", "Palatino Linotype", Palatino, Georgia, serif;
  --police-capitales: "Cormorant SC", "Cormorant Garamond", Palatino, Georgia, serif;
  --police-texte: "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --largeur-page: 34rem;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  color: var(--texte);
  font-family: var(--police-texte);
  font-size: 18px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; /* pas de zoom au double appui */
}
/* Papier peint damassé, à peine visible, et un voile sombre sur les bords. */
body {
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 50% 0%, transparent 40%, rgb(0 0 0 / 0.45) 100%),
    radial-gradient(circle at 50% 50%, rgb(255 255 255 / 0.016) 0 0.9rem, transparent 1rem) 0 0 / 3rem 3rem,
    radial-gradient(circle at 50% 50%, rgb(255 255 255 / 0.014) 0 0.35rem, transparent 0.45rem) 1.5rem 1.5rem / 3rem 3rem,
    linear-gradient(#141627, var(--nuit)) fixed;
  background-color: var(--nuit);
}

/* --- Barre du haut : lune, cadran d'horloge, son --- */
.barre {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  padding: calc(0.4rem + env(safe-area-inset-top, 0px)) 1rem 0.4rem;
  background: linear-gradient(rgb(15 17 32 / 0.95) 70%, transparent);
}
.barre-contenu {
  flex: 1;
  max-width: var(--largeur-page);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 4rem;
}
.lune, .son {
  background: none;
  border: 0;
  padding: 0;
  color: var(--violet);
  min-width: 3rem;
  min-height: 3rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.lune svg { width: 2rem; height: 2rem; filter: drop-shadow(0 0 8px rgb(195 163 255 / 0.55)); }
.son { font-size: 1.3rem; color: var(--laiton-clair); }

.chrono {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 2px solid var(--laiton);
  box-shadow: inset 0 0 0 3px var(--nuit), inset 0 0 0 4px var(--laiton-voile), 0 0 14px rgb(0 0 0 / 0.5);
  background: radial-gradient(circle, var(--nuit-claire), var(--nuit));
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
  color: var(--vert-clair);
}
.chrono.urgent { color: var(--danger); border-color: var(--danger); }

/* --- Mise en page --- */
.page {
  max-width: var(--largeur-page);
  margin: 0 auto;
  padding: 0.5rem 1rem calc(6rem + env(safe-area-inset-bottom, 0px));
}
.ecran { display: grid; gap: 1.25rem; }
.pile { display: grid; gap: 1rem; }
.centre { text-align: center; }
.entete { text-align: center; }

.titre {
  margin: 0;
  font-family: var(--police-titre);
  font-style: italic;
  font-weight: 600;
  font-size: 2.6rem;
  line-height: 1.05;
  color: var(--laiton-clair);
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 0 18px rgb(226 201 143 / 0.25);
}
.titre.petit { font-size: 2.1rem; }
.accroche { margin: 0.6rem 0 0; color: var(--texte-doux); font-family: var(--police-titre); font-style: italic; font-size: 1.2rem; }
.recit { margin: 0; font-family: var(--police-titre); font-size: 1.35rem; font-style: italic; text-align: center; color: var(--texte-doux); text-wrap: balance; }

/* Cadre de laiton : un filet extérieur et un filet intérieur plus discret. */
.carte {
  margin: 0;
  background: rgb(23 26 45 / 0.86);
  border: 1px solid var(--laiton);
  border-radius: 0.2rem;
  box-shadow: inset 0 0 0 4px var(--nuit-claire), inset 0 0 0 5px var(--laiton-voile), 0 10px 30px rgb(0 0 0 / 0.35);
  padding: 1.1rem 1.25rem;
}
.etiquette {
  margin: 0 0 0.35rem;
  padding: 0;
  font-family: var(--police-capitales);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.16em;
  color: var(--laiton-clair);
}
.discret { color: var(--texte-doux); margin: 0; }
.lieu-nom {
  margin: 0;
  font-family: var(--police-titre);
  font-style: italic;
  font-weight: 600;
  font-size: 2.2rem;
  line-height: 1.05;
  color: var(--vert-clair);
}
.lieu-nom.danger { color: var(--danger); }

/* --- Formulaires et boutons (au moins 48 px de haut) --- */
.champ { display: grid; gap: 0.3rem; border: 0; margin: 0; padding: 0; }
input {
  font: inherit;
  color: var(--texte);
  background: var(--nuit);
  border: 1px solid var(--laiton-voile);
  border-radius: 0.2rem;
  padding: 0.75rem 1rem;
  min-height: 3rem;
}
input:focus { outline: 2px solid var(--laiton-clair); outline-offset: 1px; }

.bouton {
  display: block;
  width: 100%;
  font-family: var(--police-capitales);
  font-weight: 600;
  font-size: 1.12rem;
  letter-spacing: 0.06em;
  text-align: center;
  text-decoration: none;
  color: #12131f;
  background: linear-gradient(var(--laiton-clair), var(--laiton));
  border: 1px solid #f0dcaa;
  border-radius: 0.2rem;
  padding: 0.75rem 1.25rem;
  min-height: 3.25rem;
  cursor: pointer;
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.35);
}
.bouton:disabled { opacity: 0.4; cursor: default; }
.bouton.secondaire { background: transparent; color: var(--laiton-clair); border-color: var(--laiton-voile); box-shadow: none; }
.bouton.pouvoir { background: linear-gradient(#d9c4ff, var(--violet)); border-color: #e6d9ff; }
.discret-bouton { background: transparent; border-color: transparent; box-shadow: none; color: var(--texte-doux); font-family: var(--police-texte); font-size: 1rem; letter-spacing: 0; font-weight: 400; }
.erreur { margin: 0; color: var(--danger); }

/* --- Portraits : médaillons ovales --- */
.portraits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; }
.portrait {
  position: relative;
  font-size: 1.9rem;
  aspect-ratio: 5 / 6;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--laiton-voile);
  background: var(--camee);
  cursor: pointer;
  overflow: hidden;
  opacity: 0.8;
}
.portrait img { width: 78%; pointer-events: none; }
.portrait:has(input:checked) {
  border-color: var(--laiton-clair);
  opacity: 1;
  box-shadow: 0 0 0 3px var(--nuit-claire), 0 0 0 4px var(--laiton), 0 0 16px rgb(226 201 143 / 0.35);
}
.portrait input { position: absolute; opacity: 0; pointer-events: none; }
.portrait.pris { opacity: 0.2; cursor: not-allowed; filter: grayscale(1); }

.medaillon {
  flex-shrink: 0;
  width: 2.3rem;
  height: 2.75rem;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-size: 1.25rem;
  border: 2px solid var(--laiton);
  background: var(--camee);
  overflow: hidden;
}
.medaillon img, .joueurs .symbole img { width: 80%; }
/* Photo du joueur [D-108] : elle remplit tout le camée. */
img.photo, .medaillon img.photo, .joueurs .symbole img.photo, .portrait img.photo { width: 100%; height: 100%; object-fit: cover; }
.portrait-photo { font-size: 1.6rem; color: var(--nuit); }
.portrait-photo input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* --- Listes de joueurs --- */
.joueurs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.joueurs li { display: flex; align-items: center; gap: 0.8rem; }
.joueurs .symbole { flex-shrink: 0; width: 2.3rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--laiton); background: var(--camee); overflow: hidden; }
.joueurs .moi { color: var(--vert-clair); font-weight: 600; }
.joueurs .role { margin-left: auto; font-family: var(--police-titre); font-style: italic; font-size: 1.1rem; color: var(--texte-doux); }
.joueurs .role.envoutes { color: var(--violet); }

/* --- Carte du rôle : visible uniquement tant que le doigt reste posé --- */
.carte-role {
  font: inherit;
  color: var(--texte);
  min-height: 16rem;
  border-radius: 50% / 16%;
  border: 1px solid var(--laiton);
  box-shadow: inset 0 0 0 5px var(--nuit-claire), inset 0 0 0 6px var(--laiton-voile);
  background: radial-gradient(ellipse at 50% 40%, var(--nuit-plus-claire), var(--nuit-claire));
  padding: 1.75rem;
  display: grid;
  place-items: center;
  text-align: center;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.carte-role .role-visible { display: none; }
.carte-role.revele .role-cache { display: none; }
.carte-role.revele .role-visible { display: grid; gap: 0.75rem; }
.role-cache { color: var(--laiton-clair); font-family: var(--police-titre); font-style: italic; font-size: 1.35rem; }
.souris { display: none; }
@media (hover: hover) and (pointer: fine) {
  .tactile { display: none; }
  .souris { display: inline; }
}
.role-titre { font-family: var(--police-titre); font-style: italic; font-weight: 600; font-size: 2.4rem; line-height: 1; color: var(--vert-clair); }
.role-titre.envoutes { color: var(--violet); }
.role-allies { color: var(--texte-doux); min-height: 3em; }

/* --- Jauge de progression : segments, comme une rangée de voyants --- */
.barre-progression {
  height: 0.8rem;
  background: #2f3456;
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(5% - 3px), transparent calc(5% - 3px) 5%);
  mask: repeating-linear-gradient(90deg, #000 0 calc(5% - 3px), transparent calc(5% - 3px) 5%);
}
.progression-remplie {
  height: 100%;
  width: 0;
  background: linear-gradient(var(--vert-clair), #6fe9a4);
  box-shadow: 0 0 8px rgb(125 255 179 / 0.4);
  transition: width 0.6s ease;
}

.badge { font-size: 0.75rem; padding: 0.1rem 0.55rem; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; align-self: center; font-weight: 600; }
.badge.danger { color: var(--danger); }
.badge.special { color: var(--laiton-clair); }

/* --- Message éphémère --- */
.message {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 20;
  margin: 0 auto;
  max-width: 32rem;
  padding: 0.9rem 1.2rem;
  border-radius: 0.2rem;
  background: var(--nuit-plus-claire);
  border: 1px solid var(--laiton);
  box-shadow: 0 8px 30px rgb(0 0 0 / 0.55);
}
.message.erreur { border-color: var(--danger); color: var(--danger); }

/* --- Missions et mini-jeux --- */
.conseil { margin: 0; padding: 0.6rem 0.9rem; background: var(--nuit); border-left: 2px solid var(--violet); color: var(--texte); font-size: 0.95rem; }
.conseil.danger { border-left-color: var(--danger); font-style: italic; }
.regles { margin: 0; padding-left: 1.4rem; display: grid; gap: 0.55rem; }
.regles li::marker { font-family: var(--police-titre); font-weight: 600; color: var(--laiton-clair); }
.case-compris { display: flex; align-items: center; gap: 0.6rem; min-height: 3rem; font-weight: 700; cursor: pointer; }
.case-compris input { width: 1.5rem; height: 1.5rem; min-height: 0; accent-color: var(--laiton); }
.entete-minijeu { display: grid; gap: 0.6rem; text-align: center; }
.chrono-minijeu { -webkit-mask: none; mask: none; height: 0.5rem; border-radius: 999px; }
.chrono-minijeu .progression-remplie { transition: width 0.25s linear; background: linear-gradient(90deg, var(--danger), var(--laiton-clair), var(--vert)); box-shadow: none; }
.zone-minijeu {
  min-height: 60vh;
  display: grid;
  place-items: center;
  border-radius: 0.2rem;
  background: var(--nuit-claire);
  border: 1px solid var(--laiton);
  box-shadow: inset 0 0 0 4px var(--nuit-claire), inset 0 0 0 5px var(--laiton-voile);
  padding: 1rem;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.provisoire { display: grid; gap: 1rem; text-align: center; max-width: 24rem; }

/* --- Mode debug (volontairement hors du style du jeu) --- */
.debug {
  position: fixed;
  right: 0.5rem;
  bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
  z-index: 15;
  max-width: min(22rem, calc(100vw - 1rem));
  max-height: 70vh;
  overflow: auto;
  background: #2a1f00;
  border: 1px solid #a07a00;
  border-radius: 0.75rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
}
.debug summary { cursor: pointer; color: #ffd166; font-weight: 700; font-size: 1rem; padding: 0.4rem 0.3rem; min-height: 2.75rem; display: flex; align-items: center; gap: 0.3rem; }
.debug:not(:has(details[open])) { box-shadow: 0 0 18px rgb(255 209 102 / 0.35); }
.debug details[open] { display: grid; gap: 0.5rem; }
.debug .zone-debug { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; }
.debug .zone-debug p { flex-basis: 100%; margin: 0.3rem 0 0; color: #ffd166; }
.debug button { font: inherit; background: var(--nuit); color: var(--texte); border: 1px solid #a07a00; border-radius: 0.5rem; padding: 0.35rem 0.6rem; cursor: pointer; }
.debug .bouton { font-family: var(--police-texte); font-size: 0.85rem; letter-spacing: 0; min-height: 0; padding: 0.5rem; }

/* === Responsive : téléphone (par défaut), tablette, ordinateur [D-33] === */

.colonne { min-width: 0; }

/* Téléphone en paysage : on gagne de la hauteur. */
@media (max-height: 30rem) and (orientation: landscape) {
  .barre { position: static; }
  .carte-role { min-height: 11rem; }
  .titre { font-size: 2rem; }
}

/* Tablette et plus : deux colonnes pour le jeu, plus d'air partout. */
@media (min-width: 48rem) {
  :root { --largeur-page: 60rem; }
  html, body { font-size: 19px; }
  .page { padding-inline: 2rem; }
  #ecran-accueil, #ecran-attente, #ecran-trop-tard, #ecran-role, #ecran-fin,
  #ecran-briefing, #ecran-partenaire, #ecran-minijeu {
    max-width: 36rem;
    margin-inline: auto;
    width: 100%;
  }
  .portraits { grid-template-columns: repeat(6, 1fr); }
  .carte-role { min-height: 20rem; }
  .deux-colonnes {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
  .deux-colonnes > .colonne:first-child { position: sticky; top: 6rem; }
  .debug { max-width: 26rem; }
}
/* Le panneau debug ne doit pas masquer les boutons du bas sur téléphone. */
@media (max-width: 47.99rem) {
  .page { padding-bottom: calc(8rem + env(safe-area-inset-bottom, 0px)); }
}

/* Ordinateur : survol à la souris, contenu plus large. */
@media (min-width: 64rem) {
  :root { --largeur-page: 72rem; }
  .deux-colonnes { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}

@media (hover: hover) and (pointer: fine) {
  .bouton:not(:disabled):hover { filter: brightness(1.1); }
  .portrait:hover { border-color: var(--laiton); }
  .lune:hover, .son:hover { filter: brightness(1.25); }
}

:focus-visible { outline: 2px solid var(--laiton-clair); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

#mission-detail { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.3rem; }

/* === Ambiance [D-35] : brume, teinte par étage, Heure maudite, transitions === */

/* Le contenu passe au-dessus des calques d'ambiance. */
.page { position: relative; z-index: 1; }
/* La barre (lune, chrono) reste au-dessus de tout, même de l'écran noir d'une coupure. */
.barre { position: sticky; z-index: 10; }

/* Brume : deux voiles qui dérivent lentement, en sens contraires. */
.brume {
  position: fixed;
  inset: -20% -50%;
  z-index: 0;
  pointer-events: none;
  opacity: var(--brume-opacite, 0.5);
  transition: opacity 2s ease;
  background:
    radial-gradient(ellipse 30% 18% at 20% 70%, rgb(200 205 230 / 0.12), transparent 70%),
    radial-gradient(ellipse 25% 14% at 60% 85%, rgb(200 205 230 / 0.1), transparent 70%),
    radial-gradient(ellipse 35% 20% at 85% 60%, rgb(200 205 230 / 0.09), transparent 70%);
  animation: derive 70s linear infinite alternate;
}
.brume.lointaine {
  opacity: calc(var(--brume-opacite, 0.5) * 0.8);
  background:
    radial-gradient(ellipse 28% 16% at 35% 30%, rgb(200 205 230 / 0.09), transparent 70%),
    radial-gradient(ellipse 32% 18% at 75% 40%, rgb(200 205 230 / 0.08), transparent 70%);
  animation-duration: 95s;
  animation-direction: alternate-reverse;
}
@keyframes derive {
  from { transform: translateX(-12%); }
  to { transform: translateX(12%); }
}

/* Teinte selon l'étage où l'on se trouve : profondeurs (sous le niveau de départ),
   hauteurs (au-dessus). Le niveau de départ garde la teinte de base. */
.teinte {
  position: fixed;
  inset: 0;
  z-index: 5; /* par-dessus le contenu, mais seulement sur les bords */
  pointer-events: none;
  background: var(--teinte, transparent);
  transition: background 2.5s ease;
}
body[data-etage="profondeurs"] { --teinte: radial-gradient(ellipse 90% 80% at 50% 45%, transparent 50%, rgb(110 40 40 / 0.38) 100%); --brume-opacite: 0.7; }
body[data-etage="hauteurs"] { --teinte: radial-gradient(ellipse 90% 80% at 50% 45%, transparent 50%, rgb(110 80 200 / 0.3) 100%); }
/* Salle danger : la brume s'épaissit. */
body[data-danger="1"] { --brume-opacite: 0.95; }

/* Heure maudite : bords rougeoyants, le cadran bat comme un cœur. */
.maudite {
  position: fixed;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  transition: opacity 3s ease;
  background: radial-gradient(ellipse 85% 75% at 50% 45%, transparent 40%, rgb(150 20 35 / 0.5) 100%);
}
body[data-acte="heureMaudite"] .maudite { opacity: 1; animation: souffle 6s ease-in-out infinite; }
body[data-acte="heureMaudite"] .chrono { color: var(--danger); border-color: var(--danger); animation: battement 1.1s ease-in-out infinite; }
@keyframes souffle { 50% { opacity: 0.6; } }
@keyframes battement {
  0%, 60%, 100% { transform: scale(1); box-shadow: inset 0 0 0 3px var(--nuit), inset 0 0 0 4px var(--laiton-voile), 0 0 10px rgb(240 161 145 / 0.2); }
  15% { transform: scale(1.07); box-shadow: inset 0 0 0 3px var(--nuit), inset 0 0 0 4px var(--laiton-voile), 0 0 22px rgb(240 161 145 / 0.55); }
  30% { transform: scale(1.02); }
  45% { transform: scale(1.06); }
}

/* Transition entre écrans : un fondu, comme une bougie qu'on rallume. */
.ecran { animation: apparition 0.5s ease both; }
@keyframes apparition {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* Page d'essai des mini-jeux (mode debug) */
.liste-essai { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }

/* --- Salle de contrôle : la vision [D-13] --- */

#ecran-vision .carte { animation: apparition-vision 0.8s ease both; }
@keyframes apparition-vision { from { filter: blur(8px) brightness(1.6); opacity: 0; } to { filter: none; opacity: 1; } }

/* === Carte de la maison en coupe, comme une maison de poupée [D-39] === */
.maison-carte { display: grid; padding-top: 0.2rem; }
/* Le toit, sa cheminée et son œil-de-bœuf */
.toit {
  position: relative;
  height: 4.2rem;
  margin: 0 -4%;
  background:
    repeating-linear-gradient(0deg, transparent 0 0.55rem, rgb(0 0 0 / 0.35) 0.55rem 0.62rem),
    linear-gradient(#3a2a4a, #241a33);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.cheminee {
  position: absolute;
  right: 24%;
  top: 0.9rem;
  width: 1.2rem;
  height: 2rem;
  background: #2a1a24;
  box-shadow: inset 0 0.25rem 0 #4a2f3a;
}
.oeil-de-boeuf {
  position: absolute;
  left: 50%;
  bottom: 0.6rem;
  width: 1.3rem;
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  border: 2px solid var(--laiton);
  background: radial-gradient(circle, #f2b35b 0 30%, #3b2a14 70%);
  box-shadow: 0 0 10px rgb(242 179 91 / 0.5);
}
/* Un étage : son nom au-dessus, ses pièces côte à côte */
.niveau {
  position: relative;
  display: grid;
  gap: 0.25rem;
  padding: 0.35rem 0.35rem 0.4rem;
  border-inline: 3px solid #2a1f14;
  border-bottom: 5px solid #3a2616;
  background:
    radial-gradient(circle at 50% 50%, rgb(195 163 255 / 0.07) 0 20%, transparent 21%) 0 0 / 1.2rem 1.4rem,
    linear-gradient(#211a36, #1a1530);
}
.niveau.hauteurs { background: radial-gradient(circle at 50% 50%, rgb(195 163 255 / 0.09) 0 20%, transparent 21%) 0 0 / 1.2rem 1.4rem, linear-gradient(#2a1f45, #211a3a); }
.niveau.profondeurs {
  border-color: #1a1814;
  background:
    repeating-linear-gradient(0deg, transparent 0 1rem, rgb(0 0 0 / 0.3) 1rem calc(1rem + 2px)),
    repeating-linear-gradient(90deg, transparent 0 1.6rem, rgb(0 0 0 / 0.22) 1.6rem calc(1.6rem + 2px)),
    linear-gradient(#302b36, #1f1b24);
}
.niveau-nom {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  font-family: var(--police-capitales);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  color: var(--laiton-clair);
}
.pieces { display: grid; grid-template-columns: repeat(var(--nb, 4), minmax(0, 1fr)); gap: 0.25rem; }
.piece-carte {
  position: relative;
  min-height: 4.2rem;
  padding: 0.35rem 0.3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  text-align: center;
  background: rgb(15 17 32 / 0.55);
  border: 1px solid rgb(184 150 85 / 0.25);
  border-radius: 0.15rem;
}
.piece-nom {
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--texte);
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: anywhere;
}
.piece-role {
  font-family: var(--police-capitales);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--laiton-clair);
}
.piece-carte.danger { background: rgb(90 25 30 / 0.4); border-color: rgb(240 161 145 / 0.45); }
/* La pièce de la mission : elle brille */
.piece-carte.cible {
  background: radial-gradient(circle at 50% 40%, rgb(125 255 179 / 0.35), rgb(31 92 67 / 0.55));
  border: 2px solid var(--vert);
  box-shadow: 0 0 14px rgb(125 255 179 / 0.45);
  animation: appel 2.4s ease-in-out infinite;
}
.piece-carte.cible .piece-nom { color: #f4fff9; }
@keyframes appel { 50% { box-shadow: 0 0 22px 3px rgb(125 255 179 / 0.6); } }
/* La pièce où l'on se trouve : une petite flamme */
.piece-carte.ici::after {
  content: "";
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  width: 0.55rem;
  height: 0.8rem;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(circle at 50% 70%, #fffbe8 0 20%, #f2b35b 55%, transparent 72%);
  filter: drop-shadow(0 0 4px #f2b35b);
}
/* Pièce exclue : condamnée par des planches */
.piece-carte.condamnee {
  background:
    linear-gradient(35deg, transparent 44%, #4a3120 44% 56%, transparent 56%),
    linear-gradient(-35deg, transparent 44%, #3a2616 44% 56%, transparent 56%),
    rgb(10 8 14 / 0.8);
  border-color: transparent;
}
.piece-carte.condamnee .piece-nom { color: var(--texte-doux); opacity: 0.6; text-decoration: line-through; }
.ligne-de-terre {
  height: 0.55rem;
  margin: 0 -4%;
  background: linear-gradient(#2d4a2a 0 40%, #3a2a1a 40%);
  border-radius: 0.2rem;
}
/* Âmes dans les pièces (vision de la salle de contrôle) */
.piece-ames { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.15rem; }
.ame-vue { display: inline-grid; justify-items: center; gap: 0.05rem; }
.ame-vue .medaillon { width: 1.5rem; height: 1.8rem; border-width: 1.5px; }
.ame-nom { font-size: 0.6rem; font-weight: 700; color: var(--texte); max-width: 3.4rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.niveau-nom .ame-vue .medaillon { width: 1.3rem; height: 1.55rem; }
/* Téléphone : au-delà de 3 pièces, l'étage passe sur deux rangées plutôt que d'écraser les noms. */
@media (max-width: 47.99rem) {
  .pieces { grid-template-columns: repeat(auto-fit, minmax(4.6rem, 1fr)); }
  .piece-nom { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; }
}
@media (min-width: 48rem) {
  .piece-carte { min-height: 5rem; }
  .piece-nom { font-size: 0.8rem; }
}

/* === La lune : menu des pouvoirs, écran de l'envoûté [étape 9] === */
.voile-lune {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  align-items: end;
  justify-items: center;
  padding: 1rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
  background: rgb(8 6 16 / 0.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.feuille-lune {
  width: min(100%, 30rem);
  max-height: 88vh;
  overflow: auto;
  display: grid;
  gap: 0.9rem;
  padding: 1.2rem 1.1rem;
  background: linear-gradient(#1c1734, #120f24);
  border: 1px solid var(--violet);
  border-radius: 0.3rem;
  box-shadow: 0 0 40px rgb(195 163 255 / 0.25), inset 0 0 0 4px #1c1734, inset 0 0 0 5px rgb(195 163 255 / 0.3);
  animation: monte 0.3s ease both;
}
@keyframes monte { from { transform: translateY(20%); opacity: 0; } }
.carte-role.mini { min-height: 5.5rem; padding: 0.9rem; border-radius: 50% / 30%; }
.carte-role.mini .role-titre { font-size: 1.7rem; }
.pouvoirs { display: grid; gap: 0.6rem; }
.pouvoir { padding: 0.8rem 0.9rem; border: 1px solid var(--laiton-voile); border-radius: 0.2rem; background: rgb(15 17 32 / 0.6); display: grid; gap: 0.4rem; }
.pouvoir h3 { margin: 0; font-family: var(--police-titre); font-style: italic; font-size: 1.35rem; color: var(--laiton-clair); }
.pouvoir p { margin: 0; color: var(--texte-doux); font-size: 0.95rem; }
.pouvoir.sombre { border-color: rgb(195 163 255 / 0.45); }
.pouvoir.sombre h3 { color: var(--violet); }
.pouvoir.indisponible { opacity: 0.55; }
.ames-presentes { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ame-presente {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.8rem 0.35rem 0.35rem;
  font: inherit;
  font-weight: 700;
  color: var(--texte);
  background: var(--nuit);
  border: 1px solid var(--violet);
  border-radius: 999px;
  cursor: pointer;
}
.ame-presente.ici { color: var(--eclat); border-color: var(--eclat); box-shadow: 0 0 10px rgb(255 255 255 / 0.45); text-shadow: 0 0 6px rgb(255 255 255 / 0.6); }
.ame-presente.absente { opacity: 0.35; filter: grayscale(1); cursor: default; border-color: var(--bordure); }
.confirmation { display: grid; gap: 0.5rem; padding-top: 0.3rem; }
.confirmation p { color: var(--texte); font-weight: 700; }

.voile-envoute {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 1.5rem max(1rem, 6vw);
  background: radial-gradient(circle at 50% 35%, #3a1d5c, #0b0816 75%);
  animation: prise 1.2s ease both;
}
.voile-envoute > section { max-width: 28rem; }
.voile-envoute .titre { color: var(--violet); text-shadow: 0 0 22px rgb(195 163 255 / 0.6); }
.lune-envoute { margin: 0; font-size: 4rem; line-height: 1; color: var(--violet); text-shadow: 0 0 30px var(--violet); animation: battement-lune 2.4s ease-in-out infinite; }
@keyframes prise { from { opacity: 0; filter: blur(12px); } }
@keyframes battement-lune { 50% { transform: scale(1.12); } }
.allies-envoute { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; margin: 0; }
.allie { display: grid; justify-items: center; gap: 0.2rem; font-weight: 700; }

/* === Scanner de QR codes intégré [D-19] === */
.voile-scanner {
  position: fixed;
  inset: 0;
  z-index: 35;
  display: grid;
  grid-template-rows: 1fr auto auto;
  justify-items: center;
  gap: 1rem;
  padding: calc(1rem + env(safe-area-inset-top, 0px)) 1rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
  background: #05040a;
}
.voile-scanner video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.viseur { position: relative; align-self: center; width: min(70vw, 18rem); aspect-ratio: 1; box-shadow: 0 0 0 100vmax rgb(5 4 10 / 0.55); border-radius: 0.5rem; }
.viseur i { position: absolute; width: 18%; height: 18%; border: 4px solid var(--laiton-clair); }
.viseur i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.viseur i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.viseur i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.viseur i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.scanner-texte { position: relative; margin: 0; max-width: 26rem; text-align: center; font-family: var(--police-titre); font-style: italic; font-size: 1.25rem; color: var(--laiton-clair); text-shadow: 0 1px 6px #000; }
.scanner-texte.erreur { color: var(--danger); }
.voile-scanner .bouton { position: relative; max-width: 20rem; }
.voile-scanner.sans-camera .viseur { opacity: 0.25; }

/* === Événements de la maison (V2) === */
.annonce {
  position: fixed;
  left: 50%;
  top: calc(4.8rem + env(safe-area-inset-top, 0px));
  z-index: 32;
  width: min(calc(100% - 2rem), 30rem);
  translate: -50% 0;
  padding: 1rem 1.2rem;
  text-align: center;
  background: linear-gradient(#241c3c, #16122a);
  border: 1px solid var(--violet);
  border-radius: 0.3rem;
  box-shadow: 0 0 30px rgb(195 163 255 / 0.35), 0 14px 30px rgb(0 0 0 / 0.6);
  animation: annonce 0.5s ease both;
  cursor: pointer;
}
.annonce[data-kind="coupure"], .annonce[data-kind="apparition"], .annonce[data-kind="apparition-ratee"] { border-color: var(--danger); box-shadow: 0 0 30px rgb(240 161 145 / 0.35); }
.annonce[data-kind="accalmie"], .annonce[data-kind="courant-retabli"], .annonce[data-kind="apparition-reussie"] { border-color: var(--vert); box-shadow: 0 0 30px rgb(125 255 179 / 0.3); }
@keyframes annonce { from { opacity: 0; translate: -50% -30%; filter: blur(6px); } }
.annonce-titre { margin: 0; font-family: var(--police-titre); font-style: italic; font-weight: 600; font-size: 1.6rem; color: var(--laiton-clair); }
.annonce-texte { margin: 0.3rem 0 0; color: var(--texte); }

/* Coupure : tout devient noir, sauf la barre (lune, chrono) et les secours */
.voile-coupure {
  position: fixed;
  inset: 0;
  z-index: 9;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1rem;
  padding: 6rem 1.5rem 2rem;
  text-align: center;
  background: #020104;
  animation: noir 0.4s steps(3) both;
}
@keyframes noir { 0% { opacity: 0; } 30% { opacity: 1; } 45% { opacity: 0.2; } 100% { opacity: 1; } }
.coupure-titre { margin: 0; font-family: var(--police-titre); font-style: italic; font-size: 2rem; color: #6d5a7a; animation: grésille 3s linear infinite; }
@keyframes grésille { 0%, 92%, 100% { opacity: 1; } 94% { opacity: 0.3; } 96% { opacity: 0.8; } }
.coupure-texte { margin: 0; max-width: 24rem; color: #7a7290; }
.voile-coupure .bouton { max-width: 20rem; }
body.coupure .barre { filter: brightness(0.8); }
body.coupure .debug { z-index: 36; }

/* Murmure : un souffle sur un seul téléphone */
.voile-murmure { position: fixed; inset: 0; z-index: 33; display: grid; place-content: center; text-align: center; gap: 0.5rem; background: radial-gradient(circle, rgb(20 18 40 / 0.85), rgb(0 0 0 / 0.95)); animation: prise 1s ease both; pointer-events: none; }
.murmure-intro { margin: 0; color: var(--texte-doux); font-style: italic; }
.murmure-nom { margin: 0; font-family: var(--police-titre); font-style: italic; font-size: 2.6rem; color: #d8e6ff; text-shadow: 0 0 20px rgb(200 220 255 / 0.7); animation: souffle-nom 4.5s ease forwards; }
@keyframes souffle-nom { 0% { opacity: 0; letter-spacing: 0.4em; filter: blur(6px); } 30% { opacity: 1; letter-spacing: 0.05em; filter: none; } 100% { opacity: 0; filter: blur(4px); } }

/* Carte : pièce scellée (chaînes), pièce où l'apparition appelle */
.piece-carte.scellee {
  background:
    repeating-linear-gradient(45deg, rgb(184 150 85 / 0.35) 0 3px, transparent 3px 11px),
    repeating-linear-gradient(-45deg, rgb(184 150 85 / 0.35) 0 3px, transparent 3px 11px),
    rgb(10 8 14 / 0.75);
  border-color: var(--laiton);
}
.piece-carte.appel { border: 2px solid #e9f3ff; box-shadow: 0 0 18px rgb(220 235 255 / 0.7); animation: appel-fantome 1.2s ease-in-out infinite; }
@keyframes appel-fantome { 50% { box-shadow: 0 0 28px 6px rgb(220 235 255 / 0.9); } }

/* --- Événements qui durent --- */
/* Horloge folle */
.chrono.folle { color: #d9a0ff; animation: affole 0.35s steps(2) infinite; }
@keyframes affole { 50% { transform: translateX(1px) skewX(-8deg); opacity: 0.7; } }
/* Main de l'au-delà : les mini-jeux en miroir, avec une lueur glacée */
body.miroir #zone-minijeu { transform: scaleX(-1); filter: hue-rotate(160deg) saturate(0.7); transition: transform 0.6s ease; }
/* Chandelle mourante */
.voile-chandelle { position: fixed; inset: 0; z-index: 31; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 60%, rgb(0 0 0 / 0.55), #000 70%); transition: opacity 0.25s linear; }
/* Murmure : le nom tremble */
.murmure-nom { animation: souffle-nom 6s ease forwards, tremble 0.12s linear infinite; }
@keyframes tremble { 50% { translate: 0.6px -0.4px; } }
/* Explosion de la cuve : tout l'écran tremble */
body.secousse { animation: secousse 0.7s ease-out; }
@keyframes secousse { 10%, 50% { transform: translate(-6px, 3px); } 30%, 70% { transform: translate(6px, -3px); } 90% { transform: translate(-2px, 1px); } }

/* Admin : actions sur un joueur, QR de reprise [D-67] */
.actions-joueur { margin-left: auto; display: flex; gap: 0.4rem; }
.bouton-icone { min-width: 2.6rem; min-height: 2.6rem; font: inherit; color: var(--texte); background: var(--nuit); border: 1px solid var(--laiton-voile); border-radius: 0.3rem; cursor: pointer; }
.bouton-icone:hover { border-color: var(--laiton); }
.qr-reprise { width: min(16rem, 100%); aspect-ratio: 1; background: #fff; padding: 0.5rem; border-radius: 0.3rem; margin-inline: auto; }

/* Cartes cachées, objectifs de l'hôte [D-73] */
.objectifs-hote { margin: 0.4rem 0 0; padding-left: 1.2rem; color: var(--texte); }
.objectifs-hote li { margin-bottom: 0.3rem; }
.debug-cartes { justify-content: center; flex-wrap: wrap; gap: 0.3rem; }

/* Coupure en chaîne [D-74] */
.chaine-reparation { display: grid; gap: 0.3rem; max-width: 22rem; text-align: left; }
.maillon { margin: 0; padding: 0.35rem 0.7rem; border-radius: 0.4rem; color: #7a7290; border: 1px solid rgb(122 114 144 / 0.3); }
.maillon.en-cours { color: #e2c98f; border-color: #b89655; }
.maillon.faite { color: #7dffb3; }
.maillon.moi { font-weight: 700; }
.code-a-crier { margin: 0; padding: 0.6rem 1rem; border-radius: 0.5rem; font: 600 1.6rem "Cormorant Garamond", serif; color: #fff4c4; background: rgb(184 150 85 / 0.2); border: 1px solid #b89655; }

/* Trouble en duo [D-76] : 250 ms, sans texte ni son. */
.zone-minijeu.trouble-glisse { transform: translateX(7px) skewX(-3deg); filter: blur(0.6px); }
.zone-minijeu.trouble-violet { filter: hue-rotate(230deg) saturate(2.2); }
.zone-minijeu.trouble-negatif { filter: invert(1) hue-rotate(180deg); }

/* === Lanterne, purification, libération, séance [D-51, D-77] === */
.voile-purification, .voile-libere {
  position: fixed; inset: 0; z-index: 41; display: grid; place-items: center; padding: 1.5rem max(1rem, 6vw);
  background: radial-gradient(circle at 50% 30%, #4a3a14, #0b0816 75%); animation: prise 0.8s ease both;
}
.voile-libere { background: radial-gradient(circle at 50% 30%, #1f5c43, #0b0816 75%); }
.voile-purification > section, .voile-libere > section { max-width: 28rem; }
.voile-purification .titre { color: var(--laiton-clair); text-shadow: 0 0 22px rgb(242 201 107 / 0.6); }
.voile-libere .titre { color: var(--vert); text-shadow: 0 0 22px rgb(125 255 179 / 0.5); }
.lanterne-purification, .soleil-libere { margin: 0; font-size: 3.6rem; line-height: 1; animation: battement-lune 2.4s ease-in-out infinite; }
.soleil-libere { color: var(--vert-clair); text-shadow: 0 0 30px var(--vert); }
.question-purification { margin: 0; font-weight: 700; font-size: 1.15rem; }
.rangee-boutons { display: flex; gap: 0.8rem; justify-content: center; }
.rangee-boutons .bouton { min-width: 7rem; }
.geste-lanterne { margin: 0.4rem 0 0; padding: 0.6rem 0.8rem; border-left: 3px solid var(--laiton); background: rgb(184 150 85 / 0.12); font-style: italic; }
.seance { border-color: var(--violet); box-shadow: 0 0 18px rgb(195 163 255 / 0.25); }
.seance .lieu-nom { color: var(--violet); }
.ame-presente.choisie { outline: 3px solid var(--violet); outline-offset: 2px; }
.ame-presente.personne { font-style: italic; }

/* === Sabotages [D-78] === */
.choix-sabotage { display: grid; gap: 0.5rem; }
.bouton.sabotage { display: grid; gap: 0.15rem; text-align: left; }
.bouton.sabotage small { font-family: var(--police-texte); font-size: 0.8rem; text-transform: none; letter-spacing: 0; opacity: 0.8; }
.barre-progression.brouillard { position: relative; background: repeating-linear-gradient(90deg, #3a3d52 0 12px, #2c2f44 12px 24px); animation: brume-barre 3s linear infinite; }
@keyframes brume-barre { to { background-position: 48px 0; } }

/* Difficulté dans l'admin [D-81] */
.choix-difficulte { display: grid; gap: 0.4rem; }
.grille-personnalise { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.6rem; }
.grille-personnalise input, .grille-personnalise select { width: 100%; }

/* Chronologie de la révélation finale [D-82] */
.chronologie { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.45rem; }
.moment { display: grid; grid-template-columns: 3.4rem 1fr; gap: 0.6rem; align-items: baseline; }
.heure-moment { font-variant-numeric: tabular-nums; color: var(--laiton-clair); font-family: var(--police-capitales); }
.moment-possession, .moment-envoutement, .moment-sabotage, .moment-ame-relogee { color: var(--violet); }
.moment-purification, .moment-seance-terminee, .moment-ame-detruite, .moment-lanterne-trouvee { color: var(--vert-clair); }

/* Éditeur de maison [D-85] */
#editeur summary { cursor: pointer; }
.etage-editeur { display: grid; gap: 0.4rem; padding: 0.6rem; border: 1px solid var(--bordure); border-radius: 0.4rem; }
.entete-etage-editeur { display: grid; grid-template-columns: minmax(0, 1fr) 4.2rem auto auto; gap: 0.4rem; align-items: center; }
.pieces-editeur { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.3rem; min-height: 2.4rem; }
.piece-editeur { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.4rem; align-items: center; background: var(--nuit-plus-claire); border-radius: 0.3rem; padding: 0.2rem 0.4rem; }
.piece-editeur .nouvelle-piece { grid-column: 2 / -1; color: var(--laiton-clair); font-size: 0.75rem; }
.poignee-piece { cursor: grab; font-size: 1.3rem; padding: 0 0.3rem; touch-action: none; color: var(--texte-doux); }
.petit-bouton { min-height: 2.4rem; padding: 0.2rem 0.6rem; width: auto; }
.nom-etage, .numero-etage, .piece-editeur input { width: 100%; min-width: 0; }
.entete-etage-editeur { grid-template-columns: 4.6rem 1fr auto; }
.entete-etage-editeur .nom-etage { grid-column: 1 / -1; font-weight: 700; }

/* Soirée test [D-100] : le bouton « signaler » (discret, au pouce gauche) et sa fenêtre. */
.bouton-signaler {
  position: fixed;
  left: calc(0.6rem + env(safe-area-inset-left, 0px));
  bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  border: 1px solid var(--laiton-voile);
  background: rgb(15 17 32 / 0.85);
  font-size: 1.3rem;
  opacity: 0.75;
  cursor: pointer;
}
.voile-signalement {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgb(5 6 14 / 0.8);
}
.voile-signalement .carte { width: min(100%, var(--largeur-page)); }
.voile-signalement textarea, #avis textarea { font: inherit; color: var(--texte); background: var(--nuit); border: 1px solid var(--laiton-voile); border-radius: 0.2rem; padding: 0.6rem; width: 100%; }
.avis-notes { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.avis-notes label { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.4rem 0.7rem; border: 1px solid var(--laiton-voile); border-radius: 0.2rem; }

/* Atelier de soirée test [D-101] */
.atelier-fiche { border-color: var(--violet); }
.atelier-texte { margin: 0; font-size: 1.15rem; font-weight: 600; }
.atelier-fiche .rangee { display: flex; gap: 0.5rem; }
.atelier-fiche .rangee .bouton { flex: 1; }