/* ============================================================
   shared.css — AdopteUnCopilot.com
   Design system partagé — variables, base, nav, typographie
   v1.0 — mars 2026
   ============================================================ */

/* ── VARIABLES ─────────────────────────────────────────────── */
:root {
  --ink:        #07000F;
  --deep:       #0D0520;
  --surface:    #120830;
  --panel:      #1A0D3D;
  --panel-lt:   #211050;
  --violet:     #7C3AED;
  --vivid:      #9D5CFF;
  --mist:       #C4A8FF;
  --gold:       #C9A84C;
  --gold-lt:    #E8CC7A;
  --champagne:  #F5EAC8;
  --white:      #FAFAF8;
  --muted:      rgba(196,168,255,0.45);
  --border:     rgba(124,58,237,0.18);
  --border-lt:  rgba(196,168,255,0.1);
  --text-body:  rgba(220,210,240,0.82);
  --teal:       #0EA5E9;
  --green:      #22C55E;
}

/* ── RESET ──────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* ── BASE ───────────────────────────────────────────────────── */
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--ink);
  color: var(--white);
  overflow-x: hidden;
  cursor: none;
}

/* ── CURSEUR ────────────────────────────────────────────────── */
#cur {
  position: fixed; width: 10px; height: 10px; border-radius: 50%;
  background: var(--gold); pointer-events: none; z-index: 9999;
  transform: translate(-50%,-50%); mix-blend-mode: screen;
}
#cur-ring {
  position: fixed; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(196,168,255,0.3);
  pointer-events: none; z-index: 9998;
  transform: translate(-50%,-50%);
}

/* ── BARRE DE PROGRESSION ───────────────────────────────────── */
#progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--violet), var(--gold));
  z-index: 300; transition: width .1s linear;
}

/* ── TEXTURE DE BRUIT ───────────────────────────────────────── */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.022;
}

/* ── ORBES DE FOND (base — couleurs définies dans chaque page) ── */
.orbs { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.orb  { position: absolute; border-radius: 50%; filter: blur(130px); animation: drift 14s ease-in-out infinite; }
@keyframes drift {
  0%,100% { transform: translate(0,0) scale(1); }
  33%      { transform: translate(24px,-32px) scale(1.04); }
  66%      { transform: translate(-16px,20px) scale(0.97); }
}

/* ── WRAPPER ─────────────────────────────────────────────────── */
.site { position: relative; z-index: 2; }

/* ── NAVIGATION ─────────────────────────────────────────────── */
nav {
  position: fixed; top: 0; width: 100%; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 3.5rem;
  background: rgba(7,0,15,0.78);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
}
.nav-logo {
  font-family: 'Libre Baskerville', serif;
  font-size: 1.05rem; font-weight: 700;
  color: var(--white); text-decoration: none; cursor: none;
}
.nav-logo .dot { color: var(--gold); }
.nav-center { display: flex; gap: 2.6rem; }
.nav-center a {
  font-size: 0.77rem; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
  text-decoration: none; transition: color .2s; cursor: none;
}
.nav-center a:hover,
.nav-center a.active { color: var(--white); }
.nav-right { display: flex; align-items: center; gap: 1.1rem; }
.lang-pill {
  display: flex; border: 1px solid var(--border);
  border-radius: 100px; overflow: hidden;
  font-size: 0.72rem; font-weight: 600;
}
.lang-pill span {
  padding: 0.36rem 0.92rem; color: var(--muted); cursor: none;
  transition: background .2s, color .2s; letter-spacing: 0.07em;
}
.lang-pill span.on { background: var(--violet); color: var(--white); }
.mvp-badge {
  display: flex; align-items: center; gap: 0.42rem;
  background: linear-gradient(135deg, var(--gold), var(--gold-lt));
  color: var(--ink); border-radius: 100px;
  padding: 0.38rem 1.05rem; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}

/* ── HAMBURGER ───────────────────────────────────────────────── */
.nav-burger {
  display: none; flex-direction: column; gap: 5px;
  cursor: none; padding: 6px 4px; background: none; border: none; z-index: 210;
}
.nav-burger span {
  display: block; width: 22px; height: 1.5px; background: var(--muted);
  transition: transform .3s, opacity .3s, background .2s; transform-origin: center;
}
.nav-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); background: var(--white); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); background: var(--white); }

