/* ============================================================================
   games.css — section #games « Les jeux » — propriétaire : agent:games (§4.5)
   Tout est scopé .sec-games / gm-* ; les classes de base.css (.gcard .gbody .tag .chip
   .hscroll .btn-g .num) ne sont pas redéfinies, seulement complétées dans ce scope.
   Motion : --m (durées) et --mt (translations / scale) — RÉDUIRE, jamais figer.
   ========================================================================== */

/* ── En-tête : intro à gauche, régie du rail à droite (desktop) ───────────── */
.sec-games .gm-head{display:grid;gap:var(--sp-4);align-items:end}
@media (min-width:768px){.sec-games .gm-head{grid-template-columns:minmax(0,1fr) auto}}
.sec-games .gm-intro .lead{margin-top:var(--sp-3)}

.sec-games .gnav{display:none;align-items:center;gap:var(--sp-2);padding-bottom:6px}
@media (min-width:768px){.sec-games .gnav{display:flex}}
.sec-games .gm-count{margin:0;font:700 14px/1 var(--mono);color:var(--dim);letter-spacing:.04em;white-space:nowrap}
.sec-games .gm-count-v{display:inline-flex;align-items:baseline;gap:6px}
.sec-games .gm-count-i{color:var(--txt);font-size:22px}
.sec-games .gm-count-sep,.sec-games .gm-count-n{color:var(--dim-2);font-weight:500}
.sec-games .gm-prog{position:relative;display:block;width:96px;height:4px;flex:none;margin:0 var(--sp-1);background:repeating-linear-gradient(90deg,var(--line-2) 0 1px,transparent 1px 6px)}
.sec-games .gm-prog-bar{position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--cyan);opacity:.85;transform:scaleX(var(--p,0));transform-origin:left center;transition:transform calc(320ms*var(--m)) var(--ease);box-shadow:0 0 8px var(--cyan-line)}
.sec-games .gm-arrow{width:54px;height:54px;padding:0;flex:none;color:var(--txt)}
.sec-games .gm-arrow svg{width:20px;height:20px}
.sec-games .gm-arrow[aria-disabled="true"]{opacity:.35;cursor:not-allowed;transform:none;border-color:var(--line-2)}
.sec-games .gm-arrow[aria-disabled="true"]:hover{border-color:var(--line-2);transform:none}

/* ── Rail full-bleed : la 1re carte s'aligne sur la colonne 1 du .wrap ─────── */
.sec-games .grail{position:relative;width:100%;margin-top:var(--sp-4)}
@media (min-width:768px){.sec-games .grail{margin-top:var(--sp-5)}}
.sec-games .gtrack{
  --gm-pad:max(var(--gut),calc((100% - var(--wrap))/2 + var(--gut)));
  position:relative;display:flex;gap:var(--sp-2);
  padding:6px var(--gm-pad) 18px;              /* 6px : place pour l'outline de focus des cartes */
  scroll-padding-inline:var(--gm-pad);
  cursor:default;
}
@media (min-width:768px){.sec-games .gtrack{gap:var(--sp-3)}}
.sec-games .gtrack:focus-visible{outline-offset:-3px}
@media (pointer:fine){.sec-games .gtrack{cursor:grab}}
.sec-games .gtrack.is-drag{cursor:grabbing;scroll-snap-type:none;user-select:none;-webkit-user-select:none}
/* Ombre douce des bords (invitation au défilement) — jamais sur le body, seulement sur le rail */
.sec-games .grail::before,.sec-games .grail::after{content:'';position:absolute;top:0;bottom:0;width:clamp(16px,4vw,64px);pointer-events:none;z-index:2;opacity:0;transition:opacity var(--d) var(--ease)}
.sec-games .grail::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.sec-games .grail::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
.sec-games .grail.can-prev::before,.sec-games .grail.can-next::after{opacity:1}

