@layer ancien {
/* 07-sections.css — types de sections § 6 : fond et couleurs des textes. Sur clair et blanc (A-03) : titres
   --titre-sur-clair, textes --texte-sur-clair, surtitre --surtitre-sur-clair, dégradé --degrade-accent-clair (A-15),
   bouton secondaire en --titre-sur-clair. --fond-section = fond posé sous le bouton secondaire (§ 7.2). */

/* Section ordinaire (§ 5) : marge vide haute et basse 120 px (80 en mobile) entre la section et les enfants de son
   unique .conteneur ; les sections se suivent sans espace. */
.section {
  position: relative;
  padding: 120px 0;
}

.section > .conteneur {
  position: relative;
}

.section--sombre {
  --fond-section: var(--fond-principal);
  background-color: var(--fond-principal);
}

.section--clair {
  --fond-section: var(--fond-clair);
  background-color: var(--fond-clair);
}

/* Texture des sections claires (§ 6), EXACTEMENT sous la forme que le fond effectif (A-22) reconnaît : pseudo-élément
   de la section, image CSS clair-texture-1920.webp, sans couleur de fond, opacité 0,1. */
.section--clair::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/assets/img/clair-texture-1920.webp");
  background-size: cover;
  background-position: 50% 50%;
  opacity: 0.1;
  pointer-events: none;
}

.section--blanc {
  --fond-section: var(--fond-blanc);
  background-color: var(--fond-blanc);
}

/* Section legal (§ 6) : --fond-clair, colonne de texte de 800 px ; elle commence sous l'en-tête, toujours « défilé » sur
   les pages légales : sa marge haute de 120 px se mesure depuis le bas de l'en-tête. */
.section--legal {
  --fond-section: var(--fond-clair);
  padding-top: calc(var(--hauteur-entete) + 120px);
  background-color: var(--fond-clair);
}

.section--legal > .conteneur {
  max-width: 800px;
}

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

:is(.section--clair, .section--blanc, .section--legal) :is(h1, h2, h3, h4, .h1, .h2, .h3, .h4) {
  color: var(--titre-sur-clair);
}

:is(.section--clair, .section--blanc, .section--legal) :is(p, .lead) {
  color: var(--texte-sur-clair);
}

:is(.section--clair, .section--blanc, .section--legal) .surtitre {
  color: var(--surtitre-sur-clair);
}

:is(.section--clair, .section--blanc, .section--legal) .degrade {
  background-image: var(--degrade-accent-clair);
}

:is(.section--clair, .section--blanc, .section--legal) .bouton--secondaire {
  color: var(--titre-sur-clair);
}

/* Espacements verticaux § 4.2 entre les enfants du .conteneur d'une section : surtitre → titre 18 ; titre → lead/P
   24 ; P → P 16 ; texte d'en-tête → grille ou contenu 64 ; grille → rangée de boutons 48 ; texte → boutons 28. */
.section .conteneur > .surtitre + :is(h2, h3),
.section__colonne > .surtitre + h2,
.pourquoi__texte > .surtitre + h2 {
  margin-top: var(--espace-surtitre-titre);
}

.section .conteneur > :is(h2, h3) + :is(p, .lead),
.section__colonne > h2 + :is(p, .lead),
.pourquoi__texte > h2 + p {
  margin-top: var(--espace-titre-texte);
}

.section .conteneur > :is(p, .lead) + p {
  margin-top: var(--espace-paragraphes);
}

.section .conteneur > * + :is(.grille, .logos) {
  margin-top: var(--espace-entete-contenu);
}

.section .conteneur > :is(.grille, .logos) + .boutons {
  margin-top: var(--espace-grille-boutons);
}

.section__colonne > :is(p, .lead, .etapes) + .boutons,
.pourquoi__texte > p + .boutons {
  margin-top: var(--espace-avant-bouton);
}

/* Section à en-tête centré (§ 8) : surtitre, titre, lead et P centrés sur 820 px ; rangée de boutons centrée. */
.section--centree .conteneur > :is(.lead, p) {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Titre centré sur 1000 px (« Rejoignez les entreprises… » : une ligne dans la maquette, deux à 48 px). */
.section--centree .conteneur > h2 {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section--centree .conteneur > .surtitre {
  justify-content: center;
  text-align: center;
}

.section--centree .conteneur > .boutons {
  justify-content: center;
}

/* Titre à graisses mêlées (A-23, comme le H1 de l'Accueil) : la ligne qui suit le <br> en graisse 400. */
.titre__suite {
  font-weight: 400;
}

/* Grilles § 7.4 : 4 éléments → 4 colonnes ≥ 1200, 2 entre 768 et 1199, 1 ≤ 767 ; écart 24 px. */
.grille {
  display: grid;
  gap: var(--espace-grille);
}

.grille--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Image de fond plein cadre (sombre à fond:, § 6) + voile rgba(4, 20, 38, .72). Empilement : image (0) < voile (1)
   < contenu (2), dans le contexte isolé de la section. */
.section {
  isolation: isolate;
}

.section > .conteneur {
  z-index: 2;
}

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

.section--fond::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: rgba(4, 20, 38, 0.72);
}

/* Image d'un côté (§ 6) : sur la moitié de la largeur, fondue vers le fond de la section par un dégradé (::after) ;
   le texte occupe l'autre moitié (.section__colonne, .pourquoi__texte). Sous 1000 px (§ 8) : l'image passe au-dessus,
   260 px de haut, fondue vers le bas ; la marge haute de 120 / 80 px se mesure sous elle. */
.section__image {
  position: absolute;
  top: 0;
  z-index: 0;
  width: 50%;
  height: 100%;
  object-fit: cover;
}

.section--image-gauche .section__image {
  left: 0;
}

.section--image-droite .section__image {
  right: 0;
}

/* Fondu : à gauche (section sombre unie), un dégradé vers --fond-principal en pseudo-élément ; à droite (section
   claire texturée), un masque sur l'image elle-même (un aplat de --fond-clair laisserait un bord net sur la texture). */
.section--image-gauche::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background-image: linear-gradient(90deg, rgba(4, 20, 38, 0) 45%, var(--fond-principal) 100%);
}

.section--image-droite .section__image {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%), linear-gradient(0deg, transparent 0%, #000 45%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 45%), linear-gradient(0deg, transparent 0%, #000 45%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.section--image-gauche .section__colonne {
  margin-left: calc(50% + 48px);
}

@media (max-width: 1199px) {
  .grille--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 999px) {
  .section--image-gauche,
  .section--image-droite {
    padding-top: calc(260px + 120px);
  }

  .section__image,
  .section--image-gauche::after {
    left: 0;
    right: 0;
    width: 100%;
    height: 260px;
  }

  .section--image-gauche::after {
    background-image: linear-gradient(180deg, rgba(4, 20, 38, 0) 50%, var(--fond-principal) 100%);
  }

  .section--image-droite .section__image {
    -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 50%, transparent 100%);
  }

  .section--image-gauche .section__colonne {
    margin-left: 0;
  }
}

@media (max-width: 767px) {
  .section {
    padding: 80px 0;
  }

  .section--legal {
    padding-top: calc(var(--hauteur-entete) + 80px);
  }

  .section--image-gauche,
  .section--image-droite {
    padding-top: calc(260px + 80px);
  }

  .grille--4 {
    grid-template-columns: minmax(0, 1fr);
  }
}

}