/* ============================================================
   Budget-Mariage — refonte 2026 · tokens.css
   Source de vérité : design/tokens.json (v1.1.0, P5 Ardoise & Framboise)
   Mapping direct vers theme.json (Gutenberg) + widget Preact.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300..800&display=swap');

:root {
  /* color.background */
  --bg-page: #fbf9f5;
  --bg-elevated: #ffffff;
  --bg-sand: #f3ede3;
  --bg-sand-deep: #ece4d6;
  --bg-ink: #27395c;
  /* color.border */
  --border-subtle: #ece4d6;
  --border-default: #e0d6c6;
  --border-strong: #cdbfa9;
  /* color.ardoise */
  --ardoise-900: #27395c;
  --ardoise-800: #324a75;
  --ardoise-700: #3f5b8c;
  --ardoise-600: #46618c;
  --ardoise-500: #5872a3;
  --ardoise-300: #9fb0d0;
  --ardoise-tint: #eaeef7;
  /* color.framboise */
  --framboise-700: #a23c61;
  --framboise-600: #b34770;
  --framboise-500: #c4527a;
  --framboise-300: #e3a3bb;
  --framboise-tint: #f9e8ef;
  /* color.text */
  --text-primary: #1b2433;
  --text-secondary: #5b6573;
  --text-muted: #8b94a0;
  --text-on-ardoise: #fbf9f5;
  --text-on-framboise: #ffffff;
  /* color.margot */
  --margot-spark: #3f5b8c;
  --margot-bubble-bg: #eaeef7;
  --margot-bubble-text: #233a5e;
  /* color.semantic */
  --success: #2e7d52;
  --success-tint: #eaf3ec;
  --warning: #b7791f;
  --warning-tint: #fbf0d9;
  /* font */
  --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --font-text: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* space */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;
  /* radius */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-2xl: 32px; --r-full: 999px;
  /* shadow */
  --shadow-xs: 0 1px 2px rgba(39,57,92,.06);
  --shadow-sm: 0 2px 8px rgba(39,57,92,.07);
  --shadow-md: 0 8px 24px rgba(39,57,92,.09);
  --shadow-lg: 0 18px 48px rgba(39,57,92,.12);
  --shadow-focus: 0 0 0 3px rgba(63,91,140,.38);
  /* control */
  --touch: 44px;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; }
[hidden] { display: none !important; }
a { color: var(--ardoise-700); }
:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--r-sm); }

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--text-primary);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(32px, 6vw, 40px); letter-spacing: -.025em; }
h2 { font-size: clamp(24px, 4.5vw, 30px); }
h3 { font-size: 24px; }
h4 { font-size: 20px; }
p { margin: 0; text-wrap: pretty; }
.lead { font-size: 18px; line-height: 1.65; color: var(--text-secondary); }
.muted { color: var(--text-muted); }
.num { font-variant-numeric: tabular-nums; }
.kicker {
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--framboise-700);
}

/* ---------- boutons (min 44px tactile) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--touch); padding: 12px 22px;
  border: none; border-radius: var(--r-md); cursor: pointer;
  font-family: var(--font-text); font-weight: 600; font-size: 16px;
  text-decoration: none; transition: background .15s, border-color .15s, transform .1s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--framboise-500); color: var(--text-on-framboise); box-shadow: 0 6px 16px rgba(196,82,122,.25); }
.btn-primary:hover { background: var(--framboise-700); }
.btn-ardoise { background: var(--ardoise-700); color: var(--text-on-ardoise); }
.btn-ardoise:hover { background: var(--ardoise-900); }
.btn-secondary { background: var(--bg-elevated); color: var(--ardoise-700); border: 1.5px solid var(--border-strong); }
.btn-secondary:hover { border-color: var(--ardoise-700); }
.btn-ghost { background: transparent; color: var(--framboise-700); padding: 10px 8px; min-height: auto; }
.btn-sm { min-height: 36px; padding: 8px 14px; font-size: 14px; border-radius: 10px; }
.btn-block { width: 100%; }
.btn[disabled], .btn-disabled { background: var(--bg-sand); color: var(--text-muted); cursor: not-allowed; box-shadow: none; }

/* ---------- cartes & badges ---------- */
.card { background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); }
.card-pad { padding: var(--sp-5); }
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--r-full);
  font-weight: 600; font-size: 13px;
}
.badge-ardoise { background: var(--ardoise-tint); color: var(--ardoise-700); }
.badge-framboise { background: var(--framboise-tint); color: var(--framboise-700); }
.badge-success { background: var(--success-tint); color: var(--success); }
.badge-warning { background: var(--warning-tint); color: var(--warning); }
.badge-neutral { background: var(--bg-sand); color: var(--text-secondary); }

