/* =========================================================================
   kriterio — site vitrine (v3 : aligné sur la direction Claude Design)
   Langage : encre / crème / or / sauge · gros titre serré + surlignage doré ·
   cartes à grosse bordure encre · micro-labels mono espacés · beaucoup d'air.
   Tokens repris de l'app Flutter (lib/app/theme/tokens.dart).
   ========================================================================= */

/* Polices hébergées sur le site (02/11) : plus de requête vers Google, affichage plus
   rapide. Sous-ensemble latin (français compris : œ, €, espaces insécables) ; licence
   SIL OFL 1.1, voir assets/fonts/LICENCE.txt. */
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/assets/fonts/hanken-grotesk-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/space-mono-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/space-mono-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --canvas: #E7E3DA; --canvas-top: #F1EDE4;
  --surface: #F8F6F2; --surface-warm: #FBF9F4; --surface-sunk: #F4F1EB; --gold-tint: #FBF6EC;
  --card: #FFFFFF;

  --ink: #1B1A17; --ink-soft: #2C2A24;
  /* Textes au moins à 4,5:1 sur les fonds clairs (WCAG AA, 02/11). --text-ghost : décor seulement. */
  --text-secondary: #56524B; --text-muted: #6E6A63; --text-faint: #726C61; --text-ghost: #A59F93;

  --border: #EAE6DD; --border-input: #E6E1D7; --divider: #EFEBE3; --border-track: #E8E3D9;

  --sage: #3B7559;        --sage-bg: #E6F0EA;
  --gold: #F2B84E;        --gold-deep: #816727;  --gold-bg: #FBF3E2;
  --terracotta: #94543D;  --danger: #A44136;     --danger-bg: #F4DBCF;
  --plum: #775B9F;        --plum-bg: #EDE9F4;

  --r-md: 11px; --r-pill: 13px; --r-lg: 14px; --r-button: 16px; --r-card: 20px; --r-card-lg: 24px; --r-sheet: 30px;

  --shadow-card: 0 1px 2px rgba(40,33,18,.04), 0 10px 26px -14px rgba(40,33,18,.18);
  --shadow-soft: 0 8px 20px -14px rgba(40,33,18,.18);
  --shadow-lift: 0 22px 48px -26px rgba(40,33,18,.34);
  --shadow-button-dark: 0 8px 18px -9px rgba(27,26,23,.5);
  --shadow-gold: 0 10px 24px -12px rgba(154,123,47,.5);

  --font-ui: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Space Mono', ui-monospace, 'SFMono-Regular', monospace;
  --spring: cubic-bezier(.2, .8, .2, 1);
  --maxw: 1200px;
  --lens: var(--sage); --lens-bg: var(--sage-bg);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-ui); color: var(--ink); background: var(--surface); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; line-height: 1.5; overflow-x: hidden; }
body::after { content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .03; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

/* Micro-labels mono espacés (signature de la direction) */
.kicker { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--gold-deep); }
.muted { color: var(--text-faint); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--gold-deep); background: rgba(251,243,226,.6); border: 1px solid #EEE2C7;
  padding: 8px 15px; border-radius: var(--r-pill);
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--font-ui); font-weight: 700; font-size: 16px; padding: 13px 22px; border-radius: var(--r-button); border: 1px solid transparent; cursor: pointer; transition: transform .25s var(--spring), box-shadow .3s var(--spring), background .2s; white-space: nowrap; will-change: transform; }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--ink); color: #fff; box-shadow: var(--shadow-button-dark); }
.btn-gold { background: var(--gold); color: var(--ink); box-shadow: var(--shadow-gold); }
.btn-ghost { background: var(--card); color: var(--ink); border-color: var(--border); box-shadow: var(--shadow-soft); }
.btn-lg { padding: 16px 26px; font-size: 17.5px; }
.btn .arrow { transition: transform .3s var(--spring); }
.btn:hover .arrow { transform: translateX(3px); }

/* Store badges (ink, deux lignes) */
.store { display: inline-flex; align-items: center; gap: 11px; background: var(--ink); color: #fff; padding: 11px 20px 11px 16px; border-radius: var(--r-button); box-shadow: var(--shadow-button-dark); transition: transform .25s var(--spring); will-change: transform; }
.store:hover { transform: translateY(-2px); }
.store svg { width: 22px; height: 22px; fill: #fff; flex: none; }
.store span { display: flex; flex-direction: column; line-height: 1.05; }
.store small { font-size: 11.5px; font-weight: 500; color: rgba(255,255,255,.7); letter-spacing: .2px; }
.store b { font-size: 17.5px; font-weight: 700; letter-spacing: -.3px; }
/* Badge « bientôt » : même look store mais non cliquable (pré-lancement).
   À remplacer par de vrais liens App Store / Google Play au lancement. */
.store.soon { background: #5A5853; box-shadow: none; pointer-events: none; cursor: default; }
.store.soon small { color: rgba(255,255,255,.82); }
.soon-badges { display: flex; gap: 10px; flex-basis: 100%; flex-wrap: wrap; }

/* ---------- Barre de progression ---------- */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--gold), var(--gold-deep)); z-index: 100; transition: width .12s linear; }

/* ---------- Header : îlot flottant en verre ---------- */
.brand { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 24px; letter-spacing: -.7px; margin-right: auto; }
.brand-mark { width: 34px; height: 34px; object-fit: contain; display: block; }

header.site { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 80; width: min(calc(100% - 32px), 1200px); }
.nav {
  display: flex; align-items: center; gap: 14px; height: 66px; padding: 0 14px 0 22px;
  background: rgba(251,249,244,.62);
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(234,230,221,.85); border-radius: 20px;
  box-shadow: 0 6px 22px -16px rgba(40,33,18,.3);
  transition: background .35s var(--spring), box-shadow .35s var(--spring), border-color .35s, transform .35s var(--spring);
}
header.site.scrolled .nav { background: rgba(251,249,244,.82); box-shadow: 0 16px 38px -22px rgba(40,33,18,.5); border-color: rgba(225,219,207,.95); }

.nav-links { position: relative; display: flex; align-items: center; gap: 2px; }
.nav-link { position: relative; z-index: 1; font-size: 16.5px; font-weight: 600; color: var(--text-secondary); padding: 10px 16px; border-radius: 11px; transition: color .25s var(--spring); }
.nav-link:hover, .nav-link.active { color: var(--ink); }
.nav-ind { position: absolute; z-index: 0; top: 50%; left: 0; width: 0; height: 40px; transform: translateY(-50%); background: rgba(27,26,23,.06); border-radius: 11px; opacity: 0; transition: left .38s var(--spring), width .38s var(--spring), opacity .3s; }
.nav-ind.show { opacity: 1; }
.nav-cta { padding: 11px 20px; font-size: 16.5px; }

.menu-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; color: var(--ink); margin-left: auto; }
.menu-toggle svg { width: 24px; height: 24px; stroke: currentColor; display: block; }
.menu-toggle .ic-close { display: none; }
.menu-toggle.is-open .ic-open { display: none; }
.menu-toggle.is-open .ic-close { display: block; }

/* ---------- Menu mobile plein écran ---------- */
.mobile-menu { position: fixed; inset: 0; z-index: 70; background: rgba(248,246,242,.97); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .35s var(--spring); }
.mobile-menu.open { opacity: 1; pointer-events: auto; }
.mobile-menu nav { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.mobile-menu a:not(.btn) { font-size: 32.5px; font-weight: 800; letter-spacing: -1.2px; color: var(--ink); }
.mobile-menu a { opacity: 0; transform: translateY(16px); transition: opacity .45s var(--spring), transform .45s var(--spring); }
.mobile-menu.open a { opacity: 1; transform: none; }
.mobile-menu.open a:nth-child(1) { transition-delay: .06s; }
.mobile-menu.open a:nth-child(2) { transition-delay: .12s; }
.mobile-menu.open a:nth-child(3) { transition-delay: .18s; }
.mobile-menu.open a:nth-child(4) { transition-delay: .24s; }
.mobile-menu.open a:nth-child(5) { transition-delay: .3s; }
.mobile-menu.open a:nth-child(6) { transition-delay: .36s; }

/* ---------- Focus AAA ---------- */
:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; border-radius: 6px; }
.store:focus-visible, .btn:focus-visible { outline-offset: 4px; }

