@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Jost:wght@300;400;500;600;700&display=swap');

/* ═══════════════════════════════════════════
   ROOT — palette imposée par le CMS
═══════════════════════════════════════════ */
:root {
    --primary: #b5895e;
    --primary-dark: #8f6a45;
    --accent: #7c8363;
    --text: #3d362c;
    --text-light: #857a6c;
    --bg: #fffdfa;
    --bg-alt: #f4ece0;
    --white: #ffffff;
    --font-serif: 'Cormorant Garamond', serif;
    --font-sans: 'Jost', sans-serif;
    --container: 1100px;
    --header-height: 100px;
    --header-bg: transparent;
    --header-text: #fffdfa;

    /* Élévation */
    --shadow-sm: 0 1px 2px rgba(61,54,44,.06), 0 1px 3px rgba(61,54,44,.08);
    --shadow-md: 0 4px 12px rgba(61,54,44,.08), 0 2px 4px rgba(61,54,44,.06);
    --shadow-lg: 0 12px 32px rgba(61,54,44,.12), 0 4px 8px rgba(61,54,44,.06);
    --shadow-xl: 0 24px 56px rgba(61,54,44,.16);
    --shadow-brand: 0 18px 40px -12px color-mix(in srgb, var(--primary) 45%, transparent);

    /* Rythme spatial */
    --space-1: .5rem; --space-2: 1rem; --space-3: 1.5rem;
    --space-4: 2rem;  --space-6: 3rem; --space-8: 4rem; --space-12: 6rem;

    /* Rayons */
    --radius-sm: 8px; --radius-md: 14px; --radius-lg: 24px; --radius-pill: 999px;

    /* Easing */
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --dur-fast: .18s; --dur-base: .3s; --dur-slow: .6s;
}

/* ═══════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════ */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-sans);
    color: var(--text);
    background: var(--bg);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .likeH1, .likeH2 {
    font-family: var(--font-serif);
    font-weight: 600;
    color: var(--text);
}

h1, .likeH1 { font-size: clamp(2.1rem, 5vw + 1rem, 3.9rem); line-height: 1.06; letter-spacing: -.01em; display: block; }
h2, .likeH2 { font-size: clamp(1.6rem, 3vw + .5rem, 2.6rem); line-height: 1.15; letter-spacing: -.005em; display: block; }
h3 { font-size: clamp(1.25rem, 1.4vw + .8rem, 1.6rem); }
p, li { line-height: 1.7; }
.lead { font-size: clamp(1.05rem, 1vw + .9rem, 1.35rem); color: var(--text-light); }

a { color: var(--primary); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--primary-dark); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

section { padding-block: var(--space-12); }

/* ─── Images : jamais hors contenant ─── */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ─── Images dans cards/grilles : hauteur uniforme ─── */
.service-public-img,
.gallery-item,
.blog-post-img,
.rental-img,
.reassurance-image,
.review-card .author-img {
    overflow: hidden;
}
.service-public-img img,
.blog-post-img img,
.rental-img img {
    width: 100%;
    height: 230px;
    object-fit: cover;
    object-position: center;
}
.gallery-item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.reassurance-image img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.author-img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* ─── Conteneur — patron unique ─── */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--space-4);
}

/* ─── Micro-interactions : révélation au scroll ─── */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
    transition-delay: calc(var(--i, 0) * 90ms);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .reveal { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════
   DIVIDERS SVG — hero uniquement (HTML, toujours couplé à sa section)
═══════════════════════════════════════════ */
.divider {
    position: relative;
    width: 100%;
    height: 64px;
    line-height: 0;
    overflow: hidden;
    z-index: 2;
}
.divider svg {
    display: block;
    width: 100%;
    height: 100%;
}
.divider path { transition: fill var(--dur-base) var(--ease-out); }
.divider--bg path { fill: var(--bg); }
.divider--alt path { fill: var(--bg-alt); }
.divider--primary path { fill: var(--primary); }

/* ═══════════════════════════════════════════
   VAGUES DE SECTION — modules CMS optionnels
   ─────────────────────────────────────────────
   Ne JAMAIS utiliser un <div class="divider"> séparé entre deux blocs
   CMS ({{SERVICES}}, {{LOCATIONS}}, {{AVIS}}, {{REASSURANCE}}...) : si le
   module est désactivé/vide, le bloc CMS ne produit aucun HTML, mais un
   diviseur codé en dur dans layout.html s'affiche quand même — résultat :
   deux vagues encadrant une zone vide. La vague doit être un ::after
   directement posé sur la section réelle, dans SA PROPRE couleur de fond :
   si la section ne s'affiche pas, son ::after non plus. Voir mémoire
   websimply-divider-empty-gap-bug.
═══════════════════════════════════════════ */
.content-area,
.services-section-public,
.google-reviews-section,
.reassurance-section,
.cta-section {
    position: relative;
}
.content-area::after,
.services-section-public::after,
.google-reviews-section::after,
.reassurance-section::after,
.cta-section::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 56px;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1200,0 L1200,30 C1000,58 800,6 600,32 C400,58 200,6 0,32 Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1200,0 L1200,30 C1000,58 800,6 600,32 C400,58 200,6 0,32 Z'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    pointer-events: none;
    z-index: 3;
}
/* Chaque vague reprend UNIQUEMENT la couleur de fond de SA propre section
   (jamais celle de la section suivante, inconnue/optionnelle) : posée sur
   du contenu réel, elle reste cohérente quel que soit ce qui suit. */
