/*====================================================
 SPA & THALASSO BY TIKIDA
 PREMIUM CSS V5
====================================================*/

/*================ GOOGLE FONTS ================*/
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap');

/*================ VARIABLES ================*/
:root{

    /* Couleurs des Spas */
    --group:#005B96;
    --thalasso:#0096D6;
    --palace:#C03A7A;
    --golf:#B89342;
    --dunas:#5DAA43;
    --taghazout:#1F5B4B;
    --palmeraie:#C46C3A;

    /* Couleurs principales */
    --gold:#005B96;
    --gold-light:#E8C85D;
    --dark:#18212B;
    --dark-2:#253241;
    --text:#5F6670;
    --text-light:#9098A4;
    --light:#F7F8FA;
    --white:#FFFFFF;
    --border:#ECECEC;

    /* Ombres */
    --shadow-sm:0 8px 20px rgba(0,0,0,.05);
    --shadow:0 18px 45px rgba(0,0,0,.08);
    --shadow-lg:0 25px 60px rgba(0,0,0,.12);

    /* Radius */
    --radius:22px;
    --radius-sm:16px;
    --radius-lg:30px;

    /* Animation */
    --transition:.35s cubic-bezier(.4,0,.2,1);

    /* Couleur dynamique */
    --theme:var(--group);

}

/*================ RESET ================*/

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

html{
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
}

body{

    font-family:'Poppins',sans-serif;

    background:var(--white);

    color:var(--text);

    line-height:1.75;

    overflow-x:hidden;

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

}

img{

    display:block;

    max-width:100%;

    height:auto;

}

video{

    display:block;

    width:100%;

}

a{

    color:inherit;

    text-decoration:none;

    transition:var(--transition);

}

button,
input,
textarea,
select{

    font-family:inherit;

}

ul{

    list-style:none;

}

section{

    position:relative;

    padding:120px 0;

}

/*================ CONTAINER ================*/

.container{

    width:min(1320px,92%);

    margin:auto;

}

/*================ TYPOGRAPHIE ================*/

h1,h2,h3,h4{

    font-family:'Playfair Display',serif;

    color:var(--dark);

    font-weight:700;

    letter-spacing:.3px;

}

p{

    color:var(--text);

}

.section-title{

    text-align:center;

    margin-bottom:75px;

}

.section-title h5{

    display:inline-block;

    color:var(--theme);

    text-transform:uppercase;

    font-size:14px;

    font-weight:600;

    letter-spacing:3px;

    margin-bottom:18px;

}

.section-title h2{

    font-size:clamp(34px,5vw,48px);

    margin-bottom:20px;

}

.section-title p{

    max-width:760px;

    margin:auto;

    color:var(--text-light);

}

/*================ HEADER PREMIUM ================*/

/*====================================================
        HEADER PREMIUM FIXE
====================================================*/

/*====================================================
HEADER PREMIUM V5
====================================================*/

header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:9999;

padding:18px 0;

background:transparent;

transition:.40s ease;

}

.header-space{

display:none;

height:100px;

}

.header-container{

display:flex;

align-items:center;

justify-content:space-between;

gap:30px;

}

/*================ LOGO ================*/

.logo{

display:flex;

align-items:center;

}

.logo img{

height:70px;

width:auto;

transition:.35s;

}

header.sticky .logo img{

height:58px;

}

/*================ NAVIGATION ================*/

nav{

display:flex;

align-items:center;

gap:40px;

}

.nav-link{

position:relative;

color:#fff;

font-size:15px;

font-weight:500;

transition:.35s;

}

.nav-link::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:var(--group);

transition:.35s;

}

.nav-link:hover::after,

.nav-link.active::after{

width:100%;

}

.nav-link:hover{

color:#fff;

}

/*================ BOUTON ================*/

.header-right{

display:flex;

align-items:center;

gap:18px;

}

.btn-header{

display:flex;

align-items:center;

gap:10px;

padding:15px 34px;

border-radius:50px;

background:var(--group);

color:#fff;

font-weight:600;

box-shadow:0 15px 35px rgba(0,91,150,.30);

transition:.35s;

}

.btn-header:hover{


background:var(--group);

color:#fff;

transform:translateY(-3px);

box-shadow:0 15px 35px rgba(0,91,150,.40);

}

.mobile-toggle{

display:none;

width:48px;

height:48px;

border:none;

border-radius:50%;

background:rgba(255,255,255,.15);

color:#fff;

font-size:22px;

cursor:pointer;

backdrop-filter:blur(12px);

}

/*====================================================
HEADER AU SCROLL
====================================================*/

header.sticky{

padding:12px 0;

background:rgba(255,255,255,.92);

backdrop-filter:blur(18px);

-webkit-backdrop-filter:blur(18px);

box-shadow:0 8px 35px rgba(0,0,0,.08);

}

