/* ============================================================================
   L'ACCUEIL DU SITE (/fr), d'après la maquette client « homepage-ilovevalorant ».

   ENTIÈREMENT SCOPÉE `.home-page`, SANS EXCEPTION, comme setup.css, lore.css et
   les feuilles des guides. La raison est toujours la même : cette feuille est
   chargée dans @section('head'), donc AVANT agent.css et mega-menu.css, et un
   sélecteur nu (`.section`, `.tag`, `.btn`, `.tool`, `.about`…) y perdrait ses
   arbitrages de spécificité en débordant sur tout le reste du site. Le pied de
   page commun n'est donc pas repeint, contrairement à la maquette.

   AUCUN JETON N'EST POSÉ EN :root. La palette de marque de la maquette
   (--coral, --dark, --text-light, --lore-accent, --setup-accent,
   --progress-accent…) existe déjà à l'identique dans le :root d'agent.css :
   elle est CONSOMMÉE, jamais redéclarée. Les seules valeurs propres à cette
   page vivent en jetons locaux `--hm-*` sur `.home-page`.

   L'en-tête et le pied de page de la maquette ne sont pas repris : le site a
   son méga menu et son pied de page communs. Les règles correspondantes
   (header, nav, .hamburger, footer) sont donc absentes de cette feuille.
   ========================================================================= */

  .home-page {
    /* Violet de la colonne « Setup & Matériel » de la zone éditoriale : la
       seule couleur de la maquette qui n'est pas déjà dans la palette. */
    --hm-edito-setup: #b44ddf;
    /* Décalage des ancres des quatre tuiles du hero : la barre du méga menu
       est collante, --hdr-h vient de mega-menu.css. */
    --hm-anchor: calc(var(--hdr-h, 72px) + 24px);
  }

  /* ========== HERO ========== */
  .home-page .hero {
    position: relative;
    background: linear-gradient(135deg, var(--dark) 0%, var(--dark-mid) 100%);
    min-height: 520px;
    display: flex;
    align-items: center;
    overflow: hidden;
  }

  .home-page .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse at 80% 50%, rgba(232, 99, 126, 0.15) 0%, transparent 60%),
      radial-gradient(ellipse at 20% 80%, rgba(124, 92, 191, 0.1) 0%, transparent 50%);
    pointer-events: none;
  }

  .home-page .hero::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><defs><pattern id="g" width="40" height="40" patternUnits="userSpaceOnUse"><path d="M0 40L40 0M-10 10L10-10M30 50L50 30" stroke="rgba(232,99,126,0.06)" stroke-width="1"/></pattern></defs><rect fill="url(%23g)" width="400" height="400"/></svg>');
    pointer-events: none;
  }

  .home-page .hero-content {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 40px;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
  }

  .home-page .hero-text h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3.8rem;
    color: var(--white);
    line-height: 1.05;
    letter-spacing: 2px;
    margin-bottom: 16px;
  }

  .home-page .hero-text h1 span { color: var(--coral); }

  .home-page .hero-text > p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 32px;
    max-width: 460px;
  }

  .home-page .hero-ctas {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
  }

  .home-page .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 8px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
  }

  .home-page .btn-coral {
    background: var(--coral);
    color: #fff;
    box-shadow: 0 4px 20px rgba(232, 99, 126, 0.35);
  }

  .home-page .btn-coral:hover {
    background: var(--coral-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(232, 99, 126, 0.45);
  }

  .home-page .btn-outline {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.3);
  }

  .home-page .btn-outline:hover {
    border-color: var(--coral);
    color: var(--coral);
    transform: translateY(-2px);
  }

  .home-page .hero-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  /* LES QUATRE TUILES SONT STRICTEMENT IDENTIQUES : même fond translucide
     sombre, même bordure, même survol. La maquette prévoyait une couleur de
     bordure au survol par section, seul écart de style entre les tuiles : il
     n'est pas repris (décision client). */
  .home-page .hero-card {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 24px 20px;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }

  .home-page .hero-card:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-4px);
  }

  .home-page .hero-card .card-icon {
    font-size: 1.8rem;
    margin-bottom: 12px;
    display: block;
  }

  .home-page .hero-card h3 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.2rem;
    color: #fff;
    letter-spacing: 1px;
    margin-bottom: 6px;
  }

  .home-page .hero-card p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.78rem;
    line-height: 1.5;
  }

  /* ========== SECTIONS, ANATOMIE COMMUNE ========== */
  .home-page .section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 40px;
  }

  /* Les quatre sections ancrées par les tuiles du hero passent sous la barre
     collante du méga menu si elles ne se décalent pas. */
  .home-page #progresser,
  .home-page #setup,
  .home-page #lore,
  .home-page #actu { scroll-margin-top: var(--hm-anchor); }

  .home-page .section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;
  }

  .home-page .section-label {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 8px;
  }

  .home-page .section-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.4rem;
    letter-spacing: 1px;
    line-height: 1.1;
    color: var(--dark);
  }

  .home-page .section-link {
    color: var(--coral);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.2s;
    white-space: nowrap;
  }

  .home-page .section-link:hover { gap: 10px; }

  .home-page .divider {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, #ddd, transparent);
    max-width: 1200px;
    margin: 0 auto;
  }

  /* ========== PROGRESSER ========== */
  .home-page .section-progresser .section-label { color: var(--progress-accent); }

  .home-page .progress-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
  }

  .home-page .guide-card {
    display: block;
    background: var(--white);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid #eee;
    position: relative;
  }

  .home-page .guide-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
    border-color: transparent;
  }

  .home-page .guide-card-img {
    height: 180px;
    position: relative;
    overflow: hidden;
  }

  .home-page .guide-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
  }

  .home-page .guide-card:hover .guide-card-img img { transform: scale(1.05); }

  .home-page .guide-card-img .difficulty {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .home-page .difficulty.easy { background: var(--progress-accent); }
  .home-page .difficulty.medium { background: #e67e22; }

  .home-page .guide-card-body { padding: 20px; }

  .home-page .guide-card-body .tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 10px;
    border-radius: 4px;
    margin-bottom: 10px;
  }

  .home-page .tag-aim { background: #e8f5e9; color: var(--progress-accent); }
  .home-page .tag-strat { background: #e3f2fd; color: var(--setup-accent); }
  .home-page .tag-agent { background: var(--coral-light); color: var(--coral); }

  .home-page .guide-card-body h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 8px;
    line-height: 1.3;
  }

  .home-page .guide-card-body p {
    font-size: 0.82rem;
    color: var(--text-light);
    line-height: 1.5;
  }

  /* ========== SETUP & MATÉRIEL ========== */
  .home-page .setup-section {
    background: var(--dark);
    position: relative;
    overflow: hidden;
  }

  .home-page .setup-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 70% 30%, rgba(45, 156, 219, 0.08) 0%, transparent 60%);
    pointer-events: none;
  }

  .home-page .setup-section .section { position: relative; z-index: 2; }
  .home-page .setup-section .section-label { color: var(--setup-accent); }
  .home-page .setup-section .section-title { color: #fff; }
  .home-page .setup-section .section-link { color: var(--setup-accent); }

  .home-page .setup-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }

  .home-page .setup-card {
    display: block;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 28px 22px;
    text-decoration: none;
    transition: all 0.3s ease;
    text-align: center;
  }

  .home-page .setup-card:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--setup-accent);
    transform: translateY(-4px);
  }

  .home-page .setup-card .setup-icon {
    font-size: 2.4rem;
    margin-bottom: 14px;
    display: block;
  }

  /* Les pictos du client sont bleu nuit : sur les cartes sombres du hero et
     de la section Setup, ils se fondaient dans le fond. Une pastille claire
     derrière eux les fait ressortir (demande client 05/08) ; dimensions en
     em, elles suivent la taille d'icône propre à chaque carte. */
  .home-page .hero-card .card-icon .picto,
  .home-page .setup-card .setup-icon .picto {
    background: rgba(255, 255, 255, 0.85);
    border-radius: 0.35em;
    padding: 0.16em;
    box-sizing: content-box;
  }

  .home-page .setup-card h3 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.1rem;
    color: #fff;
    letter-spacing: 1px;
    margin-bottom: 8px;
  }

  .home-page .setup-card p {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.5;
  }

  /* ========== LORE & UNIVERS ========== */
  .home-page .section-lore .section-label { color: var(--lore-accent); }

  .home-page .lore-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 0.8fr;
    grid-template-rows: auto auto;
    gap: 20px;
  }

  .home-page .lore-card {
    display: block;
    background: var(--white);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid #eee;
    position: relative;
  }

  .home-page .lore-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
    border-color: transparent;
  }

  .home-page .lore-featured {
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
  }

  .home-page .lore-card-img {
    height: 160px;
    overflow: hidden;
    position: relative;
  }

  .home-page .lore-featured .lore-card-img {
    flex: 1;
    height: auto;
    min-height: 200px;
  }

  .home-page .lore-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s;
  }

  .home-page .lore-card:hover .lore-card-img img { transform: scale(1.05); }

  .home-page .lore-card-body { padding: 20px; }

  .home-page .lore-card-body .lore-tag {
    display: inline-block;
    background: #f3e5f5;
    color: var(--lore-accent);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 10px;
    border-radius: 4px;
    margin-bottom: 8px;
  }

  .home-page .lore-card-body h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 6px;
    line-height: 1.3;
  }

  .home-page .lore-card-body p {
    font-size: 0.82rem;
    color: var(--text-light);
    line-height: 1.5;
  }

  /* ========== ACTUALITÉS ========== */
  .home-page .actu-strip {
    background: var(--white);
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
  }

  .home-page .section-actu { padding-top: 50px; padding-bottom: 50px; }
  .home-page .section-actu .section-title { font-size: 1.6rem; }

  .home-page .actu-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  .home-page .actu-item {
    display: flex;
    gap: 16px;
    text-decoration: none;
    padding: 16px 0;
    transition: all 0.2s;
  }

  .home-page .actu-item:hover { opacity: 0.8; }

  .home-page .actu-thumb {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
  }

  .home-page .actu-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .home-page .actu-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .home-page .actu-date {
    font-size: 0.7rem;
    color: var(--coral);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
  }

  .home-page .actu-info h3 {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.3;
  }

  /* ========== VISUELS DE REPLI ==========
     Le dégradé tient lieu de visuel quand la carte n'a pas d'image : le guide
     « Quel agent pour débuter » (ses visuels sont les portraits d'agents) et
     les articles d'actualité sans image à la une. */
  .home-page .img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  .home-page .img-aim { background: linear-gradient(135deg, #1a2a3a, #2d9cdb); }
  .home-page .img-agent { background: linear-gradient(135deg, #3a1a2a, var(--coral)); }
  .home-page .img-strat { background: linear-gradient(135deg, #2a1a3a, var(--lore-accent)); }
  .home-page .img-actu { background: linear-gradient(135deg, #2a1a1a, var(--coral-dark)); }

  /* ========== ANIMATIONS ==========
     Le nom de l'animation est préfixé : une keyframe est GLOBALE, même déclarée
     dans une feuille scopée, et « fadeUp » écraserait celle d'une autre page. */
  @keyframes homeFadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .home-page .animate-in {
    opacity: 0;
    animation: homeFadeUp 0.6s ease forwards;
  }

  .home-page .delay-1 { animation-delay: 0.1s; }
  .home-page .delay-2 { animation-delay: 0.2s; }
  .home-page .delay-3 { animation-delay: 0.3s; }
  .home-page .delay-4 { animation-delay: 0.4s; }

  /* Sans JavaScript, l'observateur ne met jamais l'animation en pause : la
     page reste complète. Avec un lecteur qui refuse les animations, tout est
     affiché d'emblée. */
  @media (prefers-reduced-motion: reduce) {
    .home-page .animate-in { opacity: 1; animation: none; }
  }

  /* ========== ZONE ÉDITORIALE ========== */
  .home-page .edito { background: var(--white); border-top: 1px solid #ececec; }
  .home-page .edito-in { max-width: 1200px; margin: 0 auto; padding: 60px 40px 54px; }
  .home-page .edito-head { max-width: 820px; margin-bottom: 30px; }

  .home-page .edito .kicker {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 10px;
  }

  .home-page .edito h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.85rem;
    color: var(--dark);
    letter-spacing: 1.2px;
    line-height: 1.08;
    margin-bottom: 16px;
  }

  .home-page .edito h2 em { color: var(--coral); font-style: normal; }
  .home-page .edito h3 { font-size: 1rem; font-weight: 700; color: var(--dark); margin: 0 0 9px; }
  .home-page .edito p { font-size: 0.92rem; color: var(--text-light); line-height: 1.9; margin: 0 0 16px; }
  .home-page .edito p:last-child { margin-bottom: 0; }
  .home-page .edito p strong { color: var(--text); font-weight: 600; }

  .home-page .edito a {
    color: var(--coral-dark);
    text-decoration: none;
    border-bottom: 1px solid rgba(232, 99, 126, 0.3);
    transition: all 0.2s;
  }

  .home-page .edito a:hover { background: var(--coral-light); border-bottom-color: var(--coral-dark); }

  .home-page .edito-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin: 34px 0 0; }
  .home-page .ecol { padding-top: 20px; border-top: 3px solid var(--c); }

  .home-page .ecol .etag {
    font-size: 0.63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--c);
    margin-bottom: 7px;
  }

  .home-page .ecol p { font-size: 0.87rem; line-height: 1.82; }

  /* ========== LES OUTILS ========== */
  .home-page .tools {
    margin-top: 40px;
    padding: 28px 32px;
    border-radius: 18px;
    background: linear-gradient(135deg, #0e0a14 0%, #241832 55%, #33204a 100%);
    position: relative;
    overflow: hidden;
  }

  .home-page .tools::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 82% 40%, rgba(232, 99, 126, 0.2) 0%, transparent 62%);
    pointer-events: none;
  }

  .home-page .tools > * { position: relative; z-index: 2; }

  .home-page .tools h3 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.35rem;
    color: #fff;
    letter-spacing: 1.2px;
    margin-bottom: 10px;
  }

  .home-page .tools > p {
    color: rgba(255, 255, 255, 0.46);
    font-size: 0.9rem;
    line-height: 1.8;
    max-width: 760px;
    margin-bottom: 20px;
  }

  .home-page .tools > p strong { color: rgba(255, 255, 255, 0.82); }

  .home-page .tool-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

  .home-page .tool {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 17px 19px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-decoration: none;
    color: inherit;
    transition: all 0.24s;
  }

  .home-page a.tool:hover {
    background: rgba(255, 255, 255, 0.09);
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.16);
  }

  .home-page .tool .ti {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    /* Le voile corail (16 %) datait des emojis : sous les pictos bleu nuit
       du client, il les laissait se fondre dans la carte sombre. Même
       pastille claire que les tuiles du hero et les cartes Setup
       (demande client 05/08). */
    background: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
  }

  .home-page .tool strong { display: block; font-size: 0.88rem; color: #fff; margin-bottom: 3px; }
  .home-page .tool span.d { font-size: 0.76rem; color: rgba(255, 255, 255, 0.4); line-height: 1.55; }

  /* L'OUTIL QUI N'EXISTE PAS ENCORE : la carte reste affichée mais n'est pas un
     lien (doctrine du site, jamais de « # »). État grisé et étiquette
     « Bientôt », repris du « À venir » des cartes du hub lore. */
  .home-page .tool.soon { opacity: 0.6; }

  .home-page .tool .soon-tag {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.82);
    color: #888;
    font-size: 0.53rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    vertical-align: middle;
  }

  /* ========== FAQ ET À PROPOS ========== */
  .home-page .edito-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 34px; }

  .home-page .efq {
    background: var(--bg);
    border: 1px solid #ececec;
    border-radius: 14px;
    padding: 20px 22px;
  }

  .home-page .efq h3 {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 9px;
    font-size: 0.92rem;
    line-height: 1.4;
  }

  .home-page .efq h3::before {
    content: '?';
    flex-shrink: 0;
    width: 23px;
    height: 23px;
    border-radius: 7px;
    background: var(--coral-light);
    color: var(--coral-dark);
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .home-page .efq p { font-size: 0.85rem; line-height: 1.82; }

  .home-page .about {
    margin-top: 34px;
    padding: 22px 26px;
    background: var(--bg);
    border: 1px solid #ececec;
    border-radius: 14px;
  }

  .home-page .about p { font-size: 0.84rem; line-height: 1.82; margin: 0; }
  .home-page .about p + p { margin-top: 11px; }

  /* ========== TABLETTE ========== */
  @media (max-width: 1024px) {
    .home-page .hero-content { grid-template-columns: 1fr; gap: 40px; }
    .home-page .hero-text { text-align: center; }
    .home-page .hero-text > p { margin-left: auto; margin-right: auto; }
    .home-page .hero-ctas { justify-content: center; }
    .home-page .progress-grid { grid-template-columns: 1fr 1fr; }
    .home-page .setup-grid { grid-template-columns: 1fr 1fr; }
    .home-page .lore-grid { grid-template-columns: 1fr 1fr; }
    .home-page .lore-featured { grid-row: auto; grid-column: 1 / -1; }
    .home-page .lore-featured .lore-card-img { min-height: 200px; }
  }

  /* ========== ZONE ÉDITORIALE, MOBILE ========== */
  @media (max-width: 900px) {
    .home-page .edito-in { padding: 40px 20px 36px; }
    .home-page .edito h2 { font-size: 1.5rem; }
    .home-page .edito-cols,
    .home-page .tool-row,
    .home-page .edito-faq { grid-template-columns: 1fr; }
    .home-page .tools { padding: 24px 22px; }
  }

  /* ========== MOBILE ========== */
  @media (max-width: 768px) {
    .home-page .hero { min-height: auto; }
    .home-page .hero-content { padding: 40px 20px; gap: 32px; }
    .home-page .hero-text h1 { font-size: 2.4rem; }
    .home-page .hero-text > p { font-size: 0.95rem; }
    .home-page .hero-ctas { flex-direction: column; gap: 10px; }
    .home-page .hero-ctas .btn { width: 100%; justify-content: center; padding: 16px 24px; }

    /* Les tuiles passent en défilement horizontal. */
    .home-page .hero-cards {
      grid-template-columns: none;
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      gap: 12px;
      padding-bottom: 8px;
      margin: 0 -20px;
      padding-left: 20px;
      padding-right: 20px;
      -webkit-overflow-scrolling: touch;
    }
    .home-page .hero-card {
      min-width: 160px;
      flex-shrink: 0;
      scroll-snap-align: start;
      padding: 20px 16px;
    }
    .home-page .hero-card .card-icon { font-size: 1.5rem; margin-bottom: 8px; }
    .home-page .hero-card h3 { font-size: 1rem; }
    .home-page .hero-card p { font-size: 0.72rem; }

    .home-page .section { padding: 50px 20px; }
    .home-page .section-header { flex-direction: column; align-items: flex-start; gap: 12px; }
    .home-page .section-title { font-size: 1.8rem; }
    .home-page .section-label { font-size: 0.75rem; }

    .home-page .progress-grid {
      grid-template-columns: none;
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      gap: 16px;
      margin: 0 -20px;
      padding: 0 20px 12px 20px;
      -webkit-overflow-scrolling: touch;
    }
    .home-page .guide-card {
      min-width: 280px;
      flex-shrink: 0;
      scroll-snap-align: start;
    }
    .home-page .guide-card-img { height: 150px; }

    .home-page .setup-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .home-page .setup-card { padding: 20px 14px; }
    .home-page .setup-card .setup-icon { font-size: 2rem; margin-bottom: 10px; }
    .home-page .setup-card h3 { font-size: 0.95rem; }
    .home-page .setup-card p { font-size: 0.72rem; }

    .home-page .lore-grid { grid-template-columns: 1fr; gap: 16px; }
    .home-page .lore-featured { grid-column: auto; }
    .home-page .lore-featured .lore-card-img { min-height: 180px; }
    .home-page .lore-card-img { height: 140px; }

    .home-page .actu-grid { grid-template-columns: 1fr; gap: 0; }
    .home-page .actu-item { padding: 16px 0; border-bottom: 1px solid #f0f0f0; }
    .home-page .actu-item:last-child { border-bottom: none; }
    .home-page .actu-thumb { width: 70px; height: 70px; border-radius: 8px; }
    .home-page .actu-info h3 { font-size: 0.85rem; }
  }

  /* ========== PETIT MOBILE ========== */
  @media (max-width: 400px) {
    .home-page .hero-text h1 { font-size: 1.9rem; }
    .home-page .hero-text > p { font-size: 0.88rem; }
    .home-page .hero-card { min-width: 140px; }
    .home-page .guide-card { min-width: 250px; }
    .home-page .setup-grid { grid-template-columns: 1fr; }
    .home-page .section-title { font-size: 1.5rem; }
  }