/*
Theme Name: Banco Arcade
Theme URI: https://banco.example
Author: Flo
Description: Theme bloc WordPress pour comparateur de casinos en ligne, direction Arcade (pop retro machine a sous, neo-brutaliste). Composants Gutenberg fournis en patterns. Optimise affiliation.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: banco-arcade
*/

:root{
  --teal:#114744;--teal-2:#0C302E;--ink:#06211F;
  --red:#FF4D3D;--yellow:#FFD23F;--pink:#FF5DA2;--mint:#27E6A4;--sky:#3DC2FF;
  --edge:#06211F;--white:#FFFFFF;--cloud:#F4FBF8;--muted:#A8CEC8;
  --hard:5px 5px 0 var(--edge);--hard-lg:7px 7px 0 var(--edge);
  --arc-pad:clamp(1.15rem,4vw,2.5rem);--arc-sect:clamp(3.2rem,6.5vw,5.5rem);
}

/* ---- base globale (chrome du site) ---- */
body{margin:0;background:var(--teal);color:var(--white);font-family:"DM Sans",system-ui,sans-serif;
  font-size:clamp(15px,1.05vw,16.5px);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  background-image:radial-gradient(rgba(255,255,255,.05) 1.4px,transparent 1.4px);background-size:22px 22px}
.arc *{box-sizing:border-box}
.arc a{color:inherit;text-decoration:none}
.arc h1,.arc h2,.arc h3{margin:0;font-family:"Bungee",system-ui,sans-serif;font-weight:400;line-height:1.02;letter-spacing:0}
.arc p{margin:0}
.arc .tnum{font-variant-numeric:tabular-nums lining-nums}
.arc .wrap{max-width:1180px;margin:0 auto;padding-inline:var(--arc-pad)}
.arc .eyebrow{font-family:"Bungee";font-size:.7rem;letter-spacing:.04em;color:var(--yellow);display:inline-flex;align-items:center;gap:.6em;text-transform:uppercase}
.arc :focus-visible{outline:3px solid var(--sky);outline-offset:3px}

/* ---- boutons ---- */
.arc .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:"Bungee";font-size:.82rem;
  padding:.8em 1.4em;cursor:pointer;color:var(--ink);background:var(--yellow);border:3px solid var(--edge);border-radius:14px;
  box-shadow:var(--hard);transition:transform .1s ease,box-shadow .1s ease;text-transform:uppercase;text-decoration:none}