header.sticky .logo img{

height:60px;

}

header.sticky .nav-link{

color:var(--group);

font-weight:600;

}

header.sticky .nav-link:hover{

color:var(--group);

}

header.sticky .btn-header{

background:var(--group);

color:#fff;

}

header.sticky .mobile-toggle{

background:#eef5fb;

color:var(--group);

}

/*====================================================
RESPONSIVE
====================================================*/

@media(max-width:992px){

nav{

display:none;

}

.mobile-toggle{

display:flex;

align-items:center;

justify-content:center;

}

.logo img{

height:72px;

filter:drop-shadow(0 3px 10px rgba(0,0,0,.18));

transition:.35s;

}

}

@media(max-width:768px){

.btn-header{

padding:14px 24px;

font-size:14px;

}

.logo img{

height:54px;

}

}


/*====================================================
        MENU AVANT SCROLL
====================================================*/


nav a{

    color:#ffffff;

    font-weight:500;

    font-size:15px;

    position:relative;

    transition:.35s;

}


/*====================================================
        MENU APRES SCROLL
====================================================*/


header.sticky nav a{

    color:var(--group);
font-weight:600;

}


/* HOVER MENU */

nav a:hover{

    color:var(--group);

}


/* SOULIGNEMENT */

nav a::after{

    content:"";

    position:absolute;

    bottom:-8px;

    left:0;

    height:2px;

    width:0;

    background:var(--group);

    transition:.35s;

}


nav a:hover::after{

    width:100%;

}


/*====================================================
        BOUTON RESERVATION
====================================================*/


.btn-header{

background:var(--group);

color:#fff;

box-shadow:0 15px 35px rgba(0,91,150,.40);

transition:.35s;

}

.btn-header:hover{

background:#0074c2;

box-shadow:0 15px 35px rgba(0,91,150,.40);

transform:translateY(-3px);

}


.btn-header:hover{

    background:#0078C8;

    transform:translateY(-3px);

}
/*================ MENU ================*/

nav{

    display:flex;

    align-items:center;

    gap:40px;

}

nav a{

    position:relative;

    font-size:15px;

    font-weight:500;

    color:#fff;

    letter-spacing:.4px;

}

header.sticky nav a{

    color:var(--dark);

}

nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    border-radius:20px;

    background:linear-gradient(
        90deg,
        var(--group),
        var(--group)
    );

    transition:.35s;

}

nav a:hover{

    color:var(--group);

}

nav a:hover::after{

    width:100%;

}

/*================ BOUTONS PREMIUM ================*/

.btn-header,
.btn-gold,
.btn-light{

    position:relative;

    overflow:hidden;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:16px 36px;

    border:none;

    border-radius:60px;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.35s;

}

.btn-header,
.btn-gold{

    background:linear-gradient(
        135deg,
        var(--group),
        #0078C8
    );

    color:#fff;

    box-shadow:0 15px 35px rgba(0,91,150,.30);

}


.btn-header:hover,
.btn-gold:hover{

    box-shadow:0 22px 45px rgba(0,91,150,.40);

}

.btn-light{

    background:rgba(255,255,255,.14);

    backdrop-filter:blur(16px);

    border:1px solid rgba(255,255,255,.30);

    color:#fff;

}

.btn-header:hover,
.btn-gold:hover{

    transform:translateY(-5px);

    box-shadow:0 22px 45px rgba(0,91,150,.40);

}

.btn-light:hover{

    background:#fff;

    color:var(--dark);

}

.btn-header::before,
.btn-gold::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.55),
        transparent
    );

    transform:skewX(-25deg);

    transition:1s;

}

.btn-header:hover::before,
.btn-gold:hover::before{

    left:150%;

}

/*================ HERO VIDEO PREMIUM ================*/

.hero{

    position:relative;

    height:100vh;

    min-height:760px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

}

.hero video{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    animation:heroZoom 25s ease-in-out infinite alternate;

    will-change:transform;

}

@keyframes heroZoom{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.08);

    }

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        rgba(0,0,0,.15),
        rgba(0,0,0,.30),
        rgba(0,0,0,.45)
    );

}

.hero-content{

    position:relative;

    z-index:2;

    max-width:920px;

    text-align:center;

    color:#fff;

    padding:0 20px;

}

.hero-logo{

    height:120px;

    margin:auto auto 35px;

    filter:drop-shadow(0 12px 25px rgba(0,0,0,.30));

}

.hero-badge{

    display:inline-block;

    padding:12px 26px;

    margin-bottom:28px;

    border-radius:60px;

    background:rgba(255,255,255,.10);

    border:1px solid rgba(255,255,255,.25);

    backdrop-filter:blur(18px);

    font-size:13px;

    letter-spacing:3px;

    text-transform:uppercase;

    color:#fff;

}

