/* ══════════════════════════════════════════════════════════════
   GDN — Home v3 : hero « 1C »
   ──────────────────────────────────────────────────────────────
   Source d'autorite : « GDN Hero 1C.dc.html » (projet Claude Design
   « Hero GDN moderne ») + ses notes INTEGRATION-1C.md.

   La maquette livre tout en styles inline ; les conventions v9
   (html-conventions.md §11) les interdisent, et le responsive decrit
   par les notes demande de toute facon des media queries. Le bloc est
   donc retranscrit ici en BEM .gdn-hero-v3*, sur les tokens de
   style.css, qui reste charge avant cette feuille (voir router_fr.php,
   qui n'empile home_v3.css que sur la home v3).

   Structure, dans l'ordre du DOM :
     1. __promesse  — chip, h1, chapo, CTA vert
     2. __reperes   — bande de chiffres pleine largeur, fondue aux bords
     3. __offre     — l'offre d'entree : colonne texte + carte prix encre
     4. __preuve    — bandeau de reassurance
   ══════════════════════════════════════════════════════════════ */

/* ─── TOKENS D'APPOINT ───────────────────────────────────────────
   Ces variables existent dans le design system (tokens/colors.css)
   mais pas encore dans le :root de style.css. On les declare ici,
   scopees au bloc, plutot que de hardcoder les valeurs dans 30
   regles : le jour ou style.css importe les tokens DS, ces sept
   lignes disparaissent sans toucher au reste de la feuille.
   Aucune n'est une REdefinition : style.css n'en porte aucune. */
.gdn-hero-v3 {
  --gdn-veil:             rgba(255, 255, 255, .65);
  --gdn-veil-edge:        rgba(24, 21, 21, .18);
  --gdn-border-dark:      rgba(255, 255, 255, .12);
  --gdn-text-on-dark-soft: rgba(255, 255, 255, .65);
  --gdn-text-on-dark-faint: rgba(255, 255, 255, .38);
  --gdn-radius-pill:      50px;
  --gdn-green-hover:      #146c43;

  /* Hauteur du header fixe. style.css la redefinit bien a 68px sous 992px,
     mais SUR .gdn-header : la variable ne descend donc qu'a son sous-arbre,
     pas ici. On tient la notre pour ne pas dependre de ce piege. */
  --hero-header-h: 108px;

  /* RYTHME VERTICAL DU PLI, indexe sur la HAUTEUR de fenetre et non sur sa
     largeur : ce qu'on repartit ici, c'est de l'espace vertical.

     L'ORDONNEE EST NEGATIVE, ET C'EST LE POINT. Une fonction simplement
     proportionnelle (k*vh) ne peut pas tenir les deux bouts : reglee pour
     remplir un 1080px, elle fait deborder le pli a 673px ; reglee pour
     673px, elle laisse un 1080px a moitie vide. La pente raide corrigee
     d'un retrait fixe donne 28px a 673px, ou le contenu tient tout juste,
     et 60px a 1080px, ou il doit HABITER l'ecran et pas seulement s'y
     centrer. C'est ce que demandait l'aeration. */
  --hero-rythme: clamp(20px, 7.9vh - 25px, 68px);

  /* ECHELLE TYPO FLUIDE. Remplace les quatre paliers de tailles fixes :
     le titre grandit avec la fenetre au lieu de sauter, et les bornes
     tiennent les extremes : 32px sur un mobile, et 73px au plafond, que
     seuls les ecrans de plus de 1700px atteignent. C'est la que le titre
     doit grandir, sinon il flotte dans un 1920. Le plafond est celui qui
     garde « Votre partenaire tech et IA » sur UNE ligne dans ses 1240px
     de colonne, verifie au rendu. */
  --hero-fs-chip:  clamp(.68rem, .63rem + .14vw, .82rem);
  /* Le titre est borne par les DEUX mesures de la fenetre, d'ou le min().
     Le terme en vw seul se lit comme une pente reglee sur les grands
     ecrans : a 1280x665 il rendait encore 60px, soit 81 % de la taille
     d'un 1912 dans 65 % de la place, et le pli se remplissait au ras.
     Le terme en vh plafonne le titre quand c'est la HAUTEUR qui manque
     (55px a 665px de haut) et reste inactif des que la fenetre est haute :
     a 948px il vaut 73,5px, le vw le devance, le rendu 1912 ne bouge pas. */
  --hero-fs-title: clamp(2rem, min(1.1rem + 3.3vw, .8rem + 6.4vh), 4.6rem);
  --hero-fs-lead:  clamp(1rem, .92rem + .35vw, 1.35rem);
  --hero-fs-cta:   clamp(.95rem, .9rem + .2vw, 1.1rem);

  /* MESURE HORIZONTALE DU HERO. Le reste de la page vit dans des
     .container-xl de Bootstrap, dont la largeur SAUTE par paliers :
     1140px a partir de 1200, 1320px a partir de 1400 (gouttiere de 12px
     de chaque cote). Le hero, lui, tenait une mesure fixe de 1240px : il
     debordait du reste de la page entre 1200 et 1400 (a 1280, 20px de
     marge laterale contre 70px pour les sections d'en dessous, et un
     texte qui demarrait 22px trop a gauche), et rentrait de 68px a
     l'interieur au-dela de 1400. Les deux variables ci-dessous portent la
     mesure du hero pour qu'il emprunte les paliers du container partout
     ou celui-ci en a un, c'est-a-dire des 1200px : le hero et les sections
     qui le suivent partagent alors une seule et meme colonne.

     Sous 1200px, en revanche, la mesure historique est conservee. Le
     container y descend a 960 puis 720px, soit 90px de gouttiere sur une
     tablette de 900 : le hero, lui, est une pleine page qui se lit bord a
     bord, et ses paliers de 40 puis 24px de padding sont regles pour ca. */
  --hero-shell:  1240px;
  --hero-gutter: 40px;

  /* PAS VERTICAL DE L'OFFRE. Le second pli est fait de blocs rigides — une
     carte prix de 620px, une colonne de texte de 538px — la ou le premier
     n'a que quatre elements qui se resserrent. Sur un 1280x665 il mesurait
     842px pour 665px de fenetre : la carte sortait par le bas, et le point
     d'ancrage du defilement deposait le lecteur en haut d'un bloc qu'il ne
     pouvait pas voir en entier.

     Toutes les respirations INTERNES de l'offre (gouttieres de colonne, de
     carte, de liste, paddings des trois etages de la carte) descendent de
     cette seule variable, chacune par son propre multiple. Elles gardent
     donc leurs rapports : le bloc se redimensionne en proportion au lieu
     de se faire rogner. Meme forme que --hero-rythme, ordonnee negative
     comprise : 26px des 948px de haut — le rendu large ne bouge pas — et
     14px a 665px. La pente est raide a dessein ; une dizaine de mesures
     du bloc en dependent, chaque pixel rendu ici en vaut onze sur la
     hauteur de la carte. */
  --offre-pas: clamp(11px, 4.24vh - 14.2px, 26px);
}

/* Le hero emprunte la mesure ET la gouttiere du .container-xl, palier par
   palier : 1140px des 1200, 1320px des 1400. Son texte s'aligne alors au
   pixel sur celui des sections qui suivent, a toutes les largeurs de
   bureau. Le raccord avec le palier inferieur est continu : a 1199px le
   hero mesure 1199-80 = 1119px de contenu, a 1201px il en mesure 1116. */
@media (min-width: 1200px) {
  .gdn-hero-v3 {
    --hero-shell:  1140px;
    --hero-gutter: 12px;
  }
}

@media (min-width: 1400px) {
  .gdn-hero-v3 { --hero-shell: 1320px; }
}

/* ─── SECTION ────────────────────────────────────────────────────
   Meme fond mesh que .gdn-hero (--gdn-hero-fill porte deja
   l'url relative a src/css/, ou vit aussi cette feuille).
   Le padding-top degage le header fixe : --gdn-header-h (108px)
   + la respiration propre au hero, comme .gdn-hero (200px). */
.gdn-hero-v3 {
  position: relative;
  isolation: isolate;
  background: var(--gdn-hero-fill);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .05);
}

