@layer ancien {
/* 50-formations.css — page Formations (tâche 6, lot 3c) : sections « entreprise », « conférences » et « bénéfices »
   (SPEC § 8). Tous les sélecteurs sont bornés à la page ([data-page="formations"]). Hero et CTA : lot 2.
   A-23 (maquette « MAQUETTE SITE PAGE FORMATION.png », 793 px = 1440 : facteur 1,816) — valeurs retenues, au tableau des
   écarts du rapport du lot 3c : grilles de cartes larges de min(1340, page − 64) ≥ 1200 (maquette 1339) et bénéfices
   min(1300, …) (maquette ≈ 1296) ; rayon des cartes 12 (spec 18) ; entreprise : pastille 88 px (spec 56) à 20 px du bord,
   12 px sous l'image, icône blanche 56, corps en dégradé vertical #011C55 → #001131 (maquette ; contraste prouvé sur les
   pixels rendus, A-27), marges 32 / 32 / 28, texte → puces 32 (spec 16), puces → bouton ≥ 32 (spec 28) ; puces : icône
   24 px (spec 18), disque lavande et coche blanche (entreprise), cercle lavande au trait (conférences), écart 18, pas 35 ;
   conférences : image sur 32 % (spec 40 %), écart des cartes 20, bordure gris-bleu, marges 28, pastille 64 px à gauche
   du H3 (écart 20), titre → sous-titre 16 ; bénéfices : icônes 64 px (spec 44) bleu uni #0041FF à gauche du chiffre,
   filets lavande en dégradé vertical.
   Tour de correction 1 (rapport § 14) : typographie relevée (I-1 : surtitres 18 / 18 / 15, H3 des cartes
   « entreprise » 28, textes et puces des cartes 17, libellés des chiffres 18 ; spec 13 / 22 / 15 / 15) ; couleur des
   surtitres ; pastille de chaque carte à sa couleur (I-6 : violette pour « Intégrer l'IA ») ; trait de chaque surtitre
   (83 / 40 / 66) ; écart en-tête → grille de chaque section (37 / 31 / 56 ; spec 64). */

/* ---------- Surtitres des 3 sections (I-1, I-6), relevés sur la maquette : entreprise et conférences 18 px, espacement
   4 ; bénéfices 15 px, espacement 3 (1 px de moins en mobile) ; couleur des titres (--titre-sur-clair sur clair,
   --texte-principal sur sombre ; spec #3B3F8C / #B7C4D8) ; trait de chaque section et son écart au texte (20 / 16 /
   18 ; spec 14). ---------- */
[data-page="formations"] :is([data-section="entreprise"], [data-section="conferences"]) .surtitre {
  font-size: 18px;
  letter-spacing: 4px;
}

[data-page="formations"] [data-section="benefices"] .surtitre {
  font-size: 15px;
}

[data-page="formations"] :is([data-section="entreprise"], [data-section="benefices"]) .surtitre {
  color: var(--titre-sur-clair);
}

[data-page="formations"] [data-section="conferences"] .surtitre {
  color: var(--texte-principal);
}

[data-page="formations"] [data-section="entreprise"] .surtitre {
  gap: 20px;
}

[data-page="formations"] [data-section="entreprise"] .surtitre::before {
  width: 83px;
}

[data-page="formations"] [data-section="conferences"] .surtitre {
  gap: 16px;
}

[data-page="formations"] [data-section="conferences"] .surtitre::before {
  width: 40px;
}

[data-page="formations"] [data-section="benefices"] .surtitre {
  gap: 18px;
}

[data-page="formations"] [data-section="benefices"] .surtitre::before {
  width: 66px;
}

/* Écart en-tête → grille relevé sur chaque section (I-6 ; spec 64). */
[data-page="formations"] [data-section="entreprise"] .conteneur > .entete-deux + .grille {
  margin-top: 37px;
}

[data-page="formations"] [data-section="conferences"] .conteneur > .entete-deux + .grille {
  margin-top: 31px;
}

[data-page="formations"] [data-section="benefices"] .conteneur > .entete-deux + .grille {
  margin-top: 56px;
}

/* ---------- En-tête de section en 2 colonnes (§ 8) : surtitre + H2 | lead ; côte à côte ≥ 1000 px (la colonne du titre
   prend la largeur de son H2, le lead le reste, 320 px au moins, centrés verticalement, écart 48), empilés dessous. */
[data-page="formations"] .entete-deux {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--espace-titre-texte);
}

[data-page="formations"] .entete-deux__titre > .surtitre + h2 {
  margin-top: var(--espace-surtitre-titre);
}

@media (min-width: 1000px) {
  [data-page="formations"] .entete-deux {
    grid-template-columns: auto minmax(320px, 1fr);
    column-gap: 48px;
    align-items: center;
  }
}

/* ---------- Grilles (§ 7.4) : entreprise 3 colonnes ≥ 1000 ; conférences 2 colonnes ≥ 768 ; bénéfices : .grille--4.
   A-23 : élargies au-delà du conteneur de 1200 px à partir de 1200 px, comme sur la maquette. */
[data-page="formations"] .grille--formations {
  grid-template-columns: minmax(0, 1fr);
}

[data-page="formations"] .grille--conferences {
  grid-template-columns: minmax(0, 1fr);
  column-gap: 20px;
}

