/* Landings de tunnel — version mobile commune.
   Chargée par /lp/media/, /lp/formation/ et /lp/acquisition/ (décision de
   Céline : même version mobile sur les trois). Ce qui est propre à une page
   (halo, visuel du hero, section de témoignages) est ajusté dans
   landing-formation-mobile.css et landing-acquisition-mobile.css.

   Source : maquettes/Landing Media - v2.html (Claude Design, 18/09/2026),
   bloc « Mobile » recopié tel quel. Deux écarts, et deux seulement :
   - seuil à 1079 px au lieu de 760 px. D'abord 640 px (consigne de
     Céline), étendu le 18/09/2026 à sa demande : entre 641 et 1050 px, la
     mise en page ordinateur à deux colonnes écrasait titres et boutons à un
     mot par ligne (mesuré tous les 10 px). Au-delà de 1079 px, rien ne
     change : le rendu ordinateur reste celui de la maquette d’origine ;
   - les deux règles du bouton du formulaire, rangées dans ce bloc (voir
     ci-dessous).
   Une règle ajoutée ensuite, à la fin du bloc : l'espace au-dessus du visuel
   du hero (demande de Céline, 18/09/2026).
   Les quatre règles .ebook-halo ne visent aucun élément des trois pages :
   elles sont gardées pour rester identique à la maquette. */
@media (max-width: 1079px){
    /* Bouton du formulaire : les deux règles que la maquette pose hors de
       tout @media, recopiées ici. Hors de ce bloc, elles réduiraient aussi
       le bouton sur ordinateur (538 px → 250 px). */
    #inscription form button { animation: ctaPulse 2.2s ease-in-out infinite; margin: 0 auto; }
    #inscription form > button { width: fit-content !important; margin: 0 auto !important; }

    html, body{overflow-x:hidden;}
    .lm-nav{flex-direction:column !important;gap:14px !important;padding:20px 20px !important;text-align:center;}
    .lm-nav > div{flex-wrap:wrap;justify-content:center;text-align:center;}
    .lm-nav .lm-nav-cta{display:none !important;}
    .lm-hero{display:flex !important;flex-direction:column !important;padding:44px 20px 36px !important;gap:30px !important;text-align:center;}
    .lm-hero h1{font-size:34px !important;}
    .lm-hero p{margin-left:auto !important;margin-right:auto !important;font-size:16.5px !important;}
    .lm-hero .lm-cta-row{flex-direction:column !important;gap:12px !important;justify-content:center;align-items:center !important;margin-top:26px !important;}
    .lm-hero .lm-gbadge{display:inline-flex !important;flex-wrap:wrap;justify-content:center;border-radius:22px !important;padding:10px 16px !important;}
    .lm-hero .ebook-halo .r1{width:220px !important;height:220px !important;}
    .lm-hero .ebook-halo .r2{width:280px !important;height:280px !important;}
    .lm-hero .ebook-halo .r3{width:330px !important;height:330px !important;}
    .lm-hero .ebook-halo .ring-glow{width:250px !important;height:250px !important;}
    .lm-hero img[alt^="Ebook"]{max-width:300px !important;margin:0 auto;}
    .lm-cue{padding:4px 20px 0 !important;}
    .lm-formsec{padding:44px 16px 56px !important;}
    .lm-formsec .lm-formgrid{display:flex !important;flex-direction:column !important;gap:32px !important;text-align:center;}
    .lm-formsec .lm-formgrid h2{font-size:26px !important;}
    .lm-programme{align-items:flex-start;text-align:left;max-width:440px;margin:0 auto;}
    .lm-formsec #inscription{padding:26px 18px !important;max-width:100%;}
    .lm-formsec #inscription .lm-fields{flex-direction:column !important;gap:14px !important;}
    .lm-partners{padding:48px 16px 28px !important;}
    .lm-partners p{font-size:20px !important;}
    .lm-qualiopi{padding:40px 20px !important;}
    .lm-qualiopi .lm-qlcard{display:flex !important;flex-direction:column !important;gap:20px !important;padding:26px 20px !important;text-align:center;}
    .lm-qualiopi .lm-qlcard img{margin:0 auto !important;height:110px !important;}
    .lm-qualiopi .lm-qlsep{width:100% !important;height:1px !important;}
  
    /* Ajout du 18/09/2026, absent de la maquette : sur le téléphone de Céline,
       le visuel (ebook, vidéo) paraissait collé au bouton du hero. 24 px de
       marge fixe s'ajoutent aux 30 px d'espacement de la colonne ; une marge
       reste en place même dans les navigateurs qui ignorent `gap`. */
    .lm-hero > div:last-child { margin-top: 24px; }
  }