@layer ancien {
/* 10-accueil.css — sections de l'Accueil (§ 8) et composants qu'elles introduisent (§ 7.4) : cartes sombres des
   solutions, étapes de l'approche, colonnes des bénéfices, cartes blanches des engagements, tuiles des logos.
   A-23 (maquette de l'Accueil, 729 px = 1440 : facteur 1,975) — valeurs retenues, au tableau des écarts du rapport :
   icônes des solutions et des bénéfices 64 px (tracé ≈ 71–73 px, comme les avantages du hero, A-01 v4) ; écart des
   cartes des solutions 20 px (spec 24) ; cercles des étapes 56 px (spec 48), à 32 px du texte ; « IA NOVATION ? » et le
   titre de « confiance » en #075BFF ; lead des bénéfices en 600 ; « Nos engagements » 36 / 30 / 24 px (spec : style H2) ;
   cartes des engagements : rayon 12 (spec 18), marge intérieure 28 (spec 32), écart 16 (spec 24), H4 16 px en 600
   (spec 18 / 500) ; tuiles des logos 136 × 120 (spec 136 × 96), écart 24 (spec 16). */

/* ---------- Cartes (§ 7.4) ---------- */
.carte--sombre {
  --fond-section: var(--fond-secondaire);
  border: 1px solid var(--bord-carte-sombre);
  border-radius: 18px;
  background-color: var(--fond-secondaire);
}

.section .carte--sombre :is(h3, h4) {
  color: var(--texte-principal);
}

.section .carte--sombre p {
  color: var(--texte-secondaire);
}

/* Solutions : 4 cartes sombres (exception § 7.4 : --fond-secondaire, bordure 1 px) sur la section claire, contenu centré,
   icône 64 px, flèche en bas de carte. */
.grille--solutions {
  gap: 20px;
}

/* A-23 : les grilles des solutions et des engagements débordent du conteneur de 1200 px comme dans la maquette (cartes
   de 61 à 1381 px et de 51 à 1390 px à 1440 : ≈ 1320 px) ; à partir de 1200 px, largeur min(1320 px, page − 64 px). */
@media (min-width: 1200px) {
  .grille--solutions,
  .grille--engagements {
    margin-left: calc((100% - min(1320px, 100vw - 64px)) / 2);
    margin-right: calc((100% - min(1320px, 100vw - 64px)) / 2);
  }
}

.carte--solution {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px;
  text-align: center;
}

.carte--solution > .icone {
  flex: none;
  width: 64px;
  height: 64px;
}

.carte--solution > h3 {
  margin-top: var(--espace-icone-titre);
}

.carte--solution > p {
  margin-top: var(--espace-titre-texte-carte);
  margin-bottom: var(--espace-avant-bouton);
}

.carte--solution > .fleche {
  margin-top: auto;
}

/* A-23 — habillage des cartes des solutions, relevé sur la maquette (tour de correction 1, constat I-2 : couleurs du
   liseré et des icônes, l2/releves-c1/ ; tour de correction 2, I-2 maintenu : répartition, diffusion et corps,
   l2/scripts/c2-cartes-maquette.py et c2-cartes-valeurs.py → l2/releves-c2/cartes.json) :
   - liseré : bordure de 2 px (1 px de maquette) peinte par un dégradé conique qui passe par les 24 couleurs relevées le
     long du contour, chacune à son angle vu du centre (--lisere : répartition des couleurs de la maquette) ;
   - corps : 4 dégradés radiaux aux coins (couleur des cellules d'angle de la grille 6 × 8 relevée) sur la couleur du
     centre : sombre au centre, bleu ou violet plus clair vers les coins, comme la maquette ;
   - halo EXTÉRIEUR : le liseré lui-même diffusé derrière la carte (::before flouté, 6 px) ; la grille est isolée pour
     qu'il reste au-dessus du fond de la section (maquette : écart au fond de 11 à 19 aux 2 premiers pixels, éteint vers
     6 à 8 px de maquette) ;
   - halo intérieur (tour 1) : ombre intérieure de 8 px de la couleur du trait le plus vif.
   Les textes des cartes reposent sur un fond en dégradé : leur contraste se prouve sur les pixels rendus (A-27, CV-22).
   Icônes : couleur de leur tracé sur la maquette. */
.grille--solutions {
  isolation: isolate;
}

.carte--solution {
  padding: 31px; /* 2 px de liseré + 31 = 1 px de bordure + 32 : boîte du contenu inchangée */
  border: 2px solid transparent;
  background: radial-gradient(130px 110px at 0 0, var(--corps-hg) 25%, rgba(0, 0, 0, 0) 100%) padding-box,
    radial-gradient(130px 110px at 100% 0, var(--corps-hd) 25%, rgba(0, 0, 0, 0) 100%) padding-box,
    radial-gradient(130px 110px at 0 100%, var(--corps-bg) 25%, rgba(0, 0, 0, 0) 100%) padding-box,
    radial-gradient(130px 110px at 100% 100%, var(--corps-bd) 25%, rgba(0, 0, 0, 0) 100%) padding-box,
    linear-gradient(var(--corps-centre), var(--corps-centre)) padding-box,
    var(--lisere) border-box;
  box-shadow: inset 0 0 8px var(--lisere-halo);
}

.carte--solution::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  background-image: var(--lisere);
  filter: blur(6px);
  opacity: 0.6;
}

.carte--solution > .icone {
  stroke: var(--couleur-icone);
}

