/* ================================================================================
   RÈGLES D'ÉDITION — À LIRE AVANT TOUTE MODIFICATION (humain ou assistant)
   --------------------------------------------------------------------------------
   1. JAMAIS ajouter à la fin du fichier. On modifie la règle LÀ OÙ elle vit,
      ou on la crée dans SA section (voir le SOMMAIRE plus bas).
   2. JAMAIS de valeur en dur (couleur, taille, espace, rayon, ombre, durée).
      Toujours un token du :root. Si la valeur manque, on ÉTEND un token, on n'écrit
      pas un littéral. (Exceptions tolérées : glyphes d'icônes en px, dégradés/effets
      décoratifs ponctuels — déjà signalés en commentaire.)
   3. Une info = un seul endroit. Avant d'ajouter, CHERCHER si le sélecteur ou la
      règle existent déjà, et les compléter au lieu de dupliquer.
   4. Respecter le SOMMAIRE et l'ordre des sections. Nouveau composant = nouvelle
      section nommée, placée au bon endroit (pas en fin de fichier).
   5. Pas de nouveau !important, sauf override Elementor explicite ET commenté.
   6. Toujours livrer un DIFF + la liste « à reporter dans Elementor », jamais un dump
      du fichier entier. Après toute modif CSS : purger le cache Cloudflare.
   ================================================================================ */
/* ================================================================================
   GRAPHISME FOR SCIENCE — CSS GLOBAL (Elementor > Réglages du site > CSS perso)
   Source unique de vérité du style du site. Refactorisé juin 2026.
   --------------------------------------------------------------------------------
   INVARIANTS
   - Polices chargées localement (Elementor google_font: disabled). AUCUN @import ici.
   - Police UI = Inter. Titres = Marcellus. JAMAIS Urbanist.
   - Palette : fond var(--c-fond) · CTA var(--c-cta) · texte var(--c-texte) · accent var(--c-accent)
               texte secondaire var(--c-texte-2) · carte var(--c-carte).
   - Boutons : pill 100px, Inter Bold. Verre : grands conteneurs radius 40px,
               cartes 20-24px.
   - Breakpoints UNIQUES : 1024px (tablette) · 768px (téléphone).
   --------------------------------------------------------------------------------
   SOMMAIRE
   (0) Base / reset / overlay global
   (1) Largeurs unifiées
   (2) Encadré verre (composant générique)
   (3) Typographie & titres (H1 de page, H2, en-têtes de section .section-header / .section-head)
   (4) Boutons (widgets .cta-* ET variantes lien <a> : a.cta-principal, a.cta-secondary-dark)
   (5) Hero & étiquettes (étiquette, intro, séparateur moléculaire, hero scindé .hero-split)
   (6) Composants de page (À propos page + accueil · Contact · Ressources · Réalisations ·
       Audience / Pour qui · Bande de logos · Témoignages · Process · Tarifs · Services
       (3 offres, alignement subgrid) · Newsletter · Diagnostic · Posts LinkedIn · CTA final accueil)
   (7) Widgets natifs Elementor (Portfolio · Portfolio bento · Fiche projet ·
       Publications · Cartes Ressources · TOC · En-tête)
   (8) Articles de blog
   (9) Responsive — politique de breakpoints (le responsive est colocalisé
       avec chaque composant ; cette section ne fait que documenter la règle)
   (10) Accessibilité — texte de lecture sur fond clair
   (11) Icônes, motif de fond, page 404 (grammaire visuelle, octobre 2026)
   (12) Finitions — micro-améliorations transverses
   --------------------------------------------------------------------------------
   EXCEPTIONS laissées strictement inchangées : CSS de l'outil d'auto-évaluation
   et animation d'accueil (Hero Three.js) — cette dernière ne vit pas ici.
   NB : tout le style est piloté par le bloc :root (TOKENS) ci-dessous : une
        valeur = un seul endroit. Pour changer la charte, on n'édite QUE le :root.
   ================================================================================ */
/* ================================================================================
   (T) TOKENS — SOURCE UNIQUE DE VÉRITÉ (:root)
   --------------------------------------------------------------------------------
   MÉMO « comment je modifie » :
   - Changer une COULEUR de charte ........ --c-*  (le -rgb sert aux transparences)
   - Changer la POLICE titre / corps ...... --font-titre / --font-corps
   - Changer une TAILLE de texte .......... --fs-*  (rem, éditorial) · --fs-ui-*  (px, boutons/étiquettes/champs)
   - Changer un ESPACEMENT ................ --sp-1..8  (grille 4/8/16/24/40/60/80/100)
   - Boutons / cartes (exceptions gardées) . --pad-btn / --pad-card
   - Changer un RAYON ..................... --r-*  (cartes = --r-lg 24 ; verre = --r-glass / --r-glass-2)
   - Changer une OMBRE .................... --shadow-sm/md/lg (élévation) · --shadow-glass · --shadow-icon
   - Changer une TRANSITION .............. --t-fast/base/slow  (durée) · --ease  (courbe)
  - Apparition des images .............. --t-apparition (durée) · --apparition-decalage (montée, 0px = fondu seul)
   - Bande de logos (accueil) ............ --logos-h / --logos-h-mobile (hauteur) · --logos-duree-par-logo (vitesse)
   - Changer une LARGEUR max .............. --gfs-w / --gfs-w-medium / --gfs-w-etroit
   NB technique : les BREAKPOINTS (1024 / 768) restent en littéral dans les @media
   (le langage CSS n'autorise pas les variables dans une media query).
   NB effets : glows CTA/accent, ombres dramatiques et puits d'icônes sont laissés
   en valeurs littérales (intentions spécifiques, hors échelle d'élévation).
   ================================================================================ */
:root {

  /* ---------- COULEURS (hex + canaux RVB pour les rgba) ---------- */
  --c-fond:#EFE7E7;        --c-fond-rgb:239,231,231;
  --c-cta:#FFB347;         --c-cta-rgb:255,179,71;
  --c-texte:#2C3A53;       --c-texte-rgb:44,58,83;
  --c-accent:#7A5BC2;      --c-accent-rgb:122,91,194;
  --c-carte:#FFFFFF;       --c-carte-rgb:255,255,255;   /* = blanc (cartes + texte sur sombre) */
  --c-texte-2:#5D6575;                                  /* texte secondaire */
  --c-texte-clair:#C4CAD6;                              /* texte sur fond sombre */

  /* États & accents secondaires */
  --c-succes:#4CAF50;   --c-erreur:#D64545;
  --c-cta-fonce:#D98E20;   --c-rouge-fonce:#C05C48;     /* titres de callout tip / warning */

  /* Quasi-blancs (fusionnés) */
  --c-carte-violet:#FAF8FF;     /* fonds carte teintés violet (4 teintes unifiées) */
  --c-blanc-casse:#FAFAFA;      /* zébrures de tableau, bordures d'avatar */
  --c-gris-doux:#9AA0AB;        /* gris d'étiquette discret */

  /* Couleurs de catégorie (cartes articles "Clean Lab") — famille harmonisée à la charte.
     3 couleurs de marque + 5 teintes voisines (registre éditorial sourd). Fallback = gris. */
  --c-cat-figures:  var(--c-accent);    /* Figures de publication — violet (charte) */
  --c-cat-posters:  var(--c-cta-fonce); /* Posters & graphical abstracts — ambre (charte) */
  --c-cat-metier:   var(--c-texte);     /* Métier, droits & réseaux — bleu nuit (charte) */
  --c-cat-identite: #4C5C99;            /* Identité visuelle — indigo */
  --c-cat-vulga:    #2E8B86;            /* Vulgarisation & médiation — teal */
  --c-cat-access:   #5E9C6B;            /* Accessibilité & inclusion — vert sauge */
  --c-cat-ia:       #8A5A7A;            /* IA & intégrité — prune */
  --c-cat-outils:   #C26B4E;            /* Outils & méthodes — terracotta */
  --c-cat-defaut:   var(--c-texte-2);   /* défaut neutre (étiquette non listée) */

  /* Transparences neutres / décoratives */
  --c-noir-rgb:0,0,0;           /* ombres pures */
  --c-salmon-rgb:234,163,147;   /* dégradé décoratif local */

  /* Dégradés (exceptions visuelles, arrêts groupés) */
  --grad-hero-1:#CDBCE6; --grad-hero-2:#B9A7DF; --grad-hero-3:#E7CFC6;   /* bandeau hero */
  --grad-orb-1:#8E72D4;  --grad-orb-2:#5E47A0;                            /* orbe violet profond */

  /* ---------- TYPOGRAPHIE ---------- */
  --font-titre:'Marcellus', serif;
  --font-corps:'Inter', sans-serif;   /* = police UI (jamais Urbanist) */

  /* Échelle de tailles (branchée sur les font-size rem ; px UI/icônes laissés littéraux) */
  --fs-2xs:0.75rem; --fs-xs:0.85rem; --fs-sm:0.9rem; --fs-ui:0.95rem;
  --fs-base:1rem;  --fs-md:1.1rem;  --fs-lg:1.2rem;  --fs-xl:1.3rem;
  --fs-2xl:1.4rem; --fs-3xl:1.5rem; --fs-4xl:1.6rem;
  --fs-h3:2rem;    --fs-h2:2.2rem;  --fs-h2b:2.5rem; --fs-h1b:2.8rem; --fs-h1:3.5rem;
  /* Tailles UI en px (texte de contrôle : boutons, étiquettes, champs).
     Glyphes d'icônes (22/24/32/40/52px) laissés littéraux : tailles d'icône, pas du texte. */
  --fs-ui-2xs:11px; --fs-ui-xs:12px; --fs-ui-sm:13px; --fs-ui-md:14px;
  --fs-ui-lg:15px;  --fs-ui-base:16px; --fs-ui-xl:18px; --fs-ui-2xl:20px;

  /* ---------- ESPACEMENTS (grille stricte) ---------- */
  --sp-1:4px; --sp-2:8px; --sp-3:16px; --sp-4:24px; --sp-5:40px;
  --sp-6:60px; --sp-7:80px; --sp-8:100px;     /* 60/80/100 = respirations de section */
  /* Exceptions signature gardées exactes (validé) */
  --pad-btn:15px 32px;   /* padding des boutons pill */
  --pad-card:50px;       /* padding des cartes de contenu */
  --pad-nav:13px 20px;          /* entrée du menu de l'en-tête (ordinateur) */
  --pad-nav-mobile:10px 20px;   /* entrée du menu burger (tablette, téléphone) */
  --nav-trait:3px;              /* trait orange sous l'entrée de menu survolée */
  --logo-w:120px;               /* largeur du logo dans la capsule d'en-tête */
  --h-entete-espace:120px;      /* espace réservé sous la capsule fixe (le contenu ne passe pas dessous) */
  --gouttiere-elementor:10px;   /* marge latérale par défaut des conteneurs Elementor : la reprendre hors Elementor pour aligner */
  --single-largeur:60%;         /* colonne des articles et fiches projet sur ordinateur (comme les gabarits Pro) */
  --galerie-col:1; --galerie-col-t:2; --galerie-col-m:1; --galerie-ecart:10px;   /* galerie des fiches projet : valeurs par défaut, chaque galerie pose les siennes */
  --single-espace-haut:50px;    /* air sous l'en-tête, au-dessus du titre des articles et fiches : même valeur que les pages (Services) et les fiches en ligne, relevée le 21/10 */

  /* ---------- RAYONS ---------- */
  --r-pill:100px;     /* boutons + chips (pill) */
  --r-glass:40px;     --r-glass-2:32px;   /* grands conteneurs verre */
  --r-lg:24px; --r-sm:16px; --r-xs:12px;   /* --r-md (20) retiré : cartes unifiées à 24 */
  --r-full:50%;       /* ronds (icônes, pastilles) */
  --r-2xs:3px;        /* bouton burger */

  /* ---------- LARGEURS (échelle 1100 / 960 / 720) ---------- */
  --gfs-w:1100px; --gfs-w-medium:960px; --gfs-w-etroit:720px;

  /* ---------- OMBRES (élévation ; base couleur = --c-texte-rgb) ---------- */
  --shadow-sm: 0 4px 20px rgba(var(--c-texte-rgb),0.04);      /* carte au repos */
  --shadow-md: 0 10px 30px rgba(var(--c-texte-rgb),0.06);     /* carte survolée */
  --shadow-lg: 0 18px 44px rgba(var(--c-texte-rgb),0.12);     /* survol fort */
  --shadow-glass: 0 20px 50px rgba(var(--c-texte-rgb),0.05);  /* grand conteneur verre */
  --shadow-accent: 0 20px 50px rgba(var(--c-accent-rgb),0.1); /* carte accent (gradient violet) */
  --shadow-icon: inset 0 2px 5px rgba(var(--c-carte-rgb),1), 0 5px 15px rgba(var(--c-noir-rgb),0.05); /* puits d'icône */
  --shadow-tag: 0 4px 10px rgba(var(--c-texte-rgb),0.06);    /* étiquette / capsule (.gfs-tag) */
  --shadow-cta: 0 4px 15px rgba(var(--c-cta-rgb),0.3);       /* bouton CTA orange au repos */
  --shadow-cta-hover: 0 8px 25px rgba(var(--c-cta-rgb),0.4); /* bouton CTA orange survolé */
  --shadow-filter: 0 4px 15px rgba(var(--c-texte-rgb),0.2);  /* pastille filtre survol/actif */
  --shadow-filter-active: 0 4px 15px rgba(var(--c-texte-rgb),0.2), inset 0 -3px 0 var(--c-cta);  /* + filet orange "onglet" */

  /* ---------- TRANSITIONS ---------- */
  --t-fast:0.2s; --t-base:0.3s; --t-slow:0.4s;
  --ease:cubic-bezier(0.25, 1, 0.5, 1);
  --t-apparition:0.6s;              /* apparition des images au chargement (section 12) */
  --apparition-decalage:8px;        /* montée de l'apparition ; 0px = fondu seul */

  /* ---------- VERRE & BORDURES ---------- */
  --glass-1: rgba(var(--c-carte-rgb),0.2);          /* verre léger */
  --glass-2: rgba(var(--c-carte-rgb),0.4);          /* verre moyen */
  --glass-3: rgba(var(--c-carte-rgb),0.6);          /* verre dense */
  --glass-soft: rgba(var(--c-carte-rgb),0.06);      /* verre très léger : panneau translucide sur fond SOMBRE */
  --c-border: rgba(var(--c-texte-rgb),0.1);         /* bordure de carte discrète */
  --c-border-glass: rgba(var(--c-carte-rgb),0.4);   /* bordure du verre */

  /* ---------- CHAMPS (formulaires & saisie) ---------- */
  --h-control: 48px;                                       /* hauteur champ + bouton de formulaire */
  --ring-focus: 0 0 0 4px rgba(var(--c-accent-rgb),0.1);   /* anneau de focus des champs (accent) */

  /* ---------- ICÔNES, MOTIF, 404 (section 11) ---------- */
  --masque-plein: #000;          /* zone visible d'un masque CSS (le noir = opaque) */
  --ico-i: 0;                    /* rang dans la cascade, posé par gfs-icones.js */
  --sep-trait: 1.5px;            /* séparateur moléculaire : épaisseur de la ligne */
  --sep-hexa: 26px;              /* séparateur : taille de l'hexagone */
  --sep-point: 6px;              /* séparateur : point orange */
  --sep-vide: 22px;              /* séparateur : demi-largeur du vide autour du motif */
  --sep-duree: .9s;              /* séparateur : ouverture de la ligne */
  --sep-hexa-trace: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 6.5l6 3.5v7l-6 3.5-6-3.5v-7z' fill='black' fill-opacity='.2'/%3E%3Cpath d='M12 5l6 3.5v7L12 19l-6-3.5v-7z' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ico-coche-masque: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='translate%281.5 1.5%29'%3E%3Ccircle cx='12' cy='12' r='8' fill='black' fill-opacity='.22' stroke='none'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='8' fill='none'/%3E%3Cpath d='M8.3 12.2l2.5 2.5 4.9-5.2' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");   /* puce ✓ des listes (masque) */
  --ico-croix-masque: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='translate%281.5 1.5%29'%3E%3Ccircle cx='12' cy='12' r='8' fill='black' fill-opacity='.22' stroke='none'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='8' fill='none'/%3E%3Cpath d='M9.2 9.2l5.6 5.6M14.8 9.2l-5.6 5.6' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");   /* puce ✕ des listes (masque) */
  --tag-carte-y: -14px;           /* étiquette de carte : débord en haut */
  --tag-carte-x: -10px;           /* étiquette de carte : débord à gauche */
  --logos-h: 100px;               /* bande de logos : hauteur des logos (ordinateur) */
  --logos-h-mobile: 48px;         /* bande de logos : hauteur des logos (téléphone) */
  --logos-duree-par-logo: 6.25s;  /* bande de logos : passage d'un logo ; un tour = cette durée × nombre de logos (75 s pour 12) */
  --gfs-logos-n: 12;              /* bande de logos : nombre de logos ; valeur de secours, l'extension gfs-logos pose le vrai nombre sur la bande */
  --ico-cat-taille: 18px;        /* icône de catégorie dans le bandeau des cartes Ressources */
  --len: 999px;                  /* longueur d’un tracé, mesurée par gfs-icones.js (défaut long = trait plein si non mesuré) */
  --ico-taille: 32px;                                /* taille dans les pastilles de 70px */
  --ico-trait: 1.5;                                  /* épaisseur du trait (unités de la grille 24) */
  --ico-c-trait: var(--c-accent, #7A5BC2);           /* couleur du trait */
  --ico-c-accent: var(--c-cta, #FFB347);             /* couleur des points et traits orange */
  --ico-aplat: rgba(var(--c-accent-rgb, 122,91,194), .18); /* aplat décalé */
  --ico-decal: 1.5px;                                /* décalage de l'aplat au repos */
  --ico-decal-survol: 2.5px;                         /* décalage de l'aplat au survol */
  --ico-duree: .35s;                                 /* durée des transitions de survol */
  --ico-duree-apparition: .7s;                       /* durée du tracé à l'apparition */
  --ico-ease: cubic-bezier(.3,.7,.4,1);
  --ico-duree-trait: .9s;      /* temps du tracé violet */
  --ico-cascade: .12s;         /* écart entre deux icônes voisines */
  --motif-c: var(--c-accent, #7A5BC2);       /* couleur des liaisons */
  --motif-c-atome: var(--c-cta, #FFB347);    /* couleur des atomes */
  --motif-opacite: .14;                      /* liaisons */
  --motif-opacite-atome: .45;                /* atomes */
  --motif-taille: 135.10px 156.00px;               /* taille d'une tuile (agrandir = maille plus large) */
  --motif-fondu: radial-gradient(ellipse 70% 80% at 100% 0%, var(--masque-plein) 0%, transparent 70%); /* zone visible */
  --motif-coin-zone: 640px 520px;   /* heros : taille de la zone du réseau, depuis le coin haut droit */
  --motif-debord-haut: 200px;       /* heros : le réseau remonte sous l’en-tête jusqu’en haut de la page (marge large : la section commence entre 120 et 190 px) */
  --motif-pied-zone: max(180px, min(1000px, 50vw - 120px)) 760px;   /* largeur liée à l'écran : le centre (texte, bouton) reste dégagé */  /* bandeau sombre + pied de page : zone du réseau, depuis le coin bas droit du pied */
  --motif-pied-hauteur: 185px;
  --motif-fondu-haut: radial-gradient(max(120px, min(620px, 50vw - 220px)) min(460px, 55vw) at 0% 0%, var(--masque-plein) 0%, transparent 100%);   /* bandeau sombre : second départ, coin haut gauche */
  --motif-opacite-sombre: .14;     /* intensité du réseau sur fond sombre (bandeau + pied) */     /* hauteur du pied de page (pour que le bandeau prolonge le même dégradé) */
  --motif-duree: 90s;                        /* dérive lente (variante --anime) */
  --p404-illu: 180px;        /* taille de l'illustration */
  --p404-flotte: 4s;         /* rythme du flottement de l'atome */
  --p404-amplitude: 4px;     /* écart du flottement */
  /* Fond du haut de l'accueil (gfs-portfolio 0.4.0) */
  --c-fond-page-rgb: 246,240,239;   /* beige du fond des pages (réglé dans Astra), pour le voile */
  --fond-fondu: 1.6s;               /* durée du fondu entre deux images (le rythme est dans gfs-portfolio) */
  --fond-zoom-debut: 1.04;          /* zoom lent sur chaque image : départ… */
  --fond-zoom-fin: 1.04;            /* …et arrivée. Même valeur = pas de zoom (21/10 : le zoom faisait trembloter l'image derrière le panneau verre). Ancienne valeur : 1.12 */
  --fond-zoom-duree: 9s;
}

/* ================================================================================
   (0) BASE / RESET / OVERLAY GLOBAL
   ================================================================================ */
body {
    position: relative;
    z-index: 0;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;   /* rendu de police net (macOS/WebKit), ex-section (12) */
}
p:last-child { margin-bottom: 0 !important; }
/* Texture grain : calque fixe DERRIÈRE le contenu, peint sur le fond beige du body.
   Implémenté en body::before (et NON via un <div id="grainy-bg"> dans le HTML) : toujours
   présent sur toutes les pages, impossible à supprimer par erreur, rien à coller dans Elementor.
   Marche parce que le beige est porté par body (position:relative + z-index:0 ci-dessus) :
   le fond du body se peint, puis ce calque en z-index:-1 par-dessus, puis tout le contenu. */
body::before {
  content: "";
  position: fixed;
  inset: 0;                       /* plein écran sans 100vw (évite le débord de scrollbar) */
  background-image: url('https://graphismeforscience.fr/wp-content/uploads/2026/06/texture-grain-tile-v2.webp');
  background-repeat: repeat;
  background-size: 200px 200px;   /* plus petit = grain plus fin */
  background-position: top left;
  opacity: 0.08;                  /* visibilité sur le beige : 0.12 discret → 0.25+ marqué. Le grain étant DERRIÈRE le contenu, monter l'opacité ne gêne pas la lecture */
  z-index: -1;                    /* au-dessus du fond beige du body, derrière tout le contenu */
  pointer-events: none;
}
/* ================================================================================
   (1) LARGEURS UNIFIÉES (échelle : 1200 / 960 / 720)
   Largeur max + centrage UNIQUEMENT. Marges latérales = Elementor.
   ================================================================================ */
/* Largeur 1100 + centrage : .gfs-container ET tous les wrappers de section qui
   répétaient cet idiome (dédupliqués → la largeur de page vit ICI uniquement).
   Chaque wrapper ne garde plus que ce qui lui est propre (padding, fond, marge basse). */
.gfs-container,
.about-section, .values-section, .workspace-section, .networks-section,
.contact-section, .resources-hero-section, .process-section, .pricing-info-section,
.faq-bento-section, .services-section,
.page-diag .diag-hero-section, .page-diag .diag-section, .page-diag .cta-final-section,
.page-diag .faq-bento-section
                       { width: 100%; max-width: var(--gfs-w);        margin: 0 auto; }
.gfs-container--medium { width: 100%; max-width: var(--gfs-w-medium); margin: 0 auto; }
.gfs-container--etroit { width: 100%; max-width: var(--gfs-w-etroit); margin: 0 auto; }
/* ---------- GOUTTIÈRE LATÉRALE (garde-fou) ----------
   À poser en "Classe CSS" (Avancé) sur le CONTENEUR d'une section HTML maison qui
   n'a pas de wrapper interne à padding. Garantit la même respiration latérale que
   les autres sections, et qu'aucun contenu ne colle au bord (surtout sur mobile).
   Inutile sur les sections déjà construites avec un wrapper interne (gfs-container
   + padding de composant). !important = override du padding de section Elementor.
   Astuce : combinable avec .gfs-container pour gérer largeur + gouttière d'un coup. */
.gfs-gutter { padding-left: var(--sp-4) !important; padding-right: var(--sp-4) !important; }
/* ---------- GRILLES À COLONNES ÉGALES — SET CANONIQUE ----------
   Deux familles couvrent toutes les grilles régulières du site. Les classes de page
   (values-grid, workspace-gallery, services-grid → 3 col ;
    audience-grid-static, process-flow-grid, page-diag features-grid → 4 col) sont des
   ALIAS : la grille de base vit ICI ; leur responsive propre reste colocalisé avec
   chaque composant (donc inchangé). */
.gfs-grid--3, .values-grid, .workspace-gallery, .services-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4);
}
.gfs-grid--4, .audience-grid-static, .process-flow-grid, .page-diag .features-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4);
}
/* ================================================================================
   (2) ENCADRÉ VERRE (composant générique)
   Style verre UNIQUEMENT (pas de largeur). Poser .gfs-glass sur un conteneur.
   Largeur = réglage indépendant (Elementor ou .gfs-container*).
   ================================================================================ */
.gfs-glass {
    position: relative;
    z-index: 10;                 /* passe au-dessus de l'animation Hero si présente */
    padding: var(--sp-6) var(--sp-5);
    text-align: center;
    background-color: var(--glass-1);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid var(--c-border-glass);
    border-radius: var(--r-glass);
    box-shadow:
        0 20px 50px rgba(var(--c-texte-rgb), 0.05),
        inset 0 0 0 1px rgba(var(--c-carte-rgb), 0.2);
}
@media (max-width: 1024px) {
    .gfs-glass { padding: var(--sp-5) var(--sp-5); border-radius: var(--r-glass-2); }
}
@media (max-width: 768px) {
    .gfs-glass { padding: var(--sp-5) var(--sp-4); border-radius: var(--r-lg); }
}
/* Variante de verre du CTA final "Un projet scientifique…" (À propos) : même style,
   mais largeur ÉTROITE centrée → homogène avec le CTA final du Diagnostic. */
.gfs-glass--plein { max-width: var(--gfs-w-etroit); margin-left: auto; margin-right: auto; }
/* ================================================================================
   (3) TYPOGRAPHIE & TITRES
   ================================================================================ */
/* ---------- Titre de page (plein) — CANONIQUE .h1-page ----------
   Fusion de : .h1-about · .h1-contact · .h1-resources · .h1-services · .h1-diag.
   Centré par défaut. Contact = exception alignée à gauche (layout 2 colonnes). */
/* .h1-page + ALIAS des anciennes classes (h1-about/contact/resources/services/diag)
   pour que les titres gardent leur style sans toucher aux classes dans WordPress. */
.h1-page,
.h1-about, .h1-contact, .h1-resources, .h1-services, .h1-diag {
    font-family: var(--font-titre);
    font-size: var(--fs-h1);
    line-height: 1.15;
    color: var(--c-texte);
    text-align: center;
    margin-bottom: var(--sp-4);
}
.h1-page .highlight, .h1-about .highlight, .h1-contact .highlight,
.h1-resources .highlight, .h1-services .highlight, .h1-diag .highlight { color: var(--c-cta); font-style: normal; }
@media (max-width: 1024px) { .h1-page, .h1-about, .h1-contact, .h1-resources, .h1-services, .h1-diag { font-size: var(--fs-h2b); } }
@media (max-width: 768px)  { .h1-page, .h1-about, .h1-contact, .h1-resources, .h1-services, .h1-diag { font-size: var(--fs-h2); } }
/* ---------- Titre de page (dégradé) — CANONIQUE .h1-page--gradient ----------
   Ex-.h1-portfolio. S'accompagne de .title-underline (centré dans .gfs-glass). */
