/* ==========================================================================
   CA Leasing & Factoring – design system V1 « Banque de confiance »
   Tokens relevés sur credit-agricole.fr (design system interne msl) ; voir DESIGN_SPEC.md et concept-confiance.md.
   Une couleur d'accent, Montserrat (titres) + Open Sans (texte), pilules 48 px, cartes plates 16 px, aucun dégradé.
   ========================================================================== */
:root {
  /* Fonds */
  --bg: #ffffff;
  --bg-alt: #f6f7f9;
  --bg-brand: #f4f9f3;
  --bg-brand-2: #d8ead7;
  --surface: #ffffff;
  --surface-readonly: #edeef1;
  /* Texte */
  --ink: #19212d;
  --ink-2: #253142;
  --ink-3: #465266;
  --muted: #666e8a;
  /* Bordures */
  --line: #d9dbe3;
  --line-strong: #aeb2c0;
  --line-input: #666e8a;
  /* Accent unique */
  --brand: #007461;
  --brand-hover: #075144;
  --brand-deep: #004652;
  --brand-2: #308276;
  --brand-pale: #ecf4eb;
  --on-brand: #ffffff;
  --link-on-dark: #8ad6c2;
  /* Sémantiques */
  --success: #137128; --success-bg: #eaf5eb; --success-strong: #008037;
  --danger: #ae0014;  --danger-bg: #ffedeb;  --danger-strong: #ca2f2e;
  --warning: #a64100; --warning-bg: #ffeee7; --warning-strong: #c85207;
  --info: #16688d;    --info-bg: #e9f5fd;    --info-strong: #097faf;
  --focus: #0a94a8; --focus-reverse: #ffffff;
  --footer-bg: #19212d; --footer-text: #d9dbe3; --footer-muted: #aeb2c0;
  /* Typographie */
  --font-heading: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-h1: 2.5rem; --fs-h1-page: 2.125rem; --fs-h2: 1.75rem; --fs-h3: 1.375rem; --fs-h4: 1.125rem;
  --fs-lead: 1.125rem; --fs-body: 1rem; --fs-small: .875rem; --fs-eyebrow: .875rem; --fs-legal: .875rem;
  --fs-figure: 2.5rem; --fs-btn: .9375rem; --fs-label: .875rem;
  --lh-h1: 1.2; --lh-h2: 1.25; --lh-h3: 1.3; --lh-body: 1.5; --lh-small: 1.45;
  --measure: 65ch; --measure-lead: 55ch; --measure-title: 22ch;
  /* Formes */
  --radius-xs: 4px; --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-pill: 999px;
  --shadow-s: 0 4px 8px rgba(41, 61, 94, .10);
  --shadow-m: 0 10px 30px rgba(41, 61, 94, .15);
  --shadow-l: 0 20px 40px rgba(41, 61, 94, .30);
  --btn-h: 48px; --btn-h-sm: 40px; --btn-px: 24px; --input-h: 48px; --input-px: 16px; --chip-h: 40px;
  --border-input: 1px; --border-btn: 1.5px;
  /* Espacements (échelle 4/8) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
  --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;
  --section-y: var(--sp-20); --card-pad: var(--sp-6);
  /* Grille */
  --container: 1184px; --gutter: 32px; --grid-gap: 24px; --header-h: 72px; --tunnel-h: 64px;

  /* ---- Alias de compatibilité (anciens noms : à ne plus utiliser dans le nouveau code) ---- */
  --brand-900: var(--brand-deep); --brand-800: var(--brand-deep); --brand-700: var(--brand); --brand-600: var(--brand-hover);
  --brand-500: var(--brand); --brand-200: var(--bg-brand-2); --brand-100: var(--brand-pale); --brand-50: var(--bg-brand);
  --mint: var(--brand-pale); --sun: var(--brand-2); --sun-100: var(--bg-brand);
  --success-100: var(--success-bg); --warning-100: var(--warning-bg); --danger-100: var(--danger-bg); --info-100: var(--info-bg);
  --shadow-sm: var(--shadow-s); --shadow: var(--shadow-m); --shadow-lg: var(--shadow-l);
  --font: var(--font-body);
}
@media (max-width: 1023px) { :root { --gutter: 24px; } }
@media (max-width: 767px) {
  :root {
    --fs-h1: 1.875rem; --fs-h1-page: 1.75rem; --fs-h2: 1.5rem; --fs-h3: 1.25rem; --fs-h4: 1.0625rem; --fs-lead: 1.0625rem; --fs-figure: 2.25rem;
    --gutter: 20px; --grid-gap: 16px; --section-y: var(--sp-12); --card-pad: var(--sp-5); --header-h: 60px; --chip-h: 44px;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font: 400 var(--fs-body)/var(--lh-body) var(--font-body); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.menu-open { overflow: hidden; }
img, svg, video { max-width: 100%; display: block; }
img { height: auto; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; color: var(--ink); margin: 0 0 var(--sp-4); text-wrap: balance; letter-spacing: 0; }
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: -.01em; max-width: var(--measure-title); }
h1.h1-page { font-size: var(--fs-h1-page); max-width: 30ch; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h3); font-weight: 600; }
p { margin: 0 0 var(--sp-4); }
p, li, dd, dt { max-width: var(--measure); }
small, .small { font-size: var(--fs-small); line-height: var(--lh-small); }
.lead { font-size: var(--fs-lead); color: var(--ink-2); max-width: var(--measure-lead); }
.muted { color: var(--muted); }
.ink-3 { color: var(--ink-3); }
.eyebrow { display: block; font: 600 var(--fs-eyebrow)/1.3 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--sp-3); max-width: none; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.tabular { font-variant-numeric: tabular-nums; }
a { color: var(--brand); text-underline-offset: 3px; }
a:hover { color: var(--brand-hover); }
hr, .divider { height: 1px; background: var(--line); border: 0; margin: var(--sp-6) 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus-reverse); }
.sr-only, .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--sp-4); top: -80px; background: #fff; color: var(--brand); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); z-index: 1000; font-weight: 600; text-decoration: none; }
.skip-link:focus { top: var(--sp-4); }
::selection { background: var(--bg-brand-2); }

