/* ============================================================
   BANC — jetons de design
   Une seule source de vérité pour couleurs, typo, rythme, lumière.

   La palette est celle de daniel-bal.fr (apps/web/src/index.css) :
   fond slate-900, accents sky / orange / emerald, DM Sans. Les rôles
   internes n'ont pas bougé — `--amber` reste la couleur d'action et
   `--cyan` la couleur de repère — seules leurs valeurs ont changé.
   C'est ce qui permet de rhabiller 86 Ko de règles sans en toucher
   une seule : aucune couleur n'est écrite en dur hors de ce fichier.

   Deux écarts assumés par rapport au portfolio :
   • IBM Plex Mono est conservée. Le portfolio n'a pas de monospace
     parce qu'il n'a pas de code à montrer ; ici tout en est fait.
   • `--on-accent` reste sombre. Le portfolio pose du blanc sur son
     bleu (2,9:1) ; sur un aplat orange ou ciel, l'encre sombre tient
     6,8:1. On ne recopie pas un défaut d'accessibilité.

   Les accents sont déclarés deux fois : en triplet RVB (`--x-rgb`)
   et en couleur prête à l'emploi (`--x`). Le triplet existe pour que
   les autres feuilles puissent composer une transparence
   (`rgba(var(--amber-rgb),.08)`) sans jamais réécrire une valeur
   hexadécimale hors de ce fichier.
   ============================================================ */
