/* ==========================================================================
   gestion-notes-de-frais.fr — système visuel (refonte du 25/09/2026)
   --------------------------------------------------------------------------
   Idée : le papier thermique d'un ticket de caisse, l'encre, le surligneur
   qu'on passe sur le montant, le vert « remboursé ». Instrument Serif pour la
   voix, Schibsted Grotesk pour le travail, JetBrains Mono pour les chiffres.

   Chargée EN DERNIER : elle redéfinit aussi les jetons des anciennes feuilles
   (--primary, --text, --pap-*, --accent…) pour que les pages de contenu
   suivent sans être réécrites, en clair comme en sombre.
   ========================================================================== */

:root {
  color-scheme: light;
  --papier: #F6F2E8;
  --surface: #FFFFFF;
  --surface-2: #EFE9DC;
  --surface-3: #E6DFCF;
  --encre: #1B1F2A;
  --encre-2: #474C58;
  --encre-3: #5E636F;
  --trait: #DDD5C4;
  --trait-fort: #C5BBA6;
  --vert: #17624A;
  --vert-fonce: #0F4A37;
  --vert-texte: #17624A;
  --vert-voile: #E3EFE9;
  --action: #17624A;
  --action-survol: #0F4A37;
  --action-texte: #FFFFFF;
  --surligneur: #FFE066;
  --surligneur-texte: #1B1F2A;
  --rouge: #B42318;
  --rouge-voile: #FBE9E7;
  --ambre: #8A5A00;
  --ambre-voile: #FBF1D9;
  --ombre-1: 0 1px 0 rgba(27, 31, 42, .04), 0 1px 2px rgba(27, 31, 42, .06);
  --ombre-2: 0 1px 0 rgba(27, 31, 42, .04), 0 18px 40px -18px rgba(27, 31, 42, .28);
  --ombre-3: 0 30px 80px -30px rgba(27, 31, 42, .45);
  --grain: .035;

  --f-titre: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --f-texte: 'Schibsted Grotesk', ui-sans-serif, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --r-1: 8px;
  --r-2: 14px;
  --r-3: 22px;
  --courbe: cubic-bezier(.2, .8, .2, 1);
  --largeur: 1180px;
}

/* Sombre : même logique de variables, redéfinies. Le document (la feuille) reste blanc. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --papier: #0F1217;
    --surface: #171B22;
    --surface-2: #1E232C;
    --surface-3: #262C37;
    --encre: #F1ECE0;
    --encre-2: #C9C4B8;
    --encre-3: #A29E94;
    --trait: #2B313C;
    --trait-fort: #3D4452;
    --vert: #5CCB9F;
    --vert-fonce: #86DDBA;
    --vert-texte: #7FD9B3;
    --vert-voile: rgba(92, 203, 159, .12);
    --action: #5CCB9F;
    --action-survol: #86DDBA;
    --action-texte: #06140E;
    --surligneur: #E9C94A;
    --surligneur-texte: #14161C;
    --rouge: #FF8A7A;
    --rouge-voile: rgba(255, 138, 122, .12);
    --ambre: #F2C46B;
    --ambre-voile: rgba(242, 196, 107, .12);
    --ombre-1: 0 1px 0 rgba(0, 0, 0, .3);
    --ombre-2: 0 18px 40px -18px rgba(0, 0, 0, .7);
    --ombre-3: 0 30px 80px -30px rgba(0, 0, 0, .9);
    --grain: .05;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --papier: #0F1217;
  --surface: #171B22;
  --surface-2: #1E232C;
  --surface-3: #262C37;
  --encre: #F1ECE0;
  --encre-2: #C9C4B8;
  --encre-3: #A29E94;
  --trait: #2B313C;
  --trait-fort: #3D4452;
  --vert: #5CCB9F;
  --vert-fonce: #86DDBA;
  --vert-texte: #7FD9B3;
  --vert-voile: rgba(92, 203, 159, .12);
  --action: #5CCB9F;
  --action-survol: #86DDBA;
  --action-texte: #06140E;
  --surligneur: #E9C94A;
  --surligneur-texte: #14161C;
  --rouge: #FF8A7A;
  --rouge-voile: rgba(255, 138, 122, .12);
  --ambre: #F2C46B;
  --ambre-voile: rgba(242, 196, 107, .12);
  --ombre-1: 0 1px 0 rgba(0, 0, 0, .3);
  --ombre-2: 0 18px 40px -18px rgba(0, 0, 0, .7);
  --ombre-3: 0 30px 80px -30px rgba(0, 0, 0, .9);
  --grain: .05;
}

/* ── Jetons des anciennes feuilles, rebranchés ───────────────────────────── */
:root, :root[data-theme] {
  --primary: var(--action);
  --primary-dark: var(--action-survol);
  --primary-hover: var(--action-survol);
  --primary-light: var(--vert);
  --primary-bg: var(--vert-voile);
  --secondary: var(--vert-fonce);
  --accent: var(--vert-texte);
  --accent-fonce: var(--vert-fonce);
  --accent-dark: var(--vert-fonce);
  --accent-light: var(--vert);
  --accent-voile: var(--vert-voile);
  --bg: var(--papier);
  --bg-white: var(--surface);
  --bg-card: var(--surface);
  --text: var(--encre);
  --text-light: var(--encre-2);
  --text-muted: var(--encre-3);
  --muted: var(--encre-3);
  --border: var(--trait);
  --border-light: var(--surface-2);
  --success: var(--vert-texte);
  --success-bg: var(--vert-voile);
  --error: var(--rouge);
  --error-bg: var(--rouge-voile);
  --warning: var(--ambre);
  --warning-bg: var(--ambre-voile);
  --info: var(--vert-texte);
  --info-bg: var(--vert-voile);
  --font-sans: var(--f-texte);
  --font-mono: var(--f-mono);
  --radius: var(--r-1);
  --radius-lg: var(--r-2);
  --radius-xl: var(--r-3);
  --shadow-sm: var(--ombre-1);
  --shadow: var(--ombre-1);
  --shadow-md: var(--ombre-2);
  --shadow-lg: var(--ombre-2);
  --pap-papier: var(--papier);
  --pap-feuille: var(--surface);
  --pap-champ: var(--surface-2);
  --pap-encre: var(--encre);
  --pap-encre-2: var(--encre-2);
  --pap-encre-3: var(--encre-3);
  --pap-trait: var(--trait-fort);
  --pap-trait-clair: var(--trait);
  --pap-titre: var(--f-texte);
  --pap-mono: var(--f-mono);
  --pap-prose: var(--f-texte);
  --color-primary: var(--action);
  --color-text: var(--encre);
  --color-text-light: var(--encre-2);
  --color-surface: var(--surface);
  --color-border: var(--trait);
}

