/* ===================================================================
   L'instant NOVA — stylesheet
   Palette: warm cream / beige with a gold accent, inspired by the
   brand's moodboard (soft spa atmosphere, elegant serif headings).
   =================================================================== */

:root {
    --color-bg: #fbf6ed;
    --color-bg-alt: #f1e4cb;
    --color-surface: #ffffff;
    --color-text: #2a241c;
    --color-text-muted: #6b6153;
    --color-gold: #b98b3e;
    --color-gold-dark: #8f6b2e;
    --color-gold-light: #e7cd93;
    --color-border: #e6d8b8;

    --font-heading: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
    --font-body: 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;

    --radius: 16px;
    --radius-sm: 10px;
    --shadow: 0 12px 32px rgba(60, 45, 15, 0.08);
    --container-width: 1120px;
}

* { box-sizing: border-box; }

/* Always reserve the vertical scrollbar's width, even on pages short
   enough not to need one (e.g. Contact vs. the longer Massages page).
   Without this, those pages render ~15px wider, and the centered header/
   content sits a few pixels further right than on pages with a
   scrollbar — visible as a slight side-to-side shift between pages.
   scrollbar-gutter is the modern way to do this without always drawing a
   visible track; overflow-y is the same fix for browsers that don't
   support it yet. */
html {
    scroll-behavior: smooth;
    overflow-y: scroll;
    scrollbar-gutter: stable;
}

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.6;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 400;
    line-height: 1.2;
    margin: 0 0 0.6em;
    color: var(--color-text);
}

h1 { font-size: clamp(2.1rem, 4vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: 1.3rem; }

p { margin: 0 0 1em; }

a { color: inherit; text-decoration: none; }

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

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

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--color-gold);
    color: #fff;
    padding: 10px 16px;
    z-index: 1000;
}
.skip-link:focus { left: 12px; top: 12px; }

.section {
    padding: 72px 0;
}
.section--alt { background: var(--color-bg-alt); }

.divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--color-gold);
    margin: 0 auto 18px;
}
.divider::before, .divider::after {
    content: '';
    width: 42px;
    height: 1px;
    background: var(--color-gold-light);
}

/* Unified section/page heading, used everywhere instead of a small eyebrow
   label stacked above a separate descriptive subtitle — one line, flanked
   by thin gold rules, echoing the moodboard's "NOS SOINS SIGNATURES" style. */
.section-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    font-family: var(--font-heading);
    font-size: clamp(1.3rem, 2.5vw, 1.8rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text);
    margin: 0 0 44px;
    /* On very narrow screens the title text can end up wrapping onto a
       second line inside its flex slot (the bars/stars around it can only
       shrink so far). text-align is inherited into that wrapped text, so
       without this its second line reads as left-justified instead of
       staying centered like the rest of the title. */
    text-align: center;
}
.section-title__bar {
    flex: 0 1 70px;
    min-width: 24px;
    height: 1px;
    background: var(--color-gold-light);
}

/* Stars beyond the outer rules on both sides (✦ — Titre — ✦), echoing the
   small ✦ divider used above the hero title. Pseudo-elements on a flex
   container are themselves flex items, so these land as the very first
   and very last items — outside the .section-title__bar spans — without
   touching the markup on every page. */
.section-title::before,
.section-title::after {
    content: '✦';
    flex: 0 0 auto;
    color: var(--color-gold);
    font-size: 0.85em;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 13px 28px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn--primary {
    background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold));
    color: #2a2114;
}
.btn--primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(185, 139, 62, 0.35); }

.btn--outline {
    background: transparent;
    border-color: var(--color-gold);
    color: var(--color-gold-dark);
}
.btn--outline:hover { background: var(--color-gold-light); }

/* Standalone centered CTA button below a block of content (price list, etc). */
.cta-row { text-align: center; margin-top: 40px; }

/* ===================== Header ===================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(251, 246, 237, 0.92);
    backdrop-filter: blur(6px);
    /* No border-bottom here: see .site-header__liseret below, which is
       positioned to align exactly with the logo's vertical center instead
       of the header's raw bottom edge. */
}

/* Full-width trim line that runs the whole viewport width (not boxed by
   .container), sitting at the logo's own vertical center so the opaque
   logo overlaps/interrupts it in the middle — one continuous line that
   reads as passing "under" the logo rather than stopping at it. */
