/* ==========================================================================
   NEARH FINDS — Death Note inversé
   Papier blanc, encre noire, rouge sang. Disposition des pages du manga.
   ========================================================================== */

/* --- Scrollbar personnalisée -------------------------------------------- */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(240, 237, 230, 0.25);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(240, 237, 230, 0.55); }
* { scrollbar-width: thin; scrollbar-color: rgba(240,237,230,.25) transparent; }

/* --- Police Death Note (optionnelle) -------------------------------------
   Dépose un fichier de police dans assets/fonts/ et il sera utilisé
   automatiquement partout à la place de la police de secours.
   ------------------------------------------------------------------------ */
@font-face {
  font-family: 'DeathNote';
  src: url('../fonts/deathnote.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'DeathNoteNew';
  src: url('../fonts/DEATHNOTEFont.ttf') format('truetype');
  font-display: swap;
}

/* --- Emblème ---------------------------------------------------------------
   Les sources sont des JPEG blanc sur noir, donc sans transparence.
   Plutôt que d'inverser l'image (ce qui laisse un carré de fond visible dès
   qu'on n'est pas sur du blanc), on s'en sert comme MASQUE de luminance :
   l'élément est un aplat de couleur, découpé par les zones claires de
   l'image. Résultat : une vraie transparence, propre sur n'importe quel fond.
   ------------------------------------------------------------------------ */
.emblem {
  display: block; flex: 0 0 auto;
  background-color: var(--ink);
  -webkit-mask: url('../img/emblem.jpg') center / contain no-repeat;
          mask: url('../img/emblem.jpg') center / contain no-repeat;
  -webkit-mask-source-type: luminance;
          mask-mode: luminance;
}
.emblem--light { background-color: #fff; }   /* sur fond noir */

/* Un PNG déjà détouré se masque par son canal alpha au lieu de sa luminance.
   Si tu remplaces emblem.jpg par un emblem.png transparent, décommente : */
/*
.emblem {
  -webkit-mask-image: url('../img/emblem.png');
          mask-image: url('../img/emblem.png');
  -webkit-mask-source-type: alpha;
          mask-mode: alpha;
}
*/

:root {
  --paper:      #040509;
  --paper-2:    #0d0e14;
  --ink:        #f0ede6;
  --ink-2:      #c4c1ba;
  --muted:      #6a6a68;
  --line:       rgba(255,255,255,.09);
  --red:        #a8201d;
  --discord:    #5865f2;

  /* Death Note : logo, hero, et tous les titres/headings */
  --f-brand: 'DeathNoteNew', 'DeathNote', 'Metal Mania', serif;
  --f-title: 'DeathNoteNew', 'DeathNote', 'Metal Mania', 'Times New Roman', serif;
  --f-gothic: 'Pirata One', serif;
  --f-hand:  'DM Sans', -apple-system, 'Segoe UI', sans-serif;
  --f-cond:  'Geist', 'Arial', sans-serif;
  --f-ui:    'Inter', -apple-system, 'Segoe UI', sans-serif;

  --maxw: 1240px;
  --ease: cubic-bezier(.16,.84,.3,1);
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body {
  margin: 0;
  background-color: var(--paper);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E"),
    repeating-linear-gradient(to bottom, transparent 0 33px, rgba(255,255,255,.05) 33px 34px);
  color: var(--ink);
  font-family: var(--f-ui);
  font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4 { margin: 0; font-weight: 400; }
::selection { background: var(--ink); color: var(--paper); }

/* --- Cadre de page permanent (le site EST une page du carnet) ------------- */
.viewframe { position: fixed; inset: 0; z-index: 300; pointer-events: none; }
.viewframe::before {
  content: ''; position: absolute; inset: 0;
  border: 1.5px solid rgba(255,255,255,.38);
}
/* --- Ornements d'angle ---------------------------------------------------- */
.orn {
  position: absolute; pointer-events: none;
  width: 100px; height: 100px;
  background-color: rgba(255,255,255,.8);
  -webkit-mask-image: url('../img/page-template.png');
          mask-image: url('../img/page-template.png');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 858% 711%;
          mask-size: 858% 711%;
  -webkit-mask-source-type: alpha;
          mask-mode: alpha;
  clip-path: inset(14px);
}
.orn--tl { -webkit-mask-position:  4.43% 20.08%; mask-position:  4.43% 20.08%; }
.orn--tr { -webkit-mask-position: 92.68% 19.69%; mask-position: 92.68% 19.69%; }
.orn--bl { -webkit-mask-position:  4.64% 93.61%; mask-position:  4.64% 93.61%; }
.orn--br { -webkit-mask-position: 93.09% 93.99%; mask-position: 93.09% 93.99%; }

/* collés aux angles — offset négatif pour compenser le clip */
.viewframe .orn--tl { top: -14px;    left: -14px; }
.viewframe .orn--tr { top: -14px;    right: -14px; }
.viewframe .orn--bl { bottom: -14px; left: -14px; }
.viewframe .orn--br { bottom: -14px; right: -14px; }

/* Le logo d'origine est entièrement en capitales : on impose la casse
   sur tout ce qui est composé dans la police du titre. */
.hero__title, .brand b, .dnp__title, .sec__title, .cta h2,
.card__name, .step h3, .faq__q {
  text-transform: uppercase;
}

/* --- Utilitaires ---------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 46px; }
.center { text-align: center; }
.label {
  font-family: var(--f-cond); font-size: 13px; font-weight: 600;
  letter-spacing: .42em; text-transform: uppercase; color: var(--muted);
}
.red { color: var(--red); }

/* --- Header --------------------------------------------------------------- */
.hdr {
  position: fixed; top: 22px; z-index: 700;
  left: 50%; transform: translateX(-50%);
  width: calc(100% - 44px);
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 0 20px;
  padding: 0 52px; height: 72px;
  background: var(--paper); border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  transition:
    width .52s cubic-bezier(.4,0,.2,1),
    height .45s cubic-bezier(.4,0,.2,1),
    padding .45s cubic-bezier(.4,0,.2,1),
    border-radius .52s cubic-bezier(.4,0,.2,1),
    background .4s var(--ease),
    border-color .4s var(--ease),
    box-shadow .4s var(--ease);
}

/* --- État haut de page (hero) : transparent et large ---------------------- */
.hdr.is-top {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
.hdr.is-top .brand b { color: #fff; }
.hdr.is-top .brand .emblem { background-color: #fff; }
.hdr.is-top .nav a { color: rgba(255,255,255,.85); }
.hdr.is-top .nav a::after { background: rgba(255,255,255,.6); }
.hdr.is-top .nav a.on { color: var(--ink); }
.hdr.is-top .nav a.on::after { background: var(--ink); }
.hdr.is-top .drop__t { color: rgba(255,255,255,.85); }
.hdr.is-top .drop__t::after { background: rgba(255,255,255,.6); }
.hdr.is-top .drop__t.on { color: var(--ink); }
.hdr.is-top .drop__m {
  background: rgba(6,7,12,.92);
  border-color: rgba(255,255,255,.12);
  box-shadow: 8px 8px 0 -2px rgba(0,0,0,.6);
  backdrop-filter: blur(10px);
}
.hdr.is-top .drop__m a { color: rgba(255,255,255,.78); }
.hdr.is-top .drop__m a:hover { background: rgba(255,255,255,.06); color: #fff; }
.hdr.is-top .ico { color: rgba(255,255,255,.85); }
.hdr.is-top .ico:hover { border-color: rgba(255,255,255,.35); }
.hdr.is-top .ico__n { background: #fff; color: #040509; border-color: rgba(255,255,255,.6); }
.hdr.is-top .disc { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.25); }
.hdr.is-top .disc .disc__ico { background-color: #fff; }
.hdr.is-top .burger { border-color: rgba(255,255,255,.32); }
.hdr.is-top .burger span { background: #fff; }

/* --- État scrollé : pill arrondie centrée --------------------------------- */
/* left/right animés simultanément → le header se rétracte vers le centre   */
.hdr.is-compact {
  width: min(1060px, calc(100% - 44px));
  height: 56px;
  padding: 0 28px;
  border-radius: 999px;
  background: rgba(14, 15, 22, 0.55);
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  border-bottom-color: rgba(255,255,255,.13);
  box-shadow:
    0 8px 40px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.12),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.hdr.is-compact .nav a { color: rgba(255,255,255,.72); }
.hdr.is-compact .nav a:hover { color: #fff; }
.hdr.is-compact .brand b { color: var(--ink); }
.hdr.is-compact .brand .emblem { background-color: var(--ink); }
.hdr.is-compact .disc { width: 36px; height: 36px; }
.hdr.is-compact .disc__ico { width: 17px; height: 17px; }
.hdr.is-compact .brand__img { height: 40px; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand .emblem { width: 40px; height: 40px; }
.brand b { white-space: nowrap; }
.brand b {
  font-family: var(--f-brand); font-size: 27px; font-weight: 400;
  letter-spacing: .04em; line-height: 1;
}
.brand b i { font-style: normal; color: #fff; }
.brand__img { height: 56px; width: auto; display: block; object-fit: contain; }
.nav { display: flex; align-items: center; justify-content: center; gap: 34px; }
.hdr__r { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.nav a {
  font-family: var(--f-cond); font-size: 17px; font-weight: 500;
  letter-spacing: .01em; position: relative; padding: 4px 0;
}
.nav a::after {
  content: ''; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0;
  background: var(--ink); transition: width .3s var(--ease);
}
.nav a:hover::after, .nav a.on::after { width: 100%; }
.nav a.on { color: var(--ink); }
.nav a.on::after { background: var(--ink); }

/* --- Menu déroulant "Doc" ------------------------------------------------- */
.drop { position: relative; }
.drop__t {
  font-family: var(--f-cond); font-size: 15.5px; font-weight: 500;
  letter-spacing: .01em;
  background: none; border: 0; padding: 4px 0; cursor: pointer; color: var(--ink);
  display: flex; align-items: center; gap: 8px; position: relative;
}
.drop__t::after {
  content: ''; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0;
  background: var(--ink); transition: width .3s var(--ease);
}
.drop:hover .drop__t::after, .drop.open .drop__t::after { width: 100%; }
.drop__t.on { color: var(--ink); }
.drop__t.on::after { background: var(--ink); }
.drop__t i { font-style: normal; font-size: 9px; transition: transform .3s var(--ease); }
.drop.open .drop__t i { transform: rotate(180deg); }
.drop__m {
  position: absolute; top: calc(100% + 18px); left: 50%; transform: translateX(-50%) translateY(-8px);
  min-width: 190px; background: var(--paper); border: 1.5px solid var(--ink);
  padding: 6px; opacity: 0; visibility: hidden;
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  box-shadow: 8px 8px 0 -2px var(--ink);
}
.drop:hover .drop__m, .drop.open .drop__m { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.drop__m::before {   /* pont invisible pour ne pas perdre le survol */
  content: ''; position: absolute; top: -20px; left: 0; right: 0; height: 20px;
}
.drop__m a {
  display: block; padding: 12px 16px; letter-spacing: .18em; font-size: 13px;
}
.drop__m a::after { display: none; }
.drop__m a:hover { background: var(--paper-2); color: var(--ink); }

/* === Mega Menu Trigger ==================================================== */
.drop__mega-t {
  display: flex; align-items: center; gap: 2px;
}
.drop__mega-link {
  font-family: var(--f-cond); font-size: 17px; font-weight: 500;
  letter-spacing: .01em;
  color: var(--ink-2); text-decoration: none;
  position: relative; padding: 4px 0;
  transition: color .22s var(--ease);
}
.drop__mega-link::after {
  content: ''; position: absolute; left: 0; bottom: -2px;
  height: 1px; width: 0; background: var(--ink);
  transition: width .3s var(--ease);
}
.drop__mega-link:hover { color: var(--ink); }
.drop__mega-link.on { color: var(--ink); }
.drop__mega-link.on::after { background: var(--ink); width: 100%; }
.drop--mega:hover .drop__mega-link::after,
.drop--mega.open .drop__mega-link::after { width: 100%; }
.drop__mega-arr {
  background: none; border: 0; cursor: pointer; padding: 2px 5px;
  color: var(--muted); display: flex; align-items: center;
  transition: color .15s;
}
/* chevron fin : pointe vers le bas au repos, se retourne vers le haut dès que
   la souris est sur le menu ou qu'il est ouvert */
.drop__mega-arr svg { display: block; transition: transform .3s var(--ease); }
.drop--mega:hover .drop__mega-arr svg,
.drop--mega.open  .drop__mega-arr svg { transform: rotate(180deg); }
.drop__mega-arr:hover { color: var(--ink); }

/* === Mega Menu Shop ======================================================= */
.drop--mega .drop__mega {
  display: none;
  position: fixed;
  top: 64px; left: 50%; transform: translateX(-50%);
  width: min(700px, 96vw);
  background: rgba(6,7,13,.98);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px;
  box-shadow: 0 40px 80px rgba(0,0,0,.8), 0 0 0 .5px rgba(255,255,255,.04), 0 8px 24px rgba(0,0,0,.4);
  backdrop-filter: blur(28px);
  overflow: hidden;
  z-index: 9000;
  animation: mega-in .2s var(--ease) both;
}
.drop--mega.open .drop__mega { display: flex; }
@keyframes mega-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(.98); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* Left sidebar — games */
.mega__left {
  width: 188px; flex: 0 0 188px;
  border-right: 1px solid rgba(255,255,255,.06);
  padding: 16px 10px;
  display: flex; flex-direction: column; gap: 3px;
}
.mega__left-label {
  font-family: var(--f-cond); font-size: 10px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
  padding: 0 10px 10px;
}
.mega__game {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 10px 12px; border-radius: 10px;
  background: none; border: 0; cursor: pointer; text-align: left;
  color: var(--ink-2);
  font-family: var(--f-cond); font-size: 13.5px; font-weight: 600; letter-spacing: .02em;
  transition: background .15s, color .15s;
}
.mega__game-thumb {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 8px;
  background: var(--paper) center / cover no-repeat;
  border: 1px solid rgba(255,255,255,.12);
}
.mega__game > span { flex: 1; }
.mega__game > svg { opacity: 0; transition: opacity .15s; }
.mega__game:hover { background: rgba(255,255,255,.05); color: var(--ink); }
.mega__game.on { background: rgba(255,255,255,.09); color: var(--ink); }
.mega__game.on > svg { opacity: .5; }

/* Right panel — products */
.mega__right { flex: 1; padding: 14px 20px; display: flex; flex-direction: column; }
.mega__right-label {
  font-family: var(--f-cond); font-size: 10px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 12px;
}
.mega__prods { display: flex; flex-direction: column; gap: 8px; flex: 1; }
/* Préfixé par .nav : sans ça, `.nav a { padding: 4px 0 }` l'emporte sur une
   simple classe et écrase le padding de la carte. */
.nav .mega__prod {
  display: flex; align-items: center; gap: 14px;
  /* le cadre déborde de 10px de chaque côté sans déplacer son contenu :
     la marge négative compense exactement le padding ajouté */
  margin: 0 -10px; padding: 12px 16px; border-radius: 10px;
  text-decoration: none;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.12);
  transition: border-color .2s ease, background .2s ease;
}
.mega__prod::after { display: none !important; }
.nav .mega__prod:hover {
  border-color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.05);
}
.mega__prod-thumb {
  width: 52px; height: 52px; flex: 0 0 52px; border-radius: 8px;
  background: var(--paper-2) center / cover no-repeat;
  border: 1px solid rgba(255,255,255,.1);
}
.mega__prod-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.mega__prod-name {
  font-family: var(--f-cond); font-size: 14.5px; font-weight: 700; color: var(--ink);
  letter-spacing: -.01em;
}
.mega__prod-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-cond); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.mega__prod-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
.mega__status--ud   { color: #4ade80; }
.mega__status--ud::before   { background: #4ade80; box-shadow: 0 0 6px rgba(74,222,128,.9); }
.mega__status--maj  { color: #fbbf24; }
.mega__status--maj::before  { background: #fbbf24; }
.mega__status--down { color: #f87171; }
.mega__status--down::before { background: #f87171; }
.mega__status--soon { color: var(--muted); }
.mega__status--soon::before { background: var(--muted); }
.mega__prod-price {
  font-family: var(--f-cond); font-size: 14px; font-weight: 700;
  color: var(--ink); white-space: nowrap; margin-left: auto;
}
.nav .mega__viewall {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 14px; padding: 14px 6px 0;
  border-top: 1px solid rgba(255,255,255,.06);
  font-family: var(--f-cond); font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; transition: color .15s;
}
.mega__viewall:hover { color: var(--ink); }
@media (max-width: 680px) {
  .drop--mega .drop__mega { width: 100vw; left: 0; border-radius: 0; transform: none; }
}

/* --- Bouton Discord ---------------------------------------------------------
   Le logo est un PNG détouré, posé en masque pour pouvoir le recolorer.
   Au repos : encre noire sur papier, halo discret.
   Au survol : bascule sur le blurple Discord avec une lueur qui déborde.
   ------------------------------------------------------------------------ */
.disc {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; flex: 0 0 auto;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 14px;
  box-shadow: 0 4px 14px -6px rgba(0,0,0,.5);
  transition: background .35s var(--ease), border-color .35s var(--ease),
              box-shadow .35s var(--ease), transform .35s var(--ease);
}
.disc::after { display: none; }

/* la lueur, en calque séparé pour pouvoir la flouter sans toucher au bouton */
.disc::before {
  content: ''; position: absolute; inset: -6px; z-index: -1;
  border-radius: 20px; background: var(--discord);
  opacity: 0; filter: blur(14px);
  transition: opacity .35s var(--ease);
}
.disc__ico {
  width: 24px; height: 24px; display: block;
  background-color: var(--ink);
  -webkit-mask: url('../img/discord.png') center / contain no-repeat;
          mask: url('../img/discord.png') center / contain no-repeat;
  transition: background-color .35s var(--ease);
}
.disc:hover {
  background: var(--discord);
  border-color: var(--discord);
  transform: translateY(-3px);
  box-shadow: 0 12px 26px -10px rgba(88,101,242,.9);
}
.disc:hover::before { opacity: .55; }
.disc:hover .disc__ico { background-color: #fff; }
.disc:active { transform: translateY(-1px); }

/* variante posée sur les fonds noirs */
.disc--light { background: transparent; border-color: rgba(255,255,255,.35); }
.disc--light .disc__ico { background-color: var(--paper); }
.burger { display: none; width: 40px; height: 34px; border: 1px solid var(--ink); background: none; cursor: pointer; padding: 0; }
.burger span { display: block; width: 17px; height: 1.6px; background: var(--ink); margin: 3.4px auto; transition: .3s; }

/* --- Locale switcher ------------------------------------------------------- */
.lc { position: relative; }
.lc__t {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 9px; border: 1.5px solid var(--line);
  background: transparent; color: var(--ink); cursor: pointer;
  font-family: var(--f-cond); font-size: 13px; font-weight: 600; letter-spacing: .04em;
  transition: background .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.lc__t:hover, .lc.open .lc__t { background: rgba(255,255,255,.07); border-color: var(--ink); }
.lc__sep { opacity: .35; }
.lc__cur { opacity: .7; }
.lc__t svg { opacity: .5; transition: transform .2s ease; }
.lc.open .lc__t svg { transform: rotate(180deg); }

.lc__flag {
  width: 22px; height: 16px; border-radius: 3px;
  object-fit: cover; flex-shrink: 0; display: block;
}

.lc__m {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 800;
  background: #0d0e14; border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px; overflow: hidden; min-width: 190px;
  box-shadow: 0 20px 50px rgba(0,0,0,.65);
  opacity: 0; pointer-events: none;
  transform: translateY(-8px) scale(.96);
  transition: opacity .2s ease, transform .2s ease;
}
.lc.open .lc__m { opacity: 1; pointer-events: all; transform: none; }
.lc__sec {
  font-family: var(--f-cond); font-size: 10px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.3); padding: 10px 16px 4px; margin: 0;
}
.lc__m button {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 10px 16px; background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,.65); font-family: var(--f-hand); font-size: 14px;
  text-align: left; transition: background .15s ease, color .15s ease;
}
.lc__m button:hover { background: rgba(255,255,255,.07); color: #fff; }
.lc__m button.on { color: #fff; }
.lc__m button.on::after { content: '✓'; margin-left: auto; opacity: .6; font-size: 12px; }
.lc__hr { border-top: 1px solid rgba(255,255,255,.07); margin: 4px 0; }

/* is-top : widget sur fond sombre */
.hdr.is-top .lc__t { border-color: rgba(255,255,255,.28); color: #fff; }
.hdr.is-top .lc__t:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.55); }

/* --- Actions du header (recherche, panier) --------------------------------- */
.acts { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.ico {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: 0 0 auto; cursor: pointer;
  background: transparent; border: 1.5px solid transparent; border-radius: 14px;
  color: var(--ink); transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.ico:hover { border-color: var(--ink); transform: translateY(-2px); }
.ico svg { width: 21px; height: 21px; display: block; }
.ico::after { display: none; }
.ico__n {
  position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
  background: var(--paper); color: var(--ink); border: 1.5px solid var(--ink); border-radius: 9px;
  font-family: var(--f-cond); font-size: 11px; font-weight: 700; line-height: 1;
}

/* --- Panneau de recherche --------------------------------------------------- */
.srch {
  position: fixed; top: 82px; right: 22px; width: 340px; z-index: 690;
  background: #0d0e14; border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.7), 0 4px 16px rgba(0,0,0,.4);
  opacity: 0; pointer-events: none;
  transform: translateY(-10px) scale(.97);
  transition: opacity .22s ease, transform .22s ease;
}
.srch.on { opacity: 1; pointer-events: all; transform: none; }

.srch__head { padding: 14px 14px 0; }
.srch__inp {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.07); border-radius: 10px; padding: 11px 14px;
}
.srch__inp > svg { width: 17px; height: 17px; flex: 0 0 auto; opacity: .4; color: #fff; }
.srch__inp input {
  flex: 1; background: none; border: none; outline: none;
  font-family: var(--f-hand); font-size: 14px; color: #fff;
}
.srch__inp input::placeholder { color: rgba(255,255,255,.35); }
.srch__cls {
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,.35); font-size: 14px; line-height: 1; padding: 0;
  transition: color .18s ease;
}
.srch__cls:hover { color: rgba(255,255,255,.75); }

.srch__body { padding: 10px 6px 8px; }
.srch__sec {
  font-family: var(--f-cond); font-size: 10px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.32); padding: 8px 10px 6px; margin: 0;
}
.srch__row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 9px 10px; border-radius: 10px; border: none;
  background: transparent; color: #fff; text-align: left; cursor: pointer;
  text-decoration: none; transition: background .16s ease;
}
.srch__row:hover { background: rgba(255,255,255,.07); }
.srch__thumb {
  width: 42px; height: 42px; border-radius: 8px; flex: 0 0 auto;
  background-size: cover; background-position: center;
  background-color: rgba(255,255,255,.07);
}
.srch__row > span {
  flex: 1; font-family: var(--f-hand); font-size: 14px; font-weight: 600;
  display: flex; flex-direction: column; gap: 2px;
}
.srch__row > span small {
  font-size: 11px; font-weight: 400; color: rgba(255,255,255,.4);
}
.srch__row > svg { flex: 0 0 auto; opacity: .28; transition: opacity .16s ease; }
.srch__row:hover > svg { opacity: .65; }
#srch-r { padding: 0; }
.srch__vide { font-family: var(--f-hand); font-size: 13px; color: rgba(255,255,255,.35); padding: 12px 10px; }

/* --- Panier ------------------------------------------------------------------ */
.voile {
  position: fixed; inset: 0; z-index: 940; background: rgba(0,0,0,.55);
  opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s;
}
.voile.on { opacity: 1; visibility: visible; }
.pan {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 950;
  width: min(430px, 92vw); background: var(--paper);
  border-left: 2px solid var(--ink);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .42s var(--ease);
}
.pan.on { transform: none; }
.pan__h {
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px 28px; border-bottom: 1.5px solid var(--ink);
}
.pan__h h3 { font-family: var(--f-title); text-transform: uppercase; font-size: 28px; letter-spacing: .06em; }
.pan__x { background: none; border: 0; cursor: pointer; font-size: 26px; line-height: 1; color: var(--ink); padding: 0 4px; }
.pan__x:hover { color: rgba(255,255,255,.7); }
.pan__l { flex: 1; overflow-y: auto; padding: 8px 28px; }
.pan__i { display: flex; gap: 14px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.pan__v { width: 74px; height: 52px; flex: 0 0 auto; background: var(--ink) center / cover no-repeat; filter: grayscale(1) contrast(1.3); }
.pan__d { flex: 1; min-width: 0; }
.pan__d b { display: block; font-family: var(--f-title); text-transform: uppercase; font-size: 19px; letter-spacing: .04em; }
.pan__d span { font-family: var(--f-cond); font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.pan__p { text-align: right; font-family: var(--f-cond); font-size: 21px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.pan__sup { display: block; margin-top: 6px; background: none; border: 0; cursor: pointer; font-family: var(--f-cond); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); padding: 0; }
.pan__sup:hover { color: rgba(255,255,255,.7); }
.pan__vide { padding: 60px 0; text-align: center; font-family: var(--f-hand); font-size: 18px; color: var(--muted); }
.pan__f { border-top: 1.5px solid var(--ink); padding: 24px 28px 28px; }
.pan__t { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; }
.pan__t span { font-family: var(--f-cond); font-size: 13px; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); }
.pan__t b { font-family: var(--f-cond); font-size: 34px; font-weight: 700; letter-spacing: -.02em; }
.pan__f .btn { width: 100%; justify-content: center; }
.pan__n { font-family: var(--f-hand); font-size: 14.5px; color: var(--muted); margin: 14px 0 0; text-align: center; line-height: 1.5; }

/* --- Boutons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  cursor: pointer; padding: 15px 34px; border-radius: 10px;
  font-family: var(--f-cond); font-size: 14px; font-weight: 700;
  letter-spacing: .01em;
  border: 1.5px solid var(--ink); background: transparent; color: var(--ink);
  transition: background .22s ease, color .22s ease, border-color .22s ease,
              transform .18s ease, box-shadow .22s ease;
  user-select: none;
}
.btn:hover { background: var(--ink); color: var(--paper); transform: translateY(-2px); }
.btn > * { position: relative; }
.btn--fill {
  background: var(--ink); color: var(--paper);
  box-shadow: 0 4px 18px rgba(4,5,9,.22);
}
.btn--fill:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); box-shadow: 0 8px 28px rgba(0,0,0,.35); }
.btn--red { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 4px 18px rgba(193,18,31,.3); }
.btn--red:hover { background: var(--ink); border-color: var(--ink); box-shadow: 0 8px 28px rgba(4,5,9,.35); }
.btn--sm { padding: 10px 22px; font-size: 12px; border-radius: 8px; }

/* Cart "Order in a ticket" — dark glass */
#pan-go {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.18);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 4px 18px rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
}
#pan-go:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.32);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 8px 24px rgba(0,0,0,.4);
  transform: translateY(-2px);
}

/* Boutons hero sur fond sombre */
.hero--home .hero__acts .btn {
  min-width: 210px; border-color: rgba(255,255,255,.32); color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.06); backdrop-filter: blur(8px);
}
.hero--home .hero__acts .btn:hover {
  background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.65); color: #fff;
  transform: translateY(-3px);
}
.hero--home .hero__acts .btn--fill {
  background: #fff; color: #040509; border-color: #fff;
  box-shadow: 0 4px 28px rgba(255,255,255,.22);
}
.hero--home .hero__acts .btn--fill:hover {
  background: #fff; border-color: #fff; color: #040509;
  box-shadow: 0 10px 44px rgba(255,255,255,.38); transform: translateY(-3px);
}

/* --- HERO ----------------------------------------------------------------- */
.hero {
  min-height: 100svh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 80px 0 180px; position: relative;
}
.hero__ghost {
  position: absolute; top: 50%; left: 50%;
  width: min(74vmin, 640px); aspect-ratio: 1;
  transform: translate(-50%,-50%); opacity: .05; pointer-events: none;
}
.hero__emblem { width: 168px; height: 168px; margin: 0 auto 10px; animation: float-slow 9s ease-in-out infinite; }
.hero__title {
  font-family: var(--f-brand);
  font-size: clamp(74px, 15.5vw, 236px);
  line-height: .82; letter-spacing: .01em; margin: 22px 0 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .3em;
}
/* posé sur le mot lui-même : le titre n'est plus découpé en lettres */
.hero__title .w2 { color: var(--red); }

/* Le titre émerge du zoom de l'intro au lieu de se déployer lettre à lettre :
   il part surdimensionné et flou, comme s'il était encore dans le mouvement
   du carnet, puis se pose. Déclenché pendant bk-dive, pas après. */
.js .hero__title { opacity: 0; }
.js .hero__title--in { animation: hero-title-in 1.05s cubic-bezier(.16,.84,.3,1) both; }
@keyframes hero-title-in {
  from { opacity: 0; transform: scale(1.32); filter: blur(16px); }
  to   { opacity: 1; transform: none;        filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .js .hero__title { opacity: 1; }
  .js .hero__title--in { animation: none; }
}
.hero__tag {
  font-family: var(--f-cond); font-size: clamp(22px, 3.5vw, 40px);
  font-weight: 700; letter-spacing: .01em; line-height: 1.15;
  color: var(--ink); margin: 48px auto 0; max-width: 640px;
  text-transform: uppercase;
}
.hero__sub {
  font-family: var(--f-hand); font-size: clamp(14px, 1.6vw, 18px);
  color: var(--ink-2); max-width: 560px; margin: 14px auto 0; line-height: 1.75;
}
.hero__acts { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 42px; }
/* --- Scroll indicator (molette) --------------------------------------- */
.hero__scroll {
  position: absolute; bottom: 52px; right: 52px; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-decoration: none; opacity: .6;
  transition: opacity .3s var(--ease);
  color: #fff;
}
.hero__scroll:hover { opacity: 1; }
.hero--home .hero__scroll { position: absolute; z-index: 3; }
.hero__scroll-mouse {
  width: 22px; height: 36px;
  border: 2px solid rgba(255,255,255,.65);
  border-radius: 11px;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 5px;
}
.hero__scroll-dot {
  display: block; width: 3px; height: 7px;
  background: #fff; border-radius: 999px;
  animation: scroll-dot 1.8s cubic-bezier(.16,.84,.44,1) infinite;
}
.hero__scroll-label {
  font-family: var(--f-cond); font-size: 9px; letter-spacing: .5em;
  text-transform: uppercase; color: rgba(255,255,255,.45);
}
@keyframes scroll-dot {
  0%   { transform: translateY(0);    opacity: 1; }
  60%  { transform: translateY(12px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 0; }
}
@keyframes drop { 0% { transform: scaleY(0); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: top; } 56% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* --- Hero de la page d'accueil : scène nocturne de jeu -------------------
   Signale "reseller de solutions gaming" dès l'arrivée : skyline, voiture,
   silhouette au téléphone. Uniquement sur .hero--home (accueil) : les
   autres pages réutilisent .hero comme simple bandeau de titre et restent
   sur le papier blanc habituel.
   ------------------------------------------------------------------------ */
.hero--home {
  position: relative; overflow: hidden; isolation: isolate;
  background: #05060a;
}
.hero--home::before {
  content: ''; position: absolute; top: -20px; right: -20px; bottom: -20px; left: -20px; z-index: 0;
  background: url("../img/NEW%20BACKGROUND.jpeg") center top / cover no-repeat;
  /* Flou abaissé de 6 à 3px et luminosité remontée : l'illustration ne compte
     que 9 % de pixels au-dessus de 40 de luminance (moyenne 17/255). Telle
     quelle, sous le voile du ::after, elle retombait à 9/255, soit invisible.
     Valeurs d'origine si besoin : filter: blur(6px); sans brightness. */
  filter: blur(3px) brightness(1.5);
  animation: kenburns 22s ease-in-out infinite alternate;
  transform-origin: center top;
  opacity: var(--hero-img-fade, 1);
  will-change: opacity;
}
.hero--home::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  /* Voile allégé en haut pour laisser voir l'illustration ; le bas reste dense
     pour le raccord avec la page. Valeurs d'origine : .65 / .30 / .42 / .82 */
  background: linear-gradient(to bottom,
    rgba(4,5,9,.38) 0%,
    rgba(4,5,9,.14) 22%,
    rgba(4,5,9,.34) 48%,
    rgba(4,5,9,.80) 74%,
    var(--paper) 90%);
}
.hero--home > * { position: relative; z-index: 2; }

.hero--home .label { color: rgba(255,255,255,.72); }
.hero--home .hero__title { color: var(--ink); }
.hero--home .hero__tag { color: rgba(255,255,255,.92); }
.hero--home .hero__sub { color: rgba(255,255,255,.68); }
.hero--home .trust li { color: rgba(255,255,255,.92); }
.hero--home .trust li svg { opacity: .75; }

.hero--home .hero__emblem {
  filter: drop-shadow(0 0 26px rgba(193,18,31,.55));
}

.hero--home .btn { border-color: var(--paper); color: var(--paper); }
.hero--home .btn::before { background: var(--paper); }
.hero--home .btn:hover { color: var(--ink); }
.hero--home .btn--fill { background: var(--red); border-color: var(--red); color: #fff; }
.hero--home .btn--fill::before { background: var(--paper); }
.hero--home .btn--fill:hover { color: var(--ink); }

/* --- Ticker --------------------------------------------------------------- */
.ticker { background: var(--ink); color: var(--paper); overflow: hidden; white-space: nowrap; padding: 14px 0; }
.ticker__t { display: inline-block; animation: slide 38s linear infinite; }
.ticker span { font-family: var(--f-cond); font-size: 14px; font-weight: 500; letter-spacing: .34em; text-transform: uppercase; padding: 0 30px; }
.ticker span::after { content: '\2716'; margin-left: 30px; color: rgba(255,255,255,.3); font-size: 10px; vertical-align: middle; }
@keyframes slide { to { transform: translateX(-50%); } }

/* --- LA PAGE (disposition exacte du Death Note) --------------------------- */
.dnp {
  position: relative; background: var(--paper);
  border: 1.5px solid var(--ink);
  padding: 74px 52px 56px;
  margin-top: 46px;               /* place pour l'emblème à cheval sur le bord */
}
/* les ornements sont posés aux quatre angles, comme sur la planche d'origine,
   au lieu d'être étirés en border-image */
.dnp .orn { width: 46px; height: 46px; z-index: 2; }
.dnp .orn--tl { top: 10px;    left: 10px; }
.dnp .orn--tr { top: 10px;    right: 10px; }
.dnp .orn--bl { bottom: 10px; left: 10px; }
.dnp .orn--br { bottom: 10px; right: 10px; }
/* emblème centré sur le bord supérieur, comme sur la planche d'origine */
.dnp__emb {
  position: absolute; top: 0; left: 50%; z-index: 2;
  transform: translate(-50%, -50%);
  width: 118px; height: 118px;
}
.dnp__emb::before {                /* pastille de papier qui masque le trait */
  content: ''; position: absolute; inset: 27%;
  background: var(--paper); border-radius: 50%;
}
.dnp__emb .emblem { position: relative; width: 100%; height: 100%; }

.dnp__head { text-align: center; margin-bottom: 34px; }
.dnp__head .emb { width: 54px; height: 54px; margin: 0 auto 12px; }
.dnp__title { font-family: var(--f-title); font-size: clamp(30px, 4.2vw, 48px); letter-spacing: .1em; line-height: 1; }
.dnp__how { font-family: var(--f-hand); font-size: 16px; letter-spacing: .22em; margin-top: 6px; }
/* Metal Mania rend mal les chiffres romains (le "II" devient "] ]"),
   on garde donc une condensée nette pour la numérotation des pages. */
.dnp__num { font-family: var(--f-cond); font-weight: 700; font-size: 22px; letter-spacing: .3em; display: block; margin-top: 10px; }

/* liste de règles : ○ + ligne principale + ligne secondaire (comme les kanji) */
.rules li { position: relative; padding-left: 26px; margin-bottom: 26px; }
.rules li::before { content: '\25CB'; position: absolute; left: 0; top: 2px; font-size: 13px; color: rgba(255,255,255,.35); }
.rules p { font-family: var(--f-hand); font-size: 18px; line-height: 1.68; margin: 0; }
.rules p em { font-style: normal; box-shadow: inset 0 -.42em 0 rgba(193,18,31,.16); }
.rules small {
  display: block; margin-top: 7px; font-family: var(--f-hand);
  font-size: 13px; line-height: 1.5; color: var(--muted);
}

/* --- Sections ------------------------------------------------------------- */
.sec { padding: 80px 0; }
.sec--flush { padding: 80px 0 0; }

/* Section-level spacing overrides — harmonisés pour le flow de la LP */
#solutions-sec    { margin-top: -72px; position: relative; z-index: 1; padding-top: 96px; }
#solutions-sec::before {
  content: '';
  position: absolute;
  top: -180px; left: 0; right: 0;
  height: 220px;
  background: linear-gradient(to bottom, transparent 0%, var(--paper) 45%);
  pointer-events: none;
  z-index: -1;
}
.why-sec          { padding-top: 56px; }
.faq-home-sec     { padding-top: 88px; }
.showcase-yt-sec  { padding-top: 68px; padding-bottom: 60px; }
.sec__head { text-align: center; margin-bottom: 64px; }
.sec__num { font-family: var(--f-cond); font-weight: 700; font-size: 20px; letter-spacing: .45em; color: var(--red); display: block; margin-bottom: 14px; animation: pulse-num 4s ease-in-out infinite; }
.sec__title { font-family: var(--f-title); font-size: clamp(40px, 6.6vw, 84px); line-height: .95; letter-spacing: .03em; }
.sec__desc { font-family: var(--f-hand); font-size: 18px; color: var(--ink-2); max-width: 560px; margin: 20px auto 0; }

/* --- Filtres -------------------------------------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 52px; }
.filters button {
  font-family: var(--f-cond); font-size: 13px; font-weight: 600; letter-spacing: .24em;
  text-transform: uppercase; padding: 11px 20px; border: 1.4px solid var(--ink);
  background: transparent; color: var(--ink); cursor: pointer; transition: .28s var(--ease);
}
.filters button:hover { background: var(--paper-2); }
.filters button.on { background: var(--ink); color: var(--paper); }

/* --- Carte produit -------------------------------------------------------- */
.grid { display: grid; gap: 30px; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.card {
  position: relative; background: var(--paper); border: 2px solid var(--ink);
  display: flex; flex-direction: column; overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  cursor: pointer;
}
.card:hover { transform: translateY(-9px) scale(1.012); box-shadow: 0 0 0 1.5px rgba(255,255,255,.2), 0 28px 56px rgba(0,0,0,.5); }

.card__art { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--ink); border-bottom: 2px solid var(--ink); }
.card__bg {
  position: absolute; inset: 0; background: center / cover no-repeat;
  transition: transform .9s var(--ease), filter .5s var(--ease);
}
.card:hover .card__bg { transform: scale(1.08); }
.card__bg.is-photo { filter: grayscale(1) contrast(1.4); }
.card:hover .card__bg.is-photo { filter: grayscale(0) contrast(1.05); }
.card__jeu {
  position: absolute; left: 20px; bottom: 15px; z-index: 2; color: #fff;
  font-family: var(--f-cond); font-size: clamp(26px, 3.4vw, 38px); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; line-height: 1;
  text-shadow: 3px 3px 0 var(--red);
}

.card__badge {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-cond); font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; padding: 5px 12px 5px 8px;
  background: rgba(4,5,9,.82); border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px; backdrop-filter: blur(10px);
}
.card__badge::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
}
.card__badge.ud   { color: #4ade80; border-color: rgba(74,222,128,.35); animation: badge-pulse 2.8s ease-in-out infinite; }
.card__badge.ud::before   { background: #4ade80; box-shadow: 0 0 7px rgba(74,222,128,.9); }
.card__badge.maj  { color: #fbbf24; border-color: rgba(251,191,36,.35); }
.card__badge.maj::before  { background: #fbbf24; box-shadow: 0 0 7px rgba(251,191,36,.9); }
.card__badge.down { color: #f87171; border-color: rgba(248,113,113,.35); }
.card__badge.down::before { background: #f87171; box-shadow: 0 0 7px rgba(248,113,113,.8); }
.card__badge.soon { color: var(--muted); border-color: rgba(255,255,255,.1); }
.card__badge.soon::before { background: var(--muted); }
@keyframes badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
  50%       { box-shadow: 0 0 0 6px rgba(74,222,128,.1); }
}

.card__body { padding: 24px 24px 0; flex: 1; }
.card__name { font-family: var(--f-title); font-size: 38px; letter-spacing: .03em; line-height: 1.05; margin-bottom: 14px; }
.card__feats li { font-family: var(--f-hand); font-size: 16px; line-height: 1.55; color: var(--ink-2); padding-left: 20px; position: relative; }
.card__feats li::before { content: '\2714'; position: absolute; left: 0; top: 2px; font-size: 10px; color: #4ade80; font-family: var(--f-ui); }
.card__specs { font-family: var(--f-cond); font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: 16px; }

.durees { display: flex; flex-wrap: wrap; gap: 8px; padding: 20px 24px 0; }
.durees button {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 16px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s;
  min-width: 72px;
}
.durees button .dur-label {
  font-family: var(--f-cond); font-size: 10px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
  line-height: 1;
}
.durees button .dur-price {
  font-family: var(--f-cond); font-size: 16px; font-weight: 700;
  letter-spacing: -.01em; color: var(--ink); line-height: 1;
}
.durees button:hover { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.06); }
.durees button.on {
  border-color: rgba(96,165,250,.65);
  background: rgba(96,165,250,.1);
  box-shadow: 0 0 16px rgba(96,165,250,.12), 0 0 0 1px rgba(96,165,250,.2);
}
.durees button.on .dur-label { color: rgba(96,165,250,.85); }
.durees button.on .dur-price { color: #fff; }


.card__foot { margin-top: 20px; padding: 18px 24px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.price b { font-family: var(--f-cond); font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.price small { display: block; font-family: var(--f-cond); font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }

/* --- Étapes --------------------------------------------------------------- */
.steps { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); }
.step { padding: 6px 30px; border-left: 1px solid var(--line); }
.step:first-child { border-left: 0; padding-left: 0; }
.step__n { font-family: var(--f-title); font-size: 62px; line-height: 1; color: var(--red); display: block; margin-bottom: 16px; }
.step h3 { font-family: var(--f-title); font-size: 27px; letter-spacing: .04em; margin-bottom: 10px; }
.step p { font-family: var(--f-hand); font-size: 16.5px; color: var(--ink-2); margin: 0; }

/* --- Bande chiffres ------------------------------------------------------- */
.stats { background: var(--ink); color: var(--paper); display: grid; grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); }
.stat { padding: 54px 22px; text-align: center; border-left: 1px solid rgba(255,255,255,.16); }
.stat:first-child { border-left: 0; }
.stat b { font-family: var(--f-title); font-size: 56px; display: block; line-height: 1; }
.stat span { font-family: var(--f-cond); font-size: 12.5px; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.55); }

/* --- Avis ----------------------------------------------------------------- */
.reviews { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); }
.review { border: 2px solid var(--ink); padding: 30px 28px; background: var(--paper); }
.review p { font-family: var(--f-hand); font-size: 18px; margin: 0 0 22px; line-height: 1.65; }
.review footer { display: flex; align-items: center; gap: 12px; font-family: var(--f-cond); font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.stars { color: var(--red); font-size: 13px; }

/* --- FAQ ------------------------------------------------------------------ */
.faq { max-width: 840px; margin: 0 auto; }
.faq__i { border-bottom: 1px solid var(--ink); }
.faq__i:first-child { border-top: 1px solid var(--ink); }
.faq__q { width: 100%; background: none; border: 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px 6px; text-align: left; font-family: var(--f-title); font-size: 24px; letter-spacing: .02em; color: var(--ink); transition: padding .3s var(--ease); }
.faq__q:hover { padding-left: 16px; }
.faq__q i { font-style: normal; font-size: 24px; color: var(--red); transition: transform .35s var(--ease); }
.faq__i.on .faq__q i { transform: rotate(135deg); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.faq__a p { font-family: var(--f-hand); font-size: 17.5px; color: var(--ink-2); margin: 0 6px 28px; line-height: 1.7; }

/* --- Pages de règles (grille) --------------------------------------------- */
.pages { display: grid; gap: 40px; grid-template-columns: repeat(auto-fit, minmax(400px,1fr)); }

/* --- CTA ------------------------------------------------------------------ */
.card__jeu, .sol__jeu { display: none; }

/* --- CTA ------------------------------------------------------------------ */
.cta {
  background: linear-gradient(
    to bottom,
    transparent        0%,
    rgba(4,5,9,.55)   28%,
    rgba(4,5,9,.88)   60%,
    var(--paper)      100%
  );
  color: var(--ink); padding: 96px 40px; text-align: center; position: relative;
}
.cta h2 { font-family: var(--f-title); font-size: clamp(38px,6vw,74px); letter-spacing: .03em; margin-bottom: 16px; }
.cta p { font-family: var(--f-hand); font-size: 19px; color: rgba(255,255,255,.7); max-width: 540px; margin: 0 auto 36px; }
.cta .btn { border-color: var(--ink); color: var(--ink); }
.cta .btn::before { background: var(--paper); }
.cta .btn:hover { color: var(--paper); }

/* --- Footer --------------------------------------------------------------- */
.ftr { border-top: 2px solid var(--ink); padding: 70px 0 40px; }
.ftr__g { display: grid; gap: 44px; grid-template-columns: 1.7fr 1fr 1fr 1fr; }
.ftr__g h4 { font-family: var(--f-cond); font-size: 13px; letter-spacing: .3em; text-transform: uppercase; margin-bottom: 20px; }
.ftr__g li { margin-bottom: 10px; }
.ftr__g a { font-size: 14.5px; color: var(--muted); transition: color .2s; }
.ftr__g a:hover { color: var(--ink); }
.ftr__about p { font-family: var(--f-hand); font-size: 16.5px; color: var(--ink-2); max-width: 330px; margin: 18px 0 0; }
.ftr__note { border: 1px dashed var(--ink); padding: 22px 26px; margin-top: 48px; font-size: 13px; color: var(--muted); text-align: center; line-height: 1.7; }
.ftr__b { margin-top: 30px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: var(--f-cond); font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

/* --- Intro cinématique ---------------------------------------------------- */
#intro {
  position: fixed; inset: 0; z-index: 1000; background: #000;
  display: flex; align-items: center; justify-content: center;
  perspective: 1700px; perspective-origin: 50% 46%;
}
#intro .sk { position: absolute; bottom: 42px; font-family: var(--f-cond); font-size: 12px; letter-spacing: .34em; text-transform: uppercase; color: rgba(255,255,255,.35); background: none; border: 0; cursor: pointer; z-index: 2; }
#intro.out { opacity: 0; transition: opacity .4s var(--ease); pointer-events: none; }

/* lueur qui monte du carnet pendant l'ouverture */
#intro::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 46% 40% at 50% 48%, rgba(255,255,255,.18), transparent 68%);
  animation: bk-glow 1.5s .8s both;
}

/* Le plongeon est sur un parent séparé de l'entrée du livre : deux animations
   qui touchent transform sur le même élément s'écrasent l'une l'autre. */
.bk-stage {
  transform-style: preserve-3d;
  animation: bk-dive .9s 1.75s cubic-bezier(.55,0,.85,.35) both;
}
.bk {
  position: relative; width: min(340px, 52vw); aspect-ratio: 5 / 7;
  transform-style: preserve-3d;
  animation: bk-enter .7s cubic-bezier(.2,.7,.3,1) both;
}

/* Page de droite révélée par l'ouverture : les règles du carnet.
   `contain` et non `cover` : l'image est plus étroite que la page (0.689 contre
   0.714), donc `cover` rognait le sceau en haut. Les bandes laissées par
   `contain` sont noires sur fond noir, donc invisibles. */
.bk__page {
  position: absolute; inset: 0; border-radius: 3px 8px 8px 3px;
  background: #000 url("../img/first%20page%27.jpg") center / contain no-repeat;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: inset 0 0 60px rgba(0,0,0,.55), 0 30px 60px rgba(0,0,0,.8);
}
.bk__cover {
  position: absolute; inset: 0;
  transform-origin: left center; transform-style: preserve-3d;
  animation: bk-open 1.1s .75s cubic-bezier(.55,.05,.25,1) both;
}
.bk__cover::before {   /* tranche claire côté reliure */
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 6px; z-index: 2;
  background: linear-gradient(90deg, rgba(255,255,255,.22), rgba(255,255,255,0));
  border-radius: 3px 0 0 3px;
}
.bk__face {
  position: absolute; inset: 0; backface-visibility: hidden;
  border-radius: 3px 8px 8px 3px;
}
/* La vraie couverture, recadrée sur le livre seul : la photo source est posée
   sur fond blanc, ces valeurs viennent de la boîte englobante mesurée au pixel
   (livre = 530x753 dans un carré de 1001), avec un léger surzoom pour couper
   en dedans des bords et ne jamais laisser passer de blanc. */
.bk__face--out {
  background: #000 url("../img/death%20note%20couverture.jpg") 52.6% 53% / 192% no-repeat;
  box-shadow: 0 30px 70px rgba(0,0,0,.85);
}
/* intérieur de la couverture = page de gauche, restée vierge comme dans le carnet */
.bk__face--in {
  transform: rotateY(180deg);
  background: #0a0a0e;
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: inset 0 0 50px rgba(0,0,0,.8);
}

@keyframes bk-enter {
  from { opacity: 0; transform: translateY(26px) rotateX(24deg) rotateZ(-3deg) scale(.9); }
  to   { opacity: 1; transform: translateY(0)    rotateX(9deg)  rotateZ(0deg)  scale(1); }
}
@keyframes bk-open {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(-165deg); }
}
@keyframes bk-dive {
  from { transform: scale(1);  opacity: 1; }
  65%  { opacity: 1; }
  to   { transform: scale(14); opacity: 0; }
}
@keyframes bk-glow { 0% { opacity: 0 } 55% { opacity: 1 } 100% { opacity: 0 } }

@media (prefers-reduced-motion: reduce) {
  .bk-stage, .bk, .bk__cover, #intro::after { animation: none; }
  .bk__cover { transform: rotateY(-165deg); }
}

/* --- Transition de page — fondu noir --------------------------------------- */
#wipe {
  position: fixed; inset: 0; z-index: 990;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .42s cubic-bezier(.4, 0, .2, 1);
}
#wipe.in { opacity: 1; pointer-events: all; }

/* Apparition de la nouvelle page */
@keyframes page-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.js body { animation: page-in .5s ease both; }

/* --- Révélations au scroll ------------------------------------------------ */
.js .rv {
  opacity: 0;
  transform: translateY(28px) scale(.98);
  filter: blur(8px);
}
.js .rv.in {
  opacity: 1;
  transform: none;
  filter: none;
  transition:
    opacity   1.1s cubic-bezier(.16,.84,.44,1),
    transform 1.1s cubic-bezier(.16,.84,.44,1),
    filter     .85s cubic-bezier(.16,.84,.44,1);
}

/* --- Keyframes ambiants --------------------------------------------------- */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-14px); }
}
@keyframes float-slow {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-8px) rotate(.4deg); }
  66%       { transform: translateY(-4px) rotate(-.3deg); }
}
@keyframes kenburns {
  0%   { transform: scale(1)    translate(0, 0); }
  100% { transform: scale(1.07) translate(.6%, -2%); }
}
@keyframes gradient-pan {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes pulse-num {
  0%, 100% { opacity: .65; }
  50%       { opacity: 1; }
}

/* ==========================================================================
   LANDING PAGE
   ========================================================================== */

/* --- Bandeau de confiance sous le hero ------------------------------------ */
.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 36px; margin-top: 40px; }
.trust li {
  font-family: var(--f-cond); font-size: 13.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 9px;
}
.trust li:not(.trust__mid)::before { content: none; }
.trust .trust__mid svg { opacity: .75; }

/* --- Les deux solutions phares -------------------------------------------- */
.solutions { display: grid; gap: 36px; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); align-items: start; }
.sol {
  position: relative; border: 2px solid var(--ink); background: var(--paper);
  display: flex; flex-direction: column;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  cursor: pointer;
}
.sol:hover { transform: translateY(-9px); box-shadow: 0 0 0 1.5px rgba(255,255,255,.2), 0 32px 64px rgba(0,0,0,.5); }
.sol__tag {
  position: absolute; top: 14px; left: 14px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(34,211,238,.12); color: #22d3ee;
  border: 1px solid rgba(34,211,238,.4);
  border-radius: 999px; backdrop-filter: blur(10px);
  font-family: var(--f-cond); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; padding: 5px 13px;
}
.sol__tag::before {
  content: '★'; font-size: 9px; color: #22d3ee; opacity: .9;
}
.sol--top .sol__tag {
  background: rgba(251,191,36,.18);
  border-color: rgba(251,191,36,.55);
  color: #fbbf24;
}
.sol--top .sol__tag::before { color: #fbbf24; opacity: 1; }
.sol__art { position: relative; aspect-ratio: 16/8; overflow: hidden; background: var(--ink); border-bottom: 2px solid var(--ink); }
.sol__bg { position: absolute; inset: 0; background: center / cover no-repeat; transition: transform .9s var(--ease), filter .5s var(--ease); }
.sol:hover .sol__bg { transform: scale(1.07); }
/* les artworks fournisseur passent en noir et blanc pour tenir la DA,
   et retrouvent leurs couleurs au survol */
.sol__bg.is-photo { filter: grayscale(1) contrast(1.35) brightness(.95); }
.sol:hover .sol__bg.is-photo { filter: grayscale(0) contrast(1.05) brightness(1); }
.sol__jeu {
  position: absolute; left: 22px; bottom: 16px; color: #fff;
  font-family: var(--f-cond); font-size: 34px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; text-shadow: 3px 3px 0 var(--red);
}
.sol__body { padding: 32px 30px 0; flex: 1; }
.sol__name { font-family: var(--f-title); text-transform: uppercase; font-size: clamp(40px, 4.2vw, 58px); line-height: 1; letter-spacing: .05em; }
.sol__pitch { font-family: var(--f-hand); font-size: 17px; color: var(--ink-2); margin: 16px 0 24px; line-height: 1.6; }
.sol__feats li { font-family: var(--f-hand); font-size: 16.5px; line-height: 1.65; padding-left: 24px; position: relative; }
.sol__feats li::before { content: '\2714'; position: absolute; left: 0; top: 3px; font-size: 11px; color: #4ade80; font-family: var(--f-ui); }
.sol__specs { font-family: var(--f-cond); font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: 20px; }
.sol .durees { padding: 22px 30px 0; }
.sol__foot { margin-top: 22px; padding: 22px 30px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sol__price b { font-family: var(--f-cond); font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.sol__price small { display: block; font-family: var(--f-cond); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-top: 5px; }
.sol__help { text-align: center; margin-top: 40px; font-family: var(--f-hand); font-size: 17px; color: var(--ink-2); }
.sol__help a { border-bottom: 1.5px solid rgba(255,255,255,.3); }

/* --- À propos -------------------------------------------------------------- */
.about { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); border: 2px solid var(--ink); background: var(--paper); }
.about__c { padding: 40px 34px; border-left: 1px solid var(--line); }
.about__c:first-child { border-left: 0; }
.about__c h3 { font-family: var(--f-title); text-transform: uppercase; font-size: 26px; letter-spacing: .05em; margin-bottom: 16px; }
.about__c p { font-family: var(--f-hand); font-size: 16.5px; color: var(--ink-2); margin: 0 0 14px; line-height: 1.65; }
.about__c li { font-family: var(--f-hand); font-size: 16px; padding-left: 22px; position: relative; margin-bottom: 9px; color: var(--ink-2); }
.about__c li::before { content: '\25CB'; position: absolute; left: 0; top: 2px; font-size: 11px; color: rgba(255,255,255,.35); }

.story { margin-top: 40px; display: grid; gap: 40px; grid-template-columns: 1fr 1fr; align-items: center; }
.story p { font-family: var(--f-hand); font-size: 18px; line-height: 1.75; color: var(--ink-2); margin: 0 0 16px; }
.story p strong { font-weight: 400; color: var(--ink); box-shadow: inset 0 -.42em 0 rgba(193,18,31,.16); }

/* --- Showcase --------------------------------------------------------------- */
.showcase { background: var(--ink); color: var(--paper); padding: 100px 0; }
.showcase .sec__title { color: var(--paper); }
.showcase .sec__desc { color: rgba(255,255,255,.62); }
.shots { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.shot {
  position: relative; aspect-ratio: 16/10; overflow: hidden;
  border: 1px solid rgba(255,255,255,.28);
  background: #0a0a0a center / cover no-repeat;
}
.shot span {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 18px;
  font-family: var(--f-cond); font-size: 13px; letter-spacing: .22em; text-transform: uppercase;
  background: linear-gradient(transparent, rgba(0,0,0,.88));
}

/* --- Réassurance ------------------------------------------------------------ */
.reassure { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); border: 2px solid var(--ink); background: var(--paper); }
.re { padding: 38px 30px; border-left: 1px solid var(--line); }
.re:first-child { border-left: 0; }
.re__n { font-family: var(--f-cond); font-weight: 700; font-size: 13px; letter-spacing: .3em; color: rgba(255,255,255,.35); display: block; margin-bottom: 14px; }
.re h3 { font-family: var(--f-title); text-transform: uppercase; font-size: 23px; letter-spacing: .05em; margin-bottom: 11px; }
.re p { font-family: var(--f-hand); font-size: 16px; color: var(--ink-2); margin: 0; line-height: 1.6; }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1000px) { .ftr__g { grid-template-columns: 1fr 1fr; } }
@media (max-width: 820px) {
  .wrap { padding: 0 26px; }
  .burger { display: block; }
  .hdr { padding: 0 20px; grid-template-columns: 1fr auto; }
  .nav {
    display: none;
    position: fixed; top: 88px; left: 22px; right: 22px; background: var(--paper);
    border: 2px solid var(--ink); border-top: 0; flex-direction: column;
    align-items: stretch; gap: 0; padding: 8px 22px 20px;
  }
  .nav.open { display: flex; }
  .nav a { padding: 15px 0; border-bottom: 1px solid var(--line); }
  /* le déroulant s'aplatit en liste sur mobile */
  .drop { width: 100%; }
  .drop__t { width: 100%; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid var(--line); }
  .drop__m {
    position: static; transform: none; opacity: 1; visibility: visible;
    border: 0; box-shadow: none; padding: 0 0 0 18px; min-width: 0;
    max-height: 0; overflow: hidden; transition: max-height .3s var(--ease);
  }
  .drop.open .drop__m { max-height: 160px; transform: none; }
  .drop__m::before { display: none; }
  .drop__m a { padding: 13px 0; }
  /* Le méga-menu ne peut pas rester en position:fixed ici : .hdr porte un
     translateX(-50%), il devient donc le bloc conteneur de ses descendants
     fixed et le panneau part de 165px sur la gauche. Et son animation
     mega-in réapplique un translateX(-50%) qui écrase tout transform:none.
     On l'aplatit dans la liste, comme le déroulant voisin. */
  .drop--mega { width: 100%; }
  .drop__mega-t { justify-content: space-between; padding: 15px 0; border-bottom: 1px solid var(--line); }
  .drop--mega .drop__mega {
    position: static; width: auto; transform: none; animation: none;
    background: none; border: 0; border-radius: 0; box-shadow: none;
    backdrop-filter: none; flex-direction: column; padding: 6px 0 10px;
  }
  .mega__left { width: auto; flex: none; border-right: 0; padding: 6px 0; }
  .mega__right { padding: 4px 0; }
  .nav .mega__prod { margin: 0; padding: 12px 10px; }
  .disc { margin-top: 16px; }
  .sec { padding: 78px 0; }
  .dnp { padding: 30px 22px 34px; }
  .step { border-left: 0; padding: 0 0 34px; }
  .step:first-child { padding-left: 0; }
  .pages, .grid, .solutions { grid-template-columns: 1fr; }
  .cta { padding: 60px 24px; }
  .about__c, .re { border-left: 0; border-top: 1px solid var(--line); }
  .about__c:first-child, .re:first-child { border-top: 0; }
  .story { grid-template-columns: 1fr; gap: 26px; }
  .trust { gap: 10px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001s !important; transition-duration: .001s !important; }
}

/* ═══════════════════════════════════════════════════════════════
   WHY CHOOSE US
   ═══════════════════════════════════════════════════════════════ */

.why-sec { padding-bottom: 60px; }

.why__eyebrow {
  font-family: var(--f-title);
  font-size: clamp(32px, 5vw, 60px);
  font-weight: 700;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--ink);
  text-align: center;
  margin-bottom: 52px;
  line-height: 1;
}

.why__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.why__card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 18px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
  transition: border-color .35s var(--ease), background .35s var(--ease), transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s var(--ease);
}
.why__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.06) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform .55s cubic-bezier(.25,.46,.45,.94);
  pointer-events: none;
}
.why__card:hover::after { transform: translateX(100%); }
.why__card:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.25);
  transform: translateY(-6px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.12),
    0 16px 48px rgba(0,0,0,.5);
}

.why__ico {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: rgba(255,255,255,.75);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease, background .3s ease;
}
.why__card:hover .why__ico {
  transform: scale(1.18) rotate(-6deg);
  background: rgba(255,255,255,.13);
  box-shadow: 0 8px 28px rgba(0,0,0,.4);
}

.why__name {
  font-family: var(--f-cond);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
  margin: 0;
  transition: color .25s ease;
}
.why__card:hover .why__name { color: #fff; }

.why__desc {
  font-family: var(--f-hand);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,.45);
  margin: 0;
  transition: color .25s ease;
}
.why__card:hover .why__desc { color: rgba(255,255,255,.6); }

/* --- Cosmos per-card glow ---------------------------------------- */
.sol[data-sol="cosmos-ghost"]:hover {
  box-shadow:
    0 0 0 2px rgba(59,130,246,.75),
    0 32px 64px rgba(0,0,0,.5),
    0 0 60px rgba(59,130,246,.3);
}
.sol[data-sol="cosmos-light"]:hover {
  box-shadow:
    0 0 0 2px rgba(249,115,22,.75),
    0 32px 64px rgba(0,0,0,.5),
    0 0 60px rgba(249,115,22,.3);
}

.sol[data-sol="cosmos-light"] .durees button.on,
.card[data-id="cosmos-light"] .durees button.on {
  border-color: rgba(249,115,22,.65);
  background: rgba(249,115,22,.1);
  box-shadow: 0 0 16px rgba(249,115,22,.12), 0 0 0 1px rgba(249,115,22,.2);
}
.sol[data-sol="cosmos-light"] .durees button.on .dur-label,
.card[data-id="cosmos-light"] .durees button.on .dur-label {
  color: rgba(249,115,22,.85);
}

/* ═══════════════════════════════════════════════════════════════
   STATS BAND
   ═══════════════════════════════════════════════════════════════ */

.stats-band {
  position: relative;
  padding: 80px 0;
}
.stats-band::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 92% 62% at 50% 50%,
      rgba(255,255,255,.11) 0%,
      rgba(255,255,255,.04) 50%,
      transparent          70%
    ),
    radial-gradient(ellipse 40% 90% at 50% 50%,
      rgba(255,255,255,.07) 0%,
      transparent          60%
    );
  pointer-events: none;
  z-index: 0;
}
.stats-band .wrap { position: relative; z-index: 1; }

.stats-band__grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.stats-band__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.stats-band__item b {
  font-family: var(--f-cond);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.02em;
  animation: pulse-num 3s ease-in-out infinite alternate;
}

.stats-band__item span {
  font-family: var(--f-hand);
  font-size: 13px;
  color: rgba(255,255,255,.4);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.stats-band__sep {
  width: 1px;
  height: 48px;
  background: rgba(255,255,255,.1);
  flex-shrink: 0;
  margin: 0 40px;
}

/* ═══════════════════════════════════════════════════════════════
   LAST SHOWCASE
   ═══════════════════════════════════════════════════════════════ */

.showcase-yt-sec { padding-bottom: 80px; }

.showcase-yt__head {
  text-align: center;
  margin-bottom: 40px;
}

.showcase-yt__title {
  font-family: var(--f-title);
  font-size: clamp(48px, 8vw, 110px);
  color: var(--ink);
  letter-spacing: -.01em;
  line-height: 1;
  margin: 0 0 14px;
}

.showcase-yt__sub {
  font-family: var(--f-hand);
  font-size: 16px;
  color: rgba(255,255,255,.45);
  margin: 0;
}

.showcase-yt__frame {
  position: relative;
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 32px 80px rgba(0,0,0,.6), 0 0 60px rgba(193,18,31,.06);
  aspect-ratio: 16 / 9;
}

.showcase-yt__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* ═══════════════════════════════════════════════════════════════
   PAYMENT METHODS
   ═══════════════════════════════════════════════════════════════ */

.pay-sec {
  padding: 80px 0 100px;
  background: linear-gradient(
    to bottom,
    transparent        0%,
    rgba(4,5,9,.55)   28%,
    rgba(4,5,9,.88)   60%,
    var(--paper)      100%
  );
}

.pay-sec__head {
  text-align: center;
  margin-bottom: 48px;
}

.pay-sec__title {
  font-family: var(--f-cond);
  font-size: clamp(20px, 3vw, 30px);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.02em;
  margin: 0 0 12px;
}

.pay-sec__sub {
  font-family: var(--f-hand);
  font-size: 14px;
  color: rgba(255,255,255,.38);
  margin: 0;
}

.pay-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 44px;
  flex-wrap: nowrap;
}

.pay-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: .85;
  transition: opacity .25s var(--ease), transform .3s cubic-bezier(.34,1.56,.64,1);
}
.pay-logo img {
  height: 150px;
  width: auto;
  object-fit: contain;
  display: block;
}
.pay-logo:hover {
  opacity: 1;
  transform: translateY(-4px) scale(1.08);
}
/* Optical sizing per logo to balance visual weight */
.pay-logo[aria-label="Visa"]        img { height: 140px; }
.pay-logo[aria-label="Mastercard"]  img { height: 148px; }
.pay-logo[aria-label="PayPal"]      img { height: 158px; }
.pay-logo[aria-label="Bitcoin"]     img { height: 108px; }
.pay-logo[aria-label="Litecoin"]    img { height: 148px; }
.pay-logo[aria-label="Paysafecard"] img { height: 120px; }

/* ═══════════════════════════════════════════════════════════════
   PAGE PRODUITS — Hero + Category grid
   ═══════════════════════════════════════════════════════════════ */

.prd-hero {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 160px 24px 80px;
  overflow: hidden;
}

.prd-hero__emb {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(2.4);
  opacity: .03;
  pointer-events: none;
}

.prd-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.prd-hero__title {
  font-family: var(--f-title);
  font-size: clamp(64px, 13vw, 160px);
  line-height: .95;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0;
}

.prd-hero__accent {
  color: var(--ink);
}

.prd-hero__rule {
  width: 56px;
  height: 2px;
  background: rgba(255,255,255,.2);
  margin: 22px auto 24px;
  border-radius: 2px;
}

.prd-hero__sub {
  font-family: var(--f-hand);
  font-size: clamp(14px, 2vw, 17px);
  color: rgba(255,255,255,.5);
  max-width: 480px;
  margin: 0 0 32px;
}

.prd-hero__srch {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: 12px 18px;
  width: min(420px, 90vw);
  transition: border-color .2s, background .2s;
}
.prd-hero__srch:focus-within {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.22);
}
.prd-hero__srch svg { color: rgba(255,255,255,.4); flex-shrink: 0; }
.prd-hero__srch input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-family: var(--f-hand);
  font-size: 15px;
  color: var(--ink);
}
.prd-hero__srch input::placeholder { color: rgba(255,255,255,.3); }

/* Category cards */
.prd-cats-sec { padding-top: 0; }

.prd-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.prd-cat {
  display: flex;
  align-items: center;
  gap: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 20px 24px;
  text-decoration: none;
  color: var(--ink);
  transition: background .22s, border-color .22s, transform .22s;
  min-width: 280px;
}
.prd-cat:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.25);
  transform: translateY(-2px);
}

.prd-cat__logo {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(255,255,255,.07);
}

.prd-cat__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.prd-cat__name {
  font-family: var(--f-cond);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.prd-cat__count {
  font-family: var(--f-hand);
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.prd-cat__arr {
  color: rgba(255,255,255,.3);
  transition: color .2s, transform .2s;
}
.prd-cat:hover .prd-cat__arr {
  color: var(--ink);
  transform: translateX(3px);
}

/* ═══════════════════════════════════════════════════════════════
   PAGE BROWSE PRODUITS
   ═══════════════════════════════════════════════════════════════ */

.browse-hero {
  padding: 140px 24px 56px;
  text-align: center;
}
.browse-hero__inner { position: relative; z-index: 1; }
.browse-hero__label {
  font-family: var(--f-cond);
  font-size: 13px;
  font-weight: 600;
  color: var(--red);
  letter-spacing: .14em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 16px;
}
.browse-hero__title {
  font-family: var(--f-title);
  font-size: clamp(52px, 9vw, 112px);
  color: var(--ink);
  margin: 0 0 18px;
  line-height: .92;
  font-style: normal;
}
.browse-hero__accent { font-style: normal; color: var(--red); }
.browse-hero__sub {
  font-family: var(--f-hand);
  font-size: 16px;
  color: rgba(255,255,255,.42);
  max-width: 500px;
  margin: 0 auto;
}

.browse-filter-sec { padding: 0 24px 52px; }
.browse-filter-box {
  max-width: var(--maxw);
  margin: 0 auto;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.browse-filter-row { display: flex; flex-direction: column; gap: 12px; }
.browse-filter-lbl {
  font-family: var(--f-cond);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  color: rgba(255,255,255,.28);
  text-transform: uppercase;
}
.browse-srch {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 12px 16px;
  transition: border-color .2s, background .2s;
}
.browse-srch:focus-within {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.2);
}
.browse-srch svg { color: rgba(255,255,255,.3); flex-shrink: 0; }
.browse-srch input {
  flex: 1; background: none; border: none; outline: none;
  font-family: var(--f-hand); font-size: 15px; color: var(--ink);
}
.browse-srch input::placeholder { color: rgba(255,255,255,.22); }

.browse-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.browse-pill {
  font-family: var(--f-cond);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 20px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.5);
  cursor: pointer;
  transition: all .2s;
  letter-spacing: .02em;
}
.browse-pill:hover {
  background: rgba(255,255,255,.08);
  color: var(--ink);
  border-color: rgba(255,255,255,.18);
}
.browse-pill.on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.browse-grid-sec { padding-top: 0; }

/* ═══════════════════════════════════════════════════════════════
   GAME BROWSE — tuiles de jeux
   ═══════════════════════════════════════════════════════════════ */

.game-browse-hero {
  padding: 140px 24px 56px;
  text-align: center;
}
.game-browse-hero__inner { position: relative; z-index: 1; }
.game-browse-hero__label {
  font-family: var(--f-cond);
  font-size: 13px;
  font-weight: 600;
  color: var(--red);
  letter-spacing: .14em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 16px;
}
.game-browse-hero__title {
  font-family: var(--f-title);
  font-size: clamp(52px, 9vw, 112px);
  color: var(--ink);
  margin: 0 0 18px;
  line-height: .92;
  font-style: normal;
}
.game-browse-hero__accent { font-style: normal; color: var(--red); }
.game-browse-hero__sub {
  font-family: var(--f-hand);
  font-size: 16px;
  color: rgba(255,255,255,.4);
  max-width: 460px;
  margin: 0 auto;
}

.game-tiles-sec {
  padding: 0 24px 100px;
}
.game-tiles-header {
  max-width: var(--maxw);
  margin: 0 auto 28px;
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.game-tiles-header__title {
  font-family: var(--f-cond);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  letter-spacing: -.01em;
}
.game-tiles-header__count {
  font-family: var(--f-hand);
  font-size: 13px;
  color: rgba(255,255,255,.32);
  margin: 0;
}

.game-tiles {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}

.game-tile {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-decoration: none;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  background: #0d0e14;
}
.game-tile:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 24px 60px rgba(0,0,0,.65), 0 0 0 1.5px rgba(255,255,255,.2);
}

.game-tile__bg {
  position: absolute;
  inset: 0;
  background: center / cover no-repeat;
  transition: transform .65s var(--ease), filter .4s;
  filter: brightness(.8) saturate(.85);
}
.game-tile:hover .game-tile__bg {
  transform: scale(1.07);
  filter: brightness(1) saturate(1);
}
.game-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 35%, rgba(0,0,0,.78) 100%);
  z-index: 1;
}