.arc .btn:hover{transform:translate(-2px,-2px);box-shadow:var(--hard-lg)}
.arc .btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--edge)}
.arc .btn--red{background:var(--red);color:#fff}
.arc .btn--pink{background:var(--pink);color:#fff}
.arc .btn--white{background:var(--white)}
.arc .btn--sm{padding:.6em 1em;font-size:.7rem;border-width:2px;box-shadow:3px 3px 0 var(--edge)}
.arc .btn--sm:hover{box-shadow:5px 5px 0 var(--edge)}

/* ---- barre utilitaire ---- */
.arc .util{background:var(--ink);font-size:.78rem;color:var(--muted)}
.arc .util .wrap{display:flex;align-items:center;gap:1.1rem;padding-block:.5rem;flex-wrap:wrap}
.arc .util .right{margin-left:auto;display:flex;align-items:center;gap:1.1rem}
.arc .b18{display:inline-flex;align-items:center;gap:.3em;background:var(--red);color:#fff;font-family:"Bungee";font-size:.66rem;padding:.15em .5em;border-radius:6px}
.arc .util a:hover{color:#fff}
.arc .blink{width:8px;height:8px;border-radius:50%;background:var(--mint);animation:arcblink 1.2s infinite}
@keyframes arcblink{50%{opacity:.3}}

/* ---- nav ---- */
.arc .nav{position:sticky;top:0;z-index:40;background:var(--teal);border-bottom:3px solid var(--edge)}
.arc .nav .wrap{display:flex;align-items:center;gap:1.4rem;padding-block:.85rem}
.arc .brand{display:flex;align-items:center;gap:.55rem;font-family:"Bungee";font-size:1.4rem;color:var(--yellow)}
.arc .brand .mark{width:38px;height:38px;background:var(--red);border:3px solid var(--edge);border-radius:10px;display:grid;place-items:center;color:#fff;font-size:1rem;box-shadow:3px 3px 0 var(--edge);transform:rotate(-4deg)}
.arc .menu{display:flex;gap:1.3rem;font-weight:700;font-size:.92rem}
.arc .menu a{color:var(--cloud);transition:color .12s}.arc .menu a:hover{color:var(--yellow)}
.arc .nav .right{margin-left:auto;display:flex;align-items:center;gap:1rem}
.arc .burger{display:none;width:40px;height:40px;background:var(--white);border:3px solid var(--edge);border-radius:10px;place-items:center;color:var(--ink);box-shadow:3px 3px 0 var(--edge)}

/* ---- symboles slot ---- */
.arc .sym{display:inline-grid;place-items:center;border:3px solid var(--edge);border-radius:12px;box-shadow:var(--hard);font-family:"Bungee"}
.arc .sym-7{width:56px;height:56px;background:var(--red);color:#fff;font-size:1.6rem;transform:rotate(-6deg)}
.arc .sym-c{width:54px;height:54px;background:var(--pink);transform:rotate(5deg);position:relative}
.arc .sym-c::before,.arc .sym-c::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;background:var(--red);border:2px solid var(--edge);bottom:9px}
.arc .sym-c::before{left:9px}.arc .sym-c::after{right:9px}

/* ---- hero ---- */
.arc .hero{position:relative;border-bottom:3px solid var(--edge);overflow:hidden}
.arc .hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.8rem,4vw,3.5rem);align-items:center;padding-block:clamp(2.6rem,5vw,4.5rem)}
.arc .hero-kicker{display:flex;align-items:center;gap:.9rem;margin-bottom:1.3rem;flex-wrap:wrap}
.arc .stamp{font-size:.74rem;color:var(--ink);background:var(--mint);border:2px solid var(--edge);border-radius:8px;padding:.25em .6em;font-weight:700}
.arc h1{font-size:clamp(2.3rem,5.2vw,4rem);text-transform:uppercase}
.arc h1 .hl,.arc h2 .hl{color:var(--yellow);text-shadow:3px 3px 0 var(--edge);display:inline-block}
.arc .lead{margin-top:1.4rem;max-width:34ch;color:var(--cloud);font-size:1.08rem;font-weight:500}
.arc .hero-cta{margin-top:1.9rem;display:flex;gap:.9rem;align-items:center;flex-wrap:wrap}
.arc .hero-deco{position:absolute;display:flex;gap:1rem;right:-10px;top:14px;opacity:.9}
.arc .jackpot{margin-top:2.2rem;display:inline-flex;align-items:center;gap:.8rem;background:var(--ink);border:3px solid var(--edge);border-radius:14px;padding:.8rem 1.2rem;box-shadow:var(--hard)}
.arc .jackpot .jl{font-size:.68rem;font-family:"Bungee";color:var(--mint);text-transform:uppercase}
.arc .jackpot .jn{font-family:"Bungee";font-size:1.5rem;color:var(--yellow)}

/* ---- machine (carte N1) ---- */
.arc .machine{position:relative;background:var(--white);color:var(--ink);border:3px solid var(--edge);border-radius:20px;box-shadow:var(--hard-lg);padding:1.5rem;transform:rotate(-1deg)}
.arc .mtab{position:absolute;top:-20px;left:50%;transform:translateX(-50%) rotate(-1deg);background:var(--red);color:#fff;font-family:"Bungee";font-size:.74rem;padding:.45em 1.1em;border:3px solid var(--edge);border-radius:12px;box-shadow:3px 3px 0 var(--edge);white-space:nowrap;text-transform:uppercase}
.arc .m-head{display:flex;align-items:center;gap:.9rem;margin:.5rem 0 1.1rem}
.arc .m-logo{width:52px;height:52px;flex:0 0 auto;display:grid;place-items:center;font-family:"Bungee";color:#fff;font-size:1.2rem;background:var(--pink);border:3px solid var(--edge);border-radius:12px}
.arc .m-name{font-family:"Bungee";font-size:1.2rem;line-height:1}
.arc .m-lic{font-size:.74rem;color:#4a6b66;display:flex;align-items:center;gap:.35em;margin-top:.3em;font-weight:600}
.arc .m-score{margin-left:auto;text-align:center;background:var(--yellow);border:3px solid var(--edge);border-radius:12px;padding:.3rem .55rem;box-shadow:3px 3px 0 var(--edge)}
.arc .m-score .n{font-family:"Bungee";font-size:1.35rem;line-height:1}
.arc .m-score .l{font-size:.56rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.arc .reels{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5rem;background:var(--ink);border:3px solid var(--edge);border-radius:14px;padding:.7rem;margin-bottom:1rem}
.arc .reel{background:var(--cloud);border:2px solid var(--edge);border-radius:8px;height:64px;display:grid;place-items:center;font-family:"Bungee";font-size:1.8rem;color:var(--ink)}
.arc .reel.r2{color:var(--red)}.arc .reel.r3{color:var(--pink)}
.arc .m-bonus{text-align:center;margin-bottom:.9rem}
.arc .m-bonus .k{font-size:.66rem;font-family:"Bungee";color:#4a6b66;text-transform:uppercase;margin-bottom:.3rem}
.arc .m-bonus .v{font-family:"Bungee";font-size:1.55rem;color:var(--red);line-height:1.05}
.arc .m-code{display:inline-flex;align-items:center;gap:.4em;margin-top:.5rem;font-family:"Bungee";font-size:.68rem;background:var(--mint);border:2px solid var(--edge);border-radius:8px;padding:.3em .6em}
.arc .countdown{text-align:center;font-size:.74rem;color:#4a6b66;font-weight:700;margin-bottom:.9rem}
.arc .countdown b{font-family:"Bungee";color:var(--red);margin-left:.3em}
.arc .m-cta .btn{width:100%}

/* ---- gains live ---- */
.arc .wins{background:var(--ink);border-bottom:3px solid var(--edge);overflow:hidden;position:relative}
.arc .wins .wl{position:absolute;left:0;top:0;bottom:0;z-index:3;display:flex;align-items:center;gap:.4em;background:var(--mint);color:var(--ink);padding:0 1rem 0 var(--arc-pad);font-family:"Bungee";font-size:.66rem;text-transform:uppercase}
.arc .wins-track{display:flex;gap:2rem;white-space:nowrap;padding:.65rem 0 .65rem 11rem;width:max-content;animation:arcroll 32s linear infinite}
.arc .wins:hover .wins-track{animation-play-state:paused}
.arc .winx{font-size:.82rem;color:var(--muted);font-weight:600}.arc .winx b{font-family:"Bungee";color:var(--yellow);font-size:.82rem}.arc .winx u{text-decoration:none;color:var(--mint)}
@keyframes arcroll{to{transform:translateX(-50%)}}

/* ---- sections ---- */
.arc .section{padding-block:var(--arc-sect)}
.arc .head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:2.2rem;flex-wrap:wrap}
.arc .head h2{font-size:clamp(1.7rem,3.4vw,2.6rem);max-width:18ch;text-transform:uppercase}
.arc .head p{color:var(--cloud);max-width:38ch;font-weight:500}

.arc .filters{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1.6rem}
.arc .chip{font-family:"Bungee";font-size:.72rem;padding:.5em .9em;border-radius:10px;border:2px solid var(--edge);color:var(--ink);background:var(--cloud);cursor:pointer;box-shadow:2px 2px 0 var(--edge);transition:transform .1s}
.arc .chip:hover{transform:translate(-1px,-1px)}
.arc .chip[aria-pressed="true"]{background:var(--yellow)}

/* ---- classement ---- */
.arc .list{display:flex;flex-direction:column;gap:1.1rem}
.arc .row{display:grid;grid-template-columns:58px 1.6fr 1fr 1.5fr auto;align-items:center;gap:1.2rem;
  padding:1.1rem 1.2rem;background:var(--cloud);color:var(--ink);border:3px solid var(--edge);border-radius:16px;box-shadow:var(--hard);position:relative;transition:transform .1s,box-shadow .1s}
.arc .row:hover{transform:translate(-2px,-2px);box-shadow:var(--hard-lg)}
.arc .row--top{background:var(--yellow)}
.arc .rk{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-family:"Bungee";font-size:1.1rem;color:#fff;border:3px solid var(--edge);box-shadow:3px 3px 0 var(--edge);margin:auto}
.arc .rk-1{background:var(--red)}.arc .rk-2{background:var(--pink)}.arc .rk-3{background:var(--sky)}.arc .rk-n{background:var(--ink)}
.arc .op{display:flex;align-items:center;gap:.85rem;min-width:0}
.arc .op .logo{width:46px;height:46px;flex:0 0 auto;display:grid;place-items:center;font-family:"Bungee";color:#fff;font-size:1.1rem;border:3px solid var(--edge);border-radius:12px}
.arc .op .nm{font-family:"Bungee";font-size:1rem;line-height:1.05}
.arc .op .ll{font-size:.72rem;color:#4a6b66;display:flex;align-items:center;gap:.35em;margin-top:.2em;font-weight:600}
.arc .sc{display:flex;flex-direction:column;gap:.35rem}
.arc .sc .scn{font-family:"Bungee";font-size:1.25rem;line-height:1}
.arc .sc .scn span{font-size:.7rem;color:#4a6b66}
.arc .bar{height:8px;background:#d8ece7;border:2px solid var(--edge);border-radius:6px;overflow:hidden}
.arc .bar i{display:block;height:100%;background:var(--mint)}
.arc .deal .db{font-family:"Bungee";font-size:.92rem;line-height:1.15}
.arc .deal .db u{text-decoration:none;color:var(--red)}
.arc .tags{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.5rem}
.arc .tag{font-size:.66rem;font-weight:700;color:var(--ink);border:2px solid var(--edge);border-radius:20px;padding:.18em .55em;background:#fff}
.arc .tag--hot{background:var(--pink);color:#fff}
.arc .act{display:flex;flex-direction:column;gap:.5rem;align-items:stretch;min-width:124px}
.arc .act .lk{font-size:.72rem;text-align:center;color:var(--ink);text-decoration:underline;font-weight:700}

/* ---- methodo ---- */
.arc .crit{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.arc .crit>div{background:var(--cloud);color:var(--ink);border:3px solid var(--edge);border-radius:16px;box-shadow:var(--hard);padding:1.4rem}
.arc .crit .ic{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;color:#fff;border:3px solid var(--edge);box-shadow:3px 3px 0 var(--edge);margin-bottom:1rem}
.arc .crit>div:nth-child(1) .ic{background:var(--red)}.arc .crit>div:nth-child(2) .ic{background:var(--sky)}.arc .crit>div:nth-child(3) .ic{background:var(--pink)}.arc .crit>div:nth-child(4) .ic{background:var(--mint)}
.arc .crit h3{font-family:"Bungee";font-size:.92rem;margin-bottom:.5rem;text-transform:uppercase}
.arc .crit p{font-size:.86rem;color:#4a6b66;margin-bottom:1rem;font-weight:500}
.arc .crit .stat{font-size:.74rem;color:#4a6b66;border-top:2px dashed #c4ded8;padding-top:.8rem;font-weight:600}
.arc .crit .stat b{display:block;font-family:"Bungee";font-size:1.3rem;color:var(--ink)}

/* ---- jeu responsable ---- */
.arc .resp{background:var(--ink);border-block:3px solid var(--edge)}
.arc .resp .wrap{display:grid;grid-template-columns:auto 1fr auto;gap:2rem;align-items:center;padding-block:2rem}
.arc .resp .big18{font-family:"Bungee";font-size:1.9rem;color:#fff;background:var(--red);border:3px solid var(--edge);border-radius:50%;width:88px;height:88px;display:grid;place-items:center;flex:0 0 auto;box-shadow:var(--hard)}
.arc .resp h3{font-family:"Bungee";font-size:1.05rem;margin-bottom:.5rem;text-transform:uppercase}
.arc .resp p{font-size:.9rem;color:var(--muted);max-width:58ch;font-weight:500}
.arc .resp .tel{text-align:right;flex:0 0 auto}.arc .resp .tel .num{font-family:"Bungee";font-size:1.25rem;color:var(--mint)}
.arc .resp .tel small{display:block;font-size:.72rem;color:var(--muted)}

/* ---- footer ---- */
.arc .site-footer{background:var(--teal-2);padding-top:var(--arc-sect);border-top:3px solid var(--edge)}
.arc .fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2rem;padding-bottom:2.4rem;border-bottom:2px solid rgba(255,255,255,.12)}
.arc .fbrand p{font-size:.86rem;color:var(--muted);max-width:38ch;margin-top:1rem;font-weight:500}
.arc .fcol h4{font-family:"Bungee";font-size:.7rem;color:var(--yellow);margin:0 0 1rem;text-transform:uppercase}
.arc .fcol a{display:block;font-size:.88rem;color:var(--muted);padding:.28rem 0;font-weight:600}.arc .fcol a:hover{color:#fff}
.arc .disclaimer{padding:1.8rem 0;font-size:.78rem;color:var(--muted);line-height:1.7;border-bottom:2px solid rgba(255,255,255,.12);max-width:92ch;font-weight:500}
.arc .disclaimer b{color:#fff}
.arc .fbottom{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.4rem 0;flex-wrap:wrap;font-size:.78rem;color:var(--muted);font-weight:600}
.arc .fbottom .lic{display:flex;gap:.7rem;align-items:center}.arc .pill{border:2px solid rgba(255,255,255,.2);border-radius:20px;padding:.15em .6em;font-size:.7rem}

/* ---- sticky mobile ---- */
.arc .sticky{display:none;position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--white);color:var(--ink);border-top:3px solid var(--edge);padding:.7rem var(--arc-pad);align-items:center;gap:.9rem}
.arc .sticky .logo{width:38px;height:38px;display:grid;place-items:center;font-family:"Bungee";color:#fff;background:var(--pink);border:2px solid var(--edge);border-radius:10px;flex:0 0 auto}
.arc .sticky .t b{font-family:"Bungee";font-size:.82rem;display:block;line-height:1.05}.arc .sticky .t small{font-size:.7rem;color:#4a6b66;font-weight:700}
.arc .sticky .si{display:flex;align-items:center;gap:.6rem;min-width:0}.arc .sticky .btn{margin-left:auto}

/* ---- chapo (intro / maillage en prose) ---- */
.arc .chapo{padding-block:clamp(2rem,4vw,3rem)}
.arc .chapo .wrap{max-width:920px}
.arc .chapo p{font-size:clamp(1.05rem,1.6vw,1.25rem);line-height:1.7;color:var(--cloud);font-weight:500}
.arc .chapo a{color:var(--yellow);font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:rgba(255,210,63,.55)}
.arc .chapo a:hover{text-decoration-color:var(--yellow)}

/* ---- univers du cocon (hubs N+1) ---- */
.arc .univers{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.arc .uni-card{background:var(--cloud);color:var(--ink);border:3px solid var(--edge);border-radius:16px;box-shadow:var(--hard);padding:1.3rem;display:flex;flex-direction:column;gap:.45rem;transition:transform .1s,box-shadow .1s;text-decoration:none}
.arc .uni-card:hover{transform:translate(-2px,-2px);box-shadow:var(--hard-lg)}
.arc .uni-ic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;color:#fff;border:3px solid var(--edge);box-shadow:3px 3px 0 var(--edge);margin-bottom:.3rem}
.arc .uni-card h3{font-family:"Bungee";font-size:.9rem;line-height:1.18;text-transform:none}
.arc .uni-card p{font-size:.84rem;color:#4a6b66;font-weight:500}
.arc .uni-card .go{margin-top:auto;padding-top:.7rem;font-family:"Bungee";font-size:.68rem;color:var(--red);display:flex;align-items:center;gap:.4em}
.arc .uni-card .go svg{transition:transform .12s}
.arc .uni-card:hover .go svg{transform:translateX(3px)}
.arc .list-ctas{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.6rem}

/* ---- responsive ---- */
@media(max-width:980px){
  .arc .hero .wrap{grid-template-columns:1fr;gap:2.2rem}
  .arc .hero-deco{display:none}
  .arc .univers{grid-template-columns:1fr 1fr}
  .arc .crit{grid-template-columns:1fr 1fr}
  .arc .fgrid{grid-template-columns:1fr 1fr}
  .arc .menu,.arc .nav .right .btn{display:none}
  .arc .burger{display:grid}
  .arc .machine{transform:none}
}
@media(max-width:720px){
  .arc .row{grid-template-columns:44px 1fr auto;gap:.8rem;row-gap:.9rem}
  .arc .row .sc{grid-column:2;grid-row:2}
  .arc .row .deal{grid-column:1/-1;grid-row:3;border-top:2px dashed #c4ded8;padding-top:.9rem}
  .arc .row .act{grid-column:1/-1;grid-row:4;flex-direction:row}
  .arc .row .act .btn{flex:1}
  .arc .crit{grid-template-columns:1fr}
  .arc .univers{grid-template-columns:1fr}
  .arc .fgrid{grid-template-columns:1fr}
  .arc .resp .wrap{grid-template-columns:1fr;text-align:center;gap:1.3rem;justify-items:center}
  .arc .resp .tel{text-align:center}
  .arc .resp p{margin-inline:auto}
  .arc .sticky{display:flex}
  body{padding-bottom:76px}
  .arc .wins-track{padding-left:9rem}
  .arc .wins .wl{padding-left:var(--arc-pad)}
}
@media(prefers-reduced-motion:reduce){
  .arc .wins-track,.arc .blink{animation:none}
}