/* =====================================================================
   CENT POUR CENT DE CUIR — DESIGN SYSTEM / TOKENS
   Maison de maroquinerie premium personnalisable (esprit Berluti)
   Auteur : cuir-design (DA/UX)  —  Zéro CDN, tout local.
   Ce fichier est la SOURCE DE VÉRITÉ visuelle pour cuir-dev.
   Charger en premier dans chaque page :  <link rel="stylesheet" href="tokens.css">
   ===================================================================== */

:root {

  /* ------------------------------------------------------------------
     1. PALETTE — MARRON CUIR (consigne patron)
     Du plus clair (havane/crème) au plus sombre (chocolat/ébène).
     Chaque teinte a un rôle sémantique en plus de sa valeur brute.
     ------------------------------------------------------------------ */

  /* Bruns cuir (héros) */
  --cuir-havane:     #C9A16B;  /* cuir clair, sable doré        */
  --cuir-cognac:     #A0602E;  /* cognac chaud, teinte signature */
  --cuir-tabac:      #7B4A26;  /* tabac, brun moyen             */
  --cuir-chocolat:   #4A2C17;  /* chocolat profond              */
  --cuir-ebene:      #2B1A0F;  /* presque noir, brun torréfié   */

  /* Accents dorés / patine */
  --or-patine:       #B8873B;  /* doré patiné, filets & détails */
  --or-clair:        #D8B877;  /* doré clair, survols/éclats    */
  --patine-rouge:    #8A3B1E;  /* patine rouge cuivrée (accent) */

  /* Neutres crème / ivoire (fonds clairs, respirations) */
  --creme:           #F5EEE1;  /* fond clair principal          */
  --ivoire:          #FBF7EF;  /* fond très clair, cartes       */
  --parchemin:       #EBE0CC;  /* fond alterné, séparateurs     */
  --lin:             #DDCEB4;  /* bordures douces               */

  /* Encres / textes */
  --encre:           #241812;  /* texte principal sur clair     */
  --encre-douce:     #5A4635;  /* texte secondaire              */
  --encre-inverse:   #F5EEE1;  /* texte sur fond sombre         */

  /* États sémantiques (discrets, accordés à la palette) */
  --succes:          #5B6B3A;  /* vert olive/sauge              */
  --alerte:          #9A6410;  /* ambre                         */
  --erreur:          #8A2B1E;  /* rouge brique                  */
  --info:            --cuir-tabac;

  /* ------------------------------------------------------------------
     RÔLES DE SURFACE (utiliser ceux-ci dans les composants)
     ------------------------------------------------------------------ */
  --bg:              var(--creme);
  --bg-alt:          var(--parchemin);
  --surface:         var(--ivoire);
  --surface-sombre:  var(--cuir-ebene);
  --texte:           var(--encre);
  --texte-2:         var(--encre-douce);
  --accent:          var(--cuir-cognac);
  --accent-fort:     var(--cuir-tabac);
  --filet:           var(--or-patine);
  --bordure:         var(--lin);

  /* ------------------------------------------------------------------
     2. TYPOGRAPHIE
     Serif chic pour les titres, sans-serif lisible pour le corps.
     ⚠ Ici : PILES SYSTÈME (fallback sûr, zéro CDN). Pour la prod,
     cuir-dev embarquera en @font-face LOCAL les vraies fontes une
     fois les LICENCES vérifiées (voir 05-zones-gravables.html).
     Recommandé : titres = "Cormorant Garamond" ou "Playfair Display";
     corps = "Inter" ou "Marcellus"/"Jost". CJK : "Noto Serif JP/SC".
     ------------------------------------------------------------------ */
  --font-titre: Georgia, "Cormorant Garamond", "Times New Roman", "Songti SC", serif;
  --font-corps: "Helvetica Neue", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-mono:  "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  /* Fontes de GRAVURE (aperçu) — voir spec zones gravables */
  --font-grav-serif:  Georgia, "Cormorant Garamond", serif;
  --font-grav-script: "Snell Roundhand", "Apple Chancery", "Brush Script MT", cursive;
  --font-grav-cjk:    "Hiragino Mincho ProN", "Songti SC", "Noto Serif JP", serif;

  /* Échelle typographique (ratio ~1.25, mobile-first) */
  --fs-xs:   0.75rem;   /* 12px — légendes, mentions      */
  --fs-sm:   0.875rem;  /* 14px — méta, badges            */
  --fs-base: 1rem;      /* 16px — corps                   */
  --fs-md:   1.125rem;  /* 18px — chapô                   */
  --fs-lg:   1.5rem;    /* 24px — sous-titres             */
  --fs-xl:   2rem;      /* 32px — titres de section       */
  --fs-2xl:  2.75rem;   /* 44px — titres de page          */
  --fs-3xl:  3.75rem;   /* 60px — héros (desktop)         */

  --lh-serre: 1.1;
  --lh-titre: 1.2;
  --lh-corps: 1.65;
  --ls-titre: 0.01em;
  --ls-caps:  0.22em;   /* interlettrage large "luxe" pour capitales */

  /* ------------------------------------------------------------------
     3. ESPACEMENTS (échelle 4px)
     ------------------------------------------------------------------ */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;    --sp-8: 3rem;    --sp-10: 4rem;
  --sp-12: 6rem;    --sp-16: 8rem;

  /* ------------------------------------------------------------------
     4. RAYONS, OMBRES, TRAITS
     Luxe = rayons discrets, ombres douces et chaudes (jamais bleutées).
     ------------------------------------------------------------------ */
  --r-sm: 3px;  --r-md: 6px;  --r-lg: 12px;  --r-pill: 999px;

  --ombre-douce:  0 2px 10px rgba(43,26,15,.08);
  --ombre-carte:  0 8px 30px rgba(43,26,15,.12);
  --ombre-flot:   0 16px 50px rgba(43,26,15,.20);
  --filet-or:     inset 0 0 0 1px var(--or-patine);

  /* Transitions (micro-animations discrètes) */
  --t-rapide: 160ms cubic-bezier(.4,0,.2,1);
  --t-douce:  320ms cubic-bezier(.22,.61,.36,1);

  /* Conteneur */
  --max-w: 1240px;
  --max-w-texte: 720px;
}

