@layer ancien {
/* 40-nos-solutions.css — page Nos solutions : sections agents, outils, générative et sécurité (SPEC § 8 ; PLAN tâche 5,
   lot 3b). Toutes les règles sont bornées à la page ([data-page="nos-solutions"]) : la feuille est liée sur toutes les
   pages (construction § 3) mais n'agit que sur celle-ci.
   A-23 (maquette « MAQUETTE SITE PAGE NOS SOLUTION .png », 720 px = 1440 : facteur 2,000) — valeurs retenues, inscrites
   au tableau des écarts du rapport du lot 3b et portées par tests/nos-solutions.test.mjs :
   - surtitres des 4 sections : double trait 44 × 13 (deux traits de 3 px en dégradé), à 18 px du texte ; gris
     (--texte-discret-sur-clair sur clair, --texte-secondaire sur sombre) ;
   - cartes des agents et de l'IA générative : blanches, bord pâle #E6EDF8, rayon 18, ombre § 7.4, AUCUN liseré coloré
     (la maquette de cette page n'en a pas) ; cartes des outils : sombres translucides (--fond-carte-sombre), bord clair
     neutre, rayon 16 ;
   - icônes : la palette de CHAQUE icône relevée sur la maquette (tour de correction 1, I-3), un dégradé par icône
     défini dans la page (#icone-<section>-<rang>) ; agents 80 px ; tuiles d'icône (outils 84 / icône 72 ; générative
     100 / icône 88) ;
   - textes (tour de correction 1, I-1 : A-01 ne tranche que H1, H2, lead et boutons) : surtitres 17 px, espacement
     5 px (16 px en mobile) ; sous-titres des cartes des agents 19 px (18 en mobile) ; textes des cartes : agents 18,
     outils 19, générative 18, étapes 18 ; numéros d'étape 30 px ;
   - étapes de la sécurité : cercles de 78 px à bordure 2 px en --degrade-bouton (double fond, comme le bouton
     secondaire § 7.2), filet vertical entre les deux étapes ; écarts relevés (en-tête → étapes 36, cercle → texte 36).
   Images de côté (tour de correction 1, I-2 : composition de la maquette, A-23 ; contraste prouvé sur les pixels
   rendus, A-27) : à partir de 1000 px, l'étendue relevée sur la maquette — outils depuis 480 / 1440 de la largeur,
   sécurité depuis 560 / 1440, toutes deux sur toute la hauteur de la section (le portable sous les cartes
   translucides, le bouclier derrière l'étape 2) ; générative depuis 900 / 1440, du haut de la section au haut de ses
   cartes (la section est une grille dont le .conteneur est une sous-grille : l'image prend la zone de la 1re rangée,
   prolongée de l'écart de 64 px). Fondus : l'image est transparente sous la colonne de texte (jusqu'à 24 px après
   elle) et pleine 200 px après, puis fondue en bas (et en haut pour la générative). Halo sombre sous l'étape 2 et
   fondu sombre du bas de la générative, comme la maquette. Sous 1000 px : image au-dessus, 260 px, collée au haut de
   la section (07-sections.css) ; la marge haute se mesure depuis son bas (A-26). */

[data-page="nos-solutions"] {
  /* Colonne de texte des sections à image de côté (≥ 1000 px) : 680 px à 1440 comme la maquette, 60 % du conteneur
     au-dessous (« pour optimiser vos process. » sur une ligne à 1200). */
  --colonne-media: min(680px, (100vw - 64px) * 0.6);
}

/* ---------- Surtitres des 4 sections : double trait (A-23) ---------- */
[data-page="nos-solutions"] .section .surtitre {
  gap: 18px;
  font-size: 17px;
  letter-spacing: 5px;
}

[data-page="nos-solutions"] .section .surtitre::before {
  width: 44px;
  height: 13px;
  background-image: var(--degrade-accent), var(--degrade-accent);
  background-size: 100% 3px, 100% 3px;
  background-position: 0% 0%, 0% 100%;
  background-repeat: no-repeat;
}

[data-page="nos-solutions"] .section--clair .surtitre {
  color: var(--texte-discret-sur-clair);
}

[data-page="nos-solutions"] .section--sombre .surtitre {
  color: var(--texte-secondaire);
}

/* ---------- Grilles § 7.4 : 3 éléments → 3 colonnes ≥ 1000, 1 en dessous ; 2 éléments → 2 colonnes ≥ 768 ---------- */
[data-page="nos-solutions"] .grille--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

[data-page="nos-solutions"] .grille--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
}

/* ---------- Agents : en-tête à gauche ; 3 cartes blanches (icône, H3, sous-titre, texte, bouton aligné en bas) ---------- */
[data-page="nos-solutions"] [data-section="agents"] .lead {
  max-width: 870px;
}

[data-page="nos-solutions"] .carte--agent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 36px 40px;
  border: 1px solid #E6EDF8;
  border-radius: 18px;
  background-color: var(--fond-blanc);
  box-shadow: 0 10px 30px rgba(11, 20, 80, 0.08);
}

[data-page="nos-solutions"] .carte--agent > .icone {
  flex: none;
  width: 80px;
  height: 80px;
}

[data-page="nos-solutions"] .carte--agent > h3 {
  margin-top: 24px;
}

/* « (Humanova Technology®) » : suite du titre en graisse 400, comme la maquette (le H3 reste en 600). */
[data-page="nos-solutions"] .h3__suite {
  font-weight: 400;
}

[data-page="nos-solutions"] .carte--agent > .sous-titre-carte {
  margin-top: var(--espace-titre-sous-titre);
  font-size: 19px;
  color: var(--sous-titre-sur-clair);
}

[data-page="nos-solutions"] .carte--agent > .texte-carte {
  margin-top: 16px;
  margin-bottom: var(--espace-avant-bouton);
  font-size: 18px;
}

/* R5.2 : le bouton descend au bas de la carte ; les cartes d'une rangée ont la même hauteur (grille), donc les 3
   boutons sont à la même ordonnée. */
