/* ============================================================
   HÔTEL LA PERNA — Design system
   Direction : magazine de voyage haut de gamme,
               sophistication provençale, aucun artifice.
   Inspirations : Aman, Cheval Blanc, Il Pellicano, Le Bristol.
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------ */
:root {
    /* Couleurs — matières nobles */
    --ink:            #1A1814;   /* encre — texte, bordures */
    --ink-soft:       #3D3A31;   /* texte secondaire */
    --ink-mute:       #70695C;   /* tertiaire, méta */

    --ivory:          #F6F1E6;   /* fond principal, chaud */
    --ivory-deep:     #EDE6D4;   /* fond section alt */
    --paper:          #FBF7EE;   /* blanc cassé très chaud */

    --olive:          #7A7758;   /* marque, subtile */
    --olive-deep:     #4B4935;   /* marque foncée */
    --olive-rule:     #BCB69E;   /* filets */
    --sage:           #D6CFB0;   /* fond kaki / sage, alternance */
    --sage-soft:      #E5DFC8;   /* sage très doux */

    --terra:          #9E5D3F;   /* accent rare */
    --gold:           #B08A3E;   /* ponctuation or, très rare */
    --logo-h:         100px;     /* logo header hauteur */
    --logo-h-scroll:  100px;     /* identique : pas de réduction au scroll */

    /* Typographies */
    --serif-display:  'Cormorant Garamond', 'EB Garamond', Georgia, 'Times New Roman', serif;
    --serif-text:     'Lora', 'Cormorant Garamond', Georgia, serif;
    --sans:           'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Tailles — fluides */
    --fs-micro:       0.7rem;
    --fs-xs:          0.8125rem;
    --fs-sm:          0.9375rem;
    --fs-body:        1.05rem;
    --fs-lede:        1.25rem;
    --fs-h4:          clamp(1.5rem, 2vw, 2rem);
    --fs-h3:          clamp(2rem, 3vw, 2.75rem);
    --fs-h2:          clamp(2.5rem, 5vw, 4.5rem);
    --fs-h1:          clamp(3.5rem, 8.5vw, 8rem);
    --fs-display:     clamp(5rem, 14vw, 13rem);

    /* Espacements */
    --s-1: 0.25rem;   --s-2: 0.5rem;    --s-3: 0.75rem;
    --s-4: 1rem;      --s-5: 1.5rem;    --s-6: 2rem;
    --s-7: 3rem;      --s-8: 4.5rem;    --s-9: 6rem;
    --s-10: 8rem;     --s-11: 11rem;    --s-12: 16rem;

    /* Rythme */
    --lh-head:        0.95;
    --lh-body:        1.7;
    --ls-tight:       -0.02em;
    --ls-caps:        0.28em;

    /* Layout */
    --container:      1320px;
    --container-wide: 1560px;
    --container-text: 680px;
    --header-h:       116px;

    --ease:           cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
}

/* ------------------------------------------------------------
   2. RESET
   ------------------------------------------------------------ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    /* Supprime le rectangle bleu/gris au tap sur mobile (iOS Safari, Chrome Android) */
    -webkit-tap-highlight-color: transparent;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;       /* support Edge legacy */
    background: var(--ivory);
}

body {
    font-family: var(--serif-text);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--ink);
    background: var(--ivory);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
    /* Inertie de scroll naturelle sur iOS Safari (sans cette règle, le scroll
       est saccadé sur les pages avec contenu débordant) */
    -webkit-overflow-scrolling: touch;
}

img, video, svg { max-width: 100%; height: auto; display: block; }

/* Reset boutons/inputs pour neutraliser les styles natifs des différents
   navigateurs (Safari arrondit, Firefox boxe, Chrome ombre…). On part
   d'une base neutre avant d'appliquer notre design. */
button, input, select, textarea {
    font: inherit;
    color: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
    border: 0;
    outline: none;
}
/* Conserve l'apparence native pour les checkboxes/radios — sinon ils disparaissent */
input[type="checkbox"],
input[type="radio"] {
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
}

a { color: inherit; text-decoration: none; transition: color 0.3s var(--ease); }

/* Respect des préférences utilisateur : si "réduire animations" activé
   (système → accessibilité), on neutralise toutes les animations et
   transitions du site. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

ul { list-style: none; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--serif-display);
    font-weight: 400;
    line-height: var(--lh-head);
    letter-spacing: var(--ls-tight);
    color: var(--ink);
}

p { margin: 0; }

::selection { background: var(--ink); color: var(--ivory); }

/* ------------------------------------------------------------
   3. TYPE SYSTEM
   ------------------------------------------------------------ */
.label {
    font-family: var(--sans);
    font-size: var(--fs-micro);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
    color: var(--ink-mute);
}

.label--line {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
}
.label--line::before {
    content: "";
    width: 32px;
    height: 1px;
    background: currentColor;
    opacity: 0.5;
}

.chapter-mark {
    font-family: var(--serif-display);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--olive);
    font-weight: 400;
    letter-spacing: 0;
    display: inline-flex;
    align-items: baseline;
    gap: var(--s-3);
}
.chapter-mark::before {
    content: "—";
    color: var(--olive-rule);
}

.lede {
    font-family: var(--serif-display);
    font-style: italic;
    font-size: var(--fs-lede);
    line-height: 1.45;
    color: var(--ink-soft);
    font-weight: 400;
}

.body-text {
    color: var(--ink-soft);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}
.body-text p + p { margin-top: 1em; }

em, .italic { font-style: italic; }

/* Rule — séparateur élégant */
.rule {
    border: 0;
    border-top: 1px solid var(--olive-rule);
    opacity: 0.6;
}

/* ------------------------------------------------------------
   4. LAYOUT
   ------------------------------------------------------------ */
.wrap {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 clamp(var(--s-5), 4vw, var(--s-7));
}
.wrap--wide { max-width: var(--container-wide); }
.wrap--text { max-width: var(--container-text); }

.section { padding: var(--s-8) 0; }
.section--sm { padding: var(--s-6) 0; }
.section--lg { padding: 5rem 0; }
.section--tight { padding: var(--s-5) 0; }

.bg-paper { background: var(--paper); }
.bg-deep  { background: var(--ivory-deep); }
.bg-ink   { background: var(--ink); color: var(--ivory); }
.bg-ink h1, .bg-ink h2, .bg-ink h3 { color: var(--ivory); }
.bg-ink .lede, .bg-ink .body-text { color: rgba(246,241,230,0.75); }

/* Sage / kaki — alternance avec ivoire/crème */
.bg-sage { background: var(--sage); }
.bg-sage-soft { background: var(--sage-soft); }

/* Olive deep — bandeau accent fort, texte ivoire */
.bg-olive {
    background: var(--olive-deep);
    color: var(--ivory);
}
.bg-olive .section-head__title,
.bg-olive h1, .bg-olive h2, .bg-olive h3 { color: var(--ivory); }
.bg-olive .section-head__title em,
.bg-olive em { color: #E8DEC0; }
.bg-olive .label { color: rgba(246,241,230,0.7); }
.bg-olive .lede,
.bg-olive .intro-text,
.bg-olive p { color: rgba(246,241,230,0.92); }
.bg-olive .intro-text__small {
    border-top-color: rgba(246,241,230,0.2);
    color: rgba(246,241,230,0.75);
}
.bg-olive a.link-arrow { color: var(--ivory); border-bottom-color: rgba(246,241,230,0.4); }
.bg-olive a.link-arrow:hover { border-bottom-color: var(--ivory); }

/* ------------------------------------------------------------
   5. HEADER — minimal, texte uniquement
   ------------------------------------------------------------ */
.header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 50;
    padding: var(--s-2) 0 var(--s-4);
    mix-blend-mode: normal;
    background: transparent;
    transition: background 0.5s var(--ease), padding 0.4s var(--ease), box-shadow 0.5s var(--ease);
}
.header.is-scrolled {
    background: rgba(246, 241, 230, 0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    /* Pas de réduction de padding au scroll — le header garde la même
       hauteur dans les deux états (transparent et scrollé). */
    box-shadow: 0 1px 0 rgba(26,24,20,0.06);
    /* Force le texte SOMBRE quand le fond devient crème opaque (sinon
       texte ivory hérité de .header.is-light reste, et on a blanc sur crème
       = illisible). */
    color: var(--ink) !important;
}
/* Idem pour les liens du menu nav et les boutons de langues quand scrollé */
.header.is-scrolled .nav a,
.header.is-scrolled .lang a { color: var(--ink) !important; }
.header.is-scrolled .burger span { background: var(--ink) !important; }
/* Logo en couleurs naturelles quand scrollé (pas filtré en blanc) */
.header.is-scrolled .logo-mark img { filter: none !important; }

/* Quand le menu burger mobile est ouvert :
   - retire backdrop-filter (sinon le header devient containing block fixed
     et rétrécit la nav)
   - fond crème opaque
   - force la couleur du texte/burger en SOMBRE (sinon ivory sur ivory =
     invisible → la croix de fermeture du burger disparaît) */
body.menu-open .header,
body.menu-open .header.is-scrolled,
body.menu-open .header.is-light {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(246, 241, 230, 1) !important;
    color: var(--ink) !important;
}
body.menu-open .header .burger span { background: var(--ink) !important; }
body.menu-open .header .lang a { color: var(--ink) !important; }
/* Logo en couleurs naturelles (pas blanchi) quand le menu est ouvert */
body.menu-open .header .logo-mark img { filter: none !important; }

.header.is-light:not(.is-scrolled) { color: var(--ivory); }

/* ─── Padding-top du body pour les pages SANS hero ─────────────
   Le header est position:fixed donc le contenu doit avoir un padding-top
   égal à la hauteur du header (sinon il passe SOUS le header). Les pages
   avec .hero ont déjà ce padding intégré. Les autres (légales, arrivée
   tardive, etc.) n'avaient rien et le contenu se faisait chevaucher. */
body.page-late-arrival,
body.page-mentions-legales,
body.page-politique-confidentialite,
body.page-politique-cookies,
body.page-cgv-individuelle,
body.page-cgv-groupe,
body.page-clause-redirection {
    padding-top: var(--header-h);
}
/* Logo en couleurs d'origine (texte sombre + branche olive). Sur les heros
   à zones sombres (encadrement de porte, plantes, etc.), on ajoute un halo
   blanc subtil via drop-shadow pour garantir la lisibilité partout, sans
   dénaturer les couleurs officielles. */
/* En haut de hero (transparent) : logo en blanc pour rester lisible sur
   toutes les photos (claires comme sombres). Une fois scrollé (header
   crème opaque), le logo reprend ses couleurs naturelles. Filter simple
   brightness(0)+invert(1) compatible Safari avec le PNG RGBA 400x400. */
.header.is-light:not(.is-scrolled) .logo-mark img {
    filter: brightness(0) invert(1);
}

.header__inner {
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: 0 clamp(var(--s-5), 4vw, var(--s-7));
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--s-7);
}

.logo-mark {
    display: flex !important;
    align-items: center;
    gap: var(--s-4);
    flex-shrink: 0;
    min-width: 100px;
    min-height: 100px;
    z-index: 2;
    position: relative;
}
.logo-mark img {
    display: block !important;
    height: var(--logo-h) !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    opacity: 1 !important;
    visibility: visible !important;
    /* Pas de transition de hauteur : le logo garde sa taille (100px) dans
       les deux états (header transparent ET header scrollé). Seule la
       couleur change via le filter défini plus haut. */
}

.logo-mark__text {
    display: flex;
    flex-direction: column;
    font-family: var(--sans);
    line-height: 1.1;
}
.logo-mark__text strong {
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}
.logo-mark__text span {
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0.6;
    margin-top: 2px;
}

/* Navigation centrée */
.nav {
    display: flex;
    justify-content: center;
    gap: clamp(var(--s-4), 2.2vw, var(--s-6));
}
.nav a {
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    position: relative;
    padding: 8px 0;
    white-space: nowrap;
    transition: color 0.3s var(--ease);
}
.nav a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    transform: translateX(-50%) scale(0);
    transition: transform 0.4s var(--ease);
}
.nav a:hover::after,
.nav a.is-active::after { transform: translateX(-50%) scale(1); }

/* Sub-menu */
.nav-item { position: relative; }
/* Petite flèche indiquant qu'il y a un sous-menu — rendue inline en `::before`
   ce qui décale légèrement le texte du parent. Sur desktop c'est ok (item
   centré dans le menu), mais sur mobile (menu vertical empilé) cela créerait
   un défaut d'alignement avec les autres items → la flèche est repositionnée
   en absolu à droite dans la media query mobile plus bas. */
