/* Karka — styles propres à templates/verificateur/index.html.twig (bloc 2).
 * Sortis du gabarit le 11/09/2026 (audit SEO) : servis par AssetMapper avec
 * empreinte et cache long, au lieu d'être réinjectés dans chaque réponse. Le
 * <link> reste à la place exacte de l'ancien <style> : même ordre de cascade. */

/* ── Overlay plein écran : centré sur le viewport, AUCUN scroll requis.
   (le parent .wizard-panel.hidden est en display:none → l'overlay,
   pourtant en fixed, disparaît avec lui — retour arrière sur erreur ok) ── */
.vz-load { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px;
  background:
    linear-gradient(rgba(255,255,255,0.84), rgba(255,255,255,0.93)),
    linear-gradient(var(--plan-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--plan-grid) 1px, transparent 1px);
  background-size: auto, 36px 36px, 36px 36px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: vz-fade .3s ease both; }
.vz-card { position: relative; overflow: hidden; display: flex; gap: 38px; align-items: center; justify-content: center; flex-wrap: wrap;
  background: rgba(255,255,255,0.92); border: 1px solid var(--border); border-radius: 24px; padding: 40px 44px 36px;
  box-shadow: 0 24px 80px rgba(12,12,20,0.16), 0 2px 10px rgba(12,12,20,0.05);
  max-width: 800px; animation: vz-rise .45s cubic-bezier(.2, .9, .3, 1) both; }
/* Barre de progression indéterminée, en tête de carte */
.vz-bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--v-pale); overflow: hidden; }
.vz-bar::after { content: ''; position: absolute; inset: 0; width: 42%; border-radius: 3px;
  background: linear-gradient(90deg, var(--v), var(--v-mid)); animation: vz-sweep 1.6s ease-in-out infinite; }
@keyframes vz-sweep { 0% { transform: translateX(-110%); } 60% { transform: translateX(240%); } 100% { transform: translateX(240%); } }
@keyframes vz-rise { from { transform: translateY(16px) scale(.97); opacity: 0; } }
@keyframes vz-fade { from { opacity: 0; } }
.vz-plan { flex-shrink: 0; width: 300px; border: 1.5px solid var(--ink); border-radius: 6px; background: var(--white); box-shadow: 0 10px 34px rgba(12,12,20,0.12); }
.vz-plan svg { display: block; width: 100%; height: auto; }
.vz-copy { max-width: 400px; text-align: left; }
.vz-kicker { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--v); }
.vz-kicker::before { content: ''; display: inline-block; width: 22px; height: 1px; background: var(--v); vertical-align: 4px; margin-right: 10px; }
.vz-copy h3 { font-family: var(--font-head); font-size: 24px; font-weight: 800; letter-spacing: -0.6px; margin: 10px 0 8px; }
.vz-copy > p { font-size: 14.5px; color: var(--ink-60); line-height: 1.55; margin: 0 0 22px; }
/* Déroulé documentaire : filets, index mono — pas de boîtes colorées */
/* Barre de progression — mêmes codes que le reste de la planche :
   rail discret, remplissage en dégradé indigo, valeurs en monospace. */
.vz-prog { margin: 18px 0 6px; }
.vz-prog-head { margin-bottom: 8px; }
.vz-prog-head span { font-size: 13px; color: var(--ink-60); line-height: 1.45; }
/* Rail épais : le pourcentage vit DANS la barre, aligné sur son bord
   droit — il avance avec le remplissage au lieu d'être posé à côté. */
.vz-prog-rail { height: 24px; border-radius: 100px; background: var(--off);
  border: 1px solid var(--border); overflow: hidden; padding: 0; }
.vz-prog-fill { height: 100%; border-radius: 100px;
  background: linear-gradient(90deg, var(--v), var(--v-mid));
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 10px;
  /* Largeur plancher : sans elle, « 3 % » déborderait d'un remplissage
     de quelques pixels au démarrage. Le décalage vaut trois points de
     pourcentage au pire, et seulement sur les premières secondes. */
  min-width: 48px;
  /* La transition porte l'interpolation entre deux paliers : sans elle,
     la barre avancerait par à-coups de 2 secondes. */
  transition: width .45s ease-out; }