.hero h1{

    font-family:'Cormorant Garamond',serif;

    font-size:clamp(55px,7vw,90px);

    font-weight:600;

    letter-spacing:3px;

    text-transform:uppercase;

    color:#ffffff;

    line-height:1.1;

    margin-bottom:25px;

}

.hero p{

    max-width:760px;

    margin:0 auto 45px;

    color:#fff;

    font-size:20px;

    opacity:.95;

}

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.hero-scroll{

    position:absolute;

    bottom:35px;

    left:50%;

    transform:translateX(-50%);

    color:#fff;

    font-size:28px;

    animation:scrollDown 1.8s infinite;

}

@keyframes scrollDown{

    0%{

        transform:translate(-50%,0);

    }

    50%{

        transform:translate(-50%,12px);

    }

    100%{

        transform:translate(-50%,0);

    }

}
/*====================================================
            CARTES PREMIUM DES SPAS V5
====================================================*/

.cards{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(370px,1fr));

    gap:40px;

    margin-top:70px;

}

/*================ CARTE =================*/

.card{

    position:relative;

    background:#fff;

    border-radius:28px;

    overflow:hidden;

    border:1px solid rgba(0,0,0,.05);

    box-shadow:0 20px 55px rgba(0,0,0,.08);

    transition:all .45s cubic-bezier(.4,0,.2,1);

    will-change:transform;

}

.card:hover{

    transform:translateY(-14px);

}

/*================ BARRE COULEUR =================*/

.card-top{

    height:8px;

    width:100%;

}

.thalasso-color{background:var(--thalasso);}
.palace-color{background:var(--palace);}
.golf-color{background:var(--golf);}
.dunas-color{background:var(--dunas);}
.taghazout-color{background:var(--taghazout);}
.palmeraie-color{background:var(--palmeraie);}

/*================ IMAGE =================*/

.card-image{

    position:relative;

    height:280px;

    overflow:hidden;

}

.card-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:1.2s;

}

.card:hover .card-image img{

    transform:scale(1.12);

}

/*================ OVERLAY =================*/

.card-image::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        transparent,

        rgba(0,0,0,.18),

        rgba(0,0,0,.55)

    );

    z-index:1;

}

/*================ LOGO =================*/

.card-logo{

    position:absolute;

    right:25px;

    bottom:25px;

    width:90px;

    opacity:.12;

    z-index:2;

    transition:.45s;

}

.card:hover .card-logo{

    opacity:.20;

    transform:scale(1.08);

}

/*================ BADGE =================*/

.badge{

    position:absolute;

    top:20px;

    left:20px;

    z-index:3;

    padding:10px 22px;

    border-radius:50px;

    color:#fff;

    font-size:13px;

    font-weight:600;

    letter-spacing:2px;

    backdrop-filter:blur(12px);

    box-shadow:0 10px 25px rgba(0,0,0,.20);

}

.badge.thalasso{background:var(--thalasso);}
.badge.palace{background:var(--palace);}
.badge.golf{background:var(--golf);}
.badge.dunas{background:var(--dunas);}
.badge.taghazout{background:var(--taghazout);}
.badge.palmeraie{background:var(--palmeraie);}

/*================ CONTENU =================*/

.card-content{

    padding:35px;

}

.card-content h3{

    font-size:30px;

    margin-bottom:18px;

    transition:.35s ease;

}
/*====================================================
        TITRE SPA AU SURVOL
====================================================*/


.thalasso-card:hover .card-content h3{

    color:var(--thalasso);

}


.palace-card:hover .card-content h3{

    color:var(--palace);

}


.golf-card:hover .card-content h3{

    color:var(--golf);

}


.dunas-card:hover .card-content h3{

    color:var(--dunas);

}


.taghazout-card:hover .card-content h3{

    color:var(--taghazout);

}


.palmeraie-card:hover .card-content h3{

    color:var(--palmeraie);

}

.card:hover h3{

    color:var(--theme);

}

.card-content p{

    font-size:15px;

    color:#6b6b6b;

    line-height:1.9;

    margin-bottom:30px;

}

/*================ INFOS =================*/

.infos{

    display:flex;

    flex-direction:column;

    gap:16px;

    margin-bottom:35px;

}

.infos div{

    display:flex;

    align-items:center;

    gap:15px;

    font-size:15px;

    color:#555;

}

.infos i{

    width:44px;

    height:44px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(

        135deg,

        var(--theme),

        color-mix(in srgb,var(--theme) 60%,white)

    );

    color:#fff;

    font-size:16px;

    box-shadow:0 12px 25px rgba(0,0,0,.15);

    transition:.35s;

}

