/* font-family: 'Abril Fatface', cursive; */
/* font-family: 'Kaushan Script', cursive; */
*,
/* ::before,
::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
} */

/* === root/html === */
:root {
    /* palette couleur */
    --main-white: #f4f4f4;
    --shade-white: #d3d3d3;
    --main-black: #181818;
    --main-yellow: #e6d28c;
    --dark-yellow: #f4cb38;

    /* Fonts */
    --font-title: Kaushan Script, serif;
    --font-base: Lato, sans-serif;

    /* Font-size */
    --size-title: calc(3rem + 4vw);
    --size-sub-title: calc(1.5rem + 2vw);
    --size-section-title: calc(1.5rem + 2vw);
    --text-sm: 1.4rem;
    --text-base: 1.6rem;
    --text-md: 1.8rem;
    --text-lg: 2rem;
    --text-xl: 2.4rem;
    --text-2xl: 3rem;
    --text-3xl: 3.6rem;
    --text-4xl: 4.2rem;
    --text-5xl: 5rem;
    --text-6xl: 6rem;
    --text-7xl: 7.2rem;

    /* Spacing */
    --space-1: 0.1rem;
    --space-2: 0.2rem;
    --space-4: 0.4rem;
    --space-6: 0.6rem;
    --space-8: 0.8rem;
    --space-10: 1rem;
    --space-12: 1.2rem;
    --space-16: 1.6rem;
    --space-20: 2rem;
    --space-28: 2.8rem;
    --space-36: 3.6rem;
    --space-44: 4.4rem;
    --space-52: 5.2rem;
    --space-60: 6rem;
    --space-72: 7.2rem;
    --space-84: 8.4rem;
    --space-96: 9.6rem;
}

html {
    font-size: 62.5%;
    behavior: "smooth";
}
body {
    font-family: var(--font-base);
    background-color: #f7f7f7;
}

/* === Header / Nav === */
#home {
    width: 100%;
    height: 95vh;
}
.container {
    max-width: 1100px;
}
/* setting Navigation */
.navigation {
    width: 100%;
    padding: var(--space-12);
    background-color: var(--main-yellow);
    border-bottom: 1px solid var(--main-black);
}
/* setting navbar-brand */
.navbar-brand {
    color: var(--main-black) !important;
    font-size: 45px !important ;
    font-family: "Kaushan Script" !important;
    transition: all 0.4s ease;
}
/* setting ul */
.navbar-nav {
    margin-left: auto;
}
/* setting li */
.nav-item {
    margin-right: var(--space-20);
}
/* setting a */
.nav-link {
    color: var(--main-black) !important;
    font-family: var(--font-base) !important;
    font-size: var(--text-lg);
    font-weight: 400;
    padding: var(--space-10) var(--space-20);
    text-transform: uppercase;
    transition: all 0.3s ease;
    text-decoration: underline dotted;
    text-decoration-style: dotted;
    text-underline-offset: 6px;
}
.nav-link:hover {
    color: #fff !important;
    background-color: #b8860b;
    border-radius: 6px;
    transition: 0.3s ease-in-out;
}
/* setting button hamburger nav */
/* to do faire anim avec la croix */
nav button img {
    width: var(--text-3xl);
    height: var(--text-3xl);
}
/* setting animation resize navbar */
.navbar.resize {
    height: auto;
    opacity: 0.9;
    transition: all 0.4s ease;
}
.navbar.resize .navbar-brand {
    font-size: var(--text-3xl) !important;
    transition: all 0.4s ease;
}
.navbar.resize a {
    font-size: var(--text-md);
    transition: all 0.4s ease;
} /* ---------------------- */

/*=== setting scroll to top ===*/
/**** Scroll top ****/
.scrolltop {
    position: fixed;
    right: 3rem;
    bottom: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.3rem;
    color: black;
    background: #fff;
    border-radius: 0.4rem;
    z-index: 100;
    transition: 0.4s;
    visibility: hidden;
    text-decoration: none;
}

.scrolltop:hover {
    color: #fff;
    background-color: #000000b0;
    transition: 0.4s;
}

