/*******************************************************************************
 * Auteur: PIX (Particule Informatique Xaruf)
 * version: 1.0
 *******************************************************************************/

:root{
    --vpp-red: #B13C2E; /*#E44E35;*/
    --vpp-red-dark: #841f0e;
    --vpp-red-light: #ea5841;
    --vpp-black: #000000;
    --vpp-black-light: #333333;
    --vpp-yellow-light: #fcd057;
    --vpp-yellow: #FBC42C;
    --vpp-yellow-dark: #ae8004;

    --vpp-validate: #FBC42C; /** #4681B4 */
    --vpp-valided: #ae8004; /* #1A4367 */
    --vpp-bg-error: #BFF0E0;
    --vpp-fg-error: #9E1035;
    --vpp-cancel: #172E40;
    --vpp-canceled: #768189;
    --vpp-logout: #98A7B5;
    --vpp-green: #63a341; /*96C1BD; /*43B2AD;*/
    --vpp-green-light: #6db348; /*B9F7F0; /*4DC9C4;*/
    --vpp-green-dark: #47752f; /*1A6A67;*/

    --vpp-bg-disabled: #98A7B5;
    --vpp-fg-disabled: #ae8004;

    --vpp-bt-amine-red-dark: rgba(132, 31, 14, 0.4);
    --vpp-bt-amine-red: rgba(177, 60, 46, 0.4);
}
/*body{
    overflow-anchor: none;
}*/

