/* ============================================
   NOEMA — Refonte esthétique (overlay)
   Ne touche qu'au visuel. Aucune structure modifiée.
   ============================================ */

/* Typos additionnelles */
@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');

/* Palette retravaillée — plus chaude, moins violette */
:root {
  --bg: #0a0a0e !important;
  --bg2: #111118 !important;
  --surface: #161620 !important;
  --border: #26262f !important;
  --accent: #e8c458 !important;
  --accent2: #d97757 !important;
  --blue: #6b8eff !important;
  --text: #f0efe8 !important;
  --muted: #7a7a8c !important;
  --dim: #3f3f52 !important;
}

/* Halo de fond plus raffiné */
body {
  background-image:
    radial-gradient(ellipse 80% 50% at 18% 18%, rgba(232,196,88,0.055) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 80%, rgba(217,119,87,0.04) 0%, transparent 55%),
    radial-gradient(ellipse 120% 40% at 50% 110%, rgba(232,196,88,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 subtil permanent */
body::after {
  background:
    radial-gradient(ellipse 120% 80% at 50% 0%, rgba(232,196,88,0.04) 0%, transparent 62%) !important;
}

/* ===== NAV — plus aéré ===== */
nav {
  backdrop-filter: blur(18px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.4) !important;
  background: rgba(10,10,14,0.55) !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}
.nav-logo {
  letter-spacing: 0.12em !important;
  font-weight: 500;
}
.nav-logo span:first-child { color: var(--accent) !important; }
.nav-links a {
  font-weight: 400;
  transition: color .3s cubic-bezier(.4,0,.2,1) !important;
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s cubic-bezier(.4,0,.2,1);
}
.nav-links a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ===== HERO — plus éditorial ===== */
.hero-orz {
  font-style: italic !important;
  font-family: 'Fraunces', serif !important;
  font-weight: 300 !important;
  color: transparent !important;
  -webkit-text-stroke: 1px rgba(232,196,88,0.08) !important;
  letter-spacing: -0.04em !important;
}

.hero-eyebrow {
  font-weight: 500;
  letter-spacing: 0.24em !important;
}

.hero-name {
  letter-spacing: 0.01em !important;
}
.hero-name .accent {
  font-family: 'Fraunces', serif !important;
  font-style: italic !important;
  font-weight: 300 !important;
  letter-spacing: -0.02em !important;
}

.hero-subtitle {
  color: var(--muted);
  letter-spacing: 0.01em;
}

.hero-desc { line-height: 1.85 !important; }

/* Boutons — plus fins, plus premium */
.btn-primary {
  border-radius: 2px;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
  transition: all .3s cubic-bezier(.4,0,.2,1) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.3);
}
.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 40px rgba(232,196,88,0.28), 0 2px 0 rgba(0,0,0,0.3) !important;
}
.btn-ghost {
  border-radius: 2px;
  letter-spacing: 0.16em !important;
  transition: all .3s cubic-bezier(.4,0,.2,1) !important;
}
.btn-ghost:hover {
  background: rgba(232,196,88,0.04);
  transform: translateY(-1px);
}

/* ===== H2 — mix Bebas + italic Fraunces si présent ===== */
h2 {
  letter-spacing: 0.02em !important;
  line-height: 0.95 !important;
}
/* Si un <em> est présent dans un h2, on lui donne le traitement éditorial */
h2 em, .hero-subtitle em, .philosophy-quote em {
  font-family: 'Fraunces', serif !important;
  font-style: italic !important;
  font-weight: 300 !important;
  letter-spacing: -0.02em;
  color: var(--accent) !important;
}

.section-tag {
  letter-spacing: 0.26em !important;
  font-weight: 500;
  color: var(--accent) !important;
}
.section-tag::after { opacity: 0.5; margin-left: 18px !important; max-width: 64px !important; }
.section-tag { gap: 18px !important; margin-bottom: 22px !important; }

/* ===== IDENTITÉ — traits plus raffinés ===== */
.identity-left p { line-height: 1.88 !important; color: #a8a8b8 !important; }
.identity-left p strong { color: var(--text) !important; }

.orz-breakdown {
  background: rgba(232,196,88,0.025);
  border: 1px solid rgba(232,196,88,0.12) !important;
  border-radius: 2px;
  padding: 24px 28px !important;
  margin-top: 32px;
}
.orz-char {
  font-family: 'Fraunces', serif !important;
  font-style: italic !important;
  font-weight: 300 !important;
}

.trait-card {
  transition: all .4s cubic-bezier(.4,0,.2,1) !important;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.trait-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .4s cubic-bezier(.4,0,.2,1);
}
.trait-card:hover::before {
  transform: scaleY(1);
  transform-origin: top;
}
.trait-card:hover {
  transform: translateX(6px) !important;
  background: rgba(232,196,88,0.02);
}
.trait-title { letter-spacing: 0.01em; }
.trait-desc { line-height: 1.65 !important; }

/* ===== PROJETS — cartes plus éditoriales ===== */
.project-card {
  border-radius: 2px;
  transition: all .4s cubic-bezier(.4,0,.2,1) !important;
  position: relative;
}
.project-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent) !important;
}
.project-title { letter-spacing: 0.03em !important; }
.project-num {
  font-weight: 500;
  letter-spacing: 0.18em !important;
}
.project-tag {
  border-radius: 999px;
  padding: 3px 10px !important;
  letter-spacing: 0.14em !important;
}

/* ===== PHILOSOPHIE — plus littéraire ===== */
.philosophy-bg {
  font-family: 'Fraunces', serif !important;
  font-style: italic !important;
  font-weight: 300 !important;
  -webkit-text-stroke: 1px rgba(232,196,88,0.06) !important;
  letter-spacing: -0.03em !important;
}
.philosophy-quote {
  font-family: 'Fraunces', serif !important;
  font-weight: 300 !important;
  letter-spacing: -0.005em;
  line-height: 1.45 !important;
}
.philosophy-quote .highlight {
  font-style: italic !important;
  font-family: 'Fraunces', serif !important;
}
.quote-mark {
  font-family: 'Fraunces', serif !important;
  opacity: 0.35 !important;
}

/* ===== CONTACT ===== */
.contact-link {
  border-radius: 2px;
  transition: all .4s cubic-bezier(.4,0,.2,1) !important;
  position: relative;
  overflow: hidden;
}
.contact-link::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(232,196,88,0.04), transparent);
  transition: left .6s ease;
}
.contact-link:hover::before { left: 100%; }
.contact-link:hover { transform: translateX(8px) !important; }

/* ===== COMPÉTENCES ===== */
.skill-col {
  border-radius: 2px;
  transition: all .4s cubic-bezier(.4,0,.2,1);
}
.skill-col:hover {
  background: rgba(232,196,88,0.015);
  transform: translateY(-2px);
}
.skill-bar-fill {
  background: linear-gradient(90deg, var(--accent), var(--accent2)) !important;
  opacity: 0.85 !important;
}
.tool-chip {
  border-radius: 999px;
  transition: all .3s cubic-bezier(.4,0,.2,1) !important;
}
.tool-chip:hover {
  background: rgba(232,196,88,0.06);
  transform: translateY(-1px);
}

/* ===== MODAL ===== */
.modal-box {
  border-radius: 3px;
  box-shadow: 0 40px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(232,196,88,0.06);
}
.modal-title {
  letter-spacing: 0.02em !important;
}
.sci-box {
  border-radius: 2px;
  transition: border-color .3s;
}
.sci-box:hover {
  border-left-color: var(--accent) !important;
}

/* ===== FOOTER / STATUS ===== */
footer { border-top: none; }

/* Renforcement des séparateurs de sections */
section + section::before,
section + #contact::before {
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(232,196,88,0.06) 15%,
    rgba(232,196,88,0.35) 50%,
    rgba(232,196,88,0.06) 85%,
    transparent 100%) !important;
  box-shadow:0 0 22px rgba(232,196,88,0.12) !important;
  height:1px !important;
}

/* ===== Scroll indicator plus élégant ===== */
.scroll-text {
  letter-spacing: 0.3em !important;
  font-weight: 500;
}

/* ===== Cursor ring plus fin ===== */
.cursor-ring {
  border: 1px solid rgba(232,196,88,0.5) !important;
  mix-blend-mode: plus-lighter;
}

/* Sélection */
::selection {
  background: rgba(232,196,88,0.25);
  color: var(--text);
}
::-moz-selection {
  background: rgba(232,196,88,0.25);
  color: var(--text);
}

/* Scrollbar raffinée */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 0;
  border: 3px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* Player musical — wrapper fixe + cover card Spotify */
#mp-wrap {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
}
#mp-wrap > * { pointer-events: all; }

#musicPlayer {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
}

/* Tabs projets en haut */
.project-tabs {
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}
.tab-link {
  transition: color .3s cubic-bezier(.4,0,.2,1), opacity .3s;
}
.tab-link.live:hover { color: var(--accent); }

/* Hero name — ombre chaude subtile sur les gros caractères */
.hero-name {
  text-shadow: 0 1px 0 rgba(0,0,0,0.4);
}

/* Respiration générale du texte */
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }

/* ===== FIX HERO — centrage & superposition ===== */
/* Le Orz décoratif : on le recule en z-index et on l'opacifie
   pour qu'il n'entre jamais visuellement dans les CTA */
.hero-orz {
  z-index: 0 !important;
  opacity: 0.9;
  right: -40px !important;
  pointer-events: none;
}

/* Le dessin ASCII (O/r/z visuel) : on le sort du flux absolu
   problématique et on lui laisse sa place propre sous les CTA */
.hero { position: relative; }
.ascii-meaning {
  position: static !important;
  margin-top: 56px;
  opacity: 1 !important;
  animation: fadeUp 0.8s 1s forwards !important;
  padding-left: 0 !important;
}

/* Le scroll indicator reste en bas à droite, on s'assure qu'il ne
   se télescope pas avec les CTA sur petit écran */
.scroll-indicator {
  z-index: 3 !important;
}

/* Le contenu hero reprend la main par-dessus le Orz */
.hero-content { z-index: 2 !important; }
.hero-ctas { position: relative; z-index: 3; }

/* En dessous de 1100px, le Orz passe derrière tout et s'atténue */
@media (max-width: 1100px) {
  .hero-orz {
    opacity: 0.5 !important;
    right: -80px !important;
  }
}
@media (max-width: 720px) {
  .ascii-meaning {
    margin-top: 40px;
    transform: scale(.85);
    transform-origin: left top;
  }
}

/* ============================================
   ANIMATIONS — plus de vie partout
   ============================================ */

