/* =============================================
   KIZA — themes.css
   Per-page colour palettes via body class.
   Each theme overrides the CSS custom properties
   declared in global.css — no other CSS changes.

   Classes:
     theme-hub        → index.html         (noir / blanc / gris)
     theme-infirmier  → infirmier.html     (bleu ardoise)
     theme-tiandao    → tiandao.html       (vert sauge)
     theme-KYMA    → KYMA.html       (orange brûlé)
     theme-apps       → makorya-apps.html  (violet encre)
     theme-livres     → makorya-livres.html(rouge cramoisi)
     theme-trail      → kiza-trail.html    (bleu nuit — déjà sombre)
   ============================================= */

/* ─────────────────────────────────────────────
   1. HUB  — noir / blanc / gris minimaliste
   ───────────────────────────────────────────── */
.theme-hub {
  --bg:           #F5F5F3;
  --bg-soft:      #EBEBEA;
  --bg-mid:       #DEDEDD;
  --navy:         #111110;
  --navy-soft:    #242422;
  --accent:       #111110;
  --accent-light: #383836;
  --accent-dim:   #555553;
  --slate:        #4A4A48;
  --muted:        #888886;
  --muted-light:  #AAAAAA;
  --border:       rgba(17, 17, 16, 0.1);
  --border-accent:rgba(17, 17, 16, 0.18);

  /* remap the "blue" aliases used throughout global + inner */
  --blue:         var(--accent);
  --blue-light:   var(--accent-light);
  --blue-dim:     var(--accent-dim);
  --border-blue:  var(--border-accent);
}

