/* ==========================================================================
   Avenue des Rêveries — tokens
   Source : design/ADR_maquette.psd (accueil). La maquette est en @2x d'une
   largeur CSS de 1372 px : valeurs PSD ÷ 2.
   Fichier commun aux thèmes WordPress et Shopify : ne le modifier qu'ici.
   ========================================================================== */

:root {
  /* Couleurs */
  --paper:        #F5EDE5;  /* fond papier, sous la texture */
  --paper-rose:   #E0CDC1;  /* fond de la section Papeterie */
  --frame:        #F4EAEA;  /* intérieur des cadres packshot et de la scène */
  --ink:          #33241F;  /* texte, filets, bouton plein */
  --ink-muted:    #6E5B53;  /* métadonnées secondaires (hors maquette) */
  --on-video:     #FFFFFF;

  --texture:      url("../img/texture-papier-tile.webp");
  --texture-rose: url("../img/texture-papier-rose-tile.webp");
  --texture-size: 400px;    /* tuile @2x : 800 px affichés sur 400 px CSS */

  /* Fontes */
  --font-display: "IM Fell DW Pica", "Iowan Old Style", Georgia, serif;
  --font-text:    "Newsreader", Georgia, serif;
  --font-label:   "Syne", "Helvetica Neue", Arial, sans-serif;

  /* Échelle typographique (desktop) */
  --fs-display:    70px;   /* titres de sections, IM Fell italique */
  --fs-h2:         44px;   /* titre d'article / de courrier */
  --fs-index:      44px;   /* « Index », IM Fell romain */
  --fs-manifeste:  33px;
  --fs-newsletter: 30px;
  --fs-rubrique:   29px;
  --fs-price:      22px;
  --fs-body:       18px;   /* corrigé : 10 px dans la maquette */
  --fs-lead:       17px;
  --fs-link:       15px;
  --fs-nav:        13px;
  --fs-label:      11px;
  --fs-label-sm:   10px;
  --tracking:      0.14em;
  --tracking-wide: 0.2em;

  /* Mise en page */
  --page-max:   1372px;
  --gutter:     73px;
  --section-y:  128px;
  --rule:       1px solid var(--ink);
  --tap:        44px;     /* zone cliquable minimale */
  --nav-h:      84px;     /* hauteur de la nav */
}

@media (max-width: 1100px) {
  :root {
    --fs-display: 56px;
    --fs-h2:      36px;
    --fs-index:   36px;
    --fs-manifeste: 28px;
    --gutter:     40px;
    --section-y:  100px;
  }
}

@media (max-width: 640px) {
  :root {
    --fs-display:  46px;
    --fs-h2:       30px;
    --fs-index:    32px;
    --fs-manifeste: 24px;
    --fs-newsletter: 26px;
    --fs-rubrique: 24px;
    --fs-body:     17px;
    --gutter:      20px;
    --section-y:   80px;
  }
}