/* Reveal au scroll pour tous les blocs principaux */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
}
.reveal.in-view,
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* Hero — entrée plus cinématographique */
.hero-eyebrow {
  animation-duration: 1.2s !important;
  animation-timing-function: cubic-bezier(.2,.7,.2,1) !important;
}
.hero-name {
  animation-duration: 1.4s !important;
  animation-timing-function: cubic-bezier(.2,.7,.2,1) !important;
}
.hero-name .accent {
  display: inline-block;
  animation: heroAccent 1.6s .8s cubic-bezier(.2,.7,.2,1) both !important;
}
@keyframes heroAccent {
  from { opacity: 0; transform: translateY(40px) scale(.9) rotate(-2deg); }
  to { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

/* Orz décoratif — float plus organique + pulse subtil */
.hero-orz {
  animation: floatOrz 14s ease-in-out infinite !important;
}
@keyframes floatOrz {
  0%, 100% { transform: translateY(-50%) translateX(0) rotate(0); }
  33% { transform: translateY(-52%) translateX(-10px) rotate(-.3deg); }
  66% { transform: translateY(-48%) translateX(6px) rotate(.2deg); }
}

/* Background — halos qui respirent */
body::before,
body::after {
  animation: halo 20s ease-in-out infinite alternate;
}
@keyframes halo {
  0% { opacity: 1; transform: translate(0,0); }
  100% { opacity: .75; transform: translate(20px, -15px); }
}

/* Tabs projets en haut — léger scroll horizontal animé */
.project-tabs {
  transition: background .3s;
}
.tab-link {
  position: relative;
}
.tab-link.live::before {
  content: '';
  position: absolute;
  left: 50%; bottom: -2px;
  width: 4px; height: 1px;
  background: var(--accent);
  transform: translateX(-50%) scaleX(0);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.tab-link.live:hover::before { transform: translateX(-50%) scaleX(4); }
.tab-dot {
  animation: tabDot 3s ease-in-out infinite;
}
@keyframes tabDot {
  0%, 100% { opacity: .6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* Projets — entrée décalée + hover vivant */
.project-card {
  animation: cardIn .8s cubic-bezier(.2,.7,.2,1) both;
  animation-play-state: paused;
}
.project-card.in-view,
.projects-grid .project-card {
  animation-play-state: running;
}
.projects-grid .project-card:nth-child(1) { animation-delay: .05s; }
.projects-grid .project-card:nth-child(2) { animation-delay: .12s; }
.projects-grid .project-card:nth-child(3) { animation-delay: .19s; }
.projects-grid .project-card:nth-child(4) { animation-delay: .26s; }
.projects-grid .project-card:nth-child(5) { animation-delay: .33s; }
.projects-grid .project-card:nth-child(6) { animation-delay: .40s; }
.projects-grid .project-card:nth-child(7) { animation-delay: .47s; }
.projects-grid .project-card:nth-child(8) { animation-delay: .54s; }
@keyframes cardIn {
  from { opacity: 0; transform: translateY(40px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.project-card::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(232,196,88,0.04), transparent);
  transition: left .8s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.project-card:hover::after { left: 100%; }

.project-title {
  transition: transform .4s cubic-bezier(.4,0,.2,1), color .3s;
}
.project-card:hover .project-title {
  transform: translateX(4px);
  color: var(--accent);
}

/* Traits — stagger en entrée */
.trait-card {
  animation: traitIn .7s cubic-bezier(.2,.7,.2,1) both;
}
.identity-right .trait-card:nth-child(1) { animation-delay: .1s; }
.identity-right .trait-card:nth-child(2) { animation-delay: .17s; }
.identity-right .trait-card:nth-child(3) { animation-delay: .24s; }
.identity-right .trait-card:nth-child(4) { animation-delay: .31s; }
.identity-right .trait-card:nth-child(5) { animation-delay: .38s; }
.identity-right .trait-card:nth-child(6) { animation-delay: .45s; }
@keyframes traitIn {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Philosophie — fond qui respire */
.philosophy-bg {
  animation: philoFloat 16s ease-in-out infinite;
}
@keyframes philoFloat {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -52%) scale(1.03); }
}
.philosophy-quote {
  animation: quoteIn 1.2s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes quoteIn {
  from { opacity: 0; transform: translateY(20px); letter-spacing: .02em; }
  to { opacity: 1; transform: translateY(0); letter-spacing: -.005em; }
}

/* Scroll pulse renforcé */
@keyframes scrollPulse {
  0%, 100% { transform: scaleY(.3); opacity: .3; }
  50% { transform: scaleY(1); opacity: 1; }
}

/* Mimine — léger pulse d'attention */
.mimine-wrap img, [class*="mimine"] img {
  transition: transform .4s cubic-bezier(.4,0,.2,1);
}
.mimine-wrap:hover img, [class*="mimine"]:hover img {
  transform: scale(1.06) rotate(-2deg);
}

/* Liens de contact — rebond subtil */
.contact-link-arrow {
  transition: transform .4s cubic-bezier(.4,0,.2,1), color .3s;
}
.contact-link:hover .contact-link-arrow {
  transform: translateX(8px) !important;
}

/* Nav — apparition au chargement */
nav {
  animation: navIn .8s .2s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes navIn {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Boutons — ripple au hover */
.btn-primary, .btn-ghost {
  position: relative;
  overflow: hidden;
}
.btn-primary::after, .btn-ghost::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  transform: translate(-50%, -50%);
  transition: width .6s ease, height .6s ease;
  pointer-events: none;
}
.btn-primary:hover::after, .btn-ghost:hover::after {
  width: 400px; height: 400px;
}

/* Section headings — léger shift à l'apparition */
h2 {
  transition: letter-spacing .6s cubic-bezier(.4,0,.2,1);
}

/* Hover sur les H2 avec em (doré italique) — léger bounce */
h2 em {
  display: inline-block;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
section:hover h2 em {
  transform: translateY(-2px) rotate(-1deg);
}

/* Cursor dot & ring — plus réactifs */
.cursor {
  transition: transform .15s cubic-bezier(.4,0,.2,1), opacity .3s;
}
.cursor-ring {
  transition: transform .25s cubic-bezier(.4,0,.2,1), width .3s, height .3s, border-color .3s, opacity .3s;
}

/* Player musical — hover doré */
.pl-item, .player-btn {
  transition: all .3s cubic-bezier(.4,0,.2,1);
}
.pl-item:hover {
  background: rgba(232,196,88,0.06) !important;
  padding-left: 14px;
}
.player-btn:hover {
  color: var(--accent) !important;
  transform: scale(1.1);
}

/* Skill bars — easing plus doux */
.skill-bar-fill, .bar-fill {
  transition: width 1.8s cubic-bezier(.2,.7,.2,1) !important;
}

/* Modal — apparition plus classe */
.modal-overlay {
  transition: opacity .5s cubic-bezier(.2,.7,.2,1);
}
.modal-overlay.open .modal-box {
  animation: modalIn .6s cubic-bezier(.2,.7,.2,1);
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(30px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.sci-box {
  transition: all .4s cubic-bezier(.4,0,.2,1);
}
.sci-box:hover {
  transform: translateX(4px);
  border-left-color: var(--accent) !important;
  background: rgba(232,196,88,0.02) !important;
}

/* Focus TDAH bar — pulse doré sur les bordures */
#tdah-bar, .focus-bar {
  animation: focusPulse 3s ease-in-out infinite;
}
@keyframes focusPulse {
  0%, 100% { border-color: rgba(232,196,88,0.15); }
  50% { border-color: rgba(232,196,88,0.35); }
}

/* ============================================ */
/*  HERO — repositionner ascii-meaning en bas à gauche */
/* ============================================ */
.ascii-meaning {
  margin-top: 56px !important;
  max-width: 520px !important;
  padding-top: 28px !important;
}
.ascii-meaning svg {
  width: 200px !important;
  height: auto !important;
}

/* CONTACT — réduire l'espace vide au-dessus */
.contact {
  padding-top: 64px !important;
}

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

/* ============================================ */
/*  PLAYER MUSICAL — PILL FLOATER DORÉ          */
/* ============================================ */
#musicPlayer {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 6px 13px 6px 10px !important;
  background: linear-gradient(135deg, rgba(18,16,10,.94), rgba(11,10,7,.95)) !important;
  border: 1px solid rgba(232,200,74,.20) !important;
  border-radius: 100px !important;
  backdrop-filter: blur(16px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.4) !important;
  box-shadow:
    0 0 0 1px rgba(232,200,74,.03),
    0 6px 24px rgba(0,0,0,.55),
    0 0 36px rgba(232,200,74,.04);
  font-family: 'DM Mono','Courier New',monospace;
  transition: all .4s cubic-bezier(.2,.8,.2,1) !important;
  animation: mpFadeIn .9s cubic-bezier(.2,.8,.2,1) .5s backwards;
}
@keyframes mpFadeIn {
  from { opacity: 0; transform: translateY(20px) scale(.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
#musicPlayer:hover {
  border-color: rgba(232,200,74,.45) !important;
  box-shadow:
    0 0 0 1px rgba(232,200,74,.08),
    0 12px 36px rgba(0,0,0,.55),
    0 0 50px rgba(232,200,74,.14);
  transform: translateY(-2px);
}

/* Bouton play/pause principal */
#musicBtn {
  all: unset;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(232,200,74,.08);
  border: 1px solid rgba(232,200,74,.28);
  color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: all .3s cubic-bezier(.2,.8,.2,1);
}
#musicBtn:hover {
  background: rgba(232,200,74,.18);
  border-color: rgba(232,200,74,.55);
  transform: scale(1.08);
  box-shadow: 0 0 16px rgba(232,200,74,.35);
}
#musicPlayer.on #musicBtn {
  background: rgba(232,200,74,.22);
  border-color: rgba(232,200,74,.6);
  box-shadow: 0 0 14px rgba(232,200,74,.3);
}
#musicPlayer.on #musicBtn::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(232,200,74,.5);
  animation: mpRing 2.2s ease-out infinite;
  pointer-events: none;
}
@keyframes mpRing {
  0% { opacity: .8; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.6); }
}

/* Switch play ↔ pause icônes */
.mp-icon { transition: opacity .25s; }
#musicPlayer .mp-play { display: block; }
#musicPlayer .mp-pause { display: none; }
#musicPlayer.on .mp-play { display: none; }
#musicPlayer.on .mp-pause { display: block; }

/* Equalizer animated */
.mp-eq {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 16px;
  width: 18px;
  flex-shrink: 0;
  opacity: .22;
  transition: opacity .4s;
}
.mp-eq span {
  display: block;
  width: 2px;
  height: 40%;
  background: var(--accent);
  border-radius: 1px;
}
#musicPlayer.on .mp-eq { opacity: 1; }
#musicPlayer.on .mp-eq span {
  animation: mpEq 1s ease-in-out infinite;
}
#musicPlayer.on .mp-eq span:nth-child(1) { animation-delay: 0s; }
#musicPlayer.on .mp-eq span:nth-child(2) { animation-delay: .2s; }
#musicPlayer.on .mp-eq span:nth-child(3) { animation-delay: .4s; }
#musicPlayer.on .mp-eq span:nth-child(4) { animation-delay: .1s; }
@keyframes mpEq {
  0%,100% { height: 25%; }
  50%     { height: 95%; }
}

/* Track info */
.mp-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 112px;
  line-height: 1.2;
  overflow: hidden;
}
.mp-title {
  font-size: 9.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .3s;
}
#musicPlayer.on .mp-title { color: var(--accent); }
.mp-sub {
  font-family: 'Fraunces', 'Instrument Serif', serif;
  font-style: italic;
  font-size: 10px;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--muted);
  opacity: .7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Controles secondaires (next / playlist) */
.mp-ctrls {
  display: flex;
  align-items: center;
  gap: 6px;
  border-left: 1px solid rgba(232,200,74,.12);
  padding-left: 10px;
}
.mp-mini {
  all: unset;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(232,200,74,.55);
  border-radius: 50%;
  cursor: pointer;
  transition: all .3s cubic-bezier(.2,.8,.2,1);
}
.mp-mini:hover {
  color: var(--accent);
  background: rgba(232,200,74,.1);
  transform: scale(1.1);
}

/* Volume */
.mp-vol {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  padding-left: 10px;
  border-left: 1px solid rgba(232,200,74,.12);
}
.mp-vol svg { flex-shrink: 0; opacity: .55; }
#volSlider {
  --vol-pct: 32%;
  -webkit-appearance: none !important;
  appearance: none !important;
  background: linear-gradient(90deg,
    var(--accent) 0%,
    var(--accent) var(--vol-pct),
    rgba(232,196,88,0.12) var(--vol-pct),
    rgba(232,196,88,0.12) 100%
  ) !important;
  width: 80px !important;
  height: 3px !important;
  border-radius: 1.5px !important;
  cursor: pointer;
  outline: none;
  transition: width .35s cubic-bezier(.2,.8,.2,1) !important;
}
#musicPlayer:hover #volSlider { width: 120px !important; }
#volSlider::-webkit-slider-runnable-track { height: 3px; border-radius: 1.5px; }
#volSlider::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 12px !important; height: 12px !important;
  border-radius: 50% !important;
  background: var(--accent) !important;
  box-shadow: 0 0 10px rgba(232,196,88,0.65), 0 0 3px rgba(232,196,88,0.9) !important;
  cursor: pointer;
  margin-top: -4.5px !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
#volSlider::-webkit-slider-thumb:hover {
  transform: scale(1.5) !important;
  box-shadow: 0 0 18px rgba(232,196,88,0.95), 0 0 5px rgba(232,196,88,1) !important;
}
#volSlider::-moz-range-track {
  height: 3px !important; background: rgba(232,196,88,0.12) !important; border-radius: 1.5px !important;
}
#volSlider::-moz-range-progress { height: 3px !important; background: var(--accent) !important; border-radius: 1.5px !important; }
#volSlider::-moz-range-thumb {
  border: none !important; width: 12px !important; height: 12px !important;
  border-radius: 50% !important; background: var(--accent) !important;
  box-shadow: 0 0 10px rgba(232,196,88,0.65) !important; cursor: pointer;
}

/* Badge de volume — s'illumine pendant le drag */
.vol-val {
  font-family: 'DM Mono', 'Courier New', monospace !important;
  font-size: 8px !important;
  letter-spacing: 0.12em !important;
  color: rgba(232,196,88,0.3) !important;
  min-width: 24px !important;
  text-align: left !important;
  transition: color 0.25s ease !important;
  user-select: none !important;
  pointer-events: none !important;
  flex-shrink: 0 !important;
}
.mp-vol:hover .vol-val { color: rgba(232,196,88,0.6) !important; }
.vol-val.active { color: rgba(232,196,88,1) !important; transition: none !important; }

