/*  Secret Paradise Club — la structure.

    En-tete, ouverture, tetes de section, pied de page.

    Une seule photographie occupe tout l ecran : l ouverture. Partout ailleurs
    les images vivent DANS la grille, avec leur legende dessous, jamais du
    texte par-dessus. C est ce qui rend la page calme : une seule image parle
    fort, les huit autres parlent ensemble et a voix egale.                 */

/* ══════════════════════════════════════════════════════════ En-tete ════ */

.entete {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 600;
    height: var(--entete);
    display: flex;
    align-items: center;
    border-bottom: 1px solid transparent;
    transition: background 0.45s var(--courbe), height 0.45s var(--courbe),
                border-color 0.45s var(--courbe);
}

.entete.posee {
    height: 66px;
    background: rgba(8, 8, 8, 0.88);
    backdrop-filter: blur(16px) saturate(125%);
    -webkit-backdrop-filter: blur(16px) saturate(125%);
    border-bottom-color: var(--trait);
}

.entete .page {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    max-width: 1560px;
}

/*  Le verrouillage du logo est vertical ; dans une barre on le recompose a
    l horizontale : le monogramme decoupe, et le nom compose dans la police
    du site, qui reste de la meme famille geometrique que le lettrage.      */
.marque { display: flex; align-items: center; gap: 13px; transition: opacity 0.3s var(--courbe); }

.marque:hover { opacity: 0.75; }

.marque img { height: 40px; width: auto; transition: height 0.45s var(--courbe); }

.entete.posee .marque img { height: 33px; }

.marque span {
    font-size: 10.5px;
    font-weight: 300;
    letter-spacing: 0.3em;
    text-indent: 0.3em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--blanc);
}

.menu { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px); list-style: none; }

.menu a {
    position: relative;
    display: block;
    padding: 5px 0;
    font-size: 11px;
    font-weight: 300;
    letter-spacing: 0.24em;
    text-indent: 0.24em;
    text-transform: uppercase;
    color: var(--blanc-2);
    transition: color 0.3s var(--courbe);
}

.menu a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 0;
    height: 1px;
    background: var(--or);
    transition: right 0.4s var(--courbe);
}

.menu a:hover { color: var(--blanc); }
.menu a:hover::after { right: 0; }

.menu a.ici { color: var(--or); }
.menu a.ici::after { right: 0; opacity: 0.5; }

.entete-cote { display: flex; align-items: center; gap: 16px; }

/*  Le numero, en clair dans l en-tete. Il disparait sous 1180 pixels, ou la
    barre d action du bas prend le relais : deux appels a appeler visibles en
    meme temps, c est un de trop.                                           */
.entete-tel {
    font-size: 12.5px;
    font-weight: 300;
    letter-spacing: 0.05em;
    white-space: nowrap;
    color: var(--blanc-2);
    font-variant-numeric: tabular-nums;
    transition: color 0.3s var(--courbe);
}

.entete-tel:hover { color: var(--or); }

@media (max-width: 1180px) { .entete-tel { display: none; } }

/*  La bascule de langue devient une petite pilule a deux cases : la langue
    active est celle qui porte la pastille. La barre oblique du balisage n a
    plus rien a separer, on la retire a l affichage.                        */
.langues {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--trait);
    border-radius: var(--r-pilule);
    font-size: 10.5px;
    letter-spacing: 0.12em;
}

.langues span { display: none; }

.langues button {
    padding: 4px 11px;
    border: 0;
    border-radius: var(--r-pilule);
    background: transparent;
    color: var(--gris);
    cursor: pointer;
    transition: color 0.25s var(--courbe), background 0.25s var(--courbe);
}

.langues button:hover { color: var(--blanc-2); }

.langues button.ici { color: var(--or); background: rgba(201, 162, 74, 0.13); }