.nav-item--has-sub > a::before {
    content: "";
    display: inline-block;
    width: 4px; height: 4px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg);
    margin-left: 8px;
    margin-bottom: 2px;
    opacity: 0.5;
}
.nav-sub {
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    min-width: 260px;
    background: var(--paper);
    padding: var(--s-3) 0;
    box-shadow: 0 20px 50px -20px rgba(26,24,20,0.3);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s var(--ease);
    border-top: 2px solid var(--ink);
}
.nav-item:hover .nav-sub {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.nav-sub a {
    display: block;
    padding: var(--s-3) var(--s-5);
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    color: var(--ink-soft);
}
.nav-sub a::after { display: none; }
.nav-sub a:hover { background: var(--ivory); color: var(--ink); }

/* Header right : langue + réserver */
.header-right {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--s-5);
    justify-self: end;
    flex-shrink: 0;
    white-space: nowrap;
}
.lang {
    display: flex;
    gap: var(--s-2);
    font-family: var(--sans);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.lang a {
    opacity: 0.45;
    padding: 2px 4px;
    transition: opacity 0.3s;
}
.lang a:hover { opacity: 0.8; }
.lang a.is-active { opacity: 1; border-bottom: 1px solid currentColor; }

.cta-reserve {
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 14px 28px;
    border: 1px solid currentColor;
    transition: all 0.35s var(--ease);
}
.cta-reserve:hover {
    background: var(--ink);
    color: var(--ivory);
    border-color: var(--ink);
}
.header.is-light:not(.is-scrolled) .cta-reserve:hover {
    background: var(--ivory);
    color: var(--ink);
}

/* Burger */
.burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 10px;        /* zone de tap ≥ 44px (recommandation Apple HIG) */
    background: transparent;
    border: 0;
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
}
.burger span {
    width: 24px;
    height: 2px;          /* 2px = mieux visible que 1px sur écrans denses */
    background: currentColor;
    border-radius: 1px;
    transition: all 0.35s var(--ease);
    display: block;
}
.burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ------------------------------------------------------------
   6. BOUTONS (très rares, minimalistes)
   ------------------------------------------------------------ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    font-family: var(--sans);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 18px 36px;
    border: 1px solid var(--ink);
    color: var(--ink);
    transition: all 0.4s var(--ease);
    background: transparent;
}
.btn:hover { background: var(--ink); color: var(--ivory); }

.btn--solid { background: var(--ink); color: var(--ivory); }
.btn--solid:hover { background: transparent; color: var(--ink); }

.btn--ivory { border-color: var(--ivory); color: var(--ivory); }
.btn--ivory:hover { background: var(--ivory); color: var(--ink); }

.btn--ghost { border: 0; padding: 0; text-decoration: none; }
.btn--ghost:hover { background: transparent; color: var(--olive); }

.btn__arrow {
    display: inline-block;
    width: 24px;
    height: 1px;
    background: currentColor;
    position: relative;
    transition: width 0.45s var(--ease);
}
.btn__arrow::after {
    content: "";
    position: absolute;
    right: 0;
    top: -3px;
    width: 7px;
    height: 7px;
    border-right: 1px solid currentColor;
    border-top: 1px solid currentColor;
    transform: rotate(45deg);
}
.btn:hover .btn__arrow { width: 36px; }

/* Lien avec flèche discret */
.link-arrow {
    font-family: var(--sans);
    font-size: 0.78rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--olive-rule);
    transition: all 0.4s var(--ease);
}
.link-arrow:hover {
    border-bottom-color: var(--ink);
    gap: var(--s-4);
}

/* ------------------------------------------------------------
   7. HERO — split magazine
   ------------------------------------------------------------ */
.hero {
    position: relative;
    min-height: 100vh;
    padding-top: var(--header-h);
    display: grid;
    grid-template-columns: 5fr 7fr;
    background: var(--ivory);
    overflow: hidden;
}

.hero__text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(var(--s-7), 5vw, var(--s-9)) clamp(var(--s-5), 4vw, var(--s-7));
    position: relative;
    z-index: 2;
}

.hero__meta {
    display: flex;
    align-items: center;
    gap: var(--s-6);
    font-family: var(--sans);
    font-size: var(--fs-micro);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--ink-mute);
}
.hero__meta-sep { opacity: 0.4; }

.hero__title {
    font-family: var(--serif-display);
    font-size: var(--fs-h1);
    font-weight: 300;
    line-height: var(--lh-head);
    letter-spacing: -0.025em;
    color: var(--ink);
    margin: var(--s-6) 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}
.hero__title em {
    font-style: italic;
    font-weight: 400;
    color: var(--olive-deep);
}

.hero__lede {
    font-family: var(--serif-display);
    font-style: italic;
    font-size: clamp(1.1rem, 1.5vw, 1.4rem);
    line-height: 1.5;
    color: var(--ink-soft);
    max-width: 440px;
    margin-bottom: var(--s-6);
}

.hero__footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s-5);
    padding-top: var(--s-6);
    border-top: 1px solid var(--olive-rule);
}
.hero__footer-est {
    font-family: var(--serif-display);
    font-style: italic;
    color: var(--ink-mute);
    font-size: 0.95rem;
}
.hero__footer-est strong {
    display: block;
    font-family: var(--sans);
    font-style: normal;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 4px;
}

.hero__visual {
    position: relative;
    overflow: hidden;
}
.hero__slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 1.4s ease, transform 9s linear;
}
.hero__slide.is-active {
    opacity: 1;
    transform: scale(1);
}

.hero__caption {
    position: absolute;
    bottom: var(--s-5);
    right: var(--s-5);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: var(--s-5);
    font-family: var(--sans);
    font-size: var(--fs-micro);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--ivory);
}
.hero__dots { display: flex; gap: 8px; }
.hero__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.35);
    transition: all 0.4s var(--ease);
}
.hero__dot.is-active { background: var(--ivory); transform: scale(1.4); }

.hero__counter {
    font-family: var(--serif-display);
    font-style: italic;
    font-size: 1.05rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ivory);
    opacity: 0.85;
}

/* Page hero (pages intérieures) */
.page-hero {
    padding-top: calc(var(--header-h) + var(--s-8));
    padding-bottom: var(--s-8);
    background: var(--ivory);
    border-bottom: 1px solid var(--olive-rule);
}
.page-hero__inner {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: clamp(var(--s-5), 5vw, var(--s-8));
    align-items: end;
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: 0 clamp(var(--s-5), 4vw, var(--s-7));
}
.page-hero__text { min-width: 0; }
.page-hero__meta { min-width: 0; }
.page-hero__text .label { margin-bottom: var(--s-5); }
.page-hero__title {
    font-size: clamp(2.75rem, 6vw, 6rem);
    line-height: var(--lh-head);
    font-weight: 300;
    letter-spacing: -0.02em;
}
.page-hero__title em { font-style: italic; color: var(--olive-deep); }
.page-hero__meta { padding-bottom: var(--s-3); }
.page-hero__meta dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--s-3) var(--s-5);
    font-size: 0.95rem;
}
.page-hero__meta dt {
    font-family: var(--sans);
    font-size: 0.68rem;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--ink-mute);
    padding-top: 6px;
}
.page-hero__meta dd {
    font-family: var(--serif-display);
    font-style: italic;
    color: var(--ink);
    font-size: 1.2rem;
}

.page-hero__image {
    margin-top: var(--s-7);
    width: 100%;
    aspect-ratio: 21 / 9;
    overflow: hidden;
}
.page-hero__image img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__image-caption {
    margin-top: var(--s-3);
    max-width: var(--container-wide);
    margin-left: auto;
    margin-right: auto;
    padding: 0 clamp(var(--s-5), 4vw, var(--s-7));
    font-family: var(--serif-display);
    font-style: italic;
    font-size: 0.9rem;
    color: var(--ink-mute);
    text-align: right;
}

/* ------------------------------------------------------------
   8. CHAPTER — en-tête de section numéroté
   ------------------------------------------------------------ */
.chapter {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: clamp(var(--s-5), 4vw, var(--s-8));
    align-items: start;
    margin-bottom: var(--s-8);
    padding-top: var(--s-5);
    border-top: 1px solid var(--olive-rule);
}
.chapter__num {
    font-family: var(--serif-display);
    font-style: italic;
    font-size: clamp(3rem, 6vw, 5.5rem);
    font-weight: 300;
    line-height: 1;
    color: var(--olive-rule);
    letter-spacing: -0.02em;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    padding-top: 0.2em;
}
.chapter__num-label {
    display: block;
    font-family: var(--sans);
    font-style: normal;
    font-size: var(--fs-micro);
    font-weight: 500;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: 10px;
}
.chapter__head .label { margin-bottom: var(--s-4); }
.chapter__title {
    font-size: var(--fs-h2);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.02em;
}
.chapter__title em {
    font-style: italic;
    color: var(--olive-deep);
}
.chapter__lede {
    font-family: var(--serif-display);
    font-style: italic;
    font-size: clamp(1.15rem, 1.5vw, 1.4rem);
    color: var(--ink-soft);
    max-width: 640px;
    margin-top: var(--s-5);
    line-height: 1.4;
}

/* ------------------------------------------------------------
   9. INTRO MANIFESTO (gros titre centré)
   ------------------------------------------------------------ */
.manifesto {
    text-align: center;
    padding: var(--s-8) 0;
}
.manifesto .label { margin-bottom: var(--s-6); }
.manifesto h2 {
    font-size: clamp(2.5rem, 5.5vw, 5rem);
    line-height: var(--lh-head);
    font-weight: 300;
    letter-spacing: -0.02em;
    max-width: 15ch;
    margin: 0 auto;
}
.manifesto h2 em {
    font-style: italic;
    color: var(--olive-deep);
}
.manifesto .body-text {
    max-width: var(--container-text);
    margin: var(--s-6) auto 0;
    font-size: var(--fs-lede);
    line-height: 1.65;
}

/* ------------------------------------------------------------
   10. ROOMS — bande horizontale scrollable type magazine
   ------------------------------------------------------------ */
.rooms-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-11);
}

.room-feature {
    display: grid;
    grid-template-columns: 6fr 5fr;
    gap: clamp(var(--s-5), 5vw, var(--s-8));
    align-items: center;
}
.room-feature--alt { grid-template-columns: 5fr 6fr; }
.room-feature--alt .room-feature__visual { order: 2; }
.room-feature--alt .room-feature__body   { order: 1; }

.room-feature__visual {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
}
.room-feature__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 2s var(--ease);
}
.room-feature:hover .room-feature__visual img { transform: scale(1.04); }

.room-feature__cat {
    font-family: var(--serif-display);
    font-style: italic;
    font-size: 1.15rem;
    color: var(--olive);
    margin-bottom: var(--s-3);
}
.room-feature__cat::before {
    content: "";
    display: inline-block;
    width: 40px;
    height: 1px;
    background: currentColor;
    opacity: 0.5;
    vertical-align: middle;
    margin-right: var(--s-3);
}

.room-feature__title {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    line-height: 0.95;
    font-weight: 300;
    letter-spacing: -0.025em;
    margin-bottom: var(--s-5);
}
.room-feature__title em {
    font-style: italic;
    color: var(--olive-deep);
}

.room-feature__lede {
    font-family: var(--serif-display);
    font-style: italic;
    font-size: var(--fs-lede);
    color: var(--ink-soft);
    margin-bottom: var(--s-6);
    line-height: 1.5;
    max-width: 520px;
}

.room-feature__specs {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: var(--s-5) var(--s-7);
    padding: var(--s-5) 0;
    border-top: 1px solid var(--olive-rule);
    border-bottom: 1px solid var(--olive-rule);
    margin-bottom: var(--s-6);
    width: fit-content;
}
.room-feature__spec dt {
    font-family: var(--sans);
    font-size: var(--fs-micro);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: 4px;
}
.room-feature__spec dd {
    font-family: var(--serif-display);
    font-style: italic;
    font-size: 1.15rem;
    color: var(--ink);
}

.room-feature__price {
    display: flex;
    align-items: baseline;
    gap: var(--s-3);
    margin-bottom: var(--s-5);
}
.room-feature__price-from {
    font-family: var(--sans);
    font-size: 0.68rem;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--ink-mute);
}
.room-feature__price-value {
    font-family: var(--serif-display);
    font-size: 2rem;
    color: var(--ink);
    letter-spacing: -0.02em;
}

/* ------------------------------------------------------------
   11. AMENITIES — liste longue texte
   ------------------------------------------------------------ */
.amenities-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--s-10);
    row-gap: 0;
}
.amenity-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-4) 0;
    border-bottom: 1px solid var(--olive-rule);
}
.amenity-row__num {
    font-family: var(--serif-display);
    font-style: italic;
    color: var(--olive);
    font-size: 0.9rem;
    min-width: 24px;
}
.amenity-row__name {
    font-family: var(--serif-display);
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--ink);
}
.amenity-row__tag {
    font-family: var(--sans);
    font-size: var(--fs-micro);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

/* ------------------------------------------------------------
   12. FEATURE ÉDITORIAL — 2 colonnes image + texte
   ------------------------------------------------------------ */
.feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(var(--s-5), 5vw, var(--s-8));
    align-items: center;
}
.feature--reverse > :first-child { order: 2; }

.feature__visual {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 5;
}
.feature__visual--landscape { aspect-ratio: 5 / 4; }
.feature__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 2s var(--ease);
}
.feature:hover .feature__visual img { transform: scale(1.04); }

.feature__visual-caption {
    margin-top: var(--s-3);
    font-family: var(--serif-display);
    font-style: italic;
    font-size: 0.9rem;
    color: var(--ink-mute);
}

.feature__body .label { margin-bottom: var(--s-4); }
.feature__title {
    font-size: clamp(2rem, 3.5vw, 3rem);
    line-height: 1;
    font-weight: 300;
    letter-spacing: -0.02em;
    margin-bottom: var(--s-5);
}
.feature__title em {
    font-style: italic;
    color: var(--olive-deep);
}
.feature__body ul {
    margin-top: var(--s-5);
    display: grid;
    gap: var(--s-3);
}
.feature__body li {
    padding-left: var(--s-5);
    position: relative;
    color: var(--ink-soft);
}
.feature__body li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--olive);
}

/* ------------------------------------------------------------
   13. BIG IMAGE BAND — image pleine largeur avec légende
   ------------------------------------------------------------ */