.game-tile__badge {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;
  font-family: var(--f-cond);
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,.9);
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: .05em;
  border: 1px solid rgba(255,255,255,.12);
}

.game-tile__foot {
  position: relative;
  z-index: 2;
  padding: 18px 20px 16px;
}
.game-tile__name {
  font-family: var(--f-cond);
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  display: block;
  margin-bottom: 8px;
  letter-spacing: -.01em;
}
.game-tile__bar {
  display: block;
  width: 28px;
  height: 2.5px;
  background: rgba(255,255,255,.25);
  border-radius: 2px;
  transition: width .3s var(--ease);
}
.game-tile:hover .game-tile__bar { width: 44px; }

/* ═══════════════════════════════════════════════════════════════
   GAME SUB-PAGE — page solutions d'un jeu
   ═══════════════════════════════════════════════════════════════ */

.game-sub-hero {
  padding: 130px 24px 56px;
  text-align: center;
}
.game-sub-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-cond);
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.4);
  text-decoration: none;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 40px;
  transition: color .2s;
}
.game-sub-back:hover { color: var(--ink); }

.game-sub-hero__inner { position: relative; z-index: 1; }
.game-sub-hero__logo {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 14px;
  margin: 0 auto 22px;
  display: block;
  border: 1.5px solid rgba(255,255,255,.1);
}
.game-sub-hero__title {
  font-family: var(--f-title);
  font-size: clamp(48px, 8vw, 96px);
  color: var(--ink);
  margin: 0 0 16px;
  line-height: .92;
}
.game-sub-hero__accent { font-style: normal; color: var(--red); }
.game-sub-hero__sub {
  font-family: var(--f-hand);
  font-size: 16px;
  color: rgba(255,255,255,.4);
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   INLINE SEARCH — page produits
   ═══════════════════════════════════════════════════════════════ */

.prod-search-sec {
  padding: 0 24px 40px;
}

.prod-search {
  max-width: 680px;
  margin: 0 auto;
  position: relative;
}

.prod-search__box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 14px 20px;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.prod-search__box:focus-within {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
}
.prod-search__box svg { color: rgba(255,255,255,.35); flex-shrink: 0; }
.prod-search__box input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-family: var(--f-hand);
  font-size: 16px;
  color: var(--ink);
}
.prod-search__box input::placeholder { color: rgba(255,255,255,.25); }

