@layer ancien {
/* 60-contact.css — page Contact, section « formulaire » (SPEC § 8, § 12.1 ; tâche 7, R7.1 et R7.8), lot 4b.
   Deux cartes sur la section claire : formulaire (≈ 60 %) et coordonnées (≈ 40 %), côte à côte ≥ 1000 px, empilées
   dessous ; champs Nom/Prénom et Email/Téléphone par paires ≥ 768 px.
   Valeurs relevées sur la maquette « MAQUETTE SITE PAGE CONTACT.png » (1024 px de large, facteur 1,406) quand la spec
   ne tranche pas ou s'en écarte de plus de 10 % (A-23 ; tableau des écarts au rapport du lot 4b) : surtitres 17 px,
   P d'introduction au style Lead, libellés 18 px / 500, champs de 60 px (rayon 12, fond #F2F7FC, bord #DCE6F6) avec
   icône bleue de 30 px, zone de message de 132 px, liste à chevron bleu, icône d'envoi à gauche du bouton, cadenas
   de 44 px à côté du bouton (la spec dit « sous »), coordonnées en sous-cartes avec pastille ronde de 84 px et icône
   bleue de 52 px, H4 en 600, valeurs 20 px, détails 17 px. Ce qui prime sur la maquette : H2 et bouton (A-01),
   marges 120 / 80 px (§ 5), mots de CONTENU.md, contrastes (§ 16).
   Couleurs des textes posées ici sur des sélecteurs plus forts que ceux de 07-sections.css (p, h4 sur clair).
   Tous les sélecteurs sont bornés à la page (data-page="contact"). */

/* Marges vides de la section : 120 / 120 / 80 px (§ 5, règle chiffrée ; R7.8), héritées de .section (07-sections.css ;
   CODE M3, lot 5, tour 4 : la copie locale est retirée). */

/* Un élément [hidden] reste masqué même si une règle lui donne un affichage (alerte, formulaire après envoi). */
[data-page="contact"] .section--formulaire [hidden] {
  display: none !important;
}

/* Les deux cartes : 3 / 2 (≈ 60 / 40 %), écart 24 px (§ 7.4), même hauteur. */
[data-page="contact"] .contact {
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  align-items: stretch;
}

/* Cartes (§ 7.4 : rayon 18, ombre, marge intérieure 32, 24 en mobile) habillées comme la maquette (A-23, tour de
   correction 1, I-1 ; relevé l4b/releves/habillage-cartes.txt) : surfaces bleutées TRANSLUCIDES — le fond des cartes
   suit le fond de section qui passe dessous (carte 1 de #F9FCFE à #ECF5FE, carte 2 de #FAFCFE à #EBF5FE), d'où une
   opacité de 0,4 à 0,65 : voile blanc bleuté à 60 % ; carte des coordonnées plus bleutée (#F0F7FE contre #F9FCFE au même
   endroit) ; liseré de 1 px bleu clair (relevé #DAEBFD à #E6F0FD sur le bord). */
[data-page="contact"] .contact__carte {
  padding: 32px;
  border: 1px solid rgba(190, 215, 248, 0.45);
  border-radius: 18px;
  background-color: rgba(249, 253, 255, 0.6);
  box-shadow: 0 10px 30px rgba(11, 20, 80, 0.08);
  color: var(--texte-sur-clair);
}

[data-page="contact"] .contact__carte--coordonnees {
  background-color: rgba(237, 248, 255, 0.6);
}

/* Surtitres (A-23) : 17 px, espacement 3 px (spec 13 / 3) ; titre et introduction (§ 4.2 : 18 et 24 px). */
[data-page="contact"] .contact__carte > .surtitre {
  font-size: 17px;
  letter-spacing: 3px;
}

/* Premier surtitre (carte du formulaire) : trait de 49 px à 20 px du texte (A-23, tour de correction 1, I-2 : relevés
   49,2 et 19,7 px, l4b/releves/trait-surtitres.txt ; spec 40 / 14). Second (coordonnées) : relevés 43,6 et 14,1 px, à
   moins de 10 % de la spec : 40 / 14 gardés. */
[data-page="contact"] .contact__carte--formulaire > .surtitre {
  gap: 20px;
}

[data-page="contact"] .contact__carte--formulaire > .surtitre::before {
  width: 49px;
}

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

[data-page="contact"] .contact__carte > h2 + .contact__intro {
  margin-top: var(--espace-titre-texte);
}

/* Introduction au style Lead (A-23 : relevé 20,3–20,7 px), gris bleuté de la maquette (--texte-discret-sur-clair). */
[data-page="contact"] .contact__carte > p.contact__intro {
  color: var(--texte-discret-sur-clair);
}

/* ---------- Formulaire ---------- */

[data-page="contact"] .formulaire {
  margin-top: 32px;
}

[data-page="contact"] .formulaire__champs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 16px;
}

[data-page="contact"] .champ {
  min-width: 0;
}

