/* ══════════════════════════════════════════════════ */
/*  PROJECT REFINE — habillage esthétique sans toucher aux textes */
/* ══════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;1,9..144,300;1,9..144,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;1,300&display=swap');

/* ───── Palette OLED retravaillée — même que homepage ───── */
:root {
  --bg: #0a0a0e !important;
  --bg2: #111118 !important;
  --surface: #161620 !important;
  --border: #26262f !important;
  --accent: #f0cb5a !important;
  --accent2: #e08060 !important;
  --blue: #7fa0ff !important;
  --text: #f0efe8 !important;
  --muted: #7a7a8c !important;
  --dim: #3f3f52 !important;
  --accent-warm: #f5d978;
  --accent-dim: rgba(240, 203, 90, 0.55);
}

/* ───── Body — fond OLED + halos ───── */
body {
  background-color: var(--bg) !important;
  background-image:
    radial-gradient(ellipse 85% 50% at 18% 18%, rgba(240,203,90,0.065) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 80%, rgba(224,128,96,0.045) 0%, transparent 55%),
    radial-gradient(ellipse 120% 40% at 50% 110%, rgba(240,203,90,0.025) 0%, transparent 60%) !important;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ───── Grain film premium ───── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 128px 128px;
  opacity: 0.022;
  mix-blend-mode: overlay;
}

/* ───── Sélection dorée ───── */
::selection { background: rgba(232, 200, 74, 0.28); color: #fff; }

/* ───── Scrollbar raffinée ───── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(232,200,74,0.14); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(232,200,74,0.3); }

/* ───── Hero title : italique Fraunces sur span ───── */
.hero-title span {
  font-family: 'Fraunces', serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  background: linear-gradient(135deg, #f0d678 0%, #e8c84a 60%, #c9a838 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: titleShine 4s ease-in-out infinite alternate;
}
@keyframes titleShine {
  from { filter: drop-shadow(0 0 8px rgba(232,200,74,.2)); }
  to   { filter: drop-shadow(0 0 24px rgba(232,200,74,.45)); }
}
.hero-title {
  animation: heroTitleIn 1.2s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes heroTitleIn {
  from { opacity: 0; transform: translateY(24px); letter-spacing: .1em; }
  to { opacity: 1; transform: translateY(0); letter-spacing: .02em; }
}

/* ───── Hero tag : entrée depuis la gauche ───── */
.hero-tag {
  animation: tagSlide 1s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes tagSlide {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: translateX(0); }
}
.hero-tag::before {
  animation: lineExpand 1.2s cubic-bezier(.2,.8,.2,1) .3s both;
  transform-origin: left center;
}
@keyframes lineExpand {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* ───── Hero sub : fade doux ───── */
.hero-sub {
  animation: subFade 1.2s ease-out .5s both;
  line-height: 1.85 !important;
}
@keyframes subFade {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: .85; transform: translateY(0); }
}

/* ───── Nav logo pulse subtil ───── */
.nav-logo span {
  transition: color .3s, text-shadow .3s;
}
.nav-logo:hover span {
  text-shadow: 0 0 12px rgba(232,200,74,.5);
}

/* ───── Sub-nav : barre dorée qui traque l'item actif ───── */
.sn {
  position: relative;
  transition: color .35s cubic-bezier(.2,.8,.2,1) !important;
  padding: 12px 16px !important;
}
.sn::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 50%;
  width: 0; height: 1px;
  background: var(--accent);
  transform: translateX(-50%);
  transition: width .35s cubic-bezier(.2,.8,.2,1);
}
.sn:hover {
  color: var(--accent) !important;
}
.sn:hover::after { width: 60%; }

/* ───── Section labels : trait animé ───── */
.section-label {
  margin-top: 72px !important;
  margin-bottom: 24px !important;
  font-weight: 500 !important;
}
.section-label::after {
  animation: lineBreath 3s ease-in-out infinite alternate;
}
@keyframes lineBreath {
  from { opacity: .3; }
  to { opacity: .7; }
}

/* ───── Prose : rythme plus aéré, accents en Fraunces ───── */
.prose p {
  line-height: 2 !important;
  margin-bottom: 22px !important;
  color: #a0a0c0 !important;
  font-size: 14.5px !important;
}
.prose p strong {
  color: #fff !important;
  font-weight: 600 !important;
  position: relative;
  background: linear-gradient(180deg, transparent 78%, rgba(232,200,74,.18) 78%, rgba(232,200,74,.18) 100%);
  padding: 0 2px;
}
.prose em {
  font-family: 'Fraunces', serif !important;
  font-style: italic !important;
  color: #c0c0d8;
}

/* ───── Blocks (.block) : hover plus marqué ───── */
.block {
  transition: all .4s cubic-bezier(.2,.8,.2,1) !important;
  position: relative;
  overflow: hidden;
}
.block::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 2px; height: 0;
  background: linear-gradient(180deg, var(--accent), transparent);
  transition: height .5s cubic-bezier(.2,.8,.2,1);
}
.block:hover {
  border-color: rgba(232,200,74,.35) !important;
  background: linear-gradient(135deg, rgba(232,200,74,.02), var(--surface)) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.3), 0 0 0 1px rgba(232,200,74,.1);
}
.block:hover::before { height: 100%; }
.block-title {
  font-family: 'Fraunces', serif !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  letter-spacing: .01em !important;
}
.block-label {
  transition: opacity .3s, letter-spacing .3s !important;
}
.block:hover .block-label {
  opacity: 1 !important;
  letter-spacing: .22em !important;
}