.card:hover .infos i{

    transform:rotate(12deg) scale(1.08);

}

/*================ BOUTONS =================*/

.buttons{

    display:flex;

    gap:15px;

    margin-top:25px;

}

.buttons a{

    flex:1;

    text-align:center;

    padding:15px;

    border-radius:50px;

    font-weight:600;

    transition:.35s;

    position:relative;

    overflow:hidden;

}

/*================ BROCHURE =================*/

.btn-outline{

    background:#fff;

    color:#444;

    border:2px solid #E6E6E6;

}

.btn-outline:hover{

    background:#1d2430;

    color:#fff;

    border-color:#1d2430;

}

/*================ BOUTONS COULEURS =================*/

.btn-thalasso{

    background:linear-gradient(135deg,var(--thalasso),#27B3ED);

    color:#fff;

}

.btn-palace{

    background:linear-gradient(135deg,var(--palace),#D95396);

    color:#fff;

}

.btn-golf{

    background:linear-gradient(135deg,var(--golf),#D4AF37);

    color:#fff;

}

.btn-dunas{

    background:linear-gradient(135deg,var(--dunas),#79C45F);

    color:#fff;

}

.btn-taghazout{

    background:linear-gradient(135deg,var(--taghazout),#2E7C68);

    color:#fff;

}

.btn-palmeraie{

    background:linear-gradient(135deg,var(--palmeraie),#DD8756);

    color:#fff;

}

.btn-thalasso:hover,
.btn-palace:hover,
.btn-golf:hover,
.btn-dunas:hover,
.btn-taghazout:hover,
.btn-palmeraie:hover{

    transform:translateY(-4px);

    filter:brightness(108%);

}

/*================ OMBRES =================*/

.thalasso-card:hover{

    box-shadow:0 28px 65px rgba(0,150,214,.30);

}

.palace-card:hover{

    box-shadow:0 28px 65px rgba(192,58,122,.30);

}

.golf-card:hover{

    box-shadow:0 28px 65px rgba(184,147,66,.30);

}

.dunas-card:hover{

    box-shadow:0 28px 65px rgba(93,170,67,.30);

}

.taghazout-card:hover{

    box-shadow:0 28px 65px rgba(31,91,75,.30);

}

.palmeraie-card:hover{

    box-shadow:0 28px 65px rgba(196,108,58,.30);

}

/*================ RESPONSIVE =================*/

@media(max-width:992px){

.cards{

grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

}

}

@media(max-width:768px){

.cards{

grid-template-columns:1fr;

}

.card-image{

height:240px;

}

.card-content{

padding:28px;

}

.buttons{

flex-direction:column;

}

}
/*====================================================
        PAGE RÉSERVATION PREMIUM V5
====================================================*/

/*================ HERO =================*/

.reservation-hero{

    position:relative;

    height:460px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

}

.reservation-bg{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    animation:heroZoom 20s ease-in-out infinite alternate;

}

.reservation-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(0,0,0,.35),
        rgba(0,0,0,.55),
        rgba(0,0,0,.72)
    );

}

.reservation-title{

    position:relative;

    z-index:5;

    text-align:center;

    color:#fff;

    max-width:950px;

    padding:0 20px;

}

#spaBadge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 28px;

    border-radius:60px;

    background:var(--theme);

    color:#fff;

    font-size:14px;

    font-weight:600;

    letter-spacing:3px;

    margin-bottom:30px;

    box-shadow:0 15px 35px rgba(0,0,0,.25);

}

#spaNom{

    font-size:clamp(42px,6vw,72px);

    color:#fff;

    margin-bottom:20px;

}

#spaDescription{

    max-width:760px;

    margin:auto;

    font-size:20px;

    color:#fff;

    opacity:.95;

    margin-bottom:45px;

}

/*================ INFOS =================*/

.reservation-infos{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:20px;

}

.reservation-infos div{

    display:flex;

    align-items:center;

    gap:12px;

    padding:15px 24px;

    border-radius:60px;

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.20);

    color:#fff;

}

.reservation-infos i{

    font-size:18px;

}

/*================ SECTION =================*/

.reservation-section{

    background:#F6F8FB;

    padding:120px 0;

}

/*================ CARTE =================*/

.reservation-card{

    width:min(1320px,92%);

    margin:auto;

    display:grid;

    grid-template-columns:420px 1fr;

    background:#fff;

    border-radius:32px;

    overflow:hidden;

    box-shadow:0 30px 70px rgba(0,0,0,.10);

}

/*================ COLONNE GAUCHE =================*/

.reservation-left{

    background:linear-gradient(
        135deg,
        var(--theme),
        color-mix(in srgb,var(--theme) 60%,white)
    );

    padding:60px;

    color:#fff;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.reservation-left h5{

    text-transform:uppercase;

    letter-spacing:3px;

    font-size:14px;

    margin-bottom:15px;

}

