* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--vaz-font-body);
  font-size: var(--vaz-text-base);
  background-color: var(--vaz-ivory);
  color: var(--vaz-ink);
  line-height: 1.55;
}

h1, h2, h3, h4 {
  font-family: var(--vaz-font-display);
  color: var(--vaz-forest-900);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 var(--vaz-space-4);
}
h1 { font-size: var(--vaz-text-4xl); }
h2 { font-size: var(--vaz-text-2xl); }
h3 { font-size: var(--vaz-text-xl); }

a { color: var(--vaz-cta); }
a:hover { color: var(--vaz-cta-hover); }

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

/* -----------------------------------------------------------------------
   Barre technique — labels, filtres, tableaux, données chiffrées : toujours
   en Plex Mono, c'est le registre "ingénierie" du pairing typographique.
   ----------------------------------------------------------------------- */
label, .tech-label, th, .price, .spec, select, input, .btn-small {
  font-family: var(--vaz-font-mono);
}

/* -----------------------------------------------------------------------
   Navigation
   ----------------------------------------------------------------------- */
.navbar {
  background: var(--vaz-forest-900);
  display: flex;
  align-items: center;
  gap: var(--vaz-space-6);
  padding: var(--vaz-space-4) var(--vaz-space-6);
  border-bottom: 3px solid var(--vaz-sage-400);
}

.navbar-links {
  display: flex;
  align-items: center;
  gap: var(--vaz-space-4);
  flex-wrap: wrap;
  margin-left: auto;
  font-family: var(--vaz-font-mono);
  font-size: var(--vaz-text-sm);
  list-style: none;
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
}

/* Tous les liens dans la navbar : blanc (pas le vert CTA hérité de 'a'),
   sinon "Recherche" est illisible sur fond forest-900. */
.navbar-links a {
  color: var(--vaz-paper);
  text-decoration: none;
}

.navbar-links a:hover {
  color: var(--vaz-sage-300);
}

.nav-link {
  color: var(--vaz-paper) !important;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--vaz-space-2);
}

.nav-link:hover {
  color: var(--vaz-sage-300) !important;
}

.nav-demo-label {
  color: var(--vaz-sage-300);
  font-size:
  var(--vaz-text-sm);
  margin-right: var(--vaz-space-2);
}

/* Reset de base pour tout élément <button class="btn ..."> — sans ça, un
   vrai <button> (contrairement à un <a class="btn-primary">) garde le
   rendu par défaut du navigateur (bordure 3D en relief, police "caption"
   souvent plus petite/mal alignée que le reste de la page) PAR-DESSUS le
   style personnalisé, ce qui coupait visuellement le bas du texte et
   désalignait le bouton Déconnexion de la navbar par rapport à ses
   voisins (bug signalé sur de nombreux tickets, jamais corrigé car
   invisible en lisant juste le CSS — il fallait vérifier le rendu réel).
   Ajout de appearance: none (tue le relief natif), overflow: visible et
   height: auto (anti-clipping), vertical-align: middle (alignement avec
   les <a> voisins dans la navbar). */
.btn {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  outline: none;
  cursor: pointer;
  font: inherit;
  line-height: normal;
  display: inline-block;
  overflow: visible;
  height: auto;
  vertical-align: middle;
}

.btn-primary {
  background: var(--vaz-forest-900);
  color: var(--vaz-paper);
  padding: var(--vaz-space-3) var(--vaz-space-6);
  border-radius: var(--vaz-radius-sm);
  text-decoration: none;
  font-weight: bold;
}

.btn-primary:hover {
  background: var(--vaz-forest-700);
}

/* Boutons dans la navbar : fond plus clair que la navbar pour être visibles.
   Sans cette règle, un .btn-primary (fond forest-900) disparaît dans la
   navbar (fond forest-900 également). */
.navbar .btn-primary {
  background: var(--vaz-forest-700);
}
.navbar .btn-primary:hover {
  background: var(--vaz-forest-600);
}

/* Bouton "Déconnexion" dans la navbar : visuellement un lien texte, pas un
   CTA. Sans cette classe, le <button> (obligatoire pour le POST logout)
   ressemblait à un bouton d'action primaire avec fond vert, relief natif
   navigateur, et texte coupé — exactement les bugs du ticket 29. */
.btn-link {
  background: transparent;
  color: var(--vaz-paper);
  padding: 0;
  border-radius: 0;
  text-decoration: none;
  font-weight: normal;
}
.btn-link:hover {
  color: var(--vaz-sage-300);
  background: transparent;
}

