/*
 * mobile-accueil-ergonomics.css
 * Ergonomie mobile de la page d'accueil (body.lt-accueil-gl).
 * Problème corrigé : sur mobile, des sections gardaient un padding vertical de
 * niveau desktop (8rem–14rem) car leur spécificité ID échappait aux réductions
 * mobiles génériques → page ~15 écrans de haut, trop d'air, peu lisible.
 *
 * Cette couche, chargée EN DERNIER, impose un rythme vertical mobile cohérent
 * et raccourcit le hero plein-écran. 100% additive (@media max-width:768px),
 * aucun impact desktop. Ne touche ni couleurs ni typographie ni largeurs —
 * uniquement l'espacement vertical (densité de lecture).
 */
@media (max-width: 768px) {
  /* Hero : conserver l'impact du titre, mais ne plus occuper tout l'écran.
     Le hero centre son contenu verticalement (align-items:center) → le titre
     remontait sous le header fixe (98px) et "tapait" dedans. On aligne le
     contenu en haut et on dégage l'espace du header + marge. */
  body.lt-accueil-gl .lt-gl-hero {
    align-items: flex-start !important;
    min-height: 60svh !important;
    padding-top: calc(var(--gl-nav-h, 64px) + 1.75rem) !important;
    padding-bottom: 2.25rem !important;
  }

  /* Rythme vertical mobile unifié pour toutes les sections (≈44px haut/bas) */
  body.lt-accueil-gl #gl-stats,
  body.lt-accueil-gl #gl-search,
  body.lt-accueil-gl #gl-products,
  body.lt-accueil-gl #gl-community,
  body.lt-accueil-gl #gl-manifesto,
  body.lt-accueil-gl #gl-why,
  body.lt-accueil-gl #gl-cta-final,
  body.lt-accueil-gl #gl-nouveautes {
    padding-top: 2.75rem !important;
    padding-bottom: 2.75rem !important;
  }

  /* Filet pour toute autre section accueil non couverte par un ID ci-dessus
     (carte, FAQ…) — spécificité classe, ne combat pas les IDs déjà réglés. */
  body.lt-accueil-gl .lt-gl-section {
    padding-top: 2.75rem;
    padding-bottom: 2.75rem;
  }

  /* (Règle .accueil-featured .lt-grid--3 supprimée : la section « à la une »
     est devenue un carrousel .lt-gl-pg-carousel — 2 cartes par vue géré
     dans accueil-grand-line.css.) */

  /* Titres de section : 41px + coupure mot ("REMARQUÉE S") → trop gros et
     cassé. On réduit l'échelle et on coupe proprement entre les mots. */
  body.lt-accueil-gl .lt-gl-stitle,
  body.lt-accueil-gl .lt26-section-title {
    font-size: clamp(1.5rem, 6.4vw, 2.1rem) !important;
    line-height: 1.12 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }

  /* "La cité en chiffres" : cartes stats en 2 colonnes compactes au lieu d'1
     colonne de grands rectangles. */
  body.lt-accueil-gl #gl-stats .lt-gl-sg {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.6rem !important;
  }
  body.lt-accueil-gl #gl-stats .lt-gl-sc {
    padding: 0.9rem 0.6rem !important;
  }
  body.lt-accueil-gl #gl-stats .lt-gl-sn {
    font-size: clamp(1.5rem, 7vw, 2rem) !important;
  }

  /* Manifeste : passage narratif secondaire, masqué sur mobile (peu utile,
     allège fortement la page). */
  body.lt-accueil-gl #gl-manifesto {
    display: none !important;
  }

  /* "Pourquoi rejoindre la cité" : rectangles plus compacts. */
  body.lt-accueil-gl #gl-why .lt-gl-wc {
    padding: 1rem 1rem !important;
  }
  body.lt-accueil-gl #gl-why .lt-gl-wg {
    gap: 0.7rem !important;
  }

  /* Titre CTA final "Ta collection mérite sa vitrine" : 61.8px, démesuré et
     coupé en plein mot ("COLLECT ION"). On réduit fortement + coupe propre. */
  body.lt-accueil-gl .lt-gl-ctitle {
    font-size: clamp(1.6rem, 7vw, 2.4rem) !important;
    line-height: 1.12 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }
}