/* Playlist dropdown — nouveau positionnement (au-dessus du pill) */
#playlistDropdown {
  position: absolute;
  bottom: calc(100% + 12px);
  right: 0;
  min-width: 240px;
  max-height: 280px;
  overflow-y: auto;
  padding: 10px 6px;
  background: linear-gradient(135deg, rgba(18,16,10,.96), rgba(12,11,8,.96));
  border: 1px solid rgba(232,200,74,.22);
  border-radius: 12px;
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 12px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(232,200,74,.05);
  margin-top: 0 !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(232,200,74,.22) !important;
}
#playlistDropdown[style*="display: block"] {
  animation: mpPlSlide .4s cubic-bezier(.2,.8,.2,1);
}
@keyframes mpPlSlide {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
#playlistDropdown button {
  position: relative;
  padding: 7px 14px !important;
  border-radius: 6px;
  transition: all .3s cubic-bezier(.2,.8,.2,1) !important;
  animation: mpPlItemIn .35s cubic-bezier(.2,.8,.2,1) backwards;
}
#playlistDropdown button:nth-child(1){animation-delay:.03s}
#playlistDropdown button:nth-child(2){animation-delay:.06s}
#playlistDropdown button:nth-child(3){animation-delay:.09s}
#playlistDropdown button:nth-child(4){animation-delay:.12s}
#playlistDropdown button:nth-child(5){animation-delay:.15s}
#playlistDropdown button:nth-child(6){animation-delay:.18s}
#playlistDropdown button:nth-child(7){animation-delay:.21s}
#playlistDropdown button:nth-child(8){animation-delay:.24s}
#playlistDropdown button:nth-child(n+9){animation-delay:.27s}
@keyframes mpPlItemIn {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}
#playlistDropdown button:hover {
  background: rgba(232,200,74,.08);
  padding-left: 18px !important;
  letter-spacing: .14em !important;
}

/* Responsive */
@media (max-width: 680px) {
  #musicPlayer {
    bottom: 12px !important;
    right: 12px !important;
    padding: 8px 12px 8px 10px !important;
    gap: 10px !important;
  }
  .mp-info { min-width: 90px; }
  .mp-title { font-size: 9px; }
  .mp-sub { font-size: 9px; }
  .mp-vol { display: none; }
  .mp-ctrls { padding-left: 6px; }
}

/* ============================================ */
/*  MUSIC COVER CARD — SPOTIFY STYLE             */
/* ============================================ */
/* ============================================================ */
/*  COVER CARD — version verticale Spotify                      */
/* ============================================================ */
#mp-cover-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 252px;
  background: linear-gradient(180deg, rgba(16,13,9,.96) 0%, rgba(8,7,5,.98) 100%);
  border: 1px solid rgba(232,200,74,.28);
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 28px 72px rgba(0,0,0,.82),
    0 0 0 1px rgba(232,200,74,.07),
    0 0 40px rgba(232,200,74,.07),
    inset 0 1px 0 rgba(232,200,74,.10);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  transform-origin: bottom right;
  animation: mpCoverIn .5s cubic-bezier(.2,.8,.2,1), auroraGlow 4s .6s ease-in-out infinite;
  transition: box-shadow .35s ease, border-color .35s ease;
}
#mp-cover-card:hover {
  box-shadow:
    0 36px 88px rgba(0,0,0,.88),
    0 0 0 1px rgba(232,200,74,.28),
    0 0 60px rgba(232,200,74,.14),
    inset 0 1px 0 rgba(232,200,74,.16);
  border-color: rgba(232,200,74,.42);
}
@keyframes mpCoverIn {
  from { opacity: 0; transform: translateY(18px) scale(.93); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes auroraGlow {
  0%, 100% {
    box-shadow:
      0 28px 72px rgba(0,0,0,.82),
      0 0 0 1px rgba(232,200,74,.07),
      0 0 40px rgba(232,200,74,.07),
      inset 0 1px 0 rgba(232,200,74,.10);
  }
  50% {
    box-shadow:
      0 28px 72px rgba(0,0,0,.82),
      0 0 0 1px rgba(232,200,74,.18),
      0 0 70px rgba(232,200,74,.16),
      0 0 120px rgba(200,150,40,.06),
      inset 0 1px 0 rgba(232,200,74,.14);
  }
}

/* Wrapper de la pochette : 4/3 compact */
#mp-cover-art-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  flex-shrink: 0;
}
/* Grain de film animé */
#mp-cover-art-wrap::before {
  content: '';
  position: absolute;
  inset: -40%;
  width: 180%;
  height: 180%;
  z-index: 4;
  pointer-events: none;
  opacity: 0.042;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainMove .32s steps(1) infinite;
}
@keyframes grainMove {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-4%, 5%); }
  50%  { transform: translate(5%, -4%); }
  75%  { transform: translate(-5%, -5%); }
}

/* Vignette + fondu bas vers la meta section */
#mp-cover-art-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 88% 88% at 50% 50%, transparent 25%, rgba(0,0,0,.48) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.15) 0%, transparent 28%, transparent 42%, rgba(8,6,4,.97) 100%);
  pointer-events: none;
  z-index: 3;
}

/* Backdrop flou — halo atmosphérique, même recadrage que la vidéo principale */
#mp-cover-vid-bg {
  position: absolute;
  inset: -18%;
  object-fit: cover;
  object-position: 65% center;
  display: block;
  filter: blur(36px) saturate(2.6) brightness(0.5);
  z-index: 0;
  pointer-events: none;
}

/* Vidéo principale — scale zoom + recadrage à droite */
#mp-cover-vid {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% center;
  display: block;
  border-radius: 0;
  border: none;
  background: transparent;
  filter: saturate(1.18) contrast(1.08) brightness(0.92);
  transform: scale(1.25);
  transform-origin: center;
  transition: opacity .44s cubic-bezier(.4,0,.2,1);
  z-index: 1;
}

/* Scanlines CRT — texture rétro subtile */
.mp-scanlines {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(0,0,0,.07) 3px,
    rgba(0,0,0,.07) 4px
  );
  opacity: 0.55;
}

/* Badge "EN LECTURE" */
#mp-now-playing {
  position: absolute;
  top: 11px;
  left: 12px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'DM Mono', monospace;
  font-size: 7px;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  background: rgba(0,0,0,.38);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 4px 9px 4px 8px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.1);
}
.np-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #e8c858;
  box-shadow: 0 0 7px rgba(232,200,74,.9);
  flex-shrink: 0;
  animation: npPulse 1.3s ease-in-out infinite;
}
@keyframes npPulse {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 7px rgba(232,200,74,.9); }
  50%       { opacity: 0.38; transform: scale(0.6); box-shadow: 0 0 2px rgba(232,200,74,.3); }
}
@media (prefers-reduced-motion: reduce) {
  .np-dot { animation: none; }
  #mp-cover-art-wrap::before { animation: none; }
}

/* Shimmer couvrant toute la pochette */
#mp-cover-card .mp-shimmer {
  position: absolute;
  inset: 0;
  border-radius: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}
#mp-cover-card .mp-shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    transparent 25%,
    rgba(255,255,255,.12) 46%,
    rgba(255,255,255,.07) 52%,
    transparent 72%
  );
  animation: mpSweep 3.6s ease-in-out infinite;
}
@keyframes mpSweep {
  0%        { transform: translateX(-160%) skewX(-14deg); }
  60%, 100% { transform: translateX(320%) skewX(-14deg); }
}
@media (prefers-reduced-motion: reduce) {
  #mp-cover-vid { opacity: 1; }
  #mp-cover-card .mp-shimmer::after { animation: none; }
}

/* ============================================ */
/*  BEAT SYNC — cosy pulse (Web Audio API)      */
/* ============================================ */

/* Bloom ambiant depuis le coin lecteur */
#beat-bloom {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(
    ellipse 52% 38% at 100% 100%,
    rgba(232,196,88,.12) 0%,
    rgba(232,196,88,.04) 40%,
    transparent 70%
  );
  opacity: 0;
  will-change: opacity;
}
@keyframes beatBloom {
  0%   { opacity: 0; }
  12%  { opacity: 1; }
  100% { opacity: 0; }
}
#beat-bloom.pulse {
  animation: beatBloom .6s cubic-bezier(.15,.85,.2,1) forwards;
}

/* Pill lecteur — glow surge */
@keyframes beatGlow {
  0% {
    box-shadow:
      0 0 0 1px rgba(232,200,74,.03),
      0 8px 28px rgba(0,0,0,.5),
      0 0 40px rgba(232,200,74,.04);
    border-color: rgba(232,200,74,.22) !important;
  }
  16% {
    box-shadow:
      0 0 0 1px rgba(232,200,74,.32),
      0 12px 36px rgba(0,0,0,.38),
      0 0 58px rgba(232,200,74,.24);
    border-color: rgba(232,200,74,.62) !important;
  }
  100% {
    box-shadow:
      0 0 0 1px rgba(232,200,74,.03),
      0 8px 28px rgba(0,0,0,.5),
      0 0 40px rgba(232,200,74,.04);
    border-color: rgba(232,200,74,.22) !important;
  }
}
#musicPlayer.beat {
  animation: beatGlow .48s cubic-bezier(.15,.85,.2,1) forwards !important;
}

/* Pochette — micro-scale (base scale(1.25) préservée) */
@keyframes beatCoverScale {
  0%   { transform: scale(1.25); }
  16%  { transform: scale(1.29); }
  100% { transform: scale(1.25); }
}
#mp-cover-vid.beat {
  animation: beatCoverScale .4s cubic-bezier(.15,.85,.2,1) forwards !important;
}

/* EQ bars — boost height on beat */
@keyframes beatEq {
  0%   { height: 80%; }
  18%  { height: 100%; }
  100% { height: 25%; }
}
#musicPlayer.on.beat .mp-eq span {
  animation: beatEq .4s cubic-bezier(.15,.85,.2,1) forwards !important;
}

/* Éclairage spot — flash doux sur le beat (claquement de doigt) */
#mp-cover-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 8;
  /* Spot depuis le haut-centre : illumine le panel comme un projecteur de scène */
  background: radial-gradient(
    ellipse 110% 75% at 50% -8%,
    rgba(255, 218, 90, 0.42) 0%,
    rgba(232, 200, 74, 0.18) 42%,
    transparent 70%
  );
  opacity: 0;
  will-change: opacity;
}
/* Attaque rapide (snap ~45ms), déclin naturel sur 540ms */
@keyframes coverFlash {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  100% { opacity: 0; }
}
#mp-cover-flash.beat {
  animation: coverFlash .54s cubic-bezier(.18,.85,.2,1) forwards;
}

@media (prefers-reduced-motion: reduce) {
  #beat-bloom.pulse,
  #musicPlayer.beat,
  #mp-cover-vid.beat,
  #mp-cover-flash.beat,
  #musicPlayer.on.beat .mp-eq span { animation: none !important; }
}
#mp-cover-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 13px 14px 15px;
  overflow: hidden;
  /* gradient qui saigne depuis la vidéo pour une transition naturelle */
  background: linear-gradient(
    to bottom,
    rgba(10,8,5,.96) 0%,
    rgba(8,6,4,.99) 100%
  );
}
#mp-cover-title {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  color: #f0e2b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#mp-cover-artist {
  font-family: 'Fraunces', 'Instrument Serif', serif;
  font-style: italic;
  font-size: 10.5px;
  color: rgba(232,200,74,.58);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#mp-cover-yt {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'DM Mono', monospace;
  font-size: 8.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(232,200,74,.35);
  text-decoration: none;
  margin-top: 3px;
  transition: color .2s;
}
#mp-cover-yt:hover { color: var(--accent); }
#mp-cover-yt svg { flex-shrink: 0; width: 10px; height: 10px; }

/* Bouton fermer — overlaid en haut à droite de la pochette */
#mp-cover-close {
  all: unset;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.8);
  cursor: pointer;
  border-radius: 50%;
  background: rgba(0,0,0,.48);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all .22s;
}
#mp-cover-close:hover {
  color: #fff;
  background: rgba(0,0,0,.68);
  border-color: rgba(255,255,255,.3);
}

/* Bouton restaurer (quand lecteur complètement caché) */
#mp-restore-btn {
  all: unset;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(20,17,10,.93), rgba(12,11,8,.93));
  border: 1px solid rgba(232,200,74,.22);
  border-radius: 50%;
  color: rgba(232,200,74,.5);
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 18px rgba(0,0,0,.4);
  transition: all .3s cubic-bezier(.2,.8,.2,1);
  animation: mpFadeIn .5s cubic-bezier(.2,.8,.2,1);
}
#mp-restore-btn:hover {
  color: var(--accent);
  border-color: rgba(232,200,74,.5);
  box-shadow: 0 0 18px rgba(232,200,74,.28), 0 6px 20px rgba(0,0,0,.4);
  transform: scale(1.12);
}