/* =====================================================================
   BASE / RESET LÉGER
   ===================================================================== */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--texte);
  font-family: var(--font-corps);
  font-size: var(--fs-base);
  line-height: var(--lh-corps);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-fort); text-decoration: none; }
a:hover { color: var(--accent); }

h1,h2,h3,h4 {
  font-family: var(--font-titre);
  line-height: var(--lh-titre);
  letter-spacing: var(--ls-titre);
  color: var(--encre);
  font-weight: 500;
  margin: 0 0 var(--sp-4);
}
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
p  { margin: 0 0 var(--sp-4); max-width: var(--max-w-texte); }

/* Surtitre "luxe" : petites capitales espacées, filet doré */
.surtitre {
  font-family: var(--font-corps);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--accent);
  margin: 0 0 var(--sp-3);
  display: inline-flex; align-items: center; gap: var(--sp-3);
}
.surtitre::before { content:""; width: 28px; height: 1px; background: var(--filet); display:inline-block; }

/* =====================================================================
   LAYOUT
   ===================================================================== */
.conteneur { width: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: var(--sp-5); }
.section { padding-block: var(--sp-10); }
.section--sombre { background: var(--surface-sombre); color: var(--encre-inverse); }
.section--sombre h1,.section--sombre h2,.section--sombre h3 { color: var(--encre-inverse); }
.section--creme { background: var(--bg-alt); }

/* Filet séparateur doré */
.filet { height: 1px; background: linear-gradient(90deg, transparent, var(--or-patine), transparent); border: 0; margin-block: var(--sp-8); }

