/* Boo Brigade. Quatre tables, un decor de salle de classe : papier froisse
   (depart), cahier Seyes, tableau noir, pupitre en bois. Chaque table fixe ses
   couleurs, sa police et sa texture sous [data-table="..."] ; le reste de la
   feuille ne lit que ces variables. Les cartes, elles, ne changent pas : les
   photos portent la couleur. Textures generees en SVG, aucune image a fournir. */

@font-face {
  font-family: "Caveat"; src: url("polices/caveat.woff2") format("woff2");
  font-weight: 400 700; font-display: swap; size-adjust: 118%;
}
@font-face {
  font-family: "Special Elite"; src: url("polices/special-elite.woff2") format("woff2");
  font-weight: 400; font-display: swap; size-adjust: 92%;
}

:root {
  --or: #e6b450;
  --feutre: #e3342c;
  --or-fonce: #b8882c;
  --atk: #ff7a59;
  --def: #74b6f0;
  --soin: #62d394;
  --affaiblir: #b896f5;
  --fragiliser: #f59ac0;
  --bouclier: #79e3e8;
  --rayon: 10px;
  --manuscrit: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  --machine: "Special Elite", "Courier New", monospace;
  /* Marge rouge des cahiers, et retrait du contenu pour ne pas la chevaucher. */
  --marge-x: 56px;
  --retrait: 32px;
}
:root[data-table="froisse"], :root[data-table="seyes"] { --retrait: 76px; }
@media (max-width: 640px) {
  :root { --marge-x: 8px; }
  :root[data-table="froisse"], :root[data-table="seyes"] { --retrait: 18px; }
}

/* --------------------------------------------------------------- tables */