/* ── Cartes : 300×400 desktop, 72vw×96vw mobile (max 300×400) ─────────────── */
.sec-games .gcard{
  width:min(72vw,300px);height:min(96vw,400px);
  border-color:var(--line-2);
  transition:border-color var(--d) var(--ease),opacity calc(600ms*var(--m)) var(--ease),transform calc(700ms*var(--m)) var(--ease);
  transition-delay:0s,calc(var(--i,0)*70ms*var(--m)),calc(var(--i,0)*70ms*var(--m));
}
@media (min-width:768px){.sec-games .gcard{width:300px;height:400px}}
/* Entrée en cascade (translateX 24px → 0, stagger 70 ms ; réduit : opacité seule) — JS requis, sinon visible */
html.js .sec-games .gtrack:not(.gm-in) .gcard{opacity:0;transform:translateX(calc(24px*var(--mt)))}
.sec-games .gcard:hover,.sec-games .gcard:focus-within{border-color:var(--cyan-line)}

.sec-games .gm-fig{position:absolute;inset:0;margin:0;overflow:hidden;background:var(--card)}
.sec-games .gm-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;user-select:none;transform:scale(1);transition:transform calc(600ms*var(--m)) var(--ease);will-change:transform}
.sec-games .gcard:hover .gm-fig img,.sec-games .gcard:focus-within .gm-fig img{transform:scale(calc(1 + .04*var(--mt)))}
/* Repli image absente : dégradé + nom du jeu en filigrane (le nom reste aussi dans .gbody) */
.sec-games .gm-fb{position:absolute;left:var(--sp-2);right:var(--sp-2);top:18%;font:800 clamp(28px,9vw,40px)/1 var(--disp);letter-spacing:-.03em;text-transform:uppercase;color:rgba(255,255,255,.10);word-break:break-word;pointer-events:none}
.sec-games .gcard.gm-noimg .gm-fig{background:linear-gradient(160deg,var(--card) 20%,var(--rose-soft))}
.sec-games .gcard.gm-noimg .gm-fb{color:rgba(255,255,255,.16)}

/* Voile du haut pour la lisibilité du tag/index (le dégradé bas 70 % vient de base.css) */
.sec-games .gcard::before{content:'';position:absolute;left:0;right:0;top:0;height:22%;z-index:1;background:linear-gradient(180deg,rgba(7,8,12,.55),transparent);pointer-events:none}
.sec-games .gcard .tag{color:var(--txt);background:rgba(7,8,12,.55);padding:6px 8px 6px 0;border-radius:var(--r-chip)}
.sec-games .gcard .tag::before{margin-left:8px}
/* Le voile de la carte ne couvre que le haut : sur une image claire, ce
   numero passait sous le contraste minimal. Il recoit sa propre pastille,
   comme `.tag` juste au-dessus. */
.sec-games .gm-idx{background:rgba(6,7,11,.55);padding:6px 8px;border-radius:999px;position:absolute;top:var(--sp-2);right:var(--sp-2);z-index:1;font:500 11px/1 var(--mono);letter-spacing:.16em;color:var(--dim);padding:6px 0}

/* Corps : nom / phrase / version / déclencheurs (au hover, visibles par défaut au tactile) */
.sec-games .gcard .gbody{padding:var(--sp-2) var(--sp-3) var(--sp-3);display:flex;flex-direction:column;gap:10px}
.sec-games .gcard h3{font-size:24px;line-height:1.05;letter-spacing:-.02em;text-wrap:balance}
.sec-games .gm-line{font-size:14px;line-height:1.5;color:var(--dim);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.sec-games .gm-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:22px}
.sec-games .triggers{
  display:grid;grid-template-rows:0fr;margin:0;
  opacity:0;transform:translateY(calc(6px*var(--mt)));
  transition:grid-template-rows calc(360ms*var(--m)) var(--ease),opacity calc(300ms*var(--m)) var(--ease),transform calc(360ms*var(--m)) var(--ease);
  font:500 11px/1.5 var(--mono);letter-spacing:.04em;color:var(--dim-2);
}
.sec-games .triggers>span{min-height:0;overflow:hidden}
.sec-games .gm-trg-l{display:block;text-transform:uppercase;letter-spacing:.12em;font-size:10px;color:var(--dim-2);padding-top:10px;border-top:1px solid var(--line-2)}
.sec-games .gm-trg-v{display:block;color:var(--txt);font-weight:700;font-size:12px;letter-spacing:.06em;margin-top:2px}
.sec-games .gcard:hover .triggers,.sec-games .gcard:focus-within .triggers,.sec-games .gtrack:focus-visible .triggers{grid-template-rows:1fr;opacity:1;transform:none}
.sec-games .gcard:hover .gm-line,.sec-games .gcard:focus-within .gm-line{-webkit-line-clamp:3}
@media (hover:none),(pointer:coarse){
  .sec-games .triggers{grid-template-rows:1fr;opacity:1;transform:none}
  .sec-games .gm-line{-webkit-line-clamp:3}
}

