/* =========================================================
   SABRINA GALAXY — feuille de style
   Sommaire :
   1. Variables (couleurs, polices)
   2. Base
   3. Navigation
   4. Hero (avatar, titre, carte orbitale)
   5. Sections génériques
   6. Trajectoire (Bouira → Amiens → Lille)
   7. Projets (planètes)
   8. Constellations (compétences)
   9. Contact / pied de page
   10. Animations & responsive
   ========================================================= */

/* ---------- 1. VARIABLES ---------- */
:root{
  --bg: #05060f;
  --bg-panel: #0d1024;
  --bg-panel-2: #12152c;
  --line: #23264a;
  --text: #eef0fb;
  --text-muted: #8b8fb3;
  --violet: #9d7cff;
  --violet-glow: #9d7cff55;
  --cyan: #4fd8ff;
  --amber: #ffb35c;
  --pink: #ff6fb1;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* ---------- 2. BASE ---------- */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.65;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
.wrap{ max-width:1100px; margin:0 auto; padding:0 32px; position:relative; z-index:2; }

/* le ciel étoilé, dessiné en JavaScript, reste fixe derrière tout le reste */
#stars{ position:fixed; inset:0; z-index:0; pointer-events:none; }

/* ---------- 3. NAVIGATION ---------- */
nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  backdrop-filter:blur(10px);
  background:rgba(5,6,15,0.72);
  border-bottom:1px solid var(--line);
}
nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:64px; }
.logo{ font-family:var(--font-mono); font-size:14px; display:flex; align-items:center; gap:8px; }
.logo .star-ico{ color:var(--amber); }
.nav-links{ display:flex; gap:26px; font-size:13px; color:var(--text-muted); font-family:var(--font-mono); }
.nav-links a:hover{ color:var(--cyan); }

/* ---------- 4. HERO ---------- */
header.hero{
  position:relative; min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:120px 0 80px;
}