.burger {
    display: none;
    position: relative;
    width: 34px;
    height: 34px;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.burger span {
    position: absolute;
    left: 6px;
    width: 22px;
    height: 1px;
    background: var(--or);
    transition: transform 0.4s var(--courbe), top 0.4s var(--courbe), width 0.4s var(--courbe);
}

.burger span:nth-child(1) { top: 13px; }
.burger span:nth-child(2) { top: 20px; width: 14px; }

.burger.ouvert span:nth-child(1) { top: 16.5px; transform: rotate(45deg); }
.burger.ouvert span:nth-child(2) { top: 16.5px; width: 22px; transform: rotate(-45deg); }

/* ══════════════════════════════════════════════════════ L ouverture ════ */

.ouverture {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
    overflow: hidden;
    text-align: center;
    padding: calc(var(--entete) + 40px) var(--marge) clamp(140px, 19vh, 200px);
}

.ouverture-media { position: absolute; inset: 0; z-index: 0; }

.ouverture-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 44%;
    /*  Une derive tres lente : 36 secondes pour 4 % d echelle. A cette
        vitesse on ne voit pas l animation, on sent seulement que l image
        n est pas un aplat. Coupee si la personne demande moins de mouvement.
    */
    animation: derive 36s ease-in-out infinite alternate;
}

@keyframes derive {
    from { transform: scale(1); }
    to   { transform: scale(1.04); }
}

/* ══════════════════════════════════════════ La ligne de progression ════

   Un filet d or sous le bord haut, qui se remplit avec le defilement. Il
   dit ou l on en est dans la page sans occuper une seule ligne de texte, et
   il est invisible tant qu on n a pas commence a descendre.               */

.progression {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 700;
    height: 2px;
    background: var(--or-degrade);
    transform: scaleX(0);
    transform-origin: left center;
    pointer-events: none;
}

/*  Le voile est dense en haut et en bas -- ou se tiennent l en-tete, le texte
    et le module de reservation -- et s allege au milieu pour rendre la
    carrosserie a la photo.                                                 */
.ouverture-voile {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(8,8,8,0.76) 0%, rgba(8,8,8,0.46) 32%, rgba(8,8,8,0.12) 56%, rgba(8,8,8,0.84) 100%);
}

.ouverture-texte {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
    width: 100%;
    max-width: 780px;
}

/*  Un halo local sous le bloc de texte : le voile general est volontairement
    leger au milieu, et sans ce halo la ligne d accroche tombe sur la tole
    claire de l aile, ou du blanc sur gris clair cesse d etre lisible.      */
.ouverture-texte::before {
    content: '';
    position: absolute;
    inset: -10% -14%;
    z-index: -1;
    background: radial-gradient(56% 54% at 50% 50%,
        rgba(8,8,8,0.66) 0%, rgba(8,8,8,0.32) 58%, transparent 100%);
    pointer-events: none;
}

.ouverture-marque {
    width: clamp(168px, 21vw, 240px);
    height: auto;
    filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.7));
}

.ouverture .chapo { color: var(--blanc); }

.ouverture-actions { display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; }

/*  L invite a descendre : un filet ou court un segment d or, sans un mot.
    Une fleche clignotante et le mot « scroll » sont le reflexe ; un trait
    qui se remplit dit la meme chose et ne parle aucune langue.             */
.ouverture-suite {
    position: absolute;
    left: 50%;
    bottom: clamp(118px, 16vh, 162px);
    z-index: 3;
    transform: translateX(-50%);
    width: 1px;
    height: 54px;
    overflow: hidden;
    background: rgba(244, 242, 238, 0.16);
}

.ouverture-suite span {
    position: absolute;
    inset: 0;
    background: var(--or-degrade);
    animation: descend 2.8s ease-in-out infinite;
}

@keyframes descend {
    0%   { transform: translateY(-100%); }
    55%  { transform: translateY(100%); }
    100% { transform: translateY(100%); }
}

@media (max-width: 620px) { .ouverture-suite { display: none; } }

/* ══════════════════════════════════════════════ La section illustree ═══

   Une photographie floutee en fond, pour les sections qui n ont que du texte
   et qui, sinon, tombent a plat entre deux blocs d images.

   Trois precautions, chacune indispensable :

     1. L image est agrandie avant d etre floutee. Un flou deborde son cadre :
        sans l agrandissement, les quatre bords se delitent en transparence et
        on voit un halo rectangulaire.

     2. Le voile part du noir plein en haut ET en bas. La section se fond donc
        dans le noir des sections voisines au lieu de s en detacher par une
        arete franche -- c est ce qui la fait passer pour un fond et non pour
        un encart colle.

     3. On assombrit fort. Le fond doit se deviner, pas se regarder : le
        texte garde tout son contraste.                                     */