@media (min-width: 768px) {
  [data-page="formations"] .grille--conferences {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  [data-page="formations"] .grille--formations {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  [data-page="formations"] :is(.grille--formations, .grille--conferences) {
    margin-left: calc((100% - min(1340px, 100vw - 64px)) / 2);
    margin-right: calc((100% - min(1340px, 100vw - 64px)) / 2);
  }

  [data-page="formations"] .grille--chiffres {
    margin-left: calc((100% - min(1300px, 100vw - 64px)) / 2);
    margin-right: calc((100% - min(1300px, 100vw - 64px)) / 2);
  }
}

/* ---------- Corps des cartes (communs aux deux sortes) : textes sur sombre (§ 4.2), écarts § 4.2 et A-23. ---------- */
[data-page="formations"] .carte__corps {
  display: flex;
  flex-direction: column;
}

[data-page="formations"] .carte__corps h3 {
  color: var(--texte-principal);
}

[data-page="formations"] .carte__corps .sous-titre-carte {
  color: var(--sous-titre-sur-sombre);
}

[data-page="formations"] .carte__corps :is(p.texte-carte, .puces) {
  color: var(--texte-secondaire);
  font-size: 17px;
}

[data-page="formations"] .carte__corps > h3 + .sous-titre-carte {
  margin-top: var(--espace-titre-sous-titre);
}

[data-page="formations"] .carte__corps > .carte__titre + .sous-titre-carte {
  margin-top: 16px;
}

[data-page="formations"] .carte__corps > .sous-titre-carte + .texte-carte {
  margin-top: var(--espace-titre-texte-carte);
}

[data-page="formations"] .carte__corps > .texte-carte + .puces {
  margin-top: 32px;
}

/* Bouton aligné en bas de la carte (§ 8), au moins 32 px sous les puces. */
[data-page="formations"] .carte__corps > .boutons {
  margin-top: auto;
  padding-top: 32px;
}

/* Pastille d'icône : carré arrondi à liseré clair, icône blanche (maquette) ; chaque carte a la couleur relevée sur la
   maquette, du haut vers le bas de son intérieur (I-6) : bleu nuit, sauf « Intégrer l'IA », violette. */
[data-page="formations"] .pastille {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(120, 150, 255, 0.45);
}

[data-page="formations"] [data-section="entreprise"] [data-bloc="1"] .pastille {
  background-image: linear-gradient(180deg, #04326D 0%, #053069 100%);
}

[data-page="formations"] [data-section="entreprise"] [data-bloc="2"] .pastille {
  background-image: linear-gradient(180deg, #4F54C8 0%, #0E379B 100%);
}

[data-page="formations"] [data-section="entreprise"] [data-bloc="3"] .pastille {
  background-image: linear-gradient(180deg, #0B2C86 0%, #082C83 100%);
}

[data-page="formations"] [data-section="conferences"] [data-bloc="1"] .pastille {
  background-image: linear-gradient(180deg, #032A85 0%, #0E2A79 100%);
}

[data-page="formations"] [data-section="conferences"] [data-bloc="2"] .pastille {
  background-image: linear-gradient(180deg, #032A82 0%, #0E2B7A 100%);
}

[data-page="formations"] .pastille .icone {
  stroke: #FFFFFF;
}

/* Puces (§ 7.4) : <ul>, chaque <li> précédé de circle-check ; 24 px, à 18 px du texte, pas de 35 px (A-23). */
[data-page="formations"] .puces {
  display: grid;
  row-gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-page="formations"] .puces li {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

[data-page="formations"] .puces .icone {
  flex: none;
  width: 24px;
  height: 24px;
}

[data-page="formations"] .puces .icone path {
  stroke: #FFFFFF;
}

[data-page="formations"] .carte--formation .puces .icone circle {
  fill: #7880EA;
  stroke: none;
}

[data-page="formations"] .carte--conference .puces .icone circle {
  fill: none;
  stroke: #A9AEFA;
}

/* ---------- Entreprise : 3 cartes, image 220 px en haut, pastille 88 px à cheval, corps bleu nuit. ---------- */
[data-page="formations"] .carte--formation {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(11, 20, 80, 0.08);
}

[data-page="formations"] .carte--formation .carte__media {
  position: relative;
  flex: none;
}

[data-page="formations"] .carte--formation .carte__image {
  width: 100%;
  height: 220px;
  border-radius: 12px 12px 0 0;
  object-fit: cover;
}

[data-page="formations"] .carte--formation .pastille {
  position: absolute;
  left: 20px;
  bottom: -12px;
  z-index: 1;
  width: 88px;
  height: 88px;
  border-radius: 16px;
}

[data-page="formations"] .carte--formation .pastille .icone {
  width: 56px;
  height: 56px;
}

/* Corps : dégradé vertical de la maquette (I-2) ; H3 à 28 px (26 tablette, 25 mobile ; I-1). */
[data-page="formations"] .carte--formation .carte__corps {
  flex: 1 1 auto;
  padding: 32px 32px 28px;
  border-radius: 0 0 12px 12px;
  background-image: linear-gradient(180deg, #011C55 0%, #001131 100%);
}

[data-page="formations"] .carte--formation .carte__corps > h3 {
  font-size: 28px;
}

/* ---------- Conférences : 2 cartes horizontales (image à gauche sur 32 % ≥ 1000, au-dessus en dessous). ---------- */
[data-page="formations"] .carte--conference {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid rgba(140, 170, 230, 0.22);
  border-radius: 12px;
  background-color: var(--fond-carte-sombre);
}

[data-page="formations"] .carte--conference .carte__image {
  width: 100%;
  height: 220px;
  border-radius: 11px 11px 0 0;
  object-fit: cover;
}

[data-page="formations"] .carte--conference .carte__corps {
  padding: 28px;
}

[data-page="formations"] .carte__titre {
  display: flex;
  align-items: center;
  gap: 20px;
}

[data-page="formations"] .carte--conference .pastille {
  width: 64px;
  height: 64px;
  border-radius: 12px;
}

[data-page="formations"] .carte--conference .pastille .icone {
  width: 40px;
  height: 40px;
}

@media (min-width: 1000px) {
  [data-page="formations"] .carte--conference {
    grid-template-columns: 32% minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }

  [data-page="formations"] .carte--conference .carte__image {
    height: 100%;
    border-radius: 11px 0 0 11px;
  }
}

/* ---------- Bénéfices : 4 chiffres (§ 7.4) — icône à gauche (à la ligne faute de place), chiffre en dégradé clair,
   libellé dessous ; filets verticaux entre colonnes ≥ 1200. ---------- */
[data-page="formations"] .grille--chiffres {
  row-gap: 40px;
}

[data-page="formations"] .chiffre-bloc {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: 24px;
  row-gap: 12px;
}

[data-page="formations"] .chiffre-bloc > .icone {
  flex: none;
  width: 64px;
  height: 64px;
  margin-top: 8px;
  stroke: #0041FF;
}

[data-page="formations"] .chiffre-bloc__texte {
  flex: 1 1 0;
}

/* Style Chiffre § 4.2 (600, 56 / 46 / 38 px, 1,1, −1 px), une ligne ; le dégradé clair (§ 4.1 ; 07-sections.css,
   section blanche) est porté par le <span class="degrade" data-compteur> que le paragraphe enveloppe (M-1). */
[data-page="formations"] .chiffre {
  width: fit-content;
  font-size: 56px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -1px;
  white-space: nowrap;
}

/* Libellé sous le chiffre : 18 px (maquette 18,0–18,7 ; spec 15 ; I-1). */
[data-page="formations"] .chiffre + .texte-carte {
  margin-top: 4px;
  font-size: 18px;
}

@media (min-width: 1200px) {
  [data-page="formations"] .grille--chiffres {
    column-gap: 0;
  }

  [data-page="formations"] .chiffre-bloc {
    padding: 0 16px 0 32px;
  }

  [data-page="formations"] .chiffre-bloc:first-child {
    padding-left: 0;
  }

  [data-page="formations"] .chiffre-bloc:last-child {
    padding-right: 0;
  }

  [data-page="formations"] .chiffre-bloc + .chiffre-bloc {
    border-left: 1px solid;
    border-image: linear-gradient(180deg, rgba(119, 118, 255, 0) 0%, rgba(119, 118, 255, 0.35) 50%, rgba(119, 118, 255, 0) 100%) 1;
  }
}

@media (max-width: 1199px) {
  [data-page="formations"] .chiffre {
    font-size: 46px;
  }

  [data-page="formations"] .carte--formation .carte__corps > h3 {
    font-size: 26px;
  }
}

@media (max-width: 767px) {
  [data-page="formations"] .carte--formation .carte__corps,
  [data-page="formations"] .carte--conference .carte__corps {
    padding: 24px;
  }

  [data-page="formations"] .chiffre {
    font-size: 38px;
  }

  [data-page="formations"] .carte--formation .carte__corps > h3 {
    font-size: 25px;
  }

  [data-page="formations"] :is([data-section="entreprise"], [data-section="conferences"]) .surtitre {
    font-size: 17px;
  }

  [data-page="formations"] [data-section="benefices"] .surtitre {
    font-size: 14px;
  }
}

/* ---------- Renfort A-27 derrière l'en-tête des conférences (lot 5, correction 2). Avec les textes en graisse 500 (A-33)
   et l'image du fond rendue nette (sizes à la largeur rendue par cover), le pire pixel de « Explorez les opportunités
   d'un monde en transformation. » (teinte violette du dégradé) tombait à 2,81:1 à 1440 (seuil 3), sur l'image sous le
   voile § 6 seul (0,72). A-27 : on renforce le voile, jamais une tolérance. Le voile § 6 reste 0,72 (couleur de fond du
   ::before) ; ce renfort s'y ajoute en haut de la section, derrière l'en-tête (0,4 jusqu'à 440 px : bas de l'en-tête à
   329 / 368 / 416 px du haut de la section à 1440 / 820 / 390), puis fondu jusqu'à 560 px. ---------- */
[data-page="formations"] [data-section="conferences"]::before {
  background-image: linear-gradient(180deg, rgba(4, 20, 38, 0.4) 0px, rgba(4, 20, 38, 0.4) 440px, rgba(4, 20, 38, 0) 560px);
}

/* ---------- Voiles du hero et du CTA comme la maquette (lot 5, correction 2, point 5 ; A-23 ; A-27 « on renforce le
   voile »). À partir de 1200 px, une couche rgba(4, 20, 38, A) s'ajoute au voile du § 6 (::before, inchangé) : uniforme
   sous tous les caractères du bloc de texte (bouton exclu), puis fondue sur 200 px ; l'image reste visible au-delà.
   A est calculé pour que la couleur moyenne sous les caractères ait la luminance du fond de la maquette
   (tests/voiles.test.mjs ; .contrat/site-2026/l5/scripts/c2-alphas.py ; rapport du lot 5 § 12) :
   hero 0,01719 → 0,00882 (maquette) avec A = 0,75 ; CTA 0,02725 → 0,01603 avec A = 0,44. Caractères relevés à 1440
   jusqu'à 742 (hero) et 744 px (CTA) du bord gauche du conteneur (50 % − 600 px) : uniforme jusqu'à + 60 px. ---------- */
@media (min-width: 1200px) {
  [data-page="formations"] .hero::after,
  [data-page="formations"] .cta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
  }

  [data-page="formations"] .hero::after {
    background-image: linear-gradient(90deg, rgba(4, 20, 38, 0.75) 0%, rgba(4, 20, 38, 0.75) calc(50% + 202px), rgba(4, 20, 38, 0) calc(50% + 402px));
  }

  [data-page="formations"] .cta::after {
    background-image: linear-gradient(90deg, rgba(4, 20, 38, 0.44) 0%, rgba(4, 20, 38, 0.44) calc(50% + 204px), rgba(4, 20, 38, 0) calc(50% + 404px));
  }
}

/* ========== Tour 3 du lot 5 : fidélité à la maquette (A-01 v5 ; valeurs : comparaison-maquette.md, à 1440 ;
   proportion de la spec à 820 et 390). C1 (P2) H1 du hero 51 px ; C3 (P3) H2 des sections 43 / 46 / 42 px ;
   C4 (P2) H2 du CTA 40 px. Texte du CTA (C5, T5a) : 08-cta.css. ========== */
[data-page="formations"] .hero h1 {
  font-size: 51px;
}

[data-page="formations"] [data-section="entreprise"] h2 {
  font-size: 43px;
}

[data-page="formations"] [data-section="conferences"] h2 {
  font-size: 46px;
}

[data-page="formations"] [data-section="benefices"] h2 {
  font-size: 42px;
}

[data-page="formations"] [data-section="cta"] h2 {
  font-size: 40px;
}

@media (max-width: 1199px) {
  [data-page="formations"] .hero h1 { font-size: 41px; } /* H1 48 */
  [data-page="formations"] [data-section="entreprise"] h2 { font-size: 36px; } /* H2 40 */
  [data-page="formations"] [data-section="conferences"] h2 { font-size: 38px; }
  [data-page="formations"] [data-section="benefices"] h2 { font-size: 35px; }
  [data-page="formations"] [data-section="cta"] h2 { font-size: 33px; }
}

@media (max-width: 767px) {
  [data-page="formations"] .hero h1 { font-size: 31px; } /* H1 36 */
  [data-page="formations"] [data-section="entreprise"] h2 { font-size: 27px; } /* H2 30 */
  [data-page="formations"] [data-section="conferences"] h2 { font-size: 29px; }
  [data-page="formations"] [data-section="benefices"] h2 { font-size: 26px; }
  [data-page="formations"] [data-section="cta"] h2 { font-size: 25px; }
}

/* ---------- 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,02374 → 0,00882 à 820 (A = 0,83) ; à 390, 0,01629 (avec la couche
   uniforme 0,5 du tour 3, remplacée) → 0,00882 (A cumulé 0,87) ; CTA 0,04733 → 0,01603 à 820 (0,64), 0,04110 → 0,01603
   à 390 (0,60). ---------- */
@media (min-width: 768px) and (max-width: 1199px) {
  [data-page="formations"] .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(180deg, rgba(4, 20, 38, 0) 13px, rgba(4, 20, 38, 0.475) 173px, rgba(4, 20, 38, 0.95) 213px, rgba(4, 20, 38, 0.95) 533px, rgba(4, 20, 38, 0.475) 573px, rgba(4, 20, 38, 0) 733px);
  }

  [data-page="formations"] .cta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(180deg, rgba(4, 20, 38, 0) -108px, rgba(4, 20, 38, 0.223) 12px, rgba(4, 20, 38, 0.89) 52px, rgba(4, 20, 38, 0.89) 353px, rgba(4, 20, 38, 0.223) 393px, rgba(4, 20, 38, 0) 513px);
  }
}

@media (max-width: 767px) {
  [data-page="formations"] .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(180deg, rgba(4, 20, 38, 0) -85px, rgba(4, 20, 38, 0.475) 75px, rgba(4, 20, 38, 0.95) 115px, rgba(4, 20, 38, 0.95) 463px, rgba(4, 20, 38, 0.475) 503px, rgba(4, 20, 38, 0) 663px);
  }

  [data-page="formations"] .cta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(180deg, rgba(4, 20, 38, 0) -121px, rgba(4, 20, 38, 0.228) -1px, rgba(4, 20, 38, 0.91) 39px, rgba(4, 20, 38, 0.91) 420px, rgba(4, 20, 38, 0.228) 460px, rgba(4, 20, 38, 0) 580px); /* 0,74 (cadrage 80 %, A-37) → 0,91 (A-38, tour 5) */
  }
}

/* ---------- Photos comme la maquette (A-36, SPEC v4.12 § 9 ; lot 5, tour 4) ---------- */
/* « Comprendre l'IA » (A-39, lot 5, tour 6) : Unknown-30 (main humaine et main de robot), la source la plus proche de
   la maquette qui entre dans la lumière de la maquette (0,7–1,3), à son meilleur cadrage (option C de
   absentes-formations-comprendre-c6.png) ; « Intégrer l'IA » : la photo recadrée sur la main, les panneaux et le
   portable (images.json). */
[data-page="formations"] .carte--formation[data-bloc="1"] .carte__image {
  object-position: 25% 25%;
}

/* CTA (randonneur absent, A-37 : Unknown-33, l'homme seul à droite, la plus proche) : sous 1000 px, l'homme reste
   entier et à droite, comme sur le CTA de Contact (72 % de 768 à 999 px, 80 % en dessous). */
@media (max-width: 999px) {
  [data-page="formations"] [data-section="cta"] .cta__image {
    object-position: 72% 50%;
  }
}

@media (max-width: 767px) {
  [data-page="formations"] [data-section="cta"] .cta__image {
    object-position: 80% 50%;
  }
}

/* Formation sur mesure : Unknown-13 recadrée sur le formateur et l'écran « cerveau » (images.json), tête entière. */
[data-page="formations"] .carte--formation[data-bloc="3"] .carte__image {
  object-position: 50% 30%;
}

/* Fond des conférences : le ciel étoilé du haut de la source, comme la maquette (fond presque uni). */
[data-page="formations"] [data-section="conferences"] > .section__fond {
  object-position: 50% 0;
}

/* Cartes : « Conférences IA », la Terre et le conférencier ; « Sensibilisation », l'homme pensif (à droite). */
[data-page="formations"] .carte--conference[data-bloc="1"] .carte__image {
  object-position: 40% 50%;
}

[data-page="formations"] .carte--conference[data-bloc="2"] .carte__image {
  object-position: 68% 50%;
}

/* ---------- 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.91 / 0.93 / 0.94 (1440 / 820 / 390), fondu smoothstep sur 240 px au-delà des caractères + 0 px jusqu'à 0, puis 0 au bord droit ; image brightness(1.35) ; voile bas du § 6 seul. */
[data-page="formations"] .hero {
  --voile: 0.91;
}

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

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

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

@media (min-width: 1200px) {
  [data-page="formations"] .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% + 34px), rgb(4 20 38 / calc(var(--voile) * 0.9949)) calc(50% + 44px), rgb(4 20 38 / calc(var(--voile) * 0.9803)) calc(50% + 54px), rgb(4 20 38 / calc(var(--voile) * 0.9570)) calc(50% + 64px), rgb(4 20 38 / calc(var(--voile) * 0.9259)) calc(50% + 74px), rgb(4 20 38 / calc(var(--voile) * 0.8879)) calc(50% + 84px), rgb(4 20 38 / calc(var(--voile) * 0.8438)) calc(50% + 94px), rgb(4 20 38 / calc(var(--voile) * 0.7944)) calc(50% + 104px), rgb(4 20 38 / calc(var(--voile) * 0.7407)) calc(50% + 114px), rgb(4 20 38 / calc(var(--voile) * 0.6836)) calc(50% + 124px), rgb(4 20 38 / calc(var(--voile) * 0.6238)) calc(50% + 134px), rgb(4 20 38 / calc(var(--voile) * 0.5624)) calc(50% + 144px), rgb(4 20 38 / calc(var(--voile) * 0.5000)) calc(50% + 154px), rgb(4 20 38 / calc(var(--voile) * 0.4376)) calc(50% + 164px), rgb(4 20 38 / calc(var(--voile) * 0.3762)) calc(50% + 174px), rgb(4 20 38 / calc(var(--voile) * 0.3164)) calc(50% + 184px), rgb(4 20 38 / calc(var(--voile) * 0.2593)) calc(50% + 194px), rgb(4 20 38 / calc(var(--voile) * 0.2056)) calc(50% + 204px), rgb(4 20 38 / calc(var(--voile) * 0.1562)) calc(50% + 214px), rgb(4 20 38 / calc(var(--voile) * 0.1121)) calc(50% + 224px), rgb(4 20 38 / calc(var(--voile) * 0.0741)) calc(50% + 234px), rgb(4 20 38 / calc(var(--voile) * 0.0430)) calc(50% + 244px), rgb(4 20 38 / calc(var(--voile) * 0.0197)) calc(50% + 254px), rgb(4 20 38 / calc(var(--voile) * 0.0051)) calc(50% + 264px), rgba(4, 20, 38, 0) calc(50% + 274px));
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  [data-page="formations"] .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(180deg, rgba(4, 20, 38, 0) 57px, rgb(4 20 38 / calc(var(--voile) * 0.0073)) 67px, rgb(4 20 38 / calc(var(--voile) * 0.0280)) 77px, rgb(4 20 38 / calc(var(--voile) * 0.0607)) 87px, rgb(4 20 38 / calc(var(--voile) * 0.1040)) 97px, rgb(4 20 38 / calc(var(--voile) * 0.1562)) 107px, rgb(4 20 38 / calc(var(--voile) * 0.2160)) 117px, rgb(4 20 38 / calc(var(--voile) * 0.2818)) 127px, rgb(4 20 38 / calc(var(--voile) * 0.3520)) 137px, rgb(4 20 38 / calc(var(--voile) * 0.4252)) 147px, rgb(4 20 38 / calc(var(--voile) * 0.5000)) 157px, rgb(4 20 38 / calc(var(--voile) * 0.5747)) 167px, rgb(4 20 38 / calc(var(--voile) * 0.6480)) 177px, rgb(4 20 38 / calc(var(--voile) * 0.7183)) 187px, rgb(4 20 38 / calc(var(--voile) * 0.7840)) 197px, rgb(4 20 38 / calc(var(--voile) * 0.8438)) 207px, rgb(4 20 38 / calc(var(--voile) * 0.8960)) 217px, rgb(4 20 38 / calc(var(--voile) * 0.9393)) 227px, rgb(4 20 38 / calc(var(--voile) * 0.9720)) 237px, rgb(4 20 38 / calc(var(--voile) * 0.9928)) 247px, rgb(4 20 38 / var(--voile)) 257px, rgb(4 20 38 / var(--voile)) 562px, rgb(4 20 38 / calc(var(--voile) * 0.9928)) 572px, rgb(4 20 38 / calc(var(--voile) * 0.9720)) 582px, rgb(4 20 38 / calc(var(--voile) * 0.9393)) 592px, rgb(4 20 38 / calc(var(--voile) * 0.8960)) 602px, rgb(4 20 38 / calc(var(--voile) * 0.8438)) 612px, rgb(4 20 38 / calc(var(--voile) * 0.7840)) 622px, rgb(4 20 38 / calc(var(--voile) * 0.7183)) 632px, rgb(4 20 38 / calc(var(--voile) * 0.6480)) 642px, rgb(4 20 38 / calc(var(--voile) * 0.5747)) 652px, rgb(4 20 38 / calc(var(--voile) * 0.5000)) 662px, rgb(4 20 38 / calc(var(--voile) * 0.4252)) 672px, rgb(4 20 38 / calc(var(--voile) * 0.3520)) 682px, rgb(4 20 38 / calc(var(--voile) * 0.2818)) 692px, rgb(4 20 38 / calc(var(--voile) * 0.2160)) 702px, rgb(4 20 38 / calc(var(--voile) * 0.1562)) 712px, rgb(4 20 38 / calc(var(--voile) * 0.1040)) 722px, rgb(4 20 38 / calc(var(--voile) * 0.0607)) 732px, rgb(4 20 38 / calc(var(--voile) * 0.0280)) 742px, rgb(4 20 38 / calc(var(--voile) * 0.0073)) 752px, rgba(4, 20, 38, 0) 762px);
  }
}

@media (max-width: 767px) {
  [data-page="formations"] .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(180deg, rgba(4, 20, 38, 0) -41px, rgb(4 20 38 / calc(var(--voile) * 0.0073)) -31px, rgb(4 20 38 / calc(var(--voile) * 0.0280)) -21px, rgb(4 20 38 / calc(var(--voile) * 0.0607)) -11px, rgb(4 20 38 / calc(var(--voile) * 0.1040)) -1px, rgb(4 20 38 / calc(var(--voile) * 0.1562)) 9px, rgb(4 20 38 / calc(var(--voile) * 0.2160)) 19px, rgb(4 20 38 / calc(var(--voile) * 0.2818)) 29px, rgb(4 20 38 / calc(var(--voile) * 0.3520)) 39px, rgb(4 20 38 / calc(var(--voile) * 0.4252)) 49px, rgb(4 20 38 / calc(var(--voile) * 0.5000)) 59px, rgb(4 20 38 / calc(var(--voile) * 0.5747)) 69px, rgb(4 20 38 / calc(var(--voile) * 0.6480)) 79px, rgb(4 20 38 / calc(var(--voile) * 0.7183)) 89px, rgb(4 20 38 / calc(var(--voile) * 0.7840)) 99px, rgb(4 20 38 / calc(var(--voile) * 0.8438)) 109px, rgb(4 20 38 / calc(var(--voile) * 0.8960)) 119px, rgb(4 20 38 / calc(var(--voile) * 0.9393)) 129px, rgb(4 20 38 / calc(var(--voile) * 0.9720)) 139px, rgb(4 20 38 / calc(var(--voile) * 0.9928)) 149px, rgb(4 20 38 / var(--voile)) 159px, rgb(4 20 38 / var(--voile)) 488px, rgb(4 20 38 / calc(var(--voile) * 0.9928)) 498px, rgb(4 20 38 / calc(var(--voile) * 0.9720)) 508px, rgb(4 20 38 / calc(var(--voile) * 0.9393)) 518px, rgb(4 20 38 / calc(var(--voile) * 0.8960)) 528px, rgb(4 20 38 / calc(var(--voile) * 0.8438)) 538px, rgb(4 20 38 / calc(var(--voile) * 0.7840)) 548px, rgb(4 20 38 / calc(var(--voile) * 0.7183)) 558px, rgb(4 20 38 / calc(var(--voile) * 0.6480)) 568px, rgb(4 20 38 / calc(var(--voile) * 0.5747)) 578px, rgb(4 20 38 / calc(var(--voile) * 0.5000)) 588px, rgb(4 20 38 / calc(var(--voile) * 0.4252)) 598px, rgb(4 20 38 / calc(var(--voile) * 0.3520)) 608px, rgb(4 20 38 / calc(var(--voile) * 0.2818)) 618px, rgb(4 20 38 / calc(var(--voile) * 0.2160)) 628px, rgb(4 20 38 / calc(var(--voile) * 0.1562)) 638px, rgb(4 20 38 / calc(var(--voile) * 0.1040)) 648px, rgb(4 20 38 / calc(var(--voile) * 0.0607)) 658px, rgb(4 20 38 / calc(var(--voile) * 0.0280)) 668px, rgb(4 20 38 / calc(var(--voile) * 0.0073)) 678px, rgba(4, 20, 38, 0) 688px);
  }
}