/* ───── Name-box : plus chaleureuse ───── */
.name-box {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  border-left-width: 3px !important;
  transition: all .4s cubic-bezier(.2,.8,.2,1);
  background: linear-gradient(135deg, rgba(232,200,74,.03), var(--bg2)) !important;
}
.name-box::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 80px; height: 80px;
  background: radial-gradient(circle at top right, rgba(232,200,74,.08), transparent 70%);
  pointer-events: none;
}
.name-box:hover {
  border-left-color: var(--accent-warm) !important;
  transform: translateX(3px);
}
.name-box strong {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
}

/* ───── Badges : plus vivants ───── */
.badge {
  transition: all .3s cubic-bezier(.2,.8,.2,1);
  cursor: default;
  border-radius: 2px;
}
.badge:hover {
  background: rgba(232,200,74,.1);
  opacity: 1 !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(232,200,74,.15);
}

/* ───── Reveal : easing plus doux, staggered ───── */
.reveal {
  transition: opacity 1s cubic-bezier(.2,.8,.2,1), transform 1s cubic-bezier(.2,.8,.2,1) !important;
  transform: translateY(32px) !important;
}
.reveal.visible {
  transform: translateY(0) !important;
}

/* ───── Cursor custom — glow doux ───── */
.cursor {
  box-shadow: 0 0 8px rgba(232,200,74,.6), 0 0 16px rgba(232,200,74,.3);
  transition: transform .1s;
}
.cursor-ring {
  transition: transform .25s cubic-bezier(.4,0,.2,1), width .3s, height .3s, border-color .3s;
}

/* ───── Nav : subtil glow sur le logo au scroll ───── */
nav {
  transition: background .4s, backdrop-filter .4s !important;
}

/* ───── Footer : plus délicat ───── */
footer {
  background: linear-gradient(to bottom, transparent, rgba(232,200,74,.02));
}
.ft {
  transition: color .3s;
}
.ft:hover { color: var(--muted) !important; }

/* ───── Link hover (liens génériques dans .prose) ───── */
.prose a {
  color: var(--accent) !important;
  text-decoration: none;
  position: relative;
  padding-bottom: 1px;
  background: linear-gradient(var(--accent), var(--accent)) no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  transition: background-size .4s cubic-bezier(.2,.8,.2,1);
}
.prose a:hover {
  background-size: 100% 1px;
}

