/* ===========================================================================
   MSB — THÈME : le SEUL fichier à modifier pour changer l'apparence.
   ---------------------------------------------------------------------------
   Tout est en variables CSS. `app.css` ne contient AUCUNE valeur en dur : il
   ne fait que consommer ces variables. Changer une ligne ici se répercute
   partout, y compris dans les graphiques.

   Trois façons de s'en servir :
     1. éditer ce fichier à la main ;
     2. ouvrir « 00-design.html » pour régler au curseur puis coller le résultat ;
     3. plus tard, côté PHP : servir ce bloc `:root` depuis une ROUTE (par
        exemple /assets/theme-utilisateur.css, engendrée puis mise en cache),
        pour un thème par utilisateur — sans jamais dupliquer le reste.
        ⚠️ Ce point recommandait « surcharger quelques variables dans un
        <style> en ligne ». C'ÉTAIT FAUX, et dangereux à laisser écrit : la CSP
        du projet pose `style-src 'self'` sans `unsafe-inline` (lib/headers.php),
        donc un <style> en ligne serait purement et simplement BLOQUÉ par le
        navigateur. Une feuille servie par notre domaine, elle, passe.

   Ordre de lecture : PALETTE CLAIRE → PALETTE SOMBRE → FORMES → TYPO → DENSITÉ.
   =========================================================================== */

/* ===========================================================================
   POLICES, HÉBERGÉES CHEZ NOUS — aucun appel à Google au runtime.
   ---------------------------------------------------------------------------
   Instrument Sans (variable, toutes graisses dans UN fichier) porte toute
   l'interface ; Newsreader, en romain et italique, sert les notes éditoriales.
   Les .woff2 vivent dans /assets/fonts et sont servis par notre domaine :
   `font-src 'self'` (lib/headers.php) suffit, la CSP reste stricte. Sous-ensemble
   LATIN uniquement — il couvre le français (accents, œ, «», €, tirets).
   Récupérées une fois depuis fonts.gstatic.com ; toutes deux en licence SIL OFL,
   donc redistribuables. `swap` : le texte s'affiche tout de suite en repli, puis
   bascule quand la police arrive — jamais de page blanche. */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;                 /* variable : une seule ressource */
  font-display: swap;
  src: url(/assets/fonts/instrument-sans-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/newsreader-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/newsreader-italic-latin.woff2) format('woff2');
}

