/* =============================================================================
   LOGUETOWN — Ma Vitrine refinement (2026)
   Élève le dashboard vitrine (vit-*) au langage « maison de vente » établi sur
   la fiche dossier : accents champagne, chiffres serif, hairlines gravées,
   eyebrows à tiret, contrôles en pills, shine sur le CTA.

   ADDITIF — chargé après vitrine-cinematic.css / ma-vitrine-polish.css.
   Scopé .vit-layout. Réutilise les tokens lt26 (--champagne / --line).
   ============================================================================= */

.vit-layout{
  --vit-champ:var(--champagne,#c8a04a);
  --vit-champ-l:var(--gl-gold-l,#f0c842);
  --vit-hair:var(--line,rgba(200,160,74,.16));
  --vit-hair-2:var(--line-strong,rgba(200,160,74,.34));
  --vit-ease:cubic-bezier(.22,1,.36,1);
}

/* -----------------------------------------------------------------------------
   1. Eyebrows gravés (tiret champagne d'amorce) — cohérence avec le dossier
   ----------------------------------------------------------------------------- */
.vit-layout .lt26-eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  letter-spacing:.26em; color:var(--vit-champ);
}
.vit-layout .vit-hero__title .lt26-eyebrow::before,
.vit-layout .vit-act__head .lt26-eyebrow::before,
.vit-layout .vit-ins__top .lt26-eyebrow::before{
  content:""; width:20px; height:1px; background:var(--vit-champ); display:inline-block; flex-shrink:0;
}

/* -----------------------------------------------------------------------------
   2. Stat cards — filet champagne en tête + chiffres serif premium
   ----------------------------------------------------------------------------- */
.vit-layout .vit-stat{ position:relative; overflow:hidden; }
.vit-layout .vit-stat::before{
  content:""; position:absolute; top:0; left:16%; right:16%; height:1px;
  background:linear-gradient(90deg,transparent,var(--vit-hair-2),transparent);
  opacity:.7;
}
.vit-layout .vit-stat__num{
  font-family:var(--lt-font-display,"Fraunces",Cinzel,serif);
  letter-spacing:-.02em; line-height:1;
}
.vit-layout .vit-stat__label{
  font-family:var(--f-label,Cinzel,serif);
  font-size:.58rem; letter-spacing:.22em; text-transform:uppercase; opacity:.7;
}
.vit-layout .vit-stat__delta--champ{ color:var(--vit-champ); }

/* -----------------------------------------------------------------------------
   3. Hero — titre display + sous-titre respirant
   ----------------------------------------------------------------------------- */
.vit-layout .vit-hero__h1{ letter-spacing:-.025em; }
.vit-layout .vit-hero__sub{ max-width:60ch; opacity:.85; }

/* -----------------------------------------------------------------------------
   4. CTA coral — balayage de lumière champagne au survol
   ----------------------------------------------------------------------------- */
.vit-layout .lt26-btn--coral{ position:relative; overflow:hidden; isolation:isolate; }
.vit-layout .lt26-btn--coral::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.32) 50%,transparent 70%);
  transform:translateX(-130%); transition:transform .75s var(--vit-ease);
}
.vit-layout .lt26-btn--coral:hover::after{ transform:translateX(130%); }
.vit-layout .lt26-btn--coral>*{ position:relative; z-index:2; }

/* -----------------------------------------------------------------------------
   5. Premium showcase — contrôles en pills raffinées + filet de tête
   ----------------------------------------------------------------------------- */
