/* Neth Académie · jetons de marque 1.0 · 2026-11-08. Généré par gen/build_jetons.py depuis gen/kit.py : ne pas modifier à la main.
   Usage : <link rel="stylesheet" href="neth-jetons.css"> ; rôles : --nt-r-… ; surfaces : data-surface="papier" | "encre" | "carmin" (défaut : clair). */

:root {
  /* palette */
  --nt-carmin: #A3061A;
  --nt-encre: #16171B;
  --nt-blanc: #FFFFFF;
  --nt-papier: #F5F4F1;
  --nt-graphite: #4B4E56;
  --nt-rose-sceau: #FBE4E6;
  --nt-carmin-profond: #7E0514;
  --nt-carmin-clair: #FF8E95;
  /* fonctionnelles */
  --nt-succes: #1C6B45;
  --nt-succes-fond: #E9F2EC;
  --nt-attention: #8A5300;
  --nt-attention-fond: #FAF0DE;
  --nt-erreur: #A33A0B;
  --nt-erreur-fond: #FBEDE6;
  /* neutres */
  --nt-filet: #D9D8D3;
  --nt-note: #5F626A;
  --nt-contour-champ: #8A8C92;
  --nt-desactive-fond: #E7E6E2;
  --nt-desactive-contour: #C9C8C3;
  --nt-texte-sur-encre-2: #B9BAC0;
  --nt-filet-sur-encre: #3A3B40;
  --nt-hachure-sur-carmin: #B0172A;
  --nt-trait-illustration: #B5B4AE;
  /* polices */
  --nt-police-titre: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --nt-police-texte: 'Source Sans 3', 'Segoe UI', Arial, sans-serif;
  --nt-police-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  /* typographie (téléphone ; l’ordinateur prend le relais à 1200 px) */
  --nt-t-h1-taille: 36px; --nt-t-h1-interligne: 1.02; --nt-t-h1-graisse: 800; --nt-t-h1-interlettrage: -0.02em;
  --nt-t-h2-taille: 30px; --nt-t-h2-interligne: 1.08; --nt-t-h2-graisse: 800; --nt-t-h2-interlettrage: -0.02em;
  --nt-t-h3-taille: 21px; --nt-t-h3-interligne: 1.2; --nt-t-h3-graisse: 700; --nt-t-h3-interlettrage: -0.01em;
  --nt-t-carte-taille: 20px; --nt-t-carte-interligne: 1.15; --nt-t-carte-graisse: 800; --nt-t-carte-interlettrage: -0.015em;
  --nt-t-chapeau-taille: 19px; --nt-t-chapeau-interligne: 1.45; --nt-t-chapeau-graisse: 400; --nt-t-chapeau-interlettrage: 0em;
  --nt-t-texte-taille: 18px; --nt-t-texte-interligne: 1.5; --nt-t-texte-graisse: 400; --nt-t-texte-interlettrage: 0em;
  --nt-t-bouton-taille: 17px; --nt-t-bouton-interligne: 1; --nt-t-bouton-graisse: 700; --nt-t-bouton-interlettrage: 0em;
  --nt-t-note-taille: 15px; --nt-t-note-interligne: 1.45; --nt-t-note-graisse: 400; --nt-t-note-interlettrage: 0em;
  --nt-t-surtitre-taille: 13px; --nt-t-surtitre-interligne: 1.2; --nt-t-surtitre-graisse: 500; --nt-t-surtitre-interlettrage: 0.12em;
  --nt-t-donnee-taille: 15px; --nt-t-donnee-interligne: 1.4; --nt-t-donnee-graisse: 500; --nt-t-donnee-interlettrage: 0em;
  --nt-t-chiffre-taille: 48px; --nt-t-chiffre-interligne: 1; --nt-t-chiffre-graisse: 500; --nt-t-chiffre-interlettrage: -0.03em;
  --nt-t-endo-taille: 13px; --nt-t-endo-interligne: 1.3; --nt-t-endo-graisse: 500; --nt-t-endo-interlettrage: 0em;
  /* espaces (module u = 8 px) */
  --nt-u: 8px;
  --nt-espace-1: 4px;
  --nt-espace-2: 8px;
  --nt-espace-3: 12px;
  --nt-espace-4: 16px;
  --nt-espace-5: 20px;
  --nt-espace-6: 24px;
  --nt-espace-8: 32px;
  --nt-espace-10: 40px;
  --nt-espace-12: 48px;
  --nt-espace-14: 56px;
  --nt-espace-16: 64px;
  --nt-espace-18: 72px;
  --nt-espace-24: 96px;
  --nt-espace-32: 128px;
  /* grille */
  --nt-colonnes: 4; --nt-gouttiere: 16px; --nt-marge: 20px;
  --nt-contenu-max: 1296px; --nt-lecture: 680px; --nt-decalage: 0px;
  /* formes */
  --nt-rayon-aucun: 0px;
  --nt-rayon-controle: 2px;
  --nt-rayon-favicon: 2px;
  --nt-trait-filet: 1px;
  --nt-trait-controle: 1.5px;
  --nt-trait-controle-fort: 2px;
  --nt-trait-icone: 1.75px;
  --nt-trait-focus: 3px;
  --nt-ombre-sceau: 6px 6px 0 #16171B;
  --nt-ombre-flottante: 0 12px 32px rgba(22,23,27,.14);
  --nt-angle-fente: 7deg; --nt-angle-bord: 7.8deg; --nt-cible: 48px; --nt-cible-plancher: 44px;
  /* mouvement */
  --nt-duree-instant: 100ms;
  --nt-duree-rapide: 160ms;
  --nt-duree-normal: 240ms;
  --nt-courbe: cubic-bezier(.2, 0, 0, 1);
  /* états */
  --nt-etat-succes: #1C6B45;
  --nt-etat-succes-fond: #E9F2EC;
  --nt-etat-attention: #8A5300;
  --nt-etat-attention-fond: #FAF0DE;
  --nt-etat-erreur: #A33A0B;
  --nt-etat-erreur-fond: #FBEDE6;
  --nt-etat-contour-champ: #8A8C92;
  --nt-etat-desactive-fond: #E7E6E2;
  --nt-etat-desactive-texte: #5F626A;
  --nt-etat-desactive-contour: #C9C8C3;
}
@media (min-width: 768px) { :root { --nt-colonnes: 8; --nt-gouttiere: 24px; --nt-marge: 40px; } }
@media (min-width: 1200px) {
  :root { --nt-colonnes: 12; --nt-gouttiere: 24px; --nt-marge: 72px; --nt-decalage: 32px;
    --nt-t-h1-taille: 72px;
    --nt-t-h2-taille: 48px;
    --nt-t-h3-taille: 24px;
    --nt-t-carte-taille: 22px;
    --nt-t-chapeau-taille: 22px;
    --nt-t-surtitre-taille: 14px;
    --nt-t-donnee-taille: 17px;
    --nt-t-chiffre-taille: 80px;
  }
}