.site-header__liseret {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    transform: translateY(-50%);
    height: 2px;
    background: var(--color-border);
    z-index: 5; /* below the logo's z-index: 20 */
    pointer-events: none;
}

.site-header__inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 104px;
    padding-top: 26px;
    padding-bottom: 26px;
}

/* Brand mark: centered on the header, sized larger than the header bar but
   mostly tucked inside it — only a small arc pokes out past the bottom
   edge (see --logo-overflow below), rather than hanging half outside. */
.site-header__logo {
    --logo-overflow: 22px; /* how much of the logo pokes below the header */
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translate(-50%, calc(-100% + var(--logo-overflow)));
    z-index: 20;
    width: 116px;
    height: 116px;
}
.site-header__logo-frame {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    /* Light, header-matching tone rather than pure white, per the brand's
       "bordure claire (comme le header)" direction. */
    background: var(--color-bg);
    border: 6px solid var(--color-bg);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.site-header__logo-frame img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }

/* Thin gold ring around the frame, echoing the header's own trim — but
   only across the arc that actually overflows below the header. The part
   of the logo still inside the header bar stays ring-free so it reads as
   tucked into the header rather than a fully separate floating medallion.
   Lives on a separate, unclipped pseudo-element (the frame above has
   overflow:hidden for the image, which would otherwise clip this ring). */
.site-header__logo::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--color-border);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent calc(100% - var(--logo-overflow)), #000 calc(100% - var(--logo-overflow)), #000 100%);
            mask-image: linear-gradient(to bottom, transparent 0, transparent calc(100% - var(--logo-overflow)), #000 calc(100% - var(--logo-overflow)), #000 100%);
    pointer-events: none;
}

.primary-nav {
    display: flex;
    align-items: center;
    gap: 20px;
    font-weight: 500;
}

.primary-nav a { padding: 6px 2px; border-bottom: 2px solid transparent; }
.primary-nav a:hover, .primary-nav a.active { border-color: var(--color-gold); color: var(--color-gold-dark); }
.primary-nav a.nav-cta, .primary-nav a.nav-cta:hover {
    border: none;
    color: #2a2114;
    /* .primary-nav a's own padding rule above is more specific than .btn's,
       so it must be repeated here — otherwise the header CTA loses its
       button padding and the label reads as cramped against the pill. */
    padding: 13px 28px;
}

/* Mobile default: no boxing, "Massages"/"Tarifs" flow as plain stacked
   links ahead of the CTA button. Turned into a real flex row on desktop
   (see media query) so the CTA can be pushed to the far edge separately. */
.nav-links-group { display: contents; }

.nav-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}
.nav-toggle__bar {
    width: 24px;
    height: 2px;
    background: var(--color-text);
}

/* Mobile (default): the two nav halves are wrapped together so they can be
   revealed as a single full-width dropdown below the header, in the right
   reading order (left half, then right half). */
.mobile-nav-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 0;
    overflow: hidden;
    /* Solid surface + a visible shadow, rather than the page's own
       background, so the open menu clearly reads as a panel over the page
       instead of blending into it. */
    background: var(--color-surface);
    border-bottom: 1px solid transparent;
    box-shadow: none;
    transition: max-height 0.25s ease, box-shadow 0.25s ease;
    /* Padding lives on the wrapper (once) rather than on each <nav> below,
       so the seam between the two nav groups (Infos pratiques / Massages)
       doesn't stack two paddings and end up wider than the gap between any
       other two links. */
    padding: 8px 24px 16px;
}
.mobile-nav-dropdown.is-open {
    max-height: 480px;
    border-bottom-color: var(--color-border);
    box-shadow: 0 18px 30px rgba(42, 36, 28, 0.18);
}
.mobile-nav-dropdown .primary-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}
.mobile-nav-dropdown .primary-nav a { width: 100%; padding: 14px 0; }
/* No permanent divider between links here on purpose — like on desktop,
   the gold underline (see .primary-nav a:hover/.active above) only shows
   for the current page and on hover, not on every link at rest. */
.mobile-nav-dropdown .primary-nav a.nav-cta { margin-top: 12px; text-align: center; }