/* États de vue : full / compact / hidden */
#mp-wrap[data-mpview="compact"] #mp-cover-card,
#mp-wrap[data-mpview="hidden"]  #mp-cover-card { display: none; }

#mp-wrap[data-mpview="hidden"]  #musicPlayer { display: none !important; }

#mp-wrap:not([data-mpview="hidden"]) #mp-restore-btn { display: none; }

/* Icône cover-toggle active quand cover visible */
#mp-wrap[data-mpview="full"] .mp-mini#mp-cover-toggle { color: var(--accent) !important; }

/* Responsive */
@media (max-width: 680px) {
  #mp-wrap { bottom: 12px !important; right: 12px !important; }
  #mp-cover-card {
    min-width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
  }
}

/* ============================================ */
/*  TDAH FOCUS BUTTON — REPOSITIONNEMENT         */
/* ============================================ */
/* On le déplace en bas à gauche pour ne plus chevaucher le footer ni le player musical */
#tdah-toggle {
  left: 22px !important;
  bottom: 22px !important;
  transform: none !important;
  border-color: rgba(232,200,74,.18) !important;
  color: rgba(232,200,74,.45) !important;
  background: rgba(18,16,10,.75) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 7px 14px !important;
  letter-spacing: .18em !important;
  transition: all .3s cubic-bezier(.2,.8,.2,1) !important;
}
#tdah-toggle:hover,
#tdah-toggle.active {
  color: var(--accent) !important;
  border-color: rgba(232,200,74,.5) !important;
  background: rgba(232,200,74,.08) !important;
  letter-spacing: .22em !important;
}
#tdah-bar {
  border-top-color: rgba(232,200,74,.25) !important;
  border-bottom-color: rgba(232,200,74,.25) !important;
}

/* ============================================ */
/*  FOOTER — ALIGNEMENT PROPRE                   */
/* ============================================ */
footer {
  padding: 40px 48px 80px !important;
  text-align: center;
  position: relative;
  z-index: 1;
}
footer .footer-text[style*="width:100%"] {
  margin-top: 20px !important;
  padding: 0 80px;
  opacity: .45 !important;
}

/* Sur mobile on peut empiler et garder de la place pour tdah-toggle */
@media (max-width: 680px) {
  footer { padding: 32px 24px 100px !important; gap: 8px !important; }
  footer .footer-text[style*="width:100%"] { padding: 0 20px; }
  #tdah-toggle {
    left: 12px !important;
    bottom: 12px !important;
    font-size: 7px !important;
    padding: 6px 10px !important;
  }
}

/* ============================================ */
/*  MIMINE — TOBY FOX SHATTER EXPLOSION          */
/* ============================================ */
@keyframes tfFlash {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes tfShatter {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
    filter: brightness(1.2) contrast(1.1);
  }
  40% {
    opacity: 1;
    filter: brightness(1.4) contrast(1.2);
  }
  100% {
    transform: translate(var(--tdx), calc(var(--tdy) + 120px)) rotate(var(--trot)) scale(.4);
    opacity: 0;
    filter: brightness(2) contrast(.8);
  }
}
@keyframes tfSparkle {
  0% {
    transform: translate(0,0) scale(.2) rotate(0deg);
    opacity: 0;
    filter: drop-shadow(0 0 6px rgba(255,255,255,.9));
  }
  30% {
    transform: translate(calc(var(--sdx) * .4), calc(var(--sdy) * .4)) scale(1.3) rotate(180deg);
    opacity: 1;
  }
  100% {
    transform: translate(var(--sdx), var(--sdy)) scale(.3) rotate(540deg);
    opacity: 0;
  }
}


/* ============================================ */
/*  SECTIONS — fonds contrastés premium          */
/* ============================================ */

/* Hero — déjà riche, on renforce le glow latéral */
.hero {
  background-image:
    radial-gradient(ellipse 55% 70% at 0% 50%, rgba(232,196,88,0.055) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 100% 80%, rgba(107,142,255,0.04) 0%, transparent 55%) !important;
}

/* Identité — teinte chaude à gauche */
.identity {
  background:
    var(--bg2)
    radial-gradient(ellipse 60% 50% at 5% 50%, rgba(232,196,88,0.04) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 95% 20%, rgba(217,119,87,0.03) 0%, transparent 55%) !important;
}

/* Noema — glow central doux */
#noema {
  background:
    var(--bg)
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(232,196,88,0.035) 0%, transparent 65%) !important;
}

/* Projets — fond légèrement plus chaud */
.projects {
  background:
    var(--bg)
    radial-gradient(ellipse 80% 40% at 50% 100%, rgba(232,196,88,0.04) 0%, transparent 70%) !important;
}

/* Services — surface plus soutenue pour les cartes */
.services {
  background:
    var(--bg2)
    radial-gradient(ellipse 50% 60% at 100% 0%, rgba(232,196,88,0.045) 0%, transparent 55%),
    radial-gradient(ellipse 40% 50% at 0% 100%, rgba(107,142,255,0.025) 0%, transparent 55%) !important;
}

/* Compétences — accent bleu froid pour la variété */
.skills {
  background:
    var(--bg2)
    radial-gradient(ellipse 60% 50% at 80% 30%, rgba(107,142,255,0.04) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 20% 70%, rgba(232,196,88,0.03) 0%, transparent 55%) !important;
}

/* Philosophie — plus intense, c'est le climax */
.philosophy {
  background:
    var(--bg2)
    radial-gradient(ellipse 90% 70% at 50% 50%, rgba(232,196,88,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(232,196,88,0.04) 0%, transparent 50%) !important;
}

/* Vide ton sac — teinte calme */
#videsac {
  background:
    var(--bg2)
    radial-gradient(ellipse 55% 55% at 15% 50%, rgba(107,142,255,0.035) 0%, transparent 60%) !important;
}

/* Contact */
#contact {
  background:
    var(--bg)
    radial-gradient(ellipse 50% 60% at 90% 50%, rgba(232,196,88,0.04) 0%, transparent 55%) !important;
}

/* ============================================ */
/*  CURSOR — dot blanc + ring or 34px            */
/* ============================================ */
.cursor {
  background: #ffffff !important;
  width: 5px !important;
  height: 5px !important;
}
.cursor-ring {
  width: 34px !important;
  height: 34px !important;
  border: 1px solid rgba(232,196,76,0.45) !important;
  mix-blend-mode: normal !important;
}

/* ============================================ */
/*  SECTION-TAG — espacement sain avec h2        */
/* ============================================ */
.section-tag {
  margin-bottom: 32px !important;
  padding-top: 4px;
  opacity: .85;
}
.section-tag::after {
  height: 1px !important;
  background: linear-gradient(90deg, var(--accent) 0%, transparent 100%) !important;
  max-width: 64px !important;
  opacity: .6;
}
h2 { margin-top: 0 !important; }
.contact-left .section-tag[style*="margin-bottom"] {
  margin-bottom: 32px !important;
}

/* ============================================================ */
/*  NOEMA — PREMIUM TIER · 50K LEVEL                           */
/*  Grain · OLED depth · Architectural type · Luxury micro UX  */
/* ============================================================ */

/* ── 1. Grain de film — le signal n°1 d'un site premium ─────── */
body::before {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 9997 !important;
  pointer-events: none !important;
  opacity: 0.028 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='1'/%3E%3C/svg%3E") !important;
  background-size: 260px 260px !important;
  mix-blend-mode: overlay !important;
  animation: grainShift 8s steps(1) infinite !important;
  will-change: background-position !important;
}
@keyframes grainShift {
  0%   { background-position: 0 0; }
  10%  { background-position: -20px -15px; }
  20%  { background-position: 10px 25px; }
  30%  { background-position: -30px 5px; }
  40%  { background-position: 15px -20px; }
  50%  { background-position: -10px 30px; }
  60%  { background-position: 25px 10px; }
  70%  { background-position: -15px -25px; }
  80%  { background-position: 20px 15px; }
  90%  { background-position: -25px 20px; }
  100% { background-position: 0 0; }
}

/* ── 2. OLED blacks + vignette de bord ──────────────────────── */
:root {
  --bg:      #08080c !important;
  --bg2:     #0e0e14 !important;
  --surface: #141420 !important;
  --border:  #1f1f2e !important;
}
body::after {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(232,196,88,0.04) 0%, transparent 55%),
    radial-gradient(ellipse 120% 40% at 50% 110%, rgba(232,196,88,0.025) 0%, transparent 60%),
    radial-gradient(ellipse 30% 100% at 0% 50%, rgba(0,0,0,0.5) 0%, transparent 60%),
    radial-gradient(ellipse 30% 100% at 100% 50%, rgba(0,0,0,0.5) 0%, transparent 60%) !important;
}

/* ── 3. NAV — glass flottant premium avec bordure subtile ───── */
nav {
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 22px 52px !important;
  background: rgba(8,8,12,0.7) !important;
  backdrop-filter: blur(28px) saturate(1.6) brightness(0.95) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.6) brightness(0.95) !important;
  border-bottom: 1px solid rgba(232,196,88,0.07) !important;
  transition: border-color 0.4s, background 0.4s !important;
}
nav.scrolled {
  background: rgba(8,8,12,0.92) !important;
  border-bottom-color: rgba(232,196,88,0.14) !important;
}

