/* ============================================================
   CHÂTEAU DE MAISONSEULE — v8
   Palette pierre, or patiné, blanc cassé
   ============================================================ */

:root {
    --cream:        #F5F0E8;
    --cream-warm:   #EFE7D7;
    --stone-light:  #E8DFD0;
    --stone:        #D9CDB8;
    --stone-warm:   #C2AE8F;
    --patine:       #8B7240;
    --patine-light: #A89066;
    --patine-soft:  rgba(168,144,102,0.15);
    --dark:         #2C2A25;
    --dark-soft:    #3D3A33;
    --text:         #4A4640;
    --text-light:   #6A655D;
    --text-muted:   #A09A90;
    --line:         rgba(44,42,37,0.10);
    --line-soft:    rgba(44,42,37,0.06);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
a { text-decoration: none; color: inherit; }
img, video { display: block; max-width: 100%; }
/* <picture> n'est qu'un conteneur de sélection de source : on le retire
   de l'arbre de mise en page pour que l'<img> reste l'enfant direct de
   son parent (grilles, flex, position absolue inchangés). */
picture { display: contents; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }

html {
    background: var(--cream);
    color: var(--text);
    font-family: 'Montserrat', sans-serif;
    overflow-x: hidden;      /* repli pour les navigateurs anciens */
    overflow-x: clip;        /* « hidden » ferait de l'élément un conteneur
                                de défilement et casserait position: sticky */
    scroll-behavior: smooth;
    /* Arrivé en haut ou en bas, le geste ne déborde plus sur l'historique du
       navigateur ni sur la page derrière une visionneuse ouverte. */
    overscroll-behavior-y: none;
    font-size: 15px;
}
body {
    overflow-x: hidden;      /* repli pour les navigateurs anciens */
    overflow-x: clip;        /* « hidden » ferait de l'élément un conteneur
                                de défilement et casserait position: sticky */
    font-weight: 300;
    line-height: 1.65;
    font-size: 1rem;
}

::selection { background: var(--patine); color: #fff; }

/* ========== LIEN D'ÉVITEMENT ==========
   Invisible tant qu'il n'a pas le focus ; au premier Tab il apparaît en
   haut de page et permet de sauter la navigation. */
.skip-link {
    position: absolute;
    left: 1rem;
    top: -100px;
    z-index: 10000;
    padding: 0.85rem 1.5rem;
    background: var(--dark);
    color: #fff;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-radius: 0.25rem;
    transition: top 0.2s ease;
}
/* la cible du lien d'évitement reçoit le focus sans anneau visible :
   c'est un conteneur, pas un contrôle. */
main:focus { outline: none; }
main { scroll-margin-top: 5rem; }
.skip-link:focus {
    top: 1rem;
    outline: 2px solid var(--stone-warm);
    outline-offset: 2px;
}

/* Anneau de focus visible et homogène pour la navigation au clavier
   (sans polluer la souris, grâce à :focus-visible). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--patine);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ========== NAV ========== */
.nav {
    position: fixed; top: 0; left: 0; width: 100%;
    padding: 2.2rem 5%;
    display: flex; align-items: center; justify-content: space-between;
    z-index: 1000;
    transition: background 0.4s ease, box-shadow 0.4s ease, padding 0.4s ease;
    background: transparent;
}
.nav.scrolled {
    /* Fond plein plutôt que « backdrop-filter ». La barre est fixe : le flou
       était recalculé sur 1440x116 px à chaque frame du défilement, pour un
       résultat invisible derrière un fond déjà opaque à 94 %. */
    background: var(--cream);
    box-shadow: 0 1px 0 var(--line-soft);
    padding-top: 1.4rem; padding-bottom: 1.4rem;
}
.nav.solid {
    background: var(--cream);
    box-shadow: 0 1px 0 var(--line-soft);
}

/* Pendant le chargement : aucune transition sur la nav (évite le flash au 1er rendu) */
.nav-booting .nav,
.nav-booting .nav-logo,
.nav-booting .nav-logo-icon,
.nav-booting .nav-logo-text-img,
.nav-booting .nav-links a,
.nav-booting .nav-cta,
.nav-booting .nav-chateau {
    transition: none !important;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    transition: color 0.3s, transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    height: 50px;
    transform-origin: left center;
}
.nav-logo-icon {
    height: 100%;
    width: auto;
    display: block;
    /* Blanc avec halo blanc + chaud par le bas — fait ressortir le logo sur la vidéo */
    filter:
        brightness(0) invert(1)
        drop-shadow(0 6px 14px rgba(255, 255, 255, 0.55))
        drop-shadow(0 12px 28px rgba(255, 240, 200, 0.35))
        drop-shadow(0 2px 12px rgba(0,0,0,0.3));
    transition: filter 0.45s ease, transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    transform: translateY(-5px);
}
.nav-logo-text-img {
    height: 42%;
    width: auto;
    display: block;
    filter:
        brightness(0) invert(1)
        drop-shadow(0 4px 10px rgba(255, 255, 255, 0.5))
        drop-shadow(0 10px 24px rgba(255, 240, 200, 0.3))
        drop-shadow(0 2px 10px rgba(0,0,0,0.25));
    transition: filter 0.45s ease;
    flex-shrink: 0;
}
.nav.scrolled .nav-logo-icon,
.nav.scrolled .nav-logo-text-img,
.nav.solid .nav-logo-icon,
.nav.solid .nav-logo-text-img {
    /* Force la couleur sombre du texte des menus quel que soit le PNG d'origine */
    filter: brightness(0) opacity(0.78);
}

/* Hover : zoom léger + halo lumineux derrière le logo */
.nav-logo:hover { transform: scale(1.07); }
.nav-logo:hover .nav-logo-icon,
.nav-logo:hover .nav-logo-text-img {
    filter:
        brightness(0) invert(1)
        drop-shadow(0 0 18px rgba(255, 240, 200, 0.75))
        drop-shadow(0 0 36px rgba(255, 235, 180, 0.45))
        drop-shadow(0 2px 12px rgba(0,0,0,0.3));
}
.nav.scrolled .nav-logo:hover .nav-logo-icon,
.nav.scrolled .nav-logo:hover .nav-logo-text-img,
.nav.solid .nav-logo:hover .nav-logo-icon,
.nav.solid .nav-logo:hover .nav-logo-text-img {
    filter:
        brightness(0) opacity(1)
        drop-shadow(0 0 14px rgba(184, 151, 92, 0.55))
        drop-shadow(0 0 28px rgba(184, 151, 92, 0.3));
}

@media (max-width: 900px) {
    .nav-logo { height: 42px; gap: 0.7rem; }
    .nav-logo-text-img { display: none; }
    .nav-logo-icon { transform: translateY(-4px); }
}

.nav-links {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    display: flex; gap: 2rem;
    list-style: none;
    flex-wrap: nowrap;
}
.nav-links a {
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85);
    transition: color 0.3s;
    position: relative;
    font-weight: 400;
    padding: 0.4rem 0;
    white-space: nowrap;
}
.nav.scrolled .nav-links a,
.nav.solid .nav-links a { color: var(--text); }

.nav-links a::after {
    content: ''; position: absolute;
    left: 0; bottom: -2px; height: 1px; width: 0;
    background: #fff;
    transition: width 0.3s, background 0.3s;
}
.nav.scrolled .nav-links a::after,
.nav.solid .nav-links a::after { background: var(--patine); }

.nav-links a:hover { color: #fff; }
.nav.scrolled .nav-links a:hover,
.nav.solid .nav-links a:hover { color: var(--patine); }
.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }

/* DROPDOWN — sous-menus Mariages / Séminaires */
.nav-links > li { position: relative; }

/* « Le Château » n'est pas un lien : il n'ouvre que son sous-menu, il faut
   choisir une des trois entrées. Un <button> plutôt qu'un <a> sans adresse,
   pour rester atteignable au clavier — sans quoi le sous-menu, masqué tant
   qu'il n'a pas le focus, deviendrait inaccessible. */
.nav-dropdown-trigger {
    font-family: inherit;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 400;
    color: rgba(255,255,255,0.85);
    background: none;
    border: 0;
    padding: 0.4rem 0;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.3s;
}
.nav.scrolled .nav-dropdown-trigger,
.nav.solid .nav-dropdown-trigger { color: var(--text); }
.nav-dropdown-trigger:hover { color: #fff; }
.nav.scrolled .nav-dropdown-trigger:hover,
.nav.solid .nav-dropdown-trigger:hover,
.nav-links .has-dropdown.active > .nav-dropdown-trigger { color: var(--patine); }

.nav-links .has-dropdown > a::after {
    /* Désactive le soulignement par défaut sur les items à dropdown — on garde la flèche */
    content: none;
}
.nav-links .has-dropdown > .nav-dropdown-trigger .dropdown-arrow,
.nav-links .has-dropdown > a .dropdown-arrow {
    display: inline-block;
    font-size: 0.55em;
    margin-left: 0.3em;
    opacity: 0.7;
    transition: transform 0.3s;
}
.nav-links .has-dropdown:hover > .nav-dropdown-trigger .dropdown-arrow,
.nav-links .has-dropdown:hover > a .dropdown-arrow { transform: rotate(180deg); }

.nav-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 260px;
    margin: 0;
    padding: 1.2rem 0 0.7rem;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
    z-index: 1002;
}
.nav-dropdown::before {
    content: '';
    position: absolute;
    top: 0.8rem;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(20, 18, 16, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 2px;
    z-index: -1;
}
.nav.scrolled .nav-dropdown::before,
.nav.solid .nav-dropdown::before {
    background: rgba(245, 240, 232, 0.97);
    border-color: rgba(0,0,0,0.06);
    box-shadow: 0 6px 30px rgba(0,0,0,0.1);
}
.nav-links .has-dropdown:hover .nav-dropdown,
.nav-links .has-dropdown:focus-within .nav-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.nav-dropdown li { display: block; padding: 0; }
.nav-dropdown a {
    display: block;
    padding: 0.75rem 1.6rem;
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.78);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.25s, background 0.25s, padding-left 0.25s;
}
.nav-dropdown a:hover {
    color: #fff;
    background: rgba(255,255,255,0.06);
    padding-left: 1.9rem;
}
.nav-dropdown a::after { display: none !important; }
.nav.scrolled .nav-dropdown a,
.nav.solid .nav-dropdown a {
    color: rgba(20, 18, 16, 0.78);
}
.nav.scrolled .nav-dropdown a:hover,
.nav.solid .nav-dropdown a:hover {
    color: var(--patine);
    background: rgba(0,0,0,0.04);
}

.nav-cta {
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 0.75rem 1.2rem;
    border: 1px solid rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.08);
    color: #fff;
    backdrop-filter: blur(4px);
    transition: background 0.3s, border-color 0.3s, color 0.3s;
    white-space: nowrap;
}
.nav.scrolled .nav-cta,
.nav.solid .nav-cta {
    background: var(--patine);
    border-color: var(--patine);
    color: #fff;
    backdrop-filter: none;
}
.nav-cta:hover { background: rgba(255,255,255,0.2); }
.nav.scrolled .nav-cta:hover,
.nav.solid .nav-cta:hover { background: var(--dark); border-color: var(--dark); }

/* Groupe droit : lien Maison les Buis + séparateur + CTA */
.nav-right { display: flex; align-items: center; gap: 1rem; }

.nav-chateau {
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85);
    padding: 0.75rem 1.05rem;
    border: 1px solid rgba(255,255,255,0.35);
    transition: color 0.3s, border-color 0.3s;
    white-space: nowrap;
}
.nav.scrolled .nav-chateau,
.nav.solid .nav-chateau { color: var(--text); border-color: var(--line); }
.nav-chateau:hover { color: #fff; border-color: rgba(255,255,255,0.7); }
.nav.scrolled .nav-chateau:hover,
.nav.solid .nav-chateau:hover { color: var(--patine); border-color: var(--patine); }
.nav-chateau .ext-arrow { font-size: 0.85em; opacity: 0.8; }

.nav-sep { width: 1px; height: 14px; background: rgba(255,255,255,0.28); transition: background 0.3s; }
.nav.scrolled .nav-sep,
.nav.solid .nav-sep { background: var(--line); }

/* Hero clair : nav transparent mais écritures/logo en sombre (ex. mariages) */
/* Voile dégradé doux sous le nav : pose les écritures sur une bande claire constante
   (évite qu'un trait noir de l'image rende un libellé illisible) sans assombrir le reste. */
.nav.nav-on-light:not(.scrolled):not(.solid) {
    background: linear-gradient(to bottom,
        rgba(245,240,232,0.96) 0%,
        rgba(245,240,232,0.78) 55%,
        rgba(245,240,232,0) 100%);
}
.nav.nav-on-light:not(.scrolled):not(.solid) .nav-links a { color: var(--text); }
.nav.nav-on-light:not(.scrolled):not(.solid) .nav-links a::after { background: var(--patine); }
.nav.nav-on-light:not(.scrolled):not(.solid) .nav-links a:hover { color: var(--patine); }
.nav.nav-on-light:not(.scrolled):not(.solid) .nav-logo-icon,
.nav.nav-on-light:not(.scrolled):not(.solid) .nav-logo-text-img { filter: brightness(0) opacity(0.78); }
.nav.nav-on-light:not(.scrolled):not(.solid) .nav-chateau { color: var(--text); border-color: var(--line); }
.nav.nav-on-light:not(.scrolled):not(.solid) .nav-chateau:hover { color: var(--patine); border-color: var(--patine); }
.nav.nav-on-light:not(.scrolled):not(.solid) .nav-sep { background: var(--line); }
.nav.nav-on-light:not(.scrolled):not(.solid) .nav-cta {
    background: var(--patine);
    border-color: var(--patine);
    color: #fff;
    backdrop-filter: none;
}
.nav.nav-on-light:not(.scrolled):not(.solid) .nav-cta:hover { background: var(--dark); border-color: var(--dark); }
.nav.nav-on-light:not(.scrolled):not(.solid) .menu-toggle span { background: var(--dark); }

/* Tout en bas de la plage « bureau », le menu centré frôle le logo :
   on resserre seulement l'espacement, la typographie reste intacte. */
@media (min-width: 1101px) and (max-width: 1200px) {
    .nav-links { gap: 1.1rem; }
    /* Trend Sans One est plus large que Montserrat : interlettrage
       légèrement resserré sur cette seule tranche. */
    .nav-links a, .nav-dropdown-trigger { letter-spacing: 0.1em; }
}

/* Resserrement sur petits écrans desktop / tablette paysage :
   le menu central à 5 entrées a besoin de place, on masque la pastille
   secondaire « Maison les Buis » (toujours présente dans le menu mobile). */
@media (min-width: 1101px) and (max-width: 1300px) {
    .nav-right { gap: 0.8rem; }
    /* « Les Buis » s'efface pour laisser respirer le menu, mais pas le
       carré de langue : c'est le seul accès à l'autre version sur ces
       largeurs. */
    .nav-right .nav-chateau:not(.lang-carre),
    .nav-right .nav-sep { display: none; }
}

.menu-toggle {
    display: none;
    width: 28px; height: 18px;
    position: relative; cursor: pointer;
    z-index: 1001;
}
.menu-toggle span {
    position: absolute; left: 0; width: 100%; height: 1px;
    background: #fff;
    transition: transform 0.4s ease, opacity 0.4s ease, top 0.4s ease;
}
.menu-toggle span:nth-child(1) { top: 0; }
.menu-toggle span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.menu-toggle span:nth-child(3) { bottom: 0; }
.nav.scrolled .menu-toggle span,
.nav.solid .menu-toggle span { background: var(--dark); }

.menu-toggle.open span:nth-child(1) { top: 50%; transform: rotate(45deg); background: var(--dark); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { bottom: 50%; transform: translateY(50%) rotate(-45deg); background: var(--dark); }

/* mobile menu */
.mobile-menu {
    position: fixed; inset: 0;
    background: var(--cream);
    z-index: 999;
    padding: 8rem 5% 3rem;
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.5s cubic-bezier(0.7,0,0.3,1);
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu a {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.8rem;
    color: var(--dark);
    padding: 1rem 0;
    border-bottom: 1px solid var(--line-soft);
    letter-spacing: 0.05em;
}
.mobile-menu a.mobile-sub {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 0.5rem 0 0.7rem 1.4rem;
    color: var(--patine);
    border-bottom: 1px solid var(--line-soft);
}
.mobile-menu .mobile-cta {
    margin-top: 2.5rem;
    padding: 1.2rem 1.7rem;
    background: var(--patine); color: #fff;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    border: none;
}

@media (max-width: 900px) {
    .nav-links, .nav > .nav-right { display: none; }
    .menu-toggle { display: block; }
    .nav { padding: 1.6rem 5%; }
}

/* ========== HERO (homepage) ========== */
.hero {
    position: relative;
    height: 100svh; min-height: 100vh;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: #1a1a1a;
}
.hero-bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    filter: saturate(0.95) contrast(1.03) brightness(0.92);
    /* Le poster est affiché dès le premier rendu : la vidéo, chargée
       ensuite, prend le relais sur la même image. Aucun écran noir. */
    opacity: 1;
    /* Couche dédiée : la parallaxe déplace la vidéo sans relancer la passe
       de filtre ni redessiner ce qui est au-dessus.
       L'échelle 1,04 est posée dès le départ, et non au premier évènement de
       défilement : la parallaxe l'appliquait d'un coup, et la vidéo sautait
       de 1440 à 1498 px au premier pixel parcouru. Désormais seule la
       translation varie, l'agrandissement ne bouge plus. */
    will-change: transform;
    transform: translate3d(0, 0, 0) scale(1.04);
}
.hero-overlay {
    position: absolute; inset: 0;
    background:
        linear-gradient(to bottom,
            rgba(0,0,0,0.45) 0%,
            rgba(0,0,0,0.2) 30%,
            rgba(0,0,0,0.1) 55%,
            rgba(0,0,0,0.55) 100%);
}
.hero-content {
    position: relative; z-index: 2;
    text-align: center; color: #fff;
    padding: 0 1.5rem;
    max-width: 1100px;
    display: flex; flex-direction: column; align-items: center;
    gap: 1.4rem;
}
.hero-tag {
    font-size: 0.72rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.78);
    font-weight: 400;
    opacity: 0;
    animation: fadeUp 1.2s ease 0.3s forwards;
}
.hero-tag::before,
.hero-tag::after {
    content: ''; display: inline-block;
    width: 30px; height: 1px;
    background: rgba(255,255,255,0.5);
    vertical-align: middle;
    margin: 0 1rem;
}
.hero-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(2.5rem, 6.5vw, 5.4rem);
    line-height: 1.05;
    letter-spacing: 0.01em;
    color: #fff;
    text-shadow: 0 4px 30px rgba(0,0,0,0.35);
    opacity: 0;
    animation: fadeUp 1.3s ease 0.55s forwards;
}
.hero-title em {
    font-style: italic;
    color: var(--stone-warm);
}

/* Version logo image : « CHÂTEAU DE » en texte (Trend Sans One) au-dessus
   du logo MAISONSEULE. Les deux lignes sont dimensionnées à partir de la
   même largeur, --logo-w, pour rester proportionnées à toutes les tailles. */