[data-page="contact"] .champ--plein {
  grid-column: 1 / -1;
}

/* Libellés (A-23) : 18 px, 500, bleu nuit ; astérisque rouge (6,1:1 sur blanc). */
[data-page="contact"] .champ__libelle {
  display: block;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--titre-sur-clair);
}

[data-page="contact"] .champ__requis {
  margin-left: 4px;
  color: #C62828;
}

/* Champ (A-23) : 60 px, rayon 12, fond #F2F7FC, bord 1 px #DCE6F6 ; texte à 76 px du bord gauche, après l'icône.
   Marge intérieure droite 8 px (lot 5, correction 1, M-2) : l'indication la plus longue, « Votre numéro de téléphone »
   (16 px, 220,5 px de large), tient en entier dans le champ le plus étroit (308 px à 390, 312 à 1440) ; à 20 px elle
   était rognée. Texte, taille et icône de la maquette inchangés. */
[data-page="contact"] .champ__saisie {
  position: relative;
  margin-top: 10px;
}

[data-page="contact"] .champ__controle {
  display: block;
  width: 100%;
  height: 60px;
  margin: 0;
  padding: 0 8px 0 75px;
  border: 1px solid #DCE6F6;
  border-radius: 12px;
  background-color: #F2F7FC;
  color: var(--titre-sur-clair);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

[data-page="contact"] .champ__controle::placeholder {
  color: var(--texte-discret-sur-clair);
  opacity: 1;
}

[data-page="contact"] .champ__controle:focus {
  border-color: var(--bouton-1);
}

[data-page="contact"] .champ__controle[aria-invalid="true"] {
  border-color: #C62828;
}

/* Icône du champ (A-23) : 30 px, trait bleu, centrée sur la hauteur du champ ; en haut pour la zone de message. */
[data-page="contact"] .champ__saisie > .icone {
  position: absolute;
  top: 15px;
  left: 22px;
  width: 30px;
  height: 30px;
  stroke: var(--bouton-1);
  pointer-events: none;
}

/* Liste : apparence propre, chevron bleu dessiné (bordures d'un carré tourné, sans image) ; sujet non choisi en
   couleur d'indication. */
[data-page="contact"] select.champ__controle {
  appearance: none;
  padding-right: 56px;
  cursor: pointer;
}

[data-page="contact"] select.champ__controle:invalid {
  color: var(--texte-discret-sur-clair);
}

[data-page="contact"] select.champ__controle option {
  color: var(--titre-sur-clair);
}

[data-page="contact"] .champ__saisie--liste::after {
  content: "";
  position: absolute;
  top: 23px;
  right: 26px;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--bouton-1);
  border-bottom: 2px solid var(--bouton-1);
  transform: rotate(45deg);
  pointer-events: none;
}

/* Zone de message (A-23) : 132 px de haut, agrandissable en hauteur. */
[data-page="contact"] textarea.champ__controle {
  height: 132px;
  padding-top: 18px;
  padding-bottom: 18px;
  resize: vertical;
}

/* Message d'erreur sous un champ (§ 12.2) : rouge, 14 px (5,6:1 sur blanc). */
[data-page="contact"] .champ__erreur {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.45;
  color: #C62828;
}

/* Piège (§ 12.1) : hors écran, jamais vu ni atteint au clavier ; texte lisible s'il était montré. */
[data-page="contact"] .formulaire__piege {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  color: var(--texte-sur-clair);
}

/* Bloc d'alerte (§ 12.1, § 12.2) : vide et masqué par défaut ; message « invalide » ou « erreur ». */
[data-page="contact"] .formulaire__alerte {
  margin-top: 24px;
  padding: 12px 16px;
  border-radius: 12px;
  background-color: #FDECEC;
  color: #9B1C1C;
  font-size: 15px;
  line-height: 1.55;
}

/* Bouton et confidentialité côte à côte (A-23 : à droite du bouton sur la maquette ; la spec dit « sous ») dès que la
   carte laisse 250 px à la confidentialité (carte du formulaire à 1440 : 640 px de contenu) ; dessous sinon. */
[data-page="contact"] .formulaire__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 32px;
  margin-top: 32px;
}

[data-page="contact"] .formulaire__envoi {
  border: 0;
  cursor: pointer;
}

[data-page="contact"] .formulaire__envoi:disabled {
  cursor: progress;
  opacity: 0.75;
}

/* Icône d'envoi à gauche (A-23 : avion en papier de la maquette), 32 px ; la flèche garde ses 20 px (§ 7.2). */
[data-page="contact"] .formulaire__envoi .icone--send {
  width: 32px;
  height: 32px;
}

[data-page="contact"] .formulaire__confidentialite {
  display: flex;
  flex: 1 1 250px;
  align-items: center;
  gap: 12px;
}

[data-page="contact"] .formulaire__confidentialite > .icone {
  flex: none;
  width: 44px;
  height: 44px;
  stroke: var(--bouton-1);
}

