/* ============================================
   PORTFOLIO ELOI PERRIN — Styles partagés
   ============================================
   Pour modifier une couleur : cherche la variable
   dans :root {} et change la valeur.
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Raleway:wght@300;400;500;600&display=swap');

/* ---- VARIABLES (palette, typographie) ---- */
:root {
  --gold:        #C9A84C;   /* or principal */
  --gold-light:  #E8C97A;   /* or clair (hover) */
  --gold-dim:    rgba(201, 168, 76, 0.15);
  --gold-border: rgba(201, 168, 76, 0.25);

  --dark:        #060810;   /* fond principal */
  --dark-2:      #0d1020;   /* fond secondaire */
  --dark-card:   rgba(13, 16, 32, 0.85);

  --text:        #ffffff;
  --text-muted:  rgba(255, 255, 255, 0.4);
  --text-dim:    rgba(255, 255, 255, 0.2);

  --font-title:  'Cinzel', serif;
  --font-body:   'Raleway', sans-serif;

  --radius:      4px;
  --transition:  cubic-bezier(0.32, 0.72, 0, 1);
}

/* ---- RESET ---- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  background: var(--dark);
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100dvh;
  overflow-x: hidden;
  opacity: 0;
  transition: opacity 0.45s ease;
}
body.page-ready { opacity: 1; }

/* ---- FOND AMBIANCE ---- */
.bg-ambient {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%,   rgba(201, 168, 76, 0.06) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 80% 80%,   rgba(201, 168, 76, 0.03) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 20% 60%,   rgba(30, 40, 80, 0.4)   0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ---- COUCHE DE FUMÉE ---- */
.smoke-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

/* Smoke blobs — gradients radiaux (pas de filter:blur = 0 coût GPU) */
.smoke-blob {
  position: absolute;
  will-change: transform;
}

.smoke-blob:nth-child(1) {
  width: 700px; height: 500px;
  background: radial-gradient(ellipse at center, rgba(18,28,70,0.28) 0%, transparent 70%);
  top: -10%; left: -5%;
  animation: smoke-a 22s ease-in-out infinite;
}
.smoke-blob:nth-child(2) {
  width: 400px; height: 750px;
  background: radial-gradient(ellipse at center, rgba(10,20,60,0.2) 0%, transparent 70%);
  top: 25%; right: -8%;
  animation: smoke-b 28s ease-in-out infinite;
  animation-delay: -8s;
}
.smoke-blob:nth-child(3) {
  width: 900px; height: 350px;
  background: radial-gradient(ellipse at center, rgba(25,20,55,0.16) 0%, transparent 70%);
  bottom: -5%; left: 10%;
  animation: smoke-c 25s ease-in-out infinite;
  animation-delay: -14s;
}
.smoke-blob:nth-child(4) {
  width: 550px; height: 600px;
  background: radial-gradient(ellipse at center, rgba(15,25,80,0.14) 0%, transparent 70%);
  top: 10%; left: 35%;
  animation: smoke-d 32s ease-in-out infinite;
  animation-delay: -5s;
}
.smoke-blob:nth-child(5) {
  width: 700px; height: 300px;
  background: radial-gradient(ellipse at center, rgba(8,15,50,0.16) 0%, transparent 70%);
  bottom: 15%; right: 5%;
  animation: smoke-b 20s ease-in-out infinite;
  animation-delay: -18s;
}
.smoke-blob:nth-child(6) {
  width: 500px; height: 400px;
  background: radial-gradient(ellipse at center, rgba(20,15,65,0.12) 0%, transparent 70%);
  top: 5%; left: 50%;
  animation: smoke-a 35s ease-in-out infinite;
  animation-delay: -22s;
}
.smoke-blob:nth-child(7) {
  width: 350px; height: 500px;
  background: radial-gradient(ellipse at center, rgba(30,25,90,0.18) 0%, transparent 70%);
  top: 45%; left: 2%;
  animation: smoke-c 18s ease-in-out infinite;
  animation-delay: -10s;
}
.smoke-blob:nth-child(8) {
  width: 1000px; height: 250px;
  background: radial-gradient(ellipse at center, rgba(12,18,55,0.1) 0%, transparent 70%);
  top: 55%; left: 10%;
  animation: smoke-d 30s ease-in-out infinite;
  animation-delay: -3s;
}

@keyframes smoke-a {
  0%, 100% { transform: translate(0px, 0px) scale(1) rotate(0deg); }
  40%       { transform: translate(60px, -50px) scale(1.08) rotate(5deg); }
  70%       { transform: translate(-30px, 40px) scale(0.93) rotate(-3deg); }
}
@keyframes smoke-b {
  0%, 100% { transform: translate(0px, 0px) scale(1) rotate(0deg); }
  35%       { transform: translate(-70px, 30px) scale(1.06) rotate(-6deg); }
  65%       { transform: translate(40px, -60px) scale(0.96) rotate(4deg); }
}
@keyframes smoke-c {
  0%, 100% { transform: translate(0px, 0px) scale(1) rotate(0deg); }
  50%       { transform: translate(50px, 50px) scale(1.1) rotate(8deg); }
}
@keyframes smoke-d {
  0%, 100% { transform: translate(0px, 0px) scale(1) rotate(0deg); }
  30%       { transform: translate(-40px, -30px) scale(1.04) rotate(-4deg); }
  60%       { transform: translate(30px, 50px) scale(0.97) rotate(6deg); }
}

/* ---- LIGNES OR HAUT/BAS ---- */
.border-top,
.border-bottom {
  position: fixed;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  z-index: 100;
  pointer-events: none;
}
.border-top    { top: 0; }
.border-bottom { bottom: 0; }

/* ---- ORNEMENTS COINS ---- */
.corner-ornament {
  position: fixed;
  width: 56px;
  height: 56px;
  z-index: 100;
  opacity: 0.55;
  pointer-events: none;
}
.corner-ornament svg { width: 100%; height: 100%; }
.corner-ornament.tl { top: 6px;    left: 6px; }
.corner-ornament.tr { top: 6px;    right: 6px;  transform: scaleX(-1); }
.corner-ornament.bl { bottom: 6px; left: 6px;   transform: scaleY(-1); }
.corner-ornament.br { bottom: 6px; right: 6px;  transform: scale(-1); }

/* ---- NAVIGATION ---- */
nav.main-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(20px, 3.83vw, 96px);
  padding: clamp(14px, 2.005vh, 32px) 0;
  z-index: 50;
  font-family: var(--font-title);
  font-size: clamp(12px, 1.037vw, 26px);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  background: linear-gradient(to bottom, rgba(6,8,16,0.55) 0%, transparent 100%);
  backdrop-filter: blur(4px);
}

