/* Identité jonweb.fr : jetons communs des trois outils.
   Base : la charte en ligne (nuit #131517, encre #ECEAE5, gris #9A9D9F, or #CF9D1D, papier #F2F0EC, or papier #836110,
   Newsreader seule, courbe (.22, 1, .36, 1)). On n'invente aucune couleur : on range ce qui existe en rôles.
   Réutilisable tel quel par les trois outils : la portée claire/sombre est un attribut. */

@font-face { font-family: "Newsreader"; src: url("polices/newsreader-latin-opsz-normal.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("polices/newsreader-latin-opsz-italic.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }

:root, [data-fond="nuit"] {
  /* Couleurs, par rôle */
  --fond: #131517;          /* nuit */
  --encre: #ECEAE5;         /* texte principal, 15,2:1 */
  --gris: #9A9D9F;          /* texte d'appui, 6,7:1 */
  --trait: #6F7477;         /* contour de champ, 3,9:1 (contrôle, ≥ 3:1) */
  --filet: rgb(236 234 229 / .14);  /* structure seule, jamais porteur de sens */
  --or: #CF9D1D;            /* l'or plein : la promesse et l'action, 7,4:1 */
  --or-clair: #DFC78B;      /* l'or éclairci d'encre (45/55), pas une teinte neuve : relief des titres, étiquettes, rangs */
  --voile-menu: rgb(19 21 23 / .96);
}
[data-fond="papier"] {
  --fond: #F2F0EC; --encre: #1B1D1F; --gris: #5B5F63; --trait: #7A7F82;
  --filet: rgb(27 29 31 / .14); --or: #836110; --or-clair: #644C11; --voile-menu: rgb(242 240 236 / .97);
}

:root {
  /* Typographie : une famille, cinq tailles par écran (au lieu de 16 mesurées en ligne) */
  --famille: "Newsreader", Georgia, serif;
  --t-titre: 56px;      /* titre de l'accueil seulement */
  --t-face: 44px;       /* titre de face */
  --t-sous: 22px;       /* nom d'un élément (étape, fiche, produit) */
  --t-texte: 17px;      /* texte */
  --t-petit: 14px;      /* appui, navigation, bande */
  --t-legende: 12px;    /* légende, mention « provisoire » */
  --interligne: 1.55;
  --interligne-titre: 1.08;

  /* Espace : grille de 8 */
  --e-1: 8px; --e-2: 16px; --e-3: 24px; --e-4: 32px; --e-6: 48px; --e-8: 64px; --e-12: 96px; --e-filet: 1px;
  --gouttiere: 72px;    /* bord gauche commun : logo, titres, bande */
  --barre: 72px;
  --bande: 48px;
  --colonne: 560px;     /* colonne de lecture de l'accueil et du contact */
  --zone: 840px;        /* le texte reste à gauche de la sphère (elle occupe le tiers droit à 1440) */
  --cible: 44px;

  /* Mouvement (une seule courbe, déjà en ligne) */
  --courbe: cubic-bezier(.22, 1, .36, 1);
  --d-appui: 140ms; --d-survol: 180ms; --d-ui: 240ms; --d-entree: 560ms; --d-sortie: 240ms;
  --pas: 75ms;          /* décalage entre deux morceaux d'une même entrée */
}

@media (max-width: 600px) {
  :root { --t-titre: 36px; --t-face: 30px; --t-sous: 19px; --t-texte: 16px; --t-petit: 13px; --t-legende: 12px;
          --gouttiere: 16px; --barre: 64px; --bande: 44px; }
}