/* Field — jetons de design. AUCUNE valeur de couleur, de rayon, d'espacement ou
   de police ailleurs que dans ce fichier.
   L'accent est injecté par le tenant (marque blanche) : la valeur ci-dessous
   n'est qu'un repli si la société n'a pas défini sa couleur. */
:root {
  /* Couleur */
  --f-fond:     #F7F6F3;
  --f-carte:    #FFFFFF;
  --f-encre:    #171A1C;
  --f-encre-2:  #5C6470;
  --f-trait:    #DEDAD2;
  --f-accent:   #0F766E;   /* repli — écrasé par le thème du tenant */
  --f-retard:   #A02A16;

  /* Typographie */
  --f-display:  'Archivo Narrow', 'Arial Narrow', system-ui, sans-serif;
  --f-texte:    'Luciole', system-ui, -apple-system, sans-serif;

  --f-t-geste:  clamp(5rem, 36vw, 11rem);
  --f-t-titre:  clamp(1.6rem, 7vw, 2.1rem);
  --f-t-sous:   clamp(1rem, 4.2vw, 1.15rem);
  --f-t-texte:  1rem;
  --f-t-petit:  0.875rem;

  --f-i-geste:  0.86;
  --f-i-titre:  1.05;
  --f-i-texte:  1.5;

  --f-l-geste:  -0.03em;
  --f-l-titre:  -0.015em;
  --f-l-petit:  0.01em;

  /* Espacement — pas d'échelle décorative, quatre valeurs qui servent */
  --f-e-1:  0.5rem;
  --f-e-2:  1rem;    /* gouttière latérale */
  --f-e-3:  1.75rem;
  --f-e-4:  2.5rem;  /* la rupture entre « maintenant » et « ensuite » */

  /* Rayons — hiérarchisés, jamais uniformes */
  --f-r-fiche:  14px;   /* le chantier en cours */
  --f-r-bouton: 8px;
  --f-r-liseré: 0;      /* le liseré touche le bord : aucun rayon */
  --f-r-rond:   50%;    /* la photo du poseur */
  --f-avatar:   6rem;   /* diamètre de la photo sur la fiche */
  --f-mini:     2rem;   /* miniature dans la barre haute */

  /* Cible tactile — convention socle (audit tablette 08/09) */
  --touch-min: 48px;

  /* Coque (11/09) : barre haute + barre basse, du téléphone au PC. Les barres
     tiennent toute la largeur ; leur contenu et celui de la page se bornent à
     --f-contenu-max et se centrent au-delà de la tablette. */
  --f-haut-h:       56px;
  --f-bas-h:        calc(var(--touch-min) + 8px);
  --f-contenu-max:  64rem;
  /* Seuil tablette = 48rem, écrit dans les @media de field.css : une media query
     ne peut pas lire une variable CSS. */

  /* Drapeaux du sélecteur de langue — couleurs OFFICIELLES des pavillons,
     pas des couleurs d'interface : elles ne servent nulle part ailleurs. */
  --f-drapeau-fr-bleu:  #0055A4;
  --f-drapeau-fr-rouge: #EF4135;
  --f-drapeau-nl-rouge: #AE1C28;
  --f-drapeau-nl-bleu:  #21468B;
  --f-drapeau-uk-bleu:  #012169;
  --f-drapeau-uk-rouge: #C8102E;
  --f-drapeau-ro-bleu:  #002B7F;
  --f-drapeau-ro-jaune: #FCD116;
  --f-drapeau-ro-rouge: #CE1126;
  --f-drapeau-blanc:    #FFFFFF;
  --f-drapeau-taille:   1.5rem;

  /* Écrans d'authentification — miroir du patron des autres espaces (portail
     client, banque) : panneau de marque à gauche, formulaire à droite. Le
     panneau est un APLAT de la couleur du tenant, pas un dégradé. */
  /* Encre profonde FIXE, comme le panneau de l'espace banque : la lisibilité du
     texte blanc ne doit pas dépendre de la couleur d'un tenant — une marque claire
     rendrait le panneau illisible. La couleur du tenant reste présente, en accent
     (le filet du discours), jamais en fond porteur de texte. */
  --f-marque-fond:    #0B0F14;
  --f-marque-encre:   #FFFFFF;
  --f-auth-colonne:   clamp(21rem, 38%, 34rem);  /* largeur de la colonne formulaire */
  --f-auth-marge:     3rem;                      /* respiration du panneau, desktop */
  --f-t-discours:     clamp(1.9rem, 3.4vw, 2.6rem);
  /* Photo du panneau : monochrome, mêlée en luminance à l'aplat de marque, donc
     TOUS les tenants obtiennent la même image dans leur propre couleur. L'opacité
     est le seul réglage : au-delà, le texte blanc cesse d'être lisible sur le ciel. */
  --f-photo-opacite:  0.34;
  --f-photo-cadrage:  50% 46%;
}