/* =============================================================================
   Ludovic RIEUTORD — Mandataire immobilier
   Feuille de style principale — identité visuelle premium, indépendante de
   la charte graphique du réseau 3G IMMO.
   Un seul fichier CSS volontairement : pas de préprocesseur ni de build step,
   pour rester 100% compatible avec un hébergement mutualisé IONOS.
   ========================================================================== */

/* -----------------------------------------------------------------------
   1. Variables de charte graphique
   ----------------------------------------------------------------------- */
:root {
    /* Palette — tons pierre / ivoire / terracotta, inspirée de la lumière du
       Gard rhodanien, volontairement éloignée des couleurs 3G IMMO. */
    --color-bg: #FAF7F1;
    --color-bg-alt: #F1EBE0;
    --color-surface: #FFFFFF;
    --color-text: #211D18;
    --color-text-muted: #5B5348;
    --color-text-soft: #857C6E;
    --color-line: #E3DACB;
    --color-line-strong: #CBBFA9;

    --color-accent: #9C5B3C;       /* terracotta */
    --color-accent-dark: #7A4429;
    --color-accent-soft: #F1E3D8;
    --color-ink: #1B2420;          /* vert profond, réservé aux accents rares */

    --color-success-bg: #EAF3E9;
    --color-success-text: #33532F;
    --color-error-bg: #FBEAE7;
    --color-error-text: #8A2E1F;

    --font-serif: 'Lora', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --container-max: 1180px;
    --container-narrow: 760px;
    --radius-sm: 4px;
    --radius-md: 10px;
    --radius-lg: 18px;

    --shadow-soft: 0 12px 32px -18px rgba(33, 29, 24, 0.35);
    --shadow-card: 0 8px 24px -14px rgba(33, 29, 24, 0.28);

    --transition-base: 220ms ease;
}

/* -----------------------------------------------------------------------
   2. Réinitialisation & bases
   ----------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a {
    color: var(--color-accent-dark);
    text-decoration: none;
}
a:hover { color: var(--color-accent); }

h1, h2, h3, h4 {
    font-family: var(--font-serif);
    font-weight: 500;
    line-height: 1.15;
    margin: 0 0 0.6em;
    color: var(--color-text);
    letter-spacing: 0.01em;
}

h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }

p { margin: 0 0 1.1em; color: var(--color-text-muted); }

ul, ol { padding-left: 1.2em; color: var(--color-text-muted); }

/* Accessibilité : focus visible clair au clavier */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    margin: -1px;
}

.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--color-ink);
    color: #fff;
    padding: 0.6em 1em;
    z-index: 200;
}
.skip-link:focus {
    left: 1em;
    top: 1em;
}

/* -----------------------------------------------------------------------
   3. Layout général
   ----------------------------------------------------------------------- */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
}

.container-narrow {
    max-width: var(--container-narrow);
    margin: 0 auto;
    padding: 0 24px;
}

.section {
    padding: clamp(56px, 9vw, 108px) 0;
}

.section-alt { background: var(--color-bg-alt); }

.section-header {
    max-width: 640px;
    margin-bottom: 2.4em;
}

.section-header.center { margin-left: auto; margin-right: auto; text-align: center; }

.eyebrow {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent-dark);
    margin-bottom: 0.9em;
    font-weight: 600;
}

.grid {
    display: grid;
    gap: 32px;
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
    .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------------------
   4. En-tête & navigation
   ----------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(250, 247, 241, 0.92);
    backdrop-filter: saturate(140%) blur(6px);
    border-bottom: 1px solid var(--color-line);
}

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    padding-bottom: 16px;
    gap: 20px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 20px;
}

.brand-logo {
    height: 46px; /* logo agrandi (auparavant 34px) */
    width: auto;
    max-width: none;
    flex-shrink: 0;
    margin-left: -6px;
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.brand-name {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--color-text);
    white-space: nowrap;
}

.brand-role {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-soft);
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 28px;
}