[data-page="contact"] .formulaire__confidentialite-texte {
  max-width: 250px;
}

[data-page="contact"] .formulaire__confidentialite-texte > p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--texte-discret-sur-clair);
}

/* Lien (LIBELLE) : « Paragraphe 15 px » (§ 4.2), bleu des sous-titres sur clair, souligné. */
[data-page="contact"] .formulaire__confidentialite-texte > a {
  font-size: 15px;
  font-weight: 500; /* A-33 */
  line-height: 1.6;
  color: var(--sous-titre-sur-clair);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Messages d'envoi (§ 12.1) : masqués, sauf sous :target (sans JavaScript) ou après un envoi réussi (site.js). */
[data-page="contact"] .formulaire__message {
  display: none;
  align-items: flex-start;
  gap: 12px;
  margin-top: 24px;
  padding: 16px 20px;
  border-radius: 12px;
}

[data-page="contact"] .formulaire__message:target,
[data-page="contact"] .formulaire__message.est-affiche {
  display: flex;
}

[data-page="contact"] .formulaire__message > .icone {
  flex: none;
  width: 24px;
  height: 24px;
}

[data-page="contact"] .formulaire__message--succes {
  background-color: #E8F6EE;
}

[data-page="contact"] .formulaire__message--succes > .icone {
  stroke: #15803D;
}

[data-page="contact"] .formulaire__message--succes > p {
  color: #14532D;
}

[data-page="contact"] .formulaire__message--erreur {
  background-color: #FDECEC;
}

[data-page="contact"] .formulaire__message--erreur > p {
  color: #9B1C1C;
}

/* ---------- Coordonnées (carte 2) ---------- */

[data-page="contact"] .coordonnees {
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  gap: 16px;
}

/* Sous-carte (A-23, tour de correction 2, N-1 ; relevé l4b/releves/habillage-souscartes.txt) : surface TRANSLUCIDE
   comme sur la maquette — voile clair à 45 % sur la grande carte (relevé : la sous-carte suit le fond qui passe dessous,
   #F6FAFE–#F8FAFE à gauche sur #F1F6FD, #E8F3FE–#EEF5FE à droite sur #E0EEFE–#E3F0FE), liseré de 1 px bleu (#D5E7FD–
   #E4EFFD) doublé à l'intérieur d'un contour clair de 1 px (#F4FAFE–#F9FDFE), ombre portée douce ; rayon 16 ; pastille
   à gauche du texte. */
[data-page="contact"] .coordonnee {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px;
  border: 1px solid rgba(180, 208, 246, 0.35);
  border-radius: 16px;
  background-color: rgba(246, 251, 255, 0.45);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 6px 18px rgba(11, 20, 80, 0.06);
}

/* Pastille ronde (A-23) : 84 px (relevé 87), fond #DFEDFD ; icône bleue de 52 px. */
[data-page="contact"] .coordonnee__pastille {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background-color: #DFEDFD;
}

[data-page="contact"] .coordonnee__pastille > .icone {
  width: 52px;
  height: 52px;
  stroke: var(--bouton-1);
}

[data-page="contact"] .coordonnee__texte {
  min-width: 0;
}

/* H4 (A-23 : gras sur la maquette ; spec 500) ; valeurs au style Lead, bleu nuit ; courriel en 600. */
[data-page="contact"] .coordonnee__texte > p.h4 {
  font-weight: 600;
  color: var(--titre-sur-clair);
}

[data-page="contact"] .coordonnee__texte > .coordonnee__valeur {
  display: block;
  margin-top: 4px;
  color: var(--titre-sur-clair);
  overflow-wrap: anywhere;
}

[data-page="contact"] .coordonnee__texte > a.coordonnee__valeur {
  font-weight: 600;
  text-decoration: none;
}

[data-page="contact"] .coordonnee__texte > a.coordonnee__valeur:hover {
  color: var(--sous-titre-sur-clair);
  text-decoration: underline;
}

/* Détails (A-23) : 17 px (relevés 16,3–18,6 px), gris bleuté. */
[data-page="contact"] .coordonnee__texte > p.coordonnee__detail {
  margin-top: 4px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--texte-discret-sur-clair);
}

/* ---------- Points de rupture ---------- */

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

