.wp-block-columns {
  align-items: normal !important;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap !important;
}

@media (min-width: 1200px) {
  .wp-block-columns {
    flex-wrap: nowrap !important;
  }
}

.wp-block-columns.are-vertically-aligned-top {
  align-items: flex-start;
}

.wp-block-columns.are-vertically-aligned-center {
  align-items: center;
}

.wp-block-columns.are-vertically-aligned-bottom {
  align-items: flex-end;
}

@media (max-width: 1199px) {
  .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
    flex-basis: 100% !important;
  }
}

@media (min-width: 1200px) {
  .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
    flex-basis: 0;
    flex-grow: 1;
  }

  .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column[style*="flex-basis"] {
    flex-grow: 0;
  }
}

.wp-block-columns.is-not-stacked-on-mobile {
  flex-wrap: nowrap !important;
}

.wp-block-columns.is-not-stacked-on-mobile>.wp-block-column {
  flex-basis: 0;
  flex-grow: 1;
}

.wp-block-columns.is-not-stacked-on-mobile>.wp-block-column[style*="flex-basis"] {
  flex-grow: 0;
}

:where(.wp-block-columns) {
  margin-bottom: 1.75em;
}

:where(.wp-block-columns.has-background) {
  padding: 1.25em 2.375em;
}