/* surfaces : mêmes rôles (--nt-r-…), valeurs selon le fond. Le N du logo (--nt-r-n) passe en blanc sur encre et sur carmin. */
:root, [data-surface="clair"] {
  --nt-r-fond: #FFFFFF;
  --nt-r-surface: #FFFFFF;
  --nt-r-panneau: #F5F4F1;
  --nt-r-texte: #16171B;
  --nt-r-texte-2: #4B4E56;
  --nt-r-note: #5F626A;
  --nt-r-filet: #D9D8D3;
  --nt-r-filet-fort: #16171B;
  --nt-r-accent: #A3061A;
  --nt-r-accent-survol: #7E0514;
  --nt-r-sur-accent: #FFFFFF;
  --nt-r-accent-texte: #A3061A;
  --nt-r-signet: #A3061A;
  --nt-r-lien: #16171B;
  --nt-r-lien-souligne: #A3061A;
  --nt-r-focus: #16171B;
  --nt-r-bouton-2-texte: #16171B;
  --nt-r-bouton-2-contour: #16171B;
  --nt-r-bouton-2-survol: #F5F4F1;
  --nt-r-n: #A3061A;
  --nt-r-mot: #16171B;
  --nt-r-picto: #16171B;
  --nt-r-picto-accent: #A3061A;

}
[data-surface="papier"] {
  --nt-r-fond: #F5F4F1;
  --nt-r-surface: #FFFFFF;
  --nt-r-panneau: #FFFFFF;
  --nt-r-texte: #16171B;
  --nt-r-texte-2: #4B4E56;
  --nt-r-note: #5F626A;
  --nt-r-filet: #D9D8D3;
  --nt-r-filet-fort: #16171B;
  --nt-r-accent: #A3061A;
  --nt-r-accent-survol: #7E0514;
  --nt-r-sur-accent: #FFFFFF;
  --nt-r-accent-texte: #A3061A;
  --nt-r-signet: #A3061A;
  --nt-r-lien: #16171B;
  --nt-r-lien-souligne: #A3061A;
  --nt-r-focus: #16171B;
  --nt-r-bouton-2-texte: #16171B;
  --nt-r-bouton-2-contour: #16171B;
  --nt-r-bouton-2-survol: #FFFFFF;
  --nt-r-n: #A3061A;
  --nt-r-mot: #16171B;
  --nt-r-picto: #16171B;
  --nt-r-picto-accent: #A3061A;
  background-color: var(--nt-r-fond); color: var(--nt-r-texte);
}
[data-surface="encre"] {
  --nt-r-fond: #16171B;
  --nt-r-surface: #202126;
  --nt-r-panneau: #202126;
  --nt-r-texte: #FFFFFF;
  --nt-r-texte-2: #B9BAC0;
  --nt-r-note: #B9BAC0;
  --nt-r-filet: #3A3B40;
  --nt-r-filet-fort: #FFFFFF;
  --nt-r-accent: #FFFFFF;
  --nt-r-accent-survol: #F5F4F1;
  --nt-r-sur-accent: #16171B;
  --nt-r-accent-texte: #FF8E95;
  --nt-r-signet: #FF8E95;
  --nt-r-lien: #FFFFFF;
  --nt-r-lien-souligne: #FF8E95;
  --nt-r-focus: #FFFFFF;
  --nt-r-bouton-2-texte: #FFFFFF;
  --nt-r-bouton-2-contour: #FFFFFF;
  --nt-r-bouton-2-survol: #2A2B31;
  --nt-r-n: #FFFFFF;
  --nt-r-mot: #FFFFFF;
  --nt-r-picto: #FFFFFF;
  --nt-r-picto-accent: #FF8E95;
  background-color: var(--nt-r-fond); color: var(--nt-r-texte);
}
[data-surface="carmin"] {
  --nt-r-fond: #A3061A;
  --nt-r-surface: #FFFFFF;
  --nt-r-panneau: #FFFFFF;
  --nt-r-texte: #FFFFFF;
  --nt-r-texte-2: #FBE4E6;
  --nt-r-note: #FBE4E6;
  --nt-r-filet: #C35D6A;
  --nt-r-filet-fort: #FFFFFF;
  --nt-r-accent: #FFFFFF;
  --nt-r-accent-survol: #FBE4E6;
  --nt-r-sur-accent: #A3061A;
  --nt-r-accent-texte: #FFFFFF;
  --nt-r-signet: #FFFFFF;
  --nt-r-lien: #FFFFFF;
  --nt-r-lien-souligne: #FFFFFF;
  --nt-r-focus: #FFFFFF;
  --nt-r-bouton-2-texte: #FFFFFF;
  --nt-r-bouton-2-contour: #FFFFFF;
  --nt-r-bouton-2-survol: #7E0514;
  --nt-r-n: #FFFFFF;
  --nt-r-mot: #FFFFFF;
  --nt-r-picto: #FFFFFF;
  --nt-r-picto-accent: #FFFFFF;
  background-color: var(--nt-r-fond); color: var(--nt-r-texte);
}

:focus-visible { outline: var(--nt-trait-focus) solid var(--nt-r-focus); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; scroll-behavior: auto !important; } }