[data-page="nos-solutions"] .carte--agent > .bouton {
  margin-top: auto;
}

/* ---------- Sections à image de côté (outils, générative, sécurité) ---------- */
[data-page="nos-solutions"] .section--media .lead {
  max-width: 680px;
}

@media (min-width: 1000px) {
  [data-page="nos-solutions"] .section--media {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
  }

  [data-page="nos-solutions"] .section--media-etapes {
    grid-template-rows: auto auto auto;
  }

  [data-page="nos-solutions"] .section--media > .conteneur {
    display: grid;
    grid-column: 1;
    grid-row: 1 / -1;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: subgrid;
  }

  [data-page="nos-solutions"] .section--media .section__colonne {
    max-width: var(--colonne-media);
  }

  /* Bord droit de la colonne de texte (page), d'où partent les fondus des images. */
  [data-page="nos-solutions"] .section--media {
    --droite-colonne: calc((100vw - min(1200px, 100vw - 64px)) / 2 + var(--colonne-media));
  }

  /* Étendue relevée sur la maquette (bord gauche en fraction de la largeur ; une image, élément remplacé, en absolu ne
     s'étire pas entre left et right : largeur et hauteur explicites). Outils et sécurité : sans placement de grille,
     le bloc conteneur est la boîte de remplissage de la section (toute sa hauteur). */
  [data-page="nos-solutions"] .section--media > .section__image {
    right: auto;
    left: var(--gauche-image);
    width: calc(100vw - var(--gauche-image));
    -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--droite-colonne) - var(--gauche-image) + 24px), #000 calc(var(--droite-colonne) - var(--gauche-image) + 200px)),
      linear-gradient(0deg, transparent 0%, #000 12%);
    mask-image: linear-gradient(90deg, transparent calc(var(--droite-colonne) - var(--gauche-image) + 24px), #000 calc(var(--droite-colonne) - var(--gauche-image) + 200px)),
      linear-gradient(0deg, transparent 0%, #000 12%);
  }

  [data-page="nos-solutions"] [data-section="outils"] > .section__image {
    --gauche-image: calc(100vw * 480 / 1440);
    top: 0;
    height: 100%;
    object-position: 74% 50%;
  }

  [data-page="nos-solutions"] [data-section="securite"] > .section__image {
    --gauche-image: calc(100vw * 560 / 1440);
    top: 0;
    height: 100%;
    object-position: 79% 50%;
  }

  /* Générative : dans la zone de la 1re rangée (lignes EXPLICITES : pour un enfant en absolu, une ligne « auto »
     désigne le bord de la grille), du haut de la section (− la marge de 120 px) au haut des cartes (+ l'écart de
     64 px) ; fondue en haut et en bas. */
  [data-page="nos-solutions"] [data-section="generative"] > .section__image {
    --gauche-image: calc(100vw * 900 / 1440);
    grid-column: 1 / -1;
    grid-row: 1 / 2;
    top: -120px;
    height: calc(100% + 120px + 64px);
    object-position: 87% 50%;
    -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--droite-colonne) - var(--gauche-image) + 24px), #000 calc(var(--droite-colonne) - var(--gauche-image) + 200px)),
      linear-gradient(0deg, transparent 0%, #000 20%), linear-gradient(180deg, transparent 0%, #000 20%);
    mask-image: linear-gradient(90deg, transparent calc(var(--droite-colonne) - var(--gauche-image) + 24px), #000 calc(var(--droite-colonne) - var(--gauche-image) + 200px)),
      linear-gradient(0deg, transparent 0%, #000 20%), linear-gradient(180deg, transparent 0%, #000 20%);
  }

  /* Halo sombre sous l'étape 2 : le bouclier passe derrière elle (maquette) ; voile renforcé jusqu'à ce que le pire
     pixel de chacun de ses textes atteigne le seuil (A-27). Sous le contenu du .conteneur (z-index −1 dans son
     contexte), au-dessus de l'image. Débord de 32 px : il tient dans la gouttière de la page (aucun débordement à 1000). */
  [data-page="nos-solutions"] .etape-securite + .etape-securite::after {
    content: "";
    position: absolute;
    top: -32px;
    right: -32px;
    bottom: -32px;
    left: -32px;
    z-index: -1;
    border-radius: 48px;
    background-color: rgba(4, 20, 38, 0.88);
    filter: blur(24px);
    pointer-events: none;
  }
}

/* Fondu sombre du bas de la générative (maquette : x = 300, y 3206 → 3326) : sur la marge basse, toute la largeur. */
[data-page="nos-solutions"] [data-section="generative"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 120px;
  background-image: linear-gradient(180deg, rgba(235, 242, 249, 0) 0%, #EBF2F9 25%, #D8E2ED 50%, #AABBCC 75%, #79869E 100%);
  pointer-events: none;
}

/* Sous 1000 px (image au-dessus, 260 px) : cadrage de chaque image ; à partir de 1000 px, celui de la maquette (plus haut). */
@media (max-width: 999px) {
  [data-page="nos-solutions"] [data-section="outils"] .section__image {
    object-position: 62% 50%;
  }

  [data-page="nos-solutions"] [data-section="generative"] .section__image {
    object-position: 72% 50%;
  }

  [data-page="nos-solutions"] [data-section="securite"] .section__image {
    object-position: 72% 50%;
  }
}

/* Générative : le 2e vers du H2 (« avec des contenus et des sites web IA ») tient sur une ligne à 1440, comme la
   maquette (≈ 900 px mesurés) : colonne de 910 px. */
[data-page="nos-solutions"] [data-section="generative"] {
  --colonne-media: min(910px, (100vw - 64px) * 0.67);
}

/* ---------- Outils : grille de 3 cartes sombres (tuile d'icône, H3, texte) ---------- */
[data-page="nos-solutions"] .grille--outils {
  gap: 20px;
}

/* A-23 : comme les solutions de l'Accueil, la grille déborde du conteneur (maquette : cartes de 63 à 1383 px à 1440,
   ≈ 1320 px) ; à partir de 1200 px, largeur min(1320 px, page − 64 px). */
@media (min-width: 1200px) {
  [data-page="nos-solutions"] .grille--outils {
    margin-left: calc((100% - min(1320px, 100vw - 64px)) / 2);
    margin-right: calc((100% - min(1320px, 100vw - 64px)) / 2);
  }
}

[data-page="nos-solutions"] .carte--outil {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 28px 36px 36px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  /* A-27 (lot 5, correction 2) : fond rgba(7, 27, 60, .8) au lieu de --fond-carte-sombre (.72). Avec l'image des outils
     rendue nette (sizes à la largeur rendue par cover), le pire pixel sous « Mise en place des automations… » tombait
     à 4,07:1 à 1440 ; carte plus couvrante : ≈ 5,2:1 sur un pixel blanc. On renforce le voile, jamais une tolérance. */
  background-color: rgba(7, 27, 60, 0.8);
}

[data-page="nos-solutions"] .tuile-icone {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 16px;
  background-color: rgba(0, 120, 255, 0.1);
}

[data-page="nos-solutions"] .carte--outil .icone {
  flex: none;
  width: 72px;
  height: 72px;
}

[data-page="nos-solutions"] .carte--outil > h3 {
  margin-top: var(--espace-icone-titre);
}

[data-page="nos-solutions"] .carte--outil > .texte-carte {
  margin-top: 16px;
  font-size: 19px;
  color: var(--texte-discret);
}

/* ---------- Générative : 2 cartes blanches horizontales (tuile d'icône à gauche, H3 + texte) ---------- */
[data-page="nos-solutions"] .carte--generative {
  display: flex;
  align-items: center;
  gap: 52px;
  padding: 34px 38px;
  border: 1px solid #E6EDF8;
  border-radius: 18px;
  background-color: var(--fond-blanc);
  box-shadow: 0 10px 30px rgba(11, 20, 80, 0.08);
}

[data-page="nos-solutions"] .tuile-icone--clair {
  width: 100px;
  height: 100px;
  background-color: #EEF4FD;
}

[data-page="nos-solutions"] .tuile-icone--clair .icone {
  flex: none;
  width: 88px;
  height: 88px;
}

/* I-3 : chaque icône sur son propre dégradé (palette relevée sur la maquette, icône par icône). */
[data-page="nos-solutions"] [data-section="agents"] [data-bloc="1"] > .icone { stroke: url(#icone-agents-1); }
[data-page="nos-solutions"] [data-section="agents"] [data-bloc="2"] > .icone { stroke: url(#icone-agents-2); }
[data-page="nos-solutions"] [data-section="agents"] [data-bloc="3"] > .icone { stroke: url(#icone-agents-3); }
[data-page="nos-solutions"] [data-section="outils"] [data-bloc="1"] .tuile-icone > .icone { stroke: url(#icone-outils-1); }
[data-page="nos-solutions"] [data-section="outils"] [data-bloc="2"] .tuile-icone > .icone { stroke: url(#icone-outils-2); }
[data-page="nos-solutions"] [data-section="outils"] [data-bloc="3"] .tuile-icone > .icone { stroke: url(#icone-outils-3); }
[data-page="nos-solutions"] [data-section="generative"] [data-bloc="1"] .tuile-icone > .icone { stroke: url(#icone-generative-1); }
[data-page="nos-solutions"] [data-section="generative"] [data-bloc="2"] .tuile-icone > .icone { stroke: url(#icone-generative-2); }

[data-page="nos-solutions"] .carte__corps {
  min-width: 0;
}

[data-page="nos-solutions"] .carte__corps > .texte-carte {
  margin-top: var(--espace-titre-texte-carte);
  font-size: 18px;
  color: var(--texte-discret-sur-clair);
}

/* ---------- Sécurité : 2 étapes côte à côte ≥ 768 (cercle numéroté, H3, texte), filet entre elles ; bouton ---------- */
[data-page="nos-solutions"] .etapes-securite {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 56px;
  max-width: 1080px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}

[data-page="nos-solutions"] .etape-securite {
  position: relative;
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  column-gap: 36px;
  align-items: start;
}

[data-page="nos-solutions"] .etape-securite + .etape-securite::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -29px;
  width: 1px;
  background-color: rgba(255, 255, 255, 0.08);
}

[data-page="nos-solutions"] .etape-securite__numero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 78px;
  border: 2px solid transparent;
  border-radius: 50%;
  background: linear-gradient(var(--fond-principal), var(--fond-principal)) padding-box,
    var(--degrade-bouton) border-box;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--texte-principal);
}

[data-page="nos-solutions"] .etape-securite__texte > h3 {
  padding-top: 6px;
}

[data-page="nos-solutions"] .etape-securite__texte > .texte-carte {
  margin-top: 6px;
  font-size: 18px;
  color: var(--texte-discret);
}

[data-page="nos-solutions"] .section .conteneur > .etapes-securite + .boutons {
  margin-top: var(--espace-grille-boutons);
}

/* ---------- Tablette (768–1199) ---------- */
@media (max-width: 1199px) {
  [data-page="nos-solutions"] .carte--agent {
    padding: 32px 28px;
  }

  [data-page="nos-solutions"] .carte--generative {
    gap: 24px;
    padding: 28px;
  }

  [data-page="nos-solutions"] .tuile-icone--clair {
    width: 64px;
    height: 64px;
  }

  [data-page="nos-solutions"] .tuile-icone--clair .icone {
    width: 56px;
    height: 56px;
  }
}

@media (max-width: 999px) {
  [data-page="nos-solutions"] .grille--3 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Mobile (≤ 767) ---------- */
@media (max-width: 767px) {
  [data-page="nos-solutions"] .section .surtitre {
    font-size: 16px;
  }

  [data-page="nos-solutions"] .carte--agent > .sous-titre-carte {
    font-size: 18px;
  }

  [data-page="nos-solutions"] [data-section="generative"]::after {
    height: 80px;
  }

  [data-page="nos-solutions"] .grille--2 {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-page="nos-solutions"] .carte--agent,
  [data-page="nos-solutions"] .carte--outil,
  [data-page="nos-solutions"] .carte--generative {
    padding: 24px;
  }

  [data-page="nos-solutions"] .carte--agent > .icone {
    width: 64px;
    height: 64px;
  }

  [data-page="nos-solutions"] .etapes-securite {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 32px;
  }

  [data-page="nos-solutions"] .etape-securite {
    grid-template-columns: 64px minmax(0, 1fr);
    column-gap: 20px;
  }

  [data-page="nos-solutions"] .etape-securite + .etape-securite::before {
    content: none;
  }

  [data-page="nos-solutions"] .etape-securite__numero {
    width: 64px;
    height: 64px;
  }
}

/* CTA (lot 5, correction 2, TESTS-PAGES M-3 ; A-23 : maquette de Nos solutions, paragraphe sur deux lignes d'environ
   575 px à 1440) : colonne du paragraphe de 600 px au plus, au lieu de 880. À 1440, la ligne unique de 868 px passait
   sur la silhouette de l'image (x 1031 à 1100) ; sur deux lignes équilibrées (≈ 440 px), elle s'arrête à x ≈ 940, et le
   contenu, plus haut de 24 px, remonte le titre au-dessus de la tête. CTA 550 px, contenu centré, voile du § 6 inchangés. */
[data-page="nos-solutions"] .cta--centre .cta__contenu > p {
  max-width: 600px;
}

/* ---------- Voile du hero 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, .26) s'ajoute au voile du § 6 (::before, inchangé) : uniforme sous
   tous les caractères du bloc de texte, puis fondue sur 200 px ; l'image reste visible au-delà. A calculé pour que la
   couleur moyenne sous les caractères ait la luminance du fond de la maquette (0,01736 → 0,01400 ; tests/voiles.test.mjs,
   .contrat/site-2026/l5/scripts/c2-alphas.py, rapport du lot 5 § 12). Caractères relevés à 1440 jusqu'à 734 px du bord
   gauche du conteneur (50 % − 600 px) : uniforme jusqu'à + 60 px. Le CTA de cette page est déjà plus sombre que sa
   maquette (0,01331 contre 0,04870) : pas de renfort. ---------- */
@media (min-width: 1200px) {
  [data-page="nos-solutions"] .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(90deg, rgba(4, 20, 38, 0.26) 0%, rgba(4, 20, 38, 0.26) calc(50% + 194px), rgba(4, 20, 38, 0) calc(50% + 394px));
  }
}

/* ========== Tour 3 du lot 5 : fidélité à la maquette (A-01 v5 ; valeurs : comparaison-maquette.md, à 1440 ;
   proportion de la spec à 820 et 390). E1 (P2) H1 du hero 51 px ; E2 (P2) leads des agents, des outils et de la
   générative 23 px. Texte du CTA (E4, T5a) : 08-cta.css ; sa colonne de 600 px est gardée (deux lignes, silhouette
   dégagée ; la maquette en a deux de ≈ 605 px). E3 non appliqué : le texte des cartes des agents est déjà à 18 px sur
   le site (le rapport le croyait à 15) ; le rapport des corps (12 / 10) donnerait ≈ 22 px, à relever de nouveau. ===== */
[data-page="nos-solutions"] .hero h1 {
  font-size: 51px;
}

[data-page="nos-solutions"] :is([data-section="agents"], [data-section="outils"], [data-section="generative"]) .lead {
  font-size: 23px;
}

@media (max-width: 1199px) {
  [data-page="nos-solutions"] .hero h1 { font-size: 41px; } /* H1 48 */
  [data-page="nos-solutions"] :is([data-section="agents"], [data-section="outils"], [data-section="generative"]) .lead { font-size: 22px; } /* Lead 19 */
}

@media (max-width: 767px) {
  [data-page="nos-solutions"] .hero h1 { font-size: 31px; } /* H1 36 */
  [data-page="nos-solutions"] :is([data-section="agents"], [data-section="outils"], [data-section="generative"]) .lead { font-size: 20px; } /* Lead 17 */
}

/* ---------- 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,02119 → 0,01400 à 820 (A = 0,42), 0,02409 → 0,01400 à 390 (0,49) ; le CTA est déjà
   plus sombre que la maquette. ---------- */
@media (min-width: 768px) and (max-width: 1199px) {
  [data-page="nos-solutions"] .hero::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.215) 188px, rgba(4, 20, 38, 0.86) 228px, rgba(4, 20, 38, 0.86) 518px, rgba(4, 20, 38, 0.215) 558px, rgba(4, 20, 38, 0) 638px);
  }
}

@media (max-width: 767px) {
  [data-page="nos-solutions"] .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(180deg, rgba(4, 20, 38, 0) 8px, rgba(4, 20, 38, 0.207) 88px, rgba(4, 20, 38, 0.83) 128px, rgba(4, 20, 38, 0.83) 450px, rgba(4, 20, 38, 0.207) 490px, rgba(4, 20, 38, 0) 570px);
  }
}

/* ---------- Photos comme la maquette (A-36, SPEC v4.12 § 9 ; lot 5, tour 4) ---------- */
/* Hero : main, stylet et écrans entiers, bord droit de la maquette (x 687–1988 de la source à 1440). */
[data-page="nos-solutions"] .hero__image {
  object-position: 92% 50%;
}

/* IA générative (photo absente du dossier, A-37) : la plus proche hors du hero (Unknown-17 2, déjà le hero de la page)
   est Unknown-17, recadrée sur les panneaux flottants (images.json) ; tête de la personne et panneaux du haut gardés. */
[data-page="nos-solutions"] [data-section="generative"] .section__image {
  object-position: 50% 30%;
}

/* ---------- 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.84 / 0.84 / 0.84 (1440 / 820 / 390), fondu smoothstep sur 160 px au-delà des caractères + 0 px jusqu'à 0, puis 0.3 au bord droit ; image brightness(1.3) ; voile bas du § 6 seul. */
[data-page="nos-solutions"] .hero {
  --voile: 0.84;
}

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

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

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

@media (min-width: 1200px) {
  [data-page="nos-solutions"] .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% + 20px), rgb(4 20 38 / calc(var(--voile) * 0.9888)) calc(50% + 30px), rgb(4 20 38 / calc(var(--voile) * 0.9570)) calc(50% + 40px), rgb(4 20 38 / calc(var(--voile) * 0.9077)) calc(50% + 50px), rgb(4 20 38 / calc(var(--voile) * 0.8438)) calc(50% + 60px), rgb(4 20 38 / calc(var(--voile) * 0.7681)) calc(50% + 70px), rgb(4 20 38 / calc(var(--voile) * 0.6836)) calc(50% + 80px), rgb(4 20 38 / calc(var(--voile) * 0.5933)) calc(50% + 90px), rgb(4 20 38 / calc(var(--voile) * 0.5000)) calc(50% + 100px), rgb(4 20 38 / calc(var(--voile) * 0.4067)) calc(50% + 110px), rgb(4 20 38 / calc(var(--voile) * 0.3164)) calc(50% + 120px), rgb(4 20 38 / calc(var(--voile) * 0.2319)) calc(50% + 130px), rgb(4 20 38 / calc(var(--voile) * 0.1562)) calc(50% + 140px), rgb(4 20 38 / calc(var(--voile) * 0.0923)) calc(50% + 150px), rgb(4 20 38 / calc(var(--voile) * 0.0430)) calc(50% + 160px), rgb(4 20 38 / calc(var(--voile) * 0.0112)) calc(50% + 170px), rgba(4, 20, 38, 0) calc(50% + 180px), rgba(4, 20, 38, 0.3) 100%);
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  [data-page="nos-solutions"] .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(180deg, rgba(4, 20, 38, 0) 112px, rgb(4 20 38 / calc(var(--voile) * 0.0112)) 122px, rgb(4 20 38 / calc(var(--voile) * 0.0430)) 132px, rgb(4 20 38 / calc(var(--voile) * 0.0923)) 142px, rgb(4 20 38 / calc(var(--voile) * 0.1562)) 152px, rgb(4 20 38 / calc(var(--voile) * 0.2319)) 162px, rgb(4 20 38 / calc(var(--voile) * 0.3164)) 172px, rgb(4 20 38 / calc(var(--voile) * 0.4067)) 182px, rgb(4 20 38 / calc(var(--voile) * 0.5000)) 192px, rgb(4 20 38 / calc(var(--voile) * 0.5933)) 202px, rgb(4 20 38 / calc(var(--voile) * 0.6836)) 212px, rgb(4 20 38 / calc(var(--voile) * 0.7681)) 222px, rgb(4 20 38 / calc(var(--voile) * 0.8438)) 232px, rgb(4 20 38 / calc(var(--voile) * 0.9077)) 242px, rgb(4 20 38 / calc(var(--voile) * 0.9570)) 252px, rgb(4 20 38 / calc(var(--voile) * 0.9888)) 262px, rgb(4 20 38 / var(--voile)) 272px, rgb(4 20 38 / var(--voile)) 547px, rgb(4 20 38 / calc(var(--voile) * 0.9888)) 557px, rgb(4 20 38 / calc(var(--voile) * 0.9570)) 567px, rgb(4 20 38 / calc(var(--voile) * 0.9077)) 577px, rgb(4 20 38 / calc(var(--voile) * 0.8438)) 587px, rgb(4 20 38 / calc(var(--voile) * 0.7681)) 597px, rgb(4 20 38 / calc(var(--voile) * 0.6836)) 607px, rgb(4 20 38 / calc(var(--voile) * 0.5933)) 617px, rgb(4 20 38 / calc(var(--voile) * 0.5000)) 627px, rgb(4 20 38 / calc(var(--voile) * 0.4067)) 637px, rgb(4 20 38 / calc(var(--voile) * 0.3164)) 647px, rgb(4 20 38 / calc(var(--voile) * 0.2319)) 657px, rgb(4 20 38 / calc(var(--voile) * 0.1562)) 667px, rgb(4 20 38 / calc(var(--voile) * 0.0923)) 677px, rgb(4 20 38 / calc(var(--voile) * 0.0430)) 687px, rgb(4 20 38 / calc(var(--voile) * 0.0112)) 697px, rgba(4, 20, 38, 0) 707px);
  }
}

@media (max-width: 767px) {
  [data-page="nos-solutions"] .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(180deg, rgba(4, 20, 38, 0) 12px, rgb(4 20 38 / calc(var(--voile) * 0.0112)) 22px, rgb(4 20 38 / calc(var(--voile) * 0.0430)) 32px, rgb(4 20 38 / calc(var(--voile) * 0.0923)) 42px, rgb(4 20 38 / calc(var(--voile) * 0.1562)) 52px, rgb(4 20 38 / calc(var(--voile) * 0.2319)) 62px, rgb(4 20 38 / calc(var(--voile) * 0.3164)) 72px, rgb(4 20 38 / calc(var(--voile) * 0.4067)) 82px, rgb(4 20 38 / calc(var(--voile) * 0.5000)) 92px, rgb(4 20 38 / calc(var(--voile) * 0.5933)) 102px, rgb(4 20 38 / calc(var(--voile) * 0.6836)) 112px, rgb(4 20 38 / calc(var(--voile) * 0.7681)) 122px, rgb(4 20 38 / calc(var(--voile) * 0.8438)) 132px, rgb(4 20 38 / calc(var(--voile) * 0.9077)) 142px, rgb(4 20 38 / calc(var(--voile) * 0.9570)) 152px, rgb(4 20 38 / calc(var(--voile) * 0.9888)) 162px, rgb(4 20 38 / var(--voile)) 172px, rgb(4 20 38 / var(--voile)) 474px, rgb(4 20 38 / calc(var(--voile) * 0.9888)) 484px, rgb(4 20 38 / calc(var(--voile) * 0.9570)) 494px, rgb(4 20 38 / calc(var(--voile) * 0.9077)) 504px, rgb(4 20 38 / calc(var(--voile) * 0.8438)) 514px, rgb(4 20 38 / calc(var(--voile) * 0.7681)) 524px, rgb(4 20 38 / calc(var(--voile) * 0.6836)) 534px, rgb(4 20 38 / calc(var(--voile) * 0.5933)) 544px, rgb(4 20 38 / calc(var(--voile) * 0.5000)) 554px, rgb(4 20 38 / calc(var(--voile) * 0.4067)) 564px, rgb(4 20 38 / calc(var(--voile) * 0.3164)) 574px, rgb(4 20 38 / calc(var(--voile) * 0.2319)) 584px, rgb(4 20 38 / calc(var(--voile) * 0.1562)) 594px, rgb(4 20 38 / calc(var(--voile) * 0.0923)) 604px, rgb(4 20 38 / calc(var(--voile) * 0.0430)) 614px, rgb(4 20 38 / calc(var(--voile) * 0.0112)) 624px, rgba(4, 20, 38, 0) 634px);
  }
}

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

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

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

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

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

@media (min-width: 1200px) {
  [data-page="nos-solutions"] .cta::before {
    background-image: linear-gradient(90deg, rgba(4, 20, 38, 0.25) calc(50% - 509px), rgb(4 20 38 / calc(0.25 + (var(--voile) - 0.25) * 0.0112)) calc(50% - 499px), rgb(4 20 38 / calc(0.25 + (var(--voile) - 0.25) * 0.0430)) calc(50% - 489px), rgb(4 20 38 / calc(0.25 + (var(--voile) - 0.25) * 0.0923)) calc(50% - 479px), rgb(4 20 38 / calc(0.25 + (var(--voile) - 0.25) * 0.1562)) calc(50% - 469px), rgb(4 20 38 / calc(0.25 + (var(--voile) - 0.25) * 0.2319)) calc(50% - 459px), rgb(4 20 38 / calc(0.25 + (var(--voile) - 0.25) * 0.3164)) calc(50% - 449px), rgb(4 20 38 / calc(0.25 + (var(--voile) - 0.25) * 0.4067)) calc(50% - 439px), rgb(4 20 38 / calc(0.25 + (var(--voile) - 0.25) * 0.5000)) calc(50% - 429px), rgb(4 20 38 / calc(0.25 + (var(--voile) - 0.25) * 0.5933)) calc(50% - 419px), rgb(4 20 38 / calc(0.25 + (var(--voile) - 0.25) * 0.6836)) calc(50% - 409px), rgb(4 20 38 / calc(0.25 + (var(--voile) - 0.25) * 0.7681)) calc(50% - 399px), rgb(4 20 38 / calc(0.25 + (var(--voile) - 0.25) * 0.8438)) calc(50% - 389px), rgb(4 20 38 / calc(0.25 + (var(--voile) - 0.25) * 0.9077)) calc(50% - 379px), rgb(4 20 38 / calc(0.25 + (var(--voile) - 0.25) * 0.9570)) calc(50% - 369px), rgb(4 20 38 / calc(0.25 + (var(--voile) - 0.25) * 0.9888)) calc(50% - 359px), rgb(4 20 38 / var(--voile)) calc(50% - 349px), rgb(4 20 38 / var(--voile)) calc(50% + 349px), rgb(4 20 38 / calc(var(--voile) * 0.9888)) calc(50% + 359px), rgb(4 20 38 / calc(var(--voile) * 0.9570)) calc(50% + 369px), rgb(4 20 38 / calc(var(--voile) * 0.9077)) calc(50% + 379px), rgb(4 20 38 / calc(var(--voile) * 0.8438)) calc(50% + 389px), rgb(4 20 38 / calc(var(--voile) * 0.7681)) calc(50% + 399px), rgb(4 20 38 / calc(var(--voile) * 0.6836)) calc(50% + 409px), rgb(4 20 38 / calc(var(--voile) * 0.5933)) calc(50% + 419px), rgb(4 20 38 / calc(var(--voile) * 0.5000)) calc(50% + 429px), rgb(4 20 38 / calc(var(--voile) * 0.4067)) calc(50% + 439px), rgb(4 20 38 / calc(var(--voile) * 0.3164)) calc(50% + 449px), rgb(4 20 38 / calc(var(--voile) * 0.2319)) calc(50% + 459px), rgb(4 20 38 / calc(var(--voile) * 0.1562)) calc(50% + 469px), rgb(4 20 38 / calc(var(--voile) * 0.0923)) calc(50% + 479px), rgb(4 20 38 / calc(var(--voile) * 0.0430)) calc(50% + 489px), rgb(4 20 38 / calc(var(--voile) * 0.0112)) calc(50% + 499px), rgba(4, 20, 38, 0) calc(50% + 509px));
  }

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

@media (min-width: 768px) and (max-width: 1199px) {
  [data-page="nos-solutions"] .cta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(180deg, rgba(4, 20, 38, 0) -58px, rgb(4 20 38 / calc(var(--voile) * 0.0112)) -48px, rgb(4 20 38 / calc(var(--voile) * 0.0430)) -38px, rgb(4 20 38 / calc(var(--voile) * 0.0923)) -28px, rgb(4 20 38 / calc(var(--voile) * 0.1562)) -18px, rgb(4 20 38 / calc(var(--voile) * 0.2319)) -8px, rgb(4 20 38 / calc(var(--voile) * 0.3164)) 2px, rgb(4 20 38 / calc(var(--voile) * 0.4067)) 12px, rgb(4 20 38 / calc(var(--voile) * 0.5000)) 22px, rgb(4 20 38 / calc(var(--voile) * 0.5933)) 32px, rgb(4 20 38 / calc(var(--voile) * 0.6836)) 42px, rgb(4 20 38 / calc(var(--voile) * 0.7681)) 52px, rgb(4 20 38 / calc(var(--voile) * 0.8438)) 62px, rgb(4 20 38 / calc(var(--voile) * 0.9077)) 72px, rgb(4 20 38 / calc(var(--voile) * 0.9570)) 82px, rgb(4 20 38 / calc(var(--voile) * 0.9888)) 92px, rgb(4 20 38 / var(--voile)) 102px, rgb(4 20 38 / var(--voile)) 376px, rgb(4 20 38 / calc(var(--voile) * 0.9888)) 386px, rgb(4 20 38 / calc(var(--voile) * 0.9570)) 396px, rgb(4 20 38 / calc(var(--voile) * 0.9077)) 406px, rgb(4 20 38 / calc(var(--voile) * 0.8438)) 416px, rgb(4 20 38 / calc(var(--voile) * 0.7681)) 426px, rgb(4 20 38 / calc(var(--voile) * 0.6836)) 436px, rgb(4 20 38 / calc(var(--voile) * 0.5933)) 446px, rgb(4 20 38 / calc(var(--voile) * 0.5000)) 456px, rgb(4 20 38 / calc(var(--voile) * 0.4067)) 466px, rgb(4 20 38 / calc(var(--voile) * 0.3164)) 476px, rgb(4 20 38 / calc(var(--voile) * 0.2319)) 486px, rgb(4 20 38 / calc(var(--voile) * 0.1562)) 496px, rgb(4 20 38 / calc(var(--voile) * 0.0923)) 506px, rgb(4 20 38 / calc(var(--voile) * 0.0430)) 516px, rgb(4 20 38 / calc(var(--voile) * 0.0112)) 526px, rgba(4, 20, 38, 0) 536px);
  }
}

@media (max-width: 767px) {
  [data-page="nos-solutions"] .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)) 382px, rgb(4 20 38 / calc(var(--voile) * 0.9888)) 392px, rgb(4 20 38 / calc(var(--voile) * 0.9570)) 402px, rgb(4 20 38 / calc(var(--voile) * 0.9077)) 412px, rgb(4 20 38 / calc(var(--voile) * 0.8438)) 422px, rgb(4 20 38 / calc(var(--voile) * 0.7681)) 432px, rgb(4 20 38 / calc(var(--voile) * 0.6836)) 442px, rgb(4 20 38 / calc(var(--voile) * 0.5933)) 452px, rgb(4 20 38 / calc(var(--voile) * 0.5000)) 462px, rgb(4 20 38 / calc(var(--voile) * 0.4067)) 472px, rgb(4 20 38 / calc(var(--voile) * 0.3164)) 482px, rgb(4 20 38 / calc(var(--voile) * 0.2319)) 492px, rgb(4 20 38 / calc(var(--voile) * 0.1562)) 502px, rgb(4 20 38 / calc(var(--voile) * 0.0923)) 512px, rgb(4 20 38 / calc(var(--voile) * 0.0430)) 522px, rgb(4 20 38 / calc(var(--voile) * 0.0112)) 532px, rgba(4, 20, 38, 0) 542px);
  }
}

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

/* IA générative (A-38, autres photos) : photo à 0,63 de la lumière de la maquette (c5-photos-lumiere.py), éclaircie. */
[data-page="nos-solutions"] [data-section="generative"] .section__image {
  filter: brightness(1.35);
}

/* nos-solutions/outils (A-39) : masque de l'image fondu en smoothstep (176 px depuis la colonne + 24 px ; 160 px en bas) ; image brightness(1.35). */
@media (min-width: 1000px) {
  [data-page="nos-solutions"] [data-section="outils"] > .section__image {
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) calc(var(--droite-colonne) - var(--gauche-image) + 24px), rgba(0, 0, 0, 0.0093) calc(var(--droite-colonne) - var(--gauche-image) + 34px), rgba(0, 0, 0, 0.0358) calc(var(--droite-colonne) - var(--gauche-image) + 44px), rgba(0, 0, 0, 0.0773) calc(var(--droite-colonne) - var(--gauche-image) + 54px), rgba(0, 0, 0, 0.1315) calc(var(--droite-colonne) - var(--gauche-image) + 64px), rgba(0, 0, 0, 0.1963) calc(var(--droite-colonne) - var(--gauche-image) + 74px), rgba(0, 0, 0, 0.2694) calc(var(--droite-colonne) - var(--gauche-image) + 84px), rgba(0, 0, 0, 0.3487) calc(var(--droite-colonne) - var(--gauche-image) + 94px), rgba(0, 0, 0, 0.4320) calc(var(--droite-colonne) - var(--gauche-image) + 104px), rgba(0, 0, 0, 0.5170) calc(var(--droite-colonne) - var(--gauche-image) + 114px), rgba(0, 0, 0, 0.6016) calc(var(--droite-colonne) - var(--gauche-image) + 124px), rgba(0, 0, 0, 0.6836) calc(var(--droite-colonne) - var(--gauche-image) + 134px), rgba(0, 0, 0, 0.7607) calc(var(--droite-colonne) - var(--gauche-image) + 144px), rgba(0, 0, 0, 0.8308) calc(var(--droite-colonne) - var(--gauche-image) + 154px), rgba(0, 0, 0, 0.8916) calc(var(--droite-colonne) - var(--gauche-image) + 164px), rgba(0, 0, 0, 0.9410) calc(var(--droite-colonne) - var(--gauche-image) + 174px), rgba(0, 0, 0, 0.9767) calc(var(--droite-colonne) - var(--gauche-image) + 184px), rgba(0, 0, 0, 0.9966) calc(var(--droite-colonne) - var(--gauche-image) + 194px), rgb(0, 0, 0) calc(var(--droite-colonne) - var(--gauche-image) + 200px)), linear-gradient(0deg, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.0112) 10px, rgba(0, 0, 0, 0.0430) 20px, rgba(0, 0, 0, 0.0923) 30px, rgba(0, 0, 0, 0.1562) 40px, rgba(0, 0, 0, 0.2319) 50px, rgba(0, 0, 0, 0.3164) 60px, rgba(0, 0, 0, 0.4067) 70px, rgba(0, 0, 0, 0.5000) 80px, rgba(0, 0, 0, 0.5933) 90px, rgba(0, 0, 0, 0.6836) 100px, rgba(0, 0, 0, 0.7681) 110px, rgba(0, 0, 0, 0.8438) 120px, rgba(0, 0, 0, 0.9077) 130px, rgba(0, 0, 0, 0.9570) 140px, rgba(0, 0, 0, 0.9888) 150px, rgb(0, 0, 0) 160px);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) calc(var(--droite-colonne) - var(--gauche-image) + 24px), rgba(0, 0, 0, 0.0093) calc(var(--droite-colonne) - var(--gauche-image) + 34px), rgba(0, 0, 0, 0.0358) calc(var(--droite-colonne) - var(--gauche-image) + 44px), rgba(0, 0, 0, 0.0773) calc(var(--droite-colonne) - var(--gauche-image) + 54px), rgba(0, 0, 0, 0.1315) calc(var(--droite-colonne) - var(--gauche-image) + 64px), rgba(0, 0, 0, 0.1963) calc(var(--droite-colonne) - var(--gauche-image) + 74px), rgba(0, 0, 0, 0.2694) calc(var(--droite-colonne) - var(--gauche-image) + 84px), rgba(0, 0, 0, 0.3487) calc(var(--droite-colonne) - var(--gauche-image) + 94px), rgba(0, 0, 0, 0.4320) calc(var(--droite-colonne) - var(--gauche-image) + 104px), rgba(0, 0, 0, 0.5170) calc(var(--droite-colonne) - var(--gauche-image) + 114px), rgba(0, 0, 0, 0.6016) calc(var(--droite-colonne) - var(--gauche-image) + 124px), rgba(0, 0, 0, 0.6836) calc(var(--droite-colonne) - var(--gauche-image) + 134px), rgba(0, 0, 0, 0.7607) calc(var(--droite-colonne) - var(--gauche-image) + 144px), rgba(0, 0, 0, 0.8308) calc(var(--droite-colonne) - var(--gauche-image) + 154px), rgba(0, 0, 0, 0.8916) calc(var(--droite-colonne) - var(--gauche-image) + 164px), rgba(0, 0, 0, 0.9410) calc(var(--droite-colonne) - var(--gauche-image) + 174px), rgba(0, 0, 0, 0.9767) calc(var(--droite-colonne) - var(--gauche-image) + 184px), rgba(0, 0, 0, 0.9966) calc(var(--droite-colonne) - var(--gauche-image) + 194px), rgb(0, 0, 0) calc(var(--droite-colonne) - var(--gauche-image) + 200px)), linear-gradient(0deg, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.0112) 10px, rgba(0, 0, 0, 0.0430) 20px, rgba(0, 0, 0, 0.0923) 30px, rgba(0, 0, 0, 0.1562) 40px, rgba(0, 0, 0, 0.2319) 50px, rgba(0, 0, 0, 0.3164) 60px, rgba(0, 0, 0, 0.4067) 70px, rgba(0, 0, 0, 0.5000) 80px, rgba(0, 0, 0, 0.5933) 90px, rgba(0, 0, 0, 0.6836) 100px, rgba(0, 0, 0, 0.7681) 110px, rgba(0, 0, 0, 0.8438) 120px, rgba(0, 0, 0, 0.9077) 130px, rgba(0, 0, 0, 0.9570) 140px, rgba(0, 0, 0, 0.9888) 150px, rgb(0, 0, 0) 160px);
  }
}