/* Ancres : décalage sous l'îlot */
section[id] { scroll-margin-top: 104px; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 124px 0 64px; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(920px 520px at 92% -14%, rgba(242,184,78,.11), transparent 58%), radial-gradient(720px 480px at -4% -6%, rgba(63,125,95,.07), transparent 54%), linear-gradient(180deg, var(--canvas-top), var(--surface) 42%); }
.hero-grid { display: grid; grid-template-columns: 1.06fr .94fr; gap: 64px; align-items: center; }
.hero h1 { font-size: clamp(47.5px, 6.4vw, 78px); font-weight: 800; letter-spacing: -3px; line-height: .99; margin: 26px 0 22px; }
.hero h1 .hl { position: relative; white-space: nowrap; }
.hero h1 .hl::before { content: ''; position: absolute; left: -6px; right: -6px; bottom: .1em; height: .5em; background: var(--gold); border-radius: 5px; z-index: -1; }
.hero p.lead { font-size: clamp(18.5px, 1.6vw, 21.5px); color: var(--text-secondary); max-width: 40ch; line-height: 1.6; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 32px 0 16px; }
.hero-fine { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }

/* Carte « Visite en cours » à grosse bordure encre */
.hero-visual { display: grid; place-items: center; perspective: 1300px; }
.visitcard { width: 100%; max-width: 460px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sheet); box-shadow: var(--shadow-lift); padding: 24px; transform-style: preserve-3d; transition: transform .5s var(--spring); will-change: transform; }
.vc-head { display: flex; align-items: center; justify-content: space-between; }
.vc-head .vc-title { font-size: 25px; font-weight: 800; letter-spacing: -.7px; }
.vc-live { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--sage); display: inline-flex; align-items: center; gap: 6px; }
.vc-live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--sage); animation: blink 2s var(--spring) infinite; }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.vc-sub { font-size: 14.5px; color: var(--text-muted); margin: 4px 0 18px; }
.vc-inner { background: var(--surface-warm); border: 1px solid var(--border); border-radius: var(--r-card); padding: 18px; }
.vc-label { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-faint); margin-bottom: 14px; }
.vc-list { list-style: none; display: grid; gap: 14px; }
.vc-list li { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 600; color: var(--ink); }
.vc-list li .cbox { width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center; border: 2px solid var(--border-input); color: transparent; font-size: 13px; font-weight: 800; transition: all .4s var(--spring); }
.vc-list li.done .cbox { background: var(--sage); border-color: var(--sage); color: #fff; animation: ckpop .5s var(--spring); }
@keyframes ckpop { 0% { transform: scale(.3); } 55% { transform: scale(1.18); } 100% { transform: scale(1); } }
.vc-list li { transition: color .35s var(--spring); }
.vc-list li[data-check] { color: var(--text-muted); font-weight: 500; }
.vc-list li[data-check].done { color: var(--ink); font-weight: 600; }
.vc-list li .dots { margin-left: auto; color: var(--text-ghost); letter-spacing: 1px; }
.vc-list li.todo { color: var(--text-muted); font-weight: 500; }
.vc-score { display: flex; align-items: center; gap: 11px; background: var(--sage-bg); border-radius: var(--r-card); padding: 13px 16px; margin-top: 16px; }
.vc-score .lbl { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--sage); flex: 1; }
.vc-score .bar { width: 78px; height: 7px; border-radius: 4px; background: #fff; overflow: hidden; }
.vc-score .bar i { display: block; height: 100%; width: 0; background: var(--sage); border-radius: 4px; transition: width 1.1s var(--spring); }
.vc-score .val { font-family: var(--font-mono); font-size: 16px; font-weight: 700; color: var(--sage); }

/* ---------- Comment ça marche : la visite de démo (app.js) ----------
   Les écrans du téléphone reprennent ceux de l'app (préparer, pièce, récap,
   avis de l'IA, mes biens) : mêmes tokens, mêmes boutons encre. */
.story { padding-top: 40px; }
.story .section-head { max-width: 640px; margin-bottom: 26px; }
.story-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 64px; align-items: start; }

.story-steps { position: relative; list-style: none; display: grid; gap: 4px; }
.sstep { width: 100%; display: flex; gap: 18px; align-items: flex-start; text-align: left; padding: 17px 20px; border: 1px solid transparent; border-radius: var(--r-card); background: transparent; color: var(--ink); font-family: var(--font-ui); cursor: pointer; transition: background .3s var(--spring), border-color .3s var(--spring), box-shadow .3s var(--spring); }
@media (hover: hover) { .sstep:hover { background: var(--surface-warm); } }
.sstep.on { background: var(--card); border-color: var(--border); box-shadow: var(--shadow-card); }
.sstep .n { flex: none; font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--text-faint); padding-top: 5px; transition: color .3s; }
.sstep.on .n, .sstep.done .n { color: var(--gold-deep); }
.sstep .st { display: grid; grid-template-rows: auto 0fr; transition: grid-template-rows .4s var(--spring); }
.sstep.on .st { grid-template-rows: auto 1fr; }
.sstep b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.4px; line-height: 1.25; }
.sstep .sp { display: block; min-height: 0; overflow: hidden; font-size: 15.5px; line-height: 1.55; color: var(--text-muted); transition: color .3s; }
.sstep .sp::before { content: ''; display: block; height: 6px; }
.sstep.on .sp { color: var(--text-secondary); }
.story-caption { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.story-stage { display: grid; justify-items: center; gap: 16px; }
.phone { --ph-pad: 18px; position: relative; width: 362px; height: clamp(560px, calc(100vh - 170px), 720px); padding: 11px; border-radius: 54px; background: #161512; box-shadow: 0 50px 90px -46px rgba(27,26,23,.6), inset 0 0 0 1.5px #2C2A24; }
.ph-screen { position: relative; height: 100%; display: flex; flex-direction: column; border-radius: 43px; background: var(--surface); overflow: hidden; }
.ph-status { position: relative; flex: none; display: flex; align-items: center; justify-content: space-between; height: 46px; padding: 4px 28px 0 34px; font-size: 14.5px; font-weight: 700; letter-spacing: -.2px; }
.ph-island { position: absolute; top: 11px; left: 50%; width: 100px; height: 29px; transform: translateX(-50%); border-radius: 20px; background: #161512; }
.ph-icons { display: inline-flex; gap: 5px; align-items: center; }
.ph-icons svg { height: 11px; width: auto; fill: currentColor; }
.ph-view { position: relative; flex: 1; min-height: 0; }
.ph-scroll { position: absolute; inset: 0; overflow-y: auto; padding: 4px var(--ph-pad) 112px; scrollbar-width: none; }
.ph-scroll::-webkit-scrollbar { display: none; }
.ph-scroll.enter { animation: phIn .38s var(--spring); }
@keyframes phIn { from { opacity: 0; transform: translateX(14px); } }
.ph-nojs { padding-top: 40px; font-size: 14px; color: var(--text-muted); text-align: center; }
.ph-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; gap: 8px; padding: 28px var(--ph-pad) 20px; background: linear-gradient(180deg, rgba(248,246,242,0), var(--surface) 32%); }
.ph-btn { width: 100%; min-height: 50px; padding: 0 16px; border: 1px solid var(--ink); border-radius: var(--r-button); background: var(--ink); color: #fff; font-family: var(--font-ui); font-size: 15.5px; font-weight: 700; cursor: pointer; box-shadow: var(--shadow-button-dark); transition: transform .2s var(--spring), background .2s; }
.ph-btn:active { transform: scale(.98); }
.ph-btn.ghost { background: var(--card); color: var(--ink); border-color: var(--border-input); box-shadow: none; }
.ph-btn .spark { color: var(--gold); margin-right: 7px; }
.ph-toast { position: absolute; top: 52px; left: 14px; right: 14px; z-index: 5; padding: 10px 13px; border-radius: 13px; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.4; box-shadow: var(--shadow-lift); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .25s, transform .3s var(--spring); }
.ph-toast.on { opacity: 1; transform: none; }

/* En-têtes d'écran */
.pa-top { display: flex; align-items: center; justify-content: space-between; min-height: 34px; margin-bottom: 4px; }
.pa-back { border: 0; background: none; padding: 6px 0; font: 600 14px var(--font-ui); color: var(--text-secondary); cursor: pointer; }
@media (hover: hover) { .pa-back:hover { color: var(--ink); } }
.pa-kicker { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-faint); }
.pa-h1 { margin: 5px 0; font-size: 25px; font-weight: 800; letter-spacing: -.7px; line-height: 1.1; outline: none; }
.pa-sub { margin-bottom: 16px; font-size: 13.5px; line-height: 1.45; color: var(--text-secondary); }

/* Préparer la visite */
.pa-field { margin-bottom: 14px; }
.pa-lbl { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 700; color: var(--text-secondary); }
.pa-input { padding: 11px 13px; border: 1px solid var(--border-input); border-radius: 14px; background: var(--card); font-size: 14px; font-weight: 600; color: var(--ink); }
.pa-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pa-modes { display: grid; gap: 8px; }
.pa-mode { display: flex; gap: 11px; align-items: flex-start; width: 100%; padding: 11px 13px; border: 1px solid var(--border-input); border-radius: 14px; background: var(--card); color: var(--ink); font-family: var(--font-ui); text-align: left; cursor: pointer; transition: border-color .25s, box-shadow .25s; }
.pa-mode.on { border-color: var(--ink); box-shadow: inset 0 0 0 .5px var(--ink); }
.pa-radio { flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border: 1.5px solid var(--border-input); border-radius: 50%; transition: background .25s var(--spring), border-color .25s; }
.pa-mode.on .pa-radio { background: var(--ink); border-color: var(--ink); }
.pa-mode.on .pa-radio::after { content: ''; width: 8px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg); }
.pa-mtext { flex: 1; min-width: 0; }
.pa-mhead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pa-mhead b { font-size: 15px; font-weight: 700; }
.pa-min { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-secondary); }
.pa-pitch { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--text-secondary); }
.pa-plan { margin-top: 10px; font-size: 12.5px; color: var(--text-secondary); }
.pa-plan b { color: var(--ink); }
.pa-tools { margin-top: 8px; padding: 9px 11px; border-radius: 12px; background: var(--gold-bg); font-size: 12.5px; line-height: 1.45; color: var(--gold-deep); }