.hero-title--logo {
    /* Même largeur que l'ancien logo : 80 % de l'écran, bornée, et jamais
       plus large que la colonne du hero (1100 px moins ses marges). */
    --logo-w: min(clamp(380px, 80vw, 1100px), 100vw - 3rem, 1052px);
    /* Le titre descend un peu dans le hero. La marge du bouton est réduite
       d'autant juste en dessous : la hauteur totale du bloc ne change pas,
       donc il reste centré et le bouton ne bouge pas. */
    margin-top: 1.5rem;
    line-height: 1;
    padding: 0;
    margin: 0;
    text-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.hero-title--logo img {
    width: var(--logo-w);
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    /* Trois ombres empilées, toutes sans décalage sauf la dernière :
       « drop-shadow » épouse la silhouette des lettres, contrairement à un
       dégradé posé sur un bloc, dont on voyait les bords droits. Elles se
       cumulent — chacune s'applique au résultat de la précédente — ce qui
       donne un halo progressif plutôt qu'un contour net. */
    filter:
        drop-shadow(0 0 2px rgba(0,0,0,0.40))
        drop-shadow(0 0 12px rgba(0,0,0,0.45))
        drop-shadow(0 5px 26px rgba(0,0,0,0.40));
}
@media (max-width: 600px) {
    .hero-title--logo { --logo-w: min(94vw, 100vw - 3rem); }
}

/* « CHÂTEAU DE » — commun au hero et à l'écran de chargement */
.logo-surtitre {
    display: block;
    font-family: 'Trend Sans One', 'Montserrat', sans-serif;   /* version −17 : choix validé */
    font-weight: 400;
    font-style: normal;
    font-synthesis: none;
    text-transform: uppercase;      /* capitales : le A anguleux */
    color: #FFFFFF;
    font-size: calc(var(--logo-w) * 0.05);
    line-height: 1;
    letter-spacing: 0.16em;
    margin-right: -0.16em;          /* compense l'espace après la dernière lettre */
    margin-bottom: calc(var(--logo-w) * 0.034);
    white-space: nowrap;
    overflow: visible;              /* le haut du  ne doit jamais être coupé */
    text-shadow: 0 4px 24px rgba(0,0,0,0.45);
}

.hero-sub {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: clamp(1.05rem, 1.8vw, 1.35rem);
    color: rgba(255,255,255,0.85);
    max-width: 640px;
    line-height: 1.55;
    text-shadow: 0 2px 16px rgba(0,0,0,0.35);
    opacity: 0;
    animation: fadeUp 1.3s ease 0.85s forwards;
}
.hero-cta-row {
    display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center;
    align-self: center;
    width: auto;
    /* De l'air sous le logo : le bouton était trop près du mot-logo. Il reste
       80 px entre le bas du bouton et la mention « Découvrir », donc la marge
       peut encore grandir sans que les deux se touchent. */
    margin: 4.7rem auto 0;
    opacity: 0;
    animation: fadeUp 1.3s ease 1.1s forwards;
}
.hero-btn {
    padding: 1rem 2.2rem;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.4);
    backdrop-filter: blur(6px);
    transition: background 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
    font-weight: 400;
}
.hero-btn:hover {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.7);
    transform: translateY(-2px);
}
.hero-btn.primary {
    background: var(--patine);
    border-color: var(--patine);
}
.hero-btn.primary:hover {
    background: var(--dark);
    border-color: var(--dark);
}

.scroll-indicator {
    position: absolute; bottom: 2rem; left: 50%;
    transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
    z-index: 2;
    opacity: 0;
    animation: scrollIndicatorIn 1s ease 1.5s forwards;
}
@keyframes scrollIndicatorIn {
    from { opacity: 0; transform: translate(-50%, 20px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
.scroll-indicator span {
    font-size: 0.6rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
}
.scroll-line {
    width: 1px; height: 36px;
    background: rgba(255,255,255,0.5);
    transform-origin: top;
    animation: scrollPulse 2.4s ease-in-out infinite;
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes scrollPulse {
    0%, 100% { transform: scaleY(0.3); opacity: 0.3; }
    50%      { transform: scaleY(1);   opacity: 1; }
}

/* ========== PAGE HERO (sous-pages) ========== */
/* PAGE HERO — bloc titre cream + bande photo en dessous (plus de surimpression) */
/* Hero plein écran : image en fond, titre par-dessus */
.page-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 56vh;
    color: #fff;
    overflow: hidden;
    /* Fond sombre comme celui du hero d'accueil : tant que la photo n'est
       pas peinte — à l'arrivée depuis une carte, notamment — c'est ce fond
       qu'on voit. Sans lui, le crème du site passe en un éclair blanc. */
    background: #1a1a1a;
}
.page-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    filter: saturate(0.96);
}
/* Hero mariages : sur un écran étroit, le recadrage « cover » rogne
   fortement en largeur. On décale le point d'ancrage vers les mariés,
   placés dans le tiers droit de la photo, pour ne pas les couper. */
.page-hero-bg--maries { object-position: 64% center; }
@media (min-width: 1000px) { .page-hero-bg--maries { object-position: center; } }

/* Hero tournages : sur mobile, la photo est très large et laisse un grand
   aplat de ciel en haut. On agrandit légèrement l'image et on l'ancre en bas
   pour la « tirer vers le haut » : le ciel sort du cadre, le tournage remplit
   le hero. */
@media (max-width: 700px) {
    .page-hero-bg--tournage {
        height: 124%;
        top: auto;
        bottom: 0;
        object-position: 62% center;
    }
}

.page-hero-overlay {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    /* Halo doux centré derrière le titre — l'image reste lumineuse sur les bords */
    background:
        radial-gradient(ellipse 60% 50% at center, rgba(8,6,4,0.52) 0%, rgba(8,6,4,0.26) 48%, rgba(8,6,4,0) 75%);
}
.page-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 7rem 5% 4rem;
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
}
.page-hero-tag {
    font-size: 0.85rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--stone-warm);
    margin-bottom: 1.5rem;
    font-weight: 500;
    text-shadow: 0 1px 14px rgba(0,0,0,0.65), 0 1px 3px rgba(0,0,0,0.5);
}
.page-hero-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: clamp(4rem, 9.6vw, 8.2rem);
    line-height: 1.04;
    letter-spacing: 0.01em;
    color: #fff;
    text-shadow: 0 2px 30px rgba(0,0,0,0.7), 0 1px 4px rgba(0,0,0,0.5);
}
.page-hero-title em {
    font-style: italic;
    color: var(--stone-warm);
    font-weight: 400;
}
.page-hero-title::after {
    content: '';
    display: block;
    width: 46px;
    height: 1px;
    background: rgba(255,255,255,0.6);
    margin: 1.4rem auto 0;
}

/* Hero sur image claire (ex. mariages) : halo clair + écritures sombres,
   au lieu d'assombrir derrière (qui salit une aquarelle blanche). */
.page-hero--light .page-hero-overlay {
    background: radial-gradient(ellipse 64% 54% at center,
        rgba(245,240,232,0.74) 0%,
        rgba(245,240,232,0.32) 50%,
        rgba(245,240,232,0) 78%);
}
.page-hero--light .page-hero-tag {
    color: var(--dark);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1.6rem;
    text-shadow: 0 0 8px rgba(245,240,232,0.95), 0 1px 12px rgba(245,240,232,0.9);
}
.page-hero--light .page-hero-title {
    color: var(--dark);
    text-shadow: 0 2px 22px rgba(245,240,232,0.95), 0 0 9px rgba(245,240,232,0.85);
}
.page-hero--light .page-hero-title em { color: var(--patine); }
.page-hero--light .page-hero-title::after { background: rgba(44,42,37,0.4); }
.page-hero-sub {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    color: rgba(255,255,255,0.88);
    margin-top: 1.1rem;
    line-height: 1.55;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}
/* Responsive — tablette */
@media (max-width: 900px) {
    .page-hero { min-height: 50vh; }
    .page-hero-content { padding: 6.5rem 5% 3rem; }
}
/* Responsive — mobile */
@media (max-width: 600px) {
    .page-hero { min-height: 46vh; }
    .page-hero-content { padding: 6rem 5% 2.5rem; }
}

/* ===== Hero — variante BANDEAU (démo séminaires) =====
   Le titre ne flotte plus sur la photo : il est porté par une bande
   pleine largeur, surface nette délimitée par deux filets dorés. */
.page-hero--band .page-hero-overlay {
    background: linear-gradient(180deg,
        rgba(8,6,4,0.30) 0%,
        rgba(8,6,4,0.12) 38%,
        rgba(8,6,4,0.34) 100%);
}
.page-hero--band .page-hero-content {
    padding: 0;
    max-width: none;
}
.page-hero-band {
    width: 100%;
    /* Hauteur fixe + contenu centré : la bande et le titre tombent
       toujours au même endroit, que le titre fasse 1 ou 2 lignes —
       plus de « saut » quand on navigue d'une page à l'autre. */
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.2rem 5%;
    background: rgba(26,22,18,0.33);   /* 0.45 avant le 06/10 : bandeau allégé */
    -webkit-backdrop-filter: blur(3px) saturate(0.92);
    backdrop-filter: blur(3px) saturate(0.92);
    border-top: 1px solid rgba(214,201,180,0.40);
    border-bottom: 1px solid rgba(214,201,180,0.40);
}
.page-hero-band .page-hero-tag {
    margin-bottom: 1rem;
    text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
.page-hero-band .page-hero-title {
    /* Taille identique sur toutes les pages */
    font-size: clamp(2.9rem, 6.6vw, 5.6rem);
    text-shadow: 0 1px 10px rgba(0,0,0,0.35);
}
.page-hero-band .page-hero-title::after {
    margin-top: 1.1rem;
}
@media (max-width: 600px) {
    .page-hero-band { min-height: 220px; padding: 1.8rem 6%; }
}

/* ========== SECTIONS — communes ========== */
.section {
    padding: 5rem 5%;
    max-width: 1500px;
    margin: 0 auto;
}
.section-tight { padding: 5rem 5%; }
.section-dark {
    background: var(--dark);
    color: rgba(255,255,255,0.85);
    max-width: none;
}
.section-stone {
    background: var(--stone-light);
    max-width: none;
}
.section-cream-warm {
    background: var(--cream-warm);
    max-width: none;
}

.section-inner { max-width: 1500px; margin: 0 auto; }

.eyebrow {
    font-size: 0.65rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--patine);
    margin-bottom: 1.2rem;
    font-weight: 500;
}
.section-dark .eyebrow { color: var(--stone-warm); }

.h-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.15;
    color: var(--dark);
    letter-spacing: 0.005em;
}
.section-dark .h-title { color: #fff; }
.h-title em { font-style: italic; color: var(--patine); }
.section-dark .h-title em { color: var(--stone-warm); }

.h-sub {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    color: var(--patine);
    margin-top: 0.6rem;
    line-height: 1.45;
}
.section-dark .h-sub { color: var(--stone-warm); }

.body-text {
    font-size: 1rem;
    line-height: 1.85;
    color: var(--text);
    font-weight: 300;
}
.section-dark .body-text { color: rgba(255,255,255,0.78); }
.body-text + .body-text { margin-top: 1.2rem; }
.body-text strong { font-weight: 500; color: var(--dark); }
.section-dark .body-text strong { color: #fff; }

.divider {
    width: 50px; height: 1px;
    background: var(--patine);
    margin: 1.8rem 0;
}
.divider-center { margin: 1.8rem auto; }
.section-dark .divider { background: var(--stone-warm); }

/* ========== HOMEPAGE — INTRO SPLIT ========== */
.intro-split {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 5rem;
    align-items: center;
}
@media (max-width: 900px) {
    .intro-split { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ========== 3-CARDS — Univers ========== */
/* UNIVERS BAND — carrousel hover-expand façon Maisonlesbuis */
.univers-band {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
    width: 92%;
    max-width: 1600px;
    margin: 4rem auto 0;
    height: 400px;
}
.univers-card {
    position: relative;
    flex-grow: 1;
    width: 16rem;
    overflow: hidden;
    cursor: pointer;
    height: 100%;
    border-radius: 0.35rem;
    transition: width 1100ms cubic-bezier(0.22, 1, 0.36, 1);
    background: var(--dark);
    color: #fff;
    text-decoration: none;
    display: block;
}
.univers-card:hover { width: 32rem; }
/* Carte « Mariages » : le format très vertical de la carte rogne la photo
   en largeur ; on ancre le cadrage sur les mariés, dans le tiers droit. */
.univers-card img.univers-img--maries { object-position: 64% center; }
/* Carte « L'arrivée » : cadrage décalé vers la droite de la photo. */
.univers-card img.univers-img--arrivee { object-position: 58% center; }

.univers-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.62);
    /* Aucun zoom au hover — juste l'ouverture de la carte */
}
.univers-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(0,0,0,0.85) 0%,
        rgba(0,0,0,0.45) 35%,
        rgba(0,0,0,0.1) 65%,
        transparent 100%);
    z-index: 1;
}
.univers-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 2.2rem 1.9rem;
    color: #fff;
}
.univers-num {
    position: absolute;
    top: 1.4rem;
    left: 1.9rem;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 0.9rem;
    color: var(--stone-warm);
    z-index: 3;
}
.univers-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
    white-space: nowrap;
}
/* Description & lien : pure fade-in en cascade (pas de slide) */
.univers-desc {
    font-size: 0.85rem;
    line-height: 1.5;
    color: rgba(255,255,255,0.85);
    margin: 0.6rem 0 0;
    opacity: 0;
    transition: opacity 0.7s ease;
}
.univers-card:hover .univers-desc {
    opacity: 1;
    transition-delay: 0.15s;
}
.univers-link {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.65rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--patine-light);
    border-bottom: 1px solid var(--patine-light);
    padding-bottom: 0.4rem;
    opacity: 0;
    transition: opacity 0.7s ease, color 0.3s, border-color 0.3s;
}
.univers-card:hover .univers-link {
    opacity: 1;
    transition-delay: 0.3s;
}
.univers-link:hover {
    color: #fff;
    border-color: #fff;
}

@media (max-width: 1024px) {
    .univers-band { height: 380px; gap: 0.4rem; margin-top: 2.5rem; }
    .univers-card { width: 10rem; }
    .univers-card:hover { width: 22rem; }
    .univers-title { font-size: 1.15rem; }
    .univers-content { padding: 1.5rem 1.3rem; }
    .univers-num { font-size: 0.78rem; top: 1.1rem; left: 1.3rem; }
}
@media (max-width: 768px) {
    .univers-band {
        flex-direction: column;
        height: auto;
        gap: 0.5rem;
    }
    .univers-card {
        width: 100% !important;
        height: 26vh;
        min-height: 200px;
    }
    .univers-card:hover { width: 100% !important; }
    .univers-desc { display: none; }
    .univers-link { display: none; }
    .univers-content { padding: 1.4rem 1.3rem; }
    .univers-title { font-size: 1.1rem; }
}

/* ===== Variante GALERIE : grandes photos façon Maison les Buis + libellé révélé au survol ===== */
.univers-band.gallery {
    height: 480px;
    width: 92%;
    max-width: 1600px;
}
.univers-band.gallery .univers-card:hover { width: 42rem; }
/* Photos normales (non assombries) au repos ; le voile n'apparaît qu'au survol pour le libellé */
.univers-band.gallery .univers-card img { filter: none; }
.univers-band.gallery .univers-card::after {
    opacity: 0;
    transition: opacity 0.45s ease;
}
.univers-band.gallery .univers-card:hover::after { opacity: 1; }
.univers-band.gallery .univers-num,
.univers-band.gallery .univers-title {
    opacity: 0;
    transition: opacity 0.5s ease;
}
.univers-band.gallery .univers-card:hover .univers-num,
.univers-band.gallery .univers-card:hover .univers-title {
    opacity: 1;
}
/* Retour client (Hénin) : sur la page Hébergements, le nom de chaque suite
   restait invisible tant qu'on ne survolait pas la photo. Ici on l'affiche
   en permanence ; le survol ne fait que renforcer le contraste. */
.univers-band.gallery.labels-visible .univers-card::after { opacity: 0.75; }
.univers-band.gallery.labels-visible .univers-num,
.univers-band.gallery.labels-visible .univers-title { opacity: 1; }
.univers-band.gallery.labels-visible .univers-card:hover::after { opacity: 1; }

@media (max-width: 1024px) {
    .univers-band.gallery { height: 380px; }
}
@media (max-width: 768px) {
    /* Empilé sur mobile (pas de survol) : on réaffiche les libellés */
    .univers-band.gallery { height: auto; }
    .univers-band.gallery .univers-card { height: 30vh; min-height: 220px; }
    .univers-band.gallery .univers-num,
    .univers-band.gallery .univers-title { opacity: 1; }
}

/* ========== BANDEAU MH ========== */
.bandeau-mh {
    position: relative;
    /* Retour client (Hénin) : bandeau moins haut et moins sombre, pour ne plus
       couper la page sur presque tout l'écran. Valeurs d'origine : 85vh / 540px,
       brightness(0.6) et dégradé 0.4/0.2/0.5. */
    height: 55vh; min-height: 400px;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.bandeau-mh img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover;
    filter: saturate(0.94) brightness(0.74);
}
.bandeau-mh::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to bottom,
        rgba(0,0,0,0.26),
        rgba(0,0,0,0.12) 50%,
        rgba(0,0,0,0.34));
    z-index: 1;
}
.bandeau-mh-content {
    position: relative; z-index: 2;
    text-align: center;
    max-width: 800px;
    padding: 0 2rem;
    color: #fff;
}
.bandeau-mh-eyebrow {
    font-size: 0.65rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--stone-warm);
    margin-bottom: 1.5rem;
}
.bandeau-mh-text {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(1.3rem, 2.6vw, 2rem);
    line-height: 1.45;
    color: #fff;
    font-style: italic;
}

/* ========== APERÇU TABLES (formules / hébergements) ========== */
.apercu-table {
    border-top: 1px solid var(--line);
    margin-top: 3rem;
}
.apercu-row {
    display: grid;
    grid-template-columns: 0.5fr 2fr 1.2fr auto;
    align-items: center;
    gap: 2rem;
    padding: 2.2rem 0;
    border-bottom: 1px solid var(--line);
    transition: background 0.3s, padding 0.3s;
}
.apercu-row:hover {
    background: var(--cream-warm);
    padding-left: 1rem; padding-right: 1rem;
}
.apercu-num {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.3rem;
    color: var(--patine);
}
.apercu-name {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: 1.6rem;
    color: var(--dark);
    line-height: 1.2;
}
.apercu-name small {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.78rem;
    color: var(--text-light);
    font-weight: 300;
    letter-spacing: 0.05em;
    margin-top: 0.3rem;
}
.apercu-price {
    font-size: 0.85rem;
    color: var(--text);
    letter-spacing: 0.02em;
}
.apercu-price strong {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.2rem;
    color: var(--dark);
    font-weight: 500;
}
.apercu-cta {
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--patine);
    border-bottom: 1px solid var(--patine);
    padding-bottom: 2px;
    transition: color 0.3s;
    white-space: nowrap;
}
.apercu-cta:hover { color: var(--dark); }

@media (max-width: 800px) {
    .apercu-row {
        grid-template-columns: 1fr;
        gap: 0.8rem;
        padding: 1.8rem 0;
    }
    .apercu-row:hover { padding-left: 0; padding-right: 0; }
    .apercu-cta { justify-self: start; }
}

/* ========== CHIFFRES CLÉS ========== */
.chiffres {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.chiffre {
    text-align: center;
    padding: 3rem 1.2rem;
    border-right: 1px solid var(--line);
}
.chiffre:last-child { border-right: none; }
.chiffre-val {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    color: var(--dark);
    line-height: 1;
    margin-bottom: 0.6rem;
}
.chiffre-val em { font-style: italic; color: var(--patine); }
.chiffre-label {
    font-size: 0.65rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--text-light);
}
@media (max-width: 900px) {
    .chiffres { grid-template-columns: repeat(2, 1fr); }
    .chiffre { border-bottom: 1px solid var(--line); }
    .chiffre:nth-child(2n) { border-right: none; }
    .chiffre:last-child { grid-column: span 2; border-bottom: none; border-right: none; }
}

/* ========== CITATION ========== */
.citation {
    background: var(--stone-light);
    padding: 7rem 5%;
    text-align: center;
}
.citation-inner {
    max-width: 880px; margin: 0 auto;
}
.citation-mark {
    font-family: 'Cormorant Garamond', serif;
    font-size: 5rem;
    line-height: 0.6;
    color: var(--patine);
    margin-bottom: 1rem;
}
.citation-text {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.2rem, 2.2vw, 1.7rem);
    line-height: 1.5;
    color: var(--dark);
}

/* ========== CONTACT BAND ========== */
.contact-band {
    position: relative;
    background: var(--dark);
    color: #fff;
    padding: 6rem 5%;
    text-align: center;
    overflow: hidden;
}
.contact-band-bg {
    position: absolute; inset: 0;
    opacity: 0.18;
    object-fit: cover;
    width: 100%; height: 100%;
}
.contact-band-inner {
    position: relative; z-index: 1;
    max-width: 700px; margin: 0 auto;
}
.contact-band .eyebrow { color: var(--stone-warm); }
.contact-band h2 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.2;
    color: #fff;
    margin-bottom: 1rem;
}
.contact-band h2 em { font-style: italic; color: var(--stone-warm); }
.contact-band p {
    color: rgba(255,255,255,0.78);
    font-size: 1rem;
    line-height: 1.7;
    max-width: 560px; margin: 0 auto 2.2rem;
}
.contact-band .btn {
    display: inline-block;
    padding: 1.1rem 2.5rem;
    background: var(--patine); color: #fff;
    font-size: 0.72rem; letter-spacing: 0.25em;
    text-transform: uppercase;
    border: 1px solid var(--patine);
    transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.contact-band .btn:hover {
    background: transparent; color: #fff;
    border-color: #fff;
}

/* ========== FOOTER ========== */
.footer {
    background: var(--dark);
    color: #fff;
    padding: 7rem 5% 5rem;
    border-top: 1px solid rgba(255,255,255,0.06);
    text-align: center;
}
/* Le pied de page reprend le verrou du hero, en filigrane. L'ancien libellé
   était du texte en Cormorant à 13 % de blanc ; le tracé réel étant beaucoup
   plus fin, il lui faut un peu plus d'opacité pour peser autant à l'œil. */
.footer-logo {
    display: block;
    width: min(330px, 62vw);
    height: auto;
    margin: 0 auto 1.7rem;
    opacity: 0.17;
}
.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1.7rem;
}
.footer-links a {
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.58);
    transition: color 0.3s;
}
.footer-links a:hover { color: var(--stone-warm); }
.footer-copy {
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    color: rgba(255,255,255,0.5);
}
.footer-copy a { color: rgba(255,255,255,0.62); transition: color 0.3s; }
.footer-copy a:hover { color: var(--stone-warm); }
@media (max-width: 600px) {
    .footer { padding: 4rem 5% 3rem; }
    .footer-logo { font-size: 1.5rem; letter-spacing: 0.2em; margin-bottom: 1.1rem; }
    .footer-links { gap: 0.6rem 1.2rem; }
    .footer-links a { font-size: 0.64rem; }
}

