/* ======================================================================
   V36 — Rythme vertical mobile des pages de détail « Nos programmes »

   Périmètre strict :
   - téléphone uniquement (largeur <= 767 px) ;
   - uniquement les pages programme portant body.fb-v18-program-detail ;
   - aucune règle desktop ;
   - aucun contenu ou comportement fonctionnel modifié.

   Cette feuille est volontairement chargée après les correctifs historiques.
   Elle centralise les espacements et hauteurs mobiles demandés par la V21.
   ====================================================================== */

@media screen and (max-width: 767px) {
  html body.fb-lot1015-public-page.fb-v18-program-detail {
    --fb-v36-section-gap: clamp(28px, 8vw, 36px);
    --fb-v36-heading-gap: clamp(5px, 1.7vw, 8px);
    --fb-v36-content-gap: clamp(14px, 4vw, 18px);
    --fb-v36-card-gap: clamp(9px, 2.8vw, 12px);
    --fb-v36-card-padding-y: clamp(10px, 3vw, 13px);
    --fb-v36-card-padding-x: clamp(10px, 3.5vw, 14px);
    overflow-x: hidden;
  }

  /* ------------------------------------------------------------------
     1. Informations pratiques de la bannière : grille 2 x 2 compactée
     ------------------------------------------------------------------ */
  html body.fb-lot1015-public-page.fb-v18-program-detail
  .formation-hero.fb-v19-hero .fb-v19-hero-meta {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 7px !important;
    margin-top: 11px !important;
    margin-bottom: 0 !important;
  }

  html body.fb-lot1015-public-page.fb-v18-program-detail
  .formation-hero.fb-v19-hero .fb-v19-meta-item {
    width: auto !important;
    min-width: 0 !important;
    min-height: 54px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 7px 8px !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 29px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: 7px !important;
    row-gap: 1px !important;
    align-items: center !important;
    align-content: center !important;
  }

  html body.fb-lot1015-public-page.fb-v18-program-detail
  .formation-hero.fb-v19-hero .fb-v19-meta-icon {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    min-height: 27px !important;
    margin: 0 !important;
  }

  html body.fb-lot1015-public-page.fb-v18-program-detail
  .formation-hero.fb-v19-hero .fb-v19-meta-svg,
  html body.fb-lot1015-public-page.fb-v18-program-detail
  .formation-hero.fb-v19-hero .fb-v19-meta-svg svg {
    width: 25px !important;
    height: 25px !important;
  }

  html body.fb-lot1015-public-page.fb-v18-program-detail
  .formation-hero.fb-v19-hero .fb-v19-meta-item b,
  html body.fb-lot1015-public-page.fb-v18-program-detail
  .formation-hero.fb-v19-hero .fb-v19-meta-item > span:last-child {
    min-width: 0 !important;
    margin: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
  }

  html body.fb-lot1015-public-page.fb-v18-program-detail
  .formation-hero.fb-v19-hero .fb-v19-meta-item b {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: end !important;
    line-height: 1.12 !important;
  }

  html body.fb-lot1015-public-page.fb-v18-program-detail
  .formation-hero.fb-v19-hero .fb-v19-meta-item > span:last-child {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: start !important;
    line-height: 1.16 !important;
  }

  /* Les quatre indicateurs institutionnels ne sont pas redimensionnés.
     Seule leur transition vers la première section est normalisée. */
  html body.fb-lot1015-public-page.fb-v18-program-detail
  .formation-left > .formation-kpis.fb-v18-kpis.fb-v19-kpis {
    margin-bottom: 0 !important;
  }

  /* ------------------------------------------------------------------
     2. Rythme commun des sections ciblées
     ------------------------------------------------------------------ */
  html body.fb-lot1015-public-page.fb-v18-program-detail
  .fb-v18-section.fb-v18-competencies,
  html body.fb-lot1015-public-page.fb-v18-program-detail
  .fb-v18-section.fb-v36-careers-section,
  html body.fb-lot1015-public-page.fb-v18-program-detail
  .fb-v18-section.fb-v36-outcomes-section,
  html body.fb-lot1015-public-page.fb-v18-program-detail
  .fb-v18-section.fb-v36-audience-section,
  html body.fb-lot1015-public-page.fb-v18-program-detail
  .formation-softwares.fb-v18-softwares,
  html body.fb-lot1015-public-page.fb-v18-program-detail
  .formation-program-detail.fb-v18-program {
    width: calc(100% - 28px) !important;
    max-width: 680px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  html body.fb-lot1015-public-page.fb-v18-program-detail
  .fb-v18-section.fb-v18-competencies,
  html body.fb-lot1015-public-page.fb-v18-program-detail
  .fb-v18-section.fb-v36-careers-section,
  html body.fb-lot1015-public-page.fb-v18-program-detail
  .fb-v18-section.fb-v36-outcomes-section,
  html body.fb-lot1015-public-page.fb-v18-program-detail
  .fb-v18-section.fb-v36-audience-section,
  html body.fb-lot1015-public-page.fb-v18-program-detail
  .formation-softwares.fb-v18-softwares {
    padding-top: var(--fb-v36-section-gap) !important;
    padding-bottom: 0 !important;
  }

  html body.fb-lot1015-public-page.fb-v18-program-detail
  .formation-program-detail.fb-v18-program {
    padding-top: var(--fb-v36-section-gap) !important;
    padding-bottom: 52px !important;
  }

  html body.fb-lot1015-public-page.fb-v18-program-detail
  .fb-v18-careers-wrap {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Neutraliser les translations historiques V31 sur téléphone. */
  html body.fb-lot1015-public-page.fb-v18-program-detail
  .fb-v36-careers-section > .fb-v18-section-kicker,
  html body.fb-lot1015-public-page.fb-v18-program-detail
  .fb-v36-careers-section > h2,
  html body.fb-lot1015-public-page.fb-v18-program-detail
  .fb-v36-careers-section > .fb-v18-section-intro,
  html body.fb-lot1015-public-page.fb-v18-program-detail
  .fb-v36-outcomes-section > h2,
  html body.fb-lot1015-public-page.fb-v18-program-detail
  .formation-softwares.fb-v18-softwares > h2,
  html body.fb-lot1015-public-page.fb-v18-program-detail
  .formation-program-detail.fb-v18-program > h2,
  html body.fb-lot1015-public-page.fb-v18-program-detail
  .formation-program-detail.fb-v18-program > .fb-v18-program-subtitle {
    transform: none !important;
  }

  /* Espacement interne des blocs d'introduction. */
  html body.fb-lot1015-public-page.fb-v18-program-detail
  .fb-v18-section-kicker {
    margin-top: 0 !important;
    margin-bottom: 4px !important;
  }

  html body.fb-lot1015-public-page.fb-v18-program-detail
  .fb-v18-competencies > h2,
  html body.fb-lot1015-public-page.fb-v18-program-detail
  .fb-v36-careers-section > h2,
  html body.fb-lot1015-public-page.fb-v18-program-detail
  .fb-v36-audience-section > h2,
  html body.fb-lot1015-public-page.fb-v18-program-detail
  .formation-softwares.fb-v18-softwares > h2,
  html body.fb-lot1015-public-page.fb-v18-program-detail
  .formation-program-detail.fb-v18-program > h2 {
    margin-top: 0 !important;
    margin-bottom: var(--fb-v36-heading-gap) !important;
  }

  html body.fb-lot1015-public-page.fb-v18-program-detail
  .fb-v18-competencies > .fb-v18-section-intro,
  html body.fb-lot1015-public-page.fb-v18-program-detail
  .fb-v36-careers-section > .fb-v18-section-intro,
  html body.fb-lot1015-public-page.fb-v18-program-detail
  .fb-v36-audience-section > .fb-v18-section-intro,
  html body.fb-lot1015-public-page.fb-v18-program-detail
  .formation-program-detail.fb-v18-program > .fb-v18-program-subtitle {
    margin-top: 0 !important;
    margin-bottom: var(--fb-v36-content-gap) !important;
  }

  html body.fb-lot1015-public-page.fb-v18-program-detail
  .fb-v36-outcomes-section > h2 {
    margin-top: 0 !important;
    margin-bottom: var(--fb-v36-content-gap) !important;
  }

  /* ------------------------------------------------------------------
     3. Cartes des cinq étapes pédagogiques
     ------------------------------------------------------------------ */
  html body.fb-lot1015-public-page.fb-v18-program-detail .fb-v18-steps {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--fb-v36-card-gap) !important;
    width: 100% !important;
    margin: 0 !important;
  }

  html body.fb-lot1015-public-page.fb-v18-program-detail .fb-v18-step {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 70px !important;
    height: auto !important;
    margin: 0 !important;
    padding: var(--fb-v36-card-padding-y) var(--fb-v36-card-padding-x) !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: 10px !important;
    row-gap: 3px !important;
    align-items: center !important;
    align-content: center !important;
    overflow: visible !important;
  }

  html body.fb-lot1015-public-page.fb-v18-program-detail .fb-v18-step::after {
    content: none !important;
    display: none !important;
  }

  html body.fb-lot1015-public-page.fb-v18-program-detail .fb-v18-step-number {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    align-self: center !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    margin: 0 !important;
  }

  html body.fb-lot1015-public-page.fb-v18-program-detail .fb-v18-step h3,
  html body.fb-lot1015-public-page.fb-v18-program-detail .fb-v18-step p {
    grid-column: 2 !important;
    min-width: 0 !important;
    margin: 0 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
  }

  html body.fb-lot1015-public-page.fb-v18-program-detail .fb-v18-step h3 {
    grid-row: 1 !important;
    align-self: end !important;
  }

  html body.fb-lot1015-public-page.fb-v18-program-detail .fb-v18-step p {
    grid-row: 2 !important;
    align-self: start !important;
  }

  /* ------------------------------------------------------------------
     4. Cartes des profils professionnels
     ------------------------------------------------------------------ */
  html body.fb-lot1015-public-page.fb-v18-program-detail .fb-v18-careers {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--fb-v36-card-gap) !important;
    width: 100% !important;
    margin: 0 !important;
  }

  html body.fb-lot1015-public-page.fb-v18-program-detail .fb-v18-career {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 84px !important;
    height: auto !important;
    margin: 0 !important;
    padding: var(--fb-v36-card-padding-y) var(--fb-v36-card-padding-x) !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    grid-auto-rows: auto !important;
    column-gap: 10px !important;
    row-gap: 3px !important;
    align-items: center !important;
    align-content: center !important;
    overflow: visible !important;
  }

  html body.fb-lot1015-public-page.fb-v18-program-detail .fb-v18-career-icon {
    grid-column: 1 !important;
    grid-row: 1 / span 3 !important;
    align-self: center !important;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  html body.fb-lot1015-public-page.fb-v18-program-detail .fb-v18-career h3,
  html body.fb-lot1015-public-page.fb-v18-program-detail .fb-v18-career p {
    grid-column: 2 !important;
    min-width: 0 !important;
    margin: 0 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
  }

  /* ------------------------------------------------------------------
     5. Cartes des compétences acquises
     ------------------------------------------------------------------ */
  html body.fb-lot1015-public-page.fb-v18-program-detail .fb-v18-outcomes {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--fb-v36-card-gap) !important;
    width: 100% !important;
    margin: 0 !important;
  }

  html body.fb-lot1015-public-page.fb-v18-program-detail .fb-v18-outcome {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 72px !important;
    height: auto !important;
    margin: 0 !important;
    padding: var(--fb-v36-card-padding-y) var(--fb-v36-card-padding-x) !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: 10px !important;
    row-gap: 3px !important;
    align-items: center !important;
    align-content: center !important;
    overflow: visible !important;
  }

  html body.fb-lot1015-public-page.fb-v18-program-detail .fb-v18-outcome-icon {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    align-self: center !important;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  html body.fb-lot1015-public-page.fb-v18-program-detail .fb-v18-outcome h3,
  html body.fb-lot1015-public-page.fb-v18-program-detail .fb-v18-outcome p {
    grid-column: 2 !important;
    min-width: 0 !important;
    margin: 0 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
  }

  html body.fb-lot1015-public-page.fb-v18-program-detail .fb-v18-outcome h3 {
    grid-row: 1 !important;
    align-self: end !important;
  }

  html body.fb-lot1015-public-page.fb-v18-program-detail .fb-v18-outcome p {
    grid-row: 2 !important;
    align-self: start !important;
  }

  /* ------------------------------------------------------------------
     6. Public cible, logiciels et programme
     ------------------------------------------------------------------ */
  html body.fb-lot1015-public-page.fb-v18-program-detail
  .fb-v18-audience-tags {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    gap: 7px 8px !important;
  }

  html body.fb-lot1015-public-page.fb-v18-program-detail
  .fb-v18-audience-tags span {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  html body.fb-lot1015-public-page.fb-v18-program-detail
  .formation-softwares.fb-v18-softwares > h2 {
    margin-bottom: var(--fb-v36-content-gap) !important;
  }

  html body.fb-lot1015-public-page.fb-v18-program-detail
  .formation-program-detail.fb-v18-program > .fb-v18-program-subtitle {
    max-width: 680px !important;
  }

  html body.fb-lot1015-public-page.fb-v18-program-detail
  .formation-program-detail.fb-v18-program .fb-v18-module-list {
    margin-top: 0 !important;
  }

  html body.fb-lot1015-public-page.fb-v18-program-detail
  details.fb-v18-module-card summary {
    min-height: 44px !important;
  }
}

/* Ajustements de sécurité pour les téléphones les plus étroits. */
@media screen and (max-width: 340px) {
  html body.fb-lot1015-public-page.fb-v18-program-detail
  .formation-hero.fb-v19-hero .fb-v19-meta-item {
    grid-template-columns: 25px minmax(0, 1fr) !important;
    column-gap: 5px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  html body.fb-lot1015-public-page.fb-v18-program-detail
  .formation-hero.fb-v19-hero .fb-v19-meta-icon,
  html body.fb-lot1015-public-page.fb-v18-program-detail
  .formation-hero.fb-v19-hero .fb-v19-meta-svg,
  html body.fb-lot1015-public-page.fb-v18-program-detail
  .formation-hero.fb-v19-hero .fb-v19-meta-svg svg {
    width: 23px !important;
    height: 23px !important;
    min-width: 23px !important;
    min-height: 23px !important;
  }

  html body.fb-lot1015-public-page.fb-v18-program-detail .fb-v18-step {
    grid-template-columns: 36px minmax(0, 1fr) !important;
    column-gap: 8px !important;
  }

  html body.fb-lot1015-public-page.fb-v18-program-detail .fb-v18-step-number {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
  }

  html body.fb-lot1015-public-page.fb-v18-program-detail .fb-v18-career,
  html body.fb-lot1015-public-page.fb-v18-program-detail .fb-v18-outcome {
    grid-template-columns: 40px minmax(0, 1fr) !important;
    column-gap: 8px !important;
  }
}