/* ── Base ─────────────────────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--f-texte);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
::selection { background: var(--surligneur); color: var(--surligneur-texte); }
a { color: var(--vert-texte); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--vert-fonce); }
:focus-visible { outline: 3px solid var(--vert); outline-offset: 3px; border-radius: 4px; }
img, svg { max-width: 100%; }
h1, h2, h3, h4 { color: var(--encre); letter-spacing: -.01em; }
h1, h2 { font-family: var(--f-titre); font-weight: 400; line-height: 1.05; }
h3 { font-family: var(--f-texte); font-weight: 650; }
.container { max-width: var(--largeur); margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
@media (max-width: 640px) { .container { padding: 0 16px; } }
.main-content { min-height: 60vh; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--f-mono); font-feature-settings: "tnum" 1; }
.surligne {
  background: linear-gradient(transparent 58%, var(--surligneur) 58%, var(--surligneur) 92%, transparent 92%);
  color: var(--encre);
  padding: 0 .06em;
}
:root[data-theme="dark"] .surligne { background: linear-gradient(transparent 58%, color-mix(in srgb, var(--surligneur) 38%, transparent) 58%, color-mix(in srgb, var(--surligneur) 38%, transparent) 92%, transparent 92%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .surligne { background: linear-gradient(transparent 58%, color-mix(in srgb, var(--surligneur) 38%, transparent) 58%, color-mix(in srgb, var(--surligneur) 38%, transparent) 92%, transparent 92%); } }
em.voix { font-style: italic; color: var(--vert-texte); }

/* ── En-tête ─────────────────────────────────────────────────────────── */
.j-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--papier) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--courbe), background .3s;
}
.j-header.est-defile { border-bottom-color: var(--trait); }
.j-header__in { display: flex; align-items: center; gap: 18px; height: 68px; }
.j-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--encre); flex-shrink: 0; }
.j-logo:hover { color: var(--encre); }
.j-logo svg { width: 26px; height: 30px; display: block; }
.j-logo__mot { font-family: var(--f-titre); font-size: 26px; white-space: nowrap; line-height: 1; letter-spacing: -.01em; }
.j-logo__sous { font-family: var(--f-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--encre-3); margin-left: 2px; border-left: 1px solid var(--trait-fort); padding-left: 10px; }
.j-logo .coche { stroke-dasharray: 16; stroke-dashoffset: 0; transition: stroke-dashoffset .6s var(--courbe); }
.j-logo:hover .coche { animation: tracer .7s var(--courbe); }
@keyframes tracer { from { stroke-dashoffset: 16; } to { stroke-dashoffset: 0; } }
.j-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.j-nav a:not(.btn) { color: var(--encre-2); text-decoration: none; font-weight: 500; font-size: 15px; padding: 8px 12px; border-radius: 999px; transition: background .2s, color .2s; }
.j-nav a:not(.btn):hover, .j-nav a[aria-current="page"] { color: var(--encre); background: var(--surface-2); }
.j-nav .btn { margin-left: 8px; }
.j-theme {
  width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--trait);
  background: var(--surface); color: var(--encre-2); display: inline-grid; place-items: center; cursor: pointer;
  transition: transform .3s var(--courbe), border-color .2s;
}
.j-theme:hover { border-color: var(--trait-fort); color: var(--encre); }
.j-theme:active { transform: rotate(-30deg) scale(.94); }
.j-theme .lune { display: none; }
:root[data-theme="dark"] .j-theme .lune { display: block; }
:root[data-theme="dark"] .j-theme .soleil { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .j-theme .lune { display: block; }
  :root:not([data-theme="light"]) .j-theme .soleil { display: none; }
}
.j-burger { display: none; width: 40px; height: 40px; border: 1px solid var(--trait); border-radius: 12px; background: var(--surface); color: var(--encre); cursor: pointer; align-items: center; justify-content: center; }
@media (max-width: 880px) {
  .j-logo__sous { display: none; }
  .j-burger { display: inline-flex; margin-left: auto; }
  .j-nav {
    position: fixed; inset: 68px 0 auto 0; flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--papier); border-bottom: 1px solid var(--trait); padding: 10px 16px 18px;
    transform: translateY(-8px); opacity: 0; pointer-events: none; transition: .25s var(--courbe);
  }
  .j-nav.est-ouvert { transform: none; opacity: 1; pointer-events: auto; }
  .j-nav a:not(.btn) { padding: 12px 10px; font-size: 16px; }
  .j-nav .btn { margin: 8px 0 0; }
  .j-nav .j-theme { align-self: flex-start; margin-top: 6px; }
}

/* ── Boutons ─────────────────────────────────────────────────────────── */
.btn {
  --b-bg: var(--surface); --b-fg: var(--encre); --b-bd: var(--trait-fort);
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font: 600 15px/1.2 var(--f-texte); letter-spacing: -.005em;
  padding: 12px 18px; border-radius: 12px; border: 1px solid var(--b-bd);
  background: var(--b-bg); color: var(--b-fg); text-decoration: none; cursor: pointer;
  transition: transform .18s var(--courbe), box-shadow .2s, background .2s, border-color .2s, color .2s;
  box-shadow: var(--ombre-1); -webkit-tap-highlight-color: transparent; white-space: normal; text-align: center;
}
.btn:hover { color: var(--b-fg); transform: translateY(-1px); box-shadow: var(--ombre-2); }
.btn:active { transform: translateY(0) scale(.985); box-shadow: var(--ombre-1); }
.btn[disabled], .btn.est-occupe { opacity: .6; cursor: progress; transform: none; }
.btn-primary, .btn-accent { --b-bg: var(--action); --b-fg: var(--action-texte); --b-bd: var(--action); }
.btn-primary:hover, .btn-accent:hover { --b-bg: var(--action-survol); --b-bd: var(--action-survol); }
.btn-outline { --b-bg: transparent; box-shadow: none; }
.btn-outline:hover { --b-bg: var(--surface); }
.btn-ghost { --b-bg: transparent; --b-bd: transparent; box-shadow: none; }
.btn-ghost:hover { --b-bg: var(--surface-2); box-shadow: none; }
.btn-danger { --b-bg: transparent; --b-fg: var(--rouge); --b-bd: color-mix(in srgb, var(--rouge) 40%, transparent); box-shadow: none; }
.btn-sm { padding: 8px 12px; font-size: 14px; border-radius: 10px; }
.btn-lg { padding: 15px 22px; font-size: 16.5px; border-radius: 14px; }
.btn-block { width: 100%; }
.btn .fleche { transition: transform .25s var(--courbe); }
.btn:hover .fleche { transform: translateX(3px); }