/* =====================================================================
   BOUTONS
   ===================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-family: var(--font-corps); font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .9em 1.8em; border-radius: var(--r-sm); border: 1px solid transparent;
  cursor: pointer; transition: all var(--t-rapide); line-height: 1; text-align: center;
}
.btn--primaire { background: var(--cuir-tabac); color: var(--ivoire); }
.btn--primaire:hover { background: var(--cuir-chocolat); color: var(--or-clair); box-shadow: var(--ombre-carte); transform: translateY(-1px); }
.btn--secondaire { background: transparent; color: var(--cuir-tabac); border-color: var(--cuir-tabac); }
.btn--secondaire:hover { background: var(--cuir-tabac); color: var(--ivoire); }
.btn--or { background: var(--or-patine); color: var(--cuir-ebene); }
.btn--or:hover { background: var(--or-clair); }
.btn--fantome { background: transparent; color: var(--encre-inverse); border-color: rgba(245,238,225,.4); }
.btn--fantome:hover { border-color: var(--or-clair); color: var(--or-clair); }
.btn--bloc { width: 100%; }
.btn--lg { padding: 1.1em 2.4em; font-size: var(--fs-base); }

/* =====================================================================
   BADGES
   ===================================================================== */
.badge {
  display: inline-flex; align-items: center; gap: .4em;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: .35em .8em; border-radius: var(--r-pill); line-height: 1;
}
.badge--or       { background: var(--or-clair); color: var(--cuir-ebene); }
.badge--patine   { background: var(--patine-rouge); color: var(--ivoire); }
.badge--nouveau  { background: var(--cuir-tabac); color: var(--ivoire); }
.badge--contour  { background: transparent; border: 1px solid var(--bordure); color: var(--texte-2); }

/* =====================================================================
   CARTES PRODUIT
   ===================================================================== */
.grille-produits {
  display: grid; gap: var(--sp-6);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.carte {
  background: var(--surface); border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--bordure); transition: box-shadow var(--t-douce), transform var(--t-douce);
  display: flex; flex-direction: column;
}
.carte:hover { box-shadow: var(--ombre-carte); transform: translateY(-4px); }
.carte__media { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--bg-alt); }
.carte__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-douce); }
.carte:hover .carte__media img { transform: scale(1.05); }
.carte__badge { position: absolute; top: var(--sp-3); left: var(--sp-3); }
.carte__corps { padding: var(--sp-4) var(--sp-4) var(--sp-5); display:flex; flex-direction:column; gap: var(--sp-2); flex:1; }
.carte__titre { font-family: var(--font-titre); font-size: var(--fs-lg); margin: 0; }
.carte__meta { font-size: var(--fs-sm); color: var(--texte-2); margin: 0; }
.carte__prix { font-family: var(--font-titre); font-size: var(--fs-md); color: var(--accent-fort); margin-top: auto; }
.carte__prix small { font-size: var(--fs-xs); color: var(--texte-2); font-family: var(--font-corps); text-transform: uppercase; letter-spacing: .1em; }

/* =====================================================================
   CHAMPS DE FORMULAIRE
   ===================================================================== */
.champ { margin-bottom: var(--sp-5); }
.champ label, .label {
  display: block; font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: .04em; color: var(--encre); margin-bottom: var(--sp-2);
}
.champ .aide { font-size: var(--fs-xs); color: var(--texte-2); font-weight: 400; }
.input, .select, .textarea {
  width: 100%; font-family: var(--font-corps); font-size: var(--fs-base);
  color: var(--encre); background: var(--ivoire);
  border: 1px solid var(--bordure); border-radius: var(--r-sm);
  padding: .8em 1em; transition: border-color var(--t-rapide), box-shadow var(--t-rapide);
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--or-patine);
  box-shadow: 0 0 0 3px rgba(184,135,59,.2);
}
.textarea { resize: vertical; min-height: 5em; }