/* Une pièce de la visite */
.vi-save { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--sage); opacity: 0; transition: opacity .3s; }
.vi-save.on { opacity: 1; }
.vi-seg { display: flex; gap: 3px; margin: 6px 0 12px; padding: 3px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-sunk); }
.vi-seg button { flex: 1; padding: 7px 4px; border: 0; border-radius: 9px; background: transparent; font: 700 12.5px var(--font-ui); color: var(--text-muted); cursor: pointer; transition: background .25s var(--spring), color .25s, box-shadow .25s; }
.vi-seg button.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow-soft); }
.vi-count { margin: -2px 0 12px; font-size: 12px; color: var(--text-faint); }
.vi-tip { margin-bottom: 12px; padding: 10px 12px; border: 1px solid #F0E4C8; border-radius: 14px; background: var(--gold-tint); font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
.vi-tip p + p { margin-top: 6px; }
.vi-k { display: block; margin-bottom: 4px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--gold-deep); }
.vi-item { margin-bottom: 9px; padding: 12px; border: 1px solid var(--border); border-radius: 16px; background: var(--card); transition: border-color .3s, box-shadow .3s; }
.vi-item.bad { border-color: #E9C3B5; box-shadow: inset 3px 0 0 var(--terracotta); }
.vi-item.new { animation: itemIn .45s var(--spring); }
@keyframes itemIn { from { opacity: 0; transform: translateY(8px); } }
.vi-q { font-size: 14px; font-weight: 700; letter-spacing: -.2px; line-height: 1.3; }
.vi-why { margin: 4px 0 9px; font-size: 12px; line-height: 1.45; color: var(--text-secondary); }
.vi-how { margin: -2px 0 9px; padding: 8px 10px; border-radius: 10px; background: var(--surface-sunk); font-size: 12px; line-height: 1.45; color: var(--ink-soft); }
.vi-opts { display: flex; flex-wrap: wrap; gap: 5px; }
.vi-opt { flex: 1 1 auto; padding: 7px 8px; border: 1px solid var(--border-input); border-radius: 10px; background: var(--surface-warm); font: 600 12px var(--font-ui); color: var(--text-secondary); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
@media (hover: hover) { .vi-opt:hover { border-color: var(--text-ghost); } }
.vi-opt.on { border-color: transparent; background: var(--ink); color: #fff; }
.vi-opt.on.good { background: var(--sage); }
.vi-opt.on.warn { background: var(--gold-deep); }
.vi-opt.on.bad { background: var(--terracotta); }
.vi-stars { display: flex; gap: 2px; }
.vi-star { display: grid; place-items: center; width: 36px; height: 34px; padding: 0; border: 0; background: none; color: var(--text-ghost); cursor: pointer; transition: color .2s, transform .2s var(--spring); }
.vi-star svg { width: 25px; height: 25px; fill: currentColor; }
.vi-star.on { color: var(--gold); }
.vi-star:active { transform: scale(.86); }
.vi-flag { margin-top: 8px; font-size: 11.5px; font-weight: 600; color: var(--terracotta); }
.vi-agent { margin: 14px 0 9px; padding: 12px; border: 1px solid var(--border); border-radius: 16px; background: var(--card); }
.vi-aq + .vi-aq { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--divider); }
.vi-aq-q { margin-bottom: 7px; font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.vi-aq-opts { display: flex; flex-wrap: wrap; gap: 5px; }
.vi-chip { padding: 6px 10px; border: 1px solid var(--border-input); border-radius: var(--r-pill); background: var(--surface-warm); font: 600 12px var(--font-ui); color: var(--text-secondary); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.vi-chip.on { border-color: var(--ink); background: var(--ink); color: #fff; }
.vi-agent-n { margin-top: 9px; font-size: 11.5px; color: var(--text-faint); }
.vi-more { margin-top: 12px; padding: 12px; border: 1px dashed var(--border-input); border-radius: 16px; font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); }
.vi-more .ph-btn { min-height: 40px; margin-top: 9px; font-size: 13.5px; }
.cf { padding: 14px; border: 1px solid var(--border); border-radius: 18px; background: var(--card); box-shadow: var(--shadow-lift); }
.cf-t { font-size: 15px; font-weight: 800; letter-spacing: -.3px; }
.cf-s { margin: 4px 0 10px; font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); }
.cf .ph-btn + .ph-btn { margin-top: 7px; }

/* Récapitulatif */
.rc-ok { padding: 4px 8px; border-radius: var(--r-pill); background: var(--sage-bg); font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--sage); }
.rc-sample { margin-bottom: 12px; padding: 8px 10px; border-radius: 10px; background: var(--gold-bg); font-size: 12px; line-height: 1.4; color: var(--gold-deep); }
.rc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 6px 0 16px; }
.rc-stats div { padding: 10px 11px; border: 1px solid var(--border); border-radius: 14px; background: var(--card); }
.rc-stats b { display: block; font-size: 18px; font-weight: 800; letter-spacing: -.5px; }
.rc-stats span { font-size: 11px; color: var(--text-muted); }
.rc-stats .terra b { color: var(--terracotta); }
.rc-h { display: flex; align-items: center; gap: 7px; margin: 16px 0 7px; font-size: 14.5px; font-weight: 800; letter-spacing: -.3px; }
.rc-c { padding: 2px 7px; border-radius: var(--r-pill); background: var(--surface-sunk); font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--text-secondary); }
.rc-list { list-style: none; display: grid; gap: 6px; }
.rc-list li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); font-size: 12.5px; line-height: 1.35; }
.rc-list li b { font-weight: 700; color: var(--ink); }
.rc-list li span { flex: none; max-width: 46%; text-align: right; color: var(--text-muted); }
.rc-list li.flag { box-shadow: inset 3px 0 0 var(--terracotta); }
.rc-list li span.ask { font-weight: 700; color: var(--gold-deep); }
.rc-works { font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); }
.rc-works b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.6px; color: var(--ink); }
.rc-note { margin-top: 7px; font-size: 12px; line-height: 1.45; color: var(--text-muted); }
.rc-pdf { display: block; margin-top: 14px; padding: 6px 0; border: 0; background: none; font: 700 13px var(--font-ui); color: var(--gold-deep); cursor: pointer; }

