@layer ancien {
/* 06-hero.css — héros (§ 5, § 6, § 8) : image plein cadre + voiles § 6, en-tête fixe posé dessus.
   Hauteur 850 / 760 / ≥ 600 ; contenu (.hero__contenu) centré verticalement dans la zone utile [haut + en-tête, bas] :
   marges haute (sous l'en-tête) et basse égales, 120 px au moins à l'ordinateur. Exception A-28 (spec v4.5) : le hero
   de l'Accueil pose son contenu EN BAS de la zone utile (plus bas dans ce fichier).
   Empilement : image (−2) < voiles (−1) < contenu (1), dans le contexte isolé du hero. */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 850px;
  padding: calc(var(--hauteur-entete) + 120px) 0 120px;
  background-color: var(--fond-principal);
}

.hero__image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* Voiles § 6 : voile bas (0deg, transparent à 120 px) au-dessus du dégradé horizontal. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(0deg, rgba(4, 20, 38, 0.6), transparent 120px),
    linear-gradient(90deg, rgba(4, 20, 38, 0.88) 0%, rgba(4, 20, 38, 0.55) 45%, rgba(4, 20, 38, 0.1) 100%);
}

.hero__contenu {
  position: relative;
  z-index: 1;
}

.hero__texte > .surtitre + h1 {
  margin-top: var(--espace-surtitre-titre);
}

.hero__texte > h1 + .lead {
  margin-top: var(--espace-titre-texte);
}

/* Héros des autres pages (A-23, maquettes À propos, Nos solutions, Formations, Contact) : texte à gauche ; lead sur
   une colonne de 640 px au plus (maquettes : 560 à 640 px à 1440). Le H1 garde la largeur du conteneur : à 60 px
   (A-01 v3), ses lignes forcées (<br> de CONTENU.md) font jusqu'à ≈ 900 px. */
.hero:not(.hero--accueil) .lead {
  max-width: 640px;
}

.hero__texte > .lead + .boutons {
  margin-top: var(--espace-avant-bouton);
}

/* Accueil § 8 v4 : texte (H1, lead, bouton) | filet vertical rgba(255, 255, 255, .25) | 3 avantages sans fond
   (icône 64 px + titre + texte). Relevés de la maquette (A-23, facteur 1,975) : lignes du lead ≤ 725 px ;
   icône → texte 41,5–43,5 px ; pas vertical des avantages 140–148 px ; retrait des avantages après le filet 45 px ;
   contenu du hero de 93 à 1371 px (≈ 1278 px de large). Largeur utile de ce hero : 1260 px à partir de 1200 px (A-23 ;
   .conteneur : 1200), pour que la 3e ligne du H1 (≈ 809 px en Poppins 400 à 60 px) tienne à côté des avantages v4. */
.hero--accueil .hero__contenu {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 48px;
}

@media (min-width: 1200px) {
  .hero--accueil .hero__contenu {
    width: min(1260px, calc(100% - 64px));
  }
}

/* A-28 (spec v4.5, § 5 ; lot 2, tour de correction 2, constat I-1) : hero de l'Accueil composé comme la maquette.
   - Contenu EN BAS de la zone utile : écart bas 120 px à partir de 1200 px (marge basse du .hero), 80 px en dessous.
   - Image recadrée depuis sa source (outils/images.json : [0, 374, 1440, 887], § 9) : le personnage (tête et buste)
     passe au-dessus du texte ; la photo est cadrée pour qu'il se tienne vers le tiers gauche (maquette : ≈ 30 % de la
     largeur) : object-position 12,8 %.
   - Hero vivant (§ 11.1, inchangé : scale 1 → 1,06, 24 s) zoomé autour d'un point au haut du texte (36 % de la hauteur)
     plutôt qu'au centre : au début comme à la fin de l'animation, la tête reste sous l'en-tête et le buste au-dessus
     du H1 (test « A-28 : personnage … visible »).
   - Entre 1200 et 1299 px (tours de correction 3 et 4, constats N-3 et N-5) : la gouttière du § 5 reste entière
     (contenu à min(1260, page − 64)) et les avantages gardent la disposition de la maquette, icône À GAUCHE (A-23).
     Relevé (sonde c4-sonde-avantages, rapport § 20) : avec les écarts standard (48 / 44 / 40), la colonne du texte
     n'a 809 px — la 3e ligne du H1 à 60 px — qu'à partir de 1291 px ; en dessous, le H1 passe sur 4 lignes et le
     contenu, posé en bas, remonte sur le personnage (caractères à y = 243,3, bas du buste à y = 304,9) ; même sans
     AUCUN écart vertical entre H1, lead et bouton, les caractères restent à y = 295,3 : aucune répartition sur 4 lignes
     ne tient A-28. Seuls les trois écarts HORIZONTAUX (texte → filet, filet → icône, icône → texte) suivent donc la
     largeur du hero, dans les proportions 48 : 44 : 40, leur somme valant largeur − 1166 px : la colonne du texte
     garde 809 + 8 px, le H1 ses 3 lignes ; à 1200, 12 / 11 / 10 px ; à 1250, 31 / 28 / 25 ; égaux aux standards à
     1298 px et au-delà (pas de saut à 1300). Unités de conteneur (cqw) : la largeur du hero, barre de défilement
     exclue. */
.hero--accueil {
  justify-content: flex-end;
}

.hero--accueil .hero__image {
  object-position: 12.8% 50%;
  transform-origin: 50% 36%;
}

@media (min-width: 1200px) and (max-width: 1299px) {
  .hero--accueil {
    container-type: inline-size;
  }

  .hero--accueil .hero__contenu {
    column-gap: clamp(0px, calc((100cqw - 1166px) * 0.3636), 48px);
  }

  .hero--accueil .hero__cartes {
    padding-left: clamp(0px, calc((100cqw - 1166px) * 0.3333), 44px);
  }

  .hero--accueil .hero__carte {
    gap: clamp(0px, calc((100cqw - 1166px) * 0.303), 40px);
  }
}

.hero--accueil .lead {
  max-width: 730px;
}

.hero__cartes {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 80px;
  margin: 0;
  padding: 0 0 0 44px;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
  list-style: none;
}

.hero__carte {
  display: flex;
  align-items: center;
  gap: 40px;
}

.hero__carte .icone {
  flex: none;
  width: 64px;
  height: 64px;
}

@media (max-width: 1199px) {
  .hero {
    min-height: 760px;
    padding: calc(var(--hauteur-entete) + 40px) 0 40px;
  }

  /* A-28 : sous 1200 px, contenu du hero de l'Accueil à 80 px du bas. */
  .hero--accueil {
    padding-bottom: 80px;
  }
}

/* < 1000 px : les cartes passent sous le texte (filet horizontal au-dessus), en ligne ≥ 768. */
@media (max-width: 999px) {
  .hero--accueil .hero__contenu {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
  }

  .hero__cartes {
    flex-direction: row;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
  }

  .hero__carte {
    flex: 1 1 0;
    min-width: 0;
    gap: 16px;
  }
}

/* 768–999 px : les 3 avantages en ligne n'ont que ≈ 220–300 px chacun ; l'icône de 64 px passe AU-DESSUS du texte,
   sans quoi « + D’opportunités » (22 px) se coupait après le « + » et sortait de sa carte (capture CV-24 à 820). */
@media (min-width: 768px) and (max-width: 999px) {
  .hero__carte {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 767px) {
  .hero {
    min-height: 600px;
  }

  .hero__cartes {
    flex-direction: column;
  }
}

}