@media (min-width: 821px) {
    .nav-toggle { display: none; }

    /* On desktop the wrapper stops being a box: its two <nav> children
       become direct grid items of .site-header__inner, which is what lets
       the logo sit in its own reserved column exactly between them. */
    .site-header__inner {
        display: grid;
        /* This gutter must be at least as wide as the logo's full visual
           footprint (116px + 6px border each side + shadow) so "Infos
           pratiques" and "Massages" sit right next to it without any text
           disappearing under the circle. */
        grid-template-columns: 1fr 150px 1fr;
        justify-content: flex-start;
    }
    .mobile-nav-dropdown {
        display: contents;
        position: static;
        max-height: none;
        overflow: visible;
        background: none;
        border-bottom: none;
    }
    .mobile-nav-dropdown .primary-nav {
        flex-direction: row;
        align-items: center;
        padding: 0;
        gap: 20px;
    }
    .mobile-nav-dropdown .primary-nav a { width: auto; padding: 6px 2px; }
    /* Higher specificity than the line above (adds the .nav-cta class to the
       selector chain) so the CTA keeps its own button padding on desktop
       instead of inheriting the plain nav-link padding. */
    .mobile-nav-dropdown .primary-nav a.nav-cta { margin-top: 0; width: auto; padding: 13px 28px; }
    .nav-links-group { display: flex; align-items: center; gap: 20px; }

    /* Left half hugs the middle (the logo), clustering "Accueil / Infos
       pratiques" around it as in the moodboard, rather than spreading
       edge-to-edge. The right half stretches across its whole column so
       "Massages / Tarifs" can stay clustered near the logo while the CTA
       button is pushed all the way to the far right edge, matching the
       moodboard's isolated "RÉSERVER MAINTENANT" placement. */
    .primary-nav--left { grid-column: 1; grid-row: 1; justify-self: end; }
    .primary-nav--right {
        grid-column: 3;
        grid-row: 1;
        justify-self: stretch;
        justify-content: space-between;
    }

    /* Deliberately NOT given a grid-column: as an absolutely positioned
       element it must stay anchored to .site-header__inner's full padding
       box (its nearest positioned ancestor) so left:50% centers it on the
       whole header — which, by construction of the symmetric 1fr/100px/1fr
       columns above, lands exactly on the reserved middle column. Assigning
       it a grid-column here would instead resolve its percentage offsets
       against that column alone, in some browsers pushing it off-center. */
}

/* ===================== Hero ===================== */
.hero {
    position: relative;
    padding: 96px 0 88px;
    text-align: center;
    overflow: hidden;
    background-color: var(--color-bg);
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    background-size: cover, cover;
    /* Real photo of the salon, cropped to fill the hero (see .hero__content
       padding above) with a light cream wash on top — just enough to keep
       the title/subtitle readable without washing the photo out. */
    background-image:
        linear-gradient(180deg, rgba(251, 246, 237, 0.35) 0%, rgba(251, 246, 237, 0.28) 45%, rgba(251, 246, 237, 0.5) 100%),
        url('../images/hero-amenagement.jpg');
}

@media (max-width: 820px) {
    .hero {
        /* On narrow viewports the photo's full height always fits (no
           vertical cropping), but the horizontal center-crop happened to
           land squarely on the overexposed, near-white window at the top
           right of the frame — which reads as a blank "band" right under
           the header, independently of the cream wash above. Shifting the
           crop left lands on the (evenly lit) bed/headboard instead. */
        background-position: 28% center, 28% center;
    }
}

/* Frosted "glass" card behind the text (same idea as the header's own
   translucent + blurred background), so the title/subtitle stay legible
   no matter what part of the photo sits behind them — a text-shadow
   alone still washed out over busier/mid-tone areas of the photo. */