/* L'avis de l'IA */
.av-docs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.av-doc { display: inline-flex; flex-direction: column; padding: 7px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); font-size: 12.5px; font-weight: 700; }
.av-doc i { margin-top: 2px; font-style: normal; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--sage); }
.av-card { padding: 14px; border: 1px solid var(--border); border-radius: 18px; background: var(--card); }
.av-card-h { display: flex; gap: 10px; align-items: center; margin-bottom: 11px; }
.av-spark { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--gold-bg); color: var(--gold-deep); font-size: 15px; }
.av-card-h b { display: block; font-size: 15px; font-weight: 800; letter-spacing: -.3px; }
.av-card-h span { font-size: 11.5px; color: var(--text-muted); }
.av-intro, .av-loading { margin-bottom: 12px; font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); }
.av-shimmer { display: grid; gap: 7px; }
.av-shimmer i { display: block; height: 10px; border-radius: 6px; background: linear-gradient(90deg, var(--surface-sunk) 0%, #E9E3D6 50%, var(--surface-sunk) 100%); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
.av-shimmer i:nth-child(2) { width: 86%; }
.av-shimmer i:nth-child(3) { width: 62%; }
@keyframes shimmer { to { background-position: -200% 0; } }
.av-head { min-height: 1.4em; font-size: 16px; font-weight: 700; letter-spacing: -.2px; line-height: 1.4; color: var(--ink); }
.av-rest { margin-top: 7px; font-size: 12.5px; line-height: 1.55; color: var(--text-secondary); }
.av-k { margin: 14px 0 4px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--terracotta); }
.av-pt { display: flex; gap: 9px; padding: 8px 0; border-top: 1px solid var(--divider); }
.av-k + .av-pt { border-top: 0; }
.av-sev { flex: none; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--gold); }
.av-sev.high { background: var(--danger); }
.av-sev.low { background: var(--text-ghost); }
.av-pt b { display: block; font-size: 13px; font-weight: 700; line-height: 1.3; }
.av-pt span { display: block; margin-top: 2px; font-size: 12px; line-height: 1.45; color: var(--text-secondary); }
.av-link { padding: 8px 0; border: 0; background: none; font: 700 12.5px var(--font-ui); color: var(--gold-deep); cursor: pointer; }
.av-note { margin-top: 8px; font-size: 11.5px; color: var(--text-faint); }
.av-stale { display: flex; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 10px; padding: 8px 10px; border-radius: 10px; background: var(--gold-bg); font-size: 12px; line-height: 1.35; color: var(--gold-deep); }
.av-stale button { flex: none; padding: 6px 9px; border: 0; border-radius: 8px; background: var(--ink); font: 700 11.5px var(--font-ui); color: #fff; cursor: pointer; }
.av-fade { animation: msgIn .5s var(--spring) both; }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } }
.av-chat { display: grid; gap: 8px; margin-top: 8px; }
.av-msg { max-width: 92%; padding: 8px 11px; border-radius: 13px; font-size: 12.5px; line-height: 1.5; }
.av-msg.user { justify-self: end; border-bottom-right-radius: 4px; background: var(--ink); color: #fff; }
.av-msg.bot { justify-self: start; border: 1px solid var(--border); border-bottom-left-radius: 4px; background: var(--surface-sunk); color: var(--ink); }
.av-msg.enter { animation: msgIn .42s var(--spring); }
.av-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* Mes biens */
.ph-screen .lenses { margin: 4px 0 10px; }
.ph-screen .lens-chip { padding: 8px 2px; font-size: 12px; }
.ph-screen .bien { gap: 10px; margin-bottom: 8px; padding: 10px; background: var(--card); }
.ph-screen .bien .thumb { width: 54px; }
.ph-screen .bien .addr { font-size: 13.5px; }
.ph-screen .bien .meta { margin-bottom: 6px; font-size: 11.5px; }
.dc-you { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: var(--r-pill); background: var(--gold-bg); font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--gold-deep); vertical-align: 2px; }
.dc-note { margin-top: 6px; font-size: 12px; line-height: 1.45; color: var(--text-muted); }

