/* ==========================================================================
   TrackAd — composants des pages intérieures
   --------------------------------------------------------------------------
   Complément de style.css, qui reste la référence : palette, typographie,
   boutons, en-tête, méga-menu, pied de page, témoignages, logos, FAQ.
   Rien n'est redéfini ici — uniquement les blocs qui n'existaient pas sur
   la page d'accueil. Toutes les couleurs passent par les variables du
   thème (--blue, --navy, --yellow, --blue-050…).
   ========================================================================== */

/* ---------- Accessibilité ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--navy);
  color: #fff;
  border-radius: 0 0 var(--r-sm) 0;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Anneau de focus homogène sur tous les éléments interactifs ajoutés. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
}

/* Décalage de l'ancre pour ne pas passer sous l'en-tête collant. */
[id] { scroll-margin-top: 100px; }

/* La FAQ vient de style.css, où elle est calibrée pour la page d'accueil. Sur
   les pages intérieures on la ramène au rythme du site (64 px en haut, 40 px
   en bas) sans toucher à l'accueil : le sélecteur body.page n'existe que sur
   les pages générées. */
body.page .faq { padding: 64px 0 40px; }

/* ==========================================================================
   Fil d'Ariane et ouvertures de page
   --------------------------------------------------------------------------
   Valeurs relevées sur trackad.ai (en-tête de 80 px, fil d'Ariane à 90 px,
   héros à 119 px) : la barre de fil d'Ariane est collée sous le menu, et le
   contenu du héros démarre 16 px plus bas. Le dégradé du héros est celui du
   site (.ban_inte) — nettement plus clair que celui de la page d'accueil,
   pour que le texte foncé reste lisible sur toute la hauteur.
   ========================================================================== */

/* ---------- Fil d'Ariane ---------- */
.breadcrumb-bar {
  padding: 10px 0;
  background: #fff;
  font-size: 13.6px;
  line-height: 1.4;
}
/* style.css ne réinitialise que <ul> : on neutralise ici la marge, le retrait
   et les puces des <ol> ajoutés par les pages intérieures. */
ol.reset-list,
.breadcrumb-bar ol,
.steps,
.timeline__steps,
.process__list,
.toc ol {
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.steps { margin: 20px 0 0; }

.breadcrumb-bar ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  color: var(--navy);
}
.breadcrumb-bar li { display: flex; align-items: center; gap: 8px; }

/* « Revenir à l'Accueil » : bleu, gras, précédé d'un chevron gauche. */
.breadcrumb-bar__home a { font-weight: 700; color: var(--blue); }
.breadcrumb-bar__home a:hover { text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb-bar__home::before {
  content: "";
  width: 5px; height: 5px;
  border-left: 1.5px solid var(--blue);
  border-bottom: 1.5px solid var(--blue);
  transform: rotate(45deg);
}
/* Barre verticale après le lien de retour, chevrons droits ensuite. */
.breadcrumb-bar__home + li::before {
  content: "";
  width: 1px; height: 13px;
  background: var(--sky-200);
}
.breadcrumb-bar__home + li ~ li::before {
  content: "";
  width: 5px; height: 5px;
  border: 0;
  border-right: 1.5px solid var(--blue-400);
  border-bottom: 1.5px solid var(--blue-400);
  background: none;
  transform: rotate(-45deg);
}
.breadcrumb-bar li:not(.breadcrumb-bar__home) a { color: var(--blue-800); }
.breadcrumb-bar a:hover { color: var(--blue); }
.breadcrumb-bar [aria-current] { color: var(--navy); }

/* ---------- Ouverture de page : tronc commun ---------- */
.page-hero {
  position: relative;
  padding: 16px 0 64px;
}
.page-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}
.page-hero__body > :first-child { margin-top: 0; }

/* H1 bicolore : la partie mise en avant est un <span>. Le trait jaune
   biseauté est celui du thème (52 × 5 px, skew 50°). */
.page-hero h1 {
  position: relative;
  padding-bottom: 20px;
  margin-bottom: 18px;
  font-size: clamp(27px, 2.5vw, 36px);
  line-height: 1.1;
  color: var(--navy);
}
.page-hero h1::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  width: 52px; height: 5px;
  background: var(--yellow);
  transform: skew(50deg);
}
.page-hero h1 span { color: var(--blue); }

.page-hero .eyebrow { margin-bottom: 14px; }
/* Pastille produit, valeurs relevées sur trackad.ai (.sup_titre_solution) :
   fond --blue-800, « TrackAd » en blanc, le numéro en --orange, 25 px en
   Sansation bold, padding 8/10, rayon 5, pas de capitales. */
.eyebrow--produit {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 25px;
  line-height: 1;
  padding: 8px 10px;
  border-radius: 5px;
  text-transform: none;
  letter-spacing: normal;
}
/* Le nom du produit prend le même bleu clair sur toutes les pages produit
   (txt_color4, celui de NOA). Le site d'origine en changeait d'une page à
   l'autre ; uniformisé à la recette du 05/10/2026. Les modificateurs
   --bleu, --jaune… que posent encore les gabarits restent sans effet. */
.eyebrow--produit span { color: var(--blue-200); }

.page-hero__subtitle {
  margin-bottom: 20px;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 21px;
  color: var(--blue);
}
.page-hero__body p { font-size: 16px; line-height: 1.6; margin-bottom: 14px; }
.page-hero__body p:last-child { margin-bottom: 0; }
/* Sur les formulaires du baromètre, le mois est un sous-titre : la règle des
   paragraphes ci-dessus le ramenait au corps du texte (recette du 08/10/2026). */
.page-hero--livre-blanc .page-hero__subtitle { font-size: 21px; line-height: 1.3; }
/* Termes clés en bleu, comme sur le site. */
.page-hero__body strong { color: var(--blue); font-weight: 700; }
.page-hero__updated { font-size: 14.5px; color: var(--blue-800); }

.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
}
/* Sur le baromètre, le site empile les deux boutons de l'ouverture. */
.page-hero__actions--stacked { flex-direction: column; align-items: flex-start; gap: 10px; }
.btn__icon { flex: none; width: 16px; height: 16px; margin-right: 9px; }

.page-hero__visual { position: relative; }
.page-hero__visual img { width: 100%; border-radius: var(--r-md); }
/* Bloc « Un échange de 20 min » de la page de demande de démo. */
.page-hero__step {
  margin-bottom: 6px !important;
  font-family: var(--font-title);
  font-size: 19px;
}
.page-hero__step strong { color: var(--navy); font-weight: 700; }
.page-hero__step span { color: var(--blue); }
/* min() : le max-width en pixels ne doit pas neutraliser le max-width:100%
   hérité de style.css sur les écrans étroits. */
.page-hero__illu { max-width: min(460px, 100%); margin-top: 22px; }
/* Demande de démo : l'illustration prend toute la largeur de la colonne, juste
   sous le texte, et l'ensemble se centre en hauteur face au formulaire. */
.page-hero--demo .page-hero__body { align-self: center; }
.page-hero--demo .page-hero__illu { max-width: 100%; width: 100%; margin-top: 28px; }

/* Couverture du livre blanc : le site la pose pleine largeur de colonne sous
   le paragraphe (548 px pour 568 px de colonne). Le rendu du livre porte déjà
   son ombre portée — ni ombre ni arrondi ajoutés. */
.page-hero__cover {
  width: 100%;
  margin-top: 24px;
}

/* ---------- Gabarit « split » : visuel à gauche, texte à droite ---------- */
.page-hero--split,
.page-hero--form,
.page-hero--solo {
  background: linear-gradient(0deg,
    var(--blue) 5%,
    rgba(5, 84, 241, .70) 35%,
    rgba(5, 84, 241, .30) 60%,
    rgba(255, 255, 255, 0) 90%);
}
/* Le visuel occupe la première colonne : il passe donc à gauche sans ordre
   explicite, l'ordre du HTML suivant l'ordre de lecture (image, puis texte). */

/* ---------- Gabarit « solo » : texte seul, décor à droite ---------- */
.page-hero--solo .page-hero__grid { grid-template-columns: minmax(0, 55%) minmax(0, 45%); }
.page-hero--solo .page-hero__body { order: -1; }

/* ---------- Option « petit visuel » : le texte prend la largeur ----------
   Pages Valeurs et Vie d'entreprise, où l'ouverture est surtout du texte :
   comme sur trackad.ai, le visuel tient dans une colonne d'environ 380 px. */
.page-hero--petit-visuel .page-hero__grid { gap: 56px; }
.page-hero--split.page-hero--petit-visuel .page-hero__grid { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); }
.page-hero--solo.page-hero--petit-visuel .page-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); }

/* ---------- Gabarit « solid » : bleu plein, texte à gauche ----------
   Ouverture de la page Recrutement, seule du site à poser le texte à gauche
   sur un aplat bleu plein (bg_color1) plutôt que sur un dégradé — à ne pas
   confondre avec .page-hero--blue, plus bas, qui est le fondu bleu de
   /valeurs/. Titre blanc et jaune, termes clés en jaune, visuel dans la
   colonne de droite : l'ordre du HTML l'y place déjà. */
.page-hero--solid {
  padding: 64px 0;
  background: var(--blue);
  color: #fff;
}
/* 639 / 80 / 481 : les largeurs relevées sur le site. */
.page-hero--solid .page-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 481px); gap: 80px; }
.page-hero--solid h1 { color: #fff; }
.page-hero--solid h1 span { color: var(--yellow); }
.page-hero--solid .page-hero__body p { color: #fff; }
.page-hero--solid .page-hero__body strong { color: var(--yellow); }
.page-hero--solid .page-hero__visual img { border-radius: 0; }

/* ---------- Gabarit « form » : formulaire à gauche ---------- */
.page-hero--form { padding-bottom: 72px; }
.page-hero--form .page-hero__grid { align-items: start; }
.page-hero--form .page-hero__form { position: relative; z-index: 2; }

/* Livre blanc : la seule ouverture à formulaire où le site inverse les
   colonnes — texte et couverture à gauche, formulaire à droite. L'ordre du
   HTML suffit (`mediaLast` dans pageHero) ; il ne reste ici qu'à empêcher le
   formulaire de s'étirer avec la colonne de gauche, deux fois plus haute. */
.page-hero--livre-blanc .page-hero__form { align-self: start; }

/* ---------- Gabarit « center » : fond bleu plein, titre centré ---------- */
.page-hero--center {
  padding: 32px 0 56px;
  background: var(--degrad-2);
  text-align: center;
  color: #fff;
}
.page-hero--center .page-hero__visual img {
  max-width: min(420px, 100%);
  margin-inline: auto;
  border-radius: 0;
}
.page-hero--center .page-hero__body { max-width: 800px; margin: 24px auto 0; }
.page-hero--center h1 { color: #fff; font-size: clamp(25px, 2.4vw, 33px); }
.page-hero--center h1 span { color: var(--yellow); }
.page-hero--center h1::after { left: 50%; transform: skew(50deg) translateX(-26px); }
.page-hero--center p { color: rgba(255, 255, 255, .92); }
.page-hero--center strong { color: var(--yellow); }
.page-hero--center .page-hero__actions { justify-content: center; }
/* Liste des baromètres : le site pose ce bandeau sur un aplat navy
   (bg_primary) et non sur le dégradé du blog. */
.page-hero--center.page-hero--navy { background: var(--navy); }
/* Pas de titre de section entre le bandeau et les vignettes : les 56 + 64 px
   des deux blocs laissaient un vide de 120 px. On les ramène à 24 + 32 px.
   Deux classes pour passer devant le padding-bottom des media queries. */
.page-hero--center.page-hero--navy { padding-bottom: 24px; }

/* ---------- Gabarit « dark » : fond navy, titre blanc et jaune ---------- */
.page-hero--dark {
  padding: 32px 0 64px;
  background: var(--degrad-2);
  color: #fff;
}
.page-hero--dark h1 { color: #fff; }
.page-hero--dark h1 span { color: var(--yellow); }
.page-hero--dark p { color: rgba(255, 255, 255, .92); }
.page-hero--dark strong { color: var(--yellow); }
.page-hero--dark .page-hero__visual img { box-shadow: 0 26px 60px rgba(3, 20, 60, .4); }

/* ---------- Gabarit « blue » : le bleu plein de /valeurs/ ----------
   Seule ouverture du site sur bg_degrad_s2 (bleu en haut, bleu clair en bas) :
   titre et texte en blanc, termes clés en jaune, et l'accroche entièrement en
   gras comme sur trackad.ai. Se combine au gabarit « solo », qui place déjà le
   texte à gauche et le visuel à droite. */
.page-hero--blue {
  padding: 32px 0 64px;
  background: var(--degrad-s2);
  color: #fff;
}
.page-hero--blue h1,
.page-hero--blue h1 span { color: #fff; }
.page-hero--blue p { color: #fff; }
.page-hero--blue strong { color: var(--yellow); }
.page-hero--blue .page-hero__body p:first-of-type { font-weight: 700; }

/* ---------- Gabarit « plain » : pages légales, fond blanc ---------- */
.page-hero--plain {
  padding: 40px 0 8px;
  background: #fff;
}
.page-hero--plain .page-hero__grid { grid-template-columns: minmax(0, 900px); gap: 0; }
.page-hero--plain h1 { font-size: clamp(26px, 2.2vw, 32px); }

/* Bandeau de chiffres : sur les pages intérieures il chevauche le héros
   comme sur l'accueil, mais admet 2 ou 3 colonnes. */
.stats--page { margin-top: -40px; }
.stats__band--2 { grid-template-columns: repeat(2, 1fr); }
/* ==========================================================================
   Listes à puces cochées / averties / numérotées
   ========================================================================== */
.ticks { display: grid; gap: 12px; margin: 18px 0 0; }
.ticks li {
  position: relative;
  padding-left: 32px;
  font-size: 16px;
  line-height: 1.5;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--yellow) url("../img/picto-fleche-droite.svg") no-repeat center / 9px;
}
.ticks--light li { color: rgba(255, 255, 255, .95); }
.ticks--warn li::before { background: var(--orange); }

.steps { display: grid; gap: 16px; margin: 20px 0 0; padding-left: 0; counter-reset: step; }
.steps li {
  position: relative;
  padding-left: 46px;
  font-size: 16px;
  line-height: 1.55;
  counter-increment: step;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: 0;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 15px;
}
.steps--light li { color: rgba(255, 255, 255, .95); }
.steps--light li::before { background: var(--yellow); color: var(--navy); }
.steps strong { color: inherit; }


/* ==========================================================================
   Blocs de faits (fiche client, fiche société, repères RGPD)
   ========================================================================== */
/* ==========================================================================
   Bénéfices en lignes alternées (page solution)
   ========================================================================== */
/* ==========================================================================
   Bénéfices — un fond par bloc, comme sur trackad.ai
   --------------------------------------------------------------------------
   Dégradés relevés sur le site : bandeau de titre ciel → bleu (bg_degrad_s2),
   bloc 1 blanc → ciel (bg_degrad_s4), bloc 2 blanc, bloc 3 blanc → bleu
   (bg_degrad_1). Tous en 0deg, donc du bas vers le haut.
   ========================================================================== */
/* Bandeau de titre : 64/32 et centré, comme sur le site. Le sur-titre est
   une pastille bleue (sup_titre_2), le titre est blanc avec la partie mise en
   avant en jaune, et il n'y a pas de trait biseauté ici. */
.benefits-head {
  padding: 64px 0 32px;
  background: var(--degrad-s2);
  text-align: center;
}
.benefits-head h2 {
  max-width: 22ch;
  margin-inline: auto;
  padding-bottom: 20px;
  font-size: clamp(22px, 1.9vw, 27px);
  line-height: 1.2;
  color: #fff;
}
.benefits-head h2 span { color: var(--yellow); }

/* Les blocs de contenu sont séparés par un intercalaire de 56 px : 56 + 32 de
   padding interne. Les modificateurs viennent après, pour l'emporter. */
.benefits-row { padding: 88px 0 32px; }

/* Le bandeau et le premier bloc sont contigus sur le site : aucune marge
   haute sur le bloc « 100 % de vos données ». */
.benefits-row--sky {
  padding-top: 0;
  background: linear-gradient(0deg, #fff 0%, var(--sky) 100%);
}
.benefits-row--blue {
  position: relative;
  padding-bottom: 96px;
  background: linear-gradient(0deg, var(--blue) 0%, #fff 100%);
}

/* Pas de margin-top ici : chaque rangée est désormais sa propre section avec
   son padding. Une marge haute traverserait le padding-top nul de
   .benefits-row--sky par fusion de marges et peindrait une bande blanche
   entre le bandeau de titre et le premier bloc. */
.benefit-row {
  display: grid;
  grid-template-columns: minmax(0, 48%) minmax(0, 52%);
  align-items: center;
  gap: 48px;
}
.benefit-row--reverse .benefit-row__visual { order: 2; }

/* Toutes les rangées n'ont pas d'illustration : le site accompagne certains
   blocs d'un dessin que la maquette ne reprend pas. Sans règle propre, leur
   texte restait coincé dans la colonne de gauche de la grille à deux
   colonnes, l'autre moitié vide — une demi-page blanche en face de chaque
   paragraphe. Ces rangées-là prennent donc toute la largeur, sur une mesure
   de lecture centrée plutôt qu'étirée sur les 1200 px du conteneur. */
.benefit-row--texte { grid-template-columns: minmax(0, 1fr); }
.benefit-row--texte .benefit-row__body {
  /* La largeur explicite est nécessaire : sur une case de grille, une marge
     auto désactive l’étirement et le bloc se réduirait à son contenu — une
     liste courte se retrouvait deux fois plus étroite qu’un paragraphe. */
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
}

/* ---------- La coque des illustrations de bénéfices ----------
   Le site n’illustre pas ces blocs par des photos mais par une carte navy à
   coins ronds (bg_primary radius_2), relevée ici au pixel : fond #182353,
   rayon 30. Son contenu est l’un des widgets dessinés, plus bas. */
.benef-card {
  padding: 30px 28px;
  border-radius: var(--r-md);
  background: var(--navy);
  color: #fff;
  box-shadow: 0 24px 55px rgba(3, 20, 60, .28);
}

/* Les mises en avant du corps des bénéfices sont bleues sur le site
   (txt_color1), comme celles du héros. */
.benefit-row__body strong { color: var(--blue); }
.benefit-row__body .txt-jaune { color: var(--yellow); }
/* Mises en avant posées sur la partie bleue d'un dégradé (NOA) : le bleu s'y
   confond avec le fond, le blanc se lit. */
.benefit-row__body .txt-blanc { color: #fff; }

/* Liaison en pointillés d'un bloc au suivant, reprise du site : le tracé
   fait 653 px de large pour 52 px de haut et reste centré dans le conteneur.
   Il est purement décoratif et disparaît dès que les blocs s'empilent. */
.benefits-link {
  margin-top: 40px;
  text-align: center;
}
.benefits-link img {
  display: inline-block;
  width: min(653px, 100%);
  height: auto;
}
.benefit-row__visual { position: relative; }
.benefit-row__visual img { width: 100%; border-radius: var(--r-md); }

/* Compteur du référentiel unique — repris du site, qui illustre ce bloc par
   un widget de compteurs et non par une photo. */
.import-card {
  padding: 30px 28px;
  border-radius: var(--r-lg);
  background: var(--degrad-2);
  color: #fff;
  box-shadow: 0 24px 55px rgba(3, 20, 60, .28);
}
.import-card__title {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1;
  color: var(--yellow);
}
.import-card__sub { font-size: 14.5px; color: rgba(255, 255, 255, .85); margin-top: 6px; }

.import-card__bar {
  height: 8px;
  margin: 18px 0 22px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .18);
  overflow: hidden;
}
.import-card__bar span {
  display: block;
  width: 100%; height: 100%;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--sky), var(--yellow));
}
.import-card__kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 22px;
  margin: 0;
}
.import-card__kpis dt { font-size: 13px; color: rgba(255, 255, 255, .8); }
.import-card__kpis dd {
  margin: 2px 0 0;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 21px;
  line-height: 1;
}

/* ---------- Bénéfice 2 : un parcours, deux lectures ----------
   Le texte promet de « redonner de la valeur aux leviers upper funnel ». On le
   montre : la même conversion créditée à 100 % au dernier clic, puis répartie
   par le modèle data-driven. Les jauges sont des hauteurs en pourcentage, donc
   directement comparables d'une ligne à l'autre. */
.parcours {
  margin: 0;
  padding: 28px 30px 22px;
  border-radius: var(--r-lg);
  background: var(--navy);
  color: #fff;
  box-shadow: 0 24px 55px rgba(3, 20, 60, .28);
}
.parcours__titre {
  margin-bottom: 20px;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 17px;
  color: var(--yellow);
}

/* Les quatre points de contact, reliés par un filet. */
.parcours__etapes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}
.parcours__etapes > li {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
}
.parcours__etapes > li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 19px; left: calc(50% + 26px); right: calc(-50% + 26px);
  border-top: 1px dashed rgba(255, 255, 255, .4);
}
.parcours__logo {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #fff;
}
/* Les régies en couleur sur pastille blanche ; l'accès direct garde son
   globe blanc sur fond bleu. */
.parcours__logo img { width: 24px; height: 24px; object-fit: contain; }
.parcours__logo svg { width: 19px; height: 19px; fill: #fff; opacity: .85; }
.parcours__etape--fin .parcours__logo { background: var(--blue); }
.parcours__nom { font-size: 12.5px; font-weight: 700; }
.parcours__role { font-size: 11px; color: rgba(255, 255, 255, .6); }

/* Une lecture = une étiquette + quatre jauges verticales. */
.parcours__lecture { margin-bottom: 16px; }
.parcours__label {
  margin-bottom: 8px !important;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .65);
}
.parcours__lecture ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}
.parcours__lecture li { display: grid; justify-items: center; gap: 5px; }
.parcours__jauge {
  display: flex;
  align-items: flex-end;
  width: 100%; height: 46px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .09);
  overflow: hidden;
}
.parcours__jauge > span {
  width: 100%;
  min-height: 3px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .35);
}
.parcours__val { font-family: var(--font-title); font-weight: 700; font-size: 13px; }

