/* L'ACCUEIL EN PLATEAU (06/10/2026, retour du fondateur : « quelque chose de similaire à fadj, adapté à Intiimix »).
   La page est un plateau : un fil d'or descend la soirée, de l'Échauffement au Sacre, et le visiteur est le pion.
   Tout est vectoriel (net sur tout écran). Deux ailes : html[data-aile="boudoir"] (or, bordeaux) et "donjon" (améthyste). */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap');
:root {
  --v-fond: #0c0608; --v-fond-2: #170a10; --v-carte: #1d0c14; --v-carte-2: #2a1019;
  --v-encre: #f4ebdc; --v-encre-2: rgba(244, 235, 220, .74); --v-encre-3: rgba(244, 235, 220, .5);
  --v-or: #dcb76c; --v-or-clair: #f3dba6; --v-or-fonce: #8c6a2c; --v-or-fil: rgba(220, 183, 108, .38);
  --v-vin: #6e1431; --v-vin-2: #3d0a1b; --v-noir: #120709;
  --v-serif: 'Playfair Display', Georgia, serif; --v-sans: 'Inter', -apple-system, sans-serif;
  --v-creme: #f6eddc; --v-creme-encre: #2b1810;
}
html[data-aile="donjon"] {
  --v-fond: #0b0710; --v-fond-2: #130a1c; --v-carte: #190d24; --v-carte-2: #241233;
  --v-or: #c9a6f0; --v-or-clair: #e6d4ff; --v-or-fonce: #6e4aa0; --v-or-fil: rgba(201, 166, 240, .36);
  --v-vin: #4b1d6e; --v-vin-2: #24103a; --v-noir: #0d0714;
}
.only-b, .only-d { display: none !important; }
html[data-aile="boudoir"] .only-b, html[data-aile="donjon"] .only-d, html:not([data-aile]) .only-b { display: inline !important; }
html[data-aile="boudoir"] .only-b.bloc, html[data-aile="donjon"] .only-d.bloc, html:not([data-aile]) .only-b.bloc { display: block !important; }

body { margin: 0; background: var(--v-fond); color: var(--v-encre); font-family: var(--v-sans); transition: background-color .6s ease; }
.velours { position: relative; overflow-x: clip;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, color-mix(in srgb, var(--v-vin) 38%, transparent), transparent 70%),
    radial-gradient(ellipse 60% 40% at 0% 40%, color-mix(in srgb, var(--v-vin-2) 55%, transparent), transparent 70%),
    radial-gradient(ellipse 60% 40% at 100% 70%, color-mix(in srgb, var(--v-vin-2) 55%, transparent), transparent 70%),
    var(--v-fond); }
.velours::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.velours a { color: inherit; }

/* ---------- les boutons ---------- */
.btn-or { display: inline-flex; align-items: center; gap: .55em; padding: 15px 28px; border-radius: 999px; text-decoration: none; cursor: pointer;
  font: 600 .95rem/1 var(--v-sans); letter-spacing: .03em; color: #1c0e05; border: 0;
  background: linear-gradient(180deg, var(--v-or-clair), var(--v-or)); box-shadow: 0 10px 30px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .55); transition: transform .2s, box-shadow .2s; }
.btn-or:hover { transform: translateY(-1px); box-shadow: 0 14px 36px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .55); }
.velours .btn-or, .btn-or { color: #1c0e05; }
html[data-aile="donjon"] .velours .btn-or { color: #160826; }
.btn-or svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-fil { display: inline-flex; align-items: center; gap: .5em; padding: 14px 24px; border-radius: 999px; text-decoration: none; cursor: pointer;
  font: 500 .95rem/1 var(--v-sans); color: var(--v-encre); background: transparent; border: 1px solid var(--v-or-fil); transition: border-color .2s; }
.btn-fil:hover { border-color: var(--v-or); }
html[data-aile="donjon"] .btn-or { color: #160826; }

/* ---------- le seuil : la Roue à tourner ---------- */
.seuil { position: relative; min-height: min(100svh, 980px); display: grid; align-items: center; padding: 108px 16px 56px; box-sizing: border-box; }
.seuil__in { max-width: 1240px; margin: 0 auto; width: 100%; display: grid; gap: 28px; align-items: center; }
.seuil__sur { font: 500 .7rem/1.4 var(--v-sans); letter-spacing: .3em; text-transform: uppercase; color: var(--v-or); margin: 0 0 18px; display: flex; align-items: center; gap: 12px; }
.seuil__sur::before { content: ""; width: 34px; height: 1px; background: var(--v-or); }
.seuil h1 { font: 500 clamp(2.6rem, 6vw, 5rem)/1.02 var(--v-serif); margin: 0 0 .45em; letter-spacing: -.01em; }
.seuil h1 em { font-style: italic; color: var(--v-or); }
.seuil__voix { font: italic 400 clamp(1.08rem, 1.5vw, 1.3rem)/1.55 'Lora', Georgia, serif; color: var(--v-encre-2); margin: 0 0 1.4em; max-width: 34ch; }
.seuil__actes { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0 0 30px; }
.ailes { display: inline-flex; gap: 22px; margin: 0 0 26px; font: italic 500 1.05rem/1 var(--v-serif); }
.ailes button { appearance: none; background: none; border: 0; padding: 4px 0 8px; color: var(--v-encre-3); cursor: pointer; font: inherit; position: relative; transition: color .3s; }
.ailes button[aria-pressed="true"] { color: var(--v-encre); }
.ailes button[aria-pressed="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--v-or); }
.ailes__sep { color: var(--v-or-fil); }
.plaque-chiffres { display: inline-grid; grid-auto-flow: column; gap: 0; border: 1px solid var(--v-or-fil); border-radius: 4px; background: linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .05)); }
.plaque-chiffres div { padding: 12px 18px 10px; text-align: center; }
.plaque-chiffres div + div { border-left: 1px solid var(--v-or-fil); }
.plaque-chiffres b { display: block; font: 500 1.45rem/1 var(--v-serif); color: var(--v-encre); }
.plaque-chiffres span { display: block; margin-top: 6px; font: 500 .62rem/1.2 var(--v-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--v-encre-3); }

.roue-bloc { position: relative; display: grid; justify-items: center; }
.roue { position: relative; width: min(88vw, 560px); aspect-ratio: 1; }
.roue svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .55)); }
.roue__disque { transform-origin: 300px 300px; transform-box: view-box; }
.roue__disque.tourne { transition: transform 5.4s cubic-bezier(.11, .62, .1, 1); }
.roue__bouton { position: absolute; inset: 0; z-index: 5; border-radius: 50%; appearance: none; background: none; border: 0; cursor: pointer; }
.roue__bouton:focus-visible { outline: 2px solid var(--v-or); outline-offset: 6px; }
.roue__invite { margin: 18px 0 0; font: italic 400 1.02rem/1.4 var(--v-serif); color: var(--v-encre-2); text-align: center; min-height: 1.4em; }
.seg-a { fill: var(--v-vin); } .seg-b { fill: var(--v-noir); }
.or-trait { stroke: var(--v-or); } .or-plein { fill: var(--v-or); } .or-icone { stroke: var(--v-or-clair); }
.nom-case { fill: var(--v-or-clair); font: 600 13px var(--v-sans); letter-spacing: .18em; text-transform: uppercase; }

/* la carte tirée (la carte du gage du jeu) */
.carte-tiree { width: min(92vw, 520px); margin: -34px auto 0; position: relative; z-index: 3; box-sizing: border-box; padding: 22px 24px 20px;
  background: linear-gradient(180deg, var(--v-carte-2), var(--v-carte)); border: 1px solid var(--v-or-fil); border-radius: 14px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .6), inset 0 0 0 4px rgba(0, 0, 0, .25);
  transform: translateY(18px) scale(.98); opacity: 0; transition: transform .7s cubic-bezier(.16, 1, .3, 1), opacity .5s ease; pointer-events: none; }
.carte-tiree.ouverte { transform: none; opacity: 1; pointer-events: auto; }
.carte-tiree__tete { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 12px; }
.carte-tiree__case { font: 600 .68rem/1 var(--v-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--v-or); }
.carte-tiree__qui { font: italic 400 .95rem/1 var(--v-serif); color: var(--v-encre-3); }
.carte-tiree__texte { font: 500 clamp(1.12rem, 2vw, 1.32rem)/1.42 var(--v-serif); margin: 0 0 12px; color: var(--v-encre); }
.carte-tiree__voix { font: italic 400 .95rem/1.45 'Lora', Georgia, serif; color: var(--v-encre-2); margin: 0 0 16px; }
.carte-tiree__pied { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.carte-tiree__pied a:not(.btn-or) { font: 500 .85rem/1 var(--v-sans); color: var(--v-or); text-decoration: none; border-bottom: 1px solid var(--v-or-fil); padding-bottom: 3px; }

@media (min-width: 1000px) {
  .seuil__in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px; }
  .carte-tiree { position: absolute; left: 50%; bottom: -40px; transform: translate(-50%, 18px) scale(.98); margin: 0; }
  .carte-tiree.ouverte { transform: translate(-50%, 0); }
}

/* ---------- le plateau ---------- */
.plateau { position: relative; max-width: 1180px; margin: 0 auto; padding: 60px 16px 40px; box-sizing: border-box; }
.plateau__tete { text-align: center; max-width: 720px; margin: 0 auto 50px; }
.plateau__tete .sur { font: italic 400 1.05rem/1 var(--v-serif); color: var(--v-or); margin: 0 0 12px; }
.plateau__tete h2 { font: 500 clamp(1.9rem, 4vw, 3rem)/1.1 var(--v-serif); margin: 0 0 .5em; }
.plateau__tete h2 em { font-style: italic; color: var(--v-or); }
.plateau__tete p { font: 400 1.02rem/1.7 var(--v-sans); color: var(--v-encre-2); margin: 0; }
.plateau__fil { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 0; }
.plateau__fil .chemin { fill: none; stroke: var(--v-or-fil); stroke-width: 2; stroke-dasharray: 2 9; stroke-linecap: round; }
.plateau__fil .trace { fill: none; stroke: var(--v-or); stroke-width: 2.6; stroke-linecap: round; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--v-or) 60%, transparent)); }
.pion { position: absolute; left: 0; top: 0; width: 58px; height: auto; z-index: 4; pointer-events: none; transform: translate(-50%, -50%); filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .6)); will-change: transform; }
.pion img { width: 100%; height: auto; display: block; }

.etape { position: relative; z-index: 1; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: start; margin: 0 0 54px; }
.medaillon { position: relative; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; box-sizing: border-box;
  background: radial-gradient(circle at 35% 30%, var(--v-carte-2), var(--v-noir)); border: 1px solid var(--v-or-fil);
  box-shadow: 0 0 0 4px var(--v-fond), 0 0 0 5px var(--v-or-fil); transition: border-color .4s, box-shadow .4s; }
.medaillon b { font: 600 1.05rem/1 var(--v-serif); color: var(--v-encre-2); transition: color .4s; }
.medaillon svg { position: absolute; right: -8px; bottom: -6px; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--v-fond); border: 1px solid var(--v-or-fil); stroke: var(--v-or); fill: none; stroke-width: 1.8; box-sizing: border-box; }
.etape.atteinte .medaillon { border-color: var(--v-or); box-shadow: 0 0 0 4px var(--v-fond), 0 0 0 5px var(--v-or), 0 0 24px color-mix(in srgb, var(--v-or) 45%, transparent); }
.etape.atteinte .medaillon b { color: var(--v-or-clair); }
.carte { position: relative; box-sizing: border-box; padding: 22px 22px 20px; border-radius: 12px; border: 1px solid var(--v-or-fil);
  background: linear-gradient(180deg, var(--v-carte-2), var(--v-carte)); box-shadow: 0 22px 50px rgba(0, 0, 0, .45), inset 0 0 0 4px rgba(0, 0, 0, .18);
  opacity: .0; transform: translateY(22px); transition: opacity .8s ease, transform .9s cubic-bezier(.16, 1, .3, 1); }
.etape.vue .carte { opacity: 1; transform: none; }
.carte::before { content: ""; position: absolute; inset: 7px; border: 1px dashed color-mix(in srgb, var(--v-or) 22%, transparent); border-radius: 8px; pointer-events: none; }
.carte .carte__nom, .carte__nom { font: italic 400 1.02rem/1.2 var(--v-serif); color: var(--v-or); margin: 0 0 8px; }
.carte h3 { font: 500 clamp(1.3rem, 2.4vw, 1.7rem)/1.18 var(--v-serif); margin: 0 0 .6em; }
.carte h3 em { font-style: italic; color: var(--v-or); }
.carte p { font: 400 .97rem/1.68 var(--v-sans); color: var(--v-encre-2); margin: 0 0 .8em; }
.carte p:last-child { margin-bottom: 0; }
.carte .dit { font: italic 400 1.05rem/1.45 var(--v-serif); color: var(--v-encre); }
.carte__lien { font: 500 .86rem/1 var(--v-sans); color: var(--v-or); text-decoration: none; border-bottom: 1px solid var(--v-or-fil); padding-bottom: 3px; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0 6px; }
.trio div { text-align: center; padding: 10px 6px 8px; border: 1px solid var(--v-or-fil); border-radius: 6px; }
.trio b { display: block; font: 500 1.2rem/1 var(--v-serif); color: var(--v-or-clair); }
.trio span { display: block; margin-top: 5px; font: 500 .62rem/1.2 var(--v-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--v-encre-3); }
.carte .citation, .citation { margin: 12px 0 0; padding: 12px 14px; border-left: 2px solid var(--v-or); background: rgba(0, 0, 0, .18); font: italic 400 1.02rem/1.45 var(--v-serif); color: var(--v-encre); }
.carte .noms, .noms { margin: 10px 0 0; font: italic 400 .95rem/1.7 var(--v-serif); color: var(--v-encre-3); }

/* l'acte : une plaque gravée en travers du fil */
.acte { position: relative; z-index: 5; text-align: center; margin: 10px 0 54px; } /* le pion passe sous les plaques */
.acte__plaque { display: inline-block; padding: 14px 30px 12px; background: var(--v-fond); border-top: 1px solid var(--v-or); border-bottom: 1px solid var(--v-or); }
.acte__n { display: block; font: 600 .66rem/1 var(--v-sans); letter-spacing: .36em; text-transform: uppercase; color: var(--v-or); margin: 0 0 8px; }
.acte__t { display: block; font: italic 500 clamp(1.6rem, 3vw, 2.2rem)/1 var(--v-serif); color: var(--v-encre); }
.acte__s { display: block; margin-top: 8px; font: 400 .85rem/1.4 var(--v-sans); color: var(--v-encre-3); }

/* le Palier : la porte scellée, la case qui vend */
.palier { position: relative; z-index: 5; margin: 20px 0 64px; } /* le pion passe derrière la porte */
.palier__porte { position: relative; max-width: 760px; margin: 0 auto; padding: 34px 26px 28px; box-sizing: border-box; text-align: center; border-radius: 160px 160px 14px 14px;
  border: 1px solid var(--v-or); background: radial-gradient(ellipse 70% 55% at 50% 0%, color-mix(in srgb, var(--v-vin) 70%, transparent), transparent 75%), linear-gradient(180deg, var(--v-carte-2), var(--v-fond));
  box-shadow: 0 40px 90px rgba(0, 0, 0, .6), inset 0 0 0 6px rgba(0, 0, 0, .25), inset 0 0 0 7px var(--v-or-fil); }
.sceau { width: 96px; height: 96px; margin: -82px auto 10px; display: block; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .55)); transition: transform .9s cubic-bezier(.2, .9, .3, 1.2); }
.palier.ouvert .sceau { transform: rotate(-14deg) scale(1.04); }
.palier__porte .carte__nom { margin-top: 8px; }
.palier__porte h2 { font: 500 clamp(1.6rem, 3.2vw, 2.4rem)/1.15 var(--v-serif); margin: 0 0 .5em; }
.palier__porte h2 em { font-style: italic; color: var(--v-or); }
.palier__porte > p { font: 400 1rem/1.7 var(--v-sans); color: var(--v-encre-2); margin: 0 auto 1.2em; max-width: 56ch; }
.etiquette { display: grid; gap: 0; max-width: 560px; margin: 0 auto 22px; text-align: left; }
.etiquette div { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: baseline; padding: 14px 4px; border-top: 1px solid var(--v-or-fil); }
.etiquette div:last-child { border-bottom: 1px solid var(--v-or-fil); }
.etiquette b { font: 500 1.12rem/1.2 var(--v-serif); }
.etiquette small { grid-column: 1; font: 400 .82rem/1.45 var(--v-sans); color: var(--v-encre-3); }
.etiquette em { grid-row: 1 / span 2; grid-column: 2; font: 500 1.5rem/1 var(--v-serif); font-style: normal; color: var(--v-or); white-space: nowrap; }
.etiquette .phare b { color: var(--v-or-clair); }
.palier__actes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.palier__assure { margin: 18px 0 0; font: 400 .8rem/1.5 var(--v-sans); color: var(--v-encre-3); }
/* au-delà du Palier : la suite est voilée jusqu'à ce que le pion passe la porte */
.au-dela .carte { filter: saturate(.7); }
.au-dela .etape:not(.atteinte) .carte { filter: saturate(.55) brightness(.82); }