.h1-page--gradient,
.h1-portfolio {
    font-family: var(--font-titre);
    font-size: var(--fs-h1);
    line-height: 1.1;
    margin: 0 0 var(--sp-4) 0;
    text-align: center;
    background: linear-gradient(135deg, var(--c-texte) 20%, var(--c-accent) 80%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; color: var(--c-texte);        /* fallback */
    filter: drop-shadow(0 2px 0px rgba(var(--c-carte-rgb), 0.5));
}
@media (max-width: 768px) { .h1-page--gradient, .h1-portfolio { font-size: var(--fs-h2); } }
.title-underline {
    width: 60px; height: 3px; margin: 0 auto;
    background: linear-gradient(90deg, var(--c-cta), var(--c-accent));
    border-radius: 2px; opacity: 0.8;
}
/* Centrage robuste, indépendant de la largeur donnée par Elementor au widget :
   sur la fiche projet, .title-underline est posé seul dans un widget HTML
   (hors .gfs-glass). Si l'enveloppe du widget se réduit à la largeur de son
   contenu au lieu d'occuper toute la colonne (comportement par défaut de
   certains widgets HTML Elementor), margin:auto seul n'a aucun espace libre
   pour centrer : l'enveloppe entière se colle à gauche. On force donc
   l'enveloppe elle-même à occuper 100% et à centrer son contenu.
   :has() = override Elementor documenté, large support navigateur en 2026. */
.elementor-widget-container:has(> .title-underline),
.elementor-widget-wrap:has(> .title-underline) {
    width: 100% !important; display: flex !important; justify-content: center !important;
}
/* ---------- H2 (dégradé éditorial) ---------- */
.h2-lab, .h2-lab .elementor-heading-title, .h2-lab h2 {
    font-family: var(--font-titre) !important; font-weight: 700 !important;
    font-size: var(--fs-h1b) !important; line-height: 1.2 !important;
    text-transform: none !important; letter-spacing: -0.5px !important;
    background: linear-gradient(120deg, var(--c-texte) 40%, var(--c-accent) 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; color: transparent;
    position: relative !important; padding-left: 0 !important;
    display: inline-block !important; margin-bottom: var(--sp-4) !important;
}
.h2-lab .elementor-heading-title {
    margin-bottom: 0 !important; padding-left: 0 !important;
    border-left: none !important; display: block !important; height: auto !important;
}
/* Titres de section TOUS centrés (homogène). Bloc à largeur de contenu + marges
   auto : centre le titre sans étirer le dégradé. (Override de l'inline-block.) */
.h2-lab {
    display: block !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
@media (max-width: 768px) {
    .h2-lab, .h2-lab .elementor-heading-title, .h2-lab h2 { font-size: var(--fs-h2) !important; }
}
/* ---------- En-tête de section (réutilisable) ----------
   Dédupliqué : il existait 3 définitions (50px / 60px / 60px) ; 60px s'applique. */
.section-header   { text-align: center; margin-bottom: var(--sp-6); }
/* .section-subtitle retiré (0 usage) → rôle couvert par .section-sub (section 7, en-tête complet) */
.section-spacer { height: var(--sp-8); }   /* respiration entre grandes sections (100px) */
/* ---------- En-tête de section complet (.section-head : étiquette + titre + sous-titre, centrés) ---------- */
.section-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto var(--sp-6);
    padding: 0 var(--sp-4);
}
.section-head .hero-tag { margin-bottom: var(--sp-4); }
.section-head h2 {
    font-family: var(--font-titre); font-weight: 400;
    font-size: var(--fs-h1b); line-height: 1.15;
    color: var(--c-texte); margin: 0 0 var(--sp-3);
}
.section-head h2 .acc { color: var(--c-accent); }   /* fond clair → violet (l'orange ne ressort pas) ; orange réservé aux blocs sombres .about-copy / .final-cta */
.section-head .section-sub {
    font-family: var(--font-corps);
    font-size: var(--fs-md); line-height: 1.6;
    color: var(--c-texte-2); margin: 0;
}
@media (max-width: 768px) {
    .section-head { margin-bottom: var(--sp-5); }
    .section-head h2 { font-size: var(--fs-h3); }
}
/* ================================================================================
   (4) BOUTONS
   ================================================================================ */
/* ---------- .cta-principal (orange plein) ---------- */
.cta-principal .elementor-button {
    background: var(--c-cta) !important; color: var(--c-carte) !important;
    font-family: var(--font-corps); font-weight: 700 !important;
    text-transform: none !important; letter-spacing: 0.3px; font-size: var(--fs-ui-base) !important;
    
    padding: var(--pad-btn) !important; border-radius: var(--r-pill) !important;
    border: 2px solid var(--c-cta) !important;
    box-shadow: var(--shadow-cta), inset 0 2px 4px rgba(var(--c-carte-rgb),0.2) !important;
    display: flex !important; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
    transition: all var(--t-slow) var(--ease) !important; z-index: 1;
}
.cta-principal .elementor-button:hover {
    background: var(--c-carte) !important; color: var(--c-cta) !important; border-color: var(--c-carte) !important;
    transform: translateY(-3px);
    box-shadow: var(--shadow-cta-hover), inset 0 0 0 1px rgba(var(--c-cta-rgb),0.1) !important;
}
.cta-principal .elementor-button::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(var(--c-carte-rgb),0.4), transparent);
    transition: none; z-index: -1;
}
.cta-principal .elementor-button:hover::before { left: 100%; transition: all var(--t-slow) ease-in-out; }
/* ---------- a.cta-principal (variante lien <a> : hero scindé, CTA final, carte tarifaire) ----------
   Pendant de a.cta-secondary déjà présent. Nécessaire car le hero scindé / le CTA final sont
   des widgets HTML autonomes, pas des boutons Elementor. */
a.cta-principal {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--c-cta) !important; color: var(--c-carte) !important;
    font-family: var(--font-corps); font-weight: 700 !important;
    text-transform: none !important; letter-spacing: 0.3px; font-size: var(--fs-ui-base) !important;
    text-decoration: none;

    padding: var(--pad-btn) !important; border-radius: var(--r-pill) !important;
    border: 2px solid var(--c-cta) !important;
    box-shadow: var(--shadow-cta), inset 0 2px 4px rgba(var(--c-carte-rgb),0.2) !important;
    position: relative; overflow: hidden;
    transition: all var(--t-slow) var(--ease) !important; z-index: 1;
}
a.cta-principal:hover {
    background: var(--c-carte) !important; color: var(--c-cta) !important; border-color: var(--c-carte) !important;
    transform: translateY(-3px);
    box-shadow: var(--shadow-cta-hover), inset 0 0 0 1px rgba(var(--c-cta-rgb),0.1) !important;
}
a.cta-principal::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(var(--c-carte-rgb),0.4), transparent);
    transition: none; z-index: -1;
}
a.cta-principal:hover::before { left: 100%; transition: all var(--t-slow) ease-in-out; }
/* Modificateur pleine largeur (ex. bouton de la carte tarifaire Diagnostic). */
a.cta-principal.full-width { width: 100%; }
/* ---------- .cta-secondary (verre clair) ---------- */
.cta-secondary .elementor-button,
.cta-secondary .elementor-button .elementor-button-text,
.portfolio-project-template .btn-secondary {   /* fiche projet : même composant secondaire (lien <a>) */
    background: rgba(var(--c-texte-rgb),0.03) !important; color: var(--c-texte) !important;
    font-family: var(--font-corps); font-weight: 600 !important;
    text-transform: none !important; letter-spacing: 0.3px; font-size: var(--fs-ui-base) !important;
}
.cta-secondary .elementor-button,
.portfolio-project-template .btn-secondary {
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    
    padding: var(--pad-btn) !important; border-radius: var(--r-pill) !important;
    border: 1px solid rgba(var(--c-texte-rgb),0.15) !important;
    box-shadow: 0 2px 10px rgba(var(--c-noir-rgb),0.02), inset 0 2px 4px rgba(var(--c-carte-rgb),0.5) !important;
    display: flex !important; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
    transition: all var(--t-slow) var(--ease) !important; z-index: 1;
}
/* Reflet qui balaie au survol (identique à a.cta-secondary). */
.cta-secondary .elementor-button::before,
.portfolio-project-template .btn-secondary::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(var(--c-carte-rgb),0.2), transparent);
    transition: none; z-index: -1;
}
.cta-secondary .elementor-button:hover::before,
.portfolio-project-template .btn-secondary:hover::before { left: 100%; transition: all var(--t-slow) ease; }
/* Survol ORANGE + ombre, calé exactement sur a.cta-secondary (était violet/accent). */
.cta-secondary .elementor-button:hover,
.cta-secondary .elementor-button:hover .elementor-button-text,
.portfolio-project-template .btn-secondary:hover {
    background: rgba(var(--c-texte-rgb),0.06) !important; color: var(--c-cta) !important;
    border-color: rgba(var(--c-cta-rgb),0.5) !important;
}
.cta-secondary .elementor-button:hover,
.portfolio-project-template .btn-secondary:hover { transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(var(--c-texte-rgb),0.08), inset 0 2px 4px rgba(var(--c-carte-rgb),0.8) !important; }
.cta-secondary .elementor-button:hover i,
.cta-secondary .elementor-button:hover svg,
.portfolio-project-template .btn-secondary:hover i,
.portfolio-project-template .btn-secondary:hover svg {
    color: var(--c-cta) !important; fill: var(--c-cta) !important; transform: scale(1.1);
}
/* ---------- .cta-secondary-dark (verre sur fond sombre) ---------- */
.cta-secondary-dark .elementor-button,
.cta-secondary-dark .elementor-button .elementor-button-text { color: var(--c-carte) !important; }
.cta-secondary-dark .elementor-button {
    background: rgba(var(--c-carte-rgb),0.05) !important;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    font-family: var(--font-corps); font-weight: 600 !important;
    text-transform: none !important; letter-spacing: 0.3px; font-size: var(--fs-ui-base) !important;
    
    padding: var(--pad-btn) !important; border-radius: var(--r-pill) !important;
    border: 1px solid rgba(var(--c-carte-rgb),0.2) !important;
    box-shadow: 0 4px 20px rgba(var(--c-noir-rgb),0.2), inset 0 1px 3px rgba(var(--c-carte-rgb),0.1) !important;
    display: flex !important; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
    transition: all var(--t-slow) var(--ease) !important; z-index: 1;
}
.cta-secondary-dark .elementor-button i,
.cta-secondary-dark .elementor-button svg {
    color: var(--c-carte) !important; fill: var(--c-carte) !important; transition: all var(--t-slow) ease;
}
.cta-secondary-dark .elementor-button:hover {
    background: rgba(var(--c-carte-rgb),0.1) !important; border-color: rgba(var(--c-cta-rgb),0.8) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--c-noir-rgb),0.3), inset 0 0 0 1px rgba(var(--c-cta-rgb),0.1) !important;
}
.cta-secondary-dark .elementor-button:hover,
.cta-secondary-dark .elementor-button:hover .elementor-button-text { color: var(--c-cta) !important; }
.cta-secondary-dark .elementor-button:hover i,
.cta-secondary-dark .elementor-button:hover svg {
    color: var(--c-cta) !important; fill: var(--c-cta) !important; transform: scale(1.1);
}
/* ---------- a.cta-secondary-dark (variante lien <a> sur fond sombre) ---------- */
a.cta-secondary-dark {
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(var(--c-carte-rgb),0.06); color: var(--c-carte) !important;
    font-family: var(--font-corps); font-weight: 600; font-size: var(--fs-ui-base);
    text-decoration: none;

    padding: var(--pad-btn); border-radius: var(--r-pill);
    border: 1px solid rgba(var(--c-carte-rgb),0.35);
    transition: all var(--t-base) ease;
}
a.cta-secondary-dark:hover {
    color: var(--c-cta) !important; border-color: var(--c-cta);
    background: rgba(var(--c-carte-rgb),0.1);
    transform: translateY(-2px);
}
/* Responsive boutons (ex-767px → 768px) */
@media (max-width: 768px) {
    .cta-secondary .elementor-button,
    .cta-secondary-dark .elementor-button,
    .portfolio-project-template .btn-secondary { padding: var(--sp-3) var(--sp-4) !important; font-size: var(--fs-ui-md) !important; }
    .cta-principal .elementor-button { padding: var(--sp-3) var(--sp-4) !important; font-size: var(--fs-ui-md) !important; }
}
/* ---------- .cta-modern (effet fiole : liquide qui monte + bulles en continu) ----------
   Bulles présentes au repos (faibles), intensifiées au survol ; le "liquide" orange
   remplit la pastille au survol. Couleur unique CTA (plus de virage vers l'accent).
   NB : les !important du bloc sont des overrides Elementor (cf. en-tête de section). */
.cta-modern .elementor-button {
    background: rgba(var(--c-carte-rgb),0.05) !important;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    color: var(--c-texte) !important;                 /* foncé = lisible quand le liquide monte */
    font-weight: 700 !important; text-transform: none !important;
    letter-spacing: 0.5px; font-size: var(--fs-ui-base) !important;
    padding: var(--sp-3) var(--sp-5) !important; border-radius: var(--r-pill) !important;
    border: 1.5px solid rgba(var(--c-cta-rgb),0.3) !important;
    box-shadow:
        0 4px 15px rgba(var(--c-noir-rgb),0.05),
        inset 0 4px 6px rgba(var(--c-carte-rgb),0.6),
        inset 0 -4px 10px rgba(var(--c-cta-rgb),0.1) !important;
    display: flex !important; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
    transition: all var(--t-slow) ease !important; z-index: 1;
}
.cta-modern .elementor-button-content-wrapper { position: relative; z-index: 10 !important; }
/* LIQUIDE — fond d'orange qui remplit la "fiole" au survol (.elementor-button::before) */
.cta-modern .elementor-button::before {
    content: '' !important; display: block !important; position: absolute;
    left: 0; right: 0; bottom: 0; height: 22%;        /* niveau de repos (effet, en %) */
    background: linear-gradient(180deg, rgba(var(--c-cta-rgb),0.55), rgba(var(--c-cta-rgb),0.9));
    box-shadow: inset 0 2px 0 rgba(var(--c-carte-rgb),0.4);   /* ménisque clair en surface */
    pointer-events: none; z-index: 0;
    transition: height var(--t-slow) var(--ease);
}
.cta-modern .elementor-button:hover::before { height: 100%; }   /* la fiole se remplit */
/* BULLES — deux grappes qui montent en continu (button::after + wrapper::before) */
.cta-modern .elementor-button::after,
.cta-modern .elementor-button-content-wrapper::before {
    content: '' !important; display: block !important; position: absolute;
    border-radius: var(--r-full); pointer-events: none;
}
.cta-modern .elementor-button::after {
    width: 4px; height: 4px; background: var(--c-cta); bottom: -10px; left: 30%; z-index: 1;
    opacity: 0.35; animation: bubble-rise-organic 4s infinite linear;
    box-shadow: 15px 15px 0 rgba(var(--c-cta-rgb),0.7),
                45px 5px 0 rgba(var(--c-cta-rgb),0.4),
                -25px 20px 0 rgba(var(--c-cta-rgb),0.6);
}
.cta-modern .elementor-button-content-wrapper::before {
    width: 7px; height: 7px; bottom: -20px; left: 50%; z-index: -1;
    background: rgba(var(--c-cta-rgb),0.3); border: 1px solid rgba(var(--c-cta-rgb),0.5);
    opacity: 0.28; animation: bubble-rise-organic 5s infinite linear; animation-delay: 1s;
    box-shadow: -35px 15px 0 rgba(var(--c-cta-rgb),0.2),
                20px 25px 0 rgba(var(--c-cta-rgb),0.3),
                -10px 40px 0 rgba(var(--c-cta-rgb),0.1);
}
.cta-modern .elementor-button:hover {
    color: var(--c-texte) !important;                 /* reste lisible sur l'orange */
    border-color: rgba(var(--c-cta-rgb),0.7) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(var(--c-cta-rgb),0.18),
                0 0 0 4px rgba(var(--c-cta-rgb),0.1),            /* halo doux */
                inset 0 2px 10px rgba(var(--c-carte-rgb),0.6) !important;
}
.cta-modern .elementor-button:hover::after { opacity: 0.85; animation-duration: 2s; }
.cta-modern .elementor-button:hover .elementor-button-content-wrapper::before { opacity: 0.6; animation-duration: 3s; }
.cta-modern .elementor-button i,
.cta-modern .elementor-button svg {
    color: var(--c-texte) !important; fill: var(--c-texte) !important; transition: all var(--t-slow) ease !important;
}
@keyframes bubble-rise-organic {
    0%   { transform: translateY(0) translateX(0) scale(0.7); opacity: 0; }
    15%  { opacity: 0.7; }
    33%  { transform: translateY(-25px) translateX(8px) scale(1); }
    66%  { transform: translateY(-50px) translateX(-8px) scale(0.9); }
    85%  { opacity: 0.7; }
    100% { transform: translateY(-90px) translateX(5px) scale(1.2); opacity: 0; }
}
@media (max-width: 768px) {
    .cta-modern .elementor-button { padding: var(--sp-3) var(--sp-4) !important; font-size: var(--fs-ui-md) !important; }
    /* Mobile : pas de survol (donc pas de remplissage) → on fige les bulles pour
       épargner batterie/CPU. Le fond de liquide au repos (22%) reste, en statique. */
    .cta-modern .elementor-button::after,
    .cta-modern .elementor-button-content-wrapper::before { animation: none; }
}
/* Accessibilité : « réduire les animations » → bulles figées sur tous les écrans. */
@media (prefers-reduced-motion: reduce) {
    .cta-modern .elementor-button::after,
    .cta-modern .elementor-button-content-wrapper::before { animation: none; }
    .cta-modern .elementor-button::before { transition: none; }
}
/* ---------- .cta-secondary sur lien <a> (hors widget Elementor) ---------- */
a.cta-secondary {
    background: rgba(var(--c-texte-rgb), 0.03) !important;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    color: var(--c-texte) !important;
    font-family: var(--font-corps); font-weight: 600 !important;
    text-transform: none !important; letter-spacing: 0.3px; font-size: var(--fs-ui-base) !important;
    text-decoration: none;
    
    padding: var(--pad-btn) !important; border-radius: var(--r-pill) !important;
    border: 1px solid rgba(var(--c-texte-rgb), 0.15) !important;
    box-shadow: 0 2px 10px rgba(var(--c-noir-rgb),0.02), inset 0 2px 4px rgba(var(--c-carte-rgb),0.5) !important;
    display: inline-flex !important; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
    transition: all var(--t-slow) var(--ease) !important; z-index: 1;
}
a.cta-secondary:hover {
    background: rgba(var(--c-texte-rgb), 0.06) !important;
    color: var(--c-cta) !important; border-color: rgba(var(--c-cta-rgb), 0.5) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(var(--c-texte-rgb), 0.08), inset 0 2px 4px rgba(var(--c-carte-rgb),0.8) !important;
}
a.cta-secondary::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(var(--c-carte-rgb),0.2), transparent);
    transition: none; z-index: -1;
}
a.cta-secondary:hover::before { left: 100%; transition: all var(--t-slow) ease; }
/* ================================================================================
   (5) HERO & ÉTIQUETTES
   ================================================================================ */
/* ---------- Étiquette — SET CANONIQUE .gfs-tag ----------
   UNE base + 4 modificateurs couvrent tous les usages. Les anciennes classes
   (.hero-tag, .bento-tag, .price-tag, .service-badge…) sont ALIAS : rien à
   changer dans WordPress pour que ça reste stylé.
     défaut    → pill blanc, texte accent (hero, portfolio)
     --ghost   → teinte accent, sans fond plein (prix Diagnostic, bento accent)
     --neutral → gris (étiquette bento par défaut)
     --solid   → plein orange, marqueur fort (badge « Cœur de métier ») — distinct, voulu
     --on-dark → verre sur fond sombre (À propos)
   Géométrie commune : Inter 700, --fs-ui-xs, uppercase, pill. */
.gfs-tag,
.hero-tag, .hero-tag-badge, .portfolio-tag,
.bento-tag, .page-diag .price-tag, .service-badge,
.gfs-li-card__tag {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    width: fit-content;
    padding: var(--sp-2) var(--sp-3); border-radius: var(--r-pill);
    font-family: var(--font-corps); font-weight: 700;
    font-size: var(--fs-ui-xs); text-transform: uppercase; letter-spacing: 1px;
}
/* Icône dans une étiquette (grammaire visuelle, section 11) : à la taille du texte, remplace les emojis */
:is(.gfs-tag, .hero-tag, .hero-tag-badge, .portfolio-tag, .bento-tag, .price-tag, .service-badge) > .gfs-ico { --ico-taille: 1.6em; margin-block: -.3em; }
/* défaut : fond blanc net, texte accent */
.gfs-tag,
.hero-tag, .hero-tag-badge, .portfolio-tag {
    background: var(--c-carte); color: var(--c-accent);
    border: 1px solid rgba(var(--c-accent-rgb), 0.2);
    box-shadow: var(--shadow-tag);
    margin-bottom: var(--sp-4);
}
/* --ghost : teinte accent, sans fond plein ni bordure */
.gfs-tag--ghost,
.page-diag .price-tag,
.card-expert .bento-tag, .card-collab .bento-tag,
.gfs-li-card__tag {
    background: rgba(var(--c-accent-rgb), 0.1); color: var(--c-accent);
}
/* --neutral : gris discret (étiquette bento par défaut) */
.gfs-tag--neutral,
.bento-tag {
    background: rgba(var(--c-texte-rgb), 0.05); color: var(--c-texte-2);
}
/* --solid : plein orange, marqueur fort (distinct, conservé) */
.gfs-tag--solid,
.service-badge {
    background: var(--c-cta); color: var(--c-carte);
    align-self: center; margin-inline: auto; margin-bottom: var(--sp-3);
}
/* --on-dark : verre translucide sur fond sombre */
.gfs-tag--on-dark,
.about-copy .hero-tag {
    background: rgba(var(--c-carte-rgb), 0.1); color: var(--c-carte);
    border: 1px solid rgba(var(--c-carte-rgb), 0.25); box-shadow: none;
}
/* --bare : intitulé « eyebrow » SANS capsule (texte seul, garde casse + lettrage).
   La couleur vient du contexte : combiner avec --on-dark (blanc) sur fond sombre,
   sinon couleur par défaut (accent) sur fond clair. Doit rester APRÈS --on-dark. */
.gfs-tag--bare {
    background: none; border: none; box-shadow: none;
    padding: 0; margin-bottom: var(--sp-3);
}
/* --center : modificateur opt-in pour centrer une étiquette isolée dans un
   widget HTML Elementor (ex. « Étude de cas » en tête de fiche projet), là où
   aucun text-align:center n'est hérité d'un parent (audit Fab, juillet 2026). */
.gfs-tag--center { display: flex; margin-left: auto; margin-right: auto; }
/* Centrage robuste de l'enveloppe elle-même (même logique que .title-underline
   plus haut) : si le widget qui contient .gfs-tag--center se réduit à la
   largeur de son contenu au lieu d'occuper la colonne, margin:auto seul n'a
   aucun espace libre pour centrer — l'enveloppe entière se colle à gauche. */
.elementor-widget-container:has(> .gfs-tag--center),
.elementor-widget-wrap:has(> .gfs-tag--center) {
    width: 100% !important; display: flex !important; justify-content: center !important;
}
/* ---------- Hero Accueil : conteneur ----------
   Ex-« CSS personnalisé » Pro du conteneur Hero de l'accueil (selector { position: relative; }). */
.elementor-element-0a90b6b { position: relative; }
/* ---------- Hero Accueil : titre H1 (spécifique, spans dégradé/highlight) ---------- */
.hero-section-title { text-align: center; margin-bottom: var(--sp-4); }
.hero-section-title h1 {
    font-family: var(--font-titre); font-size: var(--fs-h1);
    line-height: 1.15; color: var(--c-texte); margin: 0; font-weight: 700;
}
.hero-section-title h1 .highlight { color: var(--c-cta); font-style: normal; }
.hero-section-title h1 .text-gradient {
    background: linear-gradient(120deg, var(--c-texte), var(--c-accent));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; color: transparent;
}
@media (max-width: 768px) {
    .hero-section-title h1 { font-size: var(--fs-h2); }
}
/* ---------- Hero : texte d'intro ---------- */
.hero-section-text { text-align: center; margin-bottom: var(--sp-5); padding: 0 var(--sp-4); }
.hero-description {
    font-family: var(--font-corps); font-size: var(--fs-lg); line-height: 1.6;
    color: var(--c-texte-2); max-width: 768px; margin: 0 auto; font-weight: 400;
}
.hero-description strong { color: var(--c-texte); font-weight: 700; }
@media (max-width: 768px) {
    .hero-description { font-size: var(--fs-md); line-height: 1.5; }
}
/* ---------- Séparateur moléculaire (ligne fine + point orange central) ----------
   Utilisé site-wide (Hero, Ressources, À propos…). Remonté ici depuis les articles. */
.sep-molecular {
    display: block;
    width: 100%;
    max-width: var(--gfs-w);              /* auto-contraint à la largeur de contenu (1100) */
    height: var(--sep-trait);
    /* la ligne part du centre (gfs-icones.js) ; sans script, elle est entière */
    background: linear-gradient(to right,
        rgba(var(--c-texte-rgb), 0.15) calc(50% - var(--sep-vide)),
        transparent 0 calc(50% + var(--sep-vide)),
        rgba(var(--c-texte-rgb), 0.15) 0) center / 100% 100% no-repeat;   /* ligne coupée au centre */
    margin: var(--sp-7) auto;             /* centré, même dans un conteneur pleine largeur */
    position: relative;
    overflow: visible;
    transition: background-size var(--sep-duree) var(--ico-ease);
}
/* Centre : hexagone de la grammaire visuelle (trait violet + aplat décalé) autour du point orange.
   La ligne est coupée au centre (--sep-vide) : plus besoin de halo, le motif marche sur tous les fonds. */
.sep-molecular::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: var(--sep-hexa); height: var(--sep-hexa);
    transform: translate(-50%, -50%);
    background-color: var(--c-accent);
    -webkit-mask: var(--sep-hexa-trace) center / contain no-repeat;
            mask: var(--sep-hexa-trace) center / contain no-repeat;
    z-index: 1;
    transition: transform var(--ico-duree-apparition) var(--ico-ease) .25s, opacity var(--ico-duree-apparition) ease .25s;
}
.sep-molecular::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: var(--sep-point); height: var(--sep-point);
    background: var(--c-cta);
    border-radius: var(--r-full);
    z-index: 2;
    transition: transform .45s cubic-bezier(.3,1.6,.5,1) .6s;
}
/* Apparition (si gfs-icones.js a posé .ico-js) : la ligne s'ouvre depuis le centre,
   l'hexagone tourne en place, puis le point arrive. */
.ico-js .sep-molecular:not(.is-visible) { background-size: 0% 100%; }
.ico-js .sep-molecular:not(.is-visible)::before { transform: translate(-50%, -50%) rotate(-60deg) scale(.6); opacity: 0; }
.ico-js .sep-molecular:not(.is-visible)::after { transform: translate(-50%, -50%) scale(0); }
@media (prefers-reduced-motion: reduce) {
    .sep-molecular, .sep-molecular::before, .sep-molecular::after { transition: none; }
}
/* ---------- Hero scindé (accueil : 2 colonnes texte | animation) ----------
   Réutilise du global : .hero-tag · .hero-section-title · .hero-description ·
   .cta-secondary · .gfs-container · a.cta-principal (section 4). */
/* Layout scindé (texte | bloc animation) */
.hero-split {
    display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-6); align-items: center;
    width: 100%; max-width: var(--gfs-w); margin: 0 auto; padding: var(--sp-5) var(--sp-4) 0;
}
.hero-split .hero-copy { text-align: left; }
.hero-split .hero-section-title { text-align: left; margin-bottom: var(--sp-4); }
.hero-split .hero-description { text-align: left; max-width: 34ch; margin: 0 0 var(--sp-5); }
.hero-cta-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* Mot accentué « net » (alternative sobre au .text-gradient ; violet = accent charte).
   Pour revenir au dégradé bleu→violet, remplace .hero-accent par .text-gradient dans le HTML. */
.hero-accent { color: var(--c-accent); font-style: normal; }

/* Bloc animation cadré (le dégradé / l'effet verre se concentrent ICI) */
.hero-anim-block {
    position: relative; height: 440px; border-radius: var(--r-glass-2); overflow: hidden;
    background: linear-gradient(150deg, var(--grad-hero-1) 0%, var(--grad-hero-2) 38%, var(--grad-hero-3) 100%);
    border: 1px solid rgba(var(--c-carte-rgb),0.5);
    box-shadow: 0 30px 70px rgba(var(--c-texte-rgb),0.22);
}

/* ---------- FOND DU HAUT DE L'ACCUEIL (gfs-portfolio 0.4.0, 21/10/2026) ----------
   Les images à la une des dernières réalisations se succèdent en fondu derrière le premier
   écran de l'accueil, sur ordinateur. Le calque #gfs-fond-accueil et la classe
   body.gfs-fond-actif sont posés par gfs-portfolio. Maquette v3 validée par Émilie :
   voile « fondu vers le bas », panneau verre léger sous le texte, panneau et bloc des
   cellules à la même hauteur. Réglages : tokens --fond-* et --c-fond-page-rgb du :root. */
