/* Foot Atlas · direction « atlas de nuit » : bandeaux et jeu vert nuit, pages sur papier, titres d'affiche.
   Chargé après app.css. Le jeu reprend tous les jetons de app.css : seuls leurs valeurs changent dans #v-game. */
:root{
  --night:#0C2620; --night-2:#123329; --night-3:#1B4638; --chalk:#F3F1E8; --mist:#B3C7BE;
  --mint:#7CE8B5; --gold:#F5C451;
  --dial-track:#E2DED4; --dial-fill:#1F6B52; --dial-done:#134734;
  --spring:cubic-bezier(.3,1.5,.5,1);
}
html,body{background:var(--bg);margin:0}

/* ---------- barre du haut ---------- */
.topbar{background:var(--night);border-bottom:1px solid #1E4A3D;color:var(--chalk);padding-block:8px}
.topbar .logo{color:var(--chalk)}
.topbar .logo .wm{font-size:19px;color:var(--chalk)}
.wm svg{transition:transform .9s var(--spring)}
.logo:hover .wm svg{transform:rotate(45deg)}
.topbar nav{position:relative}
.topbar nav ul{position:relative;z-index:1}
.topbar nav a{color:var(--mist);border-radius:999px;padding:8px 16px;transition:color .2s}
.topbar nav a:hover{color:var(--chalk);background:transparent}
.topbar nav a[aria-current="page"]{color:var(--night);background:transparent;box-shadow:none}
.topbar a:focus-visible{outline-color:var(--mint)}
.nav-pill{position:absolute;top:0;left:0;height:100%;width:0;border-radius:999px;background:var(--mint);transition:transform .45s var(--ease),width .45s var(--ease)}

/* ---------- titres et entrées de page ---------- */
.page h1{font:900 clamp(36px,5.6vw,68px)/.96 var(--f-disp);font-stretch:125%;letter-spacing:-.025em;text-transform:uppercase;margin:6px 0 14px}
.page .wrap.narrow h1{font-size:clamp(34px,5vw,52px)}
.lede{font-size:18px;line-height:1.45}
.view.page:not([hidden]) .wrap>*{animation:rise .6s var(--ease) backwards}
.view.page .wrap>:nth-child(2){animation-delay:50ms}
.view.page .wrap>:nth-child(3){animation-delay:100ms}
.view.page .wrap>:nth-child(4){animation-delay:150ms}
.view.page .wrap>:nth-child(5){animation-delay:200ms}
.mode-cards>*{animation:rise .6s var(--ease) backwards}
.mode-cards>:nth-child(2){animation-delay:70ms}
.mode-cards>:nth-child(3){animation-delay:140ms}
.mode-cards>:nth-child(4){animation-delay:210ms}
.mode-cards>:nth-child(5){animation-delay:280ms}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}

/* ---------- boutons ---------- */
.btn{transition:transform .18s var(--ease),background .18s,border-color .18s,color .18s,box-shadow .18s}
.btn:hover:not([disabled]){transform:translateY(-1px)}
.btn:active:not([disabled]){transform:translateY(1px) scale(.98)}
.btn.p:hover:not([disabled]){box-shadow:0 8px 20px rgba(31,107,82,.28)}

