/* ==========================================================================
   NEXT GAME - feuille de style unique
   Implementation du canvas Claude Design « NEXT GAME.dc.html ».

   Les tokens reprennent le design system nextplay :
   - familles et composites typographiques : identiques au DS
   - palette : celle que le canvas applique reellement. Le fichier colors.css
     du DS porte une palette claire generique que le canvas n'utilise pas,
     il pose partout ses propres valeurs sombres. Elles sont remontees ici
     en variables plutot que repetees en dur.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700&family=Hanken+Grotesk:wght@400;500&family=Bungee&display=swap");

:root{
  /* --- Familles (DS : tokens/typography.css) --- */
  --font-display:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --font-text:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --font-word:"Bungee",var(--font-display);
  --font-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;

  /* --- Graisses et composites (DS) --- */
  --weight-regular:400;
  --weight-medium:500;
  --type-body:var(--weight-regular) 14px/20px var(--font-text);
  --type-button:var(--weight-medium) 14px/16.8px var(--font-text);
  --type-micro:var(--weight-regular) 12px/16px var(--font-text);

  /* --- Palette NEXT GAME --- */
  --bg:#0B1520;
  --bg-deep:#06090D;
  --surface:#131F2E;
  --surface-sunken:#0E1A28;
  --surface-empty:#0E1825;
  --surface-footer:#0A121C;
  --line:#233048;
  --line-strong:#2E4160;
  --text:#F2F5F8;
  --muted:#94A3B8;

  --yellow:#FFC400;
  --yellow-lt:#FFE95C;
  --yellow-dk:#F09000;
  --grad-yellow:linear-gradient(180deg,var(--yellow-lt),var(--yellow) 55%,var(--yellow-dk));
  --cyan:#00D9FF;
  --cyan-lt:#8DFBFF;
  --score-high:#1FB25A;
  --score-mid:#FFC400;
  --score-low:#E23D3D;

  /* --- Rythme --- */
  --pad-x:88px;
  --radius:12px;
  --radius-ctl:10px;
  --radius-sm:4px;
  --genre-count:8;          /* repose sur la longueur reelle de la liste, pose par le JS */
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:var(--type-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:var(--weight-medium);text-wrap:balance}
p{margin:0;text-wrap:pretty}
img{display:block;max-width:100%}
a{color:var(--cyan-lt);text-decoration:none}
a:hover{color:var(--cyan)}
button{font:var(--type-button);cursor:pointer}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important;transition:none !important}
}

/* ---------- Utilitaires ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.eyebrow{font:var(--weight-medium) 12px/1 var(--font-text);letter-spacing:.18em;text-transform:uppercase;color:var(--yellow)}
.eyebrow--muted{color:var(--muted)}

/* ==========================================================================
   En-tete
   ========================================================================== */
