/* Maquette « immersif, pas ornemental », v2 (22/10/2026). Zéro ornement : pas de filet, pas de chiffre romain, pas de fleuron,
   pas de pastille. L'or pour un bouton et un trait. Playfair romain pour les titres, Inter pour le reste. Le mouvement vient
   du défilement et de la Roue. */
:root { --or: #dcb76c; --or-clair: #f3dba6; --or-fonce: #8c6a2c; --vin: #6e1431; --noir: #0b0608; --fond: #0f090c; --fond-2: #160b10;
  --encre: #f4ebdc; --encre-2: rgba(244, 235, 220, .72); --encre-3: rgba(244, 235, 220, .46); --carte-2: #2a1019; --or-fil: rgba(220, 183, 108, .38);
  --v-vin: #6e1431; --v-noir: #120709; --v-or: #dcb76c; --v-or-clair: #f3dba6; --v-or-fonce: #8c6a2c; --v-carte-2: #2a1019; --v-sans: 'Inter', -apple-system, sans-serif;
  --serif: 'Playfair Display', Georgia, serif; --sans: 'Inter', -apple-system, sans-serif; --ease: cubic-bezier(.16, 1, .3, 1); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--noir); color: var(--encre); font: 400 1rem/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; letter-spacing: -.01em; }
.c { width: min(100% - 48px, 1400px); margin: 0 auto; }
@media (max-width: 720px) { .c { width: calc(100% - 32px); } }