/* ── Formulaires ─────────────────────────────────────────────────────── */
input, select, textarea, button { font-family: inherit; }
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; min-width: 0; }
.form-group label, .j-label { font-size: 13.5px; font-weight: 600; color: var(--encre-2); }
.form-group input, .form-group select, .form-group textarea, .j-input,
.expenses-table input, .expenses-table select {
  font: 15px/1.3 var(--f-texte); color: var(--encre); background: var(--surface);
  border: 1px solid var(--trait-fort); border-radius: 10px; padding: 11px 12px; width: 100%; box-sizing: border-box;
  transition: border-color .2s, box-shadow .2s, background .2s; min-width: 0;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus, .j-input:focus,
.expenses-table input:focus, .expenses-table select:focus {
  outline: none; border-color: var(--vert); box-shadow: 0 0 0 4px var(--vert-voile);
}
.form-group input:disabled { background: var(--surface-2); color: var(--encre-3); }
input[type="checkbox"] { accent-color: var(--vert); width: 18px; height: 18px; }

/* ── Messages ────────────────────────────────────────────────────────── */
.flash-container { position: fixed; top: 80px; right: 16px; left: auto; z-index: 90; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }
.flash {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px;
  background: var(--surface); color: var(--encre); border: 1px solid var(--trait); box-shadow: var(--ombre-2);
  font-size: 14.5px; transition: opacity .3s, transform .3s; animation: glisser .35s var(--courbe);
}
.flash--success { border-left: 4px solid var(--vert); }
.flash--error { border-left: 4px solid var(--rouge); }
.flash--warning { border-left: 4px solid var(--ambre); }
.flash--info { border-left: 4px solid var(--encre-3); }
.flash-close { margin-left: auto; background: none; border: 0; color: var(--encre-3); font-size: 18px; cursor: pointer; line-height: 1; }
@keyframes glisser { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ── Sections génériques ─────────────────────────────────────────────── */
.j-section { padding: 96px 0; position: relative; }
.j-section--serre { padding: 64px 0; }
.j-section--sombre { background: var(--encre); color: var(--papier); }
.j-surtitre { font: 500 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--vert-texte); display: inline-flex; align-items: center; gap: 10px; }
.j-surtitre::before { content: ""; width: 22px; height: 1px; background: currentColor; }
.j-h2 { font-size: clamp(34px, 4.6vw, 58px); margin: 14px 0 16px; }
.j-lede { font-size: clamp(17px, 1.6vw, 19.5px); color: var(--encre-2); max-width: 62ch; margin: 0; }
.j-entete { max-width: 760px; margin-bottom: 48px; }
.j-entete--centre { margin-left: auto; margin-right: auto; text-align: center; }
.j-entete--centre .j-lede { margin: 0 auto; }
@media (max-width: 640px) { .j-section { padding: 64px 0; } .j-entete { margin-bottom: 32px; } }

/* ── Héros ───────────────────────────────────────────────────────────── */
.j-hero { padding: 56px 0 72px; position: relative; overflow: hidden; }
.j-hero::before {
  content: ""; position: absolute; inset: -20% -10% auto auto; width: 720px; height: 720px; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--surligneur) 26%, transparent), transparent 70%);
  pointer-events: none; z-index: 0;
}
.j-hero__grille { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 48px; align-items: center; }
.j-hero h1 { font-size: clamp(42px, 5.6vw, 80px); margin: 18px 0 20px; line-height: .98; letter-spacing: -.02em; }
.j-hero h1 em { font-style: italic; color: var(--vert-texte); }
.j-hero__sous { font-size: clamp(17px, 1.6vw, 20px); color: var(--encre-2); max-width: 36em; margin: 0 0 28px; }
.j-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.j-hero__preuves { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 24px 0 0; padding: 0; list-style: none; color: var(--encre-3); font-size: 14px; }
.j-hero__preuves li { display: inline-flex; align-items: center; gap: 7px; }
.j-hero__preuves svg { color: var(--vert-texte); flex-shrink: 0; }
@media (max-width: 960px) {
  .j-hero__grille { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .j-hero { padding-top: 32px; }
}

/* ── Le ticket (papier thermique) ────────────────────────────────────── */
.ticket {
  --t-bg: #FFFDF7; --t-encre: #2A2C31; --t-pale: #6D6F75;
  position: relative; background: var(--t-bg); color: var(--t-encre);
  font: 12.5px/1.55 var(--f-mono); padding: 20px 18px 26px; width: 250px; box-sizing: border-box;
  box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 20px 40px -18px rgba(20, 20, 30, .45);
  --dents: radial-gradient(circle at 6px 0, transparent 5.2px, var(--t-bg) 5.6px);
  -webkit-mask: linear-gradient(#000 0 0) top/100% calc(100% - 7px) no-repeat, radial-gradient(circle at 6px 7px, transparent 5px, #000 5.5px) bottom/12px 7px repeat-x;
          mask: linear-gradient(#000 0 0) top/100% calc(100% - 7px) no-repeat, radial-gradient(circle at 6px 7px, transparent 5px, #000 5.5px) bottom/12px 7px repeat-x;
}
.ticket__nom { text-align: center; font-weight: 700; font-size: 14.5px; letter-spacing: .06em; }
.ticket__pale { color: var(--t-pale); text-align: center; font-size: 11px; }
.ticket hr { border: 0; border-top: 1px dashed #b9b6ad; margin: 9px 0; }
.ticket__ligne { display: flex; justify-content: space-between; gap: 10px; }
.ticket__ligne span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket__total { font-weight: 700; font-size: 14px; }
.ticket mark { background: transparent; color: inherit; position: relative; z-index: 0; }
.ticket mark::before {
  content: ""; position: absolute; inset: 1px -3px; z-index: -1; border-radius: 2px;
  background: color-mix(in srgb, #FFE066 88%, transparent); transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--courbe);
}
.ticket.est-lu mark::before { transform: scaleX(1); }
.ticket.est-lu mark:nth-of-type(2)::before { transition-delay: .12s; }

/* ── Démo : scanner ──────────────────────────────────────────────────── */
.demo {
  position: relative; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r-3);
  box-shadow: var(--ombre-3); padding: 18px; overflow: hidden;
}
.demo__barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; margin-bottom: 14px; }
.demo__titre { font: 500 12px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--encre-3); display: inline-flex; gap: 8px; align-items: center; }
.demo__titre i { width: 8px; height: 8px; border-radius: 50%; background: var(--vert); box-shadow: 0 0 0 4px var(--vert-voile); animation: pulse 2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px transparent; } }
.demo__choix { display: flex; gap: 6px; flex-wrap: wrap; }
.demo__choix button {
  font: 500 12.5px/1 var(--f-texte); padding: 8px 10px; border-radius: 999px; border: 1px solid var(--trait);
  background: var(--surface); color: var(--encre-2); cursor: pointer; transition: .2s;
}
.demo__choix button[aria-pressed="true"] { background: var(--encre); color: var(--papier); border-color: var(--encre); }
.demo__scene { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 20px; align-items: start; }
.demo__plateau {
  position: relative; background:
    repeating-linear-gradient(135deg, transparent 0 10px, color-mix(in srgb, var(--encre) 3%, transparent) 10px 11px),
    var(--surface-2);
  border-radius: var(--r-2); padding: 20px 0 18px; display: grid; place-items: center; min-height: 360px; overflow: hidden;
}
.demo__plateau .ticket { transform: rotate(-2.2deg); transition: transform .6s var(--courbe); }
.demo__plateau.est-scan .ticket { transform: rotate(0deg) scale(1.01); }
.demo__plateau img.demo__photo { max-width: 92%; max-height: 380px; border-radius: 6px; box-shadow: 0 20px 40px -18px rgba(0,0,0,.5); transform: rotate(-1.5deg); }
.laser {
  position: absolute; left: 6%; right: 6%; height: 70px; top: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--vert) 22%, transparent) 70%, var(--vert) 96%, transparent);
  border-bottom: 2px solid var(--vert); filter: drop-shadow(0 0 8px var(--vert));
}
.est-scan .laser { opacity: 1; animation: balayer 1.5s var(--courbe) infinite alternate; }
@keyframes balayer { from { transform: translateY(-40px); } to { transform: translateY(340px); } }
.coins { position: absolute; inset: 14px; pointer-events: none; opacity: 0; transition: opacity .3s; }
.est-scan .coins { opacity: 1; }
.coins::before, .coins::after { content: ""; position: absolute; width: 22px; height: 22px; border: 2px solid var(--vert); }
.coins::before { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.coins::after { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }

.extrait { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.extrait__statut { font: 500 12.5px/1.3 var(--f-mono); color: var(--encre-3); min-height: 18px; display: flex; gap: 8px; align-items: center; }
.extrait__statut .point { width: 7px; height: 7px; border-radius: 50%; background: var(--trait-fort); }
.extrait__statut.est-actif .point { background: var(--vert); animation: pulse 1s infinite; }
.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.champ {
  border: 1px solid var(--trait); border-radius: 10px; padding: 8px 10px; background: var(--papier);
  min-width: 0; transition: border-color .3s, background .3s, transform .4s var(--courbe);
}
.champ--large { grid-column: 1 / -1; }
.champ__lab { display: block; font: 500 10.5px/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--encre-3); }
.champ__val { display: block; font-weight: 600; font-size: 15px; min-height: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.champ__val.mono { font-family: var(--f-mono); font-weight: 600; font-size: 14px; letter-spacing: -.02em; }
.champ.est-rempli { border-color: color-mix(in srgb, var(--vert) 45%, var(--trait)); background: var(--surface); animation: poser .5s var(--courbe); }
@keyframes poser { from { transform: translateY(4px); } to { transform: none; } }
.curseur::after { content: "▍"; color: var(--vert); animation: clignote .8s steps(1) infinite; margin-left: 1px; }
@keyframes clignote { 50% { opacity: 0; } }
.remarque { font-size: 13px; color: var(--ambre); background: var(--ambre-voile); border-radius: 10px; padding: 8px 10px; }

.mini-note {
  margin-top: 6px; border: 1px solid var(--trait); border-radius: 12px; background: var(--surface); overflow: hidden;
}
.mini-note__tete { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 12px; border-bottom: 1px solid var(--trait); font-size: 13px; color: var(--encre-3); }
.mini-note__tete strong { font-family: var(--f-titre); font-weight: 400; font-size: 19px; color: var(--encre); white-space: nowrap; }
.mini-note__tete span { min-width: 0; }
.mini-note ul { list-style: none; margin: 0; padding: 0; }
.mini-note li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-bottom: 1px dashed var(--trait); font-size: 13.5px; }
.mini-note li span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-note li.est-nouveau { animation: entrer .6s var(--courbe); background: var(--vert-voile); }
@keyframes entrer { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.mini-note__total { display: flex; justify-content: space-between; padding: 10px 12px; font-weight: 700; }
.mini-note__total .mono { font-size: 17px; }
.demo__pied { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--trait); }
.demo__pied small { color: var(--encre-3); font-size: 13px; }
@media (max-width: 640px) {
  .demo { padding: 12px; border-radius: 18px; }
  .demo__scene { grid-template-columns: minmax(0, 1fr); }
  .demo__plateau { min-height: 300px; }
  .ticket { width: 236px; }
}

/* Vol de la ligne vers la note */
.vol { position: fixed; z-index: 80; pointer-events: none; background: var(--surface); border: 1px solid var(--vert); border-radius: 10px; padding: 6px 10px; font-size: 13px; font-weight: 600; box-shadow: var(--ombre-2); }

/* ── Bandeau de chiffres ─────────────────────────────────────────────── */
.j-bandeau { border-block: 1px solid var(--trait); background: var(--surface); }
.j-bandeau__in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.j-bandeau__in > div { padding: 22px 20px; border-left: 1px solid var(--trait); }
.j-bandeau__in > div:first-child { border-left: 0; }
.j-bandeau strong { display: block; font-family: var(--f-titre); font-weight: 400; font-size: 34px; line-height: 1.05; }
.j-bandeau span { color: var(--encre-3); font-size: 14px; }
@media (max-width: 760px) {
  .j-bandeau__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .j-bandeau__in > div:nth-child(3) { border-left: 0; }
  .j-bandeau__in > div:nth-child(n+3) { border-top: 1px solid var(--trait); }
}

/* ── Étapes ──────────────────────────────────────────────────────────── */
.etapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: etape; }
.etape { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r-3); padding: 26px; position: relative; overflow: hidden; }
.etape__num { font: 500 12px/1 var(--f-mono); color: var(--encre-3); letter-spacing: .12em; }
.etape h3 { font-family: var(--f-titre); font-weight: 400; font-size: 30px; margin: 12px 0 8px; }
.etape p { color: var(--encre-2); margin: 0; }
.etape__visuel { height: 120px; margin: 4px 0 14px; display: grid; place-items: center; border-radius: 14px; background: var(--surface-2); }
.etape__visuel svg { width: 100%; height: 100%; }
.trace { stroke-dasharray: var(--l, 300); stroke-dashoffset: var(--l, 300); }
.est-visible .trace { animation: dessiner 1.6s var(--courbe) forwards; animation-delay: var(--d, 0s); }
@keyframes dessiner { to { stroke-dashoffset: 0; } }
@media (max-width: 860px) { .etapes { grid-template-columns: minmax(0, 1fr); } }

