/* ==========================================================================
   agencemidnight.fr : feuille de style unique du site (refonte 2026, S1)
   --------------------------------------------------------------------------
   Reproduit le rendu du site actuel (aspiration ISO du 2026-10-28), sans
   Elementor ni CSS WordPress. Le contrat HTML est design/composants.md
   (classes françaises, BEM court : bloc, bloc__element, bloc--variante).

   Organisation :
     1. Polices (medias/polices.css de R4)
     2. Jetons (design/jetons.css de R1), en paliers aux 3 largeurs
     3. Fond « dégradé à grain » (design/fond.css de R1)
     4. Base
     5. Typographie
     6. Mise en page
     7. Composants, dans l'ordre de composants.md (§1 à §42)
     8. Écarts préparés, NON activés (design/ecarts.md)
   Les blocs riches collés dans les articles (36 styles embarqués, §37) sont
   dans site-articles.css (agent S3), chargé seulement par le gabarit G10.

   Approche mobile d'abord. Points de rupture réellement utilisés par le site
   actuel (Elementor) :
     base             : mobile (≤ 767 px)
     min-width 768px  : tablette (768 à 1024 px)
     min-width 1025px : ordinateur
   
   États : survol, :focus-visible (ajouté partout : le site actuel n'a pas de
   focus visible, mais :focus-visible ne change rien à la souris), ouvert
   ([open], [aria-expanded="true"]), page courante ([aria-current="page"]).
   Aucun style en ligne : la CSP du studio les interdit.
   ========================================================================== */


/* ==========================================================================
   1. POLICES
   Auto-hébergées (R4). Seules les polices réellement rendues sont déclarées ;
   le navigateur ne télécharge une police que si une page l'utilise.
   Genica One : police commerciale, licence web à fournir par la cliente (E25).
   ========================================================================== */
/* latin */
@font-face {
  font-family: "Mulish";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/mulish-400-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: "Mulish";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/mulish-400-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Genica One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/genica-one.woff2") format("woff2");
}

/* latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/inter-400-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/inter-400-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/dm-sans-400-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/dm-sans-400-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: "Mulish";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/mulish-italique-400-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: "Mulish";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/mulish-italique-400-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: "Syne";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/syne-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: "Syne";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/syne-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: "Roboto Slab";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/roboto-slab-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: "Roboto Slab";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/roboto-slab-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-300-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-italique-300-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-italique-300-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Polices de repli ajustees (limitent le decalage au chargement) */
@font-face {
  font-family: "Mulish repli";
  font-style: normal;
  src: local("Arial"), local("ArialMT"), local("Liberation Sans");
  size-adjust: 103.03%;
  ascent-override: 97.55%;
  descent-override: 24.27%;
  line-gap-override: 0.00%;
}

@font-face {
  font-family: "Genica One repli";
  font-style: normal;
  src: local("Arial"), local("ArialMT"), local("Liberation Sans");
  size-adjust: 105.06%;
  ascent-override: 89.09%;
  descent-override: 36.46%;
  line-gap-override: 0.00%;
}

@font-face {
  font-family: "Inter repli";
  font-style: normal;
  src: local("Arial"), local("ArialMT"), local("Liberation Sans");
  size-adjust: 106.88%;
  ascent-override: 90.64%;
  descent-override: 22.57%;
  line-gap-override: 0.00%;
}

@font-face {
  font-family: "DM Sans repli";
  font-style: normal;
  src: local("Arial"), local("ArialMT"), local("Liberation Sans");
  size-adjust: 104.25%;
  ascent-override: 95.16%;
  descent-override: 29.74%;
  line-gap-override: 0.00%;
}

@font-face {
  font-family: "Mulish repli italique";
  font-style: italic;
  src: local("Arial"), local("ArialMT"), local("Liberation Sans");
  size-adjust: 103.03%;
  ascent-override: 97.55%;
  descent-override: 24.27%;
  line-gap-override: 0.00%;
}

@font-face {
  font-family: "Syne repli";
  font-style: normal;
  src: local("Arial"), local("ArialMT"), local("Liberation Sans");
  size-adjust: 122.53%;
  ascent-override: 75.49%;
  descent-override: 22.44%;
  line-gap-override: 0.00%;
}

@font-face {
  font-family: "Roboto Slab repli";
  font-style: normal;
  src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif");
  size-adjust: 116.69%;
  ascent-override: 89.79%;
  descent-override: 23.22%;
  line-gap-override: 0.00%;
}

@font-face {
  font-family: "Cormorant Garamond repli";
  font-style: normal;
  src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif");
  size-adjust: 96.36%;
  ascent-override: 95.89%;
  descent-override: 29.78%;
  line-gap-override: 0.00%;
}

@font-face {
  font-family: "Cormorant Garamond repli italique";
  font-style: italic;
  src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif");
  size-adjust: 87.18%;
  ascent-override: 105.99%;
  descent-override: 32.92%;
  line-gap-override: 0.00%;
}


/* ==========================================================================
   2. JETONS
   Repris de design/jetons.css (documentation complète et contrastes là-bas).
   Différence assumée : les tailles de titres sont en PALIERS (valeur mobile,
   puis redéfinie à 768 et à 1025 px), comme Elementor, au lieu des clamp() de
   jetons.css qui s'écartent de 1 à 3 px entre les paliers. Les clamp() restent
   l'option E4 (§8).
   ========================================================================== */
:root {
  /* Couleurs de marque */
  --c-nuit: #0F1222;
  --c-marine: #222B42;
  --c-or: #DDA548;
  --c-or-sombre: #B78532;
  --c-creme: #F9F4F4;
  --c-blanc: #FFFFFF;
  --c-lavande: #8F8FC6;
  /* Couleurs fonctionnelles relevées */
  --c-noir: #000000;          /* titres de la timeline (E3) */
  --c-gris-texte: #333333;    /* liens du sommaire (E3) */
  --c-gris-champ: #8D8D8D;    /* texte saisi des champs (E13) */
  --c-voile: rgba(0, 0, 0, .8);
  --c-icone-defaut: #69727D;  /* icônes sociales du menu mobile (couleur par défaut d'Elementor) */
  /* Accessibilité (proposé, NON appliqué, voir §8) */
  --c-or-texte: #94661B;
  --c-or-bouton-sombre: #8A5D14;
  /* Repères du dégradé (contrastes) */
  --c-degrade-moyenne: #4C4A5E;

  /* Familles (rendu actuel conservé, décision du 2026-10-28) */
  --f-titre: "Genica One", "Genica One repli", sans-serif;
  --f-texte: "Mulish", "Mulish repli", sans-serif;
  --f-sommaire: Futura, sans-serif;
  --f-inter: "Inter", "Inter repli", sans-serif;
  --f-inter-systeme: -apple-system, "Helvetica Neue", Arial, sans-serif;
  --f-blocs-systeme: system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-systeme-segoe: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  --f-systeme: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-pagination: "Roboto Slab", "Roboto Slab repli", serif;
  --f-outil-dmsans: "DM Sans", "DM Sans repli", sans-serif;
  --f-outil-syne: "Syne", "Syne repli", sans-serif;
  --f-outil-cormorant: "Cormorant Garamond", "Cormorant Garamond repli", serif;

  /* Graisses. Genica One n'a qu'une graisse : 500 / 600 donnent le faux gras
     actuel (E5). Pour l'option E5, passer --fw-titre et --fw-titre-article à 400. */
  --fw-normal: 400;
  --fw-moyen: 500;
  --fw-gras: 700;
  --fw-titre: 600;
  --fw-titre-article: 500;

  /* Tailles : valeurs MOBILE (≤ 767 px), redéfinies plus bas */
  --fs-heros-max: 2rem;          /* 32 → 41 → 60 */
  --fs-heros: 1.625rem;          /* 26 → 41 → 52 */
  --fs-heros-article: 2.1875rem; /* 35 → 45 → 45 */
  --fs-heros-blog: 2.1875rem;    /* 35 → 41 → 67 */
  --fs-surtitre: 1.1875rem;      /* 19 → 41 → 22 (E11) */
  --fs-h2-xl: 1.5625rem;         /* 25 → 50 → 50 */
  --fs-titre-anime: 1.5625rem;   /* 25 → 50 → 50 */
  --lh-titre-anime: 1.2;
  --fs-h2: 1.75rem;              /* 28 → 32 → 32 */
  --fs-h2-sombre: 1.75rem;       /* 28 → 35 → 35 */
  --fs-h2-article: 2rem;         /* 32 aux 3 largeurs */
  --fs-h3: 1.375rem;             /* 22 → 22 → 25 : cartes services */
  --fs-h3-carte: 1.25rem;        /* 20 → 25 → 25 : cartes influenceurs, liste numérotée */
  --fs-h3-l: 1.25rem;            /* 20 → 28 → 28 */
  --fs-h3-article: 1.75rem;      /* 28 aux 3 largeurs */
  --fs-h3-accordeon: 1.3125rem;  /* 21 → 25 → 25 */
  --fs-h3-timeline: 1.3125rem;   /* 21 */
  --fs-h4-article: 1.5rem;       /* 24 */
  --fs-titre-carte-article: 1.3125rem; /* 21 → 20 → 20 */
  --fs-nav: 1.1875rem;           /* 19 */
  --fs-nav-sous: .9375rem;       /* 15 */
  --fs-nav-mobile: 1.25rem;      /* 20 */
  --fs-bouton: 1.25rem;          /* 20 */
  --fs-bouton-form: 1.125rem;    /* 18 */
  --fs-pied-titre: 1.125rem;     /* 18 */
  --fs-texte-l: 1rem;            /* 16 → 17 → 17 : chapeau du blog */
  --fs-projet: 1.125rem;         /* 18 */
  --fs-texte: 1rem;              /* 16 */
  --fs-texte-carte: .9375rem;    /* 15 → 15 → 16 : cartes services */
  --fs-texte-s: .9375rem;        /* 15 */
  --fs-texte-xs: .875rem;        /* 14 */
  --fs-tableau: .9rem;           /* 14,4 */
  --fs-mini: .8125rem;           /* 13 */
  --fs-micro: .75rem;            /* 12 (E9) */

  --lh-titre: 1;
  --lh-titre-article: 1.2;
  --lh-accordeon: 1.2;
  --lh-timeline: 1.5;
  --lh-texte: 1.5;
  --lh-texte-article: 1.6875;   /* 27 px à 16 px, mesuré (S1c) */
  --lh-texte-serre: 1.25;

  /* Espacements */
  --e-1: .25rem; --e-2: .5rem; --e-3: .625rem; --e-4: 1rem; --e-5: 1.25rem;
  --e-6: 1.875rem; --e-7: 2.5rem; --e-8: 3.125rem; --e-9: 3.75rem; --e-10: 4.125rem;
  --gouttiere: 1.25rem;        /* 20 px : écart entre widgets */
  --marge-section: 5%;         /* marges latérales des sections (Elementor, % de la largeur) */

  /* Rayons */
  --r-bouton: 3px; --r-bouton-form: 8px; --r-bouton-compact: 7px;
  --r-s: 10px; --r-m: 15px; --r-champ: 20px; --r-champ-compact: 30px; --r-l: 25px; --r-rond: 50%;

  /* Ombres et bordures */
  --o-carte: 0 0 10px 0 rgba(0, 0, 0, .5);
  --o-carte-compacte: 0 0 6px 0 rgba(0, 0, 0, .5);
  --o-flottante: 0 0 20px 0 rgba(0, 0, 0, .1);
  --o-panneau: 2px 8px 23px 3px rgba(0, 0, 0, .2);
  --o-bloc-article: 0 8px 20px 0 rgba(0, 0, 0, .15);   /* blocs riches des articles (site-articles.css, S3) */
  --b-carte: 3px solid var(--c-blanc);
  --b-carte-contour: 3px solid var(--c-creme);
  --b-accordeon: 3px solid var(--c-or);
  --b-sommaire: 3px solid var(--c-or);
  --timeline-trait: 3px;

  /* Conteneurs */
  --conteneur: 1140px;
  --colonne-article: 691px;
  --colonne-laterale: 369px;
  --conteneur-etroit: 939px;
  --conteneur-cartes-etapes: 958px;

  /* Animations */
  --t-rapide: .3s;
  --t-menu: .4s;
  --t-moyen: .4s;
  --t-diapo: .5s;
  --t-entree: 1.25s;           /* entrée du menu mobile (proposé : .3s, voir §8) */
  --defilement-logos: 4s;      /* durée d'un pas du bandeau de logos */

  /* Focus clavier (ajouté, invisible aujourd'hui) */
  --focus: 2px solid var(--c-or);
  --focus-decalage: 3px;

  /* Bouton doré (A1). Rendu actuel : texte blanc sur or, 2,20:1.
     Variantes préparées (ecarts.md §A), à activer en remplaçant ces 4 valeurs :
       V1 texte nuit (8,45:1, recommandée) : --bouton-fond: #DDA548; --bouton-texte: #0F1222;
                                             --bouton-fond-survol: #E8BC6C; --bouton-texte-survol: #0F1222;
       V2 or profond (5,74:1)              : --bouton-fond: #8A5D14; --bouton-texte: #FFFFFF;
                                             --bouton-fond-survol: #6F4A0F; --bouton-texte-survol: #FFFFFF;
       V3 nuit à texte or (8,45:1)         : --bouton-fond: #0F1222; --bouton-texte: #DDA548;
                                             --bouton-fond-survol: #222B42; --bouton-texte-survol: #DDA548;
                                             (+ liseré : --bouton-bordure: 2px solid #DDA548 ; garder V1 sur fond sombre) */
  --bouton-fond: var(--c-or);
  --bouton-texte: var(--c-blanc);
  --bouton-fond-survol: var(--c-nuit);
  --bouton-texte-survol: var(--c-blanc);
  --bouton-bordure: 0 solid transparent;
  --bouton-focus: 2px solid var(--c-nuit);
}

@media (min-width: 768px) {
  :root {
    --fs-heros-max: 2.5625rem;
    --fs-heros: 2.5625rem;
    --fs-heros-article: 2.8125rem;
    --fs-heros-blog: 2.5625rem;
    --fs-surtitre: 2.5625rem;
    --fs-h2-xl: 3.125rem;
    --fs-titre-anime: 3.125rem;
    --fs-h2: 2rem;
    --fs-h2-sombre: 2.1875rem;
    --fs-h3-carte: 1.5625rem;
    --fs-h3-l: 1.75rem;
    --fs-h3-accordeon: 1.5625rem;
    --fs-titre-carte-article: 1.25rem;
    --fs-texte-l: 1.0625rem;
  }
}
@media (min-width: 1025px) {
  :root {
    --fs-heros-max: 3.75rem;
    --fs-heros: 3.25rem;
    --fs-heros-blog: 4.1875rem;
    --fs-surtitre: 1.375rem;
    --fs-h3: 1.5625rem;
    --fs-texte-carte: 1rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root { --t-rapide: 0s; --t-menu: 0s; --t-moyen: 0s; --t-diapo: 0s; --t-entree: 0s; }
}


/* ==========================================================================
   3. FOND « DÉGRADÉ À GRAIN » (décision du 2026-10-28 : refait en CSS)
   Repris tel quel de design/fond.css (mesures et contrôle dans ce fichier).
   La classe va sur chaque bloc qui portait l'image 1920x1080 d'Elementor.
   Les data URI demandent « img-src data: » dans la CSP (déjà nécessaire).
   ========================================================================== */
:root {
  --fond-degrade-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='1080' viewBox='0 0 16 9' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='r0'%3E%3Cstop offset='0' stop-color='%230c0712'/%3E%3Cstop offset='0.111' stop-color='%230d0817'/%3E%3Cstop offset='0.222' stop-color='%23110e20'/%3E%3Cstop offset='0.333' stop-color='%23171d33'/%3E%3Cstop offset='0.444' stop-color='%2320334a'/%3E%3Cstop offset='0.556' stop-color='%232e4760'/%3E%3Cstop offset='0.667' stop-color='%23375973'/%3E%3Cstop offset='0.778' stop-color='%233d6885'/%3E%3Cstop offset='0.889' stop-color='%23417395'/%3E%3Cstop offset='1' stop-color='%2341769b'/%3E%3C/linearGradient%3E%3ClinearGradient id='r1'%3E%3Cstop offset='0' stop-color='%2314101c'/%3E%3Cstop offset='0.111' stop-color='%2315121f'/%3E%3Cstop offset='0.222' stop-color='%23171828'/%3E%3Cstop offset='0.333' stop-color='%2321273b'/%3E%3Cstop offset='0.444' stop-color='%232e3a51'/%3E%3Cstop offset='0.556' stop-color='%233a4e66'/%3E%3Cstop offset='0.667' stop-color='%23415f79'/%3E%3Cstop offset='0.778' stop-color='%23456d8c'/%3E%3Cstop offset='0.889' stop-color='%2346769b'/%3E%3Cstop offset='1' stop-color='%23487aa3'/%3E%3C/linearGradient%3E%3ClinearGradient id='r2'%3E%3Cstop offset='0' stop-color='%2334282b'/%3E%3Cstop offset='0.111' stop-color='%23362b2f'/%3E%3Cstop offset='0.222' stop-color='%233c323a'/%3E%3Cstop offset='0.333' stop-color='%2346404b'/%3E%3Cstop offset='0.444' stop-color='%23505061'/%3E%3Cstop offset='0.556' stop-color='%23565f78'/%3E%3Cstop offset='0.667' stop-color='%23586c8c'/%3E%3Cstop offset='0.778' stop-color='%2356779d'/%3E%3Cstop offset='0.889' stop-color='%23557caa'/%3E%3Cstop offset='1' stop-color='%23557fb0'/%3E%3C/linearGradient%3E%3ClinearGradient id='r3'%3E%3Cstop offset='0' stop-color='%236a4c32'/%3E%3Cstop offset='0.111' stop-color='%236f5138'/%3E%3Cstop offset='0.222' stop-color='%23785b46'/%3E%3Cstop offset='0.333' stop-color='%237f665c'/%3E%3Cstop offset='0.444' stop-color='%237f7077'/%3E%3Cstop offset='0.556' stop-color='%237b7893'/%3E%3Cstop offset='0.667' stop-color='%23747ea8'/%3E%3Cstop offset='0.778' stop-color='%236b81b4'/%3E%3Cstop offset='0.889' stop-color='%236484ba'/%3E%3Cstop offset='1' stop-color='%236284bd'/%3E%3C/linearGradient%3E%3ClinearGradient id='r4'%3E%3Cstop offset='0' stop-color='%23a3742b'/%3E%3Cstop offset='0.111' stop-color='%23ac7c31'/%3E%3Cstop offset='0.222' stop-color='%23ba8a44'/%3E%3Cstop offset='0.333' stop-color='%23bb9165'/%3E%3Cstop offset='0.444' stop-color='%23ad918b'/%3E%3Cstop offset='0.556' stop-color='%239c8eaa'/%3E%3Cstop offset='0.667' stop-color='%238b8cbd'/%3E%3Cstop offset='0.778' stop-color='%237c89bf'/%3E%3Cstop offset='0.889' stop-color='%237288c0'/%3E%3Cstop offset='1' stop-color='%236c88c0'/%3E%3C/linearGradient%3E%3ClinearGradient id='r5'%3E%3Cstop offset='0' stop-color='%23c0881d'/%3E%3Cstop offset='0.111' stop-color='%23cd9424'/%3E%3Cstop offset='0.222' stop-color='%23dfa539'/%3E%3Cstop offset='0.333' stop-color='%23daa866'/%3E%3Cstop offset='0.444' stop-color='%23c3a092'/%3E%3Cstop offset='0.556' stop-color='%23aa98b3'/%3E%3Cstop offset='0.667' stop-color='%239691c2'/%3E%3Cstop offset='0.778' stop-color='%23848dc1'/%3E%3Cstop offset='0.889' stop-color='%23778ac0'/%3E%3Cstop offset='1' stop-color='%23748ac1'/%3E%3C/linearGradient%3E%3ClinearGradient id='m1' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='0.2' stop-color='%23fff'/%3E%3C/linearGradient%3E%3Cmask id='k1'%3E%3Crect width='16' height='9' fill='url(%23m1)'/%3E%3C/mask%3E%3ClinearGradient id='m2' x2='0' y2='1'%3E%3Cstop offset='0.2' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='0.4' stop-color='%23fff'/%3E%3C/linearGradient%3E%3Cmask id='k2'%3E%3Crect width='16' height='9' fill='url(%23m2)'/%3E%3C/mask%3E%3ClinearGradient id='m3' x2='0' y2='1'%3E%3Cstop offset='0.4' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='0.6' stop-color='%23fff'/%3E%3C/linearGradient%3E%3Cmask id='k3'%3E%3Crect width='16' height='9' fill='url(%23m3)'/%3E%3C/mask%3E%3ClinearGradient id='m4' x2='0' y2='1'%3E%3Cstop offset='0.6' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='0.8' stop-color='%23fff'/%3E%3C/linearGradient%3E%3Cmask id='k4'%3E%3Crect width='16' height='9' fill='url(%23m4)'/%3E%3C/mask%3E%3ClinearGradient id='m5' x2='0' y2='1'%3E%3Cstop offset='0.8' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3Cmask id='k5'%3E%3Crect width='16' height='9' fill='url(%23m5)'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='16' height='9' fill='url(%23r0)'/%3E%3Crect width='16' height='9' fill='url(%23r1)' mask='url(%23k1)'/%3E%3Crect width='16' height='9' fill='url(%23r2)' mask='url(%23k2)'/%3E%3Crect width='16' height='9' fill='url(%23r3)' mask='url(%23k3)'/%3E%3Crect width='16' height='9' fill='url(%23r4)' mask='url(%23k4)'/%3E%3Crect width='16' height='9' fill='url(%23r5)' mask='url(%23k5)'/%3E%3C/svg%3E");
  --fond-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0.3 0 0 0 0.35 0.3 0 0 0 0.35 0.3 0 0 0 0.35 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
.fond-degrade {
  background-color: #4c4a5e; /* couleur moyenne, avant décodage du SVG */
  background-image: var(--fond-grain), var(--fond-degrade-svg);
  background-size: 200px 200px, cover;
  background-position: 0 0, center;
  background-repeat: repeat, no-repeat;
  background-blend-mode: overlay, normal;
}


/* ==========================================================================
   4. BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--c-blanc);
  color: var(--c-nuit);
  font-family: var(--f-texte);
  font-size: var(--fs-texte);
  line-height: var(--lh-texte);
  font-weight: var(--fw-normal);
  overflow-x: clip;               /* l'en-tête et les bandeaux débordent volontairement (marges négatives) */
}

img, svg, video, iframe { max-width: 100%; }
img, video { height: auto; }
img { border-style: none; vertical-align: middle; }
picture { display: contents; }   /* l'<img> est la boîte de mise en page (grilles) */
picture > source { display: none; }

/* Icônes du sprite /assets/icones.svg : taille = taille du texte, couleur = couleur du texte */
svg { fill: currentColor; }
.icone { width: 1em; height: 1em; flex: none; }

p, ul, ol, dl, figure, blockquote, table { margin-block: 0 .9rem; }
ul, ol { padding-inline-start: 1.5em; }
figure { margin-inline: 0; }

a {
  color: var(--c-or);
  text-decoration: none;
  transition: color var(--t-rapide);
}
a:hover { color: var(--c-or-sombre); }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

/* L'attribut hidden doit l'emporter sur l'affichage des composants (onglets,
   champs « portée », résultats d'outils) : seul usage de !important, justifié. */
[hidden] { display: none !important; }

/* Focus clavier visible, uniquement au clavier (ajouté : aucun indicateur aujourd'hui) */
:focus-visible {
  outline: var(--focus);
  outline-offset: var(--focus-decalage);
}
:focus:not(:focus-visible) { outline: none; }

/* Texte réservé aux lecteurs d'écran */
.visuellement-cache {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Lien d'évitement : prêt, mais absent des partials (il ajouterait un lien,
   la parité SEO compare les liens). À ajouter si validé. */
.lien-evitement {
  position: absolute; left: 10px; top: -100px; z-index: 100;
  padding: 10px 16px; background: var(--c-nuit); color: var(--c-creme);
  font-family: var(--f-titre);
}
.lien-evitement:focus-visible { top: 10px; }

::selection { background: var(--c-or); color: var(--c-nuit); }

@media (prefers-reduced-motion: reduce) {
  /* Coupe toutes les animations et transitions décoratives (usage standard de !important) */
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   5. TYPOGRAPHIE
   Titres en Genica One, interligne = taille (rendu Elementor), faux gras 600.
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--gouttiere);
  font-family: var(--f-titre);
  font-weight: var(--fw-titre);
  line-height: var(--lh-titre);
  letter-spacing: normal;
  color: inherit;
}
h1 { font-size: var(--fs-heros); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4-article); }

