/* Karka — styles propres à templates/verificateur/index.html.twig (bloc 1).
 * 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. */

/* Tooltip de survol des parcelles (carte étape 3) : référence + surface */
.leaflet-tooltip.parcel-tip { background: rgba(12,12,20,0.9); border: none; border-radius: 8px; box-shadow: 0 6px 28px rgba(12,12,20,0.18); padding: 5px 11px; }
.leaflet-tooltip.parcel-tip::before { display: none; }
.parcel-tip .parcel-tip-ref { display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.8px; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.parcel-tip .parcel-tip-m2 { display: block; font-family: var(--font-mono); font-size: 13.5px; font-weight: 700; color: #fff; }

/* ══ Vérificateur — « planche d'instruction » ═══════════════════
   Le formulaire est présenté comme une planche de dossier : en-tête
   sur grille architecturale, stepper en ligne de cote, feuille de
   travail avec cartouche d'étape et repères d'angle. ── */

/* ── En-tête : composition éditoriale + cartouche de dossier ──
   Même vocabulaire que la page résultats (rz-cartouche) : le vérificateur
   OUVRE le dossier que la page résultats restitue. */
/* ⚠ MARGES VOLONTAIREMENT COURTES. Cette page n'a qu'un seul rôle : faire
   démarrer l'outil. Mesuré avant correction — le champ « commune » tombait à
   696 px du haut, donc SOUS la ligne de flottaison d'un portable courant : on
   arrivait sur le vérificateur sans voir le vérificateur. L'en-tête a été
   réduit et le cartouche de specs déplacé SOUS l'outil (voir plus bas).
   Ne pas regonfler ces valeurs sans remesurer la position du champ. */
.vf-hero { position: relative; overflow: hidden; padding: 30px 0 0; background: var(--white); }
.vf-hero .arch-grid { mask-image: linear-gradient(180deg, black 20%, transparent 96%); -webkit-mask-image: linear-gradient(180deg, black 20%, transparent 96%); }
.vf-hero .container { position: relative; z-index: 1; }
.vf-kicker { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.vf-kicker .sec-label { margin-bottom: 0; }
.vf-compass { flex-shrink: 0; opacity: .85; }
/* Titre volontairement plus petit que sur les pages de contenu : il doit
   nommer la page, pas occuper l'écran que l'outil réclame. `em` et non px pour
   l'interlettrage — cf. le H1 de l'accueil, même piège. */
.vf-title { font-family: var(--font-head); font-size: clamp(28px, 3.4vw, 38px); font-weight: 900; line-height: 1.08; letter-spacing: -0.045em; margin: 12px 0 8px; max-width: 720px; }
.vf-sub { font-size: 15.5px; color: var(--ink-60); line-height: 1.55; max-width: 640px; margin: 0; }


/* ── Stepper : ligne de cote ── */
.vf-stepper { display: flex; align-items: flex-start; justify-content: center; max-width: 620px; margin: 36px auto 0; }
.vf-stepper.is-5 { max-width: 760px; }
.vf-node { display: flex; flex-direction: column; align-items: center; gap: 9px; width: 88px; flex: 0 0 auto; }
.vf-dot { position: relative; width: 32px; height: 32px; border-radius: 9px; background: var(--off); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; transition: background .2s, border-color .2s, box-shadow .2s; }
.vf-dot-num { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--ink-35); letter-spacing: 0.5px; }
.vf-node-label { font-size: 12px; font-weight: 600; color: var(--ink-35); letter-spacing: -0.1px; transition: color .2s; }
.vf-node.active .vf-dot { background: linear-gradient(135deg, var(--v), var(--v-mid)); border-color: transparent; box-shadow: 0 0 0 4px var(--v-soft); }
.vf-node.active .vf-dot-num { color: #fff; }
.vf-node.active .vf-node-label { color: var(--ink); }
.vf-node.done .vf-dot { background: var(--green-bg); border-color: rgba(22,163,74,0.3); }
.vf-node.done .vf-dot-num { display: none; }
.vf-node.done .vf-dot::after { content: '✓'; font-size: 13px; font-weight: 700; color: var(--green); }
.vf-node.done .vf-node-label { color: var(--green); }
/* Segment de cote entre deux jalons (ticks verticaux aux extrémités) */
.vf-link { position: relative; flex: 1; min-width: 24px; height: 1.5px; margin-top: 15px; background: var(--border); }
.vf-link::before, .vf-link::after { content: ''; position: absolute; top: -3.5px; width: 1px; height: 8px; background: var(--border); }
.vf-link::before { left: 0; }
.vf-link::after { right: 0; }
.vf-node.done + .vf-link { background: var(--v); }
.vf-node.done + .vf-link::before, .vf-node.done + .vf-link::after { background: var(--v); }

/* ── La planche ── */
.vf-wrap { max-width: 860px; margin: 0 auto; }
.vf-sheet { position: relative; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--sh-md); padding: 36px 40px 30px; margin-top: 26px; }
.vf-sheet::before { content: ''; position: absolute; top: 10px; right: 10px; width: 14px; height: 14px; border-top: 1.5px solid var(--v-border); border-right: 1.5px solid var(--v-border); pointer-events: none; }
.vf-sheet::after { content: ''; position: absolute; bottom: 10px; left: 10px; width: 14px; height: 14px; border-bottom: 1.5px solid var(--v-border); border-left: 1.5px solid var(--v-border); pointer-events: none; }

/* Cartouche d'étape */
.vf-step-idx { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 1.6px; text-transform: uppercase; color: var(--v); margin-bottom: 10px; }
.vf-step-idx::before { content: ''; display: inline-block; width: 22px; height: 1px; background: var(--v); vertical-align: 4px; margin-right: 10px; }
.vf-step-title { font-family: var(--font-head); font-size: clamp(21px, 2.6vw, 26px); font-weight: 800; letter-spacing: -0.7px; line-height: 1.2; margin-bottom: 8px; }
.vf-step-sub { font-size: 14.5px; color: var(--ink-60); line-height: 1.55; margin-bottom: 26px; max-width: 620px; }

/* Apparition douce des panneaux — SAUF le panneau 4 : une animation
   d'opacité (même terminée, fill both) crée un contexte d'empilement
   persistant qui piégerait le z-index de son overlay position:fixed
   sous le hero. Le panneau 4 a déjà ses propres animations vz-*. */
.wizard-panel:not(.hidden):not([data-step="4"]) { animation: vf-in .25s ease both; }
@keyframes vf-in { from { opacity: 0; } }

/* Pied d'étape */
.vf-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border); }
.vf-actions .btn-primary svg, .vf-actions .btn-secondary svg { flex-shrink: 0; }
.btn-primary:focus-visible, .btn-secondary:focus-visible { outline: 2px solid var(--v); outline-offset: 2px; }

