/* ==========================================================================
   Tellyah — main.css
   ADN visuel : bleus profonds inspirés du cosmos + accents dorés lumineux.
   Ambiance nightblue de l'app, accent chaud orange (Accent.Primary) qui
   glisse vers le doré (Profiles.Glow) pour les halos et lueurs. La DA
   produit reste teasée sans être révélée (pas de 19 genres, pas de 4
   profils) — seule la dimension émotionnelle, cœur de la marque, affleure.
   ========================================================================== */

:root {
  /* Fonds — alignés sur AppColors.Tellyah.NightBlue / Default (app KMP) */
  --bg-night:  #0A0F2C;
  --bg-deep:   #12183A;

  /* Surfaces */
  --card:      rgba(255, 255, 255, 0.045);
  --card-hi:   rgba(255, 255, 255, 0.075);
  --stroke:    rgba(255, 255, 255, 0.10);
  --stroke-hi: rgba(255, 255, 255, 0.18);

  /* Texte */
  --text:      rgba(255, 255, 255, 0.96);
  --muted:     rgba(255, 255, 255, 0.66);
  --subtle:    rgba(255, 255, 255, 0.42);

  /* Accent chaud — Accent.Primary de l'app */
  --accent:    #FF9100;
  --accent-hi: #FFA733;
  --accent-ink:#1a0a00;

  /* Doré lumineux — Profiles.Glow de l'app, pour halos et mots-clés */
  --gold:      #FFCC33;
  --gold-soft: #FFEE99;
  --grad-warm: linear-gradient(92deg, var(--accent) 0%, var(--gold) 100%);

  /* Métriques */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 100px;
  --shadow-sm: 0 6px 24px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 18px 48px rgba(0, 0, 0, 0.45);
  --shadow-accent: 0 10px 30px rgba(255, 145, 0, 0.25);
  --shadow-gold: 0 12px 40px rgba(255, 178, 26, 0.32);

  /* Typo — Fraunces (variable) pour les displays, Inter pour le body */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --font-display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono", "Courier New", monospace;
}

/* Reset */
*, *::before, *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  margin: 0;
  padding: 0;
  width: 100%;
  /* `clip` coupe le débordement horizontal (hero full-bleed) SANS créer de
     conteneur de scroll — indispensable pour que le header sticky colle.
     `hidden` reste en fallback pour les navigateurs sans `clip`. */
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  width: 100%;
  font-family: var(--font-sans);
  color: var(--text);
  line-height: 1.6;
  background: linear-gradient(180deg, var(--bg-night) 0%, var(--bg-deep) 100%);
  overflow-x: hidden;
  overflow-x: clip;
  position: relative;
}

/* Halo de fond très discret — accent chaud qui tire vers le doré */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(900px 700px at 15% -10%, rgba(255, 178, 26, 0.07), transparent),
    radial-gradient(700px 600px at 85% 110%, rgba(255, 145, 0, 0.045), transparent);
  z-index: -1;
  pointer-events: none;
}

/* Sélection de texte — lueur dorée */
::selection {
  background: rgba(255, 204, 51, 0.28);
  color: #fff;
}

/* ==========================================================================
   Champ d'étoiles — deux couches fixes qui scintillent en alternance.
   Léger : uniquement des radial-gradients + une animation d'opacité.
   ========================================================================== */

.stars,
.stars::before {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

.stars {
  opacity: 0.5;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(255, 255, 255, 0.32), transparent),
    radial-gradient(1.5px 1.5px at 46% 16%, rgba(255, 255, 255, 0.26), transparent),
    radial-gradient(1px 1px at 78% 40%, rgba(255, 255, 255, 0.22), transparent),
    radial-gradient(1px 1px at 30% 58%, rgba(255, 238, 153, 0.20), transparent),
    radial-gradient(1.5px 1.5px at 90% 12%, rgba(255, 255, 255, 0.24), transparent);
  animation: stars-twinkle 7s ease-in-out infinite;
}