/* ───── Ambient background glow ───── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 40% at 15% 10%, rgba(232,200,74,.04), transparent 70%),
    radial-gradient(ellipse 40% 30% at 85% 80%, rgba(255,107,74,.03), transparent 70%);
}

/* ───── Reduced motion ───── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM SUB-PAGES — Tier II upgrade (même qualité que homepage)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Scrollbar dorée ──────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(240,203,90,0.22); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: rgba(240,203,90,0.45); }

/* ── Sélection dorée ─────────────────────────────────────────────────────── */
::selection { background: rgba(240,203,90,0.28); color: #fff; }

/* ── Nav glass premium (state scrollée) ──────────────────────────────────── */
nav {
  backdrop-filter: blur(20px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.5) !important;
  background: rgba(10,10,14,0.6) !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  transition: background 0.4s, backdrop-filter 0.4s !important;
}
nav.scrolled {
  background: rgba(10,10,14,0.88) !important;
  border-bottom-color: rgba(240,203,90,0.1) !important;
  box-shadow: 0 1px 32px rgba(0,0,0,0.6) !important;
}

/* ── Section tags cohérents ─────────────────────────────────────────────── */
.section-label,
.project-label {
  font-family: 'DM Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(240,203,90,0.5) !important;
}

/* ── Hero de sous-page — plus de couleur ────────────────────────────────── */
.project-hero,
.page-hero {
  background-color: var(--bg) !important;
  background-image:
    radial-gradient(ellipse 75% 70% at 25% 40%, rgba(240,203,90,0.1) 0%, transparent 52%),
    radial-gradient(ellipse 50% 60% at 80% 25%, rgba(240,203,90,0.055) 0%, transparent 50%),
    radial-gradient(ellipse 40% 45% at 90% 82%, rgba(224,128,96,0.06) 0%, transparent 52%) !important;
}

/* ── Cursor personnalisé ─────────────────────────────────────────────────── */
.cursor {
  width: 6px !important;
  height: 6px !important;
  background: #f0cb5a !important;
  box-shadow: 0 0 10px rgba(240,203,90,0.7), 0 0 22px rgba(240,203,90,0.35) !important;
}
.cursor-ring {
  width: 34px !important;
  height: 34px !important;
  border: 1px solid rgba(240,203,90,0.45) !important;
  box-shadow: 0 0 12px rgba(240,203,90,0.08) !important;
}

/* ── Scroll progress bar ─────────────────────────────────────────────────── */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  background: linear-gradient(to right, #e08060, #f0cb5a);
  box-shadow: 0 0 8px rgba(240,203,90,0.5);
  z-index: 10000;
  width: 0%;
  transition: width 0.1s linear;
}

/* ── Blobs ambient ───────────────────────────────────────────────────────── */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.12;
  animation: blobFloat 18s ease-in-out infinite;
  pointer-events: none;
}
.blob-1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(240,203,90,0.6), transparent 70%);
  top: -10%; left: -10%;
  animation-duration: 22s;
}
.blob-2 {
  width: 350px; height: 350px;
  background: radial-gradient(circle, rgba(224,128,96,0.5), transparent 70%);
  bottom: 10%; right: -5%;
  animation-duration: 28s;
  animation-delay: -8s;
}
.blob-3 {
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(127,160,255,0.4), transparent 70%);
  top: 50%; left: 40%;
  animation-duration: 20s;
  animation-delay: -4s;
}
@keyframes blobFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(30px, -20px) scale(1.05); }
  66%  { transform: translate(-20px, 15px) scale(0.97); }
}

/* ── Séparateurs de section ─────────────────────────────────────────────── */
.section-sep,
section + section {
  position: relative;
}
section + section::before {
  content: '';
  display: block;
  position: absolute;
  top: 0; left: 10%;
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(240,203,90,0.08) 15%,
    rgba(240,203,90,0.45) 50%,
    rgba(240,203,90,0.08) 85%,
    transparent 100%);
  box-shadow: 0 0 24px rgba(240,203,90,0.18);
}

