/* header */
    header{
        position: relative;
        z-index: 1000;
    }

    /* header annonces */
        .headerAnnonces{
            padding: 8px 16px;
            background: var(--black);
            display: flex;
            justify-content: center;
        }

        .containerAnnonces{
            width: max-content;
            max-width: 800px;
            margin: 0 auto;
            padding: 0 8px;
            display: flex;                
            overflow-x: auto;
            scroll-behavior: smooth;
            position: relative;
            anchor-name: --Caroussel;
            scroll-snap-type: x mandatory;
        }

        .containerAnnonces::-webkit-scrollbar{
            display: none;
        }

        .containerAnnonces::scroll-button(right), .containerAnnonces::scroll-button(left){
            border: none;
            background-color: var(--pink);
            border-radius: 8px;
            color: var(--white);
            cursor: pointer;
            position: fixed;
            position-anchor: --Caroussel;
        }

        .containerAnnonces::scroll-button(right){                    
            content: "\2192";
            position-area: right center;
            translate: -50%;
        }

        .containerAnnonces::scroll-button(left){                    
            content: "\2190";
            position-area: left center;
            translate: 50%;
        }

        .containerAnnonces::scroll-button(right):disabled, .containerAnnonces::scroll-button(left):disabled{
            opacity: 0.5;
            cursor: auto;
        }

        .contentAnnonce{                
            scroll-snap-align: start;
            flex: 0 0 100%;
        }

        .contentAnnonce p{
            text-align: center;
            color: var(--white);
            font-size: 15px;
            text-wrap: nowrap;
        }
    /* header annonces */

    /* header social */
        .headerBottom{
            padding: 8px 32px;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 12px;
        }

        .boxSocial{
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
        }

        .boxSocial a i{
            color: var(--white);
            font-size: 22px;
            cursor: pointer;
        }

        .langue span{
            display: flex;
            align-items: center;
            color: var(--white);
        }

        .langue span i, .boxSocial a{
            color: var(--white);
        }

        .boxIcon{
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .boxIcon i{
            font-size: 22px;
            transform: translatey(2px);
            color: var(--white);
            cursor: pointer;
        }
    /* header social */
/* header */