/* Programme pilote — styles propres à cette page (hero + formulaire réutilisent
   audit.css tel quel, voir eb_enqueue_assets() — ce fichier est chargé APRÈS
   audit.css pour pouvoir surcharger son hero sans toucher à la page Audit,
   qui ne charge jamais ce fichier). */

/* ---------- hero : une seule carte unifiée ----------
   audit.css conçoit .audit-side__hero-fx comme un bloc H1/lead sur fond
   sombre, suivi de .audit-points/.audit-side__reviews sur le fond clair de
   .audit-side (c'est le cas voulu sur la page Audit). Ici, garanties et
   preuve sociale sont désormais des enfants du même .audit-side__hero-fx
   (déplacés dans le template) : tout partage donc déjà le même fond, les
   mêmes bordures et le même rayon — il ne reste qu'à étendre le bloc sur
   toute la hauteur disponible et à retirer le padding/margin pensés pour
   un bloc qui s'arrêtait après le lead. */
.audit-side__hero-fx{
  position:relative; text-align:center;
  display:flex; flex-direction:column; flex:1;
  margin-bottom:0; padding-bottom:34px;
}
/* .audit-side__hero-fx ne porte plus la classe .eb-hero-fx (déplacée sur
   .audit-layout, voir plus bas) : ses enfants ne reçoivent donc plus
   automatiquement position:relative;z-index:2 via la règle partagée
   ".eb-hero-fx > *" (hero-fx.css). Sans ça, le scrim ::before ci-dessous
   (position:absolute, z-index:2) peint PAR-DESSUS le texte statique (H1,
   paragraphes...), l'assombrissant par endroits — on restaure ici
   explicitement le même empilement qu'avant (contenu au-dessus du scrim). */
.audit-side__hero-fx > *{ position:relative; z-index:2; }
.audit-points{ align-items:center; margin-top:30px; }
/* .audit-point__check/__text sont pensés pour le fond clair de .audit-side
   (page Audit) — variante lisible sur le fond sombre de cette carte. */