/* l'arrivée : le Sacre, en clair (le clair est réservé aux cérémonies de fin) */
.etape--sacre .carte { background: linear-gradient(180deg, #fbf3e3, var(--v-creme)); color: var(--v-creme-encre); border-color: #c9a35a; }
.etape--sacre .carte::before { border-color: rgba(140, 100, 40, .35); }
.etape--sacre .carte p { color: rgba(43, 24, 16, .8); }
.etape--sacre .carte h3 em, .etape--sacre .carte__nom { color: #9a6b22; }
.etape--sacre .carte .dit { color: var(--v-creme-encre); }

@media (min-width: 900px) {
  .pion { width: 84px; }
  .plateau { padding: 80px 24px 60px; }
  .etape { grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); gap: 34px; margin-bottom: 64px; }
  .etape .medaillon { grid-column: 2; grid-row: 1; justify-self: center; margin-top: 18px; width: 64px; height: 64px; }
  .etape .carte { grid-row: 1; grid-column: 1; }
  .etape--d .carte { grid-column: 3; }
  .medaillon b { font-size: 1.2rem; }
}

/* ---------- la notice et la porte ---------- */
.notice { max-width: 760px; margin: 0 auto; padding: 50px 16px 30px; position: relative; z-index: 1; }
.notice h2 { font: 500 clamp(1.4rem, 2.8vw, 2rem)/1.2 var(--v-serif); margin: 0 0 1.1em; }
.notice h2 em { font-style: italic; color: var(--v-or); }
.notice p { font: 400 .98rem/1.75 var(--v-sans); color: var(--v-encre-2); margin: 0 0 1em; }
.notice p strong { color: var(--v-encre); font-weight: 600; }
.notice blockquote { margin: 1.3em 0; padding-left: 16px; border-left: 2px solid var(--v-or); font: italic 400 1.15rem/1.45 var(--v-serif); color: var(--v-encre); }
.notice a { color: var(--v-or); }
.porte-finale { text-align: center; padding: 70px 16px 90px; position: relative; z-index: 1; }
.porte-finale h2 { font: 500 clamp(2rem, 5vw, 3.4rem)/1.1 var(--v-serif); margin: 0 0 .55em; }
.porte-finale h2 em { font-style: italic; color: var(--v-or); }
.porte-finale .voix { font: italic 400 1.05rem/1.5 'Lora', Georgia, serif; color: var(--v-encre-2); margin: 1.2em 0 0; }

.h-cta--float { position: fixed; right: 16px; bottom: 16px; z-index: 1002; display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px; border-radius: 999px; text-decoration: none;
  font: 600 .86rem/1 var(--v-sans); color: #1c0e05; background: linear-gradient(180deg, var(--v-or-clair), var(--v-or)); box-shadow: 0 12px 34px rgba(0, 0, 0, .5);
  opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity .3s, transform .3s; }
.h-cta--float svg { width: 18px; height: 9px; }
.h-cta--float.show { opacity: 1; pointer-events: auto; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .roue__disque.tourne { transition-duration: .01s; }
  .carte, .carte-tiree { transition: none; }
  .etape .carte { opacity: 1; transform: none; }
}

/* téléphone : la Roue juste après la voix, avant les boutons (le jouet d'abord) */
@media (max-width: 999px) {
  .seuil { padding-top: 96px; }
  .seuil__texte { display: contents; }
  .seuil__in { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .seuil__sur { order: 1; } .seuil h1 { order: 2; } .seuil__voix { order: 3; } .roue-bloc { order: 4; margin: 6px 0 26px; }
  .ailes { order: 5; } .seuil__actes { order: 6; } .plaque-chiffres { order: 7; justify-self: start; align-self: flex-start; }
  .roue { width: min(86vw, 440px); }
}

@media (max-width: 999px) {
  .carte-tiree { display: none; margin-top: 14px; }
  .carte-tiree.ouverte { display: block; animation: carte-entre .6s cubic-bezier(.16, 1, .3, 1); }
  .roue__invite { margin-top: 12px; }
}
@keyframes carte-entre { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* =====================================================================================================================
   LA VIE DE LA PAGE (06/10, retour du fondateur : « mon site fadj est animé, il est vivant »). Mêmes gestes que fadj,
   dans la voix d'Intiimix : une piste qui tourne, des objets du jeu qui flottent, un pion qui saute de case en case, des
   cartes qui entrent en rebondissant, des chiffres qui se retournent, des loups qui dansent. Jamais d'étincelles.
   ===================================================================================================================== */
.roue__corps { position: relative; z-index: 2; width: 100%; height: 100%; animation: roue-invite 6s ease-in-out 2.5s infinite; transform-origin: 50% 50%; }
.roue.a-tourne .roue__corps { animation: none; }
@keyframes roue-invite { 0%, 78%, 100% { rotate: 0deg; } 84% { rotate: 7deg; } 90% { rotate: -3deg; } 95% { rotate: 1deg; } }
.roue__halo { position: absolute; inset: -12%; border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--v-or) 30%, transparent) 0%, color-mix(in srgb, var(--v-vin) 40%, transparent) 38%, transparent 66%);
  animation: halo 5s ease-in-out infinite alternate; }
@keyframes halo { from { opacity: .55; scale: .96; } to { opacity: 1; scale: 1.06; } }
.anneau { position: absolute; inset: -10%; width: 120%; height: 120%; z-index: 1; pointer-events: none; overflow: visible; }
.anneau__piste { fill: none; stroke: var(--v-or-fil); stroke-width: 1.5; stroke-dasharray: 3 14; transform-origin: 350px 350px; animation: tourne 140s linear infinite; }
.anneau__points { fill: var(--v-or); opacity: .75; transform-origin: 350px 350px; animation: tourne 70s linear infinite reverse; }
@keyframes tourne { to { rotate: 360deg; } }
.flotte { position: absolute; z-index: 3; height: auto; pointer-events: none; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .55)); animation: flotte 5.5s ease-in-out infinite alternate; }
@keyframes flotte { from { translate: 0 -8px; rotate: -6deg; } to { translate: 0 10px; rotate: 5deg; } }
/* le curseur de la Roue frappe à chaque case qui passe */
.roue__pointeur { transform-origin: 300px 18px; }
.roue__pointeur.tic { animation: tic .14s ease-out; }
@keyframes tic { 40% { rotate: -16deg; } }
/* le titre entre mot à mot */
.mot { display: inline-block; opacity: 0; translate: 0 .35em; animation: mot .8s cubic-bezier(.2, 1.2, .4, 1) forwards; }
@keyframes mot { to { opacity: 1; translate: 0 0; } }
/* les chiffres se retournent comme les tuiles du compte à rebours de fadj */
.plaque-chiffres b { display: inline-block; perspective: 300px; }
.plaque-chiffres b.flip { animation: flip .6s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes flip { from { transform: rotateX(90deg); opacity: .2; } }
/* le bouton principal respire, les boutons se soulèvent au survol */
.seuil .btn-or { animation: respire 3.2s ease-in-out infinite; }
@keyframes respire { 0%, 100% { box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 0 0 0 color-mix(in srgb, var(--v-or) 0%, transparent), inset 0 1px 0 rgba(255, 255, 255, .55); }
  50% { box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 0 0 8px color-mix(in srgb, var(--v-or) 16%, transparent), inset 0 1px 0 rgba(255, 255, 255, .55); } }
.btn-or:hover, .btn-fil:hover { transform: translateY(-3px) rotate(-1deg); }
/* la carte tirée : elle se retourne, le sceau la frappe */
.carte-tiree { transform-origin: 50% 0; }
.carte-tiree.ouverte { animation: carte-retourne .75s cubic-bezier(.3, 1.3, .5, 1); }
@keyframes carte-retourne { from { opacity: 0; transform: translate(var(--tx, 0), 0) perspective(900px) rotateX(-70deg); } }
.carte-tiree__sceau { position: absolute; right: -16px; bottom: -22px; width: 74px; height: auto; opacity: 0; pointer-events: none; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .5)); }
.carte-tiree.ouverte .carte-tiree__sceau { animation: frappe .55s cubic-bezier(.3, 1.6, .5, 1) .45s forwards; }
@keyframes frappe { from { opacity: 0; scale: 2.2; rotate: -40deg; } to { opacity: 1; scale: 1; rotate: -12deg; } }
@media (min-width: 1000px) { .carte-tiree { --tx: -50%; } }

/* le plateau : les cartes entrent en rebondissant, de leur côté, un peu penchées */
.etape .carte { opacity: 0; transform: translateX(-46px) rotate(-2.5deg); transition: opacity .6s ease, transform .9s cubic-bezier(.3, 1.45, .5, 1); }
.etape--d .carte { transform: translateX(46px) rotate(2.5deg); }
.etape.vue .carte { opacity: 1; transform: rotate(var(--penche, -.6deg)); }
.etape--d.vue .carte { --penche: .6deg; }
.etape.vue .carte:hover { transform: rotate(0) translateY(-4px); }
.carte__objet { position: absolute; width: 92px; height: auto; top: -38px; left: -30px; z-index: 2; pointer-events: none; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .55)); animation: flotte 4.8s ease-in-out infinite alternate; }
.etape--d .carte__objet { left: auto; right: -26px; animation-delay: -2s; }
/* l'écran du jeu dans la case : un tableau encadré d'or, un léger travelling, la loupe au survol */
.ecran { position: relative; margin: 16px 0 2px; border-radius: 8px; overflow: hidden; cursor: zoom-in; background: #000;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .55), 0 0 0 1px var(--v-or-fil), 0 0 0 5px rgba(0, 0, 0, .35); }
.ecran img { width: 100%; height: auto; display: block; aspect-ratio: 1280 / 850; object-fit: cover; transform-origin: 60% 40%; transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); }
.etape.vue .ecran img { animation: travelling 14s ease-in-out infinite alternate; }
@keyframes travelling { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.1) translate(-2%, -1.5%); } }
.ecran figcaption { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 999px;
  font: 500 .75rem/1 var(--v-sans); color: var(--v-encre); background: rgba(10, 4, 8, .72); border: 1px solid var(--v-or-fil); opacity: 0; translate: 0 6px; transition: opacity .3s, translate .3s; }
.ecran figcaption svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
.ecran:hover figcaption, .ecran:focus-visible figcaption { opacity: 1; translate: 0 0; }
@media (hover: none) { .ecran figcaption { opacity: 1; translate: 0 0; } }
/* le pion saute à chaque case atteinte, se dandine entre deux */
.pion img { transform-origin: 50% 90%; animation: dandine 3s ease-in-out infinite; }
.pion.saute img { animation: saute .7s cubic-bezier(.3, .7, .4, 1); }
@keyframes dandine { 0%, 100% { rotate: -5deg; } 50% { rotate: 5deg; } }
@keyframes saute { 0% { translate: 0 0; scale: 1; } 35% { translate: 0 -34px; scale: 1.08 .94; } 70% { translate: 0 0; scale: .96 1.05; } 100% { translate: 0 0; scale: 1; } }
/* le médaillon s'allume d'un coup quand le pion y arrive */
.etape.brille .medaillon { animation: brille .9s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes brille { 0% { scale: .7; } 60% { scale: 1.18; } 100% { scale: 1; } }
.etape.brille .medaillon::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--v-or); animation: onde 1s ease-out forwards; pointer-events: none; }
@keyframes onde { from { opacity: .9; scale: .9; } to { opacity: 0; scale: 1.9; } }
/* les plaques des actes se gravent quand on arrive */
.acte__plaque { position: relative; border-top-color: transparent; border-bottom-color: transparent; }
.acte__plaque::before, .acte__plaque::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--v-or); transform: scaleX(0); transition: transform 1.1s cubic-bezier(.2, .8, .2, 1); }
.acte__plaque::before { top: -1px; } .acte__plaque::after { bottom: -1px; transition-delay: .15s; }
.acte.vue .acte__plaque::before, .acte.vue .acte__plaque::after { transform: scaleX(1); }
.acte__t { transition: letter-spacing 1.2s cubic-bezier(.2, .8, .2, 1), opacity 1s; letter-spacing: .12em; opacity: 0; }
.acte.vue .acte__t { letter-spacing: 0; opacity: 1; }
/* le Palier : la porte luit, le sceau se brise quand le pion arrive */
.palier__porte { animation: porte-luit 4s ease-in-out infinite alternate; }
@keyframes porte-luit { from { box-shadow: 0 40px 90px rgba(0, 0, 0, .6), inset 0 0 0 6px rgba(0, 0, 0, .25), inset 0 0 0 7px var(--v-or-fil), 0 0 0 0 transparent; }
  to { box-shadow: 0 40px 90px rgba(0, 0, 0, .6), inset 0 0 0 6px rgba(0, 0, 0, .25), inset 0 0 0 7px var(--v-or-fil), 0 0 60px 4px color-mix(in srgb, var(--v-or) 22%, transparent); } }
.palier.ouvert .sceau { animation: sceau-brise .9s cubic-bezier(.3, 1.5, .5, 1) forwards; }
@keyframes sceau-brise { 30% { scale: 1.2; rotate: 8deg; } 100% { scale: 1.02; rotate: -14deg; } }
/* le Sacre : la lettre se déplie */
.etape--sacre .carte { transform-origin: 50% 0; }
.etape--sacre.vue .carte { animation: deplie 1.1s cubic-bezier(.3, 1.3, .5, 1); }
@keyframes deplie { from { opacity: 0; transform: perspective(900px) rotateX(-80deg); } }
/* la porte finale : deux loups dansent autour de l'appel */
.porte-finale { overflow: visible; }
.porte-finale__halo { position: absolute; left: 50%; top: 45%; width: 620px; height: 620px; translate: -50% -50%; border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--v-vin) 70%, transparent), transparent 65%); animation: halo 5s ease-in-out infinite alternate; }
.danse { position: absolute; top: 34%; width: clamp(80px, 11vw, 150px); height: auto; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .6)); transform-origin: 50% 100%; }
.danse--g { left: clamp(4%, 14vw, 22%); animation: danse 1.1s ease-in-out infinite alternate; }
.danse--d { right: clamp(4%, 14vw, 22%); animation: danse 1.1s ease-in-out -.55s infinite alternate; }
@keyframes danse { from { rotate: -9deg; translate: 0 0; } to { rotate: 9deg; translate: 0 -10px; } }
@media (max-width: 700px) { .danse { top: 6%; width: 74px; } .carte__objet, .etape--d .carte__objet { width: 68px; top: -28px; left: auto; right: -8px; } }

/* la loupe */
.loupe { position: fixed; inset: 0; z-index: 3000; background: rgba(6, 3, 5, .94); display: grid; place-items: center; padding: 24px 16px; cursor: zoom-out; animation: loupe-in .3s ease; }
.loupe[hidden] { display: none; }
.loupe__img { max-width: min(96vw, 1800px); max-height: 84vh; width: auto; height: auto; border-radius: 8px; box-shadow: 0 40px 120px rgba(0, 0, 0, .8), 0 0 0 1px var(--v-or-fil); animation: loupe-img .45s cubic-bezier(.3, 1.3, .5, 1); }
.loupe__legende { position: absolute; left: 16px; right: 16px; bottom: 14px; margin: 0; text-align: center; font: italic 400 1rem/1.4 var(--v-serif); color: var(--v-encre-2); }
.loupe__fermer { position: absolute; top: 12px; right: 14px; appearance: none; background: none; border: 1px solid var(--v-or-fil); color: var(--v-encre); width: 42px; height: 42px; border-radius: 50%; font: 300 1.6rem/1 var(--v-sans); cursor: pointer; }
html.loupe-ouverte { overflow: hidden; }
@keyframes loupe-in { from { opacity: 0; } }
@keyframes loupe-img { from { scale: .9; opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .roue__corps, .roue__halo, .anneau__piste, .anneau__points, .flotte, .carte__objet, .pion img, .palier__porte, .porte-finale__halo, .danse, .seuil .btn-or, .etape.vue .ecran img { animation: none !important; }
  .mot { animation: none; opacity: 1; translate: 0 0; }
  .etape .carte, .etape--d .carte { transform: none; opacity: 1; transition: none; }
  .acte__t { opacity: 1; letter-spacing: 0; transition: none; }
}

/* =====================================================================================================================
   LA ROUE PARLE, CHAQUE CASE MONTRE (06/10, retour du fondateur : « elle parle pour présenter le jeu », « les présentations
   doivent être plus visuelles, sexy, ludiques »). Une bulle de la Roue qui s'écrit, puis un jouet par case.
   ===================================================================================================================== */
.bulle { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 18px; }
.bulle__roue { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; box-shadow: 0 0 0 3px var(--v-fond), 0 0 0 4px var(--v-or-fil), 0 8px 18px rgba(0, 0, 0, .5); }
.bulle__roue svg { width: 100%; height: 100%; display: block; }
.mini-disque { transform-origin: 24px 24px; animation: tourne 18s linear infinite; }
.bulle.parle .mini-disque { animation-duration: 2.5s; }
.bulle__texte { position: relative; margin: 0 !important; padding: 12px 16px 13px; border-radius: 4px 16px 16px 16px; border: 1px solid var(--v-or-fil);
  background: linear-gradient(180deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, .12)); font: italic 400 1.08rem/1.5 'Lora', Georgia, serif !important; color: var(--v-encre) !important; min-height: 1.5em; }
.bulle__qui { display: block; font: 600 .6rem/1 var(--v-sans); letter-spacing: .28em; text-transform: uppercase; color: var(--v-or); font-style: normal; margin: 0 0 7px; }
.bulle__dit .curseur { display: inline-block; width: 1px; height: 1.05em; background: var(--v-or); margin-left: 2px; vertical-align: -2px; animation: clignote .8s steps(2) infinite; }
@keyframes clignote { 50% { opacity: 0; } }
.jouet { margin: 4px 0 6px; }
.jouet:empty { display: none; }
.jouet__aide, .jouet__legende { font: italic 400 .9rem/1.4 var(--v-serif) !important; color: var(--v-encre-3) !important; margin: 10px 0 0 !important; text-align: center; }
.jouet__rejouer { appearance: none; margin: 12px auto 0; display: block; background: none; border: 1px solid var(--v-or-fil); color: var(--v-or); border-radius: 999px; padding: 8px 16px; font: 500 .8rem/1 var(--v-sans); cursor: pointer; }
.jouet button { font-family: inherit; }
.etape--sacre .bulle__texte { background: rgba(140, 100, 40, .08); border-color: rgba(140, 100, 40, .35); color: var(--v-creme-encre) !important; }

