/* ============================================================ la marque, en un seul endroit
Toutes les couleurs et les polices du site partent d'ici. Pour passer en marque revendeur
(ou si le client change de nom), on change ce fichier, assets/js/marque.js et les icônes de
assets/icones/app/, et rien d'autre. Le reste du CSS n'utilise que ces variables.
Source : piste C « blanc et bleu », retenue par Youssef le 2026-10-23
(Branding/VueGard/Brand livrables/02-Couleurs-Typo/). Elle remplace la piste B (noir et orange). */

:root{
  /* ------------------------------------------------------------ palette de la piste C */
  --papier:#F4F3EF;    /* fond principal de la charte */
  --blanc:#FFFFFF;     /* cartes, écran ; fond du hero, comme la maquette validée */
  --brume:#E8ECF7;     /* fin du dégradé */
  --azur:#5B7BF0;      /* dégradé seulement, jamais pour du texte */
  --bleu:#1E3FE0;      /* LA couleur de la marque : symbole, liens, accents */
  --abysse:#0B1B6E;    /* dégradé */
  --nuit:#06102F;      /* cœur du dégradé */
  --encre:#0B0E1A;     /* textes, nom */
  --gris:#5E6270;      /* textes seconds (5,5:1 sur le papier) */
  --brume-vive:#AFC0FA;/* V et A du nom posé sur fond bleu */
  --filet:#E0E0E0;     /* bord des pilules claires (mesuré sur la maquette du hero) */
  /* la petite touche chaude des particules du hero, demandée par Youssef le 2026-10-23 */
  --orange:#FF5E0E;

  /* ------------------------------------------------------------ rôles
  Les écrans parlent de rôles (fond, texte, accent), pas de couleurs : si la marque
  change, on rebranche les rôles ici sans toucher aux écrans. */
  --fond:var(--blanc);
  --fond-bloc:var(--papier);
  --texte:var(--encre);
  --texte-doux:var(--gris);
  /* les liens de la nav : l'encre un peu adoucie, comme le gris foncé de la maquette */
  --texte-nav:color-mix(in srgb, var(--encre) 78%, white);
  --accent:var(--bleu);
  --bouton:var(--encre);       /* bouton plein : encre, comme la maquette du hero */
  --sur-bouton:var(--blanc);
  --sur-accent:var(--blanc);   /* texte posé sur le bleu */
  --ligne:var(--filet);

  /* le halo (classe .lueur du socle), aux couleurs du dégradé de la piste C */
  --halo-fond:var(--papier);
  --halo-coeur:var(--nuit);
  --halo-1:var(--abysse);
  --halo-2:var(--bleu);
  --halo-bord:var(--brume);

  /* les particules du hero : bleus surtout, une pointe d'orange (assets/js/particules.js?v=20261024a).
  Chaque couleur a un poids : plus il est grand, plus elle revient souvent. */
  --particules:"#1E3FE0 3, #5B7BF0 5, #0B1B6E 0.7, #FF5E0E 0.5";

  /* ------------------------------------------------------------ polices
  Geist pour le français, IBM Plex Sans Arabic pour l'arabe. En arabe on garde Geist
  derrière, pour les chiffres latins, les noms de marque et les adresses e-mail.
  Archivo n'existe que dans le logo, déjà livré en tracés. */
  --police-latin:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --police-arabe:"IBM Plex Sans Arabic","Geist",system-ui,sans-serif;
  --police-mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --police:var(--police-latin);

  /* ------------------------------------------------------------ formes */
  --rayon:20px;
  --rayon-pilule:999px;
}