/* ── Texte gold highlights ─────────────────────────────────────────────── */
.highlight, .accent, strong em {
  color: var(--accent) !important;
}

/* ── Boutons premium ────────────────────────────────────────────────────── */
.btn-primary {
  background: linear-gradient(135deg, #d4a830 0%, #f0cb5a 50%, #d4a830 100%) !important;
  background-size: 200% 200% !important;
  transition: background-position 0.4s, transform 0.3s, box-shadow 0.3s !important;
}
.btn-primary:hover {
  background-position: 100% 100% !important;
  box-shadow: 0 8px 32px rgba(240,203,90,0.35), 0 0 0 1px rgba(240,203,90,0.2) !important;
}

/* ── Micro-animations ────────────────────────────────────────────────────── */
a, button, .block, .badge {
  cursor: pointer;
}
.block:hover {
  cursor: pointer;
}

/* ── Mobile sub-pages ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  body::after { opacity: 0.015; }
  nav { backdrop-filter: blur(12px) !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM SUB-PAGES — Tier III · Color boost · Button gold · Glow +
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Palette Tier III — plus chaud, plus doré ───────────────────────────── */
:root {
  --accent: #f2d060 !important;
  --accent2: #e08060 !important;
  --blue: #7fa0ff !important;
}

/* ── Body — halos plus riches ───────────────────────────────────────────── */
body {
  background-image:
    radial-gradient(ellipse 90% 55% at 16% 14%, rgba(242,208,96,0.08) 0%, transparent 58%),
    radial-gradient(ellipse 65% 55% at 88% 82%, rgba(224,128,96,0.055) 0%, transparent 55%),
    radial-gradient(ellipse 140% 45% at 50% 115%, rgba(242,208,96,0.04) 0%, transparent 60%) !important;
}

/* ── Bouton gold riche ──────────────────────────────────────────────────── */
.btn-primary {
  background: linear-gradient(135deg, #c99a28 0%, #f2d060 40%, #fae89a 65%, #c99a28 100%) !important;
  background-size: 200% 200% !important;
  color: #0a0a0e !important;
  font-weight: 700 !important;
}
.btn-primary:hover {
  background-position: 100% 100% !important;
  box-shadow: 0 8px 40px rgba(242,208,96,0.5), 0 0 0 1px rgba(242,208,96,0.25) !important;
}

/* ── Nav logo glow ──────────────────────────────────────────────────────── */
.nav-logo span {
  color: var(--accent) !important;
  text-shadow: 0 0 12px rgba(242,208,96,0.4) !important;
}

/* ── Hero text glow ─────────────────────────────────────────────────────── */
.hero-title span,
.hero-title .accent {
  filter: drop-shadow(0 0 20px rgba(242,208,96,0.4)) !important;
}

/* ── Scrollbar encore plus fine ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-thumb { background: rgba(242,208,96,0.28); }

/* ── Section séparateur subtil ──────────────────────────────────────────── */
section + section::before {
  box-shadow: 0 0 12px rgba(242,208,96,0.1) !important;
}

/* ── Block cards — plus de couleur au hover ─────────────────────────────── */
.block:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.35), 0 0 0 1px rgba(242,208,96,0.15), 0 0 24px rgba(242,208,96,0.04) !important;
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero-title { font-size: clamp(44px, 10vw, 80px) !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   COULEURS+ Tier IV — Accent boosts sur les sous-pages
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Section tags ────────────────────────────────────────────────────────── */
.section-tag {
  color: var(--accent) !important;
  text-shadow: 0 0 14px rgba(242,208,96,0.25) !important;
}

/* ── Headings accent spans ───────────────────────────────────────────────── */
h1 .accent, h2 .accent, h3 .accent,
.accent { color: var(--accent) !important; }

/* ── Block cards — border-left doré + hover coloré ──────────────────────── */
.block {
  border-left: 2px solid rgba(242,208,96,0.09) !important;
  transition: border-color 0.35s, box-shadow 0.35s, transform 0.35s !important;
}
.block:hover {
  border-left-color: rgba(242,208,96,0.45) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(242,208,96,0.12), 0 0 30px rgba(242,208,96,0.04) !important;
}

/* ── Meta / label text — doré subtil ────────────────────────────────────── */
.meta, .meta-label, .block-label, .tag-label {
  color: rgba(242,208,96,0.55) !important;
}

/* ── Séparateurs — légèrement plus présents ──────────────────────────────── */
section + section::before {
  box-shadow: 0 0 20px rgba(242,208,96,0.15) !important;
}

/* ── Links hover ────────────────────────────────────────────────────────── */
.nav-links a:hover, nav a:hover {
  color: var(--accent) !important;
}

/* ── Back link ───────────────────────────────────────────────────────────── */
.back:hover {
  color: var(--accent) !important;
}

/* ── Scroll progress bar glow ────────────────────────────────────────────── */
.scroll-progress {
  box-shadow: 0 0 12px rgba(242,208,96,0.6) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TIER V — Footer centré · Menus hover fort · Couleurs or
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Footer — tout centré ────────────────────────────────────────────────── */
footer {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 8px !important;
  padding: 32px 48px !important;
}
.ft, .footer-text {
  text-align: center !important;
  color: rgba(242,208,96,0.22) !important;
  font-family: 'DM Mono', monospace !important;
  letter-spacing: 0.12em !important;
  font-size: 9px !important;
}

/* ── Nav back link — hover plus fort ─────────────────────────────────────── */
.nav-back {
  transition: color 0.25s, text-shadow 0.25s, letter-spacing 0.25s !important;
}
.nav-back:hover {
  color: var(--accent) !important;
  text-shadow: 0 0 14px rgba(242,208,96,0.55) !important;
  letter-spacing: 0.16em !important;
}

/* ── Subnav tabs — hover or avec glow ────────────────────────────────────── */
.sn {
  transition: color 0.2s, background 0.2s, text-shadow 0.2s !important;
  padding: 10px 16px !important;
}
.sn:hover {
  color: var(--accent) !important;
  text-shadow: 0 0 10px rgba(242,208,96,0.4) !important;
  background: rgba(242,208,96,0.04) !important;
}

/* ── Section label — or avec glow ───────────────────────────────────────── */
.section-label {
  color: var(--accent) !important;
  text-shadow: 0 0 12px rgba(242,208,96,0.3) !important;
}

/* ── Hero tag — or + glow ────────────────────────────────────────────────── */
.hero-tag {
  text-shadow: 0 0 14px rgba(242,208,96,0.35) !important;
  letter-spacing: 0.22em !important;
}
.hero-tag::before {
  background: linear-gradient(to right, transparent, var(--accent)) !important;
  opacity: 0.7 !important;
}

/* ── Badges — or plus vif ────────────────────────────────────────────────── */
.badge {
  color: var(--accent) !important;
  border-color: rgba(242,208,96,0.45) !important;
  box-shadow: 0 0 10px rgba(242,208,96,0.08) !important;
  opacity: 1 !important;
  transition: box-shadow 0.25s, border-color 0.25s !important;
}
.badge:hover {
  border-color: rgba(242,208,96,0.7) !important;
  box-shadow: 0 0 14px rgba(242,208,96,0.2) !important;
}

/* ── Name box accent — plus doré ─────────────────────────────────────────── */
.name-box {
  border-left-color: rgba(242,208,96,0.6) !important;
  box-shadow: inset 3px 0 12px rgba(242,208,96,0.06) !important;
}

/* ── Border-top accent sur footer ────────────────────────────────────────── */
footer {
  border-top-color: rgba(242,208,96,0.12) !important;
  box-shadow: 0 -1px 0 rgba(242,208,96,0.06) !important;
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  footer { padding: 24px 24px !important; }
}