/* ---- SETTINGS DE BASE ---- */
@font-face {font-family: 'Rabbid'; src: url('./Sources/Polices/RabbidHighwaySignII.woff2')format('opentype');;font-weight: normal;font-style: normal;}
@font-face {font-family: 'Brandon Black'; src: url('./Sources/Polices/HvDTrial_Brandon_Grotesque_black-BF64a625c944b08.woff2')format('opentype');;font-weight: 900;font-style: normal;}
@font-face {font-family: 'Brandon Regular'; src: url('./Sources/Polices/HvDTrial_Brandon_Grotesque_regular-BF64a625c9311e1.woff2')format('opentype');;font-weight: 400;font-style: normal;}

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}
a{
    text-decoration: none;
    color: unset;
}
h1{
    font-size: 32px;
    font-family: 'Rabbid';
    color: #ff5129;
    text-transform: uppercase;
}
h2{
    font-size: 24px;
    font-family: 'Rabbid';
    color: #000249;
    text-transform: uppercase;
}
h3{
    font-size: 20px;
    font-family: 'Brandon Black';
    color: #000249;
}
p{
    font-size: 18px;
    font-family: 'Brandon Regular';
}
.text-nav{
    font-size: 24px;
    font-family: 'Brandon Regular';
}
.text-bouton{
    font-size: 24px;
    font-family: 'Brandon Regular';
}
/*----- PAGE 404 -----*/
.erreur{
    height: 75vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}
.logo_404{
    width: 15vw;

}
.icon_404{
    width: 10vw;
}

/* ---------- SECTION ---------- */
/*---- HEADER ----*/
.nav{
    position: fixed;
    z-index: 10;
    width: 100%;
    background: linear-gradient(180deg, #fff 75%, rgba(255, 255, 255, 0));
    display: flex;
    gap: 64px;
    padding: 32px 64px;
}
.logo-nav{
    width: 250px;
    height: auto;
}
.nav-container{
    align-items: center;
    justify-content: space-evenly;
    display: flex;
    width: 100%;
    gap: 64px;
}
.bouton-nav{
    border-radius: 8px;
    background-color: #000249;
    padding: 1px 8px;
    width: fit-content;
    height: fit-content;
    color: white;
    &:hover{
        box-shadow: 0px 0px 16px #000249;
        background-color: #fff;
        color: #000249;
        border: 2px solid #000249;
    }
}
#burger-toggle {
    display: none;
}
.burger {
    display: none;
    cursor: pointer;
    width: 30px;
}
.burger>span {
    display: block;
    height: 3px;
    background: black;
    margin: 5px 0;
}

/*---- PREMIER ECRANS ----*/
#first-screen{
    display: flex;
    flex-direction: column;
    padding: 192px 64px 64px 64px;
    width: 100%;
    gap: 128px;
    min-height: 100vh;
    max-height: fit-content;
}
.first-screen-section{
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
}
.first-screen-picto{
    align-self: stretch;
    width: 150px;
    overflow: hidden;
    flex-shrink: 0;
}
.first-screen-container{
    display: flex;
    gap: 64px;
    justify-content: left;
}
.bouton-1{
    border-radius: 8px;
    background-color: #ff5129;
    padding: 1px 8px;
    color: white;
    width: fit-content;
    height: fit-content;
    &:hover{
        box-shadow: -8px 8px 16px #ff5129;
    }
}
.bouton-2{
    border-radius: 8px;
    border: 2px solid #ff5129;
    padding: 1px 8px;
    color: #ff5129;
    width: fit-content;
    height: fit-content;
    &:hover{
        box-shadow: 8px 8px 16px #ff5129;
    }
}