/* la distribution : qui joue avec qui */
.nombre { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 14px; }
.nombre button { appearance: none; cursor: pointer; padding: 10px 6px 8px; border-radius: 10px; border: 1px solid var(--v-or-fil); background: rgba(0, 0, 0, .2); color: var(--v-encre-2); transition: all .3s; }
.nombre b { display: block; font: 500 1.7rem/1 var(--v-serif); color: var(--v-encre); }
.nombre span { display: block; margin-top: 4px; font: 500 .62rem/1 var(--v-sans); letter-spacing: .16em; text-transform: uppercase; }
.nombre button[aria-pressed="true"] { border-color: var(--v-or); background: color-mix(in srgb, var(--v-vin) 55%, transparent); box-shadow: 0 0 22px color-mix(in srgb, var(--v-or) 25%, transparent); }
.nombre button[aria-pressed="true"] b { color: var(--v-or-clair); }
.distrib__scene { position: relative; display: grid; gap: 14px 10px; grid-template-columns: repeat(2, 1fr); padding: 6px 0; }
.distrib__scene[data-n="3"] { grid-template-columns: repeat(3, 1fr); }
.distrib__scene[data-n="4"] { grid-template-columns: repeat(2, 1fr); }
.distrib__fils { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 0; }
.distrib__fils line { stroke: var(--v-or); stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--v-or) 70%, transparent)); stroke-dasharray: 400; stroke-dashoffset: 400; animation: fil-trace .8s ease-out forwards; }
.distrib__fils line.non { stroke: rgba(255, 255, 255, .12); stroke-dasharray: 3 7; filter: none; animation: none; stroke-dashoffset: 0; }
@keyframes fil-trace { to { stroke-dashoffset: 0; } }
.siege { position: relative; z-index: 1; display: grid; justify-items: center; gap: 4px; animation: siege-entre .55s cubic-bezier(.3, 1.5, .5, 1) both; }
.siege[hidden] { display: none; }
@keyframes siege-entre { from { opacity: 0; scale: .6; } }
.siege__loup { width: min(110px, 100%); height: auto; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .6)); animation: dandine 3.4s ease-in-out infinite; transform-origin: 50% 80%; }
.siege:nth-child(odd) .siege__loup { animation-delay: -1.7s; }
.siege__nom { font: italic 500 1.1rem/1 var(--v-serif); color: var(--v-encre); }
.siege__reglages { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.siege__reglages button { appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px; border-radius: 999px; border: 1px solid var(--v-or-fil); background: rgba(0, 0, 0, .3); color: var(--v-encre-2); font: 500 .72rem/1 var(--v-sans); transition: border-color .2s, color .2s, transform .2s; }
.siege__reglages button:hover { border-color: var(--v-or); color: var(--v-encre); transform: translateY(-1px); }
.siege__reglages button.tourne-cle { animation: cle .35s ease; }
@keyframes cle { 50% { transform: scale(1.15); } }
.siege__reglages svg { width: 13px; height: 13px; fill: none; stroke: var(--v-or); stroke-width: 2.2; }
.verdict { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; margin-top: 16px; padding: 12px; border-radius: 12px; border: 1px solid var(--v-or-fil); background: rgba(0, 0, 0, .22); }
.verdict__envie { position: relative; width: 96px; height: 96px; }
.verdict__envie img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .6s ease, transform .6s ease; transform: scale(.9); }
.verdict__envie img.vue { opacity: 1; transform: none; }
.verdict__dit { font: italic 500 1.02rem/1.35 var(--v-serif) !important; color: var(--v-or-clair) !important; margin: 0 0 6px !important; }
.verdict__gage { font: 500 .95rem/1.45 var(--v-serif) !important; color: var(--v-encre) !important; margin: 0 !important; }

/* les deux portes */
.portes2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.porte2 { appearance: none; cursor: pointer; position: relative; overflow: hidden; padding: 18px 10px 14px; border-radius: 90px 90px 10px 10px; border: 1px solid var(--v-or-fil); color: var(--v-encre); text-align: center;
  background: radial-gradient(ellipse at 50% 0%, rgba(140, 22, 52, .55), transparent 70%), repeating-linear-gradient(45deg, rgba(255, 255, 255, .03) 0 10px, transparent 10px 20px), #2a0c16; transition: transform .35s cubic-bezier(.3, 1.4, .5, 1), box-shadow .35s; }
.porte2--d { background: radial-gradient(ellipse at 50% 0%, rgba(110, 60, 170, .5), transparent 70%), repeating-linear-gradient(-45deg, rgba(255, 255, 255, .03) 0 10px, transparent 10px 20px), #160b22; }
.porte2:hover { transform: translateY(-4px) rotate(-.6deg); }
.porte2[aria-pressed="true"] { border-color: var(--v-or); box-shadow: 0 0 34px color-mix(in srgb, var(--v-or) 30%, transparent), inset 0 0 0 1px var(--v-or); }
.porte2__nom { display: block; font: italic 500 1.25rem/1 var(--v-serif); }
.porte2__sous { display: block; margin: 5px 0 10px; font: 500 .6rem/1 var(--v-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--v-encre-3); }
.porte2__fams { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.porte2 .fam small { display: none; }
.fam { display: inline-grid; justify-items: center; gap: 3px; }
.fam img { width: 36px; height: 36px; object-fit: contain; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .5)); animation: fam-entre .5s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--i) * .08s); }
.etape:not(.vue) .fam img { animation: none; opacity: 0; }
@keyframes fam-entre { from { opacity: 0; scale: .3; } }
.fam small { font: 500 .6rem/1.1 var(--v-sans); color: var(--v-encre-3); }

/* le même désir, trois dessins ; la dose */
.triptyque { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.triptyque figure { margin: 0; text-align: center; transition: transform .4s cubic-bezier(.3, 1.4, .5, 1); }
.triptyque figure:hover { transform: translateY(-6px) scale(1.04); }
.triptyque img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .5)); }
.etape.vue .triptyque figure { animation: tri-entre .7s cubic-bezier(.3, 1.4, .5, 1) both; }
.etape.vue .triptyque figure:nth-child(2) { animation-delay: .15s; } .etape.vue .triptyque figure:nth-child(3) { animation-delay: .3s; }
@keyframes tri-entre { from { opacity: 0; transform: translateY(18px) rotate(-6deg); } }
.triptyque figcaption { font: italic 400 .92rem/1.2 var(--v-serif); color: var(--v-or); margin-top: 4px; }
.dose { margin-top: 16px; padding: 14px 12px 12px; border-radius: 12px; border: 1px solid var(--v-or-fil); background: rgba(0, 0, 0, .22); }
.dose__barres { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; height: 86px; align-items: end; }
.dose__barres span { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.dose__barres i { display: block; width: 100%; height: var(--h); border-radius: 4px 4px 1px 1px; background: linear-gradient(180deg, var(--v-or-clair), var(--v-or-fonce)); opacity: .3; transition: opacity .35s, height .6s cubic-bezier(.3, 1.5, .5, 1), box-shadow .35s; }
.dose__barres span.choisi i { opacity: 1; box-shadow: 0 0 18px color-mix(in srgb, var(--v-or) 55%, transparent); }
.etape:not(.vue) .dose__barres i { height: 2%; }
.dose__barres em { position: absolute; top: -2px; font: 600 .7rem/1 var(--v-sans); font-style: normal; color: var(--v-encre-3); }
.dose__barres span.choisi em { color: var(--v-or-clair); }
.dose__choix { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 10px; }
.dose__choix button { appearance: none; cursor: pointer; padding: 7px 2px; border-radius: 6px; border: 1px solid var(--v-or-fil); background: none; color: var(--v-encre-2); font: 500 .74rem/1 var(--v-sans); }
.dose__choix button[aria-pressed="true"] { color: #1c0e05; background: linear-gradient(180deg, var(--v-or-clair), var(--v-or)); border-color: transparent; }
html[data-aile="donjon"] .dose__choix button[aria-pressed="true"] { color: #160826; }
.dose__dit { font: italic 400 .98rem/1.4 var(--v-serif) !important; color: var(--v-encre) !important; text-align: center; margin: 10px 0 0 !important; min-height: 1.4em; }

/* la commode : le compteur */
.compteur { display: flex; align-items: center; gap: 16px; padding: 6px 0; }
.compteur b { font: 500 3.6rem/1 var(--v-serif); color: var(--v-or-clair); text-shadow: 0 0 30px color-mix(in srgb, var(--v-or) 40%, transparent); min-width: 2ch; }
.compteur span { font: italic 400 1rem/1.4 var(--v-serif); color: var(--v-encre-2); }

/* la ligne : deux mots */
.ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ligne button { appearance: none; cursor: pointer; padding: 16px 8px; border-radius: 10px; border: 1px solid var(--v-or-fil); background: rgba(0, 0, 0, .25); color: var(--v-encre); font: italic 500 1.3rem/1 var(--v-serif); transition: all .3s; }
.ligne button:hover { border-color: var(--v-or); transform: translateY(-2px); }
.ligne button.dit { background: color-mix(in srgb, var(--v-vin) 70%, transparent); border-color: var(--v-or); animation: cle .4s ease; }
.ligne__dit { grid-column: 1 / -1; text-align: center; font: italic 400 1rem/1.45 var(--v-serif) !important; color: var(--v-encre) !important; margin: 4px 0 0 !important; min-height: 1.45em; }

/* les dés */
.des { text-align: center; }
.des__lancer { appearance: none; background: none; border: 0; cursor: pointer; display: inline-flex; gap: 26px; padding: 18px 10px; perspective: 600px; }
.de { width: 58px; height: 58px; display: inline-block; }
.de__cube { position: relative; width: 100%; height: 100%; display: block; transform-style: preserve-3d; transition: transform 1.3s cubic-bezier(.2, .9, .3, 1.15); transform: rotateX(-20deg) rotateY(25deg); }
.de__face { position: absolute; inset: 0; display: grid; padding: 8px; box-sizing: border-box; border-radius: 10px; grid-template-areas: "p1 p2 p3" "p4 p5 p6" "p7 p8 p9";
  background: radial-gradient(circle at 30% 25%, #3d1220, #1a060c); border: 1px solid var(--v-or); box-shadow: inset 0 0 12px rgba(0, 0, 0, .6); backface-visibility: hidden; }
html[data-aile="donjon"] .de__face { background: radial-gradient(circle at 30% 25%, #2d1645, #12081c); }
.de__face i { width: 9px; height: 9px; border-radius: 50%; place-self: center; background: radial-gradient(circle at 35% 30%, var(--v-or-clair), var(--v-or-fonce)); }
.f1 { transform: rotateY(0) translateZ(29px); } .f6 { transform: rotateY(180deg) translateZ(29px); } .f2 { transform: rotateX(90deg) translateZ(29px); }
.f5 { transform: rotateX(-90deg) translateZ(29px); } .f3 { transform: rotateY(90deg) translateZ(29px); } .f4 { transform: rotateY(-90deg) translateZ(29px); }
.des__lancer:hover .de__cube { transform: rotateX(-30deg) rotateY(40deg); }
.des__dit { font: italic 500 1.05rem/1.4 var(--v-serif) !important; color: var(--v-encre) !important; margin: 4px 0 0 !important; min-height: 1.4em; }

/* le paquet de gages */
.paquet__pile { appearance: none; background: none; border: 0; padding: 0; cursor: pointer; position: relative; display: block; width: 100%; height: 170px; }
.pc { position: absolute; inset: 0; border-radius: 12px; border: 1px solid var(--v-or-fil); background: linear-gradient(180deg, var(--v-carte-2), var(--v-noir)); box-shadow: 0 12px 24px rgba(0, 0, 0, .45); transition: transform .5s cubic-bezier(.3, 1.3, .5, 1); }
.pc:nth-child(1) { transform: rotate(-5deg) translate(-6px, 6px); } .pc:nth-child(2) { transform: rotate(3deg) translate(5px, 3px); }
.pc--dessus { display: grid; align-content: center; gap: 8px; padding: 16px 20px; text-align: left; background: linear-gradient(180deg, #f8efdd, #ecdcbc); border-color: #c9a35a; }
.pc--dessus small { font: 600 .6rem/1 var(--v-sans); letter-spacing: .24em; text-transform: uppercase; color: #9a6b22; }
.pc__texte { font: 500 1.05rem/1.4 var(--v-serif); color: #2b1810; }
.paquet__pile.tire .pc--dessus { animation: carte-part .6s cubic-bezier(.4, 0, .2, 1); }
@keyframes carte-part { 45% { transform: translate(60%, -12px) rotate(14deg); opacity: 0; } 55% { transform: translate(-30%, 10px) rotate(-6deg); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* la vérité */
.verite { appearance: none; cursor: pointer; width: 100%; display: grid; gap: 10px; text-align: left; padding: 18px 20px; border-radius: 12px; border: 1px solid var(--v-or); color: var(--v-encre);
  background: radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--v-vin) 60%, transparent), transparent 60%), rgba(0, 0, 0, .3); transform-style: preserve-3d; }
.verite small { font: 600 .6rem/1 var(--v-sans); letter-spacing: .26em; text-transform: uppercase; color: var(--v-or); }
.verite__q { font: italic 500 1.15rem/1.45 var(--v-serif); }
.verite__suite { font: 500 .8rem/1 var(--v-sans); color: var(--v-or); }
.verite.retourne { animation: retourne .6s ease; }
@keyframes retourne { 50% { transform: perspective(800px) rotateY(90deg); } }

/* l'éventail des mini-jeux */
.eventail { position: relative; height: 210px; display: flex; justify-content: center; align-items: flex-end; }
.ev { appearance: none; background: none; border: 0; padding: 0; cursor: pointer; position: absolute; bottom: 30px; width: 92px; transform-origin: 50% 120%; transform: rotate(0); transition: transform .7s cubic-bezier(.3, 1.4, .5, 1); }
.ev img { width: 100%; height: auto; display: block; border-radius: 6px; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .6)); }
.etape.vue .ev { transform: rotate(calc((var(--k) - 3) * 11deg)) translateY(var(--y)); }
.etape.vue .ev:hover { transform: rotate(calc((var(--k) - 3) * 11deg)) translateY(-18px); }
.ev__nom { position: absolute; inset: auto 6px 10px; font: 600 .62rem/1.2 var(--v-sans); color: #2b1810; opacity: 0; }
.ev.tiree { z-index: 3; transform: rotate(0) translateY(-34px) scale(1.25) !important; }
.ev.tiree img { content: url("img/carte-desir.webp"); }
.ev.tiree .ev__nom { opacity: 1; background: rgba(248, 239, 221, .92); border-radius: 4px; padding: 3px 4px; text-align: center; }
.eventail__dit { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; font: italic 400 .98rem/1.3 var(--v-serif) !important; color: var(--v-encre) !important; margin: 0 !important; }

/* les coupes du Bar */
.coupes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; align-items: end; }
.coupes figure { margin: 0; text-align: center; transform-origin: 50% 100%; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.coupes figure:hover { transform: translateY(-8px) rotate(-6deg); }
.etape.vue .coupes figure { animation: trinque 1s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: calc(var(--k) * .12s); }
@keyframes trinque { 0% { opacity: 0; transform: translateY(20px); } 60% { transform: rotate(calc((var(--k) - 1.5) * -7deg)); } 100% { opacity: 1; transform: none; } }
.coupes img { width: 100%; max-height: 120px; object-fit: contain; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .55)); }
.coupes figcaption { font: italic 400 .9rem/1 var(--v-serif); color: var(--v-or); margin-top: 6px; }

/* le coffre du Caprice */
.coffre { appearance: none; background: none; border: 0; cursor: pointer; position: relative; display: grid; justify-items: center; width: 100%; padding: 8px 0 4px; }
.coffre img { width: 180px; height: auto; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .6)); grid-area: 1 / 1; transition: opacity .3s; }
.coffre__ouvert { opacity: 0; }
.coffre.ouvert .coffre__ferme { opacity: 0; } .coffre.ouvert .coffre__ouvert { opacity: 1; }
.coffre:not(.ouvert) .coffre__ferme { animation: coffre-tremble 2.8s ease-in-out infinite; }
@keyframes coffre-tremble { 0%, 86%, 100% { rotate: 0deg; } 89% { rotate: -4deg; } 92% { rotate: 4deg; } 95% { rotate: -2deg; } }
.coffre__sort { margin-top: 10px; font: italic 500 1.15rem/1.2 var(--v-serif); color: var(--v-or-clair); }
.coffre.ouvert .coffre__sort { animation: cle .5s ease; }

/* le dressing : la partition */
.dressing { position: relative; }
.tringle { position: relative; display: flex; justify-content: space-between; gap: 2px; padding-top: 10px; border-top: 2px solid var(--v-or); border-radius: 2px; min-height: 110px; }
.cintre { flex: 1; display: flex; justify-content: center; transform-origin: 50% 0; animation: balance 3.2s ease-in-out infinite alternate; animation-delay: calc(var(--k) * -.4s); }
@keyframes balance { from { rotate: -3deg; } to { rotate: 3deg; } }
.cintre img { width: 100%; max-width: 64px; height: auto; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .5)); transition: transform .9s cubic-bezier(.5, 0, .7, .4), opacity .9s; }
.cintre.tombee img { transform: translateY(130px) rotate(var(--r, 25deg)); opacity: 0; }
.partition { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin-top: 18px; }
.note { display: grid; place-items: center; height: 34px; border-radius: 6px; border: 1px solid var(--v-or-fil); font: 600 .72rem/1 var(--v-sans); color: var(--v-encre-3); transition: all .3s; }
.note--r { border-style: solid; }
.note--r::after { content: ""; }
.note.joue { color: var(--v-encre); border-color: var(--v-or); background: rgba(255, 255, 255, .04); }
.note--r.joue { background: linear-gradient(180deg, var(--v-or-clair), var(--v-or)); color: #1c0e05; box-shadow: 0 0 14px color-mix(in srgb, var(--v-or) 50%, transparent); }

/* le minuteur du massage */
.minuteur { position: relative; width: 170px; height: 170px; margin: 0 auto; display: grid; place-items: center; }
.minuteur svg { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; }
.minuteur__fond { fill: none; stroke: var(--v-or-fil); stroke-width: 3; }
.minuteur__trait { fill: none; stroke: var(--v-or); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 327; }
.etape.vue .minuteur__trait { animation: minute 12s linear infinite; }
@keyframes minute { to { stroke-dashoffset: 0; } }
.minuteur__huile { width: 92px; height: 92px; object-fit: cover; border-radius: 50%; box-shadow: 0 10px 20px rgba(0, 0, 0, .5); animation: halo 4s ease-in-out infinite alternate; }
.minuteur__t { position: absolute; bottom: -22px; font: italic 400 .9rem/1 var(--v-serif); color: var(--v-or); }

/* le polaroïd du studio */
.polaroid { position: relative; width: 200px; margin: 6px auto 0; padding: 12px 12px 14px; background: #f6efe2; border-radius: 4px; text-align: center; box-shadow: 0 18px 30px rgba(0, 0, 0, .55); transform: rotate(-4deg); transition: transform .4s cubic-bezier(.3, 1.5, .5, 1); }
.polaroid:hover { transform: rotate(1deg) scale(1.04); }
.polaroid img { width: 100%; aspect-ratio: 1; object-fit: cover; background: #1a0a10; display: block; filter: sepia(.15); }
.polaroid b { display: block; margin-top: 8px; font: 600 1.1rem/1 var(--v-serif); color: #8a2a3a; }
.polaroid small { font: italic 400 .8rem/1 var(--v-serif); color: #6b4a3a; }
.polaroid__flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 2; border-radius: 4px; }
.etape.vue .polaroid__flash { animation: flash 4.5s ease-out 1s infinite; }
@keyframes flash { 0% { opacity: 0; } 2% { opacity: .9; } 12% { opacity: 0; } }

/* les flammes de l'Intensité */
.flammes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-items: end; text-align: center; }
.flamme { display: grid; justify-items: center; gap: 4px; padding: 12px 6px 10px; border-radius: 10px; border: 1px solid transparent; transition: all .35s; }
.flamme__ico svg { width: calc(46px * var(--s)); height: calc(46px * var(--s)); fill: color-mix(in srgb, var(--v-or) 30%, transparent); stroke: var(--v-or-clair); stroke-width: 1.4; transform-origin: 50% 100%; animation: flamme 1.6s ease-in-out infinite alternate; }
.flamme:nth-child(2) .flamme__ico svg { animation-delay: -.5s; } .flamme:nth-child(3) .flamme__ico svg { animation-delay: -1s; }
@keyframes flamme { from { transform: scale(1, 1) rotate(-2deg); } to { transform: scale(.94, 1.08) rotate(2deg); } }
.flamme b { font: 500 1.35rem/1 var(--v-serif); color: var(--v-encre); }
.flamme small { font: 500 .62rem/1 var(--v-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--v-encre-3); }
.flamme.choisie { border-color: var(--v-or); background: color-mix(in srgb, var(--v-vin) 45%, transparent); box-shadow: 0 0 24px color-mix(in srgb, var(--v-or) 30%, transparent); }
.flamme.choisie b { color: var(--v-or-clair); }

/* César */
.cesar { display: grid; grid-template-columns: 1fr 70px 1fr; gap: 8px; align-items: center; }
.cesar__carte { display: grid; gap: 6px; place-items: center; height: 120px; border-radius: 10px; border: 1px solid var(--v-or-fil); background: linear-gradient(180deg, var(--v-carte-2), var(--v-noir)); transition: all .4s; }
.cesar__carte small { font: 600 .62rem/1 var(--v-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--v-or); }
.cesar__carte b { font: italic 400 1rem/1 var(--v-serif); color: var(--v-encre-3); }
.cesar__carte.elue { border-color: var(--v-or); transform: translateY(-6px) scale(1.04); box-shadow: 0 0 28px color-mix(in srgb, var(--v-or) 35%, transparent); }
.cesar__carte.elue b { color: var(--v-or-clair); }
.cesar__pouce { width: 70px; height: auto; transition: transform .6s cubic-bezier(.3, 1.5, .5, 1); filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .5)); }
.cesar[data-elue="0"] .cesar__pouce { transform: rotate(-35deg); } .cesar[data-elue="1"] .cesar__pouce { transform: rotate(35deg); }
.cesar__dit { grid-column: 1 / -1; text-align: center; font: italic 400 1rem/1.4 var(--v-serif) !important; color: var(--v-encre) !important; margin: 6px 0 0 !important; }

/* la boussole de l'Aventure */
.boussole { position: relative; display: grid; justify-items: center; }
.boussole__img { width: 150px; height: auto; transition: transform 2.4s cubic-bezier(.15, .8, .2, 1); filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .55)); }
.boussole__fams { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.boussole__fams .fam img { width: 32px; height: 32px; opacity: .4; transition: opacity .3s, transform .3s; }
.boussole__fams .fam small { display: none; }
.boussole__fams .fam.trouvee img { opacity: 1; transform: scale(1.3); }
.boussole__dit { font: italic 400 1rem/1.4 var(--v-serif) !important; color: var(--v-encre) !important; margin: 8px 0 0 !important; min-height: 1.4em; text-align: center; }

/* la jauge des crans */
.crans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.cran { position: relative; display: grid; gap: 4px; justify-items: center; text-align: center; padding: 14px 4px 10px; border-radius: 10px; border: 1px solid var(--v-or-fil); background: rgba(0, 0, 0, .2); opacity: .45; transition: opacity .5s, border-color .5s, background .5s; }
.cran i { font: italic 500 1.4rem/1 var(--v-serif); color: var(--v-or); }
.cran b { font: 500 .78rem/1.2 var(--v-sans); color: var(--v-encre); }
.cran small { font: italic 400 .78rem/1.2 var(--v-serif); color: var(--v-encre-3); }
.cran.allume { opacity: 1; border-color: var(--v-or); background: color-mix(in srgb, var(--v-vin) 40%, transparent); }
.cran--scelle { border-style: dashed; }
.cran--refus::after { content: ""; position: absolute; top: -10px; right: -6px; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #b8344f, #5a1026); box-shadow: 0 4px 8px rgba(0, 0, 0, .5); }

/* l'anneau du Donjon */
.anneau-d { position: relative; width: 240px; height: 240px; margin: 0 auto; }
.anneau-d__centre { position: absolute; inset: 70px; border-radius: 50%; display: grid; place-content: center; text-align: center; font: italic 500 1.1rem/1.1 var(--v-serif); color: var(--v-encre);
  background: radial-gradient(circle, color-mix(in srgb, var(--v-vin) 70%, transparent), transparent 75%); }
.anneau-d__centre small { display: block; margin-top: 4px; font: 500 .58rem/1 var(--v-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--v-encre-3); font-style: normal; }
.anneau-d__fams { position: absolute; inset: 0; animation: tourne 40s linear infinite; }
.anneau-d__fams .fam { position: absolute; left: 50%; top: 50%; translate: -50% -50%; transform: rotate(calc(var(--i) * 45deg)) translateY(-96px) rotate(calc(var(--i) * -45deg)); }
.anneau-d__fams .fam small { display: none; }
.anneau-d__fams .fam img { width: 44px; height: 44px; animation: tourne 40s linear infinite reverse; }

/* la lettre du Sacre */
.lettre { padding: 14px 10px 6px; text-align: center; }
.lettre__ligne { font: italic 400 1rem/1.4 var(--v-serif) !important; color: var(--v-creme-encre) !important; margin: 0 0 14px !important; }
.lettre__sceaux { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ls { display: grid; justify-items: center; gap: 6px; }
.ls img { width: 70px; height: auto; opacity: 0; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .35)); }
.etape.vue .ls img { animation: frappe .6s cubic-bezier(.3, 1.6, .5, 1) forwards; animation-delay: calc(.6s + var(--k) * .45s); }
.ls small { font: italic 500 .9rem/1 var(--v-serif); color: #9a6b22; }

/* la case porte maintenant un jouet : l'écran du jeu se fait plus discret en dessous */
.carte .ecran { margin-top: 18px; }
@media (min-width: 900px) { .carte { padding: 24px 24px 22px; } }
@media (prefers-reduced-motion: reduce) {
  .mini-disque, .siege__loup, .cintre, .flamme__ico svg, .anneau-d__fams, .anneau-d__fams .fam img, .coffre__ferme, .minuteur__trait, .polaroid__flash, .minuteur__huile { animation: none !important; }
  .ls img { opacity: 1; animation: none !important; }
}

/* retouches du 06/10 : l'objet flotte hors de la carte (il ne couvre plus le titre) ; la bulle respire sur téléphone ;
   au dressing, les pièces tombent en tas au lieu de disparaître */
@media (min-width: 900px) {
  .carte__objet { left: -84px; top: 26px; width: 96px; }
  .etape--d .carte__objet { left: auto; right: -84px; }
}
@media (max-width: 899px) {
  .carte__objet, .etape--d .carte__objet { width: 58px; top: -30px; left: auto; right: -6px; }
  .bulle { display: block; position: relative; margin-top: 14px; }
  .bulle__roue { position: absolute; left: -8px; top: -14px; width: 36px; height: 36px; z-index: 1; }
  .bulle__texte { padding: 12px 14px 13px 34px; border-radius: 16px; font-size: 1.02rem !important; }
}
.tringle { min-height: 230px; border-top: 0; padding-top: 0; }
.tringle::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--v-or-fonce), var(--v-or-clair), var(--v-or-fonce)); }
.tringle::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 0; height: 18px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, .55), transparent 70%); }
.cintre { align-items: flex-start; padding-top: 4px; }
.cintre.tombee { animation: none; }
.cintre.tombee img { transform: translateY(var(--chute, 132px)) rotate(var(--r, 25deg)); opacity: 1; transition: transform .8s cubic-bezier(.55, 0, .8, .45); }
@media (max-width: 600px) {
  .verdict { grid-template-columns: 64px 1fr; gap: 10px; padding: 10px; }
  .verdict__envie { width: 64px; height: 64px; }
  .verdict__dit { font-size: .95rem !important; } .verdict__gage { font-size: .9rem !important; }
  .siege__reglages button { padding: 5px 7px; font-size: .68rem; }
}