/* ========== REVEAL ANIMATIONS ========== */
/* Apparition au défilement. Deux réglages font toute la différence de
   sensation : la distance parcourue et la durée. À 28 px sur 0,9 s, le bloc
   montait encore alors que la page descendait déjà — deux mouvements
   contraires en même temps, ce qui donne une impression de flottement.
   À 14 px sur 0,65 s, le bloc est posé avant que l'œil ne l'ait cherché. */
.reveal {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
    /* Filet de sécurité. C'est app.js qui fait apparaître ces blocs : si ce
       fichier ne se charge pas (absent du serveur, réseau coupé, bloqueur),
       la page resterait vide. Au bout de trois secondes, ils apparaissent
       donc d'eux-mêmes. Dès que le script démarre, il coupe ce filet et
       reprend la main : le visiteur ne voit aucune différence. */
    animation: revealSecours 0.6s ease 3s forwards;
}
@keyframes revealSecours { to { opacity: 1; transform: none; } }
.reveal-pilote .reveal { animation: none; }
.reveal.visible { opacity: 1; transform: translate3d(0, 0, 0); }
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }

/* Mouvement réduit demandé par le visiteur : le contenu s'affiche sans
   animation, et les ancres cessent de défiler toutes seules. */
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; animation: none; }
    html { scroll-behavior: auto; }
}

/* ========== PAGE ÉVÉNEMENTS — formules détaillées ========== */
.formule {
    padding: 4.25rem 5%;
    border-bottom: 1px solid var(--line);
    max-width: 1400px;
    margin: 0 auto;
}
.formule:last-of-type { border-bottom: none; }
.formule-head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: end;
    margin-bottom: 1.8rem;
}
.formule-num {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.1rem;
    color: var(--patine);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 0.8rem;
}
.formule-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.1;
    color: var(--dark);
}
.formule-price {
    text-align: right;
}
.formule-price strong {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: 2rem;
    color: var(--patine);
    display: block;
    line-height: 1.1;
}
.formule-price span {
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-light);
}
.formule-body {
    display: grid;
    grid-template-columns: 1.05fr 1.2fr;
    gap: 4rem;
    align-items: start;
}
.formule-img {
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--stone);
}
.formule-img img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 1.2s ease;
}
.formule-img:hover img { transform: scale(1.04); }
.formule-content .body-text { margin-bottom: 1.5rem; }
.formule-list {
    list-style: none;
    margin: 1.6rem 0 2rem;
}
.formule-list li {
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--line-soft);
    display: flex; align-items: flex-start; gap: 0.9rem;
    font-size: 0.92rem;
    color: var(--text);
}
.formule-list li::before {
    content: '';
    flex-shrink: 0;
    width: 18px; height: 1px;
    background: var(--patine);
    margin-top: 0.85rem;
}
.formule-cta {
    display: inline-block;
    padding: 1rem 2rem;
    background: var(--patine);
    color: #fff;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.formule-cta:hover { background: var(--dark); }
.formule-cta.outline {
    background: transparent;
    color: var(--patine);
    border: 1px solid var(--patine);
}
.formule-cta.outline:hover { background: var(--patine); color: #fff; }

@media (max-width: 900px) {
    .formule-head, .formule-body { grid-template-columns: 1fr; gap: 1.5rem; }
    .formule-price { text-align: left; }
}

/* ========== PAGE HÉBERGEMENTS — Encart Les Buis ========== */
.encart-buis {
    background: var(--cream-warm);
    padding: 6rem 5%;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
/* Deux colonnes : le texte et les infos à gauche, trois photos en mosaïque
   à droite, visibles d'emblée. Un clic ouvre la visionneuse sur toutes les
   photos de la maison (les autres sont présentes mais masquées). */
.encart-buis-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}
.encart-buis-tag {
    font-size: 0.65rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--patine);
    margin-bottom: 1rem;
}
.encart-buis-photos {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0.7rem;
    aspect-ratio: 1;
}
.buis-photo {
    position: relative;
    display: block;
    overflow: hidden;
    cursor: zoom-in;
}
.buis-photo:first-child { grid-row: 1 / 3; }
/* Recadrée en hauteur, la façade garde la maison plutôt que le grand arbre. */
.buis-photo:first-child img { object-position: 52% center; }
.buis-photo picture, .buis-photo img { display: block; width: 100%; height: 100%; }
.buis-photo img { object-fit: cover; transition: transform 0.6s ease; }
.buis-photo:hover img { transform: scale(1.04); }
.buis-photo:focus-visible { outline: 2px solid var(--patine); outline-offset: 3px; }
.buis-photo--cachee { display: none; }
.encart-buis-plus {
    position: absolute;
    right: 0.8rem;
    bottom: 0.8rem;
    padding: 0.45rem 0.8rem;
    background: rgba(245,240,232,0.92);
    color: var(--patine);
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    pointer-events: none;
}
@media (max-width: 900px) {
    .encart-buis-inner { grid-template-columns: 1fr; gap: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) {
    .buis-photo img { transition: none; }
}
/* Encart aux couleurs de la Maison Les Buis (vert sauge au lieu de l'or) */
.encart-buis.lesbuis-theme {
    --patine: #6B7A60;
    --patine-light: #8B9A7E;
    --patine-soft: rgba(139,154,126,0.15);
    background: #F2EDE4;
}
.encart-buis.lesbuis-theme .encart-buis-tag,
.encart-buis.lesbuis-theme .h-title em { color: var(--patine); }
/* Les 3 infos Les Buis au format icônes, resserrées pour tenir sur une ligne dans la colonne */
.encart-buis .domaine-services { gap: 1.4rem; }
.encart-buis .domaine-service { flex: 0 1 138px; }
.encart-buis .domaine-service-ic { width: 50px; height: 50px; }

/* Bandeaux « Découvrir l'Ardèche » : la photo en fond, le texte par-dessus,
   le tout cliquable vers une page de l'office de tourisme. Le <a> porte
   .section-dark pour récupérer les couleurs de texte claires. */
.terroir-hero {
    position: relative;
    display: block;
    overflow: hidden;
    padding: 5.5rem 5%;
    text-decoration: none;
    isolation: isolate;
}
.terroir-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    transition: transform 1200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.terroir-hero-voile {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to bottom,
        rgba(10,9,5,0.72) 0%,
        rgba(10,9,5,0.58) 45%,
        rgba(10,9,5,0.74) 100%);
    transition: background 500ms ease;
}
.terroir-hero-contenu {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}
/* Une seule phrase courte, en colonne étroite : un pavé de texte posé sur
   une photo se lit mal, quel que soit le voile. */
.terroir-hero .body-text {
    margin: 1.3rem auto 0;
    max-width: 520px;
    font-size: 0.95rem;
    line-height: 1.75;
}
.terroir-hero-lien {
    display: inline-block;
    margin-top: 2rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.5);
    padding-bottom: 0.4rem;
    transition: border-color 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
    .terroir-hero:hover .terroir-hero-bg { transform: scale(1.04); }
    .terroir-hero:hover .terroir-hero-voile {
        background: linear-gradient(to bottom,
            rgba(10,9,5,0.62) 0%,
            rgba(10,9,5,0.46) 45%,
            rgba(10,9,5,0.66) 100%);
    }
    .terroir-hero:hover .terroir-hero-lien { border-bottom-color: #fff; }
}
.terroir-hero:focus-visible { outline: 2px solid var(--stone-warm); outline-offset: -6px; }
@media (max-width: 900px) {
    .terroir-hero { padding: 4rem 6%; }
    .terroir-hero-lien { margin-top: 1.6rem; }
}

/* Plan illustré du domaine, en grand sur l'accueil. Largeur plafonnée à
   1150 px : le fichier source fait 1448 px de large, au-delà il mollirait
   sur les écrans à forte densité. */
.encart-plan {
    background: var(--cream);
    padding: 3rem 5%;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    text-align: center;
}
.encart-plan-entete { margin-bottom: 1.6rem; }
/* Le cadre épouse la photo (et pas la largeur disponible) : sans quoi le
   voile de survol déborderait de part et d'autre du plan. */
.encart-plan .encart-plan-visuel {
    max-width: 1150px;
    width: fit-content;
    margin: 0 auto;
    /* Les règles mobiles de la galerie imposent un cadre carré aux
       .gallery-item : hors grille, le plan garde ses proportions. */
    aspect-ratio: auto;
    content-visibility: visible;
}
.encart-plan .encart-plan-visuel img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}
/* Sur ordinateur, le titre et le plan doivent tenir ensemble sur un écran :
   on plafonne la hauteur de l'image et c'est elle qui se réduit, la largeur
   suivant toute seule puisqu'elle passe en auto. Les 330 px retranchés sont
   le reste de la section (paddings, titre, lien). */
@media (min-width: 901px) {
    .encart-plan .encart-plan-visuel img {
        width: auto;
        max-width: 100%;
        max-height: calc(100vh - 230px);
        margin: 0 auto;
    }
}
/* Écrans peu hauts (portables 720 px) : on resserre les marges pour rendre
   au plan la place qu'elles prenaient, sinon il tombe à 520 px de large et
   les étiquettes deviennent illisibles. */
@media (min-width: 901px) and (max-height: 820px) {
    .encart-plan { padding: 2.2rem 5%; }
    .encart-plan-entete { margin-bottom: 1rem; }
    .encart-plan .encart-plan-visuel img { max-height: calc(100vh - 195px); }
}
@media (max-width: 900px) {
    .encart-plan { padding: 3rem 4%; }
    .encart-plan-entete { margin-bottom: 1.6rem; }
}

/* Mention : suites du château réservables uniquement avec une prestation */
.suite-access {
    max-width: 680px;
    margin: 1.6rem auto 0;
    padding: 0.9rem 1.4rem;
    border: 1px solid var(--patine-light);
    background: rgba(139,114,64,0.06);
    border-radius: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    text-align: left;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--text);
}
.suite-access svg {
    width: 22px; height: 22px;
    stroke: var(--patine);
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}
.suite-access strong { color: var(--patine); font-weight: 500; }
@media (max-width: 600px) {
    .suite-access { flex-direction: column; text-align: center; gap: 0.5rem; }
}

/* Services du domaine — icônes alignées + infos simples */
.domaine-services {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.8rem 2.2rem;
    margin-top: 3.5rem;
}
.domaine-service {
    flex: 0 1 160px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
}
.domaine-service-ic {
    width: 58px; height: 58px;
    border-radius: 50%;
    background: var(--patine-soft);
    display: flex; align-items: center; justify-content: center;
}
.domaine-service-ic svg {
    width: 26px; height: 26px;
    stroke: var(--patine);
    fill: none;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.domaine-service-title {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.25rem;
    line-height: 1.15;
    color: var(--dark);
}
.domaine-service-desc {
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--text-light);
}
@media (max-width: 600px) {
    .domaine-services { gap: 2.2rem 1.5rem; }
    .domaine-service { flex: 1 1 40%; }
}

/* ========== EXPÉRIENCES / ACTIVITÉS — cartes photo + icône (façon Les Buis) ========== */
.exp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.6rem;
    margin-top: 3.5rem;
}
.exp-card {
    background: var(--cream);
    border: 1px solid var(--line-soft);
    border-radius: 0.4rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-align: center;
    transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.3s;
}
.exp-card:hover {
    box-shadow: 0 14px 32px rgba(44,42,37,0.10);
    border-color: var(--patine-light);
    transform: translateY(-4px);
}
.exp-card-img {
    width: 100%;
    aspect-ratio: 5/4;
    overflow: hidden;
    background: var(--stone-light);
}
.exp-card-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.9s ease;
}
.exp-card:hover .exp-card-img img { transform: scale(1.05); }
.exp-card-body {
    padding: 1.5rem 1.4rem 1.7rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}
.exp-icon {
    height: 34px;
    margin-bottom: 0.7rem;
    display: flex; align-items: center; justify-content: center;
}
.exp-icon svg {
    width: 28px; height: 28px;
    stroke: var(--patine);
    fill: none;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.exp-name {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.3rem;
    line-height: 1.2;
    color: var(--dark);
    margin-bottom: 0.6rem;
}
.exp-desc {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-light);
}
@media (max-width: 1024px) { .exp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .exp-grid { grid-template-columns: 1fr; } }

/* ========== PAGE CHÂTEAU — Timeline ========== */
.timeline {
    max-width: 1100px;
    margin: 4rem auto 0;
    padding: 0 5%;
    position: relative;
}
.timeline::before {
    content: '';
    position: absolute;
    left: 80px; top: 0; bottom: 0;
    width: 1px;
    background: var(--line);
}
.tl-event {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 3rem;
    padding: 2.5rem 0;
    position: relative;
}
.tl-event::before {
    content: '';
    position: absolute;
    left: 76px; top: 2.9rem;
    width: 9px; height: 9px;
    background: var(--patine);
    border-radius: 50%;
}
.tl-year {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 0.95rem;
    color: var(--patine);
    text-align: right;
    padding-top: 0.3rem;
    letter-spacing: 0.05em;
}
.tl-body h3 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: 1.45rem;
    color: var(--dark);
    line-height: 1.25;
    margin-bottom: 0.6rem;
}
.tl-body p {
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--text);
}

@media (max-width: 700px) {
    .timeline::before { left: 0; }
    .tl-event { grid-template-columns: 1fr; gap: 0.4rem; padding-left: 1.5rem; }
    .tl-event::before { left: -4px; top: 0.55rem; }
    .tl-year { text-align: left; padding-top: 0; }
}

/* ========== ARCHI — liste ========== */
.archi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2.5rem 3rem;
    margin-top: 3rem;
}
.archi-item h4 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: 1.3rem;
    color: var(--dark);
    margin-bottom: 0.5rem;
    line-height: 1.3;
}
.archi-item h4 .num {
    font-style: italic;
    color: var(--patine);
    margin-right: 0.4rem;
    font-size: 0.95rem;
}
.archi-item p {
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--text);
}

/* ========== TERROIR ========== */
.terroir-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    margin-top: 3rem;
}
.terroir-card {
    padding: 2.2rem 1.8rem;
    background: var(--cream);
    border: 1px solid var(--line-soft);
    text-align: center;
}
.terroir-card h4 {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.4rem;
    color: var(--patine);
    margin-bottom: 1rem;
}
.terroir-card p {
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--text);
}
/* Quatre cartes sur trois colonnes : la dernière se cale au milieu. C'était
   fait par un style en ligne, qui créait une 2e colonne implicite une fois
   la grille passée à une seule colonne — d'où deux colonnes étriquées sur
   téléphone. La règle n'existe donc qu'à partir de trois colonnes. */
@media (min-width: 801px) {
    .terroir-grid > .terroir-card:nth-child(4):last-child { grid-column: 2; }
}
@media (max-width: 800px) {
    /* !important : les deux grilles du site portent un nombre de colonnes en
       style en ligne, qui l'emporterait sinon et laisserait deux colonnes
       étriquées sur téléphone. */
    .terroir-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
        margin-top: 2.5rem !important;
        max-width: none !important;
    }
    .terroir-card { padding: 1.7rem 1.5rem; }
    .terroir-card h4 { margin-bottom: 0.6rem; }
    .terroir-card p { font-size: 0.88rem; line-height: 1.65; }
}

/* Accès : trois trajets alignés plutôt qu'un paragraphe compact. */
.acces-trajets {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    max-width: 880px;
    margin: 3rem auto 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.acces-trajet {
    flex: 1 1 0;
    min-width: 180px;
    padding: 2rem 1.2rem;
    text-align: center;
    border-right: 1px solid var(--line);
}
.acces-trajet:last-child { border-right: none; }
.acces-duree {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.9rem;
    line-height: 1;
    color: var(--patine);
}
.acces-lieu {
    display: block;
    margin-top: 0.7rem;
    font-size: 0.66rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text);
}
.acces-detail {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.78rem;
    color: var(--text-light);
}
.acces-adresse {
    margin: 2rem auto 0;
    text-align: center;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    color: var(--text-light);
}
@media (max-width: 700px) {
    .acces-trajets { margin-top: 2.2rem; }
    .acces-trajet {
        flex: 1 1 100%;
        min-width: 0;
        padding: 1.4rem 1rem;
        border-right: none;
        border-bottom: 1px solid var(--line);
    }
    .acces-trajet:last-child { border-bottom: none; }
    .acces-duree { font-size: 1.6rem; }
    .acces-adresse { margin-top: 1.6rem; font-size: 0.74rem; }
}

/* ========== GALERIE — grille filtrable fluide ========== */
.gallery-page {
    /* 11rem laissaient un grand vide sous le hero, d'autant que le
       paragraphe d'intro a été retiré. */
    padding: 5rem 5% 0;
    max-width: 1500px; margin: 0 auto;
    text-align: center;
}
.gallery-page .h-title { margin-bottom: 0.8rem; }
.gallery-page .body-text {
    max-width: 660px; margin: 0 auto;
}
.gallery-filters {
    display: flex; justify-content: center; flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.7rem 1.8rem;
    margin: 2.8rem 0 0;
}
/* Deux familles, comme demandé : l'extérieur du château d'un côté,
   l'intérieur de l'autre. Chaque famille porte son intitulé. */
.gallery-filter-group { display: flex; flex-direction: column; gap: 0.5rem; }
.gallery-filter-legend {
    font-size: 0.58rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--patine);
    text-align: center;
}
.gallery-filter-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; }
@media (max-width: 860px) {
    /* Les deux familles ne tiennent plus côte à côte : elles s'empilent.
       Les boutons passent en grille à deux colonnes — en simple retour à la
       ligne ils formaient une pyramide irrégulière, chacun d'une largeur
       différente. Un bouton seul sur sa rangée occupe les deux colonnes. */
    .gallery-filters {
        flex-direction: column;
        align-items: stretch;
        gap: 1.1rem;
        padding: 0 5%;
    }
    .gallery-filter-group { width: 100%; }
    .gallery-filter-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
    .gallery-filters > .gallery-filter,
    .gallery-filter-row > :last-child:nth-child(odd) { grid-column: 1 / -1; }
    .gallery-filter {
        font-size: 0.6rem;
        letter-spacing: 0.1em;
        padding: 0.75rem 0.4rem;
        text-align: center;
    }
}
.gallery-filter {
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 0.7rem 1.4rem;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--text);
    transition: background 0.35s, color 0.35s, border-color 0.35s;
}
.gallery-filter:hover { border-color: var(--patine); color: var(--patine); }
.gallery-filter.active {
    background: var(--patine); border-color: var(--patine); color: #fff;
}

/* Mosaïque en colonnes : chaque photo garde sa hauteur naturelle, plus
   aucun recadrage forcé. Les colonnes se remplissent de haut en bas. */
.gallery-grid {
    columns: 4;
    column-gap: 1rem;
    padding: 3rem 5% 6rem;
    max-width: 1500px; margin: 0 auto;
}
@media (max-width: 1240px) { .gallery-grid { columns: 3; } }

/* Aperçu de l'accueil : même grille, mêmes cartes et même visionneuse que la
   page galerie. Seul le nombre de colonnes change — six photos réparties sur
   quatre colonnes laissent des trous, trois colonnes les remplissent. */
.gallery-grid--apercu {
    columns: 3;
    max-width: 1300px;
    padding: 0 0 1rem;
    margin-top: 2.2rem;
}
/* Aperçu de l'accueil : cadres tous identiques, là où la galerie complète
   laisse chaque photo à son format naturel. En dessous de 700 px, la grille
   carrée de la galerie prend déjà le relais. */
/* L'aperçu doit tenir d'un seul coup d'œil : sans resserrement, le bloc
   faisait 1026 px de haut pour 900 px d'écran et obligeait à défiler. */
