/* ============================================================
   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:       104px;

    --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-1) 0 var(--s-2);
    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-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);
}
/* page-late-arrival : retiré de la liste ci-dessus car la page a désormais
   un hero pleine largeur (.page-hero-cover) qui gère lui-même son padding
   sous le header fixe. Garder le padding créerait un trou crème au-dessus. */
/* 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); }

/* ----- Pages légales (CGV) : conteneur de texte élargi + bannière photo ----- */
/* Texte un peu plus large que le wrap--text standard (680px) pour les CGV. */
.wrap--legal { max-width: 880px; margin: 0 auto; }

/* Bannière photo en tête des pages CGV : se place sous le bandeau du menu
   (le body de ces pages a déjà padding-top: var(--header-h)). */
.legal-hero {
    position: relative;
    background-size: cover;
    background-position: center;
    padding: clamp(var(--s-8), 9vw, var(--s-10)) 0;
    text-align: center;
    color: var(--ivory);
    isolation: isolate;
}
.legal-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(26,24,20,0.45) 0%, rgba(26,24,20,0.62) 100%);
}
.legal-hero__inner {
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: 0 clamp(var(--s-5), 4vw, var(--s-7));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-3);
}
.legal-hero .label--line { color: var(--ivory); }
.legal-hero .label--line::before { background: var(--ivory); }
.legal-hero__title {
    font-family: var(--serif-display);
    font-weight: 400;
    font-size: clamp(2.1rem, 5vw, 3.2rem);
    line-height: 1.05;
    color: var(--ivory);
    margin: 0;
}

/* ------------------------------------------------------------
   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: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-4);
}
.amenity-tile {
    flex: 0 1 calc((100% - 4 * var(--s-4)) / 5);
    min-width: 0;
    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: 112px;
    height: 112px;
    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);
}
/* Icônes SVG inline (ex. mini frigo) : même comportement de teinte au survol
   que les icônes PNG masquées ci-dessus (currentColor olive-deep → olive). */
.amenity-tile:hover .amenity-tile__icon {
    color: var(--olive);
}
/* Picto chien : affiché en vraies couleurs (PNG d'origine) et non en masque
   monochrome, pour conserver le trait rouge (gros chien interdit) et la coche
   verte (petit chien accepté). Exception assumée vs les autres pictos olive. */
.amenity-tile__icon-photo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.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) {
    .amenity-tile { flex-basis: calc((100% - 3 * var(--s-4)) / 4); }
}
@media (max-width: 760px) {
    .amenities-grid { gap: var(--s-3); }
    .amenity-tile { padding: var(--s-5) var(--s-3); flex-basis: calc((100% - 2 * var(--s-3)) / 3); }
    .amenity-tile__icon { width: 64px; height: 64px; }
    .amenity-tile__title { font-size: 1rem; }
    .amenity-tile__text { font-size: 0.82rem; }
}
@media (max-width: 480px) {
    .amenity-tile { flex-basis: calc((100% - 1 * var(--s-3)) / 2); }
}


/* ----- 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);
}

/* ─── Variante « Arrivée tardive » : composition centrée verticalement
   et horizontalement, avec la carte du code du portail posée sur la photo.
   Scopée à .page-hero-cover--late : n'affecte aucune autre page. ───────── */
/* Voile sombre plus uniforme (la vignette bas-gauche de base ne couvre pas
   le centre où se trouve le texte centré). On assombrit l'ensemble pour
   faire ressortir le titre blanc et la carte du code. */
.page-hero-cover--late::after {
    background:
        linear-gradient(180deg,
            rgba(20,18,15,0.62) 0%,
            rgba(20,18,15,0.40) 30%,
            rgba(20,18,15,0.40) 62%,
            rgba(20,18,15,0.68) 100%),
        radial-gradient(ellipse 90% 70% at 50% 48%,
            rgba(20,18,15,0.30) 0%,
            rgba(20,18,15,0.52) 100%);
}
.page-hero-cover--late .page-hero-cover__center {
    align-self: center;
    justify-self: center;
    text-align: center;
    max-width: 720px;
    padding-bottom: 0;
}
.page-hero-cover--late .page-hero-cover__eyebrow { justify-content: center; }
.page-hero-cover--late .page-hero-cover__lede {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.page-hero-cover--late .late-code {
    margin-top: var(--s-6);
    box-shadow: 0 30px 60px -24px rgba(0,0,0,0.55);
}
/* Fin filet de séparation sous le menu, UNIQUEMENT sur la page arrivée
   tardive : détache visuellement la barre de navigation du contenu centré
   du hero (le menu paraissait « flotter » sur la photo). Disparaît au
   scroll quand le header devient crème opaque. */
body.page-late-arrival .header.is-light:not(.is-scrolled)::after {
    content: "";
    position: absolute;
    left: clamp(var(--s-5), 4vw, var(--s-7));
    right: clamp(var(--s-5), 4vw, var(--s-7));
    bottom: 0;
    height: 1px;
    background: rgba(246,241,230,0.22);
    pointer-events: none;
}
.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;
}

/* ----- Carrousel d'avis (1 avis à la fois) ----- */
.greviews-stage { position: relative; padding: 0 60px; }
.greviews-viewport { overflow: hidden; }
.greviews-track {
    display: flex;
    align-items: stretch;
    transition: transform 0.55s var(--ease);
    will-change: transform;
}
.greviews-slide { flex: 0 0 100%; min-width: 100%; padding: 4px; box-sizing: border-box; display: flex; }
/* En mode carrousel, la carte occupe toute la largeur (pas 1/3). */
.greviews-slide .greview-card {
    flex: 1 1 auto;
    max-width: none;
    min-height: 0;
    padding: 26px 28px 22px;
}
.greviews-slide .greview-author {
    display: flex;
    align-items: center;
    white-space: normal;
    overflow: visible;
}
.greview-check { width: 15px; height: 15px; margin-left: 5px; flex-shrink: 0; }
/* Texte tronqué (clamp) + Lire la suite */
.greviews-slide .greview-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
    flex: none;
}
.greviews-slide .greview-card.is-expanded .greview-text {
    -webkit-line-clamp: unset;
    overflow: visible;
}
.greview-more {
    align-self: flex-start;
    margin-top: 12px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--sans);
    font-size: 0.82rem;
    color: var(--olive-deep);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.25s var(--ease);
}
.greview-more:hover { color: var(--ink); }
/* Flèches latérales */
.greviews-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--ivory);
    border: 1px solid var(--olive-rule);
    color: var(--ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 12px rgba(26,24,20,0.10);
    transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
    z-index: 2;
}
.greviews-arrow svg { width: 22px; height: 22px; }
.greviews-arrow--prev { left: 0; }
.greviews-arrow--next { right: 0; }
.greviews-arrow:hover { background: #FBF7EE; border-color: var(--olive); }
/* Points de navigation */
.greviews-dots { display: flex; justify-content: center; gap: 9px; margin-top: 22px; }
.greviews-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--olive-rule);
    cursor: pointer;
    transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.greviews-dot.is-active { background: var(--olive-deep); transform: scale(1.35); }
@media (max-width: 600px) {
    .greviews-stage { padding: 0 46px; }
    .greviews-arrow { width: 38px; height: 38px; }
    .greviews-arrow svg { width: 18px; height: 18px; }
    .greviews-slide .greview-card { padding: 20px; }
}