/**
 * GENERAL
 */
body {
    font-family: 'Century Gothic';
    --color-bg-general: #F2F4F6;
    --color-bg-header: #FFFFFF;
    --color-bg-footer: #FFFFFF;
    --color-bg-nav: #F2F4F6;
    --color-bg-nav-active: #3368AD;
    --color-font-navbtn: #FFFFFF;
    --color-bg-titre: #2B69A9;
    --color-border-cadres: #D4DBE1;
    --color-grey: #6a7481;
    --color-bg-soustitre: #EC7423;
    --color-font-soustitre: #2B69A9;
    --color-bg-btn: #EC7423;
    --color-btn-more: #EC7423;
}

p {
    margin: 0;
    padding: 0;
}

.body-headsecond {
    background-color: var(--color-bg-general);
}

strong, b {
    font-weight: 600;
}

/**
 * SECTION HEADER
 */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 3;
}

    .header .back svg {
        position: absolute;
        top: 18px;
        left: 20px;
        fill: var(--color-bg-nav-active);
    }

    .header .logo a {
        display: block;
        height: 63px;
        background-color: var(--color-bg-header);
        background-image: var(--url-images-logo);
        background-repeat: no-repeat;
        background-position: center center;
    }

    .header .nav {
        border-bottom: 5px solid var(--color-bg-nav-active);
    }

        .header .nav li {
            display: block;
            width: 50%;
            background-color: var(--color-bg-general);
            align-items: center;
        }

            .header .nav li.actif {
                background-color: var(--color-bg-nav-active);
            }

            .header .nav li a {
                position: relative;
                display: block;
                width: 100%;
                height: 74px;
                color: var(--color-bg-nav-active);
                line-height: 22px;
                font-size: 18px;
                font-weight: bold;
                text-transform: uppercase;
                text-decoration: none;
                text-align: center;
            }

            .header .nav li.actif a {
                color: var(--color-font-navbtn);
            }

            .header .nav li a span {
                position: absolute;
                top: 50%;
                left: 0;
                right: 0;
                transform: translateY(-50%);
            }

.titre {
    display: flex;
    height: 60px;
    background-color: var(--color-bg-titre);
    justify-content: center;
}

    .titre p {
        font-weight: 600;
        color: var(--color-font-navbtn);
        text-transform: uppercase;
        align-self: center;
    }

    .titre.bandeau-animation {
        background-color: var(--color-bg-soustitre);
    }

/**
 * SECTION CONTENT
 */
.body-headnormal.content {
    margin-top: 124px;
}

.body-headsecond.content {
    margin-top: 105px;
    /*margin-top: 80px;*/
}

.content.content-section {
    position: relative;
    margin-bottom: 70px;
}

.content.voyage-mes-documents, .content.voyage-mon-hotel, .content.voyage-mon-equipe, .content.mes-animations, .content.contact {
    position: relative;
    margin-bottom: 40px;
    padding-bottom: 60px;
}

    .content.voyage-mon-hotel ul {
        text-align: left;
        text-indent: 0;
    }

    .content.voyage-mon-hotel p {
        text-align: justify;
        text-indent: 1em;
    }

        .content.voyage-mon-hotel p:not(:first-child) {
            padding-top: 0.5em;
        }

.content .sections {
    margin-bottom: 5px;
}

.content .sous-titre {
    padding-bottom: 10px;
    color: var(--color-font-soustitre);
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
}

.content .cadres {
    margin: 0 20px 20px 20px;
    padding: 20px;
    background-color: var(--color-bg-header);
    border: 1px solid var(--color-border-cadres);
    text-align: center;
}

    .content .cadres.cadre-haut {
        margin-top: 20px;
    }

.btn-pdf, .btn-commencer, .btn-valider {
    display: inline-block;
    padding: 8px 20px;
    background-color: var(--color-bg-btn);
    border-radius: 0;
}