.hdr{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;gap:24px;
  height:72px;padding:0 32px;
  background:rgba(11,21,32,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
/* Logo au format portrait : on impose la hauteur et on laisse la largeur
   suivre, sinon il serait ecrase dans un carre. */
.brand img{width:auto;height:46px}
.brand span{font:400 19px/1 var(--font-word);letter-spacing:.04em;color:var(--text)}
.brand:hover span{color:var(--text)}

.hdr-nav{display:flex;align-items:center;gap:22px;margin-left:8px}
.hdr-nav a{font:var(--weight-medium) 14px/1 var(--font-text);color:var(--muted)}
.hdr-nav a:hover,.hdr-nav a[aria-current="page"]{color:var(--text)}

.hdr-right{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-left:auto}

.search{
  display:flex;align-items:center;gap:8px;
  height:40px;padding:0 12px;width:220px;
  border-radius:var(--radius-ctl);border:1px solid var(--line);background:var(--surface);
  transition:border-color .18s ease;
}
.search:focus-within{border-color:var(--cyan)}
.search input{all:unset;flex:1;min-width:0;font:var(--type-body);color:var(--text)}
.search input::placeholder{color:var(--muted)}
.search svg{flex:none}

/* Les deux boutons ci-dessous n'existent qu'en dessous des paliers adaptatifs.
   La classe .btn-sq est declarée plus bas et porte display:grid : on qualifie
   donc le selecteur, sinon la regle la plus tardive l'emporte et ils
   reapparaissent sur le bureau. */
.btn-sq.hdr-burger{display:none}
.btn-sq.hdr-burger-menu{display:none}

/* Panneau de navigation replie, construit par le script a partir de .hdr-nav */
.hdr-menu{
  display:none;
  position:absolute;left:0;right:0;top:100%;z-index:98;
  flex-direction:column;
  padding:4px 16px 8px;
  background:var(--surface);border-bottom:1px solid var(--line);
  box-shadow:0 14px 34px rgba(0,0,0,.55);
}
.hdr-menu.is-open{display:flex}
.hdr-menu a{
  padding:14px 4px;
  font:var(--weight-medium) 15px/1 var(--font-text);color:var(--text);
  border-bottom:1px solid var(--line);
}
.hdr-menu a:last-child{border-bottom:none}
.hdr-menu a[aria-current="page"]{color:var(--yellow)}

/* ==========================================================================
   Boutons
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:40px;padding:0 18px;
  border-radius:var(--radius-ctl);border:none;
  font:var(--weight-medium) 14px/1 var(--font-text);letter-spacing:.02em;
  text-align:center;
  transition:transform .18s ease,box-shadow .2s ease,background-color .18s ease,border-color .18s ease,color .18s ease;
}
.btn--primary{background:var(--grad-yellow);color:var(--bg)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 0 24px rgba(255,196,0,.45);color:var(--bg)}
.btn--primary:active{transform:translateY(1px)}

.btn--lg{height:52px;padding:0 28px;font:var(--weight-medium) 16px/1 var(--font-text)}
.btn--lg.btn--primary:hover{box-shadow:0 0 32px rgba(255,196,0,.5)}

/* Lien fantome cyan : le remplissage balaie depuis la gauche au survol */
.btn--ghost{
  height:52px;padding:0 28px;
  border:1px solid var(--cyan);
  background:linear-gradient(90deg,rgba(0,217,255,.28),rgba(0,217,255,.28)) no-repeat left/0% 100%;
  color:var(--cyan-lt);
  font:var(--weight-medium) 16px/1 var(--font-text);
  transition:background-size .25s ease,color .2s ease;
}
.btn--ghost:hover{background-size:100% 100%;color:var(--text)}
.btn--ghost:active{transform:translateY(1px)}

.btn--cyan{border:1px solid var(--cyan);background:rgba(0,217,255,.1);color:var(--cyan-lt)}
.btn--cyan:hover{background:rgba(0,217,255,.22);color:var(--text)}
.btn--cyan:active{transform:translateY(1px)}

/* Bouton carre 40x40 : fleches de carrousel, actions mobiles */
.btn-sq{
  width:40px;height:40px;flex:none;
  display:grid;place-items:center;
  border-radius:var(--radius-ctl);border:1px solid var(--line);
  background:transparent;color:var(--text);
  transition:border-color .18s ease,color .18s ease,opacity .18s ease;
}
.btn-sq:hover{border-color:var(--cyan);color:var(--cyan-lt)}
.btn-sq[disabled]{opacity:.35;cursor:default}
.btn-sq[disabled]:hover{border-color:var(--line);color:var(--text)}

.btn-reset{
  display:inline-flex;align-items:center;gap:6px;
  height:32px;padding:0 12px;
  border-radius:var(--radius-ctl);border:1px solid var(--line);
  background:transparent;color:var(--muted);
  font:var(--type-button);
  transition:border-color .18s,color .18s;
}
.btn-reset:hover{border-color:var(--cyan);color:var(--cyan-lt)}

/* ==========================================================================
   Heros
   ========================================================================== */
.hero{position:relative;height:580px;display:flex;align-items:center;overflow:hidden}
/* Fond du heros : collage de personnages, fourni en portrait 736x1308.
   Le heros etant une bande large, « cover » n'en garde qu'une tranche
   horizontale. Le degrade reste declare dessous : il sert de fond si
   l'image manque. */
.hero-bg{
  position:absolute;inset:0;
  background-image:
    url(fond-hero.jpg),
    linear-gradient(150deg,#16324E 0%,#0F2237 42%,#0B1520 100%);
  background-size:cover;
  background-position:center 32%;
  background-repeat:no-repeat;
}

/* Deux voiles superposes plutot qu'un seul :
   - l'horizontal assombrit fortement la moitie gauche, ou se trouve le texte
   - le vertical adoucit le haut et ferme le bas sur la couleur de la page
   Resultat : le titre garde son contraste, le collage reste visible a droite. */
.hero-veil{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,
      rgba(11,21,32,.94) 0%,
      rgba(11,21,32,.90) 34%,
      rgba(11,21,32,.62) 58%,
      rgba(11,21,32,.38) 100%),
    linear-gradient(180deg,
      rgba(11,21,32,.42) 0%,
      rgba(11,21,32,.18) 42%,
      rgba(11,21,32,.80) 86%,
      var(--bg) 100%);
}
.hero-flow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.8}
.hero-scan{
  position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.14) 0 1px,rgba(0,0,0,0) 1px 3px);
}
.hero-inner{
  /* 1000px bord a bord, soit ~824px de texte une fois les gouttieres retirees.
     En dessous, « TON PROCHAIN JEU » ne tient plus sur une ligne et le titre
     se casse en trois. */
  position:relative;padding-inline:var(--pad-x);max-width:1000px;
  display:flex;flex-direction:column;gap:24px;
}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  height:28px;padding:0 12px;
  border-radius:var(--radius-ctl);
  border:1px solid rgba(0,217,255,.45);background:rgba(0,217,255,.1);
  font:var(--weight-medium) 12px/1 var(--font-text);
  letter-spacing:.12em;text-transform:uppercase;color:var(--cyan-lt);
}
.hero h1{
  font:var(--weight-medium) 76px/1.02 var(--font-display);
  letter-spacing:.01em;text-transform:uppercase;color:var(--text);
  /* La coupure est portee par le <br> du markup. Laisser « balance » ici
     reequilibrerait les lignes et casserait le titre en trois. */
  text-wrap:normal;
}
.hero-lede{max-width:600px;font:var(--weight-regular) 20px/30px var(--font-text);color:var(--text)}
.hero-actions{display:flex;gap:16px;margin-top:8px;flex-wrap:wrap}