/* ── 4. HERO — typographie architecturale maximale ──────────── */
.hero-orz {
  font-size: clamp(220px, 32vw, 480px) !important;
  opacity: 0.85 !important;
  -webkit-text-stroke: 1px rgba(232,196,88,0.06) !important;
  right: -60px !important;
}
.hero-name {
  font-size: clamp(80px, 13vw, 152px) !important;
  line-height: 0.88 !important;
  letter-spacing: -0.01em !important;
}
.hero-name .accent {
  -webkit-text-fill-color: transparent !important;
  background: linear-gradient(135deg, #e8c458 0%, #f5dfa0 45%, #c9a030 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  filter: drop-shadow(0 0 30px rgba(232,196,88,0.18)) !important;
}
.hero-eyebrow {
  font-size: 10px !important;
  letter-spacing: 0.32em !important;
}
.hero-desc {
  font-size: 15px !important;
  line-height: 1.9 !important;
  color: #888898 !important;
  max-width: 440px !important;
}

/* ── 5. SECTION TAGS — traitement éditorial architecturale ───── */
.section-tag {
  font-size: 9px !important;
  letter-spacing: 0.3em !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 36px !important;
  color: rgba(232,196,88,0.7) !important;
}
.section-tag::before {
  content: '';
  display: block;
  width: 1px;
  height: 32px;
  background: linear-gradient(to bottom, transparent, rgba(232,196,88,0.4), transparent);
  flex-shrink: 0;
}
.section-tag::after {
  display: none !important;
}

/* ── 6. H2 — taille architecturale, contraste choc ─────────── */
h2 {
  font-size: clamp(46px, 7vw, 80px) !important;
  letter-spacing: -0.01em !important;
  line-height: 0.93 !important;
  margin-bottom: 56px !important;
  color: var(--text) !important;
}
h2 em {
  background: linear-gradient(120deg, #e8c458 0%, #f0dfa0 50%, #c9a030 100%);
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ── 7. PROJECT CARDS — profondeur multi-couches ─────────────── */
.project-card {
  background: #0d0d14 !important;
  border: 1px solid #1a1a26 !important;
  border-radius: 0 !important;
  padding: 36px 32px !important;
  transition: all 0.5s cubic-bezier(0.16,1,0.3,1) !important;
  position: relative !important;
}
.project-card:hover {
  background: #111120 !important;
  border-color: rgba(232,196,88,0.2) !important;
  transform: translateY(-6px) !important;
  box-shadow:
    0 24px 64px rgba(0,0,0,0.6),
    0 0 0 1px rgba(232,196,88,0.1),
    0 0 40px rgba(232,196,88,0.04) !important;
}
.project-num {
  font-size: 9px !important;
  letter-spacing: 0.24em !important;
  color: rgba(232,196,88,0.3) !important;
  margin-bottom: 24px !important;
}
.project-title {
  font-size: 20px !important;
  letter-spacing: 0.04em !important;
}
.project-desc {
  font-size: 12px !important;
  line-height: 1.75 !important;
  color: #666677 !important;
}

/* ── 8. SERVICE CARDS — editorial dark luxury ─────────────────── */
.service-card {
  background: #0c0c14 !important;
  border: 1px solid rgba(232,196,88,0.08) !important;
}
.service-card:hover {
  background: #101018 !important;
  border-color: rgba(232,196,88,0.2) !important;
  box-shadow:
    0 32px 80px rgba(0,0,0,0.65),
    0 0 0 1px rgba(232,196,88,0.1),
    inset 0 0 60px rgba(232,196,88,0.015) !important;
}
.service-title {
  font-size: 24px !important;
  letter-spacing: 0.02em !important;
}
.service-desc {
  color: #666677 !important;
  line-height: 1.8 !important;
}
.service-price {
  font-size: 22px !important;
  letter-spacing: 0.04em !important;
  background: linear-gradient(135deg, #e8c458, #f5dfa0) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.service-tag {
  font-size: 8px !important;
  letter-spacing: 0.28em !important;
  border-color: rgba(232,196,88,0.18) !important;
  color: rgba(232,196,88,0.6) !important;
}
.service-num-bg {
  font-size: clamp(100px, 14vw, 160px) !important;
}

/* ── 9. SKILL COLS — plus premium ────────────────────────────── */
.skill-col {
  background: #0c0c14 !important;
  border: 1px solid #191924 !important;
  padding: 32px 28px !important;
}
.skill-col:hover {
  background: #101018 !important;
  border-color: rgba(232,196,88,0.15) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(232,196,88,0.06) !important;
  transform: translateY(-3px) !important;
}
.skill-category {
  font-size: 8px !important;
  letter-spacing: 0.28em !important;
}
.skill-bar-fill {
  background: linear-gradient(90deg, #7a6520, #e8c458, #f0dfa0) !important;
  opacity: 1 !important;
}

/* ── 10. TRAIT CARDS — plus raffinés ────────────────────────── */
.trait-card {
  background: #0c0c14 !important;
  border: 1px solid #181824 !important;
  padding: 20px 24px !important;
}
.trait-card:hover {
  background: #101018 !important;
  border-left-color: rgba(232,196,88,0.5) !important;
}

/* ── 11. CONTACT LINKS — texture premium ─────────────────────── */
.contact-link {
  background: #0c0c14 !important;
  border: 1px solid #191924 !important;
}
.contact-link:hover {
  background: #101018 !important;
  border-color: rgba(232,196,88,0.2) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4), inset 0 0 30px rgba(232,196,88,0.01) !important;
}

/* ── 12. CONTACT RIGHT — status panel ─────────────────────────��� */
.contact-right {
  background: #0d0d15 !important;
  border: 1px solid rgba(232,196,88,0.1) !important;
  box-shadow: 0 0 60px rgba(232,196,88,0.03), inset 0 0 40px rgba(232,196,88,0.01) !important;
}
.contact-right::before {
  background: linear-gradient(90deg, #c9a030, #e8c458, #f0dfa0) !important;
  height: 1px !important;
}

/* ── 13. PHILOSOPHIE — cinématique ───────────────────────────── */
.philosophy-quote {
  font-size: clamp(24px, 3.8vw, 42px) !important;
  line-height: 1.38 !important;
  letter-spacing: -0.01em !important;
}
.quote-mark {
  font-size: 90px !important;
  background: linear-gradient(135deg, #e8c458, transparent) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  opacity: 1 !important;
}
.philosophy-label {
  color: rgba(232,196,88,0.45) !important;
  letter-spacing: 0.22em !important;
  font-size: 10px !important;
}

/* ── 14. BOUTONS — précision horlogerie ─────────────────────── */
.btn-primary {
  background: linear-gradient(135deg, #c9a030 0%, #e8c458 50%, #f0dfa0 100%) !important;
  color: #08080c !important;
  font-size: 10px !important;
  letter-spacing: 0.22em !important;
  padding: 14px 32px !important;
  border-radius: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.4s cubic-bezier(0.16,1,0.3,1) !important;
  box-shadow: 0 0 0 1px rgba(232,196,88,0.3), 0 8px 20px rgba(200,160,48,0.2) !important;
}
.btn-primary:hover {
  transform: translateY(-3px) !important;
  box-shadow:
    0 0 0 1px rgba(232,196,88,0.5),
    0 16px 40px rgba(200,160,48,0.35),
    0 0 60px rgba(232,196,88,0.1) !important;
}
.btn-ghost {
  border: 1px solid rgba(232,196,88,0.2) !important;
  color: rgba(232,196,88,0.55) !important;
  letter-spacing: 0.22em !important;
  font-size: 10px !important;
  padding: 14px 32px !important;
  border-radius: 0 !important;
  transition: all 0.4s cubic-bezier(0.16,1,0.3,1) !important;
}
.btn-ghost:hover {
  border-color: rgba(232,196,88,0.6) !important;
  color: var(--accent) !important;
  background: rgba(232,196,88,0.04) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3), inset 0 0 20px rgba(232,196,88,0.02) !important;
  transform: translateY(-2px) !important;
}

/* ── 15. ORZ BREAKDOWN — plus architectural ─────────────────── */
.orz-breakdown {
  background: rgba(232,196,88,0.018) !important;
  border: 1px solid rgba(232,196,88,0.1) !important;
}
.orz-char {
  font-size: 52px !important;
  background: linear-gradient(135deg, #e8c458 0%, #f0dfa0 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ── 16. FOOTER — éditorial ────────────────────────────���─────── */
footer {
  background: #06060a !important;
  border-top: 1px solid #111118 !important;
  padding: 56px 52px 96px !important;
}
.footer-logo {
  font-size: 22px !important;
  letter-spacing: 0.1em !important;
}
.footer-logo span:first-child {
  background: linear-gradient(135deg, #e8c458, #f0dfa0) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  opacity: 1 !important;
}

/* ── 17. MODALS — ultra-premium ─────────────────────────────── */
.modal-box {
  background: #0c0c14 !important;
  border: 1px solid rgba(232,196,88,0.1) !important;
  box-shadow:
    0 60px 120px rgba(0,0,0,0.8),
    0 0 0 1px rgba(232,196,88,0.06),
    0 0 80px rgba(232,196,88,0.02) !important;
}

/* ── 18. SCROLL PROGRESS — plus visible ─────────────────────── */
#scroll-progress {
  height: 1.5px !important;
  background: linear-gradient(90deg, #6a5020, #c9a030, #e8c458, #f5dfa0, #e8c458) !important;
  box-shadow: 0 0 12px rgba(232,196,88,0.5), 0 0 4px rgba(232,196,88,0.8) !important;
}

/* ── 19. NOW PLAYING — plus premium ─────────────────────────── */
#now-playing {
  background: rgba(10,10,16,0.97) !important;
  border: 1px solid rgba(232,196,88,0.1) !important;
  border-left: 2px solid rgba(232,196,88,0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.6), 0 0 20px rgba(232,196,88,0.03) !important;
  border-radius: 0 !important;
}

/* ── 20. LOADER — ultra-propre ──────────────────────────────── */
#loader {
  background: #06060a !important;
}
#loader-letters {
  letter-spacing: 0.18em !important;
}
#loader-bar-wrap {
  width: 200px !important;
  background: rgba(232,196,88,0.06) !important;
}

/* ── 21. NAV DISPONIBLE DOT & LINKS — premium ───────────────── */
.nav-avail {
  font-size: 9px !important;
  letter-spacing: 0.22em !important;
  color: rgba(232,196,88,0.5) !important;
}
.nav-links a {
  font-size: 9px !important;
  letter-spacing: 0.2em !important;
  color: rgba(232,196,88,0.35) !important;
}
.nav-links a:hover { color: rgba(232,196,88,0.85) !important; }

/* ── 22. TOOL CHIPS — micro-précision ───────────────────────── */
.tool-chip {
  font-size: 9px !important;
  letter-spacing: 0.14em !important;
  padding: 5px 13px !important;
  border-color: #1e1e2c !important;
  border-radius: 0 !important;
}
.tool-chip.highlight {
  border-color: rgba(232,196,88,0.2) !important;
  color: rgba(232,196,88,0.7) !important;
}
.tool-chip:hover {
  border-color: rgba(232,196,88,0.35) !important;
  color: var(--accent) !important;
  background: rgba(232,196,88,0.04) !important;
}

/* ── 23. PROJECT TAGS — ultra-fin ───────────────────────────── */
.project-tag {
  font-size: 8px !important;
  letter-spacing: 0.2em !important;
  padding: 3px 10px !important;
  border-radius: 0 !important;
  opacity: 0.65 !important;
}

/* ── 24. SCI-BOX dans les modals ────────────────────────────── */
.sci-box {
  background: rgba(12,12,20,0.9) !important;
  border: 1px solid #191924 !important;
  border-left: 2px solid rgba(232,196,88,0.3) !important;
}

/* ── 25. STATUS PANEL ─────────────────────────────���─────────── */
.status-item {
  border-bottom-color: #191924 !important;
}
.status-key { color: #4a4a5c !important; }

/* ── 26. HERO STATS ──────────────────────────────���──────────── */
.hero-stat-num {
  background: linear-gradient(135deg, #e8c458 0%, #f0dfa0 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-size: 32px !important;
}
.hero-stat-label {
  color: #4a4a5c !important;
  letter-spacing: 0.24em !important;
}

/* ── 27. MARQUEE — plus discret / premium ───────────────────── */
.marquee-item {
  color: #1e1e2e !important;
  letter-spacing: 0.28em !important;
  font-size: 9px !important;
}
.marquee-item:hover { color: rgba(232,196,88,0.5) !important; }
.marquee-strip {
  border-top: 1px solid #111118 !important;
  border-bottom: 1px solid #111118 !important;
}

/* ── 28. HERO MIMINE PEEK ─────────────────────────────��──────── */
.hero-mimine img {
  border-color: rgba(232,196,88,0.35) !important;
  filter: saturate(0.6) brightness(0.75) !important;
}
.hero-mimine:hover img {
  filter: saturate(0.95) brightness(0.95) !important;
  border-color: rgba(232,196,88,0.7) !important;
  box-shadow: 0 0 24px rgba(232,196,88,0.25) !important;
}

/* ── 29. prefers-reduced-motion — conformité WCAG ─────────────── */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none !important; }
  .hero-orz { animation: none !important; }
}

/* ── 30. Mobile adjustments ─────────────────────────────────── */
@media (max-width: 900px) {
  nav { padding: 18px 24px !important; }
  .hero-orz { font-size: 44vw !important; right: -20px !important; }
  h2 { font-size: clamp(40px, 9vw, 64px) !important; }
  footer { padding: 40px 24px 100px !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM TIER III — Personnalité, Motion, Cinéma
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Scrollbar or — ultra-fin ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 2px; background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, rgba(232,196,88,0.45), rgba(232,196,88,0.04));
  border-radius: 1px;
}
* { scrollbar-width: thin; scrollbar-color: rgba(232,196,88,0.25) transparent; }

/* ── Cursor ring — états d'interaction ─────────────────────────────────────── */
.cursor-ring.hovered {
  width: 56px !important;
  height: 56px !important;
  border-color: rgba(232,196,88,0.75) !important;
  background: rgba(232,196,88,0.025) !important;
  transition:
    width 0.22s cubic-bezier(0.16,1,0.3,1),
    height 0.22s cubic-bezier(0.16,1,0.3,1),
    border-color 0.18s ease,
    background 0.18s ease !important;
}
.cursor-ring.clicking {
  width: 18px !important;
  height: 18px !important;
  border-color: rgba(232,196,88,0.95) !important;
  background: rgba(232,196,88,0.08) !important;
  transition: width 0.08s ease, height 0.08s ease !important;
}

/* ── Nav — état scrollé premium ────────────────────────────────────────────── */
nav.scrolled {
  background: rgba(6,6,9,0.96) !important;
  backdrop-filter: blur(36px) saturate(2.4) brightness(0.90) !important;
  -webkit-backdrop-filter: blur(36px) saturate(2.4) brightness(0.90) !important;
  border-bottom: 1px solid rgba(232,196,88,0.09) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.55) !important;
}

/* ── Loader wordmark — finitions ────────────────────────────────────────────── */
#loader-wordmark {
  font-size: clamp(42px, 9vw, 82px) !important;
  letter-spacing: 0.24em !important;
  filter: drop-shadow(0 0 50px rgba(232,196,88,0.22)) !important;
}
#loader-bar-wrap {
  margin-top: 24px !important;
  width: 180px !important;
}

/* ── Scroll indicator — goutte qui descend ──────────────────────────────────── */
.scroll-line {
  position: relative !important;
  overflow: hidden !important;
}
.scroll-line::before {
  content: '';
  position: absolute;
  top: -7px; left: 0; width: 100%; height: 7px;
  background: rgba(232,196,88,0.65);
  animation: dropDot 2.4s ease-in-out infinite 1.8s;
  border-radius: 1px;
}
@keyframes dropDot {
  0%   { top: -7px; opacity: 1; }
  85%  { opacity: 0.4; }
  100% { top: 55px; opacity: 0; }
}

/* ── Section backgrounds — syntaxe corrigée + glows enrichis ──────────────── */
.hero {
  background-color: var(--bg) !important;
  background-image:
    radial-gradient(ellipse 65% 70% at 30% 40%, rgba(232,196,88,0.09) 0%, transparent 55%),
    radial-gradient(ellipse 45% 55% at 92% 88%, rgba(217,119,87,0.045) 0%, transparent 52%) !important;
}
.identity {
  background-color: var(--bg2) !important;
  background-image:
    radial-gradient(ellipse 60% 55% at 4% 50%, rgba(232,196,88,0.055) 0%, transparent 58%),
    radial-gradient(ellipse 45% 65% at 96% 18%, rgba(217,119,87,0.032) 0%, transparent 52%) !important;
}
.projects {
  background-color: var(--bg) !important;
  background-image:
    radial-gradient(ellipse 80% 45% at 50% 105%, rgba(232,196,88,0.05) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 5% 5%, rgba(107,142,255,0.025) 0%, transparent 55%) !important;
}
.services {
  background-color: var(--bg2) !important;
  background-image:
    radial-gradient(ellipse 55% 65% at 96% 4%, rgba(232,196,88,0.06) 0%, transparent 55%),
    radial-gradient(ellipse 50% 60% at 2% 96%, rgba(107,142,255,0.04) 0%, transparent 55%),
    radial-gradient(ellipse 70% 40% at 50% 50%, rgba(232,196,88,0.02) 0%, transparent 70%) !important;
}
.skills {
  background-color: var(--bg2) !important;
  background-image:
    radial-gradient(ellipse 65% 55% at 82% 28%, rgba(107,142,255,0.055) 0%, transparent 58%),
    radial-gradient(ellipse 55% 55% at 18% 72%, rgba(232,196,88,0.04) 0%, transparent 55%),
    radial-gradient(ellipse 30% 30% at 50% 50%, rgba(107,142,255,0.015) 0%, transparent 60%) !important;
}
.philosophy {
  background-color: var(--bg2) !important;
  background-image:
    radial-gradient(ellipse 90% 75% at 50% 50%, rgba(232,196,88,0.075) 0%, transparent 58%),
    radial-gradient(ellipse 55% 40% at 50% 2%, rgba(232,196,88,0.04) 0%, transparent 50%),
    radial-gradient(ellipse 45% 35% at 85% 18%, rgba(217,119,87,0.035) 0%, transparent 52%) !important;
}
#videsac {
  background-color: var(--bg2) !important;
  background-image:
    radial-gradient(ellipse 60% 60% at 14% 50%, rgba(107,142,255,0.04) 0%, transparent 58%) !important;
}
#contact {
  background-color: var(--bg) !important;
  background-image:
    radial-gradient(ellipse 55% 65% at 92% 50%, rgba(232,196,88,0.055) 0%, transparent 55%),
    radial-gradient(ellipse 40% 50% at 8% 20%, rgba(107,142,255,0.025) 0%, transparent 52%) !important;
}
#noema {
  background-color: var(--bg) !important;
  background-image:
    radial-gradient(ellipse 70% 65% at 50% 50%, rgba(232,196,88,0.045) 0%, transparent 62%) !important;
}

