/* ═══════════════════════════════════════════════════════════════════════
   /guides — index.

   Le bandeau sombre et le champ de recherche viennent de composants deja
   poses (`.page-hero` dans app.css, `.hsearch` dans help.css — charge ici
   pour cette raison). Cette feuille ajoute la banniere du pilier, les
   filtres et la grille de fiches.

   Contrainte de conception : tenir a cent fiches. D'ou une grille qui se
   remplit toute seule, des vignettes en chargement differe, et une rangee de
   filtres qui defile horizontalement au pouce plutot que de passer a la ligne
   six fois sur telephone.
   ═══════════════════════════════════════════════════════════════════════ */

.gx-shell{padding-top:36px;padding-bottom:80px}

/* ── le pilier ────────────────────────────────────────────────────────
   La page a lire en premier, et le lien interne le plus important de cette
   page : il ne se noie pas dans la grille. */
.gx-pillar{
  display:flex;align-items:center;gap:16px;
  padding:20px 22px;border-radius:var(--r-lg);margin-bottom:28px;
  background:linear-gradient(180deg,rgba(201,242,78,.20),rgba(201,242,78,.06));
  border:1px solid rgba(201,242,78,.45);color:var(--ink);
  transition:border-color .16s,transform .16s var(--ease),box-shadow .16s;
}
.gx-pillar:hover{border-color:var(--acid);transform:translateY(-2px);box-shadow:var(--shadow-sm);color:var(--ink)}
.gx-pillar-tag{
  flex:0 0 auto;font-family:var(--font-mono);font-size:10px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  padding:6px 11px;border-radius:999px;background:var(--ink);color:var(--acid);
}
.gx-pillar-tx{flex:1;min-width:0}
.gx-pillar-tx b{display:block;font-family:var(--font-display);font-size:17px;letter-spacing:-.015em;line-height:1.3}
.gx-pillar-tx small{display:block;margin-top:3px;font-size:13.5px;color:var(--ink-2);line-height:1.45}
.gx-pillar > svg{flex:0 0 auto;width:18px;height:18px;color:var(--green-ink)}

/* ── filtres ──────────────────────────────────────────────────────────── */
.gx-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.gx-chip{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 15px;
  border-radius:999px;background:var(--panel);border:1px solid var(--line);
  color:var(--ink-2);font-family:inherit;font-size:14px;font-weight:500;
  white-space:nowrap;transition:background .15s,border-color .15s,color .15s;
}
.gx-chip:hover{border-color:var(--line-2);color:var(--ink)}
.gx-chip svg{width:15px;height:15px;flex:0 0 auto}
.gx-chip .gx-n{
  font-family:var(--font-mono);font-size:11px;color:var(--muted);
  padding:1px 6px;border-radius:999px;background:var(--bg-2);
}
.gx-chip.on{background:var(--ink);border-color:var(--ink);color:var(--inv)}
.gx-chip.on .gx-n{background:rgba(255,255,255,.14);color:var(--acid)}
.gx-chip.on svg{color:var(--acid)}

/* ── grille ───────────────────────────────────────────────────────────── */
.gx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gx-card[hidden]{display:none}
.gx-card-link{
  display:flex;flex-direction:column;height:100%;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;color:var(--ink);
  transition:border-color .16s,transform .16s var(--ease),box-shadow .18s;
}
.gx-card-link:hover{border-color:var(--acid);transform:translateY(-3px);box-shadow:var(--shadow);color:var(--ink)}
.gx-thumb{display:block;position:relative;aspect-ratio:16/9;background:#0a0c10;overflow:hidden}
.gx-thumb img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s var(--ease)}
.gx-card-link:hover .gx-thumb img{transform:scale(1.03)}
.gx-body{display:flex;flex-direction:column;flex:1;padding:17px 18px 18px;gap:7px}
.gx-cat{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--green-ink);
}
.gx-cat svg{width:13px;height:13px;flex:0 0 auto}
.gx-title{font-family:var(--font-display);font-size:16.5px;line-height:1.3;letter-spacing:-.015em}
.gx-desc{font-size:13.5px;line-height:1.5;color:var(--muted);flex:1}
.gx-go{
  display:inline-flex;align-items:center;gap:7px;margin-top:4px;
  font-size:13.5px;font-weight:600;color:var(--green-ink);
}
.gx-go svg{width:15px;height:15px;flex:0 0 auto;transition:transform .18s var(--ease)}
.gx-card-link:hover .gx-go svg{transform:translateX(3px)}

/* ── bas de page ──────────────────────────────────────────────────────── */
.gx-end{margin-top:44px;padding-top:32px;border-top:1px solid var(--line);text-align:center}
.gx-end h2{font-size:22px;margin-bottom:8px}
.gx-end p{margin:0;color:var(--ink-2)}
.gx-end a:not(.btn):not(.gd-card):not(.lg-card):not(.gx-card):not(.chip){color:var(--green-ink);text-decoration:underline;text-underline-offset:2px}
.gx-end a:hover{color:var(--ink)}

/* ═════════════════ ECRANS INTERMEDIAIRES ════════════════════════════ */
@media (max-width:1040px){
  .gx-grid{grid-template-columns:repeat(2,1fr)}
}

/* ═════════════════ TELEPHONE ════════════════════════════════════════ */
@media (max-width:640px){
  .gx-shell{padding-top:22px;padding-bottom:56px}

  /* La pastille « Start here » et le chevron encadraient le texte et le
     comprimaient a rien : sur telephone tout s'empile. */
  .gx-pillar{flex-wrap:wrap;gap:11px;padding:17px 16px;border-radius:15px}
  .gx-pillar-tx{flex:1 1 100%;order:2}
  .gx-pillar > svg{display:none}
  .gx-pillar-tx b{font-size:16px}

  /* Six filtres passeraient sur trois lignes : ils defilent au pouce, avec
     une marge qui laisse deviner qu'il y en a d'autres a droite. */
  .gx-filters{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin-inline:-16px;padding-inline:16px;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  }
  .gx-filters::-webkit-scrollbar{display:none}
  .gx-chip{flex:0 0 auto;scroll-snap-align:start;font-size:13.5px;padding:0 13px}

  .gx-grid{grid-template-columns:1fr;gap:14px}
  .gx-body{padding:15px 16px 16px}
  .gx-title{font-size:16px}

  .gx-end{margin-top:34px;padding-top:26px}
}