nav.main-nav a {
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  transition: color 0.3s var(--transition), text-shadow 0.3s var(--transition);
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
nav.main-nav a:focus-visible { outline: none; }
nav.main-nav a:hover  { color: var(--gold); text-shadow: 0 0 8px rgba(201,168,76,1), 0 0 22px rgba(201,168,76,0.85), 0 0 55px rgba(201,168,76,0.45); }
nav.main-nav a.active { color: var(--gold); border-bottom: 1px solid rgba(201,168,76,0.7); padding-bottom: 2px; text-shadow: 0 0 10px rgba(201,168,76,0.7), 0 0 28px rgba(201,168,76,0.35); }

.nav-diamond {
  width: 10px; height: 10px;
  background: var(--gold);
  transform: rotate(45deg);
  opacity: 0.55;
  flex-shrink: 0;
}

/* ---- TYPOGRAPHIE ---- */
.eyebrow {
  font-family: var(--font-title);
  font-size: 9px;
  letter-spacing: 0.35em;
  color: var(--gold);
  text-transform: uppercase;
  opacity: 0.8;
  margin-bottom: 12px;
}

h1, .title-xl {
  font-family: var(--font-title);
  font-size: clamp(12px, 1.277vw, 32px);
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  color: var(--text);
}

h2, .title-lg {
  font-family: var(--font-title);
  font-size: clamp(14px, 1.437vw, 36px);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text);
}

h3, .title-md {
  font-family: var(--font-title);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--text);
}

p, .body {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-muted);
  max-width: 60ch;
}

.gold-text { color: var(--gold); }

/* ---- LIGNE DÉCORATIVE OR ---- */
.gold-line {
  width: 100px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 16px auto;
}
.gold-line.left { margin: 16px 0; }

/* ---- SÉPARATEUR DIAMANT ---- */
.diamond-sep {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0;
}
.diamond-sep::before,
.diamond-sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-border));
}
.diamond-sep::after {
  background: linear-gradient(270deg, transparent, var(--gold-border));
}
.diamond-sep .gem {
  width: 6px; height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* ---- CARTE HUB ---- */
.hub-card {
  position: relative;
  background: var(--dark-card);
  border: 1px solid var(--gold-border);
  padding: 28px 24px 40px;
  cursor: pointer;
  transition: all 0.4s var(--transition);
  overflow: hidden;
  backdrop-filter: blur(12px);
  text-decoration: none;
  display: block;
}

/* Coins animés */
.hub-card::before,
.hub-card::after,
.hub-card .c-br,
.hub-card .c-bl {
  content: '';
  position: absolute;
  width: 20px; height: 20px;
  transition: all 0.4s var(--transition);
}
.hub-card::before {
  top: 0; left: 0;
  border-top: 1px solid var(--gold);
  border-left: 1px solid var(--gold);
}
.hub-card::after {
  top: 0; right: 0;
  border-top: 1px solid var(--gold);
  border-right: 1px solid var(--gold);
}
.hub-card .c-br {
  bottom: 0; right: 0;
  border-bottom: 1px solid var(--gold);
  border-right: 1px solid var(--gold);
}
.hub-card .c-bl {
  bottom: 0; left: 0;
  border-bottom: 1px solid var(--gold);
  border-left: 1px solid var(--gold);
}

.hub-card:hover::before,
.hub-card:hover::after,
.hub-card:hover .c-br,
.hub-card:hover .c-bl { width: 36px; height: 36px; }

.hub-card:hover {
  border-color: rgba(201, 168, 76, 0.45);
  background: rgba(201, 168, 76, 0.04);
  transform: translateY(-3px);
}

/* Lueur hover */
.hub-card .glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(201,168,76,0.07) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.hub-card:hover .glow { opacity: 1; }

.hub-card .card-number {
  font-family: var(--font-title);
  font-size: 9px;
  letter-spacing: 0.25em;
  color: var(--gold);
  opacity: 0.5;
  margin-bottom: 14px;
}

.hub-card .card-icon {
  font-size: 24px;
  margin-bottom: 12px;
  color: var(--gold);
  opacity: 0.7;
}

.hub-card .card-arrow {
  position: absolute;
  bottom: 18px; right: 18px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(201,168,76,0.1);
  border: 1px solid rgba(201,168,76,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--gold);
  opacity: 0;
  transition: all 0.3s;
}
.hub-card:hover .card-arrow {
  opacity: 1;
  transform: translate(2px, -2px);
}

/* ---- BOUTON RETOUR ---- */
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-title);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--text-muted);
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.3s;
  margin-bottom: 40px;
}
.btn-back:hover { color: var(--gold); }
.btn-back::before { content: '←'; }

