/* =============================================================================
   Page d'une annonce — /annonces/<categorie>/<slug>/
   Remplace le bloc <style> qui vivait dans detail.html, ainsi que les 92
   attributs style= de ce gabarit et de son partial bouton_partage.html.
   Voir DESIGN.md pour les décisions.
   =============================================================================

   Deux règles de portée, qui ne sont pas interchangeables :

   1. Les noms génériques (.section-card, .badge, .char-*) sont scopés sous
      .detail-root, car dix autres gabarits définissent chacun leur propre
      .badge dans leur propre bloc <style>. Non scopés, ils entreraient en
      conflit le jour où cette feuille serait chargée ailleurs.
   2. Les noms préfixés .ad-* et .partage-*, eux, restent non scopés : la
      modale de partage est téléportée dans <body> par x-teleport, donc elle
      sort de .detail-root. Un sélecteur scopé la laisserait sans style — et
      [x-cloak] scopé la laisserait clignoter avant l'initialisation d'Alpine.

   La police n'est plus déclarée ici : DM Sans et DM Mono étaient importés en
   corps de page (coûteux au rendu, et une seconde famille pour rien). La page
   hérite du Poppins chargé par base.html, et les chiffres s'alignent avec
   font-variant-numeric: tabular-nums.
   ========================================================================== */

.detail-root {
  /* Mêmes valeurs que catalogue.css. À mettre en commun dans un fichier de
     tokens le jour où une troisième page en aura besoin : les dupliquer une
     fois est plus sûr que de toucher au catalogue déjà en production, mais
     ce n'est pas une situation à laisser s'installer. */
  --tw-surface: #fff;
  --tw-panel: oklch(96.5% 0.006 160);
  --tw-line: oklch(91% 0.006 160);
  --tw-line-douce: oklch(96% 0.004 160);

  --tw-ink: oklch(24% 0.014 160);
  --tw-ink-2: oklch(45% 0.011 160); /* 4,5:1 minimum sur surface */
  --tw-ink-3: oklch(58% 0.010 160); /* métadonnées, jamais du texte courant */

  --tw-accent: #059669;
  --tw-accent-ink: #047857;
  --tw-accent-soft: oklch(96% 0.03 162);

  --tw-alerte: #dc2626;
  --tw-offre: #f59e0b;
  --tw-offre-ink: #d97706;
  --tw-offre-bg: oklch(97.5% 0.035 95);
  --tw-offre-line: oklch(90% 0.08 90);

  --fs-h1: 1.2rem;
  --fs-base: 0.9375rem;
  --fs-sm: 0.8125rem;
  --fs-xs: 0.75rem;

  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;

  color: var(--tw-ink);
}

.detail-root *,
.detail-root *::before,
.detail-root *::after { box-sizing: border-box; }

/* Alpine masque ces éléments jusqu'à son initialisation. Non scopé à dessein :
   la modale de partage vit dans <body>, hors de .detail-root. */
[x-cloak] { display: none !important; }

/* ── Panneaux ─────────────────────────────────────────────────────────────── */

.detail-root .section-card {
  background: var(--tw-surface);
  border: 1px solid var(--tw-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 16px;
}

.detail-root .section-header {
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--tw-line-douce);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--tw-ink-2);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.detail-root .section-body { padding: 20px; }

/* ── Fil d'Ariane ─────────────────────────────────────────────────────────── */

.ad-fil { margin-bottom: 20px; }

.ad-fil-liste {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
  color: var(--tw-ink-3);
}

.ad-fil-lien,
.ad-fil-etape {
  color: var(--tw-ink-2);
  font-weight: 500;
  text-decoration: none;
}

.ad-fil-lien:hover { color: var(--tw-accent-ink); text-decoration: underline; }

.ad-fil-actuel { color: var(--tw-ink); font-weight: 600; }

/* ── Galerie ──────────────────────────────────────────────────────────────── */

.ad-galerie {
  position: relative;
  height: 460px;
  background: var(--tw-panel);
}

.ad-galerie-actions {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* Bouton rond translucide posé sur la photo : favori et partage. */
.ad-bouton-flottant {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
  cursor: pointer;
  transition: transform .15s;
}

.ad-galerie-fleche {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 8px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
  cursor: pointer;
}

.ad-galerie-fleche--gauche { left: 12px; }
.ad-galerie-fleche--droite { right: 12px; }

.ad-galerie-pastilles {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}

.ad-galerie-pastille {
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color .15s;
}

.ad-vignettes {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  overflow-x: auto;
  border-top: 1px solid var(--tw-line-douce);
}

.ad-vignette {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  padding: 0;
  border: none;
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer;
  transition: opacity .15s;
}

.ad-vignette-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Description et caractéristiques ──────────────────────────────────────── */

.ad-description {
  font-size: var(--fs-base);
  color: var(--tw-ink-2);
  line-height: 1.7;
  white-space: pre-line;
  text-wrap: pretty;
}

.detail-root .char-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--tw-line-douce);
}