[data-page="formations"] .hero__image {
  filter: brightness(1.35);
}

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

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

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

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

@media (min-width: 1200px) {
  [data-page="formations"] .cta::before {
    background-image: linear-gradient(90deg, rgba(4, 20, 38, 0.15) calc(50% - 760px), rgb(4 20 38 / calc(0.15 + (var(--voile) - 0.15) * 0.0112)) calc(50% - 750px), rgb(4 20 38 / calc(0.15 + (var(--voile) - 0.15) * 0.0430)) calc(50% - 740px), rgb(4 20 38 / calc(0.15 + (var(--voile) - 0.15) * 0.0923)) calc(50% - 730px), rgb(4 20 38 / calc(0.15 + (var(--voile) - 0.15) * 0.1562)) calc(50% - 720px), rgb(4 20 38 / calc(0.15 + (var(--voile) - 0.15) * 0.2319)) calc(50% - 710px), rgb(4 20 38 / calc(0.15 + (var(--voile) - 0.15) * 0.3164)) calc(50% - 700px), rgb(4 20 38 / calc(0.15 + (var(--voile) - 0.15) * 0.4067)) calc(50% - 690px), rgb(4 20 38 / calc(0.15 + (var(--voile) - 0.15) * 0.5000)) calc(50% - 680px), rgb(4 20 38 / calc(0.15 + (var(--voile) - 0.15) * 0.5933)) calc(50% - 670px), rgb(4 20 38 / calc(0.15 + (var(--voile) - 0.15) * 0.6836)) calc(50% - 660px), rgb(4 20 38 / calc(0.15 + (var(--voile) - 0.15) * 0.7681)) calc(50% - 650px), rgb(4 20 38 / calc(0.15 + (var(--voile) - 0.15) * 0.8438)) calc(50% - 640px), rgb(4 20 38 / calc(0.15 + (var(--voile) - 0.15) * 0.9077)) calc(50% - 630px), rgb(4 20 38 / calc(0.15 + (var(--voile) - 0.15) * 0.9570)) calc(50% - 620px), rgb(4 20 38 / calc(0.15 + (var(--voile) - 0.15) * 0.9888)) calc(50% - 610px), rgb(4 20 38 / var(--voile)) calc(50% - 600px), rgb(4 20 38 / var(--voile)) calc(50% + 151px), rgb(4 20 38 / calc(0.1 + (var(--voile) - 0.1) * 0.9888)) calc(50% + 161px), rgb(4 20 38 / calc(0.1 + (var(--voile) - 0.1) * 0.9570)) calc(50% + 171px), rgb(4 20 38 / calc(0.1 + (var(--voile) - 0.1) * 0.9077)) calc(50% + 181px), rgb(4 20 38 / calc(0.1 + (var(--voile) - 0.1) * 0.8438)) calc(50% + 191px), rgb(4 20 38 / calc(0.1 + (var(--voile) - 0.1) * 0.7681)) calc(50% + 201px), rgb(4 20 38 / calc(0.1 + (var(--voile) - 0.1) * 0.6836)) calc(50% + 211px), rgb(4 20 38 / calc(0.1 + (var(--voile) - 0.1) * 0.5933)) calc(50% + 221px), rgb(4 20 38 / calc(0.1 + (var(--voile) - 0.1) * 0.5000)) calc(50% + 231px), rgb(4 20 38 / calc(0.1 + (var(--voile) - 0.1) * 0.4067)) calc(50% + 241px), rgb(4 20 38 / calc(0.1 + (var(--voile) - 0.1) * 0.3164)) calc(50% + 251px), rgb(4 20 38 / calc(0.1 + (var(--voile) - 0.1) * 0.2319)) calc(50% + 261px), rgb(4 20 38 / calc(0.1 + (var(--voile) - 0.1) * 0.1562)) calc(50% + 271px), rgb(4 20 38 / calc(0.1 + (var(--voile) - 0.1) * 0.0923)) calc(50% + 281px), rgb(4 20 38 / calc(0.1 + (var(--voile) - 0.1) * 0.0430)) calc(50% + 291px), rgb(4 20 38 / calc(0.1 + (var(--voile) - 0.1) * 0.0112)) calc(50% + 301px), rgba(4, 20, 38, 0.1) calc(50% + 311px));
  }

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

@media (min-width: 768px) and (max-width: 1199px) {
  [data-page="formations"] .cta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(180deg, rgba(4, 20, 38, 0) -64px, rgb(4 20 38 / calc(var(--voile) * 0.0112)) -54px, rgb(4 20 38 / calc(var(--voile) * 0.0430)) -44px, rgb(4 20 38 / calc(var(--voile) * 0.0923)) -34px, rgb(4 20 38 / calc(var(--voile) * 0.1562)) -24px, rgb(4 20 38 / calc(var(--voile) * 0.2319)) -14px, rgb(4 20 38 / calc(var(--voile) * 0.3164)) -4px, rgb(4 20 38 / calc(var(--voile) * 0.4067)) 6px, rgb(4 20 38 / calc(var(--voile) * 0.5000)) 16px, rgb(4 20 38 / calc(var(--voile) * 0.5933)) 26px, rgb(4 20 38 / calc(var(--voile) * 0.6836)) 36px, rgb(4 20 38 / calc(var(--voile) * 0.7681)) 46px, rgb(4 20 38 / calc(var(--voile) * 0.8438)) 56px, rgb(4 20 38 / calc(var(--voile) * 0.9077)) 66px, rgb(4 20 38 / calc(var(--voile) * 0.9570)) 76px, rgb(4 20 38 / calc(var(--voile) * 0.9888)) 86px, rgb(4 20 38 / var(--voile)) 96px, rgb(4 20 38 / var(--voile)) 383px, rgb(4 20 38 / calc(var(--voile) * 0.9888)) 393px, rgb(4 20 38 / calc(var(--voile) * 0.9570)) 403px, rgb(4 20 38 / calc(var(--voile) * 0.9077)) 413px, rgb(4 20 38 / calc(var(--voile) * 0.8438)) 423px, rgb(4 20 38 / calc(var(--voile) * 0.7681)) 433px, rgb(4 20 38 / calc(var(--voile) * 0.6836)) 443px, rgb(4 20 38 / calc(var(--voile) * 0.5933)) 453px, rgb(4 20 38 / calc(var(--voile) * 0.5000)) 463px, rgb(4 20 38 / calc(var(--voile) * 0.4067)) 473px, rgb(4 20 38 / calc(var(--voile) * 0.3164)) 483px, rgb(4 20 38 / calc(var(--voile) * 0.2319)) 493px, rgb(4 20 38 / calc(var(--voile) * 0.1562)) 503px, rgb(4 20 38 / calc(var(--voile) * 0.0923)) 513px, rgb(4 20 38 / calc(var(--voile) * 0.0430)) 523px, rgb(4 20 38 / calc(var(--voile) * 0.0112)) 533px, rgba(4, 20, 38, 0) 543px);
  }
}

