/* =====================================================================
   RDV MAJUNGA - Feuille de style du site public
   ---------------------------------------------------------------------
   Organisation :
     1.  Variables et reglages de base
     2.  Utilitaires de mise en page
     3.  Titres de section
     4.  Boutons
     5.  Formulaires
     6.  En-tete et navigation
     7.  Hero
     8.  Recherche de disponibilite
     9.  Cartes (logements, services, avis...)
    10.  Galerie et visionneuse
    11.  Fiche logement
    12.  Tableaux (tarifs)
    13.  Reservation
    14.  Contact
    15.  Pied de page et bouton WhatsApp
    16.  Animations
    17.  Responsive
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. VARIABLES ET REGLAGES DE BASE
   ------------------------------------------------------------------ */
:root {
    /* Couleurs : ocean, sable, soleil couchant, vegetation */
    --ocean-900: #06323a;
    --ocean-800: #0a4550;
    --ocean-700: #0d5d6b;
    --ocean-600: #117285;
    --ocean-300: #7fc2ce;
    --ocean-100: #e2f1f4;

    --sun-600: #c96f1c;
    --sun-500: #e0872c;
    --sun-400: #f2a65a;
    --sun-100: #fdf0e0;

    --palm-700: #1c6b4d;
    --palm-100: #e4f2ea;

    --ink: #142a31;
    --ink-soft: #3f5a63;
    --muted: #6d858d;

    --sand-50: #fdfbf7;
    --sand-100: #f7f2e9;
    --sand-200: #efe7da;
    --line: #e3dacb;

    --white: #ffffff;
    --danger: #b4362f;
    --danger-100: #fbe9e7;
    --success: #1c6b4d;

    /* Typographie */
    --font-title: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Mesures */
    --radius: 14px;
    --radius-sm: 9px;
    --radius-lg: 22px;
    --container: 1180px;
    --header-h: 88px;

    --shadow-sm: 0 1px 2px rgba(6, 50, 58, .06), 0 2px 8px rgba(6, 50, 58, .05);
    --shadow-md: 0 4px 12px rgba(6, 50, 58, .07), 0 12px 30px rgba(6, 50, 58, .08);
    --shadow-lg: 0 18px 50px rgba(6, 50, 58, .16);

    --transition: 220ms cubic-bezier(.4, 0, .2, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 16px);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16.5px;
    line-height: 1.7;
    color: var(--ink-soft);
    background: var(--sand-50);
    overflow-x: hidden;
}

body.no-scroll { overflow: hidden; }

h1, h2, h3, h4 {
    font-family: var(--font-title);
    color: var(--ocean-900);
    line-height: 1.18;
    margin: 0 0 .6em;
    font-weight: 600;
    letter-spacing: -.01em;
}

h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a {
    color: var(--ocean-700);
    text-decoration: none;
    transition: color var(--transition);
}
a:hover { color: var(--sun-600); }

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

ul { margin: 0 0 1em; padding-left: 1.2em; }

:focus-visible {
    outline: 3px solid var(--sun-400);
    outline-offset: 2px;
    border-radius: 4px;
}

.icon {
    width: 1.25em;
    height: 1.25em;
    flex: none;
    vertical-align: -.28em;
}
.icon-sm { width: 1em; height: 1em; }
.icon-lg { width: 1.75em; height: 1.75em; }

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--ocean-800);
    color: #fff;
    padding: 12px 18px;
    z-index: 200;
}
.skip-link:focus { left: 8px; top: 8px; color: #fff; }

/* ---------------------------------------------------------------------
   2. UTILITAIRES DE MISE EN PAGE
   ------------------------------------------------------------------ */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 22px;
}
.container-narrow { max-width: 820px; }

