:root {
    --black-color: #000000;
    --black-opacity-color: #000000b3;
    --grey-color: #f7f6f5;
    --med-grey-color: #e2e0de;
    --dark-grey-color: #636262;
    --white-color: #FFFFFF;
    --orange-color: #E17020;
    --blue-color: #A1BDC4;
    --dark-blue-color: #3A5F6B;
    --border-color: #e4e0dd;
    --card-color: #1e1d1b;

    --title-size: 35px;
    --subtitle-size: 30px;
    --quote-size: 25px;
    --text-size: 20px;
    --small-text-size: 15px;

    --space-in: 20px;
    --space-element: 25px;
    --row-space-to-title: 25px;
    --space-top-element: 120px;
    --space-to-banner: 100px;
    --space-admin: 100px;

    --border-radius: 12px;
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;

    font-family: 'Raleway', sans-serif;
    text-decoration: none;
    color: inherit;
    list-style: none;
}

html, body {
    position: relative;
    scroll-behavior: smooth;
    height: 100%;
    width: 100%;

    background-color: var(--grey-color);
}

/* BUTTON TOP */

.button-top {
    position: fixed;
    bottom: 50px;
    right: 50px;
    height: 70px;
    width: 70px;

    z-index: 100;
    background-color: var(--white-color);
    border-radius: 50%;
    overflow: hidden;
}
.button-top img {
    height: 100%;
    cursor: pointer;
    filter: invert(70%) sepia(81%) saturate(4076%) hue-rotate(346deg) brightness(91%) contrast(94%);
}

/* CONTAINER & CONTENT */

.container {
    margin: 0 auto;

    height: auto;
    width: 1400px;
}

.content {
    width: 100%;
}
.content:not(:first-child) {
    margin-top: var(--space-top-element);
}

.content h1 {
    font-size: var(--title-size);
    color: var(--black-color);
}

.content h2 {
    font-size: var(--title-size);
    color: var(--black-color);
}

.content h2.sub {
    font-size: calc(var(--title-size) - 5px);
    color: var(--orange-color);
}

/* HEADER */

header {
    position: absolute;
    z-index: 100;

    height: 100px;
    width: 100%;
}

header .container {
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

header .logo { height: 60%; }
header .logo img { height: 100%; filter: invert(100%); }

/* Navbar */ 

header ul {
    display: flex;
    align-items: center;
}

header ul li {
    padding: 5px 10px;
}

header ul li a {
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 700;

    color: var(--white-color);
}

.contact-link{
    font-size: 15px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--white-color)!important;

    padding: 10px 15px;
    
    background-color: var(--orange-color);
    border-radius: 5px;
}

/* Social */

.social_banner {
    z-index: 100;
    position: absolute;
    bottom: 25px;
    right: 25px;

    display: flex;
}

.social_banner .social_icon {
    height: 50px;
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
}

.social_banner .social_icon img {
    width: 50%;
    filter: brightness(0) invert(1);
    transition: all .2s;
}

/* Sub Nav */

.web .dropdown { position: relative; }

.web .subnav {
    display: none;

    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--white-color);

    z-index: 10;
}

.web .dropdown:hover .subnav { display: block; }

.web .subnav li { padding: 10px; }
.web .subnav a { color: var(--black-color); text-decoration: none; }
.web .subnav a:hover { color: var(--orange-color); }

.mobile_menu .dropdown { position: relative; }

.mobile_menu .subnav { margin-top: 10px; display: none; }

.mobile_menu .subnav li { padding: 5px; }
.mobile_menu .subnav li::before {
    content: '-';
    color: var(--white-color);
    margin-right: 10px;
}

.web .dropdown p {
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 700;

    color: var(--white-color);
    cursor: pointer;
}

/* MOBILE NAV */

header .container .mobile { display: none; }
header .container .mobile li i {
    font-size: 23px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--white-color);
}

.mobile_menu {
    z-index: 1000;
    position: fixed;
    width: 100%;
    min-width: 100%;
    height: 100vh;
    min-height: 100%;
    background-color: var(--black-color);

    display: none;
    align-items: center;
    justify-content: center;
}

.mobile_menu i {
    position: absolute;
    top: 50px;
    right: 50px;
    font-size: 23px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--white-color);

    transform: rotate(45deg);
}

