/* =============================================================================
   Snipr · Prisme — système de design (source unique de vérité)

   Règles d'usage
   - Un composant ne lit QUE les tokens sémantiques (§2 à §8). Les primitives (§1)
     ne servent qu'à construire ce fichier.
   - Aucune couleur, taille, espacement, rayon, ombre ou durée écrit en dur ailleurs.
   - Thème : chaque couleur est déclarée une fois avec light-dark(clair, sombre).
     Le thème suit le système ; [data-theme="light"|"dark"] le force, sur <html>
     ou sur n'importe quel bloc (utile pour la page de démonstration).
     Support : Chrome/Edge 123+, Safari 17.5+, Firefox 120+.
   - Points de rupture (les media queries ne lisent pas les variables) :
     base 390 px (mobile) · 768 px (tablette) · 1024 px (bureau).
   ============================================================================= */

:root { color-scheme: light dark; }
[data-theme="light"] { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }

:root {
  /* ---------------------------------------------------------------------------
     §1 Primitives — rampes brutes, jamais utilisées dans un composant
     --------------------------------------------------------------------------- */
  /* Violet signature */
  --p-violet-100: #EBE7FD;
  --p-violet-300: #A58FFF;
  --p-violet-400: #7A57FF;
  --p-violet-500: #6D47F5;
  --p-violet-600: #5B33F0;
  --p-violet-700: #4E27DE;
  --p-violet-800: #4524C4;
  /* Neutres lavande (clair) — jamais de gris pur : teinte 255° */
  --p-lav-0: #FFFFFF;
  --p-lav-50: #F2EFFB;
  --p-lav-100: #EBE6F8;
  --p-lav-200: #E6E0F5;
  --p-lav-400: #80779E;
  --p-lav-500: #5F567E;
  --p-lav-900: #170F33;
  /* Neutres nuit (sombre) */
  --p-night-50: #F4F0FF;
  --p-night-300: #A79DCB;
  --p-night-400: #7B71A3;
  --p-night-700: #2C2350;
  --p-night-800: #261D47;
  --p-night-850: #1C1438;
  --p-night-900: #110A26;
  --p-night-950: #0A0614;   /* fond du sombre profond (29/10/2026) : presque noir, teinté violet */

  /* ---------------------------------------------------------------------------
     §2 Couleurs sémantiques — un sens, un seul, dans toute l'appli
     --------------------------------------------------------------------------- */
  /* Surfaces : fond d'écran < carte < creux (puces, champs, pistes) */
  --bg:                light-dark(var(--p-lav-50), var(--p-night-950));
  --surface:           light-dark(var(--p-lav-0), var(--p-night-850));
  --surface-2:         light-dark(var(--p-lav-100), var(--p-night-800));
  --surface-inverse:   light-dark(var(--p-lav-900), var(--p-night-50));   /* barre d'onglets, toasts */
  --scrim:             light-dark(rgb(23 15 51 / .45), rgb(5 2 15 / .65)); /* derrière les modales */

  /* Texte */
  --text:              light-dark(var(--p-lav-900), var(--p-night-50));
  --text-muted:        light-dark(var(--p-lav-500), var(--p-night-300));
  --text-inverse:      light-dark(var(--p-night-50), var(--p-lav-900));
  --text-inverse-muted:light-dark(var(--p-night-300), var(--p-lav-500));

  /* Traits : --line sépare (décoratif), --line-field délimite un champ (≥ 3:1) */
  --line:              light-dark(var(--p-lav-200), var(--p-night-700));
  --line-field:        light-dark(var(--p-lav-400), var(--p-night-400));

  /* Signature : marque, action principale, sélection. Jamais un état métier. */
  --brand:             light-dark(var(--p-violet-600), var(--p-violet-500));
  --brand-hover:       light-dark(var(--p-violet-700), var(--p-violet-400));
  --brand-press:       light-dark(var(--p-violet-800), var(--p-violet-600));
  --brand-text:        light-dark(var(--p-violet-600), var(--p-violet-300)); /* violet en texte ou icône */
  --brand-soft:        light-dark(var(--p-violet-100), #322858);             /* fond teinté : sélection */
  --on-brand:          #FFFFFF;
  /* Logo « Vitesse » (29/10/2026) : tuile en dégradé violet → rose avec un S blanc, et le mot SNIPR sur un seul
     dégradé (plus clair en sombre). Couleurs relevées sur les visuels de l'utilisateur. Le dégradé est réservé
     au logo : le reste de l'interface garde la couleur signature en aplat. */
  --logo-from:         var(--p-violet-700);
  --logo-mid:          #8A33F0;
  --logo-to:           #D945DC;
  --logo-glyph:        #FFFFFF;
  --logo:              var(--p-violet-600);   /* aplat de repli (anciennes planches) */
  --wordmark-from:     light-dark(var(--p-violet-600), #FFFFFF);
  --wordmark-mid:      light-dark(#9B3BF0, #E9D6FF);
  --wordmark-to:       light-dark(#E043D6, #F07DE6);
  --wordmark-trail:    light-dark(#8E3CF2, #E59BFF);
  --focus:             light-dark(var(--p-violet-600), var(--p-violet-300));
  /* Accent or (30/10/2026, écran « banque ») : ce qui est choisi ou ouvert — onglet actif, puce active,
     raccourci allumé. Le violet reste la marque et l'action principale ; l'or ne porte jamais un état métier. */
  --accent:            light-dark(#8A6100, #FFC94D);   /* texte, icône, contour */
  --accent-fill:       #FFC94D;                         /* aplat (pastille pleine) */
  --on-accent:         #2A1C00;
  --accent-soft:       light-dark(#FFF3D1, rgb(255 201 77 / .14));
  /* Haut d'Affaires : la lueur du logo (violet → rose) sur le fond nuit, en sombre comme en clair */
  --hero-base:         var(--p-night-950);
  --hero-glow-1:       color-mix(in oklab, var(--logo-to) 70%, transparent);
  --hero-glow-2:       color-mix(in oklab, var(--logo-from) 85%, transparent);
  --hero-glow-3:       color-mix(in oklab, var(--logo-mid) 55%, transparent);
  --hero-ink:          #FFFFFF;
  --hero-ink-muted:    rgb(255 255 255 / .72);
  --hero-glass:        rgb(255 255 255 / .14);
  --hero-glass-press:  rgb(255 255 255 / .24);
  --hero-raised:       color-mix(in srgb, #FFFFFF 10%, var(--hero-base));  /* surface pleine posée sur le haut sombre (carte, bouton) */
  --hero-raised-press: color-mix(in srgb, #FFFFFF 18%, var(--hero-base));
  /* Pastilles des rubriques de réglages (façon iPhone) : une couleur par rubrique, icône blanche dessus */
  --tile-violet:       var(--p-violet-600);
  --tile-green:        #2E9E6B;
  --tile-orange:       #E0602A;
  --tile-pink:         #D63C88;
  --tile-cyan:         #0E8FA2;
  --tile-indigo:       #3F5BD9;
  --tile-slate:        #68718C;
  --tile-grey:         #5F567E;
  --on-tile:           #FFFFFF;

  /* Gain : bénéfice, marge positive, « Rentable », vente encaissée avec profit. Rien d'autre. */
  --gain:              light-dark(#007A50, #3EE0A0);
  --gain-soft:         light-dark(#E0EFEA, #213549);
  --on-gain:           light-dark(#FFFFFF, #03170E);
  /* Perte : marge négative, échec, suppression, erreur. */
  --loss:              light-dark(#C42A36, #FF6F79);
  --loss-soft:         light-dark(#F8E5E7, #402342);
  --on-loss:           light-dark(#FFFFFF, #2A0306);
  /* Alerte : à vérifier, à payer, stock dormant, quota atteint — demande une attention.
     Orangée depuis le 30/10/2026 : le jaune d'avant se confondait avec l'accent or. */
  --alert:             light-dark(#B04A00, #FF9A45);
  --alert-soft:        light-dark(#F8E7DB, #42282F);
  --on-alert:          light-dark(#FFFFFF, #1F0B00);
  /* Info : simulation, en vente, synchronisation, aide — état neutre mais notable. */
  --info:              light-dark(#1D67D4, #66AEFF);
  --info-soft:         light-dark(#E4EDFA, #282D58);
  --on-info:           light-dark(#FFFFFF, #04142A);
  /* Mêmes sens sur la surface inversée (toasts, barre d'onglets) : on prend la valeur de l'autre thème */
  --brand-on-inverse:  light-dark(var(--p-violet-300), var(--p-violet-600));
  --gain-on-inverse:   light-dark(#3EE0A0, #007A50);
  --loss-on-inverse:   light-dark(#FF6F79, #C42A36);
  --alert-on-inverse:  light-dark(#FF9A45, #B04A00);
  --info-on-inverse:   light-dark(#66AEFF, #1D67D4);
  /* Neutre : « Passer », inactif, en pause, historique. */
  --neutral:           var(--text-muted);
  --neutral-soft:      var(--surface-2);

  /* Graphiques : les flux ne sont pas des gains → violet et lavande ; le profit garde --gain / --loss */
  --chart-in:          var(--brand);                                  /* encaissé */
  --chart-out:         light-dark(var(--p-lav-400), var(--p-night-400)); /* dépensé */
  --chart-grid:        var(--line);

  /* Repères d'identification (monitors, catégories) : pastilles uniquement, jamais d'état */
  --tag-1:             light-dark(#7F5CFF, #A58FFF); /* violet */
  --tag-2:             light-dark(#D63C88, #FF7EB8); /* rose */
  --tag-3:             light-dark(#0E8FA2, #4FD3E3); /* cyan */
  --tag-4:             light-dark(#3F5BD9, #8EA2FF); /* indigo */
  --tag-5:             light-dark(#A07A47, #D8B98A); /* sable */
  --tag-6:             light-dark(#68718C, #A3ABC2); /* ardoise */

  /* Squelettes de chargement */
  --skeleton:          var(--surface-2);
  --skeleton-shine:    light-dark(rgb(255 255 255 / .7), rgb(255 255 255 / .06));

  /* ---------------------------------------------------------------------------
     §3 Typographie — Manrope pour l'interface, Archivo élargi pour les chiffres
     --------------------------------------------------------------------------- */
  --font-ui: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Archivo", "Manrope", ui-sans-serif, system-ui, sans-serif;
  --display-stretch: 125%;          /* Archivo en largeur « Expanded » */
  --numeric: tabular-nums;          /* tout montant, compteur, durée */

  --weight-regular: 500;
  --weight-medium: 600;
  --weight-bold: 700;
  --weight-heavy: 800;              /* chiffres héros uniquement */

  /* Échelle fixe : 6 niveaux, en rem pour suivre la taille de texte du téléphone */
  --text-xs: .75rem;   --leading-xs: 1rem;      /* 12/16 en-têtes de tableau, légendes (jamais de capitales forcées : la hiérarchie passe par la taille) */
  --text-sm: .875rem;  --leading-sm: 1.25rem;   /* 14/20 texte secondaire, boutons compacts */
  --text-md: 1rem;     --leading-md: 1.5rem;    /* 16/24 texte courant, boutons, champs (pas de zoom iOS) */
  --text-lg: 1.25rem;  --leading-lg: 1.75rem;   /* 20/28 titres de section, montants secondaires */
  --text-xl: 1.75rem;  --leading-xl: 2rem;      /* 28/32 gain d'une carte, indicateurs */
  --text-2xl: 2.75rem; --leading-2xl: 3rem;     /* 44/48 chiffre héros (bénéfice de la période) */

  --tracking-display: -.01em;

  /* ---------------------------------------------------------------------------
     §4 Espacement — grille de 4 px
     --------------------------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---------------------------------------------------------------------------
     §5 Formes — un rayon par niveau : conteneur > élément de liste > vignette > bouton
     --------------------------------------------------------------------------- */
  /* échelle fermée (règles de design du 01/11/2026, §3.4) : aucune autre valeur */
  --radius-xs: 8px;       /* petits éléments : vignettes, infobulles, pastilles carrées */
  --radius-sm: 12px;      /* champs et boutons */
  --radius-md: 16px;      /* cartes et fiches : carte d'annonce, fiche du stock */
  --radius-lg: 20px;      /* conteneurs : panneaux, graphiques, feuilles, modales */
  --radius-full: 999px;   /* seulement puces, badges, interrupteurs, points et barre d'onglets */

  /* ---------------------------------------------------------------------------
     §6 Élévation — 3 niveaux, réservés à ce qui flotte (barres, menus, feuilles, toasts, curseurs qui glissent).
     Une carte posée sur la page n'a pas d'ombre : le blanc sur le fond la détache, filets et espace séparent.
     Ombre neutre à l'encre en clair, noire en sombre ; jamais teintée de la marque.
     --------------------------------------------------------------------------- */
  --elev-1: 0 1px 2px light-dark(rgb(23 15 51 / .06), rgb(0 0 0 / .4)),
            0 12px 28px -18px light-dark(rgb(23 15 51 / .22), rgb(0 0 0 / .7));        /* curseur des onglets « Semaine, Mois… », interrupteur */
  --elev-2: 0 2px 6px light-dark(rgb(23 15 51 / .08), rgb(0 0 0 / .45)),
            0 20px 44px -20px light-dark(rgb(23 15 51 / .28), rgb(0 0 0 / .8));        /* barres flottantes : onglets du bas, achats en attente */
  --elev-3: 0 4px 12px light-dark(rgb(23 15 51 / .10), rgb(0 0 0 / .5)),
            0 36px 80px -28px light-dark(rgb(23 15 51 / .45), rgb(0 0 0 / .85));       /* modales, toasts */

  /* ---------------------------------------------------------------------------
     §7 Mouvement — chaque animation dit quelque chose : état, regard, confirmation
     --------------------------------------------------------------------------- */
  --dur-fast: 150ms;                          /* survol, appui, couleur */
  --dur-std: 250ms;                           /* changement d'état : bouton, onglet, interrupteur */
  --dur-slow: 280ms;                          /* succès, toast, élément qui répond à une action : l'UI reste sous 300 ms */
  --dur-sheet: 400ms;                         /* feuille et modale : un tiroir a droit à plus (≤ 500 ms) */
  --dur-count: 600ms;                         /* la seule séquence orchestrée : bénéfice de Compta et graphique, à l'arrivée */
  --stagger: 60ms;                            /* décalage entre barres d'un graphique */

  --ease-out: cubic-bezier(.22, 1, .36, 1);    /* « freinage » : entrées, sorties (en --dur-fast), changements d'état. Jamais d'ease-in : un départ lent paraît lourd */
  /* « ressort doux » : vrai ressort amorti (rebond 0,25), lancé avec la pente de --ease-out ; dépasse de 3,4 % puis se pose.
     Réservé aux célébrations (payé, connecté, favori gagné). Appui, changement d'état et toast : --ease-out, jamais de rebond. */
  --ease-pop: linear(0, 0.148, 0.302, 0.448, 0.579, 0.693, 0.787, 0.863, 0.921, 0.964, 0.994, 1.015, 1.027, 1.033, 1.034, 1.033, 1.03, 1.026, 1.022, 1.018, 1.014, 1.01, 1.007, 1.005, 1.003, 1.002, 1.001, 1, 0.999, 0.999, 0.999, 0.999, 1);

  --dur-loop: 1200ms;                         /* boucles : indicateur en direct, chargement, squelette */
  --dur-undo: 5000ms;                         /* fenêtre « Annuler » d'une action coûteuse (pas une animation) */
  --dur-notice: 15000ms;                      /* temps de lecture d'un toast qui propose une suite (ex. « Payer ») */

  --press-scale: .97;                         /* appui sur un bouton */
  --pop-scale: 1.35;                          /* battement d'une icône qui gagne un point (favori) */
  --enter-distance: 12px;                    /* les éléments entrent depuis 12 px plus bas */

  /* ---------------------------------------------------------------------------
     §8 Mise en page et superposition
     --------------------------------------------------------------------------- */
  --tap: 44px;               /* cible tactile minimale */
  --gutter: 16px;            /* marge latérale mobile */
  --content-max: 1120px;     /* largeur maximale sur bureau */

  /* Dimensions de composants (multiples de 4) */
  --control-h: 48px;         /* bouton, champ */
  --control-h-sm: 44px;      /* bouton compact, puce, avatar : jamais sous la cible tactile (règles du 01/11, §6) */
  --badge-h: 24px;
  --icon: 20px;
  --icon-sm: 16px;
  --dot: 8px;                /* pastille d'état ou de repère */
  --thumb-sm: 40px;          /* vignette de liste */
  --thumb-md: 56px;          /* vignette de carte compacte */
  --thumb-lg: 96px;          /* photo de la carte d'évaluation */
  --appbar-h: 56px;
  --tabbar-h: 64px;
  --wordmark-h: 20px;        /* hauteur du mot SNIPR dans les barres */
  --wordmark-ratio: 6.042;    /* largeur / hauteur du mot (dessin fixe) */
  --tile-min: 156px;         /* téléphone et tablette : largeur mini d'une vignette du feed (2 colonnes plié, 4 déplié) */
  --switch-w: 48px;
  --switch-h: 28px;
  --sheet-max: 560px;        /* largeur d'une modale sur bureau */
  --sheet-max-wide: 760px;   /* modale de formulaire long (republication) */
  --sheet-max-xl: 960px;     /* ordinateur : réglages en deux volets (sommaire + contenu) */
  --toast-max: 420px;
  --chart-h: 220px;
  --card-min: 340px;         /* largeur mini d'une carte avant de passer à plusieurs colonnes */
  --kpi-min: 180px;          /* largeur mini d'un indicateur sur grand écran */
  --sidebar-w: 256px;        /* ordinateur : barre latérale étendue */
  --rail-w: 76px;            /* ordinateur : barre latérale réduite (icônes) */
  --panel-w: 384px;          /* ordinateur : panneau de détail d'une annonce */
  --panel-w-activity: 320px; /* ordinateur : panneau d'activité */
  --opacity-disabled: .45;

  --blur: 16px;              /* flou des barres translucides */
  /* « verre » des barres sur téléphone (façon iOS) : fond à 72 % + flou + couleurs ravivées dessous */
  --glass: color-mix(in srgb, var(--surface) 72%, transparent);
  --glass-bar: color-mix(in srgb, var(--bg) 78%, transparent);
  --glass-filter: blur(var(--blur)) saturate(180%);
  --glass-edge: color-mix(in srgb, var(--line) 80%, transparent); /* filet du bord, visible sur fond clair comme sombre */
  --tab-active: color-mix(in srgb, var(--text) 8%, transparent);   /* capsule de l'onglet ouvert */
  --sheet-dismiss: 96px;     /* glisser une feuille de plus que ça vers le bas la ferme */
  --split-col: 320px;        /* tablette tactile en paysage : colonne des recherches à côté du feed */
  --quick-size: 52px;        /* raccourcis ronds sous le solde d'Affaires */
  --radius-sheet: var(--radius-lg); /* coins de la feuille d'affaires qui remonte sur le solde */

  --z-sticky: 10;
  --z-nav: 20;
  --z-overlay: 40;
  --z-toast: 50;
}

/* Mouvement réduit : tout devient instantané, sans déplacement ni rebond.
   Le code ne doit donc jamais attendre un « transitionend » pour avancer. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-std: 0ms;
    --dur-slow: 0ms;
    --dur-sheet: 0ms;
    --dur-count: 0ms;
    --stagger: 0ms;
    --dur-loop: 0ms;
    --press-scale: 1;
    --pop-scale: 1;
    --enter-distance: 0px;
  }
}