/* Carte des coordonnées étroite (1000–1199 : 40 % de la largeur ; ≤ 767 : téléphone) : pastille au-dessus du texte. */
@media (min-width: 1000px) and (max-width: 1199px), (max-width: 767px) {
  [data-page="contact"] .coordonnee {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

@media (max-width: 767px) {
  [data-page="contact"] .contact__carte {
    padding: 24px;
  }

  [data-page="contact"] .contact__carte > .surtitre {
    font-size: 16px;
  }

  [data-page="contact"] .formulaire__champs {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-page="contact"] .champ__libelle {
    font-size: 17px;
  }

  [data-page="contact"] .coordonnee {
    padding: 20px;
  }

  [data-page="contact"] .coordonnee__pastille {
    width: 64px;
    height: 64px;
  }

  [data-page="contact"] .coordonnee__pastille > .icone {
    width: 40px;
    height: 40px;
  }

  [data-page="contact"] .coordonnee__texte > p.coordonnee__detail {
    font-size: 16px;
  }
}

/* ---------- 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, cartes du CTA exclus de la mesure), 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,02662 → 0,01631 (maquette) avec A = 0,42 ; CTA 0,01473 → 0,01288 avec A = 0,19. Caractères relevés à 1440
   jusqu'à 604 (hero) et 631 px (CTA) du bord gauche du conteneur (50 % − 600 px) : uniforme jusqu'à + 60 px. ---------- */
@media (min-width: 1200px) {
  [data-page="contact"] .hero::after,
  [data-page="contact"] .cta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
  }

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

  [data-page="contact"] .cta::after {
    background-image: linear-gradient(90deg, rgba(4, 20, 38, 0.61) 0%, rgba(4, 20, 38, 0.61) calc(50% + 91px), rgba(4, 20, 38, 0) calc(50% + 291px)); /* 0,61 : Unknown-33 (A-36), c4-alphas-photos.py */
  }
}

/* ========== Tour 3 du lot 5 : fidélité à la maquette (A-01 v5 ; valeurs : comparaison-maquette.md, à 1440 ;
   proportion de la spec à 820 et 390). D1 (P2) H1 du hero 68 px et lead sur une colonne de 470 px ; D2 (P2) titres
   des deux cartes du formulaire 39 px (une ligne) ; D4 (P2) H2 du CTA 39 px. Texte du CTA (D5, T5a) : 08-cta.css.
   D3 (libellés) non appliqué : le site les rend déjà à 18 px (A-23), la valeur « 15 px » du rapport n'est pas celle du
   site ; à relever de nouveau. ========== */
[data-page="contact"] .hero h1 {
  font-size: 68px;
}

[data-page="contact"] .hero .lead {
  max-width: 470px;
}

[data-page="contact"] [data-section="formulaire"] h2 {
  font-size: 39px;
}

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

@media (max-width: 1199px) {
  [data-page="contact"] .hero h1 { font-size: 54px; } /* H1 48 */
  [data-page="contact"] [data-section="formulaire"] h2 { font-size: 33px; } /* H2 40 */
  [data-page="contact"] [data-section="cta"] h2 { font-size: 33px; }
}

@media (max-width: 767px) {
  [data-page="contact"] .hero h1 { font-size: 41px; } /* H1 36 */
  [data-page="contact"] [data-section="formulaire"] h2 { font-size: 24px; } /* H2 30 */
  [data-page="contact"] [data-section="cta"] h2 { font-size: 24px; }
}

/* ---------- 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,03225 → 0,01631 à 820 (A = 0,51), 0,03185 → 0,01631 à 390 (0,51) ; CTA 0,01773 → 0,01288
   à 820 (0,37), 0,01971 → 0,01288 à 390 (0,45). ---------- */
@media (min-width: 768px) and (max-width: 1199px) {
  [data-page="contact"] .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(180deg, rgba(4, 20, 38, 0) 60px, rgba(4, 20, 38, 0.85) 220px, rgba(4, 20, 38, 0.85) 260px, rgba(4, 20, 38, 0.85) 578px, rgba(4, 20, 38, 0.85) 618px, rgba(4, 20, 38, 0) 778px);
  }

  [data-page="contact"] .cta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(180deg, rgba(4, 20, 38, 0) -135px, rgba(4, 20, 38, 0.87) -55px, rgba(4, 20, 38, 0.87) -15px, rgba(4, 20, 38, 0.87) 286px, rgba(4, 20, 38, 0.87) 326px, rgba(4, 20, 38, 0) 406px); /* 0,70 (A-36) → 0,87 (A-38, tour 5) */
  }
}

@media (max-width: 767px) {
  [data-page="contact"] .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(180deg, rgba(4, 20, 38, 0) -37px, rgba(4, 20, 38, 0.65) 123px, rgba(4, 20, 38, 0.65) 163px, rgba(4, 20, 38, 0.65) 499px, rgba(4, 20, 38, 0.65) 539px, rgba(4, 20, 38, 0) 699px);
  }

  [data-page="contact"] .cta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(180deg, rgba(4, 20, 38, 0) -81px, rgba(4, 20, 38, 0.89) -1px, rgba(4, 20, 38, 0.89) 39px, rgba(4, 20, 38, 0.89) 360px, rgba(4, 20, 38, 0.89) 400px, rgba(4, 20, 38, 0) 480px); /* 0,76 (A-36) → 0,89 (A-38, tour 5) */
  }
}