.wp-block-column {
  flex-grow: 1;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

.wp-block-column.is-vertically-aligned-top {
  align-self: flex-start;
}

.wp-block-column.is-vertically-aligned-center {
  align-self: center;
}

.wp-block-column.is-vertically-aligned-bottom {
  align-self: flex-end;
}

.wp-block-column.is-vertically-aligned-stretch {
  align-self: stretch;
  
  > .wp-block-image {
    height: 100%;

    img {
      display: block;
      height: 100%;
      width: 100%;
      object-fit: cover;
    }
  }
}

.wp-block-column.is-vertically-aligned-bottom,
.wp-block-column.is-vertically-aligned-center,
.wp-block-column.is-vertically-aligned-top {
  width: 100%;
}

.wp-block-columns.is-style-dotted-separator > .wp-block-column:not(:last-child) {
  border-right: 2px dotted #707070;
}

/**
 * WP core strips any blockGap value containing "(" (clamp/calc) as a CSS-injection
 * guard (wp_sanitize_block_gap_value in wp-includes/block-supports/layout.php),
 * silently falling back to the default gap preset. Fluid gaps need real CSS instead.
 */
.wp-block-columns.colonnes-extrait-et-sous-menu {
  column-gap: clamp(0px, 7.8125vw, 150px) !important;
}

/* Colonnes empilées (< 1200px) : le sous-menu de rubrique passait entre le
   chapeau et le texte, repoussant le contenu vers le bas, alors que
   l'internaute vient de passer par le menu burger. Masqué ; le chapeau
   reste en tête. */
@media (max-width: 1199px) {
  .wp-block-columns.colonnes-extrait-et-sous-menu .wp-block-teamtreize-sous-menu {
    display: none;
  }
}

.wp-block-column.hero-accueil-col-image {
  height: 100vh;
  position: relative;
}

/* object-fit: le bloc image pose un "cover" inline (attribut scale) — !important pour le surcharger */
.wp-block-column.hero-accueil-col-image img {
  position: absolute;
  height: 100vh;
  bottom: -10rem;
  object-fit: contain !important;
}

@media (max-width: 1199px) {
  .wp-block-column.order-1-on-mobile {
    order: 1;
  }

  .wp-block-column.order-2-on-mobile {
    order: 2;
  }

  .wp-block-column.hero-accueil-col-image {
    margin-right: calc(50% - 50vw);
  }

  /* padding-bottom du hero : aussi la hauteur de la bande où le CTA "Candidater"
     collant est centré sur cette page (cf. cta-candidater-mobile.css) */
  :root {
    --hero-accueil-padding-bottom: 160px;
  }

  /* Hero plein écran : 100svh (et non 100vh, qui inclut la barre d'adresse
     rétractée et ferait passer le bas du hero sous celle-ci au chargement).
     min-height plutôt que height : l'image n'a pas de hauteur propre (cf.
     plus bas), le hero fait donc exactement l'écran, et ne s'allonge que si
     le texte ne tient pas (écran très bas, paysage). Le padding-bottom était
     porté jusqu'ici par la colonne texte (spacing-140 inline). Le
     padding-top réserve la place du header fixe (--tt-header-height, cf.
     style.css), qui masquait sinon le haut de l'image. */
  .wp-block-cover.hero-accueil-cover {
    min-height: 100vh !important;
    min-height: 100svh !important;
    padding-top: var(--tt-header-height) !important;
    padding-bottom: var(--hero-accueil-padding-bottom) !important;
  }

  /* Image + texte empilés en colonne sur toute la hauteur du hero :
     le texte garde sa hauteur, l'image prend le reste (object-fit: contain) */
  .wp-block-cover.hero-accueil-cover > .wp-block-cover__inner-container {
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }

  .wp-block-cover.hero-accueil-cover .wp-block-columns {
    flex: 1;
    flex-direction: column;
    flex-wrap: nowrap !important;
    min-height: 0;
    margin-bottom: 0;
  }

  .wp-block-cover.hero-accueil-cover .wp-block-column.hero-accueil-col-image {
    flex: 1 1 0 !important;
    align-self: stretch;
    min-height: 0;
    height: auto;
    /* bottom: annule le CSS perso du bloc (bottom: 8rem, :root :where(.wp-custom-css-*)) */
    bottom: auto;
  }

  /* box-sizing : width: 100% (.is-vertically-aligned-*) + gutter à gauche
     faisait déborder la colonne de 30px à droite de l'écran */
  /* margin-top: auto : texte calé en bas du hero si la colonne image est
     masquée (variante sans image, réglage « Masquer » de l'éditeur) */
  .wp-block-cover.hero-accueil-cover .wp-block-column.hero-accueil-col-texte {
    flex: none !important;
    align-self: stretch;
    box-sizing: border-box;
    margin-top: auto;
    padding-bottom: 0 !important;
  }

  .wp-block-column.hero-accueil-col-image .wp-block-image {
    margin: 0;
  }

  /* Image limitée à un quart de l'écran : elle en prenait plus du tiers.
     Calée en bas à droite (object-position du point focal inline, d'où le
     !important) : ses bords coupés, faits pour déborder sur desktop,
     tombent sur le bord droit de l'écran et sur le texte, où le bas de
     l'image s'estompe. La colonne garde la hauteur libre du hero. */
  .wp-block-column.hero-accueil-col-image img {
    inset: auto 0 0 auto;
    width: 100%;
    max-width: none;
    height: min(100%, 25svh);
    object-position: right bottom !important;
    mask-image: linear-gradient(to bottom, #000 80%, transparent);
  }
}

/* Fiches formation (contenu .deux-colonnes-wide, pattern
   design-presentation-formation) empilées : infos clés, puis la colonne
   gauche (résumé, programme…), puis le formulaire "Faites-vous rappeler".
   La colonne droite s'efface (display: contents) : ses groupes deviennent
   des éléments flex de .wp-block-columns, placés de part et d'autre de la
   colonne gauche, espacés par le gap des colonnes (marges de la colonne
   retirées). Le formulaire est son dernier groupe — pas de :has() sur le
   formulaire, absent du DOM une fois remplacé par le message de confirmation. */
@media (max-width: 1199px) {
  .single-formations .deux-colonnes-wide > .wp-block-column:last-child {
    display: contents;
  }

  .single-formations .deux-colonnes-wide > .wp-block-column:last-child > * {
    flex-basis: 100%;
    order: -1;
    margin-block-start: 0;
  }

  .single-formations .deux-colonnes-wide > .wp-block-column:last-child > :last-child {
    order: 1;
  }
}

/* Texte du hero accueil (< 640px) : le padding-right inline du groupe
   (spacing-130) est ramené au gutter, pour une marge égale des deux côtés
   (padding-left : gutter de la colonne) et une grille "Je suis" assez large
   (core-button.css). */
@media (max-width: 639px) {
  .wp-block-column.hero-accueil-col-texte > .wp-block-group {
    padding-right: var(--wp--custom--spacing--gutter) !important;
  }
}