/*
 * ═══════════════════════════════════════════════════════════════
 *  GENTOLOGIE MÉDIA — DESIGN TOKENS
 *  Version : 1.0
 *  Usage   : Inclure en premier dans le thème WordPress
 *             @import 'variables.css';
 *  Note    : Toutes les valeurs du site doivent référencer
 *            ces variables — jamais de valeurs en dur.
 * ═══════════════════════════════════════════════════════════════
 */

:root {

  /* ──────────────────────────────────────────
     1. COULEURS — PALETTE DE BASE
     ────────────────────────────────────────── */

  /* Fonds (du plus foncé au plus clair) */
  --color-dark-900:  #020810;   /* footer extrême, topbar foncé       */
  --color-dark-800:  #030d18;   /* fond topbar, footer principal       */
  --color-dark-700:  #091522;   /* nav, fond section sombre primaire   */
  --color-dark-600:  #0B1929;   /* fond hero, sections sombres         */
  --color-dark-500:  #0f2237;   /* fond cards sombres, sections alt    */

  /* Crème / Texte clair */
  --color-cream-100: #FFF5E6;   /* texte principal sur fond sombre     */
  --color-cream-200: #e8dfc4;   /* texte secondaire / titres alt       */
  --color-cream-300: rgba(245,237,214,.72); /* texte em, italiques     */
  --color-cream-400: rgba(245,237,214,.55); /* texte corps sur fond sombre */
  --color-cream-500: rgba(245,237,214,.38); /* texte discret           */
  --color-cream-600: rgba(245,237,214,.22); /* texte très discret      */

/* Bronze cuivre — Accent principal (base: #9C5336) */
--color-bronze-100: #9C5336;               /* cuivre principal — titres, icônes */
--color-bronze-200: #B06344;               /* hover / interaction */
--color-bronze-300: rgba(156,83,54,.55);   /* cuivre semi-transparent */
--color-bronze-400: rgba(156,83,54,.32);   /* bordures */
--color-bronze-500: rgba(156,83,54,.18);   /* éléments discrets */
--color-bronze-600: rgba(156,83,54,.10);   /* fonds subtils */
--color-bronze-700: rgba(156,83,54,.05);   /* arrière-plan décoratif */

  /* Texte sur fond clair */
  --color-ink-900:  #0B1929;                /* texte principal sur crème       */
  --color-ink-700:  rgba(11,25,41,.72);     /* texte secondaire                */
  --color-ink-500:  rgba(11,25,41,.52);     /* texte corps                     */
  --color-ink-300:  rgba(11,25,41,.35);     /* texte discret                   */
  --color-ink-100:  rgba(11,25,41,.15);     /* séparateurs                     */

  /* Couleurs sémantiques */
  --color-success: #4a7c59;
  --color-warning: #c8a84b;    /* réutilise l'or */
  --color-error:   #8b3a3a;
  --color-info:    #2d5a7b;

  /* ──────────────────────────────────────────
     2. COULEURS — ALIAS SÉMANTIQUES
     (référencer toujours ces alias dans les
      composants, jamais la palette brute)
     ────────────────────────────────────────── */

  /* Arrière-plans */
  --bg-site:         var(--color-dark-800);
  --bg-nav:          var(--color-dark-700);
  --bg-hero:         var(--color-dark-600);
  --bg-section-dark: var(--color-dark-600);
  --bg-section-mid:  var(--color-dark-500);
  --bg-section-alt:  var(--color-dark-700);
  --bg-section-light:var(--color-cream-100);
  --bg-card-dark:    var(--color-dark-500);
  --bg-footer:       var(--color-dark-800);
  --bg-footer-bar:   var(--color-dark-900);
  --bg-topbar:       var(--color-dark-800);

  /* Texte */
  --text-on-dark:       var(--color-cream-100);
  --text-on-dark-muted: var(--color-cream-400);
  --text-on-dark-faint: var(--color-cream-600);
  --text-on-light:      var(--color-ink-900);
  --text-on-light-muted:var(--color-ink-500);
  --text-on-light-faint:var(--color-ink-300);
  --text-accent:        var(--color-bronze-100);
  --text-em:            var(--color-cream-300);

  /* Bordures */
  --border-bronze:        var(--color-bronze-400);
  --border-bronze-subtle: var(--color-bronze-500);
  --border-dark:        var(--color-dark-700);

  /* Accent */
  --accent:             var(--color-bronze-100);
  --accent-hover:       var(--color-bronze-200);
  --accent-muted:       var(--color-bronze-400);
  --accent-subtle:      var(--color-bronze-600);

  /* Retrocompatibilité avec le code existant */
  --n:  var(--color-dark-600);
  --n2: var(--color-dark-500);
  --n3: var(--color-dark-700);
  --n4: var(--color-dark-800);
  --c:  var(--color-cream-100);
  --c2: var(--color-cream-200);
  --g:  var(--color-bronze-100);
  --g2: var(--color-bronze-400);
  --g3: var(--color-bronze-500);
  --g4: var(--color-bronze-600);


  /* ──────────────────────────────────────────
     3. TYPOGRAPHIE — FAMILLES
     ────────────────────────────────────────── */

  --font-serif:  'Cormorant Garant', 'Palatino Linotype', Palatino, Georgia, serif;
  --font-sans:   'Jost', 'Gill Sans MT', Optima, Candara, sans-serif;
  --font-mono:   'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* Alias par usage */
  --font-display:   var(--font-serif);   /* titres, hero, marque        */
  --font-body:      var(--font-sans);    /* navigation, corps, labels   */
  --font-ui:        var(--font-sans);    /* boutons, badges, étiquettes */


  /* ──────────────────────────────────────────
     4. TYPOGRAPHIE — ÉCHELLE DE TAILLE
     Fluide (clamp) : s'adapte de 375px à 1440px
     Format : clamp(min, préféré, max)
     ────────────────────────────────────────── */

  --text-2xs:  clamp(0.5rem,   0.55vw,  0.5625rem);  /*  8-9px  — micro labels     */
  --text-xs:   clamp(0.5625rem,0.6vw,   0.625rem);   /*  9-10px — topbar, notes    */
  --text-sm:   clamp(0.625rem, 0.68vw,  0.6875rem);  /* 10-11px — nav, eyebrows    */
  --text-base: clamp(0.6875rem,0.8vw,   0.75rem);    /* 11-12px — légendes         */
  --text-md:   clamp(0.75rem,  0.9vw,   0.8125rem);  /* 12-13px — corps compact    */
  --text-body: clamp(0.8125rem,0.95vw,  0.875rem);   /* 13-14px — corps principal  */
  --text-lg:   clamp(0.875rem, 1.1vw,   1rem);       /* 14-16px — corps large      */
  --text-xl:   clamp(1rem,     1.3vw,   1.125rem);   /* 16-18px — sous-titres      */
  --text-2xl:  clamp(1.125rem, 1.6vw,   1.375rem);   /* 18-22px — titres petits    */
  --text-3xl:  clamp(1.375rem, 2vw,     1.75rem);    /* 22-28px — titres cards     */
  --text-4xl:  clamp(1.75rem,  2.8vw,   2.5rem);     /* 28-40px — titres sections  */
  --text-5xl:  clamp(2.5rem,   4vw,     3.5rem);     /* 40-56px — titres h2        */
  --text-6xl:  clamp(3.5rem,   5.5vw,   4.5rem);     /* 56-72px — hero h1          */
  --text-7xl:  clamp(4.5rem,   8vw,     6.5rem);     /* 72-104px — display majeur  */


  /* ──────────────────────────────────────────
     5. TYPOGRAPHIE — POIDS
     ────────────────────────────────────────── */

  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;


  /* ──────────────────────────────────────────
     6. TYPOGRAPHIE — INTERLIGNE
     ────────────────────────────────────────── */

  --leading-none:    1;
  --leading-tight:   1.08;   /* grands titres                    */
  --leading-snug:    1.2;    /* titres moyens                    */
  --leading-normal:  1.5;    /* corps compact                    */
  --leading-relaxed: 1.72;   /* corps principal                  */
  --leading-loose:   1.9;    /* corps avec emphasis, longues col */


  /* ──────────────────────────────────────────
     7. TYPOGRAPHIE — ESPACEMENT DES LETTRES
     ────────────────────────────────────────── */

  --tracking-tighter: -0.04em;  /* grands displays serif           */
  --tracking-tight:   -0.02em;  /* titres h2-h3                   */
  --tracking-normal:   0em;     /* corps                          */
  --tracking-wide:     0.06em;  /* texte sans-serif corps         */
  --tracking-wider:    0.12em;  /* footer, liens nav              */
  --tracking-widest:   0.22em;  /* nav links                      */
  --tracking-ultra:    0.38em;  /* labels, eyebrows, badges       */


  /* ──────────────────────────────────────────
     8. ESPACEMENT — ÉCHELLE (base 4px)
     ────────────────────────────────────────── */

  --space-px:  1px;
  --space-0-5: 0.125rem;  /*  2px */
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-7:   1.75rem;   /* 28px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-14:  3.5rem;    /* 56px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-28:  7rem;      /* 112px */
  --space-32:  8rem;      /* 128px */
  --space-40:  10rem;     /* 160px */
  --space-48:  12rem;     /* 192px */
  --space-56:  14rem;     /* 224px */
  --space-64:  16rem;     /* 256px */


  /* ──────────────────────────────────────────
     9. ESPACEMENT — ALIAS SÉMANTIQUES
     ────────────────────────────────────────── */

  /* Sections */
  --section-padding-y:     clamp(4rem, 7vw, 6rem);   /* padding vertical sections  */
  --section-padding-x:     clamp(1.5rem, 5vw, 3.5rem); /* padding horizontal        */
  --section-gap:           var(--space-14);            /* gap entre éléments section */

  /* En-têtes de section */
  --section-header-mb:     clamp(2.5rem, 4vw, 3.5rem);

  /* Conteneurs */
  --container-max:         1400px;
  --container-narrow:      860px;
  --container-wide:        1600px;
  --container-padding:     var(--section-padding-x);

  /* Composants */
  --nav-height:            64px;
  --topbar-height:         30px;
  --card-padding:          clamp(1.5rem, 3vw, 2.75rem);
  --card-gap:              2px;   /* gap de la grille de cards    */
  --grid-gap:              1px;   /* gap interne des grilles      */

  /* Boutons */
  --btn-padding-y:         0.875rem;
  --btn-padding-x:         2.125rem;

  /* Formulaires */
  --input-padding-y:       0.875rem;
  --input-padding-x:       1.25rem;


  /* ──────────────────────────────────────────
     10. BORDURES & ARRONDIS
     ────────────────────────────────────────── */

  --radius-none:   0;
  --radius-sm:     2px;
  --radius-md:     4px;
  --radius-lg:     8px;
  --radius-xl:     16px;
  --radius-2xl:    24px;
  --radius-full:   9999px;

  /* Épaisseurs */
  --border-thin:   1px;
  --border-base:   1px;
  --border-thick:  2px;

  /* Note : le design Gentologie est volontairement sans arrondi (--radius-none).
     Utiliser --radius-sm au maximum pour les éléments interactifs si besoin. */


  /* ──────────────────────────────────────────
     11. OMBRES
     ────────────────────────────────────────── */

  --shadow-xs:  0 1px 4px rgba(0,0,0,.2);
  --shadow-sm:  0 2px 12px rgba(0,0,0,.28);
  --shadow-md:  0 8px 32px rgba(0,0,0,.38);
  --shadow-lg:  0 16px 56px rgba(0,0,0,.48);
  --shadow-xl:  0 28px 80px rgba(0,0,0,.55);
  --shadow-2xl: 0 48px 120px rgba(0,0,0,.65);

  /* Ombre nav scrollée */
  --shadow-nav: 0 2px 48px rgba(0,0,0,.45);

  /* Ombre bronze subtile (pour cartes featured) */
  --shadow-bronze: 0 8px 32px rgba(200,168,75,.12);


  /* ──────────────────────────────────────────
     12. TRANSITIONS & ANIMATIONS
     ────────────────────────────────────────── */

  /* Durées */
  --duration-instant: 100ms;
  --duration-fast:    200ms;
  --duration-base:    280ms;
  --duration-slow:    400ms;
  --duration-slower:  600ms;
  --duration-slowest: 800ms;

  /* Courbes */
  --ease-default:  cubic-bezier(0.4, 0, 0.2, 1);  /* standard Material        */
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);     /* entrée                   */
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);     /* sortie                   */
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1); /* effet ressort léger  */
  --ease-editorial:cubic-bezier(0.76, 0, 0.24, 1); /* mouvement éditorial      */

  /* Transitions prédéfinies */
  --transition-base:  all var(--duration-base) var(--ease-default);
  --transition-fast:  all var(--duration-fast) var(--ease-default);
  --transition-slow:  all var(--duration-slow) var(--ease-default);
  --transition-color: color var(--duration-fast) var(--ease-default),
                      background-color var(--duration-fast) var(--ease-default),
                      border-color var(--duration-fast) var(--ease-default);


  /* ──────────────────────────────────────────
     13. Z-INDEX — COUCHES
     ────────────────────────────────────────── */

  --z-below:    -1;
  --z-base:      0;
  --z-raised:    10;    /* cards au hover                  */
  --z-dropdown:  40;    /* mega-menu, dropdowns            */
  --z-sticky:    50;    /* éléments sticky                 */
  --z-nav:       99;    /* navigation principale           */
  --z-overlay:   200;   /* overlays, modales backdrop      */
  --z-modal:     300;   /* modales                         */
  --z-toast:     400;   /* notifications                   */
  --z-progress:  1000;  /* barre de progression scroll     */
  --z-supreme:   9999;  /* urgence absolue                 */


  /* ──────────────────────────────────────────
     14. LAYOUT — GRILLES
     ────────────────────────────────────────── */

  --grid-cols-1:  repeat(1,  minmax(0, 1fr));
  --grid-cols-2:  repeat(2,  minmax(0, 1fr));
  --grid-cols-3:  repeat(3,  minmax(0, 1fr));
  --grid-cols-4:  repeat(4,  minmax(0, 1fr));
  --grid-cols-12: repeat(12, minmax(0, 1fr));

  /* Ratios brands */
  --grid-brands-desktop: 1.5fr 1fr;  /* flagship + stack         */
  --grid-brands-tablet:  1fr;         /* empilé sur tablette      */


  /* ──────────────────────────────────────────
     15. COMPOSANTS — TOKENS SPÉCIFIQUES
     ────────────────────────────────────────── */

  /* Navigation */
  --nav-bg:            var(--bg-nav);
  --nav-bg-scrolled:   rgba(9, 21, 34, 0.90);
  --nav-blur:          24px;
  --nav-border:        var(--border-bronze);
  --nav-link-color:    var(--color-cream-500);
  --nav-link-hover:    var(--color-bronze-100);
  --nav-logo-color:    var(--color-cream-100);
  --nav-logo-accent:   var(--color-bronze-100);

  /* Mega-menu */
  --mega-bg:           var(--bg-card-dark);
  --mega-border:       var(--border-bronze);
  --mega-top-border:   var(--color-bronze-100);
  --mega-brand-bg:     var(--bg-section-alt);
  --mega-brand-hover:  var(--color-bronze-600);

  /* Boutons */
  --btn-primary-bg:      var(--color-bronze-100);
  --btn-primary-text:    var(--color-dark-600);
  --btn-primary-hover:   var(--color-bronze-200);
  --btn-outline-border:  rgba(245,237,214,.2);
  --btn-outline-text:    var(--color-cream-100);
  --btn-outline-hover-border: var(--color-bronze-100);
  --btn-outline-hover-text:   var(--color-bronze-100);

  /* Cards */
  --card-bg:           var(--bg-card-dark);
  --card-bg-hover:     #0d1e30;
  --card-bar-color:    var(--color-bronze-100);
  --card-accent-color: var(--color-bronze-700);

  /* Marquee */
  --marquee-bg:        var(--color-bronze-100);
  --marquee-text:      var(--color-dark-600);
  --marquee-speed:     30s;

  /* Scroll reveal */
  --reveal-distance:   24px;
  --reveal-duration:   var(--duration-slowest);

  /* Barre de progression */
  --progress-color:    var(--color-bronze-100);
  --progress-height:   2px;

  /* Labels / Eyebrows */
  --label-color:       var(--color-bronze-100);
  --label-size:        var(--text-sm);
  --label-tracking:    var(--tracking-ultra);

  /* Liens édito */
  --link-color:        var(--color-bronze-100);
  --link-border:       var(--color-bronze-400);
  --link-hover-border: var(--color-bronze-100);

  /* Stats */
  --stat-number-size:  var(--text-7xl);
  --stat-bg:           var(--color-cream-100);
  --stat-text:         var(--color-dark-600);

  /* Footer */
  --footer-title-color:  var(--color-bronze-100);
  --footer-text-color:   rgba(245,237,214,.28);
  --footer-link-hover:   rgba(245,237,214,.58);

  /* Formulaires */
  --input-bg:          var(--bg-card-dark);
  --input-border:      var(--border-bronze-subtle);
  --input-border-focus:var(--color-bronze-100);
  --input-text:        var(--color-cream-100);
  --input-placeholder: var(--color-cream-600);

}