.section { padding: clamp(56px, 8vw, 96px) 0; }
.section-sand { background: var(--sand-100); }
.section-ocean {
    background: linear-gradient(150deg, var(--ocean-800), var(--ocean-900));
    color: rgba(255, 255, 255, .82);
}
.section-ocean h2,
.section-ocean h3 { color: #fff; }

.grid { display: grid; gap: 26px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-3 { margin-top: 26px; }
.mt-4 { margin-top: 38px; }

.lead {
    font-size: 1.08rem;
    color: var(--ink-soft);
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .02em;
    background: var(--ocean-100);
    color: var(--ocean-800);
}
.badge-success { background: var(--palm-100); color: var(--palm-700); }
.badge-warning { background: var(--sun-100); color: var(--sun-600); }
.badge-danger  { background: var(--danger-100); color: var(--danger); }
.badge-muted   { background: var(--sand-200); color: var(--muted); }
.badge-info    { background: var(--ocean-100); color: var(--ocean-700); }

/* Messages */
.alert {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 15px 18px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    margin-bottom: 20px;
    font-size: .95rem;
}
.alert-success { background: var(--palm-100); border-color: #bcdfcd; color: #14503a; }
.alert-error   { background: var(--danger-100); border-color: #f0c4c0; color: #8a2b25; }
.alert-info    { background: var(--ocean-100); border-color: #bfdfe6; color: var(--ocean-800); }
.alert .icon { margin-top: .18em; }

/* ---------------------------------------------------------------------
   3. TITRES DE SECTION
   ------------------------------------------------------------------ */
.section-head {
    max-width: 660px;
    margin-bottom: 44px;
}
.section-head.is-center {
    margin-inline: auto;
    text-align: center;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--sun-600);
    margin-bottom: 14px;
}
.eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    background: var(--sun-400);
}
.is-center .eyebrow::after {
    content: "";
    width: 28px;
    height: 2px;
    background: var(--sun-400);
}
.section-ocean .eyebrow { color: var(--sun-400); }

.section-head p { margin-bottom: 0; }

/* ---------------------------------------------------------------------
   4. BOUTONS
   ------------------------------------------------------------------ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 26px;
    border: 1px solid transparent;
    border-radius: 999px;
    font: inherit;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-align: center;
    transition: transform var(--transition), background var(--transition),
                color var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
    background: var(--ocean-700);
    color: #fff;
    box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--ocean-800); color: #fff; box-shadow: var(--shadow-md); }

.btn-sun {
    background: var(--sun-500);
    color: #fff;
    box-shadow: var(--shadow-sm);
}
.btn-sun:hover { background: var(--sun-600); color: #fff; box-shadow: var(--shadow-md); }

.btn-outline {
    background: transparent;
    border-color: var(--ocean-700);
    color: var(--ocean-700);
}
.btn-outline:hover { background: var(--ocean-700); color: #fff; }

.btn-light {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .55);
    color: #fff;
    backdrop-filter: blur(4px);
}
.btn-light:hover { background: #fff; color: var(--ocean-800); border-color: #fff; }

.btn-ghost {
    background: var(--white);
    border-color: var(--line);
    color: var(--ink);
}
.btn-ghost:hover { border-color: var(--ocean-600); color: var(--ocean-700); }

.btn-sm { padding: 9px 18px; font-size: .87rem; }
.btn-block { display: flex; width: 100%; }

.btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
    font-size: .93rem;
}
.link-arrow .icon { transition: transform var(--transition); }
.link-arrow:hover .icon { transform: translateX(4px); }

/* ---------------------------------------------------------------------
   5. FORMULAIRES
   ------------------------------------------------------------------ */
.field { margin-bottom: 18px; }

.field label,
.form-label {
    display: block;
    font-size: .84rem;
    font-weight: 600;
    color: var(--ocean-900);
    margin-bottom: 7px;
    letter-spacing: .01em;
}
.field .hint {
    display: block;
    font-size: .8rem;
    color: var(--muted);
    margin-top: 5px;
}
.required { color: var(--danger); }

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="date"],
input[type="number"],
input[type="url"],
input[type="search"],
select,
textarea {
    width: 100%;
    padding: 12px 15px;
    font: inherit;
    font-size: .95rem;
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition), box-shadow var(--transition);
    appearance: none;
}
textarea { min-height: 130px; resize: vertical; line-height: 1.6; }

select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d858d' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 17px;
    padding-right: 38px;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--ocean-600);
    box-shadow: 0 0 0 3px rgba(17, 114, 133, .14);
}

input.is-invalid,
select.is-invalid,
textarea.is-invalid {
    border-color: var(--danger);
    background: #fffafa;
}
.field-error {
    display: block;
    color: var(--danger);
    font-size: .82rem;
    margin-top: 6px;
}

.checkbox-line {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .93rem;
}
.checkbox-line input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--ocean-700); }

.form-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: clamp(22px, 4vw, 38px);
    box-shadow: var(--shadow-sm);
}

/* ---------------------------------------------------------------------
   6. EN-TETE ET NAVIGATION
   ------------------------------------------------------------------ */
.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    height: var(--header-h);
    display: flex;
    align-items: center;
    z-index: 100;
    transition: background var(--transition), box-shadow var(--transition);
}
/* Trois colonnes : la marque calee a gauche, le menu au centre exact
   de l'ecran, les actions a droite. La barre occupe toute la largeur
   pour que le logo se rapproche du bord. */
.site-header .container {
    max-width: none;
    padding-inline: clamp(16px, 2.2vw, 32px);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 18px;
}
.site-header .brand { justify-self: start; }
.site-header .main-nav { justify-self: center; }
.site-header .header-actions { justify-self: end; }

/* Etat par defaut : superpose au hero. Un voile degrade garantit la
   lisibilite du menu, y compris au-dessus d'une photo claire. */
.site-header.is-transparent { background: transparent; }
.site-header.is-transparent::before {
    content: "";
    position: absolute;
    inset: 0 0 -24px 0;
    z-index: -1;
    background: linear-gradient(to bottom, rgba(6, 50, 58, .62), rgba(6, 50, 58, 0));
    pointer-events: none;
}
.site-header.is-solid {
    background: rgba(253, 251, 247, .96);
    backdrop-filter: blur(10px);
    box-shadow: 0 1px 0 var(--line), var(--shadow-sm);
}

.brand {
    display: flex;
    align-items: center;
    gap: 11px;
    font-family: var(--font-title);
    font-size: 1.32rem;
    font-weight: 600;
    color: var(--ocean-900);
    line-height: 1.1;
}
.brand:hover { color: var(--ocean-900); }
/* Logo complet, pose sur une plaque blanche : le dessin comme le
   texte du logo restent lisibles, y compris par-dessus une photo. */
.brand-logo {
    height: 54px;
    width: auto;
    display: block;
    background: #fff;
    border-radius: 12px;
    padding: 5px 9px;
    box-shadow: 0 2px 12px rgba(6, 50, 58, .16);
    transition: transform var(--transition), box-shadow var(--transition);
}

