/* design_tokens_v11.css (DA V11 validée), intégré en ligne */
/* =====================================================================
   Brume · design tokens & composants V11
   Fichier autonome : aucune police, icône ou bibliothèque externe.
   Compatible page HTML unique + vanilla JS.
   - Jetons : :root (clair), sombre via prefers-color-scheme ET [data-theme]
   - Mode terrain (laveur, plein soleil) : [data-contrast="high"]
   - Composants préfixés .b-  (aucune collision avec le prototype V10)
   - Base appliquée seulement sous .b-app (intégration progressive)
   Contrastes vérifiés : review/tests_v7/harness/ds_2_contrast.mjs
   ===================================================================== */

/* ---------- 1. Jetons : thème clair ---------- */
:root{
  color-scheme: light;
  /* Neutres « porcelaine » légèrement bleu-vert */
  --b-bg:        #F3F6F5;   /* fond de page */
  --b-surface:   #FFFFFF;   /* cartes */
  --b-surface-2: #EAF0EE;   /* creux, champs, piste de jauge */
  --b-raised:    #FFFFFF;   /* feuilles, toasts */
  --b-ink:       #0E2321;   /* texte principal          16,4:1 sur surface */
  --b-ink-2:     #455A57;   /* texte secondaire         7,4:1 */
  --b-ink-3:     #5E726F;   /* indications, légendes    5,1:1 (4,7:1 sur bg) */
  --b-line:      #DCE5E2;   /* séparateurs décoratifs (non porteurs de sens) */
  --b-line-strong:#7E918D;  /* bord de champ, case      3,3:1 (≥ 3 composant) */

  /* Marque : « lagon » (eau profonde) */
  --b-brand:      #0A6B5F;  /* boutons, liens           6,4:1 avec blanc */
  --b-brand-hover:#08594F;
  --b-brand-press:#06483F;
  --b-on-brand:   #FFFFFF;
  --b-brand-soft: #DDF1EC;  /* fond sélection */
  --b-brand-ink:  #07564C;  /* texte sur brand-soft     7,3:1 */
  --b-brand-2:    #0F5F73;  /* fin du dégradé « eau » (bleu pétrole) */

  /* Accent chaleureux : « abricot » (jamais pour un état) */
  --b-warm:       #E58A4E;  /* décor, illustrations, étoiles */
  --b-warm-soft:  #FCEBDD;
  --b-warm-ink:   #8A3F10;  /* texte sur warm-soft      6,5:1 */

  /* Vapeur / info */
  --b-info:       #1C6788;  /* texte info               6,3:1 */
  --b-info-soft:  #E1F0F7;

  /* Sémantique (rouge réservé aux urgences) */
  --b-ok:         #17703F;  --b-ok-soft:   #E2F3E8;  /* 6,1:1 sur surface */
  --b-warn:       #8A5300;  --b-warn-soft: #FFF0D2;  /* 6,3:1 sur surface */
  --b-warn-fill:  #F0B23A;  /* jauge, point */
  --b-on-warn-fill:#0E2321; /* seul texte admis sur warn-fill */
  --b-danger:     #B42318;  --b-danger-soft:#FDE7E4; /* 6,6:1 sur surface */
  --b-on-danger:  #FFFFFF;
  --b-toast-accent:#7FE3CB; /* icône sur toast (fond = ink) */
  --b-swipe-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E");

  /* Sévérités back-office */
  --b-sev-crit:   #B42318;  --b-sev-crit-soft:#FDE7E4;
  --b-sev-high:   #A34A00;  --b-sev-high-soft:#FFE9D6;
  --b-sev-med:    #7A5A00;  --b-sev-med-soft: #FFF3CC;
  --b-sev-low:    #45607A;  --b-sev-low-soft: #E6EDF4;

  /* Dégradés subtils */
  --b-grad-water: linear-gradient(135deg, var(--b-brand) 0%, var(--b-brand-2) 100%);
  --b-grad-mist:  radial-gradient(120% 70% at 0% 0%, rgba(60,199,168,.16), transparent 60%),
                  radial-gradient(90% 60% at 100% 0%, rgba(43,143,179,.12), transparent 60%);
  --b-grad-warm:  linear-gradient(135deg, #FFF6EE 0%, #FCE6D4 100%);
  --b-steam:      radial-gradient(closest-side, rgba(255,255,255,.28), rgba(255,255,255,0));

  /* Typographie : piles système (SF Pro, Roboto, Segoe UI Variable) */
  --b-font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --b-font-display: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Roboto, sans-serif;
  --b-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --b-fs-xs:  0.875rem;  /* 14 px : bureau dense uniquement (BO), jamais sur mobile */
  --b-fs-sm:  1rem;      /* 16 px : plancher mobile (légendes, badges) */
  --b-fs-md:  1.0625rem; /* 17 px : corps */
  --b-fs-lg:  1.25rem;   /* 20 px : titre de carte */
  --b-fs-xl:  1.5rem;    /* 24 px : titre d'écran */
  --b-fs-2xl: 2rem;      /* 32 px : montant */
  --b-fs-3xl: 2.75rem;   /* 44 px : montant héros / plaque */
  --b-fs-4xl: clamp(2.5rem, 5vw + 1rem, 4rem); /* site */
  --b-lh-tight: 1.15; --b-lh: 1.45; --b-lh-loose: 1.6;
  --b-fw-regular: 400; --b-fw-medium: 500; --b-fw-semi: 600; --b-fw-bold: 700; --b-fw-black: 800;

  /* Espacements (grille 4) */
  --b-s-1: 4px;  --b-s-2: 8px;  --b-s-3: 12px; --b-s-4: 16px; --b-s-5: 20px;
  --b-s-6: 24px; --b-s-8: 32px; --b-s-10: 40px; --b-s-12: 48px; --b-s-16: 64px;
  --b-gutter: 16px;  /* marge latérale mobile */

  /* Rayons */
  --b-r-sm: 10px; --b-r-md: 14px; --b-r-lg: 20px; --b-r-xl: 28px; --b-r-pill: 999px;

  /* Ombres douces teintées (élévation plutôt que bordures) */
  --b-sh-1: 0 1px 2px rgba(14,35,33,.06), 0 1px 1px rgba(14,35,33,.04);
  --b-sh-2: 0 6px 16px -6px rgba(14,35,33,.12), 0 2px 4px rgba(14,35,33,.05);
  --b-sh-3: 0 18px 40px -12px rgba(14,35,33,.22), 0 4px 10px rgba(14,35,33,.06);
  --b-sh-brand: 0 10px 24px -10px rgba(10,107,95,.55);
  --b-hairline: inset 0 0 0 1px rgba(14,35,33,.04);

  /* Focus */
  --b-focus: #1C6788;
  --b-focus-ring: 0 0 0 2px var(--b-surface), 0 0 0 4px var(--b-focus);

  /* Mouvement */
  --b-ease: cubic-bezier(.2,.8,.2,1);
  --b-ease-out: cubic-bezier(.16,1,.3,1);
  --b-ease-spring: cubic-bezier(.34,1.4,.64,1);
  --b-t-fast: 120ms; --b-t: 200ms; --b-t-slow: 320ms; --b-t-xslow: 600ms;

  /* Cibles */
  --b-hit: 44px; --b-hit-lg: 56px; --b-tabbar-h: 64px;
}

/* ---------- 2. Jetons : thème sombre ---------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --b-bg:#0A1413; --b-surface:#12201E; --b-surface-2:#1A2B28; --b-raised:#1C302D;
    --b-ink:#E8F1EF; --b-ink-2:#B0C3BF; --b-ink-3:#8FA6A1; --b-line:#243633; --b-line-strong:#6A827D;
    --b-brand:#3CC7A8; --b-brand-hover:#5AD5B9; --b-brand-press:#2FB094; --b-on-brand:#04231D;
    --b-brand-soft:#123A33; --b-brand-ink:#7FE3CB; --b-brand-2:#2AA3C4;
    --b-warm:#F2A877; --b-warm-soft:#3A2618; --b-warm-ink:#F7C39E;
    --b-info:#7CC8EA; --b-info-soft:#12303D;
    --b-ok:#5ACF92; --b-ok-soft:#123423; --b-warn:#F3BD55; --b-warn-soft:#3A2C0E; --b-warn-fill:#F3BD55; --b-on-warn-fill:#231700;
    --b-danger:#FF8A7A; --b-danger-soft:#3D1A16; --b-on-danger:#2A0703; --b-toast-accent:#0A6B5F; --b-swipe-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304231D' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E");
    --b-sev-crit:#FF8A7A; --b-sev-crit-soft:#3D1A16; --b-sev-high:#FFA868; --b-sev-high-soft:#3A2413;
    --b-sev-med:#F3CF6A; --b-sev-med-soft:#352C10; --b-sev-low:#A9C2DA; --b-sev-low-soft:#1C2A37;
    --b-grad-water: linear-gradient(135deg, #0E5A50 0%, #0D4A5C 100%);
    --b-grad-mist: radial-gradient(120% 70% at 0% 0%, rgba(60,199,168,.12), transparent 60%),
                   radial-gradient(90% 60% at 100% 0%, rgba(42,163,196,.10), transparent 60%);
    --b-grad-warm: linear-gradient(135deg, #2E2016 0%, #3A2618 100%);
    --b-sh-1: 0 1px 0 rgba(255,255,255,.03) inset, 0 1px 2px rgba(0,0,0,.4);
    --b-sh-2: 0 1px 0 rgba(255,255,255,.04) inset, 0 8px 20px -8px rgba(0,0,0,.6);
    --b-sh-3: 0 1px 0 rgba(255,255,255,.05) inset, 0 24px 48px -12px rgba(0,0,0,.7);
    --b-sh-brand: 0 10px 24px -12px rgba(60,199,168,.45);
    --b-hairline: inset 0 0 0 1px rgba(255,255,255,.05);
    --b-focus:#7CC8EA;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --b-bg:#0A1413; --b-surface:#12201E; --b-surface-2:#1A2B28; --b-raised:#1C302D;
  --b-ink:#E8F1EF; --b-ink-2:#B0C3BF; --b-ink-3:#8FA6A1; --b-line:#243633; --b-line-strong:#6A827D;
  --b-brand:#3CC7A8; --b-brand-hover:#5AD5B9; --b-brand-press:#2FB094; --b-on-brand:#04231D;
  --b-brand-soft:#123A33; --b-brand-ink:#7FE3CB; --b-brand-2:#2AA3C4;
  --b-warm:#F2A877; --b-warm-soft:#3A2618; --b-warm-ink:#F7C39E;
  --b-info:#7CC8EA; --b-info-soft:#12303D;
  --b-ok:#5ACF92; --b-ok-soft:#123423; --b-warn:#F3BD55; --b-warn-soft:#3A2C0E; --b-warn-fill:#F3BD55; --b-on-warn-fill:#231700;
  --b-danger:#FF8A7A; --b-danger-soft:#3D1A16; --b-on-danger:#2A0703; --b-toast-accent:#0A6B5F; --b-swipe-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304231D' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --b-sev-crit:#FF8A7A; --b-sev-crit-soft:#3D1A16; --b-sev-high:#FFA868; --b-sev-high-soft:#3A2413;
  --b-sev-med:#F3CF6A; --b-sev-med-soft:#352C10; --b-sev-low:#A9C2DA; --b-sev-low-soft:#1C2A37;
  --b-grad-water: linear-gradient(135deg, #0E5A50 0%, #0D4A5C 100%);
  --b-grad-mist: radial-gradient(120% 70% at 0% 0%, rgba(60,199,168,.12), transparent 60%),
                 radial-gradient(90% 60% at 100% 0%, rgba(42,163,196,.10), transparent 60%);
  --b-grad-warm: linear-gradient(135deg, #2E2016 0%, #3A2618 100%);
  --b-sh-1: 0 1px 0 rgba(255,255,255,.03) inset, 0 1px 2px rgba(0,0,0,.4);
  --b-sh-2: 0 1px 0 rgba(255,255,255,.04) inset, 0 8px 20px -8px rgba(0,0,0,.6);
  --b-sh-3: 0 1px 0 rgba(255,255,255,.05) inset, 0 24px 48px -12px rgba(0,0,0,.7);
  --b-sh-brand: 0 10px 24px -12px rgba(60,199,168,.45);
  --b-hairline: inset 0 0 0 1px rgba(255,255,255,.05);
  --b-focus:#7CC8EA;
}

/* ---------- 3. Mode terrain (laveur, plein soleil / gants) ---------- */
[data-contrast="high"]{
  --b-ink-2: var(--b-ink); --b-ink-3: var(--b-ink-2);
  --b-line: var(--b-line-strong);
  --b-fs-md: 1.125rem;  /* 18 px */
  --b-fs-lg: 1.375rem;  /* 22 px */
  --b-hit: 56px;
}
:root[data-theme="dark"] [data-contrast="high"],
:root[data-theme="dark"][data-contrast="high"]{
  --b-bg:#000000; --b-surface:#0E1716; --b-surface-2:#16221F; --b-ink:#FFFFFF; --b-ink-2:#D9E6E3; --b-ink-3:#C0D2CE;
  --b-brand:#46E0BC; --b-brand-hover:#6BEACB; --b-on-brand:#00140F; --b-line-strong:#8FA6A1;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) [data-contrast="high"],
  :root:not([data-theme="light"])[data-contrast="high"]{
    --b-bg:#000000; --b-surface:#0E1716; --b-surface-2:#16221F; --b-ink:#FFFFFF; --b-ink-2:#D9E6E3; --b-ink-3:#C0D2CE;
    --b-brand:#46E0BC; --b-brand-hover:#6BEACB; --b-on-brand:#00140F; --b-line-strong:#8FA6A1;
  }
}

/* ---------- 4. Base (seulement sous .b-app) ---------- */
.b-app{
  font-family: var(--b-font); font-size: var(--b-fs-md); line-height: var(--b-lh);
  color: var(--b-ink); background: var(--b-bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}
.b-app *, .b-app *::before, .b-app *::after{ box-sizing: border-box; }
.b-app :where(h1,h2,h3,h4,p,ul,ol,dl,dd,figure){ margin: 0; }
.b-app :where(button,input,select,textarea){ font: inherit; color: inherit; }
.b-app :where(button){ cursor: pointer; }
.b-app :where(a){ color: var(--b-brand); text-underline-offset: 3px; }
.b-app :where(img,svg){ display: block; max-width: 100%; }
.b-app :focus-visible{ outline: 3px solid var(--b-focus); outline-offset: 2px; border-radius: inherit; }
.b-app :focus:not(:focus-visible){ outline: none; }
.b-sr{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.b-skip{ position:absolute; left:8px; top:-60px; z-index:100; background:var(--b-ink); color:var(--b-bg); padding:12px 16px; border-radius:var(--b-r-sm); }
.b-skip:focus{ top:8px; }

/* Typographie utilitaire */
.b-h1{ font-family:var(--b-font-display); font-size:var(--b-fs-xl); font-weight:var(--b-fw-black); line-height:var(--b-lh-tight); letter-spacing:-.01em; }
.b-h2{ font-family:var(--b-font-display); font-size:var(--b-fs-lg); font-weight:var(--b-fw-bold); line-height:1.25; }
.b-h3{ font-size:var(--b-fs-md); font-weight:var(--b-fw-semi); }
.b-display{ font-family:var(--b-font-display); font-size:var(--b-fs-4xl); font-weight:var(--b-fw-black); line-height:1.02; letter-spacing:-.025em; }
.b-amount{ font-family:var(--b-font-display); font-size:var(--b-fs-2xl); font-weight:var(--b-fw-black); letter-spacing:-.02em; line-height:1; font-variant-numeric: tabular-nums; white-space:nowrap; }
.b-amount--xl{ font-size:var(--b-fs-3xl); }
.b-meta{ font-size:var(--b-fs-sm); color:var(--b-ink-2); }
.b-hint{ font-size:var(--b-fs-sm); color:var(--b-ink-3); }
.b-eyebrow{ font-size:var(--b-fs-sm); font-weight:var(--b-fw-semi); color:var(--b-brand-ink); letter-spacing:.02em; }
.b-mono{ font-family:var(--b-font-mono); }
.b-stack{ display:grid; gap:var(--b-s-4); align-content:start; }
.b-stack--sm{ gap:var(--b-s-2); } .b-stack--lg{ gap:var(--b-s-6); }
.b-row{ display:flex; align-items:center; gap:var(--b-s-3); }
.b-row--between{ justify-content:space-between; }
.b-icon{ width:24px; height:24px; flex:none; stroke:currentColor; fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.b-icon--sm{ width:20px; height:20px; } .b-icon--lg{ width:32px; height:32px; }

/* ---------- 5. Composants ---------- */

/* 5.1 Boutons */
.b-btn{
  --_bg: var(--b-surface); --_fg: var(--b-ink); --_sh: var(--b-sh-1);
  display:inline-flex; align-items:center; justify-content:center; gap:var(--b-s-2);
  min-height:var(--b-hit); min-width:var(--b-hit); padding:0 var(--b-s-5);
  border:0; border-radius:var(--b-r-md); background:var(--_bg); color:var(--_fg);
  font-size:var(--b-fs-md); font-weight:var(--b-fw-bold); line-height:1.1; text-decoration:none;
  box-shadow:var(--_sh), var(--b-hairline);
  transition: background var(--b-t-fast) var(--b-ease), transform var(--b-t-fast) var(--b-ease), box-shadow var(--b-t) var(--b-ease);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.b-btn:hover{ --_bg: var(--b-surface-2); }
.b-btn:active{ transform: scale(.98); }
.b-btn--primary{ --_bg: var(--b-brand); --_fg: var(--b-on-brand); --_sh: var(--b-sh-brand); }
.b-btn--primary:hover{ --_bg: var(--b-brand-hover); }
.b-btn--primary:active{ --_bg: var(--b-brand-press); }
.b-btn--soft{ --_bg: var(--b-brand-soft); --_fg: var(--b-brand-ink); --_sh: none; }
.b-btn--ghost{ --_bg: transparent; --_fg: var(--b-brand); --_sh: none; box-shadow:none; padding:0 var(--b-s-3); }
.b-btn--ghost:hover{ --_bg: var(--b-brand-soft); }
.b-btn--danger{ --_bg: var(--b-danger); --_fg: var(--b-on-danger); --_sh: none; }
.b-btn--lg{ min-height:var(--b-hit-lg); font-size:var(--b-fs-lg); border-radius:var(--b-r-lg); padding:0 var(--b-s-6); }
.b-btn--xl{ min-height:72px; font-size:var(--b-fs-lg); border-radius:var(--b-r-xl); }
.b-btn--block{ width:100%; }
.b-btn--icon{ padding:0; width:var(--b-hit); border-radius:var(--b-r-pill); }
.b-btn[disabled], .b-btn[aria-disabled="true"]{ --_bg: var(--b-surface-2); --_fg: var(--b-ink-2); --_sh:none; cursor:not-allowed; transform:none; }
.b-btn .b-btn__sub{ display:block; font-size:var(--b-fs-sm); font-weight:var(--b-fw-medium); opacity:.9; }
.b-btn--stacked{ flex-direction:column; gap:2px; padding-block:var(--b-s-2); }

/* Barre d'action collée (zone du pouce) */
.b-cta{
  position:sticky; bottom:0; z-index:5; display:grid; gap:var(--b-s-2);
  padding: var(--b-s-3) var(--b-gutter) calc(var(--b-s-3) + env(safe-area-inset-bottom));
  margin: 0 calc(var(--b-gutter) * -1);
  background: linear-gradient(to top, var(--b-bg) 70%, transparent);
}
.b-cta__note{ text-align:center; font-size:var(--b-fs-sm); color:var(--b-ink-2); }

/* 5.2 Cartes */
.b-card{ background:var(--b-surface); border-radius:var(--b-r-lg); padding:var(--b-s-5); box-shadow:var(--b-sh-2), var(--b-hairline); }
.b-card--flat{ box-shadow:var(--b-hairline); }
.b-card--sunken{ background:var(--b-surface-2); box-shadow:none; }
.b-card--hero{ border-radius:var(--b-r-xl); padding:var(--b-s-6); }
.b-card--link{ display:block; color:inherit; text-decoration:none; transition: transform var(--b-t) var(--b-ease), box-shadow var(--b-t) var(--b-ease); }
.b-card--link:hover{ transform: translateY(-2px); box-shadow: var(--b-sh-3); }
.b-card__head{ display:flex; align-items:center; justify-content:space-between; gap:var(--b-s-3); margin-bottom:var(--b-s-3); }

/* 5.3 Tuiles d'état (grandes cartes visuelles) */
.b-state{
  position:relative; overflow:hidden; display:grid; gap:var(--b-s-2);
  border-radius:var(--b-r-xl); padding:var(--b-s-6); color:var(--b-ink);
  background: var(--b-surface); box-shadow: var(--b-sh-2), var(--b-hairline);
}
.b-state__icon{ width:48px; height:48px; border-radius:16px; display:grid; place-items:center; background:var(--b-brand-soft); color:var(--b-brand-ink); }
.b-state__title{ font-family:var(--b-font-display); font-size:var(--b-fs-lg); font-weight:var(--b-fw-bold); line-height:1.2; }
.b-state--ok   .b-state__icon{ background:var(--b-ok-soft); color:var(--b-ok); }
.b-state--warn .b-state__icon{ background:var(--b-warn-soft); color:var(--b-warn); }
.b-state--info .b-state__icon{ background:var(--b-info-soft); color:var(--b-info); }
.b-state--urgent{ box-shadow: inset 4px 0 0 var(--b-danger), var(--b-sh-2); }
.b-state--urgent .b-state__icon{ background:var(--b-danger-soft); color:var(--b-danger); }
.b-state--celebrate{ background: var(--b-grad-warm); }
/* Choix d'état (Dernier nettoyage : <1 mois / 1-3 / >3) */
.b-choice{ display:grid; grid-template-columns:repeat(auto-fit, minmax(96px,1fr)); gap:var(--b-s-3); }
.b-choice > button, .b-choice > label{
  display:grid; justify-items:center; gap:var(--b-s-2); min-height:96px; padding:var(--b-s-4) var(--b-s-2);
  border:0; border-radius:var(--b-r-lg); background:var(--b-surface); color:var(--b-ink);
  box-shadow: var(--b-sh-1), inset 0 0 0 1.5px var(--b-line);
  font-weight:var(--b-fw-semi); font-size:var(--b-fs-sm); text-align:center; line-height:1.25;
  transition: box-shadow var(--b-t-fast) var(--b-ease), background var(--b-t-fast) var(--b-ease);
}
.b-choice > [aria-pressed="true"], .b-choice > [aria-checked="true"], .b-choice > label:has(input:checked){
  background:var(--b-brand-soft); color:var(--b-brand-ink); box-shadow: inset 0 0 0 2px var(--b-brand);
}

/* 5.4 Calendrier horizontal défilant */
.b-cal{ display:flex; gap:var(--b-s-2); overflow-x:auto; scroll-snap-type:x mandatory; padding:var(--b-s-1) var(--b-gutter) var(--b-s-3); margin:0 calc(var(--b-gutter) * -1); scrollbar-width:none; overscroll-behavior-x:contain; }
.b-cal::-webkit-scrollbar{ display:none; }
.b-cal__day{
  scroll-snap-align:start; flex:0 0 64px; min-height:84px; display:grid; justify-items:center; align-content:center; gap:2px;
  border:0; border-radius:var(--b-r-lg); background:var(--b-surface); color:var(--b-ink); box-shadow:var(--b-sh-1), var(--b-hairline);
}
.b-cal__dow{ font-size:var(--b-fs-sm); color:var(--b-ink-2); font-weight:var(--b-fw-medium); }
.b-cal__num{ font-family:var(--b-font-display); font-size:var(--b-fs-xl); font-weight:var(--b-fw-bold); line-height:1; }
.b-cal__dot{ width:6px; height:6px; border-radius:50%; background:transparent; }
.b-cal__day--tour .b-cal__dot{ background:var(--b-brand); }
.b-cal__day[aria-pressed="true"]{ background:var(--b-ink); color:var(--b-bg); box-shadow:var(--b-sh-2); }
.b-cal__day[aria-pressed="true"] .b-cal__dow{ color:inherit; opacity:.8; }
.b-cal__day[aria-pressed="true"] .b-cal__dot{ background:var(--b-brand); box-shadow:0 0 0 2px var(--b-ink); }
.b-cal__day[disabled]{ opacity:.45; box-shadow:none; background:transparent; }

/* 5.5 Tuiles horaires */
.b-slots{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--b-s-3); }
.b-slot{
  position:relative; display:grid; gap:4px; align-content:start; min-height:88px; padding:var(--b-s-4);
  border:0; border-radius:var(--b-r-lg); text-align:left; background:var(--b-surface); color:var(--b-ink);
  box-shadow: var(--b-sh-1), inset 0 0 0 1.5px var(--b-line);
}
.b-slot__time{ font-family:var(--b-font-display); font-size:var(--b-fs-lg); white-space:nowrap; font-weight:var(--b-fw-bold); }
.b-slot__price{ font-size:var(--b-fs-sm); color:var(--b-ink-2); font-weight:var(--b-fw-semi); }
.b-slot--tour{ background: var(--b-surface); box-shadow: var(--b-sh-2), inset 0 0 0 2px color-mix(in srgb, var(--b-brand) 45%, transparent); }
.b-slot--tour::after{ content:""; position:absolute; inset:0; border-radius:inherit; background:var(--b-grad-mist); pointer-events:none; }
.b-slot[aria-pressed="true"]{ background:var(--b-brand); color:var(--b-on-brand); box-shadow:var(--b-sh-brand); }
.b-slot[aria-pressed="true"] .b-slot__price{ color:inherit; }
.b-slot[disabled]{ opacity:.5; box-shadow:none; background:var(--b-surface-2); }
.b-slot--wide{ grid-column:1 / -1; }

/* 5.6 Carte portefeuille + jauge de budget */
.b-wallet{
  position:relative; overflow:hidden; isolation:isolate; border-radius:var(--b-r-xl); padding:var(--b-s-6);
  background:var(--b-grad-water); color:#FFFFFF; box-shadow:var(--b-sh-3);
  display:grid; gap:var(--b-s-3); min-height:180px;
}
.b-wallet::before, .b-wallet::after{ content:""; position:absolute; z-index:-1; border-radius:50%; background:var(--b-steam); }
.b-wallet::before{ width:260px; height:260px; right:-80px; top:-120px; }
.b-wallet::after{ width:180px; height:180px; left:-60px; bottom:-110px; opacity:.6; }
.b-wallet__label{ font-size:var(--b-fs-sm); font-weight:var(--b-fw-semi); opacity:.92; }
.b-wallet__amount{ font-family:var(--b-font-display); font-size:var(--b-fs-3xl); font-weight:var(--b-fw-black); line-height:1; letter-spacing:-.02em; }
.b-wallet__amount small{ font-size:var(--b-fs-lg); font-weight:var(--b-fw-semi); opacity:.85; }
.b-wallet__foot{ display:flex; justify-content:space-between; gap:var(--b-s-3); font-size:var(--b-fs-sm); opacity:.95; }
.b-gauge{ --v: 50; position:relative; height:12px; border-radius:var(--b-r-pill); background:var(--b-surface-2); overflow:hidden; }
.b-gauge::after{ content:""; position:absolute; inset:0 auto 0 0; width:calc(var(--v) * 1%); border-radius:inherit; background:var(--b-brand); transition:width var(--b-t-xslow) var(--b-ease-out); }
.b-wallet .b-gauge{ background:rgba(255,255,255,.25); }
.b-wallet .b-gauge::after{ background:#FFFFFF; }
.b-gauge--warn::after{ background:var(--b-warn-fill); }
.b-gauge--danger::after{ background:var(--b-danger); }

/* Anneau de budget (gestionnaire) : conic-gradient, valeur dans --v */
.b-ring{ --v: 54; --size: 168px; --track: var(--b-surface-2); --fill: var(--b-brand);
  width:var(--size); height:var(--size); border-radius:50%; display:grid; place-items:center; flex:none;
  background: radial-gradient(closest-side, var(--b-surface) 78%, transparent 79% 100%), conic-gradient(var(--fill) calc(var(--v) * 1%), var(--track) 0);
}
.b-ring__in{ text-align:center; display:grid; gap:2px; }
.b-ring__val{ font-family:var(--b-font-display); font-size:var(--b-fs-2xl); font-weight:var(--b-fw-black); line-height:1; }

/* Histogramme mensuel */
.b-hist{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; align-items:end; gap:var(--b-s-2); height:160px; padding-top:var(--b-s-4); }
.b-hist__bar{ --h: 50; position:relative; display:grid; grid-template-rows:1fr auto; height:100%; gap:var(--b-s-2); text-align:center; font-size:var(--b-fs-sm); color:var(--b-ink-2); }
.b-hist__bar > i{ align-self:end; display:block; height:calc(var(--h) * 1%); border-radius:8px 8px 4px 4px; background:color-mix(in srgb, var(--b-brand) 30%, var(--b-surface-2)); transition:height var(--b-t-xslow) var(--b-ease-out); }
.b-hist__bar--now > i{ background:var(--b-brand); }
.b-hist__bar--now{ color:var(--b-ink); font-weight:var(--b-fw-bold); }

/* Jauge de santé de site (3 segments) */
.b-health{ display:grid; grid-template-columns:repeat(3,1fr); gap:4px; width:96px; }
.b-health > i{ height:8px; border-radius:4px; background:var(--b-surface-2); }
.b-health[data-level="1"] > i:nth-child(-n+1){ background:var(--b-danger); }
.b-health[data-level="2"] > i:nth-child(-n+2){ background:var(--b-warn-fill); }
.b-health[data-level="3"] > i{ background:var(--b-ok); }

/* 5.7 Stepper animé (suivi en direct) */
.b-stepper{ --p: 50; display:grid; gap:var(--b-s-3); }
.b-stepper__track{ position:relative; height:8px; border-radius:var(--b-r-pill); background:var(--b-surface-2); overflow:hidden; }
.b-stepper__fill{ position:absolute; inset:0 auto 0 0; width:calc(var(--p) * 1%); border-radius:inherit; background:var(--b-brand); transition:width var(--b-t-xslow) var(--b-ease-out); }
.b-stepper__fill::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transform:translateX(-100%); animation:b-flow 1.8s var(--b-ease) infinite; }
.b-stepper__steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--b-s-1); list-style:none; padding:0; margin:0; }
.b-stepper__steps li{ display:grid; justify-items:center; gap:4px; text-align:center; font-size:var(--b-fs-sm); color:var(--b-ink-3); }
.b-stepper__steps li::before{ content:""; width:14px; height:14px; border-radius:50%; background:var(--b-surface); box-shadow: inset 0 0 0 2px var(--b-line-strong); }
.b-stepper__steps li[data-s="done"]{ color:var(--b-ink-2); }
.b-stepper__steps li[data-s="done"]::before{ background:var(--b-brand); box-shadow:none; }
.b-stepper__steps li[aria-current="step"]{ color:var(--b-ink); font-weight:var(--b-fw-bold); }
.b-stepper__steps li[aria-current="step"]::before{ background:var(--b-brand); box-shadow:0 0 0 4px color-mix(in srgb, var(--b-brand) 25%, transparent); animation:b-pulse 1.6s var(--b-ease) infinite; }
@keyframes b-flow{ to{ transform:translateX(100%); } }
@keyframes b-pulse{ 0%,100%{ box-shadow:0 0 0 3px color-mix(in srgb, var(--b-brand) 30%, transparent); } 50%{ box-shadow:0 0 0 8px color-mix(in srgb, var(--b-brand) 0%, transparent); } }

/* Stepper d'inscription (points) */
.b-dots{ display:flex; gap:6px; } .b-dots > i{ height:6px; flex:1; border-radius:3px; background:var(--b-surface-2); }
.b-dots > i[data-s="done"], .b-dots > i[aria-current="step"]{ background:var(--b-brand); }

/* 5.8 Feuille (mobile) / panneau latéral (bureau) */
.b-scrim{ position:fixed; inset:0; z-index:40; background:rgba(6,20,18,.48); backdrop-filter:blur(2px); animation:b-fade var(--b-t) var(--b-ease); }
.b-sheet{
  position:fixed; z-index:41; left:0; right:0; bottom:0; max-height:92dvh; display:flex; flex-direction:column;
  background:var(--b-raised); color:var(--b-ink); border-radius:var(--b-r-xl) var(--b-r-xl) 0 0; box-shadow:var(--b-sh-3);
  padding-bottom:env(safe-area-inset-bottom); animation:b-up var(--b-t-slow) var(--b-ease-out);
}
.b-sheet::before{ content:""; width:40px; height:5px; border-radius:3px; background:var(--b-line-strong); opacity:.6; margin:10px auto 0; flex:none; }
.b-sheet__head{ display:flex; align-items:center; justify-content:space-between; gap:var(--b-s-3); padding:var(--b-s-3) var(--b-s-5); }
.b-sheet__body{ overflow:auto; padding:0 var(--b-s-5) var(--b-s-5); display:grid; gap:var(--b-s-4); }
.b-sheet__foot{ padding:var(--b-s-3) var(--b-s-5) var(--b-s-5); display:grid; gap:var(--b-s-2); }
@media (min-width: 900px){
  .b-sheet{ left:auto; top:0; width:min(520px, 100vw); max-height:none; border-radius:var(--b-r-xl) 0 0 var(--b-r-xl); animation-name:b-left; }
  .b-sheet::before{ display:none; }
  .b-sheet__head{ padding-top:var(--b-s-6); }
}
.b-sheet.b-sheet--inline{ position:relative; inset:auto; z-index:auto; animation:none; max-height:none; width:auto; border-radius:var(--b-r-xl); }
@keyframes b-fade{ from{ opacity:0; } }
@keyframes b-up{ from{ transform:translateY(100%); } }
@keyframes b-left{ from{ transform:translateX(100%); } }

/* 5.9 Liste type messagerie (notifications, alertes, BO) */
.b-list{ list-style:none; margin:0; padding:0; display:grid; background:var(--b-surface); border-radius:var(--b-r-lg); box-shadow:var(--b-sh-1), var(--b-hairline); overflow:hidden; }
.b-list__item{ display:grid; grid-template-columns:auto 1fr auto; gap:var(--b-s-3); align-items:center; min-height:64px; padding:var(--b-s-3) var(--b-s-4); color:inherit; text-decoration:none; background:none; border:0; width:100%; text-align:left; }
.b-list__item + .b-list__item{ box-shadow: inset 0 1px 0 var(--b-line); }
.b-list__item:hover{ background:var(--b-surface-2); }
.b-list__item[aria-current="true"], .b-list__item[aria-selected="true"]{ background:var(--b-brand-soft); box-shadow: inset 3px 0 0 var(--b-brand); }
.b-list__item[aria-current="true"] .b-list__meta, .b-list__item[aria-selected="true"] .b-list__meta{ color:var(--b-ink-2); } /* ink-3 interdit sur brand-soft (4,3:1) */
.b-list__item--unread .b-list__title::after{ content:""; display:inline-block; width:8px; height:8px; margin-left:8px; border-radius:50%; background:var(--b-brand); vertical-align:middle; }
.b-list__title{ font-weight:var(--b-fw-semi); line-height:1.3; }
.b-list__sub{ font-size:var(--b-fs-sm); color:var(--b-ink-2); line-height:1.35; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.b-list__meta{ font-size:var(--b-fs-sm); color:var(--b-ink-3); text-align:right; white-space:nowrap; }
.b-avatar{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; flex:none; font-weight:var(--b-fw-bold); background:var(--b-brand-soft); color:var(--b-brand-ink); }
.b-avatar--warm{ background:var(--b-warm-soft); color:var(--b-warm-ink); }

/* 5.10 Badges (statut et sévérité) : forme + texte, jamais la couleur seule */
.b-badge{ display:inline-flex; align-items:center; gap:6px; min-height:28px; padding:2px 10px; border-radius:var(--b-r-pill);
  font-size:var(--b-fs-sm); font-weight:var(--b-fw-semi); line-height:1.2; white-space:nowrap; background:var(--b-surface-2); color:var(--b-ink-2); }
.b-badge::before{ content:""; width:8px; height:8px; border-radius:50%; background:currentColor; flex:none; }
.b-badge--plain::before{ display:none; }
.b-badge--brand{ background:var(--b-brand-soft); color:var(--b-brand-ink); }
.b-badge--ok{ background:var(--b-ok-soft); color:var(--b-ok); }
.b-badge--warn{ background:var(--b-warn-soft); color:var(--b-warn); }
.b-badge--info{ background:var(--b-info-soft); color:var(--b-info); }
.b-badge--danger, .b-badge--crit{ background:var(--b-sev-crit-soft); color:var(--b-sev-crit); }
.b-badge--crit::before{ border-radius:2px; transform:rotate(45deg); }               /* losange = critique */
.b-badge--high{ background:var(--b-sev-high-soft); color:var(--b-sev-high); }
.b-badge--high::before{ border-radius:0; clip-path:polygon(50% 0,100% 100%,0 100%); } /* triangle = haute */
.b-badge--med{ background:var(--b-sev-med-soft); color:var(--b-sev-med); }
.b-badge--low{ background:var(--b-sev-low-soft); color:var(--b-sev-low); }
.b-badge--low::before{ background:transparent; box-shadow: inset 0 0 0 2px currentColor; } /* cercle vide = info */
.b-badge--warm{ background:var(--b-warm-soft); color:var(--b-warm-ink); }
.b-count{ min-width:22px; height:22px; padding:0 6px; border-radius:11px; display:inline-grid; place-items:center; font-size:.8125rem; font-weight:var(--b-fw-bold); background:var(--b-danger); color:var(--b-on-danger); }

/* 5.11 Pastilles / segments / champs / interrupteurs */
.b-chip{ display:inline-flex; align-items:center; gap:6px; min-height:var(--b-hit); padding:0 var(--b-s-4); border:0; border-radius:var(--b-r-pill);
  background:var(--b-surface); color:var(--b-ink); font-weight:var(--b-fw-semi); font-size:var(--b-fs-sm); box-shadow:var(--b-sh-1), inset 0 0 0 1.5px var(--b-line); }
.b-chip[aria-pressed="true"]{ background:var(--b-brand-soft); color:var(--b-brand-ink); box-shadow: inset 0 0 0 2px var(--b-brand); }
.b-chips{ display:flex; gap:var(--b-s-2); flex-wrap:wrap; }
.b-chips--scroll > *{ flex:none; }
.b-chip{ white-space:nowrap; }
.b-chips--scroll{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 calc(var(--b-gutter) * -1); padding:2px var(--b-gutter); }
.b-seg{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:4px; padding:4px; border-radius:var(--b-r-md); background:var(--b-surface-2); }
.b-seg > button{ min-height:44px; border:0; border-radius:calc(var(--b-r-md) - 4px); background:transparent; font-weight:var(--b-fw-semi); font-size:var(--b-fs-sm); color:var(--b-ink-2); }
.b-seg > button[aria-pressed="true"], .b-seg > button[aria-selected="true"]{ background:var(--b-surface); color:var(--b-ink); box-shadow:var(--b-sh-1); }
.b-field{ display:grid; gap:6px; }
.b-field > label, .b-label{ font-weight:var(--b-fw-semi); font-size:var(--b-fs-sm); }
.b-input{ min-height:52px; width:100%; padding:0 var(--b-s-4); border:0; border-radius:var(--b-r-md); background:var(--b-surface); color:var(--b-ink);
  font-size:var(--b-fs-md); box-shadow: inset 0 0 0 1.5px var(--b-line-strong); transition:box-shadow var(--b-t-fast) var(--b-ease); }
.b-input:focus{ outline:none; box-shadow: inset 0 0 0 2px var(--b-brand), 0 0 0 4px color-mix(in srgb, var(--b-brand) 22%, transparent); }
.b-input[aria-invalid="true"]{ box-shadow: inset 0 0 0 2px var(--b-danger); }
.b-field__err{ color:var(--b-danger); font-size:var(--b-fs-sm); font-weight:var(--b-fw-semi); }
.b-check{ display:grid; grid-template-columns:28px 1fr; gap:var(--b-s-3); align-items:start; min-height:var(--b-hit); padding:var(--b-s-2) 0; cursor:pointer; }
.b-check input{ width:24px; height:24px; margin:2px 0 0; accent-color:var(--b-brand); }
.b-switch{ position:relative; width:52px; height:32px; flex:none; appearance:none; -webkit-appearance:none; margin:0; border-radius:16px; background:var(--b-line-strong); cursor:pointer; transition:background var(--b-t) var(--b-ease); }
.b-switch::after{ content:""; position:absolute; top:3px; left:3px; width:26px; height:26px; border-radius:50%; background:#FFFFFF; box-shadow:var(--b-sh-1); transition:transform var(--b-t) var(--b-ease-spring); }
.b-switch:checked{ background:var(--b-brand); }
.b-switch:checked::after{ transform:translateX(20px); }
.b-radio-card{ display:grid; grid-template-columns:auto 1fr auto; gap:var(--b-s-3); align-items:center; padding:var(--b-s-4); border-radius:var(--b-r-lg); background:var(--b-surface); box-shadow: inset 0 0 0 1.5px var(--b-line); cursor:pointer; }
.b-radio-card:has(input:checked){ background:var(--b-brand-soft); box-shadow: inset 0 0 0 2px var(--b-brand); }
.b-radio-card input{ width:22px; height:22px; accent-color:var(--b-brand); margin:0; }

/* Récapitulatif minimal + détail replié */
.b-recap{ display:grid; gap:0; }
.b-recap__row{ display:grid; grid-template-columns:28px 1fr auto; gap:var(--b-s-3); align-items:center; min-height:56px; }
.b-recap__row + .b-recap__row{ box-shadow: inset 0 1px 0 var(--b-line); }
.b-pay{ display:grid; gap:var(--b-s-2); padding:var(--b-s-4); border-radius:var(--b-r-lg); background:var(--b-surface-2); }
.b-pay__line{ display:flex; justify-content:space-between; gap:var(--b-s-3); }
.b-pay__line > :last-child, .b-pay__total > :last-child{ white-space:nowrap; text-align:right; }
.b-pay__total{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--b-s-3); padding-top:var(--b-s-2); box-shadow: inset 0 1px 0 var(--b-line-strong); font-weight:var(--b-fw-bold); }
.b-fold > summary{ list-style:none; display:flex; align-items:center; justify-content:space-between; min-height:var(--b-hit); cursor:pointer; color:var(--b-brand); font-weight:var(--b-fw-semi); }
.b-fold > summary::-webkit-details-marker{ display:none; }
.b-fold > summary::after{ content:""; width:10px; height:10px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-3px); transition:transform var(--b-t) var(--b-ease); }
.b-fold[open] > summary::after{ transform:rotate(-135deg); }

/* 5.12 Toasts */
.b-toasts{ position:fixed; z-index:60; left:var(--b-gutter); right:var(--b-gutter); bottom:calc(var(--b-tabbar-h) + 12px + env(safe-area-inset-bottom)); display:grid; gap:var(--b-s-2); justify-items:center; pointer-events:none; }
.b-toast{ pointer-events:auto; display:flex; align-items:center; gap:var(--b-s-3); width:min(100%, 440px); min-height:56px; padding:var(--b-s-3) var(--b-s-3) var(--b-s-3) var(--b-s-4);
  border-radius:var(--b-r-lg); background:var(--b-ink); color:var(--b-bg); box-shadow:var(--b-sh-3); animation:b-toast var(--b-t-slow) var(--b-ease-spring); }
.b-toast__msg{ flex:1; font-weight:var(--b-fw-medium); }
.b-toast__act{ min-height:var(--b-hit); padding:0 var(--b-s-3); border:0; border-radius:var(--b-r-sm); background:transparent; color:inherit; font-weight:var(--b-fw-bold); text-decoration:underline; text-underline-offset:3px; }
.b-toast .b-icon{ color:var(--b-toast-accent); }
.b-toast--static{ position:relative; animation:none; }
@keyframes b-toast{ from{ transform:translateY(16px) scale(.96); opacity:0; } }

/* 5.13 États vides illustrés */
.b-empty{ display:grid; justify-items:center; text-align:center; gap:var(--b-s-3); padding:var(--b-s-8) var(--b-s-5); }
.b-empty__art{ width:144px; height:112px; color:var(--b-brand); }
.b-empty__art .b-art-soft{ fill:var(--b-brand-soft); }
.b-empty__art .b-art-warm{ fill:var(--b-warm); }
.b-empty__art .b-art-line{ stroke:currentColor; fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.b-empty__title{ font-family:var(--b-font-display); font-size:var(--b-fs-lg); font-weight:var(--b-fw-bold); }
.b-empty__text{ color:var(--b-ink-2); max-width:32ch; }

/* 5.14 Squelettes de chargement */
.b-skel{ display:block; border-radius:var(--b-r-sm); background:var(--b-surface-2); position:relative; overflow:hidden; min-height:16px; }
.b-skel::after{ content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--b-surface) 70%, transparent), transparent); animation:b-flow 1.4s var(--b-ease) infinite; }
.b-skel--text{ height:16px; width:70%; } .b-skel--title{ height:24px; width:50%; } .b-skel--card{ height:120px; border-radius:var(--b-r-lg); }
.b-skel--circle{ width:44px; height:44px; border-radius:50%; }