/* Groupe d'options "pastilles" (police, rendu, taille) */
.options { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.option {
  border: 1px solid var(--bordure); border-radius: var(--r-md); background: var(--ivoire);
  padding: var(--sp-3) var(--sp-4); cursor: pointer; transition: all var(--t-rapide);
  font-size: var(--fs-sm); display: inline-flex; flex-direction: column; gap: 2px; min-width: 92px;
}
.option:hover { border-color: var(--or-patine); }
.option[aria-pressed="true"], .option.actif {
  border-color: var(--cuir-tabac); background: var(--parchemin); box-shadow: var(--filet-or);
}
.option small { color: var(--texte-2); }

/* Pastille de couleur/matière */
.pastille { width: 34px; height: 34px; border-radius: var(--r-pill); border: 2px solid var(--ivoire); box-shadow: 0 0 0 1px var(--bordure); cursor: pointer; }
.pastille.actif { box-shadow: 0 0 0 2px var(--cuir-tabac); }

/* =====================================================================
   NAV / MENU (très design — desktop + mobile)
   ===================================================================== */
.entete { position: sticky; top: 0; z-index: 50; background: rgba(251,247,239,.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--bordure); }
.entete__barre { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); min-height: 76px; }
.logo { font-family: var(--font-titre); font-size: 1.35rem; letter-spacing: .04em; color: var(--encre); display: inline-flex; align-items: baseline; gap: .35em; }
.logo b { color: var(--accent); font-weight: 600; }
.logo small { font-size: var(--fs-xs); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--texte-2); font-family: var(--font-corps); }
.nav { display: flex; align-items: center; gap: var(--sp-6); }
.nav a { font-size: var(--fs-sm); letter-spacing: .1em; text-transform: uppercase; color: var(--encre); position: relative; padding: .4em 0; }
.nav a::after { content:""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--or-patine); transition: width var(--t-douce); }
.nav a:hover::after, .nav a[aria-current]::after { width: 100%; }
.entete__actions { display: flex; align-items: center; gap: var(--sp-4); }
.icone-btn { background: none; border: 0; cursor: pointer; color: var(--encre); font-size: 1.1rem; display: inline-flex; align-items: center; gap: .3em; }
.burger { display: none; }

/* Mobile */
@media (max-width: 900px) {
  .nav { display: none; position: fixed; inset: 76px 0 auto 0; flex-direction: column; align-items: flex-start; gap: 0; background: var(--surface-sombre); padding: var(--sp-5); }
  .nav.ouvert { display: flex; }
  .nav a { color: var(--encre-inverse); width: 100%; padding: var(--sp-4) 0; border-bottom: 1px solid rgba(245,238,225,.12); letter-spacing: .14em; }
  .burger { display: inline-flex; }
}

/* =====================================================================
   PIED DE PAGE
   ===================================================================== */
.pied { background: var(--cuir-ebene); color: var(--encre-inverse); padding-block: var(--sp-10) var(--sp-6); }
.pied a { color: var(--lin); }
.pied a:hover { color: var(--or-clair); }
.pied__grille { display: grid; gap: var(--sp-8); grid-template-columns: 1.4fr 1fr 1fr 1fr; }
.pied h4 { color: var(--or-clair); font-size: var(--fs-sm); letter-spacing: var(--ls-caps); text-transform: uppercase; font-family: var(--font-corps); }
.pied ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); font-size: var(--fs-sm); }
.pied__bas { margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid rgba(245,238,225,.15); font-size: var(--fs-xs); color: var(--lin); display:flex; justify-content:space-between; flex-wrap:wrap; gap: var(--sp-3); }
@media (max-width: 760px){ .pied__grille { grid-template-columns: 1fr 1fr; } }

/* =====================================================================
   UTILITAIRES
   ===================================================================== */
.centre { text-align: center; }
.centre .surtitre, .centre p { margin-inline: auto; }
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.pile { display: grid; gap: var(--sp-4); }
.rangee { display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: center; }
.muet { color: var(--texte-2); }
.prix-fcfa { font-family: var(--font-titre); color: var(--accent-fort); }

/* Effet "grain de cuir" réutilisable en fond (léger, généré) */
.grain-cuir {
  background-color: var(--cuir-tabac);
  background-image:
    radial-gradient(circle at 20% 30%, rgba(0,0,0,.18) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 60%, rgba(0,0,0,.12) 0 2px, transparent 3px),
    radial-gradient(circle at 45% 85%, rgba(255,255,255,.06) 0 1px, transparent 2px),
    linear-gradient(135deg, var(--cuir-cognac), var(--cuir-chocolat));
  background-size: 22px 22px, 30px 30px, 18px 18px, 100% 100%;
}

/* Accessibilité : focus visible partout */
:focus-visible { outline: 2px solid var(--or-patine); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce){ *{ transition: none !important; scroll-behavior: auto !important; } }