/* Champs avec icône / unité */
.vf-input-ico { position: relative; }
.vf-input-ico > svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-35); pointer-events: none; }
.vf-input-ico .form-input { padding-left: 42px; }
.vf-unit { position: relative; }
.vf-unit .form-input { padding-right: 44px; }
.vf-unit-tag { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: 11px; color: var(--ink-35); pointer-events: none; }

/* Cards projets dans la planche */
.vf-sheet .grid-3, .vf-sheet .grid-2 { gap: 16px; }
.vf-sheet .card { padding: 22px 20px 20px; }
.vf-sheet .card-ico { width: 42px; height: 42px; font-size: 20px; margin-bottom: 14px; }
.vf-sheet .card-ico::after { content: ''; position: absolute; top: -5px; right: -5px; width: 7px; height: 7px; border-top: 1.5px solid var(--v-border); border-right: 1.5px solid var(--v-border); }
.vf-sheet .card-ico::before { content: ''; position: absolute; bottom: -5px; left: -5px; width: 7px; height: 7px; border-bottom: 1.5px solid var(--v-border); border-left: 1.5px solid var(--v-border); }
.vf-sheet .card-selectable[data-checked="true"] .card-num { opacity: 0; }

/* Carte Leaflet */
/* isolation : confine les z-index internes de Leaflet (contrôles à 1000)
   pour qu'ils ne recouvrent pas la navbar sticky (z-index 100) au scroll */
.vf-map { height: 380px; border-radius: var(--r-lg); border: 1px solid var(--border); overflow: hidden; position: relative; isolation: isolate; box-shadow: var(--sh-sm); }
.vf-map-hint { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; color: var(--ink-35); line-height: 1.5; margin-top: 8px; }
.vf-map-hint svg { flex-shrink: 0; margin-top: 2px; }

/* Zone PLU détectée */
.vf-zone { padding: 16px 18px; background: var(--v-soft); border: 1px solid var(--v-border); border-radius: var(--r-md); }
.vf-zone-row { display: flex; align-items: center; gap: 14px; }
.vf-zone-code { font-family: var(--font-mono); font-size: 18px; font-weight: 700; color: var(--v); background: var(--white); border: 1px solid var(--v-border); border-radius: 8px; padding: 6px 14px; }
.vf-zone-libelle { font-weight: 600; font-size: 15px; letter-spacing: -0.2px; }
.vf-zone-regles { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-60); margin-top: 3px; letter-spacing: 0.2px; }
.vf-manual summary { font-size: 13px; font-weight: 500; color: var(--v); cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.vf-manual summary::-webkit-details-marker { display: none; }
.vf-manual summary::before { content: '▸'; font-size: 11px; transition: transform .15s; }
.vf-manual[open] summary::before { transform: rotate(90deg); }
.vf-manual summary:hover { text-decoration: underline; }

/* Note explicative (emprise bâti) */
.vf-note { display: flex; align-items: flex-start; gap: 10px; background: var(--off); border: 1px solid var(--border); border-radius: var(--r-md); padding: 13px 16px; font-size: 13px; color: var(--ink-60); line-height: 1.55; margin-top: 4px; }
.vf-note svg { flex-shrink: 0; margin-top: 2px; color: var(--v); }

/* Sources + disclaimer sous la planche */

/* Ce bien et vous (étape 3) : trois cartes-radio, une seule cochée.
   Le bouton radio natif est masqué mais reste au clavier (focus-visible). */
.vf-situation { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.vf-situation legend { padding: 0; }
.vf-situation-grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 1fr; gap: 12px; }
/* Cinq cartes de MÊME largeur et de MÊME hauteur : trois par rangée, la seconde
   (« je me renseigne », « professionnel ») centrée sous les trois cas du bien.
   Six colonnes pour pouvoir centrer deux cartes de deux colonnes chacune. */
.vf-sit { grid-column: span 2; }
.vf-sit:nth-child(4) { grid-column: 2 / span 2; }
.vf-sit:nth-child(5) { grid-column: 4 / span 2; }
.vf-sit { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 14px 14px 13px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--white); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.vf-sit:hover { border-color: var(--v-border); }
.vf-sit input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.vf-sit:has(input:checked) { border-color: var(--v); box-shadow: 0 0 0 3px var(--v-soft); }
.vf-sit:has(input:focus-visible) { outline: 2px solid var(--v); outline-offset: 2px; }
.vf-sit-ico { flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--sit-bg, var(--v-soft)); color: var(--sit-c, var(--v)); display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s; }
.vf-sit-ico svg { width: 19px; height: 19px; }
/* Une couleur par situation (demande de Cédric, 18/10/2026) : la pastille se lit
   avant le texte. Teinte pleine et icône blanche sur la carte cochée. */