/* ---------- Grille et sections ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container-narrow { max-width: 880px; }
.form-col { max-width: 640px; margin: 0 auto; }
.section { padding: var(--section-y) 0; }
.section-sm { padding: var(--sp-12) 0; }
.section-alt, .on-tint { background: var(--bg-alt); }
.section-brand { background: var(--bg-brand); }
.section-dark { background: var(--brand-deep); color: #fff; }
.section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }
.section-dark a:not(.btn) { color: var(--link-on-dark); }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-6); margin-bottom: var(--sp-10); flex-wrap: wrap; }
.section-head h2 { margin: 0; }
.section-head.center { justify-content: center; text-align: center; flex-direction: column; align-items: center; }
.section-sub { color: var(--ink-3); margin: var(--sp-3) 0 0; }
.grid { display: grid; gap: var(--grid-gap); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cards-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.stack-sm { display: flex; flex-direction: column; gap: var(--sp-2); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.row-between { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: var(--sp-2); } .mt-2 { margin-top: var(--sp-4); } .mt-3 { margin-top: var(--sp-6); } .mt-4 { margin-top: var(--sp-10); }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: var(--sp-2); } .mb-2 { margin-bottom: var(--sp-4); } .mb-3 { margin-bottom: var(--sp-6); }
@media (max-width: 960px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .grid-2, .grid-3, .grid-4, .cards-3 { grid-template-columns: minmax(0, 1fr); }
  .hide-mobile { display: none !important; }
  .section-head { margin-bottom: var(--sp-6); }
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--btn-h); padding: 0 var(--btn-px);
  border-radius: var(--radius-pill); border: var(--border-btn) solid transparent;
  font: 700 var(--fs-btn)/1.2 var(--font-heading); text-decoration: none; cursor: pointer; text-align: center;
  transition: background-color .15s, border-color .15s, color .15s; white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--brand); color: var(--on-brand); }
.btn-primary:hover { background: var(--brand-hover); color: #fff; }
.btn-primary:active { background: var(--brand-deep); }
.btn-secondary { background: #fff; color: var(--brand); border-color: var(--brand); }
.btn-secondary:hover { background: var(--bg-brand); color: var(--brand-hover); border-color: var(--brand-hover); }
.btn-secondary:active { background: var(--brand-pale); }
.btn-ghost { background: transparent; color: var(--brand); font-weight: 600; }
.btn-ghost:hover { text-decoration: underline; color: var(--brand-hover); }
.btn-on-dark, .btn-light { background: #fff; color: var(--brand); }
.btn-on-dark:hover, .btn-light:hover { background: var(--bg-brand); color: var(--brand-hover); }
.btn-outline-dark, .btn-outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .85); }
.btn-outline-dark:hover, .btn-outline-light:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: #fff; }
.btn-danger { background: var(--danger-strong); color: #fff; }
.btn-danger:hover { background: var(--danger); color: #fff; }
.btn-sm { min-height: var(--btn-h-sm); padding: 0 var(--sp-4); font-size: .875rem; }
.btn-lg { min-height: var(--btn-h); padding: 0 var(--sp-8); font-size: 1rem; }
.btn-block { width: 100%; }
.btn[disabled], .btn.is-loading { background: var(--surface-readonly); color: var(--ink-3); border-color: var(--line-strong); cursor: not-allowed; }
.btn .icon { width: 20px; height: 20px; flex: none; }
.spinner { width: 18px; height: 18px; border: 2.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.link-arrow { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 600; color: var(--brand); text-decoration: none; }
.link-arrow:hover { text-decoration: underline; color: var(--brand-hover); }
.link-arrow::after { content: ""; width: 18px; height: 18px; background: currentColor; flex: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3.5 10h12M10.5 5l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3.5 10h12M10.5 5l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
@media (max-width: 767px) { .btn-mobile-block { width: 100%; } }

/* ---------- Cartes, badges, listes ---------- */
.card { background: var(--surface); border-radius: var(--radius-lg); padding: var(--card-pad); border: 1px solid var(--line); box-shadow: none; }
.on-tint .card, .section-alt .card, .section-brand .card, .card-on-tint { border-color: transparent; }
.card-elevated, .card-shadow { border: 0; box-shadow: var(--shadow-s); }
.card-feature { background: var(--bg-brand); border: 0; border-radius: var(--radius-xl); }
.card-link { text-decoration: none; color: inherit; display: block; transition: box-shadow .15s; }
.card-link:hover { box-shadow: var(--shadow-s); color: inherit; }
.card-product { display: flex; flex-direction: column; padding: 0; overflow: hidden; text-decoration: none; color: var(--ink); border: 0; transition: box-shadow .15s; }
.card-product:hover { box-shadow: var(--shadow-s); color: var(--ink); }
.card-product img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.card-body { padding: var(--card-pad); display: flex; flex-direction: column; flex: 1; }
.card-body h3 { font-size: var(--fs-h4); margin-bottom: var(--sp-2); }
.card-body p { color: var(--ink-3); margin-bottom: var(--sp-3); }
/* Ligne de faits d'une carte produit (distincte de la barre de faits .facts ci-dessous) */
.card-body .facts, .card-facts { display: block; padding: 0; border: 0; gap: 0; color: var(--ink-3); font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 600; margin: 0 0 var(--sp-5); }
.card-body .link-arrow { margin-top: auto; }
.card-product:hover .link-arrow { text-decoration: underline; }
.panel-dark { background: var(--brand-deep); color: #fff; border-radius: var(--radius-xl); }
.panel-dark h2, .panel-dark h3, .panel-dark h4 { color: #fff; }
.panel-dark a:not(.btn) { color: var(--link-on-dark); }
.panel-dark .doc-card a:not(.btn) { color: var(--brand); }
.panel-dark .doc-card a:not(.btn):hover { color: var(--brand-hover); }
.panel-dark .lead, .lead-dark { font-size: var(--fs-lead); color: var(--footer-text); max-width: var(--measure-lead); }
.band { background: var(--brand-2); color: #fff; padding: var(--sp-12) 0; }
.band h2, .band h3 { color: #fff; margin-bottom: var(--sp-2); }
.band p { margin: 0; max-width: 60ch; }
.band-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8); flex-wrap: wrap; }
.band .btn { flex: none; }
.cta-band { background: var(--brand-2); color: #fff; border-radius: var(--radius-xl); padding: var(--sp-10); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-6); }
.cta-band h2, .cta-band h3 { color: #fff; margin: 0 0 var(--sp-2); }
.cta-band p { margin: 0; color: #fff; }
.badge { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 var(--sp-3); border-radius: var(--radius-pill); background: var(--brand-pale); color: var(--brand-deep); font: 600 .875rem/1 var(--font-body); white-space: nowrap; }
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-warning, .badge-sun { background: var(--warning-bg); color: var(--warning); }
.badge-danger { background: var(--danger-bg); color: var(--danger); }
.badge-info { background: var(--info-bg); color: var(--info); }
.badge-neutral { background: var(--bg-alt); color: var(--ink-3); }
.ai-badge { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--brand-pale); color: var(--brand-deep); font: 700 .75rem/1 var(--font-heading); letter-spacing: .04em; vertical-align: middle; white-space: nowrap; }
.ai-badge::before { content: ""; width: 11px; height: 11px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0c0 5.5-4.5 10-10 10 5.5 0 10 4.5 10 10 0-5.5 4.5-10 10-10-5.5 0-10-4.5-10-10z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0c0 5.5-4.5 10-10 10 5.5 0 10 4.5 10 10 0-5.5 4.5-10 10-10-5.5 0-10-4.5-10-10z'/%3E%3C/svg%3E") center/contain no-repeat; }
.icon-circle { width: 48px; height: 48px; border-radius: 50%; background: var(--brand-pale); color: var(--brand); display: grid; place-items: center; flex: none; }
.icon-circle svg { width: 24px; height: 24px; }
.step-circle, .step-num { width: 32px; height: 32px; border-radius: 50%; background: var(--brand); color: #fff; display: inline-grid; place-items: center; font: 700 .9375rem/1 var(--font-heading); flex: none; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-8); list-style: none; margin: 0; padding: 0; }
.steps li { position: relative; padding-top: 44px; }
.steps .step-num { position: absolute; left: 0; top: 0; }
.steps h3 { font-size: var(--fs-h4); margin-bottom: var(--sp-2); }
.steps p { color: var(--ink-3); margin: 0; }
.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.check-list li { position: relative; padding-left: 36px; font-weight: 600; }
.check-list li::before { content: ""; position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9'/%3E%3C/svg%3E") center / 24px no-repeat; }
.check-list.on-dark li { color: #fff; font-weight: 400; }
.check-list.on-dark li::before { background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238ad6c2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='11'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' stroke-width='2.2'/%3E%3C/svg%3E") center / 24px no-repeat; }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6); padding: var(--sp-8) 0; border-bottom: 1px solid var(--line); list-style: none; margin: 0; }
.facts-item strong { display: block; font: 700 1.5rem/1.2 var(--font-heading); color: var(--ink); font-variant-numeric: tabular-nums; }
.facts-item span { display: block; font-size: var(--fs-small); color: var(--ink-3); margin-top: var(--sp-1); }
.facts.facts-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 767px) { .facts, .facts.facts-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); } .steps { grid-template-columns: 1fr; gap: var(--sp-6); } }
.stat-number { font: 700 var(--fs-figure)/1.1 var(--font-heading); color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.figure { font: 700 var(--fs-figure)/1.1 var(--font-heading); color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* Notices et toasts */
.notice { display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); background: var(--info-bg); color: var(--info); border-left: 3px solid var(--info-strong); font-size: var(--fs-small); line-height: var(--lh-small); }
.notice > * { max-width: none; margin: 0; }
.notice-success { background: var(--success-bg); color: var(--success); border-left-color: var(--success-strong); }
.notice-warning, .notice-warn { background: var(--warning-bg); color: var(--warning); border-left-color: var(--warning-strong); }
.notice-danger { background: var(--danger-bg); color: var(--danger); border-left-color: var(--danger-strong); }
.toast-zone { position: fixed; left: var(--sp-6); bottom: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-2); z-index: 1000; width: min(420px, calc(100vw - 40px)); }
.toast { background: #fff; color: var(--ink); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); box-shadow: var(--shadow-m); border-left: 3px solid var(--brand); font-size: var(--fs-small); animation: pop .2s ease-out; }
.toast-success { border-left-color: var(--success-strong); }
.toast-error { border-left-color: var(--danger-strong); }
@keyframes pop { from { opacity: 0; transform: translateY(6px); } }
@keyframes fade { from { opacity: 0; } }

/* ---------- Formulaires ---------- */
.field { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-5); min-width: 0; }
.field:last-child { margin-bottom: 0; }
.form-grid .field, .stack .field { margin-bottom: 0; }
.field > label, .field > legend, .label { display: block; font: 600 var(--fs-label)/1.4 var(--font-heading); color: var(--ink); padding: 0; }
fieldset.field { border: 0; padding: 0; margin: 0 0 var(--sp-5); }
.field .help, .hint { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-3); margin: 0; }
.hint-ok, .help-ok { color: var(--success); font-weight: 600; }
.field .error, .error { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--danger); font-weight: 600; margin: 0; }
/* Message d'erreur visible (hors .field aussi) : pictogramme + texte rouge, jamais la couleur seule */
p.error:not([hidden]), .error-msg:not([hidden]) { display: flex; gap: var(--sp-2); align-items: flex-start; }
p.error::before, .error-msg::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 1px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.25' fill='none' stroke='%23000' stroke-width='1.75'/%3E%3Cpath d='M10 5.5v5.5' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='14.2' r='1.2'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.25' fill='none' stroke='%23000' stroke-width='1.75'/%3E%3Cpath d='M10 5.5v5.5' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='14.2' r='1.2'/%3E%3C/svg%3E") center/contain no-repeat; }
p.error:empty { display: none; }
.input, .select, .textarea {
  width: 100%; min-height: var(--input-h); padding: 0 var(--input-px);
  border: var(--border-input) solid var(--line-input); border-radius: var(--radius);
  background: #fff; font: 400 1rem/1.5 var(--font-body); color: var(--ink); appearance: none; -webkit-appearance: none;
  transition: border-color .15s;
}
.textarea { min-height: 112px; padding: var(--sp-3) var(--input-px); resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--muted); opacity: 1; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-3); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--focus); }
.input[aria-invalid="true"], .select[aria-invalid="true"], .input.is-invalid, .select.is-invalid { border: 2px solid var(--danger); }
.input[readonly] { background: var(--surface-readonly); }
.select { padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5l5 5 5-5' fill='none' stroke='%2319212d' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 20px; }
.input-group, .input-wrap { position: relative; display: flex; align-items: stretch; }
.input-group .input, .input-wrap .input { padding-right: 48px; }
.input-group .suffix, .input-wrap .suffix { position: absolute; right: var(--input-px); top: 50%; transform: translateY(-50%); color: var(--ink-3); font-weight: 600; pointer-events: none; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-5); }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 680px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }
.checkbox { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-2); cursor: pointer; max-width: none; }
.checkbox input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--brand); flex: none; }
.form-legal { margin: var(--sp-4) 0 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--muted); text-align: center; }

