/* -------------------------------------------------
   Variables de couleur
   ------------------------------------------------- */
:root{
    --primary:#542344;   /* violet accent */
    --light:#f7f7f7;     /* gris très clair */
    --orange:#f9a627;    /* **nouvelle couleur orange** */
}

/* -------------------------------------------------
   Font‑face – Source Sans Pro (déclaré dans fonts.css)
   ------------------------------------------------- */
@import url("./fonts.css");

/* -------------------------------------------------
   Body & typographie générale
   ------------------------------------------------- */
body{
    font-family:'Source Sans Pro',system-ui,-apple-system,
                 BlinkMacSystemFont,"Segoe UI",Roboto,
                 "Helvetica Neue",Arial,sans-serif;
    background:#fff;
    color:#333;
}

/* -------------------------------------------------
   HERO
   ------------------------------------------------- */
.hero{
    background:#fff;
    color:#000;
    padding:80px 0;
}
.hero .hero-inner{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
}
.hero .hero-text{
    flex:1 1 300px;
    text-align:center;
}
.hero .hero-text h1{
    color:var(--primary);
    font-size:3rem;
    font-weight:700;
    margin-bottom:.5rem;
}
.hero .hero-text p{
    font-size:1.2rem;
    color:var(--primary);
}
.hero .hero-text p.themes{
    color:#000;
    font-style:italic;
}
.hero .hero-action{
    flex:0 0 auto;
    text-align:center;
}

/* -------------------------------------------------
   HERO – centrage du bouton sur mobile
   ------------------------------------------------- */
@media (max-width:640px) {
    /* 1️⃣ Empile le texte + le bouton et les centre */
    .hero .hero-inner{
        flex-direction:column;      /* texte au dessus, bouton en dessous */
        align-items:center;         /* centre horizontalement */
        justify-content:center;     /* supprime l'effet space‑between */
        text-align:center;          /* centre le texte à l'intérieur */
    }

    /* 2️⃣ Un petit espace entre le texte et le bouton */
    .hero .hero-action{
        margin-top:1rem;            /* espace vertical */
        width:100%;                 /* le bouton occupe toute la largeur du conteneur */
    }

    /* 3️⃣ Le bouton lui‑même reste centré */
    .hero .hero-action .reserve-btn{
        margin:0 auto;              /* centre le bouton même si width:auto */
        max-width:260px;            /* même largeur maximale que les autres boutons */
        width:100%;                 /* sur mobile il prend toute la largeur du .hero-action */
    }
}
/* -------------------------------------------------
   Boutons de réservation – variantes
   ------------------------------------------------- */

/* STYLE COMMUN (dimensions, arrondi, transition) */
.reserve-btn{
    border-radius:15px;
    padding:0.5rem 1rem;
    font-weight:600;
    cursor:pointer;
    transition:background .2s ease-in-out, color .2s ease-in-out;
    max-width:260px;
    width:100%;
}

/* ---------- 1️⃣ HERO BUTTON ---------- */
.hero-btn{
    background:var(--orange);
    color:var(--primary);
    border:2px solid var(--orange);
}
.hero-btn:hover{
    background:var(--primary);
    color:#fff;
}

/* ---------- 2️⃣ CARD BUTTON ---------- */
.card-btn{
    background:#fff;
    color:var(--orange);
    border:2px solid var(--primary);
}
.card-btn:hover{
    background:var(--orange);
    color:var(--primary);
}

/* ---------- 3️⃣ CONTACT BUTTON ---------- */
.contact-btn{
    background:var(--primary);
    color:var(--orange);    
    border:2px solid var(--primary);
}
.contact-btn:hover{
    background:var(--orange);
    color:var(--primary);
}
.reserve-btn.contact-btn{
    color:var(--orange);    
}

.reserve-btn.contact-btn:hover{
    background:var(--orange);
    color:var(--primary);   /* texte violet */
}

/* Sur écrans ≥ 768 px on retire le 100 % de largeur pour que le bouton garde sa taille “auto” */
@media (min-width:768px){
    .reserve-btn{
        width:auto;
    }
}

/* -------------------------------------------------
   MOSAÏQUE NUAGE
   ------------------------------------------------- */
.cloud-gallery{
    max-width:900px;
    margin:0 auto;
}
.cloud-gallery img{
    width:100%;
    height:auto;
    object-fit:cover;
    border-radius:6px;
}
.cloud-gallery .uk-grid{
    margin:-4px;
}
.cloud-gallery .uk-grid > *{
    padding:4px;
}

/* -------------------------------------------------
   BLOC 4 PARTIES
   ------------------------------------------------- */
.info-block{
    background:var(--light);
    padding:20px;
    border-radius:10px;
    text-align:left;
}
.info-block h3{
    color:var(--primary);
    margin-bottom:.4rem;
    font-weight:600;
}

/* -------------------------------------------------
   PRÉSENTATION (fond violet)
   ------------------------------------------------- */
.presentation{
    background:var(--primary);
    color:#fff;
    padding:60px 0;
}
.presentation .content{
    max-width:1100px;
    margin:0 auto;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:30px;
}
.presentation .text{
    flex:1 1 300px;
    margin:0 10px;
}
.presentation .text h2{
    color:var(--light);
    font-size:2.2rem;
    margin-bottom:.6rem;
}
.presentation .text p{
    line-height:1.6;
}
.presentation .photo{
    flex:0 0 250px;
}
.presentation .photo .circle{
    width:250px;
    height:250px;
    border-radius:50%;
    overflow:hidden;
    border:5px solid #fff;
}
.presentation .photo img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* -------------------------------------------------
   SLIDER AVIS
   ------------------------------------------------- */
.testimonial-slider{
    background:#f2f2f2;
    padding:40px 0;
}
.testimonial-card{
    background:#fff;
    border-radius:8px;
    padding:20px;
    margin:10px;
    box-shadow:0 2px 6px rgba(0,0,0,.08);
    text-align:left;
}
.testimonial-card blockquote{
    margin:0;
    font-style:italic;
    position:relative;
    padding-left:30px;
}
.testimonial-card blockquote::before{
    content:"\201C";
    font-size:3rem;
    color:var(--primary);
    position:absolute;
    left:0;
    top:-10px;
    line-height:1;
}
.testimonial-card blockquote::after{
    content:"\201D";
    font-size:3rem;
    color:var(--primary);
    position:absolute;
    right:-10px;
    bottom:-10px;
    line-height:1;
}
.testimonial-card .author{
    margin-top:15px;
    font-weight:600;
    color:#222;
}

/* Slider arrows – positioned outside the carousel */
.slider-wrapper{
    max-width:1200px;
    margin:0 auto;
    position:relative;
}
.slider-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:10;
    left:-30px;
}
.slider-arrow[uk-slidenav-next]{
    left:auto;
    right:-30px;
}
@media (max-width:640px){
    .slider-arrow{ left:-15px; }
    .slider-arrow[uk-slidenav-next]{ right:-15px; }
}

/* -------------------------------------------------
   CONTACT
   ------------------------------------------------- */
.contact{
    background:var(--light);
    padding:40px;
    border-radius:8px;
}
.contact a{
    color:var(--primary);
    text-decoration:none;
}
.contact a:hover{opacity:.8;}
.contact .uk-icon{
    margin-right:8px;
    vertical-align:middle;
}