/* Nom de la residence, a cote du logo */
.brand-name {
    display: block;
    font-family: var(--font-title);
    font-size: 1.34rem;
    font-weight: 600;
    line-height: 1.12;
    white-space: nowrap;
}
.brand-name small {
    display: block;
    font-family: var(--font-body);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 2px;
}
.is-transparent .brand-name { color: #fff; text-shadow: 0 2px 12px rgba(4, 34, 40, .5); }
.is-transparent .brand-name small { color: rgba(255, 255, 255, .82); }
.brand:hover .brand-logo {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(6, 50, 58, .24);
}
.is-transparent .brand-logo { box-shadow: 0 6px 22px rgba(0, 0, 0, .3); }

/* Embleme carre, encore utilise par le menu mobile */
.brand-mark {
    width: 46px;
    height: 46px;
    flex: none;
    object-fit: contain;
    padding: 5px;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(6, 50, 58, .16);
}
.is-transparent .brand { color: #fff; }

.main-nav ul {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.main-nav a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    border-radius: 9px;
    font-size: .86rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: .01em;
    white-space: nowrap;
}
.main-nav a .icon {
    color: var(--ocean-600);
    transition: color var(--transition), transform var(--transition);
}
.main-nav a:hover .icon { transform: translateY(-1px); }
.main-nav a.active .icon { color: var(--sun-600); }
.is-transparent .main-nav a .icon { color: rgba(255, 255, 255, .8); }
.is-transparent .main-nav a.active .icon { color: var(--sun-400); }
.main-nav a:hover { color: var(--ocean-700); background: rgba(17, 114, 133, .07); }
.main-nav a.active { color: var(--ocean-700); }
/* Le lien est en flex : le trait actif est positionne, pour ne pas
   devenir un element de la ligne a cote de l'icone. */
.main-nav a { position: relative; }
.main-nav a.active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 1px;
    transform: translateX(-50%);
    width: 20px;
    height: 2px;
    background: var(--sun-500);
    border-radius: 2px;
}
.is-transparent .main-nav a { color: rgba(255, 255, 255, .92); }
.is-transparent .main-nav a:hover { color: #fff; background: rgba(255, 255, 255, .14); }
.is-transparent .main-nav a.active { color: #fff; }

.header-actions { display: flex; align-items: center; gap: 10px; }

/* Au-dessus d'une photo, le bouton secondaire passe en blanc */
.is-transparent .header-actions .btn-outline,
.is-transparent .header-actions .btn-ghost {
    border-color: rgba(255, 255, 255, .6);
    background: rgba(255, 255, 255, .12);
    color: #fff;
    backdrop-filter: blur(4px);
}
.is-transparent .header-actions .btn-outline:hover,
.is-transparent .header-actions .btn-ghost:hover {
    background: #fff;
    border-color: #fff;
    color: var(--ocean-800);
}

.nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    background: var(--white);
    color: var(--ink);
    border-radius: 11px;
    cursor: pointer;
}
.is-transparent .nav-toggle {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .5);
    color: #fff;
}

/* Panneau mobile */
.mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 150;
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--transition), visibility var(--transition);
}
.mobile-nav.is-open { visibility: visible; opacity: 1; }
.mobile-nav__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 50, 58, .55);
    backdrop-filter: blur(2px);
}
.mobile-nav__panel {
    position: absolute;
    inset: 0 0 0 auto;
    width: min(340px, 86vw);
    background: var(--sand-50);
    padding: 24px 24px 34px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--transition);
    box-shadow: var(--shadow-lg);
}
.mobile-nav.is-open .mobile-nav__panel { transform: translateX(0); }
.mobile-nav__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
.mobile-nav__close {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    background: var(--white);
    border-radius: 11px;
    cursor: pointer;
    color: var(--ink);
}
.mobile-nav a.mobile-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 4px;
    font-weight: 600;
    color: var(--ocean-900);
    border-bottom: 1px solid var(--line);
}
.mobile-nav a.mobile-link.active { color: var(--sun-600); }
.mobile-nav a.mobile-link > span {
    display: inline-flex;
    align-items: center;
    gap: 11px;
}
.mobile-nav a.mobile-link > span .icon { color: var(--ocean-600); }
.mobile-nav a.mobile-link.active > span .icon { color: var(--sun-600); }
.mobile-nav__cta { margin-top: 22px; display: grid; gap: 10px; }
.mobile-nav__contact {
    margin-top: 24px;
    font-size: .9rem;
    display: grid;
    gap: 10px;
}
.mobile-nav__contact a { display: flex; align-items: center; gap: 10px; color: var(--ink-soft); }

/* ---------------------------------------------------------------------
   7. HERO
   ------------------------------------------------------------------ */
.hero {
    position: relative;
    min-height: min(88vh, 780px);
    display: flex;
    align-items: flex-end;
    padding: calc(var(--header-h) + 60px) 0 64px;
    color: #fff;
    overflow: hidden;
}
.hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
}
.hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: heroZoom 18s ease-out forwards;
}
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to top, rgba(6, 50, 58, .9) 0%, rgba(6, 50, 58, .34) 48%, rgba(6, 50, 58, .18) 100%),
        linear-gradient(105deg, rgba(6, 50, 58, .58), transparent 62%);
}
.hero__content { max-width: 720px; }
.hero h1 {
    color: #fff;
    margin-bottom: 18px;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .28);
}
.hero__subtitle {
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: rgba(255, 255, 255, .9);
    max-width: 580px;
    margin-bottom: 30px;
}
.hero__tag {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 16px 7px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .3);
    backdrop-filter: blur(6px);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .04em;
    margin-bottom: 20px;
}

/* ---------------------------------------------------------------------
   7 bis. CARROUSEL D'EN-TETE
   Couche d'images en fondu enchaine + pagination.
   Utilise aussi bien dans .hero (accueil) que dans .page-hero.
   ------------------------------------------------------------------ */
.hero-slider {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    background: var(--ocean-900);
}

/* Les photos se remplacent par un fondu court, declenche uniquement
   par le visiteur : aucun mouvement ne demarre tout seul. */
