/* ============================================================
   JP Theme — Design tokens
   Source canonique : design « Site Jonathan Pak » (Claude Design, 2026-06-24)
   Palette : Forêt #2E463A (dominant) · Sauge #87997A · Argile #B0875C · Crème #F7F5EF
   Typo    : Marcellus (titrage serif) + Jost (corps / UI)
   ============================================================ */
:root{
  /* --- Couleurs canoniques --- */
  --jp-forest:      #2E463A;  /* DOMINANT — sections sombres, badge, boutons, accents forts */
  --jp-forest-deep: #243A2F;  /* footer + fonds les plus sombres */
  --jp-forest-mid:  #3E5A4A;  /* survols sur forêt */
  --jp-sage:        #87997A;  /* secondaire — pastilles, filets, accents doux */
  --jp-sage-deep:   #5F7468;  /* sauge lisible sur fond clair (texte/survol) */
  --jp-clay:        #B0875C;  /* argile — accent chaud décoratif (chiffres, drop-cap, citation, pastilles) */
  --jp-clay-deep:   #9A7049;
  --jp-clay-ink:    #8A6238;  /* argile assombri — texte argile lisible (eyebrows) sur clair, AA */

  /* --- Surfaces --- */
  --jp-cream:    #F7F5EF;   /* fond de page (crème) */
  --jp-cream-2:  #FBFAF5;   /* surface la plus claire */
  --jp-paper:    #FFFFFF;   /* sections/cartes blanches */

  /* --- Encre / texte --- */
  --jp-ink:        #2B352D; /* titres, near-black vert */
  --jp-ink-soft:   #5C6356; /* corps */
  --jp-ink-muted:  #6B7065; /* microcopy lisible — assombri vs design #8C9079 pour contraste AA */

  /* --- Texte sur fond forêt --- */
  --jp-on-dark:      #F7F5EF; /* titres clairs */
  --jp-on-dark-body: #A7B29C; /* corps sur forêt */
  --jp-on-dark-soft: #CDD6C8; /* liens / nav sur forêt */
  --jp-on-dark-mut:  #97A89A; /* labels sur forêt foncé — éclairci pour contraste AA */

  /* --- Filets / bordures --- */
  --jp-line:       #E7E3D6; /* bordures sur clair */
  --jp-line-soft:  #ECEADF; /* bordures discrètes */
  --jp-line-card:  #E0DCCD; /* filets de carte/citation */
  --jp-line-btn:   #C9C4B3; /* contour boutons secondaires */
  --jp-line-dark:  #46604F; /* filets sur forêt */
  --jp-line-dark2: #335043; /* filet bas de footer */

  /* --- Typographie --- */
  --jp-serif: 'Marcellus', Georgia, 'Times New Roman', serif;
  --jp-body:  'Jost', 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --jp-ui:    'Jost', system-ui, -apple-system, sans-serif;

  /* --- Rayons --- */
  --jp-r-sm:  8px;
  --jp-r-md:  16px;
  --jp-r-lg:  18px;
  --jp-r-xl:  24px;
  --jp-pill:  999px;

  /* --- Ombres --- */
  --jp-shadow-sm:   0 1px 3px rgba(0,0,0,.07);
  --jp-shadow-card: 0 24px 60px -28px rgba(46,70,58,.35);
  --jp-shadow-cta:  0 28px 60px -30px rgba(46,70,58,.55);

  /* --- Layout --- */
  --jp-maxw:        1200px;
  --jp-maxw-narrow: 720px;
  --jp-maxw-prose:  680px;
  --jp-section-y:   clamp(4.5rem, 9vw, 5.75rem);
  --jp-gutter:      clamp(1.25rem, 5vw, 2rem);

  /* ============================================================
     Alias de compatibilité — anciens noms de tokens repointés sur
     la nouvelle palette pour que les composants déjà écrits
     (article single, prose, cartes…) adoptent le design sans casse.
     ============================================================ */
  --jp-green-600: var(--jp-sage);
  --jp-green-700: var(--jp-forest-mid);
  --jp-green-800: var(--jp-forest);   /* liens, em, accents */
  --jp-green-900: var(--jp-forest);
  --jp-gold:      var(--jp-clay);
  --jp-rose:      var(--jp-clay);
  --jp-terra:     var(--jp-clay);     /* ex-accent « terra cotta » → argile */
  --jp-terra-deep:var(--jp-clay-deep);
  --jp-sage-soft: var(--jp-on-dark-soft);
  --jp-tint:      #F1EDE3;            /* fond de carte chaud (author, cta-card, partner-note) */
  --jp-warm-cream:var(--jp-cream);
  --jp-warm-ink:  var(--jp-ink);
  --jp-warm-tint: #EFECE1;            /* survol dropdown */
  --jp-footer-dark:var(--jp-forest-deep);
  --jp-line-on-dark: var(--jp-line-dark);
}

/* Reset minimal — n'écrase volontairement PAS les pages Elementor (qui ont leur propre cascade).
   Ces règles ne s'appliquent qu'au markup natif du thème (.jp-*).
   Le chrome (header/footer/topbar) est HORS de .jp-main : on lui applique aussi border-box,
   sinon .jp-wrap (width:100% + padding) déborde horizontalement (cause du « trop large » mobile). */
.jp-main *, .jp-main *::before, .jp-main *::after,
.jp-topbar, .jp-topbar *, .jp-topbar *::before, .jp-topbar *::after,
.jp-hdr, .jp-hdr *, .jp-hdr *::before, .jp-hdr *::after,
.jp-site-footer, .jp-site-footer *, .jp-site-footer *::before, .jp-site-footer *::after { box-sizing: border-box; }