/* ==========================================================================
   Stackly — Jetons de design
   Source unique de verite. Aucun selecteur ici, uniquement des variables.
   Charge en premier par base.html.twig, avant tout autre CSS.
   ========================================================================== */

:root {

  /* ---------- Surfaces et encres ----------------------------------------
     Direction « Crenolia » : le gris porte, la couleur signale. Fond gris
     froid, cartes blanches, encre presque noire. Contrastes (WCAG 2.1) :
     --ink 17,5:1 sur blanc, --ink-secondary 10:1, --ink-muted 5,8:1 sur blanc
     et 5,0:1 sur --canvas. --ink-faint (3:1) ne porte JAMAIS de texte utile :
     icones, chevrons, filets seulement.
     ---------------------------------------------------------------------- */
  --canvas:            #ECEEF2;   /* fond de page */
  --surface:           #FFFFFF;   /* cartes, tableaux, modales */
  --surface-sunken:    #F4F5F7;   /* en-tetes de tableau, segmentes, survol */
  --surface-muted:     #F7F8FA;   /* pieds de carte, zones secondaires */
  --surface-well:      #E4E7EC;   /* colonnes du suivi des ventes (Clients) */

  --border-subtle:     #EEF0F3;   /* separateurs de lignes */
  --border:            #E9EBEF;   /* contours de cartes */
  --border-strong:     #DDE0E6;   /* contours de champs et boutons */
  --border-dashed:     #C3C8D1;   /* zones de depot, pointilles */

  --ink:               #16181D;   /* titres, boutons primaires */
  --ink-secondary:     #3D424D;   /* paragraphes, libelles */
  --ink-muted:         #5F6573;   /* legendes, axes, en-tetes de colonne */
  --ink-faint:         #9096A3;   /* icones et filets uniquement */
  --ink-disabled:      #B8BDC7;

  --ink-on-dark:       #FFFFFF;

  /* ---------- Teintes modules -------------------------------------------
     Une teinte = un outil. Une seule a la fois par ecran.
     `-ink` est la version assombrie, pour du texte pose sur la teinte (4,5:1).
     `-solid` est le fond des boutons d'action de l'outil, texte blanc dessus
     a 4,5:1 minimum : egal a la teinte quand elle y suffit, a peine assombri
     sinon (Stock 3,9 -> 4,9 ; Clients 4,1 -> 5,9, la valeur des maquettes V2 ;
     Depenses 3,1 -> 4,5).
     ---------------------------------------------------------------------- */
  --mod-documents:        #5B4FCF;
  --mod-documents-ink:    #4A419E;
  --mod-documents-tint:   rgba(91, 79, 207, 0.10);
  --mod-documents-tint-2: rgba(91, 79, 207, 0.05);
  --mod-documents-solid:  #5B4FCF;

  --mod-stock:            #00918E;
  --mod-stock-ink:        #00706E;
  --mod-stock-tint:       rgba(0, 145, 142, 0.10);
  --mod-stock-tint-2:     rgba(0, 145, 142, 0.05);
  --mod-stock-solid:      #00706E;   /* maquette StockV2 : boutons pleins en #00706E */

  --mod-crm:              #CE5A44;
  --mod-crm-ink:          #A84532;
  --mod-crm-tint:         rgba(206, 90, 68, 0.10);
  --mod-crm-tint-2:       rgba(206, 90, 68, 0.05);
  --mod-crm-solid:        #A84532;

  --mod-planning:         #2A6FD0;
  --mod-planning-ink:     #1F5AAF;
  --mod-planning-tint:    rgba(42, 111, 208, 0.10);
  --mod-planning-tint-2:  rgba(42, 111, 208, 0.05);
  --mod-planning-solid:   #2A6FD0;

  --mod-finance:          #2F8558;
  --mod-finance-ink:      #1F6B42;
  --mod-finance-tint:     rgba(47, 133, 88, 0.10);
  --mod-finance-tint-2:   rgba(47, 133, 88, 0.05);
  --mod-finance-solid:    #2F8558;

  --mod-expenses:         #BE8724;
  --mod-expenses-ink:     #9A6E1C;
  --mod-expenses-tint:    rgba(190, 135, 36, 0.10);
  --mod-expenses-tint-2:  rgba(190, 135, 36, 0.05);
  --mod-expenses-solid:   #9A6E1C;

  /*  Le violet du module Temps, repris par l'Assistant qui l'a remplace
      au catalogue. Meme place dans la palette, meme contraste verifie.  */
  --mod-assistant:        #8B4E9C;
  --mod-assistant-ink:    #723E80;
  --mod-assistant-tint:   rgba(139, 78, 156, 0.10);
  --mod-assistant-tint-2: rgba(139, 78, 156, 0.05);
  --mod-assistant-solid:  #8B4E9C;

  /* Teinte du module courant. Surchargee par [data-module] sur <body>. */
  --accent:            var(--mod-documents);
  --accent-ink:        var(--mod-documents-ink);
  --accent-tint:       var(--mod-documents-tint);
  --accent-tint-2:     var(--mod-documents-tint-2);
  --accent-solid:      var(--mod-documents-solid);

  /* ---------- Statuts ----------------------------------------------------
     Reserves. Jamais reutilises comme couleur de serie.
     Toujours accompagnes d'un mot et d'une icone.
     ---------------------------------------------------------------------- */
  --success:           #1F7A4D;   /* 4,7:1 sur sa teinte */
  --success-ink:       #1F7A4D;
  --success-tint:      #E6F4EC;

  --warning:           #8A5A00;   /* 5,4:1 sur sa teinte */
  --warning-ink:       #8A5A00;
  --warning-tint:      #FDF3DC;

  --danger:            #B42318;   /* 6,6:1 sur blanc */
  --danger-ink:        #B42318;
  --danger-tint:       #FDECEA;

  --info:              #2450D6;   /* 6,6:1 sur blanc */
  --info-ink:          #1C40AE;
  --info-tint:         #EEF2FD;

  /* ---------- Sequence data ----------------------------------------------
     Ordre fixe, jamais recycle. 5 series maximum par graphique.
     Au-dela : regroupement en « Autres ».
     Validee : bande de clarte, plancher de chroma, separation daltonisme,
     contraste sur fond blanc (3:1 minimum pour un trait ou une barre).
     ---------------------------------------------------------------------- */
  --data-1:            #5B4FCF;
  --data-2:            #CE5A44;
  --data-3:            #00918E;
  --data-4:            #B07A1C;   /* 3,5:1 : l'ambre du module tombait a 3,1 */
  --data-5:            #2A6FD0;
  --data-6:            #8B4E9C;   /* usage exceptionnel */
  --data-7:            #2F8558;   /* usage exceptionnel */

  --grid-line:         #EEF0F3;
  --axis-line:         #DDE0E6;

  /* ---------- Typographie ------------------------------------------------ */
  /*  Inter pour le texte, Inter Tight — la meme voix, plus serree — pour les
      titres. Onest ne sert plus qu'au mot « Stackly » du logo, en 700 : c'est
      un dessin de marque, pas une police de lecture. Fichiers dans
      public/vendor/, charges par base.html.twig. */
  --font-ui:      'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Inter Tight', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-brand:   'Onest', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --text-display-1:    68px;   /* hero du site public */
  --text-display-2:    34px;   /* chiffre-cle, montant en vedette */
  --text-section:      42px;   /* titre de section du site public */
  --text-title-1:      26px;   /* titre de page dans l'app */
  --text-title-2:      18px;   /* titre de carte */
  --text-title-3:      16px;   /* titre de carte compact */
  --text-body-lg:      17px;
  --text-body:         15px;   /* taille par defaut de l'interface */
  --text-sm:           13px;
  --text-xs:           12px;
  --text-label:        13px;   /* en-tete de colonne, sur-titre : casse normale */

  --lh-tight:          1.08;
  --lh-snug:           1.25;
  --lh-normal:         1.55;
  --lh-loose:          1.6;

  --track-display:     -0.025em;
  --track-title:       -0.015em;
  --track-body:        0;
  --track-label:       0;      /* plus de capitales espacees */

  --weight-regular:    400;
  --weight-medium:     500;
  --weight-semibold:   600;
  --weight-bold:       700;

  /* ---------- Espacements (base 4) --------------------------------------- */
  --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;
  --space-24:          96px;

  --gutter-page:       48px;   /* 16px en dessous de 768px */
  --gutter-section:    96px;   /* 56px en dessous de 768px */

  /* ---------- Rayons ------------------------------------------------------ */
  --radius-chip:       6px;
  --radius-field:      10px;
  --radius-button:     10px;
  --radius-card:       14px;
  --radius-card-lg:    18px;
  --radius-pill:       100px;
  /* La barre laterale est une carte flottante : un rayon a elle. */
  --radius-sidebar:    18px;

  /* ---------- Elevation --------------------------------------------------
     Trois niveaux, pas quatre. L'ombre dit « ceci flotte », jamais « c'est joli ».
     ---------------------------------------------------------------------- */
  --shadow-1:          0 1px 2px rgba(22, 24, 29, 0.06);
  --shadow-2:          0 1px 2px rgba(22, 24, 29, 0.06), 0 4px 12px rgba(22, 24, 29, 0.05);
  --shadow-3:          0 12px 32px rgba(22, 24, 29, 0.12);
  /*  Anneau de focus : 2 px d'accent decale de 2 px, lisible sur blanc comme
      sur gris (3:1 minimum pour tout accent). Defini sur <body> plus bas, la
      ou --accent prend la teinte de l'outil : pose ici, sur :root, il
      restait fige sur la teinte par defaut. */
  --focus-ring:        0 0 0 2px var(--surface), 0 0 0 4px var(--accent);
  --focus-ring-field:  0 0 0 3px var(--accent-tint);
  --overlay:           rgba(22, 24, 29, 0.42);

  /* ---------- Controles --------------------------------------------------- */
  --control-sm:        36px;
  --control-md:        40px;
  --control-lg:        44px;
  --field-height:      44px;
  --row-height:        52px;
  --row-height-dense:  44px;
  --touch-target:      44px;   /* plancher tactile sur mobile */

  /* ---------- Shell -------------------------------------------------------- */
  /*  Maquette « Menu » : carte de 244 px (76 px repliee), posee a 12 px
      du haut, de la gauche et du bas de la fenetre. */
  --sidebar-width:     244px;
  --sidebar-rail:      76px;
  --sidebar-inset:     12px;
  --topbar-height:     72px;

  /*  Zone de contenu, marges des maquettes V2 : 28 px en haut, 24 px apres
      la carte du menu, 32 px a droite. Largeur utile plafonnee a 1 440 px,
      les maquettes n'en prevoyant pas : au-dela, le contenu se centre. */
  --content-pad-top:   28px;
  --content-pad-left:  24px;
  --content-pad-right: 32px;
  --content-max:       1440px;
  /* Ecart vertical entre les blocs d'un ecran d'outil (tete, files, liste). */
  --stack-gap:         18px;

  /* ---------- Mouvement ---------------------------------------------------- */
  --ease:              cubic-bezier(0.2, 0, 0.1, 1);
  --duration-fast:     120ms;
  --duration:          180ms;
  --duration-slow:     260ms;

  /* ---------- Plans ---------------------------------------------------------
     L'echelle manquait, et chaque module choisissait son nombre : les modales
     de l'inventaire montaient a 1200 et 1300, celles du budget a 2000, l'aide
     et le tableau de bord a 9999 — tandis que la confirmation du systeme
     restait a 1060.

     Consequence, sur « Vider tout le stock » : la confirmation s'affichait
     SOUS la modale qui l'avait ouverte. Le bouton « Vider le stock » etait
     visible mais pas cliquable — le clic tombait sur le champ de saisie
     derriere. Rien ne se passait, et rien ne le disait.

     La confirmation est le dernier ecran avant un geste irreversible : elle
     passe devant tout, y compris une modale applicative. D'ou son plan propre,
     au-dessus du 9999 que deux feuilles utilisent encore.
     ------------------------------------------------------------------------ */
  --z-sticky:          1000;
  --z-overlay:         1040;   /* fonds sombres, tiroirs */
  --z-modal:           1200;   /* modales applicatives */
  /*  Le message doit se lire PAR-DESSUS la modale qui l'a declenche. Il valait
      1080, sous un commentaire qui pretendait deja cela : il passait donc
      derriere les modales (1200), et derriere deux fonds de modale restes a
      9999 dans support.css et dashboard-index.css. */
  --z-toast:           10000;
  --z-confirm:         10100;  /* confirmation systeme : devant tout, message compris */
}