/* ---------- formulaires ---------- */
.label { display: block; font-size: 14px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.input {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: var(--touch); padding: 11px 14px;
  background: var(--bg-elevated); border: 1.5px solid var(--border-strong); border-radius: var(--r-md);
  font-family: var(--font-text); font-size: 16px; color: var(--text-primary);
}
.input:focus-within, .input:focus { border-color: var(--ardoise-700); box-shadow: var(--shadow-focus); outline: none; }
.input input { border: none; outline: none; background: transparent; font: inherit; color: inherit; width: 100%; }

/* ---------- Margot (voix IA) ---------- */
.margot {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--margot-bubble-bg); border-radius: 14px; padding: 13px 14px;
}
.margot p { font-size: 14px; line-height: 1.5; color: var(--margot-bubble-text); }
.margot-spark {
  flex: none; width: 26px; height: 26px; border-radius: 8px;
  background: var(--margot-spark); display: flex; align-items: center; justify-content: center;
  animation: spark 2.6s ease-in-out infinite;
}
.margot-framboise { background: var(--framboise-tint); }
.margot-framboise p { color: #7c2f4c; }
.margot-framboise .margot-spark { background: var(--framboise-500); }
@keyframes spark { 0%,100% { opacity: .55; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .margot-spark { animation: none; } }

/* ---------- bloc « En bref » (position zéro) ---------- */
.enbref {
  background: var(--ardoise-tint); border-left: 3px solid var(--ardoise-700);
  border-radius: 0 var(--r-md) var(--r-md) 0; padding: 15px 18px;
}
.enbref-title {
  font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ardoise-700); margin-bottom: 7px;
}
.enbref ul { margin: 0; padding-left: 17px; font-size: 15px; line-height: 1.65; color: var(--margot-bubble-text); }

/* ---------- tableau de prix ---------- */
.table-prix { border: 1px solid var(--border-subtle); border-radius: var(--r-md); overflow: hidden; }
.table-prix .tr { display: grid; padding: 11px 14px; font-size: 14px; border-top: 1px solid var(--bg-sand); }
.table-prix .tr.head { background: var(--bg-sand); font-size: 12px; font-weight: 600; color: var(--text-secondary); letter-spacing: .02em; border-top: none; }
.table-prix .tr.alt { background: var(--bg-page); }
.table-prix .td-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- FAQ accordéon ---------- */
.faq { border: 1px solid var(--border-subtle); border-radius: var(--r-md); overflow: hidden; background: var(--bg-elevated); }
.faq details + details { border-top: 1px solid var(--border-subtle); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  min-height: var(--touch); padding: 14px 15px; cursor: pointer;
  font-size: 15px; font-weight: 600; color: var(--text-primary); list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '›'; color: var(--framboise-500); font-size: 18px; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(90deg); }
.faq .faq-body { padding: 0 15px 14px; font-size: 14px; line-height: 1.6; color: var(--text-secondary); }

/* ---------- progression & vues ---------- */
.progress { height: 6px; border-radius: var(--r-full); background: var(--ardoise-tint); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--ardoise-700); border-radius: var(--r-full); }
.segmented { display: flex; background: var(--bg-sand); border-radius: var(--r-md); padding: 4px; }
.segmented button {
  flex: 1; min-height: 38px; border: none; background: transparent; border-radius: 9px;
  font-family: var(--font-text); font-size: 14px; font-weight: 600; color: var(--text-primary); cursor: pointer;
}
.segmented button[aria-selected="true"] { background: var(--bg-elevated); box-shadow: 0 1px 4px rgba(39,57,92,.1); }
.bar { height: 7px; border-radius: var(--r-full); background: var(--bg-sand); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: var(--r-full); background: var(--ardoise-700); }
.bar.framboise > span { background: var(--framboise-500); }

