/* Direction 1 : « Les 18 onglets »
   Lilian se présente en « nerd qui ne veut pas sortir de sa chambre »,
   et parle des « cerveaux rangés qui ont dix-huit onglets ouverts ».
   La page s'ouvre sur ces onglets, empilés sur lui ; le visiteur les ferme
   à la main, ou d'un coup avec "Découvrir les services".
   Couleurs : charte lilian-barty.fr et dérivées. Contrastes calculés par
   contraste.py le 29/09/2026 (voir NOTES.md), recalculés le 30/09/2026 après l'adoucissement
   choisi par Lilian : scène un peu moins sombre, rouge un peu moins vif (propositions-adoucies/). */

:root{
  --nuit:#200A1D;
  --aubergine:#4A1942;
  --rouge:#EF4A2F;              /* adouci le 30/09/2026 (#FE2400 avant) : texte nuit 5,07:1 */
  --rouge-vif:#FA6A4F;          /* survol du bouton, texte nuit 6,45:1 */
  --rouge-texte:#C2200A;        /* petit texte rouge : 5,99:1 sur blanc, 5,65:1 sur crème (le rouge de marque n'y fait que 3,50:1) */
  --creme:#FAF8F5;
  --blanc:#FFFFFF;
  --vert:#2D5016;
  --vert-moyen:#B8D49A;
  --vert-pale:#EAF3DF;
  --lilas:#E8C4E4;
  --lilas-doux:#CDB3C8;

  /* Rôles, thème clair */
  --fond:var(--creme);
  --fond-2:#F1EBE3;
  --fenetre:var(--blanc);
  --encre:#1C1219;              /* 17,23:1 sur crème */
  --encre-douce:#5B4A56;        /* 7,74:1 sur crème */
  --titre:var(--nuit);
  --filet:rgba(32,10,29,.12);
  --filet-fort:#A08A99;         /* 3,01:1, trait porteur de sens */
  --ok:var(--vert);             /* coche, sur fond clair 8,72:1 */
  --alerte-barre:#FFE4DD;       /* barre des fenêtres d'alerte (page d'offre) */
  --action:var(--rouge);        /* fond des boutons, texte nuit 5,07:1 */
  --sur-action:var(--nuit);
  --positif:var(--vert);          /* boutons à message positif : texte crème 8,72:1 */
  --sur-positif:var(--creme);
  --positif-survol:#3A6620;       /* texte crème 6,39:1 */
  /* Surfaces de scène (menu, premier écran, sections sombres, pied de page) : aubergine très sombre avec texte crème en
     thème clair, lilas avec texte aubergine foncé en thème sombre (choix de Lilian du 30/09/2026, précisé le même jour :
     le haut de page doit changer d'un thème à l'autre). Tout ce qui se pose sur la scène passe par ces jetons.
     La scène claire est un peu moins sombre que l'encre nuit depuis le 30/09/2026, pour adoucir le contraste. */
  --scene:#2F1A2C;
  --sur-scene:var(--creme);           /* 15,18:1 */
  --sur-scene-rvb:250 248 245;        /* la même encre, pour les traits et voiles translucides : rgb(var(--sur-scene-rvb) / .12) */
  --sur-scene-doux:var(--lilas-doux); /* 8,34:1 */
  --ok-scene:var(--vert-moyen);       /* 9,90:1 sur la scène */
  --point-marque:var(--rouge);        /* le point du logo sur la scène sombre : rouge vif */
  --positif-scene:var(--vert-moyen);  /* bouton à message positif sur la scène : texte nuit 11,51:1 */
  --sur-positif-scene:var(--nuit);
  --positif-scene-survol:#CBE2B2;     /* texte nuit 13,42:1 */
  --pilule-scene:rgba(32,10,29,.78);  /* pastille d'état */
  --rouge-scene:var(--rouge);
  --focus:var(--aubergine);
  --focus-scene:var(--lilas);
  --ombre-fenetre:0 1px 0 rgba(32,10,29,.06), 0 18px 40px -24px rgba(32,10,29,.45);
  --ombre-onglet:0 14px 30px -12px rgba(0,0,0,.55);

  /* Typographie : Bricolage Grotesque (la voix) + Space Mono (les noms de fichiers) */
  --police:"Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --police-fichier:"Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --t-2xs:.6875rem;   /* 11 px, titres d'onglets sur téléphone */
  --t-xs:.75rem;      /* 12 px */
  --t-sm:.875rem;     /* 14 px */
  --t-base:1.0625rem; /* 17 px */
  --t-md:1.25rem;     /* 20 px */
  --t-lg:1.5rem;      /* 24 px */
  --t-xl:2rem;        /* 32 px */
  --t-2xl:clamp(2.25rem, 1.4rem + 3.4vw, 4rem);
  --t-hero:clamp(2.75rem, 1.4rem + 5.6vw, 5.75rem);
  --t-hero-long:clamp(2.375rem, 1.3rem + 3.9vw, 4.5rem); /* titre d'accueil du site en ligne, deux fois plus long (accueil-fidele.html) */
  --interligne:1.55;
  --interligne-titre:.98;
  --approche-titre:-.035em;

  --e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px; --e-5:24px;
  --e-6:32px; --e-7:48px; --e-8:64px; --e-9:96px; --e-10:128px;

  /* Rayons : les fenêtres 14 px, les onglets 10 px en haut, les commandes 999 px */
  --rayon-fenetre:14px;
  --rayon-onglet:10px;
  --pilule:999px;

  /* Mouvement */
  --duree-action:120ms;
  --duree-secondaire:220ms;
  --courbe:cubic-bezier(.2,0,0,1);
  --courbe-ressort:cubic-bezier(.34,1.56,.64,1);
  --courbe-envol:cubic-bezier(.55,0,.8,.4);

  --hauteur-nav:68px;
  --largeur-max:1280px;
}