#gfs-fond-accueil { position: absolute; left: calc(50% - 50vw); width: 100vw; z-index: -1; overflow: hidden; pointer-events: none; }
#gfs-fond-accueil .gfs-fond__image {
    position: absolute; inset: 0; background-size: cover; background-position: center;
    opacity: 0; transform: scale(var(--fond-zoom-debut)); transition: opacity var(--fond-fondu) ease;
}
#gfs-fond-accueil .gfs-fond__image.is-on { opacity: 1; animation: gfsFondZoom var(--fond-zoom-duree) linear forwards; }
@keyframes gfsFondZoom { from { transform: scale(var(--fond-zoom-debut)); } to { transform: scale(var(--fond-zoom-fin)); } }
#gfs-fond-accueil .gfs-fond__voile {
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(var(--c-fond-page-rgb),.15) 0%, rgba(var(--c-fond-page-rgb),.55) 55%, rgba(var(--c-fond-page-rgb),1) 100%),
        linear-gradient(90deg, rgba(var(--c-fond-page-rgb),.85), rgba(var(--c-fond-page-rgb),.1) 70%);
}
@media (prefers-reduced-motion: reduce) { #gfs-fond-accueil .gfs-fond__image.is-on { animation: none; } }
@media (min-width: 1025px) {
    body.gfs-fond-actif .hero-split { align-items: stretch; gap: var(--sp-4); grid-template-columns: 1.12fr .88fr; }
    body.gfs-fond-actif .hero-split .hero-copy {
        display: flex; flex-direction: column; justify-content: center; padding: var(--sp-5) var(--sp-4);
        background: var(--glass-2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
        border: 1px solid var(--c-border-glass); border-radius: var(--r-glass-2); box-shadow: var(--shadow-glass);
    }
    body.gfs-fond-actif .hero-anim-block { height: auto; min-height: 440px; }
}

/* Responsive : on empile sous 1024px (l'animation JS ne tourne pas < 1025px) */
@media (max-width: 1024px) {
    .hero-split { grid-template-columns: 1fr; gap: var(--sp-5); padding-top: var(--sp-4); }
    .hero-split .hero-copy,
    .hero-split .hero-section-title,
    .hero-split .hero-description { text-align: center; }
    .hero-split .hero-description { max-width: 768px; margin-left: auto; margin-right: auto; }
    .hero-cta-row { justify-content: center; }
    .hero-anim-block { height: 300px; }
}
/* ================================================================================
   (6) COMPOSANTS DE PAGE
   ================================================================================ */
/* ================= (6.0) CARTES — SET CANONIQUE =================
   UNE seule recette de carte. Les anciens noms (.content-card, .value-card,
   .process-card, .info-card, .feature-card, .bento-card, .stat-card,
   .contact-card, .review-card, .audience-card-static, .distinction-card,
   a.service-card, .highlight-card, .card-expert/.card-collab,
   .pricing-card-glass, .service-card--feat) sont des ALIAS de ce set : AUCUN
   renommage à faire dans Elementor. Pour une carte NEUVE, utiliser .gfs-card
   (+ modificateurs --glass / --accent / --dark / --compact / --interactive).
   Le padding et le layout interne restent gérés par chaque composant.
   ------------------------------------------------------------------------------
   BLANCHE (défaut) — fond plein, rayon lg, ombre de repos sm. */
.gfs-card,
.content-card, .value-card, .process-card, .info-card,
.feature-card, .bento-card, .stat-card,
.contact-card, .review-card,
.gfs-li-card {
    background: var(--c-carte);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
}
.gfs-card { padding: var(--pad-card); }        /* défaut d'une carte neuve */
.gfs-card--compact { padding: var(--sp-4); }   /* carte dense (étape, feature, stat) */
/* VERRE — sur fond animé / visuel. */
.gfs-card--glass,
.audience-card-static, .distinction-card, a.service-card {
    background: var(--glass-1);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border: 1px solid var(--c-border-glass);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
}
/* ACCENT — gradient violet doux (mise en valeur). Modificateur OU carte pleine. */
.gfs-card--accent,
.highlight-card, .card-expert, .card-collab,
.page-diag .pricing-card-glass {
    background: linear-gradient(135deg, var(--c-carte) 0%, var(--c-carte-violet) 100%);
    border-color: rgba(var(--c-accent-rgb), 0.1);
}
/* DARK — rupture sombre (carte « phare »). Sur un alias verre, l'override
   utilise !important dans son propre bloc (.service-card--feat) car le verre
   y est plus spécifique. */
.gfs-card--dark {
    background: var(--c-texte);
    border: 1px solid var(--c-texte);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
}
/* INTERACTIVE — hover (lift + montée d'ombre) pour cartes neuves cliquables.
   Les alias historiques cliquables gardent leur :hover dans leur bloc. */
.gfs-card--interactive, .gfs-li-card { transition: transform var(--t-base) ease, box-shadow var(--t-base) ease; }
.gfs-card--interactive:hover, .gfs-li-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
/* ================= (6.0 bis) LISTES — SET CANONIQUE =================
   UNE famille .gfs-list. Les anciens noms (.detailed-list, .value-list,
   .service-list, .article-list (+ .check-list / .list-avoid), .collab-list,
   .page-diag .check-list-large, .page-diag .price-features,
   .page-diag .detailed-list) sont des ALIAS de ce set : AUCUN renommage à faire
   dans Elementor. Pour une liste NEUVE, utiliser .gfs-list + UN marqueur :
     --bullet   (• orange, liste simple)
     --detailed (puce ronde 8px + <strong>titre</strong> + <p>desc</p>)
     --bar      (barre gauche orange + titre/desc, ton sobre)
     --icon     (pastille verre .v-icon + titre/desc)
     --check    (✓ vert « à faire »)  /  --avoid (✕ rouge « à éviter »)
     --plain    (sans marqueur)
   Modificateur de taille : --lg (grand format, fs-md). Marqueurs exclusifs.
   La densité/espacement interne reste gérée par le composant (comme les cartes).
   ------------------------------------------------------------------------------ */
/* RESET commun à toutes les listes */
.gfs-list,
.detailed-list, .value-list, .service-list, .article-list, .collab-list,
.page-diag .check-list-large, .page-diag .price-features, .page-diag .detailed-list {
    list-style: none; padding: 0; margin: 0;
}

/* ---- --bullet : puce • orange (listes simples) ---- */
.gfs-list--bullet > li,
.article-list > li,
.collab-list > li {
    position: relative; padding-left: var(--sp-4); margin-bottom: var(--sp-2);
    font-family: var(--font-corps);
}
.gfs-list--bullet > li::before,
.article-list > li::before,
.collab-list > li::before {
    content: '•'; color: var(--c-cta); font-weight: bold; font-size: var(--fs-lg);
    position: absolute; left: 0; top: -2px;
}
/* collab-list : densité compacte + texte secondaire (ex-list-style:disc, unifié sur •) */
.collab-list { font-size: var(--fs-sm); color: var(--c-texte-2); margin-top: var(--sp-3); }
.collab-list > li { margin-bottom: var(--sp-1); }
/* service-list : même marqueur •, densité « carte service » + filet haut */
.service-list {
    padding-top: var(--sp-4); margin-bottom: var(--sp-4);
    border-top: 1px solid var(--c-border); text-align: left;
}
.service-list li {
    font-family: var(--font-corps); font-size: var(--fs-sm); color: var(--c-texte);
    margin-bottom: var(--sp-2); padding-left: var(--sp-3); position: relative;
}
.service-list li::before {
    content: '•'; color: var(--c-cta); position: absolute; left: 0; font-weight: bold;
}
/* sous-liste imbriquée (tiret) — éditorial */
.gfs-list--bullet ul, .article-list ul {
    list-style: none; padding-left: var(--sp-4);
    margin-top: var(--sp-1); margin-bottom: var(--sp-3);
}
.gfs-list--bullet ul li, .article-list ul li {
    padding-left: var(--sp-4); font-size: 0.95em; color: var(--c-texte-2);
}
.gfs-list--bullet ul li::before, .article-list ul li::before {
    content: '-'; color: var(--c-texte-2); font-weight: normal; font-size: var(--fs-base); top: 0;
}

/* ---- --check (coche) / --avoid (croix) : icônes de la grammaire visuelle ---- */
.gfs-list--check > li::before,
.article-list.check-list > li::before {
    content: ''; width: 1.15em; height: 1.15em; top: .2em;
    background-color: var(--c-succes);
    -webkit-mask: var(--ico-coche-masque) center / contain no-repeat;
            mask: var(--ico-coche-masque) center / contain no-repeat;   /* coche de la grammaire visuelle (ex-caractère ✓) */
}
.gfs-list--avoid > li::before,
.article-list.list-avoid > li::before {
    content: ''; width: 1.15em; height: 1.15em; top: .2em;
    background-color: var(--c-erreur);
    -webkit-mask: var(--ico-croix-masque) center / contain no-repeat;
            mask: var(--ico-croix-masque) center / contain no-repeat;   /* croix de la grammaire visuelle (ex-caractère ✕) */
}
.gfs-list--check > li, .article-list.check-list > li,
.gfs-list--avoid > li, .article-list.list-avoid > li { padding-left: calc(1.15em + var(--sp-2)); }   /* place de l'icône */
/* check-list grand format (ex-.check-list-large) */
.gfs-list--check.gfs-list--lg > li,
.page-diag .check-list-large li {
    font-family: var(--font-corps); font-size: var(--fs-md); color: var(--c-texte-2);
    margin-bottom: var(--sp-3); padding-left: calc(1.4em + var(--sp-2)); position: relative; line-height: 1.6;   /* place de la coche */
}
.gfs-list--check.gfs-list--lg > li::before,
.page-diag .check-list-large li::before {
    content: ''; width: 1.4em; height: 1.4em; background-color: var(--c-succes);
    -webkit-mask: var(--ico-coche-masque) center / contain no-repeat;
            mask: var(--ico-coche-masque) center / contain no-repeat;
    position: absolute; left: 0; top: 0;
}

/* ---- --detailed : puce ronde 8px + titre/desc ---- */
.gfs-list--detailed > li, .detailed-list > li {
    padding-left: var(--sp-4); position: relative; margin-bottom: var(--sp-4);
}
.gfs-list--detailed > li::before, .detailed-list > li::before {
    content: ''; position: absolute; left: 0; top: 7px;
    width: 8px; height: 8px; border-radius: var(--r-full); background: var(--c-cta);
}

/* ---- --bar : barre gauche orange + titre/desc (ton sobre, ex-Diagnostic) ---- */
.gfs-list--bar > li, .page-diag .detailed-list li {
    margin-bottom: var(--sp-4); padding-left: var(--sp-4);
    border-left: 3px solid rgba(var(--c-cta-rgb), 0.3);
}
/* Alias historique : .page-diag .detailed-list EST un .detailed-list, donc on
   neutralise la puce ronde héritée (sinon barre + puce). !important conservé
   (pont d'alias, pas un nouveau). Une liste NEUVE en .gfs-list--bar n'en a pas besoin. */
.page-diag .detailed-list > li::before { display: none !important; content: none !important; }

/* ---- --icon : pastille verre .v-icon + titre/desc ---- */
.gfs-list--icon > li, .value-list li {
    display: flex; gap: var(--sp-3); align-items: flex-start; margin-bottom: var(--sp-4);
}
.gfs-list--icon > li:last-child, .value-list li:last-child { margin-bottom: 0; }
.v-icon {
    font-size: 22px; flex-shrink: 0;
    width: 48px; height: 48px; border-radius: var(--r-full);
    background: var(--glass-3);
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-icon);
    border: 1px solid rgba(var(--c-carte-rgb), 0.5);
}
/* Icônes line-art dans la pastille (remplacent les emojis) — même style que .service-icon svg */
.v-icon svg {
    width: 24px; height: 24px;
    fill: none; stroke: var(--c-accent);
    stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

/* ---- contenu structuré <strong> + <p> (détaillé / icône) ---- */
.gfs-list--detailed strong, .gfs-list--icon strong,
.detailed-list strong, .value-list strong {
    display: block; font-family: var(--font-corps); font-weight: 700;
    color: var(--c-texte); font-size: var(--fs-base); margin-bottom: var(--sp-1);
}
.gfs-list--detailed p, .gfs-list--icon p,
.detailed-list p, .value-list p {
    font-family: var(--font-corps); color: var(--c-texte-2); font-size: var(--fs-sm);
    line-height: 1.55; margin: 0;
}
/* --bar : titre/desc sobres (ex-Diagnostic) */
.gfs-list--bar strong, .page-diag .detailed-list strong {
    display: block; font-family: var(--font-corps); color: var(--c-texte); margin-bottom: var(--sp-1);
}
.gfs-list--bar p, .page-diag .detailed-list p {
    font-family: var(--font-corps); color: var(--c-texte-2); font-size: var(--fs-ui); margin: 0;
}

/* ---- --plain : liste sans marqueur (ex-.price-features) ---- */
.page-diag .price-features {
    margin: 0 0 var(--sp-4) 0; text-align: left; display: inline-block;
}
.page-diag .price-features li {
    margin-bottom: var(--sp-2); font-family: var(--font-corps); color: var(--c-texte-2);
}
.page-diag .price-features li { display: flex; align-items: center; gap: var(--sp-2); }
.page-diag .price-features li > .gfs-ico { --ico-taille: 1.3em; }   /* coche de la grammaire visuelle (ex-emoji ✅) */
/* ================= PAGE À PROPOS =================
   Réutilise : .gfs-container · .gfs-glass · .hero-tag · .hero-description ·
   .h2-lab · .sep-molecular · .h1-page (ex-.h1-about). */
.about-section, .values-section, .workspace-section, .networks-section {
    margin-bottom: var(--sp-8);   /* largeur + centrage : set canonique .gfs-container */
}
.about-hero-content {
    padding: var(--sp-7) var(--sp-4) var(--sp-5) var(--sp-4);
    max-width: 900px; margin: 0 auto; text-align: center;
}
/* Cartes de contenu (Clean Lab) — recette = set canonique (BLANCHE) ; ici padding seul. */
.content-card { padding: var(--pad-card); }
/* Paragraphe d'accroche en tête de carte (ex-style inline page Diagnostic). */
.card-lead { font-size: var(--fs-md); margin-bottom: var(--sp-4); }
/* .highlight-card → set canonique (ACCENT) */
.text-center { text-align: center !important; }
.text-content p {
    font-family: var(--font-corps); font-size: var(--fs-md); color: var(--c-texte-2);
    line-height: 1.8; margin-bottom: var(--sp-4);
}
.text-content strong { color: var(--c-texte); font-weight: 600; }
.highlight-quote {
    font-family: var(--font-titre) !important;
    font-size: var(--fs-2xl) !important; color: var(--c-accent) !important;
    border-left: 4px solid var(--c-cta); padding-left: var(--sp-4);
    margin: var(--sp-4) 0; font-style: italic;
}
/* Phrase d'accroche (exergue) du bloc Parcours : emphase éditoriale, PAS une citation
   (ni guillemets ni bordure : la page est déjà tout en « je »). */
.about-lead {
    font-family: var(--font-titre); font-size: var(--fs-2xl);
    color: var(--c-accent); line-height: 1.3; margin: 0 0 var(--sp-4);
}
/* Valeurs (grille 3 colonnes) — alias .gfs-grid--3 (set canonique, section 1) */
.value-card { padding: var(--sp-5) var(--sp-4); text-align: center; }   /* recette = set canonique (BLANCHE) */
.value-icon {
    font-size: 40px; margin-bottom: var(--sp-4);
    background: rgba(var(--c-cta-rgb),0.1); width: 80px; height: 80px;
    border-radius: var(--r-full); display: flex; align-items: center; justify-content: center;
    margin-left: auto; margin-right: auto;
}
.value-card h3 {
    font-family: var(--font-titre); font-size: var(--fs-xl); color: var(--c-texte); margin-bottom: var(--sp-3);
}
.value-card p {
    font-family: var(--font-corps); font-size: var(--fs-ui); color: var(--c-texte-2); line-height: 1.5;
}
/* Pictos line-art des cartes valeurs (sinon fill noir par défaut → rond plein).
   Aligné sur .feature-icon svg / .icon-wrapper-static svg. Remplace l'ancien
   bloc en dur body.page-id-28850 (à retirer d'Elementor). */
.value-icon svg {
    width: 34px; height: 34px;
    fill: none; stroke: var(--c-accent);
    stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
/* Carte vedette sombre (= .gfs-card--dark appliqué à la carte du milieu) */
.value-card--feat { background: var(--c-texte); border-color: var(--c-texte); box-shadow: var(--shadow-lg); }
.value-card--feat h3 { color: var(--c-carte); }
.value-card--feat p  { color: var(--c-texte-clair); }
.value-card--feat .value-icon { background: rgba(var(--c-carte-rgb),0.10); }
.value-card--feat .value-icon svg { stroke: var(--c-cta); }
/* Espace de travail (galerie photos) */
.workspace-intro { max-width: 800px; margin: 0 auto var(--sp-5) auto; text-align: center; }
.workspace-intro p {
    font-family: var(--font-corps); font-size: var(--fs-md); color: var(--c-texte-2); line-height: 1.6;
}
/* .workspace-gallery → alias .gfs-grid--3 (set canonique, section 1) */
.gallery-item {
    border-radius: var(--r-sm); overflow: hidden;
    box-shadow: var(--shadow-md);
    height: 300px;
}
/* Galerie non cliquable → aucun effet de survol (ni lift ni transition). */
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Réseaux professionnels */
.networks-section { text-align: center; }
.networks-section p { font-family: var(--font-corps); color: var(--c-texte-2); margin-bottom: var(--sp-5); }
.networks-grid { display: flex; justify-content: center; gap: var(--sp-4); flex-wrap: wrap; }
a.network-badge {
    background: var(--c-carte); border: 1px solid var(--c-border);
    /* Rayon carte (24) au lieu de pill : le badge contient un nom + une description
       sur 2-3 lignes, le rayon pill le déformait en ovale. */
    border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4);
    display: flex; flex-direction: column; align-items: center;
    min-width: 240px; text-decoration: none; position: relative;
    transition: transform var(--t-base) ease, border-color var(--t-base) ease, box-shadow var(--t-base) ease;
}
a.network-badge:hover {
    transform: translateY(-3px); border-color: var(--c-accent);
    box-shadow: 0 8px 20px rgba(var(--c-accent-rgb),0.1);
}
.net-name {
    font-family: var(--font-corps); font-weight: 700; color: var(--c-texte); font-size: var(--fs-lg);
    transition: color var(--t-base) ease;
}
a.network-badge:hover .net-name { color: var(--c-accent); }
.net-desc {
    font-family: var(--font-corps); font-size: var(--fs-xs); color: var(--c-texte-2);
    margin-top: var(--sp-1); max-width: 250px;
}
.net-arrow {
    margin-top: var(--sp-2); font-size: var(--fs-lg); color: var(--c-cta); opacity: 0; transform: translateY(5px);
    transition: all var(--t-base) ease;
}
a.network-badge:hover .net-arrow { opacity: 1; transform: translateY(0); }
@media (max-width: 1024px) {
    .content-card { padding: var(--sp-5); }
    /* Palier tablette manquant : la grille valeurs passe en 2 colonnes, comme les
       autres grilles du site (audience 4->2, process 4->2). Avant : restait en 3
       colonnes serrées de 769 à 768 px. */
    .values-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .values-grid, .workspace-gallery { grid-template-columns: 1fr; }
    .content-card { padding: var(--sp-5) var(--sp-4); }
    .gallery-item { height: 250px; }
    .about-section, .values-section, .workspace-section, .networks-section { margin-bottom: var(--sp-6); }
}

/* ================= À PROPOS / MON PARCOURS (accueil) — section sombre scindée =================
   Fond sombre posé dans Elementor. */
/* Layout scindé : photo | texte */
.about-split {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--sp-6);
    align-items: center;
    padding: var(--sp-4) 0;
}

/* Photo (coins arrondis, ombre douce) */
.about-photo {
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(var(--c-noir-rgb),0.30);
    background: radial-gradient(120% 120% at 50% 38%, var(--grad-orb-1) 0%, var(--grad-orb-2) 55%, var(--c-texte) 100%);
}
.about-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Texte sur fond sombre */
.about-copy { color: var(--c-texte-clair); }
/* .about-copy .hero-tag → SET CANONIQUE .gfs-tag (--on-dark). Défini en
   section (5) HERO & ÉTIQUETTES. */
.about-copy h2 {
    font-family: var(--font-titre); font-weight: 400;
    font-size: var(--fs-h2b); line-height: 1.15;
    color: var(--c-carte); margin: 0 0 var(--sp-4);
}
.about-copy h2 .acc { color: var(--c-cta); }
.about-copy p {
    font-family: var(--font-corps);
    font-size: var(--fs-base); line-height: 1.7;
    color: var(--c-texte-clair); margin: 0 0 var(--sp-3);
}
.about-copy p strong { color: var(--c-carte); font-weight: 600; }
.about-cta { margin-top: var(--sp-3); }

/* Responsive */
@media (max-width: 1024px) {
    .about-split { grid-template-columns: 1fr; gap: var(--sp-5); padding-left: var(--sp-4); padding-right: var(--sp-4); }   /* gouttière latérale : ici (après la base .about-split), sinon son "padding: ... 0" l'écrase */
    .about-copy { text-align: center; }
    .about-photo { max-width: 420px; margin: 0 auto; }
    .about-copy h2 { font-size: var(--fs-h3); }
}

/* ================= PAGE CONTACT =================
   .contact-section = largeur 1200. Titre = .h1-page (ex-.h1-contact),
   exception : aligné à gauche (layout 2 colonnes). */
.contact-section { padding: var(--sp-7) var(--sp-4); }   /* largeur + centrage : set canonique .gfs-container */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;   /* Calendly un peu plus large */
    gap: var(--sp-6); align-items: start;
}
.contact-grid .h1-page, .contact-grid .h1-contact { text-align: left; }   /* exception d'alignement Contact */
.contact-desc {
    font-family: var(--font-corps); font-size: var(--fs-md);
    color: var(--c-texte-2); line-height: 1.6; margin-bottom: var(--sp-5); max-width: 450px;
}
.contact-card {   /* recette = set canonique (BLANCHE) ; hover conservé ci-dessous */
    display: flex; align-items: center; gap: var(--sp-4);
    padding: var(--sp-4); text-decoration: none;
    margin-bottom: var(--sp-4); transition: all var(--t-base) ease;
}
.contact-card:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--c-cta-rgb),0.5);
    box-shadow: var(--shadow-md);
}
.contact-icon {
    width: 50px; height: 50px;
    background: rgba(var(--c-cta-rgb),0.1); color: var(--c-cta);
    border-radius: var(--r-full); display: flex; align-items: center; justify-content: center;
    font-size: 24px; flex-shrink: 0;
}
.contact-icon > .gfs-ico { --ico-taille: 28px; }   /* icône courriel de la grammaire visuelle (ex-✉) */
.linkedin-card .contact-icon { background: rgba(var(--c-accent-rgb),0.1); color: var(--c-accent); }
.linkedin-card:hover { border-color: rgba(var(--c-accent-rgb),0.4); }
.contact-details { flex-grow: 1; display: flex; flex-direction: column; }
.contact-details .label {
    font-family: var(--font-corps);
    font-weight: 700; font-size: var(--fs-sm); color: var(--c-texte); margin-bottom: var(--sp-1);
}
.contact-details .value {
    font-family: var(--font-corps); font-size: var(--fs-base); color: var(--c-texte-2);
}
.arrow-icon {
    color: var(--c-texte); font-weight: bold; opacity: 0.3;
    transition: transform var(--t-base) ease, opacity var(--t-base) ease;
}
.contact-card:hover .arrow-icon { opacity: 1; transform: translateX(5px); }
.calendly-wrapper-glass {
    background: var(--c-carte); border: 1px solid var(--c-border);
    border-radius: var(--r-lg); padding: var(--sp-4);
    box-shadow: var(--shadow-glass); overflow: hidden;
}
.calendly-title {
    font-family: var(--font-titre); font-size: var(--fs-3xl);
    color: var(--c-texte); text-align: center; margin-bottom: var(--sp-4);
}
@media (max-width: 1024px) {
    .contact-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
    .calendly-inline-widget { min-width: 100% !important; width: 100% !important; }
}
@media (max-width: 768px) {
    .contact-section { padding: var(--sp-6) var(--sp-3); overflow-x: hidden; }
    .contact-grid .h1-page, .contact-grid .h1-contact { word-wrap: break-word; }
    .calendly-wrapper-glass { padding: var(--sp-2); }
    .email-card .value { display: none; }
    .email-card .contact-details { justify-content: center; }
}
/* ================= PAGE RESSOURCES (garde articles) — HERO =================
   Réutilise : .hero-tag · .hero-description · .sep-molecular.
   Titre = .h1-page (ex-.h1-resources). */
.resources-hero-section {
    padding: 0 var(--sp-4); text-align: center;   /* largeur + centrage : set canonique .gfs-container */
}
/* ================= PAGE RÉALISATIONS — ENCADRÉ D'INTRO =================
   Carte "Clean Lab" sur fond clair (≠ .gfs-glass, volontairement). */
.portfolio-intro-box {
    background: var(--glass-3);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg); padding: var(--sp-5); margin-bottom: var(--sp-5);
    box-shadow: var(--shadow-sm);
    font-family: var(--font-corps); color: var(--c-texte);
}
.portfolio-intro-lead {
    font-family: var(--font-titre); font-size: var(--fs-4xl);
    color: var(--c-texte); margin-bottom: var(--sp-2); line-height: 1.3;
}
.portfolio-intro-sub {
    font-size: var(--fs-md); font-weight: 500; color: var(--c-texte-2);
    margin-bottom: var(--sp-4); padding-left: var(--sp-4);
    border-left: 4px solid var(--c-cta); line-height: 1.5;
}
.portfolio-intro-note {
    display: flex; gap: var(--sp-3); align-items: center; margin-bottom: var(--sp-3);
    font-size: var(--fs-ui); line-height: 1.5; color: var(--c-texte-2);
    background: rgba(var(--c-carte-rgb),0.8); padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-xs); border: 1px solid rgba(var(--c-texte-rgb),0.05);
}
.portfolio-intro-note .icon { line-height: 1; flex-shrink: 0; display: inline-flex; }
.portfolio-intro-note .icon svg {   /* picto line-art : couleur posée en CSS (token), pas en dur dans le markup — aligné sur .value-icon svg */
    width: 22px; height: 22px;
    fill: none; stroke: var(--c-accent);
    stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.portfolio-intro-note strong { color: var(--c-texte); font-weight: 700; }
/* ---------- EN-TÊTE 2 COLONNES : intro (gauche) + piles (droite) ----------
   Les piles ouvrent la visionneuse maison (JS + styles d'ouverture : passe 2).
   Composant pile = set canonique .gfs-pile (réutilisable, extensible à N piles). */
.portfolio-header {
    display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr);
    gap: var(--sp-4); align-items: start; margin-bottom: var(--sp-4);
}
.portfolio-header .portfolio-intro-box { margin-bottom: 0; }
/* Colonne de gauche : intro + notes empilées dessous (remplit l'espace en regard des piles) */
.portfolio-intro-col { display: flex; flex-direction: column; gap: var(--sp-4); }
/* Notes discrètes, empilées sous l'intro */
.portfolio-intro-notes { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: 0; }
.portfolio-intro-notes .portfolio-intro-note { margin-bottom: 0; }
/* Grille des piles : s'adapte automatiquement, visuels agrandis (sans encart) */
.portfolio-piles {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: var(--sp-4); align-content: start;
}
/* Plus d'encart : la pile est une simple zone cliquable, les visuels priment. */
.gfs-pile {
    display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
    font-family: var(--font-corps); color: var(--c-texte);
    cursor: pointer; text-align: center;
    transition: transform var(--t-base) var(--ease);
    /* .gfs-pile est un <button> : Astra + Elementor lui imposent un style de bouton
       (fond, bordure orange, padding) via des sélecteurs plus spécifiques
       (.elementor-kit-… button, 0,1,1). !important assumé et documenté (RÈGLE 5)
       pour neutraliser ce chrome — la pile n'est pas un bouton visuel, juste une
       zone cliquable ; ce sont les visuels qui priment. */
    background: none !important; border: 0 !important; box-shadow: none !important;
    padding: var(--sp-2) !important; border-radius: var(--r-lg) !important;
}
.gfs-pile:hover { transform: translateY(-4px); }
.gfs-pile:focus-visible { outline: none; box-shadow: var(--ring-focus); }
/* Éventail agrandi : cartes superposées, décalées + inclinées */
.gfs-pile__stack { position: relative; display: block; width: 100%; height: 320px; margin-bottom: var(--sp-1); }
.gfs-pile__stack img {
    position: absolute; top: 50%; left: 50%;
    width: 200px; height: 188px; object-fit: cover;
    border-radius: var(--r-xs); border: 3px solid var(--c-carte);
    box-shadow: var(--shadow-md);
    transform: translate(-50%,-50%) rotate(0deg);
    transition: transform var(--t-base) var(--ease);
}
.gfs-pile__stack img:nth-child(1) { transform: translate(-72%,-50%) rotate(-9deg); z-index: 1; }
.gfs-pile__stack img:nth-child(2) { transform: translate(-28%,-50%) rotate(9deg);  z-index: 2; }
.gfs-pile__stack img:nth-child(3) { transform: translate(-50%,-53%) rotate(0deg);  z-index: 3; }
.gfs-pile__stack img:nth-child(n+4) { display: none; }   /* affichées = 3 ; les autres restent en DOM pour la visionneuse */
.gfs-pile__stack img:only-child { transform: translate(-50%,-50%) rotate(0deg); }   /* pile à 1 visuel */
.gfs-pile__stack img:first-child:nth-last-child(2)       { transform: translate(-66%,-50%) rotate(-7deg); z-index: 1; }   /* pile à 2 visuels */
.gfs-pile__stack img:first-child:nth-last-child(2) ~ img { transform: translate(-34%,-50%) rotate(7deg);  z-index: 2; }
.gfs-pile:hover .gfs-pile__stack img:nth-child(1), .gfs-pile:focus-visible .gfs-pile__stack img:nth-child(1) { transform: translate(-84%,-50%) rotate(-13deg); }
.gfs-pile:hover .gfs-pile__stack img:nth-child(2), .gfs-pile:focus-visible .gfs-pile__stack img:nth-child(2) { transform: translate(-16%,-50%) rotate(13deg); }
.gfs-pile__label { font-family: var(--font-titre); font-size: var(--fs-xl); line-height: 1.2; color: var(--c-texte); }
.gfs-pile__count { font-size: var(--fs-ui-xs); color: var(--c-texte-2); }
/* Pile « à venir » (gabarit non cliquable) : garde un cadre en pointillés,
   puisque les piles actives n'en ont plus. */