:root{
  /* --- triplets de base --- */
  --ink-rgb:15,23,42;        /* slate-900, le fond du portfolio */
  --panel-rgb:19,29,51;      /* --card du portfolio */
  --panel2-rgb:27,41,66;
  --deep-rgb:11,17,32;
  --line-rgb:51,65,85;       /* slate-700, --border du portfolio */

  --amber-rgb:249,115,22;    /* orange-500, --secondary */
  --cyan-rgb:14,165,233;     /* sky-500,    --primary   */
  --red-rgb:240,82,82;       /* red-500 éclairci : #EF4444 tombait à 4,46 */
  --green-rgb:16,185,129;    /* emerald-500,--accent    */
  --violet-rgb:167,139,250;  /* violet-400. La révision espacée n'a pas
                                d'équivalent au portfolio ; cette teinte
                                appartient à la même famille, et la nuance
                                500 ne tenait que 3,96 sur le panneau. */

  --paper-rgb:248,250,252;
  --muted-rgb:160,175,192;
  /* Le plus effacé des trois gris, mais pas illisible : il tient 3:1
     sur les trois surfaces sombres, y compris `--panel2` où se posent
     les numéros de ligne et les étiquettes d'appariement. */
  --faint-rgb:124,140,166;

  --white-rgb:255,255,255;
  --black-rgb:0,0,0;

  /* --- surfaces --- */
  --ink:#0F172A;
  --panel:#131D33;
  --panel2:#1B2942;
  --deep:#0B1120;          /* fond des blocs de code */
  --line:#334155;

  /* Reliefs : le haut d'une surface reçoit toujours un peu plus de
     lumière que le bas. C'est ce dégradé d'un point qui suffit à
     donner de la matière sans virer au plastique. */
  --panel-hi:#18243D;
  --panel2-hi:#21304D;
  --deep-hi:#101A2E;
  --line-hi:#44557A;

  /* --- accents --- */
  --amber:#F97316;
  --amber-hi:#FB923C;      /* haut de dégradé des surfaces ambre */
  --cyan:#0EA5E9;
  --cyan-hi:#38BDF8;
  --red:#F05252;
  --green:#10B981;
  --violet:#A78BFA;        /* SRS / révisions */
  --on-accent:#0B0F15;     /* texte posé sur un aplat d'accent */

  /* --- texte --- */
  --paper:#F8FAFC;
  --muted:#A0AFC0;
  --faint:#7C8CA6;

  /* --- coloration syntaxique --- */
  --sx-kw:#FB923C;
  --sx-str:#34D399;
  --sx-num:#38BDF8;
  --sx-cm:#7C8CA6;
  --sx-fn:#A78BFA;
  --sx-op:#CBD5E1;

  /* --- typo --- */
  /* Une seule famille de texte, comme sur daniel-bal.fr : DM Sans porte
     les titres et le corps. Le monospace reste séparé — c'est la matière
     même de cette formation. */
  --display:'DM Sans',system-ui,sans-serif;
  --body:'DM Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'Cascadia Code',monospace;

  /* Échelle « confortable », le défaut. Les deux autres densités la
     remplacent plus bas ; ces valeurs-ci sont donc aussi le repli de
     quiconque arrive sans JavaScript. */
  --fs-1:11.5px;           /* micro-étiquettes mono */
  --fs-2:13px;             /* étiquettes, boutons secondaires */
  --fs-3:14.5px;           /* texte secondaire, code */
  --fs-4:17.5px;           /* corps */
  --fs-5:21px;             /* chapeau, titres de feuille */
  --fs-6:29px;             /* titre d'écran */
  --fs-7:clamp(34px,6vw,54px);
  --lh:1.65;               /* interligne du corps */

  /* --- rythme --- */
  --s1:4px;
  --s2:8px;
  --s3:16px;
  --s4:23px;
  --s5:34px;
  --s6:52px;

  /* Calés sur le rayon du portfolio (.75rem) : 10 px pour les contrôles
     (rounded-md), 12 px pour les cartes (rounded-xl), 16 px pour les
     grandes surfaces. */
  --r:10px;
  --r-lg:12px;
  --r-xl:16px;
  --gut:24px;
  --maxw:1020px;

  /* --- verre --- */
  --glass:rgba(16,20,27,.72);
  --glass-line:rgba(var(--white-rgb),.07);
  --glass-hi:rgba(var(--white-rgb),.10);
  --track:rgba(var(--white-rgb),.055);
  /* Bande de ligne courante de l'éditeur. `js/editor.js` la pose en style
     en ligne via ces deux variables : c'est le seul moyen de lui donner
     une teinte sans batailler contre un `style=`. */
  --ed-band:rgba(var(--white-rgb),.045);
  --ed-band-err:rgba(var(--red-rgb),.15);
  --hatch:rgba(var(--white-rgb),.028);
  --sheen:rgba(var(--white-rgb),.05);
  --shine:rgba(var(--white-rgb),.30);

  /* --- élévation ---
     Trois ombres empilées par niveau : un contact serré, une diffusion
     large, et un liseré interne clair. Une seule ombre floue donne
     toujours l'impression d'un autocollant. */
  --e1:0 1px 1px rgba(var(--black-rgb),.30),
       0 2px 6px -2px rgba(var(--black-rgb),.34),
       inset 0 1px 0 rgba(var(--white-rgb),.028);
  --e2:0 1px 2px rgba(var(--black-rgb),.32),
       0 10px 24px -10px rgba(var(--black-rgb),.62),
       inset 0 1px 0 rgba(var(--white-rgb),.045);
  --e3:0 2px 4px rgba(var(--black-rgb),.36),
       0 28px 64px -18px rgba(var(--black-rgb),.74),
       inset 0 1px 0 rgba(var(--white-rgb),.06);

  /* --- lueurs par accent --- */
  --glow-amber:0 0 0 1px rgba(var(--amber-rgb),.28),0 0 24px -6px rgba(var(--amber-rgb),.62);
  --glow-cyan:0 0 0 1px rgba(var(--cyan-rgb),.28),0 0 24px -6px rgba(var(--cyan-rgb),.60);
  --glow-green:0 0 0 1px rgba(var(--green-rgb),.30),0 0 26px -6px rgba(var(--green-rgb),.58);
  --glow-red:0 0 0 1px rgba(var(--red-rgb),.30),0 0 26px -6px rgba(var(--red-rgb),.58);
  --glow-violet:0 0 0 1px rgba(var(--violet-rgb),.28),0 0 24px -6px rgba(var(--violet-rgb),.55);

  --glow-soft-amber:0 0 18px -8px rgba(var(--amber-rgb),.70);
  --glow-soft-cyan:0 0 18px -8px rgba(var(--cyan-rgb),.70);

  /* --- mouvement --- */
  --t-fast:.14s;
  --t:.24s;
  --t-slow:.45s;
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-spring:cubic-bezier(.34,1.42,.5,1);   /* léger dépassement */

  /* --- couches --- */
  --z-rail:20;
  --z-toast:60;
  --z-fx:65;
  --z-tutor:75;
  --z-modal:90;
}

/* ============================================================
   DENSITÉ — la taille de tout, en un attribut

   Trois échelles, jamais trois feuilles : seuls les jetons changent.
   C'est ce qui rend le réglage honnête — si une taille était écrite en
   dur ailleurs, elle ne bougerait pas, et « plus gros » ne serait qu'à
   moitié vrai. `css/app.css` n'a donc plus aucune valeur en pixels
   pour du texte.

   `compacte` est l'échelle d'origine du dépôt, gardée telle quelle pour
   qui préfère voir beaucoup à la fois.
   ============================================================ */
:root[data-densite="compacte"]{
  --fs-1:10.5px; --fs-2:12px; --fs-3:13.5px; --fs-4:16px;
  --fs-5:19px;   --fs-6:25px; --fs-7:clamp(31px,5.6vw,48px);
  --lh:1.6;
  --s3:14px; --s4:20px; --s5:30px; --s6:46px;
  --r:8px; --r-lg:10px; --r-xl:14px;
  --gut:20px; --maxw:960px;
}