/* ─── LE PLI ─────────────────────────────────────────────────────
   Promesse et bande de reperes forment le premier ecran, et rien de
   plus : le pli fait une fenetre de haut, la promesse occupe tout ce
   qui reste une fois le header degage, et la bande se pose au fond.
   Elle sert de socle, pas de bandeau flottant, donc elle defile avec
   la page des qu'on la quitte.

   100svh et non 100vh : sur mobile, vh se mesure barre d'URL RETRACTEE,
   ce qui coupe la bande au chargement, precisement quand elle doit se
   voir. svh prend la fenetre la plus petite, la bande tient toujours.
   Le 100vh qui precede reste pour les navigateurs sans svh.

   min-height et non height : si le contenu depasse (fenetre tres basse,
   titre sur trois lignes), le pli s'allonge au lieu de rogner. */
.gdn-hero-v3__fold {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

/* Seul le premier pli degage le header fixe : le second est deja loin
   sous la ligne de flottaison quand on l'atteint. */
.gdn-hero-v3__fold--promesse { padding-top: var(--hero-header-h); }

/* LE SECOND PLI NE S'ACTIVE QUE LA OU IL TIENT, et c'est la difference
   de fond avec le premier. La promesse est elastique : quatre elements
   qui se resserrent. L'offre ne l'est pas : c'est une carte prix et une
   colonne d'argumentaire, deux blocs qui ne se plient pas tout seuls.
   Le seuil etait donc haut — 1240px de large et 880px de haut — parce
   qu'a hauteurs et paddings figes le bloc pesait 877px quoi qu'il arrive.

   Ces hauteurs ne sont plus figees : --offre-pas fait descendre toutes
   les respirations du bloc avec la fenetre, et le prix, le delai et la
   liste suivent. Le bloc mesure desormais 640px sur un 1280x665 contre
   842px avant, le seuil peut donc descendre avec lui.

   IL RESTE UN SEUIL, ET C'EST LE POINT. Sous 1200px de large, les deux
   colonnes se resserrent assez pour que trois lignes s'ajoutent, et le
   bloc repasse au-dessus de la fenetre : lui reclamer l'ecran entier n'y
   ferait que couper la carte. Les mesures relevees au rendu : 19px de
   marge a 1200x640, 25px a 1240x650, 31px a 1280x665, mais -10px a 1100
   et -55px a 1024. D'ou 1200x640, et la hauteur naturelle en dessous.

   Le point d'ancrage du defilement est pose ICI et pas avec celui de la
   promesse, pour la meme raison : un aimant qui depose le lecteur en haut
   d'un bloc plus haut que sa fenetre lui cache la fin du bloc et se bat
   avec lui quand il descend. Pas d'aimant la ou le pli ne tient pas. */
.gdn-hero-v3__fold--offre { min-height: 0; }

@media (min-width: 1200px) and (min-height: 640px) {
  .gdn-hero-v3__fold--offre {
    min-height: 100vh;
    min-height: 100svh;
    scroll-snap-align: start;
  }

  /* L'offre est une grille, pas un flex : c'est align-content qui centre
     ses pistes dans la hauteur gagnee, la ou la promesse utilisait
     justify-content. align-items: start est conserve, sinon la carte
     s'etirerait a la hauteur de la colonne de texte. */
  .gdn-hero-v3__offre {
    flex: 1 1 auto;
    align-content: center;
  }
}

/* ─── DEFILEMENT ECRAN PAR ECRAN ─────────────────────────────────
   Scroll snap natif, sans une ligne de JavaScript. Les deux plis font
   chacun une fenetre exactement : ils deviennent deux points d'ancrage,
   et le defilement se pose sur l'un ou sur l'autre au lieu de s'arreter
   entre les deux.

   PROXIMITY ET NON MANDATORY, et c'est LE choix de cette regle. Avec
   mandatory, le conteneur doit toujours reposer sur un point d'ancrage
   des qu'on cesse de defiler. Or la page continue sur huit sections qui
   n'en portent aucun : le navigateur ramenerait le lecteur au dernier
   point connu chaque fois qu'il s'arrete plus bas, et la page entiere
   deviendrait un piege. proximity n'attire que si l'arret a deja lieu
   pres d'un point : on obtient l'effet ecran par ecran sur les deux
   plis, et le reste de la page defile normalement.

   PAS DE scroll-padding-top malgre le header fixe. Le pli fait
   exactement 100svh ; decaler l'ancrage de 108px sortirait la bande du
   bas de l'ecran, or c'est precisement elle qu'on vient y poser.

   La regle vise html parce que c'est lui le conteneur de defilement du
   document : body ne l'est pas, son overflow-x: hidden se propage au
   viewport. Cette feuille n'etant chargee que sur la home v3 (cf.
   router_fr.php), la portee reste celle de la page.

   Le palier exclut le telephone a dessein. Sur mobile la barre d'URL
   se retracte pendant le defilement : la fenetre visible devient plus
   haute que les 100svh du pli, l'ancrage ne tombe plus au bord et
   laisse un liseré de la section suivante. Mieux vaut pas d'aimant
   qu'un aimant qui vise a cote. */
@media (min-width: 768px) and (min-height: 640px) {
  html { scroll-snap-type: y proximity; }

  /* Seule la promesse porte son ancrage ici : elle fait toujours une
     fenetre exactement. Celui de l'offre est pose plus haut dans la
     feuille, avec la regle qui lui donne l'ecran entier, parce qu'il n'a
     de sens qu'aux tailles ou le bloc y tient. */
  .gdn-hero-v3__fold--promesse { scroll-snap-align: start; }
}

/* ─── 1. LA PROMESSE ───────────────────────────────────────────
   flex: 1 lui donne tout l'espace libre du pli, justify-content le
   recentre dedans : le bloc est optiquement cale entre le header et
   la bande, quelle que soit la hauteur de fenetre. */
.gdn-hero-v3__promesse {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--hero-rythme);
  width: 100%;
  max-width: var(--hero-shell);
  margin: 0 auto;
  padding-block: var(--hero-rythme) calc(var(--hero-rythme) * 1.6);
  padding-inline: var(--hero-gutter);
  text-align: center;
  animation: fadeUp .7s ease both;   /* keyframes definies dans style.css */
}

/* Eyebrow du hero : un kicker nu, plus une pilule. Le verre depoli, le
   contour et la pastille verte en faisaient un troisieme objet pose sur
   le mesh, juste au-dessus du titre, alors qu'un eyebrow doit se lire
   AVEC lui et non lui disputer l'attention. Restent deux libelles en
   capitales, separes d'un filet vertical. */
.gdn-hero-v3__chip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.gdn-hero-v3__chip-label,
.gdn-hero-v3__chip-since {
  font-size: var(--hero-fs-chip);
  letter-spacing: .13em;
  text-transform: uppercase;
}

/* Le libelle porte l'encre pleine du titre : c'est lui la promesse.
   `balance` repartit les deux lignes quand il en prend deux. */
.gdn-hero-v3__chip-label {
  font-weight: 500;
  line-height: 1.6;
  color: var(--gdn-black);
  text-wrap: balance;
}

/* Le filet remplace le · : meme role de separateur, mais il ne se
   lit pas comme un caractere et se retire proprement quand l'eyebrow
   passe en colonne. Hauteur fixe : il se cale sur la capitale, pas sur
   l'interligne, qui lui donnerait deux fois trop de tirant. */
.gdn-hero-v3__chip-rule {
  flex: 0 0 auto;
  width: 1px;
  height: 14px;
  background: rgba(119, 119, 119, .4);
}

/* La date recule d'un cran, en gris et sans la graisse : c'est une
   mention, pas la moitie du message. */
.gdn-hero-v3__chip-since {
  font-weight: 400;
  color: var(--gdn-grey);
}

.gdn-hero-v3__title {
  margin: 0;
  max-width: 100%;   /* la colonne est deja bornee par --hero-shell */
  /* Le chip est l'eyebrow du titre, pas un quatrieme element autonome :
     on lui reprend 40 % du rythme pour qu'il se lise avec lui. Le reste
     de la colonne garde la gouttiere pleine. */
  margin-top: calc(var(--hero-rythme) * -.4);
  font-size: var(--hero-fs-title);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -.02em;
  color: var(--gdn-black);
  text-wrap: pretty;
}