.vit-layout .vit-premium{ position:relative; }
.vit-layout .vit-premium__head{ position:relative; }
.vit-layout .vit-premium__ctl{
  border-radius:999px;
  border:1px solid var(--vit-hair-2);
  transition:background .25s var(--vit-ease),border-color .25s var(--vit-ease),
             color .25s var(--vit-ease),transform .2s var(--vit-ease);
}
.vit-layout .vit-premium__ctl:hover{
  background:rgba(200,160,74,.1); border-color:var(--vit-champ);
  color:var(--vit-champ-l); transform:translateY(-1px);
}
.vit-layout .vit-premium__ctl--primary{
  background:linear-gradient(135deg,var(--vit-champ-l),#b8860b)!important;
  color:#0a0f1a!important; border-color:transparent!important; font-weight:700;
}
.vit-layout .vit-premium__ctl--primary:hover{ filter:brightness(1.05); }
.vit-layout .vit-premium__pill{
  color:var(--mv-text,#e8e0d0)!important;
  border-color:var(--mv-line-strong,rgba(212,160,23,.38))!important;
  transition:background .2s var(--vit-ease),border-color .2s var(--vit-ease),color .2s var(--vit-ease);
}
.vit-layout .vit-premium__pill:hover{ border-color:var(--mv-gold,#d4a017)!important; color:var(--mv-gold-2,#f0c842)!important; }
/* Pill active : fond or plein + texte sombre (haute lisibilité, les 2 thèmes) */
.vit-layout .vit-premium__pill.is-active{
  background:linear-gradient(135deg,var(--mv-gold-2,#f0c842),#b8860b)!important;
  border-color:transparent!important;
  color:#0a0f1a!important;
  font-weight:700;
}

/* -----------------------------------------------------------------------------
   5b. CONTRASTE TYPO du panneau — libellés/champs remis sur tokens thème-aware
        (corrige le gris pâle hérité de --lt26-ink-mute, illisible en clair)
   ----------------------------------------------------------------------------- */
.vit-layout .vit-premium__label,
.vit-layout .vit-premium__field-k,
.vit-layout .vit-premium__panel-sub,
.vit-layout .vit-premium__kicker,
.vit-layout .vit-premium__meta,
.vit-layout .vit-premium__controls-right,
.vit-layout .vit-premium__panel-head .lt26-mono,
.vit-layout .vit-premium__panel .lt26-mono--meta{
  color:var(--mv-soft,rgba(232,224,208,.72))!important;
  opacity:1!important;
}
.vit-layout .vit-premium__label{ font-weight:600; }
.vit-layout .vit-premium__input,
.vit-layout .vit-premium__textarea{ color:var(--mv-text,#e8e0d0)!important; }
.vit-layout .vit-premium__input::placeholder,
.vit-layout .vit-premium__textarea::placeholder{ color:var(--mv-muted,rgba(232,224,208,.5))!important; }

/* -----------------------------------------------------------------------------
   6. Stage — cadre plus « monté », halo doux
   ----------------------------------------------------------------------------- */
.vit-layout .vit-premium__stage{
  box-shadow:0 30px 70px -30px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.04);
  border:1px solid var(--vit-hair);
}

/* -----------------------------------------------------------------------------
   7. Activity + Insights — surfaces cohérentes, filet de tête, hover
   ----------------------------------------------------------------------------- */
.vit-layout .vit-act,
.vit-layout .vit-ins{ position:relative; overflow:hidden; transition:border-color .3s var(--vit-ease),box-shadow .3s var(--vit-ease); }
.vit-layout .vit-act::before,
.vit-layout .vit-ins::before{
  content:""; position:absolute; top:0; left:24px; right:24px; height:1px;
  background:linear-gradient(90deg,transparent,var(--vit-hair-2),transparent); opacity:.6;
}
.vit-layout .vit-act:hover,
.vit-layout .vit-ins:hover{ border-color:var(--vit-hair-2); box-shadow:0 24px 50px -28px rgba(0,0,0,.6); }
.vit-layout .vit-act__all{
  font-family:var(--f-label,Cinzel,serif); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--vit-champ); text-decoration:none; transition:color .25s var(--vit-ease);
}
.vit-layout .vit-act__all:hover{ color:var(--vit-champ-l); }
.vit-layout .vit-act__dot{
  border:1px solid var(--vit-hair-2); background:rgba(200,160,74,.08); border-radius:50%;
}
.vit-layout .vit-ins__num{ font-family:var(--lt-font-display,"Fraunces",serif); letter-spacing:-.02em; }

/* -----------------------------------------------------------------------------
   8. Sidebar — item actif raffiné (cohérence dossier)
   ----------------------------------------------------------------------------- */
.vit-layout .vitrine-side__item{ transition:background .2s var(--vit-ease),color .2s var(--vit-ease); }
.vit-layout .vitrine-side__item.is-active{ color:var(--vit-champ-l); }
.vit-layout .vitrine-side__indicator{ background:var(--vit-champ); box-shadow:0 0 10px rgba(212,160,23,.5); }
.vit-layout .vitrine-side__avatar-ring{ border-color:var(--vit-champ); opacity:.4; }
.vit-layout .vitrine-side__bar-fill{ background:linear-gradient(90deg,var(--vit-champ),var(--vit-champ-l)); }

/* -----------------------------------------------------------------------------
   9. Section divider — filet champagne entre showcase et grille activité
   ----------------------------------------------------------------------------- */
.vit-layout .vit-grid{ position:relative; padding-top:clamp(1.5rem,3vw,2.5rem); }
.vit-layout .vit-grid::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--vit-hair-2),transparent);
}

/* -----------------------------------------------------------------------------
   10. Reduced motion
   ----------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .vit-layout .lt26-btn--coral::after{ transition:none!important; }
  .vit-layout .vit-premium__ctl:hover,
  .vit-layout .vit-act:hover,
  .vit-layout .vit-ins:hover{ transform:none!important; }
}