/* scrollbar */
.theme-hub::-webkit-scrollbar-thumb { background: #888; }

/* cursor */
.theme-hub .cursor          { background: var(--accent); }
.theme-hub .cursor-follower { border-color: rgba(17,17,16,0.25); }

/* nav active / hover tint */
.theme-hub .nav-links a:hover,
.theme-hub .nav-links a.nav-active { color: var(--accent); background: rgba(17,17,16,0.06); }
.theme-hub .nav.scrolled { background: rgba(245,245,243,0.93); }

/* hub card hover bg-word colour already neutral — override accent tint */
.theme-hub .hub-card:hover { background: var(--bg-mid); }
.theme-hub .hub-bg-word    { color: rgba(17,17,16,0.04); }
.theme-hub .hub-card:hover .hub-bg-word { color: rgba(17,17,16,0.08); }
.theme-hub .hub-label      { color: var(--slate); }
.theme-hub .hub-icon       { color: var(--slate); }
.theme-hub .hub-arrow      { color: var(--muted); }
.theme-hub .hub-card:hover .hub-arrow { color: var(--accent); }

/* full-width trail card stays dark */
.theme-hub .hub-full { background: var(--navy) !important; }
.theme-hub .hub-full:hover { background: var(--navy-soft) !important; }

/* vision quote */
.theme-hub .vision-quote em { color: var(--accent); }

/* CTA band */
.theme-hub .cta-band { background: var(--navy); }

/* section tag, section-title em, divider, dot */
.theme-hub .section-tag,
.theme-hub .page-hero-eyebrow { color: var(--slate); }
.theme-hub .section-title em  { color: var(--accent); }
.theme-hub .divider           { background: var(--accent); }
.theme-hub .dot               { background: var(--accent); }

/* marquee sep */
.theme-hub .marquee-track .sep { color: var(--muted); }

/* buttons */
.theme-hub .btn-primary         { background: var(--accent); color: #fff; }
.theme-hub .btn-primary:hover   { background: var(--accent-light); }
.theme-hub .btn-ghost:hover     { border-color: var(--accent); color: var(--accent); }

/* footer hover */
.theme-hub .footer-links a:hover,
.theme-hub .nav-logo:hover      { color: var(--slate); }

/* contact btn */
.theme-hub .contact-btn-large   { border-color: rgba(17,17,16,0.2); color: var(--slate); }
.theme-hub .contact-btn-large:hover { background: rgba(17,17,16,0.05); }

/* scroll line */
.theme-hub .scroll-line { background: linear-gradient(var(--slate), transparent); }

/* page hero grid lines */
.theme-hub .page-hero-bg {
  background-image:
    linear-gradient(rgba(17,17,16,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,17,16,0.04) 1px, transparent 1px);
}


/* ─────────────────────────────────────────────
   2. INFIRMIER — bleu ardoise (palette existante)
   ───────────────────────────────────────────── */
.theme-infirmier {
  --bg:           #F2F6FB;
  --bg-soft:      #E8EEF7;
  --bg-mid:       #DAE3F0;
  --navy:         #152238;
  --navy-soft:    #1E3250;
  --accent:       #2C5F8A;
  --accent-light: #4080B0;
  --accent-dim:   #1A4068;
  --slate:        #4A6080;
  --muted:        #7A90A8;
  --muted-light:  #9AAEC2;
  --border:       rgba(21, 34, 56, 0.1);
  --border-accent:rgba(44, 95, 138, 0.22);

  --blue:         var(--accent);
  --blue-light:   var(--accent-light);
  --blue-dim:     var(--accent-dim);
  --border-blue:  var(--border-accent);
}
.theme-infirmier::-webkit-scrollbar-thumb { background: var(--accent); }
.theme-infirmier .cursor          { background: var(--accent); }
.theme-infirmier .cursor-follower { border-color: rgba(44,95,138,0.3); }
.theme-infirmier .nav.scrolled    { background: rgba(242,246,251,0.93); }


/* ─────────────────────────────────────────────
   3. TIANDAO — vert sauge naturel
   ───────────────────────────────────────────── */
.theme-tiandao {
  --bg:           #F2F7F4;
  --bg-soft:      #E6F0EA;
  --bg-mid:       #D5E7DC;
  --navy:         #152B1E;
  --navy-soft:    #1E3D2A;
  --accent:       #2E7A50;
  --accent-light: #3FA066;
  --accent-dim:   #1C5235;
  --slate:        #3D6050;
  --muted:        #6A9278;
  --muted-light:  #8FB09A;
  --border:       rgba(21, 43, 30, 0.1);
  --border-accent:rgba(46, 122, 80, 0.22);

  --blue:         var(--accent);
  --blue-light:   var(--accent-light);
  --blue-dim:     var(--accent-dim);
  --border-blue:  var(--border-accent);
}
.theme-tiandao::-webkit-scrollbar-thumb { background: var(--accent); }
.theme-tiandao .cursor          { background: var(--accent); }
.theme-tiandao .cursor-follower { border-color: rgba(46,122,80,0.3); }
.theme-tiandao .nav.scrolled    { background: rgba(242,247,244,0.93); }
.theme-tiandao .page-hero-bg {
  background-image:
    linear-gradient(rgba(46,122,80,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46,122,80,0.05) 1px, transparent 1px);
}
.theme-tiandao .tag:hover,
.theme-tiandao .tag.tag-accent  { border-color: var(--border-accent); color: var(--accent); }
.theme-tiandao .skill-card:hover { border-color: var(--accent); background: rgba(46,122,80,0.04); }
.theme-tiandao .mobile-link:hover,
.theme-tiandao .mobile-link.mobile-active { background: rgba(46,122,80,0.08); color: var(--accent); border-color: var(--border-accent); }


/* ─────────────────────────────────────────────
   4. KYMA — orange brûlé / terra cotta
   ───────────────────────────────────────────── */
.theme-KYMA {
  --bg:           #FBF6F2;
  --bg-soft:      #F5EDE5;
  --bg-mid:       #ECD9CC;
  --navy:         #2B1A0E;
  --navy-soft:    #3D2610;
  --accent:       #C2541A;
  --accent-light: #E06B28;
  --accent-dim:   #8A3A10;
  --slate:        #6B3E28;
  --muted:        #A07060;
  --muted-light:  #BF9080;
  --border:       rgba(43, 26, 14, 0.1);
  --border-accent:rgba(194, 84, 26, 0.22);

  --blue:         var(--accent);
  --blue-light:   var(--accent-light);
  --blue-dim:     var(--accent-dim);
  --border-blue:  var(--border-accent);
}
.theme-KYMA::-webkit-scrollbar-thumb { background: var(--accent); }
.theme-KYMA .cursor          { background: var(--accent); }
.theme-KYMA .cursor-follower { border-color: rgba(194,84,26,0.3); }
.theme-KYMA .nav.scrolled    { background: rgba(251,246,242,0.93); }
.theme-KYMA .page-hero-bg {
  background-image:
    linear-gradient(rgba(194,84,26,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(194,84,26,0.05) 1px, transparent 1px);
}
.theme-KYMA .tag:hover,
.theme-KYMA .tag.tag-accent  { border-color: var(--border-accent); color: var(--accent); }
.theme-KYMA .skill-card:hover { border-color: var(--accent); background: rgba(194,84,26,0.04); }
.theme-KYMA .mobile-link:hover,
.theme-KYMA .mobile-link.mobile-active { background: rgba(194,84,26,0.08); color: var(--accent); border-color: var(--border-accent); }


/* ─────────────────────────────────────────────
   5. MAKORYA APPS — violet / encre numérique
      (choix personnel : évoque le code, la nuit,
      le craft numérique sans être générique)
   ───────────────────────────────────────────── */
.theme-apps {
  --bg:           #F5F3FB;
  --bg-soft:      #EAE7F5;
  --bg-mid:       #D8D2EC;
  --navy:         #1C1530;
  --navy-soft:    #2A2045;
  --accent:       #5B3EA8;
  --accent-light: #7A5CC8;
  --accent-dim:   #3D2878;
  --slate:        #4A3870;
  --muted:        #7A6EA0;
  --muted-light:  #9A90BC;
  --border:       rgba(28, 21, 48, 0.1);
  --border-accent:rgba(91, 62, 168, 0.22);

  --blue:         var(--accent);
  --blue-light:   var(--accent-light);
  --blue-dim:     var(--accent-dim);
  --border-blue:  var(--border-accent);
}
.theme-apps::-webkit-scrollbar-thumb { background: var(--accent); }
.theme-apps .cursor          { background: var(--accent); }
.theme-apps .cursor-follower { border-color: rgba(91,62,168,0.3); }
.theme-apps .nav.scrolled    { background: rgba(245,243,251,0.93); }
.theme-apps .page-hero-bg {
  background-image:
    linear-gradient(rgba(91,62,168,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91,62,168,0.05) 1px, transparent 1px);
}
.theme-apps .tag:hover,
.theme-apps .tag.tag-accent  { border-color: var(--border-accent); color: var(--accent); }
.theme-apps .skill-card:hover { border-color: var(--accent); background: rgba(91,62,168,0.04); }
.theme-apps .mobile-link:hover,
.theme-apps .mobile-link.mobile-active { background: rgba(91,62,168,0.08); color: var(--accent); border-color: var(--border-accent); }


/* ─────────────────────────────────────────────
   6. LIVRES — rouge cramoisi / encre littéraire
   ───────────────────────────────────────────── */
.theme-livres {
  --bg:           #FBF2F2;
  --bg-soft:      #F5E6E6;
  --bg-mid:       #EDD4D4;
  --navy:         #2B0F0F;
  --navy-soft:    #3D1515;
  --accent:       #A82828;
  --accent-light: #C83C3C;
  --accent-dim:   #781818;
  --slate:        #6B3030;
  --muted:        #A07070;
  --muted-light:  #BC9090;
  --border:       rgba(43, 15, 15, 0.1);
  --border-accent:rgba(168, 40, 40, 0.22);

  --blue:         var(--accent);
  --blue-light:   var(--accent-light);
  --blue-dim:     var(--accent-dim);
  --border-blue:  var(--border-accent);
}
.theme-livres::-webkit-scrollbar-thumb { background: var(--accent); }
.theme-livres .cursor          { background: var(--accent); }
.theme-livres .cursor-follower { border-color: rgba(168,40,40,0.3); }
.theme-livres .nav.scrolled    { background: rgba(251,242,242,0.93); }
.theme-livres .page-hero-bg {
  background-image:
    linear-gradient(rgba(168,40,40,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168,40,40,0.05) 1px, transparent 1px);
}
.theme-livres .book-card        { border-left-color: var(--accent); }
.theme-livres .tbb-trail        { border-left-color: var(--accent); }
.theme-livres .tag:hover,
.theme-livres .tag.tag-accent   { border-color: var(--border-accent); color: var(--accent); }
.theme-livres .book-card:hover  { background: rgba(168,40,40,0.04); }
.theme-livres .mobile-link:hover,
.theme-livres .mobile-link.mobile-active { background: rgba(168,40,40,0.08); color: var(--accent); border-color: var(--border-accent); }


/* ─────────────────────────────────────────────
   7. KIZA TRAIL — bleu nuit / montagne
      (dark hero handled by trail.css already)
   ───────────────────────────────────────────── */
.theme-trail {
  --bg:           #F3F5F8;
  --bg-soft:      #E7ECF2;
  --bg-mid:       #D8E0EC;
  --navy:         #0E1B2E;
  --navy-soft:    #162540;
  --accent:       #1E5FAA;
  --accent-light: #3278CC;
  --accent-dim:   #12407A;
  --slate:        #3A5880;
  --muted:        #6A88AA;
  --muted-light:  #8AAAC8;
  --border:       rgba(14, 27, 46, 0.1);
  --border-accent:rgba(30, 95, 170, 0.22);

  --blue:         var(--accent);
  --blue-light:   var(--accent-light);
  --blue-dim:     var(--accent-dim);
  --border-blue:  var(--border-accent);
}
.theme-trail::-webkit-scrollbar-thumb { background: var(--accent); }
.theme-trail .cursor          { background: var(--accent); }
.theme-trail .cursor-follower { border-color: rgba(30,95,170,0.3); }
.theme-trail .nav.scrolled    { background: rgba(243,245,248,0.93); }
.theme-trail .page-hero-bg {
  background-image:
    linear-gradient(rgba(30,95,170,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,95,170,0.06) 1px, transparent 1px);
}
/* dark hero stat colour */
.theme-trail .trail-stat-num   { color: rgba(120,180,255,0.9); }
.theme-trail .trail-hero-title .italic { color: rgba(120,180,255,0.9); }
.theme-trail .tag:hover,
.theme-trail .tag.tag-accent   { border-color: var(--border-accent); color: var(--accent); }
.theme-trail .skill-card:hover { border-color: var(--accent); background: rgba(30,95,170,0.04); }
.theme-trail .mobile-link:hover,
.theme-trail .mobile-link.mobile-active { background: rgba(30,95,170,0.08); color: var(--accent); border-color: var(--border-accent); }

/* ── Makorya pages: allow title to extend full width on one line ── */
.theme-apps .page-hero-title,
.theme-livres .page-hero-title {
  white-space: nowrap;
}