/* Chapitres : accès aux simulateurs, budget du bien à deux */
.ftext-cta { margin-top: 22px; }
/* Libellés longs : ils passent à la ligne plutôt que d'élargir la page (320 px). */
.ftext-cta .btn, .price-foot .btn { white-space: normal; text-align: center; }
.conv-fit { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; font-weight: 600; color: var(--text-secondary); }
.conv-fit .fit { flex: none; padding: 5px 11px; border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; transition: background .4s var(--spring), color .4s; }
.conv-fit .fit.over { background: #F4E3DA; color: var(--terracotta); }
.conv-fit .fit.within { background: var(--sage-bg); color: var(--sage); }

/* Ordinateur : la section reste épinglée et le défilement fait avancer les étapes
   (app.js). Chaque étape vaut 80 % de la hauteur d'écran ; la dernière aussi, puis
   la page reprend. */
.story-hint { display: none; }
@media (min-width: 941px) {
  .story { height: calc(100vh + 5 * 80vh); padding: 0; }
  .story[id] { scroll-margin-top: 0; }
  .story > .wrap { position: sticky; top: 0; display: flex; align-items: center; height: 100vh; padding-top: 72px; }
  .story-grid { width: 100%; }
  .story .section-head { margin-bottom: 22px; }
  .story .section-head h2 { font-size: clamp(30px, 3vw, 42px); }
  .story .section-head p { font-size: 17px; }
  .story-steps { padding-left: 16px; }
  .story-steps::before, .story-steps::after { content: ''; position: absolute; top: 20px; bottom: 20px; left: 0; width: 2px; border-radius: 2px; background: var(--border); }
  .story-steps::after { background: var(--gold); transform-origin: top; transform: scaleY(var(--story-progress, 0)); }
  .story-hint { display: block; margin: 14px 0 0 36px; font-size: 13.5px; color: var(--text-faint); transition: opacity .5s; }
  .story.moved .story-hint { opacity: 0; }
}
@media (min-width: 941px) and (max-height: 760px) { .story .section-head p { display: none; } }

@media (max-width: 940px) {
  .story-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .story-steps { display: flex; gap: 6px; margin: 0 -28px; padding: 2px 28px 4px; overflow-x: auto; scrollbar-width: none; }
  .story-steps::-webkit-scrollbar { display: none; }
  .story-steps li { flex: none; }
  .sstep { align-items: center; gap: 7px; padding: 9px 14px; border-color: var(--border); border-radius: var(--r-pill); background: var(--card); }
  .sstep .n { padding: 0; font-size: 11.5px; }
  .sstep b { font-size: 14.5px; letter-spacing: -.2px; white-space: nowrap; }
  .sstep .st { display: block; }
  .sstep .sp { display: none; }
  .sstep.on { border-color: var(--ink); background: var(--ink); color: #fff; box-shadow: none; }
  .sstep.on .n { color: var(--gold); }
  .story-caption { display: block; max-width: 46ch; font-size: 15.5px; line-height: 1.55; text-align: center; color: var(--text-secondary); }
  /* Sur téléphone, l'écran de la démo grandit avec son contenu : la page seule
     défile (pas de défilement imbriqué), et le bouton principal colle au bas. */
  .phone { width: min(100%, 380px); height: auto; padding: 9px; border-radius: 46px; }
  .ph-screen { height: auto; border-radius: 38px; overflow: clip; }
  .ph-view { flex: none; }
  .ph-scroll { position: static; overflow: visible; padding-bottom: 6px; }
  .ph-foot { position: sticky; bottom: 0; padding-top: 22px; }
  .ph-toast { position: fixed; top: auto; bottom: 96px; left: 16px; right: 16px; }
}
@media (max-width: 480px) {
  /* Le téléphone mord sur les marges : quatre états tiennent sur une ligne. */
  .phone { --ph-pad: 14px; width: calc(100% + 32px); margin: 0 -16px; padding: 7px; border-radius: 42px; }
  .ph-screen { border-radius: 36px; }
  .vi-item, .vi-agent { padding: 11px 10px; }
  .vi-opt { padding: 7px 6px; }
}

/* ---------- Sections ---------- */
section { padding: 92px 0; }
.section-head { max-width: 680px; margin: 0 0 52px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { font-size: clamp(32.5px, 3.9vw, 49.5px); font-weight: 800; letter-spacing: -1.6px; line-height: 1.04; margin: 16px 0 14px; }
.section-head p { color: var(--text-secondary); font-size: 19px; line-height: 1.55; }

/* Lignes éditoriales — séparées par un filet, rythme régulier (style magazine) */
.rows { display: grid; gap: 0; }
.frow { display: grid; grid-template-columns: 1fr 1.06fr; gap: 60px; align-items: center; padding: 46px 0; }
.frow + .frow { border-top: 1px solid var(--divider); }
.frow.flip .ftext { order: 2; }
.frow .ftext .ic { width: 46px; height: 46px; border-radius: var(--r-md); display: grid; place-items: center; margin-bottom: 18px; }
.frow .ftext .ic svg { width: 23px; height: 23px; }
.frow .ftext h3 { font-size: clamp(25px, 2.6vw, 32.5px); font-weight: 800; letter-spacing: -.9px; margin-bottom: 12px; }
.frow .ftext p { color: var(--text-secondary); font-size: 17.5px; line-height: 1.62; }
.ic.gold { background: var(--gold-bg); color: var(--gold-deep); }
.ic.sage { background: var(--sage-bg); color: var(--sage); }
.ic.ink { background: var(--surface-sunk); color: var(--ink); }
.ic.plum { background: var(--plum-bg); color: var(--plum); }
.ic.terracotta { background: #F4E3DA; color: var(--terracotta); }

.fvisual { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card-lg); padding: 30px; min-height: 230px; display: flex; flex-direction: column; justify-content: center; box-shadow: var(--shadow-card); transition: box-shadow .3s var(--spring), border-color .3s var(--spring); }
.fvisual:hover { box-shadow: var(--shadow-lift); border-color: var(--border-input); }

/* La zone des 4 piliers forme une bande crème chaude, délimitée par des filets */
#features { background: var(--surface-warm); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

/* Démo de lentilles (relocalisée en feature) */
.lenses { display: flex; gap: 7px; margin-bottom: 14px; }
.lens-chip { flex: 1; font-family: var(--font-ui); font-weight: 700; font-size: 12.5px; padding: 9px 4px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface-warm); color: var(--text-muted); cursor: pointer; text-align: center; transition: all .3s var(--spring); }
.lens-chip.active { background: var(--lens-bg); border-color: transparent; color: var(--lens); box-shadow: inset 0 0 0 1.5px var(--lens); }
.bien { background: var(--surface-warm); border: 1px solid var(--border); border-radius: var(--r-card); padding: 13px; display: flex; gap: 13px; margin-bottom: 10px; will-change: transform; }
.bien .thumb { width: 64px; border-radius: var(--r-md); position: relative; overflow: hidden; flex: none; }
.bien .thumb.sage { background: linear-gradient(150deg, #6FA98A, var(--sage)); }
.bien .thumb.gold { background: linear-gradient(150deg, #F6CE83, var(--gold)); }
.bien .thumb.plum { background: linear-gradient(150deg, #A98DCB, var(--plum)); }
.bien .thumb .tag { position: absolute; top: 6px; left: 6px; background: rgba(255,255,255,.92); font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; color: var(--text-secondary); padding: 2px 5px; border-radius: 5px; text-transform: uppercase; }
.bien .body { flex: 1; min-width: 0; }
.bien .addr { font-size: 15px; font-weight: 700; letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bien .meta { font-size: 12.5px; color: var(--text-faint); margin-bottom: 8px; }
.bien .lens { display: flex; align-items: center; gap: 7px; background: var(--lens-bg); border-radius: var(--r-md); padding: 7px 10px; transition: background .4s var(--spring); }
.bien .lens .lbl { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; color: var(--lens); letter-spacing: .3px; flex: 1; text-transform: uppercase; transition: color .4s var(--spring); }
.bien .lens .bar { width: 52px; height: 5px; border-radius: 3px; background: #fff; overflow: hidden; flex: none; }
.bien .lens .bar i { display: block; height: 100%; width: 0; background: var(--lens); border-radius: 3px; transition: width .6s var(--spring), background .4s var(--spring); }
.bien .lens .val { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--lens); width: 26px; text-align: right; transition: color .4s var(--spring); }

/* DVF gauge */
.gauge .gauge-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; }
.gauge .price { font-size: 27px; font-weight: 800; letter-spacing: -1px; }
.gauge .delta { font-family: var(--font-mono); font-weight: 700; font-size: 14px; padding: 4px 10px; border-radius: var(--r-pill); background: var(--sage-bg); color: var(--sage); }
.gauge .track { position: relative; height: 10px; border-radius: 6px; background: linear-gradient(90deg, var(--sage) 0%, #C9B25E 52%, var(--danger) 100%); opacity: .9; }
.gauge .marker { position: absolute; top: 50%; width: 24px; height: 24px; border-radius: 50%; background: var(--card); border: 4px solid var(--ink); box-shadow: var(--shadow-soft); transform: translate(-50%, -50%); cursor: grab; transition: left .8s var(--spring); touch-action: none; }
.gauge .marker:active { cursor: grabbing; }
.gauge .scale { display: flex; justify-content: space-between; margin-top: 13px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .3px; text-transform: uppercase; color: var(--text-muted); }
/* Affordance : la jauge est manipulable mais rien ne l'indiquait. Halo pulsé sur
   le curseur + micro-invite, retirés au premier drag (cf. app.js). */
.gauge .marker.pulse::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid var(--gold); animation: markerPulse 1.8s ease-out infinite; }
@keyframes markerPulse { 0% { transform: scale(.6); opacity: .9; } 70% { transform: scale(1.35); opacity: 0; } 100% { opacity: 0; } }
.gauge .drag-hint { margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--text-muted); transition: opacity .4s; }
.gauge .drag-hint::before { content: '↔ '; color: var(--gold-deep); }
.gauge .drag-hint.off { opacity: 0; }
.gauge .hint { margin-top: 15px; font-size: 14px; color: var(--text-muted); }

/* Capacity */
.cap .big { font-size: clamp(39px, 4.5vw, 54px); font-weight: 800; letter-spacing: -1.8px; line-height: 1; }
.cap .big span { font-size: 19.5px; color: var(--text-muted); font-weight: 600; letter-spacing: 0; }
.cap .clbl { font-size: 14px; color: var(--text-muted); margin: 5px 0 20px; }
.cap .meter { height: 9px; border-radius: 5px; background: var(--border-track); overflow: hidden; }
.cap .meter i { display: block; height: 100%; width: 0; background: var(--sage); border-radius: 5px; transition: width 1.1s var(--spring); }
.cap .meter-labels { display: flex; justify-content: space-between; margin-top: 10px; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; color: var(--text-faint); }
.cap .chips { display: flex; gap: 8px; margin-top: 20px; flex-wrap: wrap; }
.cap .chip { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; color: var(--gold-deep); background: var(--gold-bg); border-radius: var(--r-pill); padding: 6px 11px; text-transform: uppercase; letter-spacing: .3px; }

/* ---------- Kicker de ligne + hint ---------- */
.rkicker { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold-deep); display: block; margin-bottom: 16px; }
.rhint { font-size: 14px; color: var(--text-faint); margin-top: 14px; font-style: italic; }

/* ---------- Labo financier ---------- */
.lab { display: grid; gap: 18px; }
.lab-toggle { display: flex; gap: 4px; background: var(--surface-sunk); border: 1px solid var(--border); border-radius: var(--r-md); padding: 4px; }
.lab-seg { flex: 1; font-family: var(--font-ui); font-weight: 700; font-size: 14.5px; padding: 9px; border: 0; border-radius: 8px; background: transparent; color: var(--text-muted); cursor: pointer; transition: all .3s var(--spring); }
.lab-seg.active { background: var(--card); color: var(--ink); box-shadow: var(--shadow-soft); }
.lab-figure .countup { font-size: clamp(36.5px, 4.3vw, 49.5px); font-weight: 800; letter-spacing: -1.8px; }
.lab-figure .cur { font-size: 21.5px; font-weight: 700; color: var(--text-muted); }
.lab-lbl { font-size: 14px; color: var(--text-muted); margin-top: 4px; }
.lab-stats { display: flex; gap: 8px; flex-wrap: wrap; min-height: 30px; }
.lab-stats .st { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .2px; color: var(--sage); background: var(--sage-bg); border-radius: var(--r-pill); padding: 7px 12px; opacity: 0; transform: translateY(6px); animation: stIn .4s var(--spring) forwards; }
@keyframes stIn { to { opacity: 1; transform: none; } }
.gt-lbl { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--text-faint); flex: 1; }

/* ---------- Convergence interactive ---------- */
.conv { display: grid; gap: 14px; }
.conv-people { display: grid; gap: 10px; }
.conv .person { display: flex; align-items: center; gap: 12px; background: var(--surface-warm); border: 1px solid var(--border); border-radius: var(--r-card); padding: 13px 15px; transition: opacity .4s var(--spring), transform .4s var(--spring), filter .4s; }
.conv .person.pending { border-style: dashed; background: transparent; transform: scale(.98); }
.conv .person.pending .av { background: var(--text-faint); }
.conv .person .av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 14px; flex: none; }
.conv .person.me .av { background: var(--sage); }
.conv .person.you .av { background: var(--plum); }
.conv .person .name { font-size: 15.5px; font-weight: 700; letter-spacing: -.2px; }
.conv .person .num { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.conv-toggle { font-family: var(--font-ui); font-weight: 700; font-size: 15px; padding: 13px; border: 1px solid var(--border-input); border-radius: var(--r-button); background: var(--card); color: var(--ink); cursor: pointer; transition: all .25s var(--spring); }
.conv-toggle:hover { background: var(--surface-warm); }
.conv-toggle.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.conv-foyer { background: var(--ink); color: #fff; border-radius: var(--r-card); padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; box-shadow: var(--shadow-button-dark); }
.conv-foyer .t { font-family: var(--font-mono); font-size: 11px; letter-spacing: .8px; text-transform: uppercase; color: rgba(255,255,255,.6); }
.conv-foyer .v { font-size: 28px; font-weight: 800; letter-spacing: -1px; }

/* ---------- L'assistant : discussion de démo (app.js) ---------- */
/* Une rubrique à elle seule, qui tient en un écran sur ordinateur : le titre à gauche,
   la discussion à droite, dont le fil prend la hauteur qui reste. */
.assistant { padding: 72px 0; background: var(--surface-warm); border-top: 1px solid var(--border); }
.assistant-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.assistant-copy h2 { margin: 14px 0 16px; font-size: clamp(32.5px, 3.6vw, 46px); font-weight: 800; letter-spacing: -1.4px; line-height: 1.05; }
.assistant-copy p { max-width: 46ch; font-size: 18px; line-height: 1.6; color: var(--text-secondary); }
.assistant-copy .assistant-note { margin-top: 14px; font-weight: 700; color: var(--ink); }
.chat-card { padding: 24px 26px; }
@media (min-width: 941px) {
  .assistant { display: flex; align-items: center; min-height: 100vh; padding: 96px 0 32px; }
  .assistant[id] { scroll-margin-top: 0; }
  .assistant-grid { width: 100%; }
  .assistant .chat-thread { height: clamp(280px, calc(100vh - 330px), 460px); }
}
@media (max-width: 940px) { .assistant-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
.chat { display: grid; gap: 12px; }
.chat-head { display: flex; align-items: center; gap: 10px; }
.chat-spark { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--gold-bg); color: var(--gold-deep); font-size: 16px; }
.chat-head b { display: block; font-size: 16px; font-weight: 800; letter-spacing: -.3px; }
.chat-head span { font-size: 12.5px; color: var(--text-muted); }
.chat-thread { position: relative; display: flex; flex-direction: column; gap: 10px; height: 440px; padding: 4px 2px; overflow-y: auto; scrollbar-width: none; }
.chat-thread::-webkit-scrollbar { display: none; }
.chat-msg { max-width: 90%; padding: 10px 13px; border-radius: 15px; font-size: 14.5px; line-height: 1.5; }
.chat-msg.user { align-self: flex-end; border-bottom-right-radius: 5px; background: var(--ink); color: #fff; animation: msgIn .35s var(--spring); }
.chat-msg.bot { align-self: flex-start; border: 1px solid var(--border); border-bottom-left-radius: 5px; background: var(--surface-sunk); color: var(--ink); }
.chat-msg p + p, .chat-msg p + ul, .chat-msg ul + p { margin-top: 7px; }
.chat-msg ul { display: grid; gap: 4px; margin: 6px 0 0 18px; }
.chat-msg.pop { transform-origin: bottom left; animation: chatPop .55s var(--spring); }
@keyframes chatPop { 0% { opacity: 0; transform: translateY(10px) scale(.94); } 60% { opacity: 1; transform: translateY(-2px) scale(1.01); } 100% { transform: none; } }
.chat-msg.pop li { opacity: 0; animation: liIn .4s var(--spring) forwards; }
@keyframes liIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.chat-msg.pop li:nth-child(1) { animation-delay: .25s; }
.chat-msg.pop li:nth-child(2) { animation-delay: .37s; }
.chat-msg.pop li:nth-child(3) { animation-delay: .49s; }
.chat-msg.pop li:nth-child(4) { animation-delay: .61s; }
.chat-msg.typing { display: inline-flex; gap: 4px; padding: 13px 14px; }
.chat-msg.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--text-ghost); animation: typing 1s infinite; }
.chat-msg.typing span:nth-child(2) { animation-delay: .15s; }
.chat-msg.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { opacity: .45; transform: none; } 30% { opacity: 1; transform: translateY(-4px); } }
.chat-chips { display: flex; flex-wrap: wrap; gap: 7px; min-height: 36px; }
.chat-chips button { padding: 7px 11px; border: 1px solid var(--border-input); border-radius: var(--r-pill); background: var(--card); font: 600 13px var(--font-ui); color: var(--text-secondary); text-align: left; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
@media (hover: hover) { .chat-chips button:hover { border-color: var(--gold); background: var(--gold-bg); color: var(--ink); } }
.chat-chips button:disabled { opacity: .45; cursor: default; }

/* ---------- Mini 3 colonnes ---------- */
.mini-3 { grid-template-columns: repeat(3, 1fr); }

/* ---------- FAQ (accordéon natif) ---------- */
.faq-list { max-width: 760px; margin: 0 auto; display: grid; gap: 10px; }
.faq-item { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-soft); overflow: hidden; transition: border-color .25s; }
.faq-item[open] { border-color: var(--border-input); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 19px 22px; font-size: 17.5px; font-weight: 700; letter-spacing: -.3px; color: var(--ink); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: var(--surface-warm); }
.faq-item[open] summary { color: var(--gold-deep); }
.faq-item .chev { width: 10px; height: 10px; border-right: 2px solid var(--text-ghost); border-bottom: 2px solid var(--text-ghost); transform: rotate(45deg); transition: transform .3s var(--spring); flex: none; }
.faq-item[open] .chev { transform: rotate(225deg); border-color: var(--gold-deep); }
.faq-item p { padding: 2px 22px 20px; color: var(--text-secondary); font-size: 16px; line-height: 1.65; }
/* Ouverture animée de la réponse : hauteur fluide (navigateurs récents) ; repli = comportement natif */
.faq-list { interpolate-size: allow-keywords; }
.faq-item::details-content { block-size: 0; overflow: hidden; opacity: 0; transition: block-size .32s var(--spring), opacity .26s ease, content-visibility .32s allow-discrete; }
.faq-item[open]::details-content { block-size: auto; opacity: 1; }

/* ---------- Pages légales ---------- */
.legal-head { border-bottom: 1px solid var(--border); }
.legal-head .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.legal-back { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 15.5px; color: var(--text-secondary); }
.legal-back:hover { color: var(--ink); }
.legal { max-width: 760px; margin: 0 auto; padding: 110px 28px 90px; }
.legal h1 { font-size: clamp(32.5px, 4.3vw, 45.5px); font-weight: 800; letter-spacing: -1.4px; margin-bottom: 8px; }
.legal .updated { font-family: var(--font-mono); font-size: 12px; letter-spacing: .6px; text-transform: uppercase; color: var(--text-faint); margin-bottom: 30px; }
.legal .todo { background: var(--gold-bg); border: 1px solid #EEE2C7; border-radius: var(--r-md); padding: 13px 16px; font-size: 14.5px; line-height: 1.5; color: var(--gold-deep); margin-bottom: 30px; }
.legal h2 { font-size: 21.5px; font-weight: 800; letter-spacing: -.5px; margin: 36px 0 12px; }
.legal p, .legal li { color: var(--text-secondary); font-size: 16.5px; line-height: 1.7; }
.legal p { margin-bottom: 14px; }
.legal ul { margin: 0 0 16px 20px; display: grid; gap: 7px; }
.legal a:not(.legal-back) { color: var(--gold-deep); text-decoration: underline; }
.legal strong { color: var(--ink); }
/* Tableaux des pages légales (sous-traitants, bases légales). Le défilement
   horizontal évite d'écraser les colonnes sur un téléphone — un tableau de
   conformité doit rester lisible, pas rentrer de force. */
.legal .table-wrap { overflow-x: auto; margin: 0 0 20px; -webkit-overflow-scrolling: touch; }
.legal table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15px; }
.legal th, .legal td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: top; color: var(--text-secondary); line-height: 1.55; }
.legal th { font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-faint); font-weight: 700; white-space: nowrap; }
.legal blockquote { margin: 0 0 18px; padding: 12px 16px; border-left: 3px solid var(--gold); background: var(--gold-bg); border-radius: 0 var(--r-md) var(--r-md) 0; }
.legal blockquote p { margin: 0; font-size: 15.5px; }
.legal h3 { font-size: 17px; font-weight: 800; letter-spacing: -.2px; margin: 24px 0 8px; color: var(--ink); }
.legal code { font-family: var(--font-mono); font-size: 14px; background: var(--surface-sunk, #F2ECE0); padding: 1px 5px; border-radius: 5px; }

/* ---------- Blog ---------- */
.topbar { border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 40; background: rgba(248,246,242,.82); -webkit-backdrop-filter: blur(12px) saturate(150%); backdrop-filter: blur(12px) saturate(150%); }
.topbar .wrap { display: flex; align-items: center; gap: 26px; height: 72px; }
.topbar .brand { margin-right: auto; }
.topbar a.tlink { font-size: 15.5px; font-weight: 600; color: var(--text-secondary); }
.topbar a.tlink:hover { color: var(--ink); }
.topbar .btn { padding: 10px 18px; font-size: 15.5px; }

.blog-hero { padding: 110px 0 36px; text-align: center; }
.blog-hero .kicker { display: inline-block; margin-bottom: 14px; }
.blog-hero h1 { font-size: clamp(36.5px, 4.8vw, 56px); font-weight: 800; letter-spacing: -1.8px; margin-bottom: 12px; }
.blog-hero p { color: var(--text-secondary); font-size: 19.5px; max-width: 52ch; margin: 0 auto; }

.post-grid { max-width: 1080px; margin: 0 auto; padding: 24px 0 90px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.post-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card-lg); box-shadow: var(--shadow-card); padding: 26px; transition: transform .3s var(--spring), box-shadow .3s var(--spring); }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.post-card .cat { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--gold-deep); }
.post-card h2 { font-size: 21.5px; font-weight: 800; letter-spacing: -.5px; line-height: 1.18; margin: 12px 0 10px; color: var(--ink); }
.post-card p { color: var(--text-secondary); font-size: 15.5px; line-height: 1.55; flex: 1; }
.post-card .more { margin-top: 16px; font-weight: 700; color: var(--gold-deep); font-size: 15px; }
.post-card .meta { margin-top: 12px; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .4px; }

.breadcrumb { font-size: 14px; color: var(--text-faint); margin-bottom: 22px; }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--ink); }
.article { max-width: 720px; margin: 0 auto; padding: 44px 28px 60px; }
.article .cat { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold-deep); }
.article h1 { font-size: clamp(32.5px, 4.8vw, 49.5px); font-weight: 800; letter-spacing: -1.6px; line-height: 1.06; margin: 12px 0 14px; }
.article .ameta { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 28px; }
.article-body .lead { font-size: 20.5px; line-height: 1.6; color: var(--text-secondary); margin-bottom: 8px; }
.article-body h2 { font-size: 26px; font-weight: 800; letter-spacing: -.7px; margin: 38px 0 14px; }
.article-body p { font-size: 18.5px; line-height: 1.75; color: var(--ink); margin-bottom: 18px; }
.article-body ul, .article-body ol { margin: 0 0 18px 22px; display: grid; gap: 9px; }
.article-body li { font-size: 18.5px; line-height: 1.7; color: var(--ink); }
.article-body a { color: var(--gold-deep); text-decoration: underline; }
.source-box { background: var(--sage-bg); border-left: 3px solid var(--sage); border-radius: 0 var(--r-md) var(--r-md) 0; padding: 15px 20px; margin: 24px 0; font-size: 16px; line-height: 1.6; color: var(--ink); }
.source-box b { color: var(--sage); }
/* « En bref » : la réponse de l'article en un bloc, juste sous le chapô (citable tel quel). */
.brief { margin: 22px 0 8px; padding: 16px 20px; border-left: 3px solid var(--gold); border-radius: 0 var(--r-md) var(--r-md) 0; background: var(--gold-tint); }
.brief .brief-k { margin-bottom: 6px; font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--gold-deep); }
.brief p { margin: 0; font-size: 17px; line-height: 1.65; color: var(--ink); }
.brief p + p { margin-top: 6px; }
.article-cta { margin-top: 46px; background: linear-gradient(150deg, var(--ink), var(--ink-soft)); color: #fff; border-radius: var(--r-card-lg); padding: 28px 32px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; box-shadow: var(--shadow-button-dark); }
.article-cta .t { font-size: 20.5px; font-weight: 800; letter-spacing: -.5px; }
.article-cta .s { color: rgba(255,255,255,.7); font-size: 15px; margin-top: 4px; }
.article-body .article-cta .btn { color: var(--ink); text-decoration: none; }

@media (max-width: 820px) { .post-grid { grid-template-columns: 1fr; } }

/* ---------- Outils interactifs (blog) ---------- */
.tool { background: var(--surface-warm); border: 1px solid var(--border); border-radius: var(--r-card-lg); padding: 24px; margin: 32px 0; box-shadow: var(--shadow-soft); }
.tool-title { font-size: 18.5px; font-weight: 800; letter-spacing: -.4px; margin-bottom: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tool-row { margin-bottom: 16px; }
.tool-row > label { display: flex; align-items: center; justify-content: space-between; font-size: 15px; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; }
.tool-row output { font-family: var(--font-mono); font-weight: 700; color: var(--ink); font-size: 14.5px; }
.tool input[type=range] { width: 100%; -webkit-appearance: none; appearance: none; height: 5px; border-radius: 3px; background: var(--border-track); outline: none; }
.tool input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); cursor: pointer; box-shadow: var(--shadow-soft); }
.tool input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--ink); cursor: pointer; }
.seg { display: inline-flex; gap: 4px; background: var(--surface-sunk); border: 1px solid var(--border); border-radius: var(--r-md); padding: 3px; }
.seg button { font-family: var(--font-ui); font-weight: 700; font-size: 14px; padding: 7px 13px; border: 0; border-radius: 8px; background: transparent; color: var(--text-muted); cursor: pointer; transition: all .25s var(--spring); }
.seg button.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow-soft); }
.tool-result { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border); }
.tool-result > div { display: flex; flex-direction: column; }
.tool-result .rv { font-size: clamp(20.5px, 2.8vw, 27px); font-weight: 800; letter-spacing: -1px; color: var(--ink); }
.tool-result > div:last-child .rv { color: var(--sage); }
.tool-result .rv.neg { color: var(--danger); }
.tool-result .rl { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.tool-note b { color: var(--text-secondary); font-weight: 700; }
.tool-note { font-size: 13.5px; color: var(--text-faint); margin-top: 16px; line-height: 1.5; }

.ck-count { font-family: var(--font-mono); font-size: 14px; color: var(--gold-deep); }
.ck-bar { height: 7px; border-radius: 4px; background: var(--border-track); overflow: hidden; margin-bottom: 16px; }
.ck-bar i { display: block; height: 100%; width: 0; background: var(--sage); border-radius: 4px; transition: width .4s var(--spring); }
.ck-list { list-style: none; display: grid; gap: 3px; margin: 0; }
.ck-list li { margin: 0; }
.ck-list label { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--r-md); cursor: pointer; font-size: 16px; color: var(--ink); transition: background .2s; }
.ck-list label:hover { background: var(--card); }
.ck-list input { width: 20px; height: 20px; accent-color: var(--sage); cursor: pointer; flex: none; }
.ck-list input:checked ~ span { color: var(--text-faint); text-decoration: line-through; }

