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

:root {

    --turquoise-fonce: #1f3f66;
    --turquoise: #356da8;
    --turquoise-clair: #8fb7dd;

    --creme: #f5f1e8;
    --blanc: #ffffff;

    --texte: #292929;
}


/* =========================================
   BASE
========================================= */

* {

    box-sizing:
        border-box;
}


html {

    scroll-behavior:
        smooth;
}


body {

    margin:
        0;

    font-family:
        Arial,
        sans-serif;

    color:
        var(--texte);

    background:
        var(--creme);
}


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

.header {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    padding:
        22px 7%;

    background:
        #25486f;

    color:
        var(--blanc);
}


.logo {

    font-size:
        24px;

    font-weight:
        bold;

    letter-spacing:
        2px;
}


.logo span {

    color:
        var(--turquoise-clair);
}


.menu {

    display:
        flex;

    gap:
        30px;
}


.menu a {

    color:
        white;

    text-decoration:
        none;

    font-size:
        15px;
}


.menu a:hover {

    color:
        var(--turquoise-clair);
}


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

.hero {

    position:
        relative;

    min-height:
        650px;

    display:
        flex;

    align-items:
        center;

    padding:
        80px 8%;

    overflow:
        hidden;
}


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

.hero-picture {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    z-index:
        0;
}


.hero-image {

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

    object-position:
        center;
}


/* =========================================
   DÉGRADÉ HERO
========================================= */

.hero::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            90deg,
            rgba(32, 58, 95, 0.98) 0%,
            rgba(32, 58, 95, 0.95) 30%,
            rgba(32, 58, 95, 0.70) 45%,
            rgba(32, 58, 95, 0.25) 58%,
            rgba(32, 58, 95, 0) 72%
        );

    z-index:
        1;

    pointer-events:
        none;
}


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

.hero-contenu {

    position:
        relative;

    z-index:
        2;

    max-width:
        650px;

    color:
        white;
}


.sur-titre {

    color:
        var(--turquoise);

    font-size:
        14px;

    font-weight:
        bold;

    letter-spacing:
        4px;
}


.hero .sur-titre {

    color:
        var(--turquoise-clair);
}


.hero h1 {

    margin:
        10px 0 20px;

    font-size:
        72px;

    font-weight:
        500;
}


.hero-texte {

    max-width:
        500px;

    margin-bottom:
        35px;

    font-size:
        21px;

    line-height:
        1.6;
}


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

.bouton {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        15px 30px;

    min-height:
        50px;

    border-radius:
        30px;

    background:
        var(--turquoise);

    color:
        white;

    text-decoration:
        none;

    font-weight:
        bold;

    line-height:
        1;

    transition:
        transform 0.2s;
}


.bouton:hover {

    background:
        #5a92cf;

    transform:
        translateY(-2px);
}


.bouton.secondaire {

    background:
        transparent;

    border:
        2px solid
        var(--turquoise-fonce);

    color:
        var(--turquoise-fonce);
}


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

.section {

    padding:
        100px 8%;
}


.section h2 {

    margin-top:
        8px;

    font-size:
        42px;

    color:
        var(--turquoise-fonce);
}


/* =========================================
   LE SALON
========================================= */

.salon {

    display:
        flex;

    align-items:
        center;

    gap:
        70px;
}


.salon-texte {

    flex:
        1;
}


.salon-texte p {

    line-height:
        1.8;

    font-size:
        17px;
}


.salon-image {

    flex:
        1;
}


.salon-image picture {

    display:
        block;

    width:
        100%;
}


.salon-image img {

    width:
        100%;

    max-height:
        500px;

    object-fit:
        cover;

    border-radius:
        8px;
}


/* =========================================
   PRESTATIONS
========================================= */

.prestations {

    text-align:
        center;

    background:
        white;
}


.grille-prestations {

    display:
        grid;

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

    gap:
        25px;

    margin-top:
        50px;
}