/* Avatar : monogramme par défaut, remplaçable par une image */
.avatar{
  width:104px; height:104px; border-radius:50%; margin:0 auto 28px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:32px; color:#0b0a18;
  background:radial-gradient(circle at 32% 28%, #ffffff, var(--cyan) 40%, var(--violet) 100%);
  box-shadow:0 0 44px 8px var(--violet-glow), inset -14px -14px 30px rgba(0,0,0,0.32);
  object-fit:cover;
  border:none;
}

.eyebrow{
  font-family:var(--font-mono); font-size:13px; color:var(--cyan);
  letter-spacing:0.08em; margin-bottom:20px;
}
h1.title{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(2.6rem, 7vw, 5rem); letter-spacing:-0.02em; line-height:1;
  background:linear-gradient(135deg, #ffffff 20%, var(--cyan) 55%, var(--pink) 92%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:20px;
}
.hero-sub{ font-size:16px; color:var(--text-muted); max-width:580px; margin:0 auto 48px; }

/* Carte orbitale : navigation en forme de système solaire */
.orbit-map{ position:relative; width:min(500px, 88vw); aspect-ratio:1/1; margin:0 auto; }
.orbit-ring{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  border:1px solid var(--line); border-radius:50%;
}
.r1{ width:30%; height:30%; }
.r2{ width:56%; height:56%; }
.r3{ width:80%; height:80%; }
.r4{ width:100%; height:100%; }

.sun{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:62px; height:62px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff, var(--amber) 55%, #b0601a 100%);
  box-shadow:0 0 40px 10px var(--violet-glow);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:12px; font-weight:600; color:#1a0f00;
}

/* chaque .orbiter tourne, et porte une planète posée sur son anneau */
.orbiter{
  position:absolute; top:50%; left:50%;
  animation:spin 70s linear infinite;
}
.o2{ width:56%; height:56%; animation-duration:52s; }
.o3{ width:80%; height:80%; animation-duration:78s; }
.o4{ width:100%; height:100%; animation-duration:104s; }

.planet-nav{
  position:absolute; top:-13px; left:calc(50% - 13px);
  width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  animation:spin-back 70s linear infinite;   /* contre-rotation : le texte reste droit */
}
.o2 .planet-nav{ animation-duration:52s; }
.o3 .planet-nav{ animation-duration:78s; }
.o4 .planet-nav{ animation-duration:104s; }

.planet-nav .core{ width:100%; height:100%; border-radius:50%; display:block; }
.planet-nav .label{
  position:absolute; top:32px; left:50%; transform:translateX(-50%);
  white-space:nowrap; font-family:var(--font-mono); font-size:11px;
  color:var(--text-muted); opacity:0; transition:opacity .2s ease;
}
.planet-nav:hover .label{ opacity:1; color:var(--text); }
.planet-nav:hover .core{ box-shadow:0 0 18px 4px currentColor; }

@keyframes spin{
  from{ transform:translate(-50%,-50%) rotate(0deg); }
  to  { transform:translate(-50%,-50%) rotate(360deg); }
}
@keyframes spin-back{
  from{ transform:rotate(0deg); }
  to  { transform:rotate(-360deg); }
}

/* ---------- 5. SECTIONS GÉNÉRIQUES ---------- */
section{ padding:120px 0; position:relative; }
.section-head{ margin-bottom:56px; text-align:center; }
.section-num{
  font-family:var(--font-mono); font-size:12px; color:var(--cyan);
  letter-spacing:0.1em; margin-bottom:12px; display:block;
}
h2{ font-family:var(--font-display); font-size:clamp(1.8rem,3vw,2.4rem); font-weight:600; }
.section-sub{ color:var(--text-muted); margin-top:12px; max-width:540px; margin-left:auto; margin-right:auto; }

/* ---------- 6. TRAJECTOIRE ---------- */
.story{ max-width:720px; margin:0 auto 72px; }
.story p{ color:var(--text-muted); margin-bottom:18px; font-size:16px; }
.story strong{ color:var(--text); font-weight:600; }

/* Les étapes du parcours sont des POINTS DE PASSAGE (losanges de navigation),
   volontairement différents des planètes : une planète = un projet, un losange = une étape. */
/* auto-fit ici aussi : 3 étapes ou 5, la ligne se réorganise toute seule. */
.route{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  gap:28px;
  margin-bottom:64px;
}
.step{ position:relative; text-align:center; padding:0 8px; }

/* le trait pointillé qui relie les étapes */
.step:not(:last-child)::after{
  content:''; position:absolute; top:38px; z-index:0;
  left:calc(50% + 46px); right:calc(-50% + 46px);
  border-top:1px dashed var(--line);
}

.marker{
  position:relative; z-index:1;
  width:56px; height:56px; margin:10px auto 24px;
  background:var(--bg-panel);
  border:1px solid var(--cyan); border-radius:8px;
  transform:rotate(45deg);
  display:flex; align-items:center; justify-content:center;
}
.marker-num{
  transform:rotate(-45deg);          /* on redresse le chiffre */
  font-family:var(--font-mono); font-size:13px; color:var(--cyan);
}
/* étape actuelle : violet + halo qui pulse */
.step.current .marker{ border-color:var(--violet); box-shadow:0 0 22px var(--violet-glow); }
.step.current .marker-num{ color:var(--violet); }
.ping{
  position:absolute; inset:-9px; border-radius:10px;
  border:1px solid var(--violet); opacity:.6;
  animation:pulse 2.8s ease-out infinite;
}
@keyframes pulse{
  0%   { transform:scale(1);    opacity:.6; }
  70%  { transform:scale(1.3);  opacity:0; }
  100% { transform:scale(1.3);  opacity:0; }
}

.step-year{ font-family:var(--font-mono); font-size:12px; color:var(--cyan); margin-bottom:6px; }
.step-city{ font-family:var(--font-display); font-size:18px; font-weight:600; margin-bottom:8px; }
.here{
  display:inline-block; font-family:var(--font-mono); font-size:10px;
  color:var(--violet); border:1px solid var(--violet); border-radius:20px;
  padding:2px 9px; margin-bottom:10px;
}
.step-desc{ color:var(--text-muted); font-size:14px; max-width:290px; margin:0 auto; }

.mini-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; max-width:820px; margin:0 auto; }
.mini-card{
  background:var(--bg-panel); border:1px solid var(--line);
  border-radius:14px; padding:22px;
}
.mini-card h3{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em;
  color:var(--amber); font-weight:500; margin-bottom:14px;
}
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chips span{
  font-size:13px; color:var(--text-muted); background:var(--bg-panel-2);
  border:1px solid var(--line); border-radius:6px; padding:5px 11px;
}

/* ---------- 7. PROJETS ---------- */
/* auto-fit : la grille s'adapte au nombre de projets. 3, 4, 6... elle se
   réorganise toute seule, il n'y a rien à changer ici quand tu en ajoutes un. */
.planets-row{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:28px;
}
.planet-card{
  background:var(--bg-panel); border:1px solid var(--line); border-radius:16px;
  padding:32px 26px; text-align:center;
  display:flex; flex-direction:column;
  transition:transform .25s ease, border-color .25s ease;
}
.planet-card:hover{ transform:translateY(-6px); border-color:var(--violet); }

/* La couleur de chaque planète est AUTOMATIQUE : elle dépend de la position
   de la carte dans la liste, et le cycle recommence toutes les 4 cartes.
   Tu peux donc ajouter autant de projets que tu veux sans toucher au CSS. */
.planet-visual{ width:92px; height:92px; border-radius:50%; margin:0 auto 22px; }

.planet-card:nth-child(4n+1) .planet-visual{
  background:radial-gradient(circle at 35% 30%, #d7c9ff, var(--violet) 55%, #3a2670 100%);
  box-shadow:0 0 34px 6px #9d7cff44, inset -17px -17px 32px rgba(0,0,0,0.45);
}
.planet-card:nth-child(4n+2) .planet-visual{
  background:radial-gradient(circle at 35% 30%, #ffe2c2, var(--amber) 55%, #7a4408 100%);
  box-shadow:0 0 34px 6px #ffb35c44, inset -17px -17px 32px rgba(0,0,0,0.45);
}
.planet-card:nth-child(4n+3) .planet-visual{
  background:radial-gradient(circle at 35% 30%, #ffd0e8, var(--pink) 55%, #7a1c47 100%);
  box-shadow:0 0 34px 6px #ff6fb144, inset -17px -17px 32px rgba(0,0,0,0.45);
}
.planet-card:nth-child(4n+4) .planet-visual{
  background:radial-gradient(circle at 35% 30%, #bfe8ff, var(--cyan) 55%, #0f4a63 100%);
  box-shadow:0 0 34px 6px #4fd8ff44, inset -17px -17px 32px rgba(0,0,0,0.45);
}

.planet-meta{ font-family:var(--font-mono); font-size:11px; color:var(--text-muted); margin-bottom:10px; }
.planet-title{ font-family:var(--font-display); font-size:18px; font-weight:600; margin-bottom:12px; line-height:1.3; }
.planet-desc{ color:var(--text-muted); font-size:14px; margin-bottom:20px; }
.tags{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; margin-bottom:22px; }
.tag{
  font-family:var(--font-mono); font-size:11px; color:var(--text);
  background:var(--bg-panel-2); border:1px solid var(--line);
  padding:4px 10px; border-radius:20px;
}
.planet-links{
  display:flex; gap:16px; justify-content:center;
  font-family:var(--font-mono); font-size:12px; margin-top:auto;
}
.planet-links a{ color:var(--text-muted); border-bottom:1px solid transparent; }
.planet-links a:hover{ color:var(--cyan); border-color:var(--cyan); }

/* ---------- 8. CONSTELLATIONS ---------- */
.const-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:24px; }
.const-card{
  background:var(--bg-panel); border:1px solid var(--line);
  border-radius:16px; padding:24px 18px 12px;
  transition:border-color .25s ease;
}
.const-card:hover{ border-color:var(--violet); }
.const-title{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em;
  font-weight:500; margin-bottom:6px; text-align:center;
}
svg.constellation{ width:100%; height:auto; display:block; overflow:visible; }
.const-line{ stroke:var(--line); stroke-width:1; fill:none; }
.const-dot{ fill:var(--cyan); transition:fill .2s ease, r .2s ease; }
.const-label{ font-family:var(--font-mono); font-size:11px; fill:var(--text-muted); transition:fill .2s ease; }
.const-group{ cursor:default; }
.const-group:hover .const-dot{ fill:var(--pink); r:6; }
.const-group:hover .const-label{ fill:var(--text); }

/* ---------- 9. CONTACT ---------- */
footer{ border-top:1px solid var(--line); padding:90px 0 44px; text-align:center; }
footer h2{ margin:14px 0 16px; }
.footer-line{ color:var(--text-muted); margin-bottom:34px; }
.footer-line strong{ color:var(--text); font-weight:600; }
.signal-btn{
  font-family:var(--font-mono); font-size:14px; padding:14px 26px; border-radius:30px;
  border:1px solid var(--violet); color:var(--text);
  display:inline-flex; align-items:center; gap:8px; transition:all .2s ease;
}
.signal-btn:hover{ background:var(--violet); color:#0a0a14; box-shadow:0 0 24px var(--violet-glow); }
.footer-links{ display:flex; justify-content:center; gap:18px; margin:36px 0 46px; flex-wrap:wrap; }
.footer-links a{
  font-family:var(--font-mono); font-size:13px; color:var(--text-muted);
  padding:9px 16px; border:1px solid var(--line); border-radius:8px;
}
.footer-links a:hover{ color:var(--cyan); border-color:var(--cyan); }
.footer-bottom{ font-size:12px; color:#4c4f6b; font-family:var(--font-mono); }

/* ---------- 10. ANIMATIONS & RESPONSIVE ---------- */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

@media (max-width: 900px){
  .planets-row{ grid-template-columns:1fr; }
  .route{ grid-template-columns:1fr; gap:44px; }
  /* en colonne, le trait pointillé horizontal n'a plus de sens */
  .step:not(:last-child)::after{ display:none; }
}
@media (max-width: 700px){
  .wrap{ padding:0 20px; }
  section{ padding:90px 0; }
  .nav-links{ display:none; }
  .mini-cards{ grid-template-columns:1fr; }
}

/* respecte les réglages système « réduire les animations » */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ transition:none; opacity:1; transform:none; }
  .orbiter, .planet-nav, .ping{ animation:none; }
}