/* ==========================================================================
   En-tete de section
   ========================================================================== */
.sec-head{
  padding:72px var(--pad-x) 24px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;
}
.sec-head-txt{display:flex;flex-direction:column;gap:10px}
.sec-head h2{font:var(--weight-medium) 44px/1.05 var(--font-display);letter-spacing:.02em;text-transform:uppercase}
.sec-head--sm{padding-top:64px}
.sec-head--sm h2{font:var(--weight-medium) 36px/1.05 var(--font-display);letter-spacing:.02em;text-transform:uppercase}

/* ==========================================================================
   Controle segmente « Periode »
   ========================================================================== */
.seg{
  display:flex;gap:8px;padding:6px;
  border-radius:14px;background:var(--surface);border:1px solid var(--line);
}
.seg button{
  flex:1 1 0;min-width:0;height:36px;padding:0 18px;
  border-radius:8px;border:none;background:transparent;
  white-space:nowrap;
  font:var(--weight-medium) 14px/1 var(--font-text);
  color:var(--muted);
  transition:background-color .18s ease,color .18s ease;
}
.seg button:hover{color:var(--text)}
.seg button[aria-pressed="true"]{background:var(--grad-yellow);color:var(--bg)}
.seg button[aria-pressed="true"]:hover{color:var(--bg)}

/* ==========================================================================
   Onglets « Genre »
   Le bandeau et le trait glissent par translateX(i * 100%), comme le canvas.
   ========================================================================== */