.section--illustree { position: relative; isolation: isolate; overflow: hidden; }

.section-fond { position: absolute; inset: 0; z-index: -1; }

.section-fond img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /*  L agrandissement suit le rayon de flou : il ne sert qu a repousser
        hors cadre les bords qui se delitent. Moins de flou, donc moins
        d agrandissement.                                                   */
    transform: scale(1.07);
    filter: blur(11px) saturate(0.85) brightness(0.55);
}

.section-fond::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        var(--noir) 0%,
        rgba(8, 8, 8, 0.5) 24%,
        rgba(8, 8, 8, 0.5) 76%,
        var(--noir) 100%);
}

/* ══════════════════════════════════════════════════ Tete de section ════ */

.tete {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: clamp(44px, 5vw, 72px);
}

.tete-titre { display: flex; flex-direction: column; gap: 26px; }

.tete .chapo { margin-top: 4px; }

/* ══════════════════════════════════════════════ La barre d action ═════

   Sur telephone, l en-tete ne garde ni le bouton « Reserver » ni le numero :
   tout est replie dans le menu. Passe la photo d ouverture, il n y a donc
   plus aucune action a portee de pouce, et il faut remonter toute la page
   pour en trouver une.

   Cette barre corrige cela : elle glisse depuis le bas une fois l ouverture
   passee, et ne propose que deux choses -- reserver, ou appeler. Elle
   n existe pas sur grand ecran, ou l en-tete fait deja ce travail.        */

.barre-action {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 590;
    display: none;
    gap: 10px;
    padding: 12px var(--marge);
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    background: rgba(8, 8, 8, 0.9);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid var(--trait-or);
    transform: translateY(115%);
    transition: transform 0.5s var(--courbe);
}

.barre-action.montre { transform: none; }

.barre-action .bouton { flex: 1; min-height: 48px; padding: 13px 18px; font-size: 10.5px; }

/*  Le soulevement au survol n a pas de sens dans une barre collee au bord
    bas : il decollerait le bouton de son fond.                            */
.barre-action .bouton:hover { transform: none; }

@media (max-width: 760px) {
    .barre-action { display: flex; }

    /*  On degage la hauteur de la barre, sinon elle recouvre la derniere
        ligne du pied de page.                                             */
    .pied { padding-bottom: 96px; }
}

/* ══════════════════════════════════════════════════ La bulle WhatsApp ══

   Une pilule, pas un disque vert fluo : le vert de la marque reste sur le
   pictogramme — c est lui qui porte la reconnaissance — tandis que le fond
   reprend le noir vitre et le liseré d or du reste du site.

   Elle n existe qu au-dessus de 760 pixels. En dessous, la barre d action
   occupe deja le bas de l ecran, et deux boutons flottants superposes se
   marcheraient dessus.                                                     */

.bulle {
    position: fixed;
    right: clamp(18px, 2.2vw, 28px);
    bottom: clamp(18px, 2.2vw, 28px);
    z-index: 585;
    display: none;
    align-items: center;
    height: 56px;
    padding: 0 15px;
    border: 1px solid var(--trait-or);
    border-radius: var(--r-pilule);
    background: rgba(8, 8, 8, 0.86);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5);
    color: var(--blanc);
    transition: border-color 0.4s var(--courbe), transform 0.45s var(--courbe),
                box-shadow 0.4s var(--courbe), opacity 0.4s var(--courbe);
}

@media (min-width: 761px) { .bulle { display: inline-flex; } }

/*  Elle n arrive qu apres le premier defilement. En haut de l accueil, le
    module de reservation occupe justement ce coin : une bulle posee dessus
    recouvrirait le bouton principal de la page.

    Sans script, la classe n est jamais retiree — mais la regle « .js » plus
    bas ne s applique pas non plus, donc la bulle reste simplement visible.  */
