/* LOT 10.18.1 — Correction finale ciblée des bannières mobiles publiques.
   Base : ZIP complet staging-apprenant reçu le 30/07/2026.
   Référence : bannière mobile de l'accueil.
   Périmètre : programmes, logiciels, cours détaillés et page Voir tous les cours.
   Téléphone uniquement. Aucun style ordinateur ni contenu n'est modifié. */

@media screen and (max-width: 767px) {
  /* Neutraliser les retraits des conteneurs secondaires afin que la bannière
     puisse reprendre la largeur utile réelle de l'écran, comme sur l'accueil. */
  html body.fb-lot1015-public-page,
  html body.fb-lot1015-public-page main,
  html body.fb-lot1015-public-page .formation-main,
  html body.fb-lot1015-public-page .course-page-main,
  html body.fb-lot1015-public-page .formation-layout,
  html body.fb-lot1015-public-page .course-page-layout,
  html body.fb-lot1015-public-page .formation-left,
  html body.fb-lot1015-public-page .course-page-left {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  html body.fb-lot1015-public-page .formation-layout,
  html body.fb-lot1015-public-page .course-page-layout {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Pleine largeur mobile réelle : les deux bords de la bannière rejoignent
     les deux bords utiles du téléphone, sans bande blanche et sans overflow. */
  html body.fb-lot1015-public-page .formation-left > .formation-hero,
  html body.fb-lot1015-public-page .course-page-left > .course-hero-page {
    position: relative !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    isolation: isolate !important;
  }

  /* Hauteurs réellement compactées. Le contenu peut encore augmenter
     naturellement la hauteur si un titre exceptionnellement long l'exige. */
  html body.fb-lot1015-public-page .formation-left > .formation-hero {
    height: auto !important;
    min-height: clamp(390px, 108vw, 455px) !important;
  }

  html body.fb-lot1015-public-page .course-page-left > .course-hero-page {
    height: auto !important;
    min-height: clamp(365px, 102vw, 430px) !important;
  }

  /* Suppression définitive de toute bordure/outline jaune provenant du média,
     d'un placeholder, d'un parent ou d'un pseudo-élément. */
  html body.fb-lot1015-public-page .formation-left .formation-hero,
  html body.fb-lot1015-public-page .formation-left .formation-hero-bg,
  html body.fb-lot1015-public-page .formation-left .formation-hero-bg.placeholder-img,
  html body.fb-lot1015-public-page .course-page-left .course-hero-page,
  html body.fb-lot1015-public-page .course-page-left .course-hero-bg,
  html body.fb-lot1015-public-page .course-page-left .course-hero-bg.yellow {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
  }

  html body.fb-lot1015-public-page .formation-left .formation-hero::before,
  html body.fb-lot1015-public-page .formation-left .formation-hero::after,
  html body.fb-lot1015-public-page .course-page-left .course-hero-page::before {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
  }

  /* Image propre à chaque page, couvrant intégralement la bannière. */
  html body.fb-lot1015-public-page .formation-left .formation-hero-bg,
  html body.fb-lot1015-public-page .course-page-left .course-hero-bg,
  html body.fb-lot1015-public-page .course-page-left .course-hero-bg.yellow {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border-radius: inherit !important;
    box-sizing: border-box !important;
    z-index: 0 !important;
  }

  /* Contenu centré et resserré pour supprimer les grands vides verticaux. */
  html body.fb-lot1015-public-page .formation-left .formation-hero-content,
  html body.fb-lot1015-public-page .course-page-left .course-hero-content {
    position: relative !important;
    inset: auto !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: inherit !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  html body.fb-lot1015-public-page .formation-left .formation-hero-content {
    padding: 38px 18px 66px !important;
  }

  html body.fb-lot1015-public-page .course-page-left .course-hero-content {
    padding: 40px 18px 64px !important;
  }

  html body.fb-lot1015-public-page .formation-left .formation-hero-content .eyebrow,
  html body.fb-lot1015-public-page .formation-left .formation-hero-content h1,
  html body.fb-lot1015-public-page .formation-left .formation-hero-content p,
  html body.fb-lot1015-public-page .course-page-left .course-hero-content .eyebrow,
  html body.fb-lot1015-public-page .course-page-left .course-hero-content h1,
  html body.fb-lot1015-public-page .course-page-left .course-hero-content p {
    width: 100% !important;
    max-width: 620px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  html body.fb-lot1015-public-page .formation-left .formation-hero-content h1,
  html body.fb-lot1015-public-page .course-page-left .course-hero-content h1 {
    margin-top: 8px !important;
    margin-bottom: 14px !important;
    font-size: clamp(24px, 8vw, 34px) !important;
    line-height: 1.08 !important;
    overflow-wrap: anywhere !important;
  }

  html body.fb-lot1015-public-page .formation-left .formation-hero-content p,
  html body.fb-lot1015-public-page .course-page-left .course-hero-content p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    font-size: clamp(14px, 4vw, 17px) !important;
    line-height: 1.46 !important;
  }

  /* Boutons conservés, mais intégrés sans espace vertical excessif. */
  html body.fb-lot1015-public-page .formation-left .formation-hero-actions {
    position: static !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    width: min(100%, 520px) !important;
    max-width: 520px !important;
    margin-top: 18px !important;
    margin-right: auto !important;
    margin-bottom: 0 !important;
    margin-left: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    align-self: center !important;
    justify-self: center !important;
    transform: none !important;
    translate: none !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  html body.fb-lot1015-public-page .formation-left .formation-hero-actions .btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 50px !important;
    height: auto !important;
    padding: 12px 15px !important;
    box-sizing: border-box !important;
    font-size: clamp(14px, 4vw, 17px) !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }

  /* Conserver le léger chevauchement validé des cartes sous la bannière. */
  html body.fb-lot1015-public-page .formation-left .formation-kpis,
  html body.fb-lot1015-public-page .formation-left .formation-kpis-v21,
  html body.fb-lot1015-public-page .course-page-left .course-stats {
    position: relative !important;
    z-index: 5 !important;
    margin-top: -36px !important;
  }

  /* LOT 10.18.2 — La base des quatre familles de bannières doit être
     parfaitement rectiligne sur téléphone. Neutraliser aussi les enfants
     et pseudo-éléments pouvant réintroduire un arrondi hérité. */
  html body.fb-lot1015-public-page .formation-left > .formation-hero,
  html body.fb-lot1015-public-page .formation-left > .formation-hero::before,
  html body.fb-lot1015-public-page .formation-left > .formation-hero::after,
  html body.fb-lot1015-public-page .formation-left .formation-hero-bg,
  html body.fb-lot1015-public-page .course-page-left > .course-hero-page,
  html body.fb-lot1015-public-page .course-page-left > .course-hero-page::before,
  html body.fb-lot1015-public-page .course-page-left > .course-hero-page::after,
  html body.fb-lot1015-public-page .course-page-left .course-hero-bg {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  /* Centrage géométrique strict des deux boutons des programmes et logiciels.
     Leur largeur, hauteur, couleur, texte et destination restent inchangés. */
  html body.fb-lot1015-public-page .formation-left .formation-hero-actions,
  html body.fb-lot1015-public-page .formation-left .formation-hero-actions .btn {
    float: none !important;
  }

  html body.fb-lot1015-public-page .formation-left .formation-hero-actions .btn {
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
    translate: none !important;
  }
}

@media screen and (max-width: 390px) {
  html body.fb-lot1015-public-page .formation-left > .formation-hero {
    min-height: clamp(380px, 112vw, 440px) !important;
  }

  html body.fb-lot1015-public-page .course-page-left > .course-hero-page {
    min-height: clamp(350px, 106vw, 415px) !important;
  }

  html body.fb-lot1015-public-page .formation-left .formation-hero-content {
    padding: 34px 15px 60px !important;
  }

  html body.fb-lot1015-public-page .course-page-left .course-hero-content {
    padding: 36px 15px 58px !important;
  }

  html body.fb-lot1015-public-page .formation-left .formation-hero-content h1,
  html body.fb-lot1015-public-page .course-page-left .course-hero-content h1 {
    font-size: clamp(22px, 7.8vw, 31px) !important;
  }

  html body.fb-lot1015-public-page .formation-left .formation-kpis,
  html body.fb-lot1015-public-page .formation-left .formation-kpis-v21,
  html body.fb-lot1015-public-page .course-page-left .course-stats {
    margin-top: -32px !important;
  }
}

@media screen and (max-width: 340px) {
  html body.fb-lot1015-public-page .formation-left > .formation-hero {
    min-height: 410px !important;
  }

  html body.fb-lot1015-public-page .course-page-left > .course-hero-page {
    min-height: 385px !important;
  }
}