@media (max-width: 767px) {
  [data-page="formations"] .cta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(180deg, rgba(4, 20, 38, 0) -77px, rgb(4 20 38 / calc(var(--voile) * 0.0112)) -67px, rgb(4 20 38 / calc(var(--voile) * 0.0430)) -57px, rgb(4 20 38 / calc(var(--voile) * 0.0923)) -47px, rgb(4 20 38 / calc(var(--voile) * 0.1562)) -37px, rgb(4 20 38 / calc(var(--voile) * 0.2319)) -27px, rgb(4 20 38 / calc(var(--voile) * 0.3164)) -17px, rgb(4 20 38 / calc(var(--voile) * 0.4067)) -7px, rgb(4 20 38 / calc(var(--voile) * 0.5000)) 3px, rgb(4 20 38 / calc(var(--voile) * 0.5933)) 13px, rgb(4 20 38 / calc(var(--voile) * 0.6836)) 23px, rgb(4 20 38 / calc(var(--voile) * 0.7681)) 33px, rgb(4 20 38 / calc(var(--voile) * 0.8438)) 43px, rgb(4 20 38 / calc(var(--voile) * 0.9077)) 53px, rgb(4 20 38 / calc(var(--voile) * 0.9570)) 63px, rgb(4 20 38 / calc(var(--voile) * 0.9888)) 73px, rgb(4 20 38 / var(--voile)) 83px, rgb(4 20 38 / var(--voile)) 445px, rgb(4 20 38 / calc(var(--voile) * 0.9888)) 455px, rgb(4 20 38 / calc(var(--voile) * 0.9570)) 465px, rgb(4 20 38 / calc(var(--voile) * 0.9077)) 475px, rgb(4 20 38 / calc(var(--voile) * 0.8438)) 485px, rgb(4 20 38 / calc(var(--voile) * 0.7681)) 495px, rgb(4 20 38 / calc(var(--voile) * 0.6836)) 505px, rgb(4 20 38 / calc(var(--voile) * 0.5933)) 515px, rgb(4 20 38 / calc(var(--voile) * 0.5000)) 525px, rgb(4 20 38 / calc(var(--voile) * 0.4067)) 535px, rgb(4 20 38 / calc(var(--voile) * 0.3164)) 545px, rgb(4 20 38 / calc(var(--voile) * 0.2319)) 555px, rgb(4 20 38 / calc(var(--voile) * 0.1562)) 565px, rgb(4 20 38 / calc(var(--voile) * 0.0923)) 575px, rgb(4 20 38 / calc(var(--voile) * 0.0430)) 585px, rgb(4 20 38 / calc(var(--voile) * 0.0112)) 595px, rgba(4, 20, 38, 0) 605px);
  }
}