.content-area::after { background-color: var(--bg); }
.services-section-public::after { background-color: var(--bg-alt); }
.google-reviews-section::after { background-color: var(--bg); }
.reassurance-section::after { background-color: var(--bg-alt); }
.cta-section::after { background-color: var(--primary); }

/* ═══════════════════════════════════════════
   HEADER
═══════════════════════════════════════════ */
header.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--header-height);
    background: var(--header-bg);
    color: var(--header-text);
    z-index: 1000;
    transition: background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}
header.site-header.scrolled {
    /* Fond sombre identique au footer une fois le header collé en haut */
    background: var(--text);
    box-shadow: var(--shadow-md);
}
.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    gap: var(--space-4);
}
.logo img {
    height: calc(var(--header-height) * 0.9);
    width: auto;
    display: block;
}

/* ═══════════════════════════════════════════
   BURGER
═══════════════════════════════════════════ */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px; height: 44px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1100;
    flex-shrink: 0;
}
.burger-line {
    display: block;
    width: 24px; height: 2px;
    background: var(--header-text);
    border-radius: 2px;
    transition: transform var(--dur-base) var(--ease-out),
                opacity var(--dur-fast) var(--ease-out),
                width var(--dur-base) var(--ease-out);
    transform-origin: center;
}
.menu-toggle.is-open .burger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.is-open .burger-line:nth-child(2) { opacity: 0; width: 0; }
.menu-toggle.is-open .burger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ═══════════════════════════════════════════
   OVERLAY MOBILE
═══════════════════════════════════════════ */
.nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(61, 54, 44, 0.5);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-out);
}
.nav-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* ═══════════════════════════════════════════
   NAV DESKTOP
═══════════════════════════════════════════ */
nav.main-nav > ul {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    list-style: none;
}
nav.main-nav > ul > li > a {
    display: block;
    padding: .5rem var(--space-2);
    color: var(--header-text);
    font-family: var(--font-sans);
    font-size: .9rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--dur-fast) var(--ease-out);
    position: relative;
}
nav.main-nav > ul > li > a::after {
    content: '';
    position: absolute;
    left: var(--space-2); right: var(--space-2); bottom: -2px;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--dur-base) var(--ease-out);
}
nav.main-nav > ul > li > a:hover,
nav.main-nav > ul > li > a:focus-visible {
    color: var(--accent);
    outline: none;
}
nav.main-nav > ul > li > a:hover::after { transform: scaleX(1); transform-origin: left; }

/* Sous-menu desktop */
.has-submenu { position: relative; }
.submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 210px;
    background: var(--bg);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(61,54,44,.08);
    padding: var(--space-1) 0;
    list-style: none;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
    z-index: 1050;
    display: block;
}
.has-submenu:hover > .submenu,
.has-submenu:focus-within > .submenu,
.submenu:hover {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.submenu li a {
    color: var(--text) !important;
    padding: .55rem var(--space-3) !important;
    font-size: .875rem !important;
    display: block;
    width: 100%;
    box-sizing: border-box;
    transition: background var(--dur-fast), color var(--dur-fast);
}
.submenu li a::after { display: none; }
.submenu li a:hover {
    background: var(--bg-alt);
    color: var(--primary) !important;
}
.submenu-arrow {
    display: inline-block;
    font-size: .65rem;
    margin-left: .3rem;
    transition: transform var(--dur-base) var(--ease-out);
    vertical-align: middle;
}
.has-submenu:hover > a .submenu-arrow { transform: rotate(180deg); }
.submenu-toggle { display: none; }

/* ═══════════════════════════════════════════
   RESPONSIVE HEADER & MENU ≤ 991px
═══════════════════════════════════════════ */
@media (max-width: 991px) {
    .menu-toggle { display: flex; }
    .nav-overlay { display: block; }
    body.menu-open { overflow: hidden; }

    nav.main-nav {
        position: fixed;
        top: 0; right: 0;
        width: min(320px, 85vw);
        height: 100dvh;
        background: var(--bg);
        box-shadow: var(--shadow-xl);
        z-index: 1000;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: calc(var(--header-height) + var(--space-4)) 0 env(safe-area-inset-bottom, 24px);
        transform: translateX(110%);
        transition: transform var(--dur-base) var(--ease-out);
    }
    nav.main-nav.active { transform: translateX(0); }

    nav.main-nav > ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    nav.main-nav > ul > li {
        border-bottom: 1px solid var(--bg-alt);
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
    nav.main-nav > ul > li > a {
        color: var(--text);
        padding: var(--space-3) var(--space-4);
        font-size: 1rem;
        flex: 1;
        min-height: 52px;
        display: flex;
        align-items: center;
    }
    nav.main-nav > ul > li > a::after { display: none; }
    nav.main-nav > ul > li > a:hover { color: var(--primary); }

    .submenu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 52px; height: 52px;
        background: transparent;
        border: none;
        cursor: pointer;
        color: var(--text-light);
        flex-shrink: 0;
        transition: color var(--dur-fast), transform var(--dur-base) var(--ease-out);
    }
    .submenu-toggle[aria-expanded="true"] { color: var(--primary); transform: rotate(180deg); }

    .submenu {
        position: static;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        box-shadow: none;
        border: none;
        border-radius: 0;
        background: var(--bg-alt);
        width: 100%;
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--dur-slow) var(--ease-out);
        padding: 0;
    }
    .submenu.open { max-height: 500px; }
    .submenu li { border-bottom: 1px solid rgba(61,54,44,.06); }
    .submenu li:last-child { border: none; }
    .submenu li a {
        padding: var(--space-2) var(--space-4) var(--space-2) calc(var(--space-4) + var(--space-2)) !important;
        font-size: .9rem !important;
        min-height: 48px;
        color: var(--text) !important;
    }
    .submenu li a:hover { color: var(--primary) !important; }
    .submenu-arrow { display: none; }
    .has-submenu:hover > .submenu { opacity: 1; pointer-events: auto; transform: none; }
}