:root {

  /* ==== 1. COULEUR D'ACCENT ==============================================
     La seule couleur « de marque ». Tout le reste (boutons, liens, onglet
     actif, courbe principale, item de menu actif) en découle. */
  --accent:        #26265e;   /* boutons, liens, courbe principale */
  --accent-ink:    #34317f;   /* accent survolé / pressé */
  --accent-soft:   #f0eefb;   /* fonds teintés : menu actif, pastilles, encarts */
  /* ⚠️ LE TEXTE QUI SE POSE SUR L'ACCENT. En clair, l'accent est un indigo
     PROFOND → texte blanc. En sombre, il devient un lilas CLAIR → il faut du
     texte foncé, sinon le blanc devient illisible sur le bouton. Ce jeton
     bascule ; « color: #fff » en dur ne le pourrait pas. */
  --accent-text:   #ffffff;

  /* ==== 2. COULEURS DE SENS ==============================================
     Ne jamais utiliser l'accent pour un gain ou une perte : le sens doit
     rester lisible même si la marque change de couleur. */
  --pos:           #0b6b4f;   /* plus-value, hausse */
  --pos-soft:      #e3f0ea;
  --neg:           #9c2a3f;   /* moins-value, baisse */
  --neg-soft:      #f6e9ec;
  --warn:          #8a5a12;   /* avertissement, donnée incomplète */
  --warn-soft:     #fbf2e2;

  /* ==== 3. NEUTRES (fonds, textes, traits) ==============================
     Du plus clair au plus foncé. `--ink` sert aussi de fond aux KPI « hero ». */
  /* ⚠️ L'ÉCHELLE DE VALEURS. Quatre surfaces, quatre rôles, à ne pas confondre :
       --surface    le blanc des cartes ;
       --surface-2  les surfaces INTERNES douces (pied de tableau, encart
                    d'explication, ligne dépliée, barre « voir plus ») ;
       --head       le bandeau d'en-tête de carte, FRANC — c'est lui qui porte
                    la couleur de l'interface, voir plus bas ;
       --bg         le sol de la page.

     ⚠️ LE FOND CLAIR EST UN CHOIX, PAS UN OUBLI — arbitré le 25/08/2026.
     Il ne donne que 1,08:1 contre le blanc des cartes : prises isolément, les
     cartes ne s'en détachent pas. La maquette « atelier v3 » corrigeait ce
     point en descendant à #e9eaf2 (1,20:1), et les deux valeurs ont été mises
     côte à côte sur la galerie de composants.
     Le Maître a retenu le fond CLAIR, et le système le permet parce que la
     carte n'est plus délimitée par le contraste du sol : elle l'est par son
     BANDEAU franc (--head) et par son filet (--line). La couleur vient du
     bandeau et de la barre latérale en panneau, pas du fond.
     Conséquence à connaître : si un jour on retire les bandeaux, ou qu'on pose
     une carte SANS bandeau sur une page entière, elle flottera. Dans ce cas,
     descendre --bg plutôt que de bricoler une ombre. */
  --bg:            #f5f6f9;   /* fond de page — clair, assumé (voir ci-dessus) */
  --surface:       #ffffff;   /* fond des cartes, barre latérale */
  --surface-2:     #e7e5f8;   /* surfaces internes douces : pieds de tableau, encarts */
  --ink:           #17171f;   /* titres, chiffres importants */
  --text:          #45454f;   /* texte courant */
  --muted:         #5b5b6f;   /* texte secondaire */
  --faint:         #6b6b7e;   /* libellés d'entêtes, mentions */
  --line:          #d5d2e6;   /* bordures des cartes */
  --line-soft:     #e6e3f2;   /* séparateurs de lignes de tableau */
  --line-strong:   #c7c4dc;   /* bordures de champs et boutons */
  --chip-bg:       #e6e3f4;   /* fond des pastilles neutres */
  --row-hover:     #edeaf7;   /* survol d'une ligne de tableau */

  /* ==== 3 ter. LE BANDEAU D'EN-TÊTE DE CARTE ============================
     LE principal porteur de couleur de l'interface. Une carte n'est pas un
     rectangle blanc de plus : elle s'annonce par un bandeau teinté FRANC qui
     porte son micro-libellé. C'est ce qui manquait — la palette avait des
     teintes, mais aucune surface assez marquée pour qu'on les voie.
     Il est volontairement plus soutenu que --surface-2 : si les deux se
     ressemblent, le bandeau cesse d'être un bandeau. --head-ink est le texte
     qui s'y pose, et il BASCULE en thème sombre comme --accent-text. */
  --head:          #c8c6e8;   /* bandeau d'en-tête de carte, franc */
  --head-ink:      #26265e;   /* micro-libellé et note posés sur le bandeau */

  /* ==== 3 bis. BLOC MIS EN AVANT =========================================
     Le KPI principal et la colonne de gauche des pages de connexion sont à
     contre-jour du reste. Ils ont leurs PROPRES jetons : réutiliser --ink
     casserait en thème sombre, où --ink devient presque blanc. */
  --hero-bg:       #26265e;   /* indigo profond, fond du bloc à contre-jour */
  --hero-text:     #ffffff;   /* le chiffre, le titre */
  --hero-label:    #bcb9ea;   /* le libellé au-dessus */
  --hero-sub:      #a29fcb;   /* la mention en dessous */

  /* ==== 4. PALETTE DES GRAPHIQUES =======================================
     Série catégorielle des donuts et des séries multiples. Distinguables
     entre elles ET en noir et blanc. `--c-bench` est réservé à l'indice de
     référence : il ne doit ressembler à aucune couleur de la série. */
  --c1:            #26265e;   /* actions */
  --c2:            #7c79c9;   /* ETF */
  --c3:            #b7b4ee;   /* fonds euros / UC */
  --c4:            #c0863c;   /* crypto */
  --c5:            #b0506a;   /* obligations */
  --c6:            #4a8fa0;   /* autre */
  --c-bench:       #3aa6b9;   /* benchmark (S&P 500) */
  --c-grid:        var(--line-soft);          /* lignes de repère */
  --c-area:        rgba(38, 38, 94, .12);   /* aplat sous la courbe */

  /* ==== 4 bis. PASTILLES DE CATÉGORIE : REMPLISSAGE ET ENCRE SÉPARÉS ======
     ⚠️ DÉFAUT DE FABRICATION CORRIGÉ LE 26/08/2026, mesuré, pas supposé.
     Les pastilles (.badge, .kind) prenaient le MÊME jeton --cN pour le fond
     ET pour le texte, le fond étant un color-mix transparent. Deux défauts
     d'un coup :
       1. le texte est par construction proche de son propre fond —
          .badge.av tombait à 1,81:1, SOUS le 1,84:1 qui a fait bannir
          `opacity` dans ce projet ;
       2. un fond transparent se compose sur ce qu'il y a DERRIÈRE, donc le
          rapport CHANGEAIT selon la surface : pire au survol d'une ligne de
          tableau, c'est-à-dire au moment précis où l'œil s'y pose.
     D'où deux jetons par catégorie : --cN-soft est un fond OPAQUE (le rapport
     ne dépend plus de rien d'autre) et --cN-ink une encre choisie POUR ce
     fond. Les deux basculent en thème sombre. --cN reste réservé aux
     graphiques, où il est un aplat et jamais un texte.
     Rapports mesurés en clair : c1 10,9:1 · c2 8,2:1 · c3 6,7:1 · c4 5,8:1 ·
     c5 7,5:1 · c6 6,5:1. Tous au-dessus des 4,5:1 de WCAG AA. */
  --c1-soft:       #e4e3f3;   --c1-ink:  #26265e;   /* actions · PEA · achat */
  --c2-soft:       #e9e8f8;   --c2-ink:  #3a378f;   /* ETF · CTO */
  --c3-soft:       #eeedfb;   --c3-ink:  #4a47a3;   /* fonds euros · AV */
  --c4-soft:       #f6ecdc;   --c4-ink:  #7a5310;   /* crypto · échange */
  --c5-soft:       #f7e6ea;   --c5-ink:  #8a2038;   /* obligations · vente */
  --c6-soft:       #ddeef2;   --c6-ink:  #1f5a68;   /* autre · versement */

  /* ==== 5. FORMES ========================================================
     Mettre --radius à 0 donne un rendu carré/austère ; 22px un rendu très
     arrondi. --radius-pill sert aux pastilles, ne pas y toucher. */
  --radius:        16px;      /* cartes, KPI */
  --radius-sm:     9px;       /* champs, boutons, petits blocs */
  --radius-pill:   999px;     /* pastilles */
  --border:        1px;       /* épaisseur des bordures */
  --shadow:        0 1px 2px rgba(20, 22, 30, .04), 0 1px 3px rgba(20, 22, 30, .03);
  --shadow-lg:     0 10px 30px rgba(20, 22, 30, .08), 0 2px 6px rgba(20, 22, 30, .04);
  --focus-ring:    0 0 0 3px var(--accent-soft);   /* halo de focus des champs */
  /* Le voile d'une modale. Assez opaque pour que le fond cesse d'être lisible —
     sinon deux interfaces se disputent l'attention — et assez transparent pour
     qu'on sache d'où l'on vient. */
  --voile:         rgba(23, 23, 31, .48);

  /* ==== 6. TYPOGRAPHIE ===================================================
     Instrument Sans porte l'interface, hébergée chez nous (voir les @font-face
     en tête de fichier) ; la pile système la relaie le temps qu'elle charge, et
     pour tout caractère hors du sous-ensemble latin. Newsreader, en serif, est
     réservée aux notes éditoriales — on ne l'applique jamais globalement. */
  --font-sans:     'Instrument Sans', -apple-system, 'Segoe UI', Roboto, system-ui, sans-serif;
  --font-serif:    'Newsreader', Georgia, 'Times New Roman', serif;
  --font-mono:     var(--font-sans);   /* les chiffres restent en chasse tabulaire */

  --fs-base:       14.5px;    /* texte courant — tout le reste s'y rapporte */
  --fs-label:      13.5px;    /* libellé d'une ligne de liste, nom de portefeuille */
  --fs-small:      12.5px;    /* mentions, aides de saisie */
  --fs-mini:       11.5px;    /* second chiffre d'une cellule (le % sous le montant) */
  --fs-micro:      11px;      /* entêtes de tableau en capitales, sous-lignes */
  --fs-nano:       10px;      /* pastille de nature d'opération — le plus petit admis */
  --fs-h2:         15px;      /* titres de carte */
  --fs-page:       17px;      /* titre de page dans la barre du haut */
  --fs-kpi:        23px;      /* chiffre d'un KPI */
  --fs-kpi-hero:   26px;      /* chiffre du KPI principal */
  --fs-hero:       46px;      /* titre de la page d'accueil publique */

  --lh-base:       1.55;      /* interligne du texte courant */
  --w-regular:     400;       /* pour ANNULER une graisse héritée, sans « 400 » en dur */
  --w-medium:      500;
  --w-semi:        600;
  --w-strong:      650;
  --w-bold:        700;
  --tracking:      -.018em;   /* resserrement des titres */
  --tracking-hero: -.032em;   /* resserrement du grand titre */

  /* ==== 7. DENSITÉ =======================================================
     Le levier le plus efficace pour changer la sensation de l'interface :
     baisser ces valeurs = interface compacte « pro » ; les monter = aéré. */
  --gap:           18px;      /* espace entre deux cartes */
  --gap-sm:        12px;      /* espace entre deux champs */
  --card-pad:      22px;      /* marge intérieure des cartes */
  --kpi-pad-y:     17px;
  --kpi-pad-x:     19px;
  --row-pad-y:     12px;      /* hauteur des lignes de tableau */
  --row-pad-x:     18px;
  --field-pad-y:   9px;       /* hauteur des champs et boutons */
  --field-pad-x:   12px;

  --sidebar-w:     236px;     /* largeur du menu de gauche */
  --topbar-h:      64px;      /* hauteur de la barre du haut */
  --content-max:   1420px;    /* largeur maximale du contenu applicatif */
  /* 30px → 22px le 28/08/2026, demande du Maître : le tableau des positions
     défilait horizontalement pour quelques pixels perdus en marge. */
  --content-pad-x: 22px;
  --page-max:      1140px;    /* largeur maximale des pages publiques */
  /* La COLONNE ÉTROITE : réglages (Mon compte) et pages hors coquille (accueil
     provisoire, erreurs). 780px vivait en dur à DEUX endroits d'app.css, qui ne
     seraient restés synchrones que par hasard — constat d'audit du 27/08/2026. */
  --colonne-etroite: 780px;

  --speed:         .12s;      /* durée des transitions (0 pour tout couper) */
}