/* Le vert du H1 : <strong> sans la graisse 700 de Bootstrap, comme
   partout ailleurs sur le site (le poids reste 500, seule la couleur change). */
.gdn-hero-v3__title strong,
.gdn-hero-v3__offre-title strong {
  font-weight: 500;
  color: var(--gdn-green);
}

.gdn-hero-v3__lead {
  margin: 0;
  max-width: 780px;
  font-size: var(--hero-fs-lead);
  font-weight: 300;
  line-height: 1.7;
  color: var(--gdn-text-sec);
}

.gdn-hero-v3__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px;
  /* A l'inverse, l'action se detache : ce qu'on gagne sur le chip est
     rendu ici, ou la rupture entre lire et cliquer doit se sentir. */
  padding-top: calc(var(--hero-rythme) * .45);
}

/* ─── [TEST] LA BANDE DE LOGOS CLIENTS ──────────────────────────
   Cinquieme element de la colonne, sous le CTA. Le partiel et les
   mesures de base vivent ailleurs (inc/common/fr/logos_carousel_fr.php,
   .gdn-logos dans style.css) : cette variante ne fait que remettre la
   bande a l'echelle DU PLI, qui est un budget vertical, pas une page.

   ELLE EST LE TROISIEME REGISTRE DE PREUVE DU PREMIER ECRAN, apres la
   promesse et avant les reperes chiffres : des noms, puis des chiffres.
   D'ou sa place ici, et sa discretion — elle se lit apres le titre, le
   chapo et le bouton, jamais avant.

   LA BANDE DOIT S'ETIRER, ELLE, ET NON SE CENTRER. La colonne est en
   align-items: center : sans align-self, la section se dimensionnerait
   sur son contenu, qui est une piste en max-content de plus de 2000px.
   Le overflow: hidden de la piste borne ce qui se PEINT, pas la largeur
   intrinseque demandee. stretch + min-width: 0 la ramenent a la mesure
   de la colonne, et la piste deborde a l'interieur, comme prevu. */
.gdn-logos--hero {
  align-self: stretch;
  width: 100%;
  min-width: 0;

  /* Les trois mesures de la bande passent sur la HAUTEUR de fenetre pour
     la premiere, sur la largeur pour les deux autres, et c'est voulu :
     dans un pli de 100svh, ce sont les pixels VERTICAUX qui manquent. La
     bande rend ainsi 8px de haut au premier ecran d'un 1280x665 sans rien
     perdre de sa lisibilite, et retrouve ses 30px des 1035px de haut. */
  --gdn-logo-h:    clamp(22px, 2.9vh, 30px);
  --gdn-logo-slot: clamp(92px, 7.6vw, 132px);
  --gdn-logo-gap:  clamp(24px, 2.6vw, 44px);

  /* PAS VERTICAL DE LA BANDE — et pourquoi il ne peut PAS etre
     --hero-rythme, malgre la parente evidente entre les deux.

     La bande est le CINQUIEME element d'une colonne reglee pour quatre.
     Les quatre premiers se partagent l'espace libre du pli ; elle, elle
     arrive en plus. Calee sur --hero-rythme, elle coutait 80px a un
     1280x665 qui n'en avait que 55 de libres : la bande de reperes
     passait sous la ligne de flottaison, et le premier ecran perdait
     precisement ce qu'il est cense fermer. Un pas plus lent ne corrigeait
     rien — c'est la PENTE qu'il fallait changer, pas le facteur.

     D'ou une loi propre, de meme forme que --hero-rythme et --offre-pas
     (ordonnee negative comprise) mais NETTEMENT plus raide : 13,1vh
     contre 7,9. La bande rend donc ses pixels bien plus vite que le reste
     de la colonne quand la fenetre se raccourcit — ce qui est juste, elle
     est le dernier arrive. Les deux bouts, mesures au rendu : 48px a
     948px de haut (la valeur voulue), 11px a 665px, ou ces 37px rendus
     sont exactement ce qui remet les reperes dans l'ecran. */
  --logos-pas: clamp(8px, 13.1vh - 76px, 64px);
}

/* LE LIBELLE ET SA BANDE SONT DEUX OBJETS, PAS UN BLOC COMPACT. Les 14px
   d'origine les collaient : le libelle se lisait comme une legende posee
   sur les logos, et l'ensemble faisait un pave sombre de plus dans une
   colonne qui respire partout ailleurs.

   LA MESURE EST UNE UNITE DE --logos-pas, ET PAS UNE VALEUR A ELLE. Elle
   vaut 48px sur le 1912x948 de reference, comme demande, mais elle n'y est
   pas ecrite : elle descend du pas de la bande, donc elle grandit avec la
   fenetre (64px au plafond) et se resserre quand celle-ci se raccourcit
   (11px a 665). Un `3rem` fixe tenait le premier cas et faisait deborder
   le pli dans le second.

   Le libelle emprunte aussi l'echelle typographique de l'eyebrow : meme
   registre, une capitale fine qui annonce sans peser. */
.gdn-logos--hero .gdn-logos__intro {
  margin-bottom: var(--logos-pas);
  font-size: calc(var(--hero-fs-chip) * .95);
  color: var(--gdn-grey);
}

/* ET LA BANDE RECULE D'AUTANT PLUS DU BOUTON. Sans cette ligne, le libelle
   se retrouvait a egale distance du CTA au-dessus et des logos en dessous :
   a 50px de part et d'autre il flottait entre les deux, et on ne savait plus
   ce qu'il annonce. Le demi-pas repris ici s'ajoute a la gouttiere de la
   colonne (--hero-rythme) : l'ecart au-dessus du libelle vaut alors une fois
   et demie celui d'en dessous sur un grand ecran, et jusqu'a trois fois sur
   un ecran bas, ou le pas s'effondre plus vite que la gouttiere. Le libelle
   reste donc rattache a sa bande partout, de plus en plus nettement a mesure
   que la place manque. */
.gdn-logos--hero { margin-top: calc(var(--logos-pas) * .5); }

/* Un cran plus efface que sur fond blanc : le mesh du hero porte deja
   de la matiere, et la bande ne doit pas disputer le vert du bouton
   qu'elle suit immediatement. */
.gdn-logos--hero .gdn-logo-img { filter: grayscale(1) opacity(.58); }
.gdn-logos--hero .gdn-logo-img:hover { filter: none; }

/* FONDU COURT, PARCE QUE LA BANDE EST ENCASTREE ET NON PLEINE PAGE. Le
   fondu de base est regle pour une bande qui touche les bords de l'ecran :
   ses 9 % s'amortissent dans la marge de page, ou il n'y a rien a voir.
   Ici la bande s'arrete a la mesure de la colonne, et ces memes 9 % valent
   117px sur un 1320 — une fente entiere, soit un logo passe en fantome en
   permanence a chaque bout. 3,5 % rendent 46px : de quoi adoucir l'entree
   et la sortie sans effacer personne. */
.gdn-logos--hero .gdn-logos__track {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3.5%, #000 96.5%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 3.5%, #000 96.5%, transparent 100%);
}

/* Sous 768px la colonne se resserre a 24px de gouttiere : la bande garde
   ses fentes mais perd de la gouttiere, sinon deux logos seulement
   tiennent a l'ecran et la bande se lit comme un defile, pas comme un
   ensemble. Le pas suit la meme loi que --hero-rythme sur ce palier, pour
   la raison qui y est deja ecrite : sur une colonne, le budget vertical ne
   se lit plus sur la seule hauteur de fenetre. */
@media (max-width: 767.98px) {
  .gdn-logos--hero {
    --gdn-logo-h:    26px;
    --gdn-logo-slot: 92px;
    --gdn-logo-gap:  26px;
    --logos-pas:     clamp(14px, 3.4vh, 30px);
  }
}