[data-page="formations"] .cta__image {
  filter: brightness(1.35);
}

/* Cartes « Intégrer » et « Sur mesure » (A-38, autres photos) : photos à 0,67 et 0,58 de la lumière des cartes de la
   maquette (c5-photos-lumiere.py), éclaircies. */
[data-page="formations"] [data-section="entreprise"] [data-bloc="2"] .carte__image,
[data-page="formations"] [data-section="entreprise"] [data-bloc="3"] .carte__image {
  filter: brightness(1.35);
}

/* formations/conferences (A-39) : voile lointain 0 ; couche sur le bloc de texte, cœur --voile 0.8 / 0.62 / 0.65, fondue en smoothstep sur 160 px (bande × masque) ; image brightness(1.15). */
[data-page="formations"] [data-section="conferences"] {
  --voile: 0.8;
}

@media (min-width: 768px) and (max-width: 1199px) {
  [data-page="formations"] [data-section="conferences"] {
    --voile: 0.62;
  }
}

@media (max-width: 767px) {
  [data-page="formations"] [data-section="conferences"] {
    --voile: 0.65;
  }
}

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

@media (min-width: 1200px) {
  [data-page="formations"] [data-section="conferences"] {
    --voile-cartes: 0.71;
  }

  [data-page="formations"] [data-section="conferences"]::before {
    background-image: linear-gradient(180deg, rgba(4, 20, 38, 0) 280px, rgb(4 20 38 / calc(var(--voile-cartes) * 0.0112)) 290px, rgb(4 20 38 / calc(var(--voile-cartes) * 0.0430)) 300px, rgb(4 20 38 / calc(var(--voile-cartes) * 0.0923)) 310px, rgb(4 20 38 / calc(var(--voile-cartes) * 0.1562)) 320px, rgb(4 20 38 / calc(var(--voile-cartes) * 0.2319)) 330px, rgb(4 20 38 / calc(var(--voile-cartes) * 0.3164)) 340px, rgb(4 20 38 / calc(var(--voile-cartes) * 0.4067)) 350px, rgb(4 20 38 / calc(var(--voile-cartes) * 0.5000)) 360px, rgb(4 20 38 / calc(var(--voile-cartes) * 0.5933)) 370px, rgb(4 20 38 / calc(var(--voile-cartes) * 0.6836)) 380px, rgb(4 20 38 / calc(var(--voile-cartes) * 0.7681)) 390px, rgb(4 20 38 / calc(var(--voile-cartes) * 0.8438)) 400px, rgb(4 20 38 / calc(var(--voile-cartes) * 0.9077)) 410px, rgb(4 20 38 / calc(var(--voile-cartes) * 0.9570)) 420px, rgb(4 20 38 / calc(var(--voile-cartes) * 0.9888)) 430px, rgb(4 20 38 / var(--voile-cartes)) 440px);
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  [data-page="formations"] [data-section="conferences"] {
    --voile-cartes: 0.51;
  }

  [data-page="formations"] [data-section="conferences"]::before {
    background-image: linear-gradient(180deg, rgba(4, 20, 38, 0) 440px, rgb(4 20 38 / calc(var(--voile-cartes) * 0.0112)) 450px, rgb(4 20 38 / calc(var(--voile-cartes) * 0.0430)) 460px, rgb(4 20 38 / calc(var(--voile-cartes) * 0.0923)) 470px, rgb(4 20 38 / calc(var(--voile-cartes) * 0.1562)) 480px, rgb(4 20 38 / calc(var(--voile-cartes) * 0.2319)) 490px, rgb(4 20 38 / calc(var(--voile-cartes) * 0.3164)) 500px, rgb(4 20 38 / calc(var(--voile-cartes) * 0.4067)) 510px, rgb(4 20 38 / calc(var(--voile-cartes) * 0.5000)) 520px, rgb(4 20 38 / calc(var(--voile-cartes) * 0.5933)) 530px, rgb(4 20 38 / calc(var(--voile-cartes) * 0.6836)) 540px, rgb(4 20 38 / calc(var(--voile-cartes) * 0.7681)) 550px, rgb(4 20 38 / calc(var(--voile-cartes) * 0.8438)) 560px, rgb(4 20 38 / calc(var(--voile-cartes) * 0.9077)) 570px, rgb(4 20 38 / calc(var(--voile-cartes) * 0.9570)) 580px, rgb(4 20 38 / calc(var(--voile-cartes) * 0.9888)) 590px, rgb(4 20 38 / var(--voile-cartes)) 600px);
  }
}

@media (max-width: 767px) {
  [data-page="formations"] [data-section="conferences"] {
    --voile-cartes: 0.7;
  }

  [data-page="formations"] [data-section="conferences"]::before {
    background-image: linear-gradient(180deg, rgba(4, 20, 38, 0) 440px, rgb(4 20 38 / calc(var(--voile-cartes) * 0.0112)) 450px, rgb(4 20 38 / calc(var(--voile-cartes) * 0.0430)) 460px, rgb(4 20 38 / calc(var(--voile-cartes) * 0.0923)) 470px, rgb(4 20 38 / calc(var(--voile-cartes) * 0.1562)) 480px, rgb(4 20 38 / calc(var(--voile-cartes) * 0.2319)) 490px, rgb(4 20 38 / calc(var(--voile-cartes) * 0.3164)) 500px, rgb(4 20 38 / calc(var(--voile-cartes) * 0.4067)) 510px, rgb(4 20 38 / calc(var(--voile-cartes) * 0.5000)) 520px, rgb(4 20 38 / calc(var(--voile-cartes) * 0.5933)) 530px, rgb(4 20 38 / calc(var(--voile-cartes) * 0.6836)) 540px, rgb(4 20 38 / calc(var(--voile-cartes) * 0.7681)) 550px, rgb(4 20 38 / calc(var(--voile-cartes) * 0.8438)) 560px, rgb(4 20 38 / calc(var(--voile-cartes) * 0.9077)) 570px, rgb(4 20 38 / calc(var(--voile-cartes) * 0.9570)) 580px, rgb(4 20 38 / calc(var(--voile-cartes) * 0.9888)) 590px, rgb(4 20 38 / var(--voile-cartes)) 600px);
  }
}

@media (min-width: 1200px) {
  [data-page="formations"] [data-section="conferences"]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: linear-gradient(90deg, rgba(4, 20, 38, 0) calc(50% - 760px), rgb(4 20 38 / calc(var(--voile) * 0.0112)) calc(50% - 750px), rgb(4 20 38 / calc(var(--voile) * 0.0430)) calc(50% - 740px), rgb(4 20 38 / calc(var(--voile) * 0.0923)) calc(50% - 730px), rgb(4 20 38 / calc(var(--voile) * 0.1562)) calc(50% - 720px), rgb(4 20 38 / calc(var(--voile) * 0.2319)) calc(50% - 710px), rgb(4 20 38 / calc(var(--voile) * 0.3164)) calc(50% - 700px), rgb(4 20 38 / calc(var(--voile) * 0.4067)) calc(50% - 690px), rgb(4 20 38 / calc(var(--voile) * 0.5000)) calc(50% - 680px), rgb(4 20 38 / calc(var(--voile) * 0.5933)) calc(50% - 670px), rgb(4 20 38 / calc(var(--voile) * 0.6836)) calc(50% - 660px), rgb(4 20 38 / calc(var(--voile) * 0.7681)) calc(50% - 650px), rgb(4 20 38 / calc(var(--voile) * 0.8438)) calc(50% - 640px), rgb(4 20 38 / calc(var(--voile) * 0.9077)) calc(50% - 630px), rgb(4 20 38 / calc(var(--voile) * 0.9570)) calc(50% - 620px), rgb(4 20 38 / calc(var(--voile) * 0.9888)) calc(50% - 610px), rgb(4 20 38 / var(--voile)) calc(50% - 600px), rgb(4 20 38 / var(--voile)) calc(50% + 553px), rgb(4 20 38 / calc(var(--voile) * 0.9888)) calc(50% + 563px), rgb(4 20 38 / calc(var(--voile) * 0.9570)) calc(50% + 573px), rgb(4 20 38 / calc(var(--voile) * 0.9077)) calc(50% + 583px), rgb(4 20 38 / calc(var(--voile) * 0.8438)) calc(50% + 593px), rgb(4 20 38 / calc(var(--voile) * 0.7681)) calc(50% + 603px), rgb(4 20 38 / calc(var(--voile) * 0.6836)) calc(50% + 613px), rgb(4 20 38 / calc(var(--voile) * 0.5933)) calc(50% + 623px), rgb(4 20 38 / calc(var(--voile) * 0.5000)) calc(50% + 633px), rgb(4 20 38 / calc(var(--voile) * 0.4067)) calc(50% + 643px), rgb(4 20 38 / calc(var(--voile) * 0.3164)) calc(50% + 653px), rgb(4 20 38 / calc(var(--voile) * 0.2319)) calc(50% + 663px), rgb(4 20 38 / calc(var(--voile) * 0.1562)) calc(50% + 673px), rgb(4 20 38 / calc(var(--voile) * 0.0923)) calc(50% + 683px), rgb(4 20 38 / calc(var(--voile) * 0.0430)) calc(50% + 693px), rgb(4 20 38 / calc(var(--voile) * 0.0112)) calc(50% + 703px), rgba(4, 20, 38, 0) calc(50% + 713px));
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) -40px, rgba(0, 0, 0, 0.0112) -30px, rgba(0, 0, 0, 0.0430) -20px, rgba(0, 0, 0, 0.0923) -10px, rgba(0, 0, 0, 0.1562) 0px, rgba(0, 0, 0, 0.2319) 10px, rgba(0, 0, 0, 0.3164) 20px, rgba(0, 0, 0, 0.4067) 30px, rgba(0, 0, 0, 0.5000) 40px, rgba(0, 0, 0, 0.5933) 50px, rgba(0, 0, 0, 0.6836) 60px, rgba(0, 0, 0, 0.7681) 70px, rgba(0, 0, 0, 0.8438) 80px, rgba(0, 0, 0, 0.9077) 90px, rgba(0, 0, 0, 0.9570) 100px, rgba(0, 0, 0, 0.9888) 110px, rgb(0, 0, 0) 120px, rgb(0, 0, 0) 327px, rgba(0, 0, 0, 0.9888) 337px, rgba(0, 0, 0, 0.9570) 347px, rgba(0, 0, 0, 0.9077) 357px, rgba(0, 0, 0, 0.8438) 367px, rgba(0, 0, 0, 0.7681) 377px, rgba(0, 0, 0, 0.6836) 387px, rgba(0, 0, 0, 0.5933) 397px, rgba(0, 0, 0, 0.5000) 407px, rgba(0, 0, 0, 0.4067) 417px, rgba(0, 0, 0, 0.3164) 427px, rgba(0, 0, 0, 0.2319) 437px, rgba(0, 0, 0, 0.1562) 447px, rgba(0, 0, 0, 0.0923) 457px, rgba(0, 0, 0, 0.0430) 467px, rgba(0, 0, 0, 0.0112) 477px, rgba(0, 0, 0, 0) 487px);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) -40px, rgba(0, 0, 0, 0.0112) -30px, rgba(0, 0, 0, 0.0430) -20px, rgba(0, 0, 0, 0.0923) -10px, rgba(0, 0, 0, 0.1562) 0px, rgba(0, 0, 0, 0.2319) 10px, rgba(0, 0, 0, 0.3164) 20px, rgba(0, 0, 0, 0.4067) 30px, rgba(0, 0, 0, 0.5000) 40px, rgba(0, 0, 0, 0.5933) 50px, rgba(0, 0, 0, 0.6836) 60px, rgba(0, 0, 0, 0.7681) 70px, rgba(0, 0, 0, 0.8438) 80px, rgba(0, 0, 0, 0.9077) 90px, rgba(0, 0, 0, 0.9570) 100px, rgba(0, 0, 0, 0.9888) 110px, rgb(0, 0, 0) 120px, rgb(0, 0, 0) 327px, rgba(0, 0, 0, 0.9888) 337px, rgba(0, 0, 0, 0.9570) 347px, rgba(0, 0, 0, 0.9077) 357px, rgba(0, 0, 0, 0.8438) 367px, rgba(0, 0, 0, 0.7681) 377px, rgba(0, 0, 0, 0.6836) 387px, rgba(0, 0, 0, 0.5933) 397px, rgba(0, 0, 0, 0.5000) 407px, rgba(0, 0, 0, 0.4067) 417px, rgba(0, 0, 0, 0.3164) 427px, rgba(0, 0, 0, 0.2319) 437px, rgba(0, 0, 0, 0.1562) 447px, rgba(0, 0, 0, 0.0923) 457px, rgba(0, 0, 0, 0.0430) 467px, rgba(0, 0, 0, 0.0112) 477px, rgba(0, 0, 0, 0) 487px);
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  [data-page="formations"] [data-section="conferences"]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: linear-gradient(90deg, rgba(4, 20, 38, 0) -128px, rgb(4 20 38 / calc(var(--voile) * 0.0112)) -118px, rgb(4 20 38 / calc(var(--voile) * 0.0430)) -108px, rgb(4 20 38 / calc(var(--voile) * 0.0923)) -98px, rgb(4 20 38 / calc(var(--voile) * 0.1562)) -88px, rgb(4 20 38 / calc(var(--voile) * 0.2319)) -78px, rgb(4 20 38 / calc(var(--voile) * 0.3164)) -68px, rgb(4 20 38 / calc(var(--voile) * 0.4067)) -58px, rgb(4 20 38 / calc(var(--voile) * 0.5000)) -48px, rgb(4 20 38 / calc(var(--voile) * 0.5933)) -38px, rgb(4 20 38 / calc(var(--voile) * 0.6836)) -28px, rgb(4 20 38 / calc(var(--voile) * 0.7681)) -18px, rgb(4 20 38 / calc(var(--voile) * 0.8438)) -8px, rgb(4 20 38 / calc(var(--voile) * 0.9077)) 2px, rgb(4 20 38 / calc(var(--voile) * 0.9570)) 12px, rgb(4 20 38 / calc(var(--voile) * 0.9888)) 22px, rgb(4 20 38 / var(--voile)) 32px, rgb(4 20 38 / var(--voile)) 757px, rgb(4 20 38 / calc(var(--voile) * 0.9888)) 767px, rgb(4 20 38 / calc(var(--voile) * 0.9570)) 777px, rgb(4 20 38 / calc(var(--voile) * 0.9077)) 787px, rgb(4 20 38 / calc(var(--voile) * 0.8438)) 797px, rgb(4 20 38 / calc(var(--voile) * 0.7681)) 807px, rgb(4 20 38 / calc(var(--voile) * 0.6836)) 817px, rgb(4 20 38 / calc(var(--voile) * 0.5933)) 827px, rgb(4 20 38 / calc(var(--voile) * 0.5000)) 837px, rgb(4 20 38 / calc(var(--voile) * 0.4067)) 847px, rgb(4 20 38 / calc(var(--voile) * 0.3164)) 857px, rgb(4 20 38 / calc(var(--voile) * 0.2319)) 867px, rgb(4 20 38 / calc(var(--voile) * 0.1562)) 877px, rgb(4 20 38 / calc(var(--voile) * 0.0923)) 887px, rgb(4 20 38 / calc(var(--voile) * 0.0430)) 897px, rgb(4 20 38 / calc(var(--voile) * 0.0112)) 907px, rgba(4, 20, 38, 0) 917px);
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) -40px, rgba(0, 0, 0, 0.0112) -30px, rgba(0, 0, 0, 0.0430) -20px, rgba(0, 0, 0, 0.0923) -10px, rgba(0, 0, 0, 0.1562) 0px, rgba(0, 0, 0, 0.2319) 10px, rgba(0, 0, 0, 0.3164) 20px, rgba(0, 0, 0, 0.4067) 30px, rgba(0, 0, 0, 0.5000) 40px, rgba(0, 0, 0, 0.5933) 50px, rgba(0, 0, 0, 0.6836) 60px, rgba(0, 0, 0, 0.7681) 70px, rgba(0, 0, 0, 0.8438) 80px, rgba(0, 0, 0, 0.9077) 90px, rgba(0, 0, 0, 0.9570) 100px, rgba(0, 0, 0, 0.9888) 110px, rgb(0, 0, 0) 120px, rgb(0, 0, 0) 361px, rgba(0, 0, 0, 0.9888) 371px, rgba(0, 0, 0, 0.9570) 381px, rgba(0, 0, 0, 0.9077) 391px, rgba(0, 0, 0, 0.8438) 401px, rgba(0, 0, 0, 0.7681) 411px, rgba(0, 0, 0, 0.6836) 421px, rgba(0, 0, 0, 0.5933) 431px, rgba(0, 0, 0, 0.5000) 441px, rgba(0, 0, 0, 0.4067) 451px, rgba(0, 0, 0, 0.3164) 461px, rgba(0, 0, 0, 0.2319) 471px, rgba(0, 0, 0, 0.1562) 481px, rgba(0, 0, 0, 0.0923) 491px, rgba(0, 0, 0, 0.0430) 501px, rgba(0, 0, 0, 0.0112) 511px, rgba(0, 0, 0, 0) 521px);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) -40px, rgba(0, 0, 0, 0.0112) -30px, rgba(0, 0, 0, 0.0430) -20px, rgba(0, 0, 0, 0.0923) -10px, rgba(0, 0, 0, 0.1562) 0px, rgba(0, 0, 0, 0.2319) 10px, rgba(0, 0, 0, 0.3164) 20px, rgba(0, 0, 0, 0.4067) 30px, rgba(0, 0, 0, 0.5000) 40px, rgba(0, 0, 0, 0.5933) 50px, rgba(0, 0, 0, 0.6836) 60px, rgba(0, 0, 0, 0.7681) 70px, rgba(0, 0, 0, 0.8438) 80px, rgba(0, 0, 0, 0.9077) 90px, rgba(0, 0, 0, 0.9570) 100px, rgba(0, 0, 0, 0.9888) 110px, rgb(0, 0, 0) 120px, rgb(0, 0, 0) 361px, rgba(0, 0, 0, 0.9888) 371px, rgba(0, 0, 0, 0.9570) 381px, rgba(0, 0, 0, 0.9077) 391px, rgba(0, 0, 0, 0.8438) 401px, rgba(0, 0, 0, 0.7681) 411px, rgba(0, 0, 0, 0.6836) 421px, rgba(0, 0, 0, 0.5933) 431px, rgba(0, 0, 0, 0.5000) 441px, rgba(0, 0, 0, 0.4067) 451px, rgba(0, 0, 0, 0.3164) 461px, rgba(0, 0, 0, 0.2319) 471px, rgba(0, 0, 0, 0.1562) 481px, rgba(0, 0, 0, 0.0923) 491px, rgba(0, 0, 0, 0.0430) 501px, rgba(0, 0, 0, 0.0112) 511px, rgba(0, 0, 0, 0) 521px);
  }
}

