.fleche{
    width : 45px;
    height : 45px;
    background-color: #b3b3b3;
    position : absolute;
    background-repeat: no-repeat;
    border-radius : 50px;
    background-size: 70%;
    background-position: center center;
    cursor: pointer;
    transform: translateY(calc(-45px / 2 ));
}
#content_slide_design_graphique::-webkit-scrollbar {
    display: none;
  }
  
#content_slide_design_graphique{
    width : 100%;
    margin : 10px 0 5px 0;
    position : relative;
    overflow-y: hidden;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none; 
    scrollbar-width: none;  
    -youbkit-touch-callout: none; /* iOSSafari */
    -youbkit-user-select: none;   /* Chrome 6.0+, Safari 3.1+, Edge et Opera 15+ */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;        /* IE 10+ et Edge */
    user-select: none;      
}
#content_slide_design_graphique::-webkit-scrollbar {
    display: none;
  }
#content_slide_design_graphique .fleche{
    z-index: 300;
    background-color: #FF9700;
    margin : 0 5px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px !important;
    transition : 0 !important;
}

#content_slide_design_graphique #fd:hover, #content_slide_design_graphique #fg:hover{
    box-shadow: none !important;
}
#englob_slide_design_graphique{
    /*width automatiquement calculé en js selon content*/
    position: absolute;
    left : 0px;
}
.slide_design_graphique{
    /*width automatiquement calculé en js selon content*/
    background-color: transparent;
    float : left;
    scroll-snap-align: center;
    
}
.slide_design_graphique img{
    width : 100%
}


.slide_design_graphique h2{
    font-family: 'Dela Gothic One', cursive;
    color :  #BF5432;
    font-size : 1.3em;
    line-height : 1.3em;
    letter-spacing : 1px;
    text-transform : uppercase;
    border-top : 1px solid #BF5432;
    border-bottom : 1px solid #BF5432;
    width : 100%;
    text-align : center
}


.englob_repere_diapo{
    width : 100%;
    min-height : 10px;
    padding : 5px 0;
    background-color: #225560;
    margin-bottom : 10px;
    display : flex;
    justify-content : center;
    gap : 15px;
    -youbkit-touch-callout: none; /* iOSSafari */
    -youbkit-user-select: none;   /* Chrome 6.0+, Safari 3.1+, Edge et Opera 15+ */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;        /* IE 10+ et Edge */
    user-select: none;  
}

.choix_slide{
    width : 12px;
    height : 12px;
    background-color: white;
    border-radius : 10px;
    cursor : pointer;
    position : relative;
    display : inline-flex;
}

.choix_slide:hover{
    -webkit-box-shadow:inset 0 0 0 2px #FF9700;
    box-shadow:inset 0 0 0 2px #FF9700;
}

.choix_slide span{
    position : absolute;
    padding : 10px;
    z-index : 200;
    left : 50%;
    display : block;
   outline-width: center;
    transform : translate(-50%, -115%);
    background-color: white;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px !important;
    text-align: center;
    display : none;
    width : 220px;
    font-weight: 600;
    border-radius : 4px;
    color: #BF5432
}


.content_fleche_slide{
    width: 100%;
    position: relative;    
}

.content_fleche_slide .fleche{
    background-color: #FF9700;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px !important;
    margin : 0 5px;
    top : -200px
   
}
.content_fleche_slide .fleche.fd{
    right : 0 !important;
    background-image: url(../img/svg/fleche_droite.svg);
}

.content_fleche_slide .fleche.fg{
    background-image: url(../img/svg/fleche_gauche.svg);
}