.prod-search__results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  background: #0d0e14;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  z-index: 100;
  display: none;
}
.prod-search__results.on { display: block; }

.prod-srch__label {
  font-family: var(--f-cond);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.28);
  padding: 14px 18px 8px;
  display: block;
}

.prod-srch__row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  text-decoration: none;
  color: var(--ink);
  transition: background .15s;
}
.prod-srch__row:hover { background: rgba(255,255,255,.05); }

.prod-srch__thumb {
  width: 44px;
  height: 36px;
  border-radius: 8px;
  background: center / cover no-repeat #1a1b22;
  flex-shrink: 0;
}

.prod-srch__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.prod-srch__name {
  font-family: var(--f-cond);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.prod-srch__price {
  font-family: var(--f-hand);
  font-size: 12px;
  color: rgba(255,255,255,.42);
}
.prod-srch__row svg { color: rgba(255,255,255,.28); flex-shrink: 0; transition: color .15s; }
.prod-srch__row:hover svg { color: var(--ink); }

.prod-srch__sep {
  height: 1px;
  background: rgba(255,255,255,.06);
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   PAGE STATUS
   ═══════════════════════════════════════════════════════════════ */

.st-hero {
  padding: 140px 24px 56px;
  text-align: center;
}
.st-hero__inner { position: relative; z-index: 1; }
.st-hero__label {
  font-family: var(--f-cond);
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.4);
  letter-spacing: .14em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 16px;
}
.st-hero__title {
  font-family: var(--f-title);
  font-size: clamp(52px, 9vw, 112px);
  color: var(--ink);
  margin: 0 0 18px;
  line-height: .92;
  font-style: normal;
}
.st-hero__accent { font-style: normal; color: var(--red); }
.st-hero__sub {
  font-family: var(--f-hand);
  font-size: 16px;
  color: rgba(255,255,255,.42);
  max-width: 480px;
  margin: 0 auto 32px;
}

/* Status badges (legend + rows) */
.st-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.st-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--f-cond);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.st-badge::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.st-badge--ud   { color: #4ade80; background: rgba(74,222,128,.1);  border-color: rgba(74,222,128,.22); }
.st-badge--ud::before   { background: #4ade80; box-shadow: 0 0 6px #4ade80; }
.st-badge--maj  { color: #fbbf24; background: rgba(251,191,36,.1);  border-color: rgba(251,191,36,.22); }
.st-badge--maj::before  { background: #fbbf24; box-shadow: 0 0 6px #fbbf24; }
.st-badge--down { color: #f87171; background: rgba(248,113,113,.1); border-color: rgba(248,113,113,.22); }
.st-badge--down::before { background: #f87171; box-shadow: 0 0 6px #f87171; }
.st-badge--soon { color: #818cf8; background: rgba(129,140,248,.1); border-color: rgba(129,140,248,.22); }
.st-badge--soon::before { background: #818cf8; }

/* Status panel */
.st-sec { padding: 0 24px 100px; }

.st-panel {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.st-group {
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 20px;
  overflow: hidden;
}

.st-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px 18px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.st-group__name {
  font-family: var(--f-title);
  font-size: 26px;
  letter-spacing: .04em;
  color: var(--ink);
}
.st-group__count {
  font-family: var(--f-cond);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.28);
}

.st-rows { display: flex; flex-direction: column; }

.st-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 28px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: background .18s;
}
.st-row:last-child { border-bottom: none; }
.st-row:hover { background: rgba(255,255,255,.03); }

.st-row__thumb {
  width: 56px;
  height: 44px;
  border-radius: 10px;
  background: center / cover no-repeat #0d0e14;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,.07);
}

.st-row__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.st-row__name {
  font-family: var(--f-cond);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
}
.st-row__spec {
  font-family: var(--f-hand);
  font-size: 12px;
  color: rgba(255,255,255,.32);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.st-row__note {
  font-family: var(--f-hand);
  font-size: 13px;
  color: rgba(255,255,255,.28);
  white-space: nowrap;
  flex-shrink: 0;
}

.st-row__btn {
  flex-shrink: 0;
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: var(--ink) !important;
  backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 2px 10px rgba(0,0,0,.3);
}
.st-row__btn:hover {
  background: rgba(255,255,255,.11) !important;
  border-color: rgba(255,255,255,.32) !important;
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .st-row { flex-wrap: wrap; gap: 12px; }
  .st-row__note { display: none; }
  .st-row__btn { margin-left: auto; }
}

/* ═══════════════════════════════════════════════════════════════
   SOL — bouton Details
   ═══════════════════════════════════════════════════════════════ */
.sol__actions { display: flex; align-items: center; gap: 10px; }

/* ═══════════════════════════════════════════════════════════════
   PAGE PRODUIT DETAIL
   ═══════════════════════════════════════════════════════════════ */

/* Breadcrumb */
.pd-crumb-sec {
  padding: 120px 24px 0;
}
.pd-crumb {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-cond);
  font-size: 13px;
  letter-spacing: .02em;
}
.pd-crumb a {
  color: rgba(255,255,255,.4);
  text-decoration: none;
  transition: color .18s;
}
.pd-crumb a:hover { color: var(--ink); }
.pd-crumb svg { color: rgba(255,255,255,.2); flex-shrink: 0; }
.pd-crumb__current { color: var(--ink); font-weight: 600; }

/* Product card */
.pd-hero-sec { padding: 28px 24px 0; }

.pd-card {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 22px;
  overflow: hidden;
}

.pd-card__media {
  position: relative;
  min-height: 340px;
}
.pd-card__img {
  position: absolute;
  inset: 0;
  background: center / cover no-repeat #0d0e14;
}
.pd-card__tag {
  position: absolute;
  top: 18px; left: 18px;
  font-family: var(--f-cond);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--red);
  padding: 4px 12px;
  border-radius: 999px;
}

.pd-card__info {
  padding: 38px 40px 38px;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-left: 1px solid rgba(255,255,255,.07);
}

.pd-card__name {
  font-family: var(--f-title);
  font-size: clamp(40px, 4vw, 58px);
  color: var(--ink);
  margin: 0 0 18px;
  line-height: .95;
  letter-spacing: .03em;
}

.pd-card__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 26px;
}
.pd-chip {
  font-family: var(--f-cond);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  padding: 4px 12px;
  border-radius: 999px;
}
/* le chip du jeu reprend l'orange de la marque FiveM */
.pd-chip--game {
  color: #f97316;
  background: rgba(249,115,22,.1);
  border-color: rgba(249,115,22,.35);
}

.pd-card__price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 22px;
}
.pd-card__from {
  font-family: var(--f-cond);
  font-size: 13px;
  color: rgba(255,255,255,.35);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.pd-card__price {
  font-family: var(--f-cond);
  font-size: 44px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.02em;
  line-height: 1;
}

.pd-card__dur-label {
  font-family: var(--f-cond);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.3);
  margin-bottom: 12px;
}

.pd-card__durations {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 24px;
}
.pd-dur {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  background: rgba(255,255,255,.04);
  border: 1.5px solid rgba(255,255,255,.09);
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  text-align: left;
}
.pd-dur:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); }
.pd-dur.on { border-color: var(--red); background: rgba(193,18,31,.1); }
.pd-dur__label {
  font-family: var(--f-cond);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .02em;
}
.pd-dur__price {
  font-family: var(--f-cond);
  font-size: 18px;
  font-weight: 700;
  color: var(--red);
}
.pd-dur.on .pd-dur__price { color: #fff; }

.pd-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 14px;
}
.pd-card__note {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--f-hand);
  font-size: 12px;
  color: rgba(255,255,255,.3);
  margin: 0;
}

/* ── New product-page pricing ── */
.pd-price-hero { margin: 20px 0 20px; }
.pd-price-top { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pd-price-amount {
  font-family: var(--f-cond);
  font-size: 56px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
  line-height: 1;
}
.pd-price-period {
  font-family: var(--f-cond);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.pd-price-sub {
  font-family: var(--f-hand);
  font-size: 13px;
  color: var(--muted);
  margin: 7px 0 0;
}

.pd-dur-list { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }

.pd-dur-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  cursor: pointer;
  transition: border-color .2s, background .2s;
  user-select: none;
}
.pd-dur-row:hover {
  border-color: rgba(255,255,255,.25);
  background: rgba(255,255,255,.06);
}
.pd-dur-row.on {
  border-color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.07);
  box-shadow: 0 0 0 1px rgba(255,255,255,.12);
}

.pd-dur-radio {
  width: 20px; height: 20px; flex: 0 0 20px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.2);
  position: relative;
  transition: border-color .2s;
}
.pd-dur-row.on .pd-dur-radio {
  border-color: var(--ink);
  background: transparent;
}
.pd-dur-row.on .pd-dur-radio::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--ink);
}