.gfs-pile--soon {
    cursor: default; background: var(--glass-1);
    border: 1px dashed var(--c-border); border-radius: var(--r-lg);
    padding: var(--sp-4);
}
.gfs-pile--soon:hover { transform: none; }
.gfs-pile--soon .gfs-pile__stack { display: flex; align-items: center; justify-content: center; }
.gfs-pile__soon { font-size: var(--fs-h3); color: var(--c-texte-2); line-height: 1; }
@media (prefers-reduced-motion: reduce) {
    .gfs-pile, .gfs-pile__stack img { transition: none; }
    .gfs-pile:hover, .gfs-pile:focus-visible { transform: none; }
    .gfs-pile:hover .gfs-pile__stack img:nth-child(1), .gfs-pile:focus-visible .gfs-pile__stack img:nth-child(1) { transform: translate(-72%,-50%) rotate(-9deg); }
    .gfs-pile:hover .gfs-pile__stack img:nth-child(2), .gfs-pile:focus-visible .gfs-pile__stack img:nth-child(2) { transform: translate(-28%,-50%) rotate(9deg); }
}
/* ================= VISIONNEUSE MAISON DES PILES (lightbox — passe 2) =================
   Ouverte au clic sur une .gfs-pile ; le DOM est injecté en fin de <body> par le JS
   du bloc portfolio. Défilement ←/→, Échap et focus-trap gérés en JS ; ici : styles,
   ouverture (classe .is-open) et transitions. Scrim posé sur --c-texte-rgb (charte). */
.gfs-lightbox {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    padding: var(--sp-4);
    background: rgba(var(--c-texte-rgb),0.9);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    opacity: 0; visibility: hidden;
    transition: opacity var(--t-base) var(--ease), visibility var(--t-base) var(--ease);
}
.gfs-lightbox.is-open { opacity: 1; visibility: visible; }
.gfs-lightbox__backdrop { position: absolute; inset: 0; cursor: pointer; }
.gfs-lightbox__dialog {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
    width: 100%; max-width: var(--gfs-w-medium); max-height: 90vh;
    padding: var(--sp-5);
    background: var(--c-carte); border-radius: var(--r-glass-2);
    box-shadow: var(--shadow-glass);
    transform: translateY(12px) scale(0.98);
    transition: transform var(--t-base) var(--ease);
}
.gfs-lightbox.is-open .gfs-lightbox__dialog { transform: none; }
.gfs-lightbox__figure {
    margin: 0; width: 100%; min-height: 0;
    display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
}
.gfs-lightbox__img {
    display: block; max-width: 100%; max-height: 62vh;
    object-fit: contain; border-radius: var(--r-xs); box-shadow: var(--shadow-md);
}
.gfs-lightbox__caption {
    font-family: var(--font-corps); font-size: var(--fs-ui);
    color: var(--c-texte-2); text-align: center; line-height: 1.5;
}
.gfs-lightbox__footer {
    display: flex; align-items: center; justify-content: center;
    gap: var(--sp-4); flex-wrap: wrap; width: 100%;
}
.gfs-lightbox__counter { font-size: var(--fs-ui-xs); color: var(--c-texte-2); }
/* Bouton « Voir le projet » = bouton CTA existant du site (a.cta-principal, posé en JS).
   On garde seulement le masquage : a.cta-principal force display:inline-flex, ce qui
   écraserait l'attribut [hidden] sans ce garde-fou (spécificité plus forte ici). */
.gfs-lightbox__project[hidden] { display: none; }
/* Boutons ronds : fermeture (haut-droite) + navigation (bords, centrés verticalement).
   Dimensions littérales en px = convention des boutons ronds du site (cf. icônes). */
.gfs-lightbox__close, .gfs-lightbox__nav {
    position: absolute; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0;
    background: var(--c-carte); color: var(--c-texte);
    border: 1px solid var(--c-border); border-radius: var(--r-full);
    box-shadow: var(--shadow-sm); cursor: pointer;
    font-size: 22px; line-height: 1;
    transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.gfs-lightbox__close:hover, .gfs-lightbox__nav:hover {
    color: var(--c-accent); border-color: rgba(var(--c-accent-rgb),0.35); box-shadow: var(--shadow-md);
}
.gfs-lightbox__close:focus-visible, .gfs-lightbox__nav:focus-visible {
    outline: none; box-shadow: var(--shadow-md), var(--ring-focus); border-color: rgba(var(--c-accent-rgb),0.35);
}
.gfs-lightbox__close { top: var(--sp-2); right: var(--sp-2); }
.gfs-lightbox__nav { top: calc(50% - 22px); }   /* 22px = moitié de la hauteur du bouton */
.gfs-lightbox__nav:hover { transform: scale(1.06); }
.gfs-lightbox__nav--prev { left: var(--sp-2); }
.gfs-lightbox__nav--next { right: var(--sp-2); }
.gfs-lightbox__nav[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
    .gfs-lightbox, .gfs-lightbox__dialog,
    .gfs-lightbox__close, .gfs-lightbox__nav { transition: none; }
    .gfs-lightbox__dialog { transform: none; }
    .gfs-lightbox__nav:hover { transform: none; }
}
/* Visionneuse sur téléphone : padding resserré, image moins haute (le compteur et
   le bouton « Voir le projet » restent visibles sans rognage), flèches aux bords. */
@media (max-width: 768px) {
    .gfs-lightbox { padding: var(--sp-3); }
    .gfs-lightbox__dialog { padding: var(--sp-4); max-height: 92vh; }
    .gfs-lightbox__img { max-height: 54vh; }
    .gfs-lightbox__close { top: var(--sp-1); right: var(--sp-1); }
    .gfs-lightbox__nav--prev { left: var(--sp-1); }
    .gfs-lightbox__nav--next { right: var(--sp-1); }
}
.portfolio-hero-section { margin: 0 auto; padding: var(--sp-5) var(--sp-4); text-align: center; }
/* Conteneur verre du hero projet (rapatrié du bloc inline du template projet).
   Variante "verre" proche de .gfs-glass mais centrage flex. Sur Diagnostic,
   .page-diag .hero-glass-container (plus spécifique) garde sa propre version. */
.hero-glass-container {
    background: var(--glass-1);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(var(--c-carte-rgb), 0.6);
    border-radius: var(--r-glass);
    padding: var(--sp-6) var(--sp-5);
    box-shadow: var(--shadow-glass);
    display: flex; flex-direction: column; align-items: center;
}
@media (max-width: 768px) { .hero-glass-container { padding: var(--sp-5) var(--sp-4); } }
@media (max-width: 1024px) {
    .portfolio-intro-box { padding: var(--sp-4); }
    .portfolio-header { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .portfolio-intro-box { padding: var(--sp-4) var(--sp-4); }
    .portfolio-intro-lead { font-size: var(--fs-xl); }
    .portfolio-intro-note { align-items: flex-start; padding: var(--sp-3); }
    .portfolio-intro-note .icon { margin-top: var(--sp-1); }
}
/* ================= CARTES AUDIENCE (glassmorphism) =================
   Breakpoint resserré : ex-600px → 768px (1 colonne sur téléphone). */
.audience-grid-static {   /* grille = alias .gfs-grid--4 (set canonique) ; largeur/centrage propres */
    width: 100%; max-width: var(--gfs-w); margin: 0 auto; align-items: stretch;   /* 1100 : même largeur que les offres et le reste de la page */
}
.audience-card-static {   /* recette = set canonique (VERRE) */
    padding: var(--sp-5) var(--sp-3); text-align: center;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.icon-wrapper-static {
    font-size: 32px; margin-bottom: var(--sp-4); background: var(--glass-3);
    width: 70px; height: 70px; line-height: 70px; border-radius: var(--r-full);
    box-shadow: var(--shadow-icon);
    border: 1px solid rgba(var(--c-carte-rgb),0.5);
    /* centrage flex pour le SVG line-art (override volontaire du line-height ci-dessus) */
    display: flex; align-items: center; justify-content: center;
}
.audience-card-static h3 {
    font-family: var(--font-titre); color: var(--c-texte);   /* Marcellus comme tous les titres de carte */
    font-size: var(--fs-md); margin: 0 0 var(--sp-2) 0; line-height: 1.3;
}
.card-detail-static {
    font-family: var(--font-corps); font-size: var(--fs-sm); color: var(--c-texte-2);
    margin: 0; line-height: 1.4;
}
@media (max-width: 1024px) {
    .audience-grid-static { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
}
@media (max-width: 768px) {
    .audience-grid-static { grid-template-columns: 1fr; }
    .audience-card-static { padding: var(--sp-4) var(--sp-4); background: var(--glass-2); }
}

/* ================= POUR QUI (accueil) : 4 publics, cartes non cliquables =================
   Réutilise .audience-grid-static / .audience-card-static / .icon-wrapper-static (ci-dessus,
   centrage flex du SVG désormais fusionné dans le bloc unique .icon-wrapper-static). */
.icon-wrapper-static svg {
    width: 32px; height: 32px;
    fill: none; stroke: var(--c-accent);
    stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

/* Cartes : même hauteur ET mêmes espacements internes (override de specificité plus haute).
   Contenu calé en haut => icônes alignées ; hauteur de titre commune => sous-titres alignés. */
.audience-grid-static .audience-card-static {
    min-height: 240px;
    padding: var(--sp-5) var(--sp-4);
    justify-content: flex-start;
}
.audience-grid-static .audience-card-static h3 {
    min-height: 2.6em;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    margin: 0 0 var(--sp-2) 0;
}
/* Pas de survol : ces cartes ne sont pas des liens. */

/* ================= BANDE DE LOGOS (accueil, marquee) =================
   Extension gfs-logos : shortcode [gfs_logos] dans la SECTION qui porte la classe `logos-band`.
   Les logos se gèrent dans l'admin (Logos clients).
   Réglages : --logos-h, --logos-h-mobile, --logos-duree-par-logo (--gfs-logos-n est posé par l'extension). */
/* La section : fond blanc + respiration, on masque ce qui dépasse */
.logos-band {
    width: 100%;
    background: var(--c-carte);
    padding: var(--sp-6) 0;
    overflow: hidden;
}

/* Sur-titre optionnel « Ils m'ont fait confiance » */
.logos-eyebrow {
    text-align: center;
    font-family: var(--font-corps); font-weight: 600;
    font-size: var(--fs-ui-sm); letter-spacing: 1.4px; text-transform: uppercase;
    color: var(--c-texte-2);
    margin: 0 0 var(--sp-5);
}

/* Piste défilante : une seule ligne, en mouvement continu, deux fois les logos pour boucler sans couture.
   Un tour = --logos-duree-par-logo × nombre de logos : la vitesse reste la même quand on en ajoute. */
.gfs-logos { overflow: hidden; }
.gfs-logos .gfs-logos__piste {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    align-items: center;
    animation: gfs-logos-scroll calc(var(--logos-duree-par-logo) * var(--gfs-logos-n)) linear infinite;
}
.gfs-logos:hover .gfs-logos__piste { animation-play-state: paused; }
.gfs-logos .gfs-logos__item {
    flex: 0 0 auto;
    margin: 0;
    padding: 0 var(--sp-5);
}
/* Logos : taille homogène, en couleur. Sélecteur renforcé : `.elementor img` (height:auto, max-width:100%) passerait devant une seule classe */
.gfs-logos .gfs-logos__item img {
    height: var(--logos-h);
    width: auto;
    max-width: none;
    object-fit: contain;
    display: block;
}

@keyframes gfs-logos-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }   /* droite → gauche (comme les témoignages) */
}

/* Accessibilité : si « réduire les animations » est actif, on fige en grille centrée, sans la seconde série */
@media (prefers-reduced-motion: reduce) {
    .gfs-logos .gfs-logos__piste {
        animation: none;
        flex-wrap: wrap;
        width: auto;
        justify-content: center;
        gap: var(--sp-4) 0;
        max-width: var(--gfs-w);
        margin: 0 auto;
    }
    .gfs-logos .gfs-logos__item--copie { display: none; }
}

/* Responsive */
@media (max-width: 768px) {
    .logos-band { padding: var(--sp-5) 0; }
    .gfs-logos .gfs-logos__item { padding: 0 var(--sp-4); }
    .gfs-logos .gfs-logos__item img { height: var(--logos-h-mobile); }
}

/* ================= TÉMOIGNAGES (carrousel pleine largeur) ================= */
/* 1. CONTENEUR MASQUE — inchangé */
.reviews-marquee-wrapper {
    width: 100%; overflow: hidden; position: relative; padding: var(--sp-5) 0;
    cursor: grab; cursor: -webkit-grab;
    mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
    user-select: none; -webkit-user-select: none;
}
.reviews-marquee-wrapper:active { cursor: grabbing; cursor: -webkit-grabbing; }

/* 2. LE RAIL — inchangé (un peu moins d'écart entre cartes blanches) */
.reviews-track {
    display: flex; gap: var(--sp-4); width: max-content;
    will-change: transform; align-items: stretch; padding: var(--sp-2) 0;
}

/* 3. LA CARTE — NOUVEAU look : carte blanche Direction C */
.review-card {   /* recette = set canonique (BLANCHE) ; largeur fixe, sans survol (non cliquable) */
    width: 360px;
    min-height: 300px; height: auto;
    padding: var(--sp-5) var(--sp-4);
    display: flex; flex-direction: column; justify-content: space-between;
    flex-shrink: 0;
}
/* Pas de survol : cartes non cliquables (le carrousel se met en pause au survol via le JS). */

/* 4. DÉTAILS INTÉRIEURS */
.review-header { display: flex; justify-content: flex-start; align-items: center; margin-bottom: var(--sp-1); }
.review-quote-symbol {
    font-family: var(--font-titre);
    font-size: 52px; color: var(--c-accent);       /* guillemet VIOLET (au lieu d'orange) */
    line-height: 0.5;
}
.review-text {
    font-family: var(--font-corps);       /* (mets 'Marcellus' ici si tu préfères garder le serif) */
    font-size: var(--fs-base); color: var(--c-texte-2);
    line-height: 1.6; font-style: italic;
    margin: var(--sp-3) 0 var(--sp-4) 0; flex-grow: 1;
}
.review-author { display: flex; align-items: center; gap: var(--sp-3); margin-top: auto; }
.review-author h4 {
    margin: 0; font-family: var(--font-corps); font-weight: 600;
    color: var(--c-texte); font-size: var(--fs-ui);
    text-transform: none; letter-spacing: 0;   /* plus de majuscules */
}
.review-author span {
    display: block; font-family: var(--font-corps);
    font-size: var(--fs-xs); color: var(--c-accent);        /* rôle VIOLET */
    margin-top: var(--sp-1);
}

/* MOBILE */
@media (max-width: 768px) {
    .review-card { width: 300px; min-height: 260px; padding: var(--sp-4) var(--sp-4); }
    .reviews-track { gap: var(--sp-3); }
}
/* ================= PROCESS : accompagnement en 4 étapes ================= */
.process-section { padding: 0 var(--sp-4); }   /* largeur + centrage : set canonique .gfs-container */
.process-flow-container { position: relative; margin-top: var(--sp-5); }
.process-track-line {
    position: absolute; top: 30px; left: 8%; right: 8%;
    height: 2px; background: rgba(var(--c-texte-rgb),0.15); z-index: 0;
}
.process-flow-grid {   /* grille = alias .gfs-grid--4 (set canonique) ; empilement propre */
    position: relative; z-index: 1;
}
.process-item { display: flex; flex-direction: column; align-items: center; text-align: center; }
.step-marker {
    width: 60px; height: 60px; border-radius: var(--r-full);
    background: var(--c-cta); color: var(--c-carte);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 18px rgba(var(--c-cta-rgb),0.35);
    border: 4px solid var(--c-fond);      /* halo = fond du site */
    position: relative; z-index: 2;
}
.step-num  { font-family: var(--font-corps); font-weight: 700; font-size: var(--fs-md); }
.step-stem { width: 2px; height: 24px; background: rgba(var(--c-texte-rgb),0.15); }
.process-card { padding: var(--sp-4) var(--sp-4); width: 100%; }   /* recette = set canonique (BLANCHE) */
.process-card h4 {
    font-family: var(--font-corps); font-weight: 700; color: var(--c-texte);
    font-size: var(--fs-md); margin: 0 0 var(--sp-2) 0;
}
.process-card p {
    font-family: var(--font-corps); color: var(--c-texte-2);
    font-size: var(--fs-sm); line-height: 1.5; margin: 0;
}
/* ================= TARIFS & DISTINCTION ================= */
.pricing-info-section { padding: 0 var(--sp-4); }   /* largeur + centrage : set canonique .gfs-container */
.info-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--sp-4); align-items: start; }
/* Colonne gauche : carte blanche */
.info-card { padding: var(--sp-5); }   /* recette = set canonique (BLANCHE) */
/* Titre de carte Tarifs — SET CANONIQUE (.h3-info = alias, défini en colonne droite) */
.h3-card-title,
.h3-info {
    font-family: var(--font-titre); color: var(--c-texte); font-size: var(--fs-4xl); margin: 0 0 var(--sp-3) 0;
}
.intro-text {
    font-family: var(--font-corps); color: var(--c-texte-2); font-size: var(--fs-base);
    line-height: 1.6; margin: 0 0 var(--sp-4) 0;
}
/* 2e accroche après l'encart prix (remplace un margin-top inline du markup) */
.price-indication + .intro-text { margin-top: var(--sp-4); }
/* .detailed-list → voir (6.0 bis) LISTES — SET CANONIQUE (alias de .gfs-list--detailed) */
.price-indication {
    display: flex; gap: var(--sp-3); align-items: flex-start;
    background: rgba(var(--c-cta-rgb),0.08); border: 1px solid rgba(var(--c-cta-rgb),0.25);
    border-radius: var(--r-sm); padding: var(--sp-4); margin-top: var(--sp-4);
}
.price-icon { font-size: 22px; line-height: 1; }
.price-icon { display: inline-flex; }
.price-icon > .gfs-ico { --ico-taille: 26px; }   /* icône tarif (ex-💡) */
.price-indication p {
    font-family: var(--font-corps); color: var(--c-texte); font-size: var(--fs-ui);
    line-height: 1.55; margin: 0;
}
.price-indication strong { color: var(--c-texte); font-weight: 700; }
/* Colonne droite : carte verre */
.distinction-card { padding: var(--sp-5); }   /* recette = set canonique (VERRE) */
/* .h3-info → SET CANONIQUE .h3-card-title (défini en colonne gauche, section Tarifs) */
/* .value-list (+ .v-icon) → voir (6.0 bis) LISTES — SET CANONIQUE (alias de .gfs-list--icon) */
@media (max-width: 1024px) {
    .process-flow-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-5) var(--sp-4); }
    .process-track-line { display: none; }
    .info-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .process-flow-grid { grid-template-columns: 1fr; }
    .info-card, .distinction-card { padding: var(--sp-4) var(--sp-4); }
}
/* ================= SERVICES — FAQ « bento » (masonry 2 colonnes) ================= */
/* .faq-bento-section → largeur + centrage : set canonique .gfs-container */
.bento-masonry { column-count: 2; column-gap: var(--sp-4); width: 100%; }
.bento-card {   /* recette = set canonique (BLANCHE) */
    break-inside: avoid;
    margin-bottom: var(--sp-4);
    padding: var(--sp-5);
    display: flex; flex-direction: column; justify-content: flex-start;
    position: relative; overflow: hidden;
}
.bento-card h4 {
    font-family: var(--font-titre); color: var(--c-texte);
    font-size: var(--fs-2xl); margin: var(--sp-3) 0 var(--sp-2) 0; line-height: 1.25;
}
.bento-card p {
    font-family: var(--font-corps); font-size: var(--fs-ui);
    color: var(--c-texte-2); line-height: 1.6; margin: 0;
}
.bento-card strong { color: var(--c-texte); font-weight: 600; }
/* 2e paragraphe dans une carte bento (remplace un margin-top inline du markup) */
.bento-card p + p { margin-top: var(--sp-3); }
/* .bento-tag → SET CANONIQUE .gfs-tag (--neutral par défaut, --ghost sur
   .card-expert / .card-collab). Défini en section (5) HERO & ÉTIQUETTES. */
/* .collab-list → voir (6.0 bis) LISTES — SET CANONIQUE (alias de .gfs-list--bullet, puce orange) */
@media (max-width: 768px) {
    .bento-masonry { column-count: 1; }
    .bento-card    { padding: var(--sp-4) var(--sp-4); }
}
/* ================= SERVICES — HERO + GRILLE 3 COLONNES =================
   Titre = .h1-page (ex-.h1-services) ; étiquette = .hero-tag (ex-.hero-tag-badge). */
.services-hero-section { text-align: center; }   /* largeur = .gfs-container ; titre = .h1-page */
/* Description : variante services (plus large), scopée pour ne PAS
   écraser le .hero-description global de la home */
.services-hero-section .hero-description {
    font-family: var(--font-corps); font-size: var(--fs-md); color: var(--c-texte-2);
    line-height: 1.7; max-width: 800px; margin: 0 auto;
}
.services-hero-section .hero-description strong {
    color: var(--c-texte); font-weight: 600; display: block; margin-bottom: var(--sp-2);
}
/* .services-grid → alias .gfs-grid--3 (set canonique, section 1) */
a.service-card {   /* recette = set canonique (VERRE) ; hover conservé ci-dessous */
    text-decoration: none; display: flex; flex-direction: column;
    padding: var(--sp-5) var(--sp-4); height: 100%;
    transition: transform var(--t-base) ease, border-color var(--t-base) ease, box-shadow var(--t-base) ease;
}
a.service-card:hover {
    transform: translateY(-5px); border-color: var(--c-cta);
    box-shadow: var(--shadow-lg);
    background: var(--glass-2);
}
.service-icon {
    font-size: 32px; margin-bottom: var(--sp-4);
    background: var(--glass-3);
    width: 70px; height: 70px; line-height: 70px; border-radius: var(--r-full);
    box-shadow: var(--shadow-icon);
    border: 1px solid rgba(var(--c-carte-rgb), 0.5);
    display: flex; align-items: center; justify-content: center;
    margin-left: auto; margin-right: auto;
}
.service-card h3 {
    font-family: var(--font-titre); font-size: var(--fs-3xl); color: var(--c-texte);
    margin-bottom: var(--sp-3); text-align: center;
}
.service-lead {
    font-family: var(--font-corps); font-weight: 700; color: var(--c-accent);   /* violet de marque, cf. note accessibilité (10) */
    font-size: var(--fs-base); margin-bottom: var(--sp-3); line-height: 1.4; text-align: center;
}
.service-desc {
    font-family: var(--font-corps); color: var(--c-texte-2); font-size: var(--fs-ui);
    line-height: 1.6; margin-bottom: var(--sp-4); flex-grow: 1; text-align: left;
}
/* .service-list → voir (6.0 bis) LISTES — SET CANONIQUE (alias de .gfs-list--bullet, densité carte) */
.card-cta {
    font-family: var(--font-corps); font-weight: 700; color: var(--c-texte);
    font-size: var(--fs-sm); margin-top: auto; display: block; text-align: right;
    transition: color var(--t-base);
}
a.service-card:hover .card-cta { color: var(--c-cta); }
@media (max-width: 1024px) { .services-grid { grid-template-columns: 1fr; gap: var(--sp-4); max-width: var(--gfs-w-etroit); margin: 0 auto; } }   /* 3 cartes : 1 colonne centrée (720) en tablette/mobile, pas 3 pavés pleine largeur */

/* ----- Compléments page Services (réintégrés) ----- */
/* .services-section → largeur + centrage : set canonique .gfs-container */
.service-card--feat .service-lead { color: var(--c-cta) !important; }
.service-card--feat .service-list { border-top-color: rgba(var(--c-carte-rgb),0.18) !important; }
.service-card--feat .service-list li { color: var(--c-texte-clair) !important; }
/* Accroche centrée sous un H2 de section (réutilisable) — remplace un <p> stylé en dur. */
.section-lead {
    max-width: var(--gfs-w-etroit); margin: 0 auto var(--sp-4);
    font-family: var(--font-corps); color: var(--c-texte-2);
    line-height: 1.6; text-align: center;
}
/* Wrapper de bouton centré en pied de section (réutilisable) — remplace un <div> inline.
   Centre le bouton ET pose l'espace au-dessus, quel que soit l'élément précédent. */
.section-cta { display: flex; justify-content: center; margin-top: var(--sp-6); }
/* Bandeau CTA final : pleine largeur écran, SANS arrondi, fusionné avec le footer (même bleu --c-texte).
   Le fond foncé est porté ici → reste lisible même si la section Elementor n'est pas colorée.
   Débordement plein écran via marges négatives (calc -50vw + 50%) : fonctionne sur N'IMPORTE QUELLE
   page, quel que soit le conteneur Elementor, sans réglage « étirer » et sans page-id.
   Le contenu (.final-cta) garde sa largeur centrée, défini plus bas. */
.final-cta-band {
    background: var(--c-texte);
    width: 100vw !important; max-width: 100vw !important;   /* !important = override Elementor : e-con-full impose width:100%/min-width, ce qui empêchait les marges négatives d'élargir le bloc (il était juste décalé → jour d'½ scrollbar à droite). 100vw + marges calc ci-dessous = plein-bord robuste, conteneur full OU boxed. Le débord d'½ scrollbar de chaque côté est masqué par overflow-x:hidden du body. */
    margin: 0 calc(-50vw + 50%) !important;          /* déborde jusqu'aux bords de l'écran (gauche/droite). !important (21/10/2026) : sous les articles, une règle Astra plus forte (.ast-page-builder-template … > *, margin auto) annulait le débord, d'où un jour de 20 px à gauche. */
    border-radius: 0;
    padding: var(--sp-7) var(--sp-4) var(--sp-8);   /* respiration verticale ; latéral = gouttière */
}
@media (max-width: 768px) { .final-cta-band { padding: var(--sp-6) var(--sp-3) var(--sp-7); } }
/* Colle le bandeau au footer : annule le padding bas du conteneur Elementor (.e-con) qui
   l'entoure (ses 10px laissaient passer le fond clair = liseré). Scopé via :has() → s'applique
   sur toute page contenant un bandeau, sans page-id. !important = override Elementor.
   .e-con-inner : en conteneur « boxed », Elementor pose ce padding sur l'enfant interne
   (cas de la page Diagnostic, liseré de 10px relevé le 2026-10-20). */
.e-con:has(.final-cta-band),
.e-con-inner:has(.final-cta-band) { padding-bottom: 0 !important; }


/* ================= SERVICES — alignement des 3 cartes (subgrid, desktop ≥1025px) =================
   6 lignes partagées via subgrid ; navigateurs sans subgrid = comportement inchangé. */
@media (min-width: 1025px) {
  @supports (grid-template-rows: subgrid) {

    .services-grid {
      /* 6 lignes partagées : icône / titre / sous-titre / description / liste / lien
         La description (4e ligne) absorbe l'espace pour que le lien reste en bas. */
      grid-template-rows: auto auto auto 1fr auto auto;
      row-gap: 0;            /* l'espacement vertical vient des marges existantes */
    }

    .service-card {
      display: grid;          /* remplace le flex pour cette vue */
      grid-template-rows: subgrid;
      grid-row: span 6;       /* la carte occupe les 6 lignes du parent */
      row-gap: 0;
    }

  }
}

