/* ============================================================
   MAIN.CSS — Base layout, dark theme, navigation controls
   presentationclubastro.orbitalis.fr
   ============================================================ */

/* ----- CSS Variables ----- */
:root {
  --bg:          #020817;
  --bg-card:     #0a1628;
  --bg-card2:    #0d1f3c;
  --bg-code:     #050e1f;

  --violet:      #7c3aed;
  --violet-l:    #a78bfa;
  --violet-ll:   #c4b5fd;
  --cyan:        #06b6d4;
  --cyan-l:      #67e8f9;
  --green:       #10b981;
  --green-l:     #6ee7b7;
  --red:         #ef4444;
  --red-l:       #fca5a5;
  --orange:      #f59e0b;
  --orange-l:    #fcd34d;

  --text:        #e2e8f0;
  --text-dim:    #94a3b8;
  --text-muted:  #475569;

  --border:      rgba(124,58,237,0.22);
  --border-cyan: rgba(6,182,212,0.25);
  --border-dim:  rgba(148,163,184,0.12);

  --glow-v:  0 0 24px rgba(124,58,237,0.45);
  --glow-c:  0 0 24px rgba(6,182,212,0.40);
  --glow-g:  0 0 20px rgba(16,185,129,0.35);

  --slide-in:  0.55s;
  --slide-out: 0.40s;
  --ease:      cubic-bezier(0.4,0,0.2,1);

  /* Section accent colours */
  --s1: var(--cyan);
  --s2: var(--orange);
  --s3: var(--violet-l);
}

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

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* ============================================================
   BACKGROUND — deep space
   ============================================================ */
.space-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 75% 15%, rgba(124,58,237,0.13) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 15% 80%, rgba(6,182,212,0.09) 0%, transparent 55%),
    radial-gradient(ellipse 40% 30% at 50% 50%, rgba(7,12,30,0.60) 0%, transparent 100%),
    #020817;
}

/* Stars via box-shadow */
.stars-s, .stars-m, .stars-l {
  position: fixed;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
}
.stars-s {
  width: 1px; height: 1px;
  background: transparent;
  box-shadow:
    120px  45px #fff8, 310px  92px rgba(255,255,255,0.5),
    540px  30px #fff9,  78px 210px rgba(255,255,255,0.6),
    840px  75px #fff6, 190px 380px rgba(255,255,255,0.7),
    430px 450px #fff5, 650px 180px rgba(255,255,255,0.8),
    920px 320px #fff6, 1100px  60px rgba(255,255,255,0.5),
    740px 500px #fff7,  60px 550px rgba(255,255,255,0.6),
    1350px 120px #fff8, 1520px 260px rgba(255,255,255,0.5),
    1700px  80px #fff6, 280px 650px rgba(255,255,255,0.7),
    1050px 420px #fff5, 1260px 540px rgba(255,255,255,0.6),
    380px 780px #fff4,  880px 700px rgba(255,255,255,0.6),
    1580px 400px #fff5, 1820px 150px rgba(255,255,255,0.7),
    490px 120px rgba(167,139,250,0.6), 1140px 330px rgba(103,232,249,0.4),
    720px 870px #fff4, 950px 950px rgba(255,255,255,0.5),
    1400px 700px #fff6, 200px 900px rgba(255,255,255,0.4),
    1650px 830px #fff5, 1800px 600px rgba(255,255,255,0.6),
    60px 750px rgba(255,255,255,0.5), 1900px 480px rgba(255,255,255,0.4);
  animation: starsTwinkle 6s ease-in-out infinite alternate;
}
.stars-m {
  width: 1.5px; height: 1.5px;
  background: transparent;
  box-shadow:
    240px 160px rgba(255,255,255,0.7), 680px 270px rgba(255,255,255,0.8),
    1020px 190px rgba(255,255,255,0.6), 1380px 350px rgba(255,255,255,0.7),
    480px 620px rgba(255,255,255,0.7), 850px 820px rgba(255,255,255,0.6),
    1460px 560px rgba(255,255,255,0.8), 150px 470px rgba(255,255,255,0.6),
    1700px 320px rgba(167,139,250,0.7), 590px 900px rgba(103,232,249,0.6),
    1200px 680px rgba(255,255,255,0.7), 320px 290px rgba(255,255,255,0.8),
    770px 430px rgba(255,255,255,0.6), 1550px 750px rgba(255,255,255,0.7),
    1050px 900px rgba(255,255,255,0.5);
  animation: starsTwinkle 9s ease-in-out infinite alternate-reverse;
}
.stars-l {
  width: 2px; height: 2px;
  background: transparent;
  box-shadow:
    380px 220px rgba(255,255,255,0.9), 1100px 410px rgba(255,255,255,0.9),
    760px 680px rgba(255,255,255,0.8), 1650px 180px rgba(167,139,250,0.9),
    530px  90px rgba(103,232,249,0.7), 1300px 800px rgba(255,255,255,0.8),
    900px  50px rgba(255,255,255,0.9), 220px 760px rgba(255,255,255,0.8);
  animation: starsTwinkle 12s ease-in-out infinite alternate;
}