/* ===========================================================================
   PALETTE SOMBRE
   ---------------------------------------------------------------------------
   On ne redéfinit QUE ce qui change : couleurs et ombres. Formes, typo et
   densité sont communes aux deux thèmes — inutile de les répéter.
   Les accents sont éclaircis : une couleur vive sur fond sombre paraît plus
   saturée qu'elle ne l'est, et perd en lisibilité si on la garde identique.
   =========================================================================== */

html[data-theme="dark"] {
  --accent:        #b3b0f0;
  --accent-ink:    #cbc9f7;
  --accent-soft:   #262447;
  --accent-text:   #17171f;   /* texte foncé sur l'accent lilas clair — voir le clair */

  --pos:           #3ec48f;
  --pos-soft:      #16302a;
  --neg:           #f0808f;
  --neg-soft:      #342124;
  --warn:          #d8a53a;
  --warn-soft:     #302818;

  --bg:            #121220;
  --surface:       #1b1b28;
  --surface-2:     #232333;
  --ink:           #f2f2f8;
  --text:          #c6c6d4;
  --muted:         #9192a4;
  --faint:         #9c9cae;
  --line:          #2c2c3c;
  --line-soft:     #242433;
  --line-strong:   #3c3c50;
  --chip-bg:       #262636;
  --row-hover:     #21212f;

  /* Le bandeau ne peut plus être « plus foncé » sur fond sombre : il se
     détache par une teinte violette et non par le contraste. Son texte
     BASCULE au lilas clair — l'indigo du thème clair y serait illisible.
     Mesuré le 26/08/2026 : bandeau/carte 1,37:1, libellé/bandeau 7,80:1.
     (Le 25/08 ce commentaire annonçait 8,36:1 : c'était le chiffre du thème
     CLAIR, recopié ici sans être remesuré. Un commentaire qui donne un
     rapport doit venir d'une mesure, sinon il ment avec autorité.) */
  --head:          #322f5c;
  --head-ink:      #cbc9f7;

  /* Sur fond sombre, un bloc « à contre-jour » ne peut plus être plus foncé :
     on le fait ressortir par une teinte bleutée plutôt que par le contraste. */
  --hero-bg:       #2a2a55;
  --hero-text:     #ffffff;
  --hero-label:    #b6b3ec;
  --hero-sub:      #9694c0;

  --c1:            #b3b0f0;
  --c2:            #8f8ce0;
  --c3:            #cbc9f5;
  --c4:            #d9a24e;
  --c5:            #d98098;
  --c6:            #6ab0c4;
  --c-bench:       #58c3d6;
  --c-area:        rgba(179, 176, 240, .16);

  /* Les pastilles s'inversent : fond SOMBRE, encre CLAIRE. Reprendre les
     valeurs claires ici donnerait du texte foncé sur fond foncé.
     Rapports mesurés en sombre : c1 6,61:1 · c2 6,84:1 · c3 7,54:1 ·
     c4 6,80:1 · c5 7,41:1 · c6 6,93:1. */
  --c1-soft:       #2b2b52;   --c1-ink:  #b3b0f0;
  --c2-soft:       #2e2c55;   --c2-ink:  #b9b6ee;
  --c3-soft:       #33325c;   --c3-ink:  #cbc9f5;
  --c4-soft:       #3a2d16;   --c4-ink:  #e0b166;
  --c5-soft:       #3a2028;   --c5-ink:  #eda3b4;
  --c6-soft:       #17323a;   --c6-ink:  #7fc4d6;

  --shadow:        0 1px 2px rgba(0, 0, 0, .3);
  --shadow-lg:     0 12px 34px rgba(0, 0, 0, .45);
  /* Plus dense en sombre : un voile clair sur un fond déjà sombre ne voilerait
     rien, et la carte de la modale ne se détacherait plus. */
  --voile:         rgba(6, 6, 12, .66);
}

/* ===========================================================================
   VARIANTES PRÊTES À L'EMPLOI
   ---------------------------------------------------------------------------
   Décommenter un bloc pour l'essayer, ou s'en inspirer. Elles ne changent que
   l'accent et la série de graphiques : c'est suffisant pour changer d'identité.
   =========================================================================== */

/* --- Vert « finance sobre » ---
:root {
  --accent: #0e8a5f; --accent-ink: #0a6d4a; --accent-soft: #e6f4ee;
  --c1: #0e8a5f; --c2: #4a7fb5; --c3: #b8860b; --c4: #9c5fb5; --c-area: rgba(14,138,95,.18);
}
*/

/* --- Ardoise « institutionnel », interface compacte ---
:root {
  --accent: #34495e; --accent-ink: #22303d; --accent-soft: #eceff2;
  --radius: 8px; --radius-sm: 5px; --card-pad: 16px; --row-pad-y: 9px; --gap: 12px;
}
*/