/* ═══════════════════════════════════════════════════════════════
   INK.STUDIO — Design System unifié (brand.css)
   Une seule source de vérité : palette, typo, composants, animations.
   Chargé APRÈS le CSS de la page → les tokens :root gagnent partout.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Palette officielle (noir & argent premium — zéro violet) ── */
  --bg:           #080808;
  --bg-card:      #0f0f0f;
  --bg-input:     #0c0c0c;
  --silver:       #cfd2dc;
  --silver-dim:   #6a6e7e;
  --silver-glow:  rgba(207,210,220,0.08);
  --dim:          #cdced5;
  --text:         #f6f6f9;
  --text-muted:   #9a9daa;
  --muted:        #dddee4;
  --border:       #191919;
  --border-m:     #242424;
  --border-hover: #34343e;
  --green:        #34d399;
  --error:        #f87171;

  /* ── Typo officielle ── */
  --font-display: 'Cormorant Garamond', Georgia, serif;   /* titres d'émotion */
  --font-ui:      'Syne', system-ui, sans-serif;           /* titres UI / boutons */
  --font-body:    'Inter', system-ui, sans-serif;          /* texte */

  /* ── Rythme d'animation (la signature "fluide") ── */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);           /* décélération luxe */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);        /* léger rebond */
  --dur-fast:    0.35s;
  --dur-med:     0.7s;
  --dur-slow:    1.1s;
}

/* ═══ REVEALS AU SCROLL ═══
   Usage : class="rv" (fade-up) · variantes rv-left / rv-right / rv-scale
   Stagger : sur le PARENT → data-stagger (les enfants .rv se suivent). */
.rv, .rv-left, .rv-right, .rv-scale {
  opacity: 0;
  transition:
    opacity var(--dur-med) var(--ease-out),
    transform var(--dur-med) var(--ease-out),
    filter var(--dur-med) var(--ease-out);
  transition-delay: var(--rv-delay, 0s);
  will-change: opacity, transform;
}
.rv        { transform: translateY(26px); filter: blur(4px); }
.rv-left   { transform: translateX(-32px); filter: blur(4px); }
.rv-right  { transform: translateX(32px);  filter: blur(4px); }
.rv-scale  { transform: scale(0.94) translateY(12px); filter: blur(4px); }
.rv.in, .rv-left.in, .rv-right.in, .rv-scale.in {
  opacity: 1; transform: none; filter: blur(0);
}

/* ═══ RÉSULTAT DE GÉNÉRATION — apparition "wow" ═══ */
@keyframes resultIn {
  0%   { opacity: 0; transform: scale(0.96) translateY(14px); filter: blur(10px) brightness(1.6); }
  60%  { filter: blur(0) brightness(1.15); }
  100% { opacity: 1; transform: none; filter: blur(0) brightness(1); }
}
.result-in { animation: resultIn 0.9s var(--ease-out) both; }

/* ═══ SKELETON SHIMMER (chargements) ═══ */
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.skeleton {
  position: relative; overflow: hidden; border-radius: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-m);
}
.skeleton::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(207,210,220,0.055) 50%, transparent 70%);
  background-size: 400px 100%;
  animation: shimmer 1.6s linear infinite;
}

/* ═══ ÉTAT DE GÉNÉRATION — halo respirant ═══ */
@keyframes breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(207,210,220,0.10), 0 0 42px rgba(207,210,220,0.05) inset; }
  50%      { box-shadow: 0 0 0 6px rgba(207,210,220,0.03), 0 0 68px rgba(207,210,220,0.10) inset; }
}
.generating { animation: breathe 2.2s ease-in-out infinite; }

/* ═══ BOUTONS — micro-interactions communes ═══ */
.btn, button.btn, a.btn {
  transition: transform var(--dur-fast) var(--ease-spring),
              box-shadow var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}
.btn:hover:not(:disabled)  { transform: translateY(-2px); }
.btn:active:not(:disabled) { transform: translateY(0) scale(0.985); transition-duration: 0.08s; }

/* Shine balayé sur les CTA primaires (blanc) */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::before {
  content: ''; position: absolute; top: 0; bottom: 0; width: 46%;
  left: -70%; transform: skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  transition: left 0.65s var(--ease-out);
  pointer-events: none;
}
.btn-shine:hover::before { left: 130%; }

