:root {
    --primary: #3a405a;
    --secondary: #2c8c99;
    --primary-txt: #eef5d8;
    --survol: #e9afa3;
    --primary-bg: #fff;
    --text-font: "Roboto", sans-serif;
    --title-font: "Montserrat", sans-serif;
}
body {
    background-color: var(--primary-bg);
    font-family: var(--text-font);
    font-size: 16px;
    color: var(--primary-txt);
    min-height: 100%;
    margin: 0;
    padding: 0;
}
.corps-page {
    margin-top: 4rem;
    min-height: calc(100vh - 8rem);
}
/* ---------------- */
/* toutes les pages */
/* ---------------- */
/* button */
.btn-custom {
    background-color: var(--secondary);
    color: var(--primary-txt);
    min-width: 7rem;
}
.btn-custom:hover, .btn-active, .nav-tabs .nav-link.active  {
    background-color: var(--survol);
    color: var(--primary);
}
.nav-tabs .nav-link:focus {
    color: var(--survol);
}
.icone_nav {
    color: var(--primary-bg)!important;
    font-family: var(--title-font);
}
.icone_nav:hover {
    color: var(--secondary);
}
/* surcharge style bootstrap */
.navbar {
    background-color: var(--primary) !important;
    max-height: 4rem;
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(238, 245, 216, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
.btn-link {
    text-decoration: none;
    color: var(--primary-txt);
}
.btn-link:hover {
    color: var(--survol);
}
.nav {
    border-bottom: none;
}
.form-label, .checkbox-inline {
    color: var(--primary);
}
footer .btn-link {
    font-size: 14px;
}
/* ------ */
/* footer */
/* ------ */
footer {
    background-color: var(--primary);
    color: var(--primary-txt);
    max-height: 4rem;
    font-size: 14px;
}
.icone {
    height: 30px;
    width: 30px;
}
.bg-icone {
    background-color: var(--primary-bg);
    height: 30px;
    width: 30px;
    border-radius: 15px;
}
.bg-icone:hover {
    background-color: var(--survol);
}
/* ----- */
/* pages */
/* ----- */

/* accueil */
h1 {
    color: var(--secondary);
    font-size: 50px;
    font-family: var(--title-font);
    font-weight: 700;
}
.txt-dark {
    color: var(--primary);
}
.txt-acceuil {
    z-index: 10;
    height: 80vh;
}
.baniere, .baniere-filtre {
    height:50vh;
    width: 100%;
}
.baniere {
    z-index: 1;
}
.baniere-filtre {
    background: linear-gradient(rgba(0,0,0,0),rgba(255,255,255,1));
    z-index: 2;
}
.txt-acceuil img {
    height: 50vh;
    width: 50vh;
    object-fit: cover;
}
/* cv */
.cv-background {
    background-color: var(--primary-txt);
    overflow: auto;
    height: 100vh;
}
.block-bg {
    background-color: var(--secondary);
}
h2 {
    font-size: 28px;
    font-family: var(--title-font);
}
h3 {
    font-size: 20px;
    font-family: var(--title-font);
}
ul {
    list-style-type: none;
}
/* portfolio */
.card-img-custom {
    max-height: 30vh;
    overflow: auto;
}
/* contact */
.map-contact {
    height: 40vh;
    width: 100%;
}
.contact-background {
    background-color: var(--primary-txt);
    color: var(--primary);
}
.form-background {
    background-color: var(--primary-bg);
}
.contact-background, .form-background {
    box-shadow: 10px 5px 15px var(--primary);
}
.img-contact {
    max-height: 25vh;
}
.hidden-form {
    display: none;
}
#form-hidden, #form-contact {
    color: var(--primary);
}
.btn-contact, .btn-contact:disabled {
    color: var(--primary);
    opacity: 1;
}

/* ---------- */
/* animation  */
/* ---------- */
/* accueil */
.star {
    position: absolute;
    top: 0px;
    color: var(--primary-bg);
    animation: animate 5s linear forwards;
}
.star::before {
    content: "|";
    text-shadow: 0 0 5px var(--primary-bg), 0 0 30px var(--primary-bg), 0 0 50px var(--primary-bg);
}
@keyframes animate {
    0% {
        transform: translateY(0) ;
        opacity: 1;
    }

    80% {
        opacity: 1;
    }
    100% {
        transform: translateY(90vh) ;
        opacity: 0;
        }
}

/* ---------- */
/* responsive */
/* ---------- */
@media (max-width: 767px) {
    body {
        font-size: 14px;
    }
    .corps-page {
        margin-top: 3rem;
    }
    .txt-acceuil img {
        height: 75vw;
        width: 75vw;
    }
    .baniere, .baniere-filtre {
        height: 100vw;
    }
    .txt-acceuil {
        height: auto;
    }
    h1 {
        font-size: 30px;
    }
    footer, .navbar {
        max-height: none;
    }
    h2 {
        font-size: 26px;
    }
    .form-background {
        position: absolute;
        top: 4rem;
    }
}
@media (min-width:768px) and (max-width: 991px) {
    .txt-acceuil img {
        height: 30vh;
        width: 30vh;
    }
    .txt-acceuil {
        height: auto;
    }
}