/* Tuiles de choix (radio) et chips */
.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--sp-3); }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.choice span { display: flex; flex-direction: column; gap: 4px; height: 100%; min-height: 72px; padding: var(--sp-4); border: 1px solid var(--line-input); border-radius: var(--radius); background: #fff; font-weight: 600; justify-content: center; transition: border-color .15s, background .15s; }
.choice span small { font-weight: 400; color: var(--ink-3); }
.choice input:checked + span { border: 2px solid var(--brand); background: var(--brand-pale); color: var(--brand-deep); padding: calc(var(--sp-4) - 1px); }
.choice input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus-reverse); }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip span, .chip-btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--chip-h); padding: 0 var(--sp-4); border-radius: var(--radius-pill); border: 1px solid var(--line-input); background: #fff; font: 600 var(--fs-small)/1.2 var(--font-body); color: var(--ink); cursor: pointer; }
.chip input:checked + span, .chip-btn[aria-pressed="true"], .chip-btn.is-active { background: var(--brand-pale); border: 2px solid var(--brand); color: var(--brand-deep); padding: 0 15px; }
.chip input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus-reverse); }
.chips-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-2); }
.chips-5 .chip span { width: 100%; padding: 0 6px; }
.chips-5 .chip input:checked + span { padding: 0 5px; }
.segmented { display: inline-flex; flex-wrap: wrap; gap: var(--sp-2); padding: 0; background: transparent; border: 0; }
.segmented button { font: 600 var(--fs-small)/1.2 var(--font-body); min-height: var(--chip-h); padding: 0 var(--sp-4); border-radius: var(--radius-pill); border: 1px solid var(--line-input); background: #fff; color: var(--ink); cursor: pointer; }
.segmented button[aria-pressed="true"], .segmented button.is-active { background: var(--brand-pale); border: 2px solid var(--brand); color: var(--brand-deep); padding: 0 15px; }

/* Curseur */
input[type="range"].range { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; --pct: 50%; }
input[type="range"].range::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: linear-gradient(to right, var(--brand) var(--pct), var(--line) var(--pct)); }
input[type="range"].range::-moz-range-track { height: 6px; border-radius: 99px; background: var(--line); }
input[type="range"].range::-moz-range-progress { height: 6px; border-radius: 99px; background: var(--brand); }
input[type="range"].range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 2px solid var(--brand); margin-top: -9px; }
input[type="range"].range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid var(--brand); }