.dpe-scale { display: flex; gap: 6px; flex-wrap: wrap; }
.dpe-scale button { width: 46px; height: 46px; border-radius: var(--r-md); border: 0; font-weight: 800; font-size: 17.5px; cursor: pointer; color: #fff; transition: transform .2s var(--spring); }
.dpe-scale button:hover { transform: translateY(-2px); }
.dpe-scale button[aria-pressed=true] { outline: 3px solid var(--ink); outline-offset: 2px; }
.dpe-info { margin-top: 20px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); padding: 18px; }
.dpe-info .di-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.dpe-info .di-badge { width: 38px; height: 38px; border-radius: var(--r-md); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 19.5px; flex: none; }
.dpe-info .di-conso { font-weight: 700; font-size: 16px; }
.dpe-info p { font-size: 15.5px; color: var(--text-secondary); line-height: 1.6; margin: 0; }
.dpe-table { width: 100%; border-collapse: collapse; margin: 18px 0 6px; font-size: 15.5px; }
.dpe-table th, .dpe-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); }
.dpe-table th { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-faint); font-weight: 700; }
.dpe-table td:first-child { font-weight: 800; }

/* Liens « À lire aussi » (maillage interne) */
.related { margin-top: 42px; padding-top: 26px; border-top: 1px solid var(--border); }
.related h3 { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-faint); margin-bottom: 12px; }
.related a { display: block; font-size: 18px; font-weight: 700; letter-spacing: -.3px; color: var(--ink); padding: 11px 0; border-bottom: 1px solid var(--divider); transition: color .2s; }
.related a:last-child { border-bottom: 0; }
.related a:hover { color: var(--gold-deep); }
.related a small { display: block; color: var(--text-faint); font-weight: 500; font-size: 14px; margin-top: 2px; }