.carte {

    padding:
        35px 25px;

    background:
        var(--creme);

    border-radius:
        8px;

    transition:
       transform 0.2s;
}


.carte:hover {

    transform:
        translateY(-5px);
}


.carte h3 {

    margin-top:
        0;

    color:
        var(--turquoise-fonce);

    font-size:
        21px;
}


/* =========================================
   LISTE DES PRESTATIONS
========================================= */

.liste-prestations {

    list-style:
        none;

    padding:
        0;

    margin:
        25px 0 0;
}


.liste-prestations li {

    padding:
        7px 5px;

    font-size:
        16px;
}


/* =========================================
   HORAIRES
========================================= */

.horaires {

    display:
        flex;

    justify-content:
        center;

    gap:
        180px;

    background:
        var(--turquoise-fonce);

    color:
        white;
}


.horaires > div:first-child {

    width:
        350px;
}


.horaires h2 {

    color:
        white;
}


.sur-titre.clair {

    color:
        var(--turquoise-clair);
}


.liste-horaires {

    width:
        400px;
}


.liste-horaires p {

    display:
        flex;

    justify-content:
        space-between;

    padding:
        12px 0;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.2);
}


/* =========================================
   CONTACT
========================================= */

.contact {

    text-align:
        center;
}


.infos-pratiques {

    margin-top:
        25px;

    margin-bottom:
        30px;

    color:
        var(--turquoise-fonce);

    font-weight:
        600;
}


.contact-boutons {

    margin-top:
        35px;

    display:
        flex;

    justify-content:
        center;

    gap:
        15px;
}


/* =========================================
   MENU ITINÉRAIRE
========================================= */

.itineraire-menu {

    position:
        relative;
}


.itineraire-menu summary {

    list-style:
        none;

    cursor:
        pointer;
}


.itineraire-menu summary::-webkit-details-marker {

    display:
        none;
}


.itineraire-options {

    position:
        absolute;

    left:
        50%;

    top:
        calc(100% + 10px);

    transform:
        translateX(-50%);

    min-width:
        190px;

    padding:
        10px;

    background:
        white;

    border-radius:
        12px;

    box-shadow:
        0 8px 25px
        rgba(0, 0, 0, 0.15);

    z-index:
        100;
}


.itineraire-options a {

    display:
        block;

    padding:
        12px 15px;

    border-radius:
        8px;

    color:
        var(--texte);

    text-decoration:
        none;

    text-align:
        left;
}


.itineraire-options a:hover {

    background:
        var(--creme);

    color:
        var(--turquoise);
}


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

footer {

    padding:
        25px;

    text-align:
        center;

    background:
        #183638;

    color:
        white;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 800px) {


    .header {

        flex-direction:
            column;

        gap:
            20px;
    }


    .menu {

        flex-wrap:
            wrap;

        justify-content:
            center;

        gap:
            15px;
    }


    .hero {

        min-height:
            550px;

        text-align:
            center;

        justify-content:
            center;
    }


    .hero h1 {

        font-size:
            48px;
    }


    .hero-texte {

        font-size:
            18px;
    }


    .salon {

        flex-direction:
            column;
    }


    .grille-prestations {

        grid-template-columns:
            1fr;
    }


    .horaires {

        flex-direction:
            column;

        gap:
            30px;
    }


    .liste-horaires {

        width:
            100%;
    }


    .contact-boutons {

        flex-direction:
            column;

        align-items:
            center;
    }

}

/* =========================================
   DÉGRADÉ HERO MOBILE
========================================= */

@media (max-width: 800px) {

    .hero::before {

        background:
            linear-gradient(
                to bottom,
                rgba(32, 58, 95, 0.55) 0%,
                rgba(32, 58, 95, 0.72) 30%,
                rgba(32, 58, 95, 0.82) 50%,
                rgba(32, 58, 95, 0.72) 72%,
                rgba(32, 58, 95, 0.55) 100%
            );
    }

}