/* =====================================================================
   Buzzle UI : référentiel moderne commun (DA page Kit Google Ads IA)
   Chargé en DERNIER sur toutes les pages, après schemata.css / site.css.
   Objectif : sortir de l'esthétique Schemata (beige, mono, angles vifs).
   ===================================================================== */

/* ---------- 1. Palette moderne : gris froids au lieu du beige ---------- */
:root{
  --color-paper:#f4f5f9;
  --color-sheet:#ffffff;
  --color-surface-sunken:#eceef4;
  --color-hairline:#e4e6ef;
  --color-graphite:#565b6b;
  --bui-shadow-card:0 12px 32px -22px rgba(20,20,28,.22);
  --bui-shadow-hover:0 18px 38px -22px rgba(20,20,28,.32);
  --bui-check:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%235b4bff%27 stroke-width=%273.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M5 12.5l4.5 4.5L19 7%27/%3E%3C/svg%3E");
  --bui-check-light:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23c9c2ff%27 stroke-width=%273.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M5 12.5l4.5 4.5L19 7%27/%3E%3C/svg%3E");
}
/* beiges codés en dur (sections, maquettes CRM, blog) */
.bx-wallsec,.bx-finalcta-sec,.bx-related,main.bx-hub,.step-section--paper,.crm-screen,.crm-screen__main{background:var(--color-paper)!important;}
.rdv-modal__details{background:var(--color-paper)!important;}
.crm-pill-status--cancelled{background:var(--color-surface-sunken)!important;}
.crm-table__view,.crm-call-row,.crm-table-wrap,.rdv-modal__close,.tier--local{border-color:var(--color-hairline)!important;}
.bx-body th,main th{background:var(--color-paper)!important;font-family:var(--font-sans)!important;text-transform:none!important;letter-spacing:0!important;}
.bx-crumb,.bx-crumb a,.foot-strip__left,.foot-strip__left *,.foot-strip a{font-family:var(--font-sans)!important;text-transform:none!important;letter-spacing:0!important;}

/* ---------- 2. Heros : H1 + description, échelle unique ---------- */
.hero__title,.ga-hero__title,.contact__title,.bx-hh h1,.bx-arthead h1{
  font-family:var(--font-display)!important;
  font-size:clamp(38px,5vw,62px)!important;
  font-weight:700!important;
  letter-spacing:-0.03em!important;
  line-height:1.02!important;
}
.hero__sub,.ga-hero__sub,.contact__lede,.bx-hh__sub,.bx-dek{
  font-family:var(--font-sans)!important;
  font-size:clamp(16px,1.4vw,18px)!important;
  font-weight:400!important;
  line-height:1.6!important;
}

/* ---------- 3. Boutons : plus grands, arrondis, sans mono ---------- */
.btn{border-radius:10px;font-weight:600;letter-spacing:-0.005em;transition:background .2s ease,border-color .2s ease,transform .15s ease,box-shadow .2s ease;}
main .btn,.rdv-modal .btn,.bx-finalcta .btn{height:auto;min-height:44px;padding:11px 20px;font-size:15px;line-height:1.2;}
.hero .btn,.ctaband .btn,.ga-offer .btn,.bx-finalcta .btn{min-height:48px;padding:13px 24px;font-size:15.5px;}
.btn--sm{min-height:34px!important;padding:7px 14px!important;font-size:13.5px!important;}
.btn--mono{font-family:var(--font-sans)!important;text-transform:none!important;letter-spacing:-0.005em!important;font-size:15px!important;}
.btn--accent{box-shadow:0 8px 20px -10px rgba(91,75,255,.6);}
.btn--accent:hover{transform:translateY(-1px);box-shadow:0 12px 26px -12px rgba(91,75,255,.7);}
.btn--ghost{--btn-border:var(--color-hairline);}
.hero .btn--ghost,.ctaband .btn--ghost,.ga-offer .btn--ghost,.sec--ink .btn--ghost,.step-section--dark .btn--ghost{
  --btn-bg:rgba(255,255,255,.06);--btn-fg:#fff;--btn-border:rgba(255,255,255,.22);
}
.hero .btn--ghost:hover,.ctaband .btn--ghost:hover,.ga-offer .btn--ghost:hover,.sec--ink .btn--ghost:hover,.step-section--dark .btn--ghost:hover{
  --btn-bg:rgba(255,255,255,.12);--btn-border:rgba(255,255,255,.36);
}

/* ---------- 4. Libellés : fin du mono majuscule ---------- */
.hero__eyebrow,.feat__eyebrow,.ga-kicker,.ga-logos__label,.rdv-points-label,.tier__listlabel,
.bx-eyebrow,.bx-finalcta__eyebrow,.bx-ctacard__k,.bx-related__k,.bx-toc__label,.bx-keybox__label{
  font-family:var(--font-sans)!important;text-transform:none!important;letter-spacing:0!important;
  font-size:13.5px!important;font-weight:600!important;
}
.tier__from,.tier__noeng,.bx-feat__cat,.bx-tile__cat,.bx-chip,.bx-card__cat{
  font-family:var(--font-sans)!important;text-transform:none!important;letter-spacing:0!important;
  font-size:12.5px!important;font-weight:600!important;
}
.hero__eyebrow{padding:6px 14px!important;}
.field__label{font-family:var(--font-sans)!important;text-transform:none!important;letter-spacing:0!important;font-size:14px!important;font-weight:500!important;color:var(--color-ink)!important;}
.form-card__privacy{font-family:var(--font-sans)!important;text-transform:none!important;letter-spacing:0!important;font-size:13px!important;}