/* ---------- le seuil : la pièce ---------- */
.seuil { position: relative; min-height: 100svh; display: grid; align-items: end; overflow: hidden; isolation: isolate; }
.scene { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.scene__cadre { position: absolute; left: 66%; top: 50%; width: max(100%, calc(100svh * 1.75)); aspect-ratio: 1344 / 768; transform: translate(-50%, -50%); will-change: transform; }
.scene__cadre img { width: 100%; height: 100%; object-fit: cover; }
.scene__roue { position: absolute; left: 50.07%; top: 39.84%; width: 25.3%; aspect-ratio: 1; transform: translate(-50%, -50%); cursor: pointer; }
.scene__roue::before { content: ""; position: absolute; inset: -18%; border-radius: 50%; background: radial-gradient(circle, rgba(220, 183, 108, .28), rgba(110, 20, 49, .25) 40%, transparent 68%); animation: halo 5s ease-in-out infinite; z-index: -1; }
.scene__roue svg { width: 100%; height: 100%; display: block; overflow: visible; }
.roue__disque { transform-origin: 300px 300px; transform-box: view-box; animation: entree-roue 2.6s var(--ease) both, tourne 90s linear 2.6s infinite; }
.roue__disque.lance { animation: none; transition: transform 5.4s cubic-bezier(.11, .62, .1, 1); }
.roue__pointeur { transform-origin: 300px 18px; }
.seg-a { fill: var(--v-vin); } .seg-b { fill: var(--v-noir); }
.nom-case { fill: var(--v-or-clair); font: 600 13px var(--v-sans); letter-spacing: .18em; text-transform: uppercase; }
.or-icone { stroke: var(--v-or-clair); } .or-trait { stroke: var(--v-or); }
@keyframes tourne { to { transform: rotate(360deg); } }
@keyframes entree-roue { from { transform: rotate(-400deg); } to { transform: rotate(0deg); } }
@keyframes halo { 50% { opacity: .55; transform: scale(1.06); } }
.scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 6, 8, .35), transparent 30%, transparent 55%, rgba(11, 6, 8, .92) 100%), linear-gradient(90deg, rgba(11, 6, 8, .7), transparent 55%); }
.seuil__texte { position: relative; padding: 0 0 clamp(36px, 6vh, 72px); max-width: 700px; margin: 0 auto 0 max(24px, calc(50% - 700px)); }
.sur { font: 500 .9rem/1.4 var(--sans); color: var(--or); margin: 0 0 18px; }
.seuil h1 { font-size: clamp(3rem, 5.8vw, 7.4rem); line-height: .96; color: #fff6e8; }
.seuil h1 em { font-style: italic; color: var(--or-clair); }
.ligne { display: block; overflow: hidden; padding: .12em 0 .22em; margin: -.12em 0 -.22em; }   /* le masque laisse passer les accents et les jambages (y, p, q, g) : sans marge, le « y » de « Payé » était coupé */
.ligne > span { display: block; transform: translateY(140%); transition: transform 1.1s var(--ease); }
.vu .ligne > span { transform: none; }
.ligne:nth-child(2) > span { transition-delay: .1s; } .ligne:nth-child(3) > span { transition-delay: .2s; }
.seuil p { max-width: 520px; font-size: clamp(1rem, 1.25vw, 1.15rem); color: var(--encre-2); margin: 22px 0 28px; }
.actes { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.lien { font: 500 .95rem/1 var(--sans); color: var(--encre); text-decoration: none; border-bottom: 1px solid rgba(244, 235, 220, .4); padding-bottom: 4px; transition: border-color .3s; }
.lien:hover { border-color: var(--or); }
.seuil__ind { position: absolute; right: 32px; bottom: 32px; font: 500 .76rem/1 var(--sans); color: var(--encre-3); display: flex; align-items: center; gap: 10px; }
.seuil__ind::after { content: ""; width: 1px; height: 38px; background: linear-gradient(180deg, var(--encre-3), transparent); animation: descend 2.4s ease-in-out infinite; }
@keyframes descend { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (max-width: 720px) { .seuil__ind { display: none; } .seuil h1 { font-size: clamp(2.6rem, 13vw, 3.6rem); } .seuil__texte { padding-bottom: 36px; padding-top: 56svh; margin-left: 16px; margin-right: 16px; } .scene__cadre { width: max(100%, calc(100svh * 1.3)); left: 50%; top: 30%; } .scene::after { background: linear-gradient(180deg, rgba(11, 6, 8, .4), transparent 25%, rgba(11, 6, 8, .2) 45%, rgba(11, 6, 8, .96) 100%); } }

/* ---------- les écrans ---------- */
.ecran { padding: clamp(80px, 12vh, 160px) 0; position: relative; }
.ecran h2 { font-size: clamp(2.2rem, 4.4vw, 4.6rem); line-height: 1.04; color: #fff6e8; max-width: 14ch; }
.ecran h2 em { font-style: italic; color: var(--or-clair); }
.ecran p { font-size: clamp(1rem, 1.2vw, 1.15rem); color: var(--encre-2); max-width: 540px; margin: 22px 0 0; }
.tete { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: end; margin-bottom: clamp(36px, 5vh, 64px); }
.tete p { margin: 0; }
@media (max-width: 900px) { .tete { grid-template-columns: 1fr; gap: 18px; } }

/* un écran du jeu, mis en scène : cadre fin, reflet, ombre portée, léger relief au défilement */
.ecran-cadre { position: relative; border-radius: 10px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgba(244, 235, 220, .12), 0 50px 120px rgba(0, 0, 0, .7), 0 0 80px rgba(110, 20, 49, .25); transform: perspective(1400px) rotateX(6deg) translateY(30px); transition: transform 1.4s var(--ease); }
.ecran-cadre.vu { transform: perspective(1400px) rotateX(0) translateY(0); }
.ecran-cadre::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255, 255, 255, .07), transparent 35%, transparent 70%, rgba(255, 255, 255, .03)); pointer-events: none; }
.ecran-cadre img { width: 100%; height: auto; }

/* la soirée, en quatre temps : le texte défile, l'écran reste et change */
.temps__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: start; }
.temps__etape { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; opacity: .25; transition: opacity .5s; }
.temps__etape.actif { opacity: 1; }
.temps__etape .n { font: 500 .85rem/1 var(--sans); color: var(--or); margin-bottom: 16px; }
.temps__etape h3 { font-size: clamp(1.8rem, 3vw, 3rem); line-height: 1.08; color: #fff6e8; }
.temps__etape p { font-size: 1.05rem; color: var(--encre-2); max-width: 440px; margin: 16px 0 0; }
.temps__etape .mini { display: none; margin-top: 18px; border-radius: 8px; overflow: hidden; box-shadow: 0 20px 50px rgba(0, 0, 0, .6); }
.temps__colle { position: sticky; top: 12vh; }
.temps__ecrans { position: relative; aspect-ratio: 1280 / 850; border-radius: 10px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgba(244, 235, 220, .12), 0 50px 120px rgba(0, 0, 0, .7), 0 0 80px rgba(110, 20, 49, .25); }
.temps__ecrans img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .7s ease, transform 1.4s var(--ease); }
.temps__ecrans img.vue { opacity: 1; transform: none; }
@media (max-width: 900px) { .temps__grid { grid-template-columns: 1fr; } .temps__colle { display: none; } .temps__etape { min-height: 0; opacity: 1; padding: 20px 0; } .temps__etape .mini { display: block; } }