.scrolltop__icon {
    font-size: 50px;
}

/* Show scrolltop */
.active {
    visibility: visible;
}
/* responsive scrollup */
@media screen and (max-width: 576px) {
    .scrolltop__icon {
    font-size: 40px;
}
}

/* === global utilities class === */
/* setting h1 h2 p */
.main-title {
    color: var(--main-white);
    font-family: var(--font-title);
    font-size: var(--size-title);
    font-weight: 500;
}
.sub-title {
    color: var(--shade-white);
    font-family: var(--sub-title);
    font-size: var(--size-sub-title);
    font-weight: 300;
}
.section-title {
    font-family: var(--font-title);
    font-size: var(--size-section-title);
    font-weight: 300;
    letter-spacing: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 7px;
}
.section-title img {
    width: var(--text-6xl);
    margin-left: var(--space-16);
}
/* responsive */
@media screen and (max-width: 992px) {
    .section-title img {
        width: var(--text-4xl);
    }
}
.section-sub-title {
    font-size: var(--text-xl);
    text-align: center;
    margin: var(--space-20) 0 var(--space-36);
}
.heading-h3 {
    display: flex;
    align-items: center;
    font-size: var(--text-lg);
}
.heading-h3 img {
    width: var(--text-6xl);
    margin-right: var(--space-6);
}
.heading-h4 {
    font-size: var(--text-lg);
}
.heading-h3,
.heading-h4 {
    font-family: var(--font-title);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* setting section hero */
.hero {
    height: 95vh;
    min-height: 750px;
    /* padding-top: 200px; */
    background-image: url(../img/hero-background.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 10%;
    position: relative;
}
.hero-link {
    min-width: 15.5rem;
    padding: var(--space-8) var(--space-12);
    font-size: var(--text-xl);
    font-family: var(--font-base);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    cursor: pointer;
    color: var(--main-black);
    border-radius: 5px;
    text-decoration: none;
}
.hero-link-1 {
    background-color: var(--main-yellow);
}
.hero-link-1:hover {
    color: var(--main-black);
    background-color: var(--dark-yellow);
}
.hero-link-2 {
    background-color: var(--main-white);
}
.hero-link-2:hover {
    color: var(--main-dark);
    background-color: var(--shade-white);
}
.hero-link span {
    text-decoration: underline dotted;
    text-underline-offset: 5px;
    text-decoration-color: var(--main-black);
}
.hero-link img {
    width: var(--text-xl);
    margin-left: var(--space-4);
}
/* important */
.hero-link span,
.hero-link img {
    pointer-events: none;
}

/* === section about === */
#about {
    width: 100%;
    height: 95vh;
    background: var(--main-white);
}
/* col left */
.about-text {
    color: var(--main-black);
    font-size: var(--text-md);
    font-family: var(--font-base);
    letter-spacing: 0.5px;
    padding-bottom: var(--space-16);
    border-bottom: 1px solid var(--main-black);
}
/* col right */
.about-slide-show {
    box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0, 0, 0, 0);
}
/* responsive  */
@media screen and (max-width: 992px) {
    #about {
        height: auto;
        padding: var(--space-84) var(--space-20);
    }
    .about-slide-show {
        margin-top: var(--space-28);
    }
    .heading-h3 {
        height: var(--space-72);
    }
    .about-text {
        height: auto;
    }
}

/* === section prestations === */
#prestations {
    width: 100%;
    height: 95vh;
    background: var(--main-black);
}
/* setting color title/text */
.prestations .section-title,
.prestations .section-sub-title {
    color: var(--main-white);
}
.prestations .black-title,
.prestations .heading-h3,
.prestations .heading-h4,
.prestations p {
    color: var(--main-black);
}

/* setting img title */
.prestations h2 img {
    transform: rotate(5deg);
}
/* setting card */
.prestations-card {
    width: 500px;
    height: auto;
    padding: var(--space-28);
    background-color: var(--main-yellow);
    border-radius: 5px;
}
/* setting list ul */
.prestations-list {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-top: var(--space-28);
}
.prestations-list li {
    height: 110px;
}
.prestations-list .heading-h4 {
    font-size: var(--text-lg);
    font-family: var(--font-base);
    font-weight: 700;
    margin-bottom: var(--space-8);
}

