/* RESET. */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

/* Déclare une police personnalisée "Garet-Book"  */
@font-face {
    font-family: 'Garet-Book';
    src: url('../fonts/garet/Garet-Book.woff2');
}

/* Déclare une autre police personnalisée "Garet-Heavy"  */
@font-face {
    font-family: 'Garet-Heavy';
    src: url('../fonts/garet/Garet-Heavy.woff2');
}

/* Animation qui change le fond pour un effet de gradient animé */
@keyframes hoverGradient {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

/* Animation apparition progressive des éléments, en partant de l'invisible et en montant */
@keyframes progressiveAppearance {
    0% {
        opacity: 0;
        visibility: hidden;
        margin-top: -50px;
    }

    100% {
        opacity: 1;
        visibility: visible;
        margin-top: 0;
    }
}

@keyframes shaker {
    0%{
        left: 0;

    }
    25%{
        left: -1px;

    }
    50%{
        left: 1px;

    }

    75%{
        left: -1px;
    }
    100%{
        left: 0;

    }
}

/* Variables CSS pour les couleurs et les polices de la marque */
:root {
    --brand-color-primary: #F17F4E;
    /* Couleur principale */
    --brand-color-secondary: #69b53a;
    /* Couleur secondaire */
    --brand-color-tertiary: #ffe6cf;
    /* Couleur tertiaire */
    --brand-white: #ffffff;
    /* Couleur blanche */
    --brand-black: #111E09;
    /* Couleur noire */
    --brand-text-font: 'Garet-Book', sans-serif;
    /* Police principale */
    --brand-text-font-bolder: 'Garet-Heavy', sans-serif;
    /* Police plus grasse */
    --brand-text-title: 'Lobster', sans-serif;
    /* Police pour les titres */
    --transition-all: all .3s ease-in-out;
    /* Transition pour les changements d'état */
}

/*  largeur maximale et une animation d'apparition progressive */
body {
    max-width: 1920px;
    margin: auto;
    animation: progressiveAppearance 2s 1;
}

h1,
h2,
h3 {
    font-family: var(--brand-text-title);
}

p {
    font-family: var(--brand-text-font);
    font-size: 16px;
}

/* hauteur minimale */
section {
    min-height: 80vh;
}

/* Boutons avec bordures arrondies, padding et transition */
.btn {
    border-radius: 25px;
    padding: 10px 30px;
    transition: var(--transition-all);
}

.btn-rempli {
    background-color: var(--brand-color-primary);

    a {
        color: var(--brand-white);
    }

    /* Effet de survol pour les boutons remplis et animation de gradient */
    &:hover {
        animation: hoverGradient 3s infinite;
        background: linear-gradient(90deg, #f1804e, #69b539);
        background-size: 400% 200%;
    }
}

.btn-bordure {
    border: 1px solid var(--brand-color-primary);
    color: var(--brand-color-primary);

    &:hover {
        background-color: var(--brand-color-primary);
        color: var(--brand-white);
    }
}

header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 5px 15px;
    align-items: center;

    nav {
        padding: 20px;

        .menuBurger{
            display: none;
            position: absolute;
            right: 10px;
            top: 50px;
            z-index: 999;
            .line{
                background-color: var(--brand-color-primary);
                width: 35px;
                height: 3px;
                transition: var(--transition-all);

            }
            &.active{
                .line{
                    &:nth-of-type(1) {
                        transform: translateY(5px) rotate(45deg);
                    }
                    &:nth-of-type(2) {
                        display: none;
                    }
                    &:nth-of-type(3) {
                        transform: translateY(-3px) rotate(-45deg);
                    }
                }
            } 
        }
        ul {
            list-style: none;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 80px;

            li {
                a {
                    font-family: var(--brand-text-title);
                    text-decoration: none;
                    color: var(--brand-black);
                    transition: var(--transition-all);
                }

                /* Change la couleur du texte au survol sauf pour le dernier élément */
                &:hover:not(:last-child) {
                    a {
                        color: var(--brand-color-primary);
                    }
                }
            }
        }
    }
}
/* responsive largeur max */
@media (max-width: 769px){

    header{

        img{
            z-index: 999; 
            /* pour que l'image soit au prmeier plan  */
        }
        nav {
            .menuBurger{
                /* menu burger */
                display: flex;
                flex-direction: column;
                gap: 5px;
                
            }
            padding: 0;
            ul {
                background-color: rgba(255,255,255,0.75);
                position: absolute;
                width: 100%;
                height: 100vh;
                top: 0;
                left: 0;
                display: none;
                flex-direction: column;
                justify-content: center;
                gap: 50px;
                &.active{
                    display: flex;
                }
                li{
                    a{
                        font-size: 40px;
                    }
                }
            }
        }
    }
    
    
}

main {
    #intro {
        background-color: var(--brand-color-tertiary);
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        flex-wrap: wrap;

        .accroche {
            width: 50%;
            padding: 50px;
            margin: auto;
            display: flex;
            flex-direction: column;
            gap: 50px;

            h1 {
                text-align: left;
                font-size: 30px;
                font-weight: 400;
                color: var(--brand-color-primary);
                /* var c'est pour appeler une variable déclarer au début, c'est pratique pour changer une couleur sans tout retaper */

                &::before {
                    background-image: url('../img/radis.svg');
                    vertical-align: middle;
                    background-size: 40px 40px;
                    margin-right: 10px;
                    display: inline-block;
                    width: 40px;
                    height: 40px;
                    content: ""; 
                    /* obliger de mettre content pour que ::before fonctionne */
                }
            }

            p {
                width: 60%;
                padding-left: 40px;
            }

            a {
                width: fit-content;
                margin-left: 40px;
                text-decoration: none;
                color: var(--brand-white);
                font-family: var(--brand-text-title);
            }
        }

        img {
            height: 80vh;
            width: 50%;
            object-fit: cover;
            /* image garde ses proportions et couvre tout le conteneur, des parties de l'image peuvent être coupées */
        }
    }

    @media(max-width : 769px){

        #intro{
            flex-wrap:wrap;

        .accroche, img {
            width: 100%;
        }

        .accroche{
            gap: 20px;

            p{
                width: 100%;
                padding-left: 0;
            }
        }

        img {
            width: 100%;
            height: auto;
        }

        }

        
    }

    #arguments {
        padding:50px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .container {
            align-self: flex-end;
            width: 90%;
            display: flex;
            column-gap: 75px;
            padding-right: 100px;

            article {
                position: relative;
                border: 1px solid var(--brand-color-secondary);
                border-radius: 25px;
                padding: 20px 15px;
                width: 33%;

                .icon {
                    position: absolute;
                    background-color: var(--brand-white);
                    top: 0px;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    padding: 15px;
                    border-radius: 50px;
                    border: 1px solid var(--brand-color-primary);

                    img {
                        max-width: 100%;
                        height: auto;

                        &.shaker{
                            cursor: pointer;
                            /* afficher un curseur */
                        }
                        
                    }

                    &:hover{
                        img{
                            &.shaker{
                                position: relative;
                                animation: shaker 1s ease-in-out infinite;
                            }
                        }
                    }
                }

                h3 {
                    margin: 50px 0;
                }

                p {
                    margin: 5px 0;
                }
            }
        }
    }

    @media (max-width:769px){

        #arguments{
            margin: 10px auto;

            .container{
                width: 100%;
                flex-wrap: wrap;
                row-gap: 75px;
                /* pour un seul sens */
                margin: 60px 0;
                padding-right: 0;
                article{
                    width: 100%;
                }
            }

        }

    }

    #horaires {
        min-height: fit-content;
        background-color: var(--brand-color-tertiary);
        padding-right: 50px;
        display: flex;

        img {
            width: 50%;
            height: auto;
            object-fit: cover;
        }

        .heures {
            width: 30%;
            padding: 50px;
            margin: auto;

            h2 {
                margin-bottom: 30px;
            }

            .horaires {
                display: flex;
                margin: 20px 0;
                justify-content: space-between;

                p {
                    font-family: var(--brand-text-title);

                    span {
                        color: var(--brand-color-secondary);
                    }
                    /* last child c'est qaund c'est juste sur le dernier enfant */
                    &:last-child {
                        font-family: var(--brand-text-font);
                    }
                }
            }

            .ferme {
                float: right;
                /* float c'est pour mettre à droite */
                font-family: var(--brand-text-title);

                span {
                    color: var(--brand-color-primary);
                    margin-right: 3px;
                }
            }
        }
    }

    @media (max-width:768px) {

        #horaires{
            padding-right: 0;
            .heures{
                width: 50%;
            }
        }
        
    }

    @media (max-width: 425px){
        #horaires{
            flex-wrap: wrap-reverse;
            .heures{
                width: 100%;
            }
            img{
                width: 100%;
            }
        }
    }

    #carte {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        padding: 50px;
        background-color: #FFFBF6;
        

        .accroche {
            width: 50%;
            margin-bottom: 30px;

            .h1-style {
                text-align: left;
                font-size: 30px;
                font-weight: 400;
                color: var(--brand-color-primary);
                margin-bottom: 30px;

                &::before {
                    background-image: url('../img/brochette.svg');
                    vertical-align: middle;
                    background-size: 40px 40px;
                    margin-right: 10px;
                    display: inline-block;
                    width: 40px;
                    height: 40px;
                    content: "";
                }
            }

            p {
                padding-left: 40px;
                margin-bottom: 50px;
                width: 75%;
            }

            a {
                width: fit-content;
                margin-left: 40px;
                text-decoration: none;
                font-family: var(--brand-text-title);
            }

        }

        img {
            border-radius: 25px;
        }
    }

    @media (max-width: 769px){
        #carte {
            flex-wrap: wrap;
            justify-content: center;

            .accroche{
                width: 100%;

                p{
                    width: 100%;
                    padding-left: 0;
                }
            }

            img{
                max-width: 100%;
                height: auto;
            }

        }
    }

    #contact {
        display: flex;
        justify-content: space-between;
        padding: 50px;

        .team {
            width: 50%;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;

            img {
                width: 33%;
                height: auto;

                &.pair {
                    margin-top: -30px;
                    margin-bottom: 30px;
                }
            }
        }

        .coordonnees {
            width: 45%;

            .gros-h2 {
                font-size: 50px;
                margin-top: -30px;
                margin-bottom: 30px;
            }

            .contact-infos {
                width: 75%;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .tel-adresse {
                    display: flex;
                    flex-direction: column;
                    gap: 20px;

                    i {
                        color: var(--brand-color-secondary);
                        font-size: 25px;
                        transition: var(--transition-all);

                        &.fa-phone {
                            transform: rotate(90deg);
                        }

                    }

                    .tel,
                    .adresse {
                        display: flex;
                        gap: 20px;
                        align-items: center;

                        a {
                            color: var(--brand-black);
                            text-decoration: none;
                            font-family: var(--brand-text-font);
                        }

                        &:hover{

                            i{
                                transform: rotate(360deg);
                                color: var(--brand-color-primary);
                            }
                        }
                    }
                }

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

                    a{
                        &:hover{
                            transform: rotate(15deg);
                        }
                    }
                }
            }

            form {
                width: 50%;
                margin: auto;
                margin-top: 30px;

                fieldset {
                    font-family: var(--brand-text-font);
                    border: 2px solid var(--brand-color-primary);
                    border-radius: 5px;
                    display: flex;
                    flex-direction: column;
                    gap: 20px;
                    padding: 10px 20px;

                    legend {
                        font-weight: 600;
                    }

                    input,
                    textarea {
                        font-family: var(--brand-text-font);
                        padding: 10px;
                        border: 1px solid #d1d5de;
                        background-color: transparent;
                        border-radius: 7px;
                        width: 70%;
                    }

                    .checkbox {
                        display: flex;
                        align-items: center;
                        font-family: Arial, sans-serif;
                        color: #666;
                    }

                    .checkbox input[type="checkbox"] {
                        width: 18px;
                        height: 18px;
                        cursor: pointer;
                        margin-right: 8px;
                        appearance: none;
                        background-color: #fff;
                        border: 1px solid #ccc;
                        border-radius: 3px;
                        position: relative;
                        transition: var(--transition-all);
                    }

                    .checkbox input[type="checkbox"]:checked::before {
                        content: '';
                        position: absolute;
                        width: 20px;
                        height: 20px;
                        top: 0;
                        left: 0;
                        background-color: var(--brand-color-primary);
                        border-radius: 2px;
                    }

                    textarea,
                    input#telephone {
                        width: 85%;
                    }

                    label {
                        margin-bottom: -15px;
                    }

                    button {
                        cursor: pointer;
                        background-color: transparent;
                        width: fit-content;
                        padding: 10px 20px;
                        font-size: 20px;
                        font-family: var(--brand-text-title);
                        margin-top: 30px;

                        &:hover {
                            background-color: var(--brand-color-primary);
                        }
                    }
                }
            }
        }
    }

    @media (max-width: 769px){
        #contact{
            flex-wrap: wrap-reverse;

            .team, .coordonnees{
                width: 100%;
            }

            .team{
                margin: 50px 0;
                max-height: none;
                img{
                    width: 48%;
                }
            }

            .coordonnees{
                form, .contact-infos{
                    width: 100%;
                }
            }
        }
    }

    @media (max-width:425px){
        #contact{

            .team{
                height: auto;
                img{
                    width: 100%;
                    &.pair{
                        margin-top: 0;
                        margin-bottom: 0;
                    }
                }
            }
        }
    }
}

footer {
    padding: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--brand-color-tertiary);

    .droits {
        text-align: right;
        margin-right: 200px;

        .evaluation {
            color: var(--brand-color-primary);
            font-family: var(--brand-text-title);
            font-size: 20px;
            margin-bottom: 30px;
        }
    }
}

@media (max-width: 769px){
    footer{
        .droits{
            margin-right: 0;
        }
    }
}