/* ─────────────────────────────────────────────
   TOKENS RESPONSIFS — surcharges par breakpoint
   ───────────────────────────────────────────── */

/* Tablette (< 1024px) */
@media (max-width: 1024px) {
  :root {
    --nav-height:         56px;
    --section-padding-x:  clamp(1.25rem, 4vw, 2.5rem);
    --card-padding:       clamp(1.25rem, 2.5vw, 2rem);
  }
}

/* Mobile (< 768px) */
@media (max-width: 768px) {
  :root {
    --nav-height:            52px;
    --topbar-height:         0px;     /* masqué sur mobile              */
    --section-padding-y:     clamp(3rem, 8vw, 4.5rem);
    --section-padding-x:     1.25rem;
    --card-padding:          1.25rem;
    --grid-brands-desktop:   1fr;     /* 1 colonne sur mobile           */
    --marquee-speed:         20s;     /* plus rapide sur petit écran    */
  }
}

/* Grand écran (> 1600px) */
@media (min-width: 1600px) {
  :root {
    --section-padding-x: 5rem;
  }
}


/* ─────────────────────────────────────────────
   THÈME CLAIR (si utilisé un jour)
   Préfixe sur <body class="theme-light">
   ───────────────────────────────────────────── */

body.theme-light {
  --bg-site:          var(--color-cream-100);
  --bg-section-dark:  var(--color-cream-200);
  --bg-card-dark:     #f0ead6;
  --text-on-dark:     var(--color-ink-900);
  --text-on-dark-muted: var(--color-ink-500);
  /* ... à compléter si le thème clair est développé */
}


