/*======================================================
                HOME.CSS
                ACCUEIL
======================================================*/

/*======================================================
                01. HERO ACCUEIL
======================================================*/


/*======================================================
                02. BIENVENUE
======================================================*/

.welcome{
    background:var(--white);
}

.welcome-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

.welcome-image{

    overflow:hidden;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

}

.welcome-image img{

    height:650px;

    transition:.6s;

}

.welcome-image:hover img{

    transform:scale(1.05);

}

.welcome-text h2{

    margin-bottom:30px;

}

.welcome-text p{

    margin-bottom:20px;

}

.welcome-infos{

    display:flex;

    gap:30px;

    margin:40px 0;

    flex-wrap:wrap;

}

.welcome-infos div{

    display:flex;

    align-items:center;

    gap:10px;

    font-weight:600;

}

.welcome-infos i{

    color:var(--primary);

    font-size:1.5rem;

}


/*======================================================
                03. NOS SPÉCIALITÉS
======================================================*/

.specialities{

    background:var(--secondary);

}

.speciality-grid{

    display:grid;

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

    gap:35px;

}

.speciality-card{

    background:white;

    border-radius:22px;

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:.35s;

}

.speciality-card:hover{

    transform:translateY(-12px);

}

.speciality-card img{

    height:240px;

    transition:.5s;

}

.speciality-card:hover img{

    transform:scale(1.08);

}

.speciality-card-content{

    padding:35px;

}

.speciality-card-content i{

    font-size:2rem;

    color:var(--primary);

    margin-bottom:20px;

}

.speciality-card-content h3{

    margin-bottom:15px;

}

.speciality-card-content p{

    min-height:110px;

}

.speciality-card-content a{

    color:var(--primary);

    font-weight:600;

}

/*======================================================
                04. LES INCONTOURNABLES
======================================================*/

.signature{

    background:white;

}

.signature-grid{

    display:grid;

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

    gap:30px;

}

.signature-speciality-card{

    overflow:hidden;

    border-radius:22px;

    box-shadow:var(--shadow);

    transition:.35s;

    background:white;

}

.signature-speciality-card:hover{

    transform:translateY(-10px);

}

.signature-speciality-card img{

    height:280px;

    transition:.5s;

}

.signature-speciality-card:hover img{

    transform:scale(1.08);

}

.signature-content{

    padding:30px;

}

.signature-content span{

    color:var(--primary);

    font-size:.9rem;

    text-transform:uppercase;

    letter-spacing:2px;

}

.signature-content h3{

    margin:15px 0;

}


/*======================================================
                05. NOS SALLES
======================================================*/

.rooms{

    background:var(--secondary);

}

.rooms-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.rooms-gallery{

    display:grid;

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

    gap:20px;

}

.rooms-gallery img{

    border-radius:18px;

    height:260px;

    box-shadow:var(--shadow);

    transition:.4s;

}

.rooms-gallery img:hover{

    transform:scale(1.04);

}


/*======================================================
                06. CHIFFRES CLÉS
======================================================*/

.numbers{

    background:var(--primary);

    color:white;

}

.numbers-grid{

    display:grid;

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

    gap:40px;

    text-align:center;

}

.numbers-grid div{

    padding:40px;

}

.numbers-grid h3{

    color:var(--secondary);

    font-size:2.8rem;

    margin-bottom:15px;

}

.numbers-grid strong{

    display:block;

    font-size:2rem;

    margin-bottom:10px;

}

.numbers-grid span{

    color:white;

}

/*======================================================
                07. VANNES ET SA FEMME
======================================================*/

.heritage{

    background:white;

}

.heritage-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.heritage-image{

    overflow:hidden;

    border-radius:22px;

    box-shadow:var(--shadow);

}

.heritage-image img{

    height:650px;

    transition:.6s;

}

.heritage-image:hover img{

    transform:scale(1.05);

}

.heritage-icons{

    display:flex;

    gap:35px;

    margin:40px 0;

    flex-wrap:wrap;

}

.heritage-icons div{

    display:flex;

    align-items:center;

    gap:10px;

    font-weight:600;

}

.heritage-icons i{

    color:var(--primary);

    font-size:1.4rem;

}



/*======================================================
                08. LOCALISATION
======================================================*/

.location{

    background:var(--secondary);

}

.location-grid{

    display:grid;

    grid-template-columns:380px 1fr;

    gap:50px;

    align-items:center;

}

.location-info{

    background:white;

    padding:45px;

    border-radius:22px;

    box-shadow:var(--shadow);

}

.location-info h3{

    margin-bottom:25px;

}

.location-info p{

    margin-bottom:25px;

}

.location-info a{

    color:var(--primary);

    font-weight:600;

}

.location-map{

    border-radius:22px;

    overflow:hidden;

    box-shadow:var(--shadow);

}

.location-map iframe{

    display:block;

    width:100%;

    height:500px;

    border:0;

}

/*====================================================
            BOUTON GOOGLE MAPS
====================================================*/

.location-info .btn-maps{

    color:var(--secondary);

}

.location-info .btn-maps:hover{

    color:var(--secondary);

}

/*======================================================
                09. RESPONSIVE HOME
======================================================*/

@media (max-width:992px){

    .welcome-grid,
    .rooms-grid,
    .heritage-grid,
    .location-grid{
        grid-template-columns:1fr;
        gap:45px;
    }

    .speciality-grid,
    .signature-grid{
        grid-template-columns:repeat(2,1fr);
        gap:24px;
    }

    .numbers-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media (max-width:768px){

    .speciality-grid,
    .signature-grid{
        grid-template-columns:repeat(2,1fr);
        gap:18px;
    }

    .speciality-card,
    .signature-speciality-card{
        border-radius:18px;
    }

    .speciality-card-content,
    .signature-content{
        padding:22px;
    }

    .speciality-card img,
    .signature-speciality-card img{
        width:100%;
        height:220px;
        object-fit:cover;
    }

    .speciality-card-content h3,
    .signature-content h3{
        font-size:1.4rem;
        line-height:1.3;
    }

    .speciality-card-content p,
    .signature-content p{
        min-height:auto;
        font-size:.95rem;
        line-height:1.6;
    }

    .welcome-image{
        order:-1;
    }

}

@media (max-width:576px){

    .speciality-grid,
    .signature-grid{
        grid-template-columns:1fr;
    }

    .numbers-grid{
        grid-template-columns:1fr;
    }

}
/*====================================================
            FIN
====================================================*/