/* ---------- conteneur centré (référence = la home) ----------
   Défini ici (et plus seulement dans le <style> de home.html) pour que TOUTES
   les surfaces qui chargent tokens.css partagent la même largeur : sinon le
   footer canonique rendu par bm-chrome (.site-footer > .wrap) s'étalait en
   pleine largeur sur les pages thème. */
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ---------- header / footer site ---------- */
.site-topbar { background: var(--bg-ink); color: var(--ardoise-300); font-size: 13px; padding: 7px 24px; display: flex; justify-content: space-between; gap: 16px; }
.site-topbar strong { color: var(--text-on-ardoise); }
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 14px 24px; border-bottom: 1px solid var(--border-subtle);
  background: rgba(251,249,245,.92); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 40;
}
.logo { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.logo .wordmark { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -.02em; color: var(--text-primary); }
.logo .wordmark .dot { color: var(--framboise-500); }
.site-nav { display: flex; gap: 22px; font-size: 14px; font-weight: 500; color: #45505f; }
.site-nav a { color: inherit; text-decoration: none; }
.site-nav a[aria-current] { color: var(--framboise-700); font-weight: 600; }
.nav-pro { font-size: 13px; font-weight: 500; color: var(--text-muted); text-decoration: none; white-space: nowrap; }
.nav-pro:hover { color: var(--ardoise-700); }
/* En desktop, header-collapse s'efface (display:contents) : nav et compte
   redeviennent enfants directs du header (logo | nav | compte). */
.menu-toggle { display: none; }
.header-collapse { display: contents; }
.header-account { display: flex; align-items: center; gap: 16px; }
/* Espacement homogène entre Espace pro, Connexion et le bouton Estimer (le span
   .bm-account regroupe Connexion + le bouton, sans gap par défaut ils se collaient).
   Sélecteur renforcé + !important : sur la home (Elementor) une surcharge annulait
   le display:inline-flex, recollant Connexion au bouton. */
.site-header .header-account .bm-account { display: inline-flex !important; align-items: center; gap: 16px !important; }
.site-nav a, .header-account a { white-space: nowrap; }

/* ---- Header mobile : burger + panneau déroulant ---- */
@media (max-width: 880px) {
  .site-header { padding: 10px 16px; gap: 12px; }
  .menu-toggle { display: flex; flex-direction: column; justify-content: center; gap: 4px; flex: none; width: 42px; height: 42px; padding: 10px; border: 1.5px solid var(--border-strong); border-radius: 10px; background: var(--bg-elevated); cursor: pointer; }
  .menu-toggle span { display: block; width: 100%; height: 2px; border-radius: 2px; background: var(--ardoise-700); transition: transform .2s, opacity .2s; }
  .site-header.is-open .menu-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .site-header.is-open .menu-toggle span:nth-child(2) { opacity: 0; }
  .site-header.is-open .menu-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .header-collapse { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 16px; padding: 16px; background: var(--bg-page); border-bottom: 1px solid var(--border-subtle); box-shadow: var(--shadow-lg); max-height: calc(100vh - 64px); overflow-y: auto; }
  .site-header.is-open .header-collapse { display: flex; }
  .site-nav { display: flex; flex-direction: column; gap: 14px; font-size: 15px; }
  .header-account { flex-direction: column; align-items: stretch; gap: 12px; padding-top: 14px; border-top: 1px solid var(--border-subtle); }
  .bm-account { flex-direction: column; align-items: stretch; gap: 12px; width: 100%; }
  .header-account .btn { width: 100%; text-align: center; justify-content: center; }
}
.site-footer { background: var(--bg-ink); color: var(--ardoise-300); padding: 30px 24px; font-size: 13px; }
.site-footer a { color: inherit; text-decoration: none; }
/* Footer maillage (colonnes) : centralisé ici pour que tous les gabarits bm-pages
   partagent strictement le même footer (un seul markup PHP + ce CSS partagé). */
.foot-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; }
.foot-cols h3 { font-family: var(--font-text); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ardoise-300); margin-bottom: 12px; font-weight: 700; }
.foot-cols nav { display: flex; flex-direction: column; gap: 9px; }
.foot-cols nav a { font-size: 14px; }
@media (max-width: 880px) { .foot-cols { grid-template-columns: 1fr; } }

/* ---------- divers ---------- */
.breadcrumb { font-size: 12.5px; color: var(--text-muted); }
.breadcrumb strong { color: #45505f; font-weight: 500; }
.avatar { border-radius: 50%; background: var(--ardoise-tint); color: var(--ardoise-700); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.avatar.framboise { background: var(--framboise-tint); color: var(--framboise-700); }
.img-placeholder { background: linear-gradient(135deg, var(--ardoise-tint), var(--bg-sand)); border-radius: var(--r-md); }
.locked { background: var(--bg-sand); border: 1.5px dashed var(--border-strong); border-radius: var(--r-md); color: var(--text-muted); }

/* page mobile : les gabarits simulateur sont des écrans 100% mobile */
.mobile-page { max-width: 430px; margin: 0 auto; min-height: 100vh; background: var(--bg-page); }