:root {
    --color1: #FFF7E5;
    --color2: #1A1200;
    --color3: #FFC33E;
    --color4: #EB5E25;
    --color5: #E7267B;
    --padding-side1: 1rem;
    --padding-side2: 2rem;
    --padding-top1: 0.5rem;
    --padding-button: 0.3rem;
    --padding-box: 5vh;
    --margin-box: 20vh;
    --titre-1: 2rem;
    --titre-2: 1.5rem;
    --titre-3: 1.125rem;
    --sous-titre: 0.875rem;
    --texte: 1rem;
    --colonne-crea : 2 ;
    --colonne-ecri : 1 ;
    --scale-bird : 150%;
    --left-bird : 0svw ;
}
html{
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    text-decoration: none;
    height: max-content;
    width: 100%;
}

#text {
    color: var(--color2);
}

.titre-1 {
    font-family: Creato Display;
    font-size: var(--titre-1);
    font-weight: 900;
    text-transform: uppercase;
}

.sous-titre {
    font-family: Sk-Modernist;
    font-size: var(--sous-titre);
    text-transform: uppercase;
}

.titre-2 {
    font-family: Creato Display;
    font-size: var(--titre-2);
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    padding: var(--padding-top1) var(--padding-side2);
    margin: 5svh 0 3svh 0;
    color: var(--color2);

}

.titre-3 {
    font-family: Sk-Modernist;
    font-size: var(--titre-3);
    font-weight: bold;
    text-transform: uppercase;
}