/* ── Fonctions (grille éditoriale) ───────────────────────────────────── */
.fonctions { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.fonction { grid-column: span 4; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r-3); padding: 24px; transition: transform .3s var(--courbe), box-shadow .3s; }
.fonction:hover { transform: translateY(-3px); box-shadow: var(--ombre-2); }
.fonction--large { grid-column: span 8; }
.fonction__ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--vert-voile); color: var(--vert-texte); margin-bottom: 14px; }
.fonction h3 { margin: 0 0 6px; font-size: 18px; }
.fonction p { margin: 0; color: var(--encre-2); font-size: 15px; }
.fonction .mono { color: var(--encre); }
@media (max-width: 900px) { .fonction, .fonction--large { grid-column: span 6; } }
@media (max-width: 620px) { .fonction, .fonction--large { grid-column: 1 / -1; } }

/* Barème mini */
.bareme-mini { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; }
.bareme-mini th, .bareme-mini td { text-align: left; padding: 7px 8px; border-bottom: 1px dashed var(--trait); }
.bareme-mini th { font: 500 11px/1.2 var(--f-mono); color: var(--encre-3); text-transform: uppercase; letter-spacing: .06em; }
.bareme-mini td.mono { text-align: right; }

/* ── Tarifs ──────────────────────────────────────────────────────────── */
.bascule { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--trait); margin: 0 auto 28px; }
.bascule button { font: 600 14px/1 var(--f-texte); border: 0; background: transparent; color: var(--encre-2); padding: 10px 16px; border-radius: 999px; cursor: pointer; transition: .25s var(--courbe); }
.bascule button[aria-pressed="true"] { background: var(--surface); color: var(--encre); box-shadow: var(--ombre-1); }
.bascule em { font-style: normal; color: var(--vert-texte); font-size: 12px; margin-left: 4px; }
.offres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.offre { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r-3); padding: 28px 24px 24px; }
.offre--phare { border: 2px solid var(--vert); box-shadow: var(--ombre-3); transform: translateY(-8px); }
.offre__badge { position: absolute; top: -13px; left: 24px; background: var(--vert); color: var(--action-texte); font: 600 12px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; padding: 7px 10px; border-radius: 999px; }
.offre h3 { margin: 0; font-size: 17px; }
.offre__pour { color: var(--encre-3); font-size: 14px; margin: 4px 0 18px; }
.offre__prix { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.offre__prix strong { font-family: var(--f-titre); font-weight: 400; font-size: 56px; line-height: 1; letter-spacing: -.02em; }
.offre__prix span { color: var(--encre-3); }
.offre__note { color: var(--encre-3); font-size: 13px; min-height: 20px; margin-bottom: 18px; }
.offre ul { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 9px; font-size: 15px; }
.offre li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; color: var(--encre-2); }
.offre li svg { color: var(--vert-texte); margin-top: 4px; }
.offre li.est-absent { color: var(--encre-3); }
.offre li.est-absent svg { color: var(--trait-fort); }
.offre .btn { margin-top: auto; }
.offres__garantie { text-align: center; color: var(--encre-3); font-size: 14px; margin-top: 22px; }
[data-periode="an"] .prix-mois, [data-periode="mois"] .prix-an { display: none; }
@media (max-width: 900px) {
  .offres { grid-template-columns: minmax(0, 1fr); max-width: 480px; margin: 0 auto; }
  .offre--phare { transform: none; order: -1; }
}

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.faq { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--trait); }
.faq details { border-bottom: 1px solid var(--trait); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 44px 20px 0; font-weight: 600; font-size: 17px; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 12px; height: 12px; border-right: 2px solid var(--encre-3); border-bottom: 2px solid var(--encre-3); transform: translateY(-70%) rotate(45deg); transition: transform .3s var(--courbe); }
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq details p { margin: 0 0 20px; color: var(--encre-2); max-width: 68ch; }