.main-nav a {
    color: var(--color-text);
    font-size: 0.95rem;
    font-weight: 500;
    position: relative;
    padding: 4px 0;
}

.main-nav a[aria-current="page"] {
    color: var(--color-accent-dark);
}

.main-nav a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 2px;
    background: var(--color-accent);
    transform: scaleX(0);
    transition: transform var(--transition-base);
}
.main-nav a:hover::after,
.main-nav a[aria-current="page"]::after { transform: scaleX(1); }

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-toggle {
    display: none;
    background: none;
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    cursor: pointer;
}

/* Espacement régulier de la première ligne (ordinateur uniquement) :
   le logo, le nom, chaque lien du menu et chaque bouton sont répartis à distance
   égale sur toute la largeur. "display: contents" fait de chaque lien et
   bouton un élément direct de la ligne, sans toucher au HTML. En dessous
   de 1025px, le menu hamburger reprend la main (règles ci-dessous). */
@media (min-width: 1025px) {
    .site-header .container {
        justify-content: space-between;
        gap: 20px;
    }
    .site-header .main-nav,
    .site-header .header-actions {
        display: contents;
    }
    .site-header .brand { display: contents; }
    .site-header .brand-logo { margin-left: 0; }
    .site-header .main-nav a { white-space: nowrap; }
}
/* Écrans d'ordinateur étroits : on n'affiche que l'icône du téléphone pour
   que tout tienne sur une seule ligne sans que les liens passent à la ligne. */
@media (min-width: 1025px) and (max-width: 1199px) {
    .header-actions .btn-call-text { display: none; }
    .brand-name { font-size: 1.25rem; }
    .brand-logo { height: 40px; }
}

/* Le menu passe en hamburger dès 1024px (plutôt que 880px auparavant) :
   assez tôt pour que les liens, le numéro de téléphone et les boutons ne
   soient jamais compressés ou tronqués sur les écrans intermédiaires
   (tablettes, petits écrans d'ordinateur portable). */
@media (max-width: 1024px) {
    .main-nav {
        position: fixed;
        /* top calé sur la hauteur réelle du header (variable posée par
           main.js) plutôt qu'une valeur fixe, pour ne jamais recouvrir le
           bouton hamburger même quand le header passe sur deux lignes. */
        top: var(--header-height, 72px);
        left: 0;
        right: 0;
        bottom: 0;
        /* Hauteur explicite plutôt que de compter sur l'étirement
           automatique top/bottom d'un élément position:fixed : le header
           parent étant en position:sticky, ce calcul d'étirement automatique
           s'effondre dans certains navigateurs (le panneau s'ouvre alors
           avec une hauteur quasi nulle, réduite à son seul padding, et
           n'affiche donc aucun lien). Fixer la hauteur via calc() contourne
           ce problème et garantit un panneau plein écran, sous le header. */
        height: calc(100vh - var(--header-height, 72px));
        height: calc(100dvh - var(--header-height, 72px));
        background: var(--color-bg);
        flex-direction: column;
        align-items: stretch;
        padding: 20px 24px;
        gap: 4px;
        transform: translateY(-8px);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
        overflow-y: auto;
        z-index: 95;
    }
    .main-nav.is-open {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }
    .main-nav a {
        display: block;
        width: 100%;
        padding: 16px 6px;
        font-size: 1.05rem;
        border-bottom: 1px solid var(--color-line);
    }
    .main-nav a::after { display: none; }
    .nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }
    .header-actions .btn-call-text { display: none; }
    .brand-name { font-size: 1.5rem; }
    .brand-logo { height: 42px; }
}

@media (max-width: 480px) {
    .site-header .container {
        flex-wrap: wrap;
        row-gap: 10px;
        padding-top: 14px;
        padding-bottom: 14px;
    }
    .header-actions { margin-left: auto; }
}

@media (max-width: 400px) {
    .brand-name { font-size: 1.3rem; }
    .brand-logo { height: 34px; }
    .brand { gap: 20px; }
}