/* ============================================================
   PRESENTATION SHELL
   ============================================================ */
#presentation {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

/* ============================================================
   SLIDES — base
   ============================================================ */
.slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5vh 8vw;
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
  z-index: 1;
}
.slide--active {
  opacity: 1;
  pointer-events: all;
  z-index: 2;
  animation: slideEnter var(--slide-in) var(--ease) both;
}
.slide--exit-up {
  pointer-events: none;
  z-index: 3;
  animation: slideExitUp var(--slide-out) var(--ease) both;
}
.slide--exit-down {
  pointer-events: none;
  z-index: 3;
  animation: slideExitDown var(--slide-out) var(--ease) both;
}

/* Inner container — limits content width */
.slide-inner {
  width: 100%;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5vh;
}

/* ============================================================
   AUTO-REVEAL items (staggered on slide enter)
   ============================================================ */
.slide--active .anim { animation: fadeUp 0.5s var(--ease) both; }
.slide--active .anim:nth-child(1)  { animation-delay: 0.10s; }
.slide--active .anim:nth-child(2)  { animation-delay: 0.22s; }
.slide--active .anim:nth-child(3)  { animation-delay: 0.34s; }
.slide--active .anim:nth-child(4)  { animation-delay: 0.46s; }
.slide--active .anim:nth-child(5)  { animation-delay: 0.58s; }
.slide--active .anim:nth-child(6)  { animation-delay: 0.70s; }
.slide--active .anim-d1 { animation-delay: 0.10s; }
.slide--active .anim-d2 { animation-delay: 0.22s; }
.slide--active .anim-d3 { animation-delay: 0.34s; }
.slide--active .anim-d4 { animation-delay: 0.46s; }
.slide--active .anim-d5 { animation-delay: 0.58s; }
.slide--active .anim-d6 { animation-delay: 0.70s; }
.slide--active .anim-d7 { animation-delay: 0.82s; }

/* ============================================================
   STEP-THROUGH items
   ============================================================ */
.step-item {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.40s var(--ease), transform 0.40s var(--ease);
}
.step-item.step-visible {
  opacity: 1;
  transform: none;
}

/* ============================================================
   SIDEBAR — plan de la présentation
   ============================================================ */
#sidebar {
  position: fixed;
  top: 0; left: 0;
  height: 100%;
  z-index: 300;
  display: flex;
  flex-direction: row;
  pointer-events: none;
}

#sidebar-toggle {
  pointer-events: all;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 28px; height: 52px;
  border-radius: 0 8px 8px 0;
  border: 1px solid var(--border-dim);
  border-left: none;
  background: rgba(10,22,40,0.92);
  color: var(--text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  backdrop-filter: blur(6px);
  writing-mode: vertical-lr;
  letter-spacing: 0.12em;
  font-size: 0.6rem;
  text-transform: uppercase;
}
#sidebar-toggle:hover { color: var(--text); border-color: var(--border); }
#sidebar.sidebar--open #sidebar-toggle {
  left: 220px;
  border-radius: 0 8px 8px 0;
}

#sidebar-panel {
  pointer-events: all;
  width: 220px;
  height: 100%;
  background: rgba(5,14,31,0.97);
  border-right: 1px solid var(--border-dim);
  backdrop-filter: blur(12px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1.6rem 0 2rem;
  transform: translateX(-100%);
  transition: transform 0.3s var(--ease);
  scrollbar-width: thin;
  scrollbar-color: rgba(124,58,237,0.3) transparent;
}
#sidebar.sidebar--open #sidebar-panel { transform: translateX(0); }

.sidebar-group {
  margin-bottom: 0.2rem;
}
.sidebar-section-title {
  padding: 0.55rem 1rem 0.3rem;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-muted);
  border-left: 2px solid var(--border-dim);
  margin-left: 0.6rem;
}
.sidebar-section-title--meteo  { color: var(--cyan);     border-color: var(--cyan); }
.sidebar-section-title--ovation { color: var(--orange-l); border-color: var(--orange); }
.sidebar-section-title--rag    { color: var(--violet-l); border-color: var(--violet-l); }

.sidebar-item {
  display: block;
  padding: 0.3rem 1rem 0.3rem 1.5rem;
  font-size: 0.69rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-left: 2px solid transparent;
  margin-left: 0.6rem;
  border-radius: 0 4px 4px 0;
}
.sidebar-item:hover {
  color: var(--text);
  background: rgba(124,58,237,0.08);
}
.sidebar-item.sidebar-item--active {
  color: var(--violet-l);
  background: rgba(124,58,237,0.12);
  border-left-color: var(--violet-l);
  font-weight: 600;
}