/* ================= SERVICES — 3 offres (accueil) : icônes line-art + carte vedette ================= */
/* Icônes line-art (remplacent les emojis) */
.service-icon svg {
    width: 34px; height: 34px;
    fill: none; stroke: var(--c-accent);
    stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

/* Texte des cartes centré (cohérence visuelle) */
.services-grid .service-desc { text-align: center; }

/* Badge « Cœur de métier » → SET CANONIQUE .gfs-tag (--solid, plein orange).
   Défini en section (5) HERO & ÉTIQUETTES. */
/* Le badge sort du flux : dans le flux, il poussait l'icône de la carte vedette
   vers le bas et cassait l'alignement des trois icônes. Les trois cartes
   réservent la même hauteur en haut, le badge s'y loge. */
.services-grid .service-card { position: relative; padding-top: var(--sp-6); }
.services-grid .service-badge {   /* étiquette de carte, comme les cartes LinkedIn (voir .gfs-li-card__tag) */
    position: absolute; top: var(--tag-carte-y); left: var(--tag-carte-x); transform: none; z-index: 2;
    margin: 0; white-space: nowrap;
    padding-block: var(--sp-1);   /* capsule plus fine : laisse respirer l'icône en dessous */
    background: var(--c-carte); color: var(--c-accent);
    border: 1px solid rgba(var(--c-accent-rgb), 0.3); box-shadow: var(--shadow-tag);
}

/* Carte mise en avant (sombre, casse l'uniformité) */
.service-card--feat {   /* = .gfs-card--dark appliqué (override !important du verre service-card) */
    background: var(--c-texte) !important;
    border-color: var(--c-texte) !important;
    box-shadow: var(--shadow-lg) !important;
}
.service-card--feat:hover {
    background: var(--c-texte) !important;
    border-color: var(--c-cta) !important;
}
.service-card--feat h3 { color: var(--c-carte) !important; }
.service-card--feat .service-desc { color: var(--c-texte-clair) !important; }
.service-card--feat .service-icon {
    background: rgba(var(--c-carte-rgb),0.1);
    border-color: rgba(var(--c-carte-rgb),0.20);
    box-shadow: none;
}
.service-card--feat .service-icon svg { stroke: var(--c-cta); }
.service-card--feat .card-cta { color: var(--c-cta) !important; }

/* ================= NEWSLETTER INFOMANIAK — 2 colonnes compact (juin 2026) =================
   Remplace l'ancien bloc Newsletter. CSS only : le HTML Infomaniak reste inchangé.
   Layout : [ titre + sous-titre ] | [ champ e-mail + bouton ], ligne RGPD dessous.
   Mobile (<768px) : repasse en une colonne. Cible la classe générée par Infomaniak.
   Fond = verre très léger (var(--glass-soft)) + textes clairs : la newsletter est
   affichée sur des sections FONCÉES (Accueil, Veille & ressources). Un seul rendu,
   aucune classe à ajouter dans Elementor. Si un jour elle passe sur fond clair, à revoir. */

/* Conteneur verre léger sur fond sombre, dégraissé en hauteur + passage en 2 colonnes */
.inf-main_cf655665801fc01205314e121a0ee8c2 {
    display: grid !important;
    grid-template-columns: 1.5fr 1fr;         /* texte (respire) | champ */
    grid-template-rows: auto auto;
    column-gap: var(--sp-5);
    row-gap: var(--sp-1);
    align-items: center;
    text-align: left !important;
    background-color: var(--glass-soft) !important;   /* verre léger : se pose sur les sections sombres sans bloc blanc agressif */
    -webkit-backdrop-filter: blur(12px) !important; backdrop-filter: blur(12px) !important;
    border: 1px solid var(--c-border-glass) !important;
    box-sizing: border-box !important;
    border-radius: var(--r-glass-2) !important;
    padding: var(--sp-4) var(--sp-5) !important;            /* avant : 35px partout */
    margin: var(--sp-4) auto !important;
    max-width: var(--gfs-w) !important; /* 1100 : aligné sur la largeur de contenu (.gfs-container) */
    box-shadow: var(--shadow-lg) !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Colonne gauche : titre (rangée 1) + sous-titre (rangée 2) */
.inf-main_cf655665801fc01205314e121a0ee8c2 h4 {
    grid-column: 1; grid-row: 1;
    color: var(--c-carte) !important; font-size: var(--fs-ui-2xl) !important;   /* blanc : titre sur fond sombre */
    margin: 0 !important; font-family: var(--font-corps) !important;
    font-weight: 700 !important; line-height: 1.25 !important;
}
.inf-main_cf655665801fc01205314e121a0ee8c2 > span {
    grid-column: 1; grid-row: 2;
    color: var(--c-texte-clair) !important; font-size: var(--fs-ui-md) !important; line-height: 1.5 !important;
    display: block !important; margin: var(--sp-2) 0 0 0 !important; opacity: 0.85 !important;
}

/* Colonne droite : tout le bloc formulaire, centré verticalement sur les 2 rangées */
.inf-main_cf655665801fc01205314e121a0ee8c2 .inf-content {
    grid-column: 2; grid-row: 1 / span 2;
    display: flex !important; flex-wrap: wrap !important;
    align-items: center !important; gap: var(--sp-2) !important;
}
/* Message de succès : pleine largeur quand il s'affiche après inscription */
.inf-main_cf655665801fc01205314e121a0ee8c2 .inf-success { grid-column: 1 / -1 !important; }

/* Champ e-mail : occupe l'espace disponible de la colonne droite */
.inf-main_cf655665801fc01205314e121a0ee8c2 .inf-input-text {
    order: 1; flex: 1 1 180px; margin: 0 !important;
}
/* On masque le label "Email *" : le placeholder suffit → gain de hauteur */
.inf-main_cf655665801fc01205314e121a0ee8c2 .inf-input-text > div:first-child {
    display: none !important;
}
.inf-main_cf655665801fc01205314e121a0ee8c2 input[type="email"] {
    width: 100% !important; height: var(--h-control) !important; color: var(--c-texte) !important;
    border: 1px solid var(--c-border) !important;
    background: var(--c-carte) !important;
    padding: 0 var(--sp-4) !important; border-radius: var(--r-pill) !important;   /* pill = même arrondi que le bouton ; padding élargi pour respirer dans la capsule */
    font-family: var(--font-corps) !important; font-size: var(--fs-ui-lg) !important;
    outline: none !important; transition: all var(--t-base) ease !important;
}
.inf-main_cf655665801fc01205314e121a0ee8c2 input[type="email"]:focus {
    border-color: var(--c-accent) !important; box-shadow: var(--ring-focus) !important;
}

/* Bouton : à côté du champ, orange plein (CTA charte), plus de margin-top */
.inf-main_cf655665801fc01205314e121a0ee8c2 .inf-submit {
    order: 2; flex: 0 0 auto; margin: 0 !important; text-align: left !important;
}
/* = bouton SECONDAIRE sur fond sombre (calé sur .cta-secondary-dark) ; gabarit du formulaire conservé (hauteur champ, pill, pleine largeur mobile). */
.inf-main_cf655665801fc01205314e121a0ee8c2 .inf-submit input {
    height: var(--h-control) !important;
    background: rgba(var(--c-carte-rgb),0.05) !important; color: var(--c-carte) !important;
    backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important;
    font-family: var(--font-corps) !important; font-weight: 600 !important;
    text-transform: none !important; letter-spacing: 0.3px; font-size: var(--fs-ui-base) !important;
    padding: 0 var(--sp-4) !important; border-radius: var(--r-pill) !important;
    border: 1px solid rgba(var(--c-carte-rgb),0.2) !important; cursor: pointer !important;
    box-shadow: 0 4px 20px rgba(var(--c-noir-rgb),0.2), inset 0 1px 3px rgba(var(--c-carte-rgb),0.1) !important;
    transition: all var(--t-slow) var(--ease) !important;
    white-space: nowrap !important;
}
.inf-main_cf655665801fc01205314e121a0ee8c2 .inf-submit input:hover {
    background: rgba(var(--c-carte-rgb),0.1) !important; color: var(--c-cta) !important;
    border-color: rgba(var(--c-cta-rgb),0.8) !important; transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(var(--c-noir-rgb),0.3), inset 0 0 0 1px rgba(var(--c-cta-rgb),0.1) !important;
}

/* RGPD : petite ligne sous le champ + bouton, sur toute la largeur de la colonne */
.inf-main_cf655665801fc01205314e121a0ee8c2 .inf-rgpd {
    order: 3; flex: 1 1 100%;
    margin: var(--sp-1) 0 0 0 !important; color: var(--c-texte-clair) !important; font-size: var(--fs-ui-2xs) !important;
    opacity: 0.8 !important; line-height: 1.4 !important; text-align: left !important;
}

/* Widget anti-spam Altcha (mode "floating") : ne doit pas occuper la grille */
.inf-main_cf655665801fc01205314e121a0ee8c2 altcha-widget {
    order: 4; flex: 0 0 0; width: 0 !important; height: 0 !important; overflow: hidden !important;
}

/* --- Tablette : on garde 2 colonnes mais on resserre --- */
@media (max-width: 1024px) {
    .inf-main_cf655665801fc01205314e121a0ee8c2 { column-gap: var(--sp-4); padding: var(--sp-4) var(--sp-4) !important; }
}
/* --- Téléphone : une seule colonne, champ puis bouton pleine largeur --- */
@media (max-width: 768px) {
    .inf-main_cf655665801fc01205314e121a0ee8c2 {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        padding: var(--sp-4) var(--sp-4) !important;
        margin: var(--sp-4) var(--sp-4) !important;   /* gouttière latérale : la carte ne touche plus les bords sur mobile */
        width: auto !important;
    }
    .inf-main_cf655665801fc01205314e121a0ee8c2 h4     { grid-column: 1; grid-row: auto; }
    .inf-main_cf655665801fc01205314e121a0ee8c2 > span { grid-column: 1; grid-row: auto; margin-bottom: var(--sp-3) !important; }
    .inf-main_cf655665801fc01205314e121a0ee8c2 .inf-content { grid-column: 1; grid-row: auto; }
    .inf-main_cf655665801fc01205314e121a0ee8c2 .inf-input-text { flex: 1 1 100%; }
    .inf-main_cf655665801fc01205314e121a0ee8c2 .inf-submit { flex: 1 1 100%; }
    .inf-main_cf655665801fc01205314e121a0ee8c2 .inf-submit input { width: 100% !important; }
    .inf-main_cf655665801fc01205314e121a0ee8c2 .inf-rgpd { text-align: center !important; }
}

/* ================= PAGE DIAGNOSTIC VISUEL — tout scopé sous .page-diag =================
   Réutilise (fournis par le global) : .h2-lab · callouts · .hero-tag ·
   .hero-description · .sep-molecular. Titre = .h1-page (ex-.h1-diag).
   Breakpoints alignés : ex-900px → 1024px + ajout 768px. */
.page-diag .diag-hero-section,
.page-diag .diag-section,
.page-diag .cta-final-section { padding: 0 var(--sp-4); }   /* largeur + centrage : set canonique .gfs-container */
.page-diag .diag-section      { margin-bottom: var(--sp-7); }
.page-diag .cta-final-section { margin-top: var(--sp-8); max-width: var(--gfs-w-etroit); }  /* bloc final = tier étroit (même largeur que la newsletter) */
.page-diag .hero-simple-container {
    background: transparent; border: none; box-shadow: none;
    padding: var(--sp-5) var(--sp-4); text-align: center; max-width: 900px; margin: 0 auto;
}
.page-diag .hero-cta-group { margin-top: var(--sp-4); }
.page-diag .hero-glass-container {
    background: var(--glass-1);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(var(--c-carte-rgb),0.6);
    border-radius: var(--r-glass); padding: var(--sp-6) var(--sp-5); text-align: center;
    box-shadow: var(--shadow-glass);
}
.page-diag .highlight { color: var(--c-cta); font-style: normal; }
/* Bouton principal du Diagnostic : volontairement SANS override local.
   L'élément porte .cta-principal → stylé par le bloc canonique a.cta-principal
   (section 4). L'ancien .page-diag .cta-principal divergeait (padding/timing) ;
   supprimé pour uniformiser. Une info = un seul endroit. */
/* Cartes de contenu → set canonique (.content-card BLANCHE, .highlight-card ACCENT).
   Anciens overrides .page-diag supprimés (doublons : la carte est désormais
   identique sur toutes les pages). */
.page-diag .text-center { text-align: center; }
/* .page-diag .check-list-large → voir (6.0 bis) LISTES — SET CANONIQUE (alias de .gfs-list--check --lg) */
/* Features (4 colonnes) — alias .gfs-grid--4 (set canonique, section 1) */
.page-diag .feature-card { padding: var(--sp-4) var(--sp-4); text-align: center; }   /* recette = set canonique (BLANCHE) */
.page-diag .feature-card h3 { font-family: var(--font-titre); color: var(--c-texte); font-size: var(--fs-lg); margin: var(--sp-3) 0 var(--sp-2); }
.page-diag .feature-card p  { font-family: var(--font-corps); font-size: var(--fs-sm); color: var(--c-texte-2); margin: 0; }
.page-diag .feature-icon {
    font-size: 32px; background: rgba(var(--c-cta-rgb),0.1);
    width: 60px; height: 60px; border-radius: var(--r-full);
    display: flex; align-items: center; justify-content: center; margin: 0 auto;
}
/* Tarifs */
/* .page-diag .info-grid → unifié sur .info-grid (set canonique, section Tarifs) */
.page-diag .pricing-card-glass {   /* fond gradient → set canonique (ACCENT) ; bordure & rayon signature */
    border: 1px solid rgba(var(--c-accent-rgb),0.2);
    border-radius: var(--r-glass-2); padding: var(--sp-5); text-align: center;
    box-shadow: var(--shadow-accent);
    position: relative; overflow: hidden;
}
/* .page-diag .price-tag → SET CANONIQUE .gfs-tag (--ghost). Défini en section
   (5) HERO & ÉTIQUETTES. */
.page-diag .price-amount {
    font-family: var(--font-titre); font-size: var(--fs-h1); color: var(--c-texte);
    margin: var(--sp-4) 0; line-height: 1;
}
.page-diag .price-amount .tax { font-size: var(--fs-base); color: var(--c-texte-2); font-family: var(--font-corps); }
/* .page-diag .price-features → voir (6.0 bis) LISTES — SET CANONIQUE (alias de .gfs-list--plain) */
.page-diag .price-note { font-size: var(--fs-xs); color: var(--c-texte-2); margin-top: var(--sp-3); line-height: 1.4; }
/* .page-diag .detailed-list → voir (6.0 bis) LISTES — SET CANONIQUE (alias de .gfs-list--bar) */
/* Timeline (process vertical) */
.page-diag .process-timeline { display: flex; flex-direction: column; gap: var(--sp-4); position: relative; max-width: 800px; margin: 0 auto; }
.page-diag .process-timeline::before {
    content: ''; position: absolute; top: 20px; bottom: 20px; left: 24px;
    width: 2px; background: rgba(var(--c-texte-rgb),0.1); z-index: 0;
}
.page-diag .process-step { display: flex; gap: var(--sp-4); position: relative; z-index: 1; }
.page-diag .step-number {
    width: 50px; height: 50px; background: var(--c-texte); color: var(--c-carte);
    font-family: var(--font-corps); font-weight: 700; font-size: var(--fs-ui-xl);
    border-radius: var(--r-full); display: flex; align-items: center; justify-content: center;
    border: 4px solid var(--c-blanc-casse); flex-shrink: 0;
}
.page-diag .step-content h4 { font-family: var(--font-titre); color: var(--c-texte); margin: 0 0 var(--sp-1) 0; font-size: var(--fs-lg); }
.page-diag .step-content p  { font-family: var(--font-corps); font-size: var(--fs-ui); color: var(--c-texte-2); margin: 0; }
/* FAQ (grille bento) */
/* FAQ du Diagnostic alignée sur la largeur des autres sections (1100, pas 1140). */
/* .page-diag .faq-bento-section → largeur + centrage : set canonique .gfs-container (1100) */
/* .page-diag .bento-masonry → unifié sur .bento-masonry (masonry colonnes CSS, comme la FAQ Services) */
.page-diag .bento-card { padding: var(--sp-4); }   /* recette = set canonique (BLANCHE) */
.page-diag .bento-card h4 { font-family: var(--font-titre); font-size: var(--fs-lg); color: var(--c-texte); margin: 0 0 var(--sp-2) 0; }
.page-diag .bento-card p  { font-family: var(--font-corps); font-size: var(--fs-ui); color: var(--c-texte-2); margin: 0; }
@media (max-width: 1024px) {
    .page-diag .info-grid     { grid-template-columns: 1fr; gap: var(--sp-5); }
    .page-diag .features-grid { grid-template-columns: 1fr 1fr; }
    .page-diag .bento-masonry { column-count: 1; }   /* masonry → 1 colonne dès la tablette (Diagnostic) */
    .page-diag .h1-page, .page-diag .h1-diag { font-size: var(--fs-h2b); }
    .page-diag .content-card  { padding: var(--sp-4) var(--sp-4); }
}
@media (max-width: 768px) {
    .page-diag .features-grid { grid-template-columns: 1fr; }
}
/* ----- Compléments page Diagnostic (réintégrés) ----- */
.page-diag .feature-icon svg { width: 30px; height: 30px; fill: none; stroke: var(--c-accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ================= POSTS LINKEDIN (accueil) — plugin gfs-linkedin, shortcode [gfs_linkedin] =================
   Proposition A « Sobre » (validée le 14/10/2026). Ordre : image, date, texte, étiquette, lien.
   Carte = alias du set canonique (6.0) : fond, bordure, rayon, ombre et survol viennent de là.
   Étiquette = alias de .gfs-tag + .gfs-tag--ghost (5). Ici : grille, image, empilement interne, lien.
   Toute la carte est cliquable : le lien est étiré sur la carte (un seul lien par carte).
   Téléphone : réglage du shortcode mobile="defilement" (défaut, validé le 14/10/2026 : cartes
   côte à côte, on fait glisser, bords en fondu) ou mobile="pile" (cartes empilées). */
.gfs-li-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4);
    width: 100%; max-width: var(--gfs-w); margin: 0 auto;
}
.gfs-li-card {
    position: relative;            /* ancre du lien étiré et de l'étiquette */
    display: flex; flex-direction: column;
    /* pas d'overflow:hidden : l'étiquette déborde à gauche. Le rayon est porté par le média. */
}
.gfs-li-card__media {
    aspect-ratio: 4 / 3; overflow: hidden;
    border-radius: var(--r-lg) var(--r-lg) 0 0;   /* suit le haut de la carte */
}
.gfs-li-card__media .gfs-li-card__img { display: block; width: 100%; height: 100%; object-fit: cover; }   /* .gfs-li-card__media devant : sinon « .elementor img { height:auto } » gagnait, l'image ne remplissait plus le cadre et le cadrage du plugin restait sans effet */
/* Le plugin WebP remplace l'<img> par un <picture> et lui donne la classe et le style
   de cadrage. object-fit et object-position n'agissent que sur l'image : on les lui
   fait suivre. Sans <picture>, cette règle ne s'applique pas. */
.gfs-li-card__media picture { display: block; width: 100%; height: 100%; }
.gfs-li-card__media picture > img {
    display: block; width: 100%; height: 100%;
    object-fit: inherit; object-position: inherit;
}
.gfs-li-card__date {
    display: flex; align-items: center; gap: var(--sp-2);
    margin: var(--sp-4) var(--sp-4) 0;
    font-family: var(--font-corps); font-size: var(--fs-ui-sm); color: var(--c-texte-2);
}
.gfs-li-card__texte {
    margin: var(--sp-3) var(--sp-4) 0;
    font-family: var(--font-corps); font-size: var(--fs-sm); line-height: 1.6; color: var(--c-texte);
}   /* texte entier : plus de coupe a 4 lignes. La grille egalise la hauteur des cartes,
       le lien reste cale en bas. Pour borner un texte trop long : [gfs_linkedin extrait="..."] */
/* Étiquette posée en haut de l'image, débordant à gauche : même niveau d'une carte
   à l'autre, et plus de décalage quand une étiquette passe sur deux lignes. */
.gfs-li-card__tag {   /* étiquette de carte : blanche à contour, discrète (même style que « Cœur de métier ») */
    position: absolute; top: var(--tag-carte-y); left: var(--tag-carte-x); z-index: 2;
    margin: 0; white-space: nowrap;
    background: var(--c-carte); color: var(--c-accent);
    border: 1px solid rgba(var(--c-accent-rgb), 0.3); box-shadow: var(--shadow-tag);
}
a.gfs-li-card__lien {   /* a. : même convention que a.cta-principal (gagne sur la couleur de lien du thème) */
    display: inline-flex; align-items: center; gap: var(--sp-2);
    margin: auto var(--sp-4) var(--sp-4); padding-top: var(--sp-4);   /* auto : lien calé en bas, alignés d'une carte à l'autre */
    font-family: var(--font-corps); font-weight: 700; font-size: var(--fs-ui-md);
    color: var(--c-accent); text-decoration: none;
}
a.gfs-li-card__lien:hover, a.gfs-li-card__lien:focus { color: var(--c-accent); text-decoration: none; }
a.gfs-li-card__lien::after { content: ""; position: absolute; inset: 0; }   /* lien étiré */
a.gfs-li-card__lien:focus-visible { outline: none; }
.gfs-li-card:focus-within { box-shadow: var(--ring-focus), var(--shadow-md); }   /* focus clavier visible sur la carte */
.gfs-li-ico {   /* icônes SVG du plugin (calendrier, flèche) ; taille d'icône en px */
    width: 16px; height: 16px; flex: none;
    fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.gfs-li-card__lien .gfs-li-ico { transition: transform var(--t-base) var(--ease); }
.gfs-li-card:hover .gfs-li-card__lien .gfs-li-ico { transform: translate(2px, -2px); }
@media (max-width: 1024px) {
    .gfs-li-grid { gap: var(--sp-3); }
}
@media (max-width: 768px) {
    .gfs-li-grid { grid-template-columns: 1fr; }   /* pile : une carte par ligne */
    .gfs-li-grid--defilement {                      /* défilement : cartes côte à côte, on fait glisser */
        grid-template-columns: none; grid-auto-flow: column;
        grid-auto-columns: 82%;                     /* la carte suivante dépasse : invite à glisser */
        overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
        padding-bottom: var(--sp-3);
    }
    .gfs-li-grid--defilement::-webkit-scrollbar { display: none; }
    .gfs-li-grid--defilement .gfs-li-card { scroll-snap-align: start; }
    /* Fondu des bords (même principe que le carrousel des témoignages) : la carte qui
       dépasse s'efface au lieu d'être coupée net. Bord gauche net au départ, bord droit
       net à la fin : les deux largeurs suivent le défilement (navigateurs récents).
       Ailleurs : fondu à droite seulement. */
    .gfs-li-grid--defilement {
        --gfs-li-fondu-g: 0px;
        --gfs-li-fondu-d: var(--sp-5);
        -webkit-mask-image: linear-gradient(to right, transparent 0, black var(--gfs-li-fondu-g), black calc(100% - var(--gfs-li-fondu-d)), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, black var(--gfs-li-fondu-g), black calc(100% - var(--gfs-li-fondu-d)), transparent 100%);
    }
    @supports (animation-timeline: scroll()) {
        .gfs-li-grid--defilement { animation: gfs-li-fondu linear both; animation-timeline: scroll(self inline); }
    }
}
@property --gfs-li-fondu-g { syntax: '<length>'; inherits: false; initial-value: 0px; }   /* largeur du fondu, bord gauche */
@property --gfs-li-fondu-d { syntax: '<length>'; inherits: false; initial-value: 0px; }   /* largeur du fondu, bord droit */
@keyframes gfs-li-fondu {
    10%  { --gfs-li-fondu-g: var(--sp-5); }
    90%  { --gfs-li-fondu-d: var(--sp-5); }
    100% { --gfs-li-fondu-g: var(--sp-5); --gfs-li-fondu-d: 0px; }
}

/* ================= CTA FINAL (accueil) « Un projet en tête ? » — section sombre =================
   Fond sombre posé dans Elementor ; bouton = a.cta-principal (section 4). */
.final-cta {
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
    padding: var(--sp-2) var(--sp-4) var(--sp-2);
}
.final-cta h2 {
    font-family: var(--font-titre); font-weight: 400;
    font-size: var(--fs-h1b); line-height: 1.1;
    color: var(--c-carte); margin: 0 0 var(--sp-3);
}
.final-cta h2 .acc { color: var(--c-cta); }
.final-cta .title-underline { margin: var(--sp-3) auto var(--sp-4); }   /* filet centré entre titre et texte (Proposition B) */
.final-cta p {
    font-family: var(--font-corps);
    font-size: var(--fs-md); line-height: 1.7;
    color: var(--c-texte-clair); margin: 0 0 var(--sp-5);
}
@media (max-width: 768px) {
    .final-cta h2 { font-size: var(--fs-h2); }
    .final-cta p { font-size: var(--fs-base); }
}

.final-cta .cta-row { display: flex; gap: var(--sp-3); justify-content: center; align-items: center; flex-wrap: wrap; margin-top: var(--sp-2); }
.final-cta .cta-link-light { color: var(--c-texte-clair); text-decoration: underline; font-family: var(--font-corps); font-size: var(--fs-ui); transition: color var(--t-fast) ease; }

/* ================================================================================
   (7) WIDGETS NATIFS ELEMENTOR
   Stylés en GLOBAL via le scope du conteneur + !important — c'est ce qui les fait
   gagner sur les styles internes d'Elementor. NE PAS casser cette logique.
   ================================================================================ */
/* ---------- WIDGET PORTFOLIO (cartes — home + page Réalisations) ---------- */
.elementor-portfolio-item .elementor-portfolio-item__overlay-link {
    z-index: 100 !important; display: block !important; cursor: pointer !important;
}
.elementor-portfolio-item {
    position: relative; overflow: hidden !important; border-radius: var(--r-sm) !important;
    transform: translateZ(0); box-shadow: var(--shadow-sm);
    transition: all var(--t-slow) cubic-bezier(0.25,0.46,0.45,0.94) !important; margin-bottom: var(--sp-4);
}
.elementor-portfolio-item:hover {
    transform: translateY(-5px); box-shadow: var(--shadow-lg);
}
.elementor-portfolio-item::before {
    content: ''; position: absolute; inset: 0;
    background: rgba(var(--c-noir-rgb),0.2); opacity: 0;
    transition: opacity var(--t-base) ease; z-index: 1; pointer-events: none;
}
.elementor-portfolio-item:hover::before { opacity: 1; }
.elementor-portfolio-item .elementor-portfolio-item__img img {
    transition: transform var(--t-slow) ease !important; width: 100%; display: block;
}
.elementor-portfolio-item:hover .elementor-portfolio-item__img img { transform: scale(1.08) !important; }
.elementor-portfolio-item__overlay {
    position: absolute !important; top: auto !important; bottom: 0 !important;
    left: 0 !important; right: 0 !important;
    width: 100% !important; height: auto !important; max-height: none !important;
    background: rgba(var(--c-texte-rgb),0.95) !important;
    backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important;
    border-top: 1px solid rgba(var(--c-carte-rgb),0.1) !important;
    padding: var(--sp-4) var(--sp-4) !important; text-align: left !important;
    transform: translateY(101%) !important;
    transition: transform var(--t-slow) cubic-bezier(0.165,0.84,0.44,1) !important;
    pointer-events: none !important; z-index: 10;
}
.elementor-portfolio-item:hover .elementor-portfolio-item__overlay,
.elementor-portfolio-item:focus-within .elementor-portfolio-item__overlay {
    transform: translateY(0%) !important;
}
.elementor-portfolio-item__title {
    font-family: var(--font-titre) !important; font-size: var(--fs-ui-xl) !important;   /* Marcellus (cohérent avec .portfolio-bento) */
    color: var(--c-carte) !important; margin-bottom: var(--sp-1) !important; font-weight: 400 !important;
    line-height: 1.3 !important;
}
/* === Page Portfolio (réalisations, page-id-30470) : overlay + titre + survol
   STRICTEMENT identiques au bento de l'accueil. Les déclarations sont MUTUALISÉES
   dans la section « 5. PORTFOLIO BENTO » (sélecteurs groupés .portfolio-bento +
   body.page-id-30470) : même barre basse qui glisse au survol, même dégradé, même
   titre révélé. La grille de la page reste en masonry (non touchée ici).
   → Ne PAS recréer de bloc overlay/titre spécifique ici : tout vit dans la section 5. === */
.elementor-portfolio-item__tags {
    font-family: var(--font-corps) !important; font-size: var(--fs-ui-xs) !important;
    color: var(--c-cta) !important; text-transform: uppercase !important;
    letter-spacing: 1px !important; font-weight: 700 !important;
}
/* ---------- BARRE DE FILTRES PORTFOLIO (page Réalisations) ---------- */
.elementor-portfolio__filters {
    display: grid !important; grid-template-columns: repeat(3, 1fr) !important;  /* 3 par ligne, PLEINE largeur du portfolio (colonnes larges → long libellé sur 1 ligne) */
    gap: var(--sp-2) !important; margin: 0 0 var(--sp-4) 0 !important;
}
.elementor-portfolio__filter {
    min-width: 0 !important; max-width: none !important; margin: 0 !important;   /* la grille gère la largeur */
    text-align: center !important;
    font-family: var(--font-corps) !important; font-size: var(--fs-ui-sm) !important;
    font-weight: 600 !important; text-transform: uppercase !important;
    letter-spacing: 0.5px !important; line-height: 1.2 !important; padding: var(--sp-2) var(--sp-4) !important;
    border-radius: var(--r-pill) !important; transition: all var(--t-base) ease !important;
    background-color: rgba(var(--c-carte-rgb),0.65) !important; color: var(--c-texte) !important;   /* identique au filtre articles */
    border: 1px solid var(--c-border) !important;
    overflow-wrap: break-word !important;   /* libellés longs : casse au lieu de déborder */
}
/* A1 — Survol (non sélectionné) : affordance légère, bordure orange, SANS inverser. */
.elementor-portfolio__filter:hover {
    background-color: rgba(var(--c-carte-rgb),0.9) !important;
    border-color: var(--c-cta) !important; color: var(--c-texte) !important;
    box-shadow: var(--shadow-filter) !important;
    transform: translateY(-1px);
}
/* A1/A3 — Actif : inversion pleine + filet orange "onglet". */
.elementor-portfolio__filter.elementor-active {
    background-color: var(--c-texte) !important; color: var(--c-carte) !important;
    border-color: var(--c-texte) !important;
    box-shadow: var(--shadow-filter-active) !important;
    transform: translateY(-1px);
}
/* Ordre d'affichage des filtres — SCOPÉ à la page Réalisations (page-id-30470)
   pour ne PAS réordonner les filtres d'un autre portfolio (ex. tri des articles). */
.page-id-30470 .elementor-portfolio__filter:nth-child(1) { order: 1; } /* Tout */
.page-id-30470 .elementor-portfolio__filter:nth-child(2) { order: 6; } /* Projets exploratoires */
.page-id-30470 .elementor-portfolio__filter:nth-child(3) { order: 5; } /* Vulgarisation & pédagogie */
.page-id-30470 .elementor-portfolio__filter:nth-child(4) { order: 4; } /* Couvertures & éditorial */
.page-id-30470 .elementor-portfolio__filter:nth-child(5) { order: 2; } /* Illustrations scientifiques */
.page-id-30470 .elementor-portfolio__filter:nth-child(6) { order: 3; } /* Identités visuelles */
/* ---------- FILTRE ARTICLES "maison" (widget Publications + JS) ----------
   Pastilles du filtre articles. Le JS vit dans un fichier externe
   (wp-content/uploads/gfs/filtres-articles.js) ; le widget HTML ne garde que
   le <div class="gfs-filters">. Spécificité renforcée (.gfs-filters .gfs-filter)
   pour passer DEVANT le style de bouton générique d'Elementor/Astra : sans ça,
   le texte tombe en orange pâle + bordure violette imposés par le kit. */
.gfs-filters {
    display: flex; flex-wrap: wrap;             /* les pastilles s'étirent pour remplir chaque ligne */
    gap: var(--sp-2); margin: 0 auto var(--sp-4) auto;
    max-width: var(--gfs-w);
}
.gfs-filters .gfs-filter {
    flex: 1 1 calc(33.333% - 7px);   /* 3 par ligne ; la dernière ligne s'étire bord à bord */
    min-width: 0; max-width: none; margin: 0;
    text-align: center;
    font-family: var(--font-corps); font-size: var(--fs-ui-sm); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.2;
    padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill); cursor: pointer;
    background-color: rgba(var(--c-carte-rgb), 0.65);   /* blanc doux, un peu opaque (pas pur) */
    color: var(--c-texte);                                /* bleu minéral de la charte : même couleur que les filtres portfolio (pas de violet) */
    border: 1px solid var(--c-border);      /* contour neutre discret (identique au portfolio) */
    transition: all var(--t-base) ease;
    overflow-wrap: break-word;   /* libellés longs : casse au lieu de déborder */
}
/* A1 — Survol (non sélectionné) : affordance légère, bordure orange, SANS inverser. */
.gfs-filters .gfs-filter:hover {
    background-color: rgba(var(--c-carte-rgb),0.9);
    border-color: var(--c-cta); color: var(--c-texte);
    box-shadow: var(--shadow-filter); transform: translateY(-1px);
}
/* A1/A3 — Actif : inversion pleine + filet orange "onglet". */
.gfs-filters .gfs-filter.is-active {
    background-color: var(--c-texte); color: var(--c-carte); border-color: var(--c-texte);
    box-shadow: var(--shadow-filter-active); transform: translateY(-1px);
}
/* ---------- CARTES D'ARTICLES "Clean Lab" (widget Posts) ----------
   Consolidées le 30/06/2026 dans la section « PAGE RESSOURCES — cartes d'articles »
   plus bas (source unique, scope .gfs-ressources). */
/* ---------- WIDGET TABLE DES MATIÈRES (TOC) — carte "Clean Lab" ---------- */
.elementor-widget-table-of-contents {
    background: var(--glass-1) !important;
    border: 1px solid var(--c-carte) !important;
    border-radius: var(--r-sm) !important;
    padding: var(--sp-4) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: box-shadow var(--t-base) ease, border-color var(--t-base) ease !important;
}
.elementor-widget-table-of-contents:hover {
    box-shadow: var(--shadow-md) !important;
    border-color: rgba(var(--c-cta-rgb),0.3) !important;
}
.elementor-widget-table-of-contents .elementor-toc__header,
.elementor-widget-table-of-contents .elementor-toc__body {
    background: transparent !important;
}
.elementor-widget-table-of-contents .elementor-toc__header {
    padding-bottom: var(--sp-3); margin-bottom: var(--sp-3);
    border-bottom: 1px solid var(--c-border) !important;
}
.elementor-widget-table-of-contents .elementor-toc__header-title {
    font-family: var(--font-titre) !important;
    font-size: var(--fs-xl) !important; color: var(--c-texte) !important; font-weight: 400 !important;
}
.elementor-widget-table-of-contents .elementor-toc__list-item {
    font-family: var(--font-corps) !important;
    font-size: var(--fs-ui) !important; color: var(--c-texte-2) !important;
    padding: var(--sp-2) 0; transition: all var(--t-fast) ease;
}
.elementor-widget-table-of-contents a.elementor-toc__list-item-text {
    color: var(--c-texte-2) !important;
    transition: color var(--t-fast) ease, transform var(--t-fast) ease;
    display: inline-block;
}
.elementor-widget-table-of-contents a.elementor-toc__list-item-text:hover {
    color: var(--c-cta) !important; transform: translateX(5px);
}
@media (max-width: 768px) {
    .elementor-widget-table-of-contents { padding: var(--sp-4) !important; }
}
/* ---------- EN-TÊTE — capsule flottante (glassmorphism) ----------
   Ajouter la classe .gfs-header au conteneur de l'en-tête (Avancé > Classes CSS). */
.gfs-header {
    position: fixed !important;
    top: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    /* 60% "borné" : jamais < 860px (sinon le menu se casse/le bouton est coupé
       dans la bande 1025-1215px), jamais > 1100px. 100% sous 1024px (voir média). */
    width: clamp(860px, 60%, 1100px) !important;
    box-sizing: border-box;
    height: 80px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 var(--sp-4) !important;
    background: rgba(var(--c-carte-rgb),0.85) !important;   /* capsule blanche (verre léger conservé) ; blanc plein = var(--c-carte) */
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-radius: var(--r-pill) !important;
    border: 2px solid var(--c-border-glass) !important;
    box-shadow: var(--shadow-md);
    z-index: 9999;
    transition: all var(--t-base) ease-in-out;
}
/* Tablette & mobile : capsule quasi pleine largeur, avec 20px de marge de chaque
   côté (calc) pour ne pas coller les bords de l'écran + centrage vertical du burger */
@media (max-width: 1024px) {
    .gfs-header { width: calc(100% - 40px) !important; }
    .gfs-header .elementor-menu-toggle {
        display: flex !important; align-items: center !important;
    }
}
/* Bouton « Échangeons » — un peu plus d'air (desktop), sans toucher au menu ni au
   logo : on retire la marge interne de la colonne du bouton → le bouton gagne ~14px
   de large (≈7px de chaque côté). Les colonnes gardent leur largeur, donc le menu
   reste garanti sur UNE ligne à toutes les tailles d'écran. Scopé > 1024px. */
@media (min-width: 1025px) {
    .gfs-header .e-con-inner > .elementor-element:last-child {
        padding-left: 0 !important; padding-right: 0 !important;
    }
}
/* Bouton « Échangeons » du header, SUR la page Contact elle-même : état « page actuelle ».
   Le CTA pointe vers la page où l'on se trouve déjà → on l'atténue et on le rend non
   cliquable (plutôt que le masquer, pour garder l'équilibre visuel du header).
   Scope = classe body posée par WordPress sur la page Contact (page-id 28852)
   + id Elementor du bouton (f7250f7). L'opacité n'a pas de token de charte dédié :
   littéral toléré (comme les breakpoints), ce n'est ni une couleur ni une taille de charte. */
body.page-id-28852 .gfs-header .elementor-element-f7250f7,
.gfs-header__cta.is-page-actuelle {   /* en-tête maison (gfs-chassis) : la classe est posée par l'extension sur la page Contact */
    opacity: 0.45;
    pointer-events: none;
    cursor: default;
}

/* ---------- EN-TÊTE MAISON (extension gfs-chassis) : contenu de la capsule ----------
   Remplace le widget Menu d'Elementor Pro. La capsule elle-même (.gfs-header) est réglée
   juste au-dessus. Ordinateur : logo · menu · bouton. Sous 1024px : menu burger.
   Breakpoints : 1024 (burger) et 767 (logo masqué, comme l'en-tête Pro au 21/10/2026). */
.gfs-entete .gfs-header { justify-content: space-between; gap: var(--sp-3); }
.gfs-header-espace { height: var(--h-entete-espace); }
.gfs-header__logo { flex: 0 0 auto; display: block; line-height: 0; }
.gfs-header__logo img { width: var(--logo-w); height: auto; display: block; }
.gfs-header__cta { flex: 0 0 auto; }
.gfs-header__cta .elementor-button { text-decoration: none; }
.gfs-nav { flex: 1 1 auto; display: flex; justify-content: center; }
.gfs-nav__liste { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.gfs-nav__liste li { position: relative; list-style: none; margin: 0; }
.gfs-nav__liste a {
    display: flex; align-items: center; gap: var(--sp-1);
    padding: var(--pad-nav); position: relative;
    font-family: var(--font-corps); font-size: var(--fs-ui-lg); font-weight: 400; line-height: 20px;
    color: var(--c-texte); text-decoration: none; white-space: nowrap;
}
.gfs-nav__liste > li > a::after {   /* trait orange au survol (comme le menu Pro « souligné, fondu ») */
    content: ''; position: absolute; left: 0; right: 0; bottom: 0;
    height: var(--nav-trait); background: var(--c-cta);
    opacity: 0; transition: opacity var(--t-base) var(--ease);
}
.gfs-nav__liste > li > a:hover::after,
.gfs-nav__liste > li > a:focus-visible::after,
.gfs-nav__liste > li:hover > a::after { opacity: 1; }
.gfs-nav__fleche { width: 15px; height: 15px; fill: currentColor; flex-shrink: 0; }   /* glyphe : littéral toléré */
.gfs-nav .dropdown-menu-toggle { display: none; }   /* flèche ajoutée par Astra : on garde la nôtre */
/* Sous-menu (ordinateur) : s'ouvre au survol et au clavier.
   Même habillage que le panneau du menu mobile (coins --r-lg, ombre --shadow-md). */
.gfs-nav__liste .sub-menu {
    position: absolute; top: calc(100% + var(--sp-2)); left: 0; z-index: 10;
    list-style: none; margin: 0; padding: var(--sp-2);
    background: var(--c-carte); border-radius: var(--r-lg); box-shadow: var(--shadow-md);
    visibility: hidden; opacity: 0; transition: opacity var(--t-fast) ease;
}
.gfs-nav__liste .sub-menu::before {   /* pont invisible : le survol ne se perd pas dans l'écart */
    content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--sp-2);
}
.gfs-nav__liste li:hover > .sub-menu,
.gfs-nav__liste li:focus-within > .sub-menu { visibility: visible; opacity: 1; }
.gfs-nav__liste .sub-menu a { font-size: var(--fs-ui-sm); font-weight: 500; border-radius: var(--r-sm); }   /* sélection arrondie, en retrait des bords du panneau */
.gfs-nav__liste .sub-menu a:hover,
.gfs-nav__liste .sub-menu a:focus-visible,
.gfs-nav__liste .sub-menu .current-menu-item > a { background: var(--c-cta); color: var(--c-carte); }
/* Bouton burger : caché sur ordinateur.
   Préfixe .gfs-entete : le kit Elementor stylise tous les <button> (.elementor-kit-… button,
   spécificité 0,1,1) ; avec deux classes (0,2,0) on passe devant, sans !important. */
.gfs-entete .gfs-nav__burger {
    display: none; align-items: center; justify-content: center;
    width: 33px; height: 33px; padding: 0; border: 0; cursor: pointer;   /* glyphe : littéral toléré */
    border-radius: var(--r-2xs); background: rgba(var(--c-noir-rgb),0.05); color: var(--c-cta);
}
.gfs-entete .gfs-nav__burger svg { width: 22px; height: 22px; fill: currentColor; }   /* glyphe : littéral toléré */
.gfs-nav__burger-fermer,
.gfs-entete.is-ouvert .gfs-nav__burger-ouvrir { display: none; }
.gfs-entete.is-ouvert .gfs-nav__burger-fermer { display: block; }
@media (max-width: 1024px) {
    .gfs-entete .gfs-nav__burger { display: flex; }
    .gfs-nav {   /* panneau déroulant : même largeur que la capsule, juste en dessous (demande du 21/10) */
        display: none; position: absolute; top: calc(100% + var(--sp-2)); left: 0; right: 0;
        max-height: calc(100vh - var(--h-entete-espace)); overflow-y: auto;
        padding: var(--sp-2); background: var(--c-carte);
        border-radius: var(--r-lg); box-shadow: var(--shadow-md);
    }
    .gfs-entete.is-ouvert .gfs-nav { display: block; }
    .gfs-nav__liste { flex-direction: column; align-items: stretch; }
    .gfs-nav__liste a { justify-content: center; padding: var(--pad-nav-mobile); font-size: var(--fs-ui-sm); }
    .gfs-nav__liste > li > a::after { content: none; }
    .gfs-nav__liste .sub-menu { position: static; display: none; visibility: visible; opacity: 1; padding: 0; border-radius: 0; box-shadow: none; }
    .gfs-nav__liste .sub-menu::before { content: none; }
    .gfs-nav__liste .is-deplie > .sub-menu { display: block; }
    .gfs-nav__liste .sub-menu a { font-size: var(--fs-ui-2xs); }
}
@media (max-width: 767px) {
    .gfs-header__logo { display: none; }   /* comme l'en-tête Pro : logo masqué sur téléphone */
}

/* ================= PORTFOLIO BENTO (accueil) — widget Portfolio Elementor =================
   Bento calé sur 10 projets. Classe `portfolio-bento` sur la SECTION. */
/* Grille bento (4 colonnes) */
.portfolio-bento .elementor-portfolio.elementor-posts-container {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    grid-auto-rows: 220px;
    grid-auto-flow: dense;
    gap: var(--sp-3) !important;
    max-width: var(--gfs-w);
    margin: 0 auto;
}

/* Les tuiles : coins arrondis, image qui remplit */
.portfolio-bento .elementor-portfolio-item {
    position: relative;
    margin: 0 !important;
    height: 100%;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}
.portfolio-bento .elementor-post__thumbnail__link { display: block; height: 100%; }
.portfolio-bento .elementor-portfolio-item__img { height: 100%; margin: 0; }
.portfolio-bento .elementor-portfolio-item__img img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform var(--t-slow) ease;
}
.portfolio-bento .elementor-portfolio-item:hover .elementor-portfolio-item__img img {
    transform: scale(1.05);
}

/* Rythme bento (grand écran, 10 projets) : 1 vedette 2x2 + 3 larges */
.portfolio-bento .elementor-portfolio-item:nth-child(1)  { grid-column: span 2; grid-row: span 2; }
.portfolio-bento .elementor-portfolio-item:nth-child(4)  { grid-column: span 2; }
.portfolio-bento .elementor-portfolio-item:nth-child(7)  { grid-column: span 2; }
.portfolio-bento .elementor-portfolio-item:nth-child(10) { grid-column: span 2; }
/* Filet de sécurité : jamais plus de 10 tuiles (le bento est calé sur 10 projets).
   À compléter côté Elementor : widget Portfolio → « Publications par page = 10 ». */
.portfolio-bento .elementor-portfolio-item:nth-child(n+11) { display: none; }

/* Survol : barre basse qui glisse + dégradé + titre révélé.
   Sélecteurs GROUPÉS : .portfolio-bento (accueil) + body.page-id-30470 (page Réalisations)
   → les deux portfolios partagent EXACTEMENT le même overlay et le même survol.
   Ne pas dégrouper (sinon les deux pages divergent à nouveau). */
.portfolio-bento .elementor-portfolio-item__overlay,
body.page-id-30470 .elementor-portfolio-item__overlay {
    position: absolute; inset: 0;
    display: flex; align-items: flex-end; justify-content: flex-start;   /* verrou alignement : titre toujours bas-GAUCHE (sinon la dernière tuile dérive) */
    padding: var(--sp-4);
    opacity: 1 !important;
    background: linear-gradient(180deg, rgba(var(--c-texte-rgb),0) 38%, rgba(var(--c-texte-rgb),0.82) 100%) !important;
    transition: background var(--t-base) ease;
}
.portfolio-bento .elementor-portfolio-item:hover .elementor-portfolio-item__overlay,
.portfolio-bento .elementor-portfolio-item:focus-within .elementor-portfolio-item__overlay,
body.page-id-30470 .elementor-portfolio-item:hover .elementor-portfolio-item__overlay,
body.page-id-30470 .elementor-portfolio-item:focus-within .elementor-portfolio-item__overlay {
    background: linear-gradient(180deg, rgba(var(--c-accent-rgb),0.22) 0%, rgba(var(--c-texte-rgb),0.9) 100%) !important;
}
.portfolio-bento .elementor-portfolio-item__title,
body.page-id-30470 .elementor-portfolio-item__title {
    color: var(--c-carte) !important;
    font-family: var(--font-titre) !important;
    font-size: var(--fs-xl) !important; line-height: 1.15 !important;
    font-weight: 400 !important; margin: 0 !important;
    text-align: left; width: 100%;   /* verrou : texte calé à gauche sur toutes les tuiles */
    transform: translateY(8px); transition: transform var(--t-base) ease;
}
.portfolio-bento .elementor-portfolio-item:hover .elementor-portfolio-item__title,
.portfolio-bento .elementor-portfolio-item:focus-within .elementor-portfolio-item__title,
body.page-id-30470 .elementor-portfolio-item:hover .elementor-portfolio-item__title,
body.page-id-30470 .elementor-portfolio-item:focus-within .elementor-portfolio-item__title {
    transform: translateY(0);
}

/* Responsive — tuiles ÉGALES sous 1024px (la grande tuile et les larges disparaissent) */
@media (max-width: 1024px) {
    .portfolio-bento .elementor-portfolio.elementor-posts-container {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-auto-rows: 240px;
    }
    .portfolio-bento .elementor-portfolio-item {
        grid-column: auto !important;
        grid-row: auto !important;
    }
}
@media (max-width: 768px) {
    .portfolio-bento .elementor-portfolio.elementor-posts-container {
        grid-template-columns: 1fr !important;
        grid-auto-rows: 230px;
    }
    .portfolio-bento .elementor-portfolio-item {
        grid-column: auto !important;
        grid-row: auto !important;
    }
}

/* ================= FICHE PROJET PORTFOLIO (corps de page projet) =================
   Classe `portfolio-project-template` sur le bloc HTML ; retirer le <style> inline. */
.portfolio-project-template { font-family: var(--font-corps); color: var(--c-texte); line-height: 1.6; }
/* Galerie des fiches projet (widget de remplacement « Galerie » de gfs-chassis, ex-widget Pro).
   Colonnes et écart viennent des réglages de chaque galerie (variables posées par le widget). */
.gfs-galerie { column-count: var(--galerie-col); column-gap: var(--galerie-ecart); }
/* Écart vertical en padding : les règles de thème sur <figure> (marges remises à 0) l'emportaient sur la marge. */
.gfs-galerie > .gfs-galerie__item { break-inside: avoid; margin: 0; padding: 0 0 var(--galerie-ecart); }
.gfs-galerie__item img { display: block; width: 100%; height: auto; }
@media (max-width: 1024px) { .gfs-galerie { column-count: var(--galerie-col-t); } }
@media (max-width: 767px)  { .gfs-galerie { column-count: var(--galerie-col-m); } }
.portfolio-project-template h2 {
    font-family: var(--font-titre); font-size: var(--fs-h3);
    margin-top: var(--sp-5); margin-bottom: var(--sp-4);
    background: linear-gradient(120deg, var(--c-texte) 40%, var(--c-accent) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; display: inline-block;
}
.portfolio-project-template h3 { font-family: var(--font-titre); font-size: var(--fs-2xl); color: var(--c-texte); margin-top: 0; margin-bottom: var(--sp-3); }
.portfolio-project-template p { margin-bottom: 1.5em; font-size: var(--fs-base); color: var(--c-texte-2); }
.portfolio-project-template strong { color: var(--c-texte); font-weight: 700; }
.project-meta-card {
    background: var(--c-carte); border: 1px solid rgba(var(--c-accent-rgb),0.2);
    border-radius: var(--r-xs); padding: var(--sp-4); margin-bottom: var(--sp-5); box-shadow: var(--shadow-sm);
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%),1fr)); gap: var(--sp-3);
}
.meta-item label { display: block; font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 1px; color: var(--c-accent); margin-bottom: var(--sp-1); font-weight: 700; }
.meta-item span { font-size: var(--fs-ui); font-weight: 500; }
.portfolio-project-template ul { list-style: none; padding-left: var(--sp-2); margin-bottom: var(--sp-4); }
.portfolio-project-template ul li { position: relative; padding-left: var(--sp-4); margin-bottom: var(--sp-2); color: var(--c-texte-2); }
.portfolio-project-template ul li::before { content: ''; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; background-color: var(--c-cta); border-radius: var(--r-full); }
.project-challenge-box { background: rgba(var(--c-cta-rgb),0.05); border-left: 4px solid var(--c-cta); padding: var(--sp-4); border-radius: 0 var(--r-xs) var(--r-xs) 0; margin: var(--sp-5) 0; }
.project-citation-box { background: rgba(var(--c-texte-rgb),0.03); border-left: 4px solid var(--c-texte); padding: var(--sp-3); margin-top: var(--sp-5); font-size: var(--fs-sm); color: var(--c-texte-2); border-radius: 0 var(--r-xs) var(--r-xs) 0; }
.citation-title { font-weight: 700; color: var(--c-texte); display: block; margin-bottom: var(--sp-1); font-family: var(--font-titre); }
.doi-link { color: var(--c-accent); text-decoration: none; font-weight: 600; font-size: var(--fs-xs); display: block; margin-top: var(--sp-2); transition: color var(--t-base) ease; }
.doi-link:hover { color: var(--c-texte); }
.project-links-container { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); margin-bottom: var(--sp-4); }
/* Bouton secondaire de la fiche = composant canonique .cta-secondary (verre clair,
   survol orange + reflet). Style mutualisé dans la section (5) HERO & ÉTIQUETTES :
   le sélecteur .portfolio-project-template .btn-secondary y est groupé avec
   .cta-secondary .elementor-button. Ici, seul le reset spécifique au lien <a>. */