/* ---------- Photos comme la maquette (A-36, SPEC v4.12 § 9 ; lot 5, tour 4) ---------- */
/* Hero : la femme entière, bord droit de la maquette (x 672–1973 de la source à 1440). CTA : Unknown-33 (homme seul à
   droite), object-position 50 % 50 % (08-cta.css). */
[data-page="contact"] .hero__image {
  object-position: 90% 50%;
}

/* CTA sous 1000 px : la boîte est plus haute au regard de la source (3:1) et `cover` n'en montre que 55 % (820) ou 18 %
   (390) de la largeur ; l'homme seul (x ≈ 0,79 de la source) reste entier et à droite : 72 % de 768 à 999 px, 80 % en
   dessous (relevé sur les captures, l5/c4-photos). */
@media (max-width: 999px) {
  [data-page="contact"] [data-section="cta"] .cta__image {
    object-position: 72% 50%;
  }
}

@media (max-width: 767px) {
  [data-page="contact"] [data-section="cta"] .cta__image {
    object-position: 80% 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.85 / 0.83 / 0.84 (1440 / 820 / 390), fondu smoothstep sur 320 px au-delà des caractères + 40 px jusqu'à 0, puis 0 au bord droit ; image brightness(1.35) ; voile bas du § 6 seul. */
[data-page="contact"] .hero {
  --voile: 0.85;
}

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

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

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

@media (min-width: 1200px) {
  [data-page="contact"] .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% - 123px), rgb(4 20 38 / calc(var(--voile) * 0.9971)) calc(50% - 113px), rgb(4 20 38 / calc(var(--voile) * 0.9888)) calc(50% - 103px), rgb(4 20 38 / calc(var(--voile) * 0.9753)) calc(50% - 93px), rgb(4 20 38 / calc(var(--voile) * 0.9570)) calc(50% - 83px), rgb(4 20 38 / calc(var(--voile) * 0.9344)) calc(50% - 73px), rgb(4 20 38 / calc(var(--voile) * 0.9077)) calc(50% - 63px), rgb(4 20 38 / calc(var(--voile) * 0.8774)) calc(50% - 53px), rgb(4 20 38 / calc(var(--voile) * 0.8438)) calc(50% - 43px), rgb(4 20 38 / calc(var(--voile) * 0.8072)) calc(50% - 33px), rgb(4 20 38 / calc(var(--voile) * 0.7681)) calc(50% - 23px), rgb(4 20 38 / calc(var(--voile) * 0.7267)) calc(50% - 13px), rgb(4 20 38 / calc(var(--voile) * 0.6836)) calc(50% - 3px), rgb(4 20 38 / calc(var(--voile) * 0.6390)) calc(50% + 7px), rgb(4 20 38 / calc(var(--voile) * 0.5933)) calc(50% + 17px), rgb(4 20 38 / calc(var(--voile) * 0.5468)) calc(50% + 27px), rgb(4 20 38 / calc(var(--voile) * 0.5000)) calc(50% + 37px), rgb(4 20 38 / calc(var(--voile) * 0.4532)) calc(50% + 47px), rgb(4 20 38 / calc(var(--voile) * 0.4067)) calc(50% + 57px), rgb(4 20 38 / calc(var(--voile) * 0.3610)) calc(50% + 67px), rgb(4 20 38 / calc(var(--voile) * 0.3164)) calc(50% + 77px), rgb(4 20 38 / calc(var(--voile) * 0.2733)) calc(50% + 87px), rgb(4 20 38 / calc(var(--voile) * 0.2319)) calc(50% + 97px), rgb(4 20 38 / calc(var(--voile) * 0.1928)) calc(50% + 107px), rgb(4 20 38 / calc(var(--voile) * 0.1562)) calc(50% + 117px), rgb(4 20 38 / calc(var(--voile) * 0.1226)) calc(50% + 127px), rgb(4 20 38 / calc(var(--voile) * 0.0923)) calc(50% + 137px), rgb(4 20 38 / calc(var(--voile) * 0.0656)) calc(50% + 147px), rgb(4 20 38 / calc(var(--voile) * 0.0430)) calc(50% + 157px), rgb(4 20 38 / calc(var(--voile) * 0.0247)) calc(50% + 167px), rgb(4 20 38 / calc(var(--voile) * 0.0112)) calc(50% + 177px), rgb(4 20 38 / calc(var(--voile) * 0.0029)) calc(50% + 187px), rgba(4, 20, 38, 0) calc(50% + 197px));
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  [data-page="contact"] .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(180deg, rgba(4, 20, 38, 0) 104px, rgb(4 20 38 / calc(var(--voile) * 0.0073)) 114px, rgb(4 20 38 / calc(var(--voile) * 0.0280)) 124px, rgb(4 20 38 / calc(var(--voile) * 0.0607)) 134px, rgb(4 20 38 / calc(var(--voile) * 0.1040)) 144px, rgb(4 20 38 / calc(var(--voile) * 0.1562)) 154px, rgb(4 20 38 / calc(var(--voile) * 0.2160)) 164px, rgb(4 20 38 / calc(var(--voile) * 0.2818)) 174px, rgb(4 20 38 / calc(var(--voile) * 0.3520)) 184px, rgb(4 20 38 / calc(var(--voile) * 0.4252)) 194px, rgb(4 20 38 / calc(var(--voile) * 0.5000)) 204px, rgb(4 20 38 / calc(var(--voile) * 0.5747)) 214px, rgb(4 20 38 / calc(var(--voile) * 0.6480)) 224px, rgb(4 20 38 / calc(var(--voile) * 0.7183)) 234px, rgb(4 20 38 / calc(var(--voile) * 0.7840)) 244px, rgb(4 20 38 / calc(var(--voile) * 0.8438)) 254px, rgb(4 20 38 / calc(var(--voile) * 0.8960)) 264px, rgb(4 20 38 / calc(var(--voile) * 0.9393)) 274px, rgb(4 20 38 / calc(var(--voile) * 0.9720)) 284px, rgb(4 20 38 / calc(var(--voile) * 0.9928)) 294px, rgb(4 20 38 / var(--voile)) 304px, rgb(4 20 38 / var(--voile)) 534px, rgb(4 20 38 / calc(var(--voile) * 0.9928)) 544px, rgb(4 20 38 / calc(var(--voile) * 0.9720)) 554px, rgb(4 20 38 / calc(var(--voile) * 0.9393)) 564px, rgb(4 20 38 / calc(var(--voile) * 0.8960)) 574px, rgb(4 20 38 / calc(var(--voile) * 0.8438)) 584px, rgb(4 20 38 / calc(var(--voile) * 0.7840)) 594px, rgb(4 20 38 / calc(var(--voile) * 0.7183)) 604px, rgb(4 20 38 / calc(var(--voile) * 0.6480)) 614px, rgb(4 20 38 / calc(var(--voile) * 0.5747)) 624px, rgb(4 20 38 / calc(var(--voile) * 0.5000)) 634px, rgb(4 20 38 / calc(var(--voile) * 0.4252)) 644px, rgb(4 20 38 / calc(var(--voile) * 0.3520)) 654px, rgb(4 20 38 / calc(var(--voile) * 0.2818)) 664px, rgb(4 20 38 / calc(var(--voile) * 0.2160)) 674px, rgb(4 20 38 / calc(var(--voile) * 0.1562)) 684px, rgb(4 20 38 / calc(var(--voile) * 0.1040)) 694px, rgb(4 20 38 / calc(var(--voile) * 0.0607)) 704px, rgb(4 20 38 / calc(var(--voile) * 0.0280)) 714px, rgb(4 20 38 / calc(var(--voile) * 0.0073)) 724px, rgba(4, 20, 38, 0) 734px);
  }
}