.reservation-left h2{

    color:#fff;

    font-size:42px;

    margin-bottom:25px;

}

.reservation-left p{

    color:#fff;

    opacity:.95;

    margin-bottom:40px;

    line-height:1.8;

}

/*================ ICÔNES =================*/

.reservation-icons{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

}

.reservation-icons div{

    background:rgba(255,255,255,.15);

    border:1px solid rgba(255,255,255,.15);

    backdrop-filter:blur(16px);

    border-radius:20px;

    padding:22px;

    text-align:center;

    transition:.35s;

}

.reservation-icons div:hover{

    transform:translateY(-8px);

    background:rgba(255,255,255,.22);

}

.reservation-icons i{

    display:block;

    font-size:30px;

    margin-bottom:12px;

}

/*================ COLONNE DROITE =================*/

.reservation-right{

    padding:60px;

}

/*================ GRID =================*/

.grid-2{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:25px;

}

/*================ FORM =================*/

.form-group{

    display:flex;

    flex-direction:column;

    margin-bottom:25px;

}

.form-group label{

    font-size:15px;

    font-weight:600;

    color:#444;

    margin-bottom:10px;

}

.form-group input,
.form-group select,
.form-group textarea{

    width:100%;

    padding:17px 18px;

    border:2px solid #E7EAF0;

    border-radius:18px;

    background:#fff;

    font-size:15px;

    transition:.35s;

}

.form-group textarea{

    height:170px;

    resize:none;

}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{

    outline:none;

    border-color:var(--theme);

    box-shadow:0 0 0 5px rgba(0,91,150,.08);

}

/*================ SELECT2 =================*/

.select2-container{

    width:100%!important;

}

.select2-selection{

    min-height:60px!important;

    border-radius:18px!important;

    border:2px solid #E7EAF0!important;

    padding:10px!important;

}

.select2-container--default .select2-selection--multiple{

    border:2px solid #E7EAF0!important;

}

.select2-container--default .select2-selection--multiple .select2-selection__choice{

    background:var(--theme)!important;

    color:#fff!important;

    border:none!important;

    border-radius:40px!important;

    padding:8px 14px!important;

}

/*================ BOUTON =================*/

.btn-submit{

    width:100%;

    height:62px;

    border:none;

    border-radius:60px;

    background:linear-gradient(
        135deg,
        var(--theme),
        color-mix(in srgb,var(--theme) 75%,white)
    );

    color:#fff;

    font-size:17px;

    font-weight:600;

    cursor:pointer;

    transition:.35s;

    box-shadow:0 18px 40px rgba(0,0,0,.15);

}

.btn-submit:hover{

    transform:translateY(-4px);

    box-shadow:0 28px 55px rgba(0,0,0,.18);

}

/*================ RESPONSIVE =================*/

@media(max-width:1100px){

.reservation-card{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.reservation-right{

padding:35px;

}

.reservation-left{

padding:40px;

}

.grid-2{

grid-template-columns:1fr;

}

.reservation-icons{

grid-template-columns:1fr;

}

.reservation-infos{

flex-direction:column;

align-items:center;

}

#spaNom{

font-size:40px;

}

}
/*====================================================
        ANIMATIONS PREMIUM V5
====================================================*/

/*================ SCROLL REVEAL =================*/
.card,
.about,
.why-card,
.stat,
.cta,
.reservation-card{

    transition:
    opacity .8s ease,
    transform .8s ease;

}
.card.reveal{
    opacity:0;
    transform:translateY(40px);
}

.card.reveal.show{
    opacity:1;
    transform:translateY(0);
}

/*================ GLASS EFFECT =================*/

.glass{

    background:rgba(255,255,255,.14);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.25);

}


/*====================================================
        RIPPLE BUTTON EFFECT
====================================================*/

.btn-submit,
.btn-gold,
.btn-light,
.btn-header,
.btn-email{

    position:relative;

    overflow:hidden;

}


.ripple{

    position:absolute;

    width:20px;

    height:20px;

    border-radius:50%;

    background:rgba(255,255,255,.45);

    transform:scale(0);

    animation:rippleEffect .7s linear;

    pointer-events:none;

}


@keyframes rippleEffect{

    to{

        transform:scale(8);

        opacity:0;

    }

}


/*====================================================
        FLOATING RESERVATION BUTTON
====================================================*/


.floating-book{

    position:fixed;

    right:35px;

    bottom:35px;

    width:70px;

    height:70px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--theme);

    color:#fff;

    font-size:28px;

    z-index:999;

    box-shadow:

    0 20px 45px rgba(0,0,0,.25);

    transition:.35s;

    animation:pulseBook 2s infinite;

}