/* ═══════════════════════════════════════════
   HERO — plein cadre, 50% de la hauteur d'écran
═══════════════════════════════════════════ */
.hero {
    position: relative;
    height: 50vh;
    min-height: 460px;
    max-height: 760px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}
/* Hero "plein cadre" genere par le CMS sur les pages automatiques
   (actualites.html liste et detail, etc.) : markup .hero-media / .hero-bg-img /
   .hero-content, independant du design du hero utilise sur les autres pages.
   Sans ces regles l'image s'affiche a sa taille native, collee en haut a
   gauche du hero. */
.hero { position: relative; overflow: hidden; }
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img,
.hero-bg-img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

.hero-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--primary-dark) 55%, transparent);
    z-index: 1;
}
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    color: var(--white);
}

/* Sibling direct de .hero — jamais imbriqué dans .hero-wrapper (voir note fullbleed-hero) */
.hero-image-col {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.hero-image-col .hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 38%;
}
.hero-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(35,28,18,.1) 0%, rgba(35,28,18,.28) 55%, rgba(35,28,18,.62) 100%);
    z-index: 1;
}
.hero-wrapper {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-top: calc(var(--header-height) + var(--space-4));
    padding-bottom: var(--space-8);
}
.hero-text-col {
    max-width: 640px;
    animation: heroFadeUp var(--dur-slow) var(--ease-out) both;
}
.hero-text-col .likeH1 {
    color: var(--white);
    text-shadow: 0 2px 24px rgba(0,0,0,.18);
}
.hero-note, .hero-text-col > p:not(.hero-description) {
    color: rgba(255,255,255,.92);
    font-family: var(--font-serif);
    font-size: clamp(1.1rem, 1.4vw + .6rem, 1.5rem);
    margin-top: var(--space-1);
}
.hero-description {
    color: rgba(255,255,255,.88);
    font-size: clamp(1rem, .6vw + .9rem, 1.15rem);
    margin-top: var(--space-2);
    max-width: 52ch;
}
.hero .divider {
    position: absolute;
    left: 0; bottom: -1px;
    z-index: 3;
    height: 54px;
}

/* Variante compacte pour les pages secondaires (contact, mentions légales).
   Le hero principal (50vh) est assez haut pour que le padding-top de
   .hero-wrapper (header-height + space-4) laisse largement de la place ;
   sur la variante compacte, ce même padding-top pouvait à lui seul
   dépasser la hauteur réduite du hero et pousser le texte à cheval sous
   le header fixe ("Contact" collé sous le logo). Fix : le dégagement du
   header est porté par .hero lui-même (padding-top), et le contenu est
   centré verticalement dans l'espace restant — toujours dégagé du header,
   quelle que soit la hauteur de l'écran. */
.hero.hero--compact {
    height: 34vh;
    min-height: 320px;
    max-height: 420px;
    align-items: center;
    padding-top: var(--header-height);
}
.hero.hero--compact .hero-wrapper {
    padding-top: 0;
    padding-bottom: 0;
}

@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════
   SECTION TÉLÉPHONE
═══════════════════════════════════════════ */
.phone-section {
    background: var(--bg);
    padding-block: var(--space-6);
}
.phone-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.phone-text {
    font-family: var(--font-serif);
    font-size: clamp(1.2rem, 1.4vw + .8rem, 1.7rem);
    color: var(--text);
}
.phone-btn {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .9rem var(--space-4);
    border-radius: var(--radius-pill);
    background: var(--primary);
    color: var(--white);
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--shadow-brand);
    transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.phone-btn:hover { transform: translateY(-2px); color: var(--white); }