/* le défilé des écrans */
.defile { padding: clamp(60px, 8vh, 110px) 0; overflow: hidden; }
.defile__rang { display: flex; gap: 22px; width: max-content; animation: file 70s linear infinite; padding: 24px 0; }
.defile__rang--retour { animation-direction: reverse; animation-duration: 84s; }
.defile:hover .defile__rang { animation-play-state: paused; }
.defile__rang figure { margin: 0; flex: 0 0 auto; width: clamp(260px, 26vw, 420px); border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 1px rgba(244, 235, 220, .1), 0 24px 60px rgba(0, 0, 0, .6); transform: rotate(-2.5deg); transition: transform .6s var(--ease), box-shadow .6s; }
.defile__rang--retour figure { transform: rotate(2deg); }
.defile__rang figure:hover { transform: rotate(0) scale(1.04); box-shadow: 0 0 0 1px rgba(220, 183, 108, .5), 0 30px 70px rgba(0, 0, 0, .7); z-index: 1; }
.defile__rang img { width: 100%; height: auto; }
@keyframes file { to { transform: translateX(-50%); } }
.defile__t { text-align: center; font: 500 .9rem/1.4 var(--sans); color: var(--encre-3); margin: 0 0 10px; }

/* en chiffres */
.chiffres { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.chiffres__liste { display: grid; gap: 26px; }
.chiffre b { display: block; font: 400 clamp(3.6rem, 8vw, 8rem)/1 var(--serif); color: #fff6e8; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.chiffre span { display: block; font: 500 .95rem/1.4 var(--sans); color: var(--encre-2); margin-top: 6px; }
.chiffres__img { position: relative; aspect-ratio: 1; display: grid; place-items: center; }
.chiffres__img img { width: 88%; height: auto; filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .7)); animation: flotte 7s ease-in-out infinite; }
.chiffres__img::before { content: ""; position: absolute; inset: 10%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 140, 40, .26), transparent 65%); animation: halo 5s ease-in-out infinite; }
@keyframes flotte { 50% { transform: translateY(-14px); } }
@media (max-width: 900px) { .chiffres { grid-template-columns: 1fr; } .chiffres__img { order: -1; max-width: 380px; margin: 0 auto; } }