/* LE TELEPHONE BAS N'A PAS LA PLACE, ET AUCUN REGLAGE NE LA LUI DONNERA.
   Mesure faite : sur un 390x667, le pli SANS la bande fait exactement 667px
   — le chapo y prend cinq lignes et les reperes passent en 2x2, soit 198px
   a eux seuls. Il ne reste pas un pixel libre. Ce n'est donc pas une bande
   trop grande, c'est un ecran deja plein : la resserrer encore ne ferait que
   deplacer le debordement de quelques pixels, et les reperes chiffres — la
   preuve que le pli DOIT fermer — sortiraient quand meme de l'ecran.

   Entre les deux registres de preuve, on garde celui qui porte les chiffres
   et la promesse. La bande s'efface, et seulement la ou elle ne tient pas :
   des 740px de haut, elle revient (un 390x844 la rend deja sans un pixel de
   debord). La section reste la seule a partir : rien d'autre ne bouge. */
@media (max-width: 767.98px) and (max-height: 739.98px) {
  .gdn-logos--hero { display: none; }
}

/* ─── LES DEUX BANDES ────────────────────────────────────────────
   Le hero en porte deux, baties sur le meme gabarit : les reperes
   chiffres sous la promesse (etage 2) et le bandeau de preuve qui
   ferme la section (etage 4). Meme grille, meme cellule, meme
   typographie ; seule leur position et leur contenu different, d'ou
   des selecteurs groupes plutot que deux jeux de regles jumelles.

   Pleine largeur, fondue vers le transparent aux deux extremites.
   Les deux colonnes de 130px sont des TAMPONS : elles absorbent la
   rampe du masque pour qu'aucun chiffre ne soit rogne. Ne pas les
   retirer (cf. INTEGRATION-1C.md). Le fond de la grille fait office
   de filets : gap 1px sur fond gris, cellules blanches par-dessus. */
.gdn-hero-v3__reperes,
.gdn-hero-v3__preuves {
  display: grid;
  /* LES TAMPONS SUIVENT LA LARGEUR. A 130px fixes, ils coutaient 260px :
     13 % d'un 1912, mais 20 % d'un 1280, ou les quatre cellules tombaient
     a 254px et cassaient « Accompagnement reactif et espace client » (234px
     de texte) sur deux lignes. 6,8vw vaut exactement 130px a 1912 — la
     bande large ne bouge pas — et 87px a 1280, ce qui rend 22px a chaque
     cellule et remet les quatre libelles sur une ligne.
     Le fondu, lui, reste exprime en % de la bande : il mord alors de 27px
     sur la premiere cellule a 1280, comme il le fait deja de 42px a 1912. */
  --bande-tampon: clamp(76px, 6.8vw, 130px);
  grid-template-columns: var(--bande-tampon) repeat(4, minmax(0, 1fr)) var(--bande-tampon);
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: rgba(119, 119, 119, 0.10);
  border-top: 1px solid rgba(119, 119, 119, 0.10);
  border-bottom: 1px solid rgba(119, 119, 119, 0.10);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .08) 2%, rgba(0, 0, 0, .4) 5%, rgba(0, 0, 0, .8) 7.5%, #000 9%, #000 91%, rgba(0, 0, 0, .8) 92.5%, rgba(0, 0, 0, .4) 95%, rgba(0, 0, 0, .08) 98%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .08) 2%, rgba(0, 0, 0, .4) 5%, rgba(0, 0, 0, .8) 7.5%, #000 9%, #000 91%, rgba(0, 0, 0, .8) 92.5%, rgba(0, 0, 0, .4) 95%, rgba(0, 0, 0, .08) 98%, transparent 100%);
}

.gdn-hero-v3__repere,
.gdn-hero-v3__preuve,
.gdn-hero-v3__reperes::before,
.gdn-hero-v3__reperes::after,
.gdn-hero-v3__preuves::before,
.gdn-hero-v3__preuves::after {
  background: #fff;
}

/* Les deux tampons, en pseudo-elements : ce sont des cellules de
   grille vides, sans role semantique, donc pas de <div> vide dans le
   markup. ::before occupe la 1re colonne, ::after la derniere. */
.gdn-hero-v3__reperes::before,
.gdn-hero-v3__reperes::after,
.gdn-hero-v3__preuves::before,
.gdn-hero-v3__preuves::after {
  content: "";
}

.gdn-hero-v3__repere,
.gdn-hero-v3__preuve {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  /* Hauteur de cellule indexee sur la fenetre, comme le rythme du pli :
     la bande ferme le premier ecran, elle doit se serrer quand celui-ci
     se raccourcit. 22px des 920px de haut (le rendu d'origine ne bouge
     pas), 16px sur un 665px, ou ces 12px rendus a la promesse comptent. */
  padding: clamp(14px, 2.4vh, 22px) 16px;
}

/* L'AIMANT DES VALEURS. Les libelles n'ont pas tous la meme longueur :
   « Accompagnement reactif et espace client » passe sur deux lignes des
   que la cellule descend sous ~300px, c'est-a-dire des 1280px de large,
   et sa valeur tombait alors 21px plus bas que les trois autres. La
   gouttiere auto pousse la valeur au BAS de la cellule : les quatre
   valeurs retrouvent une ligne commune, que le libelle tienne sur une
   ligne ou sur deux. Rien ne change la ou ils tiennent tous sur une. */
.gdn-hero-v3__repere-val,
.gdn-hero-v3__preuve-val {
  margin-top: auto;
  /* 1,35rem des 920px de haut (rendu large inchange), 1,15rem sur une
     fenetre de 665 : la bande ferme un pli, sa hauteur se negocie avec
     le reste comme tout le reste du bloc. */
  font-size: clamp(1.15rem, 2.3vh, 1.35rem);
  font-weight: 500;
  color: var(--gdn-green);
}

.gdn-hero-v3__repere-lib,
.gdn-hero-v3__preuve-lib {
  max-width: 250px;
  font-size: .85rem;
  font-weight: 300;
  text-align: center;
  color: var(--gdn-text-sec);
}

/* ─── 3. L'OFFRE D'ENTREE ────────────────────────────────────────
   Deux colonnes : la prose a gauche (un peu plus large), la carte
   prix encre a droite. `align-items: start` pour que la carte ne
   s'etire pas a la hauteur du texte. */
.gdn-hero-v3__offre {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  /* La gouttiere centrale suit la largeur : 72px au-dela de 1440px comme
     avant, 64px a 1280, ou les 8px rendus vont aux deux colonnes. */
  gap: clamp(40px, 5vw, 72px);
  align-items: start;
  max-width: var(--hero-shell);
  margin: 0 auto;
  /* Meme logique que le rythme du pli : les respirations hautes et basses
     se mesurent en hauteur de fenetre, ordonnee negative comprise puisque
     ce sont elles qui doivent ceder le plus quand le pli se resserre.
     72/80px a 948px de haut (rendu large inchange), 28/32px a 665. */
  padding-block: clamp(28px, 15.5vh - 75px, 72px) clamp(32px, 17vh - 81px, 80px);
  padding-inline: var(--hero-gutter);
  /* La bande de reperes masque l'ancre #offre sous le header fixe. */
  scroll-margin-top: var(--gdn-anchor-offset);
}

.gdn-hero-v3__offre-col {
  display: flex;
  flex-direction: column;
  gap: var(--offre-pas);
}

.gdn-hero-v3__eyebrow {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gdn-text-sec);
}

.gdn-hero-v3__offre-title {
  margin: 0;
  /* Fluide plutot que trois paliers fixes (2,7 / 2,4 / 2,325rem) : la
     colonne de gauche perd 35 % de sa largeur entre 1912 et 1280, le
     titre suivait par sauts et remplissait toute la colonne a 1280.
     La courbe rend 43,2px a 1912 (la valeur d'origine, au pixel) et
     38px a 1280 ; en dessous elle rejoint les 1,9rem du palier mobile. */
  font-size: clamp(1.9rem, 1.72rem + .82vw, 2.7rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--gdn-black);
  text-wrap: pretty;
}

/* Le prix dans le H2 ne doit jamais se couper sur l'espace insecable
   du separateur de milliers ni avant le signe euro. */
.gdn-hero-v3__offre-title .gdn-hero-v3__nowrap { white-space: nowrap; }