.portfolio-project-template .btn-secondary { text-decoration: none; }
.sep-line { height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--c-texte-rgb),0.15), transparent); margin: var(--sp-6) 0; }

/* ================= PAGE RESSOURCES — cartes d'articles (widget Posts, skin Cards) =================
   SOURCE UNIQUE (consolidée le 30/06/2026 : fusion des anciens blocs « Clean Lab » et
   « gfs-ressources »). Le widget DOIT porter la classe .gfs-ressources.
   Catégorie = étiquette WordPress (tag-…) -> couleur + libellé du bandeau via --cat / --cat-label.
   Pas d'image ni de badge Elementor : le libellé du bandeau est généré en CSS (autonome).
   Carte = l'article (fond/bordure/rayon/bandeau) ; structure interne = .elementor-post__card. */

/* Grille : bornée à 1100 + centrée */
.gfs-ressources .elementor-posts-container { max-width: var(--gfs-w) !important; margin-inline: auto !important; }

/* Couleur + libellé par catégorie (posés sur l'article, hérités par la carte et le bandeau) */
.gfs-ressources .elementor-post { --cat: var(--c-cat-defaut); --cat-label: "Article"; }
.gfs-ressources .elementor-post.tag-figures-de-publication { --cat: var(--c-cat-figures); --cat-label: "Figures de publication";
	--cat-ico: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none' xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cg transform='translate%281.5 1.5%29'%3E%3Crect x='3' y='4' width='18' height='16' rx='2' fill='black' fill-opacity='.28' stroke='none'/%3E%3C/g%3E%3Crect x='3' y='4' width='18' height='16' rx='2' fill='none'/%3E%3Cpath d='M7 16v-3M15 16v-5' fill='none'/%3E%3Cpath d='M11 16V8.5' fill='none' stroke='black'/%3E%3C/svg%3E"); }
.gfs-ressources .elementor-post.tag-posters-graphical-abstracts { --cat: var(--c-cat-posters); --cat-label: "Posters & graphical abstracts";
	--cat-ico: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none' xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cg transform='translate%281.5 1.5%29'%3E%3Crect x='5' y='2.5' width='14' height='17' rx='1.5' fill='black' fill-opacity='.28' stroke='none'/%3E%3C/g%3E%3Crect x='5' y='2.5' width='14' height='17' rx='1.5' fill='none'/%3E%3Cpath d='M12 19.5V22M9 22h6' fill='none'/%3E%3Cpath d='M8 6h8' fill='none'/%3E%3Crect x='8' y='9' width='8' height='6' rx='1' fill='none'/%3E%3Ccircle cx='12' cy='12' r='1.2' fill='black' stroke='none'/%3E%3C/svg%3E"); }
.gfs-ressources .elementor-post.tag-metier-droits-reseaux { --cat: var(--c-cat-metier); --cat-label: "Métier, droits & réseaux";
	--cat-ico: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none' xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cg transform='translate%281.5 1.5%29'%3E%3Cpath d='M6 7h12l-6 10.5z' fill='black' fill-opacity='.28' stroke='none'/%3E%3C/g%3E%3Ccircle cx='6' cy='7' r='2.5' fill='none'/%3E%3Ccircle cx='18' cy='7' r='2.5' fill='none'/%3E%3Ccircle cx='12' cy='17.5' r='2.5' fill='none'/%3E%3Cpath d='M8.5 7h7M7.3 9.2l3.5 6.1M16.7 9.2l-3.5 6.1' fill='none'/%3E%3Ccircle cx='12' cy='17.5' r='1' fill='black' stroke='none'/%3E%3C/svg%3E"); }
.gfs-ressources .elementor-post.tag-identite-visuelle { --cat: var(--c-cat-identite); --cat-label: "Identité visuelle";
	--cat-ico: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none' xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cg transform='translate%281.5 1.5%29'%3E%3Crect x='4.5' y='3' width='15' height='18' rx='2.5' fill='black' fill-opacity='.28' stroke='none'/%3E%3C/g%3E%3Crect x='4.5' y='3' width='15' height='18' rx='2.5' fill='none'/%3E%3Ccircle cx='12' cy='9.5' r='3.2' fill='none'/%3E%3Cpath d='M10 18h4' fill='none'/%3E%3Cpath d='M8.5 15.5h7' fill='none' stroke='black'/%3E%3Ccircle cx='12' cy='9.5' r='1.2' fill='black' stroke='none'/%3E%3C/svg%3E"); }
.gfs-ressources .elementor-post.tag-vulgarisation-mediation { --cat: var(--c-cat-vulga); --cat-label: "Vulgarisation & médiation";
	--cat-ico: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none' xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cg transform='translate%281.5 1.5%29'%3E%3Cpath d='M12 6.5C10 5 6.5 4.5 3.5 5v13c3-.5 6.5 0 8.5 1.5 2-1.5 5.5-2 8.5-1.5V5c-3-.5-6.5 0-8.5 1.5z' fill='black' fill-opacity='.28' stroke='none'/%3E%3C/g%3E%3Cpath d='M12 6.5C10 5 6.5 4.5 3.5 5v13c3-.5 6.5 0 8.5 1.5 2-1.5 5.5-2 8.5-1.5V5c-3-.5-6.5 0-8.5 1.5z' fill='none'/%3E%3Cpath d='M12 6.5v13' fill='none'/%3E%3Cpath d='M6 9h3.5M6 12h3' fill='none'/%3E%3Ccircle cx='16.3' cy='10' r='1.6' fill='black' stroke='none'/%3E%3C/svg%3E"); }
.gfs-ressources .elementor-post.tag-accessibilite-inclusion { --cat: var(--c-cat-access); --cat-label: "Accessibilité & inclusion";
	--cat-ico: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none' xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cg transform='translate%281.5 1.5%29'%3E%3Ccircle cx='12' cy='12' r='9' fill='black' fill-opacity='.28' stroke='none'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='9' fill='none'/%3E%3Cpath d='M7.5 9.5h9M12 9.5v4.5l-2.5 4M12 14l2.5 4' fill='none'/%3E%3Ccircle cx='12' cy='6.6' r='1.4' fill='black' stroke='none'/%3E%3C/svg%3E"); }
.gfs-ressources .elementor-post.tag-ia-integrite { --cat: var(--c-cat-ia); --cat-label: "IA & intégrité de l'image";
	--cat-ico: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none' xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cg transform='translate%281.5 1.5%29'%3E%3Crect x='3' y='4' width='18' height='15' rx='2' fill='black' fill-opacity='.28' stroke='none'/%3E%3C/g%3E%3Crect x='3' y='4' width='18' height='15' rx='2' fill='none'/%3E%3Cpath d='M3 15.5l5-5 4 4 2.5-2.5L21 18' fill='none' stroke='black'/%3E%3Ccircle cx='16' cy='8.5' r='1.5' fill='black' stroke='none'/%3E%3C/svg%3E"); }
.gfs-ressources .elementor-post.tag-outils-methodes { --cat: var(--c-cat-outils); --cat-label: "Outils & méthodes";
	--cat-ico: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none' xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cg transform='translate%281.5 1.5%29'%3E%3Cpath d='M4 20V5l15 15z' fill='black' fill-opacity='.28' stroke='none'/%3E%3C/g%3E%3Cpath d='M4 20V5l15 15z' fill='none'/%3E%3Cpath d='M8 16v-3.5l3.5 3.5z' fill='none'/%3E%3Cpath d='M4 9h2M4 13h2' fill='none'/%3E%3Cpath d='M4 17h2.5' fill='none' stroke='black'/%3E%3C/svg%3E"); }

/* La carte (article) : fond + bordure + rayon + bandeau. Le bandeau ::before est HORS FLUX
   (sinon il fausse le calcul de hauteur du skin Cards et rogne le pied). */
.gfs-ressources .elementor-post {
	position: relative;
	background: var(--c-carte);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	overflow: hidden;
	padding-top: calc(var(--sp-3) * 2 + var(--fs-ui-xs) + var(--sp-1));   /* réserve la place du bandeau */
	padding-bottom: 0;                                                    /* pied collé en bas */
	transition: transform var(--t-base) cubic-bezier(0.25,0.8,0.25,1), border-color var(--t-base) ease;
}
.gfs-ressources .elementor-post:hover {   /* animation : lift simple, sans ombre */
	transform: translateY(-8px);
	border-color: rgba(var(--c-cta-rgb),0.4);
}
.gfs-ressources .elementor-post::before {
	content: var(--cat-label);
	position: absolute; top: 0; left: 0; right: 0; z-index: 1;
	padding: var(--sp-3) var(--sp-4);
	background-color: color-mix(in srgb, var(--cat) 10%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--cat) 22%, transparent);
	color: var(--cat);
	font: 700 var(--fs-ui-xs)/1 var(--font-corps);
	text-transform: uppercase; letter-spacing: 1px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;   /* 1 ligne (sécurité mobile) */
}
/* Icône de catégorie dans le bandeau (grammaire visuelle, section 11) : masque à la couleur
   de la catégorie, tracé dans --cat-ico ci-dessus. Pas d'icône pour « Article » (défaut). */
.gfs-ressources .elementor-post[class*="tag-"]::before { padding-left: calc(var(--sp-4) + var(--ico-cat-taille) + var(--sp-2)); }
.gfs-ressources .elementor-post[class*="tag-"]::after {
	content: ''; position: absolute; z-index: 2;
	top: calc(var(--sp-3) + var(--fs-ui-xs) / 2 - var(--ico-cat-taille) / 2); left: var(--sp-4);
	width: var(--ico-cat-taille); height: var(--ico-cat-taille);
	background-color: var(--cat);
	-webkit-mask: var(--cat-ico) center / contain no-repeat;
	        mask: var(--cat-ico) center / contain no-repeat;
	transition: transform var(--t-base) var(--ease);
}
.gfs-ressources .elementor-post[class*="tag-"]:hover::after { transform: translate(1px, -1px) rotate(-6deg); }
@media (prefers-reduced-motion: reduce) { .gfs-ressources .elementor-post[class*="tag-"]:hover::after { transform: none; } }

/* Structure interne (skin Cards) */
.gfs-ressources .elementor-post__card {
	position: relative;   /* ancre le "Lire l'article" en absolu */
	display: flex; flex-direction: column; height: 100%;
	padding: 0; overflow: hidden;
}
.gfs-ressources .elementor-post__text {
	flex: 1 1 auto; display: flex; flex-direction: column;
	padding: var(--sp-4) !important;   /* gouttières 24px, alignées bandeau / pied (override Elementor) */
}

/* Titre (Marcellus) — carte entièrement cliquable via la pseudo-cible du lien titre */
.gfs-ressources .elementor-post__title {
	margin: var(--sp-3) 0 var(--sp-3) !important;   /* air sous le bandeau de catégorie (demande du 21/10) */
	font-family: var(--font-titre) !important; font-size: var(--fs-2xl) !important;
	line-height: 1.3 !important; overflow-wrap: break-word;
}
.gfs-ressources .elementor-post__title a {
	color: var(--c-texte) !important; transition: color var(--t-base) ease !important;
}
.gfs-ressources .elementor-post:hover .elementor-post__title a { color: var(--c-cta) !important; }
.gfs-ressources .elementor-post__title a::after { content: ''; position: absolute; inset: 0; z-index: 3; }

/* Extrait */
.gfs-ressources .elementor-post__excerpt { margin: 0 !important; }
.gfs-ressources .elementor-post__excerpt p {
	margin: 0; color: var(--c-texte-2);
	font-family: var(--font-corps); font-size: var(--fs-ui); line-height: 1.6;
}

/* Pied : « Lire l'article » à gauche (absolu) + date à droite, trait de séparation, collé en bas.
   Tous deux alignés sur la gouttière 24px du texte et calés à la même hauteur. */
.gfs-ressources .elementor-post__read-more {
	position: absolute !important; left: 0 !important; bottom: var(--sp-3) !important; z-index: 2;
	margin: 0 !important; padding: 0 0 0 var(--sp-4) !important;
	color: var(--c-texte) !important;
	font-family: var(--font-corps) !important; font-weight: 700 !important; font-size: var(--fs-sm) !important; line-height: 1 !important;
	text-transform: uppercase; letter-spacing: 0.5px; text-decoration: none;
	display: inline-flex; align-items: center; gap: var(--sp-1); white-space: nowrap;
	transition: color var(--t-base) ease, transform var(--t-base) ease;
}
.gfs-ressources .elementor-post__read-more::after { content: none !important; }   /* pas de flèche */
.gfs-ressources .elementor-post__read-more:hover { color: var(--cat) !important; transform: translateX(3px); }
.gfs-ressources .elementor-post__meta-data {
	display: flex !important; justify-content: flex-end !important; align-items: flex-end;
	margin: 0 var(--sp-4) !important; padding: var(--sp-3) 0 !important;
	background: transparent; border: none !important;
	border-top: 1px solid rgba(var(--c-texte-rgb),0.10) !important;   /* trait de séparation */
}
.gfs-ressources .elementor-post__meta-data .elementor-post-date {
	margin-left: auto !important; color: var(--c-gris-doux);
	font: 400 0.64rem/1 var(--font-corps);
}

/* ================================================================================
   (8) ARTICLES DE BLOG
   Portée : tous les corps d'article (.article-content-wrapper).
   Sous-système autonome (numérotation interne 1–8 conservée).
   ================================================================================ */
/* --- 8.0 ENTOURAGE DE L'ARTICLE ET DE LA FICHE PROJET (extension gfs-chassis) ---
   Remplace les gabarits Pro « Ressources Articles » et « Réalisations Portfolio » :
   titre, ligne auteur + date, sommaire, partage, bandeau newsletter ; surtitre,
   titre, filet et image à la une pour la fiche projet. */
.gfs-single { display: flex; flex-direction: column; gap: var(--sp-4); padding-top: var(--single-espace-haut); }
.gfs-single__entete { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); }
.gfs-single__titre { margin: 0; }
.gfs-single__titre h1 { margin: 0; text-align: center; }
/* Largeur : exactement celle des pages (1100 px, cf. section 1) et du contenu de l'article,
   avec la même marge latérale que les conteneurs Elementor sur petit écran.
   Le contenu (.gfs-single__contenu) n'est pas ciblé : ses conteneurs Elementor se règlent seuls. */
.gfs-single__entete,
.gfs-single__titre,
.gfs-single__image,
.gfs-single .gfs-partage,
.gfs-single #gfs-sommaire,
.gfs-single .gfs-article-infos {
    width: calc(100% - 2 * var(--gouttiere-elementor)); max-width: var(--gfs-w);
    margin-inline: auto; box-sizing: border-box;
}
/* Article envoyé par site.command (choix 13) : son contenu n'est plus dans un conteneur
   Elementor, qui apportait la marge latérale. On la redonne, à l'identique. */
.gfs-single__contenu:not(:has(> .elementor)) { padding-inline: var(--gouttiere-elementor); box-sizing: border-box; }
/* Ordinateur : colonne de lecture à 60 % de l'écran, comme les gabarits Pro (« largeur boxed 60 % »,
   relevé dans le modèle le 21/10). Le contenu de l'article suit la même colonne. */
@media (min-width: 1025px) {
    .gfs-single__entete, .gfs-single__titre, .gfs-single__image, .gfs-single .gfs-partage,
    .gfs-single #gfs-sommaire, .gfs-single .gfs-article-infos, .gfs-single__contenu {
        width: var(--single-largeur); max-width: var(--gfs-w); margin-inline: auto;
    }
}
.gfs-single__image img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); }
/* Préfixe .gfs-single : Astra décale les listes et souligne les liens du contenu
   (.entry-content ul / a, spécificité 0,1,1) ; deux classes passent devant. */
.gfs-single .gfs-article-infos {
    display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2);
    list-style: none; margin-block: 0; padding-block: 0;   /* largeur et centrage : règle commune juste au-dessus */
    font-family: var(--font-corps); font-size: var(--fs-ui-lg); color: var(--c-texte);
}
.gfs-single .gfs-article-infos li { display: flex; align-items: center; gap: var(--sp-1); margin: 0; }
.gfs-single .gfs-article-infos a { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--c-accent); text-decoration: none; }
.gfs-single .gfs-article-infos svg { width: 15px; height: 15px; fill: currentColor; }   /* glyphe : littéral toléré */
/* Sommaire « Dans cet article » (extension gfs-sommaire), 21/10/2026 : Astra soulignait les liens
   et décalait les listes de 3em (titres décollés du bord de la carte). Liens sans soulignement,
   titres alignés sur « Dans cet article », sous-titres rattachés par un filet violet léger.
   Les couleurs et le survol restent ceux de gfs-sommaire.css. */
.gfs-single #gfs-sommaire a { text-decoration: none; }
.gfs-single #gfs-sommaire .gfs-toc__list { margin: var(--sp-3) 0 0; padding: var(--sp-2) 0 0; }
.gfs-single #gfs-sommaire .gfs-toc__list > li { margin: 0; }
.gfs-single #gfs-sommaire .gfs-toc__num:empty { display: none; }   /* titre sans numéro : pas de colonne vide */
.gfs-single #gfs-sommaire .gfs-toc__link { font-weight: 500; padding: 6px var(--sp-2); }
.gfs-single #gfs-sommaire .gfs-toc__sublist {
    margin: 0 0 var(--sp-2) var(--sp-3); padding: 0 0 0 var(--sp-2);
    border-left: 2px solid rgba(var(--c-accent-rgb), .15);
}
.gfs-single #gfs-sommaire .gfs-toc__sublink { padding: 3px var(--sp-2); }