/* ═══════════════════════════════════════════
   CONTENU PRINCIPAL
═══════════════════════════════════════════ */
.content-area { background: var(--bg); }

/* Rattrapage header fixe/absolu sur les pages sans hero (IMAGE_MAIN vide) : actualites.html (liste et detail), et toute page sans image principale. Sans ce correctif, le contenu qui suit directement le header dans le DOM passe sous celui-ci (texte masque). Le selecteur `+` ne cible que le cas ou l'element suit directement le header (pas de hero entre les deux). */
header.site-header + .content-area,
header.site-header + .phone-section {
    padding-top: calc(var(--header-height) + var(--space-8));
}

.content-area h1 { margin-bottom: var(--space-3); }
.html-content { color: var(--text); }
.html-content p { margin-bottom: var(--space-2); }
.html-content h2, .html-content h3 { margin-top: var(--space-4); margin-bottom: var(--space-2); }
.html-content ul, .html-content ol { margin: var(--space-2) 0 var(--space-2) var(--space-4); }
.html-content li { margin-bottom: .4rem; }
.html-content img { border-radius: var(--radius-md); margin-block: var(--space-2); box-shadow: var(--shadow-sm); }
.html-content table { width: 100%; border-collapse: collapse; margin-block: var(--space-3); }
.html-content table th, .html-content table td { padding: .7rem var(--space-2); border-bottom: 1px solid var(--bg-alt); text-align: left; }
.html-content table th { font-family: var(--font-serif); color: var(--primary-dark); }
.html-content blockquote {
    border-left: 3px solid var(--accent);
    padding-left: var(--space-3);
    color: var(--text-light);
    font-style: italic;
    font-family: var(--font-serif);
    font-size: 1.15rem;
    margin-block: var(--space-3);
}

/* ═══════════════════════════════════════════
   GALERIE
═══════════════════════════════════════════ */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    margin-top: var(--space-4);
}
.gallery-item {
    border-radius: var(--radius-md);
    cursor: zoom-in;
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.gallery-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.gallery-item img { transition: transform var(--dur-slow) var(--ease-out); }
.gallery-item:hover img { transform: scale(1.06); }

/* ═══════════════════════════════════════════
   LIGHTBOX
═══════════════════════════════════════════ */
#lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(20,16,10,.92);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out);
}
#lightbox-overlay.active { opacity: 1; }
.lightbox-img-container { max-width: 90vw; max-height: 85vh; text-align: center; }
#lightbox-img { max-width: 90vw; max-height: 80vh; border-radius: var(--radius-sm); box-shadow: var(--shadow-xl); }
#lightbox-caption { color: var(--white); margin-top: var(--space-2); font-family: var(--font-sans); opacity: .8; }
.lightbox-close {
    position: absolute;
    top: var(--space-4); right: var(--space-4);
    font-size: 2.4rem;
    color: var(--white);
    cursor: pointer;
    line-height: 1;
    transition: opacity var(--dur-fast) var(--ease-out);
}
.lightbox-close:hover { opacity: .7; }
.lightbox-nav {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    width: 52px; height: 52px;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    border: none;
    color: var(--white);
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out);
}
.lightbox-nav:hover { background: rgba(255,255,255,.25); }
.lightbox-prev { left: var(--space-4); }
.lightbox-next { right: var(--space-4); }

/* ═══════════════════════════════════════════
   SERVICES
═══════════════════════════════════════════ */
.services-section-public { background: var(--bg-alt); }
.services-section-public .section-title,
.services-section-public h2 { text-align: center; margin-bottom: var(--space-6); }
.services-public-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}
.service-public-card {
    background: var(--bg);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border-bottom: 3px solid var(--accent);
    display: flex;
    flex-direction: column;
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.service-public-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.service-public-img img { transition: transform var(--dur-slow) var(--ease-out); }
.service-public-card:hover .service-public-img img { transform: scale(1.06); }
.service-public-body { padding: var(--space-3); flex: 1; display: flex; flex-direction: column; gap: .6rem; }
.service-public-body h3 { color: var(--text); }
.service-public-body p { color: var(--text-light); font-size: .95rem; }
.service-public-footer {
    padding: 0 var(--space-3) var(--space-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-top: auto;
}
.price-from { font-weight: 600; color: var(--primary); font-family: var(--font-serif); font-size: 1.2rem; }
.btn-service, .btn-gallery-service {
    padding: .55rem var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--primary);
    color: var(--white);
    font-size: .85rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-out);
}
.btn-service:hover, .btn-gallery-service:hover { background: var(--primary-dark); color: var(--white); }

/* ═══════════════════════════════════════════
   CTA
═══════════════════════════════════════════ */
.cta-section {
    background: var(--primary);
    color: var(--white);
    text-align: center;
}
.cta-section .likeH2 { color: var(--white); }
.cta-paragraph { color: rgba(255,255,255,.9); max-width: 60ch; margin: var(--space-2) auto var(--space-4); }
.btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .9rem var(--space-4);
    border-radius: var(--radius-pill);
    background: var(--white);
    color: var(--primary-dark);
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--shadow-lg);
    transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-xl); }