/* Zone de dépôt */
.dropzone { border: 2px dashed var(--line-input); border-radius: var(--radius-lg); padding: var(--sp-8) var(--sp-6); text-align: center; background: var(--bg-alt); transition: border-color .15s, background .15s; cursor: pointer; }
.dropzone:hover, .dropzone.is-over, .dropzone:focus-within { border-color: var(--brand); background: var(--bg-brand); }
.dropzone input[type="file"] { display: none; }
.dropzone p { max-width: none; }

/* Stepper */
.stepper { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-2); list-style: none; padding: 0; margin: 0 0 var(--sp-8); counter-reset: step; }
.stepper li { display: flex; flex-direction: column; gap: var(--sp-2); font: 600 var(--fs-small)/1.3 var(--font-body); color: var(--ink-3); }
.stepper li::before { content: ""; height: 4px; border-radius: 2px; background: var(--line); }
.stepper li.is-done::before, .stepper li.is-current::before { background: var(--brand); }
.stepper li.is-current { color: var(--brand-deep); }
.stepper li button { all: unset; cursor: pointer; }
.stepper li button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus-reverse); border-radius: var(--radius-xs); }
.stepper-title { font: 600 1rem/1.3 var(--font-heading); color: var(--ink); margin: 0 0 var(--sp-3); }
@media (max-width: 767px) { .stepper li span { display: none; } }

