/* ============================================================
   JETONS DU ROYAUME — la charte en variables CSS.
   Source de vérité : 20_Casquettes/Nosyland_Web/Design/DESIGN.md
   C'est le SEUL fichier où l'on change une teinte, un corps, un espace.
   Les noms sont en français exprès : on doit pouvoir changer une
   couleur en éditant une ligne, sans lire de CSS.
   ============================================================ */

:root {
  /* --- couleurs ------------------------------------------------ */
  --couleur-fond:        #FBF3DE;  /* parchemin : le fond de page */
  --couleur-toile:       #EDE6D6;  /* la toile derrière, et les encoches du bord perforé */
  --couleur-papier:      #FFFAEE;  /* le papier des objets : billet, bandeau, champs */
  --couleur-encre:       #3A1B1F;  /* titres, texte principal */
  --couleur-encre-douce: #5C4A38;  /* paragraphes, texte secondaire */
  --couleur-filet:       #B87C6E;  /* le contour des objets — c'est lui qui les fait exister */
  --couleur-filet-sceau: #C98A80;  /* le pointillé du sceau */
  --couleur-accent:      #9B3040;  /* le seul accent : bouton, liens, logo, étiquette de l'Écho */
  --couleur-accent-appui:#7A2430;  /* appui du bouton, attributions, étiquettes, sceau */
  --couleur-ruban:       #E7C7BF;  /* le ruban du billet */
  --couleur-mention:     #6E5A42;  /* date de l'Écho, texte de piste des champs */

  /* --- polices ------------------------------------------------- */
  --police-titre: Piazzolla, Georgia, serif;
  --police-texte: Karla, system-ui, sans-serif;
  --police-mono:  ui-monospace, Menlo, Consolas, monospace;

  /* --- corps de texte ------------------------------------------ */
  --titre-grand:      700 36px/1.12 var(--police-titre);
  --titre-moyen:      700 26px/1.2  var(--police-titre);
  --titre-objet:      700 16px/1.35 var(--police-titre);
  --marque:           700 16px/1    var(--police-titre);
  --citation:         600 16px/1.5  var(--police-titre);
  --piece:            600 12px/1    var(--police-titre);   /* la mention en pied de page */
  --texte:            400 16px/1.55 var(--police-texte);
  --texte-petit:      400 15px/1.55 var(--police-texte);
  --texte-champ:      500 16px/1    var(--police-texte);
  --texte-bouton:     700 15px/1    var(--police-texte);
  --texte-lien:       600 13px/1    var(--police-texte);
  --etiquette:        700 11px/1    var(--police-mono);    /* capitales, interlettrage 0.1em */
  --etiquette-champ:  700 11px/1    var(--police-mono);    /* capitales, interlettrage 0.05em */
  --attribution:      600 11px/1    var(--police-mono);    /* interlettrage 0.02em */
  --texte-sceau:      600 11px/1    var(--police-mono);    /* en minuscules */

  /* --- interlettrage ------------------------------------------- */
  --interlettrage-etiquette:       0.1em;
  --interlettrage-etiquette-champ: 0.05em;
  --interlettrage-attribution:     0.02em;
  --interlettrage-bouton:          0.03em;

  /* --- espaces ------------------------------------------------- */
  --espace-haut:      44px;  /* la respiration au-dessus du titre de page */
  --espace-titre:     28px;  /* entre le titre et ce qui suit */
  --espace-objets:    22px;  /* entre deux objets */
  --espace-page-bas:  26px;  /* avant le pied de page */
  --espace-page:      24px;  /* la marge latérale de tout le contenu */
  --espace-etiquette: 12px;  /* sous une étiquette */
  --espace-texte:      8px;  /* entre un titre d'objet et son texte */
  --espace-fin:        6px;  /* entre deux lignes serrées */

  /* --- rayons et formes ---------------------------------------- */
  --rayon-bouton: 6px;
  --rayon-champ:  4px;
  --rayon-papier: 0;    /* un objet a l'angle vif, jamais arrondi */
  --rayon-sceau:  20px;
}

/* Colonne unique : la largeur se fixe dans le gabarit (390 px sur téléphone). */