/* bohec.fr — page d'accueil « Arcade » (polices auto-hébergées, aucun script) */
@font-face{font-family:"Bricolage";src:url("../fonts/bricolage.woff2") format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Source Serif";src:url("../fonts/sourceserif.woff2") format("woff2");font-weight:200 900;font-display:swap}
@font-face{font-family:"Source Serif";src:url("../fonts/sourceserif-italic.woff2") format("woff2");font-weight:200 900;font-style:italic;font-display:swap}
:root{--papier:#edeff3;--encre:#1a1c2c;--gris:#565b70;--rec:#d8392b;--teal:#0e7c74;--violet:#4b3fd1;--ocre:#d99a1e;--rose:#c93d7a;--nuit:#22254a;
--display:"Bricolage","Arial Narrow",Arial,sans-serif;--texte:"Source Serif",Georgia,serif;--marge:clamp(1rem,5vw,4rem)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--texte);font-size:1.0625rem;line-height:1.55;overflow-x:hidden}
img,svg{display:block;max-width:100%}
h1,h2,h3{font-family:var(--display);line-height:1.05;margin:0}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;z-index:99;background:#fff;color:#000;padding:.5rem 1rem}
:focus-visible{outline:3px solid var(--ocre);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
/* motifs */
.m-memoire{background:repeating-linear-gradient(0deg,transparent 0 22%,rgba(255,255,255,.85) 22% 24%,transparent 24% 30%),linear-gradient(var(--teal),#0a3c3a)}
.m-quiz{background:radial-gradient(circle at 30% 30%,var(--ocre) 0 14%,transparent 15%),radial-gradient(circle at 70% 55%,var(--rose) 0 14%,transparent 15%),radial-gradient(circle at 35% 78%,#fff 0 10%,transparent 11%),var(--nuit)}
.m-shanghai{background:linear-gradient(135deg,transparent 0 30%,#f4ebd3 30% 70%,transparent 70%) center/70% 30% no-repeat,radial-gradient(ellipse at 50% 45%,#145244,#0f3d33)}
.m-pirates{background:linear-gradient(to bottom,transparent 0 62%,#5b3c22 62% 70%,transparent 70%),linear-gradient(100deg,transparent 0 48%,#efe6cf 48% 64%,transparent 64%) center 35%/100% 40% no-repeat,linear-gradient(#0b1e23,#1c4b52)}
.m-dunes{background:radial-gradient(ellipse at 30% 75%,#c4894c 0 40%,transparent 41%),radial-gradient(ellipse at 80% 90%,#a8743f 0 45%,transparent 46%),radial-gradient(circle at 70% 40%,#ffb21f 0 8%,transparent 9%),linear-gradient(#1e1915,#3d2b22)}
.m-bolide{background:linear-gradient(to top,#c4bdf0 0 45%,transparent 45%) center bottom/60% 100% no-repeat,radial-gradient(circle at 50% 38%,#ff4fa3 0 22%,transparent 23%),linear-gradient(#0d0b1f,#3a1752)}
.m-empires{background:conic-gradient(from 45deg at 50% 50%,#5a8b3b 0 25%,#a59b54 0 50%,#2a6890 0 75%,#8e8a54 0) center/70% 40% no-repeat,linear-gradient(#0f1829,#16233d)}
body{background:#0c0d1c;color:#e9ebf3;background-image:radial-gradient(ellipse at 50% -10%,#2b2466 0,transparent 60%)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px);z-index:50}
.wrap{max-width:74rem;margin:0 auto;padding:0 var(--marge)}
header .wrap{display:flex;align-items:center;justify-content:space-between;min-height:4.25rem;gap:1rem}
.logo{font-family:var(--display);font-weight:800;text-decoration:none;letter-spacing:.08em;text-transform:uppercase;font-size:1.05rem}
.logo span{color:#ff4fa3}
nav ul{display:flex;gap:1.5rem;list-style:none;margin:0;padding:0}
nav a{font-family:var(--display);font-weight:600;text-decoration:none;text-transform:uppercase;letter-spacing:.08em;font-size:.85rem;color:#a4a9bf;padding:.5rem 0;display:block}
nav a:hover{color:#ffd23f}
details{display:none}
.hero{text-align:center;padding:clamp(3rem,10vw,7rem) 0 clamp(2rem,6vw,4rem)}
.coin{font-family:var(--display);font-weight:700;letter-spacing:.3em;font-size:.8rem;color:#ffd23f;animation:clig 1.2s steps(2) infinite}
@keyframes clig{50%{opacity:.2}}
h1{font-size:clamp(3.2rem,13vw,9rem);font-weight:800;letter-spacing:-.03em;text-transform:uppercase;line-height:.88;margin:1rem 0 1.5rem;
 background:linear-gradient(180deg,#fff 0 45%,#ff4fa3 55%,#7b5cff);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 22px rgba(255,79,163,.35))}
.intro{max-width:36rem;margin:0 auto 2rem;color:#c9cce0;font-size:1.15rem}
.cta{display:flex;justify-content:center;flex-wrap:wrap;gap:1rem}
.btn{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.08em;text-decoration:none;padding:1rem 1.6rem;border-radius:.4rem;min-height:3.2rem;display:inline-flex;align-items:center;gap:.6rem}
.btn.jaune{background:#ffd23f;color:#1a1c2c;box-shadow:0 5px 0 #b38a00}
.btn.jaune:hover{transform:translateY(2px);box-shadow:0 3px 0 #b38a00}
.btn.cadre{box-shadow:inset 0 0 0 2px #6b6f9a;color:#e9ebf3}.btn.cadre:hover{box-shadow:inset 0 0 0 2px #fff}
section{padding:clamp(2.5rem,7vw,5rem) 0}
h2{font-size:clamp(1.6rem,4vw,2.4rem);text-transform:uppercase;letter-spacing:.06em;display:flex;align-items:center;gap:1rem;margin-bottom:1.75rem}
h2::before{content:"";width:.7rem;height:.7rem;background:#ff4fa3;box-shadow:0 0 12px #ff4fa3}
h2 small{font-size:.8rem;color:#8b90b0;letter-spacing:.12em;margin-left:auto;font-weight:600}
.cartouches{display:grid;grid-template-columns:repeat(auto-fill,minmax(13.5rem,1fr));gap:1.25rem;list-style:none;margin:0 0 2.5rem;padding:0}
.cartouche{position:relative;background:#1a1c33;border-radius:.6rem .6rem .3rem .3rem;padding:.6rem .6rem 1rem;box-shadow:0 0 0 1px #2c2f52,0 12px 28px -14px #000;transition:transform .18s,box-shadow .18s}
.cartouche::before{content:"";position:absolute;top:0;left:30%;right:30%;height:.35rem;background:#0c0d1c;border-radius:0 0 .3rem .3rem}
.cartouche:hover{transform:translateY(-5px);box-shadow:0 0 0 2px #ff4fa3,0 0 30px -6px #ff4fa3}
.cartouche .vis{aspect-ratio:4/3;border-radius:.3rem;margin-bottom:.8rem;position:relative}
.cartouche .vis::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(160deg,rgba(255,255,255,.25),transparent 40%)}
.cartouche h3{font-size:1.15rem;margin:0 .3rem .2rem}
.cartouche h3 a{text-decoration:none}.cartouche h3 a::after{content:"";position:absolute;inset:0}
.cartouche p{margin:0 .3rem;font-size:.9rem;color:#a4a9bf}
.tag{position:absolute;top:1rem;right:1rem;font-family:var(--display);font-size:.7rem;font-weight:800;letter-spacing:.1em;background:#ffd23f;color:#1a1c2c;padding:.15rem .45rem;border-radius:.2rem}
.outils{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.8rem;color:#ffd23f}
.duo{display:grid;grid-template-columns:1.3fr 1fr;gap:1.25rem}
.duo>div{background:#14162b;border:1px solid #2c2f52;border-radius:.6rem;padding:clamp(1.25rem,4vw,2rem)}
.duo h2{margin-bottom:1rem}
.duo p{color:#c9cce0}
footer{padding:2rem 0 3rem;color:#8b90b0;font-size:.9rem;border-top:1px solid #23264a}
footer p{margin:.3rem 0}
@media (max-width:48rem){
 nav{display:none}
 details{display:block;position:relative}
 summary{list-style:none;cursor:pointer;font-family:var(--display);font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:.85rem;padding:.6rem 1rem;border-radius:.4rem;box-shadow:inset 0 0 0 2px #6b6f9a;min-height:2.75rem;display:flex;align-items:center}
 summary::-webkit-details-marker{display:none}
 details[open] summary{box-shadow:inset 0 0 0 2px #ffd23f;color:#ffd23f}
 details ul{position:absolute;right:0;top:calc(100% + .5rem);background:#14162b;border:1px solid #2c2f52;border-radius:.6rem;list-style:none;margin:0;padding:.5rem;min-width:13rem;z-index:20;box-shadow:0 20px 40px -10px #000}
 details a{display:block;padding:.8rem 1rem;font-family:var(--display);font-weight:700;text-decoration:none;border-radius:.4rem}
 details a:hover{background:#23264a;color:#ffd23f}
 .btn{flex:1 1 100%;justify-content:center}
 .cartouches{grid-template-columns:1fr 1fr;gap:.8rem}
 .cartouche{padding:.45rem .45rem .8rem}.cartouche h3{font-size:.98rem}.cartouche p{font-size:.8rem}
 .duo{grid-template-columns:1fr}
 h2 small{display:none}
}

/* ---------- Fusion : jeux simples, galerie, musique ---------- */
.m-quizz{background:radial-gradient(circle at 30% 30%,var(--ocre) 0 14%,transparent 15%),radial-gradient(circle at 70% 55%,var(--rose) 0 14%,transparent 15%),radial-gradient(circle at 35% 78%,#fff 0 10%,transparent 11%),var(--nuit)}
.m-calcul{background:linear-gradient(#ffd23f,#ffd23f) center/40% 9% no-repeat,linear-gradient(#ffd23f,#ffd23f) center/7% 30% no-repeat,repeating-linear-gradient(0deg,rgba(255,255,255,.08) 0 1px,transparent 1px 12%),repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 1px,transparent 1px 10%),linear-gradient(#123a4a,#0b2230)}
.m-paires{background:url("../galerie/miniatures/le-trio-de-chats-85e7ac48ab.webp") 20% 50%/36% auto no-repeat,linear-gradient(135deg,#a855f7,#5b21b6) 80% 50%/36% 48% no-repeat,#1b1236}
.m-simon{background:radial-gradient(circle,#0c0d1c 0 11%,transparent 12% 34%,#14162b 35%),conic-gradient(#2fbf71 0 25%,#e8463c 0 50%,#3b82f6 0 75%,#ffd23f 0)}
.m-trace{background:radial-gradient(circle at 60% 42%,transparent 0 15%,#ff4fa3 16% 19%,transparent 20%),linear-gradient(160deg,transparent 0 55%,#6fd3c2 55% 58%,transparent 58%),linear-gradient(#1a1240,#0c0d1c)}
.m-multi{background:radial-gradient(circle at 50% 42%,var(--ocre) 0 13%,transparent 14%),radial-gradient(circle at 50% 42%,transparent 0 22%,rgba(217,154,30,.45) 23% 25%,transparent 26%),radial-gradient(circle at 50% 42%,transparent 0 31%,rgba(217,154,30,.25) 32% 34%,transparent 35%),var(--nuit)}
.cartouche.bientot{opacity:.75}
.cartouche.bientot:hover{transform:none;box-shadow:0 0 0 1px #2c2f52,0 12px 28px -14px #000}
.tag.gris{background:#3a3d63;color:#e9ebf3}
.apercu-galerie{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:.75rem}
.apercu-galerie a{display:block;border-radius:.5rem;overflow:hidden;box-shadow:0 0 0 1px #2c2f52;transition:transform .18s,box-shadow .18s}
.apercu-galerie a:hover{transform:translateY(-4px);box-shadow:0 0 0 2px #ffd23f,0 0 26px -6px #ffd23f}
.apercu-galerie img{width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.galerie-vide{color:#a4a9bf}
.sous{color:#c9cce0;margin:-1rem 0 1.5rem;max-width:40rem}
.artiste{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(1.8rem,5vw,2.6rem);line-height:1;margin:.25rem 0 .75rem;background:linear-gradient(90deg,#ffd23f,#ff4fa3);-webkit-background-clip:text;background-clip:text;color:transparent}
.liens{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.25rem}
.liens .btn{padding:.8rem 1.2rem;min-height:2.9rem;font-size:.9rem}
.egaliseur{display:flex;align-items:flex-end;gap:.3rem;height:2.4rem}
.egaliseur span{width:.45rem;height:30%;background:linear-gradient(#ff4fa3,#7b5cff);border-radius:.15rem;animation:eq 1.1s ease-in-out infinite alternate}
.egaliseur span:nth-child(2){animation-delay:-.3s}.egaliseur span:nth-child(3){animation-delay:-.7s}.egaliseur span:nth-child(4){animation-delay:-.15s}.egaliseur span:nth-child(5){animation-delay:-.5s}.egaliseur span:nth-child(6){animation-delay:-.9s}.egaliseur span:nth-child(7){animation-delay:-.4s}
@keyframes eq{0%{height:20%}100%{height:100%}}
@media (max-width:62rem){.apercu-galerie{grid-template-columns:repeat(3,1fr)}}
@media (max-width:48rem){.liens .btn{flex:1 1 100%;justify-content:center}.sous{margin-top:-.75rem}}
h2 a{text-decoration:none}h2 a:hover{color:#ffd23f}