.gdn-hero-v3__offre-lead {
  margin: 0;
  max-width: 560px;
  font-size: 1.1rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--gdn-text-sec);
}

/* Encart IA : bord pointille, meme grammaire que le panneau interieur
   des .gdn-offre-card, mais sur le voile clair du hero. */
.gdn-hero-v3__encart {
  max-width: 600px;
  padding: calc(var(--offre-pas) * .7) 22px;   /* 18px a 948, 11px a 665 */
  border: 1px dashed rgba(119, 119, 119, .45);
  border-radius: var(--gdn-radius-sm);
  background: rgba(255, 255, 255, .5);
  backdrop-filter: blur(4px);
}

.gdn-hero-v3__encart p {
  margin: 0;
  font-size: .95rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--gdn-text-sec);
}

.gdn-hero-v3__encart strong {
  font-weight: 500;
  color: var(--gdn-black);
}

.gdn-hero-v3__offre-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding-top: 2px;
}

/* Rappel des inclus, sous les CTA : liste horizontale a puces cochees. */
.gdn-hero-v3__inclus {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .88rem;
  font-weight: 300;
  color: var(--gdn-text-sec);
}

.gdn-hero-v3__inclus li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.gdn-hero-v3__inclus img { width: 18px; height: 18px; }

/* ─── 3b. LA CARTE PRIX ──────────────────────────────────────── */
.gdn-hero-v3__carte {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--gdn-radius-card);
  background: var(--gdn-black);
  box-shadow: 0 24px 56px rgba(0, 0, 0, .28);
}

/* Les trois etages de la carte (tete, garantie, liste) prennent leurs
   respirations verticales sur --offre-pas et gardent leurs paddings
   lateraux : c'est la hauteur qui manque, pas la largeur. Les multiples
   sont ceux des valeurs d'origine (36/26 = 1,38, 32/26 = 1,23...), le
   dessin de la carte est donc le meme, a l'echelle pres. */
.gdn-hero-v3__carte-head {
  display: flex;
  flex-direction: column;
  gap: var(--offre-pas);
  padding: calc(var(--offre-pas) * 1.38) 38px calc(var(--offre-pas) * 1.23);
}

/* `gap` et non les espaces du markup : les separateurs &middot; sont des
   <span>, donc des items de flex, et le blanc entre deux items de flex est
   supprime. Sans cette gouttiere on lirait « UNE APPLICATION·UN PRIX ».
   Meme raison pour le `gap` de .gdn-hero-v3__chip. */
.gdn-hero-v3__carte-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: .45em;
  min-height: calc(var(--offre-pas) * 1.15);   /* 30px a 948, 18px a 665 */
  padding: 5px 16px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--gdn-radius-pill);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gdn-text-on-dark-soft);
}

/* Prix et delai, dos a dos, separes par un filet vertical. */
.gdn-hero-v3__carte-chiffres {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.gdn-hero-v3__carte-chiffre {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gdn-hero-v3__carte-chiffre--delai { text-align: right; }

.gdn-hero-v3__carte-sep {
  flex: 0 0 auto;
  width: 1px;
  height: calc(var(--offre-pas) * 2.15);   /* 56px a 948, 34px a 665 */
  background: var(--gdn-border-dark);
}

/* Prix et delai descendent eux aussi avec la fenetre : ce sont les deux
   plus grosses masses de la carte, les figer aurait fait porter toute la
   compaction aux blancs. 48/30px a 948px de haut, 34/21px a 665. */
.gdn-hero-v3__prix {
  font-size: clamp(2.1rem, 5.06vh, 3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: #fff;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.gdn-hero-v3__delai {
  font-size: clamp(1.32rem, 3.2vh, 1.9rem);
  font-weight: 500;
  line-height: 1.1;
  color: #fff;
  white-space: nowrap;
}

.gdn-hero-v3__carte-legende {
  font-size: .78rem;
  font-weight: 300;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gdn-text-on-dark-soft);
}

/* Bandeau « Livraison garantie » : surface secondaire --gdn-dark,
   cernee de deux filets, entre la tete et la liste. */
.gdn-hero-v3__garantie {
  display: flex;
  gap: 14px;
  padding: calc(var(--offre-pas) * .92) 38px;   /* 24px a 948, 15px a 665 */
  background: var(--gdn-dark);
  border-top: 1px solid var(--gdn-border-dark);
  border-bottom: 1px solid var(--gdn-border-dark);
}

.gdn-hero-v3__garantie-puce {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gdn-green);
}

.gdn-hero-v3__garantie-puce img { width: 18px; height: 18px; }

.gdn-hero-v3__garantie-txt {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.gdn-hero-v3__garantie-titre {
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
}

.gdn-hero-v3__garantie-desc {
  font-size: .88rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--gdn-text-on-dark-soft);
}

.gdn-hero-v3__carte-body {
  display: flex;
  flex-direction: column;
  gap: calc(var(--offre-pas) * .62);
  padding: calc(var(--offre-pas) * 1.08) 38px calc(var(--offre-pas) * 1.31);
}

.gdn-hero-v3__carte-label {
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gdn-text-on-dark-faint);
}

.gdn-hero-v3__compris {
  display: flex;
  flex-direction: column;
  /* Cinq lignes : c'est la gouttiere de cette liste qui pese le plus dans
     la hauteur de la carte. 16px a 948, 10px a 665. */
  gap: calc(var(--offre-pas) * .62);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gdn-hero-v3__compris li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: clamp(.88rem, 1.61vh, .95rem);
  font-weight: 300;
  line-height: 1.55;
  color: rgba(255, 255, 255, .85);
}

/* Icone alignee sur la premiere ligne de texte, pas sur son centre. */
.gdn-hero-v3__compris img {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: .2em;
}

/* ─── 4. LE BANDEAU DE PREUVE ──────────────────────────────────
   Grille, cellule et typographie viennent du gabarit commun aux deux
   bandes, plus haut. Ne reste ici que ce que les reperes n'ont pas :
   le lien de la cellule CyberVadis.

   L'ancre reprend la mise en colonne de la cellule, sinon ses deux
   spans redeviendraient deux boites en ligne et casseraient
   l'alignement. Elle occupe toute la cellule, ce qui donne une cible
   de clic a la mesure du bloc. */
.gdn-hero-v3__preuve a {
  display: flex;
  flex: 1 1 auto;        /* sinon l'aimant des valeurs se cale sur la hauteur
                            du lien et non sur celle de la cellule */
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  color: inherit;
  text-decoration: none;
}

/* Le seul lien du bandeau reste discret : il ne se signale qu'au
   survol, pour ne pas concurrencer les deux CTA de l'offre. */
.gdn-hero-v3__preuve a .gdn-hero-v3__preuve-val {
  transition: color var(--gdn-transition);
}

.gdn-hero-v3__preuve a:hover .gdn-hero-v3__preuve-val,
.gdn-hero-v3__preuve a:focus-visible .gdn-hero-v3__preuve-val {
  color: var(--gdn-green-hover);
  text-decoration: underline;
}

/* ─── BOUTONS ────────────────────────────────────────────────────
   Trois variantes, toutes en pilule. Les deux pleines reprennent le
   lift -2px commun aux CTA du site (--gdn-transition). */
.gdn-hero-v3 .gdn-hero-v3__btn {
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 30px;
  border: 1px solid transparent;
  border-radius: var(--gdn-radius-pill);
  font-size: .95rem;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--gdn-transition), color var(--gdn-transition),
              transform var(--gdn-transition), box-shadow var(--gdn-transition);
}

.gdn-hero-v3 .gdn-hero-v3__btn--green {
  height: clamp(54px, 2.6vh + 38px, 64px);
  padding: 0 clamp(30px, 2.4vw, 40px);
  font-size: var(--hero-fs-cta);
  background: var(--gdn-green);
  color: #fff;
  box-shadow: 0 10px 24px rgba(25, 135, 84, .28);
}

.gdn-hero-v3 .gdn-hero-v3__btn--green:hover,
.gdn-hero-v3 .gdn-hero-v3__btn--green:focus-visible {
  background: var(--gdn-green-hover);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(25, 135, 84, .34);
}