@media (max-width: 999px) {
  [data-page="nos-solutions"] [data-section="outils"] > .section__image {
    -webkit-mask-image: linear-gradient(180deg, rgb(0, 0, 0) calc(100% - 160px), rgba(0, 0, 0, 0.9888) calc(100% - 150px), rgba(0, 0, 0, 0.9570) calc(100% - 140px), rgba(0, 0, 0, 0.9077) calc(100% - 130px), rgba(0, 0, 0, 0.8438) calc(100% - 120px), rgba(0, 0, 0, 0.7681) calc(100% - 110px), rgba(0, 0, 0, 0.6836) calc(100% - 100px), rgba(0, 0, 0, 0.5933) calc(100% - 90px), rgba(0, 0, 0, 0.5000) calc(100% - 80px), rgba(0, 0, 0, 0.4067) calc(100% - 70px), rgba(0, 0, 0, 0.3164) calc(100% - 60px), rgba(0, 0, 0, 0.2319) calc(100% - 50px), rgba(0, 0, 0, 0.1562) calc(100% - 40px), rgba(0, 0, 0, 0.0923) calc(100% - 30px), rgba(0, 0, 0, 0.0430) calc(100% - 20px), rgba(0, 0, 0, 0.0112) calc(100% - 10px), rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(180deg, rgb(0, 0, 0) calc(100% - 160px), rgba(0, 0, 0, 0.9888) calc(100% - 150px), rgba(0, 0, 0, 0.9570) calc(100% - 140px), rgba(0, 0, 0, 0.9077) calc(100% - 130px), rgba(0, 0, 0, 0.8438) calc(100% - 120px), rgba(0, 0, 0, 0.7681) calc(100% - 110px), rgba(0, 0, 0, 0.6836) calc(100% - 100px), rgba(0, 0, 0, 0.5933) calc(100% - 90px), rgba(0, 0, 0, 0.5000) calc(100% - 80px), rgba(0, 0, 0, 0.4067) calc(100% - 70px), rgba(0, 0, 0, 0.3164) calc(100% - 60px), rgba(0, 0, 0, 0.2319) calc(100% - 50px), rgba(0, 0, 0, 0.1562) calc(100% - 40px), rgba(0, 0, 0, 0.0923) calc(100% - 30px), rgba(0, 0, 0, 0.0430) calc(100% - 20px), rgba(0, 0, 0, 0.0112) calc(100% - 10px), rgba(0, 0, 0, 0) 100%);
  }
}

[data-page="nos-solutions"] [data-section="outils"] > .section__image {
  filter: brightness(1.35);
}

}