/* ==========================================================================
   Corvus — accueil (index.php)
   --------------------------------------------------------------------------
   DÉPEND DE, ET DOIT ÊTRE CHARGÉ APRÈS : theme.css, components.css, style.css.

   Chargé UNIQUEMENT par index.php : la home a une direction artistique qui lui
   est propre (constellation du Corbeau, wordmark en dégradé, séquence
   d'apparition chorégraphiée) et que rien d'autre ne réutilise. Toutes les
   classes sont préfixées `cx-` pour cette raison.

   HISTORIQUE : ces règles vivaient dans un <style> inline de 159 lignes au
   milieu d'index.php. Extraites ici — le CSS inline est interdit par la
   consigne, et un <style> en plein <body> n'est ni mis en cache, ni
   minifiable, ni trouvable quand on cherche d'où vient un style.
   ========================================================================== */

/* =========================================================================
   index.php — DA Corvus, version sobre / minimale / animée
   Styles scopés à la home (préfixe cx-) pour ne pas impacter les autres pages.
   ========================================================================= */

/* ---------- Hero ---------- */
.cx-hero{
  position:relative; overflow:hidden;
  padding:150px 0 120px; min-height:clamp(560px,88vh,880px);
  display:flex; align-items:center;
}
.cx-hero-in{position:relative; z-index:2}

/* Halo ambiant qui respire */
.cx-aura{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(640px 440px at 50% 36%, rgba(91,94,240,.17), transparent 66%);
}

/* Constellation du Corbeau (Corvus) — se dessine puis flotte */
.cx-cons{position:absolute; inset:0; z-index:0; pointer-events:none; display:flex; align-items:center; justify-content:center}
.cx-cons svg{width:min(760px,94%); height:auto; overflow:visible; opacity:.92}
.cx-cons line{
  stroke:rgba(139,141,255,.30); stroke-width:1; fill:none;
  stroke-dasharray:1; stroke-dashoffset:1;
  animation:cx-draw 1.1s var(--ease) forwards;
}
.cx-cons line:nth-of-type(1){animation-delay:.35s}
.cx-cons line:nth-of-type(2){animation-delay:.5s}
.cx-cons line:nth-of-type(3){animation-delay:.65s}
.cx-cons line:nth-of-type(4){animation-delay:.8s}
.cx-cons line:nth-of-type(5){animation-delay:.95s}
@keyframes cx-draw{to{stroke-dashoffset:0}}

.cx-star{
  fill:var(--accent-2); opacity:0;
  transform-box:fill-box; transform-origin:center;
  animation:cx-star .6s var(--ease) both;
}
.cx-star:nth-of-type(1){animation-delay:.5s}
.cx-star:nth-of-type(2){animation-delay:.62s}
.cx-star:nth-of-type(3){animation-delay:.74s}
.cx-star:nth-of-type(4){animation-delay:.86s}
.cx-star:nth-of-type(5){animation-delay:.98s}
.cx-star.bright{filter:drop-shadow(0 0 7px rgba(139,141,255,.9))}
@keyframes cx-star{0%{opacity:0; transform:scale(.2)}60%{opacity:1; transform:scale(1.25)}100%{opacity:.9; transform:scale(1)}}

.cx-eyebrow{
  font-family:var(--f-mono); text-transform:uppercase; letter-spacing:.24em;
  font-size:11.5px; color:var(--accent-2); margin-bottom:22px;
  opacity:0; animation:cx-up .7s var(--ease) .3s forwards;
}

/* Titre : montée ligne par ligne */
.cx-title{
  font-family:var(--f-display); font-weight:700; letter-spacing:-.03em; line-height:1.02;
  font-size:clamp(44px,8.4vw,88px); margin:0;
}
.cx-line{display:block; overflow:hidden; padding-bottom:.08em}
.cx-line > span{display:inline-block; transform:translateY(118%); animation:cx-rise .95s var(--ease) forwards}
.cx-line:nth-child(1) > span{animation-delay:.42s}
.cx-line:nth-child(2) > span{animation-delay:.56s}
@keyframes cx-rise{to{transform:none}}

