@layer ancien {
/* 30-a-propos.css — sections de la page À propos (§ 8, tâche 4, lot 3a) : mission, valeurs, mémoire, humain, équipe.
   Toutes les règles sont bornées à la page ([data-page="a-propos"]) : cette feuille est liée sur toutes les pages.
   Hero et CTA : composants communs (06-hero.css, 08-cta.css). Types de sections, marges, en-têtes centrés, grilles de
   4 et voiles : 07-sections.css. Apparition et survol des cartes : 20-animations.css (classes carte, grille).
   A-23 (maquette « MAQUETTE SITE PAGE A PROPOS.png », 738 px = 1440 : facteur 1,951) — valeurs retenues, au tableau
   des écarts du rapport du lot 3a :
   - colonnes des P centrés : mission 1160, humain 910 (§ 8 : 820) ;
   - typographie (tour de correction 1, I-1 ; A-01 ne tranche que H1, H2, lead et boutons) : surtitres 17 px (16 en
     mobile), P des sections 21 px (valeurs 18), H3 et NOM 25 / 23 / 22 px, textes des cartes et ROLE 19 px ;
   - mission : icônes dimensionnées sur leur TRACÉ VISIBLE (I-2 : tracés de la maquette 83,9 × 80,0, 74,1 × 70,2 et
     70,2 × 72,2 px ; le tracé Lucide n'occupe pas sa boîte) : boîtes de 92, 86 et 78 px ; aux couleurs de la maquette
     (engrenage azur #008CFF virant au violet #5D44FE, barres #005BFD → #A040F8 : dégradés définis dans la page ;
     fusée #009CFF) ; texte centré à 28 px de l'icône ; colonnes séparées de 64 px, filet 1 px #C3C2DC au milieu ;
   - valeurs : cartes quasi noires rgba(0, 8, 24, .85), liseré 1 px #03406A, rayon 12 ; icônes cyan #00D8FF, trait 1,5,
     lueur ; écart 20 ;
   - équipe : écart 36 ; cartes à liseré 2 px violet (haut) / bleu (côtés) / bleu-gris (bas) et halo lavande, rayon 12,
     bandeau #010C1F ; portrait 3:2 fondu vers le bandeau ; emplacement d'attente « K » dans la même zone. */

/* ---------- Colonnes des P centrés (§ 8 : 820, 07-sections.css) : A-23, lignes de la maquette jusqu'à 1155 px dans la
   mission (+ 41 %) et 909 px dans l'humain (+ 11 %) ; la mémoire (858 px, + 5 %) garde 820. ---------- */
[data-page="a-propos"] [data-section="mission"] .conteneur > p {
  max-width: 1160px;
}

[data-page="a-propos"] [data-section="humain"] .conteneur > p {
  max-width: 910px;
}

/* ---------- Typographie des 5 sections (A-23, tour de correction 1, I-1) : relevés de la maquette à 1440 — surtitres
   (capitales 11,7 px) 17 px, espacement 3 ; P des sections 21,0 / 19,9 / 21,4–22,4 / 21,2 px → 21, valeurs 18,3 → 18 ;
   H3 24,5–25,9 et NOM 23,8–24,8 → 25 ; textes des cartes et ROLE 18,9–20,1 → 19. Sous 1200 px (maquette muette), le
   rapport de la spec entre les largeurs est gardé (H3 23 / 22, surtitre 16 en mobile). Interlignes et espacements du
   § 4.2 inchangés. ---------- */
[data-page="a-propos"] :is([data-section="mission"], [data-section="valeurs"], [data-section="memoire"], [data-section="humain"], [data-section="equipe"]) .surtitre {
  font-size: 17px;
}

[data-page="a-propos"] :is([data-section="mission"], [data-section="memoire"], [data-section="humain"], [data-section="equipe"]) .conteneur > p:not(.surtitre) {
  font-size: 21px;
}

[data-page="a-propos"] [data-section="valeurs"] .conteneur > p:not(.surtitre) {
  font-size: 18px;
}

[data-page="a-propos"] :is(.mission__texte, .carte--valeur, .carte--membre) h3 {
  font-size: 25px;
}

[data-page="a-propos"] :is(.mission__texte, .carte--valeur, .carte--membre) .texte-carte {
  font-size: 19px;
}

/* ---------- Mission : grille de 3 (icône à gauche, H3 + P centrés), filets verticaux ≥ 1000 px ---------- */
[data-page="a-propos"] .grille--mission {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 64px;
}

[data-page="a-propos"] .mission__point {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 28px;
}

/* Icônes sur leur tracé visible (I-2) : emprise peinte à ±10 % du tracé de la maquette (54 × 60, 54 × 54 et 58 × 58 px
   à 64 px de boîte → × 92 / 64, 86 / 64, 78 / 64). */
[data-page="a-propos"] .mission__point > .icone {
  flex: none;
}

[data-page="a-propos"] .mission__point > .icone--settings {
  width: 92px;
  height: 92px;
}

[data-page="a-propos"] .mission__point > .icone--bar-chart {
  width: 86px;
  height: 86px;
}

[data-page="a-propos"] .mission__point > .icone--rocket {
  width: 78px;
  height: 78px;
}

[data-page="a-propos"] .mission__point > .icone--settings {
  stroke: url(#degrade-apropos-azur);
}

[data-page="a-propos"] .mission__point > .icone--bar-chart {
  stroke: url(#degrade-apropos-barres);
}

[data-page="a-propos"] .mission__point > .icone--rocket {
  stroke: #009CFF;
}

[data-page="a-propos"] .mission__texte {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
}

[data-page="a-propos"] .mission__texte > p {
  margin-top: var(--espace-titre-texte-carte);
}

/* Filet vertical 1 px au milieu de l'écart de 64 px entre deux colonnes, de la hauteur de l'élément (pas de fond
   sous un texte : le filet est hors de toute boîte de texte). */
[data-page="a-propos"] .mission__point + .mission__point::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -32px;
  width: 1px;
  background-color: #C3C2DC;
}

/* ---------- Voiles des fonds d'image (valeurs, humain ; tours de correction 1 et 2, I-3). Le voile uniforme .72 du § 6
   n'est ni une décision d'Anthony ni une règle chiffrée : la maquette fait foi (A-23), et elle montre l'image vive
   autour du texte. Le voile ::before de la section (07-sections.css) devient un voile CLAIR uniforme (valeurs .12,
   humain .06). Un voile SOMBRE n'est posé que sous les zones qui portent du texte (tour 2 : limité aussi verticalement),
   sous la colonne ± 20 px (valeurs .62, humain .77), fondu sur 80 px sur les côtés et sur 32 px en haut et en bas
   (masque) : les marges sans texte gardent le voile clair. Le contraste se prouve sur les pixels rendus (A-27, CV-22) :
   le pire pixel de chaque texte atteint le seuil aux 3 largeurs. Le seul texte qui échouait (« de l'humain ») a un
   renfort local sous le H2 de l'humain (plus bas). Le voile sombre, large de la fenêtre au plus (100vw), est découpé
   au bord de la section (overflow-x: clip) : jamais de défilement horizontal, même avec une barre de défilement. */
[data-page="a-propos"] :is([data-section="valeurs"], [data-section="humain"]) {
  overflow-x: clip;
}

[data-page="a-propos"] [data-section="valeurs"]::before {
  background-color: rgba(4, 20, 38, 0.12);
}

[data-page="a-propos"] [data-section="humain"]::before {
  background-color: rgba(4, 20, 38, 0.06);
}

/* Humain : le .conteneur ne porte que du texte (surtitre, H2, 3 P) : le voile sombre couvre sa boîte, + 32 px fondus. */
[data-page="a-propos"] [data-section="humain"] .conteneur::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -32px;
  bottom: -32px;
  left: calc(50% - min(555px, 50vw));
  width: min(1110px, 100vw);
  background-image: linear-gradient(90deg, rgba(4, 20, 38, 0) 0, rgba(4, 20, 38, 0.77) max(0px, calc(50% - 475px)),
    rgba(4, 20, 38, 0.77) min(100%, calc(50% + 475px)), rgba(4, 20, 38, 0) 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
  pointer-events: none;
}

/* Valeurs : le .conteneur porte aussi les cartes (fond propre .85) : le voile sombre ne couvre que l'en-tête. Il est
   porté par le P et prolongé vers le haut sur le H2 et le surtitre (une ligne chacun : hauteur fixe par catégorie,
   --dessus = surtitre + 18 + H2 + 24), + 32 px fondus en haut et en bas. */
[data-page="a-propos"] [data-section="valeurs"] .conteneur > p:not(.surtitre) {
  position: relative;
  --dessus: calc(17px * 1.4 + 18px + 48px * 1.15 + 24px);
}

[data-page="a-propos"] [data-section="valeurs"] .conteneur > p:not(.surtitre)::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(-1 * var(--dessus) - 32px);
  bottom: -32px;
  left: calc(50% - min(510px, 50vw));
  width: min(1020px, 100vw);
  background-image: linear-gradient(90deg, rgba(4, 20, 38, 0) 0, rgba(4, 20, 38, 0.62) max(0px, calc(50% - 430px)),
    rgba(4, 20, 38, 0.62) min(100%, calc(50% + 430px)), rgba(4, 20, 38, 0) 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
  pointer-events: none;
}

@media (max-width: 1199px) {
  [data-page="a-propos"] [data-section="valeurs"] .conteneur > p:not(.surtitre) {
    --dessus: calc(17px * 1.4 + 18px + 40px * 1.15 + 24px);
  }
}

@media (max-width: 767px) {
  [data-page="a-propos"] [data-section="valeurs"] .conteneur > p:not(.surtitre) {
    --dessus: calc(16px * 1.4 + 18px + 30px * 1.15 + 24px);
  }
}

/* Renfort local sous le H2 de l'humain (A-27 : le bout lumineux des doigts passe sous « de l'humain ») : le titre est
   ajusté à son texte (fit-content, toujours centré), et un pseudo-élément sombre .4 (bords fondus par une ombre de la
   même couleur) est peint sous ses lignes, sous le texte, au-dessus du voile. Posé sur le H2 entier, pas sur le span :
   à 390 px, « de l'humain » passe sur deux lignes et un pseudo-élément d'un élément en ligne coupé ne peint rien. */
[data-page="a-propos"] [data-section="humain"] .conteneur > h2 {
  position: relative;
  width: fit-content;
}

[data-page="a-propos"] [data-section="humain"] .conteneur > h2::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -8px -16px;
  border-radius: 24px;
  background-color: rgba(4, 20, 38, 0.4);
  box-shadow: 0 0 24px 16px rgba(4, 20, 38, 0.4);
  pointer-events: none;
}

/* ---------- Valeurs : 4 cartes sombres centrées sur le fond d'image (grille de 4 : 07-sections.css) ---------- */
[data-page="a-propos"] .grille--valeurs {
  gap: 20px;
}

[data-page="a-propos"] .carte--valeur {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px;
  border: 1px solid #03406A;
  border-radius: 12px;
  background-color: rgba(0, 8, 24, 0.85);
  text-align: center;
}

[data-page="a-propos"] .carte--valeur > .icone {
  flex: none;
  width: 64px;
  height: 64px;
  stroke: #00D8FF;
  stroke-width: 1.5px;
  filter: drop-shadow(0 0 6px rgba(0, 216, 255, 0.55));
}

[data-page="a-propos"] .carte--valeur > h3 {
  margin-top: var(--espace-icone-titre);
}

[data-page="a-propos"] .carte--valeur > p {
  margin-top: var(--espace-titre-texte-carte);
}

/* ---------- Équipe : 4 cartes membres (portrait 3:2 fondu, bandeau sombre, NOM + ROLE) ---------- */
[data-page="a-propos"] .grille--equipe {
  gap: 36px;
}

[data-page="a-propos"] .carte--membre {
  display: flex;
  flex-direction: column;
  border: 2px solid;
  border-color: #7058E8 #2F7BE0 #2E6E9C;
  border-radius: 12px;
  background-color: #010C1F;
  box-shadow: 0 0 12px rgba(124, 92, 240, 0.35);
  text-align: center;
}

/* Zone du portrait (et de l'emplacement d'attente) : 4:3,15 comme la maquette (A-36, lot 5, tour 4 ; 3:2 avant),
   coins hauts arrondis au rayon intérieur de la carte. Portraits recadrés serré sur le visage dans images.json. */
[data-page="a-propos"] .membre__photo {
  position: relative;
  aspect-ratio: 4 / 3.15;
  overflow: hidden;
  border-radius: 10px 10px 0 0;
}

[data-page="a-propos"] .membre__portrait {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%; /* le recadrage (images.json) cadre déjà le visage */
}

/* Fondu du bas du portrait vers le bandeau (maquette : la photo se perd dans le bandeau sombre). */
[data-page="a-propos"] .membre__photo:not(.membre__attente)::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, rgba(1, 12, 31, 0) 50%, #010C1F 100%);
  pointer-events: none;
}