.carte--solution[data-bloc="1"] {
  --lisere: conic-gradient(#4EABE9 -5.9deg, #26A1DB 5.9deg, #2AAEE4 17.2deg, #34A2E2 27.3deg, #2046B1 35.9deg, #1354D0 47.1deg, #005BAF 72.8deg, #0047AA 107.2deg, #2431AF 132.9deg, #2632A0 144.1deg, #7683F4 152.7deg, #3CC1F7 162.8deg, #459DF1 174.1deg, #3EB8F7 185.9deg, #3FD0FD 197.2deg, #0F45A8 207.3deg, #1B3CA6 215.9deg, #004995 227.1deg, #4898D7 252.8deg, #0B267D 287.2deg, #31137D 312.9deg, #9162DC 324.1deg, #896AE1 332.7deg, #7A76E4 342.8deg, #4EABE9 354.1deg, #26A1DB 365.9deg);
  --corps-hg: #100F40; --corps-hd: #09295D; --corps-bg: #0B2C5F; --corps-bd: #102758; --corps-centre: #021123;
  --lisere-halo: rgba(62, 198, 250, 0.6);
  --couleur-icone: #F96D51;
}

.carte--solution[data-bloc="2"] {
  --lisere: conic-gradient(#6079D8 -5.8deg, #4086D5 5.8deg, #3EB7EB 17deg, #1340AF 27deg, #2A39AB 35.5deg, #526BD7 46.7deg, #0F3186 72.6deg, #796BD0 107.4deg, #8459C6 133.3deg, #411788 144.5deg, #8A66D1 153deg, #291D82 163deg, #121E7D 174.2deg, #0C2B8F 185.8deg, #084099 197deg, #292DA3 207deg, #292CAA 215.5deg, #3842BB 226.7deg, #34389F 252.6deg, #22298C 287.4deg, #3C2095 313.3deg, #321997 324.5deg, #735CD3 333deg, #7269D7 343deg, #6079D8 354.2deg, #4086D5 365.8deg);
  --corps-hg: #081042; --corps-hd: #08275C; --corps-bg: #082458; --corps-bd: #141141; --corps-centre: #030F22;
  --lisere-halo: rgba(45, 148, 216, 0.6);
  --couleur-icone: #01CFFD;
}

.carte--solution[data-bloc="3"] {
  --lisere: conic-gradient(#7267C1 -5.9deg, #4C56C3 5.9deg, #361F94 17.1deg, #432897 27.2deg, #582B9A 35.7deg, #5A33A4 46.9deg, #422E99 72.7deg, #1A2B92 107.3deg, #342191 133.1deg, #3D1992 144.3deg, #8576E4 152.8deg, #64ADF3 162.9deg, #7974CF 174.1deg, #B0729A 185.9deg, #D87993 197.1deg, #E07892 207.2deg, #DE7993 215.7deg, #CE80A0 226.9deg, #A8668D 252.7deg, #3A0D53 287.3deg, #450E58 313.1deg, #B0509D 324.3deg, #581C6F 332.8deg, #9059B7 342.9deg, #7267C1 354.1deg, #4C56C3 365.9deg);
  --corps-hg: #1D113B; --corps-hd: #181D4E; --corps-bg: #180E31; --corps-bd: #111546; --corps-centre: #020D1E;
  --lisere-halo: rgba(79, 117, 202, 0.6);
  --couleur-icone: #E84CC9;
}

.carte--solution[data-bloc="4"] {
  --lisere: conic-gradient(#2FA3E0 -5.8deg, #31A5DC 5.8deg, #1B2792 16.9deg, #3E2799 26.9deg, #4B249A 35.4deg, #7A51C6 46.6deg, #535BC3 72.5deg, #5F54C7 107.5deg, #714CC1 133.4deg, #3C1786 144.6deg, #9078E5 153.1deg, #6F8CF3 163.1deg, #5593E9 174.2deg, #51BBF8 185.8deg, #3FD2FB 196.9deg, #5FBAFA 206.9deg, #4CB9F4 215.4deg, #0041A5 226.6deg, #003E8F 252.5deg, #002C7D 287.5deg, #003DAF 313.4deg, #1047B6 324.6deg, #349DEA 333.1deg, #22A4E1 343.1deg, #2FA3E0 354.2deg, #31A5DC 365.8deg);
  --corps-hg: #0D2B67; --corps-hd: #181A4F; --corps-bg: #0A2B5D; --corps-bd: #181148; --corps-centre: #021124;
  --lisere-halo: rgba(69, 199, 248, 0.6);
  --couleur-icone: #01B2FA;
}

/* Icônes des avantages du hero, des bénéfices et des engagements (A-23, I-2) : couleur unie relevée, ou dégradé
   horizontal relevé (moitiés gauche et droite du tracé à 15° de teinte ou plus) défini dans accueil.html. */
.hero__carte[data-bloc="1"] > .icone { stroke: url(#icone-avantage-1); }
.hero__carte[data-bloc="2"] > .icone { stroke: url(#icone-avantage-2); }
.hero__carte[data-bloc="3"] > .icone { stroke: #C238F5; }
.benefice[data-bloc="1"] > .icone { stroke: #B831EA; }
.benefice[data-bloc="2"] > .icone { stroke: url(#icone-benefice-2); }
.benefice[data-bloc="3"] > .icone { stroke: url(#icone-benefice-3); }
.benefice[data-bloc="4"] > .icone { stroke: #C433F0; }
.carte--engagement[data-bloc="1"] > .icone { stroke: url(#icone-engagement-1); }
.carte--engagement[data-bloc="2"] > .icone { stroke: #2F54FA; }
.carte--engagement[data-bloc="3"] > .icone { stroke: url(#icone-engagement-3); }
.carte--engagement[data-bloc="4"] > .icone { stroke: #1B47F6; }

/* ---------- Approche : étapes en colonne, cercle numéroté 56 px à bordure dégradée, trait vertical 2 px en
   --degrade-accent du bas d'un cercle au haut du suivant (pseudo-élément de l'étape). ---------- */
.etapes {
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.etape {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: 32px;
  padding-bottom: 32px;
}

.etape:last-child {
  padding-bottom: 0;
}

.etape:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 56px;
  bottom: 0;
  width: 2px;
  background-image: linear-gradient(180deg, #00C8FF 0%, #7776FF 50%, #C34BEE 100%);
}

.etape__numero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 2px solid transparent;
  border-radius: 50%;
  background: linear-gradient(var(--fond-principal), var(--fond-principal)) padding-box,
    var(--degrade-accent) border-box;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--texte-principal);
}

.etape__texte > h3 {
  padding-top: 2px;
}

.etape__texte > .sous-titre-carte {
  margin-top: var(--espace-titre-sous-titre);
  font-weight: 600;
  color: var(--texte-principal);
}

.etape__texte > .texte-carte {
  margin-top: var(--espace-titre-texte-carte);
}

/* ---------- Bénéfices : colonnes sans fond, centrées, à filets verticaux ≥ 1200 ; lead en 600 (A-23). ---------- */
.lead--fort {
  font-weight: 600;
}

.grille--benefices {
  gap: 0;
}

.benefice {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 24px;
  text-align: center;
}

.benefice + .benefice {
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.benefice > .icone {
  width: 64px;
  height: 64px;
}

.benefice > h3 {
  margin-top: var(--espace-icone-titre);
}

.benefice > p {
  margin-top: var(--espace-titre-texte-carte);
}

/* Renfort du voile derrière l'en-tête des bénéfices (A-27, tour de correction 2, N-2). Mesuré sur les pixels rendus,
   le pire pixel de « pour votre entreprise » (teinte violette du dégradé) tombait à 2,38:1 sur la lueur du couchant
   (voile § 6 seul, 0,72). A-27 : on renforce le voile, jamais une tolérance. Le voile § 6 reste 0,72 partout (couleur
   de fond du ::before) ; ce renfort elliptique s'y ajoute derrière l'en-tête (0,6 au cœur, opacité cumulée 0,89), et
   laisse les montagnes des bords éclairées, comme la maquette (centre sombre). */
[data-page="accueil"] [data-section="benefices"]::before { /* CODE M2 : borné à la page (« benefices » existe aussi sur Formations) */
  background-image: radial-gradient(720px 260px at 50% 215px, rgba(4, 20, 38, 0.6) 0%, rgba(4, 20, 38, 0.6) 55%, rgba(4, 20, 38, 0) 100%);
}

/* ---------- Pourquoi : texte à gauche (moitié gauche), image à droite ; « Nos engagements » centré ; cartes blanches à
   icône à gauche du H4 + P. ---------- */
.pourquoi__texte {
  max-width: calc(50% - 48px);
}

/* Fondu de l'image de droite renforcé (A-27, tour de correction 2, N-2), ≥ 1000 px. L'image (moitié droite, pleine
   hauteur) s'étend sous « Nos engagements » ; mesuré sur les pixels rendus, le pire pixel de « engagements » (teinte
   bleue du dégradé) tombait à 1,83:1 sur l'ombre des montagnes (fondu commun : opaque au-dessus de 55 % de la hauteur).
   Comme sur la maquette, l'image s'efface AVANT « Nos engagements » : opaque jusqu'à 380 px, transparente dès 530 px
   (le titre commence à 540–565 px du haut de la section de 1000 à 1920 px). La boîte de l'image ne change pas : elle
   reste sous le titre et les cartes, qui se prouvent donc sur les pixels rendus (A-27). */
/* `sizes` des images de côté d'Approche et de Pourquoi (accueil.html ; tour de correction 3, N-4, § 9) : `cover` agrandit
   l'image selon la HAUTEUR de sa boîte ; la largeur rendue avant découpe vaut max(boîte, hauteur × rapport). ≥ 1000 px :
   Approche (2:1, section ≥ 1288 px de haut) ≥ 2576 px ; Pourquoi (3:1, section ≥ 1028 px) ≥ 3084 px — d'où la plus grande
   variante (1440 et 1920), au lieu de la 640 ou de la 960 agrandies 3 à 4 fois avec « 50vw ». Sous 1000 px (boîte pleine
   largeur, 260 px de haut) : max(100vw, 520 px) et max(100vw, 780 px).
   Fond des bénéfices (tour de correction 4, N-6) : 2,67:1 sur toute la section, qui fait au moins 844 px de haut à
   toutes les largeurs (1472 à 390) : rendu sur au moins 2251 px de large, d'où « (min-width: 2251px) 100vw, 2251px » et
   la variante 1920, au lieu de la 1440 (× 1,56 à 1440) et de la 640 (× 6,1 à 390) ; poids de l'Accueil mesuré sous les
   budgets du § 17 (test N-6). */
@media (min-width: 1000px) {
  [data-page="accueil"] [data-section="pourquoi"] > .section__image {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%), linear-gradient(180deg, #000 0, #000 380px, transparent 530px);
    mask-image: linear-gradient(90deg, transparent 0%, #000 45%), linear-gradient(180deg, #000 0, #000 380px, transparent 530px);
  }
}

.titre__suite--bleu,
.titre--bleu {
  color: #075BFF;
}

.section .titre--bleu {
  color: #075BFF;
}

.section .conteneur > .titre-engagements {
  margin-top: 48px;
  font-size: 36px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.6px;
  text-align: center;
}

.section .conteneur > .titre-engagements + .grille {
  margin-top: 32px;
}

.grille--engagements {
  gap: 16px;
}

.carte--blanche {
  border-radius: 12px;
  background-color: var(--fond-blanc);
  box-shadow: 0 10px 30px rgba(11, 20, 80, 0.08);
}

.carte--engagement {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 28px;
}

.carte--engagement > .icone {
  flex: none;
  width: 44px;
  height: 44px;
}

.carte--engagement h4 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
}

.carte--engagement p {
  margin-top: var(--espace-titre-texte-carte);
}

/* ---------- Confiance : 7 tuiles blanches 136 × 120 (A-23), rayon 12, ombre, image contenue à 12 px ; écart 24 ;
   une ligne centrée ≥ 1200 (7 × 136 + 6 × 24 = 1096 px), retour à la ligne en dessous. ---------- */
.logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}

.logo-client {
  display: flex;
  width: 136px;
  height: 120px;
  padding: 12px;
  border-radius: 12px;
  background-color: var(--fond-blanc);
  box-shadow: 0 6px 18px rgba(11, 20, 80, 0.08);
}

.logo-client img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 1199px) {
  .grille--benefices {
    gap: 40px 24px;
  }

  .benefice + .benefice {
    border-left: 0;
  }

  .section .conteneur > .titre-engagements {
    font-size: 30px;
  }
}

@media (max-width: 999px) {
  .pourquoi__texte {
    max-width: none;
  }
}

@media (max-width: 767px) {
  .carte--solution,
  .carte--engagement {
    padding: 24px;
  }

  .logos {
    gap: 16px;
  }

  .section .conteneur > .titre-engagements {
    font-size: 24px;
  }
}

/* ---------- Voile du CTA comme la maquette (lot 5, correction 2, point 5 ; A-23 ; A-27 « on renforce le voile »). Sur
   la maquette, le fond sous le texte du CTA est presque opaque (luminance 0,00683, celle du voile rgba(4, 20, 38) étant
   0,00666). À partir de 1200 px, une ellipse rgba(4, 20, 38, .96) s'ajoute au voile du § 6 (::before, inchangé),
   centrée sur le bloc de texte : uniforme jusqu'à 60 % de ses demi-axes (440 × 120 px, qui contiennent la boîte des
   caractères, 578 × 135 px centrée à 226 px du haut, relevée à 1440 ; bouton exclu), puis fondue ; l'image reste
   visible sur les bords. A calculé pour que la couleur moyenne sous les caractères passe de 0,03089 à 0,00726, sous la
   limite du test (maquette + 10 % : 0,00751 ; tests/voiles.test.mjs, .contrat/site-2026/l5/scripts/c2-alphas.py,
   rapport du lot 5 § 12). ---------- */
@media (min-width: 1200px) {
  [data-page="accueil"] .cta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: radial-gradient(733px 200px at 50% 226px, rgba(4, 20, 38, 0.96) 0%, rgba(4, 20, 38, 0.96) 60%, rgba(4, 20, 38, 0) 100%);
  }
}

/* ========== Tour 3 du lot 5 : fidélité à la maquette (spec v4.10, A-01 v5 ; valeurs visées :
   .contrat/site-2026/comparaison-maquette.md, relevées à 1440). Tailles des textes et fonds sous le texte seulement :
   marges, hauteurs, espacements internes, boutons et conteneur restent ceux du dossier (A-34). À 820 et à 390, la
   proportion de la spec entre les largeurs est gardée (style de référence entre parenthèses). ========== */

/* A1 (P1) : voile à droite, sous les 3 avantages du hero, posés sur les nuages clairs de l'image (fond visé L ≤ 35).
   Il part de 60 % de la largeur (transparent) : le personnage, à gauche, et le H1 ne sont pas couverts (A-28). Sous
   1000 px, les avantages passent sous le texte, sur un fond déjà sombre. */
@media (min-width: 1000px) {
  [data-page="accueil"] .hero--accueil::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 40%;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(270deg, rgba(4, 20, 38, 0.85) 0%, rgba(4, 20, 38, 0.75) 55%, rgba(4, 20, 38, 0) 100%);
  }
}

/* A2 (P1) : lead du hero ; A3 (P2) : titre des avantages 26 px (Titre d'avantage ; maquette ≈ 28 px, mais à 28 px la
   colonne des avantages s'élargit et le H1 passe sur 4 lignes : A-28). Lead : 25 px sur la maquette (3 lignes, hero de
   980 px) ; ici 21 px sur une colonne de 800 (2 lignes), la plus grande taille qui tient A-28 (tour 4, relevé
   c4-lead.mjs : à 22 px et plus, 3 lignes de 1200 à 1300 px, le H1 remonte sur le personnage ; à 25 px, de 54 px à
   1440) ; 20 px à 820 (21 et plus : hero de 777 px au lieu de 760, § 5). Écarts inscrits dans ECARTS_V5. */
[data-page="accueil"] .hero--accueil .lead {
  max-width: 800px;
  font-size: 21px;
}

[data-page="accueil"] .hero--accueil .titre-avantage {
  font-size: 26px;
}

/* De 1200 à 1439 px, la colonne du texte est plus étroite : à 25-26 px, les avantages s'élargissent et le H1 passe sur
   4 lignes, puis monte sur le personnage (A-28 ; relevé l5/scripts/c4-titre.mjs, tour 4) : 24 px, la plus grande
   taille qui tient sur toute la plage. */
@media (min-width: 1200px) and (max-width: 1439px) {
  [data-page="accueil"] .hero--accueil .titre-avantage {
    font-size: 24px;
  }
}

/* A4 (P1), A5 (P2), A6 (P2) : « Nos solutions » — lead 31 px (interligne 1,3), paragraphe 22 px (introduction, T5b),
   H2 59 px, texte des cartes 18 px (interligne 1,45). */
[data-page="accueil"] [data-section="solutions"] h2 {
  font-size: 59px;
}

[data-page="accueil"] [data-section="solutions"] .conteneur > .lead {
  font-size: 31px;
  line-height: 1.3;
}

[data-page="accueil"] [data-section="solutions"] .conteneur > p:not(.surtitre):not(.lead) {
  font-size: 22px;
}

[data-page="accueil"] [data-section="solutions"] .texte-carte {
  font-size: 18px;
  line-height: 1.45;
}

/* A9 (P1) : bénéfices — l'image claire (sommets enneigés) passait sous le texte des colonnes (fond L 41–61 à 1440,
   62–74 à 390, maquette L 12). Le voile § 6 reste 0,72 (couleur de fond du ::before) ; un dégradé vertical s'y ajoute,
   transparent en haut (l'image garnit le haut, comme la maquette), 0,72 dès 50 % de la hauteur, 0,82 en bas : opacité
   cumulée 0,92 puis 0,95. Le renfort elliptique derrière l'en-tête (A-27) est gardé. */
[data-page="accueil"] [data-section="benefices"]::before {
  background-image: linear-gradient(180deg, rgba(4, 20, 38, 0) 0%, rgba(4, 20, 38, 0) 25%, rgba(4, 20, 38, 0.72) 50%, rgba(4, 20, 38, 0.82) 100%),
    radial-gradient(720px 260px at 50% 215px, rgba(4, 20, 38, 0.6) 0%, rgba(4, 20, 38, 0.6) 55%, rgba(4, 20, 38, 0) 100%);
}

/* A10 (P1, T5b) : introduction des bénéfices 20 px ; A11 (P2) : colonnes, titre 20 px (une ligne) et texte 17,5 px. */
[data-page="accueil"] [data-section="benefices"] .conteneur > p:not(.surtitre):not(.lead) {
  font-size: 20px;
}

[data-page="accueil"] .benefice > h3 {
  font-size: 20px;
}

[data-page="accueil"] .benefice > p {
  font-size: 17.5px;
  line-height: 1.6; /* style de base du tableau v5 : Paragraphe */
}

/* A13 (P1, T5b) : paragraphe de « Pourquoi nous choisir » 19 px. */
[data-page="accueil"] .pourquoi__texte > p:not(.surtitre) {
  font-size: 19px;
}

/* A14 (P2) : titre des logos en style H3, 26 px, sur une ligne. */
[data-page="accueil"] [data-section="confiance"] h2 {
  font-size: 26px;
  line-height: 1.3; /* style de base du tableau v5 : H3 */
  letter-spacing: -0.2px;
}

/* A14 (A-35, tour 4) : logos des clients plus grands, comme la maquette (≈ 93 px de haut d'encre à 1440, contre 75) :
   marge intérieure des tuiles 6 px au lieu de 12 ; tuile de 136 × 120 inchangée. */
[data-page="accueil"] .logo-client {
  padding: 6px;
}

/* A15 (P3) : H2 du CTA 44 px. */
[data-page="accueil"] [data-section="cta"] h2 {
  font-size: 44px;
}

@media (max-width: 1199px) {
  [data-page="accueil"] .hero--accueil .lead { font-size: 20px; } /* v5 : 24 ; 20, A-28 / § 5 (hero 760) */
  [data-page="accueil"] .hero--accueil .titre-avantage { font-size: 22px; } /* v5 : 24 ; 22, CV-25 (une ligne à 768) */
  [data-page="accueil"] [data-section="solutions"] h2 { font-size: 49px; } /* H2 40 */
  [data-page="accueil"] [data-section="solutions"] .conteneur > .lead { font-size: 29px; }
  [data-page="accueil"] [data-section="solutions"] .conteneur > p:not(.surtitre):not(.lead) { font-size: 21px; }
  [data-page="accueil"] [data-section="benefices"] .conteneur > p:not(.surtitre):not(.lead) { font-size: 19px; }
  [data-page="accueil"] .benefice > h3 { font-size: 18px; } /* H3 20 */
  [data-page="accueil"] .pourquoi__texte > p:not(.surtitre) { font-size: 18px; }
  [data-page="accueil"] [data-section="confiance"] h2 { font-size: 24px; } /* H3 20 */
  [data-page="accueil"] [data-section="cta"] h2 { font-size: 37px; }
}

@media (max-width: 767px) {
  [data-page="accueil"] .hero--accueil .lead { font-size: 21px; } /* Lead 17 */
  [data-page="accueil"] .hero--accueil .titre-avantage { font-size: 22px; } /* 20 */
  [data-page="accueil"] [data-section="solutions"] h2 { font-size: 37px; } /* H2 30 */
  [data-page="accueil"] [data-section="solutions"] .conteneur > .lead { font-size: 26px; }
  [data-page="accueil"] [data-section="solutions"] .conteneur > p:not(.surtitre):not(.lead) { font-size: 19px; }
  [data-page="accueil"] [data-section="benefices"] .conteneur > p:not(.surtitre):not(.lead) { font-size: 17px; }
  [data-page="accueil"] .benefice > h3 { font-size: 17px; } /* H3 19 */
  [data-page="accueil"] .pourquoi__texte > p:not(.surtitre) { font-size: 16px; }
  [data-page="accueil"] [data-section="confiance"] h2 { font-size: 22px; } /* H3 19 */
  [data-page="accueil"] [data-section="cta"] h2 { font-size: 28px; }
}

/* ---------- 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. CTA : 0,03575 → 0,00716 à 820 et 0,03338 → 0,00714 à 390 (A = 0,97, visée
   0,00729 sous la limite 0,00751), ellipse comme à 1440, dont le cœur (60 %) contient la boîte des caractères :
   400 × 100 px à 820 (boîte 566 × 127 centrée à 200 px), 250 × 100 à 390 (boîte 340 × 135 centrée à 196 px). À 1440,
   le cœur (440 × 120) contient toujours la boîte du texte agrandi (596 × 139, centrée à 226 px). ---------- */
@media (min-width: 768px) and (max-width: 1199px) {
  [data-page="accueil"] .cta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: radial-gradient(667px 167px at 50% 200px, rgba(4, 20, 38, 0.99) 0%, rgba(4, 20, 38, 0.99) 60%, rgba(4, 20, 38, 0) 100%);
  }
}

@media (max-width: 767px) {
  [data-page="accueil"] .cta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: radial-gradient(417px 167px at 50% 196px, rgba(4, 20, 38, 0.99) 0%, rgba(4, 20, 38, 0.99) 60%, rgba(4, 20, 38, 0) 100%);
  }
}

/* ---------- Photos comme la maquette (A-36, SPEC v4.12 § 9 ; lot 5, tour 4) ---------- */
/* Approche, ≥ 1000 px : image de rapport 987 / 887 sur la moitié gauche (≈ 720 × 647 à 1440), centrée verticalement
   dans sa section (insets haut et bas à 0, hauteur tirée du rapport, marges automatiques), fondue en haut et en bas vers
   le fond de la section ; object-position 8,8 % = 69 / (1774 − 987) : x 69–1056 de la source (manche, main, doigt et
   Terre entière, comme la maquette). La section garde sa hauteur (A-34). */
@media (min-width: 1000px) {
  [data-page="accueil"] [data-section="approche"] > .section__image {
    bottom: 0;
    height: auto;
    margin: auto 0;
    aspect-ratio: 987 / 887;
    object-position: 8.8% 50%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  }
}

/* Sous 1000 px (bandeau de 260 px) : à 390, la manche et la main se lisent mieux à 22 % (essai, l5/c4-photos/essais). */
@media (max-width: 999px) {
  [data-page="accueil"] [data-section="approche"] > .section__image {
    object-position: 22% 50%;
  }
}

/* Bénéfices : l'image en haut seulement (55 % de la hauteur, haut de la source), fondue vers --fond-principal (fond de
   la section), comme la maquette (bandeau bleu nuit, montagnes en haut). Les voiles du ::before restent. */
[data-page="accueil"] [data-section="benefices"] > .section__fond {
  height: 55%;
  object-position: 50% 0;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}

/* Pourquoi : teinte rapprochée de la maquette (sommets pâles, blanc-bleu) sur la section claire. */
[data-page="accueil"] [data-section="pourquoi"] > .section__image {
  filter: saturate(0.35) brightness(1.15);
}

/* ---------- 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). ---------- */
/* CTA : cœur --voile 0.99 / 0.99 / 0.99, fondu smoothstep sur 160 px de part et d'autre du bloc ± 0 px jusqu'à 0.35 à gauche et 0.1 à droite ; à 820 et 390, bande sur les caractères ; image brightness(1.2). */
[data-page="accueil"] .cta {
  --voile: 0.99;
}

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

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

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

@media (min-width: 1200px) {
  [data-page="accueil"] .cta::before {
    background-image: linear-gradient(90deg, rgba(4, 20, 38, 0.35) calc(50% - 458px), rgb(4 20 38 / calc(0.35 + (var(--voile) - 0.35) * 0.0112)) calc(50% - 448px), rgb(4 20 38 / calc(0.35 + (var(--voile) - 0.35) * 0.0430)) calc(50% - 438px), rgb(4 20 38 / calc(0.35 + (var(--voile) - 0.35) * 0.0923)) calc(50% - 428px), rgb(4 20 38 / calc(0.35 + (var(--voile) - 0.35) * 0.1562)) calc(50% - 418px), rgb(4 20 38 / calc(0.35 + (var(--voile) - 0.35) * 0.2319)) calc(50% - 408px), rgb(4 20 38 / calc(0.35 + (var(--voile) - 0.35) * 0.3164)) calc(50% - 398px), rgb(4 20 38 / calc(0.35 + (var(--voile) - 0.35) * 0.4067)) calc(50% - 388px), rgb(4 20 38 / calc(0.35 + (var(--voile) - 0.35) * 0.5000)) calc(50% - 378px), rgb(4 20 38 / calc(0.35 + (var(--voile) - 0.35) * 0.5933)) calc(50% - 368px), rgb(4 20 38 / calc(0.35 + (var(--voile) - 0.35) * 0.6836)) calc(50% - 358px), rgb(4 20 38 / calc(0.35 + (var(--voile) - 0.35) * 0.7681)) calc(50% - 348px), rgb(4 20 38 / calc(0.35 + (var(--voile) - 0.35) * 0.8438)) calc(50% - 338px), rgb(4 20 38 / calc(0.35 + (var(--voile) - 0.35) * 0.9077)) calc(50% - 328px), rgb(4 20 38 / calc(0.35 + (var(--voile) - 0.35) * 0.9570)) calc(50% - 318px), rgb(4 20 38 / calc(0.35 + (var(--voile) - 0.35) * 0.9888)) calc(50% - 308px), rgb(4 20 38 / var(--voile)) calc(50% - 298px), rgb(4 20 38 / var(--voile)) calc(50% + 298px), rgb(4 20 38 / calc(0.1 + (var(--voile) - 0.1) * 0.9888)) calc(50% + 308px), rgb(4 20 38 / calc(0.1 + (var(--voile) - 0.1) * 0.9570)) calc(50% + 318px), rgb(4 20 38 / calc(0.1 + (var(--voile) - 0.1) * 0.9077)) calc(50% + 328px), rgb(4 20 38 / calc(0.1 + (var(--voile) - 0.1) * 0.8438)) calc(50% + 338px), rgb(4 20 38 / calc(0.1 + (var(--voile) - 0.1) * 0.7681)) calc(50% + 348px), rgb(4 20 38 / calc(0.1 + (var(--voile) - 0.1) * 0.6836)) calc(50% + 358px), rgb(4 20 38 / calc(0.1 + (var(--voile) - 0.1) * 0.5933)) calc(50% + 368px), rgb(4 20 38 / calc(0.1 + (var(--voile) - 0.1) * 0.5000)) calc(50% + 378px), rgb(4 20 38 / calc(0.1 + (var(--voile) - 0.1) * 0.4067)) calc(50% + 388px), rgb(4 20 38 / calc(0.1 + (var(--voile) - 0.1) * 0.3164)) calc(50% + 398px), rgb(4 20 38 / calc(0.1 + (var(--voile) - 0.1) * 0.2319)) calc(50% + 408px), rgb(4 20 38 / calc(0.1 + (var(--voile) - 0.1) * 0.1562)) calc(50% + 418px), rgb(4 20 38 / calc(0.1 + (var(--voile) - 0.1) * 0.0923)) calc(50% + 428px), rgb(4 20 38 / calc(0.1 + (var(--voile) - 0.1) * 0.0430)) calc(50% + 438px), rgb(4 20 38 / calc(0.1 + (var(--voile) - 0.1) * 0.0112)) calc(50% + 448px), rgba(4, 20, 38, 0.1) calc(50% + 458px));
  }

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

@media (min-width: 768px) and (max-width: 1199px) {
  [data-page="accueil"] .cta::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)) 334px, rgb(4 20 38 / calc(var(--voile) * 0.9888)) 344px, rgb(4 20 38 / calc(var(--voile) * 0.9570)) 354px, rgb(4 20 38 / calc(var(--voile) * 0.9077)) 364px, rgb(4 20 38 / calc(var(--voile) * 0.8438)) 374px, rgb(4 20 38 / calc(var(--voile) * 0.7681)) 384px, rgb(4 20 38 / calc(var(--voile) * 0.6836)) 394px, rgb(4 20 38 / calc(var(--voile) * 0.5933)) 404px, rgb(4 20 38 / calc(var(--voile) * 0.5000)) 414px, rgb(4 20 38 / calc(var(--voile) * 0.4067)) 424px, rgb(4 20 38 / calc(var(--voile) * 0.3164)) 434px, rgb(4 20 38 / calc(var(--voile) * 0.2319)) 444px, rgb(4 20 38 / calc(var(--voile) * 0.1562)) 454px, rgb(4 20 38 / calc(var(--voile) * 0.0923)) 464px, rgb(4 20 38 / calc(var(--voile) * 0.0430)) 474px, rgb(4 20 38 / calc(var(--voile) * 0.0112)) 484px, rgba(4, 20, 38, 0) 494px);
  }
}

@media (max-width: 767px) {
  [data-page="accueil"] .cta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(180deg, rgba(4, 20, 38, 0) -28px, rgb(4 20 38 / calc(var(--voile) * 0.0112)) -18px, rgb(4 20 38 / calc(var(--voile) * 0.0430)) -8px, rgb(4 20 38 / calc(var(--voile) * 0.0923)) 2px, rgb(4 20 38 / calc(var(--voile) * 0.1562)) 12px, rgb(4 20 38 / calc(var(--voile) * 0.2319)) 22px, rgb(4 20 38 / calc(var(--voile) * 0.3164)) 32px, rgb(4 20 38 / calc(var(--voile) * 0.4067)) 42px, rgb(4 20 38 / calc(var(--voile) * 0.5000)) 52px, rgb(4 20 38 / calc(var(--voile) * 0.5933)) 62px, rgb(4 20 38 / calc(var(--voile) * 0.6836)) 72px, rgb(4 20 38 / calc(var(--voile) * 0.7681)) 82px, rgb(4 20 38 / calc(var(--voile) * 0.8438)) 92px, rgb(4 20 38 / calc(var(--voile) * 0.9077)) 102px, rgb(4 20 38 / calc(var(--voile) * 0.9570)) 112px, rgb(4 20 38 / calc(var(--voile) * 0.9888)) 122px, rgb(4 20 38 / var(--voile)) 132px, rgb(4 20 38 / var(--voile)) 328px, rgb(4 20 38 / calc(var(--voile) * 0.9888)) 338px, rgb(4 20 38 / calc(var(--voile) * 0.9570)) 348px, rgb(4 20 38 / calc(var(--voile) * 0.9077)) 358px, rgb(4 20 38 / calc(var(--voile) * 0.8438)) 368px, rgb(4 20 38 / calc(var(--voile) * 0.7681)) 378px, rgb(4 20 38 / calc(var(--voile) * 0.6836)) 388px, rgb(4 20 38 / calc(var(--voile) * 0.5933)) 398px, rgb(4 20 38 / calc(var(--voile) * 0.5000)) 408px, rgb(4 20 38 / calc(var(--voile) * 0.4067)) 418px, rgb(4 20 38 / calc(var(--voile) * 0.3164)) 428px, rgb(4 20 38 / calc(var(--voile) * 0.2319)) 438px, rgb(4 20 38 / calc(var(--voile) * 0.1562)) 448px, rgb(4 20 38 / calc(var(--voile) * 0.0923)) 458px, rgb(4 20 38 / calc(var(--voile) * 0.0430)) 468px, rgb(4 20 38 / calc(var(--voile) * 0.0112)) 478px, rgba(4, 20, 38, 0) 488px);
  }
}

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

/* Approche (A-38, autres photos) : photo à 0,56 de la lumière de la maquette (l5/scripts/c5-photos-lumiere.py),
   éclaircie ; le texte est à côté de la photo. */
[data-page="accueil"] [data-section="approche"] > .section__image {
  filter: brightness(1.35);
}

/* accueil/benefices (A-39) : voile lointain 0.2 ; couche sur le bloc de texte, cœur --voile 0.78 / 0.8 / 0.77, fondue en smoothstep sur 160 px (bande × masque) ; image brightness(1). */
[data-page="accueil"] [data-section="benefices"] {
  --voile: 0.78;
}

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

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

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

@media (max-width: 767px) {
  [data-page="accueil"] [data-section="benefices"] {
    --voile-colonnes: 0.13;
  }

  [data-page="accueil"] [data-section="benefices"]::before {
    background-image: linear-gradient(180deg, rgba(4, 20, 38, 0) 340px, rgb(4 20 38 / calc(var(--voile-colonnes) * 0.0112)) 350px, rgb(4 20 38 / calc(var(--voile-colonnes) * 0.0430)) 360px, rgb(4 20 38 / calc(var(--voile-colonnes) * 0.0923)) 370px, rgb(4 20 38 / calc(var(--voile-colonnes) * 0.1562)) 380px, rgb(4 20 38 / calc(var(--voile-colonnes) * 0.2319)) 390px, rgb(4 20 38 / calc(var(--voile-colonnes) * 0.3164)) 400px, rgb(4 20 38 / calc(var(--voile-colonnes) * 0.4067)) 410px, rgb(4 20 38 / calc(var(--voile-colonnes) * 0.5000)) 420px, rgb(4 20 38 / calc(var(--voile-colonnes) * 0.5933)) 430px, rgb(4 20 38 / calc(var(--voile-colonnes) * 0.6836)) 440px, rgb(4 20 38 / calc(var(--voile-colonnes) * 0.7681)) 450px, rgb(4 20 38 / calc(var(--voile-colonnes) * 0.8438)) 460px, rgb(4 20 38 / calc(var(--voile-colonnes) * 0.9077)) 470px, rgb(4 20 38 / calc(var(--voile-colonnes) * 0.9570)) 480px, rgb(4 20 38 / calc(var(--voile-colonnes) * 0.9888)) 490px, rgb(4 20 38 / var(--voile-colonnes)) 500px);
  }
}

@media (min-width: 1200px) {
  [data-page="accueil"] [data-section="benefices"]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: linear-gradient(90deg, rgba(4, 20, 38, 0) calc(50% - 546px), rgb(4 20 38 / calc(var(--voile) * 0.0112)) calc(50% - 536px), rgb(4 20 38 / calc(var(--voile) * 0.0430)) calc(50% - 526px), rgb(4 20 38 / calc(var(--voile) * 0.0923)) calc(50% - 516px), rgb(4 20 38 / calc(var(--voile) * 0.1562)) calc(50% - 506px), rgb(4 20 38 / calc(var(--voile) * 0.2319)) calc(50% - 496px), rgb(4 20 38 / calc(var(--voile) * 0.3164)) calc(50% - 486px), rgb(4 20 38 / calc(var(--voile) * 0.4067)) calc(50% - 476px), rgb(4 20 38 / calc(var(--voile) * 0.5000)) calc(50% - 466px), rgb(4 20 38 / calc(var(--voile) * 0.5933)) calc(50% - 456px), rgb(4 20 38 / calc(var(--voile) * 0.6836)) calc(50% - 446px), rgb(4 20 38 / calc(var(--voile) * 0.7681)) calc(50% - 436px), rgb(4 20 38 / calc(var(--voile) * 0.8438)) calc(50% - 426px), rgb(4 20 38 / calc(var(--voile) * 0.9077)) calc(50% - 416px), rgb(4 20 38 / calc(var(--voile) * 0.9570)) calc(50% - 406px), rgb(4 20 38 / calc(var(--voile) * 0.9888)) calc(50% - 396px), rgb(4 20 38 / var(--voile)) calc(50% - 386px), rgb(4 20 38 / var(--voile)) calc(50% + 386px), rgb(4 20 38 / calc(var(--voile) * 0.9888)) calc(50% + 396px), rgb(4 20 38 / calc(var(--voile) * 0.9570)) calc(50% + 406px), rgb(4 20 38 / calc(var(--voile) * 0.9077)) calc(50% + 416px), rgb(4 20 38 / calc(var(--voile) * 0.8438)) calc(50% + 426px), rgb(4 20 38 / calc(var(--voile) * 0.7681)) calc(50% + 436px), rgb(4 20 38 / calc(var(--voile) * 0.6836)) calc(50% + 446px), rgb(4 20 38 / calc(var(--voile) * 0.5933)) calc(50% + 456px), rgb(4 20 38 / calc(var(--voile) * 0.5000)) calc(50% + 466px), rgb(4 20 38 / calc(var(--voile) * 0.4067)) calc(50% + 476px), rgb(4 20 38 / calc(var(--voile) * 0.3164)) calc(50% + 486px), rgb(4 20 38 / calc(var(--voile) * 0.2319)) calc(50% + 496px), rgb(4 20 38 / calc(var(--voile) * 0.1562)) calc(50% + 506px), rgb(4 20 38 / calc(var(--voile) * 0.0923)) calc(50% + 516px), rgb(4 20 38 / calc(var(--voile) * 0.0430)) calc(50% + 526px), rgb(4 20 38 / calc(var(--voile) * 0.0112)) calc(50% + 536px), rgba(4, 20, 38, 0) calc(50% + 546px));
    -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) 464px, rgba(0, 0, 0, 0.9888) 474px, rgba(0, 0, 0, 0.9570) 484px, rgba(0, 0, 0, 0.9077) 494px, rgba(0, 0, 0, 0.8438) 504px, rgba(0, 0, 0, 0.7681) 514px, rgba(0, 0, 0, 0.6836) 524px, rgba(0, 0, 0, 0.5933) 534px, rgba(0, 0, 0, 0.5000) 544px, rgba(0, 0, 0, 0.4067) 554px, rgba(0, 0, 0, 0.3164) 564px, rgba(0, 0, 0, 0.2319) 574px, rgba(0, 0, 0, 0.1562) 584px, rgba(0, 0, 0, 0.0923) 594px, rgba(0, 0, 0, 0.0430) 604px, rgba(0, 0, 0, 0.0112) 614px, rgba(0, 0, 0, 0) 624px);
    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) 464px, rgba(0, 0, 0, 0.9888) 474px, rgba(0, 0, 0, 0.9570) 484px, rgba(0, 0, 0, 0.9077) 494px, rgba(0, 0, 0, 0.8438) 504px, rgba(0, 0, 0, 0.7681) 514px, rgba(0, 0, 0, 0.6836) 524px, rgba(0, 0, 0, 0.5933) 534px, rgba(0, 0, 0, 0.5000) 544px, rgba(0, 0, 0, 0.4067) 554px, rgba(0, 0, 0, 0.3164) 564px, rgba(0, 0, 0, 0.2319) 574px, rgba(0, 0, 0, 0.1562) 584px, rgba(0, 0, 0, 0.0923) 594px, rgba(0, 0, 0, 0.0430) 604px, rgba(0, 0, 0, 0.0112) 614px, rgba(0, 0, 0, 0) 624px);
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  [data-page="accueil"] [data-section="benefices"]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: linear-gradient(90deg, rgba(4, 20, 38, 0) -117px, rgb(4 20 38 / calc(var(--voile) * 0.0112)) -107px, rgb(4 20 38 / calc(var(--voile) * 0.0430)) -97px, rgb(4 20 38 / calc(var(--voile) * 0.0923)) -87px, rgb(4 20 38 / calc(var(--voile) * 0.1562)) -77px, rgb(4 20 38 / calc(var(--voile) * 0.2319)) -67px, rgb(4 20 38 / calc(var(--voile) * 0.3164)) -57px, rgb(4 20 38 / calc(var(--voile) * 0.4067)) -47px, rgb(4 20 38 / calc(var(--voile) * 0.5000)) -37px, rgb(4 20 38 / calc(var(--voile) * 0.5933)) -27px, rgb(4 20 38 / calc(var(--voile) * 0.6836)) -17px, rgb(4 20 38 / calc(var(--voile) * 0.7681)) -7px, rgb(4 20 38 / calc(var(--voile) * 0.8438)) 3px, rgb(4 20 38 / calc(var(--voile) * 0.9077)) 13px, rgb(4 20 38 / calc(var(--voile) * 0.9570)) 23px, rgb(4 20 38 / calc(var(--voile) * 0.9888)) 33px, rgb(4 20 38 / var(--voile)) 43px, rgb(4 20 38 / var(--voile)) 777px, rgb(4 20 38 / calc(var(--voile) * 0.9888)) 787px, rgb(4 20 38 / calc(var(--voile) * 0.9570)) 797px, rgb(4 20 38 / calc(var(--voile) * 0.9077)) 807px, rgb(4 20 38 / calc(var(--voile) * 0.8438)) 817px, rgb(4 20 38 / calc(var(--voile) * 0.7681)) 827px, rgb(4 20 38 / calc(var(--voile) * 0.6836)) 837px, rgb(4 20 38 / calc(var(--voile) * 0.5933)) 847px, rgb(4 20 38 / calc(var(--voile) * 0.5000)) 857px, rgb(4 20 38 / calc(var(--voile) * 0.4067)) 867px, rgb(4 20 38 / calc(var(--voile) * 0.3164)) 877px, rgb(4 20 38 / calc(var(--voile) * 0.2319)) 887px, rgb(4 20 38 / calc(var(--voile) * 0.1562)) 897px, rgb(4 20 38 / calc(var(--voile) * 0.0923)) 907px, rgb(4 20 38 / calc(var(--voile) * 0.0430)) 917px, rgb(4 20 38 / calc(var(--voile) * 0.0112)) 927px, rgba(4, 20, 38, 0) 937px);
    -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) 437px, rgba(0, 0, 0, 0.9888) 447px, rgba(0, 0, 0, 0.9570) 457px, rgba(0, 0, 0, 0.9077) 467px, rgba(0, 0, 0, 0.8438) 477px, rgba(0, 0, 0, 0.7681) 487px, rgba(0, 0, 0, 0.6836) 497px, rgba(0, 0, 0, 0.5933) 507px, rgba(0, 0, 0, 0.5000) 517px, rgba(0, 0, 0, 0.4067) 527px, rgba(0, 0, 0, 0.3164) 537px, rgba(0, 0, 0, 0.2319) 547px, rgba(0, 0, 0, 0.1562) 557px, rgba(0, 0, 0, 0.0923) 567px, rgba(0, 0, 0, 0.0430) 577px, rgba(0, 0, 0, 0.0112) 587px, rgba(0, 0, 0, 0) 597px);
    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) 437px, rgba(0, 0, 0, 0.9888) 447px, rgba(0, 0, 0, 0.9570) 457px, rgba(0, 0, 0, 0.9077) 467px, rgba(0, 0, 0, 0.8438) 477px, rgba(0, 0, 0, 0.7681) 487px, rgba(0, 0, 0, 0.6836) 497px, rgba(0, 0, 0, 0.5933) 507px, rgba(0, 0, 0, 0.5000) 517px, rgba(0, 0, 0, 0.4067) 527px, rgba(0, 0, 0, 0.3164) 537px, rgba(0, 0, 0, 0.2319) 547px, rgba(0, 0, 0, 0.1562) 557px, rgba(0, 0, 0, 0.0923) 567px, rgba(0, 0, 0, 0.0430) 577px, rgba(0, 0, 0, 0.0112) 587px, rgba(0, 0, 0, 0) 597px);
  }
}

@media (max-width: 767px) {
  [data-page="accueil"] [data-section="benefices"]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: linear-gradient(90deg, rgba(4, 20, 38, 0) -143px, rgb(4 20 38 / calc(var(--voile) * 0.0112)) -133px, rgb(4 20 38 / calc(var(--voile) * 0.0430)) -123px, rgb(4 20 38 / calc(var(--voile) * 0.0923)) -113px, rgb(4 20 38 / calc(var(--voile) * 0.1562)) -103px, rgb(4 20 38 / calc(var(--voile) * 0.2319)) -93px, rgb(4 20 38 / calc(var(--voile) * 0.3164)) -83px, rgb(4 20 38 / calc(var(--voile) * 0.4067)) -73px, rgb(4 20 38 / calc(var(--voile) * 0.5000)) -63px, rgb(4 20 38 / calc(var(--voile) * 0.5933)) -53px, rgb(4 20 38 / calc(var(--voile) * 0.6836)) -43px, rgb(4 20 38 / calc(var(--voile) * 0.7681)) -33px, rgb(4 20 38 / calc(var(--voile) * 0.8438)) -23px, rgb(4 20 38 / calc(var(--voile) * 0.9077)) -13px, rgb(4 20 38 / calc(var(--voile) * 0.9570)) -3px, rgb(4 20 38 / calc(var(--voile) * 0.9888)) 7px, rgb(4 20 38 / var(--voile)) 17px, rgb(4 20 38 / var(--voile)) 373px, rgb(4 20 38 / calc(var(--voile) * 0.9888)) 383px, rgb(4 20 38 / calc(var(--voile) * 0.9570)) 393px, rgb(4 20 38 / calc(var(--voile) * 0.9077)) 403px, rgb(4 20 38 / calc(var(--voile) * 0.8438)) 413px, rgb(4 20 38 / calc(var(--voile) * 0.7681)) 423px, rgb(4 20 38 / calc(var(--voile) * 0.6836)) 433px, rgb(4 20 38 / calc(var(--voile) * 0.5933)) 443px, rgb(4 20 38 / calc(var(--voile) * 0.5000)) 453px, rgb(4 20 38 / calc(var(--voile) * 0.4067)) 463px, rgb(4 20 38 / calc(var(--voile) * 0.3164)) 473px, rgb(4 20 38 / calc(var(--voile) * 0.2319)) 483px, rgb(4 20 38 / calc(var(--voile) * 0.1562)) 493px, rgb(4 20 38 / calc(var(--voile) * 0.0923)) 503px, rgb(4 20 38 / calc(var(--voile) * 0.0430)) 513px, rgb(4 20 38 / calc(var(--voile) * 0.0112)) 523px, rgba(4, 20, 38, 0) 533px);
    -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) 454px, rgba(0, 0, 0, 0.9888) 464px, rgba(0, 0, 0, 0.9570) 474px, rgba(0, 0, 0, 0.9077) 484px, rgba(0, 0, 0, 0.8438) 494px, rgba(0, 0, 0, 0.7681) 504px, rgba(0, 0, 0, 0.6836) 514px, rgba(0, 0, 0, 0.5933) 524px, rgba(0, 0, 0, 0.5000) 534px, rgba(0, 0, 0, 0.4067) 544px, rgba(0, 0, 0, 0.3164) 554px, rgba(0, 0, 0, 0.2319) 564px, rgba(0, 0, 0, 0.1562) 574px, rgba(0, 0, 0, 0.0923) 584px, rgba(0, 0, 0, 0.0430) 594px, rgba(0, 0, 0, 0.0112) 604px, rgba(0, 0, 0, 0) 614px);
    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) 454px, rgba(0, 0, 0, 0.9888) 464px, rgba(0, 0, 0, 0.9570) 474px, rgba(0, 0, 0, 0.9077) 484px, rgba(0, 0, 0, 0.8438) 494px, rgba(0, 0, 0, 0.7681) 504px, rgba(0, 0, 0, 0.6836) 514px, rgba(0, 0, 0, 0.5933) 524px, rgba(0, 0, 0, 0.5000) 534px, rgba(0, 0, 0, 0.4067) 544px, rgba(0, 0, 0, 0.3164) 554px, rgba(0, 0, 0, 0.2319) 564px, rgba(0, 0, 0, 0.1562) 574px, rgba(0, 0, 0, 0.0923) 584px, rgba(0, 0, 0, 0.0430) 594px, rgba(0, 0, 0, 0.0112) 604px, rgba(0, 0, 0, 0) 614px);
  }
}

}