strong, b { font-weight: var(--fw-gras); }

/* Titre de section (h2 courant) */
.titre-section {
  font-size: var(--fs-h2);
  text-align: center;
  color: var(--c-nuit);
}
.titre-section--gauche { text-align: start; }
.titre-section--xl { font-size: var(--fs-h2-xl); }
.titre-section--clair { font-size: var(--fs-h2-sombre); color: var(--c-creme); }

/* Mot mis en valeur dans un titre : pas d'italique */
.accent { font-style: normal; }
.accent--or { color: var(--c-or); }
.accent--lavande { color: var(--c-lavande); }

/* Titre doré (h3 des listes d'avantages, §27 ; même rendu que les h3 d'article) */
.titre-or {
  font-size: var(--fs-h3-article);
  line-height: var(--lh-titre-article);
  font-weight: var(--fw-titre-article);
  color: var(--c-or);
}


/* ==========================================================================
   6. MISE EN PAGE
   Conteneur Elementor « boxed » : 1140 px de contenu. Les sections ont des
   marges latérales de 5 % de la largeur (Elementor les exprime en %).
   ========================================================================== */
.conteneur {
  width: 100%;
  max-width: calc(var(--conteneur) + 20px);
  margin-inline: auto;
  padding-inline: 10px;
}


/* Grilles : 1 colonne en mobile, 2 dès la tablette (mesuré : 2 colonnes à 768 px) */
.grille {
  display: grid;
  gap: var(--gouttiere);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) {
  .grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1025px) {
  .grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grille--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* ==========================================================================
   7. COMPOSANTS
   ========================================================================== */

/* --------------------------------------------------------------------------
   §1 En-tête : transparent, superposé au héros (marge basse négative de 25 %
   de la largeur en mobile, 11 % au-delà, comme aujourd'hui). Non collant.
   -------------------------------------------------------------------------- */
.entete {
  position: relative;
  z-index: 20;
  margin-bottom: -25%;
  padding-inline: 10px;
  pointer-events: none;           /* la zone transparente ne bloque pas le héros */
}
.entete__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gouttiere);
  max-width: var(--conteneur);
  margin-inline: auto;
  padding: 0;
}
.entete__barre > * { pointer-events: auto; }

.entete__logo {
  flex: 0 0 33%;
  padding: 10px;
  line-height: 0;
}
.entete__logo img { display: block; width: 100%; height: auto; }

.entete__burger {
  display: flex;
  align-items: flex-start;
  margin-right: 6px;
  padding: 0 0 6px;               /* boîte de 29 × 35 px, comme le widget icône */
  border: 0;
  background: none;
  color: var(--c-creme);
  font-size: 29px;
  line-height: 1;
}
.entete__burger svg { width: 1em; height: 1em; }
.entete__burger:hover { color: var(--c-or); }

@media (min-width: 768px) {
  .entete { margin-bottom: -11%; }
  .entete__barre { padding-block: 10px; }
  .entete__logo { flex-basis: 13%; }
  .entete__logo img { margin-left: -15%; }
  .entete__burger { margin: 10px 0; font-size: 50px; }
}
@media (min-width: 1025px) {
  .entete__burger { display: none; }
}

/* --------------------------------------------------------------------------
   §2 Navigation principale (ordinateur), sous-menu « Nos services » et
   sélecteur de langue. Le sous-menu s'ouvre au survol et au focus (CSS seul),
   et par le bouton (aria-expanded, site.js de S2 : Échap, flèches, clic).
   -------------------------------------------------------------------------- */
.nav { display: none; }

@media (min-width: 1025px) {
  .nav {
    display: block;
    flex: 1 1 auto;
    padding: 10px;
  }
  .nav__liste {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nav__item { position: relative; }
  .nav__lien {
    display: flex;
    align-items: center;
    padding: 13px 35px;
    border: 0;
    background: none;
    color: var(--c-creme);
    font-family: var(--f-titre);
    font-size: var(--fs-nav);
    font-weight: var(--fw-titre);
    line-height: 20px;
    white-space: nowrap;
    transition: color var(--t-menu);
  }
  .nav__lien:hover,
  .nav__lien:focus-visible,
  .nav__lien[aria-current="page"],
  .nav__item--parent:hover > .nav__lien,
  .nav__lien[aria-expanded="true"] { color: var(--c-or); }

  .nav__fleche {
    width: 11px; height: 19px;      /* triangle de 11 × 6 px dans une boîte de 19 px, comme l'icône d'origine */
    margin-inline: 14px 4px;
    transition: transform var(--t-rapide);
  }

  .nav__sous-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 30;
    width: 156px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--c-nuit);
    border-radius: var(--r-s);
  }
  .nav__item--parent:hover > .nav__sous-menu,
  .nav__item--parent:focus-within > .nav__sous-menu,
  .nav__ouvrir[aria-expanded="true"] + .nav__sous-menu { display: block; }
  /* Fermeture par Échap (site.js passe aria-expanded à false) même si le pointeur reste dessus */
  .nav__ouvrir[aria-expanded="false"]:focus-visible + .nav__sous-menu { display: none; }

  .nav__sous-lien {
    display: block;
    padding: 13px 20px;
    color: var(--c-creme);
    font-family: var(--f-titre);
    font-size: var(--fs-nav-sous);
    font-weight: var(--fw-normal);
    line-height: 20px;
    white-space: nowrap;           /* rendu actuel : les libellés longs dépassent du fond de 156 px */
    transition: background-color var(--t-menu), color var(--t-menu);
  }
  .nav__sous-menu > li:first-child > .nav__sous-lien { border-radius: var(--r-s) var(--r-s) 0 0; }
  .nav__sous-menu > li:last-child > .nav__sous-lien { border-radius: 0 0 var(--r-s) var(--r-s); }
  .nav__sous-lien:hover,
  .nav__sous-lien:focus-visible,
  .nav__sous-lien[aria-current="page"] { background: var(--c-or); color: var(--c-creme); }
  .nav__sous-lien:focus-visible { outline-color: var(--c-creme); outline-offset: -3px; }

  /* Sélecteur de langue : drapeau 16 × 11 + flèche, sous-menu centré */
  .nav__item--langues .nav__sous-menu {
    left: 50%;
    width: auto;
    transform: translateX(-50%);
  }
}

.langue__drapeau {
  display: inline-block;
  width: 16px;
  height: 11px;
  vertical-align: middle;
}

/* --------------------------------------------------------------------------
   §3 Menu mobile : <dialog id="menu-mobile"> ouvert par showModal() (site.js).
   Mobile : panneau de 90 % à droite. Tablette : panneau de 400 px à gauche
   (rendu actuel du modèle Elementor). Masqué dès 1025 px.
   -------------------------------------------------------------------------- */
.menu-mobile {
  position: fixed;
  inset: 0 0 0 auto;
  width: 90%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 60px 0 0;
  overflow-y: auto;
  border: 0;
  background: var(--c-nuit);
  box-shadow: var(--o-panneau);
  color: var(--c-creme);
}
.menu-mobile::backdrop { background: var(--c-voile); }
.menu-mobile[open] { animation: menu-entree var(--t-entree) both; }
@keyframes menu-entree {
  from { opacity: 0; transform: translateX(100%); }
  to { opacity: 1; transform: none; }
}

.menu-mobile__entete {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0 16px 0 17px;
}
.menu-mobile__logo { display: block; width: 35.1vw; line-height: 0; }   /* 39 % du panneau de 90 vw */
.menu-mobile__logo img { width: 100%; height: auto; }
.menu-mobile__fermer {
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-creme);
  font-size: 25px;
  line-height: 0;
}
.menu-mobile__fermer svg { width: 1em; height: 1em; }
.menu-mobile__fermer:hover { color: var(--c-or); }

.menu-mobile__titre {
  margin: 20px 0 25px 37px;
  color: var(--c-creme);
  font-family: var(--f-titre);
  font-size: 20px;
  line-height: 1;
  letter-spacing: 4.8px;
}
.menu-mobile__liste {
  margin: 0 0 0 18px;
  padding: 0;
  list-style: none;
}
.menu-mobile__lien {
  display: flex;
  align-items: center;
  width: fit-content;
  min-width: 191px;
  padding: 15px 20px;
  color: var(--c-or);
  font-family: var(--f-titre);
  font-size: var(--fs-nav-mobile);
  line-height: 20px;
  list-style: none;
  cursor: pointer;
}
.menu-mobile__lien:hover,
.menu-mobile__lien[aria-current="page"] { color: var(--c-creme); }
.menu-mobile__lien::-webkit-details-marker { display: none; }
.menu-mobile__lien svg {
  width: 12px; height: 20px;
  margin-inline-start: 14px;
  transition: transform var(--t-rapide);
}
.menu-mobile__groupe[open] > .menu-mobile__lien svg { transform: rotate(180deg); }
.menu-mobile__sous-liste {
  margin: 0;
  padding: 0 0 0 20px;
  list-style: none;
}
.menu-mobile__sous-liste .menu-mobile__lien { font-size: 16px; padding-block: 10px; }
.menu-mobile .reseaux {
  justify-content: flex-start;
  gap: 10px;
  margin: 40px 0 0 40px;
}
.menu-mobile .reseaux a {
  width: 32px; height: 32px;
  font-size: 23px;
  background: var(--c-or);
  color: var(--c-icone-defaut);
}
.menu-mobile .reseaux a:hover { opacity: .9; color: var(--c-icone-defaut); }

@media (min-width: 768px) {
  .menu-mobile {
    inset: 0 auto 0 0;
    width: 400px;
    padding-top: 17px;
  }
  @keyframes menu-entree-tablette {
    from { opacity: 0; transform: translateX(-100%); }
    to { opacity: 1; transform: none; }
  }
  .menu-mobile[open] { animation-name: menu-entree-tablette; }
  .menu-mobile__entete {
    flex-direction: column;
    align-items: center;
    gap: 22px;
    padding: 0 17px;
  }
  .menu-mobile__logo { width: 100%; padding: 16px 62px; border-radius: 3px; }
  .menu-mobile__fermer { font-size: 40px; }
  .menu-mobile__titre { margin: 38px 0 30px 20px; font-size: 16px; letter-spacing: 0; }
  .menu-mobile__liste { margin-left: 20px; }
  .menu-mobile__lien { min-width: 0; padding: 10px 20px; font-size: 13px; }
  .menu-mobile__lien svg { width: 13px; height: 13px; }
  .menu-mobile .reseaux { justify-content: center; gap: 5px; margin: 20px 0 0; }
  .menu-mobile .reseaux a { width: 50px; height: 50px; font-size: 26px; }
}
@media (min-width: 1025px) {
  .menu-mobile { display: none; }
}

/* --------------------------------------------------------------------------
   §4 Pied de page : fond marine, logo + 4 colonnes (5 % de marge verticale).
   Aucun effet au survol des liens (mesuré) ; focus visible ajouté.
   -------------------------------------------------------------------------- */
.pied {
  background: var(--c-marine);
  color: var(--c-creme);
}
.pied a { color: var(--c-creme); }
.pied a:hover { color: var(--c-creme); }

.pied__grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  max-width: var(--conteneur);
  margin-inline: auto;
  padding: 5% 27px;
  text-align: center;
}
.pied__col { padding: 10px; }
.pied__col--logo { padding: 13.5px 10px 11px; }
.pied__logo {
  display: block;
  width: 50%;
  margin: 0 auto;
  line-height: 0;
}
.pied__logo img { width: 100%; height: auto; }
.pied__espace { display: none; }

.pied__titre {
  margin: 0 0 24px;
  font-family: var(--f-titre);
  font-size: var(--fs-pied-titre);
  font-weight: var(--fw-normal);
  line-height: 1;
  color: var(--c-creme);
}
.pied__titre a { display: inline-block; line-height: 24px; margin-block: -3px; }
.pied__col > .pied__titre:last-of-type { margin-bottom: 20px; }

.pied__liens {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-texte-xs);
  line-height: 21px;
}
.pied__liens li { margin-bottom: 14.4px; }

/* 21 liens villes et secteurs : 12 px, interligne 11 px (rendu actuel, E9) */
.pied__liens--petits { font-size: var(--fs-micro); line-height: 11px; }
.pied__liens--petits li { margin-bottom: 14.4px; }
/* Deux liens dans le même élément séparés par <br><br> (électroménager / UGC) : centres à 22 px, sous les
   24 px demandés pour des cibles tactiles (Lighthouse target-size). Décalage visuel de 3 px, sans effet sur
   la mise en page (S1b). */
.pied__liens br + br + a { position: relative; top: 3px; }

.pied__credit {
  margin: 0;
  padding: 0 27px 28px;
  font-size: var(--fs-mini);
  line-height: 19.5px;
  text-align: center;
}
.pied__credit a { color: var(--c-or); }
.pied__credit a:hover { color: var(--c-or); }

@media (min-width: 768px) {
  .pied__grille {
    grid-template-columns: 22fr 2.5fr repeat(4, 19fr);
    padding-inline: 0;
    text-align: start;
  }
  .pied__col--logo { display: flex; align-items: center; }
  .pied__logo { width: 100%; margin: 0; padding: 0; }
  .pied__espace { display: block; }
  .pied__titre { margin-bottom: 24px; }
}
@media (min-width: 1025px) {
  .pied__grille { padding-inline: 0; }
}

/* --------------------------------------------------------------------------
   §5 Boutons et liens
   -------------------------------------------------------------------------- */
.bouton {
  display: inline-block;
  padding: 17px;
  border: var(--bouton-bordure);
  border-radius: var(--r-bouton);
  background: var(--bouton-fond);
  color: var(--bouton-texte);
  font-family: var(--f-titre);
  font-size: var(--fs-bouton);
  font-weight: var(--fw-titre);
  line-height: 1;
  text-align: center;
  transition: background-color var(--t-rapide), color var(--t-rapide);
}
.bouton:hover,
.bouton:focus-visible {
  background: var(--bouton-fond-survol);
  color: var(--bouton-texte-survol);
}
.bouton:focus-visible { outline: var(--focus); }

.bouton--petit { padding: 12px; font-size: 18px; }

/* Bouton « Envoyer » du bloc contact : pas d'effet au survol (mesuré) */
.bouton--envoi {
  padding: 16px;
  border-radius: var(--r-bouton-form);
  font-size: var(--fs-bouton-form);
  text-transform: uppercase;
}
.bouton--envoi:hover { background: var(--bouton-fond); color: var(--bouton-texte); }

/* « Envoyer » du mini-formulaire d'article : 18 px 400, 15 × 30 px, rayon 7 px */
.bouton--compact {
  padding: 15px 30px;
  border-radius: var(--r-bouton-compact);
  font-weight: var(--fw-normal);
  text-transform: capitalize;
}

/* « Lire la suite » : lien texte or, sans effet au survol (mesuré) */
.lien-suite {
  display: inline-block;
  color: var(--c-or);
  font-family: var(--f-titre);
  font-size: 20px;
  line-height: 30px;
}
.lien-suite:hover { color: var(--c-or); }

/* Groupe de boutons centré */
.boutons { display: flex; flex-wrap: wrap; gap: var(--gouttiere); justify-content: center; }

/* --------------------------------------------------------------------------
   Sections : marges latérales de 5 % (Elementor), contenu de 1140 px.
   -------------------------------------------------------------------------- */
.section {
  padding: 5% var(--marge-section);
}
.section > .conteneur > :last-child { margin-bottom: 0; }
.section--centree { text-align: center; }
.section--centree h2 { font-size: var(--fs-h2); }
.section--centree h3 { margin: 40px 0 20px; font-size: var(--fs-h3-l); }
.section--centree .bouton,
.section__action { margin-top: 20px; text-align: center; }
.section__action { margin-bottom: 0; }
@media (max-width: 767px) { .section__action .bouton, .cta--bouton .bouton { font-size: 15px; } }

/* « Pourquoi choisir… » (S1b, mesuré) : marges Elementor 10 % / 8 % + 10 px, écarts de 30 px entre widgets,
   + 5 % sous le h2 et + 3 % avant chaque h3, texte 16 / 20 */
.section.section--centree { margin-block: 10% 20%; padding: 10px var(--marge-section); }   /* marges Elementor : elles se fondent avec les voisines */
.section--centree > .conteneur > h2 { margin-bottom: calc(30px + 5%); line-height: 1.4; }
.section--centree > .conteneur > h2 + h3 { margin-top: 0; }
.section--centree > .conteneur > h3 { margin: calc(44.4px + 3%) 0 30px; }
.section--centree > .conteneur > p { margin-bottom: .9rem; line-height: 20px; }
.section--centree > .conteneur > .bouton { margin-top: 30px; }
@media (min-width: 768px) {
  .section.section--centree { margin-block: 8% 3%; padding-inline: 0; }
  .section--centree > .conteneur > h2 { line-height: 1; }
}
@media (min-width: 1025px) { .section.section--centree { padding-inline: var(--marge-section); } }

/* §27 « Les avantages de… » (plateformes, S1b, mesuré) : h2 + suite h3 / p d'un éditeur de texte. Les h3
   (.titre-or depuis G3) sont stylés ici par leur place (or, Genica 28 / 1,2, graisse 500 comme aujourd'hui). */
.page-plateforme .section:has(> .conteneur > .titre-section + h3) { margin-block: 9% 10%; padding-block: 0 20px; }   /* marges Elementor : elles se fondent avec les voisines */
.page-plateforme .section:has(> .conteneur > .titre-section + h3) > .conteneur > .titre-section { margin-bottom: calc(28px + 3vw); font-size: 25px; }
.page-plateforme .section:has(> .conteneur > .titre-section + h3) > .conteneur > :is(h3, p) { margin-inline: 18.5px; }
.page-plateforme .section:has(> .conteneur > .titre-section + h3) > .conteneur > h3 {
  margin-block: 8px 16px; font-size: 28px; font-weight: var(--fw-moyen); line-height: 1.2; color: var(--c-or);
}
.page-plateforme .section:has(> .conteneur > .titre-section + h3) > .conteneur > p { margin-bottom: .9rem; line-height: 20px; }
@media (min-width: 768px) {
  .page-plateforme .section:has(> .conteneur > .titre-section + h3) { margin-bottom: 8%; }
  .page-plateforme .section:has(> .conteneur > .titre-section + h3) > .conteneur > .titre-section { margin-bottom: calc(28px + 2vw); font-size: var(--fs-h2); }
  .page-plateforme .section:has(> .conteneur > .titre-section + h3) > .conteneur > :is(h3, p) { margin-inline: 11px; }
}
@media (min-width: 1025px) {
  .page-plateforme .section:has(> .conteneur > .titre-section + h3) > .conteneur > :is(h3, p) { margin-inline: 10px; }
}