.btn:active { transform: translateY(0) scale(.98); }

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
footer.site-footer {
    background: var(--text);
    color: var(--bg-alt);
    padding-block: var(--space-8) var(--space-6);
    padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
}
.footer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    margin-bottom: var(--space-6);
}
.footer-col h3 { color: var(--bg); font-family: var(--font-serif); margin-bottom: var(--space-2); }
.footer-col p { color: rgba(255,253,250,.72); font-size: .95rem; }
.footer-col a { color: rgba(255,253,250,.85); }
.footer-col a:hover { color: var(--accent); }
.copyright {
    border-top: 1px solid rgba(255,253,250,.15);
    padding-top: var(--space-3);
    text-align: center;
    font-size: .85rem;
    color: rgba(255,253,250,.6);
}
.copyright a { color: var(--accent); }

/* ═══════════════════════════════════════════
   PAGE CONTACT
═══════════════════════════════════════════ */
.contact-grid {
    display: flex;
    gap: var(--space-6);
    align-items: flex-start;
}
.contact-info { flex: 1; }
.contact-details { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.contact-details p { display: flex; align-items: center; gap: .6rem; color: var(--text-light); }
.contact-details i { color: var(--primary); width: 20px; }
.contact-form {
    flex: 1.2;
    background: var(--bg-alt);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.form-group { margin-bottom: var(--space-2); }
.form-group label { display: block; margin-bottom: .35rem; font-size: .9rem; color: var(--text); font-weight: 500; }
.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: .75rem var(--space-2);
    border: 1px solid rgba(61,54,44,.15);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: .95rem;
    background: var(--bg);
    color: var(--text);
    transition: border-color var(--dur-fast) var(--ease-out);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { border-color: var(--primary); outline: none; }
.honeypot-field { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

dialog#contact-success-modal {
    border: none;
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-xl);
    max-width: 420px;
    text-align: center;
}
dialog#contact-success-modal::backdrop { background: rgba(35,28,18,.55); }
dialog#contact-success-modal i { font-size: 2.4rem; color: var(--accent); margin-bottom: var(--space-2); }
dialog#contact-success-modal .btn { margin-top: var(--space-3); background: var(--primary); color: var(--white); }

/* ═══════════════════════════════════════════
   AVIS GOOGLE
═══════════════════════════════════════════ */
.google-reviews-section { background: var(--bg); }
.reviews-header { text-align: center; margin-bottom: var(--space-6); }
.rating-summary { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-top: var(--space-2); }
.rating-value { font-family: var(--font-serif); font-size: 2.2rem; color: var(--primary); font-weight: 700; }
.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-4);
}
.review-card {
    background: var(--bg-alt);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.review-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.review-meta { display: flex; align-items: center; gap: var(--space-2); margin-bottom: .6rem; }
.review-meta strong { color: var(--text); }
.review-stars { color: var(--accent); font-size: .85rem; }
.review-text { color: var(--text-light); font-size: .95rem; }

/* ═══════════════════════════════════════════
   RÉASSURANCE
═══════════════════════════════════════════ */
.reassurance-section { background: var(--bg-alt); }
.reassurance-title { text-align: center; margin-bottom: var(--space-6); }
.reassurance-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}
.reassurance-card {
    background: var(--bg);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    text-align: center;
    padding-bottom: var(--space-3);
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.reassurance-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.reassurance-visuel-wrapper { display: flex; align-items: center; justify-content: center; }
.reassurance-icon {
    width: 64px; height: 64px;
    display: flex; align-items: center; justify-content: center;
    margin: var(--space-3) auto var(--space-2);
    border-radius: 50%;
    background: var(--bg-alt);
    color: var(--primary);
    font-size: 1.6rem;
}
.reassurance-card-title { font-family: var(--font-serif); margin-bottom: .4rem; padding-inline: var(--space-2); }
.reassurance-card-desc { color: var(--text-light); font-size: .9rem; padding-inline: var(--space-3); }

/* ═══════════════════════════════════════════
   FAQ — grille de cartes, réponses toujours visibles (sans accordéon)
═══════════════════════════════════════════ */
.faq-section { background: var(--bg-alt); }
.faq-title {
    text-align: center;
    margin: 0 auto var(--space-8);
    max-width: 640px;
}
.faq-title::after {
    content: '';
    display: block;
    width: 56px;
    height: 3px;
    margin: var(--space-2) auto 0;
    background: var(--primary);
    border-radius: var(--radius-pill);
}
.faq-list {
    max-width: 980px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    counter-reset: faq-counter;
}
.faq-item {
    position: relative;
    counter-increment: faq-counter;
    background: var(--bg);
    border: 1px solid rgba(181, 137, 94, .16);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4);
    overflow: hidden;
    transition: transform var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out);
}
.faq-item::before {
    content: counter(faq-counter, decimal-leading-zero);
    position: absolute;
    top: var(--space-1);
    right: var(--space-3);
    font-family: var(--font-serif);
    font-size: 2.6rem;
    font-weight: 600;
    color: var(--bg-alt);
    line-height: 1;
    z-index: 0;
    pointer-events: none;
}
.faq-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary);
}
/* Le CMS injecte un <button> avec un onclick d'accordéon codé en dur ;
   on le neutralise visuellement pour afficher la réponse en permanence. */
