/* ===== THEME OVERRIDES (Palette + Typos) ===== */
:root {
  /* Fonts */
  --font-hero: 'Fraunces', 'Times New Roman', serif;
  --font-heading: 'Plus Jakarta Sans', 'Inter', 'Segoe UI', sans-serif;
  --font-sans: 'Plus Jakarta Sans', 'Inter', 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

  /* Tailored deep palette */
  --primary: #f6f0e4;         /* soft sand for primary text */
  --secondary: #e4d8c7;       /* muted parchment for secondary text */
  --primary-light: #f2cfa4;   /* warm highlight for lifted surfaces */
  --accent: #f09b60;          /* burnished apricot accent */
  --accent-hover: #db7f3e;    /* deeper ember for hover states */

  --text-primary: #f6f0e4;
  --text-secondary: #e0d6c8;
  --text-muted: #b9afa2;
  --text-light: #92877a;
  --text-inverse: #141a17;

  /* Refined dark background family */
  --bg-primary: #0f1918;      /* inky pine - main background */
  --bg-secondary: #172422;    /* dusk pine - section backgrounds */
  --bg-tertiary: #1f302e;     /* deep teal - card backgrounds */
  --bg-dark: #0a1311;         /* near-black juniper */
  --bg-card: #182826;         /* textured card base */
  --bg-hover: #223732;        /* lifted hover state */

  --border: #28413b;
  --border-light: #375851;
  --border-dark: #121f1d;
  --border-accent: var(--accent);

  --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow: 0 4px 6px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.3);
  --shadow-glow: 0 0 20px rgba(240, 155, 96, 0.18);
}

/* Typography overrides */
body { 
  font-family: var(--font-sans); 
  font-size: 16px;
  line-height: 1.6;
}

.logo-text { 
  font-family: var(--font-heading); 
  letter-spacing: -0.01em; 
  font-weight: 600;
}

.hero-title { 
  font-family: var(--font-hero); 
  font-weight: 700; 
  letter-spacing: -0.03em;
  line-height: 1.1;
}

/* Make hero name a touch larger but controlled */
.hero-title { 
  font-size: clamp(3rem, 7vw, 5.5rem); 
}

section h2, 
.philosophy-intro h3, 
.timeline-content h3, 
.skill-category h3 { 
  font-family: var(--font-heading); 
  letter-spacing: -0.02em;
  font-weight: 700;
}

.nav-links a { 
  font-family: var(--font-sans); 
  font-weight: 500;
  letter-spacing: 0;
}

.hero-greeting, 
.hero-subtitle { 
  font-family: var(--font-sans);
  font-weight: 400;
}

.timeline-date { 
  font-family: var(--font-mono); 
  font-weight: 500;
  font-size: 0.9rem;
}

.specialty-badge { 
  font-family: var(--font-sans); 
  font-weight: 600;
  letter-spacing: 0.02em;
}

.grade-badge { 
  color: var(--accent);
  font-weight: 600;
}

.project-summary,
.project-details,
.about-text p,
.contact-content p,
.skills-intro p {
  font-family: var(--font-sans);
  font-size: 1.1rem;
  line-height: 1.7;
}

.skill-badge span {
  font-family: var(--font-sans);
  font-weight: 500;
}

/* Subtle background for depth without visual noise */
body {
  background: var(--bg-primary);
  background-attachment: fixed;
}

/* Hero name: clean accent color instead of animated gradient */
.hero-title .name {
  color: var(--accent) !important;
  text-shadow: 0 0 18px rgba(240, 155, 96, 0.35);
  animation: none;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
}

/* Subtle circular background element */
.hero-background-element {
  position: absolute;
  top: -400px;
  left: -100px;
  width: 1000px;
  height: 1000px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 155, 96, 0.28) 0%, rgba(240, 155, 96, 0.16) 45%, rgba(240, 155, 96, 0.05) 70%, transparent 90%);
  z-index: 0;
  filter: blur(40px);
}

/* Prevent hero-only horizontal overflow and make background mobile-safe */
.hero {
  /* Clip any decorative overflow to avoid horizontal scroll on mobile */
  overflow-x: hidden;
}

@media (max-width: 768px) {
  .hero-background-element {
    /* Center and bound within viewport width to avoid overflow */
    left: 50%;
    top: -280px;
    width: 100vw;
    height: 100vw;
    transform: translateX(-50%);
  }
}