/* ---------- accueil : l'ouverture ---------- */
.hero{position:relative;overflow:hidden;background:radial-gradient(90% 120% at 78% 40%,#17473A 0,var(--night) 62%);color:var(--chalk);flex:none}
.hero-in{position:relative;z-index:2;max-width:1120px;margin:0 auto;padding:clamp(40px,7vw,88px) max(20px,env(safe-area-inset-right,0px)) clamp(40px,7vw,88px) max(20px,env(safe-area-inset-left,0px));min-height:clamp(420px,46vw,560px);display:flex;align-items:center;box-sizing:border-box}
.hero-txt{width:min(640px,58%);display:flex;flex-direction:column;gap:18px}
.hero .kicker{color:var(--mint);animation:rise .6s var(--ease) backwards}
.page .hero h1{font-size:clamp(40px,5vw,66px);line-height:.94;margin:0;color:var(--chalk);animation:rise .7s var(--ease) 80ms backwards}
.hero h1 em{display:block;font-style:normal;color:var(--mint)}
.hero-lede{margin:0;font-size:clamp(17px,1.5vw,20px);line-height:1.45;color:#DCE6DF;max-width:30em;animation:rise .7s var(--ease) 160ms backwards}
.hero-lede b{color:var(--chalk);font-weight:800}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;animation:rise .7s var(--ease) 240ms backwards}
.hero-cta .btn{height:54px;padding:0 26px;font-size:16px;display:inline-flex;align-items:center;gap:10px;text-decoration:none;border-radius:999px}
.page .hero a.btn.p{background:var(--mint);border-color:var(--mint);color:var(--night)}
.page .hero a.btn.p::after{content:"→";transition:transform .25s var(--ease)}
.page .hero a.btn.p:hover{background:#9AF0C8;border-color:#9AF0C8;box-shadow:0 10px 30px rgba(124,232,181,.3)}
.page .hero a.btn.p:hover::after{transform:translateX(4px)}
.page .hero a.btn:not(.p){background:transparent;border-color:#4C7F6E;color:var(--chalk)}
.page .hero a.btn:not(.p):hover{border-color:var(--chalk)}
.hero a:focus-visible{outline-color:var(--mint)}
.hero-map{position:absolute;z-index:1;top:0;right:max(0px,calc(50% - 640px));bottom:0;width:min(62%,760px);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);mask-image:linear-gradient(90deg,transparent 0,#000 22%)}
#heroMap{display:block;width:100%;height:100%;overflow:visible}
.hm-grid line{stroke:#2A5A4B;stroke-width:.8;stroke-dasharray:2 5}
.hm-grid text{fill:#6E9A8A;font:600 11px var(--f-num)}
.hm-c{fill:#143329;stroke:#1E4A3D;stroke-width:.8}
.hm-c.on{fill:#1F5345;stroke:#3C7C69;stroke-width:1}
.hm-dot{fill:var(--mint);opacity:.34;transform-box:fill-box;transform-origin:center;animation:dotIn .5s var(--ease) backwards;transition:opacity .4s}
.hm-dot.lit{opacity:1}
@keyframes dotIn{from{opacity:0;transform:scale(0)}}
.hm-crest>g{transform-box:fill-box;transform-origin:center bottom}
.hm-crest.new>g{animation:crestDrop .6s var(--spring) backwards}
.hm-crest.out{opacity:0;transition:opacity .5s}
.hm-ring{fill:none;stroke:var(--mint);stroke-width:2;transform-box:fill-box;transform-origin:center;opacity:0}
.hm-crest.new .hm-ring{animation:ripple 1.1s var(--ease)}
@keyframes crestDrop{from{opacity:0;transform:translateY(-34px) scale(.5)}}
.hero-demo{position:absolute;z-index:3;right:clamp(16px,4%,44px);bottom:clamp(16px,5%,40px);left:26%;display:flex;align-items:center;gap:14px;padding:8px 8px 8px 18px;border-radius:999px;background:rgba(12,38,32,.82);border:1.5px solid #3C7C69;box-shadow:0 14px 40px rgba(0,0,0,.35);transition:border-color .2s,box-shadow .2s}
.hero-demo.ok{border-color:var(--mint);box-shadow:0 0 0 5px rgba(124,232,181,.2),0 14px 40px rgba(0,0,0,.35)}
.hd-input{flex:1;min-width:0;font:600 clamp(15px,1.5vw,18px) var(--f-ui);white-space:nowrap;overflow:hidden;color:var(--chalk)}
.hd-input i{display:inline-block;width:2px;height:1.05em;margin-left:2px;vertical-align:-.15em;background:var(--mint);animation:caret 1s steps(2) infinite}
@keyframes caret{50%{opacity:0}}
.hd-score{flex:none;padding:6px 14px;border-radius:999px;background:var(--night-3);font:500 13px var(--f-num);color:var(--mist);font-variant-numeric:tabular-nums}
.hd-score b{display:inline-block;font-weight:700;font-size:16px;color:var(--chalk)}
.hd-score b.bump{animation:bump .36s var(--ease)}
.hero-rose{position:absolute;z-index:3;top:clamp(14px,4%,32px);right:clamp(14px,4%,40px);width:68px;height:68px}
.hero-rose svg{display:block;width:100%;height:100%;overflow:visible}
.hero-rose circle{fill:rgba(12,38,32,.7);stroke:#3C7C69;stroke-width:1.5}
.hero-rose text{fill:var(--mist);font:700 11px var(--f-num);text-anchor:middle}
.hero-rose .ndl{transform-origin:50px 50px;transition:transform 1s var(--spring)}
.hero-rose .ndl path:first-child{fill:var(--mint)}
.hero-rose .ndl path:last-child{fill:#6E9A8A}

.steps{list-style:none;margin:0 0 36px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px clamp(20px,4vw,48px)}
.steps li{display:flex;flex-direction:column;gap:4px;padding-top:12px;border-top:2px solid var(--text)}
.steps b{font:850 21px/1.1 var(--f-disp);font-stretch:115%}
.steps b span{font:600 13px var(--f-num);color:var(--signal);margin-right:8px;vertical-align:.15em}
.steps p{margin:0;font-size:15px;color:var(--text-2);line-height:1.4}
.home-h2{margin:0 0 10px;font:850 21px/1.1 var(--f-disp);font-stretch:115%;letter-spacing:0;text-transform:none;color:var(--text)}
#v-home .wrap{padding-top:36px}
.hcard{border-radius:18px;transition:transform .25s var(--ease),box-shadow .25s}
.hcard:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(40,36,28,.1)}
.h-defi{background:linear-gradient(135deg,var(--night) 0,var(--night-3) 130%);border-color:var(--night)}
.h-defi .kick{color:var(--mint)}
.h-defi .fine,.h-defi .defi-sub,.defi-score span{color:#C9D6CF}
.h-defi .num-badge{background:var(--night-3);color:var(--chalk)}
.h-defi .btn{border-color:#4C7F6E}
.h-defi .btn.p,.h-defi a.btn.p{background:var(--mint);border-color:var(--mint);color:var(--night)}
.h-defi .btn.p:hover{background:#9AF0C8;border-color:#9AF0C8;box-shadow:0 8px 24px rgba(124,232,181,.28)}
.h-defi a:focus-visible,.h-defi button:focus-visible{outline-color:var(--mint)}
.defi-dots i{border-color:#4C7F6E;border-radius:50%;animation:dotIn .4s var(--spring) backwards}
.defi-dots i:nth-child(2n){animation-delay:60ms}.defi-dots i:nth-child(3n){animation-delay:120ms}.defi-dots i:nth-child(5n){animation-delay:180ms}
.defi-dots i.hi{background:var(--mint)}.defi-dots i.mid{background:var(--gold)}.defi-dots i.lo{background:#4C7F6E}
.share-txt{background:var(--night-3)}
.seen{animation:rise .6s var(--ease) backwards}

/* ---------- cartes de mode ---------- */
.mode-cards{grid-template-columns:repeat(4,minmax(0,1fr))}
.mode-card{padding:0 20px 20px;border-radius:18px;gap:8px;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.mode-card:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(12,38,32,.2);border-color:var(--night-3)}
.mc-art{height:176px;margin:0 -20px 10px;border-radius:0;background:radial-gradient(120% 120% at 70% 20%,#1B4638 0,var(--night) 70%);color:var(--chalk)}
.mc-art svg{transition:transform .5s var(--ease)}
.mode-card:hover .mc-art svg{transform:scale(1.07)}
.mode-card h2{font-size:clamp(22px,2vw,26px);font-stretch:118%;letter-spacing:-.01em}
.mc-tag{line-height:1.4;margin-bottom:8px}
.mc-rec{border-top:0;padding-top:0;margin-bottom:8px}
.mc-cta{align-self:stretch;justify-content:space-between;border-radius:999px;padding:11px 18px}
.mc-cta::after{transition:transform .25s var(--ease)}
.mode-card:hover .mc-cta::after{transform:translateX(5px)}
.fx-seg{fill:none;stroke:var(--mint);stroke-width:11;stroke-dasharray:1 1;animation:segFill 9s var(--ease) infinite both}
.fx-track{fill:none;stroke:#234A3E;stroke-width:11}
@keyframes segFill{0%{stroke-dashoffset:1}12%,100%{stroke-dashoffset:0}}
.fx-star{transform-origin:50px 50px;animation:spin 40s linear infinite}
.fx-star polygon{fill:#4C7F6E}.fx-star polygon:first-child{fill:var(--mint)}
@keyframes spin{to{transform:rotate(360deg)}}
.art-chrono{position:relative}
#artClockRing{position:absolute;inset:0;display:grid;place-items:center}
.art-chrono svg{width:134px;height:134px}
.fx-sweep{fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round;stroke-dasharray:1 1;transform:rotate(-90deg);transform-origin:50px 50px;animation:sweep 12s linear infinite both}
.fx-sweep-bg{fill:none;stroke:#234A3E;stroke-width:3}
@keyframes sweep{to{stroke-dashoffset:1}}
.art-chrono b{position:relative;font:700 32px var(--f-num);letter-spacing:-.05em;color:var(--chalk);font-variant-numeric:tabular-nums}
.art-geo{background:radial-gradient(120% 120% at 70% 20%,#1B4638 0,var(--night) 70%)}
.art-geo::before{display:none}
.art-geo svg{width:100%;height:100%;display:block}
.fx-land{fill:#143329;stroke:#1E4A3D;stroke-width:1}
.fx-land.on{fill:#235A4B;stroke:#3C7C69}
.fx-line{fill:none;stroke:var(--mint);stroke-width:2.5;stroke-dasharray:1 1;animation:geoLine 7s var(--ease) infinite both}
.fx-guess{fill:var(--chalk);stroke:var(--night);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:geoPin 7s var(--spring) infinite both}
.fx-true{fill:var(--mint);transform-box:fill-box;transform-origin:center;animation:geoTrue 7s var(--spring) infinite both}
.fx-km{animation:geoKm 7s var(--ease) infinite both}
.fx-km rect{fill:var(--chalk)}
.fx-km text{fill:var(--night);font:700 13px var(--f-num);text-anchor:middle}
@keyframes geoPin{0%{transform:translateY(-40px);opacity:0}10%,100%{transform:none;opacity:1}}
@keyframes geoLine{0%,14%{stroke-dashoffset:1}34%,100%{stroke-dashoffset:0}}
@keyframes geoTrue{0%,32%{transform:scale(0)}40%,100%{transform:none}}
@keyframes geoKm{0%,36%{opacity:0;transform:translateY(5px)}44%,100%{opacity:1;transform:none}}
.art-paysx{display:block;position:relative;background:radial-gradient(120% 120% at 70% 20%,#1B4638 0,var(--night) 70%)}
.art-paysx svg{position:absolute;inset:14px;width:calc(100% - 28px);height:calc(100% - 28px);overflow:visible;opacity:0;animation:silOn 10s var(--ease) infinite}
.art-paysx path{fill:#235A4B;stroke:var(--mint);stroke-width:1.2;vector-effect:non-scaling-stroke}
.art-paysx svg:nth-child(2){animation-delay:2s}.art-paysx svg:nth-child(3){animation-delay:4s}.art-paysx svg:nth-child(4){animation-delay:6s}.art-paysx svg:nth-child(5){animation-delay:8s}
@keyframes silOn{0%{opacity:0;transform:scale(.92)}4%,18%{opacity:1;transform:none}24%,100%{opacity:0;transform:scale(1.04)}}
/* page Pays */
.mode-cards.five{grid-template-columns:repeat(5,minmax(0,1fr))}
.art-pays{display:block;position:relative;height:190px}
.art-pays svg{position:absolute;inset:16px;width:calc(100% - 32px);height:calc(100% - 32px);overflow:visible}
.art-pays path{fill:#1F5345;stroke:#3C7C69;stroke-width:1;vector-effect:non-scaling-stroke;transition:fill .3s}
.mode-card:hover .art-pays path{fill:#235A4B}
.art-pays circle{fill:var(--mint);opacity:.75;transform-box:fill-box;transform-origin:center;animation:dotIn .5s var(--ease) backwards}
.art-pays em{position:absolute;left:12px;top:10px;font:700 12px var(--f-num);font-style:normal;letter-spacing:.08em;color:var(--mist)}
.pays-card .mc-tag{margin-bottom:2px;font-weight:700;color:var(--text)}
.mode-card ul.divs{font-size:13.5px;line-height:1.5;margin-bottom:6px}

/* ---------- écran de jeu : nuit ---------- */
#v-game{color-scheme:dark;background:var(--night);color:var(--chalk);
  --bg:var(--night);--bg-2:var(--night-2);--card:var(--night-3);--line:#2A5A4B;--line-strong:#4C7F6E;
  --text:var(--chalk);--text-2:var(--mist);--text-dis:#9DB3A9;
  --signal:var(--mint);--signal-hover:#9AF0C8;--signal-press:#5FD9A0;--on-accent:var(--night);--turf:#B5F5D6;
  --ok:#6FE3A9;--err:#FF9AA0;--warn:var(--gold);--alert:#FFA36B;--flood:var(--gold);--sea-ink:var(--mint);
  --sea:#0A211C;--land:#143329;--land-hi:#235A4B;--cty-line:#1E4A3D;--shadow:0 14px 40px rgba(0,0,0,.45);
  --dial-track:#234A3E;--dial-fill:var(--mint);--dial-done:#B5F5D6}
#v-game .geo-lbl text{fill:var(--night)}
#v-game .btn.p{color:var(--night)}
#v-game .btn.p:hover{color:var(--night);box-shadow:0 8px 22px rgba(124,232,181,.25)}
#v-game .p0{--pc:#FF9A5C}#v-game .p1{--pc:#7DB8FF}#v-game .p2{--pc:#7CE8B5}#v-game .p3{--pc:#D9A6F5}
#v-game header{background:var(--night);animation:slideD .5s var(--ease) backwards}
#v-game aside{background:var(--night-2);animation:slideL .6s var(--ease) backwards}
#v-game .mapwrap{animation:fadeIn .7s ease backwards}
@keyframes slideD{from{opacity:0;transform:translateY(-12px)}}
@keyframes slideL{from{opacity:0;transform:translateX(20px)}}
@keyframes fadeIn{from{opacity:0}}
.brand .back{transition:color .2s,transform .2s var(--ease);display:inline-block}
.brand .back:hover{transform:translateX(-3px)}
.brand h1{font-stretch:125%;text-transform:uppercase;letter-spacing:-.01em}
#guess{background:#0A211C;border:2px solid var(--line-strong);border-radius:999px;padding:0 24px;transition:border-color .15s,box-shadow .2s}
#guess:focus{border-color:var(--mint);box-shadow:0 0 0 4px rgba(124,232,181,.18)}
#guess:placeholder-shown:not(:disabled){animation:breath 2.6s ease-in-out infinite}
@keyframes breath{50%{box-shadow:0 0 0 6px rgba(124,232,181,.13)}}
#guess.ok{animation:okFlash .55s var(--ease)}
@keyframes okFlash{0%{box-shadow:0 0 0 0 rgba(124,232,181,.7);background:#1F5345}100%{box-shadow:0 0 0 14px rgba(124,232,181,0)}}
.geobar{border-radius:999px;background:#0A211C;padding:0 8px 0 22px}
.geobar .btn{border-radius:999px}
.stat span{font-variant-numeric:tabular-nums}
.cty{transition:fill .5s}
.cty.flash{fill:#3C9477!important;transition:none}
.mk .halo{opacity:.4}
.inset rect{fill:rgba(255,255,255,.04)}
.mk.new .badge{animation:crestDrop .6s var(--spring)}
.mk.new .halo{animation:bloom 1s var(--ease)}
@keyframes bloom{0%{opacity:.9;r:14px}100%{opacity:.4}}
.toast{background:var(--card);border-color:var(--line-strong);box-shadow:var(--shadow);transition:opacity .35s}
.toast.in{animation:toastIn .5s var(--spring)}
@keyframes toastIn{from{transform:translate(-50%,18px) scale(.9)}}
.recent .rc:first-child{animation:listIn .45s var(--ease)}
@keyframes listIn{from{opacity:0;transform:translateX(-10px)}}
.crow{transition:background .2s}
#geocard,#peek{animation:rise .3s var(--ease)}
.ctrls button{background:var(--card);border-radius:50%;transition:transform .18s var(--ease),border-color .18s}
.ctrls button:hover{transform:scale(1.08)}
.ctrls button:active{transform:scale(.94)}
.howto summary{cursor:pointer;font:700 13px var(--f-ui);color:var(--text-2);padding:8px 0}
.howto summary:hover{color:var(--text)}
.sheet-bg{animation:fadeIn .2s ease}
.sheet{border-radius:18px;animation:sheetIn .35s var(--spring)}
.fx-burst{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:40}

@media (max-width:1040px){.mode-cards,.mode-cards.five{grid-template-columns:repeat(6,minmax(0,1fr))}
  .mode-cards>*{grid-column:span 3}.mode-cards.five>*{grid-column:span 2}.mode-cards.five>:nth-child(n+4){grid-column:span 3}}
@media (max-width:820px){
  .hero-in{display:block;min-height:0;padding-bottom:24px}
  .hero-txt{width:100%}
  .hero-map{position:relative;top:auto;right:auto;bottom:auto;width:100%;height:clamp(320px,80vw,460px);-webkit-mask-image:none;mask-image:none}
  .hero-demo{left:16px;right:16px}
  .steps{grid-template-columns:minmax(0,1fr)}
  .page .hero h1{font-size:min(8.8vw,60px)}
  .brand small{display:none}
  .topbar nav a{padding:7px 12px}
}
@media (max-width:640px){.mode-cards,.mode-cards.five{grid-template-columns:minmax(0,1fr)}.mode-cards>*,.mode-cards.five>*,.mode-cards.five>:nth-child(n+4){grid-column:auto}.mc-art{height:150px}.art-pays{height:170px}}
@media (prefers-reduced-motion:reduce){
  .art-paysx svg:first-child{opacity:1;animation:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
.sheet a{color:var(--signal)}

/* ---------- barre du haut : son ---------- */
.topbar nav{margin-left:auto}
.snd{flex:none;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;border:1px solid transparent;background:transparent;color:var(--mist);cursor:pointer;transition:color .2s,background .2s,transform .18s var(--ease)}
.topbar .snd:hover{color:var(--chalk);background:var(--night-3)}
.snd:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.snd .m{display:none}.snd.off .m{display:block}.snd.off .w{display:none}
.ctrls .snd{width:38px;height:38px;background:var(--card);border-color:var(--line-strong);color:var(--text)}

/* ---------- barre de saisie : indice, passer ---------- */
.fieldrow{display:flex;align-items:center;gap:8px;min-width:0}
.fieldrow>#guess,.fieldrow>.geobar{flex:1;min-width:0;box-sizing:border-box}
#nextBtn{display:none;height:48px;border-radius:999px;white-space:nowrap}
body.quiz #nextBtn{display:inline-flex;align-items:center}
.hintb{position:relative;flex:none;width:52px;height:52px;display:grid;place-items:center;border-radius:50%;border:2px solid var(--gold);background:transparent;color:var(--gold);cursor:pointer;transition:transform .18s var(--ease),background .18s,color .18s,opacity .2s}
.hintb b{position:absolute;right:-5px;top:-5px;min-width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:var(--gold);color:var(--night);font:700 12px var(--f-num)}
.hintb:hover:not([disabled]){background:var(--gold);color:var(--night);transform:scale(1.06)}
.hintb:hover:not([disabled]) b{background:var(--chalk)}
.hintb:active:not([disabled]){transform:scale(.94)}
.hintb[disabled]{opacity:.42;cursor:not-allowed}
.hintb:focus-visible{outline:2px solid var(--chalk);outline-offset:3px}
.hint-note{margin:0;width:100%;color:var(--gold)}
.hint-zone{fill:rgba(245,196,81,.16);stroke:var(--gold);stroke-width:2;stroke-dasharray:6 5;vector-effect:non-scaling-stroke;pointer-events:none;animation:zone 2.2s ease-in-out infinite}
@keyframes zone{50%{fill:rgba(245,196,81,.3)}}
.cty.hintc{fill:#7A6426!important;stroke:var(--gold)!important;stroke-width:1.5}
.newc{flex:none;padding:2px 8px;border-radius:999px;background:var(--gold);color:var(--night);font:700 10px var(--f-num);letter-spacing:.04em;white-space:nowrap}

/* ---------- Qui suis-je, Stade ---------- */
body.quiz .onlygeo{display:block}
body.quiz .nogeo{display:none!important}
body.quiz .howto{display:none}
body.quiz #geocard{width:min(400px,calc(100% - 76px));max-height:calc(100% - 24px);overflow-y:auto;box-sizing:border-box}
.q-ask{font:850 20px/1.1 var(--f-disp);font-stretch:112%}
.clues{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.clues li{padding:9px 12px;border-radius:10px;font-size:15px;line-height:1.3}
.clues .on{background:var(--bg-2);color:var(--text);font-weight:600}
.clues .last{background:var(--mint);color:var(--night);animation:clueIn .45s var(--spring)}
.clues .off{border:1px dashed var(--line-strong);color:var(--text-dis);font-size:13px;padding-block:6px}
@keyframes clueIn{from{transform:translateX(-14px) scale(.96);opacity:0}}

/* ---------- illustrations des nouveaux modes ---------- */
.art-champ ol{list-style:none;margin:0;padding:0;width:72%;display:flex;flex-direction:column;gap:7px}
.art-champ li{display:grid;grid-template-columns:16px 1fr;gap:8px;align-items:center;font:700 12px var(--f-num);color:var(--mist);animation:rowIn 8s var(--ease) infinite both}
.art-champ i{display:block;height:13px;width:var(--w);border-radius:7px;background:var(--mint)}
.art-champ li:first-child i{background:var(--gold)}
@keyframes rowIn{0%{opacity:0;transform:translateX(-14px)}8%,100%{opacity:1;transform:none}}
.art-qui{grid-template-columns:auto minmax(0,1fr);gap:14px;padding:0 18px;justify-content:start}
.art-qui b{font:900 92px/1 var(--f-disp);font-stretch:125%;color:var(--mint);animation:quiPulse 3.2s ease-in-out infinite}
@keyframes quiPulse{50%{transform:scale(1.07) rotate(-4deg)}}
.art-qui ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;min-width:0;font:600 12px var(--f-ui)}
.art-qui li{padding:5px 9px;border-radius:7px;background:var(--night-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:rowIn 8s var(--ease) infinite both}
.art-qui li:nth-child(2){animation-delay:1.2s}.art-qui li:nth-child(3){animation-delay:2.4s}
.art-stade svg{width:86%;height:auto;display:block}
.fx-bowl{fill:#143329;stroke:#3C7C69;stroke-width:1.5}
.fx-stand{fill:#0C2620;stroke:#2A5A4B}
.fx-pitch{fill:#2C7A5E}
.fx-lines{fill:none;stroke:var(--chalk);stroke-width:1.2;opacity:.8}
.fx-lights circle{fill:var(--gold);animation:lights 2.4s ease-in-out infinite}
.fx-lights circle:nth-child(2n){animation-delay:.8s}
@keyframes lights{50%{opacity:.35}}
.art-multi ul{list-style:none;margin:0;padding:0;display:flex;gap:10px}
.art-multi li{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:800 16px var(--f-ui);color:var(--night);background:var(--pc);opacity:.45;animation:turn 4.8s linear infinite}
.art-multi .p0{--pc:#FF9A5C}.art-multi .p1{--pc:#7DB8FF}.art-multi .p2{--pc:#7CE8B5}.art-multi .p3{--pc:#D9A6F5}
@keyframes turn{0%,24%{opacity:1;transform:translateY(-5px) scale(1.12)}26%,100%{opacity:.45;transform:none}}
.mode-cards.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.lg-card .art-pays{height:136px}

/* ---------- écran de fin ---------- */
.endbg{position:fixed;inset:0;z-index:18;display:flex;padding:16px;overflow-y:auto;background:rgba(6,20,16,.66);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:fadeIn .25s ease}
.endcard{margin:auto;color-scheme:dark;width:min(500px,100%);box-sizing:border-box;padding:clamp(20px,4vw,30px);border-radius:22px;background:linear-gradient(160deg,var(--night-3) 0,var(--night) 70%);border:1px solid #3C7C69;color:var(--chalk);box-shadow:0 28px 70px rgba(0,0,0,.5);display:flex;flex-direction:column;gap:12px;animation:endIn .55s var(--spring)}
@keyframes endIn{from{opacity:0;transform:translateY(28px) scale(.94)}}
.endcard .kick{color:var(--mint);margin:0}
.endcard h2{margin:0;font:900 clamp(28px,6vw,40px)/1 var(--f-disp);font-stretch:125%;text-transform:uppercase;letter-spacing:-.02em;text-wrap:balance}
.end-score{display:flex;align-items:baseline;gap:10px}
.end-score b{font:700 clamp(58px,14vw,84px)/1 var(--f-num);letter-spacing:-.06em;color:var(--mint);font-variant-numeric:tabular-nums}
.end-score span{font:500 15px var(--f-num);color:var(--mist)}
.end-rec{margin:0;align-self:flex-start;padding:5px 14px;border-radius:999px;background:var(--gold);color:var(--night);font:800 14px var(--f-ui);animation:endIn .6s var(--spring) .25s backwards}
.end-stats{margin:0;display:flex;flex-wrap:wrap;gap:8px}
.end-stats div{flex:1 1 104px;padding:9px 12px;border-radius:12px;background:rgba(255,255,255,.06)}
.end-stats dt{font:600 10px var(--f-num);letter-spacing:.08em;text-transform:uppercase;color:var(--mist)}
.end-stats dd{margin:3px 0 0;font:700 15px/1.2 var(--f-ui)}
.end-badges ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px}
.end-badges .bdg{background:rgba(255,255,255,.06);color:var(--chalk)}.end-badges .bdg small{color:var(--mist)}
.end-note{margin:0;color:var(--mist);font-size:14px}
.end-miss{border-top:1px solid #2A5A4B;padding-top:8px}
.end-miss summary{cursor:pointer;font:700 14px var(--f-ui);padding:4px 0}
.end-miss p{margin:6px 0 0;max-height:150px;overflow-y:auto;font-size:13px;line-height:1.5;color:var(--mist)}
.end-miss .ml{color:var(--chalk);text-decoration-color:#4C7F6E}
.end-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.end-btns .btn{flex:1 1 auto;height:46px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border-radius:999px;background:transparent;color:var(--chalk);border-color:#4C7F6E;white-space:nowrap}
.end-btns .btn:hover{border-color:var(--chalk)}
.end-btns .btn.p,.end-btns .btn.p:hover{flex-basis:100%;background:var(--mint);border-color:var(--mint);color:var(--night)}
.end-btns :focus-visible,.end-miss :focus-visible{outline-color:var(--mint)}

/* ---------- profil : série et badges ---------- */
.pf-extra{display:flex;flex-direction:column;gap:22px;margin-bottom:26px}
.pf-streak{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;padding:20px 22px;border-radius:18px;background:linear-gradient(135deg,var(--night) 0,var(--night-3) 130%);color:var(--chalk)}
.st-n{display:flex;flex-direction:column;line-height:1}
.st-n b{font:700 58px/1 var(--f-num);letter-spacing:-.06em;color:var(--gold)}
.st-n span{font:600 11px var(--f-num);letter-spacing:.06em;text-transform:uppercase;color:var(--mist);margin-top:4px}
.st-week{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:6px}
.st-week p{margin:0;font-size:15px}
.st-week small{font:500 12px var(--f-num);color:var(--mist)}
.st-week ol{list-style:none;margin:0;padding:0;display:flex;gap:6px}
.st-week li{width:24px;height:24px;border-radius:50%;border:1.5px dashed #4C7F6E}
.st-week li.on{background:var(--gold);border:0}
.st-week li.now{outline:2px solid var(--chalk);outline-offset:2px}
.pf-streak a.btn.p,.page .pf-streak a.btn.p{display:inline-flex;align-items:center;height:46px;padding:0 20px;border-radius:999px;background:var(--mint);border-color:var(--mint);color:var(--night);text-decoration:none}
.streak-chip{padding:3px 10px;border-radius:999px;background:var(--gold);color:var(--night);font:700 12px var(--f-num);white-space:nowrap}
.hc-right{display:inline-flex;gap:6px;align-items:center}
.bdg-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.bdg{height:100%;box-sizing:border-box;display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:12px;padding:12px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.bdg>.b-ic{grid-row:1/4;align-self:center}
.bdg b{font:800 15px/1.2 var(--f-ui)}
.bdg small{font-size:12.5px;line-height:1.3;color:var(--text-2)}
.b-ic{width:48px;height:54px;display:grid;place-items:center;font:800 14px var(--f-num);color:var(--night);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:#D8D3C6}
.bronze .b-ic,.b-ic.bronze{background:linear-gradient(135deg,#E8B07A,#B06F33)}
.silver .b-ic,.b-ic.silver{background:linear-gradient(135deg,#F0F3F2,#9FB0AB)}
.gold .b-ic,.b-ic.gold{background:linear-gradient(135deg,#FBE08A,#E0A826)}
.bdg.locked{background:transparent;border-style:dashed}
.bdg.locked .b-ic{color:#5D646B}
.bdg.locked b{color:var(--text-2)}
.b-bar{display:block;grid-column:2;height:5px;margin-top:6px;border-radius:3px;background:var(--line);overflow:hidden}
.b-bar u{display:block;height:100%;background:var(--signal)}
.b-toast{position:fixed;z-index:30;top:max(14px,env(safe-area-inset-top,0px));right:max(14px,env(safe-area-inset-right,0px));display:flex;align-items:center;gap:12px;padding:8px 18px 8px 10px;border-radius:999px;background:var(--night);border:1px solid var(--gold);color:var(--chalk);box-shadow:0 14px 34px rgba(0,0,0,.4);animation:bToast 4.2s var(--ease) both}
.b-toast .b-ic{width:36px;height:40px;font-size:11px}
.b-toast small{display:block;font:600 10px var(--f-num);letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.b-toast b{font:800 15px var(--f-ui)}
@keyframes bToast{0%{opacity:0;transform:translateY(-20px) scale(.9)}8%,88%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-10px)}}

/* ---------- onglet Clubs : cartes à collectionner ---------- */
.page .wrap.wide{max-width:1320px}
.clubs-prog{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.clubs-prog p{margin:0;font:500 14px var(--f-num);color:var(--text-2)}
.clubs-prog p b{font-size:24px;color:var(--text);letter-spacing:-.03em}
.clubs-prog i{flex:1 1 200px;display:block;height:10px;border-radius:5px;background:var(--bg-2);overflow:hidden}
.clubs-prog u{display:block;height:100%;width:0;border-radius:5px;background:linear-gradient(90deg,var(--signal),#3BB98A);transition:width .6s var(--ease)}
.clubs-filters{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:20px}
.f-row{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.f-last{gap:12px;flex:1 1 300px}
.f-last .check{margin:0}
.f-last input[type=search]{flex:1 1 170px;min-width:0;height:38px;padding:0 14px;box-sizing:border-box;border:1px solid var(--line-strong);border-radius:999px;background:var(--card);color:var(--text);font:500 14px var(--f-ui)}
.chip-f{height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--line-strong);background:transparent;color:var(--text);font:600 13px var(--f-ui);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.chip-f:hover{border-color:var(--text)}
.chip-f[aria-pressed="true"]{background:var(--night);border-color:var(--night);color:var(--chalk)}
.chip-f:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.clubs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.clubs-grid>.empty-state{grid-column:1/-1}
.pcard{--fr:#BDB7A7;--rx:0deg;--ry:0deg;--gx:50%;--gy:50%;position:relative;display:block;width:100%;aspect-ratio:5/7;padding:7px;box-sizing:border-box;border:0;border-radius:15px;background:var(--fr);color:var(--text);text-align:left;font:inherit;cursor:pointer;overflow:hidden;box-shadow:0 3px 10px rgba(12,38,32,.16);transition:transform .25s var(--ease),box-shadow .25s}
.pcard.tilt,.pcard.big{transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) scale(1)}
.pcard.tilt{transition:box-shadow .25s;box-shadow:0 18px 36px rgba(12,38,32,.3);z-index:2}
.pcard:focus-visible{outline:3px solid var(--signal);outline-offset:3px}
.pcard.r-r{--fr:linear-gradient(145deg,#8FD9B8,#2E8C69)}
.pcard.r-e{--fr:linear-gradient(145deg,#A9B6FF,#5A45C4)}
.pcard.r-l{--fr:linear-gradient(145deg,#FFE9A0,#D69A1E 55%,#FFE28A)}
.pc-in{position:relative;height:100%;box-sizing:border-box;display:flex;flex-direction:column;gap:6px;padding:8px;border-radius:10px;background:#FBFAF5;overflow:hidden}
.pc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:6px;min-height:2.3em}
.pc-name{font:850 14px/1.12 var(--f-disp);font-stretch:108%;overflow-wrap:anywhere}
.pc-pow{flex:none;text-align:right;font:700 16px/1 var(--f-num);letter-spacing:-.04em;color:#7A4F00}
.pc-pow small{display:block;font:600 7.5px var(--f-num);letter-spacing:.06em;text-transform:uppercase;color:#5D646B;margin-bottom:2px}
.pc-art{position:relative;flex:1 1 auto;min-height:0;display:grid;place-items:center;border-radius:7px;overflow:hidden;background:linear-gradient(140deg,var(--c1),color-mix(in srgb,var(--c1) 55%,#0C2620))}
.pc-rings{position:absolute;inset:-30%;background:repeating-radial-gradient(circle at 70% 25%,transparent 0 14px,color-mix(in srgb,var(--c2) 42%,transparent) 14px 16px)}
.pc-art .crest{position:relative;height:72%;width:auto;filter:drop-shadow(0 5px 8px rgba(0,0,0,.4))}
.pc-band{margin:0 -8px;padding:3px 8px;background:var(--night);color:var(--chalk);font:600 10px var(--f-num);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-band span{display:block;overflow:hidden;text-overflow:ellipsis}
.pc-stats{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;text-align:center}
.pc-stats dt{font:600 7.5px var(--f-num);letter-spacing:.03em;text-transform:uppercase;color:#5D646B}
.pc-stats dd{margin:1px 0 0;font:700 13px var(--f-num);letter-spacing:-.03em}
.pc-stad{margin:0;font-size:11px;line-height:1.2;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-stad span{font:600 7.5px var(--f-num);letter-spacing:.03em;text-transform:uppercase;color:#5D646B;margin-right:5px}
.pc-foot{margin-top:auto;display:flex;justify-content:space-between;gap:6px;padding-top:4px;border-top:1px solid #DDD8CD;font:500 8.5px var(--f-num);color:#5D646B;white-space:nowrap}
.pc-rar{color:#13202B;font-weight:700}
.r-r .pc-rar{color:#16703F}.r-e .pc-rar{color:#4A37A8}.r-l .pc-rar{color:#7A4F00}
.pc-foil{display:none;position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;opacity:.55;background:radial-gradient(circle at var(--gx) var(--gy),rgba(255,255,255,.85) 0,transparent 42%),linear-gradient(115deg,transparent 30%,rgba(255,255,255,.5) 46%,rgba(124,232,181,.45) 52%,rgba(245,196,81,.4) 58%,transparent 72%);background-size:100% 100%,240% 240%;background-position:0 0,var(--gx) var(--gy)}
.r-e .pc-foil,.r-l .pc-foil{display:block}
.r-l.tilt .pc-foil,.r-l.big .pc-foil{animation:foil 6s linear infinite}
@keyframes foil{to{background-position:0 0,240% 240%}}
.pcard.back{cursor:default;background:var(--night)}
.pcard.back .pc-in{background:radial-gradient(circle at 50% 35%,#1B4638 0,var(--night-2) 70%);color:var(--mist);align-items:center;justify-content:center;text-align:center;border:1px solid #2A5A4B}
.pcard.back b{font:900 56px/1 var(--f-disp);font-stretch:125%;color:#4C7F6E}
.pcard.back span:not(.pc-rose){font:700 12px var(--f-num)}
.pcard.back small{font-size:11px;line-height:1.2}
.pc-rose{position:absolute;width:150%;aspect-ratio:1;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(124,232,181,.06) 0 22.5deg,transparent 22.5deg 45deg)}
.pcard.back .pc-in>:not(.pc-rose){position:relative}
.card-view{z-index:19;perspective:1200px;background:rgba(6,20,16,.72)}
.cv-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;width:min(350px,calc(100vw - 32px));max-height:100%}
.pcard.big{width:min(350px,calc(100vw - 32px),calc((var(--vvh,100vh) - 120px)*5/7));padding:11px;border-radius:22px;cursor:default;box-shadow:0 26px 70px rgba(0,0,0,.55);animation:cardFlip .7s var(--ease);touch-action:none}
.pcard.big .pc-in{padding:13px;gap:9px;border-radius:14px}
.pcard.big .pc-name{font-size:22px}
.pcard.big .pc-pow{font-size:26px}.pcard.big .pc-pow small,.pcard.big dt,.pcard.big .pc-stad span{font-size:10px}
.pcard.big .pc-band{margin:0 -13px;padding:5px 13px;font-size:12px}
.pcard.big dd{font-size:20px}.pcard.big .pc-stad{font-size:14px;white-space:normal}.pcard.big .pc-foot{font-size:11px}
@keyframes cardFlip{from{transform:perspective(900px) rotateX(0deg) rotateY(-110deg) scale(.7);opacity:0}}
.cv-btns{display:flex;gap:8px}
.cv-btns .btn{height:46px;padding:0 22px;border-radius:999px}
.cv-btns .btn:not(.p){background:transparent;border-color:#8CA79D;color:var(--chalk)}
.cv-btns .btn.p{background:var(--mint);border-color:var(--mint);color:var(--night)}
.cv-btns .btn:focus-visible{outline-color:var(--mint)}

/* ---------- ergonomie : souris, tactile, ordinateur, tablette, téléphone ---------- */
@media (hover:none){.mode-card:hover,.hcard:hover{transform:none;box-shadow:none}.btn:hover:not([disabled]){transform:none}.mode-card:active{transform:scale(.985)}}
@media (pointer:coarse){
  .btn{min-height:44px}.btn.sm{min-height:40px}
  .ctrls button,.ctrls .snd{width:44px;height:44px}
  .chip-f{height:40px;padding:0 14px}
  .x{width:44px;height:44px}
  input,select,textarea,.acct input,.form input,.mp-form input,#guess,.f-last input[type=search]{font-size:16px!important}
  .ml{padding:3px 0}
  .topbar nav a{padding-block:10px}
}
@media (min-width:1500px){.app{grid-template-columns:minmax(0,1fr) 380px}.page .wrap:not(.narrow):not(.wide){max-width:1280px}}
@media (min-width:821px) and (max-width:1100px){.app{grid-template-columns:minmax(0,1fr) 290px}aside{padding-inline:14px}#v-game header{gap:10px 16px;padding-inline:14px}.stat span{font-size:30px}}
@media (max-width:1040px){.mode-cards.four{grid-template-columns:repeat(3,minmax(0,1fr))}.mode-cards.four>*{grid-column:auto}}
@media (max-width:820px){
  .topbar{position:relative;gap:2px 8px}
  .topbar .logo{flex:1}
  .topbar .snd,.topbar .lang,.topbar .net-pill{order:2}
  .topbar nav{order:3;flex:1 1 100%;margin-left:0}
  body.ingame .topbar{display:none}
  #v-game.app{grid-template-rows:auto minmax(230px,calc(var(--vvh,100dvh) - var(--hdh,130px))) auto}
  #v-game header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 12px;padding:8px max(12px,env(safe-area-inset-right,0px)) 6px max(12px,env(safe-area-inset-left,0px))}
  .brand{gap:1px;min-width:0}
  .brand .back{font-size:11px}
  .brand h1{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #v-game .board{gap:14px;margin:0}
  #v-game .stat span{font-size:23px}#v-game .stat span small{font-size:12px}#v-game .stat span.lbl{font-size:9px}
  #v-game .field{grid-column:1/-1;order:3;flex:none}
  #guess{height:46px;padding:0 18px}
  .geobar{height:46px;padding-left:16px;font-size:14px}.geobar .btn{min-height:36px;height:36px}
  .hintb{width:46px;height:46px}
  #nextBtn{height:46px;padding:0 14px}
  #hint{padding-top:3px;min-height:15px;font-size:11px}
  .toast{bottom:10px;font-size:13px;padding-right:10px}
  .toast .lg{display:none}
  #geocard{top:8px;left:8px;padding:10px;gap:6px}
  .q-ask{font-size:16px}.clues{gap:4px}.clues li{padding:6px 10px;font-size:13.5px}.clues .off{display:none}
  .ctrls{right:8px;top:8px}
  .clubs-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .pc-name{font-size:12.5px}.pc-pow{font-size:13px}.pc-in{padding:6px;gap:4px}.pc-band{margin:0 -6px;padding:2px 6px;font-size:8.5px}.pc-stats dd{font-size:11px}.pc-stats dt,.pc-stad span,.pc-pow small{font-size:6.5px}.pc-stad{font-size:9.5px}.pc-foot{font-size:7px}
  .pcard{padding:5px;border-radius:12px}
  .pcard.big .pc-name{font-size:20px}
  .f-row{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;width:100%;padding-bottom:3px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .f-row.f-last{flex-wrap:wrap;overflow:visible;-webkit-mask-image:none;mask-image:none}
  .chip-f{flex:none}
  .end-btns .btn{flex:1 1 40%}
}
/* Téléphone en paysage : carte et panneau côte à côte, sans barre du haut */
@media (max-height:500px) and (min-width:560px) and (orientation:landscape){
  body.ingame{overflow:hidden}
  body.ingame .topbar{display:none}
  #v-game.app{display:grid;height:var(--vvh,100dvh);grid-template-columns:minmax(0,1fr) 240px;grid-template-rows:auto minmax(0,1fr);grid-template-areas:"top top" "map side"}
  #v-game aside{border-top:0;border-left:1px solid var(--line);padding:10px 12px;gap:12px}
  #v-game header{grid-template-columns:auto minmax(0,1fr) auto;padding-block:5px}
  #v-game .field{grid-column:auto;order:0}
  #hint{position:absolute;left:0;right:0;top:100%;z-index:6;min-height:0;padding:2px 12px}
  .dialbox{display:none}
  #v-game .brand .back{display:none}
  .pcard.big{width:min(240px,calc((var(--vvh,100vh) - 76px)*5/7))}
  .cv-wrap{flex-direction:row;width:auto;align-items:center}.cv-btns{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){.pcard,.pcard.tilt,.pcard.big{transform:none}}

/* ---------- Révision ---------- */
.rev-go{height:46px;width:100%;display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:999px;background:transparent;border-color:var(--gold);color:var(--gold)}
.rev-go:hover{background:rgba(245,196,81,.1)}
.rev{position:fixed;z-index:17;left:50%;bottom:max(16px,env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:min(440px,calc(100vw - 24px));box-sizing:border-box;padding:14px 16px;border-radius:18px;color-scheme:dark;color:var(--chalk);background:linear-gradient(160deg,var(--night-3),var(--night) 75%);border:1px solid #3C7C69;box-shadow:0 20px 50px rgba(0,0,0,.5);display:flex;flex-direction:column;gap:8px;animation:endIn .45s var(--spring)}
.rev-top{display:flex;justify-content:space-between;align-items:center;font:600 11px var(--f-num);letter-spacing:.08em;text-transform:uppercase;color:var(--mint)}
.rev-x{border:0;background:none;color:var(--mist);font-size:16px;width:32px;height:32px;border-radius:50%;cursor:pointer}
.rev-x:hover{background:rgba(255,255,255,.08);color:var(--chalk)}
.rev-q{margin:0;font:850 22px/1.1 var(--f-disp);font-stretch:112%}
.rev-name{margin:0;font:850 21px/1.1 var(--f-disp);font-stretch:108%}
.rev-meta{margin:0;color:var(--mist);font-size:13px;line-height:1.35}
.rev-card{display:flex;gap:12px;align-items:center}
.rev-crest{flex:none;display:grid}
.rev-btns{display:flex;gap:8px;flex-wrap:wrap}
.rev-btns .btn{flex:1 1 auto;height:44px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:transparent;color:var(--chalk);border-color:#4C7F6E}
.rev-btns .btn:hover{border-color:var(--chalk)}
.rev-btns .btn.p{background:var(--mint);border-color:var(--mint);color:var(--night)}
.rev :focus-visible{outline-color:var(--mint)}
.rev-btns .ghost{flex:0 0 auto}
.rev-ring{fill:none;stroke:var(--gold);stroke-width:2.5;transform-box:fill-box;transform-origin:center;animation:ripple 1.8s var(--ease) infinite}
.rev-ring.b{animation-delay:.6s}
.rev-pin{fill:var(--gold);stroke:var(--night);stroke-width:1.5}
body.revising #v-game .field,body.revising #hintBtn,body.revising #marks,body.revising #geo{visibility:hidden}
body.revising #v-game>aside{filter:blur(7px);opacity:.35;pointer-events:none;transition:filter .3s,opacity .3s}
@media (max-width:820px){.rev{bottom:max(10px,env(safe-area-inset-bottom,0px))}}

/* ---------- App installable, hors ligne ---------- */
.install{margin-top:22px;display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:18px;background:var(--night);color:var(--chalk);border:1px solid #2A5A4B}
.in-ic{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--night-3);color:var(--mint)}
.in-txt{flex:1;min-width:0}
.in-txt b{font:800 16px/1.2 var(--f-disp)}
.in-txt p{margin:3px 0 0;color:var(--mist);font-size:14px;line-height:1.35}
.in-share{display:inline-block;padding:0 4px;border-radius:4px;background:var(--night-3);color:var(--mint)}
.install .btn.p{flex:none;background:var(--mint);border-color:var(--mint);color:var(--night)}
.in-x{flex:none;width:36px;height:36px;border:0;border-radius:50%;background:none;color:var(--mist);font-size:15px;cursor:pointer}
.in-x:hover{background:rgba(255,255,255,.08);color:var(--chalk)}
.net-pill{flex:none;padding:4px 10px;border-radius:999px;border:1px solid var(--gold);color:var(--gold);font:600 11px var(--f-num);letter-spacing:.05em;text-transform:uppercase}
body.offline .mode-card[href="#multijoueur"]{position:relative;opacity:.55}
body.offline .mode-card[href="#multijoueur"]::after{content:"Réseau requis";position:absolute;top:12px;right:12px;padding:3px 9px;border-radius:999px;background:var(--night);color:var(--gold);font:600 11px var(--f-num)}
.sw-toast{position:fixed;z-index:30;left:50%;transform:translateX(-50%);bottom:max(16px,env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:10px;padding:8px 8px 8px 16px;border-radius:999px;background:var(--night);color:var(--chalk);border:1px solid #3C7C69;box-shadow:0 14px 34px rgba(0,0,0,.35);white-space:nowrap;animation:endIn .45s var(--spring)}
.sw-toast .btn.p{height:36px;padding:0 14px;background:var(--mint);border-color:var(--mint);color:var(--night)}
@media (max-width:560px){.install{flex-wrap:wrap}.install .btn.p{order:3;flex:1 1 100%}.in-x{align-self:flex-start}.sw-toast{white-space:normal;width:calc(100vw - 24px);box-sizing:border-box;border-radius:16px}}

/* ---------- langue ---------- */
.lang{flex:none;display:grid;place-items:center;min-width:40px;height:32px;padding:0 8px;box-sizing:border-box;border-radius:999px;border:1px solid #2A5A4B;color:var(--mist);font:700 12px var(--f-num);letter-spacing:.06em;text-decoration:none;transition:color .2s,border-color .2s}
.lang:hover{color:var(--chalk);border-color:var(--mint)}
.lang:focus-visible{outline:2px solid var(--mint);outline-offset:2px}

/* ---------- accueil v2 : des bandes qui alternent nuit et craie ---------- */
#v-home .hband>.wrap{padding-block:clamp(36px,6vw,64px)}
#v-home .hband{position:relative}
.hb-kick{margin:0 0 6px;font:600 12px var(--f-num);letter-spacing:.1em;text-transform:uppercase;color:var(--signal)}
.hb-h{margin:0;font:900 clamp(30px,4.4vw,52px)/.98 var(--f-disp);font-stretch:125%;letter-spacing:-.02em;text-transform:uppercase;text-wrap:balance}
.hb-h small{font:700 .45em var(--f-num);letter-spacing:0;text-transform:none;color:var(--text-2)}
.hb-lede{margin:10px 0 0;font-size:17px;line-height:1.45;color:var(--text-2);max-width:52ch}
.hb-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:22px}
.hb-more{flex:none;font:700 14px var(--f-ui);color:inherit;text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:2px}
.hb-more::after{content:" →"}
.hb-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,64px);align-items:center}
.hb-split .row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.hb-txt{min-width:0}

/* Défi du jour : un billet à trois volets */
.hb-defi{background:var(--bg)}
#v-home .hb-defi>.wrap{display:flex;flex-direction:column;gap:14px}
.ticket{display:grid;grid-template-columns:150px minmax(0,1fr) 210px;border-radius:22px;overflow:hidden;background:linear-gradient(120deg,var(--night) 0,#17473A 120%);color:var(--chalk);box-shadow:0 22px 50px rgba(12,38,32,.22)}
.ticket .kick{font:600 11px var(--f-num);letter-spacing:.1em;text-transform:uppercase;color:var(--mint)}
.tk-stub{position:relative;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:22px 20px;background:var(--mint);color:var(--night)}
.tk-stub .kick{color:var(--night);opacity:.75}
.tk-stub::after{content:"";position:absolute;right:-1px;top:14px;bottom:14px;border-right:3px dotted var(--night);opacity:.35}
.tk-n{font:900 58px/.9 var(--f-disp);font-stretch:125%;letter-spacing:-.03em}
.tk-n small{font:700 18px var(--f-num);margin-right:2px;vertical-align:.9em}
.tk-date{font:600 13px var(--f-num)}
.tk-body{display:flex;flex-direction:column;gap:12px;padding:24px 26px;min-width:0}
.tk-body h2{margin:0;font:900 clamp(24px,3vw,34px)/1 var(--f-disp);font-stretch:118%;text-transform:uppercase;letter-spacing:-.01em}
.tk-body .defi-sub,.tk-body .fine{margin:0;color:#C9D6CF}
.tk-body .row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.tk-body .btn{border-color:#4C7F6E;color:var(--chalk)}
.tk-body .btn.p,.page .tk-body a.btn.p{background:var(--mint);border-color:var(--mint);color:var(--night)}
.tk-body .btn.p:hover{background:#9AF0C8;border-color:#9AF0C8}
.tk-body .defi-dots{display:flex;gap:7px}
.tk-body .defi-dots i{width:20px;height:20px;border:1.5px solid #4C7F6E}
.tk-body .defi-score span{color:#C9D6CF}
.ticket a:focus-visible,.ticket button:focus-visible{outline-color:var(--mint)}
.tk-streak{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:22px;border-left:1px solid #2A5A4B;background:rgba(0,0,0,.14)}
.tk-sn{font:700 60px/1 var(--f-num);letter-spacing:-.06em;color:var(--gold)}
.tk-streak>span:not(.kick){font:600 11px var(--f-num);letter-spacing:.06em;text-transform:uppercase;color:var(--mist)}
.tk-streak ol{list-style:none;margin:6px 0 0;padding:0;display:flex;gap:5px}
.tk-streak li{width:18px;height:18px;border-radius:50%;border:1.5px dashed #4C7F6E}
.tk-streak li.on{background:var(--gold);border:0}
.tk-streak li.now{outline:2px solid var(--chalk);outline-offset:2px}
.tk-streak small{font:500 12px var(--f-num);color:var(--mist)}
.resume-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.rs-lbl{font:600 12px var(--f-num);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);margin-right:4px}
.rs-chip{display:inline-flex;align-items:baseline;gap:8px;padding:9px 16px;border-radius:999px;background:var(--card);border:1px solid var(--line);color:var(--text);text-decoration:none;transition:border-color .2s,transform .2s var(--ease)}
.rs-chip b{font:800 14px var(--f-ui)}
.rs-chip span{font:500 13px var(--f-num);color:var(--text-2)}
.rs-chip::after{content:"→";color:var(--signal);font-weight:800}
.rs-chip:hover{border-color:var(--signal);transform:translateY(-1px)}
#v-home .install{margin-top:0}

/* Les modes : 8 vignettes animées */
.hb-modes{background:var(--night);color:var(--chalk)}
.hb-modes .hb-kick{color:var(--mint)}
.hm-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.hm-tile{display:flex;flex-direction:column;gap:4px;padding:0 0 16px;border-radius:18px;overflow:hidden;background:var(--night-2);border:1px solid #2A5A4B;color:var(--chalk);text-decoration:none;transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.hm-tile:hover{transform:translateY(-4px);border-color:var(--mint);box-shadow:0 16px 34px rgba(0,0,0,.35)}
.hm-tile:focus-visible{outline:3px solid var(--mint);outline-offset:3px}
.hm-tile .mc-art{height:128px;margin:0 0 8px;border-radius:0}
.hm-tile b{color:var(--chalk);padding-inline:16px;font:850 19px/1.1 var(--f-disp);font-stretch:112%}
.hm-tile span{padding-inline:16px;font-size:14px;line-height:1.35;color:var(--mist)}

/* Collection : progression et éventail de cartes */
.hb-coll{background:var(--bg)}
.coll-bar{height:10px;margin-top:20px;border-radius:5px;background:var(--line);overflow:hidden}
.coll-bar u{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--signal),var(--mint))}
.coll-rar{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.coll-rar li{display:inline-flex;align-items:baseline;gap:6px;padding:5px 12px;border-radius:999px;background:var(--card);border:1px solid var(--line);font:600 13px var(--f-ui)}
.coll-rar b{font:700 15px var(--f-num)}
.coll-rar .r-l{border-color:#D69A1E}.coll-rar .r-e{border-color:#5A45C4}.coll-rar .r-r{border-color:#2E8C69}
.coll-next{display:flex;gap:14px;align-items:center;margin-top:16px;padding:12px 14px;border-radius:16px;background:var(--card);border:1px solid var(--line);max-width:420px}
.coll-next>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.coll-next small{font:600 10px var(--f-num);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.coll-next b{font:800 16px var(--f-ui)}
.coll-next span{font-size:13px;color:var(--text-2)}
.coll-next .b-bar{grid-column:auto}
.fan-box{position:relative;display:block;height:clamp(300px,34vw,400px);color:inherit}
.fan-box .pcard.fan{position:absolute;left:50%;top:50%;width:clamp(170px,19vw,228px);margin:0;transform-origin:50% 120%;box-shadow:0 18px 40px rgba(12,38,32,.25);transition:transform .45s var(--spring)}
.fan.f0{transform:translate(-50%,-50%) rotate(-12deg) translateX(-34%)}
.fan.f1{transform:translate(-50%,-52%);z-index:2}
.fan.f2{transform:translate(-50%,-50%) rotate(12deg) translateX(34%)}
.fan-box:hover .fan.f0{transform:translate(-50%,-50%) rotate(-17deg) translateX(-48%)}
.fan-box:hover .fan.f1{transform:translate(-50%,-56%)}
.fan-box:hover .fan.f2{transform:translate(-50%,-50%) rotate(17deg) translateX(48%)}
.fan-box:focus-visible{outline:3px solid var(--signal);outline-offset:6px;border-radius:18px}

/* Club du jour : sa carte en grand */
.hb-club{background:var(--bg-2)}
.hb-split.flip{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.cod-card{display:grid;place-items:center;perspective:1000px}
.cod-card .pcard.big{animation:none;width:min(300px,100%);transform:rotate(-3deg);box-shadow:0 26px 60px rgba(12,38,32,.3)}
.hb-club .cod-hon{margin-top:16px}
.cod-rank{margin:12px 0 0;font-size:15px}
.cod-rank b{font:700 22px var(--f-num);color:var(--signal);margin-right:4px}
.hb-club .fine{margin-top:12px}

/* Chiffres */
.hb-nums{background:var(--bg);color:var(--night)}
.nums{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.nums li{display:flex;flex-direction:column;gap:4px;padding-top:12px;border-top:2px solid var(--night)}
.nums b{font:700 clamp(40px,5vw,64px)/1 var(--f-num);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.nums span{font:600 12px var(--f-num);letter-spacing:.06em;text-transform:uppercase;color:var(--night)}
.hb-social{background:var(--bg)}

@media (max-width:1040px){
  .ticket{grid-template-columns:130px minmax(0,1fr)}
  .tk-streak{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 14px;border-left:0;border-top:1px solid #2A5A4B}
  .tk-streak ol{margin:0}
  .nums{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:820px){
  .hb-split,.hb-split.flip{grid-template-columns:minmax(0,1fr)}
  .hb-split.flip .cod-card{order:2}
  .hm-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:calc(-1*max(20px,env(safe-area-inset-left,0px)));padding:4px max(20px,env(safe-area-inset-left,0px)) 10px;scroll-padding-inline:max(20px,env(safe-area-inset-left,0px));scrollbar-width:none;overscroll-behavior-x:contain}
  .hm-row::-webkit-scrollbar{display:none}
  .hm-tile{flex:0 0 min(240px,72vw);scroll-snap-align:start}
  .fan-box{height:300px}
  .fan-box .pcard.fan{width:170px}
}
@media (max-width:560px){
  .ticket{grid-template-columns:minmax(0,1fr)}
  .tk-stub{flex-direction:row;align-items:baseline;gap:10px;padding:14px 20px}
  .tk-stub::after{display:none}
  .tk-n{font-size:38px}
  .tk-body{padding:20px}
  .tk-body .defi-dots{gap:5px}.tk-body .defi-dots i{width:16px;height:16px}
  .nums{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nums li:last-child{grid-column:1/-1}
  .hb-head{flex-direction:column;align-items:flex-start}
  .fan-box .pcard.fan{width:150px}
  .fan.f0{transform:translate(-50%,-50%) rotate(-12deg) translateX(-28%)}
  .fan.f2{transform:translate(-50%,-50%) rotate(12deg) translateX(28%)}
}
@media (prefers-reduced-motion:reduce){.fan-box .pcard.fan,.hm-tile{transition:none}}
#v-home .hband .row .btn{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 20px;border-radius:999px;text-decoration:none;font-weight:800}
#v-home .hb-coll .btn:not(.p),#v-home .hb-club .btn:not(.p){background:transparent;border:1.5px solid var(--line-strong);color:var(--text)}
#v-home .hb-coll .btn.p,#v-home .hb-club .btn.p{background:var(--signal);border-color:var(--signal);color:#fff}
#v-home .hb-modes .hb-more{color:var(--mint)}#v-home .rs-chip,#v-home .rs-chip b{color:var(--text)}

/* ---------- page Jouer : quatre familles ---------- */
.mf-h{margin:0 0 12px;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;font:900 clamp(22px,2.4vw,28px)/1 var(--f-disp);font-stretch:122%;text-transform:uppercase;letter-spacing:-.01em;color:var(--text)}
.mf-h small{font:500 13px var(--f-num);letter-spacing:0;text-transform:none;color:var(--text-2)}
.mfam{display:flex;flex-direction:column;min-width:0}
.mfam>.mode-cards{flex:1}
.mfam>.mode-cards>*{grid-column:auto}
.mf-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:30px}
.mf-row .span2{grid-column:span 2}
.mode-cards.one{grid-template-columns:minmax(0,1fr)}
.mode-cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.mode-card h3{margin:4px 0 0;font:850 clamp(22px,2vw,26px)/1.05 var(--f-disp);font-stretch:118%;letter-spacing:-.01em}
.mc-meta{margin:0 0 8px;display:flex;justify-content:space-between;align-items:center;gap:8px;padding-top:8px;border-top:1px solid var(--line);font:600 12px var(--f-num);color:var(--text-2)}
.mc-stars{color:#B37E12;letter-spacing:.1em;font-size:14px}
.mode-card .mc-rec{margin-top:0}
.mc-rec:empty{display:none}
.mode-card .mc-cta{margin-top:auto}
@media (max-width:1040px){
  .mfam>.mode-cards:not(.one):not(.two){grid-template-columns:repeat(2,minmax(0,1fr))}
  .mf-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mf-row .span2{order:3}
}
@media (max-width:640px){
  .mfam>.mode-cards:not(.one):not(.two),.mode-cards.two,.mf-row{grid-template-columns:minmax(0,1fr)}
  .mf-row .span2{grid-column:auto;order:0}
}

/* ---------- page Championnat : une ligne par pays ---------- */
.lg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.lg-country{display:grid;grid-template-columns:150px minmax(0,1fr);border-radius:18px;overflow:hidden;background:var(--card);border:1px solid var(--line)}
.lg-country .art-pays{height:auto;min-height:150px;margin:0;border-radius:0}
.lg-body{display:flex;flex-direction:column;gap:8px;padding:16px;min-width:0}
.lg-body h2{margin:0 0 2px;font:850 24px/1.05 var(--f-disp);font-stretch:118%;letter-spacing:-.01em}
.page a.lg-link{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:12px;background:var(--bg);border:1px solid var(--line);color:var(--text);text-decoration:none;transition:border-color .2s,transform .2s var(--ease),background .2s}
.page a.lg-link::after{content:"→";margin-left:auto;font-weight:800;color:var(--signal);transition:transform .25s var(--ease)}
.page a.lg-link:hover{border-color:var(--signal);transform:translateX(2px)}
.page a.lg-link:hover::after{transform:translateX(4px)}
.lg-d{flex:none;width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:var(--night);color:var(--mint);font:700 12px var(--f-num)}
.lg-n{min-width:0;display:flex;flex-direction:column}
.lg-n b{font:800 16px/1.15 var(--f-ui)}
.lg-n small{font:500 12px var(--f-num);color:var(--text-2)}
@media (max-width:820px){.lg-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:440px){.lg-country{grid-template-columns:100px minmax(0,1fr)}.lg-country .art-pays em{left:8px;top:6px}.lg-body{padding:12px}}

/* ---------- Qui suis-je et Stade : la question au centre ---------- */
.tk-start{font:850 19px/1.15 var(--f-disp);color:var(--gold)}
.st-n:not(:has(b)) span{max-width:15ch;font:850 17px/1.15 var(--f-disp);letter-spacing:0;text-transform:none;color:var(--gold);margin:0}
body.quiz.q-play #map{opacity:.32;transition:opacity .4s}
body.quiz.q-play #geocard{left:50%;top:50%;transform:translate(-50%,-50%);width:min(640px,calc(100% - 132px));padding:clamp(18px,3vw,30px);gap:14px;border-radius:24px;background:linear-gradient(160deg,var(--night-3),var(--night) 75%);border:1px solid #3C7C69;box-shadow:0 26px 70px rgba(0,0,0,.5);animation:stageIn .4s var(--spring)}
@keyframes stageIn{from{opacity:0;transform:translate(-50%,-46%) scale(.97)}}
body.quiz.q-play #geocard .gtop{color:var(--mist);font-size:13px}
body.quiz.q-play .gtop span:last-child{color:var(--gold)}
body.quiz.q-play .q-ask{font:900 clamp(26px,3.6vw,40px)/1.02 var(--f-disp);font-stretch:122%;text-transform:uppercase;letter-spacing:-.02em;color:var(--chalk)}
body.quiz.q-play .clues{gap:8px}
body.quiz.q-play .clues li{padding:11px 16px;border-radius:12px;font-size:17px}
body.quiz.q-play .clues .on{background:rgba(255,255,255,.07);color:var(--chalk)}
body.quiz.q-play .clues .last{background:var(--mint);color:var(--night);font:800 clamp(20px,2.6vw,28px)/1.15 var(--f-disp);font-stretch:108%;padding-block:15px}
body.quiz.q-play .clues .off{border-color:#2F6555;color:#8DB3A5;font-size:14px;padding-block:8px}
.q-timer{display:block;height:4px;border-radius:2px;background:var(--gold);transform-origin:left;animation:qTimer linear both}
@keyframes qTimer{to{transform:scaleX(0)}}
@media (max-width:820px){
  body.quiz.q-play #geocard{left:8px;top:8px;transform:none;width:calc(100% - 68px);padding:12px;gap:8px;border-radius:16px;animation:rise .3s var(--ease)}
  body.quiz.q-play .q-ask{font-size:20px}
  body.quiz.q-play .clues{flex-direction:column-reverse;gap:5px}
  body.quiz.q-play .clues li{padding:7px 11px;font-size:14px}
  body.quiz.q-play .clues .last{font-size:18px;padding-block:9px}
}
@media (prefers-reduced-motion:reduce){.q-timer{display:none}}

/* ---------- Clubs : filtres repliés sur téléphone ---------- */
.f-toggle{display:none}
.f-panel{display:contents}
@media (max-width:820px){
  .clubs-filters{display:block;margin-bottom:14px}
  .clubs-filters{position:sticky;top:0;z-index:5;padding-block:8px;background:var(--bg);max-height:100dvh;box-sizing:border-box;overflow-y:auto}
  .f-toggle{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line-strong);background:var(--card);color:var(--text);font:700 15px var(--f-ui);cursor:pointer}
  .f-toggle::after{content:"▾";transition:transform .2s var(--ease)}
  .f-toggle[aria-expanded="true"]::after{transform:rotate(180deg)}
  .f-toggle b{min-width:22px;height:22px;padding:0 5px;box-sizing:border-box;display:grid;place-items:center;border-radius:999px;background:var(--signal);color:#fff;font:700 12px var(--f-num)}
  .f-toggle b[hidden]{display:none}
  .f-panel{display:none}
  .clubs-filters.open .f-panel{display:flex;flex-direction:column;gap:8px;margin-top:10px}
  .f-panel .f-last{flex:none}
}

/* ---------- Profil : badges par thème ---------- */
.bdg-h{margin:18px 0 8px;display:flex;align-items:baseline;gap:8px;font:600 12px var(--f-num);letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)}
.bdg-h small{font:500 12px var(--f-num);letter-spacing:0}
.pf-h+.bdg-h{margin-top:4px}

/* ---------- soutenir le créateur ---------- */
.sup-btn{flex:none;height:46px;padding:0 22px;border-radius:999px;background:var(--gold);border-color:var(--gold);color:var(--night);font-weight:800;cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s}
.sup-btn:hover:not([disabled]){background:#FFD46E;border-color:#FFD46E;color:var(--night);box-shadow:0 10px 24px rgba(245,196,81,.35)}
.sup-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.sup-head h3{margin:0;font:850 24px/1.1 var(--f-disp);font-stretch:115%}
.sup-sheet p{margin:0;line-height:1.45}
.page a.sup-go,a.sup-go{display:inline-flex;align-items:center;justify-content:center;height:46px;border-radius:999px;background:var(--gold);border-color:var(--gold);color:var(--night);font-weight:800;text-decoration:none}
.end-sup{align-self:center;border:0;background:none;padding:6px 10px;color:var(--gold);font:700 14px var(--f-ui);cursor:pointer}
.end-sup:hover{text-decoration:underline}
.end-sup:focus-visible{outline:2px solid var(--mint);border-radius:6px}
.pf-sup{margin:0;text-align:center}
.pf-sup .lnk{font-weight:700}

/* ---------- merci aux supporters : deux écharpes qui défilent et l'appel au don ---------- */
.hb-thanks{flex:none;position:relative;overflow:hidden;padding-block:clamp(44px,7vw,80px);background:radial-gradient(90% 130% at 50% 0,#17473A 0,var(--night) 68%);color:var(--chalk)}
.hb-thanks::before,.hb-thanks::after{content:"";position:absolute;z-index:3;top:0;bottom:0;width:9vw;pointer-events:none}
.hb-thanks::before{left:0;background:linear-gradient(90deg,var(--night),transparent)}
.hb-thanks::after{right:0;background:linear-gradient(270deg,var(--night),transparent)}
.sp-head{padding-inline:20px;margin-bottom:clamp(26px,4vw,40px);text-align:center}
.hb-thanks .hb-kick{color:var(--gold)}
.sp-note{margin:10px 0 0;color:var(--mist);font-size:16px}
#homeThanks:hover .sp-move{animation-play-state:paused}
.sp-tape{--fringe:var(--night);position:relative;width:112%;margin-left:-6%;overflow:hidden;transform:rotate(-1.8deg);box-shadow:0 14px 30px rgba(0,0,0,.35);background-image:repeating-linear-gradient(90deg,var(--fringe) 0 16px,transparent 16px 32px),repeating-linear-gradient(90deg,var(--fringe) 0 16px,transparent 16px 32px);background-size:100% 5px;background-position:0 0,0 100%;background-repeat:no-repeat}
.sp-tape.a{z-index:2;background-color:#F5C451;color:var(--night)}
.sp-tape.a::after{content:"";position:absolute;inset:0;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:spShine 6s ease-in-out infinite;pointer-events:none}
.sp-tape.b{--fringe:var(--mint);margin-top:10px;background-color:var(--night-3);color:var(--chalk)}
.sp-move{display:flex;width:max-content;animation:spMove var(--t) linear infinite}
.sp-tape.b .sp-move{animation-direction:reverse}
@keyframes spMove{to{transform:translateX(-50%)}}
@keyframes spShine{from{transform:translateX(-120%)}60%,to{transform:translateX(450%)}}
.sp-tape ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;flex:none;min-height:64px}
.sp-tape li{display:inline-flex;align-items:baseline;gap:9px;white-space:nowrap}
.sp-tape b,.sp-word{font:900 clamp(20px,2.4vw,28px)/1 var(--f-disp);font-stretch:118%;letter-spacing:-.01em}
.sp-tape span{font:700 clamp(14px,1.5vw,17px)/1 var(--f-num)}
.sp-tape.b span{color:var(--mint)}
.sp-tape .big b::before{content:"◆ ";font-size:.7em;vertical-align:.1em}
.sp-tape li.top{padding:8px 16px;border-radius:999px;background:var(--night);color:var(--gold)}
.sp-tape li.top b::before{content:"★ "}
.sp-tape.b li.top{background:var(--gold);color:var(--night)}
.sp-tape.b li.top span{color:var(--night)}
.sp-sep{padding-inline:clamp(18px,2.4vw,30px);font-size:15px;opacity:.55}
.sp-static{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0;padding:0;list-style:none}
.sp-cta{position:relative;z-index:4;display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:clamp(30px,4.5vw,46px);padding-inline:20px;text-align:center}
.sp-cta p{margin:0;max-width:46ch;color:var(--chalk);font-size:17px;line-height:1.45;text-wrap:balance}
.sp-cta .sup-btn{display:inline-flex;align-items:center;gap:9px;height:52px;padding:0 28px;font-size:16px}
.sp-cta .sup-btn:hover{transform:translateY(-2px)}
.sp-cta .sup-btn:focus-visible{outline:3px solid var(--mint);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .sp-tape{display:none}
  .sp-static{position:static;width:auto;height:auto;overflow:visible;clip-path:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;padding-inline:20px}
  .sp-static li{display:inline-flex;gap:8px;align-items:baseline}.sp-static span{color:var(--gold);font:700 14px var(--f-num)}
}

/* Club du jour sur téléphone : carte plus petite, droite, et le doigt peut défiler dessus */
.cod-card .pcard.big{touch-action:auto}
@media (max-width:820px){
  .cod-card .pcard.big{width:min(250px,76vw);padding:8px;border-radius:17px;transform:none;box-shadow:0 16px 36px rgba(12,38,32,.26)}
  .cod-card .pcard.big .pc-in{padding:9px;gap:6px;border-radius:11px}
  .cod-card .pcard.big .pc-name{font-size:16px}
  .cod-card .pcard.big .pc-pow{font-size:19px}
  .cod-card .pcard.big .pc-band{margin:0 -9px;padding:4px 9px;font-size:10.5px}
  .cod-card .pcard.big dd{font-size:15px}
  .cod-card .pcard.big .pc-stad{font-size:12px}
  .cod-card .pcard.big .pc-foot{font-size:9.5px}
}
.hb-coll{overflow-x:clip}
@media (max-width:360px){.fan-box{height:260px}.fan-box .pcard.fan{width:130px}}

/* ---------- Profil V2 : une grille large, dans l'ordre Profil, Série, Résultats, Amis, Badges ---------- */
.page .wrap.pf2{max-width:1180px}
.pf2 h1{margin-bottom:18px}
.pf-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px;align-items:stretch}
.pf-slot{min-width:0;display:flex;flex-direction:column;gap:12px}
.pf-slot:empty{display:none}
.pf-slot>.pf-sec,.pf-slot>.pf-streak{flex:1}
.pf-s-head{grid-column:1/-1}
.pf-s-streak{grid-column:span 5}
.pf-s-bests{grid-column:span 7}
.pf-s-friends,.pf-s-badges{grid-column:1/-1}
.pf-s-settings{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.pf-s-settings:empty{display:none}
.pf2 .pf-sec{border-radius:18px;padding:22px}
.pf2 .acct-page{max-width:none}
/* en-tête : la carte du joueur, en nuit comme l'accueil */
.pf-s-head .pf-id,.pf-auth,.pf-welcome{border:0;border-radius:22px;padding:clamp(20px,3vw,30px);background:radial-gradient(90% 140% at 85% 20%,#17473A 0,var(--night) 65%);color:var(--chalk)}
.pf-s-head .pf-id .pf-who b{font-size:clamp(30px,4vw,44px);color:var(--chalk)}
.pf-s-head .pf-id .pf-who span,.pf-s-head .pf-id .fine{color:var(--mist)}
.pf-s-head .pf-id .lnk{color:var(--mint)}
.pf-s-head .pf-id input{background:var(--night-3);color:var(--chalk);border-color:#3C7C69}
.pf-s-head .noc.big{border-color:#3C7C69}
.pf-auth{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(20px,4vw,48px);align-items:center}
.pf-auth-txt h2,.pf-welcome h2{margin:0 0 10px;font:900 clamp(26px,3.4vw,40px)/1 var(--f-disp);font-stretch:122%;text-transform:uppercase;letter-spacing:-.01em;color:var(--chalk)}
.pf-auth-txt p{margin:0;font-size:17px;line-height:1.45;color:var(--mist)}
.pf-auth-form{display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:16px;background:var(--card);color:var(--text)}
.pf-auth-form .pf-card{border:0;padding:6px 2px 2px}
.pf-welcome .note-box{margin-top:8px}
/* tuiles des records */
.pf-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.pf-tiles>div{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:14px;background:var(--bg);border:1px solid var(--line)}
.pf-tiles b{font:700 30px/1.05 var(--f-num);letter-spacing:-.04em;color:var(--signal)}
.pf-tiles .zero b{color:var(--text-dis)}
.pf-tiles small{font:500 12px var(--f-num);color:var(--text-2)}
.pf-locked{flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:4px 14px}
.pf-locked .pf-h{margin:0}
.pf-badges .bdg-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.pf2 .pf-streak{border-radius:18px;align-content:center}
@media (max-width:980px){
  .pf-s-streak,.pf-s-bests{grid-column:1/-1}
  .pf-auth{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){.pf-s-settings{grid-template-columns:minmax(0,1fr)}.pf-grid{gap:14px}.pf2 .pf-sec{padding:18px}}
.note-toast{font:700 15px var(--f-ui);padding:12px 20px}