@media (max-width: 767px) {
  [data-page="formations"] [data-section="conferences"]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: linear-gradient(90deg, rgba(4, 20, 38, 0) -144px, rgb(4 20 38 / calc(var(--voile) * 0.0112)) -134px, rgb(4 20 38 / calc(var(--voile) * 0.0430)) -124px, rgb(4 20 38 / calc(var(--voile) * 0.0923)) -114px, rgb(4 20 38 / calc(var(--voile) * 0.1562)) -104px, rgb(4 20 38 / calc(var(--voile) * 0.2319)) -94px, rgb(4 20 38 / calc(var(--voile) * 0.3164)) -84px, rgb(4 20 38 / calc(var(--voile) * 0.4067)) -74px, rgb(4 20 38 / calc(var(--voile) * 0.5000)) -64px, rgb(4 20 38 / calc(var(--voile) * 0.5933)) -54px, rgb(4 20 38 / calc(var(--voile) * 0.6836)) -44px, rgb(4 20 38 / calc(var(--voile) * 0.7681)) -34px, rgb(4 20 38 / calc(var(--voile) * 0.8438)) -24px, rgb(4 20 38 / calc(var(--voile) * 0.9077)) -14px, rgb(4 20 38 / calc(var(--voile) * 0.9570)) -4px, rgb(4 20 38 / calc(var(--voile) * 0.9888)) 6px, rgb(4 20 38 / var(--voile)) 16px, rgb(4 20 38 / var(--voile)) 368px, rgb(4 20 38 / calc(var(--voile) * 0.9888)) 378px, rgb(4 20 38 / calc(var(--voile) * 0.9570)) 388px, rgb(4 20 38 / calc(var(--voile) * 0.9077)) 398px, rgb(4 20 38 / calc(var(--voile) * 0.8438)) 408px, rgb(4 20 38 / calc(var(--voile) * 0.7681)) 418px, rgb(4 20 38 / calc(var(--voile) * 0.6836)) 428px, rgb(4 20 38 / calc(var(--voile) * 0.5933)) 438px, rgb(4 20 38 / calc(var(--voile) * 0.5000)) 448px, rgb(4 20 38 / calc(var(--voile) * 0.4067)) 458px, rgb(4 20 38 / calc(var(--voile) * 0.3164)) 468px, rgb(4 20 38 / calc(var(--voile) * 0.2319)) 478px, rgb(4 20 38 / calc(var(--voile) * 0.1562)) 488px, rgb(4 20 38 / calc(var(--voile) * 0.0923)) 498px, rgb(4 20 38 / calc(var(--voile) * 0.0430)) 508px, rgb(4 20 38 / calc(var(--voile) * 0.0112)) 518px, rgba(4, 20, 38, 0) 528px);
    -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) 376px, rgba(0, 0, 0, 0.9888) 386px, rgba(0, 0, 0, 0.9570) 396px, rgba(0, 0, 0, 0.9077) 406px, rgba(0, 0, 0, 0.8438) 416px, rgba(0, 0, 0, 0.7681) 426px, rgba(0, 0, 0, 0.6836) 436px, rgba(0, 0, 0, 0.5933) 446px, rgba(0, 0, 0, 0.5000) 456px, rgba(0, 0, 0, 0.4067) 466px, rgba(0, 0, 0, 0.3164) 476px, rgba(0, 0, 0, 0.2319) 486px, rgba(0, 0, 0, 0.1562) 496px, rgba(0, 0, 0, 0.0923) 506px, rgba(0, 0, 0, 0.0430) 516px, rgba(0, 0, 0, 0.0112) 526px, rgba(0, 0, 0, 0) 536px);
    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) 376px, rgba(0, 0, 0, 0.9888) 386px, rgba(0, 0, 0, 0.9570) 396px, rgba(0, 0, 0, 0.9077) 406px, rgba(0, 0, 0, 0.8438) 416px, rgba(0, 0, 0, 0.7681) 426px, rgba(0, 0, 0, 0.6836) 436px, rgba(0, 0, 0, 0.5933) 446px, rgba(0, 0, 0, 0.5000) 456px, rgba(0, 0, 0, 0.4067) 466px, rgba(0, 0, 0, 0.3164) 476px, rgba(0, 0, 0, 0.2319) 486px, rgba(0, 0, 0, 0.1562) 496px, rgba(0, 0, 0, 0.0923) 506px, rgba(0, 0, 0, 0.0430) 516px, rgba(0, 0, 0, 0.0112) 526px, rgba(0, 0, 0, 0) 536px);
  }
}

[data-page="formations"] [data-section="conferences"] > img.section__fond {
  filter: brightness(1.15);
}

}