/* ── Hero orz ghost — présence plus forte ───────────────────────────────────── */
.hero-orz {
  color: rgba(232,196,88,0.038) !important;
  text-shadow: 0 0 160px rgba(232,196,88,0.08) !important;
}

/* ── Reveal animation — courbe premium ─────────────────────────────────────── */
.reveal {
  opacity: 0 !important;
  transform: translateY(30px) !important;
  transition:
    opacity 0.8s cubic-bezier(0.16,1,0.3,1),
    transform 0.8s cubic-bezier(0.16,1,0.3,1) !important;
}
.reveal.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ── Service cards — micro-glow sur prix au hover ───────────────────────────── */
.service-card:hover .service-price {
  text-shadow: 0 0 24px rgba(232,196,88,0.5) !important;
  transition: text-shadow 0.4s ease !important;
}
.service-card {
  cursor: pointer !important;
  transition: all 0.45s cubic-bezier(0.16,1,0.3,1) !important;
}

/* ── Project cards — plus profond ───────────────────────────────────────────── */
.project-card:hover {
  box-shadow:
    0 40px 90px rgba(0,0,0,0.75),
    0 0 0 1px rgba(232,196,88,0.07),
    inset 0 0 60px rgba(232,196,88,0.01) !important;
}

/* ── Section tag — pulse sur hover ──────────────────────────────────────────── */
.section-tag {
  cursor: default !important;
  transition: color 0.3s ease !important;
}

/* ── Skill bars — transition plus douce ────────────────────────────────────── */
.skill-fill {
  transition: width 1.2s cubic-bezier(0.16,1,0.3,1) !important;
}

/* ── Contact link hover — glow premium ──────────────────────────────────────── */
.contact-link:hover {
  transform: translateY(-3px) !important;
  transition: all 0.4s cubic-bezier(0.16,1,0.3,1) !important;
}

/* ── Footer — signature resserrée ───────────────────────────────────────────── */
.footer-text {
  font-size: 9px !important;
  letter-spacing: 0.18em !important;
  color: #2e2e3e !important;
}

/* ── prefers-reduced-motion — conformité ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #loader-wordmark { animation: none !important; clip-path: inset(0 -1% 0 0) !important; }
  #loader-divider  { animation: none !important; width: 160px !important; }
  #loader-tagline  { animation: none !important; opacity: 1 !important; transform: none !important; }
  .scroll-line::before { animation: none !important; }
  .cursor-ring { transition: none !important; }
}

/* ── Mobile — loader responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  #loader-wordmark { font-size: 11vw !important; letter-spacing: 0.12em !important; }
  #loader-bar-wrap { width: 140px !important; }
  .scroll-indicator { display: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM TIER IV — Vivacité, Couleur, Logo, Compétences Redesign
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero wordmark — finition premium ───────────────────────────────────────── */
.hwm-noema {
  filter: drop-shadow(0 0 40px rgba(232,196,88,0.22)) !important;
  background-size: 200% 200% !important;
  animation:
    fadeUp 0.8s cubic-bezier(0.16,1,0.3,1) 0.9s forwards,
    shimmerText 4s linear 2s infinite !important;
}
@keyframes shimmerText {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.hwm-works {
  -webkit-text-stroke: 1px rgba(232,196,88,0.28) !important;
  transition: -webkit-text-stroke-color 0.4s ease !important;
}
.hero-wordmark:hover .hwm-works {
  -webkit-text-stroke-color: rgba(232,196,88,0.7) !important;
}
.hwm-sep {
  box-shadow: 0 0 8px rgba(232,196,88,0.2) !important;
}

/* ── Hero — section plus vivante ────────────────────────────────────────────── */
.hero {
  background-color: var(--bg) !important;
  background-image:
    radial-gradient(ellipse 75% 70% at 25% 42%, rgba(232,196,88,0.11) 0%, transparent 52%),
    radial-gradient(ellipse 50% 60% at 80% 30%, rgba(232,196,88,0.055) 0%, transparent 50%),
    radial-gradient(ellipse 40% 50% at 90% 85%, rgba(217,119,87,0.05) 0%, transparent 52%) !important;
}

/* ── Services — plus de couleur ─────────────────────────────────────────────── */
.services {
  background-color: var(--bg2) !important;
  background-image:
    radial-gradient(ellipse 60% 70% at 96% 4%, rgba(232,196,88,0.08) 0%, transparent 52%),
    radial-gradient(ellipse 55% 65% at 2% 96%, rgba(107,142,255,0.06) 0%, transparent 52%),
    radial-gradient(ellipse 80% 50% at 50% 50%, rgba(232,196,88,0.025) 0%, transparent 70%) !important;
}
.service-card {
  background: #0d0d16 !important;
  border-color: #181826 !important;
}
.service-card:hover {
  background: #10101a !important;
  border-color: rgba(232,196,88,0.16) !important;
  box-shadow:
    0 24px 60px rgba(0,0,0,0.6),
    0 0 0 1px rgba(232,196,88,0.08),
    inset 0 0 40px rgba(232,196,88,0.015) !important;
}

/* ── Featured skills — plus dramatiques ──────────────────────────────────────── */
.skill-feat {
  background: linear-gradient(135deg, #0d0d18 0%, #101020 100%) !important;
  border-color: #1a1a28 !important;
}
.skill-feat:nth-child(1) { border-top: 2px solid rgba(232,196,88,0.35) !important; }
.skill-feat:nth-child(2) { border-top: 2px solid rgba(107,142,255,0.3) !important; }
.skill-feat:nth-child(3) { border-top: 2px solid rgba(217,119,87,0.3) !important; }
.skill-feat:nth-child(1) .sf-icon { color: rgba(232,196,88,0.6) !important; }
.skill-feat:nth-child(2) .sf-icon { color: rgba(107,142,255,0.6) !important; }
.skill-feat:nth-child(3) .sf-icon { color: rgba(217,119,87,0.55) !important; }
.skill-feat:nth-child(1) .sf-level { color: rgba(232,196,88,0.8) !important; border-color: rgba(232,196,88,0.2) !important; }
.skill-feat:nth-child(2) .sf-level { color: rgba(107,142,255,0.75) !important; border-color: rgba(107,142,255,0.18) !important; }
.skill-feat:nth-child(3) .sf-level { color: rgba(217,119,87,0.7) !important; border-color: rgba(217,119,87,0.18) !important; }
.skill-feat:nth-child(1)::before { background: linear-gradient(90deg, rgba(232,196,88,0.6), transparent) !important; }
.skill-feat:nth-child(2)::before { background: linear-gradient(90deg, rgba(107,142,255,0.5), transparent) !important; }
.skill-feat:nth-child(3)::before { background: linear-gradient(90deg, rgba(217,119,87,0.5), transparent) !important; }

/* ── Skill columns — glassmorphism léger ────────────────────────────────────── */
.skill-col {
  background: rgba(13,13,22,0.7) !important;
  border: 1px solid #181826 !important;
  border-radius: 0 !important;
  padding: 28px 24px !important;
  transition: border-color 0.35s ease, background 0.35s ease !important;
  position: relative !important;
  overflow: hidden !important;
}
.skill-col::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232,196,88,0.15), transparent);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.skill-col:hover { border-color: rgba(232,196,88,0.14) !important; background: rgba(14,14,24,0.9) !important; }
.skill-col:hover::before { opacity: 1; }
.skill-category {
  font-family: 'DM Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.22em !important;
  color: rgba(232,196,88,0.55) !important;
  margin-bottom: 20px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid #1a1a28 !important;
}
.skill-list li {
  border-bottom: 1px solid rgba(255,255,255,0.03) !important;
  padding: 6px 0 !important;
  line-height: 1.55 !important;
}
.skill-list li:last-child { border-bottom: none !important; }

/* ── Skill bars — or gradient + animation ───────────────────────────────────── */
.skill-bar-track {
  background: rgba(232,196,88,0.06) !important;
  height: 2px !important;
  border-radius: 1px !important;
}
.skill-bar-fill {
  background: linear-gradient(90deg, #c9a030, #e8c458, #f5dfa0) !important;
  height: 100% !important;
  border-radius: 1px !important;
  box-shadow: 0 0 8px rgba(232,196,88,0.35) !important;
  width: 0%;
}
.skill-bar-label {
  margin-bottom: 6px !important;
}
.skill-bar-label span:first-child {
  color: #9090b0 !important;
  font-size: 11px !important;
}
.skill-bar-label span:last-child {
  color: rgba(232,196,88,0.55) !important;
  font-size: 10px !important;
  font-family: 'DM Mono', monospace !important;
  letter-spacing: 0.12em !important;
}
.skill-bar-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

/* ── Tool chips — plus de couleur ───────────────────────────────────────────── */
.tool-chip.highlight {
  background: rgba(232,196,88,0.06) !important;
  border-color: rgba(232,196,88,0.25) !important;
  color: rgba(232,196,88,0.8) !important;
}
.tool-chip {
  transition: all 0.25s cubic-bezier(0.16,1,0.3,1) !important;
}
.tool-chip:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3) !important;
}

/* ── Compétences section — ambiance bleue/dorée renforcée ───────────────────── */
.skills {
  background-color: var(--bg2) !important;
  background-image:
    radial-gradient(ellipse 70% 55% at 85% 25%, rgba(107,142,255,0.07) 0%, transparent 55%),
    radial-gradient(ellipse 60% 60% at 15% 75%, rgba(232,196,88,0.055) 0%, transparent 55%),
    radial-gradient(ellipse 35% 35% at 50% 50%, rgba(232,196,88,0.015) 0%, transparent 65%) !important;
}