/* Fond distinct : l'aperçu suit désormais « Trois formules » sans bandeau
   photo entre les deux, une teinte différente évite qu'ils se confondent. */
.section-apercu {
    background: var(--stone-light);
    padding-top: 3.4rem;
    padding-bottom: 2.6rem;
}

@media (min-width: 701px) {
    .gallery-grid--apercu {
        columns: auto;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.85rem;
        margin-top: 2rem;
        padding-bottom: 0;
    }
    .gallery-grid--apercu .gallery-item { margin-bottom: 0; }
    .gallery-grid--apercu .gallery-item img {
        display: block;
        width: 100%;
        height: 100%;
        /* 3:2 = le format natif de la plupart de ces photos : cadres
           identiques, rangées plus basses, et presque aucun rognage.
           Le plafond suit la hauteur de l'écran, pour que les six photos
           tiennent d'un seul coup d'œil même sur un portable bas. Tous les
           cadres ayant la même largeur, ils gardent la même hauteur. */
        aspect-ratio: 3 / 2;
        max-height: calc(50vh - 160px);
        object-fit: cover;
    }
}
@media (min-width: 701px) and (max-width: 900px) {
    .gallery-grid--apercu { grid-template-columns: repeat(2, 1fr); }
}
.gallery-item {
    position: relative;
    overflow: hidden;
    break-inside: avoid;
    margin-bottom: 1rem;
    /* Main qui clique plutôt que loupe : le clic ouvre la visionneuse,
       il n'agrandit pas la photo sur place. */
    cursor: pointer;
    background: var(--stone-light);
    border-radius: 0.5rem;
    border: 1px solid transparent;
    box-shadow: 0 4px 14px rgba(44,42,37,0.08);
    /* état initial pour l'entrée en cascade */
    opacity: 0;
    transform: translateY(18px) scale(0.98);
    transition: box-shadow 0.4s ease, border-color 0.4s ease;
}
.gallery-item.in {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1),
                transform 0.7s cubic-bezier(0.22,1,0.36,1),
                box-shadow 0.4s ease, border-color 0.4s ease;
    transition-delay: calc(min(var(--i, 0), 6) * 60ms), calc(min(var(--i, 0), 6) * 60ms), 0s, 0s;
}
.gallery-item.is-hidden { display: none; }
/* photos au-delà de la tranche affichée sur téléphone (bouton « Voir plus ») */
.gallery-item.is-beyond { display: none; }
.gallery-more {
    display: none;
    margin: 0 auto 3.5rem;
    padding: 0.95rem 2.2rem;
    background: none;
    border: 1px solid var(--patine);
    color: var(--patine);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 2rem;
    transition: background 0.3s ease, color 0.3s ease;
}
.gallery-more:not([hidden]) { display: block; }
.gallery-more:active { background: var(--patine); color: #fff; }
.gallery-item:hover {
    border-color: var(--patine-light);
    box-shadow: 0 18px 40px rgba(44,42,37,0.22);
}
.gallery-item img {
    width: 100%; height: auto; display: block;
    transition: transform 1.1s cubic-bezier(0.22,1,0.36,1), filter 0.5s;
    filter: saturate(0.96);
}
.gallery-item:hover img { transform: scale(1.08); filter: saturate(1.04); }

/* Survol : même principe que les autres photos du site (.univers-card) —
   dégradé en bas, infos alignées en bas à gauche, apparition en fondu cascadé. */
.gallery-overlay {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: flex-start; justify-content: flex-end;
    gap: 0.45rem;
    padding: 1.7rem 1.5rem;
    text-align: left;
    background: linear-gradient(to top,
        rgba(0,0,0,0.82) 0%,
        rgba(0,0,0,0.42) 35%,
        rgba(0,0,0,0.08) 65%,
        transparent 100%);
    opacity: 0;
    transition: opacity 0.6s ease;
}
.gallery-item:hover .gallery-overlay,
.gallery-item:focus-visible .gallery-overlay { opacity: 1; }
.gallery-item:focus-visible { outline: 2px solid var(--patine); outline-offset: 3px; }

/* pas d'icône loupe : on suit le principe des autres photos */
.gallery-zoom { display: none; }

.gallery-overlay-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400; font-size: 1.35rem; line-height: 1.15;
    text-transform: uppercase; letter-spacing: 0.04em;
    color: #fff; margin: 0;
    opacity: 0; transform: translateY(10px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.gallery-item:hover .gallery-overlay-title,
.gallery-item:focus-visible .gallery-overlay-title {
    opacity: 1; transform: none; transition-delay: 0.1s;
}

/* catégorie : texte patine façon .univers-link (fondu cascadé) */
.gallery-overlay .gallery-badge {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase;
    font-weight: 500;
    color: var(--patine-light);
    background: none; border: none; border-radius: 0; padding: 0;
    opacity: 0; transform: translateY(10px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.gallery-item:hover .gallery-overlay .gallery-badge,
.gallery-item:focus-visible .gallery-overlay .gallery-badge {
    opacity: 1; transform: none; transition-delay: 0.22s;
}

/* badge en pastille crème : conservé pour la visionneuse */
.gallery-badge {
    display: inline-flex; align-items: center;
    font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase;
    padding: 0.35rem 0.8rem;
    background: var(--cream); color: var(--patine);
    border-radius: 2rem; font-weight: 500;
}

@media (max-width: 900px) {
    .gallery-grid { columns: 2; }
}
/* ========== GALERIE SUR TÉLÉPHONE ==========
   Grille de 3 carrés jointifs, à la manière d'Instagram. On abandonne la
   mosaïque : sur un écran étroit elle produit une colonne interminable.
   Tout ce qui pourrait ralentir le défilement est neutralisé — animation
   d'entrée, transitions, légendes — et le navigateur est autorisé à ne pas
   calculer les tuiles hors écran. */
@media (max-width: 700px) {
    /* Les six filtres tenaient sur trois lignes et repoussaient les photos
       hors de l'écran : on les met sur une seule ligne qui défile. */
    .gallery-filters {
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 0.5rem;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        padding: 0 5% 0.4rem;
        margin-top: 2rem;
    }
    .gallery-filters::-webkit-scrollbar { display: none; }
    .gallery-filter { flex: 0 0 auto; scroll-snap-align: start; }
    .gallery-grid {
        columns: auto;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2px;
        padding: 1.6rem 0 4rem;
        max-width: none;
    }
    .gallery-item {
        margin-bottom: 0;
        aspect-ratio: 1;
        border-radius: 0;
        border: 0;
        box-shadow: none;
        opacity: 1;
        transform: none;
        transition: none;
        content-visibility: auto;
        contain-intrinsic-size: 33vw 33vw;
    }
    .gallery-item.in { transition: none; transition-delay: 0s; }
    .gallery-item img {
        height: 100%;
        object-fit: cover;
        transition: none;
    }
    .gallery-item:hover img { transform: none; }
    /* pas de légende sur la grille : elle reste dans la visionneuse */
    .gallery-overlay { display: none; }
}

@media (max-width: 560px) {
    .gallery-grid { padding-bottom: 4rem; }
    /* sans survol : infos visibles en permanence */
    .gallery-overlay { opacity: 1; }
    .gallery-overlay-title,
    .gallery-overlay .gallery-badge { opacity: 1; transform: none; transition: none; }
}

/* lightbox animée */
.lightbox {
    position: fixed; inset: 0;
    /* fond dépoli : la page reste devinée derrière la photo */
    background: rgba(20,18,15,0.80);
    backdrop-filter: blur(28px) saturate(0.9);
    -webkit-backdrop-filter: blur(28px) saturate(0.9);
    z-index: 10000;
    display: none;
    align-items: center; justify-content: center;
    /* Un « padding: 5% » se calcule sur la LARGEUR, même en haut et en bas :
       sur un écran large il réservait 100 px que la colonne photo + légende
       + vignettes dépassait, d'où une image collée au bord. Vertical fixe,
       horizontal proportionnel mais borné. */
    padding: 2rem clamp(1rem, 5vw, 4.5rem);
}
/* la photo est saisissable au doigt comme à la souris pour la refermer */
.lightbox-stage img {
    cursor: grab;
    touch-action: none;
    will-change: transform;
    -webkit-user-select: none; user-select: none;
}
.lightbox-stage img:active { cursor: grabbing; }
@media (prefers-reduced-motion: reduce) {
    .lightbox { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(20,18,15,0.96); }
}
.lightbox.open { display: flex; }
.lightbox-stage {
    display: flex; flex-direction: column; align-items: center; gap: 1.1rem;
    max-width: 100%;
    max-height: 100%;
    min-height: 0;
}
.lightbox-stage img {
    max-width: 100%;
    /* Garde-fou seulement : la boîte exacte est calculée en JavaScript à
       partir des proportions de la photo et de la place réellement libre. */
    max-height: calc(100vh - 8rem);
    object-fit: contain;
    border-radius: 0.4rem;
    box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
/* Légendes retirées des galeries : la visionneuse n'a plus rien à afficher. */
.lightbox-caption { display: none; }
.lightbox-caption-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem; font-weight: 300;
}
.lightbox-close,
.lightbox-prev,
.lightbox-next {
    position: absolute;
    color: #fff;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.2);
    width: 48px; height: 48px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 1.4rem; line-height: 1;
    transition: background 0.3s, border-color 0.3s;
}
.lightbox-close { top: 1.6rem; right: 1.6rem; }
.lightbox-prev { left: 1.6rem; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 1.6rem; top: 50%; transform: translateY(-50%); }
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover {
    background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.45);
}
@media (max-width: 1024px) {
    .lightbox-stage { padding-bottom: 0; }
}
@media (max-width: 600px) {
    .lightbox-stage img { max-height: 62vh; }
}

/* ========== CONTACT PAGE ========== */
.contact-page {
    padding: 10rem 5% 5rem;
    max-width: 1300px; margin: 0 auto;
}
.contact-head {
    text-align: center;
    max-width: 720px; margin: 0 auto 4.5rem;
}
.contact-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 5rem;
    align-items: start;
}
@media (max-width: 900px) {
    .contact-grid { grid-template-columns: 1fr; gap: 3.5rem; }
}
.contact-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.4rem 1.6rem;
}
.contact-form .full { grid-column: span 2; }
.contact-form label {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-light);
    margin-bottom: 0.5rem;
    font-weight: 500;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: 0.95rem 1rem;
    background: var(--cream-warm);
    border: 1px solid transparent;
    color: var(--dark);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    font-weight: 300;
    transition: border-color 0.3s, background 0.3s;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--patine);
    background: #fff;
}
.contact-form textarea { resize: vertical; min-height: 140px; }
.contact-form select {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1L6 6L11 1' stroke='%238B7240' stroke-width='1.5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}
.contact-form .rgpd {
    grid-column: span 2;
    display: flex; align-items: flex-start; gap: 0.7rem;
    font-size: 0.82rem;
    color: var(--text-light);
    line-height: 1.5;
    cursor: pointer;
}
.contact-form .rgpd input { width: auto; margin-top: 0.2rem; flex-shrink: 0; }
/* Cible le seul bouton d'envoi : les <button> du calendrier (cases de
   dates, flèches de mois, jours) sont dans le formulaire et héritaient
   sinon du fond doré, des majuscules et du padding du bouton d'envoi. */
.contact-form > button[type="submit"] {
    grid-column: span 2;
    padding: 1.15rem 2.5rem;
    background: var(--patine); color: #fff;
    border: 1px solid var(--patine);
    font-size: 0.74rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.3s, color 0.3s, border-color 0.3s;
    margin-top: 0.5rem;
}
.contact-form > button[type="submit"]:hover { background: var(--dark); border-color: var(--dark); }

/* Les enfants d'une grille ne descendent pas sous leur min-content par
   défaut : sans ça, un champ large (le calendrier) élargit toute la grille. */
.contact-form > * { min-width: 0; }

@media (max-width: 600px) {
    .contact-form { grid-template-columns: 1fr; }
    .contact-form .full,
    .contact-form .rgpd,
    .contact-form > button[type="submit"] { grid-column: auto; }
}

.contact-coords {
    background: var(--cream-warm);
    padding: 2.5rem;
    border-left: 2px solid var(--patine);
}
.contact-coords h3 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: 1.5rem;
    color: var(--dark);
    margin-bottom: 1.3rem;
    line-height: 1.3;
}
.contact-coords + .contact-coords { margin-top: 1.6rem; }
.contact-coords p {
    font-size: 0.92rem;
    line-height: 1.85;
    color: var(--text);
}
.contact-coords strong {
    font-weight: 500;
    color: var(--dark);
}
.contact-coords ul { list-style: none; margin-top: 0.4rem; }
.contact-coords li {
    padding: 0.4rem 0;
    font-size: 0.88rem;
    color: var(--text);
}
.contact-coords li strong {
    display: inline-block;
    min-width: 90px;
    color: var(--patine);
    font-weight: 500;
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* ========== UTILITIES ========== */
.text-center { text-align: center; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mb-2 { margin-bottom: 2rem; }

.intro-text-large {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.2rem, 1.9vw, 1.55rem);
    line-height: 1.55;
    color: var(--text);
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
}

@media (max-width: 900px) {
    .section { padding: 4rem 5%; }
    .formule { padding: 3rem 5%; }
}

/* ============================================================
   DÉROULÉ DU MARIAGE — flow alterné photo + texte avec fil doré
   ============================================================ */
.wedding-flow {
    padding: 7rem 5%;
    background: var(--cream);
}
.flow-header {
    text-align: center;
    margin-bottom: 5rem;
}
.flow-steps {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 5rem;
    position: relative;
}
/* Le lacet SVG remplace l'ancien pointillé droit */
.flow-thread {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(200px, 30vw, 360px);
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: visible;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 6%, #000 94%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.flow-thread path {
    fill: none;
    stroke: var(--patine);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-dasharray: 0 9;
    opacity: 0.85;
}
.flow-step {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 1;
}
.flow-step:nth-child(even) .flow-step-img { order: 2; }
.flow-step::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--cream);
    border: 1.5px solid var(--patine);
    transform: translate(-50%, -50%);
    z-index: 2;
    box-shadow: 0 0 0 5px var(--cream);
}
.flow-step-img {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: rgba(0,0,0,0.05);
}
.flow-step-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.flow-step:hover .flow-step-img img { transform: scale(1.04); }
.flow-step-content { padding: 1rem 0; }
.flow-step-num {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    color: var(--patine);
    text-transform: uppercase;
    margin-bottom: 1rem;
}
.flow-step-content h3 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: clamp(1.7rem, 2.8vw, 2.3rem);
    line-height: 1.2;
    margin-bottom: 1.4rem;
    color: var(--dark);
}
.flow-step-content p {
    color: var(--text-light);
    line-height: 1.85;
    font-weight: 300;
    margin-bottom: 1.2rem;
    font-size: 1rem;
}
.flow-step-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.2rem;
}
.flow-step-tags span {
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 0.5rem 0.9rem;
    background: var(--patine-soft);
    color: var(--patine);
    font-weight: 500;
}
@media (max-width: 900px) {
    .wedding-flow { padding: 5rem 5%; }
    .flow-steps { gap: 3.5rem; }
    .flow-thread { display: none; }
    .flow-step { grid-template-columns: 1fr; gap: 1.5rem; }
    .flow-step:nth-child(even) .flow-step-img { order: 0; }
    .flow-step-img { aspect-ratio: 4 / 3; }
    .flow-step::after { display: none; }
}

/* ============================================================
   LOADER D'ENTRÉE (accueil uniquement)
   ============================================================ */
.page-loader {
    position: fixed;
    inset: 0;
    background: var(--dark);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: opacity 0.7s cubic-bezier(0.7, 0, 0.3, 1), visibility 0.7s;
}
.page-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.page-loader-icon {
    max-width: min(160px, 22vw);
    height: auto;
    filter: brightness(0) invert(1) drop-shadow(0 4px 20px rgba(0,0,0,0.35));
    margin-bottom: 1.6rem;
    opacity: 0;
    transform: translateY(10px);
    animation: pageLoaderFadeIn 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.1s forwards;
}
.page-loader-marque {
    --logo-w: min(460px, 70vw);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.page-loader-marque .logo-surtitre {
    text-shadow: none;
    opacity: 0;
    transform: translateY(10px);
    animation: pageLoaderFadeIn 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.4s forwards;
}
.page-loader-logo {
    width: var(--logo-w);
    max-width: min(460px, 70vw);
    height: auto;
    /* Le logo est désormais un SVG déjà blanc : « brightness(0) invert(1) »
       ne servait qu'à reteindre l'ancien PNG, et coûtait une passe de filtre. */
    filter: drop-shadow(0 6px 30px rgba(0,0,0,0.4));
    opacity: 0;
    transform: translateY(10px);
    animation: pageLoaderFadeIn 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.4s forwards;
}
.page-loader-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background: var(--patine);
    width: 0%;
    animation: pageLoaderProgress 1.6s cubic-bezier(0.4, 0, 0.2, 1) 0.1s forwards;
}
@keyframes pageLoaderFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes pageLoaderProgress {
    from { width: 0%; }
    to   { width: 100%; }
}
/* Bloque le scroll pendant le loader */
body.is-loading { overflow: hidden; }

/* Navigation interne : pas d'animation de chargement (masqué dès le 1er rendu) */
html.no-loader .page-loader { display: none; }

/* ===== BOTTOM NAV — mobile/tablette, style Maisonlesbuis ===== */
.bottom-nav { display: none; }