/* =====================================================================================================================
   L'ACCUEIL COURT (06/10) : des rubriques de jeu, brèves, chacune un objet ; le plateau complet vit sur /presentation.
   ===================================================================================================================== */
.rubrique { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: clamp(56px, 9vw, 110px) 16px 0; box-sizing: border-box; }
.rubrique__tete { max-width: 760px; margin: 0 auto 30px; text-align: center; }
.rubrique__sur { display: inline-flex; align-items: center; gap: 12px; font: 600 .66rem/1 var(--v-sans); letter-spacing: .3em; text-transform: uppercase; color: var(--v-or); margin: 0 0 14px; }
.rubrique__sur::before, .rubrique__sur::after { content: ""; width: 26px; height: 1px; background: var(--v-or-fil); }
.rubrique h2 { font: 500 clamp(1.8rem, 4vw, 2.9rem)/1.1 var(--v-serif); margin: 0 0 .5em; }
.rubrique h2 em { font-style: italic; color: var(--v-or); }
.rubrique__tete .bulle { max-width: 620px; margin: 0 auto; text-align: left; }
.rubrique__suite { text-align: center; margin: 30px 0 0; }
.rubrique__note { text-align: center; font: italic 400 .88rem/1.4 var(--v-serif); color: var(--v-encre-3); margin: 18px auto 0; max-width: 60ch; }
.rubrique > .jouet, .rubrique > .distrib, .rubrique > .portes2 { max-width: 760px; margin-left: auto; margin-right: auto; }
.rubrique .distrib { max-width: 760px; margin: 0 auto; padding: 22px; border-radius: 16px; border: 1px solid var(--v-or-fil); background: linear-gradient(180deg, var(--v-carte-2), var(--v-carte)); box-shadow: 0 30px 70px rgba(0, 0, 0, .5); }
.rubrique .portes2 { max-width: 760px; margin: 0 auto; gap: 16px; }
.rubrique .porte2 { padding: 34px 16px 26px; }
.rubrique .porte2__nom { font-size: 1.7rem; }
.rubrique .porte2 .fam img { width: 52px; height: 52px; }
.rubrique .porte2 .fam small { display: block; }
/* comment on joue : trois tableaux */
.temps-trois { display: grid; gap: 22px; }
.temps { position: relative; padding: 26px 20px 20px; border-radius: 14px; border: 1px solid var(--v-or-fil); background: linear-gradient(180deg, var(--v-carte-2), var(--v-carte)); box-shadow: 0 24px 50px rgba(0, 0, 0, .45);
  opacity: 0; transform: translateY(26px) rotate(-1deg); transition: opacity .7s, transform .9s cubic-bezier(.3, 1.4, .5, 1); }
.temps.vue { opacity: 1; transform: none; }
.temps__n { position: absolute; top: -22px; left: 18px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font: italic 600 1.15rem/1 var(--v-serif); color: var(--v-or-clair);
  background: radial-gradient(circle at 35% 30%, var(--v-vin), var(--v-noir)); border: 1px solid var(--v-or); box-shadow: 0 0 0 4px var(--v-fond); }
.temps h3 { font: 500 1.5rem/1.1 var(--v-serif); margin: 6px 0 12px; }
@media (min-width: 900px) { .temps-trois { grid-template-columns: repeat(3, 1fr); } .temps:nth-child(2) { transition-delay: .15s; } .temps:nth-child(3) { transition-delay: .3s; } }
/* les écrans : la pellicule */
.pellicule { position: relative; display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 8px; }
.pellicule__bande { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 26px 4px 22px; scrollbar-width: none;
  background: repeating-linear-gradient(90deg, transparent 0 14px, rgba(0, 0, 0, .55) 14px 24px) top / 100% 12px no-repeat, repeating-linear-gradient(90deg, transparent 0 14px, rgba(0, 0, 0, .55) 14px 24px) bottom / 100% 12px no-repeat, #0a0507;
  border-radius: 8px; box-shadow: inset 0 0 0 1px var(--v-or-fil); }
.pellicule__bande::-webkit-scrollbar { display: none; }
.pellicule__case { flex: 0 0 min(78%, 460px); scroll-snap-align: center; }
.pellicule__case .ecran { margin: 0; }
.pellicule__case p { margin: 8px 0 0; text-align: center; font: italic 400 .95rem/1 var(--v-serif); color: var(--v-or); }
.pellicule__fleche { appearance: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--v-or-fil); background: rgba(0, 0, 0, .35); color: var(--v-or); font: 400 1.5rem/1 var(--v-serif); cursor: pointer; }
.pellicule__fleche:hover { border-color: var(--v-or); }
@media (max-width: 600px) { .pellicule { grid-template-columns: 1fr; } .pellicule__fleche { display: none; } }
/* dans la boîte : le dos de boîte */
.boite { max-width: 900px; margin: 0 auto; padding: 26px clamp(16px, 4vw, 40px) 24px; border-radius: 6px; border: 2px solid var(--v-or); position: relative;
  background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--v-vin) 55%, transparent), transparent 70%), linear-gradient(180deg, var(--v-carte-2), var(--v-noir));
  box-shadow: 0 40px 90px rgba(0, 0, 0, .6), inset 0 0 0 6px rgba(0, 0, 0, .3), inset 0 0 0 7px var(--v-or-fil); }