.navbar .btn-link {
  color: var(--vaz-paper);
}
.navbar .btn-link:hover {
  color: var(--vaz-sage-300);
  background: transparent;
}

.btn-secondary {
  background: var(--vaz-sage-300);
  color: var(--vaz-ink);
  padding: var(--vaz-space-2) var(--vaz-space-4);
  border-radius: var(--vaz-radius-sm);
  text-decoration: none;
}

.btn-secondary:hover {
  background: var(--vaz-sage-400);
}

/* -----------------------------------------------------------------------
   Contenu principal (conteneur, grid, marge)
   ----------------------------------------------------------------------- */
main {
  padding-top: var(--vaz-space-8);
  padding-bottom: var(--vaz-space-8);
}

footer {
  background-color: var(--vaz-sage-100);
  padding: var(--vaz-space-6);
  text-align: center;
  font-size: var(--vaz-text-sm);
  border-top: 3px solid var(--vaz-sage-400);
}

/* -----------------------------------------------------------------------
   Accueil (tagline, annonces)
   ----------------------------------------------------------------------- */
.tagline {
  text-align: center;
  font-size: var(--vaz-text-2xl);
  margin-bottom: var(--vaz-space-8);
}

.home-hero {
  padding-top: var(--vaz-space-6);
  padding-bottom: var(--vaz-space-10);
}

.home-title {
  text-align: center;
  color: var(--vaz-forest-900);
}

/* -----------------------------------------------------------------------
   Annonces (liste, card)
   ----------------------------------------------------------------------- */
.listing-card {
  background-color: var(--vaz-paper);
  border-radius: var(--vaz-radius-md);
  padding: var(--vaz-space-6);
  margin-bottom: var(--vaz-space-6);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.listing-card:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.listing-title {
  font-size: var(--vaz-text-xl);
  margin-bottom: var(--vaz-space-2);
}

.listing-price {
  color: var(--vaz-forest-900);
  font-weight: bold;
  font-size: var(--vaz-text-lg);
}

.listing-image {
  width: 100%;
  height: auto;
  border-radius: var(--vaz-radius-md);
}

.listing-footer {
  display: flex;
  gap: var(--vaz-space-2);
  align-items: center;
  margin-top: var(--vaz-space-4);
  justify-content: space-between;
}

.boost-cta {
  text-align: center;
  padding: var(--vaz-space-8);
  background: var(--vaz-sage-100);
  border-radius: var(--vaz-radius-md);
  margin-top: var(--vaz-space-6);
}

/* ============================================================================
   Éclaté technique 360° — voir aussi eclate-codex.css pour le traitement
   "carnet d'ingénieur" (hachures, cadre, annotations).
   ========================================================================= */
#eclate-container {
  position: relative;
  width: 800px;
  height: 600px;
  margin: 2rem auto;
  border: 1px solid var(--vaz-line);
  background: var(--vaz-paper);
  overflow: hidden;
}

#eclate-svg {
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
}

.eclate-overlay {
  background: rgba(255, 255, 255, 0.9);
  padding: 1rem;
  border-radius: 8px;
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
}

.eclate-tabs, .tabs-nav {
  display: flex;
  gap: 0.5rem;
  margin: var(--vaz-space-4) 0;
  flex-wrap: wrap;
}

.eclate-tab, .tab-btn {
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--vaz-line);
  background: var(--vaz-paper);
  color: var(--vaz-ink-dim);
  border-radius: var(--vaz-radius-sm);
  cursor: pointer;
  font-family: var(--vaz-font-mono);
  font-size: var(--vaz-text-sm);
}

.eclate-tab.active, .tab-btn.active {
  background: var(--vaz-forest-900);
  color: var(--vaz-paper);
  border-color: var(--vaz-forest-900);
}
.tab-btn.hidden-tab { display: none; }
.edit-fieldset.hidden-fieldset { display: none; }

/* États de zones — RÉTABLI le 29/08, quelques minutes après l'avoir
   supprimé par erreur : « toutes les couleurs ont disparu de l'éclaté »,
   Jeff, en production. Ce bloc N'EST PAS un pur doublon inoffensif du
   fill inline : static/css/eclate-codex.css pose aussi
   `.zone-sketch-outline { fill: none; }` sur CE MÊME <rect> (deux
   classes sur le même élément, même spécificité CSS) — sans le
   `!important` ici, c'est cette règle-là qui gagne et rend TOUTES les
   zones transparentes, pas seulement les valeurs par défaut du doublon.
   Reste néanmoins un doublon de catalog.etat_choices.ETAT_COLORS (seule
   source réelle) qu'il FAUT mettre à jour manuellement à chaque
   changement de couleur là-bas — c'est cet oubli-là, pas l'existence du
   bloc, qui avait rendu invisible le correctif du 21/08. */