/* Teinte du module courant, posee par <body data-module="..."> ------------- */
body[data-module="documents"] { --accent: var(--mod-documents); --accent-ink: var(--mod-documents-ink); --accent-tint: var(--mod-documents-tint); --accent-tint-2: var(--mod-documents-tint-2); --accent-solid: var(--mod-documents-solid); }
body[data-module="stock"]     { --accent: var(--mod-stock); --accent-ink: var(--mod-stock-ink); --accent-tint: var(--mod-stock-tint); --accent-tint-2: var(--mod-stock-tint-2); --accent-solid: var(--mod-stock-solid); }
body[data-module="crm"]       { --accent: var(--mod-crm); --accent-ink: var(--mod-crm-ink); --accent-tint: var(--mod-crm-tint); --accent-tint-2: var(--mod-crm-tint-2); --accent-solid: var(--mod-crm-solid); }
body[data-module="planning"]  { --accent: var(--mod-planning); --accent-ink: var(--mod-planning-ink); --accent-tint: var(--mod-planning-tint); --accent-tint-2: var(--mod-planning-tint-2); --accent-solid: var(--mod-planning-solid); }
body[data-module="finance"]   { --accent: var(--mod-finance); --accent-ink: var(--mod-finance-ink); --accent-tint: var(--mod-finance-tint); --accent-tint-2: var(--mod-finance-tint-2); --accent-solid: var(--mod-finance-solid); }
body[data-module="expenses"]  { --accent: var(--mod-expenses); --accent-ink: var(--mod-expenses-ink); --accent-tint: var(--mod-expenses-tint); --accent-tint-2: var(--mod-expenses-tint-2); --accent-solid: var(--mod-expenses-solid); }
body[data-module="assistant"] { --accent: var(--mod-assistant); --accent-ink: var(--mod-assistant-ink); --accent-tint: var(--mod-assistant-tint); --accent-tint-2: var(--mod-assistant-tint-2); --accent-solid: var(--mod-assistant-solid); }

/* Ecrans hors module (tableau de bord, profil, offres, admin) : accent neutre,
   le bleu de la direction Crenolia. Blanc dessus : 6,6:1. ------------------ */
body[data-module="none"]      { --accent: #2450D6; --accent-ink: #1C40AE; --accent-tint: #EEF2FD; --accent-tint-2: #F5F7FE; --accent-solid: #2450D6; }

/* Jetons derives de --accent : recalcules sur <body>, ou la teinte est connue. */
body {
  --focus-ring:       0 0 0 2px var(--surface), 0 0 0 4px var(--accent);
  --focus-ring-field: 0 0 0 3px var(--accent-tint);
}

@media (max-width: 768px) {
  :root {
    --gutter-page:    16px;
    --gutter-section: 56px;
    --text-display-1: 40px;
    --text-section:   30px;
    --text-title-1:   22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration:      0ms;
    --duration-slow: 0ms;
  }
}