@media (max-width: 767px) {
  [data-page="contact"] .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(180deg, rgba(4, 20, 38, 0) 7px, rgb(4 20 38 / calc(var(--voile) * 0.0073)) 17px, rgb(4 20 38 / calc(var(--voile) * 0.0280)) 27px, rgb(4 20 38 / calc(var(--voile) * 0.0607)) 37px, rgb(4 20 38 / calc(var(--voile) * 0.1040)) 47px, rgb(4 20 38 / calc(var(--voile) * 0.1562)) 57px, rgb(4 20 38 / calc(var(--voile) * 0.2160)) 67px, rgb(4 20 38 / calc(var(--voile) * 0.2818)) 77px, rgb(4 20 38 / calc(var(--voile) * 0.3520)) 87px, rgb(4 20 38 / calc(var(--voile) * 0.4252)) 97px, rgb(4 20 38 / calc(var(--voile) * 0.5000)) 107px, rgb(4 20 38 / calc(var(--voile) * 0.5747)) 117px, rgb(4 20 38 / calc(var(--voile) * 0.6480)) 127px, rgb(4 20 38 / calc(var(--voile) * 0.7183)) 137px, rgb(4 20 38 / calc(var(--voile) * 0.7840)) 147px, rgb(4 20 38 / calc(var(--voile) * 0.8438)) 157px, rgb(4 20 38 / calc(var(--voile) * 0.8960)) 167px, rgb(4 20 38 / calc(var(--voile) * 0.9393)) 177px, rgb(4 20 38 / calc(var(--voile) * 0.9720)) 187px, rgb(4 20 38 / calc(var(--voile) * 0.9928)) 197px, rgb(4 20 38 / var(--voile)) 207px, rgb(4 20 38 / var(--voile)) 455px, rgb(4 20 38 / calc(var(--voile) * 0.9928)) 465px, rgb(4 20 38 / calc(var(--voile) * 0.9720)) 475px, rgb(4 20 38 / calc(var(--voile) * 0.9393)) 485px, rgb(4 20 38 / calc(var(--voile) * 0.8960)) 495px, rgb(4 20 38 / calc(var(--voile) * 0.8438)) 505px, rgb(4 20 38 / calc(var(--voile) * 0.7840)) 515px, rgb(4 20 38 / calc(var(--voile) * 0.7183)) 525px, rgb(4 20 38 / calc(var(--voile) * 0.6480)) 535px, rgb(4 20 38 / calc(var(--voile) * 0.5747)) 545px, rgb(4 20 38 / calc(var(--voile) * 0.5000)) 555px, rgb(4 20 38 / calc(var(--voile) * 0.4252)) 565px, rgb(4 20 38 / calc(var(--voile) * 0.3520)) 575px, rgb(4 20 38 / calc(var(--voile) * 0.2818)) 585px, rgb(4 20 38 / calc(var(--voile) * 0.2160)) 595px, rgb(4 20 38 / calc(var(--voile) * 0.1562)) 605px, rgb(4 20 38 / calc(var(--voile) * 0.1040)) 615px, rgb(4 20 38 / calc(var(--voile) * 0.0607)) 625px, rgb(4 20 38 / calc(var(--voile) * 0.0280)) 635px, rgb(4 20 38 / calc(var(--voile) * 0.0073)) 645px, rgba(4, 20, 38, 0) 655px);
  }
}

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