.texte-important {
    font-size: var(--texte);
    font-weight: bold;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Fibra one;
    font-size: var(--texte);
    overflow-x: hidden;
    max-width: 100svw;
    header {
        background-image: linear-gradient(to right, var(--color3), var(--color4));
        position: fixed;
        top: 0px;
        padding: var(--padding-top1) var(--padding-side1);
        z-index: 5;
        min-height: 5svh;
        align-content: center;
        .navigation_interne {
            display: grid;
            grid-template-columns: max-content max-content;
            align-items: center;
            justify-content: space-between;
            column-gap: auto;
            
            * {
                color: white;
            }

            .navigation_interne_vitrine {
                display: grid;
                grid-template-columns: max-content max-content;
                justify-content: space-between;
                column-gap: var(--padding-side1);
                min-width: 10vw;

                a{
                    background: transparent;
                    padding: var(--padding-button);
                    border-radius: 5px;
                    transition: ease-in-out 100ms; 
                }
                a:hover{
                    background: var(--color4) ;
                    transition: ease-in-out 200ms;
                }
            }

            .navigation_interne_demande {
                display: block;
                justify-items: end;
                justify-content: space-evenly;
                align-items: center;
                background-color: white;
                color: var(--color4);
                padding: var(--padding-button);
                border-radius: 5px;
                transition: ease-in-out 100ms;
                span {
                    display: flex;
                    position: relative;
                    place-self: center;
                    color: var(--color4);
                    transition: ease-in-out 100ms;
                }

                .navigation_demande_texte {
                    display: none;
                    color: var(--color4);
                    transition: ease-in-out 100ms;
                    font-weight: normal;

                }

                .navigation_demande_icon {
                    display: flex;
                    color: var(--color4);
                    transition: ease-in-out 100ms;
                }
            }
            .navigation_interne_demande:hover{
                background-color: var(--color2);
                transition: ease-in-out 200ms;
                *{
                    color: white;
                    transition: ease-in-out 200ms;
                }
            }


        }
    }


    main {
        background-color: white;

        >div {
            min-height: 100svh;
        }


        .main_accueil {
            position: relative;
            display: block;
            align-content: end;
            padding: var(--padding-side2);
            z-index: 1;
            height: 100svh;
            margin-bottom: var(--margin-box);

            h1 {
                display: block;
                overflow: hidden;
                color: var(--color2);
                justify-items: end;

                strong {
                    display: block;
                    color: var(--color4);
                }
            }
        }
        
        .main_accueil::before {
            content: "" ;
            background-image: url(./content/img/img_chaos.webp) ;
            background-position-y: bottom;
            background-position-x: var(--left-bird);
            background-size: var(--scale-bird);
            background-repeat: no-repeat;
            position: absolute;
            bottom: 0;
            left: 0;
            display: flex;
            align-self: center;
            width: 100svw;
            height: 100svh;
            max-width: 1200svw;
            opacity: 5%;
            z-index: 0;
        }

        .main_prestation {
            display: block;
            align-content: space-between;

            .prestation {
                padding: var(--padding-box) 0;
                margin-bottom: var(--margin-box);

                .prestation_creation {
                    display: grid;
                    grid-template-columns: repeat( var(--colonne-crea), auto);
                    gap: 0;

                    position: relative;

                    .creation_figure {
                        position: relative;
                        height: 100%;
                        overflow: hidden;
                        transform: scale(1);
                        transition: ease-out 200ms;

                        .creation_img {
                            height: 100%;

                        }

                        .creation_carrousel {
                            display: grid;
                            grid-template-columns: 1fr 1fr;
                            width: 200%;
                            height: 100%;
                            animation: carrousel 10s ease-in-out infinite;
                        }
                    }

                }
                .prestation_partie{
                    min-height: 50svh;
                }
                .prestation_partie::after {
                    content: "";
                    display: block;
                    position: absolute;
                    bottom: calc( var(--margin-box)/2 * -1);
                    justify-self: center;
                    background-color: var(--color4);
                    width: calc(100vw - 2 *var(--padding-side2));
                    height: 5px;

                }

                .prestation_ecriture {
                    display: grid;
                    grid-template-columns: repeat( var(--colonne-ecri), auto);
                    gap: 0;
                    row-gap: 0;
                    position: relative;

                    .ecriture_figure {
                        position: relative;
                        height: max-content;
                        overflow: hidden;
                        transition: ease-out 200ms;
                        line-height: 0;

                        .ecriture_video {
                            width: 100%;
                            height: 100%;
                            max-width: 100vw;

                        }
                    }
                }

                figcaption {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    color: white;
                    background: linear-gradient(-45deg, var(--color4), var(--color3));
                    transform: translateY(+100%);
                    transition: ease-out 200ms;
                    align-content: end;

                    h3 {
                        padding: var(--padding-button);
                        line-height: normal;
                    }

                    span {
                        display: block;
                        position: relative;
                        background: linear-gradient(to right, var(--color3), var(--color4));
                        color: white;
                        padding: var(--padding-button);
                        width: 100%;
                        line-height: normal;
                    }
                }

                figure:hover {

                    figcaption {
                        transform: translateY(0%);
                    }
                }

            }
            .prestation_avis{
                background: var(--color2);
                padding: var(--padding-top1) var(--padding-side2);
                color: white;

                .avis_hook{
                    font-size: var(--texte);
                    padding: var(--padding-button) 0;
                    text-align: center;
                    text-transform: uppercase;
                    font-weight: bold;

                }
                .avis_texte{
                    font-size: var(--texte);
                    display: block;
                    padding: var(--padding-button) 0;
                    text-align: justify;
                    text-align-last: center;
                    color: white ;
                    opacity: 40%;
                    
                }

            }


        }

        .main_contact {
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: max-content auto;
            padding: var(--padding-box) 0;
            font-size: var(--texte);
            .main_contact_formulaire {
                display: flex;
                flex-direction: column;
                position: relative;
                max-height: 600px;
                height: 100%;
                justify-content: space-between;
                justify-self: center;

                margin: auto;
                .formulaire_partie {
                    padding: 0 var(--padding-side2);
                    position: relative;
                    justify-self: center;
                    align-self: center;
                    width: 100%;
                    max-width: 1000px;

                    .formulaire_partie_champ {
                        display: block;
                        border: none;
                        font-family: Fibra one;
                        padding: var(--padding-button);
                        border-bottom: 1px solid var(--color2);
                        width: 100%;
                        margin-bottom: 2svh;
                        transition: ease-in-out 100ms;
                        resize: none;
                        border-radius: 0;

                    }
                    .formulaire_partie_champ[placeholder]{
                        font-size: var(--texte);
                    }
                    .formulaire_partie_champ:focus {
                        outline: none;
                        border-bottom: 1px solid var(--color4);
                        transition: ease-in-out 200ms;
                    }

                    .formulaire_partie_button {
                        min-width: 100%;
                        font-family: Fibra one;
                        border: none;
                        border-radius: none;
                        background: var(--color4);
                        padding: var(--padding-button);
                        color: white;
                        text-transform: uppercase;
                        font-size: var(--texte);
                        transition: ease-in-out 100ms;
                        position: relative;
                        letter-spacing: calc( var(--texte)/10);
                        border-radius: 0;
                        text-align: center;

                    }
                    .formulaire_partie_button:hover{
                        background: var(--color2);
                        transition: ease-in-out 200ms;
                        width: 95%;
                        letter-spacing: normal;
                    }
                }

            }

        }


    }

    footer {
        background-image: linear-gradient(to right, var(--color3), var(--color4));
        padding: var(--padding-top1) var(--padding-side1);
        color: var(--color3);
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.3rem;
        justify-content: center;
        min-height: 5svh;
        align-content: center;
        .main_contact_reseaux {
            display: grid;
            grid-template-columns: repeat(3, auto);
            padding: var(--padding-button);
            justify-content: space-between;
            min-width: 15vw;
            .reseaux_link {
                display: flex;
                justify-content: space-around;
                padding: var(--padding-button);
                border-radius: 5px;
                color: white;
            }
            a{
                background: transparent;
                padding: var(--padding-button);
                border-radius: 5px;
                transition: ease-in-out 100ms; 
            }
            a:hover{
                background: var(--color4) ;
                transition: ease-in-out 200ms;
            }
        }

        .watermark {
            display: block;
            width: 100%;
            text-align: center;
            align-self: center;
        }

    }

}

