/* Depot d'annonces par les particuliers (14/10/2026). Suit les variables du theme (theme-0710). */
.dp { --dp-surface: var(--surface, #fff); --dp-surface-2: var(--surface-2, #f8fafc); --dp-ink: var(--ink, #0f172a); --dp-muted: var(--muted, #64748b); --dp-line: var(--line, #e2e8f0); --dp-accent: var(--indigo-btn, #4f46e5); --dp-soft: var(--indigo-soft, #eef2ff); }
.dp { padding: 28px 0 56px; color: var(--dp-ink); }
.dp .wrap { max-width: 860px; }
.dp h1 { font-size: clamp(24px, 4vw, 32px); margin: 0 0 6px; letter-spacing: -.02em; }
.dp-sous { color: var(--dp-muted); margin: 0 0 22px; font-size: 15px; line-height: 1.6; }
.dp-carte { background: var(--dp-surface); border: 1px solid var(--dp-line); border-radius: 14px; padding: 22px; margin-bottom: 16px; }
.dp-carte h2 { font-size: 17px; margin: 0 0 14px; }
.dp-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.dp-grille-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dp-champ { display: flex; flex-direction: column; gap: 6px; min-width: 0; position: relative; }
.dp-champ label, .dp-legende { font-size: 13px; font-weight: 600; }
.dp-champ small { color: var(--dp-muted); font-size: 12px; }
.dp input[type=text], .dp input[type=number], .dp input[type=email], .dp input[type=tel], .dp select, .dp textarea {
  width: 100%; box-sizing: border-box; padding: 11px 12px; font: inherit; font-size: 15px; color: var(--dp-ink);
  background: var(--dp-surface); border: 1px solid var(--dp-line); border-radius: 10px; }
.dp textarea { min-height: 200px; resize: vertical; line-height: 1.55; }
.dp input:focus, .dp select:focus, .dp textarea:focus { outline: 2px solid var(--dp-accent); outline-offset: 1px; }
.dp-choix { display: flex; gap: 8px; flex-wrap: wrap; }
.dp-choix label { cursor: pointer; }
.dp-choix input { position: absolute; opacity: 0; pointer-events: none; }
.dp-choix span { display: inline-block; padding: 9px 14px; border: 1px solid var(--dp-line); border-radius: 999px; font-size: 14px; font-weight: 600; background: var(--dp-surface); }
.dp-choix input:checked + span { background: var(--dp-accent); border-color: var(--dp-accent); color: #fff; }
.dp-choix input:focus-visible + span { outline: 2px solid var(--dp-accent); outline-offset: 2px; }
.dp-lettres span { min-width: 34px; text-align: center; padding: 8px 10px; }
.dp-erreur { color: #b91c1c; font-size: 13px; }
html[data-theme="dark"] .dp-erreur { color: #fca5a5; }
.dp-alerte { border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; font-size: 14px; line-height: 1.5; background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.dp-ok { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
html[data-theme="dark"] .dp-alerte { background: #3f1818; border-color: #7f2a2a; color: #fecaca; }
html[data-theme="dark"] .dp-ok { background: #183f24; border-color: #317248; color: #bbf7d0; }
.dp-actions { display: flex; gap: 10px; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-top: 18px; }
.dp-etapes { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0 0 20px; counter-reset: e; }
.dp-etapes li { flex: 1; font-size: 12.5px; font-weight: 600; color: var(--dp-muted); border-top: 3px solid var(--dp-line); padding-top: 8px; }
.dp-etapes li.fait { color: var(--dp-ink); border-color: var(--dp-accent); }
.dp-etapes li.en-cours { color: var(--dp-accent); border-color: var(--dp-accent); }
.dp-etapes a { color: inherit; text-decoration: none; }
.dp-suggestions { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; background: var(--dp-surface); border: 1px solid var(--dp-line); border-radius: 10px; margin-top: 4px; box-shadow: 0 10px 30px -10px rgba(0,0,0,.25); max-height: 260px; overflow: auto; }
.dp-suggestions button { display: block; width: 100%; text-align: left; padding: 10px 12px; background: none; border: 0; font: inherit; font-size: 14px; color: var(--dp-ink); cursor: pointer; }
.dp-suggestions button:hover, .dp-suggestions button:focus { background: var(--dp-soft); }
.dp-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-top: 14px; }
.dp-photo { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--dp-line); background: var(--dp-surface-2); aspect-ratio: 4/3; }
.dp-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dp-photo .dp-ph-num { position: absolute; top: 6px; left: 6px; background: rgba(15,23,42,.75); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
.dp-photo .dp-ph-act { position: absolute; bottom: 6px; right: 6px; display: flex; gap: 4px; }
.dp-photo .dp-ph-act button { width: 30px; height: 30px; border-radius: 8px; border: 0; background: rgba(255,255,255,.92); color: #0f172a; font-size: 15px; cursor: pointer; line-height: 1; }
.dp-photo.charge { display: grid; place-items: center; font-size: 13px; color: var(--dp-muted); }
.dp-depot-zone { border: 2px dashed var(--dp-line); border-radius: 14px; padding: 26px; text-align: center; color: var(--dp-muted); }
.dp-depot-zone.survol { border-color: var(--dp-accent); background: var(--dp-soft); }
.dp-case { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; margin: 10px 0; }
.dp-case input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.dp-mentions { font-size: 13px; color: var(--dp-muted); line-height: 1.6; }
.dp-mentions li { margin-bottom: 4px; }
.dp-badge { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--dp-soft); color: var(--dp-accent); vertical-align: middle; }
html[data-theme="dark"] .dp-badge { color: #c7d2fe; }
.dp-statut-actif { background: #dcfce7; color: #166534; }
.dp-statut-a_valider, .dp-statut-brouillon { background: #fef9c3; color: #854d0e; }
.dp-statut-refuse, .dp-statut-expire { background: #fee2e2; color: #991b1b; }
.dp-statut-vendu { background: #e0e7ff; color: #3730a3; }
html[data-theme="dark"] .dp-statut-actif { background: #183f24; color: #bbf7d0; }
html[data-theme="dark"] .dp-statut-a_valider, html[data-theme="dark"] .dp-statut-brouillon { background: #3f3718; color: #fde68a; }
html[data-theme="dark"] .dp-statut-refuse, html[data-theme="dark"] .dp-statut-expire { background: #3f1818; color: #fecaca; }
.dp-liste-item { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; }
.dp-liste-item .dp-vignette { width: 120px; height: 90px; border-radius: 10px; background: var(--dp-surface-2) center/cover no-repeat; border: 1px solid var(--dp-line); }
.dp-liste-item h3 { margin: 0 0 4px; font-size: 16px; }
.dp-liste-item h3 a { color: inherit; }
.dp-meta { font-size: 13px; color: var(--dp-muted); }
.dp-boutons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.dp-boutons form { margin: 0; display: inline-flex; gap: 6px; align-items: center; }
.dp-boutons input[type=number] { width: 130px; padding: 8px 10px; }
.dp .btn-petit { padding: 8px 12px; font-size: 13px; }
.dp-lien { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; color: var(--dp-accent); cursor: pointer; text-decoration: underline; }
html[data-theme="dark"] .dp-lien { color: #a5b4fc; }
/* Fiche publique */
.dp-fiche { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.dp-galerie-principale { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 14px; display: block; background: var(--dp-surface-2); }
.dp-miniatures { display: flex; gap: 8px; overflow-x: auto; margin-top: 8px; padding-bottom: 4px; }
.dp-miniatures img { width: 84px; height: 63px; object-fit: cover; border-radius: 8px; cursor: pointer; opacity: .75; flex: none; border: 2px solid transparent; }
.dp-miniatures img.actif { opacity: 1; border-color: var(--dp-accent); }
.dp-carac { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.dp-carac div { background: var(--dp-surface-2); border-radius: 10px; padding: 10px 12px; }
.dp-carac strong { display: block; font-size: 16px; }
.dp-carac span { font-size: 12px; color: var(--dp-muted); }
.dp-prix { font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.dp-prix small { font-size: 14px; font-weight: 600; color: var(--dp-muted); }
.dp-description { white-space: pre-line; line-height: 1.7; font-size: 15px; }
.dp-dpe { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; font-weight: 800; color: #fff; }
.dp-dpe-A { background: #009c6d; } .dp-dpe-B { background: #52b153; } .dp-dpe-C { background: #a5cc74; color: #1f2937; } .dp-dpe-D { background: #f4e70f; color: #1f2937; } .dp-dpe-E { background: #f0b40f; color: #1f2937; } .dp-dpe-F { background: #eb8235; } .dp-dpe-G { background: #d7221f; }
.dp-bandeau-apercu { background: #fef9c3; color: #713f12; border: 1px solid #fde68a; border-radius: 12px; padding: 14px 16px; margin-bottom: 18px; font-size: 14px; }
html[data-theme="dark"] .dp-bandeau-apercu { background: #3f3718; color: #fde68a; border-color: #726531; }
.dp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dp-landing-etapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 18px 0; }
.dp-landing-etapes div { background: var(--dp-surface); border: 1px solid var(--dp-line); border-radius: 14px; padding: 16px; font-size: 14px; line-height: 1.55; }
.dp-landing-etapes b { display: block; font-size: 15px; margin-bottom: 4px; }
.hdr-deposer { font-weight: 700; font-size: 14px; text-decoration: none; color: var(--indigo-btn, #4f46e5); white-space: nowrap; padding: 8px 10px; border-radius: 9px; }
.hdr-deposer:hover { background: var(--indigo-soft, #eef2ff); }
html[data-theme="dark"] .hdr-deposer { color: #a5b4fc; }
.hv3-deposer { margin-top: 14px; font-size: 14px; color: var(--muted, #64748b); }
.hv3-deposer a { font-weight: 700; }
@media (max-width: 1100px) { .hdr-actions .hdr-deposer { display: none; } }
@media (max-width: 760px) {
  .dp-grille, .dp-grille-3, .dp-landing-etapes { grid-template-columns: minmax(0, 1fr); }
  .dp-fiche { grid-template-columns: minmax(0, 1fr); }
  .dp-carte { padding: 16px; }
  .dp-liste-item { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; }
  .dp-liste-item .dp-vignette { width: 84px; height: 66px; }
  .dp-etapes li { font-size: 11px; }
  .dp-actions .btn { flex: 1; text-align: center; }
}