/* ============================================================================
   mobile.css — passe téléphone du 2026-08-20
   ----------------------------------------------------------------------------
   POURQUOI UN FICHIER À PART, chargé par partials/header.html (SSI) :
   - le partial couvre les 15 000 pages, y compris l'annuaire et les fiches
     générées, sans rien régénérer ;
   - le fichier est neuf, donc aucun visiteur ne l'a en cache. home.css, lui,
     est servi avec `max-age=1 mois` et son `?v=` est figé page par page
     (20, 21, 162 selon les générateurs) : un correctif posé uniquement là
     n'atteindrait pas les visiteurs récurrents avant un mois.
   Les corrections de fond sont AUSSI faites à la source dans css/home.css
   (grid-template-areas de .row-card, padding de .page-main) : les deux règles
   dupliquées ici sont un doublon assumé, le temps que les caches expirent.

   Trois défauts corrigés, tous invisibles en desktop :
   1. MENU : les 80 liens du burger étaient dépliés d'office dans un panneau
      `position:absolute` accroché à un en-tête `sticky`, haut de 2 500 px. La
      page défilait SOUS un panneau immobile : Donjons, Guides, Outils,
      Serveurs privés et Contact étaient INATTEIGNABLES au doigt.
   2. ANNUAIRE : la grille mobile de .row-card oubliait la zone « links », donc
      .rc-links{grid-area:links} créait une colonne implicite et « info »
      retombait à ~110 px (titre coupé mot par mot, pastilles empilées, accès
      Site/Discord rognés hors carte). Ligne de 465 px de haut, page de 22 000.
   3. FICHES SERVEURS : .page-main{padding:26px 0 0} écrasait le padding-inline
      de .container, donc tout le contenu collait au bord de l'écran.

   GARDE-FOU : le repli des sous-menus est conditionné à `html.nav-acc`, classe
   posée par le script d'accordéon de partials/header.html. Si ce script ne
   tourne pas (erreur JS, page qui n'inclut pas le partial), on retombe sur
   l'ancien comportement « tout déplié » : dégradé, mais jamais de lien perdu.
   ========================================================================= */

/* Le chevron d'accordéon (injecté par le JS du partial) n'existe que sur
   téléphone : en desktop les sous-menus s'ouvrent au survol. */
.main-nav .nav-exp{display:none}

/* ============ 1. MENU TÉLÉPHONE ============ */
@media (max-width:920px){
  /* Panneau plein écran, qui défile tout seul, au-dessus de tout. */
  .main-nav{position:fixed;top:68px;left:0;right:0;
    max-height:calc(100vh - 68px);max-height:calc(100dvh - 68px);
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    z-index:70;gap:2px;
    /* Fond OPAQUE : un backdrop-filter imbriqué dans celui de l'en-tête
       laissait transparaître la page derrière le menu. */
    background:#0b0e19;backdrop-filter:none;-webkit-backdrop-filter:none;
    border-bottom:1px solid var(--line);
    box-shadow:0 24px 60px -20px rgba(0,0,0,.85);
    padding:10px 16px calc(26px + env(safe-area-inset-bottom,0px))}

  /* Cibles tactiles de 48 px (WCAG 2.5.8 « Target Size »). */
  .main-nav>a,.main-nav .has-sub>a{display:flex;align-items:center;
    min-height:48px;padding:.7rem}
  .main-nav .has-sub>a{flex:1;min-width:0}

  /* --- Accordéon. Le lien du groupe reste un vrai lien (« Items » mène à
     /items/), seul le chevron déplie : aucune destination n'est perdue. --- */
  .main-nav .has-sub{display:grid;grid-template-columns:minmax(0,1fr) 48px;
    align-items:center;border-radius:12px}
  .main-nav .has-sub>a{grid-column:1}
  .main-nav .nav-exp{grid-column:2;display:grid;place-items:center;
    width:48px;height:48px;border:0;background:none;color:var(--t3);
    border-radius:12px;cursor:pointer;transition:color .2s,background .2s}
  .main-nav .nav-exp:hover,.main-nav .nav-exp:focus-visible{background:rgba(236,238,246,.06);color:var(--t1)}
  .main-nav .nav-exp svg{width:18px;height:18px;transition:transform .22s}
  .main-nav .has-sub.open>.nav-exp{color:var(--lime)}
  .main-nav .has-sub.open>.nav-exp svg{transform:rotate(180deg)}
  .main-nav .subnav{grid-column:1 / -1;padding:2px 0 8px 14px;margin:0 0 4px}
  .main-nav .subnav a{min-height:46px;padding:.55rem;font-size:.96rem}
  /* Croix du burger. L'écart des barres était fixé par `place-items:center`
     + des marges : chaque barre se centrait dans une ligne de 13,3 px, donc la
     croix ne se refermait pas (elle ressemblait à un chevron). On fixe l'écart
     par `gap`, le translateY correspond alors exactement.
     Doublon de css/home.css, cf. en-tête. */
  .burger{place-content:center;justify-items:center;gap:5px}
  .burger span{margin:0}
  .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  html.nav-acc .main-nav .subnav{display:none}
  html.nav-acc .main-nav .has-sub.open>.subnav{display:flex;flex-direction:column}

  /* Verrou de défilement : sans lui la page glisse sous le panneau ouvert. */
  html.nav-open,body.nav-open{overflow:hidden}
}

/* ============ 2. LIGNES DE L'ANNUAIRE ============ */
@media (max-width:760px){
  /* Zone « links » rétablie (doublon de css/home.css, cf. en-tête). */
  .row-card{grid-template-columns:minmax(0,1fr);
    grid-template-areas:"thumb" "meta" "info" "actions" "links"}
  /* La réserve de place de la pastille « code promo » n'a plus lieu d'être
     une fois la pastille passée en statique (@media 700px de home.css). */
  .row-card:has(.rc-code) .rc-info{padding-right:0}
  /* La barre d'accès doit pouvoir passer à la ligne : sinon « Discord » et
     l'avantage promo sortent de la carte et sont rognés (overflow:hidden). */
  .rc-links{flex-wrap:wrap;overflow:visible;gap:10px 16px}
  .rl-promo{margin-left:0}
  .rc-info h3{font-size:1.02rem;line-height:1.25;overflow-wrap:anywhere}
  .rc-thumb{height:118px}
  .pills{flex-wrap:wrap}
}

/* ============ 3. FICHES SERVEURS ============ */
/* padding-block, pas le raccourci padding : le raccourci écrasait le
   padding-inline de .container (doublon de css/home.css, cf. en-tête).
   Le padding-inline est REPOSÉ ici, et pas seulement neutralisé : tant que
   home.css est en cache, c'est son `padding:26px 0 0` qui gagne pour les
   côtés, un simple `padding-block` ne le déloge pas. Même valeur que
   .container, pour que les fiches s'alignent sur le reste du site. */
.page-main{padding-block:26px 0;padding-inline:clamp(16px,4vw,32px)}

/* ============ 4. TABLEAUX LARGES ============ */
/* Le tableau de répartition des caractéristiques (fiches de classe) défile
   déjà horizontalement ; on le SIGNALE par un dégradé, sinon la dernière
   colonne a l'air simplement coupée. */
@media (max-width:760px){
  .cls-carac-tblwrap{-webkit-mask-image:linear-gradient(90deg,#000 88%,rgba(0,0,0,.35));
    mask-image:linear-gradient(90deg,#000 88%,rgba(0,0,0,.35))}
}