/* ============================================================
   123Pozicky.eu — theme.css
   Socle du design system (référence : DESIGN_SYSTEM.md)
   Chargé sur TOUTES les pages (public, app, admin).
   ============================================================ */

:root{
  /* Marque */
  --pine:#0B4F3C;
  --pine-deep:#073328;
  --green-mid:#2F8F5B;
  --green-soft:#E4EFE6;
  --mint-glow:#7CE3A6;      /* uniquement sur fond foncé */

  /* Valeur */
  --gold:#C9A24B;
  --gold-soft:#F3E9D2;

  /* Neutres */
  --bg:#F6F8F4;
  --bg-panel:#FFFFFF;
  --ink:#12241C;
  --ink-soft:#4B5D53;
  --ink-faint:#8A988E;
  --line:#DCE5DD;
  --line-strong:#C3D0C6;

  /* Statuts */
  --status-pending-text:#B8862F;  --status-pending-bg:#F6EAD3;
  --status-approved-text:#1F7A4D; --status-approved-bg:#DFF1E5;
  --status-rejected-text:#B23B3B; --status-rejected-bg:#F8E2E2;
  --status-late-text:#C1421A;     --status-late-bg:#FBE6DC;

  /* Forme */
  --radius-sm:8px;
  --radius:14px;
  --radius-lg:24px;
  --radius-pill:999px;
  --shadow-card:0 1px 2px rgba(11,79,60,.04), 0 8px 24px rgba(11,79,60,.06);
  --shadow-float:0 30px 60px -20px rgba(7,51,40,.45);

  /* ── Surfaces ──
     --pine-deep sert à la fois de FOND de surface foncée et de COULEUR DE
     TITRE. Les deux usages sont incompatibles en sombre, où il doit s'inverser
     pour que les titres restent lisibles : toute surface qui l'employait comme
     fond virait alors au blanc, avec son texte blanc dessus.
     Ces variables-ci ne servent QU'au fond et ne s'inversent jamais. Les régler
     ici plutôt que dans une règle [data-theme="dark"] couvre aussi le visiteur
     qui suit son système sans avoir touché l'interrupteur. */
  --surface-deep:#073328;
  --surface-deep-2:#0a4234;
  --surface-chip:#FFFFFF;

  /* Voile posé sur la photo, en haut des pages produit */
  --veil-strong:rgba(250,246,236,.97);
  --veil-mid:rgba(250,246,236,.93);
  --veil-warm:rgba(243,233,210,.72);
  --veil-edge:rgba(233,214,168,.45);

  /* Bande d'appel et simulateur */
  --cta-bg:#E4EFE6;
  --cta-line:transparent;
  --sim-bg:#FFFFFF;
  --sim-line:#DCE5DD;
  --sim-right-bg:#073328;

  /* Typo */
  --font-display:'Fraunces', serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;

  color-scheme:light;
}

/* ============================================================
   THÈME SOMBRE

   Un noir VERDÂTRE, jamais un gris industriel : l'identité de la marque est le
   vert pin, et le fond doit en garder la trace. Le doré et le vert y ressortent
   au lieu de s'éteindre.

   Deux règles de conversion, appliquées partout :
     - --pine sert à la fois de fond de bouton et de couleur de texte. Sur fond
       sombre, le pin d'origine devient illisible : il s'éclaircit.
     - --pine-deep porte les titres. Il s'INVERSE et devient presque blanc,
       sinon les titres disparaissent dans le fond.

   --mint-glow trouve enfin son emploi : la charte le réserve aux fonds foncés.

   Les ombres portées ne se voient pas sur du sombre : elles s'effacent au
   profit de bordures plus marquées, seul moyen de détacher une carte.

   ⚠️ Deux blocs identiques, et c'est voulu : [data-theme="dark"] pour un choix
   explicite, et prefers-color-scheme pour qui n'a jamais rien choisi. Le second
   est neutralisé par :not([data-theme="light"]), sinon un visiteur ayant demandé
   le clair sur un appareil en sombre se verrait imposer le sombre malgré lui.
   ============================================================ */

:root[data-theme="dark"],
:root:not([data-theme="light"]) .theme-dark-vars{ color-scheme:dark; }

