/* ==========================================================================
   ECLAU : jetons de design (design tokens)
   SOURCE UNIQUE : Brandbook Eclau (PDF, janvier 2026, réalisé par Lisa Simon).
   Les couleurs ont été vérifiées en mesurant les pastilles du brandbook.
   Copier ce fichier tel quel dans le projet (css/tokens.css) et le dossier
   assets/fonts/ vers fonts/ du site.
   ========================================================================== */

/* --- Polices auto-hébergées (pas d'appel à Google Fonts : RGPD) ----------- */
/* Nourd : seule l'épaisseur Bold est utilisée (brandbook p.17)              */
@font-face {
  font-family: "Nourd";
  src: url("../fonts/nourd-bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
/* Montserrat : seule l'épaisseur Regular est utilisée (brandbook p.18)      */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
/* Wonderful Branding (brandbook p.20). ATTENTION : le fichier disponible est
   la version « Personal Use ». Licence commerciale obligatoire avant mise en
   ligne (Din Studio).                                                        */
@font-face {
  font-family: "Wonderful Branding";
  src: url("../fonts/wonderful-branding.woff2") format("woff2"); /* fichier NON versionné (licence), voir README */
  font-weight: 400; font-style: normal; font-display: swap;
}
/* Georgia (brandbook p.19) : police système, Regular + Bold, rien à charger. */

:root {
  /* --- Palette officielle (brandbook p.14) ------------------------------- */
  --eclau-jet-stream:        #E9E1D7; /* base neutre : fonds, zones de lecture */
  --eclau-almond-peach:      #CBBCB3; /* base neutre : fonds, éléments secondaires */
  --eclau-pomegranate:       #77333F; /* couleur principale, emblématique */
  --eclau-chocolate-fondant: #52312A; /* secondaire : remplace le noir → textes */
  --eclau-apricot:           #D58241; /* accent : touches ponctuelles */
  /* Logos uniquement (brandbook p.7-8) */
  --eclau-noir:              #000000;
  --eclau-blanc:             #FFFFFF;
  /* Teinte de mise en page utilisée dans le brandbook (panneaux p.10, 17-20),
     dérivée de Jet Stream, pour les grands fonds très clairs.               */
  --eclau-jet-stream-clair:  #F3F0E9;

  /* --- Rôles : utiliser CES noms dans le code ---------------------------- */
  --color-bg:             var(--eclau-jet-stream-clair); /* fond papier chaud, plus doux que le blanc */
  --color-bg-soft:        var(--eclau-jet-stream);
  --color-bg-neutral:     var(--eclau-jet-stream);
  --color-bg-neutral-2:   var(--eclau-almond-peach);
  --color-bg-brand:       var(--eclau-pomegranate);   /* blocs forts, pages de section */
  --color-bg-deep:        var(--eclau-chocolate-fondant);
  --color-text:           var(--eclau-chocolate-fondant); /* textes ET titres (brandbook p.16) */
  --color-heading:        var(--eclau-chocolate-fondant);
  --color-brand:          var(--eclau-pomegranate);   /* logo, boutons, liens, détails forts */
  --color-text-on-brand:  var(--eclau-jet-stream);    /* texte sur Pomegranate (cf. couvertures) */
  --color-accent:         var(--eclau-apricot);       /* décor uniquement, jamais du texte */
  --color-border:         var(--eclau-almond-peach);

  /* --- Familles et rôles typographiques (brandbook p.16-20) ------------ */
  --font-titre:  "Nourd", "Montserrat", system-ui, sans-serif;       /* H1/H2 (Bold) */
  --font-ui:     "Montserrat", system-ui, -apple-system, sans-serif;  /* H3/H4, légendes, notes, boutons (Regular) */
  --font-texte:  Georgia, "Times New Roman", serif;                   /* corps de texte (Regular/Bold) */
  --font-script: "Wonderful Branding", "Brush Script MT", cursive;   /* annotations ponctuelles */

  /* --- Échelle (mobile → desktop) --------------------------------------- */
  --fs-h1:     clamp(2.125rem, 1.2rem + 4vw, 4rem);      /* 34 → 64px */
  --fs-h2:     clamp(1.625rem, 1.1rem + 2.2vw, 2.5rem);  /* 26 → 40px */
  --fs-h3:     clamp(1.25rem, 1rem + 1.1vw, 1.75rem);    /* 20 → 28px, Montserrat */
  --fs-h4:     clamp(1.0625rem, .95rem + .5vw, 1.25rem); /* 17 → 20px, Montserrat */
  --fs-body:   1rem;                                     /* 16px Georgia */
  --fs-small:  .875rem;                                  /* légendes, notes (Montserrat) */
  --fs-script: clamp(1.25rem, 1rem + 1vw, 1.75rem);      /* annotations */
  --fs-numero: clamp(6rem, 3rem + 14vw, 16rem);          /* grands numéros de section */
  --lh-titre: 1.15;
  --lh-texte: 1.6;

  /* --- Formes : courbes, pas d'angles stricts (brandbook p.22) ---------- */
  --radius-sm:   12px;
  --radius-md:   24px;
  --radius-lg:   40px;
  --radius-pill: 999px;

  /* --- Mise en page ------------------------------------------------------ */
  --container-max: 1260px;
  --gutter:        clamp(1.25rem, 4vw, 2.5rem);
  --section-y:     clamp(4rem, 8vw, 7.5rem);
  --shadow-papier: 0 14px 30px -14px rgba(82, 49, 42, .30);

  /* --- Logo (brandbook p.9-10) ------------------------------------------- */
  --logo-zone-protection: 10%;   /* ≈ 2 × hauteur de la baseline, en % de la largeur du logo */
  --logo-min-avec-baseline: 200px;
  --logo-min-sans-baseline: 100px;

  --ease:  cubic-bezier(.2, .7, .2, 1);
  --duree: .35s;
}
@media (prefers-reduced-motion: reduce) { :root { --duree: 0s; } }