.hero-slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 320ms ease, visibility 0s linear 320ms;
}
.hero-slide.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 320ms ease, visibility 0s;
}
.hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Les photos d'interieur se lisent mieux cadrees legerement
       au-dessus du centre : on garde le volume de la piece plutot
       que le sol. */
    object-position: center 55%;
}

/* La couche d'images est en arriere-plan (z-index negatif) : sans
   contexte d'empilement, elle passerait DERRIERE le degrade de fond
   de la section. `isolation` la fait remonter juste au-dessus, tout
   en conservant ce degrade comme couleur de repli si aucune photo
   n'est disponible. */
.page-hero.has-slider { isolation: isolate; }

/* Voile de lecture au-dessus des photos des pages interieures :
   soutenu a gauche, sous le texte, puis degage vers la droite pour
   laisser voir la photo. */
.page-hero.has-slider::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(100deg, rgba(6, 50, 58, .88) 0%, rgba(6, 50, 58, .58) 46%, rgba(6, 50, 58, .14) 100%),
        linear-gradient(to top, rgba(6, 50, 58, .5), rgba(6, 50, 58, 0) 62%);
}

/* Le voile etant volontairement leger a droite, le texte porte sa
   propre ombre pour rester lisible quelle que soit la photo. */
.page-hero.has-slider h1,
.page-hero.has-slider p,
.page-hero.has-slider .breadcrumb { text-shadow: 0 2px 16px rgba(4, 34, 40, .55); }

/* --- Indicateurs et fleches --------------------------------------- */

/* Fleches posees sur les bords, a mi-hauteur de l'en-tete */
.hero-arrow {
    position: absolute;
    top: 50%;
    z-index: 4;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    transform: translateY(-50%);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    background: rgba(6, 50, 58, .3);
    backdrop-filter: blur(6px);
    color: #fff;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.hero-arrow:hover {
    background: #fff;
    border-color: #fff;
    color: var(--ocean-800);
}
.hero-arrow--prev { left: 22px; }
.hero-arrow--next { right: 22px; }

/* Indicateurs : une barre fine par photo, centrees sous l'en-tete */
.hero-pager {
    position: absolute;
    z-index: 4;
    left: 0;
    right: 0;
    bottom: var(--pager-bottom, 24px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    pointer-events: none;
}
.hero-pager > * { pointer-events: auto; }

.hero-pager__caption {
    margin: 0;
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .75);
    text-align: center;
    text-shadow: 0 2px 12px rgba(4, 34, 40, .6);
}

.hero-indicators {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

.hero-indicator {
    width: 34px;
    height: 4px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .45);
    cursor: pointer;
    transition: background 250ms ease, width 250ms ease;
}
.hero-indicator::before {
    /* Zone de clic confortable sans agrandir la barre */
    content: "";
    position: absolute;
    inset: -12px -4px;
}
.hero-indicator { position: relative; }
.hero-indicator:hover { background: rgba(255, 255, 255, .8); }
.hero-indicator.is-active {
    width: 52px;
    background: #fff;
}

/* Placement selon le type d'en-tete */
.hero { --pager-bottom: 96px; }

/* Un en-tete illustre est plus haut qu'un simple bandeau : la photo
   n'est plus reduite a une mince bande et le texte se cale au centre. */
.page-hero.has-slider {
    --pager-bottom: 22px;
    padding-bottom: 82px;
    min-height: min(52vh, 440px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* En-tete suivi d'un bloc de recherche : la pagination remonte
   au-dessus de la carte qui chevauche le bas de la section. */
.page-hero.has-search {
    --pager-bottom: 88px;
    padding-bottom: 132px;
}

/* Bandeau simple pour les pages interieures */
.page-hero {
    position: relative;
    padding: calc(var(--header-h) + 66px) 0 60px;
    background: linear-gradient(150deg, var(--ocean-800), var(--ocean-900));
    color: rgba(255, 255, 255, .82);
    overflow: hidden;
}
.page-hero::after {
    content: "";
    position: absolute;
    right: -120px;
    top: -140px;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(242, 166, 90, .3), transparent 62%);
}
.page-hero h1 { color: #fff; margin-bottom: 12px; }
.page-hero p { max-width: 620px; margin-bottom: 0; }
.page-hero .container { position: relative; z-index: 1; }

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: .82rem;
    color: rgba(255, 255, 255, .68);
    margin-bottom: 16px;
}
.breadcrumb a { color: rgba(255, 255, 255, .9); }
.breadcrumb a:hover { color: var(--sun-400); }
.breadcrumb span::after { content: "/"; margin-left: 8px; opacity: .5; }
.breadcrumb span:last-child::after { content: ""; }

/* ---------------------------------------------------------------------
   8. RECHERCHE DE DISPONIBILITE
   ------------------------------------------------------------------ */
.availability-bar {
    position: relative;
    z-index: 5;
    margin-top: -46px;
}
.availability-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 22px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--line);
}
.availability-card form {
    display: grid;
    grid-template-columns: repeat(4, 1fr) auto;
    gap: 16px;
    align-items: end;
}
.availability-card .field { margin-bottom: 0; }
.availability-card .btn { height: 47px; white-space: nowrap; }

/* ---------------------------------------------------------------------
   9. CARTES
   ------------------------------------------------------------------ */
.card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--ocean-300);
}

.card__media {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--sand-200);
}
.card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms cubic-bezier(.2, .6, .2, 1);
}
.card:hover .card__media img { transform: scale(1.06); }

.card__badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(255, 255, 255, .93);
    color: var(--ocean-800);
    padding: 6px 13px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .02em;
    backdrop-filter: blur(4px);
}
.card__price {
    position: absolute;
    right: 14px;
    bottom: 14px;
    background: rgba(6, 50, 58, .85);
    color: #fff;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 600;
    backdrop-filter: blur(4px);
}
.card__price small { font-weight: 400; opacity: .8; }