/* THEMES */
/* theme rouge */
.vpp-red-theme-l5{color:#000 !important; background-color: rgb(253, 244, 243)!important;} /*#fdf4f3*/
.vpp-red-theme-l4{color:#000 !important; background-color: rgb(250, 220, 214)!important;} /*#fadcd6*/
.vpp-red-theme-l3{color:#000 !important; background-color: rgb(245, 184, 173)!important;} /*#f5b8ad*/
.vpp-red-theme-l2{color:#000 !important; background-color: rgb(240, 149, 132)!important;} /*#f09584*/
.vpp-red-theme-l1{color:#fff !important; background-color: rgb(235, 113, 92)!important;} /*#eb715c*/
.vpp-red-theme-d1{color:#fff !important; background-color: rgb(255, 57, 28)!important;} /*#e1391c*/
.vpp-red-theme-d2{color:#fff !important; background-color: rgb(200, 51, 25)!important;} /*#c83319*/
.vpp-red-theme-d3{color:#fff !important; background-color: rgb(175, 45, 22)!important;} /*#af2d16*/
.vpp-red-theme-d4{color:#fff !important; background-color: rgb(150, 38, 19)!important;} /*#962613*/
.vpp-red-theme-d5{color:#fff !important; background-color: rgb(125, 32, 15)!important;} /*#7d200f*/
.vpp-red-theme-light{color:#000 !important; background-color: rgb(253, 244, 243)!important;} /*#fdf4f3*/
.vpp-red-theme-dark{color:#fff !important; background-color: rgb(125, 32, 15)!important;} /*#7d200f*/
.vpp-red-theme-action{color:#fff !important; background-color: rgb(125, 32, 15)!important;} /*#7d200f*/
.vpp-red-theme{color:#fff !important; background-color: rgb(230, 80, 52)!important;} /*#e65034*/
.vpp-red-text-theme{color: rgb(230, 80, 52)!important;}
.vpp-red-border-theme{border-color: rgb(230, 80, 52)!important;}
.vpp-red-hover-theme:hover{color:#fff !important; background-color: rgb(230, 80, 52)!important;}
.vpp-red-hover-text-theme:hover{color: rgb(230, 80, 52)!important;}
.vpp-red-hover-border-theme:hover{border-color: rgb(230, 80, 52)!important;}

/* theme jaune */
.vpp-yellow-theme-l5{color:#000 !important; background-color: rgb(255, 251, 242)!important} /*#fffbf2*/
.vpp-yellow-theme-l4{color:#000 !important; background-color: rgb(254, 243, 213)!important} /*#fef3d5*/
.vpp-yellow-theme-l3{color:#000 !important; background-color: rgb(253, 231, 171)!important} /*#fde7ab*/
.vpp-yellow-theme-l2{color:#000 !important; background-color: rgb(252, 220, 129)!important} /*#fcdc81*/
.vpp-yellow-theme-l1{color:#000 !important; background-color: rgb(252, 208, 87)!important} /*#fcd057*/
.vpp-yellow-theme-d1{color:#000 !important; background-color: rgb(250, 188, 16)!important} /*#fabc10*/
.vpp-yellow-theme-d2{color:#000 !important; background-color: rgb(232, 171, 5)!important} /*#e8ab05*/
.vpp-yellow-theme-d3{color:#fff !important; background-color: rgb(203, 150, 4)!important} /*#cb9604*/
.vpp-yellow-theme-d4{color:#fff !important; background-color: rgb(174, 128, 4)!important} /*#ae8004*/
.vpp-yellow-theme-d5{color:#fff !important; background-color: rgb(145, 107, 3)!important} /*#916b03*/
.vpp-yellow-theme-light{color:#000 !important; background-color: rgb(255, 251, 242)!important} /*#fffbf2*/
.vpp-yellow-theme-dark{color:#fff !important; background-color: rgb(145, 107, 3)!important} /*#916b03*/
.vpp-yellow-theme-action{color:#fff !important; background-color: rgb(145, 107, 3)!important} /*#916b03*/
.vpp-yellow-theme{color:#000 !important; background-color: rgb(251, 196, 44)!important} /*#fbc42c*/
.vpp-yellow-text-theme{color: rgb(251, 196, 44)!important} /*#fbc42c*/
.vpp-yellow-border-theme{border-color: rgb(251, 196, 44)!important} /*#fbc42c*/
.vpp-yellow-hover-theme:hover{color:#000 !important; background-color: rgb(251, 196, 44)!important} /*#fbc42c*/
.vpp-yellow-hover-text-theme:hover{color: rgb(251, 196, 44)!important} /*#fbc42c*/
.vpp-yellow-hover-border-theme:hover{border-color: rgb(251, 196, 44) !important} /*#fbc42c*/
/* theme noir */
.vpp-black-theme-l6{color:#000 !important; background-color: rgb(255, 255, 255)!important} /*#ffffff*/
.vpp-black-theme-l5{color:#000 !important; background-color: rgb(240, 240, 240)!important} /*#f0f0f0*/
.vpp-black-theme-l4{color:#000 !important; background-color: rgb(204, 204, 204)!important} /*#cccccc*/
.vpp-black-theme-l3{color:#fff !important; background-color: rgb(153, 153, 153)!important} /*#999999*/
.vpp-black-theme-l2{color:#fff !important; background-color: rgb(102, 102, 102)!important} /*#666666*/
.vpp-black-theme-l1{color:#fff !important; background-color: rgb(51, 51, 51)!important} /*#333333*/
.vpp-black-theme-d1{color:#fff !important; background-color:  rgb(34, 34, 34)!important} /*#222222*/
.vpp-black-theme-d2{color:#fff !important; background-color:  rgb(25, 25, 25)!important} /*#191919*/
.vpp-black-theme-d3{color:#fff !important; background-color:  rgb(17, 17, 17)!important} /*#111111*/
.vpp-black-theme-d4{color:#fff !important; background-color:  rgb(10, 10, 10)!important} /*#0a0a0a*/
.vpp-black-theme-d5{color:#fff !important; background-color: rgb(0, 0, 0)!important} /*#000000*/
.vpp-black-theme-light{color:#000 !important; background-color:#f0f0f0 !important}
.vpp-black-theme-dark{color:#fff !important; background-color: rgb(0, 0, 0)!important}
.vpp-black-theme-action{color:#fff !important; background-color: rgb(0, 0, 0)!important}
.vpp-black-theme{color:#fff !important; background-color: rgb(0, 0, 0)!important}
.vpp-black-text-theme{color: rgb(0, 0, 0)!important}
.vpp-black-border-theme{border-color: rgb(0, 0, 0)!important}
.vpp-black-hover-theme:hover{color:#fff !important; background-color: rgb(0, 0, 0)!important}
.vpp-black-hover-text-theme:hover{color: rgb(0, 0, 0)!important}
.vpp-black-hover-border-theme:hover{border-color: rgb(0, 0, 0)!important}
/* couleurs */
.bg-vpp-black{
    background-color: var(--vpp-black)!important;
}
.bg-vpp-red{
    background-color: var(--vpp-red)!important;
}
.bg-vpp-red-light-hover:hover{
    background-color: var(--vpp-red-light)!important;
}
.bg-vpp-yellow{
    background-color: var(--vpp-yellow)!important;
}
.bg-vpp-yellow-dark{
    background-color: var(--vpp-yellow-dark)!important;
}
.bg-vpp-yellow-dark-hover:hover{
    background-color: var(--vpp-yellow-dark)!important;
}
.bg-vpp-yellow-hover:hover{
    background-color: var(--vpp-yellow)!important;
}
.bg-vpp-red-dark{
    background-color: var(--vpp-red-dark)!important;
}
.title-infos--left-ico{
    background-color: var(--vpp-red)!important;
    color: white;
    border-bottom: 1px solid #ffffff!important;
    border-top: 1px solid #ffffff!important;
}
.bg-vpp-white{
    background-color: white!important;
}
.bg-vpp-white-hover:hover{
    background-color: white!important;
}
.fg-vpp-black{
    color: var(--vpp-black)!important;
}
.fg-vpp-black-hover:hover{
    color: var(--vpp-black)!important;   
}
.fg-vpp-red{
    color: var(--vpp-red)!important;
}
.fg-vpp-red-dark{
    color: var(--vpp-red-dark)!important;
}
.fg-vpp-red-dark-hover:hover{
    color: var(--vpp-red-dark)!important;
}
.fg-vpp-red-light{
    color: var(--vpp-red-light)!important;
}
.fg-vpp-yellow{
    color: var(--vpp-yellow)!important;
}
.fg-vpp-yellow-dark{
    color: var(--vpp-yellow-dark)!important;
}
.fg-vpp-yellow-hover:hover{
    color: var(--vpp-yellow)!important;
}
.fg-vpp-yellow-dark-hover:hover{
    color: var(--vpp-yellow-dark)!important;
}
.fg-vpp-green{
    color: var(--vpp-green);
}
/* fin couleurs */
.vpp-error-fg{
    color:  var(--vpp-fg-error);
    font-size: .9rem;
}
.finger{
    transition-duration: all .55s;
}
.finger:hover{
    cursor: pointer;
    border-radius: 4px;
    box-shadow: 1px 1px 12px #916b03; /* #555 */
    transform: scale(1.015);
    transition-property: transform;
    transition-duration: .55s;
    /*transition-timing-function: cubic-bezier(0, 2.5, 0.5, 0.8);*/
    transition-timing-function: cubic-bezier(0.5, 2.5, 1, 0.8);
}
/*html{
    max-width: 100vw!important;
    min-width: 100vw!important;
}*/
body{
    font-family: "Roboto","Ubuntu","Helvetica Neue",sans-serif ;
    line-height: 1.75;
    margin: 0!important;
    max-width: 100vw!important;
    min-width: 100vw!important;
    color:#fff !important;
    background-color: rgb(34, 34, 34);
}
.page-container{
    overflow: hidden;
    margin: 0;
    padding: 0;
}
/*#pageContent{
    min-height: calc(100vh*60/100);
}*/
/**** buttons perso ****/
.bt-vpp,
.bt-vpp-input-file,
.bt-vpp-valider,
.bt-vpp-show,
.bt-vpp-edit,
.bt-vpp-ok,
.bt-vpp-cancel{
    font-weight: 700!important;
    border-style: solid!important;
    border-color: black!important;
    transition-property: all!important;
    transition-duration: .55s!important;
}

.bt-vpp{
    background-color: var(--vpp-red)!important;
    color: var(--vpp-black)!important;
}
.bt-vpp-show{
    background-color: var(--vpp-yellow)!important;
    color: var(--vpp-black)!important;
}
.bt-vpp-edit{
    background-color: var(--vpp-green)!important;
    color: var(--vpp-black)!important;
}
.bt-vpp-ok{
    background-color: var(--vpp-valided)!important;
    color: var(--vpp-black)!important;
}
.bt-vpp-cancel{
    background-color: var(--vpp-canceled)!important;
    color: var(--vpp-red)!important;
}
.bt-vpp-disabled{
    background-color: var(--vpp-bg-disabled)!important;
    color: var(--vpp-fg-disabled)!important;
}
.bt-vpp-disabled:hover{
    cursor: not-allowed!important;
}

.bt-vpp:hover,
.bt-vpp-valider:hover,
.bt-vpp-show:hover,
.bt-vpp-edit:hover,
.bt-vpp-ok:hover,
.bt-vpp-cancel:hover{
    cursor: pointer!important;
    border-radius: 4px!important;
    box-shadow: 1px 1px 12px #555!important;
    transform: scale(1.0225)!important;
    transition-property: transform!important;
    transition-duration: .55s!important;
    transition-timing-function: cubic-bezier(0.5, 2.5, 1, 0.8)!important;
}
.bt-vpp-input-file:hover{
    cursor: pointer!important;
    border-radius: 4px!important;
    box-shadow: 1px 1px 12px #555!important;
    transition-property: all!important;
    transition-duration: .55s!important;
}
.bt-vpp:hover{
    background-color: var(--vpp-black)!important;
    color: var(--vpp-red)!important;
}
.bt-vpp-cancel:hover{
    background-color: var(--vpp-red)!important;
    color: var(--vpp-canceled)!important;
}
.bt-vpp-ok:hover{
    background-color: var(--vpp-black)!important;
    color: var(--vpp-validate)!important;
}
.bt-vpp-edit:hover{
    background-color: var(--vpp-black)!important;
    color: var(--vpp-green)!important;
}
.bt-vpp-show:hover{
    background-color: var(--vpp-validate)!important;
    color: var(--vpp-black)!important;
}
button.bt-vpp-ok:disabled,
button.bt-vpp-valider:disabled,
button.bt-vpp-show:disabled,
button.bt-vpp-edit:disabled,
button.bt-vpp-cancel:disabled,
button.bt-vpp-valider:disabled{
    background-color: var(--vpp-canceled)!important;
    color: var(--vpp-cancel)!important;
    cursor: auto!important;
}
.label-connect{
    color: var(--vpp-yellow-dark)!important;
}
.input-connect{
    color: var(--vpp-yellow)!important;
}
.vpp-error-bg{
    background-color: var(--vpp-bg-error)!important;
    opacity: 0.5!important;
}
.vpp-error-fg{
    color: var(--vpp-fg-error)!important;
    font-size: .9rem!important;
}
.page-grid{
    margin: 0 auto 0 auto!important;
    padding: 0!important;
}
.page-content{
    margin-bottom: 0px;
    padding: 0px;
    max-width: 100%;
}
.footer{
    margin-left: auto;
    margin-right: auto;
    padding: 5px;
    bottom: 0px;
    background-color: black;
    height: 25rem;
    min-height: 25rem;
}
.footer-infos{
    justify-content: flex-end;
}
.copyright{ /* sur media query pour center*/
    align-items: flex-start;
}
.title-pseudo-footer{
    font-size: 1em;
}
.footer-img img{
    border-style: none;
}

.footer-infos a{
    font-weight: bold;
    color: #2F4F4F;
    text-decoration: none;
}
.link-me:hover{
  text-align: center;
  font-size: 1rem;
  color: #fff;
  font-weight: normal;
  text-shadow: 0px 0px 5px #fff, 0px 0px 7px #fff;
  color: black;
}
/** up button */
.up-btn{
    width: 50px;
    height: 50px;
    right: 3rem;
    bottom: 4rem;
    opacity: .7;
    background: #333;
    cursor: pointer;
    position: fixed;
    z-index: 120;
    padding: 10px;
    margin-right: 1rem!important;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: scale(1);
    transition: all .4s ease-in-out;
}
.up-btn.up-btn__hide{
    opacity: 0;
    transform: scale(0);
    transition: all .4s ease-in-out;
}
.up-btn:hover{
    opacity: 1;
    transform: scale(1.125);
}
.up-btn.up-btn_circle{
    border-radius: 50%;
}
.up-btn__img{
    max-width: 100%;
}
/**/
.cur-zoom{
    cursor: zoom-in!important;
}
.font-strok{
    text-shadow: 
        rgb(0, 0, 0) 2px 0px 0px,
        rgb(0, 0, 0) 1.75517px 0.958851px 0px,
        rgb(0, 0, 0) 1.0806px 1.68294px 0px,
        rgb(0, 0, 0) 0.141474px 1.99499px 0px,
        rgb(0, 0, 0) -0.832294px 1.81859px 0px,
        rgb(0, 0, 0) -1.60229px 1.19694px 0px,
        rgb(0, 0, 0) -1.97999px 0.28224px 0px,
        rgb(0, 0, 0) -1.87291px -0.701566px 0px,
        rgb(0, 0, 0) -1.30729px -1.51361px 0px,
        rgb(0, 0, 0) -0.421592px -1.95506px 0px,
        rgb(0, 0, 0) 0.567324px -1.91785px 0px,
        rgb(0, 0, 0) 1.41734px -1.41108px 0px,
        rgb(0, 0, 0) 1.92034px -0.558831px 0px;
}
.z1{
    z-index: 1;
}
.z2{
    z-index: 2;
}
.z3{
    z-index: 3;
}
.z4{
    z-index: 4;
}
.z5{
    z-index: 5;
}
.z6{
    z-index: 6;
}
.z7{
    z-index: 7;
}
.z8{
    z-index: 8;
}
.z9{
    z-index: 9;
}
.z10{
    z-index: 10;
}
.z100{
    z-index: 100;
}
.z99{
    z-index: 99;
}
.z149{
    z-index: 10;
}
.z150{
    z-index: 150;
}
.z200{
    z-index: 200;
}
.z201{
    z-index: 201;
}
.z202{
    z-index: 202;
}
.z999{
    z-index: 999;
}
.z1000{
    z-index: 1000;
}
.text-no-select
{
    -moz-user-select: none; 
    -webkit-user-select: none;
    -ms-user-select: none; 
    user-select: none; 
}

.degraded{
    background: #000000;
    background: linear-gradient(to right, #000000 0%, #000000 21%, #000000 27%, #111111 33%, #000000 47%, #4c4c4c 55%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#4c4c4c', GradientType=1 );
}
.txt-area{
    min-height: 5em!important;
}
.txt-area:invalid{
    height: 1em!important;
}
.txt-area:focus{
    height: 5em!important;
}
.cursor-default{
    /*cursor: crosshair;*/
}
.cursor-none{
    /*cursor: none;*/
}
.box-title{
    height: 20%;
    max-height: 20%;
    min-height: 20%;
    padding-top: 2rem;
    padding-bottom: 3rem;
}
.box-content{
    height: 80%;
    max-height: 80%;
    min-height: 80%;
    padding: 0.5rem; 
}

.box-p,
.box-p-bs{
	font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 1rem;
    text-align: center;

  	vertical-align: middle;
}
.box-p{
	padding: 0 0.5rem 0.75rem 0.5rem;
}

.burger{
    background-color: var(--vpp-red)!important;
    left: 0;
}
.burger:hover{
    background-color: #ee7660!important;
    transform: scale(.87)!important;
    transition-property: transform!important;
    transition-duration: .35s!important;
    transition-timing-function: cubic-bezier(0.5, 0.5, 0.5, 0.5);
}
.burger-croix:hover{
    transform: scale(.10);
    transition-property: transform;
    transition-duration: 3.5s;
    transition-timing-function: cubic-bezier(0.1, 0.005, 0.125, 0.3);
}
.header-divider{
    min-height: 10px;
    height: 10px;
    max-height: 10px;
    width: 100vw;
    min-width: 100vw;
    border-top: 4px solid #202020!important;
}
/* phone */
.deco-none,
.deco-none:link,
.deco-none:hover,
.deco-none:visited,
.deco-none:active{
    text-decoration: none!important;
}
/* top bar */
.header-top-bar a{
    color: white!important;
    text-decoration: none;
}
.header-top-bar a:link,
.header-top-bar a:hover,
.header-top-bar a:visited,
.header-top-bar a:active{
    text-decoration: none!important;
}
.header-top-bar{
    min-width: 100vw;
    width: 100vw;
    min-height: 30px;
    height: 30px;
    font-weight: 700;
    background-color: var(--vpp-red);
}
.header-content{
    width: 100%;
    top: 20;
    left: 0;
}

.nav-item{
    display: inline;
    list-style: none;
    margin: 0;
}
.menu-item{
    font-size: 1.25rem!important;
    position: relative;
    display: inline-flex;
    padding: 0px 20px;
    margin-right: 4px;
    vertical-align: middle;
    font-weight: 400;
    letter-spacing: 0.025em;
    color: inherit;
}
.menu-item-edge{
    font-size: 1.25rem!important;
    position: relative;
    display: inline-flex;
    padding: 0px 20px;
    width: auto!important;
    vertical-align: middle;
    font-weight: 400;
    letter-spacing: 0.025em;
    color: inherit;
    text-decoration: none;
    transition-property: all;
    transition-duration: .44s;
    transition-timing-function: cubic-bezier(0.5, 1.8, 1, 0.8);
}
.menu-item-connect{
    font-size: 1rem!important;
    position: relative;
    display: inline-flex;
    padding: 0px 20px;
    margin-right: 8px;
    margin-left: 8px;
    vertical-align: middle;
    font-weight: 400;
    letter-spacing: 0.025em;
    color: inherit;
}
.menu-item,
.menu-item-connect{
    text-decoration: none;
    transition-property: all;
    transition-duration: .44s;
    transition-timing-function: cubic-bezier(0.5, 1.8, 1, 0.8);
}
/* animation des liens */
.menu-item:after,
.menu-item-connect:after{
    content: "";
    position: absolute;
    bottom: 0; right: 20px; left: 20px;
    height: 2px;
    background-color: var(--vpp-red);
    opacity: 0;
    transform: translateY(5px);
    transition: all .5s;
}

.menu-item:hover:after,
.menu-item:focus:after,
.menu-item-connect:hover:after,
.menu-item-connect:focus:after{
    opacity: .5;
    transform: translateY(0);
}
.menu-item:focus,
.menu-item-connect:focus{
    outline: none;
}
.menu-item:hover,
.menu-item-connect:hover{
    transform: scale(1.125);
    
}
.menu-item-active{
    font-size: 1.5rem!important;
    font-weight: bold;
    position: relative;
    display: inline-block;
    padding: 0px 20px;
    vertical-align: middle;
    font-weight: 300;
    letter-spacing: 0.025em;
    color: inherit;
    text-decoration: none;
    transition: all .7s;
}
.menu-item-active:after{
    content: "";
    position: absolute;
    bottom: 0; right: 20px; left: 20px;
    height: 2px;
    background-color: var(--vpp-red);
    opacity: 1;
    transform: translateY(0px);
    

}
.menu-item-active:hover:after
.menu-item-active:focus:after{
    opacity: .4;
}
.menu-item-active:hover{
    transform: scale(0.75);
    transition-property: transform;
    transition-duration: .33s;
    /*transition-timing-function: cubic-bezier(0.5, 1.8, 1, 0.75);*/
    transition-timing-function: ease-in;
}
.fg-vpp-lightRed-hover:hover{
    font-size: 110%;
    transition-property: all;
    transition-duration: .25s;
    transition-timing-function: linear;
    /*transition-timing-function: cubic-bezier(0.5, 1.8, 1, 0.8);*/
}
.fg-vpp-bo-lightRed-hover:hover{
    background-color: #000000;
    font-size: 2.25rem;
    font-family: sans-serif, "Helvetica Neue", "Lucida Grande", Arial;
    font-stretch: expanded;
}

@-webkit-keyframes skew{
    0%{
        transform: skewX(20deg);
    }
    100%{
        transform: skewX(-20deg);
    }
}

@keyframes skew{
    0%{
        transform: skewX(20deg);
    }
    100%{
        transform: skewX(-20deg);
    }
}

.header-main{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}
.nav-is-sticked .header-main{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    -webkit-animation: stickAnim .75s;
            animation: stickAnim .75s;
}
@-webkit-keyframes stickAnim{
    0%{
        transform: translateY(-86px);
    }
    100%{
        transform: translateY(0);
    }
}
@keyframes stickAnim{
    0%{
        transform: translateY(-86px);
    }
    100%{
        transform: translateY(0);
    }
}
.d-sticky{
    position: -webkit-fixed;
    position: fixed;
    top: 0;
}
.sticky{
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    z-index: 100;
}
.is-sticky{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    opacity: 0.9!important;
}
.phone-menu-item{

}
.item-carte:before{
    content: url(carteIco.png);
    vertical-align: bottom;
}
.switch-vpp-red .check::after{
    content: "Sans";
    background: var(--vpp-black)!important;
    border-color: var(--vpp-red)!important;
}
.switch-vpp-red input[type="checkbox"]:checked ~ .check{
    background: var(--vpp-red)!important;
}
.switch-vpp-red input[type="checkbox"]:checked ~ .check::after{
    content: "Avec";
    border-color: var(--vpp-yellow)!important;
    background: var(--vpp-red)!important;
}

.switch-vpp-black .check::after{
    background: #0a87c1!important;
    border-color: #0a87c1!important;
}
.switch-vpp-black input[type="checkbox"]:checked ~ .check{
    background: black!important;
}
.switch-vpp-black input[type="checkbox"]:checked ~ .check::after{
    border-color: white!important;
    background: white!important;
}

.hover-pointer:hover{
    cursor: pointer;
    transform: translateY(-2px);
}
.survol-tab:hover{
    cursor: default;
    border-radius: 4px;
    box-shadow: 1px 1px 12px var(--vpp-yellow); /* #555 */
    transform: scale(1.015);
    transition-property: transform;
    transition-duration: .55s;
    transition-timing-function: cubic-bezier(0.5, 2.5, 1, 0.8);
}
.survol:hover{
    cursor: default;
    border-radius: 4px;
    box-shadow: 1px 1px 12px var(--vpp-red); /* #555 */
    transform: scale(1.015);
    transition-property: transform;
    transition-duration: .55s;
    transition-timing-function: cubic-bezier(0.5, 2.5, 1, 0.8);
}

.label-hover-1:hover{
    transform: translateY(-2px);
    cursor: pointer;
    text-shadow: 5px 5px 3px rgb(101, 109, 145), 3px 6px 1px rgb(42, 50, 100);
}
.col-100{
    width: 100%!important;
}

.item-select:hover{
    cursor: pointer;
    background: #f29888;
    color: #ffffff;
    box-shadow: 0px 1px 3px #666666;
    background-image: linear-gradient(to bottom, #f29888, #841f0e);
    text-decoration: none;
}

.separation-right{
    border-style: none double none none;
}
.separation-left{
    border-style: none none none double ;
}

.vertical-text-center{
    vertical-align: center;
    padding-top: auto;
    padding-bottom: auto;
    margin-top: auto;
    margin-bottom: auto;
}
.p-text{
    padding-top: 1px;
    padding-right: 3px;
    padding-bottom: 2px;
    padding-left: 3px;
}
.titre-logo{
  font-weight: bold;
  color: #6E6D81;
  font-family: cursive;
  width: 100%;
}
.borders{
    border: solid;
    border-width: 1.5px;
    border-color: black;
}
.red-border{
    border: solid;
    border-width: 1.5px;
    border-color: red;
}
.blue-border{
    border: solid;
    border-width: 1.5px;
    border-color: blue;
}
.green-border{
    border: solid;
    border-width: 1.5px;
    border-color: green;
}
.gray-border{
    border: solid;
    border-width: 1.5px;
    border-color: gray;
}
.yellow-border{
    border: solid;
    border-width: 1.5px;
    border-color: #f3ff33;
}
.black-border{
    border: solid;
    border-width: 1px;
    border-color: #000000;
}
.borders-radius-bl-tl-5{
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
}
.link-nav{
    font-size: 0.75rem;
}
.control-info-transparent{
    font-size: 0.80rem;
    background-color: transparent;
    text-decoration: none;
    /* padding: 0.25rem; */
    margin-bottom: 0.5rem;
    border-radius: 0.5rem;
}
.section-publication{
    box-shadow: 1px 1px 6px #8b5f74; /*555;*/
    border-radius: 10px;
}
/* */
.hide-zone{
    display: none!important;
}
.show-zone{
    display: block!important;
}
.show-zone-flex{
    display: flex!important;
}
.hide-elem{
    display: none;
}
.hide-error{
    display: none;
}
.show-error{
    display: inline-block;
}
.show-elem{
    display: block!important;
}
.show-elem-flex{
    display: flex!important;
}
.button-hide{
    display: none!important;
}
.text-article-actuality{
    vertical-align: sub;
}
.control-erreur,
.erreur-label{
    color: var(--vpp-fg-error);
    font-size: 1rem;
    font-weight: 700;
    background-color: var(--vpp-yellow);
    margin-top: 0.25rem;
    padding: 0.25rem;
}
.not-required-label{
    color: var(--vpp-green-light);
    font-size: 1rem;
    font-weight: normal;
    background-color: var(--vpp-green-dark);
    margin-top: 0.25rem;
    padding: 0.25rem;
}
.display-none{
    display: none;
}
.div-charms{
    padding-bottom: 1.5rem;
}
.accordion-btn{
    font-size: .8rem;
}
.accordion-container{
    padding: 0px;
}
.accordion-button{
    padding: 8px 16px 8px 16px;
}
.accordion-content{
    padding: 5px;
}
.accordion-item{
    margin: 2px 5px 2px 5px;
    font-size: 0.75rem;
}
.accordion-item:hover{
    cursor: pointer;
    transform: translateX(3px);
    font-style: italic;
    font-size: 0.85rem;
}
.lien-perso{
    padding-right: 1px;
    padding-left: 1px;
}
.lien-perso:hover{
    transform: scale(1.1);
    cursor: pointer;
}

.check-vpp:hover,
.check-label-vpp:hover{
    cursor: pointer;
    background: #3cb0fd;
    color: #ffffff;
    box-shadow: 0px 1px 3px #666666;
    background-image: linear-gradient(to bottom, #3cb0fd, #1d8de3);
    text-decoration: none;
}
.check-label-vpp-checked{
    cursor: pointer;
    background: #D0D4D7;
    color: black;
    box-shadow: 0px 1px 3px #666666;
    background-image: linear-gradient(to bottom, #3cb0fd, #1d8de3);
    text-decoration: none;
}
.display-top-right{
    position:absolute;
    right   :0;
    top     :0;
}
.halo-1{
    box-shadow: 1px 1px 12px #555;
}
.round-img{
    border-radius: 50%;
}
.round-img:hover{
    cursor: default;
    box-shadow: 1px 1px 12px var(--vpp-red-dark); /* #555 */
    transform: scale(1.5);
    transition-property: transform;
    transition-duration: .55s;
    transition-timing-function: cubic-bezier(0.5, 2.5, 1, 0.8);
}
.round-5{
    border-radius: 5px;
}
.top-round-5{
    border-top-right-radius: 5px!important;
    border-top-left-radius: 5px!important;
}
.top-round-15{
    border-top-right-radius: 15px!important;
    border-top-left-radius: 15px!important;
}
.bottom-round-5{
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}
.font-size-pub{
    font-size: 1.25rem;
}
.title-normal-size{
    color: #fff;
    font-weight: 700;
    text-shadow: 0px 0px 5px #fff, 0px 0px 7px #fff;
}
.font-pizzas-ingreds{
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    text-align: center;
}
.font-presentation{
    font-family: 'Poppins', cursive!important;
}
.font-size-presentation{
    font-size: 1.2rem;
}
@media screen and (max-width: 439px){
    .font-size-presentation{
        font-size: .8rem;
    }
}
@media screen and (min-width: 440px) and (max-width:767px){
    .font-size-presentation{
        font-size: 1rem;
    }
}
.font-services-title,
.font-bestsellers-title,
.font-pizzas-title{
    font-family: Italianno, cursive!important;
}
.font-services-title,
.font-bestsellers-title,
.font-pizzas-title{
    font-size: 3rem;
    text-align: center;
}
@media only screen and (min-width: 768px){
    #infoTel{
        display: none!important;
    }
}
/* table responsive */
@media only screen and (max-width: 700px){
    .table-responsive table.hide-elem,
    .table-responsive thead.hide-elem,
    .table-responsive tbody.hide-elem,
    .table-responsive tr.hide-elem,
    .table-responsive th.hide-elem,
    .table-responsive td.hide-elem{
        display: none;
        width: 100%;
    }
    .table-responsive table,
    .table-responsive thead,
    .table-responsive tbody,
    .table-responsive tr,
    .table-responsive th,
    .table-responsive td{
        display: block;
    }
    .table-responsive td > input{
        width: 50%;
        margin-right: auto;
        margin-left: 40%;
    }
    .table-responsive thead{
        display: none;
    }
    .table-responsive td{
        padding-left: 100px;
        position: relative;
        border: solid 1px #ccc;
        margin-top: -1px; /* pour éviter l'empilement des bordures */
    }
    .table-responsive td::before{
        content: attr(data-label-name);
        position: absolute;
        top: 0;
        left: 0;
        text-align: left!important;
        width: 100px;
        bottom: 0;
        background-color: #b13c2e;
        color: #fff;
        display: flex;
        align-items: center;
        padding: 10px;
        font-weight: bold;
    }
    .container-button{
        /*column-span: all;*/
        display: flex!important;
        justify-content: center!important;
    }
    .finger:hover{
        cursor: pointer;
        transform: scale(1);
    }
    .table-responsive tr{
        margin-bottom: .33rem;
        margin-top: 2rem;
    }
    .table-responsive td:nth-child(even){ background-color: var(--mt-green); }
    .table-responsive td:nth-child(odd){ background-color: var(--mt-green-dark); }
    .dialog-button{
        max-width: 75%!important;
        margin-left: auto!important;
        margin-right: auto!important;
    }

}

.p-carousel{
    font-family: "Viga", sans-serif;
    text-shadow: rgb(0, 0, 0) 0.02em 0.08em 0em;
    text-align: center;
    z-index: 10000!important;
    border: solid;
    border-width: 2px;
    border-color: red;
}
.txt-justify{
    text-align: justify!important;
    text-justify: inter-word!important;
}
.title-index{
    font-family: "Viga", sans-serif;
    font-size: 5rem;
    font-weight: 900;
    letter-spacing: 0.5px;
    text-shadow: rgb(0, 0, 0) 0.02em 0.08em 0em;
    text-align: center;
    z-index: 1;
}
.title-carousel,
.title-index-second{
    font-family: "Viga", sans-serif;
    font-weight: 900;
    letter-spacing: 0.5px;
    text-shadow: rgb(0, 0, 0) 0.02em 0.08em 0em;
    text-align: center;
}
.title-index-second{
    z-index: 1;
}
.title-carousel{
    position: absolute!important;
    z-index: 10000!important;
    margin-right: auto;
    margin-left: auto;
}
@media screen and (max-width: 575px){ 
    .title-carousel{
        font-size: 1.75rem;
        width: auto;
    }
}
@media screen and (min-width: 576px) and (max-width: 767px){
    .title-carousel{
        font-size: 2.25rem;
    }
}
@media screen and (min-width: 768px) and (max-width: 991px){ 
    .title-carousel{
        font-size: 2.75rem;
    }
}
@media screen and (min-width: 992px) and (max-width: 1199px){ 
    .title-carousel{
        font-size: 3.25rem;
    }
}
@media screen and (min-width: 1200px) and (max-width: 1451px){ 
    .title-carousel{
        font-size: 3.75rem;
    }
}
@media screen and (min-width: 1452px){
    .title-carousel{
        font-size: 4.25rem;
    }
}
.title-publication,
.sub-title-publication,
.sub-title-index-second,
.sub-title-index-first,
.sub-title-index-first-realisations,
.title-staff-member{
    font-family: "Viga", sans-serif;
    letter-spacing: 0.5px;
    z-index: 1;
}
.sub-title-index-first,
.sub-title-index-first-realisations{
    font-weight: 900;
    text-shadow: rgb(0, 0, 0) 0.02em 0.08em 0em;
}
.title-publication{
    font-weight: 900;
    text-shadow: rgb(0, 0, 0) 0.02em 0.08em 0em;
}
.title-staff-member{
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--vpp-yellow);
    font-family: "Viga", sans-serif;
    letter-spacing: 0.5px;
    z-index: 1;
    font-weight: 900;
    text-shadow: rgb(0, 0, 0) 0.02em 0.08em 0em;
}
.title-index,
.about-header-title{
    font-size: clamp(16px, 4.75rem, 10vw);
}
.title-index-second{
    font-size: clamp(14px, 3.25rem, 7.5vw);
}
.sub-title-index-first,
.sub-title-index-first-realisations,
.sub-title-publication{
    font-size: clamp(12px, 2.75rem, 5vw);
}
.sub-title-index-second{
    font-size: clamp(10px, 2.55rem, 4vw);
}
.title-publication{
    font-size: clamp(14px, 3.25rem, 5.75vw);
}
@media screen and (max-width: 575px){
    .font-services-title,
    .font-bestsellers-title,
    .font-pizzas-title{
        font-size: 2.125rem;
        text-align: center;
    }
}
@media screen and (min-width: 576px){
    .font-services-title,
    .font-bestsellers-title,
    .font-pizzas-title{
        font-size: 3rem;
        text-align: center;
    }
}
/*@media screen and (max-width: 439px){
    .title-index{
        font-size: 2rem;
    }
    .title-index-second{
        font-size: 1.5rem;
    }
    .sub-title-index-first{
        font-size: 1.125rem;
    }
    .sub-title-index-first-realisations{
        font-size: 1.125rem;
    }
    .sub-title-index-second{
        font-size: 1rem;
    }
    .title-publication{
        font-size: 1.33rem;
    }
    .sub-title-publication{
        font-size: 1.125rem;
    }
}
@media screen and (min-width: 440px) and (max-width: 767px){ 
    .title-index{
        font-size: 2.5rem;
    }
    .title-index-second{
        font-size: 2.25rem;
    }
    .sub-title-index-first{
        font-size: 1.35rem;
    }
    .sub-title-index-first-realisations{
        font-size: 1.35rem;
    }
    .sub-title-index-second{
        font-size: 1.125rem;
    }
    .title-publication{
        font-size: 2rem;
    }
    .sub-title-publication{
        font-size: 1.5rem;
    }
}
@media screen and (min-width: 768px) and (max-width: 1199px){ 
    .title-index{
        font-size: 3.25rem;
    }
    .title-index-second{
        font-size: 2.75rem;
    }
    .sub-title-index-first{
        font-size: 2.25rem;
    }
    .sub-title-index-first-realisations{
        font-size: 2.25rem;
    }
    .sub-title-index-second{
        font-size: 1.85rem;
    }
    .title-publication{
        font-size: 2.75rem;
    }
    .sub-title-publication{
        font-size: 2.25rem;
    }
}
@media screen and (min-width: 1200px){ 
    .title-index{
        font-size: 3.75rem;
    }
    .title-index-second{
        font-size: 3.25rem;
    }
    .sub-title-index-first{
        font-size: 2.75rem;
    }
    .sub-title-index-first-realisations{
        font-size: 2.75rem;
    }
    .sub-title-index-second{
        font-size: 2.55rem;
    }
    .title-publication{
        font-size: 3.25rem;
    }
    .sub-title-publication{
        font-size: 2.75rem;
    }
}*/
.title-text-staff-member{
    font-weight: 500;
    font-style: italic;
    color: var(--vpp-yellow);
}
.font-strok-light{
    -webkit-text-stroke: 1px #000;
}
.strok-black{
    -webkit-text-stroke: 1px black;
    color: white;
    text-shadow:
         3px  3px 0 #000,
        -1px -1px 0 #000,  
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000;
}
.shadow-strok-red{
    -webkit-text-stroke: 1px red;
    text-shadow:
         3px  3px 0 #000,
        -1px -1px 0 #000,  
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000;
}
.shadow-strok-yellow{
    -webkit-text-stroke: 1px var(--vpp-yellow);
    text-shadow:
         3px  3px 0 #000,
        -1px -1px 0 #000,  
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000;
}
.titre-big{
    font-size: 3rem;
    color: #fff;
    font-weight: 700;
    text-shadow: 0px 0px 5px #fff, 0px 0px 7px #fff;
}
.title-mentions{
    font-size: 4rem;
    color: #fff;
    font-weight: 700;
    text-shadow: 0px 0px 5px #fff, 0px 0px 7px #fff;   
}
.sub-title-h1{
    font-size: 75%;
}
.sub-title-mentions{
    font-size: 50%;   
}
.titre-niv-1{
    font-size: 2rem;
    margin: 0;
    padding: 0;
}
.titre-niv-2{
    margin: 0;
    padding: 0;
    font-size: 1.75rem;
    opacity: .80;
}
.titre-niv-3{
    margin: 0;
    padding: 0;
    font-size: 1.1rem;
    opacity: .80;
}
.ombre-1{
    text-shadow: 1px 2px 3px rgba(0,0,0, 0.5);
}
/* IMAGES */
.avatar{
    height:106px;
    width :106px;
}
.div-vertical{
    display: flex;
    flex-direction: column;
}
.modal-dialog{
    position: fixed; 
    font-family: Arial, Helvetica, sans-serif;
    top: 0!important;
    right: 0!important;
    bottom: 0!important;
    left: 0!important;
    background: rgba(0,0,0,0.8);
    z-index: 100;
    display: none;
    overflow: scroll;

}
.modal-dialog > .container{
    width: auto!important;
    max-width: 90vw!important;
    max-height: 90vh!important;
    height: auto!important;
    /*position: relative;*/
    margin-top: 1rem;
    margin-left: auto!important;
    margin-right: auto!important;
    margin-bottom: 1rem;
    padding: 5px;
    border-radius: 10px;
}
.modal-dialog > .container-auto{
    width: auto!important;
    height: auto!important;
    min-width: 85%!important;
    max-width: 85%!important;
    max-height: 85vh!important;
    /*position: relative;*/
    margin: 16px auto;
    padding: 5px;
    border-radius: 10px;
}
.modal-content{

    max-height:  99%!important; 
    max-height: 99%!important; 
    margin: auto;
}
.close{
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: 0px;
    text-align: center;
    top: 0px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 12px;
    box-shadow: 1px 1px 3px #000;
    z-index: 101!important;
}
.close:hover{
    background: red;
    cursor: pointer;
}
.modal-dialog-livraison{
    position: fixed; 
    font-family: Arial, Helvetica, sans-serif;
    top: 0!important;
    background: rgba(0,0,0);
    z-index: 100;
    display: none;
    height: auto;
    width: auto;
    max-height: 99vh!important;
    max-width: 99vw!important;
    overflow: scroll;
    padding-right: 15px;
}

.modal-dialog-livraison > .container{
    width: auto!important;
    height: auto!important;
    max-width: 100%!important;
    max-height: 100%!important;
    /*position: relative;*/
    margin-top: 1rem;
    margin-left: auto!important;
    margin-right: auto!important;
    margin-bottom: 1rem;
    padding: 5px;
    border-radius: 10px;

}
.modal-dialog-livraison > .container-auto{
    width: auto!important;
    height: auto!important;
    min-width: 85%!important;
    max-width: 85%!important;
    max-height: 85vh!important;
    /*position: relative;*/
    margin: 16px auto;
    padding: 5px;
    border-radius: 10px;
}
.modal-content-scroll{
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 1.5rem;
}

.modal-content-livraison{
    max-height:  99%!important; 
    max-height: 99%!important; 
    margin: auto;
}
.img-clickable:hover{
    cursor: pointer;
}
.blink-text{
    color:red;
    -webkit-animation: colorblink 2s infinite;
            animation: colorblink 2s infinite;
}
@-webkit-keyframes colorblink{
    0%{ }
    33%{ color: blue; }
    66%{ color: rebeccapurple;  }
}
@keyframes colorblink{
    0%{ }
    33%{ color: blue; }
    66%{ color: rebeccapurple;  }
}
.blink{
    position: relative;
    /* background-color: #607D8B; */
    -webkit-animation-name: opac;
            animation-name: opac;
    -webkit-animation-duration: 0.5s;
            animation-duration: 0.5s;
    -webkit-animation-iteration-count: 3;
            animation-iteration-count: 3; /* infinite ou  un nb de fois */
    -webkit-animation-direction: normal;
            animation-direction: normal; /* normal , reverse, alternate-reverse ou alternate */
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear; /* ease , linear , ease-in, ease-out, ease-in-out ou cubic-bezier(n,n,n,n) */
    -webkit-animation-fill-mode: none;
            animation-fill-mode: none; /* none , forwards ,  backwards ou both */
    /* animation: opac 0.5s infinite normal linear none; */
}
.blinkInfinity{
    position: relative;
    -webkit-animation-name: blinky;
            animation-name: blinky;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite; /* infinite ou  un nb de fois */
    -webkit-animation-direction: alternate;
            animation-direction: alternate; /* normal , reverse, alternate-reverse ou alternate */
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear; /* ease , linear , ease-in, ease-out, ease-in-out ou cubic-bezier(n,n,n,n) */
    -webkit-animation-fill-mode: none;
            animation-fill-mode: none; /* none , forwards ,  backwards ou both */
}

@-webkit-keyframes blinky{
    /*0% { opacity: 0; } /* invisible */
    10%  { opacity: 0.7; }
    20%  { opacity:   1; }
    30%  { opacity: 0.7; }
    40%  { opacity:   1; }
    50%  { opacity: 0.7; }
    60%  { opacity:   1; }
    70%  { opacity: 0.7; }
    80%  { opacity:   1; }
    90%  { opacity: 0.7; }
    100% { opacity:   1; }
}

@keyframes blinky{
    /*0% { opacity: 0; } /* invisible */
    10%  { opacity: 0.7; }
    20%  { opacity:   1; }
    30%  { opacity: 0.7; }
    40%  { opacity:   1; }
    50%  { opacity: 0.7; }
    60%  { opacity:   1; }
    70%  { opacity: 0.7; }
    80%  { opacity:   1; }
    90%  { opacity: 0.7; }
    100% { opacity:   1; }
}
.elem-shadow{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.error{
    color: red;
}
.header-round{
    background-color: grey;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}


.h-top-bar{
    box-shadow: rgba(255, 255, 255, 0.07) 0 1px 0 inset;
    border-top: 2px solid #121212;
}
.h-bottom-bar{
    box-shadow: rgba(255, 255, 255, 0.07) 0 1px 0 inset;
    border-bottom: 1px solid #121212;
}
.v-bar{
    box-shadow: rgba(255, 255, 255, 0.07) 1px 0 0 inset;
    border-left: 1px solid #121212;
}
.h-separate{
    height: 4px;
    min-height: 4px;
    max-height: 4px;
}
.list-deco-none{
    list-style: none;
}


.d-nav{
    z-index: 500;
}
.d-phone{
    display: none;
}
.index-padding-map{
    padding-top: 30px;
}

@media screen and (max-width: 480px){
    .titre-connect{
        font-size: 1.75rem!important;
    }
    .sous-titre-connect{
        font-size: 1.25rem!important;
    }
}
@media screen and (min-width: 481px) and (max-width: 1024px){
    .titre-connect{
        font-size: 2.125rem!important;
    }
    .sous-titre-connect{
        font-size: 1.75rem!important;
    }
}

/* lg */
/*@media screen and (min-width: 768px) and (max-width: 991px){*/
@media screen and (max-width: 1199px){
    .d-phone{
        display: flex!important;
    }
    .d-desktop{
        display: none!important;
    }
}

/*@media screen and (min-width: 992px) and (max-width: 1119px){*/
@media screen and (min-width: 1200px){
    .d-phone{
        display: none!important;
    }
    .d-desktop{
        display: flex!important;
    }
    .index-padding-map{
        padding-top: 92px;
    }
}
.bt-accordion{
    margin-bottom: 2px;
}
.text-wrap{
    word-wrap: break-word;
}
.card-article-mention{
    box-shadow: 1px 1px 12px var(--vpp-red);
}
.card-bestsellers-content{
    display: block;
    min-height: 138px!important;
    height: 138px!important;
}
.card-bestsellers,
.card-pizza{
    width: 100%;
    min-width: 100%;
    max-width: 100%;
}
.card-bestsellers,
.card-service,
.card-pizza{
    display: block;
    /*position: relative;*/
    font-size: .875rem;
    border-radius: 5px;
    border: 1px #dfdfdf;
    background-color: #fff;
    box-shadow: none;
    transition-timing-function: cubic-bezier(0.42, 0, 1, 1);
    /* cubic-bezier(0, 0.1, 1.125, 1); */
    transition-property: all;
    transition-duration: .55s;
}
.card-service,
.card-pizza{
	margin: 1rem;
}
.card-bestsellers{
	margin: 8px 0.7rem 1rem 0.7rem;
}
.card-service-header{
	padding-top: 1rem;
	padding-bottom: 0.5rem;
}
.card-bestsellers:hover{
    transform: scale(1.075);
    transition-timing-function: cubic-bezier(0.5, 2.5, 1, 0.8);
    border: 1px solid var(--vpp-red);
    box-shadow: 1px 1px 12px var(--vpp-red);
}

.card-pizza-header{
    padding: 16px 2px 8px 2px;
    font-size: 16px;
    border-radius: 2px 2px 0 0;
}
.card-bestsellers-title,
.card-pizza-title{
    text-align: center;
}
.header-accordion-title{
    font-size: 1.75rem;
    opacity: .90;
    overflow-wrap: break-word;
}
.img-bs:hover{
	cursor: pointer;
}
@media screen and (max-width: 360px){
    .img-bs{
        width: 100%;
    }
}
@media screen and (min-width: 361px){
    .img-bs{
        width: 171px;
        max-width: 171px;
    }
}
@media screen and (max-width: 310px){
    .header-accordion-title{
        font-size: .7rem;
    }
}
@media screen and (min-width: 310px) and (max-width: 347px){
    .header-accordion-title{
        font-size: .8rem;
    }
}
@media screen and (min-width: 348px) and (max-width: 379px){
    .header-accordion-title{
        font-size: .9rem;
    }
}
@media screen and (min-width: 380px) and (max-width: 433px){
    .header-accordion-title{
        font-size: 1rem;
    }
}
@media screen and (min-width: 434px) and (max-width: 469px){
    .header-accordion-title{
        font-size: 1.15rem;
    }
}
@media screen and (min-width: 470px) and (max-width: 557px){
    .header-accordion-title{
        font-size: 1.25rem;
    }
}
@media screen and (min-width: 558px) and (max-width: 650px){
    .header-accordion-title{
        font-size: 1.5rem;
    }
}
.card-pizza-content{
    display: block;
    border-bottom: 1px solid var(--vpp-yellow-dark);
    min-height: 138px;
    height: 138px;
}
.card-pizza-footer{
    font-family: "Viga", sans-serif;
}
.card-chef img{
    width: 85%;
}
.tirets{
    padding-left: 4rem;
    border-bottom: 1px dashed var(--vpp-yellow-dark);
}
.tirets-brush{
    padding-left: 6.3575rem;
    border-bottom: 1px dashed var(--vpp-yellow-dark);
}
.tirets-cham{
    padding-left: 7.7rem;
    border-bottom: 1px dashed var(--vpp-yellow-dark);
}
.tirets-pizl{
    padding-left: 7.6125rem;
    border-bottom: 1px dashed var(--vpp-yellow-dark);
}
.tirets-pizxl{
    padding-left: 7rem;
    border-bottom: 1px dashed var(--vpp-yellow-dark);
}
@media screen and (min-width: 429px) and (max-width: 473px){
    .tirets-brush{
        padding-left: 2rem;
        border-bottom: 1px dashed var(--vpp-yellow-dark);
    }
    .tirets-cham{
        padding-left: 4rem;
        border-bottom: 1px dashed var(--vpp-yellow-dark);
    }
    .tirets-pizl{
        padding-left: 4rem;
        border-bottom: 1px dashed var(--vpp-yellow-dark);
    }
    .tirets-pizxl{
        padding-left: 4rem;
        border-bottom: 1px dashed var(--vpp-yellow-dark);
    }
}
@media screen and (min-width: 320px) and (max-width: 428px){
    .tirets-brush{
        padding-left: 1.5rem;
        border-bottom: 1px dashed var(--vpp-yellow-dark);
    }
    .tirets-cham{
        padding-left: 3rem;
        border-bottom: 1px dashed var(--vpp-yellow-dark);
    }
    .tirets-pizl{
        padding-left: 3rem;
        border-bottom: 1px dashed var(--vpp-yellow-dark);
    }
    .tirets-pizxl{
        padding-left: 2rem;
        border-bottom: 1px dashed var(--vpp-yellow-dark);
    }
}
@media screen and (min-width: 100px) and (max-width: 319px){
    .tirets-brush{
        padding-left: 1rem;
        border-bottom: 1px dashed var(--vpp-yellow-dark);
    }
    .tirets-cham{
        padding-left: 1rem;
        border-bottom: 1px dashed var(--vpp-yellow-dark);
    }
    .tirets-pizl{
        padding-left: 1rem;
        border-bottom: 1px dashed var(--vpp-yellow-dark);
    }
    .tirets-pizxl{
        padding-left: 1rem;
        border-bottom: 1px dashed var(--vpp-yellow-dark);
    }
}
.rounded-image{
    border-radius: 50%;
}
.staff-rounded-image{
    border-radius: 50%;
}
.service-image{
    max-width: 200px;
    width: 200px;
}
@media screen and (min-width: 359px){
    .vpp-gif{
        width: 99%;
        max-width: 360px;
    }
}
@media screen and (min-width: 361px){
    .vpp-gif{
        width: 360px;
        max-width: 360px;
    }
}
@media screen and (max-width: 369px){
    .card-service{
        width: 99.5%;
        min-width: 99.5%;
        max-width: 325px;
        margin-left: 0px;
        margin-right: 0px;
        margin-bottom: .5rem;
    }
    .card-service:hover{
        transform: scale(.95);
        transition-property: transform;
        transition-duration: .55s;
        transition-timing-function: cubic-bezier(0.5, 0.75, 1, 0.8);
        border: 1px solid var(--vpp-red);
        box-shadow: 1px 1px 12px var(--vpp-red);
    }
}
@media screen and (min-width: 370px){
    .card-service{
        width: 325px;
        min-width: 325px;
        max-width: 325px;
        }
}
@media screen and (min-width: 370px) and (max-width: 495px){
    .card-service:hover{
        transform: scale(1.065);
        transition-property: transform;
        transition-duration: .55s;
        transition-timing-function: cubic-bezier(0.5, 1.8, 1, 0.8);
        border: 1px solid var(--vpp-red);
        box-shadow: 1px 1px 12px var(--vpp-red); 
    }
    .card-service{
        margin-left: .25rem;
        margin-right: .25rem;
        margin-top: .125rem;
        margin-bottom: 1rem;
    }
}
@media screen and (min-width: 496px) and (max-width: 753px){
    .card-service{
        margin-left: .5rem;
        margin-right: .5rem;
        margin-top: .125rem;
        margin-bottom: 1.5rem;
    }
    .card-service:hover{
        transform: scale(1.065);
        transition-property: transform;
        transition-duration: .55s;
        transition-timing-function: cubic-bezier(0.5, 1.8, 1, 0.8);
        border: 1px solid var(--vpp-red);
        box-shadow: 1px 1px 12px var(--vpp-red);
    }
}
@media screen and (min-width: 754px) and (max-width: 959px){
    .card-service{
        margin-left: .5rem;
        margin-right: .5rem;
        margin-top: .125rem;
        margin-bottom: 1.75rem;
    }
    .card-service:hover{
        transform: scale(1.045);
        transition-property: transform;
        transition-duration: .55s;
        transition-timing-function: cubic-bezier(0.5, 1.8, 1, 0.8);
        border: 1px solid var(--vpp-red);
        box-shadow: 1px 1px 12px var(--vpp-red);
    }
}
@media screen and (min-width: 960px)/* and (max-width: 1064px)*/{
    .card-service{
        margin-left: .5rem;
        margin-right: .5rem;
        margin-top: .125rem;
        margin-bottom: 2.5rem;
    }
    .card-service:hover{
        transform: scale(1.065);
        transition-property: transform;
        transition-duration: .55s;
        transition-timing-function: cubic-bezier(0.5, 1.8, 1, 0.8);
        border: 1px solid var(--vpp-red);
        box-shadow: 1px 1px 12px var(--vpp-red);
    }
}
@media screen and (max-width: 767px){
	.box-p-bs{
		text-align: center;
		padding-top: 0px;
		padding-bottom: 2rem;
	}
}
@media screen and (max-width: 450px){
    .card-bestsellers{
        width: 100%;
        min-width: 100%;
        max-width: 450px;
        margin-left: 0px;
        margin-right: 0px;
        margin-bottom: 8px;
    }
    .card-bestsellers:hover{
        transform: scale(.95);
        transition-property: transform;
        transition-duration: .55s;
        transition-timing-function: cubic-bezier(0.5, 0.75, 1, 0.8);
        border: 1px solid var(--vpp-red);
        box-shadow: 1px 1px 12px var(--vpp-red);
    }
}
@media screen and (min-width: 451px) and (max-width: 500px){
    .card-bestsellers{
        width: 99%;
        min-width: 99%;
        max-width: 450px;
        margin-left: .25rem;
        margin-right: .25rem;
        margin-bottom: 2rem;
    }
    .card-bestsellers:hover{
        transform: scale(1.04);
        transition-property: transform;
        transition-duration: .55s;
        transition-timing-function: cubic-bezier(0.5, 2.5, 1, 0.8);
        border: 1px solid var(--vpp-red);
        box-shadow: 1px 1px 12px var(--vpp-red);
    }
}

@media screen and (min-width: 501px) and (max-width: 1161px){
    .card-bestsellers{
        width: 450px;
        min-width: 450px;
        max-width: 450px;
        margin-left: .25rem;
        margin-right: .25rem;
        margin-bottom: 2rem;
    }
}

@media screen and (min-width: 1162px) and (max-width: 1734px){
    .card-bestsellers{
        width: 450px;
        min-width: 450px;
        max-width: 450px;
        margin-left: .25rem;
        margin-right: .25rem;
        margin-bottom: 2rem;
    }
    .card-bestsellers:hover{
        transform: scale(1.04);
        transition-property: transform;
        transition-duration: .55s;
        transition-timing-function: cubic-bezier(0.5, 2.5, 1, 0.8);
        border: 1px solid var(--vpp-red);
        box-shadow: 1px 1px 12px var(--vpp-red);
    }
}

@media screen and (min-width: 1735px){
    .card-bestsellers{
        width: 450px;
        min-width: 450px;
        max-width: 450px;
        margin-left: .25rem;
        margin-right: .25rem;
        margin-bottom: 2rem;
    }
    .card-bestsellers:hover{
        transform: scale(1.04);
        transition-property: transform;
        transition-duration: .55s;
        transition-timing-function: cubic-bezier(0.5, 2.5, 1, 0.8);
        border: 1px solid var(--vpp-red);
        box-shadow: 1px 1px 12px var(--vpp-red);
    }
}
@media screen and (max-width: 701px){
    .cell-tiret{
        display: none;
    }
}
@media screen and (min-width: 702px){
    .cell-tiret{
        display: inline-block;
    }
}
@media screen and (max-width: 319px){
    .card-pizza{
        width: auto;
        max-width: 300px!important;
    }
}
@media screen and (max-width: 349px){
    .card-pizza:hover{
        border: 1px solid var(--vpp-red-dark);
        transform: scale(1.0125);
    }
}
@media screen and (min-width: 350px) and (max-width: 450px){
    .card-pizza:hover{
        border: 1px solid var(--vpp-red);
        transform: scale(1.025);
        transition-timing-function: cubic-bezier(0, 0.125, 1, 1);
    }
}
@media screen and (min-width: 451px) and (max-width: 991px){
    .card-pizza:hover{
        border: 1px solid var(--vpp-red-light);
        transform: scale(1.0275);
        transition-timing-function: cubic-bezier(.1, 0.125, 1.25, 1);
    }
}
@media screen and (min-width: 992px) and (max-width: 1199px){
    .card-pizza:hover{
        border: 1px solid var(--vpp-red-light);
        transform: scale(1.05);
        transition-timing-function: cubic-bezier(.1, 0.125, 1.25, 1);
    }
}
@media screen and (max-width: 1199px){
    .card-pizza:hover{
        box-shadow:
            0 0 calc(6 * .0625rem) calc(3 * .0625rem) var(--vpp-red-dark),
            0 0 calc(7 * .0625rem) calc(4 * .0625rem) var(--vpp-red),
            0 0 calc(14 * .0625rem) calc(9 * .0625rem) #ea8b7c;
        transition-property: all;
        transition-duration: .2s;
        animation: glow 3s ease-out 4s infinite alternate;
    }
}
@keyframes glow{
    0%{
        border-color: var(--vpp-red-dark);
        box-shadow: 
            0 0 calc(6 * .0625rem) calc(3 * .0625rem) var(--vpp-red-dark),
            0 0 calc(7 * .0625rem) calc(4 * .0625rem) var(--vpp-red),
            0 0 calc(14 * .0625rem) calc(9 * .0625rem) #ea8b7c;
    }
    100%{
        border-color: var(--vpp-red-light);
        box-shadow: 
            0 0 calc(6 * .0625rem) calc(3 * .0625rem) #d9f747,
            0 0 calc(7 * .0625rem) calc(4 * .0625rem) #b7591a,
            0 0 calc(14 * .0625rem) calc(9 * .0625rem) #733004;
    }
}
@media screen and (min-width: 1200px){
    .card-pizza:hover{
        border: 1px solid var(--vpp-red);
        box-shadow: 1px 1px 12px var(--vpp-red);
        transform: scale(1.075);
        transition-property: all;
        transition-duration: .2s;
        transition-timing-function: cubic-bezier(.1, 0.125, 1.25, 1);
    }
}
@media screen and (max-width: 495px){
    .card-pizza{
        margin: 8px auto;
    }
}
@media screen and (min-width: 320px) and (max-width: 495px){
    .card-pizza{
        width: auto;
        /* min-width: 85%; */
        max-width: 300px!important;
    }
}
@media screen and (min-width: 496px){
    .card-pizza{
        width: 300px!important;
        min-width: 300px!important;
        max-width: 300px!important;
    }
}
.card-staff{
    box-shadow: 0.5px 0.5px 7px rgba(255, 190, 210, 0.8);
    border-radius: 10px;
    transition-property: all;
    transition-duration: .44s;
    transition-timing-function: cubic-bezier(0.5, 2.5, 1, 1.125);
}
@media screen and (max-width: 575px){
    .card-staff{
        max-width: 98!important;
        min-width: 75%!important;
        width: auto!important;
        /*width: 87.671%!important;*/
    }
    .card-staff:hover{
        transform: scale(1.0125);
    }
}
@media screen and (min-width: 576px) and (max-width: 767px){
    .card-staff{
        max-width: 78%!important;
        min-width: 51%!important;
        width: auto!important;
    }
    .card-staff:hover{
        transform: scale(1.05);
    }
}
@media screen and (min-width: 768px) and (max-width: 991px){
    .card-staff{
        max-width: 448px!important;
        min-width: 448px!important;
        min-width: 45.225%!important;
    }
    .card-staff:hover{
        transform: scale(1.0125);
    }
}
@media screen and (min-width: 992px) and (max-width: 1199px){
    .card-staff{
        max-width: 448px!important;
        width: 448px!important;
        min-width: 448px!important;
    }
    .card-staff:hover{
        transform: scale(1.05);
    }
}
@media screen and (min-width: 1200px){
    .card-staff{
        max-width: 448px!important;
        width: 448px!important;
        min-width: 448px!important;
    }
    .card-staff:hover{
        transform: scale(1.05);
    }
}

.loader-section{
    margin: 0;
    padding: 0;
    text-align: center;
    height: 75px;
}

.loader{
    width: 50px;
    height: 50px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
}
.dom-loader{
    position: fixed;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    margin-top: auto;
    margin-bottom: auto;
    top: 50%;
    z-index: 102;
    pointer-events: none;
}
.dom-loader:target{
    opacity:1;
    pointer-events: auto;
}
 .dom-loader>div{
    position: relative;
    margin: auto;
}
.loader-quart{

    border-radius: 50px;
    border: 6px solid rgba(128, 128, 128, 0.4);
}
.loader-quart:after{
    content:'';
    position: absolute;
    left: -6px;
    right: -6px;
    bottom: -6px;
    top: -6px;
    border-radius: 50px;

    border-top: 6px solid #FFF;

    -webkit-animation: spin 2s linear 0s infinite;
    animation: spin 2s linear 0s infinite;
}
.loader-quart-anti:after{
    content:'';
    position: absolute;

    left: -6px;
    right: -6px;
    bottom: -6px;
    top: -6px;
    border-radius: 50px;

    border: 6px solid transparent;

    border-top-color: #FFF;
    border-bottom-color: rgba(0, 0, 0, 0.4);
    -webkit-animation: anti-spin 0.75s cubic-bezier(0.25,0.50,0.75,0.50) 0s infinite;
    animation: anti-spin 0.75s cubic-bezier(0.25,0.50,0.75,0.50) 0s infinite;
}
.loader-double{
    border-radius: 50px;
    border: 6px solid transparent;
    border-top-color: #85C1BE;
    border-bottom-color: #EC459E;
    -webkit-animation: spin 1s linear 0s infinite;
    animation: spin 1s linear 0s infinite;
}
.loader-double:after{
    content:'';
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 4px;
    top: 4px;
    border-radius: 50px;
    border: 6px solid transparent;
    border-top-color: #725C7F;
    border-bottom-color: #FFF;
    opacity: 0.7;
    -webkit-animation: spinreverse 2s linear 0s infinite;
    animation: spinreverse 2s linear 0s infinite;
}
.loader-double:before{
    content:'';
    position: absolute;
    left: -15px;
    right: -15px;
    bottom: -15px;
    top: -15px;
    border-radius: 50px;
    border: 6px solid transparent;
    border-top-color: #EC459E;
    border-bottom-color: #85C1BE;
    opacity: 0.7;
    -webkit-animation: spinreverse 3s linear 0s infinite;
    animation: spinreverse 3s linear 0s infinite;
}

.loader-circles{
    border-radius: 50px;
    border: 3px solid transparent;
    border-top-color: #FFF;
    -webkit-animation: spin 1s linear 0s infinite;
    animation: spin 1s linear 0s infinite;
}
@-webkit-keyframes spin{
    0%{ transform: rotate(0deg); }
    100%{ transform: rotate(360deg); }
}
@keyframes spin{
    0%{ transform: rotate(0deg); }
    100%{ transform: rotate(360deg); }
}
@-webkit-keyframes anti-spin{
    100%{ transform: rotate(0deg); }
    0%{ transform: rotate(360deg); }
}
@keyframes anti-spin{
    100%{ transform: rotate(0deg); }
    0%{ transform: rotate(360deg); }
}
@-webkit-keyframes spinreverse{
    0%{ transform: rotate(0deg); }
    100%{ transform: rotate(-360deg); }
}
@keyframes spinreverse{
    0%{ transform: rotate(0deg); }
    100%{ transform: rotate(-360deg); }
}

.text-3d{
    color: #fff;
    text-align: center;
    font-weight: bold;
    font-family: Helvetica;
    text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}
.texte-blur{
    text-align: center;
    font-size: 1rem;
    color: #fff;
    font-weight: 700;
    -webkit-animation: blur 2s ease-out infinite;
    animation: blur 2s ease-out infinite;
    text-shadow: 0px 0px 5px #fff, 0px 0px 7px #fff;
}
.text-alert{
    text-align: center;
    font-weight: 700;
    -webkit-animation: blur 0.5s ease-out infinite;
    animation: blur 0.5s ease-out infinite;
    text-shadow: 0px 0px 5px var(--vpp-red), 0px 0px 3px var(--vpp-red);
}
@-webkit-keyframes blur{
    from{
        text-shadow:0px 0px 10px #fff,
        0px 0px 10px #fff,
        0px 0px 25px #fff,
        0px 0px 25px #fff,
        0px 0px 25px #fff,
        0px 0px 25px #fff,
        0px 0px 25px #fff,
        0px 0px 25px #fff,
        0px 0px 50px #fff,
        0px 0px 50px #fff,
        0px 0px 50px #7B96B8,
        0px 0px 150px #7B96B8,
        0px 10px 100px #7B96B8,
        0px 10px 100px #7B96B8,
        0px 10px 100px #7B96B8,
        0px 10px 100px #7B96B8,
        0px -10px 100px #7B96B8,
        0px -10px 100px #7B96B8;
    }
}
@keyframes blur{
    from{
        text-shadow:0px 0px 10px #fff,
        0px 0px 10px #fff,
        0px 0px 25px #fff,
        0px 0px 25px #fff,
        0px 0px 25px #fff,
        0px 0px 25px #fff,
        0px 0px 25px #fff,
        0px 0px 25px #fff,
        0px 0px 50px #fff,
        0px 0px 50px #fff,
        0px 0px 50px #7B96B8,
        0px 0px 70px #7B96B8,
        0px 7px 60px #7B96B8,
        0px 7px 50px #7B96B8,
        0px 7px 40px #7B96B8,
        0px 0px 30px #7B96B8,
        0px -7px 20px #7B96B8,
        0px -7px 10px #7B96B8;
    }
}
.texte-perspective{
    text-shadow: 0   1px 0 #eee,
                 0   2px 0 #e5e5e5,
                -1px 3px 0 #C8C8C8,
                -1px 4px 0 #C1C1C1,
                -2px 5px 0 #B9B9B9,
                -2px 6px 0 #B2B2B2,
                -2px 7px 2px rgba(0,0,0, 0.6),
                -2px 7px 8px rgba(0,0,0, 0.2),
                -2px 7px 45px rgba(0,0,0, 0.4);
}
.texte-ciselage{
    text-shadow: 1px 2px 0 rgba(0,0,0,0.4),
                -1px -2px 0 rgba(255,255,255,1);
}

.rotate-logo{
    -webkit-animation-delay: 0.0s;
            animation-delay: 0.0s;
    -webkit-animation-direction: alternate;
            animation-direction: alternate;
    -webkit-animation-duration: 750ms;
            animation-duration: 750ms;
    -webkit-animation-fill-mode: none;
            animation-fill-mode: none;
    -webkit-animation-iteration-count: 5;
            animation-iteration-count: 5;
    -webkit-animation-name: rotating;
            animation-name: rotating;
    -webkit-animation-timing-function: ease, step-start, cubic-bezier(0.1, 1, 1.0, 0.1);
            animation-timing-function: ease, step-start, cubic-bezier(0.1, 1, 1.0, 0.1);
}
@-webkit-keyframes rotating{
  from{ transform: scaleX(0); }
  to  { transform: scaleX(1); }
}
@keyframes rotating{
  from{ transform: scaleX(0); }
  to  { transform: scaleX(1); }
}

.gliss-title{
    -webkit-animation-duration: 1.75s;
            animation-duration: 1.75s;
    -webkit-animation-name: glissement;
            animation-name: glissement;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
}
@-webkit-keyframes glissement{

    from{
        left: 100vw;
    }
    to{
        left: 0vw;
    }
}
@keyframes glissement{

    from{
        left: 100vw;
    }
    to{
        left: 0vw;
    }
}
.fade-in{
    -webkit-animation-name: fadeInOpacity;
    animation-name: fadeInOpacity;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}
@-webkit-keyframes fadeInOpacity{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@keyframes fadeInOpacity{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
.bo-header-title,
.mentions-header-title,
.about-header-title{
    font-family: 'Ubuntu', sans-serif;
    font-weight: 700;
    color: var(--vpp-red)!important;
    text-align: center;
    text-shadow: 0.02em 0.08em 0em #000000;
}
.mentions-header,
.about-header{
    margin: 0;
    padding: 0;
    font-family: "Viga", sans-serif;
}
.hauteur-mini{
    min-height: 37.5rem;
}
.hauteur-mini2{
    min-height: 20rem!important;
    height: 20rem!important;
    border: solid black 2px!important;
}
.photo-brightness-50 img{
    filter: brightness(50%);
    -webkit-filter: brightness(50%);
}
.photo-brightness-50 img:hover{
    filter: brightness(100%);
    -webkit-filter: brightness(100%);
}
.zone-transparente{
    background: transparent;
}

.span-button{
    display: block;
    text-align: center;
    height: 100%;
    width: 100%;
}
.button-anime{
    width: 85%;
    height: 2.5rem;
    background: none;
    border: 0;
    box-sizing: border-box;
    padding: 4px;
    padding-bottom: 6px;
    font-size: 1.25rem;
    font-weight: 700;
    position: relative;
    vertical-align: middle;
    text-align: center;
    transition-property: transform;
    transition-duration: .44s;
    transition-timing-function: cubic-bezier(0.5, 2.5, 1, 0.8);
}
.but-anime-red{
    box-shadow: inset 0 0 0 2px var(--vpp-red);
    color: var(--vpp-red-light);
}
.but-anime-yellow{
    box-shadow: inset 0 0 0 2px var(--vpp-yellow);
    color: var(--vpp-yellow-light);
}
.but-anime-green{
    box-shadow: inset 0 0 0 2px var(--vpp-green);
    color: var(--vpp-green-light);
}
.button-anime::before, 
.button-anime::after{
    box-sizing: inherit;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
}
.button-anime:hover{
    transform: scale(1.125);
    cursor: pointer;
    border-radius: 15px;
}
.but-center:hover {
    color: var(--vpp-yellow);
}
.but-center::before, 
.but-center::after{
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    transform-origin: center;
}
.but-center::before {
    border-top: 2px solid var(--vpp-yellow);
    border-bottom: 2px solid var(--vpp-yellow);
    transform: scale3d(0, 1, 1);
}
.but-center::after {
    border-left: 2px solid var(--vpp-yellow);
    border-right: 2px solid var(--vpp-yellow);
    transform: scale3d(1, 0, 1);
}
.but-center:hover::before, 
.but-center:hover::after{
    transform: scale3d(1, 1, 1);
    transition: transform 0.5s;
    border-radius: 15px;
}
.item-footer{
    padding-top: auto!important;
    padding-bottom: auto!important;
    vertical-align: center!important;
}

.ico-pizza:before{
    content: url(carteIco.png);
    vertical-align: center!important;
}
.name-app{
    color: var(--vpp-green);
    font-weight: 700;
    padding-top: auto!important;
    padding-bottom: auto!important;
    vertical-align: baseline!important;
}
.name-app:hover{
    color: var(--vpp-red-light)!important;
}
.link-presentation,
.link-public{
    padding-top: auto!important;
    padding-bottom: auto!important;
    vertical-align: center!important;
}
.link-public{
    color: var(--vpp-green)!important;
}
.link-public:hover,
.item-top-bar:hover,
.item-footer:hover{
    color: var(--vpp-yellow)!important;
}

a.link-reset-passwd,
a.link-reset-passwd:link{
    color: var(--vpp-red-dark)!important;
}
a.link-reset-passwd:visited{
    color: var(--vpp-red-dark)!important;
}
a.link-reset-passwd:hover,
a.link-reset-passwd:focus,
a.link-reset-passwd:active{
    color: var(--vpp-yellow)!important;
}
.input-img:hover{
    cursor: pointer;
}
a.item-footer:link{
  color: #00758f;
}
a.item-footer:visited{
  color: var(--vpp-cancel)!important;
}
a.item-footer:hover{
  color: var(--vpp-yellow)!important;
}
a.item-footer:active {
   color: var(--vpp-red-dark)!important;
}

a.item-footer.show-VPN:link{
  color: #00758f;
}
a.item-footer.show-VPN:visited{
  color: #00758f!important;
}
a.item-footer.show-VPN:hover{
  color: var(--vpp-yellow)!important;
}
a.item-footer.show-VPN:active {
   color: var(--vpp-red-dark)!important;
}

a.link-presentation:link{
  color: var(--vpp-red-light)!important;
}
a.link-presentation:visited{
  color: var(--vpp-red-light)!important;
}
a.link-presentation:hover{
  color: var(--vpp-yellow)!important;
}
a.link-presentation:active{
   color: var(--vpp-yellow-dark)!important;
}

/* page liens morts */
a.link-error:link{
  color: var(--vpp-green)!important;
}
a.link-error:visited{
  color: var(--vpp-green-dark)!important;
}
a.link-error:hover{
  color: var(--vpp-yellow)!important;
}
a.link-error:active{
   color: var(--vpp-yellow-dark)!important;
}

.link-error-size1{
    font-size: 1em;
}
.link-error-size2{
    font-size: 1.125em;
}
.overflow-x-hidden{
    overflow-x: hidden;
}
.overflow-x-scroll{
    overflow-x: scroll;
}
.overflow-x-auto{
    overflow-x: auto;
}
.overflow-y-hidden{
    overflow-y: hidden;
}
.overflow-y-scroll{
    overflow-y: scroll;
}
.overflow-y-auto{
    overflow-y: auto;
}
.overflow-hidden{
    overflow: hidden;
}
.overflow-scroll{
    overflow: scroll;
}
.overflow-hidden{
    overflow: hidden;
}
.overflow-auto{
    overflow: auto;
}
#vpnDialog{
    position: fixed;
    font-size: 1em;
    margin: 16px auto 16px auto;
    background-color: #1F1F1F;
    border: solid 1px yellow;
    overflow-y: scroll;
    overscroll-behavior: contain;
    box-shadow: 3px 3px 15px 1px rgba(116, 116, 117, .75);
}
a.fg-black{
    /* color: black!important; */
    color: rgba(0, 0, 0, 0)!important;
    background-color: rgba(0, 0, 0, 1)rgba(0, 0, 0, 0);
}
a.fg-black:hover{
    color: rgba(0, 0, 0, 0)!important;
}