.js .bulle { opacity: 0; transform: translateY(14px) scale(0.96); pointer-events: none; }

.js .bulle.montre { opacity: 1; transform: none; pointer-events: auto; }

.bulle:hover {
    border-color: var(--or);
    transform: translateY(-3px);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.6);
}

.js .bulle.montre:hover { transform: translateY(-3px); }

.bulle svg { flex: none; width: 27px; height: 27px; display: block; }

/*  Le mot est replie a largeur nulle et se deroule au survol. Sans cela il
    occuperait la place en permanence, et la bulle cesserait d en etre une. */
.bulle span {
    max-width: 0;
    margin-left: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    font-size: 11.5px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
    text-transform: uppercase;
    transition: max-width 0.45s var(--courbe), margin-left 0.45s var(--courbe),
                opacity 0.35s var(--courbe);
}

.bulle:hover span,
.bulle:focus-visible span { max-width: 140px; margin-left: 13px; opacity: 1; }

/*  Un halo qui bat lentement, une fois toutes les six secondes. Assez pour
    attirer l oeil en peripherie, trop lent pour agacer.                    */
.bulle::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    border: 1px solid var(--or);
    opacity: 0;
    animation: bulle-halo 6s ease-out infinite;
    pointer-events: none;
}

@keyframes bulle-halo {
    0%   { transform: scale(1); opacity: 0.5; }
    18%  { transform: scale(1.22); opacity: 0; }
    100% { transform: scale(1.22); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .bulle::before { animation: none; }
}

/* ══════════════════════════════════════════════════════ Pied de page ═══ */

.pied {
    border-top: 1px solid var(--trait);
    padding-top: clamp(56px, 6vw, 86px);
    padding-bottom: 30px;
}

.pied-grille {
    display: grid;
    grid-template-columns: 1.7fr 1fr 1fr 1.3fr;
    gap: clamp(28px, 4vw, 60px);
}

.pied-marque img { width: 144px; margin-bottom: 22px; }

.pied-marque p { color: var(--gris-2); font-size: 13.5px; max-width: 30ch; line-height: 1.7; }

.pied h4 {
    font-family: var(--ronde);
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: 0.28em;
    text-indent: 0.28em;
    text-transform: uppercase;
    color: var(--or);
    margin-bottom: 20px;
}

.pied ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }

.pied li, .pied li a { color: var(--gris); font-size: 13.5px; }

.pied li a { transition: color 0.25s var(--courbe); }
.pied li a:hover { color: var(--blanc); }

.reseaux { display: flex; gap: 20px; margin-top: 26px; }

.reseaux a {
    font-size: 10.5px;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
    text-transform: uppercase;
    color: var(--gris-2);
    transition: color 0.25s var(--courbe);
}

.reseaux a:hover { color: var(--or); }

.pied-bas {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    margin-top: clamp(44px, 5vw, 70px);
    padding-top: 24px;
    border-top: 1px solid var(--trait);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--gris-2);
}

/* ══════════════════════════════════════════════════════ Petits ecrans ══ */

@media (max-width: 920px) {

    .burger { display: block; }

    .menu {
        position: fixed;
        inset: 0 0 0 auto;
        width: min(340px, 86vw);
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 30px;
        padding: 0 36px;
        background: rgba(8, 8, 8, 0.97);
        border-left: 1px solid var(--trait-or);
        border-radius: var(--r-grand) 0 0 var(--r-grand);
        transform: translateX(100%);
        transition: transform 0.5s var(--courbe);
        z-index: 580;
    }

    .menu.ouvert { transform: none; }

    .menu a { font-size: 13px; }

    .entete-cote .bouton { display: none; }

    .tete { align-items: flex-start; }

    .pied-grille { grid-template-columns: 1fr 1fr; }
    .pied-marque { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
    .marque span { font-size: 9.5px; letter-spacing: 0.18em; text-indent: 0.18em; }
    .ouverture-actions .bouton { width: 100%; }
    .pied-grille { grid-template-columns: 1fr; gap: 34px; }
}

@media (max-width: 400px) {
    .marque span { display: none; }
}