.big-image {
    position: relative;
    width: 100%;
    aspect-ratio: 21 / 9;
    overflow: hidden;
}
.big-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.big-image__caption {
    padding: var(--s-4) clamp(var(--s-5), 4vw, var(--s-7));
    display: flex;
    justify-content: space-between;
    max-width: var(--container-wide);
    margin: 0 auto;
    font-family: var(--serif-display);
    font-style: italic;
    color: var(--ink-mute);
    font-size: 0.95rem;
    flex-wrap: wrap;
    gap: var(--s-3);
}
.big-image__caption strong {
    font-family: var(--sans);
    font-style: normal;
    font-weight: 500;
    font-size: 0.68rem;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--ink);
    margin-right: var(--s-3);
}

/* ------------------------------------------------------------
   14. GALLERY MOSAÏQUE
   ------------------------------------------------------------ */
.gallery {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 8vw;
    gap: 4px;
    max-height: 100vh;
}
.gallery__tile { overflow: hidden; }
.gallery__tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.6s var(--ease);
}
.gallery__tile:hover img { transform: scale(1.05); }
.gallery__tile:nth-child(1) { grid-column: span 7; grid-row: span 5; }
.gallery__tile:nth-child(2) { grid-column: span 5; grid-row: span 3; }
.gallery__tile:nth-child(3) { grid-column: span 2; grid-row: span 2; }
.gallery__tile:nth-child(4) { grid-column: span 3; grid-row: span 2; }
.gallery__tile:nth-child(5) { grid-column: span 5; grid-row: span 3; }
.gallery__tile:nth-child(6) { grid-column: span 7; grid-row: span 3; }

/* ------------------------------------------------------------
   15. REVIEW — pleine largeur, grande typo
   ------------------------------------------------------------ */
.review {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
    padding: 0 var(--s-5);
}
.review__stars {
    color: var(--gold);
    letter-spacing: 6px;
    font-size: 1rem;
    margin-bottom: var(--s-5);
}
.review__text {
    font-family: var(--serif-display);
    font-style: italic;
    font-size: clamp(1.6rem, 3vw, 2.5rem);
    line-height: 1.3;
    color: var(--ink);
    font-weight: 300;
    letter-spacing: -0.01em;
    position: relative;
    padding: 0 var(--s-5);
}
.review__text::before,
.review__text::after {
    content: "";
    font-family: var(--serif-display);
    font-style: italic;
    color: var(--olive-rule);
    font-size: 1.5em;
    line-height: 0;
    position: absolute;
}
.review__text::before { content: "“"; left: -10px; top: 0.4em; }
.review__text::after  { content: "”"; right: -10px; bottom: -0.1em; }
.review__source {
    margin-top: var(--s-6);
    font-family: var(--sans);
    font-size: 0.72rem;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--ink-mute);
}

/* ------------------------------------------------------------
   16. CTA PLEINE LARGEUR
   ------------------------------------------------------------ */
.cta-band {
    position: relative;
    padding: var(--s-11) 0;
    overflow: hidden;
    background: var(--ink);
    color: var(--ivory);
    text-align: center;
}
.cta-band__media {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.35;
}
.cta-band::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(26,24,20,0.5) 0%, rgba(26,24,20,0.2) 50%, rgba(26,24,20,0.6) 100%);
}
.cta-band__inner {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--s-5);
}
.cta-band .label { color: rgba(246,241,230,0.6); margin-bottom: var(--s-5); }
.cta-band h2 {
    font-size: clamp(2.25rem, 5vw, 4.25rem);
    font-weight: 300;
    color: var(--ivory);
    line-height: var(--lh-head);
    letter-spacing: -0.02em;
    margin-bottom: var(--s-5);
}
.cta-band h2 em { font-style: italic; color: #D8CDB0; }
.cta-band .lede { color: rgba(246,241,230,0.85); margin-bottom: var(--s-7); }

/* ------------------------------------------------------------
   17. RATES — éditorial
   ------------------------------------------------------------ */
.rates-intro {
    max-width: var(--container-text);
    margin: 0 auto;
    text-align: center;
}

.rates-season {
    margin-top: var(--s-9);
    padding-top: var(--s-6);
    border-top: 1px solid var(--olive-rule);
}
.rates-season__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-5);
    margin-bottom: var(--s-5);
    flex-wrap: wrap;
}
.rates-season__label {
    font-family: var(--serif-display);
    font-style: italic;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    color: var(--ink);
    line-height: 1;
}
.rates-season__period {
    font-family: var(--sans);
    font-size: var(--fs-micro);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--ink-mute);
}
.rates-line {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--s-5);
    align-items: baseline;
    padding: var(--s-4) 0;
    border-bottom: 1px dashed var(--olive-rule);
}
.rates-line__name {
    font-family: var(--serif-display);
    font-size: 1.3rem;
    color: var(--ink);
}
.rates-line__desc {
    display: block;
    font-family: var(--serif-display);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--ink-mute);
    margin-top: 2px;
}
.rates-line__price {
    font-family: var(--serif-display);
    font-size: 1.3rem;
    color: var(--olive-deep);
    white-space: nowrap;
}

.rates-extras {
    margin-top: var(--s-9);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-5) var(--s-8);
}
.rates-extra {
    display: flex;
    justify-content: space-between;
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--olive-rule);
    font-size: 0.95rem;
}
.rates-extra__name { color: var(--ink-soft); }
.rates-extra__price {
    font-family: var(--serif-display);
    font-style: italic;
    color: var(--ink);
}

/* ------------------------------------------------------------
   18. SERVICE EDITORIAL GRID
   ------------------------------------------------------------ */
.services-editorial {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-6) var(--s-7);
}
.service-piece {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
}
.service-piece__image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
.service-piece__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.8s var(--ease);
}
.service-piece:hover .service-piece__image img { transform: scale(1.04); }
.service-piece__num {
    font-family: var(--serif-display);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--olive);
}
.service-piece__title {
    font-family: var(--serif-display);
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.1;
    color: var(--ink);
}
.service-piece__text {
    color: var(--ink-soft);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ------------------------------------------------------------
   19. FORM — ligne unique style éditorial
   ------------------------------------------------------------ */
.contact-pair {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: clamp(var(--s-5), 5vw, var(--s-9));
    align-items: start;
}

.contact-card {
    background: var(--paper);
    padding: clamp(var(--s-5), 3vw, var(--s-7));
    border-top: 2px solid var(--ink);
}
.contact-card .label { margin-bottom: var(--s-4); }
.contact-card h3 {
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 300;
    line-height: 1;
    margin-bottom: var(--s-5);
    letter-spacing: -0.02em;
}
.contact-card h3 em { font-style: italic; color: var(--olive-deep); }
.contact-card__row {
    display: flex;
    align-items: baseline;
    gap: var(--s-4);
    padding: var(--s-3) 0;
    border-top: 1px solid var(--olive-rule);
    color: var(--ink-soft);
}
.contact-card__row:first-of-type { border-top: 0; padding-top: 0; }
.contact-card__row-label {
    font-family: var(--sans);
    font-size: var(--fs-micro);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--ink-mute);
    width: 90px;
    flex-shrink: 0;
}
.contact-card__row-value {
    font-family: var(--serif-display);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--ink);
    flex: 1;
}
.contact-card__row-value a:hover { color: var(--olive-deep); }

.contact-form { display: grid; gap: var(--s-5); }
.field input,
.field textarea {
    width: 100%;
    padding: 20px 0 10px;
    font-family: var(--serif-display);
    font-size: 1.2rem;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--olive-rule);
    color: var(--ink);
    transition: border-color 0.3s;
    border-radius: 0;
}
.field input::placeholder,
.field textarea::placeholder {
    color: var(--ink-mute);
    font-style: italic;
    font-family: var(--serif-display);
    opacity: 1;
}
.field input:focus,
.field textarea:focus {
    outline: none;
    border-bottom-color: var(--ink);
}
.field textarea { min-height: 120px; resize: vertical; }

.form-msg {
    padding: var(--s-4);
    border-left: 2px solid;
    background: var(--paper);
    font-family: var(--serif-display);
    font-style: italic;
    font-size: 1.05rem;
}
.form-msg--ok { border-color: var(--olive); color: var(--olive-deep); }
.form-msg--err { border-color: var(--terra); color: var(--terra); }

.map-frame {
    width: 100%;
    aspect-ratio: 21 / 7;
    overflow: hidden;
    background: var(--ivory-deep);
    margin-top: var(--s-8);
}
.map-frame iframe { width: 100%; height: 100%; border: 0; filter: grayscale(0.3) contrast(0.92); }

/* ------------------------------------------------------------
   19b. VISITE 360°
   ------------------------------------------------------------ */
.tour-360 {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--ivory-deep);
    border: 1px solid var(--olive-rule);
}
.tour-360 iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.tour-360__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s-4);
    background:
      radial-gradient(circle at 30% 40%, rgba(188,182,158,0.25), transparent 60%),
      radial-gradient(circle at 70% 60%, rgba(158,93,63,0.12), transparent 60%),
      var(--ivory-deep);
    color: var(--ink-mute);
    text-align: center;
    padding: var(--s-6);
}
.tour-360__icon {
    font-family: var(--serif-display);
    font-style: italic;
    font-size: clamp(3.5rem, 6vw, 5rem);
    color: var(--olive);
    line-height: 1;
}
.tour-360__label {
    font-family: var(--sans);
    font-size: var(--fs-micro);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--ink-mute);
}
.tour-360__text {
    font-family: var(--serif-display);
    font-style: italic;
    font-size: 1.2rem;
    color: var(--ink-soft);
    max-width: 480px;
}

/* ------------------------------------------------------------
   20. FOOTER
   ------------------------------------------------------------ */
.footer {
    background: var(--ink);
    color: rgba(246,241,230,0.75);
    padding: var(--s-10) 0 var(--s-5);
    font-size: 0.92rem;
    margin-top: var(--s-10);
}
.footer__top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--s-7);
    margin-bottom: var(--s-8);
    padding-bottom: var(--s-7);
    border-bottom: 1px solid rgba(246,241,230,0.12);
}
.footer__brand img {
    height: 86px;
    margin-bottom: var(--s-5);
    filter: brightness(0) invert(1);
    opacity: 0.95;
}
.footer__brand p {
    font-family: var(--serif-display);
    font-style: italic;
    font-size: 1.2rem;
    line-height: 1.45;
    max-width: 400px;
    color: rgba(246,241,230,0.8);
}
.footer__col h5 {
    font-family: var(--sans);
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--ivory);
    margin-bottom: var(--s-4);
}
.footer__col p {
    margin-bottom: var(--s-2);
    line-height: 1.7;
}
.footer__col a:hover { color: var(--ivory); }

.footer__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-4);
    font-family: var(--sans);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(246,241,230,0.5);
}
.footer__legal nav { display: flex; flex-wrap: wrap; gap: var(--s-5); }
.footer__legal a:hover { color: var(--ivory); }

/* ------------------------------------------------------------
   21. BACK TO TOP
   ------------------------------------------------------------ */
.back-top {
    position: fixed;
    bottom: var(--s-5);
    right: var(--s-5);
    z-index: 40;
    width: 44px;
    height: 44px;
    border: 1px solid var(--ink);
    background: var(--ivory);
    display: grid;
    place-items: center;
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s var(--ease);
}
.back-top.is-visible { opacity: 1; pointer-events: auto; }
.back-top:hover { background: var(--ink); color: var(--ivory); }
.back-top svg { width: 18px; height: 18px; fill: none; stroke: currentColor; }

/* ------------------------------------------------------------
   22. LEGAL CONTENT
   ------------------------------------------------------------ */
.legal-content { font-size: 1.05rem; line-height: 1.8; color: var(--ink-soft); }
.legal-content h3 {
    font-family: var(--serif-display);
    font-size: 1.6rem;
    font-weight: 400;
    margin-top: var(--s-7);
    margin-bottom: var(--s-3);
    color: var(--ink);
}
.legal-content h3:first-child { margin-top: 0; }
.legal-content p + p { margin-top: var(--s-3); }
.legal-content ul {
    margin: var(--s-3) 0;
    padding-left: var(--s-5);
    list-style: "— ";
}
.legal-content li { padding-left: var(--s-2); margin-bottom: var(--s-2); }

/* ------------------------------------------------------------
   23. REVEAL
   ------------------------------------------------------------ */
/* Reveal au scroll : on garde l'animation au scroll si JS fonctionne, MAIS
   on force le contenu visible par défaut (opacity 1). Le JS ajoute juste
   la classe .is-visible pour une transition douce, mais si JS échoue,
   le contenu reste visible. Avant on partait à opacity:0 et tout disparaissait
   quand IntersectionObserver ne s'attachait pas — page blanche. */