.audit-side__hero-fx .audit-point__check{ background:rgba(91,203,139,.16); color:var(--green-bright); }
.audit-side__hero-fx .audit-point__text{ color:#CBD7EE; }

/* ---------- hero : badge en introduction commune aux deux colonnes ----------
   .pilot-hero__badge-row occupe sa propre ligne de la grille .audit-layout
   (grid-column:1/-1, voir plus bas) : centré sur toute la largeur du fond
   bleu, au-dessus de la colonne de présentation ET de la colonne
   formulaire, plutôt que seulement au-dessus du H1 — le badge se lit comme
   une intro commune, pas comme un élément de la seule colonne gauche.
   .eyebrow porte déjà la typo (majuscules, letter-spacing) via typography.css
   et sa couleur orange via hero-fx.css — on ajoute l'habillage "pilule" avec
   une lueur discrète, dans le même esprit que .reassurance-pill plus bas. */
.pilot-hero__badge-row{ grid-column:1/-1; display:flex; justify-content:center; }
.pilot-hero__badge{
  padding:8px 18px;
  border-radius:999px;
  background:rgba(221,122,51,.18);
  border:1px solid rgba(221,122,51,.5);
  box-shadow:0 0 0 1px rgba(221,122,51,.08), 0 0 20px rgba(221,122,51,.22);
  text-align:center;
}

/* ---------- hero : assombrissement léger derrière le texte pour la
   lisibilité + très léger flux animé, sans toucher au canvas partagé
   (hero-fx.js) ni aux autres pages qui réutilisent le même effet.
   La lueur bleue elle-même n'est plus dupliquée ici : elle vient désormais
   des vrais halos aurora partagés avec .audit-layout (voir plus bas), pour
   qu'il n'y ait qu'une seule lueur cohérente sur toute la largeur plutôt que
   deux lueurs superposées à des positions différentes. ---------- */
.audit-side__hero-fx::before{
  content:'';
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(120deg, transparent 42%, rgba(70,150,255,.06) 50%, transparent 58%),
    radial-gradient(ellipse 78% 62% at 26% 30%, rgba(4,11,26,.68) 0%, rgba(4,11,26,.3) 48%, rgba(4,11,26,0) 78%);
  background-size:280% 280%, 100% 100%;
  background-position:0% 0%, 0 0;
  animation:pilotFlowDrift 38s linear infinite;
}
@keyframes pilotFlowDrift{
  0%{ background-position:0% 0%, 0 0; }
  100%{ background-position:100% 100%, 0 0; }
}
@media (prefers-reduced-motion: reduce){
  .audit-side__hero-fx::before{ animation:none; }
}

/* texte plus lisible sur fond sombre : override plus spécifique que la règle
   partagée .eb-hero-fx .audit-side__lead (hero-fx.css, chargé après ce
   fichier) pour gagner la cascade sans !important. */
.audit-side .audit-side__hero-fx .audit-side__lead{ color:#CBD7EE; }

/* ---------- hero : actions ---------- */
.pilot-hero__actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin:28px 0 4px; }
/* .btn/.btn-primary/.btn-secondary n'ont pas de padding par défaut (chaque
   contexte d'usage le définit, cf. audit.css) : chaque bouton ajouté sur
   cette page doit donc fixer le sien explicitement. */
.pilot-hero__actions .btn{ padding:14px 22px; font-size:15px; }

/* ---------- hero : réassurance (réutilise .reassurance-pill, le composant
   partagé déjà utilisé sous les CTA de hero de tout le site). ---------- */
.pilot-hero__reassurance{ display:flex; justify-content:center; margin-top:22px; }

/* ---------- hero : bas de carte aligné avec le formulaire ----------
   .audit-layout passe de align-items:start (audit.css, pour la colonne
   sticky de la page Audit) à stretch : les deux colonnes occupent alors la
   même hauteur. .audit-side étire son unique enfant (.audit-side__hero-fx,
   flex:1 ci-dessus) sur toute cette hauteur, et à l'intérieur de la carte,
   le bloc avis est pousé tout en bas via margin-top:auto — la carte de
   présentation et celle du formulaire commencent et se terminent donc au
   même niveau, sans que rien ne "tombe" sur le fond blanc entre les deux. */
/* ---------- environnement bleu nuit du haut de page ----------
   .audit-layout porte désormais elle-même la classe .eb-hero-fx (canvas
   "constellation" + halos aurora bleu/orange émis une seule fois par
   eb_hero_fx() dans le template, juste après l'ouverture de .audit-layout) :
   la colonne de présentation ET le pourtour du formulaire partagent
   littéralement le même fond animé, au lieu d'un dégradé approché sur
   l'enveloppe et d'un effet différent sur la carte — il n'y a donc plus
   qu'un seul environnement continu. .audit-form/.audit-success gardent leur
   propre background:#fff (audit.css), peint par-dessus : ils restent
   blancs, lisibles, nettement séparés.

   .eb-hero-fx{overflow:hidden} (hero-fx.css) reste inchangée : elle clippe
   les halos aurora (positionnés en négatif) et arrondit le canvas — hérité
   tel quel, même rendu que la carte hero elle-même.

   padding-top réduit de 80px (audit.css) à 56px : avec l'ajout de la ligne
   badge au-dessus des deux colonnes (voir .pilot-hero__badge-row), 80px de
   marge avant le badge créait une zone vide excessive en haut de page.
   row-gap/column-gap remplacent le "gap:64px" d'audit.css (qui vaudrait
   pour les deux, une fois le badge ajouté comme ligne de grille à part) :
   64px reste l'écart horizontal entre les deux colonnes (inchangé), mais
   l'écart vertical badge → colonnes est resserré à 24px, dans la fourchette
   "premium et équilibré" demandée. */
.audit-layout.eb-hero-fx{
  padding-top:56px;
  row-gap:24px;
  column-gap:64px;
  border-radius:28px;
  box-shadow:0 0 0 1px rgba(46,155,255,.18), 0 40px 90px -55px rgba(12,30,60,.6);
}
/* .eb-hero-fx p a / li a (hero-fx.css) colore en orange les liens dans un
   <p>, pensé pour le texte sur fond sombre de la carte de gauche — sans
   effet voulu sur le lien du message d'erreur du formulaire, qui reste sur
   fond blanc à l'intérieur du même .eb-hero-fx désormais partagé. */
.audit-layout .audit-form__error a{ color:inherit; }
/* .audit-side{position:sticky;top:104px} (audit.css) prévoit ce décalage
   pour dégager le bandeau sticky de la page Audit d'origine. Une fois
   .audit-side imbriquée dans .eb-hero-fx (overflow:hidden ci-dessus),
   l'ancêtre en overflow:hidden change le contexte de collage : le
   navigateur rend .audit-side en permanence décalée de 104px vers le bas
   (au lieu de ne décaler qu'en cas de collage réel au défilement), ce qui
   désaligne visiblement son sommet par rapport à la carte du formulaire.
   top:0 annule ce décalage — le collage au défilement ne change rien
   d'observable ici de toute façon (colonnes de hauteur quasi égale). */
.audit-layout.eb-hero-fx > .audit-side{ top:0; }
.audit-layout{ align-items:stretch; }
.audit-side{ display:flex; flex-direction:column; }
.audit-side__reviews{ display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:auto; padding-top:26px; }
.pilot-hero__reviews-link{
  font-size:12.5px; font-weight:600; color:var(--muted-on-navy);
  text-decoration:none; border-bottom:1px solid rgba(157,170,194,.5);
  padding-bottom:1px;
}
.pilot-hero__reviews-link:hover,
.pilot-hero__reviews-link:focus-visible{ color:#fff; border-bottom-color:#fff; }

/* ============================================================
   Étapes numérotées ("Ce qui est inclus" / "Comment ça marche") —
   .audit-step* n'existe que dans home.css, jamais chargé sur cette page :
   on redéfinit ici la base (cercle numéroté + trait) puis on l'habille en
   vraies cartes de workflow premium (fond, bordure, ombre, halo, connecteur
   discret entre les cartes).
   ============================================================ */
.audit-steps{ gap:24px; }
.audit-step__head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.audit-step__num{
  width:42px; height:42px; border-radius:var(--r-lg); flex:none;
  background:linear-gradient(135deg,var(--navy),var(--blue-deep)); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-heading); font-weight:700; font-size:16px;
  box-shadow:0 8px 20px -8px rgba(30,95,208,.6), 0 0 0 3px rgba(70,150,255,.1);
}
.audit-step__rule{ flex:1; height:1px; background:linear-gradient(90deg,#2E9BFF,#E6EAF2); }
.audit-step__text{ font-size:15.5px; line-height:1.5; color:var(--text-5); font-weight:500; }

.pilot-steps-5 .audit-step,
#comment-ca-marche .audit-step{
  background:#fff; border:1px solid var(--border-2); border-radius:16px;
  padding:24px 20px 26px; position:relative; z-index:1;
  box-shadow:0 20px 38px -30px rgba(12,30,60,.3);
  transition:box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.pilot-steps-5 .audit-step:hover,
#comment-ca-marche .audit-step:hover{
  transform:translateY(-3px);
  border-color:rgba(70,150,255,.35);
  box-shadow:0 26px 46px -26px rgba(46,155,255,.3);
}
@media (prefers-reduced-motion: reduce){
  .pilot-steps-5 .audit-step,
  #comment-ca-marche .audit-step{ transition:none; }
  .pilot-steps-5 .audit-step:hover,
  #comment-ca-marche .audit-step:hover{ transform:none; }
}

/* connecteur fin, visible uniquement dans les espaces entre les cartes (les
   cartes, opaques, le recouvrent ailleurs) — évoque un fil de méthode plutôt
   qu'une simple liste, sans dépendance ni script. */
.pilot-steps-5{ position:relative; grid-template-columns:repeat(5,1fr); }
.pilot-steps-5::before,
#comment-ca-marche .grid-3::before{
  content:''; position:absolute; left:45px; right:45px; top:45px; height:2px; z-index:0;
  background:linear-gradient(90deg, rgba(46,155,255,.06), rgba(46,155,255,.4) 12%, rgba(46,155,255,.4) 88%, rgba(46,155,255,.06));
  pointer-events:none;
}
#comment-ca-marche .grid-3{ position:relative; }
@media (max-width:1100px){
  .pilot-steps-5{ grid-template-columns:repeat(3,1fr); }
  .pilot-steps-5::before{ display:none; }
}
@media (max-width:900px){
  #comment-ca-marche .grid-3::before{ display:none; }
}
@media (max-width:640px){
  .pilot-steps-5{ grid-template-columns:1fr; }
}

/* ---------- CTA "Comment ça marche" : espace généreux avant le bouton, qui
   ne doit jamais sembler accroché à la 3e carte. .audit-steps__cta vit dans
   home.css, non chargé ici — on redéfinit padding + espacement. ---------- */
#comment-ca-marche .audit-steps{ margin-bottom:44px; }
.audit-steps__cta{ padding:16px 30px; font-size:16px; box-shadow:var(--shadow-btn-orange-md); }

/* ---------- formulaire : précision gratuit/payant + consentement ---------- */
.pilot-form__price-note{
  margin:16px 0 0; padding:14px 18px;
  background:var(--bg-soft); border:1px solid var(--border-4); border-radius:10px;
  font-size:13px; line-height:1.55; color:var(--text-3); text-align:center;
}

.pilot-form__consent{
  display:flex; align-items:flex-start; gap:10px;
  font-size:13.5px; line-height:1.5; color:var(--text-3); cursor:pointer;
}
.pilot-form__consent input{ flex:none; width:17px; height:17px; margin-top:2px; accent-color:var(--orange); }
.pilot-form__consent a{ color:var(--navy); font-weight:600; text-decoration:underline; }

/* ---------- cartes "le programme en bref" : profondeur discrète au survol
   (mêmes teintes que .audit-success__tile:hover ailleurs sur le site) —
   sûr à écrire ici même sur un sélecteur partagé (.differentiators__card),
   puisque ce fichier ne charge que sur cette page. ---------- */
.differentiators__card{ transition:box-shadow .2s ease, border-color .2s ease, transform .2s ease; }
.differentiators__card:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 32px -18px rgba(46,155,255,.35);
}
@media (prefers-reduced-motion: reduce){
  .differentiators__card{ transition:none; }
  .differentiators__card:hover{ transform:none; }
}

