/* ==========================================================================
   La Gazette familiale — design tokens
   --------------------------------------------------------------------------
   DIRECTION : « deux encres, un papier ».
   Le produit est un journal tiré en offset bon marché et aimé : une encre
   noire, une encre rouge, du papier non couché, et des trames de gris quand
   il faut une nuance. Le rouge est celui de l'app (#E2231A) : la landing et
   l'app sont le même produit. Aucune troisième couleur — les « nuances »
   sont des trames de ces deux encres, comme en imprimerie.

   Ce que cette direction refuse volontairement :
   — le fond crème + serif haute-contraste + accent terracotta (le défaut) ;
   — le pastiche broadsheet intégral : les formes de l'UI (boutons pastille,
     cartes arrondies) restent celles de l'app. Les motifs imprimés (filets
     de manchette, perforation, tampon, trames) portent le caractère, dans un
     châssis contemporain. C'est la tension qui tient la page.
   ========================================================================== */

:root {
  /* --- LES DEUX ENCRES ------------------------------------------------- */
  /* Noir d'imprimerie, légèrement bleuté — pas un noir d'écran. */
  --ink:        #15181C;
  --ink-70:     #5B5D60;   /* trame 70 % — texte secondaire */
  --ink-45:     #969799;   /* trame 45 % — DÉCORATIF seulement (2,9:1) */
  --ink-20:     #D0D1D2;   /* trame 20 % — filets */
  --ink-10:     #E9E8E8;   /* trame 10 % — aplats légers */

  /* Encre rouge — valeur exacte de l'app */
  --rouge:      #E2231A;
  --rouge-deep: #B4160F;   /* survol : l'encre appuie */
  --rouge-tint: #FF6F5F;   /* trame 70 % — seule lisible sur l'encre pleine */
  --rouge-wash: #FDF2F1;   /* trame 8 % — aplats, encadrés (app) */

  /* --- LE PAPIER ------------------------------------------------------- */
  --paper:      #FFFFFF;   /* le blanc de l'app */
  --newsprint:  #ECEAE4;   /* papier non couché : gris chaud, pas crème */
  --newsprint-deep: #DEDBD3;

  /* --- RÔLES (ce que les composants utilisent) ------------------------- */
  --bg:           var(--paper);
  --bg-alt:       var(--newsprint);
  --fg:           var(--ink);
  --fg-soft:      var(--ink-70);
  --accent:       var(--rouge);        /* aplats : boutons, pastilles */
  --accent-hover: var(--rouge-deep);
  --accent-text:  var(--rouge);        /* rouge en TEXTE sur le fond courant */
  --accent-wash:  var(--rouge-wash);
  --on-accent:    var(--paper);        /* ce qui se pose sur l'aplat rouge */
  --rule:         var(--ink-20);
  --rule-strong:  var(--ink);
  --field:        var(--ink-10);

  /* --- TYPOGRAPHIE ----------------------------------------------------- */
  /* Manchette. Une Didone (Bodoni, Didot) donnerait la snap de la presse
     française, mais ses déliés disparaissent en grand à l'écran — inacceptable
     quand la lisibilité EST l'argument produit. Fraunces tient le registre
     éditorial avec des empattements évasés, une forte hauteur d'x et aucun
     trait fragile : lisible à 64 px comme à 20 px. */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  /* Newsreader est dessinée pour lire de l'info à l'écran : c'est le corps. */
  --font-text:    "Newsreader", "Iowan Old Style", Charter, Georgia, serif;
  /* La machine à écrire, registre postal et administratif : libellés, dates,
     méta, retranscriptions. Remplace les capitales serif espacées. */
  --font-label:   "Courier Prime", "Courier New", ui-monospace, monospace;
  /* Une seule ligne dans tout le site : la réponse manuscrite. */
  --font-script:  "Petit Formal Script", "Snell Roundhand", cursive;

  /* Échelle fluide — 320px → 1280px */
  --step--2: clamp(0.78rem, 0.76rem + 0.09vw, 0.83rem);
  --step--1: clamp(0.91rem, 0.89rem + 0.12vw, 0.97rem);
  --step-0:  clamp(1.09rem, 1.05rem + 0.22vw, 1.22rem);   /* ≥ 17px, lecture senior */
  --step-1:  clamp(1.28rem, 1.20rem + 0.38vw, 1.53rem);
  --step-2:  clamp(1.53rem, 1.36rem + 0.78vw, 2.05rem);
  --step-3:  clamp(1.80rem, 1.56rem + 1.15vw, 2.50rem);
  --step-4:  clamp(2.10rem, 1.76rem + 1.68vw, 3.15rem);
  --step-5:  clamp(2.45rem, 1.90rem + 2.70vw, 4.50rem);

  --lh-tight: 1.06;
  --lh-title: 1.16;
  --lh-body:  1.62;
  /* Fraunces est large et chaleureuse : un serrage léger suffit. Au-delà, ses
     contreformes se referment — le « e » devient un pâté. Le serrage hérité de
     la Didone (-0,025em) était de trop. */
  --ls-display: -0.012em;
  /* Graisse d'affichage. Sans cette variable, `font-weight: var(--wt-display)`
     est invalide et TOUS les titres retombent sur la graisse héritée.
     700 et non 800 : c'est la graisse que la page rendait réellement pendant
     que la variable manquait (le navigateur clampait sur la plus proche
     disponible), et c'est celle qui a été validée. C'est aussi la limite au-delà
     de laquelle l'italique de Fraunces bouche ses contreformes. */
  --wt-display: 700;
  --ls-caps:    0.16em;   /* capitales machine à écrire */

  /* --- RYTHME ---------------------------------------------------------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;
  --sp-4: 1rem;     --sp-5: 1.5rem;   --sp-6: 2rem;
  --sp-7: 3rem;     --sp-8: 4rem;     --sp-9: 6rem;
  --section-y: clamp(3.5rem, 7vw, 6.5rem);

  /* --- LARGEURS -------------------------------------------------------- */
  --w-page:   74rem;
  --w-text:   40rem;
  --w-narrow: 30rem;

  /* --- HABILLAGE ------------------------------------------------------- */
  /* Les formes viennent de l'app : pastilles, cartes arrondies. */
  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgb(21 24 28 / 0.06), 0 2px 8px rgb(21 24 28 / 0.04);
  --shadow:    0 2px 4px rgb(21 24 28 / 0.05), 0 14px 34px rgb(21 24 28 / 0.09);
  --border:    1px solid var(--rule);

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur: 200ms;
}