/* --- 8.1 TYPOGRAPHIE --- */
.article-content-wrapper h1 {
    font-family: var(--font-titre);
    color: var(--c-texte);
    font-size: var(--fs-h1b);
    line-height: 1.2;
    margin-bottom: var(--sp-5);
    text-align: center;
}
.article-content-wrapper h2 {
    font-family: var(--font-titre);
    color: var(--c-texte);
    font-size: var(--fs-h3);
    margin-top: var(--sp-6);
    margin-bottom: var(--sp-4);
    line-height: 1.3;
    position: relative;
    display: inline-block;
}
.article-content-wrapper h2::after {
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    background: var(--c-cta);
    margin-top: var(--sp-2);
    border-radius: 2px;
}
.article-content-wrapper h3 {
    font-family: var(--font-corps);
    color: var(--c-accent);
    font-size: var(--fs-2xl);
    margin-top: var(--sp-5);
    margin-bottom: var(--sp-3);
    font-weight: 700;
}
.article-content-wrapper h4 {
    font-family: var(--font-corps);
    color: var(--c-texte);
    font-size: var(--fs-lg);
    margin-top: var(--sp-4);
    margin-bottom: var(--sp-2);
    font-weight: 700;
    line-height: 1.4;
}
.article-content-wrapper p { margin-bottom: var(--sp-4); }
.article-content-wrapper strong { color: var(--c-texte); font-weight: 600; }
.article-content-wrapper a {
    color: var(--c-accent);   /* violet de marque, cf. note accessibilité (10) */
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: color var(--t-base);
}
.article-content-wrapper a:hover { color: var(--c-texte); }
/* --- 8.2 STATS ROW (chiffres-clés) --- */
.stats-row {
    display: flex;
    gap: var(--sp-4);
    margin: var(--sp-5) 0;
    flex-wrap: wrap;
}
.stat-card {   /* recette = set canonique (BLANCHE) ; rayon désormais --r-lg */
    flex: 1;
    padding: var(--sp-4);
    text-align: center;
}
.stat-number {
    display: block;
    font-family: var(--font-corps);
    font-weight: 700;
    font-size: var(--fs-h2b);
    color: var(--c-cta);
    margin-bottom: var(--sp-1);
}
.stat-label {
    font-family: var(--font-corps);
    font-size: var(--fs-sm);
    color: var(--c-texte);
    font-weight: 600;
}
/* --- 8.3 CITATIONS --- */
.article-content-wrapper blockquote {
    background: linear-gradient(135deg, var(--c-carte-violet) 0%, var(--c-carte) 100%);
    border-left: 4px solid var(--c-accent);
    padding: var(--sp-4);
    margin: var(--sp-5) 0;
    font-family: var(--font-titre);
    font-size: var(--fs-xl);
    color: var(--c-texte);
    font-style: italic;
    border-radius: 0 16px 16px 0;
}
/* --- 8.4 LISTES --- */
/* .article-list (+ .check-list / .list-avoid + sous-liste) → voir (6.0 bis)
   LISTES — SET CANONIQUE. .article-list = alias de .gfs-list--bullet.
   .article-list margin-bottom conservé ici (rythme éditorial). */
.article-list { margin-bottom: var(--sp-4); }
/* --- 8.5 ENCADRÉS (callouts) --- */
.article-callout {
    display: flex; gap: var(--sp-4); padding: var(--sp-4);
    border-radius: var(--r-sm); margin: var(--sp-5) 0; align-items: flex-start;
}
.callout-icon {
    font-size: 24px; background: white; width: 45px; height: 45px;
    border-radius: var(--r-full); display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-sm); flex-shrink: 0;
}
/* Icône de la grammaire visuelle (section 11) à la place de l'emoji :
   Remplace l'emoji de .callout-icon par l'icône du type d'encadré :
   .callout-tip → GFS_ico_astuce · .callout-info → GFS_ico_a-retenir
   .callout-warning → GFS_ico_attention · encadré « Tester ma figure » → GFS_ico_diagnostic
   Le reste du style des encadrés (fonds, titres) ne change pas : section 8.5 du CSS global. */
.callout-icon .gfs-ico { --ico-taille: 24px; }
.callout-icon:has(.gfs-ico) { font-size: 0; }   /* neutralise la taille prévue pour l'emoji */
.callout-content h4 {
    font-family: var(--font-corps); font-weight: 700;
    margin: 0 0 var(--sp-1) 0; font-size: var(--fs-md);
}
.callout-content p { margin: 0; font-size: var(--fs-base); }
.callout-tip     { background: rgba(var(--c-cta-rgb), 0.08); border: 1px solid rgba(var(--c-cta-rgb), 0.2); }
.callout-tip h4  { color: var(--c-cta-fonce); }
.callout-info    { background: rgba(var(--c-texte-rgb), 0.05);   border: 1px solid var(--c-border); }
.callout-info h4 { color: var(--c-texte); }
.callout-warning    { background: rgba(var(--c-salmon-rgb), 0.1); border: 1px solid rgba(var(--c-salmon-rgb), 0.3); }
.callout-warning h4 { color: var(--c-rouge-fonce); }
/* --- 8.6 TABLEAUX --- */
.table-responsive {
    overflow-x: auto; margin: var(--sp-5) 0; border-radius: var(--r-sm);
    box-shadow: var(--shadow-sm);
}
.article-table { width: 100%; border-collapse: collapse; background: white; font-size: var(--fs-ui); }
.article-table th {
    background: var(--c-texte); color: white;
    font-family: var(--font-corps);
    font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px;
    padding: var(--sp-3) var(--sp-4); text-align: left;
}
.article-table td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid rgba(var(--c-texte-rgb), 0.05); }
.article-table tr:last-child td { border-bottom: none; }
.article-table tr:nth-child(even) { background: var(--c-blanc-casse); }
.article-table th > .gfs-ico { vertical-align: -0.25em; margin-right: var(--sp-1); }   /* croix / coche en tête de colonne (ex-❌ ✅) */
/* --- 8.7 CTA FINAL — bloc FONCÉ qui se détache (CTA principal des articles) --- */
.article-glass-cta {
    background: var(--c-texte);
    border: 1px solid rgba(var(--c-carte-rgb), 0.12);
    border-radius: var(--r-glass-2); padding: var(--sp-6) var(--sp-5); margin-top: var(--sp-7); text-align: center;
    box-shadow: 0 24px 55px rgba(var(--c-texte-rgb), 0.25);   /* effet décoratif : élévation marquée pour détacher le bloc */
}
.article-glass-cta h2 {
    font-family: var(--font-titre); color: var(--c-carte); font-size: var(--fs-h3);
    margin-top: 0; margin-bottom: var(--sp-4);
}
.article-glass-cta h2::after { display: none; }
/* Icône étincelle fixe en tête de titre, identique sur tous les articles (remplace les emojis
   🚀/📩/👋 propres à chaque article). SVG en mask → couleur pilotée par le token (orange). */
.article-glass-cta h2 img.emoji { display: none !important; }   /* override WordPress core img.emoji{display:inline !important} */
.article-glass-cta h2::before {
    content: ""; display: inline-block; width: 0.85em; height: 0.85em; margin-right: 0.4em; vertical-align: -0.08em;
    background-color: var(--c-cta);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 14 9.5 21.5 12 14 14.5 12 22 10 14.5 2.5 12 10 9.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 14 9.5 21.5 12 14 14.5 12 22 10 14.5 2.5 12 10 9.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.article-glass-cta p { color: var(--c-texte-clair); font-size: var(--fs-md); line-height: 1.6; margin-bottom: var(--sp-4); }
.article-glass-cta strong { color: var(--c-carte); }   /* gras lisible sur le fond foncé (sinon bleu nuit sur bleu nuit) */
/* CTA secondaire « Tester ma figure » (encadré CLAIR) : bouton ORANGE plein, bleu nuit sur orange
   (contraste ~6.5:1, accessible). Survol = inversion orange/blanc + léger soulèvement. */
.cta-secondary-orange-btn {
    display: inline-block;
    margin-top: var(--sp-2);
    background: var(--c-cta);
    color: var(--c-texte) !important;
    font-family: var(--font-corps);
    font-weight: 700;
    font-size: var(--fs-ui-lg);
    text-decoration: none !important;
    padding: var(--sp-3) var(--sp-6);
    border-radius: var(--r-pill);
    border: 2px solid var(--c-cta);
    box-shadow: 0 6px 18px rgba(var(--c-cta-rgb), 0.35);   /* effet décoratif : ombre orangée */
    transition: background var(--t-base), color var(--t-base), border-color var(--t-base), transform var(--t-fast), box-shadow var(--t-base);
}
.cta-secondary-orange-btn:hover {
    background: var(--c-carte);
    color: var(--c-cta) !important;
    border-color: var(--c-cta);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(var(--c-cta-rgb), 0.45);   /* effet décoratif : ombre renforcée au survol */
}
/* CTA principal d'article (bloc FONCÉ) : le lien direct est auto-stylé en bouton FANTÔME sur fond sombre
   (contour clair, verre léger, texte blanc), cohérent avec le CTA foncé « mon parcours » (.cta-secondary-dark).
   Survol → texte orange. Aucune classe à ajouter article par article. */
.article-glass-cta > a {
    display: inline-block;
    margin-top: var(--sp-2);
    background: rgba(var(--c-carte-rgb), 0.06);
    color: var(--c-carte) !important;
    font-family: var(--font-corps);
    font-weight: 700;
    font-size: var(--fs-ui-lg);
    text-decoration: none !important;
    padding: var(--sp-3) var(--sp-6);
    border-radius: var(--r-pill);
    border: 1px solid rgba(var(--c-carte-rgb), 0.5);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    transition: background var(--t-base), color var(--t-base), border-color var(--t-base), transform var(--t-fast);
}
.article-glass-cta > a:hover {
    background: rgba(var(--c-carte-rgb), 0.12);
    color: var(--c-cta) !important;
    border-color: rgba(var(--c-cta-rgb), 0.8);
    transform: translateY(-2px);
}
/* Flèche en remplacement du doigt 👉 : on masque l'emoji (rendu par WordPress en <img class="emoji">)
   et on pose une flèche typographique en suffixe → cohérent sur tous les articles, sans rééditer le markup. */
.article-glass-cta > a img.emoji { display: none !important; }   /* !important = override de la règle WordPress core img.emoji{display:inline !important} */
.article-glass-cta > a::after { content: " →"; }
/* CTA secondaire « Tester ma figure » dans un encadré (.article-callout) : l'encadré est en flex
   avec une icône à gauche, donc centrer le bouton dans la colonne de contenu le laisse décalé à droite.
   On tire la ligne du bouton vers la gauche de (icône 45px + gouttière --sp-4) pour qu'elle reprenne
   TOUTE la largeur du bloc, puis on centre. Réinitialisé en mobile (colonne, plus d'icône à gauche). */
.article-callout .callout-content > p:has(> .cta-secondary-orange-btn) {
    margin-left: calc(-45px - var(--sp-4));   /* 45px = largeur de .callout-icon */
    text-align: center;
}
.article-callout .cta-secondary-orange-btn { display: inline-block; margin-top: var(--sp-3); }
/* --- 8.8 RESPONSIVE ARTICLES --- */
@media (max-width: 768px) {
    .article-content-wrapper { padding: 0 var(--sp-4) var(--sp-5) var(--sp-4); font-size: var(--fs-base); }
    .article-content-wrapper h1 { font-size: var(--fs-h3); }
    .article-content-wrapper h2 { font-size: var(--fs-4xl); }
    .article-callout { flex-direction: column; gap: var(--sp-3); }
    .article-callout .callout-content > p:has(> .cta-secondary-orange-btn) { margin-left: 0; }   /* colonne : plus de décalage d'icône à compenser */
    .article-glass-cta { padding: var(--sp-5) var(--sp-4); }
    .stats-row { flex-direction: column; }
}
/* ================================================================================
   (9) RESPONSIVE — POLITIQUE DE BREAKPOINTS
   --------------------------------------------------------------------------------
   Choix de maintenance : le responsive est COLOCALISÉ avec chaque composant
   (la media query suit directement le bloc concerné), pour qu'éditer un composant
   reste autonome et limiter tout risque de régression.
   Échelle UNIQUE dans tout le fichier :
     • 1024px  → tablette
     • 768px   → téléphone
   Anciennes valeurs hors-échelle supprimées : 767px (boutons), 600px (Audience),
   900px (Diagnostic). Aucun autre breakpoint ne doit être réintroduit.
   ================================================================================ */
/* ================================================================================
   (10) ACCESSIBILITÉ — TEXTE DE LECTURE SUR FOND CLAIR
   Les liens d'article et les accroches passent au VIOLET de marque var(--c-accent)
   (≈5:1 sur blanc : lisible ET cohérent — c'est déjà la couleur de liens de la charte).
   var(--c-cta) est CONSERVÉ pour : fonds de boutons, texte sur fond sombre, ET les grands
   accents décoratifs (chiffres-clés .stat-number, mots accentués de titre .highlight,
   survols de cartes), où il agit comme accent chaud, pas comme texte de lecture.
   → Règles fusionnées dans leurs sections : .article-content-wrapper a (section 8),
     .service-lead (section 6). Cette note reste la référence du choix violet.
   ================================================================================ */
/* ================================================================================
   (11) ICÔNES, MOTIF DE FOND, PAGE 404 (grammaire visuelle, octobre 2026)
   Trait violet + aplat décalé + un détail orange. Source des SVG et planche :
   0_Global/Icones/ (voir _LISEZMOI.md). Script : uploads/outils/gfs-icones.js.
   Tokens : bloc « ICÔNES » du :root.
   ================================================================================ */
/* ---------- (11.2) BASE ---------- */
.gfs-ico {
  width: var(--ico-taille); height: var(--ico-taille);
  stroke: var(--ico-c-trait); stroke-width: var(--ico-trait);
  fill: none; overflow: visible; flex: none;
}
.gfs-ico .ico-t   { fill: none; stroke: var(--ico-c-trait); }
.gfs-ico .ico-acc { fill: none; stroke: var(--ico-c-accent); }
.gfs-ico .ico-dot { fill: var(--ico-c-accent); stroke: none; }
.gfs-ico .ico-ap  { stroke: none; }
.gfs-ico .ico-ap > * { fill: var(--ico-aplat); stroke: none; }
.gfs-ico .ico-ap {
  transform: translate(var(--ico-decal), var(--ico-decal));
  transition: transform var(--ico-duree) var(--ico-ease);
}
.gfs-ico .ico-dot {
  transform-box: fill-box; transform-origin: center;
}

/* Variante sur fond sombre (cartes --dark, bandeau sombre) */
.gfs-ico--on-dark,
:is(.service-card--feat, .value-card--feat) .gfs-ico {   /* cartes vedettes sombres : trait blanc, détail orange */
  --ico-c-trait: var(--c-carte); --ico-aplat: rgba(var(--c-carte-rgb), .18); }

/* Tailles prêtes à l'emploi */
.gfs-ico--s { --ico-taille: 18px; }   /* flèches, puces, liens */
.gfs-ico--l { --ico-taille: 48px; }   /* grand format (entête de section) */

/* ---------- (11.3) SURVOL : l'aplat glisse, le point s'anime ----------
   Déclenché par l'icône elle-même OU par la carte qui la contient. */
.gfs-ico:hover .ico-ap,
:is(.service-card, .audience-card-static, .value-card, .feature-card, .gfs-ico-host):hover .gfs-ico .ico-ap {
  transform: translate(var(--ico-decal-survol), var(--ico-decal-survol));
}
.gfs-ico:hover .ico-dot,
:is(.service-card, .audience-card-static, .value-card, .feature-card, .gfs-ico-host):hover .gfs-ico .ico-dot {
  animation: gfs-ico-pulse .6s var(--ico-ease);
}
@keyframes gfs-ico-pulse { 0%,100% { transform: scale(1); } 45% { transform: scale(1.45); } }

/* Flèches : avancent d'un cran au survol du lien */
.gfs-ico--fleche, .gfs-ico--fleche-externe { transition: transform var(--ico-duree) var(--ico-ease); }
a:hover > .gfs-ico--fleche, .gfs-ico-host:hover .gfs-ico--fleche { transform: translateX(3px); }
a:hover > .gfs-ico--fleche-externe, .gfs-ico-host:hover .gfs-ico--fleche-externe { transform: translate(2px,-2px); }

/* ---------- (11.4) APPARITION : le trait se dessine, puis l'aplat, l'orange et le point ----------
   Actif seulement si gfs-icones.js a posé .ico-js sur <html> (sans JS : tout est visible).
   --ico-i : rang de l'icône dans son groupe (posé par le JS) → les icônes d'une même rangée
   se dessinent l'une après l'autre. */
.ico-js .gfs-ico { --ico-d: calc(var(--ico-i, 0) * var(--ico-cascade)); }
/* état de départ */
/* --len = longueur réelle du tracé, mesurée par le JS. +1px pour masquer le bout arrondi. */
.ico-js .gfs-ico :is(.ico-t, .ico-acc) { stroke-dasharray: var(--len) calc(var(--len) + 2px); }
.ico-js .gfs-ico:not(.is-visible) :is(.ico-t, .ico-acc) { stroke-dashoffset: calc(var(--len) + 1px); }
.ico-js .gfs-ico:not(.is-visible) .ico-ap  { transform: translate(0,0); opacity: 0; }
.ico-js .gfs-ico:not(.is-visible) .ico-dot { transform: scale(0); }
/* 1. le trait violet se dessine */
.ico-js .gfs-ico.is-visible .ico-t {   /* transition seulement à l'apparition : le retour à « non tracé » (mesure) est instantané */
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--ico-duree-trait) cubic-bezier(.6,.05,.3,1) var(--ico-d);
}
/* 2. l'aplat glisse en place pendant la fin du tracé */
.ico-js .gfs-ico .ico-ap {
  transition: transform var(--ico-duree) var(--ico-ease),
              opacity var(--ico-duree-apparition) ease calc(var(--ico-d) + var(--ico-duree-trait) * .55);
}
.ico-js .gfs-ico.is-visible .ico-ap {
  transition: transform var(--ico-duree-apparition) var(--ico-ease) calc(var(--ico-d) + var(--ico-duree-trait) * .55),
              opacity var(--ico-duree-apparition) ease calc(var(--ico-d) + var(--ico-duree-trait) * .55);
}
.ico-js .gfs-ico.is-visible:hover .ico-ap,
.ico-js :is(.service-card, .audience-card-static, .value-card, .feature-card, .gfs-ico-host):hover .gfs-ico.is-visible .ico-ap {
  transition: transform var(--ico-duree) var(--ico-ease);   /* au survol : réponse immédiate */
}
/* 3. le détail orange se trace */
.ico-js .gfs-ico.is-visible .ico-acc {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .5s var(--ico-ease) calc(var(--ico-d) + var(--ico-duree-trait) * .8);
}
/* 4. le point arrive en dernier */
.ico-js .gfs-ico.is-visible .ico-dot {
  transition: transform .45s cubic-bezier(.3,1.6,.5,1) calc(var(--ico-d) + var(--ico-duree-trait));
}
/* Pendant la mesure (gfs-icones.js), aucune transition : l'icône passe d'un coup à « non tracée »,
   sans rien animer à l'envers. */
