/* ==========================================================================
   Les Savons de Jadis — front v2 — tokens.css
   Jetons de design (couleurs, typographie, espacements, rayons, mise en page, mouvement, plans)
   et polices auto-hébergées. À charger en premier ; aucune règle de mise en forme ici.
   Sommaire : 1. Polices  2. Jetons  3. Alias attendus par widgets.css
   ========================================================================== */

/* 1. POLICES ---------------------------------------------------------------- */
/* Playfair Display (titres) et Poppins (texte), sous-ensemble latin, licence SIL Open Font License 1.1.
   Seules les graisses et les styles réellement utilisés sont embarqués. */
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/playfair-display-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/playfair-display-700-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/poppins-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/poppins-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/poppins-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/poppins-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 2. JETONS ----------------------------------------------------------------- */
:root {
  /* Couleurs d'identité (or, vert, texte) ; le crème et le beige ont été retirés : tout est sur blanc */
  --or: #eab308;
  --or-clair: #facc15;
  --or-fonce: #ca8a04;
  --or-chaud: #d97706;
  --vert: #659d44;
  --vert-fonce: #4a7c31;
  --texte: #2d2a25;
  --texte-2: #7a6e5e;
  --blanc: #fff;               /* fond de page et de toutes les surfaces */

  /* Nuances dérivées (mêmes teintes, plus claires ou plus profondes) */
  --or-pale: #fde68a;          /* or dilué : petites touches (pastilles, initiales), jamais en fond de panneau */
  --or-brun: #85590a;          /* or assombri : texte et pictogrammes dorés lisibles sur blanc */
  --or-ambre: #c46806;         /* or chaud assombri : étoiles, jauges (3:1 sur blanc) */
  --vert-profond: #35591f;     /* vert foncé + : liens, pictogrammes, texte (jamais en grand aplat) */
  --vert-rosee: #dce9cf;       /* vert dilué : pastilles, fonds de pictogrammes */
  --vert-brume: #eff4e8;       /* vert très dilué : survols */
  --texte-moyen: #5f5547;      /* texte secondaire */
  --gris-filet: #e7e4de;       /* fins filets : séparent les zones à la place des aplats */
  --gris-contour: #8d877b;     /* contour des champs et contrôles (3:1 sur blanc) */
  --gris-plateau: #f5f5f4;     /* fond d'attente derrière une photo en cours de chargement */

  /* Teintes des panneaux : très pâles et translucides, le filigrane transparaît.
     Valeurs retenues à la validation de la maquette : panneaux sauge, pied sauge soutenue, lettre miel pâle. */
  --sauge-pale: rgba(101, 157, 68, .10);    /* vert artisanal dilué */
  --miel-pale: rgba(250, 204, 21, .13);     /* or clair dilué, lumineux */
  --brume-pale: rgba(163, 191, 191, .20);   /* le bleu-gris du filigrane lui-même */
  /* Deux emplacements de teinte pour les panneaux, en alternance avec des sections blanches */
  --bande-a: var(--sauge-pale);
  --bande-b: var(--sauge-pale);
  --bande-filet: transparent;               /* contour du panneau, utile seulement sans teinte */
  --e-bande: clamp(2.75rem, 1.6rem + 4vw, 4.75rem);
  /* Pied de page : une sauge un peu plus soutenue que les bandes, la barre basse un cran au-dessus */
  --pied-fond: rgba(101, 157, 68, .18);
  --pied-barre: rgba(101, 157, 68, .12);     /* s'ajoute au fond du pied */
  --pied-filet: transparent;
  /* Lettre d'information : fond doux, l'or est réservé au bouton */
  --lettre-fond: rgba(250, 204, 21, .18);    /* miel pâle lumineux */
  --lettre-filet: transparent;

  /* Rôles */
  --fond-page: var(--blanc);
  --trait: var(--gris-filet);
  --trait-champ: var(--gris-contour);
  --action: var(--or);
  --action-survol: var(--or-clair);
  --action-appui: var(--or-fonce);
  --sur-action: var(--texte);  /* jamais de blanc sur or : contraste insuffisant */
  --lien: var(--vert-profond);
  --focus: var(--vert-profond);

  /* Typographie */
  --font-titre: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-texte: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-xs: .8125rem;
  --fs-sm: .875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --fs-2xl: clamp(1.75rem, 1.25rem + 2.2vw, 2.75rem);
  --fs-3xl: clamp(2rem, 1.15rem + 3.4vw, 3.625rem);
  --lh-titre: 1.14;
  --lh-texte: 1.65;

  /* Espacements (base 4 px) */
  --e-1: .25rem;
  --e-2: .5rem;
  --e-3: .75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4rem;
  --e-9: 6rem;
  --e-section: clamp(3rem, 1.75rem + 4.5vw, 5.5rem);

  /* Rayons — du coin adouci au galet */
  --r-xs: 8px;
  --r-sm: 14px;
  --r-md: 22px;
  --r-lg: 32px;
  --r-xl: clamp(28px, 4vw, 48px);
  --r-pilule: 999px;
  /* « savon coupé main » : quatre coins légèrement inégaux */
  --r-savon-a: 30px 38px 28px 36px / 36px 28px 38px 30px;
  --r-savon-b: 38px 28px 36px 30px / 28px 36px 30px 38px;
  --r-savon-c: 28px 36px 38px 30px / 34px 38px 28px 36px;
  --r-savon-d: 36px 30px 30px 38px / 30px 34px 36px 28px;
  /* « galet » : grandes formes organiques pour les photos */
  --r-galet-a: 58% 42% 47% 53% / 46% 52% 48% 54%;
  --r-galet-b: 44% 56% 52% 48% / 55% 45% 55% 45%;

  /* Mise en page */
  --conteneur: 1320px;
  --gouttiere: clamp(1rem, .4rem + 2.6vw, 2.5rem);
  --cible: 44px;               /* cible tactile minimale */
  --entete-h: 76px;
  --barre-mobile-h: 64px;

  /* Mouvement */
  --ease-sortie: cubic-bezier(.23, 1, .32, 1);
  --ease-tiroir: cubic-bezier(.32, .72, 0, 1);
  --d-1: 140ms;
  --d-2: 200ms;
  --d-3: 320ms;

  /* Élévation : réservée aux éléments flottants (jamais aux boutons) */
  --ombre-flottante: 0 18px 40px -18px rgba(53, 42, 18, .38), 0 2px 8px rgba(53, 42, 18, .08);

  /* Plans (z-index) : du contenu aux éléments flottants. Les widgets React gardent leurs propres plans
     (fenêtre « ajouté au panier » 100000, toasts 99999, popins 99000 dans widgets.css). */
  --z-sommaire: 20;            /* barre d'ancres collante de la fiche produit */
  --z-entete: 50;
  --z-suggestions: 60;         /* liste des suggestions de recherche */
  --z-barre-achat: 69;         /* rappel d'achat mobile, juste sous la barre de navigation */
  --z-barre-mobile: 70;
  --z-voile: 80;               /* voile du menu mobile */
  --z-feuille: 90;             /* feuille du menu mobile */
  --z-rideau: 94;              /* voile des tiroirs (filtres, panier) */
  --z-tiroir: 95;              /* tiroirs (filtres, panier) */
  --z-evitement: 100;          /* lien d'évitement */

/* 3. ALIAS POUR widgets.css ------------------------------------------------- */
  /* widgets.css (popins, fenêtre « ajouté au panier ») lit ces variables, avec un repli en dur.
     Elles pointent ici sur les jetons du front v2. */
  --color-primary: var(--or);
  --color-primary-light: var(--or-clair);
  --color-primary-dark: var(--or-fonce);
  --color-secondary: var(--vert);
  --color-secondary-dark: var(--vert-fonce);
  --color-text: var(--texte);
  --color-text-muted: var(--texte-2);
  --color-text-danger: #b91c1c;
}