/* DA 2027 (#347), lot F : liste des offres et fiche d'offre. Chargé seulement quand `da27` est actif ; tout est sous html.da27.
   Le balisage, les attributs Alpine et les hooks JS (data-*) ne changent pas. Propriétés logiques : le même CSS sert le RTL. */

/* ---------- Liste : titre, barre de recherche, filtres ---------- */
html.da27 .ofr-hero { background: var(--c-surface); border-bottom: 1px solid var(--c-border); }
html.da27 .ofr-hero__h1 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; }
@media (min-width: 1024px) { html.da27 .js-carte .ofr-hero__titre { border-radius: var(--r-lg); } html.da27 .js-carte .ui-catalogue__carte-cadre { border-end-start-radius: var(--r-xl); border-end-end-radius: var(--r-xl); overflow: hidden; } }
html.da27 .ui-catalogue--offres { padding-block-start: 24px; }
html.da27 .ui-catalogue__bar { background: color-mix(in srgb, var(--c-bg) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: var(--r-lg); padding: 8px; margin-inline: -8px; }
html.da27 .ui-catalogue__bar .ui-input, html.da27 .ui-search > .ui-input { border-radius: var(--r-full); }
html.da27 .ui-catalogue__bar .ui-btn { border-radius: var(--r-full); }
html.da27 .ui-catalogue__panel { border-radius: var(--r-lg); border-color: var(--c-border); box-shadow: var(--sh-1); }
html.da27 .ui-drawer .ui-catalogue__panel { border-radius: 0; border-start-start-radius: var(--r-xl); border-end-start-radius: var(--r-xl); box-shadow: var(--sh-3); }
html.da27 .ui-filters .ui-label, html.da27 .ui-fieldset > legend { font-family: var(--font-display); font-weight: 700; font-size: .8125rem; color: var(--c-text); }
html.da27 .ofr-pli__titre { font-family: var(--font-display); font-weight: 700; min-height: 44px; }
html.da27 .ui-filters .ui-input { border-radius: var(--r-sm); }
html.da27 .ui-filters__bar { gap: 10px; }
html.da27 .ui-filters__count strong { font-family: var(--font-display); font-weight: 800; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
html.da27 .ui-catalogue__head .ui-h2, html.da27 .ui-catalogue--offres .ui-catalogue__head .ui-h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); line-height: 1.15; letter-spacing: -.02em; }
html.da27 .ofr-rapides select.ui-input, html.da27 .ui-sort .ui-input { border-radius: var(--r-full); }
html.da27 .ofr-barre .sel-alerte-cta .ui-btn { border-radius: var(--r-full); background: var(--c-brand-soft); border-color: transparent; color: var(--c-brand-soft-ink); font-weight: 600; }
/* à 390 px, le tiroir de filtres reste l'unique accès aux filtres : repliés par défaut, ouverts à la demande (Alpine inchangé) */