/* Background elements for other sections */
.section-background-element {
  position: absolute;
  border-radius: 50%;
  z-index: 0;
  filter: blur(30px);
  opacity: 0.2;
}

/* About section background element - warm clay */
.about-bg-element {
  top: -200px;
  right: -200px;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(212, 140, 106, 0.32) 0%, rgba(212, 140, 106, 0.18) 48%, rgba(212, 140, 106, 0.06) 72%, transparent 88%);
}

/* Journey section background element - soft sage */
.journey-bg-element {
  top: -150px;
  left: -150px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(109, 169, 150, 0.32) 0%, rgba(109, 169, 150, 0.18) 48%, rgba(109, 169, 150, 0.06) 72%, transparent 88%);
}

/* Projects section background element - brass glow */
.projects-bg-element {
  bottom: -200px;
  right: -100px;
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(189, 158, 99, 0.32) 0%, rgba(189, 158, 99, 0.18) 46%, rgba(189, 158, 99, 0.07) 70%, transparent 88%);
}

/* Philosophy section background element - terracotta haze */
.philosophy-bg-element {
  top: -100px;
  left: -100px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(191, 118, 104, 0.3) 0%, rgba(191, 118, 104, 0.18) 50%, rgba(191, 118, 104, 0.07) 78%, transparent 92%);
}

/* Skills section background element - cool fern */
.skills-bg-element {
  bottom: -150px;
  right: -150px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(121, 170, 142, 0.32) 0%, rgba(121, 170, 142, 0.18) 46%, rgba(121, 170, 142, 0.08) 72%, transparent 90%);
}

/* Contact section background element - ember wash */
.contact-bg-element {
  top: -100px;
  left: -200px;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(240, 155, 96, 0.32) 0%, rgba(240, 155, 96, 0.18) 48%, rgba(240, 155, 96, 0.08) 72%, transparent 90%);
}

/* Ensure section content stays on top */
.container,
.projects-container,
.skills-container {
  position: relative;
  z-index: 10;
}

@keyframes name-sheen {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-title .name { animation: none; }
}

/* Header overrides to use theme variables */
header {
  background: var(--bg-secondary) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

/* ===== Mobile Overflow Guard (<=768px) ===== */
@media (max-width: 768px) {
  /* Verrouille la largeur et supprime tout scroll horizontal */
  html, body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    position: relative;
  }

  /* Coupe tout débordement décoratif (éléments absolus, backgrounds) */
  main, header, footer, nav, section {
    overflow-x: clip;
  }

  /* Conteneurs principaux: largeur 100%, pas de débordement */
  .container, .projects-container, .skills-container {
    max-width: 100% !important;
    overflow-x: hidden;
  }

  /* Médias responsives: ne dépassent jamais la largeur */
  img, video, svg, canvas, iframe {
    max-width: 100% !important;
    height: auto;
  }

  /* Texte/mots très longs: wrap systématique */
  p, li, a, span, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Éléments flex/grid: autoriser la réduction en largeur */
  div, section, article, aside, main, header, footer, nav,
  .flex, .grid, [class*="grid"], [class*="flex"] {
    min-width: 0;
  }

  /* Code, pre, tables: scroll interne horizontal si nécessaire */
  pre, code, kbd, samp {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-width: 100%;
  }
  pre, code, table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
  table { table-layout: fixed; border-collapse: collapse; }

  /* Sécurité pour les menus/headers */
  header { max-width: 100vw; }
  nav { max-width: 100vw; box-sizing: border-box; }
}

header.section-active {
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%) !important;
  border-bottom: 1px solid var(--accent);
}

/* Highlight cards receive a subtle ember glaze */
.philosophy-card.highlight {
  background: linear-gradient(135deg, var(--bg-card) 0%, rgba(240, 155, 96, 0.12) 100%) !important;
  border: 1px solid var(--border-accent);
}

/* Navigation hover/active leans into the ember accent */
.nav-links a:hover,
.nav-links a.active { 
  color: var(--accent) !important; 
  text-shadow: 0 0 10px rgba(240, 155, 96, 0.45);
}

/* Make section headings clearly adopt display font */
h4, .philosophy-card h4 { font-family: var(--font-heading); }