/* ── Appel final ─────────────────────────────────────────────────────── */
.j-final { background: var(--encre); color: var(--papier); border-radius: 28px; padding: 64px 48px; position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.j-final h2 { color: var(--papier); font-size: clamp(36px, 4.4vw, 60px); margin: 0 0 12px; }
.j-final p { color: color-mix(in srgb, var(--papier) 78%, transparent); margin: 0; font-size: 18px; }
.j-final .btn-primary { --b-bg: var(--surligneur); --b-fg: #14161C; --b-bd: var(--surligneur); }
.j-final .btn-outline { --b-fg: var(--papier); --b-bd: color-mix(in srgb, var(--papier) 35%, transparent); }
.j-final__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
@media (max-width: 800px) { .j-final { grid-template-columns: minmax(0, 1fr); padding: 44px 22px; border-radius: 22px; } .j-final__actions { justify-content: flex-start; } }

/* ── Pied de page ────────────────────────────────────────────────────── */
.j-footer { margin-top: 96px; border-top: 1px solid var(--trait); background: var(--surface); padding: 56px 0 28px; font-size: 14.5px; }
.j-footer__grille { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.j-footer h4 { font: 500 11.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--encre-3); margin: 6px 0 14px; }
.j-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.j-footer a { color: var(--encre-2); text-decoration: none; }
.j-footer a:hover { color: var(--encre); text-decoration: underline; }
.j-footer__desc { color: var(--encre-3); max-width: 34ch; margin: 14px 0 0; }
.j-footer__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--trait); color: var(--encre-3); font-size: 13px; }
.j-reseau { margin-top: 36px; }
.j-reseau h4 { margin-bottom: 12px; }
.j-reseau ul { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.j-reseau a { display: block; padding: 10px 12px; border: 1px solid var(--trait); border-radius: 12px; background: var(--papier); }
.j-reseau a:hover { border-color: var(--trait-fort); text-decoration: none; }
.j-reseau small { display: block; color: var(--encre-3); font-size: 12.5px; }
@media (max-width: 860px) { .j-footer__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } .j-footer__grille > div:first-child { grid-column: 1 / -1; } }

/* ── Apparition au défilement ────────────────────────────────────────── */
.revele { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--courbe), transform .8s var(--courbe); transition-delay: var(--d, 0s); }
.revele.est-visible { opacity: 1; transform: none; }
.no-js .revele { opacity: 1; transform: none; }

/* ── Pages de contenu (anciennes feuilles, rhabillées) ───────────────── */
.km-page, .legal-page, .seo-content, .payment-page, .error-page { padding: 48px 0 24px; }
.km-head h1, .legal-page h1, .j-page h1 { font-size: clamp(38px, 5vw, 64px); line-height: 1.02; margin: 12px 0 16px; letter-spacing: -.02em; }
.km-body h2, .legal-page h2, .seo-content h2, .j-prose h2 { font-size: clamp(28px, 3.2vw, 40px); margin: 48px 0 14px; }
.km-body h3, .seo-content h3, .j-prose h3 { font-size: 19px; margin: 28px 0 8px; }
.km-body, .seo-content-inner, .legal-page .container, .j-prose { max-width: 760px; }
.km-body p, .km-body li, .seo-content p, .seo-content li, .legal-page p, .legal-page li, .j-prose p, .j-prose li { color: var(--encre-2); font-size: 17px; line-height: 1.7; }
.km-lede { font-size: 20px; color: var(--encre-2); max-width: 62ch; }
.km-updated { font: 500 12px/1.4 var(--f-mono); letter-spacing: .06em; color: var(--encre-3); text-transform: uppercase; }
.km-answer { background: var(--surface); border: 1px solid var(--trait); border-left: 4px solid var(--vert); border-radius: 14px; padding: 18px 20px; font-size: 17px; line-height: 1.65; max-width: 760px; }
.km-table-wrap { overflow-x: auto; border: 1px solid var(--trait); border-radius: 14px; background: var(--surface); margin: 18px 0; }
.km-bareme { width: 100%; border-collapse: collapse; font-size: 15px; }
.km-bareme caption { text-align: left; padding: 12px 14px; color: var(--encre-3); font-size: 13.5px; caption-side: top; }
.km-bareme th, .km-bareme td { padding: 11px 14px; border-top: 1px solid var(--trait); text-align: left; vertical-align: top; color: var(--encre); }
.km-bareme thead th { background: var(--surface-2); font: 600 12.5px/1.3 var(--f-texte); color: var(--encre-2); border-top: 0; }
.seo-cta { margin: 36px 0; }
.legal-page { padding-bottom: 48px; }
.legal-page ul { padding-left: 20px; }