/* ---------- "le programme en bref" : démonstration en direct ----------
   Reprend tel quel le vrai composant de l'accueil (.workflow-tabs,
   .mockup--navy.workflow-panel, .workflow-step — onglets + progression
   d'étapes animée, pastille qui pulse, connecteur qui s'allume, badge de
   statut) plutôt qu'une rangée d'icônes statique : c'est le "vrai workflow
   avec effet" du site, seulement avec un jeu de données propre à cette
   page (voir programme-pilote.js). .mockup/.mockup--navy/.mockup__* sont
   déjà chargés partout (components.css) ; le reste (.hero__demo-label,
   .workflow-tabs, .workflow-panel, .workflow-step*) vient de home.css,
   jamais chargé sur cette page — copié ici à l'identique (mêmes valeurs),
   seule la largeur/centrage (.pilot-demo) est propre à cette page, home.css
   n'en ayant pas besoin dans son propre contexte de grille 2 colonnes. */
.pilot-demo{ max-width:560px; margin:40px auto 0; }
.hero__demo-label{ display:flex; align-items:center; gap:9px; margin-bottom:11px; }
.hero__demo-label span:first-child{ font-size:12px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; }
.hero__demo-rule{ flex:1; height:1px; background:var(--border); }

.workflow-tabs{
  display:flex; gap:6px; margin-bottom:14px;
  background:#fff; border:1px solid var(--border-2); border-radius:var(--r-xl); padding:4px;
}
.workflow-tabs__btn{
  flex:1; border:none; cursor:pointer; font-family:inherit; font-weight:600; font-size:13px;
  padding:10px 6px; border-radius:8px; background:transparent; color:#5C6B82;
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.workflow-tabs__btn.is-active{ background:var(--navy); color:#fff; }

.workflow-panel{ box-shadow:var(--shadow-panel); }
.workflow-panel__body{ padding:22px; }
.workflow-panel__note{
  border-top:1px solid var(--navy-panel-border);
  padding:14px 22px; display:flex; align-items:center; gap:10px;
}
.workflow-panel__note-check{ color:var(--green-bright); font-size:15px; text-shadow:0 0 12px rgba(91,203,139,1); display:inline-block; }
@media (prefers-reduced-motion: no-preference){
  .workflow-panel__note-check{ animation:ebchecktextpulse 1.8s ease-in-out infinite; }
}
.workflow-panel__note [data-workflow-note]{ font-size:13px; color:var(--muted-on-navy); }

.workflow-step{
  display:flex; align-items:center; gap:14px; border-radius:var(--r-2xl);
  padding:16px 18px;
  border:1px solid #1E3458; background:#0E2143;
}
.workflow-step.is-active{ background:#12315f; border-color:#2E9BFF; box-shadow:0 0 0 1px rgba(46,155,255,.3), 0 0 28px -4px rgba(46,155,255,.65); }
.workflow-step__connector{ height:18px; width:2px; margin-left:36px; background:#1E3458; position:relative; overflow:visible; }
.workflow-step.is-done + .workflow-step__connector{ background:linear-gradient(180deg,var(--green-bright),var(--blue-2)); box-shadow:0 0 6px rgba(91,203,139,.6); }
.workflow-step__connector::after{
  content:""; position:absolute; left:50%; top:0; width:6px; height:6px; margin-left:-3px; border-radius:50%;
  background:var(--blue-3); box-shadow:0 0 10px rgba(91,203,139,.9); opacity:0;
}
@media (prefers-reduced-motion: no-preference){
  .workflow-step.is-done + .workflow-step__connector::after{ animation:ebconnectorflow 1.1s ease-in-out infinite; }
}
.workflow-step__icon{
  width:38px; height:38px; flex:none; border-radius:var(--r-md);
  background:#16294a; border:1px solid #2a3f66; display:flex; align-items:center; justify-content:center;
  font-size:18px; position:relative; box-shadow:0 0 0 1px rgba(46,155,255,.12);
}
.workflow-step.is-active .workflow-step__icon{ border-color:var(--blue-2); box-shadow:0 0 0 1px rgba(46,155,255,.3), 0 0 16px rgba(46,155,255,.4); }
.workflow-step.is-done .workflow-step__icon{ border-color:var(--green-bright); box-shadow:0 0 0 1px rgba(91,203,139,.3), 0 0 12px rgba(91,203,139,.3); }
.workflow-step__dot{
  position:absolute; right:-3px; top:-3px; width:9px; height:9px; border-radius:50%;
  background:#3A4D70;
}
.workflow-step.is-active .workflow-step__dot{ background:var(--blue-2); box-shadow:0 0 14px rgba(46,155,255,1); animation:ebpulse 1.1s ease-in-out infinite; }
.workflow-step.is-done .workflow-step__dot{ background:var(--green-bright); box-shadow:0 0 10px rgba(91,203,139,.9); }
.workflow-step__text{ flex:1; }
.workflow-step__title{ font-family:var(--font-heading); font-weight:600; font-size:14.5px; color:#8294b2; }
.workflow-step.is-active .workflow-step__title{ color:#fff; }
.workflow-step.is-done .workflow-step__title{ color:#C7D2E4; }
.workflow-step__sub{ font-family:var(--font-mono); font-size:11.5px; color:#5e6f8c; margin-top:2px; }
.workflow-step__badge{
  font-family:var(--font-mono); font-size:10.5px; font-weight:500;
  color:#5e6f8c; background:rgba(255,255,255,.04);
  padding:4px 9px; border-radius:20px; white-space:nowrap;
}
.workflow-step.is-active .workflow-step__badge{ color:#5BB6FF; background:rgba(46,155,255,.16); }
.workflow-step.is-done .workflow-step__badge{ color:#5BCB8B; background:rgba(91,203,139,.12); }

@media (max-width:640px){
  .workflow-tabs{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .workflow-tabs__btn{ flex:0 0 auto; white-space:nowrap; }
}

/* ---------- callout de transparence ---------- */
.pilot-callout{
  background:var(--orange-soft-bg); border:1px solid var(--orange-soft-border); border-radius:14px;
  padding:20px 26px; text-align:center;
  box-shadow:0 14px 30px -24px rgba(221,122,51,.4);
}
.pilot-callout p{ margin:0; font-size:14.5px; line-height:1.6; color:var(--navy); }

/* ---------- campagne actuellement ouverte ---------- */
.pilot-campaign{
  max-width:760px; margin:0 auto; text-align:center;
  background:var(--navy-gradient); border-radius:var(--r-5xl);
  padding:44px 40px; display:flex; flex-direction:column; align-items:center; gap:14px;
  box-shadow:0 30px 60px -30px rgba(12,30,60,.5);
}
.pilot-campaign h2{ color:#fff; font-size:26px; margin:0; max-width:520px; }
.pilot-campaign p{ color:var(--muted-on-navy); font-size:15px; line-height:1.6; margin:0; max-width:560px; }
.pilot-campaign .btn{ margin-top:10px; padding:15px 28px; font-size:15.5px; }
.pilot-campaign--closed .badge-pill{ background:var(--orange-soft-bg); color:var(--navy); }

/* ---------- FAQ en accordéons natifs (details/summary) ---------- */
.pilot-faq{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:10px; }
.pilot-faq__item{
  background:#fff; border:1px solid var(--border-2); border-radius:14px; padding:4px 22px;
}
.pilot-faq__question{
  cursor:pointer; list-style:none; padding:18px 28px 18px 0; position:relative;
  font-family:var(--font-heading); font-weight:600; font-size:15.5px; color:var(--navy);
}
.pilot-faq__question::-webkit-details-marker{ display:none; }
.pilot-faq__question::after{
  content:'+'; position:absolute; right:0; top:50%; transform:translateY(-50%);
  font-size:22px; line-height:1; color:var(--orange); font-weight:400;
}
.pilot-faq__item[open] .pilot-faq__question::after{ content:'−'; }
.pilot-faq__answer{ margin:0 0 18px; font-size:14.5px; line-height:1.62; color:var(--text-3); }
.pilot-faq__question:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; border-radius:6px; }

/* ============================================================
   CTA final — variante centrée et enrichie de .cta-dotted (partagé), dans le
   même esprit que le hero : dégradé bleu nuit + lueurs discrètes, réservée à
   cette page (.cta-dotted lui-même, utilisé tel quel par apropos/solutions/
   réalisations, n'est jamais modifié).
   ============================================================ */
.pilot-final-cta{
  flex-direction:column; text-align:center; justify-content:center;
  background-image:
    radial-gradient(ellipse 60% 65% at 18% 0%, rgba(46,155,255,.16), transparent 70%),
    radial-gradient(ellipse 55% 60% at 88% 100%, rgba(221,122,51,.12), transparent 70%),
    var(--navy-gradient);
}
.pilot-final-cta .cta-dotted__text{ max-width:640px; margin:0 auto; }
.pilot-final-cta h2{ text-align:center; }
.pilot-final-cta p{ text-align:center; }
.pilot-final-cta__actions{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:14px; margin-top:8px; }
.pilot-final-cta__actions .btn-secondary{ padding:18px 32px; font-size:16.5px; white-space:nowrap; }

/* ==================== responsive ==================== */
@media (max-width:640px){
  .pilot-hero__actions{ flex-direction:column; }
  .pilot-hero__actions .btn{ width:100%; justify-content:center; }
  .pilot-campaign{ padding:32px 24px; }
  .pilot-campaign h2{ font-size:22px; }
  .pilot-final-cta__actions{ flex-direction:column; width:100%; }
  .pilot-final-cta__actions .btn{ width:100%; justify-content:center; }
  /* audit.css fixe gap:64px entre les colonnes empilées (pensé pour la page
     Audit) — sur cette page, hero et formulaire partagent désormais le même
     fond bleu nuit (.audit-layout ci-dessus) : un tel écart les fait paraître
     détachés l'un de l'autre. On resserre uniquement en mobile — badge,
     colonne de présentation et formulaire sont ici 3 lignes empilées de la
     même grille, séparées du même row-gap. Sélecteur à deux classes pour
     gagner la cascade face à la règle desktop (row-gap:24px) ci-dessus, de
     même spécificité, quel que soit l'ordre de chargement réel. */
  .audit-layout.eb-hero-fx{ gap:30px; }
}