/* ═══ CARTES — hover lift subtil ═══ */
.card-lift {
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.card-lift:hover {
  transform: translateY(-4px);
  border-color: var(--border-hover);
  box-shadow: 0 18px 48px rgba(0,0,0,0.5), 0 0 0 1px rgba(207,210,220,0.05) inset;
}

/* ═══ IMAGES RÉSULTAT — zoom doux au survol ═══ */
.img-zoom { overflow: hidden; border-radius: 14px; }
.img-zoom img { transition: transform 0.8s var(--ease-out); display: block; }
.img-zoom:hover img { transform: scale(1.03); }

/* ═══ SPINNER premium (points en respiration) ═══ */
@keyframes dotPulse { 0%, 80%, 100% { opacity: 0.25; transform: scale(0.85); } 40% { opacity: 1; transform: scale(1); } }
.dots { display: inline-flex; gap: 5px; align-items: center; }
.dots i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--silver); display: inline-block;
  animation: dotPulse 1.3s ease-in-out infinite;
}
.dots i:nth-child(2) { animation-delay: 0.18s; }
.dots i:nth-child(3) { animation-delay: 0.36s; }

/* ═══ BARRE DE PROGRESSION indéterminée ═══ */
@keyframes progSlide { 0% { left: -35%; } 100% { left: 105%; } }
.progress-line { position: relative; height: 2px; background: var(--border-m); border-radius: 2px; overflow: hidden; }
.progress-line::after {
  content: ''; position: absolute; top: 0; height: 100%; width: 32%; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--silver), transparent);
  animation: progSlide 1.4s var(--ease-out) infinite;
}

/* ═══ NAV — souligné qui pousse depuis la gauche ═══ */
.nav-links a { position: relative; }
.nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: -5px;
  width: 100%; height: 1px; background: var(--silver);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }

/* ═══ TILT 3D léger (class="tilt" — activé par brand.js, desktop uniquement) ═══ */
.tilt { transform-style: preserve-3d; will-change: transform; }

/* ═══ Balayage lumineux des grands titres au reveal (class="title-shine") ═══ */
.title-shine.visible, .title-shine.in {
  background-image: linear-gradient(110deg, currentColor 42%, #ffffff 50%, currentColor 58%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: titleSweep 1.4s var(--ease-out) 0.35s 1 both;
}
@keyframes titleSweep { from { background-position: 120% 0; } to { background-position: -30% 0; } }
@media (prefers-reduced-motion: reduce) { .title-shine.visible, .title-shine.in { animation: none; -webkit-text-fill-color: currentColor; background: none; } }

/* ═══ ERREURS — shake bref (feedback immédiat) ═══ */
@keyframes shakeX {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); } 40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); } 80% { transform: translateX(3px); }
}
.status.error { animation: shakeX 0.45s var(--ease-out); }

/* ═══ FOCUS accessibles (clavier) ═══ */
:focus-visible { outline: 2px solid rgba(207,210,220,0.55); outline-offset: 3px; border-radius: 6px; }

/* ═══ TRANSITIONS ENTRE PAGES (View Transitions API — cross-fade doux) ═══
   Progressive enhancement : navigateurs non compatibles = navigation classique. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtOut 0.28s ease both; }
::view-transition-new(root) { animation: vtIn 0.38s ease both; }
@keyframes vtOut { to { opacity: 0; } }
@keyframes vtIn  { from { opacity: 0; } }

/* ═══ SCROLLBAR custom (signature noir & argent) ═══ */
* { scrollbar-width: thin; scrollbar-color: #2e2e36 transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #34343e, #232329);
  border-radius: 8px; border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: #4a4a56; }

/* ═══ SÉLECTION de texte (argent sur noir) ═══ */
::selection { background: rgba(207,210,220,0.85); color: #0a0a0e; }

/* ═══ ACCESSIBILITÉ — réduit tout si demandé ═══ */
@media (prefers-reduced-motion: reduce) {
  .rv, .rv-left, .rv-right, .rv-scale { opacity: 1; transform: none; filter: none; transition: none; }
  .result-in, .skeleton::after, .generating, .dots i, .progress-line::after { animation: none; }
  * { scroll-behavior: auto !important; }
}