[data-reveal] {
    opacity: 1;
    transform: none;
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
/* Si le JS attache la classe avant le scroll, on lance une animation
   discrète (élément invisible → visible). Sinon, élément déjà visible.
   On utilise .js-reveal-armed qui sera ajouté par le JS pour activer
   l'animation au moment voulu (sinon désarmée par défaut). */
.js-reveal-armed [data-reveal]:not(.is-visible) {
    opacity: 0;
    transform: translateY(24px);
}
[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ------------------------------------------------------------
   24. UTIL
   ------------------------------------------------------------ */
.text-center { text-align: center; }
.mt-5 { margin-top: var(--s-5); }
.mt-7 { margin-top: var(--s-7); }

/* ------------------------------------------------------------
   25. RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 1100px) {
    .nav { gap: var(--s-4); }
    .nav a { font-size: 0.72rem; letter-spacing: 0.14em; }
    .logo-mark__text { display: none; }
}

@media (max-width: 920px) {
    /* Mobile : header très compact. Logo 38px pour libérer un maximum
       d'espace en haut de page. Logo identique en scrolled (pas de
       rétrécissement). */
    :root { --header-h: 58px; --logo-h: 38px; --logo-h-scroll: 38px; }

    /* Padding du header constant en scrolled et non scrolled (pas de "jump"
       de hauteur quand le visiteur commence à scroller). */
    .header,
    .header.is-scrolled { padding: 4px 0 !important; }

    /* Header mobile : flex avec logo collé à gauche et lang+burger
       collés à droite (la nav est en overlay fixed, hors flux). */
    .header__inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--s-3);
        padding: 0 var(--s-4);
        min-height: 50px;
    }
    /* Override des min-width/min-height desktop (100px) pour le mobile */
    .logo-mark { min-width: 38px !important; min-height: 38px !important; }
    .burger { display: flex; flex-shrink: 0; }
    .header-right {
        gap: var(--s-3);
        margin-left: auto;
        flex-shrink: 0;
    }
    .cta-reserve { display: none; }

    .nav {
        position: fixed;
        /* Panneau slide-in depuis la DROITE — pas full-width.
           Largeur : 320px max, ou 86% de viewport sur petit mobile. */
        top: var(--header-h);
        right: 0;
        bottom: 0;
        left: auto;
        width: min(86vw, 340px);
        flex-direction: column;
        justify-content: flex-start;
        padding: var(--s-5) var(--s-5) var(--s-7);
        background: var(--ivory);
        color: var(--ink) !important;
        transform: translateX(100%);
        transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
        gap: 0;
        overflow-y: auto;
        z-index: 55;
        box-shadow: -10px 0 28px -12px rgba(26, 24, 20, 0.28);
    }
    .nav.is-open { transform: translateX(0); }
    /* Header reste au-dessus de la nav (z-index 60) → burger/lang cliquables */
    .header { z-index: 60 !important; }

    /* Backdrop sombre derrière le menu : appuyer dessus ferme le menu */
    .nav-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(26, 24, 20, 0);
        opacity: 0;
        pointer-events: none;
        transition: background 0.32s ease, opacity 0.32s ease;
        z-index: 54;
    }
    body.menu-open .nav-backdrop {
        background: rgba(26, 24, 20, 0.55);
        opacity: 1;
        pointer-events: auto;
    }
    .nav > li { border-bottom: 1px solid var(--olive-rule); }
    .nav a {
        display: block;
        padding: var(--s-4);
        font-size: 0.9rem;
        color: var(--ink) !important;   /* idem : force la couleur sur chaque lien */
        min-height: 44px;               /* zone de tap mobile (Apple HIG) */
    }
    .nav a::after { display: none; }
    /* Reset complet du sous-menu pour qu'il s'intègre dans le panneau mobile
       (au lieu d'être en position absolue centrée comme sur desktop).
       Important : annuler explicitement `left`, `top`, `min-width`, `transform`
       qui viennent des règles desktop. */
    .nav-sub {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        min-width: 0 !important;
        width: 100% !important;
        opacity: 1 !important;
        visibility: visible !important;
        box-shadow: none !important;
        background: rgba(26, 24, 20, 0.04);
        padding: 0 !important;
        margin: 0;
        display: none;
        border: 0 !important;
        border-radius: 0;
        list-style: none;
    }
    .nav-item--has-sub.is-expanded .nav-sub { display: block; }
    .nav-sub li { list-style: none; }
    .nav-sub a {
        display: block !important;
        padding: 12px 16px 12px 32px !important;  /* léger retrait pour signaler "sous-item" */
        font-size: 0.82rem !important;
        color: var(--ink-mute) !important;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        min-height: 40px !important;              /* compact mais cliquable */
    }

    /* Mobile : la flèche du parent passe à DROITE (absolute) pour que le
       texte "L'HÔTEL & SES CHAMBRES" soit aligné à gauche comme tous les
       autres items du menu (Accueil, Réunion, Piscine…). */
    .nav-item--has-sub > a { position: relative; padding-right: 32px; }
    .nav-item--has-sub > a::before {
        position: absolute;
        right: var(--s-4);
        top: 50%;
        margin: 0;
        width: 7px;
        height: 7px;
        border-right-width: 1.5px;
        border-bottom-width: 1.5px;
        transform: translateY(-65%) rotate(45deg);
        opacity: 0.65;
        transition: transform 0.25s var(--ease);
    }
    /* Quand le sous-menu est ouvert : la flèche pivote vers le haut */
    .nav-item--has-sub.is-expanded > a::before {
        transform: translateY(-35%) rotate(-135deg);
    }

    .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 0; }
    .hero__text { order: 2; padding: var(--s-7) var(--s-5); }
    .hero__visual { order: 1; aspect-ratio: 4 / 5; }

    .page-hero__inner { grid-template-columns: 1fr; gap: var(--s-5); }
    .page-hero__meta { padding-bottom: 0; }
    .page-hero__image { aspect-ratio: 4 / 3; }

    .chapter { grid-template-columns: 1fr; gap: var(--s-4); }

    .room-feature, .room-feature--alt,
    .feature, .feature--reverse { grid-template-columns: 1fr; gap: var(--s-6); }
    .room-feature--alt .room-feature__visual,
    .feature--reverse > :first-child { order: 0; }

    .services-editorial { grid-template-columns: repeat(2, 1fr); }
    .amenities-list { grid-template-columns: 1fr; column-gap: 0; }
    .rates-extras { grid-template-columns: 1fr; }
    .contact-pair { grid-template-columns: 1fr; }
    .footer__top { grid-template-columns: 1fr 1fr; gap: var(--s-6); }

    .gallery { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 18vw; max-height: none; }
    .gallery__tile:nth-child(n) { grid-column: span 3; grid-row: span 2; }
    .gallery__tile:nth-child(1) { grid-column: span 6; grid-row: span 2; }
}

@media (max-width: 640px) {
    .services-editorial { grid-template-columns: 1fr; }
    .footer__top { grid-template-columns: 1fr; }
    .footer__legal { flex-direction: column; text-align: center; }
    .gallery__tile:nth-child(n) { grid-column: span 6; grid-row: span 2; }

    .room-feature__specs { grid-template-columns: 1fr; gap: var(--s-3); }
    .rates-extras { grid-template-columns: 1fr; }
    .rates-line { grid-template-columns: 1fr; gap: var(--s-2); }
    .rates-line__price { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   26. REFONTE 2026 — composants éditoriaux additionnels
   Direction : pousser l'aspect magazine / hôtel maison,
   sans toucher à la charte (couleurs, typos, esprit).
   ============================================================ */

/* ----- 26.1 HERO IMMERSIVE — plein écran, photo + overlay ----- */
.hero-immersive {
    position: relative;
    width: 100%;
    min-height: 82vh;
    overflow: hidden;
    background: var(--ink);
    color: var(--ivory);
    isolation: isolate;
}
.hero-immersive__media {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.hero-immersive__media .hero__slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 1.6s ease, transform 9s linear;
}
.hero-immersive__media .hero__slide.is-active {
    opacity: 1;
    transform: scale(1);
}
.hero-immersive::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        /* Bandeau d'assise sous le menu (démarcation header) */
        linear-gradient(180deg,
            rgba(26,24,20,0.7) 0%,
            rgba(26,24,20,0.35) 12%,
            rgba(26,24,20,0.08) 22%,
            transparent 35%),
        /* Vignette diagonale : assombrit la zone bas-gauche (titre + lede + CTA) */
        linear-gradient(to bottom left,
            transparent 25%,
            rgba(26,24,20,0.42) 65%,
            rgba(26,24,20,0.78) 100%),
        /* Renforcement bas (footer + meta) */
        linear-gradient(180deg,
            transparent 60%,
            rgba(26,24,20,0.55) 100%);
    pointer-events: none;
}

.hero-immersive__overlay {
    position: relative;
    z-index: 2;
    min-height: 82vh;
    display: grid;
    grid-template-rows: 1fr auto;
    padding: calc(var(--header-h) + var(--s-5)) clamp(var(--s-5), 4vw, var(--s-8)) var(--s-5);
    max-width: var(--container-wide);
    margin: 0 auto;
}

.hero-immersive__center {
    align-self: end;
    max-width: 980px;
    padding-bottom: var(--s-6);
}
.hero-immersive__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    flex-wrap: wrap;
    font-family: var(--sans);
    font-size: var(--fs-micro);
    font-weight: 500;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: rgba(246,241,230,0.92);
    margin-bottom: var(--s-3);
}
.hero-immersive__eyebrow::before {
    content: "";
    display: inline-block;
    width: 32px; height: 1px;
    background: currentColor;
    opacity: 0.65;
    flex-shrink: 0;
}
.hero-immersive__eyebrow-sep {
    opacity: 0.45;
    margin: 0 2px;
}
.hero-immersive__eyebrow-stars {
    font-family: var(--serif-display);
    font-style: normal;
    font-size: 0.85rem;
    letter-spacing: 0.18em;
    color: #DDD0AE;
    text-transform: none;
}
.hero-immersive__title {
    font-family: var(--serif-display);
    font-size: clamp(3rem, 7vw, 6.5rem);
    line-height: 0.95;
    letter-spacing: -0.025em;
    font-weight: 300;
    color: var(--ivory);
    margin-bottom: var(--s-5);
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
}
.hero-immersive__title em {
    font-style: italic;
    font-weight: 400;
    color: #E8DEC0;
}
.hero-immersive__lede {
    font-family: var(--serif-display);
    font-style: italic;
    font-size: clamp(1.1rem, 1.5vw, 1.4rem);
    line-height: 1.55;
    color: rgba(246,241,230,0.95);
    max-width: 600px;
    margin-bottom: var(--s-6);
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}
.hero-immersive__eyebrow { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3); }

.hero-immersive__footer {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--s-5);
    border-top: 1px solid rgba(246,241,230,0.22);
    padding-top: var(--s-4);
    font-family: var(--sans);
    font-size: var(--fs-micro);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: rgba(246,241,230,0.85);
}
.hero-immersive__counter {
    font-family: var(--serif-display);
    font-style: italic;
    text-transform: none;
    letter-spacing: 0;
    font-size: 1.05rem;
    color: var(--ivory);
}
.hero-immersive__dots {
    justify-self: center;
    display: flex;
    gap: 10px;
}
.hero-immersive__dots .hero__dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.35);
    transition: all 0.4s var(--ease);
}
.hero-immersive__dots .hero__dot.is-active { background: var(--ivory); transform: scale(1.5); }
.hero-immersive__scroll {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    color: rgba(246,241,230,0.9);
}
.hero-immersive__scroll-line {
    display: inline-block;
    width: 32px; height: 1px;
    background: currentColor;
    position: relative;
    transition: width 0.45s var(--ease);
}
.hero-immersive__scroll-line::after {
    content: "";
    position: absolute;
    right: 0; top: -3px;
    width: 7px; height: 7px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(-45deg);
}
.hero-immersive__scroll:hover .hero-immersive__scroll-line { width: 48px; }


/* ----- 26.2 NUMBERS RIBBON — bande chiffres-clés ----- */
.numbers-band {
    background: var(--paper);
    border-bottom: 1px solid var(--olive-rule);
    padding: var(--s-7) 0;
}
.numbers-band__inner {
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: 0 clamp(var(--s-5), 4vw, var(--s-7));
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--s-5);
    align-items: end;
}
.numbers-band__item {
    text-align: center;
    position: relative;
    padding: 0 var(--s-3);
}
.numbers-band__item + .numbers-band__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 60%;
    background: var(--olive-rule);
}
.numbers-band__value {
    display: block;
    font-family: var(--serif-display);
    font-size: clamp(2.5rem, 4.5vw, 4rem);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.025em;
    color: var(--ink);
}
.numbers-band__value em {
    font-style: italic;
    color: var(--olive-deep);
}
.numbers-band__unit {
    display: block;
    margin-top: var(--s-3);
    font-family: var(--sans);
    font-size: var(--fs-micro);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--ink-mute);
}


/* ----- 26.3 WELCOME SPLIT — manifesto + photo verticale ----- */
.welcome-split {
    display: grid;
    grid-template-columns: 5fr 6fr;
    gap: clamp(var(--s-6), 5vw, var(--s-9));
    align-items: center;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 clamp(var(--s-5), 4vw, var(--s-7));
}
.welcome-split__text { max-width: 540px; }
.welcome-split__text .label { margin-bottom: var(--s-5); display: inline-flex; }
.welcome-split__title {
    font-family: var(--serif-display);
    font-size: clamp(2.5rem, 5vw, 4.25rem);
    line-height: 1;
    font-weight: 300;
    letter-spacing: -0.025em;
    margin-bottom: var(--s-6);
}
.welcome-split__title em { font-style: italic; color: var(--olive-deep); }
.welcome-split__body {
    font-family: var(--serif-text);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--ink-soft);
}
.welcome-split__body p + p { margin-top: var(--s-4); }
.welcome-split__sig {
    margin-top: var(--s-7);
    padding-top: var(--s-4);
    border-top: 1px solid var(--olive-rule);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--s-4);
    font-family: var(--sans);
    font-size: var(--fs-micro);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--ink-mute);
    flex-wrap: wrap;
}
.welcome-split__sig strong {
    display: block;
    font-family: var(--serif-display);
    font-style: italic;
    font-size: 1.4rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink);
    margin-bottom: 4px;
}
.welcome-split__visual {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
}
.welcome-split__visual img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 2.4s var(--ease);
}
.welcome-split__visual:hover img { transform: scale(1.04); }
.welcome-split__visual-caption {
    position: absolute;
    bottom: var(--s-4);
    left: var(--s-4);
    right: var(--s-4);
    font-family: var(--serif-display);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--ivory);
    text-shadow: 0 1px 8px rgba(0,0,0,0.4);
    z-index: 2;
}
.welcome-split__visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(26,24,20,0.45) 100%);
    pointer-events: none;
}


