/* ============================================================================
   VAZACAR — Éclaté technique, traitement "carnet d'ingénieur"
   Le trait, les hachures, le cadre et les annotations utilisent l'encre verte
   de marque (--vaz-forest-900 / --vaz-sage-400). Les COULEURS D'ÉTAT des
   zones (state-OK, state-COSMETIQUE...) restent strictement inchangées —
   voir style.css — ce fichier ne touche jamais leur fill, seulement le
   décor autour et la texture de hachures superposée en overlay semi-
   transparent (voir <pattern id="vaz-hatch"> injecté par eclate/views.py).
   ========================================================================= */

.eclate-container {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--vaz-space-8) var(--vaz-space-6) var(--vaz-space-16);
}

.eclate-container > h1 {
  font-size: var(--vaz-text-2xl);
  border-bottom: 1px solid var(--vaz-sage-300);
  padding-bottom: var(--vaz-space-3);
}

.eclate-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--vaz-space-8);
  align-items: start;
}

/* Page de codex : cadre double trait + coins ornementaux + fond quadrillé
   très léger, comme un carnet d'ingénieur millimétré. */
.svg-wrapper {
  grid-column: 1;
  position: relative;
  background:
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(45, 106, 79, 0.06) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(45, 106, 79, 0.06) 23px 24px),
    var(--vaz-paper);
  border: 1px solid var(--vaz-forest-700);
  outline: 1px solid var(--vaz-sage-300);
  outline-offset: 4px;
  border-radius: 2px;
  padding: var(--vaz-space-8);
  box-shadow: var(--vaz-shadow-raised);
}

.svg-wrapper::before,
.svg-wrapper::after,
.svg-wrapper > .codex-corner {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border: 2px solid var(--vaz-forest-700);
}
.svg-wrapper::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.svg-wrapper::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }

.svg-wrapper svg { width: 100%; height: auto; display: block; }

/* Annotations techniques générées dans le SVG (labels de zone + traits de
   rappel) — cf. eclate/views.py, classes appliquées aux <text>/<line>.
   Ces règles étaient scopées à .svg-wrapper (page /eclate/<id>/ seule) —
   la preview embarquée dans annonce_detail.html vit dans .quad-eclate-svg,
   qui ne matchait aucune de ces règles : le texte retombait sur la taille
   par défaut du navigateur (~16px), bien trop grand pour les rectangles
   dimensionnés pour 10px, d'où le débordement constaté par Jeff le 22/08
   uniquement sur la preview (« quand tu fais les détails, le texte rentre
   dans la case » — sur /eclate/ seulement). Le sélecteur couvre maintenant
   les deux conteneurs. */
.svg-wrapper svg text.zone-annotation,
.quad-eclate-svg svg text.zone-annotation {
  font-family: var(--vaz-font-mono);
  font-size: 10px;
  /* PAS de fill ici — demande explicite de Jeff, 30/08, sur un véhicule
     rouillé ET brûlé réel : « le fond des cases est foncé avec une
     écriture en noir, c'est illisible (...) pour toutes les couleurs
     foncées (...) du texte en blanc ». La couleur du texte varie
     maintenant PAR ZONE selon son propre état (blanc sur fond foncé,
     encre verte sinon) — posée en attribut fill="" inline par chaque
     rendu (eclate.views._zone_rect, static/js/eclate.js, static/js/
     eclate-preview-edit.js), voir catalog.etat_choices.ETAT_TEXT_COLORS.
     Une règle fill ICI, même sans !important, écraserait systématiquement
     cet attribut inline (les attributs de présentation SVG comptent
     comme le niveau de spécificité CSS le plus bas, sous toute règle de
     classe). */
  letter-spacing: 0.02em;
}
.svg-wrapper svg .zone-leader,
.quad-eclate-svg svg .zone-leader {
  stroke: var(--vaz-forest-700);
  stroke-width: 0.75;
  stroke-dasharray: 2 2;
  fill: none;
  opacity: 0.7;
}
.svg-wrapper svg .zone-sketch-outline,
.quad-eclate-svg svg .zone-sketch-outline {
  fill: none;
  stroke: var(--vaz-forest-900);
  stroke-width: 1.4;
  stroke-linejoin: round;
}

/* Zones cliquables du schéma (saut vers le sélecteur de couleur — voir
   static/js/eclate.js) : curseur explicite + léger effet au survol. */
.svg-wrapper svg .vaz-zone,
.quad-eclate-svg svg .vaz-zone {
  cursor: pointer;
}
.svg-wrapper svg .vaz-zone:hover rect.zone-sketch-outline,
.quad-eclate-svg svg .vaz-zone:hover rect.zone-sketch-outline {
  stroke-width: 2.4;
}
/* Petit "i" par zone (voir eclate.views._zone_rect / static/js/eclate.js)
   — visible pour TOUT visiteur, sur les 4 calques de /eclate/<id>/ comme
   sur le SVG preview de l'annonce (règle .quad-eclate-svg déjà posée en
   inline dans annonce_detail.html, ajoutée ici pour .svg-wrapper). */
.svg-wrapper svg .vaz-zone-info {
  cursor: pointer;
}
.svg-wrapper svg circle.vaz-zone-info:hover {
  opacity: 0.8;
}
.zone-edit-row-highlight {
  animation: vaz-zone-flash 1.5s ease-out;
  border-radius: 4px;
}
@keyframes vaz-zone-flash {
  0% { background: var(--vaz-sage-200); }
  100% { background: transparent; }
}