.prestations-list p {
    font-size: var(--text-md);
    font-family: var(--font-base);
    padding-bottom: var(--space-4);
}
.prestations-list p strong {
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: 0.5px;
    padding-bottom: var(--space-4);
}
.prestations-list p em {
    font-style: italic;
    font-weight: 400;
    padding-bottom: var(--space-4);
}
.prestations-list hr {
    border: none;
    border-bottom: 1px dashed var(--main-black);
}
/* responsive  */
@media screen and (max-width: 1200px) {
    #prestations {
        height: auto;
        padding: var(--space-36) 0;
    }
    .prestations-card {
        width: 60%;
        margin: 0 auto;
    }
    .prestations-card-right {
        margin-top: var(--space-16);
    }
}
@media screen and (max-width: 992px) {
    .prestations-card {
        width: 90%;
    }
}

/* === section aboutus === */
#aboutus {
    width: 100%;
    height: 95vh;
    background: var(--main-white);
}
/* setting color title/text */
.aboutus .section-title,
.aboutus .section-sub-title {
    color: var(--main-black);
}
.aboutus .black-title,
.aboutus .heading-h3,
.aboutus .heading-h4,
.aboutus p {
    color: var(--main-white);
}

/* setting img title */
.aboutus h2 img {
    transform: rotate(5deg);
}
/* setting card */
.team-card {
    width: 300px;
    color: var(--main-yellow);
    border-radius: 5px;
    box-shadow: 0px 15px 13px -7px var(--main-black),
        5px 5px 15px 5px rgba(0, 0, 0, 0.5);
    background-image: radial-gradient(
            circle at center center,
            transparent,
            rgb(33, 33, 33)
        ),
        repeating-linear-gradient(
            135deg,
            rgb(33, 33, 33) 0px,
            rgb(33, 33, 33) 2px,
            transparent 2px,
            transparent 10px,
            rgb(33, 33, 33) 10px,
            rgb(33, 33, 33) 11px,
            transparent 11px,
            transparent 21px
        ),
        repeating-linear-gradient(
            45deg,
            rgb(47, 47, 47) 0px,
            rgb(47, 47, 47) 4px,
            transparent 4px,
            transparent 8px
        ),
        linear-gradient(90deg, rgb(33, 33, 33), rgb(33, 33, 33));
    transition: all 0.2s ease-out;
}
.team-card:hover {
    transform: translateY(-10px);
    transition: all 0.2s ease-out;
    box-shadow: 0px 15px 13px -7px var(--main-black),
        15px 15px 20px 5px rgba(0, 0, 0, 0.5);
}
.profile-img {
    max-width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: center;
    border-radius: 5px 5px 0 0;
}
.card-content {
    padding: var(--space-20);
}
.card-name {
    font-size: var(--text-lg);
}
.social-img {
    width: 20px;
}
.card-description {
    font-size: var(--text-md);
    margin-top: var(--space-28);
}
/* responsive  */
@media screen and (max-width: 992px) {
    #aboutus {
        height: auto;
        padding: var(--space-36) 0;
    }
    .team-card {
        margin: var(--space-16) auto;
    }
}
/* === section testimonials === */
.testimonials {
    background: url(../img/testimonial.jpg);
    background-size: cover;
    background-position: 0 80%;
    padding: var(--space-84);
}
.text-slideshow-container {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    background-color: rgba(0, 0, 0, 0.345);
    overflow: hidden;
}
.sliding-container {
    display: flex;
    color: var(--main-white);
    animation: carousel 16s ease-in-out infinite;
}
@keyframes carousel {
    0%,
    20% {
        transform: translateX(0);
    }
    25%,
    40% {
        transform: translateX(-100%);
    }
    45%,
    60% {
        transform: translateX(-200%);
    }
    65%,
    85% {
        transform: translateX(-300%);
    }
    100% {
        transform: translateX(-400%);
    }
}
.text-slide {
    width: 100%;
    text-align: center;
    padding: var(--space-44);
    flex-shrink: 0;
}
.testimonial-text {
    font-size: var(--text-4xl);
    font-family: var(--font-base);
    margin-bottom: var(--space-6);
}
.testimonial-autor {
    font-size: var(--text-lg);
}
/* === section contact === */
#contact {
    width: 100%;
    height: 95vh;
    background: var(--main-white);
}