/* Infographies de contenu */
.infographic { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--r-card); margin: 26px 0; background: var(--surface-warm); }
.figure { margin: 26px 0; }
.figure figcaption { font-size: 14px; color: var(--text-faint); margin-top: 8px; text-align: center; }

/* Bloc auteur (E-E-A-T) */
.author-box { display: flex; gap: 16px; align-items: flex-start; margin: 42px 0 0; padding: 22px; background: var(--surface-warm); border: 1px solid var(--border); border-radius: var(--r-card); }
.author-box .ab-av { width: 48px; height: 48px; border-radius: 50%; background: var(--sage); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 17.5px; flex: none; }
.author-box .ab-name { font-size: 17.5px; font-weight: 800; letter-spacing: -.3px; }
.author-box .ab-role { font-size: 14px; color: var(--text-muted); margin-top: 1px; }
.author-box .ab-role a { color: var(--gold-deep); }
.author-box .ab-bio { font-size: 15px; color: var(--text-secondary); line-height: 1.55; margin: 10px 0 0; }

@media (max-width: 560px) { .tool-result { grid-template-columns: 1fr; gap: 14px; } }

/* ---------- Mini grid ---------- */
.mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.mini { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); padding: 26px; box-shadow: var(--shadow-card); transition: transform .3s var(--spring), box-shadow .3s var(--spring); }
.mini:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.mini .ic { width: 44px; height: 44px; border-radius: var(--r-md); display: grid; place-items: center; margin-bottom: 16px; }
.mini .ic svg { width: 21px; height: 21px; }
.mini h2, .mini h3 { font-size: 18px; font-weight: 800; letter-spacing: -.3px; margin-bottom: 8px; }
.mini p { font-size: 14.5px; color: var(--text-secondary); line-height: 1.55; }