/* Encadré « faire le calcul » réutilisable */
.j-encart { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; background: var(--vert-voile); border: 1px solid color-mix(in srgb, var(--vert) 30%, transparent); border-radius: 18px; padding: 20px 22px; margin: 32px 0; }
.j-encart p { margin: 0; color: var(--encre); font-weight: 600; max-width: 46ch; }

/* ── Paiement, auth, tableau de bord ─────────────────────────────────── */
.payment-card, .j-carte { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r-3); box-shadow: var(--ombre-2); padding: 36px; max-width: 640px; margin: 0 auto; }
.payment-card h1 { font-size: clamp(34px, 4vw, 48px); margin: 12px 0; }
.auth-body { background: var(--papier); }
.auth-card { background: var(--surface) !important; border: 1px solid var(--trait); border-radius: var(--r-3) !important; box-shadow: var(--ombre-2) !important; }
.auth-card h1 { font-family: var(--f-titre); font-weight: 400; font-size: 38px; }
.auth-logo { color: var(--encre) !important; text-decoration: none; }
.dashboard-wrapper { padding: 40px 0; }
.stat-card, .dashboard-section, .dashboard-empty { background: var(--surface) !important; border: 1px solid var(--trait) !important; border-radius: var(--r-2) !important; }
.notes-table { width: 100%; border-collapse: collapse; }
.notes-table th, .notes-table td { padding: 10px 12px; border-bottom: 1px solid var(--trait); text-align: left; }

/* ── Modale d'achat ──────────────────────────────────────────────────── */
.modal-overlay { position: fixed; inset: 0; z-index: 70; background: rgba(12, 14, 18, .55); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal-content { background: var(--surface); color: var(--encre); border-radius: var(--r-3); border: 1px solid var(--trait); box-shadow: var(--ombre-3); max-width: 560px; width: 100%; max-height: calc(100vh - 32px); overflow-y: auto; padding: 28px; position: relative; animation: glisser .35s var(--courbe); box-sizing: border-box; }
.modal-content h3 { font-family: var(--f-titre); font-weight: 400; font-size: 32px; margin: 0 0 8px; }
.modal-close { position: absolute; top: 12px; right: 14px; border: 0; background: var(--surface-2); color: var(--encre-2); width: 34px; height: 34px; border-radius: 50%; font-size: 20px; cursor: pointer; }

/* ── Mouvement réduit ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .revele { opacity: 1; transform: none; }
  .trace { stroke-dashoffset: 0; }
  .est-scan .laser { display: none; }
}

/* ── Générateur ──────────────────────────────────────────────────────── */
.generator-wrapper { padding: 32px 0 24px; max-width: 1360px; margin: 0 auto; padding-left: 20px; padding-right: 20px; box-sizing: border-box; }
@media (max-width: 640px) { .generator-wrapper { padding-left: 16px; padding-right: 16px; } }
.gen-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 24px; text-align: left !important; }
.gen-tete h1 { font-size: clamp(38px, 4.4vw, 56px); margin: 10px 0 6px; }
.gen-tete p { color: var(--encre-2); margin: 0; max-width: 60ch; }
.gen-etat { display: flex; gap: 8px; }
.gen-pastille { display: inline-flex; align-items: center; gap: 8px; font: 500 12.5px/1 var(--f-mono); color: var(--encre-3); background: var(--surface); border: 1px solid var(--trait); border-radius: 999px; padding: 8px 12px; }
.gen-pastille i { width: 7px; height: 7px; border-radius: 50%; background: var(--vert); }
.gen-pastille.est-pulse i { animation: pulse .9s 1; }
.gen-pastille--pro { color: var(--action-texte); background: var(--action); border-color: var(--action); }
.form-section { background: var(--surface) !important; border: 1px solid var(--trait) !important; border-radius: var(--r-3) !important; box-shadow: none !important; }
.form-section-header h2 { font-family: var(--f-texte) !important; font-weight: 650 !important; font-size: 18px !important; letter-spacing: -.01em; }
.section-num { background: var(--encre) !important; color: var(--papier) !important; font-family: var(--f-mono); }
.expenses-table th { background: var(--surface-2) !important; color: var(--encre-2) !important; font: 600 12px/1.2 var(--f-texte) !important; }
.expenses-table td { border-color: var(--trait) !important; }
.expenses-table tr.est-nouvelle td { animation: surligner 2.2s var(--courbe); }
@keyframes surligner { 0%, 40% { background: color-mix(in srgb, var(--surligneur) 45%, transparent); } 100% { background: transparent; } }
.expense-readonly { background: var(--surface-2) !important; color: var(--encre-2) !important; }
.expense-btn { color: var(--encre-3); background: transparent; border: 1px solid var(--trait); border-radius: 8px; }
.expense-btn--pj { color: var(--vert-texte); border-color: color-mix(in srgb, var(--vert) 40%, transparent); }
.summary-row--grand strong, .summary-row--grand span { font-family: var(--f-mono); }
.summary-row--grand { background: var(--vert-voile) !important; color: var(--encre) !important; border-radius: 10px; }