/* deux pièces */
.pieces { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; perspective: 1400px; overflow: hidden; padding: 4px; margin: -4px; }
.piece { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 8px; text-decoration: none; color: #fff6e8; transform-style: preserve-3d; transition: transform .6s var(--ease); }
.piece img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.6s ease, filter .6s; filter: brightness(.72); }
.piece:hover img { transform: scale(1.1); filter: brightness(1); }
.piece::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(11, 6, 8, .88)); }
.piece__t { position: absolute; left: 28px; right: 28px; bottom: 26px; z-index: 1; }
.piece__t b { display: block; font: 400 clamp(1.8rem, 3vw, 3rem)/1.05 var(--serif); }
.piece__t span { display: block; margin-top: 8px; font: 400 .95rem/1.5 var(--sans); color: var(--encre-2); }
.piece.rv { transform: translateX(-40px); } .piece.rv-2 { transform: translateX(40px); } .piece.rv.vu, .piece.rv-2.vu { transform: none; }
@media (max-width: 720px) { .pieces { grid-template-columns: 1fr; } }

/* la kinklist */
.kink { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.kink__img { aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; clip-path: inset(0 100% 0 0); transition: clip-path 1.3s var(--ease); box-shadow: 0 40px 100px rgba(0, 0, 0, .6); }
.kink__img.vu { clip-path: inset(0 0 0 0); }
.kink__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 2.2s var(--ease); }
.kink__img.vu img { transform: none; }
@media (max-width: 900px) { .kink { grid-template-columns: 1fr; gap: 28px; } }


/* ---------- le mouvement ---------- */
.rv { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform 1.1s var(--ease); }
.rv.vu { opacity: 1; transform: none; }
.rv-2 { transition-delay: .12s; } .rv-3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .rv, .ecran-cadre, .kink__img, .piece { opacity: 1; transform: none; transition: none; clip-path: none; } .roue__disque, .seuil__ind::after, .defile__rang, .chiffres__img img, .scene__roue::before, .prix::before, .chiffres__img::before, .vb-menu__filigrane svg { animation: none; } .scene__cadre { transform: translate(-50%, -50%) !important; } .ligne > span { transform: none; } }

