* { 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 — code couleur STRICT, ne jamais modifier ces valeurs. */
.state-OK { fill: #10B981 !important; }
.state-COSMETIQUE { fill: #FBBF24 !important; }
.state-PARTIEL { fill: #F59E0B !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); }