/* La lecture TrackAd est celle qu'on met en avant. */
.parcours__lecture--trackad .parcours__label { color: var(--yellow); }
.parcours__lecture--trackad .parcours__jauge > span { background: var(--yellow); }
.parcours__lecture--trackad .parcours__val { color: var(--yellow); }

.parcours__note {
  margin: 0 !important;
  font-size: 11.5px;
  color: rgba(255, 255, 255, .5);
}

/* Sur mobile les quatre colonnes ne font plus que ~75 px : les rôles sont
   masqués et les noms peuvent se couper, pour que les jauges restent alignées
   sur leurs points de contact. */
@media (max-width: 560px) {
  .parcours { padding: 22px 18px 18px; }
  .parcours__role { display: none; }
  .parcours__nom { font-size: 10.5px; line-height: 1.2; overflow-wrap: anywhere; }
  .parcours__logo { width: 32px; height: 32px; }
  .parcours__logo img { width: 20px; height: 20px; }
  .parcours__etapes > li:not(:last-child)::after { left: calc(50% + 22px); right: calc(-50% + 22px); top: 15px; }
  .parcours__jauge { height: 38px; }
  .parcours__val { font-size: 11.5px; }
}

/* ---------- Bénéfice 3 : ce qui est déjà activé ----------
   « Plug & Play » se démontre par des sources déjà connectées, une durée de
   mise en route et les trois « sans » de la technologie non intrusive. */
.onboarding {
  padding: 28px 30px 24px;
  border-radius: var(--r-lg);
  background: var(--navy);
  color: #fff;
  box-shadow: 0 24px 55px rgba(3, 20, 60, .28);
}
.onboarding__duree {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 20px !important;
  flex-wrap: wrap;
}
.onboarding__h {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(30px, 3vw, 40px);
  line-height: 1;
  color: var(--yellow);
}
.onboarding__duree small { font-size: clamp(17px, 1.6vw, 20px); font-weight: 600; line-height: 1.3; color: #fff; }

.onboarding__panneau {
  padding: 16px 18px;
  border-radius: var(--r-sm);
  background: rgba(32, 54, 135, .5);
}
.onboarding__entete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px !important;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .65);
}
.onboarding__entete span {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: normal;
  color: var(--yellow);
}
.onboarding__sources {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 22px;
}
.onboarding__sources li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
/* Boîte fixe : les logos n'ont pas du tout le même format, seule une boîte de
   taille constante leur donne un poids visuel comparable. */
.onboarding__logo {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
}
.onboarding__logo img {
  max-width: 16px;
  max-height: 11px;
  width: auto;
  object-fit: contain;
}
/* Monogramme, pour une source dont on n'a pas le logo officiel. */
.onboarding__logo--mono {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  color: #fff;
}
.onboarding__nom {
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Pastille « Connecté » : coche verte, comme un état dans l'interface. */
.onboarding__etat {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: none;
  font-size: 11px;
  color: rgba(255, 255, 255, .72);
}
.onboarding__etat::before {
  content: "";
  width: 13px; height: 13px;
  border-radius: 50%;
  background: #2fbf6b;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25);
}

.onboarding__sans {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.onboarding__sans li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .1);
  font-size: 12.5px;
}
.onboarding__sans li::before {
  content: "";
  width: 11px; height: 11px;
  border: 1.5px solid var(--yellow);
  border-radius: 50%;
  background: linear-gradient(45deg, transparent 44%, var(--yellow) 44%, var(--yellow) 56%, transparent 56%);
}

/* Placée après les règles de base, sinon elle ne l'emporterait pas : à deux
   colonnes sous 560 px, chaque ligne ne fait plus que ~108 px. */
@media (max-width: 560px) {
  .onboarding { padding: 22px 18px 20px; }
  .onboarding__sources { grid-template-columns: minmax(0, 1fr); }
}
.benefit-row__body h3 { font-size: clamp(20px, 1.6vw, 24px); margin-bottom: 16px; }
.benefit-row__actions { margin-top: 24px; }

/* ==========================================================================
   Fonctionnalités : onglets verticaux
   ========================================================================== */
.features {
  position: relative;
  padding: 64px 0;
  background: var(--degrad-2);
  color: #fff;
  overflow: hidden;
}
.features h2 { color: #fff; font-size: clamp(24px, 2vw, 28px); margin-bottom: 36px; }
.features__layout {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.features__tabs { display: grid; gap: 8px; }
.feature-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 0;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-family: var(--font-body);
  font-size: 15.5px;
  text-align: left;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.feature-tab:hover { background: rgba(255, 255, 255, .16); }
.feature-tab[aria-selected="true"] {
  background: #fff;
  color: var(--blue);
  font-weight: 700;
  transform: translateX(4px);
}
.feature-tab__num {
  flex: none;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 13px;
  opacity: .7;
}
.feature-tab[aria-selected="true"] .feature-tab__num { color: var(--orange); opacity: 1; }

.feature-panel__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
  gap: 32px;
  align-items: center;
  padding: 32px;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .07);
}
.feature-panel h3 { color: #fff; font-size: 22px; margin-bottom: 14px; }
.feature-panel__lead { color: rgba(255, 255, 255, .92); font-weight: 700; }
.feature-panel .ticks li { color: rgba(255, 255, 255, .92); font-size: 15.5px; }
/* Les listes des panneaux, à puce cochée comme sur le site (« liste_puce_3 ») :
   celles de TrackAd 360 (.ticks) comme les <ul> nus de Lead, Affiliate et
   Collector, qui n'avaient plus aucune puce. */
.feature-panel ul { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.feature-panel ul li {
  position: relative;
  padding-left: 35px;
  color: rgba(255, 255, 255, .92);
  font-size: 15.5px;
  line-height: 1.5;
}
.feature-panel ul li::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 0;
  width: 22px;
  height: 22px;
  border-radius: 0;
  background: var(--blue);
  -webkit-mask: url("../img/picto-checked.svg") no-repeat 50% 50% / 100% 100%;
          mask: url("../img/picto-checked.svg") no-repeat 50% 50% / 100% 100%;
}
.feature-panel img { border-radius: var(--r-sm); width: 100%; }

/* ---------- Barre de navigation d'un panneau ----------
   Écrite dans chacun des neuf panneaux (voir featureNav dans
   build/content/solutions.js) : seul le panneau actif étant affiché, le
   compteur et la jauge sont toujours justes. La flèche de droite est pleine
   quand celle de gauche est simplement cerclée : c'est elle qui dit qu'il
   reste des volets à voir, là où les seuls onglets pouvaient passer
   inaperçus. */
.feature-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
}
.feature-nav__arrow {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background .25s, border-color .25s, color .25s, transform .25s;
}
.feature-nav__arrow:hover {
  background: #fff;
  border-color: #fff;
  color: var(--blue);
  transform: translateX(-2px);
}
.feature-nav__chevron { width: 20px; height: 20px; }

.feature-nav__count {
  flex: none;
  margin: 0;
  font-family: var(--font-title);
  font-size: 13px;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .6);
}
.feature-nav__count b { font-size: 18px; color: #fff; }

/* Jauge d'avancement : la part des volets déjà parcourus. */
.feature-nav__gauge {
  flex: 1 1 auto;
  min-width: 32px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
  overflow: hidden;
}
.feature-nav__gauge i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--yellow), var(--orange));
  transition: width .35s ease;
}

/* La flèche « suivant » est pleine : c'est elle qu'on cherche du regard. */
.feature-nav__arrow--next {
  background: #fff;
  border-color: #fff;
  color: var(--blue);
}
.feature-nav__arrow--next:hover {
  transform: translateX(2px);
  box-shadow: 0 10px 22px rgba(3, 20, 60, .3);
}

/* Le changement de volet se voit : le panneau entrant monte en fondu. */
/* Sans « both » : si l'animation ne démarre pas, le panneau reste lisible. */
.feature-panel.is-active { animation: feature-in .4s ease; }
@keyframes feature-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .feature-panel.is-active { animation: none; }
  .feature-nav__arrow:hover { transform: none; }
  .feature-nav__gauge i { transition: none; }
}

/* ==========================================================================
   Intégrations
   ========================================================================== */
/* Fond navy comme sur le site (bg_primary), avec la forme décorative. */
.integrations {
  position: relative;
  padding: 64px 0;
  background: var(--navy);
  color: #fff;
  overflow: hidden;
}
.integrations::before {
  content: "";
  position: absolute;
  right: 4%; bottom: -70px;
  width: 290px; height: 290px;
  background: url("../img/forme-rond-2-bleu-fonce.png") no-repeat center / contain;
}
.integrations .container { position: relative; z-index: 2; }
.integrations h2 {
  padding-bottom: 20px;
  font-size: clamp(22px, 1.9vw, 27px);
  line-height: 1.2;
  color: #fff;
}
.integrations h2 span { color: var(--yellow); }
.integrations p { color: rgba(255, 255, 255, .92); }
.integrations strong { color: var(--yellow); font-weight: 700; }
.integrations__grid {
  display: grid;
  grid-template-columns: minmax(0, 49%) minmax(0, 51%);
  gap: 48px;
  align-items: center;
}
.integrations__actions { margin-top: 24px; }

/* Panneau bleu translucide de la galerie, valeur relevée sur le site
   (.galerie_1 : rgba(32, 54, 135, .3)). Les logos y sont posés directement,
   sans tuile blanche : la plupart sont déjà lisibles sur fond sombre. */
.integrations__logos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px 20px;
  padding: 34px 30px;
  border: 1px solid var(--blue);
  border-radius: var(--r-md);
  background: rgba(32, 54, 135, .3);
}
.integrations__logos li {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 2;
}
/* Ces logos sont déjà blancs sur fond transparent (vérifié : luminance
   moyenne 227–255, aucun pixel coloré) : c'est précisément pourquoi ils
   disparaissaient dans les tuiles blanches. Posés sur le navy, ils ressortent
   sans aucun traitement. */
.integrations__logos img {
  max-width: 100%;
  max-height: 38px;
  width: auto;
  object-fit: contain;
  opacity: .92;
  transition: opacity .2s, transform .2s;
}
.integrations__logos li:hover img { opacity: 1; transform: scale(1.06); }

/* ==========================================================================
   Cas clients
   ========================================================================== */
.cases { padding: 64px 0 32px; background: #fff; }
.cases--dark { background: var(--degrad-3); color: #fff; }
.cases--dark h2, .cases--dark .cases__lead { color: #fff; }
.cases h2.titre-trait { margin-bottom: 28px; }
.cases__lead { margin-bottom: 36px; }
.cases__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
/* Grille des baromètres : trois colonnes au lieu de quatre. Les paliers
   responsives de .cases__grid, plus bas dans la feuille, reprennent la main
   à 1120 px puis à 720 px — à spécificité égale, c'est le dernier qui gagne. */
.cases__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cases__cta { margin-top: 36px; }

.case-card { display: flex; }
.case-card__link {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 16px 36px rgba(24, 35, 83, .10);
  transition: transform .25s ease-in-out, box-shadow .25s ease-in-out;
}
.case-card__link:hover { transform: translateY(-6px); box-shadow: 0 26px 52px rgba(24, 35, 83, .18); }
.case-card__media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--navy);
}
.case-card__media img { width: 100%; height: 100%; object-fit: cover; opacity: .82; }
.case-card__kpi {
  position: absolute;
  top: 12px; left: 12px;
  /* loop_info : pastille bleue, Nunito Sans 15 px en graisse normale. */
  padding: 7px 8px;
  border-radius: 10px;
  background: var(--blue);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 20px;
}
/* Les logos clients sont blancs sur fond transparent et de format
   rectangulaire : ils se posent directement sur la vignette assombrie, sans
   pastille blanche qui les rognerait. */
.case-card__logo {
  position: absolute;
  bottom: 16px; left: 20px;
  display: block;
  max-width: 55%;
}
.case-card__logo img {
  width: auto;
  max-width: 110px;
  max-height: 26px;
  object-fit: contain;
  object-position: left bottom;
  opacity: 1;
  filter: drop-shadow(0 2px 6px rgba(3, 20, 60, .45));
}
.case-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 22px 24px;
}
.case-card__title {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  color: var(--navy);
}
.case-card__desc { font-size: 14.5px; line-height: 1.5; color: #2b3766; }
.case-card__more {
  margin-top: auto;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--blue);
}
.case-card__link:hover .case-card__more { text-decoration: underline; }
/* Les cartes d'une rangée ont la même hauteur (étirement de la grille) ; la
   description suit son titre sans blanc, et « Voir le cas client » est poussé
   en bas, donc aligné d'une carte à l'autre. Le partage des rangées par
   subgrid alignait aussi les descriptions, mais laissait un vide sous les
   titres courts (recette du 05/10/2026). */
.case-card__body { flex: 1; }

/* Grille des baromètres : les vignettes sont des illustrations claires, pas
   des photos de cas client assombries pour porter un KPI. Elles gardent donc
   leur pleine densité, sur un bandeau moins haut — celui du site. */