/* -----------------------------------------------------------------------
   5. Boutons
   ----------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 13px 26px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
    white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
    background: var(--color-ink);
    color: #fff;
}
.btn-primary:hover { background: var(--color-accent-dark); color: #fff; }

.btn-accent {
    background: var(--color-accent);
    color: #fff;
}
.btn-accent:hover { background: var(--color-accent-dark); color: #fff; }

.btn-outline {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-line-strong);
}
.btn-outline:hover { border-color: var(--color-accent); color: var(--color-accent-dark); }

.btn-ghost {
    background: transparent;
    color: var(--color-text);
    padding: 13px 8px;
}
.btn-ghost:hover { color: var(--color-accent-dark); }

.btn-sm { padding: 9px 18px; font-size: 0.85rem; }

.btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* -----------------------------------------------------------------------
   6. Hero (page d'accueil)
   ----------------------------------------------------------------------- */
.hero {
    position: relative;
    min-height: min(88vh, 780px);
    display: flex;
    align-items: flex-end;
    color: #fff;
    overflow: hidden;
}

.hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 62%;
}

.hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(20, 16, 12, 0.15) 0%,
        rgba(20, 16, 12, 0.35) 55%,
        rgba(20, 16, 12, 0.82) 100%
    );
}

.hero-content {
    position: relative;
    z-index: 1;
    padding: 64px 24px 72px;
    max-width: var(--container-max);
    margin: 0 auto;
    width: 100%;
}

.hero-content .eyebrow { color: #F1E3D8; }

.hero-content h1 {
    color: #fff;
    max-width: 15ch;
}

.hero-lead {
    color: #EFE9DD;
    font-size: 1.15rem;
    max-width: 46ch;
    margin-bottom: 1.6em;
}

@media (max-width: 620px) {
    .hero { min-height: 92vh; align-items: flex-end; }
    .hero-content { padding-bottom: 48px; }
}

/* -----------------------------------------------------------------------
   6bis. Bloc "Mon activité" — photo + fond bastide
   ----------------------------------------------------------------------- */
.activity-intro {
    position: relative;
    padding: clamp(64px, 10vw, 120px) 0;
    background: #2A2420 url('/assets/images/placeholders/bastide-mon-activite.jpg') center / cover no-repeat;
    overflow: hidden;
}

.activity-overlay {
    /* Voile sombre renforcé pour garantir un contraste suffisant entre le
       texte blanc et la photo de fond, quelle que soit sa luminosité —
       l'image reste identifiable, mais le texte est lisible partout. */
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 12, 9, 0.55) 0%, rgba(15, 12, 9, 0.62) 100%);
}

.activity-intro .container {
    position: relative;
    z-index: 1;
}

.activity-block {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 56px;
    align-items: center;
}

.activity-photo img {
    width: 100%;
    max-width: 240px;
    height: auto;
    object-fit: cover;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-md);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4);
    border: 3px solid rgba(255, 255, 255, 0.85);
    margin: 0 auto;
}