.floating-book:hover{

    transform:

    translateY(-8px)

    scale(1.08);

}


@keyframes pulseBook{

    0%{

        box-shadow:

        0 0 0 0 rgba(0,91,150,.35);

    }

    70%{

        box-shadow:

        0 0 0 18px rgba(0,91,150,0);

    }

    100%{

        box-shadow:

        0 0 0 0 rgba(0,91,150,0);

    }

}


/*====================================================
        BACK TO TOP
====================================================*/


.back-top{

    position:fixed;

    left:35px;

    bottom:35px;

    width:60px;

    height:60px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#151515;

    color:#fff;

    cursor:pointer;

    font-size:22px;

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:999;

}


.back-top.show{

    opacity:1;

    visibility:visible;

}


.back-top:hover{

    background:var(--theme);

    transform:translateY(-5px);

}


/*====================================================
        WHY CHOOSE US
====================================================*/


.why-us{

    background:#FAFAFA;

}


.why-grid{

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(260px,1fr));

    gap:35px;

}


.why-card{

    background:#fff;

    padding:50px 35px;

    text-align:center;

    border-radius:28px;

    box-shadow:

    0 15px 45px rgba(0,0,0,.06);

    transition:.4s;

}


.why-card:hover{

    transform:translateY(-12px);

    box-shadow:

    0 25px 60px rgba(0,0,0,.12);

}


.why-icon{

    width:95px;

    height:95px;

    margin:0 auto 30px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

    linear-gradient(

        135deg,

        var(--theme),

        color-mix(in srgb,var(--theme) 60%,white)

    );

    color:#fff;

    font-size:35px;

    box-shadow:

    0 15px 35px rgba(0,0,0,.15);

}


.why-card h3{

    font-size:25px;

    margin-bottom:15px;

}


.why-card p{

    font-size:15px;

    color:#777;

}


/*====================================================
        STATISTIQUES
====================================================*/


.statistics{

    padding:100px 0;

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(220px,1fr));

    gap:35px;

    background:#fff;

}


.stat{

    text-align:center;

}


.stat h2{

    font-size:

    clamp(42px,5vw,60px);

    color:var(--theme);

    margin-bottom:10px;

}


.stat p{

    font-size:17px;

    color:#666;

}


/*====================================================
        CALL TO ACTION
====================================================*/


.cta{

    background:

    linear-gradient(

        135deg,

        var(--theme),

        #102535

    );

    text-align:center;

    padding:130px 20px;

    color:#fff;

}


.cta h2{

    color:#fff;

    font-size:

    clamp(36px,5vw,56px);

    margin-bottom:25px;

}


.cta p{

    max-width:760px;

    margin:auto;

    margin-bottom:45px;

    color:#fff;

    font-size:19px;

    opacity:.95;

}


/*====================================================
        FOOTER PREMIUM
====================================================*/


footer{

    background:#111827;

    color:#d7d7d7;

    padding-top:90px;

}


.footer-container{

    width:min(1320px,92%);

    margin:auto;

    display:grid;

    grid-template-columns:

    2fr 1fr 1fr 1fr;

    gap:60px;

    padding-bottom:70px;

}


.footer-logo{

    height:95px;

    margin-bottom:25px;

}


.footer-col h4{

    color:#fff;

    font-size:22px;

    margin-bottom:25px;

}


.footer-col p{

    color:#ccc;

    margin-bottom:15px;

}


.footer-col ul li{

    margin-bottom:14px;

}


.footer-col ul li a{

    color:#ccc;

}


.footer-col ul li a:hover{

    color:var(--group);

}


.footer-col i{

    color:var(--group);

    margin-right:10px;

}


/*================ SOCIAL =================*/


.socials{

    display:flex;

    gap:15px;

    margin-top:25px;

}


.socials a{

    width:46px;

    height:46px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#1f2937;

    color:#fff;

    transition:.35s;

}


.socials a:hover{

    background:var(--theme);

    transform:translateY(-6px);

}


/*================ COPYRIGHT =================*/


.copyright{

    border-top:

    1px solid rgba(255,255,255,.08);

    padding:25px;

    text-align:center;

    font-size:14px;

    color:#aaa;

}


/*====================================================
        LOADER
====================================================*/


body::before{
    display:none;
}

/*====================================================
        RESPONSIVE FINAL
====================================================*/


@media (max-width:992px){

#navbar{

display:none;

position:absolute;

top:100%;

left:0;

width:100%;

background:#ffffff;

padding:25px;

flex-direction:column;

gap:20px;

box-shadow:0 10px 30px rgba(0,0,0,.08);

}

#navbar.mobile-open{

display:flex;

}