/* 5.15 Barre d'onglets (bas d'écran) */
.b-tabbar{ position:sticky; bottom:0; z-index:10; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); min-height:var(--b-tabbar-h);
  padding-bottom:env(safe-area-inset-bottom); background:color-mix(in srgb, var(--b-raised) 92%, transparent); backdrop-filter:saturate(1.4) blur(12px); box-shadow: 0 -1px 0 var(--b-line); }
.b-tabbar a, .b-tabbar button{ display:grid; justify-items:center; align-content:center; gap:2px; min-width:0; padding:0 2px; white-space:nowrap; letter-spacing:-.01em; min-height:var(--b-tabbar-h); border:0; background:none; color:var(--b-ink-2); font-size:var(--b-fs-sm); font-weight:var(--b-fw-medium); text-decoration:none; }
.b-tabbar [aria-current="page"]{ color:var(--b-brand); font-weight:var(--b-fw-semi); }

/* 5.16 App bar / navigation bureau */
.b-appbar{ display:flex; align-items:center; justify-content:space-between; gap:var(--b-s-3); min-height:64px; padding:0 var(--b-gutter); }
.b-sidenav{ display:grid; gap:4px; align-content:start; padding:var(--b-s-4); }
.b-sidenav a{ display:flex; align-items:center; gap:var(--b-s-3); min-height:44px; padding:0 var(--b-s-3); border-radius:var(--b-r-md); color:var(--b-ink-2); font-weight:var(--b-fw-semi); text-decoration:none; }
.b-sidenav a:hover{ background:var(--b-surface-2); color:var(--b-ink); }
.b-sidenav a[aria-current="page"]{ background:var(--b-brand-soft); color:var(--b-brand-ink); }
.b-kbd{ display:inline-grid; place-items:center; min-width:24px; height:24px; padding:0 6px; border-radius:6px; font-family:var(--b-font-mono); font-size:.8125rem; background:var(--b-surface-2); color:var(--b-ink-2); box-shadow: inset 0 -1px 0 var(--b-line-strong); }