/* Paragraphes collés d'éditeur (classes R2 sans effet de mise en forme) */
.my-0 { margin-block: 0; }
.whitespace-normal { white-space: normal; }


/* --------------------------------------------------------------------------
   §6 Héros : fond dégradé, texte crème. Le haut passe sous l'en-tête
   superposé : marge haute de 35 % (mobile) puis 15 %, comme aujourd'hui.
   Accueil / villes : .heros__grille > .heros__texte (h1 = surtitre doré,
   h2 = grand titre, p, bouton) + picture > img.heros__visuel.
   Autres : .heros__texte > .grille > div (h1, p, bouton) + picture.
   -------------------------------------------------------------------------- */
.heros {
  position: relative;
  padding: 35% var(--marge-section) 10%;
  color: var(--c-creme);
}
.heros__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  padding-inline: 10px;
}
.heros__texte {
  text-align: center;
}
.heros__texte > *,
.heros__texte > .grille > * > * { margin: 0; }
.heros h1,
.heros h2,
.heros__titre {
  margin: 0;
  color: var(--c-creme);
  font-size: var(--fs-heros);
}
.heros p { margin: 0 0 .9rem; }
.heros p:last-child { margin-bottom: 0; }

/* Accueil et villes */
.heros--accueil .heros__texte { padding: 10px; }
.heros--accueil h1 { color: var(--c-or); font-size: var(--fs-surtitre); }
.heros--accueil h2 { margin-top: 30px; font-size: var(--fs-heros-max); }
.heros--accueil h2 + p { margin-top: 29px; }
.heros--accueil .bouton { margin-top: 23px; }   /* + marge du paragraphe = 38 px */
.heros--accueil .heros__visuel { display: block; width: 76.2%; margin: 10px 0 calc(21.25vw + 10px) 10px; }

/* Héros standard (plateformes, secteurs, piliers, à propos, références) : rangée Elementor à marge basse de
   100 px, rembourrage 35 % / 10 % (mobile) puis 16 % / 8 % (S1b, mesuré sur l'aspiration). */
.heros__texte > .grille { display: grid; gap: 29px; margin-bottom: 100px; padding: 20px 18px; }
.heros__texte > .grille > div:has(> .bouton) { margin-top: 8px; }
.heros__texte > .grille img { display: block; width: 87%; height: auto; margin: 6px auto 14.5px; }
.page-references .heros { padding-top: 40%; padding-bottom: 0; }
/* À propos (S1c, mesuré) : titre de 29 / 41 / 44 px, logo à 60 % de sa colonne, calé en haut à droite */
.page-a-propos .heros h1 { font-size: 29px; }
:is(.page-a-propos, .page-references) .heros__texte > .grille img { width: 60%; }
/* Piliers (S1c, mesuré) : illustration de toute la colonne (mobile, tablette), puis 90 % décalée de 10 % et
   remontée de 13 % ; portrait de la formatrice centré (181 / 190 / 302 px) ; titre de 40 px (marketing,
   conseil) ou 43 px (formatrice) en ordinateur. */
[class*="page-pilier-"] .heros__texte > .grille img { width: 100%; }
.page-pilier-formatrice .heros__texte > .grille img { width: 181px; margin-top: 30px; }
/* Introduction des piliers sous le bandeau de logos (S1c, mesuré) : titre 9 % sous le bandeau, texte 2 % plus
   bas dans un conteneur de 85 % / 670 / 1140 px à 10 px + 10 px de rembourrage ; titre de 25 puis 32 px. */
[class*="page-pilier-"] .logos--heros + .section:not(.section--cartes) { padding: 9% 10px 10px; }
[class*="page-pilier-"] .logos--heros + .section:not(.section--cartes) > .conteneur { max-width: 85%; padding-inline: 0; }
[class*="page-pilier-"] .logos--heros + .section:not(.section--cartes) h2 { margin-bottom: calc(2vw + 20px); font-size: 25px; }
[class*="page-pilier-"] .logos--heros + .section:not(.section--cartes) p { margin: 0 10px .9rem; }
.page-references .heros__texte > .grille { margin-bottom: 4.25vw; }

/* Bandeau de logos dans le héros : chevauche le bas du héros (marges en % d'Elementor) */
/* Bandeau de logos du héros : div.logos.logos--heros placé APRÈS la section du héros. Transparent, il
   remonte de 74 % / 21 % / 16 % de la largeur sur le bas du héros et le dépasse (bande blanche où les
   logos blancs disparaissent, comme aujourd'hui). Marges en vw : % d'Elementor = % de la fenêtre. */
.logos.logos--heros { position: relative; margin-top: -74vw; padding: 35vw 10px 10vw; }
.logos--heros .logos__piste { min-height: 175.5px; }  /* hauteur du bandeau actuel, quels que soient les logos */
.page-accueil .logos--heros .logos__piste { min-height: 197px; }
.page-a-propos .logos--heros .logos__piste { min-height: 135px; }

@media (min-width: 768px) {
  .heros { padding: 15% var(--marge-section); }
  .heros__grille { grid-template-columns: minmax(0, 550fr) minmax(0, 570fr); }
  .heros__texte { text-align: start; }
  .heros--accueil h2 { margin-top: 29px; }
  .heros--accueil h2 + p { margin-top: 28px; }
  .heros--accueil .heros__visuel { width: calc(100% - 20px); margin: 10px; }
  .heros__texte > .grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: 20px; }
  .heros__texte > .grille > :not(picture):not(img) { grid-column: 1; }
  .heros__texte > .grille img { grid-column: 2; grid-row: 1 / span 3; width: 87%; margin: 0 auto; }   /* 3 blocs de texte (h1, p, bouton) */
  .heros__texte > .grille:has(> div:nth-of-type(4)) img { grid-row: 1 / span 4; }
  .page-a-propos .heros h1 { font-size: 41px; }
  :is(.page-a-propos, .page-references) .heros__texte > .grille img { align-self: start; width: 60%; margin: 0 4px 0 auto; }
  .page-pilier-formatrice .heros__texte > .grille img { width: 190px; margin: 0 auto; }
  [class*="page-pilier-"] .logos--heros + .section:not(.section--cartes) > .conteneur { max-width: 670px; }
  [class*="page-pilier-"] .logos--heros + .section:not(.section--cartes) h2 { font-size: 32px; }
  .heros:has(.heros__texte > .grille) { padding: 16% var(--marge-section) 8%; }
  .heros:has(.heros__texte > .grille) .heros__grille { grid-template-columns: minmax(0, 1fr); }
  .heros--portrait, .page-a-propos .heros { padding-bottom: 10%; }
  .page-references .heros,
  .page-references .heros:has(.heros__texte > .grille) { padding-bottom: 2%; }   /* S1c : passe devant la règle :has() */
  .page-references .heros__texte > .grille { margin-bottom: 100px; }
  .logos.logos--heros { margin-top: -21vw; padding: 10px; }
  .logos--heros .logos__piste { min-height: 363px; }
  .page-accueil .logos--heros .logos__piste { min-height: 452px; }
  .page-a-propos .logos--heros .logos__piste { min-height: 135px; }
}
@media (min-width: 1025px) {
  .heros--accueil h2 { margin-top: 36px; }
  .heros--accueil h2 + p { margin-top: 36px; }
  .heros--accueil .bouton { margin-top: 26px; }
  .heros--accueil .heros__visuel { width: auto; max-width: 495px; margin: -73px 10px 10px auto; justify-self: end; }
  .heros__texte > .grille { padding: 20px 16px; row-gap: 36px; }
  .heros__texte > .grille > div:has(> .bouton) { margin-top: 4px; }
  .heros__texte > .grille img { max-width: 424px; margin: -70px 36px 0 auto; }
  .page-a-propos .heros h1 { font-size: 44px; }
  .page-a-propos .heros:has(.heros__texte > .grille) { padding-bottom: 10%; }
  .page-a-propos .logos.logos--heros { margin-top: -14vw; }
  [class*="page-pilier-"] .heros__texte > .grille img { width: 90%; max-width: none; margin: -13% 0 0 10%; }
  .page-pilier-formatrice .heros__texte > .grille img { width: 302px; margin: -12% auto 0 calc(55% - 151px); }
  :is(.page-pilier-marketing, .page-pilier-conseil) .heros h1 { font-size: 40px; }
  /* bloc de texte centré verticalement sur l'illustration (colonne Elementor centrée) */
  [class*="page-pilier-"] .heros__texte > .grille { grid-template-rows: 1fr repeat(3, auto) 1fr; row-gap: 0; }
  [class*="page-pilier-"] .heros__texte > .grille > div:nth-of-type(1) { grid-row: 2; }
  [class*="page-pilier-"] .heros__texte > .grille > div:nth-of-type(2) { grid-row: 3; margin-top: 36px; }
  [class*="page-pilier-"] .heros__texte > .grille > div:nth-of-type(3) { grid-row: 4; margin-top: 40px; }
  [class*="page-pilier-"] .heros__texte > .grille img { grid-row: 1 / -1; }
  .page-pilier-formatrice .heros h1 { font-size: 43px; }
  .page-pilier-marketing .logos.logos--heros { margin-top: -18vw; }
  [class*="page-pilier-"] .logos--heros + .section:not(.section--cartes) > .conteneur { max-width: 1140px; }
  .logos.logos--heros { margin-top: -16vw; }
  .logos--heros .logos__piste { min-height: 201px; }
  .page-accueil .logos--heros .logos__piste { min-height: 250px; }
  .page-a-propos .logos--heros .logos__piste { min-height: 135px; }
}

/* Contact : texte + avis à gauche, formulaire sombre à droite (S1c, mesuré) : colonnes Elementor à 10 px de
   rembourrage et 20 px d'écart, texte centré verticalement sur la hauteur du formulaire, éditeur de texte à
   marges de 3 % / 1 %, bloc d'avis de 56 px (boîte du code court), 30 px entre les colonnes. */
.heros--contact .heros__grille { gap: 30px; }
.heros--contact .heros__texte { padding: 10px; }
.heros--contact h1 { margin-bottom: 20px; font-size: var(--fs-heros-max); }
.heros--contact .avis { min-height: 56px; margin-top: 0; padding-block: 9px; }
.heros .champ { margin: 0; }
@media (max-width: 767px) { .heros--contact .heros__texte p:not(.avis) { display: none; } }  /* rendu actuel (E18) */
@media (min-width: 768px) {
  .heros--contact { padding-bottom: 10%; }
  .heros--contact .heros__grille { grid-template-columns: minmax(0, 637fr) minmax(0, 473fr); }
  .heros--contact h1 + p { margin-top: calc(20px + 3%); }   /* se fond avec les 20 px du titre */
  .heros--contact .avis { margin-top: calc(1% + 20px); }
}
@media (min-width: 768px) and (max-width: 1024px) {   /* conteneur Elementor de 670 px, colonnes de 366 / 274 px */
  .heros--contact .heros__grille { grid-template-columns: minmax(0, 366fr) minmax(0, 274fr); max-width: 690px; margin-inline: auto; }
}

/* Portrait circulaire (Formatrice) et logo en illustration (À propos, Références) */
.heros--portrait .heros__texte > .grille img { border: 5px solid var(--c-blanc); border-radius: var(--r-rond); aspect-ratio: 1; object-fit: cover; }

/* Héros court centré (blog, 404) */
.heros--court { padding-bottom: 1%; text-align: center; }
.heros--court > .conteneur { padding: 40px 27px 10px; }
.heros--court h1 { margin: 0 0 23px; font-size: var(--fs-heros-blog); }
@media (min-width: 768px) { .heros--court > .conteneur { padding: 10px 20px; } .heros--court h1 { margin-bottom: 30px; } }
.heros--court p { font-size: var(--fs-texte-l); line-height: 1.5; }
@media (min-width: 768px) { .heros--court > .conteneur { margin-bottom: 100px; } }

/* Texte seul (pages légales) : tout le texte crème sur le dégradé (E16). S1c, mesuré sur le modèle Elementor
   (le même que Contact) : colonne de 10 px de rembourrage, widgets à 20 px d'écart, éditeurs de texte à marges
   de 3 % / 1 % de la colonne (paragraphes à 0,9rem, le dernier compris), texte centré en mobile, titres h2 de
   32 / 41 / 32 px, listes à 40 px. Rembourrage bas : 10 % (mentions), 7 % (conditions, 6 titres et plus), 5 %
   (politique, suivie d'une 2e section sans fond, pleine largeur sous 1025 px, 7 % en haut et en bas). */
.heros--texte .heros__grille { grid-template-columns: minmax(0, 1fr); }
.heros--texte .heros__texte { padding: 10px; text-align: center; }
.heros--texte h1 { margin-bottom: 20px; font-size: var(--fs-heros-max); }
.heros--texte h2 { margin: 0 0 20px; font-size: 32px; }
.heros--texte p { margin-bottom: .9rem; }
.heros--texte .heros__texte > :last-child { margin-bottom: calc(.9rem + 1%); }
.heros--texte :is(h1, h2) + :is(p, ol, ul) { margin-top: calc(20px + 3%); }   /* se fond avec les 20 px du titre */
.heros--texte :is(p, ol, ul) + h2 { margin-top: calc(.9rem + 1% + 20px); }    /* idem avec les 0,9rem du paragraphe */
.heros--texte :is(ol, ul) { margin: 0; padding-left: 40px; }
.heros--texte a { color: var(--c-or); }
.heros--texte { padding-bottom: 10%; }
.heros--texte + .heros--texte { padding: 7% 0; background: var(--c-nuit); }   /* fond nuit uni d'Elementor */
.heros--texte + .heros--texte .heros__grille { max-width: 1140px; margin-inline: auto; padding-inline: 0; }
.heros--texte + .heros--texte .heros__texte { padding: 0; }
@media (min-width: 768px) {
  .heros--texte .heros__texte { text-align: start; }
  .heros--texte:has(h2:nth-of-type(6)) { padding-bottom: 7%; }
  .heros--texte:has(+ .heros--texte) { padding-bottom: 5%; }
}
@media (min-width: 768px) and (max-width: 1024px) {   /* conteneur Elementor de 670 px, titres à 41 px */
  .heros--texte .heros__grille { max-width: 690px; margin-inline: auto; }
  .heros--texte h2 { font-size: var(--fs-heros-max); }
}

/* Rotation douce de l'illustration au défilement (13 pages, ordinateur seulement) */
@supports (animation-timeline: scroll()) {
  @media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
    .heros__visuel--rotation {
      animation: heros-rotation linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100vh;
    }
  }
}
@keyframes heros-rotation { to { transform: rotate(20deg); } }
[data-parite-fige] .heros__visuel--rotation { animation: none; }

/* --------------------------------------------------------------------------
   §7 Bandeau de logos défilant (CSS pur) : la piste est dupliquée en
   aria-hidden pour la boucle ; pause au survol ; arrêt si mouvement réduit.
   Largeur d'un logo = (largeur du bandeau + 35) / logos visibles − 35
   (2 en mobile, 6 au-delà, comme Swiper).
   -------------------------------------------------------------------------- */
.logos {
  --logos-visibles: 2;
  --logos-ecart: 35px;
  --logos-nombre: 12;
  container-type: inline-size;
  display: flex;
  overflow: hidden;
  padding: 10px;
}
.logos__piste {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--logos-ecart);
  margin: 0;
  padding: 0 var(--logos-ecart) 0 0;
  list-style: none;
  animation: logos-defile calc(var(--defilement-logos) * var(--logos-nombre)) linear infinite;
}
.logos__piste > li {
  flex: none;
  width: calc((100cqi + var(--logos-ecart)) / var(--logos-visibles) - var(--logos-ecart));
  text-align: center;
}
.logos__piste img { width: auto; max-width: 100%; height: auto; }
.logos:hover .logos__piste { animation-play-state: paused; }
@keyframes logos-defile { to { transform: translateX(-100%); } }
.logos__piste:has(> li:nth-child(6):last-child) { --logos-nombre: 6; }
.logos__piste:has(> li:nth-child(7):last-child) { --logos-nombre: 7; }
.logos__piste:has(> li:nth-child(8):last-child) { --logos-nombre: 8; }
.logos__piste:has(> li:nth-child(9):last-child) { --logos-nombre: 9; }
.logos__piste:has(> li:nth-child(10):last-child) { --logos-nombre: 10; }
.logos__piste:has(> li:nth-child(11):last-child) { --logos-nombre: 11; }
.logos__piste:has(> li:nth-child(13):last-child) { --logos-nombre: 13; }
.logos__piste:has(> li:nth-child(14):last-child) { --logos-nombre: 14; }
.logos__piste:has(> li:nth-child(15):last-child) { --logos-nombre: 15; }
.logos__piste:has(> li:nth-child(16):last-child) { --logos-nombre: 16; }
.logos__piste:has(> li:nth-child(17):last-child) { --logos-nombre: 17; }
.logos__piste:has(> li:nth-child(18):last-child) { --logos-nombre: 18; }
@media (min-width: 1025px) { .logos { --logos-visibles: 6; } }   /* tablette : 2, comme le mobile (mesuré) */
.logos--clair { background: transparent; }
.section--logos { padding-inline: 0; }
[data-parite-fige] .logos__piste { animation: none; }

/* Sections sur dégradé de l'accueil et des villes (S1b, mesuré) : marge blanche de 8 % au-dessus du dégradé
   (« types d'influenceurs », « Nos clients »), rembourrage bas 10 % / 5 % / 5 % du conteneur */
.section.section--influenceurs { margin-top: 8%; padding-bottom: 9%; }
.carrousel:not(.carrousel--presse) { margin-top: 8%; }
@media (min-width: 768px) { .section.section--influenceurs { padding-bottom: 4.5%; } }
@media (min-width: 1025px) { .section.section--influenceurs { padding-bottom: 5%; } }

/* --------------------------------------------------------------------------
   §8 Carrousel à flèches (« Nos clients ») et §9 carrousel presse.
   scroll-snap natif ; flèches, points et défilement auto par site.js
   ([data-carrousel], [data-carrousel-piste], [data-carrousel-precedent|suivant],
   [data-carrousel-points] > .carrousel__point[aria-current]).
   -------------------------------------------------------------------------- */
.carrousel {
  --diapos: 1;
  --carrousel-ecart: 8px;
  position: relative;
  padding: 10% 3% 5%;
  color: var(--c-creme);
}
.carrousel > .conteneur { position: relative; max-width: none; padding-inline: 0; }
.carrousel .titre-section { margin-bottom: 30px; }
.carrousel__fenetre { margin-inline: 40px; overflow: hidden; }
.carrousel__piste {
  display: flex;
  gap: var(--carrousel-ecart);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.carrousel__piste::-webkit-scrollbar { display: none; }
.carrousel__piste > li {
  flex: 0 0 calc((100% - (var(--diapos) - 1) * var(--carrousel-ecart)) / var(--diapos));
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
}
.carrousel__piste > li img { width: 100%; height: auto; }
.carrousel__fleche {
  position: absolute;
  top: calc(50% + 32px);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  margin-top: -20px;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(237, 237, 237, .9);
  font-size: 25px;
}
.carrousel__fleche svg { width: 1em; height: 1em; }
.carrousel__fleche--prec { left: 0; }
.carrousel__fleche--suiv { right: 0; }
.carrousel__points {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}
.carrousel__point {
  position: relative;
  width: 6px; height: 6px;
  padding: 0;
  border: 0;
  border-radius: var(--r-rond);
  background: var(--c-creme);
  opacity: .5;
}
.carrousel__point::after { content: ""; position: absolute; inset: -9px; }   /* cible tactile de 24 px (A6), rendu inchangé */
.carrousel__point[aria-current="true"] { opacity: 1; }
.carrousel__pause {
  position: absolute; right: 0; bottom: -10px;
  padding: 4px 8px; border: 0; background: none; color: var(--c-creme); font-size: 12px;
}
@media (min-width: 768px) { .carrousel { --diapos: 3; padding: 8% 5% 5%; } }
@media (min-width: 1025px) { .carrousel { --diapos: 5; padding: 5% 5% 1%; } }

/* §9 Carrousel presse et carte presse */
.carrousel--presse { --diapos: 1; --carrousel-ecart: 30px; }
.carrousel--presse .titre-section { font-size: clamp(2.1875rem, 1.5rem + 3vw, 4.0625rem); }
.carrousel--presse .carrousel__piste > li { align-items: stretch; }
@media (min-width: 768px) { .carrousel--presse { --diapos: 2; } }
@media (min-width: 1025px) { .carrousel--presse { --diapos: 3; } }
.carte-presse {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gouttiere);
  width: 100%;
  padding: 30px;
  border-radius: var(--r-m);
  background: var(--c-creme);
  color: var(--c-nuit);
  text-align: center;
}
.carte-presse img { width: 100%; height: auto; }
.carte-presse h3 { margin: 0; font-size: var(--fs-h3-l); font-weight: var(--fw-normal); color: var(--c-nuit); }
.carte-presse .bouton { margin-top: auto; }

/* --------------------------------------------------------------------------
   §10 Titre de section animé (h3 ou h2 .titre-section--xl) : mot lavande,
   effet « vague ». site.js découpe em[data-titre-anime] en lettres (--i) ;
   sans JS, le mot reste fixe. Le texte complet reste lu (E21).
   -------------------------------------------------------------------------- */
.titre-section--xl { font-size: var(--fs-titre-anime); line-height: var(--lh-titre-anime); }
.titre-section [data-titre-anime],
.accent--anime { color: var(--c-lavande); font-style: normal; }
.titre-anime__mot { display: inline-block; white-space: nowrap; }
.titre-anime__lettre {
  display: inline-block;
  animation: titre-vague 2.5s calc(var(--i, 0) * 40ms) ease-in-out infinite both;
}
@keyframes titre-vague {
  0%, 30%, 100% { transform: none; }
  12% { transform: translateY(-.25em); }
}
[data-parite-fige] .titre-anime__lettre { animation: none; }