#navbar a{

color:var(--group);

font-size:16px;

}

.mobile-toggle{

display:flex;

align-items:center;

justify-content:center;

}

}

@media(max-width:768px){


nav{

    display:none;

}


.hero{

    min-height:650px;

}


.hero h1{

    font-size:38px;

}


.hero p{

    font-size:16px;

}


.hero-buttons{

    flex-direction:column;

}


.statistics{

    grid-template-columns:1fr;

}


.footer-container{

    grid-template-columns:1fr;

    text-align:center;

}


.socials{

    justify-content:center;

}


.floating-book{

    width:60px;

    height:60px;

    right:15px;

    bottom:15px;

}


.back-top{

    width:55px;

    height:55px;

    left:15px;

    bottom:15px;

}


}


@media(max-width:480px){


.section-title h2{

    font-size:32px;

}


.cta h2{

    font-size:35px;

}


}
/*====================================================
        AMÉLIORATIONS FINALES PREMIUM V5
        UTILITAIRES + ACCESSIBILITÉ
====================================================*/


/*====================================================
        SMOOTH EFFECTS
====================================================*/


a,
button,
.card,
.why-card,
.socials a,
.floating-book,
.back-top{

    -webkit-tap-highlight-color:transparent;

}


/*====================================================
        CURSEUR PREMIUM
====================================================*/


.cursor-dot{

    position:fixed;

    width:10px;

    height:10px;

    border-radius:50%;

    background:var(--group);

    pointer-events:none;

    z-index:999999;

    transform:translate(-50%,-50%);

    transition:.15s;

}


.cursor-outline{

    position:fixed;

    width:40px;

    height:40px;

    border-radius:50%;

    border:1px solid var(--group);

    pointer-events:none;

    z-index:999998;

    transform:translate(-50%,-50%);

    transition:.25s;

}


/*====================================================
        IMAGE REVEAL PREMIUM
====================================================*/


.image-reveal{

    overflow:hidden;

    position:relative;

}


.image-reveal img{

    transition:1.2s ease;

}


.image-reveal:hover img{

    transform:scale(1.08);

}


/*====================================================
        SECTION DIVIDER
====================================================*/


.section-divider{

    position:absolute;

    bottom:-1px;

    left:0;

    width:100%;

    height:80px;

    overflow:hidden;

}


.section-divider svg{

    width:100%;

    height:100%;

    display:block;

}



/*====================================================
        BADGES PREMIUM
====================================================*/


.premium-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 20px;

    border-radius:50px;

    background:rgba(212,175,55,.12);

    border:1px solid rgba(212,175,55,.35);

    color:var(--group);

    font-size:13px;

    font-weight:600;

    letter-spacing:2px;

    text-transform:uppercase;

}



/*====================================================
        SECTIONS LUXE
====================================================*/


.luxury-section{

    position:relative;

    background:

    linear-gradient(

        180deg,

        #fff,

        #fafafa

    );

}


.luxury-section::before{

    content:"";

    position:absolute;

    width:300px;

    height:300px;

    top:0;

    right:0;

    background:

    radial-gradient(

        circle,

        rgba(212,175,55,.10),

        transparent 70%

    );

}



/*====================================================
        VIDEO CARDS
====================================================*/


.video-card{

    position:relative;

    overflow:hidden;

    border-radius:28px;

}


.video-card video{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:1s;

}


.video-card:hover video{

    transform:scale(1.08);

}


.video-card .overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        transparent,

        rgba(0,0,0,.65)

    );

}



/*====================================================
        WHATSAPP FLOAT
====================================================*/


.whatsapp-float{

    position:fixed;

    right:35px;

    bottom:120px;

    width:60px;

    height:60px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#25D366;

    color:#fff;

    font-size:28px;

    z-index:999;

    box-shadow:

    0 15px 40px rgba(0,0,0,.25);

    transition:.35s;

}


.whatsapp-float:hover{

    transform:

    translateY(-8px)

    scale(1.08);

}



/*====================================================
        FORM SUCCESS MESSAGE
====================================================*/


.form-success{

    padding:20px;

    border-radius:18px;

    background:#eaf8ee;

    color:#1d7a36;

    border-left:5px solid #1d7a36;

    margin-top:20px;

}



/*====================================================
        LOADING SPINNER
====================================================*/


.spinner{

    width:45px;

    height:45px;

    border-radius:50%;

    border:4px solid rgba(255,255,255,.25);

    border-top-color:#fff;

    animation:spin 1s linear infinite;

}


@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}



/*====================================================
        ACCESSIBILITY
====================================================*/


:focus-visible{

    outline:3px solid var(--group);

    outline-offset:4px;

}


::selection{

    background:var(--group);

    color:#fff;

}