.vf-sit:nth-child(1) { --sit-c: #16a34a; --sit-bg: rgba(22,163,74,0.12); }   /* mon bien — vert */
.vf-sit:nth-child(2) { --sit-c: #d97706; --sit-bg: rgba(217,119,6,0.13); }   /* à vendre — ambre */
.vf-sit:nth-child(3) { --sit-c: #6366f1; --sit-bg: rgba(99,102,241,0.12); }  /* à acheter — indigo */
.vf-sit:nth-child(4) { --sit-c: #0ea5e9; --sit-bg: rgba(14,165,233,0.13); }  /* je me renseigne — bleu ciel */
.vf-sit:nth-child(5) { --sit-c: #8b5cf6; --sit-bg: rgba(139,92,246,0.13); }  /* professionnel — violet */
.vf-sit:has(input:checked) { border-color: var(--sit-c, var(--v)); box-shadow: 0 0 0 3px var(--sit-bg, var(--v-soft)); }
.vf-sit:has(input:checked) .vf-sit-ico { background: var(--sit-c, var(--v)); color: #fff; }
.vf-sit-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vf-sit-txt strong { font-size: 13.5px; font-weight: 700; letter-spacing: -0.2px; color: var(--ink); line-height: 1.3; }
.vf-sit-txt small { font-size: 12px; color: var(--ink-60); line-height: 1.4; }

@media (prefers-reduced-motion: reduce) {
  .wizard-panel:not(.hidden):not([data-step="4"]) { animation: none; }
}
@media (max-width: 760px) {
  .vf-hero { padding-top: 40px; }
  .vf-sheet { padding: 26px 18px 22px; }
  .vf-node { width: 62px; }
  .vf-node-label { font-size: 10.5px; }
  .vf-map { height: 300px; }
  .vf-actions { padding-top: 18px; }
  .vf-situation-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .vf-sit, .vf-sit:nth-child(4), .vf-sit:nth-child(5) { grid-column: auto; }
}

/* ── Barre d'actions sur téléphone ────────────────────────────────────────
   « Retour » et « Lancer l'analyse » se partageaient une ligne de 300 px :
   le CTA tombait à 171 px de large, son libellé se coupait en deux lignes
   (« Lancer » / « l'analyse ») dans un bouton de 66 px de haut. L'action
   principale de tout l'outil ressemblait à un accident de mise en page.
   En colonne inversée, le CTA prend toute la largeur EN HAUT — c'est lui
   qu'on vise du pouce — et « Retour » passe dessous. */
@media (max-width: 560px) {
  .vf-actions { flex-direction: column-reverse; align-items: stretch; gap: 10px; }
  .vf-actions .btn-primary,
  .vf-actions .btn-secondary { width: 100%; justify-content: center; white-space: nowrap; }
  .vf-actions .btn-primary { padding: 15px 20px; font-size: 15.5px; }
  /* Le <span> vide de l'étape 1 (qui sert à pousser le CTA à droite en ligne)
     ouvrirait un trou de 10 px une fois la barre en colonne. */
  .vf-actions > span:empty { display: none; }
}

/* Stepper à cinq nœuds (visiteur : étape « Vous ») sur petit écran : les nœuds de
   88 px débordaient à 390 px (« mune », « Ana » coupés). Nœuds et liens resserrés. */
@media (max-width: 640px) {
  .vf-stepper.is-5 { max-width: 100%; }
  .vf-stepper.is-5 .vf-node { width: 58px; gap: 6px; }
  .vf-stepper.is-5 .vf-node-label { font-size: 10.5px; }
  .vf-stepper.is-5 .vf-dot { width: 28px; height: 28px; }
  .vf-stepper.is-5 .vf-link { min-width: 6px; margin-top: 13px; }
}