/* Papier froisse : crayon a papier, stylo bille bleu, correction au rouge. */
:root, [data-table="froisse"] {
  color-scheme: light;
  --fond: #ebe3d2;
  --ligne: 108 138 196;
  --fond-image:
    linear-gradient(90deg, transparent var(--marge-x), rgb(214 84 76 / 0.32) var(--marge-x) calc(var(--marge-x) + 1.5px), transparent calc(var(--marge-x) + 1.5px)),
    repeating-linear-gradient(transparent 0 31px, rgb(var(--ligne) / 0.2) 31px 32px),
    repeating-linear-gradient(transparent 0 7px, rgb(var(--ligne) / 0.1) 7px 8px),
    repeating-linear-gradient(90deg, transparent 0 31px, rgb(var(--ligne) / 0.12) 31px 32px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1600' height='1000' viewBox='0 0 1600 1000' preserveAspectRatio='xMidYMid slice'><filter id='f' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.0075' numOctaves='5' seed='7'/><feDiffuseLighting lighting-color='%23f4eddd' surfaceScale='3.4' diffuseConstant='1.2'><feDistantLight azimuth='225' elevation='55'/></feDiffuseLighting></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>");
  --fond-taille: 100% 100%, auto, auto, auto, cover;
  --fond-2: rgb(255 253 248 / 0.72);
  --surface: rgb(255 251 242 / 0.6);
  --surface-2: rgb(253 249 240 / 0.94);
  --bord: rgb(70 58 36 / 0.22);
  --bord-fort: rgb(70 58 36 / 0.42);
  --trait-leger: rgb(70 58 36 / 0.3);
  --texte: #25272e;
  --texte-2: #575a62;
  --texte-3: #85878b;
  --accent: #2d4a8a;
  --sur-accent: #ffffff;
  --danger: #c0392b;
  --ok: #2f7d4f;
  --titre: var(--manuscrit);
  --titre-graisse: 700;
  --voile: rgb(236 229 213 / 0.95);
  --ombre: 0 10px 28px rgb(60 45 20 / 0.24);
  --cadre: transparent;
  --cadre-ep: 0px;
  /* Voyage */
  --v-police: var(--manuscrit);
  --v-encre: #2b2d33;
  --v-doux: #6b6d72;
  --v-actuel: #c0392b;
  --v-s: 55%;
  --v-l: 32%;
  --v-lavis: 0.09;
  --v-fond: #ece5d5;
  --v-voile: rgb(238 231 216 / 0.97);
  --p-trait: #3f3f42;
  --p-sil: url(#p-hachures);
  --p-o1: 0.3;
  --p-o2: 0.55;
  --p-o3: 0.72;
  --p-aplat-s: 25%;
  --p-aplat-l: 62%;
  --p-aplat-op: 0.35;
  --p-galet: #8d8a80;
  --p-neige: rgb(252 249 241 / 0.92);
  --p-soleil-op: 0.15;
  --p-brume: #ffffff;
  --p-luciole: #d9a520;
}

/* Cahier Seyes : papier net, encre bleue, marge rouge. */
[data-table="seyes"] {
  color-scheme: light;
  --fond: #fbfaf5;
  --ligne: 110 140 205;
  --fond-image:
    linear-gradient(90deg, transparent var(--marge-x), rgb(214 84 76 / 0.6) var(--marge-x) calc(var(--marge-x) + 1.5px), transparent calc(var(--marge-x) + 1.5px)),
    repeating-linear-gradient(transparent 0 31px, rgb(var(--ligne) / 0.42) 31px 32px),
    repeating-linear-gradient(transparent 0 7px, rgb(var(--ligne) / 0.2) 7px 8px),
    repeating-linear-gradient(90deg, transparent 0 31px, rgb(var(--ligne) / 0.3) 31px 32px);
  --fond-taille: 100% 100%, auto, auto, auto;
  --fond-2: rgb(255 255 255 / 0.8);
  --surface: rgb(255 255 255 / 0.62);
  --surface-2: rgb(252 252 248 / 0.96);
  --bord: rgb(31 63 149 / 0.2);
  --bord-fort: rgb(31 63 149 / 0.4);
  --trait-leger: rgb(31 63 149 / 0.3);
  --texte: #1f2a44;
  --texte-2: #4f5b78;
  --texte-3: #8590aa;
  --accent: #1f3f95;
  --sur-accent: #ffffff;
  --danger: #c9302c;
  --ok: #2c7a4b;
  --titre: var(--manuscrit);
  --titre-graisse: 700;
  --voile: rgb(250 249 244 / 0.95);
  --ombre: 0 10px 28px rgb(31 42 68 / 0.18);
  --cadre: transparent;
  --cadre-ep: 0px;
  --v-police: var(--manuscrit);
  --v-encre: #1f2a4f;
  --v-doux: #56618a;
  --v-actuel: #d9534f;
  --v-s: 55%;
  --v-l: 33%;
  --v-lavis: 0.06;
  --v-fond: #fbfaf5;
  --v-voile: rgb(251 250 245 / 0.97);
  --p-trait: #2a4a9a;
  --p-sil: #fbfaf5;
  --p-o1: 0.3;
  --p-o2: 0.6;
  --p-o3: 0.75;
  --p-aplat-s: 45%;
  --p-aplat-l: 75%;
  --p-aplat-op: 0.3;
  --p-galet: #8fa0c8;
  --p-neige: rgb(255 255 255 / 0.95);
  --p-soleil-op: 0.12;
  --p-brume: #ffffff;
  --p-luciole: #e0a526;
}

/* Tableau noir : ardoise verte, craie, cadre de bois. */
[data-table="tableau"] {
  color-scheme: dark;
  --fond: #2f4a3b;
  --fond-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='f' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='3' seed='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .3 0 0 0 -.1'/></filter><filter id='g' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.9' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .08 0'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
  --fond-taille: 600px 600px;
  --fond-2: rgb(10 22 16 / 0.35);
  --surface: rgb(241 239 230 / 0.06);
  --surface-2: rgb(30 48 38 / 0.94);
  --bord: rgb(241 239 230 / 0.22);
  --bord-fort: rgb(241 239 230 / 0.45);
  --trait-leger: rgb(241 239 230 / 0.22);
  --texte: #f1efe6;
  --texte-2: #c5cec5;
  --texte-3: #93a397;
  --accent: #f2d16b;
  --sur-accent: #2b2a17;
  --danger: #f4a09a;
  --ok: #a8e0b5;
  --titre: var(--manuscrit);
  --titre-graisse: 600;
  --voile: rgb(34 54 43 / 0.96);
  --ombre: 0 10px 30px rgb(0 0 0 / 0.4);
  --cadre: #7a4e2c;
  --cadre-ep: 10px;
  --v-police: var(--manuscrit);
  --v-encre: #f1efe6;
  --v-doux: #b9c4ba;
  --v-actuel: #f2d16b;
  --v-s: 60%;
  --v-l: 78%;
  --v-lavis: 0.1;
  --v-fond: #2f4a3b;
  --v-voile: rgb(40 62 50 / 0.97);
  --p-trait: #efece0;
  --p-sil: rgb(239 236 224 / 0.05);
  --p-o1: 0.22;
  --p-o2: 0.42;
  --p-o3: 0.6;
  --p-aplat-s: 25%;
  --p-aplat-l: 82%;
  --p-aplat-op: 0.12;
  --p-galet: rgb(239 236 224 / 0.5);
  --p-neige: rgb(255 255 255 / 0.3);
  --p-soleil-op: 0.1;
  --p-brume: #ffffff;
  --p-luciole: #f2d16b;
}

/* Pupitre en bois : bois sombre, machine a ecrire. Le Voyage se dessine sur
   une feuille posee dessus (voir plus bas, section voyage). */
[data-table="pupitre"] {
  color-scheme: dark;
  --fond: #6b4527;
  --fond-image:
    repeating-linear-gradient(transparent 0 238px, rgb(25 12 4 / 0.55) 238px 240px, rgb(255 220 170 / 0.07) 240px 241px, transparent 241px 280px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='600'><filter id='f' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.0025 .055' numOctaves='4' seed='5' stitchTiles='stitch'/><feColorMatrix values='.42 0 0 0 .24 .27 0 0 0 .14 .13 0 0 0 .06 0 0 0 0 1'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>");
  --fond-taille: auto, 1200px 600px;
  --fond-2: rgb(20 10 3 / 0.35);
  --surface: rgb(30 16 6 / 0.36);
  --surface-2: rgb(44 26 12 / 0.95);
  --bord: rgb(255 225 180 / 0.2);
  --bord-fort: rgb(255 225 180 / 0.42);
  --trait-leger: rgb(255 225 180 / 0.24);
  --texte: #f6ead6;
  --texte-2: #dcc7a6;
  --texte-3: #b0946f;
  --accent: #e6b450;
  --sur-accent: #1b1406;
  --danger: #ff8a7a;
  --ok: #9fe0b0;
  --titre: var(--machine);
  --titre-graisse: 400;
  --voile: rgb(46 27 12 / 0.96);
  --ombre: 0 12px 32px rgb(0 0 0 / 0.5);
  --cadre: transparent;
  --cadre-ep: 0px;
  --v-police: var(--manuscrit);
  --v-encre: #2b2d33;
  --v-doux: #6b6d72;
  --v-actuel: #c0392b;
  --v-s: 55%;
  --v-l: 32%;
  --v-lavis: 0.07;
  --v-fond: #f7f2e4;
  --v-voile: rgb(247 242 228 / 0.97);
  --p-trait: #3f3f42;
  --p-sil: url(#p-hachures);
  --p-o1: 0.3;
  --p-o2: 0.55;
  --p-o3: 0.72;
  --p-aplat-s: 25%;
  --p-aplat-l: 62%;
  --p-aplat-op: 0.32;
  --p-galet: #8d8a80;
  --p-neige: rgb(252 249 241 / 0.92);
  --p-soleil-op: 0.15;
  --p-brume: #ffffff;
  --p-luciole: #d9a520;
}

/* Nuit noire (bloc 6, ouverte par un voyage accompli) : papier presque noir
   aux bords brules, un seul rehaut vieux rose. Les monstres y deviennent des
   taches d'encre (dessins-nuit.js) ; les photos du joueur restent intactes. */
[data-table="nuit"] {
  color-scheme: dark;
  --fond: #121016;
  --fond-image:
    radial-gradient(ellipse at 50% 45%, transparent 52%, rgb(58 36 20 / 0.42) 82%, rgb(10 7 9 / 0.92) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='f' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.008' numOctaves='3' seed='9' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .85 0 0 0 0 .62 0 0 0 0 .66 .22 0 0 0 -.08'/></filter><filter id='g' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.9' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
  --fond-taille: 100% 100%, 600px 600px;
  --fond-2: rgb(8 6 9 / 0.4);
  --surface: rgb(236 226 228 / 0.05);
  --surface-2: rgb(28 22 27 / 0.95);
  --bord: rgb(217 160 168 / 0.22);
  --bord-fort: rgb(217 160 168 / 0.45);
  --trait-leger: rgb(236 226 228 / 0.2);
  --texte: #ece2e4;
  --texte-2: #c4b2b7;
  --texte-3: #8e7d82;
  --accent: #d9a0a8;
  --sur-accent: #1a1013;
  --danger: #f08a8a;
  --ok: #a8d8b0;
  --titre: var(--manuscrit);
  --titre-graisse: 700;
  --voile: rgb(18 16 22 / 0.96);
  --ombre: 0 12px 34px rgb(0 0 0 / 0.6);
  --cadre: transparent;
  --cadre-ep: 0px;
  --v-police: var(--manuscrit);
  --v-encre: #ece2e4;
  --v-doux: #a8979c;
  --v-actuel: #d9a0a8;
  --v-s: 30%;
  --v-l: 70%;
  --v-lavis: 0.08;
  --v-fond: #161215;
  --v-voile: rgb(22 18 21 / 0.97);
  --p-trait: #d8cdd0;
  --p-sil: rgb(236 226 228 / 0.04);
  --p-o1: 0.2;
  --p-o2: 0.38;
  --p-o3: 0.55;
  --p-aplat-s: 15%;
  --p-aplat-l: 70%;
  --p-aplat-op: 0.1;
  --p-galet: rgb(217 160 168 / 0.5);
  --p-neige: rgb(255 255 255 / 0.2);
  --p-soleil-op: 0.06;
  --p-brume: #d9c8cc;
  --p-luciole: #d9a0a8;
}

:root { --accent-lavis: color-mix(in srgb, var(--accent) 11%, transparent); }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background-color: var(--fond);
  background-image: var(--fond-image);
  background-size: var(--fond-taille);
  background-attachment: fixed;
  color: var(--texte);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* Le cadre de bois du tableau noir. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 150; pointer-events: none;
  border: var(--cadre-ep) solid var(--cadre);
  box-shadow: inset 0 0 0 calc(var(--cadre-ep) / 10) rgb(0 0 0 / 0.35), inset 0 6px 16px rgb(0 0 0 / 0.25);
}
:root:not([data-table="tableau"]) body::before { display: none; }
h1, h2, h3 { font-family: var(--titre); font-weight: var(--titre-graisse); letter-spacing: 0; margin: 0; }
h1 { font-size: 30px; }
h2 { font-size: 22px; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }

/* Apercu d'une table : il porte son propre data-table, donc sa texture. */
.echantillon {
  display: block; aspect-ratio: 16 / 10; border-radius: 7px;
  background-color: var(--fond); background-image: var(--fond-image); background-size: var(--fond-taille);
  border: calc(var(--cadre-ep) / 2.5) solid var(--cadre);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.14);
}
.echantillon.mini { width: 24px; height: 17px; aspect-ratio: auto; border-radius: 4px; }
.echantillon.grand { width: min(380px, 72vw); border-radius: 12px; box-shadow: var(--ombre), inset 0 0 0 1px rgb(0 0 0 / 0.14); }
.echantillon.verrou { opacity: 0.5; }

/* --------------------------------------------------------------- barre */

.barre {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 28px;
  height: 52px; padding: 0 24px 0 max(24px, calc(var(--retrait) - 8px));
  background: color-mix(in srgb, var(--fond) 80%, transparent); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bord);
}
:root[data-table="tableau"] .barre { top: var(--cadre-ep); }
.marque { font: var(--titre-graisse) 24px/1 var(--titre); color: var(--accent); white-space: nowrap; text-decoration: none; }
/* Navigation : des intercalaires de cahier qui pendent du haut de la page. */
.onglets { display: flex; gap: 5px; align-self: flex-start; overflow-x: auto; scrollbar-width: none; }
.onglets a {
  --onglet: #e8e2d4;
  flex: none; padding: 12px 13px 6px; border-radius: 0 0 9px 9px; text-decoration: none; white-space: nowrap;
  font: 700 19px/1 var(--manuscrit); color: #25272e; background: var(--onglet);
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.18); transition: padding 0.15s;
}
.onglets a:hover { padding-top: 16px; }
.onglets a.actif { padding-top: 19px; box-shadow: 0 3px 7px rgb(0 0 0 / 0.26); }
.onglet-court { display: none; }
.onglets a[data-ecran="jouer"] { --onglet: #f7d774; }
.onglets a[data-ecran="voyage"] { --onglet: #a8d5a2; }
.onglets a[data-ecran="atelier"] { --onglet: #f4b6c2; }
.onglets a[data-ecran="decks"] { --onglet: #a9c8ef; }
.onglets a[data-ecran="regles"] { --onglet: #d9d4c7; }
body.en-partie .barre { display: none; }

/* choix de la table */
.tables { position: relative; margin-left: auto; flex: none; }
.tables-bouton { padding: 6px 10px; font-weight: 500; }
.barre-son { margin-left: auto; flex: none; padding: 6px 8px; }
.barre-son svg { width: 18px; height: 18px; }
.barre-son + .tables { margin-left: 4px; }
.tables-bouton:hover { background: var(--surface); }
.tables-panneau {
  display: none; position: absolute; right: 0; top: calc(100% + 8px); z-index: 30;
  width: min(360px, 92vw); padding: 12px; grid-template-columns: 1fr 1fr; gap: 10px;
  background: linear-gradient(var(--surface-2), var(--surface-2)), var(--fond);
  border: 1px solid var(--bord); border-radius: 12px; box-shadow: var(--ombre);
}
.tables.ouvert .tables-panneau { display: grid; }
.tables-tuile {
  flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 5px;
  padding: 8px; text-align: left; font-weight: 400; background: transparent;
}
.tables-tuile b { font-weight: 600; font-size: 13.5px; margin-top: 3px; }
.tables-tuile small { font-size: 12px; line-height: 1.3; color: var(--texte-3); }
.tables-tuile.choisie { border-color: var(--accent); background: var(--accent-lavis); }
.tables-tuile:disabled { opacity: 1; cursor: default; }
.tables-langue { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding-top: 10px; border-top: 1px solid var(--bord); }
.tables-langue b { font-weight: 600; font-size: 13.5px; }
.tables-langue div { display: flex; flex-wrap: wrap; gap: 4px; }
.tables-langue button { padding: 4px 8px; font-size: 13px; font-weight: 500; background: transparent; }
.tables-langue button.choisie { border-color: var(--accent); background: var(--accent-lavis); }
.tables-langue button:disabled { opacity: 0.45; cursor: default; }

main { min-height: calc(100vh - 52px); }
.ecran { display: none; padding: 28px 32px 60px var(--retrait); max-width: 1400px; margin: 0 auto; }
.ecran.visible { display: block; }
#ecran-partie { padding: 0; max-width: none; position: relative; min-height: 100vh; }
body.en-partie { overflow: hidden; }
body.en-partie main { min-height: 100vh; }

.entete { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.sous { color: var(--texte-2); margin: 4px 0 0; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }

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

.bouton, button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 16px; border-radius: 9px; border: 1px solid var(--bord);
  background: var(--surface); cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.1s;
  font-weight: 550; text-decoration: none;
}
.bouton:hover, button:hover { background: var(--surface-2); border-color: var(--bord-fort); }
.bouton:active, button:active { transform: translateY(1px); }
.principal { background: var(--accent); border-color: var(--accent); color: var(--sur-accent); }
.principal:hover { background: color-mix(in srgb, var(--accent) 86%, white); border-color: color-mix(in srgb, var(--accent) 86%, white); }
.discret { background: transparent; border-color: transparent; color: var(--texte-2); }
.danger { color: var(--danger); }
button:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
button:focus-visible, .bouton:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
input[type="text"], select {
  background: var(--fond-2); border: 1px solid var(--bord); border-radius: 8px; padding: 9px 12px; width: 100%;
}

.ico { width: 1em; height: 1em; flex: none; }

/* ---------------------------------------------------------------- carte */

.carte {
  position: relative; width: 100%; aspect-ratio: 5 / 7;
  container-type: inline-size;
  border-radius: 5.5% / 3.9%;
  overflow: hidden; background: #0b0c0e;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.07);
  user-select: none; -webkit-user-select: none;
}
.carte-photo {
  position: absolute; inset: 0;
  background-repeat: no-repeat; background-color: #16181c;
  display: grid; place-items: center;
}
.carte-initiale {
  font: 700 48cqw/1 Georgia, "Times New Roman", serif; color: rgba(255, 255, 255, 0.14);
  text-shadow: 0 2cqw 6cqw rgba(0, 0, 0, 0.3);
}
.pastille {
  position: absolute; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 1.2cqw;
  height: 16cqw; min-width: 16cqw; padding: 0 2.6cqw;
  border-radius: 8cqw;
  font: 750 10cqw/1 system-ui, sans-serif; color: #fff;
  background: rgba(10, 11, 14, 0.74);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  box-shadow: 0 0.6cqw 2cqw rgba(0, 0, 0, 0.4);
}
.pastille .ico { width: 8.5cqw; height: 8.5cqw; }
.pastille b { font-weight: 750; }
.p-cout {
  top: 3.5cqw; left: 3.5cqw; padding: 0;
  background: radial-gradient(circle at 35% 30%, #ffe3a1, var(--or) 55%, var(--or-fonce));
  color: #241904; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}
.p-effet { top: 3.5cqw; right: 3.5cqw; padding: 0; }
.p-effet .ico { width: 9.5cqw; height: 9.5cqw; }
.p-atk { bottom: 3.5cqw; left: 3.5cqw; }
.p-atk .ico { color: var(--atk); }
.p-def { bottom: 3.5cqw; right: 3.5cqw; }
.p-def .ico { color: var(--def); }
.p-def.blesse { background: rgba(120, 18, 18, 0.82); }
.p-atk.baisse b { color: var(--affaiblir); }
.e-soin { color: var(--soin); }
.e-affaiblir { color: var(--affaiblir); }
.e-fragiliser { color: var(--fragiliser); }
.e-bouclier { color: var(--bouclier); }
.carte-nom {
  position: absolute; z-index: 1; left: 50%; bottom: 23cqw; transform: translateX(-50%);
  max-width: 88%; padding: 1.2cqw 3.5cqw; border-radius: 3cqw;
  font: 600 7cqw/1.25 system-ui, sans-serif; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: rgba(10, 11, 14, 0.7); opacity: 0; transition: opacity 0.15s;
}
.carte-nom:empty { display: none; }
.carte.protegee { box-shadow: 0 0 0 2px var(--bouclier), 0 0 22px rgba(121, 227, 232, 0.55), 0 6px 18px rgba(0, 0, 0, 0.5); }
.carte.protegee::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(121, 227, 232, 0.22));
}
.carte .silhouette { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.3; }
.carte.adverse { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05); }
/* Ameliorations du Voyage, au feutre rouge comme par un enfant : l'ancien
   chiffre barre, le nouveau ecrit au-dessus, a cote de la pastille. */
/* Le chiffre au feutre se place par rapport a la pastille entiere, pas au seul chiffre. */
.pastille b.feutre { position: static; }
.feutre s { position: relative; text-decoration: none; opacity: 0.75; }
.feutre s::after {
  content: ""; position: absolute; left: -30%; right: -30%; top: 46%; height: 1.8cqw;
  border-radius: 1cqw; background: var(--feutre); transform: rotate(-24deg);
}
.feutre i {
  position: absolute; left: 62%; top: -115%; transform: rotate(-10deg); pointer-events: none;
  font: 700 24cqw/1 var(--manuscrit); color: var(--feutre);
  text-shadow: 0 0 0.5cqw #fff, 0 0 0.5cqw #fff, 0 0 1cqw #fff;
}
/* A droite, le chiffre s'ecrit vers l'interieur de la carte : sinon le bord le coupe (un 5 rogne ressemblait a un 1). */
.p-def .feutre i { left: auto; right: 62%; transform: rotate(8deg); }
.p-effet.plus { box-shadow: 0 0 0 0.8cqw var(--feutre), 0 0.6cqw 2cqw rgba(0, 0, 0, 0.4); }
/* L'ecusson cousu des cartes veteranes. */
.carte .ecusson {
  position: absolute; z-index: 4; left: 3cqw; top: 20cqw; width: 27cqw; height: 27cqw; border-radius: 50%;
  display: grid; place-items: center; background: #2f6a4e; transform: rotate(-10deg);
  box-shadow: 0 0.6cqw 1.6cqw rgb(0 0 0 / 0.45);
}
.carte .ecusson::before { content: ""; position: absolute; inset: 1.6cqw; border-radius: 50%; border: 0.7cqw dashed #f3e2b0; }
.carte .ecusson svg { width: 14cqw; height: 14cqw; fill: #f2c94c; stroke: #8a6a22; stroke-width: 0.6; }
/* Carte d'ami : un petit tampon rouge, « de Leo ». */
.carte .tampon-ami {
  position: absolute; z-index: 4; right: 5cqw; bottom: 26cqw; transform: rotate(-12deg); pointer-events: none;
  padding: 0.6cqw 2.4cqw; border: 0.8cqw solid #c0392b; border-radius: 2cqw; max-width: 60%;
  font: 700 7.5cqw/1.05 var(--manuscrit); color: #c0392b; background: rgb(255 255 255 / 0.75);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.carte-bandeau small { display: block; margin-top: 0.4cqw; font: 700 5.4cqw/1.1 var(--manuscrit); color: #c0392b; }

/* Offrir et recevoir une carte : une feuille de cahier posee sur la page. */
.cadeau-voile { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgb(30 28 24 / 0.55); }
.cadeau-feuille {
  width: min(560px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; display: grid; grid-template-columns: 180px 1fr; gap: 22px; align-items: center;
  padding: 26px 28px 22px; border-radius: 6px; color: #25272e; box-shadow: 0 18px 50px rgb(0 0 0 / 0.35);
  background: repeating-linear-gradient(#fffdf7 0 27px, #dfe7f1 27px 28px);
}
.cadeau-feuille h2 { grid-column: 1 / -1; margin: 0; font: 700 34px/1.05 var(--manuscrit); color: #25272e; }
.cadeau-carte { transform: rotate(-4deg); }
.cadeau-carte .carte { width: 180px; }
.cadeau-champ { display: grid; gap: 6px; }
.cadeau-champ label { font: 700 20px var(--manuscrit); }
.cadeau-champ input { font: 600 18px system-ui, sans-serif; padding: 8px 10px; border: 1px solid #c9c2b2; border-radius: 6px; background: #fff; color: #25272e; }
.cadeau-note { margin: 12px 0 0; font-size: 14px; line-height: 1.45; color: #5b5a55; }
.cadeau-boutons { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 10px; }
.cadeau-feuille.recevoir { width: min(420px, 100%); grid-template-columns: 1fr; justify-items: center; text-align: center; }
.cadeau-feuille.recevoir .cadeau-carte .carte { width: 200px; }
.cadeau-feuille.recevoir .cadeau-note { margin: 0; }
.cadeau-feuille.recevoir .cadeau-boutons { justify-content: center; }
.cadeau-sous { margin: -12px 0 0; font: 20px var(--manuscrit); color: #5b5a55; }
@media (max-width: 560px) {
  .cadeau-feuille { grid-template-columns: 1fr; justify-items: center; padding: 20px 18px 18px; }
  .cadeau-feuille h2 { font-size: 28px; text-align: center; }
  .cadeau-feuille > div:not(.cadeau-carte):not(.cadeau-boutons) { width: 100%; }
  .cadeau-carte .carte { width: 150px; }
}
/* Le bloc « Envoyer a quelqu'un » de l'editeur, au-dessus du pied. */
.pied-editeur { flex-wrap: wrap; }
.pied-editeur .envoi { flex-basis: 100%; display: grid; gap: 8px; margin-bottom: 8px; padding-top: 14px; border-top: 1px solid var(--bord, #ddd5c4); }
.envoi-boutons { display: flex; gap: 10px; }
.envoi-boutons button { flex: 1; }
.pied-editeur .envoi small { font-size: 13px; line-height: 1.35; color: var(--texte-2); }
.amis { margin: 30px 0 10px; }
/* Monstres du bestiaire : le dessin couvre la carte, le nom est ecrit dessous. */
.carte.dessinee .carte-photo { background-size: 100% 100%; background-color: transparent; }
.carte-dessin-nom {
  position: absolute; z-index: 1; left: 50%; bottom: 20.5cqw; transform: translateX(-50%);
  max-width: 64%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--manuscrit); font-weight: 700; line-height: 1.1; pointer-events: none;
}
/* Carte rare : fond holographique (dans le dessin), tampon de la maitresse et reflet qui passe. */
.carte.rare .tampon {
  position: absolute; z-index: 2; left: 5cqw; bottom: 30cqw; transform: rotate(-10deg);
  padding: 0.6cqw 2.6cqw; border: 0.9cqw solid #c0392b; border-radius: 2cqw;
  font: 700 7.5cqw/1.1 var(--manuscrit); color: #c0392b; background: rgb(255 255 255 / 0.35);
  pointer-events: none;
}
.carte.rare .reflet {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: soft-light;
  background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / 0.85) 46%, transparent 62%);
  background-size: 260% 100%; animation: reflet 3.6s linear infinite;
}
@keyframes reflet { from { background-position: 130% 0; } to { background-position: -130% 0; } }
.carte.rare { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4), 0 0 0 1.5px #c9a6ff, 0 0 14px rgb(185 163 255 / 0.55); }
.carte.legendaire { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), 0 0 0 1.5px #e6b450, 0 0 18px rgb(230 180 80 / 0.55); }
.carte.rare.protegee, .carte.legendaire.protegee { box-shadow: 0 0 0 2px var(--bouclier), 0 0 22px rgba(121, 227, 232, 0.55), 0 6px 18px rgba(0, 0, 0, 0.5); }
.zoom-rang { margin: 0 0 4px; font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 700; }
.zoom-rang.rare { color: #9b7ad8; }
.zoom-rang.legendaire { color: var(--or-fonce); }
.zoom-pouvoir b { color: var(--or-fonce); }
/* Le dos : le medaillon du verso imprime (rendu.js, rendreDos), sans le nom,
   illisible en petit. Cadre dore, deux cercles, les yeux de l'icone. */
.carte.dos .carte-photo {
  background:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140'%3E%3Crect x='5.5' y='5.5' width='89' height='129' rx='3.5' fill='none' stroke='%23e6b450' stroke-width='1' opacity='.7'/%3E%3Ccircle cx='50' cy='70' r='30.7' fill='none' stroke='%23e6b450' stroke-width='.9' opacity='.5'/%3E%3Ccircle cx='50' cy='70' r='25.3' fill='%23111214' stroke='%23e6b450' stroke-width='1.4'/%3E%3Cellipse cx='41.8' cy='70' rx='6.2' ry='3.85' fill='%23f2d16b'/%3E%3Cellipse cx='58.2' cy='70' rx='6.2' ry='3.85' fill='%23f2d16b'/%3E%3Cellipse cx='41.8' cy='70' rx='1.15' ry='3.2' fill='%23b3261e'/%3E%3Cellipse cx='58.2' cy='70' rx='1.15' ry='3.2' fill='%23b3261e'/%3E%3C/svg%3E") center / 100% 100% no-repeat,
    repeating-linear-gradient(45deg, #1d2128 0 6%, #23282f 6% 12%);
}

/* ------------------------------------------------------------ vue agrandie */

/* Defilable : sur un ecran bas, le texte et Partager passent sous la carte. */
.zoom {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 3vh 3vw; overflow-y: auto;
  background: var(--voile); backdrop-filter: blur(6px);
  animation: fondu 0.15s ease-out;
}
.zoom-cadre { display: flex; gap: 36px; align-items: center; max-width: 1100px; align-self: safe center; }
.zoom .carte-zoom { width: min(62vh * 5 / 7, 60vw); height: auto; flex: none; }
.zoom .carte-zoom .carte-nom { display: none; }
.zoom-texte { max-width: 360px; }
.zoom-texte h2 { font-size: 28px; }
.zoom-stats { color: var(--texte-2); }
.zoom-effet { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; }
.zoom-effet .ico { width: 22px; height: 22px; margin-top: 2px; }
.zoom-effet span { color: var(--texte); }
.zoom-effet.muet { color: var(--texte-3); }
.zoom-etat { color: var(--accent); }
.zoom-actions { margin-top: 18px; }
.zoom-aide { color: var(--texte-3); font-size: 13px; margin-top: 12px; }
@media (max-width: 760px) {
  .zoom-cadre { flex-direction: column; }
  .zoom .carte-zoom { width: min(50vh * 5 / 7, 80vw); }
}

/* ---------------------------------------------------------------- atelier */

.grille-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 22px 18px; }
.vignette { margin: 0; cursor: pointer; }
.vignette .carte { transition: transform 0.15s, box-shadow 0.15s; }
.vignette:hover .carte { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.12); }
.vignette figcaption .veterane { display: block; font: 700 15px/1.1 var(--manuscrit); color: var(--feutre); }
.vignette figcaption { margin-top: 8px; font-size: 13.5px; color: var(--texte-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vignette-suppr {
  position: absolute; top: -9px; right: -9px; z-index: 3; width: 26px; height: 26px; padding: 0;
  border-radius: 50%; border: 0; background: rgba(10, 11, 14, 0.78); color: #fff; font-size: 17px; line-height: 1;
  opacity: 0; transition: opacity 0.15s, background 0.15s;
}
.vignette:hover .vignette-suppr, .vignette-suppr:focus-visible { opacity: 1; }
.vignette-suppr:hover { background: var(--danger); }
@media (hover: none) { .vignette-suppr { opacity: 0.85; } }
.vignette .alerte { color: var(--danger); font-weight: 700; margin-left: 4px; }
.depot-vide {
  grid-column: 1 / -1; display: grid; place-items: center; gap: 10px; text-align: center;
  padding: 70px 20px; border: 2px dashed var(--bord); border-radius: 18px; color: var(--texte-2);
}
.depot-vide .ico { width: 48px; height: 48px; color: var(--accent); }
.depot-vide strong { color: var(--texte); font-size: 18px; }
.depot-voile {
  position: fixed; inset: 0; z-index: 90; display: none; place-items: center;
  background: var(--voile); border: 3px dashed var(--accent); color: var(--accent);
  font-size: 24px; font-weight: 650; pointer-events: none;
}
.depot-voile.visible { display: grid; }
.etat-sauvegarde { font-size: 13.5px; color: var(--texte-2); margin: -10px 0 20px; }
.etat-sauvegarde.a-faire { color: var(--danger); }
.etat-sauvegarde.a-sauver { color: #c46a12; }
/* Objectif de Mes cartes : 3 cartes pour jouer, 10 pour un paquet a soi. */
.objectif {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: -6px 0 22px;
  padding: 12px 16px; border: 1.5px dashed var(--bord-fort); border-radius: 12px; background: var(--surface);
}
.objectif p { margin: 0; flex: 1 1 260px; color: var(--texte-2); }
.objectif p b { color: var(--texte); }
.objectif-cases { display: flex; gap: 4px; }
.objectif-cases span { width: 13px; height: 18px; border: 1.5px solid var(--bord-fort); border-radius: 3px; }
.objectif-cases span.pleine { background: var(--accent); border-color: var(--accent); }
.objectif-cases span.seuil { margin-right: 9px; }
.section-demo { margin-top: 44px; }
.section-demo summary { cursor: pointer; color: var(--texte-2); margin-bottom: 18px; }
.section-demo .grille-cartes { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }

/* ---------------------------------------------------------------- editeur */

.editeur {
  position: fixed; inset: 0; z-index: 60; display: grid; grid-template-columns: 1fr 420px;
  background: var(--voile); animation: fondu 0.15s ease-out;
}
.editeur-apercu { display: grid; place-items: center; align-content: center; gap: 14px; padding: 3vh; min-height: 0; }
.cadreur { width: min(78vh * 5 / 7, 46vw); cursor: grab; touch-action: none; }
.cadreur:active { cursor: grabbing; }
.cadreur .carte { box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.1); }
.cadreur.survol .carte { box-shadow: 0 0 0 3px var(--accent); }
.zoom-ctrl { display: flex; align-items: center; gap: 10px; width: min(78vh * 5 / 7, 46vw); color: var(--texte-2); font-size: 13px; }
.zoom-ctrl input { flex: 1; accent-color: var(--accent); }
.aide { color: var(--texte-3); font-size: 13px; margin: 0; text-align: center; max-width: 420px; }
.editeur-panneau {
  background: var(--surface-2); border-left: 1px solid var(--bord); padding: 26px 26px 20px;
  overflow-y: auto; display: flex; flex-direction: column; gap: 20px;
}
.reglages { display: grid; gap: 20px; }
.champ > .etiquette { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--texte-2); margin-bottom: 8px; }
.choix-cout { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.choix-cout button { padding: 9px 0; font-weight: 700; }
.choix-cout button.choisi { background: var(--accent); color: var(--sur-accent); border-color: var(--accent); }
.stat { display: flex; align-items: center; gap: 12px; }
.stat .ico { width: 20px; height: 20px; }
.stat .valeur { font-size: 26px; font-weight: 750; min-width: 34px; text-align: center; }
.stat .note { color: var(--texte-3); font-size: 12.5px; margin-left: auto; text-align: right; }
.stat button { width: 38px; height: 38px; padding: 0; font-size: 20px; }
.jauge { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--surface); }
.jauge span { display: block; height: 100%; }
.jauge .j-atk { background: var(--atk); }
.jauge .j-def { background: var(--def); }
.jauge .j-effet { background: var(--or); }
.jauge-legende { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--texte-2); margin-top: 6px; }
.choix-effet { display: grid; gap: 6px; }
.choix-effet button {
  justify-content: flex-start; text-align: left; gap: 12px; padding: 10px 12px; font-weight: 450;
}
.choix-effet button .ico { width: 20px; height: 20px; }
.choix-effet button b { font-weight: 650; }
.choix-effet button small { display: block; color: var(--texte-2); font-size: 12.5px; line-height: 1.35; }
.choix-effet button .prix { margin-left: auto; color: var(--texte-2); font-size: 12.5px; white-space: nowrap; }
.choix-effet button.choisi { border-color: var(--accent); background: var(--accent-lavis); }
.pied-editeur { margin-top: auto; display: flex; justify-content: space-between; gap: 10px; padding-top: 10px; }
.pied-editeur .espace { flex: 1; }
/* Assistant de creation : memes panneaux que l'editeur, un ecran a la fois. */
.assistant .editeur-panneau { gap: 16px; }
.assistant-titre { margin: 0; font: var(--titre-graisse) 32px/1.1 var(--titre); }
/* Des la deuxieme carte : un role tout pret, ou « a ma facon ». */
.onglets-creation { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.onglets-creation button { flex-direction: column; gap: 1px; padding: 10px 6px 8px; font-weight: 650; font-size: 15px; }
.onglets-creation button small { font-weight: 450; font-size: 12px; color: var(--texte-2); }
.onglets-creation button.choisi { border-color: var(--accent); background: var(--accent-lavis); color: var(--accent); font-weight: 750; }
/* Les effets en pastilles, leur nom dessous. */
.effets-courts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.effets-courts button { display: grid; justify-items: center; gap: 3px; padding: 8px 2px 6px; }
.effets-courts button .ico { width: 20px; height: 20px; }
.effets-courts button .aucun { display: grid; place-items: center; color: var(--texte-3); font-weight: 700; }
.effets-courts button small { font-size: 11.5px; color: var(--texte-2); }
.effets-courts button.choisi { border-color: var(--accent); background: var(--accent-lavis); }
.effets-courts button.choisi small { color: var(--texte); font-weight: 700; }
.assistant-etape, .assistant-compte { margin: 0 0 -10px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--texte-3); }
.assistant .sous { margin: 0; }
.assistant input[data-role=nom] { font-size: 20px; padding: 10px 12px; }
.assistant .choix-effet button .prix { text-align: right; line-height: 1.35; }
.assistant .lien-crayon { align-self: center; font-size: 18px; }
.recadrer { display: none; }
/* Une carte a soi, dans Mes cartes : le crayon dit qu'on peut la modifier. */
.vignette-modifier {
  position: absolute; z-index: 2; right: 6px; bottom: 30px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--surface-2); color: var(--accent); font-size: 15px; box-shadow: 0 2px 6px rgb(0 0 0 / 0.25); pointer-events: none;
}
@media (max-width: 900px) {
  /* Sur telephone : la carte reste petite en haut, a cote du bouton
     « Recadrer la photo », et les reglages ont tout l'ecran dessous. En grand
     seulement pour cadrer. */
  .editeur { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); height: 100dvh; }
  .editeur-apercu { grid-template-columns: auto 1fr; justify-items: start; align-items: center; min-height: auto; padding: 10px 16px; gap: 6px 14px; background: var(--fond); }
  .editeur:not(.recadrage) .cadreur { width: 84px; }
  .editeur:not(.recadrage) .zoom-ctrl, .editeur:not(.recadrage) .aide { display: none; }
  .editeur.recadrage .editeur-apercu { grid-template-columns: 1fr; justify-items: center; }
  .editeur.recadrage .cadreur, .editeur.recadrage .zoom-ctrl { width: min(44vh * 5 / 7, 78vw); }
  .recadrer { display: inline-flex; padding: 8px 12px; }
  .recadrer[hidden] { display: none; }
  .editeur-panneau { min-height: 0; overflow-y: auto; border-left: 0; border-top: 1px solid var(--bord); padding: 18px 18px 16px; }
}

/* ------------------------------------------------------------------ decks */
/* L'etagere de paquets, puis un paquet ouvert. */

.etagere { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 30px 18px; }
.paquet {
  display: grid; justify-items: center; align-content: start; gap: 6px; padding: 8px 4px 12px;
  background: none; border: 0; font-weight: 400; text-align: center;
}
.paquet:hover { background: none; }
.paquet-pile { position: relative; display: block; width: 118px; aspect-ratio: 5 / 7; margin: 12px 0 6px; transition: transform 0.2s; }
.paquet:hover .paquet-pile { transform: translateY(-5px); }
.couche { position: absolute; inset: 0; display: block; }
.couche .carte { height: 100%; }
.couche.c0 { transform: rotate(-8deg) translate(-12px, 4px); }
.couche.c1 { transform: rotate(6deg) translate(12px, 2px); }
.paquet:hover .couche.c0 { transform: rotate(-12deg) translate(-20px, 4px); }
.paquet:hover .couche.c1 { transform: rotate(10deg) translate(20px, 2px); }
.couche { transition: transform 0.25s; }
.couche.dessus .carte { box-shadow: 0 0 0 3px var(--surface-2), var(--ombre); }
.couche.vide {
  display: grid; place-items: center; border: 2px dashed var(--trait-leger); border-radius: 5.5% / 3.9%;
  color: var(--texte-3); font-size: 15px;
}
.paquet.nouveau .couche.vide { color: var(--accent); font-size: 40px; font-weight: 300; }
.paquet-nom { font: var(--titre-graisse) 22px/1.15 var(--titre); color: var(--texte); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paquet.nouveau .paquet-nom { color: var(--accent); }
.paquet-etat {
  font-size: 12px; padding: 1px 9px; border-radius: 10px; white-space: nowrap;
  background: color-mix(in srgb, var(--texte-3) 18%, transparent); color: var(--texte-2);
}
.paquet-etat.ok { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.etoile-phare {
  position: absolute; top: -9px; right: -9px; z-index: 3; width: 24px; height: 24px; padding: 0;
  display: grid; place-items: center; border-radius: 50%; border: 0; font-size: 13px; line-height: 1;
  background: rgba(10, 11, 14, 0.72); color: #fff; opacity: 0; transition: opacity 0.15s, background 0.15s;
}
.etoile-phare.active { background: var(--or); color: #241904; opacity: 1; box-shadow: 0 2px 6px rgb(0 0 0 / 0.3); }
.vignette:hover .etoile-phare, .etoile-phare:focus-visible { opacity: 1; }
button.etoile-phare:hover { background: var(--or); color: #241904; }
@media (hover: none) { .etoile-phare { opacity: 0.8; } }

.lien-retour { padding: 4px 0; margin-bottom: 14px; color: var(--accent); }
.lien-retour:hover { background: none; text-decoration: underline; }
.paquet-ouvert { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 32px; align-items: start; }
.phare-grande { display: grid; justify-items: center; gap: 4px; }
.phare-grande .note { margin: 6px 0 0; }
.phare-carte { position: relative; width: 100%; }
.phare-grande > .vide {
  width: 100%; aspect-ratio: 5 / 7; display: grid; place-items: center;
  border: 2px dashed var(--trait-leger); border-radius: 5.5% / 3.9%; color: var(--texte-3);
}
.deck-courant { display: grid; gap: 18px; }
.deck-tete { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.deck-tete input { max-width: 320px; font: var(--titre-graisse) 26px/1.1 var(--titre); padding: 4px 10px; }
.deck-tete h2 { font-size: 30px; }
.deck-tete .espace { flex: 1; }
.emplacements-deck { display: grid; grid-template-columns: repeat(5, minmax(0, 118px)); gap: 16px 14px; }
.emplacements-deck .vide {
  aspect-ratio: 5 / 7; border: 1.5px dashed var(--trait-leger); border-radius: 5.5% / 3.9%;
  display: grid; place-items: center; color: var(--texte-3); font-size: 13px;
}
.emplacements-deck .vignette figcaption { font-size: 12px; }
.bilan-deck { margin: 0; color: var(--texte-2); font-size: 13.5px; }
.bilan-deck .ok { color: var(--ok); }
.bilan-deck .ko { color: var(--danger); }
.courbe { display: flex; gap: 4px; align-items: flex-end; height: 46px; }
.courbe div { width: 18px; display: grid; justify-items: center; gap: 2px; font-size: 11px; color: var(--texte-3); }
.courbe span { display: block; width: 100%; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 2px; }
.collection-tete { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 34px 0 6px; padding-top: 22px; border-top: 1.5px dashed var(--trait-leger); }
.collection-tete + .sous { margin: 0 0 16px; }
.filtres { display: flex; gap: 6px; flex-wrap: wrap; }
.filtre { padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; }
.filtre.choisi { background: var(--accent); border-color: var(--accent); color: var(--sur-accent); }
.vignette .compte {
  position: absolute; top: 6px; right: 6px; z-index: 2; padding: 2px 7px; border-radius: 10px;
  background: var(--accent); color: var(--sur-accent); font-size: 12px; font-weight: 700;
}
.vignette { position: relative; }
.vignette.epuisee { opacity: 0.35; }
@media (max-width: 900px) {
  .paquet-ouvert { grid-template-columns: 1fr; gap: 20px; }
  .phare-grande { width: 150px; justify-self: center; }
  .emplacements-deck { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
}

/* ------------------------------------------------------------ preparation */

/* Le cahier ouvert, comme l'accueil : « Ton paquet » a gauche, « En face » a
   droite, « contre » au crayon rouge entre les deux pages. */
#ecran-jouer { max-width: none; padding: 14px 2.5vw 16px; }
.d-cahier { height: auto; min-height: max(620px, calc(100vh - 92px)); }
.d-cahier .cahier-page { display: flex; flex-direction: column; }
.d-etiquette { margin: 22px 0 6px; font: 700 clamp(22px, 1.7vw, 30px) var(--manuscrit); color: #25272e; }
.cahier-droite .d-etiquette:first-child { margin-top: 0; }
.d-etiquette input.d-nom { width: min(100%, 320px); box-shadow: none; padding: 2px 4px; border: 0; border-bottom: 2px dashed #9a9488; border-radius: 0; background: none; font: inherit; color: #2c3e7a; }
.d-eventail { position: relative; height: calc(clamp(100px, 8.2vw, 150px) * 1.4 + 34px); margin: 4px 0 14px 3%; }
.d-pli { position: absolute; top: 8px; width: clamp(100px, 8.2vw, 150px); transform-origin: 50% 120%; }
.d-paquets { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 2px; }
.d-paquet {
  display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; width: 100%; padding: 3px 2px; justify-content: flex-start; text-align: left;
  background: none; border: 0; color: #25272e; font: 600 clamp(20px, 1.5vw, 26px)/1.15 var(--manuscrit);
}
.d-paquet:hover { background: none; }
.d-paquet:hover:not(:disabled) span { text-decoration: underline wavy rgb(44 62 122 / 0.6); text-underline-offset: 5px; }
.d-paquet small { font: 500 clamp(15px, 1.1vw, 19px) var(--manuscrit); color: #2c3e7a; }
.d-paquet.incomplet { opacity: 1; cursor: default; }
.d-paquet.incomplet span { color: #8a8578; text-decoration: line-through; text-decoration-color: #c0392b; }
.d-note { margin: 10px 0 0; font: 500 19px var(--manuscrit); color: #c0392b; }
.d-tampon { align-self: flex-start; margin-top: auto; padding: 2px 14px; border: 3px solid #c0392b; border-radius: 8px; transform: rotate(-6deg); font: 700 22px var(--manuscrit); color: #c0392b; opacity: 0.85; }
.d-cahier .cahier-gauche .d-paquets { margin-bottom: 24px; }
.d-contre { position: absolute; z-index: 3; left: 50%; top: 40%; padding: 6px 18px; transform: translate(-50%, -50%) rotate(-8deg); font: 700 clamp(26px, 2.2vw, 36px) var(--manuscrit); color: #c0392b; pointer-events: none; }
.d-contre svg { position: absolute; inset: -6px -10px; width: calc(100% + 20px); height: calc(100% + 12px); }
.d-contre svg path { fill: #fffdf7; stroke: #c0392b; stroke-width: 3; }
.d-contre span { position: relative; }
.d-adversaires { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2vw; margin: 12px 0 4px; }
.d-adv { position: relative; display: grid; justify-items: center; align-content: start; gap: 2px; padding: 0; text-align: center; background: none; border: 0; color: #25272e; font-weight: 400; }
.d-adv:hover { background: none; }
.d-adv:hover .polaroid { transform: rotate(0deg) translateY(-4px); }
.d-adv .polaroid { width: 100%; max-width: 170px; margin-bottom: 4px; transition: transform 0.2s; }
.d-adv b { font: 700 clamp(19px, 1.4vw, 24px) var(--manuscrit); }
.d-adv small { font: 500 clamp(15px, 1.05vw, 18px) var(--manuscrit); color: #2c3e7a; }
.d-adv .cercle-rouge { position: absolute; left: -10%; top: -8%; width: 120%; height: 90%; pointer-events: none; }
.d-adv .cercle-rouge path { fill: none; stroke: #c0392b; stroke-width: 4; stroke-linecap: round; }
.d-deux { display: flex; gap: 6px; align-items: center; justify-content: center; background: #e3f0d0; aspect-ratio: 100 / 140; }
.d-deux .griffonnage { flex: none; width: 46%; height: auto; stroke: #25272e; }
.d-bas { display: grid; grid-template-columns: minmax(150px, 1fr) auto; gap: 3vw; align-items: end; margin-top: auto; padding-top: 22px; }
.d-postit { margin: 0; padding: 14px 16px 12px; max-width: 260px; background: #fdf1a8; box-shadow: 2px 4px 10px rgb(0 0 0 / 0.18); transform: rotate(2deg); font: 500 clamp(17px, 1.2vw, 21px)/1.2 var(--manuscrit); color: #25272e; }
.d-lancer { min-width: clamp(220px, 21vw, 380px); min-height: clamp(130px, 18vh, 200px); white-space: nowrap; }
.d-lancer b { font-size: clamp(34px, 2.8vw, 52px); }
.d-lancer:disabled { opacity: 0.5; }

/* ----------------------------------------------------------------- partie */

.table {
  --hc: max(90px, min(34vh, calc((100vw - 500px) / 3 * 1.4 - 12px)));
  --lc: calc(var(--hc) * 5 / 7);
  --hm: calc(var(--hc) * 0.86);
  position: relative; height: 100vh; overflow: hidden;
  display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr auto;
  background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--fond) 70%, transparent), transparent 70%);
}
/* Trois colonnes : le portrait de chaque camp a gauche de sa rangee, les
   commandes a droite de la rangee du joueur. Rien sous la main. */
.arene {
  grid-row: 1; display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: auto auto auto;
  align-content: center; padding-top: calc(var(--hm) * 0.22);
}
.rangee { grid-column: 2; display: grid; grid-template-columns: repeat(3, var(--lc)); gap: calc(var(--lc) * 0.14); justify-content: center; }
.rangee.haut { grid-row: 1; }
.rangee.bas { grid-row: 3; }
.emplacement {
  position: relative; width: var(--lc); height: var(--hc);
  border-radius: 5.5% / 3.9%; border: 1.5px dashed var(--trait-leger);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.emplacement > .carte { position: absolute; inset: 0; cursor: default; }
.rangee.bas .emplacement.cible { border-color: var(--accent); background: var(--accent-lavis); cursor: pointer; }
.rangee.bas .emplacement.cible:hover, .rangee.bas .emplacement.cible.survol { box-shadow: 0 0 0 2px var(--accent), 0 0 24px color-mix(in srgb, var(--accent) 35%, transparent); }
.rangee.bas .emplacement.cible > .carte { opacity: 0.7; }
.mediane { grid-column: 2; grid-row: 2; height: 5.5vh; display: grid; place-items: center; position: relative; }
.mediane::before {
  content: ""; position: absolute; left: 6%; right: 6%; top: 50%; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 45%, transparent), transparent);
}
.annonce {
  position: relative; padding: 4px 18px; border-radius: 20px; background: var(--surface-2); border: 1px solid var(--bord);
  font: var(--titre-graisse) 19px/1.3 var(--titre); color: var(--texte-2); transition: color 0.2s, border-color 0.2s;
}
.annonce.vous { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }

/* Le portrait : un polaroid, les PV sur un coeur colle dans le coin. */
.camp-portrait { grid-column: 1; display: flex; justify-content: flex-end; align-items: center; padding-right: calc(var(--lc) * 0.3); min-width: 0; }
.camp-portrait.haut { grid-row: 1; }
.camp-portrait.bas { grid-row: 3; }
.heros { display: grid; justify-items: center; gap: 6px; width: calc(var(--lc) * 0.74); transition: transform 0.25s; }
.heros .nom { font: 700 20px/1 var(--manuscrit); color: var(--texte-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.heros-pola { position: relative; width: 100%; }
.heros .polaroid { width: 100%; padding: 6px 6px 4px; }
.heros .polaroid figcaption { font-size: calc(var(--lc) * 0.1); }
.heros .polaroid .polaroid-photo { aspect-ratio: 5 / 7; display: block; }
.heros .cachette { display: block; width: 100%; height: 100%; fill: none; stroke: #2b2b2b; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.cachette .noir { fill: #1b1c20; }
.cachette .papier { fill: #fffdf7; }
.cachette .oeil { fill: #f2d16b; stroke: none; }
.cachette .fin { stroke-width: 1.6; }
.heros .pv {
  position: absolute; z-index: 4; right: -16%; top: 6%; width: 42%; aspect-ratio: 58 / 52; display: grid; place-items: center;
  font: 700 calc(var(--lc) * 0.15)/1 var(--manuscrit); color: #fff; transform: rotate(8deg);
}
.heros .pv svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.heros .pv svg path { fill: #c0392b; stroke: #25272e; stroke-width: 2.2; stroke-linejoin: round; }
.heros .pv.bas svg path { fill: #7e160d; }
.heros .pv b { position: relative; margin-top: -8%; }
.heros .reserve { display: flex; gap: 12px; font: 500 18px/1.1 var(--manuscrit); color: var(--texte-2); }
.heros .reserve span { display: inline-flex; align-items: center; gap: 4px; }
.heros .reserve .ico { width: 14px; height: 14px; }
.heros.actif { transform: translateY(-4px); }
.heros.actif .polaroid { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent), 0 8px 18px rgb(0 0 0 / 0.3); }
/* Gardien : la cachette couronnee au feutre, entouree au crayon rouge. */
.gardien { position: relative; }
.gardien .couronne { position: absolute; z-index: 3; left: 50%; top: -22%; width: 52%; margin-left: -26%; transform: rotate(-6deg); }
.gardien .couronne path { fill: #f2c94c; stroke: #25272e; stroke-width: 2.4; stroke-linejoin: round; }
.gardien .scotch { width: 64%; margin-left: -32%; }
.cercle-rouge { position: absolute; left: -12%; top: -9%; z-index: 2; width: 124%; height: 114%; pointer-events: none; }
.heros-pola:has(.gardien) + .reserve { margin-top: 8px; }
.cercle-rouge path { fill: none; stroke: #c0392b; stroke-width: 2.6; stroke-linecap: round; }

/* La main adverse, de dos, qui depasse du haut de l'ecran. */
.main-haut {
  position: absolute; z-index: 4; top: 0; left: 50%; display: flex; justify-content: center;
  transform: translate(-50%, -62%); pointer-events: none;
}
.main-haut .carte { width: calc(var(--lc) * 0.42); margin: 0 calc(var(--lc) * -0.05); transform: rotate(180deg); }
.main-haut .carte:nth-child(odd) { transform: rotate(184deg) translateY(4px); }
.main-haut .carte:nth-child(even) { transform: rotate(177deg); }
.vol-carte { position: fixed; z-index: 70; pointer-events: none; transition: left 0.4s ease-in-out, top 0.4s ease-in-out, width 0.4s ease-in-out, height 0.4s ease-in-out, transform 0.11s; }
.vol-carte .carte { width: 100%; height: 100%; }
.vol-carte.retourne { transform: scaleX(0); }
.piochee-haut { animation: piocheeHaut 0.35s ease-out; }
.piochee-bas { animation: piocheeBas 0.35s ease-out; }
@keyframes piocheeHaut { from { translate: 0 -60%; opacity: 0; } }
@keyframes piocheeBas { from { translate: 0 60%; opacity: 0; } }

.commandes { grid-column: 3; grid-row: 3; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 14px; padding-left: calc(var(--lc) * 0.3); }
.energie { display: grid; gap: 8px; }
.energie .titre { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--texte-3); }
.gemmes { display: flex; gap: 6px; flex-wrap: wrap; max-width: 170px; }
.gemme { width: 24px; height: 24px; color: var(--bord-fort); }
.gemme.pleine { color: var(--or); filter: drop-shadow(0 0 6px rgba(230, 180, 80, 0.55)); }
.gemme.bonus { color: #ffe08a; }
.commandes button { min-width: 150px; }
.fin-tour { padding: 14px 20px; font-size: 16px; }
.fin-tour.attente { animation: pulsation 1.8s ease-in-out infinite; }
.quitter { position: absolute; z-index: 6; top: 12px; right: 16px; }
/* Son et Quitter, cote a cote en haut a droite. */
.haut-droite { position: absolute; z-index: 6; top: 12px; right: 16px; display: flex; gap: 8px; align-items: center; }
.haut-droite .quitter { position: static; }
.son { display: inline-flex; gap: 6px; align-items: center; }
.son .ico { width: 18px; height: 18px; }
.son.coupe { opacity: 0.7; }
.heros-nom { display: none; }

.main {
  grid-column: 1 / -1; grid-row: 2; height: calc(var(--hm) * 0.6); position: relative;
  display: flex; justify-content: center; align-items: flex-start; z-index: 5;
  container-type: inline-size; --n: 1; --chevauche: 0.05;
}
/* Nombre de cartes en main : au-dela de ce que la largeur permet, l'eventail
   se resserre, pour que chaque carte, levee, reste entiere a l'ecran. */
.main:has(> .en-main:nth-child(2)) { --n: 2; }
.main:has(> .en-main:nth-child(3)) { --n: 3; }
.main:has(> .en-main:nth-child(4)) { --n: 4; }
.main:has(> .en-main:nth-child(5)) { --n: 5; }
.main:has(> .en-main:nth-child(6)) { --n: 6; }
.main:has(> .en-main:nth-child(7)) { --n: 7; }
.main:has(> .en-main:nth-child(8)) { --n: 8; }
.main:has(> .en-main:nth-child(9)) { --n: 9; }
.main:has(> .en-main:nth-child(10)) { --n: 10; }
.main:has(> .en-main:nth-child(11)) { --n: 11; }
.main:has(> .en-main:nth-child(12)) { --n: 12; }
.main .en-main {
  width: calc(var(--hm) * 5 / 7); flex: none;
  /* Ecart entre deux cartes : au plus ce qui laisse la carte du bout, levee
     et droite (1,06 x), a 8 px du bord. */
  margin: 0 calc(-1 * max(var(--hm) * var(--chevauche), (var(--hm) * 5 / 7 - (100cqw - 16px - var(--hm) * 5 / 7 * 1.06) / max(var(--n) - 1, 1)) / 2));
  transform: translateY(calc(var(--arc) * 1px)) rotate(calc(var(--rot) * 1deg));
  transform-origin: 50% 120%;
  transition: filter 0.15s;
  cursor: pointer; position: relative;
}
/* Survol : la case reste a sa place dans l'eventail, seule la carte monte et
   se redresse. Le survol tient sur la case et sur la carte levee : la souris
   ne la perd plus quand la carte bouge (bord d'une carte penchee, bas de
   l'ecran), et la carte monte assez pour montrer ATK et DEF. */
.main .en-main > .carte {
  transform-origin: 50% 120%;
  transition: transform 0.18s ease-out, box-shadow 0.15s;
}
.main .en-main:hover, .main .en-main.choisie { z-index: 3; }
.main .en-main:hover > .carte, .main .en-main.choisie > .carte {
  transform: rotate(calc(var(--rot) * -1deg)) translateY(calc(var(--hm) * -0.47 - var(--arc) * 1px)) scale(1.06);
}
.main .en-main.choisie .carte { box-shadow: 0 0 0 3px var(--accent), 0 0 30px color-mix(in srgb, var(--accent) 50%, transparent); }
.main .en-main.trop-chere { filter: saturate(0.35) brightness(0.62); cursor: not-allowed; }
.main.cachee .en-main { visibility: hidden; }
.main-adverse { display: flex; gap: 3px; }
.main-adverse .carte { width: 16px; border-radius: 3px; }
/* La carte portee : placee par transform (partie-vue.js, une fois par image). */
.fantome { position: fixed; left: 0; top: 0; z-index: 80; pointer-events: none; width: calc(var(--hm) * 5 / 7); opacity: 0.92; will-change: transform; }
/* Au doigt, le navigateur ne doit ni defiler ni zoomer pendant qu'on porte une carte. */
.main .en-main { touch-action: none; }

/* Sur telephone, le plateau en hauteur : bandeau adverse, sa rangee, la
   votre, votre bandeau (energie et Etincelle a droite), la main, et Fin du
   tour en bas sous le pouce. Les cartes prennent la largeur de l'ecran. */
@media (max-width: 760px) {
  .table { --hc: max(70px, min(calc((100vw - 48px) / 3 * 1.4), calc((100dvh - 380px) / 2))); --hm: var(--hc); height: 100dvh; }
  .arene { grid-template-columns: 1fr auto; grid-template-rows: auto auto auto auto auto; align-content: center; padding: 24px 16px 0; row-gap: 6px; }
  .rangee { grid-column: 1 / -1; gap: 8px; }
  .rangee.haut { grid-row: 2; }
  .rangee.bas { grid-row: 4; }
  .mediane { grid-column: 1 / -1; grid-row: 3; height: 34px; }
  .annonce { font-size: 15px; padding: 2px 12px; }
  .camp-portrait { padding: 0; justify-content: flex-start; }
  .camp-portrait.haut { grid-column: 1 / -1; grid-row: 1; }
  .camp-portrait.bas { grid-column: 1; grid-row: 5; }
  .heros { width: 100%; min-width: 0; display: grid; grid-template-columns: 46px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 2px; justify-items: start; align-items: center; }
  .heros > .nom { display: none; }
  .heros-pola { grid-row: 1 / span 2; width: 46px; }
  .heros .polaroid { padding: 3px 3px 8px; }
  .heros .polaroid figcaption { display: none; }
  .heros .pv { width: 32px; right: -16px; top: -8px; font-size: 16px; }
  .heros-nom { display: block; align-self: end; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 20px/1 var(--manuscrit); color: var(--texte); }
  .heros .reserve { align-self: start; font-size: 16px; white-space: nowrap; }
  .heros .pioche-alerte, .heros .heros-regle { grid-column: 1 / -1; max-width: none; }
  .heros.actif { transform: none; }
  .gardien .couronne { top: -30%; }
  .commandes { grid-column: 2; grid-row: 5; flex-direction: column; align-items: flex-end; gap: 4px; padding: 0; }
  .commandes button { min-width: 0; padding: 5px 10px; font-size: 13px; }
  .energie { gap: 2px; justify-items: end; }
  .energie .titre { font-size: 11px; }
  .gemme { width: 18px; height: 18px; }
  .commandes .fin-tour { position: absolute; left: 16px; right: 16px; bottom: 10px; z-index: 6; padding: 13px; font-size: 17px; }
  .main { height: calc(var(--hm) * 0.6 + 66px); padding-bottom: 66px; box-sizing: border-box; }
  .main { --chevauche: 0.2; }
  .quitter { top: 4px; right: 8px; font-size: 13px; padding: 4px 8px; }
  /* Sur telephone, la main adverse occupe le haut au centre : le son a
     gauche, en icone seule, Quitter a droite. */
  .haut-droite { top: 4px; left: 8px; right: 8px; justify-content: space-between; pointer-events: none; }
  .haut-droite > * { pointer-events: auto; }
  .son { padding: 4px 8px; }
  .son-texte { display: none; }
  .main-haut .carte { width: calc(var(--lc) * 0.36); }
}

/* animations */
.frappe-haut { animation: frappeHaut 0.36s ease-in-out; }
.frappe-bas { animation: frappeBas 0.36s ease-in-out; }
.meurt { animation: meurt 0.42s ease-in forwards; }
.entree { animation: entree 0.38s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
.secousse { animation: secousse 0.35s; }
.eclair { animation: eclair 0.5s; }
@keyframes frappeHaut { 50% { transform: translateY(-22%) scale(1.04); } }
@keyframes frappeBas { 50% { transform: translateY(22%) scale(1.04); } }
@keyframes meurt { to { transform: scale(0.82) rotate(-6deg); opacity: 0; filter: grayscale(1); } }
@keyframes entree { from { transform: translateY(14%) scale(1.1); opacity: 0; } }
@keyframes secousse { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@keyframes eclair { 30% { filter: brightness(1.8) saturate(1.4); } }
@keyframes fondu { from { opacity: 0; } }
@keyframes pulsation { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent); } }
.flottant {
  position: fixed; z-index: 95; pointer-events: none; transform: translate(-50%, -50%);
  font: 800 30px/1 system-ui, sans-serif; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9), 0 0 2px #000;
  animation: flotte 0.95s ease-out forwards;
}
.flottant.degat { color: #ff6b5a; }
.flottant.soin { color: var(--soin); }
.flottant.affaiblir { color: var(--affaiblir); font-size: 22px; }
.flottant.bloque { color: var(--bouclier); font-size: 20px; }
@keyframes flotte { from { opacity: 0; margin-top: 10px; } 15% { opacity: 1; } to { opacity: 0; margin-top: -60px; } }

.voile-partie {
  position: absolute; inset: 0; z-index: 70; display: grid; place-items: center;
  background: var(--voile); backdrop-filter: blur(5px); animation: fondu 0.2s;
}
.voile-partie.opaque {
  background-color: var(--fond); background-image: var(--fond-image); background-size: var(--fond-taille); background-attachment: fixed;
}
.boite { text-align: center; display: grid; gap: 16px; justify-items: center; padding: 30px; }
.boite h2 { font-size: 52px; }
.boite p { color: var(--texte-2); margin: 0; }
.boite .actions { justify-content: center; }

/* ----------------------------------------------------- regles, equilibrage */

/* Les regles en livret : intercalaires de couleur a gauche (le sommaire),
   page de cahier a droite, couleur papier quel que soit le decor. */
#ecran-regles { max-width: none; padding: 18px 2.5vw 60px; }
.r-livre { display: grid; grid-template-columns: 190px minmax(0, 1fr); width: min(1300px, 100%); margin: 0 auto; }
.r-onglets { position: sticky; top: 16px; align-self: start; display: grid; gap: 8px; padding-top: 34px; }
.r-onglets button {
  justify-content: flex-start; padding: 8px 14px; border: 0; border-radius: 10px 0 0 10px; background: var(--c); color: #25272e;
  font: 700 21px var(--manuscrit); box-shadow: -2px 2px 5px rgb(0 0 0 / 0.12); transform: translateX(12px); transition: transform 0.2s;
}
.r-onglets button:hover { background: var(--c); transform: translateX(4px); }
.r-onglets button.actif { transform: translateX(0); }
.r-page {
  position: relative; min-width: 0; padding: 4% 6% 5% 9%; color: #25272e; border-radius: 4px 10px 10px 4px; box-shadow: 0 14px 26px rgb(0 0 0 / 0.22);
  background: #fffdf7 repeating-linear-gradient(transparent 0 31px, rgb(110 140 190 / 0.28) 31px 32px); background-position: 0 70px;
}
.r-page::before { content: ""; position: absolute; top: 0; bottom: 0; left: 6%; width: 2px; background: rgb(214 80 80 / 0.55); }
.r-page section { scroll-margin-top: 16px; }
.r-page h1 { margin: 0; font: var(--titre-graisse) clamp(46px, 4.4vw, 78px)/1 var(--titre); color: #2c3e7a; }
.r-page h2 { margin: 46px 0 12px; font: 700 clamp(30px, 2.4vw, 40px) var(--manuscrit); color: #c0392b; }
.r-page h3 { margin: 26px 0 6px; font: 700 26px var(--manuscrit); color: #2c3e7a; }
.r-page p, .r-page li { color: #25272e; line-height: 1.55; }
.r-page .note { color: #5b5a55; }
.r-page table { color: #25272e; background: rgb(255 255 255 / 0.6); }
.r-page th { color: #5b5a55; }
.r-page a { color: #2c3e7a; }
.r-chiffres { display: flex; flex-wrap: wrap; gap: 20px 40px; margin: 24px 0 8px; }
.r-chiffre { display: grid; justify-items: center; }
.r-chiffre b { display: grid; place-items: center; width: 92px; height: 92px; border: 3px solid #2c3e7a; border-radius: 50% 46% 52% 48%; font: 700 46px var(--manuscrit); color: #2c3e7a; transform: rotate(-4deg); }
.r-chiffre:nth-child(2) b { border-color: #c0392b; color: #c0392b; transform: rotate(3deg); }
.r-chiffre span { margin-top: 6px; font: 600 22px var(--manuscrit); }
.r-page .r-but { max-width: 34em; font: 600 clamp(22px, 1.8vw, 30px)/1.25 var(--manuscrit); }
.r-fiches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 14px; }
.r-fiche { position: relative; padding: 24px 16px 16px; background: #fff; border: 1px solid #ddd5c2; border-radius: 6px; box-shadow: 2px 4px 10px rgb(0 0 0 / 0.1); }
.r-fiche:nth-child(odd) { transform: rotate(-1.2deg); }
.r-fiche:nth-child(even) { transform: rotate(1deg); }
.r-num { position: absolute; top: -18px; left: 12px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #2c3e7a; color: #fff; font: 700 24px var(--manuscrit); }
.r-fiche b { display: block; margin-bottom: 4px; font: 700 25px var(--manuscrit); }
.r-page .r-fiche p { margin: 0; font-size: 15px; line-height: 1.4; }
.r-gemmes { display: flex; gap: 5px; margin-top: 10px; }
.r-gemmes i { width: 13px; height: 13px; border-radius: 3px; transform: rotate(45deg); background: #d9a032; }
.r-gemmes i.vide { background: none; border: 2px solid #d9a032; }
.r-combat { display: grid; grid-template-columns: minmax(250px, 380px) minmax(0, 1fr); gap: 36px; align-items: center; }
.r-plateau { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 26px; margin: 34px 0 6px; }
.r-case { aspect-ratio: 5 / 7; border: 2px dashed #b9b09b; border-radius: 8px; }
.r-fleches { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.r-fleches path { fill: none; stroke: #c0392b; stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.r-heros { position: absolute; right: -6%; top: -34px; font: 700 24px var(--manuscrit); color: #c0392b; transform: rotate(-6deg); }
.r-page .r-astuce { max-width: 440px; margin: 26px 0 0 auto; padding: 16px 18px 12px; background: #fdf1a8; box-shadow: 2px 4px 10px rgb(0 0 0 / 0.16); transform: rotate(1.5deg); font: 500 21px/1.25 var(--manuscrit); }
@media (max-width: 1100px) { .r-combat { grid-template-columns: minmax(0, 380px); } }
.r-effets { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 26px 24px; margin-top: 10px; }
.r-effet { display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: start; }
.r-effet b { display: flex; align-items: center; gap: 6px; font: 700 24px var(--manuscrit); }
.r-effet b .icone, .r-effet b svg { width: 20px; height: 20px; }
.r-page .r-effet p { margin: 2px 0 0; font-size: 14.5px; line-height: 1.4; }
@media (max-width: 760px) {
  #ecran-regles { padding: 0 0 40px; }
  .r-livre { grid-template-columns: 1fr; }
  .r-onglets { position: sticky; top: 0; z-index: 5; display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px; background: var(--fond); }
  .r-onglets button { flex: none; border-radius: 8px; transform: none; font-size: 18px; padding: 5px 10px; }
  .r-onglets button:hover, .r-onglets button.actif { transform: none; outline: 2px solid #25272e; }
  .r-page { padding: 22px 16px 30px 40px; border-radius: 0; }
  .r-page::before { left: 26px; }
  .r-page section { scroll-margin-top: 60px; }
  .r-fiches { grid-template-columns: 1fr 1fr; }
  .r-chiffres { gap: 14px 22px; }
  .r-chiffre b { width: 66px; height: 66px; font-size: 34px; }
  .r-chiffre span { font-size: 17px; }
  .r-combat { grid-template-columns: 1fr; }
  .r-plateau { max-width: 300px; }
  .r-page table { display: block; overflow-x: auto; }
}

.texte-long { max-width: 780px; }
.texte-long h2 { margin: 34px 0 10px; }
.texte-long p, .texte-long li { color: var(--texte); }
.texte-long ol, .texte-long ul { padding-left: 22px; }
.texte-long li { margin: 5px 0; }
table { border-collapse: collapse; width: 100%; font-size: 14px; margin: 10px 0 6px; }
th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--bord); }
th { color: var(--texte-2); font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.06em; }
td.num { font-variant-numeric: tabular-nums; }
.verdict-ok { color: var(--ok); }
.verdict-ko { color: var(--danger); }
.effet-ligne { display: flex; gap: 10px; align-items: flex-start; }
.effet-ligne .ico { width: 20px; height: 20px; margin-top: 3px; }
.barre-progres { height: 6px; background: var(--surface); border-radius: 3px; overflow: hidden; margin: 14px 0; }
.barre-progres span { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.2s; }
.note { color: var(--texte-2); font-size: 13.5px; }

/* ---------------------------------------------------------- notifications */

#notifications { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 200; display: grid; gap: 8px; }
.notification {
  padding: 11px 18px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--bord);
  box-shadow: var(--ombre); animation: fondu 0.2s; max-width: 90vw;
}
.notification.erreur { border-color: var(--danger); color: var(--danger); }

@media (max-width: 640px) {
  .ecran { padding: 20px 16px 50px max(16px, var(--retrait)); }
  /* Les cinq onglets, le Son et le Decor sur une ligne : onglets raccourcis,
     Decor reduit a son echantillon. */
  .barre { gap: 6px; padding: 0 8px 0 10px; }
  .marque { display: none; }
  .onglets { gap: 2px; }
  .onglets a { font-size: 15px; padding: 10px 6px 5px; }
  .onglets a.actif { padding-top: 15px; }
  .onglet-long, .tables-libelle { display: none; }
  .onglet-court { display: inline; }
  .barre-son { padding: 5px; }
  .barre-son + .tables { margin-left: 0; }
  .tables-bouton { padding: 5px 6px; }
  #ecran-jouer { padding: 10px 12px 24px; }
  .d-cahier { min-height: 0; }
  .d-cahier .cahier-droite { order: 0; border-radius: 0 0 10px 10px; }
  .d-cahier .cahier-gauche { border-radius: 10px 10px 0 0; padding-bottom: 30px; }
  .d-contre { position: relative; left: auto; top: auto; z-index: 3; justify-self: center; margin: -22px 0; transform: rotate(-6deg); }
  .d-adversaires { gap: 12px; }
  .d-adv small { display: none; }
  .d-adv b { font-size: 16px; }
  .d-bas { grid-template-columns: 1fr; justify-items: start; }
  .d-lancer { width: 100%; min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ------------------------------------------------------------------ voyage */
/* Sobre et contemplatif : la carte est dessinee sur la table (crayon, encre,
   craie), une couleur de crayon par region, traits fins, peu de mots, fondus
   lents. Sur le pupitre, une feuille est posee sur le bois. */

#ecran-voyage { padding: 0; max-width: none; }
/* L'ecran « Attends ! » du Voyage : les memes marges que celui du Duel. */
body.en-voyage .barre { display: none; }
body.en-voyage main { min-height: 100vh; }

.v-ecran, .table.voyage {
  --v-region: hsl(var(--teinte) var(--v-s) var(--v-l));
  --p-aplat: hsl(var(--teinte) var(--p-aplat-s) var(--p-aplat-l));
  --p-eau: hsl(var(--teinte) calc(var(--p-aplat-s) + 15%) var(--p-aplat-l));
  --p-soleil: hsl(var(--teinte) 70% 60%);
}
.v-ecran {
  position: relative; min-height: calc(100vh - 52px); overflow: hidden;
  display: flex; flex-direction: column;
  color: var(--v-encre);
  background-image: radial-gradient(ellipse 70% 60% at 50% 45%, hsl(var(--teinte) 50% 50% / var(--v-lavis)), transparent 75%);
}
body.en-voyage .v-ecran { min-height: 100vh; }
:root[data-table="tableau"] body.en-voyage .v-ecran { min-height: calc(100vh - 2 * var(--cadre-ep)); margin: var(--cadre-ep); }

/* La feuille posee sur le pupitre : petits carreaux, legere ombre. */
:root[data-table="pupitre"] .v-ecran {
  --retrait: 64px;
  margin: 22px clamp(10px, 3vw, 44px); border-radius: 3px;
  min-height: calc(100vh - 52px - 44px);
  background-color: var(--v-fond);
  background-image:
    radial-gradient(ellipse 70% 60% at 50% 45%, hsl(var(--teinte) 50% 50% / var(--v-lavis)), transparent 75%),
    linear-gradient(90deg, transparent 46px, rgb(214 84 76 / 0.4) 46px 47.5px, transparent 47.5px),
    repeating-linear-gradient(transparent 0 19px, rgb(110 140 205 / 0.2) 19px 20px),
    repeating-linear-gradient(90deg, transparent 0 19px, rgb(110 140 205 / 0.2) 19px 20px);
  box-shadow: 0 14px 34px rgb(0 0 0 / 0.5), 0 2px 4px rgb(0 0 0 / 0.3);
  color-scheme: light;
}
:root[data-table="pupitre"] body.en-voyage .v-ecran { min-height: calc(100vh - 44px); }
.v-fondu { animation: fondu 0.7s ease-out; }

.v-bandeau {
  display: flex; align-items: center; gap: 22px; padding: 18px 28px 18px max(28px, var(--retrait));
  font-size: 13px; letter-spacing: 0.06em; color: var(--v-doux);
}
.v-bandeau > span { display: inline-flex; align-items: center; gap: 7px; font: 18px/1 var(--v-police); }
/* Sur un ecran etroit, le bandeau passe a la ligne plutot que de cacher « Quitter ». */
@media (max-width: 640px) { .v-bandeau { flex-wrap: wrap; gap: 8px 16px; padding: 12px 16px; } }
.v-espace { flex: 1; }
.v-lanternes { gap: 6px !important; }
.v-lanterne {
  width: 9px; height: 13px; border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
  border: 1px solid color-mix(in srgb, var(--v-doux) 70%, transparent);
}
.v-lanterne.allumee {
  background: radial-gradient(circle at 50% 65%, #ffe2a0, #e6a845 60%, #b06a1c);
  border-color: transparent; box-shadow: 0 0 10px rgba(255, 190, 90, 0.55);
}
/* La monnaie du voyage : une bille, de la couleur de la region. */
.v-bille {
  display: inline-block; width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ffffff 0 16%, var(--v-region) 46%, color-mix(in srgb, var(--v-region) 55%, #000000) 100%);
  box-shadow: inset -1px -1px 0 rgb(0 0 0 / 0.18);
}
.v-talisman {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  border: 1.2px solid var(--v-region); font: 700 16px/1 var(--v-police); color: var(--v-region);
}
.v-talisman.grand { width: 56px; height: 56px; font-size: 32px; margin-bottom: 6px; }
.v-lien {
  background: none; border: 0; padding: 4px 2px; color: var(--v-doux); font: 18px/1.2 var(--v-police);
  text-decoration: none; display: inline-flex; gap: 6px; align-items: center;
}
.v-lien:hover { background: none; color: var(--v-encre); }
.v-lien.discret { color: color-mix(in srgb, var(--v-doux) 70%, transparent); }
.v-lien .ico { width: 14px; height: 14px; }

.v-centre {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; padding: 4vh 24px 6vh; text-align: center;
}
.v-titre { font: 700 clamp(52px, 8vw, 100px)/1 var(--v-police); letter-spacing: 0.02em; color: var(--v-encre); }
.v-sous { font: 21px/1.35 var(--v-police); color: var(--v-doux); margin: 0; max-width: 560px; }
.v-etiquette { font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--v-doux); margin: 0; }
.v-message { font: 21px var(--v-police); color: var(--v-actuel); margin: 0; }
.v-bouton {
  background: transparent; color: var(--v-encre); border: 1.5px solid color-mix(in srgb, var(--v-encre) 45%, transparent);
  border-radius: 999px; padding: 8px 30px; font: 700 21px/1.2 var(--v-police); letter-spacing: 0.04em;
  transition: border-color 0.4s, background 0.4s;
}
.v-bouton:hover { background: color-mix(in srgb, var(--v-region) 12%, transparent); border-color: var(--v-region); }
.v-bouton.petit { padding: 4px 12px; font-size: 17px; white-space: nowrap; }
.v-bouton:disabled, .v-tuile:disabled { opacity: 0.4; cursor: not-allowed; background: transparent; }
.v-avis { max-width: 520px; margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--v-doux); }
.v-avis a { color: var(--v-region); font-weight: 600; }
.v-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.v-carnet { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 4px; font: 19px/1.3 var(--v-police); color: var(--v-doux); }
.v-carnet li { display: grid; grid-template-columns: 70px 40px 100px 100px; gap: 10px; text-align: left; }

/* La brigade du Voyage : polaroids cliquables, places, choix des cartes */
/* Le depart : une feuille de carte au tresor posee sur la table, couleur
   papier quel que soit le decor. La brigade au depart du sentier, la premiere
   region dessinee, les suivantes dans la brume ; a droite, Partir et le carnet. */
.v-depart-feuille {
  --v-encre: #25272e; --v-doux: #6b6a64; --v-region: #2f6b3a; --feutre: #c0392b;
  position: relative; z-index: 1; display: grid; grid-template-columns: 1.6fr 1fr; gap: 3vw; overflow: hidden;
  width: min(1500px, calc(100% - 5vw)); min-height: max(600px, calc(100vh - 110px)); margin: 14px auto 16px; padding: 3% 4% 3%;
  background: #f6efdc; color: #25272e; border-radius: 6px; box-shadow: 0 14px 30px rgb(0 0 0 / 0.28), inset 0 0 80px rgb(160 120 60 / 0.18);
}
.v-depart-feuille .v-horizon { height: 28%; opacity: 0.9; }
.v-depart-gauche, .v-depart-droite { position: relative; z-index: 1; }
.v-depart-feuille .v-titre { margin: 0; color: #2f6b3a; font-size: clamp(52px, 5vw, 92px); }
.v-phrase { margin: 6px 0 0; font: 600 clamp(20px, 1.6vw, 28px) var(--manuscrit); color: #8a5a2b; }
.v-depart-carte { position: relative; height: clamp(340px, 54vh, 540px); margin-top: 8px; }
.v-depart-lanternes { position: absolute; left: 3%; top: 2%; display: flex; gap: 10px; color: #25272e; }
.v-depart-lanternes svg { width: 30px; height: 42px; }
.v-chemin { position: absolute; inset: 0; width: 100%; height: 100%; }
.v-chemin-sentier { fill: none; stroke: #8a5a2b; stroke-width: 3; stroke-dasharray: 2 10; stroke-linecap: round; }
.v-chemin-region { fill: none; stroke: #2f6b3a; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.v-chemin-chiffre { font: 700 34px var(--manuscrit); fill: #2f6b3a; }
.v-chemin-brume { fill: #f6efdc; stroke: #9a9488; stroke-width: 2; stroke-dasharray: 6 6; }
.v-chemin-question { font: 700 26px var(--manuscrit); fill: #9a9488; }
.v-depart-brigade { position: absolute; left: 0; bottom: 0; }
.v-depart-brigade .v-brigade { align-items: flex-start; }
.v-depart-brigade .v-brigade > .v-etiquette { display: none; }
.v-depart-brigade .v-brigade-rang { gap: 10px; }
.v-depart-brigade .v-place .polaroid, .v-depart-brigade .v-place-vide { width: clamp(70px, 6.4vw, 104px); }
.v-depart-brigade .v-place.chef .polaroid, .v-depart-brigade .v-place.chef .v-place-vide { width: clamp(88px, 8vw, 132px); }
.v-depart-brigade .v-place-vide { background: rgb(246 239 220 / 0.85); }
.v-depart-droite { display: flex; flex-direction: column; gap: 22px; }
.v-partir { min-height: clamp(160px, 24vh, 250px); }
.v-partir b { font-size: clamp(40px, 3.2vw, 58px); }
.v-depart-droite .v-avis { padding: 14px 16px 12px; background: #fdf1a8; box-shadow: 2px 4px 10px rgb(0 0 0 / 0.16); transform: rotate(1.5deg); font: 500 18px/1.25 var(--manuscrit); color: #25272e; }
.v-depart-droite .v-avis a { color: #2c3e7a; }
.v-carnet-feuille {
  position: relative; padding: 16px 18px 12px 46px; transform: rotate(-1.2deg); box-shadow: 0 6px 16px rgb(0 0 0 / 0.18);
  background: #fffdf7 repeating-linear-gradient(transparent 0 27px, rgb(110 140 190 / 0.28) 27px 28px); background-position: 0 44px;
}
.v-carnet-feuille::before { content: ""; position: absolute; top: 0; bottom: 0; left: 30px; width: 2px; background: rgb(214 80 80 / 0.5); }
.v-carnet-feuille h3 { margin: 0 0 4px; font: 700 26px var(--manuscrit); color: #25272e; }
.v-carnet-feuille .v-carnet { margin: 0; gap: 0; color: #25272e; font: 500 20px/28px var(--manuscrit); }
.v-carnet-feuille .v-carnet li { display: flex; gap: 12px; align-items: center; }
.v-tampon { margin-left: auto; padding: 0 8px; border: 2px solid currentColor; border-radius: 6px; font-size: 16px; line-height: 20px; transform: rotate(-4deg); }
.v-tampon.t-ok { color: #2f6b3a; } .v-tampon.t-ko { color: #c0392b; } .v-tampon.t-moyen { color: #8a5a2b; }
@media (max-width: 760px) {
  .v-depart-feuille { grid-template-columns: 1fr; width: calc(100% - 24px); padding: 18px 16px 26px; min-height: 0; }
  .v-depart-carte { height: 330px; }
  .v-partir { min-height: 0; }
}
.v-pola { position: relative; display: block; padding: 0; border: 0; background: none; cursor: pointer; }
.v-pola:hover { background: none; }
.v-pola .polaroid { transition: transform 0.2s; }
.v-pola:hover .polaroid { transform: rotate(var(--rot)) translateY(-3px); }
.v-brigade { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.v-brigade small { font: 17px var(--v-police); color: var(--v-doux); }
.v-brigade-rang { display: flex; align-items: flex-end; gap: 18px; }
.v-place { position: relative; display: flex; flex-direction: column; align-items: center; }
.v-place .polaroid { width: 100px; }
.v-place .polaroid figcaption { font-size: 18px; }
.v-place.chef .polaroid { width: 132px; }
.v-place-vide {
  width: 100px; aspect-ratio: 5 / 8.2; display: grid; place-items: center; padding: 8px; text-align: center;
  border: 2px dashed color-mix(in srgb, var(--v-doux) 60%, transparent); border-radius: 4px; background: none;
  font: 20px/1.1 var(--v-police); color: var(--v-doux); cursor: pointer;
}
.v-place-vide:hover { background: color-mix(in srgb, var(--v-region) 8%, transparent); color: var(--v-encre); }
.v-place.chef .v-place-vide { width: 132px; }
.v-place-vide b { display: block; font-size: 34px; font-weight: 400; }
.v-place-vide.ferme { opacity: 0.6; font-size: 15px; cursor: default; }
.v-place-vide.ferme:hover { background: none; color: var(--v-doux); }
.v-cadenas { display: block; width: 26px; height: 30px; margin: 0 auto 6px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.v-chef { position: absolute; z-index: 3; top: -26px; left: -14px; font: 700 22px/1 var(--manuscrit); color: var(--feutre); transform: rotate(-12deg); pointer-events: none; }
.v-chef svg { position: absolute; left: 30px; top: 14px; width: 34px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.v-couvertures { display: flex; flex-wrap: wrap; gap: 26px 22px; justify-content: center; max-width: 760px; max-height: 62vh; overflow-y: auto; padding: 16px; }
.v-couvertures .v-pola, .v-couvertures .polaroid { width: 104px; }
.v-couvertures .polaroid figcaption { font-size: 17px; }
@media (max-width: 759px) {
  .v-couvertures { gap: 18px 14px; }
  .v-couvertures .v-pola, .v-couvertures .polaroid { width: 86px; }
  .v-brigade-rang { gap: 8px; }
  .v-place .polaroid, .v-place-vide { width: 66px; }
  .v-place.chef .polaroid, .v-place.chef .v-place-vide { width: 84px; }
  .v-place .polaroid figcaption { font-size: 15px; }
  .v-place-vide { font-size: 16px; }
  .v-place-vide.ferme { font-size: 12px; padding: 4px; }
}

/* carte des sentiers */
.v-carte-zone { flex: 1; position: relative; overflow: hidden; min-height: 60vh; }
.v-carte { position: absolute; inset: 0; width: 100%; height: 100%; }
.v-region {
  position: absolute; top: 0; left: 0; right: 0; margin: 0; text-align: center; pointer-events: none;
  font: 700 28px var(--v-police); letter-spacing: 0.08em; color: var(--v-region);
}
.p-trait { stroke: var(--p-trait); }
.p-t1 { stroke-opacity: var(--p-o1); }
.p-t2 { stroke-opacity: var(--p-o2); }
.p-t3 { stroke-opacity: var(--p-o3); }
.p-sil { fill: var(--p-sil); }
.p-hachure { stroke: var(--p-trait); stroke-width: 0.7; opacity: 0.5; }
.p-aplat { fill: var(--p-aplat); fill-opacity: var(--p-aplat-op); }
.p-eau { fill: var(--p-eau); fill-opacity: var(--p-aplat-op); }
.p-galets { fill: var(--p-galet); }
.p-neige { fill: var(--p-neige); }
.p-soleil { fill: var(--p-soleil); fill-opacity: var(--p-soleil-op); }
.p-brumes { fill: var(--p-brume); }
.p-luciole { fill: var(--p-luciole); opacity: 0; animation: luciole 9s ease-in-out infinite; }
.p-courant { fill: none; stroke: var(--p-trait); stroke-opacity: var(--p-o2); stroke-dasharray: 14 22; animation: courant 16s linear infinite; }
.p-brume { opacity: 0.045; animation: brume 70s ease-in-out infinite alternate; }
@keyframes luciole { 20% { opacity: 0; } 45% { opacity: 0.85; } 70% { opacity: 0; } }
@keyframes courant { to { stroke-dashoffset: -144; } }
@keyframes brume { from { transform: translateX(-70px); } to { transform: translateX(70px); } }
.v-horizon { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 17vh; pointer-events: none; z-index: 0; opacity: 0.55; }
.v-ecran > .v-bandeau, .v-ecran > .v-centre, .v-ecran > .v-carte-zone { position: relative; z-index: 1; }
.v-sentier { stroke: var(--v-encre); stroke-opacity: 0.32; stroke-width: 1.3; stroke-dasharray: 1.5 7; stroke-linecap: round; }
.v-sentier.fait { stroke-opacity: 0.8; stroke-width: 1.7; stroke-dasharray: none; }
.v-sentier.ouvert { stroke: var(--v-region); stroke-opacity: 0.9; stroke-width: 1.6; }
/* Les lieux a l'encre pleine, leur nom toujours ecrit, le decor en retrait. */
.v-carte .p-paysage { opacity: 0.5; }
.v-lieu { color: var(--v-encre); cursor: help; transition: color 0.5s; }
.v-lieu .v-rond { fill: var(--v-fond); stroke: currentColor; stroke-width: 1.8; }
.v-lieu .v-glyphe { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.v-lieu .v-nom, .v-lieu .v-gain {
  fill: currentColor; font: 700 19px var(--v-police); text-anchor: middle;
  paint-order: stroke; stroke: var(--v-fond); stroke-width: 5px; stroke-linejoin: round;
}
.v-lieu .v-gain { font-size: 17px; }
.v-bille-svg .b1 { fill: var(--v-region); }
.v-bille-svg .b2 { fill: #ffffff; opacity: 0.85; }
.v-lieu.visite { color: color-mix(in srgb, var(--v-encre) 40%, transparent); }
.v-lieu.accessible { color: var(--v-region); cursor: pointer; animation: respire 3.6s ease-in-out infinite; }
.v-lieu.accessible:hover, .v-lieu.accessible.survol { animation: none; }
.v-lieu.accessible:hover .v-rond, .v-lieu.survol .v-rond { stroke-width: 2.8; fill: color-mix(in srgb, var(--v-region) 12%, var(--v-fond)); }
.v-lieu.actuel { color: var(--v-actuel); }
/* le lieu ou l'on se trouve, entoure comme une correction */
.v-cercle { fill: none; stroke: var(--v-actuel); stroke-width: 1.5; stroke-linecap: round; }
.v-cercle ellipse + ellipse { stroke-width: 1; }
@keyframes respire { 50% { opacity: 0.6; } }
/* L'entree dans une region : le chiffre seul sur fond uni, qui s'efface
   avant que le voile ne se leve sur la carte. */
.v-entree {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  font: 700 clamp(110px, 20vw, 240px)/1 var(--v-police); letter-spacing: 0.06em; color: var(--v-region);
  background-color: var(--v-fond); animation: entree-region 3.2s ease-in-out forwards;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
}
.v-entree > * { animation: entree-chiffre 3.2s ease-in-out forwards; }
.v-entree small { font: 700 34px var(--v-police); letter-spacing: 0.2em; color: var(--v-doux); }
@keyframes entree-region { 0%, 62% { opacity: 1; } 100% { opacity: 0; } }
@keyframes entree-chiffre { 0% { opacity: 0; } 15%, 38% { opacity: 1; } 55%, 100% { opacity: 0; } }

/* La fiche d'un lieu, au survol ou au premier appui, en haut a droite (les lieux
   occupent le milieu de la carte), et la legende en bas. */
.v-fiche {
  position: absolute; right: max(24px, 3vw); top: 6px; z-index: 3; width: 300px; display: grid; gap: 4px; padding: 12px 16px 14px;
  background: color-mix(in srgb, var(--v-fond) 94%, transparent); border: 1.5px solid var(--v-region); border-radius: 12px;
  font: 19px/1.25 var(--v-police); color: var(--v-encre); text-align: left;
}
.v-fiche[hidden] { display: none; }
.v-fiche b { display: flex; align-items: center; gap: 8px; font-size: 24px; }
.v-fiche b svg { width: 26px; height: 26px; fill: none; stroke: var(--v-region); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.v-fiche small { color: var(--v-doux); font-size: 17px; }
.v-fiche .v-bille { vertical-align: -1px; margin: 0 1px; }
.v-fiche .v-bouton { justify-self: start; margin-top: 6px; }
.v-legende {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 3;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 22px; width: min(1180px, 94%); padding: 8px 16px;
  background: color-mix(in srgb, var(--v-fond) 90%, transparent); border: 1.2px solid color-mix(in srgb, var(--v-encre) 22%, transparent); border-radius: 12px;
  font: 18px/1.15 var(--v-police); color: var(--v-encre);
}
.v-legende > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.v-legende svg { width: 20px; height: 20px; fill: none; stroke: var(--v-encre); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.v-legende small { color: var(--v-doux); font-size: 16px; }
.v-legende .v-lien { font-size: 16px; padding: 0 2px; }

/* Sur telephone, la carte en hauteur, a la largeur de l'ecran ; la fiche et
   la legende se posent en bas, au-dessus de la carte. */
@media (max-width: 760px) {
  .v-carte-zone { min-height: 0; overflow: visible; display: flex; flex-direction: column; }
  .v-carte { position: static; display: block; width: 100%; height: auto; }
  .v-region { position: static; order: -1; font-size: 24px; margin: 2px 0 0; }
  .v-lieu .v-nom { font-size: 17px; }
  .v-lieu .v-gain { font-size: 16px; }
  .v-fiche, .v-legende { position: fixed; top: auto; bottom: 12px; left: 12px; right: 12px; width: auto; transform: none; z-index: 20; }
  .v-fiche { z-index: 21; }
  .v-legende { gap: 4px 14px; font-size: 16px; }
}

/* lieux */
.v-tete { display: grid; justify-items: center; gap: 10px; }
.v-glyphe-titre { width: 46px; height: 46px; fill: none; stroke: var(--v-region); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.v-titre-lieu { font: 700 44px/1 var(--v-police); letter-spacing: 0.02em; color: var(--v-encre); }
.v-rangee { display: flex; gap: 28px; justify-content: center; flex-wrap: wrap; }
.v-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 16px; width: min(1100px, 92vw); }
.v-carte-choix { cursor: pointer; transition: transform 0.4s ease, opacity 0.4s; }
.v-carte-choix:hover { transform: translateY(-6px); }
.v-carte-choix.grande { width: clamp(170px, 19vw, 280px); }
.v-carte-choix.choisie .carte { box-shadow: 0 0 0 3px var(--v-actuel), 0 0 26px color-mix(in srgb, var(--v-actuel) 35%, transparent); }
.v-offre { display: grid; gap: 10px; justify-items: center; width: clamp(140px, 14vw, 200px); }
.v-offre .v-carte-choix { width: 100%; }
.v-offre.vendue { opacity: 0.35; }
.v-prix { font: 19px var(--v-police); color: var(--v-doux); }
.v-pouvoir { max-width: clamp(170px, 19vw, 280px); margin: 10px auto 0; font: 17px/1.25 var(--v-police); color: var(--v-doux); text-align: center; }
.v-tuile {
  display: grid; justify-items: center; gap: 4px; width: 220px; padding: 22px 18px; text-align: center;
  background: color-mix(in srgb, var(--v-encre) 4%, transparent); border: 1.2px solid color-mix(in srgb, var(--v-encre) 22%, transparent); border-radius: 14px;
  color: var(--v-encre); font-weight: 400;
}
.v-tuile b { font: 700 23px var(--v-police); }
.v-tuile small { color: var(--v-doux); font-size: 13px; line-height: 1.4; }
.v-tuile:hover { background: color-mix(in srgb, var(--v-region) 10%, transparent); border-color: var(--v-region); }
.v-tuile.petite { width: 190px; padding: 14px; }
.v-voile { position: absolute; inset: 0; z-index: 30; background: var(--v-voile); overflow-y: auto; display: flex; animation: fondu 0.5s; }
.v-annonce .v-centre { gap: 18px; }

/* combat du voyage : la table prend la couleur de la region */
.table.voyage {
  background: radial-gradient(ellipse at 50% 50%, hsl(var(--teinte) 50% 50% / calc(var(--v-lavis) * 1.4)), transparent 70%);
}

/* ------------------------------------------------------------- griffonnages */

.griffonnage { width: 100%; height: 100%; fill: none; stroke: #2b2b2b; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.griffonnage .plein { fill: #2b2b2b; stroke: none; }
.griffonnage .papier { fill: #fffdf7; }
.polaroid {
  position: relative; margin: 0; width: 170px; padding: 8px 8px 6px; background: #fffdf7;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.28); transform: rotate(var(--rot, 0deg));
}
.polaroid-photo { aspect-ratio: 1 / 0.95; background-repeat: no-repeat; display: grid; place-items: center; overflow: hidden; }
/* Une photo garde le format de sa carte, et les places vides de l'ouverture aussi. */
.polaroid.photo .polaroid-photo, .polaroid.vide .polaroid-photo { aspect-ratio: 5 / 7; }
.polaroid.sans-legende { padding-bottom: 22px; }
.polaroid figcaption { margin-top: 4px; text-align: center; font: 700 21px/1.1 var(--manuscrit); color: #25272e; }
.polaroid figcaption:empty::before { content: "\200b"; } /* une photo sans nom garde sa bande blanche */
.polaroid figcaption small { display: block; font-size: 16px; color: #c0392b; }
.scotch {
  position: absolute; z-index: 1; top: -9px; left: 50%; width: 58px; height: 18px; margin-left: -29px;
  background: rgb(240 228 190 / 0.85); transform: rotate(-4deg); box-shadow: 0 1px 2px rgb(0 0 0 / 0.12);
}
.lien-crayon { background: none; border: 0; padding: 4px 2px; font: 500 20px var(--manuscrit); color: var(--texte-3); text-decoration: underline; }
.lien-crayon:hover { background: none; color: var(--texte); }
@keyframes cligne { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }
@keyframes coucou { 0%, 60%, 100% { transform: translateY(0) rotate(0deg); } 70% { transform: translateY(-12px) rotate(-5deg); } 82% { transform: translateY(-4px) rotate(3deg); } }

/* ------------------------------------------------------------ page tournee */
/* D'un onglet a l'autre, sur ordinateur : l'ancien ecran, copie par-dessus le
   nouveau, tourne sur la reliure (tourne-page.js). */
.tourne-page { position: fixed; inset: 0; z-index: 15; pointer-events: none; perspective: 2400px; }
.tp-gauche, .tp-recto, .tp-verso { position: absolute; top: 0; bottom: 0; overflow: hidden; background-color: var(--fond); background-image: var(--fond-image); background-size: var(--fond-taille); }
.tp-gauche { left: 0; width: 50%; }
.tp-feuille { position: absolute; top: 0; bottom: 0; left: 50%; width: 50%; transform-origin: 0 50%; transform-style: preserve-3d; }
.tp-recto, .tp-verso { left: 0; right: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.tp-recto { background-position: calc(-1 * var(--moitie)) 0; }
.tp-verso { transform: rotateY(180deg); }
.tp-copie { position: absolute; }
.tp-copie > .ecran { display: block; }
.tourne-page * { animation: none !important; transition: none !important; }
.tp-reliure { position: absolute; top: 0; bottom: 0; left: 50%; width: 60px; margin-left: -30px; background: linear-gradient(90deg, transparent, rgb(0 0 0 / 0.22) 50%, transparent); }

/* ----------------------------------------------------------------- accueil */
/* Le cahier ouvert en double page, couleur papier quel que soit le decor :
   les devoirs a gauche, « Ta brigade » et les deux cartes-boutons a droite. */

#ecran-accueil { max-width: none; padding: 14px 2.5vw 16px; }
.cahier-double {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; width: min(1500px, 100%); height: max(620px, calc(100vh - 92px));
  margin: 0 auto; color: #25272e; filter: drop-shadow(0 14px 26px rgb(0 0 0 / 0.28));
}
.cahier-page {
  position: relative; min-width: 0; padding: 4.5% 5% 4% 9%;
  background: #fffdf7 repeating-linear-gradient(transparent 0 31px, rgb(110 140 190 / 0.28) 31px 32px); background-position: 0 70px;
}
.cahier-gauche { border-radius: 10px 0 0 10px; box-shadow: inset -26px 0 30px -18px rgb(0 0 0 / 0.22); }
.cahier-gauche::before { content: ""; position: absolute; top: 0; bottom: 0; left: 6%; width: 2px; background: rgb(214 80 80 / 0.55); }
.cahier-droite { display: flex; flex-direction: column; padding-left: 7%; border-radius: 0 10px 10px 0; box-shadow: inset 26px 0 30px -18px rgb(0 0 0 / 0.22); }
.cahier-anneaux {
  position: absolute; z-index: 2; left: 50%; top: 4%; bottom: 4%; width: 18px; margin-left: -9px; border-radius: 6px; opacity: 0.55;
  background: repeating-linear-gradient(transparent 0 26px, #9a9488 26px 32px, transparent 32px 46px);
}
.cahier-titre { margin: 0; font: var(--titre-graisse) clamp(46px, 4.4vw, 78px)/1 var(--titre); color: #2c3e7a; }
.cahier-phrase { margin: 8px 0 0; font: 600 clamp(22px, 1.7vw, 30px)/1.2 var(--manuscrit); color: #c0392b; }
.cahier-soir { margin: 34px 0 6px; font: 700 clamp(24px, 1.8vw, 30px) var(--manuscrit); }
.devoirs { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.8vh; }
.devoir {
  display: flex; align-items: baseline; justify-content: flex-start; gap: 6px 12px; flex-wrap: wrap; padding: 6px 4px; text-align: left;
  background: none; border: 0; font-weight: 400; color: #25272e;
}
.devoir:hover { background: none; }
.devoir:hover .devoir-titre { text-decoration: underline wavy rgb(44 62 122 / 0.6); text-underline-offset: 5px; }
.case { width: 28px; height: 28px; flex: none; align-self: center; fill: none; stroke: #25272e; stroke-width: 1.8; stroke-linejoin: round; }
.case .coche { stroke: #c0392b; stroke-width: 2.8; stroke-linecap: round; }
.devoir-titre { font: 700 clamp(26px, 2vw, 34px)/1.1 var(--manuscrit); }
.devoir.fait .devoir-titre { color: #8a8578; text-decoration: line-through; text-decoration-color: #c0392b; text-decoration-thickness: 2px; }
.devoir-detail { font: 500 clamp(18px, 1.35vw, 23px) var(--manuscrit); color: #2c3e7a; }
.album-lien { margin-top: 22px; padding: 0; background: none; border: 0; font: 600 clamp(19px, 1.4vw, 23px) var(--manuscrit); color: #2c3e7a; text-decoration: underline; text-underline-offset: 4px; }
.album-lien:hover { background: none; color: #2c3e7a; }
.cahier-jour { display: flex; align-items: flex-end; gap: 12px; margin: 4vh 0 0 16%; }
.cahier-jour .polaroid { width: clamp(120px, 9.5vw, 180px); }
.vedette-monstre { position: relative; width: clamp(120px, 9.5vw, 170px); transform: rotate(4deg); cursor: zoom-in; }
.legende-jour { margin: 0 0 8px; font: 500 clamp(17px, 1.2vw, 21px) var(--manuscrit); color: #2c3e7a; transform: rotate(-4deg); }
.monstre-marge { position: absolute; left: 1.2%; bottom: 4%; width: 54px; height: 54px; animation: coucou 7s ease-in-out infinite; }
.monstre-marge .griffonnage { stroke: #25272e; }
.monstre-marge .yeux { transform-box: fill-box; transform-origin: center; animation: cligne 4.6s infinite; }
.brigade-tete { display: flex; align-items: baseline; gap: 14px; margin: 0 0 10px; }
.brigade-tete h2 { margin: 0; font: 700 clamp(26px, 2vw, 34px) var(--manuscrit); color: #25272e; white-space: nowrap; }
.brigade-tete small { font: 500 clamp(17px, 1.2vw, 21px) var(--manuscrit); color: #2c3e7a; }
.brigade-tete .lien-crayon { padding: 0; border: 0; background: none; font: inherit; color: #2c3e7a; text-decoration: underline; cursor: pointer; }
.brigade-photos { flex: 1; display: flex; align-items: center; gap: 2.4vw; padding: 10px 0 18px 10px; }
.brigade-photos .polaroid { width: clamp(120px, 11vw, 210px); }
.brigade-photos .polaroid:first-child { width: clamp(150px, 13.5vw, 260px); }
.brigade-photos .polaroid figcaption { font-size: clamp(16px, 1.2vw, 22px); }
.cahier-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 3vw; margin: 2vh 0 3vh; padding: 0 2% 0 1%; }
.carte-bouton {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; min-height: clamp(150px, 24vh, 260px);
  padding: 7% 7% 6%; text-align: left; color: #25272e; background: #fffdf7; border: 2px solid #25272e; border-radius: 14px;
  box-shadow: 4px 5px 0 #25272e; cursor: pointer; transition: transform 0.2s;
}
.carte-bouton:hover { background: #fffdf7; transform: rotate(0deg) translateY(-6px) !important; }
.carte-bouton b { display: block; font: 700 clamp(28px, 2.2vw, 42px)/1.05 var(--manuscrit); }
.carte-bouton small { display: block; margin-top: 6px; font: 500 clamp(16px, 1.2vw, 21px) var(--manuscrit); color: #5b5a55; }
.carte-bouton.duel { transform: rotate(-2deg); border-color: #2c3e7a; box-shadow: 4px 5px 0 #2c3e7a; }
.carte-bouton.duel b { color: #2c3e7a; }
.carte-bouton.voyage { transform: rotate(2deg); border-color: #b5651d; box-shadow: 4px 5px 0 #b5651d; }
.carte-bouton.voyage b { color: #b5651d; }
.carte-bouton > .scotch { position: absolute; top: -12px; left: 50%; width: 70px; height: 22px; margin-left: -35px; background: rgb(236 222 170 / 0.8); transform: rotate(-3deg); }
.carte-bouton-illu { width: clamp(60px, 5.5vw, 105px); aspect-ratio: 1; background: center / contain no-repeat; }
.carte-bouton-illu .polaroid { width: 100%; }
@media (max-width: 760px) {
  #ecran-accueil { padding: 10px 12px 24px; }
  .cahier-double { grid-template-columns: 1fr; height: auto; }
  .cahier-anneaux, .monstre-marge { display: none; }
  .cahier-droite { order: -1; padding: 22px 18px 24px; border-radius: 10px 10px 0 0; box-shadow: none; }
  .cahier-gauche { padding: 22px 18px 18px 46px; border-radius: 0 0 10px 10px; box-shadow: inset 0 18px 18px -14px rgb(0 0 0 / 0.18); }
  .cahier-titre { font-size: 40px; }
  .devoir-titre { font-size: 24px; }
  .devoir-detail { font-size: 17px; }
  .cahier-jour { margin: 18px 0 0 10%; }
  .cahier-jour .polaroid { width: 110px; }
  .brigade-tete { flex-wrap: wrap; gap: 2px 10px; }
  .brigade-photos { gap: 12px; }
  .brigade-photos .polaroid { width: 84px; }
  .brigade-photos .polaroid:first-child { width: 104px; }
  .cahier-actions { grid-template-columns: 1fr; gap: 16px; }
  .carte-bouton { min-height: 0; padding: 18px 18px 14px; }
  .carte-bouton-illu { width: 64px; }
}

/* -------------------------------------------------------------- couverture */
/* Une fois par session, sur l'accueil : le cahier ferme, aux couleurs du dos
   des cartes. Ferme, seule la page de droite existe, recouverte et centree ;
   au clic, la couverture tourne sur la reliure (couverture.js). */

.scene-cahier { perspective: 2600px; }
.livre { position: relative; width: min(1500px, 100%); margin: 0 auto; transform-style: preserve-3d; }
.livre .cahier-double { width: 100%; }
.livre.ferme { transform: translateX(-25%); }
.livre.ferme .cahier-gauche, .livre.ferme .cahier-anneaux { opacity: 0; }
.couverture {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 50%; z-index: 5;
  transform-origin: 0 50%; transform-style: preserve-3d; cursor: pointer;
}
.couverture:focus-visible { outline: none; }
.couverture:focus-visible .face.avant { box-shadow: inset 0 0 0 10px #16191f, inset 0 0 0 13px #f2d16b, 0 20px 40px rgb(0 0 0 / 0.45); }
.face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 0 12px 12px 0; overflow: hidden; }
.face.avant {
  display: grid; place-items: center; align-content: center; gap: 4vh;
  background: repeating-linear-gradient(45deg, #1d2128 0 22px, #23282f 22px 44px);
  box-shadow: inset 0 0 0 10px #16191f, inset 0 0 0 13px rgb(230 180 80 / 0.7), 0 20px 40px rgb(0 0 0 / 0.45);
}
.face.arriere { transform: rotateY(180deg); border-radius: 12px 0 0 12px; background: #f3ecd9; box-shadow: inset -20px 0 30px -18px rgb(0 0 0 / 0.25); }
.medaillon { width: min(62%, 52vh); aspect-ratio: 1; }
.medaillon .yeux-c { transform-box: fill-box; transform-origin: center; animation: cligne 4.6s infinite; }
.phrase-couv { margin: 0; font: 600 clamp(22px, 2vw, 34px)/1.2 var(--manuscrit); color: #f1efe6; text-align: center; padding: 0 8%; }
.langues { display: flex; gap: 4px; align-items: center; font: 700 clamp(19px, 1.5vw, 26px) var(--manuscrit); color: rgb(241 239 230 / 0.8); margin-top: -1vh; }
.langues button { position: relative; padding: 4px 9px; border: 0; background: none; font: inherit; color: inherit; letter-spacing: 0.08em; cursor: pointer; }
.langues button:hover { color: #f1efe6; background: none; }
.langues button.choisie { color: #f2d16b; }
.langues button.choisie::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 0; height: 3px; border-radius: 3px; background: #f2d16b; transform: rotate(-3deg); }
.langues button[disabled] { opacity: 0.35; cursor: default; }
.langues i { font-style: normal; opacity: 0.5; }
.invite { font: 500 clamp(17px, 1.3vw, 22px) var(--manuscrit); color: #f2d16b; animation: respire 2.4s ease-in-out infinite; }
@keyframes respire { 50% { opacity: 0.45; } }
.ombre-page { position: absolute; top: 0; bottom: 0; left: 50%; width: 50%; z-index: 4; pointer-events: none; background: linear-gradient(90deg, rgb(0 0 0 / 0.45), rgb(0 0 0 / 0) 70%); opacity: 0; }
.livre .apparait { opacity: 0; }
/* Sans photo, de quoi en ajouter sous la brigade. */
.brigade-ajout { display: flex; flex-wrap: wrap; gap: 10px; margin: -6px 0 6px 10px; }
@media (max-width: 760px) {
  .livre.ferme { transform: none; }
  .livre.ferme .cahier-gauche { display: none; }
  .couverture, .ombre-page { left: 0; width: 100%; }
}

/* ------------------------------------------- aide a l'installation (iPhone) */
/* Une feuille de cahier posee en bas de l'ecran, une fleche vers « Partager ». */

.installer {
  position: fixed; left: 12px; right: 12px; bottom: 26px; z-index: 300; max-width: 460px; margin: 0 auto; padding: 16px 18px 14px; display: grid; gap: 8px;
  background: #fffdf7; border-radius: 6px; box-shadow: 0 14px 34px rgb(0 0 0 / 0.35); transform: rotate(-1deg); color-scheme: light;
  background-image: repeating-linear-gradient(transparent 0 25px, rgb(110 140 205 / 0.22) 25px 26px);
}
.installer::before { content: ""; position: absolute; top: 0; bottom: 0; left: 30px; width: 1.5px; background: rgb(214 84 76 / 0.45); }
.installer h3 { margin: 0 0 2px 22px; font: 700 26px/1.1 var(--manuscrit); color: #c0392b; display: flex; align-items: center; gap: 10px; }
.installer h3 img { width: 34px; height: 34px; border-radius: 8px; }
.installer ol { margin: 0 0 0 22px; padding: 0; list-style: none; display: grid; gap: 6px; font: 500 20px/1.25 var(--manuscrit); color: #25272e; }
.installer li { display: flex; align-items: center; gap: 10px; }
.installer li svg { flex: none; width: 26px; height: 26px; fill: none; stroke: #2d4a8a; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.installer small { margin-left: 22px; font: 500 16px/1.25 var(--manuscrit); color: #575a62; }
.installer button { justify-self: end; font: 700 19px var(--manuscrit); padding: 6px 20px; }
.installer-fleche { position: absolute; left: 50%; bottom: -28px; width: 40px; height: 30px; margin-left: -20px; }
.installer-fleche path { fill: none; stroke: #c0392b; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------- sans photo (« Attends ! ») */
/* Dans le cahier du Duel et sur la feuille du Voyage : les trois exemples
   dessines et un post-it, avec les boutons de photos. */

.sans-photo {
  display: grid; justify-items: start; gap: 6px; max-width: 460px; margin: 14px 0 6px; padding: 16px 18px 14px;
  background: #fdf1a8; box-shadow: 2px 4px 10px rgb(0 0 0 / 0.18); transform: rotate(-1deg); color: #25272e;
}
.sans-photo b { font: 700 clamp(22px, 1.8vw, 28px)/1.1 var(--manuscrit); color: #c0392b; }
.sans-photo p { margin: 0; font: 500 clamp(17px, 1.25vw, 20px)/1.25 var(--manuscrit); }
.sans-photo small { font: 500 16px/1.25 var(--manuscrit); color: #5b5a55; }
.sans-photo-boutons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.d-exemples, .v-exemples { display: flex; gap: 14px; align-items: flex-end; margin: 6px 0 4px; }
.d-exemples .polaroid, .v-exemples .polaroid { width: clamp(84px, 7vw, 120px); }
.d-exemples .polaroid figcaption, .v-exemples .polaroid figcaption { font-size: 17px; }
a.v-bouton { display: inline-block; text-decoration: none; }
.v-bouton.plein { background: var(--v-encre); color: var(--v-fond); border-color: var(--v-encre); }
.v-bouton.plein:hover { background: var(--v-region); border-color: var(--v-region); color: var(--v-fond); }

/* ------------------------------------------------------- copie corrigee */
/* Fin de partie : la copie, notee au stylo rouge par la maitresse. */

.voile-partie > .copie {
  --texte: #25272e; --texte-2: #575a62; --surface: rgb(255 255 255 / 0.7); --surface-2: #ffffff; --bord: rgb(0 0 0 / 0.2); --bord-fort: rgb(0 0 0 / 0.4);
  --accent: #2d4a8a; --sur-accent: #ffffff;
  position: relative; width: min(460px, 90vw); padding: 30px 34px 26px 66px; color: #25272e; color-scheme: light;
  background-color: #fbfaf5;
  background-image: linear-gradient(90deg, transparent 46px, rgb(214 84 76 / 0.55) 46px 47.5px, transparent 47.5px), repeating-linear-gradient(transparent 0 23px, rgb(110 140 205 / 0.3) 23px 24px);
  box-shadow: 0 16px 40px rgb(0 0 0 / 0.35); transform: rotate(-1.2deg); animation: copie 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes copie { from { transform: rotate(-6deg) translateY(30px); opacity: 0; } }
.copie .mention { margin: 0; font: 700 42px/1 var(--manuscrit); color: #c0392b; }
.copie-note { display: block; width: 150px; height: 96px; margin: -8px 0 2px -12px; }
.copie-note ellipse { fill: none; stroke: #c0392b; stroke-width: 2.6; }
.copie-note text { font: 700 42px var(--manuscrit); fill: #c0392b; text-anchor: middle; }
.copie-texte { margin: 8px 0 20px; font: 500 23px/1.25 var(--manuscrit); color: #2d4a8a; }
.copie-tampon {
  position: absolute; top: 24px; right: 24px; padding: 2px 12px; border: 2px solid #c0392b; border-radius: 6px;
  font: 700 22px var(--manuscrit); color: #c0392b; transform: rotate(12deg); animation: tampon 0.45s 0.3s both;
}
@keyframes tampon { from { transform: rotate(12deg) scale(2.4); opacity: 0; } to { transform: rotate(12deg) scale(1); opacity: 1; } }
.copie .actions { justify-content: flex-start; }
.copie.perdue { padding-right: 120px; }
.copie-fantome { position: absolute; right: 18px; bottom: 16px; width: 86px; height: 86px; }

/* ------------------------------------------------------------------- album */

.album { margin-top: 46px; }
.album-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
.album-compte { margin: 0; font: 700 22px var(--manuscrit); color: var(--accent); }
.album > .sous { margin: 4px 0 18px; }
.album-sous-titre { margin: 34px 0 14px; font-family: var(--titre); font-weight: var(--titre-graisse); font-size: 24px; }
.etoile-album { font-size: 15px; color: var(--texte-3); }
.etoile-album.trouvee { color: #e6b450; text-shadow: 0 0 6px rgb(230 180 80 / 0.6); }
.carte-mystere {
  display: grid; place-items: center; align-content: center; gap: 2px;
  background: radial-gradient(ellipse at 50% 42%, #2b2516, #121110 70%);
  box-shadow: 0 0 0 1.5px rgb(230 180 80 / 0.5), 0 6px 18px rgb(0 0 0 / 0.4);
}
.carte-mystere span { font: 700 46cqw/1 var(--manuscrit); color: #e6b450; opacity: 0.8; }
.vignette.masquee { cursor: default; }
.vignette.masquee:hover .carte { transform: none; }
.coulisses { margin-top: 40px; font-size: 13.5px; color: var(--texte-3); }
.actions.imprimeur { align-items: center; gap: 10px 16px; margin-top: 12px; }
.actions.imprimeur label { display: flex; gap: 6px; align-items: center; font-size: 13.5px; color: var(--texte-2); }
.actions.imprimeur select { width: auto; }

/* ------------------------------------------------- les cartes se dessinent */

@keyframes dessiner { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.carte.dessinee.entree .carte-photo,
.v-fondu .v-carte-choix .carte.dessinee .carte-photo { animation: dessiner 0.6s ease-out both; }
.v-fondu .v-rangee > :nth-child(2) .carte.dessinee .carte-photo { animation-delay: 0.15s; }
.v-fondu .v-rangee > :nth-child(3) .carte.dessinee .carte-photo { animation-delay: 0.3s; }
.v-fondu .v-rangee > :nth-child(4) .carte.dessinee .carte-photo { animation-delay: 0.45s; }

/* Sur le pupitre, l'accueil est une feuille posee sur le bois. */
:root[data-table="pupitre"] .cahier {
  --texte: #25272e; --texte-2: #575a62; --texte-3: #85878b; --accent: #2d4a8a; --sur-accent: #ffffff; --danger: #c0392b;
  --surface: rgb(255 255 255 / 0.6); --surface-2: #ffffff; --bord: rgb(0 0 0 / 0.2);
  color: var(--texte); padding: 30px 36px 36px; border-radius: 3px; color-scheme: light;
  background-color: #f7f2e4;
  background-image: repeating-linear-gradient(transparent 0 19px, rgb(110 140 205 / 0.2) 19px 20px), repeating-linear-gradient(90deg, transparent 0 19px, rgb(110 140 205 / 0.2) 19px 20px);
  box-shadow: 0 14px 34px rgb(0 0 0 / 0.5), 0 2px 4px rgb(0 0 0 / 0.3);
}
:root[data-table="pupitre"] .monstre-marge { left: 8px; }

/* ---------------------------------------------------------------- imprimer */
/* Imprimer chez soi : la fenetre de choix. Le PDF est fabrique par impression.js. */

.voile-impression {
  position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 4vh 4vw;
  background: var(--voile); backdrop-filter: blur(4px); animation: fondu 0.15s ease-out;
}
.boite-impression {
  width: min(520px, 94vw); display: grid; gap: 14px; padding: 26px 28px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--bord); box-shadow: var(--ombre);
}
.boite-impression h2 { font-size: 30px; }
.boite-impression p { margin: 0; }
.champ-impression { display: grid; gap: 6px; font-size: 13.5px; color: var(--texte-2); }
.case-impression-option { display: flex; gap: 10px; align-items: center; font-size: 14.5px; }
.boite-impression .actions { margin-top: 4px; }

.boite-impression .erreur { color: var(--danger); }

/* ------------------------------------------- alertes : pioche vide, regles */
/* Sans carte a piocher, on perd des PV : 1, puis 2, puis 3... Ca se voit.
   Les regles speciales du Voyage aussi (alerte au debut, rappel sous le heros). */

.heros { --attention: #b8680f; }
:root[data-table="tableau"] .heros, :root[data-table="pupitre"] .heros, :root[data-table="nuit"] .heros { --attention: #f2b45e; }
.heros .pioche.basse { color: var(--attention); font-weight: 700; }
.heros .pioche.vide { color: var(--danger); font-weight: 700; }
.heros.pioche-vide .polaroid { box-shadow: 0 0 0 3px var(--danger), 0 4px 12px rgb(0 0 0 / 0.28); }
.pioche-alerte {
  display: block; max-width: 180px; margin-top: 4px; padding: 3px 8px; border-radius: 6px; text-align: center;
  font: 600 12px/1.3 system-ui, sans-serif; color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent);
}
.pioche-alerte.basse { color: var(--attention); background: color-mix(in srgb, var(--attention) 14%, transparent); }
.alerte-table {
  position: absolute; z-index: 65; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-3deg);
  display: grid; justify-items: center; gap: 0.35em; padding: 0.9em 1.6em 0.8em; pointer-events: none; text-align: center;
  font-size: clamp(16px, 1.45vw, 24px); background: #fbfaf5;
  border: 3px solid #c0392b; border-radius: 12px; box-shadow: 0 14px 34px rgb(0 0 0 / 0.35);
  animation: alerte-entree 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.3), alerte-sortie 0.3s calc(var(--duree, 2200ms) - 250ms) forwards;
}
.alerte-table.haut { top: 30%; }
.alerte-table.bas { top: 66%; }
.alerte-table .alerte-titre { display: flex; align-items: center; gap: 0.3em; font: 700 2.3em/1 var(--manuscrit); color: #c0392b; }
.alerte-table .alerte-titre .ico { width: 0.85em; height: 0.85em; }
.alerte-table b { font: 700 1.7em/1.1 var(--manuscrit); color: #25272e; }
.alerte-table small { font: 500 0.8em/1.3 system-ui, sans-serif; color: #575a62; }
@keyframes alerte-entree { from { opacity: 0; transform: translate(-50%, -50%) rotate(-3deg) scale(1.7); } }
@keyframes alerte-sortie { to { opacity: 0; } }
.copie-raison { margin: -12px 0 18px; font: 500 19px/1.25 var(--manuscrit); color: #c0392b; }

.heros-regle {
  display: inline-flex; align-items: center; gap: 5px; max-width: 190px; margin-top: 4px; padding: 3px 8px; border-radius: 6px;
  font: 600 12px/1.3 system-ui, sans-serif; color: #0d4f5c; background: #c8f1f3; border: 1px solid #45b9c2;
}
.heros-regle .ico { width: 13px; height: 13px; flex: none; }

/* Une carte protegee le dit en toutes lettres : le halo seul ne suffisait pas. */
.marque-bouclier { display: none; }
.carte.protegee .marque-bouclier {
  position: absolute; z-index: 2; top: 4.5cqw; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 1.4cqw; padding: 1.4cqw 3.4cqw; border-radius: 4cqw;
  font: 700 7.5cqw/1 system-ui, sans-serif; color: #0d4f5c; background: #c8f1f3;
  box-shadow: 0 0 0 0.6cqw #45b9c2, 0 0.6cqw 2cqw rgba(0, 0, 0, 0.3);
}
.carte.protegee .marque-bouclier .ico { width: 7.5cqw; height: 7.5cqw; }
.flottant.bloque { white-space: nowrap; }

/* ---------------------------------------------------------------- commande */
/* Recevoir en vraies cartes (commande.js) : une page de cahier par-dessus le jeu. */

body.sans-defilement { overflow: hidden; }
.commande {
  position: fixed; inset: 0; z-index: 130; overflow-x: hidden; overflow-y: auto; color: #25272e;
  background: #f4efe3 repeating-linear-gradient(transparent 0 27px, rgb(120 140 170 / 0.18) 27px 28px);
  animation: fondu 0.15s ease-out;
}
.commande-tete {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 18px; padding: 14px 28px;
  background: rgb(250 247 240 / 0.96); border-bottom: 1px solid rgb(70 58 36 / 0.2);
}
.commande-tete h1 { margin: 0; font: 700 28px/1 var(--manuscrit); color: #25272e; }
.commande-etapes { display: flex; gap: 6px; margin-left: auto; font: 600 13px system-ui, sans-serif; color: #7a7569; }
.commande-etapes span { padding: 5px 10px; border-radius: 999px; border: 1px solid rgb(70 58 36 / 0.2); }
.commande-etapes span.ici { background: #2c3e7a; color: #fff; border-color: #2c3e7a; }
.commande-fermer { padding: 0 6px; border: 0; background: none; font: 26px/1 system-ui, sans-serif; color: #7a7569; cursor: pointer; }
.commande-corps { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; max-width: 1040px; margin: 0 auto; padding: 28px; }
.commande-coffret { position: relative; height: 430px; }
.commande-eventail { position: absolute; left: 120px; top: 0; width: 300px; height: 330px; }
.commande-pli { position: absolute; inset: 0; transform: rotate(var(--a)); transform-origin: 50% 120%; }
.commande-pli .carte { position: absolute; width: 150px; left: 90px; top: 40px; box-shadow: 0 6px 16px rgb(0 0 0 / 0.35); }
.etui {
  position: absolute; left: 30px; bottom: 0; width: 230px; height: 320px; display: flex; flex-direction: column; align-items: center;
  border-radius: 6px; background: #1d2230; box-shadow: 0 18px 40px rgb(0 0 0 / 0.4); transform: rotate(-3deg); overflow: hidden;
}
.etui-photo {
  width: 150px; height: 200px; margin-top: 26px; background: #d9d4c7 center / cover no-repeat;
  border: 6px solid #fffdf7; border-bottom-width: 22px; box-shadow: 0 4px 10px rgb(0 0 0 / 0.5); transform: rotate(2deg);
}
.etui b { margin-top: 12px; font: 700 34px/1 var(--manuscrit); color: #f1efe6; }
.etui small { max-width: 90%; margin-top: 4px; font: 600 17px/1.1 var(--manuscrit); color: #f2d16b; text-align: center; overflow-wrap: anywhere; }
.commande-bloc { margin-bottom: 18px; }
.commande-bloc h3 { margin: 0 0 8px; font: 700 22px var(--manuscrit); color: #25272e; }
.commande-ligne { margin: 0; display: flex; gap: 10px; padding: 9px 12px; border: 1px solid rgb(70 58 36 / 0.25); border-radius: 8px; background: #fffdf7; font: 15px system-ui, sans-serif; }
.commande-ligne small { margin-left: auto; color: #7a7569; }
.commande select, .commande input[type="text"] {
  width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid #c9c2b2; border-radius: 6px;
  background: #fff; color: #25272e; font: 600 16px system-ui, sans-serif;
}
.commande-nettete { padding: 10px 12px; border-radius: 8px; font: 14px/1.45 system-ui, sans-serif; background: #fffdf7; border: 1px solid rgb(70 58 36 / 0.2); }
.commande-nettete p { margin: 0; }
.commande-nettete.ok { background: #eaf4ee; border-color: #9cc7ad; }
.commande-nettete.alerte { background: #fff6e0; border-color: #e6c46a; }
.commande-nettete.alerte b { color: #8a5a00; }
.commande-nettete .lien { padding: 0; border: 0; background: none; font: inherit; color: #2c3e7a; text-decoration: underline; cursor: pointer; }
.commande-attente { color: #7a7569; }
.commande-prix { display: flex; align-items: baseline; gap: 12px; padding: 14px 16px; border-radius: 10px; background: #fffdf7; border: 1px solid rgb(70 58 36 / 0.25); }
.commande-prix strong { white-space: nowrap; font: 700 34px/1 var(--manuscrit); }
.commande-prix span { font: 14px/1.35 system-ui, sans-serif; color: #5b5a55; }
.commande-bientot { margin: 12px 0 0; font: 13.5px/1.4 system-ui, sans-serif; color: #7a7569; }
.commande-pied { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
@media (max-width: 759px) {
  .commande-tete { flex-wrap: wrap; gap: 8px; padding: 12px 16px; }
  .commande-tete h1 { font-size: 24px; }
  .commande-etapes { order: 3; width: 100%; margin: 0; font-size: 11.5px; }
  .commande-fermer { margin-left: auto; }
  .commande-corps { grid-template-columns: 1fr; gap: 16px; padding: 16px; }
  .commande-coffret { width: 300px; margin: 0 auto -129px; transform: scale(0.7); transform-origin: top left; }
}