.state-OK { fill: #10B981 !important; }
.state-COSMETIQUE { fill: #FDE047 !important; }
.state-PARTIEL { fill: #F97316 !important; }
.state-COMPLET { fill: #EF4444 !important; }
.state-EAU { fill: #3B82F6 !important; }
.state-GRELE { fill: #14B8A6 !important; }
.state-FEU { fill: #1F2937 !important; }
.state-ROUILLE { fill: #854D0E !important; }
.state-MANQUANT { fill: #D1D5DB !important; }

.eclate-edit-form {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: white;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.eclate-edit-form h3 { margin-top: 0; color: var(--vaz-forest-900); }

/* ============================================================================
   Bloc de recherche home — landing "moteur de recherche" façon mobile.de :
   un seul cadre, 3 onglets (classique/accidentologie/pièces), chaque onglet
   garde son <form> propre (URL dédiée, résultats indépendants — CDC §3),
   seul l'habillage est unifié. Bascule en JS (même pattern que .tab-btn de
   l'éclaté, pas de nouveau système).
   ========================================================================= */
.search-hero {
  width: 100%;
  max-width: 900px;
  margin: 0 auto var(--vaz-space-12);
  background: var(--vaz-paper);
  border: 1px solid var(--vaz-line);
  border-radius: var(--vaz-radius-lg);
  box-shadow: var(--vaz-shadow-raised);
  overflow: hidden;
}

.search-hero-tabs {
  display: flex;
  background: var(--vaz-forest-900);
}

.search-hero-tab {
  flex: 1;
  padding: var(--vaz-space-4) var(--vaz-space-4);
  background: transparent;
  border: none;
  color: var(--vaz-sage-300);
  font-family: var(--vaz-font-mono);
  font-size: var(--vaz-text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  border-bottom: 3px solid transparent;
}

.search-hero-tab:hover { color: var(--vaz-paper); }

.search-hero-tab.active {
  color: var(--vaz-paper);
  background: var(--vaz-forest-700);
  border-bottom-color: var(--vaz-sage-400);
}

.search-hero-panel { display: none; padding: var(--vaz-space-8) var(--vaz-space-8) var(--vaz-space-6); }
.search-hero-panel.active { display: block; }

.search-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vaz-space-4);
  margin-bottom: var(--vaz-space-4);
}
.search-row .field { flex: 1 1 160px; min-width: 140px; }
.search-row .field label {
  display: block;
  font-size: var(--vaz-text-xs);
  color: var(--vaz-ink-dim);
  margin-bottom: var(--vaz-space-1);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.search-row .field select,
.search-row .field input {
  width: 100%;
}

details.search-advanced { margin-top: var(--vaz-space-2); }
details.search-advanced > summary {
  cursor: pointer;
  color: var(--vaz-cta);
  font-family: var(--vaz-font-mono);
  font-size: var(--vaz-text-sm);
  margin-bottom: var(--vaz-space-4);
}
details.search-advanced[open] > summary { margin-bottom: var(--vaz-space-4); }

.search-hero-submit { display: flex; justify-content: flex-end; margin-top: var(--vaz-space-6); }

/* Sélecteur de zone d'impact 360° (10 zones, sélection MULTIPLE/cumulable —
   "Toutes" supprimé le 19/08 : obsolète dès lors qu'on peut cocher plusieurs
   zones à la fois, ex. avant-gauche + avant + avant-droit pour un choc avant).
   Positionnement GÉOMÉTRIQUE réel en 4 lignes, spec exacte de Jeff (19/08) :
   avant-gauche/avant/avant-droit, gauche/toit/droite,
   arriere-gauche/arriere/arriere-droit, dessous (centré).
   Repose entièrement sur data-zone sur chaque <label> — SANS cet attribut
   les zones retombent dans l'ordre du DOM et le grid casse silencieusement
   (bug réel constaté sur la home : data-zone manquant dans ce template).
   Le champ occupe désormais sa PROPRE ligne dans le formulaire
   (.search-row-full côté template) : partagé avec d'autres champs, son
   overflow horizontal (grille plus large que sa colonne flex) passait par-
   dessus le champ "Type d'accident" voisin — bug réel constaté (case
   avant-droit recouverte par le <select>). */
.impact-zone-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "avant-gauche   avant    avant-droit"
    "gauche         toit     droite"
    "arriere-gauche arriere  arriere-droit"
    ".              dessous  .";
  gap: var(--vaz-space-2);
  max-width: 420px;
}
.impact-zone-grid label[data-zone="AVANT_GAUCHE"]   { grid-area: avant-gauche; }
.impact-zone-grid label[data-zone="AVANT"]          { grid-area: avant; }
.impact-zone-grid label[data-zone="AVANT_DROIT"]    { grid-area: avant-droit; }
.impact-zone-grid label[data-zone="LATERAL_GAUCHE"] { grid-area: gauche; }
.impact-zone-grid label[data-zone="TOIT"]           { grid-area: toit; }
.impact-zone-grid label[data-zone="LATERAL_DROIT"]  { grid-area: droite; }
.impact-zone-grid label[data-zone="ARRIERE_GAUCHE"] { grid-area: arriere-gauche; }
.impact-zone-grid label[data-zone="ARRIERE"]        { grid-area: arriere; }
.impact-zone-grid label[data-zone="ARRIERE_DROIT"]  { grid-area: arriere-droit; }
.impact-zone-grid label[data-zone="DESSOUS"]        { grid-area: dessous; }

.impact-zone-grid label {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--vaz-space-3) var(--vaz-space-2);
  border: 1px solid var(--vaz-line);
  border-radius: var(--vaz-radius-sm);
  cursor: pointer;
  background: var(--vaz-ivory);
  font-size: var(--vaz-text-xs);
  text-transform: none;
}
.impact-zone-grid input { position: absolute; opacity: 0; pointer-events: none; }
.impact-zone-grid input:checked + span,
.impact-zone-grid label:has(input:checked) {
  background: var(--vaz-forest-900);
  color: var(--vaz-paper);
  border-color: var(--vaz-forest-900);
}

/* Légende / sélecteurs des 9 états couleur (pièces + éclaté) */
.etat-swatch-list { display: flex; flex-wrap: wrap; gap: var(--vaz-space-3); }
.etat-swatch {
  display: inline-flex;
  align-items: center;
  gap: var(--vaz-space-2);
  padding: var(--vaz-space-1) var(--vaz-space-2);
  border: 1px solid var(--vaz-line);
  border-radius: var(--vaz-radius-sm);
  font-size: var(--vaz-text-xs);
  cursor: pointer;
}
.etat-swatch input { margin: 0; }
.etat-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; border: 1px solid rgba(0,0,0,0.15); }

/* Cases à cocher "Composant" (recherche par pièces, home + page dédiée) —
   même style compact que .impact-zone-grid mais en liste (nombre de
   composants variable selon la couche, pas une grille fixe). */
.pieces-zone-list { display: flex; flex-wrap: wrap; gap: var(--vaz-space-2); }
.pieces-zone-list label {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: var(--vaz-space-1) var(--vaz-space-2);
  border: 1px solid var(--vaz-line); border-radius: var(--vaz-radius-sm);
  font-weight: normal; text-transform: none; font-size: var(--vaz-text-sm);
  cursor: pointer;
}
.pieces-zone-list label:has(input:checked) {
  background: var(--vaz-forest-900); color: var(--vaz-paper); border-color: var(--vaz-forest-900);
}

/* Badges "état de vente" — distincts de la palette éclaté (jamais les 9
   couleurs sémantiques ici, uniquement des tons de la charte marque). */
.condition-badge {
  display: inline-block;
  padding: 2px var(--vaz-space-2);
  border-radius: var(--vaz-radius-sm);
  font-size: var(--vaz-text-xs);
  font-family: var(--vaz-font-mono);
  font-weight: 600;
}
.condition-NEUF { background: var(--vaz-sage-300); color: var(--vaz-forest-900); }
.condition-OCCASION { background: var(--vaz-sage-100); color: var(--vaz-ink-dim); }
.condition-OCCASION_ENDOMMAGE { background: #FDE9C8; color: #7A5210; }
.condition-EPAVE_PARTIELLE, .condition-EPAVE_COMPLETE { background: #F3D9D2; color: var(--vaz-danger); }
.condition-POUR_PIECES { background: var(--vaz-ink); color: var(--vaz-paper); }

/* Cartes annonces — vignette photo + specs façon mobile.de */
.listing-photo-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--vaz-radius-md);
  overflow: hidden;
  background: var(--vaz-sage-100);
  margin-bottom: var(--vaz-space-3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.listing-photo-wrap img { width: 100%; height: 100%; object-fit: cover; }
.listing-photo-placeholder { color: var(--vaz-sage-400); font-size: var(--vaz-text-3xl); }

.spec-chips { display: flex; flex-wrap: wrap; gap: var(--vaz-space-2); margin: var(--vaz-space-2) 0; }
.spec-chip {
  background: var(--vaz-ivory-deep);
  color: var(--vaz-ink-dim);
  padding: 2px var(--vaz-space-2);
  border-radius: var(--vaz-radius-sm);
  font-size: var(--vaz-text-xs);
  font-family: var(--vaz-font-mono);
}

/* Section annonces récentes — teaser réduit sous le bloc recherche (jamais
   le contenu dominant de la home : demande explicite de Jeff, "pas comme
   eBay"). Grille plus dense que .grid-listings historique. */
.teaser-listings { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--vaz-space-4); }
.teaser-listings .listing-card { padding: var(--vaz-space-4); margin-bottom: 0; }

/* Galerie de photos — page détail annonce */
.detail-gallery-main { width: 100%; aspect-ratio: 16/10; border-radius: var(--vaz-radius-md); overflow: hidden; background: var(--vaz-sage-100); margin-bottom: var(--vaz-space-3); }
.detail-gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.detail-gallery-thumbs { display: flex; gap: var(--vaz-space-2); flex-wrap: wrap; }
.detail-gallery-thumbs img { width: 84px; height: 64px; object-fit: cover; border-radius: var(--vaz-radius-sm); border: 2px solid transparent; cursor: pointer; }
.detail-gallery-thumbs img.active { border-color: var(--vaz-forest-900); }
.detail-specs-table { width: 100%; border-collapse: collapse; }
.detail-specs-table th, .detail-specs-table td { text-align: left; padding: var(--vaz-space-2) var(--vaz-space-3); border-bottom: 1px solid var(--vaz-line); font-size: var(--vaz-text-sm); }
.detail-specs-table th { color: var(--vaz-ink-dim); font-weight: 500; width: 45%; }
.detail-layer-nav { display: flex; gap: var(--vaz-space-2); flex-wrap: wrap; margin: var(--vaz-space-4) 0; }

/* Sections "Detailsuche complète" (technique/extérieur/intérieur/détails
   annonce) — global (pas dans un extra_head local) car partagées par les 3
   pages de recherche détaillée via search/_filtres_detailles_communs.html
   (classique/accidentologie/pièces, demande de Jeff le 20/08). */
.ds-section { border: 1px solid var(--vaz-line); border-radius: var(--vaz-radius-md); margin-bottom: 1.25rem; overflow: hidden; }
.ds-section > summary { cursor: pointer; padding: 0.75rem 1rem; background: var(--vaz-sage-100); font-family: var(--vaz-font-mono, monospace); font-weight: 600; }
.ds-section-body { padding: 1rem; }
.ds-field { margin-bottom: 1rem; }
.ds-field label.ds-legend { display:block; font-weight:600; margin-bottom:0.35rem; font-size: var(--vaz-text-sm); }
.ds-row-range { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; }
.ds-row-range label { display:flex; align-items:center; gap:0.35rem; }
.ds-checks { display:flex; flex-wrap:wrap; gap:0.4rem 1.25rem; }
.ds-checks label { display:inline-flex; align-items:center; gap:0.35rem; white-space:nowrap; }
.ds-equip-group h4 { margin: 0.75rem 0 0.35rem; font-size: var(--vaz-text-sm); color: var(--vaz-forest-700); }

/* Messages Django (django.contrib.messages) — jamais affichés nulle part
   avant le module Gentleman (20/08), qui en dépend pour son feedback
   (contact demandé, litige ouvert...). */
.vaz-messages { margin-top: var(--vaz-space-4); }
.vaz-message { padding: var(--vaz-space-2) var(--vaz-space-3); border-radius: var(--vaz-radius-sm); margin-bottom: var(--vaz-space-2); font-size: var(--vaz-text-sm); }
.vaz-message-success { background: #D1FAE5; color: #065F46; }
.vaz-message-error { background: #FEE2E2; color: #991B1B; }
.vaz-message-warning { background: #FEF3C7; color: #92400E; }
.vaz-message-info { background: var(--vaz-sage-100); color: var(--vaz-forest-900); }