@font-face{font-family:"Righteous";font-style:normal;font-weight:400;font-display:optional;src:url("/assets/fonts/righteous-400-normal-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;}
@font-face{font-family:"Righteous";font-style:normal;font-weight:400;font-display:optional;src:url("/assets/fonts/righteous-400-normal-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Noto Sans";font-style:normal;font-weight:400 800;font-display:optional;src:url("/assets/fonts/noto-sans-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;}
@font-face{font-family:"Noto Sans";font-style:normal;font-weight:400 800;font-display:optional;src:url("/assets/fonts/noto-sans-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:400;font-display:swap;src:url("/assets/fonts/fraunces-400-italic.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/fraunces-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:500;font-display:swap;src:url("/assets/fonts/fraunces-500-italic.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/fraunces-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/fraunces-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
/* ============================================================
   MB Magnétisme — Brand Book, EXÉCUTION ÉLÉGANTE (clair/serif/aéré)
   Palette = Brand Book Ensemble. Registre = Anne-Laure (premium éditorial).
   Chargé après main.css/mb-editorial.css.
   ============================================================ */

/* 1. VARIABLES — les 6 couleurs EXACTES de la charte officielle (Ensemble/Brand Book Michaël, vérifiées 2026-07-20). SEULE source de vérité. */
:root{
  --paper:#FEF3EE;     /* Coquillage — fond principal */
  --deep:#0E1017;      /* Encre noir — corps de texte, titres */
  --walnut:#6E2E16;    /* Dark Walnut — identité, accent secondaire */
  --abricot:#D98D42;   /* Abricot doré — CTA/boutons/titres courts (10% max) */
  --cueilleur:#7A8B6F; /* Cueilleur — boutons de validation UNIQUEMENT (5% max) */
  --chataigne:#962F25; /* Châtaigne — erreur/alerte UNIQUEMENT (5% max) */
  /* alias + tokens dérivés (variantes de teinte/opacité des 6 ci-dessus, jamais un hex indépendant) */
  --gold: var(--walnut);
  --white: color-mix(in srgb, var(--paper) 94%, white 6%);
  --muted: color-mix(in srgb, color-mix(in srgb, var(--walnut) 50%, var(--deep) 50%) 80%, var(--paper) 20%);
  --paper-2: color-mix(in srgb, var(--paper) 88%, var(--walnut) 12%);
  --deep-2: color-mix(in srgb, var(--walnut) 78%, black 22%);
  --muted-2: color-mix(in srgb, var(--muted) 80%, white 20%);
  --gold-soft: color-mix(in srgb, var(--abricot) 70%, white 30%);
  --gold-dark: var(--walnut);
  --line: color-mix(in srgb, var(--deep) 14%, transparent);
  --site-font-display:"Righteous", Georgia, system-ui, serif;
  --site-font-body:"Noto Sans", Arial, Helvetica, sans-serif;
  --radius:22px; --shadow:0 14px 38px color-mix(in srgb, var(--deep) 9%, transparent);
}

/* 2. TYPO — bi-famille charte officielle (Brand Book v2, 2026-08-02) : Righteous (titres H1/H2 uniquement, écho du logo Sugo Pro) + Noto Sans (corps, H3, UI). Righteous n'existe qu'en 400 -> font-synthesis-weight:none pour éviter le faux-gras. Citations en italique Righteous (oblique synthétique, aucune vraie italique disponible). */
body, body p, body a, body span, body li, body strong, body small, body em,
body button, body input, body textarea, body div{
  font-family:"Noto Sans", Arial, Helvetica, sans-serif !important;
}
body, body p, body li{ font-weight:400 !important; }
body strong{ font-weight:700 !important; }
body h1, .brand strong, .hero h1, .page-hero h1, .internal-page .page-lead-card h1{
  font-family:"Righteous", Georgia, system-ui, serif !important;
  font-weight:400 !important; font-synthesis-weight:none; letter-spacing:-.005em; line-height:1.15;
}
body h2, .internal-page .page-body h2, .internal-page .page-lead-card h2{
  font-family:"Righteous", Georgia, system-ui, serif !important;
  font-weight:400 !important; font-synthesis-weight:none; letter-spacing:-.005em; line-height:1.25;
}
body h3{
  font-family:"Noto Sans", Arial, Helvetica, sans-serif !important;
  font-weight:600 !important; letter-spacing:-.005em; line-height:1.25;
}
/* Corps de texte = Encre noir, jamais un ton sur ton (charte Brand Book + retour
   Michael 14/08 : « si le fond est rouge #EDDBD4, le texte doit etre noir #0E1017 »).
   --muted reste disponible pour les mentions secondaires (legendes, small). */
body{ background:var(--paper); color:var(--deep); }
h1 em,h2 em,.hero h1 em{ font-style:normal; font-weight:400; color:var(--gold); }

/* 3. HEADER — clair, épuré */
.site-header{ background:color-mix(in srgb, var(--paper) 90%, transparent) !important; border-bottom:1px solid color-mix(in srgb, var(--deep) 10%, transparent) !important; backdrop-filter:saturate(1.1) blur(6px); }
.site-header .brand-logo{ height:48px; }
.site-header nav a{ color:var(--deep-2) !important; opacity:.85; font-weight:500; }
.site-header .header-cta,.header-cta{ background:var(--deep-2) !important; color:var(--paper) !important; border:none !important; border-radius:999px !important; font-weight:600; box-shadow:none !important; }

/* 4. HERO home — clair, serif, portrait traité */
.hero{ background:var(--paper) !important; min-height:auto !important; padding:76px 5% 56px !important; }
.hero::after{ display:none !important; }
.hero h1{ color:var(--deep) !important; font-size:clamp(2.6rem,4.6vw,4.1rem) !important; font-weight:400 !important; }
.hero h1 em{ color:var(--gold) !important; }
.hero p,.hero-content>p{ color:var(--deep) !important; font-size:1.12rem !important; line-height:1.75; max-width:32em; }
.hero-tag{ background:transparent !important; border:1px solid color-mix(in srgb, var(--deep) 18%, transparent) !important; color:var(--gold) !important; letter-spacing:.14em; border-radius:999px; }
.hero-trust span{ color:var(--muted-2) !important; }
.hero-portrait{ align-self:center !important; border-radius:20px 20px 20px 88px !important; box-shadow:0 30px 70px color-mix(in srgb, var(--deep) 16%, transparent) !important;
  background:linear-gradient(150deg,color-mix(in srgb, var(--abricot) 35%, var(--paper) 65%),color-mix(in srgb, var(--gold) 45%, var(--abricot) 55%)); }

/* 5. SECTIONS — TOUTES claires (fini les murs sombres), alternance douce */
.pain-section,.services-section,.contact-section,.steps-section,.apports-section,.faq-section,
.edu-section,.bio-section,.testimonials-section,.proof-section{ background:var(--paper) !important; padding:96px 5% !important; }
.edu-section,.apports-section,.faq-section{ background:var(--paper-2) !important; }
/* textes en foncé partout */
.pain-section h2,.services-section h2,.contact-section h2,.steps-section h2,.apports-section h2,.faq-section h2,
.edu-section h2,.bio-section h2,.testimonials-section h2,.proof-section h2,
.pain-card strong,.service-card h3,.step-card h3,.apports-limites h3,.faq-item h3,
.bio-content h2,.edu-quote,.testimonial-card strong{ color:var(--deep) !important; }
.section-intro,.service-card p,.step-card p,.apports-intro,.apports-peut li,.apports-limites p,
.faq-item p,.parcours-inclus li,.edu-section p,.bio-content p,.testimonials-section p,
.testimonials-section .section-intro,.testimonial-card p,.proof-card p,.pain-card,
.steps-inner > p{ color:var(--deep) !important; }
.edu-quote{ color:var(--gold) !important; border-left:2px solid var(--abricot) !important; font-family:"Righteous", Georgia, system-ui, serif !important; font-weight:400 !important; font-style:normal; }
.section-kicker,.page-kicker,.hero .section-kicker,.edu-section .section-kicker{ color:var(--gold) !important; letter-spacing:.16em; }

/* 6. CARTES — blanc chaud, ombre douce, grand rayon, aérées */
.pain-card,.service-card,.step-card,.apports-limites,.faq-item,.testimonial-card,.proof-card,
.internal-page .page-lead-card,.internal-page .page-highlight-card,.internal-page .page-feature-card,.internal-page .page-faq-item,.internal-page .page-motifs-head,.internal-page .page-checklist-row{
  background:var(--white) !important; border:1px solid color-mix(in srgb, var(--gold) 14%, transparent) !important; border-radius:22px !important;
  box-shadow:0 20px 48px color-mix(in srgb, var(--deep) 18%, transparent) !important; }
.testimonial-card{ text-align:left; }

/* 7. BOUTONS — Brandy profond, pill, élégant */
.btn-primary,.page-cta__btn{ background:var(--abricot) !important; color:var(--deep) !important; border:none !important;
  border-radius:999px !important; padding:16px 34px !important; font-weight:600 !important; box-shadow:0 10px 22px color-mix(in srgb, var(--abricot) 26%, transparent) !important; }
.hero-btns{ flex-direction:column !important; align-items:flex-start !important; gap:14px !important; }
/* Un SEUL trait sous le lien : main.css pose deja text-decoration:underline.
   Cumuler un border-bottom par-dessus donnait 2 traits (un noir colle au texte,
   un brun plus bas). On garde l'underline natif, teinte a la marque. */
.hero-link-sub{ color:var(--deep) !important; text-decoration:underline !important;
  text-decoration-color:var(--gold) !important; text-decoration-thickness:1px;
  text-underline-offset:5px; border-bottom:0 !important; padding-bottom:0 !important; }
.step-num,.service-number,.internal-page .page-feature-index{ background:var(--gold) !important; color:var(--paper) !important; }

/* 8. PAGES INTERNES — hero clair serif (fini le dégradé sombre) */
.internal-page .page-hero{ background:var(--paper-2) !important; padding:90px 24px 70px !important; }
.internal-page .page-hero::before{ display:none !important; }
.internal-page .page-hero h1{ color:var(--deep) !important; font-weight:400 !important; margin-left:auto !important; margin-right:auto !important; }
.internal-page .page-hero__lead{ color:var(--deep) !important; }
.internal-page .page-body,.internal-page .page-body p,.internal-page .page-lead-card p,
.internal-page .page-highlight-card p,.internal-page .page-feature-card p,.internal-page .page-faq-answer p{ color:var(--deep) !important; }
.internal-page .page-body h2,.internal-page .page-body h3,.internal-page .page-feature-card h3,
.internal-page .page-highlight-card h2,.internal-page .page-highlight-card h3,.internal-page .page-faq-item h3{ color:var(--deep) !important; }
.internal-page .page-cta{ background:var(--paper-2) !important; border:1px solid color-mix(in srgb, var(--gold) 14%, transparent) !important; }
.internal-page .page-cta p{ color:var(--deep) !important; }
.internal-page .page-pill{ background:color-mix(in srgb, var(--abricot) 14%, transparent) !important; color:var(--gold) !important; }

/* 9. PREUVE SOCIALE */
.proof-rating strong{ color:var(--gold) !important; }
.proof-card cite{ color:var(--gold) !important; }
.proof-disclaimer{ color:var(--muted-2) !important; }

/* 10. BLOG — titres foncés, images traitées warm */
.blog-section-label,.blog-archive-page h1,.blog-card h3,.blog-card-body h3,.blog-card h3 a{ color:var(--deep) !important; }
.blog-card,.internal-page .page-lead-card,.blog-card-body{ background:var(--white); }
.blog-card-body p{ color:var(--deep) !important; }
.blog-card-footer span{ color:var(--muted) !important; }
.blog-card-tag{ background:color-mix(in srgb, var(--abricot) 14%, transparent) !important; color:var(--gold) !important; }

/* 11. FOOTER — clair */
footer{ background:var(--deep) !important; color:color-mix(in srgb, var(--paper) 72%, transparent) !important; }
footer a,footer nav a{ color:var(--abricot) !important; }

/* 12. LOGO header */
.site-header .brand-logo{ height:48px; width:auto; display:block; }
@media(max-width:600px){ .site-header .brand-logo{ height:42px; } }

/* 13. Interaction élégante */
.btn-primary,.header-cta,.page-cta__btn,.service-card,.pain-card,.proof-card,.blog-card,.hero-portrait,.internal-page .page-lead-card,.internal-page .page-highlight-card,.internal-page .page-feature-card,.internal-page .page-faq-item,.internal-page .page-motifs-head,.internal-page .page-checklist-row{ transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease; }
.btn-primary:hover,.header-cta:hover,.page-cta__btn:hover{ transform:translateY(-2px); opacity:.95; }
.blog-card:hover,.service-card:hover,.internal-page .page-lead-card:hover,.internal-page .page-highlight-card:hover,.internal-page .page-feature-card:hover,.internal-page .page-faq-item:hover,.internal-page .page-motifs-head:hover,.internal-page .page-checklist-row:hover{ transform:translateY(-3px); box-shadow:0 22px 48px color-mix(in srgb, var(--deep) 12%, transparent) !important; }
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

/* 14. bio 2 colonnes conservée */
.bio-section .bio-grid{ display:grid !important; grid-template-columns:0.62fr 1fr; gap:48px; align-items:center; max-width:1040px !important; }
.bio-photo img{ width:100%; border-radius:20px 20px 20px 80px; box-shadow:0 24px 56px color-mix(in srgb, var(--deep) 16%, transparent); display:block; }
@media(max-width:760px){ .bio-section .bio-grid{ grid-template-columns:1fr !important; } .bio-photo{ max-width:320px; margin:0 auto; } }

/* 15. clearance header fixe */
.hero{ padding-top:132px !important; }
.internal-page .page-hero{ padding-top:120px !important; }

/* 16. Preuve sociale — layout (perdu au rewrite) */
.proof-section{ text-align:center; }
.proof-rating{ margin:0 auto 34px !important; font-size:1.02rem; color:var(--muted); }
.proof-grid{ display:grid !important; grid-template-columns:repeat(3,1fr); gap:22px; max-width:1040px; margin:0 auto; }
.proof-card{ padding:30px 26px !important; text-align:left; margin:0 !important; }
.proof-card p{ font-size:1.04rem; line-height:1.6; margin:0 0 14px; }
.proof-card cite{ display:block; margin-top:6px; font-style:normal; font-weight:700; font-size:.88rem; }
.proof-disclaimer{ max-width:680px; margin:34px auto 0 !important; font-size:.85rem; line-height:1.55; }
@media(max-width:760px){ .proof-grid{ grid-template-columns:1fr; } }

/* 17. Étoiles avis */
.proof-rating .stars,.hero-trust .stars{ color:var(--gold) !important; letter-spacing:2px; }
.proof-rating .stars{ font-size:1.15rem; }

/* 18. Head of Design — véto contraste (pa11y) : assombrir labels/disclaimer sur clair */
.section-kicker,.page-kicker,.hero-tag,.hero .section-kicker,.internal-page .page-kicker,
.edu-section .section-kicker,.steps-section .section-kicker,.apports-section .section-kicker,.faq-section .section-kicker{ color:var(--gold-dark) !important; }
.proof-disclaimer{ color:var(--muted) !important; }
.proof-rating{ color:var(--muted) !important; }
.hero-trust span{ color:var(--muted) !important; }
.cta-reassurance{ color:var(--muted) !important; opacity:1 !important; }
.faq-item p,.internal-page .page-faq-answer p{ color:var(--deep) !important; }
.blog-card-footer span{ color:var(--muted) !important; }

/* 19. FAQ accordéon */
.faq-acc h3{ cursor:pointer; position:relative; padding-right:36px; }
.faq-acc h3::after{ content:"+"; position:absolute; right:6px; top:2px; color:var(--gold); font-size:1.5rem; font-family:"Noto Sans",sans-serif; line-height:1; transition:transform .2s ease; }
.faq-acc:not(.faq-closed) h3::after{ content:"–"; }
.faq-acc .page-faq-answer,.faq-item.faq-acc>p{ overflow:hidden; max-height:800px; opacity:1; transition:max-height .35s ease, opacity .25s ease, margin .3s ease, padding .3s ease; }
.faq-acc.faq-closed .page-faq-answer,.faq-item.faq-acc.faq-closed>p{ max-height:0 !important; opacity:0; margin-top:0 !important; margin-bottom:0 !important; padding-top:0 !important; padding-bottom:0 !important; border-top:0 !important; }

/* 20. Head of Design — hiérarchie CTA + pavés resserrés */
/* Secondaire = boutons qui ne mènent PAS à la prise de RDV (navigation interne) */
.btn-primary:not([href*="rdv.missioncap"]),.page-cta__btn:not([href*="rdv.missioncap"]){
  background:transparent !important; color:var(--gold) !important; border:1.5px solid var(--gold) !important; box-shadow:none !important; }
.btn-primary:not([href*="rdv.missioncap"]):hover,.page-cta__btn:not([href*="rdv.missioncap"]):hover{
  background:color-mix(in srgb, var(--gold) 7%, transparent) !important; transform:translateY(-2px); }
/* mesure de ligne + accroche sur les longs pavés */
.edu-inner{ max-width:780px; margin-inline:auto; }
.edu-inner p,.bio-content p{ max-width:64ch; }
.edu-inner p:first-of-type,.bio-content p:first-of-type{ font-size:1.13rem; color:var(--deep) !important; }

/* 21. Head of Design v3 — nav mobile (bug) + finitions */
/* Hero em plus riche (lisibilité) */
.hero h1 em{ color:var(--gold-dark) !important; font-weight:400 !important; }
/* Grille étapes : hauteurs égales */
.steps-grid{ align-items:stretch !important; }
.step-card{ display:flex !important; flex-direction:column; height:100%; padding-bottom:26px; }
/* Contact : submit = primaire, textarea propre */
.contact-form textarea{ resize:vertical; }
.contact-form button[type=submit],.contact-form button:not([href]){ background:var(--abricot) !important; color:var(--deep) !important; border:none !important; }
/* Mini-bande preuve avant le formulaire */
.proof-mini{ background:var(--paper-2); padding:60px 5%; text-align:center; }
.proof-mini .pm-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:1180px; margin:0 auto; }
.proof-mini blockquote{ background:var(--white); border:1px solid color-mix(in srgb, var(--gold) 12%, transparent); border-radius:18px; padding:26px; margin:0; text-align:left; box-shadow:0 12px 30px color-mix(in srgb, var(--deep) 6%, transparent); }
.proof-mini blockquote p{ color:var(--deep); margin:0 0 12px; font-size:1.02rem; }
.proof-mini cite{ color:var(--gold); font-weight:700; font-style:normal; font-size:.85rem; }
.proof-mini .stars{ color:var(--gold) !important; letter-spacing:2px; }
@media(max-width:900px){ .proof-mini .pm-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .proof-mini .pm-grid{ grid-template-columns:1fr; } }
/* NAV MOBILE (le JS bascule .active) — seuil aligné sur mb-editorial.css (980px, nav desktop cachée) : 860px laissait un trou 861-980px où ni le menu desktop ni le bouton burger n'étaient visibles (piège vécu, signalé par Michael 2026-08-06) */
@media(max-width:982px){
  .site-header nav[aria-label="Navigation principale"]{ display:none !important; }
  .site-header .header-cta{ display:none !important; }
  .mobile-menu-toggle{ display:flex !important; flex-direction:column; gap:5px; width:44px; height:44px; align-items:center; justify-content:center; background:transparent; border:none; cursor:pointer; }
  .mobile-menu-toggle span{ display:block; width:24px; height:2px; background:var(--deep); border-radius:2px; transition:.25s; }
  .mobile-menu-toggle.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .mobile-menu-toggle.active span:nth-child(2){ opacity:0; }
  .mobile-menu-toggle.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .mobile-menu{ display:none; position:fixed; inset:0; background:var(--paper); z-index:999; flex-direction:column; align-items:center; justify-content:center; gap:24px; font-size:1.35rem; }
  /* main.css cache .mobile-menu par défaut via opacity/visibility/pointer-events/transform (pas juste display), gated à 768px seulement -> réaffirmer tout ici pour couvrir jusqu'à 982px */
  .mobile-menu.active{ display:flex !important; opacity:1 !important; visibility:visible !important; pointer-events:auto !important; transform:translateY(0) !important; }
  .mobile-menu a{ color:var(--deep) !important; text-decoration:none; font-family:"Noto Sans",sans-serif; }
  .mobile-menu .mobile-menu-cta{ background:var(--abricot) !important; color:var(--deep) !important; padding:14px 32px; border-radius:999px; font-family:"Noto Sans",sans-serif; font-size:1rem; }
}

/* 22. NAV mobile — drawer opaque plein (override spécificité main.css) */
@media(max-width:982px){
  body.menu-open{ overflow:hidden; }
  .site-header .mobile-menu{ position:fixed !important; top:0 !important; left:0 !important; right:0 !important; bottom:0 !important;
    width:100vw !important; height:100dvh !important; background:var(--paper) !important; z-index:9999 !important;
    display:none; flex-direction:column !important; align-items:center !important; justify-content:center !important;
    gap:20px !important; padding:70px 20px !important; margin:0 !important; transform:none !important; opacity:1 !important; }
  .site-header .mobile-menu.active{ display:flex !important; }
  .site-header .mobile-menu a{ color:var(--deep) !important; text-decoration:none !important; font-family:"Noto Sans",sans-serif !important; font-size:1.5rem !important; opacity:1 !important; padding:4px 0 !important; }
  .site-header .mobile-menu .mobile-menu-cta{ background:var(--abricot) !important; color:var(--deep) !important; padding:14px 34px !important; border-radius:999px !important; font-family:"Noto Sans",sans-serif !important; font-size:1.05rem !important; margin-top:10px !important; }
  .mobile-menu-toggle{ z-index:10000 !important; position:relative; }
}

/* 23. Conversion unifiée — agenda embarqué + badge Google hero */
.booking-embed{ max-width:920px; margin:26px auto 0; border-radius:20px; overflow:hidden; box-shadow:0 20px 50px color-mix(in srgb, var(--deep) 12%, transparent); background:var(--white); border:1px solid color-mix(in srgb, var(--gold) 10%, transparent); }
.booking-embed iframe{ width:100%; height:740px; border:0; display:block; }
.contact-fallback{ text-align:center; color:var(--muted); margin-top:22px; font-size:.95rem; }
.contact-fallback a{ color:var(--gold); font-weight:600; }
.hero-trust span:last-child{ font-weight:700; color:var(--deep) !important; }
.hero-trust span:last-child .stars{ color:var(--gold) !important; }

/* 24. MÉGA-MENU Séances + disclaimer + highlight eyebrow (bb21) */
.site-header nav[aria-label="Navigation principale"]{ position:relative; }
.nav-dropdown{ position:relative; display:inline-flex; align-items:center; }
.nav-dropdown__toggle{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0; display:inline-flex; align-items:center; gap:7px; letter-spacing:inherit; }
.nav-dropdown__toggle .nav-caret{ width:7px; height:7px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform .25s ease; opacity:.75; }
.nav-dropdown__panel{ position:absolute; top:calc(100% + 18px); left:50%; transform:translateX(-50%) translateY(6px); display:grid; grid-template-columns:1fr 1fr; gap:26px 40px; min-width:480px; padding:26px 30px; background:var(--paper-2); border:1px solid color-mix(in srgb, var(--gold) 14%, transparent); border-radius:18px; box-shadow:0 26px 64px -26px color-mix(in srgb, var(--deep) 42%, transparent); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .22s ease, transform .22s ease, visibility .22s; z-index:60; }
.nav-dropdown:hover .nav-dropdown__panel,
.nav-dropdown:focus-within .nav-dropdown__panel,
.nav-dropdown.open .nav-dropdown__panel,
.nav-dropdown__toggle[aria-expanded="true"] + .nav-dropdown__panel{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.nav-dropdown:hover .nav-caret,
.nav-dropdown.open .nav-caret,
.nav-dropdown:focus-within .nav-caret{ transform:rotate(-135deg) translateY(0); }
.nav-dropdown__panel::before{ content:""; position:absolute; top:-9px; left:50%; transform:translateX(-50%) rotate(45deg); width:16px; height:16px; background:var(--paper-2); border-left:1px solid color-mix(in srgb, var(--gold) 14%, transparent); border-top:1px solid color-mix(in srgb, var(--gold) 14%, transparent); }
.nav-dropdown__col{ display:flex; flex-direction:column; gap:2px; }
.nav-dropdown__label{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-dark); font-weight:700; margin-bottom:10px; }
.nav-dropdown__panel a{ color:var(--deep) !important; text-decoration:none; font-size:.95rem; padding:7px 0; border-bottom:1px solid color-mix(in srgb, var(--gold) 7%, transparent); transition:color .15s ease, padding-left .15s ease; white-space:nowrap; }
.nav-dropdown__panel a:last-child{ border-bottom:0; }
.nav-dropdown__panel a:hover{ color:var(--gold) !important; padding-left:6px; }
.mobile-menu__label{ display:block; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); font-weight:700; margin:16px 0 4px; opacity:.85; }
/* disclaimer par page motif */
.page-disclaimer{ max-width:760px; margin:40px auto 8px; padding:18px 22px; background:color-mix(in srgb, var(--abricot) 8%, transparent); border-left:3px solid var(--gold); border-radius:0 12px 12px 0; }
.page-disclaimer p{ margin:0; font-size:.9rem; line-height:1.6; color:var(--muted); }
.page-highlight-eyebrow{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-dark); font-weight:700; margin:0 0 10px; }
@media(max-width:900px){ .nav-dropdown__panel{ min-width:0; grid-template-columns:1fr; gap:18px; } }

/* 25. FAQ — cartes crème chaud + colonne resserrée (fin du trou blanc) */
.internal-page .page-faq-list{ max-width:820px; margin-left:auto; margin-right:auto; display:flex; flex-direction:column; gap:14px; }
.internal-page .page-faq-item{ background:var(--white) !important; padding:2px 28px !important; }
.internal-page .page-faq-item h3{ padding:22px 0; margin:0; font-size:1.22rem; }
.internal-page .faq-acc.faq-closed .page-faq-item h3{ padding:20px 0; }

/* 26. FIX bouton Séances — même couleur/poids que les liens nav (n hérite pas via <a>) */
.site-header nav .nav-dropdown__toggle{ color:var(--deep-2) !important; font-weight:500 !important; }
.site-header.scrolled nav .nav-dropdown__toggle{ color:var(--deep-2) !important; }
.nav-dropdown__toggle:hover{ color:var(--gold) !important; }

/* 27. CTA dérisqué mi-page (CHARBON bloc 6 — relance au palier témoignages) */
.mid-cta{ text-align:center; padding:clamp(48px,7vw,84px) 6%; }
.mid-cta .container{ max-width:660px; margin-left:auto; margin-right:auto; }
.mid-cta__title{ margin:0 0 26px; }
.cta-reassurance{ margin-top:14px; }

/* 28. FIX portrait page-visual-card — borné et centré (n était pas contraint → billboard pleine largeur) */
.internal-page .page-visual-card{ max-width:440px !important; margin-left:0 !important; margin-right:auto !important; aspect-ratio:1/1 !important; border-radius:20px 20px 20px 70px !important; }


/* 30. FIX bandes CTA + FAQ home — contenu centré au lieu de collé-à-gauche (display:grid packait à gauche) */
.internal-page .page-cta{ display:flex !important; flex-direction:column; align-items:center; justify-content:center; gap:18px; text-align:center; padding:2.75rem 2rem !important; }
.internal-page .page-cta p{ margin:0 !important; max-width:36ch; }
.internal-page .page-cta .page-cta__btn{ margin:0 !important; }
/* FAQ home : cartes crème chaud (cohérence avec /faq/) */
.faq-section .faq-item{ background:var(--white) !important; border:1px solid color-mix(in srgb, var(--gold) 10%, transparent) !important; }

/* 31. grille situations pages motifs — 2x2 équilibré (4 cartes, plus d orphelin à gauche) */
.internal-page .page-grid--motif2{ grid-template-columns:repeat(2,1fr) !important; max-width:900px; margin-left:auto !important; margin-right:auto !important; }
@media(max-width:640px){ .internal-page .page-grid--motif2{ grid-template-columns:1fr !important; } }

/* 32. cohérence blog-card (était blanc pur vs var(--white) partout) */
.blog-card{ background:var(--white) !important; }

/* 33. FIX viewport tablette (~800-1024px) : pills qui ballonnent + grilles 3-col en pavés */
/* pills : ne jamais étirer les lignes/items sur la hauteur de la colonne */
.internal-page .page-pill-list{ align-content:center !important; align-items:flex-start !important; }
.internal-page .page-pill{ flex:0 0 auto !important; height:auto !important; }
/* lead-grid : 1 colonne dès la tablette (pills passent sous le texte) */
@media(max-width:1024px){ .internal-page .page-lead-grid{ grid-template-columns:1fr !important; } }
/* grilles 3-col : casser AVANT 768 (sinon colonnes étriquées = pavés) */
@media(max-width:1024px){
  .internal-page .page-grid--three{ grid-template-columns:repeat(2,1fr) !important; }
}
@media(max-width:640px){
  .internal-page .page-grid--three,
  .internal-page .page-grid--motif2{ grid-template-columns:1fr !important; }
}

/* 34. grilles home à 3 cartes : 1 colonne sous 900px (auto-fit faisait 2 col = orphelin) */
@media(max-width:900px){
  .services-grid, .testimonials-grid{ grid-template-columns:1fr !important; max-width:560px; margin-left:auto; margin-right:auto; }
}

/* 35. apports-limites en liste parallèle (était un pavé de 98 mots) */
.apports-limites-list{ list-style:none; margin:0; padding:0; }
.apports-limites-list li{ position:relative; padding:0 0 14px 26px; line-height:1.6; color:var(--deep); font-size:.95rem; }
.apports-limites-list li:last-child{ padding-bottom:0; }
.apports-limites-list li::before{ content:"—"; position:absolute; left:0; top:0; color:var(--gold); font-weight:700; }


/* 36. BLOG archive — header centré (fini le bloc droit vide) + grille flex centrée (trailing centré) */
.internal-page .blog-archive-head{ text-align:center; max-width:760px; margin:0 auto 8px; }
.internal-page .blog-archive-head .page-kicker{ justify-content:center; }
.internal-page .blog-archive-intro{ font-size:1.05rem; line-height:1.7; color:var(--deep); max-width:58ch; margin:18px auto 24px; }
.internal-page .blog-archive-head .page-pill-list{ justify-content:center; margin-top:0; }
.internal-page .blog-archive-page .blog-grid{ display:flex !important; flex-wrap:wrap; justify-content:center; gap:22px; }
.internal-page .blog-archive-page .blog-card{ flex:0 1 calc((100% - 44px) / 3); min-width:280px; }
@media(max-width:900px){ .internal-page .blog-archive-page .blog-card{ flex-basis:calc((100% - 22px) / 2); } }
@media(max-width:600px){ .internal-page .blog-archive-page .blog-card{ flex-basis:100%; } }

/* 37. BLOG head — dégager le header fixe (titre coupé) + h1 cadré */
.internal-page .blog-archive-head{ padding-top:132px; }
.internal-page .blog-archive-head h1{ font-size:clamp(2.3rem,4.6vw,3.3rem); line-height:1.08; margin:0 0 6px; }
@media(max-width:700px){ .internal-page .blog-archive-head{ padding-top:112px; } }

/* 38. BLOG — contenir la page (ne plus prendre toute la largeur écran) */
.internal-page .blog-archive-page{ max-width:1160px; margin-left:auto; margin-right:auto; padding:60px clamp(20px,5vw,40px) 90px; box-sizing:border-box; }

/* 39. PAGES ARTICLES — remettre la charte (le navy du template restait car <body> sans .internal-page) */
/* les vars globales (:root) sont déjà la charte actuelle — plus besoin de reset scopé ici (ancien reset créait une référence circulaire --deep:var(--deep)) */
/* 39b. le header fixe (94px) chevauchait le H1 (padding inline 5rem insuffisant) */
.editorial-article .article-hero{ background:var(--deep) !important; padding-top:calc(94px + 2.5rem) !important; }
@media(max-width:600px){ .editorial-article .article-hero{ padding-top:calc(94px + 1.5rem) !important; } }
.editorial-article .article-hero .section-kicker{ color:var(--abricot) !important; }
.editorial-article .article-hero h1{ color:var(--paper) !important; }
.editorial-article .article-hero > p{ color:color-mix(in srgb, var(--paper) 55%, transparent) !important; }
.editorial-article h2, .editorial-article h3{ color:var(--deep) !important; }
/* 39c. couleurs résiduelles du template (bleu-gris var(--deep)/var(--deep)/var(--deep), navy rgba(31,46,74,…)) codées en dur par page → charte */
.editorial-article .article-content{ color:var(--deep) !important; }
.editorial-article .article-body > div[style*="border-top"]{ border-top-color:var(--line) !important; }
.editorial-article .article-body > div[style*="border-top"] p{ color:var(--muted) !important; }
.editorial-article .article-body a[style*="border-radius:2px"]{ border-radius:999px !important; }
.editorial-article a:not(.btn-primary):not(.page-cta__btn){ color:var(--gold); }


/* 40. Menu mobile — Séances en accordéon replié (évite la liste à rallonge) */
.mobile-acc{ display:flex; flex-direction:column; align-items:center; }
.site-header .mobile-menu .mobile-acc__toggle{ color:var(--deep); background:none; border:0; cursor:pointer; font-family:"Noto Sans",sans-serif; font-size:1.5rem; text-transform:uppercase; letter-spacing:.02em; display:inline-flex; align-items:center; gap:10px; padding:4px 0; }
.mobile-acc__caret{ width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform .25s ease; opacity:.65; }
.mobile-acc__toggle[aria-expanded="true"] .mobile-acc__caret{ transform:rotate(-135deg); }
.mobile-acc__panel{ display:flex; flex-direction:column; align-items:center; gap:12px; max-height:0; overflow:hidden; opacity:0; transition:max-height .32s ease, opacity .25s ease, margin-top .25s ease; }
.mobile-acc__toggle[aria-expanded="true"] + .mobile-acc__panel{ max-height:72vh; overflow-y:auto; opacity:1; margin-top:14px; }
.site-header .mobile-menu .mobile-acc__panel a{ font-size:1.02rem !important; text-transform:none !important; color:var(--deep) !important; padding:2px 0 !important; }
.mobile-acc__panel .mobile-menu__label{ margin-top:8px; }


/* 41. FEEDBACK CLIENT (mobile) : double-souligné menu + padding FAQ + switch réservation */
@media(max-width:982px){
  /* liens menu mobile : retirer le double trait (border-bottom main.css + border-top mb-editorial) */
  .site-header .mobile-menu a{ border:0 !important; }
}
@media(max-width:860px){
  /* FAQ : bulles plus aérées sur mobile */
  .internal-page .page-faq-item{ padding:6px 22px !important; }
  .internal-page .page-faq-item h3{ padding:20px 0 !important; }
  .faq-section .faq-item{ padding:20px 22px !important; }
}
/* Sélecteur de réservation (découverte / séance) */
.booking-switch{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; max-width:660px; margin:0 auto 20px; }
.booking-switch__btn{ font-family:"Noto Sans",sans-serif; font-size:.92rem; font-weight:600; color:var(--muted); background:var(--paper-2); border:1px solid color-mix(in srgb, var(--gold) 16%, transparent); border-radius:999px; padding:11px 22px; cursor:pointer; transition:background .2s, color .2s, border-color .2s; }
.booking-switch__btn:hover{ border-color:var(--gold); }
.booking-switch__btn.is-active{ background:var(--abricot); color:var(--deep); border-color:var(--abricot); }

/* 42. FAQ home — padding horizontal (les cartes .faq-item avaient 0px → texte collé au bord) */
.faq-section .faq-item{ padding:18px 28px !important; }
@media(max-width:860px){ .faq-section .faq-item{ padding:16px 20px !important; } }

/* 50. FEEDBACK Michael (2026-08-06) : FAQ home moins aérée que les pages internes (page-faq-list, gap:14px) -> même espacement entre cartes ici */
.faq-section .faq-item{ margin-bottom:14px !important; }
.faq-section .faq-item:last-child{ margin-bottom:0 !important; }

/* 43. Galerie "En séance" — vrais photos GMB, grille bento (effet Anne-Laure) */
.gallery-mini{ padding:clamp(56px,7vw,90px) 5%; text-align:center; }
.gallery-mini h2{ margin:0 0 12px; }
.gallery-mini .section-intro{ max-width:640px; margin:0 auto 40px; }
.gallery-mini-grid{ display:grid; grid-template-columns:2fr 1fr 1fr; grid-template-rows:220px 220px; gap:8px; max-width:1180px; margin:0 auto; text-align:left; }
.gallery-mini-grid figure{ margin:0; overflow:hidden; }
.gallery-mini-grid img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.5s ease; }
.gallery-mini-grid figure:hover img{ transform:scale(1.05); }
.gallery-mini-grid figure.is-big{ grid-row:span 2; }
@media(max-width:900px){ .gallery-mini-grid{ grid-template-columns:1fr 1fr; grid-template-rows:180px 180px 180px; } .gallery-mini-grid figure.is-big{ grid-row:span 1; grid-column:span 2; } }
@media(max-width:600px){ .gallery-mini-grid{ grid-template-columns:1fr 1fr; grid-template-rows:150px 150px 150px; } }
/* 44. Colonne pill-list qui "flottait" seule dans le vide → ajout d'une vraie photo au-dessus (mur de pills solidarisé à un visuel) */
.internal-page .page-lead-visual{ display:flex; flex-direction:column; gap:16px; }
.internal-page .page-lead-grid > .page-lead-visual{ height:100%; }
.internal-page .page-lead-card .page-lead-visual{ height:auto; }
/* Encart photo : le cadre suit le format natif des photos (16:9) au lieu d'etre
   plafonne a 420px, qui rognait haut et bas (retour Michael 14/08 : « agrandir
   un peu cet encart pour que la photo soit correctement affichee »). */
.internal-page .page-lead-visual img{ width:100%; flex:0 0 auto; aspect-ratio:16/9; height:auto; min-height:0; max-height:none; object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow); }
.internal-page .page-lead-visual .page-pill-list{ flex:none; }
@media(max-width:1024px){ .internal-page .page-lead-visual{ height:auto; } }
/* 45. Section "motifs/situations fréquentes" — démarrait à froid (titre puis direct 6 cartes, aucune respiration) → ajout d'un visuel compagnon */
.internal-page .page-motifs-head{ display:flex; flex-direction:column-reverse; align-items:stretch; gap:20px; margin:36px 0 28px; padding:26px 28px; }
.internal-page .page-motifs-head__text h2{ margin-top:0 !important; margin-bottom:0 !important; }
.internal-page .page-motifs-head__text{ flex:none; min-width:0; }
/* Bandeau : hauteur remontee a 400px, la photo du cabinet est verticale (790x1400)
   et n'affichait qu'une tranche. Une photo horizontale resterait le vrai fix. */
.internal-page .page-motifs-head img{ width:100%; height:400px; object-fit:cover; object-position:center 35%; border-radius:var(--radius); box-shadow:var(--shadow); }
@media(max-width:760px){ .internal-page .page-motifs-head img{ height:260px; } }

/* 46. Transition bio-section → galerie photos : même fond crème des deux côtés → 96px+padding-top s'additionnaient (~177px) en un vide sans repère visuel */
.bio-section + .gallery-mini{ padding-top:24px !important; }
.bio-section{ padding-bottom:40px !important; }

/* 47. Carte "Approche de bien-être" étirée par la grille (align-items:stretch par défaut) à côté d'une carte photo bien plus haute → cadre vide géant sous le texte */
.internal-page .page-lead-grid > .page-highlight-card{ align-self:center !important; }

/* 48. "Comment je vous accompagne" — liste à puces (pleine largeur) puis portrait (largeur fixe) empilés dessous → sur écran large, le portrait flotte seul dans un immense vide. Mis côte à côte. */
.internal-page .page-checklist-row{ display:flex; align-items:center; gap:40px; margin:36px 0; padding:26px 28px; }
.internal-page .page-checklist-row .page-checklist{ flex:1 1 auto; margin:0; min-width:0; }
.internal-page .page-checklist-row > p{ flex:1 1 auto; margin:0; min-width:0; }
.internal-page .page-checklist-row .page-visual-card{ flex:0 0 340px; width:340px; max-width:340px; margin:0 !important; }
@media(max-width:900px){ .internal-page .page-checklist-row{ flex-direction:column; align-items:stretch; gap:18px; } .internal-page .page-checklist-row .page-visual-card{ flex:none; width:100%; max-width:100%; } }

/* 49. FEEDBACK Michael (2026-08-06) : page-highlight-card à côté de page-lead-card faisait bizarre sur PC -> toujours en dessous, plus jamais côte à côte (même comportement qu'en mobile, étendu au desktop) */
.internal-page .page-lead-grid{ grid-template-columns:1fr !important; }
.internal-page .page-lead-grid .page-highlight-card{ align-self:stretch !important; }

/* 51. A11y — bug préexistant trouvé par audit Lighthouse (2026-08-06) : main.css ".internal-page .page-cta__btn" (specificité 2 classes) imposait un texte blanc sur fond Abricot -> contraste 2.67:1 (minimum requis 4.5:1). Réaffirmer avec une spécificité au moins égale. */
.internal-page .page-cta__btn{ color:var(--deep) !important; }


/* 52. HERO — ligne de reassurance : les 4 garanties ont des largeurs tres
   inegales (292/320/269/252px) ; en flex-wrap sur 600px elles tombaient en
   1 + 1 + 2, ce qui donnait un bloc desordonne. Une colonne = alignement net. */
.hero-trust{ flex-direction:column !important; align-items:flex-start !important; gap:9px !important; }
.hero-trust span{ white-space:normal; }

/* 53. FAQ — le titre reste un titre, le bouton porte l'interaction. */
.faq-toggle{
  all: unset;
  display: block;
  width: 100%;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: inherit;
}
.faq-toggle:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}