/* Deuxième couche, déphasée — donne l'impression d'un ciel vivant */
.stars::before {
  content: "";
  background-image:
    radial-gradient(1px 1px at 22% 80%, rgba(255, 255, 255, 0.22), transparent),
    radial-gradient(1px 1px at 58% 34%, rgba(255, 238, 153, 0.18), transparent),
    radial-gradient(1.5px 1.5px at 68% 64%, rgba(255, 255, 255, 0.26), transparent),
    radial-gradient(1px 1px at 8% 44%, rgba(255, 255, 255, 0.20), transparent),
    radial-gradient(1px 1px at 84% 86%, rgba(255, 255, 255, 0.22), transparent);
  animation: stars-twinkle 9s ease-in-out infinite reverse;
}

@keyframes stars-twinkle {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.85; }
}

@media (max-width: 767px) {
  .stars { opacity: 0.38; }
}

/* Typography */
h1, h2, h3, h4 {
  margin: 0;
  color: var(--text);
  font-weight: 600;
  letter-spacing: -0.015em;
}

h1 {
  font-family: var(--font-display);
  font-weight: 600;
  /* Fraunces variable : on pousse opsz à 144 (display), SOFT à 50 pour un
     rendu éditorial "squishy" modéré, WONK à 0 pour rester lisible. */
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 0;
  font-size: clamp(48px, 8vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.025em;
}

h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: "opsz" 96, "SOFT" 30, "WONK" 0;
  font-size: clamp(28px, 3.5vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h3 {
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.3;
  font-weight: 600;
}

p {
  margin: 0;
  color: var(--muted);
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color .2s ease;
}

a:hover {
  color: var(--accent-hi);
}

/* Carte / panel commun */
.card {
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

@media (min-width: 768px) {
  .card {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

/* Boutons — 1 primaire accent, 1 secondaire ghost */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;
  user-select: none;
}

.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.btn-primary {
  position: relative;
  background: var(--grad-warm);
  color: var(--accent-ink);
  border-color: rgba(255, 178, 26, 0.55);
  box-shadow: var(--shadow-accent);
}

.btn-primary:hover {
  color: var(--accent-ink);
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold);
  filter: brightness(1.06);
}

/* Variante large pour les CTA de fin de page */
.btn-lg {
  padding: 17px 32px;
  font-size: 16px;
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--stroke-hi);
}

.btn-ghost:hover {
  background: var(--card-hi);
  color: var(--text);
}

.btn-disabled,
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.6;
}

.btn-disabled:hover,
.btn[aria-disabled="true"]:hover {
  transform: none;
}

/* Navigation minimale — sticky, se vitrifie au scroll (classe .scrolled
   posée par home.js) */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  transition: background .35s ease, border-color .35s ease,
              backdrop-filter .35s ease;
  border-bottom: 1px solid transparent;
}

header.scrolled {
  background: rgba(10, 15, 44, 0.72);
  border-bottom-color: var(--stroke);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  max-width: 1200px;
  margin: 0 auto;
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 13px;
}

.nav-brand img {
  width: 28px;
  height: 28px;
}

/* Footer commun */
footer {
  text-align: center;
  color: var(--subtle);
  font-size: 12px;
  padding: 40px 0 24px;
  margin-top: 60px;
  border-top: 1px solid var(--stroke);
}

.footer-links {
  margin-top: 10px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.footer-links a {
  color: var(--muted);
  text-decoration: none;
  transition: color .2s ease;
}

.footer-links a:hover {
  color: var(--accent);
}

.footer-separator {
  color: var(--stroke);
}

/* Accessibility — skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: -1;
}

.skip-link:focus {
  position: fixed;
  top: 12px;
  left: 12px;
  width: auto;
  height: auto;
  padding: 10px 16px;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--radius-sm);
  z-index: 1000;
}

/* Utilitaire mono */
.mono {
  font-family: var(--font-mono);
}

/* Visible uniquement des lecteurs d'écran */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Reveal au scroll — progressif et accessible.
   Ne s'active que si JS est présent (home.js pose .js sur <html>) :
   sans JS, tout le contenu reste visible. IntersectionObserver ajoute
   .is-visible ; --reveal-delay permet de séquencer une grappe d'éléments.
   ========================================================================== */

html.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity .7s ease,
    transform .7s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--reveal-delay, 0s);
}

html.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.js .reveal {
    opacity: 1;
    transform: none;
  }
}

/* Respect du prefers-reduced-motion — durées ET délais neutralisés,
   sinon les entrées séquencées (animation-delay) feraient "apparaître"
   les blocs un à un même sans mouvement. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}