:root[data-densite="grande"]{
  --fs-1:12px; --fs-2:13.5px; --fs-3:15px; --fs-4:19px;
  --fs-5:23px; --fs-6:34px;   --fs-7:clamp(38px,6.4vw,60px);
  --lh:1.7;
  --s3:18px; --s4:26px; --s5:38px; --s6:58px;
  --r:12px; --r-lg:16px; --r-xl:20px;
  --gut:28px; --maxw:1080px;
}

/* ============================================================
   AMBIANCE — la même application, plus franche

   L'ambiance ne touche NI aux tailles NI au rythme : c'est le rôle de
   la densité. Elle ne change que la matière — angles plus ronds,
   accents plus saturés, lueurs plus larges. Croisée avec les trois
   densités et les trois thèmes, elle ne peut donc rien contredire.
   ============================================================ */
:root[data-ambiance="jeu"]{
  --ink-rgb:12,19,36;
  --panel-rgb:24,36,62;
  --panel2-rgb:33,49,82;
  --deep-rgb:9,15,28;
  --line-rgb:62,80,112;
  /* Un cran plus clair que la palette du banc : ce sont les nuances 400
     de la même famille, pas d'autres couleurs. */
  --amber-rgb:251,146,60;
  --cyan-rgb:56,189,248;
  --green-rgb:52,211,153;
  --violet-rgb:196,181,253;
  --red-rgb:248,113,113;
  /* Les panneaux du « jeu » sont plus clairs que ceux du banc : à teinte
     inchangée, --faint y repassait sous 3:1. Il remonte d'autant. */
  --faint-rgb:134,150,176;

  --ink:#0C1324;
  --panel:#18243E;
  --panel2:#213152;
  --panel-hi:#1E2C4A;
  --panel2-hi:#27385C;
  --deep:#090F1C;
  --deep-hi:#101A2E;
  --line:#3E5070;
  --line-hi:#556A92;

  --faint:#8696B0;

  --amber:#FB923C;
  --amber-hi:#FDBA74;
  --cyan:#38BDF8;
  --cyan-hi:#7DD3FC;
  --green:#34D399;
  --violet:#C4B5FD;
  --red:#F87171;

  --r:14px;
  --r-lg:20px;
  --r-xl:28px;

  /* Deux fois plus de halo, et un liseré de 2 px : c'est ce qui fait
     lire un bouton comme une pièce de jeu plutôt qu'un contrôle. */
  --glow-amber:0 0 0 2px rgba(var(--amber-rgb),.34),0 0 44px -6px rgba(var(--amber-rgb),.72);
  --glow-cyan:0 0 0 2px rgba(var(--cyan-rgb),.34),0 0 44px -6px rgba(var(--cyan-rgb),.72);
  --glow-green:0 0 0 2px rgba(var(--green-rgb),.34),0 0 44px -6px rgba(var(--green-rgb),.70);
  --glow-red:0 0 0 2px rgba(var(--red-rgb),.34),0 0 44px -6px rgba(var(--red-rgb),.70);
  --glow-violet:0 0 0 2px rgba(var(--violet-rgb),.34),0 0 44px -6px rgba(var(--violet-rgb),.66);
}

/* ============================================================
   THÈME CLAIR

   Le banc d'essai reste sombre par défaut, mais il se lit dehors.
   Trois choses qu'une simple inversion de palette rate, et qui sont
   traitées ici :

   • les triplets `--*-rgb` autant que les hexadécimaux — la grille de
     fond et les halos de `body::before` sont composés en `rgba()` à
     partir d'eux, et se retourneraient sans ça ;
   • les élévations, calées sur du noir pur : sur du blanc elles font
     une tache grise. Elles deviennent bleutées et beaucoup plus faibles ;
   • les surfaces de verre et les textures (`--hatch`, `--sheen`,
     `--track`…), toutes composées en blanc transparent, donc invisibles
     sur fond clair. Elles passent au noir transparent.
   ============================================================ */