/* CTA : cœur --voile 0.82 / 0.85 / 0.88, fondu smoothstep sur 160 px de part et d'autre du bloc ± 0 px jusqu'à 0.95 à gauche et 0.05 à droite ; à 820 et 390, bande sur les caractères ; image inchangée. */
[data-page="contact"] .cta {
  --voile: 0.82;
}

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

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

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

@media (min-width: 1200px) {
  [data-page="contact"] .cta::before {
    background-image: linear-gradient(90deg, rgba(4, 20, 38, 0.95) calc(50% - 760px), rgb(4 20 38 / calc(0.95 + (var(--voile) - 0.95) * 0.0112)) calc(50% - 750px), rgb(4 20 38 / calc(0.95 + (var(--voile) - 0.95) * 0.0430)) calc(50% - 740px), rgb(4 20 38 / calc(0.95 + (var(--voile) - 0.95) * 0.0923)) calc(50% - 730px), rgb(4 20 38 / calc(0.95 + (var(--voile) - 0.95) * 0.1562)) calc(50% - 720px), rgb(4 20 38 / calc(0.95 + (var(--voile) - 0.95) * 0.2319)) calc(50% - 710px), rgb(4 20 38 / calc(0.95 + (var(--voile) - 0.95) * 0.3164)) calc(50% - 700px), rgb(4 20 38 / calc(0.95 + (var(--voile) - 0.95) * 0.4067)) calc(50% - 690px), rgb(4 20 38 / calc(0.95 + (var(--voile) - 0.95) * 0.5000)) calc(50% - 680px), rgb(4 20 38 / calc(0.95 + (var(--voile) - 0.95) * 0.5933)) calc(50% - 670px), rgb(4 20 38 / calc(0.95 + (var(--voile) - 0.95) * 0.6836)) calc(50% - 660px), rgb(4 20 38 / calc(0.95 + (var(--voile) - 0.95) * 0.7681)) calc(50% - 650px), rgb(4 20 38 / calc(0.95 + (var(--voile) - 0.95) * 0.8438)) calc(50% - 640px), rgb(4 20 38 / calc(0.95 + (var(--voile) - 0.95) * 0.9077)) calc(50% - 630px), rgb(4 20 38 / calc(0.95 + (var(--voile) - 0.95) * 0.9570)) calc(50% - 620px), rgb(4 20 38 / calc(0.95 + (var(--voile) - 0.95) * 0.9888)) calc(50% - 610px), rgb(4 20 38 / var(--voile)) calc(50% - 600px), rgb(4 20 38 / var(--voile)) calc(50% + 36px), rgb(4 20 38 / calc(0.05 + (var(--voile) - 0.05) * 0.9888)) calc(50% + 46px), rgb(4 20 38 / calc(0.05 + (var(--voile) - 0.05) * 0.9570)) calc(50% + 56px), rgb(4 20 38 / calc(0.05 + (var(--voile) - 0.05) * 0.9077)) calc(50% + 66px), rgb(4 20 38 / calc(0.05 + (var(--voile) - 0.05) * 0.8438)) calc(50% + 76px), rgb(4 20 38 / calc(0.05 + (var(--voile) - 0.05) * 0.7681)) calc(50% + 86px), rgb(4 20 38 / calc(0.05 + (var(--voile) - 0.05) * 0.6836)) calc(50% + 96px), rgb(4 20 38 / calc(0.05 + (var(--voile) - 0.05) * 0.5933)) calc(50% + 106px), rgb(4 20 38 / calc(0.05 + (var(--voile) - 0.05) * 0.5000)) calc(50% + 116px), rgb(4 20 38 / calc(0.05 + (var(--voile) - 0.05) * 0.4067)) calc(50% + 126px), rgb(4 20 38 / calc(0.05 + (var(--voile) - 0.05) * 0.3164)) calc(50% + 136px), rgb(4 20 38 / calc(0.05 + (var(--voile) - 0.05) * 0.2319)) calc(50% + 146px), rgb(4 20 38 / calc(0.05 + (var(--voile) - 0.05) * 0.1562)) calc(50% + 156px), rgb(4 20 38 / calc(0.05 + (var(--voile) - 0.05) * 0.0923)) calc(50% + 166px), rgb(4 20 38 / calc(0.05 + (var(--voile) - 0.05) * 0.0430)) calc(50% + 176px), rgb(4 20 38 / calc(0.05 + (var(--voile) - 0.05) * 0.0112)) calc(50% + 186px), rgba(4, 20, 38, 0.05) calc(50% + 196px));
  }

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

@media (min-width: 768px) and (max-width: 1199px) {
  [data-page="contact"] .cta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(180deg, rgba(4, 20, 38, 0) -131px, rgb(4 20 38 / calc(var(--voile) * 0.0112)) -121px, rgb(4 20 38 / calc(var(--voile) * 0.0430)) -111px, rgb(4 20 38 / calc(var(--voile) * 0.0923)) -101px, rgb(4 20 38 / calc(var(--voile) * 0.1562)) -91px, rgb(4 20 38 / calc(var(--voile) * 0.2319)) -81px, rgb(4 20 38 / calc(var(--voile) * 0.3164)) -71px, rgb(4 20 38 / calc(var(--voile) * 0.4067)) -61px, rgb(4 20 38 / calc(var(--voile) * 0.5000)) -51px, rgb(4 20 38 / calc(var(--voile) * 0.5933)) -41px, rgb(4 20 38 / calc(var(--voile) * 0.6836)) -31px, rgb(4 20 38 / calc(var(--voile) * 0.7681)) -21px, rgb(4 20 38 / calc(var(--voile) * 0.8438)) -11px, rgb(4 20 38 / calc(var(--voile) * 0.9077)) -1px, rgb(4 20 38 / calc(var(--voile) * 0.9570)) 9px, rgb(4 20 38 / calc(var(--voile) * 0.9888)) 19px, rgb(4 20 38 / var(--voile)) 29px, rgb(4 20 38 / var(--voile)) 242px, rgb(4 20 38 / calc(var(--voile) * 0.9888)) 252px, rgb(4 20 38 / calc(var(--voile) * 0.9570)) 262px, rgb(4 20 38 / calc(var(--voile) * 0.9077)) 272px, rgb(4 20 38 / calc(var(--voile) * 0.8438)) 282px, rgb(4 20 38 / calc(var(--voile) * 0.7681)) 292px, rgb(4 20 38 / calc(var(--voile) * 0.6836)) 302px, rgb(4 20 38 / calc(var(--voile) * 0.5933)) 312px, rgb(4 20 38 / calc(var(--voile) * 0.5000)) 322px, rgb(4 20 38 / calc(var(--voile) * 0.4067)) 332px, rgb(4 20 38 / calc(var(--voile) * 0.3164)) 342px, rgb(4 20 38 / calc(var(--voile) * 0.2319)) 352px, rgb(4 20 38 / calc(var(--voile) * 0.1562)) 362px, rgb(4 20 38 / calc(var(--voile) * 0.0923)) 372px, rgb(4 20 38 / calc(var(--voile) * 0.0430)) 382px, rgb(4 20 38 / calc(var(--voile) * 0.0112)) 392px, rgba(4, 20, 38, 0) 402px);
  }
}

