/* =====================================================================
   RÉGLAGES DE L'APPARENCE DU PORTAIL
   ---------------------------------------------------------------------
   Tout l'aspect du site se règle ici, par ces variables : couleurs,
   police, tailles, espacements, arrondis, largeurs, disposition de
   l'en-tête. `portail.css` ne contient aucune valeur en dur : il n'utilise
   que ces variables.

   Deux niveaux :
   1. Ce fichier : les valeurs par défaut, pour tous les éditeurs.
   2. L'administration (Organisation > Apparence) : les réglages propres à
      un éditeur (couleurs, police, taille, arrondi, largeur, densité,
      position du logo). Ils sont servis par /theme.css, chargé après ce
      fichier, qui remplace les variables correspondantes.

   Voir docs/APPARENCE.md.
   ===================================================================== */

:root {
  /* --- Couleurs de l'organisation (réglables dans l'administration) --- */
  --couleur-principale: #1f4e79;      /* en-tête, boutons, liens */
  --couleur-accent: #c0504d;          /* focus, alertes, encadrés */
  --couleur-texte: #1a1a1a;
  --couleur-fond: #ffffff;            /* fond de la page */

  /* --- Couleurs dérivées --- */
  --couleur-sur-principale: #ffffff;  /* texte sur la couleur principale */
  --couleur-lien: var(--couleur-principale); /* liens, boutons secondaires (assombrie si la
                                                principale est trop claire, par /theme.css) */
  --couleur-entete-fond: var(--couleur-principale);
  --couleur-entete-texte: var(--couleur-sur-principale);
  --couleur-surface: #ffffff;         /* champs, boutons secondaires */
  --couleur-texte-discret: #595959;   /* aides, pied de page */
  --couleur-bordure: #d0d0d0;
  --couleur-bordure-champ: #767676;    /* contour des champs : 3:1 au moins avec le fond (WCAG 1.4.11) */
  --couleur-fond-logo: #ffffff;       /* derrière le logo, quel que soit le fond */
  --couleur-avis-fond: #faf7f2;       /* encadrés « avis » */

  /* --- Couleurs d'état (pastilles, messages) --- */
  --couleur-erreur: #b00020;
  --couleur-succes: #2e7d32;
  --couleur-danger-fond: #fdecea;
  --couleur-danger-texte: #8a1c1c;
  --couleur-attention-fond: #fff4d6;
  --couleur-attention-texte: #6b4e00;
  --couleur-reussite-fond: #e6f4ea;
  --couleur-reussite-texte: #1e5b2e;
  --couleur-neutre-fond: #eef1f5;

  /* --- Texte --- */
  --police: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --police-chasse-fixe: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --taille-texte: 100%;               /* 100 % = taille du navigateur */
  --interligne: 1.5;
  --graisse-forte: 600;

  /* --- Espacements (la densité multiplie l'unité) --- */
  --densite: 1;                       /* 0.8 compacte, 1 normale, 1.25 aérée */
  --espace: calc(1rem * var(--densite));
  --espace-xs: calc(var(--espace) * .25);
  --espace-s: calc(var(--espace) * .5);
  --espace-m: var(--espace);
  --espace-l: calc(var(--espace) * 1.5);

  /* --- Formes --- */
  --arrondi: 6px;                     /* champs, boutons, encadrés */
  --arrondi-pastille: 1rem;           /* pastilles de statut */
  --epaisseur-focus: 3px;

  /* --- Mise en page --- */
  --largeur-page: 60rem;              /* largeur maximale du contenu */
  --largeur-menu-fiche: 15rem;        /* menu des étapes de la fiche */
  --largeur-champ: 32rem;             /* largeur maximale d'un champ */
  --largeur-texte: 42rem;             /* longueur des lignes d'un long texte (notice) */
  --largeur-tuile: 12rem;             /* tuiles du tableau de bord */
  --hauteur-logo: 2rem;
  /* En-tête : logo à gauche (row, space-between) ou centré (column, center). */
  --entete-direction: row;
  --entete-alignement: space-between;
}