/* ── Pied : une seule ligne de faits + CTA ─────────────────────────────────── */
.sec-games .gfoot{margin-top:var(--sp-4);font:500 12px/1.7 var(--mono);color:var(--dim-2);letter-spacing:.02em;max-width:70ch;font-variant-numeric:tabular-nums}
.sec-games .gfoot{padding-top:var(--sp-2);border-top:1px solid var(--line)}
.sec-games .sec-cta{margin-top:var(--sp-4)}

/* ── Lien de carte ──────────────────────────────────────────────────────────
   Le lien couvre la carte sans l'envelopper : le contenu garde sa mise en
   page, et un seul element recoit le focus clavier.
   ⚠ Pas de bordure au survol : la DA Halo s'allume, elle ne se cerne pas. */
.sec-games .gcard{position:relative}
.sec-games .gm-go{position:absolute;inset:0;z-index:3;border-radius:inherit;
  -webkit-tap-highlight-color:transparent}
.sec-games .gm-go:focus-visible{outline:2px solid var(--cyan,#00f0ff);outline-offset:3px}
/* Le survol se lit sur la carte, pas sur le lien invisible. */
.sec-games .gcard:has(.gm-go) .gm-fig img{transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.sec-games .gcard:has(.gm-go:hover) .gm-fig img{transform:scale(1.03)}
/* Pendant le glissement, le curseur doit dire « je deplace », pas « je clique ». */
.sec-games .gtrack.is-drag .gm-go{cursor:grabbing}
@media (prefers-reduced-motion:reduce){
  .sec-games .gcard:has(.gm-go:hover) .gm-fig img{transform:none}
}

/* ── Prix et appel a l'action sur la carte ──────────────────────────────────
   Ils n'existaient pas : le rail montrait onze jeux sans jamais dire qu'on
   pouvait les acheter. */
.sec-games .gm-buy{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:auto;padding-top:10px}
.sec-games .gm-price{font:800 17px/1 inherit;color:var(--txt,#f5f3f1)}
.sec-games .gm-or{font-size:11.5px;color:var(--dim-2,#848b9d);line-height:1.3}
/* L'appel a l'action s'allume avec la carte : la DA Halo eclaire, elle ne
   cerne pas. Le survol vient du lien qui couvre la carte, donc il reagit
   aussi quand on survole l'image. */
.sec-games .gm-cta{margin-left:auto;padding:8px 14px;border-radius:999px;
  font:700 12.5px/1 inherit;white-space:nowrap;
  background:rgba(255,255,255,.06);color:var(--txt,#f5f3f1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
  transition:background .25s ease,color .25s ease,box-shadow .25s ease}
.sec-games .gcard:has(.gm-go:hover) .gm-cta,
.sec-games .gcard:has(.gm-go:focus-visible) .gm-cta{
  background:linear-gradient(112deg,#00f0ff 0%,#ff007a 100%);color:#0a0a12;
  box-shadow:0 8px 24px rgba(255,0,122,.25)}
@media (prefers-reduced-motion:reduce){
  .sec-games .gm-cta{transition:none}
}