.boite__tete { text-align: center; padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--v-or-fil); }
.boite__marque { display: block; font: 500 1.8rem/1 var(--v-serif); letter-spacing: .4em; text-indent: .4em; color: var(--v-or-clair); }
.boite__sous { display: block; margin-top: 8px; font: 500 .66rem/1.4 var(--v-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--v-encre-3); }
.boite__inventaire { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 14px; }
.boite__item { display: grid; grid-template-columns: 54px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; opacity: 0; transform: translateY(14px); transition: opacity .5s, transform .7s cubic-bezier(.3, 1.4, .5, 1); transition-delay: calc(var(--k) * .07s); }
.boite.vue .boite__item { opacity: 1; transform: none; }
.boite__item img { grid-row: 1 / span 2; width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .5)); }
.boite__n b { font: 500 1.6rem/1 var(--v-serif); color: var(--v-or-clair); }
.boite__l { font: 400 .86rem/1.3 var(--v-sans); color: var(--v-encre-2); }
.boite__pied { margin: 22px 0 0; padding-top: 14px; border-top: 1px solid var(--v-or-fil); text-align: center; font: italic 400 .95rem/1.4 var(--v-serif); color: var(--v-encre-2); }
@media (min-width: 900px) { .boite__inventaire { grid-template-columns: repeat(4, 1fr); } }
/* ce que disent les joueurs */
.preuves { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 760px; margin: 0 auto 26px; text-align: center; }
.preuve b { display: block; font: 500 clamp(1.8rem, 5vw, 2.8rem)/1 var(--v-serif); color: var(--v-or-clair); text-shadow: 0 0 30px color-mix(in srgb, var(--v-or) 35%, transparent); }
.preuve span { display: block; margin-top: 8px; font: 500 .66rem/1.3 var(--v-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--v-encre-3); }
.avis-cadres { display: grid; gap: 16px; max-width: 980px; margin: 0 auto; }
.avis-cadre { margin: 0; position: relative; padding: 30px 20px 18px; border-radius: 12px; border: 1px dashed var(--v-or-fil); text-align: center; background: rgba(0, 0, 0, .18); }
.avis-cadre__loup img { position: absolute; top: -22px; left: 50%; translate: -50% 0; width: 70px; height: auto; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .6)); }
.avis-cadre blockquote { margin: 10px 0 8px; font: italic 400 1.05rem/1.4 var(--v-serif); color: var(--v-encre-3); }
.avis-cadre figcaption { font: 500 .66rem/1 var(--v-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--v-encre-3); }
@media (min-width: 900px) { .avis-cadres { grid-template-columns: repeat(3, 1fr); } }
/* les nouveautés : trois affiches */
.breves { display: grid; gap: 14px; max-width: 980px; margin: 0 auto; }
.breve { position: relative; padding: 18px 18px 16px; border-radius: 10px; border: 1px solid var(--v-or-fil); background: linear-gradient(180deg, var(--v-carte-2), var(--v-carte)); animation: tri-entre .7s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: calc(var(--k) * .12s); }
.breve::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 10px 10px 0 0; background: linear-gradient(90deg, var(--v-or-fonce), var(--v-or-clair), var(--v-or-fonce)); }
.breve__date { margin: 0 0 6px; font: 600 .64rem/1 var(--v-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--v-or); }
.breve h3 { font: 500 1.15rem/1.25 var(--v-serif); margin: 0 0 8px; }
.breve p:last-child { margin: 0; font: 400 .9rem/1.55 var(--v-sans); color: var(--v-encre-2); }
.breves__attente { text-align: center; font: italic 400 1rem/1 var(--v-serif); color: var(--v-encre-3); }
@media (min-width: 900px) { .breves { grid-template-columns: repeat(3, 1fr); } }
/* le prix et la bande pro */
.rubrique--prix { padding-top: clamp(80px, 10vw, 130px); }
.bande-pro { max-width: 980px; margin: clamp(50px, 8vw, 90px) auto 0; padding: 18px 20px; border-top: 1px solid var(--v-or-fil); border-bottom: 1px solid var(--v-or-fil); display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; box-sizing: border-box; }
.bande-pro p { margin: 0; font: 400 .95rem/1.5 var(--v-sans); color: var(--v-encre-2); }
.bande-pro b { font: italic 500 1.05rem/1 var(--v-serif); color: var(--v-encre); }
@media (max-width: 700px) { .bande-pro { margin-left: 16px; margin-right: 16px; } }
.btn-fil svg { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* =====================================================================================================================
   L'ACCUEIL, LECTURE ALLÉGÉE (06/10) : un bloc = un titre, une phrase de la Roue, un seul visuel. De l'air entre les blocs,
   des textes courts et grands, le détail au geste.
   ===================================================================================================================== */
.distrib:not(.distrib--compact) .siege__resume { display: none; }
.distrib--compact .siege__reglages { display: none; }
.distrib--compact .siege.ouvert .siege__reglages { display: flex; animation: siege-entre .35s cubic-bezier(.3, 1.5, .5, 1); }
.distrib--compact .siege.ouvert .siege__resume { display: none; }
.siege__resume { appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; border: 1px dashed var(--v-or-fil); background: none; color: var(--v-encre-2); font: 500 .74rem/1 var(--v-sans); }
.siege__resume:hover { border-style: solid; color: var(--v-encre); }
.siege__resume svg { width: 12px; height: 12px; fill: none; stroke: var(--v-or); stroke-width: 2.2; }
.distrib--compact .siege__loup { cursor: pointer; }
.distrib--compact .siege.ouvert .siege__loup { filter: drop-shadow(0 0 16px color-mix(in srgb, var(--v-or) 55%, transparent)); }
.page-accueil .rubrique { padding-top: clamp(80px, 13vw, 170px); }
.page-accueil .rubrique__tete { margin-bottom: 36px; }
.page-accueil .rubrique h2 { font-size: clamp(2rem, 4.6vw, 3.3rem); }
.page-accueil .rubrique__tete .bulle { max-width: 520px; }
.page-accueil .rubrique__tete .bulle__texte { font-size: 1.12rem !important; }
.page-accueil .temps { padding: 30px 20px 20px; }
.temps__dit { margin: 0 0 16px; font: italic 400 1.1rem/1.4 var(--v-serif); color: var(--v-encre-2); }
.page-accueil .temps h3 { font-size: 1.7rem; margin-bottom: 8px; }
.page-accueil .porte2 .fam small { display: none; }
.page-accueil .porte2__fams { gap: 8px; }
.page-accueil .boite__l { font-size: .8rem; letter-spacing: .06em; }
.page-accueil .boite__n b { font-size: 2rem; }
.page-accueil .avis-cadre { padding: 26px 16px 14px; }
.page-accueil .avis-cadre blockquote { font-size: .98rem; margin: 6px 0; }
.page-accueil .breve h3 { margin: 0; }
.page-accueil .breves { gap: 12px; }
.page-accueil .etiquette small { display: none; }
.page-accueil .etiquette div { padding: 12px 4px; }
.page-accueil .palier__assure { display: none; }
.page-accueil .palier__porte > p { font-family: var(--v-serif); font-style: italic; font-size: 1.12rem; }
.page-accueil .verdict__dit { font-size: .92rem !important; }
@media (max-width: 899px) { .page-accueil .temps-trois { gap: 40px; } }
.distrib--compact .siege__loup:hover, .distrib--compact .siege.ouvert .siege__loup { animation-play-state: paused; }

/* LA PRÉSENTATION, LECTURE ALLÉGÉE (06/10) : la bulle courte, le jouet au centre, l'écran du jeu en vignette */
.page-presentation .carte { padding: 24px 22px 20px; }
.page-presentation .bulle__texte { font-size: 1.1rem !important; }
.page-presentation .carte .ecran { width: 168px; margin: 16px 0 0 auto; border-radius: 6px; }
.page-presentation .carte .ecran img { animation: none !important; }
.page-presentation .carte .ecran figcaption { opacity: 1; translate: 0 0; right: 50%; bottom: 50%; transform: translate(50%, 50%); white-space: nowrap; padding: 6px 10px; font-size: .7rem; }
.page-presentation .carte .ecran::after { content: ""; position: absolute; inset: 0; background: rgba(10, 4, 8, .35); pointer-events: none; transition: background .3s; }
.page-presentation .carte .ecran:hover::after { background: rgba(10, 4, 8, .1); }
.page-presentation .porte2 .fam small { display: none; }
.page-presentation .etape { margin-bottom: 76px; }
@media (min-width: 900px) { .page-presentation .etape { margin-bottom: 92px; } }

/* LA MAISON DERRIÈRE LA PAGE (06/10) : le fond fixe, en fondu, assombri pour la lecture */
.a-maison .velours { background: transparent; }
.a-maison .velours::before { opacity: .28; }
body.a-maison { background: var(--v-fond); }
.fond-maison { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.fond-maison__couche { position: absolute; inset: -2%; background: center / cover no-repeat; opacity: 0; transform: scale(1.04); transition: opacity 1.4s ease, transform 8s ease-out; }
.fond-maison__couche.visible { opacity: 1; transform: scale(1); }
.fond-maison--calme .fond-maison__couche { transition: opacity .2s; transform: none; }
.fond-maison__voile { position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 70% at 50% 45%, rgba(12, 6, 8, .62), rgba(12, 6, 8, .86) 75%), linear-gradient(180deg, rgba(12, 6, 8, .35), rgba(12, 6, 8, .2) 40%, rgba(12, 6, 8, .55)); }
html[data-aile="donjon"] .fond-maison__voile { background: radial-gradient(ellipse 80% 70% at 50% 45%, rgba(11, 7, 16, .6), rgba(11, 7, 16, .86) 75%), linear-gradient(180deg, rgba(11, 7, 16, .35), rgba(11, 7, 16, .2) 40%, rgba(11, 7, 16, .55)); }
/* les cartes gagnent un peu d'opacité pour rester lisibles sur la pièce */
.a-maison .carte, .a-maison .temps, .a-maison .rubrique .distrib, .a-maison .verdict, .a-maison .breve { background: linear-gradient(180deg, color-mix(in srgb, var(--v-carte-2) 92%, transparent), color-mix(in srgb, var(--v-carte) 94%, transparent)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
/* le bouton flottant garde sa forme, quelle que soit la feuille de la page source (presentation.html l'étirait) */
body a.h-cta.h-cta--float { left: auto !important; right: 16px !important; width: auto !important; max-width: calc(100% - 32px); letter-spacing: 0 !important; text-transform: none !important; font: 600 .86rem/1 var(--v-sans) !important; padding: 13px 20px !important; }

/* =====================================================================================================================
   LE PROGRAMME EN MINIATURE (06/10) : le haut de page de la présentation, toute la soirée sur un écran
   ===================================================================================================================== */
.seuil--programme .seuil__in { align-items: center; }
.mini { position: relative; width: 100%; aspect-ratio: 10 / 7; border-radius: 18px; border: 1px solid var(--v-or-fil); box-sizing: border-box;
  background: radial-gradient(ellipse 70% 60% at 50% 40%, color-mix(in srgb, var(--v-vin) 35%, transparent), transparent 75%), color-mix(in srgb, var(--v-noir) 78%, transparent);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .55), inset 0 0 0 6px rgba(0, 0, 0, .25), inset 0 0 0 7px var(--v-or-fil); backdrop-filter: blur(4px); }
.mini__fil { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mini__chemin { fill: none; stroke: var(--v-or-fil); stroke-width: 2; stroke-dasharray: 2 8; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.mini__trace { fill: none; stroke: var(--v-or); stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-dasharray: 1000; stroke-dashoffset: 1000;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--v-or) 60%, transparent)); animation: mini-trace 3.6s cubic-bezier(.4, 0, .2, 1) .4s forwards; }
@keyframes mini-trace { to { stroke-dashoffset: 0; } }
.mini__case { position: absolute; translate: -50% -50%; width: clamp(34px, 4.6vw, 52px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; text-decoration: none; z-index: 2;
  background: radial-gradient(circle at 35% 30%, var(--v-carte-2), var(--v-noir)); border: 1px solid var(--v-or); box-shadow: 0 0 0 3px var(--v-fond), 0 6px 14px rgba(0, 0, 0, .5);
  animation: mini-case .5s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(.35s + var(--k) * .15s); transition: transform .25s, box-shadow .25s; }
@keyframes mini-case { from { opacity: 0; scale: .2; } }
.mini__case b { font: 600 clamp(.78rem, 1.1vw, 1rem)/1 var(--v-serif); color: var(--v-or-clair); }
.mini__case svg { position: absolute; right: -7px; bottom: -5px; width: 18px; height: 18px; padding: 3px; box-sizing: border-box; border-radius: 50%; background: var(--v-fond); border: 1px solid var(--v-or-fil); fill: none; stroke: var(--v-or); stroke-width: 2; }
.mini__case:hover, .mini__case:focus-visible { transform: scale(1.15); box-shadow: 0 0 0 3px var(--v-fond), 0 0 22px color-mix(in srgb, var(--v-or) 55%, transparent); outline: none; }
.mini__case::after, .mini__sceau::after { content: attr(data-nom); position: absolute; bottom: calc(100% + 10px); left: 50%; translate: -50% 4px; white-space: nowrap; padding: 6px 10px; border-radius: 6px;
  font: italic 500 .9rem/1 var(--v-serif); color: var(--v-encre); background: rgba(10, 4, 8, .92); border: 1px solid var(--v-or-fil); opacity: 0; pointer-events: none; transition: opacity .2s, translate .2s; }
.mini__case:hover::after, .mini__case:focus-visible::after, .mini__sceau:hover::after { opacity: 1; translate: -50% 0; }
.mini__case--scelle { border-style: dashed; filter: saturate(.75); }
.mini__sceau { position: absolute; translate: -50% -50%; width: clamp(48px, 6vw, 72px); z-index: 3; animation: frappe .6s cubic-bezier(.3, 1.6, .5, 1) 2.6s both; }
.mini__sceau img { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .55)); }
.mini__acte { position: absolute; font: 600 clamp(.55rem, .8vw, .68rem)/1 var(--v-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--v-or); white-space: nowrap; }
.mini__arrivee { position: absolute; translate: -50% 0; font: italic 500 clamp(.85rem, 1.2vw, 1.05rem)/1 var(--v-serif); color: var(--v-or-clair); }
.mini__loup { position: absolute; translate: -50% -50%; width: clamp(44px, 5.4vw, 70px); z-index: 4; animation: mini-loup 1s cubic-bezier(.3, 1.6, .5, 1) .2s both; }
.mini__loup img { width: 100%; height: auto; animation: dandine 3s ease-in-out infinite; transform-origin: 50% 90%; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6)); }
@keyframes mini-loup { from { opacity: 0; translate: -50% -120%; } }
@media (max-width: 999px) { .seuil--programme .mini { order: 4; margin: 10px 0 24px; } .mini__acte { font-size: .5rem; letter-spacing: .12em; } .mini__case svg { display: none; } }
@media (prefers-reduced-motion: reduce) { .mini__trace { animation: none; stroke-dashoffset: 0; } .mini__case, .mini__sceau, .mini__loup, .mini__loup img { animation: none; } }
.etape, .palier, #plateau { scroll-margin-top: 110px; }
.bulle__dit { position: relative; display: block; }
.dit-fantome { visibility: hidden; }
.dit-ecrit { position: absolute; left: 0; top: 0; right: 0; }
/* les images des jouets gardent leurs proportions (la taille est écrite dans la balise) */
.coupes img, .ls img, .boussole__img, .coffre img, .triptyque img, .ev img, .minuteur__huile, .polaroid img, .boite__item img, .fam img, .avis-cadre__loup img, .cesar__pouce { height: auto; }
.coupes img { max-height: 120px; width: auto; max-width: 100%; }
.coupes img { height: 120px !important; width: 100% !important; max-height: none; object-fit: contain; }
.mini__loup { width: clamp(40px, 5vw, 62px); }
@media (max-width: 999px) { .seuil--programme .bulle { order: 3; margin-top: 4px; } .seuil--programme .ailes { order: 5; } }
@media (max-width: 600px) { .mini__acte { display: none; } .mini__arrivee { font-size: .75rem; } }

/* LE SACRE AU BOUT DU PROGRAMME (06/10) : la couronne, trois sceaux, la règle de la victoire */
.mini { aspect-ratio: 1000 / 880; }
.mini__sacre { position: absolute; translate: -50% -50%; width: clamp(64px, 8vw, 104px); aspect-ratio: 1; border-radius: 50%; z-index: 3; display: grid; place-items: center; text-decoration: none;
  background: radial-gradient(circle at 35% 30%, #fbefd0, #d8b468 55%, #8c6a2c); box-shadow: 0 0 0 4px var(--v-fond), 0 0 0 5px var(--v-or), 0 0 40px color-mix(in srgb, var(--v-or) 60%, transparent), 0 14px 26px rgba(0, 0, 0, .55);
  animation: mini-case .7s cubic-bezier(.3, 1.6, .5, 1) 3.3s both, sacre-luit 2.6s ease-in-out 4s infinite alternate; }
html[data-aile="donjon"] .mini__sacre { background: radial-gradient(circle at 35% 30%, #f1e6ff, #c9a6f0 55%, #6e4aa0); }
@keyframes sacre-luit { to { box-shadow: 0 0 0 4px var(--v-fond), 0 0 0 5px var(--v-or), 0 0 70px color-mix(in srgb, var(--v-or) 85%, transparent), 0 14px 26px rgba(0, 0, 0, .55); } }
.mini__couronne svg { width: 52%; height: auto; fill: color-mix(in srgb, #fff 35%, transparent); stroke: #3a2208; stroke-width: 1.6; }
html[data-aile="donjon"] .mini__couronne svg { stroke: #24103a; }
.mini__couronne { display: grid; place-items: center; width: 100%; height: 100%; }
.mini__couronne svg { margin: auto; }
.mini__faveurs { position: absolute; inset: 0; pointer-events: none; }
.mini__faveurs img { position: absolute; width: 34%; height: auto; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5)); opacity: 0; animation: frappe .5s cubic-bezier(.3, 1.6, .5, 1) forwards; }
.mini__faveurs img:nth-child(1) { left: -22%; top: -18%; animation-delay: 4.1s; }
.mini__faveurs img:nth-child(2) { left: 33%; top: -36%; animation-delay: 4.35s; }
.mini__faveurs img:nth-child(3) { right: -22%; top: -18%; animation-delay: 4.6s; }
.mini__victoire { position: absolute; translate: 0 -50%; width: 52%; animation: mini-case .6s ease 3.6s both; }
.mini__victoire b { display: block; font: italic 600 clamp(1.1rem, 2vw, 1.6rem)/1 var(--v-serif); color: var(--v-or-clair); margin-bottom: 6px; }
.mini__victoire span { display: block; font: 400 clamp(.72rem, 1.05vw, .9rem)/1.4 var(--v-sans); color: var(--v-encre-2); }
@media (max-width: 600px) { .mini__victoire { width: 58%; } .mini__victoire span { font-size: .68rem; } }

/* À QUOI JE SERS (06/10) : une affiche, une promesse par ligne */
.affiche-sers { list-style: none; margin: 0 auto; padding: 0; max-width: 760px; display: grid; gap: clamp(22px, 3.5vw, 34px); }
.sert { display: grid; grid-template-columns: 76px 1fr; gap: 18px; align-items: center; opacity: 0; transform: translateY(18px); transition: opacity .6s, transform .8s cubic-bezier(.3, 1.4, .5, 1); transition-delay: calc(var(--k) * .09s); }
.affiche-sers.vue .sert { opacity: 1; transform: none; }
.sert > img { width: 76px; height: 76px; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .55)); animation: flotte 5s ease-in-out infinite alternate; animation-delay: calc(var(--k) * -.7s); }
.sert b { display: block; font: 500 clamp(1.4rem, 3vw, 2rem)/1.1 var(--v-serif); color: var(--v-encre); margin-bottom: 4px; }
.sert span { display: block; font: italic 400 clamp(1rem, 1.6vw, 1.15rem)/1.45 var(--v-serif); color: var(--v-encre-2); }
.sert:nth-child(even) { grid-template-columns: 1fr 76px; text-align: right; }
.sert:nth-child(even) > img, .sert:nth-child(even) > .sert__trio { order: 2; }
.sert--tous { grid-template-columns: 1fr !important; text-align: center !important; padding-top: 16px; border-top: 1px solid var(--v-or-fil); }
.sert__trio { display: flex; justify-content: center; gap: 10px; margin-bottom: 6px; }
.sert__trio img { width: clamp(70px, 12vw, 104px); height: auto; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .5)); }
.sert--tous b { color: var(--v-or-clair); }
@media (max-width: 600px) { .sert, .sert:nth-child(even) { grid-template-columns: 56px 1fr; text-align: left; } .sert:nth-child(even) > img { order: 0; } .sert > img { width: 56px; height: 56px; } }
.sert--tous > .sert__trio { order: 0 !important; }