@media (max-width: 1100px) {
    /* Top nav réduite à logo seul + cache nav desktop */
    .nav-links { display: none !important; }
    .nav > .nav-right { display: none !important; }
    /* Ni bandeau ni bouton de menu : seulement le logo. La navigation se fait
       par la barre du bas. */
    .nav .menu-toggle { display: none !important; }
    .mobile-menu { display: none !important; }
    .nav,
    .nav.scrolled,
    .nav.solid {
        /* Le logo reste en haut de la page au lieu de flotter par-dessus :
           sans bandeau pour le porter, un logo fixe finit par se poser sur
           une photo et devient illisible. La navigation est de toute façon
           assurée en permanence par la barre du bas. */
        position: absolute;
        padding: 1.1rem 5%;
        justify-content: center;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
    }
    /* Sans bandeau derrière lui, le logo doit se lire sur ce qu'il couvre :
       clair et légèrement ombré sur la photo d'accueil, sombre sur les pages
       qui n'en ont pas. */
    .nav:not(.solid) .nav-logo-icon,
    .nav:not(.solid) .nav-logo-text-img {
        filter: drop-shadow(0 2px 10px rgba(0,0,0,0.55));
    }
    .nav.solid .nav-logo-icon,
    .nav.solid .nav-logo-text-img {
        filter: brightness(0) opacity(0.78);
    }
    /* Le logo est seul dans l'en-tête sur ces écrans : il peut prendre
       plus de place qu'en version bureau réduite. */
    .nav-logo { height: 60px; }

    /* Bottom nav visible */
    .bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        z-index: 200;
        /* repère de positionnement du curseur coulissant */
        isolation: isolate;
        background: rgba(245, 240, 232, 0.97);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-top: 1px solid rgba(139, 114, 64, 0.18);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .bottom-nav-item {
        /* <button> pour « Le Château » (il ouvre un sous-menu, il ne mène
           nulle part) : on neutralise les styles par défaut du bouton pour
           qu'il soit indistinguable des liens voisins. */
        background: none;
        border: 0;
        font-family: 'Montserrat', sans-serif;
        cursor: pointer;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0.7rem 0.3rem 0.55rem;
        color: var(--dark);
        font-family: 'Montserrat', sans-serif;
        font-size: 0.5rem;
        letter-spacing: 0.13em;
        text-transform: uppercase;
        text-decoration: none;
        gap: 0.3rem;
        opacity: 0.55;
        transition: opacity 0.25s, color 0.25s;
    }
    .bottom-nav-item:hover,
    .bottom-nav-item.active { opacity: 1; color: var(--patine); }
    /* Halo doux derrière l'icône de l'onglet courant : c'est lui qui « éclaire »
       la page où l'on se trouve, bien plus lisible qu'un simple changement de
       teinte. Il grandit depuis le centre au lieu d'apparaître d'un coup. */
    .bottom-nav-item::before {
        content: '';
        position: absolute;
        top: 0.45rem;
        left: 50%;
        width: 44px;
        height: 44px;
        margin-left: -22px;
        border-radius: 50%;
        background: radial-gradient(circle,
            rgba(139,114,64,0.20) 0%,
            rgba(139,114,64,0.10) 45%,
            rgba(139,114,64,0) 70%);
        opacity: 0;
        transform: scale(0.6);
        transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
        pointer-events: none;
    }
    .bottom-nav-item.active::before { opacity: 1; transform: scale(1); }
    .bottom-nav-item.active svg { stroke-width: 1.9; }
    /* L'icône accuse l'appui, puis remonte : le doigt obtient une réponse
       avant même que la page suivante ne commence à charger. */
    .bottom-nav-item svg {
        transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), stroke-width 0.3s ease;
    }
    .bottom-nav-item:active svg { transform: scale(0.88); }
    .bottom-nav-item.active svg { transform: translateY(-1px); }
    @media (prefers-reduced-motion: reduce) {
        .bottom-nav-item svg,
        .bottom-nav-item::before { transition: none; }
    }
    /* Une seule graisse pour Trend Sans One : l'onglet actif se distingue
       par sa couleur et son trait, pas par un changement de graisse. */
    .bottom-nav-item { position: relative; }

    /* Curseur coulissant : un trait court sous l'onglet courant, qui glisse
       d'un onglet à l'autre. Sa position est calculée en JavaScript, la
       transition fait le reste. Au doigt, il part dès l'appui — donc avant
       même que la page suivante ne soit chargée. */
    .bottom-nav-ind {
        position: absolute;
        top: 0;
        left: 0;
        /* Largeur fixe : le déplacement se fait uniquement en « transform »,
           que le navigateur confie à la carte graphique. Animer « width »
           relançait un calcul de mise en page à chaque image. */
        width: 34px;
        height: 2.5px;
        border-radius: 0 0 3px 3px;
        background: linear-gradient(90deg,
            rgba(139,114,64,0.35) 0%,
            var(--patine) 22%,
            var(--patine) 78%,
            rgba(139,114,64,0.35) 100%);
        opacity: 0;
        pointer-events: none;
        transform-origin: center center;
        will-change: transform;
        transition: opacity 0.3s ease;
    }
    .bottom-nav-ind.pret { opacity: 1; }
    .bottom-nav-item svg {
        width: 22px;
        height: 22px;
        stroke: currentColor;
        fill: none;
    }
    .bottom-nav-cta { color: var(--patine); opacity: 0.95; }
    .bottom-nav-cta.active { opacity: 1; }

    /* Sous-menu « Le Château » : même contenu que le déroulant du bureau.
       Il se déplie au-dessus de la barre plutôt qu'en dessous, faute de place. */
    /* Le panneau se cale sous l'onglet « Château », au centre de la barre,
       au lieu de s'étendre d'un bord à l'autre de l'écran : il se rattache
       visiblement au bouton qui l'ouvre. Sa largeur suit le plus long
       libellé, sans jamais déborder. */
    .bottom-nav-sheet {
        position: absolute;
        bottom: 100%;
        left: var(--bn-centre, 50%);
        transform: translateX(-50%) translateY(8px);
        width: max-content;
        max-width: calc(100vw - 1.6rem);
        display: flex;
        flex-direction: column;
        margin-bottom: 0.55rem;
        padding: 0.35rem 0;
        background: var(--cream);
        border: 1px solid rgba(139, 114, 64, 0.18);
        border-radius: 0.5rem;
        box-shadow: 0 10px 30px rgba(44, 42, 37, 0.18);
        opacity: 0;
        transition: opacity 0.25s ease, transform 0.25s ease;
    }
    .bottom-nav-sheet[hidden] { display: none; }
    .bottom-nav-sheet.open { opacity: 1; transform: translateX(-50%) translateY(0); }
    .bottom-nav-sheet a {
        padding: 0.85rem 1.2rem;
        font-family: 'Montserrat', sans-serif;
        font-size: 0.68rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--dark);
        text-decoration: none;
        opacity: 0.8;
    }
    .bottom-nav-sheet a + a { border-top: 1px solid rgba(139, 114, 64, 0.12); }
    /* Petit bec sous le panneau, dans l'axe de l'onglet « Château ». */
    .bottom-nav-sheet::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -7px;
        border: 7px solid transparent;
        border-top-color: var(--cream);
        filter: drop-shadow(0 1px 0 rgba(139, 114, 64, 0.18));
    }
    .bottom-nav-sheet a:active { color: var(--patine); opacity: 1; }
    .bottom-nav-toggle[aria-expanded="true"] { opacity: 1; color: var(--patine); }

    /* Espace bas pour pas que la nav recouvre le contenu */
    body { padding-bottom: 4.5rem; }
}
@media (max-width: 600px) {
    .nav-logo { height: 52px; }
}

/* Tablette — icônes & labels plus grands */
@media (min-width: 601px) and (max-width: 1024px) {
    .bottom-nav-item {
        padding: 1rem 0.5rem 0.85rem;
        font-size: 0.55rem;
        letter-spacing: 0.15em;
        gap: 0.45rem;
    }
    .bottom-nav-item svg { width: 26px; height: 26px; }
    body { padding-bottom: 5.5rem; }
}

/* Flèche externe à côté de "Maison de maître" dans les menus (lien vers maisonlesbuis.fr) */
.ext-arrow {
    font-size: 0.85em;
    margin-left: 0.15em;
    opacity: 0.6;
    font-style: normal;
}

/* ===================================================================
   BANDE DE CHIFFRES-CLÉS — inspiration Maison les Buis (features-strip)
   =================================================================== */
.stats-strip {
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--cream-warm);
}
.stat-item {
    flex: 1 1 0;
    min-width: 150px;
    padding: 2.6rem 1.2rem;
    text-align: center;
    border-right: 1px solid var(--line);
    transition: background 0.4s ease;
}
.stat-item:last-child { border-right: none; }
.stat-item:hover { background: rgba(139,114,64,0.045); }
.stat-icon {
    color: var(--patine);
    height: 36px;
    margin-bottom: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.stat-icon svg {
    width: 32px; height: 32px;
    stroke: var(--patine);
    fill: none;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.stat-value {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.55rem;
    font-weight: 500;
    color: var(--dark);
    line-height: 1.1;
}
.stat-label {
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--text-light);
    margin-top: 0.4rem;
}
/* Hero plein écran avec la barre de chiffres calée en bas du 1er écran (séminaires) */
.hero-screen {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
}
.hero-screen .page-hero { flex: 1 1 auto; min-height: 60vh; }
.hero-screen .stats-strip { flex: 0 0 auto; }
@media (max-width: 768px) {
    .hero-screen { min-height: 0; }
    .hero-screen .page-hero { min-height: 68vh; }
}

/* Variante "atouts" : titre + phrase descriptive dans le bandeau */
.stats-strip.features .stat-value {
    font-size: 1.15rem;
    line-height: 1.2;
}
.stat-desc {
    font-size: 0.74rem;
    color: var(--text-light);
    line-height: 1.45;
    margin: 0.55rem auto 0;
    max-width: 26ch;
}

/* Variante "badges" : icônes rondes plus grosses, façon Hébergement */
.stats-strip.badges .stat-icon {
    width: 62px; height: 62px;
    border-radius: 50%;
    background: var(--patine-soft);
    margin: 0 auto 1rem;
}
.stats-strip.badges .stat-icon svg { width: 30px; height: 30px; }
.stats-strip.badges .stat-value {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.3rem;
    font-weight: 500;
}
.stats-strip.badges .stat-desc { font-size: 0.76rem; max-width: 24ch; }
.stats-strip.badges .stat-item { border-right: none; }

/* Hero plein écran (mariages) */
.page-hero--full { min-height: 100vh; min-height: 100svh; }

/* Bloc intro 2 colonnes — disposition façon Maison Les Buis */
.lead-intro {
    max-width: 1400px;
    margin: 0 auto;
    padding: 7rem 5% 5.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
}
.lead-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: clamp(1.9rem, 3.6vw, 2.9rem);
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--dark);
    margin: 0;
}
.lead-title .accent { color: var(--patine); }
.lead-italic {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    color: var(--patine);
    margin-top: 1rem;
    letter-spacing: 0.04em;
}
.lead-text {
    font-size: 0.98rem;
    line-height: 1.9;
    color: var(--text);
    margin: 0;
}
.lead-hl { color: var(--patine); font-weight: 500; }
@media (max-width: 860px) {
    .lead-intro { grid-template-columns: 1fr; gap: 1.4rem; padding: 4rem 6% 3rem; }
}

/* Tablette : 3 colonnes */
@media (max-width: 1024px) {
    .stat-item { flex: 1 1 33.33%; min-width: 33.33%; padding: 2.1rem 0.9rem; }
    .stat-item:nth-child(3n) { border-right: none; }
    .stat-item:nth-child(n+4) { border-top: 1px solid var(--line); }
}
/* Mobile : 2 colonnes */
@media (max-width: 600px) {
    .stat-item { flex: 1 1 50%; min-width: 50%; padding: 1.6rem 0.6rem; }
    .stat-item:nth-child(3n) { border-right: 1px solid var(--line); }
    .stat-item:nth-child(odd) { border-right: 1px solid var(--line); }
    .stat-item:nth-child(even) { border-right: none; }
    .stat-item:nth-child(n+3) { border-top: 1px solid var(--line); }
    .stat-value { font-size: 1.3rem; }
    .stat-label { font-size: 0.56rem; letter-spacing: 0.1em; }
}

/* ===================================================================
   CARTES "TROIS FORMULES" — 3 cases horizontales avec icône
   =================================================================== */
.event-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 1100px;
    margin: 3.5rem auto 0;
}
.event-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-decoration: none;
    background: var(--cream-warm);
    border: 1px solid var(--line);
    border-radius: 0.4rem;
    padding: 2.4rem 2rem;
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.event-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 36px rgba(44,42,37,0.10);
    border-color: var(--patine);
}
.event-card-num {
    position: absolute;
    top: 1.4rem; right: 1.6rem;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 0.95rem;
    color: var(--patine);
    opacity: 0.7;
}
.event-card-icon {
    color: var(--patine);
    margin-bottom: 1.3rem;
    height: 38px;
    display: flex;
    align-items: center;
}
.event-card-icon svg {
    width: 38px; height: 38px;
    stroke: var(--patine); fill: none;
    stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
}
.event-card-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 1.7rem;
    line-height: 1.1;
    color: var(--dark);
    margin: 0 0 0.6rem;
}
.event-card-desc {
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-light);
    margin: 0 0 1.6rem;
    flex-grow: 1;
}
.event-card-cta {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.66rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--patine);
    border-bottom: 1px solid var(--patine);
    padding-bottom: 0.35rem;
    transition: color 0.3s, border-color 0.3s;
}
.event-card:hover .event-card-cta {
    color: var(--dark);
    border-color: var(--dark);
}

/* Tablette : 3 colonnes plus serrées */
@media (max-width: 1024px) {
    .event-cards { gap: 1rem; }
    .event-card { padding: 2rem 1.4rem; }
    .event-card-title { font-size: 1.45rem; }
}
/* Mobile : empilement vertical */
@media (max-width: 720px) {
    .event-cards { grid-template-columns: 1fr; max-width: 460px; gap: 1.1rem; }
    .event-card { padding: 2rem 1.6rem; }
}

/* ===================================================================
   BANDE PHOTO PLEINE LARGEUR — respiration visuelle entre les sections
   =================================================================== */
.photo-band {
    width: 100%;
    height: 58vh;
    min-height: 360px;
    max-height: 620px;
    overflow: hidden;
}
.photo-band img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 8s ease;
}
.photo-band:hover img { transform: scale(1.04); }
@media (max-width: 600px) {
    .photo-band { height: 42vh; min-height: 240px; }
}

/* ===================================================================
   SECTION TEXTE + IMAGE CÔTE À CÔTE (alternance gauche/droite)
   =================================================================== */
.media-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    max-width: 1300px;
    margin: 0 auto;
}
.media-row-img {
    overflow: hidden;
    border-radius: 0.4rem;
    aspect-ratio: 4 / 3;
}
.media-row-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.4s ease;
}
.media-row:hover .media-row-img img { transform: scale(1.05); }
.media-row-text .eyebrow,
.media-row-text .h-title,
.media-row-text .body-text {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
}
.media-row.reverse .media-row-img { order: 2; }
@media (max-width: 860px) {
    .media-row { grid-template-columns: 1fr; gap: 1.8rem; max-width: 560px; }
    .media-row.reverse .media-row-img { order: 0; }
}

/* ===================================================================
   TUILES-PHOTO — cartes visuelles façon Maison les Buis (image + titre)
   =================================================================== */
.tile-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.8rem;
    max-width: 1300px;
    margin: 3rem auto 0;
}
.tile {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 0.4rem;
    text-decoration: none;
}
.tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.1s ease;
}
.tile:hover img { transform: scale(1.06); }
.tile::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.15) 55%, transparent 100%);
}
.tile-label {
    position: absolute;
    bottom: 1.2rem;
    left: 1.3rem;
    right: 1.3rem;
    z-index: 2;
    color: #fff;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.35rem;
    line-height: 1.15;
    letter-spacing: 0.01em;
}
@media (max-width: 860px) {
    .tile-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
}
@media (max-width: 460px) {
    .tile-grid { grid-template-columns: 1fr; max-width: 420px; }
    .tile { aspect-ratio: 16 / 10; }
}

/* ===================================================================
   CARTES À ICÔNE — atouts du lieu (icône + titre + courte phrase)
   =================================================================== */
.icon-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
    max-width: 1200px;
    margin: 3rem auto 0;
}
.icon-card {
    border: 1px solid var(--line);
    border-radius: 0.4rem;
    padding: 2rem 1.8rem;
    background: var(--cream-warm);
    transition: border-color 0.35s ease, transform 0.35s ease;
}
.icon-card:hover { border-color: var(--patine); transform: translateY(-3px); }
.icon-card-icon {
    color: var(--patine);
    height: 34px;
    margin-bottom: 1.1rem;
    display: flex;
    align-items: center;
}
.icon-card-icon svg {
    width: 32px; height: 32px;
    stroke: var(--patine); fill: none;
    stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
}
.icon-card h4 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 1.4rem;
    color: var(--dark);
    margin-bottom: 0.5rem;
}
.icon-card p {
    font-size: 0.85rem;
    color: var(--text-light);
    line-height: 1.5;
}
@media (max-width: 860px) { .icon-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .icon-grid { grid-template-columns: 1fr; max-width: 440px; } }

/* ===================================================================
   CARROUSEL DE FORMATS — défilement horizontal (scroll-snap, sans JS)
   =================================================================== */
.formule-carousel {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 5%;
    padding: 0.5rem 5% 1.5rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--stone-warm) transparent;
}
.formule-carousel::-webkit-scrollbar { height: 6px; }
.formule-carousel::-webkit-scrollbar-thumb { background: var(--stone-warm); border-radius: 3px; }
.formule-carousel .formule {
    flex: 0 0 64%;
    scroll-snap-align: center;
    margin: 0;
    padding: 2.5rem;
    background: var(--cream-warm);
    border: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    border-radius: 0.5rem;
    max-width: none;
}
.formule-carousel .formule-head { margin-bottom: 1.5rem; }
@media (max-width: 1024px) {
    .formule-carousel .formule { flex: 0 0 82%; padding: 2rem; }
}
@media (max-width: 600px) {
    .formule-carousel { gap: 1rem; }
    .formule-carousel .formule { flex: 0 0 88%; padding: 1.6rem; }
}

/* ===================================================================
   OFFER CAROUSEL — cartes image-haut / contenu-bas + flèches de nav
   (design inspiré d'un composant, adapté au style Maisonseule)
   =================================================================== */
.offer-carousel-wrap { position: relative; }
.offer-carousel {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.75rem;
    padding: 0.5rem 5% 1rem;
}

.offer-card {
    position: relative;
    flex: 0 0 360px;
    height: 480px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 0.6rem;
    border: 1px solid var(--line);
    background: var(--cream-warm);
    text-decoration: none;
    transition: transform 0.45s cubic-bezier(.22,1,.36,1), box-shadow 0.45s ease, border-color 0.45s ease;
}
.offer-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 44px rgba(44,42,37,0.16);
    border-color: var(--patine);
}
.offer-card-img { height: 50%; overflow: hidden; }
.offer-card-img img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.7s ease;
}
.offer-card:hover .offer-card-img img { transform: scale(1.08); }

.offer-card-body {
    height: 50%;
    padding: 1.5rem 1.6rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.offer-card-tag {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--patine);
    font-weight: 500;
    margin-bottom: 0.7rem;
}
.offer-card-tag svg { width: 13px; height: 13px; stroke: var(--patine); fill: none; stroke-width: 1.6; }
.offer-card-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 1.72rem;
    line-height: 1.1;
    color: var(--dark);
    margin-bottom: 0.55rem;
}
.offer-card-desc {
    font-size: 0.82rem;
    color: var(--text-light);
    line-height: 1.5;
}
.offer-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}
.offer-card-cta {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--dark);
}
.offer-card-arrow {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--stone);
    display: flex; align-items: center; justify-content: center;
    color: var(--dark);
    transition: transform 0.35s ease, background 0.35s ease, color 0.35s ease;
}
.offer-card-arrow svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.offer-card:hover .offer-card-arrow {
    transform: rotate(-45deg);
    background: var(--patine);
    color: #fff;
}

/* Flèches de navigation ‹ › */
.offer-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px; height: 46px;
    border-radius: 50%;
    background: rgba(255,255,255,0.72);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center;
    color: var(--dark);
    cursor: pointer;
    z-index: 5;
    opacity: 0;
    transition: opacity 0.3s ease, background 0.3s ease;
}
.offer-carousel-wrap:hover .offer-nav { opacity: 1; }
.offer-nav:hover { background: #fff; }
.offer-nav svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.offer-nav.prev { left: 1.5%; }
.offer-nav.next { right: 1.5%; }
@media (max-width: 1080px) {
    .offer-card { flex: 0 0 320px; height: 460px; }
}
@media (max-width: 600px) {
    .offer-card { flex: 1 1 100%; max-width: 360px; height: 460px; }
    .offer-nav { display: none; }
}

/* ===================================================================
   FOND SONORE — petit bouton en bas à droite. La musique tente de
   partir à l'arrivée, sinon au premier geste du visiteur (app.js).
   =================================================================== */
.audio-toggle {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 5500;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(139,114,64,0.32);
    /* Fixe et visible en permanence : le flou d'arrière-plan était recalculé
       à chaque frame pour un disque de 46 px déjà opaque. */
    background: var(--cream);
    color: var(--patine);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(44,42,37,0.16);
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.audio-toggle:hover { transform: scale(1.06); border-color: var(--patine); }
.audio-toggle:focus-visible { outline: 2px solid var(--patine); outline-offset: 3px; }
.audio-toggle[aria-pressed="true"] {
    background: var(--patine);
    border-color: var(--patine);
    color: #fff;
}
/* Trois barres : figées quand le son est coupé, animées quand il joue. */
.audio-bars { display: flex; align-items: flex-end; gap: 2.5px; height: 15px; }
.audio-bars i {
    display: block;
    width: 2.5px;
    height: 5px;
    border-radius: 1px;
    background: currentColor;
    transition: height 0.3s ease;
}
.audio-toggle[aria-pressed="true"] .audio-bars i {
    animation: audio-bar 0.9s ease-in-out infinite;
}
.audio-toggle[aria-pressed="true"] .audio-bars i:nth-child(2) { animation-delay: 0.18s; }
.audio-toggle[aria-pressed="true"] .audio-bars i:nth-child(3) { animation-delay: 0.36s; }
@keyframes audio-bar {
    0%, 100% { height: 4px; }
    50%      { height: 15px; }
}
/* Coupé : une barre oblique barre les traits, comme un haut-parleur muet. */
.audio-toggle::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 1.5px;
    background: currentColor;
    transform: rotate(-45deg);
    opacity: 1;
    transition: opacity 0.25s ease;
}
.audio-toggle[aria-pressed="true"]::after { opacity: 0; }

/* Au-dessus de la barre de navigation du bas sur téléphone et tablette. */
@media (max-width: 1100px) {
    .audio-toggle {
        right: 0.9rem;
        bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px) + 0.7rem);
        width: 42px;
        height: 42px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .audio-toggle, .audio-toggle .audio-bars i { transition: none; animation: none !important; }
}

/* ===================================================================
   APERÇU D'UNE FORMULE — s'ouvre au clic sur une carte « offer-card »,
   avant d'aller au formulaire : photo, points clés, puis « Nous contacter »
   =================================================================== */
.offer-modal {
    position: fixed;
    inset: 0;
    z-index: 6200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4vh 4vw;
    background: rgba(15,13,10,0.86);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    /* Masqué par l'opacité et non par display: none, sans quoi aucune
       transition ne peut se jouer à l'ouverture. */
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}
.offer-modal.open {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    transition: opacity 0.45s ease;
}
.offer-modal-panel {
    position: relative;
    width: 100%;
    max-width: 940px;
    max-height: 92vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--cream);
    border-radius: 0.4rem;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,0.45);
}
/* Photo volante : copie de la vignette qui s'agrandit jusqu'à sa place
   dans l'aperçu (et y retourne à la fermeture). */
