/* Mise en page « portail immobilier » (réglage Apparence → Mise en page). Tout est limité à html[data-layout="portal"] :
   le mode « classique » n'est pas touché. Couleurs, rayon et police viennent des variables émises depuis l'administration. */
html[data-hero="compact"] { --hero-h: 300px; }
html[data-hero="normal"]  { --hero-h: 400px; }
html[data-hero="tall"]    { --hero-h: 520px; }

/* Bandeau d'annonce et bouton WhatsApp : disponibles dans les deux mises en page. */
.announce { background: var(--primary); color: var(--primary-on); text-align: center; padding: .5rem var(--space-4, 1rem); font-size: var(--text-sm, .9rem); position: relative; z-index: 3; }
.announce a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.wa-float { position: fixed; inset-block-end: 1.1rem; inset-inline-end: 1.1rem; z-index: 40; inline-size: 56px; block-size: 56px; border-radius: 50%; display: grid; place-items: center;
    background: #25d366; color: #fff; box-shadow: 0 10px 24px -8px rgb(0 0 0 / .45); }
.wa-float .icon { inline-size: 28px; block-size: 28px; }
.wa-float:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px #25d366; }

/* ---------- Hero plein écran avec image et voile ---------- */
html[data-layout="portal"] .public-body .hero {
    min-block-size: var(--hero-h, 400px); display: flex; align-items: center; color: #fff;
    background:
        linear-gradient(rgb(8 16 32 / calc(var(--hero-overlay, .45) + .12)), rgb(8 16 32 / var(--hero-overlay, .45))),
        var(--hero-bg, linear-gradient(158deg, var(--lx-deep-2, #0f2742), var(--lx-deep, #0a1c33) 78%));
    background-size: cover; background-position: center; border-radius: 0;
}
html[data-layout="portal"] .public-body .hero::before,
html[data-layout="portal"] .public-body .hero::after,
html[data-layout="portal"] .public-body .hero-content::before { display: none; }
html[data-layout="portal"] .public-body .hero-arch { display: none; }
html[data-layout="portal"] .public-body .hero-grid { grid-template-columns: minmax(0, 1fr); }
html[data-layout="portal"] .public-body .hero-content { max-inline-size: 760px; }
html[data-layout="portal"] .public-body .hero h1 { color: #fff; font-size: clamp(2.2rem, 5.2vw, 4rem); text-shadow: 0 2px 18px rgb(0 0 0 / .35); }
html[data-layout="portal"] .public-body .hero .hero-sub { color: rgb(255 255 255 / .9); }
html[data-header="solid"][data-layout="portal"] .public-body .hero { margin-block-start: 0; padding-block: 4rem 8rem; }

/* ---------- Titres de section ---------- */
html[data-layout="portal"] .section-head h2, html[data-layout="portal"] .container > h2 { position: relative; padding-block-end: .6rem; }
html[data-layout="portal"] .section-head h2::after, html[data-layout="portal"] .container > h2::after {
    content: ""; position: absolute; inset-inline-start: 0; inset-block-end: 0; inline-size: 56px; block-size: 3px; border-radius: 3px; background: var(--primary); }

/* ---------- Fiches de biens et de projets ---------- */
html[data-layout="portal"] .public-body .property-card, html[data-layout="portal"] .public-body .project-card { border-radius: var(--radius-lg); overflow: hidden; }
html[data-layout="portal"] .public-body .card-media { aspect-ratio: 3 / 2; }
html[data-layout="portal"] .public-body .card-media img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* ---------- Catégories (tuiles) ---------- */
.category-grid { display: grid; gap: var(--space-4, 1rem); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.category-tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: .2rem; min-block-size: 190px; padding: var(--space-4, 1rem);
    border-radius: var(--radius-lg); color: #fff; text-decoration: none; overflow: hidden; isolation: isolate;
    background: linear-gradient(135deg, var(--primary), var(--accent)); }
.category-tile.has-image { background: var(--tile-bg) center / cover no-repeat; }
.category-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 25%, rgb(0 0 0 / .62)); }
.category-title { font-size: var(--text-lg, 1.2rem); font-weight: 700; }
.category-text { font-size: var(--text-sm, .9rem); opacity: .92; }
.category-tile:hover, .category-tile:focus-visible { filter: brightness(1.06); }
.category-tile:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }

/* ---------- À propos (aperçu) et bannière ---------- */
.about-preview { display: grid; gap: var(--space-5, 1.5rem); align-items: center; grid-template-columns: minmax(0, 1fr); }
.about-preview img { inline-size: 100%; block-size: auto; border-radius: var(--radius-lg); object-fit: cover; }
.about-lead { font-weight: 600; font-size: var(--text-lg, 1.2rem); }
@media (min-width: 800px) { .about-preview { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.promo-banner { position: relative; isolation: isolate; text-align: center; color: #fff; padding: clamp(2.5rem, 7vw, 5rem) var(--space-5, 1.5rem); border-radius: var(--radius-xl);
    background: linear-gradient(rgb(8 16 32 / .55), rgb(8 16 32 / .55)), var(--banner-bg, linear-gradient(135deg, var(--primary), var(--accent))); background-size: cover; background-position: center; }
.promo-banner h2 { color: #fff; margin-block: 0 .6rem; }
.promo-banner p { max-inline-size: 60ch; margin: 0 auto 1.2rem; }
.custom-page .prose { max-inline-size: 78ch; }

@media (max-width: 640px) {
    html[data-layout="portal"] .public-body .hero { min-block-size: min(var(--hero-h, 400px), 440px); }
}
@media (prefers-reduced-motion: reduce) { .category-tile { transition: none; } }