div#container
{
   width: 1000px;
   position: relative;
   margin: 0 auto 0 auto;
   text-align: left;
}
body
{
   background-color: #FFFFFF;
   background-image: url('images/arrière plan 9-16.png');
   background-attachment: scroll;
   background-position: left top;
   background-repeat: repeat;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-size: 16px;
   line-height: 1.1875;
   margin: 0;
   text-align: center;
}
#wb_CssMenu1
{
   border: 0px solid #C0C0C0;
   border-radius: 0px;
   background-color: transparent;
   margin: 0;
   text-align: left;
}
#wb_CssMenu1 ul
{
   list-style-type: none;
   margin: 0;
   padding: 0;
    font-size: 0;
   width: 100%;
}
#wb_CssMenu1 li
{
   display: inline-block;
   margin: 0;
   padding: 0px 0px 4px 0px;
   width: 100%;
}
#wb_CssMenu1 a
{
   display: block;
   color: #FFFFFF;
   border: 1px solid #F4A896;
   border-radius: 0px;
   background-color: #F4A896;
   background-image: none;
   font-family: Arial;
   font-weight: normal;
   font-size: 27px;
   font-style: normal;
   text-decoration: none;
   text-transform: none;
   text-align: center;
   vertical-align: middle;
}
#wb_CssMenu1 > ul > li > a
{
   width: calc(100% - 4px);
   box-sizing: border-box;
   height: 28px;
   padding: 0 5px 0px 5px;
   line-height: 26px;
}
#wb_CssMenu1 li:hover a, #wb_CssMenu1 a:hover
{
   color: #FFFFFF;
   border: 1px solid #D87561;
   background-color: #D87561;
   background-image: none;
}
#wb_CssMenu1 .firstmain a
{
   margin-top: 0px;
}
#wb_CssMenu1 li.lastmain
{
   padding-bottom: 0px;
}
#wb_CssMenu1 br
{
   clear: both;
   font-size: 1px;
   height: 0;
   line-height: 0;
}
#wb_Image1
{
   vertical-align: top;
}
#Image1
{
   border: 0px solid #000000;
   border-radius: 0px;
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#Extension1
{
   font-size: 0;
   text-align: left;
}
.Extension1, .Extension1 *
{
   box-sizing: border-box;
   margin: 0 !important;	
}
.Extension1
{
   background: #000000;
   background-clip: padding-box;
   display: inline-block;
   border: 10px solid transparent;
   font-size: 0;
   height: auto;
   padding: 0px;
   position: relative;
   width: 14.2857%;
}
.Extension1 > span
{
   background-position: center center;
   background-size: cover;
   cursor: pointer;
   display: block;
   position: absolute;
   width: calc(100% - 
0px);
   height: calc(100% - 
0px);
}
.Extension1::after
{
   content: "";
   display: block;
   padding-bottom: 100%;
}
.Extension1 button
{
   position: absolute;
   top: 0px;
   left: 0px;
   margin: 0;
   padding: 0;
   background: 0;
   display: block;
   cursor: pointer;
   border: 0;
   width: 100%;
   height: 100%;
}
.Extension1 button .play-button
{
   background-color: rgba(0,0,0,0.78);
   background-clip: padding-box;
   border: 3px solid rgba(255,255,255,0.78);
   border-radius: 50%;
   display: block;
   font-size: 0px;
   height: auto;
   left: 50%;
   min-height: 30%;
   padding-top: calc(30% - 6px);
   position: absolute;
   top: 50%;
   transform: translateX(-50%) translateY(-50%);
   transition: all 500ms cubic-bezier(0.68, -0.35, 0.265, 1.35);
   width: 30%;
}
.Extension1 button:hover .play-button
{
   background-color: rgba(0,0,0,0.78);
   border-color: rgba(255,255,255,1.00);
   border-radius: 0 !important;
   border-width: 0 !important;
   min-height: 101% !important;
   padding: 0 !important;
   width: 101% !important;
}
.Extension1 button .play-button svg
{
   display: block;
   fill: rgba(255,255,255,1.00);
   height: 50%;
   left: 50%;
   position: absolute;
   top: 50%;
   transform: translateX(-40%) translateY(-50%);
   transition: all 500ms cubic-bezier(0.68, -0.35, 0.265, 1.35);
}
.Extension1 button:hover .play-button svg
{
   height: 50%;
}
#lightcase-overlay
{
   background: #000000 !important;
}
a[class*='lightcase-icon-'], a[class*='lightcase-icon-']:focus
{
   color: rgba(255,255,255,0.59) !important;
}
a[class*='lightcase-icon-']:hover 
{
   color: rgba(255,255,255,1.00) !important;
   text-shadow: none;
}
#lightcase-info #lightcase-title 
{
   font-size: 16px !important;
   font-weight: bold !important;
   color: #FFFFFF !important;
}
#lightcase-info #lightcase-caption
{
   font-size: 13px !important;
   color: #FFFFFF !important;
}
#lightcase-info
{
   font-family: "Arial";
   text-align: left;
   text-shadow: none !important;
}
#lightcase-content
{
   box-shadow: 0px 0px 30px rgba(0,0,0,0.50) !important;
}
#wb_Text2 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: center;
}
#wb_Text2 div
{
   text-align: center;
}
#wb_Image4
{
   vertical-align: top;
}
#Image4
{
   border: 0px solid #000000;
   border-radius: 0px;
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#wb_Image13
{
   vertical-align: top;
}
#Image13
{
   border: 0px solid #000000;
   border-radius: 0px;
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#wb_Image3
{
   vertical-align: top;
}
#Image3
{
   border: 0px solid #000000;
   border-radius: 0px;
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#wb_Text3 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: center;
}
#wb_Text3 div
{
   text-align: center;
}
#wb_Image2
{
   vertical-align: top;
}
#Image2
{
   border: 0px solid #000000;
   border-radius: 0px;
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
/* ==================================================
   COMPTEUR DE VISITES
   RESTE A SA PLACE - NE SUIT PAS LE DEFILEMENT
   ================================================== */
#compteur-visites
{
    position: relative !important;
    display: block !important;
    width: fit-content !important;
    margin: 5px auto 10px auto !important;
    padding: 7px 12px !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: 10 !important;
    background: #fff5f8 !important;
    border: 2px solid #BA91FF !important;
    border-radius: 10px !important;
    font-family: Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: bold !important;
    color: #555555 !important;
    text-align: center !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}
/* ==================================================
   GALERIE VIDEO
   ================================================== */
#Extension1
{
    display: grid !important;
    grid-template-columns: repeat(7, 120px) !important;
    column-gap: 0 !important;
    row-gap: 12px !important;
    justify-content: space-between !important;
    align-items: start !important;
    width: 990px !important;
    max-width: calc(100% - 20px) !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}
/* ==================================================
   BLOC COMPLET D'UNE VIDEO
   ================================================== */
.video-complete
{
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    font-family: Arial, sans-serif !important;
}
/* ==================================================
   VIGNETTE 120 x 166
   ================================================== */
#Extension1 .video-complete > a.Extension1
{
    position: relative !important;
    display: block !important;
    width: 120px !important;
    height: 166px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.25) !important;
    cursor: pointer !important;
}
/* ==================================================
   IMAGE DE LA VIGNETTE
   ================================================== */
#Extension1 .video-complete > a.Extension1 > span:first-child
{
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}
/* ==================================================
   BOUTON LECTURE
   ================================================== */
#Extension1 .video-complete > a.Extension1 button
{
    position: absolute !important;
    left: 20% !important;
    top: 80% !important;
    transform: translate(-50%, -50%) !important;
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 2px solid #ffffff !important;
    border-radius: 50% !important;
    background: rgba(186,145,255,0.92) !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.35) !important;
    pointer-events: none !important;
    z-index: 5 !important;
}
/* ==================================================
   ICONE PLAY
   ================================================== */
#Extension1 .play-button
{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}
#Extension1 .play-button svg
{
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    fill: #ffffff !important;
}
/* ==================================================
   TITRE
   ================================================== */
.video-info-title
{
    margin-top: 5px !important;
    margin-bottom: 3px !important;
    font-family: Arial, sans-serif !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    font-weight: bold !important;
    color: #222222 !important;
    text-align: center !important;
}
/* ==================================================
   DESCRIPTION
   ================================================== */
.video-info-description
{
    box-sizing: border-box !important;
    width: 120px !important;
    min-height: 60px !important;
    margin: 0 auto 8px auto !important;
    padding: 5px 6px !important;
    background: #fff5f8 !important;
    border: 1px solid #ed1e63 !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 8px rgba(0,0,0,0.10) !important;
    font-family: Arial, sans-serif !important;
    font-size: 8px !important;
    line-height: 1.25 !important;
    color: #333333 !important;
    text-align: center !important;
    overflow-wrap: break-word !important;
}
/* ==================================================
   BOUTON TELECHARGER
   ================================================== */
.video-download
{
    display: block !important;
    box-sizing: border-box !important;
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    padding: 6px 4px !important;
    margin: 0 auto !important;
    background: #BA91FF !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border: none !important;
    border-radius: 9px !important;
    font-family: Arial, sans-serif !important;
    font-size: 9px !important;
    font-weight: bold !important;
    text-align: center !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 50 !important;
}
.video-download:hover
{
    opacity: 0.88 !important;
}
/* ==================================================
   COMPTEURS VUES + PARTAGES + BOUTON PARTAGER
   ================================================== */
.video-actions
{
    width: 120px !important;
    margin: 2px auto 0 auto !important;
    text-align: center !important;
    display: block !important;
    visibility: visible !important;
    box-sizing: border-box !important;
}
/* VUES + PARTAGES */
.video-stats-line
{
    width: 120px !important;
    margin: 0 0 3px 0 !important;
    padding: 0 !important;
    font-family: Arial, sans-serif !important;
    font-size: 11px !important;
    line-height: 12px !important;
    color: #000000 !important;
    text-align: center !important;
    white-space: nowrap !important;
    word-spacing: -2px !important;
    box-sizing: border-box !important;
}
/* BOUTON PARTAGER */
.video-share
{
    display: block !important;
    width: 120px !important;
    height: 26px !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #BA91FF !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border: none !important;
    border-radius: 9px !important;
    font-family: Arial, sans-serif !important;
    font-size: 10px !important;
    font-weight: bold !important;
    line-height: 26px !important;
    text-align: center !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 50 !important;
}
/* SURVOL */
.video-share:hover
{
    opacity: 0.88 !important;
}/* ==================================================
   LISTE DEROULANTE CENTREE
   ================================================== */
.video-select-zone
{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 20px auto 25px auto !important;
    padding: 0 !important;
    text-align: center !important;
}
#video-select
{
    display: block !important;
    width: 320px !important;
    max-width: 90% !important;
    margin: 0 auto !important;
    padding: 10px 14px !important;
    box-sizing: border-box !important;
    background: #fff5f8 !important;
    color: #333333 !important;
    border: 2px solid #BA91FF !important;
    border-radius: 10px !important;
    font-family: Arial, sans-serif !important;
    font-size: 14px !important;
    cursor: pointer !important;
}
/* ==================================================
   LIGHTCASE - VIDEO PLUS GRANDE
   ================================================== */
#lightcase-content
{
    width: 70vw !important;
    max-width: 900px !important;
}
#lightcase-content video
{
    width: auto !important;
    height: 75vh !important;
    max-width: 100% !important;
    max-height: 75vh !important;
    display: block !important;
    margin: 0 auto !important;
    object-fit: contain !important;
}
#lightcase-content .lightcase-contentInner
{
    width: 100% !important;
    height: auto !important;
}
