/* 01-variables-reset.css — lignes 1-54 de l'ancien style.css unique, contenu inchangé */

:root{

--primary:#2563eb;
--primary-dark:#1d4ed8;
--secondary:#06b6d4;

--success:#22c55e;
--warning:#f59e0b;
--danger:#ef4444;

/* V3, Cycle 25 — mesuré dans un navigateur, pas choisi à l'œil.
   `--danger` sert à la fois de fond (bouton plein, texte blanc) et de
   texte (bouton contour, fond clair). Un seul rouge ne peut pas tenir
   les deux : blanc sur #ef4444 donne 3,76:1, sous le seuil AA de 4,5.
     --danger-fond   : blanc dessus = 4,83:1
     --danger-texte  : sur fond clair = 6,47:1 */
--danger-fond:#dc2626;
--danger-texte:#b91c1c;

--background:#f4f7fb;
--surface:#ffffff;

--text:#111827;
/* V3, Cycle 25 : #6b7280 tenait sur du blanc (4,83:1) mais tombait à
   4,41:1 dès qu'il posait sur une surface teintée — le bandeau du
   Dashboard, les blocs d'intercontrat. Assombri juste ce qu'il faut :
   5,45:1 sur --surface-accent, et toujours « clair » à l'œil. */
--text-light:#5b6472;

/* Texte d'exemple dans un champ vide. Volontairement plus effacé que
   --text-light : un placeholder qui ressort autant qu'une valeur saisie
   se lit comme une valeur saisie. */
--text-placeholder:#9ca3af;

--border:#e5e7eb;

/* Surface légèrement contrastée : champs de saisie, zones enfoncées. */
--surface-input:#ffffff;

/* Surfaces secondaires. Elles existaient déjà, mais en dur dans vingt
   fichiers : bulles de chat, en-têtes de tableau, encarts de statistiques.
   En dur, elles restaient claires en mode sombre pendant que le texte
   passait en blanc — d'où des blocs illisibles. */
--surface-muted:#f4f7fb;    /* encarts, bulles, en-têtes de tableau */

/* Verrouillage de l'application avant connexion. Le voile est translucide :
   c'est le flou d'arrière-plan qui rend l'interface illisible, pas l'opacité.
   Les deux vont ensemble — un voile trop transparent laisserait deviner, un
   voile opaque annulerait l'effet. */
--overlay-auth:rgba(244,247,251,0.20);
--blur-auth:6px;
--surface-accent:#eef5ff;   /* sélection, mise en avant discrète */

/* V3, Cycle 133 — la famille des trois encarts d'état.
   `--surface-warning` existait seule et servait déjà les deux thèmes ;
   ses deux sœurs étaient écrites en dur dans les feuilles, donc claires
   la nuit. Et l'ENCRE des trois était littérale : `.warning` posait
   #92400e sur un fond qui devenait #3a2f12 — du brun sur du brun,
   1,86:1, une notification qui s'affiche et ne se lit pas.
   Fond et encre vont par paire : ils sont désormais nommés par paire.
   Rapports mesurés, thème clair : succès 6,49 — info 5,49 — avert. 6,37. */
--surface-success:#dcfce7;
--texte-success:#166534;
--surface-info:#dbeafe;
--texte-info:#1d4ed8;
--surface-warning:#fef3c7;
--texte-warning:#92400e;

/* L'encre posée sur un aplat d'accent. Elle n'était définie QUE dans le
   thème sombre — un `var()` qui ne résout rien de jour rend la propriété
   invalide et fait retomber la couleur sur ce qui est hérité, sans
   erreur et sans trace. Le piège est décrit dans `28-simulation-avancee`,
   où il avait fait tomber l'onglet actif à 3,43:1. Défini des deux côtés,
   il devient employable partout. Blanc sur --primary : 5,17:1. */
--encre-bouton-plein:#ffffff;
--ombre-panneau:0 1px 3px rgba(17,24,39,.06);

/* ---------------------------------------------------------------
   DESIGN TOKENS — RAYONS
   Échelle officielle. Toute nouvelle règle doit utiliser un de ces
   tokens plutôt qu'une valeur en px.
   Auparavant 12 valeurs différentes cohabitaient (8/10/12/14/15/16/
   18/20/22/28/50px/50%) sans logique : des composants de même nature
   avaient des arrondis différents.
--------------------------------------------------------------- */
--radius-xs:8px;      /* petits éléments : skeleton, indicateurs */
--radius-sm:12px;     /* contrôles compacts : select de carte */
--radius-md:16px;     /* champs, boutons, icônes carrées */
--radius-lg:20px;     /* cartes, bulles de chat, notifications */
--radius-xl:24px;     /* panneaux, bandeau d'accueil */
--radius-full:999px;  /* pilules : badges, barres de progression, interrupteurs */
--radius-circle:50%;  /* avatars, spinner */

/* Conservé pour compatibilité : --radius était utilisé par la modale.
   Aligné sur --radius-lg pour rester cohérent avec les cartes. */
--radius:var(--radius-lg);

/* ---------------------------------------------------------------
   DESIGN TOKENS — ESPACEMENTS
   Échelle de type 4/8/12/16/20/24/32/40. Auparavant padding, margin
   et gap prenaient 14, 15, 18, 22, 25, 35, 45px... sans échelle.
--------------------------------------------------------------- */
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:20px;
--space-6:24px;
--space-8:32px;
--space-10:40px;

/* ---------------------------------------------------------------
   DESIGN TOKENS — BADGES (couples fond / texte)
   Tokens SÉMANTIQUES (intention), pas nominatifs : un même couple sert
   à plusieurs domaines. « payé », « terminé » et « client actif »
   partagent la même intention de succès et donc le même token.
   Les valeurs reprennent celles déjà utilisées par les badges de
   mission et les notifications, pour rester dans la charte existante.
--------------------------------------------------------------- */
--badge-neutre-fond:#e5e7eb;
--badge-neutre-texte:#374151;

--badge-info-fond:#dbeafe;      /* en cours, envoyée */
--badge-info-texte:#1d4ed8;

--badge-succes-fond:#dcfce7;    /* payée, terminée, client actif */
--badge-succes-texte:#166534;

--badge-attente-fond:#fef3c7;   /* brouillon, en attente de paiement, prospect */
--badge-attente-texte:#92400e;

--badge-danger-fond:#fee2e2;    /* annulée, suspendue */
--badge-danger-texte:#b91c1c;

--shadow:
0 10px 25px rgba(0,0,0,.08);

--transition:.25s ease;

}