/* ----- 26.4 EDITORIAL ROOMS — chambres avec chiffres romains massifs ----- */
.editorial-rooms {
    display: grid;
    gap: var(--s-10);
}
.editorial-room {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) 6fr 5fr;
    gap: clamp(var(--s-5), 4vw, var(--s-7));
    align-items: center;
    padding-top: var(--s-7);
    border-top: 1px solid var(--olive-rule);
}
.editorial-room:first-child { border-top: 0; padding-top: 0; }
.editorial-room--reverse {
    grid-template-columns: minmax(140px, 1fr) 5fr 6fr;
}
.editorial-room--reverse .editorial-room__visual { order: 3; }
.editorial-room--reverse .editorial-room__body { order: 2; }

.editorial-room__num {
    font-family: var(--serif-display);
    font-style: italic;
    font-size: clamp(5rem, 11vw, 10rem);
    font-weight: 300;
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: var(--olive-rule);
    align-self: start;
    user-select: none;
}
.editorial-room__visual {
    aspect-ratio: 4 / 5;
    overflow: hidden;
}
.editorial-room__visual img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 2s var(--ease);
}
.editorial-room:hover .editorial-room__visual img { transform: scale(1.04); }
.editorial-room__body { max-width: 480px; }
.editorial-room__cat {
    font-family: var(--sans);
    font-size: var(--fs-micro);
    font-weight: 500;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: var(--s-4);
}
.editorial-room__title {
    font-family: var(--serif-display);
    font-size: clamp(2rem, 3.5vw, 3rem);
    line-height: 1;
    font-weight: 300;
    letter-spacing: -0.025em;
    margin-bottom: var(--s-5);
}
.editorial-room__title em {
    font-style: italic;
    color: var(--olive-deep);
}
.editorial-room__lede {
    font-family: var(--serif-display);
    font-style: italic;
    font-size: 1.15rem;
    color: var(--ink-soft);
    line-height: 1.5;
    margin-bottom: var(--s-5);
}
.editorial-room__meta {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: var(--s-3) var(--s-6);
    padding: var(--s-4) 0;
    border-top: 1px solid var(--olive-rule);
    border-bottom: 1px solid var(--olive-rule);
    margin-bottom: var(--s-5);
    width: fit-content;
}
.editorial-room__meta dt {
    font-family: var(--sans);
    font-size: var(--fs-micro);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: 2px;
}
.editorial-room__meta dd {
    font-family: var(--serif-display);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--ink);
}
.editorial-room__bottom {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-5);
    flex-wrap: wrap;
}
.editorial-room__price {
    display: flex;
    align-items: baseline;
    gap: var(--s-3);
}
.editorial-room__price-from {
    font-family: var(--sans);
    font-size: var(--fs-micro);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--ink-mute);
}
.editorial-room__price-value {
    font-family: var(--serif-display);
    font-size: 1.85rem;
    color: var(--ink);
    letter-spacing: -0.02em;
}


/* ----- 26.5 LOCALE GRID — aux alentours, tiles photo + overlay ----- */
.locale-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--s-4);
}
.locale-card {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--ink);
    display: block;
}
.locale-card img {
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0.92;
    transition: transform 2s var(--ease), opacity 0.6s var(--ease);
}
.locale-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 35%, rgba(26,24,20,0.88) 100%);
}
.locale-card:hover img { transform: scale(1.06); opacity: 1; }
.locale-card__body {
    position: absolute;
    inset: auto var(--s-4) var(--s-4) var(--s-4);
    z-index: 2;
    color: var(--ivory);
}
.locale-card__num {
    font-family: var(--serif-display);
    font-style: italic;
    font-size: 0.9rem;
    color: rgba(246,241,230,0.7);
    margin-bottom: 4px;
}
.locale-card__name {
    font-family: var(--serif-display);
    font-size: 1.35rem;
    font-weight: 400;
    line-height: 1.15;
    margin-bottom: 6px;
    color: var(--ivory);
}
.locale-card__dist {
    font-family: var(--sans);
    font-size: var(--fs-micro);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: rgba(246,241,230,0.78);
}


/* ----- 26.6 SIGNATURE — petite mention manuscrite ----- */
.signature {
    font-family: var(--serif-display);
    font-style: italic;
    font-size: 1.5rem;
    color: var(--olive-deep);
    line-height: 1;
}


/* ----- 26.7 Chapter intro — petite refonte pour titres centrés ----- */
.chapter--center {
    grid-template-columns: 1fr;
    text-align: center;
    border-top: 0;
    padding-top: 0;
}
.chapter--center .chapter__num {
    margin: 0 auto var(--s-4);
    align-items: center;
}
.chapter--center .chapter__head { max-width: 760px; margin: 0 auto; }
.chapter--center .chapter__lede { margin-left: auto; margin-right: auto; }


/* ----- 26.8 Responsive ajustements ----- */
@media (max-width: 1100px) {
    .numbers-band__inner { grid-template-columns: repeat(3, 1fr); gap: var(--s-6) var(--s-4); }
    .numbers-band__item:nth-child(4)::before,
    .numbers-band__item:nth-child(5)::before { display: none; }
    .locale-grid { grid-template-columns: repeat(3, 1fr); }
    .locale-card:nth-child(n+4) { aspect-ratio: 4 / 3; }
}

@media (max-width: 920px) {
    .hero-immersive { min-height: 78vh; }
    .hero-immersive__overlay {
        min-height: 78vh;
        padding: calc(var(--header-h) + var(--s-4)) var(--s-5) var(--s-5);
    }
    .hero-immersive__center { padding-bottom: var(--s-4); }
    .hero-immersive__eyebrow { font-size: 0.62rem; }
    .hero-immersive__eyebrow-stars { font-size: 0.78rem; }
    .hero-immersive__footer { grid-template-columns: 1fr 1fr; gap: var(--s-3) var(--s-4); }
    .hero-immersive__scroll { display: none; }

    .numbers-band__inner { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); }
    .numbers-band__item::before { display: none !important; }

    .welcome-split { grid-template-columns: 1fr; gap: var(--s-6); }
    .welcome-split__visual { aspect-ratio: 4 / 3; order: -1; }
    .welcome-split__text { max-width: none; }

    .editorial-rooms { gap: var(--s-8); }
    .editorial-room, .editorial-room--reverse { grid-template-columns: 72px 1fr; gap: var(--s-4) var(--s-5); }
    .editorial-room__num { font-size: 4.5rem; }
    .editorial-room__visual { grid-column: 1 / -1; aspect-ratio: 4 / 3; order: 2; margin-top: var(--s-4); }
    .editorial-room__body { grid-column: 2 / -1; order: 1; max-width: none; }
    .editorial-room--reverse .editorial-room__visual,
    .editorial-room--reverse .editorial-room__body { order: 0; }
    .editorial-room--reverse .editorial-room__visual { grid-column: 1 / -1; order: 2; }
    .editorial-room--reverse .editorial-room__body { grid-column: 2 / -1; order: 1; }
    .editorial-room__meta { grid-template-columns: 1fr 1fr; width: 100%; }

    .locale-grid { grid-template-columns: repeat(2, 1fr); }
    .locale-card:nth-child(n+4) { aspect-ratio: 3 / 4; }
}

@media (max-width: 640px) {
    .hero-immersive__title { font-size: clamp(2.75rem, 11vw, 3.75rem); }
    .hero-immersive__topbar { flex-wrap: wrap; }
    .numbers-band__inner { grid-template-columns: 1fr 1fr; }
    .editorial-room__meta { grid-template-columns: 1fr; }
    .locale-grid { grid-template-columns: 1fr; }
    .locale-card { aspect-ratio: 16 / 10 !important; }
}


/* ============================================================
   27. HÔTEL COMMERCIAL — sections orientées réservation
   Direction : faire envie au client, mettre en avant prix,
   services, avis, sans côté éditorial/livre.
   ============================================================ */

/* ----- 27.-1 WEATHER WIDGET WRAP — élargi et responsive ----- */
.weather-wrap {
    max-width: 920px;
    margin: 0 auto;
    width: 100%;
}
.weather-wrap .weatherwidget-io,
.weather-wrap iframe {
    width: 100% !important;
    max-width: 100% !important;
    display: block;
    border-radius: 4px;
    overflow: hidden;
}
@media (max-width: 920px) {
    .weather-wrap { max-width: 100%; }
}


/* ----- 27.0 INTRO TEXT — bloc paragraphes centré (welcome / restauration / découvrir) ----- */
.intro-text {
    font-family: var(--serif-text);
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--ink-soft);
    text-align: center;
    max-width: 680px;
    margin: 0 auto;
}
.intro-text p + p { margin-top: 1em; }
.intro-text p:last-child.intro-text__small {
    font-family: var(--serif-display);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--ink-mute);
    padding-top: var(--s-4);
    margin-top: var(--s-5);
    border-top: 1px solid var(--olive-rule);
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}
.intro-text--left {
    text-align: left;
    margin: 0;
    max-width: none;
}

/* ----- 27.1 SECTION HEAD — intro de section centrée ----- */
.section-head {
    max-width: 780px;
    margin: 0 auto var(--s-8);
    text-align: center;
}
.section-head--left {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
}
.section-head .label {
    margin-bottom: var(--s-4);
    display: inline-flex;
}
.section-head__title {
    font-family: var(--serif-display);
    font-size: clamp(2.25rem, 4.5vw, 4rem);
    line-height: 1;
    font-weight: 300;
    letter-spacing: -0.02em;
    margin-bottom: var(--s-5);
    color: var(--ink);
}
.section-head__title em {
    font-style: italic;
    color: var(--olive-deep);
}
.section-head__lede {
    font-family: var(--serif-display);
    font-style: italic;
    font-size: var(--fs-lede);
    color: var(--ink-soft);
    line-height: 1.5;
    max-width: 640px;
    margin: 0 auto;
}
.section-head--left .section-head__lede { margin: 0; }


/* ----- 27.2 BOOK BAR — bandeau de réservation rapide ----- */
.book-bar {
    background: var(--ink);
    color: var(--ivory);
    padding: var(--s-5) 0;
}
.book-bar__inner {
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: 0 clamp(var(--s-5), 4vw, var(--s-7));
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--s-5);
    align-items: center;
}
.book-bar__brand {
    font-family: var(--serif-display);
    font-style: italic;
    font-size: 1.25rem;
    color: #E8DEC0;
    line-height: 1.2;
    white-space: nowrap;
}
.book-bar__brand strong {
    font-family: var(--sans);
    font-weight: 500;
    font-style: normal;
    font-size: 0.62rem;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: rgba(246,241,230,0.65);
    display: block;
    margin-bottom: 4px;
}
.book-bar__trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-6);
    flex-wrap: wrap;
    font-family: var(--sans);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(246,241,230,0.75);
}
.book-bar__trust-item {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
}
.book-bar__trust-item .stars {
    color: #DDD0AE;
    letter-spacing: 0.12em;
    font-family: var(--serif-display);
    font-size: 0.9rem;
}
.book-bar__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    padding: 16px 28px;
    background: var(--ivory);
    color: var(--ink);
    transition: all 0.35s var(--ease);
    white-space: nowrap;
}
.book-bar__cta:hover { background: #E8DEC0; transform: translateY(-1px); }


/* ----- 27.3 ROOM CARDS — grille produit 3 colonnes ----- */
.room-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-5);
    align-items: stretch;
}
.room-card {
    background: var(--paper);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
    border: 1px solid var(--olive-rule);
    position: relative;
}
.room-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 60px -28px rgba(26,24,20,0.32);
}
.room-card__visual {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    position: relative;
}
.room-card__visual img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 1.8s var(--ease);
}
.room-card:hover .room-card__visual img { transform: scale(1.06); }
.room-card__badge {
    position: absolute;
    top: var(--s-4);
    left: var(--s-4);
    padding: 6px 14px;
    background: rgba(26,24,20,0.92);
    color: var(--ivory);
    font-family: var(--sans);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    z-index: 2;
    backdrop-filter: blur(4px);
}
.room-card__badge--premium {
    background: linear-gradient(135deg, #C39A48 0%, #8A6920 100%);
    color: #FFF8E1;
    font-weight: 600;
    letter-spacing: 0.26em;
    padding: 8px 14px 8px 12px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 2px;
    box-shadow:
        0 10px 24px -12px rgba(26, 24, 20, 0.75),
        0 0 0 1px rgba(255, 253, 229, 0.22) inset;
    backdrop-filter: none;
}
.room-card__badge--premium::before {
    content: "★";
    font-family: var(--serif-display);
    font-style: normal;
    font-size: 0.95rem;
    line-height: 1;
    color: #FFF1B3;
    letter-spacing: 0;
    transform: translateY(-1px);
}
.room-card__body {
    padding: var(--s-5);
    display: flex;
    flex-direction: column;
    flex: 1;
}
.room-card__name {
    font-family: var(--serif-display);
    font-size: 1.85rem;
    font-weight: 400;
    line-height: 1.05;
    color: var(--ink);
    letter-spacing: -0.015em;
    margin-bottom: var(--s-3);
}
.room-card__name em { font-style: italic; color: var(--olive-deep); }
.room-card__text {
    font-family: var(--serif-display);
    font-style: italic;
    color: var(--ink-soft);
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: var(--s-4);
    /* Aligne les blocs Specs entre les 3 cartes en réservant 4 lignes minimum
       pour la description (la plus longue de nos textes). */
    min-height: calc(4 * 1em * 1.5);
}
.room-card__specs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-3);
    padding: var(--s-4) 0;
    border-top: 1px solid var(--olive-rule);
    border-bottom: 1px solid var(--olive-rule);
    margin-bottom: var(--s-4);
}
.room-card__spec {
    text-align: center;
}
.room-card__spec dt {
    display: block;
    font-family: var(--sans);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: 4px;
}
.room-card__spec dd {
    font-family: var(--serif-display);
    font-style: italic;
    font-size: 0.98rem;
    color: var(--ink);
    line-height: 1.2;
}
.room-card__footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: var(--s-3);
}
.room-card__cta {
    font-family: var(--sans);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    padding: 14px 26px;
    border: 1px solid var(--ink);
    color: var(--ink);
    transition: all 0.35s var(--ease);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: transparent;
}
.room-card__cta:hover { background: var(--ink); color: var(--ivory); }
.room-card__cta--solid {
    background: var(--ink);
    color: var(--ivory);
}
.room-card__cta--solid:hover { background: transparent; color: var(--ink); }


