/* Le site hors du jeu : ce que Tailwind ne dit pas en une classe (les boutons, les étiquettes, le parchemin des pages
   légales). Les couleurs sont celles de tailwind.config.js, redites ici en variables. */
:root {
  --nuit: #0d0a07; --bois: #1c140c; --or: #d9a84a; --or-clair: #f0cf7a; --parchemin: #e8d9b5; --sang: #b4473c;
  color-scheme: dark;
}
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: radial-gradient(ellipse at top, #24180d 0%, var(--nuit) 55%) fixed, var(--nuit);
  color: var(--parchemin); font-family: 'EB Garamond', Georgia, serif; font-size: 1.125rem; line-height: 1.6;
  overflow-x: hidden;
}
[x-cloak] { display: none !important; }
h1, h2, h3, h4 { font-family: 'Cinzel', serif; color: var(--or-clair); line-height: 1.2; }
:focus-visible { outline: 2px solid var(--or-clair); outline-offset: 3px; border-radius: 4px; }

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .45rem 1rem;
  border: 1px solid var(--or); border-radius: 6px; color: var(--or-clair); background: rgba(217, 168, 74, .08);
  font-family: 'Cinzel', serif; font-weight: 700; letter-spacing: .04em; text-decoration: none; white-space: nowrap;
  transition: background .15s, transform .15s;
}
.bouton:hover { background: rgba(217, 168, 74, .2); }
.bouton.majeur { background: linear-gradient(#f0cf7a, #c98f2e); color: #1a1006; border-color: #f6dc95; box-shadow: 0 2px 10px rgba(217, 168, 74, .35); }
.bouton.majeur:hover { transform: translateY(-1px); background: linear-gradient(#f6dc95, #d9a84a); }
.bouton.grand { font-size: 1.35rem; padding: .8rem 2.4rem; }
@media (prefers-reduced-motion: reduce) { .bouton, .bouton.majeur:hover { transition: none; transform: none; } }

.etiquette {
  display: inline-block; padding: .1rem .6rem; border: 1px solid var(--sang); border-radius: 999px; color: #f3c2b8;
  background: rgba(180, 71, 60, .18); font-family: 'Cinzel', serif; font-size: .8rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase;
}
.lien { color: var(--or-clair); text-decoration: underline; text-decoration-color: rgba(240, 207, 122, .4); text-underline-offset: 3px; }
.lien:hover { text-decoration-color: var(--or-clair); }
.lien-menu { font-family: 'Cinzel', serif; font-size: .9rem; color: var(--parchemin); text-decoration: none; }
.lien-menu:hover { color: var(--or-clair); }
.choix-langue { background: var(--bois); color: var(--parchemin); border: 1px solid rgba(217, 168, 74, .5); border-radius: 6px; padding: .3rem .4rem; font: inherit; font-size: .95rem; }

/* Une capture du jeu dans son cadre doré. */
/* La présentation suit les étapes d'une expédition ; les images restent à côté du passage qu'elles expliquent. */
.aventure { max-width: 1160px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
.aventure-entete { margin: 0 auto 4rem; text-align: left; }
.aventure-invitation { max-width: 740px; margin: 0 auto 2rem; text-align: center; }
.aventure-rencontre { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(1.2rem, 3vw, 2rem); align-items: center; }
.aventure-peinture { margin: 0; border: 1px solid #d9a84a66; border-radius: 14px; overflow: hidden; background: #171008; box-shadow: 0 12px 40px #0007; }
.aventure-peinture img { display: block; width: 100%; height: auto; object-fit: contain; }
.aventure-intro { padding: clamp(1rem, 2vw, 1.75rem); border-left: 2px solid #d9a84a99; border-radius: 0 12px 12px 0; background: linear-gradient(110deg, #37241666, #1c140c33); font-size: 1.125rem; line-height: 1.5; }
.aventure-intro > p { margin: 0 0 1rem; }
.aventure-intro > p:last-of-type { margin-bottom: 0; }
.aventure-createur { margin: 1.25rem 0 0; padding-top: 1rem; border-top: 1px solid #d9a84a33; color: #e8d9b5bf; font-size: 1rem; line-height: 1.45; }
.aventure-createur p { margin: 0; }
.aventure-entete h2 { margin: 1.1rem 0; font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
.aventure-accroche { margin: 0; font-size: clamp(1.15rem, 2vw, 1.35rem); line-height: 1.4; }
.aventure-partage { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 1.5rem; margin-top: 1.5rem; padding: 1.25rem 1.5rem; border: 1px solid #d9a84a55; border-radius: 12px; background: linear-gradient(110deg, #49301b44, #1c140c66); }
.aventure-partage h3 { margin: 0 0 .5rem; font-size: 1.2rem; line-height: 1.3; }
.aventure-partage p { margin: 0; font-size: 1.1rem; line-height: 1.45; }
.aventure-partage .aventure-dividende { padding-left: 1.5rem; border-left: 1px solid #d9a84a55; color: var(--or-clair); font-weight: 600; }
.aventure-etape { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(2rem, 5vw, 4.5rem); padding: 3.5rem 0; border-bottom: 1px solid #d9a84a26; }
.aventure-inversee { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.aventure-etape:last-child { border-bottom: 0; }
.aventure-inversee .aventure-texte { order: 2; }
.aventure-inversee .aventure-visuel { order: 1; }
.aventure-numero { display: block; margin-bottom: .8rem; color: #d9a84a9e; font: 500 .9rem Cinzel, serif; letter-spacing: .18em; }
.aventure-texte h2 { margin: 0 0 1.5rem; font-size: clamp(1.55rem, 2.3vw, 2rem); text-wrap: balance; }
.aventure-texte p { margin: 0 0 .9rem; font-size: 1.19rem; line-height: 1.5; }
.aventure-texte .bouton { margin-top: .5rem; }
.aventure .aventure-visuel { align-self: center; }
.scene-vivante { position: relative; aspect-ratio: 3 / 2; background: #0d0a07; overflow: hidden; }
.scene-vivante > img { width: 100%; height: 100%; object-fit: cover; }
.scene-chargement { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: .65rem; padding: 1rem; color: #f2dcb4; background: #100d09c9; font-size: .95rem; text-align: center; }
.scene-chargement[hidden] { display: none; }
.scene-roue { flex: 0 0 auto; width: 1.3rem; height: 1.3rem; border: 2px solid #d6ad523b; border-top-color: #e6bc66; border-radius: 50%; animation: scene-attente .85s linear infinite paused; }
.scene-visible .scene-roue { animation-play-state: running; }
@keyframes scene-attente { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .scene-roue { animation: none; } }
.scene-jeu { position: absolute; inset: 0; width: var(--scene-largeur); height: var(--scene-hauteur); transform: scale(var(--scene-echelle, 1)); transform-origin: top left; border: 0; opacity: 0; pointer-events: none; }
.scene-prete .scene-jeu { opacity: 1; }
.scene-prete > img { visibility: hidden; }
.scene-commande { position: absolute; right: .7rem; bottom: .7rem; z-index: 2; border: 1px solid #d9a84a99; border-radius: 5px; padding: .25rem .65rem; background: #100c08ed; color: var(--or-clair); cursor: pointer; font: inherit; font-size: .9rem; }
.aventure-complements { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: #d9a84a40; }
.aventure-complements figure { margin: 0; background: var(--nuit); }
.aventure-complements img { aspect-ratio: 16 / 9; object-fit: cover; }
.aventure-complements figcaption { font-size: .85rem; }
.aventure-visuel > img { aspect-ratio: 3 / 2; object-fit: cover; }
.aventure-nature-morte { min-height: 310px; padding: 2rem; display: grid; grid-template-columns: 1fr 1fr; place-items: center; gap: 1rem; background: radial-gradient(ellipse at center, #57371c 0%, #24190f 48%, #100d09 100%); }
.aventure-nature-morte img { width: 100%; max-height: 170px; object-fit: contain; filter: drop-shadow(0 10px 15px #0009); }
.aventure-cuisine img, .aventure-forge img { max-height: 240px; }
.aventure-compagnons { grid-template-columns: repeat(3, 1fr); padding: 2.5rem 1.1rem; gap: .7rem; }
.aventure-compagnons img { border-radius: 50%; border: 1px solid #d9a84a66; }
.aventure-galerie { max-width: 1160px; margin: 0 auto 3rem; border: 1px solid #d9a84a40; border-radius: 10px; }
.aventure-galerie > summary { padding: 1.5rem; cursor: pointer; font: 500 1.15rem Cinzel, serif; color: var(--or-clair); }
.aventure-galerie-texte { padding: 0 1.5rem 1rem; }
@media (max-width: 760px) {
  .aventure { padding: 1rem 1rem 2rem; }
  .aventure-entete { margin-bottom: 1.5rem; }
  .aventure-invitation { margin-bottom: 1.3rem; }
  .aventure-rencontre, .aventure-partage { grid-template-columns: minmax(0, 1fr); }
  .aventure-partage { gap: .9rem; padding: 1rem; }
  .aventure-partage .aventure-dividende { padding: .9rem 0 0; border-left: 0; border-top: 1px solid #d9a84a55; }
  .aventure-etape { grid-template-columns: minmax(0, 1fr); gap: 1.3rem; padding: 2.5rem 0; }
  .aventure-inversee .aventure-texte, .aventure-inversee .aventure-visuel { order: initial; }
  .aventure-texte h2 { margin-bottom: 1.1rem; }
  .aventure-texte p { font-size: 1.125rem; }
  .aventure-nature-morte { min-height: 240px; padding: 1.3rem; }
  .aventure-nature-morte img { max-height: 130px; }
  .aventure-cuisine img, .aventure-forge img { max-height: 200px; }
  .aventure-galerie { margin-left: 1rem; margin-right: 1rem; }
}

.cadre { margin: 0; border: 1px solid rgba(217, 168, 74, .45); border-radius: 10px; overflow: hidden; background: #000; box-shadow: 0 10px 40px rgba(0, 0, 0, .6); }
.cadre img { display: block; width: 100%; height: auto; }
.cadre figcaption { padding: .55rem .9rem; font-size: .95rem; font-style: normal; color: rgba(232, 217, 181, .85); background: var(--bois); border-top: 1px solid rgba(217, 168, 74, .25); }
.carte-rangee { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 640px) { .carte-rangee { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .carte-rangee { grid-column: 1 / -1; } }
/* Le nom d'une scène sous sa vignette (une pièce de la maison) : court, droit, à la manière des titres. */
.cadre .cadre-nom { margin: 0; padding: .45rem .7rem; font-family: Cinzel, serif; font-size: .82rem; letter-spacing: .02em; line-height: 1.3; color: var(--or-clair); background: var(--bois); border-top: 1px solid rgba(217, 168, 74, .25); }

/* Les pages légales : le parchemin, et ce qui reste à remplir. */
.document h2 { font-size: 1.25rem; margin: 2rem 0 .6rem; }
.document p { margin: 0 0 .8rem; }
.document ul { margin: 0 0 .8rem 1.3rem; list-style: disc; }
mark.a-remplir { background: rgba(180, 71, 60, .25); color: #ffd9d2; border: 1px dashed #e08a7e; border-radius: 4px; padding: 0 .3rem; font-style: normal; }

/* ---- Les couleurs des rangs et des éclats, celles du jeu (Phil) : 1 gris, 2 vert, 3 bleu, 4 violet, 5 orange, l'ultime jaune. */
.rang-1, .eclat-gris { --teinte: #a7a9ac; --fond-teinte: rgba(60, 60, 62, .55); }
.rang-2, .eclat-vert { --teinte: #6fbf4a; --fond-teinte: rgba(28, 46, 20, .7); }
.rang-3, .eclat-bleu { --teinte: #4f93e6; --fond-teinte: rgba(18, 34, 58, .7); }
.rang-4, .eclat-violet { --teinte: #a565de; --fond-teinte: rgba(40, 22, 56, .7); }
.rang-5, .eclat-orange { --teinte: #f08c2a; --fond-teinte: rgba(60, 32, 10, .7); }
.eclat-jaune { --teinte: #f0c030; --fond-teinte: rgba(58, 44, 12, .7); }

/* ---- La carte qui vit (carte-animee.js), reprise de DB&B. Tout est posé en % de l'image et mesuré en `cqw`. */
.demo-carte { position: relative; overflow: hidden; container-type: inline-size; }
.demo-carte > img { display: block; width: 100%; height: auto; }
.demo-medaillon {
  position: absolute; z-index: 1; width: clamp(26px, 7.4cqw, 54px); aspect-ratio: 1; border-radius: 50%;
  border: 2px solid var(--teinte, var(--or)); background: #0a0806; box-shadow: 0 2px 8px rgba(0, 0, 0, .8), 0 0 0 1px #0a0806;
  transform: translate(-50%, -50%) scale(0); opacity: 0; transition: transform .45s cubic-bezier(.2, 1.6, .4, 1), opacity .3s, box-shadow .3s;
}
.demo-medaillon > img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.demo-medaillon.la { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.demo-medaillon.visee, .demo-medaillon.but { transform: translate(-50%, -50%) scale(1.3); z-index: 2; box-shadow: 0 2px 10px rgba(0, 0, 0, .8), 0 0 18px var(--teinte, var(--or-clair)); }
.demo-pastille {
  position: absolute; right: -22%; bottom: -16%; display: grid; place-items: center; width: 1.5em; height: 1.5em;
  font: 700 clamp(9px, 2.2cqw, 15px)/1 'Cinzel', serif; color: #140d05; background: var(--teinte, var(--or)); border: 1px solid #140d05; border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .8);
}
.demo-inconnu { display: grid; place-items: center; width: 100%; height: 100%; font: 700 clamp(12px, 3.4cqw, 24px)/1 'Cinzel', serif; color: #d9c2ff; border-radius: 50%; background: radial-gradient(circle, #2a1a3a, #0a0806); }
/* (La porte sans nom : bord en pointillés, et elle BAT, comme dans le jeu.) */
.demo-medaillon.mystere { border-style: dashed; border-color: #c9a8ff; --teinte: #c9a8ff; }
.demo-medaillon.mystere.la { animation: demo-mystere 2.4s ease-in-out infinite; }
@keyframes demo-mystere { 0%, 100% { box-shadow: 0 0 0 0 rgba(190, 140, 255, 0), 0 0 6px rgba(190, 140, 255, .35); } 50% { box-shadow: 0 0 0 5px rgba(190, 140, 255, .28), 0 0 18px rgba(190, 140, 255, .75); } }
/* (Un donjon écrit, qui ne paraît que pour vous : double liseré d'or et son sceau.) */
.demo-medaillon.scripte { box-shadow: 0 2px 8px rgba(0, 0, 0, .8), 0 0 0 2px #0a0806, 0 0 0 4px var(--or-clair), 0 0 14px rgba(255, 210, 120, .55); }
.demo-sceau { position: absolute; left: -20%; top: -18%; display: grid; place-items: center; width: 1.4em; height: 1.4em; font: 700 clamp(9px, 2cqw, 14px)/1 'Cinzel', serif; color: #140d05; background: var(--or-clair); border: 1px solid #140d05; border-radius: 50%; }
.demo-bourg { border-color: var(--or-clair); width: clamp(28px, 8cqw, 58px); }
.demo-bete { width: clamp(40px, 12cqw, 86px); border: 3px solid #c93a30; background: radial-gradient(circle, #6e1a14, #1a0806); box-shadow: 0 0 16px rgba(201, 58, 48, .6); }
.demo-vigueur { position: absolute; left: 8%; right: 8%; bottom: -14%; height: 9%; min-height: 3px; border-radius: 3px; background: linear-gradient(90deg, #e04a3a 72%, #3a1410 72%); border: 1px solid #140d05; }
.demo-route { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.demo-route.la { opacity: 1; }
.demo-route path { fill: none; stroke: #ffe9a8; stroke-width: .8; stroke-linecap: round; filter: drop-shadow(0 0 3px #000) drop-shadow(0 0 5px rgba(240, 200, 96, .8)); stroke-dasharray: 1; stroke-dashoffset: 1; }
.demo-route.tracee path { stroke-dashoffset: 0; transition: stroke-dashoffset 2s ease-in-out; }
.demo-curseur {
  position: absolute; left: 86%; top: 88%; z-index: 6; opacity: 0; pointer-events: none;
  transition: left .9s cubic-bezier(.5, 0, .2, 1), top .9s cubic-bezier(.5, 0, .2, 1), opacity .4s, transform .12s; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .8));
}
.demo-curseur.la { opacity: 1; }
.demo-curseur.clic { transform: scale(.78); }
.demo-fiche {
  position: absolute; z-index: 4; left: 50%; top: 50%; width: min(88%, 430px); transform: translate(-50%, -46%) scale(.9); opacity: 0; pointer-events: none;
  background: linear-gradient(180deg, #2a1d13, #1b130d); border: 1px solid var(--or); border-radius: 4px;
  box-shadow: 0 0 0 100vmax rgba(6, 4, 3, .55), 0 18px 50px rgba(0, 0, 0, .85); transition: transform .3s cubic-bezier(.2, 1.3, .4, 1), opacity .25s;
}
.demo-fiche.ouverte { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.demo-affiche { position: relative; display: grid; place-items: center; min-height: clamp(96px, 30cqw, 180px); padding: 12px 10px; background: #17100a center / cover no-repeat; border-bottom: 1px solid #6b5125; }
.demo-affiche::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(8, 5, 3, .2), rgba(8, 5, 3, .7)); }
.demo-cartouche { position: relative; max-width: 94%; padding: 8px 12px 7px; text-align: center; background: rgba(12, 8, 5, .86); border: 1px solid var(--or); outline: 1px solid rgba(201, 151, 47, .35); outline-offset: 3px; }
.demo-cartouche h3 { margin: 0 0 2px; font-size: clamp(.7rem, 3.4cqw, 1.05rem); }
.demo-dit { margin: 0; font-size: clamp(.62rem, 2.8cqw, .9rem); line-height: 1.3; color: rgba(232, 217, 181, .9); }
.demo-chances { margin: 4px 0 0; font: 700 clamp(.66rem, 3cqw, .95rem)/1.2 'Cinzel', serif; }
.demo-chances.bon { color: #9fd36a; }
.demo-chances.moyen { color: var(--or-clair); }
.demo-chances.mauvais { color: #e0654a; }
.demo-pied { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; }
.demo-rang { display: inline-flex; align-items: center; gap: .4em; font: 700 clamp(.58rem, 2.6cqw, .85rem)/1 'Cinzel', serif; color: var(--teinte); }
.demo-rang .demo-pastille { position: static; box-shadow: none; }
.demo-bouton { padding: 5px 10px; font: 700 clamp(.5rem, 2.3cqw, .72rem)/1.2 'Cinzel', serif; letter-spacing: .1em; text-transform: uppercase; color: #1a1006; background: linear-gradient(#f0cf7a, #c98f2e); border: 1px solid #f6dc95; border-radius: 3px; transition: transform .12s, filter .12s; }
.demo-bouton.presse { transform: scale(.94); filter: brightness(1.3); }
.demo-seuil { position: absolute; inset: 0; z-index: 5; opacity: 0; pointer-events: none; background: #120c07 center / cover no-repeat; transition: opacity .7s ease; }
.demo-seuil.la { opacity: 1; }
.demo-seuil-titre { position: absolute; left: 50%; top: 4%; max-width: 92%; overflow: hidden; text-overflow: ellipsis; transform: translateX(-50%); white-space: nowrap; padding: 4px 12px; font: 700 clamp(.58rem, 2.8cqw, .9rem)/1.2 'Cinzel', serif; letter-spacing: .06em; color: var(--or-clair); background: rgba(12, 8, 5, .82); border: 1px solid var(--or); }
.demo-gens { position: absolute; bottom: 14%; height: 42%; transform: translateX(-50%); transition: filter .2s, transform .2s; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .7)); }
.demo-gens[hidden] { display: none; }
.demo-gens img { height: 100%; width: auto; max-width: none; }
.demo-gens i, .demo-porte i {
  position: absolute; left: 50%; bottom: 102%; transform: translateX(-50%) translateY(4px); opacity: 0; white-space: nowrap; padding: 3px 8px;
  font: 400 clamp(.55rem, 2.5cqw, .8rem)/1.25 'EB Garamond', Georgia, serif; font-style: normal; color: #fff3d6;
  background: rgba(12, 8, 5, .92); border: 1px solid #6b5125; border-radius: 2px; transition: opacity .2s, transform .2s;
}
.demo-gens.survol { filter: drop-shadow(0 0 8px rgba(240, 200, 96, .9)) brightness(1.15); transform: translateX(-50%) scale(1.05); }
.demo-gens.survol i, .demo-porte.survol i { opacity: 1; transform: translateX(-50%); }
.demo-porte { position: absolute; border-radius: 6px; transition: box-shadow .25s, background .25s; }
.demo-porte i { bottom: auto; top: 104%; border-color: var(--or); color: var(--or-clair); }
.demo-porte.survol { background: rgba(240, 200, 96, .14); box-shadow: 0 0 0 2px rgba(240, 200, 96, .85), 0 0 26px rgba(240, 200, 96, .6); }
.demo-noir { position: absolute; inset: 0; z-index: 7; background: #000; opacity: 0; pointer-events: none; transition: opacity .8s ease; }
.demo-noir.la { opacity: 1; }
/* (Le donjon démo, joué dans son cadre - carte-animee.js : par-dessus la carte, sous le fondu au noir ; un lien le couvre : un clic, « Jouer ».) */
.demo-jeu { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; border: 0; background: #000; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .8s ease, visibility 0s linear .8s; }
.demo-jeu.la { opacity: 1; visibility: visible; transition: opacity .8s ease; }
.demo-jeu-lien { position: absolute; inset: 0; z-index: 8; display: none; cursor: pointer; }
.demo-carte.en-jeu .demo-jeu-lien { display: block; }
@media (prefers-reduced-motion: reduce) {
  .demo-medaillon, .demo-curseur, .demo-fiche, .demo-seuil, .demo-noir, .demo-route.tracee path { transition: none; }
  .demo-medaillon.mystere.la { animation: none; box-shadow: 0 0 12px rgba(190, 140, 255, .6); }
}

/* ---- Un personnage du jeu qui parle : sa tête, et sa bulle (au téléphone, la tête passe au-dessus). */
.parole { display: grid; grid-template-columns: 7.5rem 1fr; align-items: center; gap: .9rem; margin: 0; }
.parole-tete { width: 100%; height: auto; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .7)); }
.parole-bulle {
  position: relative; margin: 0; padding: .9rem 1.1rem; border: 1px solid rgba(217, 168, 74, .55); border-radius: 12px;
  background: linear-gradient(180deg, #2a1d13, #1b130d); box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}
/* (La pointe de la bulle, tournée vers la tête.) */
.parole-bulle::before {
  content: ''; position: absolute; left: -9px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%) rotate(45deg);
  background: #231810; border-left: 1px solid rgba(217, 168, 74, .55); border-bottom: 1px solid rgba(217, 168, 74, .55);
}
.parole-qui { margin: 0 0 .15rem; font: 700 .8rem/1.3 'Cinzel', serif; letter-spacing: .08em; text-transform: uppercase; color: var(--or); }
.parole-bulle h3 { margin: 0 0 .35rem; font-size: 1.15rem; }
.parole-bulle p:last-child { margin: 0; }
@media (max-width: 560px) {
  .parole { grid-template-columns: 1fr; justify-items: center; gap: .6rem; }
  .parole-tete { width: 7rem; }
  .parole-bulle::before { left: 50%; top: -9px; transform: translateX(-50%) rotate(135deg); }
}

/* ---- Le butin : chaque objet dans un cadre à la couleur de son éclat. */
.objet {
  display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: 1rem .8rem; text-align: center;
  border: 1px solid var(--teinte); border-radius: 10px; background: linear-gradient(180deg, var(--fond-teinte), rgba(13, 10, 7, .92));
  box-shadow: 0 6px 18px rgba(0, 0, 0, .6), 0 0 16px color-mix(in srgb, var(--teinte) 25%, transparent);
}
.objet img { width: 100%; max-width: 8.5rem; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .7)); background: radial-gradient(circle, color-mix(in srgb, var(--teinte) 30%, transparent), transparent 68%); }
.objet-eclat { margin: 0; font: 700 .72rem/1.2 'Cinzel', serif; letter-spacing: .1em; text-transform: uppercase; color: var(--teinte); }
.objet h4 { margin: 0; font-size: 1rem; }
.objet-dit { margin: 0; font-size: .95rem; line-height: 1.4; color: rgba(232, 217, 181, .85); }

/* ---- Un modèle 3D du jeu (volume.js) : sur un sol de torche, fond transparent. */
.volume { position: relative; aspect-ratio: 1 / 1.05; background: radial-gradient(ellipse at 50% 78%, #3a2814 0, #17100a 58%, #0f0b07 100%); }
.volume canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; transition: opacity .9s ease; }
.volume.volume-pret canvas { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .volume canvas { transition: none; } }

/* (Le logo de la saison est peint sur un fond sombre : ses bords se fondent dans la page.) */
.logo-saison { -webkit-mask-image: radial-gradient(ellipse at center, #000 58%, transparent 74%); mask-image: radial-gradient(ellipse at center, #000 58%, transparent 74%); }
.saison-texte ul, .seuil-texte ul { margin: 0 0 0 1.3rem; list-style: disc; }
.seuil-texte ul { display: grid; gap: .35rem; }

/* ---- La carte qui vit : ce que le coffre du fond peut contenir (sur la fiche), puis le coffre qui s'ouvre. */
.demo-lots { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 10px; border-bottom: 1px solid #6b5125; font-size: clamp(.55rem, 2.4cqw, .8rem); color: rgba(232, 217, 181, .85); }
.demo-lot { display: grid; place-items: center; width: clamp(22px, 7.5cqw, 40px); aspect-ratio: 1; border: 1px solid var(--teinte); border-radius: 4px; background: radial-gradient(circle, color-mix(in srgb, var(--teinte) 35%, transparent), rgba(13, 10, 7, .9) 70%); }
.demo-lot img { width: 86%; height: 86%; object-fit: contain; }
.demo-tresor { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; opacity: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 70%, #4a2e12 0, #120c07 60%, #050302 100%); transition: opacity .6s ease; }
.demo-tresor.la { opacity: 1; }
.demo-tresor-titre { position: absolute; left: 50%; top: 6%; transform: translateX(-50%); white-space: nowrap; padding: 4px 12px; font: 700 clamp(.6rem, 2.8cqw, .9rem)/1.2 'Cinzel', serif; letter-spacing: .06em; color: var(--or-clair); background: rgba(12, 8, 5, .82); border: 1px solid var(--or); }
.demo-tresor img.demo-coffre { position: absolute; left: 50%; bottom: 5%; width: clamp(60px, 18cqw, 120px); transform: translateX(-50%); filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .8)); }
.demo-tresor.ouvert img.demo-coffre { filter: drop-shadow(0 0 22px rgba(255, 200, 90, .75)) drop-shadow(0 8px 12px rgba(0, 0, 0, .8)); }
.demo-trouvaille {
  position: absolute; z-index: 1; left: 50%; bottom: 33%; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 10px 5px;
  border: 1px solid var(--teinte); border-radius: 6px; background: linear-gradient(180deg, var(--fond-teinte), rgba(13, 10, 7, .94));
  box-shadow: 0 0 18px color-mix(in srgb, var(--teinte) 45%, transparent); transform: translate(-50%, 30%) scale(.4); opacity: 0;
  transition: transform .7s cubic-bezier(.2, 1.4, .4, 1) .25s, opacity .4s ease .25s;
}
.demo-tresor.ouvert .demo-trouvaille { transform: translate(-50%, 0) scale(1); opacity: 1; }
.demo-trouvaille img { width: clamp(44px, 14cqw, 96px); aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .7)); }
.demo-trouvaille-eclat { font: 700 clamp(.5rem, 2cqw, .68rem)/1.2 'Cinzel', serif; font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--teinte); }
.demo-trouvaille b { font: 700 clamp(.6rem, 2.6cqw, .85rem)/1.2 'Cinzel', serif; color: #fff3d6; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .demo-tresor, .demo-trouvaille { transition: none; } }
/* (Ce qui n'a pas d'éclat - un meuble gagné au fond : le cadre d'or du site.) */
.demo-lot:not([class*='eclat-']), .demo-trouvaille:not([class*='eclat-']) { --teinte: var(--or-clair); --fond-teinte: rgba(58, 44, 12, .6); }
/* JAMAIS d'italique (Phil, 16 octobre 2026 : « pas d'italique JAMAIS ») : ni les balises qui en mettent d'office. */
em, i, cite, var, address, dfn { font-style: normal; }

/* ---- Un compagnon qui se présente : son portrait du jeu, son nom, son métier, sa phrase à lui, et ce qu'il sait faire. */
.compagnon {
  display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: 1.1rem 1rem 1.2rem; text-align: center;
  border: 1px solid rgba(217, 168, 74, .4); border-radius: 12px; background: linear-gradient(180deg, #2a1d13, #140e09); box-shadow: 0 8px 24px rgba(0, 0, 0, .55);
}
.compagnon img { width: 8.5rem; height: 8.5rem; border-radius: 50%; object-fit: cover; border: 2px solid var(--or); box-shadow: 0 6px 16px rgba(0, 0, 0, .7); }
.compagnon-mystere { display: grid; place-items: center; width: 8.5rem; height: 8.5rem; border-radius: 50%; border: 2px dashed var(--or); background: radial-gradient(circle, rgba(217, 168, 74, .18), rgba(13, 10, 7, .85)); box-shadow: 0 6px 16px rgba(0, 0, 0, .7); font-family: var(--font-titre, serif); font-size: 4rem; color: var(--or-clair, #f0c96a); }
.compagnon h3 { margin: .3rem 0 0; font-size: 1.2rem; }
.compagnon-titre { margin: 0; font: 700 .75rem/1.3 'Cinzel', serif; letter-spacing: .08em; text-transform: uppercase; color: var(--or); }
.compagnon-dit { margin: .4rem 0 .2rem; padding: .6rem .8rem; border-radius: 10px; background: rgba(13, 10, 7, .6); border: 1px solid rgba(217, 168, 74, .25); }
.compagnon-dit p { margin: 0; }
.compagnon-sait { margin: .3rem 0 0; font: 700 .72rem/1.2 'Cinzel', serif; letter-spacing: .08em; text-transform: uppercase; color: var(--or-clair); }
.compagnon-roles { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.compagnon-roles li { padding: .15rem .6rem; font-size: .9rem; border-radius: 999px; border: 1px solid rgba(143, 179, 106, .55); background: rgba(40, 56, 28, .45); }

/* ---- Une bête du bestiaire : sa vignette du jeu et son nom. */
.bete { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .5rem; text-align: center; border-radius: 10px; border: 1px solid rgba(217, 168, 74, .2); background: radial-gradient(circle at 50% 40%, #3a2814 0, #140e09 70%); }
.bete img { width: 100%; max-width: 7rem; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .8)); }
.bete p { margin: 0; font: 700 .78rem/1.25 'Cinzel', serif; color: var(--or-clair); }

/* ---- Une panoplie : ses cinq pièces côte à côte, à la couleur de son éclat. */
.panoplie {
  padding: 1rem .8rem; text-align: center; border: 1px solid var(--teinte); border-radius: 10px;
  background: linear-gradient(180deg, var(--fond-teinte), rgba(13, 10, 7, .92)); box-shadow: 0 6px 18px rgba(0, 0, 0, .6), 0 0 16px color-mix(in srgb, var(--teinte) 25%, transparent);
}
.panoplie h4 { margin: .2rem 0 .6rem; font-size: 1.05rem; }
.panoplie-pieces { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .3rem; align-items: center; }
.panoplie-pieces img { width: 100%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .7)); background: radial-gradient(circle, color-mix(in srgb, var(--teinte) 28%, transparent), transparent 68%); }

/* La FEUILLE DE ROUTE en frise (index.html) : des médaillons reliés par un chemin d'or, de « Aujourd'hui » vers ce qui arrive.
   Au téléphone, la frise descend ; dès 768 px, elle court de gauche à droite. */
.frise { position: relative; display: grid; gap: 28px; margin: 0; padding: 0 0 0 0; list-style: none; }
.frise::before { content: ''; position: absolute; left: 39px; top: 40px; bottom: 40px; width: 3px; border-radius: 3px; background: linear-gradient(var(--or-clair), rgba(217, 168, 74, .25)); }
.frise-etape { position: relative; display: grid; grid-template-columns: 80px 1fr; gap: 16px; align-items: center; }
.frise-medaillon { position: relative; z-index: 1; display: block; width: 80px; height: 80px; border-radius: 50%; overflow: hidden; border: 3px solid var(--or); background: var(--bois); box-shadow: 0 0 0 5px var(--nuit), 0 8px 24px rgba(0, 0, 0, .7); }
.frise-medaillon img { width: 100%; height: 100%; object-fit: cover; }
.frise-etape.fait .frise-medaillon { border-color: var(--or-clair); box-shadow: 0 0 0 5px var(--nuit), 0 0 22px rgba(240, 207, 122, .7); }
.frise-maintenant { display: inline-block; margin: 0 0 4px; padding: 1px 10px; border-radius: 999px; font: 700 12px 'Cinzel', serif; letter-spacing: .08em; text-transform: uppercase; color: var(--nuit); background: var(--or-clair); }
@media (min-width: 768px) {
  .frise { grid-template-columns: repeat(5, 1fr); gap: 16px; }
  .frise::before { left: 12%; right: 12%; top: 54px; bottom: auto; width: auto; height: 3px; background: linear-gradient(90deg, var(--or-clair), rgba(217, 168, 74, .25)); }
  .frise-etape { grid-template-columns: 1fr; justify-items: center; text-align: center; align-items: start; }
  .frise-medaillon { width: 108px; height: 108px; }
}

/* (La pose A d'un héros sur mesure, détourée, devant QUATRE décors du jeu qui passent l'un après l'autre en fondu - index.html,
   `persoDecors` de contenu.json. Sans mouvement voulu : le premier décor, fixe.) */
.decors-en-fondu { position: relative; aspect-ratio: 2 / 3; overflow: hidden; background: #140d07; }
.decors-en-fondu img:not(.pose) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: brightness(.55) saturate(.9); animation: decor-en-fondu 20s infinite; }
/* (Le gabarit d'Alpine est le premier enfant : les décors sont les enfants 2 à 5.) */
.decors-en-fondu img:nth-child(3) { animation-delay: 5s; }
.decors-en-fondu img:nth-child(4) { animation-delay: 10s; }
.decors-en-fondu img:nth-child(5) { animation-delay: 15s; }
.decors-en-fondu .pose { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .7)); }
@keyframes decor-en-fondu { 0% { opacity: 0; } 6% { opacity: 1; } 25% { opacity: 1; } 31% { opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .decors-en-fondu img:not(.pose) { animation: none; } .decors-en-fondu img:nth-child(2) { opacity: 1; } }

/* (Une étape de la feuille de route déjà FAITE - `pret` : son médaillon cerclé de vert, et « Disponible ».) */
.frise-etape.pret .frise-medaillon { border-color: #6fbf5a; box-shadow: 0 0 0 5px var(--nuit), 0 0 18px rgba(111, 191, 90, .65); }
.frise-pret { display: inline-block; margin: 0 0 4px; padding: 1px 10px; border-radius: 999px; font: 700 12px 'Cinzel', serif; letter-spacing: .08em; text-transform: uppercase; color: var(--nuit); background: #8fd47a; }

/* ── les nouveautés (contenu.json, `nouveautes`) */
.nouveaute { display: flex; flex-direction: column; gap: .75rem; padding: 1.25rem; border: 1px solid rgba(217, 168, 74, .3); border-radius: 12px; background: rgba(13, 10, 7, .6); }
.nouveaute.bientot { border-style: dashed; border-color: rgba(217, 168, 74, .5); }
.nouveaute-portraits { display: flex; gap: .75rem; }
.nouveaute-portraits img { width: calc(50% - .375rem); height: auto; border-radius: 10px; border: 1px solid rgba(217, 168, 74, .4); }

/* ── la Télé gobeline : le bouton qui l'allume et sa fenêtre (public/site/tele.js ; le poste : css/tele.css) */
.tele-vitrine { display: block; width: min(14rem, 60vw); margin: 0 auto; padding: 0; border: 0; background: none; cursor: pointer; }
.tele-vitrine-vue { display: grid; place-items: center; height: min(25rem, 70vw); }
.tele-vitrine-vue .tele-poste { width: auto; height: 100%; transition: transform .2s; }
.tele-vitrine:hover .tele-poste, .tele-vitrine:focus-visible .tele-poste { transform: scale(1.04); }
.tele-vitrine:focus-visible { outline: 2px solid var(--or-clair); outline-offset: 4px; }
.tele-voile { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 12px; background: rgba(0, 0, 0, .82); }
.tele-fenetre { display: grid; grid-template-rows: auto minmax(0, 1fr); width: min(46rem, 100%); height: min(100%, 56rem); padding: 12px 16px 16px; border: 1px solid rgba(217, 168, 74, .6); border-radius: 12px; background: var(--bois); box-shadow: 0 20px 60px rgba(0, 0, 0, .8); }
.tele-fenetre header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.tele-fenetre h2 { margin: 0; font-size: 1.25rem; }
.tele-croix { width: 2.25rem; height: 2.25rem; border: 1px solid rgba(217, 168, 74, .5); border-radius: 8px; background: transparent; color: var(--parchemin); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.tele-croix:hover { background: rgba(217, 168, 74, .2); }
.tele-fenetre-corps { min-height: 0; display: grid; }
.tele-fenetre-corps > .tele-corps { min-height: 0; }
.tele-fenetre .tele-dit { color: var(--parchemin); }
.tele-fenetre .tele-accord-corps { align-self: center; display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; }
.tele-fenetre .tele-accord-image { width: 96px; height: auto; }
.tele-fenetre .tele-accord-corps p { margin: 0 0 10px; }
.tele-retenu { opacity: .8; font-size: .95rem; }
body.tele-ouverte { overflow: hidden; }
@media (max-width: 560px) { .tele-fenetre .tele-accord-corps { grid-template-columns: 1fr; } .tele-fenetre .tele-accord-image { width: 64px; } }
.nouveautes-liste { display: grid; gap: 1.25rem; padding: 0; list-style: none; }
.nouveaute-bandeau { align-self: flex-start; }
.tele-section { display: grid; align-items: center; gap: 2rem; }
@media (min-width: 768px) { .nouveautes-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tele-section { grid-template-columns: 16rem 1fr; } }

/* ── l'illustration d'une nouveauté, et la carte d'un contrat avec son image (Phil, 22 octobre 2026) */
.nouveaute-illustration { width: 100%; height: auto; aspect-ratio: 800 / 414; object-fit: cover; border-radius: 10px; border: 1px solid rgba(217, 168, 74, .4); }
.contrat-carte { overflow: hidden; border: 1px solid rgba(217, 168, 74, .2); border-radius: 12px; background: rgba(13, 10, 7, .6); list-style: none; }
.contrat-carte img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 8; object-fit: cover; border-bottom: 1px solid rgba(217, 168, 74, .25); }

/* ── les séparateurs entre les blocs (fer, bois et chaîne, peints dans le style du jeu : un motif qui se pave sur toute la largeur, l'emblème au milieu) et les fonds d'image des blocs sombres - Phil,
   22 octobre 2026 : « mettre plus de bg image avec un séparateur de bloc graphique dans le thème du jeu » */
.separateur { display: flex; justify-content: center; height: 4.5rem; margin: .5rem 0; background: var(--motif) repeat-x center / auto 100%; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .6)); pointer-events: none; }
.separateur img { height: 100%; width: auto; }
.avec-fond { position: relative; isolation: isolate; }
/* (L'image ne couvre que le HAUT du bloc, à sa largeur, sans étirement, puis se fond dans le noir - Phil : « coupe le BG image plus tôt, elle est
   étirée à mort ». Deux blocs à fond d'image ne se suivent jamais : « si tu mets une image sur l'un, il n'en faut pas sur le suivant ».) */
.avec-fond::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(rgba(13, 10, 7, .55) 0, rgba(13, 10, 7, .8) 18rem, #0d0a07 34rem),
  var(--fond) top center / 100% auto no-repeat, #0d0a07; }
@media (min-width: 1600px) { .avec-fond::before { background-size: auto, 1600px auto, auto; } }
.contrats-cartes { display: grid; gap: 1.5rem; padding: 0; }
@media (min-width: 768px) { .contrats-cartes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* (La télé, sous le Studio qui la donne : toute la largeur de la carte du Studio.) */
.tele-dans-le-studio { grid-column: 1 / -1; padding-top: 2rem; border-top: 1px solid rgba(217, 168, 74, .2); }
.nouveaute-image { position: relative; }
.nouveaute-sur-image { position: absolute; top: .6rem; left: .6rem; font-size: 1rem; padding: .3rem .8rem; box-shadow: 0 4px 12px rgba(0, 0, 0, .7); background: #3a1410; }

/* ── le combat tactique, expliqué : un texte, trois gestes en vedette avec leur image, puis les deux camps en texte (contenu.json, `tactiques`) */
.tactique { margin-top: 4rem; padding: 2.5rem 1.5rem; border: 1px solid rgba(217, 168, 74, .3); border-radius: 14px; background: rgba(13, 10, 7, .75); }
.tactique-vedettes { display: grid; gap: 1.25rem; max-width: 60rem; margin: 0 auto 2.5rem; padding: 0; list-style: none; }
.tactique-vedettes li { display: flex; flex-direction: column; align-items: center; gap: .4rem; text-align: center; }
.tactique-vedettes img { width: 6rem; height: 6rem; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .7)); }
.tactique-vedettes strong { font-family: 'Cinzel', serif; color: var(--or-clair); font-size: 1.1rem; }
.tactique-camps { display: grid; gap: 1.5rem; max-width: 60rem; margin: 0 auto; }
.tactique-camp { padding: 1.25rem 1.5rem; border-radius: 12px; border: 1px solid rgba(217, 168, 74, .25); background: rgba(28, 20, 12, .6); }
.tactique-camp.elles { border-color: rgba(180, 71, 60, .45); }
.tactique-camp h4 { margin: 0 0 .75rem; font-size: 1.15rem; }
.tactique-camp.elles h4 { color: #f2a497; }
.tactique-camp ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .4rem; list-style: disc; }
.tactique-camp li::marker { color: var(--or); }
@media (min-width: 768px) { .tactique-vedettes { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tactique-camps { grid-template-columns: 1fr 1fr; } }

/* Finn accompagne chaque étape ; seule son expression change dans les données. */
.aventure-voix { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; }
.aventure-finn { display: block; width: 5.5rem; height: 5.5rem; flex: 0 0 auto; overflow: hidden; border: 2px solid #d9a84a99; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #49301b, #140e08); box-shadow: 0 3px 18px #0008; }
.aventure-finn img { display: block; width: 100%; height: 100%; object-fit: cover; transform: translate(-6%, 4%) scale(1.2); }
.aventure-voix .aventure-numero { margin: 0; }
@media (max-width: 767px) { .aventure-finn { width: 4.5rem; height: 4.5rem; } }