/* Emplacement d'attente (§ 7.4) : zone --degrade-bouton, lettre « K » 96 px, 600, blanche, centrée. */
[data-page="a-propos"] .membre__attente {
  display: grid;
  place-items: center;
  background-image: var(--degrade-bouton);
  font-size: 96px;
  font-weight: 600;
  line-height: 1;
  color: var(--texte-principal);
}

[data-page="a-propos"] .membre__bandeau {
  flex: 1 1 auto;
  padding: 24px 20px;
}

[data-page="a-propos"] .carte--membre h3 {
  color: var(--texte-principal);
}

[data-page="a-propos"] .carte--membre p {
  margin-top: var(--espace-titre-sous-titre);
  color: var(--texte-secondaire);
  text-wrap: balance;
}

/* ---------- Tablette et mobile ---------- */
@media (max-width: 1199px) {
  [data-page="a-propos"] :is(.mission__texte, .carte--valeur, .carte--membre) h3 {
    font-size: 23px;
  }
}

@media (max-width: 999px) {
  /* Mission empilée (spec et maquette muettes sous 1000 px) : éléments de 560 px au plus, centrés, pour que le texte
     centré reste près de son icône ; 40 px entre eux. */
  [data-page="a-propos"] .grille--mission {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
  }

  [data-page="a-propos"] .mission__point {
    justify-self: center;
    width: 100%;
    max-width: 560px;
  }

  [data-page="a-propos"] .mission__point + .mission__point::before {
    content: none;
  }
}

@media (max-width: 767px) {
  [data-page="a-propos"] .carte--valeur {
    padding: 24px;
  }

  [data-page="a-propos"] :is([data-section="mission"], [data-section="valeurs"], [data-section="memoire"], [data-section="humain"], [data-section="equipe"]) .surtitre {
    font-size: 16px;
  }

  [data-page="a-propos"] :is(.mission__texte, .carte--valeur, .carte--membre) h3 {
    font-size: 22px;
  }
}

/* ========== Tour 3 du lot 5 : fidélité à la maquette (A-01 v5 ; valeurs : comparaison-maquette.md, à 1440 ;
   proportion de la spec à 820 et 390). B1 (P2) lead du hero 23 px ; B2 (P1, T5b) introduction des valeurs 20 px ;
   B6 (P1, T5a) texte du CTA 22 px ; B5 (P3) 2e ligne du H2 de l'équipe 42 px. ========== */
[data-page="a-propos"] .hero .lead {
  font-size: 23px;
}

