/* ============================================================
   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 */
  --couleur-pastille:    #2F7D4F;  /* le vert du point : un script attend d'être joué */
  --couleur-creux:        #75674F;  /* le creux du bouton « Quoi de neuf » : la famille de la toile, plus sombre */
  --couleur-creux-rempli: #9A8871;  /* le même creux quand il se remplit, au survol */

  /* --- 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 */

  /* --- la citation de l'accueil --------------------------------- */
  --largeur-citation:  640px;  /* sa largeur maximale : elle ne s'étire plus */
  --vignette-citation:  96px;  /* la vignette, à sa gauche — agrandie le 01/10 : à 64 px le dessin ne faisait que 60 px de visible */

  /* --- 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). */

/* Sur téléphone, la même vignette se réduit. À 96 px, elle mangerait la colonne de
   texte : sur 390 px de large, moins les marges, la vignette et les gouttières, il
   ne resterait plus assez de place pour lire la citation. La charte demande deux
   compositions distinctes, téléphone et écran ; c'est la même idée, appliquée ici. */
@media (max-width: 1000px) {
  :root {
    --vignette-citation: 72px;
  }
}