.pd-dur-info { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.pd-dur-name {
  font-family: var(--f-cond);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 9px;
}
.pd-dur-sub {
  font-family: var(--f-cond);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .03em;
}

.pd-dur-badge {
  font-family: var(--f-cond);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 2px 9px;
  border-radius: 999px;
}
.pd-dur-badge--pop {
  background: rgba(139,92,246,.18);
  color: #a78bfa;
  border: 1px solid rgba(139,92,246,.3);
}
.pd-dur-badge--save {
  background: rgba(74,222,128,.13);
  color: #4ade80;
  border: 1px solid rgba(74,222,128,.28);
}

.pd-dur-price {
  font-family: var(--f-cond);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.pd-dur-row.on .pd-dur-price { color: #fff; }

.pd-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 17px;
  margin-bottom: 14px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-cond);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 14px;
  transition: opacity .18s, transform .15s;
}
.pd-cta-btn:hover { opacity: .88; transform: translateY(-1px); }
.pd-cta-btn:active { transform: translateY(0); }
.pd-cta-btn--sec { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.pd-cta-btn--sec:hover { border-color: rgba(255,255,255,.3); opacity: 1; }
.pd-cta-row { display: flex; gap: 10px; }
.pd-cta-row .pd-cta-btn { margin-bottom: 0; flex: 1; }

.card__btns { display: flex; gap: 8px; align-items: center; }
.card__buy { flex: 1; padding: 11px 18px !important; font-size: 12px !important; white-space: nowrap; }
.card__add {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 6px;
  padding: 0 14px; height: 38px;
  background: transparent;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  color: var(--ink-2);
  cursor: pointer;
  font-family: var(--f-cond);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  white-space: nowrap;
  transition: border-color .18s, color .18s;
}
.card__add:hover { border-color: rgba(255,255,255,.35); color: var(--ink); }

.pan__qte { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.pan__q { background: none; border: 1px solid var(--line); color: var(--ink); cursor: pointer; width: 22px; height: 22px; border-radius: 4px; font-size: 14px; display: flex; align-items: center; justify-content: center; padding: 0; line-height: 1; }
.pan__q:hover { border-color: rgba(255,255,255,.3); }
.pan__qte > span { font-family: var(--f-cond); font-size: 13px; font-weight: 600; min-width: 18px; text-align: center; }

.pd-trust span:first-child svg { color: #4ade80; }
.pd-trust span:last-child svg { color: #fbbf24; }
.pd-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 24px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  font-family: var(--f-cond);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
}
.pd-trust span { display: flex; align-items: center; gap: 6px; }

.pd-payments {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
.pd-pay-ico {
  height: 36px;
  width: auto;
  max-width: 80px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: .5;
  transition: opacity .18s;
}
.pd-pay-ico:hover { opacity: .9; }
.pd-pay-ico--ltc { filter: brightness(10) saturate(0); opacity: .6; }
.pd-pay-ico--ltc:hover { opacity: .9; }
.pd-pay-ico--dark { filter: brightness(10) saturate(0); opacity: 1; height: 54px; max-width: 120px; }
.pd-pay-ico--dark:hover { opacity: 1; }

/* Requirements */
.pd-reqs-sec, .pd-feats-sec {
  padding: 56px 24px 0;
}
.pd-feats-sec { padding-bottom: 80px; }

.pd-sec-head {
  max-width: var(--maxw);
  margin: 0 auto 28px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.pd-sec-bar {
  display: block;
  width: 4px;
  height: 44px;
  background: var(--red);
  border-radius: 2px;
  flex-shrink: 0;
  margin-top: 4px;
}
.pd-sec-title {
  font-family: var(--f-title);
  font-size: clamp(24px, 3vw, 36px);
  color: var(--ink);
  margin: 0 0 4px;
  letter-spacing: .03em;
}
.pd-sec-sub {
  font-family: var(--f-hand);
  font-size: 14px;
  color: rgba(255,255,255,.35);
  margin: 0;
}

.pd-reqs {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.pd-req {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pd-req__icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.6);
  flex-shrink: 0;
}
.pd-req__label {
  font-family: var(--f-cond);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.3);
}
.pd-req__val {
  font-family: var(--f-cond);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
}

/* Feature cards */
.pd-feats {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.pd-feat {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px;
  padding: 26px 24px;
}
.pd-feat__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.pd-feat__bar {
  display: block;
  width: 3px;
  height: 22px;
  background: rgba(255,255,255,.25);
  border-radius: 2px;
  flex-shrink: 0;
}
.pd-feat__title {
  font-family: var(--f-title);
  font-size: 22px;
  color: var(--ink);
  margin: 0;
  letter-spacing: .04em;
}
.pd-feat__list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.pd-feat__list li {
  font-family: var(--f-hand);
  font-size: 14px;
  color: rgba(255,255,255,.7);
  padding-left: 18px;
  position: relative;
  line-height: 1.45;
}
.pd-feat__list li::before {
  content: '\2714';
  position: absolute;
  left: 0;
  color: #4ade80;
  font-size: 11px;
  top: 1px;
  font-family: var(--f-ui);
}

@media (max-width: 860px) {
  .pd-card { grid-template-columns: 1fr; }
  .pd-card__media { min-height: 260px; }
  .pd-card__info { border-left: none; border-top: 1px solid rgba(255,255,255,.07); }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — corrections des trois blocs qui débordaient
   Relevé au pixel en réduisant la fenêtre : le reste du site tenait
   déjà, seuls ces composants forçaient un défilement horizontal.
   ═══════════════════════════════════════════════════════════════ */

/* 1. Moyens de paiement — six logos de ~140px de haut en flex-wrap:nowrap :
   la rangée dépassait dès 1100px, jusqu'à +349px sur un écran de 320. */
@media (max-width: 1100px) {
  .pay-logos { flex-wrap: wrap; gap: 18px 34px; }
  /* l'attribut est nécessaire pour repasser devant les hauteurs optiques
     posées plus haut par .pay-logo[aria-label="…"] img */
  .pay-logo[aria-label] img, .pay-logo img { height: 104px; }
}
@media (max-width: 620px) {
  .pay-logos { gap: 12px 22px; }
  .pay-logo[aria-label] img, .pay-logo img { height: 72px; }
}

/* 2. Bande de chiffres — quatre colonnes séparées par des traits à 40px
   de marge : débordait sous ~500px. Elle se plie en 2×2. */
@media (max-width: 560px) {
  .stats-band { padding: 56px 0; }
  .stats-band__grid { flex-wrap: wrap; row-gap: 28px; }
  .stats-band__item { flex: 0 0 50%; }
  .stats-band__sep { display: none; }
}

/* 3. Fiche produit — un élément de grille a min-width:auto par défaut, donc
   la colonne ne pouvait pas descendre sous la largeur mini de son contenu :
   elle restait à 380px sur un écran de 320. Le verrou venait de .pd-dur-list,
   dont le nom et le badge étaient dans un flex sans retour à la ligne. */
@media (max-width: 860px) {
  .pd-card__media, .pd-card__info { min-width: 0; }
}
@media (max-width: 480px) {
  .pd-hero-sec { padding: 20px 14px 0; }
  .pd-card__info { padding: 26px 18px; }
  .pd-reqs-sec, .pd-feats-sec { padding-left: 14px; padding-right: 14px; }
  .pd-dur-row { padding: 12px 13px; gap: 10px; }
  .pd-dur-name { flex-wrap: wrap; gap: 6px; }
  .pd-cta-row { flex-direction: column; }
}