/*====================================================
        PRINT RESERVATION
====================================================*/


@media print{


header,
footer,
.floating-book,
.back-top,
.hero-scroll{

    display:none!important;

}


body{

    background:#fff;

}


.reservation-card{

    box-shadow:none;

    border:1px solid #ddd;

}


}



/*====================================================
        DARK PREMIUM ELEMENTS
====================================================*/


.dark-box{

    background:#111827;

    color:#fff;

    border-radius:30px;

    padding:45px;

}


.dark-box h2,
.dark-box h3{

    color:#fff;

}


.dark-box p{

    color:#ddd;

}



/*====================================================
        GOLD TEXT EFFECT
====================================================*/


.gold-text{

    background:

    linear-gradient(

        135deg,

        #D4AF37,

        #FFE9A0

    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}



/*====================================================
        HOVER LIFT GENERAL
====================================================*/


.hover-lift{

    transition:.4s;

}


.hover-lift:hover{

    transform:translateY(-10px);

    box-shadow:

    0 25px 60px rgba(0,0,0,.12);

}



/*====================================================
        MOBILE TOUCH OPTIMIZATION
====================================================*/


@media(max-width:600px){


.cursor-dot,
.cursor-outline{

    display:none;

}


.section-divider{

    height:40px;

}


.whatsapp-float{

    width:55px;

    height:55px;

    right:15px;

    bottom:90px;

}


.dark-box{

    padding:30px;

}


}


/*====================================================
        FIN CSS PREMIUM V5
====================================================*/

/*====================================================
        BOUTONS D'ENVOI (WHATSAPP + EMAIL)
====================================================*/

.reservation-actions{

    display:flex;

    gap:18px;

    margin-top:10px;

}

.reservation-actions .btn-submit{

    flex:1;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

}

/*================ VARIANTE EMAIL =================*/

.btn-email{

    background:#fff;

    color:var(--theme);

    border:2px solid var(--theme);

    box-shadow:none;

}

.btn-email:hover{

    background:var(--theme);

    color:#fff;

    box-shadow:0 18px 40px rgba(0,0,0,.15);

}

@media(max-width:560px){

    .reservation-actions{

        flex-direction:column;

    }

}

/*====================================================
        SÉLECTEUR DE LANGUE (FR | EN)
====================================================*/

.lang-switch{

    display:flex;

    align-items:center;

    gap:2px;

    background:rgba(255,255,255,.12);

    border-radius:50px;

    padding:4px;

    backdrop-filter:blur(12px);

}

.lang-switch button{

    border:none;

    background:transparent;

    color:rgba(255,255,255,.75);

    font-family:'Poppins',sans-serif;

    font-size:13px;

    font-weight:600;

    letter-spacing:.5px;

    padding:7px 14px;

    border-radius:50px;

    cursor:pointer;

    transition:.3s;

}

.lang-switch button:hover{

    color:#fff;

}

.lang-switch button.active{

    background:var(--gold);

    color:#18212B;

}

header.sticky .lang-switch{

    background:rgba(24,33,43,.08);

}

header.sticky .lang-switch button{

    color:rgba(24,33,43,.65);

}

header.sticky .lang-switch button:hover{

    color:var(--dark);

}

header.sticky .lang-switch button.active{

    background:var(--gold);

    color:#fff;

}

@media(max-width:768px){

    .lang-switch{

        margin-right:8px;

    }

}

/*====================================================
        PAGE DE CONFIRMATION
====================================================*/

.confirmation-section{

    min-height:70vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:90px 20px;

    background:var(--light);

}

.confirmation-card{

    width:min(680px,94%);

    background:#fff;

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-lg);

    padding:70px 50px;

    text-align:center;

}

.confirmation-icon{

    width:90px;

    height:90px;

    margin:0 auto 30px;

    border-radius:50%;

    background:linear-gradient(135deg,var(--gold),var(--gold-light));

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:0 20px 40px rgba(212,175,55,.35);

}

.confirmation-icon i{

    font-size:36px;

    color:#fff;

}

.confirmation-card h1{

    font-family:'Playfair Display',serif;

    font-size:clamp(26px,4vw,36px);

    color:var(--dark);

    margin-bottom:24px;

}

.confirmation-card p{

    color:var(--text-light);

    font-size:16px;

    line-height:1.7;

    max-width:480px;

    margin:0 auto 8px;

}

.confirmation-note{

    margin-top:20px!important;

    padding-top:20px;

    border-top:1px solid var(--border);

    font-size:14px!important;

    font-style:italic;

    opacity:.85;

}

.confirmation-actions{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

    margin-top:40px;

}

@media(max-width:560px){

    .confirmation-card{

        padding:50px 26px;

    }

    .confirmation-actions{

        flex-direction:column;

    }

}