/* ─────────────────────────────────────────────
   RESET MINIMAL & BASE
   ───────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--text-on-dark);
  background-color: var(--bg-site);
  overflow-x: hidden;
}

img, video {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  font-family: var(--font-ui);
  border: none;
  background: none;
}


/* ─────────────────────────────────────────────
   UTILITAIRES — CLASSES DE BASE
   (complément aux tokens, utilisables en Gutenberg)
   ───────────────────────────────────────────── */

/* Conteneur */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}
.container--narrow {
  max-width: var(--container-narrow);
}

/* Sections */
.section {
  padding-top: var(--section-padding-y);
  padding-bottom: var(--section-padding-y);
  padding-left: var(--section-padding-x);
  padding-right: var(--section-padding-x);
}
.section--dark   { background: var(--bg-section-dark); color: var(--text-on-dark); }
.section--mid    { background: var(--bg-section-mid);  color: var(--text-on-dark); }
.section--alt    { background: var(--bg-section-alt);  color: var(--text-on-dark); }
.section--light  { background: var(--bg-section-light);color: var(--text-on-light);}

/* Label / Eyebrow */
.label {
  font-family: var(--font-ui);
  font-size: var(--label-size);
  font-weight: var(--weight-medium);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--label-color);
}

/* Titres display */
.display-xl {
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
}

/* Bouton principal */
.btn {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  transition: var(--transition-base);
}
.btn--primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}
.btn--primary:hover {
  background: var(--btn-primary-hover);
  transform: translateY(-1px);
}
.btn--outline {
  background: transparent;
  color: var(--btn-outline-text);
  border: var(--border-thin) solid var(--btn-outline-border);
}
.btn--outline:hover {
  border-color: var(--btn-outline-hover-border);
  color: var(--btn-outline-hover-text);
}

/* Scroll reveal (JS-activé) */
.reveal {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition: opacity var(--reveal-duration) var(--ease-editorial),
              transform var(--reveal-duration) var(--ease-editorial);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Séparateur bronze */
.rule {
  width: 44px;
  height: var(--border-thick);
  background: var(--accent);
}
.rule--center { margin-left: auto; margin-right: auto; }