@media (max-width: 767px) {
  [data-page="contact"] .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)) 316px, rgb(4 20 38 / calc(var(--voile) * 0.9888)) 326px, rgb(4 20 38 / calc(var(--voile) * 0.9570)) 336px, rgb(4 20 38 / calc(var(--voile) * 0.9077)) 346px, rgb(4 20 38 / calc(var(--voile) * 0.8438)) 356px, rgb(4 20 38 / calc(var(--voile) * 0.7681)) 366px, rgb(4 20 38 / calc(var(--voile) * 0.6836)) 376px, rgb(4 20 38 / calc(var(--voile) * 0.5933)) 386px, rgb(4 20 38 / calc(var(--voile) * 0.5000)) 396px, rgb(4 20 38 / calc(var(--voile) * 0.4067)) 406px, rgb(4 20 38 / calc(var(--voile) * 0.3164)) 416px, rgb(4 20 38 / calc(var(--voile) * 0.2319)) 426px, rgb(4 20 38 / calc(var(--voile) * 0.1562)) 436px, rgb(4 20 38 / calc(var(--voile) * 0.0923)) 446px, rgb(4 20 38 / calc(var(--voile) * 0.0430)) 456px, rgb(4 20 38 / calc(var(--voile) * 0.0112)) 466px, rgba(4, 20, 38, 0) 476px);
  }
}

}