*{

margin:0;

padding:0;

box-sizing:border-box;

/* Une pile système derrière Inter, et pas un simple `sans-serif`.
   Deux raisons : sur la plupart des systèmes, `sans-serif` seul donne une
   police nettement moins soignée ; et ses métriques sont éloignées de
   celles d'Inter, si bien que le texte SAUTE visiblement quand la police
   arrive. Les polices système sont proches, l'attente devient invisible. */
font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;

}

html{

scroll-behavior:smooth;

}

body{

background:var(--background);

color:var(--text);

overflow-x:hidden;

}

/* ---------------------------------------------------------------
   THÈME SOMBRE — V3, Cycle 7
   Le mode sombre redéfinit les *tokens*, il ne repeint pas les
   composants un par un. C'était le défaut de la version précédente :
   trois règles peignaient .panel, .card et les champs en couleurs
   codées en dur, mais --text-light (#6b7280) et --border (#e5e7eb)
   gardaient leurs valeurs du thème clair. Résultat : un gris de
   texte secondaire presque illisible sur fond sombre, et des bordures
   claires qui tranchaient violemment.

   En redéfinissant les tokens ici, tout composant qui les respecte
   devient correct automatiquement — y compris ceux qui n'existent
   pas encore.

   Choix de couleurs : bleu nuit plutôt que noir pur (moins agressif,
   moins de halo sur les écrans OLED), texte blanc cassé plutôt que
   blanc pur (le contraste maximal fatigue à la lecture prolongée),
   et couleurs d'accent éclaircies — le bleu primaire du thème clair
   (#2563eb) est trop sombre pour rester lisible sur fond nuit.
--------------------------------------------------------------- */
body.dark{

/* Fonds : trois niveaux de profondeur au lieu de deux. */
--background:#0b1220;
--surface:#161f32;
--surface-input:#1e293f;

/* Texte : blanc cassé, et un gris secondaire réellement lisible
   (l'ancien #6b7280 sur #1e293b tombait sous le seuil de contraste). */
--text:#e6edf7;
--text-light:#9fb0c9;

/* En mode sombre, le piège est le même dans l'autre sens : un gris trop
   clair sur fond nuit se lit comme une saisie réelle. */
--text-placeholder:#5d6b85;

/* Bordure discrète mais visible, au lieu du gris clair du thème jour. */
--border:#2b3752;

/* Accents éclaircis pour rester lisibles sur fond sombre. */
--primary:#60a5fa;
--primary-dark:#3b82f6;
--secondary:#22d3ee;
--success:#4ade80;
--warning:#fbbf24;
--danger:#f87171;

/* Le fond des boutons pleins suit la même logique qu'en thème clair —
   il doit porter du texte lisible. En nuit, les accents sont ÉCLAIRCIS
   pour se détacher du fond : blanc dessus devient illisible. */
--danger-fond:#f87171;
--danger-texte:#fca5a5;

/* L'encre des boutons pleins, en thème sombre — V3, Cycle 25.
   Mesuré, pas choisi : blanc sur --primary (#60a5fa) donne 2,54:1,
   très en dessous du seuil AA de 4,5. La même couleur bleue avec de
   l'encre sombre donne 7,36:1. C'est le sens de lecture habituel des
   thèmes nuit — un accent clair porte du texte foncé, jamais l'inverse.
   Trente-neuf éléments étaient concernés, dont tous les boutons
   d'action du produit. */
--encre-bouton-plein:#0b1220;

/* L'ombre portée ne se voit pas sur fond sombre : on la remplace par
   un liseré, sinon les panneaux flottent sans limite visible. */
--ombre-panneau:0 0 0 1px rgba(255,255,255,.04);

/* Surfaces secondaires, version nuit. Sans elles, une bulle de chat ou un
   en-tête de tableau restait clair avec du texte blanc dessus. */
--surface-muted:#1c2740;
--overlay-auth:rgba(11,18,32,0.20);
--surface-accent:#1b2c4d;

/* Les trois encarts d'état, thème nuit — V3, Cycle 133.
   Fonds très assombris et désaturés, encres franchement éclaircies :
   c'est le sens de lecture d'un thème sombre, et l'inverse exact du
   thème clair. Rapports mesurés : succès 10,19 — info 8,26 — avert. 9,13. */
--surface-success:#12301f;
--texte-success:#86efac;
--surface-info:#16283f;
--texte-info:#93c5fd;
--surface-warning:#3a2f12;
--texte-warning:#fcd34d;

color-scheme:dark;

}