/* =====================================================================================================================
   LA PAGE DU JEU COMPLET : LA BOÎTE (06/10). La boîte sur la commode, le couvercle qui se lève, l'inventaire qui sort ; le dos
   de la boîte (le comparatif) ; le Pass en billet ; un relevé qui dit « IMX STUDIO ».
   ===================================================================================================================== */
.prix-tete { display: flex; align-items: center; gap: 16px; margin: 0 0 22px; }
.prix-tete b { font: 500 clamp(2.6rem, 5vw, 3.6rem)/1 var(--v-serif); color: var(--v-or-clair); text-shadow: 0 0 34px color-mix(in srgb, var(--v-or) 40%, transparent); white-space: nowrap; }
.prix-tete span { font: italic 400 1rem/1.4 var(--v-serif); color: var(--v-encre-2); }
.prix-tete--fin { justify-content: center; margin: 10px 0 24px; }
.seuil__garanties { margin: 6px 0 0; font: 500 .72rem/1.4 var(--v-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--v-encre-3); }
/* la boîte */
.boite3d { display: grid; justify-items: center; }
.boite3d__scene { position: relative; width: min(82vw, 440px); aspect-ratio: 1 / .78; perspective: 1400px; margin-top: 150px; }
.boite3d__fond { position: absolute; inset: 22% 0 0; border-radius: 8px; transform-style: preserve-3d;
  background: linear-gradient(180deg, #2b0c18, #170610); box-shadow: 0 50px 90px rgba(0, 0, 0, .65), inset 0 0 0 2px var(--v-or-fil), inset 0 18px 30px rgba(0, 0, 0, .6); }
html[data-aile="donjon"] .boite3d__fond { background: linear-gradient(180deg, #1f0d30, #0f0618); }
.boite3d__calage { position: absolute; inset: 10px; border-radius: 4px; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .3) 0 2px, transparent 2px 33%), radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--v-vin) 80%, transparent), transparent 70%); }
.boite3d__couvercle { appearance: none; border: 0; padding: 0; cursor: pointer; position: absolute; left: -3%; right: -3%; top: 14%; height: 86%; border-radius: 10px; transform-origin: 50% 0; transform: rotateX(0deg); z-index: 3;
  transition: transform 1.3s cubic-bezier(.3, 1.25, .45, 1); background: radial-gradient(ellipse at 50% 30%, #4a1426, #22070f 75%); box-shadow: 0 30px 60px rgba(0, 0, 0, .6), inset 0 0 0 3px var(--v-or), inset 0 0 0 8px rgba(0, 0, 0, .35), inset 0 0 0 9px var(--v-or-fil); }
html[data-aile="donjon"] .boite3d__couvercle { background: radial-gradient(ellipse at 50% 30%, #35195a, #13071f 75%); }
.boite3d.ouverte .boite3d__couvercle { transform: translateY(-62%) rotateX(68deg); }
.boite3d__art { display: grid; justify-items: center; align-content: center; height: 100%; gap: 6px; }
.boite3d__roue { width: 46%; aspect-ratio: 1; display: block; }
.boite3d__roue svg { width: 100%; height: 100%; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .6)); }
.boite3d__roue .roue__disque { animation: tourne 60s linear infinite; }
.boite3d__marque { font: 500 clamp(1.1rem, 2.4vw, 1.7rem)/1 var(--v-serif); letter-spacing: .4em; text-indent: .4em; color: var(--v-or-clair); }
.boite3d__sous { font: 500 .6rem/1 var(--v-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--v-encre-3); }
.sortie { position: absolute; left: 50%; top: 52%; width: 92px; height: auto; z-index: 2; opacity: 0; transform: translate(-50%, -30%) scale(.4) rotate(0); filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .6));
  transition: transform .9s cubic-bezier(.3, 1.5, .5, 1), opacity .5s; transition-delay: calc(.35s + var(--k) * .09s); }