.activity-text {
    /* Panneau semi-opaque en plus du voile global : garantit un contraste
       AA quel que soit l'endroit de la photo derrière le texte. */
    background: rgba(13, 10, 8, 0.4);
    padding: 30px 34px;
    border-radius: var(--radius-lg);
}
.activity-text .eyebrow { color: #F7EFE4; }
.activity-text h2 { color: #fff; }
.activity-text p { color: #fff; margin-bottom: 0; text-align: justify; font-weight: 500; }

@media (max-width: 820px) {
    .activity-block {
        grid-template-columns: 1fr;
        gap: 28px;
        text-align: center;
    }
    .activity-photo img { max-width: 190px; }
    .activity-text { padding: 24px; }
}

/* -----------------------------------------------------------------------
   7. Profil / bloc éditorial avec photo portrait
   ----------------------------------------------------------------------- */
.profile-block {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 56px;
    align-items: start;
}

.profile-photo-wrap {
    /* Variable dédiée pour ajuster facilement la taille de la photo de
       profil sans toucher au reste de la mise en page (voir README). */
    --profile-photo-width: 260px;
    width: var(--profile-photo-width);
}

.profile-photo {
    width: 100%;
    max-width: var(--profile-photo-width, 260px);
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    margin: 0 auto;
}

.profile-photo-caption {
    margin-top: 14px;
    font-size: 0.82rem;
    color: var(--color-text-soft);
    text-align: center;
}

@media (max-width: 820px) {
    .profile-block {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .profile-photo-wrap {
        --profile-photo-width: 200px;
        margin: 0 auto;
    }
}

/* -----------------------------------------------------------------------
   8. Cartes (secteur, atouts, biens)
   ----------------------------------------------------------------------- */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    padding: 28px;
}

.feature-card {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: 30px 26px;
    border: 1px solid var(--color-line);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.feature-card:hover {
    box-shadow: var(--shadow-card);
    transform: translateY(-3px);
}
.feature-card h3 { margin-bottom: 0.4em; }
.feature-card p { margin-bottom: 0; }

/* Carte de bien immobilier */
.property-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--color-line);
    box-shadow: var(--shadow-card);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    height: 100%;
}
.property-card:hover { transform: translateY(-4px); }

/* Rend toute la vignette cliquable (image, titre, zone) vers la fiche
   détaillée — voir partials/property-card.php. Le bouton "Voir la fiche
   détaillée" reste au-dessus (z-index) et donc cliquable indépendamment. */
.property-card-link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.property-card-media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--color-bg-alt);
    overflow: hidden;
}
.property-card-media img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.property-card-media .no-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--color-text-soft);
    font-size: 0.85rem;
    text-align: center;
    padding: 12px;
}

.property-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--color-ink);
    color: #fff;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    padding: 5px 11px;
    border-radius: 999px;
}

.property-card-body {
    padding: 20px 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.property-price-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.property-price {
    font-family: var(--font-serif);
    font-size: 1.3rem;
    color: var(--color-accent-dark);
}

.property-location {
    font-size: 0.88rem;
    color: var(--color-text-soft);
}

.property-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-top: 4px;
}

.property-meta span { display: inline-flex; align-items: center; gap: 6px; }

/* Carte "bien vendu" — non cliquable (la fiche détaillée affiche toujours
   un prix, jamais souhaité sur cette carte) : pas d'effet de survol ni de
   curseur pointeur hérités de .property-card. */
.property-card-vendu { cursor: default; }
.property-card-vendu:hover { transform: none; }
.property-card-vendu .property-card-media img { filter: saturate(0.9); }
.property-badge-vendu { background: var(--color-text-muted); }

.property-card-footer {
    position: relative;
    z-index: 2;
    margin-top: auto;
    padding-top: 12px;
}

/* -----------------------------------------------------------------------
   9. Filtres de recherche (biens à vendre / à louer)
   ----------------------------------------------------------------------- */
.filters-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-end;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    padding: 20px;
    margin-bottom: 36px;
}

.filter-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.filter-field select,
.filter-field input {
    min-width: 160px;
}

.results-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 18px;
    color: var(--color-text-soft);
    font-size: 0.9rem;
}

/* -----------------------------------------------------------------------
   10. États : chargement, vide, erreur
   ----------------------------------------------------------------------- */
.state-box {
    text-align: center;
    padding: 56px 24px;
    background: var(--color-bg-alt);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
}
.state-box h3 { color: var(--color-text); }

.alert {
    border-radius: var(--radius-sm);
    padding: 16px 18px;
    font-size: 0.92rem;
    margin-bottom: 20px;
}
.alert-success { background: var(--color-success-bg); color: var(--color-success-text); }
.alert-error { background: var(--color-error-bg); color: var(--color-error-text); }