/* ── MOBILE DRAWER ───────────────────────────────────────────── */
.nav-mobile {
  display: none; position: fixed; top: 56px; left: 0; right: 0;
  background: rgba(7,0,15,0.97); backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border); z-index: 199;
  padding: 0.5rem 0 1rem; flex-direction: column;
}
.nav-mobile.open { display: flex; animation: slideDown .25s ease; }
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nav-mobile a {
  font-size: 0.84rem; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); text-decoration: none;
  padding: 0.9rem 1.6rem; border-bottom: 1px solid var(--border-lt);
  transition: color .2s, background .2s; text-align: right;
}
.nav-mobile a:last-child { border-bottom: none; }
.nav-mobile a:hover { color: var(--white); background: rgba(124,58,237,0.08); }

/* ── TYPOGRAPHIE — SYSTÈME UNIFIÉ ───────────────────────────── */

/* Niveau 1 — titres de pages (hero) */
.hero-title {
  font-family: 'Libre Baskerville', serif;
  font-size: clamp(2.4rem, 4vw, 4.2rem);
  font-weight: 700; line-height: 1.1; letter-spacing: -1.5px;
}

/* Niveau 2 — titres de sections */
.sec-title {
  font-family: 'Libre Baskerville', serif;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  font-weight: 700; line-height: 1.2; letter-spacing: -0.5px;
}

/* Niveau 3 — titres d'articles (pages article) */
.art-title {
  font-family: 'Libre Baskerville', serif;
  font-size: clamp(1.9rem, 3.2vw, 3.2rem);
  font-weight: 700; line-height: 1.1; letter-spacing: -1px;
  margin-bottom: 1.6rem;
}
.art-title em { font-style: italic; font-weight: 400; }

/* Niveau 4 — corps d'article : H2 et H3 */
.art-body h2 {
  font-family: 'Libre Baskerville', serif;
  font-size: 1.7rem; font-weight: 700;
  color: var(--white); margin: 2.5rem 0 1.2rem; line-height: 1.25;
}
.art-body h3 {
  font-family: 'Libre Baskerville', serif;
  font-size: 1.25rem; font-weight: 700;
  color: var(--white); margin: 2rem 0 1rem; line-height: 1.3;
}
.art-body p {
  font-size: 1rem; line-height: 1.85;
  color: var(--text-body); margin-bottom: 1.2rem;
}
.art-body strong { color: var(--white); font-weight: 600; }
.art-body em     { color: var(--mist); font-style: italic; }

/* ── ANIMATIONS COMMUNES ─────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── RESPONSIVE MOBILE — NAV ─────────────────────────────────── */
@media (max-width: 767px) {
  body    { cursor: auto; }
  #cur, #cur-ring { display: none; }
  nav     { padding: 0.95rem 1.4rem; }
  .nav-center { display: none; }
  .nav-right .mvp-badge { display: none; }
  .nav-right .lang-pill span { padding: 0.32rem 0.75rem; }
  .nav-burger { display: flex; }
}

/* --- Conferences CTA band --- */
.conf-cta-band {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 2.2rem 2.5rem;
  border: 1px solid rgba(201,168,76,0.35);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(124,58,237,0.08) 0%, rgba(201,168,76,0.06) 100%);
  backdrop-filter: blur(6px);
}
.conf-cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(201,168,76,0.04) 0%, transparent 60%);
  pointer-events: none;
}
.conf-cta-glow {
  position: absolute;
  top: -60px; left: -60px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,76,0.18) 0%, transparent 70%);
  pointer-events: none;
}
.conf-cta-left {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  flex: 1;
  min-width: 0;
}
.conf-cta-icon {
  font-size: 2.8rem;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 0 12px rgba(201,168,76,0.4));
}
.conf-cta-title {
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 700;
  color: var(--white);
  margin: 0 0 0.5rem;
  line-height: 1.25;
}
.conf-cta-sub {
  font-size: 0.9rem;
  color: var(--mist);
  line-height: 1.6;
  margin: 0;
  max-width: 560px;
}
.conf-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
  padding: 0.85rem 1.6rem;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--gold) 0%, #b8962e 100%);
  color: #1a1207;
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 20px rgba(201,168,76,0.35);
  transition: box-shadow .2s, transform .2s;
  white-space: nowrap;
}
.conf-cta-btn:hover {
  box-shadow: 0 6px 28px rgba(201,168,76,0.55);
  transform: translateY(-2px);
}
.conf-cta-arrow {
  font-size: 1.1rem;
  transition: transform .2s;
}
.conf-cta-btn:hover .conf-cta-arrow { transform: translateX(4px); }
@media(max-width:767px) {
  .conf-cta-band { flex-direction: column; align-items: flex-start; padding: 1.6rem 1.4rem; }
  .conf-cta-btn { width: 100%; justify-content: center; }
}