.card__body {
    padding: 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 12px;
}
.card__body h3 { margin: 0; }
.card__body p { font-size: .92rem; margin: 0; }

.card__specs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    font-size: .84rem;
    color: var(--muted);
    padding-top: 2px;
}
.card__specs span { display: inline-flex; align-items: center; gap: 6px; }
.card__specs .icon { color: var(--ocean-600); }

.card__footer {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--sand-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Carte service */
.service-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px 24px;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    height: 100%;
}
.service-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--ocean-300);
}
.service-card__icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: var(--ocean-100);
    color: var(--ocean-700);
    margin-bottom: 16px;
    transition: background var(--transition), color var(--transition);
}
.service-card:hover .service-card__icon { background: var(--ocean-700); color: #fff; }
.service-card h3 { margin-bottom: 8px; font-size: 1.12rem; }
.service-card p { font-size: .92rem; margin: 0; }

/* Carte avec image (page services) */
.service-tile {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    min-height: 260px;
    display: flex;
    align-items: flex-end;
    color: #fff;
}
.service-tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms cubic-bezier(.2, .6, .2, 1);
}
.service-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(6, 50, 58, .92), rgba(6, 50, 58, .12) 70%);
}
.service-tile:hover img { transform: scale(1.05); }
.service-tile__body { position: relative; z-index: 1; padding: 24px; }
.service-tile h3 { color: #fff; margin-bottom: 6px; }
.service-tile p { font-size: .9rem; color: rgba(255, 255, 255, .86); margin: 0; }

/* Points forts */
.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 13px;
}
.feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: .95rem;
}
.feature-list .icon {
    color: var(--palm-700);
    background: var(--palm-100);
    border-radius: 50%;
    padding: 4px;
    width: 1.65em;
    height: 1.65em;
    flex: none;
}
.section-ocean .feature-list .icon { background: rgba(255, 255, 255, .14); color: var(--sun-400); }

/* Chiffres cles */
.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.stat {
    text-align: center;
    padding: 22px 14px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--radius);
}
.stat strong {
    display: block;
    font-family: var(--font-title);
    font-size: 2.2rem;
    color: #fff;
    line-height: 1;
    margin-bottom: 6px;
}
.stat span {
    font-size: .82rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .68);
}

/* Avis */
.review-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px 26px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
}
.review-card__quote {
    position: absolute;
    top: 18px;
    right: 22px;
    color: var(--sand-200);
    width: 40px;
    height: 40px;
}
.review-card blockquote {
    margin: 0;
    font-size: .96rem;
    color: var(--ink-soft);
    position: relative;
    z-index: 1;
}
.review-card footer {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--sand-200);
    font-size: .88rem;
}
.review-card footer strong { color: var(--ocean-900); display: block; }
.review-card footer span { color: var(--muted); font-size: .84rem; }

.stars { display: inline-flex; gap: 3px; color: var(--sun-500); }
.stars .is-empty { color: var(--sand-200); }

/* Bloc image + texte */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(30px, 5vw, 64px);
    align-items: center;
}
.split__media {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    aspect-ratio: 4 / 3;
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__media--stack { aspect-ratio: auto; box-shadow: none; overflow: visible; }
.split__media--stack .split__main {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    aspect-ratio: 4 / 3;
}
.split__media--stack .split__inset {
    position: absolute;
    right: -18px;
    bottom: -28px;
    width: 47%;
    border-radius: var(--radius);
    overflow: hidden;
    border: 6px solid var(--sand-50);
    box-shadow: var(--shadow-md);
    aspect-ratio: 1;
}
.split__media--stack .split__inset img { width: 100%; height: 100%; object-fit: cover; }

/* Encart de contact rapide */
.contact-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.contact-strip a,
.contact-strip div {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink-soft);
}
.contact-strip a:hover { border-color: var(--ocean-300); box-shadow: var(--shadow-sm); }
.contact-strip .icon {
    color: var(--ocean-700);
    background: var(--ocean-100);
    border-radius: 12px;
    padding: 9px;
    width: 44px;
    height: 44px;
    flex: none;
}
.contact-strip strong { display: block; color: var(--ocean-900); font-size: .95rem; }
.contact-strip small { color: var(--muted); font-size: .8rem; }

/* Appel a l'action */
.cta-band {
    background: linear-gradient(135deg, var(--ocean-700), var(--ocean-900));
    border-radius: var(--radius-lg);
    padding: clamp(34px, 5vw, 56px);
    color: rgba(255, 255, 255, .85);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}
.cta-band::after {
    content: "";
    position: absolute;
    right: -80px;
    bottom: -110px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(242, 166, 90, .35), transparent 65%);
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; margin-bottom: 8px; }
.cta-band p { margin: 0; max-width: 520px; }

/* ---------------------------------------------------------------------
   10. GALERIE ET VISIONNEUSE
   ------------------------------------------------------------------ */