/* 5.17 Laveur : tournée plein écran, carte à balayer, appareil photo, tuiles de suppléments */
.b-deck{ display:grid; grid-auto-flow:column; grid-auto-columns:100%; gap:var(--b-s-4); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.b-deck::-webkit-scrollbar{ display:none; }
.b-deck > *{ scroll-snap-align:center; }
.b-plate{ display:inline-flex; align-items:center; gap:10px; padding:8px 16px 8px 8px; border-radius:10px; background:#FFFFFF; color:#0B0B0B;
  box-shadow: inset 0 0 0 2px #0B0B0B; font-family:var(--b-font-mono); font-weight:var(--b-fw-bold); font-size:var(--b-fs-2xl); letter-spacing:.06em; }
.b-plate::before{ content:"F"; display:grid; place-items:center; width:28px; align-self:stretch; border-radius:6px; background:#1D4ED8; color:#FFFFFF; font-size:1rem; letter-spacing:0; }
.b-arrive{ position:relative; width:100%; min-height:88px; border:0; border-radius:var(--b-r-xl); background:var(--b-brand); color:var(--b-on-brand);
  font-family:var(--b-font-display); font-size:var(--b-fs-xl); font-weight:var(--b-fw-black); box-shadow:var(--b-sh-brand); display:flex; align-items:center; justify-content:center; gap:var(--b-s-3); }
.b-arrive::after{ content:""; position:absolute; inset:-6px; border-radius:calc(var(--b-r-xl) + 6px); box-shadow:0 0 0 3px color-mix(in srgb, var(--b-brand) 40%, transparent); animation:b-ring 2s var(--b-ease) infinite; pointer-events:none; }
@keyframes b-ring{ 0%{ opacity:1; transform:scale(.98);} 100%{ opacity:0; transform:scale(1.06);} }
.b-camera{ position:relative; aspect-ratio:3/4; border-radius:var(--b-r-xl); overflow:hidden; background:linear-gradient(160deg,#25302E,#0B1110); color:#FFFFFF; }
.b-camera__ghost{ position:absolute; inset:18% 8% 26%; width:84%; color:rgba(255,255,255,.9); }
.b-camera__ghost path{ fill:none; stroke:currentColor; stroke-width:2.5; stroke-dasharray:8 6; stroke-linecap:round; stroke-linejoin:round; }
.b-camera__hint{ position:absolute; top:16px; left:16px; right:16px; display:flex; justify-content:space-between; gap:8px; font-weight:var(--b-fw-semi); }
.b-camera__hint > span{ padding:6px 12px; border-radius:var(--b-r-pill); background:rgba(0,0,0,.55); }
.b-camera__shoot{ position:absolute; left:50%; bottom:20px; transform:translateX(-50%); width:76px; height:76px; border-radius:50%; border:0; background:#FFFFFF; box-shadow:0 0 0 6px rgba(255,255,255,.35); }
.b-tiles{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--b-s-3); }
@media (min-width: 420px){ .b-tiles{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
.b-tile{ position:relative; display:grid; gap:6px; align-content:start; justify-items:start; min-height:112px; padding:var(--b-s-4); border:0; border-radius:var(--b-r-lg); text-align:left;
  background:var(--b-surface); color:var(--b-ink); box-shadow: var(--b-sh-1), inset 0 0 0 1.5px var(--b-line); font-weight:var(--b-fw-semi); }
.b-tile__price{ font-size:var(--b-fs-sm); color:var(--b-ink-2); font-weight:var(--b-fw-semi); }
.b-tile[aria-pressed="true"]{ background:var(--b-brand-soft); color:var(--b-brand-ink); box-shadow: inset 0 0 0 3px var(--b-brand); }
.b-tile[aria-pressed="true"]::after{ content:""; position:absolute; top:12px; right:12px; width:22px; height:22px; border-radius:50%;
  background: var(--b-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/14px no-repeat; }
.b-stepper-num{ display:inline-flex; align-items:center; gap:4px; border-radius:var(--b-r-pill); background:var(--b-surface); box-shadow:var(--b-hairline); }
.b-stepper-num button{ width:var(--b-hit); height:var(--b-hit); border:0; border-radius:50%; background:transparent; font-size:1.25rem; font-weight:var(--b-fw-bold); color:inherit; }

/* 5.18 Inscriptions : « entreprise trouvée », dépôt de pièces */
.b-found{ display:grid; grid-template-columns:auto 1fr; gap:var(--b-s-3); align-items:center; padding:var(--b-s-4); border-radius:var(--b-r-lg); background:var(--b-ok-soft); color:var(--b-ink); animation:b-pop var(--b-t-slow) var(--b-ease-spring); }
.b-found__check{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--b-ok); color:var(--b-surface); }
.b-found__check path{ stroke-dasharray:24; stroke-dashoffset:24; animation:b-draw 420ms var(--b-ease-out) 160ms forwards; }
@keyframes b-pop{ from{ transform:scale(.94); opacity:0; } }
@keyframes b-draw{ to{ stroke-dashoffset:0; } }
.b-drop{ display:grid; justify-items:center; gap:var(--b-s-2); padding:var(--b-s-6); border-radius:var(--b-r-lg); text-align:center; background:var(--b-surface); box-shadow: inset 0 0 0 2px var(--b-line-strong); outline-offset:4px; }
.b-drop[data-over="true"]{ background:var(--b-brand-soft); box-shadow: inset 0 0 0 2px var(--b-brand); }
.b-doc{ display:grid; grid-template-columns:56px 1fr auto; gap:var(--b-s-3); align-items:center; padding:var(--b-s-3); border-radius:var(--b-r-lg); background:var(--b-surface); box-shadow:var(--b-sh-1), var(--b-hairline); }
.b-doc__thumb{ width:56px; height:72px; border-radius:8px; background:var(--b-surface-2); }
.b-doc__scan{ position:relative; overflow:hidden; }
.b-doc__scan::after{ content:""; position:absolute; left:0; right:0; height:30%; top:-30%; background:linear-gradient(to bottom, transparent, color-mix(in srgb, var(--b-brand) 35%, transparent)); animation:b-scan 1.4s var(--b-ease) infinite; }
@keyframes b-scan{ to{ top:100%; } }

/* 5.19 Mise en page */
.b-screen{ min-height:100dvh; display:flex; flex-direction:column; background:var(--b-bg); background-image:var(--b-grad-mist); background-repeat:no-repeat; background-size:100% 420px; }
.b-screen__body{ flex:1; padding:var(--b-s-2) var(--b-gutter) var(--b-s-6); display:grid; gap:var(--b-s-5); align-content:start; }
.b-split{ display:grid; grid-template-columns: minmax(280px, 380px) minmax(0,1fr); min-height:100dvh; }
.b-split__list{ border-right:1px solid var(--b-line); overflow:auto; }
.b-desk{ display:grid; grid-template-columns: 248px minmax(0,1fr); min-height:100dvh; }
@media (max-width: 899px){ .b-split, .b-desk{ grid-template-columns: minmax(0,1fr); } .b-split__list{ border-right:0; } }
.b-grid{ display:grid; gap:var(--b-s-5); grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.b-table{ width:100%; border-collapse:collapse; font-size:var(--b-fs-sm); }
.b-table th{ text-align:left; font-weight:var(--b-fw-semi); color:var(--b-ink-2); padding:var(--b-s-3) var(--b-s-4); }
.b-table td{ padding:var(--b-s-3) var(--b-s-4); box-shadow: inset 0 1px 0 var(--b-line); vertical-align:middle; }
.b-table tr:hover td{ background:var(--b-surface-2); }


/* 5.20 Ajouts V11 §10 : puce pulsée, glisser pour confirmer, bannière hors ligne, densité bureau, aperçu de document */
.b-live{ position:relative; display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--b-brand); flex:none; }
.b-live::after, .b-cal__day--tour .b-cal__dot::after{ content:""; position:absolute; inset:0; border-radius:50%; background:var(--b-brand); animation:b-live 1.8s var(--b-ease-out) infinite; }
.b-cal__day--tour .b-cal__dot{ position:relative; }
@keyframes b-live{ from{ transform:scale(1); opacity:.65; } to{ transform:scale(2.8); opacity:0; } }

.b-swipe{ --p:0; position:relative; height:76px; border-radius:38px; background:var(--b-brand-soft); box-shadow: inset 0 0 0 2px var(--b-brand); overflow:hidden; }
.b-swipe::before{ content:""; position:absolute; inset:0 auto 0 0; width:calc(38px + var(--p) * (100% - 38px) / 100); border-radius:38px; background:color-mix(in srgb, var(--b-brand) 22%, transparent); }
.b-swipe__label{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:10px; padding-left:64px; color:var(--b-brand-ink);
  font-family:var(--b-font-display); font-size:var(--b-fs-md); font-weight:var(--b-fw-black); pointer-events:none; white-space:nowrap; }
.b-swipe__label::after{ content:"›››"; letter-spacing:2px; opacity:.7; animation:b-nudge 1.6s var(--b-ease) infinite; }
@keyframes b-nudge{ 50%{ transform:translateX(6px); opacity:1; } }
.b-swipe input{ -webkit-appearance:none; appearance:none; position:absolute; top:0; bottom:0; left:6px; width:calc(100% - 12px); height:100%; margin:0; background:transparent; cursor:grab; touch-action:pan-y; }
.b-swipe input::-webkit-slider-runnable-track{ height:76px; background:transparent; }
.b-swipe input::-webkit-slider-thumb{ -webkit-appearance:none; width:64px; height:64px; margin-top:6px; border-radius:50%; background:var(--b-brand) var(--b-swipe-arrow) center/28px no-repeat; box-shadow:var(--b-sh-brand); }
.b-swipe input::-moz-range-track{ height:76px; background:transparent; }
.b-swipe input::-moz-range-thumb{ width:64px; height:64px; border:0; border-radius:50%; background:var(--b-brand) var(--b-swipe-arrow) center/28px no-repeat; box-shadow:var(--b-sh-brand); }
.b-swipe input:focus-visible{ outline:3px solid var(--b-focus); outline-offset:4px; border-radius:38px; }
.b-swipe[data-done="true"]{ background:var(--b-brand); }
.b-swipe[data-done="true"] .b-swipe__label{ color:var(--b-on-brand); padding-left:0; }
.b-swipe[data-done="true"] .b-swipe__label::after{ content:none; }
.b-swipe[data-done="true"] input{ visibility:hidden; }

.b-banner{ display:flex; align-items:center; gap:var(--b-s-3); min-height:48px; padding:var(--b-s-2) var(--b-gutter); background:var(--b-warn-soft); color:var(--b-warn); font-weight:var(--b-fw-semi); font-size:var(--b-fs-sm); }
.b-banner--info{ background:var(--b-info-soft); color:var(--b-info); }
.b-banner .b-banner__act{ margin-left:auto; }

@media (min-width: 900px){
  .b-dense{ --b-fs-sm:.875rem; --b-fs-md:.9375rem; --b-fs-lg:1.125rem; --b-fs-xl:1.375rem; font-size:var(--b-fs-md); }
  .b-dense .b-list__item{ min-height:56px; padding-block:var(--b-s-2); }
  .b-dense .b-badge{ min-height:24px; }
}

.b-paper{ color-scheme:light; --b-ink:#0E2321; --b-ink-2:#455A57; --b-ink-3:#5E726F; --b-surface:#FFFFFF; --b-surface-2:#EAF0EE; --b-line:#DCE5E2; --b-line-strong:#7E918D;
  --b-brand:#0A6B5F; --b-brand-ink:#07564C; --b-brand-soft:#DDF1EC; --b-on-brand:#FFFFFF; --b-ok:#17703F; --b-ok-soft:#E2F3E8; --b-warm-ink:#8A3F10; --b-warm-soft:#FCEBDD;
  background:#FFFFFF; color:var(--b-ink); border-radius:6px; box-shadow:0 1px 2px rgba(0,0,0,.08), 0 16px 40px -16px rgba(0,0,0,.35); }

.b-timeline{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.b-timeline > li{ position:relative; display:grid; grid-template-columns:72px 1fr auto; gap:var(--b-s-3); align-items:start; padding:var(--b-s-2) 0 var(--b-s-2) 20px; }
.b-timeline > li::before{ content:""; position:absolute; left:4px; top:16px; width:10px; height:10px; border-radius:50%; background:var(--b-surface); box-shadow: inset 0 0 0 2px var(--b-brand); }
.b-timeline > li::after{ content:""; position:absolute; left:8px; top:28px; bottom:-8px; width:2px; background:var(--b-line); }
.b-timeline > li:last-child::after{ display:none; }
.b-timeline > li[data-s="ok"]::before{ background:var(--b-ok); box-shadow:none; }
.b-timeline time{ font-family:var(--b-font-mono); color:var(--b-ink-2); font-size:var(--b-fs-sm); }

/* ---------- 6. Réduction des animations ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .b-stepper__fill::after, .b-skel::after, .b-arrive::after, .b-doc__scan::after, .b-live::after, .b-cal__day--tour .b-cal__dot::after{ display:none; }
  .b-found__check path{ stroke-dashoffset:0; }
}
/* Contraste renforcé demandé par le système */
@media (prefers-contrast: more){
  :root{ --b-ink-2: var(--b-ink); --b-line: var(--b-line-strong); }
}
/* Mode couleurs forcées (Windows) : garder les repères */
@media (forced-colors: active){
  .b-btn, .b-card, .b-slot, .b-tile, .b-chip, .b-cal__day, .b-list{ border:1px solid CanvasText; }
  .b-gauge::after, .b-stepper__fill, .b-ring{ forced-color-adjust:none; }
}

.dossier__form{grid-template-columns:1fr !important;margin-top:8px}
.nodirect{margin-top:12px;padding:12px 16px;border-radius:12px;background:var(--b-surface, rgba(0,0,0,.03));border:1px solid var(--b-line, rgba(0,0,0,.1))}
.nodirect ul{margin:6px 0 0;padding-left:20px;display:grid;gap:2px}
/* Recette 03/11 : liens de source dans une phrase : zone de clic portée à 44 px de haut sans changer la mise en page */
a[href^="http"]{display:inline-block;padding:12px 7px;margin:-12px -7px}

/* ===== Site vitrine V11 : couche page, construite sur les jetons --b-* (design_tokens_v11.css ci-dessus) ===== */
body{margin:0;background:var(--b-bg);color:var(--b-ink)}
body.b-app{font-size:var(--b-fs-md);line-height:var(--b-lh-loose)}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--b-font-display);line-height:var(--b-lh-tight);text-wrap:balance}
h1{font-size:var(--b-fs-4xl);font-weight:800;letter-spacing:-.025em}
h2{font-size:clamp(1.75rem,3vw + .6rem,2.5rem);font-weight:800;letter-spacing:-.015em}
h3{font-size:var(--b-fs-lg);font-weight:700}
p{max-width:64ch}
.muted{color:var(--b-ink-2)}
.note{font-size:var(--b-fs-sm);color:var(--b-ink-2)}
section{padding-block:clamp(48px,7vw,96px)}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
section[id],[id].panel,#demo{scroll-margin-top:88px}
.head{display:grid;gap:10px}
.eyebrow{font-size:var(--b-fs-sm);font-weight:600;color:var(--b-brand-ink);letter-spacing:.01em}
.ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.b-btn{white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.b-icon--xl{width:48px;height:48px}

/* En-tête et menu replié */
header.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--b-bg) 86%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);box-shadow:0 1px 0 var(--b-line)}
header.top .wrap{display:flex;align-items:center;gap:16px;padding-block:10px}
.logo{font-family:var(--b-font-display);font-weight:800;font-size:1.5rem;letter-spacing:-.02em;text-decoration:none;color:var(--b-ink);display:inline-flex;align-items:center;gap:10px;margin-right:auto;min-height:44px}
.logo__mark{width:34px;height:34px;border-radius:11px;background:var(--b-grad-water);color:#fff;display:grid;place-items:center;box-shadow:var(--b-sh-brand)}
.logo__mark .b-icon{width:20px;height:20px}
nav.links{display:flex;gap:4px}
nav.links a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:var(--b-r-md);text-decoration:none;font-weight:600;font-size:var(--b-fs-sm);color:var(--b-ink-2);white-space:nowrap}
nav.links a:hover{color:var(--b-ink);background:var(--b-surface-2)}
.menu-btn{display:none}
.top .demo-btn{order:2}
@media (max-width:900px){
  .menu-btn{display:inline-flex;order:3}
  .menu-btn[aria-expanded="true"]{--_bg:var(--b-ink);--_fg:var(--b-bg)}
  header.top .wrap{flex-wrap:wrap;gap:10px}
  nav.links{display:none;order:4;flex-basis:100%;flex-direction:column;gap:0;padding:4px 0 8px}
  header.top.open nav.links{display:flex}
  nav.links a{min-height:52px;padding:0 8px;font-size:var(--b-fs-md);color:var(--b-ink);border-radius:0;box-shadow:inset 0 -1px 0 var(--b-line);white-space:normal}
  nav.links a:last-child{box-shadow:none}
}
/* V12 : « Demander une démo » gardé en entier sur téléphone, marges réduites */
@media (max-width:480px){header.top .wrap{gap:6px}.logo{font-size:1.125rem;gap:6px}.logo__mark{width:28px;height:28px;border-radius:9px}.top .demo-btn,.menu-btn{padding:0 10px;font-size:var(--b-fs-sm)}}
@media (max-width:374px){.logo__t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}}

/* 1. Hero : brume, volutes, maquette du téléphone salarié */
.hero{position:relative;overflow:hidden;isolation:isolate;padding-block:clamp(40px,6vw,88px) clamp(40px,5vw,72px)}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--b-grad-mist);background-size:100% 520px;background-repeat:no-repeat}
.hero__steam{position:absolute;z-index:-1;top:24px;right:6%;width:260px;height:220px;color:var(--b-brand);opacity:.16;pointer-events:none}
.hero__steam path{animation:steam 12s ease-in-out infinite;transform-origin:center}
.hero__steam path:nth-child(2){animation-delay:-4s}.hero__steam path:nth-child(3){animation-delay:-8s}
@keyframes steam{0%,100%{transform:translateY(0);opacity:.7}50%{transform:translateY(-14px);opacity:1}}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(24px,5vw,64px);align-items:center}
.hero h1 em{font-style:normal;background:linear-gradient(135deg,var(--b-brand),var(--b-brand-2));-webkit-background-clip:text;background-clip:text;color:transparent}
@media (forced-colors:active){.hero h1 em{color:CanvasText;background:none}}
.hero .lede{font-size:clamp(1.125rem,.6vw + 1rem,1.25rem);color:var(--b-ink-2);margin-top:20px}
.proof{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0;padding:0;list-style:none}
.proof li{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:var(--b-r-pill);background:var(--b-surface);box-shadow:var(--b-sh-1),var(--b-hairline);font-size:var(--b-fs-sm);font-weight:600}
.proof li .b-icon{width:20px;height:20px;color:var(--b-brand)}
.refs{margin-top:36px;display:grid;gap:10px}
.refs p{font-size:var(--b-fs-sm);color:var(--b-ink-2);font-weight:600}
.refs ul{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0;padding:0;list-style:none}
.refs li{font-family:var(--b-font-display);font-weight:800;font-size:1.125rem;letter-spacing:-.01em;color:var(--b-ink-2);filter:grayscale(1)}
.phone{justify-self:center;width:min(100%,320px);border-radius:40px;padding:12px;background:var(--b-surface);box-shadow:var(--b-sh-3),var(--b-hairline);display:grid;gap:12px;transform:rotate(1.5deg)}
.phone__screen{border-radius:30px;background:var(--b-bg);background-image:var(--b-grad-mist);padding:18px 14px 16px;display:grid;gap:12px}
.phone__bar{display:flex;justify-content:space-between;font-size:var(--b-fs-sm);font-weight:700}
.phone .b-wallet{padding:18px;min-height:0;gap:8px}
.phone .b-wallet__amount{font-size:2.5rem}
.phone .b-state{padding:16px;border-radius:var(--b-r-lg)}
.phone .b-state__icon{width:40px;height:40px;border-radius:12px}
.phone .fakebtn{display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:var(--b-r-md);background:var(--b-brand);color:var(--b-on-brand);font-weight:700;font-size:var(--b-fs-sm);box-shadow:var(--b-sh-brand)}
@media (max-width:900px){.hero__grid{grid-template-columns:1fr}.phone,.hero__steam{display:none}}

/* 2. Étapes : 3 tuiles d'état iconées */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:32px 0 0;padding:0;list-style:none}
@media (max-width:820px){.steps{grid-template-columns:1fr}}
.steps .b-state{align-content:start;gap:10px}
.steps .who{font-size:var(--b-fs-sm);font-weight:600;color:var(--b-brand-ink)}
.steps p{color:var(--b-ink-2)}