.spinner {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 3px solid var(--color-line-strong);
    border-top-color: var(--color-accent);
    animation: spin 0.8s linear infinite;
    margin: 0 auto 14px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* -----------------------------------------------------------------------
   10bis. FAQ (accordéon) et avis clients
   ----------------------------------------------------------------------- */
.faq-list {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.faq-item {
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    padding: 4px 24px;
}
.faq-item summary {
    cursor: pointer;
    padding: 18px 0;
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-weight: 500;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+';
    flex-shrink: 0;
    font-size: 1.4rem;
    color: var(--color-accent-dark);
    transition: transform var(--transition-base);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-answer {
    padding-bottom: 20px;
    color: var(--color-text-muted);
}
.faq-answer p { margin: 0; }
.faq-answer a { color: var(--color-accent-dark); }

.rating-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: 999px;
    padding: 10px 20px;
    font-size: 0.92rem;
}
.rating-badge .stars { color: var(--color-accent-dark); letter-spacing: 1px; }
.rating-badge strong { font-family: var(--font-serif); font-size: 1.1rem; }

.testimonial-grid {
    margin-top: 28px;
}
.testimonial-card {
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    padding: 26px;
    height: 100%;
}
.testimonial-card .stars { color: var(--color-accent-dark); margin-bottom: 0.6em; display: block; letter-spacing: 1px; }
.testimonial-card blockquote {
    margin: 0 0 0.9em;
    color: var(--color-text);
    font-style: italic;
}
.testimonial-card cite {
    font-style: normal;
    color: var(--color-text-soft);
    font-size: 0.85rem;
}

/* -----------------------------------------------------------------------
   11. Fiche détail d'un bien
   ----------------------------------------------------------------------- */
.property-gallery {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 12px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 40px;
}
/* object-fit: contain (plutôt que cover) : chaque photo reste entièrement
   visible, sans découpage, quel que soit son format d'origine. Le fond
   neutre (--color-bg-alt) comble les espaces éventuels autour de la photo
   pour un rendu propre. */
.property-gallery img { width: 100%; height: 100%; object-fit: contain; background: var(--color-bg-alt); }
/* Correctif affichage photos (bien.php envoie jusqu'à 4 vignettes) :
   - grid-column:2 force TOUTES les vignettes dans la colonne de droite,
     quel que soit leur nombre. Avant ce correctif, seules les 2 premières
     vignettes tenaient à côté de la photo principale (qui ne couvrait que
     "span 2" lignes) ; les vignettes suivantes retombaient sur une nouvelle
     ligne pleine largeur, sous la photo principale — d'où des photos mal
     positionnées / à des endroits incohérents.
   - grid-row: span 4 (au lieu de span 2) : bien.php peut envoyer jusqu'à 4
     vignettes (array_slice($photos, 1, 4)), donc la photo principale doit
     pouvoir couvrir jusqu'à 4 lignes pour rester à côté de la colonne des
     vignettes sans laisser de vide en dessous. (Un essai avec une plage de
     lignes très large, du type "1 / 50", a été tenté puis abandonné : cela
     fait grandir démesurément la hauteur de la galerie car la grille n'a
     aucune ligne déclarée au-delà des vignettes réelles ; span 4 reste
     borné au nombre maximum réel de vignettes.) */
.property-gallery-main { grid-row: span 4; aspect-ratio: 4/3; background: var(--color-bg-alt); }
.property-gallery-thumb { grid-column: 2; aspect-ratio: 16/9; background: var(--color-bg-alt); }

@media (max-width: 720px) {
    .property-gallery { grid-template-columns: 1fr; }
    /* Sur mobile, la galerie repasse en une seule colonne (empilement
       naturel) : on annule les placements de grille ci-dessus pour que
       chaque photo occupe simplement toute la largeur, dans l'ordre. */
    .property-gallery-main, .property-gallery-thumb { aspect-ratio: 4/3; grid-row: auto; grid-column: auto; }
}

.property-detail-grid {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 48px;
}
@media (max-width: 900px) {
    .property-detail-grid { grid-template-columns: 1fr; }
}

.spec-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 24px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.spec-list li {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dashed var(--color-line);
    padding-bottom: 8px;
    color: var(--color-text-muted);
    font-size: 0.92rem;
}
.spec-list li strong { color: var(--color-text); font-weight: 600; }

.sticky-contact {
    position: sticky;
    top: 100px;
}
/* Espace clair entre le groupe de boutons et la référence du bien, pour que
   le texte ne soit jamais collé ni chevauché par le bouton au-dessus. */
.sticky-contact .btn-group { margin-bottom: 6px; }
.sticky-contact .form-footer-note {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed var(--color-line);
}

.dpe-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 32px;
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    border-radius: 4px 0 0 4px;
}
.dpe-A { background: #1a9850; } .dpe-B { background: #66bd63; }
.dpe-C { background: #a6d96a; color:#20301f;} .dpe-D { background: #fee08b; color:#3a2f0f;}
.dpe-E { background: #fdae61; } .dpe-F { background: #f46d43; } .dpe-G { background: #d73027; }

/* -----------------------------------------------------------------------
   12. Formulaires
   ----------------------------------------------------------------------- */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }

.form-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.form-field.full { grid-column: 1 / -1; }

label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-text);
}
.label-optional { color: var(--color-text-soft); font-weight: 400; font-size: 0.82em; }

input, select, textarea {
    font-family: var(--font-sans);
    font-size: 0.96rem;
    padding: 12px 14px;
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    width: 100%;
}
textarea { resize: vertical; min-height: 120px; }

input:invalid:not(:placeholder-shown) { border-color: var(--color-error-text); }

.field-error {
    color: var(--color-error-text);
    font-size: 0.82rem;
}

.consent-field {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.86rem;
    color: var(--color-text-muted);
}
.consent-field input { width: auto; margin-top: 3px; }

.form-footer-note {
    font-size: 0.8rem;
    color: var(--color-text-soft);
    margin-top: -6px;
}

/* -----------------------------------------------------------------------
   13. Pied de page
   ----------------------------------------------------------------------- */
.site-footer {
    background: var(--color-ink);
    color: #E8E4DA;
    padding: 64px 0 28px;
}
.site-footer a { color: #F1E3D8; }
.site-footer a:hover { color: #fff; }

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}
@media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr; gap: 32px; } }