/* ============================================================
   NAVIGATION CONTROLS
   ============================================================ */
#nav-prev, #nav-next {
  position: fixed;
  bottom: 2.8vh;
  z-index: 200;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(10,22,40,0.85);
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 1.1rem;
  transition: border-color 0.2s, box-shadow 0.2s, opacity 0.2s;
  user-select: none;
  backdrop-filter: blur(6px);
}
#nav-prev { left: calc(50% - 56px); }
#nav-next { left: calc(50% + 12px); }
#nav-prev:hover, #nav-next:hover {
  border-color: var(--violet-l);
  box-shadow: var(--glow-v);
}
#nav-prev:disabled, #nav-next:disabled { opacity: 0.25; cursor: not-allowed; }

#slide-counter {
  position: fixed;
  bottom: 2.8vh;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.12em;
  z-index: 200;
  pointer-events: none;
  line-height: 44px;
}

#section-badge {
  position: fixed;
  top: 1.8vh;
  right: 2vw;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  z-index: 200;
  transition: color 0.4s;
  pointer-events: none;
}

#progress-bar {
  position: fixed;
  bottom: 0; left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--violet), var(--cyan));
  z-index: 200;
  transition: width 0.45s var(--ease);
  box-shadow: 0 0 8px rgba(124,58,237,0.5);
}

/* ============================================================
   INFO MODAL OVERLAY
   ============================================================ */
.info-overlay {
  position: fixed; inset: 0;
  z-index: 1000;
  background: rgba(2,8,23,0.82);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 2rem;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s;
}
.info-overlay--open { opacity: 1; pointer-events: all; }
.info-modal-dialog {
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: 16px;
  max-width: 600px; width: 100%;
  max-height: 80vh;
  overflow: hidden;
  display: flex; flex-direction: column;
  animation: modalIn 0.22s var(--ease) both;
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.94) translateY(-12px); }
  to   { opacity: 1; transform: none; }
}
.info-modal-header {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 1rem 1.3rem 0.8rem;
  border-bottom: 1px solid var(--border-dim);
}
.info-modal-title {
  flex: 1; font-size: 0.92rem; font-weight: 700; color: var(--text);
}
.info-modal-close {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 1.3rem; line-height: 1;
  padding: 0 0.2rem; transition: color 0.15s;
}
.info-modal-close:hover { color: var(--text); }
.info-modal-body {
  padding: 1.1rem 1.3rem 1.4rem;
  overflow-y: auto;
  font-size: 0.85rem; line-height: 1.7; color: var(--text-dim);
}
.info-modal-body p  { margin-bottom: 0.4rem; }
.info-modal-body ul { margin-bottom: 0.4rem; }
.modal-code {
  background: var(--bg-code);
  border: 1px solid var(--border-dim);
  border-radius: 8px;
  padding: 0.6rem 1rem;
  font-family: 'Cascadia Code', monospace;
  font-size: 0.78rem;
  color: var(--cyan-l);
  white-space: pre;
  overflow-x: auto;
  margin: 0.5rem 0;
}
.modal-note {
  background: rgba(124,58,237,0.08);
  border-left: 3px solid var(--violet-l);
  padding: 0.5rem 0.8rem;
  border-radius: 0 8px 8px 0;
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-top: 0.7rem;
}
.modal-table {
  width: 100%; border-collapse: collapse; margin-top: 0.5rem; font-size: 0.8rem;
}
.modal-table th, .modal-table td {
  padding: 0.3rem 0.6rem;
  border-bottom: 1px solid var(--border-dim);
  text-align: left;
}
.modal-table th { color: var(--text-muted); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }

/* ── Trigger elements ── */
[data-modal] { cursor: pointer; }
.info-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(6,182,212,0.4);
  background: rgba(6,182,212,0.08);
  color: var(--cyan-l);
  font-size: 0.72rem; font-weight: 700;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
  vertical-align: middle;
  margin-left: 0.4rem;
  user-select: none;
  flex-shrink: 0;
}
.info-btn:hover {
  background: rgba(6,182,212,0.2);
  border-color: var(--cyan);
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1 { font-size: clamp(2.2rem, 5vw, 5rem);   font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.6rem, 3.2vw, 3rem);  font-weight: 700; line-height: 1.18; letter-spacing: -0.01em; }
h3 { font-size: clamp(1.1rem, 2vw, 1.9rem);  font-weight: 600; line-height: 1.3;  }
h4 { font-size: clamp(0.9rem, 1.5vw, 1.35rem); font-weight: 600; }
p, li { font-size: clamp(0.85rem, 1.4vw, 1.15rem); line-height: 1.75; }
code, .code { font-family: 'Cascadia Code', 'Consolas', 'Fira Code', monospace; }