.detail-root .char-item:last-child { border-bottom: none; }

.detail-root .char-label {
  margin: 0 0 2px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--tw-ink-3);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.detail-root .char-value {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--tw-ink);
}

/* ── Colonne latérale : titre, prix, statut ───────────────────────────────── */

.ad-entete { margin-bottom: 20px; }

.ad-titre {
  margin: 0 0 12px;
  font-size: var(--fs-h1);
  font-weight: 700;
  color: var(--tw-ink);
  letter-spacing: -.01em;
  line-height: 1.3;
  text-wrap: balance;
}

.ad-prix-bloc { margin-bottom: 12px; }

.detail-root .stat-price {
  font-size: 2rem;
  font-weight: 700;
  color: var(--tw-accent);
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.ad-prix-unite {
  font-size: 1rem;
  font-weight: 500;
  color: var(--tw-ink-2);
}

.ad-prix-detail {
  margin-top: 4px;
  font-size: var(--fs-sm);
  color: var(--tw-ink-3);
  font-variant-numeric: tabular-nums;
}

.ad-co2 {
  margin-top: 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--tw-accent);
}

.ad-statuts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.detail-root .badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.detail-root .badge--dispo    { background: var(--tw-accent-soft); color: #065f46; }
.detail-root .badge--reservee { background: oklch(96.5% 0.035 70); color: #c2410c; }
.detail-root .badge--vendue   { background: var(--tw-panel); color: var(--tw-ink-2); }
.detail-root .badge--prive    { background: oklch(96.5% 0.008 250); color: #475569; }

/* ── Actions ──────────────────────────────────────────────────────────────── */

.ad-actions { margin-bottom: 20px; }

.detail-root .btn-reserve,
.detail-root .btn-offer,
.detail-root .btn-contact,
.detail-root .btn-edit-owner {
  display: block;
  width: 100%;
  margin-bottom: 8px;
  border-radius: var(--r-md);
  font-size: var(--fs-base);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, box-shadow .15s;
}

.detail-root .btn-reserve {
  padding: 12px 20px;
  border: none;
  background: var(--tw-accent);
  color: #fff;
}

.detail-root .btn-reserve:hover {
  background: var(--tw-accent-ink);
  box-shadow: 0 4px 12px rgba(5, 150, 105, .25);
}

.detail-root .btn-offer {
  padding: 11px 20px;
  border: none;
  background: var(--tw-offre);
  color: #fff;
}

.detail-root .btn-offer:hover { background: var(--tw-offre-ink); }

.detail-root .btn-contact {
  padding: 11px 20px;
  border: 1.5px solid var(--tw-accent);
  background: var(--tw-surface);
  color: var(--tw-accent);
  font-size: var(--fs-sm);
}

.detail-root .btn-contact:hover { background: var(--tw-accent-soft); }

.detail-root .btn-edit-owner {
  margin-bottom: 0;
  padding: 11px 20px;
  border: none;
  background: var(--tw-panel);
  color: var(--tw-ink-2);
  font-size: var(--fs-sm);
}

.detail-root .btn-edit-owner:hover { background: var(--tw-line); }

/* ── Offre (négociation) ──────────────────────────────────────────────────── */

.ad-nego {
  margin-top: 8px;
  padding: 14px;
  border: 1px solid var(--tw-offre-line);
  border-radius: 12px;
  background: var(--tw-offre-bg);
}

.ad-nego-label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--tw-ink-2);
  letter-spacing: .03em;
  text-transform: uppercase;
}

.ad-nego-ligne { display: flex; gap: 8px; }

.ad-nego-aide {
  margin-top: 6px;
  font-size: var(--fs-xs);
  color: var(--tw-ink-3);
}

.detail-root .nego-input {
  flex: 1;
  padding: 9px 13px;
  border: 1.5px solid var(--tw-line);
  border-radius: var(--r-md);
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--tw-ink);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

.detail-root .nego-input:focus {
  border-color: var(--tw-offre);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, .1);
}

.detail-root .nego-submit {
  padding: 9px 16px;
  border: none;
  border-radius: var(--r-md);
  background: var(--tw-offre);
  color: #fff;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s;
}

.detail-root .nego-submit:hover { background: var(--tw-offre-ink); }

/* ── Blocs d'information de la colonne latérale ───────────────────────────── */

.ad-proprietaire {
  margin-bottom: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--tw-line-douce);
}

.ad-proprietaire-note {
  margin: 0 0 10px;
  font-size: var(--fs-sm);
  color: var(--tw-ink-3);
}

.ad-separateur {
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--tw-line-douce);
}

.ad-bloc {
  padding-top: 14px;
  border-top: 1px solid var(--tw-line-douce);
}

.ad-bloc-label {
  margin: 0 0 10px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--tw-ink-3);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.ad-bloc-label--serre { margin-bottom: 6px; }

.ad-vendeur { margin-bottom: 16px; }