/* ----- 27.3b AMENITIES TILES — grille élégante icône+titre ----- */
.amenities-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--s-4);
}
.amenity-tile {
    background: var(--paper);
    border: 1px solid var(--olive-rule);
    padding: var(--s-6) var(--s-5);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--s-3);
    min-height: 100%;
    transition:
        transform 0.4s var(--ease),
        background 0.4s var(--ease),
        border-color 0.4s var(--ease),
        box-shadow 0.4s var(--ease);
}
.amenity-tile:hover {
    transform: translateY(-3px);
    background: #FBF7EE;
    border-color: var(--olive);
    box-shadow: 0 18px 38px -22px rgba(26,24,20,0.22);
}
.amenity-tile__icon {
    width: 64px;
    height: 64px;
    color: var(--olive-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--s-2);
}
.amenity-tile__icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.25;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* Icônes PNG : on utilise la transparence du PNG comme masque + fond olive-deep
   → l'icône blanc d'origine devient olive-deep et reste lisible sur fond clair */
.amenity-tile__icon-img {
    width: 100%;
    height: 100%;
    background-color: var(--olive-deep);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    transition: background-color 0.35s var(--ease);
}
.amenity-tile:hover .amenity-tile__icon-img {
    background-color: var(--olive);
}
.amenity-tile__title {
    font-family: var(--serif-display);
    font-style: italic;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.15;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.amenity-tile__text {
    font-family: var(--serif-text);
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--ink-soft);
    margin-top: 2px;
}

@media (max-width: 1100px) {
    .amenities-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 760px) {
    .amenities-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
    .amenity-tile { padding: var(--s-5) var(--s-3); }
    .amenity-tile__icon { width: 36px; height: 36px; }
    .amenity-tile__title { font-size: 1rem; }
    .amenity-tile__text { font-size: 0.82rem; }
}
@media (max-width: 480px) {
    .amenities-grid { grid-template-columns: repeat(2, 1fr); }
}


/* ----- 27.4 SERVICE CARDS — grille moderne avec icônes ----- */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-5);
}
.service-card {
    background: var(--paper);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--olive-rule);
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
    min-height: 100%;
}
.service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 60px -28px rgba(26,24,20,0.28);
}
.service-card__image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--ivory-deep);
}
.service-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.6s var(--ease);
}
.service-card:hover .service-card__image img {
    transform: scale(1.06);
}
.service-card__body {
    padding: var(--s-5);
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    flex: 1;
    border-top: 2px solid var(--olive);
}
.service-card:hover .service-card__body {
    border-top-color: var(--olive-deep);
}
.service-card__icon {
    width: 36px;
    height: 36px;
    color: var(--olive-deep);
    margin-bottom: var(--s-2);
}
.service-card__icon svg {
    width: 100%; height: 100%;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.25;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.service-card__title {
    font-family: var(--serif-display);
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.15;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.service-card__text {
    font-family: var(--serif-text);
    font-size: 0.95rem;
    color: var(--ink-soft);
    line-height: 1.6;
}
.service-card__tag {
    margin-top: auto;
    padding-top: var(--s-3);
    font-family: var(--sans);
    font-size: 0.62rem;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--olive-deep);
    font-weight: 500;
}


/* ----- 27.5 Locale card sans numéro ----- */
.locale-card--clean .locale-card__num { display: none; }


/* ----- 27.6 Responsive ----- */
@media (max-width: 1100px) {
    .room-cards { grid-template-columns: repeat(2, 1fr); }
    .room-cards > .room-card:nth-child(3) {
        grid-column: 1 / -1;
        max-width: 540px;
        margin: 0 auto;
    }
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .book-bar__inner { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: var(--s-4); }
    .book-bar__trust { gap: var(--s-4); }
}

@media (max-width: 920px) {
    .section-head { margin-bottom: var(--s-6); }
    .room-cards { grid-template-columns: 1fr; gap: var(--s-5); }
    .room-cards > .room-card:nth-child(3) { max-width: none; margin: 0; }
    .services-grid { grid-template-columns: 1fr; }
    .book-bar__brand { white-space: normal; text-align: center; }
}

@media (max-width: 640px) {
    .room-card__cta { width: 100%; justify-content: center; }
}


/* ============================================================
   28b. CONTACT TABS — onglets interactifs (Nous trouver / S'y rendre / Nous contacter)
   ============================================================ */
.contact-tabs {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 clamp(var(--s-5), 4vw, var(--s-7));
}
.contact-tabs__nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-2);
    border-bottom: 1px solid var(--olive-rule);
    margin-bottom: var(--s-8);
}
.contact-tab-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-5) var(--s-4);
    font-family: var(--sans);
    font-size: var(--fs-micro);
    font-weight: 500;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--ink-mute);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.35s var(--ease), border-color 0.35s var(--ease), background 0.35s var(--ease);
    margin-bottom: -1px;
}
.contact-tab-btn:hover {
    color: var(--ink);
    background: var(--paper);
}
.contact-tab-btn.is-active {
    color: var(--ink);
    border-bottom-color: var(--olive-deep);
}
.contact-tab-btn__icon {
    width: 44px;
    height: 44px;
    background-color: var(--ink-mute);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    transition: background-color 0.35s var(--ease);
}
.contact-tab-btn:hover .contact-tab-btn__icon,
.contact-tab-btn.is-active .contact-tab-btn__icon {
    background-color: var(--olive-deep);
}

.contact-tab-panel {
    display: none;
    animation: fadePanel 0.4s var(--ease);
}
.contact-tab-panel.is-active { display: block; }

@keyframes fadePanel {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Carte coordonnées dans Nous trouver */
.contact-info-grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: clamp(var(--s-5), 4vw, var(--s-8));
    align-items: start;
}
.contact-info-card {
    background: var(--paper);
    border-top: 2px solid var(--olive-deep);
    padding: clamp(var(--s-5), 3vw, var(--s-7));
}
.contact-info-card h3 {
    font-family: var(--serif-display);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1;
    font-weight: 300;
    letter-spacing: -0.02em;
    margin-bottom: var(--s-5);
}
.contact-info-card h3 em { font-style: italic; color: var(--olive-deep); }
.contact-info-row {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: var(--s-4);
    padding: var(--s-4) 0;
    border-top: 1px solid var(--olive-rule);
    align-items: baseline;
}
.contact-info-row:first-of-type { border-top: 0; padding-top: 0; }
.contact-info-row__label {
    font-family: var(--sans);
    font-size: var(--fs-micro);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--ink-mute);
}
.contact-info-row__value {
    font-family: var(--serif-display);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--ink);
}
.contact-info-row__value a { color: inherit; }
.contact-info-row__value a:hover { color: var(--olive-deep); }

@media (max-width: 900px) {
    .contact-tabs__nav { grid-template-columns: 1fr; gap: 0; }
    .contact-tab-btn {
        flex-direction: row;
        justify-content: flex-start;
        gap: var(--s-4);
        padding: var(--s-4) var(--s-3);
        border-bottom: 1px solid var(--olive-rule);
    }
    .contact-tab-btn.is-active { border-bottom-color: var(--olive-deep); }
    .contact-tab-btn__icon { width: 32px; height: 32px; }
    .contact-info-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   28. PAGE HERO COVER — hero plein image pour pages intérieures
   ============================================================ */
.page-hero-cover {
    position: relative;
    width: 100%;
    min-height: 64vh;
    overflow: hidden;
    background: var(--ink);
    color: var(--ivory);
    isolation: isolate;
}
.page-hero-cover__image {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.page-hero-cover__image img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.page-hero-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        /* Bandeau d'assise sous le menu (démarcation header) */
        linear-gradient(180deg,
            rgba(26,24,20,0.72) 0%,
            rgba(26,24,20,0.38) 12%,
            rgba(26,24,20,0.1) 22%,
            transparent 36%),
        /* Vignette diagonale : assombrit la zone bas-gauche (titre, lede, meta) */
        linear-gradient(to bottom left,
            transparent 25%,
            rgba(26,24,20,0.45) 65%,
            rgba(26,24,20,0.82) 100%),
        /* Renforcement bas pour la meta */
        linear-gradient(180deg,
            transparent 60%,
            rgba(26,24,20,0.55) 100%);
    pointer-events: none;
}
.page-hero-cover__overlay {
    position: relative;
    z-index: 2;
    min-height: 64vh;
    display: grid;
    grid-template-rows: 1fr auto;
    padding: calc(var(--header-h) + var(--s-5)) clamp(var(--s-5), 4vw, var(--s-8)) var(--s-6);
    max-width: var(--container-wide);
    margin: 0 auto;
}

.page-hero-cover__center {
    align-self: end;
    max-width: 920px;
    padding-bottom: var(--s-5);
}
.page-hero-cover__crumbs {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    font-family: var(--sans);
    font-size: var(--fs-micro);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: rgba(246,241,230,0.7);
    margin-bottom: var(--s-4);
}
.page-hero-cover__crumbs a {
    color: inherit;
    transition: color 0.3s;
}
.page-hero-cover__crumbs a:hover { color: var(--ivory); }
.page-hero-cover__crumbs-sep { opacity: 0.5; }

.page-hero-cover__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    font-family: var(--sans);
    font-size: var(--fs-micro);
    font-weight: 500;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: rgba(246,241,230,0.88);
    margin-bottom: var(--s-5);
}
.page-hero-cover__eyebrow::before {
    content: "";
    display: inline-block;
    width: 40px; height: 1px;
    background: currentColor;
    opacity: 0.65;
}
.page-hero-cover__title {
    font-family: var(--serif-display);
    font-size: clamp(2.75rem, 7vw, 6.5rem);
    line-height: 0.95;
    letter-spacing: -0.025em;
    font-weight: 300;
    color: var(--ivory);
    margin-bottom: var(--s-5);
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
}
.page-hero-cover__title em {
    font-style: italic;
    font-weight: 400;
    color: #E8DEC0;
}
.page-hero-cover__lede {
    font-family: var(--serif-display);
    font-style: italic;
    font-size: clamp(1.05rem, 1.4vw, 1.3rem);
    line-height: 1.55;
    color: rgba(246,241,230,0.95);
    max-width: 580px;
    margin-bottom: 0;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}
.page-hero-cover__eyebrow,
.page-hero-cover__crumbs { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3); }
.page-hero-cover__meta dd { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3); }
.page-hero-cover__meta {
    border-top: 1px solid rgba(246,241,230,0.22);
    padding-top: var(--s-5);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-4);
}
.page-hero-cover__meta--3 { grid-template-columns: repeat(3, 1fr); }
.page-hero-cover__meta dt {
    font-family: var(--sans);
    font-size: var(--fs-micro);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: rgba(246,241,230,0.65);
    margin-bottom: 6px;
}
.page-hero-cover__meta dd {
    font-family: var(--serif-display);
    font-style: italic;
    font-size: 1.2rem;
    color: var(--ivory);
}

@media (max-width: 920px) {
    .page-hero-cover, .page-hero-cover__overlay { min-height: 58vh; }
    .page-hero-cover__crumbs { font-size: 0.62rem; }
    .page-hero-cover__meta,
    .page-hero-cover__meta--3 { grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--s-5); }
}
@media (max-width: 640px) {
    .page-hero-cover__title { font-size: clamp(2.25rem, 10vw, 3.5rem); }
    .page-hero-cover__meta,
    .page-hero-cover__meta--3 { grid-template-columns: 1fr 1fr; }
}


/* ============================================================
   29. COOKIE BANNER & PROMO BANNER — discrets, en bas d'écran
   ============================================================ */