/* Le CTA « Vérifier si mon projet est éligible » de l'offre reprend la
   couleur de --green (même bouton que le hero), mais pas son gabarit de
   taille fluide : ce dernier est pensé pour un bouton seul dans le hero, pas
   pour une paire cote a cote qui doit rester sur une ligne en desktop
   (.gdn-hero-v3__offre-actions). Il retrouve donc la taille fixe de son
   voisin --veil. */
.gdn-hero-v3__offre-actions .gdn-hero-v3__btn--green {
  font-size: .95rem;
}

/* Les deux CTA suivent le pli comme le reste : 52px de haut a 948, 44px a
   665 — la borne basse est la cible tactile minimale, on ne descend pas
   en dessous.

   Leur padding lateral, lui, suit la LARGEUR. La colonne de texte mesure
   598px a 1912 et 579px a 1280 ; a 30px de padding fixe, la paire demandait
   583px et passait a la ligne juste sous 1400px. 24px a 1280 la ramene a
   565px, et le plafond rend les 30px d'origine des 1580px. */
.gdn-hero-v3__offre-actions .gdn-hero-v3__btn {
  height: clamp(44px, 5.5vh, 52px);
  padding: 0 clamp(18px, 1.9vw, 30px);
}

.gdn-hero-v3 .gdn-hero-v3__btn--veil {
  background: var(--gdn-veil);
  backdrop-filter: blur(4px);
  border-color: var(--gdn-veil-edge);
  color: var(--gdn-black);
  font-weight: 400;
}

.gdn-hero-v3 .gdn-hero-v3__btn--veil:hover,
.gdn-hero-v3 .gdn-hero-v3__btn--veil:focus-visible {
  background: rgba(255, 255, 255, .9);
  color: var(--gdn-black);
  transform: translateY(-2px);
}