:root[data-theme="dark"]{
  --pine:#2F8F5B;
  --pine-deep:#EAF3EC;
  --green-mid:#46B87F;
  --green-soft:#16291F;
  --mint-glow:#7CE3A6;

  --gold:#D9B564;
  --gold-soft:#2A2317;

  /* Les cartes se DÉTACHENT du fond : un écart trop faible les faisait
     disparaître dans la page. Le fond descend, le panneau monte. */
  --bg:#071310;
  --bg-panel:#16251F;
  --ink:#E8F0EA;
  --ink-soft:#A9BCB1;
  --ink-faint:#7A8D82;
  --line:#263B32;
  --line-strong:#354F43;

  --status-pending-text:#E0B865;  --status-pending-bg:#2B2416;
  --status-approved-text:#5FCB92; --status-approved-bg:#13291D;
  --status-rejected-text:#F08A86; --status-rejected-bg:#2E1A19;
  --status-late-text:#F0A07F;     --status-late-bg:#2E1E16;

  --shadow-card:0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.28);
  --shadow-float:0 30px 60px -20px rgba(0,0,0,.75);

  /* Surfaces foncées : elles restent foncées, au lieu de suivre --pine-deep
     qui s'inverse pour les titres. */
  --surface-deep:#0A1C16;
  --surface-deep-2:#10291F;
  --surface-chip:#16251F;

  --veil-strong:rgba(6,16,13,.95);
  --veil-mid:rgba(7,19,16,.90);
  --veil-warm:rgba(10,26,21,.82);
  --veil-edge:rgba(14,35,27,.58);

  /* La bande d'appel se détache du fond au lieu de s'y fondre. */
  --cta-bg:linear-gradient(160deg, #10291F 0%, #16352A 100%);
  --cta-line:#2E4A3C;
  /* Le simulateur se RÉVÈLE : fond relevé au-dessus du panneau courant et
     filet doré, sinon il disparaissait dans la page. */
  --sim-bg:#1A2D26;
  --sim-line:rgba(201,162,75,.34);
  --sim-right-bg:#0B2B20;

  color-scheme:dark;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --pine:#2F8F5B;
    --pine-deep:#EAF3EC;
    --green-mid:#46B87F;
    --green-soft:#16291F;
    --mint-glow:#7CE3A6;

    --gold:#D9B564;
    --gold-soft:#2A2317;

    --bg:#071310;
    --bg-panel:#16251F;
    --ink:#E8F0EA;
    --ink-soft:#A9BCB1;
    --ink-faint:#7A8D82;
    --line:#263B32;
    --line-strong:#354F43;

    --status-pending-text:#E0B865;  --status-pending-bg:#2B2416;
    --status-approved-text:#5FCB92; --status-approved-bg:#13291D;
    --status-rejected-text:#F08A86; --status-rejected-bg:#2E1A19;
    --status-late-text:#F0A07F;     --status-late-bg:#2E1E16;

    --shadow-card:0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.28);
    --shadow-float:0 30px 60px -20px rgba(0,0,0,.75);

    --surface-deep:#0A1C16;
    --surface-deep-2:#10291F;
    --surface-chip:#16251F;

    --veil-strong:rgba(6,16,13,.95);
    --veil-mid:rgba(7,19,16,.90);
    --veil-warm:rgba(10,26,21,.82);
    --veil-edge:rgba(14,35,27,.58);

    --cta-bg:linear-gradient(160deg, #10291F 0%, #16352A 100%);
    --cta-line:#2E4A3C;
    --sim-bg:#1A2D26;
    --sim-line:rgba(201,162,75,.34);
    --sim-right-bg:#0B2B20;

    color-scheme:dark;
  }
}

/* ============================================================
   THÈME SOMBRE — CORRECTIONS DE SURFACES

   Les variables ne suffisent pas : certaines règles écrivent leurs couleurs en
   dur, et d'autres emploient --pine-deep comme FOND alors qu'il devient presque
   blanc en sombre. Ce bloc rattrape les cinq familles concernées.

   Il vit dans theme.css — la seule feuille chargée par les cinq espaces — pour
   ne pas avoir à répéter la même correction dans public.css, app.css et
   bank.css.
   ============================================================ */

/* ── 1. Boutons ──
   .btn-primary dégradait vers --pine-deep, devenu PRESQUE BLANC en sombre : le
   bouton finissait blanc avec du texte blanc dessus. Il garde donc un vert franc
   et lisible. .btn-ghost/.btn-sec écrivaient en --pine-deep : même inversion. */