.cases.cases--barometres { padding-top: 32px; }
.cases--barometres .case-card__media { aspect-ratio: 5 / 2; background: #fff; }
.cases--barometres .case-card__media img { opacity: 1; }

/* ==========================================================================
   Pagination
   --------------------------------------------------------------------------
   Reprise de la pagination du site : numéros centrés, Précédent/Suivant de
   part et d'autre, page courante en évidence. Sur fond clair la page courante
   passe en bleu plein ; la variante --dark reprend le jaune du site.
   ========================================================================== */
/* Une carte de grille porte son propre `display` : sans cette règle, plus
   spécifique, l'attribut `hidden` posé par le script resterait sans effet. */
[data-paginate] > [hidden] { display: none; }

/* Sous la liste du blog, la navigation se détache de la grille : la dernière
   ligne de cartes peut être incomplète, un peu d'air évite qu'elle paraisse
   collée au numéro de page. */
.posts .pagination { margin-top: 44px; }
.pagination__num[hidden] { display: none; }

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 44px;
}
.pagination__num,
.pagination__step {
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  font: inherit;
  font-size: 15px;
  color: var(--navy);
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.pagination__num { min-width: 40px; padding: 8px 4px; }
.pagination__step { padding: 8px 16px; font-weight: 600; color: var(--blue); }
.pagination__num:hover,
.pagination__step:not([disabled]):hover { border-color: var(--blue); color: var(--blue); }
.pagination__num.is-current {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  font-weight: 700;
  cursor: default;
}
.pagination__step[disabled] { opacity: .4; cursor: default; }

.cases--dark .pagination__num,
.videos .pagination__num { color: #b5cbfc; }
.cases--dark .pagination__step,
.videos .pagination__step { color: #b5cbfc; }
.cases--dark .pagination__num.is-current,
.videos .pagination__num.is-current {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--navy);
}
.cases--dark .pagination__num:hover,
.cases--dark .pagination__step:not([disabled]):hover,
.videos .pagination__num:hover,
.videos .pagination__step:not([disabled]):hover { border-color: var(--yellow); color: #fff; }

/* ---------- Cas client ----------
   Relevé au pixel sur trackad.ai (page 13323) à 1280 px de large : conteneur
   de 1200, et pour chaque section deux colonnes dont le titre fait partie de
   la colonne, jamais une bande pleine largeur. Fonds : alternance des
   dégradés navy ↔ bleu du thème, sur un bandeau navy plein pour les
   chiffres. */

/* forme_lt : anneau bleu débordant en haut à gauche de l'ouverture. */
.page-hero--cas::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 245px;
  height: 325px;
  transform: translateY(-50%);
  background: url("../img/forme-rond-1-bleu.webp") no-repeat 100% 50% / auto 100%;
  z-index: 0;
  pointer-events: none;
}
.page-hero--cas { position: relative; overflow: hidden; }
/* titre_1l_2 : la formule fluide du site — 30 px à 300, 42 px à 2560. La
   maquette plafonne ses H1 à 32 px ; sur cette page le site en fait 35,2. */
.page-hero--cas h1 { font-size: calc(30px + 12 * ((100vw - 300px) / 2260)); line-height: 1.1; }

/* breadcrumb_2 : sur un cas client, le fil d'Ariane est une bande bleue à
   texte blanc, l'entrée courante à 70 % d'opacité. */
.page--cas-berceau-magique .breadcrumb-bar { background: var(--blue); }
.page--cas-berceau-magique .breadcrumb-bar ol { color: #fff; }
.page--cas-berceau-magique .breadcrumb-bar a,
.page--cas-berceau-magique .breadcrumb-bar li:not(.breadcrumb-bar__home) a { color: #fff; }
.page--cas-berceau-magique .breadcrumb-bar a:hover,
.page--cas-berceau-magique .breadcrumb-bar li:not(.breadcrumb-bar__home) a:hover { color: var(--yellow); }
.page--cas-berceau-magique .breadcrumb-bar [aria-current] { color: rgba(255, 255, 255, .7); }
/* Chevron de retour, barre verticale puis chevrons : tous en blanc. */
.page--cas-berceau-magique .breadcrumb-bar__home::before { border-left-color: #fff; border-bottom-color: #fff; }
.page--cas-berceau-magique .breadcrumb-bar__home + li::before { background: rgba(255, 255, 255, .5); }
.page--cas-berceau-magique .breadcrumb-bar__home + li ~ li::before { border-right-color: #fff; border-bottom-color: #fff; }
.page-hero--cas > .container { position: relative; z-index: 2; }
/* Le logo blanc de la marque, sous le titre. Il se loge dans une boîte de
   170 × 60 au plus — la taille du site d'origine —, sans jamais dépasser sa
   taille réelle : une largeur imposée étirait les petits fichiers (Salt,
   80 × 30, agrandi 3,5 fois) jusqu'à les pixeliser. */
.page-hero__logo { margin: 12px 0 0; }
.page-hero__logo img { width: auto; height: auto; max-width: min(170px, 70%); max-height: 60px; }

/* ---- Bandeau de chiffres + fiche : une seule bande navy, deux cartes ----
   Ce bandeau n'est pas celui de l'accueil : il est réduit à 54 % de la
   largeur et partage sa rangée avec la fiche. */
.case-top {
  padding: 40px 0;
  background: var(--navy);
  position: relative;
}
/* bg_grille_top_h : grille verticale blanche pivotée d'un quart de tour. */
.case-top::before {
  content: "";
  position: absolute;
  top: -4rem;
  left: 52%;
  width: 130px;
  height: 180px;
  transform: translateX(-52%) rotate(90deg);
  background: url("../img/grille-verticale-blanche.png") no-repeat center / 100% 100%;
  pointer-events: none;
}
.case-top__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 652fr) minmax(0, 528fr);
  gap: 20px;
  align-items: center;
}
/* bloc_chiffres_2 */
.case-chiffres {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  padding: 32px;
  border-radius: 30px;
  background: linear-gradient(0deg, #032a79 0%, var(--blue) 100%);
}
.case-chiffre {
  position: relative;
  padding: 10px;
  text-align: center;
}
.case-chiffre:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: rgba(255, 255, 255, .5);
}
.case-chiffre__num {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: calc(22px + 6 * ((100vw - 300px) / 2260));
  line-height: 1.05;
  color: var(--yellow);
}
.case-chiffre__label {
  margin: 0;
  font-size: 15px;
  line-height: 18px;
  color: #fff;
}
/* bloc_infos : la valeur passe en bleu (txt_color1), le libellé reste navy. */
.bloc-infos {
  padding: 16px 32px;
  border-radius: 20px;
  background: #fff;
}
.bloc-infos p {
  position: relative;
  margin: 0;
  padding: 10px 0;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--navy);
}
.bloc-infos p:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(5, 84, 241, .5);
}
.bloc-infos span, .bloc-infos a { color: var(--blue); }
.bloc-infos a { text-decoration: underline; text-underline-offset: 3px; }

/* liste_puce_1 : coche jaune de 26 px, retrait de 35 px. */
.puces { margin: 0; padding: 0; list-style: none; }
.puces li {
  position: relative;
  padding-left: 35px;
  padding-bottom: 10px;
  font-size: 16px;
  line-height: 1.5;
}
.puces li:last-child { padding-bottom: 0; }
.puces li::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  width: 26px;
  height: 26px;
  background: var(--yellow);
  -webkit-mask: url("../img/picto-checked.svg") no-repeat 50% 50% / 100% 100%;
          mask: url("../img/picto-checked.svg") no-repeat 50% 50% / 100% 100%;
}

/* ---- Les trois sections du cas ---- */
.case-part { position: relative; padding: 40px 0; color: #fff; }
.case-part--navy { background: var(--degrad-3); }   /* bleu en bas, navy en haut */
.case-part--blue { background: var(--degrad-2); }   /* navy en bas, bleu en haut */
.case-part > .container { position: relative; z-index: 2; }
/* titre_2l_2 : 26 px sur 1280, blanc, part variable en jaune, trait biseauté. */
.case-part h2 {
  position: relative;
  margin-bottom: 20px;
  padding-bottom: 20px;
  font-size: calc(22px + 10 * ((100vw - 300px) / 2260));
  line-height: 1.2;
  color: #fff;
}
.case-part h2 span { color: var(--yellow); }
.case-part h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 5px;
  background: var(--yellow);
  transform: skew(50deg);
}
.case-part__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem 5rem;
  align-items: center;
}
/* Les défis donnent un peu plus de place au texte qu'au témoignage. */
.case-part__grid--defis { grid-template-columns: minmax(0, 618fr) minmax(0, 487fr); }
/* Les solutions : le titre au-dessus du visuel, la liste en face du visuel
   seul — centrée sur l'image, et non sur le bloc titre + image, qui la
   décalait d'une quarantaine de pixels vers le haut. Sans visuel, la liste
   suit le titre. */
.case-part__grid--solutions {
  grid-template-areas: "titre ." "visuel texte";
  row-gap: 0;
}
.case-part__grid--solutions > h2 { grid-area: titre; align-self: end; }
.case-part__grid--solutions > .case-part__visual { grid-area: visuel; }
.case-part__grid--solutions > .case-part__texte { grid-area: texte; }
.case-part__grid--solutions:not(:has(.case-part__visual)) { grid-template-areas: "titre ." "texte ."; }
@media (max-width: 1024px) {
  .case-part__grid--solutions,
  .case-part__grid--solutions:not(:has(.case-part__visual)) { grid-template-areas: "titre" "visuel" "texte"; row-gap: 28px; }
}
/* Les visuels n'ont pas tous le même format (Showroomprivé : 500 × 450) :
   cadrés en 3:2, comme la photo d'ouverture. */
.case-part__visual img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-md); }

/* forme_rm_3 : anneau bleu débordant au bord droit, derrière le contenu. */
.case-part--forme::before {
  content: "";
  position: absolute;
  top: 40%;
  right: 0;
  width: 155px;
  height: 310px;
  transform: translateY(-40%);
  background: url("../img/forme-rond-1-bleu.webp") no-repeat 0% 50% / auto 100%;
  z-index: 0;
  pointer-events: none;
}

/* Texte courant autour des puces des défis et des solutions : phrase
   d'introduction, paragraphe intermédiaire ou de conclusion. */
.case-part__para { margin: 0 0 15px; font-size: 16px; line-height: 1.5; }
.case-part__para:last-child { margin-bottom: 0; }
.puces + .case-part__para { margin-top: 15px; }
/* Un témoignage signé à plusieurs : les en-têtes s'empilent. */
.temoignage__head + .temoignage__head { margin-top: 12px; }

/* Sous un chiffre de résultat, le site pose un paragraphe et non un élément
   de liste : pas de coche jaune, seulement le texte. */
.case-part__precision { margin: 0; font-size: 15px; line-height: 1.5; }

/* titre_28 : le chiffre d'un résultat, entièrement en jaune. Un cran plus
   petit que sur le site pour tenir sur une ligne ; 8 px jusqu'à son texte. */
.chiffre-28 {
  margin: 0 0 8px;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: calc(19px + 5 * ((100vw - 300px) / 2260));
  line-height: 1.3;
  color: var(--yellow);
}

/* loop_temoignage : carte bleu très pâle de rayon 30, réduite à 97 % au
   repos et rendue à sa taille au survol. Resserrée à la recette du
   05/10/2026 : marge, corps et interligne réduits. */
.temoignage {
  margin: 0;
  padding: 18px 24px 22px;
  border-radius: 30px;
  background: var(--blue-050);
  color: var(--navy);
  transform: scale(.97);
  transition: transform .3s ease-in-out;
}
.temoignage:hover { transform: scale(1); }
.temoignage__head { position: relative; display: flex; align-items: center; gap: 12px; }
.temoignage__head img {
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 10px;
  object-fit: cover;
  margin: 6px;
  box-shadow: 2px 2px 14px 5px rgba(5, 84, 241, .1);
}
.temoignage__head::after {
  content: "";
  position: absolute;
  top: 1rem;
  right: .5rem;
  width: 50px;
  height: 30px;
  background: rgba(181, 203, 252, .5);
  -webkit-mask: url("../img/picto-citation.svg") no-repeat 50% 50% / 100% 100%;
          mask: url("../img/picto-citation.svg") no-repeat 50% 50% / 100% 100%;
}
.temoignage__nom { display: block; font-family: var(--font-title); font-size: 16px; color: var(--blue-800); }
.temoignage__role { display: block; font-size: 13px; font-style: italic; color: var(--blue); }
.temoignage__texte { margin: 4px 0 0; font-size: 14.5px; line-height: 1.42; }
.temoignage__texte p { margin: 0 0 10px; }
.temoignage__texte p:last-child { margin-bottom: 0; }

/* bg_degrad_s8 : la grille des autres cas repose sur le fondu blanc → ciel. */
.cases--ciel { background: linear-gradient(0deg, #fff 0%, var(--sky-200) 80%); }
/* titre_2c_1 : sur-titre et titre centrés au-dessus de la grille. */
.cases--ciel .container { text-align: center; }
.cases--ciel h2::after { left: 50%; transform: skew(50deg) translateX(-25px); }
.cases--ciel .cases__grid, .cases--ciel .pagination { text-align: left; }

/* Les autres éditions d'un baromètre : trois vignettes par vue en carrousel,
   deux puis une sur les écrans plus étroits. Le titre a sa seconde partie en
   bleu, comme sur le site. */
.cases--carrousel h2 span { color: var(--blue); }
/* Le carrousel masque ce qui dépasse : un peu d'air garde visibles l'ombre
   des cartes et leur soulèvement au survol. */
.cases--carrousel .slider { text-align: left; padding: 10px 0 36px; }
.cases--carrousel .slider__nav { margin-top: 0; }
.cases--carrousel .case-card { flex: 0 0 calc((100% - 48px) / 3); }
.cases--carrousel .slider__nav { justify-content: center; }
.cases--carrousel .slider__btn { border-color: var(--navy); color: var(--navy); }
.cases--carrousel .slider__btn:hover:not([disabled]) { background: var(--navy); color: #fff; }
.cases--carrousel .slider__btn[disabled] { opacity: .35; cursor: default; }
@media (max-width: 1024px) {
  .cases--carrousel .case-card { flex-basis: calc((100% - 24px) / 2); }
}
@media (max-width: 720px) {
  .cases--carrousel .case-card { flex-basis: 100%; }
}

/* ==========================================================================
   Vidéos
   ========================================================================== */
.videos { padding: 64px 0 40px; background: var(--degrad-3); color: #fff; }
.videos h2 { color: #fff; font-size: clamp(24px, 2vw, 28px); }
.videos__lead { max-width: 780px; color: rgba(255, 255, 255, .92); margin-bottom: 36px; }
.videos__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.video-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-md);
  overflow: hidden;
  background: rgba(255, 255, 255, .08);
  transition: transform .25s, background .25s;
}
.video-card:hover { transform: translateY(-5px); background: rgba(255, 255, 255, .14); }

/* Vidéo seule, posée dans une rangée de bénéfices plutôt que dans la grille
   des témoignages : la rangée est claire, le fond translucide blanc ne s’y
   verrait pas. On lui donne l’ombre portée des autres illustrations, et rien
   d’autre — la carte n’est que la vignette. */
.video-card--seule {
  background: none;
  box-shadow: 0 24px 55px rgba(3, 20, 60, .28);
}
.video-card--seule:hover { background: none; }

/* Façade : la vignette de la vidéo, le bouton de lecture et la durée. Le
   lecteur YouTube remplace ce lien au clic (voir assets/js/pages.js). */
.video-card__play {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
}
.video-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: rgba(255, 255, 255, .06);
}
.video-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .35s ease-out;
}
.video-card__play:hover .video-card__media img { transform: scale(1.04); }

/* Voile sombre : le texte blanc de la durée et le bouton restent lisibles
   quelle que soit la vignette. */
.video-card__media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(24, 35, 83, 0) 45%, rgba(24, 35, 83, .55) 100%);
}
.video-card__play::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 62px; height: 62px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94) url("../img/icons/play.svg") no-repeat center / 24px;
  box-shadow: 0 10px 26px rgba(24, 35, 83, .35);
  transition: transform .25s;
}
.video-card__play:hover::after,
.video-card__play:focus-visible::after { transform: scale(1.1); }
.video-card__duration {
  position: absolute;
  right: 12px; bottom: 12px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(24, 35, 83, .82);
  color: #fff;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

/* Lecture en cours : le lecteur occupe l'emplacement de la vignette. */
.video-card__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
}
.video-card__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.video-card.is-playing:hover { transform: none; }

.video-card__body { display: grid; gap: 8px; padding: 20px 22px 24px; }
.video-card__body strong { font-family: var(--font-title); font-size: 17px; color: var(--yellow); }
.video-card__body span { font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, .9); }
.videos__cta { margin-top: 36px; }

/* ---------- En-tête de la grille de témoignages ----------
   Le site place la barre « avis authentifiés par Trustfolio » à droite du
   titre de section, alignée sur son axe vertical (row, space-between). Elle
   passe sous le titre dès que la largeur ne suffit plus. */
.quotes__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.quotes__head h2 { margin: 0; }
.quotes__head h2 span { color: var(--blue); }
.trustfolio-bar { flex: 0 0 216px; min-height: 75px; }
.trustfolio-bar iframe { display: block; width: 100%; border: 0; }

/* ==========================================================================
   Témoignages — variante « vers le bleu » (page /clients/)
   --------------------------------------------------------------------------
   Sur trackad.ai/clients/, la section Témoignages utilise .bg_degrad_1 : le
   dégradé y descend du blanc vers le bleu, ce qui enchaîne sans rupture sur
   le bloc Trustfolio qui repart du bleu. Le haut de section étant clair, le
   titre et le chapô y passent en foncé.
   ========================================================================== */
