.elementor-kit-6{--e-global-color-primary:#FFFFFF;--e-global-color-secondary:#8A8A8A;--e-global-color-text:#E0E0E0;--e-global-color-accent:#FFFFFF;--e-global-color-e7e0896:#000000;--e-global-color-b7c58b9:#0A0A0A;--e-global-color-3e64cee:#2A2A2A;--e-global-typography-primary-font-family:"Archivo";--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"Montserrat";--e-global-typography-secondary-font-weight:600;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-weight:600;font-size:16px;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 h1{font-size:48px;}.elementor-kit-6 h2{font-size:36px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-6{--e-global-typography-primary-line-height:1.2em;--e-global-typography-primary-word-spacing:-0.02em;--e-global-typography-text-line-height:1.6em;font-size:14px;}.elementor-kit-6 h1{font-size:32px;}.elementor-kit-6 h2{font-size:24px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ============================================================================
   WHITE AGENCY — CSS COMPLET CONSOLIDÉ  (remplace TOUT le CSS personnalisé)
   Accent turquoise #62D0DE · Fond noir #000
   ----------------------------------------------------------------------------
   MODE D'EMPLOI : Réglages du site → CSS personnalisé →
     TOUT sélectionner (Ctrl+A) → Supprimer → coller ce fichier → Enregistrer.
   ----------------------------------------------------------------------------
   MAJ 21/07/2026 (session Point 7) :
     • §3  — HALO TURQUOISE QUI SUIT LE SCROLL : le halo passe du blanc-bleu au
       turquoise #62D0DE (enfin VISIBLE sur le fond noir), reste position:fixed
       (toujours présent = suit la navigation) et DÉRIVE au fil du scroll, façon
       akis.studio (animation pilotée par le scroll). Garde-fous : @supports
       (animation-timeline: scroll()) + prefers-reduced-motion → navigateurs non
       compatibles / « mouvement réduit » = halo turquoise fixe (sans dérive).
   MAJ 21/07/2026 (session Point 6) :
     • §5  — PHRASE-TRANSITION (point 1) : nouveau texte « La bonne nouvelle : ça se
       corrige ! » (sans guillemets), au lieu de « Alors voilà comment... ».
     • §2b — REMONTER LA STRATE BIO (point 2) : la bio « Qui parle » (e5a01f8) remonte
       visuellement juste après la phrase-transition, via `order` (aucun impact sur
       l'ordre DOM ni sur le nth-child des tuiles 8→15).
     • §5c — ANIMATION FLIP (point 4) : au survol, chaque bloc de réassurance pivote
       sur son axe vertical (rotateY 360°), sans touche turquoise. Encapsulé dans
       prefers-reduced-motion.
   MAJ 20/07/2026 (session Point 5) :
     • §5b — FOND BAS CONTINU · §12 — animations translateY 80px · §4 — rature turquoise 7px
     • §5  — phrase-transition (pseudo b9fe785) · 3 stats top-align
     • §5b — air 16px après titres · §7 — cartes articles hover turquoise
     • §8  — air CTA bio · §9/§9b — ligne logo 3px + soulignement menu · §10b — point 8 contact.
   ----------------------------------------------------------------------------
   Repère des ID utilisés (grille .elementor-8) :
     e5a01f8=Bio(track) · 370c1fd=colonne photo · b33545b=colonne texte bio
     8db4de0=3 stats réassurance (colonnes cb401ae/4c59836/07a9607)
     7eaef12=En cours · 136dcac=A lire (= début section blog, porte la marge de section)
     bfb6a54=Questions fréquentes · 51a600b=Parlons-en · f93d5a3=cartes articles
     ca41934=Comment je travaille · 001bd6b=Ce que je livre · c565f8b=Votre site…
     b9fe785=dernier § « …le reste est décoratif » (porte la phrase-transition)
     1842498=logo · 957cea4=conteneur header
   ============================================================================ */

/* ---------- 1. BASE GLOBALE ---------- */
html, body, .site-main, .page-content, .elementor { background-color:#000 !important; }
.elementor > .e-con { max-width:1140px; margin-inline:auto; width:100%; padding-inline:24px; }
@media (max-width:767px){ .elementor > .e-con { padding-inline:20px; } }

/* ---------- 2. GRILLE 12 COLONNES (page d'accueil) ---------- */
.elementor.elementor-8 {
  display:grid; grid-template-columns:repeat(12,1fr); gap:20px 24px;
  max-width:1140px; margin-inline:auto; padding-inline:24px; position:relative;
}
.elementor.elementor-8 > .e-con { grid-column:1 / -1; max-width:none; margin:0; width:auto; }
/* Tuiles accompagnements (8 à 15) : 4 colonnes de 3 */
.elementor.elementor-8 > .e-con:nth-child(n+8):nth-child(-n+15){ grid-column:span 3; }
@media (max-width:1024px){ .elementor.elementor-8 > .e-con:nth-child(n+8):nth-child(-n+15){ grid-column:span 6; } }
@media (max-width:767px){ .elementor.elementor-8 > .e-con:nth-child(n+8):nth-child(-n+15){ grid-column:1 / -1; } }

/* ---------- 2b. REMONTER LA STRATE BIO « QUI PARLE » (point 2, 21/07) ----------
   La bio (e5a01f8) est l'enfant DOM #18 (après les tuiles). On la remonte
   VISUELLEMENT juste après la section « Votre site ne vous rapporte rien » (#3, qui
   porte la phrase-transition), au moyen de `order`. Avantages : aucune modif dans
   Elementor, aucun décalage du nth-child des tuiles (8→15, basé sur l'ordre DOM qui
   ne change pas), 100 % réversible. Testé sur la page publique : tuiles toujours en
   grille 4 colonnes, bio pleine largeur au bon endroit.
   ⚠️ L'attrape-tout `order:10` doit rester AVANT les règles ciblées (même spécificité,
   c'est l'ordre d'écriture qui tranche). */
.elementor.elementor-8 > .e-con{ order:10; }
.elementor.elementor-8 > .e-con:nth-child(1){ order:1; }   /* Hero */
.elementor.elementor-8 > .e-con:nth-child(2){ order:2; }   /* 3 stats réassurance */
.elementor.elementor-8 > .e-con:nth-child(3){ order:3; }   /* Votre site… + phrase-transition */
.elementor.elementor-8 > .e-con[data-id="e5a01f8"]{ order:4; }   /* Bio « Qui parle » remontée ici */

/* ---------- 3. HALO / DÉGRADÉS DÉCORATIFS (TURQUOISE + SUIT LE SCROLL, MAJ 21/07) ----------
   Le halo passe du blanc-bleu au TURQUOISE #62D0DE (rgb 98,208,222) et devient enfin
   VISIBLE sur le fond noir. Il reste position:fixed → toujours présent à l'écran, donc
   il « suit » déjà la navigation. EN PLUS, il DÉRIVE doucement au fil du scroll (part du
   haut-droite, glisse vers le bas-gauche en grandissant) pour donner de la profondeur /
   de l'immersion, façon akis.studio.
   GARDE-FOUS : la dérive est encapsulée dans @supports (animation-timeline: scroll()) +
   prefers-reduced-motion. Sur un navigateur non compatible (Safari/Firefox aujourd'hui)
   ou en « mouvement réduit », le halo reste un halo turquoise FIXE et visible — juste
   sans le déplacement. (Même logique de progressive enhancement que les animations §12.)
   >>> LEVIERS DE RÉGLAGE À L'ŒIL :
     • Visibilité / intensité : les 4 valeurs alpha du radial-gradient (.55 / .30 / .12 / 0).
       Version « franche » validée (21/07). Pour adoucir : baisse ces 4 valeurs.
     • Position/taille : boîte plein écran (top:0; right:0; width:100vw; height:100vh) et
       CENTRE du dégradé à « 86% -2% » = cœur turquoise dans le coin haut-droite, à l'écran.
     • Amplitude de la dérive : les valeurs translate3d / scale dans @keyframes wa-halo-scroll. */
.elementor.elementor-8::before{
  content:""; position:fixed; top:0; right:0; width:100vw; height:100vh;
  background:radial-gradient(62% 58% at 86% -2%,
    rgba(98,208,222,.55) 0%, rgba(98,208,222,.30) 32%, rgba(98,208,222,.12) 55%, rgba(98,208,222,0) 72%);
  pointer-events:none; z-index:0; will-change:transform;
}
.elementor.elementor-8 > *{ position:relative; z-index:1; }

/* Dérive du halo pilotée par le scroll de la page (profondeur / immersion). */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: scroll()){
    @keyframes wa-halo-scroll{
      from{ transform:translate3d(0,0,0) scale(1); }
      to  { transform:translate3d(-20vw,26vh,0) scale(1.28); }
    }
    .elementor.elementor-8::before{
      animation: wa-halo-scroll linear both;
      animation-timeline: scroll(root);
    }
  }
}

/* Halo secondaire du hero — recalé en turquoise discret, statique (ancre le haut de page). */
.elementor.elementor-8 > .e-con:nth-child(1){ position:relative; overflow:visible !important; padding-top:56px !important; }
.elementor.elementor-8 > .e-con:nth-child(1)::before{
  content:""; position:absolute; top:-30%; right:-12%; width:65%; height:150%;
  background:radial-gradient(rgba(98,208,222,.22) 0%, rgba(98,208,222,.07) 42%, rgba(98,208,222,0) 70%);
  pointer-events:none; z-index:0;
}
.elementor.elementor-8 > .e-con:nth-child(1) > *{ position:relative; z-index:1; }
@media (max-width:767px){ .elementor.elementor-8 > .e-con:nth-child(1){ padding-top:32px !important; } }

/* ---------- 4. TYPOGRAPHIE ---------- */
.elementor.elementor-8 h3{ font-size:22px !important; line-height:1.3 !important; }
/* Sur-titres / eyebrows (petit label gris majuscule) */
.elementor-element-ca41934 h2:first-of-type,
.elementor-element-001bd6b h2,
.elementor-element-b33545b h2:first-of-type,   /* « Qui parle » (dans la bio) */
.elementor-element-7eaef12 h2,
.elementor-element-136dcac h2,
.elementor-element-bfb6a54 h2:first-of-type,
.elementor-element-51a600b h2{
  font-size:13px !important; font-weight:600 !important; letter-spacing:.08em !important;
  text-transform:uppercase !important; color:#8A8A8A !important; line-height:1.4 !important;
  margin-bottom:6px !important;
}
/* Rature animée (mot barré du hero) */
.wa-rature{ position:relative; white-space:nowrap; }
/* Point 5 : rature turquoise + plus épaisse (7px) pour la rendre plus visuelle. */
.wa-rature::after{
  content:""; position:absolute; left:0; right:0; top:52%; height:7px; background:#62D0DE;
  transform:scaleX(0); transform-origin:left center;
  animation:wa-strike .7s cubic-bezier(.65,0,.35,1) 1.1s 1 forwards;
}
@keyframes wa-strike{ 100%{ transform:scaleX(1); } }

/* ---------- 5. ESPACEMENTS DE SECTION (marge haute) ---------- */
.elementor-element-c565f8b, .elementor-element-ca41934, .elementor-element-001bd6b,
.elementor-element-e5a01f8, .elementor-element-7eaef12, .elementor-element-136dcac,
.elementor-element-bfb6a54, .elementor-element-51a600b{ margin-top:72px !important; }
@media (max-width:767px){
  .elementor-element-c565f8b, .elementor-element-ca41934, .elementor-element-001bd6b,
  .elementor-element-e5a01f8, .elementor-element-7eaef12, .elementor-element-136dcac,
  .elementor-element-bfb6a54, .elementor-element-51a600b{ margin-top:44px !important; }
}
/* Anomalie de rythme corrigée : ce bloc avait 80px de padding haut/bas (réglé
   dans Elementor) contre 10px partout ailleurs, sans fond distinct → gros « trou ».
   On le recale sur le rythme commun (10/10). */
.elementor-element-c565f8b{ padding-inline:10px !important; padding-top:10px !important; padding-bottom:10px !important; }
/* PHRASE-TRANSITION (point 1, MAJ 21/07) entre « …le reste est décoratif » et la strate
   suivante. Injectée à la fin du dernier paragraphe (b9fe785) via un pseudo-élément →
   AUCUN enfant ajouté à la grille (sinon le ciblage nth-child des 8 tuiles se
   décalerait). >>> POUR CHANGER LE TEXTE : édite la ligne content:"…". */
[data-id="b9fe785"]::after{
  content:"La bonne nouvelle : ça se corrige !";
  display:block; margin-top:30px; font-style:italic; font-size:20px; line-height:1.45;
  color:#C9C9C9; max-width:44ch;
}
@media (max-width:767px){ [data-id="b9fe785"]::after{ font-size:18px; margin-top:24px; } }
/* Un peu d'air entre le hero et la bande des 3 stats (était trop serré, ~30px) */
.elementor-element-8db4de0{ margin-top:24px !important; }
@media (max-width:767px){ .elementor-element-8db4de0{ margin-top:16px !important; } }
/* Point 5 (point 3) : les 3 colonnes de réassurance centraient leur contenu
   verticalement → dans la colonne la plus remplie, le titre remontait
   (« Depuis 2004 » plus haut que les 2 autres). On aligne le contenu en HAUT :
   icônes + titres démarrent au même niveau dans les 3 colonnes. */
.elementor-element-8db4de0 > *{ justify-content:flex-start !important; }

/* ---------- 5c. ANIMATION FLIP DES 3 RÉASSURANCES (point 4, 21/07) ----------
   Au survol, chaque bloc de réassurance (les 3 colonnes de 8db4de0) pivote sur son
   axe VERTICAL (rotateY 360° = un tour complet). Pas de changement de couleur
   (pas de turquoise), juste le mouvement. `perspective` sur le parent pour un vrai
   effet 3D. Encapsulé dans prefers-reduced-motion → un utilisateur « mouvement
   réduit » ne subit pas la rotation (consensus accessibilité WCAG 2.3.3).
   Réglage : durée .8s ; passe rotateY(360deg) → rotateY(180deg) si tu préfères un
   demi-tour, mais 360° revient à la position d'origine (plus propre). */
@media (prefers-reduced-motion: no-preference){
  .elementor-element-8db4de0{ perspective:1200px; }
  .elementor-element-8db4de0 > *{ transition:transform .8s cubic-bezier(.4,0,.2,1); }
  .elementor-element-8db4de0 > *:hover{ transform:rotateY(360deg); }
}

/* ---------- 5b. COHÉRENCE SUR-TITRE → TITRE ---------- */
/* Quand le sur-titre gris et le titre partagent le même bloc, l'écart est de 6px.
   Quand ils sont dans deux blocs séparés, l'écart montait à 46px (incohérent).
   On remonte les titres concernés pour un écart homogène (~8px) partout. */
.elementor-element-c2b9e0d,   /* « Huit accompagnements » (sous-titre CE QUE JE LIVRE) */
.elementor-element-0d55fb8,   /* « Maude Ladrière » (sous EN COURS) */
.elementor-element-9ae8d60,   /* « Ce que je publie » (sous A LIRE) */
.elementor-element-04b0aac{   /* « Le premier rendez-vous » (sous PARLONS-EN) */
  margin-top:-38px !important;
}
/* Point 5 (point 7) : air homogène APRÈS chaque grand titre de strate (36px),
   avant le corps de texte. Levier : la valeur 16px ci-dessous s'applique partout. */
.elementor-element-f6fbf17,   /* Votre site ne vous rapporte rien */
.elementor-element-24af205,   /* Trois étapes. La même personne aux trois */
.elementor-element-c9bafbf,   /* Huit accompagnements */
.elementor-element-a07ec2a,   /* Grégory Van Meerbeek (bio) */
.elementor-element-ecd54b8,   /* Maude Ladrière */
.elementor-element-79e63e1,   /* Ce que je publie, je l'applique */
.elementor-element-247dc64,   /* Ce qu'on me demande (FAQ) */
.elementor-element-6c08c01{   /* Le premier rendez-vous */
  margin-bottom:16px !important;
}
/* Fond légèrement relevé pour la moitié basse (à partir de « En cours ») */
.elementor-element-7eaef12,
.elementor-element-7eaef12 ~ .e-con{ background-color:#0A0A0A !important; position:relative !important; z-index:2 !important; }
/* ......... FOND BAS CONTINU (suppression des « rayures ») .........
   Un pseudo-élément par bloc PEINT en #0A0A0A l'espace situé JUSTE AU-DESSUS de lui
   (le gap + la marge), derrière le contenu (z-index:-1). La moitié basse devient un
   panneau gris continu. La frontière noir→gris reste nette au-dessus de « En cours »
   (7eaef12 n'est PAS dans le sélecteur ~).
   • Pour un fond PLEINE LARGEUR : remplacer « left:0; right:0; » par
     « left:50%; right:auto; width:100vw; transform:translateX(-50%); ». */
.elementor-element-7eaef12 ~ .e-con::before{
  content:""; position:absolute; left:0; right:0; bottom:100%;
  height:120px; background:#0A0A0A; z-index:-1; pointer-events:none;
}
@media (max-width:767px){
  .elementor-element-7eaef12 ~ .e-con::before{ height:90px; }
}

/* ---------- 6. TUILES ACCOMPAGNEMENTS (survol / clic) ---------- */
.elementor.elementor-8 > .e-con:nth-child(n+8):nth-child(-n+15){
  position:relative; cursor:pointer; transition:background-color .3s, border-color .3s;
}
.elementor.elementor-8 > .e-con:nth-child(n+8):nth-child(-n+15) a::after{ content:""; position:absolute; inset:0; z-index:3; }
.elementor.elementor-8 > .e-con:nth-child(n+8):nth-child(-n+15):hover{ background:#0A0A0A !important; border-color:#62D0DE !important; }
.elementor.elementor-8 > .e-con:nth-child(n+8):nth-child(-n+15):hover :is(h3,a,p){ color:#62D0DE !important; }
.elementor.elementor-8 > .e-con:nth-child(n+8):nth-child(-n+15):active{ background:#62D0DE !important; border-color:#62D0DE !important; }
.elementor.elementor-8 > .e-con:nth-child(n+8):nth-child(-n+15):active :is(h3,a,p){ color:#000 !important; }

/* ---------- 7. RANGÉE CARTES ARTICLES (« A lire ») ---------- */
.elementor-element-f93d5a3{ flex-wrap:wrap; gap:24px; align-items:stretch; }
/* bordure transparente au repos = pas de saut de mise en page au survol */
.elementor-element-f93d5a3 > *{ flex:1 1 0px; min-width:0; position:relative; cursor:pointer;
  border:1px solid transparent; transition:transform .3s, background-color .3s, border-color .3s; }
.elementor-element-f93d5a3 > * a::after{ content:""; position:absolute; inset:0; z-index:3; }
/* Point 5 (point 6) : hover turquoise-sur-noir, comme les 8 tuiles d'accompagnements */
.elementor-element-f93d5a3 > :hover{ transform:translateY(-6px); background:#0A0A0A !important; border-color:#62D0DE !important; }
.elementor-element-f93d5a3 > :hover :is(h1,h2,h3,h4,a,p,span){ color:#62D0DE !important; }
@media (max-width:767px){ .elementor-element-f93d5a3{ flex-direction:column; } }

/* ---------- 8. BIO STICKY (Lot 3, par ID) ---------- */
/* Track (conteneur) : colonnes alignées en haut */
.elementor-element-e5a01f8 > .e-con-inner{ align-items:flex-start; }
/* Colonne photo : colle sous le header, se décroche en fin de bio */
.elementor-element-370c1fd{ flex:0 0 40%; align-self:flex-start; position:sticky; top:100px; }
/* Colonne texte bio : occupe le reste */
.elementor-element-b33545b{ flex:1 1 0%; }
/* Point 5 (point 5) : plus d'air entre la fin de la bio et le CTA « Parlons de votre projet ». */
.elementor-element-1b4be41{ margin-top:28px !important; }
@media (max-width:1024px){
  .elementor-element-e5a01f8 > .e-con-inner{ flex-direction:column; }
  .elementor-element-370c1fd{ position:static; top:auto; flex-basis:auto; }
  .elementor-element-b33545b{ flex-basis:auto; }
}

/* ---------- 9. EN-TÊTE (Elementor) ---------- */
.elementor-location-header .elementor-element-957cea4{
  padding:14px 0 !important; border-bottom:1px solid rgba(98,208,222,.55) !important;
}
.elementor-location-header .elementor-nav-menu{ flex-wrap:nowrap !important; }
.elementor-location-header .elementor-nav-menu .elementor-item{
  white-space:nowrap !important; font-size:15px !important; padding-left:12px !important; padding-right:12px !important;
}
.elementor-location-header .e-button-base{ white-space:nowrap !important; }
/* Logo texte « White Agency » (100% CSS, image masquée) */
.elementor-location-header .elementor-element-1842498,
.elementor-location-header .elementor-element-1842498 a{ background:transparent !important; }
.elementor-location-header .elementor-element-1842498 img{ display:none !important; }
.elementor-location-header .elementor-element-1842498 a{
  align-items:baseline; text-decoration:none; font-weight:800; font-size:28px; letter-spacing:.5px;
  line-height:1; border-bottom:3px solid #62D0DE; padding-bottom:4px; display:inline-flex !important;   /* Point 5 : 2px → 3px pour matcher l'épaisseur du soulignement du menu */
  white-space:nowrap !important;   /* le logo ne se casse JAMAIS sur 2 lignes */
}
.elementor-location-header .elementor-element-1842498 a::before{ content:"W"; color:#62D0DE; white-space:nowrap; }
.elementor-location-header .elementor-element-1842498 a::after{ content:"hite Agency"; color:#fff; white-space:nowrap; }

/* ---------- 9b. EN-TÊTE MOBILE (logo + CTA compacts, tient sur une ligne) ---------- */
@media (max-width:767px){
  .elementor-location-header .elementor-element-1842498 a{ font-size:22px !important; }
  .elementor-location-header a.e-button-base{ font-size:13px !important; padding:8px 14px !important; }
}
@media (max-width:430px){
  .elementor-location-header .elementor-element-1842498 a{ font-size:19px !important; }
  .elementor-location-header a.e-button-base{ font-size:12px !important; padding:7px 12px !important; }
}
/* Soulignement du menu (actif + survol) — épaisseur 3px (= logo) + remonté de 5px.
   >>> LEVIER de réglage fin : ajuste « bottom:5px » (monte/descend le trait du menu). */
.elementor-location-header .elementor-nav-menu a.elementor-item::after,
.elementor-location-header .elementor-nav-menu a.elementor-item-active::after{
  background:#62D0DE !important; height:3px !important; bottom:5px !important;
}

/* ---------- 10. BOUTONS (turquoise, survol inversé) ---------- */
a.e-button-base, button.e-button-base, .elementor-button,
.elementor-location-header a.e-button-base{
  background-color:#62D0DE !important; color:#000 !important; border-color:#62D0DE !important;
}
a.e-button-base:hover, button.e-button-base:hover, .elementor-button:hover,
.elementor-location-header a.e-button-base:hover{
  background-color:#000 !important; color:#62D0DE !important; border-color:#62D0DE !important;
}

/* ---------- 10b. POINT 8 — CONTACT EN LIGNE AVEC LE CTA ---------- */
/* Le flexbox du CTA (a810270) contient 3 boutons : CTA (fa8b1b5) + tél (1c7884a → tel:)
   + email (9504ef0 → mailto:). Sur UNE ligne, centrés ; le CTA garde son style plein,
   les 2 autres deviennent des LIENS turquoise. Ancienne ligne (3f8a8b0) masquée. */
[data-id="a810270"]{
  flex-direction:row !important; flex-wrap:wrap !important; align-items:center !important;
  justify-content:center !important; gap:12px 22px !important;
}
[data-id="1c7884a"].e-button-base, [data-id="9504ef0"].e-button-base,
[data-id="1c7884a"].e-button-base:hover, [data-id="9504ef0"].e-button-base:hover{
  background-color:transparent !important; border-color:transparent !important;
  color:#62D0DE !important; padding:6px 4px !important; box-shadow:none !important; font-weight:600 !important;
}
[data-id="1c7884a"] *, [data-id="9504ef0"] *{ color:#62D0DE !important; }
[data-id="1c7884a"].e-button-base:hover, [data-id="9504ef0"].e-button-base:hover{ text-decoration:underline !important; }
[data-id="3f8a8b0"]{ display:none !important; }
@media (max-width:767px){ [data-id="a810270"]{ gap:8px 16px !important; } }

/* ---------- 11. EN-TÊTE / PIED (thème, secours) ---------- */
#site-header, #site-footer{ background-color:#000 !important; }
#site-header .site-title, #site-header .site-title a{ color:#fff !important; text-decoration:none !important; }
#site-header .site-title a{ font-size:40px !important; }
#site-footer, #site-footer *{ color:#8A8A8A !important; }
#site-footer a{ color:#fff !important; }

/* ---------- 12. ANIMATIONS D'APPARITION AU SCROLL (fade + léger glissement) ---------- */
/* GARDE-FOUS : tout encapsulé dans prefers-reduced-motion + @supports (view()).
   Réglages : translateY(80px) = distance ; entry 0%→100% = durée d'apparition. */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    @keyframes wa-reveal{
      from{ opacity:0; transform:translateY(80px); }
      to  { opacity:1; transform:translateY(0);    }
    }
    .elementor-element-c565f8b,   /* Votre site ne vous rapporte rien */
    .elementor-element-ca41934,   /* Comment je travaille */
    .elementor-element-001bd6b,   /* Ce que je livre */
    .elementor-element-e5a01f8,   /* Bio (sticky — voir note ci-dessous) */
    .elementor-element-7eaef12,   /* En cours */
    .elementor-element-136dcac,   /* A lire (début section blog) */
    .elementor-element-bfb6a54,   /* Questions fréquentes */
    .elementor-element-51a600b{   /* Parlons-en */
      animation: wa-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }
  }
}
/* NOTE bio sticky : e5a01f8 contient la photo en position:sticky (§8). Si la photo
   « saute » pendant l'apparition, retire « .elementor-element-e5a01f8, » de la liste. *//* End custom CSS */