.om-fly {
    position: fixed;
    z-index: 6300;
    object-fit: cover;
    pointer-events: none;
    border-radius: 0.4rem;
    will-change: left, top, width, height;
}
.om-media { position: relative; min-height: 0; background: var(--stone); }
.om-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.om-body {
    padding: 2.4rem 2.4rem 2rem;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.om-tag {
    display: flex; align-items: center; gap: 0.45rem;
    font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--patine); font-weight: 500; margin-bottom: 0.7rem;
}
.om-tag svg { width: 13px; height: 13px; flex-shrink: 0; stroke: var(--patine); fill: none; stroke-width: 1.6; }
.om-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 2rem;
    line-height: 1.1;
    color: var(--dark);
    margin-bottom: 0.7rem;
}
.om-desc { font-size: 0.88rem; color: var(--text-light); line-height: 1.6; }
.om-points { list-style: none; margin: 1.4rem 0 0; padding: 0; }
.om-points li {
    position: relative;
    padding: 0.55rem 0 0.55rem 1.5rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text);
    border-top: 1px solid var(--line-soft);
}
.om-points li:first-child { border-top: none; padding-top: 0.2rem; }
.om-points li::before {
    content: '';
    position: absolute;
    left: 0.1rem;
    top: 1.15rem;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--patine);
}
.om-points li:first-child::before { top: 0.8rem; }
.om-foot {
    margin-top: auto;
    padding-top: 1.6rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.om-cta {
    display: inline-flex; align-items: center; gap: 0.7rem;
    padding: 0.95rem 1.8rem;
    background: var(--patine);
    color: #fff;
    border: 1px solid var(--patine);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.3s ease, border-color 0.3s ease;
}
.om-cta:hover { background: var(--dark); border-color: var(--dark); }
.om-cta svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.om-secondary {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-light);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem 0;
    transition: color 0.25s ease;
}
.om-secondary:hover { color: var(--patine); }
.om-close {
    position: absolute;
    top: 0.9rem; right: 0.9rem;
    z-index: 3;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.9);
    color: var(--dark);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.25s ease;
}
.om-close:hover { background: #fff; }

/* Tablette : la photo passe au-dessus, le panneau reste une boîte centrée. */
@media (max-width: 860px) {
    .offer-modal-panel {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        max-width: 560px;
        max-height: 92vh;
    }
    .om-media { height: 30vh; max-height: 260px; }
    .om-body { padding: 1.7rem 1.6rem 1.5rem; }
    .om-title { font-size: 1.65rem; }
    .om-points { margin-top: 1.1rem; }
    .om-points li { font-size: 0.83rem; padding-left: 1.35rem; }
    .om-foot { padding-top: 1.3rem; }
}
/* Mobile : feuille qui monte du bas, bouton pleine largeur sous le pouce. */
@media (max-width: 600px) {
    .offer-modal { padding: 0; align-items: flex-end; }
    .offer-modal-panel {
        max-width: none;
        max-height: 94vh;
        border-radius: 0.4rem 0.4rem 0 0;
    }
    .om-media { height: 28vh; max-height: 230px; }
    .om-body { padding: 1.5rem 1.3rem 1.3rem; }
    .om-cta { flex: 1 1 auto; justify-content: center; padding: 0.9rem 1.2rem; }
}
@media (max-width: 420px) {
    .om-media { height: 24vh; }
    .om-title { font-size: 1.45rem; }
}
@media (prefers-reduced-motion: reduce) {
    .offer-modal, .offer-modal-panel { transition: none; }
}

/* ===================================================================
   LIGHTBOX CARROUSELS — ouvrir une photo en grand (façon Maison les Buis)
   =================================================================== */
.photo-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 6000;
    background: rgba(15,13,10,0.95);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 4vh 4vw;
}
.photo-lightbox.open { display: flex; }
/* Scène : photo + flèches + légende, au-dessus de la bande d'aperçu */
.pl-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.photo-lightbox .pl-stage > img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 0.3rem;
    box-shadow: 0 24px 70px rgba(0,0,0,0.55);
}
.photo-lightbox button {
    position: absolute;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.32);
    color: #fff;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}
.photo-lightbox button:hover { background: rgba(255,255,255,0.26); }
.photo-lightbox .pl-close { top: 1.8rem; right: 1.8rem; }
.photo-lightbox .pl-prev { left: 1.8rem; top: 50%; transform: translateY(-50%); }
.photo-lightbox .pl-next { right: 1.8rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 600px) {
    .photo-lightbox .pl-close { top: 1rem; right: 1rem; }
}

/* ===================================================================
   FLÈCHES DE NAVIGATION — style Maison Les Buis
   Cercle clair, chevron SVG parfaitement centré (partagé par les 3 lightboxes)
   =================================================================== */
.photo-lightbox .pl-prev,
.photo-lightbox .pl-next,
.lightbox-prev,
.lightbox-next,
.lesbuis-arrow {
    background: rgba(255,255,255,0.9);
    border: none;
    color: #15130a;
    box-shadow: 0 2px 14px rgba(0,0,0,0.34);
    padding: 0;
}
.photo-lightbox .pl-prev:hover,
.photo-lightbox .pl-next:hover,
.lightbox-prev:hover,
.lightbox-next:hover,
.lesbuis-arrow:hover {
    background: #fff;
    border: none;
}
/* ---- Téléphone : une seule barre de commandes en bas ----
   Les flèches étaient posées l'une sur l'autre avec la légende dans la
   visionneuse des carrousels (elles se calaient sur la scène, dont la
   légende occupe le bas), et décrochées de 200 px sous les vignettes dans
   celle de la galerie (elles se calaient sur l'écran). Les deux partagent
   désormais la même barre : flèche, bande de vignettes, flèche. */
@media (max-width: 1024px) {
    .lightbox,
    .photo-lightbox { padding-bottom: 6.2rem; }
    .lightbox-thumbs,
    .photo-lightbox .pl-thumbs {
        position: fixed;
        left: 72px;
        right: 72px;
        bottom: max(1rem, env(safe-area-inset-bottom, 0px));
        margin: 0;
        max-width: none;
        height: 46px;
        padding: 0;
    }
    .lightbox-prev,
    .lightbox-next,
    .photo-lightbox .pl-prev,
    .photo-lightbox .pl-next {
        position: fixed;
        top: auto;
        bottom: max(1rem, env(safe-area-inset-bottom, 0px));
        transform: none;
        width: 46px;
        height: 46px;
    }
    .lightbox-prev,
    .photo-lightbox .pl-prev { left: 14px; right: auto; }
    .lightbox-next,
    .photo-lightbox .pl-next { right: 14px; left: auto; }
}

.photo-lightbox .pl-prev svg,
.photo-lightbox .pl-next svg,
.lightbox-prev svg,
.lightbox-next svg,
.lesbuis-arrow svg {
    width: 20px;
    height: 20px;
    display: block;
}
@media (hover: hover) and (pointer: fine) {
    .photo-lightbox .pl-prev:hover,
    .lightbox-prev:hover,
    .lesbuis-arrow.prev:hover { transform: translateY(-50%) scale(1.08); }
    .photo-lightbox .pl-next:hover,
    .lightbox-next:hover,
    .lesbuis-arrow.next:hover { transform: translateY(-50%) scale(1.08); }
}

/* Détails de la chambre, affichés sous la photo */
.photo-lightbox .pl-caption {
    position: absolute;
    bottom: 2.2rem;
    left: 50%;
    transform: translateX(-50%);
    width: min(620px, 88vw);
    text-align: center;
    color: #fff;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease;
}
.photo-lightbox .pl-caption.show { opacity: 1; }
.photo-lightbox .pl-caption-title {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.7rem;
    line-height: 1.1;
    color: #fff;
}
.photo-lightbox .pl-caption-specs {
    display: block;
    margin-top: 0.55rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--stone-warm);
}
.photo-lightbox .pl-caption-desc {
    display: block;
    margin-top: 0.55rem;
    font-size: 0.86rem;
    line-height: 1.5;
    color: rgba(255,255,255,0.82);
}
.photo-lightbox .pl-caption-specs:empty,
.photo-lightbox .pl-caption-desc:empty { display: none; }
@media (max-width: 600px) {
    .photo-lightbox .pl-caption { bottom: 1rem; }
    .photo-lightbox .pl-caption-title { font-size: 1.35rem; }
    .photo-lightbox .pl-caption-desc { display: none; }
}

/* Main qui clique sur les photos de carrousel cliquables */
.univers-band.photos .univers-card { cursor: pointer; }

/* Ouverture en ZOOM de la lightbox photo : pendant que le clone de la
   vignette grandit, on masque l'image/boutons/légende. La vraie photo est
   ensuite révélée INSTANTANÉMENT (pile sous le clone, même image, même
   cadrage) — pas de fondu sur l'image, donc aucun « repop ». Seuls les
   boutons et la légende apparaissent en fondu. */
.photo-lightbox button,
.photo-lightbox .pl-caption,
.photo-lightbox .pl-thumbs { transition: opacity 240ms ease, background 0.2s ease; }
.photo-lightbox.pl-zooming .pl-stage > img { opacity: 0; }
.photo-lightbox.pl-zooming button,
.photo-lightbox.pl-zooming .pl-caption,
.photo-lightbox.pl-zooming .pl-thumbs { opacity: 0; }

/* ===================================================================
   BANDE D'APERÇU (vignettes) — partagée par toutes les lightboxes
   (.photo-lightbox, galerie .lightbox, modale Les Buis)
   =================================================================== */
.lb-thumbs {
    flex: 0 0 auto;
    display: flex;
    gap: 4px;
    margin: 0 auto;
    max-width: min(860px, 92vw);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 2px;
    height: 4.6rem;
}
.lb-thumbs::-webkit-scrollbar { display: none; }
.lb-thumb {
    flex: 0 0 auto;
    height: 100%;
    width: 2.4rem;
    border-radius: 0.35rem;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.45;
    border: 1px solid transparent;
    padding: 0;
    background: none;
    transition: width 0.4s cubic-bezier(0.22,1,0.36,1), opacity 0.3s ease, border-color 0.3s ease;
}
@media (hover: hover) { .lb-thumb:hover { opacity: 0.8; } }
.lb-thumb.active {
    opacity: 1;
    width: 7rem;
    border-color: rgba(255,255,255,0.7);
}
.lb-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
    box-shadow: none;
    max-width: none;
    max-height: none;
    pointer-events: none;
    user-select: none;
}
@media (max-width: 600px) {
    .lb-thumbs { height: 3.6rem; gap: 3px; }
    .lb-thumb { width: 1.9rem; }
    .lb-thumb.active { width: 5rem; }
}

/* ===================================================================
   CALENDRIER DE RÉSERVATION — façon Maison les Buis (palette Maisonseule)
   =================================================================== */
.cal-display { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-bottom: 1rem; }
.cal-box { background: var(--cream-warm); border: 1px solid var(--line); padding: 0.75rem 0.9rem; cursor: pointer; border-radius: 0.3rem; transition: border-color 0.3s, background 0.3s; }
.cal-box:hover { border-color: var(--patine-light); }
.cal-box.active { border-color: var(--patine); background: rgba(139,114,64,0.05); }
.cal-box-label { font-size: 0.56rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.3rem; }
.cal-box-value { font-size: 0.85rem; font-weight: 300; color: var(--dark); min-height: 1.3em; }
.cal-box-value.empty { color: var(--text-muted); }
.cal-drop { max-height: 0; overflow: hidden; background: #fff; border: 1px solid transparent; border-radius: 0.3rem; transition: max-height 0.4s cubic-bezier(0.16,1,0.3,1), border-color 0.35s, margin-bottom 0.35s, opacity 0.3s; margin-bottom: 0; opacity: 0; }
.cal-drop.open { max-height: 540px; border-color: var(--line); margin-bottom: 1rem; opacity: 1; box-shadow: 0 8px 30px rgba(44,42,37,0.08); }
.cal-months { display: grid; grid-template-columns: 1fr 1fr; }
.cal-mo { padding: 1rem 0.8rem; }
.cal-mo:first-child { border-right: 1px solid var(--line-soft); }
.cal-mo-header { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 0.7rem; }
.cal-mo-title { font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; min-width: 130px; text-align: center; color: var(--dark); font-weight: 500; }
.cal-nav { width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1.1rem; border-radius: 0.4rem; transition: background 0.15s, color 0.15s; }
.cal-nav:hover { background: var(--patine-soft); color: var(--patine); }
.cal-nav.hidden { visibility: hidden; }
.cal-wk { display: grid; grid-template-columns: repeat(7,1fr); text-align: center; }
.cal-wk-d { font-size: 0.56rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); padding: 0.35rem 0; }
.cal-grid { display: grid; grid-template-columns: repeat(7,1fr); text-align: center; }
/* les jours sont des <button> : on neutralise le rendu natif */
.cal-grid .cal-d { width: 100%; text-align: center; font-family: inherit; }
.cal-d[disabled] { cursor: default; }
.cal-d { padding: 0.15rem 0; font-size: 0.8rem; font-weight: 300; color: var(--text); cursor: pointer; position: relative; z-index: 1; }
.cal-d span { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: 0.5rem; border: 1px solid transparent; transition: color 0.15s, background-color 0.15s, border-color 0.15s; }
.cal-d:hover span { background: var(--patine-soft); color: var(--dark); }
.cal-d.off { color: var(--text-muted); opacity: 0.3; pointer-events: none; text-decoration: line-through; }
.cal-d.nil { pointer-events: none; }
.cal-d.today span::after { content: ''; position: absolute; bottom: 2px; left: 50%; width: 3px; height: 3px; border-radius: 50%; background: var(--patine); transform: translateX(-50%); }
.cal-d.sel span { background: var(--patine); color: #fff; border-color: var(--patine); }
.cal-d.sel:hover span { background: var(--dark); }
.cal-d.sel.today span::after { background: #fff; }
.cal-d.rng { background: var(--patine-soft); }
.cal-d.rs { background: linear-gradient(to right, transparent 50%, var(--patine-soft) 50%); }
.cal-d.re { background: linear-gradient(to left, transparent 50%, var(--patine-soft) 50%); }
.cal-d.rs.re { background: transparent; }
.cal-d.preview.rng { background: rgba(139,114,64,0.07); }
.cal-d.preview.sel span { background: rgba(139,114,64,0.22); color: var(--dark); border-color: var(--patine-light); }
.cal-d.preview.re { background: linear-gradient(to left, transparent 50%, rgba(139,114,64,0.07) 50%); }
.cal-clear-btn { display: inline-block; font-family: 'Montserrat', sans-serif; font-size: 0.62rem; letter-spacing: 0.1em; color: var(--text-muted); background: none; border: none; cursor: pointer; padding: 0.7rem 0.9rem; transition: color 0.2s; }
.cal-clear-btn:hover { color: var(--patine); }

/* Les jours du calendrier sont des <button> : leur « min-width: auto »
   implicite empêchait la grille de se réduire et poussait tout le
   formulaire hors de l'écran sur mobile et sur tablette. On autorise
   la réduction, et la pastille du jour suit la largeur disponible. */
.cal-display, .cal-drop, .cal-months, .cal-mo, .cal-grid, .cal-d, .cal-box { min-width: 0; }
.cal-d span { width: min(2.1rem, 100%); }
.cal-mo-title { min-width: 0; flex: 1 1 auto; }

/* Deux mois côte à côte demandent ~1080px de fenêtre pour rester
   lisibles : en dessous, on empile les mois l'un sous l'autre. */
@media (max-width: 1080px) {
    .cal-months { grid-template-columns: 1fr; }
    .cal-mo:first-child { border-right: none; border-bottom: 1px solid var(--line-soft); }
    .cal-drop.open { max-height: 1000px; }
}

/* ===================================================================
   CONTACT — version compacte (tient sur un écran, desktop + tablette)
   =================================================================== */
.contact-page { padding: 6rem 5% 2.5rem; }
.contact-head { margin: 0 auto 1.6rem; }
.contact-head .h-title { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.contact-head .divider { margin-top: 0.9rem; margin-bottom: 0.9rem; }
.contact-head .body-text { font-size: 0.88rem; line-height: 1.5; }
.contact-grid { gap: 2.5rem; align-items: start; }
.contact-form { gap: 0.75rem 1.2rem; }
.contact-form label { font-size: 0.58rem; letter-spacing: 0.16em; margin-bottom: 0.28rem; }
.contact-form input,
.contact-form select,
.contact-form textarea { padding: 0.58rem 0.8rem; font-size: 0.88rem; }
.contact-form textarea { min-height: 64px; }
.contact-form > button[type="submit"] { padding: 0.85rem 2.4rem; margin-top: 0.1rem; font-size: 0.68rem; }
.contact-form .rgpd { font-size: 0.78rem; }
.contact-coords { padding: 1.4rem 1.5rem; }
.contact-coords h3 { font-size: 1.2rem; margin-bottom: 0.6rem; }
.contact-coords p { line-height: 1.5; font-size: 0.85rem; }
.contact-coords li { padding: 0.22rem 0; font-size: 0.8rem; }
.contact-coords + .contact-coords { margin-top: 1rem; }
.cal-display { margin-bottom: 0.6rem; }
.cal-box { padding: 0.55rem 0.8rem; }
/* Tablette : on garde 2 colonnes pour rester compact */
@media (min-width: 721px) and (max-width: 900px) {
    .contact-grid { grid-template-columns: 1.25fr 1fr; gap: 2rem; }
}

/* ===================================================================
   OFFER CARDS — variante 4 colonnes (4 cartes alignées sur une ligne)
   =================================================================== */
.offer-carousel.four {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 1.1rem;
    max-width: 1440px;
    margin: 0 auto;
    align-items: stretch;
}
.offer-carousel.four .offer-card {
    flex: 1 1 0;
    min-width: 0;
    height: auto;
}
.offer-carousel.four .offer-card-img { height: 190px; flex-shrink: 0; }
.offer-carousel.four .offer-card-body { height: auto; flex: 1; }
.offer-carousel.four .offer-card-title { font-size: 1.4rem; }
.offer-carousel.four .offer-card-desc { font-size: 0.78rem; }
/* Tablette : 2 par ligne */
@media (max-width: 980px) {
    .offer-carousel.four { flex-wrap: wrap; }
    .offer-carousel.four .offer-card { flex: 1 1 42%; min-width: 240px; }
}
/* Mobile : 1 par ligne */
@media (max-width: 560px) {
    .offer-carousel.four .offer-card { flex: 1 1 100%; max-width: 360px; }
}

/* ===================================================================
   GALERIE ANIMÉE 3D AU SCROLL (le château en grand)
   =================================================================== */
.sg-intro {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
    padding: 9rem 5% 1rem;
}
.sg-intro .h-title { margin: 0.4rem 0 0.9rem; }
.sg-stagger-item {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(12px);
    transition: opacity 0.8s ease, filter 0.8s ease, transform 0.8s cubic-bezier(0.22,1,0.36,1);
}
.sg-stagger-item.in { opacity: 1; filter: blur(0); transform: none; }

.scroll-gallery {
    position: relative;
    min-height: 340vh;
}
.scroll-gallery-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1300px;
    perspective-origin: 50% 50%;
}
.scroll-gallery-grid {
    width: 92%;
    max-width: 1500px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
    gap: 0.5rem;
    transform-style: preserve-3d;
    will-change: transform;
    transform: rotateX(45deg);
}
.scroll-gallery-col {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}
.scroll-gallery-col img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    object-fit: cover;
    border-radius: 0.375rem;
    box-shadow: 0 6px 18px rgba(44,42,37,0.18);
    background: var(--stone-light);
}
@media (max-width: 800px) {
    .scroll-gallery { min-height: 240vh; }
    .scroll-gallery-grid { gap: 0.5rem; width: 95%; }
    .scroll-gallery-col { gap: 0.5rem; }
    .sg-intro { padding-top: 7rem; }
}
@media (prefers-reduced-motion: reduce) {
    .scroll-gallery { min-height: 0; }
    .scroll-gallery-sticky { position: static; height: auto; padding: 2rem 0; }
    .scroll-gallery-grid { transform: none !important; }
    .scroll-gallery-col { transform: none !important; }
    .scroll-gallery-col.col2 { margin-top: 0; }
}

/* ============================================================
   TRANSITION ZOOM — carte "univers" de l'accueil → hero de la page
   Au clic, la photo de la carte grandit exactement jusqu'à couvrir
   l'écran (cadrage du hero). Quand la photo de la carte EST celle
   du hero (ex. séminaires), la bascule est sans couture : la même
   image reste à l'écran, seul l'habillage (voile, bandeau, nav)
   apparaît en fondu. Sinon, fondu de page complet en repli.
   ============================================================ */
.zoom-clone {
    position: fixed;
    z-index: 9999;
    overflow: hidden;
    pointer-events: none;
    will-change: left, top, width, height;
}
.zoom-clone img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Masquage AVANT la 1re peinture (classe posée par le script du <head>) :
   à l'arrivée d'un zoom, la page n'affiche QUE la photo plein écran —
   exactement l'état final du clone — donc aucun saut. L'habillage est
   ensuite révélé en fondu par app.js. */
html.zoom-incoming .page-hero-overlay,
html.zoom-incoming .page-hero-band,
html.zoom-incoming .nav,
html.zoom-incoming .bottom-nav { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
    /* Cas "morph" : la photo est déjà posée, on révèle l'habillage */
    body.zoom-enter .page-hero-overlay,
    body.zoom-enter .page-hero-band,
    body.zoom-enter .nav,
    body.zoom-enter .bottom-nav { animation: zoomFurniture 640ms ease 60ms both; }
    /* Cas sans photo correspondante : fondu de page complet */
    body.zoom-enter-fade { animation: zoomPageFade 460ms ease both; }
}
@keyframes zoomFurniture {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes zoomPageFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ========== PIED DE PAGE — bloc contact ========== */
.footer-contact {
    margin-bottom: 1.9rem;
}
.footer-address {
    font-size: 0.72rem;
    line-height: 1.9;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.55);
}
.footer-mail {
    margin-top: 0.9rem;
}
.footer-mail .mail-link {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    color: var(--stone-warm);
    border-bottom: 1px solid rgba(194,174,143,0.35);
    padding-bottom: 2px;
    transition: color 0.3s, border-color 0.3s;
}
.footer-mail .mail-link:hover {
    color: #fff;
    border-color: rgba(255,255,255,0.6);
}

/* ========== PAGES LÉGALES ========== */
.legal-page {
    max-width: 860px;
    margin: 0 auto;
    padding: 11rem 5% 7rem;
}
.legal-head {
    padding-bottom: 2.6rem;
    margin-bottom: 3.2rem;
    border-bottom: 1px solid var(--line-soft);
}
.legal-head .h-title { margin-top: 0.6rem; }
.legal-intro {
    margin-top: 1.6rem;
    font-size: 1.02rem;
    font-weight: 300;
    line-height: 1.8;
    color: var(--text-light);
    max-width: 60ch;
}
.legal-body h2 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: 1.65rem;
    color: var(--dark);
    margin: 3.2rem 0 1rem;
    letter-spacing: 0.01em;
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body p {
    font-size: 0.92rem;
    font-weight: 300;
    line-height: 1.85;
    color: var(--text);
    margin-bottom: 1.1rem;
    max-width: 68ch;
}
.legal-body a { color: var(--patine); border-bottom: 1px solid rgba(139,114,64,0.3); }
.legal-body a:hover { border-bottom-color: var(--patine); }
.legal-body ul {
    list-style: none;
    margin: 0 0 1.6rem;
    padding: 0;
    max-width: 68ch;
}
.legal-body li {
    font-size: 0.9rem;
    font-weight: 300;
    line-height: 1.75;
    color: var(--text);
    padding: 0.85rem 0 0.85rem 0;
    border-bottom: 1px solid var(--line-soft);
}
.legal-body li strong {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 0.66rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--patine);
    margin-bottom: 0.3rem;
}
/* Marqueur des informations qui restent à fournir par le château */
.legal-todo {
    display: inline-block;
    background: rgba(184, 92, 40, 0.09);
    border-bottom: 1px dashed rgba(184, 92, 40, 0.55);
    color: #8a4a1c;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.74rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    padding: 0.1rem 0.4rem;
    border-radius: 2px;
}
.legal-todo::before { content: '⚑ '; opacity: 0.7; }
.legal-warning {
    background: var(--cream-warm);
    border-left: 3px solid var(--patine);
    padding: 1.3rem 1.6rem;
    margin-bottom: 3rem;
    font-size: 0.88rem;
    font-weight: 300;
    line-height: 1.75;
    color: var(--text);
}
.legal-warning strong {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--patine);
    display: block;
    margin-bottom: 0.5rem;
}
@media (max-width: 900px) {
    .legal-page { padding: 8rem 6% 5rem; }
}
@media (max-width: 1100px) {
    .legal-page { padding-bottom: 7rem; }
}