/* Color helpers */
.text-violet { color: var(--violet-l); }
.text-cyan   { color: var(--cyan); }
.text-green  { color: var(--green); }
.text-red    { color: var(--red); }
.text-orange { color: var(--orange); }
.text-muted  { color: var(--text-muted); }
.text-dim    { color: var(--text-dim); }
.text-center { text-align: center; }
.text-small  { font-size: clamp(0.75rem, 1.1vw, 0.95rem); }

/* Gradient text */
.gradient-text {
  background: linear-gradient(135deg, var(--violet-l), var(--cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gradient-text-warm {
  background: linear-gradient(135deg, var(--orange), var(--red));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================================
   CARDS & CONTAINERS
   ============================================================ */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  border-radius: 14px;
  padding: 1.4rem 1.8rem;
}
.card--violet { border-color: var(--border); }
.card--cyan   { border-color: var(--border-cyan); }
.card--glow   { box-shadow: var(--glow-v); }
.card--flat   { background: rgba(10,22,40,0.5); }

.pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.pill--violet { background: rgba(124,58,237,0.18); color: var(--violet-l); border: 1px solid rgba(124,58,237,0.35); }
.pill--cyan   { background: rgba(6,182,212,0.15);  color: var(--cyan);    border: 1px solid rgba(6,182,212,0.35); }
.pill--orange { background: rgba(245,158,11,0.15); color: var(--orange-l); border: 1px solid rgba(245,158,11,0.35); }
.pill--green  { background: rgba(16,185,129,0.15); color: var(--green-l);  border: 1px solid rgba(16,185,129,0.35); }
.pill--red    { background: rgba(239,68,68,0.15);  color: var(--red-l);   border: 1px solid rgba(239,68,68,0.35); }

.divider {
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, var(--violet), var(--cyan));
  border-radius: 2px;
  margin: 0.5rem auto;
}

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.row { display: flex; gap: 2vw; align-items: stretch; width: 100%; }
.row--center { align-items: center; justify-content: center; }
.col { flex: 1; display: flex; flex-direction: column; gap: clamp(0.6rem, 1.5vh, 1.2rem); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2vw; width: 100%; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.5vw; width: 100%; }

/* ============================================================
   SECTION HEADER BAR (left accent line)
   ============================================================ */
.section-header {
  display: flex; flex-direction: column; gap: 0.4rem;
  border-left: 3px solid var(--violet-l);
  padding-left: 1.2rem;
  align-self: flex-start;
}
.section-header--cyan   { border-color: var(--cyan); }
.section-header--orange { border-color: var(--orange); }
.section-header--violet { border-color: var(--violet-l); }

/* ============================================================
   BUTTON
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.65rem 1.6rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-size: clamp(0.85rem, 1.2vw, 1rem);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  user-select: none;
}
.btn:hover { border-color: var(--violet-l); box-shadow: var(--glow-v); }
.btn--primary {
  background: linear-gradient(135deg, var(--violet), #5b21b6);
  border-color: transparent;
  color: #fff;
}
.btn--primary:hover { box-shadow: var(--glow-v); filter: brightness(1.1); }
.btn--cyan {
  background: linear-gradient(135deg, var(--cyan), #0e7490);
  border-color: transparent;
  color: #fff;
}
.btn--cyan:hover { box-shadow: var(--glow-c); filter: brightness(1.1); }
.btn--violet {
  background: linear-gradient(135deg, var(--violet), #5b21b6);
  border-color: transparent;
  color: #fff;
}
.btn--violet:hover { box-shadow: var(--glow-v); filter: brightness(1.1); }

/* ============================================================
   CODE BLOCK
   ============================================================ */
.code-block {
  background: var(--bg-code);
  border: 1px solid var(--border-dim);
  border-radius: 10px;
  padding: 1rem 1.5rem;
  font-family: 'Cascadia Code', 'Consolas', monospace;
  font-size: clamp(0.75rem, 1.1vw, 0.9rem);
  line-height: 1.8;
  width: 100%;
  overflow-x: auto;
}

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes slideEnter {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideExitUp {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-40px); }
}
@keyframes slideExitDown {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(40px); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes starsTwinkle {
  from { opacity: 0.55; }
  to   { opacity: 1; }
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 8px rgba(124,58,237,0.3); }
  50%       { box-shadow: 0 0 24px rgba(124,58,237,0.7); }
}
@keyframes pulse-cyan {
  0%, 100% { box-shadow: 0 0 8px rgba(6,182,212,0.3); }
  50%       { box-shadow: 0 0 24px rgba(6,182,212,0.7); }
}
@keyframes drawLine {
  from { stroke-dashoffset: 700; }
  to   { stroke-dashoffset: 0; }
}
@keyframes countUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}