:root[data-theme="dark"]{
  --fond:#201A1C;               /* adouci le 30/09/2026 (#15100F avant) */
  --fond-2:#282022;
  --fenetre:#2E2528;
  --encre:#F4EEE8;              /* 14,88:1 sur le fond, 12,92:1 sur la fenêtre */
  --encre-douce:#BFB1AA;        /* 8,23:1 */
  --titre:#F4EEE8;
  --filet:rgba(244,238,232,.12);
  --filet-fort:#8C7E86;
  --ok:var(--vert-moyen);
  --alerte-barre:#3A1712;
  --rouge-texte:#FF6A4D;        /* 5,26:1 sur la fenêtre sombre */
  --focus:var(--lilas);
  --ombre-fenetre:0 1px 0 rgba(0,0,0,.4), 0 18px 40px -22px rgba(0,0,0,.85);
  /* La scène en thème sombre : lilas avec texte aubergine foncé */
  --scene:var(--lilas);
  --sur-scene:var(--nuit);            /* 11,98:1 sur lilas */
  --sur-scene-rvb:32 10 29;
  --sur-scene-doux:var(--aubergine);  /* 8,91:1 sur lilas */
  --ok-scene:var(--vert);             /* 5,92:1 sur lilas */
  --point-marque:#C2200A;             /* sur le lilas, le point foncé du logo (le rouge-texte est redéfini plus haut) */
  --positif-scene:var(--vert);        /* texte crème 8,72:1 */
  --sur-positif-scene:var(--creme);
  --positif-scene-survol:#3A6620;     /* texte crème 6,39:1 */
  --pilule-scene:var(--nuit);         /* pastille d'état : opaque sur le lilas, texte crème 17,65:1 */
  --rouge-scene:#C2200A;              /* le rouge-texte du thème clair (redéfini plus haut pour le sombre) : 3,84:1 sur lilas */
  --focus-scene:var(--aubergine);
}