.hero__content {
    max-width: 680px;
    margin: 0 auto;
    padding: 32px 40px;
    background: rgba(251, 246, 237, 0.2);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
@media (max-width: 600px) {
    .hero__content { padding: 28px 20px; }
}

.hero__title {
    margin-bottom: 0.3em;
    text-shadow: 0 1px 3px rgba(251, 246, 237, 0.9);
}
.hero__subtitle {
    font-size: 1.2rem;
    font-style: italic;
    /* Darker than the site's usual muted tone (var(--color-text-muted))
       specifically here, for extra contrast over the background photo. */
    color: var(--color-text);
    margin-bottom: 0.7em;
    text-shadow: 0 1px 3px rgba(251, 246, 237, 0.9);
}
.hero__location {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.95rem;
    color: var(--color-text);
    text-shadow: 0 1px 3px rgba(251, 246, 237, 0.9);
}
.hero__location svg { flex-shrink: 0; color: var(--color-gold-dark); }

/* Repeats the header's "Prendre rendez-vous" button right under the hero
   photo, but only on mobile (where that button is hidden inside the
   burger menu). Hidden on desktop, where the header button is always
   visible. Deliberately its own block *after* .hero in the markup, so it
   sits below the photo rather than overlapping it. */
.hero-mobile-cta { display: none; }
@media (max-width: 820px) {
    .hero-mobile-cta {
        display: flex;
        justify-content: center;
        padding: 28px 24px 0;
    }
}

/* ===================== Maintenance / "coming soon" page ===================== */
/* Reuses .hero (same background photo + mobile crop fix + cream wash as
   the homepage) but stretches it to fill the viewport, since this page
   has no header/footer around it — it *is* the whole page. */
.maintenance-hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
}
.maintenance-logo {
    display: block;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: var(--color-bg);
    border: 6px solid var(--color-bg);
    box-shadow: 0 0 0 2px var(--color-border), var(--shadow);
}
/* The announcement sentence is much longer than the homepage's plain
   "Massages L'instant NOVA", so it gets a smaller size than the default
   .hero__title here to avoid overwhelming/wrapping too aggressively. */
.maintenance-hero .hero__title {
    font-size: clamp(1.5rem, 3.2vw, 2.3rem);
}
.maintenance-text {
    font-size: 1.15rem;
    margin: 0 0 0.5em;
    /* .hero__content's frosted card (see above) already does the heavy
       lifting for contrast here; this is just a light touch-up. */
    text-shadow: 0 1px 3px rgba(251, 246, 237, 0.9);
}

/* ===================== Signature massages ===================== */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 28px;
}

.card {
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 28px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
}

.card__icon {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold));
    margin-bottom: 18px;
    object-fit: cover; /* no-op on the fallback <div>, keeps <img> variant round + cropped */
}

.card__link {
    margin-top: auto;
    padding-top: 12px;
    font-weight: 600;
    color: var(--color-gold-dark);
}
.card__link::after { content: ' →'; }

/* ===================== Reviews carousel ===================== */
/* One review visible at a time, auto-advanced by assets/js/main.js; no
   scrollbar, manual navigation via the arrow buttons either side. */
.reviews-carousel {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 600px;
    margin: 0 auto;
}

.reviews-viewport {
    flex: 1 1 auto;
    overflow: hidden;
}

.reviews-track {
    display: flex;
    transition: transform 0.5s ease;
}

.review-card {
    flex: 0 0 100%;
    width: 100%;
    box-sizing: border-box;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 24px;
}

.carousel-arrow {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-gold-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}
.carousel-arrow:hover { background: var(--color-gold-light); transform: translateY(-1px); }

.review-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.review-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold));
    color: #2a2114;
    font-weight: 700;
    flex-shrink: 0;
}

.review-card__name { font-weight: 600; }
.review-card__text { color: var(--color-text-muted); font-style: italic; }

/* ===================== Massages (full list) ===================== */
.massage-row {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 32px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 28px;
    margin-bottom: 28px;
    box-shadow: var(--shadow);
    /* The header is sticky (104px tall): without this, jumping here from
       the homepage's "+ d'infos" links (massages.php#slug) lands the
       target right under the header, half-hidden behind it. */
    scroll-margin-top: 128px;
}

.massage-row__media {
    border-radius: var(--radius-sm);
    overflow: hidden;
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.massage-row__media img { width: 100%; height: 100%; object-fit: cover; }

/* Fallback used only when a massage has no 'image' set. */
.massage-row__media--placeholder {
    background: linear-gradient(135deg, var(--color-bg-alt), var(--color-gold-light));
    color: var(--color-gold-dark);
    font-family: var(--font-heading);
    font-size: 0.9rem;
    text-align: center;
    padding: 12px;
}

.massage-row__meta {
    display: flex;
    gap: 18px;
    margin: 14px 0;
    font-weight: 600;
    color: var(--color-gold-dark);
}

.massage-row__benefits {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.massage-row__benefits li {
    background: var(--color-bg-alt);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 0.85rem;
}

@media (max-width: 640px) {
    .massage-row { grid-template-columns: 1fr; }
}

/* ===================== Tarifs ===================== */
.price-list { border-top: 1px solid var(--color-border); }
.price-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid var(--color-border);
}
.price-row__name { font-family: var(--font-heading); font-size: 1.15rem; }
.price-row__duration { color: var(--color-text-muted); font-size: 0.9rem; }
.price-row__price {
    font-weight: 700;
    color: var(--color-gold-dark);
    font-size: 1.2rem;
    white-space: nowrap;
}

.loyalty-card {
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
}
.loyalty-card__tiers {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
.loyalty-card__tiers li {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 10px 20px;
    font-weight: 700;
    color: var(--color-gold-dark);
}

/* ===================== Infos pratiques ===================== */
.infos-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}
@media (max-width: 820px) {
    .infos-grid { grid-template-columns: 1fr; }
}
/* Extra breathing room between stacked headings (Adresse/Horaires/Accessibilité)
   — headings otherwise only carry bottom margin, which left "Accessibilité" too
   close to the hours table above it. */
.infos-grid h2 { margin-top: 1.6em; }
.infos-grid h2:first-of-type { margin-top: 0; }

.map-frame {
    position: relative;
    padding-top: 75%;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow);
}
.map-frame iframe {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: 0;
}