/* ---- LAYOUT PRINCIPAL ---- */
main {
  position: relative;
  z-index: 5;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 40px 60px;
}

/* ---- CANVAS ÉTOILES ---- */
#star-canvas {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}

/* ---- NÉBULEUSES CSS (pages secondaires) ---- */
.nebula-layer {
  position: fixed;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  filter: blur(90px);
}
.nebula-a {
  width: 65vw; height: 55vh; top: -5%; left: -12%;
  background: radial-gradient(ellipse, rgba(72,18,130,0.22) 0%, transparent 70%);
  animation: nebula-drift-a 28s ease-in-out infinite alternate;
}
.nebula-b {
  width: 55vw; height: 65vh; top: 25%; right: -8%;
  background: radial-gradient(ellipse, rgba(10,45,145,0.18) 0%, transparent 70%);
  animation: nebula-drift-b 35s ease-in-out infinite alternate;
}
.nebula-c {
  width: 45vw; height: 45vh; bottom: 0%; left: 28%;
  background: radial-gradient(ellipse, rgba(0,90,130,0.14) 0%, transparent 70%);
  animation: nebula-drift-c 22s ease-in-out infinite alternate;
}
@keyframes nebula-drift-a {
  0%   { transform: translate(0px,   0px)  scale(1);    opacity: 1;    }
  50%  { transform: translate(35px, -25px) scale(1.06); opacity: 0.78; }
  100% { transform: translate(18px,  14px) scale(0.96); opacity: 0.9;  }
}
@keyframes nebula-drift-b {
  0%   { transform: translate(0px,   0px)  scale(1);    opacity: 0.85; }
  50%  { transform: translate(-28px, 20px) scale(1.08); opacity: 1;    }
  100% { transform: translate(12px, -18px) scale(0.94); opacity: 0.75; }
}
@keyframes nebula-drift-c {
  0%   { transform: translate(0px,   0px)  scale(1);    opacity: 0.9; }
  50%  { transform: translate(22px,  18px) scale(1.05); opacity: 0.7; }
  100% { transform: translate(-16px,-12px) scale(1.02); opacity: 1;   }
}

/* ---- ANIMATIONS D'ENTRÉE (sous-pages, remplace GSAP) ---- */
@keyframes page-enter { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes ornament-enter { from { opacity: 0; } to { opacity: 1; } }
.page-enter main { animation: page-enter 0.7s cubic-bezier(0.22,1,0.36,1) 0.05s both; }
.page-enter .corner-ornament:nth-child(1) { animation: ornament-enter 0.9s ease 0.10s both; }
.page-enter .corner-ornament:nth-child(2) { animation: ornament-enter 0.9s ease 0.18s both; }
.page-enter .corner-ornament:nth-child(3) { animation: ornament-enter 0.9s ease 0.26s both; }
.page-enter .corner-ornament:nth-child(4) { animation: ornament-enter 0.9s ease 0.34s both; }

/* ---- RESPONSIVE ---- */

/* Laptop (1280px et moins) */
@media (max-width: 1280px) {
  nav.main-nav { gap: clamp(20px, 3vw, 60px); font-size: clamp(12px, 1.1vw, 20px); padding: 18px 0; }
}

/* Tablette / mobile (900px et moins) — layout bascule en colonne */
@media (max-width: 900px) {
  main { padding: 100px 20px 40px; align-items: flex-start; justify-content: flex-start; }
  nav.main-nav { gap: 16px; font-size: 11px; letter-spacing: 0.15em; padding: 16px 0; }
}