/* Tableaux */
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.table th, .table td { text-align: left; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--surface-readonly); vertical-align: top; }
.table th { font: 600 var(--fs-small)/1.3 var(--font-body); color: var(--ink-3); background: var(--bg-alt); }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table tbody tr:hover { background: var(--bg-alt); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.table-wrap .table th:first-child, .table-wrap .table td:first-child { padding-left: var(--sp-5); }

/* Accordéon */
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary { list-style: none; cursor: pointer; padding: var(--sp-5) 44px var(--sp-5) 0; font: 600 1.0625rem/1.4 var(--font-body); color: var(--ink); position: relative; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: ""; position: absolute; right: var(--sp-2); top: 50%; width: 20px; height: 20px; margin-top: -10px; background: var(--brand); transition: transform .15s;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.accordion details[open] summary::after { transform: rotate(180deg); }
.accordion details > div { padding: 0 0 var(--sp-5); color: var(--ink-2); }

/* Modale */
.modal-backdrop { position: fixed; inset: 0; background: rgba(25, 33, 45, .5); display: grid; place-items: center; padding: var(--sp-4); z-index: 900; animation: fade .15s ease-out; }
.modal { width: 100%; max-width: 520px; max-height: calc(100vh - 32px); overflow: auto; background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow-l); padding: var(--sp-8); position: relative; animation: pop .18s ease-out; }
.modal-close { position: absolute; top: var(--sp-4); right: var(--sp-4); width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--bg-alt); cursor: pointer; font-size: 1.4rem; line-height: 1; color: var(--ink-2); }
.modal h3 { padding-right: 48px; }
@media (max-width: 767px) { .modal { padding: var(--sp-5); border-radius: var(--radius-lg); } }