[data-page="a-propos"] [data-section="valeurs"] .conteneur > p:not(.surtitre) {
  font-size: 20px;
}

[data-page="a-propos"] [data-section="cta"] .cta__contenu > p:not(.surtitre) {
  font-size: 22px;
  line-height: 1.6; /* tableau v5 : style de base Paragraphe (sans interligne inscrit) */
}

[data-page="a-propos"] [data-section="equipe"] h2 .degrade {
  font-size: 42px;
}

/* B4 (P2) : humain — voile sombre sous le texte renforcé de 0,77 à 0,88 (fond L 26–30 contre 11,5–12,5 sur la
   maquette ; même géométrie). */
[data-page="a-propos"] [data-section="humain"] .conteneur::before {
  background-image: linear-gradient(90deg, rgba(4, 20, 38, 0) 0, rgba(4, 20, 38, 0.88) max(0px, calc(50% - 475px)),
    rgba(4, 20, 38, 0.88) min(100%, calc(50% + 475px)), rgba(4, 20, 38, 0) 100%);
}

@media (max-width: 1199px) {
  [data-page="a-propos"] .hero .lead { font-size: 22px; }
  [data-page="a-propos"] [data-section="valeurs"] .conteneur > p:not(.surtitre) { font-size: 19px; }
  [data-page="a-propos"] [data-section="cta"] .cta__contenu > p:not(.surtitre) { font-size: 21px; }
  [data-page="a-propos"] [data-section="equipe"] h2 .degrade { font-size: 35px; }
}

@media (max-width: 767px) {
  [data-page="a-propos"] .hero .lead { font-size: 20px; }
  [data-page="a-propos"] [data-section="valeurs"] .conteneur > p:not(.surtitre) { font-size: 17px; }
  [data-page="a-propos"] [data-section="cta"] .cta__contenu > p:not(.surtitre) { font-size: 19px; }
  [data-page="a-propos"] [data-section="equipe"] h2 .degrade { font-size: 26px; }
}

/* ---------- Voiles à 820 et 390 (tour 4 du lot 5 ; A-01 v5, A-27 « on renforce le voile ») : comme à 1440 (tour 2),
   une couche rgba(4, 20, 38, A) s'ajoute au voile du § 6 (::before, inchangé) ; A calculé pour que la couleur
   moyenne sous les caractères ait la luminance du fond de la maquette (relevés : l5/scripts/c4-mesures.mjs ; calcul :
   l5/scripts/c4-alphas.py ; rapport du lot 5 § 14). Le texte occupe toute la largeur : la couche est uniforme
   sur la bande des caractères (relevée, ± 40 px), fondue sur 80 px au-dessus et au-dessous ; l'image reste visible
   hors de cette bande. Hero 0,02512 → 0,00961 à 820 (A = 0,78), 0,02319 → 0,00961 à 390 (0,76) ; CTA 0,01523 → 0,01039 à 820
   (0,50) ; à 390, le CTA est déjà sous la limite (0,01131). ---------- */
@media (min-width: 768px) and (max-width: 1199px) {
  [data-page="a-propos"] .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(180deg, rgba(4, 20, 38, 0) 117px, rgba(4, 20, 38, 0.235) 197px, rgba(4, 20, 38, 0.94) 237px, rgba(4, 20, 38, 0.94) 600px, rgba(4, 20, 38, 0.235) 640px, rgba(4, 20, 38, 0) 720px);
  }

  [data-page="a-propos"] .cta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(180deg, rgba(4, 20, 38, 0) -90px, rgba(4, 20, 38, 0.92) 30px, rgba(4, 20, 38, 0.92) 70px, rgba(4, 20, 38, 0.92) 332px, rgba(4, 20, 38, 0.92) 372px, rgba(4, 20, 38, 0) 492px); /* 0,79 (A-37) → 0,92 (A-38, tour 5) */
  }
}

@media (max-width: 767px) {
  [data-page="a-propos"] .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(180deg, rgba(4, 20, 38, 0) -23px, rgba(4, 20, 38, 0.233) 57px, rgba(4, 20, 38, 0.93) 97px, rgba(4, 20, 38, 0.93) 564px, rgba(4, 20, 38, 0.233) 604px, rgba(4, 20, 38, 0) 684px);
  }
}

/* ---------- Photos comme la maquette (A-36, SPEC v4.12 § 9 ; lot 5, tour 4) ---------- */
/* Hero : tête entière, bord droit de la maquette (x 627–1928 de la source à 1440). */
[data-page="a-propos"] .hero__image {
  object-position: 84% 50%;
}

/* Valeurs : l'essai Unknown-29 (A-36) n'est pas retenu — sa lueur et le limbe de la planète passent sous l'en-tête à
   toute position (A-27 : 1,63:1 à 100 %, 3,21:1 à 75 % ; 95e centile de luminance sous l'en-tête 0,19 à 0,94, contre
   0,04 pour Unknown-34) ; Unknown-34 est gardée, centrée (planches l5/c4-photos/essais, l5/preuve-visuelle). */

/* Voiles après les photos A-36 (A-27 « on renforce le voile » ; voiles.test ; l5/scripts/c4-alphas-photos.py) :
   ≥ 1200, le hero cadré à 84 % montre la nébuleuse sous le texte (0,01717 → 0,00961, A = 0,66) : couche uniforme
   sous la colonne du texte (lead ≤ 640 px, + 60 px), fondue sur 200 px, la tête restant claire ; ≤ 767, CTA
   0,01159 → 0,01039 (A = 0,22), même bande que le hero. */
@media (min-width: 1200px) {
  [data-page="a-propos"] .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(90deg, rgba(4, 20, 38, 0.66) 0%, rgba(4, 20, 38, 0.66) calc(50% + 100px), rgba(4, 20, 38, 0) calc(50% + 300px));
  }
}

@media (max-width: 767px) {
  [data-page="a-propos"] .cta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(180deg, rgba(4, 20, 38, 0) -90px, rgba(4, 20, 38, 0.92) 30px, rgba(4, 20, 38, 0.92) 70px, rgba(4, 20, 38, 0.92) 420px, rgba(4, 20, 38, 0.92) 460px, rgba(4, 20, 38, 0) 580px); /* 0,77 (A-37) → 0,92 (A-38, tour 5) */
  }
}

/* CTA ≥ 1200 (A-37 : Unknown-19, le soleil au centre, sous le texte) : 0,03619 → 0,01039 (A = 0,80) ; bande sous le
   texte centré (≈ 145–405 px dans les 550 px, ± 40), fondue sur 80 px ; montagnes et nuages visibles en bas et sur
   les côtés. */
@media (min-width: 1200px) {
  [data-page="a-propos"] .cta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(180deg, rgba(4, 20, 38, 0) 25px, rgba(4, 20, 38, 0.8) 105px, rgba(4, 20, 38, 0.8) 445px, rgba(4, 20, 38, 0) 525px);
  }
}

/* ---------- Couche sous le texte sans bord et minimale (A-39, SPEC v4.15 § 9 ; lot 5, tour 6) ----------
   Remplace la couche du tour 5 (A-38). Hors des caractères, la photo a la lumière de la maquette (tests/lumiere.test.mjs) ;
   la couche n'a pas de bord (opacité en smoothstep, arrêts tous les 10 px : pente ≤ 0,01 par px, sans cassure ;
   tests/couche.test.mjs) et son cœur --voile est le plus faible qui tient A-27 et « maquette + 10 % » (même test ;
   valeurs : .contrat/site-2026/l5/scripts/c6-minimal.mjs, rapport du lot 5 § 16). ---------- */
/* Hero : cœur --voile 0.89 / 0.93 / 0.91 (1440 / 820 / 390), fondu smoothstep sur 160 px au-delà des caractères + 0 px jusqu'à 0.15, puis 0.05 au bord droit ; image brightness(1.3) ; voile bas du § 6 seul. */
[data-page="a-propos"] .hero {
  --voile: 0.89;
}