.scan-zone { margin-bottom: 18px; }
.scan-zone__cible {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; cursor: pointer;
  border: 1.5px dashed color-mix(in srgb, var(--vert) 55%, var(--trait)); border-radius: 16px; padding: 16px 18px;
  background: color-mix(in srgb, var(--vert-voile) 70%, var(--surface)); transition: background .2s, border-color .2s, transform .2s var(--courbe);
}
.scan-zone__cible:hover, .scan-zone__cible.est-survol { background: var(--vert-voile); border-color: var(--vert); }
.scan-zone__cible.est-survol { transform: scale(1.01); }
.scan-zone__ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--surface); color: var(--vert-texte); box-shadow: var(--ombre-1); }
.scan-zone__txt strong { display: block; font-size: 16px; }
.scan-zone__txt small { color: var(--encre-2); font-size: 14px; }
.scan-zone__quota { font: 500 12.5px/1.4 var(--f-mono); color: var(--encre-3); margin: 8px 2px 0; }
@media (max-width: 640px) { .scan-zone__cible { grid-template-columns: auto minmax(0, 1fr); } .scan-zone__btn { grid-column: 1 / -1; } }
.scan-file { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.scan-item { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 12px 8px 8px; border: 1px solid var(--trait); border-radius: 12px; background: var(--surface); animation: entrer .4s var(--courbe); }
.scan-item__vign { position: relative; width: 52px; height: 52px; border-radius: 8px; overflow: hidden; background: var(--surface-2); }
.scan-item__vign img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan-item .laser { left: 0; right: 0; height: 26px; }
.scan-item.est-scan .laser { opacity: 1; animation: balayer-p 1s var(--courbe) infinite alternate; }
@keyframes balayer-p { from { transform: translateY(-20px); } to { transform: translateY(48px); } }
.scan-item__txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.scan-item__txt strong { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scan-item__txt small { color: var(--encre-3); font-size: 13px; }
.scan-item__remarque { font-size: 12.5px; color: var(--ambre); }
.scan-item__txt .btn { align-self: flex-start; margin-top: 4px; }
.scan-item__montant { font-weight: 700; }
.scan-item.est-ok { border-color: color-mix(in srgb, var(--vert) 45%, var(--trait)); }
.scan-item.est-erreur { border-color: color-mix(in srgb, var(--rouge) 45%, var(--trait)); }
.scan-item.est-erreur strong { color: var(--rouge); }

.gen-debloque { display: flex; gap: 8px; align-items: center; background: var(--vert-voile); color: var(--encre); border: 1px solid color-mix(in srgb, var(--vert) 40%, transparent); padding: 12px 14px; border-radius: 12px; margin-bottom: 14px; font-weight: 600; }
.gen-debloque svg { color: var(--vert-texte); }
.gen-sorties { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.gen-sortie { text-align: left; padding: 14px; border-radius: 14px; border: 1px solid var(--trait); background: var(--surface); color: var(--encre); cursor: pointer; transition: transform .2s var(--courbe), box-shadow .2s, border-color .2s; font-family: inherit; }
.gen-sortie:hover { transform: translateY(-2px); box-shadow: var(--ombre-2); border-color: var(--trait-fort); }
.gen-sortie strong { display: block; font-size: 15.5px; }
.gen-sortie small { color: var(--encre-3); font-size: 12.5px; }
.gen-sortie--phare { background: var(--action); border-color: var(--action); color: var(--action-texte); }
.gen-sortie--phare small { color: color-mix(in srgb, var(--action-texte) 80%, transparent); }
@media (max-width: 760px) { .gen-sorties { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gen-achat { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding: 18px; border-radius: 16px; background: var(--papier); border: 1px solid var(--trait); }
.gen-achat__titre { font-family: var(--f-titre); font-size: 26px; line-height: 1.1; margin: 0 0 4px; }
.gen-achat__sous { margin: 0; color: var(--encre-2); font-size: 14.5px; }
.gen-achat__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.reassurance-list { list-style: none; padding: 0; margin: 14px 0; display: grid; gap: 6px; font-size: 14px; color: var(--encre-2); }
.reassurance-list li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; }
.reassurance-list svg { color: var(--vert-texte); margin-top: 3px; }
.export-block { border-top: 1px dashed var(--trait); margin-top: 16px; padding-top: 14px; }
.export-block-title { font: 500 12px/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--encre-3); margin: 0 0 8px; }
.export-block-help { font-size: 13.5px; color: var(--encre-3); }
.generator-preview { background: var(--surface) !important; border: 1px solid var(--trait) !important; border-radius: var(--r-3) !important; }
.preview-label { font: 500 12px/1 var(--f-mono) !important; letter-spacing: .1em; text-transform: uppercase; color: var(--encre-3) !important; }

/* La feuille reste une feuille : claire, même en mode sombre. */
.preview-document, .modal-preview-document, #pdfContent {
  color-scheme: light;
  --papier: #F6F2E8; --surface: #FFFFFF; --surface-2: #EFE9DC; --encre: #1B1F2A; --encre-2: #474C58; --encre-3: #5E636F;
  --trait: #DDD5C4; --trait-fort: #C5BBA6; --vert: #17624A; --vert-texte: #17624A; --vert-fonce: #0F4A37; --vert-voile: #E3EFE9;
  --pap-feuille: #FFFFFF; --pap-encre: #1B1F2A; --pap-encre-2: #474C58; --pap-encre-3: #5E636F; --pap-champ: #EFE9DC; --pap-trait: #C5BBA6; --pap-trait-clair: #DDD5C4;
  --accent: #17624A; --accent-fonce: #0F4A37; --accent-voile: #E3EFE9; --text: #1B1F2A; --text-light: #474C58; --text-muted: #5E636F; --border: #DDD5C4; --bg-white: #fff;
  color: #1B1F2A;
}
.preview-document { background: #FFFFFF !important; border-radius: 14px; border-color: #DDD5C4 !important; max-height: calc(100vh - 150px) !important; }
@media (min-width: 1025px) { .generator-layout { grid-template-columns: minmax(0, 1fr) 470px !important; gap: 24px !important; } .generator-preview { top: 84px !important; padding: 14px !important; } }
.expenses-table { min-width: 900px !important; }
.expenses-table .exp-nature { min-width: 118px; }
.expenses-table .exp-date { min-width: 128px; }
.expenses-table .exp-description { min-width: 170px; }

/* ── Boîte d'achat ───────────────────────────────────────────────────── */
.achat__sous { color: var(--encre-2); margin: 0 0 14px; }
.achat__apercu { max-height: 190px; overflow: hidden; border-radius: 12px; border: 1px solid var(--trait); margin-bottom: 14px; position: relative; background: #fff; }
.achat__apercu::after { content: ""; position: absolute; inset: auto 0 0 0; height: 60px; background: linear-gradient(transparent, var(--surface)); }
.achat__apercu .modal-preview-document { transform: scale(.62); transform-origin: top left; width: 161%; pointer-events: none; }
.achat__plans { border: 0; padding: 0; margin: 0 0 14px; display: grid; gap: 8px; }
.plan { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--trait); border-radius: 14px; cursor: pointer; transition: border-color .2s, background .2s; }
.plan:has(input:checked) { border-color: var(--vert); background: var(--vert-voile); box-shadow: 0 0 0 1px var(--vert) inset; }
.plan input { margin: 0; }
.plan__txt strong { display: block; font-size: 15px; }
.plan__txt small { color: var(--encre-3); font-size: 13px; }
.plan__prix { font-weight: 700; font-size: 17px; white-space: nowrap; }
.plan__prix small { font-weight: 500; font-size: 12px; color: var(--encre-3); }
.achat__promo summary { cursor: pointer; color: var(--encre-2); font-size: 14px; margin-bottom: 10px; }
.achat__erreur { background: var(--rouge-voile); color: var(--rouge); padding: 10px 12px; border-radius: 10px; font-size: 14px; }
.achat__legal { font-size: 12.5px; color: var(--encre-3); margin: 12px 0 0; }

/* ── Pages produit ───────────────────────────────────────────────────── */
.j-page { padding: 40px 0 0; }
.j-fil { font: 500 12.5px/1.4 var(--f-mono); color: var(--encre-3); display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0 0 8px; }
.j-fil a { color: var(--encre-3); }
.j-fil li + li::before { content: "/"; margin-right: 6px; }
.j-deux { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
@media (max-width: 900px) { .j-deux { grid-template-columns: minmax(0, 1fr); } }
.j-liste-verte { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 10px; }
.j-liste-verte li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; color: var(--encre-2); }
.j-liste-verte svg { color: var(--vert-texte); margin-top: 4px; }
.j-tableau { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--trait); border-radius: 14px; overflow: hidden; font-size: 15px; }
.j-tableau th, .j-tableau td { padding: 11px 14px; border-top: 1px solid var(--trait); text-align: left; vertical-align: top; }
.j-tableau thead th { background: var(--surface-2); font-size: 13px; color: var(--encre-2); border-top: 0; }
.j-tableau-wrap { overflow-x: auto; margin: 18px 0; border-radius: 14px; }
.j-note { font-size: 14px; color: var(--encre-3); }

/* Dashboard */
.esp-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 24px 0; }
.esp-carte { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r-2); padding: 20px; }
.esp-carte h2, .esp-carte h3 { font-family: var(--f-texte); font-weight: 650; font-size: 16px; margin: 0 0 8px; }
.esp-grand { font-family: var(--f-titre); font-size: 40px; line-height: 1; margin: 6px 0; }
.esp-carte p { color: var(--encre-2); margin: 4px 0; font-size: 14.5px; }
.esp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
@media (max-width: 860px) { .esp-grille { grid-template-columns: minmax(0, 1fr); } }
.esp-section { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r-2); padding: 22px; margin-top: 16px; }
.esp-section h2 { font-family: var(--f-texte); font-size: 18px; font-weight: 650; margin: 0 0 12px; }
.esp-table-wrap { overflow-x: auto; }
.badge { display: inline-block; font: 600 11.5px/1 var(--f-mono); padding: 5px 8px; border-radius: 999px; background: var(--vert-voile); color: var(--vert-texte); text-transform: uppercase; letter-spacing: .06em; }
.badge--gris { background: var(--surface-2); color: var(--encre-3); }
.badge--ambre { background: var(--ambre-voile); color: var(--ambre); }

