/* Fiche publique : styles communs dans classifieds-public.css. */
.detail-shell .classifieds-detail { max-width: 1400px; }
.detail-shell .detail-layout { grid-template-columns: 280px minmax(0, 1fr) 300px; gap: 1.5rem; }
.detail-shell .detail-intro { margin-bottom: 1rem; }
.detail-shell .detail-header { display: block; margin-bottom: 0.75rem; }
.detail-shell .detail-header-left { min-width: 0; padding-right: 0; }
.detail-shell .detail-title { margin: 0 0 0.75rem; color: var(--public-ink); font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.2; letter-spacing: -0.025em; overflow-wrap: anywhere; }
.detail-shell .detail-header-right { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; text-align: left; }
.detail-shell .detail-price { margin: 0; color: var(--public-price); font-size: 1.625rem; line-height: 1.3; overflow-wrap: anywhere; }
.detail-shell .detail-price.price-on-request { color: var(--public-muted); font-size: 1.25rem; }
.detail-shell .detail-price-secondary { margin: 0; text-align: left; }
.detail-shell .detail-actions { position: static; margin-left: auto; }
.detail-shell .btn-action { width: 44px; height: 44px; background: transparent; border-color: transparent; border-radius: 6px; }
.detail-shell .btn-action:hover { background: var(--public-paper); color: var(--public-price); }
.detail-shell .detail-context { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 0; }
.detail-shell .detail-location { min-width: 0; align-items: baseline; font-size: 0.875rem; line-height: 1.5; overflow-wrap: anywhere; }
.detail-shell .detail-location svg { flex-shrink: 0; align-self: flex-start; margin-top: 2px; }

/* La photo conserve ses proportions ; le bouton rend le zoom accessible au clavier. */
.detail-shell :is(.detail-gallery, .detail-content, .vendor-card) { width: auto; margin-left: 0; margin-right: 0; padding: 0; border: 1px solid var(--public-line); border-radius: 6px; background: var(--public-surface); box-shadow: none; }
.detail-shell .detail-gallery { position: relative; margin-bottom: 1.5rem; }
.detail-shell .detail-gallery > .detail-badges { position: absolute; top: 0.75rem; left: 0.75rem; right: 0.75rem; z-index: 2; margin: 0; pointer-events: none; }
.detail-shell .gallery-main { height: 380px; background: var(--public-paper); }
.detail-shell .gallery-open { display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: zoom-in; }
.detail-shell .gallery-open:focus-visible { outline-offset: -3px; }
.detail-shell .gallery-main-image { display: block; object-fit: contain; transform: none; transition: none; }
.detail-shell .gallery-counter { pointer-events: none; backdrop-filter: none; }
.detail-shell .gallery-thumbnails { padding: 0.75rem; gap: 0.5rem; background: var(--public-surface); }
.detail-shell .gallery-thumbnail { display: block; width: 64px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: 5px; background: var(--public-paper); overflow: hidden; transform: none; }
.detail-shell .gallery-thumbnail img { display: block; width: 100%; height: 100%; object-fit: cover; }
.detail-shell .gallery-thumbnail:is(:hover, .active) { border-color: var(--public-focus); transform: none; }
.detail-shell .gallery-controls { display: none; }
.detail-shell .gallery-controls button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--public-line); border-radius: 5px; background: var(--public-surface); color: var(--public-price); cursor: pointer; }
.detail-shell .gallery-controls button:disabled { opacity: 0.4; cursor: default; }
.detail-shell .gallery-controls button:hover:not(:disabled) { background: var(--public-paper); }
.detail-shell .gallery-position { min-width: 5ch; text-align: center; font-size: 0.875rem; font-variant-numeric: tabular-nums; color: var(--public-muted); }