@media (min-width: 768px) and (max-width: 1199px) {
  [data-page="a-propos"] .hero {
    --voile: 0.93;
  }
}

@media (max-width: 767px) {
  [data-page="a-propos"] .hero {
    --voile: 0.91;
  }
}

[data-page="a-propos"] .hero::before {
  background-image: linear-gradient(0deg, rgba(4, 20, 38, 0.6), transparent 120px);
}

@media (min-width: 1200px) {
  [data-page="a-propos"] .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(90deg, rgb(4 20 38 / var(--voile)) 0%, rgb(4 20 38 / var(--voile)) calc(50% + 37px), rgb(4 20 38 / calc(0.15 + (var(--voile) - 0.15) * 0.9888)) calc(50% + 47px), rgb(4 20 38 / calc(0.15 + (var(--voile) - 0.15) * 0.9570)) calc(50% + 57px), rgb(4 20 38 / calc(0.15 + (var(--voile) - 0.15) * 0.9077)) calc(50% + 67px), rgb(4 20 38 / calc(0.15 + (var(--voile) - 0.15) * 0.8438)) calc(50% + 77px), rgb(4 20 38 / calc(0.15 + (var(--voile) - 0.15) * 0.7681)) calc(50% + 87px), rgb(4 20 38 / calc(0.15 + (var(--voile) - 0.15) * 0.6836)) calc(50% + 97px), rgb(4 20 38 / calc(0.15 + (var(--voile) - 0.15) * 0.5933)) calc(50% + 107px), rgb(4 20 38 / calc(0.15 + (var(--voile) - 0.15) * 0.5000)) calc(50% + 117px), rgb(4 20 38 / calc(0.15 + (var(--voile) - 0.15) * 0.4067)) calc(50% + 127px), rgb(4 20 38 / calc(0.15 + (var(--voile) - 0.15) * 0.3164)) calc(50% + 137px), rgb(4 20 38 / calc(0.15 + (var(--voile) - 0.15) * 0.2319)) calc(50% + 147px), rgb(4 20 38 / calc(0.15 + (var(--voile) - 0.15) * 0.1562)) calc(50% + 157px), rgb(4 20 38 / calc(0.15 + (var(--voile) - 0.15) * 0.0923)) calc(50% + 167px), rgb(4 20 38 / calc(0.15 + (var(--voile) - 0.15) * 0.0430)) calc(50% + 177px), rgb(4 20 38 / calc(0.15 + (var(--voile) - 0.15) * 0.0112)) calc(50% + 187px), rgba(4, 20, 38, 0.15) calc(50% + 197px), rgba(4, 20, 38, 0.05) 100%);
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  [data-page="a-propos"] .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(180deg, rgba(4, 20, 38, 0) 121px, rgb(4 20 38 / calc(var(--voile) * 0.0112)) 131px, rgb(4 20 38 / calc(var(--voile) * 0.0430)) 141px, rgb(4 20 38 / calc(var(--voile) * 0.0923)) 151px, rgb(4 20 38 / calc(var(--voile) * 0.1562)) 161px, rgb(4 20 38 / calc(var(--voile) * 0.2319)) 171px, rgb(4 20 38 / calc(var(--voile) * 0.3164)) 181px, rgb(4 20 38 / calc(var(--voile) * 0.4067)) 191px, rgb(4 20 38 / calc(var(--voile) * 0.5000)) 201px, rgb(4 20 38 / calc(var(--voile) * 0.5933)) 211px, rgb(4 20 38 / calc(var(--voile) * 0.6836)) 221px, rgb(4 20 38 / calc(var(--voile) * 0.7681)) 231px, rgb(4 20 38 / calc(var(--voile) * 0.8438)) 241px, rgb(4 20 38 / calc(var(--voile) * 0.9077)) 251px, rgb(4 20 38 / calc(var(--voile) * 0.9570)) 261px, rgb(4 20 38 / calc(var(--voile) * 0.9888)) 271px, rgb(4 20 38 / var(--voile)) 281px, rgb(4 20 38 / var(--voile)) 556px, rgb(4 20 38 / calc(var(--voile) * 0.9888)) 566px, rgb(4 20 38 / calc(var(--voile) * 0.9570)) 576px, rgb(4 20 38 / calc(var(--voile) * 0.9077)) 586px, rgb(4 20 38 / calc(var(--voile) * 0.8438)) 596px, rgb(4 20 38 / calc(var(--voile) * 0.7681)) 606px, rgb(4 20 38 / calc(var(--voile) * 0.6836)) 616px, rgb(4 20 38 / calc(var(--voile) * 0.5933)) 626px, rgb(4 20 38 / calc(var(--voile) * 0.5000)) 636px, rgb(4 20 38 / calc(var(--voile) * 0.4067)) 646px, rgb(4 20 38 / calc(var(--voile) * 0.3164)) 656px, rgb(4 20 38 / calc(var(--voile) * 0.2319)) 666px, rgb(4 20 38 / calc(var(--voile) * 0.1562)) 676px, rgb(4 20 38 / calc(var(--voile) * 0.0923)) 686px, rgb(4 20 38 / calc(var(--voile) * 0.0430)) 696px, rgb(4 20 38 / calc(var(--voile) * 0.0112)) 706px, rgba(4, 20, 38, 0) 716px);
  }
}

@media (max-width: 767px) {
  [data-page="a-propos"] .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(180deg, rgba(4, 20, 38, 0) -19px, rgb(4 20 38 / calc(var(--voile) * 0.0112)) -9px, rgb(4 20 38 / calc(var(--voile) * 0.0430)) 1px, rgb(4 20 38 / calc(var(--voile) * 0.0923)) 11px, rgb(4 20 38 / calc(var(--voile) * 0.1562)) 21px, rgb(4 20 38 / calc(var(--voile) * 0.2319)) 31px, rgb(4 20 38 / calc(var(--voile) * 0.3164)) 41px, rgb(4 20 38 / calc(var(--voile) * 0.4067)) 51px, rgb(4 20 38 / calc(var(--voile) * 0.5000)) 61px, rgb(4 20 38 / calc(var(--voile) * 0.5933)) 71px, rgb(4 20 38 / calc(var(--voile) * 0.6836)) 81px, rgb(4 20 38 / calc(var(--voile) * 0.7681)) 91px, rgb(4 20 38 / calc(var(--voile) * 0.8438)) 101px, rgb(4 20 38 / calc(var(--voile) * 0.9077)) 111px, rgb(4 20 38 / calc(var(--voile) * 0.9570)) 121px, rgb(4 20 38 / calc(var(--voile) * 0.9888)) 131px, rgb(4 20 38 / var(--voile)) 141px, rgb(4 20 38 / var(--voile)) 520px, rgb(4 20 38 / calc(var(--voile) * 0.9888)) 530px, rgb(4 20 38 / calc(var(--voile) * 0.9570)) 540px, rgb(4 20 38 / calc(var(--voile) * 0.9077)) 550px, rgb(4 20 38 / calc(var(--voile) * 0.8438)) 560px, rgb(4 20 38 / calc(var(--voile) * 0.7681)) 570px, rgb(4 20 38 / calc(var(--voile) * 0.6836)) 580px, rgb(4 20 38 / calc(var(--voile) * 0.5933)) 590px, rgb(4 20 38 / calc(var(--voile) * 0.5000)) 600px, rgb(4 20 38 / calc(var(--voile) * 0.4067)) 610px, rgb(4 20 38 / calc(var(--voile) * 0.3164)) 620px, rgb(4 20 38 / calc(var(--voile) * 0.2319)) 630px, rgb(4 20 38 / calc(var(--voile) * 0.1562)) 640px, rgb(4 20 38 / calc(var(--voile) * 0.0923)) 650px, rgb(4 20 38 / calc(var(--voile) * 0.0430)) 660px, rgb(4 20 38 / calc(var(--voile) * 0.0112)) 670px, rgba(4, 20, 38, 0) 680px);
  }
}