.tabs-wrap{padding:0 var(--pad-x) 8px}
.tabs{position:relative;display:flex;border-bottom:1px solid var(--line)}
.tabs button{
  flex:1 1 0;min-width:0;height:48px;padding:0 6px;
  border-radius:var(--radius-ctl);border:none;background:transparent;
  position:relative;z-index:1;
  font:var(--weight-medium) 15px/1 var(--font-text);letter-spacing:.02em;white-space:nowrap;
  color:var(--muted);
  transition:color .18s ease;
}
.tabs button:hover{color:var(--cyan-lt)}
.tabs button[aria-selected="true"]{color:var(--text)}
.tabs-panel,
.tabs-ind{
  position:absolute;left:0;
  width:calc(100% / var(--genre-count));
  pointer-events:none;
  transform:translateX(calc(var(--i,0) * 100%));
  transition:transform .22s ease;
}
.tabs-panel{top:4px;bottom:3px;border-radius:var(--radius-ctl);background:rgba(0,217,255,.1)}
.tabs-ind{bottom:-1px;height:2px;background:var(--cyan);box-shadow:0 0 12px rgba(0,217,255,.8)}

/* ==========================================================================
   Ligne de resultats
   ========================================================================== */
.meta-row{
  padding:20px var(--pad-x) 0;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.meta-row .count{font:var(--type-body);color:var(--text)}
.meta-row .count strong{color:var(--yellow);font-weight:var(--weight-medium)}

/* ==========================================================================
   Grille
   ========================================================================== */
.grid-wrap{padding:24px var(--pad-x) 0}
.grid{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:20px}
.grid--3{--cols:3}

/* ==========================================================================
   Carte de jeu
   ========================================================================== */
.card{
  display:flex;flex-direction:column;gap:12px;
  padding:12px;height:100%;
  border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--line);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.card:hover,.card:focus-within,.card.is-hover{
  border-color:var(--cyan);
  box-shadow:0 14px 34px rgba(0,0,0,.55),0 0 22px rgba(0,217,255,.22);
  transform:translateY(-4px);
}
.card--compact{gap:8px;padding:10px}

.card-art{
  position:relative;flex:none;
  border-radius:var(--radius);overflow:hidden;
  background:var(--surface-sunken);
  aspect-ratio:16/9;
}
.card-art-img{
  position:absolute;inset:0;
  background-color:var(--bg);
  background-repeat:no-repeat;background-position:center;background-size:cover;
  transition:transform .2s ease;
}
.card:hover .card-art-img,
.card:focus-within .card-art-img,
.card.is-hover .card-art-img{transform:scale(1.06)}

/* Vignette de repli : trame plus titre incruste, tel que prevu par GameCard.
   Les deux disparaissent des qu'un vrai visuel a pu etre charge. */
.card-art.has-art .card-art-scan,
.card-art.has-art .card-art-name{display:none}
.card-art-scan{
  position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.18) 0 1px,rgba(0,0,0,0) 1px 3px);
}
.card-art-name{
  position:absolute;left:10px;bottom:8px;right:56px;
  font:var(--weight-medium) 13px/16px var(--font-display);
  letter-spacing:.06em;text-transform:uppercase;color:var(--text);
  text-shadow:0 1px 6px rgba(0,0,0,.9);
}
.card-rank{
  position:absolute;left:10px;top:8px;
  padding:2px 6px;border-radius:var(--radius-sm);
  background:rgba(11,21,32,.78);border:1px solid var(--line);
  font:var(--type-micro);color:var(--muted);letter-spacing:.08em;
}
.card-score{
  position:absolute;top:8px;right:8px;
  width:38px;height:38px;display:grid;place-items:center;
  border-radius:var(--radius-sm);
  border:2px solid rgba(11,21,32,.6);
  font:var(--weight-medium) 17px/1 var(--font-display);
}
.card-score--high{background:var(--score-high);color:#04160C}
.card-score--mid{background:var(--score-mid);color:#1A1200}
.card-score--low{background:var(--score-low);color:#FFF}
/* Note non renseignee : badge neutre, plus petit, sans emphase */
.card-score--nc{
  background:rgba(11,21,32,.82);border-color:var(--line);
  color:var(--muted);font-size:12px;letter-spacing:.06em;
}
.card-score--top{animation:ngBadgeGlow 3.2s ease-in-out infinite}
.card:hover .card-score,
.card.is-hover .card-score{animation:ngBadgePulse .28s ease}

@keyframes ngBadgePulse{0%{transform:scale(1)}45%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes ngBadgeGlow{0%,100%{box-shadow:0 0 0 0 rgba(0,217,255,0)}50%{box-shadow:0 0 18px 2px rgba(0,217,255,.45)}}

.card-body{display:flex;flex-direction:column;gap:6px}
.card-title{font:var(--weight-medium) 17px/1.15 var(--font-display);letter-spacing:.02em;color:var(--text)}
.card--compact .card-title{font-size:15px}

.card-plats{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:var(--radius-sm);
  background:var(--surface-sunken);border:1px solid var(--line);
}
.card-plats-lbl{font:var(--weight-medium) 10px/1 var(--font-text);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.card-plats-list{display:flex;flex-wrap:wrap;gap:6px}
.plat{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:26px;padding:0 9px;
  border-radius:var(--radius-sm);border:1px solid var(--line-strong);background:var(--surface);
  font:var(--weight-medium) 12px/1 var(--font-text);letter-spacing:.1em;color:var(--text);
}
.card-tags{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tag-genre{
  display:inline-flex;align-items:center;height:20px;padding:0 8px;
  border-radius:var(--radius-sm);
  background:rgba(0,217,255,.1);border:1px solid rgba(0,217,255,.32);
  font:var(--weight-medium) 11px/1 var(--font-text);color:var(--cyan-lt);
}
.card-date{font:var(--type-micro);color:var(--muted)}
.card-date--todo{font-style:italic;opacity:.75}

.card-links{display:flex;gap:8px;margin-top:auto}
.card-link{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:34px;border-radius:var(--radius-ctl);
  font:var(--type-button);
  white-space:nowrap;          /* plutot se serrer que passer sur deux lignes */
  transition:border-color .18s,background-color .18s,color .18s;
}
.card--compact .card-link{gap:5px;font-size:13px}
.card-link--mc{border:1px solid var(--line);background:var(--bg);color:var(--text)}
.card-link--mc:hover{border-color:var(--yellow);color:var(--yellow)}
.card-link--yt{border:1px solid rgba(0,217,255,.45);background:rgba(0,217,255,.08);color:var(--cyan-lt)}
.card-link--yt:hover{background:rgba(0,217,255,.2);border-color:var(--cyan);color:var(--text)}


/* ==========================================================================
   Grille vide
   ========================================================================== */
.empty{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:64px 24px;text-align:center;
  border:1px dashed var(--line);border-radius:var(--radius);background:var(--surface-empty);
}
.empty h3{font:var(--weight-medium) 22px/1.2 var(--font-display);letter-spacing:.03em;text-transform:uppercase;color:var(--text)}
.empty p{max-width:460px;font:var(--type-body);color:var(--muted)}
.empty-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* ==========================================================================
   Bandeau citation
   ========================================================================== */
.banner{
  position:relative;height:260px;margin-top:72px;
  overflow:hidden;display:flex;align-items:center;justify-content:center;
}
.banner-bg{
  position:absolute;inset:-40px 0;
  background:
    radial-gradient(70% 120% at 50% 50%,rgba(0,217,255,.16),transparent 65%),
    linear-gradient(120deg,#132A44,#0B1520 70%);
  background-size:cover;background-position:center;background-attachment:fixed;
}
.banner-veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,var(--bg) 0%,rgba(11,21,32,.84) 30%,rgba(11,21,32,.84) 70%,var(--bg) 100%);
}
.banner p{
  position:relative;text-align:center;
  font:var(--weight-medium) 34px/1.15 var(--font-display);
  letter-spacing:.04em;text-transform:uppercase;color:var(--text);
  text-shadow:0 2px 12px rgba(0,0,0,.8);
  padding-inline:24px;
}
.banner .accent{color:var(--yellow)}

/* ==========================================================================
   Carrousel « Sorties du moment »
   ========================================================================== */
.rail{
  padding:24px var(--pad-x) 8px;
  display:flex;gap:16px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
}
.rail::-webkit-scrollbar{height:8px}
.rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.rail-item{flex:none;width:248px;scroll-snap-align:start}

/* ==========================================================================
   Comment ca marche
   ========================================================================== */
.steps-sec{padding:80px var(--pad-x) 0}
.steps-sec h2{margin-bottom:40px;font:var(--weight-medium) 36px/1.05 var(--font-display);letter-spacing:.02em;text-transform:uppercase}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.step{
  display:flex;flex-direction:column;gap:16px;
  padding:28px;border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--line);
  transition:border-color .2s ease;
}
.step:hover{border-color:var(--cyan)}
.step-ico{position:relative;width:72px;height:72px;flex:none;display:grid;place-items:center}
.step-ico::before{
  content:"";position:absolute;inset:0;
  transform:rotate(45deg);border-radius:6px;background:var(--grad-yellow);
}
.step-ico svg{position:relative;color:var(--bg)}
.step h3{font:var(--weight-medium) 24px/1.1 var(--font-display);letter-spacing:.03em;text-transform:uppercase}
.step p{font:var(--type-body);color:var(--muted)}

/* ==========================================================================
   Pied de page
   ========================================================================== */
.ftr{
  margin-top:88px;padding:56px var(--pad-x) 40px;
  border-top:1px solid var(--line);background:var(--surface-footer);
}
.ftr-top{display:flex;justify-content:space-between;gap:64px;flex-wrap:wrap}
.ftr-brand{max-width:300px;display:flex;flex-direction:column;gap:14px}
.ftr-brand-id{display:flex;align-items:center;gap:10px}
.ftr-brand-id img{width:auto;height:56px}
.ftr-brand-id span{font:400 16px/1 var(--font-word);letter-spacing:.16em;color:var(--text)}
.ftr-brand p{font:var(--type-body);color:var(--muted)}
.ftr-cols{display:flex;gap:64px;flex-wrap:wrap}
.ftr-col{display:flex;flex-direction:column;gap:10px}
.ftr-col a{font:var(--type-body);color:var(--muted)}
.ftr-col a:hover{color:var(--cyan-lt)}
.ftr-bottom{
  margin-top:40px;padding-top:20px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.ftr-bottom p{font:var(--type-micro);color:var(--muted)}

/* Ligne de fraicheur : le site promet une revue hebdomadaire, cette date
   en est la preuve. Elle occupe sa propre rangee pour ne pas se diluer
   entre les deux lignes de mentions. */
.ftr-freshness{flex:1 0 100%;order:-1;margin-bottom:4px}
.ftr-freshness strong{color:var(--cyan-lt);font-weight:var(--weight-medium)}

/* ==========================================================================
   Page « article » : methodologie, mentions
   ========================================================================== */
.doc{max-width:760px;padding:64px var(--pad-x) 0;margin-inline:auto}
.doc h1{font:var(--weight-medium) 44px/1.05 var(--font-display);letter-spacing:.02em;text-transform:uppercase;margin-bottom:24px}
.doc h2{font:var(--weight-medium) 24px/1.1 var(--font-display);letter-spacing:.03em;text-transform:uppercase;margin:40px 0 12px}
.doc p,.doc li{font:var(--weight-regular) 16px/26px var(--font-text);color:var(--muted)}
.doc p+p{margin-top:12px}
/* Sans marge basse, le paragraphe qui suit une liste se colle au dernier point */
.doc ul{margin:12px 0 20px;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.doc ul:last-child{margin-bottom:0}
.doc strong{color:var(--text);font-weight:var(--weight-medium)}

/* Page « etats de carte » */
.states{padding:40px var(--pad-x) 0;display:flex;gap:32px;align-items:flex-start;flex-wrap:wrap}
.state-col{width:300px;display:flex;flex-direction:column;gap:12px}
.state-col--wide{flex:1;min-width:300px;width:auto}

/* ==========================================================================
   Adaptatif
   Le canvas fournit deux maquettes : desktop 1440 et mobile 375.
   Les paliers intermediaires font la jonction entre les deux.
   ========================================================================== */
/* Seuil a 1400 et non 1280 : en dessous, quatre colonnes donnent des cartes
   d'environ 265 px, ou « Note Metacritic » et « Voir le gameplay » ne tiennent
   plus sur une ligne et se retrouvent rognes. */
@media (max-width:1400px){
  :root{--pad-x:56px}
  .grid{--cols:3}
  .grid--3{--cols:3}
}

@media (max-width:1000px){
  :root{--pad-x:40px}
  .grid{--cols:2}
  .grid--3{--cols:2}
  .hero h1{font-size:56px}
  .sec-head h2{font-size:36px}
  .steps{grid-template-columns:1fr}
  .hdr-nav{display:none}
  .btn-sq.hdr-burger-menu{display:grid}   /* prend le relais de la barre masquee */
  .search{width:170px}
}

@media (max-width:720px){
  :root{--pad-x:20px}

  /* En-tete mobile : 60px, logo plus petit, recherche repliee */
  .hdr{height:60px;padding:0 16px;gap:12px}
  .brand img{height:38px}
  .brand span{font-size:14px;letter-spacing:.16em}
  .btn-sq.hdr-burger{display:grid}
  .search{
    display:none;
    position:absolute;left:16px;right:16px;top:64px;width:auto;
    z-index:99;box-shadow:0 14px 34px rgba(0,0,0,.55);
  }
  .search.is-open{display:flex}
  .hdr-right .btn--primary{display:none}

  .hero{height:auto;padding:40px 0 36px}

  /* Le texte occupe toute la largeur : le voile lateral ne protege plus rien,
     on repasse sur un voile uniforme. L'image etant en portrait, elle tombe
     bien mieux ici que sur le bureau. */
  .hero-bg{background-position:center 22%}
  .hero-veil{
    background:linear-gradient(180deg,
      rgba(11,21,32,.60) 0%,
      rgba(11,21,32,.72) 40%,
      rgba(11,21,32,.86) 78%,
      var(--bg) 100%);
  }

  .hero-flow{display:none}          /* l'animation coute cher sur mobile */
  .hero-inner{gap:16px;max-width:none}
  .hero h1{font:var(--weight-medium) 40px/1.04 var(--font-display)}
  .hero-lede{font:var(--weight-regular) 16px/24px var(--font-text)}
  .hero-badge{height:auto;padding:5px 10px;border-radius:var(--radius-sm);font-size:11px;letter-spacing:.1em}
  .hero-actions{flex-direction:column;gap:12px;margin-top:0}
  .hero-actions .btn{width:100%;height:48px;padding:0;font-size:15px}

  .sec-head{padding-top:32px;gap:16px;flex-direction:column;align-items:stretch}
  .sec-head h2{font-size:30px}
  .sec-head--sm{padding-top:28px}
  .sec-head--sm h2{font-size:26px}
  .sec-head .seg{width:100%}
  .seg button{padding:0 4px;font-size:11px}

  /* Les 8 genres ne tiennent pas : on garde la rangee large et on la fait defiler */
  .tabs-wrap{overflow-x:auto;padding-bottom:0;scrollbar-width:none}
  .tabs-wrap::-webkit-scrollbar{display:none}
  .tabs{width:900px}
  .tabs button{font-size:14px}

  .grid{--cols:1}
  .grid--3{--cols:1}
  .grid-wrap{padding-top:16px}
  .meta-row{padding-top:16px;justify-content:space-between}
  .btn-reset{height:44px}          /* cible tactile */

  .banner{height:180px;margin-top:36px}
  .banner-bg{background-attachment:scroll;inset:0}
  .banner p{font-size:22px;line-height:1.2}

  .rail{padding-inline:var(--pad-x);gap:12px}
  .rail-item{width:220px}

  .steps-sec{padding-top:32px}
  .steps-sec h2{margin-bottom:16px}
  .step{flex-direction:row;gap:14px;align-items:flex-start;padding:16px}
  .step-ico{width:48px;height:48px}
  .step-ico svg{transform:scale(.8)}
  .step-txt{display:flex;flex-direction:column;gap:4px}
  .step h3{font-size:18px}

  .ftr{margin-top:32px;padding:28px var(--pad-x)}
  .ftr-top{flex-direction:column;gap:24px}
  .ftr-cols{gap:24px 40px}
  .ftr-bottom{margin-top:24px;flex-direction:column;gap:12px}

  .doc{padding-top:32px}
  .doc h1{font-size:30px}
  .states{padding-top:24px;gap:24px}
  .state-col{width:100%}
}