/* ce qu'il y a dedans : tous les chiffres, sur la commode du jeu */
.nombres { position: relative; overflow: hidden; isolation: isolate; }
.nombres__fond { position: absolute; inset: 0; z-index: -1; }
.nombres__fond img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; filter: brightness(.3) saturate(.85) blur(6px); transform: scale(1.04); }
.nombres__fond::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--noir), rgba(11, 6, 8, .5) 30%, rgba(11, 6, 8, .5) 70%, var(--noir)); }
.nombres h2 { margin-bottom: clamp(36px, 5vh, 64px); }
.nombres__grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 32px; }
.nombre { padding-left: 18px; border-left: 1px solid rgba(220, 183, 108, .45); transition-delay: calc(var(--k) * .08s); }
.nombre b { display: block; font: 400 clamp(3rem, 5.6vw, 5.6rem)/1 var(--serif); color: #fff6e8; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.nombre span { display: block; font: 500 1.05rem/1.3 var(--sans); color: var(--encre); margin-top: 10px; }
.nombre small { display: block; font: 400 .9rem/1.4 var(--sans); color: var(--encre-2); margin-top: 3px; }
@media (min-width: 1100px) { .nombres__grille { grid-template-columns: repeat(6, 1fr); gap: 28px 20px; } .nombre b { font-size: clamp(2.6rem, 3.9vw, 4.4rem); } }
@media (max-width: 720px) { .nombres__grille { grid-template-columns: 1fr 1fr; gap: 28px 18px; } .nombre b { font-size: 2.6rem; } .nombre span { font-size: .95rem; } .nombre small { font-size: .82rem; } }

/* tous les couples, tous les rôles : les mots défilent en grand */
.tous { padding-bottom: 0; }
.tous .tete { margin-bottom: clamp(20px, 3vh, 36px); }
.tous__bande { overflow: hidden; padding: 10px 0 clamp(60px, 8vh, 110px); -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.tous__file { display: flex; gap: 0; width: max-content; animation: file 60s linear infinite; }
.tous__file span { font: 400 clamp(2.6rem, 6vw, 6rem)/1.1 var(--serif); color: var(--encre-3); padding: 0 .35em; white-space: nowrap; }
.tous__file span:nth-child(4n + 1) { color: #fff6e8; } .tous__file span:nth-child(4n + 3) { color: var(--or-clair); font-style: italic; }
.tous__file span::after { content: "·"; color: var(--or); margin-left: .7em; }
.tous__bande:hover .tous__file { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .tous__file { animation: none; } }

/* deux pièces, deux voix : les deux photos de la maison, la moitié survolée s'ouvre et parle */
.duo .tete { margin-bottom: clamp(28px, 4vh, 48px); }
.duo__moities { display: flex; gap: 6px; height: clamp(520px, 78vh, 800px); }
.moitie { position: relative; flex: 1; overflow: hidden; display: block; text-decoration: none; color: #fff6e8; transition: flex 1.1s var(--ease), opacity .9s ease, transform 1.1s var(--ease); }
.moitie img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); filter: brightness(.6) saturate(.9); transition: transform 2s var(--ease), filter .8s; }
.moitie--b img { object-position: 50% 42%; } .moitie--d img { object-position: 50% 50%; }
.moitie::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 6, 8, .15), transparent 35%, rgba(11, 6, 8, .92) 100%); }
.duo__moities:hover .moitie { flex: .72; }
.duo__moities .moitie:hover { flex: 1.7; }
.moitie:hover img { transform: scale(1); filter: brightness(.95) saturate(1); }
.moitie__t { position: absolute; left: clamp(22px, 3vw, 44px); right: clamp(22px, 3vw, 44px); bottom: clamp(24px, 4vh, 44px); z-index: 1; display: grid; gap: 10px; max-width: 560px; }
.moitie__voix { font: 500 .88rem/1 var(--sans); color: var(--or); }
.moitie__t b { font: 400 clamp(2rem, 3.6vw, 3.6rem)/1 var(--serif); }
.moitie__t q { quotes: "« " " »"; font: italic 400 clamp(1.05rem, 1.5vw, 1.4rem)/1.45 var(--serif); color: var(--encre); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .9s var(--ease), opacity .6s ease .15s; }
.moitie:hover q { max-height: 8em; opacity: 1; }
.moitie__t small { font: 400 .82rem/1.4 var(--sans); color: var(--encre-3); opacity: 0; transition: opacity .6s ease .3s; }
.moitie:hover small { opacity: 1; }
.moitie.rv { transform: translateY(28px); } .moitie.rv.vu { transform: none; }
@media (hover: none) { .moitie__t q, .moitie__t small { max-height: none; opacity: 1; } .moitie img { filter: brightness(.8); } }
@media (max-width: 900px) { .duo__moities { flex-direction: column; height: auto; } .moitie--b img { object-position: 50% 6%; } .moitie { aspect-ratio: 4 / 3.4; flex: none !important; } .moitie__t q, .moitie__t small { max-height: none; opacity: 1; } .moitie img { filter: brightness(.75); } }