[data-page="a-propos"] .hero__image {
  filter: brightness(1.3);
}

/* CTA : cœur --voile 0.91 / 0.91 / 0.9, fondu smoothstep sur 160 px de part et d'autre du bloc ± 0 px jusqu'à 0.4 à gauche et 0.15 à droite ; à 820 et 390, bande sur les caractères ; image brightness(1.15). */
[data-page="a-propos"] .cta {
  --voile: 0.91;
}

@media (min-width: 768px) and (max-width: 1199px) {
  [data-page="a-propos"] .cta {
    --voile: 0.91;
  }
}

@media (max-width: 767px) {
  [data-page="a-propos"] .cta {
    --voile: 0.9;
  }
}

[data-page="a-propos"] .cta::before {
  background-color: transparent;
}

@media (min-width: 1200px) {
  [data-page="a-propos"] .cta::before {
    background-image: linear-gradient(90deg, rgba(4, 20, 38, 0.4) calc(50% - 471px), rgb(4 20 38 / calc(0.4 + (var(--voile) - 0.4) * 0.0112)) calc(50% - 461px), rgb(4 20 38 / calc(0.4 + (var(--voile) - 0.4) * 0.0430)) calc(50% - 451px), rgb(4 20 38 / calc(0.4 + (var(--voile) - 0.4) * 0.0923)) calc(50% - 441px), rgb(4 20 38 / calc(0.4 + (var(--voile) - 0.4) * 0.1562)) calc(50% - 431px), rgb(4 20 38 / calc(0.4 + (var(--voile) - 0.4) * 0.2319)) calc(50% - 421px), rgb(4 20 38 / calc(0.4 + (var(--voile) - 0.4) * 0.3164)) calc(50% - 411px), rgb(4 20 38 / calc(0.4 + (var(--voile) - 0.4) * 0.4067)) calc(50% - 401px), rgb(4 20 38 / calc(0.4 + (var(--voile) - 0.4) * 0.5000)) calc(50% - 391px), rgb(4 20 38 / calc(0.4 + (var(--voile) - 0.4) * 0.5933)) calc(50% - 381px), rgb(4 20 38 / calc(0.4 + (var(--voile) - 0.4) * 0.6836)) calc(50% - 371px), rgb(4 20 38 / calc(0.4 + (var(--voile) - 0.4) * 0.7681)) calc(50% - 361px), rgb(4 20 38 / calc(0.4 + (var(--voile) - 0.4) * 0.8438)) calc(50% - 351px), rgb(4 20 38 / calc(0.4 + (var(--voile) - 0.4) * 0.9077)) calc(50% - 341px), rgb(4 20 38 / calc(0.4 + (var(--voile) - 0.4) * 0.9570)) calc(50% - 331px), rgb(4 20 38 / calc(0.4 + (var(--voile) - 0.4) * 0.9888)) calc(50% - 321px), rgb(4 20 38 / var(--voile)) calc(50% - 311px), rgb(4 20 38 / var(--voile)) calc(50% + 311px), rgb(4 20 38 / calc(0.15 + (var(--voile) - 0.15) * 0.9888)) calc(50% + 321px), rgb(4 20 38 / calc(0.15 + (var(--voile) - 0.15) * 0.9570)) calc(50% + 331px), rgb(4 20 38 / calc(0.15 + (var(--voile) - 0.15) * 0.9077)) calc(50% + 341px), rgb(4 20 38 / calc(0.15 + (var(--voile) - 0.15) * 0.8438)) calc(50% + 351px), rgb(4 20 38 / calc(0.15 + (var(--voile) - 0.15) * 0.7681)) calc(50% + 361px), rgb(4 20 38 / calc(0.15 + (var(--voile) - 0.15) * 0.6836)) calc(50% + 371px), rgb(4 20 38 / calc(0.15 + (var(--voile) - 0.15) * 0.5933)) calc(50% + 381px), rgb(4 20 38 / calc(0.15 + (var(--voile) - 0.15) * 0.5000)) calc(50% + 391px), rgb(4 20 38 / calc(0.15 + (var(--voile) - 0.15) * 0.4067)) calc(50% + 401px), rgb(4 20 38 / calc(0.15 + (var(--voile) - 0.15) * 0.3164)) calc(50% + 411px), rgb(4 20 38 / calc(0.15 + (var(--voile) - 0.15) * 0.2319)) calc(50% + 421px), rgb(4 20 38 / calc(0.15 + (var(--voile) - 0.15) * 0.1562)) calc(50% + 431px), rgb(4 20 38 / calc(0.15 + (var(--voile) - 0.15) * 0.0923)) calc(50% + 441px), rgb(4 20 38 / calc(0.15 + (var(--voile) - 0.15) * 0.0430)) calc(50% + 451px), rgb(4 20 38 / calc(0.15 + (var(--voile) - 0.15) * 0.0112)) calc(50% + 461px), rgba(4, 20, 38, 0.15) calc(50% + 471px));
  }

  [data-page="a-propos"] .cta::after {
    content: none;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  [data-page="a-propos"] .cta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(180deg, rgba(4, 20, 38, 0) -49px, rgb(4 20 38 / calc(var(--voile) * 0.0112)) -39px, rgb(4 20 38 / calc(var(--voile) * 0.0430)) -29px, rgb(4 20 38 / calc(var(--voile) * 0.0923)) -19px, rgb(4 20 38 / calc(var(--voile) * 0.1562)) -9px, rgb(4 20 38 / calc(var(--voile) * 0.2319)) 1px, rgb(4 20 38 / calc(var(--voile) * 0.3164)) 11px, rgb(4 20 38 / calc(var(--voile) * 0.4067)) 21px, rgb(4 20 38 / calc(var(--voile) * 0.5000)) 31px, rgb(4 20 38 / calc(var(--voile) * 0.5933)) 41px, rgb(4 20 38 / calc(var(--voile) * 0.6836)) 51px, rgb(4 20 38 / calc(var(--voile) * 0.7681)) 61px, rgb(4 20 38 / calc(var(--voile) * 0.8438)) 71px, rgb(4 20 38 / calc(var(--voile) * 0.9077)) 81px, rgb(4 20 38 / calc(var(--voile) * 0.9570)) 91px, rgb(4 20 38 / calc(var(--voile) * 0.9888)) 101px, rgb(4 20 38 / var(--voile)) 111px, rgb(4 20 38 / var(--voile)) 363px, rgb(4 20 38 / calc(var(--voile) * 0.9888)) 373px, rgb(4 20 38 / calc(var(--voile) * 0.9570)) 383px, rgb(4 20 38 / calc(var(--voile) * 0.9077)) 393px, rgb(4 20 38 / calc(var(--voile) * 0.8438)) 403px, rgb(4 20 38 / calc(var(--voile) * 0.7681)) 413px, rgb(4 20 38 / calc(var(--voile) * 0.6836)) 423px, rgb(4 20 38 / calc(var(--voile) * 0.5933)) 433px, rgb(4 20 38 / calc(var(--voile) * 0.5000)) 443px, rgb(4 20 38 / calc(var(--voile) * 0.4067)) 453px, rgb(4 20 38 / calc(var(--voile) * 0.3164)) 463px, rgb(4 20 38 / calc(var(--voile) * 0.2319)) 473px, rgb(4 20 38 / calc(var(--voile) * 0.1562)) 483px, rgb(4 20 38 / calc(var(--voile) * 0.0923)) 493px, rgb(4 20 38 / calc(var(--voile) * 0.0430)) 503px, rgb(4 20 38 / calc(var(--voile) * 0.0112)) 513px, rgba(4, 20, 38, 0) 523px);
  }
}