.ad-vendeur-logo,
.ad-vendeur-logo-vide {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
}

.ad-vendeur-logo { object-fit: cover; }

.ad-vendeur-logo-vide {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tw-accent-soft);
}

.ad-vendeur-nom {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--tw-ink);
  text-decoration: none;
}

.ad-vendeur-nom:hover { text-decoration: underline; }

.ad-vendeur-ville {
  margin: 2px 0 0;
  font-size: var(--fs-sm);
  color: var(--tw-ink-3);
}

.ad-ligne-icone {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-base);
}

.ad-ligne-icone--suite { margin-top: 6px; }

.ad-icone-xs { width: 11px; height: 11px; }

.ad-icone-sm {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.ad-icone-sm--accent { color: var(--tw-accent); }
.ad-icone-sm--alerte { color: var(--tw-alerte); }

.ad-texte { color: var(--tw-ink-2); }

.ad-adresse {
  font-size: var(--fs-base);
  color: var(--tw-ink-2);
  line-height: 1.6;
}

.ad-adresse-nom { margin: 0; font-weight: 600; }
.ad-adresse-ligne { margin: 0; }

.ad-adresse-contact { margin: 6px 0 0; font-size: var(--fs-sm); }
.ad-adresse-etiquette { color: var(--tw-ink-3); }

.ad-adresse-horaires {
  margin: 4px 0 0;
  font-size: var(--fs-xs);
  color: var(--tw-ink-3);
}

.ad-instructions {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid oklch(92% 0.04 162);
  border-radius: var(--r-md);
  background: var(--tw-accent-soft);
}

.ad-instructions-titre {
  margin: 0 0 3px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: #065f46;
}

.ad-instructions-texte {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--tw-accent-ink);
}

/* ── Bloc « masqué » pour les visiteurs non connectés ─────────────────────── */

.ad-masque {
  padding: 20px;
  border: 1px solid var(--tw-line);
  border-radius: 12px;
  background: var(--tw-panel);
  text-align: center;
}

.ad-masque-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: var(--tw-line);
}

.ad-masque-titre {
  margin: 0 0 4px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--tw-ink-2);
}

.ad-masque-texte {
  margin: 0 0 12px;
  font-size: var(--fs-xs);
  color: var(--tw-ink-2);
}

/* ── Statistiques de bas de carte ─────────────────────────────────────────── */

.ad-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--tw-line-douce);
  font-size: var(--fs-xs);
  color: var(--tw-ink-3);
}

.ad-stats-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* =============================================================================
   Modale de partage (partials/bouton_partage.html)
   Téléportée dans <body> : ces sélecteurs ne peuvent pas être scopés.
   ========================================================================== */

.partage-fond {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(2px);
}

.partage-boite {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;
  width: calc(100% - 32px);
  max-width: 480px;
  max-height: calc(100vh - 32px);
  padding: 24px;
  overflow-y: auto;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}

.partage-fermer {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #64748b;
  cursor: pointer;
}

.partage-titre {
  margin: 0 0 6px;
  font-size: 1.1rem;
  font-weight: 600;
  color: #0f172a;
}

.partage-sous-titre {
  margin: 0 0 20px;
  font-size: 0.85rem;
  color: #64748b;
  line-height: 1.4;
}

.partage-sous-titre--serre { margin-bottom: 14px; }

.partage-avertissement {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 18px;
  padding: 12px 14px;
  border: 1px solid #fde68a;
  border-radius: 10px;
  background: #fef3c7;
}

.partage-avertissement-icone {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: #b45309;
}

.partage-avertissement-texte {
  margin: 0;
  font-size: 0.78rem;
  color: #92400e;
  line-height: 1.45;
}

.partage-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.partage-champ {
  position: relative;
  margin-bottom: 18px;
}

.partage-url {
  width: 100%;
  padding: 10px 44px 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  /* Pile monospace du système : une URL se relit mieux à pas fixe, et aucune
     police n'est téléchargée pour autant (DM Mono est parti avec l'import). */
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  color: #334155;
  outline: none;
}

.partage-copier {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  transition: background-color .15s, color .2s;
}

.partage-icone { width: 18px; height: 18px; }

.partage-copie {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  font-size: 0.7rem;
  font-weight: 500;
  color: #059669;
}

.partage-separateur {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  color: #64748b;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.partage-separateur-trait {
  flex: 1;
  height: 1px;
  background: #e2e8f0;
}

.partage-linkedin {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
  background: #0a66c2;
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: filter .2s;
}

/* ── Mouvement réduit ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .ad-bouton-flottant,
  .ad-vignette,
  .ad-galerie-pastille,
  .detail-root .btn-reserve,
  .detail-root .btn-offer,
  .detail-root .btn-contact,
  .detail-root .btn-edit-owner,
  .detail-root .nego-input,
  .detail-root .nego-submit,
  .partage-copier,
  .partage-linkedin { transition: none; }
}