/* Caractéristiques d'abord, puis le texte intégral de l'annonceur. */
.detail-shell .detail-content > .card-body { padding: 1.5rem; }
.detail-shell .detail-section-title { font-size: 1.0625rem; color: var(--public-ink); }
.detail-shell .detail-section-title svg { color: var(--public-muted); }
.detail-shell .detail-specs { margin-bottom: 1.5rem; }
.detail-shell .specs-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 0.5rem 1rem; }
.detail-shell .spec-item { padding: 0.625rem 0; border-radius: 0; border-bottom: 1px solid var(--public-line); background: transparent; overflow-wrap: anywhere; }
.detail-shell .detail-specs-compact { margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--public-line); }
.detail-shell .detail-specs-compact .specs-grid { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.detail-shell .detail-specs-compact .spec-item { padding: 0; border: 0; }
.detail-shell .detail-description { margin-bottom: 1.5rem; }
.detail-shell .description-content { max-width: 70ch; font-size: 1rem; line-height: 1.6; text-align: left; overflow-wrap: anywhere; hyphens: manual; }
.detail-shell .detail-meta { flex-wrap: wrap; gap: 0.625rem 1.25rem; font-size: 0.8125rem; }

/* Le sticky est contenu dans la première rangée, avant les annonces similaires. */
.detail-shell .detail-sidebar { position: static; align-self: stretch; min-width: 0; }
.detail-shell .detail-sidebar > .vendor-card { position: sticky; top: 5.75rem; max-height: calc(100dvh - 6.75rem); overflow-y: auto; }
.detail-shell .vendor-card > .card-header { margin: 0; padding: 1rem 1.25rem; background: transparent; border-bottom: 1px solid var(--public-line); }
.detail-shell .vendor-card > .card-header .detail-section-title { margin: 0; }
.detail-shell .vendor-card > .card-body { padding: 1.25rem; }
.detail-shell .vendor-profile { gap: 0.75rem; align-items: flex-start; }
.detail-shell .detail-sidebar .vendor-avatar,
.detail-shell .detail-sidebar .vendor-avatar img,
.detail-shell .detail-sidebar .vendor-avatar > div { width: 56px !important; height: 56px !important; }
.detail-shell .vendor-status.offline { color: var(--public-muted); }
.detail-shell .vendor-all-ads-link { white-space: normal; color: var(--public-price); }
.detail-shell .vendor-contact .btn { min-height: 48px; padding: 0.75rem; font-size: 0.9375rem; border-radius: 6px; }
.detail-shell :is(.vendor-contact, .mobile-action-bar, .login-required-modal) .btn-primary { background: #4f46e5; color: #fff; box-shadow: none; }
.detail-shell :is(.vendor-contact, .mobile-action-bar, .login-required-modal) .btn-primary:hover { background: #4338ca; transform: none; }
.detail-shell .vendor-phone { background: var(--public-paper); overflow-wrap: anywhere; }
.detail-shell .agency-info { gap: 0.75rem; margin-top: 1rem; padding-top: 1rem; overflow-wrap: anywhere; }
.detail-shell .mobile-action-bar { background: var(--public-surface); box-shadow: none; }
.detail-shell .mobile-price-value { color: var(--public-price); }

/* Utiliser la largeur sous le contenu et l'annonceur, sans réduire le nombre d'annonces. */
.detail-shell .detail-similar { grid-column: 2 / -1; }
.detail-shell .detail-similar-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 1.25rem; }
.detail-shell .detail-similar .classifieds-card-title { min-height: 2.9em; }
.detail-shell .detail-similar .classifieds-card-footer .footer-line:last-child { flex-direction: row; flex-wrap: wrap; }
@supports (grid-template-rows: subgrid) {
    @media (min-width: 769px) {
        .detail-shell .detail-similar .classifieds-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; min-width: 0; }
        .detail-shell .detail-similar .classifieds-card-link { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; row-gap: 0; min-width: 0; }
        .detail-shell .detail-similar .classifieds-card-body { display: grid; grid-row: 2 / -1; grid-template-rows: subgrid; row-gap: 0; min-width: 0; }
        .detail-shell .detail-similar .classifieds-card-title { min-height: 0; align-self: start; }
        .detail-shell .detail-similar .classifieds-card-price { align-self: start; }
        .detail-shell .detail-similar .classifieds-card-footer { align-self: end; }
    }
}
@media (max-width: 1024px) {
    .detail-shell .detail-layout { grid-template-columns: minmax(0, 1fr); }
    .detail-shell .detail-sidebar > .vendor-card { position: static; max-height: none; overflow: visible; }
    .detail-shell .detail-similar { grid-column: 1; }
}
@media (max-width: 768px) {
    .detail-shell .detail-layout { gap: 1rem; }
    .detail-shell .detail-title { font-size: 1.5rem; }
    .detail-shell .gallery-main { height: auto; min-height: 0; max-height: none; aspect-ratio: 4 / 3; }
    .detail-shell .gallery-thumbnails,
    .detail-shell .gallery-main .gallery-counter { display: none; }
    .detail-shell .gallery-controls { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 0.5rem; }
    .detail-shell .gallery-main::after { display: none; }
    .detail-shell .detail-content > .card-body { padding: 1rem; }
    .detail-shell .detail-similar-grid { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
    .detail-shell .detail-similar .classifieds-card-title { min-height: 0; font-size: 0.9375rem; -webkit-line-clamp: 2; }
    .detail-shell .detail-similar .classifieds-card-body { padding: 0.75rem; }
    .detail-shell .detail-similar .classifieds-card-footer .footer-line:last-child { display: none; }
    .detail-shell .detail-sidebar .vendor-contact { display: block; }
    .detail-shell .classifieds-detail .detail-sidebar :is(.vendor-card, .vendor-name-link) { text-align: left; }
    .detail-shell .classifieds-detail .detail-sidebar .vendor-card .card-header { justify-content: flex-start; }
    .detail-shell .classifieds-detail .detail-sidebar .vendor-profile { flex-direction: row; align-items: flex-start; gap: 0.75rem; }
    .detail-shell .classifieds-detail .detail-sidebar .vendor-info { align-items: flex-start; min-width: 0; }
    .detail-shell .mobile-action-bar { align-items: center; padding-bottom: max(0.75rem, env(safe-area-inset-bottom)); }
    .detail-shell .mobile-action-bar .mobile-price { flex: 1 1 auto; }
    .detail-shell .mobile-action-bar .mobile-price-value { white-space: normal; overflow: visible; overflow-wrap: anywhere; line-height: 1.25; }
    .detail-shell .mobile-action-bar .btn { min-height: 44px; flex: 0 0 auto; }
    .detail-shell .mobile-action-bar .btn-phone { width: 44px; padding: 0; }
}
@media (forced-colors: active) {
    .detail-shell .gallery-thumbnail[aria-current="true"] { border-color: Highlight; }
}