.footer-brand { font-family: var(--font-serif); font-size: 1.3rem; color: #fff; margin-bottom: 10px; }
.footer-heading {
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #B7AF9E;
    margin-bottom: 14px;
}
.footer-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 0.92rem; }

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    padding-top: 24px;
    font-size: 0.82rem;
    color: #B7AF9E;
}

/* Bouton d'appel flottant mobile */
.mobile-call-bar {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 90;
    background: var(--color-ink);
    padding: 12px 16px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
}
.mobile-call-bar .btn { width: 100%; justify-content: center; }

@media (max-width: 620px) {
    .mobile-call-bar { display: block; }
    body { padding-bottom: 72px; }
}

/* -----------------------------------------------------------------------
   14. Bandeau cookies
   ----------------------------------------------------------------------- */
.cookie-banner {
    position: fixed;
    left: 16px; right: 16px; bottom: 16px;
    max-width: 620px;
    margin: 0 auto;
    background: var(--color-surface);
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    padding: 22px 24px;
    z-index: 300;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner p { font-size: 0.88rem; margin-bottom: 14px; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* -----------------------------------------------------------------------
   15. Fil d'Ariane
   ----------------------------------------------------------------------- */
.breadcrumb {
    font-size: 0.82rem;
    color: var(--color-text-soft);
    margin-bottom: 22px;
}
.breadcrumb a { color: var(--color-text-soft); }
.breadcrumb a:hover { color: var(--color-accent-dark); }
.breadcrumb .sep { margin: 0 6px; }

/* -----------------------------------------------------------------------
   16. Page d'erreur 404
   ----------------------------------------------------------------------- */
.error-page {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 24px;
}
.error-page .eyebrow { display: block; }

/* -----------------------------------------------------------------------
   17. Utilitaires
   ----------------------------------------------------------------------- */
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.text-center { text-align: center; }
.text-muted { color: var(--color-text-soft); }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-sm { gap: 10px; }
.gap-md { gap: 20px; }