:root[data-theme="dark"] .btn-primary{
  background:linear-gradient(180deg, var(--green-mid) 0%, var(--pine) 100%);
  color:#06140F;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 8px 20px -10px rgba(0,0,0,.8);
}
:root[data-theme="dark"] .btn-primary:hover{
  color:#06140F;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 14px 28px -12px rgba(0,0,0,.9);
}
:root[data-theme="dark"] .btn-ghost,
:root[data-theme="dark"] .btn-sec{
  background:var(--bg-panel); color:var(--ink); border-color:var(--line-strong);
}
:root[data-theme="dark"] .btn-ghost:hover,
:root[data-theme="dark"] .btn-sec:hover{
  background:var(--green-soft); color:var(--mint-glow); border-color:var(--green-mid);
}
/* Sur fond déjà sombre, un bouton blanc éclate : le doré prend le relais. */
:root[data-theme="dark"] .btn-on-dark{
  background:var(--gold); color:#101A14;
}
:root[data-theme="dark"] .btn-on-dark:hover{ background:#E6C578; }

/* ── 2. Surfaces foncées figées ──
   Sidebars, écran d'ouverture, carte de prêt, section partenaires : toutes
   dégradent vers #052720 ou #0a4234 écrits en dur. En sombre elles deviennent
   plus claires que la page, ce qui inverse la hiérarchie visuelle. */
/* La barre latérale a SA propre teinte : plus sombre que les cartes, plus
   claire que le fond. Sans cet écart, elle se confondait avec la page et la
   navigation semblait flotter dans le vide. */
:root[data-theme="dark"] .sidebar,
:root[data-theme="dark"] .pay-sidebar{
  background:linear-gradient(185deg, #0E1D18 0%, #0A1714 100%);
  border-right:1px solid var(--line-strong);
}
:root[data-theme="dark"] .pay-splash{
  background:radial-gradient(700px 320px at 50% 20%, rgba(47,143,91,.16), transparent 60%),
             linear-gradient(165deg, #0A1512 0%, #050D0A 100%);
}
:root[data-theme="dark"] .pay-loan-head{
  background:radial-gradient(520px 200px at 90% -30%, rgba(201,162,75,.22), transparent 60%),
             linear-gradient(150deg, #0D2019 0%, #123024 70%, #16412F 160%);
}
:root[data-theme="dark"] .partners-section{
  background-color:#08120F;
  background-image:
    radial-gradient(1100px 420px at 12% -10%, rgba(47,143,91,.20), transparent 60%),
    radial-gradient(1000px 420px at 92% 115%, rgba(201,162,75,.12), transparent 62%),
    linear-gradient(135deg, #08120F 0%, #0C1C17 55%, #10281F 130%);
}
:root[data-theme="dark"] .panel-dark{
  background:linear-gradient(155deg, #0C1C17 0%, #0A1512 100%);
  border:1px solid var(--line);
}
/* .bank-grid n'est qu'une GRILLE à l'intérieur de .bank-section : lui donner un
   fond ne corrigeait rien, puisque c'est la section qui porte la surface. La
   section virait donc au crème avec ses titres blancs dessus. Elle passe
   maintenant par --surface-deep (voir la note sur les surfaces) et reçoit sa
   propre teinte, distincte du simulateur et des panneaux génériques. */
:root[data-theme="dark"] .bank-section{
  background:
    radial-gradient(760px 320px at 88% -20%, rgba(124,227,166,.13), transparent 62%),
    linear-gradient(155deg, #0A2018 0%, #0D2A20 58%, #113526 140%);
  border:1px solid var(--line-strong);
}
/* Le simulateur se distingue par un halo doré, pas par un gris de plus. */
:root[data-theme="dark"] .sim-right{
  background:
    radial-gradient(520px 260px at 88% -25%, rgba(201,162,75,.20), transparent 62%),
    linear-gradient(165deg, #0B2B20 0%, #0E3627 55%, #124430 130%);
}
:root[data-theme="dark"] .sim-card{
  box-shadow:0 22px 48px -26px rgba(0,0,0,.9);
}
/* Les pastilles des partenaires : fond blanc en dur ET texte en --pine-deep,
   devenu blanc — le nom de la banque disparaissait sur sa propre pastille. */
:root[data-theme="dark"] .partner-chip{
  border:1px solid var(--line-strong);
  box-shadow:0 12px 28px rgba(0,0,0,.45);
}
/* Surcharge RETIRÉE : la pastille portait ici un vert translucide sur fond
   clair — le chip reste blanc dans les deux thèmes (seule sa bordure change
   ci-dessus), donc une pastille pâle y était illisible de nuit comme de jour.
   Elle suit désormais la règle unique de public.css : fond soutenu, texte
   blanc, comme toutes les pastilles du projet. */
/* Le logo d'une banque est pensé pour un fond clair : sur pastille sombre, on
   lui rend un fond clair à lui seul. */
:root[data-theme="dark"] .partner-logo{
  background:#F4F7F3; border-radius:6px; padding:3px 6px;
}

/* ── 3. Site public ──
   L'en-tête portait rgba(246,248,244,.88) en dur : il restait blanc laiteux
   au-dessus d'une page sombre. */
:root[data-theme="dark"] .site-header{
  background:rgba(10,21,18,.86);
}
:root[data-theme="dark"] .cat-card{
  background:#0E1D18;
}
/* Site public : les éléments qui restaient clairs faute de passer par une
   variable — pastille d'accroche, carte du simulateur, pastilles d'étapes,
   flèches des témoignages. */
:root[data-theme="dark"] .eyebrow-pill{
  background:var(--green-soft); color:var(--mint-glow);
}
:root[data-theme="dark"] .eyebrow-pill .dot{ background:var(--mint-glow); }
:root[data-theme="dark"] .sim-card,
:root[data-theme="dark"] .step-num,
:root[data-theme="dark"] .testi-arrow{
  background:var(--bg-panel); border-color:var(--line-strong);
}
:root[data-theme="dark"] .step-num{ color:var(--mint-glow); border-color:var(--green-mid); }
:root[data-theme="dark"] .testi-arrow{ color:var(--ink); }
/* Le voile des cartes à photo s'épaissit : sur fond sombre, une image vive
   ressort trop et le titre blanc s'y perd. */
:root[data-theme="dark"] .cat-photo{
  filter:blur(1.5px) saturate(.72) brightness(.62);
}

/* Grandes cartes d'en-tête : tableau de bord client et solde PoziPay.
   Toutes deux dégradent vers --pine-deep, devenu presque blanc en sombre : la
   carte virait au clair avec son texte blanc dessus. Ce sont les deux surfaces
   les plus visibles de la plateforme. */
:root[data-theme="dark"] .dash-hero{
  background:
    radial-gradient(620px 260px at 92% -25%, rgba(201,162,75,.24), transparent 62%),
    linear-gradient(155deg, #0C1C17 0%, #113024 62%, #16412F 130%);
  box-shadow:0 28px 56px -28px rgba(0,0,0,.85);
}
:root[data-theme="dark"] .pay-balance{
  background:
    radial-gradient(560px 240px at 92% -20%, rgba(201,162,75,.22), transparent 60%),
    linear-gradient(155deg, #0C1C17 0%, #113024 60%, #16412F 170%);
}
:root[data-theme="dark"] .pay-balance-sav{
  background:
    radial-gradient(560px 240px at 92% -20%, rgba(124,227,166,.18), transparent 60%),
    linear-gradient(155deg, #0A1F18 0%, #10352A 60%, #174432 170%);
}

/* ── 4. Le solde et les chiffres clés passent au DORÉ ──
   Sur fond sombre le vert perd son éclat ; le doré, lui, porte la valeur. */
:root[data-theme="dark"] .pay-bc-amount{ color:var(--gold); }
:root[data-theme="dark"] .pay-stat-value{ color:var(--gold); }
:root[data-theme="dark"] .pay-bc-btn.primary{
  background:var(--gold); color:#101A14;
}
:root[data-theme="dark"] .pay-bc-btn.primary:hover{ background:#E6C578; }

/* Cartes bancaires : même inversion via --pine-deep. Le doré de la puce et le
   halo restent, ils portent l'objet. */
:root[data-theme="dark"] .pay-cc{
  background:linear-gradient(150deg, #0C1C17 0%, #143526 60%, #1B4934 150%);
  box-shadow:0 22px 44px -22px rgba(0,0,0,.9);
}

/* ── Chat en sombre ──
   Tout noircir rendait les deux interlocuteurs indiscernables. Le message du
   CLIENT passe au doré, celui de l'ÉQUIPE au blanc cassé : on sait qui parle
   d'un coup d'œil, sans lire le nom. Le texte est sombre sur les deux, seul
   moyen d'atteindre un contraste confortable sur des fonds aussi clairs. */
:root[data-theme="dark"] .chat-msg.them .chat-bubble{
  background:linear-gradient(180deg, #D9B564 0%, #C9A24B 100%);
  border-color:#C9A24B; color:#241B06;
}
:root[data-theme="dark"] .chat-msg.me .chat-bubble{
  background:linear-gradient(180deg, #F2F6F2 0%, #E2EAE4 100%);
  color:#10201A;
}
:root[data-theme="dark"] .chat-msg.bot .chat-bubble{
  background:#1D3329; border-color:#2C4A3B; color:var(--ink);
}
/* Sur des bulles claires, les repères doivent redevenir sombres. */
:root[data-theme="dark"] .chat-msg.me .chat-msg-tr{ border-top-color:rgba(0,0,0,.18); }
:root[data-theme="dark"] .chat-msg.me .chat-quote,
:root[data-theme="dark"] .chat-msg.them .chat-quote{ background:rgba(0,0,0,.08); }
:root[data-theme="dark"] .chat-ticks.read{ color:#1668B8; }
:root[data-theme="dark"] .chat-msg.me .chat-ticks.failed{ color:#B23B3B; }

/* ── 5. Cartes et champs ──
   Une carte blanche sur fond noir agresse : elle prend le ton du panneau, et
   sa bordure la détache puisque l'ombre ne se voit plus. */
:root[data-theme="dark"] .card{ border-color:var(--line); }
:root[data-theme="dark"] input[type=text],
:root[data-theme="dark"] input[type=email],
:root[data-theme="dark"] input[type=password],
:root[data-theme="dark"] input[type=number],
:root[data-theme="dark"] input[type=tel],
:root[data-theme="dark"] input[type=date],
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea{
  background:var(--bg); color:var(--ink); border-color:var(--line-strong);
}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder{ color:var(--ink-faint); }
/* La flèche des listes déroulantes est un SVG encodé en sombre : illisible ici.
   ⚠️ background-repeat / position / size sont REDÉCLARÉS ici, et c'est
   indispensable : la règle de base pose « background:<couleur> », un raccourci
   qui remet background-repeat à sa valeur initiale (repeat). Le chevron ajouté
   ensuite se répétait donc en mosaïque sur toute la hauteur du champ — d'autant
   plus visible que le champ est haut. */
:root[data-theme="dark"] select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A9BCB1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:16px 16px;
}

/* ── Bascule de thème ──
   Les deux libellés sont rendus ensemble ; la feuille n'en montre qu'un. Le
   bouton affiche donc la bonne mention dès le premier octet, sans attendre le
   script — pas de texte qui change sous les yeux au chargement. */
/* ── Interrupteur clair / sombre ──
   La pastille glisse de gauche à droite ; les deux icônes restent visibles de
   part et d'autre. On lit l'état et la destination d'un regard. */
.theme-switch{
  display:inline-flex; align-items:center; gap:9px;
  padding:0; border:0; background:none; cursor:pointer;
  font-family:var(--font-body); font-size:12.5px; font-weight:600;
  color:var(--ink-soft); line-height:1;
}
.theme-switch-track{
  position:relative; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:space-between;
  width:52px; height:28px; padding:0 6px;
  border-radius:var(--radius-pill);
  border:1px solid var(--line-strong); background:var(--bg);
  transition:background .18s ease, border-color .18s ease;
}
.theme-switch-ico{ display:inline-flex; z-index:1; transition:color .18s ease, opacity .18s ease; }
.theme-switch-ico svg{ width:13px; height:13px; display:block; }
.theme-switch-ico.sun{ color:var(--gold); }
.theme-switch-ico.moon{ color:var(--ink-faint); opacity:.55; }
.theme-switch-knob{
  position:absolute; top:2px; left:2px;
  width:22px; height:22px; border-radius:50%;
  background:var(--bg-panel); border:1px solid var(--line-strong);
  box-shadow:0 2px 6px rgba(7,51,40,.28);
  transition:transform .22s cubic-bezier(.2,.7,.2,1), background .18s ease;
}
.theme-switch:hover .theme-switch-track{ border-color:var(--green-mid); }
.theme-switch-label{ white-space:nowrap; }
.theme-on-dark{ display:none; }

/* Sombre : la pastille glisse à droite, la lune s'allume, le soleil s'efface. */
:root[data-theme="dark"] .theme-switch-knob{ transform:translateX(24px); background:var(--gold); border-color:var(--gold); }
:root[data-theme="dark"] .theme-switch-track{ background:#0D1A15; border-color:var(--line-strong); }
:root[data-theme="dark"] .theme-switch-ico.sun{ color:var(--ink-faint); opacity:.5; }
:root[data-theme="dark"] .theme-switch-ico.moon{ color:var(--mint-glow); opacity:1; }
:root[data-theme="dark"] .theme-on-light{ display:none; }
:root[data-theme="dark"] .theme-on-dark{ display:inline; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-switch-knob{ transform:translateX(24px); background:var(--gold); border-color:var(--gold); }
  :root:not([data-theme="light"]) .theme-switch-track{ background:#0D1A15; }
  :root:not([data-theme="light"]) .theme-switch-ico.sun{ color:var(--ink-faint); opacity:.5; }
  :root:not([data-theme="light"]) .theme-switch-ico.moon{ color:var(--mint-glow); opacity:1; }
  :root:not([data-theme="light"]) .theme-on-light{ display:none; }
  :root:not([data-theme="light"]) .theme-on-dark{ display:inline; }
}

/* Dans une barre du haut : l'interrupteur seul, sans libellé — la place y est
   comptée et les icônes se suffisent. */
.theme-bar .theme-switch-label{ display:none; }

/* Dans un pied ou une barre latérale sombre : texte clair. */
.foot-theme, .sidebar-theme{ color:rgba(255,255,255,.7); }
.foot-theme .theme-switch-track,
.sidebar-theme .theme-switch-track{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); }
.foot-theme .theme-switch-knob,
.sidebar-theme .theme-switch-knob{ background:rgba(255,255,255,.9); border-color:rgba(255,255,255,.4); }
.foot-theme:hover, .sidebar-theme:hover{ color:#fff; }
/* CENTRÉ au bas de la barre latérale, et détaché du lien qui le précède :
   collé contre lui et aligné à gauche, l'interrupteur se lisait comme une
   entrée de navigation de plus au lieu d'un réglage. */
.sidebar-theme{ width:100%; justify-content:center; margin-top:14px; padding:7px 12px; font-size:13px; font-weight:500; }

/* Par défaut (clair) : on propose de passer au sombre. */
.theme-on-dark{ display:none; }
:root[data-theme="dark"] .theme-on-light{ display:none; }
:root[data-theme="dark"] .theme-on-dark{ display:inline-flex; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-on-light{ display:none; }
  :root:not([data-theme="light"]) .theme-on-dark{ display:inline-flex; }
}

/* ============================================================
   NOTIFICATION GLISSANTE

   Elle vit dans theme.css — la seule feuille chargée par les cinq espaces —
   parce que le site, l'espace client, PoziPay et l'administration l'affichent
   tous. Dans une feuille d'espace, il en faudrait quatre copies.

   z-index 340 : au-dessus de tout ce que le projet déclare (le maximum
   existant est 320, la confirmation de la messagerie). Une alerte que l'on ne
   voit pas ne sert à rien.
   ============================================================ */
.pzk-toasts{
  position:fixed; right:18px; bottom:18px; z-index:340;
  display:flex; flex-direction:column; gap:10px;
  width:min(360px, calc(100vw - 36px));
  pointer-events:none;                 /* la pile laisse passer les clics… */
}
.pzk-toast{
  pointer-events:auto;                 /* …mais chaque notification les reçoit */
  display:flex; align-items:flex-start; gap:11px;
  padding:13px 14px; border-radius:var(--radius);
  background:var(--bg-panel); border:1px solid var(--line);
  box-shadow:0 20px 44px -20px rgba(7,51,40,.55), 0 2px 8px rgba(7,51,40,.08);
  color:var(--ink); text-decoration:none;
  animation:pzkToastIn .28s cubic-bezier(.2,.8,.2,1);
}
:root[data-theme="dark"] .pzk-toast{
  box-shadow:0 20px 44px -20px rgba(0,0,0,.8), 0 2px 10px rgba(0,0,0,.4);
  border-color:var(--line-strong);
}
/* Elle entre par la droite et repart du même côté : le mouvement dit d'où elle
   vient, et le regard n'a pas à la chercher. */
@keyframes pzkToastIn{ from{ opacity:0; transform:translateX(26px); } to{ opacity:1; transform:none; } }
.pzk-toast.is-out{
  opacity:0; transform:translateX(26px);
  transition:opacity .24s ease, transform .24s ease;
}
.pzk-toast-ava{
  flex:0 0 auto; width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--pine); color:#fff; font-size:12.5px; font-weight:700;
}
.pzk-toast-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.pzk-toast-main b{
  display:flex; align-items:center; gap:5px;
  font-size:13.5px; color:var(--pine-deep);
}
/* Origine de la notification (prospect, campagne, action). Poussé à droite du
   nom : l'œil lit le nom, puis apprend d'où cela vient, sans que l'étiquette
   n'entre en concurrence avec le message lui-même. */
.pzk-toast-tag{
  margin-left:auto; flex:0 0 auto;
  font-style:normal; font-size:9px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; white-space:nowrap;
  padding:2px 7px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:var(--bg); color:var(--ink-faint);
}
.pzk-toast-tag.is-prospect{ border-color:var(--green-mid); background:var(--green-soft); color:var(--pine); }
.pzk-toast-tag.is-campagne{ border-color:var(--status-pending-text); color:var(--status-pending-text); }
.pzk-toast-tag.is-action{ border-color:var(--status-rejected-text); color:var(--status-rejected-text); }

.pzk-toast-main em{
  font-style:normal; font-size:12.5px; line-height:1.45; color:var(--ink-soft);
  /* Deux lignes au plus : une notification annonce, elle ne raconte pas. */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.pzk-toast-x{
  flex:0 0 auto; width:22px; height:22px; padding:0; cursor:pointer;
  border:none; background:none; border-radius:50%;
  font-size:16px; line-height:1; color:var(--ink-faint);
}
.pzk-toast-x:hover{ background:var(--bg); color:var(--ink); }

/* Sur téléphone elle occupe la largeur utile, au-dessus de la barre du bas. */
@media (max-width:640px){
  .pzk-toasts{ right:12px; left:12px; bottom:calc(76px + env(safe-area-inset-bottom)); width:auto; }
}
@media (prefers-reduced-motion:reduce){
  .pzk-toast{ animation:none; }
  .pzk-toast.is-out{ transition:none; }
}

/* ------------------------------------------------------------ base */

*,*::before,*::after{ box-sizing:border-box; }

/* L'attribut hidden doit gagner contre nos propres display. La règle du
   navigateur ne pèse qu'un sélecteur d'attribut : une classe qui pose
   display:grid ou display:flex la battait, et l'élément « caché » restait à
   l'écran (les champs société de l'inscription en ont fait les frais).
   Un élément qui veut rester visible retire l'attribut, pas l'inverse. */
[hidden]{ display:none !important; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{ margin:0 0 .5em; }
h1,h2{ font-family:var(--font-display); font-weight:600; line-height:1.15; }
h1{ font-size:40px; line-height:1.1; }
h2{ font-size:clamp(26px,3.2vw,38px); }
h3{ font-family:var(--font-body); font-weight:600; font-size:19px; line-height:1.3; }

p{ margin:0 0 1em; }
a{ color:var(--pine); text-decoration:none; }
a:hover{ color:var(--pine-deep); }
:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; border-radius:4px; }

.text-soft{ color:var(--ink-soft); font-size:14.5px; }
.eyebrow{
  font-size:13px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--green-mid);
}

/* Données chiffrées : montants, taux, dates, références */
.num{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
}

.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
}
@media (min-width:1200px){ .container{ padding:0 32px; } }

/* ------------------------------------------------------------ boutons */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:0 20px; min-height:46px;
  border-radius:var(--radius-pill);
  border:1px solid transparent;
  font-family:var(--font-body); font-weight:600; font-size:14.5px; line-height:1;
  letter-spacing:.005em; white-space:nowrap;
  text-decoration:none; cursor:pointer; user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition:transform .16s cubic-bezier(.2,.7,.2,1), box-shadow .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
}
.btn svg{ width:18px; height:18px; flex-shrink:0; }
.btn:active{ transform:translateY(0) scale(.98); }
.btn:disabled, .btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none !important; box-shadow:none !important; }

.btn-primary{
  background:linear-gradient(180deg, #0E5D45 0%, var(--pine) 55%, var(--surface-deep) 100%);
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 8px 18px -8px rgba(11,79,60,.55);
}
.btn-primary:hover{ color:#fff; transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 14px 26px -10px rgba(11,79,60,.6); }

.btn-ghost, .btn-sec{
  background:var(--bg-panel); color:var(--pine-deep); border-color:var(--line);
  box-shadow:0 1px 2px rgba(11,79,60,.05);
}
.btn-ghost:hover, .btn-sec:hover{ background:var(--bg); border-color:var(--line-strong); color:var(--pine-deep); transform:translateY(-1px); box-shadow:0 8px 16px -10px rgba(11,79,60,.3); }

/* Bouton or (accent premium, CTA valeur) */
.btn-gold{ background:linear-gradient(180deg, #D6B45E 0%, var(--gold) 100%); color:var(--surface-deep); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 8px 18px -8px rgba(201,162,75,.6); }
.btn-gold:hover{ transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 14px 26px -10px rgba(201,162,75,.65); }

/* Sur fond foncé (section banking) : jamais --pine sur --pine-deep */
.btn-on-dark{ background:#fff; color:var(--surface-deep); box-shadow:0 10px 24px -12px rgba(0,0,0,.5); }
.btn-on-dark:hover{ background:var(--gold-soft); transform:translateY(-1px); }

/* Action destructrice : discret au repos, plein doux au survol */
.btn-danger{ background:var(--bg-panel); color:var(--status-rejected-text); border-color:var(--status-rejected-bg); box-shadow:0 1px 2px rgba(11,79,60,.05); }
.btn-danger:hover{ background:var(--status-rejected-bg); border-color:var(--status-rejected-text); transform:translateY(-1px); }

/* Tailles */
.btn-sm{ min-height:38px; padding:0 15px; font-size:13px; }
.btn-sm svg{ width:16px; height:16px; }
.btn-lg{ min-height:54px; padding:0 30px; font-size:16px; }
.btn-full, .btn-block{ width:100%; }
.btn-icon{ padding:0; width:44px; min-height:44px; }
.btn-icon.btn-sm{ width:38px; min-height:38px; }

/* ------------------------------------------------------------ badges */

.badge{
  display:inline-block;
  padding:5px 12px;
  border-radius:var(--radius-sm);
  font-size:12.5px; font-weight:600;
}
.badge-pending { background:var(--status-pending-bg);  color:var(--status-pending-text); }
.badge-approved{ background:var(--status-approved-bg); color:var(--status-approved-text); }
.badge-rejected{ background:var(--status-rejected-bg); color:var(--status-rejected-text); }
.badge-late    { background:var(--status-late-bg);     color:var(--status-late-text); }

/* Variantes sémantiques — définies ici (et non dans app.css) car PoziPay ne
   charge que theme.css + bank.css : sans cela les badges de la banque
   s'affichaient sans couleur. */
.b-success{ background:var(--status-approved-bg); color:var(--status-approved-text); }
.b-danger { background:var(--status-rejected-bg); color:var(--status-rejected-text); }
.b-warning{ background:var(--status-pending-bg);  color:var(--status-pending-text); }
.b-neutral{ background:var(--bg);                 color:var(--ink-soft); }
.b-blue   { background:var(--green-soft);         color:var(--pine); }

/* ------------------------------------------------------------ cartes */

.card{
  background:var(--bg-panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-card);
  padding:22px;
}
.card-hover{ transition:border-color .15s ease, transform .15s ease; }
.card-hover:hover{ border-color:var(--green-mid); transform:translateY(-2px); }

.panel-dark{
  background:var(--surface-deep);
  color:#fff;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-float);
  padding:32px;
}

/* ------------------------------------------------------------ formulaires */

label{
  display:block;
  font-weight:600; font-size:13.5px; color:var(--ink-soft);
  margin-bottom:7px;
}
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=tel],input[type=date],select,textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  background:var(--bg-panel);
  color:var(--ink);
  font-family:var(--font-body); font-size:15px;
  transition:border-color .14s ease, box-shadow .14s ease;
}
input::placeholder,textarea::placeholder{ color:var(--ink-faint); }
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--pine);
  box-shadow:0 0 0 3px rgba(11,79,60,.10);
}
select{ appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234B5D53' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:40px; }

/* ============================================================
   Listes déroulantes habillées (assets/js/select.js)

   Un <select> natif ouvre une liste dessinée par le système : fond bleu, police
   système, aucune prise CSS. Le script pose un bouton et un panneau à nous.

   ⚠️ Le <select> d'origine reste dans le formulaire, seulement masqué : les
   soumissions continuent de fonctionner, et si le script ne se charge pas, le
   champ natif reprend sa place visible. On n'échange jamais la fiabilité d'un
   formulaire contre une question d'apparence.
   ============================================================ */
.dsel{ position:relative; width:100%; }
.dsel > select{
  position:absolute; opacity:0; pointer-events:none;
  width:100%; height:100%; left:0; top:0; margin:0; border:0; padding:0;
}
.dsel-btn{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:12px 14px; min-height:46px;
  border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  background:var(--bg-panel); cursor:pointer; text-align:left;
  font-family:var(--font-body); font-size:14.5px; color:var(--ink);
  transition:border-color .14s ease, box-shadow .14s ease;
}
.dsel-btn:hover{ border-color:var(--green-mid); }
.dsel-btn:focus-visible{ outline:none; border-color:var(--pine); box-shadow:0 0 0 3px rgba(11,79,60,.10); }
.dsel-btn:disabled{ opacity:.55; cursor:not-allowed; }
.dsel.is-open .dsel-btn{ border-color:var(--pine); box-shadow:0 0 0 3px rgba(11,79,60,.10); }
.dsel-face{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dsel.is-empty .dsel-face{ color:var(--ink-faint); }
.dsel-caret{ width:16px; height:16px; flex-shrink:0; color:var(--ink-soft); transition:transform .16s ease; }
.dsel.is-open .dsel-caret{ transform:rotate(180deg); }

.dsel-panel{
  position:absolute; z-index:60; left:0; right:0; top:calc(100% + 6px);
  max-height:274px; overflow-y:auto; padding:6px;
  background:var(--bg-panel); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:0 18px 44px -20px rgba(7,51,40,.45), 0 2px 8px rgba(7,51,40,.06);
}
/* Panneau vers le haut quand il déborderait sous la fenêtre. */
.dsel.drop-up .dsel-panel{ top:auto; bottom:calc(100% + 6px); }
.dsel-panel[hidden]{ display:none !important; }

.dsel-group{
  padding:9px 11px 5px; font-size:10.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.07em; color:var(--ink-faint);
}
.dsel-opt{
  display:flex; align-items:center; width:100%; gap:8px;
  padding:10px 11px; border:0; border-radius:var(--radius-sm);
  background:transparent; cursor:pointer; text-align:left;
  font-family:var(--font-body); font-size:14px; line-height:1.35; color:var(--ink);
}
.dsel-opt:hover{ background:var(--green-soft); color:var(--pine-deep); }
.dsel-opt:focus-visible{ outline:none; background:var(--green-soft); box-shadow:inset 0 0 0 1px var(--green-mid); }
.dsel-opt.active{ background:var(--pine); color:#fff; font-weight:600; }
.dsel-opt.is-disabled{ opacity:.4; cursor:not-allowed; }
.dsel-opt.is-disabled:hover{ background:transparent; color:var(--ink); }

/* Grille de catégories (simulateur public + popup demande) */
.cat-picker{ display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:8px; }
.cat-chip{
  display:flex; align-items:center; gap:10px; text-align:left;
  padding:11px 12px; border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  background:var(--bg-panel); color:var(--ink-soft);
  font-family:var(--font-body); font-size:13.5px; font-weight:600; cursor:pointer;
  transition:border-color .14s ease, background .14s ease, color .14s ease;
}
.cat-chip[hidden]{ display:none; }
.cat-chip:hover{ border-color:var(--green-mid); color:var(--pine-deep); }
.cat-chip.active{ border-color:var(--pine); background:var(--green-soft); color:var(--pine-deep); box-shadow:0 0 0 1px var(--pine) inset; }
.cat-chip-ico{ display:flex; flex-shrink:0; color:var(--green-mid); }
.cat-chip.active .cat-chip-ico{ color:var(--pine); }
.cat-chip-name{ line-height:1.25; }

/* ------------------------------------------------------------ tableaux */

.table{
  width:100%;
  border-collapse:collapse;
  background:var(--bg-panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.table th{
  text-align:left;
  font-size:12px; font-weight:600;
  text-transform:uppercase; letter-spacing:.04em;
  color:var(--ink-soft);
  padding:12px 16px;
  border-bottom:1px solid var(--line);
}
.table td{
  padding:11px 16px;
  font-size:14px;
  border-bottom:1px solid var(--line);
}
.table tr:last-child td{ border-bottom:none; }

/* ----------------------------------------------------------------------------
   Tableaux longs — règle commune aux quatre espaces (site, espace client,
   PoziPay, administration).

   Un libellé ne se coupe pas et ne s'abrège pas : il reste sur SA ligne, et
   c'est le tableau qui défile dans son cadre. On lisait jusqu'ici des colonnes
   entières masquées sous 640 px et des textes cassés en trois lignes — on
   perdait l'information au lieu de la faire défiler.

   .table-wrap n'était défini nulle part : le tableau des transactions PoziPay
   n'avait donc AUCUN cadre coulissant et débordait de sa carte.
   -------------------------------------------------------------------------- */
.table-wrap, .ad-table-wrap, .admin-table-wrap{
  overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%;
}
.table th, .table td{ white-space:nowrap; }
/* Échappatoire explicite, à poser sur la seule colonne qui doit respirer. */
.table th.wrap, .table td.wrap{ white-space:normal; }

/* Variante amortissement : données chiffrées alignées à droite */
.table-amort td{ font-family:var(--font-mono); font-size:13.5px; font-variant-numeric:tabular-nums; }
.table-amort th:not(:first-child), .table-amort td:not(:first-child){ text-align:right; }
.table-amort tr.current td{ background:var(--green-soft); }