/* Auth, succès */
.auth-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 32px 16px; box-sizing: border-box; }
.auth-page .auth-card { width: 100%; max-width: 440px; box-sizing: border-box; padding: 32px; }
.auth-mdp { margin-top: 18px; border-top: 1px solid var(--trait); padding-top: 14px; }
.auth-mdp summary { cursor: pointer; color: var(--encre-2); font-size: 14.5px; }
.succes h1 { font-size: clamp(34px, 4.4vw, 52px); margin: 14px 0 10px; }
.succes p { color: var(--encre-2); max-width: 52ch; margin: 0 auto; }
.succes__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.succes__sceau { animation: tamponner .6s var(--courbe); }
.succes__sceau .trace { animation: dessiner .9s .35s var(--courbe) forwards; }
@keyframes tamponner { 0% { transform: scale(1.6) rotate(-12deg); opacity: 0; } 60% { transform: scale(.94) rotate(2deg); opacity: 1; } 100% { transform: none; } }

/* Lignes de dépenses en cartes sur téléphone : plus de défilement horizontal. */
@media (max-width: 640px) {
  .expenses-table-wrapper { overflow: visible !important; margin: 0 !important; padding: 0 !important; }
  .expenses-table { min-width: 0 !important; }
  .expenses-table thead { display: none; }
  .expenses-table tbody tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 12px; margin-bottom: 10px; border: 1px solid var(--trait); border-radius: 14px; background: var(--papier); }
  .expenses-table tbody td { padding: 0 !important; border: 0 !important; min-width: 0; position: relative; }
  .expenses-table tbody td::before { display: block; font: 500 10.5px/1.2 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--encre-3); margin-bottom: 4px; }
  .expenses-table input, .expenses-table select { min-width: 0 !important; font-size: 16px !important; padding: 9px 10px !important; }
  #expensesTable td:nth-child(1) { grid-column: span 2; } #expensesTable td:nth-child(1)::before { content: "Date"; }
  #expensesTable td:nth-child(2) { grid-column: span 2; } #expensesTable td:nth-child(2)::before { content: "Nature"; }
  #expensesTable td:nth-child(3) { grid-column: 1 / -1; } #expensesTable td:nth-child(3)::before { content: "Motif"; }
  #expensesTable td:nth-child(4) { grid-column: 1 / -1; } #expensesTable td:nth-child(4)::before { content: "Lieu"; }
  #expensesTable td:nth-child(5) { grid-column: span 2; } #expensesTable td:nth-child(5)::before { content: "HT €"; }
  #expensesTable td:nth-child(6) { grid-column: span 2; } #expensesTable td:nth-child(6)::before { content: "TVA %"; }
  #expensesTable td:nth-child(7) { grid-column: span 2; } #expensesTable td:nth-child(7)::before { content: "TVA €"; }
  #expensesTable td:nth-child(8) { grid-column: span 2; } #expensesTable td:nth-child(8)::before { content: "TTC €"; }
  #expensesTable td:nth-child(9) { grid-column: 1 / -1; }
  #kmTable td:nth-child(1) { grid-column: span 2; } #kmTable td:nth-child(1)::before { content: "Date"; }
  #kmTable td:nth-child(4) { grid-column: span 2; } #kmTable td:nth-child(4)::before { content: "Km"; }
  #kmTable td:nth-child(2) { grid-column: 1 / -1; order: 1; } #kmTable td:nth-child(2)::before { content: "Trajet"; }
  #kmTable td:nth-child(3) { grid-column: 1 / -1; order: 2; } #kmTable td:nth-child(3)::before { content: "Motif"; }
  #kmTable td:nth-child(5) { grid-column: span 2; order: 3; } #kmTable td:nth-child(5)::before { content: "Indemnité"; }
  #kmTable td:nth-child(6) { grid-column: span 2; order: 4; align-self: end; }
  .expense-actions-cell { justify-content: flex-end; display: flex; gap: 6px; }
  .form-section-header { flex-wrap: wrap; gap: 10px; }
}
.preview-document .text-right, .modal-preview-document .text-right { white-space: nowrap; }
input[type="radio"] { accent-color: var(--vert); width: 18px; height: 18px; }
.modal-content p.achat__legal { font-size: 12px; line-height: 1.45; }

@media (max-width: 640px) {
  .j-logo__mot { font-size: 21px; }
}