/* le tunnel, écran par écran : un visionneur d'un écran de haut, la frise dessous, Boudoir ou Donjon */
.tunnel__viseur { display: grid; grid-template-columns: minmax(260px, .55fr) 1.45fr; gap: 40px; align-items: center; }
.tunnel__texte { display: grid; gap: 12px; align-content: center; }
.tunnel__texte .n { font: 500 .85rem/1 var(--sans); color: var(--or); }
.tunnel__texte h3 { font-size: clamp(1.8rem, 2.8vw, 2.8rem); line-height: 1.06; color: #fff6e8; }
.tunnel__texte p { font-size: 1.02rem; color: var(--encre-2); margin: 0; max-width: 380px; min-height: 4.8em; }
.tunnel__aile { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(244, 235, 220, .06); width: max-content; margin-bottom: 10px; }
.tunnel__aile button { border: 0; cursor: pointer; padding: 8px 16px; border-radius: 999px; background: none; color: var(--encre-2); font: 500 .84rem/1 var(--sans); transition: background .3s, color .3s; }
.tunnel__aile button.actif { background: linear-gradient(180deg, var(--or-clair), var(--or)); color: #1a0e05; }
.tunnel__nav { display: flex; gap: 10px; margin-top: 6px; }
.tunnel__nav button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(244, 235, 220, .3); background: none; color: var(--encre); font-size: 1.1rem; cursor: pointer; transition: border-color .3s, background .3s; }
.tunnel__nav button:hover { border-color: var(--or); background: rgba(220, 183, 108, .08); }
.tunnel__ecran { position: relative; aspect-ratio: 1280 / 850; border-radius: 10px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgba(244, 235, 220, .12), 0 50px 120px rgba(0, 0, 0, .7), 0 0 80px rgba(110, 20, 49, .25); }
.tunnel__ecran img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.03); transition: opacity .6s ease, transform 1.2s var(--ease); }
.tunnel__ecran img.vue { opacity: 1; transform: none; }
.tunnel__etapes { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(11, 1fr); gap: 8px; }
.tunnel__etapes button { width: 100%; border: 0; background: none; cursor: pointer; text-align: left; padding: 12px 0 0; color: var(--encre-3); display: grid; gap: 6px; position: relative; transition: color .3s; }
.tunnel__etapes button i { display: block; height: 2px; background: rgba(244, 235, 220, .14); border-radius: 2px; overflow: hidden; position: relative; }
.tunnel__etapes button i::after { content: ""; position: absolute; inset: 0; background: var(--or); transform: scaleX(0); transform-origin: left; }
.tunnel__etapes li.actif button { color: var(--encre); }
.tunnel__etapes li.actif button i::after { animation: avance var(--duree, 4.5s) linear forwards; }
.tunnel__etapes li.vu button i::after { transform: scaleX(1); opacity: .45; }
.tunnel.pause .tunnel__etapes li.actif button i::after { animation-play-state: paused; }
.tunnel__etapes button span { font: 500 .72rem/1 var(--sans); color: var(--or); }
.tunnel__etapes button b { font: 400 .9rem/1.2 var(--serif); }
.tunnel__etapes button:hover { color: var(--encre); }
@keyframes avance { to { transform: scaleX(1); } }
@media (max-width: 1100px) { .tunnel__etapes button b { font-size: .8rem; } }
@media (max-width: 900px) { .tunnel__viseur { grid-template-columns: 1fr; gap: 18px; } .tunnel__ecran { order: -1; } .tunnel__texte p { min-height: 0; } .tunnel__etapes { display: flex; overflow-x: auto; gap: 14px; padding-bottom: 6px; scrollbar-width: none; } .tunnel__etapes li { flex: 0 0 110px; } }
@media (prefers-reduced-motion: reduce) { .tunnel__etapes li.actif button i::after { animation: none; transform: scaleX(1); } }


/* ---------- le prix : la scène de fin, la table du salon, la Roue qui attend ---------- */
.prix { text-align: center; position: relative; overflow: hidden; isolation: isolate; padding: clamp(110px, 18vh, 200px) 0; }
.prix__scene { position: absolute; inset: 0; z-index: -1; }
.prix__scene img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; filter: brightness(.45) saturate(.95); transform: scale(1.04); }
.prix__scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--noir), rgba(11, 6, 8, .55) 25%, rgba(11, 6, 8, .55) 75%, var(--noir)); }
.prix .sur { color: var(--or-clair); }
.prix h2 { max-width: none; margin: 0 auto; position: relative; text-shadow: 0 10px 40px rgba(0, 0, 0, .7); }
.prix p { margin: 22px auto 0; position: relative; }
.prix .actes { justify-content: center; margin-top: 36px; position: relative; }
.prix small { display: block; margin-top: 18px; font: 400 .88rem/1.5 var(--sans); color: var(--encre-3); position: relative; }