.gdn-hero-v3 .gdn-hero-v3__btn--green:active,
.gdn-hero-v3 .gdn-hero-v3__btn--veil:active {
  transform: translateY(0);
  box-shadow: none;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — paliers Bootstrap du site (html-conventions.md §8)
   ══════════════════════════════════════════════════════════════ */

/* ─── < 1200px : la grille de l'offre se resserre avant de casser ── */
@media (max-width: 1199.98px) {
  /* gap et taille de titre sont desormais fluides (cf. .gdn-hero-v3__offre
     et .gdn-hero-v3__offre-title) : la courbe passe par 48px et 2,33rem a
     ce palier, les deux paliers fixes n'avaient plus qu'a disparaitre. */
  .gdn-hero-v3__carte-head,
  .gdn-hero-v3__carte-body  { padding-left: 30px; padding-right: 30px; }
  .gdn-hero-v3__garantie    { padding-left: 30px; padding-right: 30px; }
}

/* ─── < 992px : l'offre passe sur une colonne ───────────────────
   La carte prix descend sous le texte (ordre du DOM, deja bon). */
@media (max-width: 991.98px) {
  /* Le header retombe a 68px : le pli rend les 40px au contenu. */
  .gdn-hero-v3 { --hero-header-h: 68px; }

  /* Et le pas de l'offre reprend sa valeur pleine. La compaction n'existe
     que pour faire tenir le second pli dans une fenetre de bureau basse ;
     sur une colonne il n'y a plus de pli a faire tenir, seulement une page
     qui defile, et rien ne justifie de resserrer la carte. Un telephone
     tenu a la main est haut : sans cette ligne, un 390x844 aurait herite
     d'une carte 17 % plus dense que sur un 390x956. */
  .gdn-hero-v3 { --offre-pas: 26px; }

  .gdn-hero-v3__offre-title { font-size: 2.325rem; }

  .gdn-hero-v3__offre {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
  }

  /* Sous 992px le header fixe retombe a 68px (cf. style.css) : l'ancre
     #offre n'a plus besoin du meme degagement. */
  .gdn-hero-v3__offre { scroll-margin-top: 92px; }

  /* Les deux tampons coutent 260px : sur une tablette, c'est un tiers de la
     largeur pris a quatre colonnes qui cassent deja leurs libelles. On les
     retire, et le fondu avec eux puisqu'il n'a plus de zone pour s'amortir.
     Une bande qui touche les bords est la norme a cette largeur. */
  .gdn-hero-v3__reperes,
  .gdn-hero-v3__preuves {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    -webkit-mask-image: none;
            mask-image: none;
  }

  .gdn-hero-v3__reperes::before,
  .gdn-hero-v3__reperes::after,
  .gdn-hero-v3__preuves::before,
  .gdn-hero-v3__preuves::after { display: none; }

  .gdn-hero-v3__offre-lead,
  .gdn-hero-v3__encart { max-width: none; }
}

/* ─── < 768px : bande de reperes en 2x2, paddings mobiles ───────
   Les tampons et le fondu n'ont plus de sens sur deux colonnes :
   on les retire pour recuperer toute la largeur utile. */
@media (max-width: 767.98px) {
  /* Le rythme est indexe sur la hauteur seule, ce qui le trompe ici : a
     390px de large le chapo prend cinq lignes la ou il en prend trois sur
     un ecran, et le budget vertical fond. On le replafonne. */
  .gdn-hero-v3 { --hero-rythme: clamp(16px, 3.4vh, 30px); }

  .gdn-hero-v3__promesse { padding-left: 24px; padding-right: 24px; }

  /* L'eyebrow s'empile : sur une ligne, ses deux libelles en capitales
     cassent n'importe ou et le filet se retrouve en tete de ligne. Le
     separateur n'a plus rien a separer, il s'efface, et la date se
     resserre pour rester une mention sous la promesse. */
  .gdn-hero-v3__chip { flex-direction: column; gap: 8px; }
  .gdn-hero-v3__chip-rule  { display: none; }
  .gdn-hero-v3__chip-since { font-size: calc(var(--hero-fs-chip) * .94); }

  /* Tampons et fondu sont deja neutralises au palier 992px. */
  .gdn-hero-v3__reperes,
  .gdn-hero-v3__preuves {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gdn-hero-v3__repere,
  .gdn-hero-v3__preuve { padding: 18px 12px; }

  .gdn-hero-v3__repere-val,
  .gdn-hero-v3__preuve-val { font-size: 1.15rem; text-align: center; }

  .gdn-hero-v3__offre {
    gap: 36px;
    padding: 56px 24px 64px;
  }

  .gdn-hero-v3__offre-title { font-size: 1.9rem; }
  .gdn-hero-v3__offre-lead  { font-size: 1rem; }

  /* Les deux CTA de l'offre prennent toute la largeur : cote a cote
     ils tombaient sous 300px utiles et coupaient leur libelle. */
  .gdn-hero-v3__offre-actions { gap: 12px; }

  .gdn-hero-v3 .gdn-hero-v3__btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .gdn-hero-v3__inclus { gap: 12px 20px; }

  .gdn-hero-v3__carte-head,
  .gdn-hero-v3__carte-body { padding-left: 24px; padding-right: 24px; }
  .gdn-hero-v3__garantie   { padding: 20px 24px; }

  .gdn-hero-v3__prix  { font-size: 2.4rem; }
  .gdn-hero-v3__delai { font-size: 1.6rem; }

  /* Le filet vertical n'a plus de place quand prix et delai s'empilent. */
  .gdn-hero-v3__carte-sep { display: none; }
  .gdn-hero-v3__carte-chiffres { gap: 18px; }
  .gdn-hero-v3__carte-chiffre--delai { text-align: left; }

}

/* ─── Mobile etroit ──────────────────────────────────────────────
   Les bandes RESTENT en deux colonnes, meme a 390px. En une seule,
   les quatre cellules empilees demandent pres de 380px de haut : la
   bande ne tiendrait plus dans le pli et se retrouverait sous la ligne
   de flottaison, ce qui lui ote sa raison d'etre. Deux colonnes, valeur
   resserree, cellule plus basse : l'ensemble tient en 200px. */
@media (max-width: 479.98px) {
  .gdn-hero-v3__repere,
  .gdn-hero-v3__preuve { padding: 14px 10px; }

  .gdn-hero-v3__repere-val,
  .gdn-hero-v3__preuve-val { font-size: 1.05rem; }

  .gdn-hero-v3__repere-lib,
  .gdn-hero-v3__preuve-lib { font-size: .8rem; }
}

/* ─── Fenetres basses ────────────────────────────────────────────
   Sous 640px utiles, le pli ne tient plus : la bande passerait sous la
   ligne de flottaison, ce qui lui fait perdre sa raison d'etre. On
   resserre le rythme et on plafonne le titre plutot que de la laisser
   filer.

   Le seuil est mesure, pas choisi. Il depend de la largeur autant que de
   la hauteur, parce que c'est le chapo qui gagne une ligne en se
   resserrant : a 1350px de large le pli tient jusqu'a 625px, mais a
   1264px il deborde des 630px. 639.98 couvre les deux, et la fraction
   suit la convention des paliers du site (767.98, 991.98). */
@media (max-height: 639.98px) {
  .gdn-hero-v3 {
    --hero-rythme:   clamp(12px, 2.4vh, 22px);
    --hero-fs-title: clamp(1.75rem, 1rem + 2.2vw, 2.75rem);
    --hero-fs-lead:  clamp(.95rem, .9rem + .2vw, 1.05rem);
  }

  /* La bande se serre aussi : elle n'a pas a garder sa hauteur de
     confort quand c'est la promesse qui manque de place. */
  .gdn-hero-v3__repere { padding: 14px 16px; }
}

/* ─── Tres petits telephones ─────────────────────────────────────
   A 320px de large, tout gagne une ligne a la fois : le chapo, les
   quatre libelles de la bande, le chip. Le pli debordait de 53px. On
   resserre une derniere fois plutot que de le laisser filer, puisque
   c'est encore la largeur d'un iPhone SE de premiere generation. */
@media (max-width: 359.98px) {
  .gdn-hero-v3 {
    --hero-rythme:  clamp(12px, 2.6vh, 20px);
    --hero-fs-lead: .95rem;
  }

  .gdn-hero-v3__repere,
  .gdn-hero-v3__preuve { padding: 12px 8px; }

  .gdn-hero-v3__repere-val,
  .gdn-hero-v3__preuve-val { font-size: 1rem; }

  .gdn-hero-v3__repere-lib,
  .gdn-hero-v3__preuve-lib { font-size: .75rem; }
}

/* ─── Fenetres tres basses : on renonce au pli ───────────────────
   Deux cas, et deux seulement, ou le pli est physiquement intenable.

   Sous 500px utiles (telephone en paysage) : header et bande mangent
   175px des 390px, il resterait moins de 220px pour le chip, le titre,
   le chapo et le bouton.

   Et sous 640px de haut SI l'ecran est aussi etroit (un 320x568) : la
   seconde condition porte la largeur, parce qu'une fenetre de bureau
   basse mais large, elle, tient tres bien le pli et doit le garder.

   Dans ces deux cas on rend sa hauteur naturelle au bloc et la bande
   reprend sa place dans le flux, plutot que d'ecraser la typo jusqu'a
   l'illisible. Mieux vaut defiler que ne rien pouvoir lire. */
@media (max-height: 499.98px),
       (max-height: 639.98px) and (max-width: 575.98px) {
  .gdn-hero-v3__fold--promesse { min-height: 0; }

  .gdn-hero-v3__promesse {
    padding-top: calc(var(--hero-rythme) * 1.4);
    padding-bottom: calc(var(--hero-rythme) * 1.4);
  }
}

/* ─── Accessibilite : respecter le reglage systeme ─────────────── */
@media (prefers-reduced-motion: reduce) {
  /* Un defilement qui se repositionne tout seul est desorientant quand on
     a demande moins de mouvement : on rend la main. Ce bloc est le dernier
     de la feuille, il l'emporte sur le palier ci-dessus. */
  html { scroll-snap-type: none; }

  .gdn-hero-v3__promesse { animation: none; }

  .gdn-hero-v3 .gdn-hero-v3__btn,
  .gdn-hero-v3 .gdn-hero-v3__btn:hover,
  .gdn-hero-v3 .gdn-hero-v3__btn:focus-visible {
    transform: none;
    transition: none;
  }
}


/* ══════════════════════════════════════════════════════════════
   RYTHME VERTICAL DES SECTIONS — home v3 uniquement
   ──────────────────────────────────────────────────────────────
   .py-section vaut 120px en haut comme en bas dans style.css, quelle que
   soit la fenetre. Sur un 1912x948 c'est 12,6 % de l'ecran ; sur un
   1280x665 c'est 18 %, et deux sections qui se suivent (l'IA puis les cas
   clients) laissent 240px de blanc, soit plus du tiers de la fenetre. La
   page se lisait tassee horizontalement et distendue verticalement.

   On indexe donc le pas vertical sur la fenetre, sans jamais depasser les
   120px d'origine : a 948px de haut la valeur retombe sur 120px (le rendu
   large ne bouge pas), a 665px elle vaut 84px. Le second terme du min()
   tient le cas mobile, ou une fenetre etroite est aussi tres haute : il
   plafonne a 72px des que la largeur passe sous 767px, exactement la
   valeur que style.css y pose deja.

   Cette feuille n'est chargee que sur la home v3 (router_fr.php) : la
   surcharge ne sort pas de cette page, la v2 et le reste du site gardent
   le pas fixe. */
.py-section {
  padding-top:    clamp(72px, min(12.6vh, 9.4vw), 120px);
  padding-bottom: clamp(72px, min(12.6vh, 9.4vw), 120px);
}

/* ══════════════════════════════════════════════════════════════
   L'IA DANS VOTRE APPLICATION
   ──────────────────────────────────────────────────────────────
   Mise en page reprise de la maquette
   .ai-commands/SWS_references/_sessions/_inbox/
   gdn_home_offre_5000_ia_bonnes_bases_v7-1.html (section #ia-metier) :
   kicker, titre large, chapo, quatre cartes, encart de rappel.

   Les numeros 01 a 04 de la maquette ont ete retires : Automatiser,
   Assister, Comprendre et Generer sont quatre familles d'usage
   parallelles, pas quatre etapes. Une numerotation y annoncait un ordre
   de lecture qui n'existe pas.

   PALETTE : surfaces encre d'abord (--gdn-black, cartes --gdn-dark), puis
   ramenee sur les surfaces claires du reste du site. La section precede
   directement les cas clients (inc/common/fr/testimonials_fr.php, meme
   fichier) : deux sections qui se suivent mais l'une en negatif de
   l'autre cassait la lecture. Le vert reste l'unique accent (regle « one
   green accent » du DS), porte par les quatre libelles de carte comme
   avant ; le kicker de section, lui, rejoint le gris du reste du hero
   (--gdn-text-sec, meme traitement que .gdn-hero-v3__eyebrow un peu plus
   haut sur cette meme page) plutot que de dupliquer l'accent en tete de
   section. Bordures et fond de carte reprennent le gris neutre des cas
   clients juste en dessous (--gdn-border, --gdn-grey), pas le bleu de
   leurs étiquettes de sujet : la pastille « Ex. » reste un rappel discret,
   pas une categorie a mettre en avant. */
.gdn-ia {
  /* L'ancre vise le kicker : sans ce decalage il passe sous le header
     fixe. --gdn-anchor-offset n'est pas utilisable ici, style.css la
     redefinit sur .gdn-header et non au :root, sa valeur ne descend
     donc pas jusqu'a nous. */
  scroll-margin-top: 132px;
}

.gdn-ia__kicker {
  margin: 0 0 12px;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gdn-text-sec);
}

.gdn-ia__title {
  margin: 0 0 18px;
  max-width: 900px;
  /* La pente d'origine atteignait son plafond des 1385px : a 1280 le titre
     rendait encore 45,8px pour 48 a 1912, soit la meme typo dans un
     container plus etroit de 180px. La nouvelle pente touche le plafond a
     1912 (48px, rendu inchange) et redescend a 39,5px a 1280. */
  font-size: clamp(1.75rem, 1.35rem + 1.4vw, 3rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--gdn-black);
  text-wrap: pretty;
}

.gdn-ia__intro {
  margin: 0 0 42px;
  max-width: 790px;
  font-size: 1.1rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--gdn-text-sec);
}