/* --------------------------------------------------------------------------
   FONDS — les rôles basculent, les composants ne changent pas.
   -------------------------------------------------------------------------- */

/* Papier non couché : la section « objet imprimé ».
   Le rouge en texte y passe à l'encre appuyée : sur un papier absorbant
   l'encre s'écrase et fonce (le dot gain de l'imprimeur), et c'est aussi ce
   qui rattrape le contraste — le rouge plein ne tient que 3,9:1 sur ce fond,
   l'encre appuyée 5,7:1. */
.is-newsprint {
  --bg: var(--newsprint);
  --bg-alt: var(--newsprint-deep);
  --field: var(--newsprint-deep);
  --accent-text: var(--rouge-deep);
  background: var(--bg);
  color: var(--fg);
}

/* Encre pleine. Le rouge y reste l'encre d'aplat ; en texte il passe à sa
   trame 70 %, seule valeur lisible sur ce fond (6,7:1 contre 3,2:1). */
.is-ink {
  --bg: var(--ink);
  --bg-alt: #1E2227;
  --fg: var(--paper);
  --fg-soft: #A9ADB3;
  --accent-text: var(--rouge-tint);
  --accent-wash: rgb(255 255 255 / 0.07);
  --rule: rgb(255 255 255 / 0.18);
  --rule-strong: var(--paper);
  --field: rgb(255 255 255 / 0.08);
  background: var(--bg);
  color: var(--fg);
}