.vz-prog-fill b { font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  color: #fff; font-variant-numeric: tabular-nums; letter-spacing: 0.3px;
  text-shadow: 0 1px 2px rgba(12,12,20,0.25); }
@media (prefers-reduced-motion: reduce) { .vz-prog-fill { transition: none; } }

.vz-steps .loading-step { background: none; border: none; border-top: 1px solid var(--border); border-radius: 0; padding: 12px 2px; gap: 12px; font-size: 13.5px; color: var(--ink-35); }
.vz-steps .loading-step:last-child { border-bottom: 1px solid var(--border); }
.vz-steps .loading-step--active { color: var(--ink); font-weight: 600; }
.vz-steps .loading-step--done { color: var(--ink-60); background: none; }
.vz-steps .loading-step-icon { width: 24px; height: 24px; font-family: var(--font-mono); }
.vz-steps .loading-step-icon--pending { background: var(--off); border: 1px solid var(--border); color: var(--ink-35); font-size: 11px; }
.vz-steps .loading-step--done .loading-step-icon { background: var(--green); color: #fff; font-size: 12px; }
.vz-steps .src { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.6px; color: var(--ink-35); margin-top: 2px; font-weight: 400; }

/* ── Animation de la planche : cycle 5,2 s, en boucle ── */
.vz-plan .a { animation-duration: 5.2s; animation-iteration-count: infinite; animation-timing-function: linear; animation-fill-mode: both; }
.vz-pen { offset-path: path('M38 128 L92 28 L232 44 L250 132 L118 152 Z'); animation-name: vz-pen; }
@keyframes vz-pen { 0% { offset-distance: 0%; opacity: 1; } 26% { offset-distance: 100%; opacity: 1; } 29% { opacity: 0; } 100% { offset-distance: 100%; opacity: 0; } }
.vz-parcel { animation-name: vz-parcel; }
@keyframes vz-parcel { 0% { opacity: 0; } 2% { opacity: 1; } 90% { opacity: 1; } 97% { opacity: 0; } 100% { opacity: 0; } }
.vz-env { animation-name: vz-env; }
@keyframes vz-env { 0%, 30% { opacity: 0; } 38% { opacity: 1; } 90% { opacity: 1; } 97%, 100% { opacity: 0; } }
.vz-bati { animation-name: vz-bati; }
@keyframes vz-bati { 0%, 42% { opacity: 0; } 50% { opacity: 1; } 90% { opacity: 1; } 97%, 100% { opacity: 0; } }
.vz-cote { animation-name: vz-cote; }
@keyframes vz-cote { 0%, 54% { opacity: 0; } 61% { opacity: 1; } 90% { opacity: 1; } 97%, 100% { opacity: 0; } }
.vz-north { animation-name: vz-north; }
@keyframes vz-north { 0%, 64% { opacity: 0; } 70% { opacity: 1; } 90% { opacity: 1; } 97%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .vz-plan .a { animation: none; opacity: 1; }
  .vz-pen { display: none; }
  .vz-load, .vz-card { animation: none; }
  .vz-bar::after { animation: none; width: 100%; }
}
/* Doit tenir SANS scroll sur petits écrans (hauteur comprise) */
@media (max-width: 760px) { .vz-card { gap: 22px; padding: 28px 24px 24px; } .vz-plan { width: min(300px, 72vw); } }
@media (max-height: 720px) {
  .vz-plan { width: 220px; }
  .vz-card { gap: 26px; padding: 26px 30px 24px; }
  .vz-copy h3 { font-size: 20px; margin: 8px 0 6px; }
  .vz-copy > p { margin-bottom: 12px; }
  .vz-steps .loading-step { padding: 8px 2px; font-size: 12.5px; }
}
@media (max-height: 560px) { .vz-plan { display: none; } }