.testimonials--vers-bleu { background: var(--degrad-1); }
.testimonials--vers-bleu h2 { color: var(--navy); }
.testimonials--vers-bleu h2 span { color: var(--blue); }
.testimonials--vers-bleu .testimonials__intro p { color: #2b3766; }

/* ==========================================================================
   Recommandations Trustfolio
   --------------------------------------------------------------------------
   Valeurs relevées sur trackad.ai/clients/ (conteneur .bg_degrad_4) :
   dégradé bleu en haut vers blanc en bas, 64 px de respiration, deux
   colonnes centrées verticalement (titre / badge) séparées de 20 px, puis
   le bandeau des recommandations sur toute la largeur.

   Le badge est agrandi de 20 % comme sur le site d'origine. La mise à
   l'échelle ne réserve pas de place en flux : elle n'est appliquée qu'à
   partir de 1280 px, la première largeur où la marge du conteneur absorbe
   les 37,5 px que le badge déborde de chaque côté.
   ========================================================================== */
.trustfolio {
  padding: 0;
  background: linear-gradient(0deg, #fff 0%, var(--blue) 100%);
}
.trustfolio .container { padding-top: 64px; padding-bottom: 64px; }

.trustfolio__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 376px;
  align-items: center;
  gap: 20px;
}
.trustfolio__intro .eyebrow { margin-bottom: 12px; }
.trustfolio__intro h2 {
  max-width: 22ch;
  margin: 0;
  font-size: clamp(22px, 1.9vw, 27px);
  line-height: 1.2;
  color: #fff;
}
.trustfolio__intro h2 span { color: var(--yellow); }

/* Les deux widgets : l'iframe occupe toute la largeur disponible et sa
   hauteur est ajustée par le script Trustfolio. */
.trustfolio__iframe {
  display: block;
  width: 100%;
  min-height: 70px;
  border: 0;
}
.trustfolio__strip { margin-top: 20px; }

@media (min-width: 1280px) {
  .trustfolio__badge { transform: scale(1.2); }
}
@media (max-width: 900px) {
  .trustfolio__row { grid-template-columns: minmax(0, 1fr); }
  .trustfolio__intro h2 { max-width: none; }
}
@media (max-width: 720px) {
  .trustfolio .container { padding-top: 48px; padding-bottom: 48px; }
}

/* ==========================================================================
   Témoignages en grille (page dédiée)
   ========================================================================== */
.quotes { padding: 64px 0 40px; background: var(--blue-050); }

/* ---------- Variante « dégradé » (page /temoignages-clients/) ----------
   Sur trackad.ai/temoignages-clients/, le bloc des témoignages porte
   bg_degrad_4 : le bleu du héros se prolonge en haut de section puis
   redescend vers le blanc. Le titre y est donc blanc, sa partie mise en
   avant en jaune, et les cartes prennent le bleu très pâle du site pour
   rester détachées du blanc en bas de section. */
.quotes--degrade { background: linear-gradient(0deg, #fff 0%, var(--blue) 100%); }
.quotes--degrade .quotes__head h2 { color: #fff; }
.quotes--degrade .quotes__head h2 span { color: var(--yellow); }
.quotes--degrade .quote { background: var(--blue-050); }
/* Les pastilles de qualités sont normalement --blue-050 : sur une carte de
   cette teinte elles passent en blanc pour rester détachées. */
.quotes--degrade .quote__tags li { background: #fff; }

/* ---------- Mosaïque ----------
   Sur le site, la grille des témoignages est en masonry : chaque carte fait
   la hauteur de son témoignage et la colonne la plus courte se comble. Les
   lignes de la grille sont ramenées à 1 px et pages.js fait porter à chaque
   carte autant de lignes que sa hauteur ; `align-items: start` empêche les
   cartes de s'étirer sur la place réservée. Sans JavaScript, la classe
   is-masonry n'est jamais posée et la grille reste régulière. */
.quotes__grid--masonry.is-masonry { grid-auto-rows: 1px; row-gap: 0; align-items: start; }
.quotes__grid--masonry.is-masonry > .quote { grid-row-end: span var(--span, 1); }

.quotes__cta { display: flex; justify-content: center; margin-top: 40px; }
.quotes__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 36px;
}
.quotes__grid .quote { flex: none; width: auto; }
.quote__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 16px;
}
.quote__tags li {
  padding: 5px 10px;
  border-radius: 5px;
  background: var(--blue-050);
  color: var(--blue-800);
  font-size: 12.5px;
}

/* ==========================================================================
   Valeurs, équipe, piliers, hubs, processus
   ========================================================================== */
.values { padding: 64px 0 40px; background: var(--degrad-3); color: #fff; }
.values .titre-trait { color: #fff; font-size: clamp(24px, 2vw, 28px); margin-bottom: 36px; }
.values__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.value-card {
  padding: 28px 24px;
  border-radius: var(--r-lg);
  background: #fff;
  color: var(--navy);
  box-shadow: 0 20px 45px rgba(3, 20, 60, .22);
  transition: transform .25s;
}
.value-card:hover { transform: translateY(-6px); }
.value-card img { margin-bottom: 16px; }
.value-card :is(h2, h3) { font-size: 18px; color: var(--blue); margin-bottom: 10px; }
.value-card p { font-size: 15px; line-height: 1.55; }
.values__cta { margin-top: 36px; }

.team { padding: 64px 0 40px; background: #fff; }
.team__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 36px; }
.team-card { text-align: center; }
.team-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--r-md);
  margin-bottom: 16px;
}
.team-card h3 { font-size: 19px; margin-bottom: 4px; }
.team-card p { font-size: 15px; color: var(--blue); }

/* ---------- Vie d'entreprise : les quatre sections pleine largeur ----------
   Relevées sur trackad.ai/culture-et-carriere/vie-entreprise/. Le trait
   commun des quatre sections est un ruban de dégradés continu, chaque
   section reprenant en haut la couleur sur laquelle la précédente s'est
   arrêtée : bleu ciel → blanc (bg_degrad_s4), blanc → bleu (bg_degrad_1),
   bleu → navy (bg_degrad_2), navy → bleu (bg_degrad_3). Tous en 0deg, donc
   lus du bas vers le haut.

   Le texte alterne : première et troisième sections à gauche, deuxième et
   quatrième à droite. Il occupe 80 % de la largeur du conteneur, comme sur
   le site (960 px sur 1200). Les deux premières sections portent le titre
   navy à mot bleu, les deux dernières le titre blanc à mot jaune : c'est le
   même titre bicolore, retourné parce que le fond est devenu sombre. */
.lifeblock { position: relative; padding: 48px 0 24px; }
.lifeblock .container { position: relative; z-index: 2; }
.lifeblock__body { width: 80%; }
.lifeblock h2 { font-size: clamp(22px, 1.9vw, 27px); }
.lifeblock h2 span { color: var(--blue); }
.lifeblock p { margin-top: 4px; }

/* Sections de droite : le bloc reste à gauche — c'est ce qui, sur le site,
   dégage les 240 px où se pose la forme décorative — et seul son contenu est
   ferré à droite. Le titre passe en inline-block pour que le trait jaune,
   posé à `left: 0` par .titre-trait, reste sous son premier mot. */
.lifeblock--right .lifeblock__body { text-align: right; }
.lifeblock--right h2 { display: inline-block; }

/* Sections sombres : titre blanc, mot mis en avant en jaune, texte blanc. */
.lifeblock--dark h2 { color: #fff; }
.lifeblock--dark h2 span { color: var(--yellow); }
.lifeblock--dark p { color: #fff; }

/* Les quatre dégradés du ruban, dans l'ordre de lecture de la page : ceux du
   site, reprises telles quelles. */
.lifeblock--depuis-ciel { padding-top: 24px; background: var(--degrad-s4); }
.lifeblock--vers-bleu { background: var(--degrad-1); }
.lifeblock--vers-navy { background: var(--degrad-2); }

/* Sur le site, la quatrième section finit sur du bleu plein et le pied de
   page suit. Ici le CTA final s'intercale, et il part du blanc : les 128 px
   de retrait bas de la section — ceux du site — servent à ramener le bleu au
   blanc, sous le texte, pour que la jonction ne se voie pas. */
.lifeblock--depuis-navy {
  padding-bottom: 128px;
  background: linear-gradient(0deg, #fff 0%, var(--blue) 30%, var(--navy) 100%);
}

/* Le héros du socle est un « split » : il finit sur du bleu plein, là où
   celui du site finit sur du bleu ciel (bg_degrad_s2), couleur sur laquelle
   la première section enchaîne. Les 12 derniers pour cent du dégradé ramènent
   donc le bleu au ciel — sous le texte, dans le retrait bas du héros — pour
   que le ruban reste continu. La règle ne vise que cette page ; le sélecteur
   suit le voisinage, comme .page-hero--split:has(+ .hubs) plus haut. */
.page-hero--split:has(+ .lifeblock) {
  background: linear-gradient(0deg,
    var(--sky) 0%, var(--blue) 12%,
    rgba(5, 84, 241, .7) 40%, rgba(5, 84, 241, .3) 62%, rgba(255, 255, 255, 0) 90%);
}

/* Forme décorative forme_rb_2 : 155 × 280, collée en bas à droite du
   conteneur, l'image débordant du cadre par la droite. Elle passe sous le
   contenu (z-index 0 contre 2 sur le site). */
.lifeblock--forme::after {
  content: "";
  position: absolute;
  right: max(16px, calc((100% - var(--container)) / 2));
  bottom: 0;
  width: 155px;
  height: 280px;
  background: url("../img/forme-rond-2-bleu.png") no-repeat 0 50% / auto 100%;
  z-index: 0;
}

/* Séparateur en pointillés du site : une onde de 653 × 53 centrée sous le
   texte. Les deux tracés sont symétriques — le premier descend vers la
   droite, le second vers la gauche — et suivent le sens de lecture de la
   section qu'ils referment. */
.lifeblock__onde { display: block; margin: 32px auto 0; }

/* Sur trackad.ai, l'ouverture de la page Culture et carrière est la seule des
   neuf « split » à finir en bleu pâle (bg_degrad_s5) et non en bleu plein :
   elle se raccorde ainsi sans rupture au dégradé du bloc des espaces qui la
   suit. La règle ne vise que cette page — le sélecteur suit le voisinage. */
.page-hero--split:has(+ .hubs) { background: var(--degrad-s5); }

/* Les quatre espaces de la page Culture et carrière — repris de trackad.ai :
   fond bg_degrad_s7 (bleu en bas, bleu pâle en haut), forme décorative
   forme_rm_3 collée au bord droit, en-tête centré en blanc, et deux cartes
   par ligne en dégradé navy → bleu, titre centré sous l'illustration. */
.hubs {
  position: relative;
  padding: 32px 0 64px;
  background: var(--degrad-s7);
  color: #fff;
  text-align: center;
}
/* La forme passe sous le contenu (z-index 0 contre 2 sur le site). */
.hubs::before {
  content: "";
  position: absolute;
  top: 40%;
  right: 0;
  width: 155px;
  height: 310px;
  transform: translateY(-40%);
  background: url("../img/forme-rond-1-bleu.webp") no-repeat 0 50% / auto 100%;
  z-index: 0;
}
.hubs .container { position: relative; z-index: 2; }
.hubs h2 { color: #fff; font-size: clamp(24px, 2vw, 28px); }
.hubs h2 span { color: var(--yellow); }
.hubs__lead { max-width: 900px; margin: 0 auto 36px; }
.hubs__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.hub-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 16px;
  border-radius: var(--r-md);
  /* bloc_carriere : le navy foncé du dégradé n'est pas dans la palette. */
  background: linear-gradient(0deg, #032a79 0%, var(--blue) 100%);
  color: #fff;
  transition: transform .3s ease-in-out;
}
.hub-card:hover { transform: scale(1.04); }
.hub-card__media { display: flex; justify-content: center; }
.hub-card__media img { height: 180px; width: auto; max-width: 100%; object-fit: contain; }
.hub-card__body { display: grid; gap: 8px; text-align: center; }
.hub-card__title { font-family: var(--font-title); font-weight: 700; font-size: 19px; }

/* ==========================================================================
   Page Recrutement
   --------------------------------------------------------------------------
   Les cinq blocs de trackad.ai/culture-et-carriere/recrutement/, dont la
   suite de dégradés se répond d'un bout à l'autre de la page :

     fil d'Ariane   bleu plein          (bg_color1)
     ouverture      bleu plein          (bg_color1)
     processus      bleu → bleu clair   (bg_degrad_s2)
     offres         bleu clair → blanc  (bg_degrad_s4)
     aucune offre   blanc
     candidature    blanc → bleu        (bg_degrad_1 + forme_lt_2)
     formulaire     bleu → navy         (bg_degrad_2 + forme_lb_2)
   ========================================================================== */

/* ---------- Fil d'Ariane sur le bleu ----------
   Seule page où la bande du fil d'Ariane est posée sur l'aplat bleu du héros
   au lieu du blanc : les liens y passent en blanc, la page courante en blanc
   à 70 %, comme sur le site. */
.page--recrutement .breadcrumb-bar { background: var(--blue); }
.page--recrutement .breadcrumb-bar ol { color: rgba(255, 255, 255, .7); }
/* La règle de base colore le chemin en --blue-800 par un `li:not(...)` plus
   spécifique : il faut le même sélecteur pour l'emporter. */
.page--recrutement .breadcrumb-bar__home a,
.page--recrutement .breadcrumb-bar li:not(.breadcrumb-bar__home) a { color: #fff; }
.page--recrutement .breadcrumb-bar [aria-current="page"] { color: rgba(255, 255, 255, .7); }

/* ---------- Processus ----------
   Pas de titre de section sur le site : deux colonnes de deux étapes, chaque
   « Étape N » coiffée d'un disque blanc translucide de 52 px, et un filet
   vertical tracé par le texte qui la suit — ce qui relie les disques sans
   dépendre d'une hauteur fixe. Le disque du site est une image ; il n'est
   qu'un dégradé diagonal sur un rond, redessiné ici en CSS. */
.process { padding: 16px 0 64px; background: var(--degrad-s2); color: #fff; }
.process__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 20px;
}
.process__item h2,
.process__item h3 {
  position: relative;
  padding-left: 70px;
  font-size: clamp(22px, 1.9vw, 27px);
  line-height: 1;
  color: #fff;
}
.process__item h2::before,
.process__item h3::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 52px; height: 52px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, .22) 0%,
    rgba(255, 255, 255, .10) 50%,
    rgba(255, 255, 255, .22) 100%);
}
.process__item p {
  position: relative;
  padding: 8px 0 16px 70px;
  font-size: 16px;
  line-height: 1.4;
  color: #fff;
}
.process__item p::before {
  content: "";
  position: absolute;
  left: 25px; top: 0;
  width: 2px; height: 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 52%, rgba(255, 255, 255, 0) 100%);
}

/* ---------- Offres ----------
   Titre et accroche centrés sur le fondu bleu clair → blanc, puis le message
   « aucune offre » seul sur le blanc, dans une colonne de 600 px centrée. */
.offers { padding: 64px 0 16px; background: var(--degrad-s4); text-align: center; }
.offers h2 { font-size: clamp(24px, 2vw, 27px); }
.offers h2 span { color: var(--blue); }
.offers__lead { font-size: 16px; line-height: 1.4; }
.offers__lead strong { color: var(--blue); font-weight: 700; }

.offers-none { padding: 16px 0; background: #fff; }
.offers-none__msg {
  max-width: 600px;
  margin: 0 auto;
  padding: 30px 0;
  font-size: 16px;
  line-height: 1.4;
  text-align: center;
}
.offers-none__msg a { color: var(--blue); }

/* ---------- Candidature spontanée : l'annonce ----------
   Deux colonnes très inégales sur le site — un tiers de texte, deux tiers
   d'illustration — sur le fondu blanc → bleu, avec l'anneau blanc du thème
   à cheval sur le bord supérieur gauche. */
.apply-intro {
  position: relative;
  padding: 32px 0 128px;
  background: var(--degrad-1);
  overflow: hidden;
}
.apply-intro::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 245px; height: 325px;
  transform: translateY(-50%);
  background: url("../img/forme-rond-2-blanc.png") no-repeat 100% 50% / auto 100%;
  z-index: 0;
}
/* 386 / 48 / 766 : les largeurs relevées sur le site — l'illustration y
   occupe deux fois la place du texte. */
.apply-intro__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 386px) minmax(0, 1fr);
  gap: 16px 48px;
  align-items: center;
}
.apply-intro h2 span { color: var(--blue); }
.apply-intro__body p { font-size: 16px; line-height: 1.6; margin-bottom: 14px; }
.apply-intro__actions { margin-top: 6px; }
.apply-intro__visual img { width: 100%; height: auto; }

/* ---------- Candidature spontanée : le formulaire ----------
   Carte blanche pleine largeur, titre centré, champs sur deux colonnes : le
   gabarit du site, différent de la carte de 570 px des autres pages. */
.apply-form {
  position: relative;
  padding: 64px 0 96px;
  background: var(--degrad-2);
  overflow: hidden;
}
/* Le site pose ici l'anneau bleu moyen forme-rond-2-bleu.png, absent de nos
   images : le bleu clair dont nous disposons est plus lumineux, l'opacité
   rétablit le même contraste — comme sur le bloc Founders de /a-propos/. */
.apply-form::after {
  content: "";
  position: absolute;
  bottom: 10%; left: 0;
  width: 155px; height: 310px;
  background: url("../img/forme-rond-2-bleu-clair.png") no-repeat 100% 0 / auto 100%;
  opacity: .55;
  z-index: 0;
}
.apply-form .container { position: relative; z-index: 2; }
.apply-form__card {
  padding: 32px 48px 48px;
  border-radius: 20px;
  background: #fff;
}
.apply-form__card h2 {
  margin-bottom: 20px;
  font-size: clamp(24px, 2vw, 27px);
  text-align: center;
}
.apply-form__card h2 span { color: var(--blue); }

.jobs { padding: 64px 0 40px; background: var(--degrad-2); color: #fff; text-align: center; }
.jobs h2 { color: #fff; font-size: clamp(24px, 2vw, 28px); }
.jobs p { color: rgba(255, 255, 255, .92); }
.jobs__lead { max-width: 720px; margin: 0 auto; }
.jobs__empty {
  margin-top: 28px;
  padding: 32px;
  border-radius: var(--r-md);
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  border: 1px dashed rgba(255, 255, 255, .4);
  background: rgba(255, 255, 255, .07);
  display: grid;
  gap: 14px;
}
.jobs__empty a { text-decoration: underline; text-underline-offset: 3px; }
.jobs__empty .btn { text-decoration: none; }

/* ==========================================================================
   Frise chronologique
   --------------------------------------------------------------------------
   Un seul gabarit, celui relevé sur trackad.ai : deux colonnes, l'illustration
   à gauche et les étapes à puces à droite (.timeline--split, plus bas dans la
   section « Page À propos »). /notre-histoire/ le réutilise en ouverture de
   page via .timeline--page.
   ========================================================================== */
.timeline { padding: 64px 0 40px; background: #fff; }
.timeline__lead { max-width: 820px; margin-bottom: 40px; }
.timeline__cta { margin-top: 40px; }

/* ==========================================================================
   Prose (valeurs, histoire, pages légales)
   ========================================================================== */
.prose-block { padding: 64px 0 40px; background: #fff; }
.prose-block__grid {
  display: grid;
  grid-template-columns: minmax(0, 58%) minmax(0, 42%);
  gap: 48px;
  align-items: center;
}
.prose-block__visual img { width: 100%; border-radius: var(--r-md); }

.prose { max-width: 78ch; }
.prose--wide { max-width: 84ch; }
/* Suite du texte de /valeurs/ : toute la largeur du conteneur. */
.prose--full { max-width: none; }
.prose h2 { font-size: clamp(21px, 1.8vw, 26px); margin: 40px 0 16px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 18.5px; margin: 30px 0 12px; color: var(--blue); }
.prose p { font-size: 16.5px; line-height: 1.7; }
.prose__intro { font-size: 18px; color: var(--blue-800); }
.prose__outro { margin-top: 32px; font-weight: 700; }
.prose__nav { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
.prose a:not(.btn) { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   Livre blanc : « pourquoi ce livre blanc ? »
   ==========================================================================
   Le site enchaîne deux dégradés sur toute la moitié basse de la page : bleu
   → navy ici, navy → bleu sur .foryou juste dessous. Les deux se rejoignent
   sur le navy, sans couture — c'est ce qui fait paraître le bloc d'un seul
   tenant. Les trois chiffres n'y font pas bandeau : ils tiennent dans une
   carte navy posée à droite du texte. */
.whyblock {
  padding: 42px 0;
  background: var(--degrad-2);
  color: #fff;
}
.whyblock__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 80px;
  align-items: center;
  margin-top: 32px;
}
.whyblock h2 {
  color: #fff;
  font-size: clamp(22px, 1.9vw, 26px);
  line-height: 1.2;
  margin-bottom: 26px;
}
.whyblock h2 span { color: var(--yellow); }
.whyblock__text p { font-size: 16px; line-height: 1.45; margin-bottom: 14px; }
.whyblock__text p:last-child { margin-bottom: 0; }

/* Carte des chiffres calée à droite (la cible jaune qui la précédait a été
   retirée à la recette du 08/10/2026). */
.whyblock__figure {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.whyblock__card {
  flex: none;
  width: min(368px, 100%);
  padding: 48px 32px;
  border-radius: 30px;
  background: var(--navy);
  text-align: center;
}
.whyblock__headline {
  font-family: var(--font-title);
  font-size: 23.5px;
  line-height: 1;
  color: #fff;
}
.whyblock__sub { margin-top: 10px; font-size: 16px; color: #fff; }
.whyblock__curve { display: block; width: 250px; max-width: 100%; margin: 32px auto 0; }
.whyblock__counters {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 0;
  padding-top: 32px;
}
.whyblock__counter { display: grid; gap: 2px; margin: 0; }
.whyblock__counter-label { font-size: 15px; line-height: 18px; color: #fff; }
.whyblock__counter-num {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 22px;
  line-height: 1;
  color: var(--yellow);
}

/* ==========================================================================
   Livre blanc : « ce guide est fait pour vous si… »
   ==========================================================================
   Trois colonnes nues, sans carte : le site n'y pose qu'un picto centré et un
   paragraphe blanc aligné à gauche, sur la suite du dégradé. */
.foryou { padding: 58px 0; background: var(--degrad-3); color: #fff; }
.foryou h2 {
  color: #fff;
  font-size: clamp(22px, 1.9vw, 26px);
  text-align: center;
  margin-bottom: 36px;
}
.foryou h2 span { color: var(--yellow); }
/* Liseré bleu du site : il entoure la rangée entière — un seul cadre pour les
   trois colonnes, pas un par colonne. */
.foryou__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  padding: 10px;
  border: 1px solid var(--blue);
  border-radius: 20px;
}
.foryou__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 10px;
}
.foryou__item img { flex: none; }
.foryou__item p { font-size: 16px; line-height: 1.45; }

/* ==========================================================================
   Blog : filtres et cartes d'articles
   ========================================================================== */
.posts { padding: 64px 0 40px; background: #fff; }
/* Le titre n'avait aucune marge basse : le trait jaune de .titre-trait, posé
   tout en bas de ses 20 px de padding, venait toucher le haut des cartes.
   Les autres sections à titre souligné réservent cet espace (.faq h2 en
   prend 40) ; ici 28 px suffisent, un cran au-dessus des 24 px de gouttière
   de la grille pour que le titre se détache de ce qu'il annonce. */
.posts h2 { margin-bottom: 28px; }
.posts--related { background: var(--blue-050); }
.posts__filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.chip {
  padding: 9px 16px;
  border: 1px solid var(--sky-200);
  border-radius: 100px;
  background: #fff;
  color: var(--blue-800);
  font-family: var(--font-body);
  font-size: 14.5px;
  cursor: pointer;
  transition: .2s;
}
.chip:hover { border-color: var(--blue); color: var(--blue); }
.chip.is-active { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 700; }
.posts__count { font-size: 14px; color: var(--blue-800); margin-bottom: 24px; }
.posts__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.posts__cta { margin-top: 36px; }
.post-card[hidden] { display: none; }
.post-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 16px 36px rgba(24, 35, 83, .10);
  transition: transform .25s, box-shadow .25s;
}
.posts--related .post-card__link { background: #fff; }
.post-card__link:hover { transform: translateY(-6px); box-shadow: 0 26px 52px rgba(24, 35, 83, .18); }
.post-card__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--sky-200); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
/* `flex: 1` sur le corps, pour qu'il occupe toute la hauteur laissée libre
   par l'image dans la carte. C'est cette hauteur pleine qui donne prise au
   `margin-top: auto` du pied de carte : sans elle, le corps s'arrête à son
   contenu et les signatures flottent chacune à sa propre hauteur. */
.post-card__body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 18px 22px 22px; }

/* Catégories : des pastilles, pas une ligne de texte. Elles reprennent la
   forme des chips de filtre au-dessus de la liste — c'est ce qui fait
   comprendre, sans légende, que l'une sélectionne l'autre. La première
   catégorie, la principale, est pleine ; les suivantes en contour. */
.post-card__cats { display: flex; flex-wrap: wrap; gap: 6px; }
.post-card__cat {
  padding: 4px 11px;
  border: 1px solid var(--sky-200);
  border-radius: 100px;
  background: var(--blue-050);
  color: var(--blue);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.post-card__cat--primary { border-color: var(--blue); background: var(--blue); color: #fff; }

.post-card__title { font-family: var(--font-title); font-weight: 700; font-size: 17px; line-height: 1.3; }
/* Respirations posées par-dessus la gouttière commune : titre, résumé et
   signature sont trois niveaux de lecture, ils gagnent à ne pas être
   équidistants. Le pied passe par `padding-top` et non `margin-top`, qui
   porte déjà le `auto` de l'alignement en bas. */
.post-card__excerpt { margin-top: 4px; font-size: 14.5px; line-height: 1.55; color: #2b3766; }
/* Signature sur sa propre ligne, date et durée en dessous. Les trois sur une
   seule ligne ne tiennent pas dans une carte de grille à trois colonnes : la
   moitié des cartes repliaient, l'autre non, et le pied de carte devenait
   irrégulier. Deux lignes assumées valent mieux qu'un repli au hasard — et la
   signature y gagne en présence.

   Les points médians sont des pseudo-éléments posés dans la gouttière, à
   gauche de leur élément : `overflow: hidden` fait alors disparaître celui
   d'un élément passé à la ligne, qui tombe hors de la boîte. Un « · » écrit
   dans le texte resterait, lui, orphelin en début de ligne. */
.post-card__meta {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 13px;
  color: var(--blue-800);
}
.post-card__author { font-weight: 700; color: var(--navy); }
.post-card__dates { display: flex; flex-wrap: wrap; gap: 2px 14px; overflow: hidden; }
.post-card__dates > * { position: relative; }
.post-card__dates > * + *::before { content: "·"; position: absolute; left: -9px; }

/* ==========================================================================
   Article
   ========================================================================== */
/* Héros d'article : fond clair, contrairement aux héros de page. Le titre et
   les métadonnées sont en texte foncé et l'en-tête est court — un dégradé
   bleu soutenu ferait chuter le contraste. */
.article-hero {
  padding: 40px 0 46px;
  background: linear-gradient(180deg, var(--sky-200) 0%, var(--blue-050) 55%, #fff 100%);
}
/* Pas de `max-width` ici, contrairement aux héros de page : le titre d'un
   article est sa promesse, il prend toute la largeur du conteneur. La borne
   haute du clamp monte en conséquence — à 1200 px de large, 36 px laissaient
   une ligne creuse. */
.article-hero h1 {
  position: relative;
  margin: 14px 0 20px;
  padding-bottom: 20px;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.14;
}
.article-hero h1::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  width: 52px; height: 5px;
  background: var(--yellow);
  transform: skew(50deg);
}
/* Titre bicolore, comme sur les ouvertures de page. */
.article-hero h1 span { color: var(--blue); }
/* Catégories de l'article : mêmes pastilles que sur les cartes du blog, en
   un cran plus grand. Fond blanc et non bleu très clair : le héros est déjà
   posé sur un dégradé bleuté. */
.article-hero__cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.article-hero__cat {
  padding: 5px 13px;
  border: 1px solid var(--sky-200);
  border-radius: 100px;
  background: #fff;
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.article-hero__cat--primary { border-color: var(--blue); background: var(--blue); color: #fff; }

.article-hero__meta { display: flex; flex-wrap: wrap; gap: 4px 22px; overflow: hidden; font-size: 14.5px; color: var(--blue-800); }
.article-hero__meta a { color: var(--blue); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.article-hero__meta li { position: relative; }
.article-hero__meta li + li::before { content: "·"; position: absolute; left: -13px; }

.article { padding: 50px 0 70px; background: #fff; }
.article__layout {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.article__aside { position: sticky; top: 96px; display: grid; gap: 18px; align-content: start; }

/* --------------------------------------------------------------------------
   Sommaire — partagé par l'article et les pages légales
   -------------------------------------------------------------------------- */
.toc {
  padding: 20px 18px 22px;
  border: 1px solid var(--sky-200);
  border-radius: var(--r-sm);
  background: #fff;
  box-shadow: 0 10px 30px rgba(24, 35, 83, .07);
}
/* Même trait jaune biseauté que sous les titres de section : le sommaire est
   reconnaissable comme un élément du thème, pas comme une liste rapportée. */
.toc__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--navy);
}
.toc__title::before {
  content: "";
  flex: none;
  width: 18px; height: 4px;
  background: var(--yellow);
  transform: skew(50deg);
}
/* Progression de lecture : remplie par pages.js. Purement décorative — la
   position dans l'article est déjà signalée par l'entrée en surbrillance. */
.toc__progress {
  height: 4px;
  margin: 0 0 16px;
  border-radius: 100px;
  background: var(--sky-200);
  overflow: hidden;
}
.toc__bar {
  display: block;
  width: 100%; height: 100%;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--blue-400), var(--blue));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .12s linear;
}

/* Débord de 10 px de chaque côté : la pastille de survol mord dans le padding
   de la carte, si bien que le texte des entrées s'aligne avec le titre. */
.toc ol { display: grid; gap: 2px; margin: 0 -10px; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a {
  display: block;
  padding: 9px 12px 9px 10px;
  border-radius: 14px;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--blue-800);
  transition: background .2s, color .2s;
}
.toc a:hover { background: var(--blue-050); color: var(--blue); }
.toc a.is-current { background: var(--blue-050); color: var(--blue); font-weight: 700; }

/* Numérotation : réservée au sommaire d'article. Les pages légales portent
   déjà le numéro dans le libellé de leurs entrées. */
.toc--numbered a {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
}
.toc--numbered a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 12px;
  color: var(--blue-200);
  transition: color .2s;
}
.toc--numbered a:hover::before { color: var(--blue-400); }
.toc--numbered a.is-current::before { color: var(--blue); }

/* --------------------------------------------------------------------------
   Partage d'article
   -------------------------------------------------------------------------- */
.share {
  padding: 20px 18px 22px;
  border-radius: var(--r-sm);
  background: var(--blue-050);
}
.share__title {
  margin: 0 0 14px;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--navy);
}
/* Cinq pastilles de 40 px et quatre gouttières de 9 px font 236 px : la
   colonne de l'aside en offre 244 une fois son padding déduit. La rangée
   tient donc sur une ligne à la largeur nominale, et `flex-wrap` reste là
   pour les cas où elle rétrécit encore. */
.share__list { display: flex; flex-wrap: wrap; gap: 9px; }
.share__btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px; height: 40px;
  padding: 0;
  border: 1px solid var(--sky-200);
  border-radius: 50%;
  background: #fff;
  color: var(--blue);
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.share__btn svg { width: 16px; height: 16px; fill: currentColor; }
.share__btn:hover, .share__btn:focus-visible { transform: translateY(-2px); border-color: transparent; color: #fff; }
/* Couleurs de marque au survol seulement : au repos, la rangée reste une
   rangée, sans confetti de logos colorés dans une colonne bleue. */
.share__btn--linkedin:hover, .share__btn--linkedin:focus-visible { background: #0a66c2; }
.share__btn--x:hover,        .share__btn--x:focus-visible        { background: #000; }
.share__btn--facebook:hover, .share__btn--facebook:focus-visible { background: #1877f2; }
.share__btn--mail:hover,     .share__btn--mail:focus-visible     { background: var(--blue-800); }
.share__btn--copy:hover,     .share__btn--copy:focus-visible     { background: var(--blue); }
.share__btn--copy.is-done { background: var(--blue); border-color: transparent; color: #fff; transform: none; }
.share__note {
  margin: 12px 0 0;
  min-height: 1em;
  font-size: 13px;
  font-weight: 700;
  color: var(--blue);
}

.article__body { max-width: 78ch; }
.article__body h2 { font-size: clamp(21px, 1.9vw, 27px); margin: 44px 0 16px; }
.article__body h3 { font-size: 19px; margin: 32px 0 14px; }
.article__body p { font-size: 16.5px; line-height: 1.75; }
.article__body strong { color: var(--navy); }

/* Listes du corps d'article. style.css retire les puces de tous les <ul> :
   sans cette règle, les listes reprises de trackad.ai perdaient leurs puces
   et gardaient la taille du <body> au lieu de celle des paragraphes. Les
   puces sont la coche du site, les <ol> sont numérotés en bleu ; les listes
   imbriquées (ex. les UTM dans une étape numérotée) suivent les mêmes règles.
   Les encarts de synthèse (.callout) gardent leurs propres puces. */
.article__body > :is(ul, ol),
.article__body > :is(ul, ol) :is(ul, ol) {
  display: grid;
  gap: 10px;
  margin: 0 0 1.4em;
  padding: 0;
  list-style: none;
  counter-reset: art-ol;
}
.article__body > :is(ul, ol) :is(ul, ol) { margin: 10px 0 4px; }
.article__body > :is(ul, ol) li {
  position: relative;
  padding-left: 32px;
  font-size: 16.5px;
  line-height: 1.7;
}
.article__body > ul > li::before,
.article__body > :is(ul, ol) ul > li::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  width: 20px;
  height: 20px;
  background: var(--blue);
  -webkit-mask: url("../img/picto-checked.svg") no-repeat 50% 50% / 100% 100%;
          mask: url("../img/picto-checked.svg") no-repeat 50% 50% / 100% 100%;
}
.article__body > ol > li,
.article__body > :is(ul, ol) ol > li { counter-increment: art-ol; }
.article__body > ol > li::before,
.article__body > :is(ul, ol) ol > li::before {
  content: counter(art-ol) ".";
  position: absolute;
  top: 0;
  left: 0;
  min-width: 24px;
  font-family: var(--font-title);
  font-weight: 700;
  color: var(--blue);
}
.article__body img { margin: 8px auto; border-radius: 12px; }
.article__cta { margin-top: 36px; }

/* Encadrés de synthèse : le format le plus repris par les moteurs. */
.callout {
  margin: 0 0 28px;
  padding: 24px 26px;
  border-radius: var(--r-md);
  background: var(--blue-050);
  border-left: 5px solid var(--blue);
}
.callout__title {
  margin-bottom: 10px;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--blue);
}
.callout ul { display: grid; gap: 9px; }
.callout li { position: relative; padding-left: 20px; font-size: 15.5px; line-height: 1.55; }
.callout li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--blue);
}
.callout p { font-size: 15.5px; line-height: 1.65; }
.callout--brief { background: var(--navy); border-left-color: var(--yellow); color: #fff; }
.callout--brief .callout__title { color: var(--yellow); }
.callout--warn { border-left-color: var(--orange); background: #fff7e6; }
.callout--warn .callout__title { color: var(--orange); }
.callout--tip { border-left-color: var(--yellow); background: #fffbe6; }
.callout--tip .callout__title { color: #9a7b00; }

.pull-quote {
  margin: 32px 0;
  padding: 26px 30px;
  border-radius: var(--r-md);
  background: var(--degrad-2);
  color: #fff;
}
.pull-quote p { font-family: var(--font-title); font-weight: 700; font-size: 19px; line-height: 1.45; }

/* Tableaux : jamais de débordement horizontal du <body>.
   Pas d'arrondi ici : `overflow-x: auto` fait de ce bloc une boîte de
   rognage, et la légende commence exactement à son angle haut-gauche — un
   rayon de 20 px lui mangeait ses premiers caractères et coupait les bordures
   aux coins de la ligne d'en-tête. Il n'arrondissait rien au passage, le
   conteneur n'ayant ni fond ni bordure propres. */
.table-wrap { overflow-x: auto; margin: 26px 0; }
.data-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 14.5px;
  background: #fff;
}
.data-table caption {
  padding: 0 0 10px;
  text-align: left;
  font-size: 13.5px;
  color: var(--blue-800);
}
.data-table th, .data-table td {
  padding: 12px 14px;
  border: 1px solid var(--sky-200);
  text-align: left;
  vertical-align: top;
  line-height: 1.45;
}
.data-table thead th { background: var(--navy); color: #fff; font-size: 14px; }
.data-table tbody th { background: var(--blue-050); color: var(--navy); font-weight: 700; }
.data-table--legal { min-width: 760px; }

.author { padding: 0 0 70px; background: #fff; }
.author__card {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 28px;
  padding: 30px 32px;
  border: 1px solid var(--sky-200);
  border-radius: var(--r-md);
  background: var(--blue-050);
}
/* L'avatar Gravatar est carré : un anneau blanc détache le portrait du fond
   bleu très clair sans avoir à retoucher le fichier. */
.author__avatar {
  width: 120px; height: 120px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 4px #fff, 0 8px 22px rgba(24, 35, 83, .16);
}
.author__eyebrow {
  margin: 0 0 2px;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--blue-400);
}
.author__name { margin: 0 0 10px; font-family: var(--font-title); font-weight: 700; font-size: 21px; color: var(--blue); }
.author__bio { margin: 0; font-size: 15.5px; line-height: 1.65; }
.author__links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 14px 0 0; font-size: 15px; }
.author__links a { color: var(--blue); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   Baromètre
   --------------------------------------------------------------------------
   Valeurs relevées sur trackad.ai/barometre-juin-2026-2/ : la page enchaîne
   quatre bandeaux colorés — dégradé bleu → navy pour les tendances, navy →
   bleu pour le sommaire, bleu plein pour « Consulter le baromètre », navy →
   bleu pour les secteurs. Les titres de section y sont centrés et bicolores,
   première partie en jaune (.titre_2c_2).
   ========================================================================== */

/* ---------- Ouverture ---------- */
/* La couverture est servie à sa taille réelle (350 × 425) et sans rayon,
   comme sur le site ; l'anneau blanc du thème (.forme_rm_2) déborde au bord
   droit du conteneur, derrière le contenu. */
.page-hero--baro > .container { position: relative; }
.page-hero--baro > .container::before {
  content: "";
  position: absolute;
  top: 20%; right: 0;
  transform: translateY(-20%);
  width: 155px; height: 310px;
  background: url("../img/forme-rond-2-blanc.png") no-repeat 0% 50% / auto 100%;
  pointer-events: none;
  z-index: 0;
}
.page-hero--baro .page-hero__grid { position: relative; z-index: 2; }
.page-hero--baro .page-hero__visual { text-align: center; }
.page-hero--baro .page-hero__visual img { width: 350px; max-width: 100%; height: auto; border-radius: 0; }
/* Le titre tient sur une ligne, au corps des titres de section (27 px),
   comme sur le site. */
.page-hero--baro h1 { font-size: clamp(24px, 2vw, 27px); }

/* ---------- Tendances clés ---------- */
.trends { padding: 40px 0 56px; background: var(--degrad-2); color: #fff; }
.trends h2,
.baro-content h2,
.baro-actions h2,
.sectors h2 { text-align: center; color: #fff; font-size: clamp(24px, 2vw, 27px); }
.trends h2 { margin-bottom: 30px; }
.trends h2 span { color: var(--yellow); }
.trends__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.trend {
  display: flex;
  flex-direction: column;
  padding: 32px;
  border-radius: var(--r-md);
  background: linear-gradient(183deg, var(--navy) 0%, var(--blue) 100%);
}
.trend__head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.trend__icon { flex: none; width: 35px; height: 35px; }
.trend h3 { font-size: 20px; line-height: 1.2; color: #fff; }
.trend p { font-size: 15px; line-height: 1.55; color: #fff; }
/* Le compteur est calé en bas de carte : les trois cartes s'alignent quelle
   que soit la longueur du texte. */
.trend__figure { margin-top: auto; padding-top: 24px; }
.trend__delta { display: block; font-size: 15px; color: #fff; }
.trend__value {
  display: block;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 23px;
  line-height: 1.2;
  color: var(--yellow);
}

/* ---------- Ce que contient le baromètre ---------- */
.baro-content { padding: 64px 0 48px; background: var(--degrad-3); color: #fff; }
.baro-content h2 { margin-bottom: 30px; }
.baro-content h2 span { color: var(--yellow); }
/* Cinq colonnes de même largeur, séparées du même espace : chaque icône est
   ainsi au centre de sa colonne (recette du 08/10/2026). */
.baro-content__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 32px;
}
/* Pas de carte sur le site : le titre est centré sous l'icône, la liste
   aussi, mais ses puces restent alignées à gauche entre elles. */
.baro-card { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
/* La liste est centrée en bloc sous l'icône, ses puces alignées à gauche.
   Chaque intitulé tient sur une ligne dès que les cinq colonnes sont côte à
   côte : un intitulé replié élargissait la liste à toute la colonne et la
   décalait à gauche. Le centrage flex répartit le léger débord des plus longs
   de part et d'autre, dans l'espace entre colonnes. */
.baro-card > div { width: 100%; display: flex; flex-direction: column; align-items: center; }
@media (min-width: 1121px) {
  .baro-card > div > ul { width: max-content; }
  .baro-card li { white-space: nowrap; }
}
/* Les icônes n'ont pas toutes la même hauteur (77 à 85 px) : elles sont
   calées en bas d'une boîte commune, pour que titres et listes démarrent
   sur la même ligne d'une colonne à l'autre. */
.baro-card img { flex: none; height: 85px; object-fit: contain; object-position: center bottom; }
.baro-card h3 { font-size: 16px; color: #fff; margin-bottom: 10px; text-align: center; }
.baro-card ul { list-style: disc; width: fit-content; margin: 0; padding-left: 20px; display: grid; gap: 4px; text-align: left; }
.baro-card li { font-size: 16px; line-height: 1.35; color: #fff; }

/* ---------- Consulter le baromètre ---------- */
.baro-actions { padding: 41px 0; background: var(--blue); color: #fff; }
.baro-actions h2 { margin-bottom: 30px; }
.baro-actions h2 span { color: var(--yellow); }
/* La présentation de l'édition en cours : 960 px de large, au ratio du
   lecteur Google Slides (59,27 %). Trois caches blancs masquent les bandes
   noires latérales et la barre d'options du lecteur, en laissant visibles
   la flèche « < » et le numéro de diapositive. */
.baro-slides {
  position: relative;
  max-width: 960px;
  margin: 0 auto 41px;
  aspect-ratio: 100 / 59.27;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #fff;
}
.baro-slides iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
.baro-slides__cache { position: absolute; background: #fff; }
.baro-slides__cache--g { top: 0; left: 0; width: 2.1%; height: 100%; }
.baro-slides__cache--d { top: 0; right: 0; width: 2.1%; height: 100%; }
.baro-slides__cache--b { bottom: 0; left: 14%; right: 2.1%; height: 6%; }
.baro-actions__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
/* Les trois cartes partagent leurs rangées — titre, texte, action : le champ
   e-mail de l'inscription, celui du partage et le bouton de téléchargement
   démarrent à la même hauteur, quelle que soit la longueur des textes. */
.baro-action {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  align-content: start;
  row-gap: 16px;
  padding: 20px 24px;
  border-radius: var(--r-lg);
  background: var(--cream);
  color: var(--navy);
}
/* Chaque carte reprend la teinte de la pastille de son picto, comme sur le
   site : crème pour le courrier, bleu pour le partage, vert pour le
   téléchargement. */
.baro-action--blue  { background: var(--cream-blue); }
.baro-action--green { background: var(--cream-green); }
/* Le picto est posé à gauche du titre, comme sur le site : la carte tient sur
   deux lignes de moins que lorsque les deux sont empilés. */
.baro-action__head { display: flex; align-items: center; gap: 8px; }
.baro-action__head img { flex: none; width: 44px; height: 44px; }
.baro-action h3 { font-size: 17px; font-weight: 600; line-height: 1.25; color: var(--navy); }
.baro-action p { font-size: 15px; line-height: 1.55; }
/* Le formulaire occupe la rangée commune aux trois cartes, plus haute que lui
   à cause de la carte de partage : il reste calé en haut, sans étirer le
   bouton. */
.baro-action__form { display: grid; gap: 12px; align-self: start; }
/* Les cartes teintées ramènent le fond du champ à moins de deux points de leur
   propre teinte : comme sur le site, le champ passe en blanc avec un filet
   pour rester lisible. */
.baro-action__form .field input {
  background: #fff;
  border: 1px solid var(--blue-200);
}
/* Les intitulés sont en lecteur d écran seul : le repère est dans le champ,
   comme sur le site, ce qui économise une ligne par carte. */
.baro-action__form .btn { width: 100%; }
/* Sur la carte de partage, le champ et le bouton sont côte à côte (70/30). */
.baro-action__form--inline { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); align-items: end; }
/* Le « ou » du site : un mot posé sur un filet. */
.baro-action__or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: -2px 0;
  font-size: 13.5px;
  color: var(--blue-800);
}
.baro-action__or::before,
.baro-action__or::after { content: ""; flex: 1; height: 1px; background: rgba(24, 35, 83, .18); }
.baro-action__body { display: grid; gap: 16px; align-content: start; }
/* « Publier sur Linkedin » est centré sous le « ou », comme sur le site. */
.baro-action__share { text-align: center; }
/* Le bouton de téléchargement suit directement le texte, centré. */
.baro-action__dl { text-align: center; }

/* ---------- Les industries analysées ---------- */
.sectors { padding: 48px 0; background: var(--degrad-3); color: #fff; }

.sectors h2 span { color: var(--yellow); }
/* Autant d'air entre le trait jaune et la phrase qu'entre le titre et le
   trait. */
.sectors h2 { margin-bottom: 14px; }
.sectors__lead { color: #fff; text-align: center; margin-bottom: 30px; }
.sectors__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
/* Pas de carte non plus : icône centrée, texte en dessous. */
.sector { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 10px; text-align: center; }
.sector img { flex: none; }
.sector h3 { font-size: 18px; color: #fff; margin-bottom: 10px; line-height: 1.3; }
.sector p { font-size: 15px; line-height: 1.55; color: #fff; }
/* Un filet blanc de 1 px sépare les colonnes, comme sur le site, quand les
   cinq secteurs sont côte à côte. L'écart entre colonnes passe dans leur
   marge intérieure, pour que le filet tombe à mi-chemin des textes. */
@media (min-width: 1121px) {
  .sectors__grid { gap: 0; }
  .sector { padding: 10px 20px; }
  .sector:not(:last-child) { border-right: 1px solid #fff; }
}

/* ==========================================================================
   Formulaires
   ========================================================================== */
.form-section { padding: 64px 0 40px; background: #fff; }
.form-section__grid {
  display: grid;
  grid-template-columns: minmax(0, 46%) minmax(0, 54%);
  gap: 48px;
  align-items: start;
}
.form-section__illu { max-width: min(320px, 100%); margin-top: 28px; }

/* Mesures relevées sur le formulaire de trackad.ai (Elementor) : carte blanche
   de 570 px, 32 px de marge intérieure, rayon 20 px et ombre bleutée très
   diffuse ; champs de 40 px sur fond --blue-050, sans bordure, en pilule ;
   libellés de 14 px non gras ; bouton d'envoi centré à cheval sur le bord bas
   de la carte. */
.form {
  position: relative;
  max-width: 570px;
  padding: 32px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 2px 2px 14px 5px rgba(5, 84, 241, .1);
}
.form__title {
  margin-bottom: 16px;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 17px;
  color: var(--navy);
}
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* Livre blanc : le site y empile les six champs sur une seule colonne. */
.form--stack .form__grid { grid-template-columns: minmax(0, 1fr); }
.field { display: grid; gap: 5px; align-content: start; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 14px; font-weight: 400; color: var(--blue-800); }
.field abbr { color: var(--orange); text-decoration: none; }
.field input,
.field textarea {
  width: 100%;
  height: 40px;
  padding: 6px 14px;
  border: 0;
  border-radius: 20px;
  background: var(--blue-050);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 21px;
  color: var(--navy);
  transition: box-shadow .2s;
}
.field input:focus,
.field textarea:focus {
  box-shadow: 0 0 0 2px var(--blue-200);
  outline: none;
}
/* Champ de téléversement — mesures relevées sur trackad.ai (règle
   `.elementor-field-type-upload input[type="file"]`) : pilule de 54 px sur
   --blue-050, retrait de 67 px à gauche, texte de 16 px en --blue-800 à 50 %,
   picto de 15 px en --navy calé à 32 px du bord, et bouton natif rendu
   transparent pour que seule la pilule se voie.

   Le site pose le picto en `mask-image` sur un `::before` de l'input ; il est
   ici un `background-image`, à l'identique à l'écran mais sans dépendre du
   rendu des pseudo-éléments sur un champ de fichier. Le tracé est celui de
   `upload.svg` du thème, embarqué en `data:` comme les icônes de bouton
   (BTN_ICONS) plutôt qu'ajouté aux images. */
.field input[type="file"] {
  height: auto;
  padding: 16px 16px 16px 67px;
  font-size: 16px;
  line-height: 1.4;
  color: rgba(32, 54, 135, .5);   /* --blue-800 à 50 % */
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23182353'%3E%3Cpath d='m8,12L3,7l1.4-1.45,2.6,2.6V0h2v8.15l2.6-2.6,1.4,1.45-5,5Zm-6,4c-.55,0-1.02-.2-1.41-.59s-.59-.86-.59-1.41v-3h2v3h12v-3h2v3c0,.55-.2,1.02-.59,1.41s-.86.59-1.41.59H2Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 32px 50%;
  background-size: 15px 15px;
}
.field input[type="file"]::file-selector-button {
  border: 0;
  background: transparent;
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 16px;
  cursor: pointer;
}
.field textarea { height: 96px; min-height: 96px; padding: 9px 14px; resize: vertical; }

/* Pot de miel des formulaires branchés : sorti de l'écran plutôt que
   display:none, que certains robots savent repérer et contourner. */
.form__piege {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form .btn.is-sending,
.newsletter__form .btn.is-sending,
.baro-action__form .btn.is-sending { opacity: .6; cursor: progress; }

/* Retour de la newsletter, écrit sous le formulaire par pages.js : erreur
   de saisie ou confirmation d'inscription. */
.form__retour {
  margin: 0;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14.5px;
  line-height: 1.5;
  text-align: center;
}
.form__retour--ok { background: #e8f7ec; color: #155724; }
.form__retour--erreur { background: #fdecea; color: #8a1c14; }

.form__legal { margin: 16px 0; font-size: 14px; line-height: 1.5; color: var(--blue-800); }
.form__legal a, .check a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
/* Case à cocher — relevé sur trackad.ai (custom.css, règles .form_elementor
   et .form_newsletter_blanc) : carré de 20 px rempli de blue-050, coins à 5 px,
   sans bordure, et coche bleue posée par-dessus quand la case est cochée.
   appearance:none est indispensable : sans lui le navigateur dessine la case
   système et ignore fond et rayon — c'était le défaut de la version
   précédente. */
.check {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 14px;
  line-height: 1.4;
  color: var(--navy);
  cursor: pointer;
}
.check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  position: relative;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 0;
  border-radius: 5px;
  background: var(--blue-050);
  cursor: pointer;
}
/* La coche reprend le picto du site, colorié par masque plutôt que par un
   fichier par couleur. Géométrie relevée telle quelle sur trackad.ai : 20 px
   calés à -4 px / +4 px, donc débordant en haut à droite de la case — c'est
   ainsi que la coche se présente en production. */
.check input[type="checkbox"]:checked::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 4px;
  width: 20px;
  height: 20px;
  background: var(--blue);
  -webkit-mask: url("../img/picto-checked.svg") no-repeat center / 100% 100%;
          mask: url("../img/picto-checked.svg") no-repeat center / 100% 100%;
}
/* Ajout par rapport au site : anneau de focus clavier, absent en production
   alors que la case n'a plus de contour système. */
/* Deux cases qui se suivent (baromètre : « prochains baromètres », puis le
   consentement) : un peu d'air entre elles, comme sur le site. */
.check + .check { margin-top: 12px; }
.check input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--blue-200);
}
/* Le bouton déborde de moitié sous la carte, comme sur le site. */
.form .btn {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  height: 40px;
  padding: 0 24px;
  border-radius: 20px;
  white-space: nowrap;
}

/* Formulaire posé sur le héros : fond blanc, ombre marquée. */
.page-hero__form .form { position: relative; z-index: 2; }

/* Gabarit « wide » de la candidature spontanée : le formulaire est nu — la
   carte blanche est celle de la section (.apply-form__card), qui porte aussi
   le titre — et le bouton d'envoi reste dans le flux, centré. */
.form--wide {
  max-width: none;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.form--wide .form__grid { gap: 10px; }
.form--wide .check { margin-top: 10px; }
.form--wide .btn {
  position: static;
  left: auto;
  bottom: auto;
  transform: none;
  /* inline-flex ne se centre pas par `margin: auto` : la largeur au contenu
     fait du bouton un bloc centrable. */
  display: flex;
  width: fit-content;
  margin: 20px auto 0;
}

/* Newsletter — relevée sur trackad.ai (.bloc_newsletter, bg_degrad_2) :
   dégradé bleu nuit → bleu, tout centré, sur-titre en capitales sans badge,
   titre blanc à fin jaune sous un trait jaune centré, formulaire nu de
   840 px aux champs espacés de 20 px, champ bleu clair arrondi, bouton jaune.
   Le lien vers la politique de confidentialité est un ajout : le site
   l'écrit en texte brut. */
.newsletter { padding: 64px 0 96px; background: var(--degrad-2); color: #fff; text-align: center; }
.newsletter__inner { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.newsletter__eyebrow {
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
  text-transform: uppercase;
}
.newsletter h2 {
  max-width: 576px;
  margin: 0;
  color: #fff;
  font-size: clamp(22px, 1.9vw, 27px);
  line-height: 1.2;
}
.newsletter h2 span { color: var(--yellow); }
.newsletter__form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 840px;
}
.newsletter .field { width: 100%; gap: 16px; }
.newsletter .field label { color: #fff; font-size: 16px; text-align: center; }
.newsletter .field input {
  height: 40px;
  padding: 6px 12px;
  border: 0;
  border-radius: 20px;
  background: #d7e4ff;
  color: #1f2124;
  font-size: 15px;
}
.newsletter__legal { margin: 0; font-size: 16px; line-height: 1.4; }
.newsletter__legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.newsletter .check { color: #fff; }
.newsletter .btn { height: 40px; padding: 0 24px; border-radius: 20px; font-size: 15px; }

/* Page contact : sous le texte d'ouverture, trois engagements, chacun avec
   un pictogramme dans une pastille ronde (maquette de la recette du
   08/10/2026). Le reste de l'ouverture est celui de la demande de démo.
   Le titre descend sous le haut du formulaire du même écart que celui de
   la démo (28 px à 1440 px de large). */
.page-hero--contact .page-hero__body { margin-top: 28px; }
.page-hero--contact .page-hero__subtitle { font-size: 27px; line-height: 1.25; }
.page-hero__points {
  display: grid;
  gap: 22px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}
.page-hero__points li {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--blue-800);
}
.page-hero__picto {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--blue-050);
  color: var(--blue);
}
.page-hero__picto svg { width: 24px; height: 24px; }
.page-hero__points strong {
  display: block;
  margin-bottom: 2px;
  font-family: var(--font-title);
  font-size: 17px;
  color: var(--navy) !important;
}

/* ==========================================================================
   CTA final de page intérieure
   ========================================================================== */
/* Valeurs relevées sur trackad.ai : dégradé blanc → bleu ciel (bg_degrad_s5),
   96 px de padding, forme décorative de 256 × 280 en bas à droite et
   illustration de 210 × 210 à gauche, contenu centré. */
.cta-final {
  position: relative;
  padding: 96px 0;
  background: linear-gradient(0deg, var(--sky-200) 0%, #fff 80%);
  overflow: hidden;
}
.cta-final::after {
  content: "";
  position: absolute;
  right: 0; bottom: 0;
  width: 256px; height: 280px;
  background: url("../img/bg-demo-forme.svg") no-repeat 100% 100% / contain;
  z-index: 1;
}
.cta-final .container { position: relative; z-index: 2; }

.cta-final__inner {
  display: grid;
  justify-items: center;
  text-align: center;
}
/* L'illustration est un fond du conteneur : elle reste à gauche du texte
   centré sans entrer dans le flux. */
.cta-final__inner::before {
  content: "";
  position: absolute;
  top: 50%; left: 16px;
  transform: translateY(-50%);
  width: 210px; height: 210px;
  background: url("../img/solutions-demo-illustration.png") no-repeat 100% 100% / contain;
}
.cta-final h2 {
  max-width: 24ch;
  margin-bottom: 18px;
  font-size: clamp(21px, 1.85vw, 26px);
  line-height: 1.24;
  color: var(--navy);
}
.cta-final h2 span { color: var(--blue); }
.cta-final p { max-width: 62ch; font-size: 16px; color: var(--navy); }
.cta-final__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 28px; }

/* Sur-titre pâle du site (sup_titre_5) : fond --blue-050, texte bleu. */
.eyebrow--pale { background: var(--blue-050); color: var(--blue); }

/* Sous 1100 px l'illustration chevaucherait le texte : on la masque. */
@media (max-width: 1100px) {
  .cta-final__inner::before { display: none; }
}
@media (max-width: 720px) {
  .cta-final { padding: 64px 0; }
  .cta-final::after { width: 150px; height: 164px; opacity: .6; }
}

/* ==========================================================================
   Plan du site
   ========================================================================== */
.sitemap { padding: 56px 0; background: #fff; }
.sitemap__legend { font-size: 14px; color: var(--blue-800); margin-bottom: 30px; }
.sitemap__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 48px; }
.sitemap__col h2 {
  font-size: 19px;
  padding-bottom: 10px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--sky-200);
  color: var(--blue);
}
.sitemap__col ul { display: grid; gap: 10px; }
.sitemap__col li { font-size: 15.5px; line-height: 1.45; }
.sitemap__col a { text-decoration: underline; text-underline-offset: 3px; }
.sitemap__col a:hover { color: var(--blue); }
.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  vertical-align: 2px;
}
.tag--local { background: var(--yellow); color: var(--navy); }

/* ==========================================================================
   Page légale (colonne de lecture unique)
   ========================================================================== */
.legal { padding: 60px 0 80px; background: #fff; }
/* Sur la politique de confidentialité, le héros ne porte que le titre :
   le texte enchaîne juste dessous plutôt qu'après un blanc d'une soixantaine
   de pixels. Le héros suit ici son voisinage, comme .page-hero--split:has(+
   .hubs) plus haut ; la règle passe ainsi devant les paddings responsives
   de .page-hero. */
.page-hero--plain:has(+ .legal) { padding-bottom: 0; }
.page-hero--plain + .legal { padding-top: 20px; }
.legal__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
.legal__aside { position: sticky; top: 96px; display: grid; gap: 20px; }
.legal__contact { font-size: 14.5px; padding: 0 4px; }
.legal__contact a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.prose--legal { max-width: 880px; }
.prose--legal h3 { color: var(--navy); }

/* ==========================================================================
   Page de remerciement
   ========================================================================== */
/* Page de remerciement : texte centré et foncé, donc fond clair — le voile
   diagonal des héros de page ne s'applique qu'à une colonne de gauche. */
/* ==========================================================================
   FAQ d'article — dernier chapitre du texte, pas encadré rapporté
   --------------------------------------------------------------------------
   Sur les autres pages, la FAQ est une section autonome posée sur un fond
   bleuté : ses cartes blanches à ombre portée s'y détachent, c'est ce qu'on
   attend d'un bloc à part. Ici elle vit dans .article__body, sur du blanc, et
   elle est le septième chapitre d'un article qui en compte six autres. Des
   cartes flottantes lui donneraient un poids visuel qu'aucun des six premiers
   n'a — le lecteur y lirait « encadré marketing » et non « suite du texte ».

   On garde donc la matière de l'article (même mesure, mêmes corps) et on ne
   dessine que ce qui rend l'accordéon manipulable : un filet entre les
   questions, et le chevron de la FAQ de bas de page pour que l'interaction se
   reconnaisse d'une page à l'autre même quand l'habillage change.
   ========================================================================== */
.article-faq__item { border-bottom: 1px solid var(--sky-200); }

.article-faq__item > summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 2px;
  cursor: pointer;
  list-style: none;
}
.article-faq__item > summary::-webkit-details-marker { display: none; }
.article-faq__item > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* La question emprunte le corps des h3 de l'article mais pas leurs marges :
   ici c'est summary qui porte l'espacement, sinon la zone cliquable et le
   texte se décalent l'un de l'autre. */
.article-faq__item > summary h3 {
  flex: 1;
  margin: 0;
  font-size: 17.5px;
  line-height: 1.4;
  color: var(--blue);
  transition: color .2s;
}
.article-faq__item > summary:hover h3 { color: var(--navy); }

.article-faq__item > summary::after {
  content: "";
  flex: none;
  width: 9px; height: 9px;
  margin-right: 3px;
  border-right: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: translateY(-3px) rotate(45deg);
  transition: transform .25s ease-in-out;
}
.article-faq__item[open] > summary::after { transform: translateY(1px) rotate(225deg); }

/* La réponse est du texte d'article : à peine sous le corps courant, pour
   qu'elle se lise comme un paragraphe et non comme une note de bas de page. */
.article-faq__answer { padding: 0 0 20px; }
.article-faq__answer > :first-child { margin-top: 0; }
.article-faq__answer > :last-child { margin-bottom: 0; }
.article-faq__answer p { font-size: 16px; line-height: 1.7; color: #2b3766; }

@media (max-width: 860px) {
  .article-faq__item > summary { padding: 14px 2px; gap: 12px; }
  .article-faq__item > summary h3 { font-size: 16.5px; }
}


/* ==========================================================================
   Coup de cœur — « Vous hésitez encore ? »
   --------------------------------------------------------------------------
   Découpage relevé sur trackad.ai : un bandeau navy (bg_primary, 4 rem / 2 rem)
   porte le sur-titre et le titre, puis un dégradé navy → bleu (bg_degrad_3)
   porte les quatre cartes à picto et l'appel à la démo. Cet appel est la
   carte blanche de l'accueil (.final-cta) et non l'illustration du site,
   plus encombrante et moins lisible.
   ========================================================================== */
.coeur-head {
  padding: 64px 0 24px;
  background: var(--navy);
  color: #fff;
}
.coeur-head h2 {
  position: relative;
  padding-bottom: 20px;
  font-size: clamp(22px, 1.9vw, 27px);
  line-height: 1.2;
  color: #fff;
}
.coeur-head h2 span { color: var(--yellow); }
.coeur-head h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 5px;
  background: var(--yellow);
  transform: skew(50deg);
}

.coeur {
  padding: 8px 0 72px;
  background: var(--degrad-3);
  color: #fff;
}
.coeur__grid {
  display: grid;
  grid-template-columns: minmax(0, 55%) minmax(0, 45%);
  gap: 56px;
  align-items: center;
}
.coeur__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 28px;
}
/* Les pictos n'ont pas tous le même cadre : c'est la hauteur qui les
   aligne, comme sur le site. */
.coeur-card img { width: auto; height: 55px; margin-bottom: 16px; }
/* Le trait sous le titre est bleu et court (76 px), comme sur le site — et
   non le biseau jaune des titres de section. */
.coeur-card h3 {
  position: relative;
  padding: 8px 0;
  margin-bottom: 10px;
  font-size: 20px;
  line-height: 1.2;
  color: #fff;
}
.coeur-card h3::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 76px;
  height: 1px;
  background: var(--blue);
}
.coeur-card p { font-size: 16px; line-height: 1.4; color: #fff; }
.coeur-card strong { color: var(--yellow); font-weight: 600; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1120px) {
  .cases__grid,
  .integrations__logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .baro-content__grid,
  .sectors__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .quotes__grid,
  .posts__grid,
  .videos__grid,
  .trends__grid,
  .baro-actions__grid,
  .foryou__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .coeur__grid { gap: 40px; }
  .page-hero__grid,
  .benefit-row,
  .integrations__grid,
  .whyblock__grid,
  .prose-block__grid,
  .case-part__grid,
  .case-part__grid--defis,
  .case-top__grid,
  .form-section__grid,
  .features__layout,
  .article__layout,
  .coeur__grid,
  .apply-intro__grid,
  .legal__layout { grid-template-columns: minmax(0, 1fr); }
  /* En une colonne, l'anneau décoratif passerait derrière le texte. */
  .apply-intro::after { display: none; }

  /* La carte des chiffres se centre sous le texte. */
  .whyblock__figure { justify-content: center; }

  /* Une colonne : le texte passe au-dessus du visuel, comme sur le site.
     La règle .page-hero--solo .page-hero__grid étant plus spécifique que
     .page-hero__grid, il faut la neutraliser explicitement. */
  .page-hero--solo .page-hero__grid,
  .page-hero--solid .page-hero__grid,
  .page-hero--split.page-hero--petit-visuel .page-hero__grid,
  .page-hero--solo.page-hero--petit-visuel .page-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .page-hero--petit-visuel .page-hero__visual img { max-width: 380px; display: block; margin-inline: auto; }
  /* Le texte y est déjà premier dans le HTML : la règle générale ci-dessous
     le remonterait au-dessus de lui-même sans effet, mais autant l'annuler. */
  .page-hero--solid .page-hero__body { order: 0; }
  /* En une colonne, l'anneau décoratif passerait derrière le texte. */
  .page-hero--baro > .container::before { display: none; }
  /* En une colonne, le texte des baromètres et des rangées « blue » descend
     sur la partie bleue du dégradé : leurs mises en avant passent du bleu,
     qui s'y confond, au blanc. */
  .page-hero--baro .page-hero__subtitle,
  .page-hero--baro .page-hero__body strong,
  .benefits-row--blue .benefit-row__body strong { color: #fff; }
  .page-hero--solo .page-hero__body { order: 0; }
  /* Sauf le héros de /valeurs/, presque tout en texte : le visuel y passe
     sous le titre, comme sur les autres ouvertures. */
  .page-hero--blue .page-hero__body { order: -1; }
  .page-hero__body { order: -1; }
  .page-hero--form .page-hero__form { order: 0; }
  /* En une colonne, le texte de la page contact passe sous le formulaire :
     il tomberait sur le bas du dégradé, le plus bleu — le fond s'éclaircit. */
  .page-hero--contact { background: var(--degrad-s5); }
  .page-hero--contact .page-hero__body { order: 1; margin-top: 0; }

  .benefit-row--reverse .benefit-row__visual { order: 0; }
  .article__aside,
  .legal__aside { position: static; }
  .toc { max-height: none; }
  /* En une colonne, le sommaire et le partage passent au-dessus du texte :
     côte à côte plutôt qu'empilés, pour ne pas repousser le premier
     paragraphe deux écrans plus bas. */
  .article__aside { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; }
  .share { align-self: start; }
  .features__tabs {
    grid-auto-flow: column;
    grid-auto-columns: minmax(200px, 1fr);
    overflow-x: auto;
    padding-bottom: 8px;
  }
  .feature-tab[aria-selected="true"] { transform: none; }
  .feature-panel__grid { grid-template-columns: minmax(0, 1fr); }
  .sitemap__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .page-hero { padding-bottom: 90px; }
  .stats--page { margin-top: -40px; }
  .cases__grid,
  .integrations__logos,
  .values__grid,
  .hubs__grid,
  .quotes__grid,
  .posts__grid,
  .videos__grid,
  .trends__grid,
  .baro-actions__grid,
  .foryou__grid,
  .team__grid,
  .process__list,
  .baro-content__grid,
  .sectors__grid,
  .coeur__cards,
  .form__grid { grid-template-columns: minmax(0, 1fr); }

  /* Le tracé en pointillés relie deux visuels côte à côte : il n'a plus de
     sens une fois les blocs empilés. */
  .benefits-link { display: none; }

  /* Page Recrutement : aucun bandeau de chiffres ne chevauche cette
     ouverture, elle n'a donc pas besoin des 90 px de garde ci-dessus. */
  .page-hero--solid { padding: 40px 0 48px; }
  .page-hero--solid .page-hero__grid { gap: 32px; }
  .process { padding: 16px 0 48px; }
  .apply-intro { padding: 24px 0 64px; }
  .apply-form { padding: 48px 0 64px; }
  .apply-form::after { display: none; }
  .apply-form__card { padding: 24px 22px 32px; }


  .article__aside { grid-template-columns: minmax(0, 1fr); }
  .baro-action__form--inline { grid-template-columns: minmax(0, 1fr); }
  .author__card { grid-template-columns: minmax(0, 1fr); padding: 26px 22px; }
  .author__avatar { width: 96px; height: 96px; }
  .page-hero { padding-bottom: 48px; }
  .page-hero__grid { gap: 32px; }
  .form { padding: 24px 20px 28px; }

  /* Deux flèches et un compteur : tout tient sur une ligne, on resserre
     seulement les écarts. */
  .feature-nav { gap: 12px; }
}

/* ==========================================================================
   Page « À propos » — enchaînement des blocs sous le héros
   --------------------------------------------------------------------------
   Sur trackad.ai les sections de /a-propos/ ne se juxtaposent pas : leurs
   dégradés se répondent d'un bloc à l'autre, du bleu du héros jusqu'au blanc
   de la frise, puis du blanc jusqu'au navy des produits. Les classes ci-dessous
   ne servent que sur cette page ; les autres pages gardent les blocs neutres.

     héros            bleu  →  transparent      (degrad-s1, déjà en place)
     chiffres         bleu  →  bleu clair        .stats--fade   (bg_degrad_s2)
     frise            bleu clair → blanc         .timeline--split (bg_degrad_s3)
     valeurs          blanc → bleu               .values--fade  (bg_degrad_s1)
     founders         bleu  → navy               .team          (bg_degrad_2)
     produits         navy  → bleu               .products--flip (bg_degrad_3)
   ========================================================================== */

/* ---------- Chiffres clés : le bandeau navy sur le fondu bleu ---------- */
/* Le bandeau ne mord que de 24 px sur le héros (contre 40 ailleurs), comme
   sur le site d'origine, et le dégradé prend le relais dessous. */
.stats--fade {
  margin-top: -24px;
  padding-bottom: 10px;
  background: var(--degrad-s2);
}
.stats--fade .stats__band { background: var(--navy); }

/* ---------- Frise en deux colonnes ---------- */
.timeline--split { background: var(--degrad-s3); padding: 64px 0; }
.timeline__grid {
  display: grid;
  grid-template-columns: minmax(0, 483px) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.timeline__visual img { width: 100%; height: auto; }
.timeline--split .timeline__lead { max-width: none; margin-top: 20px; margin-bottom: 28px; }
.timeline__steps { display: grid; }
/* Chaque étape porte sa puce ronde ; le filet vertical est tracé par le texte
   qui la suit, ce qui relie les puces sans dépendre d'une hauteur fixe. */
.timeline__step h2,
.timeline__step h3 {
  position: relative;
  padding-left: 30px;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(22px, 1.9vw, 27px);
  line-height: 1.2;
  color: var(--navy);
}
.timeline__step h2::before,
.timeline__step h3::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 20px; height: 20px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--blue);
}
.timeline__step p {
  position: relative;
  padding: 8px 0 16px 30px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--navy);
}
.timeline__step p::before {
  content: "";
  position: absolute;
  left: 9px; top: 0;
  width: 2px; height: 100%;
  background: linear-gradient(180deg, rgba(5, 84, 241, 0) 0%, var(--blue) 52%, rgba(5, 84, 241, 0) 100%);
}
.timeline--split .timeline__cta { margin-top: 12px; }

/* ---------- Frise en ouverture de page (/notre-histoire/) ----------
   La page se passe de héros : la frise porte le h1 et ouvre le contenu. Elle
   reprend le fondu bleu du site (bg_degrad_s3, comme la frise de /a-propos/),
   étendu au fil d'Ariane pour que le bandeau clair d'ouverture soit d'un seul
   tenant. L'illustration passe à droite, en tête de colonne et fixe : elle
   accompagne le titre, pas le défilé des sept étapes. */
.breadcrumb-bar:has(+ .timeline--page) { background: var(--sky-200); }
.timeline--page {
  padding: 24px 0 32px;
  background: linear-gradient(0deg, #fff 62%, var(--sky-200) 100%);
}
.timeline--page .timeline__grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  align-items: start;
}
.timeline--page .timeline__visual img { border-radius: var(--r-md); }
.timeline--page .eyebrow { margin-bottom: 14px; }
.timeline--page h1 {
  font-size: clamp(27px, 2.5vw, 36px);
  line-height: 1.1;
  color: var(--navy);
}
.timeline--page h1 span { color: var(--blue); }

/* Les deux blocs qui suivent la frise se rapprochent d'elle : sur cette page
   les sections s'enchaînent sans respiration marquée, contrairement aux pages
   à héros où .prose-block et .cta-final ouvrent chacun un chapitre. */
.timeline--page + .prose-block { padding: 40px 0 24px; }
/* Le visuel est plus haut que le texte : centré, il enfonçait le sur-titre
   « Et aujourd'hui ? » de 80 px sous la frise. Les deux colonnes partent
   désormais du même bord haut. */
.timeline--page + .prose-block .prose-block__grid { align-items: start; }
.timeline--page + .prose-block + .cta-final { padding-top: 56px; }

/* ---------- Valeurs : titre centré sur le fondu, cartes bleues ---------- */
.values--fade {
  padding: 32px 0 48px;
  background: var(--degrad-s1);
  color: var(--navy);
  text-align: center;
}
.values--fade .titre-trait {
  max-width: 720px;
  margin: 0 auto 36px;
  color: var(--navy);
}
.values--fade .value-card {
  background: linear-gradient(0deg, #032a79 0%, var(--blue) 100%);
  color: #fff;
  padding: 24px 16px;
  text-align: left;
  box-shadow: none;
}
.values--fade .value-card img { height: 46px; width: auto; }
.values--fade .value-card :is(h2, h3) { font-size: 20px; color: #fff; }
.values--fade .value-card p { font-size: 16px; color: #fff; }
/* Quinconce : une carte sur deux descend d'une demi-hauteur de gouttière. */
.values--fade .value-card:nth-child(odd)  { margin-bottom: 36px; }
.values--fade .value-card:nth-child(even) { margin-top: 36px; }
.values--fade .values__cta { margin-top: 20px; }

/* ---------- Valeurs : la grille seule de /valeurs/ ----------
   Mêmes cartes que /a-propos/, mais sans titre de section et sur le fondu
   inverse (bg_degrad_s4 : bleu clair en haut, blanc en bas), avec la forme
   ronde collée au bord gauche (forme_l). */
.values--bare {
  position: relative;
  padding: 56px 0 64px;
  background: var(--degrad-s4);
}
.values--bare::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 245px;
  height: 325px;
  transform: translateY(-50%);
  background: url(/assets/img/forme-rond-1-bleu.webp) no-repeat 100% 50% / auto 100%;
  z-index: 0;
  pointer-events: none;
}
.values--bare .container { position: relative; z-index: 1; }
/* Le trait jaune sous le nom de la valeur, comme sur le site. */
.values--bare .value-card :is(h2, h3)::after {
  content: "";
  display: block;
  width: 25px;
  height: 3px;
  margin-top: 10px;
  background: var(--yellow);
}

/* ---------- Founders : cartes photo + bandeau blanc sur le dégradé ---------- */
.team {
  position: relative;
  padding: 64px 0;
  background: var(--degrad-2);
  overflow: hidden;
  text-align: center;
}
/* Anneau décoratif du thème, à droite, sous le contenu. */
.team::before {
  content: "";
  position: absolute;
  right: 0; bottom: 0;
  width: 155px; height: 280px;
  background: url("../img/forme-rond-2-bleu-clair.png") no-repeat 0 50% / auto 100%;
  /* Le site d'origine emploie ici un anneau bleu moyen ; le bleu clair dont
     nous disposons est plus lumineux, l'opacité rétablit le même contraste. */
  opacity: .55;
  z-index: 0;
}
.team .container { position: relative; z-index: 2; }
.team h2 { color: #fff; font-size: clamp(24px, 2vw, 28px); }
.team__grid {
  grid-template-columns: repeat(3, minmax(0, 287px));
  justify-content: center;
  gap: 20px;
  text-align: left;
}
.team-card {
  border-radius: var(--r-md);
  overflow: hidden;
  text-align: left;
}
.team-card img {
  display: block;
  border-radius: var(--r-md) var(--r-md) 0 0;
  margin-bottom: 0;
}
.team-card__body { padding: 20px; background: #fff; }
.team-card h3 {
  font-size: 19px;
  line-height: 1.2;
  color: var(--blue);
  margin-bottom: 4px;
}
.team-card p { font-size: 16px; color: var(--blue-800); }

/* ---------- Produits : dégradé inversé pour enchaîner sur le navy ---------- */
.products--flip { background: var(--degrad-3); }

@media (max-width: 1024px) {
  .timeline__grid,
  .timeline--page .timeline__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .timeline__visual { max-width: 483px; }
  /* Une seule colonne : l'illustration remonte au-dessus des étapes. */
  .timeline--page .timeline__visual { order: -1; }
}

@media (max-width: 1120px) {
  /* Sur deux colonnes la quinconce décalerait des cartes déjà alignées. */
  .values--fade .value-card:nth-child(odd)  { margin-bottom: 0; }
  .values--fade .value-card:nth-child(even) { margin-top: 0; }
  .team__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .timeline--split { padding: 48px 0 40px; }
  .timeline--page { padding: 20px 0 24px; }
  .team::before { display: none; }
  .team__grid { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .team-card { width: 100%; max-width: 287px; }
}

/* ---------- Vie d'entreprise : écrans étroits ----------
   880 px est le point de rupture du site (`.titre_2l_*::after` y recentre le
   trait). Sous cette largeur, l'alternance gauche / droite n'a plus de
   colonne libre pour se lire : les quatre sections repassent en pleine
   largeur, toutes ferrées à gauche. */
@media (max-width: 880px) {
  .lifeblock__body { width: 100%; }
  .lifeblock--right .lifeblock__body { margin-left: 0; text-align: left; }
  .lifeblock--depuis-navy { padding-bottom: 72px; }
  .lifeblock--forme::after { width: 90px; height: 200px; }
  .lifeblock__onde { width: 100%; height: auto; }
}

/* ==========================================================================
   Page introuvable (404)
   --------------------------------------------------------------------------
   Une grille de quatre portes de sortie sous l'ouverture navy. Les cartes
   reprennent la bordure et le survol des cartes du méga-menu : le visiteur
   y a déjà vu ce geste, il n'a pas à l'apprendre ici.
   ========================================================================== */
/* Ouverture : l'illustration de trackad.ai à droite. PNG détouré, posé sur
   le dégradé tel quel — ni ombre ni arrondi, qui dessineraient le cadre
   d'une image là où il n'y en a pas. Le dessin reste entier : son ombre au
   sol fait partie de la scène. */
/* Les chiffres du dessin sont exactement --blue : sur le dégradé vertical de
   'dark', ils disparaissaient dans le haut. Le dégradé passe donc à
   l'horizontale — bleu sous le texte, navy sous le dessin. */
.page-hero--404 {
  padding: 40px 0 56px;
  overflow: hidden;
  background: linear-gradient(100deg, var(--blue) 0%, var(--blue-800) 42%, var(--navy) 72%);
}
.page-hero--404 .page-hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; }
.page-hero--404 .page-hero__visual img {
  display: block;
  width: 100%;
  max-width: 600px;
  height: auto;
  margin-left: auto;
  border-radius: 0;
  box-shadow: none;
  animation: notfound-flotte 6s ease-in-out infinite;
}
/* Un balancement de quelques pixels : assez pour que la page ait l'air
   vivante, trop peu pour distraire de la lecture. */
@keyframes notfound-flotte {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .page-hero--404 .page-hero__visual img { animation: none; }
}

.notfound { padding: 56px 0 72px; background: #fff; }
.notfound__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
}
.notfound__links a {
  display: block;
  height: 100%;
  padding: 20px 22px;
  border: 1px solid var(--sky-200);
  border-radius: 14px;
  background: #fff;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.notfound__links a:hover {
  border-color: var(--blue);
  box-shadow: 0 14px 34px rgba(5, 84, 241, .12);
  transform: translateY(-2px);
}
.notfound__titre {
  display: block;
  font-weight: 700;
  font-size: 17px;
  color: var(--navy);
  margin-bottom: 4px;
}
.notfound__desc { display: block; font-size: 15px; line-height: 1.45; color: var(--blue-800); }
.notfound__aide { margin-top: 28px; font-size: 15px; color: var(--blue-800); }
.notfound__aide a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }

/* Empilé, le texte reste en tête comme dans toutes les ouvertures du site
   (règle `.page-hero__body { order: -1 }` plus haut) et le dessin passe
   dessous : le dégradé vertical habituel remet le navy sous lui. */
@media (max-width: 960px) {
  .page-hero--404 { background: var(--degrad-2); }
  .page-hero--404 .page-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .page-hero--404 .page-hero__visual img { max-width: min(420px, 100%); margin-inline: auto; }
}

@media (max-width: 720px) {
  .page-hero--404 { padding: 24px 0 48px; }
  .page-hero--404 .page-hero__visual img { max-width: min(340px, 100%); }
  .notfound__links { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Glossaire — index et fiches
   --------------------------------------------------------------------------
   Les cartes de termes reprennent la géométrie des cartes du méga-menu et de
   la page introuvable : même rayon, même bordure, même relèvement au survol.
   Trois colonnes au large, deux à partir de 1024 px, une sous 720 px.
   ========================================================================== */
.glossary { padding: 48px 0 64px; background: #fff; }
.glossary__count { font-size: 14px; color: var(--blue-800); margin-bottom: 22px; }
.glossary__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.glossary-card a {
  display: block;
  height: 100%;
  padding: 20px 22px;
  border: 1px solid var(--sky-200);
  border-radius: 14px;
  background: #fff;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.glossary-card a:hover {
  border-color: var(--blue);
  box-shadow: 0 14px 34px rgba(5, 84, 241, .12);
  transform: translateY(-2px);
}
.glossary-card__terme {
  display: block;
  font-weight: 700;
  font-size: 17px;
  color: var(--navy);
  margin-bottom: 6px;
}
.glossary-card__desc { display: block; font-size: 14.5px; line-height: 1.5; color: var(--blue-800); }

/* ---------- Fiche : synthèse et termes voisins ---------- */
.glossary-outro { padding: 8px 0 40px; background: #fff; }
.glossary-outro .prose p {
  padding: 22px 26px;
  border-left: 4px solid var(--yellow);
  background: var(--blue-050);
  border-radius: 0 12px 12px 0;
  font-size: 17px;
}
.glossary-next { padding: 40px 0 64px; background: var(--degrad-s5); }
.glossary-next .glossary__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 24px; }
.glossary-next__all { margin-top: 28px; }

@media (max-width: 1024px) {
  .glossary__grid,
  .glossary-next .glossary__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .glossary__grid,
  .glossary-next .glossary__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Formulaire de baromètre : couverture et trois promesses ----------
   Relevé sur trackad.ai : la couverture fait environ 300 px de large, les
   promesses se tiennent à sa droite, centrées sur sa hauteur, précédées d'une
   coche jaune. Sous 480 px, elles repassent sous l'image. */
.barometre-apercu {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 32px;
}
.barometre-apercu__cover {
  flex: 0 0 auto;
  width: min(300px, 55%);
  height: auto;
}
.barometre-promesses { display: grid; gap: 14px; }
.barometre-promesses li {
  position: relative;
  padding-left: 34px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--navy);
}
.barometre-promesses li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .05em;
  width: 9px;
  height: 16px;
  border: solid var(--yellow);
  border-width: 0 4px 4px 0;
  transform: rotate(45deg);
}
@media (max-width: 480px) {
  .barometre-apercu { flex-direction: column; align-items: flex-start; gap: 20px; }
  .barometre-apercu__cover { width: min(260px, 100%); }
}

/* ---------- Pages Looker Studio : captures d'écran de la documentation ----------
   Les captures viennent de l'interface Google et vont jusqu'à 1920 px de large.
   Elles sont bornées à la colonne de texte et encadrées, pour se distinguer du
   fond blanc de la page. */
.prose--looker img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 18px 0;
  border: 1px solid var(--sky-200);
  border-radius: 10px;
}
.prose--looker ol,
.prose--looker ul { margin: 14px 0 18px; padding-left: 22px; }
.prose--looker ol li,
.prose--looker ul li { margin-bottom: 8px; line-height: 1.55; }
.prose--looker ol { list-style: decimal; }
.prose--looker ul { list-style: disc; }

/* ---------- Cas clients : les résultats ----------
   Un seul rythme (recette du 05/10/2026) : 32 px entre les blocs, 8 px entre
   un chiffre et son texte (voir .chiffre-28). La disposition suit le nombre
   de blocs, posé en classe par le gabarit :
   — 2 ou 3 chiffres (--centre) : une rangée de colonnes de même largeur,
     bornée, centrée, textes centrés. Des colonnes étirées sur toute la
     largeur laissaient des écarts visuels très inégaux selon la longueur
     des textes (200 px ici, 60 px là) ;
   — 4 chiffres (--2x2) : deux rangées de deux ;
   — un chiffre suivi d'une liste à coches (Jules), ou la liste seule
     (OuiHelp) : deux colonnes alignées en haut. */
.case-resultats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 32px;
  margin-top: 12px;
}
.case-resultats--centre {
  grid-template-columns: repeat(var(--n, 3), minmax(0, 320px));
  justify-content: center;
  text-align: center;
}
.case-resultats--2 { --n: 2; }
.case-resultats--2x2 { grid-template-columns: repeat(2, minmax(0, 480px)); }
.case-resultats--1 { grid-template-columns: minmax(0, 1fr); }
.case-resultats .puces { margin: 0; }
/* Phrase d'introduction des résultats (« Rapidement, l'audit a montré : »). */
.case-resultats__intro { margin: 0; font-size: 16px; line-height: 1.5; }
@media (max-width: 720px) {
  .case-resultats,
  .case-resultats--centre,
  .case-resultats--2x2 { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

/* ---------- Guide Meta : le chiffre et la liste d'attentes ---------- */
.guide-pourquoi { padding: 56px 0 40px; background: var(--degrad-s5); }
.guide-pourquoi p { font-size: 17px; line-height: 1.6; color: var(--blue-800); max-width: 72ch; }
.guide-chiffre { margin-top: 26px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.guide-chiffre .chiffre-28 { margin: 0; }

.guide-attentes { padding: 48px 0 64px; background: #fff; }
.guide-attentes__liste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 28px;
}
.guide-attentes__liste li { display: grid; gap: 12px; }
.guide-attentes__liste img { width: 48px; height: 48px; }
.guide-attentes__liste p { font-size: 16px; line-height: 1.55; color: var(--blue-800); margin: 0; }
.guide-attentes__liste strong { color: var(--navy); }

@media (max-width: 880px) {
  .guide-attentes__liste { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Page NOA
   --------------------------------------------------------------------------
   NOA a son propre gabarit (build/content/solutions-noa.js) : cinq blocs à
   deux colonnes, chacun avec son sur-titre et son fond. Les cinq fonds sont
   ceux du site, dans l'ordre — bg_color1, bg_degrad_6, bg_degrad_4,
   bg_degrad_1, bg_degrad_2.
   ========================================================================== */
.noa-row { padding: 72px 0; }
.noa-row--bleu     { background: var(--blue); }
.noa-row--nuit     { background: var(--degrad-6); }
/* Les deux fonds clairs du milieu de page vont du bleu au blanc sur toute la
   hauteur, l’un vers le bas, l’autre vers le haut, comme sur le site. */
.noa-row--descente { background: var(--degrad-4); }
.noa-row--montee   { background: var(--degrad-1); }
.noa-row--navy     { background: var(--degrad-2); }

/* Sur les trois fonds sombres, tout le bloc est en blanc et les mises en
   avant passent au jaune : le bleu du thème n'y ressortirait pas. */
.noa-row--bleu .benefit-row__body,
.noa-row--nuit .benefit-row__body,
.noa-row--navy .benefit-row__body,
.noa-row--bleu .benefit-row__body h2,
.noa-row--nuit .benefit-row__body h2,
.noa-row--navy .benefit-row__body h2 { color: #fff; }
.noa-row--bleu .benefit-row__body strong,
.noa-row--nuit .benefit-row__body strong,
.noa-row--navy .benefit-row__body strong { color: var(--yellow); }
/* Le titre mis en avant est bleu sur fond clair, jaune sur fond sombre. */
.noa-row .benefit-row__body h2 span { color: var(--blue); }
.noa-row--bleu .benefit-row__body h2 span,
.noa-row--nuit .benefit-row__body h2 span,
.noa-row--navy .benefit-row__body h2 span { color: var(--yellow); }
/* Sur `descente`, le titre est posé sur le haut bleu : blanc et jaune, comme
   sur le site ; le texte, plus bas sur le blanc, reste navy. */
.noa-row--descente .benefit-row__body h2 { color: #fff; }
.noa-row--descente .benefit-row__body h2 span { color: var(--yellow); }
.noa-row--descente .benefit-row__body h2::after { background: #fff; }

/* Le trait biseauté sous le titre : jaune partout sauf sur les fonds jaunes
   de titre, où il passe au blanc pour rester visible. */
.noa-row--bleu .benefit-row__body h2::after,
.noa-row--nuit .benefit-row__body h2::after,
.noa-row--navy .benefit-row__body h2::after { background: #fff; }

.noa-row .benefit-row__body h2 {
  font-size: clamp(22px, 1.9vw, 27px);
  line-height: 1.25;
  margin-bottom: 18px;
}
.noa-row .benefit-row__body .eyebrow { margin-bottom: 16px; }
/* liste_puce_3 : coche bleue de 26 px, retrait de 35 px. Les points clés de
   « L’humain au cœur… » prennent la coche jaune, qui ressort sur le bas bleu
   de leur fond. */
.noa-row .benefit-row__body ul { margin: 0 0 14px; padding: 0; list-style: none; }
.noa-row .benefit-row__body li {
  position: relative;
  min-height: 26px;
  padding: 2px 0 0 35px;
  margin-bottom: 8px;
  line-height: 1.5;
}
.noa-row .benefit-row__body li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 26px;
  height: 26px;
  background: var(--blue);
  -webkit-mask: url("../img/picto-checked.svg") no-repeat 50% 50% / 100% 100%;
          mask: url("../img/picto-checked.svg") no-repeat 50% 50% / 100% 100%;
}
.noa-row--montee .benefit-row__body li::before { background: var(--yellow); }
.noa-row .benefit-row__visual img { width: 100%; border-radius: var(--r-md); }

/* ---------- Illustrations dessinées des bénéfices ----------
   Même vocabulaire que les visuels de TrackAd 360 (.import-card, .parcours,
   .onboarding) : coque navy, chiffre en jaune, panneau interne translucide,
   lignes séparées d'un filet. Elles prennent la place des grands dessins du
   site sur TrackAd Affiliate, où ceux-ci écrasaient le texte. */
.benef-widget { padding: 28px 30px 24px; }
.benef-widget__tete {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 20px;
}
.benef-widget__num {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(30px, 3vw, 40px);
  line-height: 1;
  color: var(--yellow);
}
.benef-widget__tete small { font-size: clamp(17px, 1.6vw, 20px); font-weight: 600; line-height: 1.3; color: #fff; }

.benef-widget__panneau {
  padding: 16px 18px;
  border-radius: var(--r-sm);
  background: rgba(32, 54, 135, .5);
}
.benef-widget__entete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 12px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .65);
}
.benef-widget__entete span {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--yellow);
}

.benef-widget__liste { margin: 0; padding: 0; list-style: none; }
.benef-widget__liste li {
  display: grid;
  grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.benef-widget__liste li:last-child { border-bottom: 0; padding-bottom: 0; }
/* Les listes d'état n'ont pas de jauge : deux colonnes suffisent. */
.benef-widget__liste--etats li { grid-template-columns: minmax(0, 1fr) auto; }
.benef-widget__label { font-size: 14px; color: rgba(255, 255, 255, .88); }

/* Jauges en largeur, donc comparables d'une ligne à l'autre. */
.benef-widget__jauge {
  height: 7px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .14);
  overflow: hidden;
}
.benef-widget__jauge span {
  display: block;
  height: 100%;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--sky), var(--yellow));
}
.benef-widget__val {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 14px;
  color: #fff;
}
.benef-widget__etat {
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 100px;
  background: rgba(251, 215, 0, .16);
  color: var(--yellow);
}

.benef-widget__note {
  margin: 14px 0 0;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .6);
}
.benef-widget__gain {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 18px 0 0;
  font-size: 14px;
  color: rgba(255, 255, 255, .88);
}
.benef-widget__gain strong {
  font-family: var(--font-title);
  font-size: 20px;
  color: var(--yellow);
}

/* Les captures du site sont en portrait : étalées sur toute la colonne, elles
   font deux fois la hauteur des cartes d'à côté et écrasent la rangée. On les
   borne en hauteur, on les recentre, et on leur donne l'ombre portée des
   autres illustrations pour qu'elles se lisent comme un objet posé. */
.benefit-row__visual--fin img {
  width: auto;
  max-width: 100%;
  max-height: 440px;
  margin-inline: auto;
  box-shadow: 0 24px 55px rgba(3, 20, 60, .28);
}

/* Jauge d'importation, sous l'accroche : la même que celle de la carte de
   TrackAd 360, pleine par principe — c'est « 100 % de vos données ». */
.benef-widget__barre {
  height: 8px;
  margin: 0 0 20px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .18);
  overflow: hidden;
}
.benef-widget__barre span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--sky), var(--yellow));
}

/* Indicateurs de la carte d'importation : deux colonnes, libellé au-dessus
   du chiffre, comme sur le site. */
.benef-widget__kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 22px;
  margin: 0;
}
.benef-widget__kpis dt { font-size: 14px; color: rgba(255, 255, 255, .8); }
.benef-widget__kpis dd {
  margin: 2px 0 0;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 21px;
  line-height: 1;
  color: var(--yellow);
}

/* La valeur d'avant, en petit et barrée d'une teinte pâle, devant celle
   d'après : « 0 % → 31 % » tient ainsi sur une seule colonne. */
.benef-widget__val small {
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, .45);
}
.benef-widget__val small::after { content: " →"; }

/* Liste de plateformes : une pastille ronde pour le logo, son nom, son état.
   Boîte fixe — les logos n'ont pas du tout le même format. */
.benef-widget__sources { margin: 0; padding: 0; list-style: none; }
.benef-widget__sources li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.benef-widget__sources li:last-child { border-bottom: 0; padding-bottom: 0; }
.benef-widget__logo {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #fff;
}
.benef-widget__logo img { width: 18px; height: 18px; object-fit: contain; }

/* ---------- Pages produit : sur-titres pleins ----------
   Les variantes blanche (Fonctionnalités, FAQ) et pâle (Démo) donnaient du
   bleu sur blanc : sur les pages produit elles prennent le bleu foncé
   sup_titre_4, comme les sur-titres de l'accueil. Les classes sont listées
   une à une : un préfixe attraperait aussi les pages du connecteur Looker. */
.page--trackad-360 :is(.eyebrow--white, .eyebrow--pale),
.page--en-trackad-360 :is(.eyebrow--white, .eyebrow--pale),
.page--trackad-affiliate :is(.eyebrow--white, .eyebrow--pale),
.page--en-trackad-affiliate :is(.eyebrow--white, .eyebrow--pale),
.page--trackad-collector :is(.eyebrow--white, .eyebrow--pale),
.page--en-trackad-collector :is(.eyebrow--white, .eyebrow--pale),
.page--trackad-lead :is(.eyebrow--white, .eyebrow--pale),
.page--en-trackad-lead :is(.eyebrow--white, .eyebrow--pale) { background: var(--blue-800); color: #fff; }

/* ---------- TrackAd Lead : visuels resserrés ----------
   Les trois cartes ont des lignes courtes (« Tag … aucun ») : sur toute la
   largeur de la colonne, elles paraissaient étirées. On les borne et on les
   centre, à la même largeur pour que les trois rangées restent alignées. Les
   deux textes de l'en-tête et du pied se suivent au lieu d'être rejetés aux
   deux bords. */
:is(.page--trackad-lead, .page--en-trackad-lead) .benef-widget {
  max-width: 440px;
  margin-inline: auto;
}
:is(.page--trackad-lead, .page--en-trackad-lead) :is(.benef-widget__entete, .benef-widget__gain) {
  justify-content: flex-start;
  gap: 10px;
}

/* ---------- Cas clients : visuel du héros ----------
   Les photos fournies n'ont pas toutes le même format : bandeau très allongé
   (CroisiEurope, 1573 × 427) ou portrait (Jules, La Redoute, Sephora…), qui
   faisait la photo démesurément haute ou écrasée. Toutes sont cadrées au
   format 3:2 de la majorité des cas. Les portraits ont en plus été recadrés
   à la source (fichiers *-3x2.jpg), le sujet choisi à l'œil ; la règle reste
   le filet de sécurité des prochaines photos. */
.page-hero--cas .page-hero__visual img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 50%;
}

/* ---------- /merci-barometre/ : bandeau de confirmation ----------
   Dégradé blanc → bleu très pâle, vague blanche pleine largeur en bas,
   pastille cochée à gauche du titre et enveloppe à droite, qui déborde un
   peu sur la vague. L'en-tête de la grille de cas qui suit perd sa plaque :
   le sur-titre redevient un simple texte bleu, et l'ensemble se resserre. */
.merci-hero {
  position: relative;
  overflow: hidden;
  padding: 48px 0 72px;
  background: linear-gradient(180deg, #fff 0%, var(--blue-050) 100%);
}
.merci-hero__grid {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.merci-hero__body {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  min-width: 0;
}
.merci-hero__check { flex: none; width: 60px; height: auto; }
.merci-hero h1 {
  position: relative;
  margin: 6px 0 16px;
  padding-bottom: 18px;
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.15;
  color: var(--navy);
}
.merci-hero h1 span { color: var(--blue); }
.merci-hero h1::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  width: 52px; height: 5px;
  background: var(--yellow);
  transform: skew(50deg);
}
.merci-hero p { margin: 0; }
.merci-hero__illu {
  flex: none;
  width: clamp(220px, 26vw, 340px);
  height: auto;
  margin-bottom: -56px;   /* déborde sur la vague */
}
.merci-hero__vague {
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%;
  height: 56px;
  display: block;
}

.eyebrow--texte {
  padding: 0;
  background: none;
  color: var(--blue);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
}
.cases--merci { padding-top: 24px; }
.cases--merci .eyebrow { margin-bottom: 6px; }
.cases--merci h2.titre-trait { padding-bottom: 14px; margin-bottom: 28px; }

@media (max-width: 720px) {
  .merci-hero { padding: 32px 0 56px; }
  .merci-hero__grid { flex-direction: column; align-items: stretch; gap: 20px; }
  .merci-hero__body { gap: 14px; }
  .merci-hero__check { width: 44px; }
  .merci-hero h1 { margin-top: 2px; }
  .merci-hero__illu { width: 200px; align-self: flex-end; margin-bottom: -40px; }
  .merci-hero__vague { height: 36px; }
}