.content .cadres .btn-call, .content .cadres .btn-chat {
    display: inline-block;
    padding: 8px 20px;
    background-color: var(--color-bg-btn);
    border-radius: 0;
}

    .content .cadres .btn-call a, .content .cadres .btn-chat a {
        position: relative;
        padding: 0 0 0 35px;
        color: var(--color-font-navbtn);
        text-transform: uppercase;
        text-decoration: none;
    }

        .content .cadres .btn-call a::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 22px;
            height: 22px;
            background-image: url("data:image/svg+xml,%3csvg fill='white' width='22' height='22' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m 14.13,14.97 c -3.6,0 -6.946,-1.92 -9.36,-4.5 C 2.572,8.131 0.9736,5.045 1.004,1.779 1.027,1.227 1.6,0.9193 2.103,1 2.969,1 3.836,0.984 4.701,1.01 5.329,1.11 5.432,1.77 5.516,2.284 5.635,3.001 5.84,3.708 5.895,4.433 5.875,5.058 5.264,5.37 4.895,5.794 4.498,6.179 4.101,6.565 3.704,6.95 c 1.155,2.057 2.881,3.78 4.872,5.04 0.357,0.37 0.67,0.31 0.93,-0.1 0.564,-0.54 1.074,-1.13 1.674,-1.63 0.4,-0.336 0.86,-0.1 1.3,0 0.62,0.14 1.27,0.23 1.89,0.41 0.56,0.15 0.68,0.75 0.63,1.26 v 2.4 c -0.1,0.38 -0.5,0.76 -0.85,0.65 z'/%3e%3c/svg%3e");
        }

        .content .cadres .btn-chat a::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 22px;
            height: 22px;
            background-image: url("data:image/svg+xml,%3csvg fill='white' width='22' height='22' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13.601 2.326A7.85 7.85 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.9 7.9 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.9 7.9 0 0 0 13.6 2.326zM7.994 14.521a6.6 6.6 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.56 6.56 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592m3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.73.73 0 0 0-.529.247c-.182.198-.691.677-.691 1.654s.71 1.916.81 2.049c.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232'/%3e%3c/svg%3e");
        }

.content .icone {
    padding-bottom: 10px;
}

.content .cadre-text {
    margin-bottom: 20px;
}

    .content .cadre-text p {
        font-size: 14px;
        line-height: var(--cadre-line-height);
        color: var(--color-grey);
    }

    .content .cadre-text.text-light p {
        font-weight: 300;
    }

.content .carrousel-photo img, .content .intro-photo img {
    width: 100%;
    object-fit: cover;
}

.content .intro-photo img {
    max-height: 124px;
}

.content.une-sortie .intro-photo img {
    max-height: unset;
}

.content .situation {
    margin: 20px;
    text-align: center;
}

.content .cadres .equipe-photos {
    margin-bottom: 10px;
    text-align: center;
}

    .content .cadres .equipe-photos img {
        border-radius: 50%;
        max-width: 100px;
    }

.sous-titre.h3 {
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-grey);
    text-transform: none;
}

.content .cadre-text.fin-cadre {
    margin-bottom: 0;
}

.content.mes-animations, .content.vos-soirees, .content.vos-journees, .content.vos-sorties, .content.une-sortie {
    text-align: center;
    margin-bottom: 80px;
}

.vos-journees .cadre-text p, .fun-club .cadre-text p {
    margin: 20px 40px;
}

.intro-photo.btn-voirtout {
    position: relative;
    text-align: center;
}

    .intro-photo.btn-voirtout .filtre {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #000000;
        opacity: 0.3;
    }

    .intro-photo.btn-voirtout a span {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
        right: 0;
        font-size: 18px;
        font-weight: 700;
        color: var(--color-font-navbtn);
        text-transform: uppercase;
        text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
    }

.vos-soirees {
    margin-bottom: 0;
}

.content.contact {
    margin-top: 130px;
}

    .content.contact .cadre-text.text-light {
        margin-bottom: 10px;
    }

.content .soiree, .content .journee, .content .sortie {
    margin-bottom: 5px;
}

.content .une-soiree, .content .une-journee, .content .une-sortie {
    margin-bottom: 60px;
}

.une-soiree .cadre-text, .une-sortie .cadre-text {
    margin: 20px;
    text-align: center;
}

    .une-sortie .cadre-text.detail {
        background-color: rgba(248,249,250,1);
        padding: .25rem;
        border: 1px solid #dee2e6;
    }
/**
 * SECTION FOOTER
 */
.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}

    .footer .nav {
        height: 70px;
        background-color: var(--color-bg-footer);
    }

        .footer .nav li {
            display: block;
            top: 50%;
            width: 25%;
            background-repeat: no-repeat;
            background-position-x: center;
            background-position-y: 10px;
            text-align: center;
        }

            .footer .nav li a {
                position: relative;
                display: block;
                height: 100%;
                font-size: var(--footer-nav-font-size);
                color: var(--color-bg-nav-active);
                text-decoration: none;
                padding-top: 12px;
            }

                .footer .nav li a span {
                    position: relative;
                    font-weight: 600;
                }

            .footer .nav li.link-account {
                background-image: var(--url-images-ico-moncompte);
            }

                .footer .nav li.link-account.actif {
                    background-image: var(--url-images-ico-moncompte-actif);
                }