/* ── Philosophie — plus vivante ──────────────────────────────────────────────── */
.philosophy {
  background-color: var(--bg2) !important;
  background-image:
    radial-gradient(ellipse 95% 80% at 50% 50%, rgba(232,196,88,0.095) 0%, transparent 55%),
    radial-gradient(ellipse 60% 45% at 50% 3%, rgba(232,196,88,0.055) 0%, transparent 48%),
    radial-gradient(ellipse 50% 35% at 90% 15%, rgba(217,119,87,0.05) 0%, transparent 50%) !important;
}

/* ── Contact — or warm glow ──────────────────────────────────────────────────── */
#contact {
  background-color: var(--bg) !important;
  background-image:
    radial-gradient(ellipse 60% 70% at 95% 50%, rgba(232,196,88,0.07) 0%, transparent 52%),
    radial-gradient(ellipse 45% 55% at 6% 22%, rgba(107,142,255,0.04) 0%, transparent 52%) !important;
}

/* ── Projet cards — couleur accent-tab plus lumineuse ───────────────────────── */
.project-card::before {
  height: 2px !important;
  opacity: 0.85 !important;
}

/* ── Hero stat labels — plus visibles ───────────────────────────────────────── */
.hero-stat-label {
  color: rgba(232,196,88,0.38) !important;
  font-size: 8px !important;
}
.hero-stats {
  border-top: 1px solid rgba(232,196,88,0.08) !important;
  padding-top: 24px !important;
  margin-top: 28px !important;
}
.hero-stats > div {
  padding-right: 28px !important;
  border-right: 1px solid rgba(232,196,88,0.07) !important;
}
.hero-stats > div:last-child { border-right: none !important; padding-right: 0 !important; }

/* ── Section separators — plus lumineux ──────────────────────────────────────── */
section + section::before,
section + #contact::before {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(232,196,76,0.06) 15%,
    rgba(232,196,76,0.4) 50%,
    rgba(232,196,76,0.06) 85%,
    transparent 100%) !important;
  box-shadow: 0 0 24px rgba(232,196,76,0.15) !important;
}

/* ── Service cards — clickable ───────────────────────────────────────────────── */
.service-card {
  cursor: pointer !important;
}

/* ── Hero wordmark — centrage ────────────────────────────────────────────────── */
.hwm-sep {
  background: linear-gradient(to right, transparent, rgba(232,196,88,0.28), transparent) !important;
  transform-origin: center !important;
}
.philo-line { display: none !important; }

/* ── prefers-reduced-motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hwm-noema, .hwm-works, .hwm-sub, .hwm-sep { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ── Mobile Tier IV ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero-stats { flex-wrap: wrap !important; gap: 20px !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM TIER V — Vision redesign · Couleurs max · Sub-pages upgrade
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Philosophy — layout deux colonnes premium ──────────────────────────────── */
.philosophy {
  padding: 120px 48px !important;
}
.philo-wrap {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 80px;
  align-items: start;
  position: relative;
  z-index: 1;
}
.philo-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding-top: 8px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1);
}
.philo-left.visible {
  opacity: 1;
  transform: translateY(0);
}
.philo-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(80px, 12vw, 160px);
  line-height: 0.85;
  background: linear-gradient(135deg, rgba(232,196,88,0.55) 0%, rgba(232,196,88,0.12) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.04em;
}
.philo-tag {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(232,196,88,0.45);
}
.philo-line {
  width: 1px;
  height: 80px;
  background: linear-gradient(to bottom, rgba(232,196,88,0.35), transparent);
}
.philo-sub-label {
  font-family: 'DM Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.12);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.philo-right {
  text-align: left;
}
.philo-right .philosophy-quote {
  text-align: left !important;
}
.philo-right .quote-mark {
  display: block;
  text-align: left;
}
.philo-cta-row {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.philo-cta {
  font-size: 12px !important;
  padding: 10px 22px !important;
}
@media (max-width: 860px) {
  .philo-wrap {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .philo-left { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .philo-num { font-size: clamp(48px, 14vw, 80px); }
  .philo-line { display: none; }
  .philo-sub-label { writing-mode: horizontal-tb; transform: none; }
}

/* ── Couleurs Tier V — accents plus vifs ────────────────────────────────────── */
:root {
  --accent: #f0cb5a !important;
  --accent2: #e08060 !important;
  --blue: #7fa0ff !important;
}
body {
  background-image:
    radial-gradient(ellipse 90% 55% at 16% 16%, rgba(240,203,90,0.075) 0%, transparent 58%),
    radial-gradient(ellipse 65% 55% at 88% 82%, rgba(224,128,96,0.055) 0%, transparent 55%),
    radial-gradient(ellipse 130% 45% at 50% 112%, rgba(240,203,90,0.035) 0%, transparent 60%) !important;
}
.hero {
  background-image:
    radial-gradient(ellipse 80% 75% at 24% 44%, rgba(240,203,90,0.14) 0%, transparent 52%),
    radial-gradient(ellipse 55% 65% at 82% 28%, rgba(240,203,90,0.07) 0%, transparent 50%),
    radial-gradient(ellipse 45% 55% at 92% 88%, rgba(224,128,96,0.065) 0%, transparent 52%) !important;
}
.philosophy {
  background-image:
    radial-gradient(ellipse 100% 85% at 50% 50%, rgba(240,203,90,0.11) 0%, transparent 55%),
    radial-gradient(ellipse 65% 50% at 50% 2%, rgba(240,203,90,0.065) 0%, transparent 48%),
    radial-gradient(ellipse 55% 40% at 92% 18%, rgba(224,128,96,0.06) 0%, transparent 50%) !important;
}
.services {
  background-image:
    radial-gradient(ellipse 65% 75% at 98% 3%, rgba(240,203,90,0.1) 0%, transparent 52%),
    radial-gradient(ellipse 60% 70% at 1% 98%, rgba(127,160,255,0.07) 0%, transparent 52%),
    radial-gradient(ellipse 85% 55% at 50% 50%, rgba(240,203,90,0.03) 0%, transparent 70%) !important;
}
.skills {
  background-image:
    radial-gradient(ellipse 70% 60% at 5% 30%, rgba(127,160,255,0.06) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 95% 70%, rgba(240,203,90,0.055) 0%, transparent 52%) !important;
}
.project-card::before {
  opacity: 1 !important;
}
section + section::before,
section + #contact::before {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(240,203,90,0.07) 12%,
    rgba(240,203,90,0.55) 50%,
    rgba(240,203,90,0.07) 88%,
    transparent 100%) !important;
  box-shadow: 0 0 12px rgba(240,203,90,0.12) !important;
  height: 1px !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM TIER VI — Skills redesign · Philosophy fix · Couleurs +or
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Philosophy — Orz cadré + barre supprimée ───────────────────────────────── */
.philosophy::before {
  left: 50% !important;
  top: 50% !important;
  font-size: clamp(90px, 14vw, 180px) !important;
  -webkit-text-stroke: 1px rgba(240,203,90,0.04) !important;
  opacity: 0.6 !important;
  letter-spacing: 0.08em !important;
}

/* ── Skills — redesign premium card ─────────────────────────────────────────── */
.skill-col {
  background: linear-gradient(160deg, rgba(240,203,90,0.04) 0%, rgba(22,22,32,0.98) 50%, rgba(10,10,14,0.95) 100%) !important;
  border: 1px solid rgba(240,203,90,0.1) !important;
  padding: 36px 28px 32px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), border-color 0.4s, box-shadow 0.4s !important;
}
.skill-col::before {
  content: '' !important;
  position: absolute !important;
  top: 0; left: 0; right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, rgba(240,203,90,0.65), transparent) !important;
  opacity: 0.7 !important;
}
.skill-col:nth-child(2)::before { background: linear-gradient(90deg, transparent, rgba(127,160,255,0.7), transparent) !important; }
.skill-col:nth-child(3)::before { background: linear-gradient(90deg, transparent, rgba(224,128,96,0.65), transparent) !important; }
.skill-col:nth-child(4)::before { background: linear-gradient(90deg, transparent, rgba(160,220,140,0.55), transparent) !important; }
.skill-col::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0; right: 0 !important;
  width: 80px; height: 80px !important;
  background: radial-gradient(circle at bottom right, rgba(240,203,90,0.05), transparent 70%) !important;
  pointer-events: none !important;
}
.skill-col:hover {
  border-color: rgba(240,203,90,0.28) !important;
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5), 0 0 0 1px rgba(240,203,90,0.12), 0 0 40px rgba(240,203,90,0.04) !important;
}
.skill-col:nth-child(2):hover { border-color: rgba(127,160,255,0.28) !important; box-shadow: 0 16px 48px rgba(0,0,0,0.5), 0 0 0 1px rgba(127,160,255,0.12) !important; }
.skill-col:nth-child(3):hover { border-color: rgba(224,128,96,0.28) !important; box-shadow: 0 16px 48px rgba(0,0,0,0.5), 0 0 0 1px rgba(224,128,96,0.12) !important; }

/* ── Skills — category header ───────────────────────────────────────────────── */
.skill-category {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 12px !important;
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 18px !important;
  letter-spacing: 0.1em !important;
  color: var(--text) !important;
  margin-bottom: 24px !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid rgba(240,203,90,0.1) !important;
}
.skill-category svg {
  width: 22px !important;
  height: 22px !important;
  stroke: var(--accent) !important;
  filter: drop-shadow(0 0 6px rgba(240,203,90,0.35)) !important;
}
.skill-col:nth-child(2) .skill-category svg { stroke: var(--blue) !important; filter: drop-shadow(0 0 6px rgba(127,160,255,0.35)) !important; }
.skill-col:nth-child(3) .skill-category svg { stroke: var(--accent2) !important; filter: drop-shadow(0 0 6px rgba(224,128,96,0.35)) !important; }
.skill-col:nth-child(4) .skill-category svg { stroke: rgba(160,220,140,0.9) !important; filter: drop-shadow(0 0 6px rgba(160,220,140,0.25)) !important; }

/* ── Skills — list items ─────────────────────────────────────────────────────── */
.skill-list {
  gap: 9px !important;
}
.skill-list li {
  font-size: 11.5px !important;
  color: rgba(240,239,232,0.6) !important;
  padding-left: 18px !important;
  letter-spacing: 0.01em !important;
  line-height: 1.55 !important;
}
.skill-list li::before {
  width: 5px !important;
  height: 5px !important;
  background: rgba(240,203,90,0.3) !important;
  border-radius: 50% !important;
  top: 5px !important;
  opacity: 1 !important;
}
.skill-col:nth-child(2) .skill-list li::before { background: rgba(127,160,255,0.35) !important; }
.skill-col:nth-child(3) .skill-list li::before { background: rgba(224,128,96,0.35) !important; }
.skill-col:nth-child(4) .skill-list li::before { background: rgba(160,220,140,0.35) !important; }
.skill-list li strong { color: var(--accent) !important; font-weight: 600 !important; }
.skill-col:nth-child(2) .skill-list li strong { color: var(--blue) !important; }
.skill-col:nth-child(3) .skill-list li strong { color: var(--accent2) !important; }

/* ── Skills-grid — gap et layout ────────────────────────────────────────────── */
.skills-grid {
  gap: 12px !important;
}

/* ── Color boost Tier VI ─────────────────────────────────────────────────────── */
:root {
  --accent: #f2d060 !important;
}
.hero-stat-num {
  color: var(--accent) !important;
  text-shadow: 0 0 20px rgba(242,208,96,0.4) !important;
}
.project-card:hover {
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(242,208,96,0.12), 0 0 40px rgba(242,208,96,0.05) !important;
}
.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 span { color: var(--accent) !important; text-shadow: 0 0 12px rgba(242,208,96,0.4) !important; }
.section-tag { color: var(--accent) !important; }
.accent, .highlight { color: var(--accent) !important; }
#contact { background-image:
  radial-gradient(ellipse 65% 75% at 96% 50%, rgba(242,208,96,0.09) 0%, transparent 52%),
  radial-gradient(ellipse 50% 60% at 5% 22%, rgba(127,160,255,0.05) 0%, transparent 52%) !important; }