.mobile_menu ul {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.mobile_menu ul li a, .mobile_menu ul li p {
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--white-color);
}

.mobile_menu ul .logo {
    text-align: center;
}

.mobile_menu ul .logo img {
    height: 60px;
    margin-bottom: 25px;

    filter: invert(100%);
}

/* BANNER */

.banner {
    position: relative;
    overflow: hidden;

    height: 650px;
    width: 100%;

    margin-bottom: var(--space-to-banner);
}
.min-banner {
    height: 450px!important;
}

.banner .button {
    position: absolute;
    z-index: 50;

    bottom: 50px;
    left: 50%;
    transform: translate(-50%, 0);
}
.banner .button i {
    font-size: 20px;
    color: var(--white-color);

    cursor: pointer;
}

.banner-item {
    height: 100%;
    width: 100%;

    z-index: 10;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;

    display: flex;
    justify-content: center;
    align-items: center;

    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), var(--banner);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: var(--black-color);
    
    transition: opacity 0.5s ease-in-out;
}
.banner-item.solo-item { opacity: 1; }

.banner-item .block img {
    height: 130px;
    filter: invert(100%);
}

.banner-item .block {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.banner-item .block.border {
    padding: 0 15px;
    border-right: 13px solid var(--orange-color);
    border-left: 13px solid var(--orange-color);
}

.banner-item .block h2 { font-size: 2.5em; }
.banner-item .block h3 { font-size: 6em; line-height: 0.8em; }

.banner-item .block h2, .banner-item .block h3 {
    text-transform: uppercase;
    color: var(--white-color);
    font-weight: 700px;
}

.banner-item.active {
    opacity: 1;
}

.banner-arrow {
    z-index: 20;

    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    font-size: 24px;
    color: var(--white-color);
    cursor: pointer;
}

.banner-arrow.left { left: 50px; }
.banner-arrow.right { right: 50px; }

/* LITTLE BANNER : QUOTE & CONTACT & TARIF */

.little-banner {
    position: relative;

    min-height: 270px;
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    background-color: var(--white-color);
    border-radius: var(--border-radius);
    box-shadow: 2px 4px 12px #00000014;

    padding: 50px;
}
.little-banner {
    flex-direction: column;
    gap: 10px;
}

.little-banner .text {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.little-banner h3 {
    font-size: var(--subtitle-size);
    color: var(--black-color);
}

.little-banner h3.sub {
    font-size: calc(var(--subtitle-size) - 5px);
    color: var(--orange-color);
    margin-top: 15px;
}

.little-banner h4 {
    font-size: var(--text-size);
    font-weight: 600;
    color: var(--black-color);

    display: flex;
    gap: 15px;
}

.little-banner p {
    font-size: var(--text-size);
    color: var(--black-color);
}

.little-banner a {
    margin-top: 10px;
}

.little-banner a .button {
    font-size: var(--text-size);
    color: var(--white-color);

    padding: 5px 10px;
    background-color: var(--orange-color);
    border-radius: 5px;

    display: inline-block;
}
.quote p {
    font-style: italic;
}

.little-banner img {
    position: absolute;
    top: var(--space-in);
    left: var(--space-in);
    
    height: 70px;
    opacity: 5%;
}

/* PRESENTATION */

.presentation {
    text-align: center;
}

.presentation .card-list {
    display: flex;
    gap: 25px;
    justify-content: center;

    margin-top: 50px;
}

.presentation .card-list .card {
    position: relative;
    height: 270px;
    width: 270px;

    display: flex;
    justify-content: center;
    align-items: end;

    padding: var(--space-in);

    border-radius: var(--border-radius);
    background-color: var(--white-color);
    box-shadow: 2px 4px 12px #00000014;
}

.presentation .card-list .card p {
    font-size: var(--text-size);
    font-weight: bold;
    color: var(--black-color);

    margin-bottom: var(--space-in);
}

.presentation .card-list .card .icon {
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;

    height: 60px;
}

/* EVENTS */

.events .event-list {
    position: relative;

    display: flex;
    gap: 20px;
    justify-content: space-between;

    padding: 0 calc(var(--space-element) + 40px);
    margin-top: var(--row-space-to-title);
}

/* Event Button */

.events .event-list button {
    z-index: 20;

    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    height: 40px;
    width: 40px;

    display: flex;
    justify-content: center;
    align-items: center;

    border: none;
    border-radius: 50%;
    overflow: hidden;

    cursor: pointer;
    background-color: var(--med-grey-color);
}

.events .event-list button i {
    font-size: 20px;
    color: var(--dark-grey-color);
}

.events .event-list button.prev { left: 0; }
.events .event-list button.prev i { margin-top: 2px; margin-right: 2px; }

.events .event-list button.next { right: 0; }
.events .event-list button.next i { margin-top: 2px; margin-left: 3px; }

/* Event Card */

.events .event-list .card {
    position: relative;
    height: 270px;
    width: 440px;

    display: flex;
    justify-content: end;
    flex-direction: column;

    border-radius: var(--border-radius);

    background-image: var(--card-cover);
    background-size: cover;
    background-position: center center;
    background-color: var(--white-color);
    box-shadow: 2px 4px 12px #00000014;

    overflow: hidden;
}
.events .event-list .card::before {
    content: '';
    position: absolute;
    z-index: 10;
    display: flex;
    left: 0;
    right: 0;
    top: 40%;
    bottom: 0;
    background: linear-gradient(to bottom, transparent, rgb(18 18 18) 100%);
}

.events .event-list .card .infos {
    z-index: 100;
    padding: var(--space-in);
}

.events .event-list .card h4 {
    font-size: var(--text-size);
    font-weight: bold;
    color: var(--orange-color);
}
.events .event-list .card p {
    font-size: var(--small-text-size);
    font-weight: bold;
    color: var(--white-color);
}

.events .event-list .card span {
    font-size: var(--small-text-size);
    font-weight: bold;
    color: var(--white-color);
}

/* TESTIMONIES */

.testimonies {
    text-align: center;
}

.testimonies a {
    font-size: var(--text-size);
    font-weight: bold;
    color: var(--orange-color);
}

.testimonies .testimonie-list {
    display: flex;
    gap: 20px;
    justify-content: space-between;

    margin-top: var(--row-space-to-title);
    margin-bottom: 20px;
}

.testimonies .testimonie-list .card {
    position: relative;
    width: 440px;

    display: flex;
    flex-direction: column;
    padding: 25px;

    border-radius: var(--border-radius);
    background-color: var(--white-color);
    box-shadow: 2px 4px 12px #00000014;

    text-align: left;
}

.testimonies .testimonie-list .card .profile {
    height: 60px;

    display: flex;
    align-items: center;
    gap: 10px;
}
.testimonies .testimonie-list .card .profile img {
    height: 80%;
    border-radius: 50%;
}
.testimonies .testimonie-list .card .profile h4 {
    font-size: var(--text-size);
    font-weight: bold;
    color: var(--black-color);
}

.testimonies .testimonie-list .card .text {
    padding: 10px;
}
.testimonies .testimonie-list .card .text p {
    font-size: var(--small-text-size);
    color: var(--black-color);
}

/* ARTICLE */

.article {
    display: flex;
    flex-direction: column;
}

.article .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
}

.article .row.reverse {
    flex-direction: row-reverse;
}

.article .image {
    height: 450px;
    width: 650px;

    background: var(--article-cover);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: var(--white-color);
    box-shadow: 2px 4px 12px #00000014;

    border-radius: var(--border-radius);
}
.article .image.top {
    background-position: center center;
}

.article .text {
    display: flex;
    flex-direction: column;
    gap: 20px;

    width: 100%;
}
.article .row .text {
    max-width: 650px;
}

.article .text p {
    font-size: var(--text-size);
    color: var(--black-color);
    line-height: 25px;
}
.article .text p.colorized {
    color: var(--orange-color);
}
.article .text sup {
    font-size: var(--small-text-size);
}

.article .text ul {
    margin-left: 20px;
}

.article .text ul li {
    list-style-type: disc;
}
.article .text ul li:not(:last-child) {
    margin-bottom: 10px;
}

/* CURSUS */

.cursus ul {
    margin-top: var(--row-space-to-title);
    border-left: 10px solid #e17020c6;
}
.little-cursus ul {
    border-width: 0;
    margin-left: 12px!important;
}

.cursus li {
    position: relative;
    padding-left: 50px;
    list-style-type: none!important;
}
.little-cursus li {
    padding-left: 30px;
}

.cursus li::before {
    content: '';
    position: absolute;
    z-index: 10;
    left: -20px;
    right: 0;
    top: -1px;
    bottom: 0;
    
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background-color: var(--orange-color);
}
.little-cursus li::before {
    top: 4px;
    height: 16px;
    width: 16px;
    left: -11px;
}
.cursus li:not(:last-child) {
    margin-bottom: 50px;
}

.cursus p {
    font-size: var(--text-size); 
}

.cursus a {
    text-decoration: underline;
}

/* FOOTER */

footer {
    margin-top: var(--space-top-element);

    height: 100px;
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;

    color: var(--white-color);

    background-color: var(--black-color);
}

footer img {
    height: 50px;
    filter: invert(100%);
}

footer .infos p {
    font-weight: bold;
}

footer .infos a {
    text-decoration: underline;
}

/* WEBSITE-EDITOR */

.website-editor {
    height: 50px;
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;

    color: var(--white-color);

    background-color: var(--orange-color);
}
.website-editor a strong {
    text-decoration: underline;
}

/* RESPONSIVE */

@media screen and (max-width: 1500px) {

    :root {
        --space-to-banner: 80px;
    }

    .button-top {
        bottom: 25px;
        right: 25px;
    }

    header { width: 100%; }
    .container { width: 100%; padding: 0 50px; }
    .events .event-list { gap: 25px; }

    .article .row .text { width: 60%; }

}

@media screen and (max-width: 1200px) {

    :root {
        --title-size: 30px;
        --subtitle-size: 25px;
        --quote-size: 18px;
        --text-size: 18px;
    
        --space-top-element: 80px;
        --space-to-banner: 60px;
    }

    .button-top { height: 60px; width: 60px; }
    

    header { height: 80px; }
    header .contact-link { font-size: 13px; }

    header .container .web { display: none; }
    header .container .mobile { display: flex; }

    .banner { height: 500px; }
    .min-banner { height: 350px!important; }
    .banner-item .block h2 { font-size: 1.5em; }
    .banner-item .block h3 { font-size: 4em; }
    .banner-item .block.border { border-right-width: 10px; border-left-width: 10px; }

    .banner-arrow { display: none!important; }
    .banner .button { bottom: 25px; }
    .banner .button i { font-size: 18px; }

    .little-banner h4 { flex-direction: column; gap: 10px; }
    .little-banner .icon { height: 60px; }

    .events .event-list, .card-list, .testimonie-list { flex-direction: column; }
    .events .event-list .card, .testimonies .testimonie-list .card { width: 100%; }

    .presentation .card-list .card { height: 160px; width: 100%; padding: 5px; }
    .presentation .card-list .card .icon { height: 50px; }
    
    .article .row { flex-direction: column!important; gap: 25px; }
    .article .row .image {  height: 400px; width: 100%; }
    .article .row .text { width: 100%; max-width: none; }

    .cursus ul { border-left-width: 8px; }
    .little-cursus ul { border: none; }
    .cursus li { padding-left: 25px; }
    .cursus li::before, :not(.little-cursus li::before) { height: 25px; width: 25px; left: -16px; }

}

@media screen and (max-width: 500px) {
    :root {
        --space-top-element: 60px;
        --space-to-banner: 25px;
    }

    .button-top { height: 50px; width: 50px; }

    .little-banner { padding: 25px; }
    .little-banner .icon { height: 50px; }

    .container { padding: 0 25px; }

    .content h2 { overflow-wrap: break-word; }

    .banner { height: 350px; }
    .banner-item .block h2 { font-size: 1.2em; }
    .banner-item .block h3 { font-size: 2.8em; }
    .banner-item .block.border { border-right-width: 10px; border-left-width: 10px; }

    .social_banner {
        bottom: 10px;
        right: 10px;
    }

    .events .event-list .card { height: 200px; padding: 10px; }
    .events .event-list .card .infos { padding: calc(var(--space-in) - 10px); }

    .article .row { margin-top: 15px; }
    .article .row .image { height: 270px; }

    footer {
        height: auto;
        flex-direction: column;
        padding: 50px;
    }

}