@media (max-width: 767px) {
  [data-page="a-propos"] .cta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(180deg, rgba(4, 20, 38, 0) -81px, rgb(4 20 38 / calc(var(--voile) * 0.0112)) -71px, rgb(4 20 38 / calc(var(--voile) * 0.0430)) -61px, rgb(4 20 38 / calc(var(--voile) * 0.0923)) -51px, rgb(4 20 38 / calc(var(--voile) * 0.1562)) -41px, rgb(4 20 38 / calc(var(--voile) * 0.2319)) -31px, rgb(4 20 38 / calc(var(--voile) * 0.3164)) -21px, rgb(4 20 38 / calc(var(--voile) * 0.4067)) -11px, rgb(4 20 38 / calc(var(--voile) * 0.5000)) -1px, rgb(4 20 38 / calc(var(--voile) * 0.5933)) 9px, rgb(4 20 38 / calc(var(--voile) * 0.6836)) 19px, rgb(4 20 38 / calc(var(--voile) * 0.7681)) 29px, rgb(4 20 38 / calc(var(--voile) * 0.8438)) 39px, rgb(4 20 38 / calc(var(--voile) * 0.9077)) 49px, rgb(4 20 38 / calc(var(--voile) * 0.9570)) 59px, rgb(4 20 38 / calc(var(--voile) * 0.9888)) 69px, rgb(4 20 38 / var(--voile)) 79px, rgb(4 20 38 / var(--voile)) 392px, rgb(4 20 38 / calc(var(--voile) * 0.9888)) 402px, rgb(4 20 38 / calc(var(--voile) * 0.9570)) 412px, rgb(4 20 38 / calc(var(--voile) * 0.9077)) 422px, rgb(4 20 38 / calc(var(--voile) * 0.8438)) 432px, rgb(4 20 38 / calc(var(--voile) * 0.7681)) 442px, rgb(4 20 38 / calc(var(--voile) * 0.6836)) 452px, rgb(4 20 38 / calc(var(--voile) * 0.5933)) 462px, rgb(4 20 38 / calc(var(--voile) * 0.5000)) 472px, rgb(4 20 38 / calc(var(--voile) * 0.4067)) 482px, rgb(4 20 38 / calc(var(--voile) * 0.3164)) 492px, rgb(4 20 38 / calc(var(--voile) * 0.2319)) 502px, rgb(4 20 38 / calc(var(--voile) * 0.1562)) 512px, rgb(4 20 38 / calc(var(--voile) * 0.0923)) 522px, rgb(4 20 38 / calc(var(--voile) * 0.0430)) 532px, rgb(4 20 38 / calc(var(--voile) * 0.0112)) 542px, rgba(4, 20, 38, 0) 552px);
  }
}

[data-page="a-propos"] .cta__image {
  filter: brightness(1.15);
}

/* a-propos/humain (A-39) : voile lointain 0 ; couche sur le bloc de texte, cœur --voile 0.72 / 0.73 / 0.77, fondue en smoothstep sur 160 px (bande × masque) ; image brightness(1.35). */
[data-page="a-propos"] [data-section="humain"] {
  --voile: 0.72;
}

@media (min-width: 768px) and (max-width: 1199px) {
  [data-page="a-propos"] [data-section="humain"] {
    --voile: 0.73;
  }
}

@media (max-width: 767px) {
  [data-page="a-propos"] [data-section="humain"] {
    --voile: 0.77;
  }
}

[data-page="a-propos"] [data-section="humain"]::before {
  background-color: rgba(4, 20, 38, 0);
  background-image: none;
}