.gdn-ia__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* 20px au-dela de 1400px comme avant ; a 1280 le container perd 180px
     et les quatre colonnes tombent a 262px : les 4px repris ici leur
     sont rendus. */
  gap: clamp(16px, 1.05vw, 20px);
}

/* ─── La carte ───────────────────────────────────────────────────
   flex-column pour que la pastille d'exemple se pose au bas de la
   carte : les quatre textes n'ont pas la meme longueur, et sans ca
   les pastilles se decalaient d'une carte a l'autre. Fond blanc et
   bordure --gdn-border : meme recette que .gdn-contact-card, deja
   utilisee ailleurs sur cette page pour une carte claire. */
.gdn-ia-card {
  display: flex;
  flex-direction: column;
  min-height: 275px;
  /* Quatre colonnes de 315px a 1912, de 266px a 1280 : a padding constant,
     le texte des cartes perdait 20 % de sa largeur utile et les titres
     passaient de deux a trois lignes. Le cadre se resserre avec elles. */
  padding: clamp(22px, 1.5vw, 28px);
  border: 1px solid var(--gdn-border);
  border-radius: var(--gdn-radius-card);
  background: #fff;
}

.gdn-ia-card__label {
  margin: 0;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gdn-green);
}

.gdn-ia-card__title {
  /* L'ecart au libelle suit lui aussi la largeur : 34px dans une carte de
     315px, 26px dans une carte de 266px, ou il valait deux lignes de
     texte. */
  margin: clamp(24px, 1.8vw, 34px) 0 10px;
  font-size: clamp(1.15rem, .8rem + .55vw, 1.375rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--gdn-black);
}

.gdn-ia-card__desc {
  margin: 0;
  font-size: .95rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--gdn-text-sec);
}

.gdn-ia-card__example {
  align-self: flex-start;
  margin-top: auto;
  padding: 7px 14px;
  /* --gdn-radius-sm et non la pilule du DS : deux des quatre libelles
     passent sur deux lignes, et un rayon de 50px sur un bloc de deux
     lignes donne un stade, pas une pastille. */
  border-radius: var(--gdn-radius-sm);
  background: rgba(119, 119, 119, .08);
  font-size: .75rem;
  font-weight: 500;
  color: var(--gdn-text-sec);
}

/* Le rappel du forfait, en pied de section : meme grammaire que
   l'encart pointille de l'offre et la bande CyberVadis juste au-dessus
   (rgba(119,119,119,.05)), transposee ici. */
.gdn-ia__note {
  margin: 20px 0 0;
  padding: 19px 21px;
  border: 1px solid var(--gdn-border);
  border-radius: var(--gdn-radius-sm);
  background: rgba(119, 119, 119, .05);
  font-size: .95rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--gdn-text-sec);
}

.gdn-ia__note strong {
  font-weight: 500;
  color: var(--gdn-black);
}

/* Le CTA de rappel, centre sous l'encart du forfait. Il reutilise les
   classes .gdn-hero-v3__btn--green du hero pour rester le meme bouton a
   l'oeil, mais leurs regles sont scopees a .gdn-hero-v3 : hors du hero
   elles ne s'appliquent pas, d'ou la reprise ci-dessous. Gabarit fixe
   (52px), comme dans .gdn-hero-v3__offre-actions et non la taille fluide
   du CTA principal. */
.gdn-ia__cta {
  /* --gdn-radius-pill et --gdn-green-hover sont declarees sur .gdn-hero-v3
     (haut de feuille), pas sur :root : hors du hero elles ne resolvent pas
     et le bouton perdait sa pilule comme son survol. On les reprend ici,
     aux memes valeurs, en attendant que style.css importe les tokens DS. */
  --gdn-radius-pill: 50px;
  --gdn-green-hover: #146c43;

  display: flex;
  justify-content: center;
  margin-top: 28px;
}

.gdn-ia__cta .gdn-hero-v3__btn {
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 30px;
  border: 1px solid transparent;
  border-radius: var(--gdn-radius-pill);
  font-size: .95rem;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  transition: background var(--gdn-transition), color var(--gdn-transition),
              transform var(--gdn-transition), box-shadow var(--gdn-transition);
}

.gdn-ia__cta .gdn-hero-v3__btn--green {
  background: var(--gdn-green);
  color: #fff;
  box-shadow: 0 10px 24px rgba(25, 135, 84, .28);
}

.gdn-ia__cta .gdn-hero-v3__btn--green:hover,
.gdn-ia__cta .gdn-hero-v3__btn--green:focus-visible {
  background: var(--gdn-green-hover);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(25, 135, 84, .34);
}

.gdn-ia__cta .gdn-hero-v3__btn--green:active {
  transform: translateY(0);
  box-shadow: none;
}

/* ─── Responsive : 4 colonnes, puis 2, puis 1 ────────────────── */
@media (max-width: 1199.98px) {
  .gdn-ia__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
  /* Le header retombe a 68px sous 992px (cf. style.css). */
  .gdn-ia { scroll-margin-top: 92px; }
}

@media (max-width: 767.98px) {
  .gdn-ia__grid { grid-template-columns: minmax(0, 1fr); }
  .gdn-ia__intro { font-size: 1rem; margin-bottom: 32px; }

  /* Sur une colonne, la hauteur minimale ne sert plus a egaliser
     quoi que ce soit : elle ne ferait qu'allonger la page. */
  .gdn-ia-card { min-height: 0; padding: 24px; }
  .gdn-ia-card__title { margin-top: 24px; }

  /* Le libelle rappelle le forfait : trop long pour tenir sur une ligne
     en mobile. Le bouton passe pleine largeur et laisse le texte revenir
     a la ligne, la hauteur fixe de 52px cedant a un padding vertical. */
  .gdn-ia__cta .gdn-hero-v3__btn {
    width: 100%;
    height: auto;
    justify-content: center;
    padding: 15px 24px;
    line-height: 1.4;
  }
}

/* ══════════════════════════════════════════════════════════════
   FAQ — surcharge claire, propre a la home v3
   ──────────────────────────────────────────────────────────────
   .gdn-faq* est un composant COMMUN (inc/common/fr/faq_main_fr.php),
   partage avec la home v2 : ses regles de base vivent dans style.css et
   restent celles-la pour v2. Sur cette page en revanche, l'encart FAQ
   est un gros bloc encre (--gdn-dark, bordure blanche) au milieu d'un
   hero devenu clair, juste apres les cas clients (testimonials_fr.php,
   memes tokens que .gdn-ia un peu plus haut) : meme rupture de fond que
   celle deja corrigee sur .gdn-ia, au meme endroit de la page.

   Cette feuille n'est chargee que sur la home v3 (router_fr.php) : les
   regles ci-dessous ne s'appliquent donc qu'ici, sans toucher a v2. Les
   `!important` qu'elles reprennent sont ceux deja poses par style.css sur
   .gdn-accordion-item / .gdn-accordion-btn ; une regle !important ne se
   surclasse qu'avec un autre !important de meme specificite, departage
   ensuite par l'ordre de chargement (home_v3.css apres style.css). */
.gdn-faq-wrapper {
  background: #fff;
  border: 1px solid var(--gdn-border);
}

.gdn-faq-body { background: transparent; }

/* Ligne fermee : meme gris recessed que la bande CyberVadis et l'encart
   de rappel de .gdn-ia, plutot que le bloc noir plein d'origine. */
.gdn-accordion-btn {
  background: rgba(119, 119, 119, .05) !important;
  color: var(--gdn-black) !important;
}

/* Ligne ouverte : deja blanche dans la regle commune, inchangee ici.
   Seule la pastille +/- perd son inversion noir/blanc selon l'etat,
   devenue inutile puisque les deux etats sont desormais clairs : elle
   reste un simple carre noir a croix blanche, dans les deux cas. */
.gdn-faq-icon { background: var(--gdn-black); }
.gdn-faq-icon::before,
.gdn-faq-icon::after { background: #fff; }