.cookie-banner {
    position: fixed;
    left: var(--s-5);
    right: var(--s-5);
    bottom: var(--s-5);
    z-index: 60;
    max-width: 720px;
    margin: 0 auto;
    background: var(--ink);
    color: var(--ivory);
    padding: var(--s-5) var(--s-6);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--s-5);
    align-items: center;
    box-shadow: 0 24px 60px -20px rgba(26,24,20,0.5);
    transform: translateY(140%);
    opacity: 0;
    transition: transform 0.6s var(--ease), opacity 0.5s var(--ease);
}
.cookie-banner.is-visible {
    transform: translateY(0);
    opacity: 1;
}
.cookie-banner__text {
    font-family: var(--serif-text);
    font-size: 0.92rem;
    line-height: 1.55;
    color: rgba(246,241,230,0.92);
}
.cookie-banner__text strong {
    display: block;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--ivory);
    margin-bottom: 6px;
}
.cookie-banner__text a {
    color: var(--ivory);
    border-bottom: 1px solid rgba(246,241,230,0.4);
    padding-bottom: 1px;
    transition: border-color 0.3s;
}
.cookie-banner__text a:hover { border-bottom-color: var(--ivory); }
.cookie-banner__actions {
    display: flex;
    gap: var(--s-3);
    align-items: center;
    flex-wrap: wrap;
}
.cookie-banner__btn {
    font-family: var(--sans);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    padding: 12px 22px;
    background: var(--ivory);
    color: var(--ink);
    border: 1px solid var(--ivory);
    cursor: pointer;
    transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
    white-space: nowrap;
    min-width: 120px;
}
.cookie-banner__btn:hover { background: #E8DEC0; }
.cookie-banner__btn--ghost {
    background: transparent;
    color: var(--ivory);
    border: 1px solid rgba(246,241,230,0.45);
}
.cookie-banner__btn--ghost:hover {
    background: rgba(246,241,230,0.10);
    border-color: var(--ivory);
    color: var(--ivory);
}


/* PROMO BANNER — apparait en haut sous le header */
.promo-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 55;
    background: var(--olive-deep);
    color: var(--ivory);
    padding: 10px var(--s-5);
    transform: translateY(-100%);
    transition: transform 0.55s var(--ease);
    font-family: var(--sans);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}
.promo-banner.is-visible { transform: translateY(0); }
.promo-banner__inner {
    max-width: var(--container-wide);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: var(--s-4);
    justify-content: center;
    flex-wrap: wrap;
}
.promo-banner__pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    background: rgba(246,241,230,0.18);
    border-radius: 2px;
    font-weight: 500;
    font-size: 0.66rem;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--ivory);
}
.promo-banner__text {
    font-family: var(--serif-display);
    font-style: italic;
    font-size: 1rem;
    color: var(--ivory);
}
.promo-banner__text strong {
    font-family: var(--sans);
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0.02em;
}
.promo-banner__close {
    background: transparent;
    color: rgba(246,241,230,0.7);
    border: 0;
    padding: 4px 8px;
    font-family: var(--sans);
    font-size: 0.65rem;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.3s;
}
.promo-banner__close:hover { color: var(--ivory); }

/* Shift header down when promo is visible */
body.has-promo .header { top: 38px; }
body.has-promo .hero-immersive__overlay,
body.has-promo .page-hero-cover__overlay { padding-top: calc(var(--header-h) + var(--s-7)); }

@media (max-width: 720px) {
    .cookie-banner {
        grid-template-columns: 1fr;
        padding: var(--s-4) var(--s-5);
        gap: var(--s-3);
    }
    .cookie-banner__btn { width: 100%; text-align: center; justify-content: center; }
    .promo-banner { font-size: 0.7rem; }
    .promo-banner__text { font-size: 0.92rem; }
    .promo-banner__close { padding: 2px 6px; }
}


/* ============================================================
   30. WEATHER & SEASONS — climat provençal
   ============================================================ */

.weather-block {
    background: var(--paper);
    border-top: 1px solid var(--olive-rule);
    border-bottom: 1px solid var(--olive-rule);
}

.weather-today {
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--s-6) clamp(var(--s-5), 4vw, var(--s-7));
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--s-5);
    align-items: center;
    border-bottom: 1px solid var(--olive-rule);
}
.weather-today__loc {
    font-family: var(--sans);
    font-size: var(--fs-micro);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--ink-mute);
}
.weather-today__loc strong {
    display: block;
    font-family: var(--serif-display);
    font-size: 1.4rem;
    font-style: italic;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink);
    margin-bottom: 2px;
}
.weather-today__live {
    display: flex;
    align-items: baseline;
    gap: var(--s-4);
    justify-content: center;
}
.weather-today__temp {
    font-family: var(--serif-display);
    font-weight: 300;
    font-size: clamp(2.5rem, 4.5vw, 3.8rem);
    line-height: 1;
    color: var(--ink);
    letter-spacing: -0.025em;
}
.weather-today__temp em {
    font-style: italic;
    color: var(--olive-deep);
}
.weather-today__cond {
    font-family: var(--serif-display);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--ink-soft);
}
.weather-today__link {
    font-family: var(--sans);
    font-size: var(--fs-micro);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--ink-mute);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--olive-rule);
    transition: color 0.3s, border-color 0.3s;
}
.weather-today__link:hover { color: var(--ink); border-bottom-color: var(--ink); }

.seasons-grid {
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--s-7) clamp(var(--s-5), 4vw, var(--s-7));
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-5);
}
.season-card {
    text-align: left;
    padding: 0 var(--s-3);
    position: relative;
}
.season-card + .season-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10%;
    bottom: 10%;
    width: 1px;
    background: var(--olive-rule);
}
.season-card__name {
    font-family: var(--sans);
    font-size: var(--fs-micro);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: var(--s-3);
}
.season-card__temp {
    font-family: var(--serif-display);
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: var(--s-3);
}
.season-card__temp em {
    font-style: italic;
    color: var(--olive-deep);
    font-weight: 400;
}
.season-card__text {
    font-family: var(--serif-display);
    font-style: italic;
    font-size: 1rem;
    color: var(--ink-soft);
    line-height: 1.5;
}

@media (max-width: 920px) {
    .weather-today { grid-template-columns: 1fr; text-align: center; gap: var(--s-4); }
    .weather-today__link { justify-self: center; }
    .seasons-grid { grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-4); }
    .season-card:nth-child(3)::before,
    .season-card:nth-child(odd)::before { display: none; }
    .season-card:nth-child(n+3) { padding-top: var(--s-5); border-top: 1px solid var(--olive-rule); }
}
@media (max-width: 640px) {
    .seasons-grid { grid-template-columns: 1fr; }
    .season-card + .season-card::before { display: none; }
    .season-card:nth-child(n+2) { padding-top: var(--s-4); border-top: 1px solid var(--olive-rule); }
}


/* ═══════════════════════════════════════════════════════════
   PAGE VÉLO — Accueil Vélo / cyclistes
   ═══════════════════════════════════════════════════════════ */

/* ─── Badge label + texte intro (split) ──────────────────── */
.velo-label-block {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--s-6);
    align-items: center;
    max-width: 1080px;
    margin: 0 auto;
}
.velo-badge {
    width: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}
.velo-badge img {
    width: 100%;
    height: auto;
    display: block;
    /* léger relief discret pour l'élégance, sans dénaturer le logo officiel */
    filter: drop-shadow(0 14px 28px rgba(26,24,20,0.18));
}
.velo-label-block__text { padding-left: var(--s-2); }

@media (max-width: 760px) {
    .velo-label-block { grid-template-columns: 1fr; gap: var(--s-5); text-align: center; }
    .velo-label-block__text { padding-left: 0; }
    .velo-badge { width: 168px; }
}

/* ─── Grille des 4 services vélo ─────────────────────────── */
.velo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-4);
    margin-top: var(--s-6);
}
.velo-tile {
    background: var(--paper);
    border: 1px solid var(--olive-rule);
    padding: var(--s-6) var(--s-5);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--s-2);
    min-height: 100%;
    transition:
        transform 0.4s var(--ease),
        background 0.4s var(--ease),
        border-color 0.4s var(--ease),
        box-shadow 0.4s var(--ease);
}
.velo-tile:hover {
    transform: translateY(-3px);
    background: #FBF7EE;
    border-color: var(--olive);
    box-shadow: 0 18px 38px -22px rgba(26,24,20,0.22);
}
.velo-tile__icon {
    width: 64px;
    height: 64px;
    color: var(--olive-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--s-2);
}
.velo-tile__icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    fill: none;
}
.velo-tile__title {
    font-family: var(--serif-display);
    font-style: italic;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.15;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.velo-tile__text {
    font-family: var(--serif-text);
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--ink-soft);
    margin-top: 2px;
}

@media (max-width: 1100px) {
    .velo-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .velo-grid { grid-template-columns: 1fr; }
}

/* ─── Carte OSM des itinéraires cyclables ────────────────── */
.velo-map-wrap {
    margin-top: var(--s-6);
    background: var(--paper);
    border: 1px solid var(--olive-rule);
    padding: var(--s-3);
    border-radius: 4px;
    box-shadow: 0 22px 48px -28px rgba(26,24,20,0.18);
}
.velo-map-wrap iframe {
    display: block;
    background: var(--ivory);
}
.velo-map-caption {
    margin: var(--s-3) 0 var(--s-1);
    text-align: center;
    font-family: var(--sans);
    font-size: 0.82rem;
    color: var(--ink-mute);
    letter-spacing: 0.04em;
}
.velo-map-caption a {
    color: var(--olive-deep);
    text-decoration: none;
    border-bottom: 1px solid var(--olive-rule);
    padding-bottom: 1px;
    transition: color 0.25s, border-color 0.25s;
}
.velo-map-caption a:hover {
    color: var(--ink);
    border-color: var(--olive);
}

/* ─── Légende de la carte (CyclOSM + 2 tracés d'accès) ───── */
.velo-map-legend {
    margin-top: var(--s-4);
    padding: var(--s-3) var(--s-4);
    background: var(--paper);
    border: 1px solid var(--olive-rule);
    border-radius: 4px;
}
.velo-map-legend__title {
    font-family: var(--sans);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--olive-deep);
    margin-bottom: var(--s-3);
    text-align: center;
}
.velo-map-legend__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-5);
}
.velo-map-legend__heading {
    font-family: var(--sans);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: var(--s-2);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--olive-rule);
}
.velo-map-legend ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.velo-map-legend li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    font-family: var(--serif);
    font-size: 0.88rem;
    color: var(--ink);
    line-height: 1.35;
}
.velo-map-legend__line {
    display: inline-block;
    width: 30px;
    height: 4px;
    border-radius: 2px;
    flex-shrink: 0;
    background-size: 6px 4px;
    background-repeat: repeat-x;
}
/* Variante pointillée : simule les dashes (tirets blancs entre couleur) via gradient */
.velo-map-legend__line--dash {
    background:
        repeating-linear-gradient(
            to right,
            var(--c) 0,
            var(--c) 6px,
            transparent 6px,
            transparent 10px
        );
    background-color: transparent;
}
/* Ancien alias pour compatibilité (legacy) */
.velo-map-legend__line--dashed {
    background-size: 10px 4px;
    background-repeat: repeat-x;
}
/* Variante "bande cyclable / route partagée" : ligne pleine fine avec pointillés bleus */
.velo-map-legend__line--shared {
    background-image:
        linear-gradient(to right, #1B4DA0 60%, transparent 40%);
    background-size: 8px 4px;
}
@media (max-width: 720px) {
    .velo-map-legend__cols { grid-template-columns: 1fr; gap: var(--s-3); }
}

/* ─── Bloc GPS : intro + 2 boutons d'itinéraire ──────────── */
.velo-map-gps {
    margin-top: var(--s-4);
    padding: var(--s-3) var(--s-4);
    background: var(--paper);
    border: 1px solid var(--olive-rule);
    border-radius: 4px;
    text-align: center;
}
.velo-map-gps__lead {
    margin: 0 0 var(--s-3) 0;
    font-family: var(--sans);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--ink-mute);
}
.velo-map-gps__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    justify-content: center;
}
.velo-map-gps__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 12px 22px;
    background: var(--ink);
    color: var(--ivory);
    border: 1px solid var(--ink);
    border-radius: 2px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s;
}
.velo-map-gps__btn:hover,
.velo-map-gps__btn:focus-visible {
    background: var(--olive-deep);
    border-color: var(--olive-deep);
    color: var(--ivory);
    transform: translateY(-1px);
}
.velo-map-gps__btn svg {
    flex-shrink: 0;
}