:root[data-theme="clair"]{
  --ink-rgb:248,250,252;
  --panel-rgb:255,255,255;
  --panel2-rgb:241,245,249;
  --deep-rgb:241,245,249;
  --line-rgb:203,213,225;

  /* Les mêmes familles, prises à leur nuance 700 : c'est le seul moyen
     de garder sky, orange et emerald lisibles sur blanc. */
  --amber-rgb:194,65,12;
  --cyan-rgb:3,105,161;
  --red-rgb:185,28,28;
  --green-rgb:4,120,87;
  --violet-rgb:109,40,217;

  --paper-rgb:15,23,42;
  --muted-rgb:71,85,105;
  --faint-rgb:100,116,139;

  --ink:#F8FAFC;
  --panel:#FFFFFF;
  --panel2:#F1F5F9;
  --deep:#F1F5F9;
  --line:#CBD5E1;
  --panel-hi:#FFFFFF;
  --panel2-hi:#F8FAFC;
  --deep-hi:#F8FAFC;
  --line-hi:#94A3B8;

  /* Mesurés sur le panneau blanc : chacun tient 4,5 avec le texte, et
     le blanc posé dessus tient 4,5 aussi. Les variantes `-hi` sont ici
     plus SOMBRES que leur base — sur fond clair, un haut de dégradé plus
     lumineux ferait passer le libellé blanc sous le seuil. */
  --amber:#C2410C;
  --amber-hi:#9A3412;
  --cyan:#0369A1;
  --cyan-hi:#075985;
  --red:#B91C1C;
  --green:#047857;
  --violet:#6D28D9;
  --on-accent:#FFFFFF;

  --paper:#0F172A;
  --muted:#475569;
  --faint:#64748B;

  /* Le fond des blocs de code passe au clair : la coloration doit donc
     s'assombrir, sinon elle disparaît. Mêmes rôles, mêmes teintes,
     contraste retourné. */
  --sx-kw:#C2410C;
  --sx-str:#047857;
  --sx-num:#0369A1;
  /* Plus sombre que le gris effacé — un commentaire s'estompe, mais dans
     du code il doit rester lisible. 4,74:1 sur le fond des blocs. */
  --sx-cm:#5E6E85;
  --sx-fn:#6D28D9;
  --sx-op:#334155;

  --glass:rgba(255,255,255,.78);
  --glass-line:rgba(var(--black-rgb),.08);
  --glass-hi:rgba(255,255,255,.86);
  --track:rgba(var(--black-rgb),.06);
  --ed-band:rgba(var(--black-rgb),.045);
  --ed-band-err:rgba(var(--red-rgb),.12);
  --hatch:rgba(var(--black-rgb),.035);
  --sheen:rgba(var(--black-rgb),.04);
  --shine:rgba(255,255,255,.85);

  --e1:0 1px 1px rgba(20,30,50,.05),
       0 2px 6px -2px rgba(20,30,50,.10),
       inset 0 1px 0 rgba(255,255,255,.9);
  --e2:0 1px 2px rgba(20,30,50,.06),
       0 10px 24px -12px rgba(20,30,50,.18),
       inset 0 1px 0 rgba(255,255,255,.9);
  --e3:0 2px 4px rgba(20,30,50,.07),
       0 28px 64px -20px rgba(20,30,50,.22),
       inset 0 1px 0 rgba(255,255,255,1);

  --glow-amber:0 0 0 1px rgba(var(--amber-rgb),.34),0 0 26px -8px rgba(var(--amber-rgb),.44);
  --glow-cyan:0 0 0 1px rgba(var(--cyan-rgb),.34),0 0 24px -8px rgba(var(--cyan-rgb),.42);
  --glow-green:0 0 0 1px rgba(var(--green-rgb),.34),0 0 26px -8px rgba(var(--green-rgb),.42);
  --glow-red:0 0 0 1px rgba(var(--red-rgb),.34),0 0 26px -8px rgba(var(--red-rgb),.42);
  --glow-violet:0 0 0 1px rgba(var(--violet-rgb),.34),0 0 24px -8px rgba(var(--violet-rgb),.40);
  --glow-soft-amber:0 0 18px -8px rgba(var(--amber-rgb),.50);
  --glow-soft-cyan:0 0 18px -8px rgba(var(--cyan-rgb),.50);
}

/* Sur fond blanc, l'ambiance « jeu » a besoin d'un bleu un peu plus
   présent : le même écart de valeur que dans le sombre, à l'envers. */
:root[data-theme="clair"][data-ambiance="jeu"]{
  --ink-rgb:238,243,255;
  --panel2-rgb:230,237,251;
  --line-rgb:203,216,240;
  --ink:#EEF3FF;
  --panel:#FFFFFF;
  --panel2:#E6EDFB;
  --panel2-hi:#F2F6FF;
  --line:#CBD8F0;
}

/* Le thème sombre reste le défaut — un banc d'essai n'a pas de mode
   jour imposé. On respecte la réduction de mouvement, qui est une
   contrainte d'accessibilité, pas un goût.

   Le délai est neutralisé autant que la durée : une cascade dont on
   n'annule que la durée laisse ses éléments invisibles pendant tout
   leur `animation-delay`, ce qui produit un clignotement pire que
   l'animation d'origine. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-delay:0s!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    transition-delay:0s!important;
    scroll-behavior:auto!important;
  }
}