/* Version 6 « Machine à sous futuriste » (lot SITE-3, 2026-10-28) : l'essai 5 choisi par Mathias, refait en style futuriste
   façon Tron. Fond presque noir bleuté, lignes de lumière émeraude (le vert du logo) et cyan, touches d'or (l'étoile du logo),
   panneaux de verre aux coins coupés, étiquettes façon écran de contrôle. Polices OFL : Orbitron (titres), Exo 2 (texte),
   JetBrains Mono (étiquettes, chiffres). Le logo garde sa police (Fredoka). */

@font-face { font-family: "Orbitron"; font-weight: 500; font-display: swap; src: url("../fonts/orbitron-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Orbitron"; font-weight: 700; font-display: swap; src: url("../fonts/orbitron-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Orbitron"; font-weight: 900; font-display: swap; src: url("../fonts/orbitron-latin-900-normal.woff2") format("woff2"); }
@font-face { font-family: "Exo 2"; font-weight: 400; font-display: swap; src: url("../fonts/exo-2-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Exo 2"; font-weight: 500; font-display: swap; src: url("../fonts/exo-2-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Exo 2"; font-weight: 600; font-display: swap; src: url("../fonts/exo-2-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url("../fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-display: swap; src: url("../fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); }
@property --angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* Mise en page : une seule colonne néon sur téléphone ; sur grand écran, la machine à droite, le texte à gauche. */
:root {
	--fond: #03060c;
	--fond-2: #061223;
	--encart: rgba(7, 18, 32, 0.82);
	--encart-2: rgba(10, 28, 48, 0.9);
	--trait: rgba(61, 255, 168, 0.16);
	--texte: #e6fff4;
	--doux: #8fb4c6;
	--accent: #3dffa8;
	--accent-clair: #8ff7be;
	--accent-texte: #00170c;
	--cyan: #34d6ff;
	--or: #ffc531;
	--voile: 3, 6, 12;
	--pied: #02050a;
	--titre: "Orbitron", "Exo 2", system-ui, sans-serif;
	--corps: "Exo 2", system-ui, -apple-system, "Segoe UI", sans-serif;
	--mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
	--coupe: 14px;
	--neon: 0 0 6px rgba(61, 255, 168, 0.55), 0 0 22px rgba(61, 255, 168, 0.28);
	color-scheme: dark;
}

body {
	font-size: 16.5px;
	background-color: var(--fond);
	background-image:
		radial-gradient(1200px 600px at 50% -10%, rgba(52, 214, 255, 0.08), transparent 70%),
		linear-gradient(rgba(61, 255, 168, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(61, 255, 168, 0.035) 1px, transparent 1px);
	background-size: auto, 48px 48px, 48px 48px;
	background-attachment: fixed, fixed, fixed;
}
/* lignes de balayage très légères, comme un écran */
body::after { content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 3px); }
h1, h2, h3 { letter-spacing: 0.02em; }
::selection { background: var(--accent); color: var(--accent-texte); }

/* ------------------------------------------------------------------ démarrage du système */
.boot { display: none; }
.js .boot { display: grid; position: fixed; inset: 0; z-index: 100; place-items: center; background: #02040a; cursor: pointer; }
.boot-vu .boot { display: none; }
@media (prefers-reduced-motion: reduce) { .js .boot { display: none; } }
.boot-actif body { overflow: hidden; }
.boot-in { display: grid; justify-items: center; gap: 16px; padding: 24px; }
.boot-trefle .trefle { width: 92px; filter: drop-shadow(0 0 14px rgba(61, 255, 168, 0.55)); }
.boot-trefle { --rien: 0; }
.boot .facette { animation: facette 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(0.05s + var(--i) * 55ms); transform-box: fill-box; transform-origin: 50% 100%; }
.boot .tige { stroke-dasharray: 1; animation: tige 0.5s ease-out 0.55s both; }
.boot .coeur, .boot .etoile { transform-box: fill-box; transform-origin: center; animation: coeur 0.4s cubic-bezier(0.3, 1.6, 0.5, 1) 0.7s both; }
.boot-nom { font: 900 22px/1 var(--titre); letter-spacing: 0.42em; margin-right: -0.42em; color: #fff; text-shadow: var(--neon); display: grid; justify-items: center; gap: 8px; }
.boot-nom span { font: 500 11px/1 var(--mono); letter-spacing: 0.6em; color: var(--or); margin-right: -0.6em; }
.boot-barre { width: 220px; height: 2px; background: rgba(61, 255, 168, 0.15); overflow: hidden; }
.boot-barre span { display: block; height: 100%; background: var(--accent); box-shadow: var(--neon); animation: charge 1.8s cubic-bezier(0.5, 0, 0.2, 1) both; transform-origin: left; }
@keyframes charge { from { transform: scaleX(0); } }
.boot-log { font: 400 12px/1.4 var(--mono); color: var(--cyan); min-height: 1.4em; letter-spacing: 0.04em; }
.boot.sortie { animation: boot-sortie 0.65s cubic-bezier(0.7, 0, 0.3, 1) forwards; pointer-events: none; }
@keyframes boot-sortie {
	40% { clip-path: inset(0 0 0 0); opacity: 1; }
	100% { clip-path: inset(50% 0 50% 0); opacity: 0.2; }
}

/* ------------------------------------------------------------------ en-tête */
body::before { background: var(--fond); }
.entete { background: rgba(3, 6, 12, 0.55); }
.entete.defile { background: rgba(3, 6, 12, 0.88); border-bottom-color: transparent; }
.entete::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(61, 255, 168, 0.5) 20%, rgba(52, 214, 255, 0.6) 50%, rgba(61, 255, 168, 0.5) 80%, transparent); opacity: 0.7; }
.marque-logo .trefle { filter: drop-shadow(0 0 6px rgba(61, 255, 168, 0.45)); }
.menu a { font: 500 12.5px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--doux); }
.menu a:hover { color: var(--accent); text-shadow: var(--neon); }
.menu a:not(.menu-x)::after { height: 1px; background: var(--accent); box-shadow: var(--neon); }
.menu-x { color: var(--texte) !important; }

/* ------------------------------------------------------------------ boutons, badges */
.btn { border-radius: 0; font: 700 13.5px/1 var(--titre); letter-spacing: 0.1em; text-transform: uppercase; min-height: 48px; padding: 0 22px; }
.btn-grand { min-height: 54px; font-size: 14.5px; padding: 0 26px; }
.btn-1 {
	color: var(--accent-texte);
	background:
		linear-gradient(135deg, transparent 10px, var(--accent) 0) left / 51% 100% no-repeat,
		linear-gradient(-45deg, transparent 10px, var(--accent) 0) right / 51% 100% no-repeat;
	filter: drop-shadow(0 0 10px rgba(61, 255, 168, 0.35));
	transition: filter 0.25s, transform 0.2s;
}
.btn-1:hover { box-shadow: none; filter: drop-shadow(0 0 18px rgba(61, 255, 168, 0.75)); }
.btn-2 { position: relative; isolation: isolate; color: var(--texte); background: rgba(61, 255, 168, 0.55); box-shadow: none; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.btn-2::before { content: ""; position: absolute; inset: 1.5px; z-index: -1; background: var(--fond); clip-path: polygon(9.4px 0, 100% 0, 100% calc(100% - 9.4px), calc(100% - 9.4px) 100%, 0 100%, 0 9.4px); transition: background-color 0.25s; }
.btn-2:hover { box-shadow: none; color: var(--accent); text-shadow: var(--neon); }
.btn-2:hover::before { background: #071a16; }
.lien-fort { font: 500 12.5px/1.2 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); }
.gratuit { font: 400 12px/1.4 var(--mono); color: var(--doux); letter-spacing: 0.02em; }
.gratuit::before { content: "> "; color: var(--accent); }

.badge { border-radius: 0; font: 500 10.5px/1 var(--mono); letter-spacing: 0.16em; padding: 7px 10px; }
.badge-live { background: rgba(3, 6, 12, 0.82); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), 0 0 14px rgba(61, 255, 168, 0.35); }
.badge-live .point { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.badge-bientot { background: rgba(3, 6, 12, 0.82); color: var(--or); box-shadow: inset 0 0 0 1px var(--or); }
.badge-neutre { background: rgba(3, 6, 12, 0.82); color: var(--cyan); box-shadow: inset 0 0 0 1px rgba(52, 214, 255, 0.6); }

.eclat { filter: drop-shadow(0 0 8px rgba(61, 255, 168, 0.6)); opacity: 0.55; }

/* texte qui se décode */
.dec-mot { display: inline-block; white-space: nowrap; }
.dec-car { display: inline-block; text-align: center; }
.dec-cache .dec-car, .dec-attente { opacity: 0; }
.dec-brouille { color: var(--cyan); text-shadow: 0 0 10px rgba(52, 214, 255, 0.9); }

/* ------------------------------------------------------------------ accueil */
.hero-tron { padding-block: 22px 0; min-height: min(calc(100svh - var(--entete)), 980px); display: flex; flex-direction: column; }
.grille-tron { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; }
.hero-tron::after { content: ""; position: absolute; inset: auto 0 0; height: 90px; z-index: -1; background: linear-gradient(to bottom, transparent, var(--fond)); pointer-events: none; }
.hero-tron .hero-grille { display: grid; gap: 26px; flex: 1; align-content: center; }

.machine { display: grid; justify-items: center; gap: 12px; }
.machine-hud { width: 100%; max-width: calc(var(--cel) * 3 + 56px); display: flex; justify-content: space-between; gap: 10px; font: 500 10.5px/1 var(--mono); letter-spacing: 0.14em; color: var(--cyan); }
.machine { --cel: min(25vw, 112px); }
.machine-statut { color: var(--accent); }
.machine-statut::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; background: currentColor; box-shadow: 0 0 8px currentColor; vertical-align: 1px; }
.machine.tourne .machine-statut { color: var(--or); }
@media (prefers-reduced-motion: no-preference) { .machine.tourne .machine-statut::before { animation: battement 0.5s steps(2) infinite; } }
.machine-cadre {
	position: relative; padding: 14px;
	background: linear-gradient(180deg, rgba(10, 30, 50, 0.85), rgba(3, 10, 20, 0.92));
	clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
	box-shadow: inset 0 0 0 1px rgba(61, 255, 168, 0.45), inset 0 0 40px rgba(61, 255, 168, 0.08);
}
.coin { position: absolute; width: 18px; height: 18px; border: 2px solid var(--cyan); filter: drop-shadow(0 0 6px var(--cyan)); z-index: 3; }
.coin-hg { top: 6px; left: 6px; border-right: 0; border-bottom: 0; display: none; }
.coin-hd { top: 6px; right: 6px; border-left: 0; border-bottom: 0; }
.coin-bg { bottom: 6px; left: 6px; border-right: 0; border-top: 0; }
.coin-bd { bottom: 6px; right: 6px; border-left: 0; border-top: 0; display: none; }
.rouleaux { display: grid; grid-template-columns: repeat(3, var(--cel)); gap: 6px; }
.rouleau { position: relative; height: calc(var(--cel) * 3); overflow: hidden; background: linear-gradient(90deg, rgba(61, 255, 168, 0.05), rgba(3, 8, 16, 0.4) 30%, rgba(3, 8, 16, 0.4) 70%, rgba(61, 255, 168, 0.05)); box-shadow: inset 0 0 0 1px rgba(52, 214, 255, 0.18); -webkit-mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent); mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent); }
.rouleau-bande { will-change: transform; transition: filter 0.3s; }
.rouleau-bande img { width: var(--cel); height: var(--cel); padding: 12%; object-fit: contain; filter: drop-shadow(0 0 8px rgba(52, 214, 255, 0.35)); }
.machine.tourne .rouleau-bande { filter: blur(1.6px) brightness(1.25) saturate(1.2); }
.rouleau.arret::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 30%, rgba(61, 255, 168, 0.25) 50%, transparent 70%); animation: eclair-arret 0.3s ease-out forwards; }
@keyframes eclair-arret { to { opacity: 0; } }
.rouleau.arret .rouleau-bande { animation: rebond 0.3s ease-out; }
@keyframes rebond { 40% { transform: translateY(5px); } }
.ligne-gain { position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; margin-top: -1px; background: linear-gradient(90deg, transparent, var(--or) 8%, #fff 50%, var(--or) 92%, transparent); box-shadow: 0 0 10px var(--or), 0 0 26px rgba(255, 197, 49, 0.6); opacity: 0; transform: scaleX(0); transform-origin: left; z-index: 4; }
.machine.gagne .ligne-gain { animation: laser 0.6s cubic-bezier(0.6, 0, 0.2, 1) forwards, laser-vit 1.6s ease-in-out 0.6s infinite alternate; }
@keyframes laser { from { opacity: 1; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }
@keyframes laser-vit { from { opacity: 1; } to { opacity: 0.55; } }
.machine.gagne .rouleau-bande img:nth-child(2) { animation: gagne 1s cubic-bezier(0.3, 1.6, 0.5, 1) 0.35s, halo 2.2s ease-in-out 1.4s infinite alternate; }
@keyframes gagne { 40% { transform: scale(1.2); filter: drop-shadow(0 0 22px rgba(61, 255, 168, 1)); } }
@keyframes halo { to { filter: drop-shadow(0 0 16px rgba(61, 255, 168, 0.9)); } }
.balayage { position: absolute; left: 0; right: 0; top: 0; height: 40%; z-index: 2; pointer-events: none; background: linear-gradient(to bottom, transparent, rgba(52, 214, 255, 0.07) 80%, rgba(52, 214, 255, 0.25)); opacity: 0.7; }
@media (prefers-reduced-motion: no-preference) { .balayage { animation: balaye 4.5s linear infinite; } }
@keyframes balaye { from { transform: translateY(-100%); } to { transform: translateY(250%); } }
.machine-relancer { min-height: 42px; font-size: 12px; }

.hero-tron .hero-in { text-align: center; position: relative; z-index: 2; }
.hero-tron .sur-titre { font: 500 12px/1 var(--mono); letter-spacing: 0.3em; color: var(--cyan); }
.curseur-txt::after { content: ""; display: inline-block; width: 0.62em; height: 1.05em; margin-left: 0.3em; vertical-align: -0.2em; background: var(--accent); box-shadow: var(--neon); }
@media (prefers-reduced-motion: no-preference) { .curseur-txt::after { animation: battement 1s steps(2) infinite; } }
.hero-tron h1 { font: 900 clamp(29px, 8.4vw, 64px)/1.12 var(--titre); text-transform: uppercase; max-width: 15ch; margin-inline: auto; color: #fff; text-shadow: 0 0 22px rgba(61, 255, 168, 0.45); }
.hero-tron h1 .dec-mot:last-child { color: var(--accent); }
.hero-tron .hero-phrase { margin-inline: auto; color: var(--doux); font-size: 17px; }
.hero-tron .boutons { justify-content: center; }
.hero-tron .boutons .btn { flex: 1 1 auto; }
/* le texte attend l'arrêt des rouleaux, puis arrive */
.theme-tron .hero .sur-titre, .theme-tron .hero .hero-phrase, .theme-tron .hero .boutons { animation: none; }
.hero-tron .hero-in > :not(h1) { transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.hero-tron .hero-in > .hero-phrase { transition-delay: 0.7s; }
.hero-tron .hero-in > .boutons { transition-delay: 0.9s; }
.machine-attente .hero-tron .hero-in > :not(h1), .boot-actif .hero-tron .hero-in > :not(h1) { opacity: 0; transform: translateY(14px); transition-delay: 0s; }
.machine-attente .hero-tron h1 { visibility: hidden; }

.hud { display: grid; grid-template-columns: repeat(2, 1fr); margin: 30px 0 0; border: 1px solid var(--trait); background: rgba(3, 8, 16, 0.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hud div { padding: 14px 12px; position: relative; min-width: 0; }
.hud div:nth-child(2n) { border-left: 1px solid var(--trait); }
.hud div:nth-child(n + 3) { border-top: 1px solid var(--trait); }
.hud dt { font: 500 10px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--doux); }
.hud dd { margin: 8px 0 0; font: 700 22px/1 var(--titre); color: #fff; text-shadow: var(--neon); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hud div:first-child dd { color: var(--accent); }

.defilant { margin-top: 0; border-block: 1px solid var(--trait); overflow: hidden; background: rgba(3, 8, 16, 0.8); }
.defilant-piste { display: flex; width: max-content; }
.defilant-piste > div { display: flex; align-items: center; gap: 14px; padding: 12px 7px; font: 500 12px/1 var(--mono); letter-spacing: 0.16em; white-space: nowrap; color: var(--texte); }
.defilant-piste i { font-style: normal; color: var(--accent); text-shadow: var(--neon); }
.defilant-etat { color: var(--or); }
@media (prefers-reduced-motion: no-preference) { .defilant-piste { animation: defile 34s linear infinite; } }
@keyframes defile { to { transform: translateX(-50%); } }
.hero-tron .defilant { margin-top: 26px; }

/* ------------------------------------------------------------------ sections */
.titre-section { font: 900 clamp(26px, 7.4vw, 46px)/1.1 var(--titre); text-transform: uppercase; color: #fff; text-shadow: 0 0 18px rgba(61, 255, 168, 0.35); }
.titre-section .num { font: 500 12px/1 var(--mono); color: var(--cyan); letter-spacing: 0.12em; }
.titre-section .num::before { content: "// "; color: var(--accent); }
.tete-section { position: relative; padding-bottom: 14px; border-bottom: 1px solid var(--trait); }
.tete-section::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 90px; height: 1px; background: var(--accent); box-shadow: var(--neon); }
@media (prefers-reduced-motion: no-preference) { .tete-section.vu::after { animation: piste 4s ease-in-out infinite alternate; } }
@keyframes piste { to { left: calc(100% - 90px); } }
.intro { color: var(--doux); }

/* panneaux : coins coupés, bord lumineux, lumière qui suit la souris */
.carte, .pilier, .contact > div, .bonus, .fiche, .faq details {
	position: relative; isolation: isolate; border: 0; border-radius: 0;
	background: transparent;
	clip-path: polygon(var(--coupe) 0, 100% 0, 100% calc(100% - var(--coupe)), calc(100% - var(--coupe)) 100%, 0 100%, 0 var(--coupe));
}
.carte::before, .pilier::before, .contact > div::before, .bonus::before, .fiche::before, .faq details::before {
	content: ""; position: absolute; inset: 0; z-index: -2;
	background: conic-gradient(from var(--angle), rgba(61, 255, 168, 0.22) 0deg, rgba(61, 255, 168, 0.22) 250deg, var(--accent) 310deg, var(--cyan) 335deg, rgba(61, 255, 168, 0.22) 360deg);
}
.carte::after, .pilier::after, .contact > div::after, .bonus::after, .fiche::after, .faq details::after {
	content: ""; position: absolute; inset: 1px; z-index: -1;
	background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(61, 255, 168, 0.09), transparent 60%), linear-gradient(180deg, #08172a, #050d19);
	clip-path: polygon(calc(var(--coupe) - 0.4px) 0, 100% 0, 100% calc(100% - var(--coupe) + 0.4px), calc(100% - var(--coupe) + 0.4px) 100%, 0 100%, 0 calc(var(--coupe) - 0.4px));
}
@media (prefers-reduced-motion: no-preference) {
	.carte::before, .pilier::before, .bonus::before { animation: tour 7s linear infinite; }
	.pilier:nth-child(2)::before, .bonus:nth-child(2)::before { animation-delay: -2.3s; }
	.pilier:nth-child(3)::before, .bonus:nth-child(3)::before { animation-delay: -4.6s; }
	.bonus:nth-child(4)::before { animation-delay: -1.2s; }
	.carte + .carte::before { animation-delay: -3.5s; }
}
@keyframes tour { to { --angle: 360deg; } }
.carte:hover::before, .bonus:hover::before { background: conic-gradient(from var(--angle), rgba(61, 255, 168, 0.5) 0deg, var(--accent) 120deg, var(--cyan) 240deg, rgba(61, 255, 168, 0.5) 360deg); }
.carte-media { background: #020509; }
.carte-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 3px), linear-gradient(to bottom, transparent 60%, rgba(3, 8, 16, 0.55)); }
.carte-media::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 30%; z-index: 2; pointer-events: none; background: linear-gradient(to bottom, transparent, rgba(61, 255, 168, 0.18), transparent); transform: translateY(-120%); }
.carte:hover .carte-media::before { animation: scan 1.2s ease-in-out; }
@keyframes scan { to { transform: translateY(380%); } }
.carte-media .badge, .carte-titre { z-index: 3; }
.carte-nom { font: 900 22px/1.15 var(--titre); text-transform: uppercase; }
.carte-bientot .ambiance { font: 600 18px/1.4 var(--corps); }
.meca { font: 400 12px/1.6 var(--mono); color: var(--cyan); letter-spacing: 0.02em; }
.chiffres div { background: rgba(61, 255, 168, 0.05); border-radius: 0; box-shadow: inset 0 0 0 1px var(--trait); }
.chiffres dt, .barre-chiffres dt, .fiche dt { font: 500 10px/1 var(--mono); letter-spacing: 0.16em; }
.chiffres dd { font: 700 17px/1 var(--titre); color: #fff; }
.chiffres div:first-child dd { color: var(--accent); text-shadow: var(--neon); }
.carte-bientot .carte-media img { filter: saturate(0.9) contrast(1.05); }
.carte-bientot .badge-bientot::after { content: " // SIGNAL INCOMING"; color: var(--doux); }

.filtres .filtre { border-radius: 0; font: 500 12px/1 var(--mono); }

.section-studio { background: linear-gradient(180deg, transparent, rgba(6, 18, 35, 0.6) 50%, transparent); }
.pilier { padding: 22px 20px 22px 70px; }
.pilier .gemme { filter: drop-shadow(0 0 8px rgba(61, 255, 168, 0.8)); }
.pilier-num { font: 500 10.5px/1 var(--mono); color: var(--cyan); }
.pilier-num::before { content: "MODULE "; color: var(--doux); }
.pilier h3 { font: 700 17px/1.3 var(--titre); text-transform: uppercase; letter-spacing: 0.04em; }

.contact-titre { font: 700 17px/1.2 var(--titre); text-transform: uppercase; letter-spacing: 0.04em; }
.contact .courriel { font: 500 14px/1.5 var(--mono); }
.contact .courriel::before { content: "> mail "; color: var(--accent); }
.contact .courriel a { color: var(--cyan); text-decoration: none; border-bottom: 1px dashed rgba(52, 214, 255, 0.5); }

/* ------------------------------------------------------------------ page du jeu */
.jeu-hero::after { display: none; }
.jeu-hero .grille-tron { opacity: 0.8; }
.jeu-hero-art { position: relative; inset: auto; margin: 16px max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); z-index: 1; clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px); box-shadow: inset 0 0 0 1px rgba(61, 255, 168, 0.5); }
.jeu-hero-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 3px); box-shadow: inset 0 0 0 1px rgba(61, 255, 168, 0.55), inset 0 0 40px rgba(61, 255, 168, 0.15); }
.jeu-hero-art .jeu-hero-fond { aspect-ratio: 16 / 10; position: relative; z-index: -1; }
.retour { font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--cyan); margin-bottom: 8px; }
.jeu-hero .sur-titre { font: 500 12px/1 var(--mono); letter-spacing: 0.3em; color: var(--accent); }
.jeu-titre img { filter: drop-shadow(0 0 22px rgba(255, 140, 30, 0.35)); }
.meca-long p::before { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.barre-chiffres { border: 1px solid var(--trait); border-radius: 0; background: rgba(3, 8, 16, 0.75); }
.barre-chiffres dd { font: 700 22px/1 var(--titre); text-shadow: var(--neon); }
.barre-chiffres div:first-child dd { color: var(--accent); }
.bonus { background: transparent; }
.bonus img { border-radius: 0; }
.bonus h3 { font: 700 16px/1.25 var(--titre); text-transform: uppercase; letter-spacing: 0.04em; }
.bonus .risque { font: 500 10.5px/1 var(--mono); color: var(--or); }
.bonus .risque::before { content: "["; color: var(--doux); }
.bonus .risque::after { content: "]"; color: var(--doux); }
.fiche { padding: 6px 18px; }
.fiche dd { font: 400 14px/1.5 var(--mono); }
.faq summary { font: 600 15px/1.4 var(--corps); padding-left: 38px; }
.faq summary::before { content: ">"; position: absolute; left: 18px; top: 16px; font: 500 14px/1.4 var(--mono); color: var(--accent); }
.faq summary::after { color: var(--cyan); font-family: var(--mono); }

/* ------------------------------------------------------------------ pied de page */
.pied { border-top: 0; }
.pied::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), var(--cyan), transparent); box-shadow: var(--neon); }
.pied-logo .trefle { filter: drop-shadow(0 0 10px rgba(61, 255, 168, 0.5)); }
.pied-marque p, .pied-liens a { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.06em; }
.pied-liens a { text-transform: uppercase; }
.badge-18 { border-radius: 0; font-family: var(--mono); box-shadow: inset 0 0 0 1px var(--or); }

/* ------------------------------------------------------------------ grands écrans */
@media (min-width: 760px) {
	.hero-tron { padding-top: 40px; }
	.hero-tron .hero-grille { grid-template-columns: 1fr auto; align-items: center; gap: 56px; }
	.hero-tron .machine { order: 2; --cel: 128px; }
	.hero-tron .hero-in { text-align: left; }
	.hero-tron h1, .hero-tron .hero-phrase { margin-inline: 0; }
	.hero-tron .boutons { justify-content: flex-start; }
	.hero-tron .boutons .btn { flex: 0 0 auto; }
	.hud { grid-template-columns: repeat(4, 1fr); margin-top: 40px; }
	.hud div + div { border-left: 1px solid var(--trait); }
	.hud div:nth-child(n + 3) { border-top: 0; }
	.hud dd { font-size: 28px; }
	.jeu-hero-art { position: absolute; margin: 0; top: 70px; right: max(32px, calc((100vw - 1180px) / 2 + 32px)); width: 46%; max-width: 560px; }
	.jeu-hero-art .jeu-hero-fond { aspect-ratio: 16 / 11; height: auto; }
	.jeu-hero-in { min-height: 640px; }
	.jeu-hero .meca-long, .jeu-hero .hero-phrase { max-width: 40ch; }
	.barre-chiffres { margin-top: 0; }
	.barre-chiffres dd { font-size: 28px; }
	.pilier { padding: 70px 22px 26px; }
}
@media (min-width: 1100px) {
	.hero-tron .machine { --cel: 140px; }
}

/* le logo garde sa police (Fredoka), comme les logos de Mathias */
.marque-nom, .pied-nom { font-family: "Fredoka", system-ui, sans-serif; letter-spacing: 0.01em; }
.marque-sous, .pied-sous { font-family: "Fredoka", system-ui, sans-serif; }
.boot-nom { font: 700 30px/1 "Fredoka", system-ui, sans-serif; letter-spacing: 0.02em; margin-right: 0; }
.boot-nom span { font: 500 11px/1 "Fredoka", system-ui, sans-serif; letter-spacing: 0.62em; }
/* téléphone : menu plus serré ; un voile sombre derrière le texte de l'accueil (le sol lumineux passe derrière) */
@media (max-width: 759px) {
	.menu a { font-size: 11px; letter-spacing: 0.04em; padding-inline: 5px; }
	.menu a:not(.menu-x)::after { left: 5px; right: 5px; }
	.menu-x { width: 38px; }
	.marque-nom { font-size: 19px; }
	.hero-tron .hero-in::before { content: ""; position: absolute; inset: -18px -8px; z-index: -1; background: radial-gradient(closest-side, rgba(3, 6, 12, 0.82), rgba(3, 6, 12, 0.55) 70%, transparent); }
}
@media (max-width: 759px) {
	.pilier-num { position: static; display: block; margin-bottom: 8px; }
}

/* lot SITE-4 : sur téléphone, la phrase et les boutons sont AU-DESSUS de la machine (à 370 × 545, la fenêtre de Safari dans Stake,
   « Luck, cut like an emerald. » et « Play Wicked Lanterns » se voient sans défiler) ; comme sur ordinateur, ils n'apparaissent
   qu'une fois les 3 trèfles alignés (leur place est gardée : la machine ne bouge pas) */
@media (max-width: 759px) {
	.hero-tron { padding-top: 14px; }
	.hero-tron .hero-grille { align-content: start; gap: 22px; }
	.hero-tron .hero-in { order: -1; }
	.hero-tron .sur-titre { margin-bottom: 10px; }
	.hero-tron h1 { font-size: clamp(26px, 7.6vw, 34px); }
	.hero-tron .hero-phrase { font-size: 15.5px; margin: 10px auto 16px; }
	.hero-tron .boutons { gap: 8px; }
	.hero-tron .btn-grand { min-height: 48px; }
	.hero-tron .hero-in > .hero-phrase { transition-delay: 0.35s; }
	.hero-tron .hero-in > .boutons { transition-delay: 0.5s; }
}
/* lot SITE-4 : sur petit téléphone, le badge de Big Bad Bandit s'arrête à COMING SOON (il ne couvre pas l'affiche WANTED) */
@media (max-width: 479px) { .carte-bientot .badge-bientot::after { content: none; } }

/* lot SITE-4 : la carte COMING SOON (Big Bad Bandit) a son liseré néon ORANGE qui fait le tour sans arrêt */
.carte-bientot { --angle: 0deg; }
.carte-bientot::before {
	background: conic-gradient(from var(--angle), rgba(255, 138, 30, 0.35) 0deg, rgba(255, 138, 30, 0.35) 140deg, #ff8a1e 165deg, #ffd27a 178deg, rgba(255, 138, 30, 0.35) 200deg, rgba(255, 138, 30, 0.35) 320deg, #ff8a1e 345deg, #ffd27a 358deg, rgba(255, 138, 30, 0.35) 360deg);
}
.carte-bientot::after { inset: 2px; box-shadow: inset 0 0 26px rgba(255, 138, 30, 0.16); clip-path: polygon(calc(var(--coupe) - 0.8px) 0, 100% 0, 100% calc(100% - var(--coupe) + 0.8px), calc(100% - var(--coupe) + 0.8px) 100%, 0 100%, 0 calc(var(--coupe) - 0.8px)); }
.carte-bientot:hover::before { background: conic-gradient(from var(--angle), #ff8a1e, #ffd27a, #ff8a1e, #ffd27a, #ff8a1e); }
.carte-bientot .badge-bientot { color: #ffb347; box-shadow: inset 0 0 0 1px #ff8a1e, 0 0 14px rgba(255, 138, 30, 0.45); }
.carte-bientot .carte-nom { text-shadow: 0 0 16px rgba(255, 138, 30, 0.45); }
@media (prefers-reduced-motion: no-preference) {
	.carte-bientot::before { animation: tour 3.6s linear infinite; }
	.carte-bientot .badge-bientot { animation: pulse-orange 2.4s ease-in-out infinite; }
}
@keyframes pulse-orange { 50% { box-shadow: inset 0 0 0 1px #ffd27a, 0 0 22px rgba(255, 138, 30, 0.75); } }
.carte-bientot { padding: 2px; }
.carte-bientot .carte-media { clip-path: polygon(calc(var(--coupe) - 1px) 0, 100% 0, 100% 100%, 0 100%, 0 calc(var(--coupe) - 1px)); }