/* ─── Grille des itinéraires (cards) ─────────────────────── */
.velo-routes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-4);
    margin-top: var(--s-6);
}
.velo-route {
    background: var(--paper);
    border: 1px solid var(--olive-rule);
    padding: var(--s-5);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    transition:
        transform 0.4s var(--ease),
        border-color 0.4s var(--ease),
        box-shadow 0.4s var(--ease);
}
.velo-route:hover {
    transform: translateY(-3px);
    border-color: var(--olive);
    box-shadow: 0 18px 38px -22px rgba(26,24,20,0.22);
}
.velo-route__head {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    flex-wrap: wrap;
}
.velo-route__head h3 {
    font-family: var(--serif-display);
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.15;
    margin: 0;
    letter-spacing: -0.01em;
}
.velo-route__pill {
    display: inline-block;
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 100px;
    font-weight: 600;
    line-height: 1;
}
.velo-route__pill--easy   { background: #DDE8D2; color: #3F5D2B; }
.velo-route__pill--medium { background: #EAE2C4; color: #6B5A2A; }
.velo-route__pill--hard   { background: #E8D4D0; color: #793933; }
.velo-route__meta {
    font-family: var(--sans);
    font-size: 0.82rem;
    color: var(--olive-deep);
    letter-spacing: 0.04em;
    margin: 0;
    border-left: 2px solid var(--olive-rule);
    padding-left: var(--s-2);
}
.velo-route__text {
    font-family: var(--serif-text);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--ink-soft);
    margin: 0;
}
.velo-routes__note {
    margin-top: var(--s-5);
    text-align: center;
    font-family: var(--serif-text);
    font-style: italic;
    font-size: 0.92rem;
    color: var(--ink-mute);
}

@media (max-width: 980px) {
    .velo-routes { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .velo-routes { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   LIGHTBOX / GALERIE PHOTOS (chambres)
   ═══════════════════════════════════════════════════════════ */
.room-gallery {
    margin-top: var(--s-6);
}
.room-gallery__main {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--olive-rule);
    background: var(--paper);
    aspect-ratio: 16 / 10;
    cursor: zoom-in;
}
.room-gallery__main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s var(--ease);
}
.room-gallery__main:hover img { transform: scale(1.02); }
.room-gallery__thumbs {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--s-2);
    margin-top: var(--s-2);
}
.room-gallery__thumb {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid var(--olive-rule);
    background: var(--paper);
    cursor: pointer;
    padding: 0;
    transition: border-color 0.25s, transform 0.25s;
}
.room-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s var(--ease);
}
.room-gallery__thumb:hover { border-color: var(--olive); }
.room-gallery__thumb:hover img { transform: scale(1.06); }
.room-gallery__thumb.is-active {
    border-color: var(--olive-deep);
    box-shadow: 0 0 0 2px var(--olive-deep) inset;
}

@media (max-width: 820px) {
    .room-gallery__thumbs { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 480px) {
    .room-gallery__thumbs { grid-template-columns: repeat(3, 1fr); }
}

/* ─── Lightbox overlay ──────────────────────────────────── */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(15,13,10,0.92);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    padding: var(--s-4);
}
.lightbox.is-open {
    opacity: 1;
    pointer-events: auto;
}
.lightbox__img {
    max-width: 92vw;
    max-height: 86vh;
    object-fit: contain;
    box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6);
    user-select: none;
}
.lightbox__btn {
    position: absolute;
    background: rgba(246,241,230,0.08);
    border: 1px solid rgba(246,241,230,0.35);
    color: var(--ivory);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.25s, transform 0.25s;
    backdrop-filter: blur(4px);
}
.lightbox__btn:hover {
    background: rgba(246,241,230,0.18);
    transform: scale(1.05);
}
.lightbox__btn svg { width: 22px; height: 22px; }
.lightbox__close { top: var(--s-4); right: var(--s-4); }
.lightbox__prev  { left: var(--s-4); top: 50%; transform: translateY(-50%); }
.lightbox__next  { right: var(--s-4); top: 50%; transform: translateY(-50%); }
.lightbox__prev:hover { transform: translateY(-50%) scale(1.05); }
.lightbox__next:hover { transform: translateY(-50%) scale(1.05); }
.lightbox__counter {
    position: absolute;
    bottom: var(--s-4);
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--sans);
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    color: rgba(246,241,230,0.7);
}

@media (max-width: 600px) {
    .lightbox__btn { width: 42px; height: 42px; }
    .lightbox__prev { left: var(--s-2); }
    .lightbox__next { right: var(--s-2); }
}
body.lightbox-open { overflow: hidden; }


/* ═══════════════════════════════════════════════════════════
   FOOTER — Bloc "Suivez-nous" (FB + Instagram)
   ═══════════════════════════════════════════════════════════ */
.footer__social {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-top: var(--s-4);
    flex-wrap: nowrap;
}
.footer__social-label {
    font-family: var(--sans);
    font-size: 0.68rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(246, 241, 230, 0.65);
    margin-right: var(--s-1);
    white-space: nowrap;
}
.footer__social-icons {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    flex-shrink: 0;
}
.footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(246, 241, 230, 0.08);
    color: var(--ivory);
    transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
    text-decoration: none;
    flex-shrink: 0;
}
.footer__social a:hover {
    background: var(--ivory);
    color: var(--ink);
    transform: translateY(-2px);
}
.footer__social svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* ═══════════════════════════════════════════════════════════
   PAGE ARRIVÉE TARDIVE — bloc code + vidéo + CTA téléphone
   ═══════════════════════════════════════════════════════════ */
.late-code {
    margin: var(--s-7) auto 0;
    max-width: 480px;
    padding: var(--s-5) var(--s-6);
    background: var(--paper);
    border: 1px solid var(--olive-rule);
    border-radius: 4px;
    text-align: center;
    box-shadow: 0 22px 48px -22px rgba(26,24,20,0.18);
}
.late-code__kicker {
    display: block;
    font-family: var(--sans);
    font-size: 0.78rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--olive-deep);
    margin-bottom: var(--s-3);
}
.late-code__value {
    display: block;
    font-family: var(--serif-display);
    font-size: 4rem;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: 0.15em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
@media (max-width: 600px) {
    .late-code__value { font-size: 3rem; }
}

.late-video {
    margin-top: var(--s-6);
    background: var(--ink);
    border-radius: 4px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    box-shadow: 0 30px 60px -25px rgba(26,24,20,0.35);
}
.late-video video {
    width: 100%;
    height: 100%;
    display: block;
    background: var(--ink);
    object-fit: cover;
}

.late-help {
    margin-top: var(--s-6);
    display: flex;
    justify-content: center;
}

/* ═══════════════════════════════════════════════════════════
   HEADER — Mini-icônes Facebook + Instagram (entre langues et Réserver)
   ═══════════════════════════════════════════════════════════ */
.header__social {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    white-space: nowrap;
}
.header__social-label {
    font-family: var(--sans);
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: currentColor;
    opacity: 0.6;
    margin-right: 4px;
    white-space: nowrap;
}
@media (max-width: 1180px) {
    /* Sur écran un peu étroit, on cache le texte et ne garde que les icônes */
    .header__social-label { display: none; }
}
.header__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: currentColor;
    background: transparent;
    border: 1px solid currentColor;
    opacity: 0.55;
    transition: opacity 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
    text-decoration: none;
    flex-shrink: 0;
}
.header__social a:hover {
    opacity: 1;
    background: currentColor;
    transform: translateY(-1px);
}
.header__social svg {
    width: 17px;
    height: 17px;
    display: block;
}
.header__social a:hover svg {
    color: var(--ivory);
    fill: currentColor;
}
/* Quand le header est en mode "light" (sur hero immersif) — icônes en ivoire */
.header.is-light:not(.is-scrolled) .header__social a:hover svg { color: var(--ink); }

@media (max-width: 920px) {
    /* Sur mobile : on garde le burger et les langues, on cache les icônes
       sociales du header pour ne pas surcharger — l'utilisateur les
       retrouve dans le footer. */
    .header__social { display: none; }
}


/* ═══════════════════════════════════════════════════════════
   BANDEAU LABEL ACCUEIL VÉLO (entre hero et bienvenue)
   ═══════════════════════════════════════════════════════════ */
.label-strip {
    background: var(--paper);
    border-top: 1px solid var(--olive-rule);
    border-bottom: 1px solid var(--olive-rule);
    padding: var(--s-3) 0;
}
.label-strip .wrap {
    display: flex;
    justify-content: center;
}
.label-strip__item {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    text-decoration: none;
    color: var(--ink);
    padding: 6px 14px;
    border-radius: 4px;
    transition: background 0.25s var(--ease);
}
.label-strip__item:hover {
    background: var(--ivory);
}
.label-strip__item img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    flex-shrink: 0;
}
.label-strip__txt {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    text-align: left;
}
.label-strip__kicker {
    font-family: var(--sans);
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--olive-deep);
    font-weight: 500;
}
.label-strip__name {
    font-family: var(--serif-display);
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--ink);
    margin-top: 2px;
    letter-spacing: 0.01em;
}
.label-strip__name sup {
    font-size: 0.55em;
    font-weight: 400;
    color: var(--olive);
    margin-left: 1px;
}
.label-strip__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: var(--s-3);
    padding-left: var(--s-3);
    border-left: 1px solid var(--olive-rule);
    font-family: var(--sans);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--olive-deep);
    font-weight: 500;
    transition: color 0.25s var(--ease);
}
.label-strip__cta svg {
    width: 14px;
    height: 14px;
    transition: transform 0.3s var(--ease);
}
.label-strip__item:hover .label-strip__cta {
    color: var(--ink);
}
.label-strip__item:hover .label-strip__cta svg {
    transform: translateX(4px);
}

@media (max-width: 640px) {
    .label-strip__cta {
        margin-left: 0;
        padding-left: 0;
        border-left: 0;
        font-size: 0.7rem;
        letter-spacing: 0.14em;
    }
    .label-strip__item {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
        gap: var(--s-2);
    }
    .label-strip__txt { text-align: center; align-items: center; }
}


/* ═══════════════════════════════════════════════════════════
   AVIS GOOGLE (section accueil — pattern issu d'Ô Dunes)
   ═══════════════════════════════════════════════════════════ */
.google-reviews-summary {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    background: var(--ivory);
    border: 1px solid var(--olive-rule);
    border-radius: 14px;
    padding: 20px 24px;
    margin-top: var(--s-6);
    margin-bottom: var(--s-6);
    box-shadow: 0 3px 14px rgba(26,24,20,0.06);
}
.google-logo {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(26,24,20,0.12);
}
.google-logo svg { width: 28px; height: 28px; }

.google-summary-text { flex: 1; min-width: 220px; }
.google-summary-text h3 {
    margin: 0 0 6px;
    font-family: var(--sans);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: 0.2px;
}
.google-summary-line {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.google-summary-text .gnote {
    font-family: var(--serif-display);
    font-size: 2.4rem;
    font-weight: 600;
    color: #fbbc04;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.google-summary-text .gstars { display: inline-flex; gap: 2px; }
.google-summary-text .gstars svg { width: 22px; height: 22px; color: #fbbc04; }
.google-summary-text .gstars svg.empty { color: #e0d7c2; }
.google-summary-text .gtotal {
    font-family: var(--sans);
    font-size: 0.9rem;
    color: var(--ink-mute);
}
/* Aligné sur .btn du site (sans border-radius arrondi, lettres espacées). */
.google-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 14px 24px;
    background: transparent;
    border: 1px solid var(--ink);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.35s var(--ease);
    white-space: nowrap;
}
.google-cta:hover { background: var(--ink); color: var(--ivory); }
.google-cta::after {
    content: '→';
    margin-left: 4px;
    transition: transform 0.3s var(--ease);
}
.google-cta:hover::after { transform: translateX(3px); }

@media (max-width: 720px) {
    .google-reviews-summary { padding: 14px; gap: 12px; flex-direction: column; text-align: center; }
    .google-summary-text { min-width: 0; }
    .google-summary-line { justify-content: center; }
    .google-summary-text .gnote { font-size: 1.8rem; }
    .google-summary-text .gstars svg { width: 18px; height: 18px; }
}

/* Flex + wrap + center : la dernière ligne (orpheline) reste centrée
   au lieu d'être collée à gauche comme avec grid auto-fit. */
.google-reviews-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    justify-content: center;
}
.greview-card {
    position: relative;
    background: var(--ivory);
    border: 1px solid var(--olive-rule);
    border-radius: 14px;
    padding: 20px 20px 18px;
    box-shadow: 0 3px 14px rgba(26,24,20,0.06);
    display: flex;
    flex-direction: column;
    flex: 0 0 calc((100% - 36px) / 3);
    max-width: calc((100% - 36px) / 3);
    min-height: 200px;
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.greview-card:hover {
    transform: translateY(-3px);
    border-color: var(--olive);
    box-shadow: 0 12px 28px -10px rgba(26,24,20,0.14);
}
@media (max-width: 980px) {
    .greview-card { flex: 0 0 calc((100% - 18px) / 2); max-width: calc((100% - 18px) / 2); }
}
@media (max-width: 600px) {
    .greview-card { flex: 0 0 100%; max-width: 100%; padding: 16px; }
}
.greview-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.greview-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--sage-soft) center/cover no-repeat;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sans);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--olive-deep);
    text-transform: uppercase;
}
.greview-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.greview-meta { flex: 1; min-width: 0; }
.greview-author {
    font-family: var(--sans);
    font-weight: 700;
    color: var(--ink);
    font-size: 0.92rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.greview-time {
    font-family: var(--sans);
    font-size: 0.75rem;
    color: var(--ink-mute);
    margin-top: 2px;
}
.greview-stars {
    display: flex;
    gap: 2px;
    margin-bottom: 8px;
}
.greview-stars svg { width: 18px; height: 18px; color: #fbbc04; }
.greview-stars svg.empty { color: #e0d7c2; }
.greview-text {
    color: var(--ink-soft);
    font-family: var(--serif-text);
    font-size: 0.92rem;
    line-height: 1.55;
    flex: 1;
}
.greview-badge {
    position: absolute;
    top: 10px;
    right: 12px;
    font-family: var(--sans);
    font-size: 0.65rem;
    font-weight: 800;
    color: #4285f4;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.greview-loading, .greview-empty {
    width: 100%;
    text-align: center;
    color: var(--ink-mute);
    font-style: italic;
    padding: 24px;
}