/* ── prefers-reduced-motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .skill-col { transition: none !important; }
}
/* ── Mobile Tier VI ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .skills-grid { grid-template-columns: 1fr !important; gap: 8px !important; }
  .philosophy::before { display: none !important; }
}

/* ── Skill bars — contraste renforcé Tier VII ────────────────────────────────── */
.skill-bar-track {
  background: rgba(242,208,96,0.12) !important;
  height: 3px !important;
  border-radius: 2px !important;
}
.skill-bar-fill {
  background: linear-gradient(90deg, #a07018 0%, #f2d060 55%, #faeaa0 100%) !important;
  height: 100% !important;
  border-radius: 2px !important;
  box-shadow: 0 0 14px rgba(242,208,96,0.65), 0 0 4px rgba(242,208,96,0.4) !important;
  width: 0%;
  transition: width 1.8s cubic-bezier(.2,.7,.2,1) !important;
  position: relative;
}
/* Shimmer sur le fill une fois animé */
.skill-bar-fill::after {
  content: '' !important;
  position: absolute !important;
  top: 0; right: 0 !important;
  width: 40px; height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent) !important;
  animation: barShimmer 2.4s ease-in-out 2s infinite !important;
  border-radius: 2px !important;
}
@keyframes barShimmer {
  0%   { opacity: 0; transform: translateX(-60px); }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(0px); }
}
.skill-bar-label {
  margin-bottom: 8px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
}
.skill-bar-label span:first-child {
  color: rgba(240,239,232,0.82) !important;
  font-size: 12px !important;
  letter-spacing: 0.03em !important;
  font-family: inherit !important;
}
.skill-bar-label span:last-child {
  color: rgba(242,208,96,0.9) !important;
  font-size: 10px !important;
  font-family: 'DM Mono', monospace !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}
.skill-bar-row {
  gap: 18px !important;
}
@media (prefers-reduced-motion: reduce) {
  .skill-bar-fill::after { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM TIER VIII — Philosophy polish · Couleurs + sur tout le site
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Quote mark — fix line-height qui clippait le caractère ─────────────── */
.philo-right .quote-mark {
  font-size: 68px !important;
  line-height: 1 !important;
  background: linear-gradient(180deg, rgba(242,208,96,0.9) 0%, rgba(242,208,96,0.3) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  margin-bottom: 24px !important;
  display: block !important;
  font-family: 'Fraunces', Georgia, serif !important;
  letter-spacing: -0.02em !important;
}

/* ── Philosophy author — signature élégante ──────────────────────────────── */
.philosophy-author {
  color: rgba(242,208,96,0.58) !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
}

/* ── Hero — stats plus lumineux ──────────────────────────────────────────── */
.hero-stat-num {
  text-shadow: 0 0 32px rgba(242,208,96,0.6), 0 0 8px rgba(242,208,96,0.35) !important;
}
.hero-stat-label {
  color: rgba(242,208,96,0.42) !important;
}

/* ── Services — accent border-top coloré ─────────────────────────────────── */
.service-card {
  border-top: 1px solid rgba(242,208,96,0.18) !important;
  transition: border-color 0.4s cubic-bezier(.16,1,.3,1), box-shadow 0.4s cubic-bezier(.16,1,.3,1), transform 0.4s cubic-bezier(.16,1,.3,1) !important;
}
.service-card:hover {
  border-top-color: rgba(242,208,96,0.55) !important;
}
.service-icon {
  color: var(--accent) !important;
  filter: drop-shadow(0 0 10px rgba(242,208,96,0.45)) !important;
}

/* ── Skills — section tag glow ───────────────────────────────────────────── */
.skills .section-tag {
  text-shadow: 0 0 18px rgba(242,208,96,0.3) !important;
}

/* ── Contact links — hover plus doré ─────────────────────────────────────── */
.contact-link {
  border-left: 2px solid rgba(242,208,96,0.08) !important;
  transition: border-color 0.35s, background 0.35s, box-shadow 0.35s !important;
}
.contact-link:hover {
  border-left-color: rgba(242,208,96,0.4) !important;
  background: rgba(242,208,96,0.04) !important;
}
.contact-link-arrow {
  color: rgba(242,208,96,0.35) !important;
  transition: color 0.3s, transform 0.3s !important;
}
.contact-link:hover .contact-link-arrow {
  color: var(--accent) !important;
  transform: translateX(4px) !important;
}

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

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

/* ── Vide ton sac — section tag ─────────────────────────────────────────── */
#videsac .section-tag {
  text-shadow: 0 0 14px rgba(242,208,96,0.28) !important;
}

/* ── Projet cards — border accent ────────────────────────────────────────── */
.project-card {
  border-top: 1px solid rgba(242,208,96,0.1) !important;
}
.project-card:hover {
  border-top-color: rgba(242,208,96,0.35) !important;
}

/* ── Commercial & Langues — 4e colonne plus colorée ─────────────────────── */
.skill-col:nth-child(4) {
  background: linear-gradient(160deg, rgba(160,220,140,0.06) 0%, rgba(22,22,32,0.98) 50%, rgba(10,10,14,0.95) 100%) !important;
  border-color: rgba(160,220,140,0.18) !important;
}
.skill-col:nth-child(4)::before {
  background: linear-gradient(90deg, transparent, rgba(160,220,140,0.8), transparent) !important;
  opacity: 0.9 !important;
}
.skill-col:nth-child(4)::after {
  background: radial-gradient(circle at bottom right, rgba(160,220,140,0.08), transparent 70%) !important;
}
.skill-col:nth-child(4):hover {
  border-color: rgba(160,220,140,0.38) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5), 0 0 0 1px rgba(160,220,140,0.18), 0 0 40px rgba(160,220,140,0.07) !important;
}
.skill-col:nth-child(4) .skill-category {
  color: rgba(160,220,140,0.9) !important;
  border-bottom-color: rgba(160,220,140,0.18) !important;
}
.skill-col:nth-child(4) .skill-list li::before {
  background: rgba(160,220,140,0.55) !important;
}
.skill-col:nth-child(4) .skill-list li strong {
  color: rgba(160,220,140,1) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM FINAL — Animation · Motion · Polish
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── NOEMA WORKS : centrage robuste (margin auto, immunisé FOUT) ─────────── */
/* Remplace left:50%+translateX(-50%) qui dépend de la largeur de la font    */
.hero-wordmark {
  left: 0 !important;
  right: 0 !important;
  width: fit-content !important;
  margin-left: auto !important;
  margin-right: auto !important;
  animation: hwmFloat 9s ease-in-out infinite both !important;
  opacity: 0.92 !important;
  will-change: transform !important;
}
/* X géré par margin:auto — Y seulement dans l'animation */
@keyframes hwmFloat {
  0%,  100% { transform: translateY(-50%);              }
  25%        { transform: translateY(calc(-50% - 8px)); }
  50%        { transform: translateY(calc(-50% - 14px));}
  75%        { transform: translateY(calc(-50% - 7px)); }
}

/* ── Nav : transition fluide sur scroll ──────────────────────────────────── */
nav {
  transition:
    background    0.45s cubic-bezier(.4,0,.2,1),
    border-color  0.45s cubic-bezier(.4,0,.2,1),
    box-shadow    0.45s cubic-bezier(.4,0,.2,1),
    backdrop-filter 0.45s !important;
}

/* ── Marquee : pause au survol ───────────────────────────────────────────── */
.marquee-strip:hover .marquee-track {
  animation-play-state: paused !important;
  cursor: default;
}
.marquee-item {
  transition: color 0.25s ease !important;
}

/* ── Orz O·r·z : lueur dorée au survol ──────────────────────────────────── */
.orz-letter {
  cursor: default;
  border-radius: 2px;
  transition: background 0.4s ease !important;
}
.orz-letter:hover {
  background: rgba(242,208,96,0.025) !important;
}
.orz-char {
  transition: text-shadow 0.5s ease !important;
}
.orz-letter:hover .orz-char {
  text-shadow:
    0 0 20px rgba(242,208,96,0.65),
    0 0 60px rgba(242,208,96,0.18) !important;
}

/* ── Section tag : ligne extensible au hover ─────────────────────────────── */
.section-tag::after {
  transition: max-width 0.55s cubic-bezier(0.16,1,0.3,1), opacity 0.3s !important;
}
.section-tag:hover::after {
  max-width: 96px !important;
}

/* ── Hero stat nums : glow au hover ─────────────────────────────────────── */
.hero-stats > div {
  cursor: default;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1) !important;
}
.hero-stats > div:hover {
  transform: translateY(-3px) !important;
}
.hero-stats > div:hover .hero-stat-num {
  text-shadow:
    0 0 40px rgba(242,208,96,0.85),
    0 0 12px rgba(242,208,96,0.5) !important;
}

/* ── Noema section : encadré étymologie — hover glow ─────────────────────── */
#noema [style*="border-left"] {
  transition: border-left-color 0.35s ease, box-shadow 0.35s ease !important;
}
#noema [style*="border-left"]:hover {
  border-left-color: rgba(242,208,96,0.55) !important;
  box-shadow: -4px 0 24px rgba(242,208,96,0.08) !important;
}

/* ── Scroll progress : épaisseur + glow accru ───────────────────────────── */
#scroll-progress {
  height: 2px !important;
  box-shadow: 0 0 14px rgba(242,208,96,0.55), 0 0 4px rgba(242,208,96,0.4) !important;
}

/* ── Hero : clip l'Orz dépassant du cadre ────────────────────────────────── */
.hero {
  overflow: hidden !important;
}

/* ── Hero content : légère compensation pour la barre tabs fixe ─────────── */
.hero-content {
  padding-top: 52px !important;
}

/* ── Tab soon : item non encore live (ex : Life Book) ──────────────────── */
.tab-soon {
  opacity: 0.38 !important;
  cursor: default !important;
}
.tab-soon .tab-dot {
  background: var(--dim) !important;
  animation: none !important;
}

/* Float uniquement vertical pour l'Orz — évite le débordement à gauche */
@keyframes float {
  0%, 100% { transform: translateY(-50%); }
  50%       { transform: translateY(-52%); }
}

/* ── Contact : bloc email bas de panneau ─────────────────────────────────── */
.status-email-block {
  margin-top: 18px !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(242,208,96,0.12) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.status-email-label {
  font-family: 'DM Mono', monospace !important;
  font-size: 9px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(232,200,74,0.5) !important;
}
.status-email-link {
  font-family: 'DM Mono', monospace !important;
  font-size: 11.5px !important;
  letter-spacing: 0.04em !important;
  color: rgba(232,200,74,0.82) !important;
  text-decoration: none !important;
  transition: color 0.25s ease, text-shadow 0.25s ease !important;
  word-break: break-all !important;
}
.status-email-link:hover {
  color: rgba(242,208,96,1) !important;
  text-shadow: 0 0 18px rgba(242,208,96,0.35) !important;
}

/* ── Prefers-reduced-motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero-wordmark  { animation: none !important; transform: translateY(-50%) !important; }
  .marquee-track  { animation: marqueeScroll 38s linear infinite !important; }
  .orz-char       { transition: none !important; }
}


/* ══════════════════════════════════════════════════════════════════════════
   TIER VI — Finitions terminales · Left-bar · Focus · Micro-UX
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Service cards — barre latérale dorée animée + titre hover ── */
.service-card::before {
  content: '' !important;
  position: absolute !important;
  left: 0; top: 0; bottom: 0 !important;
  width: 2px !important;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--srv-color, var(--accent)) 50%,
    transparent 100%
  ) !important;
  transform: scaleY(0) !important;
  transform-origin: center !important;
  transition: transform 0.55s cubic-bezier(0.16,1,0.3,1) !important;
  z-index: 3 !important;
}
.service-card:hover::before {
  transform: scaleY(1) !important;
}
.service-title {
  transition: color 0.35s cubic-bezier(0.4,0,0.2,1) !important;
}
.service-card:hover .service-title {
  color: var(--srv-color, var(--accent)) !important;
}
.service-footer {
  border-top-color: rgba(255,255,255,0.025) !important;
  transition: border-color 0.4s ease !important;
}
.service-card:hover .service-footer {
  border-color: rgba(232,196,88,0.14) !important;
}

/* ── Focus states — WCAG + cohérence dorée ── */
:focus-visible {
  outline: 2px solid rgba(232,196,88,0.65) !important;
  outline-offset: 3px !important;
}
:focus:not(:focus-visible) {
  outline: none !important;
}

/* ── Project cards — cursor pointer (natif sur <a>, mais override CSS) ── */
.project-card { cursor: pointer !important; }

/* ── Contact — transition harmonieuse · adoucissement du halo doré ────────
   L'inline style concentrait 0.13 d'opacité sur 85 % de la largeur →
   transition trop abrupte depuis les sections noires au-dessus.
   On ramène le halo vers le bas de la section et on l'étale davantage.
   ─────────────────────────────────────────────────────────────────────── */
#contact .contact {
  background-image:
    /* halo principal : poussé en bas (80 %), plus petit, moitié moins intense */
    radial-gradient(ellipse 70% 55% at 18% 82%, rgba(232,196,88,0.055) 0%, transparent 58%),
    /* accent droit subtil pour équilibrer */
    radial-gradient(ellipse 45% 40% at 88% 72%, rgba(232,196,88,0.028) 0%, transparent 55%),
    /* trace haute ultra-légère — assure une continuité non nulle en haut */
    radial-gradient(ellipse 55% 30% at 10% 8%,  rgba(232,196,88,0.012) 0%, transparent 60%) !important;
}