/*---- BANDEAU REFERENCE ----*/
.bandeau-ref{
    padding: 128px 64px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.carousel {
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
}
.container-carousel {
    display: flex;
    gap: 32px;
    width: max-content;
    height: fit-content;
    animation: defilement 40s linear infinite;
    &:hover{
      animation-play-state: paused;
    }
}
.slide {
    flex-shrink: 0;
    padding: 0 10px;
    align-content: center;
}
.slide img {
    max-width: 200px;
    max-height: 200px;
    width: 100%;
    border-radius: 8px;
}
@keyframes defilement {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/*---- PROBLEME/PROMESSE ----*/
.p-b{
    display: flex;
    flex-direction: column;
    padding: 128px 64px;
    width: 100%;
    height: fit-content;
    gap: 16px;
}

/*---- 3 PILIERS ----*/
.pilier{
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 128px 64px;
    box-sizing: border-box;
    text-align: left;
    gap: 32px;
}
.pilier-container{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}
.carte-1{
    height: fit-content;
    width: 300px;
    box-shadow: -8px 8px 16px #ff5129;
    border-radius: 16px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    box-sizing: border-box;
    gap: 16px;
    &:hover{
        box-shadow: none;
        border: 2px solid #ff5129;
    }
}
.image-cartes-1{
    max-height: 125px;
}

/*---- SECTEUR D'ACTIVITÉ ----*/
.secteur{
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    background-color: #ff5129;
    padding: 64px 64px;
}

/*---- COLLABORATION ----*/
#collab{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    padding: 128px 64px;
}
.container-collab{
    display: flex;
    gap: 5%;
}
.cartes-2{
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-sizing: border-box;
    border: 2px solid #000249;
    border-radius: 8px;
    padding: 16px;
    height: fit-content;
    width: 300px;
    &:hover{
        box-shadow: -8px 8px 32px #000249;
    }
}
.collab-num{
    height: 50px;
    width: 50px;
    box-sizing: border-box;
    border: 2px solid #000249;
    padding: 15px 18px;
    color: #000249;
    font-size: 18px;
    font-family: 'Rabbid';
    border-radius: 32px;
}

/*---- NOS VALEURS ----*/
.valeurs{
    padding: 128px 64px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.container-valeurs{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 32px;
}

/*---- BIOGRAPHIE ----*/
#fondateur{
    display: flex;
    padding: 128px 64px;
    gap: 32px;
}
.image-fondateur{
    height: 200px;
    width: 200px;
}
.container-fondateur{
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/*---- CONTACT ----*/
#contact{
    padding: 128px 64px;
    justify-items: center;
}

/*---- FOOTER ----*/
footer{
    font-size: 18px;
    color: #000249;
    font-family: 'Brandon Regular';
    width: 100%;
    position: relative;
    background: linear-gradient(180deg, #fff, #ff5129);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 132px 64px 32px;
    box-sizing: border-box;
    gap: 16px;
}
.footer-nav{
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0px;
    text-align: left;
}
.footer-logo{
    position: relative;
    width: 200px;
}
.footer-pages{
    display: flex;
    flex-direction: column;
    width: 200px;
}
.footer-contact{
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 16px;
    width: 200px;
}
.footer-reseaux{
    display: flex;
    gap: 8px;
    align-items: center;
}
.mentions-obligatoires{
    align-self: stretch;
    display: flex;
    justify-content: space-between;
}
.text-footer-1{
    width: 200px;
    text-align: center;
}
.text-footer-2{
    width: 200px;
}

/*-------------------- VERSION TABLETTE --------------------*/
/*---------- Taille 720px - 1024px ----------*/
@media (max-width: 1024px) {
    /*------- SETTINGS DE BASE -------*/
    h1{
        font-size: 28px;
        font-family: 'Rabbid';
        color: #ff5129;
        text-transform: uppercase;
    }
    h2{
        font-size: 22px;
        font-family: 'Rabbid';
        color: #000249;
        text-transform: uppercase;
    }
    h3{
        font-size: 20px;
        font-family: 'Brandon Black';
        color: #000249;
    }
    p{
        font-size: 16px;
        font-family: 'Brandon Regular';
    }
    .text-nav{
        font-size: 22px;
        font-family: 'Brandon Regular';
    }
    .text-bouton{
        font-size: 22px;
        font-family: 'Brandon Regular';
    }
    /*------- SECTIONS -------*/
    /*---- HEADER ----*/
    header{
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .burger {
        display: block;
        position: absolute;
        right: 20px;
    }
    .nav-container{
        display: none;
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        flex-direction: column;
        padding: 20px;
        background: white;
    }
    #burger-toggle:checked~nav {
        display: flex;
    }
    #burger-toggle:checked + .burger span:nth-child(1) {
        transform: rotate(45deg) translate(6px, 6px);
    }

    #burger-toggle:checked + .burger span:nth-child(2) {
        opacity: 0;
    }

    #burger-toggle:checked + .burger span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }
    .burger span {
        transition: 0.3s;
    }
    /*---- PREMIER ECRAN ----*/
    .pilier-container{
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 32px;
    }
    .carte-1:nth-child(3){
        grid-column: 1/3;
        justify-self: center;
    }
    .image-cartes-1{
        max-height: 100px;
    }
}