.hours-table { width: 100%; border-collapse: collapse; }
.hours-table td { padding: 8px 0; border-bottom: 1px solid var(--color-border); }
.hours-table td:last-child { text-align: right; font-weight: 600; }

/* ===================== Contact ===================== */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 48px;
}
@media (max-width: 820px) {
    .contact-grid { grid-template-columns: 1fr; }
}

.contact-methods {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.contact-method {
    display: flex;
    align-items: center;
    gap: 14px;
    font-weight: 600;
}
.contact-method__icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold));
    color: #2a2114;
}
.contact-method:hover .contact-method__icon { box-shadow: 0 6px 16px rgba(185, 139, 62, 0.35); }

.form-field { margin-bottom: 20px; }
.form-field label { display: block; margin-bottom: 6px; font-weight: 600; }
.form-field input,
.form-field textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    font-family: inherit;
    font-size: 1rem;
}
.form-field input:focus,
.form-field textarea:focus {
    outline: 2px solid var(--color-gold-light);
    outline-offset: 1px;
}

/* Honeypot field: kept out of view but still reachable by bots that ignore CSS. */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-alert {
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    margin-bottom: 24px;
    font-weight: 600;
    text-align: center;
}
.form-alert--success { background: #e5f3e5; color: #2f5b2f; }
.form-alert--error { background: #fbe6e6; color: #7a2727; }
.form-alert--info { background: var(--color-bg-alt); color: var(--color-text-muted); font-weight: 500; }

/* ===================== Legal pages ===================== */
.legal-content h2 { margin-top: 1.6em; }
.legal-content { max-width: 760px; }

/* ===================== Footer ===================== */
.site-footer {
    background: var(--color-bg-alt);
    border-top: 1px solid var(--color-border);
    margin-top: 80px;
}

.site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 48px;
    align-items: center;
    /* Centered as one composed block rather than pinned to the two edges
       (legal links far left, social far right), which read as "stuck to
       the sides" on wide viewports. */
    justify-content: center;
    padding: 32px 0;
}

.site-footer__legal { display: flex; gap: 20px; font-size: 0.9rem; }
.site-footer__legal a:hover { color: var(--color-gold-dark); }

.site-footer__social { display: flex; align-items: center; gap: 14px; font-size: 0.9rem; }
/* inline-flex + align-items:center so the icon's own box is vertically
   centered against the "Suivez-moi" label instead of sitting on the
   text baseline (inline SVGs default to baseline alignment, which reads
   as slightly low next to the label). */
.site-footer__social a { color: var(--color-text); display: inline-flex; align-items: center; }
.site-footer__social a:hover { color: var(--color-gold-dark); }
.site-footer__social svg { display: block; }

.site-footer__bottom {
    border-top: 1px solid var(--color-border);
    padding: 14px 0;
    font-size: 0.82rem;
    color: var(--color-text-muted);
    text-align: center;
}

@media (max-width: 700px) {
    .site-footer__inner {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        gap: 20px;
        /* Bug fix: a bare "28px 0" here was zeroing out the .container's
           own 24px side padding (same specificity, declared later), which
           let the legal links and social icons run flush to the screen
           edges on mobile. */
        padding: 28px 24px;
    }
    .site-footer__legal { flex-direction: column; align-items: center; gap: 10px; }
    /* Slightly larger tap targets/icons on mobile. */
    .site-footer__social svg { width: 26px; height: 26px; }
}