/* -- col left -- */
.adress-block {
    min-width: 350px;
    background-color: var(--main-black);
    padding: var(--space-16) var(--space-20);
    border-radius: 5px;
}
.adress-block:nth-child(1) {
    margin-bottom: var(--space-16);
}
.adress-block p:nth-child(1) {
    text-align: center;
    color: var(--main-yellow);
    font-size: var(--text-2xl);
    font-family: var(--font-title);
    letter-spacing: 0.5px;
    padding-bottom: var(--space-28);
}
.adress-block p {
    color: var(--main-yellow);
    font-size: var(--text-lg);
    font-family: var(--font-base);
    letter-spacing: 0.5px;
    padding-bottom: var(--space-16);
}
.adress-block img {
    width: var(--text-xl);
    margin-right: var(--space-16);
}

/* -- col right -- */
.schedule {
    min-width: 350px;
    padding: 0 var(--space-28);
}
.schedule h3 {
    text-align: center;
    font-family: var(--font-title);
    font-size: var(--text-2xl);
    text-transform: uppercase;
    padding: var(--space-16);
    background-color: var(--main-yellow);
    border-radius: 50px 10px;
}
.schedule p {
    font-family: var(--font-base);
    font-size: var(--text-xl);
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    /* margin: var(--space-20) 0; */
    padding: var(--space-12) var(--space-20);
    /* padding-right: var(--space-20); */
    border-bottom: 1px solid var(--main-yellow);
}
.schedule p:nth-child(7) {
    font-weight: 600;
    background-color: var(--main-yellow);
    padding: var(--space-8) var(--space-20);
    border-radius: 8px;
}

/* responsive  */
@media screen and (max-width: 992px) {
    #contact {
        height: auto;
        padding: var(--space-36) 0;
    }
    .adress-block,
    .schedule {
        margin-top: var(--space-28);
        width: 80%;
        margin: var(--space-28) auto var(--space-28);
    }
    .schedule h3 {
        font-size: var(--text-xl);
    }
}

/* === section footer === */
footer {
    height: var(--space-52);
    background-color: var(--main-black);
}
footer p {
    font-size: var(--text-lg);
    color: var(--main-white);
}
footer p a {
    font-size: var(--text-lg);
    color: var(--main-yellow);
    text-decoration: none;
}

/* === section cookie === */
#cookieModal {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.9);
    display: none;
    justify-content: center;
    align-items: flex-end;
}
#cookieModal.active {
    display: flex;
}
#cookieContent {
    width: auto;
    height: auto;
    padding: var(--space-20) var(--space-28);
    background-color: var(--main-yellow);
}
#cookieContent img {
    display: block;
    width: 100px;
    margin: 20px auto;
}
#cookieContent p {
    text-align: justify;
    font-family: var(--font-base);
    color: var(--main-black);
    font-size: var(--text-lg);
    line-height: var(--space-28);
}
#cookieContent a {
    font-size: var(--text-md);
    text-decoration: none;
}
.hide {
    visibility: hidden;
    bottom: 0;
    right: 2em;
}
.show {
    visibility: visible;
    bottom: 2em;
    right: 2em;
}
/* show popup */
@media only screen and (max-width: 576px) {
    #cookiePopup {
        width: 100%;
    }
    .hide {
        bottom: 2em;
        right: 0;
    }
    .show {
        right: 0;
        bottom: 0;
    }
    #cookieContent img {
    display: block;
    width: 50px;
    margin: 10px auto;
}
}