/* ══════════════════════════════════════════════════════
   tokens.css - Design tokens partages (custom properties)
   UNE valeur = UN endroit. Zero selecteur de composant.
   Charge en 1er CSS de chaque base module (avant les feuilles
   qui consomment les var()). Cache-bust : `CSS_VERSION` (settings.py), expose
   aux templates par `core.context_processors.assets` - incrementer CETTE
   variable, il n'y a plus de `?v=` a la main.
   Cf docs/PROJET.md "Relief / elevation des cartes".
   ══════════════════════════════════════════════════════ */
:root {
    /* Ex-police a chasse fixe (montants, numeros de compte, references).
       Alignee sur --font-sans : une seule police dans toute l'appli.
       L'alignement tabulaire des chiffres reste assure par
       `font-variant-numeric: tabular-nums`, pose partout ou --font-mono
       est utilise sur une colonne montant. */
    --font-mono: var(--font-sans);

    /* Police de texte de toute l'application. Plus Jakarta Sans est
       auto-hebergee (fonts.css, RGPD : pas d'appel a Google Fonts).
       Il en trainait 6 chaines de repli differentes selon les feuilles
       ("Segoe UI"/Arial, +Tahoma, +Geneva+Verdana, system-ui, ou rien),
       d'ou un rendu qui changeait d'un ecran a l'autre pendant le
       chargement de la police. Une seule chaine desormais. */
    --font-sans: 'Plus Jakarta Sans', "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

    /* Carte (primitif duplique sous .tui-card/.adh-card/.card/.sa-card/.rep-card) */
    --card-bg: #fff;
    --card-border: 1px solid #cbd5e1;
    --card-radius: 14px;
    --card-shadow: 0 4px 14px rgba(15, 23, 42, 0.09), 0 1px 3px rgba(15, 23, 42, 0.05);
    /* En-tete de carte : THEME VIOLET (2026-07-26, decision Joe).
       Essai valide sur le module adherents, puis generalise a toute
       l'application : degrade indigo -> violet -> rose, filet indigo,
       titre indigo fonce. Memes valeurs que `--tbl-title-*` (comptabilite),
       deux jeux distincts pour pouvoir faire diverger la compta un jour. */
    --card-header-bg: linear-gradient(135deg, #e0e7ff 0%, #ede9fe 55%, #fae8ff 100%);
    --card-header-border: 1.5px solid #a5b4fc;
    --card-title: #3730a3;

    /* ─────────────────────────────────────────────────────────────
       Tableau STANDARD - tout sauf la comptabilite.
       Decision Joe du 2026-07-23 : le module comptable garde son
       style propre (echelle indigo `--tbl-*` ci-dessus, convention
       comptable : titre > en-tete > lignes > total a filet fort).
       Tout le reste - tui (ged, notes de frais, rendez-vous, modeles),
       adherents, administration, facturation, superadmin, reporting -
       s'aligne sur l'ecole REPORTING, avec deux reprises explicites
       de la comptabilite :
         - le SURVOL, qui reprend `--tbl-row-hover` (violet), pour que
           la ligne survolee se comporte pareil dans toute l'app ;
         - la TYPOGRAPHIE (13px en cellule, 11px en en-tete, gras 700,
           interlettrage 0.5px), et non le 14/12px de reporting.
       ───────────────────────────────────────────────────────────── */
    /* En-tete de colonnes : THEME VIOLET (2026-07-26, decision Joe). Etait
       gris (#fafbfc / #64748b). Reprend l'echelle indigo de la comptabilite
       (`--tbl-head-*`), un cran EN DESSOUS du titre de carte (degrade) :
       titre > en-tete de colonnes > lignes blanches. */
    --grid-head-bg: #e0e7ff;
    --grid-head-text: #3730a3;
    --grid-head-border: 2px solid #a5b4fc;
    --grid-cell-border: 1px solid #e2e8f0;
    --grid-pad: 10px 16px;
    --grid-size: 13px;
    --grid-head-size: 11px;
    --grid-head-weight: 700;
    --grid-head-spacing: 0.5px;
    /* Meme valeur que `--tbl-row-hover` : c'est voulu, pas un doublon.
       Deux tokens distincts pour pouvoir faire diverger la compta un jour
       sans toucher au reste. */
    --grid-row-hover: #ede9fe;
    /* Zebrage / lignes de service (pieds de tableau, cellules de detail) de
       l'ecole reporting. Pendant de `--tbl-row-alt`, qui reste reserve a la
       comptabilite (lot D). Meme valeur aujourd'hui, tokens distincts pour
       pouvoir faire diverger les deux ecoles. Cree au lot J (2026-07-28), ou
       #f8fafc a ete eclate par role. */
    --grid-row-alt: #f8fafc;

    /* ─────────────────────────────────────────────────────────────
       Champ de saisie (input / select / textarea).
       Reference choisie par Joe le 2026-07-23 : `.adh-input` /
       `.adh-select` (shared.css), c'est-a-dire le style adherents.
       Les autres familles (facturation, filtres tui, ged, superadmin,
       invitations) s'alignent dessus et consomment ces tokens.
       Deux exceptions volontaires, a NE PAS aligner :
         - `.rep-exo-select select` (reporting.css) : selecteur d'exercice
           pose sur le bandeau sombre, il lui faut un fond translucide ;
         - `.param-input` (utilities.css) : parametres URSSAF, il porte
           deux etats metier (.modified jaune / .saved vert) qui reposent
           sur son propre jeu de bordures.
       ───────────────────────────────────────────────────────────── */
    --input-bg: #fff;
    --input-text: #1f2937;
    /* Lot bordures (2026-07-24) : champ aligne sur le gris carte #cbd5e1
       (etait #d1d5db). Decision Joe : carte + champ + bordure generique = un
       seul gris #cbd5e1 ; tableau (#e2e8f0) et separateur (#f3f4f6) conserves. */
    --input-border: 1px solid #cbd5e1;
    --input-radius: 8px;
    --input-pad: 8px 12px;
    /* Le select est legerement plus serre que l'input : la fleche native
       occupe deja de la place a droite. */
    --input-pad-select: 7px 10px;
    --input-size: 13px;
    --input-focus-border: #6366f1;
    --input-focus-ring: 0 0 0 3px rgba(99, 102, 241, 0.12);

    /* Layout : espace entre le bandeau d'onglets et la 1re carte du contenu.
       Applique en padding-top des conteneurs (.tui/.adh/.rep/.sa-container). */
    --content-top-gap: 28px;
    /* Effet de separation : legere ombre portee sous le bandeau d'onglets
       (.tui/.adh-nav-wrap) pour detacher le contenu. */
    --nav-shadow: 0 5px 10px -6px rgba(15, 23, 42, 0.15);

    /* Tableaux comptables - en-tetes et totaux.
       Palette indigo/violet reprise du bandeau "Total valorise" du benevolat
       (.ben-total) : donne une couleur propre aux en-tetes sans revenir aux
       aplats noirs. Hierarchie : titre de panneau (degrade) > en-tete de
       colonnes (violet clair) > lignes blanches > total (indigo + filet fort). */
    --tbl-title-bg: linear-gradient(135deg, #e0e7ff 0%, #ede9fe 55%, #fae8ff 100%);
    --tbl-title-text: #3730a3;
    --tbl-title-border: 1.5px solid #a5b4fc;
    --tbl-head-bg: #e0e7ff;
    --tbl-head-text: #3730a3;
    --tbl-head-border: 2px solid #a5b4fc;
    /* Ligne de sous-categorie (regroupement dans le corps du tableau :
       "Immobilisations corporelles", "Creances", "Dettes"...). Palier plus
       clair que l'en-tete : c'est du contenu groupe, pas de la structure.
       Echelle complete : sous-total #eef2ff < en-tete #e0e7ff < total #c7d2fe. */
    --tbl-subtotal-bg: #eef2ff;
    --tbl-subtotal-text: #4338ca;
    --tbl-subtotal-border: 1px solid #c7d2fe;
    --tbl-total-bg: #c7d2fe;
    --tbl-total-text: #312e81;
    --tbl-total-rule: 2px solid #4338ca;
    /* Corps du tableau : zebrage et survol. Le survol prend une teinte VIOLET
       (et non indigo) pour ne pas etre confondu avec le palier structurel des
       sous-categories (#eef2ff) : c'est un surlignage transitoire. */
    --tbl-row-alt: #f8fafc;
    --tbl-row-hover: #ede9fe;

    /* ─────────────────────────────────────────────────────────────
       Palette de base, rayons et ombres.
       Ces 20 tokens vivaient dans le `:root` de style.css : ils
       n'existaient donc QUE pour les modules qui chargent style.css
       (compta, adherents, administration, facturation, superadmin) et
       restaient inaccessibles a ged / rendez_vous / notes_frais /
       modeles / reporting. Remontes ici a valeur identique (lot A,
       2026-07-23) : aucun rendu ne change, mais tout le monde y a
       desormais acces.
       ───────────────────────────────────────────────────────────── */
    --color-text: #1e293b;
    --color-muted: #6b7280;
    --color-border: #cbd5e1;  /* etait #e5e7eb - aligne sur le gris carte (lot bordures) */
    --color-border-light: #f3f4f6;
    /* Fond de PAGE (body des modules), et rien d'autre. */
    --color-bg: #f8fafc;
    /* Surface douce : encarts, notices, barres de filtres, boites de
       reference - un aplat legerement plus sombre que le blanc, POSE SUR une
       carte ou une page. Cree au lot J (2026-07-28) : `#f8fafc` servait
       jusque-la trois roles a la fois (fond de page, zebrage de tableau, fond
       de panneau), ce qui rendait impossible de changer l'un sans deplacer les
       deux autres. Meme valeur que `--color-bg` et `--grid-row-alt`
       aujourd'hui ; ce sont trois intentions differentes. */
    --surface-soft: #f8fafc;
    --color-white: #fff;
    --color-success: #059669;
    --color-success-bg: #d1fae5;
    --color-danger: #dc2626;
    --color-danger-bg: #fee2e2;
    --color-info: #1d4ed8;
    --color-info-bg: #dbeafe;
    --color-warning: #d97706;
    --color-warning-bg: #fef3c7;
    /* Echelle de rayons (lot I bis, 2026-07-28). Les 3 tokens d'origine
       (sm 6 / md 8 / lg 12) avaient ete poses sans regarder ce que le CSS
       faisait reellement : ils n'avaient QUE 1 consommateur a eux trois
       (--radius-md dans avis.css), et la valeur la plus frequente de toute
       l'application - 10px, 83 declarations - n'avait aucun token.
       L'echelle est donc refaite pour decrire le reel :
         4px (20) < 6px (45) < 8px (79) < 10px (83) < 12px (41).
       ATTENTION : `--radius-lg` passe de 12px a 10px. Sans effet, verifie et
       non suppose (0 consommateur avant ce lot) ; le 12px devient
       `--radius-xl`. Rationaliser l'echelle (rabattre 10 sur 8 ou 12) reste
       possible plus tard - ce serait un CHANGEMENT DE STYLE sur 83 arrondis,
       donc un lot assume avec passe visuelle, pas une centralisation. */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    /* Formes, pas paliers : pilule (boutons/etiquettes arrondis) et cercle
       (avatars, pastilles). A ne pas confondre avec l'echelle ci-dessus. */
    --radius-pill: 999px;
    --radius-circle: 50%;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
    --shadow-md: 0 4px 20px rgba(0,0,0,.12);

    /* ─────────────────────────────────────────────────────────────
       Boutons pleins - recette "degrade + soulevement" (lot B1,
       2026-07-24). Reference : la famille `.btn-tui` (tui.css). Decision
       Joe : primaire (indigo), danger (rouge) et succes (vert) s'alignent
       sur ce style dans TOUTES les familles, geometrie comprise (option a).
       Consomme par `.btn-tui-*` (source), `.btn-*` (style.css : compta,
       adherents, administration, facturation) et `.btn-sa-*` (superadmin).
       Deux glissements volontaires cote style.css/superadmin :
         - danger rose #f43f5e -> rouge #dc2626 (aligne sur tui/superadmin) ;
         - primaire superadmin violet #7c3aed -> indigo #6366f1.
       NON concernes : neutre/secondaire (.btn-secondary, .btn-tui-outline/
       -ghost/-outline-danger, .btn-sa-outline) et speciaux metier
       (.btn-tui-fact, .btn-tui-violet).
       ───────────────────────────────────────────────────────────── */
    --btn-pad: 7px 16px;
    --btn-radius: 8px;
    --btn-font-size: 14px;
    --btn-weight: 500;
    --btn-gap: 6px;
    --btn-base-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    --btn-lift: translateY(-1px);

    --btn-primary-bg: linear-gradient(180deg, #6366f1 0%, #4f46e5 100%);
    --btn-primary-bg-hover: linear-gradient(180deg, #4f46e5 0%, #4338ca 100%);
    --btn-primary-shadow: 0 1px 2px rgba(79, 70, 229, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    --btn-primary-shadow-hover: 0 4px 12px rgba(79, 70, 229, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);

    --btn-danger-bg: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
    --btn-danger-bg-hover: linear-gradient(180deg, #dc2626 0%, #b91c1c 100%);
    --btn-danger-shadow: 0 1px 2px rgba(220, 38, 38, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    --btn-danger-shadow-hover: 0 4px 12px rgba(220, 38, 38, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);

    --btn-success-bg: linear-gradient(180deg, #10b981 0%, #059669 100%);
    --btn-success-bg-hover: linear-gradient(180deg, #059669 0%, #047857 100%);
    --btn-success-shadow: 0 1px 2px rgba(16, 185, 129, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    --btn-success-shadow-hover: 0 4px 12px rgba(16, 185, 129, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}