/* ---------- Cartes d'offre : photo d'abord, prix en grand ---------- */
html.da27 .ui-offer-grid { gap: 20px; }
@media (min-width: 640px) { html.da27 .ui-offer-grid { gap: 24px; } }
html.da27 .ui-offer-card { border-radius: var(--r-lg); box-shadow: var(--sh-1); }
html.da27 .ui-offer-card__media { aspect-ratio: 4 / 3; }
html.da27 .ui-offer-card__badges .ui-badge--glass { background: rgba(255, 255, 255, .95); color: var(--c-brand-soft-ink); height: 26px; font-size: .75rem; }
html.da27 .ui-offer-card__badges .ui-badge--glass + .ui-badge--glass { background: var(--c-nuit); color: #fff; }
html.da27 .ui-offer-card__badges .ofr-badge-nouveau { background: var(--c-accent); color: #fff; }
html.da27 .ui-offer-card__body { gap: 6px; padding: 18px 20px 12px; }
html.da27 .ui-offer-card__title { font-size: 1rem; line-height: 1.35; min-height: 2.7em; font-weight: 700; }
html.da27 .ui-offer-card__place { font-size: .875rem; }
html.da27 .ui-offer-card__place .ui-icon { color: var(--c-brand); }
html.da27 .ui-offer-card__gate { font-size: .75rem; font-weight: 500; color: var(--c-text-2); }
html.da27 .ui-catalogue--offres .ui-offer-card__gate { font-size: .75rem; }
html.da27 .ui-offer-card__foot { margin-block-start: 10px; padding-block-start: 14px; align-items: baseline; }
html.da27 .ui-offer-card__surface { font-size: 1.375rem; line-height: 1; letter-spacing: -.02em; }
html.da27 .ui-offer-card__price { font-size: .8125rem; color: var(--c-text-2); text-align: end; }
html.da27 .cmp-actions { padding-inline: 20px; padding-block-end: 12px; }
html.da27 .cmp-case { min-height: 40px; color: var(--c-text-2); font-size: .875rem; }
html.da27 .cmp-case input { accent-color: var(--c-action); width: 18px; height: 18px; }
html.da27 .cmp-alerte, html.da27 .sel-btn { border-radius: 50%; }
html.da27 .ui-offer-card__media .sel-btn { background: rgba(255, 255, 255, .95); box-shadow: 0 1px 3px rgba(17, 26, 35, .2); width: 40px; height: 40px; }
html.da27 .ofr-plus__btn { border-radius: var(--r-full); }
html.da27 .ui-pagination .ui-page { border-radius: var(--r-full); }
html.da27 .ui-pagination .ui-page.is-active { background: var(--c-brand); border-color: var(--c-brand); color: #fff; }
html.da27 .offres-explorer .ui-suggestion { border-radius: var(--r-full); }

/* ---------- Fiche : galerie, tête, blocs ---------- */
html.da27 .ui-fiche { padding-block-end: 8px; box-shadow: 0 0 0 100vmax var(--c-bg); clip-path: inset(0 -100vmax); background: var(--c-bg); }
html.da27 .ui-fiche__back { font-weight: 600; }
html.da27 .fm, html.da27 .ui-gallery { border-radius: var(--r-xl); }
html.da27 .ui-fiche__cols { gap: 32px; margin-block-start: 28px; }
@media (min-width: 1024px) { html.da27 .ui-fiche__cols { grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; } }
html.da27 .fe { padding: 0; }
html.da27 .fe__badges .ui-badge { height: 26px; background: var(--brand-100); color: var(--c-brand-soft-ink); }
html.da27 .fe__badges .ui-badge:nth-child(2) { background: var(--c-nuit); color: #fff; }
html.da27 .ui-fiche__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem); line-height: 1.15; letter-spacing: -.02em; }
html.da27 .fe__chiffres { margin-block-start: 18px; gap: 6px 20px; }
html.da27 .fe__chiffres strong { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
html.da27 .fe__chiffres span { font-size: 1rem; font-weight: 600; color: var(--c-text-2); }
html.da27 .fa .ui-btn, html.da27 .fa .sel-btn, html.da27 .fa button, html.da27 .fa a { border-radius: var(--r-full); }
html.da27 .fa { gap: 10px; }
html.da27 .fr__liste { gap: 12px; }
html.da27 .fr__item { background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: var(--r-md); padding: 14px 16px; }
html.da27 .fr__valeur { font-family: var(--font-display); font-weight: 800; font-variant-numeric: tabular-nums; }
html.da27 .ui-fiche__main > .fr { margin-block-start: 28px; }
html.da27 .ui-fiche__section { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: clamp(20px, 3vw, 32px); margin-block-start: 20px; }
html.da27 .ui-fiche__section > .ui-h2, html.da27 .ui-fiche__section h2 { font-family: var(--font-display); font-weight: 800; font-size: 1.375rem; line-height: 1.2; letter-spacing: -.015em; margin-block-end: 16px; }
html.da27 .fcar th { font-weight: 400; color: var(--c-text-2); }
html.da27 .fcar td { font-weight: 600; }
@media (max-width: 639.98px) { html.da27 .fcar th, html.da27 .fcar td { display: block; width: auto; padding-inline-end: 0; } html.da27 .fcar th { padding-block-end: 0; border-bottom: 0; } html.da27 .fcar td { padding-block-start: 2px; } }
html.da27 .ui-fiche__map { border-radius: var(--r-md); }
html.da27 .ui-fiche__side { align-self: start; }
html.da27 .ui-contact { border-radius: var(--r-xl); border: 1px solid var(--c-border); box-shadow: var(--sh-2); padding: 24px; }
html.da27 .ui-contact__actions .ui-btn { min-height: 52px; width: 100%; }
html.da27 .ui-contact__name { font-family: var(--font-display); font-weight: 800; }

/* contact fixe à droite (ordinateur) : le panneau suit la lecture sous l'en-tête */
@media (min-width: 1024px) { html.da27 .ui-fiche__side { position: sticky; top: calc(var(--entete-h, 76px) + 20px); } }

/* barre d'action fixe en bas (mobile et tablette) : prix, « Contacter », Garder ; masquée dès 1024 px (le contact est alors fixe à droite).
   Sous 768 px elle se pose au-dessus de la barre de navigation mobile existante (.nb-barre). */
@media (max-width: 1023.98px) {
    html.da27 .fb { position: fixed; inset-inline: 0; inset-block-end: 0; margin: 0; z-index: 56; padding: 8px var(--marge-page, 16px); gap: 10px;
        background: rgba(255, 255, 255, .97); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--c-border); box-shadow: 0 -8px 24px -12px rgba(17, 26, 35, .2); flex-wrap: nowrap; }
    html.da27 .fb__chiffres { flex: 1 1 auto; line-height: 1.2; }
    html.da27 .fb__chiffres strong { font-family: var(--font-display); font-weight: 800; font-size: 1rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
    html.da27 .fb__chiffres span { font-size: .75rem; }
    html.da27 .fb__actions { flex: 0 0 auto; align-items: center; }
    html.da27 .fb__actions .ui-btn:not(.sel-btn) { min-height: 44px; padding-inline: 16px; border-radius: var(--r-full); }
    html.da27 .fb__actions .sel-btn { flex: none; }
    html.da27 .ui-fiche { padding-block-end: 72px; }
}
@media (max-width: 767.98px) {
    html.da27 .fb { inset-block-end: calc(var(--nb-barre-h, 60px) + env(safe-area-inset-bottom, 0px)); }
    html.da27 .ui-fiche { padding-block-end: calc(72px + var(--nb-barre-h, 60px)); }
}
@media (max-width: 359.98px) { html.da27 .fb__chiffres span { display: none; } html.da27 .fb__actions .ui-btn:not(.sel-btn) { padding-inline: 12px; } }
@media (min-width: 1024px) { html.da27 .fb { display: none; } }
@media print { html.da27 .fb { display: none; } }
html.da27 .ui-similaires .ui-offer-card, html.da27 .fs .ui-offer-card { border-radius: var(--r-lg); }

/* #304 : fiche d'offre, photo moins haute sur grand écran : titre et prix visibles dans le premier écran */
@media (min-width: 1024px) { html.da27 .fm, html.da27 .ui-gallery { height: clamp(260px, 36vh, 340px); } }
/* Recette J (#352) : l'en-tête « offres similaires » passe à la ligne à 320 px (aucun débordement) */
html.da27 .fs__tete { flex-wrap: wrap; }
html.da27 .fs__tete > :first-child { min-width: 0; flex: 1 1 12rem; }