/* G4G — sections de marque (E5a) : SQUELETTE présentiel sur tokens NEUTRES.
 *
 * 100 % `var(--g4g-*)` : aucune couleur ni espacement en dur, pas de gradient,
 * pas d'emoji. Claude Design remplacera les VALEURS des tokens (`tokens.css`) et
 * affinera ces layouts sans toucher aux noms de classes.
 *
 * Faute de token dédié dans `tokens.css`, quelques valeurs STRUCTURELLES restent
 * en dur (points de rupture, largeurs/hauteurs de gabarit d'image) — signalées
 * « à tokeniser (Claude Design) ». Aucune valeur de COULEUR ni d'ESPACEMENT
 * sémantique n'est codée en dur.
 */

/* --- Rythme vertical commun ------------------------------------------- */
/* Faute de token « espacement de section » dédié, on réutilise le plus grand
 * espace existant (--g4g-space-12). à tokeniser (Claude Design). */
.g4g-section { margin-block: var(--g4g-space-12); }
/* Ancres de section (bouton → #ancre) : dégager sous l'en-tête collant (2 bandes). */
.g4g-section[id] { scroll-margin-top: var(--g4g-header-height); }
.g4g-section:first-child { margin-top: 0; }
.g4g-section:last-child { margin-bottom: 0; }
.g4g-section__heading { font-size: var(--g4g-text-2xl); margin: 0 0 var(--g4g-space-6); }

/* Focus visible homogène sur les liens de section (les boutons héritent de
 * base.css). WCAG 2.4.7. */
.g4g-hero a:focus-visible,
.g4g-cta-band a:focus-visible,
.g4g-feature__link:focus-visible,
.g4g-logo__link:focus-visible {
  outline: 2px solid var(--g4g-accent);
  outline-offset: 2px;
}

/* --- Hero (bannière) -------------------------------------------------- */
.g4g-hero {
  display: grid;
  gap: var(--g4g-space-8);
  align-items: center;
  padding: var(--g4g-space-12) var(--g4g-space-6);
  background: var(--g4g-surface);
  border: 1px solid var(--g4g-border);
  border-radius: var(--g4g-radius-md);
}
.g4g-hero__heading { font-size: var(--g4g-text-2xl); margin: 0 0 var(--g4g-space-3); }
.g4g-hero__subheading {
  color: var(--g4g-text-muted);
  font-size: var(--g4g-text-lg);
  margin: 0 0 var(--g4g-space-6);
}
.g4g-hero__actions { margin: 0; }
.g4g-hero__image { width: 100%; height: auto; display: block; border-radius: var(--g4g-radius-md); }
.g4g-hero--centre { text-align: center; justify-items: center; }

/* Variante « split » : média et texte côte à côte dès l'espace disponible.
 * 600px = point de rupture structurel. à tokeniser (Claude Design). */
@media (min-width: 600px) {
  .g4g-hero--split { grid-template-columns: 1fr 1fr; }
}

/* --- Bande d'appel à l'action ----------------------------------------- */
.g4g-cta-band {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--g4g-space-4);
  padding: var(--g4g-space-8) var(--g4g-space-6);
  background: var(--g4g-surface-alt);
  border: 1px solid var(--g4g-border);
  border-radius: var(--g4g-radius-md);
}
.g4g-cta-band__heading { margin: 0; font-size: var(--g4g-text-xl); }
.g4g-cta-band__text { margin: 0; color: var(--g4g-text-muted); max-width: 60ch; }

/* --- Grille de cartes / fonctionnalités ------------------------------- */
.g4g-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--g4g-space-6);
  grid-template-columns: 1fr; /* mobile-first : une colonne */
}
/* 600px / 900px = points de rupture structurels. à tokeniser (Claude Design). */
@media (min-width: 600px) {
  .g4g-cards--cols-2,
  .g4g-cards--cols-3,
  .g4g-cards--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .g4g-cards--cols-3 { grid-template-columns: repeat(3, 1fr); }
  .g4g-cards--cols-4 { grid-template-columns: repeat(4, 1fr); }
}
.g4g-feature { display: flex; flex-direction: column; gap: var(--g4g-space-2); }
.g4g-feature__icon img { width: var(--g4g-space-12); height: auto; display: block; }
.g4g-feature__title { margin: 0; font-size: var(--g4g-text-lg); }
.g4g-feature__text { margin: 0; color: var(--g4g-text-muted); }
.g4g-feature__link { margin-top: auto; font-size: var(--g4g-text-sm); }

/* --- Colonnes de texte riche ------------------------------------------ */
.g4g-columns__grid {
  display: grid;
  gap: var(--g4g-space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  .g4g-columns__grid { grid-template-columns: repeat(2, 1fr); }
}
.g4g-columns__col > :first-child { margin-top: 0; }

/* --- Témoignages ------------------------------------------------------ */
.g4g-testimonials__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--g4g-space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  .g4g-testimonials__list { grid-template-columns: repeat(2, 1fr); }
}
.g4g-testimonial { display: flex; flex-direction: column; gap: var(--g4g-space-4); }
.g4g-testimonial__quote { margin: 0; font-size: var(--g4g-text-lg); }
.g4g-testimonial__meta { display: flex; align-items: center; gap: var(--g4g-space-3); }
/* 48px = gabarit de portrait. à tokeniser (Claude Design). */
.g4g-testimonial__avatar img {
  width: var(--g4g-space-12);
  height: var(--g4g-space-12);
  border-radius: var(--g4g-radius-pill);
  object-fit: cover;
  display: block;
}
.g4g-testimonial__author { margin: 0; display: flex; flex-direction: column; }
.g4g-testimonial__name { font-weight: 700; }
.g4g-testimonial__role { color: var(--g4g-text-muted); font-size: var(--g4g-text-sm); }

/* --- Mur de partenaires ----------------------------------------------- */
.g4g-logos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--g4g-space-8);
}
/* 160px = largeur maximale d'un logo. à tokeniser (Claude Design). */
.g4g-logo__img { max-width: 160px; height: auto; display: block; }

/* --- Chiffres-clés ---------------------------------------------------- */
.g4g-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--g4g-space-6);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 600px) {
  .g4g-stats { grid-template-columns: repeat(4, 1fr); }
}
.g4g-stat { display: flex; flex-direction: column; gap: var(--g4g-space-1); text-align: center; }
.g4g-stat__value { font-size: var(--g4g-text-2xl); font-weight: 700; color: var(--g4g-primary); }
.g4g-stat__label { font-size: var(--g4g-text-sm); color: var(--g4g-text-muted); }

/* --- Galerie ---------------------------------------------------------- */
.g4g-gallery {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--g4g-space-4);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 600px) {
  .g4g-gallery { grid-template-columns: repeat(3, 1fr); }
}
.g4g-gallery__img { width: 100%; height: auto; display: block; border-radius: var(--g4g-radius-md); }

/* --- Séparateur ------------------------------------------------------- */
.g4g-separator { border: 0; margin-block: var(--g4g-space-8); }
.g4g-separator--ligne { border-top: 1px solid var(--g4g-border); }
.g4g-separator--espace-large { margin-block: var(--g4g-space-12); }

/* --- Placeholder d'image (démos du styleguide sans média réel) -------- */
.g4g-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--g4g-space-12);
  padding: var(--g4g-space-6);
  background: var(--g4g-surface-alt);
  border: 1px dashed var(--g4g-border);
  border-radius: var(--g4g-radius-md);
  color: var(--g4g-text-muted);
  font-size: var(--g4g-text-sm);
}
.g4g-placeholder--avatar {
  width: var(--g4g-space-12);
  height: var(--g4g-space-12);
  min-height: 0;
  padding: 0;
  border-radius: var(--g4g-radius-pill);
}

/* ===================================================================== */
/* Sections dynamiques (E5b) — interactives & région-conscientes.         */
/* 100 % tokens ; les `<details>` restent stylables sans JS. Claude Design */
/* affinera valeurs et layouts sans toucher aux noms de classes.          */
/* ===================================================================== */

/* --- FAQ (details/summary natifs) ------------------------------------ */
.g4g-faq__list { display: grid; gap: var(--g4g-space-3); }
.g4g-faq__item {
  border: 1px solid var(--g4g-border);
  border-radius: var(--g4g-radius-md);
  background: var(--g4g-surface);
  padding: var(--g4g-space-4) var(--g4g-space-6);
}
.g4g-faq__question {
  cursor: pointer;
  font-weight: 600;
  color: var(--g4g-text);
}
.g4g-faq__question:focus-visible {
  outline: 2px solid var(--g4g-accent);
  outline-offset: 2px;
}
.g4g-faq__answer { margin-top: var(--g4g-space-3); color: var(--g4g-text-muted); }

/* --- Compte à rebours ODD (Agenda 2030) ------------------------------ */
.g4g-countdown {
  text-align: center;
  padding: var(--g4g-space-8) var(--g4g-space-6);
  background: var(--g4g-surface-alt);
  border: 1px solid var(--g4g-border);
  border-radius: var(--g4g-radius-md);
}
.g4g-countdown__intro { color: var(--g4g-text-muted); margin: 0 0 var(--g4g-space-6); }
.g4g-countdown__lead { font-size: var(--g4g-text-lg); margin: 0 0 var(--g4g-space-6); }
.g4g-countdown__units {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--g4g-space-6);
}
.g4g-countdown__unit { display: flex; flex-direction: column; gap: var(--g4g-space-1); min-width: var(--g4g-space-12); }
.g4g-countdown__value {
  font-family: var(--g4g-font-heading);
  font-size: var(--g4g-text-2xl);
  font-variant-numeric: tabular-nums;
  color: var(--g4g-primary);
}
.g4g-countdown__label { font-size: var(--g4g-text-xs); color: var(--g4g-text-muted); text-transform: uppercase; }

/* --- Grille des 17 ODD (details natifs) ------------------------------ */
.g4g-sdg-grid__intro { color: var(--g4g-text-muted); margin: 0 0 var(--g4g-space-6); }
.g4g-sdg-grid__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--g4g-space-3);
  grid-template-columns: repeat(2, 1fr); /* mobile : 2 colonnes */
}
/* 600px / 900px = points de rupture structurels. à tokeniser (Claude Design). */
@media (min-width: 600px) { .g4g-sdg-grid__list { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .g4g-sdg-grid__list { grid-template-columns: repeat(4, 1fr); } }
.g4g-sdg {
  border: 1px solid var(--g4g-border);
  border-radius: var(--g4g-radius-md);
  background: var(--g4g-surface);
  padding: var(--g4g-space-3) var(--g4g-space-4);
  height: 100%;
}
.g4g-sdg__summary { cursor: pointer; display: flex; align-items: center; gap: var(--g4g-space-2); }
.g4g-sdg__summary:focus-visible { outline: 2px solid var(--g4g-accent); outline-offset: 2px; }
.g4g-sdg__name { font-size: var(--g4g-text-sm); }
.g4g-sdg__body { margin-top: var(--g4g-space-2); color: var(--g4g-text-muted); font-size: var(--g4g-text-sm); }

/* --- Sections région-conscientes : listes en cartes ------------------ */
/* Réutilisent `.g4g-cards` (grille) + `.g4g-card` (base.css). Titres/liens : */
.g4g-regional-news__title,
.g4g-featured__title,
.g4g-space__name { font-size: var(--g4g-text-lg); margin: 0 0 var(--g4g-space-2); }
.g4g-regional-news__date { font-size: var(--g4g-text-xs); color: var(--g4g-text-muted); margin: 0 0 var(--g4g-space-2); }
.g4g-regional-news__intro,
.g4g-featured__city,
.g4g-space__desc { color: var(--g4g-text-muted); }
.g4g-regional-news__all,
.g4g-featured__all { margin-top: var(--g4g-space-6); }
.g4g-space__meta { font-size: var(--g4g-text-xs); margin-top: var(--g4g-space-2); }

/* --- prefers-reduced-motion : pas d'animation d'ouverture -------------- */
@media (prefers-reduced-motion: reduce) {
  .g4g-faq__item, .g4g-sdg { transition: none; }
}

/* ===================================================================== */
/* SITE VITRINE — PAGES D'ATTERRISSAGE PLEINE LARGEUR (calque .g4g-landing)*/
/* Lot 1 : méthode-4p (pilote) + accueil (amiral). Traduit les maquettes  */
/* « G4G Site - Accueil » et « G4G Site - Méthode 4P » (desktop & mobile)  */
/* en bandes + sections. 100 % `var(--g4g-*)` pour les COULEURS (zéro hex  */
/* en dur, CSP stricte). Les tailles d'AFFICHAGE dépassent l'échelle de    */
/* tokens (max 34 px) → clamp() littéraux, comme les maquettes.            */
/*                                                                        */
/* PLEIN CADRE PAR LE PADDING : le <main class="g4g-landing"> sort du      */
/* conteneur 1100 px ; chaque bande est pleine largeur et se recentre via  */
/* padding-inline: max(gouttière, (100% - largeur)/2). Aucun 100vw ni      */
/* marge négative → jamais de débordement horizontal. Wagtail enveloppe    */
/* chaque bloc dans `.block-<nom>` ; on cible donc `.g4g-section` (blocs   */
/* section) et `.block-paragraph` (texte riche hérité) directement.        */
/* Ce calque NE s'applique QU'aux pages `.g4g-landing` : les autres pages  */
/* éditoriales (body_page.html, conteneur 1100 px) gardent le squelette    */
/* ci-dessus intact.                                                       */
/* ===================================================================== */

.g4g-landing {
  /* [2026-09-09 · Lot 6] Largeur de contenu par défaut ÉLARGIE (demande Alexandre : « les
     sections qui n'occupent pas un espace full width, plus larges »). Réglable PAR SECTION au
     builder (classes .g4g-cms-cw-*). Les sections bespoke à max-width fixe (progdiag, ttmn,
     statsband…) ne consomment pas --lp-width et restent inchangées. */
  --lp-width: 1320px;                  /* largeur de contenu (élargie ; maquettes = 1220) */
  --lp-gutter: clamp(20px, 4vw, 28px); /* gouttière latérale desk/mobile */
  --lp-prose: 68ch;                    /* mesure de lecture du texte riche */
  --lp-py: clamp(52px, 8vw, 104px);    /* respiration verticale des bandes */
  --lp-ease: cubic-bezier(0.16, 0.84, 0.44, 1);
  /* Échelle d'affichage (au-dessus des tokens de taille) — graisse Light.
   * Échelle INTERMÉDIAIRE validée par Claude Design (§13, 2026-08-03) : un cran
   * au-dessus du Lot 1, un cran sous le plafond des maquettes (~76 px) — pour
   * absorber nos titres qui sont des PHRASES validées, plus longues que les
   * accroches courtes du proto (au plafond, une phrase longue devient trop haute). */
  --lp-h1: clamp(38px, 5.2vw, 72px);
  --lp-h2: clamp(34px, 4.2vw, 56px); /* [2026-09-07] standard unifié des titres de section (demande Alexandre) */
  --lp-h2-cta: clamp(34px, 4.2vw, 56px);

  max-width: none;
  margin: 0;
  padding: 0;
  width: 100%;
  /* Base blanche de la page : les bandes peignent leur propre surface/sunken,
   * mais les blocs de texte riche (transparents) laisseraient voir le gris du
   * <body> (--g4g-surface-alt) → filet blanc sous la prose. */
  background: var(--g4g-surface);
  /* Garde-fou : une bande pleine largeur ne peut jamais créer de scroll
   * horizontal (l'en-tête collant vit hors du <main>, non affecté). */
  overflow-x: clip;
}

/* Messages Django (rares sur une landing) : recentrés comme le contenu. */
.g4g-landing .g4g-messages {
  max-width: var(--lp-width);
  margin-inline: auto;
  padding-inline: var(--lp-gutter);
}

/* --- Bande pleine largeur + contenu recentré -------------------------- */
.g4g-landing .g4g-section {
  margin-block: 0;
  padding-block: var(--lp-py);
  padding-inline: max(var(--lp-gutter), calc((100% - var(--lp-width)) / 2));
  background: var(--g4g-surface);
}
/* [2026-09-08] Réglages PAR SECTION posés depuis le builder (classes sur le <section> via
   content_targeting.targeted_body — CSP-safe, aucun style inline). Espace vertical (paliers)
   + couleur de fond (palette). Spécificité 0,3,0 → l'emporte sur les fonds/paddings propres
   d'une section (0,2,0). 0 / « default » = aucune classe = valeurs par défaut inchangées. */
.g4g-landing .g4g-section.g4g-cms-py-1 { padding-block: clamp(8px, 1.4vw, 18px); }
.g4g-landing .g4g-section.g4g-cms-py-2 { padding-block: clamp(16px, 2.6vw, 30px); }
.g4g-landing .g4g-section.g4g-cms-py-3 { padding-block: clamp(28px, 3.8vw, 48px); }
.g4g-landing .g4g-section.g4g-cms-py-4 { padding-block: clamp(44px, 5.4vw, 76px); }
.g4g-landing .g4g-section.g4g-cms-py-5 { padding-block: clamp(60px, 7.2vw, 104px); }
.g4g-landing .g4g-section.g4g-cms-py-6 { padding-block: clamp(80px, 9.5vw, 140px); }
/* [2026-09-08] Paliers d'espacement supplémentaires (demande Alexandre : aller plus loin que 6). */
.g4g-landing .g4g-section.g4g-cms-py-7 { padding-block: clamp(104px, 12vw, 184px); }
.g4g-landing .g4g-section.g4g-cms-py-8 { padding-block: clamp(130px, 15vw, 240px); }
.g4g-landing .g4g-section.g4g-cms-bg-blanc { background: var(--g4g-surface); }
.g4g-landing .g4g-section.g4g-cms-bg-gris-clair { background: var(--g4g-surface-sunken); }
.g4g-landing .g4g-section.g4g-cms-bg-gris { background: var(--g4g-surface-alt); }
.g4g-landing .g4g-section.g4g-cms-bg-bleu-clair { background: var(--g4g-primary-soft); }
/* [2026-09-08 · #13] Couleur de titre SECONDAIRE (auto sur fond non blanc). Quand une section
   a un fond de couleur réglé au builder (g4g-cms-bg-*), ses titres passent à la couleur
   secondaire du panneau typographie (--g4g-hN-color-2). Vide = aucune bascule : `inherit`
   pour les h1-h4, couleur d'origine pour les titres bespoke qui consomment --g4g-title-color. */
.g4g-landing .g4g-section:is(.g4g-cms-bg-gris, .g4g-cms-bg-gris-clair, .g4g-cms-bg-bleu-clair) {
  --g4g-h1-color: var(--g4g-h1-color-2, inherit);
  --g4g-h2-color: var(--g4g-h2-color-2, inherit);
  --g4g-h3-color: var(--g4g-h3-color-2, inherit);
  --g4g-h4-color: var(--g4g-h4-color-2, inherit);
  --g4g-title-color: var(--g4g-h2-color-2, var(--g4g-text));
}
/* [2026-09-09 · Lot 6] Fond HEX PERSONNALISÉ FONCÉ (détection de luminance côté serveur →
   classe g4g-cms-bg-hex-dark) : texte + titres en clair PAR DÉFAUT (lisibilité garantie même
   sans couleur secondaire réglée), et bascule sur la couleur secondaire du panneau typo si
   définie. La couleur de fond elle-même est posée par `.g4g-section[data-g4g-sec="<id>"]` (bloc <style nonce>). */
.g4g-landing .g4g-section.g4g-cms-bg-hex-dark {
  color: var(--g4g-primary-contrast);
  --g4g-h1-color: var(--g4g-h1-color-2, var(--g4g-primary-contrast));
  --g4g-h2-color: var(--g4g-h2-color-2, var(--g4g-primary-contrast));
  --g4g-h3-color: var(--g4g-h3-color-2, var(--g4g-primary-contrast));
  --g4g-h4-color: var(--g4g-h4-color-2, var(--g4g-primary-contrast));
  --g4g-title-color: var(--g4g-h2-color-2, var(--g4g-primary-contrast));
}
/* [2026-09-09] Sections au fond FONCÉ « en dur » (fond posé par le CSS du bloc, pas une
   classe g4g-cms-bg-*) : elles ne déclenchent pas la bascule ci-dessus, donc leur titre
   n'héritait jamais de la couleur H2 secondaire réglée au builder (demande Alexandre : le
   titre des témoignages ne changeait pas de couleur sur son fond bleu foncé). On rebranche
   explicitement leur titre sur --g4g-h2-color-2 ; repli = contraste clair d'origine, donc
   AUCUN changement visuel tant que la couleur secondaire n'est pas réglée. */
.g4g-landing .g4g-ttmn {
  --g4g-h2-color: var(--g4g-h2-color-2, var(--g4g-primary-contrast));
  --g4g-title-color: var(--g4g-h2-color-2, var(--g4g-primary-contrast));
}
/* [2026-09-07] Espacement réduit sous la section Répertoire/Communauté et sous les articles
   « à la une » (demande Alexandre : les rapprocher du séparateur suivant). En attendant le
   réglage d'espace PAR SECTION dans le builder (chantier dédié). */
.g4g-landing .g4g-repcomm { padding-bottom: clamp(18px, 2.4vw, 32px); }
.g4g-landing .g4g-regional-news { padding-bottom: clamp(18px, 2.4vw, 32px); }

/* [p2] Révélation au défilement des sections d'accueil : MIGRÉE vers le socle
   motion (attribut `data-anim` posé sur chaque <section> non-héro + cascade
   `data-anim-group` des grilles). Voir static/css/motion.css + static/js/motion.js.
   L'ancien mécanisme `.g4g-reveal`/`is-revealed` (sections.js) a été retiré. */

/* Surlignage animé du mot-accent du titre du HÉRO (« G4G en mouvement », Lot 1).
   Le fragment accentué du titre RichText est déjà en <b>. Trait « purpose » qui
   grandit de 0→100 % au chargement, UNIQUEMENT en mode motion (via le keyframe
   g4gMotionHighlight de motion.css) ; sinon (sobre / mouvement réduit / sans JS) le
   surlignage est présent, statique. Le trait passe DERRIÈRE le texte (background),
   le titre reste blanc lisible ; box-decoration-break clone → suit les retours ligne.
   NB : le héro est sur fond sombre (--g4g-ink) — teinte/opacité à valider en QA. */
.g4g-hero-media__title b,
.g4g-hero-media__title strong,
.g4g-hero-media__title span {
  background-image: linear-gradient(
    color-mix(in srgb, var(--g4g-purpose) 38%, transparent),
    color-mix(in srgb, var(--g4g-purpose) 38%, transparent)
  );
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 100% 0.34em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* Le pont d'édition (titre RichText) peut envelopper le contenu d'un <p> à
   l'enregistrement : on neutralise sa marge pour préserver la mise en page du héro. */
.g4g-hero-media__title p { margin: 0; }
html.g4g-motion .g4g-hero-media__title b,
html.g4g-motion .g4g-hero-media__title strong,
html.g4g-motion .g4g-hero-media__title span {
  background-size: 0% 0.34em;
  animation: g4gMotionHighlight var(--g4g-dur-highlight) var(--g4g-ease-out) 0.9s forwards;
}

/* Tons de bande par type de bloc : rythme surface ↔ surface-sunken des
 * maquettes (l'accueil alterne, la méthode ponctue). */
.g4g-landing .g4g-columns,
.g4g-landing .g4g-featured,
.g4g-landing .g4g-cta-band {
  background: var(--g4g-surface-sunken);
}
/* Filet de séparation à chaque transition de bande (comme les maquettes).
 * [p37] `regional-news` RETIRÉ de la liste : l'article vedette et « Restez à
 * l'affût de nos dernières nouvelles » forment un même ensemble Nouvelles — le
 * filet qui les coupait a été supprimé (demande Alexandre). */
.g4g-landing .g4g-columns,
.g4g-landing .g4g-feature-grid,
.g4g-landing .g4g-logos-section,
.g4g-landing .g4g-featured,
.g4g-landing .g4g-cta-band {
  border-top: 1px solid var(--g4g-border);
}

/* --- Texte riche hérité (blocs paragraph) ----------------------------- */
/* Mesure de lecture confortable, recentrée sous les bandes. */
.g4g-landing__body > .block-paragraph {
  max-width: calc(var(--lp-prose) + 2 * var(--lp-gutter));
  margin-inline: auto;
  padding-block: clamp(28px, 4vw, 48px);
  padding-inline: var(--lp-gutter);
  color: var(--g4g-text);
  font-size: var(--g4g-text-md);
  line-height: var(--g4g-leading-normal);
}
.g4g-landing__body > .block-paragraph > :first-child { margin-top: 0; }
.g4g-landing__body > .block-paragraph > :last-child { margin-bottom: 0; }
.g4g-landing__body > .block-paragraph p { margin: 0 0 var(--g4g-space-4); color: var(--g4g-text-muted); }
.g4g-landing__body > .block-paragraph h2,
.g4g-landing__body > .block-paragraph h3 {
  font-weight: var(--g4g-weight-semibold);
  letter-spacing: var(--g4g-tracking-tight);
  color: var(--g4g-text);
  margin: var(--g4g-space-8) 0 var(--g4g-space-4);
}
.g4g-landing__body > .block-paragraph h3 { font-size: var(--g4g-text-xl); }
.g4g-landing__body > .block-paragraph ul,
.g4g-landing__body > .block-paragraph ol { margin: 0 0 var(--g4g-space-4); padding-left: var(--g4g-space-6); }
.g4g-landing__body > .block-paragraph li { margin: 0 0 var(--g4g-space-2); color: var(--g4g-text-muted); }

/* --- Titres d'affichage (Light, tracking serré) ----------------------- */
.g4g-landing .g4g-hero__heading,
.g4g-landing .g4g-section__heading,
.g4g-landing .g4g-cta-band__heading {
  font-family: var(--g4g-font-heading);
  /* [2026-09-08] Poids HOMOGÉNÉISÉ sur le titre de référence .g4g-methode-4p__title
     (dont le <span> couvre tout le titre en semibold). Sans <span>, ces titres nus
     rendaient en light (300) → visiblement plus fins. Demande Alexandre : même gras. */
  font-weight: var(--g4g-weight-semibold);
  letter-spacing: -0.025em;
  color: var(--g4g-text);
  text-wrap: balance;
  overflow-wrap: break-word; /* durcissement : un mot très long ne déborde pas */
}
.g4g-landing .g4g-hero__heading { font-size: calc(var(--lp-h1) * var(--g4g-title-scale, 1)); line-height: 1.04; }
.g4g-landing .g4g-section__heading {
  font-size: calc(var(--lp-h2) * var(--g4g-title-scale, 1)); /* [2026-09-07] suit le réglage Typographie (échelle titres) */
  line-height: 1.06;
  max-width: 26ch;
  margin: 0 0 clamp(28px, 4vw, 48px);
}

/* --- Héro ------------------------------------------------------------- */
.g4g-landing .g4g-hero {
  display: block; /* remplace la grille + l'aspect « carte » du squelette */
  border: 0;
  border-radius: 0;
  background: var(--g4g-surface);
}
.g4g-landing .g4g-hero__body { max-width: 62ch; }
.g4g-landing .g4g-hero__heading { margin: 0 0 var(--g4g-space-5); }
.g4g-landing .g4g-hero__subheading {
  font-size: var(--g4g-text-lg);
  line-height: 1.6;
  color: var(--g4g-text-muted);
  max-width: 56ch;
  margin: 0 0 var(--g4g-space-8);
  text-wrap: pretty;
}
.g4g-landing .g4g-hero__actions { margin: 0; display: flex; flex-wrap: wrap; gap: var(--g4g-space-3); }
.g4g-landing .g4g-hero__media { margin-top: clamp(32px, 5vw, 56px); }
.g4g-landing .g4g-hero__image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--g4g-radius-lg);
}

/* --- Grille de fonctionnalités (cartes de marque) --------------------- */
.g4g-landing .g4g-feature-grid { background: var(--g4g-surface); }
.g4g-landing .g4g-feature {
  background: var(--g4g-surface-sunken); /* les cartes ressortent sur la bande blanche */
  border: 1px solid var(--g4g-border);
  border-radius: var(--g4g-radius-lg);
  box-shadow: none;
  padding: var(--g4g-space-6);
  gap: var(--g4g-space-3);
  height: 100%;
  min-width: 0; /* durcissement : un mot long ne peut pas élargir la piste de grille */
}
.g4g-landing .g4g-feature__title,
.g4g-landing .g4g-featured__title,
/* Maquette : titre de carte de nouvelle en 500 (medium), pas le gras h3 par défaut
   (divergence signalée au backlog Design — site-accueil.mapping.json rôle nouvelle-titre). */
.g4g-landing .g4g-regional-news__title { overflow-wrap: break-word; font-weight: var(--g4g-weight-medium); }
.g4g-landing .g4g-feature__icon img { width: 56px; height: auto; }
.g4g-landing .g4g-feature__title {
  font-size: var(--g4g-text-md);
  font-weight: var(--g4g-weight-semibold);
  letter-spacing: var(--g4g-tracking-tight);
  color: var(--g4g-text);
}
.g4g-landing .g4g-feature__text { color: var(--g4g-text-muted); line-height: var(--g4g-leading-normal); }

/* Grille des 4 P (unique grille à 4 colonnes) : filet supérieur à la couleur
 * IDENTITAIRE du pilier (ordre PERSONNES / PLANÈTE / PROSPÉRITÉ / POURQUOI).
 * La couleur vit dans le FILET, pas dans le texte : le jaune « Pourquoi »
 * (--g4g-purpose) échoue le contraste AA en petit texte (cf. tokens.css) —
 * même parti que les
 * maquettes (« la couleur du pilier vit dans la pastille/le filet, pas dans le
 * texte fin »). */
.g4g-landing .g4g-cards--cols-4 > li:nth-child(1) { border-top: 3px solid var(--g4g-people); }
.g4g-landing .g4g-cards--cols-4 > li:nth-child(2) { border-top: 3px solid var(--g4g-planet); }
.g4g-landing .g4g-cards--cols-4 > li:nth-child(3) { border-top: 3px solid var(--g4g-prosperity); }
.g4g-landing .g4g-cards--cols-4 > li:nth-child(4) { border-top: 3px solid var(--g4g-purpose); }

/* La grille 4P reste en 2×2 sur mobile (comme la maquette mobile), pas une seule
 * colonne ; 4 de front dès 900px. (Spécificité 0,2,0 > squelette 0,1,0.) */
.g4g-landing .g4g-cards--cols-4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) {
  .g4g-landing .g4g-cards--cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* --- Colonnes de texte riche ------------------------------------------ */
.g4g-landing .g4g-columns__grid {
  gap: clamp(24px, 3vw, 40px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.g4g-landing .g4g-columns__col { color: var(--g4g-text-muted); line-height: var(--g4g-leading-normal); }
.g4g-landing .g4g-columns__col > :first-child { margin-top: 0; }

/* --- Mur de partenaires (grille statique, centrée) -------------------- */
/* La maquette anime un bandeau défilant (JS bespoke) → hors périmètre ;
 * rendu statique et responsive ici (amélioration progressive). */
.g4g-landing .g4g-logos-section { background: var(--g4g-surface); text-align: center; }
.g4g-landing .g4g-logos-section .g4g-section__heading {
  font-size: var(--g4g-text-lg);
  font-weight: var(--g4g-weight-medium);
  letter-spacing: normal;
  color: var(--g4g-text);
  max-width: 52ch;
  margin: 0 auto clamp(24px, 3vw, 40px);
}
.g4g-landing .g4g-logos {
  justify-content: center;
  gap: clamp(24px, 4vw, 48px);
  row-gap: clamp(20px, 3vw, 36px);
}
.g4g-landing .g4g-logo__img { max-height: 54px; width: auto; max-width: 160px; object-fit: contain; }

/* --- Répertoire en vedette + Nouvelles régionales (cartes) ------------- */
.g4g-landing .g4g-featured__item,
.g4g-landing .g4g-regional-news__item {
  border: 1px solid var(--g4g-border);
  border-radius: var(--g4g-radius-lg);
  box-shadow: none;
  padding: var(--g4g-space-6);
  height: 100%;
  min-width: 0; /* durcissement grille (idem cartes 4P) */
  transition: transform 140ms var(--lp-ease), box-shadow 140ms var(--lp-ease);
}
/* Les cartes contrastent leur bande : blanches sur bande sunken, sunken sur
 * bande blanche. */
.g4g-landing .g4g-featured__item { background: var(--g4g-surface); }
.g4g-landing .g4g-regional-news__item { background: var(--g4g-surface-sunken); }
.g4g-landing .g4g-featured__item:hover,
.g4g-landing .g4g-regional-news__item:hover {
  transform: translateY(-2px);
  box-shadow: var(--g4g-shadow-md);
}
/* Vignette de la carte « Nouvelles régionales » (grille accueil) : image en plein cadre
   en tête (marges négatives = elle borde la carte), coins arrondis via overflow, zoom doux
   au survol. Repli = poster de repli (fallback_cover_url). */
.g4g-landing .g4g-regional-news__item { display: flex; flex-direction: column; overflow: hidden; }
.g4g-regional-news__media {
  display: block;
  margin: calc(-1 * var(--g4g-space-6)) calc(-1 * var(--g4g-space-6)) var(--g4g-space-4);
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--g4g-surface-alt);
}
.g4g-regional-news__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--g4g-dur-base) var(--g4g-ease-out); }
.g4g-landing .g4g-regional-news__item:hover .g4g-regional-news__img { transform: scale(1.04); }
.g4g-landing .g4g-featured__title a,
.g4g-landing .g4g-regional-news__title a { text-decoration: none; color: var(--g4g-text); }
.g4g-landing .g4g-featured__title a:hover,
.g4g-landing .g4g-regional-news__title a:hover { color: var(--g4g-primary); }
.g4g-landing .g4g-featured__all,
/* [2026-10-06] « Voir toutes les nouvelles » aligné à DROITE, au bord des cartes (demande Alexandre). */
.g4g-landing .g4g-regional-news__all { margin-top: clamp(28px, 3.5vw, 44px); text-align: right; }

/* --- Bande d'appel à l'action (centrée) ------------------------------- */
.g4g-landing .g4g-cta-band {
  border: 0;
  border-top: 1px solid var(--g4g-border);
  border-radius: 0;
  align-items: center;
  text-align: center;
  gap: var(--g4g-space-5);
}
.g4g-landing .g4g-cta-band__heading {
  font-size: calc(var(--lp-h2-cta) * var(--g4g-title-scale, 1)); /* [2026-09-07] standardisé + suit le réglage Typographie */
  line-height: 1.08;
  max-width: 22ch;
  margin: 0;
}
.g4g-landing .g4g-cta-band__text {
  font-size: var(--g4g-text-md);
  color: var(--g4g-text-muted);
  max-width: 52ch;
  margin: 0;
}

/* --- Boutons de héro / de bande : grande pilule (Design System ≥ 52 px) ----- */
/* SCOPÉ aux pages d'atterrissage : les CTA des autres pages éditoriales gardent
 * la taille de base (44 px). */
.g4g-landing .g4g-hero__actions .g4g-btn,
.g4g-landing .g4g-cta-band .g4g-btn {
  min-height: 52px;
  padding: var(--g4g-space-4) var(--g4g-space-8);
  font-size: var(--g4g-text-md);
}
/* Rangée des 2 boutons de la bande CTA (primaire plein + secondaire contour). Sans ce
   flex, les deux <a> s'empileraient (parent en flex column). */
.g4g-cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--g4g-space-3); justify-content: center; }

/* [2026-10-06] Fond ANIMÉ de formes géométriques dérivantes (boucle infinie) de la bande CTA
   (demande Alexandre). Décoratif, DERRIÈRE le texte (z-index:-1 sous isolation), 100 % CSS
   (CSP-safe). Teintes 4P translucides → le texte reste lisible. Stoppé en reduced-motion. */
.g4g-landing .g4g-cta-band { position: relative; isolation: isolate; overflow: hidden; }
.g4g-landing .g4g-cta-band__decor { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.g4g-landing .g4g-cta-deco { position: absolute; display: block; will-change: transform; }
.g4g-landing .g4g-cta-deco--circle { top: 14%; left: 7%; width: 118px; height: 118px; border-radius: 50%;
  background: color-mix(in srgb, var(--g4g-planet) 16%, transparent); animation: g4gCtaDriftA 24s ease-in-out infinite alternate; }
.g4g-landing .g4g-cta-deco--ring { top: 56%; left: 13%; width: 84px; height: 84px; border-radius: 50%;
  border: 11px solid color-mix(in srgb, var(--g4g-people) 18%, transparent);
  animation: g4gCtaDriftB 28s ease-in-out infinite alternate; animation-delay: -6s; }
.g4g-landing .g4g-cta-deco--square { top: 18%; right: 9%; width: 94px; height: 94px; border-radius: 22px;
  background: color-mix(in srgb, var(--g4g-prosperity) 15%, transparent);
  animation: g4gCtaDriftC 26s ease-in-out infinite alternate; animation-delay: -10s; }
.g4g-landing .g4g-cta-deco--pill { bottom: 15%; right: 15%; width: 126px; height: 58px; border-radius: 999px;
  background: color-mix(in srgb, var(--g4g-purpose) 18%, transparent);
  animation: g4gCtaDriftA 31s ease-in-out infinite alternate-reverse; animation-delay: -4s; }
.g4g-landing .g4g-cta-deco--dot { top: 38%; right: 28%; width: 34px; height: 34px; border-radius: 50%;
  background: color-mix(in srgb, var(--g4g-planet) 22%, transparent);
  animation: g4gCtaDriftB 20s ease-in-out infinite alternate; animation-delay: -12s; }
@keyframes g4gCtaDriftA { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(30px, -26px) rotate(16deg); } }
@keyframes g4gCtaDriftB { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(-34px, 22px) rotate(-12deg); } }
@keyframes g4gCtaDriftC { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(22px, 30px) rotate(-18deg); } }
@media (prefers-reduced-motion: reduce) { .g4g-landing .g4g-cta-deco { animation: none !important; } }

/* --- Focus visible de marque sur les liens de cartes/sections --------------- */
/* Cohérence avec les boutons et les liens de section du squelette (WCAG 2.4.7). */
.g4g-landing .g4g-featured__title a:focus-visible,
.g4g-landing .g4g-regional-news__title a:focus-visible,
.g4g-landing .g4g-featured__all a:focus-visible,
.g4g-landing .g4g-regional-news__all a:focus-visible {
  outline: 2px solid var(--g4g-accent);
  outline-offset: 2px;
  border-radius: var(--g4g-radius-sm);
}

/* --- prefers-reduced-motion : pas de translation au survol ------------- */
@media (prefers-reduced-motion: reduce) {
  .g4g-landing .g4g-featured__item,
  .g4g-landing .g4g-regional-news__item { transition: none; }
  .g4g-landing .g4g-featured__item:hover,
  .g4g-landing .g4g-regional-news__item:hover { transform: none; }
}

/* ===================================================================== */
/* SITE VITRINE — LOT 2 « institutionnel » (À propos / Équipe / ODD /      */
/* Certification ESG). Réutilise le calque `.g4g-landing` ci-dessus ;      */
/* n'ajoute que les patterns ABSENTS du Lot 1 : titre porté par un bloc    */
/* « titre » hérité (pages sans héro), cartes MEMBRES (portraits), compte  */
/* à rebours ODD et grille des 17 ODD. 100 % tokens, scopé `.g4g-landing`. */
/* ===================================================================== */

/* --- Titre d'affichage porté par un bloc « titre » hérité -------------- */
/* Pages sans héro (Équipe, ODD) : le 1er bloc est un `heading` hérité qui
 * rend du texte brut dans `.block-heading`. On le promeut en grand titre
 * Light, comme un héro. `:first-child` : seul le titre d'OUVERTURE est promu
 * (un futur bloc « titre » en milieu de page ne s'affichera pas en 68 px). */
.g4g-landing__body > .block-heading:first-child {
  padding-block: var(--lp-py);
  padding-inline: max(var(--lp-gutter), calc((100% - var(--lp-width)) / 2));
  font-family: var(--g4g-font-heading);
  font-weight: var(--g4g-weight-light);
  font-size: var(--lp-h1);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--g4g-text);
  text-wrap: balance;
}

/* --- Citation en exergue dans le texte riche (pull-quote) -------------- */
/* Prospectif : aucun contenu semé actuel ne contient de <blockquote> (le récit
 * « À propos » met la phrase-signature dans un <p>). La règle s'active dès qu'un
 * éditeur ajoute une citation ; enrober une phrase du récit = décision éditoriale
 * (fiche Design). */
.g4g-landing__body > .block-paragraph blockquote {
  margin: var(--g4g-space-6) 0;
  padding-left: var(--g4g-space-5);
  border-left: 4px solid var(--g4g-accent);
  font-size: clamp(20px, 2.2vw, 27px);
  line-height: 1.4;
  letter-spacing: -0.014em;
  font-weight: var(--g4g-weight-light);
  color: var(--g4g-text);
  text-wrap: pretty;
}
.g4g-landing__body > .block-paragraph blockquote p { margin: 0; color: inherit; font-size: inherit; }

/* --- Cartes MEMBRES (page Équipe : feature_grid 2 colonnes) ------------ */
/* Portrait en tête + filet identitaire 4P. Positionnel (seule grille à 2
 * colonnes du site vitrine) : André → Planète, Rock → Prospérité. */
.g4g-landing .g4g-cards--cols-2 > li:nth-child(1) { border-top: 3px solid var(--g4g-planet); }
.g4g-landing .g4g-cards--cols-2 > li:nth-child(2) { border-top: 3px solid var(--g4g-prosperity); }
.g4g-landing .g4g-cards--cols-2 .g4g-feature__icon { margin-bottom: var(--g4g-space-1); }
.g4g-landing .g4g-cards--cols-2 .g4g-feature__icon img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--g4g-radius-md);
}
.g4g-landing .g4g-cards--cols-2 .g4g-feature__title {
  font-size: var(--g4g-text-lg);
  font-weight: var(--g4g-weight-semibold);
}

/* --- Compte à rebours ODD (page ODD) : bande + tuiles de gros chiffres -- */
.g4g-landing .g4g-countdown {
  background: var(--g4g-surface-sunken);
  border: 0;
  border-top: 1px solid var(--g4g-border);
  border-radius: 0;
  text-align: center;
}
.g4g-landing .g4g-countdown__intro,
.g4g-landing .g4g-countdown__lead { max-width: 60ch; margin-inline: auto; }
.g4g-landing .g4g-countdown__units {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--g4g-space-3);
  max-width: 720px;
  margin-inline: auto;
}
/* Téléphones (y compris les grands, ~430 px) : 2×2 plutôt que 4 tuiles serrées.
 * Le décompte est un nombre à 4 chiffres (~1611 j jusqu'en 2028) : à 4 colonnes
 * sous ~560 px il remplit la tuile bord à bord. Repli 2×2 jusqu'à 560 px. */
@media (max-width: 560px) {
  .g4g-landing .g4g-countdown__units { grid-template-columns: repeat(2, 1fr); }
}
.g4g-landing .g4g-countdown__unit {
  min-width: 0;
  border: 1px solid var(--g4g-border);
  border-radius: var(--g4g-radius-md);
  background: var(--g4g-surface);
  padding: var(--g4g-space-4) var(--g4g-space-2);
}
.g4g-landing .g4g-countdown__value {
  font-size: clamp(34px, 6vw, 62px);
  line-height: 1;
  font-weight: var(--g4g-weight-semibold);
  letter-spacing: -0.02em;
  color: var(--g4g-primary);
  font-variant-numeric: tabular-nums;
}
.g4g-landing .g4g-countdown__label {
  margin-top: var(--g4g-space-2);
  font-size: var(--g4g-text-xs);
  font-weight: var(--g4g-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g4g-text-muted);
}

/* --- Grille des 17 ODD (page ODD) : bande + accordéons de marque -------- */
.g4g-landing .g4g-sdg-grid {
  background: var(--g4g-surface-sunken);
  border-top: 1px solid var(--g4g-border);
}
.g4g-landing .g4g-sdg-grid__intro { max-width: 52ch; }

/* --- Bandeau ODD (S9, accueil) : carte 2 colonnes + mosaïque des 17 ODD ONU --- */
.g4g-landing .g4g-odd-band {
  background: var(--g4g-surface);
  border-top: 1px solid var(--g4g-border);
}
.g4g-odd-band__card {
  max-width: 1220px;
  margin: 0 auto;
  border: none; /* [2026-09-07] encadré retiré — tout sur fond blanc (demande Alexandre) */
  border-radius: 0;
  background: transparent;
  padding: clamp(32px, 4vw, 52px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 52px);
  align-items: center;
}
.g4g-odd-band__eyebrow {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: var(--g4g-weight-semibold);
  color: var(--g4g-accent);
}
.g4g-odd-band__title {
  margin: 14px 0 0;
  font-size: calc(clamp(34px, 4.4vw, 58px) * var(--g4g-title-scale, 1));
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: var(--g4g-weight-light);
}
.g4g-odd-band__title span { font-weight: var(--g4g-weight-semibold); }
.g4g-odd-band__lede {
  margin: 20px 0 0;
  font-size: 17px;
  line-height: 1.65;
  color: var(--g4g-text-muted);
  max-width: 52ch;
  text-wrap: pretty;
}
.g4g-odd-band__cta {
  margin-top: 26px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 13px 26px;
  border-radius: 999px;
  background: var(--g4g-primary);
  color: var(--g4g-primary-contrast);
  font-size: 15px;
  font-weight: var(--g4g-weight-semibold);
  text-decoration: none;
}
.g4g-odd-band__cta:hover { background: var(--g4g-primary-hover); }
.g4g-odd-band__mosaic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.g4g-odd-band__tile {
  aspect-ratio: 1;
  border-radius: 6px;
  overflow: hidden;
  display: block;
  cursor: pointer;
  transition: transform 140ms cubic-bezier(0.16, 0.84, 0.44, 1);
}
.g4g-odd-band__tile:hover { transform: scale(1.08); }
.g4g-odd-band__tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.g4g-odd-band__tile-all {
  aspect-ratio: 1;
  border-radius: 6px;
  border: 1px dashed var(--g4g-border-strong);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: var(--g4g-weight-semibold);
  color: var(--g4g-text-muted);
  text-decoration: none;
}
@media (max-width: 768px) {
  .g4g-odd-band__card { grid-template-columns: 1fr; }
  /* [2026-10-16] Espaces manquants après la ponctuation du paragraphe, sur mobile seulement (signalé
     par Alexandre ; texte source correct). Coupure de ligne standard au lieu de `pretty`, dont le rendu
     mobile (Safari iOS) est le suspect. À confirmer sur téléphone. */
  .g4g-odd-band__lede { text-wrap: wrap; }
}

/* --- Logos clients (S10, accueil) : marquee 2 rangs animés (sens opposés) --- */
.g4g-landing .g4g-client-marquee {
  background: var(--g4g-surface);
  border-top: 1px solid var(--g4g-border);
  overflow: hidden;
}
/* [Lot 3] Partenaires — GRILLE (tous visibles d'un coup, plus de carrousel). Entrée en
   cascade (data-anim, motion.js) + micro-zoom au survol. En-tête = .g4g-client-marquee__head. */
/* [2026-09-04] Grille 2 rangs de 5 (10 logos, MEIE retiré) + logos nettement plus
   grands (demande Alexandre). Colonnes fixes à 5 sur desktop, repli 3 puis 2. */
/* [2026-10-06] 4 logos par rangée → 7 logos en 2 rangées (4 + 3), et LES RANGÉES SONT
   CENTRÉES (demande Alexandre : « les 2 rangées doivent être centrées »). Une grille CSS cale
   une rangée incomplète à gauche ; d'où un FLEX à retour à la ligne centré, cellules de largeur
   fixe = (100 % − gouttières) / colonnes : toute rangée incomplète est centrée, à chaque palier
   (4 → 3 → 2 colonnes) et quel que soit le nombre de logos. −0,1 px : marge d'arrondi, pour
   qu'une rangée pleine ne bascule jamais à la ligne. */
.g4g-partners__grid {
  --partners-cols: 4;
  --partners-gap: clamp(24px, 3vw, 52px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  /* [2026-09-08] Espace vertical entre les 2 rangées RÉDUIT (row-gap), espace
     horizontal conservé (column-gap) — demande Alexandre. */
  row-gap: clamp(8px, 1.2vw, 18px);
  column-gap: var(--partners-gap);
  max-width: 1200px;
  margin: clamp(24px, 3vw, 44px) auto 0;
  padding: 0 clamp(16px, 4vw, 40px);
}
@media (max-width: 900px) {
  .g4g-partners__grid { --partners-cols: 3; }
}
@media (max-width: 560px) {
  .g4g-partners__grid { --partners-cols: 2; }
}
.g4g-partners__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 150px; /* [2026-09-08] rangées resserrées (demande Alexandre) */
  flex: 0 0 calc((100% - (var(--partners-cols) - 1) * var(--partners-gap)) / var(--partners-cols) - 0.1px);
  min-width: 0;
}
.g4g-partners__cell img {
  max-height: clamp(135px, 13.2vw, 182px); /* [2026-09-08] logos +10% (demande Alexandre) */
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 0.3s ease;
}
.g4g-partners__cell:hover img { transform: scale(1.06); }
/* [2026-09-08] Logos clients — 2 RANGÉES qui défilent à l'infini (demande Alexandre, remplace
   la grille cascade), logos 2× plus gros. Défilement CSS pur : chaque rangée a son contenu
   DUPLIQUÉ → translateX(-50%) = une copie entière → boucle sans couture. Rangées en sens
   opposés ; pause au survol ; prefers-reduced-motion neutralise l'animation (garde-fou global). */
/* [2026-10-06] Espace entre les 2 rangées de logos clients réduit (demande Alexandre). */
.g4g-cmarquee { display: grid; gap: clamp(10px, 1.5vw, 20px); margin-top: clamp(28px, 3vw, 44px); }
.g4g-cmarquee__row {
  display: flex;
  width: max-content;
  align-items: center;
  will-change: transform;
  animation: g4gCMarquee 48s linear infinite;
}
.g4g-cmarquee__row--rev { animation-name: g4gCMarqueeRev; }
/* [2026-10-13] Boucle SANS SAUT (demande Alexandre : « les sliders de logo ne marchent pas bien »).
   La gouttière était un `gap` flex → aucune gouttière APRÈS la dernière cellule d'une copie, donc
   `translateX(-50%)` retombait au MILIEU de la gouttière entre les 2 copies (saut de gap/2 à chaque
   cycle). En portant la gouttière en `margin-inline-end` de CHAQUE cellule (fin de copie incluse),
   une copie = moitié EXACTE de la piste → -50 % aligne pile la 2ᵉ copie, boucle continue. */
.g4g-cmarquee__cell { margin-inline-end: clamp(40px, 5vw, 88px); }
/* [2026-09-08] Survol : plus d'arrêt SEC (animation-play-state) — le RALENTI puis la
   REPRISE PROGRESSIVE sont pilotés par motion.js (Web Animations, playbackRate en rampe). */
.g4g-cmarquee__cell { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.g4g-cmarquee__cell img {
  /* [2026-09-09] +10 % (demande QA) — était clamp(112px, 12vw, 156px) / min(340px, 62vw).
     [2026-10-16] encore +12 % sur bureau (demande Alexandre : « un peu plus gros »). */
  max-height: clamp(138px, 14.8vw, 193px);
  width: auto;
  max-width: min(420px, 72vw);
  height: auto;
  object-fit: contain;
}
/* [2026-10-14] Mobile : logos plus PETITS et plus RAPPROCHÉS (demande Alexandre : sur mobile les
   logos trop gros laissaient de grosses zones blanches, on ne voyait qu'un bout). Plus de logos
   visibles à la fois → bande dense, moins de blanc. */
@media (max-width: 560px) {
  .g4g-cmarquee__cell { margin-inline-end: 24px; }
  /* [2026-10-16] +35 % (demande Alexandre : « minimum 30 % sur mobile ») — était clamp(58px, 15vw, 88px) / 44vw. */
  .g4g-cmarquee__cell img { max-height: clamp(78px, 20vw, 119px); max-width: 60vw; }
}
@keyframes g4gCMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes g4gCMarqueeRev { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.g4g-client-marquee__head { text-align: center; padding: 0 28px; }
.g4g-client-marquee__eyebrow {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: var(--g4g-weight-semibold);
  color: var(--g4g-accent);
}
.g4g-client-marquee__title {
  margin: 12px 0 0;
  font-size: calc(clamp(28px, 3.4vw, 44px) * var(--g4g-title-scale, 1));
  line-height: 1.06;
  letter-spacing: -0.02em;
  font-weight: var(--g4g-weight-light);
}
.g4g-client-marquee__title span { font-weight: var(--g4g-weight-semibold); }
.g4g-client-marquee__caption {
  margin: 22px auto 0;
  padding: 0 28px;
  text-align: center;
  font-size: 12.5px;
  color: var(--g4g-text-subtle);
}



/* [QA 2026-09-01] Séparateurs graphiques entre grandes sections (demande Alexandre :
   « il manque des éléments graphiques entre les sections »). Bande décorative HORS
   FLUX visuel (aria-hidden, pointer-events:none), 4 formes 4P qui TRAVERSENT au
   défilement (parallaxe horizontale `data-px-x`, motion.js). Jamais au-dessus d'un
   texte/contrôle : la bande a sa propre hauteur, les formes vivent dedans. */
/* [Pt 9] Séparateur à formes devenu un bloc de section autonome : respiration
   verticale légère (le trait de formes `.g4g-sep` porte sa propre hauteur). */
.g4g-geo-sep { padding: clamp(20px, 4vw, 56px) 0 0; }
/* [Pt 2] Largeur de la boîte de titre — paliers en PX (plage large et VISIBLE), posés au
   curseur par l'éditeur (0 = auto = aucune classe). !important pour l'emporter sur les
   max-width de section ; margin-inline auto pour recentrer la boîte. */
/* margin-inline:auto en !important : sinon un `margin: X 0 0` d'un `__title` défini
   PLUS BAS dans la feuille (même spécificité 0,1,0) réinitialise les marges latérales
   à 0 et la boîte à largeur forcée se colle À GAUCHE au lieu de rester centrée
   (cas signalé sur la section Témoignages de l'accueil, 2026-09-09). */
.g4g-cms-tw-1 { max-width: 340px !important; margin-inline: auto !important; }
.g4g-cms-tw-2 { max-width: 480px !important; margin-inline: auto !important; }
.g4g-cms-tw-3 { max-width: 640px !important; margin-inline: auto !important; }
.g4g-cms-tw-4 { max-width: 820px !important; margin-inline: auto !important; }
.g4g-cms-tw-5 { max-width: 1000px !important; margin-inline: auto !important; }
.g4g-cms-tw-6 { max-width: 100% !important; margin-inline: auto !important; }
/* [Pt F] Taille des logos éditables (curseur, mêmes 6 paliers) — largeur en px, hauteur
   auto (ratio préservé) ; max-width:100% (reset) évite tout débordement sur mobile. */
.g4g-cms-iw-1 { width: 90px !important; height: auto !important; }
.g4g-cms-iw-2 { width: 130px !important; height: auto !important; }
.g4g-cms-iw-3 { width: 170px !important; height: auto !important; }
.g4g-cms-iw-4 { width: 220px !important; height: auto !important; }
.g4g-cms-iw-5 { width: 290px !important; height: auto !important; }
.g4g-cms-iw-6 { width: 380px !important; height: auto !important; }
/* [2026-09-09 · Lot 6] Largeur HORIZONTALE par section (demande Alexandre) : redéfinit --lp-width
   sur le <section> — hérité par ses enfants (padding de bande + max-width des `__inner`/`__head`).
   0 = aucune classe = largeur par défaut du site. Posé au curseur par l'éditeur (aperçu direct).
   Spécificité 0,3,0 (alignée sur py/bg). Sans effet sur les sections bespoke à max-width fixe. */
.g4g-landing .g4g-section.g4g-cms-cw-1 { --lp-width: 880px; }
.g4g-landing .g4g-section.g4g-cms-cw-2 { --lp-width: 1040px; }
.g4g-landing .g4g-section.g4g-cms-cw-3 { --lp-width: 1220px; }
.g4g-landing .g4g-section.g4g-cms-cw-4 { --lp-width: 1400px; }
.g4g-landing .g4g-section.g4g-cms-cw-5 { --lp-width: 1600px; }
.g4g-landing .g4g-section.g4g-cms-cw-6 { --lp-width: 100%; }
/* [2026-10-20] Bouton AJOUTÉ au builder (content_targeting._apply_section_button) : haut/bas × gauche/centre/droite,
   aligné sur la largeur de contenu ; couleurs forcées (une règle de section ne le rend jamais illisible). */
.g4g-secbtn{position:relative;z-index:2;display:flex;flex-wrap:wrap;justify-content:center;width:100%;max-width:var(--lp-width,1220px);margin:0 auto;padding-inline:var(--lp-gutter,20px);grid-column:1/-1;flex-basis:100%;box-sizing:border-box}
.g4g-secbtn--haut{margin-bottom:clamp(16px,2.4vw,28px)}
.g4g-secbtn--bas{margin-top:clamp(20px,3vw,36px)}
.g4g-secbtn--gauche{justify-content:flex-start}
.g4g-secbtn--droite{justify-content:flex-end}
.g4g-secbtn .g4g-btn--primary{background:var(--g4g-primary);color:var(--g4g-primary-contrast)}
.g4g-secbtn .g4g-btn--primary:hover{background:var(--g4g-surface);color:var(--g4g-primary)}
.g4g-secbtn .g4g-btn--secondary{color:var(--g4g-primary)}
.g4g-secbtn .g4g-secbtn__btn--clair{background:var(--g4g-surface);border-color:var(--g4g-surface);color:var(--g4g-primary)}
.g4g-secbtn .g4g-secbtn__btn--clair:hover{background:var(--g4g-primary-soft);border-color:var(--g4g-primary-soft);color:var(--g4g-primary)}
/* [QA 2026-09-10] Mêmes réglages builder (espace vertical + largeur + fond) AUSSI sur les blocs
   de BASE Texte (.g4g-texte) et Photo pleine largeur (.g4g-fullwidth-photo), qui ne portent pas
   .g4g-section — les paliers ci-dessus ne les visaient donc pas (demande Alexandre : réglages
   accessibles sur TOUS les blocs). Bloc ISOLÉ (aucune règle de section modifiée). Défaut = aucune
   classe cms = mise en page NATURELLE du bloc conservée (non régressif). */
.g4g-landing :is(.g4g-texte, .g4g-fullwidth-photo).g4g-cms-py-1 { padding-block: clamp(8px, 1.4vw, 18px); }
.g4g-landing :is(.g4g-texte, .g4g-fullwidth-photo).g4g-cms-py-2 { padding-block: clamp(16px, 2.6vw, 30px); }
.g4g-landing :is(.g4g-texte, .g4g-fullwidth-photo).g4g-cms-py-3 { padding-block: clamp(28px, 3.8vw, 48px); }
.g4g-landing :is(.g4g-texte, .g4g-fullwidth-photo).g4g-cms-py-4 { padding-block: clamp(44px, 5.4vw, 76px); }
.g4g-landing :is(.g4g-texte, .g4g-fullwidth-photo).g4g-cms-py-5 { padding-block: clamp(60px, 7.2vw, 104px); }
.g4g-landing :is(.g4g-texte, .g4g-fullwidth-photo).g4g-cms-py-6 { padding-block: clamp(80px, 9.5vw, 140px); }
.g4g-landing :is(.g4g-texte, .g4g-fullwidth-photo).g4g-cms-py-7 { padding-block: clamp(104px, 12vw, 184px); }
.g4g-landing :is(.g4g-texte, .g4g-fullwidth-photo).g4g-cms-py-8 { padding-block: clamp(130px, 15vw, 240px); }
/* Largeur : n'agit QUE si réglée (classe présente) → largeur naturelle conservée par défaut ;
   le bloc se recentre à la largeur choisie (--lp-width redéfini par g4g-cms-cw-*). */
.g4g-landing :is(.g4g-texte, .g4g-fullwidth-photo)[class*="g4g-cms-cw-"] { max-width: var(--lp-width); margin-inline: auto; }
.g4g-landing :is(.g4g-texte, .g4g-fullwidth-photo).g4g-cms-cw-1 { --lp-width: 880px; }
.g4g-landing :is(.g4g-texte, .g4g-fullwidth-photo).g4g-cms-cw-2 { --lp-width: 1040px; }
.g4g-landing :is(.g4g-texte, .g4g-fullwidth-photo).g4g-cms-cw-3 { --lp-width: 1220px; }
.g4g-landing :is(.g4g-texte, .g4g-fullwidth-photo).g4g-cms-cw-4 { --lp-width: 1400px; }
.g4g-landing :is(.g4g-texte, .g4g-fullwidth-photo).g4g-cms-cw-5 { --lp-width: 1600px; }
.g4g-landing :is(.g4g-texte, .g4g-fullwidth-photo).g4g-cms-cw-6 { --lp-width: 100%; }
/* Fond de section (palette) ; le fond HEX personnalisé est posé par attribut
   (.g4g-section[data-g4g-sec="<id>"]) via la balise <style nonce> de targeted_body → déjà
   fonctionnel. Fond foncé → texte clair. */
.g4g-landing :is(.g4g-texte, .g4g-fullwidth-photo).g4g-cms-bg-blanc { background: var(--g4g-surface); }
.g4g-landing :is(.g4g-texte, .g4g-fullwidth-photo).g4g-cms-bg-gris-clair { background: var(--g4g-surface-sunken); }
.g4g-landing :is(.g4g-texte, .g4g-fullwidth-photo).g4g-cms-bg-gris { background: var(--g4g-surface-alt); }
.g4g-landing :is(.g4g-texte, .g4g-fullwidth-photo).g4g-cms-bg-bleu-clair { background: var(--g4g-primary-soft); }
.g4g-landing .g4g-texte.g4g-cms-bg-hex-dark { color: var(--g4g-primary-contrast); }
.g4g-cms-iw-7 { width: 500px !important; height: auto !important; }
.g4g-cms-iw-8 { width: 640px !important; height: auto !important; }
/* [2026-10-14 · lot QA, demande Alexandre] Une image dimensionnée au CMS (largeur fixe « grand »)
   ne déborde JAMAIS son conteneur : la largeur réglée reste une CIBLE, plafonnée par la place
   disponible (sur mobile un logo réglé grand restait coupé à droite). height auto préserve le ratio. */
[class*="g4g-cms-iw-"] { max-width: 100% !important; }
/* [QA 2026-09-10] Photo PLEINE LARGEUR (bloc full_width_image) — bord à bord : le <main
   class="g4g-landing"> sort du conteneur, donc 100 % = pleine largeur, sans padding latéral.
   overflow-x: clip du .g4g-landing garde-fou contre tout débordement. */
.g4g-fullwidth-photo { margin: 0; width: 100%; }
.g4g-fullwidth-photo__img { display: block; width: 100%; height: auto; }
/* Image vide → placeholder : bande large à fond neutre + libellé centré (à remplacer au builder). */
.g4g-fullwidth-photo__placeholder {
  width: 100%;
  aspect-ratio: 16 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--g4g-surface-sunken);
  border-block: 1px dashed var(--g4g-border);
}
.g4g-fullwidth-photo__placeholder-txt {
  color: var(--g4g-text-subtle);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: var(--g4g-weight-semibold);
  text-align: center;
  padding: 0 var(--g4g-space-4);
}
/* Pour ÉLARGIR réellement : on relâche le conteneur intermédiaire qui cape le titre dès
   qu'une largeur est forcée (sinon le titre reste bridé à sa colonne). `:has()` = navigateurs
   modernes ; sans support, dégradation propre (le titre garde son comportement par défaut). */
.g4g-methode-4p__head:has([class*="g4g-cms-tw-"]),
.g4g-globe-intro__copy:has([class*="g4g-cms-tw-"]),
.g4g-globe-intro__lockup:has([class*="g4g-cms-tw-"]),
.g4g-testimonials__head:has([class*="g4g-cms-tw-"]),
.g4g-client-marquee__head:has([class*="g4g-cms-tw-"]),
.g4g-odd-band__copy:has([class*="g4g-cms-tw-"]),
.g4g-repcomm__head:has([class*="g4g-cms-tw-"]) {
  max-width: none !important;
}
/* Article vedette : en-tête flex (titre + lien) → titre bridé ; sous largeur forcée on
   empile (titre au-dessus du lien) pour lui rendre toute la largeur. */
.g4g-featured-article__head:has([class*="g4g-cms-tw-"]) {
  display: block;
}
.g4g-sep {
  position: relative;
  height: 84px;
  max-width: 1100px;
  margin: 0 auto;
  pointer-events: none;
  /* Aucune ligne : ce séparateur est fait de FORMES (pas d'un filet). Override du
     `.g4g-sep { border-top }` hérité de base.css (collision de nom — QA Alexandre). */
  border: 0;
}
.g4g-sep__s { position: absolute; top: 50%; display: block; will-change: transform; }
.g4g-sep__s--dot { width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: var(--g4g-planet); left: 12%; }
/* Carré jaune (demande Alexandre : carré plutôt que quart de cercle). */
.g4g-sep__s--square { width: 40px; height: 40px; margin-top: -20px; border-radius: var(--g4g-radius-sm); background: var(--g4g-purpose); left: 40%; }
.g4g-sep__s--ring { width: 40px; height: 40px; margin-top: -20px; border: 2.5px solid var(--g4g-prosperity); border-radius: 50%; left: 65%; }
.g4g-sep__s--pin { width: 15px; height: 15px; margin-top: -7px; border-radius: 50%; background: var(--g4g-people); left: 88%; }
/* Sur bande sombre (ex. témoignages) : l'anneau prosperity garde son contraste ;
   rien à changer (les 4P ressortent sur clair comme sur --g4g-ink). */

/* --- Héro média sombre (S1, accueil) : fond ink + poster + overlays + contenu centré ---
   Les overlays et ombres sont des alphas d'encre décoratifs (dégradés de lisibilité),
   dérivés du token --g4g-ink par color-mix (cf. remise Claude Design). */
.g4g-landing .g4g-hero-media {
  position: relative;
  min-height: clamp(560px, 90vh, 880px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  background: var(--g4g-ink);
}
.g4g-hero-media__media { position: absolute; inset: 0; overflow: hidden; }
.g4g-hero-media__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.1);
  animation: g4gKen 24s ease-in-out infinite alternate;
  will-change: transform;
}
.g4g-hero-media__overlay { position: absolute; inset: 0; }
.g4g-hero-media__overlay--linear {
  background: linear-gradient(180deg, color-mix(in srgb, var(--g4g-ink) 74%, transparent), color-mix(in srgb, var(--g4g-ink) 52%, transparent) 42%, color-mix(in srgb, var(--g4g-ink) 86%, transparent));
}
.g4g-hero-media__overlay--radial {
  background: radial-gradient(120% 92% at 50% 16%, transparent, color-mix(in srgb, var(--g4g-ink) 50%, transparent));
}
/* [2026-09-15] Vidéo de fond Vimeo (mode background) — couvre le héros comme le poster.
   Iframe 16:9 dimensionnée façon « cover » (le héros ≈ 90vh, clamp 560–880 px), centrée, non
   interactive. Elle est DANS `__media` (au-dessus du poster) et SOUS les 2 voiles dégradés. */
.g4g-hero-media__video { position: absolute; inset: 0; overflow: hidden; }
.g4g-hero-media__video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 56.25vw; /* 100vw × 9/16 */
  min-width: 177.78vh; /* 100vh × 16/9 → couvre aussi la hauteur */
  min-height: 100vh;
  border: 0;
  pointer-events: none; /* vidéo décorative : ne capte pas les interactions */
}
/* Voile d'obscurcissement DÉDIÉ à la vidéo (demande QA : texte par-dessus plus lisible). Posé
   par-dessus l'iframe, sous les 2 voiles dégradés → cumul = contraste texte suffisant. */
.g4g-hero-media__video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--g4g-ink) 42%, transparent);
}
/* prefers-reduced-motion : pas de vidéo animée → repli sur le poster (déjà présent). */
@media (prefers-reduced-motion: reduce) {
  .g4g-hero-media__video { display: none; }
}
.g4g-hero-media__content {
  position: relative;
  z-index: 3;
  max-width: 960px;
  margin: 0 auto;
  padding: 72px 28px;
  text-align: center;
}


.g4g-hero-media__title {
  margin: 30px 0 0;
  font-size: calc(clamp(38px, 5.4vw, 72px) * var(--g4g-title-scale, 1));
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: var(--g4g-weight-light);
  color: var(--g4g-primary-contrast);
  text-wrap: balance;
}
.g4g-hero-media__title p { margin: 0; }
.g4g-hero-media__title b,
.g4g-hero-media__title strong { font-weight: var(--g4g-weight-semibold); }
.g4g-hero-media__subtitle {
  margin: 22px auto 0;
  font-size: clamp(16px, 1.9vw, 19px);
  line-height: 1.6;
  color: color-mix(in srgb, var(--g4g-primary-contrast) 90%, transparent);
  max-width: 58ch;
  text-wrap: pretty;
}
.g4g-hero-media__actions {
  margin-top: 34px;
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.g4g-hero-media__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 15px 30px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: var(--g4g-weight-semibold);
  text-decoration: none;
}
.g4g-hero-media__cta--primary {
  background: var(--g4g-primary-contrast);
  color: var(--g4g-primary);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--g4g-ink) 28%, transparent);
}
.g4g-hero-media__cta--secondary {
  border: 1.5px solid color-mix(in srgb, var(--g4g-primary-contrast) 60%, transparent);
  color: var(--g4g-primary-contrast);
}
.g4g-hero-media__cta--secondary:hover { background: color-mix(in srgb, var(--g4g-primary-contrast) 12%, transparent); }
.g4g-hero-media__scroll {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.g4g-hero-media__scroll-track {
  width: 26px;
  height: 42px;
  border: 2px solid color-mix(in srgb, var(--g4g-primary-contrast) 55%, transparent);
  border-radius: 999px;
  display: grid;
  place-items: start center;
  padding-top: 7px;
}
.g4g-hero-media__scroll-dot {
  width: 4px;
  height: 8px;
  border-radius: 999px;
  background: var(--g4g-primary-contrast);
  animation: g4gScroll 1600ms ease-in-out infinite;
}
@keyframes g4gKen {
  from { transform: scale(1.1); }
  to { transform: scale(1.18) translate(1.5%, -1.5%); }
}
@keyframes g4gScroll {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(12px); opacity: 0.3; }
}
@media (prefers-reduced-motion: reduce) {
  .g4g-hero-media__poster,
  .g4g-hero-media__scroll-dot { animation: none; }
}

/* ====================================================================== */
/* SECTIONS BESPOKE ACCUEIL — SUITE : Article vedette (S7), Programmes M4P */
/* (S4, carrousel), Témoignages vidéo (S11, carrousel façade Vimeo).      */
/* Portés des styles inline de « G4G Site - Accueil.dc.html » → tokens.    */
/* ====================================================================== */

/* --- Article vedette (S7) : en-tête + grande carte-lien (dernier article) --- */
.g4g-landing .g4g-featured-article {
  background: var(--g4g-surface);
  /* [2026-09-08] S7 (vedette) + S8 (grille) FUSIONNÉES dans un seul encadré #4e738a
     (.g4g-news-hub__panel) — plus de réglages de jonction entre deux sections. */
}
.g4g-landing .g4g-regional-news { padding-top: clamp(16px, 2.5vw, 32px); }
.g4g-featured-article__inner { max-width: var(--lp-width); margin: 0 auto; }
.g4g-featured-article__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: clamp(24px, 3vw, 40px);
}
.g4g-featured-article__eyebrow {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: var(--g4g-weight-semibold);
  color: var(--g4g-accent);
}
.g4g-featured-article__title {
  margin: 12px 0 0;
  font-size: calc(clamp(30px, 3.6vw, 48px) * var(--g4g-title-scale, 1));
  line-height: 1.06;
  letter-spacing: -0.02em;
  font-weight: var(--g4g-weight-light);
}
.g4g-featured-article__title span { font-weight: var(--g4g-weight-semibold); }
.g4g-featured-article__all {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  font-size: 15px;
  font-weight: var(--g4g-weight-semibold);
  color: var(--g4g-accent);
  text-decoration: none;
}
.g4g-featured-article__all:hover { color: var(--g4g-accent-hover); }
.g4g-featured-article__card {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  border: 1px solid var(--g4g-border);
  border-radius: 24px;
  overflow: hidden;
  background: var(--g4g-surface);
  box-shadow: var(--g4g-shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 160ms var(--lp-ease), transform 160ms var(--lp-ease);
}
.g4g-featured-article__card:hover {
  box-shadow: var(--g4g-shadow-lg);
  transform: translateY(-3px);
}
.g4g-featured-article__cover {
  position: relative;
  min-height: 340px;
  background: var(--g4g-surface-sunken);
}
.g4g-featured-article__cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.g4g-featured-article__body {
  padding: clamp(28px, 3.4vw, 48px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.g4g-featured-article__taxonomy { display: flex; gap: 8px; flex-wrap: wrap; }
.g4g-featured-article__chip {
  border: 1px solid var(--g4g-border);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: var(--g4g-weight-semibold);
  color: var(--g4g-text-muted);
}
.g4g-featured-article__article-title {
  margin: 18px 0 0;
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.18;
  letter-spacing: -0.015em;
  font-weight: var(--g4g-weight-medium);
  color: var(--g4g-text);
}
.g4g-featured-article__excerpt {
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--g4g-text-muted);
  max-width: 52ch;
  text-wrap: pretty;
}
.g4g-featured-article__meta {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.g4g-featured-article__date { font-size: 13px; color: var(--g4g-text-subtle); }
.g4g-featured-article__read {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: var(--g4g-weight-semibold);
  color: var(--g4g-accent);
}
@media (max-width: 768px) {
  .g4g-featured-article__card { grid-template-columns: 1fr; }
}

/* --- Hub Nouvelles (FUSION S7 vedette + S8 grille) : encadré coloré -----------
   Demande Alexandre 2026-09-08 : les deux sections « À la une » et « Restez à l'affût »
   dans UN seul encadré (token --g4g-news-panel) ; les 3 cartes de grille en BLANC pur.
   En-tête et liens du panneau en clair (contraste sur le panneau) ; cartes claires. */
/* [2026-09-08] « À la une » : encadré plus large que la gouttière standard + plus
   d'espace horizontal interne (demande Alexandre). L'override full-bleed lève le
   plafond `--lp-width` de `.g4g-landing .g4g-section` pour CETTE section (0,3,0). */
.g4g-landing .g4g-section.g4g-news-hub { padding-inline: max(var(--lp-gutter), calc((100% - 1360px) / 2)); }
.g4g-news-hub__panel {
  max-width: 1360px;
  margin: 0 auto;
  background: var(--g4g-news-panel);
  border-radius: clamp(20px, 2.6vw, 34px);
  padding: clamp(30px, 4.4vw, 64px) clamp(34px, 4.8vw, 84px);
}
.g4g-news-hub .g4g-featured-article__inner { max-width: none; }
.g4g-news-hub .g4g-featured-article__eyebrow { color: color-mix(in srgb, var(--g4g-primary-contrast) 82%, transparent); }
.g4g-news-hub .g4g-featured-article__title { color: var(--g4g-primary-contrast); }
.g4g-news-hub .g4g-featured-article__all { color: var(--g4g-primary-contrast); }
/* [2026-10-13] Les deux liens « Voir toutes les nouvelles » (en-tête + bas de grille)
   RESTENT blancs au survol — jamais bleus (demande Alexandre : sur le fond sombre du
   panneau, une teinte accent serait illisible, cf. garde-fou contraste). Affordance par
   soulignement. */
.g4g-news-hub .g4g-featured-article__all:hover { color: var(--g4g-primary-contrast); text-decoration: underline; }
.g4g-news-hub__more { margin-top: clamp(28px, 3.6vw, 52px); }
.g4g-news-hub__more-title {
  margin: 0 0 clamp(18px, 2.4vw, 30px);
  font-family: var(--g4g-font-heading);
  font-size: calc(clamp(22px, 2.4vw, 30px) * var(--g4g-title-scale, 1));
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-weight: var(--g4g-weight-semibold);
  color: var(--g4g-primary-contrast);
}
/* Cartes de grille en BLANC pur (plus le gris --g4g-surface-sunken) — demande Alexandre. */
.g4g-landing .g4g-news-hub .g4g-regional-news__item { background: var(--g4g-surface); }
.g4g-news-hub__more .g4g-regional-news__all { margin-top: clamp(22px, 3vw, 36px); }
/* [2026-10-13] Le lien du bas utilise désormais la MÊME classe que celui de l'en-tête
   (g4g-featured-article__all, même flèche) → même esthétique et même survol blanc. Les
   anciennes règles `.g4g-news-hub__more .g4g-link` (couleur/survol) sont donc retirées. */
@media (max-width: 560px) {
  .g4g-news-hub__panel { padding: clamp(22px, 6vw, 32px) clamp(16px, 5vw, 24px); border-radius: 18px; }
}

/* --- Programmes M4P (S4) : bande enfoncée, éditorial actif + carrousel deck --- */
.g4g-landing .g4g-programmes {
  background: var(--g4g-surface-sunken);
  border-top: 1px solid var(--g4g-border);
  overflow: hidden;
}
.g4g-programmes__inner {
  max-width: var(--lp-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.92fr 1.18fr;
  gap: clamp(30px, 4vw, 64px);
  align-items: center;
}
.g4g-programmes__eyebrow {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: var(--g4g-weight-semibold);
  color: var(--g4g-accent);
}
/* Panneaux éditoriaux : un par programme, seul l'actif visible. Sans JS
   (carrousel non « live »), seul le 1er panneau (is-active) s'affiche. */
/* [2026-09-07] RÈGLE hauteur fixe (demande Alexandre) : les panneaux sont EMPILÉS dans une
   même cellule de grille → la zone prend la hauteur du PLUS LONG panneau ; les contrôles de
   navigation (flèches + points) ne bougent donc plus d'un programme à l'autre. Visibilité par
   opacity/visibility (pas display:none) pour que tous occupent l'espace ; hors tab order. */
.g4g-programmes__panels { margin-top: 14px; display: grid; }
.g4g-programmes__panel { grid-area: 1 / 1; visibility: hidden; opacity: 0; }
.g4g-programmes__panel.is-active {
  visibility: visible;
  opacity: 1;
  animation: g4gFadeSwap 360ms var(--lp-ease) both;
}
.g4g-programmes__title {
  margin: 0;
  font-size: calc(clamp(32px, 3.8vw, 52px) * var(--g4g-title-scale, 1));
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: var(--g4g-weight-light);
}
.g4g-programmes__title span { font-weight: var(--g4g-weight-semibold); }
.g4g-programmes__tag {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: var(--g4g-weight-semibold);
  color: var(--g4g-primary-contrast);
}
/* [2026-09-07] Pastille TOUJOURS en bleu officiel #004d71 (demande Alexandre), quel que
   soit l'accent du programme ; texte blanc (contraste OK). */
.g4g-programmes__tag--people,
.g4g-programmes__tag--planet,
.g4g-programmes__tag--prosperity,
.g4g-programmes__tag--purpose { background: var(--g4g-primary); color: var(--g4g-primary-contrast); }
.g4g-programmes__desc {
  margin: 18px 0 0;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--g4g-text-muted);
  max-width: 46ch;
  min-height: 5.2em;
  text-wrap: pretty;
}
.g4g-programmes__cta-row { margin-top: 26px; }
.g4g-programmes__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 14px 26px;
  border-radius: 999px;
  background: var(--g4g-primary);
  color: var(--g4g-primary-contrast);
  font-size: 15px;
  font-weight: var(--g4g-weight-semibold);
  text-decoration: none;
}
.g4g-programmes__cta:hover { background: var(--g4g-primary-hover); }
.g4g-programmes__controls {
  margin-top: 26px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.g4g-programmes__nav {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid var(--g4g-border-strong);
  background: var(--g4g-surface);
  color: var(--g4g-primary);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color 140ms var(--lp-ease);
}
.g4g-programmes__nav:hover { border-color: var(--g4g-accent); }
.g4g-programmes__dots { display: flex; gap: 8px; }
.g4g-programmes__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--g4g-border-strong);
  cursor: pointer;
  transition: width 200ms var(--lp-ease), background 200ms var(--lp-ease);
}
.g4g-programmes__dot.is-active {
  width: 26px;
  background: var(--g4g-primary);
}
/* Carrousel : cartes empilées en éventail, l'active au centre-avant.
   [2026-09-04] Agrandi (demande Alexandre) : cartes + hauteur + décalage plus grands. */
.g4g-programmes__carousel {
  --pr-shift: clamp(140px, 20vw, 260px);
  position: relative;
  /* [QA 2026-09-10] Cartes désormais RECTANGULAIRES (format paysage des logos) → carrousel
     moins haut (demande Alexandre : encadrés au format des logos, logos plus gros). */
  height: clamp(300px, 34vw, 440px);
  overflow: hidden;
}
.g4g-programmes__slide {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: transform 480ms var(--lp-ease), opacity 480ms var(--lp-ease);
  will-change: transform;
  cursor: pointer;
}
/* Repli sans JS : seule la carte active (1ʳᵉ) est visible, centrée. */
.g4g-programmes__carousel:not(.is-live) .g4g-programmes__slide.is-active { opacity: 1; }
/* Enrichi (JS) : éventail à 4 positions autour de l'active. */
.g4g-programmes__carousel.is-live .g4g-programmes__slide--off-0 { transform: translate(-50%, -50%) scale(1); opacity: 1; z-index: 4; }
.g4g-programmes__carousel.is-live .g4g-programmes__slide--off-1 { transform: translate(calc(-50% + var(--pr-shift)), -50%) scale(0.84); opacity: 0.5; z-index: 3; }
.g4g-programmes__carousel.is-live .g4g-programmes__slide--off-3 { transform: translate(calc(-50% - var(--pr-shift)), -50%) scale(0.84); opacity: 0.5; z-index: 3; }
.g4g-programmes__carousel.is-live .g4g-programmes__slide--off-2 { transform: translate(-50%, calc(-50% - 14px)) scale(0.68); opacity: 0.22; z-index: 2; }
.g4g-programmes__card {
  width: 560px;
  max-width: 88vw;
  /* [QA 2026-09-10] Encadré blanc RECTANGULAIRE au format des logos (~paysage) au lieu du
     grand carré (demande Alexandre). aspect-ratio fixe → toutes les cartes identiques, le
     logo remplit le cadre. `min-height:0` annule l'ancienne hauteur quasi carrée. */
  aspect-ratio: 16 / 7;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--g4g-border);
  /* Rayon conservé à 24px (ancré en parité design accueil) ; l'aspect RECTANGULAIRE vient de
     l'aspect-ratio, pas des coins. */
  border-radius: 24px;
  background: var(--g4g-surface);
  box-shadow: var(--g4g-shadow-lg);
  padding: clamp(18px, 2.4vw, 30px) clamp(22px, 3vw, 40px);
  text-align: center;
}
.g4g-programmes__card-kicker {
  font-size: 11.5px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--g4g-text-subtle);
  font-weight: var(--g4g-weight-medium);
}
.g4g-programmes__logo {
  display: block;
  /* [QA 2026-09-10] Logo AGRANDI : remplit l'encadré rectangulaire (demande Alexandre). */
  margin: 0 auto;
  width: min(92%, 500px);
  max-width: 92%;
  max-height: 100%;
  height: auto;
  object-fit: contain;
}
.g4g-programmes__wordmark {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font-weight: var(--g4g-weight-bold);
  font-size: clamp(26px, 3vw, 34px);
  letter-spacing: -0.01em;
  line-height: 1;
}
.g4g-programmes__wordmark-txt { color: var(--g4g-wordmark-muted); }
/* Roue conique ODD (dégradé de marque, 4 couleurs officielles ONU tokenisées). */
.g4g-programmes__wordmark-o {
  width: 0.92em;
  height: 0.92em;
  border-radius: 999px;
  background: conic-gradient(var(--g4g-sdg-yellow) 0 90deg, var(--g4g-sdg-red) 90deg 180deg, var(--g4g-sdg-blue) 180deg 270deg, var(--g4g-sdg-green) 270deg 360deg);
  display: inline-grid;
  place-items: center;
  margin: 0 1px;
}
.g4g-programmes__wordmark-o > span {
  width: 0.46em;
  height: 0.46em;
  border-radius: 999px;
  background: var(--g4g-surface);
}
.g4g-programmes__card-suffix {
  margin-top: 8px;
  font-weight: var(--g4g-weight-bold);
  font-size: clamp(20px, 2.3vw, 26px);
  letter-spacing: 0.02em;
}
.g4g-programmes__card--people .g4g-programmes__card-suffix { color: var(--g4g-people); }
.g4g-programmes__card--planet .g4g-programmes__card-suffix { color: var(--g4g-planet); }
.g4g-programmes__card--prosperity .g4g-programmes__card-suffix { color: var(--g4g-prosperity); }
.g4g-programmes__card--purpose .g4g-programmes__card-suffix { color: var(--g4g-purpose); }
/* [2026-09-08] Barre sous le logo (.g4g-programmes__card-rule) RETIRÉE — demande Alexandre
   (plus aucune barre sous les logos de programmes). Markup retiré du gabarit également. */
@keyframes g4gFadeSwap {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Bouton « lire plus » des programmes (injecté par sections.js sur mobile) — masqué par défaut. */
.g4g-programmes__more {
  display: none;
  margin-top: 8px;
  padding: 4px 0;
  background: none;
  border: none;
  color: var(--g4g-primary);
  font-family: inherit;
  font-size: var(--g4g-text-sm);
  font-weight: var(--g4g-weight-semibold);
  text-decoration: underline;
  cursor: pointer;
}
@media (max-width: 860px) {
  .g4g-programmes__inner { grid-template-columns: 1fr; }
  /* [2026-10-14 · lot QA, demande Alexandre] Mobile : on RETIRE le carrousel de logos, et le
     TITRE du programme devient la PASTILLE BLEUE (l'ancien tag « Introduction » est masqué).
     La navigation reste assurée par les flèches + points sous la description. */
  .g4g-programmes__carousel { display: none; }
  /* [2026-10-21 · demande Alexandre] Titre SANS pastille bleue (style du titre d'origine, taille mobile). */
  .g4g-programmes__title {
    font-size: clamp(18px, 5.4vw, 26px);
    line-height: 1.22;
    letter-spacing: -0.01em;
  }
  .g4g-programmes__tag { display: none; }
  /* Description tronquée + « lire plus ». */
  .g4g-programmes__desc { min-height: 0; }
  .g4g-programmes__desc.is-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .g4g-programmes__desc.is-expanded { -webkit-line-clamp: unset; overflow: visible; }
  .g4g-programmes__more:not([hidden]) { display: inline-block; }
}
@media (prefers-reduced-motion: reduce) {
  .g4g-programmes__slide { transition: none; }
  .g4g-programmes__panel.is-active { animation: none; }
}

/* --- Témoignages vidéo (S11) : bande sombre --g4g-ink + carrousel façade Vimeo ---
   Les alphas sombres (scrims, ombres, dégradés de chargement) dérivent de --g4g-ink /
   black par color-mix ; la sur-ligne turquoise clair et le 2ᵉ stop des dégradés passent
   par --g4g-accent-on-dark / --g4g-ink-raised (tokens de marque, cf. tokens.css). */
.g4g-landing .g4g-testimonials { background: var(--g4g-ink); }
.g4g-testimonials__inner { max-width: 1180px; margin: 0 auto; }
.g4g-testimonials__head { text-align: center; max-width: 640px; margin: 0 auto; }
.g4g-testimonials__eyebrow {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: var(--g4g-weight-semibold);
  color: var(--g4g-accent-on-dark);
}
.g4g-testimonials__title {
  margin: 12px 0 0;
  font-size: calc(clamp(30px, 3.8vw, 52px) * var(--g4g-title-scale, 1));
  line-height: 1.06;
  letter-spacing: -0.025em;
  font-weight: var(--g4g-weight-light);
  color: var(--g4g-primary-contrast);
}
.g4g-testimonials__title span { font-weight: var(--g4g-weight-semibold); }
.g4g-testimonials__subtitle {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--g4g-primary-contrast) 72%, transparent);
  text-wrap: pretty;
}
.g4g-testimonials__player {
  margin-top: clamp(30px, 3.5vw, 48px);
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 24px 60px color-mix(in srgb, black 40%, transparent);
  background: var(--g4g-ink);
}
.g4g-testimonials__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(160deg, var(--g4g-ink-raised), var(--g4g-ink));
}
.g4g-testimonials__facade { position: absolute; inset: 0; display: block; cursor: pointer; }
.g4g-testimonials__stage.is-playing .g4g-testimonials__facade { display: none; }
.g4g-testimonials__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.g4g-testimonials__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--g4g-ink) 25%, transparent), color-mix(in srgb, var(--g4g-ink) 75%, transparent));
}
.g4g-testimonials__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 92px;
  height: 92px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--g4g-primary-contrast) 95%, transparent);
  box-shadow: 0 12px 34px color-mix(in srgb, black 40%, transparent);
  display: grid;
  place-items: center;
  color: var(--g4g-primary);
  transition: transform 160ms var(--lp-ease);
}
.g4g-testimonials__facade:hover .g4g-testimonials__play { transform: translate(-50%, -50%) scale(1.06); }
.g4g-testimonials__caption {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 22px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  pointer-events: none;
}
.g4g-testimonials__name {
  display: block;
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: var(--g4g-weight-semibold);
  color: var(--g4g-primary-contrast);
}
.g4g-testimonials__tag {
  display: block;
  font-size: 14px;
  color: color-mix(in srgb, var(--g4g-primary-contrast) 80%, transparent);
}
.g4g-testimonials__embed { position: absolute; inset: 0; }
.g4g-testimonials__embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.g4g-testimonials__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: none;
  background: color-mix(in srgb, var(--g4g-ink) 55%, transparent);
  color: var(--g4g-primary-contrast);
  display: grid;
  place-items: center;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background 160ms var(--lp-ease);
}
.g4g-testimonials__nav:hover { background: color-mix(in srgb, var(--g4g-ink) 80%, transparent); }
.g4g-testimonials__nav--prev { left: 14px; }
.g4g-testimonials__nav--next { right: 14px; }
.g4g-testimonials__thumbs {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.g4g-testimonials__thumb {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  border-radius: 12px;
  transition: transform 160ms var(--lp-ease);
}
.g4g-testimonials__thumb:hover { transform: translateY(-2px); }
.g4g-testimonials__thumb-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--g4g-ink-raised), var(--g4g-ink));
}
.g4g-testimonials__thumb-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.72;
  transition: opacity 160ms var(--lp-ease);
}
.g4g-testimonials__thumb.is-active .g4g-testimonials__thumb-media {
  outline: 2px solid var(--g4g-accent-on-dark);
  outline-offset: 2px;
}
.g4g-testimonials__thumb.is-active .g4g-testimonials__thumb-media img,
.g4g-testimonials__thumb:hover .g4g-testimonials__thumb-media img { opacity: 0.92; }
.g4g-testimonials__thumb-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--g4g-primary-contrast) 92%, transparent);
  display: grid;
  place-items: center;
  color: var(--g4g-primary);
}
.g4g-testimonials__thumb-name {
  display: block;
  margin-top: 9px;
  font-size: 13.5px;
  font-weight: var(--g4g-weight-semibold);
  color: var(--g4g-primary-contrast);
}
.g4g-testimonials__thumb-org {
  display: block;
  font-size: 11.5px;
  color: color-mix(in srgb, var(--g4g-primary-contrast) 60%, transparent);
}
@media (max-width: 720px) {
  .g4g-testimonials__thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .g4g-testimonials__play,
  .g4g-testimonials__nav,
  .g4g-testimonials__thumb,
  .g4g-testimonials__thumb-media img { transition: none; }
}

/* --- Intro globe (S2) : éditorial + carte média (globe, placeholder vidéo) ---
   Alphas sombres (scrim, ombre du play, badge) dérivés de --g4g-ink par color-mix. */
.g4g-landing .g4g-globe-intro {
  background: var(--g4g-surface); /* [2026-09-07] fond blanc pur (demande Alexandre) */
  border-top: 1px solid var(--g4g-border);
}
.g4g-globe-intro__inner {
  max-width: var(--lp-width);
  margin: 0 auto;
  display: grid;
  /* [2026-09-08] Colonne média ÉLARGIE (photo « Le mouvement » plus grosse) — demande Alexandre. */
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.g4g-globe-intro__eyebrow {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: var(--g4g-weight-semibold);
  color: var(--g4g-accent);
}
.g4g-globe-intro__title {
  margin: 14px 0 0;
  font-size: calc(clamp(36px, 4.6vw, 60px) * var(--g4g-title-scale, 1));
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: var(--g4g-weight-light);
  max-width: 20ch;
}
.g4g-globe-intro__title span { font-weight: var(--g4g-weight-semibold); }
/* [p18] Lockup « logo + slogan » qui remplace le grand titre de « Le mouvement ». */
.g4g-globe-intro__lockup { margin: 18px 0 0; }
.g4g-globe-intro__logo { display: block; height: clamp(64px, 8vw, 104px); width: auto; }
.g4g-globe-intro__slogan {
  /* [2026-09-07] Titre standardisé sur le titre de section de référence
     (.g4g-methode-4p__title « Transformer la responsabilité… ») — demande Alexandre.
     [2026-10-16] Plus d'espace sous le logo (demande Alexandre) — était 16px. */
  margin: clamp(28px, 3vw, 40px) 0 0;
  font-size: calc(clamp(34px, 4.2vw, 56px) * var(--g4g-title-scale, 1));
  line-height: 1.06;
  letter-spacing: -0.025em;
  font-weight: var(--g4g-weight-light);
  color: var(--g4g-text);
}
.g4g-globe-intro__slogan span { font-weight: var(--g4g-weight-semibold); }
.g4g-globe-intro__text {
  margin: 22px 0 0;
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--g4g-text-muted);
  max-width: 56ch;
  text-wrap: pretty;
}
.g4g-globe-intro__cta {
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 13px 26px;
  border-radius: 999px;
  background: var(--g4g-primary);
  color: var(--g4g-primary-contrast);
  font-size: 15px;
  font-weight: var(--g4g-weight-semibold);
  text-decoration: none;
}
.g4g-globe-intro__cta:hover { background: var(--g4g-primary-hover); }
.g4g-globe-intro__media { position: relative; width: 100%; }
.g4g-globe-intro__card {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--g4g-primary-soft), var(--g4g-surface-alt));
  border: 1px solid var(--g4g-border);
  box-shadow: var(--g4g-shadow-lg);
}
.g4g-globe-intro__globe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10%;
  box-sizing: border-box;
  display: block;
}
/* [2026-09-04] Variante PHOTO (gens formant une terre) : remplit toute la carte,
   sans marge, pour un rendu photo plein-cadre plutôt que « logo flottant ». */
.g4g-globe-intro__globe--photo {
  object-fit: cover;
  padding: 0;
}
/* [2026-09-07] Section 2 « Le mouvement » — variante PHOTO : image ENTIÈRE, sans cadre
   (ni carré 4/5, ni bordure, ni ombre, ni dégradé de fond) — demande Alexandre. */
.g4g-globe-intro__card--photo {
  aspect-ratio: auto;
  border: none;
  border-radius: 0;
  overflow: visible;
  background: none;
  box-shadow: none;
}
.g4g-globe-intro__card--photo .g4g-globe-intro__globe--photo {
  position: static;
  width: 100%;
  height: auto;
  object-fit: contain;
  padding: 0;
}
.g4g-globe-intro__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--g4g-ink) 35%, transparent));
}
.g4g-globe-intro__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 76px;
  height: 76px;
  border: none;
  border-radius: 999px;
  background: color-mix(in srgb, var(--g4g-primary-contrast) 92%, transparent);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--g4g-ink) 30%, transparent);
  display: grid;
  place-items: center;
  color: var(--g4g-primary);
  cursor: pointer;
  text-decoration: none;
  transition: transform 160ms var(--lp-ease);
}
.g4g-globe-intro__play--placeholder { cursor: default; }
a.g4g-globe-intro__play:hover { transform: translate(-50%, -50%) scale(1.06); }

.g4g-globe-intro__embed { position: absolute; inset: 0; }
.g4g-globe-intro__embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.g4g-globe-intro__card.is-playing .g4g-globe-intro__globe,
.g4g-globe-intro__card.is-playing .g4g-globe-intro__scrim,
.g4g-globe-intro__card.is-playing .g4g-globe-intro__play { display: none; }
@media (max-width: 860px) {
  .g4g-globe-intro__inner { grid-template-columns: 1fr; }
  .g4g-globe-intro__card { max-width: 420px; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .g4g-globe-intro__play { transition: none; }
}

/* --- Méthode 4P (S3) : en-tête centré + grille des 4 piliers imagés --- */
.g4g-landing .g4g-methode-4p {
  background: var(--g4g-surface);
  border-top: 1px solid var(--g4g-border);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.g4g-methode-4p__inner { max-width: 1180px; margin: 0 auto; position: relative; z-index: 1; }
/* [QA 2026-09-01] Décor : GRANDES formes 4P en ARRIÈRE-PLAN (derrière le contenu,
   z-index 0 + isolation), qui BOUGENT au défilement (parallaxe `data-px`) pour une
   scène épurée et dynamique (demande Alexandre). aria-hidden, pointer-events:none,
   jamais au-dessus du texte (elles vivent DERRIÈRE). Palette 4P, teintes très douces. */
.g4g-methode-4p__decor { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.g4g-methode-4p__decor > span { position: absolute; display: block; will-change: transform; }
.g4g-mdecor--wheel {
  width: clamp(240px, 28vw, 400px); aspect-ratio: 1; border-radius: 50%;
  left: -8%; top: -16%; opacity: 0.14;
  background: conic-gradient(var(--g4g-people) 0 25%, var(--g4g-planet) 0 50%, var(--g4g-prosperity) 0 75%, var(--g4g-purpose) 0 100%);
}
.g4g-mdecor--ring {
  width: clamp(190px, 23vw, 320px); aspect-ratio: 1; border-radius: 50%;
  border: 3px solid var(--g4g-accent);
  right: -7%; bottom: -20%; opacity: 0.28;
}
.g4g-mdecor--square {
  width: clamp(90px, 10vw, 140px); aspect-ratio: 1; border-radius: var(--g4g-radius-md);
  right: 9%; top: 14%; background: color-mix(in srgb, var(--g4g-purpose) 18%, transparent);
}
.g4g-mdecor--dot {
  width: clamp(64px, 7.5vw, 110px); aspect-ratio: 1; border-radius: 50%;
  left: 8%; bottom: 12%; background: color-mix(in srgb, var(--g4g-planet) 16%, transparent);
}
.g4g-methode-4p__head { text-align: center; max-width: 760px; margin: 0 auto; }
/* [Pt 6] Logo M4P au-dessus du titre. */
/* [2026-10-13] Logo M4P (accueil, 3e section) : centré (déjà) et PLUS PETIT (demande Alexandre). */
.g4g-methode-4p__logo { display: block; margin: 0 auto 16px; width: clamp(68px, 8vw, 104px); height: auto; }
/* [2026-10-14 · lot QA, demande Alexandre] Sur mobile, le logo de la 3e section reste à une
   taille APPROPRIÉE et CENTRÉ même si le réglage de taille (g4g-cms-iw-*) est « grand » pour le
   bureau : on neutralise la largeur fixe et on plafonne. (Il était « beaucoup trop gros et coupé
   à droite » sur mobile.) */
@media (max-width: 600px) {
  /* [2026-10-16] Logo PLUS GRAND sur mobile (demande Alexandre) — plafond 220px / 62vw → 300px / 80vw ;
     sans réglage de taille, il passait à 68px. */
  .g4g-methode-4p__logo { width: min(260px, 70vw); }
  .g4g-methode-4p__logo[class*="g4g-cms-iw-"] {
    max-width: min(300px, 80vw) !important;
    height: auto !important;
    margin-inline: auto;
  }
}
/* [2026-10-16] Mobile : les formes du décor quittent le haut de la section — aucune près du logo M4P
   (demande Alexandre). Elles se regroupent dans le bas, en partie hors cadre ; la parallaxe est
   déjà coupée sous 760px (motion.css). */
@media (max-width: 760px) {
  .g4g-mdecor--square { top: auto; right: auto; left: -9%; bottom: 7%; }
  .g4g-mdecor--dot { left: 34%; right: auto; bottom: 2%; }
  .g4g-mdecor--ring { right: -26%; bottom: -12%; }
}
.g4g-methode-4p__eyebrow {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: var(--g4g-weight-semibold);
  color: var(--g4g-accent);
}
.g4g-methode-4p__title {
  margin: 14px 0 0;
  font-size: calc(clamp(34px, 4.2vw, 56px) * var(--g4g-title-scale, 1));
  line-height: 1.06;
  letter-spacing: -0.025em;
  font-weight: var(--g4g-weight-light);
}
.g4g-methode-4p__title span { font-weight: var(--g4g-weight-semibold); }
.g4g-methode-4p__intro {
  margin: 18px 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--g4g-text-muted);
  text-wrap: pretty;
}
/* [Pt 6] Bouton « en savoir plus » sous les 4 P. */
.g4g-methode-4p__cta-wrap { text-align: center; margin-top: clamp(28px, 4vw, 48px); }
.g4g-methode-4p__cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 12px 26px;
  border-radius: 999px;
  background: var(--g4g-accent);
  color: var(--g4g-primary-contrast);
  font-weight: var(--g4g-weight-semibold);
  text-decoration: none;
  transition: background var(--g4g-dur-fast, 0.18s) ease;
}
.g4g-methode-4p__cta:hover { background: var(--g4g-accent-hover, var(--g4g-accent)); }
.g4g-methode-4p__grid {
  margin-top: clamp(38px, 4.5vw, 60px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 40px);
}
.g4g-methode-4p__pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.g4g-methode-4p__picto { width: clamp(126px, 13.5vw, 162px); height: auto; display: block; }
.g4g-methode-4p__label {
  margin-top: 18px;
  font-size: clamp(18px, 2vw, 23px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: var(--g4g-weight-semibold);
}
.g4g-methode-4p__label--people { color: var(--g4g-people); }
.g4g-methode-4p__label--planet { color: var(--g4g-planet); }
.g4g-methode-4p__label--prosperity { color: var(--g4g-prosperity); }
.g4g-methode-4p__label--purpose { color: var(--g4g-purpose); }
.g4g-methode-4p__text {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--g4g-text-muted);
  max-width: 26ch;
  text-wrap: pretty;
}
@media (max-width: 860px) {
  .g4g-methode-4p__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* [2026-10-06] Rangée d'ICÔNES des 4 P (option `show_pillar_icons`, Global Vision) : même grille,
   en liste sans puces, pictos plus compacts (icônes, pas l'illustration pleine). */
.g4g-methode-4p__grid--icons { list-style: none; padding: 0; margin-inline: auto; max-width: 760px; }
.g4g-methode-4p__grid--icons .g4g-methode-4p__picto { width: clamp(72px, 8vw, 104px); }
.g4g-methode-4p__grid--icons .g4g-methode-4p__label { margin-top: 12px; font-size: clamp(15px, 1.5vw, 18px); }

/* ====================================================================== */
/* PAGE MÉTHODE 4P (site public) — 6 sections bespoke (S1–S6)              */
/* Portées de « G4G Site - Méthode 4P.dc.html » → tokens.                 */
/* ====================================================================== */

/* --- S1 Héro 4P : eyebrow + titre bichrome + sous-titre + 2 CTA + 4 pictos --- */
.g4g-landing .g4g-hero4p { background: var(--g4g-surface); }
.g4g-hero4p__inner { max-width: var(--lp-width); margin: 0 auto; }
.g4g-hero4p__eyebrow {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: var(--g4g-weight-semibold);
  color: var(--g4g-accent);
}
.g4g-hero4p__title {
  margin: 16px 0 0;
  font-size: calc(clamp(40px, 5.6vw, 76px) * var(--g4g-title-scale, 1));
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: var(--g4g-weight-light);
  max-width: 22ch;
}
.g4g-hero4p__title span { font-weight: var(--g4g-weight-semibold); }
.g4g-hero4p__body {
  margin-top: clamp(30px, 3.5vw, 44px);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.g4g-hero4p__subtitle {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--g4g-text-muted);
  max-width: 56ch;
  text-wrap: pretty;
}
.g4g-hero4p__actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.g4g-hero4p__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 13px 26px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: var(--g4g-weight-semibold);
  text-decoration: none;
  transition: background 140ms var(--lp-ease);
}
.g4g-hero4p__cta--primary { background: var(--g4g-primary); color: var(--g4g-primary-contrast); }
.g4g-hero4p__cta--primary:hover { background: var(--g4g-primary-hover); }
.g4g-hero4p__cta--secondary { border: 1.5px solid var(--g4g-primary); color: var(--g4g-primary); }
.g4g-hero4p__cta--secondary:hover { background: var(--g4g-primary-soft); }
.g4g-hero4p__pillars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}
.g4g-hero4p__pillar { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.g4g-hero4p__pillar-img { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; }
.g4g-hero4p__pillar-label {
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: var(--g4g-weight-bold);
  color: var(--g4g-text);
}
/* [lot 2 motion] COLLAGE héro : photo « coin-globe » + formes 4P en parallaxe.
   Couches : formes DERRIÈRE (z1) · photo (z2) · accents 4P DEVANT la photo (z3).
   Décoratifs = aria-hidden, jamais au-dessus d'un texte (ils vivent dans la colonne
   image). 100 % tokens. La parallaxe (data-px) vient de motion.js/motion.css. */
.g4g-hero4p__collage { position: relative; min-height: clamp(280px, 34vw, 400px); isolation: isolate; }
.g4g-hero4p__photo {
  position: relative; z-index: 2;
  width: clamp(220px, 82%, 360px); aspect-ratio: 1; margin: 0 auto;
  border-radius: 46% 54% 52% 48% / 54% 46% 54% 46%;
  overflow: hidden; box-shadow: var(--g4g-shadow-lg);
  background: var(--g4g-surface-alt);
}
.g4g-hero4p__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.g4g-hero4p__deco { position: absolute; display: block; will-change: transform; }
.g4g-hd--ring { z-index: 1; width: clamp(120px, 15vw, 180px); aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--g4g-accent); left: -2%; top: 2%; }
.g4g-hd--pill { z-index: 1; width: clamp(96px, 13vw, 156px); height: clamp(42px, 5.5vw, 64px); background: color-mix(in srgb, var(--g4g-prosperity) 82%, transparent); border-radius: var(--g4g-radius-pill); right: -1%; bottom: 8%; }
.g4g-hd--square { z-index: 3; width: clamp(46px, 6vw, 70px); aspect-ratio: 1; border-radius: var(--g4g-radius-md); background: var(--g4g-purpose); right: 9%; top: 2%; }
.g4g-hd--dot { z-index: 3; width: clamp(30px, 4vw, 44px); aspect-ratio: 1; border-radius: 50%; background: var(--g4g-people); left: 5%; bottom: 12%; }
.g4g-hero4p__pillars { margin-top: clamp(32px, 4.5vw, 56px); }
@media (max-width: 860px) {
  .g4g-hero4p__body { grid-template-columns: 1fr; }
  .g4g-hero4p__collage { min-height: clamp(260px, 70vw, 340px); }
}

/* --- S2 Bandeau humain : image pleine largeur --- */
/* La maquette colle le bandeau au héro (padding-haut = 0) ; on surcharge le rythme
   systémique --lp-py pour cette seule bande (intention compositionnelle héro↔anneau). */
.g4g-landing .g4g-method-band { background: var(--g4g-surface); padding-block: 0 clamp(40px, 5vw, 72px); }
.g4g-method-band__inner { max-width: var(--lp-width); margin: 0 auto; }
.g4g-method-band__image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
  overflow: hidden;
}
/* [Lot 5] Sur-titre + titre au-dessus de l'image, paragraphe en dessous. */
.g4g-method-band__head { max-width: var(--lp-width); margin: 0 auto clamp(20px, 3vw, 40px); padding: 0 clamp(16px, 4vw, 40px); text-align: center; }
.g4g-method-band__eyebrow { display: block; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--g4g-accent); font-size: 0.85rem; margin-bottom: 10px; }
.g4g-method-band__title { margin: 0; font-size: calc(clamp(28px, 3.6vw, 48px) * var(--g4g-title-scale, 1)); line-height: 1.1; font-weight: var(--g4g-weight-light); color: var(--g4g-primary); letter-spacing: -0.02em; text-wrap: balance; }
.g4g-method-band__text { max-width: 760px; margin: clamp(18px, 2.5vw, 32px) auto 0; padding: 0 clamp(16px, 4vw, 40px); text-align: center; color: var(--g4g-text-muted); font-size: 17px; line-height: 1.65; text-wrap: pretty; }

/* --- S3 Piliers (scrollytelling) : carte collante + rail + panneaux --- */
.g4g-landing .g4g-pillars {
  background: var(--g4g-surface-sunken);
  border-top: 1px solid var(--g4g-border);
}
.g4g-pillars__inner { max-width: var(--lp-width); margin: 0 auto; }
.g4g-pillars__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.g4g-pillars__title {
  margin: 0;
  font-size: calc(clamp(36px, 4.4vw, 60px) * var(--g4g-title-scale, 1));
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: var(--g4g-weight-light);
  max-width: 20ch;
}
.g4g-pillars__title span { font-weight: var(--g4g-weight-semibold); }
.g4g-pillars__intro {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--g4g-text-muted);
  max-width: 42ch;
  text-wrap: pretty;
}
.g4g-pillars__grid {
  margin-top: clamp(30px, 4vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 60px);
  align-items: start;
}
/* top > hauteur du header collant (~125px) + respiration : la carte-repère ne
   chevauche plus l'en-tête quand elle se fige (retour QA Alexandre 2026-08-21). */
.g4g-pillars__sticky-col { position: sticky; top: 150px; }
.g4g-pillars__sticky {
  border: 1px solid var(--g4g-border);
  border-left: 4px solid var(--g4g-border-strong);
  border-radius: 20px;
  background: var(--g4g-surface);
  padding: clamp(22px, 2.4vw, 30px);
  box-shadow: var(--g4g-shadow-md);
  transition: border-left-color 240ms var(--lp-ease);
}
/* Filet gauche coloré = pilier actif (maquette : borderLeft 4px de la couleur active). */
.g4g-pillars__sticky[data-active-accent="people"] { border-left-color: var(--g4g-people); }
.g4g-pillars__sticky[data-active-accent="planet"] { border-left-color: var(--g4g-planet); }
.g4g-pillars__sticky[data-active-accent="prosperity"] { border-left-color: var(--g4g-prosperity); }
.g4g-pillars__sticky[data-active-accent="purpose"] { border-left-color: var(--g4g-purpose); }
.g4g-pillars__sticky-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.g4g-pillars__letter {
  width: 58px;
  height: 58px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 28px;
  font-weight: var(--g4g-weight-semibold);
  background: var(--g4g-primary);
  color: var(--g4g-primary-contrast);
  transition: background 240ms var(--lp-ease);
}
.g4g-pillars__sticky[data-active-accent="people"] .g4g-pillars__letter { background: var(--g4g-people); color: var(--g4g-primary-contrast); }
.g4g-pillars__sticky[data-active-accent="planet"] .g4g-pillars__letter { background: var(--g4g-planet); color: var(--g4g-primary-contrast); }
.g4g-pillars__sticky[data-active-accent="prosperity"] .g4g-pillars__letter { background: var(--g4g-prosperity); color: var(--g4g-primary-contrast); }
.g4g-pillars__sticky[data-active-accent="purpose"] .g4g-pillars__letter { background: var(--g4g-purpose); color: var(--g4g-ink); }
.g4g-pillars__step { font-size: 13px; font-weight: var(--g4g-weight-semibold); color: var(--g4g-text-muted); }
.g4g-pillars__sticky-name {
  margin-top: 18px;
  font-size: clamp(26px, 2.8vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  font-weight: var(--g4g-weight-semibold);
  color: var(--g4g-text);
}
.g4g-pillars__sticky-desc {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--g4g-text-muted);
}
.g4g-pillars__rail { margin-top: 22px; display: flex; flex-direction: column; gap: 8px; }
.g4g-pillars__rail-item { display: flex; align-items: center; gap: 12px; opacity: 0.5; transition: opacity 200ms var(--lp-ease); }
.g4g-pillars__rail-item.is-active { opacity: 1; }
.g4g-pillars__rail-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--g4g-border-strong); flex: none; }
.g4g-pillars__rail-item--people .g4g-pillars__rail-dot { background: var(--g4g-people); }
.g4g-pillars__rail-item--planet .g4g-pillars__rail-dot { background: var(--g4g-planet); }
.g4g-pillars__rail-item--prosperity .g4g-pillars__rail-dot { background: var(--g4g-prosperity); }
.g4g-pillars__rail-item--purpose .g4g-pillars__rail-dot { background: var(--g4g-purpose); }
.g4g-pillars__rail-label { font-size: 14px; font-weight: var(--g4g-weight-medium); color: var(--g4g-text); }
.g4g-pillars__rail-item.is-active .g4g-pillars__rail-label { font-weight: var(--g4g-weight-semibold); }
.g4g-pillars__panels { display: flex; flex-direction: column; gap: clamp(20px, 3vw, 32px); }
.g4g-pillars__panel {
  border: 1px solid var(--g4g-border);
  border-top: 4px solid var(--g4g-border-strong);
  border-radius: 20px;
  background: var(--g4g-surface);
  padding: clamp(24px, 3vw, 38px);
}
/* Filet supérieur = couleur du pilier (maquette : borderTop 4px de la couleur du pilier). */
.g4g-pillars__panel[data-p-accent="people"] { border-top-color: var(--g4g-people); }
.g4g-pillars__panel[data-p-accent="planet"] { border-top-color: var(--g4g-planet); }
.g4g-pillars__panel[data-p-accent="prosperity"] { border-top-color: var(--g4g-prosperity); }
.g4g-pillars__panel[data-p-accent="purpose"] { border-top-color: var(--g4g-purpose); }
/* Emphase scrollytelling : panneaux atténués, panneau actif mis en avant. Piloté par JS
   (classe --live posée à l'init) → SANS JS, aucun panneau n'est atténué (opacité pleine). */
.g4g-pillars--live .g4g-pillars__panel {
  opacity: 0.72;
  box-shadow: var(--g4g-shadow-sm);
  transition: opacity 240ms var(--lp-ease), box-shadow 240ms var(--lp-ease);
}
.g4g-pillars--live .g4g-pillars__panel.is-active {
  opacity: 1;
  box-shadow: var(--g4g-shadow-lg);
}
.g4g-pillars__panel-head { display: flex; align-items: center; gap: 14px; }
.g4g-pillars__panel-num {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: var(--g4g-weight-semibold);
  flex: none;
}
.g4g-pillars__panel-num--people { background: var(--g4g-people); color: var(--g4g-primary-contrast); }
.g4g-pillars__panel-num--planet { background: var(--g4g-planet); color: var(--g4g-primary-contrast); }
.g4g-pillars__panel-num--prosperity { background: var(--g4g-prosperity); color: var(--g4g-primary-contrast); }
.g4g-pillars__panel-num--purpose { background: var(--g4g-purpose); color: var(--g4g-ink); }

/* [Lot 4] Certification ESG — niveaux en scrollytelling (réemploi de .g4g-pillars),
   DÉGRADÉ VERT (n1 clair → n4 foncé) + logo du niveau actif dans la carte collante. */
.g4g-pillars--levels .g4g-pillars__sticky[data-active-accent="n1"] { border-left-color: var(--g4g-esg-n1); }
.g4g-pillars--levels .g4g-pillars__sticky[data-active-accent="n2"] { border-left-color: var(--g4g-esg-n2); }
.g4g-pillars--levels .g4g-pillars__sticky[data-active-accent="n3"] { border-left-color: var(--g4g-esg-n3); }
.g4g-pillars--levels .g4g-pillars__sticky[data-active-accent="n4"] { border-left-color: var(--g4g-esg-n4); }
.g4g-pillars--levels .g4g-pillars__rail-item--n1 .g4g-pillars__rail-dot { background: var(--g4g-esg-n1); }
.g4g-pillars--levels .g4g-pillars__rail-item--n2 .g4g-pillars__rail-dot { background: var(--g4g-esg-n2); }
.g4g-pillars--levels .g4g-pillars__rail-item--n3 .g4g-pillars__rail-dot { background: var(--g4g-esg-n3); }
.g4g-pillars--levels .g4g-pillars__rail-item--n4 .g4g-pillars__rail-dot { background: var(--g4g-esg-n4); }
/* [2026-09-04] Chiffre de la pastille TOUJOURS blanc, y compris le niveau 1 (demande
   Alexandre : uniformité des 4 pastilles). n1 = vert clair → contraste plus faible, assumé. */
.g4g-pillars--levels .g4g-pillars__panel-num--n1 { background: var(--g4g-esg-n1); color: var(--g4g-primary-contrast); }
.g4g-pillars--levels .g4g-pillars__panel-num--n2 { background: var(--g4g-esg-n2); color: var(--g4g-primary-contrast); }
.g4g-pillars--levels .g4g-pillars__panel-num--n3 { background: var(--g4g-esg-n3); color: var(--g4g-primary-contrast); }
.g4g-pillars--levels .g4g-pillars__panel-num--n4 { background: var(--g4g-esg-n4); color: var(--g4g-primary-contrast); }
/* Logos des niveaux dans la carte collante : masqués par défaut, seul l'actif s'affiche
   (piloté par data-active-accent posé par initPillars ; sans JS = niveau 1 par défaut). */
/* [2026-09-04] Logos officiels « Programme GLOBAL ESG » par niveau (larges ~2.4:1) :
   plus grands + pleine largeur de la carte collante. Un seul visible (data-active-accent). */
.g4g-levels__logos { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: clamp(104px, 11vw, 140px); }
.g4g-levels__logo { display: none; max-height: clamp(96px, 10vw, 128px); max-width: 100%; width: auto; height: auto; }
.g4g-pillars--levels .g4g-pillars__sticky[data-active-accent="n1"] .g4g-levels__logo[data-lvl="n1"],
.g4g-pillars--levels .g4g-pillars__sticky[data-active-accent="n2"] .g4g-levels__logo[data-lvl="n2"],
.g4g-pillars--levels .g4g-pillars__sticky[data-active-accent="n3"] .g4g-levels__logo[data-lvl="n3"],
.g4g-pillars--levels .g4g-pillars__sticky[data-active-accent="n4"] .g4g-levels__logo[data-lvl="n4"] { display: block; }
/* [2026-09-04] #7 Hauteurs homogènes (demande Alexandre). À DROITE : les 4 panneaux sont
   forcés à la même hauteur (= le plus grand) par grid-auto-rows:1fr — robuste quel que soit
   le contenu. À GAUCHE : la carte collante a un plancher CSS (repli sans-JS) et initSlider/
   initPillars l'aligne EXACTEMENT sur la hauteur des panneaux quand le JS tourne. */
.g4g-pillars--levels { --lv-h: clamp(248px, 27vh, 320px); --g4g-esg-n1: var(--g4g-primary); --g4g-esg-n2: var(--g4g-primary); --g4g-esg-n3: var(--g4g-primary); --g4g-esg-n4: var(--g4g-primary); }
.g4g-pillars--levels .g4g-pillars__panels { display: grid; grid-template-columns: 1fr; grid-auto-rows: 1fr; }
.g4g-pillars--levels .g4g-pillars__panel { box-sizing: border-box; }
.g4g-pillars--levels .g4g-pillars__sticky { min-height: var(--lv-h); box-sizing: border-box; }
/* [2026-09-04] #7 Plus d'air au scroll-up : quand le 2e header réapparaît, la carte collante
   ne se colle plus au menu (top = header étendu + respiration ; ajusté au preview). */
.g4g-pillars--levels .g4g-pillars__sticky-col { top: 184px; }

/* [2026-09-06] Carré collant des NIVEAUX épuré (demande Alexandre) : logo + rail seuls,
   tout centré. Le nom du niveau et le compteur « n/4 » sont retirés du gabarit (le logo
   officiel porte déjà le nom). Ciblé --levels : les 4 piliers de Méthode 4P restent intacts. */
.g4g-pillars--levels .g4g-pillars__sticky {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 22px;
  border-left-width: 6px;
}
.g4g-pillars--levels .g4g-pillars__sticky-top { width: 100%; justify-content: center; }

/* [Lot 7 / demande E] Slider 4P — révélation Avant/Après, section ÉPINGLÉE plein écran
   (option B). La couleur du P (var --sc, tokens 4P) envahit le fond/nom/pastilles ; l'image
   « après » se révèle en opacité par-dessus « avant » (aucun mouvement). Aucune couleur en dur. */
/* Full-bleed : bat la gouttière `.g4g-landing .g4g-section` (0,2,0) → fond couleur pleine largeur. */
.g4g-landing .g4g-slider4p { background: var(--g4g-surface); padding: 0; }
.g4g-slider4p__head { max-width: var(--lp-width); margin: 0 auto; padding: clamp(30px, 5vw, 64px) clamp(16px, 4vw, 40px) clamp(30px, 5vw, 60px); text-align: center; }
.g4g-slider4p__eyebrow { display: block; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--g4g-accent); font-size: 0.85rem; margin-bottom: 10px; }
.g4g-slider4p__title { margin: 0; font-size: calc(clamp(28px, 3.6vw, 48px) * var(--g4g-title-scale, 1)); line-height: 1.1; font-weight: var(--g4g-weight-light); color: var(--g4g-primary); letter-spacing: -0.02em; text-wrap: balance; }
.g4g-slider4p__intro { max-width: 720px; margin: 16px auto 0; color: var(--g4g-text-muted); font-size: 17px; line-height: 1.6; }
/* [2026-10-19] Passage d'un P au suivant plus RAPIDE (demande Alexandre : moins de défilement) :
   440vh → 300vh, soit ≈ 50vh de défilement par P au lieu de 85vh (4 piliers). */
.g4g-slider4p__scroller { position: relative; height: 300vh; }
.g4g-slider4p__pin { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; overflow: hidden;
  background-color: color-mix(in srgb, var(--sc, var(--g4g-planet)) 58%, var(--g4g-slider-shade)); transition: background-color 0.6s ease; padding: clamp(8px, 2vw, 28px); }
.g4g-slider4p__pin[data-active-accent="people"] { --sc: var(--g4g-people); }
.g4g-slider4p__pin[data-active-accent="planet"] { --sc: var(--g4g-planet); }
.g4g-slider4p__pin[data-active-accent="prosperity"] { --sc: var(--g4g-prosperity); }
.g4g-slider4p__pin[data-active-accent="purpose"] { --sc: var(--g4g-purpose); }
/* [2026-10-12] Le grand chiffre translucide du pilier a été RETIRÉ (demande Alexandre : « on
   enlève le chiffre de chaque pilier »). L'élément .g4g-slider4p__ghost n'est plus rendu. */
.g4g-slider4p__inner { position: relative; z-index: 1; width: min(1800px, 98%); text-align: center; color: var(--g4g-primary-contrast); }
/* [QA 2026-09-10] Hauteur de la photo PLAFONNÉE (max-height vh) : le titre+citation passent
   AU-DESSUS et un paragraphe dynamique s'ajoute EN DESSOUS → tout doit tenir dans le pin 100vh. */
.g4g-slider4p__media { position: relative; border-radius: 14px; overflow: hidden; box-shadow: var(--g4g-shadow-lg); max-height: 46vh; margin-inline: auto; }
.g4g-slider4p__pair { position: relative; display: block; }
.g4g-slider4p__pair[hidden] { display: none; }
.g4g-slider4p__img--before { display: block; width: 100%; height: auto; max-height: 46vh; object-fit: cover; }
.g4g-slider4p__img--after { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: var(--reveal, 0); }
/* [2026-09-04] Carré de couleur du P (picto officiel, même image que la section M4P de
   l'accueil) en surimpression, coin bas-gauche de l'image (demande Alexandre). */
.g4g-slider4p__picto {
  position: absolute;
  /* [QA 2026-09-10] Picto déplacé en bas à DROITE de la photo (était à gauche) — demande Alexandre. */
  right: clamp(12px, 2vw, 26px);
  bottom: clamp(12px, 2vw, 26px);
  /* [2026-10-12] Picto AGRANDI d'environ 50 % (demande Alexandre : « grossir l'icône de chaque
     pilier dans le coin de leur image »). */
  width: clamp(81px, 10.5vw, 138px);
  height: auto;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 6px 16px color-mix(in srgb, var(--g4g-ink) 34%, transparent));
}
/* [2026-09-04] Transition plus FLUIDE entre les P : quand le JS tourne (is-live posé par
   initSlider4p), les paires se superposent (grid) et se fondent en opacité au lieu d'un
   basculement sec (hidden). Sans JS, le repli hidden/1er P reste inchangé. */
.g4g-slider4p__media.is-live { display: grid; }
.g4g-slider4p__media.is-live .g4g-slider4p__pair { grid-area: 1 / 1; opacity: 0; transition: opacity 0.55s ease; }
.g4g-slider4p__media.is-live .g4g-slider4p__pair.is-active { opacity: 1; }
/* [2026-09-08] Hauteur RÉSERVÉE pour le bloc légende (nom + citation) = dimensionnée sur le
   plus long texte (règle « fixer sur le plus long », comme la nav des témoignages). Sans cela
   la citation à nombre de lignes variable changeait la hauteur de __inner (centré) → l'image
   et le chiffre se déplaçaient d'une slide à l'autre. Demande Alexandre : consistance graphique. */
/* [QA 2026-09-10] Légende (nom + citation) désormais AU-DESSUS de la photo → hauteur réservée
   réduite (le paragraphe long vit maintenant dans le résumé sous la photo). */
.g4g-slider4p__cap { margin: 0 0 clamp(12px, 1.8vh, 20px); min-height: clamp(80px, 10vh, 128px); }
.g4g-slider4p__name { font-family: var(--g4g-font-heading); font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 700; color: var(--sc, var(--g4g-primary-contrast)); transition: color 0.6s ease; }
.g4g-slider4p__quote { font-size: clamp(1rem, 1.6vw, 1.2rem); line-height: 1.5; color: color-mix(in srgb, var(--g4g-primary-contrast) 82%, transparent); max-width: 52ch; margin: 8px auto 0; }
/* [QA 2026-09-10] Paragraphe dynamique SOUS la photo (champ « Résumé » de chaque P). Vide → masqué. */
.g4g-slider4p__summary { max-width: 62ch; margin: clamp(12px, 1.8vh, 20px) auto 0; font-size: clamp(0.98rem, 1.4vw, 1.12rem); line-height: 1.55; color: color-mix(in srgb, var(--g4g-primary-contrast) 88%, transparent); min-height: clamp(38px, 5.5vh, 72px); }
.g4g-slider4p__summary:empty { display: none; }
.g4g-slider4p__dots { display: flex; gap: 8px; justify-content: center; margin-top: clamp(10px, 1.6vh, 16px); }
.g4g-slider4p__dot { width: 9px; height: 9px; border-radius: 999px; background: color-mix(in srgb, var(--g4g-primary-contrast) 28%, transparent); transition: all 0.25s; }
.g4g-slider4p__dot.on { background: var(--sc, var(--g4g-primary-contrast)); width: 26px; }
/* [2026-10-14] Symbole de défilement IDENTIQUE au bas du héro d'accueil (souris + point animé),
   sur le fond sombre du slider (demande Alexandre). Réutilise le keyframe g4gScroll du héro. */
.g4g-slider4p__scroll { display: flex; justify-content: center; margin-top: clamp(16px, 2.5vh, 28px); }
.g4g-slider4p__scroll-track {
  width: 26px;
  height: 42px;
  border: 2px solid color-mix(in srgb, var(--g4g-primary-contrast) 55%, transparent);
  border-radius: 999px;
  display: grid;
  place-items: start center;
  padding-top: 7px;
}
.g4g-slider4p__scroll-dot {
  width: 4px;
  height: 8px;
  border-radius: 999px;
  background: var(--g4g-primary-contrast);
  animation: g4gScroll 1600ms ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .g4g-slider4p__scroll-dot { animation: none; } }

/* [2026-10-12] Mode ÉDITION (builder) : empilement STATIQUE, un pilier par carte, chaque citation
   et chaque résumé éditables séparément (le slider épinglé partageait un seul élément que le
   défilement réécrivait → la saisie était perdue avant l'enregistrement). Chaque carte reprend la
   couleur de son pilier (comme le pin public) pour prévisualiser le rendu réel. Rendu uniquement
   quand cms_editing (jamais mesuré par la parité). */
.g4g-slider4p__editlist { max-width: var(--lp-width); margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px) clamp(40px, 6vw, 72px); display: grid; gap: clamp(20px, 3vw, 32px); }
.g4g-slider4p__editcard { display: grid; grid-template-columns: minmax(0, 46%) 1fr; gap: clamp(18px, 2.5vw, 32px); align-items: center; border-radius: 16px; padding: clamp(16px, 2vw, 26px); background-color: color-mix(in srgb, var(--sc, var(--g4g-planet)) 58%, var(--g4g-slider-shade)); }
.g4g-slider4p__editcard[data-active-accent="people"] { --sc: var(--g4g-people); }
.g4g-slider4p__editcard[data-active-accent="planet"] { --sc: var(--g4g-planet); }
.g4g-slider4p__editcard[data-active-accent="prosperity"] { --sc: var(--g4g-prosperity); }
.g4g-slider4p__editcard[data-active-accent="purpose"] { --sc: var(--g4g-purpose); }
.g4g-slider4p__editmedia { position: relative; border-radius: 12px; overflow: hidden; box-shadow: var(--g4g-shadow-lg); }
.g4g-slider4p__editmedia .g4g-slider4p__img--before { position: static; display: block; width: 100%; height: auto; max-height: none; }
.g4g-slider4p__editcopy { text-align: left; color: var(--g4g-primary-contrast); }
.g4g-slider4p__editcopy .g4g-slider4p__name { font-size: clamp(1.5rem, 3vw, 2.2rem); }
.g4g-slider4p__editcopy .g4g-slider4p__quote,
.g4g-slider4p__editcopy .g4g-slider4p__summary { margin: 10px 0 0; max-width: none; min-height: 0; }
@media (max-width: 760px) { .g4g-slider4p__editcard { grid-template-columns: 1fr; } }

/* [2026-09-08] « Clarifier. Décider. Agir. » (Méthode 4P, sous le slider) — photo à gauche
   (formes 4P décoratives, esprit du héro, composition distincte) + éditorial à droite.
   Demande Alexandre. Formes en couleurs de pilier (color-mix pour l'adoucir). */
.g4g-landing .g4g-clarifier { background: var(--g4g-surface); }
.g4g-clarifier__inner {
  max-width: var(--lp-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.95fr 1fr;
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
}
.g4g-clarifier__media { position: relative; isolation: isolate; }
.g4g-clarifier__photo {
  position: relative;
  z-index: 2;
  border-radius: clamp(18px, 2.4vw, 30px);
  overflow: hidden;
  box-shadow: var(--g4g-shadow-lg);
  aspect-ratio: 1 / 1;
}
.g4g-clarifier__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.g4g-clarifier__deco { position: absolute; z-index: 1; pointer-events: none; }
.g4g-cld--ring {
  width: clamp(120px, 16vw, 200px);
  height: clamp(120px, 16vw, 200px);
  border: clamp(10px, 1.4vw, 18px) solid color-mix(in srgb, var(--g4g-planet) 52%, transparent);
  border-radius: 999px;
  top: -7%;
  left: -8%;
}
.g4g-cld--square {
  width: clamp(70px, 9vw, 122px);
  height: clamp(70px, 9vw, 122px);
  background: color-mix(in srgb, var(--g4g-purpose) 80%, transparent);
  border-radius: clamp(10px, 1.4vw, 18px);
  right: -6%;
  bottom: 9%;
  z-index: 3;
}
.g4g-cld--dot {
  width: clamp(40px, 5vw, 68px);
  height: clamp(40px, 5vw, 68px);
  background: var(--g4g-people);
  border-radius: 999px;
  right: 14%;
  top: -7%;
  z-index: 3;
}
.g4g-clarifier__eyebrow {
  display: block;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g4g-accent);
  font-size: 0.85rem;
  margin-bottom: 12px;
}
.g4g-clarifier__title {
  margin: 0;
  font-size: calc(clamp(34px, 4.2vw, 56px) * var(--g4g-title-scale, 1));
  line-height: 1.06;
  letter-spacing: -0.025em;
  font-weight: var(--g4g-weight-light);
}
.g4g-clarifier__title span { font-weight: var(--g4g-weight-semibold); }
.g4g-clarifier__body { margin-top: clamp(18px, 2.2vw, 28px); }
.g4g-clarifier__body p {
  margin: 0 0 14px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--g4g-text-muted);
  max-width: 60ch;
  text-wrap: pretty;
}
.g4g-clarifier__body p:last-child { margin-bottom: 0; }
@media (max-width: 860px) {
  .g4g-clarifier__inner { grid-template-columns: 1fr; }
  .g4g-clarifier__media { max-width: 460px; margin: 0 auto; }
}

/* [2026-09-08] Diagramme des programmes (Méthode 4P, Option A) — séquence verticale connectée
   des 5 programmes GLOBAL (reconstruction HTML propre, responsive). Survol/clic d'un nom →
   description dessous (bascule JS). Wordmarks de marque (roue 4P) réutilisés. Demande Alexandre. */
.g4g-landing .g4g-progdiag-sec { background: var(--g4g-surface); }
.g4g-progdiag-sec__head { max-width: var(--lp-width); margin: 0 auto clamp(24px, 3vw, 40px); text-align: center; }
.g4g-progdiag-sec__eyebrow {
  display: block;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g4g-accent);
  font-size: 0.85rem;
  margin-bottom: 12px;
}
.g4g-progdiag-sec__title {
  margin: 0;
  font-size: calc(clamp(34px, 4.2vw, 56px) * var(--g4g-title-scale, 1));
  line-height: 1.06;
  letter-spacing: -0.025em;
  font-weight: var(--g4g-weight-light);
}
.g4g-progdiag-sec__title span { font-weight: var(--g4g-weight-semibold); }
/* [2026-09-09 · Lot 5a] Image du header (logo M4P — MÊME que l'accueil) + paragraphe centré. */
/* [2026-10-12] Logo M4P de l'en-tête de l'organigramme AGRANDI de 50 % (demande Alexandre). */
.g4g-progdiag-sec__logo { display: block; width: clamp(144px, 16.5vw, 198px); height: auto; margin: clamp(16px, 2.2vw, 26px) auto 0; }
.g4g-progdiag-sec__intro { max-width: 760px; margin: clamp(16px, 2vw, 24px) auto 0; color: var(--g4g-text-muted); font-size: 17px; line-height: 1.65; text-wrap: pretty; }
.g4g-progdiag-sec__intro :is(b, strong) { color: var(--g4g-primary); font-weight: var(--g4g-weight-semibold); }
/* [Lot 5a] 2 COLONNES : organigramme (gauche) ↔ texte dynamique (droite). Le logo M4P, les 4
   piliers et la ligne bleue qui étaient DANS le diagramme ont été RETIRÉS (déplacés au header). */
.g4g-progdiag { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; position: relative; }
/* Cascade verticale centrée + connecteurs entre étapes (colonne de GAUCHE). */
.g4g-progdiag__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; }
.g4g-progdiag__step { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; }
.g4g-progdiag__step + .g4g-progdiag__step::before {
  content: "";
  width: 2px;
  height: clamp(22px, 3vw, 40px);
  background: var(--g4g-border-strong);
  margin: 4px 0;
}
/* Wordmark de marque (roue 4P) — réutilise l'idiome des programmes. */
.g4g-progdiag__wm { display: inline-flex; align-items: center; gap: 1px; font-weight: var(--g4g-weight-bold); font-size: clamp(22px, 2.6vw, 32px); letter-spacing: -0.01em; line-height: 1; }
.g4g-progdiag__wm-txt { color: var(--g4g-wordmark-muted); }
.g4g-progdiag__wm-o {
  width: 0.9em;
  height: 0.9em;
  border-radius: 999px;
  background: conic-gradient(var(--g4g-sdg-yellow) 0 90deg, var(--g4g-sdg-red) 90deg 180deg, var(--g4g-sdg-blue) 180deg 270deg, var(--g4g-sdg-green) 270deg 360deg);
  display: inline-grid;
  place-items: center;
  margin: 0 1px;
}
.g4g-progdiag__wm-o > span { width: 0.44em; height: 0.44em; border-radius: 999px; background: var(--g4g-surface); }
.g4g-progdiag__wm-suffix { color: var(--g4g-primary); font-weight: var(--g4g-weight-bold); margin-left: 4px; }
.g4g-progdiag__wm--sm { font-size: clamp(13px, 1.5vw, 16px); }
/* [2026-10-23] Logo choisi au builder (programme / niveau ESG) : hauteur du logo-texte, proportions gardées. */
.g4g-progdiag__node-logo { display: block; height: clamp(30px, 3.4vw, 42px); width: auto; max-width: 100%; object-fit: contain; }
.g4g-progdiag__level-logo { display: block; height: clamp(14px, 1.5vw, 18px); width: auto; max-width: 100%; object-fit: contain; }
/* Nœud programme (survolable/cliquable). */
.g4g-progdiag__node {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 12px 22px;
  background: transparent;
  cursor: pointer;
  transition: background 160ms var(--lp-ease), border-color 160ms var(--lp-ease), transform 160ms var(--lp-ease);
}
.g4g-progdiag__node:hover,
.g4g-progdiag__node:focus-visible,
.g4g-progdiag__node.is-active {
  background: var(--g4g-primary-soft);
  border-color: color-mix(in srgb, var(--g4g-primary) 22%, transparent);
  transform: translateY(-1px);
  outline: none;
}
.g4g-progdiag__sub { font-size: 14px; color: var(--g4g-text-muted); }
/* Les 4 niveaux ESG — indicatifs, non interactifs, SOUS le nœud ESG (QA 2026-09-09).
   UNE SEULE rangée (nowrap) : gap resserré + wordmark réduit pour tenir dans la colonne
   de gauche (~470px) sans déborder. Repli en 2 rangées sous 560px (voir media query). */
.g4g-progdiag__levels { display: flex; flex-wrap: nowrap; justify-content: center; gap: clamp(8px, 1.4vw, 18px); margin-top: 14px; }
.g4g-progdiag__level { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.g4g-progdiag__levels .g4g-progdiag__wm { font-size: clamp(11px, 1.1vw, 13px); white-space: nowrap; }
.g4g-progdiag__level-name { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--g4g-text-subtle); font-weight: var(--g4g-weight-semibold); white-space: nowrap; }
/* Panneau de description (une seule visible ; JS bascule `hidden`). */
.g4g-progdiag__panel { margin: 0; text-align: left; min-height: clamp(120px, 15vh, 150px); }
.g4g-progdiag__desc-name { display: block; font-weight: var(--g4g-weight-bold); font-size: clamp(18px, 2vw, 24px); color: var(--g4g-primary); letter-spacing: -0.01em; }
.g4g-progdiag__desc-text { margin: 10px 0 0; font-size: 17px; line-height: 1.6; color: var(--g4g-text-muted); text-wrap: pretty; }
/* [2026-09-09 · Lot 5a] Mobile : 1 colonne, organigramme centré ; le texte dynamique apparaît EN
   SURIMPRESSION au toucher d'un nœud (initProgramsDiagram ajoute `is-desc-open` sur le diagramme).
   Re-toucher le nœud, toucher la surimpression ou toucher ailleurs la referme. */
@media (max-width: 760px) {
  .g4g-progdiag { grid-template-columns: 1fr; gap: 0; }
  .g4g-progdiag__panel {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 60;
    margin: 0;
    padding: 20px 22px;
    text-align: center;
    background: var(--g4g-surface);
    border: 1px solid var(--g4g-border-strong);
    border-radius: 16px;
    box-shadow: 0 18px 48px color-mix(in srgb, var(--g4g-ink) 28%, transparent);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 180ms var(--lp-ease), transform 180ms var(--lp-ease), visibility 180ms;
  }
  .g4g-progdiag.is-desc-open .g4g-progdiag__panel { opacity: 1; visibility: visible; transform: none; }
  /* [2026-10-16] Fenêtre mobile (demande Alexandre) : logo du programme + bouton × en haut à droite. */
  .g4g-progdiag__panel { padding-top: 52px; }
  .g4g-progdiag__panel .g4g-progdiag__close { display: grid; }
  .g4g-progdiag__desc .g4g-progdiag__desc-logo { display: block; width: auto; max-width: 72%; height: clamp(36px, 11vw, 48px); object-fit: contain; margin: 0 auto 12px; }
}
/* Bouton × et logo : fenêtre mobile seulement (sur bureau, le panneau est une colonne fixe). */
.g4g-progdiag__close {
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  place-items: center;
  border: none;
  border-radius: 999px;
  background: var(--g4g-surface-sunken);
  color: var(--g4g-text);
  cursor: pointer;
}
.g4g-progdiag__close:focus-visible { outline: none; box-shadow: var(--g4g-focus-ring); }
.g4g-progdiag__desc-logo { display: none; }
@media (max-width: 560px) {
  .g4g-progdiag__wm { font-size: 22px; }
  /* Très petit écran : la rangée des 4 niveaux ESG peut se replier (évite tout
     débordement horizontal) — le « une seule rangée » vaut surtout en desktop. */
  .g4g-progdiag__levels { flex-wrap: wrap; }
}

/* [Lot 8 / demande K] Témoignages texte en carrousel (option A), FOND ENCRE ; médaillon
   cerclé de la couleur 4P (--tc). Un à la fois + flèches/points. Aucune couleur en dur. */
/* Full-bleed encre : `.g4g-landing` (0,2,0) bat `.g4g-landing .g4g-section{background:surface}` → fond foncé pleine largeur (sinon blanc sur texte blanc = invisible). */
/* ===================================================================== */
/* Bande de statistiques à compteurs (bloc `stats_band`) — planche         */
/* « Chiffres qui comptent » du moodboard « G4G en mouvement ».            */
/* Full-bleed encre + photo duotone (grayscale + tint color + voile) en    */
/* parallaxe (data-px/motion.js) ; nombres animés (data-count/motion.js).  */
/* `.g4g-landing` (0,2,0) bat `.g4g-landing .g4g-section{background}`.      */
/* ===================================================================== */
.g4g-landing .g4g-statsband { position: relative; overflow: hidden; background: var(--g4g-ink); color: var(--g4g-primary-contrast); padding: clamp(48px, 7vw, 96px) 0; }
.g4g-statsband__bg { position: absolute; inset: -12% 0; z-index: 0; pointer-events: none; will-change: transform; }
.g4g-statsband__bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); display: block; }
/* Usage validé du duotone : derrière le texte, jamais dessus (tint = teinte de marque, voile = lisibilité). */
.g4g-statsband__tint { position: absolute; inset: 0; background: linear-gradient(135deg, var(--g4g-accent), var(--g4g-ink)); mix-blend-mode: color; }
.g4g-statsband__veil { position: absolute; inset: 0; background: color-mix(in srgb, var(--g4g-ink) 82%, transparent); }
.g4g-statsband__inner { position: relative; z-index: 1; max-width: 1040px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }
.g4g-statsband__head { max-width: 760px; margin: 0 auto; text-align: center; }
.g4g-statsband__eyebrow { display: block; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--g4g-accent-on-dark); font-size: 0.85rem; margin-bottom: 12px; }
.g4g-statsband__title { margin: 0; font-family: var(--g4g-font-heading); font-size: var(--lp-h2); font-weight: 300; line-height: 1.08; color: var(--g4g-primary-contrast); }
.g4g-statsband__intro { margin: 16px auto 0; max-width: 62ch; font-size: clamp(16px, 1.9vw, 18px); line-height: 1.6; color: color-mix(in srgb, var(--g4g-primary-contrast) 72%, transparent); text-wrap: pretty; }
.g4g-statsband__stats { list-style: none; margin: clamp(34px, 4.5vw, 52px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: clamp(22px, 3vw, 34px); }
.g4g-statsband__stat { text-align: center; }
.g4g-statsband__num { font-size: clamp(40px, 5vw, 56px); font-weight: 300; color: var(--g4g-primary-contrast); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.g4g-statsband__suffix { color: var(--g4g-accent-on-dark); font-weight: 400; }
.g4g-statsband__label { font-size: clamp(13px, 1.4vw, 15px); color: color-mix(in srgb, var(--g4g-primary-contrast) 72%, transparent); margin: 8px auto 0; max-width: 26ch; line-height: 1.45; }
.g4g-statsband__bar { width: 34px; height: 3px; border-radius: 2px; margin: 14px auto 0; background: var(--g4g-accent-on-dark); }

.g4g-landing .g4g-ttmn { position: relative; overflow: hidden; background: var(--g4g-ink); color: var(--g4g-primary-contrast); padding: clamp(48px, 7vw, 96px) 0; }
.g4g-ttmn__inner { position: relative; z-index: 1; max-width: 1040px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }
.g4g-ttmn__head { text-align: center; margin-bottom: clamp(28px, 4vw, 48px); }
.g4g-ttmn__eyebrow { display: block; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--g4g-accent-on-dark); font-size: 0.85rem; margin-bottom: 10px; }
.g4g-ttmn__title { margin: 0; font-family: var(--g4g-font-heading); font-size: calc(clamp(28px, 3.6vw, 44px) * var(--g4g-title-scale, 1)); font-weight: var(--g4g-weight-light); line-height: 1.12; }
.g4g-ttmn__subtitle { margin: 14px auto 0; max-width: 60ch; color: color-mix(in srgb, var(--g4g-primary-contrast) 78%, transparent); font-size: 17px; line-height: 1.6; }
/* [2026-09-07] RÈGLE hauteur fixe (demande Alexandre) : témoignages EMPILÉS dans une même
   cellule de grille → la zone prend la hauteur du PLUS LONG ; flèches + points immobiles d'un
   témoignage à l'autre. Visibilité par is-active (opacity), plus de [hidden]. */
.g4g-ttmn__carousel { position: relative; display: grid; }
.g4g-ttmn__slide { grid-area: 1 / 1; display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 3.4vw, 44px); align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.4s var(--lp-ease, ease); }
.g4g-ttmn__slide.is-active { opacity: 1; visibility: visible; }
.g4g-ttmn__slide.is-enter { animation: g4gTtmnIn 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.g4g-ttmn__slide--people { --tc: var(--g4g-people); }
.g4g-ttmn__slide--planet { --tc: var(--g4g-planet); }
.g4g-ttmn__slide--prosperity { --tc: var(--g4g-prosperity); }
.g4g-ttmn__slide--purpose { --tc: var(--g4g-purpose); }
.g4g-ttmn__medallion { width: clamp(120px, 18vw, 180px); aspect-ratio: 1; border-radius: 999px; padding: 5px; flex: none; background: conic-gradient(from 210deg, var(--tc, var(--g4g-planet)), transparent 70%); }
.g4g-ttmn__medallion img { width: 100%; height: 100%; object-fit: cover; border-radius: 999px; border: 3px solid var(--g4g-ink); display: block; }
.g4g-ttmn__mark { font-family: var(--g4g-font-heading); font-size: 3.4rem; line-height: 0.4; color: var(--tc, var(--g4g-planet)); display: block; }
.g4g-ttmn__quote { quotes: none; margin: 8px 0 16px; font-family: var(--g4g-font-heading); font-weight: 500; font-size: clamp(1.1rem, 1.9vw, 1.45rem); line-height: 1.42; }
.g4g-ttmn__who { display: flex; flex-direction: column; gap: 2px; }
.g4g-ttmn__name { font-weight: 700; }
.g4g-ttmn__role { color: color-mix(in srgb, var(--g4g-primary-contrast) 68%, transparent); font-size: 0.9rem; }
.g4g-ttmn__ctl { display: flex; align-items: center; justify-content: flex-start; gap: 14px; margin-top: clamp(24px, 3vw, 40px); }
.g4g-ttmn__arrow { width: 40px; height: 40px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--g4g-primary-contrast) 22%, transparent); background: color-mix(in srgb, var(--g4g-primary-contrast) 6%, transparent); color: var(--g4g-primary-contrast); cursor: pointer; font-size: 1.2rem; line-height: 1; }
.g4g-ttmn__dots { display: flex; gap: 9px; }
.g4g-ttmn__dot { width: 10px; height: 10px; border-radius: 999px; border: 0; background: color-mix(in srgb, var(--g4g-primary-contrast) 28%, transparent); cursor: pointer; padding: 0; transition: all 0.2s; }
.g4g-ttmn__dot.on { background: var(--g4g-primary-contrast); width: 28px; }
@media (max-width: 640px) { .g4g-ttmn__slide { grid-template-columns: 1fr; justify-items: center; text-align: center; } .g4g-ttmn__who { align-items: center; } }
@keyframes g4gTtmnIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* [Correctif Alexandre 2026-09-03] Rapprochement de l'artefact : petits graphiques du
   G-globe en fond + pastille « défilement auto » à droite des contrôles (bas gauche). */
.g4g-ttmn__deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.g4g-ttmn__shape { position: absolute; border-radius: 999px; }
.g4g-ttmn__shape--ring { width: 340px; height: 340px; right: -90px; top: -110px; border: 2px solid color-mix(in srgb, var(--g4g-accent-on-dark) 40%, transparent); }
.g4g-ttmn__shape--dot { width: 120px; height: 120px; left: -30px; bottom: -40px; background: color-mix(in srgb, var(--g4g-purpose) 16%, transparent); }


@media (max-width: 640px) {  }
.g4g-pillars__panel-name {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: var(--g4g-weight-bold);
  color: var(--g4g-text);
}
.g4g-pillars__panel-text {
  margin: 22px 0 0;
  font-size: clamp(21px, 2.2vw, 29px);
  line-height: 1.35;
  font-weight: 400;
  letter-spacing: -0.012em;
  color: var(--g4g-text);
  text-wrap: pretty;
}
.g4g-pillars__touche { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--g4g-border); }
.g4g-pillars__touche-label {
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: var(--g4g-weight-semibold);
  color: var(--g4g-text-muted);
}
.g4g-pillars__chips { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.g4g-pillars__chip {
  border: 1px solid var(--g4g-border);
  border-radius: 999px;
  background: var(--g4g-surface-sunken);
  padding: 8px 15px;
  font-size: 13.5px;
  font-weight: var(--g4g-weight-medium);
  color: var(--g4g-text-muted);
}
.g4g-pillars__note { margin: 26px 0 0; font-size: 13px; line-height: 1.6; color: var(--g4g-text-muted); max-width: 96ch; }
.g4g-pillars__note strong { font-weight: var(--g4g-weight-semibold); color: var(--g4g-text-muted); }
@media (max-width: 860px) {
  .g4g-pillars__grid { grid-template-columns: 1fr; }
  .g4g-pillars__sticky-col { position: static; }
}

/* --- S4 Application : image + éditorial + 3 étapes --- */
.g4g-landing .g4g-application { background: var(--g4g-surface); }
.g4g-application__inner {
  max-width: var(--lp-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.g4g-application__media { position: relative; width: 100%; aspect-ratio: 4 / 5; }
.g4g-application__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 20px;
  background: var(--g4g-surface-alt);
}
.g4g-application__eyebrow {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: var(--g4g-weight-semibold);
  color: var(--g4g-accent);
}
.g4g-application__title {
  margin: 14px 0 0;
  font-size: calc(clamp(36px, 4.4vw, 58px) * var(--g4g-title-scale, 1));
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: var(--g4g-weight-light);
  max-width: 20ch;
}
.g4g-application__title span { font-weight: var(--g4g-weight-semibold); }
.g4g-application__lede {
  margin: 22px 0 0;
  font-size: 17px;
  line-height: 1.65;
  color: var(--g4g-text-muted);
  max-width: 52ch;
  text-wrap: pretty;
}
.g4g-application__steps { margin-top: 30px; display: flex; flex-direction: column; gap: 12px; }
.g4g-application__step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  border: 1px solid var(--g4g-border);
  border-radius: 20px;
  background: var(--g4g-surface-sunken);
  padding: 20px 22px;
}
.g4g-application__step-num {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--g4g-primary);
  color: var(--g4g-primary-contrast);
  font-size: 14px;
  font-weight: var(--g4g-weight-bold);
  display: grid;
  place-items: center;
  flex: none;
}
.g4g-application__step-title { font-size: 17px; font-weight: var(--g4g-weight-semibold); letter-spacing: -0.01em; }
.g4g-application__step-desc { margin-top: 5px; font-size: 14.5px; line-height: 1.55; color: var(--g4g-text-muted); }
@media (max-width: 860px) {
  .g4g-application__inner { grid-template-columns: 1fr; }
  .g4g-application__media { max-width: 420px; }
}

/* --- S5 Passerelles : titre + 3 cartes-lien (ODD / Vision / ESG) --- */
.g4g-landing .g4g-passerelles {
  background: var(--g4g-surface-sunken);
  border-top: 1px solid var(--g4g-border);
}
.g4g-passerelles__inner { max-width: var(--lp-width); margin: 0 auto; }
.g4g-passerelles__title {
  margin: 0;
  font-size: calc(clamp(32px, 3.8vw, 52px) * var(--g4g-title-scale, 1));
  line-height: 1.06;
  letter-spacing: -0.022em;
  font-weight: var(--g4g-weight-light);
  max-width: 22ch;
}
.g4g-passerelles__title span { font-weight: var(--g4g-weight-semibold); }
.g4g-passerelles__grid {
  margin-top: clamp(28px, 3.5vw, 44px);
  display: grid;
  grid-template-columns: 1.38fr 1fr;
  gap: 20px;
}
.g4g-passerelles__col { display: flex; flex-direction: column; gap: 20px; }
.g4g-passerelles__card {
  border: 1px solid var(--g4g-border);
  border-radius: 20px;
  background: var(--g4g-surface);
  padding: 30px 32px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: box-shadow 140ms var(--lp-ease), transform 140ms var(--lp-ease);
}
.g4g-passerelles__card:hover { box-shadow: var(--g4g-shadow-md); transform: translateY(-2px); }
.g4g-passerelles__card--vision { border-color: var(--g4g-accent); background: var(--g4g-primary-soft); padding: 26px 28px; flex: 1; }
.g4g-passerelles__card--esg { padding: 26px 28px; flex: 1; }
.g4g-passerelles__eyebrow {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: var(--g4g-weight-semibold);
  color: var(--g4g-accent);
}
.g4g-passerelles__eyebrow--muted { color: var(--g4g-text-muted); }
.g4g-passerelles__card-title {
  margin-top: 12px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  font-weight: var(--g4g-weight-medium);
}
.g4g-passerelles__card-title--lg { margin-top: 14px; font-size: clamp(24px, 2.6vw, 36px); letter-spacing: -0.018em; max-width: 24ch; }
.g4g-passerelles__card-title--vision { font-size: clamp(22px, 2.2vw, 30px); color: var(--g4g-primary); }
.g4g-passerelles__card-title--esg { font-size: clamp(22px, 2.2vw, 30px); }
.g4g-passerelles__card-desc {
  margin: 12px 0 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--g4g-text-muted);
  max-width: 46ch;
  text-wrap: pretty;
}
.g4g-passerelles__card--vision .g4g-passerelles__card-desc,
.g4g-passerelles__card--esg .g4g-passerelles__card-desc { margin-top: 10px; font-size: 14.5px; }
.g4g-passerelles__strip { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 5px; }
.g4g-passerelles__tile {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  overflow: hidden;
  display: block;
}
.g4g-passerelles__tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.g4g-passerelles__spacer { flex: 1; }
.g4g-passerelles__cta {
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: var(--g4g-weight-semibold);
  color: var(--g4g-accent);
}
.g4g-passerelles__cta--sm { margin-top: 16px; font-size: 14.5px; }
@media (max-width: 860px) {
  .g4g-passerelles__grid { grid-template-columns: 1fr; }
}

/* --- S6 CTA final Méthode 4P --- */
.g4g-landing .g4g-cta4p { background: var(--g4g-surface); }
.g4g-cta4p__inner { max-width: var(--lp-width); margin: 0 auto; text-align: center; }
.g4g-cta4p__title {
  margin: 0 auto;
  font-size: calc(clamp(38px, 5vw, 68px) * var(--g4g-title-scale, 1));
  line-height: 1.04;
  letter-spacing: -0.028em;
  font-weight: var(--g4g-weight-light);
  max-width: 24ch;
}
.g4g-cta4p__title span { font-weight: var(--g4g-weight-semibold); }
.g4g-cta4p__subtitle {
  margin: 22px auto 0;
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--g4g-text-muted);
  max-width: 52ch;
  text-wrap: pretty;
}
.g4g-cta4p__actions { margin-top: 32px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.g4g-cta4p__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 15px 30px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: var(--g4g-weight-semibold);
  text-decoration: none;
  transition: background 140ms var(--lp-ease);
}
.g4g-cta4p__cta--primary { background: var(--g4g-primary); color: var(--g4g-primary-contrast); }
.g4g-cta4p__cta--primary:hover { background: var(--g4g-primary-hover); }
.g4g-cta4p__cta--secondary { border: 1.5px solid var(--g4g-primary); color: var(--g4g-primary); }
.g4g-cta4p__cta--secondary:hover { background: var(--g4g-primary-soft); }
@media (prefers-reduced-motion: reduce) {
  .g4g-pillars__letter,
  .g4g-pillars__rail-item,
  .g4g-passerelles__card,
  .g4g-hero4p__cta,
  .g4g-cta4p__cta { transition: none; }
}

/* Accordéons plus larges (nom + libellé complet) : max 3 colonnes. */
@media (min-width: 900px) {
  .g4g-landing .g4g-sdg-grid__list { grid-template-columns: repeat(3, 1fr); }
}
.g4g-landing .g4g-sdg {
  border: 1px solid var(--g4g-border);
  border-radius: var(--g4g-radius-lg);
  background: var(--g4g-surface);
  padding: var(--g4g-space-4) var(--g4g-space-5);
}
/* Accent ODD au dépliage : filet supérieur à la couleur ONU (via `--sdg`,
 * posé par la classe `g4g-sdg--<n>` ajoutée au <details>). */
.g4g-landing .g4g-sdg[open] {
  border-top: 4px solid var(--sdg, var(--g4g-border-strong));
  box-shadow: var(--g4g-shadow-md);
}
.g4g-landing .g4g-sdg .g4g-sdg-badge { width: 40px; height: 40px; font-size: 22px; }
.g4g-landing .g4g-sdg__name { font-size: var(--g4g-text-md); font-weight: var(--g4g-weight-semibold); color: var(--g4g-text); }

/* ===================================================================== */
/* SITE VITRINE — LOT 3 « Contact + Nouvelles ». Réutilise le calque       */
/* `.g4g-landing` (bandes pleine largeur, titres Light) ; n'ajoute que la   */
/* carte du formulaire de contact et la grille de cartes de l'index         */
/* Nouvelles. 100 % tokens `var(--g4g-*)`, scopé `.g4g-landing`, zéro style  */
/* inline (CSP). Le bloc `contact_form` réel reste 4 champs + honeypot,      */
/* envoi serveur (PRG), SANS JS : les puces « Sujet » routées par audience,  */
/* la validation live et le panneau succès animé de la maquette sont hors    */
/* périmètre (fiche Claude Design). L'index Nouvelles est une VUE Django →    */
/* gabarit stylé DIRECTEMENT (pas de scope par slug). Images de couverture,   */
/* « À la une », filtres par thème, recherche et infolettre = hors périmètre  */
/* (aucun champ modèle ni backend ; « ne pas créer de contenu »).            */
/* ===================================================================== */

/* --- Contact : carte + grille de champs (maquette « G4G Site - Contact ») - */
.g4g-landing .g4g-contact { background: var(--g4g-surface); }
/* En-tête : sur-ligne (§12) + grand titre Light + accroche. */
.g4g-landing .g4g-contact__display {
  font-family: var(--g4g-font-heading);
  font-weight: var(--g4g-weight-light);
  font-size: var(--lp-h1);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--g4g-text);
  margin: 0 0 var(--g4g-space-5);
  text-wrap: balance;
  overflow-wrap: break-word;
}
.g4g-landing .g4g-contact__lead {
  margin: 0 0 clamp(28px, 4vw, 48px);
  color: var(--g4g-text-muted);
  font-size: var(--g4g-text-lg);
  line-height: 1.6;
  max-width: 58ch;
  text-wrap: pretty;
}
/* 2 colonnes : formulaire (~1,42fr) + aside (1fr), comme la maquette. */
.g4g-landing .g4g-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
}
/* Sous 900 px : l'aside passe sous le formulaire (une colonne). */
@media (max-width: 900px) {
  .g4g-landing .g4g-contact__grid { grid-template-columns: 1fr; }
}
/* Carte du formulaire (colonne gauche). */
.g4g-landing .g4g-contact__panel {
  border: 1px solid var(--g4g-border);
  border-radius: var(--g4g-radius-lg);
  background: var(--g4g-surface);
  box-shadow: var(--g4g-shadow-md);
  padding: clamp(24px, 3vw, 38px);
}
/* Grille de champs interne : Prénom | Nom, puis Courriel / Message pleine largeur. */
.g4g-landing .g4g-contact__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--g4g-space-5);
}
.g4g-landing .g4g-contact .g4g-field { margin: 0; }
.g4g-landing .g4g-contact__fields .g4g-field--wide { grid-column: 1 / -1; }
/* Grands téléphones et moins (≤560 px) : une colonne (Prénom/Nom empilés). */
@media (max-width: 560px) {
  .g4g-landing .g4g-contact__fields { grid-template-columns: 1fr; }
}
.g4g-landing .g4g-contact .g4g-field__label {
  display: block;
  margin-bottom: var(--g4g-space-2);
  font-size: var(--g4g-text-sm);
  font-weight: var(--g4g-weight-semibold);
  color: var(--g4g-text);
}
/* Les champs `{{ form.x }}` sont des <input>/<textarea> BRUTS (le ModelForm
 * ne pose pas de classe) : on les stylise par SÉLECTEUR D'ÉLÉMENT, scopé à la
 * carte de contact d'une page d'atterrissage — jamais globalement. */
.g4g-landing .g4g-contact input,
.g4g-landing .g4g-contact textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 52px;
  padding: var(--g4g-space-3) var(--g4g-space-4);
  border: 1.5px solid var(--g4g-border-strong);
  border-radius: var(--g4g-radius-md);
  background: var(--g4g-surface);
  font: inherit;
  font-size: var(--g4g-text-md);
  color: var(--g4g-text);
  transition: border-color 140ms var(--lp-ease), box-shadow 140ms var(--lp-ease);
}
.g4g-landing .g4g-contact textarea {
  min-height: 150px;
  resize: vertical;
  line-height: var(--g4g-leading-normal);
}
.g4g-landing .g4g-contact input:focus-visible,
.g4g-landing .g4g-contact textarea:focus-visible {
  outline: none;
  border-color: var(--g4g-accent);
  box-shadow: var(--g4g-field-focus);
}
.g4g-landing .g4g-contact__errors {
  margin: 0 0 var(--g4g-space-4);
  padding: var(--g4g-space-3) var(--g4g-space-4);
  border: 1px solid var(--g4g-border);
  border-radius: var(--g4g-radius-md);
  background: var(--g4g-surface-sunken);
  color: var(--g4g-danger);
  font-size: var(--g4g-text-sm);
}
.g4g-landing .g4g-contact .g4g-field__error {
  display: block;
  margin-top: var(--g4g-space-2);
  color: var(--g4g-danger);
  font-size: var(--g4g-text-sm);
  font-weight: var(--g4g-weight-medium);
}
/* `{{ field.errors }}` rend une <ul class="errorlist"> : on neutralise la puce. */
.g4g-landing .g4g-contact .g4g-field__error ul { margin: 0; padding: 0; list-style: none; }
.g4g-landing .g4g-contact__actions {
  margin-top: var(--g4g-space-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--g4g-space-4);
}
.g4g-landing .g4g-contact__actions .g4g-btn {
  min-height: 52px;
  padding: var(--g4g-space-4) var(--g4g-space-8);
  font-size: var(--g4g-text-md);
}
.g4g-landing .g4g-contact__note {
  margin: 0;
  max-width: 38ch;
  color: var(--g4g-text-muted);
  font-size: var(--g4g-text-sm);
  line-height: var(--g4g-leading-snug);
}

/* Aside : cartes « Nous joindre autrement » (coordonnées) + « Vous cherchez plutôt… ». */
.g4g-landing .g4g-contact__aside {
  display: flex;
  flex-direction: column;
  gap: var(--g4g-space-5);
}
.g4g-landing .g4g-contact__card {
  border: 1px solid var(--g4g-border);
  border-radius: var(--g4g-radius-lg);
  padding: clamp(20px, 2.4vw, 28px);
}
/* La carte coordonnées ressort (sunken) ; la carte raccourcis reste blanche.
 * Ciblage par RÔLE (pas par position) : robuste si l'une des deux est absente. */
.g4g-landing .g4g-contact__card--coords { background: var(--g4g-surface-sunken); }
.g4g-landing .g4g-contact__card--links { background: var(--g4g-surface); }
.g4g-landing .g4g-contact__card-title {
  margin: 0 0 var(--g4g-space-4);
  font-size: var(--g4g-text-xs);
  font-weight: var(--g4g-weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--g4g-text-muted);
}
.g4g-landing .g4g-contact__coords {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--g4g-space-4);
}
.g4g-landing .g4g-contact__coords li { display: flex; flex-direction: column; gap: var(--g4g-space-1); min-width: 0; }
.g4g-landing .g4g-contact__coord-label {
  font-size: var(--g4g-text-xs);
  font-weight: var(--g4g-weight-semibold);
  color: var(--g4g-text-muted);
}
/* Valeur de coordonnée : base 15px (maquette 15.5px texte / 16px lien). */
.g4g-landing .g4g-contact__coord-value { color: var(--g4g-text); font-size: var(--g4g-text-base); font-weight: var(--g4g-weight-medium); overflow-wrap: break-word; }
/* Lien courriel : semibold (maquette 600), au-dessus du medium hérité. */
.g4g-landing a.g4g-contact__coord-value { color: var(--g4g-accent); font-weight: var(--g4g-weight-semibold); text-decoration: none; }
.g4g-landing a.g4g-contact__coord-value:hover { text-decoration: underline; }
.g4g-landing a.g4g-contact__coord-value:focus-visible { outline: 2px solid var(--g4g-accent); outline-offset: 2px; border-radius: var(--g4g-radius-sm); }
.g4g-landing .g4g-contact__links { list-style: none; margin: 0; padding: 0; }
.g4g-landing .g4g-contact__link {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: var(--g4g-space-3) 0;
  border-top: 1px solid var(--g4g-border);
  color: var(--g4g-text);
  font-size: var(--g4g-text-base); /* maquette 15.5px (app héritait 14px) */
  font-weight: var(--g4g-weight-semibold);
  text-decoration: none;
}
.g4g-landing .g4g-contact__links li:first-child .g4g-contact__link { border-top: 0; }
.g4g-landing .g4g-contact__link:hover { color: var(--g4g-accent); }
.g4g-landing .g4g-contact__link:focus-visible { outline: 2px solid var(--g4g-accent); outline-offset: 2px; border-radius: var(--g4g-radius-sm); }

/* --- Nouvelles (index) : héro fin + grille de cartes (maquette « Nouvelles ») */
.g4g-landing .g4g-news-hero {
  padding-block: var(--lp-py) clamp(20px, 3vw, 32px);
  background: var(--g4g-surface);
}
.g4g-landing .g4g-news-hero__title {
  font-family: var(--g4g-font-heading);
  font-weight: var(--g4g-weight-light);
  font-size: var(--lp-h1);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--g4g-text);
  margin: 0;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.g4g-landing .g4g-news-hero__context {
  margin: var(--g4g-space-4) 0 0;
  color: var(--g4g-text-muted);
  font-size: var(--g4g-text-lg);
}
/* Barre de filtres collante (recherche + thèmes) — data-dc-role="filters".
   Rendu serveur, sans-JS : la recherche est un <form get>, les thèmes et
   « Réinitialiser » sont des liens qui recomposent ?q=/?theme=. Pleine largeur
   (bande collante), contenu recentré sur --lp-width. Tokens-only, CSP-safe. */
/* [2026-09-08] Barre de filtres NON collante (demande Alexandre) : retrait de
   position:sticky/top/z-index + du fond translucide/blur (inutile hors sticky). */
.g4g-landing .g4g-news__filters {
  background: var(--g4g-surface);
  border-bottom: 1px solid var(--g4g-border);
}
/* [2026-09-08] Scroll infini des nouvelles : sentinelle « Voir plus » (partial
   _news_more.html). Même habillage que le load-more du répertoire, mais scopé
   `.g4g-landing` (l'index nouvelles ne charge que sections.css). `:empty` = dernière
   page (l'OOB a vidé le conteneur) → rien affiché. */
.g4g-landing .g4g-loadmore { display: flex; justify-content: center; margin-top: clamp(34px, 4vw, 52px); }
.g4g-landing .g4g-loadmore:empty { display: none; }
.g4g-landing .g4g-loadmore__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--g4g-space-2);
  min-height: 52px;
  padding: 15px 30px;
  border: 1.5px solid var(--g4g-primary);
  border-radius: var(--g4g-radius-pill);
  background: transparent;
  color: var(--g4g-primary);
  font-size: var(--g4g-text-md);
  font-weight: var(--g4g-weight-semibold);
  text-decoration: none;
  cursor: pointer;
}
.g4g-landing .g4g-loadmore__btn:hover { background: var(--g4g-primary-soft); }
.g4g-landing .g4g-loadmore__btn:focus-visible { outline: none; box-shadow: var(--g4g-focus-ring); }
.g4g-landing .g4g-loadmore__btn.htmx-request { opacity: 0.6; pointer-events: none; }
.g4g-landing .g4g-news__filters-inner {
  max-width: var(--lp-width);
  margin: 0 auto;
  padding: 14px var(--lp-gutter);
}
.g4g-landing .g4g-news__filters-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.g4g-landing .g4g-news__search {
  flex: 1 1 460px;
  min-width: 280px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 18px;
  border: 1.5px solid var(--g4g-border-strong);
  border-radius: 999px;
  background: var(--g4g-surface);
  box-shadow: var(--g4g-shadow-sm);
}
.g4g-landing .g4g-news__search:focus-within { border-color: var(--g4g-primary); box-shadow: var(--g4g-focus-ring); }
.g4g-landing .g4g-news__search .g4g-icon { flex: none; color: var(--g4g-text-muted); }
.g4g-landing .g4g-news__search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  color: var(--g4g-text);
}
.g4g-landing .g4g-news__search-clear {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--g4g-surface-alt);
  color: var(--g4g-text-muted);
}
.g4g-landing .g4g-news__search-clear:hover { color: var(--g4g-text); }
.g4g-landing .g4g-news__count { margin: 0; font-size: 13.5px; color: var(--g4g-text-muted); white-space: nowrap; }
.g4g-landing .g4g-news__themes-row { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.g4g-landing .g4g-news__themes-label {
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--g4g-text-subtle);
}
.g4g-landing .g4g-news__themes { display: flex; flex-wrap: wrap; gap: 8px; }
.g4g-landing .g4g-news__theme {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--g4g-border);
  border-radius: 999px;
  background: var(--g4g-surface);
  color: var(--g4g-text-muted);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: background 140ms var(--lp-ease), border-color 140ms var(--lp-ease), color 140ms var(--lp-ease);
}
.g4g-landing .g4g-news__theme:hover { border-color: var(--g4g-primary); color: var(--g4g-primary); }
.g4g-landing .g4g-news__theme[aria-current="true"] {
  border-color: var(--g4g-primary);
  background: var(--g4g-primary);
  color: var(--g4g-primary-contrast);
}
.g4g-landing .g4g-news__reset {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 9px 16px;
  border: 1px solid var(--g4g-border);
  border-radius: 999px;
  background: var(--g4g-surface);
  color: var(--g4g-text-muted);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}
.g4g-landing .g4g-news__reset:hover { border-color: var(--g4g-primary); color: var(--g4g-primary); }

.g4g-landing .g4g-news {
  padding-block: clamp(20px, 3vw, 32px) var(--lp-py);
  background: var(--g4g-surface);
}

/* Article « à la une » (news-featured) : carte-lien 2 colonnes. */
.g4g-landing .g4g-news-featured-sec { padding-block: clamp(34px, 4vw, 52px) 0; background: var(--g4g-surface); }
.g4g-landing .g4g-news__featured {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 44px);
  align-items: center;
  border: 1px solid var(--g4g-border);
  border-radius: 20px;
  background: var(--g4g-surface-sunken);
  padding: clamp(20px, 2.4vw, 30px);
  text-decoration: none;
  color: inherit;
  transition: transform 140ms var(--lp-ease), box-shadow 140ms var(--lp-ease);
}
@media (min-width: 900px) { .g4g-landing .g4g-news__featured { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.g4g-landing .g4g-news__featured:hover { transform: translateY(-2px); box-shadow: var(--g4g-shadow-md); }
.g4g-landing .g4g-news__featured-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 20px;
  overflow: hidden;
  background: var(--g4g-surface-alt);
}
/* Image de couverture (à la une + carte) : couvre le cadre 3/2, coins clippés
   par le conteneur. Cadre à ratio défini → aucun collapse même en lazy. */
.g4g-landing .g4g-news__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.g4g-landing .g4g-news__featured-flag {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  background: var(--g4g-primary);
  color: var(--g4g-surface);
  padding: 8px 15px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.g4g-landing .g4g-news__featured-body { display: flex; flex-direction: column; min-width: 0; }
.g4g-landing .g4g-news__featured-title {
  margin-top: 16px;
  font-size: clamp(26px, 2.8vw, 40px);
  line-height: 1.14;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--g4g-text);
}
.g4g-landing .g4g-news__featured-intro {
  margin-top: 14px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--g4g-text-muted);
  max-width: 52ch;
  text-wrap: pretty;
}
.g4g-landing .g4g-news__featured-cta {
  align-self: flex-start;
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 24px;
  border-radius: 999px;
  background: var(--g4g-primary);
  color: var(--g4g-surface);
  font-size: 15px;
  font-weight: 600;
}

/* Signature auteur (à la une) + méta « date · X min de lecture ». Avatar =
   initiales « NC » (auteur placeholder « Nom à confirmer », fidèle à la maquette
   qui prévoit une signature ; aucun champ auteur en modèle → données factices
   assumées). Le même avatar (réduit) coiffe la méta des cartes de la grille. */
.g4g-landing .g4g-news__byline { margin-top: 20px; display: flex; align-items: center; gap: 12px; }
.g4g-landing .g4g-news__avatar {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--g4g-primary-soft);
  color: var(--g4g-primary);
  font-size: 14px;
  font-weight: 600;
  display: grid;
  place-items: center;
}
.g4g-landing .g4g-news__avatar--sm { width: 30px; height: 30px; font-size: 11px; font-weight: 700; }
.g4g-landing .g4g-news__byline-text { min-width: 0; display: flex; flex-direction: column; }
.g4g-landing .g4g-news__author { font-size: 14px; font-weight: 600; color: var(--g4g-text); }
.g4g-landing .g4g-news__meta { min-width: 0; font-size: 12.5px; color: var(--g4g-text-muted); }
.g4g-landing .g4g-news__byline .g4g-news__meta { color: var(--g4g-text-subtle); }

/* Grille (news-grid) de cartes (news-card). */
.g4g-landing .g4g-news__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 600px) { .g4g-landing .g4g-news__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .g4g-landing .g4g-news__grid { grid-template-columns: repeat(3, 1fr); } }
.g4g-landing .g4g-news__cell { min-width: 0; display: flex; }
.g4g-landing .g4g-news__card {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  border: 1px solid var(--g4g-border);
  border-radius: 20px;
  background: var(--g4g-surface);
  padding: 22px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--g4g-shadow-sm);
  transition: transform 140ms var(--lp-ease), box-shadow 140ms var(--lp-ease);
}
.g4g-landing .g4g-news__card:hover { transform: translateY(-2px); box-shadow: var(--g4g-shadow-md); }
.g4g-landing .g4g-news__card-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 20px;
  overflow: hidden;
  background: var(--g4g-surface-alt);
}

/* Pastilles (news-pill) : STRUCTURE mesurée (pilule/espacement/typo). La couleur
   peut être teintée par catégorie/région (dynamique) → hors mesure. */
.g4g-landing .g4g-news__pills { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.g4g-landing .g4g-news__card > .g4g-news__pills { margin-top: 18px; }
.g4g-landing .g4g-news__pill {
  border: 1px solid var(--g4g-border);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--g4g-text-muted);
  background: var(--g4g-surface);
}
.g4g-landing .g4g-news__title {
  margin: 14px 0 0;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.28;
  color: var(--g4g-text);
  overflow-wrap: break-word;
}
.g4g-landing .g4g-news__intro {
  margin: 10px 0 0;
  font-size: 14.5px;
  color: var(--g4g-text-muted);
  line-height: 1.55;
  text-wrap: pretty;
}
.g4g-landing .g4g-news__spacer { flex: 1; }
/* Pied de carte (carte-pied-separateur) : filet haut + avatar réduit + méta. */
.g4g-landing .g4g-news__foot {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--g4g-border);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Pagination : boutons pilule (`.g4g-btn--secondary`) + statut, centrés. */
.g4g-landing .g4g-news__pager {
  margin-top: clamp(34px, 4vw, 52px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--g4g-space-4);
}
.g4g-landing .g4g-news__pager-status { font-size: var(--g4g-text-sm); color: var(--g4g-text-muted); }

/* État vide (news-empty) : carte en pointillé + titre/texte + actions (maquette). */
.g4g-landing .g4g-news__empty {
  border: 1px dashed var(--g4g-border-strong);
  border-radius: 20px;
  background: var(--g4g-surface-sunken);
  padding: clamp(32px, 5vw, 44px) 32px;
  text-align: center;
}
.g4g-landing .g4g-news__empty-title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--g4g-text);
}
.g4g-landing .g4g-news__empty-text {
  margin: 12px auto 0;
  max-width: 48ch;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--g4g-text-muted);
}
.g4g-landing .g4g-news__empty-actions {
  margin-top: 22px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ===================================================================== */
/* SITE VITRINE — LOT 4a « fondations » : sur-ligne (eyebrow, §12) +       */
/* échelle des titres relevée (§13, dans le bloc `.g4g-landing` ci-dessus). */
/* Décisions Claude Design 2026-08-03. 100 % tokens, scopé, zéro inline.    */
/* ===================================================================== */

/* --- Sur-ligne « eyebrow » (§12) : petit label majuscule espacé en couleur --- */
/* accent, au-dessus du titre d'un bloc hero/feature_grid/rich_columns/cta_band. */
/* Champ OPTIONNEL : vide = rien rendu (le gabarit n'émet pas le <p>, jamais    */
/* d'`::before` avec un libellé en dur — i18n + CSP). Classe stylée directement  */
/* (nom unique) pour rendre correctement quel que soit le conteneur. */
.g4g-landing__eyebrow {
  margin: 0 0 var(--g4g-space-3);
  font-size: var(--g4g-text-xs);
  font-weight: var(--g4g-weight-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--g4g-accent);
}

/* ===================================================================== */
/* SITE VITRINE — FAQ RICHE (bloc `faq_riche`, page slug « faq »).          */
/* Habille les classes `.g4g-faqx-*` du gabarit AUTORITAIRE                 */
/* templates/content/blocks/faq_rich.html d'après les maquettes            */
/* « G4G Site - FAQ » (bureau, source de vérité) et « … FAQ mobile ».       */
/* Réutilise le calque `.g4g-landing` (bandes pleine largeur, sur-ligne     */
/* `.g4g-landing__eyebrow`, boutons `.g4g-btn--primary`). 100 % tokens      */
/* `var(--g4g-*)` : zéro couleur littérale (CSP stricte + test anti-hex) ;  */
/* les tailles d'AFFICHAGE hors échelle de tokens restent en clamp()/px     */
/* littéraux, comme les maquettes. Accordéons = <details>/<summary>         */
/* natifs → tout marche sans JS. Scopé `.g4g-landing` pour l'emporter sur   */
/* le rythme générique de `.g4g-landing .g4g-section`.                      */
/* ===================================================================== */

/* Fondu d'ouverture du panneau de réponse (natif [open]). */
@keyframes g4gFaqxReveal {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Héro : titre d'affichage + intro + outils (recherche + actions) ---- */
.g4g-landing .g4g-faqx-hero {
  /* Rythme vertical de la maquette bureau ; le padding-inline plein-cadre
     reste hérité de `.g4g-landing .g4g-section` (recentrage sur --lp-width). */
  padding-block: clamp(44px, 5.5vw, 72px) clamp(28px, 3vw, 40px);
}
.g4g-landing .g4g-faqx__title {
  margin: 0;
  max-width: 22ch;
  font-family: var(--g4g-font-heading);
  font-size: calc(clamp(40px, 5.4vw, 72px) * var(--g4g-title-scale, 1));
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: var(--g4g-weight-light);
  color: var(--g4g-text);
  text-wrap: balance;
  overflow-wrap: break-word;
}
/* Emphase du titre (« nos réponses. » en gras 600), le reste restant léger (300). */
/* [2026-09-08] Titre FAQ en boîte unique RichText : l'emphase (ex-« title-em ») = <b>/<strong>. */
.g4g-landing .g4g-faqx__title :is(b, strong) { font-weight: var(--g4g-weight-semibold); }
.g4g-landing .g4g-faqx__intro {
  margin: 22px 0 0;
  max-width: 58ch;
  font-size: 18px;
  line-height: 1.6;
  color: var(--g4g-text-muted);
  text-wrap: pretty;
}

/* Barre d'outils : champ de recherche extensible + actions groupées. */
.g4g-landing .g4g-faqx__tools {
  margin-top: clamp(26px, 3vw, 36px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.g4g-landing .g4g-faqx__search {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 420px;
  min-width: 260px;
  min-height: 56px;
  padding: 0 16px;
  border: 1.5px solid var(--g4g-border-strong);
  border-radius: var(--g4g-radius-pill);
  background: var(--g4g-surface);
  box-shadow: var(--g4g-shadow-sm);
}
/* Focus clavier VISIBLE sur le contrôle principal (WCAG 2.4.7) : l'input pose
   outline:none, on porte donc l'anneau sur la pilule (jumeau de .g4g-msg__search). */
.g4g-landing .g4g-faqx__search:focus-within {
  border-color: var(--g4g-primary);
  box-shadow: var(--g4g-focus-ring);
}
.g4g-landing .g4g-faqx__search-icon { flex: none; color: var(--g4g-text-muted); }
.g4g-landing .g4g-faqx__search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  color: var(--g4g-text);
}
.g4g-landing .g4g-faqx__search-clear {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--g4g-radius-pill);
  background: var(--g4g-surface-alt);
  color: var(--g4g-text-muted);
  text-decoration: none;
  cursor: pointer;
}
/* L'attribut `hidden` (aucune requête) doit l'emporter sur `display:grid`. */
.g4g-landing .g4g-faqx__search-clear[hidden] { display: none; }

.g4g-landing .g4g-faqx__bulk { display: flex; align-items: center; gap: 10px; }
/* Masqué tant que le JS ne l'a pas révélé (amélioration progressive). */
.g4g-landing .g4g-faqx__bulk[hidden] { display: none; }
.g4g-landing .g4g-faqx__bulk-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 18px;
  border: 1px solid var(--g4g-border);
  border-radius: var(--g4g-radius-pill);
  background: var(--g4g-surface);
  color: var(--g4g-text);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: var(--g4g-weight-semibold);
  cursor: pointer;
  transition: border-color 140ms var(--lp-ease), color 140ms var(--lp-ease);
}
.g4g-landing .g4g-faqx__bulk-btn:hover {
  border-color: var(--g4g-primary);
  color: var(--g4g-primary);
}
.g4g-landing .g4g-faqx__resume {
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--g4g-text-muted);
}

/* --- Corps : grille accordéons (gauche) + rail d'aide (droite) ---------- */
.g4g-landing .g4g-faqx-body {
  background: var(--g4g-surface-sunken);
  border-top: 1px solid var(--g4g-border);
  padding-block: clamp(36px, 4.5vw, 60px) clamp(64px, 8vw, 110px);
}
.g4g-landing .g4g-faqx__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 44px);
  align-items: start;
}
.g4g-landing .g4g-faqx__groups {
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 2.6vw, 34px);
}

/* En-tête de groupe : puce numérotée + titre + étiquette d'audience. */
.g4g-landing .g4g-faqx-group__head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.g4g-landing .g4g-faqx-group__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--g4g-radius-pill);
  background: var(--g4g-primary-soft);
  color: var(--g4g-primary);
  font-size: 13px;
  font-weight: var(--g4g-weight-bold);
}
.g4g-landing .g4g-faqx-group__title {
  margin: 0;
  font-size: calc(clamp(21px, 2.1vw, 28px) * var(--g4g-title-scale, 1));
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: var(--g4g-weight-semibold);
  color: var(--g4g-text);
}
/* Étiquette d'audience : base = variante `--commun` (bord discret, texte
   muté) ; `--citoyen`/`--entreprise` passent à l'accent. */
.g4g-landing .g4g-faqx-group__tag {
  flex: none;
  align-self: center;
  padding: 4px 11px;
  border: 1px solid var(--g4g-border-strong);
  border-radius: var(--g4g-radius-pill);
  font-size: 11px;
  font-weight: var(--g4g-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--g4g-text-muted);
}
.g4g-landing .g4g-faqx-group__tag--citoyen,
.g4g-landing .g4g-faqx-group__tag--entreprise {
  border-color: var(--g4g-accent);
  color: var(--g4g-accent);
}
.g4g-landing .g4g-faqx-group__items {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Accordéon natif : la puce du <summary> est retirée. */
.g4g-landing .g4g-faqx-item {
  border: 1px solid var(--g4g-border);
  border-radius: var(--g4g-radius-lg);
  background: var(--g4g-surface);
  overflow: hidden;
}
.g4g-landing .g4g-faqx-item__q {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;
  font-size: 17px;
  font-weight: var(--g4g-weight-semibold);
  line-height: 1.35;
  letter-spacing: -0.008em;
  color: var(--g4g-text);
  transition: color 140ms var(--lp-ease);
}
.g4g-landing .g4g-faqx-item__q::-webkit-details-marker { display: none; }
.g4g-landing .g4g-faqx-item__q:hover { color: var(--g4g-primary); }
.g4g-landing .g4g-faqx-item__q-text { flex: 1; min-width: 0; }
.g4g-landing .g4g-faqx-item__chevron {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--g4g-radius-pill);
  background: var(--g4g-surface-sunken);
  color: var(--g4g-text-muted);
}
.g4g-landing .g4g-faqx-item__chevron svg { transition: transform 260ms var(--lp-ease); }
.g4g-landing .g4g-faqx-item[open] .g4g-faqx-item__chevron svg { transform: rotate(180deg); }

/* Panneau de réponse : révélé nativement par [open] + léger fondu. */
.g4g-landing .g4g-faqx-item[open] .g4g-faqx-item__panel {
  animation: g4gFaqxReveal 260ms var(--lp-ease) both;
}
.g4g-landing .g4g-faqx-item__answer {
  padding: 0 22px 22px;
  max-width: 66ch;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--g4g-text-muted);
  text-wrap: pretty;
}
/* {{ answer|richtext }} enrobe des <p> : on réinitialise leurs marges. */
.g4g-landing .g4g-faqx-item__answer > :first-child { margin-top: 0; }
.g4g-landing .g4g-faqx-item__answer > :last-child { margin-bottom: 0; }
.g4g-landing .g4g-faqx-item__answer p { margin: 0 0 var(--g4g-space-3); }
.g4g-landing .g4g-faqx-item__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  margin: 0 22px 22px;
  font-size: 14.5px;
  font-weight: var(--g4g-weight-semibold);
  color: var(--g4g-accent);
  text-decoration: none;
}
.g4g-landing .g4g-faqx-item__link:hover { color: var(--g4g-accent-hover); }
.g4g-landing .g4g-faqx-item__link-arrow { flex: none; }

/* --- État « aucun résultat » (révélé par le filtrage) ------------------- */
.g4g-landing .g4g-faqx-empty {
  border: 1px dashed var(--g4g-border-strong);
  border-radius: var(--g4g-radius-lg);
  background: var(--g4g-surface);
  padding: 36px 32px;
  text-align: center;
}
.g4g-landing .g4g-faqx-empty__title {
  margin: 0;
  font-size: 20px;
  font-weight: var(--g4g-weight-semibold);
  letter-spacing: -0.01em;
  color: var(--g4g-text);
}
.g4g-landing .g4g-faqx-empty__text {
  margin: 12px auto 0;
  max-width: 46ch;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--g4g-text-muted);
}

/* --- Rail d'aide (colonne droite, collante) ---------------------------- */
.g4g-landing .g4g-faqx__rail {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.g4g-landing .g4g-faqx-help {
  border: 1px solid var(--g4g-accent);
  border-radius: var(--g4g-radius-lg);
  background: var(--g4g-primary-soft);
  padding: 26px 28px;
}
.g4g-landing .g4g-faqx-help__title {
  margin: 0;
  font-size: calc(clamp(20px, 2vw, 26px) * var(--g4g-title-scale, 1));
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: var(--g4g-weight-semibold);
  color: var(--g4g-primary);
}
.g4g-landing .g4g-faqx-help__text {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--g4g-text-muted);
}
.g4g-landing .g4g-faqx-more {
  border: 1px solid var(--g4g-border);
  border-radius: var(--g4g-radius-lg);
  background: var(--g4g-surface);
  padding: 26px 28px;
}
.g4g-landing .g4g-faqx-more__title {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: var(--g4g-weight-semibold);
  color: var(--g4g-text-muted);
}
.g4g-landing .g4g-faqx-more__links {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
}
.g4g-landing .g4g-faqx-more__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 52px;
  padding: 12px 0;
  border-bottom: 1px solid var(--g4g-border);
  font-size: 15.5px;
  font-weight: var(--g4g-weight-semibold);
  color: var(--g4g-text);
  text-decoration: none;
}
.g4g-landing .g4g-faqx-more__link:last-child { border-bottom: 0; }
.g4g-landing .g4g-faqx-more__link:hover { color: var(--g4g-accent); }
.g4g-landing .g4g-faqx-more__arrow { flex: none; color: var(--g4g-text-muted); }

/* CTA du rail et de l'état vide : réutilisent `.g4g-btn--primary`. Retouche
   de taille SCOPÉE (48 px maquette) — jamais combinée à `.g4g-btn--sm`. */
.g4g-landing .g4g-faqx-help__cta,
.g4g-landing .g4g-faqx-empty__cta {
  min-height: 48px;
  padding: 13px 24px;
  font-size: var(--g4g-text-base);
}
.g4g-landing .g4g-faqx-help__cta { margin-top: 18px; }
.g4g-landing .g4g-faqx-empty__cta { margin-top: 22px; }

/* --- Mobile (≤ 900px) : une colonne, rail après les groupes ------------- */
/* Le rail d'aide passe EN FIN de page (via `order`) et cesse d'être
   collant ; « Tout ouvrir » disparaît (déplier 20+ réponses sur un
   téléphone n'aide personne — seul « Tout fermer » reste utile). */
@media (max-width: 900px) {
  .g4g-landing .g4g-faqx__grid { grid-template-columns: 1fr; }
  /* En-tête de groupe : l'étiquette d'audience passe SOUS le titre (maquette
     mobile L136-140) — sinon puce + titre incompressible + étiquette nowrap
     débordent horizontalement sous ~360px. */
  .g4g-landing .g4g-faqx-group__head { flex-wrap: wrap; }
  .g4g-landing .g4g-faqx-group__title { min-width: 0; }
  .g4g-landing .g4g-faqx-group__tag { flex-basis: 100%; margin-left: 42px; }
  .g4g-landing .g4g-faqx__groups { order: 1; }
  .g4g-landing .g4g-faqx__rail {
    order: 2;
    position: static;
    top: auto;
  }
  .g4g-landing .g4g-faqx__bulk-btn[data-faqx-open-all] { display: none; }
}

/* --- prefers-reduced-motion : neutralise chevron, fondu et survols ------ */
@media (prefers-reduced-motion: reduce) {
  .g4g-landing .g4g-faqx-item__q,
  .g4g-landing .g4g-faqx__bulk-btn { transition: none; }
  .g4g-landing .g4g-faqx-item__chevron svg { transition: none; }
  .g4g-landing .g4g-faqx-item[open] .g4g-faqx-item__panel { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * ARTICLE ÉDITORIAL RICHE — maquette « G4G Site - Article » (NewsArticle).
 * Calque vitrine (.g4g-landing) ; longueurs en px littéraux = parité exacte à la
 * maquette ; couleurs 100 % tokens --g4g-* (anti-hex). Le chrome (nav/pied) vient
 * de base.html. Aucune redéfinition de sélecteur de base.css.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Barre de progression de lecture — CSS pur (aucun JS). */
.g4g-article__progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--g4g-surface-alt);
  z-index: var(--g4g-z-sticky);
}
.g4g-article__progress-bar {
  display: block;
  height: 100%;
  transform-origin: left;
  transform: scaleX(0);
  background: var(--g4g-accent);
  animation: g4g-article-read linear;
  animation-timeline: scroll(root);
}
@keyframes g4g-article-read { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .g4g-article__progress-bar { animation: none; transform: scaleX(0); }
}

/* Fil d'Ariane */
.g4g-article__breadcrumb {
  max-width: 1220px;
  margin: 0 auto;
  padding: 20px 28px 0;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--g4g-text-muted);
}
.g4g-article__crumb { color: var(--g4g-text-muted); text-decoration: none; }
.g4g-article__crumb--current { color: var(--g4g-text); font-weight: 500; }
.g4g-article__crumb-sep { color: var(--g4g-text-muted); }

/* En-tête */
.g4g-article__header {
  background: var(--g4g-surface);
  padding: clamp(28px, 3.5vw, 44px) 28px clamp(32px, 4vw, 48px);
}
.g4g-article__header-inner { max-width: 840px; margin: 0 auto; }
.g4g-article__title {
  margin: 0;
  font-size: calc(clamp(36px, 4.6vw, 62px) * var(--g4g-title-scale, 1));
  line-height: 1.06;
  letter-spacing: -0.028em;
  font-weight: 400;
  color: var(--g4g-text);
}
.g4g-article__lead {
  margin: 22px 0 0;
  font-size: 20px;
  line-height: 1.55;
  font-weight: 300;
  color: var(--g4g-text-muted);
  text-wrap: pretty;
}
.g4g-article__meta {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--g4g-border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  justify-content: space-between;
}
.g4g-article__byline { display: flex; align-items: center; gap: 14px; }
.g4g-article__avatar {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: var(--g4g-primary-soft);
  color: var(--g4g-primary);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.02em;
  display: grid;
  place-items: center;
  flex: none;
}
/* Portrait d'auteur (snippet Author) : la photo remplit le cercle ; sans photo, le
   monogramme du bloc ci-dessus reste (initiales de l'auteur, ou « G4G »). */
.g4g-article__avatar--photo { overflow: hidden; background: var(--g4g-surface-alt); }
.g4g-article__avatar-img { width: 100%; height: 100%; object-fit: cover; }
.g4g-article__author { font-size: 15.5px; font-weight: 600; color: var(--g4g-text); }
.g4g-article__author-role { font-size: 13px; color: var(--g4g-text-muted); }
.g4g-article__date { font-size: 13px; color: var(--g4g-text-subtle); }
.g4g-article__readtime {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid var(--g4g-border);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--g4g-text-muted);
}

/* Héro visuel */
.g4g-article__hero-wrap { max-width: 1120px; margin: clamp(30px, 3.5vw, 44px) auto 0; }
.g4g-article__hero { margin: 0; }
.g4g-article__hero-media {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  background: var(--g4g-surface-alt);
  overflow: hidden;
}
/* Photo principale (cover_image) : remplit la boîte 16/9 arrondie. Absente → le
   fond --g4g-surface-alt reste visible (placeholder, à la maquette). */
.g4g-article__hero-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Légende + crédit sous le héro (cover_caption / cover_credit — CD-10). */
.g4g-article__hero-caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 18px;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--g4g-text-subtle);
}
.g4g-article__hero-credit { font-style: italic; }

/* Corps : grille contenu + sommaire */
.g4g-article__body {
  background: var(--g4g-surface);
  padding: clamp(20px, 2.5vw, 32px) 28px clamp(56px, 7vw, 90px);
}
.g4g-article__content { max-width: 70ch; }
@media (min-width: 900px) {
  .g4g-article__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 264px;
    gap: clamp(32px, 4vw, 64px);
    align-items: start;
    max-width: 1120px;
    margin: 0 auto;
  }
}

/* Typographie du corps (StreamField : richtext + quote + gallery) */
.g4g-article__content p { margin: 18px 0 0; font-size: 18px; line-height: 1.75; color: var(--g4g-text); text-wrap: pretty; }
.g4g-article__content > :first-child { margin-top: 0; }
.g4g-article__content h2 { margin: 44px 0 0; font-size: clamp(28px, 3vw, 38px); line-height: 1.15; letter-spacing: -0.02em; font-weight: 600; color: var(--g4g-text); }
.g4g-article__content h3 { margin: 34px 0 0; font-size: clamp(22px, 2.3vw, 27px); line-height: 1.2; letter-spacing: -0.015em; font-weight: 600; color: var(--g4g-text); }
.g4g-article__content h4 { margin: 28px 0 0; font-size: 19px; line-height: 1.3; letter-spacing: -0.008em; font-weight: 600; color: var(--g4g-text-muted); }
.g4g-article__content ul,
.g4g-article__content ol { margin: 20px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 12px; }
.g4g-article__content li { font-size: 18px; line-height: 1.65; color: var(--g4g-text); }
.g4g-article__content a { color: var(--g4g-accent); text-underline-offset: 3px; }
.g4g-article__content strong { font-weight: 600; }
.g4g-article__content blockquote {
  margin: 44px 0 0;
  padding: 0 0 0 26px;
  border-left: 4px solid var(--g4g-accent);
  font-size: clamp(24px, 2.5vw, 30px);
  line-height: 1.35;
  font-weight: 300;
  letter-spacing: -0.015em;
  color: var(--g4g-text);
  text-wrap: pretty;
}
.g4g-article__content blockquote p { margin: 0; font-size: inherit; line-height: inherit; font-weight: inherit; color: inherit; }

/* Galerie (bloc `gallery` réutilisé, variante article) */
.g4g-article__content .g4g-gallery-section { margin: 44px 0 0; }
.g4g-article__content .g4g-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.g4g-article__content .g4g-gallery__img { width: 100%; aspect-ratio: 1; border-radius: 16px; object-fit: cover; display: block; }

/* Encadré (aparté) — bloc `callout` [data-dc-role="article-callout"]. Variante
   « info » = base mesurée (fond primary-soft, bordure accent) ; « avertissement »
   = ambre (fond non mesuré → color-mix, aucun hex). */
.g4g-article__content .g4g-article__callout {
  margin: 44px 0 0;
  border: 1px solid var(--g4g-border);
  border-radius: 20px;
  padding: 26px 28px;
}
.g4g-article__content .g4g-article__callout--info { border-color: var(--g4g-accent); background: var(--g4g-primary-soft); }
.g4g-article__content .g4g-article__callout--avertissement {
  border-color: var(--g4g-warning);
  background: color-mix(in srgb, var(--g4g-warning) 12%, var(--g4g-surface));
}
.g4g-article__callout-head { display: flex; align-items: center; gap: 10px; }
.g4g-article__callout-icon { flex: none; }
.g4g-article__callout--info .g4g-article__callout-icon,
.g4g-article__callout--info .g4g-article__callout-label { color: var(--g4g-primary); }
.g4g-article__callout--avertissement .g4g-article__callout-icon,
.g4g-article__callout--avertissement .g4g-article__callout-label { color: var(--g4g-warning); }
.g4g-article__callout-label { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; }
.g4g-article__callout-body { margin-top: 12px; }
.g4g-article__callout-body p { margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--g4g-text); text-wrap: pretty; }

/* Carte fiche d'entreprise — bloc `business_card` [data-dc-role="article-business-card"]. */
.g4g-article__content .g4g-article__bizcard {
  margin: 26px 0 0;
  display: flex;
  align-items: center;
  gap: 18px;
  border: 1px solid var(--g4g-border);
  border-radius: 20px;
  background: var(--g4g-surface-sunken);
  padding: 20px 22px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 140ms ease, transform 140ms ease;
}
.g4g-article__content .g4g-article__bizcard:hover { box-shadow: var(--g4g-shadow-md); transform: translateY(-2px); }
.g4g-article__bizcard-main { flex: 1; min-width: 0; }
.g4g-article__bizcard-eyebrow { font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--g4g-text-subtle); }
.g4g-article__bizcard-title { margin-top: 6px; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; color: var(--g4g-text); }
.g4g-article__bizcard-meta { margin-top: 4px; font-size: 14px; color: var(--g4g-text-muted); }
.g4g-article__bizcard-sdgs { display: flex; gap: 6px; flex: none; }
.g4g-article__bizcard-sdg {
  width: 28px; height: 28px;
  border-radius: 4px;
  background: var(--g4g-primary);
  color: var(--g4g-primary-contrast);
  font-size: 11.5px; font-weight: 700;
  display: grid; place-items: center;
}
.g4g-article__bizcard-go {
  width: 36px; height: 36px;
  border-radius: 999px;
  background: var(--g4g-primary);
  color: var(--g4g-primary-contrast);
  display: grid; place-items: center; flex: none;
}

/* Capsule vidéo FACADE — bloc `video` [data-dc-role="article-video"]. */
.g4g-article__content .g4g-article__video { margin: 20px 0 0; }
.g4g-article__video-facade {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  background: var(--g4g-surface-alt);
  cursor: pointer;
}
.g4g-article__video-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.g4g-article__video-scrim {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--g4g-text) 34%, transparent));
}
.g4g-article__video-play {
  width: 74px; height: 74px;
  border-radius: 999px;
  background: color-mix(in srgb, white 94%, transparent);
  color: var(--g4g-primary);
  box-shadow: var(--g4g-shadow-lg);
  display: grid; place-items: center;
}
.g4g-article__video-duration {
  position: absolute; left: 14px; bottom: 14px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--g4g-text) 72%, transparent);
  color: var(--g4g-primary-contrast);
  font-size: 12.5px; font-weight: 600;
}
.g4g-article__video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; }
.g4g-article__video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.g4g-article__video-caption { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--g4g-text-subtle); }

/* Partage */
.g4g-article__share {
  margin: 44px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--g4g-border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  justify-content: space-between;
}
.g4g-article__share-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.g4g-article__share-label { font-size: 13px; font-weight: 600; color: var(--g4g-text-muted); }
.g4g-article__share-btn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--g4g-border);
  border-radius: 999px;
  background: var(--g4g-surface);
  color: var(--g4g-text-muted);
  display: grid;
  place-items: center;
  text-decoration: none;
}
.g4g-article__share-all { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; font-size: 14.5px; font-weight: 600; color: var(--g4g-accent); text-decoration: none; }

/* Sommaire (rail droit) */
.g4g-article__toc { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 900px) { .g4g-article__toc { position: sticky; top: 110px; } }
.g4g-article__toc-card { border: 1px solid var(--g4g-border); border-radius: 20px; background: var(--g4g-surface-sunken); padding: 22px 20px; }
.g4g-article__toc-eyebrow { font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--g4g-text-subtle); }
.g4g-article__toc-list { margin-top: 12px; display: flex; flex-direction: column; }
.g4g-article__toc-link { display: flex; align-items: center; min-height: 40px; font-size: 14px; font-weight: 600; text-decoration: none; padding-left: 12px; border-left: 2px solid var(--g4g-border); color: var(--g4g-text-muted); }
.g4g-article__toc-link.is-active { color: var(--g4g-primary); border-left-color: var(--g4g-primary); }
/* [2026-10-14] Encadré bleu .g4g-article__cta retiré de la sidebar (demande Alexandre). */

/* Articles liés */
.g4g-article__related { background: var(--g4g-surface-sunken); padding: clamp(56px, 7vw, 90px) 28px; border-top: 1px solid var(--g4g-border); }
.g4g-article__related-inner { max-width: 1220px; margin: 0 auto; }
.g4g-article__related-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.g4g-article__related-title { margin: 0; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.1; letter-spacing: -0.022em; font-weight: 300; color: var(--g4g-text); }
.g4g-article__related-title strong { font-weight: 600; }
.g4g-article__related-all { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--g4g-accent); text-decoration: none; }
.g4g-article__related-grid { margin-top: clamp(26px, 3vw, 38px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.g4g-article__related-card { display: flex; flex-direction: column; border: 1px solid var(--g4g-border); border-radius: 20px; background: var(--g4g-surface); padding: 22px; text-decoration: none; color: inherit; box-shadow: var(--g4g-shadow-sm); }
.g4g-article__related-media { width: 100%; aspect-ratio: 3 / 2; border-radius: 20px; background: var(--g4g-surface-alt); overflow: hidden; }
/* Vignette de l'article lié : la couverture remplit la boîte 3/2 (placeholder --surface-alt si absente). */
.g4g-article__related-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.g4g-article__related-cardtitle { margin-top: 16px; font-size: 19px; line-height: 1.28; font-weight: 500; letter-spacing: -0.012em; color: var(--g4g-text); }
.g4g-article__related-spacer { flex: 1; }
.g4g-article__related-date { margin-top: 16px; font-size: 12.5px; color: var(--g4g-text-subtle); }

/* Mobile : galerie en bande défilante + liés en 1 colonne (maquette mobile) */
@media (max-width: 640px) {
  .g4g-article__content .g4g-gallery { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 200px; overflow-x: auto; scroll-snap-type: x mandatory; }
  .g4g-article__content .g4g-gallery__item { scroll-snap-align: center; }
  .g4g-article__related-grid { grid-template-columns: 1fr; }
}

/* ====================================================================== */
/* PAGE À PROPOS (site public) — 7 sections bespoke (S1–S7)               */
/* S7 (CTA final) réutilise .g4g-cta4p (+ .g4g-cta4p__note ci-dessous).   */
/* 100 % tokens/color-mix (zéro hex — CSP + tests_tokens). Filets pilier  */
/* via --g4g-people/planet/prosperity/purpose (tokens.css). Micro-inter.  */
/* équipe = CSS pur (:hover/:focus-within + tiroir grid-template-rows).   */
/* ====================================================================== */

/* --- Sur-lignes (eyebrow) partagées ---------------------------------- */
.g4g-about-hero__eyebrow,
.g4g-about-origin__eyebrow,
.g4g-about-dna__eyebrow,
.g4g-about-mvv__eyebrow,
.g4g-about-team__eyebrow {
  display: block;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: var(--g4g-weight-semibold);
  color: var(--g4g-accent);
}

/* --- Titres d'affichage partagés (Light + span semibold) ------------- */
.g4g-about-hero__title,
.g4g-about-origin__title,
.g4g-about-dna__title,
.g4g-about-mvv__title,
.g4g-about-principes__title,
.g4g-about-team__title {
  margin: 0;
  font-weight: var(--g4g-weight-light);
  line-height: 1.06;
  letter-spacing: -0.024em;
  color: var(--g4g-text);
}
.g4g-about-hero__title span,
.g4g-about-origin__title span,
.g4g-about-dna__title span,
.g4g-about-mvv__title span,
.g4g-about-principes__title span,
.g4g-about-team__title span { font-weight: var(--g4g-weight-semibold); }

/* --- S1 · Héro ------------------------------------------------------- */
.g4g-landing .g4g-about-hero { background: var(--g4g-surface); }
.g4g-about-hero__inner { max-width: var(--lp-width); margin: 0 auto; }
.g4g-about-hero__title {
  margin: 16px 0 0;
  font-size: calc(clamp(40px, 5.6vw, 76px) * var(--g4g-title-scale, 1));
  line-height: 1.02;
  letter-spacing: -0.03em;
  max-width: 20ch;
}
.g4g-about-hero__title span { color: var(--g4g-accent); }
.g4g-about-hero__body {
  margin-top: clamp(26px, 3vw, 40px);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.g4g-about-hero__lede {
  margin: 0;
  font-size: 19px;
  line-height: 1.6;
  color: var(--g4g-text);
  max-width: 56ch;
  text-wrap: pretty;
}
.g4g-about-hero__desc {
  margin: 20px 0 0;
  font-size: 17px;
  line-height: 1.65;
  color: var(--g4g-text-muted);
  max-width: 58ch;
  text-wrap: pretty;
}
/* [lot 2 motion] COLLAGE héro À propos : photo « coin-globe » + formes 4P en parallaxe.
   Couches : formes DERRIÈRE (z1) · photo (z2) · accents 4P DEVANT la photo (z3). Décoratifs
   = aria-hidden, jamais au-dessus d'un texte (ils vivent dans la colonne image). 100 % tokens.
   La parallaxe (data-px) vient de motion.js/motion.css. Miroir du collage Méthode 4P. */
.g4g-about-hero__collage { position: relative; min-height: clamp(280px, 34vw, 400px); isolation: isolate; }
.g4g-about-hero__photo {
  position: relative; z-index: 2;
  width: clamp(220px, 84%, 360px); aspect-ratio: 1; margin: 0 auto;
  border-radius: 46% 54% 52% 48% / 54% 46% 54% 46%;
  overflow: hidden; box-shadow: var(--g4g-shadow-lg);
  background: var(--g4g-surface-alt);
}
.g4g-about-hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.g4g-about-hero__deco { position: absolute; display: block; }
.g4g-ahd--ring { z-index: 1; width: clamp(120px, 15vw, 180px); aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--g4g-accent); left: -2%; top: 2%; }
.g4g-ahd--pill { z-index: 1; width: clamp(96px, 13vw, 156px); height: clamp(42px, 5.5vw, 64px); background: color-mix(in srgb, var(--g4g-prosperity) 82%, transparent); border-radius: var(--g4g-radius-pill); right: -1%; bottom: 8%; }
.g4g-ahd--square { z-index: 3; width: clamp(46px, 6vw, 70px); aspect-ratio: 1; border-radius: var(--g4g-radius-md); background: var(--g4g-purpose); right: 9%; top: 2%; }
.g4g-ahd--dot { z-index: 3; width: clamp(30px, 4vw, 44px); aspect-ratio: 1; border-radius: 50%; background: var(--g4g-people); left: 5%; bottom: 12%; }

/* --- S2 · L'origine ------------------------------------------------- */
.g4g-landing .g4g-about-origin { background: var(--g4g-surface-sunken); border-top: 1px solid var(--g4g-border); }
.g4g-about-origin__inner {
  max-width: var(--lp-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.g4g-about-origin__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--g4g-radius-lg);
  overflow: hidden;
  background: var(--g4g-surface-alt);
}
.g4g-about-origin__portrait { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.g4g-about-origin__title { margin: 14px 0 0; font-size: calc(clamp(34px, 4.2vw, 58px) * var(--g4g-title-scale, 1)); line-height: 1.06; max-width: 22ch; }
.g4g-about-origin__prose p {
  margin: 16px 0 0;
  font-size: 17px;
  line-height: 1.65;
  color: var(--g4g-text-muted);
  max-width: 58ch;
  text-wrap: pretty;
}
.g4g-about-origin__prose p:first-child { margin-top: 22px; }
.g4g-about-origin__prose strong,
.g4g-about-origin__prose b { font-weight: var(--g4g-weight-semibold); color: var(--g4g-text); }
.g4g-about-origin__quote { margin: 26px 0 0; padding: 0 0 0 22px; border-left: 4px solid var(--g4g-accent); }
.g4g-about-origin__quote-text {
  margin: 0;
  font-size: clamp(21px, 2.2vw, 27px);
  line-height: 1.4;
  font-weight: var(--g4g-weight-light);
  letter-spacing: -0.014em;
  color: var(--g4g-text);
  text-wrap: pretty;
}
.g4g-about-origin__signature { margin: 18px 0 0; font-size: 15px; font-weight: var(--g4g-weight-semibold); color: var(--g4g-text); }

/* --- S3 · Notre ADN ------------------------------------------------- */
.g4g-landing .g4g-about-dna { background: var(--g4g-surface); border-top: 1px solid var(--g4g-border); }
.g4g-about-dna__inner { max-width: var(--lp-width); margin: 0 auto; }
.g4g-about-dna__head { max-width: 22ch; }
.g4g-about-dna__title { margin: 14px 0 0; font-size: calc(clamp(34px, 4.2vw, 58px) * var(--g4g-title-scale, 1)); }
.g4g-about-dna__body {
  margin-top: clamp(30px, 3.5vw, 46px);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.g4g-about-dna__prose p {
  margin: 18px 0 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--g4g-text-muted);
  max-width: 60ch;
  text-wrap: pretty;
}
.g4g-about-dna__prose p:first-child { margin-top: 0; }
.g4g-about-dna__prose strong,
.g4g-about-dna__prose b { font-weight: var(--g4g-weight-semibold); color: var(--g4g-text); }
.g4g-about-dna__media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--g4g-radius-lg);
  overflow: hidden;
  background: var(--g4g-surface-alt);
  border: 1px solid var(--g4g-border);
}
.g4g-about-dna__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.g4g-about-dna__slogan {
  margin-top: clamp(34px, 4vw, 52px);
  border: 1px solid var(--g4g-border);
  border-radius: var(--g4g-radius-lg);
  background: var(--g4g-primary-soft);
  padding: clamp(34px, 4.5vw, 56px) clamp(28px, 4vw, 48px);
  text-align: center;
}
.g4g-about-dna__slogan-label { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: var(--g4g-weight-semibold); color: var(--g4g-accent); }
.g4g-about-dna__slogan-text {
  margin: 16px auto 0;
  font-size: clamp(30px, 4.4vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.026em;
  font-weight: var(--g4g-weight-light);
  color: var(--g4g-text);
  max-width: 18ch;
  text-wrap: balance;
}
.g4g-about-dna__slogan-text span { font-weight: var(--g4g-weight-semibold); color: var(--g4g-primary); }
.g4g-about-dna__slogan-desc { margin: 22px auto 0; font-size: 16px; line-height: 1.65; color: var(--g4g-text-muted); max-width: 62ch; text-wrap: pretty; }
/* Diagramme « ADN → feuille de route » (page ADN dédiée) : figure pleine largeur. */
.g4g-about-dna__roadmap { margin: clamp(34px, 4vw, 52px) 0 0; text-align: center; }
.g4g-about-dna__roadmap-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--g4g-radius-lg);
  border: 1px solid var(--g4g-border);
  background: var(--g4g-surface-alt);
}
.g4g-about-dna__roadmap-caption {
  margin: 22px auto 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--g4g-text-muted);
  max-width: 66ch;
  text-wrap: pretty;
}

/* --- S4 · Mission · Vision · Valeurs -------------------------------- */
.g4g-landing .g4g-about-mvv { background: var(--g4g-surface-sunken); border-top: 1px solid var(--g4g-border); }
.g4g-about-mvv__inner { max-width: var(--lp-width); margin: 0 auto; }
.g4g-about-mvv__head { max-width: 68ch; }
.g4g-about-mvv__title { margin: 14px 0 0; font-size: calc(clamp(32px, 4vw, 54px) * var(--g4g-title-scale, 1)); }
.g4g-about-mvv__intro { margin: 22px 0 0; font-size: 17px; line-height: 1.65; color: var(--g4g-text-muted); text-wrap: pretty; }
.g4g-about-mvv__grid { margin-top: clamp(30px, 3.5vw, 46px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
/* [2026-09-09] Page Mission = 4 énoncés (Objectif + Mission/Vision/Intentions) : la grille passe
   à 2×2 UNIQUEMENT quand un 4e item existe (`:has`). La page À propos (3 cartes) reste en 3
   colonnes. Desktop seulement — sous 860px la règle mobile 1fr (plus bas) reprend la main. */
@media (min-width: 861px) {
  .g4g-about-mvv__grid:has(> .g4g-about-mvv__card:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.g4g-about-mvv__card {
  border: 1px solid var(--g4g-border);
  border-radius: var(--g4g-radius-lg);
  background: var(--g4g-surface);
  padding: 32px 30px;
  display: flex;
  flex-direction: column;
}
.g4g-about-mvv__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--g4g-radius-pill);
  background: var(--g4g-primary-soft);
  display: grid;
  place-items: center;
  flex: none;
  color: var(--g4g-primary);
}
.g4g-about-mvv__card-label { margin-top: 20px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: var(--g4g-weight-bold); color: var(--g4g-accent); }
.g4g-about-mvv__card-text { margin: 12px 0 0; font-size: 15.5px; line-height: 1.65; color: var(--g4g-text-muted); text-wrap: pretty; }

/* --- S5 · Ce qui nous tient debout --------------------------------- */
.g4g-landing .g4g-about-principes { background: var(--g4g-surface); }
.g4g-about-principes__inner { max-width: var(--lp-width); margin: 0 auto; }
.g4g-about-principes__title { font-size: calc(clamp(34px, 4.2vw, 58px) * var(--g4g-title-scale, 1)); max-width: 18ch; }
.g4g-about-principes__grid { margin-top: clamp(30px, 3.5vw, 46px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.g4g-about-principes__card {
  border: 1px solid var(--g4g-border);
  border-radius: var(--g4g-radius-lg);
  background: var(--g4g-surface-sunken);
  padding: 30px 32px;
  border-top: 4px solid var(--g4g-border-strong);
}
.g4g-about-principes__card--people { border-top-color: var(--g4g-people); }
.g4g-about-principes__card--planet { border-top-color: var(--g4g-planet); }
.g4g-about-principes__card--prosperity { border-top-color: var(--g4g-prosperity); }
.g4g-about-principes__card--purpose { border-top-color: var(--g4g-purpose); }
.g4g-about-principes__card-title { font-size: clamp(22px, 2.3vw, 30px); line-height: 1.15; letter-spacing: -0.015em; font-weight: var(--g4g-weight-medium); color: var(--g4g-text); }
.g4g-about-principes__card-desc { margin: 12px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--g4g-text-muted); max-width: 46ch; text-wrap: pretty; }
.g4g-about-principes__links { margin-top: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.g4g-about-principes__link {
  border: 1px solid var(--g4g-border);
  border-radius: var(--g4g-radius-lg);
  background: var(--g4g-surface);
  padding: 24px 26px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: box-shadow 140ms var(--lp-ease), transform 140ms var(--lp-ease);
}
.g4g-about-principes__link:hover { box-shadow: var(--g4g-shadow-md); transform: translateY(-2px); }
.g4g-about-principes__link:focus-visible { outline: 2px solid var(--g4g-accent); outline-offset: 2px; }
.g4g-about-principes__link-eyebrow { font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: var(--g4g-weight-semibold); color: var(--g4g-text-muted); }
.g4g-about-principes__link-title { margin-top: 10px; font-size: 19px; font-weight: var(--g4g-weight-semibold); letter-spacing: -0.01em; color: var(--g4g-text); }
.g4g-about-principes__link-desc { margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: var(--g4g-text-muted); }

/* --- S6 · Équipe (micro-interaction CSS pure) ---------------------- */
.g4g-landing .g4g-about-team { background: var(--g4g-surface-sunken); border-top: 1px solid var(--g4g-border); }
.g4g-about-team__inner { max-width: var(--lp-width); margin: 0 auto; }
.g4g-about-team__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.g4g-about-team__title { margin: 14px 0 0; font-size: calc(clamp(34px, 4.2vw, 58px) * var(--g4g-title-scale, 1)); max-width: 20ch; }
.g4g-about-team__subtitle { margin: 0; font-size: 16px; line-height: 1.6; color: var(--g4g-text-muted); max-width: 40ch; text-wrap: pretty; }
.g4g-about-team__grid { margin-top: clamp(30px, 3.5vw, 46px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.g4g-about-team__card {
  border: 1px solid var(--g4g-border);
  border-radius: var(--g4g-radius-lg);
  background: var(--g4g-surface);
  padding: 18px;
  box-shadow: var(--g4g-shadow-sm);
  transition: transform 260ms var(--lp-ease), box-shadow 260ms var(--lp-ease), border-color 260ms var(--lp-ease);
}
.g4g-about-team__card:hover,
.g4g-about-team__card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--g4g-shadow-lg);
  border-color: var(--g4g-border-strong);
}
.g4g-about-team__card:focus-visible { outline: 2px solid var(--g4g-primary); outline-offset: 3px; }
.g4g-about-team__photo { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--g4g-radius-md); background: var(--g4g-surface-alt); }
.g4g-about-team__photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transform: scale(1);
  transition: transform 420ms var(--lp-ease);
}
.g4g-about-team__card:hover .g4g-about-team__photo-img,
.g4g-about-team__card:focus-within .g4g-about-team__photo-img { transform: scale(1.05); }
.g4g-about-team__filet {
  margin-top: 14px;
  height: 4px;
  border-radius: var(--g4g-radius-pill);
  background: var(--g4g-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 420ms var(--lp-ease);
}
/* [2026-09-28] Section équipe : accents harmonisés sur le bleu marine officiel
   (--g4g-primary, demande Alexandre). Le filet ne reprend plus la couleur du
   pilier ; la classe --{people|planet|prosperity|purpose} reste posée par le gabarit
   mais n'altère plus la couleur du filet (base --g4g-primary ci-dessus). */
.g4g-about-team__card:hover .g4g-about-team__filet,
.g4g-about-team__card:focus-within .g4g-about-team__filet { transform: scaleX(1); }
.g4g-about-team__name { margin-top: 16px; font-size: 18px; font-weight: var(--g4g-weight-semibold); letter-spacing: -0.01em; color: var(--g4g-text); }
.g4g-about-team__role { margin-top: 4px; font-size: 14px; font-weight: var(--g4g-weight-medium); color: var(--g4g-primary); }
/* Sur-ligne de la section équipe : surcharge le gris-bleu partagé (--g4g-accent) par le bleu marine officiel. */
.g4g-about-team__eyebrow { color: var(--g4g-primary); }
.g4g-about-team__drawer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 320ms var(--lp-ease); }
.g4g-about-team__card:hover .g4g-about-team__drawer,
.g4g-about-team__card:focus-within .g4g-about-team__drawer { grid-template-rows: 1fr; }
.g4g-about-team__drawer-inner { overflow: hidden; }
.g4g-about-team__bio { margin: 12px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--g4g-text-muted); }
.g4g-about-team__cta {
  margin-top: 26px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 24px;
  border: 1.5px solid var(--g4g-primary);
  border-radius: var(--g4g-radius-pill);
  color: var(--g4g-primary);
  font-size: 15px;
  font-weight: var(--g4g-weight-semibold);
  text-decoration: none;
  transition: background 140ms var(--lp-ease);
}
.g4g-about-team__cta:hover { background: var(--g4g-primary-soft); }
.g4g-about-team__cta:focus-visible { outline: 2px solid var(--g4g-primary); outline-offset: 2px; }
.g4g-about-team__note { margin: 22px 0 0; font-size: 13px; line-height: 1.6; color: var(--g4g-text-muted); }
.g4g-about-team__note p { margin: 0; }
.g4g-about-team__note strong,
.g4g-about-team__note b { font-weight: var(--g4g-weight-semibold); color: var(--g4g-text); }

/* --- S7 · CTA final : note (réutilise .g4g-cta4p) ------------------- */
.g4g-cta4p__note { margin: 36px auto 0; font-size: 13px; line-height: 1.6; color: var(--g4g-text-muted); max-width: 92ch; }
.g4g-cta4p__note p { margin: 0; }
.g4g-cta4p__note strong,
.g4g-cta4p__note b { font-weight: var(--g4g-weight-semibold); color: var(--g4g-text); }

/* --- Réponse mobile (colonnes → 1) --------------------------------- */
@media (max-width: 860px) {
  .g4g-about-hero__body,
  .g4g-about-origin__inner,
  .g4g-about-dna__body { grid-template-columns: 1fr; }
  .g4g-about-hero__collage { min-height: clamp(260px, 70vw, 340px); }
  .g4g-about-mvv__grid,
  .g4g-about-principes__grid,
  .g4g-about-principes__links,
  .g4g-about-team__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .g4g-about-principes__link,
  .g4g-about-team__card,
  .g4g-about-team__photo-img,
  .g4g-about-team__filet,
  .g4g-about-team__drawer,
  .g4g-about-team__cta { transition: none; }
}

/* ====================================================================== */
/* PAGE ODD (site public) — 5 sections bespoke (S1–S5)                    */
/* S5 (CTA final) réutilise .g4g-cta4p. Couleurs ONU servies par la       */
/* classe g4g-sdg--<n> (var --sdg, tag dynamic_theme_styles) ; encre WCAG */
/* précalculée (modificateur --light/--dark). 100 % tokens/color-mix.     */
/* ====================================================================== */

/* Sur-lignes ODD partagées */
.g4g-odd-hero__eyebrow,
.g4g-odd-grid__eyebrow,
.g4g-odd-contrib__eyebrow,
.g4g-odd-follow__eyebrow {
  display: block;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: var(--g4g-weight-semibold);
  color: var(--g4g-accent);
}
/* Titres d'affichage ODD partagés (Light + span semibold) */
.g4g-odd-hero__title,
.g4g-odd-grid__title,
.g4g-odd-contrib__title,
.g4g-odd-follow__title {
  margin: 14px 0 0;
  font-weight: var(--g4g-weight-light);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--g4g-text);
}
.g4g-odd-hero__title span,
.g4g-odd-grid__title span,
.g4g-odd-contrib__title span,
.g4g-odd-follow__title span { font-weight: var(--g4g-weight-semibold); }

/* --- S1 · Héro + compte à rebours ----------------------------------- */
.g4g-landing .g4g-odd-hero { background: var(--g4g-surface); }
.g4g-odd-hero__inner {
  max-width: var(--lp-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.32fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: end;
  position: relative;
  isolation: isolate;
}
/* [lot 2 motion] Formes 4P autour du compte à rebours : couche décor DERRIÈRE le contenu
   (z0), copy + carte au-dessus (z1). Décoratifs hors flux, aria-hidden, en parallaxe (data-px).
   Confinés à la moitié droite (anchrés à droite) → jamais au-dessus du titre. 100 % tokens. */
.g4g-odd-hero__copy,
.g4g-odd-hero__countdown { position: relative; z-index: 1; }
.g4g-odd-hero__decor { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.g4g-odd-hero__deco { position: absolute; display: block; }
.g4g-ohd--ring { width: clamp(150px, 18vw, 216px); aspect-ratio: 1; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--g4g-accent) 62%, transparent); right: 7%; top: -8%; }
.g4g-ohd--wheel { width: clamp(56px, 7vw, 82px); aspect-ratio: 1; border-radius: 50%; background: conic-gradient(var(--g4g-people) 0 25%, var(--g4g-planet) 0 50%, var(--g4g-prosperity) 0 75%, var(--g4g-purpose) 0 100%); box-shadow: var(--g4g-shadow-sm); right: 1%; top: -4%; }
.g4g-ohd--dot { width: clamp(22px, 3vw, 34px); aspect-ratio: 1; border-radius: 50%; background: var(--g4g-prosperity); right: 41%; top: 2%; }
.g4g-odd-hero__title { margin: 16px 0 0; font-size: calc(clamp(40px, 5.6vw, 76px) * var(--g4g-title-scale, 1)); line-height: 1.02; letter-spacing: -0.03em; max-width: 18ch; }
.g4g-odd-hero__subtitle { margin: 24px 0 0; font-size: 18px; line-height: 1.6; color: var(--g4g-text-muted); max-width: 56ch; text-wrap: pretty; }
.g4g-odd-hero__countdown { border: 1px solid var(--g4g-border); border-radius: var(--g4g-radius-lg); background: var(--g4g-surface-sunken); padding: 26px 28px; }
.g4g-odd-hero__cd-head { display: flex; align-items: center; gap: 10px; }
.g4g-odd-hero__cd-icon { width: 30px; height: 30px; border-radius: var(--g4g-radius-pill); background: var(--g4g-primary); color: var(--g4g-primary-contrast); display: grid; place-items: center; flex: none; }
.g4g-odd-hero__cd-label { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: var(--g4g-weight-semibold); color: var(--g4g-text-muted); }
.g4g-odd-hero__cd-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.g4g-odd-hero__cd-unit { border: 1px solid var(--g4g-border); border-radius: 14px; background: var(--g4g-surface); padding: 14px 10px; text-align: center; }
.g4g-odd-hero__cd-value { font-size: clamp(24px, 2.6vw, 34px); line-height: 1; font-weight: var(--g4g-weight-semibold); letter-spacing: -0.02em; color: var(--g4g-primary); }
.g4g-odd-hero__cd-name { margin-top: 6px; font-size: 11.5px; font-weight: var(--g4g-weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--g4g-text-muted); }
.g4g-odd-hero__cd-note { margin: 16px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--g4g-text-muted); }

/* --- S2 · La grille des 17 ------------------------------------------ */
.g4g-landing .g4g-odd-grid { background: var(--g4g-surface-sunken); border-top: 1px solid var(--g4g-border); }
.g4g-odd-grid__inner { max-width: var(--lp-width); margin: 0 auto; }
/* Intro « Cliquez un objectif… » placée SOUS le titre « Les 17, un par un »
   (colonne), décision Alexandre 2026-08-25. */
.g4g-odd-grid__head { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.g4g-odd-grid__title { margin: 14px 0 0; font-size: calc(clamp(36px, 4.4vw, 60px) * var(--g4g-title-scale, 1)); max-width: 26ch; }
.g4g-odd-grid__intro { margin: 0; font-size: 16px; line-height: 1.6; color: var(--g4g-text-muted); max-width: 62ch; text-wrap: pretty; }
/* Tuiles à espacement UNIFORME (autant entre rangées qu'entre colonnes = gap 10px)
   et hauteur naturelle (align-items: start). La stabilité de hauteur du panneau
   détail (RÈGLE Alexandre) est assurée par les hauteurs RÉSERVÉES à l'intérieur du
   panneau (titre + définition + secteurs), pas en étirant la colonne des tuiles. */
.g4g-odd-grid__layout { margin-top: clamp(30px, 4vw, 46px); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 40px); align-items: start; }
.g4g-odd-grid__tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.g4g-odd-grid__tile {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  border: none;
  cursor: pointer;
  border-radius: var(--g4g-radius-sm);
  overflow: hidden;
  background: var(--sdg, var(--g4g-surface-alt));
  outline: 3px solid transparent;
  outline-offset: 2px;
  transform: scale(1);
  transition: transform 140ms var(--lp-ease), box-shadow 140ms var(--lp-ease), outline-color 140ms var(--lp-ease);
}
.g4g-odd-grid__tile.is-active { outline-color: var(--g4g-primary); transform: scale(1.04); box-shadow: var(--g4g-shadow-lg); }
.g4g-odd-grid__tile:focus-visible { outline-color: var(--g4g-primary); }
.g4g-odd-grid__tile-img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* RÈGLE hauteur : le panneau détail est une colonne flex → son corps remplit la
   hauteur de la rangée (align-items: stretch) sans varier au changement d'ODD. */
/* `position: relative` (et NON sticky) : un item de grille collant n'est pas
   étiré par `align-items: stretch`, donc l'encadré finissait PLUS HAUT que la
   colonne des 17 tuiles. En flux normal il s'étire sur la hauteur de la rangée →
   son bas s'aligne exactement sur le bas des 17 tuiles (Alexandre 2026-08-26). */
.g4g-odd-grid__detail { position: relative; border: 1px solid var(--g4g-border); border-radius: var(--g4g-radius-lg); background: var(--g4g-surface); box-shadow: var(--g4g-shadow-md); overflow: hidden; display: flex; flex-direction: column; }
.g4g-odd-grid__detail-header { padding: 24px 26px; display: flex; align-items: center; gap: 14px; background: var(--sdg, var(--g4g-primary)); }
/* Texte du header TOUJOURS blanc (décision Alexandre 2026-08-25) — les deux
   variantes d'encre (`--light`/`--dark`, posées serveur + JS) rendent désormais du
   blanc, pour une couleur constante d'un ODD à l'autre. NB a11y : sur les fonds ODD
   clairs (ex. jaune), le blanc descend sous 4,5:1 — arbitrage assumé par Alexandre. */
.g4g-odd-grid__detail-header--light,
.g4g-odd-grid__detail-header--dark { color: var(--g4g-primary-contrast); }
.g4g-odd-grid__detail-badge { width: 52px; height: 52px; border-radius: var(--g4g-radius-sm); flex: none; display: grid; place-items: center; font-size: 22px; font-weight: var(--g4g-weight-bold); color: inherit; }
.g4g-odd-grid__detail-header--light .g4g-odd-grid__detail-badge,
.g4g-odd-grid__detail-header--dark .g4g-odd-grid__detail-badge { background: color-mix(in srgb, var(--g4g-primary-contrast) 22%, transparent); }
.g4g-odd-grid__detail-headtext { min-width: 0; }
.g4g-odd-grid__detail-eyebrow { font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: var(--g4g-weight-semibold); color: inherit; opacity: 0.78; }
/* min-height = 2 lignes réservées → l'en-tête garde la même hauteur que le titre
   tienne sur 1 ou 2 lignes (le panneau ne bouge plus au changement d'ODD). */
.g4g-odd-grid__detail-title { font-size: clamp(20px, 2.1vw, 27px); line-height: 1.15; letter-spacing: -0.015em; font-weight: var(--g4g-weight-semibold); color: inherit; min-height: 2.3em; }
.g4g-odd-grid__detail-body { padding: 24px 26px 26px; flex: 1 1 auto; }
/* Hauteurs RÉSERVÉES (définition + secteurs) pour que le panneau garde la MÊME
   hauteur d'un ODD à l'autre (règle Alexandre : un encadré ne change jamais de
   hauteur). Dimensionné pour le contenu le plus long ; à confirmer en QA visuelle. */
.g4g-odd-grid__detail-def { margin: 0; font-size: 16px; line-height: 1.6; color: var(--g4g-text-muted); text-wrap: pretty; min-height: 4.8em; }
.g4g-odd-grid__detail-sectors-label { margin-top: 22px; font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: var(--g4g-weight-semibold); color: var(--g4g-text-muted); }
.g4g-odd-grid__detail-sectors { margin-top: 10px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; min-height: 68px; }
.g4g-odd-grid__sector { border: 1px solid var(--g4g-border); border-radius: var(--g4g-radius-pill); background: var(--g4g-surface-sunken); padding: 7px 14px; font-size: 13px; font-weight: var(--g4g-weight-medium); color: var(--g4g-text-muted); }
.g4g-odd-grid__detail-actions { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--g4g-border); display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.g4g-odd-grid__follow { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 13px 24px; border: none; border-radius: var(--g4g-radius-pill); cursor: pointer; font-family: inherit; font-size: 14.5px; font-weight: var(--g4g-weight-semibold); background: var(--g4g-primary); color: var(--g4g-primary-contrast); transition: background 140ms var(--lp-ease); }
.g4g-odd-grid__follow:hover { background: var(--g4g-primary-hover); }
.g4g-odd-grid__follow.is-on { background: var(--g4g-success); }
.g4g-odd-grid__follow-icon-on { display: none; }
.g4g-odd-grid__follow.is-on .g4g-odd-grid__follow-icon-on { display: inline; }
.g4g-odd-grid__follow.is-on .g4g-odd-grid__follow-icon-off { display: none; }
.g4g-odd-grid__hub { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 13px 22px; border: 1.5px solid var(--g4g-primary); border-radius: var(--g4g-radius-pill); color: var(--g4g-primary); font-size: 14.5px; font-weight: var(--g4g-weight-semibold); text-decoration: none; transition: background 140ms var(--lp-ease); }
.g4g-odd-grid__hub:hover { background: var(--g4g-primary-soft); }
.g4g-odd-grid__detail-note { margin: 14px 0 0; font-size: 13px; line-height: 1.55; color: var(--g4g-text-muted); }
.g4g-odd-grid__note { margin: 22px 0 0; font-size: 13px; line-height: 1.6; color: var(--g4g-text-muted); max-width: 96ch; }
.g4g-odd-grid__note strong, .g4g-odd-grid__note b { font-weight: var(--g4g-weight-semibold); color: var(--g4g-text-muted); }
.g4g-odd-grid__note code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.g4g-odd-grid__note p { margin: 0; }

/* --- S3 · Notre contribution (bento) -------------------------------- */
.g4g-landing .g4g-odd-contrib { background: var(--g4g-surface); }
.g4g-odd-contrib__inner { max-width: var(--lp-width); margin: 0 auto; }
.g4g-odd-contrib__title { margin: 14px 0 0; font-size: calc(clamp(36px, 4.4vw, 60px) * var(--g4g-title-scale, 1)); max-width: 24ch; }
.g4g-odd-contrib__bento { margin-top: clamp(32px, 4vw, 48px); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.g4g-odd-contrib__card { border: 1px solid var(--g4g-border); border-radius: var(--g4g-radius-lg); background: var(--g4g-surface-sunken); }
.g4g-odd-contrib__card--big { grid-column: span 3; padding: 30px 32px; }
.g4g-odd-contrib__card--mini { grid-column: span 2; padding: 26px 28px; }
.g4g-odd-contrib__card--highlight { grid-column: span 2; padding: 26px 28px; border-color: var(--g4g-accent); background: var(--g4g-primary-soft); }
.g4g-odd-contrib__icon { width: 48px; height: 48px; border-radius: var(--g4g-radius-pill); background: var(--g4g-primary-soft); display: grid; place-items: center; color: var(--g4g-primary); }
.g4g-odd-contrib__card-title { margin-top: 20px; font-size: clamp(22px, 2.3vw, 30px); line-height: 1.15; letter-spacing: -0.015em; font-weight: var(--g4g-weight-medium); color: var(--g4g-text); }
.g4g-odd-contrib__card-text { margin: 12px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--g4g-text-muted); max-width: 44ch; text-wrap: pretty; }
.g4g-odd-contrib__card-cta { margin-top: 18px; display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: var(--g4g-weight-semibold); color: var(--g4g-accent); text-decoration: none; }
.g4g-odd-contrib__odds { margin-top: 18px; display: flex; gap: 6px; }
.g4g-odd-contrib__odd { width: 30px; height: 30px; border-radius: 4px; background: var(--sdg, var(--g4g-primary)); color: var(--g4g-primary-contrast); font-size: 12px; font-weight: var(--g4g-weight-bold); display: grid; place-items: center; }
.g4g-odd-contrib__mini-title { font-size: 19px; font-weight: var(--g4g-weight-semibold); letter-spacing: -0.01em; color: var(--g4g-text); }
.g4g-odd-contrib__mini-text { margin: 10px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--g4g-text-muted); }
.g4g-odd-contrib__hl-title { font-size: 19px; font-weight: var(--g4g-weight-semibold); letter-spacing: -0.01em; color: var(--g4g-primary); }
.g4g-odd-contrib__hl-text { margin: 10px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--g4g-text-muted); }

/* --- S4 · Suivre un objectif ---------------------------------------- */
.g4g-landing .g4g-odd-follow { background: var(--g4g-surface-sunken); border-top: 1px solid var(--g4g-border); }
.g4g-odd-follow__inner { max-width: var(--lp-width); margin: 0 auto; display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.g4g-odd-follow__media { position: relative; width: 100%; aspect-ratio: 4 / 5; border-radius: var(--g4g-radius-lg); overflow: hidden; background: var(--g4g-surface-alt); }
.g4g-odd-follow__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.g4g-odd-follow__title { margin: 14px 0 0; font-size: calc(clamp(36px, 4.4vw, 60px) * var(--g4g-title-scale, 1)); max-width: 20ch; }
.g4g-odd-follow__desc { margin: 22px 0 0; font-size: 17px; line-height: 1.65; color: var(--g4g-text-muted); max-width: 52ch; text-wrap: pretty; }
.g4g-odd-follow__notif { margin-top: 28px; border: 1px solid var(--g4g-border); border-radius: var(--g4g-radius-lg); background: var(--g4g-surface); box-shadow: var(--g4g-shadow-sm); padding: 20px 22px; max-width: 440px; }
.g4g-odd-follow__notif-head { display: flex; align-items: center; gap: 12px; }
.g4g-odd-follow__notif-icon { position: relative; width: 38px; height: 38px; border-radius: var(--g4g-radius-pill); background: var(--g4g-primary-soft); display: grid; place-items: center; flex: none; color: var(--g4g-primary); }
.g4g-odd-follow__notif-dot { position: absolute; top: -2px; right: -2px; width: 12px; height: 12px; border-radius: var(--g4g-radius-pill); background: var(--g4g-danger); border: 2px solid var(--g4g-surface); }
.g4g-odd-follow__notif-text { min-width: 0; }
.g4g-odd-follow__notif-title { font-size: 14.5px; font-weight: var(--g4g-weight-semibold); color: var(--g4g-text); }
.g4g-odd-follow__notif-body { font-size: 13px; color: var(--g4g-text-muted); }
.g4g-odd-follow__chips { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--g4g-border); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.g4g-odd-follow__chips-label { font-size: 12px; font-weight: var(--g4g-weight-semibold); color: var(--g4g-text-muted); }
.g4g-odd-follow__chips-list { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.g4g-odd-follow__chip { width: 26px; height: 26px; border-radius: 4px; background: var(--sdg, var(--g4g-border-strong)); color: var(--g4g-primary-contrast); font-size: 11px; font-weight: var(--g4g-weight-bold); display: grid; place-items: center; }
.g4g-odd-follow__chips-empty { font-size: 12.5px; color: var(--g4g-text-muted); }

/* --- Réponse mobile ODD -------------------------------------------- */
@media (max-width: 980px) {
  .g4g-odd-grid__layout { grid-template-columns: 1fr; }
  .g4g-odd-grid__detail { position: static; }
}
@media (max-width: 860px) {
  .g4g-odd-hero__inner { grid-template-columns: 1fr; }
  /* Formes du héro ODD masquées en mobile (calées autour du compte à rebours desktop). */
  .g4g-odd-hero__decor { display: none; }
  .g4g-odd-follow__inner { grid-template-columns: 1fr; }
  .g4g-odd-contrib__bento { grid-template-columns: 1fr; }
  .g4g-odd-contrib__card--big,
  .g4g-odd-contrib__card--mini,
  .g4g-odd-contrib__card--highlight { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .g4g-odd-grid__tile { transition: none; }
}

/* ====================================================================== */
/* PAGE ÉQUIPE (site public) — 3 sections bespoke (S1–S3)                 */
/* S3 (CTA final) réutilise .g4g-cta4p. Filet/rôle coloré = alias piliers */
/* (--g4g-people/planet/prosperity/purpose). 100 % tokens.                */
/* ====================================================================== */

/* --- S1 · Héro ------------------------------------------------------- */
.g4g-landing .g4g-equipe-hero { background: var(--g4g-surface); }
.g4g-equipe-hero__inner {
  max-width: var(--lp-width); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(28px, 4vw, 56px); align-items: center;
}
.g4g-equipe-hero__eyebrow { display: block; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: var(--g4g-weight-semibold); color: var(--g4g-primary); }
.g4g-equipe-hero__title { margin: 16px 0 0; font-size: calc(clamp(40px, 5.6vw, 76px) * var(--g4g-title-scale, 1)); line-height: 1.02; letter-spacing: -0.03em; font-weight: var(--g4g-weight-light); color: var(--g4g-text); max-width: 16ch; }
.g4g-equipe-hero__title span { font-weight: var(--g4g-weight-semibold); color: var(--g4g-primary); }
.g4g-equipe-hero__lede { margin: clamp(22px, 3vw, 34px) 0 0; font-size: 19px; line-height: 1.6; color: var(--g4g-text-muted); max-width: 60ch; text-wrap: pretty; }
/* [lot 2 motion] CONSTELLATION 4P du héro Équipe (pas de photo) : anneau ouvert + petite roue
   4P + pilule + carré + pastille, en parallaxe (data-px). Décoratifs (aria-hidden), hors flux,
   confinés à leur colonne (jamais au-dessus d'un texte). 100 % tokens. */
.g4g-equipe-hero__collage { position: relative; min-height: clamp(240px, 30vw, 330px); isolation: isolate; }
.g4g-equipe-hero__deco { position: absolute; display: block; }
.g4g-ehd--ring { width: clamp(160px, 22vw, 240px); aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--g4g-accent); right: 12%; top: 8%; }
.g4g-ehd--wheel { width: clamp(72px, 9vw, 104px); aspect-ratio: 1; border-radius: 50%; background: conic-gradient(var(--g4g-people) 0 25%, var(--g4g-planet) 0 50%, var(--g4g-prosperity) 0 75%, var(--g4g-purpose) 0 100%); box-shadow: var(--g4g-shadow-md); right: 4%; top: 0; }
.g4g-ehd--pill { width: clamp(96px, 12vw, 150px); height: clamp(40px, 5vw, 60px); border-radius: var(--g4g-radius-pill); background: color-mix(in srgb, var(--g4g-prosperity) 80%, transparent); left: 3%; bottom: 14%; }
.g4g-ehd--square { width: clamp(44px, 5.5vw, 66px); aspect-ratio: 1; border-radius: var(--g4g-radius-md); background: var(--g4g-purpose); left: 18%; top: 12%; }
.g4g-ehd--dot { width: clamp(26px, 3.4vw, 40px); aspect-ratio: 1; border-radius: 50%; background: var(--g4g-people); right: 28%; bottom: 6%; }

/* --- S2 · Les membres (mise en page alternée) ----------------------- */
.g4g-landing .g4g-equipe-members { background: var(--g4g-surface-sunken); border-top: 1px solid var(--g4g-border); }
.g4g-equipe-members__inner { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(28px, 4vw, 56px); }
/* [2026-09-09] Pastilles rondes (aperçu de l'équipe) : rangée de portraits ronds cliquables
   qui défilent (ancre #slug) vers le détail du membre plus bas. Prévu pour 3 → 9 membres (wrap). */
.g4g-equipe-pastilles { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(14px, 2.4vw, 30px); margin: 0 0 clamp(16px, 2.6vw, 34px); }
.g4g-equipe-pastille { display: flex; flex-direction: column; align-items: center; gap: 9px; width: clamp(100px, 12vw, 132px); text-decoration: none; color: inherit; }
.g4g-equipe-pastille__photo { position: relative; width: clamp(74px, 8vw, 104px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--g4g-surface-alt); box-shadow: var(--g4g-shadow-md); border: 3px solid var(--g4g-border); transition: transform 0.2s var(--g4g-ease-out, ease), border-color 0.2s ease, box-shadow 0.2s ease; }
.g4g-equipe-pastille__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.g4g-equipe-pastille__name { font-size: 14px; line-height: 1.15; font-weight: var(--g4g-weight-semibold); color: var(--g4g-text); text-align: center; }
.g4g-equipe-pastille__role { font-size: 11.5px; line-height: 1.25; color: var(--g4g-text-muted); text-align: center; text-wrap: balance; }
.g4g-equipe-pastille:hover .g4g-equipe-pastille__photo, .g4g-equipe-pastille:focus-visible .g4g-equipe-pastille__photo { transform: translateY(-3px) scale(1.04); box-shadow: var(--g4g-shadow-lg); }
.g4g-equipe-pastille--people .g4g-equipe-pastille__photo { border-color: color-mix(in srgb, var(--g4g-primary) 45%, var(--g4g-border)); }
.g4g-equipe-pastille--people:hover .g4g-equipe-pastille__photo, .g4g-equipe-pastille--people:focus-visible .g4g-equipe-pastille__photo { border-color: var(--g4g-primary); }
.g4g-equipe-pastille--planet .g4g-equipe-pastille__photo { border-color: color-mix(in srgb, var(--g4g-primary) 45%, var(--g4g-border)); }
.g4g-equipe-pastille--planet:hover .g4g-equipe-pastille__photo, .g4g-equipe-pastille--planet:focus-visible .g4g-equipe-pastille__photo { border-color: var(--g4g-primary); }
.g4g-equipe-pastille--prosperity .g4g-equipe-pastille__photo { border-color: color-mix(in srgb, var(--g4g-primary) 45%, var(--g4g-border)); }
.g4g-equipe-pastille--prosperity:hover .g4g-equipe-pastille__photo, .g4g-equipe-pastille--prosperity:focus-visible .g4g-equipe-pastille__photo { border-color: var(--g4g-primary); }
.g4g-equipe-pastille--purpose .g4g-equipe-pastille__photo { border-color: color-mix(in srgb, var(--g4g-primary) 45%, var(--g4g-border)); }
.g4g-equipe-pastille--purpose:hover .g4g-equipe-pastille__photo, .g4g-equipe-pastille--purpose:focus-visible .g4g-equipe-pastille__photo { border-color: var(--g4g-primary); }
/* Défilement d'ancre : le détail du membre ne se cache pas sous l'en-tête collant. */
.g4g-equipe-member { scroll-margin-top: clamp(80px, 12vh, 130px); }
.g4g-equipe-member { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: clamp(24px, 4vw, 52px); align-items: center; }
.g4g-equipe-member--reverse { grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.78fr); }
.g4g-equipe-member--reverse .g4g-equipe-member__photo { order: 2; }
.g4g-equipe-member--reverse .g4g-equipe-member__body { order: 1; }
.g4g-equipe-member__photo { position: relative; width: 100%; aspect-ratio: 4 / 5; border-radius: 24px; overflow: hidden; background: var(--g4g-surface-alt); box-shadow: var(--g4g-shadow-lg); }
.g4g-equipe-member__bar { position: absolute; top: 0; left: 0; right: 0; height: 5px; z-index: 2; background: var(--g4g-border-strong); }
.g4g-equipe-member__photo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.g4g-equipe-member__role { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: var(--g4g-weight-bold); color: var(--g4g-text-muted); }
.g4g-equipe-member__name { margin: 8px 0 0; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.08; letter-spacing: -0.02em; font-weight: var(--g4g-weight-light); color: var(--g4g-text); }
.g4g-equipe-member__name span { font-weight: var(--g4g-weight-semibold); }
/* [2026-10-19] Prénom dans son propre span (éditable au builder) : il garde la graisse fine du titre. */
.g4g-equipe-member__name .g4g-equipe-member__first { font-weight: inherit; }
.g4g-equipe-member__bio { margin: 18px 0 0; font-size: 16.5px; line-height: 1.68; color: var(--g4g-text-muted); max-width: 56ch; text-wrap: pretty; }
/* Bio « lire plus » : clamp uniforme (6 lignes) posé par le JS UNIQUEMENT si le texte déborde ; sans
   JS la bio complète s'affiche (amélioration progressive). Bouton subtil (lien) sous la bio. */
.g4g-equipe-member__bio.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; }
.g4g-equipe-member__bio.is-expanded { display: block; -webkit-line-clamp: unset; overflow: visible; }
/* Bascule ANIMÉE : le JS fige la hauteur de départ puis la hauteur d'arrivée ; la transition l'anime. */
.g4g-equipe-member__bio.is-animating { overflow: hidden; transition: height 0.4s var(--g4g-ease-out); }
@media (prefers-reduced-motion: reduce) { .g4g-equipe-member__bio.is-animating { transition: none; } }
.g4g-equipe-member__more { align-self: flex-start; margin: 10px 0 0; padding: 0; background: none; border: 0; font: inherit; font-size: var(--g4g-text-sm); font-weight: var(--g4g-weight-semibold); color: var(--g4g-primary); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.g4g-equipe-member__more:hover { color: var(--g4g-primary-hover); }
.g4g-equipe-member__tags { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.g4g-equipe-member__tag { border: 1px solid var(--g4g-border); border-radius: var(--g4g-radius-pill); padding: 6px 13px; font-size: 12.5px; font-weight: var(--g4g-weight-semibold); color: var(--g4g-text-muted); background: var(--g4g-surface); }
/* Filet + rôle colorés par pilier */
.g4g-equipe-member--people .g4g-equipe-member__bar { background: var(--g4g-primary); }
.g4g-equipe-member--people .g4g-equipe-member__role { color: var(--g4g-primary); }
.g4g-equipe-member--planet .g4g-equipe-member__bar { background: var(--g4g-primary); }
.g4g-equipe-member--planet .g4g-equipe-member__role { color: var(--g4g-primary); }
.g4g-equipe-member--prosperity .g4g-equipe-member__bar { background: var(--g4g-primary); }
.g4g-equipe-member--prosperity .g4g-equipe-member__role { color: var(--g4g-primary); }
.g4g-equipe-member--purpose .g4g-equipe-member__bar { background: var(--g4g-primary); }
.g4g-equipe-member--purpose .g4g-equipe-member__role { color: var(--g4g-primary); }
.g4g-equipe-members__note { max-width: 1180px; margin: clamp(28px, 3.5vw, 44px) auto 0; font-size: 13px; line-height: 1.6; color: var(--g4g-text-muted); }
.g4g-equipe-members__note p { margin: 0; }
.g4g-equipe-members__note strong, .g4g-equipe-members__note b { font-weight: var(--g4g-weight-semibold); color: var(--g4g-text); }

@media (max-width: 760px) {
  .g4g-equipe-member,
  .g4g-equipe-member--reverse { grid-template-columns: 1fr; }
  .g4g-equipe-member--reverse .g4g-equipe-member__photo,
  .g4g-equipe-member--reverse .g4g-equipe-member__body { order: 0; }
}
@media (max-width: 860px) {
  /* Héro Équipe : 1 col + constellation décorative masquée (pas de photo à préserver). */
  .g4g-equipe-hero__inner { grid-template-columns: 1fr; }
  .g4g-equipe-hero__collage { display: none; }
}

/* ====================================================================== */
/* PAGE CERTIFICATION ESG (site public) — 7 sections bespoke (S1–S7)      */
/* + fil d'Ariane. 100 % tokens ; icônes SVG en currentColor.            */
/* ====================================================================== */

/* Sur-lignes cert partagées */
.g4g-cert-intro__eyebrow,
.g4g-cert-certifier__eyebrow,
.g4g-cert-levels__eyebrow,
.g4g-cert-seal__eyebrow,
.g4g-cert-benefits__eyebrow,
.g4g-cert-harmo__eyebrow {
  display: block;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: var(--g4g-weight-semibold);
  color: var(--g4g-accent);
}
/* Titres cert partagés (Light + span semibold) */
.g4g-cert-intro__title,
.g4g-cert-certifier__title,
.g4g-cert-levels__title,
.g4g-cert-seal__title,
.g4g-cert-benefits__title,
.g4g-cert-harmo__title,
.g4g-cert-cta__title {
  font-weight: var(--g4g-weight-light);
  /* [#13] Bascule sur la couleur secondaire quand la section est sur fond non blanc
     (--g4g-title-color posé par g4g-cms-bg-*) ; sinon couleur de titre normale. */
  color: var(--g4g-title-color, var(--g4g-text));
}
/* [2026-09-08] Titre en boîte unique RichText : l'accent (ex-« span ») est désormais un
   <b>/<strong> dans le RichText (gras = accent). */
.g4g-cert-intro__title :is(b, strong),
.g4g-cert-certifier__title :is(b, strong),
.g4g-cert-levels__title :is(b, strong),
.g4g-cert-seal__title :is(b, strong),
.g4g-cert-benefits__title :is(b, strong),
.g4g-cert-harmo__title :is(b, strong),
.g4g-cert-cta__title :is(b, strong) { font-weight: var(--g4g-weight-semibold); }





/* --- S1 · Introduction ---------------------------------------------- */
.g4g-landing .g4g-cert-intro { background: var(--g4g-surface); }
.g4g-cert-intro__inner { max-width: var(--lp-width); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
/* [2026-10-15 · QA, demande Alexandre] Le petit logo du programme est remplacé par la sur-ligne
   bleue partagée (.g4g-cert-intro__eyebrow, plus haut) ; le titre la suit de plus près. */
.g4g-cert-intro__eyebrow + .g4g-cert-intro__title { margin-top: 12px; }
.g4g-cert-intro__title { margin: 26px 0 0; font-size: calc(clamp(36px, 4.4vw, 62px) * var(--g4g-title-scale, 1)); line-height: 1.05; letter-spacing: -0.025em; max-width: 20ch; }
.g4g-cert-intro__lede { margin: 26px 0 0; font-size: 17.5px; line-height: 1.65; color: var(--g4g-text-muted); max-width: 56ch; text-wrap: pretty; }
.g4g-cert-intro__desc { margin: 18px 0 0; font-size: 17.5px; line-height: 1.65; color: var(--g4g-text-muted); max-width: 56ch; text-wrap: pretty; }
.g4g-cert-intro__actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.g4g-cert-intro__cta { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 15px 28px; border-radius: var(--g4g-radius-pill); font-size: 16px; font-weight: var(--g4g-weight-semibold); text-decoration: none; transition: background 140ms var(--lp-ease); }
.g4g-cert-intro__cta--primary { background: var(--g4g-primary); color: var(--g4g-primary-contrast); }
.g4g-cert-intro__cta--primary:hover { background: var(--g4g-primary-hover); }
.g4g-cert-intro__cta--secondary { border: 1.5px solid var(--g4g-primary); color: var(--g4g-primary); }
.g4g-cert-intro__cta--secondary:hover { background: var(--g4g-primary-soft); }
.g4g-cert-intro__cta:focus-visible { outline: 2px solid var(--g4g-accent); outline-offset: 2px; }
.g4g-cert-intro__media { position: relative; isolation: isolate; }
.g4g-cert-intro__preview { position: relative; z-index: 1; width: 100%; max-width: 400px; margin: 0 auto; aspect-ratio: 1000 / 1294; border-radius: var(--g4g-radius-lg); overflow: hidden; background: var(--g4g-surface-alt); box-shadow: var(--g4g-shadow-lg); border: 1px solid var(--g4g-border); }
.g4g-cert-intro__preview-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- Bénéfices « photo 4:5 + puces » (Global ESG — design gabarit) ------ */
.g4g-landing .g4g-benefits-photo { background: var(--g4g-surface); }
.g4g-benefits-photo__inner { max-width: var(--lp-width); margin: 0 auto; padding-inline: var(--lp-gutter); display: grid; grid-template-columns: minmax(240px, 40%) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.g4g-benefits-photo__media { position: relative; display: grid; place-items: center; min-height: clamp(360px, 42vw, 460px); isolation: isolate; }
.g4g-benefits-photo__frame { position: relative; z-index: 2; width: min(84%, 320px); aspect-ratio: 4 / 5; border-radius: var(--g4g-radius-lg); padding: 11px; background: var(--g4g-primary); box-shadow: var(--g4g-shadow-lg); }
.g4g-benefits-photo__img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--g4g-radius-lg) - 5px); }
/* [2026-10-06] Option « Cadre bleu autour de la photo » désactivée (Global Vision) : ni passe-partout
   bleu ni fond, la photo garde ses coins arrondis et son ombre. */
.g4g-benefits-photo--sans-cadre .g4g-benefits-photo__frame { padding: 0; background: none; }
.g4g-benefits-photo--sans-cadre .g4g-benefits-photo__img { border-radius: var(--g4g-radius-lg); }
.g4g-benefits-photo__deco { position: absolute; z-index: 1; display: block; }
.g4g-benefits-photo__deco--ring { width: clamp(64px, 16%, 110px); aspect-ratio: 1; border-radius: 50%; border: 10px solid var(--g4g-planet); left: -4%; top: 8%; opacity: .55; }
.g4g-benefits-photo__deco--square { width: clamp(42px, 10%, 66px); aspect-ratio: 1; border-radius: 22%; background: var(--g4g-purpose); right: 1%; top: 4%; }
.g4g-benefits-photo__deco--dot { width: clamp(26px, 7%, 42px); aspect-ratio: 1; border-radius: 50%; background: var(--g4g-people); left: 2%; bottom: 12%; }
.g4g-benefits-photo__eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--g4g-accent); margin: 0 0 12px; }
.g4g-benefits-photo__title { font-size: var(--lp-h2); font-weight: 300; line-height: 1.08; letter-spacing: -.02em; color: var(--g4g-text); margin: 0 0 18px; }
/* [QA 2026-10-15] Texte « comme le reste du site » (demande Alexandre) : le gras reste gras, sans bleu ;
   seul le surtitre garde sa couleur d'accent. */
.g4g-benefits-photo__title b { font-weight: 700; }
.g4g-benefits-photo__checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.g4g-benefits-photo__check { position: relative; padding-left: 40px; color: var(--g4g-text); font-size: clamp(1rem, 1.3vw, 1.08rem); line-height: 1.5; }
.g4g-benefits-photo__check b { font-weight: 600; }
.g4g-benefits-photo__check::before { content: ""; position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 8px; background: var(--g4g-primary-soft); border: 1px solid var(--g4g-border-strong); }
.g4g-benefits-photo__check::after { content: ""; position: absolute; left: 9px; top: 6px; width: 7px; height: 13px; border: solid var(--g4g-primary); border-width: 0 2.5px 2.5px 0; transform: rotate(42deg); }
@media (max-width: 760px) { .g4g-benefits-photo__inner { grid-template-columns: 1fr; gap: 22px; } .g4g-benefits-photo__media { min-height: 340px; } }

/* --- Bénéfices 4P « cartes grises sur fond sombre » (Global ESG — gabarit S5) --- */
.g4g-landing .g4g-pillars-benefits { background: var(--g4g-ink); }
.g4g-pillars-benefits__inner { max-width: var(--lp-width); margin: 0 auto; padding-inline: var(--lp-gutter); }
.g4g-pillars-benefits__eyebrow { text-align: center; font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--g4g-accent-on-dark); margin: 0 0 12px; }
.g4g-pillars-benefits__title { text-align: center; font-size: var(--lp-h2); font-weight: 300; line-height: 1.08; letter-spacing: -.02em; color: var(--g4g-primary-contrast); margin: 0 auto 34px; max-width: 28ch; }
.g4g-pillars-benefits__title b { font-weight: 700; }
.g4g-pillars-benefits__grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: 18px; max-width: 960px; margin-inline: auto; }
.g4g-pillars-benefits__card { position: relative; display: flex; flex-direction: column; background: var(--g4g-surface-sunken); border: 1px solid var(--g4g-border); border-top: 5px solid var(--pb, var(--g4g-accent)); border-radius: var(--g4g-radius-lg); padding: clamp(20px, 2.4vw, 28px); }
.g4g-pb--people { --pb: var(--g4g-people); }
.g4g-pb--planet { --pb: var(--g4g-planet); }
.g4g-pb--prosperity { --pb: var(--g4g-prosperity); }
.g4g-pb--purpose { --pb: var(--g4g-purpose); }
/* [2026-10-16] Picto + titre CENTRÉS dans l'encadré, titre à la couleur de son P (demande Alexandre) ;
   graisse semi-grasse pour que le titre reste lisible en couleur (doré « Pourquoi » compris). */
.g4g-pillars-benefits__ic { display: flex; justify-content: center; margin-bottom: 10px; }
.g4g-pillars-benefits__ic img { display: block; width: 56px; height: 56px; object-fit: contain; }
.g4g-pillars-benefits__card-title { font-size: 1.25rem; font-weight: var(--g4g-weight-semibold); color: var(--pb, var(--g4g-primary)); text-align: center; margin: 0 0 12px; }
.g4g-pillars-benefits__bullets { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.g4g-pillars-benefits__bullets li { position: relative; padding-left: 24px; color: var(--g4g-text); font-size: 14.5px; line-height: 1.5; }
.g4g-pillars-benefits__bullets li::before { content: ""; position: absolute; left: 0; top: 7px; width: 11px; height: 11px; border-radius: 3px; background: var(--pb, var(--g4g-accent)); }
@media (max-width: 680px) { .g4g-pillars-benefits__grid { grid-template-columns: 1fr; } }

/* --- Stats : thème CLAIR (Global ESG) — fond blanc, chiffres bleus ------ */
.g4g-landing .g4g-statsband--light { background: var(--g4g-surface); }
.g4g-statsband--light .g4g-statsband__bg { display: none; }
.g4g-statsband--light .g4g-statsband__eyebrow { color: var(--g4g-accent); }
.g4g-statsband--light .g4g-statsband__title { color: var(--g4g-text); }
.g4g-statsband--light .g4g-statsband__intro { color: var(--g4g-text-muted); }
.g4g-statsband--light .g4g-statsband__count { color: var(--g4g-primary); }
.g4g-statsband--light .g4g-statsband__suffix { color: var(--g4g-accent); }
.g4g-statsband--light .g4g-statsband__label { color: var(--g4g-text-muted); }
.g4g-statsband--light .g4g-statsband__bar { background: var(--g4g-border); }

/* --- Témoignages : thème CLAIR (Global ESG) — fond gris pâle, texte foncé - */
.g4g-landing .g4g-ttmn--light { background: var(--g4g-surface-sunken); }
.g4g-ttmn--light .g4g-ttmn__eyebrow { color: var(--g4g-accent); }
.g4g-ttmn--light .g4g-ttmn__title { color: var(--g4g-text); }
.g4g-ttmn--light .g4g-ttmn__subtitle { color: var(--g4g-text-muted); }
.g4g-ttmn--light .g4g-ttmn__quote { color: var(--g4g-text); }
.g4g-ttmn--light .g4g-ttmn__name { color: var(--g4g-primary); }
.g4g-ttmn--light .g4g-ttmn__role { color: var(--g4g-text-muted); }
.g4g-ttmn--light .g4g-ttmn__mark { color: var(--g4g-border-strong); }
.g4g-ttmn--light .g4g-ttmn__arrow { color: var(--g4g-primary); border-color: var(--g4g-border-strong); }
.g4g-ttmn--light .g4g-ttmn__dot { background: var(--g4g-border-strong); }
.g4g-ttmn--light .g4g-ttmn__dot.on { background: var(--g4g-primary); }

/* --- CTA « split » (composition + panneau) — Global ESG (design gabarit) - */
.g4g-landing .g4g-split-cta { background: var(--g4g-surface); }
.g4g-split-cta__inner { max-width: var(--lp-width); margin: 0 auto; padding-inline: var(--lp-gutter); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.g4g-split-cta__media { position: relative; display: grid; place-items: center; min-height: clamp(340px, 40vw, 440px); isolation: isolate; }
.g4g-split-cta__frame { position: relative; z-index: 2; width: min(72%, 360px); aspect-ratio: 1; border-radius: 50%; padding: 12px; background: var(--g4g-primary); box-shadow: var(--g4g-shadow-lg); }
.g4g-split-cta__img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
/* [2026-10-16] `aspect-ratio` sur l'IMAGE (et non plus height:100 %) : Safari iOS ne résolvait pas la
   hauteur relative dans le cadre carré → l'image gardait ses proportions = ovale sur mobile. */
.g4g-split-cta__deco { position: absolute; z-index: 1; display: block; }
.g4g-split-cta__deco--ring { width: clamp(50px, 12%, 84px); aspect-ratio: 1; border-radius: 50%; border: 9px solid var(--g4g-planet); left: 3%; top: 6%; opacity: .55; }
.g4g-split-cta__deco--square { width: clamp(42px, 10%, 66px); aspect-ratio: 1; border-radius: 22%; background: var(--g4g-purpose); right: 5%; top: 9%; }
.g4g-split-cta__deco--dot { width: clamp(26px, 7%, 44px); aspect-ratio: 1; border-radius: 50%; background: var(--g4g-people); right: 9%; bottom: 12%; }
.g4g-split-cta__panel { background: var(--g4g-surface-sunken); border: 1px solid var(--g4g-border); border-radius: var(--g4g-radius-lg); padding: clamp(26px, 4vw, 48px); }
.g4g-split-cta__title { font-size: var(--lp-h2-cta); font-weight: 300; line-height: 1.08; letter-spacing: -.02em; color: var(--g4g-primary); margin: 0 0 14px; }
.g4g-split-cta__title b { font-weight: 700; }
.g4g-split-cta__subtitle { color: var(--g4g-text-muted); margin: 0 0 20px; max-width: 48ch; line-height: 1.6; }
.g4g-split-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.g4g-split-cta__cta { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; font-weight: 600; text-decoration: none; }
.g4g-split-cta__cta--primary { background: var(--g4g-primary); color: var(--g4g-primary-contrast); }
.g4g-split-cta__cta--secondary { color: var(--g4g-primary); border: 1px solid var(--g4g-border-strong); }
@media (max-width: 760px) { .g4g-split-cta__inner { grid-template-columns: 1fr; gap: 24px; } .g4g-split-cta__media { min-height: 320px; } }

/* --- Documents à télécharger (Global ESG — design gabarit) -------------- */
.g4g-landing .g4g-downloads { background: var(--g4g-surface); }
.g4g-downloads__inner { max-width: var(--lp-width); margin: 0 auto; padding-inline: var(--lp-gutter); text-align: center; }
.g4g-downloads__eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--g4g-accent); margin: 0 0 12px; }
.g4g-downloads__title { font-size: var(--lp-h2); font-weight: 300; color: var(--g4g-text); margin: 0 auto 6px; }
.g4g-downloads__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); margin-top: 34px; }
.g4g-downloads__card { display: flex; flex-direction: column; align-items: center; }
.g4g-downloads__caption { margin: 0 0 16px; font-size: clamp(1.15rem, 1.6vw, 1.45rem); font-weight: var(--g4g-weight-semibold, 600); color: var(--g4g-primary); }
.g4g-downloads__thumb { display: block; text-decoration: none; }
.g4g-downloads__cover { width: min(80%, 230px); height: auto; border-radius: 6px; box-shadow: var(--g4g-shadow-lg); transition: transform .2s var(--lp-ease, ease); }
.g4g-downloads__thumb:hover .g4g-downloads__cover, .g4g-downloads__thumb:focus-visible .g4g-downloads__cover { transform: translateY(-5px); }
.g4g-downloads__btn { margin-top: 18px; }
@media (max-width: 760px) { .g4g-downloads__grid { grid-template-columns: 1fr; gap: 32px; } }

/* --- Global ESG : titres de section UNIFORMISÉS à la taille « Niveaux » (~49px, hors héros) --- */
.g4g-cert-intro__title,
.g4g-cert-certifier__title,
.g4g-cert-harmo__title,
.g4g-pillars--levels .g4g-pillars__title,
.g4g-benefits-photo__title,
.g4g-pillars-benefits__title,
.g4g-split-cta__title,
.g4g-downloads__title,
.g4g-statsband--light .g4g-statsband__title,
.g4g-ttmn--light .g4g-ttmn__title {
  font-size: clamp(32px, 3.8vw, 49px) !important;
}

/* --- Global ESG : Niveaux — descriptions ramenées à la taille de paragraphe standard --- */
.g4g-pillars--levels .g4g-pillars__panel-text { font-size: 1.0625rem; line-height: 1.55; }
.g4g-cert-intro__ecocert { position: absolute; z-index: 2; left: 50%; bottom: -26px; transform: translateX(-50%); background: var(--g4g-surface); border: 1px solid var(--g4g-border); border-radius: var(--g4g-radius-md); box-shadow: var(--g4g-shadow-md); padding: 12px 18px; display: flex; align-items: center; gap: 12px; white-space: nowrap; }
/* [lot 2 motion] Formes 4P DERRIÈRE l'aperçu du certificat (z0 < aperçu z1 < badge z2),
   en parallaxe (data-px). Décoratifs hors flux, aria-hidden. Sobre. 100 % tokens. */
.g4g-cert-intro__decor { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.g4g-cert-intro__deco { position: absolute; display: block; }
.g4g-chd--ring { width: clamp(130px, 16vw, 188px); aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--g4g-accent); left: -5%; top: 3%; }
.g4g-chd--square { width: clamp(40px, 5vw, 62px); aspect-ratio: 1; border-radius: var(--g4g-radius-md); background: var(--g4g-purpose); right: -2%; top: 16%; }
.g4g-chd--dot { width: clamp(24px, 3vw, 36px); aspect-ratio: 1; border-radius: 50%; background: var(--g4g-people); left: 1%; bottom: 5%; }
.g4g-cert-intro__ecocert-img { height: 44px; width: auto; display: block; }

/* --- S2 · Le tiers certificateur ------------------------------------ */
.g4g-landing .g4g-cert-certifier { background: var(--g4g-surface-sunken); border-top: 1px solid var(--g4g-border); }
.g4g-cert-certifier__inner { max-width: 680px; margin: 0 auto; }
.g4g-cert-certifier__aside { position: sticky; top: 100px; }
.g4g-cert-certifier__card { margin: 22px 0 28px; border: 1px solid var(--g4g-border); border-radius: var(--g4g-radius-lg); background: var(--g4g-surface); padding: 22px clamp(20px, 3vw, 30px); display: flex; align-items: center; gap: clamp(18px, 3vw, 32px); box-shadow: var(--g4g-shadow-sm); }
.g4g-cert-certifier__logo { width: 160px; max-width: 42%; height: auto; display: block; flex: none; }
.g4g-cert-certifier__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; flex: 1; }
.g4g-cert-certifier__stat { border-radius: 14px; background: var(--g4g-surface-sunken); padding: 14px 12px; text-align: center; }
.g4g-cert-certifier__stat-value { font-size: 24px; font-weight: var(--g4g-weight-semibold); color: var(--g4g-primary); letter-spacing: -0.02em; }
.g4g-cert-certifier__stat-label { font-size: 11.5px; line-height: 1.35; color: var(--g4g-text-muted); margin-top: 2px; }
.g4g-cert-certifier__title { margin: 12px 0 0; font-size: calc(clamp(30px, 3.4vw, 46px) * var(--g4g-title-scale, 1)); line-height: 1.1; letter-spacing: -0.02em; max-width: 22ch; }
.g4g-cert-certifier__prose p { margin: 18px 0 0; font-size: 16.5px; line-height: 1.7; color: var(--g4g-text-muted); text-wrap: pretty; }
.g4g-cert-certifier__prose p:first-child { margin-top: 22px; }
.g4g-cert-certifier__callout { margin-top: 24px; border: 1px solid var(--g4g-border); border-left: 4px solid var(--g4g-accent); border-radius: 14px; background: var(--g4g-surface); padding: 18px 22px; display: flex; gap: 14px; align-items: flex-start; max-width: 64ch; color: var(--g4g-accent); }
.g4g-cert-certifier__callout svg { flex: none; margin-top: 2px; }
.g4g-cert-certifier__callout-text p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--g4g-text-muted); }
.g4g-cert-certifier__callout-text strong { font-weight: var(--g4g-weight-semibold); color: var(--g4g-text); }
.g4g-cert-certifier__quotes { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.g4g-cert-certifier__quote { margin: 0; border: 1px solid var(--g4g-border); border-radius: var(--g4g-radius-lg); background: var(--g4g-surface); padding: 24px; }
.g4g-cert-certifier__quote-mark { color: var(--g4g-border-strong); }
.g4g-cert-certifier__quote-text { margin: 14px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--g4g-text); text-wrap: pretty; }
.g4g-cert-certifier__quote-author { margin-top: 16px; font-size: 13.5px; color: var(--g4g-text-muted); }
.g4g-cert-certifier__quote-author strong { font-weight: var(--g4g-weight-semibold); color: var(--g4g-text); }
@media (max-width: 560px) { .g4g-cert-certifier__card { flex-direction: column; align-items: flex-start; } .g4g-cert-certifier__logo { max-width: 60%; } }

/* --- S3 · Les niveaux ----------------------------------------------- */
.g4g-landing .g4g-cert-levels { background: var(--g4g-surface); border-top: 1px solid var(--g4g-border); scroll-margin-top: 80px; }
.g4g-cert-levels__inner { max-width: var(--lp-width); margin: 0 auto; }
.g4g-cert-levels__head { max-width: 64ch; }
.g4g-cert-levels__title { margin: 12px 0 0; font-size: calc(clamp(32px, 3.8vw, 52px) * var(--g4g-title-scale, 1)); line-height: 1.08; letter-spacing: -0.022em; }
.g4g-cert-levels__intro { margin: 20px 0 0; font-size: 17px; line-height: 1.65; color: var(--g4g-text-muted); text-wrap: pretty; }
/* Cartes de MÊME taille (règle universelle Alexandre 2026-08-26 : « les encadrés
   s'harmonisent avec le plus grand → même hauteur ET même largeur »). Avant :
   `align-items: end` + escalier de padding (26→30→34→38px) donnaient des hauteurs
   croissantes. Maintenant `align-items: stretch` égalise sur la plus haute ;
   largeurs déjà égales (repeat(4, 1fr)). */
.g4g-cert-levels__grid { margin-top: clamp(34px, 4vw, 52px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.g4g-cert-levels__card { border: 1px solid var(--g4g-border); border-radius: var(--g4g-radius-lg); background: var(--g4g-surface-sunken); padding: 26px 24px; display: flex; flex-direction: column; }
/* La carte vedette garde sa mise en valeur (bordure/fond/ombre) mais le MÊME
   padding que les autres — sa hauteur s'aligne par `stretch`, pas par un padding
   gonflé. */
.g4g-cert-levels__card--featured { border: 1.5px solid var(--g4g-accent); background: var(--g4g-primary-soft); padding: 26px 24px; box-shadow: var(--g4g-shadow-md); }
/* card-head ne contient plus que le label (le badge chiffre en coin est retiré :
   le numéro figure déjà dans le texte « Niveau N ») → plus de space-between. */
.g4g-cert-levels__card-head { display: flex; align-items: center; gap: 10px; }
.g4g-cert-levels__card-label { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: var(--g4g-weight-bold); color: var(--g4g-text-subtle); }
.g4g-cert-levels__card--featured .g4g-cert-levels__card-label { color: var(--g4g-accent); }
.g4g-cert-levels__card-name { margin-top: 14px; font-size: 21px; font-weight: var(--g4g-weight-semibold); letter-spacing: -0.01em; color: var(--g4g-primary); }
.g4g-cert-levels__card-desc { margin: 12px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--g4g-text-muted); text-wrap: pretty; }
.g4g-cert-levels__note { margin: 16px 0 0; font-size: 13px; line-height: 1.6; color: var(--g4g-text-subtle); }

/* --- S4 · Le sceau -------------------------------------------------- */
.g4g-landing .g4g-cert-seal { background: var(--g4g-surface-sunken); border-top: 1px solid var(--g4g-border); }
.g4g-cert-seal__inner { max-width: var(--lp-width); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.g4g-cert-seal__title { margin: 12px 0 0; font-size: calc(clamp(30px, 3.6vw, 48px) * var(--g4g-title-scale, 1)); line-height: 1.08; letter-spacing: -0.022em; max-width: 20ch; }
.g4g-cert-seal__desc { margin: 22px 0 0; font-size: 17px; line-height: 1.7; color: var(--g4g-text-muted); max-width: 56ch; text-wrap: pretty; }
.g4g-cert-seal__checks { margin-top: 26px; display: flex; flex-direction: column; gap: 12px; }
.g4g-cert-seal__check { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--g4g-text); }
.g4g-cert-seal__check-icon { width: 28px; height: 28px; border-radius: var(--g4g-radius-pill); background: var(--g4g-primary-soft); color: var(--g4g-primary); display: grid; place-items: center; flex: none; }
.g4g-cert-seal__badges { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.g4g-cert-seal__badge { border: 1px solid var(--g4g-border); border-radius: var(--g4g-radius-lg); background: var(--g4g-surface); padding: 24px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; box-shadow: var(--g4g-shadow-sm); }
.g4g-cert-seal__badge--featured { border: 1.5px solid var(--g4g-accent); box-shadow: var(--g4g-shadow-md); }
.g4g-cert-seal__badge-icon { width: 64px; height: 64px; border-radius: var(--g4g-radius-pill); background: var(--g4g-primary-soft); color: var(--g4g-primary); display: grid; place-items: center; }
.g4g-cert-seal__badge--featured .g4g-cert-seal__badge-icon { background: var(--g4g-primary); color: var(--g4g-primary-contrast); }
.g4g-cert-seal__badge-label { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: var(--g4g-weight-bold); color: var(--g4g-text-subtle); }
.g4g-cert-seal__badge--featured .g4g-cert-seal__badge-label { color: var(--g4g-accent); }
.g4g-cert-seal__badge-name { font-size: 17px; font-weight: var(--g4g-weight-semibold); color: var(--g4g-primary); margin-top: -6px; }

/* --- S5 · Les bénéfices --------------------------------------------- */
.g4g-landing .g4g-cert-benefits { background: var(--g4g-surface); border-top: 1px solid var(--g4g-border); }
.g4g-cert-benefits__inner { max-width: var(--lp-width); margin: 0 auto; }
.g4g-cert-benefits__head { max-width: 64ch; }
.g4g-cert-benefits__title { margin: 12px 0 0; font-size: calc(clamp(32px, 3.8vw, 52px) * var(--g4g-title-scale, 1)); line-height: 1.08; letter-spacing: -0.022em; }
.g4g-cert-benefits__intro { margin: 20px 0 0; font-size: 17px; line-height: 1.65; color: var(--g4g-text-muted); text-wrap: pretty; }
.g4g-cert-benefits__grid { margin-top: clamp(34px, 4vw, 52px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.g4g-cert-benefits__card { border: 1px solid var(--g4g-border); border-radius: var(--g4g-radius-lg); background: var(--g4g-surface-sunken); padding: 28px 26px; }
.g4g-cert-benefits__icon { width: 44px; height: 44px; border-radius: var(--g4g-radius-pill); background: var(--g4g-primary-soft); color: var(--g4g-primary); display: grid; place-items: center; }
.g4g-cert-benefits__card-text { margin: 16px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--g4g-text); text-wrap: pretty; }

/* --- S6 · Harmonisation --------------------------------------------- */
.g4g-landing .g4g-cert-harmo { background: var(--g4g-surface-sunken); border-top: 1px solid var(--g4g-border); }
/* [2026-09-08] Colonne du logo « RE » élargie (demande Alexandre : image RE beaucoup plus
   grande + taille réglable au CMS via g4g-cms-iw-*). */
.g4g-cert-harmo__inner { max-width: var(--lp-width); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: clamp(32px, 5vw, 60px); align-items: center; }
.g4g-cert-harmo__logo { justify-self: center; }
.g4g-cert-harmo__logo-img { width: 320px; max-width: 100%; height: auto; display: block; }
.g4g-cert-harmo__title { margin: 12px 0 0; font-size: calc(clamp(28px, 3.4vw, 44px) * var(--g4g-title-scale, 1)); line-height: 1.1; letter-spacing: -0.02em; max-width: 24ch; }
.g4g-cert-harmo__subtitle { margin: 10px 0 0; font-size: 16px; line-height: 1.6; color: var(--g4g-text-subtle); max-width: 52ch; }
.g4g-cert-harmo__para { margin: 22px 0 0; font-size: 16.5px; line-height: 1.7; color: var(--g4g-text-muted); max-width: 60ch; text-wrap: pretty; }

/* --- S7 · CTA final (carte) ----------------------------------------- */
.g4g-landing .g4g-cert-cta { background: var(--g4g-surface); border-top: 1px solid var(--g4g-border); }
.g4g-cert-cta__card { max-width: var(--lp-width); margin: 0 auto; border: 1px solid var(--g4g-border); border-radius: var(--g4g-radius-lg); background: var(--g4g-primary-soft); padding: clamp(36px, 5vw, 64px); text-align: center; }
.g4g-cert-cta__title { margin: 0 auto; font-size: calc(clamp(30px, 3.8vw, 52px) * var(--g4g-title-scale, 1)); line-height: 1.06; letter-spacing: -0.024em; max-width: 20ch; }
.g4g-cert-cta__subtitle { margin: 20px auto 0; font-size: 17px; line-height: 1.6; color: var(--g4g-text-muted); max-width: 56ch; text-wrap: pretty; }
.g4g-cert-cta__actions { margin-top: 30px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.g4g-cert-cta__cta { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 15px 30px; border-radius: var(--g4g-radius-pill); font-size: 16px; font-weight: var(--g4g-weight-semibold); text-decoration: none; transition: background 140ms var(--lp-ease); }
.g4g-cert-cta__cta--primary { background: var(--g4g-primary); color: var(--g4g-primary-contrast); }
.g4g-cert-cta__cta--primary:hover { background: var(--g4g-primary-hover); }
.g4g-cert-cta__cta--secondary { border: 1.5px solid var(--g4g-primary); color: var(--g4g-primary); }
.g4g-cert-cta__cta--secondary:hover { background: var(--g4g-surface); }
.g4g-cert-cta__cta:focus-visible { outline: 2px solid var(--g4g-accent); outline-offset: 2px; }
.g4g-cert-cta__note { max-width: var(--lp-width); margin: clamp(30px, 3.5vw, 44px) auto 0; font-size: 13px; line-height: 1.6; color: var(--g4g-text-muted); }
.g4g-cert-cta__note p { margin: 0; }
.g4g-cert-cta__note strong, .g4g-cert-cta__note b { font-weight: var(--g4g-weight-semibold); color: var(--g4g-text); }

/* --- Réponse mobile Certification ----------------------------------- */
@media (max-width: 980px) {
  .g4g-cert-intro__inner,
  .g4g-cert-certifier__inner,
  .g4g-cert-seal__inner,
  .g4g-cert-harmo__inner { grid-template-columns: 1fr; }
  /* Formes du héro Certif masquées en mobile (calées derrière l'aperçu desktop). */
  .g4g-cert-intro__decor { display: none; }
  .g4g-cert-certifier__aside { position: static; }
  .g4g-cert-levels__grid,
  .g4g-cert-benefits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g4g-cert-certifier__quotes { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .g4g-cert-levels__grid,
  .g4g-cert-benefits__grid,
  .g4g-cert-seal__badges { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .g4g-cert-intro__cta,
  .g4g-cert-cta__cta { transition: none; }
}

/* ====================================================================== */
/* PAGE CONTACT (site public) — formulaire ZOHO restylé (S1)              */
/* Structure Zoho conservée ; style 100 % nos tokens. Le formulaire poste */
/* vers forms.zohopublic.com (CSP form-action). Validation = zoho-*.js.   */
/* ====================================================================== */
.g4g-landing .g4g-contactz { background: var(--g4g-surface); }
.g4g-contactz__inner { max-width: var(--lp-width); margin: 0 auto; }
.g4g-contactz__eyebrow { display: block; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: var(--g4g-weight-semibold); color: var(--g4g-accent); }
.g4g-contactz__title { margin: 14px 0 0; font-size: calc(clamp(40px, 5.4vw, 72px) * var(--g4g-title-scale, 1)); line-height: 1.02; letter-spacing: -0.03em; font-weight: var(--g4g-weight-light); color: var(--g4g-text); max-width: 22ch; }
.g4g-contactz__title span { font-weight: var(--g4g-weight-semibold); color: var(--g4g-accent); }
.g4g-contactz__subtitle { margin: 22px 0 0; font-size: 18px; line-height: 1.6; color: var(--g4g-text-muted); max-width: 58ch; text-wrap: pretty; }
/* [lot 2 motion] Formes 4P de l'en-tête Contact : couche décor DERRIÈRE le texte
   (isolation + z-index:-1), confinée à la moitié droite (le titre/sous-titre sont
   à gauche, max 22ch/58ch), en parallaxe (data-px). 100 % tokens. */
.g4g-contactz__head { position: relative; isolation: isolate; }
.g4g-contactz__decor { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.g4g-contactz__deco { position: absolute; display: block; }
.g4g-czd--ring { width: clamp(120px, 15vw, 188px); aspect-ratio: 1; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--g4g-accent) 55%, transparent); right: 7%; top: -4%; }
.g4g-czd--wheel { width: clamp(54px, 7vw, 84px); aspect-ratio: 1; border-radius: 50%; background: conic-gradient(var(--g4g-people) 0 25%, var(--g4g-planet) 0 50%, var(--g4g-prosperity) 0 75%, var(--g4g-purpose) 0 100%); box-shadow: var(--g4g-shadow-sm); right: 2%; top: 34%; }
.g4g-czd--square { width: clamp(38px, 4.5vw, 56px); aspect-ratio: 1; border-radius: var(--g4g-radius-md); background: var(--g4g-purpose); right: 25%; top: 6%; }
.g4g-czd--dot { width: clamp(22px, 3vw, 34px); aspect-ratio: 1; border-radius: 50%; background: var(--g4g-people); right: 37%; top: 42%; }
.g4g-contactz__grid { margin-top: clamp(30px, 4vw, 46px); display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 44px); align-items: start; }
.g4g-contactz__card { border: 1px solid var(--g4g-border); border-radius: var(--g4g-radius-lg); background: var(--g4g-surface); padding: clamp(24px, 3vw, 40px); box-shadow: var(--g4g-shadow-sm); }
/* Formulaire Zoho en iframe (src résolu par audience × langue). Hauteur généreuse : l'iframe
   « basic » Zoho ne s'auto-redimensionne pas → min-height couvre le formulaire le plus long
   (QA humaine ajuste au besoin). Pas de style inline (CSP). */
.g4g-contactz__iframe { display: block; width: 100%; min-height: 760px; border: 0; border-radius: var(--g4g-radius-md); background: var(--g4g-surface); }
/* [2026-10-06] « Formulaire seul, centré » (layout=form_only, Global Vision) : pas de rail, une
   colonne centrée ; en-tête centré pour rester aligné sur la carte. La hauteur de l'iframe suit le
   formulaire (sections.js::initZohoHeight) — pas d'ascenseur interne. */
.g4g-contactz--form-only .g4g-contactz__grid { grid-template-columns: minmax(0, 1fr); max-width: 760px; margin-inline: auto; }
.g4g-contactz--form-only .g4g-contactz__head { text-align: center; }
.g4g-contactz--form-only .g4g-contactz__title,
.g4g-contactz--form-only .g4g-contactz__subtitle { margin-inline: auto; }
/* [2026-10-13] Disposition A du héro (demande Alexandre) : texte à GAUCHE, illustration à DROITE.
   Prime sur le centrage de form_only pour le HEAD seulement (le formulaire en dessous reste
   centré). Mobile : l'illustration passe au-dessus du texte. */
.g4g-contactz__head--illus { display: grid; grid-template-columns: 1fr minmax(0, 42%); gap: clamp(24px, 4vw, 56px); align-items: center; }
.g4g-contactz--form-only .g4g-contactz__head--illus { text-align: left; }
.g4g-contactz--form-only .g4g-contactz__head--illus .g4g-contactz__title,
.g4g-contactz--form-only .g4g-contactz__head--illus .g4g-contactz__subtitle { margin-inline: 0; }
.g4g-contactz__head-copy { min-width: 0; }
.g4g-contactz__head-illus { min-width: 0; }
.g4g-contactz__head-img { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: var(--g4g-shadow-sm); }
@media (max-width: 860px) {
  .g4g-contactz__head--illus { grid-template-columns: 1fr; }
  .g4g-contactz__head-illus { order: -1; }
}
.g4g-contactz__section { margin: 26px 0 4px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: var(--g4g-weight-semibold); color: var(--g4g-text-subtle); }
.g4g-contactz__section:first-child { margin-top: 0; }
.g4g-contactz__field { margin-top: 16px; }
.g4g-contactz__label { display: block; margin-bottom: 7px; font-size: 14px; font-weight: var(--g4g-weight-semibold); color: var(--g4g-text); }
.g4g-contactz__label em { color: var(--g4g-danger); font-style: normal; }
.g4g-contactz__input,
.g4g-contactz__select,
.g4g-contactz__textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  padding: 12px 14px;
  border: 1.5px solid var(--g4g-border-strong);
  border-radius: var(--g4g-radius-md);
  background: var(--g4g-surface);
  font-family: inherit;
  font-size: 16px;
  color: var(--g4g-text);
  transition: border-color 140ms var(--lp-ease);
}
.g4g-contactz__textarea { min-height: 120px; resize: vertical; }
.g4g-contactz__input:focus,
.g4g-contactz__select:focus,
.g4g-contactz__textarea:focus { outline: none; border-color: var(--g4g-primary); }
.g4g-contactz__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.g4g-contactz__row--phone { grid-template-columns: 96px 1fr; }
.g4g-contactz__error { display: none; margin: 7px 0 0; font-size: 13px; color: var(--g4g-danger); }
.g4g-contactz__field--consent { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; }
.g4g-contactz__field--consent .g4g-contactz__error { grid-column: 1 / -1; }
.g4g-contactz__consent-label { font-size: 14px; line-height: 1.5; color: var(--g4g-text-muted); }
.g4g-contactz__actions { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.g4g-contactz__submit { min-height: 52px; padding: 15px 34px; border: none; border-radius: var(--g4g-radius-pill); background: var(--g4g-primary); color: var(--g4g-primary-contrast); font-family: inherit; font-size: 16px; font-weight: var(--g4g-weight-semibold); cursor: pointer; transition: background 140ms var(--lp-ease); }
.g4g-contactz__submit:hover { background: var(--g4g-primary-hover); }
.g4g-contactz__submit:focus-visible { outline: 2px solid var(--g4g-accent); outline-offset: 2px; }
.g4g-contactz__privacy { margin: 0; font-size: 13px; line-height: 1.55; color: var(--g4g-text-muted); }
/* Rail latéral */
.g4g-contactz__rail { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 20px; }
.g4g-contactz__aside-card { border: 1px solid var(--g4g-border); border-radius: var(--g4g-radius-lg); background: var(--g4g-surface-sunken); padding: 24px 26px; }
.g4g-contactz__aside-label { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: var(--g4g-weight-semibold); color: var(--g4g-text-muted); }
.g4g-contactz__aside-row { margin-top: 14px; display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--g4g-text); }
.g4g-contactz__aside-icon { width: 34px; height: 34px; border-radius: var(--g4g-radius-pill); background: var(--g4g-primary-soft); color: var(--g4g-primary); display: grid; place-items: center; flex: none; }
.g4g-contactz__aside-value { color: var(--g4g-text); text-decoration: none; }
a.g4g-contactz__aside-value:hover { color: var(--g4g-primary); }
.g4g-contactz__aside-links { margin-top: 12px; display: flex; flex-direction: column; }
.g4g-contactz__aside-link { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 48px; padding: 10px 0; border-bottom: 1px solid var(--g4g-border); font-size: 15px; font-weight: var(--g4g-weight-semibold); color: var(--g4g-text); text-decoration: none; transition: color 140ms var(--lp-ease); }
.g4g-contactz__aside-link:last-child { border-bottom: none; }
.g4g-contactz__aside-link:hover { color: var(--g4g-accent); }
.g4g-contactz__note { margin: clamp(28px, 3vw, 40px) 0 0; font-size: 13px; line-height: 1.6; color: var(--g4g-text-muted); }
.g4g-contactz__note p { margin: 0; }
.g4g-contactz__note strong, .g4g-contactz__note b { font-weight: var(--g4g-weight-semibold); color: var(--g4g-text); }
@media (max-width: 900px) {
  .g4g-contactz__grid { grid-template-columns: 1fr; }
  .g4g-contactz__rail { position: static; }
  /* Décor d'en-tête masqué en mobile (l'en-tête passe pleine largeur — pas de zone droite). */
  .g4g-contactz__decor { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .g4g-contactz__input,
  .g4g-contactz__select,
  .g4g-contactz__textarea,
  .g4g-contactz__submit,
  .g4g-contactz__aside-link { transition: none; }
}
/* ==== S5 · Showcase Repertoire <-> Communaute (SITE-01) ==================
   Onglets = 2 radios (#g4g-repcomm-rep / -comm) + labels : :checked pilote la
   piste (translateX) ET l'etat actif des onglets -- CSP-safe, marche sans JS.
   Cartes flottantes = decoratives (aria-hidden). Les anim << float >> et la
   transition de piste sont neutralisees par le garde reduced-motion GLOBAL
   (base.css). 100 % tokens. */
.g4g-repcomm { position: relative; }
.g4g-repcomm__radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.g4g-repcomm__inner { max-width: var(--lp-width); margin-inline: auto; }

.g4g-repcomm__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--g4g-space-6); flex-wrap: wrap; margin-bottom: clamp(20px, 3vw, 34px); }
.g4g-repcomm__eyebrow { display: block; font-size: var(--g4g-text-sm); font-weight: var(--g4g-weight-semibold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--g4g-accent); }
.g4g-repcomm__title { margin: 8px 0 0; font-size: calc(clamp(30px, 3.6vw, 46px) * var(--g4g-title-scale, 1)); line-height: 1.08; letter-spacing: -0.02em; font-weight: 400; color: var(--g4g-text); }
.g4g-repcomm__title span { font-weight: var(--g4g-weight-bold, 700); }

.g4g-repcomm__tabs { display: inline-flex; gap: 4px; padding: 5px; background: var(--g4g-surface-alt); border-radius: var(--g4g-radius-pill); }
.g4g-repcomm__tab { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 20px; border-radius: var(--g4g-radius-pill); font-size: 15px; font-weight: var(--g4g-weight-semibold); color: var(--g4g-text-muted); cursor: pointer; transition: background 140ms var(--lp-ease), color 140ms var(--lp-ease); }
.g4g-repcomm__tab:hover { color: var(--g4g-text); }
/* [2026-09-04] #4 Sélecteurs pilotés par ATTRIBUT (data-repcomm), plus par id : robustes aux
   instances multiples / versions off-target (les id/name deviennent uniques via initRepcomm). */
.g4g-repcomm__radio[data-repcomm="rep"]:checked ~ .g4g-repcomm__inner [data-repcomm-tab="rep"],
.g4g-repcomm__radio[data-repcomm="comm"]:checked ~ .g4g-repcomm__inner [data-repcomm-tab="comm"] { background: var(--g4g-primary); color: var(--g4g-primary-contrast); }
.g4g-repcomm__radio[data-repcomm="rep"]:focus-visible ~ .g4g-repcomm__inner [data-repcomm-tab="rep"],
.g4g-repcomm__radio[data-repcomm="comm"]:focus-visible ~ .g4g-repcomm__inner [data-repcomm-tab="comm"] { outline: 2px solid var(--g4g-accent); outline-offset: 2px; }

.g4g-repcomm__viewport { overflow: hidden; border-radius: var(--g4g-radius-lg); }
.g4g-repcomm__track { display: flex; width: 200%; transition: transform 340ms var(--lp-ease); }
.g4g-repcomm__radio[data-repcomm="comm"]:checked ~ .g4g-repcomm__inner .g4g-repcomm__track { transform: translateX(-50%); }
.g4g-repcomm__panel { flex: 0 0 50%; min-width: 0; }

.g4g-repcomm__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(24px, 4vw, 56px); align-items: center; background: var(--g4g-surface-sunken); border: 1px solid var(--g4g-border); border-radius: var(--g4g-radius-lg); padding: clamp(28px, 4vw, 56px); }
.g4g-repcomm__panel-title { margin: 0; font-size: clamp(26px, 3vw, 38px); line-height: 1.1; letter-spacing: -0.02em; font-weight: 400; color: var(--g4g-text); }
/* [2026-09-10] Le span du titre repcomm n'est plus `display:block` (il portait le titre entier) :
   en édition, un contenteditable BLOC fait insérer des blocs au gras → retour-ligne avant/après le
   mot. Inline + poids léger (comme les autres titres) : le gras au mot ressort, sans retour-ligne. */
.g4g-repcomm__panel-title span { font-weight: var(--g4g-weight-light); }
.g4g-repcomm__panel-text { margin: 18px 0 0; font-size: 16.5px; line-height: 1.7; color: var(--g4g-text-muted); max-width: 46ch; text-wrap: pretty; }
.g4g-repcomm__cta { margin-top: 26px; display: inline-flex; align-items: center; gap: 10px; }

.g4g-repcomm__media { display: flex; flex-direction: column; min-width: 0; }
.g4g-repcomm__figure { position: relative; border-radius: var(--g4g-radius-md); overflow: hidden; box-shadow: var(--g4g-shadow-md); background: var(--g4g-surface); }
.g4g-repcomm__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

.g4g-repcomm__cards { position: relative; z-index: 1; margin: -42px 0 0; padding-inline: 4%; display: flex; flex-direction: column; gap: 12px; }
.g4g-repcomm__card { display: flex; align-items: center; gap: 12px; background: var(--g4g-surface); border: 1px solid var(--g4g-border); border-radius: var(--g4g-radius-md); box-shadow: var(--g4g-shadow-lg); padding: 12px 14px; }
.g4g-repcomm__card--offset { margin-left: 12%; margin-right: -2%; }
.g4g-repcomm__card--float-a { animation: g4gFloatA 6s var(--lp-ease) infinite; }
.g4g-repcomm__card--float-b { animation: g4gFloatB 7s var(--lp-ease) infinite; }
@keyframes g4gFloatA { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes g4gFloatB { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

.g4g-repcomm__card-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; }
.g4g-repcomm__card-icon--accent { background: var(--g4g-accent-tint); color: var(--g4g-accent); }
.g4g-repcomm__card-icon--primary { background: var(--g4g-primary-tint); color: var(--g4g-primary); }
.g4g-repcomm__card-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.g4g-repcomm__card-name { font-size: 14px; font-weight: var(--g4g-weight-semibold); color: var(--g4g-text); line-height: 1.25; }
.g4g-repcomm__card-sub { font-size: 12px; color: var(--g4g-text-muted); line-height: 1.3; }
.g4g-repcomm__seal-count { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: var(--g4g-radius-sm); background: var(--g4g-accent); color: var(--g4g-primary-contrast); font-size: 13px; font-weight: var(--g4g-weight-bold, 700); }
.g4g-repcomm__seal-badge { flex: 0 0 auto; display: inline-flex; color: var(--g4g-primary); }
/* [2026-10-06] Pastille « Nouveau » des cartes « entreprise qui vient de rejoindre le répertoire ». */
.g4g-repcomm__card-new { flex: 0 0 auto; display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: var(--g4g-accent); color: var(--g4g-primary-contrast); font-size: 11px; font-weight: var(--g4g-weight-bold, 700); letter-spacing: .02em; text-transform: uppercase; }

.g4g-repcomm__card--post { flex-direction: column; align-items: stretch; gap: 10px; }
.g4g-repcomm__post-head { display: flex; align-items: center; gap: 10px; }
.g4g-repcomm__avatar { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--g4g-success); color: var(--g4g-primary-contrast); font-size: 12px; font-weight: var(--g4g-weight-bold, 700); }
.g4g-repcomm__quote { margin: 0; font-size: 14px; line-height: 1.5; color: var(--g4g-text); font-style: italic; }
.g4g-repcomm__reacts { display: flex; gap: 8px; flex-wrap: wrap; }
.g4g-repcomm__react { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: var(--g4g-weight-semibold); padding: 4px 10px; border-radius: var(--g4g-radius-pill); background: var(--g4g-surface-alt); }
.g4g-repcomm__react--love { color: var(--g4g-danger); }
.g4g-repcomm__react--bravo { color: var(--g4g-success); }

.g4g-repcomm__card--poll { flex-direction: column; align-items: stretch; gap: 8px; }
.g4g-repcomm__poll-kicker { font-size: 11px; font-weight: var(--g4g-weight-bold, 700); letter-spacing: 0.1em; text-transform: uppercase; color: var(--g4g-accent); }
.g4g-repcomm__poll-q { font-size: 14px; font-weight: var(--g4g-weight-semibold); color: var(--g4g-text); }
.g4g-repcomm__poll-bar { position: relative; display: block; height: 30px; border-radius: var(--g4g-radius-sm); background: var(--g4g-surface-alt); overflow: hidden; }
.g4g-repcomm__poll-fill { position: absolute; inset: 0 auto 0 0; width: 62%; background: var(--g4g-primary-soft); }
.g4g-repcomm__poll-fill--38 { width: 38%; }
.g4g-repcomm__poll-label { position: relative; display: flex; align-items: center; height: 100%; padding-inline: 10px; font-size: 12.5px; font-weight: var(--g4g-weight-semibold); color: var(--g4g-text); }

@media (max-width: 900px) {
  .g4g-repcomm__grid { grid-template-columns: 1fr; }
  .g4g-repcomm__cards { padding-inline: 0; }
  .g4g-repcomm__card--offset { margin-inline: 8% 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * [2026-09-04] SURVOL DES BOUTONS — inversion universelle (demande Alexandre).
 * Tous les CTA « bleu plein » (couleur principale, texte blanc) s'inversent au survol :
 * fond blanc, bordure bleue, texte bleu + légère ombre. Bordure transparente en
 * base → aucun décalage. Placé en fin de feuille pour surcharger les survols
 * « qui foncent » définis plus haut. Cf. .g4g-btn--primary (base.css). */
.g4g-odd-band__cta,
.g4g-programmes__cta,
.g4g-globe-intro__cta,
.g4g-hero4p__cta--primary,
.g4g-cta4p__cta--primary,
.g4g-odd-grid__follow,
.g4g-cert-intro__cta--primary,
.g4g-cert-cta__cta--primary,
.g4g-contactz__submit {
  border: 1px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.g4g-odd-band__cta:hover,
.g4g-programmes__cta:hover,
.g4g-globe-intro__cta:hover,
.g4g-hero4p__cta--primary:hover,
.g4g-cta4p__cta--primary:hover,
.g4g-odd-grid__follow:hover,
.g4g-cert-intro__cta--primary:hover,
.g4g-cert-cta__cta--primary:hover,
.g4g-contactz__submit:hover {
  background: var(--g4g-surface);
  border-color: var(--g4g-primary);
  color: var(--g4g-primary);
  box-shadow: var(--g4g-shadow-md);
}

/* ============================================================================
   PAGE-HUB D'UN OBJECTIF (ODD) — odd.views.odd_hub / content/odd_hub.html
   Bandeau à la couleur ONU (var --sdg, `dynamic_theme_styles`), texte blanc
   comme la grille (décision Alexandre 2026-08-25). Réutilise les grilles
   `.g4g-fgrid` (répertoire) et `.g4g-news__grid` (nouvelles), donc on ne
   restyle ici que l'enveloppe du hub. Aucune couleur en dur (tokens only, CSP).
   ============================================================================ */
.g4g-odd-hub__inner { max-width: var(--lp-width); margin: 0 auto; }
/* Spécificité 0,2,0 (`.g4g-landing …`) pour battre `.g4g-landing .g4g-section {
   background: var(--g4g-surface) }` (l. 358) — sinon le bandeau héro reste blanc et
   son texte blanc devient invisible. Même patron que `.g4g-landing .g4g-odd-grid`. */
.g4g-landing .g4g-odd-hub__hero { background: var(--sdg, var(--g4g-primary)); }
.g4g-odd-hub__hero--light,
.g4g-odd-hub__hero--dark { color: var(--g4g-primary-contrast); }
.g4g-odd-hub__hero-inner {
  max-width: var(--lp-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  flex-wrap: wrap;
}
.g4g-odd-hub__hero-img {
  width: clamp(88px, 10vw, 120px);
  height: clamp(88px, 10vw, 120px);
  border-radius: var(--g4g-radius-lg);
  flex: none;
  box-shadow: var(--g4g-shadow-md);
}
.g4g-odd-hub__hero-text { min-width: 0; flex: 1 1 380px; }
.g4g-odd-hub__eyebrow {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: var(--g4g-weight-semibold);
  opacity: 0.82;
}
.g4g-odd-hub__title {
  margin: 8px 0 0;
  font-size: calc(clamp(30px, 3.6vw, 48px) * var(--g4g-title-scale, 1));
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-weight: var(--g4g-weight-semibold);
}
.g4g-odd-hub__def { margin: 14px 0 0; font-size: 17px; line-height: 1.6; max-width: 62ch; opacity: 0.95; text-wrap: pretty; }
.g4g-odd-hub__hero-actions { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
/* Bouton « Suivre » sur le bandeau coloré : blanc → texte foncé (contraste garanti
   sur toute couleur ODD) ; « suivi » = vert succès. Icône basculée par la classe. */
.g4g-odd-follow-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 24px;
  border: none;
  border-radius: var(--g4g-radius-pill);
  cursor: pointer;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: var(--g4g-weight-semibold);
  text-decoration: none;
  background: var(--g4g-surface);
  color: var(--g4g-text);
  transition: background 140ms var(--lp-ease), transform 140ms var(--lp-ease);
}
.g4g-odd-follow-btn:hover { transform: translateY(-1px); box-shadow: var(--g4g-shadow-md); }
.g4g-odd-follow-btn.is-on { background: var(--g4g-success); color: var(--g4g-primary-contrast); }
.g4g-odd-followform { margin: 0; }
.g4g-odd-follow-btn__icon-on { display: none; }
.g4g-odd-follow-btn.is-on .g4g-odd-follow-btn__icon-on { display: inline; }
.g4g-odd-follow-btn.is-on .g4g-odd-follow-btn__icon-off { display: none; }
.g4g-odd-hub__all {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 13px 22px;
  border: 1.5px solid currentColor;
  border-radius: var(--g4g-radius-pill);
  color: inherit;
  font-size: 14.5px;
  font-weight: var(--g4g-weight-semibold);
  text-decoration: none;
  opacity: 0.92;
}
.g4g-odd-hub__all:hover { opacity: 1; }
.g4g-odd-hub__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: clamp(18px, 2.4vw, 28px); }
.g4g-odd-hub__h2 { margin: 0; font-size: calc(clamp(24px, 2.6vw, 34px) * var(--g4g-title-scale, 1)); letter-spacing: -0.015em; }
.g4g-odd-hub__more { color: var(--g4g-primary); font-weight: var(--g4g-weight-semibold); font-size: 14.5px; text-decoration: none; white-space: nowrap; }
.g4g-odd-hub__more:hover { text-decoration: underline; }
.g4g-odd-hub__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.g4g-odd-hub__chip { border: 1px solid var(--g4g-border); border-radius: var(--g4g-radius-pill); background: var(--g4g-surface-sunken); padding: 7px 14px; font-size: 13px; font-weight: var(--g4g-weight-medium); color: var(--g4g-text-muted); }
.g4g-odd-hub__empty { margin: 0; font-size: 16px; line-height: 1.6; color: var(--g4g-text-muted); }
.g4g-odd-hub__postlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.g4g-odd-hub__post { border: 1px solid var(--g4g-border); border-radius: var(--g4g-radius-lg); background: var(--g4g-surface); padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.g4g-odd-hub__post-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 8px; }
.g4g-odd-hub__post-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.g4g-odd-hub__post-author { font-weight: var(--g4g-weight-semibold); }
.g4g-odd-hub__post-date { font-size: 12.5px; color: var(--g4g-text-muted); white-space: nowrap; }
.g4g-odd-hub__post-body { font-size: 15px; line-height: 1.55; color: var(--g4g-text); text-wrap: pretty; }
.g4g-odd-hub__post-link:hover .g4g-odd-hub__post-body { color: var(--g4g-primary); }
.g4g-odd-hub__post-pills { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 640px) {
  .g4g-odd-hub__hero-inner { flex-direction: column; align-items: flex-start; }
}

/* ===================================================================== */
/* [2026-09-10] TITRES LÉGERS PAR DÉFAUT — PARTOUT (demande Alexandre).    */
/* Problème : la plupart des titres de section rendaient leur texte en     */
/* SEMI-GRAS (règles bespoke `.g4g-X__title span` / `__heading` = 600),    */
/* donc le gras choisi MOT À MOT (<b>) ne ressortait pas (« tout est déjà  */
/* gras »). On force le titre (span data-cms-field="heading") en poids     */
/* LÉGER — une seule règle, spécificité 0,3,0 qui prime sur toutes les     */
/* règles bespoke (0,2,0) — et les mots marqués en gras passent à 700.     */
/* Alexandre choisit donc EXACTEMENT quels mots sont en gras dans chaque   */
/* titre (sélection + bouton G), comme dans un paragraphe. La TAILLE et la */
/* COULEUR restent inchangées ; seule la graisse de BASE baisse.           */
/* ===================================================================== */
/* `html …` (et non `.g4g-landing …`) pour couvrir AUSSI les pages hors calque landing
   (À propos/ADN/Mission = body_page.html, FAQ…). Spécificité 0,2,1 → prime sur les règles
   bespoke 0,2,0, partout.
   [2026-09-10 · DÉFINITIF] On ne chasse plus les NOMS de champ (fragile : heading, rep_heading,
   programmes.N.name…) : on cible TOUT champ riche placé DANS un titre `h1–h4` (spécificité 0,2,2,
   prime sur les règles bespoke 0,2,0/0,2,1 — accents cert `<b>` inclus) — ce qui couvre tous les
   titres présents ET futurs. On ajoute le champ `subtitle` (parfois hors h-tag) et le rare
   `heading` rendu dans un <p>. Le corps de texte (dans <p>/.g4g-t-body) n'est PAS visé. */
html :is(h1, h2, h3, h4) [data-cms-field][data-cms-rich],
html :is([data-cms-field="heading"], [data-cms-field="subtitle"])[data-cms-rich] { font-weight: var(--g4g-weight-light); }
html :is(h1, h2, h3, h4) [data-cms-field][data-cms-rich] :is(b, strong),
html :is([data-cms-field="heading"], [data-cms-field="subtitle"])[data-cms-rich] :is(b, strong) { font-weight: var(--g4g-weight-bold); }

/* [2026-09-10] Titre de la section Témoignages CENTRÉ (demande Alexandre) : le bloc rend le titre
   avec la classe générique `.g4g-section__heading` (alignée à GAUCHE, max-width 26ch) alors que la
   section est de conception centrée → on le recentre dans son espace horizontal. */
.g4g-landing .g4g-testimonials .g4g-section__heading {
  text-align: center;
  max-width: min(46ch, 100%);
  margin-inline: auto;
}

/* --- Organigramme / étapes (program_steps, design gabarit S4) ------- */
.g4g-landing .g4g-steps { background: var(--g4g-surface-sunken); border-top: 1px solid var(--g4g-border); }
.g4g-steps__inner { max-width: var(--lp-width); margin: 0 auto; }
.g4g-steps__head { max-width: 760px; margin: 0 auto; text-align: center; }
/* [2026-10-15 · QA, demande Alexandre] Logo du programme au-dessus du titre (Global Vision),
   centré ; taille réglable au builder (g4g-cms-iw-*), plafonnée par la place disponible. */
.g4g-steps__logo { display: block; width: clamp(220px, 26vw, 340px); max-width: 100%; height: auto; margin: 0 auto 18px; }
.g4g-steps__logo--dessous { margin: 18px auto 0; }
.g4g-steps__eyebrow { font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--g4g-accent); font-size: 0.85rem; margin: 0 0 12px; }
.g4g-steps__title { margin: 0; font-family: var(--g4g-font-heading); font-size: clamp(32px, 3.8vw, 49px); font-weight: 300; line-height: 1.08; letter-spacing: -0.02em; color: var(--g4g-text); }
.g4g-steps__md { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(20px, 3vw, 40px); margin-top: 34px; align-items: start; }
.g4g-steps__list { display: grid; gap: 10px; }
.g4g-steps__item { display: flex; align-items: center; gap: 14px; text-align: left; width: 100%; padding: 13px 15px; border: 1px solid var(--g4g-border); border-radius: var(--g4g-radius-md); background: var(--g4g-surface); cursor: pointer; font-family: inherit; color: var(--g4g-text); transition: border-color 180ms var(--lp-ease), box-shadow 180ms var(--lp-ease); }
.g4g-steps__item:hover { border-color: var(--g4g-border-strong); }
.g4g-steps__item.is-active { border-color: var(--g4g-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--g4g-primary) 30%, transparent); }
.g4g-steps__ic { width: 42px; height: 42px; border-radius: 11px; flex: 0 0 auto; display: grid; place-items: center; background: var(--g4g-primary); }
.g4g-steps__badge { color: var(--g4g-primary-contrast); font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; line-height: 1; }
.g4g-steps__t { font-weight: var(--g4g-weight-semibold); font-size: 1.02rem; letter-spacing: -0.01em; }
.g4g-steps__panels { position: relative; }
.g4g-steps__panel { display: none; border: 1px solid var(--g4g-border); border-top: 4px solid var(--g4g-primary); border-radius: var(--g4g-radius-lg); padding: clamp(24px, 3vw, 38px); background: var(--g4g-surface); min-height: 230px; }
.g4g-steps__panel.is-active { display: block; }
.g4g-steps__num { font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--g4g-text-subtle); }
.g4g-steps__ptitle { font-size: clamp(1.3rem, 2.2vw, 1.75rem); font-weight: 300; letter-spacing: -0.02em; color: var(--g4g-primary); margin: 6px 0 10px; }
.g4g-steps__desc { color: var(--g4g-text-muted); max-width: 56ch; line-height: 1.6; }
.g4g-steps__desc p { margin: 0; }
/* Bouton de fermeture de la modale (injecté par sections.js) — masqué hors modale mobile. */
.g4g-steps__close {
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  place-items: center;
  border: none;
  border-radius: 999px;
  background: var(--g4g-surface-sunken);
  color: var(--g4g-text);
  cursor: pointer;
}
.g4g-steps__close:focus-visible { outline: none; box-shadow: var(--g4g-focus-ring); }
@media (max-width: 760px) {
  .g4g-steps__md { grid-template-columns: 1fr; }
  /* [2026-10-14] Mobile : au clic d'une étape, le panneau s'ouvre en MODALE centrée (demande
     Alexandre) au lieu de s'afficher tout en bas, invisible. Par défaut aucun panneau inline. */
  .g4g-steps__md .g4g-steps__panels { display: none; }
  .g4g-steps__md.is-step-open .g4g-steps__panels {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: var(--g4g-z-modal);
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 5vw, 28px);
  }
  .g4g-steps__md.is-step-open .g4g-steps__panels::before {
    content: "";
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--g4g-ink) 58%, transparent);
  }
  .g4g-steps__md.is-step-open .g4g-steps__panel.is-active {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 440px;
    max-height: 82vh;
    min-height: 0;
    overflow-y: auto;
    box-shadow: var(--g4g-shadow-lg);
  }
  .g4g-steps__md.is-step-open .g4g-steps__panel:not(.is-active) { display: none; }
  .g4g-steps__md.is-step-open .g4g-steps__panel.is-active .g4g-steps__close { display: grid; }
}

/* ====================================================================== */
/* Pilote « Go connect » (communauté) — librairie de sections (CD-25).     */
/* Converti de la maquette go_connect.html (hors CSP) en sections CSP-safe.*/
/* 100 % tokens ; sections sombres = --g4g-ink + --g4g-primary-contrast.   */
/* ====================================================================== */

/* --- Go connect · Héro (fond sombre, emblème G-globe + plans flottants) — fidèle v39 --- */
.g4g-landing .g4g-gc-hero { position: relative; background: var(--g4g-ink); color: var(--g4g-primary-contrast); overflow: hidden; }
.g4g-gc-hero__inner {
  position: relative; max-width: var(--lp-width); margin: 0 auto;
  display: grid; grid-template-columns: 1.4fr 0.6fr;
  gap: clamp(24px, 3vw, 40px); align-items: center;
}
/* Plans flottants : 2 cercles concentriques qui débordent du coin haut-droit (clippés par la section). */
.g4g-gc-hero__planes { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.g4g-gc-hero__planes b { position: absolute; display: block; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--g4g-accent-on-dark) 18%, transparent); }
.g4g-gc-hero__planes b:nth-child(1) { width: 540px; height: 540px; right: -170px; top: -200px; }
.g4g-gc-hero__planes b:nth-child(2) { width: 360px; height: 360px; right: -50px; top: -80px; border-color: color-mix(in srgb, var(--g4g-accent-on-dark) 28%, transparent); }
.g4g-gc-hero__copy { position: relative; z-index: 2; }
.g4g-gc-hero__eyebrow {
  display: block; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: var(--g4g-weight-semibold); color: var(--g4g-accent-on-dark);
}
.g4g-gc-hero__title {
  margin: 14px 0 0;
  font-size: calc(clamp(30px, 4.8vw, 52px) * var(--g4g-title-scale, 1));
  line-height: 1.03; letter-spacing: -0.028em;
  font-weight: var(--g4g-weight-light); color: var(--g4g-primary-contrast);
  max-width: 20ch; text-wrap: balance;
}
.g4g-gc-hero__title p { margin: 0; }
.g4g-gc-hero__title b,
.g4g-gc-hero__title strong { font-weight: var(--g4g-weight-semibold); color: var(--g4g-accent-on-dark); }
.g4g-gc-hero__rule {
  display: block; width: 96px; height: 3px; margin: 20px 0;
  background: var(--g4g-accent-on-dark); border-radius: 3px;
}
.g4g-gc-hero__lead {
  margin: 0; font-size: 15.5px; line-height: 1.6; max-width: 42ch; text-wrap: pretty;
  color: color-mix(in srgb, var(--g4g-primary-contrast) 78%, transparent);
}
.g4g-gc-hero__actions { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; }
.g4g-gc-hero__cta {
  display: inline-flex; align-items: center; min-height: 48px;
  padding: 12px 24px; border-radius: var(--g4g-radius-pill);
  font-size: 15px; font-weight: var(--g4g-weight-semibold); text-decoration: none;
}
.g4g-gc-hero__cta--primary { background: var(--g4g-primary-contrast); color: var(--g4g-ink); }
.g4g-gc-hero__cta--primary:hover { background: var(--g4g-accent-on-dark); color: var(--g4g-ink); }
.g4g-gc-hero__cta--secondary { border: 1.5px solid color-mix(in srgb, var(--g4g-primary-contrast) 28%, transparent); color: var(--g4g-primary-contrast); }
.g4g-gc-hero__cta--secondary:hover { border-color: var(--g4g-accent-on-dark); color: var(--g4g-accent-on-dark); }
/* Emblème : G-globe stylisé (SVG), colonne de droite (accent-on-dark). */
.g4g-gc-hero__emblem { position: relative; z-index: 2; justify-self: center; width: min(230px, 58vw); aspect-ratio: 1; height: auto; color: var(--g4g-accent-on-dark); }

@media (max-width: 640px) {
  .g4g-gc-hero__inner { grid-template-columns: 1fr; gap: 22px; }
  .g4g-gc-hero__emblem { width: min(200px, 54vw); }
}

/* --- Go connect · CTA « split » (photo ronde + panneau, bande sombre) --- */
.g4g-landing .g4g-gc-cta { background: var(--g4g-ink); color: var(--g4g-primary-contrast); overflow: hidden; }
.g4g-gc-cta__inner {
  max-width: var(--lp-width); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 4vw, 64px); align-items: center;
}
.g4g-gc-cta__media { position: relative; display: grid; place-items: center; min-height: clamp(300px, 34vw, 380px); isolation: isolate; }
.g4g-gc-cta__frame {
  position: relative; z-index: 2; width: min(76%, 320px); aspect-ratio: 1; border-radius: 50%; padding: 10px;
  background: color-mix(in srgb, var(--g4g-accent-on-dark) 22%, var(--g4g-ink-raised));
  border: 1px solid color-mix(in srgb, var(--g4g-accent-on-dark) 32%, transparent); box-shadow: var(--g4g-shadow-lg);
}
.g4g-gc-cta__img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.g4g-gc-cta__deco { position: absolute; z-index: 1; display: block; }
.g4g-gc-cta__deco--ring { width: clamp(50px, 12%, 84px); aspect-ratio: 1; border-radius: 50%; border: 8px solid var(--g4g-planet); left: 4%; top: 8%; opacity: 0.6; }
.g4g-gc-cta__deco--square { width: clamp(40px, 10%, 62px); aspect-ratio: 1; border-radius: 22%; background: var(--g4g-purpose); right: 6%; top: 10%; opacity: 0.85; }
.g4g-gc-cta__deco--dot { width: clamp(24px, 7%, 42px); aspect-ratio: 1; border-radius: 50%; background: var(--g4g-people); right: 10%; bottom: 12%; }
.g4g-gc-cta__title { margin: 0; font-size: calc(clamp(26px, 3.4vw, 36px) * var(--g4g-title-scale, 1)); line-height: 1.1; letter-spacing: -0.022em; font-weight: var(--g4g-weight-light); color: var(--g4g-primary-contrast); text-wrap: balance; }
.g4g-gc-cta__title p { margin: 0; }
.g4g-gc-cta__title b, .g4g-gc-cta__title strong { font-weight: var(--g4g-weight-semibold); color: var(--g4g-accent-on-dark); }
.g4g-gc-cta__lead { margin: 16px 0 0; font-size: 17px; line-height: 1.6; max-width: 48ch; color: color-mix(in srgb, var(--g4g-primary-contrast) 86%, transparent); text-wrap: pretty; }
.g4g-gc-cta__lead b, .g4g-gc-cta__lead strong { font-weight: var(--g4g-weight-semibold); color: var(--g4g-primary-contrast); }
.g4g-gc-cta__actions { margin-top: clamp(22px, 3vw, 30px); }
.g4g-gc-cta__btn {
  display: inline-flex; align-items: center; min-height: 50px; padding: 13px 28px;
  border-radius: var(--g4g-radius-pill); font-size: 15px; font-weight: var(--g4g-weight-semibold);
  text-decoration: none; background: var(--g4g-primary-contrast); color: var(--g4g-ink);
}
.g4g-gc-cta__btn:hover { background: var(--g4g-accent-on-dark); }
@media (max-width: 760px) {
  .g4g-gc-cta__inner { grid-template-columns: 1fr; gap: 28px; }
  .g4g-gc-cta__media { min-height: clamp(240px, 70vw, 320px); order: 2; }
}

/* --- Go connect · Carrefour (split sombre + montage 2 photos) -------- */
.g4g-landing .g4g-gc-cross { background: var(--g4g-ink); color: var(--g4g-primary-contrast); overflow: hidden; }
.g4g-gc-cross__inner {
  max-width: var(--lp-width); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px); align-items: center;
}
.g4g-gc-cross__eyebrow { display: block; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: var(--g4g-weight-semibold); color: var(--g4g-accent-on-dark); }
.g4g-gc-cross__title {
  margin: 12px 0 0; font-size: calc(clamp(26px, 3.4vw, 38px) * var(--g4g-title-scale, 1));
  line-height: 1.1; letter-spacing: -0.022em; font-weight: var(--g4g-weight-light);
  color: var(--g4g-primary-contrast); max-width: 20ch; text-wrap: balance;
}
.g4g-gc-cross__title p { margin: 0; }
.g4g-gc-cross__title b, .g4g-gc-cross__title strong { font-weight: var(--g4g-weight-semibold); color: var(--g4g-accent-on-dark); }
.g4g-gc-cross__lead { margin: 16px 0 0; font-size: 16px; line-height: 1.6; max-width: 46ch; color: color-mix(in srgb, var(--g4g-primary-contrast) 84%, transparent); text-wrap: pretty; }
.g4g-gc-cross__desc { margin: 14px 0 0; font-size: 15px; line-height: 1.6; max-width: 46ch; color: color-mix(in srgb, var(--g4g-primary-contrast) 70%, transparent); text-wrap: pretty; }
/* aspect-ratio : le conteneur grandit avec sa largeur pour CONTENIR la photo principale (64 % de
   large, ratio 4/5 → ~0,8× la largeur de haut) à toutes les largeurs. Sans ça, la hauteur était
   plafonnée (max 420px) alors que la photo continuait de grandir en large → elle débordait vers le
   bas de la section. min-height sert de plancher aux très petites largeurs. */
.g4g-gc-cross__media { position: relative; aspect-ratio: 6 / 5; min-height: clamp(300px, 36vw, 420px); isolation: isolate; }
.g4g-gc-cross__photo { position: absolute; border-radius: var(--g4g-radius-md); overflow: hidden; box-shadow: var(--g4g-shadow-lg); border: 1px solid color-mix(in srgb, var(--g4g-primary-contrast) 14%, transparent); }
.g4g-gc-cross__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.g4g-gc-cross__photo--main { z-index: 2; width: 64%; aspect-ratio: 4 / 5; left: 0; top: 4%; background: var(--g4g-ink-raised); }
/* Encart « mat » vert prosperity (fidèle v39 `.ephoto--2`) : la photo, en flux, est encadrée
   par un liseré vert. La hauteur vient de la photo (pas d'aspect-ratio sur le cadre). */
.g4g-gc-cross__photo--inset { z-index: 3; width: 48%; right: clamp(8px, 2vw, 28px); bottom: 4%; background: var(--g4g-prosperity); padding: 8px; border: 0; }
.g4g-gc-cross__photo--inset img { position: static; width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 7px; }
.g4g-gc-cross__deco { position: absolute; display: block; }
.g4g-gcxd--ring { z-index: 1; width: clamp(70px, 9vw, 110px); aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--g4g-accent-on-dark); left: 32%; top: -4%; opacity: 0.55; }
.g4g-gcxd--square { z-index: 4; width: clamp(38px, 4.5vw, 54px); aspect-ratio: 1; border-radius: var(--g4g-radius-md); border: 2px solid var(--g4g-purpose); left: -3%; bottom: 6%; transform: rotate(12deg); opacity: 0.7; }
.g4g-gcxd--dot { z-index: 4; width: clamp(12px, 1.8vw, 18px); aspect-ratio: 1; border-radius: 50%; background: var(--g4g-accent-on-dark); right: -2%; top: 24%; }
@media (max-width: 760px) {
  .g4g-gc-cross__inner { grid-template-columns: 1fr; gap: 30px; }
  .g4g-gc-cross__media { min-height: clamp(260px, 72vw, 340px); }
}

/* --- Go connect · Sélecteur de fonctionnalités (onglets → stage split) */
/* Espacement E2<->E3 symétrique : la photo du carrefour est CONTENUE (aspect-ratio sur .media),
   donc E2-bas et E3-haut gardent chacun le rythme de base (--lp-py). Aucun padding extra ici. */
.g4g-landing .g4g-gc-select { background: var(--g4g-ink-raised); color: var(--g4g-primary-contrast); }
.g4g-gc-select__inner { max-width: var(--lp-width); margin: 0 auto; }
.g4g-gc-select__eyebrow { display: block; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: var(--g4g-weight-semibold); color: var(--g4g-accent-on-dark); }
.g4g-gc-select__title {
  margin: 12px 0 0; font-size: calc(clamp(24px, 3.2vw, 34px) * var(--g4g-title-scale, 1));
  line-height: 1.1; letter-spacing: -0.02em; font-weight: var(--g4g-weight-light);
  color: var(--g4g-primary-contrast); max-width: 24ch; text-wrap: balance;
}
.g4g-gc-select__title p { margin: 0; }
.g4g-gc-select__title b, .g4g-gc-select__title strong { font-weight: var(--g4g-weight-semibold); color: var(--g4g-accent-on-dark); }
/* Rangée de cartes-onglets (icône + titre + accroche), fidèle v39 `.feat-tabs`/`.feat-card`. */
.g4g-gc-select__tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: clamp(22px, 3vw, 32px) 0 0; }
.g4g-gc-select__card {
  display: flex; flex-direction: column; gap: 9px; text-align: left; padding: 15px 16px;
  border-radius: var(--g4g-radius-md); font: inherit; cursor: pointer;
  background: color-mix(in srgb, var(--g4g-primary-contrast) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--g4g-primary-contrast) 14%, transparent);
  color: var(--g4g-primary-contrast);
}
.g4g-gc-select__card:hover { border-color: color-mix(in srgb, var(--g4g-accent-on-dark) 60%, transparent); }
.g4g-gc-select__card.is-active { border-color: var(--g4g-accent-on-dark); background: color-mix(in srgb, var(--g4g-accent-on-dark) 12%, transparent); }
.g4g-gc-select__card-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--g4g-accent-on-dark) 16%, transparent); color: var(--g4g-accent-on-dark); flex: none; }
.g4g-gc-select__card-ic svg { width: 19px; height: 19px; }
.g4g-gc-select__card-t { font-weight: var(--g4g-weight-semibold); font-size: 14.5px; }
.g4g-gc-select__card-d { font-size: 12px; line-height: 1.4; color: color-mix(in srgb, var(--g4g-primary-contrast) 70%, transparent); }

/* Stage split : eframe (visuel portrait dégradé + formes flottantes) + copie (titre + texte + coches). */
.g4g-gc-select__stage { margin-top: clamp(20px, 2.6vw, 30px); }
.g4g-gc-select__panel { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 3.5vw, 44px); align-items: center; }
.g4g-gc-select__panel[hidden] { display: none; }
.g4g-gc-select__frame { position: relative; display: grid; place-items: center; min-height: clamp(280px, 32vw, 360px); isolation: isolate; }
.g4g-gc-select__img { position: relative; z-index: 2; width: min(340px, 82%); aspect-ratio: 3 / 4; border-radius: var(--g4g-radius-md); overflow: hidden; box-shadow: var(--g4g-shadow-lg); border: 1px solid color-mix(in srgb, var(--g4g-primary-contrast) 14%, transparent); }
.g4g-gc-select__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Photo de section posée PAR-DESSUS le dégradé de fond (fidèle v39 `.eframe__photo`). */
.g4g-gc-select__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; }
.g4g-gc-select__deco { position: absolute; z-index: 1; display: block; }
.g4g-gcsd--ring { width: clamp(56px, 8vw, 86px); aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--g4g-accent-on-dark); top: -4%; right: 20%; opacity: 0.5; }
.g4g-gcsd--square { width: clamp(34px, 4.5vw, 50px); aspect-ratio: 1; border-radius: var(--g4g-radius-md); border: 2px solid var(--g4g-purpose); bottom: 6%; right: 2%; transform: rotate(12deg); opacity: 0.7; }
.g4g-gcsd--dot { width: clamp(12px, 1.8vw, 16px); aspect-ratio: 1; border-radius: 50%; background: var(--g4g-accent-on-dark); top: 30%; left: 4%; }
/* Visuel SANS photo = dégradé duotone (tokens), fidèle à la maquette (pas de photo hors sujet). */
.g4g-gc-select__img--g1 { background: linear-gradient(160deg, var(--g4g-sdg-blue), var(--g4g-primary)); }
.g4g-gc-select__img--g2 { background: linear-gradient(160deg, color-mix(in srgb, var(--g4g-accent) 72%, var(--g4g-primary-contrast)), var(--g4g-accent)); }
.g4g-gc-select__img--g3 { background: linear-gradient(160deg, var(--g4g-purpose), color-mix(in srgb, var(--g4g-purpose) 60%, var(--g4g-slider-shade))); }
.g4g-gc-select__h { margin: 8px 0 0; font-size: clamp(22px, 3vw, 30px); font-weight: var(--g4g-weight-light); line-height: 1.08; color: var(--g4g-primary-contrast); }
.g4g-gc-select__h b, .g4g-gc-select__h strong { font-weight: var(--g4g-weight-semibold); color: var(--g4g-accent-on-dark); }
.g4g-gc-select__text { margin: 14px 0 0; font-size: 15px; line-height: 1.6; max-width: 46ch; color: color-mix(in srgb, var(--g4g-primary-contrast) 78%, transparent); text-wrap: pretty; }
.g4g-gc-select__checks { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 11px; }
.g4g-gc-select__checks li { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: color-mix(in srgb, var(--g4g-primary-contrast) 92%, transparent); }
.g4g-gc-select__check-ic { width: 20px; height: 20px; color: var(--g4g-accent-on-dark); flex: none; margin-top: 1px; }
.g4g-gc-select__checks b, .g4g-gc-select__checks strong { font-weight: var(--g4g-weight-semibold); color: var(--g4g-primary-contrast); }
@media (max-width: 760px) {
  .g4g-gc-select__panel { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 640px) {
  .g4g-gc-select__tabs { grid-template-columns: 1fr; }
}

/* --- Go connect · Parrainer un secteur (section sombre) -------------- */
.g4g-landing .g4g-gc-sponsor { background: var(--g4g-ink); color: var(--g4g-primary-contrast); }
.g4g-gc-sponsor__inner { max-width: var(--lp-width); margin: 0 auto; }
.g4g-gc-sponsor__eyebrow { display: block; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: var(--g4g-weight-semibold); color: var(--g4g-accent-on-dark); }
.g4g-gc-sponsor__title { margin: 10px 0 0; font-size: calc(clamp(26px, 3.4vw, 36px) * var(--g4g-title-scale, 1)); line-height: 1.08; letter-spacing: -0.022em; font-weight: var(--g4g-weight-light); color: var(--g4g-primary-contrast); }
.g4g-gc-sponsor__title p { margin: 0; }
.g4g-gc-sponsor__title b, .g4g-gc-sponsor__title strong { font-weight: var(--g4g-weight-semibold); color: var(--g4g-accent-on-dark); }

/* Colonne centrée empilée : 2 paragraphes + visuel « Espace de la communauté » (fidèle v39) */
.g4g-gc-sponsor__stack { display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: clamp(28px, 3.5vw, 44px); align-items: center; max-width: 960px; margin: clamp(20px, 3vw, 30px) auto 0; text-align: left; }
.g4g-gc-sponsor__copy { order: 1; }
.g4g-gc-sponsor__stack .g4g-gc-space { order: 0; margin: 0; max-width: none; }
@media (max-width: 780px) { .g4g-gc-sponsor__stack { grid-template-columns: 1fr; max-width: 560px; } }
.g4g-gc-sponsor__lead { margin: 0; font-size: 16px; line-height: 1.6; max-width: 58ch; color: color-mix(in srgb, var(--g4g-primary-contrast) 84%, transparent); text-wrap: pretty; }
.g4g-gc-sponsor__lead b, .g4g-gc-sponsor__lead strong { font-weight: var(--g4g-weight-semibold); color: var(--g4g-primary-contrast); }
.g4g-gc-sponsor__desc { margin: 12px 0 0; font-size: 15px; line-height: 1.6; max-width: 58ch; color: color-mix(in srgb, var(--g4g-primary-contrast) 72%, transparent); text-wrap: pretty; }
.g4g-gc-sponsor__desc b, .g4g-gc-sponsor__desc strong { font-weight: var(--g4g-weight-semibold); color: var(--g4g-primary-contrast); }

/* Carte « Espace de la communauté » (claire, comme la vraie communauté) ≈ .secrend de la maquette */
.g4g-gc-space { width: 100%; max-width: 440px; margin: 28px auto 0; text-align: left; background: var(--g4g-surface); color: var(--g4g-text); border: 1px solid var(--g4g-border); border-radius: var(--g4g-radius-lg); box-shadow: var(--g4g-shadow-lg); overflow: hidden; }
.g4g-gc-space__cover { position: relative; aspect-ratio: 16 / 7; background: linear-gradient(135deg, var(--g4g-prosperity), color-mix(in srgb, var(--g4g-prosperity) 55%, var(--g4g-planet)) 55%, var(--g4g-planet)); overflow: hidden; }
.g4g-gc-space__motif { position: absolute; inset: 0; width: 100%; height: 100%; }
.g4g-gc-space__cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--g4g-ink) 50%, transparent) 100%); }
.g4g-gc-space__badge { position: absolute; top: 10px; right: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: var(--g4g-weight-semibold); padding: 4px 9px; border-radius: var(--g4g-radius-pill); background: color-mix(in srgb, var(--g4g-surface) 93%, transparent); color: var(--g4g-purpose); border: 1px solid color-mix(in srgb, var(--g4g-purpose) 45%, transparent); }
.g4g-gc-space__badge svg { width: 13px; height: 13px; }
.g4g-gc-space__id { position: absolute; left: 14px; bottom: 11px; z-index: 2; }
.g4g-gc-space__eyebrow { display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: var(--g4g-weight-semibold); color: color-mix(in srgb, var(--g4g-primary-contrast) 90%, transparent); }
.g4g-gc-space__name { display: block; margin-top: 2px; font-size: 18px; font-weight: var(--g4g-weight-semibold); line-height: 1.1; color: var(--g4g-primary-contrast); }
.g4g-gc-space__bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--g4g-border); }
.g4g-gc-space__avs { display: inline-flex; flex: none; }
.g4g-gc-space__avs i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 10px; font-weight: var(--g4g-weight-bold); color: var(--g4g-primary-contrast); border: 2px solid var(--g4g-surface); margin-left: -8px; }
.g4g-gc-space__avs i:first-child { margin-left: 0; }
.g4g-gc-space__avs i:nth-child(1) { background: var(--g4g-planet); }
.g4g-gc-space__avs i:nth-child(2) { background: var(--g4g-prosperity); }
.g4g-gc-space__avs i:nth-child(3) { background: var(--g4g-purpose); }
.g4g-gc-space__more { background: var(--g4g-surface-sunken); color: var(--g4g-text-muted); }
.g4g-gc-space__meta { font-size: 12px; color: var(--g4g-text-muted); line-height: 1.2; }
.g4g-gc-space__meta b { color: var(--g4g-text); font-weight: var(--g4g-weight-semibold); }
.g4g-gc-space__join { margin-left: auto; font-size: 11.5px; font-weight: var(--g4g-weight-semibold); color: var(--g4g-primary-contrast); background: var(--g4g-primary); padding: 5px 12px; border-radius: var(--g4g-radius-pill); }
.g4g-gc-space__feed { padding: 12px 14px; background: var(--g4g-surface-sunken); }
.g4g-gc-space__post { display: flex; gap: 9px; background: var(--g4g-surface); border: 1px solid var(--g4g-border); border-radius: var(--g4g-radius-card); padding: 10px 11px; }
.g4g-gc-space__pav { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 10.5px; font-weight: var(--g4g-weight-bold); color: var(--g4g-primary-contrast); background: var(--g4g-prosperity); }
.g4g-gc-space__pbody { min-width: 0; }
.g4g-gc-space__phead { font-size: 11.5px; color: var(--g4g-text-muted); }
.g4g-gc-space__phead b { color: var(--g4g-text); font-weight: var(--g4g-weight-semibold); }
.g4g-gc-space__ptext { font-size: 12.5px; color: var(--g4g-text); margin: 3px 0 7px; line-height: 1.4; }
.g4g-gc-space__react { display: flex; align-items: center; gap: 13px; font-size: 11px; color: var(--g4g-text-muted); }
.g4g-gc-space__react span { display: inline-flex; align-items: center; gap: 4px; }
.g4g-gc-space__react svg { width: 14px; height: 14px; }

/* Résultats (4 cartes) */
.g4g-gc-sponsor__outcomes { margin: clamp(26px, 3.5vw, 40px) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.g4g-gc-sponsor__outcome { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: var(--g4g-radius-md); background: color-mix(in srgb, var(--g4g-primary-contrast) 5%, transparent); border: 1px solid color-mix(in srgb, var(--g4g-primary-contrast) 12%, transparent); }
.g4g-gc-sponsor__outcome-ic { width: 24px; height: 24px; flex: none; color: var(--g4g-accent-on-dark); margin-top: 2px; }
.g4g-gc-sponsor__outcome-copy { display: flex; flex-direction: column; gap: 3px; }
.g4g-gc-sponsor__outcome-t { font-size: 15px; font-weight: var(--g4g-weight-semibold); color: var(--g4g-primary-contrast); }
.g4g-gc-sponsor__outcome-x { font-size: 13px; line-height: 1.5; color: color-mix(in srgb, var(--g4g-primary-contrast) 74%, transparent); }
@media (max-width: 640px) {
  .g4g-gc-sponsor__outcomes { grid-template-columns: 1fr; }
}

/* ============================================================================
   Go connect · Répertoire (carte à glisser-déposer) — E4 (jalon 2, CD-25)
   Portée de la maquette v39 (.mapx, .rmap-*, .mpin, .pm) ; valeurs structurelles
   gardées à l'identique (carte 600px, panneau flottant, modale split 280px) ;
   couleurs 100 % tokens (color-mix pour les variantes translucides de la
   maquette). CSP : positions des pins + transforms posées par sections.js.
   ============================================================================ */
.g4g-landing .g4g-gc-rep { background: var(--g4g-ink); color: var(--g4g-primary-contrast); }
.g4g-gc-rep__inner { max-width: var(--lp-width); margin: 0 auto; }
.g4g-gc-rep__eyebrow { display: block; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: var(--g4g-weight-semibold); color: var(--g4g-accent-on-dark); }
.g4g-gc-rep__title {
  margin: 12px 0 0; font-size: calc(clamp(26px, 3.4vw, 38px) * var(--g4g-title-scale, 1));
  line-height: 1.1; letter-spacing: -0.022em; font-weight: var(--g4g-weight-light);
  color: var(--g4g-primary-contrast); max-width: 26ch; text-wrap: balance;
}
.g4g-gc-rep__title p { margin: 0; }
.g4g-gc-rep__title b, .g4g-gc-rep__title strong { font-weight: var(--g4g-weight-semibold); color: var(--g4g-accent-on-dark); }
.g4g-gc-rep__hint { display: inline-flex; align-items: center; gap: 7px; margin: 18px 0 0; font-size: 12px; color: color-mix(in srgb, var(--g4g-primary-contrast) 72%, transparent); }
.g4g-gc-rep__hint svg { width: 16px; height: 16px; flex: none; color: var(--g4g-accent-on-dark); }

.g4g-gc-rep__map {
  position: relative; height: 600px; margin-top: 14px; border-radius: var(--g4g-radius-md);
  overflow: hidden; border: 1px solid color-mix(in srgb, var(--g4g-primary-contrast) 18%, transparent);
  cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none;
  background: var(--g4g-surface-alt);
}
.g4g-gc-rep__map.is-grab { cursor: grabbing; }
.g4g-gc-rep__world {
  position: absolute; top: 0; left: 0; width: 1792px; height: 1280px; will-change: transform;
  background: var(--g4g-surface-alt) url("../img/go-connect/map-texture.d8659c13ca21.jpg") 0 0 / 1792px 1280px no-repeat;
}
.g4g-gc-rep__world.is-anim { transition: transform 0.6s var(--g4g-ease-out); }

/* Panneau flottant de résultats (blanc translucide + flou, recherche, chips, liste). */
.g4g-gc-rep__panel {
  position: absolute; top: 14px; left: 14px; bottom: 14px; z-index: 6; width: min(292px, calc(100% - 28px));
  display: flex; flex-direction: column; border-radius: var(--g4g-radius-md);
  border: 1px solid color-mix(in srgb, var(--g4g-border-strong) 55%, transparent);
  background: color-mix(in srgb, var(--g4g-surface) 82%, transparent);
  -webkit-backdrop-filter: blur(8px) saturate(1.04); backdrop-filter: blur(8px) saturate(1.04);
  box-shadow: var(--g4g-shadow-lg); overflow: hidden; color: var(--g4g-text); cursor: default;
}
.g4g-gc-rep__panel-head { padding: 13px 14px 9px; }
.g4g-gc-rep__panel-title { margin: 0; font-size: 17px; font-weight: var(--g4g-weight-semibold); color: var(--g4g-primary); line-height: 1.15; }
.g4g-gc-rep__panel-count { margin: 2px 0 0; font-size: 11.5px; color: var(--g4g-text-muted); }
.g4g-gc-rep__search { display: flex; align-items: center; gap: 8px; min-height: 38px; margin: 6px 14px 0; padding: 0 12px; border: 1px solid var(--g4g-border-strong); border-radius: var(--g4g-radius-pill); background: var(--g4g-surface); color: var(--g4g-text-subtle); font-size: 13px; }
.g4g-gc-rep__search svg { width: 15px; height: 15px; flex: none; }
.g4g-gc-rep__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 9px 14px; }
.g4g-gc-rep__chip { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px; border: 1px solid var(--g4g-border); border-radius: var(--g4g-radius-pill); background: var(--g4g-surface-sunken); color: var(--g4g-text); font-size: 11px; font-weight: var(--g4g-weight-semibold); }
.g4g-gc-rep__chip--on { background: var(--g4g-primary-soft); border-color: var(--g4g-primary); color: var(--g4g-primary); }
.g4g-gc-rep__chip-x { opacity: 0.6; }
.g4g-gc-rep__list { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 8px 10px; display: grid; gap: 2px; }
.g4g-gc-rep__item { display: flex; align-items: center; gap: 10px; text-align: left; padding: 9px 8px; border: none; border-radius: var(--g4g-radius-sm); background: transparent; font: inherit; cursor: pointer; color: var(--g4g-text); }
.g4g-gc-rep__item:hover { background: var(--g4g-surface-sunken); }
.g4g-gc-rep__item-ic { width: 40px; height: 40px; flex: none; border-radius: var(--g4g-radius-card); background: var(--g4g-primary-soft); color: var(--g4g-accent); display: grid; place-items: center; }
.g4g-gc-rep__item-ic svg { width: 20px; height: 20px; }
.g4g-gc-rep__item-tx { min-width: 0; }
.g4g-gc-rep__item-t { display: block; font-size: 13px; font-weight: var(--g4g-weight-semibold); color: var(--g4g-primary); line-height: 1.2; }
.g4g-gc-rep__item-d { display: block; font-size: 11px; color: var(--g4g-text-muted); margin-top: 1px; }
.g4g-gc-rep__item-go { margin-left: auto; color: var(--g4g-text-subtle); flex: none; }
.g4g-gc-rep__item-go svg { width: 15px; height: 15px; }

.g4g-gc-rep__ctrl { position: absolute; top: 14px; right: 14px; z-index: 6; display: grid; gap: 6px; }
.g4g-gc-rep__recenter { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--g4g-border-strong); background: var(--g4g-surface); color: var(--g4g-text); cursor: pointer; display: grid; place-items: center; box-shadow: var(--g4g-shadow-sm); }
.g4g-gc-rep__recenter:hover { color: var(--g4g-primary); border-color: var(--g4g-primary); }
.g4g-gc-rep__recenter svg { width: 17px; height: 17px; }
.g4g-gc-rep__attr { position: absolute; right: 8px; bottom: 6px; z-index: 5; font-size: 9.5px; color: var(--g4g-text-subtle); background: color-mix(in srgb, var(--g4g-surface) 72%, transparent); padding: 2px 8px; border-radius: var(--g4g-radius-pill); pointer-events: none; }
.g4g-gc-rep__nudge { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 6; font-size: 12px; font-weight: var(--g4g-weight-semibold); color: var(--g4g-text); background: color-mix(in srgb, var(--g4g-surface) 90%, transparent); border: 1px solid var(--g4g-border-strong); padding: 7px 14px; border-radius: var(--g4g-radius-pill); pointer-events: none; transition: opacity 0.3s; box-shadow: var(--g4g-shadow-sm); }
.g4g-gc-rep__nudge.is-hidden { opacity: 0; }

/* Marqueurs : pin accent + étiquette-titre flottante (positions posées par le JS). */
.g4g-gc-rep__pin { position: absolute; transform: translate(-50%, -100%); z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; background: none; border: none; font: inherit; padding: 0; }
.g4g-gc-rep__pin-label { font-weight: var(--g4g-weight-semibold); font-size: 12.5px; color: var(--g4g-primary); background: var(--g4g-surface); border: 1px solid var(--g4g-border-strong); padding: 5px 11px; border-radius: var(--g4g-radius-md); white-space: nowrap; box-shadow: var(--g4g-shadow-md); }
.g4g-gc-rep__pin-ic { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--g4g-accent); color: var(--g4g-primary-contrast); box-shadow: var(--g4g-shadow-md); transition: transform var(--g4g-dur-fast); }
.g4g-gc-rep__pin-ic::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translate(-50%, -3px) rotate(45deg); width: 12px; height: 12px; background: var(--g4g-accent); border-radius: 2px; z-index: -1; }
.g4g-gc-rep__pin-ic svg { width: 21px; height: 21px; }
.g4g-gc-rep__pin:hover .g4g-gc-rep__pin-ic { transform: scale(1.08); }
.g4g-gc-rep__pin:hover .g4g-gc-rep__pin-label { border-color: var(--g4g-accent); text-decoration: underline; }
.g4g-gc-rep__pin.is-hi .g4g-gc-rep__pin-ic { transform: scale(1.14); }
.g4g-gc-rep__pin.is-hi .g4g-gc-rep__pin-label { border-color: var(--g4g-accent); box-shadow: 0 0 0 2px var(--g4g-accent-tint), var(--g4g-shadow-md); }

/* Modale PARTAGÉE du bloc (compacte, sans défilement) — contenu injecté par le JS. */
.g4g-gc-rep__modal { position: fixed; inset: 0; z-index: var(--g4g-z-modal); display: grid; place-items: center; padding: 18px; background: color-mix(in srgb, var(--g4g-ink) 60%, transparent); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.g4g-gc-rep__modal[hidden] { display: none; }
/* [2026-10-21 · demande Alexandre] Animation d'ENTRÉE au clic sur une fonctionnalité (toutes audiences,
   desktop + mobile) : voile qui s'estompe, fenêtre qui monte et grossit, texte en léger décalé. Classe
   relancée à chaque ouverture (sections.js::gcWireModal). Coupée en mouvement réduit / mode sobre. */
.g4g-gc-rep__modal.is-anim { animation: g4gGcRepFade 0.28s ease-out both; }
.g4g-gc-rep__modal.is-anim .g4g-gc-rep__dialog { animation: g4gGcRepIn 0.46s var(--g4g-ease-pop) both; }
.g4g-gc-rep__modal.is-anim .g4g-gc-rep__modal-copy > * { animation: g4gGcRepUp 0.4s var(--g4g-ease-out) 0.14s both; }
.g4g-gc-rep__modal.is-anim .g4g-gc-rep__modal-copy > :nth-child(2) { animation-delay: 0.22s; }
@keyframes g4gGcRepFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes g4gGcRepIn { from { opacity: 0; transform: translateY(22px) scale(0.92); } to { opacity: 1; transform: none; } }
@keyframes g4gGcRepUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .g4g-gc-rep__modal.is-anim, .g4g-gc-rep__modal.is-anim * { animation: none !important; } }
body.g4g-anim-sobre .g4g-gc-rep__modal.is-anim, body.g4g-anim-sobre .g4g-gc-rep__modal.is-anim * { animation: none !important; }
.g4g-gc-rep__dialog { position: relative; width: min(720px, 96%); background: var(--g4g-surface); color: var(--g4g-text); border-radius: var(--g4g-radius-lg); box-shadow: var(--g4g-shadow-lg); overflow: hidden; display: grid; grid-template-columns: 280px 1fr; }
.g4g-gc-rep__modal-media { position: relative; min-height: 240px; display: grid; place-items: center; color: color-mix(in srgb, var(--g4g-primary-contrast) 90%, transparent); background: var(--g4g-primary-soft); }
.g4g-gc-rep__modal-media > svg { width: 40px; height: 40px; }
/* [2026-10-24] Une fenêtre par fonctionnalité (rendue côté serveur, éditable) : le panneau se fond dans la
   grille du dialogue (média | texte) ; photo en couverture de son cadre. */
.g4g-gc-rep__pane { display: contents; }
.g4g-gc-rep__pane[hidden] { display: none; }
.g4g-gc-rep__modal-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.g4g-gc-rep__modal-copy { padding: 20px 22px; display: flex; flex-direction: column; justify-content: center; }
.g4g-gc-rep__modal-h { margin: 0 0 12px; font-size: 19px; font-weight: var(--g4g-weight-semibold); color: var(--g4g-primary); line-height: 1.25; }
.g4g-gc-rep__modal-sub { font-size: 14px; color: var(--g4g-text-muted); margin: 0 0 12px; line-height: 1.5; }
.g4g-gc-rep__modal-para { margin: 0; font-size: 14.5px; color: var(--g4g-text); line-height: 1.6; }
.g4g-gc-rep__modal-blist { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.g4g-gc-rep__modal-blist li { position: relative; padding-left: 17px; font-size: 13.5px; color: var(--g4g-text); line-height: 1.45; }
.g4g-gc-rep__modal-blist li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--g4g-accent); }
.g4g-gc-rep__modal-close { position: absolute; top: 10px; right: 10px; z-index: 2; width: 32px; height: 32px; border-radius: 50%; border: none; background: color-mix(in srgb, var(--g4g-surface) 92%, transparent); color: var(--g4g-ink); font-size: 18px; line-height: 1; cursor: pointer; display: grid; place-items: center; box-shadow: var(--g4g-shadow-sm); }
.g4g-gc-rep__modal-close:hover { background: var(--g4g-surface); color: var(--g4g-primary); }
/* [2026-10-24] Annonce GO « Bientôt » (gc_notice) : collée en bas à droite, glisse depuis la droite
   (sections.js::initGcNotice pose .is-in) ; mouvement réduit / sobre = simple fondu. Mobile : pleine largeur. */
.g4g-gc-notice { position: fixed; right: max(24px, env(safe-area-inset-right, 0px)); bottom: max(24px, env(safe-area-inset-bottom, 0px)); z-index: var(--g4g-z-sticky); width: min(360px, calc(100vw - 32px)); padding: 18px 20px 20px; display: grid; gap: 10px; background: var(--g4g-surface); color: var(--g4g-text); border: 1px solid var(--g4g-border); border-radius: var(--g4g-radius-lg); box-shadow: var(--g4g-shadow-lg); transform: translateX(calc(100% + 40px)); opacity: 0; visibility: hidden; transition: transform 0.65s var(--g4g-ease-out), opacity 0.4s ease, visibility 0s 0.65s; }
.g4g-gc-notice.is-in { transform: none; opacity: 1; visibility: visible; transition: transform 0.65s var(--g4g-ease-out), opacity 0.4s ease; }
@media (prefers-reduced-motion: reduce) { .g4g-gc-notice { transform: none; } }
body.g4g-anim-sobre .g4g-gc-notice { transform: none; }
@media (max-width: 560px) { .g4g-gc-notice { left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom, 0px)); width: auto; } }
.g4g-gc-notice__eyebrow { display: inline-flex; align-items: center; gap: 8px; padding-right: 36px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: var(--g4g-weight-semibold); color: var(--g4g-primary); }
.g4g-gc-notice__dots { display: inline-flex; gap: 3px; }
.g4g-gc-notice__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--g4g-people); }
.g4g-gc-notice__dots i:nth-child(2) { background: var(--g4g-planet); }
.g4g-gc-notice__dots i:nth-child(3) { background: var(--g4g-prosperity); }
.g4g-gc-notice__dots i:nth-child(4) { background: var(--g4g-purpose); }
.g4g-gc-notice__text { margin: 0; font-size: 15px; line-height: 1.55; }
.g4g-gc-notice__close { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border: none; border-radius: 50%; background: var(--g4g-surface-alt); color: var(--g4g-ink); font-size: 18px; line-height: 1; cursor: pointer; }
.g4g-gc-notice__close:hover { background: var(--g4g-primary); color: var(--g4g-primary-contrast); }
.g4g-gc-notice__close:focus-visible { outline: none; box-shadow: var(--g4g-focus-ring); }

@media (max-width: 640px) {
  .g4g-gc-rep__dialog { grid-template-columns: 1fr; width: min(430px, 96%); }
  .g4g-gc-rep__modal-media { min-height: 150px; aspect-ratio: 16 / 9; }
}
@media (max-width: 600px) {
  .g4g-gc-rep__map { height: 440px; }
  /* [2026-10-14 · lot QA, demande Alexandre] Sur mobile : on retire TOUTE la surimpression
     (moteur de recherche + titre + filtres + liste) et on garde la carte interactive nue.
     Vaut pour les 2 audiences (le thème Personnes ne touche que les couleurs du panneau). */
  .g4g-gc-rep__panel { display: none; }
}

/* ============================================================================
   Go connect · Communauté (carrousel 3D vertical) — E5 (jalon 2, CD-25)
   Portée de la maquette v39 (.d3*, .gcard, .g*) ; perspective 1300px, transforms
   et ressenti gardés à l'identique ; couleurs 100 % tokens. Les 4 cartes de
   gauche sont illustratives et FIGÉES ; le panneau de droite est peint par le JS.
   ============================================================================ */
.g4g-landing .g4g-gc-com { background: var(--g4g-ink-raised); color: var(--g4g-primary-contrast); }
.g4g-gc-com__inner { max-width: var(--lp-width); margin: 0 auto; text-align: center; }
.g4g-gc-com__eyebrow { display: block; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: var(--g4g-weight-semibold); color: var(--g4g-accent-on-dark); }
.g4g-gc-com__title {
  margin: 8px auto 0; font-size: calc(clamp(26px, 3.4vw, 38px) * var(--g4g-title-scale, 1));
  line-height: 1.1; letter-spacing: -0.022em; font-weight: var(--g4g-weight-light);
  color: var(--g4g-primary-contrast); max-width: 34ch; text-wrap: balance;
}
.g4g-gc-com__title p { margin: 0; }
.g4g-gc-com__title b, .g4g-gc-com__title strong { font-weight: var(--g4g-weight-semibold); color: var(--g4g-accent-on-dark); }
/* [2026-10-14 · demande Alexandre] Carrousel d'images 3D RETIRÉ : le panneau (photo + textes
   correspondants) prend la largeur, le rail (points + flèches) reste une colonne de navigation
   étroite à gauche. Les styles des cartes illustratives (.g4g-gc-com__stage/__card/__surface…)
   plus bas ne sont plus rendus (gardés inertes). */
.g4g-gc-com__d3 { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 3vw, 34px); align-items: start; max-width: 900px; margin: clamp(22px, 3vw, 34px) auto 0; text-align: left; }
.g4g-gc-com__d3:focus-visible { outline: none; box-shadow: var(--g4g-focus-ring); border-radius: var(--g4g-radius-md); }
.g4g-gc-com__left { display: flex; align-items: center; gap: 14px; }
.g4g-gc-com__rail { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: none; }
.g4g-gc-com__nav { width: 38px; height: 38px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--g4g-primary-contrast) 24%, transparent); background: color-mix(in srgb, var(--g4g-primary-contrast) 6%, transparent); color: color-mix(in srgb, var(--g4g-primary-contrast) 92%, transparent); cursor: pointer; display: grid; place-items: center; transition: border-color var(--g4g-dur-fast), color var(--g4g-dur-fast); }
.g4g-gc-com__nav:hover { border-color: var(--g4g-accent-on-dark); color: var(--g4g-accent-on-dark); }
.g4g-gc-com__nav svg { width: 18px; height: 18px; }
.g4g-gc-com__dots { display: flex; flex-direction: column; gap: 8px; margin: 2px 0; }
.g4g-gc-com__dot { width: 9px; height: 9px; border-radius: 50%; border: none; background: color-mix(in srgb, var(--g4g-primary-contrast) 22%, transparent); cursor: pointer; padding: 0; transition: transform var(--g4g-dur-fast), background var(--g4g-dur-fast); }
.g4g-gc-com__dot[aria-current="true"] { background: var(--g4g-accent-on-dark); transform: scale(1.3); }
.g4g-gc-com__panel { position: relative; transition: opacity 0.3s ease; }
.g4g-gc-com__panel.is-swap { opacity: 0; }
.g4g-gc-com__h { font-weight: var(--g4g-weight-semibold); font-size: clamp(19px, 2.4vw, 25px); color: var(--g4g-accent-on-dark); margin: 0 0 8px; line-height: 1.2; }
.g4g-gc-com__sub { margin: 0 0 12px; font-size: 14.5px; color: color-mix(in srgb, var(--g4g-primary-contrast) 82%, transparent); line-height: 1.5; }
.g4g-gc-com__media { position: relative; aspect-ratio: 16 / 9; border-radius: var(--g4g-radius-md); overflow: hidden; display: grid; place-items: center; box-shadow: var(--g4g-shadow-lg); background: linear-gradient(150deg, color-mix(in srgb, var(--g4g-accent) 60%, var(--g4g-ink)), var(--g4g-ink)); }
.g4g-gc-com__bullets { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 9px; }
.g4g-gc-com__bullets li { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; color: color-mix(in srgb, var(--g4g-primary-contrast) 92%, transparent); }
.g4g-gc-com__b-ic { flex: none; margin-top: 1px; color: var(--g4g-accent-on-dark); display: inline-flex; }
.g4g-gc-com__b-ic svg { width: 20px; height: 20px; }
/* [2026-10-19] Carrousel communauté SANS boucle : flèche inactive à la 1re / dernière fonctionnalité. */
.g4g-gc-com__nav:disabled { opacity: 0.35; cursor: default; pointer-events: none; }
/* [2026-10-19] Mode ÉDITION de la section communauté : les 4 fonctionnalités empilées, chaque texte et
   chaque visuel éditables au builder (gc_community.html, branche cms_editing). */
.g4g-gc-com__editlist { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(18px, 2.4vw, 28px); max-width: 1100px; margin: clamp(22px, 3vw, 34px) auto 0; text-align: left; }
.g4g-gc-com__editcap { display: inline-block; margin: 0 0 8px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: var(--g4g-weight-semibold); color: var(--g4g-accent-on-dark); }
.g4g-gc-com__editcard .g4g-gc-com__media { width: 100%; margin: 12px 0 0; }
.g4g-gc-com__editimg { display: block; width: 100%; height: 100%; object-fit: cover; }
.g4g-landing .g4g-gc-com[data-audience="citoyens"] .g4g-gc-com__editcap { color: var(--g4g-primary); }

/* [2026-10-20] Styles des cartes illustratives (surface, composeur, publication, abonnés, épingle,
   événement) RETIRÉS : le carrousel de cartes a été supprimé le 2026-10-14 (budget CSS). */

@media (max-width: 820px) {
  .g4g-gc-com__d3 { grid-template-columns: 1fr; gap: 26px; }
  /* [2026-10-21 · demande Alexandre] Mobile : navigation HORIZONTALE (flèches ← → et points en rangée). */
  .g4g-gc-com__left { justify-content: center; }
  .g4g-gc-com__rail, .g4g-gc-com__dots { flex-direction: row; }
  .g4g-gc-com__dots { margin: 0 2px; }
  .g4g-gc-com__nav svg { rotate: -90deg; }
}

/* ============================================================================
   Go connect · THÈME CLAIR CITOYEN — jalon 3 (CD-25)
   Les 7 sections `gc_*` sont SOMBRES par défaut (vue Organisations). En vue
   Citoyens, `targeted_body` pose `data-audience="citoyens"` sur la racine de
   chaque section (et sur le <body>) ; ces surcharges ÉCLAIRCISSENT la section
   (fonds blancs/ivoire, titres en --g4g-primary, emphase en --g4g-accent,
   sur-lignes en --g4g-prosperity), dans l'esprit des `.mock--cit` de la maquette
   v39. DA citoyenne = chaleur/polychromie (vs duotone sombre Organisations).
   Les cartes internes (vitrine, panneau de carte, cartes du carrousel) sont DÉJÀ
   claires → seuls les fonds de section et les couleurs « on-dark » basculent.
   Sélecteur à specificité (0,3,0) co-porté sous `.g4g-landing` : bat la règle
   sombre (0,2,0) quel que soit l'ordre source. Couleurs 100 % tokens (tokens.css).
   N.B. : `[data-audience]` porte aussi les variables de motion (--anim-*) — on n'y
   touche pas ; on ne pose que des couleurs/fonds. Alternance des fonds = maquette
   (héro/sélecteur/communauté = surface ; carrefour/répertoire/parrainage/CTA = sunken).
   ============================================================================ */

/* C1 — Héro */
.g4g-landing .g4g-gc-hero[data-audience="citoyens"] { background: var(--g4g-surface); color: var(--g4g-text); }
.g4g-landing .g4g-gc-hero[data-audience="citoyens"] .g4g-gc-hero__eyebrow { color: var(--g4g-accent); }
.g4g-landing .g4g-gc-hero[data-audience="citoyens"] .g4g-gc-hero__title { color: var(--g4g-primary); }
.g4g-landing .g4g-gc-hero[data-audience="citoyens"] .g4g-gc-hero__title b,
.g4g-landing .g4g-gc-hero[data-audience="citoyens"] .g4g-gc-hero__title strong { color: var(--g4g-accent); }
.g4g-landing .g4g-gc-hero[data-audience="citoyens"] .g4g-gc-hero__rule { background: var(--g4g-accent); }
.g4g-landing .g4g-gc-hero[data-audience="citoyens"] .g4g-gc-hero__lead { color: var(--g4g-text-muted); }
.g4g-landing .g4g-gc-hero[data-audience="citoyens"] .g4g-gc-hero__cta--primary { background: var(--g4g-primary); color: var(--g4g-primary-contrast); }
.g4g-landing .g4g-gc-hero[data-audience="citoyens"] .g4g-gc-hero__cta--primary:hover { background: var(--g4g-primary-hover); color: var(--g4g-primary-contrast); }
.g4g-landing .g4g-gc-hero[data-audience="citoyens"] .g4g-gc-hero__cta--secondary { border-color: var(--g4g-border-strong); color: var(--g4g-primary); }
.g4g-landing .g4g-gc-hero[data-audience="citoyens"] .g4g-gc-hero__cta--secondary:hover { border-color: var(--g4g-primary); color: var(--g4g-primary); }
.g4g-landing .g4g-gc-hero[data-audience="citoyens"] .g4g-gc-hero__emblem { color: var(--g4g-accent); }
.g4g-landing .g4g-gc-hero[data-audience="citoyens"] .g4g-gc-hero__planes b { border-color: color-mix(in srgb, var(--g4g-accent) 30%, transparent); }

/* C2 — Carrefour */
.g4g-landing .g4g-gc-cross[data-audience="citoyens"] { background: var(--g4g-surface-sunken); color: var(--g4g-text); }
.g4g-landing .g4g-gc-cross[data-audience="citoyens"] .g4g-gc-cross__eyebrow { color: var(--g4g-accent); }
.g4g-landing .g4g-gc-cross[data-audience="citoyens"] .g4g-gc-cross__title { color: var(--g4g-primary); }
.g4g-landing .g4g-gc-cross[data-audience="citoyens"] .g4g-gc-cross__title b,
.g4g-landing .g4g-gc-cross[data-audience="citoyens"] .g4g-gc-cross__title strong { color: var(--g4g-accent); }
.g4g-landing .g4g-gc-cross[data-audience="citoyens"] .g4g-gc-cross__lead { color: var(--g4g-text); }
.g4g-landing .g4g-gc-cross[data-audience="citoyens"] .g4g-gc-cross__desc { color: var(--g4g-text-muted); }
.g4g-landing .g4g-gc-cross[data-audience="citoyens"] .g4g-gc-cross__photo { border-color: var(--g4g-border); }
.g4g-landing .g4g-gc-cross[data-audience="citoyens"] .g4g-gcxd--ring { border-color: var(--g4g-accent); }
.g4g-landing .g4g-gc-cross[data-audience="citoyens"] .g4g-gcxd--dot { background: var(--g4g-accent); }

/* C3 — Sélecteur */
.g4g-landing .g4g-gc-select[data-audience="citoyens"] { background: var(--g4g-surface); color: var(--g4g-text); }
.g4g-landing .g4g-gc-select[data-audience="citoyens"] .g4g-gc-select__eyebrow { color: var(--g4g-accent); }
.g4g-landing .g4g-gc-select[data-audience="citoyens"] .g4g-gc-select__title { color: var(--g4g-primary); }
.g4g-landing .g4g-gc-select[data-audience="citoyens"] .g4g-gc-select__title b,
.g4g-landing .g4g-gc-select[data-audience="citoyens"] .g4g-gc-select__title strong { color: var(--g4g-accent); }
.g4g-landing .g4g-gc-select[data-audience="citoyens"] .g4g-gc-select__card { background: var(--g4g-surface); border-color: var(--g4g-border); color: var(--g4g-text); }
.g4g-landing .g4g-gc-select[data-audience="citoyens"] .g4g-gc-select__card:hover { border-color: var(--g4g-primary); }
.g4g-landing .g4g-gc-select[data-audience="citoyens"] .g4g-gc-select__card.is-active { border-color: var(--g4g-accent); background: var(--g4g-primary-soft); }
.g4g-landing .g4g-gc-select[data-audience="citoyens"] .g4g-gc-select__card-ic { background: var(--g4g-primary-soft); color: var(--g4g-accent); }
.g4g-landing .g4g-gc-select[data-audience="citoyens"] .g4g-gc-select__card-t { color: var(--g4g-primary); }
.g4g-landing .g4g-gc-select[data-audience="citoyens"] .g4g-gc-select__card-d { color: var(--g4g-text-muted); }
.g4g-landing .g4g-gc-select[data-audience="citoyens"] .g4g-gc-select__img { border-color: var(--g4g-border); }
.g4g-landing .g4g-gc-select[data-audience="citoyens"] .g4g-gcsd--ring { border-color: var(--g4g-accent); }
.g4g-landing .g4g-gc-select[data-audience="citoyens"] .g4g-gcsd--dot { background: var(--g4g-accent); }
.g4g-landing .g4g-gc-select[data-audience="citoyens"] .g4g-gc-select__h { color: var(--g4g-primary); }
.g4g-landing .g4g-gc-select[data-audience="citoyens"] .g4g-gc-select__h b,
.g4g-landing .g4g-gc-select[data-audience="citoyens"] .g4g-gc-select__h strong { color: var(--g4g-accent); }
.g4g-landing .g4g-gc-select[data-audience="citoyens"] .g4g-gc-select__text { color: var(--g4g-text-muted); }
.g4g-landing .g4g-gc-select[data-audience="citoyens"] .g4g-gc-select__checks li { color: var(--g4g-text); }
.g4g-landing .g4g-gc-select[data-audience="citoyens"] .g4g-gc-select__check-ic { color: var(--g4g-accent); }
.g4g-landing .g4g-gc-select[data-audience="citoyens"] .g4g-gc-select__checks b,
.g4g-landing .g4g-gc-select[data-audience="citoyens"] .g4g-gc-select__checks strong { color: var(--g4g-primary); }

/* C4 — Répertoire (carte) : fond + sur-ligne/titre/indice ; carte/panneau/pins/modale déjà clairs */
.g4g-landing .g4g-gc-rep[data-audience="citoyens"] { background: var(--g4g-surface-sunken); color: var(--g4g-text); }
.g4g-landing .g4g-gc-rep[data-audience="citoyens"] .g4g-gc-rep__eyebrow { color: var(--g4g-accent); }
.g4g-landing .g4g-gc-rep[data-audience="citoyens"] .g4g-gc-rep__title { color: var(--g4g-primary); }
.g4g-landing .g4g-gc-rep[data-audience="citoyens"] .g4g-gc-rep__title b,
.g4g-landing .g4g-gc-rep[data-audience="citoyens"] .g4g-gc-rep__title strong { color: var(--g4g-accent); }
.g4g-landing .g4g-gc-rep[data-audience="citoyens"] .g4g-gc-rep__hint { color: var(--g4g-text-muted); }
.g4g-landing .g4g-gc-rep[data-audience="citoyens"] .g4g-gc-rep__hint svg { color: var(--g4g-accent); }
.g4g-landing .g4g-gc-rep[data-audience="citoyens"] .g4g-gc-rep__map { border-color: var(--g4g-border-strong); }

/* C5 — Communauté (carrousel) : fond + chrome ; cartes de gauche déjà claires */
.g4g-landing .g4g-gc-com[data-audience="citoyens"] { background: var(--g4g-surface); color: var(--g4g-text); }
.g4g-landing .g4g-gc-com[data-audience="citoyens"] .g4g-gc-com__eyebrow { color: var(--g4g-accent); }
.g4g-landing .g4g-gc-com[data-audience="citoyens"] .g4g-gc-com__title { color: var(--g4g-primary); }
.g4g-landing .g4g-gc-com[data-audience="citoyens"] .g4g-gc-com__title b,
.g4g-landing .g4g-gc-com[data-audience="citoyens"] .g4g-gc-com__title strong { color: var(--g4g-accent); }
.g4g-landing .g4g-gc-com[data-audience="citoyens"] .g4g-gc-com__nav { border-color: var(--g4g-border-strong); background: var(--g4g-surface); color: var(--g4g-primary); }
.g4g-landing .g4g-gc-com[data-audience="citoyens"] .g4g-gc-com__nav:hover { border-color: var(--g4g-primary); color: var(--g4g-primary); }
.g4g-landing .g4g-gc-com[data-audience="citoyens"] .g4g-gc-com__dot { background: var(--g4g-border-strong); }
.g4g-landing .g4g-gc-com[data-audience="citoyens"] .g4g-gc-com__dot[aria-current="true"] { background: var(--g4g-accent); }
.g4g-landing .g4g-gc-com[data-audience="citoyens"] .g4g-gc-com__h { color: var(--g4g-primary); }
.g4g-landing .g4g-gc-com[data-audience="citoyens"] .g4g-gc-com__sub { color: var(--g4g-text-muted); }
.g4g-landing .g4g-gc-com[data-audience="citoyens"] .g4g-gc-com__bullets li { color: var(--g4g-text); }
.g4g-landing .g4g-gc-com[data-audience="citoyens"] .g4g-gc-com__b-ic { color: var(--g4g-accent); }

/* C6 — Parrainage : fond + titres + paragraphes + schéma « ouverture » + résultats ;
   carte « Espace de la communauté » déjà claire (aucune surcharge) */
.g4g-landing .g4g-gc-sponsor[data-audience="citoyens"] { background: var(--g4g-surface-sunken); color: var(--g4g-text); }
.g4g-landing .g4g-gc-sponsor[data-audience="citoyens"] .g4g-gc-sponsor__eyebrow { color: var(--g4g-accent); }
.g4g-landing .g4g-gc-sponsor[data-audience="citoyens"] .g4g-gc-sponsor__title { color: var(--g4g-primary); }
.g4g-landing .g4g-gc-sponsor[data-audience="citoyens"] .g4g-gc-sponsor__title b,
.g4g-landing .g4g-gc-sponsor[data-audience="citoyens"] .g4g-gc-sponsor__title strong { color: var(--g4g-accent); }
.g4g-landing .g4g-gc-sponsor[data-audience="citoyens"] .g4g-gc-sponsor__lead { color: var(--g4g-text); }
.g4g-landing .g4g-gc-sponsor[data-audience="citoyens"] .g4g-gc-sponsor__lead b,
.g4g-landing .g4g-gc-sponsor[data-audience="citoyens"] .g4g-gc-sponsor__lead strong { color: var(--g4g-primary); }
.g4g-landing .g4g-gc-sponsor[data-audience="citoyens"] .g4g-gc-sponsor__desc { color: var(--g4g-text-muted); }
.g4g-landing .g4g-gc-sponsor[data-audience="citoyens"] .g4g-gc-sponsor__desc b,
.g4g-landing .g4g-gc-sponsor[data-audience="citoyens"] .g4g-gc-sponsor__desc strong { color: var(--g4g-primary); }
.g4g-landing .g4g-gc-sponsor[data-audience="citoyens"] .g4g-gc-sponsor__outcome { background: var(--g4g-surface); border-color: var(--g4g-border); }
.g4g-landing .g4g-gc-sponsor[data-audience="citoyens"] .g4g-gc-sponsor__outcome-ic { color: var(--g4g-accent); }
.g4g-landing .g4g-gc-sponsor[data-audience="citoyens"] .g4g-gc-sponsor__outcome-t { color: var(--g4g-primary); }
.g4g-landing .g4g-gc-sponsor[data-audience="citoyens"] .g4g-gc-sponsor__outcome-x { color: var(--g4g-text-muted); }

/* C7 — CTA « split » : bande sombre → section claire (le cadre rond reste coloré) */
.g4g-landing .g4g-gc-cta[data-audience="citoyens"] { background: var(--g4g-surface-sunken); color: var(--g4g-text); }
.g4g-landing .g4g-gc-cta[data-audience="citoyens"] .g4g-gc-cta__frame { background: var(--g4g-primary); border-color: transparent; }
.g4g-landing .g4g-gc-cta[data-audience="citoyens"] .g4g-gc-cta__title { color: var(--g4g-primary); }
.g4g-landing .g4g-gc-cta[data-audience="citoyens"] .g4g-gc-cta__title b,
.g4g-landing .g4g-gc-cta[data-audience="citoyens"] .g4g-gc-cta__title strong { color: var(--g4g-accent); }
.g4g-landing .g4g-gc-cta[data-audience="citoyens"] .g4g-gc-cta__lead { color: var(--g4g-text-muted); }
.g4g-landing .g4g-gc-cta[data-audience="citoyens"] .g4g-gc-cta__lead b,
.g4g-landing .g4g-gc-cta[data-audience="citoyens"] .g4g-gc-cta__lead strong { color: var(--g4g-primary); }
.g4g-landing .g4g-gc-cta[data-audience="citoyens"] .g4g-gc-cta__btn { background: var(--g4g-primary); color: var(--g4g-primary-contrast); }
.g4g-landing .g4g-gc-cta[data-audience="citoyens"] .g4g-gc-cta__btn:hover { background: var(--g4g-primary-hover); }