/* Wordmark CORVUS */
.cx-wordmark{font-size:clamp(60px,15vw,168px); letter-spacing:.03em; line-height:.94}
.cx-wordmark > .cx-line > span{
  background:linear-gradient(180deg,#ffffff 0%,#dcdcf6 52%,var(--accent-2) 150%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 42px rgba(91,94,240,.22));
}

/* Tagline sous le wordmark */
.cx-tagline{
  font-family:var(--f-display); font-weight:500; letter-spacing:.005em;
  font-size:clamp(15px,2.4vw,22px); color:var(--text-2); margin-top:16px;
  opacity:0; animation:cx-up .7s var(--ease) .6s forwards;
}
.cx-tagline .accent{color:var(--accent-2)}

.cx-cta{
  display:flex; gap:13px; justify-content:center; flex-wrap:wrap; margin-top:38px;
  opacity:0; animation:cx-up .7s var(--ease) .78s forwards;
}
.cx-note{
  color:var(--muted); font-size:12.5px; margin-top:22px;
  font-family:var(--f-mono); letter-spacing:.02em;
  opacity:0; animation:cx-up .7s var(--ease) .92s forwards;
}
@keyframes cx-up{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}

/* Indicateur de scroll */
.cx-scroll{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
  opacity:0; animation:cx-up .7s var(--ease) 1.3s forwards;
}
.cx-scroll-line{width:1px; height:42px; background:linear-gradient(var(--accent-2),transparent); position:relative; overflow:hidden}
.cx-scroll-line::after{content:""; position:absolute; top:-40%; left:0; width:100%; height:40%; background:var(--accent-2); animation:cx-drip 1.9s var(--ease) infinite}
@keyframes cx-drip{0%{transform:translateY(0)}100%{transform:translateY(360%)}}

/* Mouvement ambiant (désactivé si l'utilisateur préfère moins d'animation) */
@media (prefers-reduced-motion:no-preference){
  .cx-aura{animation:cx-breathe 9s var(--ease) infinite}
  .cx-cons svg{animation:cx-float 15s var(--ease) infinite}
}
@keyframes cx-breathe{0%,100%{opacity:.8; transform:scale(1)}50%{opacity:1; transform:scale(1.05)}}
@keyframes cx-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ---------- Barre spec, discrète ---------- */
.cx-spec{border-block:1px solid var(--line-soft); background:var(--bg-2)}
.cx-spec-in{
  max-width:var(--maxw); margin:0 auto; padding:18px 28px;
  display:flex; justify-content:center; align-items:center; gap:12px 26px; flex-wrap:wrap;
  font-family:var(--f-mono); font-size:12.5px; color:var(--muted);
}
.cx-spec-in b{color:var(--text); font-weight:500}
.cx-spec .sep{color:var(--line); user-select:none}

/* ---------- Remplissage animé du mock dashboard ---------- */
.mock.reveal.in .mock-row{animation:cx-fill .55s var(--ease) both}
.mock.reveal.in .mock-row:nth-child(2){animation-delay:.08s}
.mock.reveal.in .mock-row:nth-child(3){animation-delay:.18s}
.mock.reveal.in .mock-row:nth-child(4){animation-delay:.28s}
.mock.reveal.in .mock-row:nth-child(5){animation-delay:.38s}
.mock.reveal.in .mock-save{animation:cx-fill .55s var(--ease) .5s both}
@keyframes cx-fill{from{opacity:0; transform:translateX(12px)}to{opacity:1; transform:none}}

/* ---------- Lien discret (comparatif) ---------- */
.cx-quiet-link{
  display:inline-flex; align-items:center; gap:7px; font-family:var(--f-mono);
  font-size:12.5px; letter-spacing:.02em; color:var(--muted);
  transition:color .18s var(--ease);
}
.cx-quiet-link:hover{color:var(--accent-2)}
.cx-quiet-link .ico{width:13px; height:13px}

/* ---------- Réglages fins ---------- */
.cx-section-head{max-width:560px; margin:0 auto 48px; text-align:center}
.cx-section-head .eyebrow{margin-bottom:14px}

@media (max-width:680px){
  .cx-hero{padding:118px 0 88px; min-height:auto}
  .cx-scroll{display:none}
  .cx-tagline{margin-top:12px}
}

/* ---------- Respect de prefers-reduced-motion ---------- */
@media (prefers-reduced-motion:reduce){
  .cx-cons line{stroke-dashoffset:0; animation:none}
  .cx-star{opacity:.9; animation:none}
  .cx-eyebrow,.cx-tagline,.cx-cta,.cx-note,.cx-scroll{opacity:1; animation:none}
  .cx-line > span{transform:none; animation:none}
  .cx-scroll-line::after{display:none}
  .mock.reveal.in .mock-row,.mock.reveal.in .mock-save{animation:none}
}

/* Note sous le CTA final. Anciennement un style="margin-top:22px" inline. */
.cx-cta-note{margin-top:var(--s-5)}
