/* Station CHECK : 7 cartes à retourner pour un écran tactile de 55 pouces (utilisable aussi sur téléphone).
   Une carte touchée se retourne puis s'affiche en grand ; à la fin, confettis et liste complète. */
:root{--k1:#F06B6A;--k2:#169FD6;--k3:#36B39B;--k4:#E9AE3B;--k5:#2B9B67;--k6:#8A5CC7;--k7:#E0567F}
[hidden]{display:none!important}
body{position:relative;overflow-x:hidden}
main{max-width:1400px;position:relative;z-index:1}

/* Fond : trois halos de couleur qui dérivent lentement */
.fond{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.fond i{position:absolute;width:50vmax;height:50vmax;border-radius:50%;filter:blur(90px);opacity:.22;animation:derive 22s ease-in-out infinite alternate}
.fond i:nth-child(1){background:var(--k1);left:-15vmax;top:-15vmax}
.fond i:nth-child(2){background:var(--k2);right:-18vmax;top:10vmax;animation-delay:-7s}
.fond i:nth-child(3){background:var(--k3);left:20vmax;bottom:-25vmax;animation-delay:-14s}
@keyframes derive{to{transform:translate(6vmax,4vmax) scale(1.1)}}

.logos{max-width:1400px;margin:0 auto 18px;display:flex;align-items:center;gap:14px;position:relative;z-index:1}
.logo{height:64px;width:auto;border-radius:10px;display:block}
.logo-text{display:grid;place-items:center;height:64px;padding:0 14px;border:2px solid var(--line);font-weight:800;font-size:.8rem;line-height:1.15;text-align:center;color:var(--ink);background:var(--surface)}
.station{margin-left:auto;font-weight:800;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;padding:8px 16px;border-radius:999px;background:var(--k3);color:#fff}

.top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.eyebrow{margin:0 0 6px;font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--k3)}
h1{font-size:clamp(1.7rem,3.6vw,3rem)}
.sept{display:inline-grid;place-items:center;width:1.3em;height:1.3em;border-radius:50%;background:linear-gradient(135deg,var(--k1),var(--k6));color:#fff;margin:0 .05em}
.progression{display:grid;gap:8px;justify-items:end}
.score{font-weight:800;font-variant-numeric:tabular-nums;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:8px 18px;font-size:1.15rem}
.points{display:flex;gap:6px}
.points i{width:14px;height:14px;border-radius:50%;border:2px solid var(--col);transition:background .3s,transform .3s}
.points i.on{background:var(--col);transform:scale(1.15)}

/* 4 cartes puis 3 cartes centrées : grille de 8 colonnes, chaque carte en occupe 2. */
.cartes{display:grid;grid-template-columns:repeat(8,1fr);gap:clamp(14px,2.2vw,32px);padding-block:8px}
.carte{grid-column:span 2;position:relative;aspect-ratio:3/4;max-width:100%;border:0;padding:0;background:none;cursor:pointer;perspective:1400px;font:inherit;color:inherit;animation:flotte 4s ease-in-out infinite;animation-delay:var(--delai)}
.carte:nth-child(5){grid-column:2 / span 2}
.carte.ouverte{animation:none}
@keyframes flotte{50%{transform:translateY(-8px)}}
.face{position:absolute;inset:0;border-radius:24px;display:grid;place-items:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .7s cubic-bezier(.3,.7,.3,1.15)}
.recto{background:
    radial-gradient(circle at 25% 20%,rgba(255,255,255,.35),transparent 45%),
    repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 14px,transparent 14px 28px),
    var(--col);
  box-shadow:0 14px 30px -10px var(--col),0 4px 12px rgba(0,0,0,.15);align-content:center;gap:6px;overflow:hidden}
.recto::after{content:"";position:absolute;inset:10px;border:2px dashed rgba(255,255,255,.45);border-radius:18px}
.recto .num{font-weight:800;font-size:clamp(3.2rem,9vw,8.5rem);color:#fff;line-height:1;text-shadow:0 6px 18px rgba(0,0,0,.18)}
.recto .touche{font-weight:700;font-size:clamp(.7rem,1.1vw,1rem);color:#fff;letter-spacing:.08em;text-transform:uppercase;opacity:.9}
.carte:hover .recto,.carte:focus-visible .recto{transform:translateY(-6px) rotate(-1.5deg)}
.verso{background:var(--surface);border:5px solid var(--col);transform:rotateY(180deg);padding:clamp(12px,2vw,28px);text-align:center;align-content:center;gap:14px;box-shadow:0 14px 30px -12px var(--col)}
.verso .icone{font-size:clamp(2rem,4.5vw,4rem);line-height:1}
.verso .texte{font-weight:700;font-size:clamp(.95rem,1.8vw,1.75rem);line-height:1.25;text-wrap:balance}
.carte.ouverte .recto{transform:rotateY(-180deg)}
.carte.ouverte .verso{transform:rotateY(0)}

/* Zoom : le message de la carte touchée, en grand au centre de l'écran */
.zoom{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:24px;background:rgba(10,20,32,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:apparait .25s ease-out}
.zoom-carte{position:relative;width:min(900px,100%);background:var(--surface);border-radius:32px;border:8px solid var(--col);padding:clamp(28px,5vw,64px);display:grid;gap:22px;justify-items:center;text-align:center;box-shadow:0 30px 80px -20px var(--col);animation:pop .45s cubic-bezier(.3,.7,.3,1.3)}
.zoom-num{position:absolute;top:-34px;width:68px;height:68px;border-radius:50%;background:var(--col);color:#fff;font-weight:800;font-size:2rem;display:grid;place-items:center;box-shadow:0 8px 20px -6px var(--col)}
.zoom-icone{font-size:clamp(3.5rem,8vw,6rem);line-height:1}
.zoom-texte{margin:0;font-weight:800;font-size:clamp(1.5rem,3.6vw,3rem);line-height:1.2;text-wrap:balance}
.zoom .btn{justify-self:center;background:var(--col)}
@keyframes apparait{from{opacity:0}}
@keyframes pop{from{transform:scale(.6) rotate(-4deg);opacity:0}}

.final{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:clamp(20px,3vw,40px);display:grid;gap:18px;animation:pop .5s ease-out}
.final h2{margin:0;font-size:clamp(1.4rem,2.6vw,2.2rem)}
.final ol{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.final li{display:flex;gap:14px;align-items:center;font-size:clamp(1rem,1.7vw,1.45rem);font-weight:700;padding:10px 14px;border-radius:14px;background:var(--bg);border-left:6px solid var(--col)}
.final .puce{flex:none;width:2em;height:2em;border-radius:50%;background:var(--col);color:#fff;display:grid;place-items:center;font-weight:800}
.btn{justify-self:start;font:inherit;font-weight:800;border:0;border-radius:999px;padding:16px 32px;background:var(--k3);color:#fff;cursor:pointer;font-size:1.1rem;box-shadow:0 8px 20px -8px rgba(0,0,0,.4)}
.btn:hover{filter:brightness(1.08)}
.confettis{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:30}
.site-footer{position:relative;z-index:1}

@media (max-width:760px){
  .cartes{grid-template-columns:repeat(4,1fr)}
  .carte:nth-child(5){grid-column:span 2}
  .carte:nth-child(7){grid-column:2 / span 2}
  .station{display:none}
  .progression{justify-items:start}
}
@media (prefers-reduced-motion: reduce){.carte,.fond i,.zoom,.zoom-carte,.final{animation:none}.face{transition:none}}