/* ---------- Pricing ---------- */
.pricing { background: linear-gradient(180deg, var(--surface), var(--surface-warm)); }
.price-card { max-width: 480px; margin: 0 auto; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sheet); box-shadow: var(--shadow-card); overflow: hidden; transition: box-shadow .3s var(--spring); }
.price-card:hover { box-shadow: var(--shadow-lift); }
.price-top { padding: 34px 32px 26px; text-align: center; background: linear-gradient(180deg, var(--gold-tint), var(--card)); border-bottom: 1px solid var(--border); }
.price-top .tag { color: var(--gold-deep); font-weight: 700; font-size: 13px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 1.2px; }
.price-top .amount { font-size: 60.5px; font-weight: 800; letter-spacing: -2.6px; margin-top: 4px; }
.price-top .amount span { font-size: 19.5px; font-weight: 600; color: var(--text-muted); letter-spacing: 0; }
.price-top .amount.swap { animation: priceSwap .34s var(--spring); }
@keyframes priceSwap { from { opacity: 0; transform: translateY(7px) scale(.96); } }
.price-top .trial { display: inline-block; margin-top: 14px; font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--sage); background: var(--sage-bg); padding: 6px 13px; border-radius: var(--r-pill); }
.price-top .price-seg { margin: 16px 0 4px; }
.price-top .price-sub { font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: .2px; color: var(--gold-deep); margin-top: 6px; }
.seg-badge { display: inline-block; margin-left: 7px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .2px; color: var(--sage); background: var(--sage-bg); padding: 2px 6px; border-radius: var(--r-pill); vertical-align: middle; }
.seg-badge[hidden] { display: none; }
.seg button.on .seg-badge { color: var(--sage); background: var(--sage-bg); }
.price-list { padding: 28px 34px 14px; display: grid; gap: 14px; }
.price-list li { list-style: none; display: flex; gap: 12px; align-items: flex-start; font-size: 16px; color: var(--text-secondary); }
.price-list .check { width: 21px; height: 21px; border-radius: 50%; background: var(--sage-bg); color: var(--sage); display: grid; place-items: center; flex: none; margin-top: 1px; }
.price-list .check svg { width: 12px; height: 12px; }
.price-foot { padding: 8px 34px 34px; }
.price-foot .btn { width: 100%; }
.price-foot .fine { text-align: center; font-size: 13.5px; color: var(--text-faint); margin-top: 13px; }

/* ---------- CTA ---------- */
.cta { padding: 96px 0; }
.cta-card { --mx: 50%; --my: 0%; position: relative; overflow: hidden; background: linear-gradient(150deg, var(--ink), var(--ink-soft)); border-radius: var(--r-sheet); padding: 64px 48px; text-align: center; color: #fff; box-shadow: 0 34px 64px -30px rgba(27,26,23,.6); }
.cta-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(440px circle at var(--mx) var(--my), rgba(242,184,78,.2), transparent 60%); transition: background .15s; }
.cta-card .cta-mark { position: absolute; right: -34px; bottom: -46px; width: 290px; opacity: .07; transform: rotate(-8deg); pointer-events: none; z-index: 0; }
.cta-card > * { position: relative; z-index: 1; }
.cta-card h2 { font-size: clamp(32.5px, 4.1vw, 49.5px); font-weight: 800; letter-spacing: -1.6px; margin-bottom: 14px; }
.cta-card p { color: rgba(255,255,255,.72); font-size: 19px; max-width: 48ch; margin: 0 auto 30px; }
.cta-stores { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta-fine { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1px; color: rgba(255,255,255,.65); text-transform: uppercase; margin-top: 20px; }
.cta-link { color: var(--gold); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.cta-link:hover { color: #fff; }

/* ---------- Footer ---------- */
footer.site { padding: 60px 0 44px; border-top: 1px solid var(--border); background: var(--surface); }
.foot-grid { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; flex-wrap: wrap; }
.foot-brand { max-width: 300px; }
.foot-brand p { color: var(--text-muted); font-size: 15px; margin-top: 13px; line-height: 1.55; }
.foot-cols { display: flex; gap: 66px; flex-wrap: wrap; }
.foot-col h3, .foot-col h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: var(--text-faint); font-family: var(--font-mono); margin-bottom: 15px; }
.foot-col a { display: block; font-size: 15.5px; color: var(--text-secondary); margin-bottom: 11px; transition: color .2s; }
.foot-col a:hover { color: var(--ink); }
.foot-bottom { margin-top: 42px; padding-top: 26px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--text-faint); font-size: 14px; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--spring), transform .9s var(--spring); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } .vc-live::before { animation: none; } .faq-item::details-content { transition: none; } .price-top .amount.swap { animation: none; } .gauge .marker.pulse::after { animation: none; opacity: 0; } .ph-scroll.enter, .vi-item.new, .av-fade, .av-msg.enter, .av-shimmer i, .chat-msg.user, .chat-msg.pop, .chat-msg.pop li, .chat-msg.typing span { animation: none; } .chat-msg.pop li { opacity: 1; } }

/* ---------- Responsive ---------- */
@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; text-align: center; }
  .hero p.lead { margin: 0 auto; }
  .hero-actions, .stores { justify-content: center; }
  .hero-visual { order: -1; }
  .visitcard { max-width: 420px; }
  .frow { grid-template-columns: 1fr; gap: 30px; padding: 36px 0; }
  .frow.flip .ftext { order: 0; }
  .mini-grid { grid-template-columns: 1fr 1fr; }
  .nav-links, .nav-cta { display: none; }
  .menu-toggle { display: block; }
}
@media (max-width: 580px) {
  .mini-grid { grid-template-columns: 1fr; } section { padding: 64px 0; } .cta-card { padding: 44px 26px; }
  /* h1 : identique dès 390px (12.2vw ≈ 47.5px), dégrade proportionnellement sur
     les très petits écrans (320px → 39px) au lieu de déborder. */
  .hero h1 { letter-spacing: -1.6px; font-size: clamp(36px, 12.2vw, 47.5px); }
  .eyebrow { flex-wrap: wrap; justify-content: center; row-gap: 2px; }
}