.ico-js .gfs-ico.ico-sans-transition.ico-sans-transition :is(.ico-t, .ico-acc, .ico-ap, .ico-dot),
.ico-js .sep-molecular.ico-sans-transition, .ico-js .sep-molecular.ico-sans-transition::before, .ico-js .sep-molecular.ico-sans-transition::after { transition: none; }
/* flèches : tracé plus court */
.ico-js .gfs-ico--fleche, .ico-js .gfs-ico--fleche-externe { --ico-duree-trait: .5s; }

/* ---------- (11.5) PUCES ET COCHES DE LISTE (remplacent • et ✓) ---------- */
.gfs-list--ico { list-style: none; padding: 0; margin: 0; }
.gfs-list--ico > li { display: flex; gap: .6em; align-items: flex-start; }
.gfs-list--ico > li > .gfs-ico { --ico-taille: 1.1em; margin-top: .2em; }

/* ---------- (11.6) SÉPARATEUR MOLÉCULAIRE (version icône) ---------- */
.sep-ico {
  display: flex; align-items: center; gap: 14px;
  width: 100%; max-width: var(--gfs-w, 1100px); margin: var(--sp-7, 56px) auto;
}
.sep-ico::before, .sep-ico::after {
  content: ''; flex: 1; height: 1.5px;
  background: rgba(var(--c-texte-rgb, 44,58,83), .15);
  transform-origin: right; transition: transform .9s var(--ico-ease);
}
.sep-ico::after { transform-origin: left; }
.sep-ico .gfs-ico { --ico-taille: 26px; }
.ico-js .sep-ico:not(.is-visible)::before,
.ico-js .sep-ico:not(.is-visible)::after { transform: scaleX(0); }

/* ---------- (11.7) ACCESSIBILITÉ : « réduire les animations » coupe tout mouvement ----------
   gfs-icones.js ne s'active pas dans ce cas : les icônes restent tracées et immobiles.
   Ici on coupe ce qui reste : survol, pulsation, flèches, séparateur. */
@media (prefers-reduced-motion: reduce) {
  .gfs-ico .ico-ap, .gfs-ico--fleche, .gfs-ico--fleche-externe,
  .sep-ico::before, .sep-ico::after { transition: none; }
  .gfs-ico:hover .ico-dot,
  :is(.service-card, .audience-card-static, .value-card, .feature-card, .gfs-ico-host):hover .gfs-ico .ico-dot { animation: none; }
}


/* ---------- (11.9) MOTIF DE FOND MOLÉCULAIRE ----------
   Réseau d'hexagones incomplet (liaisons et atomes), posé en filigrane derrière le contenu.
   Couleur et opacité passent par les tokens : le motif est un masque, la couleur vient de --motif-c.
   Usage : ajouter .gfs-motif sur la section (+ .gfs-motif--coin ou --plein, + --anime si voulu). */
.gfs-motif, :is(.final-cta-band, .e-con.e-parent:has(> .elementor-widget .gfs-container > .final-cta)), body:has(:is(.final-cta-band, .gfs-container > .final-cta)) footer.gfs-pied,
:is(.e-con.e-parent, main.site-main:not(:has(.e-con))):has(:is(.services-hero-section, .resources-hero-section, .about-hero-section, .page-diag .hero-simple-container)) { position: relative; isolation: isolate; }
.gfs-motif::before, .gfs-motif::after,
:is(.final-cta-band, .e-con.e-parent:has(> .elementor-widget .gfs-container > .final-cta))::before, :is(.final-cta-band, .e-con.e-parent:has(> .elementor-widget .gfs-container > .final-cta))::after,
body:has(:is(.final-cta-band, .gfs-container > .final-cta)) footer.gfs-pied::before, body:has(:is(.final-cta-band, .gfs-container > .final-cta)) footer.gfs-pied::after,
:is(.e-con.e-parent, main.site-main:not(:has(.e-con))):has(:is(.services-hero-section, .resources-hero-section, .about-hero-section, .page-diag .hero-simple-container))::before, :is(.e-con.e-parent, main.site-main:not(:has(.e-con))):has(:is(.services-hero-section, .resources-hero-section, .about-hero-section, .page-diag .hero-simple-container))::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  -webkit-mask-image: var(--motif-src), var(--motif-fondu);
          mask-image: var(--motif-src), var(--motif-fondu);
  -webkit-mask-size: var(--motif-taille), 100% 100%;
          mask-size: var(--motif-taille), 100% 100%;
  -webkit-mask-repeat: repeat, no-repeat;
          mask-repeat: repeat, no-repeat;
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  border-radius: inherit;
}
.gfs-motif::before, :is(.final-cta-band, .e-con.e-parent:has(> .elementor-widget .gfs-container > .final-cta))::before, body:has(:is(.final-cta-band, .gfs-container > .final-cta)) footer.gfs-pied::before, :is(.e-con.e-parent, main.site-main:not(:has(.e-con))):has(:is(.services-hero-section, .resources-hero-section, .about-hero-section, .page-diag .hero-simple-container))::before {
  --motif-src: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135.10 156.00' width='135.10' height='156.00'%3E%3Cpath d='M0.0 104.0L22.5 91.0M67.5 65.0L67.5 91.0M135.1 130.0L157.6 143.0M0.0 104.0L0.0 130.0M-22.5 65.0L0.0 52.0M112.6 65.0L135.1 52.0M67.5 13.0L90.1 26.0M135.1 104.0L157.6 91.0M22.5 -13.0L22.5 13.0M45.0 26.0L67.5 13.0M45.0 26.0L45.0 52.0M45.0 104.0L45.0 130.0M-22.5 13.0L0.0 26.0M135.1 52.0L157.6 65.0M22.5 65.0L22.5 91.0M67.5 143.0L90.1 130.0M-0.0 52.0L22.5 65.0M90.1 26.0L90.1 52.0M112.6 143.0L112.6 169.0M90.1 130.0L112.6 143.0M135.1 104.0L135.1 130.0M45.0 130.0L67.5 143.0M45.0 104.0L67.5 91.0M-22.5 91.0L0.0 104.0M22.5 143.0L22.5 169.0M67.5 -13.0L67.5 13.0M67.5 65.0L90.1 52.0M90.1 104.0L90.1 130.0M22.5 65.0L45.0 52.0M90.1 52.0L112.6 65.0M112.6 -13.0L112.6 13.0M67.5 143.0L67.5 169.0M90.1 104.0L112.6 91.0M112.6 13.0L135.1 26.0M22.5 91.0L45.0 104.0M45.0 52.0L67.5 65.0M112.6 91.0L135.1 104.0M-0.0 130.0L22.5 143.0' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
  background: var(--motif-c); opacity: var(--motif-opacite);
}
.gfs-motif::after, :is(.final-cta-band, .e-con.e-parent:has(> .elementor-widget .gfs-container > .final-cta))::after, body:has(:is(.final-cta-band, .gfs-container > .final-cta)) footer.gfs-pied::after, :is(.e-con.e-parent, main.site-main:not(:has(.e-con))):has(:is(.services-hero-section, .resources-hero-section, .about-hero-section, .page-diag .hero-simple-container))::after {
  --motif-src: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135.10 156.00' width='135.10' height='156.00'%3E%3Ccircle cx='135.1' cy='130.0' r='2.6'/%3E%3Ccircle cx='67.5' cy='65.0' r='2.6'/%3E%3Ccircle cx='135.1' cy='52.0' r='2.6'/%3E%3Ccircle cx='90.1' cy='130.0' r='2.6'/%3E%3Ccircle cx='22.5' cy='65.0' r='2.6'/%3E%3Ccircle cx='0.0' cy='130.0' r='2.6'/%3E%3Ccircle cx='0.0' cy='52.0' r='2.6'/%3E%3Ccircle cx='67.5' cy='13.0' r='2.6'/%3E%3C/svg%3E");
  background: var(--motif-c-atome); opacity: var(--motif-opacite-atome);
}
/* Variantes de zone visible */
.gfs-motif--plein  { --motif-fondu: radial-gradient(ellipse 90% 90% at 50% 50%, var(--masque-plein) 30%, transparent 85%); }
.gfs-motif--coin   { --motif-fondu: radial-gradient(ellipse 80% 90% at 100% 0%, var(--masque-plein) 10%, transparent 75%); }
.gfs-motif--bas    { --motif-fondu: radial-gradient(ellipse 60% 95% at 100% 100%, var(--masque-plein) 0%, transparent 78%); }   /* part du coin bas droit et monte vers l'intérieur */
/* Bandeau sombre final (CTA + newsletter), qui se marie avec le pied de page : .final-cta-band sur les pages
   servies par gfs-chassis ; sur l'accueil, conteneur Elementor reconnu par son contenu.
   Le réseau part du coin bas droit de tout le bandeau. */
:is(.final-cta-band, .e-con.e-parent:has(> .elementor-widget .gfs-container > .final-cta)), body:has(:is(.final-cta-band, .gfs-container > .final-cta)) footer.gfs-pied { --motif-c: var(--c-carte); --motif-opacite: var(--motif-opacite-sombre); }
/* Bandeau sombre + pied de page = un seul cadre : le réseau part du coin bas droit du pied de page et remonte
   dans le bandeau. Tuile calée sur leur jonction (bas du bandeau / haut du pied) : motif continu de l'un à l'autre. */
:is(.final-cta-band, .e-con.e-parent:has(> .elementor-widget .gfs-container > .final-cta)) { --motif-fondu: radial-gradient(var(--motif-pied-zone) at 100% calc(100% + var(--motif-pied-hauteur)), var(--masque-plein) 0%, transparent 100%); }
/* Second départ, en haut à gauche du bandeau : les deux réseaux se répondent en diagonale et laissent le centre
   (titre, bouton) dégagé. Troisième couche de masque, ajoutée (add) à celle du coin bas droit. */
:is(.final-cta-band, .e-con.e-parent:has(> .elementor-widget .gfs-container > .final-cta))::before, :is(.final-cta-band, .e-con.e-parent:has(> .elementor-widget .gfs-container > .final-cta))::after {
  -webkit-mask-image: var(--motif-src), var(--motif-fondu), var(--motif-fondu-haut);
          mask-image: var(--motif-src), var(--motif-fondu), var(--motif-fondu-haut);
  -webkit-mask-size: var(--motif-taille), 100% 100%, 100% 100%;
          mask-size: var(--motif-taille), 100% 100%, 100% 100%;
  -webkit-mask-repeat: repeat, no-repeat, no-repeat;
          mask-repeat: repeat, no-repeat, no-repeat;
  -webkit-mask-position: right bottom, 0 0, 0 0;
          mask-position: right bottom, 0 0, 0 0;
  -webkit-mask-composite: source-in, source-over;
          mask-composite: intersect, add;
}
body:has(:is(.final-cta-band, .gfs-container > .final-cta)) footer.gfs-pied { --motif-fondu: radial-gradient(var(--motif-pied-zone) at 100% 100%, var(--masque-plein) 0%, transparent 100%); }
/* Pied : même structure de masque que le bandeau (3 couches, la 3e vide), sinon le navigateur ne rend pas
   la tuile tout à fait au même endroit et la jointure bandeau / pied se voit. */
body:has(:is(.final-cta-band, .gfs-container > .final-cta)) footer.gfs-pied::before, body:has(:is(.final-cta-band, .gfs-container > .final-cta)) footer.gfs-pied::after {
  -webkit-mask-image: var(--motif-src), var(--motif-fondu), linear-gradient(transparent, transparent);
          mask-image: var(--motif-src), var(--motif-fondu), linear-gradient(transparent, transparent);
  -webkit-mask-size: var(--motif-taille), 100% 100%, 100% 100%;
          mask-size: var(--motif-taille), 100% 100%, 100% 100%;
  -webkit-mask-repeat: repeat, no-repeat, no-repeat;
          mask-repeat: repeat, no-repeat, no-repeat;
  -webkit-mask-position: right top, 0 0, 0 0;
          mask-position: right top, 0 0, 0 0;
  -webkit-mask-composite: source-in, source-over;
          mask-composite: intersect, add;
}
/* Heros des pages intérieures (Services, Diagnostic, Ressources, À propos) : le réseau part du coin
   haut droit de toute la section (conteneur Elementor, ou <main> sur les pages servies par gfs-chassis).
   Zone en px : même rendu quelle que soit la hauteur de la page. */
:is(.e-con.e-parent, main.site-main:not(:has(.e-con))):has(:is(.services-hero-section, .resources-hero-section, .about-hero-section, .page-diag .hero-simple-container)) { --motif-fondu: radial-gradient(var(--motif-coin-zone) at 100% 0%, var(--masque-plein) 0%, transparent 100%); }
:is(.e-con.e-parent, main.site-main:not(:has(.e-con))):has(:is(.services-hero-section, .resources-hero-section, .about-hero-section, .page-diag .hero-simple-container))::before, :is(.e-con.e-parent, main.site-main:not(:has(.e-con))):has(:is(.services-hero-section, .resources-hero-section, .about-hero-section, .page-diag .hero-simple-container))::after { top: calc(-1 * var(--motif-debord-haut)); }   /* le réseau passe sous l'en-tête */
/* Sur fond sombre : liaisons blanches */
.gfs-motif--on-dark { --motif-c: var(--c-carte); --motif-opacite: .1; }
/* Dérive très lente du réseau */
.gfs-motif--anime::before, .gfs-motif--anime::after { animation: gfs-motif-derive var(--motif-duree) linear infinite; }
@keyframes gfs-motif-derive {
  from { -webkit-mask-position: 0 0, 0 0; mask-position: 0 0, 0 0; }
  to   { -webkit-mask-position: 135.10px 156.00px, 0 0; mask-position: 135.10px 156.00px, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .gfs-motif--anime::before, .gfs-motif--anime::after { animation: none; }
}

/* ---------- (11.10) ICÔNES DE CATÉGORIE ----------
   Le trait et l'aplat prennent la couleur de la catégorie (--cat, déjà posée par le CSS global
   sur chaque carte d'article). Le détail orange reste orange.
   Blog : figures → GFS_ico_cat-figures · posters → cat-posters · métier → cat-metier
          identité → identite · vulgarisation → mediation · accessibilité → cat-access
          IA → cat-ia · outils → cat-outils
   Portfolio : Tout → pf-tout · Illustrations → pf-illustrations · Vulgarisation → mediation
               Identités → identite · Couvertures → pf-couvertures · Exploratoires → pf-exploratoires */
.gfs-ico--cat {
  --ico-c-trait: var(--cat, var(--c-accent));
  --ico-aplat: color-mix(in srgb, var(--cat, var(--c-accent)) 18%, transparent);
}

/* ---------- (11.11) PAGE 404 ----------
   Bloc : 2026_GFS_Page404_bloc_v2.html (variante A « Cette liaison est rompue », choisie le 21/10/2026).
   La molécule se trace à l'apparition (même mécanique que les icônes), puis l'atome détaché flotte. */
.gfs-404 {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--sp-4, 16px); padding: var(--sp-8, 72px) 16px; border-radius: var(--r-lg, 24px);
  max-width: var(--gfs-w, 1100px); margin: 0 auto;
  --motif-fondu: radial-gradient(ellipse 45% 40% at 50% 22%, var(--masque-plein) 0%, transparent 75%);  /* réseau autour de la molécule */
}
.gfs-404__illu { --ico-taille: var(--p404-illu); --ico-trait: 1.5; --ico-decal: 3px; --ico-decal-survol: 4px; }
.gfs-404__texte { max-width: 52ch; margin: 0; color: var(--c-texte-2); text-wrap: pretty; }
.gfs-404__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: var(--sp-3, 12px); }
.gfs-404__derive { animation: gfs-404-derive var(--p404-flotte) ease-in-out infinite 1.4s; }  /* attend la fin du tracé */
@keyframes gfs-404-derive {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(calc(var(--p404-amplitude) * .75), calc(var(--p404-amplitude) * -1)); }
}
@media (prefers-reduced-motion: reduce) {
  .gfs-404__derive { animation: none; }
}

/* ================================================================================
   (12) FINITIONS — micro-améliorations transverses
   Toutes "dégradent proprement" : ignorées par les vieux navigateurs, sans casse.
   ================================================================================ */
/* Titres : équilibrage des lignes (évite une ligne pleine suivie d'un mot seul) */
h1, h2, h3,
.h1-page, .h1-page--gradient, .h2-lab, .hero-section-title h1 { text-wrap: balance; }
/* Paragraphes : évite le mot orphelin en fin de paragraphe */
p { text-wrap: pretty; }
/* Défilement doux + ancres (sommaire d'article) qui ne se cachent pas sous l'en-tête flottant */
html { scroll-behavior: smooth; scroll-padding-top: 120px; }
/* Sélection de texte aux couleurs de la marque */
::selection { background: rgba(var(--c-accent-rgb), 0.18); color: var(--c-texte); }
/* Focus clavier visible (accessibilité) — n'apparaît qu'au clavier, pas à la souris.
   Bloc unique (ancien focus + ex-compléments fusionnés, rendu effectif préservé). */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, .service-card:focus-visible, .bento-card:focus-visible,
a.network-badge:focus-visible {
    outline: 2px solid var(--c-accent); outline-offset: 3px; border-radius: var(--r-xs);
}
.elementor-button:focus-visible, .gfs-filter:focus-visible {
    outline: 2px solid var(--c-accent); outline-offset: 2px;
}
/* Transition douce des icônes line-art au survol des cartes cliquables */
.service-icon svg, .icon-wrapper-static svg { transition: stroke var(--t-fast) ease, transform var(--t-fast) ease; }
/* ---------- APPARITION DES IMAGES (fondu + légère montée) ----------
   Ne s'active que si le script apparition-images (widget HTML du pied de page) a
   posé .gfs-apparition sur <html> : sans JS, les images s'affichent normalement.
   Le script ne marque que les images pas encore chargées ET hors écran à
   l'arrivée : les images visibles d'emblée (LCP) ne sont jamais retardées.
   - animation (et non transition) : laisse intactes les transitions existantes
     (vignettes du portfolio, pile), qui ne portent que sur transform.
   - propriété translate (et non transform) : se cumule avec le zoom au survol et
     l'éventail de la pile sans les écraser ; aucun décalage de mise en page (CLS).
   - Les classes sont retirées par le script à la fin de l'animation. */
@media (prefers-reduced-motion: no-preference) {
    .gfs-apparition img.gfs-img-attente { opacity: 0; }
    .gfs-apparition img.gfs-img-visible { animation: gfs-apparition var(--t-apparition) var(--ease) both; }
}
@keyframes gfs-apparition {
    from { opacity: 0; translate: 0 var(--apparition-decalage); }
    to   { opacity: 1; translate: 0 0; }
}
/* Filtres (articles + portfolio) : rayon carte dès qu'ils peuvent passer sur
   2+ lignes (tablette/mobile), pour éviter l'effet "ovale" du rayon pill sur un
   libellé multi-lignes (ex. "Identités visuelles et supports de com'"). Desktop :
   on garde le pill, les libellés y tiennent sur une ligne. */
@media (max-width: 1024px) {
    .elementor-portfolio__filter,
    .gfs-filters .gfs-filter { border-radius: var(--r-lg) !important; }   /* override Elementor : pill -> rayon carte */
}
/* Filtres (articles + portfolio) : 2 colonnes sur mobile (3 trop serré) */
@media (max-width: 768px) {
    .elementor-portfolio__filters { grid-template-columns: repeat(2, 1fr) !important; }
    .gfs-filters .gfs-filter { flex-basis: calc(50% - 5px); }   /* 2 par ligne sur téléphone */
    /* type + padding resserrés : le 2 colonnes tient sans débord des libellés longs */
    .gfs-filters .gfs-filter { font-size: var(--fs-ui-xs); padding: var(--sp-2) var(--sp-2); }
    .elementor-portfolio__filter { font-size: var(--fs-ui-xs) !important; padding: var(--sp-2) var(--sp-2) !important; }
}
/* ---------- PIED DE PAGE MAISON (extension gfs-chassis) : mise en page ----------
   Remplace le gabarit de pied de page d'Elementor Pro. Bandeau bleu nuit, 3 colonnes
   (droits · LinkedIn · e-mail), une seule colonne centrée sous 1024px.
   Les couleurs des liens sont réglées dans le bloc suivant (« liens »). */
.gfs-pied { background: var(--c-texte); color: var(--c-carte); }
.gfs-pied__grille {
    max-width: var(--gfs-w); margin-inline: auto; min-height: var(--sp-8);
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); align-items: center;
    font-family: var(--font-corps); font-size: var(--fs-ui-lg);
}
.gfs-pied p { margin: 0; }
.gfs-pied__droits { text-align: left; }
.gfs-pied .gfs-pied__droits.elementor-widget-text-editor { color: var(--c-texte-clair); }   /* copyright : même teinte que les liens du pied ; sinon l'accueil (CSS de page Elementor) le passait en bleu nuit, invisible */
.gfs-pied__reseaux { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
.gfs-pied__mail { text-align: right; }
.gfs-pied__icone {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; background: var(--c-cta);   /* glyphe : littéral toléré */
}
.gfs-pied__icone svg { width: 18px; height: 18px; fill: var(--c-carte); }   /* glyphe : littéral toléré */
/* Lien « RéPIC Membre » (gfs-chassis 0.5.6, 21/10/2026, variante C retenue par Émilie) :
   bloc blanc de 36 px, même hauteur et mêmes angles droits que le carré LinkedIn, logo
   du RéPIC à gauche (sur blanc : ses couleurs restent lisibles), « Membre » à droite. */
.gfs-pied a.gfs-pied__repic {
    display: inline-flex; align-items: center; gap: var(--sp-2); height: 36px; box-sizing: border-box;
    padding: 0 var(--sp-3) 0 var(--sp-1); background: var(--c-carte);
    font-size: var(--fs-ui-sm); font-weight: 600; color: var(--c-texte); text-decoration: none; white-space: nowrap;
    transition: box-shadow .2s;
}
.gfs-pied a.gfs-pied__repic img { display: block; height: 28px; width: auto; }
.gfs-pied a.gfs-pied__repic:hover,
.gfs-pied a.gfs-pied__repic:focus-visible { box-shadow: 0 0 0 2px var(--c-cta); }
@media (max-width: 1024px) {
    .gfs-pied__grille { grid-template-columns: 1fr; padding: var(--sp-4) 0; text-align: center; }
    .gfs-pied__droits, .gfs-pied__mail { text-align: center; }
}

/* ---------- PIED DE PAGE : liens (toutes tailles) ----------
   Les liens texte du footer (Mentions légales, e-mail) héritaient du violet global, peu lisible
   sur le bleu foncé, et le survol du thème les passait en noir. Couleurs propres au footer :
   gris clair au repos, orange CTA au survol. Spécificité suffisante, pas de !important. */
.elementor-location-footer .elementor-widget-text-editor a {
    color: var(--c-texte-clair);
    transition: color var(--t-fast) var(--ease);
}
.elementor-location-footer .elementor-widget-text-editor a:hover,
.elementor-location-footer .elementor-widget-text-editor a:focus-visible {
    color: var(--c-cta);
}
/* ---------- PIED DE PAGE (mobile) ----------
   Sur téléphone, les deux boutons flottants fixes (préférences à gauche, cookies à
   droite) chevauchaient la ligne e-mail centrée du footer. On dégage une marge basse
   pour que l'e-mail passe AU-DESSUS des boutons, et on réduit sa taille pour qu'il
   ne touche plus les deux bords. */
@media (max-width: 768px) {
    .elementor-location-footer { padding-bottom: var(--sp-7) !important; }   /* override Elementor : zone dégagée sous le contenu */
    .elementor-location-footer a[href^="mailto:"] { font-size: var(--fs-ui-sm); }
}
/* ---------- GOUTTIÈRES LATÉRALES MOBILE (anti "collé au bord") ----------
   Certaines sections (texte narratif, barres de filtres) n'ont pas de padding
   latéral propre et touchaient le bord sur mobile. On garantit une gouttière
   homogène = var(--sp-4) sur leurs conteneurs, uniquement <=768 px. Les composants
   déjà espacés ne sont pas ciblés. !important sur les filtres portfolio = override
   du widget Elementor. (Diagnostic mobile fait avec le harnais d'inspection 390 px.) */
@media (max-width: 768px) {
    /* Accueil : bandeau logos. (Le bloc "La rigueur scientifique" .about-split est
       traité dans sa propre règle responsive plus bas, APRÈS sa base, sinon le
       "padding: ... 0" de la base écrasait la gouttière.) */
    .logos-eyebrow { padding-left: var(--sp-4); padding-right: var(--sp-4); }
    /* À propos : sections de texte narratif (les cartes deviennent encadrées) */
    .about-section, .values-section, .workspace-section, .networks-section {
        padding-left: var(--sp-4); padding-right: var(--sp-4);
    }
    /* Ressources / Réalisations : barres de filtres collées aux deux bords */
    .gfs-filters { padding-left: var(--sp-4); padding-right: var(--sp-4); }
    .elementor-portfolio__filters { padding-left: var(--sp-4) !important; padding-right: var(--sp-4) !important; }
    /* Ressources : grille d'articles (cartes collées au bord, pas le portfolio) */
    .elementor-posts-container:not(.elementor-portfolio) { padding-left: var(--sp-4); padding-right: var(--sp-4); }
}
/* ---------- LISIBILITÉ : paragraphes longs alignés à gauche ----------
   Classe posée par le script JS justify-paragraphes.js sur les paragraphes
   CENTRÉS de plus de 4 lignes (le CSS ne sait pas compter les lignes seul).
   !important pour passer devant un text-align:center hérité d'un conteneur. */
p.gfs-multi-lignes { text-align: left !important; }