.faq-question {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    width: 100%;
    background: none;
    border: none;
    margin: 0;
    padding: 0 var(--space-4) var(--space-2) 0;
    font-family: var(--font-serif);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text);
    text-align: left;
    cursor: default;
}
.faq-question span { flex: 1; }
.faq-icon,
.faq-item.open .faq-icon { display: none; }
.faq-answer,
.faq-item.open .faq-answer {
    position: relative;
    z-index: 1;
    max-height: none !important;
    overflow: visible;
    padding: var(--space-2) 0 0 !important;
    margin-top: var(--space-1);
    border-top: 1px solid var(--bg-alt);
    color: var(--text-light);
    font-size: .96rem;
}

/* ═══════════════════════════════════════════
   RÉSEAUX SOCIAUX
═══════════════════════════════════════════ */
.social-networks-block { background: var(--bg-alt); text-align: center; padding-block: var(--space-6); }
.social-networks-title { margin-bottom: var(--space-3); }
.social-networks-icons { display: flex; align-items: center; justify-content: center; gap: var(--space-2); }
.social-link {
    width: 46px; height: 46px;
    border-radius: 50%;
    background: var(--bg);
    color: var(--text);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur-fast) var(--ease-out), background var(--dur-base), color var(--dur-base);
}
.social-link:hover { transform: translateY(-3px); }
.social-link--facebook:hover { background: #1877f2; color: var(--white); }
.social-link--instagram:hover { background: radial-gradient(circle at 30% 110%, #fdf497, #fd5949 45%, #d6249f 60%, #285AEB 90%); color: var(--white); }
.social-link--linkedin:hover { background: #0a66c2; color: var(--white); }
.social-link--tiktok:hover { background: #000; color: var(--white); }
.social-link--youtube:hover { background: #ff0000; color: var(--white); }
.social-link--x:hover { background: #000; color: var(--white); }

/* ═══════════════════════════════════════════
   BLOG
═══════════════════════════════════════════ */
.blog-posts-list { background: var(--bg); }
.blog-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}
.blog-post-card {
    background: var(--bg-alt);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.blog-post-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.blog-post-body { padding: var(--space-3); flex: 1; display: flex; flex-direction: column; gap: .5rem; }
.blog-post-date { font-size: .8rem; color: var(--text-light); text-transform: uppercase; letter-spacing: .04em; }
.btn-read-more { color: var(--primary); font-weight: 600; font-size: .9rem; margin-top: auto; }
.blog-post-detail-img { border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--space-3); }
.blog-post-detail-meta { color: var(--text-light); font-size: .9rem; margin-bottom: var(--space-3); }
.blog-post-detail-content { line-height: 1.75; }
.blog-pagination { display: flex; justify-content: center; gap: var(--space-1); margin-top: var(--space-6); }
.blog-pagination a, .blog-pagination span {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    color: var(--text);
    font-weight: 500;
}
.blog-pagination a:hover { background: var(--bg-alt); }
.blog-pagination .active { background: var(--primary); color: var(--white); }

/* ═══════════════════════════════════════════
   LOCATIONS / RÉSERVATIONS
═══════════════════════════════════════════ */
.rentals-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}
.rental-card {
    background: var(--bg-alt);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.rental-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.rental-body { padding: var(--space-3); }
.rental-nature { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--primary); }
.rental-desc { color: var(--text-light); font-size: .92rem; margin-top: .4rem; }
.rental-detail-container { display: flex; gap: var(--space-6); }
.rental-detail-left, .rental-detail-right { flex: 1; }

.calendar-grid-css { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calendar-day-header { text-align: center; font-size: .75rem; font-weight: 600; padding: .4rem 0; }
.calendar-day {
    aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm); font-size: .85rem;
}
.calendar-day.empty { visibility: hidden; }
.calendar-day.selected-start,
.calendar-day.selected-end { background: var(--primary); color: var(--white); }
.calendar-day.selected-range { background: rgba(181,137,94,.18); }

/* Boîtes forcées en blanc par le CMS (voir mémoire pièges de contraste) */
.calendar-box, .booking-form-box {
    --text-2: #64748b;
    --border: #e2e8f0;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-3);
}
.calendar-box h4, .booking-form-box h4,
.calendar-box #cal-month-title { color: #1e293b; }
.calendar-box #cal-prev-btn,
.calendar-box #cal-next-btn { color: #1e293b !important; }
.calendar-day-header { color: #64748b; }
.calendar-day.past { color: #cbd5e1; background: #f8fafc; }
.calendar-day.booked { background: rgba(239,68,68,.15); color: #ef4444; }
.calendar-day.available { background: rgba(124,131,99,.16); color: #4b5940; }
#booking-request-form label { color: #1e293b; }
#booking-request-form input,
#booking-request-form select,
#booking-request-form textarea {
    border: 1px solid #cbd5e1; color: #1e293b; background: #fff;
}
#booking-request-form input::placeholder,
#booking-request-form textarea::placeholder { color: #94a3b8; }

/* Boutons "retour" injectés par le CMS */
a.btn[href="reservation.html"],
a.btn[href="actualites.html"] {
    background: var(--bg-alt) !important;
    color: var(--text) !important;
    border: 1px solid rgba(61,54,44,.12) !important;
    box-shadow: none !important;
}
a.btn[href="reservation.html"]:hover,
a.btn[href="actualites.html"]:hover { background: var(--bg) !important; }

/* ═══════════════════════════════════════════
   BOUTIQUE / CATALOGUE
═══════════════════════════════════════════ */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}
.shop-count { color: var(--text-light); margin-bottom: var(--space-3); }
.shop-controls {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--space-3); margin-bottom: var(--space-4);
}
.shop-filters { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.shop-filter-btn {
    padding: .45rem var(--space-2);
    border-radius: var(--radius-pill);
    border: 1px solid var(--bg-alt);
    background: var(--bg);
    color: var(--text);
    font-size: .85rem;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.shop-filter-btn:hover, .shop-filter-btn.active { background: var(--primary); color: var(--white); border-color: var(--primary); }
.shop-sort-wrapper { display: flex; align-items: center; gap: var(--space-1); font-size: .85rem; color: var(--text-light); }
.shop-sort-select { padding: .4rem var(--space-2); border-radius: var(--radius-sm); border: 1px solid var(--bg-alt); background: var(--bg); color: var(--text); }

.shop-card {
    display: flex; flex-direction: column;
    background: var(--bg);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.shop-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.shop-card-img { position: relative; overflow: hidden; }
.shop-card-img img { width: 100%; height: 220px; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.shop-card:hover .shop-card-img img { transform: scale(1.06); }
.shop-card-no-photo { width: 100%; height: 220px; display: flex; align-items: center; justify-content: center; background: var(--bg-alt); color: var(--text-light); font-size: 2rem; }
.shop-card-tags { position: absolute; top: var(--space-2); left: var(--space-2); display: flex; gap: .35rem; flex-wrap: wrap; }
.shop-tag { padding: .2rem .6rem; border-radius: var(--radius-pill); background: rgba(255,255,255,.92); color: var(--text); font-size: .7rem; font-weight: 600; }
.shop-badge-sold { position: absolute; top: var(--space-2); right: var(--space-2); padding: .25rem .7rem; border-radius: var(--radius-pill); background: var(--text); color: var(--white); font-size: .7rem; font-weight: 600; }
.shop-card-body { padding: var(--space-3); display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.shop-card-body h3 { font-size: 1.05rem; }
.shop-card-body h3 a { color: var(--text); text-decoration: none; }
.shop-card-body h3 a:hover { color: var(--primary); }
.shop-card-desc { color: var(--text-light); font-size: .9rem; flex: 1; }
.shop-card-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: auto; }
.shop-price { font-weight: 700; color: var(--primary); }
.shop-price-currency { font-weight: 500; }
.shop-price-sold { color: var(--text-light); font-size: .85rem; font-style: italic; }
.shop-card-btn { padding: .5rem var(--space-2); border-radius: var(--radius-pill); background: var(--primary); color: var(--white); font-size: .8rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background var(--dur-fast) var(--ease-out); }
.shop-card-btn:hover { background: var(--primary-dark); color: var(--white); }

.shop-product-detail { display: flex; gap: var(--space-6); margin-bottom: var(--space-6); }
.shop-gallery-col { flex: 1; min-width: 0; }
.shop-main-photo { aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden; cursor: zoom-in; box-shadow: var(--shadow-md); }
.shop-main-photo img { width: 100%; height: 100%; object-fit: cover; }
.shop-thumbs { display: flex; gap: var(--space-1); margin-top: var(--space-2); flex-wrap: wrap; }
.shop-thumb { width: 64px; height: 64px; border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; border: 2px solid transparent; opacity: .65; transition: opacity var(--dur-fast), border-color var(--dur-fast); }
.shop-thumb img { width: 100%; height: 100%; object-fit: cover; }
.shop-thumb.active, .shop-thumb:hover { opacity: 1; border-color: var(--primary); }

.shop-product-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.shop-info-tags { display: flex; gap: .35rem; flex-wrap: wrap; }
.shop-info-badge-sold { align-self: flex-start; padding: .3rem .8rem; border-radius: var(--radius-pill); background: var(--text); color: var(--white); font-size: .75rem; font-weight: 600; }
.shop-price-big { font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem); font-weight: 700; color: var(--primary); font-family: var(--font-serif); }
.shop-price-sold-label { color: var(--text-light); font-style: italic; }
.shop-product-excerpt { color: var(--text-light); line-height: 1.7; }
.shop-cta-wrapper { margin-top: var(--space-2); }
.shop-cta-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .8rem var(--space-4); border-radius: var(--radius-pill); background: var(--primary); color: var(--white); font-weight: 600; text-decoration: none; box-shadow: var(--shadow-brand); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.shop-cta-btn:hover { transform: translateY(-2px); color: var(--white); }
.shop-cta-btn-sold { display: inline-flex; align-items: center; gap: .5rem; color: var(--text-light); font-weight: 600; }
.shop-product-content { line-height: 1.7; margin-bottom: var(--space-6); }
.shop-video-section { margin-bottom: var(--space-6); }
.shop-section-title { margin-bottom: var(--space-3); }
.shop-back-link { display: inline-flex; align-items: center; gap: .5rem; color: var(--text); text-decoration: none; font-weight: 600; transition: color var(--dur-fast) var(--ease-out); }
.shop-back-link:hover { color: var(--primary); }

/* ═══════════════════════════════════════════
   EXIT POPUP (RAPPEL)
═══════════════════════════════════════════ */
.exit-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(35,28,18,.6);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-out);
}
.exit-popup-overlay.active { opacity: 1; pointer-events: auto; }
.exit-popup-card {
    background: var(--bg);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    max-width: 440px;
    text-align: center;
    box-shadow: var(--shadow-xl);
    position: relative;
}
.exit-popup-close { position: absolute; top: var(--space-2); right: var(--space-2); font-size: 1.5rem; cursor: pointer; color: var(--text-light); }
.exit-popup-subtitle { color: var(--primary); text-transform: uppercase; font-size: .8rem; letter-spacing: .08em; margin-bottom: .4rem; }
.exit-popup-title { margin-bottom: var(--space-2); }
.exit-popup-text { color: var(--text-light); margin-bottom: var(--space-3); }
.exit-popup-phone-wrapper { display: flex; justify-content: center; }
.exit-popup-phone-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .8rem var(--space-4);
    border-radius: var(--radius-pill);
    background: var(--primary);
    color: var(--white);
    font-weight: 600;
    text-decoration: none;
}
.exit-popup-phone-btn:hover { background: var(--primary-dark); color: var(--white); }

/* ═══════════════════════════════════════════
   RESPONSIVE GLOBAL ≤ 991px
═══════════════════════════════════════════ */
@media (max-width: 991px) {
    .hero { height: 56vh; min-height: 400px; }
    .hero.hero--compact { height: 30vh; min-height: 260px; }
    .hero-text-col { max-width: 100%; text-align: center; margin-inline: auto; }
    .hero-description { margin-inline: auto; }

    .services-public-grid,
    .reassurance-grid,
    .reviews-grid,
    .blog-posts-grid,
    .shop-grid,
    .rentals-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════
   RESPONSIVE MOBILE ≤ 768px
═══════════════════════════════════════════ */
@media (max-width: 768px) {
    .container { padding-inline: var(--space-3); }
    section { padding-block: var(--space-6); }

    .hero {
        height: 60vh;
        min-height: 380px;
        padding-top: 0;
        clip-path: none !important;
        border-radius: 0 !important;
    }
    .hero.hero--compact { height: 28vh; min-height: 220px; }
    .hero-wrapper { padding-top: calc(var(--header-height) + var(--space-3)); padding-bottom: var(--space-6); }
    .divider { height: 34px; }
    .hero .divider { height: 34px; }
    .content-area::after,
    .services-section-public::after,
    .google-reviews-section::after,
    .reassurance-section::after,
    .cta-section::after { height: 34px; }

    .services-public-grid,
    .reassurance-grid,
    .reviews-grid,
    .blog-posts-grid,
    .shop-grid,
    .rentals-grid { grid-template-columns: 1fr; }
    .faq-list { grid-template-columns: 1fr; }
    .faq-item::before { font-size: 2rem; }
    .footer-grid { grid-template-columns: 1fr; gap: var(--space-6); }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }

    .contact-grid { flex-direction: column; }
    .rental-detail-container { flex-direction: column; }
    .rental-detail-left, .rental-detail-right { width: 100%; }
    .shop-product-detail { flex-direction: column; }

    .btn { width: 100%; text-align: center; justify-content: center; }
    .phone-wrapper { flex-direction: column; gap: var(--space-3); text-align: center; }
    .phone-btn { width: 100%; justify-content: center; }

    .lightbox-nav { width: 44px; height: 44px; }
    .lightbox-close { font-size: 2rem; top: var(--space-3); right: var(--space-3); }

    .exit-popup-card {
        width: calc(100vw - var(--space-6));
        padding: var(--space-4);
        border-radius: var(--radius-md);
        margin-inline: var(--space-3);
    }
}