.boite3d.ouverte .sortie { opacity: 1; transform: translate(calc(-50% + var(--x) * var(--ex, 1)), calc(-30% + var(--y) * var(--ey, 1))) scale(1) rotate(var(--r)); }
.boite3d.ouverte .sortie { animation: flotte 5s ease-in-out 1.8s infinite alternate; }
.etiquette-prix { position: absolute; right: -4%; bottom: 8%; z-index: 4; display: grid; justify-items: center; padding: 10px 14px 9px 22px; border-radius: 4px 8px 8px 4px; transform: rotate(-8deg); transform-origin: 0 50%;
  background: linear-gradient(180deg, #f8efdd, #e9d6b0); color: #2b1810; box-shadow: 0 10px 20px rgba(0, 0, 0, .45); animation: etiquette 3.4s ease-in-out infinite alternate; }
.etiquette-prix::before { content: ""; position: absolute; left: 8px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #2b1810; box-shadow: 0 0 0 2px #c9a35a; }
.etiquette-prix b { font: 600 1.35rem/1 var(--v-serif); } .etiquette-prix small { font: italic 400 .72rem/1.2 var(--v-serif); color: #6b4a3a; }
@keyframes etiquette { from { transform: rotate(-10deg); } to { transform: rotate(-4deg); } }
.boite3d__aide { margin: 14px 0 0; font: italic 400 .95rem/1 var(--v-serif); color: var(--v-encre-3); }
@media (max-width: 999px) { .seuil--boite .boite3d { order: 3; margin: 0 0 20px; } .seuil--boite .bulle { order: 4; } .boite3d__scene { margin-top: 130px; } .sortie { width: 70px; } }
/* le dos de la boîte : le comparatif imprimé */
.dos { max-width: 860px; margin: 0 auto; padding: 22px clamp(12px, 3vw, 30px) 24px; border-radius: 6px; border: 2px solid var(--v-or); box-sizing: border-box;
  background: linear-gradient(180deg, color-mix(in srgb, var(--v-carte-2) 94%, transparent), color-mix(in srgb, var(--v-noir) 94%, transparent)); box-shadow: 0 40px 90px rgba(0, 0, 0, .55), inset 0 0 0 6px rgba(0, 0, 0, .3), inset 0 0 0 7px var(--v-or-fil); }
.dos__table { width: 100%; border-collapse: collapse; font: 400 .92rem/1.4 var(--v-sans); color: var(--v-encre-2); }
.dos__table thead th { padding: 6px 8px 14px; font: italic 500 1.15rem/1.1 var(--v-serif); color: var(--v-encre); text-align: center; vertical-align: bottom; }
.dos__table thead th small { display: block; margin-top: 4px; font: 600 1.3rem/1 var(--v-serif); font-style: normal; color: var(--v-or-clair); }
.dos__table thead .dos__phare { color: var(--v-or-clair); }
.dos__table tbody th { text-align: left; font: 500 .82rem/1.3 var(--v-sans); letter-spacing: .04em; color: var(--v-encre); padding: 11px 8px; width: 30%; }
.dos__table td { text-align: center; padding: 11px 8px; }
.dos__table tbody tr { border-top: 1px solid var(--v-or-fil); }
.dos__table td:last-child { color: var(--v-encre); background: color-mix(in srgb, var(--v-vin) 22%, transparent); }
.dos__table b { font: 600 1.05rem/1 var(--v-serif); color: var(--v-or-clair); }
.non { display: inline-flex; align-items: center; gap: 5px; font: italic 400 .85rem/1 var(--v-serif); color: var(--v-encre-3); }
.non svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.dos__actes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-top: 20px; }
@media (max-width: 600px) { .dos__table { font-size: .8rem; } .dos__table tbody th { width: 34%; font-size: .74rem; } .dos__table thead th { font-size: .95rem; } .dos__actes { justify-content: center; } }
/* LE DOS DE LA BOÎTE, À JOUER (06/10, fondateur : « pas assez visuel, amuse-toi, ce comparatif est important ») : une bascule
   L'essai / Le jeu complet ; la grille du Palier se lève, les marches 3 et 4 prennent feu, la couronne du Sacre monte, la pile de
   gages grandit, les envies s'allument, la porte du Donjon s'ouvre, les flammes prennent, la carte No Limit arrive. */
.dos2 { max-width: 1000px; padding: 26px clamp(14px, 3vw, 34px) 26px; }
.bascule { position: relative; display: grid; grid-template-columns: 1fr 1fr; max-width: 540px; margin: 0 auto 30px; padding: 5px; border-radius: 999px; border: 1px solid var(--v-or); background: rgba(0, 0, 0, .45); box-shadow: inset 0 2px 10px rgba(0, 0, 0, .5); }
.bascule button { position: relative; z-index: 1; appearance: none; border: 0; background: none; cursor: pointer; padding: 11px 12px 10px; border-radius: 999px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--v-encre-2); font: italic 500 1.08rem/1 var(--v-serif); transition: color .45s; }
.bascule button b { font: 600 1.2rem/1 var(--v-serif); color: var(--v-or-clair); transition: color .45s; }
.bascule button[aria-checked="true"], .bascule button[aria-checked="true"] b { color: #1c0e05; }
.bascule button:focus-visible { outline: 2px solid var(--v-or-clair); outline-offset: 3px; }
.bascule__glisse { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 999px; background: linear-gradient(180deg, var(--v-or-clair), var(--v-or));
  box-shadow: 0 6px 22px color-mix(in srgb, var(--v-or) 45%, transparent); transition: transform .6s cubic-bezier(.3, 1.4, .5, 1); }
.dos2[data-cote="complet"] .bascule__glisse { transform: translateX(100%); }
html[data-aile="donjon"] .bascule__glisse { background: linear-gradient(180deg, #ecdcff, #c9a6f0); box-shadow: 0 6px 22px rgba(201, 166, 240, .45); }
html[data-aile="donjon"] .bascule button[aria-checked="true"], html[data-aile="donjon"] .bascule button[aria-checked="true"] b { color: #1f0d30; }
.dos2__titre { margin: 6px 0 16px; text-align: center; font: 600 .66rem/1 var(--v-sans); letter-spacing: .26em; text-transform: uppercase; color: var(--v-or-clair); }
/* les marches de la nuit */
.marches { display: grid; grid-template-columns: 1fr 1fr 50px 1fr 1fr; align-items: end; gap: 10px; margin: 46px 0 34px; }
.marche { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-height: calc(120px + var(--n) * 36px); padding: 16px 14px 18px; box-sizing: border-box;
  border-radius: 10px 10px 4px 4px; border: 1px solid var(--v-or-fil); background: linear-gradient(180deg, color-mix(in srgb, var(--v-vin) calc(var(--n) * 14%), transparent), rgba(0, 0, 0, .35));
  transition: filter .8s, opacity .8s, box-shadow .8s, border-color .8s; }
.marche::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 6px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--v-or-fonce), var(--v-or-clair), #e2493b); opacity: calc(var(--n) * .25); }
.marche__chiffre { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--v-or); font: italic 600 .8rem/1 var(--v-serif); color: var(--v-or-clair); }
.marche__nom { font: italic 600 1.2rem/1.1 var(--v-serif); color: var(--v-encre); }
.marche__ligne { font: 400 .85rem/1.4 var(--v-sans); color: var(--v-encre-2); }
.marche__acces, .marche__acces .selon { margin-top: 4px; font: 600 .62rem/1 var(--v-sans) !important; letter-spacing: .18em; text-transform: uppercase; color: var(--v-or-clair); }
.dos2[data-cote="essai"] .marche--haut { filter: grayscale(.85) brightness(.55); }
.dos2[data-cote="essai"] .marche--haut .marche__acces .selon { color: var(--v-encre-3); }
.dos2[data-cote="complet"] .marche--haut { border-color: var(--v-or); box-shadow: 0 0 40px rgba(226, 73, 59, .22), inset 0 0 30px color-mix(in srgb, var(--v-vin) 60%, transparent); transition-delay: .5s; }
.dos2[data-cote="complet"] .marche--haut + .marche--haut { transition-delay: .75s; }
.dos2[data-cote="complet"] .marche--haut .marche__acces .selon { color: #f3a46a; }
/* la grille du Palier : elle se lève */
.grille { position: relative; align-self: stretch; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.grille__barreaux { position: absolute; inset: 0 6px 24px; border-radius: 3px 3px 0 0;
  background: repeating-linear-gradient(90deg, var(--v-or) 0 3px, transparent 3px 11px), repeating-linear-gradient(180deg, transparent 0 28px, var(--v-or) 28px 31px);
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, .8)); transition: transform 1.1s cubic-bezier(.6, 0, .3, 1); }
.grille__cadenas { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 40px; border-radius: 50%; border: 1px solid var(--v-or); background: #140a06; color: var(--v-or-clair); transition: transform .6s, opacity .5s; }
.grille__cadenas svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.grille small { position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); white-space: nowrap; font: italic 500 .8rem/1 var(--v-serif); color: var(--v-or-clair); }
.dos2[data-cote="complet"] .grille__barreaux { transform: translateY(-110%); }
.dos2[data-cote="complet"] .grille__cadenas { opacity: 0; transform: translateY(-50px) rotate(-30deg) scale(.6); }
/* la couronne du Sacre : au bout du Déshabillage, puis au bout de la nuit */
.marche__couronne { position: absolute; left: 50%; top: -40px; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--v-or-clair); transform: translateX(-50%); transition: opacity .5s, transform .7s cubic-bezier(.3, 1.7, .5, 1); }
.marche__couronne svg { width: 30px; height: 30px; fill: color-mix(in srgb, var(--v-or) 45%, transparent); stroke: currentColor; stroke-width: 1.6; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--v-or) 70%, transparent)); }
.marche__couronne small { font: italic 500 .74rem/1 var(--v-serif); white-space: nowrap; }
.dos2[data-cote="complet"] .marche__couronne--essai, .dos2[data-cote="essai"] .marche__couronne--complet { opacity: 0; transform: translateX(-50%) translateY(14px) scale(.4); }
.dos2[data-cote="complet"] .marche__couronne--complet { transition-delay: 1s; }
/* les vignettes */
.vignettes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.vig { margin: 0; padding: 16px 10px 14px; border-radius: 12px; border: 1px solid var(--v-or-fil); background: rgba(0, 0, 0, .3); text-align: center; }
.vig > div:first-child { position: relative; height: 130px; margin: 0 auto 12px; display: grid; place-items: center; }
.vig figcaption { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.vig .compte { font: 600 2rem/1 var(--v-serif); color: var(--v-or-clair); font-variant-numeric: tabular-nums; }
.vig figcaption > span:not(.selon) { font: 600 .6rem/1.3 var(--v-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--v-encre-2); }
.vig figcaption > b:not(.compte) { font: italic 600 1.2rem/1.1 var(--v-serif); color: var(--v-encre); }
.vig .selon { font: italic 400 .9rem/1.3 var(--v-serif); color: var(--v-encre-3); transition: color .5s; }
.dos2[data-cote="complet"] .vig .selon { color: var(--v-or-clair); }
/* la pile de gages */
.pile { width: 80px; }
.pile i { position: absolute; left: 10px; bottom: 0; width: 60px; aspect-ratio: .68; border-radius: 5px; background: url("img/carte-dos.webp") center / cover; box-shadow: 0 2px 4px rgba(0, 0, 0, .6);
  transform: translate(calc(var(--k) * .5px), calc(var(--k) * -3px)) rotate(calc((var(--k) - 7) * .7deg)); transition: opacity .3s, transform .55s cubic-bezier(.3, 1.5, .5, 1); transition-delay: calc((var(--k) - 6) * .07s); }
.dos2[data-cote="essai"] .pile i:nth-child(n+7) { opacity: 0; transform: translateY(-70px) rotate(10deg); transition-delay: 0s; }
/* les envies */
.semis { display: grid !important; grid-template-columns: repeat(13, 1fr); gap: 4px; width: 100%; max-width: 150px; align-content: center; place-items: stretch !important; }
.semis i { aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .1); transition: background .4s, box-shadow .4s; transition-delay: calc((var(--i) - 16) * 7ms); }
.semis i.e { background: var(--v-or-clair); box-shadow: 0 0 5px color-mix(in srgb, var(--v-or) 80%, transparent); }
.dos2[data-cote="complet"] .semis i.b { background: var(--v-or-clair); box-shadow: 0 0 5px color-mix(in srgb, var(--v-or) 80%, transparent); }
.dos2[data-cote="complet"] .semis i.d { background: #c9a6f0; box-shadow: 0 0 6px rgba(201, 166, 240, .9); }
.dos2[data-cote="essai"] .semis i { transition-delay: 0s; }
/* la porte du Donjon */
.porte { width: 84px; height: 120px; margin: 0 auto; border-radius: 42px 42px 4px 4px; overflow: hidden; perspective: 260px;
  background: radial-gradient(circle at 50% 62%, #e6d4fb, #8b62c4 40%, #2a1240 80%); box-shadow: 0 0 0 3px #3a2210, 0 0 0 4px var(--v-or-fil); transition: box-shadow .9s; }
.porte__lueur { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #1f0d30; font: 600 .56rem/1 var(--v-sans); letter-spacing: .14em; text-transform: uppercase; }
.porte__lueur b { font: 600 1.7rem/1 var(--v-serif); letter-spacing: 0; }
.porte__battant { position: absolute; top: 0; bottom: 0; width: 50%; background: repeating-linear-gradient(90deg, #4f2d16 0 9px, #3a2010 9px 10px); box-shadow: inset 0 0 12px rgba(0, 0, 0, .6); transition: transform 1.2s cubic-bezier(.5, 0, .2, 1); }
.porte__battant--g { left: 0; transform-origin: left; border-radius: 42px 0 0 0; } .porte__battant--d { right: 0; transform-origin: right; border-radius: 0 42px 0 0; }
.porte__cadenas { position: absolute; left: 50%; top: 60%; z-index: 2; display: grid; place-items: center; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; border: 1px solid var(--v-or); background: #140a06; color: var(--v-or-clair); transition: opacity .4s, transform .6s; }
.porte__cadenas svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.dos2[data-cote="complet"] .porte { box-shadow: 0 0 0 3px #3a2210, 0 0 0 4px var(--v-or-fil), 0 0 36px rgba(201, 166, 240, .55); }
.dos2[data-cote="complet"] .porte__battant--g { transform: rotateY(-80deg); transition-delay: .35s; }
.dos2[data-cote="complet"] .porte__battant--d { transform: rotateY(80deg); transition-delay: .35s; }
.dos2[data-cote="complet"] .porte__cadenas { opacity: 0; transform: translateY(30px) rotate(40deg); }
/* les flammes de l'intensité */
.flammes { display: flex !important; align-items: flex-end; justify-content: center; gap: 8px; }
.flamme { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.flamme svg { width: calc(24px + var(--f) * 10px); height: calc(24px + var(--f) * 10px); fill: rgba(255, 255, 255, .04); stroke: rgba(255, 255, 255, .25); stroke-width: 1.6; transform-origin: 50% 100%; transition: fill .6s, stroke .6s, filter .6s; transition-delay: calc(var(--f) * .2s); }
.flamme small { display: block; text-align: center; font: 500 .6rem/1.3 var(--v-sans); color: var(--v-encre-3); transition: color .5s; }
.dos2[data-cote="complet"] .flamme svg { fill: rgba(226, 73, 59, .45); stroke: #f3a46a; filter: drop-shadow(0 0 8px #e2493b); animation: vacille calc(.9s + var(--f) * .2s) ease-in-out infinite alternate; }
.dos2[data-cote="complet"] .flamme small { color: var(--v-encre); }
@keyframes vacille { from { transform: scale(1); } to { transform: scale(1.06, 1.12) skewX(-3deg); } }
/* les questions de Se découvrir, et la carte No Limit */
.questions { width: 130px; }
.q { position: absolute; left: 50%; top: 50%; width: 50px; height: 72px; margin: -36px 0 0 -25px; border-radius: 6px; display: grid; place-items: center; background: linear-gradient(160deg, #f6ecd8, #e2cfa6); color: #6e1431;
  font: italic 600 1.6rem/1 var(--v-serif); box-shadow: 0 6px 12px rgba(0, 0, 0, .5); transition: transform .65s cubic-bezier(.3, 1.4, .5, 1), opacity .5s; }
.q--1 { transform: translateX(-30px) rotate(-12deg); } .q--2 { transform: translateY(-4px); } .q--3 { transform: translateX(30px) rotate(12deg); }
.q--cru { z-index: 2; padding: 4px; box-sizing: border-box; background: linear-gradient(160deg, #8c1838, #3a0614); color: #f6ecd8; font: 600 .56rem/1.15 var(--v-sans); letter-spacing: .12em; text-transform: uppercase; text-align: center;
  opacity: 0; transform: translateY(46px) scale(.8); }
.dos2[data-cote="complet"] .q--1 { transform: translateX(-46px) rotate(-20deg); }
.dos2[data-cote="complet"] .q--3 { transform: translateX(46px) rotate(20deg); }
.dos2[data-cote="complet"] .q--cru { opacity: 1; transform: translateY(-8px) rotate(-4deg) scale(1.06); box-shadow: 0 8px 22px rgba(140, 24, 56, .7); transition-delay: .4s; }
/* ce qui est pareil */
.pareil { margin: 26px 0 0; padding-top: 18px; border-top: 1px dashed var(--v-or-fil); text-align: center; }
.pareil p { margin: 0; font: 600 .62rem/1 var(--v-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--v-encre-3); }
.pareil ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; margin: 14px 0 0; padding: 0; }
.pareil li { display: inline-flex; align-items: center; gap: 8px; font: 400 .92rem/1 var(--v-sans); color: var(--v-encre-2); }
.pareil li svg { width: 18px; height: 18px; fill: none; stroke: var(--v-or-clair); stroke-width: 1.6; }
.pareil li b { font: 600 1.05rem/1 var(--v-serif); color: var(--v-or-clair); }
.dos2__detail { margin-top: 18px; }
.dos2__detail summary { cursor: pointer; list-style: none; text-align: center; font: italic 500 .95rem/1 var(--v-serif); color: var(--v-or-clair); }
.dos2__detail summary::-webkit-details-marker { display: none; }
.dos2__detail[open] .dos__table { margin-top: 16px; }
@media (max-width: 999px) { .vignettes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .bascule button { font-size: .92rem; padding: 10px 6px 9px; } .bascule button b { font-size: 1.05rem; }
  .marches { grid-template-columns: 1fr; align-items: stretch; gap: 8px; margin-top: 10px; }
  .marche { min-height: 0; margin-left: calc((var(--n) - 1) * 12px); padding: 12px 14px 16px; }
  .marche__couronne { left: auto; right: 12px; top: 12px; transform: none; }
  .dos2[data-cote="complet"] .marche__couronne--essai, .dos2[data-cote="essai"] .marche__couronne--complet { transform: translateY(10px) scale(.4); }
  .grille { height: 52px; margin-left: 12px; }
  .grille__barreaux { inset: 0 0 0 0; border-radius: 3px; }
  .grille__cadenas { margin: 0; align-self: center; }
  .grille { justify-content: center; }
  .grille small { bottom: auto; top: 50%; left: auto; right: 10px; transform: translateY(-50%); padding: 4px 8px; border-radius: 999px; background: #140a06; }
  .vignettes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .vig--decouvrir { grid-column: span 2; }
  .vig .compte { font-size: 1.7rem; }
  .flammes { gap: 3px; } .flamme svg { width: calc(20px + var(--f) * 7px); height: calc(20px + var(--f) * 7px); } .flamme small { font-size: .54rem; letter-spacing: .02em; }
}
@media (prefers-reduced-motion: reduce) { .dos2 *, .dos2 *::before, .dos2 *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; } }
/* le Pass : un billet */
.billet-pass { position: relative; max-width: 720px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto; border-radius: 10px; overflow: hidden; transform: rotate(-1.2deg);
  background: linear-gradient(90deg, #f6ecd8, #eadbbb); color: #2b1810; box-shadow: 0 30px 60px rgba(0, 0, 0, .55); transition: transform .4s cubic-bezier(.3, 1.4, .5, 1); }
.billet-pass:hover { transform: rotate(0) translateY(-4px); }
.billet-pass__corps { padding: 22px 24px; }
.billet-pass__corps small { font: 600 .62rem/1 var(--v-sans); letter-spacing: .26em; text-transform: uppercase; color: #9a6b22; }
.billet-pass__corps b { display: block; margin: 6px 0 8px; font: italic 600 2rem/1 var(--v-serif); }
.billet-pass__corps span { font: 400 .95rem/1.5 var(--v-sans); color: #4a3020; }
.billet-pass__talon { display: grid; place-items: center; gap: 12px; padding: 18px 22px; border-left: 2px dashed rgba(90, 50, 20, .35); background: rgba(154, 107, 34, .1); }
.billet-pass__talon em { font: 600 2rem/1 var(--v-serif); font-style: normal; color: #6e1431; }
.billet-pass__trou { position: absolute; right: calc(var(--talon, 168px) - 9px); top: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--v-fond); }
@media (max-width: 600px) { .billet-pass { grid-template-columns: 1fr; } .billet-pass__talon { border-left: 0; border-top: 2px dashed rgba(90, 50, 20, .35); } .billet-pass__trou { display: none; } }
/* le relevé : IMX STUDIO */
.releve { max-width: 560px; margin: 0 auto; padding: 18px 22px 12px; border-radius: 6px; background: #fbfaf6; color: #222; font: 500 .9rem/1.2 'Courier New', monospace; box-shadow: 0 30px 60px rgba(0, 0, 0, .5); transform: rotate(1deg); }
.releve__tete { display: flex; justify-content: space-between; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid #ccc; font: 600 .74rem/1 var(--v-sans); letter-spacing: .18em; text-transform: uppercase; color: #666; }
.releve__ligne { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; margin: 0; padding: 8px 4px; border-bottom: 1px dotted #ddd; }
.releve__ligne--imx { background: #fff2b8; border-radius: 3px; animation: surligne 2.4s ease-in-out 1s both; }
@keyframes surligne { from { background: transparent; } }
.garanties { list-style: none; max-width: 760px; margin: 30px auto 0; padding: 0; display: grid; gap: 12px; }
.garanties li { font: 400 .98rem/1.5 var(--v-sans); color: var(--v-encre-2); text-align: center; }
.garanties b { font: italic 500 1.08rem/1 var(--v-serif); color: var(--v-encre); }
.page-tarifs .rubrique { padding-top: clamp(70px, 11vw, 140px); }
@media (max-width: 999px) { .seuil--boite .prix-tete { order: 5; } .seuil--boite .seuil__actes { order: 6; } .seuil--boite .seuil__garanties { order: 7; margin-bottom: 10px; } }

/* la boîte garnie (06/10) : les jetons des chiffres clés, le paquet de cartes à l'intérieur, l'inventaire en compartiments */
.jeton { position: absolute; left: 50%; top: 58%; z-index: 4; width: 104px; aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; text-align: center; opacity: 0;
  transform: translate(-50%, -50%) scale(.3); transition: transform 1s cubic-bezier(.3, 1.5, .5, 1), opacity .5s; transition-delay: calc(.8s + var(--k) * .12s);
  background: radial-gradient(circle at 35% 30%, #fff1c9, #d9b46a 55%, #8c6a2c); color: #2b1608;
  box-shadow: 0 0 0 4px #2b1608, 0 0 0 6px #d9b46a, inset 0 0 0 6px rgba(255, 255, 255, .25), inset 0 0 0 8px rgba(80, 50, 10, .35), 0 16px 26px rgba(0, 0, 0, .6); }
.jeton::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 3px dashed rgba(60, 30, 5, .35); }
.jeton b { font: 600 1.25rem/1 var(--v-serif); color: #2b1608; }
.jeton small { margin-top: 3px; font: 600 .56rem/1 var(--v-sans); letter-spacing: .16em; text-transform: uppercase; color: #5a3a14; }
html[data-aile="donjon"] .jeton { background: radial-gradient(circle at 35% 30%, #f3e8ff, #c9a6f0 55%, #6e4aa0); box-shadow: 0 0 0 4px #1f0d30, 0 0 0 6px #c9a6f0, inset 0 0 0 6px rgba(255, 255, 255, .25), 0 16px 26px rgba(0, 0, 0, .6); }
html[data-aile="donjon"] .jeton b, html[data-aile="donjon"] .jeton small { color: #24103a; }
.boite3d.ouverte .jeton { opacity: 1; transform: translate(calc(-50% + var(--x) * var(--ex, 1)), calc(-50% + var(--y) * var(--ey, 1))) scale(1) rotate(calc((var(--k) - 1.5) * 6deg)); }
.boite3d.ouverte .jeton { animation: flotte 4.6s ease-in-out 2.2s infinite alternate; }
.paquet3d { position: absolute; left: 50%; top: 52%; width: 34%; aspect-ratio: .68; translate: -50% -50%; }
.paquet3d i { position: absolute; inset: 0; border-radius: 8px; background: url("img/carte-dos.webp") center / cover; box-shadow: 0 6px 12px rgba(0, 0, 0, .55); }
.paquet3d i:nth-child(1) { transform: rotate(-14deg) translate(-26%, 4%); } .paquet3d i:nth-child(2) { transform: rotate(-5deg) translate(-8%, 1%); }
.paquet3d i:nth-child(3) { transform: rotate(6deg) translate(10%, 2%); } .paquet3d i:nth-child(4) { transform: rotate(16deg) translate(28%, 6%); background-image: url("img/carte-desir.webp"); }
@media (max-width: 999px) { .jeton { width: 76px; } .jeton b { font-size: .95rem; } .jeton small { font-size: .46rem; } }
@media (max-width: 600px) { .boite3d__scene { margin-top: 170px; } }
/* l'inventaire de la page du jeu complet : des compartiments de velours, de grands objets, de grands chiffres */
.page-tarifs .boite__inventaire { grid-template-columns: repeat(2, 1fr); gap: 14px; }
.page-tarifs .boite__item { grid-template-columns: 1fr; grid-template-rows: auto; justify-items: center; text-align: center; padding: 18px 10px 16px; border-radius: 10px;
  background: radial-gradient(ellipse at 50% 20%, color-mix(in srgb, var(--v-vin) 70%, transparent), rgba(0, 0, 0, .35) 80%); box-shadow: inset 0 4px 14px rgba(0, 0, 0, .7), inset 0 0 0 1px var(--v-or-fil); }
.page-tarifs .boite__item img { grid-row: auto; width: 96px; height: 96px; margin-bottom: 10px; animation: flotte 5s ease-in-out infinite alternate; animation-delay: calc(var(--k) * -.6s); }
.page-tarifs .boite__n b { font-size: 2.3rem; }
.page-tarifs .boite__l { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; margin-top: 4px; }
@media (min-width: 900px) { .page-tarifs .boite__inventaire { grid-template-columns: repeat(4, 1fr); } }

/* sur téléphone, les objets et les jetons restent dans l'écran */
@media (max-width: 600px) { .boite3d { --ex: .62; --ey: .72; } .boite3d__scene { width: 74vw; } .jeton { width: 70px; } .sortie { width: 58px; } }

/* LE PASS = UN BILLET D'ADMISSION UNIQUE (06/10) : « n° 1 sur 1 », le tampon « Un seul par compte » s'abat, les trente jours
   s'allument un à un et le dernier s'éteint : il s'arrête tout seul. */
.billet-unique { max-width: 800px; grid-template-columns: 1fr 240px; --talon: 240px; }
.billet-unique .billet-pass__corps small { color: #8c1838; }
.billet-unique .billet-pass__corps b { font-size: 2.2rem; }
.trente { margin-top: 16px; }
.trente__jours { display: grid; grid-template-columns: repeat(30, 1fr); gap: 3px; }
.trente__jours i { aspect-ratio: 1; border-radius: 3px; border: 1px solid rgba(110, 20, 49, .35); background: transparent; transition: background .25s, border-color .25s; transition-delay: calc(.6s + var(--j) * 55ms); }
.billet-unique.vue .trente__jours i { background: #c9a35a; border-color: #9a6b22; }
.billet-unique.vue .trente__jours i:last-child { background: #6e1431; border-color: #6e1431; }
.trente p { display: flex; justify-content: space-between; gap: 10px; margin: 8px 0 0; }
.trente em { font: italic 500 .8rem/1.2 var(--v-serif); color: #6b4a3a; }
.trente em:last-child { color: #6e1431; text-align: right; }
.billet-unique .billet-pass__talon { position: relative; align-content: center; }
.billet-unique .btn-or { white-space: nowrap; padding-left: 20px; padding-right: 20px; }
.billet-unique__no { font: 600 .58rem/1 var(--v-sans); letter-spacing: .2em; text-transform: uppercase; color: #9a6b22; }
.tampon { position: absolute; left: -50px; top: 16px; display: grid; place-items: center; width: 82px; height: 82px; border-radius: 50%; border: 3px double #8c1838; color: #8c1838;
  font: 700 .62rem/1.15 var(--v-sans); letter-spacing: .12em; text-transform: uppercase; text-align: center; mix-blend-mode: multiply; opacity: 0; transform: rotate(-16deg) scale(2.4); pointer-events: none; }
.billet-unique.vue .tampon { animation: tamponne .45s cubic-bezier(.5, 0, .7, 1.4) 2.6s forwards; }
@keyframes tamponne { 0% { opacity: 0; transform: rotate(-16deg) scale(2.4); } 70% { opacity: .9; transform: rotate(-16deg) scale(.92); } 100% { opacity: .85; transform: rotate(-16deg) scale(1); } }
.billet-unique.vue { animation: secousse .3s ease-out 3s; }
@keyframes secousse { 0%, 100% { translate: 0 0; } 30% { translate: 0 3px; } 60% { translate: 0 -1px; } }
@media (max-width: 600px) {
  .billet-unique { grid-template-columns: 1fr; }
  .billet-unique .billet-pass__corps b { font-size: 1.8rem; }
  .trente__jours { grid-template-columns: repeat(15, 1fr); }
  .tampon { width: 70px; height: 70px; font-size: .54rem; left: auto; right: 14px; bottom: auto; top: -36px; }
}
@media (prefers-reduced-motion: reduce) { .billet-unique .trente__jours i { transition: none; } .billet-unique.vue .tampon { animation: none; opacity: .85; transform: rotate(-16deg); } .billet-unique.vue { animation: none; } }

/* ================= INTIIMIX PRO : LA NUIT D'UNE CHAMBRE (06/10) ================= */
/* la carte de chevet : recto ce soir, verso demain ; elle se retourne d'un appui */
.chevet { display: grid; justify-items: center; gap: 12px; perspective: 1200px; }
.chevet__carte { position: relative; width: min(340px, 78vw); aspect-ratio: .68; padding: 0; border: 0; background: none; cursor: pointer; transform-style: preserve-3d;
  transform: rotate(-4deg); transition: transform .9s cubic-bezier(.3, 1.2, .4, 1); animation: flotte 6s ease-in-out infinite alternate; }
.chevet.retournee .chevet__carte { transform: rotate(3deg) rotateY(180deg); }
.chevet__face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 26px 22px; box-sizing: border-box;
  border-radius: 14px; backface-visibility: hidden; color: #2b1810; text-align: center;
  background: radial-gradient(circle at 30% 18%, #fffaf0, #f2e3c4 60%, #e6d0a4); box-shadow: 0 30px 70px rgba(0, 0, 0, .6), inset 0 0 0 7px #f6ecd8, inset 0 0 0 8px rgba(154, 107, 34, .55); }
.chevet__verso { transform: rotateY(180deg); background: radial-gradient(circle at 70% 20%, #4a0f22, #2a0612 70%); color: #f6ecd8; box-shadow: 0 30px 70px rgba(0, 0, 0, .6), inset 0 0 0 7px #3a0918, inset 0 0 0 8px var(--v-or); }
.chevet__face small { font: 600 .6rem/1 var(--v-sans); letter-spacing: .24em; text-transform: uppercase; color: #9a6b22; }
.chevet__verso small { color: var(--v-or-clair); }
.chevet__face b { font: italic 600 1.9rem/1.05 var(--v-serif); }
.chevet__filet { width: 60%; height: 1px; background: linear-gradient(90deg, transparent, #9a6b22, transparent); }
.chevet .qr { width: 52%; padding: 8px; border-radius: 6px; background: #f6ecd8; box-shadow: 0 0 0 1px rgba(154, 107, 34, .45); }
.chevet__dit { font: italic 400 .92rem/1.4 var(--v-serif); color: #4a3020; }
.chevet__verso .chevet__dit { color: #e9d6c0; }
.chevet__prix { font: 600 2.2rem/1 var(--v-serif); color: var(--v-or-clair); }
.chevet__prix s { display: block; margin-bottom: 6px; font-size: .9rem; color: #c8a4a4; }
.chevet__aide { margin: 0; font: italic 400 .92rem/1 var(--v-serif); color: var(--v-encre-3); }
.chevet--mini { perspective: none; }
.chevet--mini .chevet__carte { width: 210px; cursor: default; animation: none; transform: rotate(-3deg); }
.chevet--mini .chevet__face b { font-size: 1.25rem; }
.chevet--mini .chevet__face { gap: 7px; padding: 16px; }
@media (max-width: 999px) { .seuil--pro .chevet { order: 3; margin: 10px 0 24px; } .seuil--pro .bulle { order: 4; } .seuil--pro .seuil__actes { order: 5; } .seuil--pro .seuil__garanties { order: 6; margin-bottom: 10px; } }

/* la nuit : les heures le long d'un fil d'or */
.nuit { list-style: none; position: relative; max-width: 1060px; margin: 0 auto; padding: 0; display: grid; gap: clamp(46px, 7vw, 90px); }
.nuit::before { content: ""; position: absolute; left: 62px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(180deg, transparent, var(--v-or) 8%, var(--v-or) 92%, transparent); opacity: .55; }
.heure { position: relative; display: grid; grid-template-columns: 126px 1fr minmax(0, 1.1fr); gap: 26px; align-items: center; }
.heure__h { position: relative; z-index: 1; justify-self: center; display: grid; place-items: center; min-width: 100px; padding: 10px 12px; border-radius: 999px; border: 1px solid var(--v-or);
  background: #140a06; font: italic 600 1.05rem/1.1 var(--v-serif); color: var(--v-or-clair); text-align: center; box-shadow: 0 0 22px color-mix(in srgb, var(--v-or) 30%, transparent); }
.heure__corps h3 { margin: 0 0 12px; font: italic 600 1.55rem/1.15 var(--v-serif); color: var(--v-encre); }
.heure__vue { display: grid; place-items: center; }
.heure__vue .ecran { width: 100%; }
@media (max-width: 860px) {
  .nuit::before { left: 18px; }
  .heure { grid-template-columns: 1fr; gap: 14px; padding-left: 40px; }
  .heure__h { justify-self: start; margin-left: -40px; }
}
/* le lendemain : le carton de l'offre */
.lendemain { display: grid; justify-items: center; gap: 8px; width: min(330px, 100%); padding: 26px 22px; box-sizing: border-box; border-radius: 12px; text-align: center; transform: rotate(2deg);
  background: linear-gradient(160deg, #3a0918, #1c040b); border: 1px solid var(--v-or); box-shadow: 0 26px 60px rgba(0, 0, 0, .55), inset 0 0 0 5px rgba(0, 0, 0, .3); }
.lendemain small { font: 600 .58rem/1.3 var(--v-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--v-or-clair); }
.lendemain b { font: italic 600 1.5rem/1.1 var(--v-serif); color: var(--v-encre); }
.lendemain__prix { display: flex; align-items: baseline; gap: 12px; }
.lendemain__prix s { font: 400 1rem/1 var(--v-serif); color: #c8a4a4; }
.lendemain__prix em { font: 600 2.4rem/1 var(--v-serif); font-style: normal; color: var(--v-or-clair); }
.lendemain__plus { font: 500 .9rem/1.3 var(--v-sans); color: var(--v-encre-2); }
.lendemain__fin { margin-top: 4px; padding: 5px 12px; border-radius: 999px; border: 1px dashed var(--v-or); font: italic 500 .85rem/1 var(--v-serif); color: var(--v-or-clair); }
.releve--pro { width: min(420px, 100%); transform: rotate(-1.5deg); }
.releve--pro .releve__ligne { grid-template-columns: 46px 1fr auto; font-size: .82rem; }

/* le calcul : la coupe se remplit jusqu'au remboursement, puis déborde */
.calcul { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(20px, 4vw, 50px); align-items: center; }
.calcul__reglages { display: grid; gap: 22px; }
.calcul__reglages label { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: baseline; font: 500 .95rem/1.2 var(--v-sans); color: var(--v-encre-2); }
.calcul__reglages output { font: 600 1.5rem/1 var(--v-serif); color: var(--v-or-clair); }
.calcul__reglages input[type="range"] { grid-column: 1 / -1; width: 100%; accent-color: var(--v-or); }
.calcul__note { margin: 0; font: italic 400 .9rem/1.4 var(--v-serif); color: var(--v-encre-3); }
.coupe-pro { display: grid; justify-items: center; text-align: center; }
.coupe-pro__verre { position: relative; width: 170px; height: 120px; overflow: hidden; border-radius: 0 0 85px 85px / 0 0 110px 110px; border: 2px solid rgba(255, 240, 210, .55); border-top: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); box-shadow: inset 0 -6px 18px rgba(255, 255, 255, .06), 0 0 30px rgba(0, 0, 0, .4); }
.coupe-pro__vin { position: absolute; left: 0; right: 0; bottom: 0; height: var(--niveau, 60%); background: linear-gradient(180deg, #f3d488, #c9963e); transition: height .8s cubic-bezier(.3, 1.2, .4, 1); }
.coupe-pro.deborde .coupe-pro__vin { background: linear-gradient(180deg, #ffe7a8, #e0a94a); box-shadow: 0 -4px 18px rgba(255, 220, 140, .8); }
.coupe-pro__trait { position: absolute; left: 6%; right: 6%; top: 8%; height: 0; border-top: 1px dashed rgba(255, 255, 255, .5); }
.coupe-pro__bulles i { position: absolute; bottom: 4px; width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .75); opacity: 0; }
.coupe-pro__bulles i:nth-child(1) { left: 22%; animation: bulle 2.2s ease-in infinite .1s; } .coupe-pro__bulles i:nth-child(2) { left: 41%; animation: bulle 2.6s ease-in infinite .7s; }
.coupe-pro__bulles i:nth-child(3) { left: 57%; animation: bulle 2s ease-in infinite 1.2s; } .coupe-pro__bulles i:nth-child(4) { left: 70%; animation: bulle 2.8s ease-in infinite .4s; }
.coupe-pro__bulles i:nth-child(5) { left: 33%; animation: bulle 2.4s ease-in infinite 1.6s; }
@keyframes bulle { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: .9; } 100% { opacity: 0; transform: translateY(-100px); } }
.coupe-pro__pied { width: 6px; height: 64px; background: linear-gradient(90deg, rgba(255, 240, 210, .3), rgba(255, 240, 210, .7), rgba(255, 240, 210, .3)); }
.coupe-pro__pied::after { content: ""; display: block; width: 90px; height: 6px; margin: 64px 0 0 -42px; border-radius: 50%; background: rgba(255, 240, 210, .45); }
.coupe-pro__res { margin: 26px 0 4px; display: grid; gap: 4px; }
.coupe-pro__res b { font: 600 2.6rem/1 var(--v-serif); color: var(--v-or-clair); }
.coupe-pro__res span { font: italic 400 1rem/1.3 var(--v-serif); color: var(--v-encre-2); }
.coupe-pro__detail { margin: 6px 0 0; max-width: 300px; font: 400 .88rem/1.45 var(--v-sans); color: var(--v-encre-3); }
@media (max-width: 760px) { .calcul { grid-template-columns: 1fr; } }

/* le contrat de la nuit */
.contrat { position: relative; max-width: 640px; margin: 0 auto; padding: 34px clamp(20px, 5vw, 46px) 30px; border-radius: 6px; color: #2b1810; transform: rotate(-.8deg);
  background: radial-gradient(circle at 20% 10%, #fffaf0, #f0e0c0 70%, #e2cb9c); box-shadow: 0 34px 80px rgba(0, 0, 0, .6), inset 0 0 0 10px #f6ecd8, inset 0 0 0 11px rgba(154, 107, 34, .5); }
.contrat__tete { margin: 0 0 18px; text-align: center; font: 600 .66rem/1 var(--v-sans); letter-spacing: .3em; text-transform: uppercase; color: #8c1838; }
.contrat ol { margin: 0; padding-left: 1.4em; display: grid; gap: 12px; font: 400 1rem/1.5 var(--v-sans); color: #3a2416; }
.contrat ol li::marker { font: italic 600 1rem var(--v-serif); color: #9a6b22; }
.contrat b { font: italic 600 1.08rem/1 var(--v-serif); color: #6e1431; }
.contrat__sign { display: flex; justify-content: flex-end; align-items: baseline; gap: 10px; margin: 22px 0 0; font: 500 .8rem/1 var(--v-sans); color: #6b4a3a; }
.contrat__sign em { font: 400 2rem/1 'Great Vibes', var(--v-serif); color: #6e1431; }
.contrat__sceau { position: absolute; right: -16px; top: -22px; width: 78px; transform: rotate(14deg); filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35)); }
.contrat__sceau img { width: 100%; height: auto; }

/* la demande */
.demande { max-width: 960px; margin: 0 auto; display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(20px, 4vw, 46px); align-items: start; }
.demande__texte p { margin: 0 0 14px; font: 400 1.02rem/1.6 var(--v-sans); color: var(--v-encre-2); }
.demande__insta a { color: var(--v-or-clair); }
.pro2-form-card { padding: 26px; border-radius: 14px; border: 1px solid var(--v-or-fil); background: rgba(0, 0, 0, .35); }
.pro2-form { display: grid; gap: 14px; }
.pro2-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pro2-form-group { display: grid; gap: 6px; }
.pro2-form-group label { font: 500 .8rem/1 var(--v-sans); color: var(--v-encre-2); }
.pro2-form-group .req { color: var(--v-or-clair); }
.pro2-form-group input, .pro2-form-group select { width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--v-or-fil); background: rgba(0, 0, 0, .4); color: var(--v-encre); font: 400 .95rem/1.2 var(--v-sans); }
.pro2-form-group input:focus, .pro2-form-group select:focus { outline: 2px solid var(--v-or); outline-offset: 1px; }
.pro2-form-hp { position: absolute; left: -9999px; }
.pro2-form-submit { margin-top: 4px; padding: 14px; border: 0; border-radius: 999px; cursor: pointer; font: 600 .98rem/1 var(--v-sans); color: #1c0e05; background: linear-gradient(180deg, var(--v-or-clair), var(--v-or)); }
.pro2-form-error { display: none; margin-bottom: 12px; padding: 10px 12px; border-radius: 8px; background: rgba(140, 24, 56, .35); color: #f6d6dc; font: 400 .9rem/1.4 var(--v-sans); }
.pro2-form-error.visible { display: block; }
.pro2-form-success { display: none; text-align: center; }
.pro2-form-success.visible { display: block; }
.pro2-form-success h3 { font: italic 600 1.5rem/1.1 var(--v-serif); color: var(--v-or-clair); }
.pro2-form-success p { color: var(--v-encre-2); }
@media (max-width: 760px) { .demande { grid-template-columns: 1fr; } .pro2-form-row { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .chevet__carte { animation: none; transition: none; } .coupe-pro__bulles i { animation: none; } .coupe-pro__vin { transition: none; } }

/* la mention de la hausse, tant que la semaine offerte court (07/10/2026, scripts/vitrine_prix.py : repère <!--date-prix-->) */
.date-prix { display: block; margin-top: 4px; font: italic 400 .78rem/1.35 var(--v-serif); letter-spacing: 0; color: var(--v-encre-3); text-transform: none; }
.prix-tete { flex-wrap: wrap; } .prix-tete .date-prix { flex-basis: 100%; margin-top: -8px; }

/* =====================================================================================================================
   LE HAUT DE PAGE CLAIR DE L'ACCUEIL (07/10/2026, fondateur : « le hero fait un peu confus, alléger ; le visiteur ne
   connaît pas le jeu : des screenshots, designés »). À gauche : ce que c'est, une phrase de la Roue, trois repères, deux
   boutons. À droite : le vrai jeu, le plateau dans un écran de salon et la carte d'un gage posée devant.
   ===================================================================================================================== */
.seuil--accueil .seuil__in { display: grid; grid-template-columns: 1fr; gap: 34px; align-items: center; max-width: 1240px; margin: 0 auto; width: 100%; }
.seuil--accueil .seuil__texte { display: block; }
.seuil--accueil h1 { font-size: clamp(2.4rem, 5.2vw, 4.4rem); max-width: 13ch; }
.seuil--accueil .bulle { max-width: 520px; margin: 0 0 22px; }
.seuil__reperes { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 10px; }
.seuil__reperes li { display: flex; align-items: center; gap: 12px; font: 400 .98rem/1.4 var(--v-sans); color: var(--v-encre-2); }
.seuil__reperes svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--v-or); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.vitrine-ecrans { position: relative; padding: 0 0 18%; }
.tele { position: relative; margin: 0; }
.tele__ecran { position: relative; border-radius: 12px; padding: 10px; overflow: hidden;
  background: linear-gradient(145deg, #4a3518, #1a1009 40%, #2b1d0d 60%, #6b4c22);
  box-shadow: 0 0 0 1px rgba(243, 219, 166, .35), 0 30px 70px rgba(0, 0, 0, .65), 0 0 120px color-mix(in srgb, var(--v-vin) 45%, transparent); }
.tele__ecran img { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 850; object-fit: cover; border-radius: 5px; }
.tele__ecran::after { content: ""; position: absolute; inset: 10px; border-radius: 5px; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, 0) 38%); }
.tele__pied { display: block; width: 26%; height: 14px; margin: 0 auto; border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, #3a2a14, #120a05); box-shadow: 0 14px 30px rgba(0, 0, 0, .55); }
.carte-ecran { position: absolute; left: -2%; bottom: 0; width: 58%; margin: 0; border-radius: 12px; overflow: hidden; rotate: -3deg;
  border: 1px solid rgba(243, 219, 166, .45); box-shadow: 0 24px 60px rgba(0, 0, 0, .7), 0 0 0 6px rgba(18, 7, 9, .85);
  animation: carte-flotte 7s ease-in-out infinite; }
.carte-ecran img { display: block; width: 100%; height: auto; }
@keyframes carte-flotte { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@media (prefers-reduced-motion: reduce) { .carte-ecran { animation: none; } }

.rubrique--tourner .tourner { display: flex; justify-content: center; }
.rubrique--tourner .ailes { display: flex; justify-content: center; margin: 18px auto 0; }
.rubrique--tourner .roue-bloc { width: min(560px, 100%); }

/* téléphone : le texte, puis les écrans (l'ordre « Roue avant les boutons » de l'ancien haut de page ne vaut plus ici) */
@media (max-width: 999px) {
  .seuil--accueil .seuil__in { display: grid; }
  .seuil--accueil .seuil__texte > * { order: initial; }
  .seuil--accueil .vitrine-ecrans { margin: 4px 0 0; }
}
@media (min-width: 1000px) {
  .seuil--accueil .seuil__in { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; }
}