@media (min-width: 1200px) {
  [data-page="a-propos"] [data-section="humain"]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: linear-gradient(90deg, rgba(4, 20, 38, 0) calc(50% - 612px), rgb(4 20 38 / calc(var(--voile) * 0.0112)) calc(50% - 602px), rgb(4 20 38 / calc(var(--voile) * 0.0430)) calc(50% - 592px), rgb(4 20 38 / calc(var(--voile) * 0.0923)) calc(50% - 582px), rgb(4 20 38 / calc(var(--voile) * 0.1562)) calc(50% - 572px), rgb(4 20 38 / calc(var(--voile) * 0.2319)) calc(50% - 562px), rgb(4 20 38 / calc(var(--voile) * 0.3164)) calc(50% - 552px), rgb(4 20 38 / calc(var(--voile) * 0.4067)) calc(50% - 542px), rgb(4 20 38 / calc(var(--voile) * 0.5000)) calc(50% - 532px), rgb(4 20 38 / calc(var(--voile) * 0.5933)) calc(50% - 522px), rgb(4 20 38 / calc(var(--voile) * 0.6836)) calc(50% - 512px), rgb(4 20 38 / calc(var(--voile) * 0.7681)) calc(50% - 502px), rgb(4 20 38 / calc(var(--voile) * 0.8438)) calc(50% - 492px), rgb(4 20 38 / calc(var(--voile) * 0.9077)) calc(50% - 482px), rgb(4 20 38 / calc(var(--voile) * 0.9570)) calc(50% - 472px), rgb(4 20 38 / calc(var(--voile) * 0.9888)) calc(50% - 462px), rgb(4 20 38 / var(--voile)) calc(50% - 452px), rgb(4 20 38 / var(--voile)) calc(50% + 452px), rgb(4 20 38 / calc(var(--voile) * 0.9888)) calc(50% + 462px), rgb(4 20 38 / calc(var(--voile) * 0.9570)) calc(50% + 472px), rgb(4 20 38 / calc(var(--voile) * 0.9077)) calc(50% + 482px), rgb(4 20 38 / calc(var(--voile) * 0.8438)) calc(50% + 492px), rgb(4 20 38 / calc(var(--voile) * 0.7681)) calc(50% + 502px), rgb(4 20 38 / calc(var(--voile) * 0.6836)) calc(50% + 512px), rgb(4 20 38 / calc(var(--voile) * 0.5933)) calc(50% + 522px), rgb(4 20 38 / calc(var(--voile) * 0.5000)) calc(50% + 532px), rgb(4 20 38 / calc(var(--voile) * 0.4067)) calc(50% + 542px), rgb(4 20 38 / calc(var(--voile) * 0.3164)) calc(50% + 552px), rgb(4 20 38 / calc(var(--voile) * 0.2319)) calc(50% + 562px), rgb(4 20 38 / calc(var(--voile) * 0.1562)) calc(50% + 572px), rgb(4 20 38 / calc(var(--voile) * 0.0923)) calc(50% + 582px), rgb(4 20 38 / calc(var(--voile) * 0.0430)) calc(50% + 592px), rgb(4 20 38 / calc(var(--voile) * 0.0112)) calc(50% + 602px), rgba(4, 20, 38, 0) calc(50% + 612px));
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) -41px, rgba(0, 0, 0, 0.0112) -31px, rgba(0, 0, 0, 0.0430) -21px, rgba(0, 0, 0, 0.0923) -11px, rgba(0, 0, 0, 0.1562) -1px, rgba(0, 0, 0, 0.2319) 9px, rgba(0, 0, 0, 0.3164) 19px, rgba(0, 0, 0, 0.4067) 29px, rgba(0, 0, 0, 0.5000) 39px, rgba(0, 0, 0, 0.5933) 49px, rgba(0, 0, 0, 0.6836) 59px, rgba(0, 0, 0, 0.7681) 69px, rgba(0, 0, 0, 0.8438) 79px, rgba(0, 0, 0, 0.9077) 89px, rgba(0, 0, 0, 0.9570) 99px, rgba(0, 0, 0, 0.9888) 109px, rgb(0, 0, 0) 119px, rgb(0, 0, 0) 527px, rgba(0, 0, 0, 0.9888) 537px, rgba(0, 0, 0, 0.9570) 547px, rgba(0, 0, 0, 0.9077) 557px, rgba(0, 0, 0, 0.8438) 567px, rgba(0, 0, 0, 0.7681) 577px, rgba(0, 0, 0, 0.6836) 587px, rgba(0, 0, 0, 0.5933) 597px, rgba(0, 0, 0, 0.5000) 607px, rgba(0, 0, 0, 0.4067) 617px, rgba(0, 0, 0, 0.3164) 627px, rgba(0, 0, 0, 0.2319) 637px, rgba(0, 0, 0, 0.1562) 647px, rgba(0, 0, 0, 0.0923) 657px, rgba(0, 0, 0, 0.0430) 667px, rgba(0, 0, 0, 0.0112) 677px, rgba(0, 0, 0, 0) 687px);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) -41px, rgba(0, 0, 0, 0.0112) -31px, rgba(0, 0, 0, 0.0430) -21px, rgba(0, 0, 0, 0.0923) -11px, rgba(0, 0, 0, 0.1562) -1px, rgba(0, 0, 0, 0.2319) 9px, rgba(0, 0, 0, 0.3164) 19px, rgba(0, 0, 0, 0.4067) 29px, rgba(0, 0, 0, 0.5000) 39px, rgba(0, 0, 0, 0.5933) 49px, rgba(0, 0, 0, 0.6836) 59px, rgba(0, 0, 0, 0.7681) 69px, rgba(0, 0, 0, 0.8438) 79px, rgba(0, 0, 0, 0.9077) 89px, rgba(0, 0, 0, 0.9570) 99px, rgba(0, 0, 0, 0.9888) 109px, rgb(0, 0, 0) 119px, rgb(0, 0, 0) 527px, rgba(0, 0, 0, 0.9888) 537px, rgba(0, 0, 0, 0.9570) 547px, rgba(0, 0, 0, 0.9077) 557px, rgba(0, 0, 0, 0.8438) 567px, rgba(0, 0, 0, 0.7681) 577px, rgba(0, 0, 0, 0.6836) 587px, rgba(0, 0, 0, 0.5933) 597px, rgba(0, 0, 0, 0.5000) 607px, rgba(0, 0, 0, 0.4067) 617px, rgba(0, 0, 0, 0.3164) 627px, rgba(0, 0, 0, 0.2319) 637px, rgba(0, 0, 0, 0.1562) 647px, rgba(0, 0, 0, 0.0923) 657px, rgba(0, 0, 0, 0.0430) 667px, rgba(0, 0, 0, 0.0112) 677px, rgba(0, 0, 0, 0) 687px);
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  [data-page="a-propos"] [data-section="humain"]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: linear-gradient(90deg, rgba(4, 20, 38, 0) -104px, rgb(4 20 38 / calc(var(--voile) * 0.0112)) -94px, rgb(4 20 38 / calc(var(--voile) * 0.0430)) -84px, rgb(4 20 38 / calc(var(--voile) * 0.0923)) -74px, rgb(4 20 38 / calc(var(--voile) * 0.1562)) -64px, rgb(4 20 38 / calc(var(--voile) * 0.2319)) -54px, rgb(4 20 38 / calc(var(--voile) * 0.3164)) -44px, rgb(4 20 38 / calc(var(--voile) * 0.4067)) -34px, rgb(4 20 38 / calc(var(--voile) * 0.5000)) -24px, rgb(4 20 38 / calc(var(--voile) * 0.5933)) -14px, rgb(4 20 38 / calc(var(--voile) * 0.6836)) -4px, rgb(4 20 38 / calc(var(--voile) * 0.7681)) 6px, rgb(4 20 38 / calc(var(--voile) * 0.8438)) 16px, rgb(4 20 38 / calc(var(--voile) * 0.9077)) 26px, rgb(4 20 38 / calc(var(--voile) * 0.9570)) 36px, rgb(4 20 38 / calc(var(--voile) * 0.9888)) 46px, rgb(4 20 38 / var(--voile)) 56px, rgb(4 20 38 / var(--voile)) 764px, rgb(4 20 38 / calc(var(--voile) * 0.9888)) 774px, rgb(4 20 38 / calc(var(--voile) * 0.9570)) 784px, rgb(4 20 38 / calc(var(--voile) * 0.9077)) 794px, rgb(4 20 38 / calc(var(--voile) * 0.8438)) 804px, rgb(4 20 38 / calc(var(--voile) * 0.7681)) 814px, rgb(4 20 38 / calc(var(--voile) * 0.6836)) 824px, rgb(4 20 38 / calc(var(--voile) * 0.5933)) 834px, rgb(4 20 38 / calc(var(--voile) * 0.5000)) 844px, rgb(4 20 38 / calc(var(--voile) * 0.4067)) 854px, rgb(4 20 38 / calc(var(--voile) * 0.3164)) 864px, rgb(4 20 38 / calc(var(--voile) * 0.2319)) 874px, rgb(4 20 38 / calc(var(--voile) * 0.1562)) 884px, rgb(4 20 38 / calc(var(--voile) * 0.0923)) 894px, rgb(4 20 38 / calc(var(--voile) * 0.0430)) 904px, rgb(4 20 38 / calc(var(--voile) * 0.0112)) 914px, rgba(4, 20, 38, 0) 924px);
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) -41px, rgba(0, 0, 0, 0.0112) -31px, rgba(0, 0, 0, 0.0430) -21px, rgba(0, 0, 0, 0.0923) -11px, rgba(0, 0, 0, 0.1562) -1px, rgba(0, 0, 0, 0.2319) 9px, rgba(0, 0, 0, 0.3164) 19px, rgba(0, 0, 0, 0.4067) 29px, rgba(0, 0, 0, 0.5000) 39px, rgba(0, 0, 0, 0.5933) 49px, rgba(0, 0, 0, 0.6836) 59px, rgba(0, 0, 0, 0.7681) 69px, rgba(0, 0, 0, 0.8438) 79px, rgba(0, 0, 0, 0.9077) 89px, rgba(0, 0, 0, 0.9570) 99px, rgba(0, 0, 0, 0.9888) 109px, rgb(0, 0, 0) 119px, rgb(0, 0, 0) 530px, rgba(0, 0, 0, 0.9888) 540px, rgba(0, 0, 0, 0.9570) 550px, rgba(0, 0, 0, 0.9077) 560px, rgba(0, 0, 0, 0.8438) 570px, rgba(0, 0, 0, 0.7681) 580px, rgba(0, 0, 0, 0.6836) 590px, rgba(0, 0, 0, 0.5933) 600px, rgba(0, 0, 0, 0.5000) 610px, rgba(0, 0, 0, 0.4067) 620px, rgba(0, 0, 0, 0.3164) 630px, rgba(0, 0, 0, 0.2319) 640px, rgba(0, 0, 0, 0.1562) 650px, rgba(0, 0, 0, 0.0923) 660px, rgba(0, 0, 0, 0.0430) 670px, rgba(0, 0, 0, 0.0112) 680px, rgba(0, 0, 0, 0) 690px);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) -41px, rgba(0, 0, 0, 0.0112) -31px, rgba(0, 0, 0, 0.0430) -21px, rgba(0, 0, 0, 0.0923) -11px, rgba(0, 0, 0, 0.1562) -1px, rgba(0, 0, 0, 0.2319) 9px, rgba(0, 0, 0, 0.3164) 19px, rgba(0, 0, 0, 0.4067) 29px, rgba(0, 0, 0, 0.5000) 39px, rgba(0, 0, 0, 0.5933) 49px, rgba(0, 0, 0, 0.6836) 59px, rgba(0, 0, 0, 0.7681) 69px, rgba(0, 0, 0, 0.8438) 79px, rgba(0, 0, 0, 0.9077) 89px, rgba(0, 0, 0, 0.9570) 99px, rgba(0, 0, 0, 0.9888) 109px, rgb(0, 0, 0) 119px, rgb(0, 0, 0) 530px, rgba(0, 0, 0, 0.9888) 540px, rgba(0, 0, 0, 0.9570) 550px, rgba(0, 0, 0, 0.9077) 560px, rgba(0, 0, 0, 0.8438) 570px, rgba(0, 0, 0, 0.7681) 580px, rgba(0, 0, 0, 0.6836) 590px, rgba(0, 0, 0, 0.5933) 600px, rgba(0, 0, 0, 0.5000) 610px, rgba(0, 0, 0, 0.4067) 620px, rgba(0, 0, 0, 0.3164) 630px, rgba(0, 0, 0, 0.2319) 640px, rgba(0, 0, 0, 0.1562) 650px, rgba(0, 0, 0, 0.0923) 660px, rgba(0, 0, 0, 0.0430) 670px, rgba(0, 0, 0, 0.0112) 680px, rgba(0, 0, 0, 0) 690px);
  }
}