/* 3. Simulateur : 3 champs, résultats dans une carte portefeuille */
.sim{margin-top:28px;display:grid;gap:20px;min-width:0}
.sim .in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:720px){.sim .in{grid-template-columns:1fr}}
.sim label,form.demo label,form.join label{display:grid;gap:6px;font-size:var(--b-fs-sm);font-weight:600;align-content:start;min-width:0}
.b-input{font-size:var(--b-fs-md)}
select.b-input{appearance:none;-webkit-appearance:none;padding-right:44px;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(-45deg,transparent 50%,currentColor 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.err,.ferr,.ferr2{color:var(--b-danger);font-size:var(--b-fs-sm);font-weight:600}
.ferr:empty,.ferr2:empty{display:none}
.out.b-wallet{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding:clamp(20px,3vw,32px)}
@media (max-width:820px){.out.b-wallet{grid-template-columns:1fr}}
.out div{display:grid;gap:6px;align-content:start;min-width:0}
.out b{font-family:var(--b-font-display);font-size:var(--b-fs-2xl);font-weight:800;line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.out span{font-size:var(--b-fs-sm);opacity:.95}
.sim .hyp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:12px}
@media (max-width:720px){.sim .hyp{grid-template-columns:1fr}}
.sim .row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.sim .fld{display:grid;gap:6px;align-content:start;min-width:0}
.sim .hint{margin:0;font-size:var(--b-fs-sm);color:var(--b-ink-2)}
#sim-send{white-space:normal;text-align:center;line-height:1.25;padding-block:10px}

/* Replis génériques */
details{min-width:0}
.fold{border-radius:var(--b-r-lg);background:var(--b-surface);box-shadow:var(--b-sh-1),var(--b-hairline);padding:0 18px}
.fold+.fold{margin-top:10px}
.fold>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;cursor:pointer;font-family:var(--b-font-display);font-weight:700;font-size:var(--b-fs-md)}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::after{content:"";flex:none;width:10px;height:10px;border-right:2px solid var(--b-brand);border-bottom:2px solid var(--b-brand);transform:rotate(45deg) translateY(-3px);transition:transform var(--b-t) var(--b-ease)}
.fold[open]>summary::after{transform:rotate(-135deg)}
.fold>:not(summary){margin-bottom:16px}
.fold p,.fold li{color:var(--b-ink-2)}
.fold ul{padding-left:20px;display:grid;gap:4px;margin:0 0 16px}

/* 4. Formules et prix */
.certain{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:28px}
@media (max-width:720px){.certain{grid-template-columns:1fr}}
.certain .b-card{display:grid;gap:8px;align-content:start}
.certain .b-card--tour{background-image:var(--b-grad-mist);box-shadow:var(--b-sh-2),inset 0 0 0 2px color-mix(in srgb,var(--b-brand) 40%,transparent)}
.certain h3{display:flex;align-items:center;gap:10px}
.certain p{color:var(--b-ink-2)}
.fcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}
@media (max-width:900px){.fcards{grid-template-columns:1fr}}
.fcard{display:grid;gap:10px;grid-template-rows:auto auto 1fr auto;min-width:0}
.fcard h3{font-size:1.5rem}
.fcard .lvl{display:flex;align-items:center;gap:8px;font-size:var(--b-fs-sm);color:var(--b-ink-2)}
.dots{display:inline-flex;gap:4px}.dots i{width:22px;height:8px;border-radius:4px;background:var(--b-surface-2);box-shadow:inset 0 0 0 1px var(--b-line-strong)}.dots i.on{background:var(--b-brand);box-shadow:none}
.fcard ul{padding-left:20px;margin:0;color:var(--b-ink-2);display:grid;gap:2px;align-content:start}
.fprice{padding-top:12px;box-shadow:inset 0 1px 0 var(--b-line);display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.fprice b{font-family:var(--b-font-display);font-size:var(--b-fs-2xl);font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.fprice span{font-size:var(--b-fs-sm);color:var(--b-ink-2)}
.pack{margin-top:20px}
.pack .b-state__icon{background:var(--b-warm-soft);color:var(--b-warm-ink)}
.pack__steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:12px 0 4px;padding:0;list-style:none;counter-reset:st}
@media (max-width:900px){.pack__steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.pack__steps{grid-template-columns:1fr}}
.pack__steps li{display:grid;gap:4px;align-content:start;padding:14px 16px;border-radius:var(--b-r-lg);background:color-mix(in srgb,var(--b-surface) 70%,transparent)}
.pack__steps b{font-family:var(--b-font-display);font-size:var(--b-fs-md)}
.pack__steps span{font-size:var(--b-fs-sm);color:var(--b-ink-2)}
.pack__steps .p{color:var(--b-warm-ink);font-weight:700}
.pack .note{color:var(--b-ink-2)}
.folds{margin-top:20px;max-width:900px}
/* V12 : suppléments visibles en pastilles (prix HT) */
.supp{margin-top:24px;display:grid;gap:12px}
.supp h3{font-size:var(--b-fs-lg)}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.pills li{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:6px 14px;border-radius:var(--b-r-pill);background:var(--b-surface);box-shadow:var(--b-sh-1),var(--b-hairline);font-size:var(--b-fs-sm);line-height:1.3}
.pills b{color:var(--b-brand-ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.gc{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}

/* Tableaux : cartes sur téléphone, sans défilement latéral */
.tablewrap{border-radius:var(--b-r-md);background:var(--b-surface-2);overflow:hidden}
table{border-collapse:collapse;width:100%;font-size:var(--b-fs-sm)}
th,td{text-align:left;padding:10px 14px;vertical-align:top;box-shadow:inset 0 -1px 0 var(--b-line)}
tr:last-child td,tr:last-child th{box-shadow:none}
thead th{font-weight:700;color:var(--b-ink)}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
tbody th{font-weight:500}
td.s{color:var(--b-ink-2)}
@media (max-width:620px){
  .cards{background:transparent;border-radius:0;overflow:visible}
  .cards thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .cards table,.cards tbody,.cards tr,.cards th,.cards td{display:block;width:auto}
  .cards tr{background:var(--b-surface-2);border-radius:var(--b-r-md);padding:10px 14px;margin-bottom:8px}
  .cards th,.cards td{padding:3px 0;box-shadow:none}
  .cards tbody th{font-weight:700}
  .cards td[data-label]{display:flex;justify-content:space-between;align-items:baseline;gap:12px;text-align:right}
  .cards td[data-label]::before{content:attr(data-label);color:var(--b-ink-2);font-weight:400;text-align:left}
  .cards td.s:empty{display:none}
  .cards td.s{text-align:left}
}

/* 5. Pour vous : onglets */
.tabs.b-seg{margin-top:28px;max-width:760px;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-flow:row}
@media (max-width:520px){.tabs.b-seg{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tabs [role=tab]{min-width:0;padding:0 6px;cursor:pointer;color:var(--b-ink-2)}
.tabs [role=tab][aria-selected="true"]{color:var(--b-ink)}
.panel{margin-top:16px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px 40px;align-items:start;padding:clamp(20px,3vw,32px)}
.panel[hidden]{display:none}
@media (max-width:820px){.panel{grid-template-columns:1fr}}
.panel h3{font-size:1.5rem}
.panel ul.pts{padding-left:20px;display:grid;gap:8px;margin:14px 0 0}
.panel ul.pts li::marker{color:var(--b-brand)}
.panel .side{display:grid;gap:14px;align-content:start;margin:0}
.proofbox{border-radius:var(--b-r-lg);background:var(--b-brand-soft);color:var(--b-brand-ink);padding:16px 18px}
.proofbox b{font-family:var(--b-font-display);font-size:var(--b-fs-2xl);font-weight:800;letter-spacing:-.02em;display:block;line-height:1.1;margin-bottom:4px}
.src{font-size:var(--b-fs-sm);color:var(--b-ink-2)}
.soon{display:inline-flex;vertical-align:middle;margin-right:6px}
.bar{display:grid;grid-template-columns:88px minmax(0,1fr) 64px;gap:10px;align-items:center;padding-block:4px;font-size:var(--b-fs-sm)}
.bar .track{height:12px;border-radius:6px;background:var(--b-surface-2);position:relative;overflow:hidden}
.bar .fill{position:absolute;inset:0 auto 0 0;border-radius:6px;background:var(--b-ink-3)}
.bar.eco .fill{background:var(--b-brand)}
.bar .v{text-align:right;font-weight:600;white-space:nowrap}
.panel .side .fold{background:var(--b-surface-2);box-shadow:none}
.fold ul.dl{list-style:none;padding:0;display:grid;grid-template-columns:1fr;gap:8px}
.dl__btn,.dl__all{width:100%;white-space:normal;line-height:1.25;padding-block:10px}
.dl__btn{justify-content:flex-start;text-align:left;--_bg:var(--b-surface);font-weight:600}
.dl__btn::before{content:"\2193";flex:none;display:inline-grid;place-items:center;width:24px;height:24px;border-bottom:2px solid currentColor;color:var(--b-brand-ink);font-weight:800;line-height:1}

/* 6. Laveurs (V12 : encart sobre en bas de page, détail et formulaire repliés) */
.pros{padding-top:0}
.joincta{display:grid;gap:16px;padding:clamp(20px,3vw,32px)}
.joincta h2{font-size:clamp(1.375rem,1.5vw + .9rem,1.75rem)}
.joinbox>summary{list-style:none;justify-self:start;width:max-content;max-width:100%;white-space:normal;text-align:center}
.joinbox>summary::-webkit-details-marker{display:none}
.joinbox[open]>summary{--_bg:var(--b-brand-soft);--_fg:var(--b-brand-ink);--_sh:none}
.joinbox__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 40px;align-items:start;margin-top:20px}
@media (max-width:900px){.joinbox__body{grid-template-columns:1fr}}
.facts{padding-left:20px;display:grid;gap:6px;margin:0 0 16px}
form.join{display:grid;gap:14px;min-width:0}
form.join .row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:480px){form.join .row{grid-template-columns:1fr}}
form.join .b-btn{justify-self:start}
form.join .b-btn[hidden]{display:none}
.ok{font-size:var(--b-fs-sm);color:var(--b-ok);font-weight:600}

/* 7. FAQ et démo */
.faq{margin-top:24px;max-width:860px}
.demo-box{margin-top:clamp(40px,6vw,72px);padding:clamp(20px,3vw,36px);background-image:var(--b-grad-mist)}
form.demo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:20px;max-width:760px}
@media (max-width:620px){form.demo{grid-template-columns:1fr}}
form.demo .full{grid-column:1/-1}
form.demo .b-btn{justify-self:start}
.opt{font-weight:400;color:var(--b-ink-2)}
.simnote{font-size:var(--b-fs-sm);background:var(--b-info-soft);color:var(--b-info);border-radius:var(--b-r-md);padding:10px 14px;max-width:none;font-weight:600}
.simnote[hidden],.note[hidden],.ok[hidden],.err[hidden],.simx[hidden]{display:none}
/* V12.3 : formulaires branchés sur l'API : message d'erreur, envoi en cours, champ piège, mention d'information */
.is-err{color:var(--b-danger)!important;font-weight:600}
.is-sending{opacity:.75;cursor:progress}
.hp{position:absolute!important;left:-10000px!important;top:auto;width:1px;height:1px;overflow:hidden;visibility:hidden}
.privacy{font-size:var(--b-fs-sm);color:var(--b-ink-2);margin:0;flex-basis:100%}
.privacy a{color:inherit;text-decoration:underline;display:inline-block;min-height:44px;line-height:44px}
.fcap{flex-basis:100%;min-height:0}
.privacy-dlg{max-width:min(560px,calc(100vw - 32px));border:0;padding:24px;color:var(--b-ink);background:var(--b-surface)}
.privacy-dlg::backdrop{background:rgba(0,0,0,.45)}
.privacy-dlg p{max-width:none;margin:0 0 12px}
.simx{justify-self:start}

footer{padding-block:40px;box-shadow:inset 0 1px 0 var(--b-line);color:var(--b-ink-2);font-size:var(--b-fs-sm)}
footer .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px;align-items:start}
@media (max-width:760px){footer .grid{grid-template-columns:1fr}}
footer .fold>summary{font-family:var(--b-font);font-size:var(--b-fs-sm);font-weight:600;min-height:48px;color:var(--b-ink)}
form.notify{display:flex;flex-wrap:wrap;gap:10px;align-items:end;min-width:0}
form.notify label{display:grid;gap:6px;font-weight:600;flex:1 1 200px;min-width:0}
form.notify .note,form.notify .ferr{flex-basis:100%;margin:0}
form.notify label.notify-consent{display:grid;flex-basis:100%;font-weight:400;font-size:var(--b-fs-sm)}
/* 09/11/2026 : « Ouvrir mon compte » (inscription entreprise dans l'app), bouton principal du haut de page */
.cta-ent{display:inline-grid;gap:4px;justify-items:start}
.cta-sub{font-size:var(--b-fs-sm);color:var(--b-ink-2);padding-left:4px}
.cta-ent ~ .b-btn{align-self:flex-start}
footer .legal-id{margin:20px 0 0;max-width:none}
.demo-mode{margin:0 0 12px;padding:8px 12px;font-size:1rem;line-height:1.4;color:var(--b-ink-2);background:var(--b-surface-2);border-left:4px solid var(--b-line-strong);border-radius:var(--b-r-sm, 6px);grid-column:1/-1}
footer .legal{margin-top:12px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
footer .legal a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;color:var(--b-brand);font-weight:600}
footer .legal span{padding:0 8px}
a.lnk{display:inline-flex;align-items:center;min-height:44px;color:var(--b-brand);font-weight:600}

/* ===== V12 (02/11, décisions de Vianney) : persona gestionnaire / DAF / DRH ===== */
/* Preuve « budget plafonné » sous le texte du hero, à toutes les largeurs */
.hero-pay{display:flex;align-items:center;gap:12px;margin:20px 0 0;padding:12px 16px;max-width:max-content;border-radius:var(--b-r-lg);background:var(--b-surface);box-shadow:var(--b-sh-2),var(--b-hairline)}
.hero-pay .b-icon{color:var(--b-brand);flex:none}
.hero-pay span{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;font-size:var(--b-fs-sm);color:var(--b-ink-2);font-weight:600}
.hero-pay b{font-family:var(--b-font-display);font-size:var(--b-fs-lg);color:var(--b-ink)}
.hero .ctas{margin-top:20px}
@media (max-width:900px){.hero-pay{max-width:none}}
/* Budget plafonné : carte dédiée, jauge et paliers d'alerte */
.cap{margin-top:24px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px 40px;align-items:center;background-image:var(--b-grad-mist);box-shadow:var(--b-sh-2),inset 0 0 0 2px color-mix(in srgb,var(--b-brand) 40%,transparent)}
@media (max-width:820px){.cap{grid-template-columns:1fr}}
.cap__say{display:grid;gap:12px;min-width:0}
.cap__say .eyebrow{display:inline-flex;align-items:center;gap:8px}
.cap__say .eyebrow .b-icon{width:22px;height:22px}
.cap h3{font-size:clamp(1.5rem,2vw + .9rem,2.25rem);font-weight:800;letter-spacing:-.015em}
.cap__say p:not(.eyebrow){color:var(--b-ink-2)}
.cap__gauge{display:grid;gap:12px;padding:18px;border-radius:var(--b-r-lg);background:var(--b-surface);box-shadow:var(--b-sh-1),var(--b-hairline);min-width:0}
.cap__top{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px 12px;font-size:var(--b-fs-sm);color:var(--b-ink-2);font-weight:600}
.cap__top b{font-family:var(--b-font-display);font-size:var(--b-fs-xl);color:var(--b-ink);font-variant-numeric:tabular-nums}
.cap__top small{font-size:var(--b-fs-sm);color:var(--b-ink-2);font-weight:600}
.cap__bar{position:relative;height:14px;border-radius:var(--b-r-pill);background:var(--b-surface-2);box-shadow:inset 0 0 0 1px var(--b-line)}
.cap__bar i{position:absolute;inset:0 auto 0 0;border-radius:inherit;background:var(--b-warn-fill,var(--b-brand));forced-color-adjust:none}
.cap__bar s{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:var(--b-ink);border-radius:1px;text-decoration:none}
.cap__steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.cap__steps li{display:grid;gap:2px;align-content:start;padding:10px 12px;border-radius:var(--b-r-md);background:var(--b-surface-2);font-size:var(--b-fs-sm);color:var(--b-ink-2);line-height:1.3}
.cap__steps li.on{background:var(--b-warn-soft);color:var(--b-warn)}
.cap__steps b{font-family:var(--b-font-display);font-size:var(--b-fs-lg);color:var(--b-ink)}
.cap__steps li.on b{color:inherit}
@media (max-width:420px){.cap__steps{grid-template-columns:1fr}}
/* Simulateur : 2 champs, un grand résultat en euros */
.sim .in{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px}
@media (max-width:620px){.sim .in{grid-template-columns:1fr}}
.out.b-wallet{display:grid;grid-template-columns:1fr;gap:6px;padding:clamp(22px,3.5vw,40px)}
.out.b-wallet #o-value{font-family:var(--b-font-display);font-size:clamp(2.75rem,6vw + 1rem,4.5rem);font-weight:800;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.out.b-wallet #o-value-d{font-size:var(--b-fs-lg);font-weight:700;opacity:1}
.out.b-wallet #o-detail{margin:8px 0 0;font-size:var(--b-fs-sm);max-width:60ch;opacity:.95}
.sim .hyp{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:620px){.sim .hyp{grid-template-columns:1fr}}
/* Comparer les formules en détail */
.cmp{margin-top:16px}
.cmp>.note{margin-top:0}
.cmp__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:900px){.cmp__grid{grid-template-columns:1fr}}
.cmp__f{display:grid;gap:10px;align-content:start;padding:16px;border-radius:var(--b-r-lg);background:var(--b-surface-2);min-width:0}
.cmp__f h4{margin:0;font-family:var(--b-font-display);font-size:var(--b-fs-lg);font-weight:700;color:var(--b-ink);display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.cmp__f .lvl-t{font-family:var(--b-font);font-size:var(--b-fs-sm);font-weight:600;color:var(--b-brand-ink)}
.cmp__f .cmp__who{margin:0;color:var(--b-ink-2)}
.cmp__part{display:grid;gap:4px;padding-top:10px;box-shadow:inset 0 1px 0 var(--b-line)}
.cmp__part p,.cmp__all{margin:0;display:flex;justify-content:space-between;align-items:baseline;gap:12px;max-width:none}
.cmp__part p span,.cmp__all span{font-weight:700;color:var(--b-ink)}
.cmp__part b,.cmp__all b{font-variant-numeric:tabular-nums;color:var(--b-brand-ink);white-space:nowrap}
.fold .cmp__part ul{margin:0;gap:2px}
.cmp__all{padding:10px 12px;border-radius:var(--b-r-md);background:var(--b-surface)}
.cmp__all b{font-family:var(--b-font-display);font-size:var(--b-fs-lg)}
/* Suppléments : prestations possibles, sans prix */
.pills li{color:var(--b-ink)}
.gc b{color:var(--b-ink)}
/* Salariés : proposer Brume à mon entreprise (parrainage) */
.refer{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:16px 40px;align-items:start;padding-top:24px;box-shadow:inset 0 1px 0 var(--b-line)}
@media (max-width:820px){.refer{grid-template-columns:1fr}}
.refer__say{display:grid;gap:10px}
.refer__say p{color:var(--b-ink-2)}
.refer__say p b{color:var(--b-ink)}
.refer__form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;min-width:0}
@media (max-width:560px){.refer__form{grid-template-columns:1fr}}
.refer__form label{display:grid;gap:6px;font-size:var(--b-fs-sm);font-weight:600;align-content:start;min-width:0}
.refer__form .full{grid-column:1/-1}
.refer__form .b-btn{justify-self:start;white-space:normal;text-align:center;line-height:1.25;padding-block:10px}
.refer__ok{display:grid;gap:6px;padding:14px 16px;border-radius:var(--b-r-lg);background:var(--b-ok-soft);color:var(--b-ink)}
.refer__ok[hidden]{display:none}
.refer__ok p{margin:0;max-width:none}
.refer__ok b{white-space:nowrap;font-family:var(--b-font-display);font-size:var(--b-fs-xl);letter-spacing:.04em;color:var(--b-ok);font-variant-numeric:tabular-nums}

/* V12 : mise en évidence temporaire du formulaire de démo à l'arrivée */
#demo.is-arrived{animation:arrive 2.4s var(--b-ease-out)}
@keyframes arrive{0%,55%{box-shadow:0 0 0 4px var(--b-brand),var(--b-sh-3)}100%{box-shadow:var(--b-sh-2),var(--b-hairline)}}
@media (prefers-reduced-motion:reduce){.hero__steam path{animation:none}.phone{transform:none}#demo.is-arrived{animation:none;box-shadow:0 0 0 4px var(--b-brand),var(--b-sh-3)}}