/* ========== PAGE CONTACT — coordonnées ========== */
.contact-mail .mail-link {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.92rem;
    letter-spacing: 0.04em;
    color: var(--patine);
    border-bottom: 1px solid rgba(139,114,64,0.35);
    padding-bottom: 3px;
    transition: color 0.3s, border-color 0.3s;
    word-break: break-word;
}
.contact-mail .mail-link:hover { color: var(--dark); border-color: var(--dark); }
.map-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin-top: 0.9rem;
}
.map-links a {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-light);
    transition: color 0.3s;
}
.map-links a:hover { color: var(--patine); }
.map-fallback {
    padding: 1.2rem;
    font-size: 0.82rem;
    color: var(--text-light);
    font-style: italic;
}

/* Grille à quatre usages — la bande d'offres passe en grille pour que les
   quatre cartes tiennent sur une ligne, puis 2 × 2, puis une colonne. */
.offer-carousel--four {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
    max-width: 1480px;
    margin: 0 auto;
    justify-content: initial;
}
.offer-carousel--four .offer-card {
    flex: initial;
    width: auto;
    height: 470px;
}

/* Deux cartes seulement (page Mariages depuis le retour client) : à 360 px
   elles flottaient au milieu d'une bande très large. On les élargit pour
   qu'elles forment une paire assumée, et la photo respire davantage. */
.offer-carousel--duo { gap: 2.25rem; }
.offer-carousel--duo .offer-card {
    flex: 0 0 460px;
    height: 540px;
}
.offer-carousel--duo .offer-card-img { height: 56%; }
.offer-carousel--duo .offer-card-body { height: 44%; padding: 1.7rem 1.9rem; }
@media (max-width: 1000px) {
    .offer-carousel--duo .offer-card { flex: 0 0 min(420px, 46vw); height: 500px; }
}
@media (max-width: 720px) {
    .offer-carousel--duo .offer-card { flex: 1 1 100%; max-width: 420px; height: 470px; }
}
@media (max-width: 1240px) {
    .offer-carousel--four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 760px;
    }
    .offer-carousel--four .offer-card { height: 460px; }
}
@media (max-width: 600px) {
    .offer-carousel--four {
        grid-template-columns: minmax(0, 1fr);
        max-width: 370px;
    }
    .offer-carousel--four .offer-card { max-width: none; height: 450px; }
}

/* Quatre cartes côte à côte : les titres tiennent sur deux lignes,
   les pieds de carte restent alignés. */
.offer-carousel--four .offer-card-title { min-height: 2.4em; }
@media (max-width: 600px) {
    .offer-carousel--four .offer-card-title { min-height: 0; }
}

/* ========== MENTION « PROJECTION IA » ==========
   Un « i » cerclé dans le coin du visuel, toujours visible pour qu'on
   sache qu'il y a quelque chose à lire, mais assez sobre pour ne pas
   entamer la photo. La bulle se déplie vers l'intérieur du cadre : la
   plupart des conteneurs sont en overflow hidden, une bulle débordante
   serait tronquée. */
.ia-cadre { position: relative; }

.ia-tag {
    position: absolute;
    right: 0.7rem;
    bottom: 0.7rem;
    z-index: 5;
    width: 1.45rem;
    height: 1.45rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: help;
}
.ia-tag[hidden] { display: none; }

.ia-tag-i {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(24, 22, 18, 0.42);
    border: 1px solid rgba(245, 240, 232, 0.45);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    color: rgba(245, 240, 232, 0.92);
    /* le serif du site : un « i » à empattements, plus juste ici que la
       linéale du corps de texte */
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1;
    /* le point du « i » tire l'œil vers le haut : un cheveu vers le bas
       le recentre dans le cercle */
    padding-top: 0.08em;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.ia-tag:hover .ia-tag-i,
.ia-tag:focus-visible .ia-tag-i,
.ia-tag.open .ia-tag-i {
    background: rgba(24, 22, 18, 0.85);
    border-color: rgba(245, 240, 232, 0.9);
    color: var(--cream);
}
.ia-tag:focus { outline: none; }
.ia-tag:focus-visible .ia-tag-i {
    outline: 2px solid var(--cream);
    outline-offset: 2px;
}

.ia-tag-bulle {
    position: absolute;
    right: 0;
    bottom: calc(100% + 0.5rem);
    width: max-content;
    max-width: min(15rem, 78vw);
    padding: 0.6rem 0.75rem;
    border-radius: 0.3rem;
    background: rgba(24, 22, 18, 0.94);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--cream);
    font-size: 0.72rem;
    font-weight: 300;
    line-height: 1.45;
    text-align: left;
    letter-spacing: 0.01em;
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.25rem);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
    pointer-events: none;
}
.ia-tag:hover .ia-tag-bulle,
.ia-tag:focus-visible .ia-tag-bulle,
.ia-tag.open .ia-tag-bulle {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Vue plein écran : le picto se cale dans le coin haut gauche, en
   vis-à-vis du bouton de fermeture. Le bas de l'écran est pris par la
   légende et la bande d'aperçu. La bulle s'ouvre donc vers le bas. */
.ia-tag--plein-ecran {
    position: fixed;
    left: 1.4rem;
    top: 1.4rem;
    right: auto;
    bottom: auto;
    z-index: 10;
}
.ia-tag--plein-ecran .ia-tag-bulle {
    right: auto;
    left: 0;
    bottom: auto;
    top: calc(100% + 0.5rem);
    transform: translateY(-0.25rem);
}
.ia-tag--plein-ecran.open .ia-tag-bulle,
.ia-tag--plein-ecran:hover .ia-tag-bulle,
.ia-tag--plein-ecran:focus-visible .ia-tag-bulle { transform: translateY(0); }

/* Au doigt, le survol n'existe pas : seul l'appui ouvre la bulle, et la
   cible tactile passe à 44 px sans grossir le picto lui-même. */
@media (hover: none) {
    .ia-tag {
        width: 3rem;
        height: 3rem;
        right: 0;
        bottom: 0;
    }
    .ia-tag-i { width: 1.45rem; height: 1.45rem; }
    .ia-tag-bulle { bottom: calc(50% + 1.1rem); right: 0.65rem; }
    .ia-tag--plein-ecran .ia-tag-bulle { right: auto; left: 0.65rem; bottom: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .ia-tag-i, .ia-tag-bulle { transition: none; }
}

/* ========== MENTION TARIFAIRE ==========
   Le montant est affiché, mais il n'est pas une accroche : pas d'encadré,
   pas de gros chiffre, pas de « à partir de ». Une phrase en serif, à la
   taille d'un texte courant, isolée par un filet fin en bas de page. Assez
   présente pour situer le budget avant la prise de contact, assez sobre
   pour ne pas faire catalogue. */
.tarif-mention {
    max-width: 44rem;
    margin: 0 auto;
    padding: 3.5rem 1.5rem 4rem;
    text-align: center;
}
.tarif-mention::before {
    content: "";
    display: block;
    width: 2.75rem;
    height: 1px;
    margin: 0 auto 2.25rem;
    background: var(--stone-warm);
}
.tarif-mention p {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.35rem;
    font-weight: 300;
    line-height: 1.65;
    letter-spacing: 0.01em;
    color: var(--text-light);
}
/* « 16 500 € » ne doit jamais se couper en fin de ligne */
.tarif-montant {
    color: var(--patine);
    white-space: nowrap;
}
@media (max-width: 600px) {
    .tarif-mention { padding: 2.75rem 1.25rem 3rem; }
    .tarif-mention p { font-size: 1.2rem; }
}

/* Pendant son repli, la visionneuse reste à l'écran le temps de l'animation.
   Elle ne doit plus intercepter les clics : sinon le visiteur qui rouvre une
   photo juste après avoir fermé voit son clic avalé par le voile, et croit
   l'interface bloquée. */
.lightbox.closing { pointer-events: none; }

/* Ce que comprend la formule, au-dessus du montant. Même registre que la
   ligne tarifaire, en un cran plus discret : c'est une précision, pas une
   annonce. Le lien porte la couleur patine et un filet fin, assez présent
   pour se voir sans rompre la ligne. */
.tarif-inclus {
    margin-bottom: 1.1rem;
    font-size: 1.15rem !important;
    color: var(--text-light);
}
.tarif-inclus a {
    color: var(--patine);
    border-bottom: 1px solid rgba(139, 114, 64, 0.35);
    padding-bottom: 1px;
    white-space: nowrap;
    transition: border-color 0.25s ease, color 0.25s ease;
}
.tarif-inclus a:hover,
.tarif-inclus a:focus-visible {
    color: var(--dark);
    border-bottom-color: var(--dark);
}
@media (max-width: 600px) {
    .tarif-inclus { font-size: 1.05rem !important; }
    .tarif-inclus a { white-space: normal; }
}

/* ========== RÉCITS DE LA PAGE HISTOIRE ==========
   Quatre textes plus longs que le reste du site : ils sont là pour être lus.
   D'où une colonne étroite, un interligne généreux et une date en exergue
   qui sert de repère dans la frise du temps. */
.recits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3.5rem 4rem;
    max-width: 1080px;
    margin: 4rem auto 0;
}
/* Un filet court sous le titre, comme ailleurs sur le site. */

@media (max-width: 900px) {
    .recits { grid-template-columns: minmax(0, 1fr); gap: 3rem; max-width: 34rem; }
}

/* ========== FRISE — TROIS ÂGES DU CHÂTEAU ==========
   L'ancienne version écrasait les photos en bandeaux de 6/1 et empilait des
   listes sur un fond noir de deux mille pixels. Ici chaque époque occupe la
   largeur entière, sa photo à hauteur d'homme, le siècle posé en grand comme
   un numéro de chapitre. Un filet doré court d'un âge à l'autre : c'est le
   fil du temps, et il ne s'interrompt qu'à la dernière date. */

/* Un chapitre sur deux inverse photo et texte : la lecture avance en zigzag
   au lieu de dérouler la même colonne trois fois. */

/* La photo se fond dans le fond sombre du côté du texte, pour éviter
   l'arête nette entre image et page. */

/* Le millésime : posé grand, en filigrane, il tient lieu de numéro de chapitre. */

/* Les faits : le fil du temps passe à gauche, chaque date y est accrochée. */
/* Le point sur le fil, en face de chaque date. */

@media (max-width: 1024px) {
    /* En colonne, la photo repasse toujours au-dessus du texte. */
    .frise-photo::after,
}

/* ═══════════════════════════════════════════════════════════════════
   PAGE HISTOIRE — « l'archive est en pierre »
   Le château n'a ni parchemin ni vitrine : ses pièces d'archive sont
   scellées dans le bâtiment. La page fait donc relever l'histoire au
   visiteur plutôt que la lui réciter. Aucune couleur ni police
   nouvelle : tout vient des variables et des deux familles du site.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 01 · Ouverture : on pose la thèse, puis on se tait ───────────── */
.hist-ouverture { padding: 7rem 0 0; }
.hist-ouverture-texte {
    max-width: 46rem;
    margin: 0 auto;
    padding: 0 5%;
    text-align: center;
}
.hist-accroche {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(1.9rem, 4.4vw, 3.4rem);
    line-height: 1.22;
    color: var(--dark);
    letter-spacing: -0.01em;
}
.hist-accroche em { font-style: italic; color: var(--patine); }
.hist-chapo {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.9;
    color: var(--text-light);
    max-width: 34rem;
    margin: 2.25rem auto 0;
}
/* L'image d'ouverture prend toute la largeur : c'est la respiration
   qui suit la thèse. */
.hist-plein { margin: 5rem 0 0; }
.hist-plein img { width: 100%; height: clamp(320px, 62vh, 620px); object-fit: cover; }
.hist-plein figcaption {
    max-width: 1300px;
    margin: 1rem auto 0;
    padding: 0 5%;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ── 02 · Le nom : deux hypothèses mises à égalité ────────────────── */
.hist-nom { padding: 7rem 5%; max-width: 1300px; margin: 0 auto; }
.hist-nom-intro { text-align: center; max-width: 40rem; margin: 0 auto 4rem; }
.hist-diptyque {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4.5rem;
    max-width: 60rem;
    margin: 0 auto;
}
/* Un filet unique entre les deux colonnes : elles se répondent. */
.hist-hypothese { position: relative; }
.hist-hypothese + .hist-hypothese::before {
    content: "";
    position: absolute;
    left: -2.25rem;
    top: 0.4rem;
    bottom: 0.4rem;
    width: 1px;
    background: var(--line);
}
.hist-hypothese-num {
    display: block;
    font-size: 0.62rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--patine);
    margin-bottom: 1.1rem;
}
.hist-hypothese h3 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: clamp(1.35rem, 2.2vw, 1.7rem);
    line-height: 1.25;
    color: var(--dark);
    margin-bottom: 1rem;
}
.hist-hypothese p {
    font-size: 0.95rem;
    font-weight: 300;
    line-height: 1.85;
    color: var(--text-light);
}
.hist-hypothese em { font-style: italic; color: var(--text); }
.hist-nom-chute {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: clamp(1.05rem, 1.8vw, 1.3rem);
    color: var(--patine);
    text-align: center;
    margin-top: 4rem;
}

@media (max-width: 900px) {
    .hist-ouverture { padding-top: 4.5rem; }
    .hist-plein { margin-top: 3.5rem; }
    .hist-nom { padding: 4.5rem 1.5rem; }
    .hist-diptyque { grid-template-columns: minmax(0, 1fr); gap: 3rem; max-width: 34rem; }
    .hist-hypothese + .hist-hypothese::before {
        left: 0; right: 0; top: -1.5rem; bottom: auto; width: auto; height: 1px;
    }
    .hist-nom-chute { margin-top: 3rem; }
}

/* ── 03 · Le relevé : le repère accompagne, il ne dirige pas ──────── */
.hist-releve { background: var(--cream-warm); padding: 7rem 0; }
.hist-releve-entete {
    max-width: 44rem;
    margin: 0 auto 5rem;
    padding: 0 5%;
    text-align: center;
}
.hist-releve-corps {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5%;
}

/* La frise : quatre entrées, une seule composition, un filet continu.
   Les photos et les mises en page alternées ont été retirées — elles
   redisaient ce que « Les récits » raconte plus bas, et la section
   n'a plus qu'un rôle : porter les dates et les mesures. */
.hist-frise {
    list-style: none;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0;
}
.hist-moment {
    display: grid;
    /* 13rem : la largeur qu'il faut pour que « XIIIe au XVe siècle »
       tienne sur une ligne sous le millésime. */
    grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
}
/* Le millésime est calé à droite, contre le filet : c'est lui qui fait
   la colonne de lecture. */
.hist-moment-tete {
    text-align: right;
    padding: 0 2.5rem 0 0;
}
.hist-siecle {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.1rem, 4vw, 3rem);
    font-weight: 300;
    line-height: 1;
    color: var(--patine);
}
/* La période s'écrit sous le chiffre, en petites capitales : elle
   précise sans venir se coller au grand caractère. */
.hist-periode {
    display: block;
    font-size: 0.68rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 0.65rem;
}
/* Cormorant Garamond ne possède pas le glyphe « ᵉ » : le navigateur
   allait le chercher dans une police de repli, d'où un exposant gras et
   mal calé. On compose donc l'ordinal en <sup>, dans la même fonte. */
.hist-periode sup,
.hist-moment-corps sup {
    font-size: 0.72em;
    vertical-align: super;
    line-height: 0;
    text-transform: none;
}
/* Le filet et l'espace inter-entrées portés par la colonne de texte :
   la ligne court ainsi sans rupture du premier moment au dernier. */
.hist-moment-texte {
    border-left: 1px solid var(--line);
    padding: 0 0 5.5rem 3rem;
}
.hist-moment:last-child .hist-moment-texte { padding-bottom: 0; }
.hist-moment-titre {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    color: var(--dark);
    margin: -0.35rem 0 1.4rem;
}
.hist-moment-corps p {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.9;
    color: var(--text-light);
    max-width: 38rem;
}
.hist-moment-corps p + p { margin-top: 1.1rem; }

/* Les chiffres : information secondaire, jamais un encadré. */
/* Trois colonnes égales : en flex, la troisième mention débordait sur
   deux lignes et cassait l'alignement du bas. */
.hist-chiffres {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.75rem;
    max-width: 38rem;
    margin: 2.25rem 0 0;
    padding: 1.5rem 0 0;
    border-top: 1px solid var(--line);
}
.hist-chiffre {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--dark);
    line-height: 1.1;
}
.hist-chiffre-quoi {
    display: block;
    font-size: 0.72rem;
    line-height: 1.5;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-top: 0.35rem;
}