/* --------------------------------------------------------------------------
   §11 Intro centrée à mot coloré (h2 32 px + texte 16 / 20)
   -------------------------------------------------------------------------- */
.section > .conteneur > h2.titre-section + p,
.intro p { line-height: var(--lh-texte-serre); }

/* --------------------------------------------------------------------------
   §12 Bloc texte + photo, §19 texte + illustration, §29 image / texte alterné
   section.duo > .conteneur.duo__grille > .duo__texte + img.duo__media
   -------------------------------------------------------------------------- */
.duo { padding: 15% var(--marge-section); }
.duo__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 20px;
}
.duo__texte > h2 { margin-bottom: 40px; font-size: var(--fs-h2); text-align: center; }
.duo__texte > :last-child { margin-bottom: 0; }
.duo__texte .bouton { margin-top: 20px; }
.duo__media {
  display: block;
  width: calc(100% - 20px);
  height: auto;
  margin: 10px auto;
  border-radius: var(--r-s);
}
.duo__grille > .titre-section { grid-column: 1 / -1; margin-bottom: 0; }
.duo.duo--media-dabord .duo__media { order: -1; }   /* image avant le texte en mobile (ex. plateformes) */
@media (min-width: 768px) { .duo.duo--media-dabord .duo__media { order: 0; } }
/* Plateformes (S1b, mesuré) : écart 30 px, image à 70 %, rembourrage 8 % au-delà du mobile */
.duo.duo--media-dabord .duo__grille { row-gap: 30px; }
.duo.duo--media-dabord .duo__media { margin: 26.5px auto 10px; }
.duo.duo--media-dabord .duo__texte > :last-child { margin-bottom: .9rem; }
.duo--illustration .duo__media { width: 193px; max-width: 100%; border-radius: 0; }
.duo--illustration .duo__texte { padding: 0 19px; }
.duo.duo--illustration { padding: 23% var(--marge-section) 10px; }
.duo--illustration .titre-section { margin-bottom: 12px; }
@media (max-width: 767px) { .duo--illustration .duo__media { margin-top: -17px; } }
@media (min-width: 768px) {
  .duo.duo--illustration { padding-block: 18% 13%; }
  .duo--illustration .titre-section { margin-bottom: 0; }
}
@media (min-width: 1025px) {
  .duo.duo--illustration { padding-block: 16% 5%; }
  .duo--illustration .titre-section { margin-bottom: 40px; }
}
@media (min-width: 768px) {
  .duo { padding-block: 5%; }
  .duo__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .duo__texte { padding-right: 20%; }
  .duo__texte > h2 { text-align: start; }
  .duo__media { width: calc((100% - 20px) * .67); }
  .duo--inverse .duo__media { order: -1; }
  .duo.duo--media-dabord { padding-block: 8%; }
  .duo.duo--media-dabord .duo__media { width: calc((100% - 20px) * .7); margin: 10px auto; }
  .duo--inverse .duo__texte { padding: 0 0 0 20%; }
  .duo--illustration .duo__grille { grid-template-columns: minmax(0, 843fr) minmax(0, 277fr); }
  .duo--illustration .duo__texte { padding: 10px; }
}

/* À propos (S1c, mesuré) : les trois duos sont les trois rangées d'un même conteneur Elementor (85 % en
   mobile, 670 px en tablette, 1140 px au-delà), rangées et colonnes à 10 px de rembourrage, 20 px d'écart,
   3 % du conteneur autour de la rangée du milieu ; image d'abord en mobile, à 69 % de la colonne (70 % pour
   celle de gauche), calée à droite (à gauche pour la rangée inversée) ; h2 de 25 px puis 32 px. */
.page-a-propos .duo { padding: 0 var(--marge-section); }
.page-a-propos .duo + .duo { padding-top: calc(20px + 2.55%); }   /* 3 % de 85 % de la fenêtre */
.page-a-propos .duo__grille { gap: 20px; padding: 10px 20px; }
.page-a-propos .duo__texte { padding: 10px; }
.page-a-propos .duo__texte > h2 { margin-bottom: 20px; font-size: 25px; text-align: start; }
.page-a-propos .duo__texte > :last-child { margin-bottom: .9rem; }
.page-a-propos .duo:has(+ .duo) .duo__texte p { line-height: 20px; }   /* deux premières rangées */
.page-a-propos .duo__media { order: -1; width: calc((100% - 20px) * .69); margin: 10px 10px 10px auto; }
.page-a-propos .duo--inverse .duo__media { width: calc((100% - 20px) * .7); margin: 10px auto 10px 10px; }
@media (min-width: 768px) {
  .page-a-propos .logos--heros + .duo { padding-top: 9%; }
  .page-a-propos .duo + .duo { padding-top: 40.1px; }   /* 20 px + 3 % de 670 px */
  .page-a-propos .duo__texte,
  .page-a-propos .duo--inverse .duo__texte { padding: 10px; }
  .page-a-propos .duo__texte > h2 { font-size: 32px; }
  .page-a-propos .duo:not(.duo--inverse) .duo__media { order: 0; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .page-a-propos .duo__grille { max-width: 690px; margin-inline: auto; }
}
@media (min-width: 1025px) { .page-a-propos .duo + .duo { padding-top: calc(20px + min(3vw, 34.2px)); } }

/* --------------------------------------------------------------------------
   §13 Cartes services illustrées : fond dégradé, illustration posée à cheval
   sur le haut de la carte, titres blancs, textes justifiés (E15).
   -------------------------------------------------------------------------- */
.section--services { padding: 3% 0; }
.section--services .titre-section--xl { margin: 18px 0 0; }   /* marge 8 px du titre + 10 px du conteneur (S1b) */
.cartes-services {
  --visuel: 175px;
  --decalage: 108px;
  gap: 20px 50px;
  margin-top: 0;
  padding: 58px 10px 0;            /* écart titre → illustration : 58 / 70 / 87 px */
}
.section--services .titre-section--xl { padding-inline: 18px; }
.carte-service {
  position: relative;
  background-color: var(--c-degrade-moyenne);
  background-image: var(--fond-grain), var(--fond-degrade-svg);
  background-size: 200px 200px, cover;
  background-position: 0 0, center;
  background-blend-mode: overlay, normal;
  margin-top: var(--decalage);
  padding: 60px 40px 25px;
  border-radius: var(--r-m);
  color: var(--c-creme);
}
.carte-service__visuel {
  position: absolute;
  left: 50%;
  top: calc(-1 * var(--decalage));
  width: var(--visuel);
  height: auto;
  transform: translateX(-50%);
}
.carte-service__titre {
  margin: 0 0 28px;
  font-size: var(--fs-h3);
  font-weight: var(--fw-normal);
  line-height: 1;
  text-align: center;
  color: var(--c-blanc);
}
.carte-service p, .carte-service li {
  font-size: var(--fs-texte-carte);
  font-weight: var(--fw-moyen);
  line-height: 1.5;
  text-align: justify;
}
@media (min-width: 768px) {
  .section--services { padding-inline: var(--marge-section); }
  .cartes-services { --visuel: 150px; --decalage: 104px; row-gap: 40px; padding-top: 70px; }
  .section--services .titre-section--xl { padding-inline: 0; }
  .carte-service__titre { margin-bottom: 26px; }
}
@media (min-width: 1025px) {
  .cartes-services { --visuel: 214px; --decalage: 137px; row-gap: 31px; padding-top: 87px; }
  .carte-service__titre { margin-bottom: 34px; }
}
/* Pleine largeur (Marketing d'influence) : cartes de 860 px, bordure blanche */
.cartes-services--large { display: grid; justify-content: center; grid-template-columns: minmax(0, 860px); list-style: none; }
.carte-service--large { border: var(--b-carte); box-shadow: var(--o-carte-compacte); }
/* Marketing d'influence (S1c, mesuré) : titre dans un conteneur à marges de 10 % / 3 % de la fenêtre, cartes
   2 % plus bas dans un conteneur de 370 / 670 / 900 px (colonnes de 10 px de rembourrage, 30 px d'écart) ;
   illustration de 175 / 325 / 264 px, carte remontée de 22 / 22 / 13 % (118 / 202 / 169,6 px sous le haut de
   l'illustration), rembourrage 47 / 47 / 26 puis 80 / 60 / 45 px, titre de 22 / 22 / 25 px suivi de 20 px + 3 %. */
.section--cartes:has(> .conteneur > .cartes-services--large) { padding: 10% 10px 0; }
.section--cartes:has(> .conteneur > .cartes-services--large) > .conteneur { padding-inline: 0; }
.section--cartes > .conteneur > .titre-section--xl:has(+ .cartes-services--large) { margin: 10px 0 calc(5vw + 10px); }
.cartes-services--large { --visuel: 175px; --decalage: 121px; grid-template-columns: minmax(0, 370px); gap: 30px; padding: 0; }
.carte-service--large { margin: 128px 10px 10px; padding: 47px 47px 26px; }
.carte-service--large .carte-service__titre { margin-bottom: calc(20px + 3%); font-size: 22px; line-height: 22px; }
@media (min-width: 768px) {
  .section--cartes:has(> .conteneur > .cartes-services--large) > .conteneur { max-width: 670px; }
  .cartes-services--large { --visuel: 325px; --decalage: 205px; grid-template-columns: minmax(0, 670px); padding-top: 0; }
  .carte-service--large { margin-top: 212px; padding: 80px 60px 45px; }
}
@media (min-width: 1025px) {
  .section--cartes:has(> .conteneur > .cartes-services--large) > .conteneur { max-width: 1140px; }
  .cartes-services--large { --visuel: 264px; --decalage: 172.6px; grid-template-columns: minmax(0, 900px); }
  .carte-service--large { margin-top: 179.6px; }
  .carte-service--large .carte-service__titre { font-size: 25px; line-height: 25px; }
}

/* --------------------------------------------------------------------------
   §14 Cartes « types d'influenceurs » (claire / contour) et §17 cartes
   claires sur dégradé
   -------------------------------------------------------------------------- */
.section--influenceurs { padding: 35px var(--marge-section) calc(5% + 25px); color: var(--c-creme); }
@media (min-width: 768px) { .section--influenceurs { padding-top: 56px; } }
@media (min-width: 1025px) { .section--influenceurs { padding-top: 5%; } }
.section--numerotee { padding-block: 15%; }
.section--numerotee .titre-section { margin-bottom: 49px; }
@media (min-width: 768px) { .section--numerotee .titre-section { margin-bottom: 78px; } }
@media (min-width: 1025px) { .section--numerotee .titre-section { margin-bottom: 98px; } }
@media (min-width: 768px) { .section--numerotee { padding-block: 8% 12%; } }
@media (min-width: 1025px) { .section--numerotee { padding-bottom: 10%; } }
.section--influenceurs .titre-section--clair { margin-bottom: 48px; color: var(--c-creme); font-size: var(--fs-h2-sombre); }
@media (min-width: 768px) { .section--influenceurs .titre-section--clair { margin-bottom: 64px; } }
@media (min-width: 1025px) { .section--influenceurs .titre-section--clair { margin-bottom: 87px; } }
.section--cartes.fond-degrade .titre-section { margin-bottom: 50px; color: var(--c-creme); font-size: var(--fs-h2-sombre); }
@media (max-width: 767px) { .section--influenceurs > .conteneur { padding-inline: 0; } }
.cartes-influenceurs { gap: 30px; padding: 0 10px; }
@media (max-width: 767px) {
  .section--influenceurs .titre-section--clair, .section--numerotee .titre-section, .duo--illustration .titre-section { font-size: 25px; }
}
.carte {
  padding: 30px 40px;
  border-radius: var(--r-m);
  text-align: center;
}
.carte__etoile { display: block; width: 98px; height: auto; margin: 0 auto 20px; }
.carte h3 { margin-bottom: 20px; font-size: var(--fs-h3-carte); }
.carte p { text-align: justify; }
.carte--contour { border: var(--b-carte-contour); color: var(--c-creme); }
.carte--claire { border: var(--b-carte-contour); background: var(--c-creme); color: var(--c-nuit); }
@media (min-width: 768px) {
  .cartes-influenceurs { gap: 75px 80px; padding-inline: 10px; }
  .carte__etoile { width: 63px; }
}
@media (min-width: 1025px) { .carte__etoile { width: 69px; } .cartes-influenceurs { row-gap: 97px; } }

/* §17 cartes claires à ombre (Conseil, Formatrice) */
.section--cartes.fond-degrade { color: var(--c-creme); }
.section--cartes.fond-degrade > .conteneur > p { text-align: center; }
.cartes-claires { gap: 40px; max-width: 958px; margin-inline: auto; }
.cartes-claires .carte { padding: 50px; border: 0; box-shadow: var(--o-carte); }
.cartes-claires .carte h3 { font-size: 25px; font-weight: var(--fw-normal); }
.cartes-claires .carte p { font-weight: var(--fw-moyen); color: var(--c-marine); }
@media (min-width: 768px) {
  .cartes-claires .carte:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 20px); }
}
@media (max-width: 767px) { .cartes-claires .carte { padding: 30px; } }

/* --------------------------------------------------------------------------
   §15 Cartes compactes : ul|ol.vignettes--icone | --numero | --pastille
   -------------------------------------------------------------------------- */
.vignettes {
  display: grid;
  gap: 60px 20px;
  margin: 0;
  padding: 40px 0 0;
  list-style: none;
}
.vignette {
  position: relative;
  padding: 40px 30px 30px;
  border: var(--b-carte);
  border-radius: var(--r-s);
  box-shadow: var(--o-carte-compacte);
  color: var(--c-creme);
  text-align: center;
}
.section--cartes .vignette { background-color: var(--c-degrade-moyenne); }
.vignette.fond-degrade, .section--cartes .vignette { background-image: var(--fond-grain), var(--fond-degrade-svg); background-size: 200px 200px, cover; background-position: 0 0, center; background-blend-mode: overlay, normal; }
.vignette__titre, .vignette h3 { margin-bottom: 20px; font-size: 25px; font-weight: var(--fw-normal); color: var(--c-blanc); }
.vignette p { margin: 0; font-size: var(--fs-texte-s); font-weight: var(--fw-moyen); line-height: 1.5; }
.vignette__icone {
  display: block;
  width: 60px; height: 60px;
  margin: -70px auto 20px;
  border-radius: var(--r-rond);
  object-fit: contain;
}
/* Pastilles (À propos, S1c, mesuré) : colonnes de 10 px de rembourrage sans écart, pastille numérotée de
   60 / 60 / 50 px posée au-dessus de la carte (46 / 20 / 20,66 px), cartes espacées de 40 px, carte 40 / 30 / 30 px, intitulé en titre de
   26 puis 28 px. */
.vignettes--pastille { gap: 0; padding: 10px 0; }
.vignettes--pastille .vignette { margin: 30px 10px 10px; padding: 40px 30px 30px; }
.vignettes--pastille .vignette__icone { position: absolute; top: -49px; left: 50%; width: 60px; height: auto; margin: 0; transform: translateX(-50%); }
.vignettes--pastille h3 { margin: 0; font-size: var(--fs-h3-l); }
.vignettes--pastille p { font-family: var(--f-titre); font-size: 26px; font-weight: var(--fw-normal); line-height: 26px; }
.vignettes--pastille a { color: var(--c-blanc); }
@media (min-width: 768px) { .vignettes--pastille .vignette__icone { top: -23px; } }
@media (min-width: 1025px) {
  .vignettes--pastille .vignette { margin-top: 30.66px; }
  .vignettes--pastille .vignette__icone { top: -23.66px; width: 50px; }
  .vignettes--pastille p { font-size: 28px; line-height: 28px; }
}
.section--cartes > .conteneur > .titre-section { text-align: start; font-size: var(--fs-h2-xl); }
@media (min-width: 1025px) {
  .vignettes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vignette p { font-size: var(--fs-texte-xs); line-height: 21px; }
}
/* « Nos services » d'À propos (S1c, mesuré) : titre centré de 33 / 50 px dans un conteneur à marges de 8 % / 3 %
   de la fenêtre et 10 px de rembourrage, cartes 2 % plus bas en ordinateur, 8 % avant la section Presse. */
.page-a-propos .section--cartes { padding: 8% 10px 8%; }
.page-a-propos .section--cartes > .conteneur { padding-inline: 0; }
.page-a-propos .section--cartes > .conteneur > .titre-section { margin: 10px 0 calc(3vw + 10px); font-size: 33px; text-align: center; }
@media (min-width: 768px) { .page-a-propos .section--cartes > .conteneur > .titre-section { font-size: 50px; } }
@media (min-width: 768px) and (max-width: 1024px) { .page-a-propos .section--cartes > .conteneur { max-width: 670px; } }
@media (min-width: 1025px) {
  .page-a-propos .section--cartes > .conteneur { max-width: 1140px; }
  .page-a-propos .section--cartes .vignettes { margin-top: 2vw; }
}

/* --------------------------------------------------------------------------
   §16 Timeline « Notre méthode » : trait vertical, pastilles, zigzag.
   ol.timeline[data-frise] : site.js pose --frise-progression (0 à 1) sur la
   liste et data-etat="active|passee" sur les étapes ; sans JS, statique.
   -------------------------------------------------------------------------- */
.section--timeline { padding: calc(5% + 32px) 0 10px; }   /* bas : 10 px du conteneur Elementor (S1b) */
.section--timeline > .conteneur > .titre-section { margin-bottom: 57px; }
/* Tablette : la frise occupe toute la largeur (conteneur Elementor à 10 px des bords), axe à 22,5 px (S1b) */
@media (min-width: 768px) and (max-width: 1024px) {
  .section--timeline > .conteneur > .titre-section { margin-bottom: 95px; }
  .section--timeline .timeline { --retrait: 65px; --axe: 22.5px; padding-right: 0; }
}
@media (min-width: 1025px) { .section--timeline { padding-inline: var(--marge-section); } .section--timeline > .conteneur > .titre-section { margin-bottom: 134px; } }
.timeline {
  --pastille: 45px;
  --retrait: 84px;
  --axe: calc(var(--retrait) / 2);
  --timeline-ecart: 142px;         /* ordinateur : écart entre le texte et l'axe (42 px sur les plateformes) */
  position: relative;
  margin: 0;
  padding: 0 16px 0 var(--retrait);
  list-style: none;
}
.timeline::before,
.timeline::after {
  content: "";
  position: absolute;
  left: calc(var(--axe) - var(--timeline-trait) / 2);
  top: 0;
  width: var(--timeline-trait);
  background: var(--c-nuit);
}
.timeline::before { bottom: 0; }
.timeline::after { height: calc(var(--frise-progression, 0) * 100%); background: var(--c-or); }
.timeline__etape {
  position: relative;
  padding-bottom: 97px;
  font-size: var(--fs-texte-s);
  font-weight: var(--fw-moyen);
  line-height: var(--lh-timeline);
  transition: color var(--t-moyen);
}
.timeline__etape:last-child { padding-bottom: 0; }
.timeline__etape::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: calc(var(--axe) - var(--retrait) - var(--pastille) / 2);
  top: 0;
  width: var(--pastille);
  height: var(--pastille);
  border-radius: var(--r-rond);
  background: var(--c-nuit);
  transition: background-color var(--t-moyen) ease-in-out;
}
.timeline__titre {
  margin: 3px 0 25px;
  font-family: var(--f-titre);
  font-size: var(--fs-h3-timeline);
  font-weight: var(--fw-titre);
  line-height: var(--lh-timeline);
  color: var(--c-noir);            /* rendu actuel (E3) */
  transition: color var(--t-moyen);
}
.timeline__etape p:not(.timeline__titre) { margin: 0 0 .9rem; }
.timeline__etape[data-etat="passee"]::before,
.timeline__etape[data-etat="active"]::before { background: var(--c-or); }
.timeline__etape[data-etat="active"],
.timeline__etape[data-etat="active"] .timeline__titre { color: var(--c-or); }   /* 2,2:1 sur blanc (A2) */
@media (min-width: 1025px) {
  .timeline { padding: 0; }
  .timeline::before, .timeline::after { left: calc(50% - var(--timeline-trait) / 2); }
  .timeline__etape { width: calc(50% - var(--timeline-ecart)); }
  .timeline__etape::before { left: auto; right: calc(-1 * var(--timeline-ecart) - var(--pastille) / 2); }
  .timeline__etape:nth-child(even) { margin-left: calc(50% + var(--timeline-ecart)); }
  .timeline__etape:nth-child(even)::before { right: auto; left: calc(-1 * var(--timeline-ecart) - var(--pastille) / 2); }
  :is(.page-plateforme, .page-secteur) .timeline { --timeline-ecart: 42px; }
}

/* --------------------------------------------------------------------------
   §18 Liste numérotée en zigzag : pastille image de 57 px (rendu actuel)
   -------------------------------------------------------------------------- */
