@font-face {
    font-family: grandTitre;
    src: url('guide_achat_noel/fonts/bouncy.otf');
}

@font-face {
    font-family: moyenTitre;
    src: url('guide_achat_noel/fonts/captain.ttf');
}

@font-face {
    font-family: hulife;
    src: url('guide_achat_noel/fonts/hulife.ttf');
}

@font-face {
    font-family: simply;
    src: url('guide_achat_noel/fonts/simply.ttf');
}



:root {
    --red: #db3915;
}

:root {
    --blue: #0d7b71;
}

:root {
    --white: #f8ebeb;
}



.guideBigTitle {
    font-size: 3em;
    color: var(--red);
    font-family: grandTitre;
}

#illustrLong {
    max-width: 100%;
}


.guideIntro {
    font-family: simply;
    font-size: 1.5em;
    line-height: 1.5em;
    color: #878787;
    width: 100%;
    text-align: center;
}

.categorieUsager {
    font-size: 2.8em;
    color: var(--red);
    font-family: moyenTitre;
    /*margin-top: 2em;*/
}

.illustrationNoel {
    display: flex;
    justify-content: center;
    margin: 2em;
    

    img {
        box-shadow: 0px 0px 1em #00000067;
    }
}


/*------------------------------------------------------*/


@keyframes animation4Images {
    0% {
        left: 0px;
    }


    24.9999% {
        left: 0px;
    }
    25% {
        left: -128px;
    }


    54.9999% {
        left: -128px;
    }

    55% {
        left: -256px;
    }



    74.9999% {
        left: -256px; 
    }
    75% {
        left: -384px;
    }

    100% {
        left: -384px;
    }
}



.animationContainer {
    h2 {
        margin-left: 4em;
    }
}

.animationWindow {
    width: 128px;
    height: 128px;
    position: relative;
    overflow: hidden;
    margin-right: 4em;
}

.animationStrip {
    position: absolute;
    animation-name: animation4Images;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
}

.flexAnimTitre {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 2em;
}


/*------------------------------------------------------*/


.titreProduit {
    font-family: hulife;
    color: var(--blue);
}

.illustration {
    margin-right: 2em;
    border: solid 1px #360505;
    border-radius: 0.2em;
    width: 200px;
}

.ficheContainer {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 2em;
}

.guideParag {
    font-size: 1em;
    line-height: 1.8em;
    margin-left: 2em;
    width: 80%;
}

.guideBouton {
    background-color: var(--red);
    color: #ffffff;
    border-radius: 0.4em;
    padding: 0.5em 1em;
}

.guideBoutonDetail {
    background-color: var(--white);
    color: var(--red);
    border-radius: 0.4em;
    padding: 0.5em 1em;
    margin-right: 1em;
    border: solid 1px var(--red);
}


.zoneLien {
    display: flex;
    justify-content: flex-start;
}



@media (max-width: 640px) { 
    
    .guideIntro {
        width: 100%;    
    }

    .illustrationNoel {

        img {
            max-width: 105%;
        }
    }
    
    .ficheContainer {
        display: block;
    }
    
    .illustration {
        width: 100%;    
        margin: 0em;
    }
    
    .ficheContainer {
        font-size: 1.2em;   
    }
    
    .categorieUsager {
        font-size: 2em;    
    }
    
    .guideParag {
        font-size: 1em;
        line-height: 1.2em;
        margin-left: 0em;
        width: 100%;
    }
    
    .zoneLien {
        display: flex;
        justify-content: center;
    }
    
}