/* -----------------------------------------------------------------------
   Légende — vignette "planche d'échantillons"
   ----------------------------------------------------------------------- */
.legend {
  grid-column: 2;
  background: var(--vaz-paper);
  border: 1px solid var(--vaz-line);
  border-left: 3px solid var(--vaz-forest-700);
  border-radius: var(--vaz-radius-md);
  padding: var(--vaz-space-4) var(--vaz-space-5);
}
.legend h3 {
  font-family: var(--vaz-font-mono);
  font-size: var(--vaz-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--vaz-ink-dim);
}
.legend-items { list-style: none; margin: 0; padding: 0; }
.legend-items li {
  display: flex;
  align-items: center;
  gap: var(--vaz-space-2);
  font-family: var(--vaz-font-mono);
  font-size: var(--vaz-text-sm);
  padding: 0.3rem 0;
  border-bottom: 1px dashed var(--vaz-line);
}
.legend-items li:last-child { border-bottom: none; }

.color-dot, .color-pointeau, .color-grêle, .color-feu, .color-rouille, .color-manquant {
  display: inline-block;
  width: 13px;
  height: 13px;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,0.15);
  flex-shrink: 0;
}
.color-dot.ok { background: #10B981; }
/* Doit rester identique à catalog.etat_choices.ETAT_COLORS — pas de
   templating possible sur un fichier .css statique, donc synchronisation
   manuelle obligatoire (contrairement au fill des <rect> SVG, lui posé
   dynamiquement — voir static/css/style.css pour l'incident que cette
   duplication a causé le 29/08). */
.color-dot.cosmetique { background: #FDE047; }
.color-dot.partiel { background: #F97316; }
.color-dot.choc { background: #EF4444; }
.color-pointeau { background: #3B82F6; }
.color-grêle { background: #14B8A6; }
.color-feu { background: #1F2937; }
.color-rouille { background: #854D0E; }
.color-manquant { background: #D1D5DB; }

/* -----------------------------------------------------------------------
   Formulaire d'édition des états
   ----------------------------------------------------------------------- */
#eclate-form { grid-column: 1 / -1; margin-top: var(--vaz-space-6); }

.edit-fieldset {
  border: 1px solid var(--vaz-line);
  border-radius: var(--vaz-radius-md);
  padding: var(--vaz-space-4) var(--vaz-space-5);
  margin-bottom: var(--vaz-space-4);
  background: var(--vaz-paper);
}
.edit-fieldset legend {
  font-family: var(--vaz-font-display);
  font-weight: 600;
  color: var(--vaz-forest-900);
  padding: 0 var(--vaz-space-2);
}

.zone-edit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vaz-space-3);
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--vaz-ivory-deep);
}
.zone-edit-row:last-child { border-bottom: none; }
.zone-label {
  font-family: var(--vaz-font-mono);
  font-size: var(--vaz-text-sm);
  color: var(--vaz-ink-dim);
  text-transform: capitalize;
}

.form-actions { display: flex; gap: var(--vaz-space-3); margin-top: var(--vaz-space-4); }

.feedback {
  margin-top: var(--vaz-space-4);
  padding: var(--vaz-space-3) var(--vaz-space-4);
  border-radius: var(--vaz-radius-sm);
  font-family: var(--vaz-font-mono);
  font-size: var(--vaz-text-sm);
}
.feedback.hidden { display: none; }
.feedback.success { background: var(--vaz-sage-100); color: var(--vaz-forest-700); }
.feedback.error { background: #FBEAE5; color: var(--vaz-danger); }

@media (max-width: 900px) {
  .eclate-layout { grid-template-columns: 1fr; }
  .legend { grid-column: 1; }
}

/* Popover d'édition directe de l'état d'une zone — utilisé par
   static/js/eclate-preview-edit.js (preview carrosserie, annonce_detail)
   ET static/js/eclate.js (page /eclate/<id>/ complète, 4 calques) depuis
   le 29/08 — demande explicite de Jeff : « j'aime bien la rapidité de
   cliquer sur une couleur (...) et d'en modifier sa couleur, par contre
   ça ne fonctionne que sur la couche carrosserie (...) j'aimerais aussi
   que ce comportement soit aussi disponible dans toutes les couches de
   l'éclaté lorsque l'on clique sur voir l'éclaté en détail ». Déplacé
   ici (chargé globalement) depuis un <style> inline d'annonce_detail.html
   pour être partagé entre les deux pages sans duplication. */
.vaz-preview-popover {
  position: absolute; z-index: 20; background: var(--vaz-paper);
  border: 1px solid var(--vaz-line); border-radius: var(--vaz-radius-sm);
  box-shadow: var(--vaz-shadow-raised); padding: 0.6rem 0.75rem;
  font-size: var(--vaz-text-sm); min-width: 200px;
}
.vaz-preview-popover-title { font-weight: 600; margin-bottom: 0.4rem; text-transform: capitalize; }
.vaz-preview-popover select { width: 100%; margin-bottom: 0.5rem; }
.vaz-preview-popover-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }
.vaz-preview-popover-feedback { margin-top: 0.4rem; font-size: var(--vaz-text-xs); }
.vaz-preview-popover-feedback.error { color: #DC2626; }
.vaz-preview-popover-feedback.success { color: #16A34A; }