/* -------- Smartphones un peu plus larges (≥ 375px) -------- */
@media (min-width: 375px) {
    /* Styles pour smartphones moyens, ex: iPhone X */
}

/* -------- Grands smartphones / petits tablettes (≥ 425px) -------- */
@media (min-width: 425px) {
    /* Styles pour grands smartphones, petits tablettes */
}

/* -------- Tablettes en mode portrait (≥ 768px) -------- */
@media (min-width: 768px) {
    /* Styles pour tablettes portrait */

    :root{
        --padding-side1: 2rem;
        --padding-side2: 3rem;
        --padding-top1: 0.5rem;
        --padding-button: 0.3rem;
        --titre-1: 3rem;
        --titre-2: 2.5rem;
        --titre-3: 1.125rem;
        --sous-titre: 1.32rem;
        --texte: 1rem;
        --colonne-crea : 3 ;
        --colonne-ecri : 2 ;
        --scale-bird : 120%;
        --left-bird : 10svw ;
            
    }
    .formulaire_partie:nth-child(odd){
        display: grid;
        grid-template-columns: repeat(2, auto);
        column-gap: var(--padding-side1);

    }
    .main_contact_formulaire{
        

    }
    .navigation_interne_demande{
        display: grid !important;
        grid-template-columns: repeat(2, auto) !important;
        min-width: 10vw !important;

    }
    .navigation_demande_texte {
        display: block !important;
    }
    footer {

        grid-template-columns: max-content max-content !important;
        justify-content: space-between !important;

    }
}

/* -------- Tablettes en mode paysage / petits laptops (≥ 1024px) -------- */
@media (min-width: 1024px) {

    /* Styles pour tablettes paysage et petits laptops */
    :root{
        --padding-side1: 3rem;
        --padding-side2: 4rem;
        --padding-top1: 0.5rem;
        --padding-button: 0.3rem;
        --titre-1: 4rem;
        --titre-2: 3.5rem;
        --titre-3: 1.5rem;
        --sous-titre: 1.75rem;
        --texte: 1rem;
        --colonne-crea : 4 ;
        --colonne-ecri : 2 ;
        --scale-bird : 70%;
        --left-bird : 35svw ;
            
    }

}

/* -------- Desktop moyens (≥ 1200px) -------- */
@media (min-width: 1200px) {
    /* Styles pour desktops moyens */

    :root{
        --padding-side1: 5rem;
        --padding-side2: 6rem;
        --padding-top1: 0.5rem;
        --padding-button: 0.5rem;
        --titre-1: 6rem;
        --titre-2: 5rem;
        --titre-3: 2rem;
        --sous-titre: 2.65rem;
        --texte: 1rem;
        --colonne-crea : 4 ;
        --colonne-ecri : 2 ;
        --scale-bird : 80%;
        --left-bird : 30svw ;
            
    }

}

/* -------- Grands écrans desktop (≥ 1440px) -------- */
@media (min-width: 1440px) {
    /* Styles pour grands écrans desktop */

    :root{
        --padding-side1: 5rem;
        --padding-side2: 6rem;
        --padding-top1: 0.5rem;
        --padding-button: 0.5rem;
        --titre-1: 6rem;
        --titre-2: 5rem;
        --titre-3: 2rem;
        --sous-titre: 2.65rem;
        --texte: 1rem;
        --colonne-crea : 4 ;
        --colonne-ecri : 2 ;
        --scale-bird : 65%;
        --left-bird : 30svw ;
            
    }

}

/* -------- Très grands écrans (≥ 1600px) -------- */
@media (min-width: 1600px) {
    /* Styles pour très grands écrans */
        :root{
        --padding-side1: 5rem;
        --padding-side2: 6rem;
        --padding-top1: 0.5rem;
        --padding-button: 0.5rem;
        --titre-1: 8rem;
        --titre-2: 7rem;
        --titre-3: 2rem;
        --sous-titre: 3.52rem;
        --texte: 1rem;
        --colonne-crea : 6 ;
        --colonne-ecri : 3 ;
        --scale-bird : 50%;
        --left-bird : 35svw ;        
    }

}


@keyframes carrousel {

    0% {
        transform: translateX(0);
    }

    40% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(-50%);
    }

    90% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(0%);
    }

}