@media (max-width: 767px) {
  [data-page="a-propos"] [data-section="humain"]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: linear-gradient(90deg, rgba(4, 20, 38, 0) -141px, rgb(4 20 38 / calc(var(--voile) * 0.0112)) -131px, rgb(4 20 38 / calc(var(--voile) * 0.0430)) -121px, rgb(4 20 38 / calc(var(--voile) * 0.0923)) -111px, rgb(4 20 38 / calc(var(--voile) * 0.1562)) -101px, rgb(4 20 38 / calc(var(--voile) * 0.2319)) -91px, rgb(4 20 38 / calc(var(--voile) * 0.3164)) -81px, rgb(4 20 38 / calc(var(--voile) * 0.4067)) -71px, rgb(4 20 38 / calc(var(--voile) * 0.5000)) -61px, rgb(4 20 38 / calc(var(--voile) * 0.5933)) -51px, rgb(4 20 38 / calc(var(--voile) * 0.6836)) -41px, rgb(4 20 38 / calc(var(--voile) * 0.7681)) -31px, rgb(4 20 38 / calc(var(--voile) * 0.8438)) -21px, rgb(4 20 38 / calc(var(--voile) * 0.9077)) -11px, rgb(4 20 38 / calc(var(--voile) * 0.9570)) -1px, rgb(4 20 38 / calc(var(--voile) * 0.9888)) 9px, rgb(4 20 38 / var(--voile)) 19px, rgb(4 20 38 / var(--voile)) 371px, rgb(4 20 38 / calc(var(--voile) * 0.9888)) 381px, rgb(4 20 38 / calc(var(--voile) * 0.9570)) 391px, rgb(4 20 38 / calc(var(--voile) * 0.9077)) 401px, rgb(4 20 38 / calc(var(--voile) * 0.8438)) 411px, rgb(4 20 38 / calc(var(--voile) * 0.7681)) 421px, rgb(4 20 38 / calc(var(--voile) * 0.6836)) 431px, rgb(4 20 38 / calc(var(--voile) * 0.5933)) 441px, rgb(4 20 38 / calc(var(--voile) * 0.5000)) 451px, rgb(4 20 38 / calc(var(--voile) * 0.4067)) 461px, rgb(4 20 38 / calc(var(--voile) * 0.3164)) 471px, rgb(4 20 38 / calc(var(--voile) * 0.2319)) 481px, rgb(4 20 38 / calc(var(--voile) * 0.1562)) 491px, rgb(4 20 38 / calc(var(--voile) * 0.0923)) 501px, rgb(4 20 38 / calc(var(--voile) * 0.0430)) 511px, rgb(4 20 38 / calc(var(--voile) * 0.0112)) 521px, rgba(4, 20, 38, 0) 531px);
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) -81px, rgba(0, 0, 0, 0.0112) -71px, rgba(0, 0, 0, 0.0430) -61px, rgba(0, 0, 0, 0.0923) -51px, rgba(0, 0, 0, 0.1562) -41px, rgba(0, 0, 0, 0.2319) -31px, rgba(0, 0, 0, 0.3164) -21px, rgba(0, 0, 0, 0.4067) -11px, rgba(0, 0, 0, 0.5000) -1px, rgba(0, 0, 0, 0.5933) 9px, rgba(0, 0, 0, 0.6836) 19px, rgba(0, 0, 0, 0.7681) 29px, rgba(0, 0, 0, 0.8438) 39px, rgba(0, 0, 0, 0.9077) 49px, rgba(0, 0, 0, 0.9570) 59px, rgba(0, 0, 0, 0.9888) 69px, rgb(0, 0, 0) 79px, rgb(0, 0, 0) 747px, rgba(0, 0, 0, 0.9888) 757px, rgba(0, 0, 0, 0.9570) 767px, rgba(0, 0, 0, 0.9077) 777px, rgba(0, 0, 0, 0.8438) 787px, rgba(0, 0, 0, 0.7681) 797px, rgba(0, 0, 0, 0.6836) 807px, rgba(0, 0, 0, 0.5933) 817px, rgba(0, 0, 0, 0.5000) 827px, rgba(0, 0, 0, 0.4067) 837px, rgba(0, 0, 0, 0.3164) 847px, rgba(0, 0, 0, 0.2319) 857px, rgba(0, 0, 0, 0.1562) 867px, rgba(0, 0, 0, 0.0923) 877px, rgba(0, 0, 0, 0.0430) 887px, rgba(0, 0, 0, 0.0112) 897px, rgba(0, 0, 0, 0) 907px);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) -81px, rgba(0, 0, 0, 0.0112) -71px, rgba(0, 0, 0, 0.0430) -61px, rgba(0, 0, 0, 0.0923) -51px, rgba(0, 0, 0, 0.1562) -41px, rgba(0, 0, 0, 0.2319) -31px, rgba(0, 0, 0, 0.3164) -21px, rgba(0, 0, 0, 0.4067) -11px, rgba(0, 0, 0, 0.5000) -1px, rgba(0, 0, 0, 0.5933) 9px, rgba(0, 0, 0, 0.6836) 19px, rgba(0, 0, 0, 0.7681) 29px, rgba(0, 0, 0, 0.8438) 39px, rgba(0, 0, 0, 0.9077) 49px, rgba(0, 0, 0, 0.9570) 59px, rgba(0, 0, 0, 0.9888) 69px, rgb(0, 0, 0) 79px, rgb(0, 0, 0) 747px, rgba(0, 0, 0, 0.9888) 757px, rgba(0, 0, 0, 0.9570) 767px, rgba(0, 0, 0, 0.9077) 777px, rgba(0, 0, 0, 0.8438) 787px, rgba(0, 0, 0, 0.7681) 797px, rgba(0, 0, 0, 0.6836) 807px, rgba(0, 0, 0, 0.5933) 817px, rgba(0, 0, 0, 0.5000) 827px, rgba(0, 0, 0, 0.4067) 837px, rgba(0, 0, 0, 0.3164) 847px, rgba(0, 0, 0, 0.2319) 857px, rgba(0, 0, 0, 0.1562) 867px, rgba(0, 0, 0, 0.0923) 877px, rgba(0, 0, 0, 0.0430) 887px, rgba(0, 0, 0, 0.0112) 897px, rgba(0, 0, 0, 0) 907px);
  }
}

[data-page="a-propos"] [data-section="humain"] .conteneur::before {
  content: none;
}

[data-page="a-propos"] [data-section="humain"] > img.section__fond {
  filter: brightness(1.35);
  object-position: 75% 25%;
}

}