/* ---------- 5. Numéros d'étape : display + dégradé violet ---------- */
.step__num-big,.ga-step__num{
  font-family:var(--font-display)!important;font-weight:700!important;letter-spacing:-0.045em!important;
  background-image:linear-gradient(135deg,#8a7dff 0%,#5b4bff 55%,#3b2bd9 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;
}
.step-section--dark .step__num-big{background-image:linear-gradient(135deg,#e2ddff 0%,#a89dff 60%,#7b6dff 100%);}

/* ---------- 6. Puces : coches violettes (comme le kit) ---------- */
.step__list li,.crm-preview__list li{align-items:flex-start!important;}
.step__list li::before,.crm-preview__list li::before{
  width:18px!important;height:18px!important;border-radius:50%!important;margin-top:2px!important;flex:0 0 18px!important;
  background:var(--color-accent-soft) var(--bui-check) center/11px 11px no-repeat!important;
}
.step-section--dark .step__list li::before,.crm-preview__list li::before{
  background:rgba(168,157,255,.16) var(--bui-check-light) center/11px 11px no-repeat!important;
}

/* ---------- 7. Cartes : coins doux, bordure froide, ombre légère ---------- */
.related a,.ga-card,.ga-exp__item,.ga-step,.hw-card__frame{border-color:var(--color-hairline)!important;box-shadow:var(--bui-shadow-card);}
.related a{border-radius:16px;}
.related a:hover{box-shadow:var(--bui-shadow-hover);}
.ga-faq__item{border-color:var(--color-hairline)!important;}

/* ---------- 8. Formulaires ---------- */
.form-card{border-radius:18px!important;border-color:var(--color-hairline)!important;box-shadow:var(--bui-shadow-card);}
.input,.form-card input,.form-card select,.form-card textarea{border-radius:10px!important;border-color:var(--color-hairline)!important;}
.input:focus,.form-card input:focus,.form-card select:focus,.form-card textarea:focus{border-color:var(--color-accent)!important;box-shadow:0 0 0 3px rgba(91,75,255,.14)!important;outline:none!important;}

/* ---------- 9. Popup prise de rendez-vous ---------- */
.rdv-modal__dialog{border-radius:20px!important;overflow:hidden;box-shadow:0 40px 90px -30px rgba(10,10,20,.55)!important;}
.rdv-modal__overlay{background:rgba(10,10,16,.55)!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.rdv-meta__chip{border-color:var(--color-hairline)!important;background:#fff!important;border-radius:999px!important;}
.rdv-points-label{color:var(--color-text-muted)!important;margin-top:4px;}

/* ---------- 10. Panier (header + tiroir) ---------- */
/* Desktop : le panier reprend le bouton CRM (.nav-crm-btn) : carré blanc, survol = [icône] Panier */
.nav-crm-btn.is-cart{appearance:none;border:0;padding:0;font:inherit;}
.nav-crm-btn.is-cart:hover{width:106px;}
html[lang^="en"] .nav-crm-btn.is-cart:hover{width:88px;}
.nav-crm-btn.is-cart:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;}
.nav-crm-btn.is-cart .nav-crm-btn__ic{position:relative;}
.nav-crm-btn.is-cart .nav-crm-btn__ic svg{stroke:currentColor;color:var(--color-ink);}
.site-nav.site-nav--solid .nav-crm-btn.is-cart .nav-crm-btn__ic svg{color:#fff;}
.nav-cart-btn__n{position:absolute;top:2px;right:0;min-width:15px;height:15px;padding:0 4px;border-radius:999px;background:var(--color-accent);color:#fff;font:700 9.5px/15px var(--font-sans);text-align:center;box-shadow:0 0 0 2px #fff;}
.site-nav.site-nav--solid .nav-cart-btn__n{box-shadow:0 0 0 2px var(--color-ink);}
.nav-cart-btn__n[hidden]{display:none!important;}
/* Mobile : même bouton (carré blanc, noir quand le header est blanc) à côté du burger */
.nav-cart-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;border-radius:8px;border:0;padding:0;cursor:pointer;background:#fff;color:var(--color-ink);box-shadow:0 1px 2px 0 rgba(0,0,0,.08);transition:background .2s ease,color .2s ease;}
.nav-cart-btn:active{transform:translateY(1px);}
.nav-cart-btn:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;}
.nav-cart-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.site-nav.site-nav--solid .nav-cart-btn{background:var(--color-ink);color:#fff;}
.nav-cart-btn .nav-cart-btn__n{top:-6px;right:-6px;min-width:18px;height:18px;font-size:11px;line-height:18px;padding:0 5px;box-shadow:0 0 0 2px #14141c;}
.site-nav.site-nav--solid .nav-cart-btn .nav-cart-btn__n{box-shadow:0 0 0 2px #fff;}
body:has(#mobile-menu.is-open) .nav-cart-btn{background:#fff!important;color:var(--color-ink)!important;}
@media(min-width:700px){.nav-cart-btn--m{display:none!important;}}

.bcart{position:fixed;inset:0;z-index:1000;display:flex;justify-content:flex-end;}
.bcart[hidden]{display:none!important;}
.bcart__ov{position:absolute;inset:0;background:rgba(10,10,16,.5);opacity:0;transition:opacity .25s ease;}
.bcart.is-open .bcart__ov{opacity:1;}
.bcart__panel{position:relative;width:min(420px,100%);height:100%;background:#fff;display:flex;flex-direction:column;border-radius:20px 0 0 20px;box-shadow:-24px 0 60px -30px rgba(20,20,28,.45);transform:translateX(100%);transition:transform .34s cubic-bezier(.2,.8,.2,1);}
.bcart.is-open .bcart__panel{transform:none;}
@media(max-width:520px){.bcart__panel{border-radius:0;}}
@media(prefers-reduced-motion:reduce){.bcart__panel,.bcart__ov{transition:none;}}
.bcart__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:22px 22px 16px;border-bottom:1px solid var(--color-hairline);}
.bcart__title{font:700 21px/1.2 var(--font-display);letter-spacing:-.02em;color:var(--color-ink);margin:0;}
.bcart__x{width:38px;height:38px;border-radius:10px;border:0;background:var(--color-paper);color:var(--color-ink);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.bcart__x:hover{background:var(--color-surface-sunken);}
.bcart__x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;}
.bcart__body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:18px 22px;}
.bcart__empty{text-align:center;padding:14px 8px 24px;}
.bcart__empty-ic{width:54px;height:54px;border-radius:15px;background:var(--color-accent-soft);color:var(--color-accent);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;}
.bcart__empty-ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.bcart__empty-t{font:600 17px/1.3 var(--font-display);letter-spacing:-.01em;color:var(--color-ink);margin:0 0 6px;}
.bcart__empty-d{font-size:14px;line-height:1.55;color:var(--color-text-muted);margin:0 auto;max-width:32ch;}
.bcart__label{font:600 13.5px/1 var(--font-sans);color:var(--color-text-muted);margin:6px 0 12px;}
.bcart__row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px;margin:0 0 8px;border-radius:14px;background:#f3f4fb;text-decoration:none;color:inherit;transition:background .2s ease;}
a.bcart__row:hover{background:#eceefa;}
.bcart__ic{width:42px;height:42px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 2px rgba(20,20,28,.08);}
.bcart__ic img{width:21px;height:21px;display:block;}
.bcart__txt{min-width:0;display:flex;flex-direction:column;}
.bcart__n{font:600 15px/1.25 var(--font-display);letter-spacing:-.01em;color:var(--color-ink);}
.bcart__d{font-size:12.5px;line-height:1.35;color:var(--color-text-muted);margin-top:2px;}
.bcart__tag{font:600 11.5px/1 var(--font-sans);color:var(--color-accent);background:var(--color-accent-soft);border-radius:999px;padding:6px 10px;white-space:nowrap;}
.bcart__price{font:600 15px/1 var(--font-sans);color:var(--color-ink);white-space:nowrap;}
.bcart__rm{grid-column:2/4;justify-self:start;border:0;background:none;padding:0;font:500 12.5px var(--font-sans);color:var(--color-text-muted);text-decoration:underline;cursor:pointer;}
.bcart__add{border:0;border-radius:9px;background:var(--color-accent);color:#fff;font:600 13px/1 var(--font-sans);padding:9px 12px;cursor:pointer;white-space:nowrap;}
.bcart__foot{padding:16px 22px 22px;border-top:1px solid var(--color-hairline);background:#fff;}
.bcart__tot{display:flex;align-items:baseline;justify-content:space-between;font:600 15px var(--font-sans);color:var(--color-ink);margin:0 0 14px;}
.bcart__tot strong{font:700 20px/1 var(--font-display);letter-spacing:-.02em;}
.bcart__go{width:100%;min-height:50px;border-radius:11px;border:0;background:var(--color-accent);color:#fff;font:600 15.5px var(--font-sans);cursor:pointer;box-shadow:0 8px 20px -10px rgba(91,75,255,.6);transition:transform .15s ease,background .2s ease;}
.bcart__go:hover{background:#4a3aee;transform:translateY(-1px);}
.bcart__go[disabled]{background:var(--color-surface-sunken);color:var(--color-text-muted);box-shadow:none;cursor:not-allowed;transform:none;}
.bcart__note{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12.5px;line-height:1.4;color:var(--color-text-muted);margin:10px 0 0;text-align:center;}
.bcart__note svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;}

/* ---------- 12. Menu mobile : seul le contenu défile, sous le header (plus rien ne passe sous le logo) ---------- */
#mobile-menu.mobile-menu.is-open{overflow:hidden!important;}
#mobile-menu.mobile-menu .mobile-menu__inner{height:100%;box-sizing:border-box;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}