.gallery-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 32px;
}
.gallery-filters button {
    padding: 9px 20px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--white);
    color: var(--ink-soft);
    font: inherit;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
}
.gallery-filters button:hover { border-color: var(--ocean-600); color: var(--ocean-700); }
.gallery-filters button.is-active {
    background: var(--ocean-700);
    border-color: var(--ocean-700);
    color: #fff;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
    /* Les photos larges ne tombent pas toujours en debut de ligne :
       le remplissage dense evite les trous dans la mosaique. */
    grid-auto-flow: dense;
}
.gallery-item {
    position: relative;
    display: block;
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--sand-200);
    cursor: zoom-in;
    border: 0;
    padding: 0;
}
.gallery-item:nth-child(6n + 1) { grid-column: span 2; aspect-ratio: 8 / 3; }
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms cubic-bezier(.2, .6, .2, 1);
}
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item figcaption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 26px 16px 14px;
    background: linear-gradient(to top, rgba(6, 50, 58, .88), transparent);
    color: #fff;
    font-size: .87rem;
    font-weight: 600;
    text-align: left;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--transition), transform var(--transition);
}
.gallery-item:hover figcaption,
.gallery-item:focus-visible figcaption { opacity: 1; transform: translateY(0); }

/* Visionneuse plein ecran */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(6, 30, 35, .95);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.lightbox.is-open { display: flex; }
.lightbox__figure {
    max-width: min(1100px, 92vw);
    max-height: 86vh;
    margin: 0;
    text-align: center;
}
.lightbox img {
    max-width: 100%;
    max-height: 78vh;
    width: auto;
    margin-inline: auto;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}
.lightbox figcaption {
    color: rgba(255, 255, 255, .82);
    font-size: .92rem;
    margin-top: 14px;
}
.lightbox__btn {
    position: absolute;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .1);
    color: #fff;
    cursor: pointer;
    transition: background var(--transition);
}
.lightbox__btn:hover { background: rgba(255, 255, 255, .24); }
.lightbox__close { top: 22px; right: 22px; }
.lightbox__prev { left: 22px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 22px; top: 50%; transform: translateY(-50%); }
.lightbox__counter {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, .7);
    font-size: .85rem;
    letter-spacing: .08em;
}

/* ---------------------------------------------------------------------
   11. FICHE LOGEMENT
   ------------------------------------------------------------------ */
.room-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 42px;
    align-items: start;
}

.room-gallery {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 12px;
    margin-bottom: 40px;
}
.room-gallery__main,
.room-gallery__side button {
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--sand-200);
    border: 0;
    padding: 0;
    cursor: zoom-in;
    display: block;
    width: 100%;
}
.room-gallery__main { aspect-ratio: 3 / 2; }
/* Un seul visuel disponible : il occupe toute la largeur */
.room-gallery--single { grid-template-columns: 1fr; }
.room-gallery--single .room-gallery__main { aspect-ratio: 21 / 9; }
.room-gallery__main img,
.room-gallery__side img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms; }
.room-gallery__main:hover img,
.room-gallery__side button:hover img { transform: scale(1.05); }
.room-gallery__side { display: grid; gap: 12px; }
.room-gallery__side button { aspect-ratio: 3 / 2; position: relative; }
.room-gallery__more {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(6, 50, 58, .68);
    color: #fff;
    font-weight: 600;
    font-size: .95rem;
}

/* Photos supplementaires : accessibles a la visionneuse sans occuper
   d'espace dans la mise en page. */
.lightbox-extra {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.room-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 14px;
    margin: 28px 0 34px;
    padding: 22px;
    background: var(--sand-100);
    border-radius: var(--radius);
    border: 1px solid var(--line);
}
.room-fact { text-align: center; }
.room-fact .icon { color: var(--ocean-600); margin-bottom: 6px; }
.room-fact strong { display: block; color: var(--ocean-900); font-size: 1.02rem; }
.room-fact span { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

.amenities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 14px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.amenities-grid li {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 15px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-size: .92rem;
}
.amenities-grid .icon { color: var(--ocean-600); }

.booking-box {
    position: sticky;
    top: calc(var(--header-h) + 20px);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px;
    box-shadow: var(--shadow-md);
}
.booking-box__price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding-bottom: 18px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--sand-200);
}
.booking-box__price strong {
    font-family: var(--font-title);
    font-size: 1.9rem;
    color: var(--ocean-900);
}
.booking-box__price span { color: var(--muted); font-size: .9rem; }
.booking-box ul {
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
    font-size: .88rem;
    display: grid;
    gap: 10px;
    color: var(--muted);
}
.booking-box ul li { display: flex; align-items: center; gap: 9px; }

.availability-result {
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    font-size: .9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}
.availability-result.is-free { background: var(--palm-100); color: var(--palm-700); }
.availability-result.is-busy { background: var(--danger-100); color: var(--danger); }

/* ---------------------------------------------------------------------
   12. TABLEAUX (TARIFS)
   ------------------------------------------------------------------ */
.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
}
table.rates {
    width: 100%;
    border-collapse: collapse;
    min-width: 620px;
}
table.rates th,
table.rates td {
    padding: 16px 20px;
    text-align: left;
    border-bottom: 1px solid var(--sand-200);
    font-size: .94rem;
}
table.rates thead th {
    background: var(--sand-100);
    color: var(--ocean-900);
    font-size: .78rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    font-weight: 700;
}
table.rates tbody tr:last-child td { border-bottom: 0; }
table.rates tbody tr:hover { background: var(--sand-50); }
table.rates td.price {
    font-weight: 700;
    color: var(--ocean-800);
    white-space: nowrap;
}
table.rates .room-name { font-weight: 600; color: var(--ocean-900); }
table.rates .num { text-align: center; }

.info-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 20px;
}
.info-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-left: 3px solid var(--ocean-600);
    border-radius: var(--radius-sm);
    padding: 20px 22px;
}
.info-card h4 { margin-bottom: 6px; color: var(--ocean-900); }
.info-card p { font-size: .9rem; margin: 0; }

/* ---------------------------------------------------------------------
   13. RESERVATION
   ------------------------------------------------------------------ */