@media (max-width: 1024px) {
    .hist-releve { padding: 4.5rem 0; }
    .hist-moment { grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); }
    .hist-moment-tete { padding-right: 1.75rem; }
    .hist-moment-texte { padding: 0 0 4.5rem 2rem; }
}

/* Sous 700px la colonne de gauche ne tient plus : le millésime repasse
   au-dessus du texte et le filet s'efface. */
@media (max-width: 700px) {
    .hist-moment { grid-template-columns: minmax(0, 1fr); }
    .hist-moment-tete { text-align: left; padding: 0 0 1.1rem; }
    .hist-siecle { font-size: 1.9rem; }
    .hist-periode { margin-top: 0.4rem; }
    .hist-moment-texte { border-left: 0; padding: 0 0 3.75rem; }
    .hist-moment-titre { margin-top: 0; }
    .hist-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
}

/* ── 04 · Les pièces : une salle d'archives faite de pierre ───────── */
.hist-murs { padding: 7rem 5%; max-width: 1400px; margin: 0 auto; }
.hist-murs-entete { max-width: 42rem; margin: 0 auto 4.5rem; text-align: center; }
.hist-murs-chapo {
    font-size: 0.98rem;
    font-weight: 300;
    line-height: 1.9;
    color: var(--text-light);
    margin-top: 1.5rem;
}
.hist-pieces {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4.5rem 3rem;
    align-items: start;
}
/* Décalages : les pièces ne s'alignent pas au cordeau. C'est ce qui
   les fait ressembler à des objets posés plutôt qu'à un catalogue. */
.hist-piece:nth-child(3n+2) { margin-top: 4.5rem; }
.hist-piece:nth-child(3n)   { margin-top: 2rem; }
.hist-piece-photo { overflow: hidden; margin-bottom: 1.5rem; }
.hist-piece-photo img {
    width: 100%;
    height: clamp(240px, 34vh, 340px);
    object-fit: cover;
    display: block;
    transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.hist-piece:hover .hist-piece-photo img { transform: scale(1.04); }
.hist-piece-date {
    display: block;
    font-size: 0.62rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--patine);
    margin-bottom: 0.7rem;
}
.hist-piece-texte h3 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: 1.4rem;
    color: var(--dark);
    margin-bottom: 0.75rem;
}
.hist-piece-texte p {
    font-size: 0.92rem;
    font-weight: 300;
    line-height: 1.8;
    color: var(--text-light);
}

/* ── 05 · Respiration : une phrase, du vide ───────────────────────── */
.hist-souffle {
    background: var(--dark);
    color: var(--cream);
    padding: clamp(6rem, 14vh, 10rem) 5%;
}
.hist-souffle blockquote { max-width: 46rem; margin: 0 auto; text-align: center; }
.hist-souffle p {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-style: italic;
    font-size: clamp(1.5rem, 3.2vw, 2.4rem);
    line-height: 1.4;
    color: var(--cream);
}
.hist-souffle cite {
    display: block;
    margin-top: 2rem;
    font-style: normal;
    font-size: 0.66rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--patine-light);
}

/* ── 06 · Les récits : le texte long, l'année en marge ────────────── */
.hist-recits { background: var(--stone-light); padding: 7rem 5%; }
.hist-recits-entete { max-width: 44rem; margin: 0 auto 4.5rem; text-align: center; }
.hist-recits-chapo {
    font-size: 0.98rem;
    font-weight: 300;
    line-height: 1.9;
    color: var(--text-light);
    margin-top: 1.5rem;
}
.hist-recits-liste { max-width: 62rem; margin: 0 auto; }
.hist-recit {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: 3rem;
    padding: 3.25rem 0;
    align-items: start;
}
.hist-recit + .hist-recit { border-top: 1px solid rgba(44, 42, 37, 0.09); }
.hist-recit-an {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2rem;
    font-weight: 300;
    color: var(--patine);
    line-height: 1;
    /* L'année reste au regard pendant qu'on lit le récit. */
    position: sticky;
    top: 8rem;
}
.hist-recit-corps h3 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: clamp(1.35rem, 2.4vw, 1.75rem);
    color: var(--dark);
    margin-bottom: 1.1rem;
}
.hist-recit-corps p {
    font-size: 0.96rem;
    font-weight: 300;
    line-height: 1.9;
    color: var(--text-light);
    max-width: 38rem;
}
.hist-recit-corps p + p { margin-top: 1rem; }
.hist-recit-corps em { font-style: italic; color: var(--text); }

@media (max-width: 900px) {
    .hist-murs { padding: 4.5rem 1.5rem; }
    .hist-pieces { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 1.75rem; }
    .hist-piece:nth-child(3n+2),
    .hist-piece:nth-child(3n) { margin-top: 0; }
    .hist-piece:nth-child(even) { margin-top: 2.5rem; }
    .hist-recits { padding: 4.5rem 1.5rem; }
    .hist-recit { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; padding: 2.5rem 0; }
    .hist-recit-an { position: static; font-size: 1.7rem; }
}
@media (max-width: 600px) {
    .hist-pieces { grid-template-columns: minmax(0, 1fr); gap: 2.75rem; max-width: 26rem; margin: 0 auto; }
    .hist-piece:nth-child(even) { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .hist-piece-photo img { transition: none; }
    .hist-piece:hover .hist-piece-photo img { transform: none; }
}

/* ── Icônes de la page Histoire ───────────────────────────────────
   Mêmes tracés que les cartouches du site : viewBox 24, traits fins,
   aucune surface pleine. Elles servent de point d'entrée à l'œil dans
   les zones denses en texte, pas de décoration. */
.hist-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.hist-ico svg {
    width: 21px;
    height: 21px;
    stroke: var(--patine);
    fill: none;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* Dans les pièces, l'icône précède le titre sur la même ligne. */
.hist-piece-texte h3 {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}
/* Dans les récits, elle se pose sous l'année, en marge. */
.hist-ico--recit { display: block; margin-top: 0.9rem; }
.hist-ico--recit svg { width: 26px; height: 26px; stroke-width: 1.3; }

@media (max-width: 900px) {
    /* En colonne unique, l'année et son icône se placent côte à côte. */
    .hist-recit-an { display: flex; align-items: center; gap: 0.8rem; }
    .hist-ico--recit { margin-top: 0; }
    .hist-ico--recit svg { width: 22px; height: 22px; }
}

/* ── Motifs de terroir ────────────────────────────────────────────
   Trois scènes dessinées au trait — une vigne, les crêtes des monts,
   un village perché — posées en fond des sections qui n'ont pas de
   photographie. Elles se tiennent volontairement à la limite du
   visible : le texte doit rester le sujet, le dessin ne fait que
   donner une matière à la page. */
.hist-terroir { position: relative; overflow: hidden; }
.hist-terroir > *:not(.hist-motif) { position: relative; z-index: 1; }

.hist-motif {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: min(1400px, 116%);
    pointer-events: none;
    user-select: none;
}
.hist-motif-svg {
    display: block;
    width: 100%;
    height: auto;
    fill: none;
    stroke: var(--dark);
    stroke-width: 1.15;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.085;
}
/* Chaque scène s'ancre là où elle a du sens : la vigne monte du bas,
   les crêtes tiennent l'horizon, le village se pose au sol. */
.hist-motif--vigne   { }
.hist-motif--monts   { }
.hist-motif--village { }

.hist-terroir:has(.hist-motif--vigne) .hist-motif   { bottom: -4%; }
.hist-terroir:has(.hist-motif--monts) .hist-motif   { bottom: -2%; }
.hist-terroir:has(.hist-motif--village) .hist-motif { bottom: -6%; }

/* Sur fond pierre le trait doit être un peu plus retenu, le contraste
   y étant naturellement plus fort. */
.section-stone .hist-motif-svg { opacity: 0.07; }

/* Les sections doivent respirer davantage : le dessin occupe le bas,
   le texte ne doit pas lui marcher dessus. */
.hist-terroir { padding-bottom: clamp(9rem, 22vh, 15rem); }

@media (max-width: 900px) {
    .hist-motif { width: 165%; }
    .hist-motif-svg { stroke-width: 1.4; opacity: 0.075; }
    .hist-terroir { padding-bottom: clamp(7rem, 26vh, 11rem); }
}
/* Repli pour les navigateurs sans :has() — le motif reste en bas. */
@supports not (selector(:has(*))) {
    .hist-motif { bottom: -5%; }
}

/* ========== PAGE 404 ==========
   Même ossature que les pages légales : barre pleine en haut, contenu centré
   dans la hauteur restante, pied de page en bas. */
.erreur-404 {
    min-height: calc(100vh - 230px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9rem 5% 5rem;
    background: var(--cream);
}
.erreur-404-inner {
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
}
.erreur-404 .body-text {
    margin: 0 auto;
    max-width: 480px;
}
.erreur-404-liens {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2.4rem;
}
.erreur-404-raccourcis {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.6rem 1.6rem;
    margin-top: 3rem;
    padding-top: 1.8rem;
    border-top: 1px solid var(--line-soft);
}
.erreur-404-raccourcis a {
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-light);
    transition: color 0.3s ease;
}
.erreur-404-raccourcis a:hover { color: var(--patine); }
@media (max-width: 700px) {
    .erreur-404 { padding: 7rem 6% 4rem; min-height: calc(100vh - 190px); }
    .erreur-404-raccourcis { margin-top: 2.2rem; }
}

/* Date de dernière mise à jour en bas des pages légales */
.legal-maj {
    margin-top: 2.5rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--line-soft);
    font-size: 0.78rem;
    color: var(--text-light);
    font-style: italic;
}


/* ===================================================================
   CAPITALES — Trend Sans One
   Tous les textes en majuscules (sur-titres, menus, boutons, étiquettes)
   passent dans la police de marque. Montserrat reste la police des
   paragraphes : Trend Sans One n'a pas de minuscules.
   Une seule graisse : on neutralise le gras simulé par le navigateur.
   =================================================================== */
:root { --font-capitales: 'Trend Sans One Menu', 'Montserrat', sans-serif; }   /* même finesse que les menus depuis le 06/10 */
.nav-links a,
.nav-dropdown-trigger,
.nav-dropdown a,
.nav-cta,
.nav-chateau,
.mobile-menu a.mobile-sub,
.mobile-menu .mobile-cta,
.hero-tag,
.hero-btn,
.scroll-indicator span,
.page-hero-tag,
.eyebrow,
.univers-link,
.bandeau-mh-eyebrow,
.apercu-cta,
.chiffre-label,
.contact-band .btn,
.footer-links a,
.formule-price span,
.formule-cta,
.encart-buis-tag,
.encart-buis-plus,
.terroir-hero-lien,
.acces-lieu,
.gallery-filter-legend,
.gallery-filter,
.gallery-more,
.gallery-overlay .gallery-badge,
.gallery-badge,
.contact-form label,
.contact-form > button[type="submit"],
.contact-coords li strong,
.flow-step-num,
.flow-step-tags span,
.bottom-nav-item,
.bottom-nav-sheet a,
.stat-label,
.event-card-cta,
.offer-card-tag,
.offer-card-cta,
.om-tag,
.om-cta,
.om-secondary,
.photo-lightbox .pl-caption-specs,
.cal-box-label,
.cal-wk-d,
.legal-body li strong,
.legal-warning strong,
.map-links a,
.hist-plein figcaption,
.hist-hypothese-num,
.hist-periode,
.hist-piece-date,
.hist-souffle cite,
.erreur-404-raccourcis a {
    font-family: var(--font-capitales);
    font-weight: 400;
    font-synthesis: none;
}

/* Barre du bas sur téléphone : Trend Sans One est plus large que
   Montserrat, les six libellés débordaient (« Réserver » coupé).
   Interlettrage et marges resserrés, corps ajusté à la largeur. */
@media (max-width: 480px) {
    .bottom-nav-item {
        padding-left: 2px;
        padding-right: 2px;
        flex: 1 1 auto;          /* chaque onglet prend la largeur de son libellé */
        letter-spacing: 0.05em;
        font-size: clamp(6.6px, 2.15vw, 7.5px);
    }
}

/* Menus : version la plus fine de Trend Sans One (voir fonts.css). */
:root { --font-menus: 'Trend Sans One Menu', 'Montserrat', sans-serif; }
.nav-links a,
.nav-dropdown-trigger,
.nav-dropdown a,
.nav-cta,
.nav-chateau,
.mobile-menu a.mobile-sub,
.mobile-menu .mobile-cta,
.bottom-nav-item,
.bottom-nav-sheet a {
    font-family: var(--font-menus);
}


/* Accueil · « Au domaine — Trois formules » sur téléphone : la section
   entière (titre + trois cartes) tient dans un seul écran, sans défiler.
   Hauteur des cartes = hauteur visible (svh : barres du navigateur
   déduites) moins le titre, les marges et la barre de navigation du bas. */
@media (max-width: 768px) {
    .section-formules { padding-top: 1.5rem !important; padding-bottom: 1.5rem; }
    .section-formules .formules-tete { margin-bottom: 1.4rem !important; }
    .section-formules .univers-band.gallery .univers-card {
        min-height: 0;
        height: clamp(120px, calc((100vh - 16.5rem - env(safe-area-inset-bottom, 0px)) / 3), 244px);
        height: clamp(120px, calc((100svh - 16.5rem - env(safe-area-inset-bottom, 0px)) / 3), 244px);
    }
}

/* Loupe ronde sur le plan du domaine (voir app.js) */
.plan-loupe {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(139, 114, 64, 0.35);
    background-color: var(--cream);
    background-repeat: no-repeat;
    pointer-events: none;
    opacity: 0;
    scale: 0.85;
    transition: opacity 0.2s ease, scale 0.2s ease;
    will-change: transform;
}
.plan-loupe.visible { opacity: 1; scale: 1; }
/* Avec la loupe, le plan ne grossit plus et le voile sombre n'apparaît pas :
   ils brouilleraient la lecture. Le clic ouvre toujours la visionneuse. */
.encart-plan-visuel.avec-loupe { cursor: none; }
.encart-plan-visuel.avec-loupe:hover img { transform: none; filter: none; }
.encart-plan-visuel.avec-loupe .gallery-overlay { display: none; }
@media (prefers-reduced-motion: reduce) {
    .plan-loupe { transition: none; }
}

/* ------------------------------------------------------------------
   Défilement glissant (Lenis)
   Reprend le réglage du site Le P'tit Studio. Ces règles sont celles que
   la bibliothèque attend : sans elles, la page se fige ou le défilement
   natif entre en conflit avec l'inertie.
   ------------------------------------------------------------------ */
html.lenis,
html.lenis body { height: auto; }
/* Le « scroll-behavior: smooth » du CSS se battrait avec l'inertie : il est
   neutralisé dès que Lenis est en place, et pas seulement pendant le glissé
   (la classe « lenis-smooth » n'existe que le temps de l'animation). */
html.lenis { scroll-behavior: auto !important; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
/* Zones qui gardent leur propre défilement : visionneuses, panneaux. */
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
/* Une iframe avale le geste et bloque l'inertie pendant le survol. */
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ========== SÉLECTEUR DE LANGUE ==========
   Deux emplacements, un seul mécanisme : un carré qui porte le code de la
   langue affichée, et qui déplie un panneau où l'on choisit. En version
   bureau il vit dans la barre du haut, à côté de « Les Buis » ; sous 1100 px
   la barre ne porte plus que le logo et défile avec la page, le carré
   devient donc une pastille fixe, dans le coin opposé au bouton de musique.

   Les deux reposent sur <details> : ils s'ouvrent et se referment sans
   JavaScript, au doigt comme au clavier. Le script n'ajoute que le confort
   (refermer en cliquant ailleurs ou avec Échap) et le rappel du voile
   d'entrée au changement de langue. */

.lang-boite { position: relative; }

/* --- le carré --- */
.lang-carre {
    /* Un vrai carré : la largeur et la hauteur sont la même longueur, écrite
       une seule fois. Elle reprend la somme qui fait la hauteur du bouton
       « Les Buis » — une ligne de texte, les deux paddings, les deux filets —
       pour que les deux boîtes s'alignent au pixel.
       « aspect-ratio » ne pouvait pas servir ici : sur un élément flex dont
       la largeur vient du contenu, le navigateur la fixe avant d'étirer la
       hauteur, et le rapport est ignoré. */
    --cote: calc(1.65em + 1.5rem + 2px);
    width: var(--cote);
    height: var(--cote);
    padding: 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /* <summary> affiche un triangle par défaut : on le retire côté standard
       comme côté WebKit. */
    list-style: none;
    /* L'interlettrage laisse un blanc après la dernière lettre : sans cette
       retouche, « FR » se décalerait d'un cheveu vers la gauche du carré. */
    text-indent: 0.14em;
}
.lang-carre::-webkit-details-marker { display: none; }
.lang-carre::marker { content: ''; }

/* --- le panneau de choix, commun aux deux emplacements --- */
.lang-panneau {
    position: absolute;
    top: calc(100% + 0.55rem);
    right: 0;
    z-index: 10;
    min-width: 10.5rem;
    background: var(--cream);
    border: 1px solid rgba(139, 114, 64, 0.18);
    box-shadow: 0 14px 34px rgba(44, 42, 37, 0.18);
    overflow: hidden;
    /* <details> n'anime pas son ouverture : l'animation est portée par le
       panneau, qui apparaît au moment où il entre dans la page. */
    animation: langOuvre 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes langOuvre {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.lang-panneau > * {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.1rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.16em;
    line-height: 1.4;
    text-transform: uppercase;
    text-indent: 0;
    white-space: nowrap;
}
/* Une pastille devant la langue affichée. Elle est posée sur les deux lignes,
   invisible sur l'autre : les deux libellés restent alignés. */
.lang-panneau > *::before {
    content: '';
    width: 5px; height: 5px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
    opacity: 0;
}
.lang-panneau-actuel { color: var(--text-muted); }
.lang-panneau-actuel::before { opacity: 1; }
.lang-panneau a {
    color: var(--patine);
    border-top: 1px solid rgba(139, 114, 64, 0.14);
    transition: background 0.25s ease;
}
.lang-panneau a:hover,
.lang-panneau a:active { background: var(--cream-warm); }
.lang-panneau a:focus-visible { outline: 2px solid var(--patine); outline-offset: -2px; }

/* --- version bureau : dans la barre du haut --- */
/* Le carré porte aussi la classe du bouton « Les Buis » : il hérite de son
   filet et de toutes ses inversions de couleur (survol, barre défilée, barre
   pleine, hero clair) sans qu'une règle soit recopiée. */
.lang-boite--nav { display: block; }
.lang-boite--nav[open] > .lang-carre { color: var(--patine); border-color: var(--patine); }
.lang-boite--flottante { display: none; }

/* --- version téléphone et tablette : pastille fixe --- */
@media (max-width: 1100px) {
    .lang-boite--flottante {
        display: block;
        position: fixed;
        top: calc(1rem + env(safe-area-inset-top, 0px));
        right: 1.25rem;
        z-index: 5500;
    }
    .lang-carre--flottant {
        /* Ici le carré n'a pas de voisin dont s'inspirer : il reprend le
           disque du bouton de musique, dans le coin opposé. */
        width: 44px; height: 44px;
        border-radius: 50%;
        border: 1px solid rgba(139, 114, 64, 0.32);
        background: var(--cream);
        color: var(--patine);
        box-shadow: 0 6px 20px rgba(44, 42, 37, 0.16);
        font-family: 'Montserrat', sans-serif;
        font-size: 0.66rem;
        font-weight: 500;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        transition: transform 0.3s ease, border-color 0.3s ease,
                    background 0.3s ease, color 0.3s ease;
    }
    .lang-carre--flottant:hover { border-color: var(--patine); transform: scale(1.06); }
    .lang-carre--flottant:focus-visible { outline: 2px solid var(--patine); outline-offset: 3px; }
    .lang-boite--flottante[open] > .lang-carre--flottant {
        background: var(--patine);
        border-color: var(--patine);
        color: #fff;
    }
}

/* --- pied de page --- */
.footer-lang {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1.5rem;
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.footer-lang a {
    color: rgba(255,255,255,0.5);
    border-bottom: 1px solid rgba(255,255,255,0.18);
    padding-bottom: 2px;
    transition: color 0.3s, border-color 0.3s;
}
.footer-lang a:hover { color: #fff; border-color: rgba(255,255,255,0.55); }
.footer-lang .footer-lang-on {
    color: var(--stone-warm);
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
}

@media (prefers-reduced-motion: reduce) {
    .lang-panneau { animation: none; }
    .lang-carre { transition: none; }
}