/* ---------- le sort : la Roue s'arrête, la carte du gage se retourne sous elle (le tirage d'exemple de l'ancien accueil) ---------- */
.sort { position: absolute; right: clamp(24px, 5vw, 80px); bottom: clamp(70px, 10vh, 110px); z-index: 5; width: min(440px, 46vw); padding: 22px 24px 20px; border-radius: 14px;
  background: linear-gradient(180deg, #2a1019, #1d0c14); border: 1px solid rgba(220, 183, 108, .38); box-shadow: 0 30px 70px rgba(0, 0, 0, .65), inset 0 0 0 4px rgba(0, 0, 0, .25);
  opacity: 0; pointer-events: none; transform-origin: 50% 0; }
.sort.ouverte { opacity: 1; pointer-events: auto; animation: sort-retourne .75s cubic-bezier(.3, 1.3, .5, 1); }
@keyframes sort-retourne { from { opacity: 0; transform: perspective(900px) rotateX(-70deg); } }
.sort__fermer { position: absolute; right: 10px; top: 8px; width: 32px; height: 32px; border: 0; background: none; color: var(--encre-3); font-size: 1.3rem; cursor: pointer; }
.sort__fermer:hover { color: var(--encre); }
.sort__tete { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 28px 10px 0; }
.sort__case { font: 500 .7rem/1 var(--serif); letter-spacing: .22em; text-transform: uppercase; color: var(--or); }
.sort__qui { font: italic 400 .95rem/1 var(--serif); color: var(--encre-3); }
.sort__texte { font: 500 clamp(1.05rem, 1.5vw, 1.25rem)/1.42 var(--serif); margin: 0 0 10px; color: var(--encre); }
.sort__voix { font: italic 400 .95rem/1.45 'Lora', Georgia, serif; color: var(--encre-2); margin: 0 0 16px; }
.sort__voix:empty { display: none; }
.sort__pied { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.sort__pied .lien { font-size: .88rem; }
.roue__disque.fixe { animation: none; }
.roue__pointeur.tic { animation: tic .14s ease-out; }
@keyframes tic { 50% { transform: rotate(-9deg); } }
@media (max-width: 900px) { .sort { position: fixed; left: 14px; right: 14px; bottom: 14px; width: auto; padding: 18px 18px 16px; z-index: 60; } .sort__texte { font-size: 1.05rem; } }
@media (prefers-reduced-motion: reduce) { .sort.ouverte { animation: none; } .roue__pointeur.tic { animation: none; } }

/* ---------- la FAQ : six questions, typographiques, deux colonnes (le bloc SEO de l'ancien accueil, gardé court) ---------- */
.faq .tete { align-items: start; }
.faq__grille { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 56px; }
.faq__q { transition-delay: calc(var(--k) * .06s); }
.faq__q h3 { font-size: clamp(1.2rem, 1.6vw, 1.45rem); line-height: 1.25; color: #fff6e8; }
.faq__q p { font-size: .98rem; margin: 10px 0 0; max-width: none; }
@media (max-width: 800px) { .faq__grille { grid-template-columns: 1fr; gap: 26px; } }

/* la Roue se laisse appuyer : le voile de la scène et le bloc de texte laissent passer la main, seuls les liens la retiennent */
.scene::after { pointer-events: none; }
.scene { z-index: 0; }
.seuil__texte { pointer-events: none; z-index: 2; }
.seuil__texte a { pointer-events: auto; }
.scene__roue { pointer-events: auto; }

/* « À la une » (03/11/2026) : un panneau posé dans la pièce, en bas à droite de la scène, sous la Roue ; le sort du gage prend sa place quand il s'ouvre */
.une { position: absolute; right: clamp(24px, 2.4vw, 48px); bottom: clamp(24px, 4vh, 48px); z-index: 4; width: clamp(400px, 30vw, 500px); opacity: 0; transform: translateY(18px); transition: opacity .9s ease, transform 1s var(--ease) .1s; }
.une.est-la { opacity: 1; transform: none; }
.une[hidden] { display: none; }
.sort.ouverte ~ .une { opacity: 0; pointer-events: none; }
.une__lien { display: grid; grid-template-columns: clamp(124px, 9.5vw, 156px) 1fr; gap: 16px; padding: 10px; border-radius: 14px; text-decoration: none; color: var(--encre);
  background: linear-gradient(180deg, rgba(36, 11, 16, .82), rgba(15, 7, 10, .9)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(220, 183, 108, .5), inset 0 0 0 5px rgba(15, 7, 10, .9), inset 0 0 0 6px rgba(220, 183, 108, .18), 0 24px 60px rgba(0, 0, 0, .55); transition: box-shadow .35s, transform .35s; }
.une__lien:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(220, 183, 108, .85), inset 0 0 0 5px rgba(15, 7, 10, .9), inset 0 0 0 6px rgba(220, 183, 108, .3), 0 28px 70px rgba(0, 0, 0, .6); }
.une__cadre { display: block; height: 100%; min-height: 124px; overflow: hidden; border-radius: 8px; box-shadow: 0 0 0 1px rgba(220, 183, 108, .55); }
.une__photo { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.une__lien:hover .une__photo { transform: scale(1.04); }
.une__corps { display: block; min-width: 0; padding: 6px 8px 4px 0; }
.une__tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.une__sur { display: inline-flex; align-items: center; gap: 8px; font: 600 .68rem/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--or); }
.une__sur::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--or-clair); animation: une-pouls 2.4s ease-out infinite; }
@keyframes une-pouls { 0% { box-shadow: 0 0 0 0 rgba(243, 219, 166, .55); } 70%, 100% { box-shadow: 0 0 0 8px rgba(243, 219, 166, 0); } }
.une__quand { font: italic 400 1.05rem/1 var(--serif); color: var(--or); white-space: nowrap; }
.une__titre { display: block; margin-bottom: 8px; font: 500 1.35rem/1.2 var(--serif); color: #fff6e8; }
.une__texte { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 400 .9rem/1.55 var(--sans); color: var(--encre-2); }
.une__pied { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 14px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(220, 183, 108, .2); font: 400 .8rem/1.3 var(--sans); color: var(--encre-3); }
.une__suite { display: inline-flex; align-items: center; gap: 6px; font: italic 500 .98rem/1 var(--serif); color: var(--or-clair); white-space: nowrap; }
.une__suite svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s; }
.une__lien:hover .une__suite svg { transform: translateX(3px); }
.seuil:has(.une.est-la) .seuil__ind { right: calc(clamp(24px, 2.4vw, 48px) + clamp(400px, 30vw, 500px) + 28px); }
@media (max-width: 1100px) and (min-width: 721px) { .une { width: 380px; } .une__texte { display: none; } .seuil:has(.une.est-la) .seuil__ind { display: none; } }
/* au téléphone : une bande sous la Roue, au-dessus du titre */
@media (max-width: 720px) {
  .une { left: 16px; right: 16px; width: auto; top: calc(56svh - 112px); bottom: auto; }
  .une__lien { grid-template-columns: 84px 1fr; gap: 12px; align-items: center; padding: 8px; }
  .une__cadre { aspect-ratio: 1; height: auto; min-height: 0; }
  .une__corps { padding: 2px 4px 2px 0; }
  .une__tete { margin-bottom: 4px; }
  .une__quand { font-size: .95rem; }
  .une__titre { margin: 0; font-size: 1.1rem; }
  .une__texte, .une__pied { display: none; }
  .seuil:has(.une) .seuil__texte { padding-top: calc(56svh + 20px); }
}
@media (prefers-reduced-motion: reduce) { .une, .une__photo { transition: none; } .une__sur::before { animation: none; } }