.reservation-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 38px;
    align-items: start;
}
.summary-box {
    position: sticky;
    top: calc(var(--header-h) + 20px);
    background: var(--sand-100);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px;
}
.summary-box h3 { font-size: 1.15rem; }
.summary-list {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
    display: grid;
    gap: 11px;
    font-size: .91rem;
}
.summary-list li {
    display: flex;
    justify-content: space-between;
    gap: 14px;
}
.summary-list li span:last-child { font-weight: 600; color: var(--ocean-900); text-align: right; }

/* Variante simple : icone puis texte, alignes a gauche */
.summary-list.is-plain li {
    justify-content: flex-start;
    gap: 9px;
    align-items: center;
}
.summary-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    font-family: var(--font-title);
    font-size: 1.3rem;
    color: var(--ocean-900);
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
}
.form-grid .full { grid-column: 1 / -1; }

.fieldset-title {
    font-family: var(--font-title);
    font-size: 1.15rem;
    color: var(--ocean-900);
    margin: 6px 0 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--sand-200);
}
.fieldset-title:not(:first-child) { margin-top: 28px; }

/* Confirmation */
.confirmation {
    text-align: center;
    max-width: 640px;
    margin-inline: auto;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: clamp(32px, 6vw, 56px);
    box-shadow: var(--shadow-md);
}
.confirmation__check {
    width: 78px;
    height: 78px;
    margin: 0 auto 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--palm-100);
    color: var(--palm-700);
}
.confirmation__check .icon { width: 40px; height: 40px; }
.reference-box {
    margin: 26px 0;
    padding: 20px;
    background: var(--sand-100);
    border: 1px dashed var(--ocean-300);
    border-radius: var(--radius);
}
.reference-box span {
    display: block;
    font-size: .78rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
}
.reference-box strong {
    font-family: var(--font-title);
    font-size: 1.7rem;
    color: var(--ocean-800);
    letter-spacing: .04em;
}
.steps {
    display: grid;
    gap: 18px;
    text-align: left;
    margin-top: 28px;
    counter-reset: step;
}
.steps li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    font-size: .93rem;
    list-style: none;
}
.steps li::before {
    counter-increment: step;
    content: counter(step);
    flex: none;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--ocean-700);
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
}
.steps { padding-left: 0; }

/* ---------------------------------------------------------------------
   13 bis. ESPACE CLIENT (connexion, inscription, suivi)
   ------------------------------------------------------------------ */
.auth-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--sand-100);
    border-bottom: 1px solid var(--line);
}
.auth-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 17px 14px;
    font-size: .92rem;
    font-weight: 600;
    color: var(--muted);
    border-bottom: 3px solid transparent;
    transition: color var(--transition), background var(--transition), border-color var(--transition);
}
.auth-tab:hover { color: var(--ocean-700); background: rgba(255, 255, 255, .6); }
.auth-tab.is-active {
    background: var(--white);
    color: var(--ocean-900);
    border-bottom-color: var(--sun-500);
}

.auth-body { padding: clamp(24px, 4vw, 40px); }
.auth-body h2 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); }
.auth-body > p:first-of-type { color: var(--muted); margin-bottom: 24px; }
.auth-body .btn-block { margin-top: 6px; }

.auth-switch {
    margin: 22px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--sand-200);
    text-align: center;
    font-size: .92rem;
    color: var(--muted);
}

.auth-aside {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 24px;
    padding: 16px 20px;
    background: var(--ocean-100);
    border-radius: var(--radius);
    font-size: .9rem;
    color: var(--ocean-800);
}
.auth-aside .icon { flex: none; margin-top: .2em; }

/* --- Suivi des demandes ------------------------------------------- */
.account-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 38px;
    align-items: start;
}

.account-card {
    position: sticky;
    top: calc(var(--header-h) + 20px);
    background: var(--sand-100);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px;
}

.booking-list { display: grid; gap: 18px; }

.booking-item {
    background: var(--white);
    border: 1px solid var(--line);
    border-left: 3px solid var(--ocean-600);
    border-radius: var(--radius);
    padding: 22px 24px;
    transition: box-shadow var(--transition), transform var(--transition);
}
.booking-item:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.booking-item h3 { margin: 0 0 14px; font-size: 1.18rem; }

.booking-item__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.booking-item__ref {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .84rem;
    font-weight: 600;
    color: var(--ocean-700);
    letter-spacing: .02em;
}

.booking-item__facts {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    font-size: .9rem;
}
.booking-item__facts li { display: inline-flex; align-items: center; gap: 8px; }
.booking-item__facts .icon { color: var(--ocean-600); }