/* Carte document (pièce lue automatiquement) */
.doc-card { background: #fff; color: var(--ink); border-radius: var(--radius-lg); padding: var(--sp-6); border: 1px solid var(--line); }
.panel-dark .doc-card, .on-tint .doc-card { border-color: transparent; }
.doc-head { padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line); }
.doc-name-row { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.doc-name-row svg { flex: none; width: 32px; height: 32px; }
.doc-name { font-weight: 600; margin: 0; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.doc-status { margin: 0; font-size: var(--fs-small); line-height: 1.6; color: var(--ink-3); }
.doc-status .ai-badge { margin-right: 6px; position: relative; top: -1px; }
.doc-fields { margin: 0; padding: var(--sp-4) 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line); }
.doc-fields dt { font-size: var(--fs-small); color: var(--muted); margin-bottom: 2px; }
.doc-fields dd { margin: 0; font-weight: 600; }
.doc-fields .ok { display: block; font-size: var(--fs-small); color: var(--success); font-weight: 600; }
.doc-fields .ko { display: block; font-size: var(--fs-small); color: var(--warning); font-weight: 600; }
.doc-checks { padding-top: var(--sp-4); }
.doc-checks-title { font-weight: 600; margin: 0 0 var(--sp-3); }
.doc-foot { margin: var(--sp-4) 0 0; font-size: var(--fs-small); color: var(--muted); }
.doc-foot a { font-weight: 600; }
@media (max-width: 767px) { .doc-card { padding: var(--sp-5); } .doc-fields { grid-template-columns: 1fr; gap: var(--sp-3); } }

/* Premier écran avec simulateur (accueil, affacturage) */
.hero { background: var(--bg-brand); padding: var(--sp-16) 0 var(--sp-20); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto 1fr; grid-template-areas: "copy card" "more card"; column-gap: var(--sp-16); row-gap: var(--sp-6); align-items: start; }
.hero-copy { grid-area: copy; padding-top: var(--sp-6); }
.hero-more { grid-area: more; }
.hero-card { grid-area: card; }
.hero .lead { margin-bottom: 0; }
.hero-more .check-list { margin-bottom: var(--sp-5); }
.card-sim { background: #fff; border-radius: var(--radius-xl); padding: var(--sp-8); }
.sim-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.sim-head h2 { font-size: var(--fs-h3); margin: 0; }
.sim-note { color: var(--muted); font-size: var(--fs-small); white-space: nowrap; }
.sim-result { background: var(--bg-brand); border-radius: var(--radius); padding: var(--sp-5); margin: var(--sp-6) 0 var(--sp-5); }
.sim-meta { color: var(--ink-3); margin: 0 0 var(--sp-1); }
.sim-figure { margin: 0 0 var(--sp-2); display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.sim-figure strong { font: 700 var(--fs-figure)/1.1 var(--font-heading); color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.sim-figure span { font-weight: 600; color: var(--ink-3); }
.sim-detail { margin: 0 0 var(--sp-2); color: var(--ink-3); }
.sim-legal { margin: 0; font-size: var(--fs-small); color: var(--muted); }
.sim-foot { margin: var(--sp-3) 0 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--muted); text-align: center; display: flex; flex-direction: column; gap: var(--sp-1); }
.sim-foot a { font-weight: 600; }
.ia-panel { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--sp-12); padding: var(--sp-12); align-items: center; }
@media (max-width: 1023px) { .hero-grid { column-gap: var(--sp-8); } .ia-panel { gap: var(--sp-8); padding: var(--sp-8); } }
/* Tablette (768–959 px) : la carte du simulateur passe sous la promesse, la colonne étroite écrasait les chips */
@media (max-width: 959px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "copy" "card" "more"; }
  .hero-copy { padding-top: 0; }
  .hero-card { width: 100%; max-width: 560px; }
}
@media (max-width: 767px) {
  .hero { padding: var(--sp-8) 0 var(--sp-10); }
  .hero-grid { grid-template-columns: 1fr; grid-template-areas: "copy" "card" "more"; row-gap: var(--sp-6); }
  .hero-copy { padding-top: 0; }
  .card-sim { padding: var(--sp-5); }
  .sim-head { flex-direction: column; gap: var(--sp-1); }
  .ia-panel { grid-template-columns: 1fr; padding: var(--sp-6) var(--sp-5); gap: var(--sp-6); border-radius: var(--radius-lg); }
}

/* Barre collante basse (outils et tunnels, mobile) */
.sticky-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: #fff; border-top: 1px solid var(--line); padding: var(--sp-3) var(--gutter) calc(var(--sp-3) + env(safe-area-inset-bottom)); display: none; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.sticky-bar strong { font: 700 1.125rem/1.2 var(--font-heading); font-variant-numeric: tabular-nums; }
.sticky-bar small { display: block; color: var(--ink-3); font-size: var(--fs-small); }
.sticky-bar .btn { flex: none; }
/* La réserve sous la barre est prise par le pied (padding-bottom) : pas de bande blanche sous le pied sombre */
@media (max-width: 767px) { body.has-sticky-bar .sticky-bar { display: flex; } body.has-sticky-bar:not(:has(.site-footer)) { padding-bottom: 88px; } }

/* ---------- En-tête ---------- */
.topbar { display: none; }
.site-header { position: sticky; top: 0; z-index: 500; background: #fff; border-bottom: 1px solid var(--line); }
.header-inner { height: var(--header-h); display: flex; align-items: center; gap: var(--sp-8); position: relative; }
.brand { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
.brand img { height: 44px; width: auto; }
.logo-mono { display: none; }
.nav-toggle { display: none; }
.nav-links { display: flex; gap: var(--sp-2); margin-left: var(--sp-2); flex: 1; list-style: none; padding: 0; }
.nav-links a { display: inline-flex; align-items: center; height: var(--header-h); padding: 0 var(--sp-3); color: var(--ink); text-decoration: none; font-weight: 600; font-size: .9375rem; white-space: nowrap; }
.nav-links a:hover { color: var(--brand-hover); }
.nav-links a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--brand); color: var(--ink); }
/* Le lien occupe toute la hauteur de l'en-tête : l'anneau de focus est dessiné à l'intérieur pour ne pas être rogné */
.nav-links a:focus-visible { outline-offset: -4px; box-shadow: inset 0 0 0 2px #fff; border-radius: var(--radius-sm); }
.nav-links a[aria-current="page"]:focus-visible { box-shadow: inset 0 0 0 2px #fff, inset 0 -3px 0 var(--brand); }
.header-cta { flex: none; margin-left: auto; }
.header-cta .short { display: none; }
.menu-mobile { display: none; }
/* En-tête des tunnels (offre, RDV, souscription, suivi) */
.site-header[data-layout="tunnel"] .header-inner { height: var(--tunnel-h); gap: var(--sp-6); }
.tunnel-step { font: 600 1rem/1.3 var(--font-heading); color: var(--ink); flex: 1; min-width: 0; }
.tunnel-step .ts-short, .tunnel-links .tl-short { display: none; }
.tunnel-links { display: flex; gap: var(--sp-4); margin-left: auto; flex: none; }
.tunnel-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-2); font-weight: 600; text-decoration: none; white-space: nowrap; border-radius: var(--radius-sm); }
.tunnel-links a:hover { text-decoration: underline; }
@media (max-width: 1099px) { .brand img { height: 40px; } .nav-links a { padding: 0 var(--sp-2); font-size: .9rem; } .header-inner { gap: var(--sp-5); } }
/* En-tête compact (burger, monogramme centré, pilule courte) dès que la navigation bureau ne tient plus */
@media (max-width: 959px) {
  .header-inner { gap: var(--sp-3); justify-content: space-between; }
  .nav-toggle { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: transparent; color: var(--ink); border-radius: var(--radius); cursor: pointer; padding: 0; }
  .nav-toggle svg { width: 24px; height: 24px; }
  .nav-links { display: none; }
  .logo-full { display: none; }
  .logo-mono, .brand img.logo-mono { display: block; height: 34px; width: 48px; }
  .site-header:not([data-layout="tunnel"]) .brand { position: absolute; left: 50%; transform: translateX(-50%); }
  .header-cta { min-height: var(--btn-h-sm); padding: 0 var(--sp-4); font-size: .875rem; margin-left: 0; }
  .header-cta .long { display: none; }
  .header-cta .short { display: inline; }
  .menu-mobile { display: block; position: fixed; inset: var(--header-h) 0 0; background: #fff; z-index: 490; padding: var(--sp-4) var(--gutter) var(--sp-8); overflow: auto; }
  .menu-mobile[hidden] { display: none; }
  .menu-mobile a { display: flex; align-items: center; min-height: 52px; font: 600 1.125rem/1.3 var(--font-heading); color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
  .menu-mobile a.is-secondary { font-family: var(--font-body); font-weight: 600; color: var(--ink-3); font-size: 1rem; }
  .menu-mobile a.is-muted { font-family: var(--font-body); font-weight: 400; color: var(--muted); font-size: 1rem; border-bottom: 0; }
  .site-header[data-layout="tunnel"] .logo-full { display: block; }
  .site-header[data-layout="tunnel"] .logo-mono { display: none; }
}
@media (max-width: 767px) {
  .site-header[data-layout="tunnel"] .logo-full { display: none; }
  .site-header[data-layout="tunnel"] .logo-mono { display: block; }
  .site-header[data-layout="tunnel"] .header-inner { gap: var(--sp-3); }
  .site-header[data-layout="tunnel"] .tunnel-step { font-size: .875rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tunnel-links { gap: var(--sp-1); margin-right: calc(-1 * var(--sp-2)); }
  .tunnel-links a { font-size: .875rem; }
}
/* Petits écrans : mention d'étape et sortie en version courte (« Étape 2/5 », « Quitter ») ;
   une mention sans version courte (« Contrat signé ») reste affichée telle quelle */
@media (max-width: 479px) {
  .tunnel-step .ts-long:not(:only-child), .tunnel-links .tl-long:not(:only-child) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .tunnel-step .ts-short, .tunnel-links .tl-short { display: inline; }
}
/* Très petits écrans (360 px) : liens plus serrés, cibles de 44 px conservées, pour laisser la mention d'étape entière */
@media (max-width: 379px) {
  .site-header[data-layout="tunnel"] .tunnel-links a { padding: 0 var(--sp-1); min-width: 44px; justify-content: center; }
}

/* ---------- Pied de page ---------- */
.site-footer { background: var(--footer-bg); color: var(--footer-text); padding: var(--sp-16) 0 var(--sp-20); margin-top: 0; }
.site-footer a { color: var(--footer-text); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-top { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sp-16); padding-bottom: var(--sp-10); border-bottom: 1px solid rgba(255, 255, 255, .12); }
.footer-brand img { height: 40px; width: auto; }
.footer-brand p { margin: var(--sp-5) 0 0; max-width: 34ch; }
.footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-8); }
.footer-col summary { list-style: none; pointer-events: none; cursor: default; }
.footer-col summary::-webkit-details-marker { display: none; }
.footer-cols h3 { color: #fff; font-size: 1rem; font-weight: 600; margin: 0 0 var(--sp-4); }
.footer-cols ul { list-style: none; margin: 0; padding: 0; }
.footer-cols li { margin-bottom: var(--sp-3); font-size: .9375rem; }
.footer-bottom { display: flex; gap: var(--sp-10); align-items: flex-start; padding-top: var(--sp-8); border-top: 0; margin-top: 0; }
.footer-bottom img { flex: none; height: 80px; width: auto; }
.legal-links { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); margin: 0 0 var(--sp-3); padding: 0; list-style: none; }
.legal-links li, .footer-legal p { font-size: var(--fs-legal); color: var(--footer-muted); }
.footer-legal a { color: var(--footer-muted); }
.footer-legal p a { text-decoration: underline; text-underline-offset: 3px; }
.footer-legal p { margin: 0 0 var(--sp-2); max-width: 90ch; }
@media (max-width: 767px) {
  .site-footer { padding: var(--sp-10) 0 var(--sp-12); }
  .footer-bottom img { height: 64px; }
  body.has-sticky-bar .site-footer { padding-bottom: 112px; }
  .footer-top { grid-template-columns: 1fr; gap: var(--sp-8); }
  .footer-cols { grid-template-columns: 1fr; gap: 0; }
  .footer-col { border-top: 1px solid rgba(255, 255, 255, .12); }
  .footer-col summary { pointer-events: auto; cursor: pointer; display: flex; align-items: center; justify-content: space-between; min-height: 52px; }
  .footer-col summary::after { content: ""; width: 20px; height: 20px; background: var(--footer-text); flex: none; transition: transform .15s;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
  .footer-col[open] summary::after { transform: rotate(180deg); }
  .footer-cols h3 { margin: 0; }
  .footer-col ul { padding-bottom: var(--sp-2); }
  /* Cibles tactiles de 44 px : liens des accordéons et liens légaux */
  .footer-cols li { margin-bottom: 0; }
  .footer-cols li a, .legal-links a { display: inline-flex; align-items: center; min-height: 44px; }
  .legal-links { gap: 0 var(--sp-5); }
  .footer-bottom { flex-direction: column; gap: var(--sp-6); }
}

/* ---------- Lanceur de l'assistante (règles de non-chevauchement) ---------- */
.chat-launcher { position: fixed; right: var(--sp-6); bottom: var(--sp-6); width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--brand); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-s); z-index: 400; }
.chat-launcher:hover { background: var(--brand-hover); }
.chat-launcher svg { width: 26px; height: 26px; }
body[data-layout="tunnel"] .chat-launcher, body.no-chat .chat-launcher, body.chat-open .chat-launcher { display: none; }
/* Mobile : masqué tant que le premier écran est visible, quand une barre collante est affichée, pendant le défilement
   vers le bas et chaque fois qu'une action se trouve sous sa position (body.scroll-down, posé par chat.js),
   et sur le simulateur tant que la carte résultat est à l'écran (body.launcher-hold) */
@media (max-width: 767px) {
  body.hero-in-view .chat-launcher, body.has-sticky-bar .chat-launcher, body.scroll-down .chat-launcher, body.launcher-hold .chat-launcher { display: none; }
  .chat-launcher { right: var(--sp-5); bottom: var(--sp-5); }
}

/* ---------- Impression et mouvement réduit ---------- */
@media print { .site-header, .site-footer, .chat-launcher, .sticky-bar, .menu-mobile { display: none !important; } body { color: #000; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

/* ---------- V2 : ligne de confiance sous les actions principales (avis d'un tiers, seulement si configuré) ---------- */
.trust-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-1) var(--sp-4); margin: var(--sp-3) 0 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-3); text-align: center; max-width: none; }
.trust-line:empty { display: none; }
.trust-line svg { display: inline-block; width: 16px; height: 16px; flex: none; color: var(--brand); vertical-align: -3px; }
.trust-reviews svg { margin-right: 6px; }
.trust-reviews { display: block; padding: var(--sp-3) 0; min-height: 44px; font-weight: 600; color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.trust-reviews:hover { color: var(--brand-hover); }
.trust-reviews svg { color: var(--ink-2); }

/* ---------- V2 : pied de page à quatre colonnes (« Votre métier ») ---------- */
@media (min-width: 768px) {
  .footer-top { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--sp-12); }
  .footer-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .footer-top { grid-template-columns: 1fr; gap: var(--sp-8); }
}
.footer-cols a[aria-current="page"] { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- V2 : liens vers les pages métier (accueil, pages métier) ---------- */
.metier-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-1); margin: var(--sp-5) 0 0; padding: 0; list-style: none; max-width: none; color: var(--ink-3); }
.metier-links li { display: inline-flex; align-items: center; max-width: none; }
.metier-links .metier-links-label { font-weight: 600; color: var(--ink-2); margin-right: var(--sp-2); }
.metier-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-1); font-weight: 600; }
/* Séparateur en fin d'élément : à la coupure, la ligne suivante commence par un lien */
.metier-links li:not(.metier-links-label):not(:last-child)::after { content: "·"; color: var(--muted); margin-left: var(--sp-1); }
.metier-links a[aria-current="page"] { color: var(--ink); text-decoration: none; }