/* =============================================================================
   LODGE-SUITE PANORAMIQUE — tokens.css                            [FONDATION]
   -----------------------------------------------------------------------------
   Variables uniquement. Aucune règle de style, aucun sélecteur autre que :root.
   Ne pas modifier : six pages en dépendent.

   Deux niveaux :
     1. LA PALETTE (--parchemin, --encre, --or…) — valeurs brutes du §2 du brief.
        Elle ne change JAMAIS, nulle part.
     2. LES RÔLES (--fond, --texte, --trait…) — c'est ce que base.css et les pages
        utilisent. Le bloc .nuit de base.css réassigne uniquement les rôles ;
        c'est ce qui permet à n'importe quel composant de passer en registre
        nocturne sans une seule règle supplémentaire.
   Règle : dans une page, on écrit var(--texte-doux), jamais var(--gris-plume).
   ============================================================================= */

:root {

  /* ── 1. PALETTE (§2 du brief, mesurée au pixel dans le dossier imprimé) ─── */
  --parchemin:      #F4EFE4;   /* fond principal (papier)                     */
  --parchemin-2:    #EFE9DC;   /* fond alterné, cartouches, fond de planche   */
  --encre:          #242826;   /* texte principal (noir vert très sombre)     */
  --encre-2:        #3F423E;   /* texte secondaire                            */
  --gris-plume:     #61635D;   /* légendes, méta                              */
  --gris-clair:     #6F6D65;   /* filets secondaires, texte désactivé         */
  --filet:          #CBC5B9;   /* filets, séparateurs (hairlines)             */
  --or:             #A98961;   /* accent unique                               */
  --or-clair:       #C2AB8E;   /* survol de l'accent                          */
  --nuit:           #1B1E1C;   /* fonds sombres (pied, sections nocturnes)    */

  /* déclinaisons nocturnes (calculées sur la même famille, non inventées)     */
  --nuit-2:         #24281F;   /* fond de planche en registre nocturne        */
  --nuit-filet:     #33372F;   /* filet sur fond nuit                         */
  --nuit-encre:     #EDE7DA;   /* titre sur fond nuit                         */
  --nuit-encre-2:   #C3C4BC;   /* texte courant sur fond nuit                 */
  --nuit-plume:     #8C8E86;   /* méta sur fond nuit                          */
  --nuit-pale:      #9A9C93;   /* désactivé sur fond nuit                     */

  /* ── 2. RÔLES (ce que l'on écrit dans les pages) ───────────────────────── */
  --fond:           var(--parchemin);
  --fond-alt:       var(--parchemin-2);
  --fond-planche:   var(--parchemin-2);
  /* Contraste sur parchemin : encre 13,02:1 · encre-2 8,89:1 · plume 5,31:1.
     Tout texte courant long utilise --texte (13,02, au-dessus de la barre visee).
     --texte-meta est réservé aux chaînes courtes en mono très trackée.        */
  --texte:          var(--encre);        /* TOUT le texte courant             */
  --texte-fort:     var(--encre);        /* titres                            */
  --texte-doux:     var(--encre-2);      /* notes, texte secondaire court     */
  --texte-meta:     var(--gris-plume);   /* sur-titres, légendes, méta (mono) */
  --texte-pale:     var(--gris-clair);   /* foliotage, second membre de folio */
  --trait:          var(--filet);        /* tous les filets                   */
  --accent:         var(--or);
  --accent-clair:   var(--or-clair);
  --bouton-fond:    var(--encre);
  --bouton-texte:   var(--parchemin);
  --selection:      rgba(169, 137, 97, .22);

  /* ── 3. FAMILLES (auto-hébergées, fonts.css) ───────────────────────────── */
  --display:  'Cormorant Garamond', 'EB Garamond', Georgia, 'Times New Roman', serif;
  --serif:    'EB Garamond', Georgia, 'Times New Roman', serif;
  --mono:     'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* poids réellement chargés — n'en demander aucun autre (chaque poids = 1 requête)
     Cormorant Garamond 300 normal + 300 italique · EB Garamond 400 normal + 400
     italique · JetBrains Mono 300 normal.                                     */
  --poids-display: 300;
  --poids-corps:   400;
  --poids-mono:    300;

  /* ── 4. ÉCHELLE TYPOGRAPHIQUE FLUIDE ───────────────────────────────────── */
  /* Bornes basses = 390 px de large ; bornes hautes atteintes vers 1500 px.   */
  --t-affiche:  clamp(40px, 6vw, 90px);        /* h1 du seuil (hauteur de capitale ≈ 55 px à 1440) */
  --t-titre-1:  clamp(33px, 4.2vw, 60px);      /* titre de section majeur      */
  --t-titre-2:  clamp(28px, 3.15vw, 45px);     /* titre de section courant     */
  --t-titre-3:  clamp(22px, 2.05vw, 29px);     /* titre d'item (principe…)     */
  --t-titre-4:  clamp(19px, 1.45vw, 22px);     /* titre de plaque, sous-item   */
  --t-totem:    clamp(25px, 3.4vw, 48px);      /* phrase-totem                 */
  --t-chapo:    clamp(17px, 1.3vw, 19.5px);    /* chapô                        */
  --t-corps:    clamp(16.5px, 1.18vw, 17.5px); /* corps                        */
  --t-petit:    15.5px;                        /* texte secondaire, pied       */
  --t-mono:     10.5px;                        /* sur-titre mono               */
  --t-mono-s:   9.5px;                         /* légende de planche, foliotage*/

  --lh-affiche: 1.055;
  --lh-titre:   1.14;
  --lh-titre-s: 1.24;
  --lh-totem:   1.28;
  --lh-chapo:   1.68;
  --lh-corps:   1.78;
  --lh-mono:    1.85;

  --ls-affiche: -.012em;
  --ls-titre:   -.006em;
  --ls-corps:   .004em;
  --ls-mono:    .24em;    /* sur-titres et légendes                           */
  --ls-mono-s:   .2em;   /* nav, mention, légendes : tracking court */
  --ls-mono-l:  .3em;     /* logotype, foliotage                              */

  /* ── 5. COLONNES ET LARGEURS ───────────────────────────────────────────── */
  --page:          1440px;                       /* largeur maximale du contenu */
  --marge:         clamp(28px, 4.6vw, 66px);     /* LA marge. 28 px à 390, 64 à 1400, 66 au-delà.
                                                    Tenue par le texte, les filets ET les images. */
  --axe:          50%;    /* origine unique de la colonne de texte de droite */
  --gouttiere:     clamp(20px, 2.2vw, 32px);     /* écart entre colonnes de grille */
  --mesure:        33em;    /* colonne de texte courant  → 58–72 signes/ligne  */
  --mesure-chapo:  34em;    /* colonne du chapô du seuil → 58–62 signes/ligne  */
  --mesure-courte: 26em;    /* colonne étroite (plaque, note)                 */
  --mesure-titre:  15em;    /* borne d'un titre d'affichage                   */
  --mesure-totem:  17em;    /* borne d'une phrase-totem                       */
  --rail-num:      60px;    /* colonne des numéros romains (desktop)          */
  --rail-num-s:    44px;    /* idem, mobile                                   */

  /* ── 6. ESPACEMENT ─────────────────────────────────────────────────────── */
  /* Échelle nue, pour les ajustements de page.                                */
  --e-1:  8px;
  --e-2:  14px;
  --e-3:  22px;
  --e-4:  clamp(26px, 3vw, 40px);
  --e-5:  clamp(34px, 4vw, 56px);
  --e-6:  clamp(44px, 5.4vw, 78px);
  /* Rythmes nommés, à préférer.                                              */
  --sp-section: clamp(72px, 7.4vw, 111px);  /* d'une section à la suivante    */
  --sp-bloc:    clamp(36px, 4.4vw, 66px);   /* d'un bloc à l'intérieur        */
  --sp-item:    clamp(24px, 3vw, 40px);     /* d'un item de liste au suivant  */
  --sp-tete:    clamp(28px, 3.3vw, 46px);   /* folio → titre de section       */
  /* Séquence du premier écran — la progression 44 / 48 / 100 saluée par le
     jury typographique. Ne pas aplatir : c'est elle qui tient le seuil.       */
  --sp-seuil-1: clamp(24px, 3vw, 44px);     /* folio → titre                  */
  --sp-seuil-2: clamp(26px, 3.3vw, 48px);   /* titre → chapô                  */
  --sp-seuil-3: clamp(30px, 3.6vw, 52px);   /* chapô → porte à pousser        */
  --sp-seuil-4: clamp(56px, 7vw, 100px);    /* dernière ligne → cadre d'image */

  /* ── 7. FILETS ─────────────────────────────────────────────────────────── */
  --filet-e:      1px;      /* hairline standard                              */
  --filet-e-fort: 2px;      /* soulignement actif                             */
  --filet-or-l:   clamp(40px, 5vw, 74px);  /* filets d'or du fleuron          */

  /* ── 8. EN-TÊTE ────────────────────────────────────────────────────────── */
  --entete-pad:      clamp(20px, 2.3vw, 31px);  /* respiration verticale      */
  --entete-pad-min:  clamp(14px, 1.6vw, 20px);  /* idem, état réduit          */
  --entete-h:        clamp(62px, 7vw, 92px);    /* hauteur de réserve         */
  --entete-fond:   color-mix(in srgb, var(--parchemin) 94%, transparent);  /* parchemin translucide      */
  /* l'en-tête reste AU-DESSUS du menu : c'est lui qui porte le bouton Fermer */
  --z-entete: 80;
  --z-menu:   70;
  --z-saut:   99;

  /* ── 9. MOUVEMENT (§8 du brief) ────────────────────────────────────────── */
  --courbe:      cubic-bezier(.22, .61, .36, 1);
  --courbe-sec:  cubic-bezier(.4, 0, .2, 1);
  --d-souligne:  320ms;   /* le souligné se dessine                           */
  --d-court:     420ms;   /* menu, survols de structure                       */
  --d-moyen:     620ms;
  --d-reveal:    1000ms;  /* révélation au défilement                         */
  --d-image:     1400ms;  /* échelle 1.06 → 1.00 d'une planche                */
  --decalage:    80ms;    /* pas entre deux éléments d'un même bloc           */
  --leve:        14px;    /* translation Y d'une révélation                   */
  --leve-image:  1.06;    /* échelle de départ d'une planche                  */
}