.liste-numerotee { margin: 0; padding: 0; list-style: none; }
.liste-numerotee__item {
  display: grid;
  justify-items: center;
  margin: 0 auto 70px;
  padding: 0 29px;
  text-align: center;
}
.liste-numerotee__item:last-child { margin-bottom: 0; }
.liste-numerotee__pastille { width: 57px; height: 57px; margin-bottom: 20px; }
.liste-numerotee__item h3 { margin-bottom: 40px; font-size: var(--fs-h3-l); }
.liste-numerotee__item p { text-align: start; }
@media (min-width: 768px) {
  .liste-numerotee__item {
    grid-template-columns: 57px minmax(0, 1fr);
    column-gap: 20px;
    justify-items: start;
    max-width: 834px;
    margin-left: 20px;
    padding: 0;
    text-align: start;
  }
  .liste-numerotee__pastille { grid-row: 1 / span 9; margin: 0; }
  .liste-numerotee__item h3 { align-self: center; margin: 14px 0 54px; }
  .liste-numerotee__item p { grid-column: 2; margin-left: 7px; }
  .liste-numerotee__item:nth-child(even) { margin-left: 286px; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .liste-numerotee__item:nth-child(even) { margin-left: 175px; }
}

/* --------------------------------------------------------------------------
   §20 Bloc contact et formulaire ; §35 mini-formulaire latéral
   section.contact > .conteneur.contact__cadre > img.contact__logo + form
   -------------------------------------------------------------------------- */
.contact { padding: 5% 7%; }
.contact .formulaire { padding: 10px; }
.contact__cadre {
  display: grid;
  align-items: center;
  gap: 30px;
  max-width: var(--conteneur-etroit);
  padding: 15px;
  border-radius: var(--r-champ);
  background: var(--c-marine);
  color: var(--c-creme);
}
.contact__logo { display: block; width: 100%; max-width: 297px; height: auto; justify-self: center; }
@media (min-width: 768px) {
  .contact__cadre { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 40px; padding: var(--e-10); border-radius: var(--r-l); }
}
/* Bloc contact (S1b, mesuré) : logo masqué en mobile (elementor-hidden-mobile), marges de 15 % du conteneur,
   colonnes 206 / 303 puis 317 / 470 px espacées de 20 px, titre collé en haut puis 38 px avant les champs */
.contact { padding-block: 0; }
.contact__cadre { margin-block: 15%; }   /* marges Elementor : elles se fondent avec les voisines */
.page-secteur .contact__cadre { margin-top: 8%; }
.contact .formulaire__titre { margin: 0 0 13px; }
@media (max-width: 767px) { .contact__cadre picture:has(> .contact__logo), .contact__cadre > .contact__logo { display: none; } }
@media (min-width: 768px) {
  .contact__cadre { grid-template-columns: minmax(0, 206fr) minmax(0, 303fr); column-gap: 20px; }
  .contact__logo { width: calc(100% - 20px); margin: 10px auto; }
}
@media (min-width: 1025px) {
  .contact { padding-block: 10px; }
  .contact__cadre { margin-block: 140.85px; }   /* 15 % du conteneur de 939 px */
  .contact__cadre { grid-template-columns: minmax(0, 317fr) minmax(0, 470fr); }
}

.formulaire { display: grid; gap: 25px; margin: 0; }
.formulaire__titre {
  margin: 10px 0 0;
  font-size: var(--fs-h2-sombre);
  color: var(--c-creme);
  text-align: center;
}
@media (min-width: 768px) { .formulaire__titre { text-align: start; } }
.champ { margin: 0; }
.champ input,
.champ select,
.champ textarea {
  display: block;
  width: 100%;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: var(--r-champ);
  background-color: var(--c-creme);
  color: var(--c-gris-champ);
  font-family: var(--f-texte);
  font-size: 15px;
  line-height: 21px;
  transition: border-color var(--t-rapide), box-shadow var(--t-rapide);
}
.champ select {
  padding: 5px 34px 5px 14px;
  line-height: 22.5px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%238D8D8D' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 10px 6px;
}
.champ textarea { min-height: 94px; padding: 5px 14px; resize: vertical; }
.champ ::placeholder { color: var(--c-gris-champ); opacity: .6; }   /* ≈ #B8B6B6, 1,85:1 (E13) */
.champ input:focus,
.champ select:focus,
.champ textarea:focus { outline: 0; border-color: #333; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }   /* rendu actuel */
.champ input:focus-visible,
.champ select:focus-visible,
.champ textarea:focus-visible { outline: var(--focus); outline-offset: 2px; }
.champ--piege { position: absolute; left: -9170px; width: 1px; overflow: hidden; }
.champ__erreur { display: block; margin-top: 4px; color: #FFB4A8; font-size: var(--fs-mini); }
.champ [aria-invalid="true"] { border-color: #E06E6E; }
.formulaire .bouton--envoi { justify-self: center; margin-top: 0; }
@media (min-width: 768px) { .formulaire .bouton--envoi { justify-self: start; } }
.formulaire__message { margin: 0; font-size: var(--fs-texte-xs); color: var(--c-creme); }
.formulaire__message[data-etat="ok"] { color: #75CCA0; }
.formulaire__message[data-etat="erreur"] { color: #FFB4A8; }
.formulaire[aria-busy="true"] .bouton { opacity: .7; cursor: progress; }

/* Héros Contact : cadre sombre dans une colonne de 10 px de rembourrage, marge haute de 5 % de sa largeur
   (Elementor), rembourrage 15 / 30 px + 10 px du conteneur du formulaire, bouton centré (S1c, mesuré) */
.formulaire--heros {
  margin: calc(10px + (100% - 20px) / 20) 10px 10px;
  padding: 25px;
  border-radius: var(--r-l);
  background: var(--c-marine);
}
@media (min-width: 768px) { .formulaire--heros { padding: 40px; } }
.formulaire--heros .bouton--envoi { justify-self: center; }
.formulaire--heros .champ textarea { height: 73px; min-height: 73px; }

/* §35 Mini-formulaire « On prend contact ? » (barre latérale des articles) */
.formulaire--compact {
  gap: 20px;
  padding: 50px 45px;
  border-radius: var(--r-s);
  background: var(--c-marine);
  box-shadow: var(--o-flottante);
}
.article__contact-titre {
  margin: 0;
  color: var(--c-creme);
  font-family: var(--f-titre);
  font-size: 28px;
  font-weight: 300;
  line-height: 32px;
  text-transform: capitalize;
}
.formulaire--compact .champ input { border-radius: var(--r-champ-compact); }
.formulaire--compact .bouton--envoi {
  justify-self: start;
  padding: 15px 30px;
  border-radius: var(--r-bouton-compact);
  font-weight: var(--fw-normal);
  text-transform: capitalize;
}

/* --------------------------------------------------------------------------
   §21 Avis Google (statique, sans script tiers)
   -------------------------------------------------------------------------- */
.avis {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 62px;
  margin: 0;
  padding: 12px 20px;
  border-radius: 12px;
  background: var(--c-blanc);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .15);
  color: #000;
  font-family: var(--f-blocs-systeme);
  font-size: 14px;
  line-height: 20px;
}
.avis__source { font-weight: 700; color: #4285F4; }
/* Logo Google et 5 étoiles dessinés en CSS (span vides avec role="img" et aria-label, contrat G1) */
.avis__logo {
  display: inline-block;
  width: 62px; height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 20'%3E%3Ctext y='16' font-family='Arial,sans-serif' font-size='17' font-weight='500' letter-spacing='-.4'%3E%3Ctspan fill='%234285F4'%3EG%3C/tspan%3E%3Ctspan fill='%23EA4335'%3Eo%3C/tspan%3E%3Ctspan fill='%23FBBC05'%3Eo%3C/tspan%3E%3Ctspan fill='%234285F4'%3Eg%3C/tspan%3E%3Ctspan fill='%2334A853'%3El%3C/tspan%3E%3Ctspan fill='%23EA4335'%3Ee%3C/tspan%3E%3C/text%3E%3C/svg%3E") left center / contain no-repeat;
}
img.avis__logo { background: none; }
.avis__etoiles { color: #F6BB06; font-size: 17px; letter-spacing: 1px; }
.avis__etoiles:empty {
  display: inline-block;
  width: 88px; height: 17px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17.6 17'%3E%3Cpath fill='%23F6BB06' d='M8.5 0l2.6 5.6 6.1.7-4.5 4.2 1.2 6L8.5 13.5 3.1 16.5l1.2-6L-.2 6.3l6.1-.7z'/%3E%3C/svg%3E") left center / 17.6px 17px repeat-x;
}
.avis__nombre { color: #555; }

/* --------------------------------------------------------------------------
   §22 FAQ accordéon : section.faq > .conteneur.faq__cadre > h2 + details
   (name="faq" : une seule question ouverte, sans JS)
   -------------------------------------------------------------------------- */
.faq { padding: 0 27px 10px; }
.faq__cadre {
  max-width: var(--conteneur);
  padding: 32px 45px 45px 32px;
  border-radius: var(--r-champ);
  background: var(--c-marine);
  color: var(--c-creme);
}
.faq__cadre > h2 { margin-bottom: 25px; font-size: 27px; color: var(--c-blanc); }
.faq__item { border-bottom: 3px solid var(--c-blanc); transition: border-color var(--t-rapide); }
.faq__item[open],
.faq__item:has(> summary:hover) { border-color: var(--c-or); }
.faq__item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 10px 10px 13px;
  color: var(--c-blanc);
  list-style: none;
  cursor: pointer;
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary::after {
  /* chevron blanc fermé, tiret or ouvert */
  content: "";
  flex: none;
  width: 14px; height: 14px;
  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
}
.faq__item[open] > summary { color: var(--c-or); }
.faq__item[open] > summary::after { height: 0; border-right: 0; transform: none; }
.faq__item > summary h3 {
  margin: 0;
  font-size: var(--fs-h3-accordeon);
  line-height: var(--lh-accordeon);
  color: var(--c-or);
}
.faq__item > summary:hover { color: var(--c-or); }
.faq__reponse { padding: 15px 25px 15px 15px; }
.faq__item + .faq__item { margin-top: 42px; }
.faq__reponse a { color: var(--c-or); }
@media (min-width: 768px) {
  .faq { padding-inline: var(--marge-section); }
  .faq__cadre { padding: var(--e-9); border-radius: var(--r-l); }
  .faq__cadre > h2 { margin-bottom: 30px; font-size: var(--fs-h2-sombre); }
  .faq__item > summary { padding: 13px 10px 17px; }
}
/* FAQ (S1b, mesuré) : titre → première question 20 px + 3 % ; marges Elementor 3 % / 10 % + 10 px au-delà du
   mobile ; en tablette, cadre à 10 px + 39 px des bords et questions moins hautes */
.faq { padding-bottom: 8.6%; }
.faq__cadre > h2 { margin-bottom: calc(20px + 3%); }
@media (min-width: 768px) {
  .faq { margin-top: 3%; padding-top: 10px; padding-bottom: calc(10% + 10px); }
  .faq__cadre > h2 { margin-bottom: calc(20px + 3%); }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .faq { padding-inline: calc(5% + 10px); }
  .faq__item > summary { padding: 10px 10px 13px; }
}
@supports (interpolate-size: allow-keywords) {
  .faq__cadre { interpolate-size: allow-keywords; }
  .faq__item::details-content { height: 0; overflow: clip; transition: height var(--t-moyen), content-visibility var(--t-moyen) allow-discrete; }
  .faq__item[open]::details-content { height: auto; }
}

/* §23 FAQ UGC (bloc maison) : Fraunces et Poppins absentes → polices système (rendu actuel) */
.faq--ugc {
  --faq-orange: #E8A33D; --faq-encre: #1A1A2E; --faq-texte: #45455A; --faq-filet: #E3E3EC;
  max-width: 780px;
  margin: 0 auto;
  padding: 80px 24px;
  color: var(--faq-texte);
  font-family: var(--f-blocs-systeme);
}
.faq--ugc h2 {
  margin: 0 0 40px;
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 900;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.15;
  text-align: center;
  color: var(--faq-encre);
}
.faq--ugc details { padding: 18px 0; border-bottom: 1px solid var(--faq-filet); }
.faq--ugc summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-weight: 600; font-size: 1rem; color: var(--faq-encre);
  list-style: none; cursor: pointer;
}
.faq--ugc summary::-webkit-details-marker { display: none; }
.faq--ugc summary::after { content: "+"; flex-shrink: 0; color: var(--faq-orange); font-size: 1.5rem; line-height: 1; transition: transform .2s; }
.faq--ugc details[open] summary::after { transform: rotate(45deg); }
.faq--ugc summary:focus-visible { outline: 3px solid var(--faq-orange); outline-offset: 4px; }
.faq--ugc p { margin: 12px 0 0; font-size: .92rem; line-height: 1.7; }
/* Même rendu si G1 garde la structure de §22 : section.faq.faq--ugc > .faq__cadre > details.faq__item */
.faq.faq--ugc { padding: 0; }
.faq--ugc .faq__cadre { max-width: 780px; padding: 80px 24px; border-radius: 0; background: none; color: var(--faq-texte); }
.faq--ugc .faq__cadre > h2 { margin: 0 0 40px; font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--faq-encre); }
.faq--ugc .faq__item, .faq--ugc .faq__item[open] { border-bottom: 1px solid var(--faq-filet); }
.faq--ugc .faq__item + .faq__item { margin-top: 0; }
.faq--ugc .faq__item > summary { padding: 0; color: var(--faq-encre); }
.faq--ugc .faq__item > summary::after { width: auto; height: auto; border: 0; transform: none; }
.faq--ugc .faq__item[open] > summary::after { transform: rotate(45deg); }
.faq--ugc .faq__reponse { padding: 0; }

/* --------------------------------------------------------------------------
   §24 Cartes projets / références : li.projet (ou li > article.projet)
   -------------------------------------------------------------------------- */
.projets { gap: 40px 30px; padding-inline: 19px; }
@media (min-width: 768px) { .projets { padding-inline: 0; } }
.projet { text-align: center; }
.projet__image {
  display: block;
  width: 100%;
  max-width: 327px;
  height: auto;
  aspect-ratio: 1;
  margin: 0 auto 20px;
  border-radius: var(--r-m);
  object-fit: cover;
}
.grille--2.projets .projet__image,
.projets--references .projet__image { max-width: 364px; }
.projet__titre { margin-bottom: 20px; font-size: 25px; font-weight: var(--fw-normal); color: var(--c-nuit); }
.projet__objectif { margin-bottom: 10px; font-family: var(--f-titre); font-size: 20px; line-height: 30px; }
.projet__objectif strong, .projet__objectif b { font-family: var(--f-texte); font-size: 18px; font-weight: var(--fw-gras); }
.projet p { font-size: var(--fs-projet); line-height: 1.5; }
.section--projets h2, .section--cartes h2.titre-section { margin-bottom: 40px; }

/* Réalisations des plateformes et secteurs (S1b, mesuré) : rembourrage 15 % / 7 %, titre → images 20 px +
   2 % + 20 px, cartes empilées en tablette, colonnes de 327 px espacées de 60 px en ordinateur. Dans la
   carte : « Objectif : » en Genica 20 / 30, puis remontées de 8 % et 4 % de la carte (3 % en tablette). */
.section--projets { padding: 15% var(--marge-section) 20px; }
.section--projets h2 { margin-bottom: calc(40px + 2%); }
.section--projets .projet > p { margin: 0 0 .9rem; }
.page-plateforme .section--projets .projet__titre + p { font-family: var(--f-titre); font-size: 20px; line-height: 30px; }
.page-plateforme .section--projets .projet__titre + p + p { margin-top: calc(20px - 8%); }
.page-plateforme .section--projets .projet__titre + p + p + p { margin-top: calc(20px - 4%); font-size: var(--fs-texte); line-height: 1.5; }
@media (min-width: 768px) {
  .section--projets { padding-top: 7%; }
  .section--projets .grille--3.projets { padding-inline: 20px; column-gap: 60px; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  /* Tablette : toutes les grilles de réalisations / références passent sur une colonne (Elementor) */
  .projets.grille { grid-template-columns: minmax(0, 1fr); }
  .projets .projet__image { max-width: none; }
  .section--projets .grille--3.projets { grid-template-columns: minmax(0, 1fr); padding-inline: 21px; }
  .section--projets .grille--3.projets .projet__image { max-width: none; }
  .page-plateforme .section--projets .projet__titre + p + p,
  .page-plateforme .section--projets .projet__titre + p + p + p { margin-top: calc(20px - 3%); }
}
/* Secteurs : conteneur à 10 px des bords (20 px de plus pour les cartes), description seule sous le titre,
   remontée de 8 % (mobile) / 3 % (tablette), descente de 3 % en ordinateur ; 30 px sous les cartes */
.page-secteur .section--projets { padding-inline: 0; padding-bottom: 30px; }
.page-secteur .section--projets h2 { margin: 0 19px calc(30px + 2%); }
.page-secteur .section--projets .projets { padding-inline: 20px; }
/* Références (S1c, mesuré) : rangées de trois colonnes Elementor (10 px de rembourrage, 2 % du conteneur
   au-dessus de chaque rangée, 20 px entre les rangées), image de 327 px puis toute la colonne en tablette et en
   mobile, titre de 25 px ; texte remonté de 3 % (tablette) ou 8 % (mobile, écart de 30 px), 3 % plus bas en
   ordinateur ; introduction dans un conteneur à 3 % de la fenêtre sous le héros (85 % de large en mobile). */
.page-references .heros + .section { padding: calc(3vw + 10px) 10px 10px; }
.page-references .heros + .section > .conteneur { max-width: 85%; padding-inline: 0; }
.page-references .heros + .section p { margin-bottom: .9rem; }
.page-references .section--cartes { padding-bottom: 0; }
.page-references .projets { gap: 20px; margin-top: 2%; padding: 10px 10px 0; }
.page-references .projet { padding: 10px; }
.page-references .projet:nth-child(3n+1):not(:first-child) { margin-top: calc(26.6px); }
.page-references .projet__image { max-width: none; margin-bottom: 30px; }
.page-references .projet__titre { margin-bottom: 30px; line-height: 25px; }
.page-references .projet__titre + p { margin-top: -8%; }
@media (min-width: 768px) {
  .page-references .section--cartes { padding-top: 0; }
  .page-references .projet:nth-child(3n+1):not(:first-child) { margin-top: 33.4px; }
  .page-references .projet__image { margin-bottom: 20px; }
  .page-references .projet__titre { margin-bottom: 20px; }
  .page-references .projet__titre + p { margin-top: -3%; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .page-references .heros + .section > .conteneur { max-width: 670px; }
}
@media (min-width: 1025px) {
  .page-references .heros + .section > .conteneur { max-width: 1140px; }
  .page-references .projets { grid-template-columns: repeat(3, 347px); justify-content: space-between; row-gap: 72.4px; }
  .page-references .projet:nth-child(3n+1):not(:first-child) { margin-top: 0; }
  .page-references .projet__image { max-width: 327px; }
  .page-references .projet__titre + p { margin-top: 3%; }
}
.page-secteur .section--projets .projet__image { max-width: none; margin-bottom: 30px; }
.page-secteur .section--projets .projet__titre { margin-bottom: 0; }
.page-secteur .section--projets .projet__titre + p { margin-top: calc(30px - 8%); }
@media (min-width: 768px) {
  .page-secteur .section--projets h2 { margin-inline: 39px; }
  .page-secteur .section--projets .projet__image { margin-bottom: 20px; }
  .page-secteur .section--projets .projet__titre + p { margin-top: calc(20px - 3%); }
}
@media (min-width: 1025px) {
  .page-secteur .section--projets { padding-inline: var(--marge-section); }
  .page-secteur .section--projets h2 { margin-inline: 0; }
  .page-secteur .section--projets .projet__image { max-width: 327px; }
  .page-secteur .section--projets .projet__titre + p { margin-top: calc(20px + 3%); }
}
.cta--bouton { margin: 0; padding: 0 5% 5%; text-align: center; }

/* --------------------------------------------------------------------------
   §25 Étapes empilées reliées par 4 points blancs
   -------------------------------------------------------------------------- */
.section--etapes { color: var(--c-creme); }
.section--etapes .titre-section--clair { margin-bottom: 50px; font-size: var(--fs-h2-sombre); color: var(--c-creme); }
.etapes {
  display: grid;
  max-width: var(--conteneur-cartes-etapes);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.etapes__carte {
  position: relative;
  margin-bottom: calc(116px + 2 * var(--etapes-ecart, 30px));
  padding: 38px;                   /* 35 px + 3 px de bordure Elementor (S1b) */
  border-radius: var(--r-m);
  background: var(--c-creme);
  box-shadow: var(--o-carte);
  color: var(--c-nuit);
}
.etapes__carte:last-child { margin-bottom: 0; }
.etapes__carte h3 { margin-bottom: calc(20px + 2%); font-size: 20px; font-weight: var(--fw-normal); text-align: center; }
@media (min-width: 768px) { .etapes__carte h3 { font-size: 25px; } }
@media (max-width: 767px) { .etapes { padding-inline: 4%; } .section--etapes .titre-section--clair { font-size: 25px; } .section--centree h2 { font-size: 23px; } .section--centree > .conteneur { padding-inline: 18px; } }
.etapes__carte p { text-align: justify; }   /* rendu actuel (E15) */
.etapes__carte > :last-child { margin-bottom: .9rem; }
.etapes__carte:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% + var(--etapes-ecart, 30px) + 10px);
  width: 12px;
  height: 96px;
  margin-left: -6px;
  background: radial-gradient(circle, var(--c-blanc) 5.8px, transparent 6.3px) 0 0 / 12px 24px repeat-y;   /* 4 icônes « cercle » de 12 px dans des cases de 24 px */
}
@media (min-width: 768px) { .etapes__carte { padding: 53px; } }
/* Étapes (S1b, mesuré) : marge blanche de 8 % au-dessus du dégradé, rembourrages Elementor, écart de 30 / 21 px
   autour des points */
.section--etapes { margin-top: 8%; padding: 13.5% 5% 9%; }
.section--etapes .titre-section--clair { margin-bottom: calc(20px + 5%); }
@media (max-width: 1024px) { .section--etapes > .conteneur { padding-inline: 0; } }
@media (min-width: 768px) {
  .section--etapes { --etapes-ecart: 21px; padding: 7.2% 5% 4.5%; }
  .etapes { padding-inline: 8%; }
}
@media (min-width: 1025px) {
  .section--etapes { padding: 5% var(--marge-section) 8%; }
  .etapes { padding-inline: 0; }
}

/* --------------------------------------------------------------------------
   §28 Bloc CTA centré
   -------------------------------------------------------------------------- */
.cta { padding: 5% var(--marge-section); text-align: center; }
.cta.cta--bouton { padding: 12px 5% 10px; }   /* S1b : 10 px + 2 % du conteneur Elementor, puis 10 px */
@media (min-width: 768px) { .cta.cta--bouton { padding-top: calc(10px + 2%); } }
.cta h2 { font-size: var(--fs-h2); }
.cta .facade { margin-top: 20px; }
/* « Pourquoi choisir… » des secteurs (S1c, mesuré) : conteneur Elementor à marges de 10 % / 20 % (mobile)
   puis 8 % / 3 % de la fenêtre, 10 px de rembourrage, 85 % de large en mobile, pleine largeur en tablette,
   1140 px au-delà ; widgets à 30 px d'écart, éditeur de texte aligné à gauche, à marges de 2 %, texte 16 / 20 ;
   titre de 23 / 32 px (interligne 1,4 en mobile). */
.page-secteur .cta { margin-block: 10% 20%; padding: 10px; }
.page-secteur .cta > .conteneur { max-width: 85%; padding-inline: 0; }
.page-secteur .cta h2 { margin-bottom: calc(30px + 2%); font-size: 23px; line-height: 1.4; }
.page-secteur .cta p { margin-bottom: .9rem; line-height: 20px; text-align: start; }
.page-secteur .cta .bouton { margin-top: calc(2% + 30px - .9rem); }
@media (min-width: 768px) {
  .page-secteur .cta { margin-block: 8% 3%; }
  .page-secteur .cta > .conteneur { max-width: none; }
  .page-secteur .cta h2 { font-size: 32px; line-height: 32px; }
}
@media (min-width: 1025px) { .page-secteur .cta > .conteneur { max-width: 1140px; } }

/* --------------------------------------------------------------------------
   §30 Cartes d'articles ; §31 pagination
   section.section.articles > h2 + div.grille.grille--3.articles__grille >
   article.carte-article (a.carte-article__image, h3, p.carte-article__date,
   a.lien-suite) + nav.pagination
   -------------------------------------------------------------------------- */
.articles { padding: 70px 27px 5%; }
@media (min-width: 768px) { .articles { padding-top: 30px; } }
.articles > .titre-section { margin-bottom: 40px; font-size: 25px; font-weight: var(--fw-normal); }
.articles__grille { gap: 25px; max-width: 1100px; margin: 0 auto; }
@media (min-width: 768px) {
  .articles { padding-inline: calc(var(--marge-section) + 10px); }
  .articles > .titre-section { font-size: 40px; }
}
@media (min-width: 1025px) { .articles { padding-inline: 10px; } }
.carte-article {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 20px;
  overflow: hidden;
  border-radius: var(--r-m);
  background: var(--c-nuit);
  text-align: center;
}
.carte-article__image { display: block; width: calc(100% - 16px); margin: 8px 8px 0; line-height: 0; }
.carte-article__image img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 768px) { .carte-article__image { width: 100%; margin: 0; } }
.carte-article__titre {
  margin: 18px 10px 10px;
  font-size: var(--fs-titre-carte-article);
  font-weight: var(--fw-normal);
  line-height: 1.2;
}
.carte-article__titre a, .carte-article__titre a:hover { color: var(--c-creme); }
.carte-article__date { margin: 0 0 10px; color: var(--c-lavande); font-size: var(--fs-mini); line-height: 1.5; }
.carte-article .lien-suite { margin-top: auto; }
.carte-article:focus-within { outline: var(--focus); outline-offset: var(--focus-decalage); }
.carte-article__titre a:focus-visible { outline: 0; }

/* Blog (S1b, mesuré sur le widget Articles) : écart 30 px, vignette 2:1 en mobile (image centrée sur sa hauteur),
   3:2 au-delà ; titre 20 px sous l'image, sans retrait ; date 13 / 17 */
.articles { padding: 33.5px 47px 5%; }
.articles > .titre-section { margin: 0 -10px 42px; }
.articles__grille { gap: 30px; }
.carte-article__image { width: 100%; margin: 0; aspect-ratio: 2 / 1; overflow: hidden; }
.carte-article__image img { width: auto; height: 100%; margin-inline: auto; }
.carte-article__titre { margin: 20px 0 9px; }
.carte-article__date { margin-bottom: 13px; line-height: 1.3; }
.carte-article .lien-suite { line-height: 27px; }
@media (min-width: 768px) {
  .articles { padding: calc(10px + 4%) 20px 5%; }
  .articles > .titre-section { margin-bottom: 58px; }
  .carte-article__image { aspect-ratio: auto; }
  .carte-article__image img { width: 100%; height: auto; }
}
@media (min-width: 1025px) {
  .articles { padding-inline: 10px; }
  .articles > .titre-section { max-width: 1120px; margin: 0 auto 74px; }
}

/* Héros court (blog, 404) : rangée Elementor (10 + 10 px), titre → texte 20 px + 0,8 vw, marge basse 4,25 vw
   en mobile puis 100 px ; une seule colonne */
@media (max-width: 767px) { .heros--court { padding-bottom: 4.25vw; } }
.heros--court > .conteneur { padding: 40px 27px 20px; }
.heros--court h1 { margin-bottom: calc(20px + .8vw); }
.heros--court p:last-child { margin-bottom: .9rem; }
@media (min-width: 768px) {
  .heros--court .heros__grille { grid-template-columns: minmax(0, 1fr); }
  .heros--court > .conteneur { padding: 20px 28px; }
  .heros--court h1 { margin-bottom: calc(20px + .8vw); }
}

.pagination {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 40px;
  font-family: var(--f-pagination);   /* rendu actuel : Roboto Slab (E6) */
  font-size: 20px;
  line-height: 30px;
}
.pagination > a,
.pagination > span {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  min-height: 30px;
  padding: 0 4px;
  color: var(--c-nuit);
}
.pagination > a:hover,
.pagination > [aria-current="page"] { color: var(--c-or); }
.pagination--archive { justify-content: space-between; font-family: var(--f-systeme); font-size: 16px; }
.pagination--archive a { color: #C36; }

/* --------------------------------------------------------------------------
   §32 Héros d'article, §33 contenu, §34 sommaire, §35 barre latérale
   article.article > header.article__entete.fond-degrade (+ grille, texte,
   h1.article__titre, p.article__date, img.article__une)
   > div.conteneur.article__corps > div.article__contenu + aside.article__aside
   Les blocs riches collés dans les articles sont dans site-articles.css (S3).
   -------------------------------------------------------------------------- */
.article__entete { padding: 35% var(--marge-section) 5%; color: var(--c-creme); }
.article__entete-grille { display: grid; align-items: center; gap: 20px; }
.article__entete-texte { padding: 10px; }
.article__titre {
  margin: 0 0 20px;
  font-size: var(--fs-heros-article);
  font-weight: var(--fw-normal);
  color: var(--c-creme);
}
.article__date { margin: 0; color: var(--c-creme); }
.article__une {
  display: block;
  width: 100%;
  height: auto;
  border: var(--b-carte-contour);
  border-radius: var(--r-m);
}
@media (min-width: 768px) {
  .article__entete { padding-top: 15%; }
  .article__entete-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 70px; }
}
@media (min-width: 1025px) {
  .article__entete-grille { grid-template-columns: minmax(0, 545px) minmax(0, 525px); justify-content: space-between; }
}

.article__corps { display: grid; gap: 40px; padding: 40px 20px 5%; }
@media (min-width: 1025px) {
  .article__contenu { padding-inline: 10px; }
  .article__corps {
    grid-template-columns: var(--colonne-article) var(--colonne-laterale);
    justify-content: space-between;
    gap: 80px;
    padding: 40px 10px 5%;
  }
  .article__aside { align-self: start; position: sticky; top: 100px; }
  .article__aside > * + * { margin-top: 40px; }
}
/* Article (S1b, mesuré sur le modèle 2621) : en-tête 35 % / 10 % puis 13 % / 4 %, colonnes de 10 px de
   rembourrage (image comprise) ; corps à 25 px des bords sous 1025 px, contenu sans retrait et descendu de
   3 % de sa largeur ; en ordinateur, colonnes 691 + 70 + 369 px, barre latérale descendue de 10 px + 10 %. */
.article__entete { padding-bottom: 10%; }
.article__une { width: calc(100% - 20px); margin: 10px; }
.article__corps { padding: 10px 25px 40px; }
.article__corps > .article__contenu { margin-top: 3%; padding-inline: 0; }
@media (min-width: 768px) {
  .article__entete { padding-top: 13%; padding-bottom: 4%; }
  .article__entete-grille { gap: 50px; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .article__entete { padding-inline: 49px; }
  .article__entete-grille { padding-inline: 0; }
  .article__corps { padding: 80px 25px 120px; }
}
@media (min-width: 1025px) {
  .article__entete-grille { grid-template-columns: minmax(0, 545px) minmax(0, 545px); }
  .article__corps { justify-content: start; gap: 70px; padding: 1% 10px 80px; }
  .article__corps > .article__aside { margin-top: calc(10px + 10%); }
  .article__aside > * + * { margin-top: 15%; }   /* formulaire : 15 % sous le sommaire */
}

/* §33 Contenu d'article : HTML d'éditeur nu, stylé par .article__contenu seul */
.article__contenu { padding: 0 15px; font-size: var(--fs-texte); line-height: var(--lh-texte-article); }
.article__contenu > :first-child { margin-top: 0; }
.article__contenu p { margin: 0 0 25px; }   /* S1c, mesuré : 25 px sous les paragraphes */
.article__contenu ul, .article__contenu ol { margin: 0; }   /* S1c, mesuré : listes de l'éditeur sans marge */
.article__contenu h2 {
  margin: 35px 0 20px;
  font-size: var(--fs-h2-article);
  font-weight: var(--fw-titre-article);
  line-height: var(--lh-titre-article);
  color: var(--c-nuit);
}
.article__contenu h3 {
  margin: 35px 0 20px;
  font-size: var(--fs-h3-article);
  font-weight: var(--fw-titre-article);
  line-height: var(--lh-titre-article);
  color: var(--c-or);   /* 2,2:1 sur blanc (A2) */
}
.article__contenu h4 {
  margin: 30px 0 15px;
  font-size: var(--fs-h4-article);
  font-weight: var(--fw-titre-article);
  line-height: var(--lh-titre-article);
  color: var(--c-lavande);
}
.article__contenu a { color: var(--c-or); text-decoration: underline; }
.article__contenu a:hover { color: var(--c-or-sombre); }
.article__contenu li { margin-bottom: 0; }
.article__contenu :is(ul, ol) { padding-left: 40px; }   /* retrait des listes du thème (S1b) */
.article__contenu img { height: auto; }
.article__contenu figure { margin: 0 0 1.5em; }
.article__contenu figure.aligncenter, .article__contenu .aligncenter { margin-inline: auto; text-align: center; }
.article__contenu figcaption { font-size: var(--fs-mini); text-align: center; color: #555; }
.article__contenu blockquote { margin: 0 0 1.5em; padding: 0 0 0 20px; border-left: 3px solid var(--c-or); }
.article__contenu table {
  width: 100%;
  margin: 0 0 1.5em;
  border-collapse: collapse;
  font-size: var(--fs-tableau);
  line-height: 1.5;
}
.article__contenu th, .article__contenu td { padding: 8px; border: 1px solid hsla(0, 0%, 50%, .5); text-align: start; vertical-align: top; }
.article__contenu th { font-weight: var(--fw-gras); }
.article__contenu .has-background { padding: 20px 30px; color: var(--c-blanc); }
.article__contenu .has-background em { color: var(--c-blanc); }
.tableau, .overflow-x-auto { overflow-x: auto; }
.list-disc { list-style: disc; }
.list-decimal { list-style: decimal; }

/* §34 Sommaire (généré au build depuis les titres de l'article) */
.sommaire {
  border: var(--b-sommaire);
  border-radius: var(--r-s);
  background: var(--c-blanc);
}
.sommaire summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;                   /* S1b : 20 px comme le widget Sommaire */
  border-bottom: 2px solid var(--c-or);
  color: var(--c-or);
  font-family: var(--f-sommaire);   /* « Futura » absente : police système 900 (rendu actuel) */
  font-size: 22px;
  font-weight: 900;
  line-height: 1.5;
  list-style: none;
  cursor: pointer;
}
.sommaire summary::-webkit-details-marker { display: none; }
.sommaire summary::after {
  content: "";
  width: 10px; height: 10px;
  border-left: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: translateY(3px) rotate(45deg);
  transition: transform var(--t-rapide);
}
.sommaire details:not([open]) summary { border-bottom-color: transparent; }
.sommaire details:not([open]) summary::after { transform: translateY(-3px) rotate(225deg); }
.sommaire ol { margin: 0; padding: 20px; list-style: none; }
.sommaire ol ol { padding: 0 0 0 16px; }
.sommaire li { margin: 0; font-size: 16px; line-height: 24px; }
.sommaire li + li, .sommaire li > ol { margin-top: 8px; }
.sommaire a, .sommaire a:hover { color: var(--c-or); }
.sommaire a[aria-current="true"] { color: var(--c-gris-texte); }

/* --------------------------------------------------------------------------
   §36 Intégrations : façades légères, rien de tiers avant le clic (site.js,
   [data-facade], bouton [data-facade-activer], état data-facade-etat).
   Balisage : design/js.md §8 (S2).
   -------------------------------------------------------------------------- */
.facade { position: relative; margin: 0 0 1.5em; }
.facade__bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 12px 22px;
  border: 0;
  border-radius: var(--r-bouton);
  background: var(--bouton-fond);
  color: var(--bouton-texte);
  font-family: var(--f-titre);
  font-size: 18px;
  line-height: 1.2;
  transition: background-color var(--t-rapide), color var(--t-rapide);
}
.facade__bouton:hover { background: var(--bouton-fond-survol); color: var(--bouton-texte-survol); }
.facade__note { margin: 10px 0 0; font-size: var(--fs-mini); line-height: 1.5; }
.facade__note a { color: var(--c-or); }
.facade__iframe { display: block; width: 100%; border: 0; }
.facade[data-facade-etat="chargement"] .facade__bouton { cursor: progress; opacity: .7; }

/* Vidéo (YouTube) : bloc 16:9 noir (rendu actuel sans vignette), bouton lecture rouge dessiné en CSS */
.facade--video .facade__bouton {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 20px;
  border-radius: 0;
  background: #000;
  color: var(--c-creme);
  font-family: var(--f-texte);
  font-size: var(--fs-texte-xs);
}
.facade--video .facade__bouton:hover { background: #000; color: var(--c-creme); }
.facade__vignette { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.facade__lecture {
  position: relative;
  width: 68px; height: 48px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 48'%3E%3Cpath fill='%23f00' d='M66.5 7.7a8.5 8.5 0 0 0-6-6C55.2.3 34 .3 34 .3S12.8.3 7.5 1.7a8.5 8.5 0 0 0-6 6C.1 13 .1 24 .1 24s0 11 1.4 16.3a8.5 8.5 0 0 0 6 6c5.3 1.4 26.5 1.4 26.5 1.4s21.2 0 26.5-1.4a8.5 8.5 0 0 0 6-6C67.9 35 67.9 24 67.9 24s0-11-1.4-16.3z'/%3E%3Cpath fill='%23fff' d='M45 24 27 14v20'/%3E%3C/svg%3E") center / contain no-repeat;
}
.facade__texte { position: relative; margin-top: 10px; }
.facade--video .facade__iframe { aspect-ratio: 16 / 9; height: auto; }
/* Ancien bouton seul (button.facade__lecture direct) : même pictogramme */
button.facade__lecture { border: 0; padding: 0; }
.facade--youtube:not(.facade--video) { display: grid; place-items: center; aspect-ratio: 16 / 9; background: #000; }

/* Instagram, TikTok : blockquote de repli lisible, bouton dessous */
.facade--instagram, .facade--tiktok { max-width: 540px; margin-inline: auto; text-align: center; }
.facade--tiktok { max-width: 605px; }
.facade__repli {
  margin: 0 0 10px;
  padding: 16px;
  border: 1px solid #DBDBDB;
  border-radius: 3px;
  background: #FFF;
  color: #262626;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  text-align: start;
}
.facade__repli a { color: #3897F0; text-decoration: none; }
.facade--tiktok .facade__iframe { height: 740px; }

/* Calendly : lien direct + bouton d'affichage ; l'agenda fait 700 px une fois chargé */
.facade--calendly { display: grid; justify-items: center; gap: 15px; }
.facade--calendly[data-facade-etat="active"] .facade__iframe { height: 700px; min-width: 320px; }

/* --------------------------------------------------------------------------
   §38 Animations : voir §7 (logos), §8 (carrousels), §10 (titre), §16
   (timeline), §6 (rotation), §3 (menu), §22 (accordéon).
   §39 Icônes réseaux sociaux
   -------------------------------------------------------------------------- */
.reseaux {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.reseaux a {
  display: grid;
  place-items: center;
  width: 60px; height: 60px;
  border-radius: 10%;
  background: var(--c-marine);
  color: var(--c-creme);
  font-size: 30px;
  transition: opacity var(--t-rapide);
}
.reseaux a:hover { opacity: .9; color: var(--c-creme); }
.reseaux svg { width: 1em; height: 1em; }
@media (min-width: 768px) { .pied .reseaux { justify-content: flex-start; flex-direction: column; } }
@media (min-width: 1025px) { .pied .reseaux { flex-direction: row; } }

/* --------------------------------------------------------------------------
   §40 Séparateurs
   -------------------------------------------------------------------------- */
hr {
  height: 0;
  margin: 20px 0;
  border: 0;
  border-top: 1px solid #DDD;
}

/* --------------------------------------------------------------------------
   §41 Fil d'Ariane : absent du site (aucun BreadcrumbList). Prêt si décidé.
   -------------------------------------------------------------------------- */
.ariane ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; padding: 0; list-style: none; font-size: 14px; }
.ariane li + li::before { content: "›"; margin-inline-end: 6px; }
.ariane a { color: var(--c-creme); }

/* --------------------------------------------------------------------------
   §42 Archives de catégorie et 404 : rendu actuel du thème Hello Biz,
   reproduit (E14 : en-tête crème illisible sur fond blanc ; titres roses).
   div.archive > header.archive__entete > h1.archive__titre ;
   .archive__liste > article.extrait (h2.extrait__titre, img.extrait__image) ;
   404 : header.heros.heros--court (sans fond) + section.section--404.
   -------------------------------------------------------------------------- */
.archive { max-width: 1140px; margin: 0 auto; padding: 120px 10px 40px; color: #333; font-family: var(--f-systeme); }
.archive__titre { font-size: 40px; color: var(--c-nuit); }
.archive__liste { display: grid; gap: 40px; }
.extrait__titre { margin-bottom: 10px; font-size: 32px; font-weight: var(--fw-titre-article); line-height: 1.2; }
.extrait__titre a { color: #C36; }
.extrait__image { display: block; width: 100%; height: auto; margin-bottom: 10px; }
.extrait p { font-family: var(--f-texte); }
/* Archives (S1b, mesuré sur Hello Biz) : pas de retrait haut (le titre passe sous l'en-tête, E14), titres
   40 / 48 et 32 / 38,4 à marges 8 / 16 px, image de 500 px de haut (400 × 600 px en tablette) recadrée,
   6 px de ligne sous l'image, articles séparés par la marge du paragraphe */
.archive { padding: 0 10px; }
.archive__titre { margin: 8px 0 16px; padding-inline: 10px; line-height: 1.2; }
.archive__liste { display: block; }   /* marges fondues entre articles, comme le thème */
.extrait__titre { margin: 8px 0 16px; }
.extrait__image { margin-bottom: 6px; }
.extrait > p:last-child { margin-bottom: .9rem; }
.pagination--archive { margin: 20px 0; line-height: 24px; }
.pagination--archive > a { min-height: 0; padding: 0; }
@media (min-width: 768px) {
  .archive__titre { padding-inline: 0; }
  .archive { max-width: 600px; padding-inline: 0; }
  .extrait__image img { width: 600px; max-width: 100%; height: 400px; object-fit: cover; }
}
@media (min-width: 1025px) {
  .archive { max-width: 1140px; }
  .extrait__image img { width: 100%; height: 500px; }
}
.heros--court:not(.fond-degrade) { color: var(--c-nuit); }
.heros--court:not(.fond-degrade) h1 { color: var(--c-nuit); }
.section--404 { text-align: center; }
.section--404 a { color: var(--c-or); }
.recherche { display: flex; justify-content: center; gap: 6px; max-width: 420px; margin: 20px auto 0; }
.recherche input { flex: 1; min-height: 40px; padding: 8px 12px; border: 1px solid #666; border-radius: 3px; }
.recherche .bouton { padding: 10px 16px; font-size: 16px; }
/* 404 (S1b, mesuré sur Hello Biz) : bloc de 1140 px (600 en tablette) à 5 % du haut, rembourrage 60 px,
   texte centré #333 en police système, champ de 270 px avec loupe à gauche (bouton du thème) */
.page-404 main { max-width: 1140px; margin: 5% auto 0; padding: 60px 10px; color: #333; font-family: var(--f-systeme); text-align: center; }
.page-404 .heros--court, .page-404 .section--404 { padding: 0; }
.page-404 :is(.heros--court, .section--404) > .conteneur { max-width: none; margin: 0; padding: 0; }
.page-404 main p { margin: 0 0 .9rem; font-size: 16px; line-height: 1.5; }
.page-404 .heros--court h1 { margin: 8px 0 16px; padding-inline: 10px; font-size: 32px; font-weight: 700; line-height: 1.2; color: #333; }
.page-404 .recherche { display: block; position: relative; width: 270px; max-width: 100%; margin: 0 auto; }
.page-404 .recherche input { width: 100%; min-height: 42px; padding: 8px 16px 8px 40px; }
.page-404 .recherche .bouton {
  position: absolute; left: -4px; top: 2px; width: 52px; height: 42px; padding: 0;
  border: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23333' stroke-width='2'%3E%3Ccircle cx='8.5' cy='8.5' r='6.5'/%3E%3Cpath d='M13.5 13.5 18 18'/%3E%3C/svg%3E") center / 20px no-repeat;
  color: transparent; font-size: 0;
}
@media (min-width: 768px) {
  .page-404 main { max-width: 600px; padding-inline: 60px; }
  .page-404 .heros--court h1 { padding-inline: 0; }
}
@media (min-width: 1025px) { .page-404 main { max-width: 1140px; } }


/* --------------------------------------------------------------------------
   Utilitaires de masquage selon l'appareil (G1 : 98 conteneurs masqués en
   mobile sur le site actuel). En fin de feuille pour l'emporter sur les
   composants, sans !important.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) { .cache-mobile { display: none; } }
@media (min-width: 768px) and (max-width: 1024px) { .cache-tablette { display: none; } }
@media (min-width: 1025px) { .cache-ordinateur { display: none; } }


/* ==========================================================================
   8. ÉCARTS PRÉPARÉS, NON ACTIVÉS (design/ecarts.md)
   Chaque règle est isolée et commentée. Pour activer un écart validé, retirer
   les marques de commentaire du bloc correspondant (et seulement celui-là).
   ========================================================================== */

/* E3 : titres de timeline et liens du sommaire en nuit au lieu de #000 / #333 :
:root { --c-noir: #0F1222; --c-gris-texte: #0F1222; }
*/

/* E4 : typographie fluide (clamp() de jetons.css) au lieu des paliers :
:root {
  --fs-heros-max: clamp(2rem, 1.301rem + 2.87vw, 3.75rem);
  --fs-heros: clamp(1.625rem, .9757rem + 2.66vw, 3.25rem);
  --fs-heros-article: clamp(2.188rem, 1.543rem + 2.65vw, 2.812rem);
  --fs-heros-blog: clamp(2.188rem, 1.388rem + 3.28vw, 4.188rem);
  --fs-surtitre: clamp(1.188rem, .994rem + .794vw, 1.375rem);
  --fs-h2: clamp(1.562rem, 1.111rem + 1.85vw, 2rem);
  --lh-texte: 1.6; --lh-texte-article: 1.6; --lh-texte-serre: 1.6;
}
*/

/* E5 : Genica One sans faux gras :
:root { --fw-titre: 400; --fw-titre-article: 400; }
h1, h2, h3, h4, h5, h6, .bouton, .nav__lien { font-synthesis: none; }
*/

/* E7 : 3 rayons (4, 12, 24 px) + rond :
:root { --r-bouton: 4px; --r-bouton-form: 4px; --r-bouton-compact: 4px; --r-s: 12px; --r-m: 12px; --r-champ: 24px; --r-champ-compact: 24px; --r-l: 24px; }
*/

/* E8 : 3 ombres :
:root { --o-carte-compacte: 0 2px 8px rgba(15, 18, 34, .15); --o-flottante: 0 8px 24px rgba(15, 18, 34, .18); }
*/

/* E9 : liens du pied en 14 px / 1,5, cibles de 29 px :
.pied__liens--petits { font-size: var(--fs-texte-xs); line-height: 1.5; }
.pied__liens--petits li { margin-bottom: 0; }
.pied__liens--petits a { display: inline-block; padding-block: 4px; line-height: 1.5; }
*/

/* E11 : surtitre de l'accueil à 22 px en tablette (au lieu de 41 px) :
@media (min-width: 768px) and (max-width: 1024px) { :root { --fs-surtitre: 1.375rem; } }
*/

/* E12 : 2 tailles de bouton, 1 rayon :
.bouton { padding: 16px 24px; border-radius: var(--r-bouton); }
.bouton--petit, .bouton--envoi, .bouton--compact { padding: 12px 20px; font-size: 18px; border-radius: var(--r-bouton); }
*/

/* E13 : champs de 44 px, rayon unique, indicatif lisible, texte nuit, focus or :
.champ input, .champ select { min-height: 44px; }
.champ input, .champ select, .champ textarea { border-radius: var(--r-champ); color: var(--c-nuit); }
.champ ::placeholder { color: #5E6670; opacity: 1; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: var(--focus); }
*/

/* E14 : archives et 404 lisibles (en-tête sur fond nuit) :
.page--theme .entete { margin-bottom: 0; background: var(--c-nuit); }
*/

/* E15 : textes des cartes alignés à gauche :
.carte-service p, .carte p, .etapes__carte p { text-align: start; }
*/

/* E16 : pages légales en nuit sur blanc, colonne de 75 caractères :
.heros--texte { padding-bottom: 0; }
.legal { max-width: 75ch; margin: 0 auto; padding: 5% 20px; color: var(--c-nuit); }
*/

/* E17 : sommaire repliable en tête d'article et mini-formulaire en fin, sous 1025 px :
@media (max-width: 1024px) {
  .article__aside { display: contents; }
  .article__aside .sommaire { order: -1; }
}
*/

/* E18 : paragraphes d'introduction de Contact visibles en mobile :
.heros--contact .heros__texte p { display: block; }
*/

/* E21 : mot animé fixe (pas de découpage) :
.titre-anime__lettre { animation: none; }
*/

/* A2 / A3 : or lisible sur fond clair (5,03:1), liens soulignés :
.article__contenu a, .duo a, .cta a { color: var(--c-or-texte); text-decoration: underline; }
.article__contenu a:hover { color: #6F4A0F; }
.article__contenu h3, .titre-or, .sommaire a { color: var(--c-or-texte); }
*/

/* A4 : voile nuit sur la moitié basse des blocs à texte long sur dégradé :
.fond-degrade--voile { background-image: linear-gradient(transparent 50%, rgba(15, 18, 34, .35)), var(--fond-grain), var(--fond-degrade-svg); }
*/

/* A6 : cibles tactiles des drapeaux de langue (24 px) :
.langue__drapeau { padding: 6px 4px; box-sizing: content-box; }
*/

/* Menu mobile : entrée en 300 ms au lieu de 1,25 s :
:root { --t-entree: .3s; }
*/


/* ==========================================================================
   G3 (2026-10-29) : règles des composants ajoutés par les générateurs
   ========================================================================== */
/* 404 : bouton de recherche rendu comme le thème Hello Biz (svg du sprite
   « recherche » 20 px, texte « Search » masqué de façon accessible, nom par
   aria-label). Remplace la loupe en image de fond posée en S1b ; même boîte
   (52 × 42), icône à 16 / 8 px du coin, couleur #333 mesurée. */
.page-404 .recherche .bouton:has(> .icone) { background-image: none; color: #333; }
.page-404 .recherche .bouton > .icone { display: block; width: 20px; height: 20px; margin: 0 auto 6px; }   /* contenu du bouton centré verticalement : 8 px en haut */

/* §24 réalisations : « Objectif : » marqué projet__objectif par G3 (plateformes, secteurs, piliers, EN
   « Objective: »). Genica 20 / 30 et marge basse de 0,9rem mesurés sur les trois gabarits ; passe devant
   « .projet p » (taille du texte des cartes). Marges hautes : celles de S1b, inchangées. */
.projet .projet__objectif { margin-bottom: .9rem; font-size: 20px; line-height: 30px; }

/* Outils des articles (S4) : listes sans retrait, comme à l'origine (0 px mesuré). Le retrait de 40 px des
   listes d'article (« .article__contenu :is(ul, ol) », S1b) les décalait : liste du générateur de hooks, critères
   du test de hook, chiffres du calculateur de rentabilité. */
.article__contenu .outil :is(.outil__liste, .outil__criteres, .outil__kpis) { padding-left: 0; }

/* ==========================================================================
   G4 (2026-11-02) : écarts de parité restants (relevés S1c), mobile d'abord
   ========================================================================== */
/* §10 titre animé « Nos services de … » : l'original garde le mot tournant d'un seul tenant (« marketing&nbsp;
   d'influence ») et cale le titre dans un conteneur de 85 % en mobile (314,5 px à 390 px, centré). Avant : retour
   à la ligne entre « marketing » et « d'influence », titre sur 370 px. */
.accent--anime, .accent--anime > [aria-hidden] { white-space: nowrap; }
.section--services .titre-section--xl,
.section--cartes > .conteneur > .titre-section--xl { padding-inline: 7.5%; text-align: center; }
.section--cartes > .conteneur > .titre-section--xl:has(+ .cartes-services--large) { margin: 14px 0 47px; }
@media (min-width: 768px) {
  .section--services .titre-section--xl,
  .section--cartes > .conteneur > .titre-section--xl { padding-inline: 0; }
  .section--cartes > .conteneur > .titre-section--xl:has(+ .cartes-services--large) { margin: 19px 0 58px; }
}
@media (min-width: 1025px) {
  .section--cartes > .conteneur > .titre-section--xl:has(+ .cartes-services--large) { margin: 17px 0 76px; }
}

/* §24 « Nos réalisations » des piliers Marketing et Social media (cartes .projets, Social media depuis G4) :
   mesuré sur l'original. Image à 70 % de la carte sous 1025 px (204 / 441 px), 364 px au-delà ; texte en retrait
   de 20 px dès 768 px ; deux colonnes de 560 px séparées de 20 px en ordinateur. */
:is(.page-pilier-marketing, .page-pilier-social) .section--cartes .projets .projet__image { width: 70%; max-width: none; margin-inline: auto; }
:is(.page-pilier-marketing, .page-pilier-social) .section--cartes h2.titre-section { margin-bottom: 50px; }
@media (min-width: 768px) {
  :is(.page-pilier-marketing, .page-pilier-social) .section--cartes .projet { padding-inline: 20px; }
  :is(.page-pilier-marketing, .page-pilier-social) .section--cartes h2.titre-section { margin-bottom: 35px; }
}
@media (min-width: 1025px) {
  :is(.page-pilier-marketing, .page-pilier-social) .section--cartes .projets { gap: 66px 20px; }   /* rangées : conteneurs Elementor distincts */
  :is(.page-pilier-marketing, .page-pilier-social) .section--cartes .projets .projet__image { width: 100%; max-width: 364px; }
  :is(.page-pilier-marketing, .page-pilier-social) .section--cartes h2.titre-section { margin-bottom: 45px; }
}

/* §13 cartes services (accueil, villes, secteurs), 2e rangée : dans l'original c'est un second conteneur Elementor.
   Télescope de 187 px en ordinateur (214 ailleurs), fusée de 171 px en tablette et 200 px en mobile ; illustrations
   de la 2e rangée 10 px plus près du titre en ordinateur ; 20 px de plus entre les deux rangées en mobile. */
.section--services .cartes-services:not(.cartes-services--large) > li:nth-child(3) { margin-top: calc(var(--decalage) + 20px); }
.section--services .cartes-services:not(.cartes-services--large) > li:nth-child(4) .carte-service__visuel { width: 200px; }
@media (min-width: 768px) {
  .section--services .cartes-services:not(.cartes-services--large) > li:nth-child(3) { margin-top: var(--decalage); }
  .section--services .cartes-services:not(.cartes-services--large) > li:nth-child(4) .carte-service__visuel { width: 171px; }
}
@media (min-width: 1025px) {
  .section--services .cartes-services:not(.cartes-services--large) > li:nth-child(4) .carte-service__visuel { width: var(--visuel); }
  .section--services .cartes-services:not(.cartes-services--large) > li:nth-child(3) .carte-service__visuel { width: 187px; }
  .section--services .cartes-services:not(.cartes-services--large) > li:nth-child(n+3) .carte-service__visuel { top: calc(10px - var(--decalage)); }
}

/* Références : bloc « Références précédentes » et son bandeau de logos (original : texte sur toute la largeur moins
   20 px, 1 120 px en ordinateur ; bandeau pleine largeur en ordinateur, d'où des logos de 192 px au lieu de 157). */
.page-references .section:has(+ .section--logos) { padding-inline: 0; }
.page-references .section:has(+ .section--logos) > .conteneur { max-width: none; padding-inline: 20px; }
@media (min-width: 1025px) {
  .page-references .section:has(+ .section--logos) > .conteneur { max-width: 1120px; padding-inline: 0; }
  .page-references .section--logos > .conteneur { max-width: none; padding-inline: 0; }
  .page-references .section:has(+ .section--logos) { padding-bottom: 57px; }   /* fin du texte → bandeau : 57 px */
  .page-references .section:has(+ .section--logos) h2 { margin-bottom: 30px; }
  .page-references .section--logos { padding-top: 0; }
}

/* §9 carrousel presse (À propos FR / EN), mesuré sur l'original : contenu à 5 % des bords (1 140 px au plus), pas
   de marge réservée aux flèches, diapositives séparées de 15 px avec 10 px autour de la carte, titre 25 / 65 px,
   points à 34 px sous les cartes. */
.carrousel--presse { --carrousel-ecart: 15px; padding: 13.5% 5% 35px; }
.carrousel--presse > .conteneur { max-width: 1140px; }
.carrousel--presse .titre-section { margin-bottom: 27px; font-size: 25px; line-height: 1; }
.carrousel--presse .carrousel__fenetre { margin-inline: 0; }
.carrousel--presse .carrousel__piste > li { padding: 10px; }
.carrousel--presse .carte-presse { gap: 30px; }   /* image → titre : 30 px */
.carrousel--presse .carrousel__points { margin-top: 24px; }
@media (min-width: 768px) {
  .carrousel--presse { padding: 7.2% 5% 34px; }
  .carrousel--presse .titre-section { margin-bottom: 33px; font-size: 65px; }
}
@media (min-width: 1025px) {
  .carrousel--presse { padding: 5% 5% 68px; }
  .carrousel--presse .titre-section { margin-bottom: 43px; }
}

/* §15 « Nos services » des piliers (vignettes--icone : conseil, formatrice ; vignettes--numero : social media),
   mesuré sur l'original : colonnes de 10 px de rembourrage (cartes de 265 px en ordinateur), cartes de 350 px en
   mobile, titre de carte à 43 px du haut, 47 px sous le texte, écart titre → texte 28 / 38 / 26 px. */
.vignettes:is(.vignettes--icone, .vignettes--numero) { row-gap: 40px; margin-inline: -10px; }
:is(.vignettes--icone, .vignettes--numero) .vignette { padding: 30px 30px 47px; }
:is(.vignettes--icone, .vignettes--numero) :is(.vignette__titre, h3) { margin-bottom: 28px; }
[class*="page-pilier-"] .section--cartes > .conteneur > .titre-section:has(+ :is(.vignettes--icone, .vignettes--numero)) { padding-inline: 8px; font-size: 33px; }
@media (min-width: 768px) {
  .vignettes:is(.vignettes--icone, .vignettes--numero) { margin-inline: 0; padding-inline: 10px; }
  :is(.vignettes--icone, .vignettes--numero) :is(.vignette__titre, h3) { margin-bottom: 38px; }
  [class*="page-pilier-"] .section--cartes > .conteneur > .titre-section:has(+ :is(.vignettes--icone, .vignettes--numero)) { padding-inline: 0; font-size: var(--fs-h2-xl); }
}
@media (min-width: 1025px) {
  :is(.vignettes--icone, .vignettes--numero) :is(.vignette__titre, h3) { margin-bottom: 26px; }
}

/* ==========================================================================
   G5 (2026-11-02) : calage final avant la bascule dans le studio, mesuré sur
   l'original (aspiration du 28/10) en 1366 / 768 / 390 px. Mobile d'abord,
   sans !important ; règles limitées aux gabarits concernés.
   ========================================================================== */

/* « Nos clients » (accueil, villes) : logos à leur taille naturelle, centrés dans la diapositive (Elementor ne les
   étire pas) ; titre → diapositives 20 px ; 2 diapositives en tablette ; flèches hors de la piste (30 / 47 px). */
.carrousel:not(.carrousel--presse) .titre-section { margin-bottom: 20px; }
.carrousel:not(.carrousel--presse) .carrousel__piste > li img { width: auto; max-width: 100%; }
.carrousel:not(.carrousel--presse) .carrousel__fenetre { margin-inline: 47px; padding-bottom: 22px; }
@media (min-width: 768px) {
  .carrousel:not(.carrousel--presse) { --diapos: 2; }
  .carrousel:not(.carrousel--presse) .carrousel__fenetre { margin-inline: 30px; padding-bottom: 0; }
}
@media (min-width: 1025px) {
  .carrousel:not(.carrousel--presse) { --diapos: 5; }
  .carrousel:not(.carrousel--presse) .carrousel__fenetre { margin-inline: 31.5px; }
}

/* Bloc « Nous contacter » (partiel du formulaire) : les marges de la carte (13 % / 15 % de la largeur) restent dans la
   section comme dans le conteneur flex d'origine, au lieu de se fondre avec celles des sections voisines (tablette,
   mobile : la section n'a pas de rembourrage). */
section.contact { display: flow-root; }

/* ---------------------------------------------------------------- Formatrice (FR / EN) */
/* Héros : 10 % sous le contenu en tablette et ordinateur (8 % avant). */
@media (min-width: 768px) { .page-pilier-formatrice .heros:has(.heros__texte > .grille) { padding-bottom: 10%; } }
/* « Mon approche pédagogique » : 20 px sous le texte (10 avant) ; en mobile, titre sur 85 % de la fenêtre (le texte
   reste sur 85 % du conteneur), 32 px au-dessus du texte. */
@media (max-width: 767px) {
  [class*="page-pilier-"] .logos--heros + .section:not(.section--cartes) h2 { margin-inline: -8.5px; }
  .page-pilier-formatrice .logos--heros + .section h2 { margin-bottom: 32px; }
}
.page-pilier-formatrice .logos--heros + .section:not(.section--cartes) { padding-bottom: 20px; }

/* « Nos services de formation » : 6 % + 18 px au-dessus, 1 % + 26 px dessous ; 33 px sur deux lignes en mobile. */
.page-pilier-formatrice .section--titre { padding-block: calc(10% + 18px) calc(1% + 26px); }
@media (min-width: 768px) { .page-pilier-formatrice .section--titre { padding-top: calc(6% + 18px); } }
.page-pilier-formatrice .section--titre .titre-section { font-size: 33px; line-height: 1.2; }
@media (min-width: 768px) { .page-pilier-formatrice .section--titre .titre-section { font-size: 50px; } }

/* Duos : mobile = image d'abord (70 %), texte 33 px dessous ; tablette / ordinateur = colonnes 406 / 674 (60 px
   d'écart), image 386 px dans 10 px de marge, texte avec 17 % de retrait à droite, conteneur de 1 140 px. */
.page-pilier-formatrice .duo { padding: 0 var(--marge-section) 15%; }
.page-pilier-formatrice .duo__grille { row-gap: 0; }
.page-pilier-formatrice .duo__media { order: -1; width: 66%; margin: 24px auto 43px; }
@media (min-width: 768px) {
  .page-pilier-formatrice .duo { padding: 5% 6.4%; }
  .page-pilier-formatrice .duo__grille { max-width: 1140px; padding-inline: 0; column-gap: 60px; grid-template-columns: minmax(0, 406fr) minmax(0, 674fr); }
  .page-pilier-formatrice .duo:not(.duo--inverse) .duo__grille { grid-template-columns: minmax(0, 674fr) minmax(0, 406fr); }
  .page-pilier-formatrice .duo:not(.duo--inverse) .duo__media { order: 0; }
  .page-pilier-formatrice .duo .duo__texte > * { margin-right: 0; }
  .page-pilier-formatrice .duo .duo__texte,
  .page-pilier-formatrice .duo--inverse .duo__texte { padding: 0 17.6% 0 0; }
  @media (min-width: 1025px) { .page-pilier-formatrice .duo .duo__texte, .page-pilier-formatrice .duo--inverse .duo__texte { padding-right: 16.9%; } }
  .page-pilier-formatrice .duo__media { width: calc(100% - 20px); margin: 10px; }
}

/* « Domaines d'expertise » : 8 % de blanc au-dessus du dégradé, titre centré 25 / 35 px, cartes 537 + 66 + 537 px
   (321 + 49 + 321 en tablette), 3e carte centrée un peu plus large, cartes au texte normal. */
.page-pilier-formatrice .section--cartes.fond-degrade { margin-top: 8%; padding: 13.5% 20px 10.8%; }
.page-pilier-formatrice .section--cartes.fond-degrade > .conteneur { padding-inline: 0; }
.page-pilier-formatrice .section--cartes.fond-degrade .titre-section { margin-bottom: 38px; font-size: 25px; text-align: center; }
.page-pilier-formatrice .cartes-claires { row-gap: 30px; max-width: 316px; }
.page-pilier-formatrice .cartes-claires .carte { padding: 38px; }
.page-pilier-formatrice .cartes-claires .carte h3 { margin-bottom: 25px; font-size: 20px; font-weight: 600; }
.page-pilier-formatrice .cartes-claires .carte p { font-weight: var(--fw-normal); color: var(--c-nuit); }
@media (min-width: 768px) {
  .page-pilier-formatrice .section--cartes.fond-degrade { padding: 7.2% var(--marge-section) 4.5%; }
  .page-pilier-formatrice .section--cartes.fond-degrade > .conteneur { padding-inline: 0; }
  .page-pilier-formatrice .section--cartes.fond-degrade .titre-section { margin-bottom: 54px; font-size: 35px; }
  .page-pilier-formatrice .cartes-claires { column-gap: 7.1%; row-gap: 55px; max-width: none; }
  .page-pilier-formatrice .cartes-claires .carte { padding: 53px; }
  .page-pilier-formatrice .cartes-claires .carte h3 { font-size: 25px; }
  .page-pilier-formatrice .cartes-claires .carte:last-child:nth-child(odd) { width: 50%; margin-left: 2%; }
}
@media (min-width: 1025px) {
  .page-pilier-formatrice .section--cartes.fond-degrade { padding: 5% var(--marge-section) 6%; }
  .page-pilier-formatrice .section--cartes.fond-degrade > .conteneur { max-width: 1140px; }
  .page-pilier-formatrice .section--cartes.fond-degrade .titre-section { margin-bottom: 77px; }
  .page-pilier-formatrice .cartes-claires { column-gap: 66px; row-gap: 77px; }
  .page-pilier-formatrice .cartes-claires .carte h3 { margin-bottom: 29px; }
  .page-pilier-formatrice .cartes-claires .carte:last-child:nth-child(odd) { width: 570px; margin-left: 22px; }
}

/* Encadrés « Pourquoi me faire confiance ? » et « Pourquoi choisir … ? » : marges de 10 % (20 % en mobile), titre
   32 / 25 px en graisse normale, texte aligné à gauche, conteneur pleine largeur moins 10 px en tablette. */
.page-pilier-formatrice .cta { margin-block: 20%; padding: 10px calc(7.1% + 10px); }
.page-pilier-formatrice .section:not(.section--cartes) + .cta { margin-top: 0; }
.page-pilier-formatrice .cta > .conteneur { padding-inline: 0; }
:is(.page-pilier-formatrice, .page-pilier-conseil, .page-pilier-marketing) .cta .titre-section { margin-bottom: 30px; font-size: 25px; font-weight: var(--fw-normal); }
:is(.page-pilier-formatrice, .page-pilier-conseil, .page-pilier-marketing) .cta p { text-align: start; }
:is(.page-pilier-formatrice, .page-pilier-conseil, .page-pilier-marketing) .cta .bouton { margin-top: 31px; }
@media (min-width: 768px) {
  .page-pilier-formatrice .cta { margin-block: 10%; padding: 10px; }
  .page-pilier-formatrice .section:not(.section--cartes) + .cta { margin: 10% 0 5%; }
  :is(.page-pilier-formatrice, .page-pilier-conseil, .page-pilier-marketing) .cta .titre-section { font-size: 32px; }
}
@media (min-width: 1025px) { .page-pilier-formatrice .cta { padding-inline: var(--marge-section); } .page-pilier-formatrice .cta > .conteneur { max-width: 1140px; } }

/* « Vous êtes intéressé(e) ? » : texte + module Calendly (cadre de 700 px, arrondi 30 px, ombre de l'intégration
   d'origine) côte à côte dès 768 px, colonnes 674 / 406 ; le bouton de la façade est centré dans le cadre. */
.section:has(> .conteneur > .facade--calendly) { padding: 58px var(--marge-section) 59px; }
.facade--calendly:not([data-facade-etat="active"]) {
  align-content: center;
  min-width: 320px;
  height: 700px;
  margin: 31px auto 0;
  border-radius: 30px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .16);
}
.facade--calendly { margin-bottom: 0; }
@media (min-width: 768px) {
  .section:has(> .conteneur > .facade--calendly) { padding: 1% 6.4%; }
  .section:has(> .conteneur > .facade--calendly) > .conteneur {
    display: grid;
    grid-template-columns: minmax(0, 674fr) minmax(0, 406fr);
    grid-template-rows: 1fr auto auto auto 1fr;
    column-gap: 60px;
    padding-inline: 0;
  }
  .section:has(> .conteneur > .facade--calendly) > .conteneur > :not(.facade) { grid-column: 1; margin-right: 16.9%; }
  .section:has(> .conteneur > .facade--calendly) > .conteneur > h2 { grid-row: 2; margin-bottom: 40px; }
  .section:has(> .conteneur > .facade--calendly) > .conteneur > p:nth-of-type(1) { grid-row: 3; }
  .section:has(> .conteneur > .facade--calendly) > .conteneur > p:nth-of-type(2) { grid-row: 4; }
  .section:has(> .conteneur > .facade--calendly) > .conteneur > .facade--calendly { grid-area: 1 / 2 / 6 / 3; margin: 10px; }
}
@media (min-width: 1025px) { .section:has(> .conteneur > .facade--calendly) > .conteneur { max-width: 1140px; } }

/* FAQ : 10 % de blanc au-dessus (20 % en mobile), comme les autres encadrés de la page. */
.page-pilier-formatrice .faq { margin-top: 20%; }
@media (min-width: 768px) { .page-pilier-formatrice .faq { margin-top: 10%; } }

/* ---------------------------------------------------------------- Conseil (FR / EN) */
/* « Nos services » : la section s'arrête aux cartes ; le dégradé « Pourquoi choisir » vient 8 % (10 %) plus bas. */
.page-pilier-conseil .section--cartes:not(.fond-degrade) { padding-bottom: 0; }
.page-pilier-conseil .section--cartes.fond-degrade { margin-top: 10%; padding: 13.5% 20px; }
.page-pilier-conseil .section--cartes.fond-degrade > .conteneur { padding-inline: 0; }
.page-pilier-conseil .section--cartes.fond-degrade .titre-section { margin-bottom: 23px; font-size: 25px; text-align: center; }
.page-pilier-conseil .section--cartes.fond-degrade > .conteneur > .titre-section + p { line-height: 24px; }
.page-pilier-conseil .cartes-claires { gap: 30px; max-width: 316px; margin-top: 23px; }
.page-pilier-conseil .cartes-claires .carte { padding: 38px; }
.page-pilier-conseil .cartes-claires .carte h3 { margin-bottom: 25px; font-size: 20px; font-weight: 600; }
.page-pilier-conseil .cartes-claires .carte p { font-weight: var(--fw-normal); color: var(--c-nuit); }
@media (min-width: 768px) {
  .page-pilier-conseil .section--cartes.fond-degrade { margin-top: 8%; padding: 7.2% var(--marge-section) 4.5%; }
  .page-pilier-conseil .section--cartes.fond-degrade > .conteneur { padding-inline: 0; }
  .page-pilier-conseil .section--cartes.fond-degrade .titre-section { margin-bottom: 27px; font-size: 31px; }
  .page-pilier-conseil .cartes-claires { gap: 33px; max-width: 581px; margin-top: 27px; padding-left: 12px; }
  .page-pilier-conseil .cartes-claires .carte { padding: 53px; }
  .page-pilier-conseil .cartes-claires .carte h3 { margin-bottom: 23px; font-size: 25px; }
}
@media (min-width: 1025px) {
  .page-pilier-conseil .section--cartes:not(.fond-degrade) { padding-bottom: 29px; }
  .page-pilier-conseil .section--cartes.fond-degrade { padding: 6% var(--marge-section); }
  .page-pilier-conseil .section--cartes.fond-degrade > .conteneur { max-width: 1140px; }
  .page-pilier-conseil .section--cartes.fond-degrade .titre-section { margin-bottom: 31px; }
  .page-pilier-conseil .cartes-claires { gap: 41px; max-width: 958px; margin-top: 32px; padding-left: 19px; }
  .page-pilier-conseil .cartes-claires .carte h3 { margin-bottom: 27px; }
}

/* « Notre accompagnement » : titre → texte 20 px, texte en 24 px d'interligne, frise 10 % + 40 px plus bas. */
.page-pilier-conseil .section--timeline { padding-top: calc(10% + 10px); }
.page-pilier-conseil .section--timeline > .conteneur > .titre-section { margin-bottom: 20px; }
.page-pilier-conseil .section--timeline > .conteneur > .titre-section + p { line-height: 24px; }
.page-pilier-conseil .section--timeline .timeline { margin-top: calc(10% + 40px); }
@media (min-width: 768px) {
  .page-pilier-conseil .section--timeline { padding-top: calc(8% + 10px); }
  .page-pilier-conseil .section--timeline > .conteneur > .titre-section { margin-bottom: 20px; }
}
@media (min-width: 1025px) { .page-pilier-conseil .section--timeline > .conteneur > .titre-section { margin-bottom: 20px; } }

/* « Comment nous adaptons … » : marges de 10 % (20 % en mobile), mêmes largeurs que les encadrés de la formatrice. */
.page-pilier-conseil .cta { margin-block: 20%; padding: 10px calc(7.1% + 10px); }
.page-pilier-conseil .cta > .conteneur { padding-inline: 0; }
@media (min-width: 768px) { .page-pilier-conseil .cta { margin-block: 10%; padding: 10px; } }
@media (min-width: 1025px) { .page-pilier-conseil .cta { padding-inline: var(--marge-section); } .page-pilier-conseil .cta > .conteneur { max-width: 1140px; } }
.page-pilier-conseil .cta + .faq { margin-top: 0; }

/* ---------------------------------------------------------------- Accueil et villes */
/* « Pourquoi choisir … » (liste numérotée) : 129 px entre les deux raisons et 30 px sous la dernière en ordinateur
   (l'original enchaîne directement sur « Nos clients » ou le formulaire). */
@media (min-width: 1025px) {
  .section--numerotee { padding-bottom: 30px; }
  .liste-numerotee__item { margin-bottom: 129px; }
}

/* « Combien ça coûte … » / « Quel budget prévoir … » : titre à 20 px de l'illustration (texte centré sur elle) ;
   10 % au-dessus sur l'accueil, 6 % sur les villes ; dessous 10 px (accueil) ou 10 % − 31 px (villes) avant la FAQ.
   Mobile : illustration 24 px plus bas. */
@media (max-width: 767px) { .duo--illustration .duo__media { margin-top: 7px; } }
@media (min-width: 1025px) {
  .duo--illustration .titre-section { margin-bottom: 0; }
  .duo--illustration .duo__grille { row-gap: 10px; }
  .page-accueil .duo.duo--illustration { padding-block: 10% 10px; }
  .page-ville .duo.duo--illustration { padding-block: 6% calc(10% - 31px); }
}

/* Héros des villes (texte à gauche, étoile à droite) : texte à 16 px du conteneur (au lieu de 26-29), bouton 37-39 px
   sous le texte, étoile de 488 px (ordinateur) ou pleine colonne (tablette), bandeau de logos remonté de 18 vw. */
.page-ville .heros__texte > .grille { padding-inline: 7px; }
.page-ville .heros--accueil .heros__texte .bouton { margin-top: 0; }
@media (min-width: 768px) {
  .page-ville .heros__texte > .grille > div:has(> .bouton) { margin-top: 3px; }
  .page-ville .heros__texte > .grille img { align-self: center; width: calc(100% - 20px); margin: 10px; }
}
@media (min-width: 1025px) {
  .page-ville .heros__texte > .grille { padding-inline: 6px; }
  .page-ville .heros__texte > .grille img { align-self: start; width: auto; max-width: 488px; margin: -80px 4px 0 auto; }
  .page-ville .logos.logos--heros { margin-top: -18vw; }
}

/* ---------------------------------------------------------------- Secteurs */
/* Illustration du héros : l'original fixe sa largeur page par page (bien-être 405 / 261 / 204 px, électroménager et
   jeux de société 320 / 221 / 219 px, sport 295 / 209 / 204 px en 1366 / 768 / 390), même centre que les autres. */
.page-secteur .heros img[src*="influence-bien-etre"] { width: 204px; }
.page-secteur .heros :is(img[src*="influence-electromenager"], img[src*="influence-jeux-de-societe"]) { width: 219px; }
.page-secteur .heros img[src*="influence-sport"] { width: 204px; }
@media (min-width: 768px) {
  .page-secteur .heros img[src*="influence-bien-etre"] { width: 261px; }
  .page-secteur .heros :is(img[src*="influence-electromenager"], img[src*="influence-jeux-de-societe"]) { width: 221px; }
  .page-secteur .heros img[src*="influence-sport"] { width: 209px; }
}
@media (min-width: 1025px) {
  .page-secteur .heros img[src*="influence-bien-etre"] { width: 405px; margin-right: 40px; }
  .page-secteur .heros :is(img[src*="influence-electromenager"], img[src*="influence-jeux-de-societe"]) { width: 320px; margin: -43px 66px 0 auto; }
  .page-secteur .heros img[src*="influence-sport"] { width: 295px; margin: -49px 73px 0 auto; }
}

/* « Nos réalisations » : en tablette et mobile, cartes à 59 / 49 px du bord (conteneur + 10 px de rembourrage),
   20 px entre elles (sauf Beauté et UGC, déjà en pleine largeur dans l'original) ; bouton « Voir toutes nos réalisations » à 42 / 36 / 28 px sous les cartes. */
:is(.page-secteur):not(.page--agence-influence-beaute, .page--agence-ugc, .page--midnight-agency-ugc) .section--projets .projets { row-gap: 20px; padding-inline: 39px; }
:is(.page-secteur):not(.page--agence-influence-beaute, .page--agence-ugc, .page--midnight-agency-ugc) .section--projets .projets > li { padding-block: 10px; }
:is(.page-secteur):not(.page--agence-influence-beaute, .page--agence-ugc, .page--midnight-agency-ugc) .section--projets + .cta--bouton { margin: 0; padding-top: 18px; }
:is(.page-secteur):not(.page--agence-influence-beaute, .page--agence-ugc, .page--midnight-agency-ugc) .section--projets + .cta--bouton .bouton { margin-top: 0; }
@media (min-width: 768px) {
  :is(.page-secteur):not(.page--agence-influence-beaute, .page--agence-ugc, .page--midnight-agency-ugc) .section--projets .projets { padding-inline: 49px; }
  :is(.page-secteur):not(.page--agence-influence-beaute, .page--agence-ugc, .page--midnight-agency-ugc) .section--projets .projets > li { padding-inline: 10px; }
  :is(.page-secteur):not(.page--agence-influence-beaute, .page--agence-ugc, .page--midnight-agency-ugc) .section--projets + .cta--bouton { padding-top: 26px; }
}
@media (min-width: 1025px) {
  :is(.page-secteur):not(.page--agence-influence-beaute, .page--agence-ugc, .page--midnight-agency-ugc) .section--projets .projets { row-gap: 40px; padding-inline: 20px; }
  :is(.page-secteur):not(.page--agence-influence-beaute, .page--agence-ugc, .page--midnight-agency-ugc) .section--projets .projets > li { padding: 0; }
  :is(.page-secteur):not(.page--agence-influence-beaute, .page--agence-ugc, .page--midnight-agency-ugc) .section--projets + .cta--bouton { padding-top: 12px; }
}

/* Cartes « services » hors accueil et villes : texte aligné à gauche (justifié seulement sur l'accueil et les villes),
   cartes à la hauteur de leur contenu (l'original ne les égalise pas). */
:not(.page-accueil, .page-ville) > main .carte-service p { text-align: start; }
.cartes-services > li { align-self: start; }
/* Rembourrage bas propre à certaines cartes dans l'original : 2e et 4e cartes à 56 px en tablette ; 2e carte à 70 px
   en ordinateur sur les secteurs et plateformes (0 sur Beauté et UGC, 58 px sur l'accueil). */
@media (min-width: 768px) and (max-width: 1024px) {
  .cartes-services:not(.cartes-services--large) > li:nth-child(even) { padding-bottom: 56px; }
}
@media (min-width: 1025px) {
  .page-accueil .cartes-services > li:nth-child(2) { padding-bottom: 58px; }
  :is(.page-secteur, .page-plateforme) .cartes-services > li:nth-child(2) { padding-bottom: 70px; }
  :is(.page--agence-influence-beaute, .page--agence-ugc, .page--midnight-agency-ugc) .cartes-services > li:nth-child(2) { padding-bottom: 0; }
}
.page-ville .cartes-services > li:nth-child(3) { padding-bottom: 14px; }
@media (min-width: 1025px) {
  .page-ville .cartes-services > li:nth-child(2) { padding-bottom: 49px; }
  .page-ville .cartes-services > li:nth-child(4) { padding-bottom: 15px; }
}

/* Réalisations à deux cartes (secteurs, plateformes) : les deux colonnes de 338 px sont centrées en ordinateur. */
@media (min-width: 1025px) {
  .section--projets .grille--3.projets:has(> li:nth-child(2):last-child) { grid-template-columns: repeat(2, 338px); justify-content: center; }
  .section--projets .grille--3.projets:has(> li:nth-child(2):last-child) .projet__image { max-width: none; }
}

/* ---------------------------------------------------------------- Social media (FR / EN) */
/* « Nos services » : 3 % + 10 px sous l'introduction, rien sous les cartes (le dégradé suivant a 8 % de marge). */
.page-pilier-social .logos--heros + .section + .section--cartes { padding-block: calc(3% + 10px) 0; }
/* « Nos réalisations » : 7 % (15 % en mobile) au-dessus, titre centré 28 / 32 px, cartes 47 / 63 px plus bas. */
.page-pilier-social .section--cartes:has(.projets) { padding: 15% var(--marge-section) 0; }
.page-pilier-social .section--cartes:has(.projets) > .conteneur > .titre-section { margin-bottom: 47px; font-size: 28px; text-align: center; }
/* Formulaire collé à « L'équipe Midnight » (pas de marge sous la carte), duo à 8 % de marge, encadré final 10 px. */
.page-pilier-social .contact .contact__cadre { margin-bottom: 0; }
.page-pilier-social .contact + .duo { padding-block: 8%; }
.page-pilier-social .cta { margin: 0 0 20%; padding: 10px var(--marge-section); }
.page-pilier-social .cta .titre-section { margin-bottom: 30px; font-size: 25px; font-weight: var(--fw-normal); }
.page-pilier-social .cta .bouton { margin-top: 31px; }
@media (min-width: 768px) {
  .page-pilier-social .section--cartes:has(.projets) { padding-top: 7%; }
  .page-pilier-social .section--cartes:has(.projets) > .conteneur > .titre-section { margin-bottom: 63px; font-size: 32px; }
  .page-pilier-social .cta { margin-bottom: 10%; }
  .page-pilier-social .cta .titre-section { font-size: 32px; }
}
.page-pilier-social .logos--heros + .section:not(.section--cartes) p { line-height: 20px; }
@media (max-width: 767px) {
  .page-pilier-social .contact + .duo { padding-top: 19%; }
  .page-pilier-social .contact + .duo .duo__media { order: -1; }
  .page-pilier-social .contact + .duo .duo__texte > h2 { margin-top: 10px; }
}
.page-pilier-social .logos--heros + .section + .section--cartes { padding-top: 59px; }
.page-pilier-social .contact + .duo { padding-bottom: 72px; }
.page-pilier-social .cta { padding-inline: calc(7.1% + 10px); }
.page-pilier-social .cta > .conteneur { padding-inline: 0; }
@media (min-width: 768px) {
  .page-pilier-social .logos--heros + .section + .section--cartes { padding-top: calc(3% + 19px); }
  .page-pilier-social .contact + .duo { padding-bottom: calc(8% + 19px); }
  .page-pilier-social .cta { padding-inline: var(--marge-section); }
}
@media (min-width: 1025px) {
  .page-pilier-social .logos--heros + .section + .section--cartes > .conteneur > .titre-section { margin-bottom: 63px; }
}
@media (min-width: 1025px) { .page-pilier-social .cta > .conteneur { max-width: 1140px; } }

/* ---------------------------------------------------------------- Marketing d'influence (FR / EN) */
/* « Qu'est-ce que le marketing d'influence ? » : même encadré que Conseil (marges de 10 %, 20 % en mobile). */
.page-pilier-marketing .cta { margin-block: 20%; padding: 10px calc(7.1% + 10px); }
.page-pilier-marketing .cta > .conteneur { padding-inline: 0; }
.page-pilier-marketing .cta + .faq { margin-top: 0; }
@media (min-width: 768px) { .page-pilier-marketing .cta { margin-block: 10%; padding: 10px; } }
@media (min-width: 1025px) { .page-pilier-marketing .cta { padding-inline: var(--marge-section); } .page-pilier-marketing .cta > .conteneur { max-width: 1140px; } }
/* « L'équipe Midnight » : photo d'abord en mobile ; photo de 296 px centrée dans sa colonne en ordinateur. */
@media (max-width: 767px) {
  .page-pilier-marketing .duo .duo__media { order: -1; margin-bottom: 33px; }
}
@media (min-width: 1025px) { .page-pilier-marketing .duo .duo__media { width: 296px; margin-inline: auto; } }
/* « Nos réalisations » : titre centré 25 / 32 px, 23 % + 10 px (mobile) ou 7 % + 10 px au-dessus. */
.page-pilier-marketing .section--cartes:has(.projets) { padding-top: calc(23% - 4px); }
.page-pilier-marketing .section--cartes:has(.projets) > .conteneur > .titre-section { margin-bottom: 47px; font-size: 25px; text-align: center; }
@media (min-width: 768px) {
  .page-pilier-marketing .section--cartes:has(.projets) { padding-top: calc(7% - 7px); }
  .page-pilier-marketing .section--cartes:has(.projets) > .conteneur > .titre-section { margin-bottom: 63px; font-size: 32px; }
}

/* ---------------------------------------------------------------- Références (FR / EN) */
/* « Références précédentes » plus bas (100 / 133 px), bandeau de logos plus court ; texte final à 37 / 56 px. */
.page-references .section:has(+ .section--logos) { padding-top: 100px; }
.page-references .section--logos { padding-block: 0 30px; }
.page-references .contact + .section { padding-top: 37px; }
@media (min-width: 1025px) {
  .page-references .section:has(+ .section--logos) { padding-top: 153px; }
  .page-references .section--logos { padding-bottom: 25px; }
  .page-references .contact + .section { padding-top: 56px; }
}

/* Carte presse (À propos) : titre aligné à gauche, 28 px partout, 27 px sous l'image. */
.carte-presse h3 { align-self: stretch; font-size: 28px; text-align: start; }
.carrousel--presse .carte-presse { gap: 27px; padding-bottom: 26px; }