/* ---------------------------------------------------------------------
   14. CONTACT
   ------------------------------------------------------------------ */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 42px;
    align-items: start;
}
.contact-info {
    background: linear-gradient(150deg, var(--ocean-800), var(--ocean-900));
    color: rgba(255, 255, 255, .82);
    border-radius: var(--radius);
    padding: 32px 28px;
}
.contact-info h3 { color: #fff; }
.contact-info ul { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 20px; }
.contact-info li { display: flex; gap: 14px; align-items: flex-start; font-size: .93rem; }
.contact-info .icon { color: var(--sun-400); margin-top: .15em; }
.contact-info a { color: #fff; }
.contact-info a:hover { color: var(--sun-400); }
.contact-info strong { display: block; color: #fff; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 3px; font-weight: 600; }

.map-wrap {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    background: var(--sand-200);
}
.map-wrap iframe { display: block; width: 100%; height: 420px; border: 0; }

/* ---------------------------------------------------------------------
   15. PIED DE PAGE ET BOUTON WHATSAPP
   ------------------------------------------------------------------ */
.site-footer {
    background: var(--ocean-900);
    color: rgba(255, 255, 255, .66);
    padding: 64px 0 0;
    font-size: .92rem;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
    gap: 40px;
    padding-bottom: 46px;
}
.site-footer h4 {
    color: #fff;
    font-family: var(--font-body);
    font-size: .8rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.site-footer a { color: rgba(255, 255, 255, .72); }
.site-footer a:hover { color: var(--sun-400); }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.footer-logo {
    width: 210px;
    max-width: 100%;
    height: auto;
    background: #fff;
    border-radius: 14px;
    padding: 12px 16px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
}
.footer-brand span {
    font-family: var(--font-title);
    font-size: 1.3rem;
    color: #fff;
}
.footer-contact li { display: flex; gap: 11px; align-items: flex-start; }
.footer-contact .icon { color: var(--sun-400); margin-top: .18em; }
.footer-social { display: flex; gap: 10px; margin-top: 20px; }
.footer-social a {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    transition: background var(--transition), transform var(--transition);
}
.footer-social a:hover { background: var(--sun-500); transform: translateY(-2px); color: #fff; }

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding: 20px 0 26px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    font-size: .84rem;
    color: rgba(255, 255, 255, .5);
}
.footer-bottom a { color: rgba(255, 255, 255, .6); }

.whatsapp-float {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 90;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 20px 13px 15px;
    border-radius: 999px;
    background: #25d366;
    color: #fff;
    font-weight: 600;
    font-size: .92rem;
    box-shadow: 0 8px 26px rgba(37, 211, 102, .42);
    transition: transform var(--transition), box-shadow var(--transition);
}
.whatsapp-float:hover {
    color: #fff;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 32px rgba(37, 211, 102, .5);
}
.whatsapp-float .icon { width: 24px; height: 24px; }
.whatsapp-float::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    border: 2px solid rgba(37, 211, 102, .55);
    animation: pulse 2.6s infinite;
}

/* ---------------------------------------------------------------------
   16. ANIMATIONS
   ------------------------------------------------------------------ */
@keyframes heroZoom {
    from { transform: scale(1.1); }
    to   { transform: scale(1); }
}

@keyframes pulse {
    0%   { transform: scale(1); opacity: .8; }
    70%  { transform: scale(1.28); opacity: 0; }
    100% { transform: scale(1.28); opacity: 0; }
}

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 700ms ease, transform 700ms cubic-bezier(.2, .7, .3, 1);
}
.reveal.is-visible {
    opacity: 1;
    transform: none;
}

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

/* ---------------------------------------------------------------------
   17. RESPONSIVE
   ------------------------------------------------------------------ */
@media (max-width: 1080px) {
    .room-layout { grid-template-columns: 1fr; }
    .booking-box { position: static; }
    .reservation-layout { grid-template-columns: 1fr; }
    .summary-box { position: static; }
    .account-layout { grid-template-columns: 1fr; }
    .account-card { position: static; }
    .contact-layout { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* La barre doit loger la marque, sept liens et deux boutons. On
   allege par etapes plutot que de compresser les libelles. */
@media (max-width: 1400px) {
    .main-nav a .icon { display: none; }
    .main-nav a { padding: 9px 10px; }
}

@media (max-width: 1180px) {
    /* Le logo porte deja le nom : le titre texte laisse la place */
    .brand-name { display: none; }
    .main-nav a { padding: 8px 9px; font-size: .84rem; }
}

@media (max-width: 960px) {
    .main-nav { display: none; }
    .nav-toggle { display: flex; }
    .header-actions .btn { display: none; }
    .site-header .container { grid-template-columns: auto 1fr auto; }
    .brand-logo { height: 50px; }
    .availability-card form { grid-template-columns: 1fr 1fr; }
    .availability-card .btn { grid-column: 1 / -1; }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .stats { grid-template-columns: repeat(2, 1fr); }
    .contact-strip { grid-template-columns: 1fr; }
}

@media (max-width: 780px) {
    :root { --header-h: 72px; }
    .split { grid-template-columns: 1fr; }
    .split__media--stack .split__inset { width: 40%; right: 8px; bottom: -20px; }
    .room-gallery { grid-template-columns: 1fr; }
    .room-gallery__side { grid-template-columns: 1fr 1fr; }
    .gallery-item:nth-child(6n + 1) { grid-column: span 1; aspect-ratio: 4 / 3; }
    .cta-band { flex-direction: column; align-items: flex-start; }

    /* Carrousel : on garde les indicateurs, on retire fleches et legende */
    .hero-pager__caption { display: none; }
    .hero-arrow { display: none; }
    .hero-indicator { width: 26px; }
    .hero-indicator.is-active { width: 40px; }

    /* Accueil : le bas du hero est occupe par les boutons et le bloc
       de recherche, les indicateurs passent donc en haut. */
    .hero .hero-pager {
        top: calc(var(--header-h) + 16px);
        bottom: auto;
    }
    .page-hero.has-slider { --pager-bottom: 16px; padding-bottom: 58px; }
    .page-hero.has-search { --pager-bottom: 74px; padding-bottom: 112px; }
}

@media (max-width: 620px) {
    body { font-size: 16px; }
    /* Le sous-titre de la marque tiendrait sur deux lignes */
    .brand small { display: none; }
    .brand { font-size: 1.18rem; }
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .availability-card form { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .hero { min-height: 78vh; }
    .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    .whatsapp-float span { display: none; }
    .whatsapp-float { padding: 15px; }
    .lightbox__prev { left: 8px; }
    .lightbox__next { right: 8px; }
    .room-facts { grid-template-columns: repeat(2, 1fr); }
}