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

 /** s'adresser par attributs:
 *     les liens ayant cette uri --> a[href="test"]{}
 *     les liens commençant par --> a[href^="#"]{}
 *     les liens contenant text     --> a[href*="test"]{}
 *     les liens contenant text insensitive --> a[href*="teSt" i] et a[href*="test" i]{}
 *     avec case           sensitive --> a[href*="cAsE" s]{}
 *     qui finissent par org        --> a[href$=".org"]
 *     dans le cas de plusieurs attribut, si un est bon select --> [attr~=valeur] --> <div data-truc="one two free"> div[data-truc~="free"]
 *     les div avec attribut lang --> div[lang]
 *     les div avec lang fr --> div[lang="fr"]
 *                          div[data-lang="zh-TW"]
 *                          ol[type="A" s] --> la case
 *                          ol[type="a"] --> sans case
 *                          
 * 
 */

/*
    font-family: 'Courgette', cursive;
    font-family: 'Kalam', cursive;


    font-family: 'McLaren', cursive;

    font-family: 'Poppins', sans-serif;

    font-family: 'Ubuntu', sans-serif;

    font-family: 'Quicksand', sans-serif;

    font-family: 'Lobster', cursive;

    font-family: 'Permanent Marker', cursive;

    font-family: 'Kaushan Script', cursive;

    font-family: 'M PLUS 1p', sans-serif;

    font-family: 'Handlee', cursive;

    font-family: 'Bangers', cursive;


 

*/
:root {
/*    --height-zone-user   : calc(2*0.625);
    --height-content-modal: calc((52*85vh)/100);*/
    
    --pix-red        : #B13C2E; /*#E44E35;*/
    --pix-red-dark   : #841f0e;
    --pix-red-light  : #ea5841;
    --pix-black      : #000000;
    --pix-black-light: #333333;
    --pix-yellow     : #FBC42C;
    --pix-yellow-dark: #ae8004;

    --pix-validate   : #4681B4; /** blue */
    --pix-valided    : #1A4367;
    --pix-bg-error   : #BFF0E0;
    --pix-fg-error   : #9E1035;
    --pix-cancel     : #172E40;
    --pix-canceled   : #768189;
    --pix-logout     : #98A7B5;
    --pix-green      : #71C4AA; /*96C1BD; /*43B2AD;*/
    --pix-green-ligth: #93F5D6; /*B9F7F0; /*4DC9C4;*/
    --pix-green-dark : #316D67; /*1A6A67;*/
}
/* THEMES */
/* theme rouge */
.pix-red-theme-l5 {color:#000 !important; background-color:#fdf4f3 !important}
.pix-red-theme-l4 {color:#000 !important; background-color:#fadcd6 !important}
.pix-red-theme-l3 {color:#000 !important; background-color:#f5b8ad !important}
.pix-red-theme-l2 {color:#000 !important; background-color:#f09584 !important}
.pix-red-theme-l1 {color:#fff !important; background-color:#eb715c !important}
.pix-red-theme-d1 {color:#fff !important; background-color:#e1391c !important}
.pix-red-theme-d2 {color:#fff !important; background-color:#c83319 !important}
.pix-red-theme-d3 {color:#fff !important; background-color:#af2d16 !important}
.pix-red-theme-d4 {color:#fff !important; background-color:#962613 !important}
.pix-red-theme-d5 {color:#fff !important; background-color:#7d200f !important}
.pix-red-theme-light {color:#000 !important; background-color:#fdf4f3 !important}
.pix-red-theme-dark {color:#fff !important; background-color:#7d200f !important}
.pix-red-theme-action {color:#fff !important; background-color:#7d200f !important}
.pix-red-theme {color:#fff !important; background-color:#e65034 !important}
.pix-red-text-theme {color:#e65034 !important}
.pix-red-border-theme {border-color:#e65034 !important}
.pix-red-hover-theme:hover {color:#fff !important; background-color:#e65034 !important}
.pix-red-hover-text-theme:hover {color:#e65034 !important}
.pix-red-hover-border-theme:hover {border-color:#e65034 !important}

/*.pix-red-theme-l5 {color:#000 !important; background-color:#fef5f3 !important}
.pix-red-theme-l4 {color:#000 !important; background-color:#fbddd7 !important}
.pix-red-theme-l3 {color:#000 !important; background-color:#f7bab0 !important}
.pix-red-theme-l2 {color:#000 !important; background-color:#f29888 !important}
.pix-red-theme-l1 {color:#fff !important; background-color:#ee7660 !important}
.pix-red-theme-d1 {color:#fff !important; background-color:#e73c1e !important}
.pix-red-theme-d2 {color:#fff !important; background-color:#d23216 !important}
.pix-red-theme-d3 {color:#fff !important; background-color:#b82c13 !important}
.pix-red-theme-d4 {color:#fff !important; background-color:#9e2611 !important}
.pix-red-theme-d5 {color:#fff !important; background-color:#841f0e !important}
.pix-red-theme-light {color:#000 !important; background-color:#fef5f3 !important}
.pix-red-theme-dark {color:#fff !important; background-color:#841f0e !important}
.pix-red-theme-action {color:#fff !important; background-color:#841f0e !important}
.pix-red-theme {color:#fff !important; background-color:#ea5439 !important}
.pix-red-text-theme {color:#ea5439 !important}
.pix-red-border-theme {border-color:#ea5439 !important}
.pix-red-hover-theme:hover {color:#fff !important; background-color:#ea5439 !important}
.pix-red-hover-text-theme:hover {color:#ea5439 !important}
.pix-red-hover-border-theme:hover {border-color:#ea5439 !important}*/
/* theme jaune */
.pix-yellow-theme-l5 {color:#000 !important; background-color:#fffbf2 !important}
.pix-yellow-theme-l4 {color:#000 !important; background-color:#fef3d5 !important}
.pix-yellow-theme-l3 {color:#000 !important; background-color:#fde7ab !important}
.pix-yellow-theme-l2 {color:#000 !important; background-color:#fcdc81 !important}
.pix-yellow-theme-l1 {color:#000 !important; background-color:#fcd057 !important}
.pix-yellow-theme-d1 {color:#000 !important; background-color:#fabc10 !important}
.pix-yellow-theme-d2 {color:#000 !important; background-color:#e8ab05 !important}
.pix-yellow-theme-d3 {color:#fff !important; background-color:#cb9604 !important}
.pix-yellow-theme-d4 {color:#fff !important; background-color:#ae8004 !important}
.pix-yellow-theme-d5 {color:#fff !important; background-color:#916b03 !important}
.pix-yellow-theme-light {color:#000 !important; background-color:#fffbf2 !important}
.pix-yellow-theme-dark {color:#fff !important; background-color:#916b03 !important}
.pix-yellow-theme-action {color:#fff !important; background-color:#916b03 !important}
.pix-yellow-theme {color:#000 !important; background-color:#fbc42c !important}
.pix-yellow-text-theme {color:#fbc42c !important}
.pix-yellow-border-theme {border-color:#fbc42c !important}
.pix-yellow-hover-theme:hover {color:#000 !important; background-color:#fbc42c !important}
.pix-yellow-hover-text-theme:hover {color:#fbc42c !important}
.pix-yellow-hover-border-theme:hover {border-color:#fbc42c !important}
/* theme noir */
.pix-black-theme-l5 {color:#000 !important; background-color:#f0f0f0 !important}
.pix-black-theme-l4 {color:#000 !important; background-color:#cccccc !important}
.pix-black-theme-l3 {color:#fff !important; background-color:#999999 !important}
.pix-black-theme-l2 {color:#fff !important; background-color:#666666 !important}
.pix-black-theme-l1 {color:#fff !important; background-color:#333333 !important}
.pix-black-theme-d1 {color:#fff !important; background-color: #222222 !important}
.pix-black-theme-d2 {color:#fff !important; background-color: #191919 !important}
.pix-black-theme-d3 {color:#fff !important; background-color: #111111 !important}
.pix-black-theme-d4 {color:#fff !important; background-color: #0a0a0a !important}
.pix-black-theme-d5 {color:#fff !important; background-color:#000000 !important}
.pix-black-theme-light {color:#000 !important; background-color:#f0f0f0 !important}
.pix-black-theme-dark {color:#fff !important; background-color:#000000 !important}
.pix-black-theme-action {color:#fff !important; background-color:#000000 !important}
.pix-black-theme {color:#fff !important; background-color:#000000 !important}
.pix-black-text-theme {color:#000000 !important}
.pix-black-border-theme {border-color:#000000 !important}
.pix-black-hover-theme:hover {color:#fff !important; background-color:#000000 !important}
.pix-black-hover-text-theme:hover {color:#000000 !important}
.pix-black-hover-border-theme:hover {border-color:#000000 !important}
/* couleurs */
.bg-pix-black{
    background-color: var(--pix-black)!important;
}
.bg-pix-red{
    background-color: var(--pix-red)!important;
}
.bg-pix-red-light-hover:hover{
    background-color: var(--pix-red-light)!important;
}
.bg-pix-yellow{
    background-color: var(--pix-yellow)!important;
}
.bg-pix-yellow-dark-hover:hover{
    background-color: var(--pix-yellow-dark)!important;
}
.bg-pix-yellow-hover:hover{
    background-color: var(--pix-yellow)!important;
}
.bg-pix-red-dark{
    background-color: var(--pix-red-dark)!important;
}
.bg-pix-white{
	background-color: white!important;
}
.bg-pix-white-hover:hover{
    background-color: white!important;
}
.fg-pix-black{
    color: var(--pix-black)!important;
}
.fg-pix-black-hover:hover{
    color: var(--pix-black)!important;   
}
.fg-pix-red{
    color: var(--pix-red)!important;
}
.fg-pix-red-dark{
    color: var(--pix-red-dark)!important;
}
.fg-pix-red-dark-hover:hover{
    color: var(--pix-red-dark)!important;
}
.fg-pix-red-light{
    color: var(--pix-red-light)!important;
}
.fg-pix-yellow{
    color: var(--pix-yellow)!important;
}
.fg-pix-yellow-hover:hover{
    color: var(--pix-yellow)!important;
}
.fg-pix-yellow-dark-hover:hover{
    color: var(--pix-yellow-dark)!important;
}
/* fin couleurs */
.pix-error-fg{
    color:  var(--pix-fg-error);
    font-size: .9rem;
}
/**** buttons perso ****/
.bt-pix,
.bt-pix-valider,
.bt-pix-show,
.bt-pix-edit,
.bt-pix-ok,
.bt-pix-cancel{
    font-weight : 700!important;
    border-style: solid!important;
    border-color: black!important;
}

.bt-pix{
    background-color: var(--pix-red)!important;
    color           : var(--pix-black)!important;
}
.bt-pix-show{
    background-color: var(--pix-yellow)!important;
    color           : var(--pix-black)!important;
}
.bt-pix-edit{
    background-color: var(--pix-green)!important;
    color           : var(--pix-black)!important;
}
.bt-pix-ok{
    background-color: var(--pix-valided)!important;
    color           : var(--pix-black)!important;
}
.bt-pix-cancel{
    background-color: var(--pix-canceled)!importan!importantt;
    color           : var(--pix-red)!importan!importantt;
}
.bt-pix-disabled{
    background-color: var(--pix-cancel)!importan!importantt;
    color           : var(--pix-canceled)!importan!importantt;
}
.bt-pix-disabled:hover{
    cursor: auto!importan!importantt;
}
.bt-pix:hover,
.bt-pix-valider:hover,
.bt-pix-show:hover,
.bt-pix-edit:hover,
.bt-pix-ok:hover,
.bt-pix-cancel:hover{
    cursor                            : pointer!important;
    border-radius                     : 4px!important;
    box-shadow                        : 1px 1px 12px #555!important;
    -webkit-transform                 : scale(1.0225)!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;
    -webkit-transition-property       : transform!important;
    -webkit-transition-duration       : .55s!important;
    -webkit-transition-timing-function: cubic-bezier(0.5, 2.5, 1, 0.8)!important;
}
.bt-pix:hover{
    background-color: var(--pix-black)!important;
    color           : var(--pix-red)!important;
}
.bt-pix-cancel:hover{
    background-color: var(--pix-red)!important;
    color           : var(--pix-canceled)!important;
}
.bt-pix-ok:hover{
    background-color: var(--pix-black)!important;
    color           : var(--pix-validate)!important;
}
.bt-pix-edit:hover{
    background-color: var(--pix-black)!important;
    color           : var(--pix-green)!important;
}
.bt-pix-show:hover{
    background-color: var(--pix-validate)!important;
    color           : var(--pix-black)!important;
}
button.bt-pix-ok:disabled,
button.bt-pix-valider:disabled,
button.bt-pix-show:disabled,
button.bt-pix-edit:disabled,
button.bt-pix-cancel:disabled,
button.bt-pix-valider:disabled{
    background-color: var(--pix-canceled)!important;
    color: var(--pix-cancel)!important;
    cursor: auto!important;
}
.pix-error-bg{
    background-color: var(--pix-bg-error)!important;
    opacity: 0.5!important;
}
.pix-error-fg{
    color    :  var(--pix-fg-error)!important;
    font-size: .9rem!important;
}
.page-grid{
    margin: 0 auto 0 auto!important;
    padding: 0!important;
}
.page-container{
    min-width: 100%;
    /*max-width: 1920px!important;*/
    padding: 0px;
    margin : 0px;
}
.page-content{
    margin-bottom: 0px;
    padding: 0px;
    min-width: 100%;
}
.footer{
    margin-left : auto;
    margin-right: auto;
    padding     : 5px, 5px, 0, 5px;
   /* position: relative;*/
    bottom          : 0px;
    background-color: black;
    height          : 25rem;
    min-height      : 25rem;
}
/***/
.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;
}
.z149{
    z-index: 149;
}
.z150{
    z-index: 150;
}
.z200{
    z-index: 200;
}
.z201{
    z-index: 201;
}
.z202{
    z-index: 202;
}
.z999{
    z-index: 999;
}
.z1000{
    z-index: 1000;
}
.degraded{
    background: #000000; /* Old browsers */
    background: -moz-linear-gradient(left, #000000 0%, #000000 21%, #000000 27%, #111111 33%, #000000 47%, #4c4c4c 55%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #000000 0%, #000000 21%, #000000 27%, #111111 33%, #000000 47%,#4c4c4c 55%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #000000 0%, #000000 21%, #000000 27%, #111111 33%, #000000 47%, #4c4c4c 55%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter    : progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#4c4c4c', GradientType=1 ); /* IE6-9 */
}
/*.vertical-center{
    margin       : 0;
    position     : absolute;
    top          : 50%;
    -ms-transform: translateY(-50%);
    transform    : translateY(-50%);
}*/
.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: calc(8*0.0625rem);*/
    padding: 0.5rem; /*calc(8*0.625);*/
}
.box-p{
    padding: 2rem;
    margin : 0px;
}
.burger{
    background-color: var(--pix-red)!important;
    left            : 0;
}
.burger:hover{
    background-color: #ee7660!important;
    -webkit-transform  : scale(.87)!important;
    transform          : scale(.87)!important;
    transition-property: transform!important;
    transition-duration: .35s!important;
    /*transition-timing-function: cubic-bezier(0, 2.5, 0.5, 0.8);*/
    transition-timing-function : cubic-bezier(0.5, 0.5, 0.5, 0.5);
    -webkit-transition-property: transform!important;
    -webkit-transition-duration: .35s!important;
    /*-webkit-transition-timing-function: cubic-bezier(0, 2.5, 0.5, 0.8);*/
    -webkit-transition-timing-function: cubic-bezier(0.5, 0.5, 0.5, 0.5);
}
.burger-croix:hover{
    /*background-color: #fbc42c!important;*/
    -webkit-transform: scale(.10);
    transform: scale(.10);
    transition-property: transform;
    transition-duration: 3.5s;
    /*transition-timing-function: cubic-bezier(0, 2.5, 0.5, 0.8);*/
    transition-timing-function: cubic-bezier(0.1, 0.005, 0.125, 0.3);
    -webkit-transition-property: transform;
    -webkit-transition-duration: 3.5s;
    -webkit-transition-timing-function: cubic-bezier(0.1, 0.005, 0.125, 0.3);
}
.header-divider{
    /*background: url(../img/images/bg-decor.png);*/
    min-height: 10px;
    height: 10px;
    max-height: 10px;
    width: 100vw;
    min-width: 100vw;
    background-color: var(--pix-black);
    /*background-color: rgba(0, 0, 0, 0);*/
    /*background-position-x: 0%!important;
    background-position-y: 0%!important;
    background-repeat: repeat!important;
    background-attachment: scroll!important;
    background-image: url(../img/images/bg-decor.png)!important;
    background-size: auto!important;
    background-origin: padding-box!important;
    background-clip: border-box!important;*/
    border-top: 4px solid #202020!important;
    /*border-bottom: 1px solid #202020!important;*/
    /*margin-bottom: 4px;*/
}
/** toSticky */
body{
    /*font-family: Helvetica Neue, Helvetica, Arial, sans-serif;*/
    line-height: 1.75;
}
.header-main{
    color     : var(--pix-red);
    /*background: var(--pix-black);*/
}
/* 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(--pix-red);

/*    display: grid;
    display: -ms-grid;

    grid-template-areas: "phone map mail fb";
    column-gap: 1.5rem;

    grid-template-columns: 35% 15% 35% 15%;*/
}
.item-top-bar:hover{
    color: var(--pix-yellow)!important;
    font-weight: bold;
}
#topBarPhone{
/*    grid-column: "phone";
    justify-self: start;
    align-self: center;*/
    /*margin-left: 10rem;*/
}
#topBarMap{
    /*grid-column: "map";
    justify-self: center;
    align-self: center;*/
}
#topBarMail{
    /*grid-column: "mail";
    justify-self: center;
    align-self: center;*/
}
#topBarFB{
    /*grid-column: "fb";
    justify-self: end;
    align-self: center;
    margin-right: 10rem;*/
}
@media (max-width: 867px) {
  /*.header-top-bar {
    grid-template-areas: "phone map" "mail fb";
    grid-template-columns: 1fr;
    min-height: 134px;
    height: 134px;
  }
  #topBarPhone{
        grid-column: "phone";
        justify-self: center;
        margin: 0 1rem 0 1rem;
    }
    #topBarMap{
        grid-column: "map";
        justify-self: center;
        margin: 0 1rem 0 1rem;
    }
    #topBarMail{
        grid-column: "mail";
        justify-self: center;
        margin: 0 1rem 0 1rem;
    }
    #topBarFB{
        grid-column: "fb";
        justify-self: center;
        margin: 0 1rem 0 1rem;
    }*/
}
.header-content{
    width: 100%;
    top  : 20;
    left : 0;
}
/* les éléments sont placés l'un à côté de l'autre */
.header-container{
    /*display  : table;*/
    
    /*width    : 100%;
    max-width: 100vw;
    margin   : 0 auto;

    display: grid;
    display: -ms-grid;
    grid-template-areas: "logo menu";
    column-gap: 1.5rem;
    grid-template-columns: 10% 90%;*/
}
.header-container > *{
    /*display       : table-cell;*/
    /*vertical-align: end;*/
}
.header-logo{
/*    grid-column: "logo";
    justify-self: center;
    align-self: center;*/
    /*margin: 0;*/
}
/* alignement du menu à droite */
.header-nav{
    /*grid-column: "menu";
    justify-self: end;
    align-self: end;
    margin: 0;   
    text-align: right;*/
}
/*
   fait passer le menu en inline
   (inline-block, inline-table ou inline-flex)
   pour le rendre sensible à l'alignement à droite.
   ses items aussi sont en inline.
   dans le cas de table ne pas mettre le parent en flex
*/
.nav-item{
    display   : inline;
    list-style: none;
    margin: 0;
}
.menu-item{
    font-size      : 1.25rem!important;
    position       : relative;
    display        : inline-flex;
    padding        : 8px 20px;
    vertical-align : middle;
    font-weight    : 300; /* entre regular et light */
    letter-spacing : 0.025em;
    color          : inherit;
    text-decoration: none;
}
/* animation des liens */
.menu-item:after{
    content         : "";
    position        : absolute;
    bottom          : 0; right: 20px; left: 20px; /* largeur du trait */
    height          : 2px; /* épaisseur du trait */
    background-color: var(--pix-red);
    /* préparation de l'animation du trait */
    opacity   : 0;
    transform : translateY(5px); /* position du trait */
    transition: all .7s; /* temps pour reprendre sa place initiale */
}
/* le trait remonte et apparait */
.menu-item:hover:after,
.menu-item:focus:after{
    opacity: .5;
    transform: translateY(0);
}
/* retrait outline du fait du style précédent :focus */
.menu-item:focus{
    outline: none;
}
.menu-item:hover{
    /*font-size: 2.5rem!important;
    transition: all .7s;*/

    -webkit-transform  : scale(1.125);
    transform          : scale(1.125);
    transition-property: transform;
    transition-duration: .44s;
    transition-timing-function : cubic-bezier(0.5, 2.5, 1, 0.8);
    -webkit-transition-property: transform;
    -webkit-transition-duration: .44s;
    -webkit-transition-timing-function: cubic-bezier(0.5, 2.5, 1, 0.8);
}
.menu-item-active{
    font-size: 1.5rem!important;
    font-weight: bold;

    position       : relative;
    display        : inline-block;
    padding        : 8px 20px;
    vertical-align : middle;
    font-weight    : 300; /* entre regular et light */
    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(--pix-red);
    /* trait */
    opacity   : 1;
    transform : translateY(0px);
    

}
.menu-item-active:hover:after
.menu-item-active:focus:after{
    opacity: .4;
    /*transform: translateY(0);*/
}
.menu-item-active:hover{
    /*font-size: 1.75rem!important;
    transition: all .7s;*/
}
.menu-item-active:hover{
    -webkit-transform  : scale(0.9);
    transform          : scale(0.9);
    transition-property: transform;
    transition-duration: .44s;
    transition-timing-function : cubic-bezier(0.5, 2.3, 1, 0.8);
    -webkit-transition-property: transform;
    -webkit-transition-duration: .44s;
    -webkit-transition-timing-function: cubic-bezier(0.5, 2.3, 1, 0.8);
}
.fg-pix-lightRed-hover:hover{
    /*color              : var(--pix-red)!important;*/
    /*opacity            : 0.75;*/
    -webkit-transform  : scale(1.125);
    transform          : scale(1.125);
    transition-property: transform;
    transition-duration: .55s;
    transition-timing-function : cubic-bezier(0.5, 2.5, 1, 0.8);
    -webkit-transition-property: transform;
    -webkit-transition-duration: .55s;
    -webkit-transition-timing-function: cubic-bezier(0.5, 2.5, 1, 0.8);
}
.header-main{
    position: sticky;
    top: 0;
}
/* partie stick */
.nav-is-stuck .header-main{
    position  : fixed;
    top       : 0;
    left      : 0;
    right     : 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    animation : stickAnim .3s;
}
@keyframes stickAnim{
    0%{
        transform: translateY(-86px);
    }
    100%{
        transform: translateY(0);
    }
}
/* fin sticky */
/** bar menu */
.d-sticky{
    position: -webkit-fixed;
    position: fixed;
    top     : 0;
    /*padding: 50px;*/
    /*font-size: 20px;*/
}
.sticky{
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    z-index: 100;
}
.is-sticky{
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top     : 0;
    opacity : 0.9!important;
}
.phone-menu-item{

}
/* icone dans le menu phone */
.item-carte:before{
    content : url(carteIco.png);
    vertical-align: bottom;
    /*background-image: url(../img/icones/carteIco.png) no-repeat!important;*/
    /*z-index         : 999;*/
    /*background-color: rgba(0, 0, 0, 0.5);*/
}
/* end menu */

.switch-pix-red .check::after {
    content: "Sans";
    background  : var(--pix-black)!important; /* couleur du cercle dans le switch */
    border-color: var(--pix-red)!important; /* couleur de la bordure du cercle*/
}
.switch-pix-red input[type="checkbox"]:checked ~ .check {
    background: var(--pix-red)!important; /* couleur de fond du switch quand checked */
}
.switch-pix-red input[type="checkbox"]:checked ~ .check::after {
    content: "Avec";
    border-color: var(--pix-yellow)!important; /* bordure cercle checked blanc */
    background  : var(--pix-red)!important; /* couleur du cercle dans le switch */
}

.switch-pix-black .check::after {
    background  : #0a87c1!important; /* couleur du cercle dans le switch */
    border-color: #0a87c1!important; /* couleur de la bordure du cercle*/
}
.switch-pix-black input[type="checkbox"]:checked ~ .check {
    background: black!important; /* couleur de fond du switch quand checked */
}
.switch-pix-black input[type="checkbox"]:checked ~ .check::after {
    border-color: white!important; /* bordure cercle checked*/
    background  : white!important; /* couleur du cercle dans le switch */
}

.hover-pointer{
    /* font-family: "Verdana"!important; */
}
.hover-pointer:hover{
    cursor   : pointer;
    transform: translateY(-2px);
}
.survol-tab:hover{
    cursor: default;
    /* font-family: "Verdana"!important; */
    border-radius      : 4px;
    box-shadow         : 1px 1px 12px var(--pix-yellow); /* #555 */
    -webkit-transform  : scale(1.015);
    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);
    -webkit-transition-property: transform;
    -webkit-transition-duration: .55s;
    /*-webkit-transition-timing-function: cubic-bezier(0, 2.5, 0.5, 0.8);*/
    -webkit-transition-timing-function: cubic-bezier(0.5, 2.5, 1, 0.8);
}
.survol:hover{
    cursor: default;
    /* font-family: "Verdana"!important; */
    border-radius      : 4px;
    box-shadow         : 1px 1px 12px var(--pix-red); /* #555 */
    -webkit-transform  : scale(1.015);
    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);
    -webkit-transition-property: transform;
    -webkit-transition-duration: .55s;
    /*-webkit-transition-timing-function: cubic-bezier(0, 2.5, 0.5, 0.8);*/
    -webkit-transition-timing-function: cubic-bezier(0.5, 2.5, 1, 0.8);
}
.finger:hover{
    cursor: pointer;
    /* font-family: "Verdana"!important; */
    border-radius      : 4px;
    box-shadow         : 1px 1px 12px var(--pix-red); /* #555 */
    -webkit-transform  : scale(1.015);
    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);
    -webkit-transition-property: transform;
    -webkit-transition-duration: .55s;
    /*-webkit-transition-timing-function: cubic-bezier(0, 2.5, 0.5, 0.8);*/
    -webkit-transition-timing-function: cubic-bezier(0.5, 2.5, 1, 0.8);
}
.finger-link:hover{
    cursor: pointer;
    text-decoration: none;
    /* font-family: "Verdana"!important; */
    border-radius      : 4px;
    box-shadow         : 1px 1px 12px var(--pix-canceled); /* #555 */
    -webkit-transform  : scale(1.015);
    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);
    -webkit-transition-property: transform;
    -webkit-transition-duration: .55s;
    /*-webkit-transition-timing-function: cubic-bezier(0, 2.5, 0.5, 0.8);*/
    -webkit-transition-timing-function: cubic-bezier(0.5, 2.5, 1, 0.8);
}

.label-hover-1:hover{
    /*font-weight: 700;*/
    /* -webkit-animation: blur 1s ease-out infinite;
    animation: blur .75s ease-out infinite; */
    /* ombre droite, bas, flou, couleur  */
    /*text-shadow: 3px 5px 3px rgb(101, 109, 145), 5px 8px 3px rgb(42, 50, 100);*/
    transform: translateY(-2px);
    /*transform: scale(1.1);*/
    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{
    /*cursor: pointer;*/
}
.item-select:hover{
    cursor            : pointer;
    background        : #f29888;
    color             : #ffffff;
    -webkit-box-shadow: 0px 1px 3px #666666;
    box-shadow        : 0px 1px 3px #666666;
    background-image  : -webkit-gradient(linear, left top, left bottom, from(#f29888), to(#841f0e));
    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;
/*    padding-top: calc(1*0.063em);
    padding-right: calc(2*0.063em);
    padding-bottom: calc(2*0.063em);
    padding-left: calc(2*0.063em);*/
}

.col-50{
    width: 50%;
}
.col-25{
    width: 25%;
}
.col-33{
    width: 33%;
}
.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;
}
.hide-zone{
    display: none!important;
}
.show-zone{
    display: block!important;
}
.show-zone-flex{
    display: flex!important;
}
.hide-elem{
    display: none!important;
}
.show-elem{
    display: block!important;
}
.show-elem-flex{
    display: flex!important;
}
.button-hide{
    display: none!important;
}
/* taille  */
/*.taille-by{
    width: expression((document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth)  + "px");
}*/
.control-erreur,
.erreur-label{
    color: var(--pix-fg-error);
    font-size: 1rem;
    font-weight: 700;
    background-color: var(--pix-yellow);
    margin-top      : 0.25rem;
    padding         : 0.25rem;
    border-radius   : 0.5rem;
}
.not-required-label{
    color: var(--pix-green-ligth);
    font-size: 1rem;
    font-weight: normal;
    background-color: var(--pix-green-dark);
    margin-top      : 0.25rem;
    padding         : 0.25rem;
    border-radius   : 0.5rem;
}
.display-none{
    display: none;
}
.div-charms{
    padding-bottom: 1.5rem;/* 24px */
}
/* Accordions */
.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;
}
/*a.none-deco:link{
    text-decoration: none;
}*/
.link-video:hover{
    color: #fff;
    background-image: -webkit-gradient(linear, left top, left bottom, from(var(--mt-pink-dark)), to(var(--mt-green-dark)));
    background-image: linear-gradient(to bottom, var(--mt-pink-dark), var(--mt-green-dark));
    text-decoration : none;
}
.check-pix:hover,
.check-label-pix:hover{
    cursor            : pointer;
    background        : #3cb0fd;
    color             : #ffffff;
    -webkit-box-shadow: 0px 1px 3px #666666;
    box-shadow        : 0px 1px 3px #666666;
    background-image  : -webkit-gradient(linear, left top, left bottom, from(#3cb0fd), to(#1d8de3));
    background-image  : linear-gradient(to bottom, #3cb0fd, #1d8de3);
    text-decoration   : none;
}
.check-label-pix-checked{
    cursor            : pointer;
    background        : #D0D4D7;
    color             : black;
    -webkit-box-shadow: 0px 1px 3px #666666;
    box-shadow        : 0px 1px 3px #666666;
    background-image  : -webkit-gradient(linear, left top, left bottom, from(#3cb0fd), to(#1d8de3));
    background-image  : linear-gradient(to bottom, #3cb0fd, #1d8de3);
    text-decoration   : none;
}

/***************************************************************/
/*                       check box perso                       */
/***************************************************************/

/* si le navigateur ne détecte pas les selecteur du style [type="checkbox"]:
le css ne sera pas pris en compte et l'affichage sera normal */
/* Cacher la case à cocher */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked{
    position: absolute;
    left    : -9999px;
}

/* préparation label */
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label{
    position    : relative; /* permet de positionner les pseudo-éléments */
    padding-left: 25px; /* fait un peu d'espace pour la case à venir */
    cursor      : pointer;
}
/* aspect checkboxs */
/* :before sert à créer la case à cocher */
    [type="checkbox"]:not(:checked) + label:before,
    [type="checkbox"]:checked + label:before{
    content      : '';
    position     : absolute;
    left         :0;
    top          : 2px;
    width        : 17px;
    height       : 17px;
    border       : 1px solid #aaa;
    background   : #f8f8f8;
    border-radius: 3px;
    box-shadow   : inset 0 1px 3px rgba(0,0,0,.3); /* légère ombre interne */
}

/* Aspect général de la coche */
    [type="checkbox"]:not(:checked) + label:after,
    [type="checkbox"]:checked + label:after{
    content: '✔';
    position: absolute;
    top: 0; left: 4px;
    font-size: 14px;
    color: #09ad7e;
    transition: all .2s;
}
/* couleur et forme grisé pour visu checked */
[type="checkbox"]:checked + label{
    background        : #D0D4D7;
    color             : black;
    -webkit-box-shadow: 0px 1px 3px #666666;
    box-shadow        : 0px 1px 3px #666666;
    background-image  : -webkit-gradient(linear, left top, left bottom, from(#D0D4D7), to(#8BA2B7));
    background-image  : linear-gradient(to bottom, #D0D4D7, #8BA2B7);
    text-decoration   : none;
}
/* Aspect coche si pas cochée */
[type="checkbox"]:not(:checked) + label:after {
  opacity: 0; /* coche invisible */
  transform: scale(0); /* mise à l'échelle à 0 */
}
/* Aspect si cochée */
[type="checkbox"]:checked + label:after {
  opacity: 1; /* coche opaque */
  transform: scale(1); /* mise à l'échelle 1:1 */
}
/* styles suppl pour checkbox */
/* aspect désactivée */
/*[type="checkbox"]:disabled:not(:checked) + label:before,
[type="checkbox"]:disabled:checked + label:before {
  box-shadow: none;
  border-color: #bbb;
  background-color: #ddd;
}*/
/* coche si cochée et désactivée */
/*[type="checkbox"]:disabled:checked + label:after {
  color: #999;
}*/
/* label quand désactivée */
/*[type="checkbox"]:disabled + label {
  color: #aaa;
}*/

/* aspect au focus de l'élément */
[type="checkbox"]:checked:focus + label:before,
[type="checkbox"]:not(:checked):focus + label:before{
  border: 1px dotted blue;
}
.display-top-right{
    position:absolute;
    right   :0;
    top     :0;
}
.halo-1{
    /* décalage droite, bas et dégradé */
    box-shadow: 1px 1px 12px #555;
}
.round-img{
    border-radius: 50%;
}
.round-img:hover{
    cursor: default;
    /* font-family: "Verdana"!important; */
    box-shadow         : 1px 1px 12px var(--mt-green-dark); /* #555 */
    -webkit-transform  : scale(1.5);
    transform          : scale(1.5);
    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);
    -webkit-transition-property: transform;
    -webkit-transition-duration: .55s;
    /*-webkit-transition-timing-function: cubic-bezier(0, 2.5, 0.5, 0.8);*/
    -webkit-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;
}
/* TITRES */
.title-normal-size{
    color      : #fff;
    font-weight: 700;
    text-shadow: 0px 0px 5px #fff, 0px 0px 7px #fff;
}
.titre-big{
    /*text-align: center;*/
    /*font-family: "Verdana";*/
    /*letter-spacing: -7px;*/
    font-size  : 3rem;
    color      : #fff;
    font-weight: 700;
    text-shadow: 0px 0px 5px #fff, 0px 0px 7px #fff;
}
.sub-title-parallax{
    font-size  : 75%;
}
.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              : -webkit-box;
    display              : -ms-flexbox;
    display              : flex;
    -webkit-box-orient   : vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction   : column;
    flex-direction       : column;
}

/**
 * Modal perso
 */
/* arrière plan */
.modal-dialog{
    position   : fixed; /* toujours au même niveau H/L */
    font-family: Arial, Helvetica, sans-serif;
    top        : 0;
    right      : 0;
    bottom     : 0;
    left       : 0;
    background : rgba(0,0,0,0.8);
    z-index    : 99999;
    display    : none;
    /*opacity           : 0;*/
    /*-webkit-transition: opacity 300ms ease-in;
    -moz-transition   : opacity 300ms ease-in;
    transition        : opacity 300ms ease-in;*/
    /*pointer-events    : none;*/
}
/*.modal-dialog:target{
    opacity       : 1;
    pointer-events: auto;
}*/
/* contenu */
.modal-dialog > .container{
    width        : 95%;
    max-height   : 95vh;
    height       : auto;
    position     : relative;
    margin-top   : 15px;
    margin-left  : auto;
    margin-right : auto;
    /*margin-bottom: auto;*/
    padding      : 5px;
    border-radius: 10px;
    /*background   : var(--mt-pink);*/
    background   : -moz-linear-gradient(var(--pix-black), var(--pix-red));
    background   : -webkit-linear-gradient(var(--pix-black), var(--pix-red));
    background   : -o-linear-gradient(var(--pix-black), var(--pix-red));
}
.modal-dialog > .container-auto{
    width        : 80%;
    min-width    : 85%;
    max-width    : 85%;
    max-height   : 85vh;
    height       : auto;
    position     : relative;
    margin       : 10% auto;
    padding      : 5px;
    border-radius: 10px;
    /*background : var(--mt-pink);*/
    background   : -moz-linear-gradient(var(--pix-black), var(--pix-red));
    background   : -webkit-linear-gradient(var(--pix-black), var(--pix-red));
    background   : -o-linear-gradient(var(--pix-black), var(--pix-red));
}
.modal-content{
    /*max-height: 75%;
    height    : 75%;*/
    height:  auto; /*var(--height-content-modal);*/
    max-height: 99vh; /*var(--height-content-modal);*/
    margin-top: auto;
    margin-bottom: auto;
/*    border: solid;
    border-width: 3px;
    border-color: red;*/
}
.close{
    background           : #606061;
    color                : #FFFFFF;
    line-height          : 25px;
    position             : absolute;
    right                : -12px;
    text-align           : center;
    top                  : -10px;
    width                : 24px;
    text-decoration      : none;
    font-weight          : bold;
    -webkit-border-radius: 12px;
    -moz-border-radius   : 12px;
    border-radius        : 12px;
    -moz-box-shadow      : 1px 1px 3px #000;
    -webkit-box-shadow   : 1px 1px 3px #000;
    box-shadow           : 1px 1px 3px #000;
}
.close:hover{
    background: red;
}
/* Fin modal perso */

.blink-text{
    color:red;
    animation: colorblink 2s infinite;
}
@keyframes colorblink{
    0% { }
    33% { color: blue; }
    66% { color: rebeccapurple;  }
}
.blink{
    position: relative;
    /* background-color: #607D8B; */
    animation-name: opac;
    animation-duration: 0.5s;
    animation-iteration-count: 3; /* infinite ou  un nb de fois */
    animation-direction: normal; /* normal , reverse, alternate-reverse ou alternate */
    animation-timing-function: linear; /* ease , linear , ease-in, ease-out, ease-in-out ou cubic-bezier(n,n,n,n) */
    animation-fill-mode: none; /* none , forwards ,  backwards ou both */
    /* animation: opac 0.5s infinite normal linear none; */
}
.blinkInfinity{
    position: relative;
    animation-name: blinky;
    animation-duration: 1s;
    animation-iteration-count: infinite; /* infinite ou  un nb de fois */
    animation-direction: alternate; /* normal , reverse, alternate-reverse ou alternate */
    animation-timing-function: linear; /* ease , linear , ease-in, ease-out, ease-in-out ou cubic-bezier(n,n,n,n) */
    animation-fill-mode: none; /* none , forwards ,  backwards ou both */
}
@keyframes rounder{
    0%   { border-radius: 1px; }
    10%  { border-radius: 2px; }
    20%  { border-radius: 3px; }
    30%  { border-radius: 4px; }
    40%  { border-radius: 5px; }
    50%  { border-radius: 6px; }
    60%  { border-radius: 5px; }
    70%  { border-radius: 4px; }
    80%  { border-radius: 3px; }
    90%  { border-radius: 2px; }
    100% { border-radius: 1px; }
}
@keyframes blinky{
    /* opacity avec pourcentages*/
    /*0% { opacity: 1; } /* invisible */
    10%  { opacity: 0.7;  /*For IE8 and earlier*/ filter: alpha(opacity=80); }
    20%  { opacity: 1; filter: alpha(opacity=60);}
    30%  { opacity: 0.7; filter: alpha(opacity=40); }
    40%  { opacity: 1; filter: alpha(opacity=20); }
    50%  { opacity: 0.7; filter: alpha(opacity=10); }
    60%  { opacity: 1; filter: alpha(opacity=20); }
    70%  { opacity: 0.7; filter: alpha(opacity=40); }
    80%  { opacity: 1; filter: alpha(opacity=60); }
    90%  { opacity: 0.7; filter: alpha(opacity=80); }
    100% { opacity: 1; filter: alpha(opacity=100); }
}
@keyframes opac{
    0%   { opacity: 0.1; filter: alpha(opacity=10); /*z-index: -1;*/ }
    10%  { opacity: 0.1; filter: alpha(opacity=10); }
    20%  { opacity: 0.2; filter: alpha(opacity=20);}
    30%  { opacity: 0.3; filter: alpha(opacity=30); }
    40%  { opacity: 0.4; filter: alpha(opacity=40); }
    50%  { opacity: 0.5; filter: alpha(opacity=50); }
    60%  { opacity: 0.6; filter: alpha(opacity=60); }
    70%  { opacity: 0.7; filter: alpha(opacity=70); }
    80%  { opacity: 0.8; filter: alpha(opacity=80); }
    90%  { opacity: 0.9; filter: alpha(opacity=90); }
    100% { opacity: 1; filter: alpha(opacity=100); /* z-index: 1;*/}
}
.elem-shadow{
    -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    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;
}
.footer-infos, .footer-img, .copyright{
    /* border-top-style: solid;
    border-bottom-style: solid;
    border-width: 1px; */
}
.footer-infos{
  /* correspond au justify-content-right */
/*    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;*/
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}
/*.footer-infos{  sur media query pour center*/
    /* -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end; */
    /* border-right-style: solid; */
/*}*/
.copyright{ /* sur media query pour center*/
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}
.footer-img img{
    border-style: none;
}
.droits{
    /*display: flex;
    flex-direction: row;
    align-items: flex-end;*/
}
.footer-infos a{
    font-weight: bold;
    color: #2F4F4F;
    text-decoration: none;
}
.link-me:hover{
  text-align: center;
  font-size: 1rem;
  color: #fff;
  /*letter-spacing: -7px;*/
  font-weight: normal;
  /*text-transform: uppercase;*/
  -webkit-animation: blur .75s ease-out infinite;
  animation: blur .75s ease-out infinite;
  text-shadow: 0px 0px 5px #fff, 0px 0px 7px #fff;
  color: black;
}

/***************************************************************/
/*                         Media Query                         */
/***************************************************************/
/*
sm  576px
md  768px
lg  992px
xl  1200px
xxl 1452px
*/
/**
 * menus
 */
.d-tablette{
    /*z-index: 1000;*/
    /*position: relative;*/
}
.d-nav{
    z-index: 500;
}
.d-phone{
    display: none;
}
/* périphérique d'affichage --> taille écran à contrario de la résolution */
/*@media screen and (max-device-width: 480px){
    .d-phone{
        display: block!important;
    }
    .d-nav{
        display: none!important;
    }
}*/
/* résolution */
/* sm */
/*@media screen and (min-width: 210px) and (max-width: 575px){
    .d-phone{
        display: block!important;
    }
    .d-desktop{
        display: none!important;
    }
}*/
/* md */
/*@media screen and (min-width: 576px) and (max-width: 767px){
    .d-phone{
        display: block!important;
    }
    .d-tablette{
        display: none!important;
    }
    .d-desktop{
        display: none!important;
    }
    #parallax1{
        padding-top: 2.5rem!important;
    }
    .pix-parallax-section-title{

    }
}*/
/* lg */
/*@media screen and (min-width: 768px) and (max-width: 991px){*/
@media screen and (max-width: 1064px){
    .d-phone{
        display: flex!important;
    }
/*    .d-tablette{
        display: block!important;
    }*/
    .d-desktop{
        display: none!important;
    }
    .header-divider{
        /*display: none!important;*/
    }
    #parallax1{
        /*padding-top: 2.5rem!important;*/
    }
    .pix-parallax-section-title{
        /*font-size: 2.25rem!important;*/
    }
    .titre{
        font-size: 2.5rem!important;
        display: flex;
        justify-content: center; 
    }
}
/*@media screen and (min-width: 768px) and (max-width: 991px){
    .titre{
        font-size: 2.5rem!important;
        display: flex;
        justify-content: center; 
    }
}*/
/* xl */
/*@media screen and (min-width: 992px) and (max-width: 1119px){*/
@media screen and (min-width: 1065px){
    .d-phone{
        display: none!important;
    }
    /*.d-tablette{
        display: none;
    }*/
    .d-desktop{
        display: flex!important;
    }
    #parallax1{
        /*padding-top: 2.5rem!important;*/
    }
    .titre{
        /*font-size: 2.5rem!important;
        display: flex;
        justify-content: center; */
    }
    .pix-parallax-section-title{
        /*font-size: 2.25rem!important;*/
    }
}
/* xxl */
@media screen and (min-width: 1200px){
    .titre{
        /*font-size: 2.5rem!important;
        display: flex;
        justify-content: center;*/ 
    }
    .pix-parallax-section-title{
        /*font-size: 2.25rem!important;*/
    }
}
/*@media screen and (min-width: 785px) and (max-width: 907px){
    .d-phone{
        display: block!important;
    }
    .d-desktop{
        display: none!important;
    }
    .d-nav{
        display: none!important;
    }
}*/
/* Annule l'effet parallax pour les mobiles et tablettes */
/*@media only screen and (max-device-width: 1200px){*/
@media only screen and (max-width: 1200px){
    #parallax1{
        background-attachment: scroll;
        min-height: 400px;
    }
}
@media screen and (min-width: 873px){

}
/* orientation:portrait */
@media screen and (orientation:portrait){
    .portrait{
        background: #f11a57;
        color:#fff;
    }
    .classe span.classe{
        display: block;
    }
}
/* orientation:paysage */
@media screen and (orientation:landscape){
    .landscape{
        background: #f11a57;
        color:#fff;
    }
}

@media (max-width: 768px){
    .composant-date{
        width: 100%;
        min-width: 100%;
        margin-left: 0px;
        margin-right: 0px;
    }
}
/* accordions */
.bt-accordion{
    margin-bottom: 2px;
}
.text-wrap{
    word-wrap: break-word;
}
/* cards services cards pizzas*/
/* default: phone --> 1 par colone */
.card-bestsellers,
.card-pizza{
    width    : 100%!important;
    min-width: 100%!important;
    max-width: 100%!important;
}
.card-bestsellers,
.card-service,
.card-pizza{
    display         : block;
    position        : relative;
    font-size       : .875rem;
    /*width           : calc(100% - 1rem);*/
    /*margin          : 8px auto;
    margin-bottom   : 8px;*/
    border-radius   : 5px;
    border          : 1px #dfdfdf;/*;*/
    background-color: #fff;
    box-shadow: none;
    margin   : 8px 0.7rem;
    transition-property               : transform;
    transition-duration               : .55s;
    -webkit-transition-property       : transform;
    -webkit-transition-duration       : .55s;
}
/*.card-pizza{
    display         : block;
    position        : relative;
    font-size       : .875rem;
    border-radius   : 5px;
    border          : 1px #dfdfdf;;
    background-color: #fff;
    box-shadow: none;
    margin   : 8px 0.7rem;
    transition-property               : transform;
    transition-duration               : .55s;
    -webkit-transition-property       : transform;
    -webkit-transition-duration       : .55s;
}*/
.card-bestsellers:hover
/*.card-service:hover,*/
/*.card-pizza:hover*/{
    -webkit-transform                 : scale(1.1);
    transform                         : scale(1.1);
    /*transition-property               : transform;
    transition-duration               : .55s;*/
    transition-timing-function        : cubic-bezier(0.5, 2.5, 1, 0.8);
    /*-webkit-transition-property       : transform;
    -webkit-transition-duration       : .55s;*/
    -webkit-transition-timing-function: cubic-bezier(0.5, 2.5, 1, 0.8);
    border                            : 1px solid var(--pix-red);
    box-shadow                        : 1px 1px 12px var(--pix-red); /* #555 box-shadow : 1px 1px 12px #555;*/
}
.card-pizza-header{
    padding      : 16px 2px 8px 2px; /*1rem*/
    font-size    : 16px;
    border-radius: 2px 2px 0 0;
}
.card-pizza-title{
    text-align: center;
}
.header-accordion-title{
    font-size: 1.75rem!important;
    opacity  : .90;
    overflow-wrap: break-word;
}
@media screen and (max-width: 310px){
    .header-accordion-title{
        font-size: .7rem!important;
    }
}
@media screen and (min-width: 310px) and (max-width: 347px){
    .header-accordion-title{
        font-size: .8rem!important;
    }
}
@media screen and (min-width: 348px) and (max-width: 379px){
    .header-accordion-title{
        font-size: .9rem!important;
    }
}
@media screen and (min-width: 380px) and (max-width: 433px){
    .header-accordion-title{
        font-size: 1rem!important;
    }
}
@media screen and (min-width: 434px) and (max-width: 469px){
    .header-accordion-title{
        font-size: 1.15rem!important;
    }
}
@media screen and (min-width: 470px) and (max-width: 557px){
    .header-accordion-title{
        font-size: 1.25rem!important;
    }
}
@media screen and (min-width: 558px) and (max-width: 650px){
    .header-accordion-title{
        font-size: 1.5rem!important;
    }
}
.card-pizza-content{
    display      : block;
    border-bottom: 1px solid var(--pix-yellow-dark);
    min-height   : 138px!important;
    height       : 138px!important;
}
.card-pizza-footer{
    /*border-top: 1px dashed var(--pix-yellow-dark);*/
}
.card-chef img{
	width: 85%;
}
.tirets{
    padding-left: 4rem;
    border-bottom: 1px dashed var(--pix-yellow-dark);
}
.tirets-brush{
    padding-left: 6rem;
    border-bottom: 1px dashed var(--pix-yellow-dark);
}
.tirets-cham{
    padding-left: 8rem;
    border-bottom: 1px dashed var(--pix-yellow-dark);
}
.tirets-pizl{
    padding-left: 8rem;
    border-bottom: 1px dashed var(--pix-yellow-dark);
}
.tirets-pizxl{
    padding-left: 8rem;
    border-bottom: 1px dashed var(--pix-yellow-dark);
}
@media screen and (min-width: 429px) and (max-width: 473px){
    .tirets-brush{
        padding-left: 2rem;
        border-bottom: 1px dashed var(--pix-yellow-dark);
    }
    .tirets-cham{
        padding-left: 4rem;
        border-bottom: 1px dashed var(--pix-yellow-dark);
    }
    .tirets-pizl{
        padding-left: 4rem;
        border-bottom: 1px dashed var(--pix-yellow-dark);
    }
    .tirets-pizxl{
        padding-left: 4rem;
        border-bottom: 1px dashed var(--pix-yellow-dark);
    }
}
@media screen and (min-width: 320px) and (max-width: 428px){
    .tirets-brush{
        padding-left: 1.5rem;
        border-bottom: 1px dashed var(--pix-yellow-dark);
    }
    .tirets-cham{
        padding-left: 3rem;
        border-bottom: 1px dashed var(--pix-yellow-dark);
    }
    .tirets-pizl{
        padding-left: 3rem;
        border-bottom: 1px dashed var(--pix-yellow-dark);
    }
    .tirets-pizxl{
        padding-left: 2rem;
        border-bottom: 1px dashed var(--pix-yellow-dark);
    }
}
@media screen and (min-width: 100px) and (max-width: 319px){
    .tirets-brush{
        padding-left: 1rem;
        border-bottom: 1px dashed var(--pix-yellow-dark);
    }
    .tirets-cham{
        padding-left: 1rem;
        border-bottom: 1px dashed var(--pix-yellow-dark);
    }
    .tirets-pizl{
        padding-left: 1rem;
        border-bottom: 1px dashed var(--pix-yellow-dark);
    }
    .tirets-pizxl{
        padding-left: 1rem;
        border-bottom: 1px dashed var(--pix-yellow-dark);
    }
}
.card-pizza-rounded-image{
    /*overflow             : hidden;*/
    -webkit-border-radius: 50%;
    -moz-border-radius   : 50%;
    border-radius        : 50%;
}
/* résolutions */
/* services */
/* petite */
@media screen and (max-width: 369px){
    .card-service{
        width        : 99.5%!important;
        min-width    : 99.5%!important;
        max-width    : 325px!important;
        margin-left  : 0px!important;
        margin-right : 0px!important;
        margin-bottom: 2px!important;
    }
    .card-service:hover{
        -webkit-transform                 : scale(.95)!important;
        transform                         : scale(.95)!important;
        transition-property               : transform!important;
        transition-duration               : .55s!important;
        transition-timing-function        : cubic-bezier(0.5, 0.75, 1, 0.8)!important;
        -webkit-transition-property       : transform!important;
        -webkit-transition-duration       : .55s!important;
        -webkit-transition-timing-function: cubic-bezier(0.5, 0.75, 1, 0.8)!important;
        border                            : 1px solid var(--pix-red)!important;
        box-shadow                        : 1px 1px 12px var(--pix-red)!important;
    }
}
@media screen and (min-width: 370px){
    .card-service{
        width    : 325px!important;
        min-width: 325px!important;
        max-width: 325px!important;
        }
    .card-service:hover{
        -webkit-transform                 : scale(1.065);
        transform                         : scale(1.065);
        transition-property               : transform;
        transition-duration               : .55s;
        transition-timing-function        : cubic-bezier(0.5, 2.5, 1, 0.8);
        -webkit-transition-property       : transform;
        -webkit-transition-duration       : .55s;
        -webkit-transition-timing-function: cubic-bezier(0.5, 2.5, 1, 0.8);
        border                            : 1px solid var(--pix-red);
        box-shadow                        : 1px 1px 12px var(--pix-red); /* #555 box-shadow : 1px 1px 12px #555;*/
    }
}
@media screen and (min-width: 370px) and (max-width: 495px){
    .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{
         -webkit-transform                 : scale(1.1);
        transform                         : scale(1.1);
        transition-property               : transform;
        transition-duration               : .55s;
        transition-timing-function        : cubic-bezier(0.5, 2.5, 1, 0.8);
        -webkit-transition-property       : transform;
        -webkit-transition-duration       : .55s;
        -webkit-transition-timing-function: cubic-bezier(0.5, 2.5, 1, 0.8);
        border                            : 1px solid var(--pix-red);
        box-shadow                        : 1px 1px 12px var(--pix-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{
         -webkit-transform                 : scale(1.045);
        transform                         : scale(1.045);
        transition-property               : transform;
        transition-duration               : .55s;
        transition-timing-function        : cubic-bezier(0.5, 2.5, 1, 0.8);
        -webkit-transition-property       : transform;
        -webkit-transition-duration       : .55s;
        -webkit-transition-timing-function: cubic-bezier(0.5, 2.5, 1, 0.8);
        border                            : 1px solid var(--pix-red);
        box-shadow                        : 1px 1px 12px var(--pix-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{
        -webkit-transform                 : scale(1.06);
        transform                         : scale(1.06);
        transition-property               : transform;
        transition-duration               : .55s;
        transition-timing-function        : cubic-bezier(0.5, 2.5, 1, 0.8);
        -webkit-transition-property       : transform;
        -webkit-transition-duration       : .55s;
        -webkit-transition-timing-function: cubic-bezier(0.5, 2.5, 1, 0.8);
        border                            : 1px solid var(--pix-red);
        box-shadow                        : 1px 1px 12px var(--pix-red);
    }
}
@media screen and (min-width: 1065px) and (max-width: 1199px){
    .card-service{
       /* margin-left  : .75rem;
        margin-right : .75rem;
        margin-top   : .125rem;
        margin-bottom: 2.55rem;*/
    }
}
@media screen and (min-width: 1200px) and (max-width: 1599px){
    .card-service{

    }
}
@media screen and (min-width: 1600px) and (max-width: 1919px){
    .card-service{

    }
}

@media screen and (max-width: 450px){
    .card-bestsellers{
        width        : 100%!important;
        min-width    : 100%!important;
        max-width    : 450px!important;
        margin-left  : 0px!important;
        margin-right : 0px!important;
        margin-bottom: 4px!important;
    }
    .card-bestsellers:hover{
        -webkit-transform                 : scale(.95)!important;
        transform                         : scale(.95)!important;
        transition-property               : transform!important;
        transition-duration               : .55s!important;
        transition-timing-function        : cubic-bezier(0.5, 0.75, 1, 0.8)!important;
        -webkit-transition-property       : transform!important;
        -webkit-transition-duration       : .55s!important;
        -webkit-transition-timing-function: cubic-bezier(0.5, 0.75, 1, 0.8)!important;
        border                            : 1px solid var(--pix-red)!important;
        box-shadow                        : 1px 1px 12px var(--pix-red)!important;
    }
}
@media screen and (min-width: 451px) and (max-width: 500px){
    .card-bestsellers{
        width       : 99%!important;
        min-width   : 99%!important;
        max-width   : 450px!important;
        margin-left : .25rem!important;
        margin-right: .25rem!important;
        /*margin-bottom: .75!important;*/
    }
    .card-bestsellers:hover{
        -webkit-transform                 : scale(1.04);
        transform                         : scale(1.04);
        transition-property               : transform;
        transition-duration               : .55s;
        transition-timing-function        : cubic-bezier(0.5, 2.5, 1, 0.8);
        -webkit-transition-property       : transform;
        -webkit-transition-duration       : .55s;
        -webkit-transition-timing-function: cubic-bezier(0.5, 2.5, 1, 0.8);
        border                            : 1px solid var(--pix-red);
        box-shadow                        : 1px 1px 12px var(--pix-red);
    }
}
/* moyenne */
@media screen and (min-width: 501px) and (max-width: 1161px){
    .card-bestsellers{
        width       : 450px!important;
        min-width   : 450px!important;
        max-width   : 450px!important;
        margin-left : .25rem!important;
        margin-right: .25rem!important;
    }
}
/* grande */
@media screen and (min-width: 1162px) and (max-width: 1734px){
	/* xl 4 par colonne */
    .card-bestsellers{
        width       : 450px!important;
        min-width   : 450px!important;
        max-width   : 450px!important;
        margin-left : .125rem!important;
        margin-right: .125rem!important;

        border: solid;
        border-width: 3px;
        border-color: pink;
    }
    .card-bestsellers:hover{
        -webkit-transform                 : scale(1.04);
        transform                         : scale(1.04);
        transition-property               : transform;
        transition-duration               : .55s;
        transition-timing-function        : cubic-bezier(0.5, 2.5, 1, 0.8);
        -webkit-transition-property       : transform;
        -webkit-transition-duration       : .55s;
        -webkit-transition-timing-function: cubic-bezier(0.5, 2.5, 1, 0.8);
        border                            : 1px solid var(--pix-red);
        box-shadow                        : 1px 1px 12px var(--pix-red);
    }
}
/* très grande */
@media screen and (min-width: 1735px){
	/* xl 4 par colonne */
    .card-bestsellers{
        width       : 450px!important;
        min-width   : 450px!important;
        max-width   : 450px!important;
        margin-left : .125rem!important;
        margin-right: .125rem!important;
    }
    .card-bestsellers:hover{
        -webkit-transform                 : scale(1.04);
        transform                         : scale(1.04);
        transition-property               : transform;
        transition-duration               : .55s;
        transition-timing-function        : cubic-bezier(0.5, 2.5, 1, 0.8);
        -webkit-transition-property       : transform;
        -webkit-transition-duration       : .55s;
        -webkit-transition-timing-function: cubic-bezier(0.5, 2.5, 1, 0.8);
        border                            : 1px solid var(--pix-red);
        box-shadow                        : 1px 1px 12px var(--pix-red);
    }
}

/* pizzas - résolutions:; */
@media screen and (max-width: 701px){
    .cell-tiret{
        display: none;
    }
}
@media screen and (min-width: 702px){
    .cell-tiret{
        display: inline-block;
    }
}
/* xs */
@media screen and (max-width: 319px){
    .card-pizza{
        width    : 90%!important;
        min-width: 90%!important;
        max-width: 90%!important;
    }
    .card-pizza:hover{
        -webkit-transform                 : scale(1.04)!important;
        transform                         : scale(1.04)!important;
        transition-property               : transform!important;
        transition-duration               : .55s!important;
        transition-timing-function        : cubic-bezier(0.5, 1.75, 1, 0.8)!important;
        -webkit-transition-property       : transform!important;
        -webkit-transition-duration       : .55s!important;
        -webkit-transition-timing-function: cubic-bezier(0.5, 1.75, 1, 0.8)!important;
        border                            : 1px solid var(--pix-red)!important;
        box-shadow                        : 1px 1px 12px var(--pix-red)!important; /* #555 box-shadow : 1px 1px 12px #555;*/
    }
}
@media screen and (min-width: 320px){
    .card-pizza:hover{
        -webkit-transform                 : scale(1.1);
        transform                         : scale(1.1);
        transition-property               : transform;
        transition-duration               : .55s;
        transition-timing-function        : cubic-bezier(0.5, 2.5, 1, 0.8);
        -webkit-transition-property       : transform;
        -webkit-transition-duration       : .55s;
        -webkit-transition-timing-function: cubic-bezier(0.5, 2.5, 1, 0.8);
        border                            : 1px solid var(--pix-red);
        box-shadow                        : 1px 1px 12px var(--pix-red);
    }
}
/* s */
@media screen and (min-width: 320px) and (max-width: 495px){
    .card-pizza{
        width    : 85%!important;
        min-width: 85%!important;
        max-width: 85%!important;
    }
}
/* m */
@media screen and (min-width: 496px) and (max-width: 767px){
    .card-pizza{
        width    : 300px!important;
        min-width: 300px!important;
        max-width: 300px!important;
    }
}
/* l */
@media screen and (min-width: 768px) and (max-width: 991px){
    .card-pizza{
        width    : 300px!important;
        min-width: 300px!important;
        max-width: 300px!important;
    }
}
/* xl */
@media screen and (min-width: 992px) and (max-width: 1199px){
    .card-pizza{
        width    : 300px!important;
        min-width: 300px!important;
        max-width: 300px!important;
    }
}
/* xxl */
@media screen and (min-width: 1200px) and (max-width: 1599px){
    .card-pizza{
        width    : 300px!important;
        min-width: 300px!important;
        max-width: 300px!important;
    }
}
/* xxxl */
@media screen and (min-width: 1600px) and (max-width: 1919px){
    .card-pizza{
        width    : 300px!important;
        min-width: 300px!important;
        max-width: 300px!important;
    }
}
/* illimité */
@media screen and (min-width: 1920px){
    .card-pizza{
        width    : 300px!important;
        min-width: 300px!important;
        max-width: 300px!important;
    }
}
/* apparition cartes pizza */
.enter-pizza-left{
/*    animation-duration: 1.5s;
    animation-name: inLeft;
    animation-iteration-count: 1;*/
}
@keyframes inLeft{
/*    from{
        left: 100vw;
    }
    to{
        left: 50vw;
    }*/
}
/***************************************************************/
/*                     EFFETS ET ANIMATIONS                    */
/***************************************************************/

/**************************** LOADERS **************************/

.section-1{
    /*background-color: #74b9ff;*/
}
.section-2{
    /*background-color: #0984e3;*/
    /*height: 100px;*/
}
.section-3{
    /*background-color:#00cec9;*/
}
.loader-section{
    margin: 0;
    padding: 0;
    /*font-size: 24px;*/
    text-align: center;
    height: 75px;
    /*line-height: 100px;*/
}

.loader{
    width: 50px;
    height: 50px;
    display: inline-block;
    vertical-align: middle;
    /* pour bon positionnement enfant*/
    position: relative;
}
.dom-loader{
    position: fixed;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    margin-top: auto;
    margin-bottom: auto;
    top: 50%;
/*    top: 0;
    right: 0;
    bottom: 0;
    left: 0;*/
    /*background: rgba(0,0,0,0.8);*/
    z-index: 99999;
    /*opacity:0;*/
/*    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;*/
    pointer-events: none;
}
.dom-loader:target{
    opacity:1;
    pointer-events: auto;
}
 .dom-loader>div{
    /*width: 400px;*/
    position: relative;
    margin: auto;
    /*padding: 5px 20px 13px 20px;*/
    /*border-radius: 10px;*/
    /*background: #fff;*/
    /*background: -moz-linear-gradient(#fff,  #999);
    background: -webkit-linear-gradient(#fff,  #999);
    background: -o-linear-gradient(#fff, #999);*/
}
/*------------------------------------------------------------*\
                        Quart de cercle
\*------------------------------------------------------------*/
.loader-quart{

    border-radius: 50px;
    /* donne la teinte de la bordure de fond. static. rgba(col, col, col, opac) */
    border: 6px solid rgba(128, 128, 128, 0.4);
}
/* partie interne du loader, partie tournante - pseudo elem after */
.loader-quart:after{
    content:'';
    position: absolute;
    /*width: 50px;
    height: 50px;*/
    /* décallage de l'épaisseur de la bordure */
    /* LR donnent la largeur si pas de taille */
    left: -6px;
    right: -6px;
    bottom: -6px;
    top: -6px;
    border-radius: 50px;
    /* bourdure transparente pour éviter effet de pointe sur bord */
    /*border: 6px solid transparent;*/
    /* sans transparent bord pointus */
    border-top: 6px solid #FFF;
    /*border-bottom-color: rgba(0, 0, 0, 0.4);*/
    /* dans animation possibilité d'indiquer son anim perso tel dessous
     avec param suivant --> spin durée type_avancement delay nombre_de_tours */
    -webkit-animation: spin 2s linear 0s infinite;
    animation: spin 2s linear 0s infinite;
}
.loader-quart-anti:after{
    content:'';
    position: absolute;
    /*width: 50px;
    height: 50px;*/
    /* décallage de l'épaisseur de la bordure */
    /* donnent la largeur */
    left: -6px;
    /* RB 0 pour dynamise */
    right: -6px;
    bottom: -6px;
    top: -6px;
    border-radius: 50px;
    /* pour éviter effet de pointe sur bord:
            bourdure transparente sur toute la bordure
            puis couleur de bordure que là où l'on souhaite avoir un arc (un trait avec radius) */
    border: 6px solid transparent;
    /* affiche bordures avec color */
    border-top-color: #FFF; /* border-top: 6px solid #FFF; sans le transparent pour bordure avec pointes */
    border-bottom-color: rgba(0, 0, 0, 0.4);
    /* dans animation possibilité d'indiquer son anim perso tel dessous
     avec params suivant --> spin durée type_avancement delay nombre_de_tours */
    -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 Cercle
\*------------------------------------------------------------*/

.loader-double{
    border-radius: 50px;
    border: 6px solid transparent;
    border-top-color: #85C1BE;/*#FFF;*/
    border-bottom-color: #EC459E;/*#FFF;*/
    /* animation sur l'élément parent */
    -webkit-animation: spin 1s linear 0s infinite;
    animation: spin 1s linear 0s infinite;
}
/* enfant - partie interne du loader, partie tournante - taille inférieure pour effet double */
.loader-double:after{
    content:'';
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 4px;
    top: 4px;
    border-radius: 50px;
    /* bourdure transparente pour éviter effet de pointe sur bord */
    border: 6px solid transparent;
    border-top-color: #725C7F;/*#FFF;*/
    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;
    /* bourdure transparente pour éviter effet de pointe sur bord */
    border: 6px solid transparent;
    border-top-color: #EC459E;/*#FFF;*/
    border-bottom-color: #85C1BE;/*#FFF;*/
    opacity: 0.7;
    -webkit-animation: spinreverse 3s linear 0s infinite;
    animation: spinreverse 3s linear 0s infinite;
}

/*------------------------------------------------------------*\
                        Loader Cercles multiples
\*------------------------------------------------------------*/

.loader-circles{
    border-radius: 50px;
    border: 3px solid transparent;
    border-top-color: #FFF;
    /* animation sur l'élément parent */
    -webkit-animation: spin 1s linear 0s infinite;
    animation: spin 1s linear 0s infinite;
}

/*------------------------------------------------------------*\
                        Animations Loader
\*------------------------------------------------------------*/
/*  keyframes animes loader */

/**
 * indique tranformation par palier
 */
@-webkit-keyframes spin {
    0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    100%{ -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes spin {
    0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    100%{ -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-webkit-keyframes anti-spin {
    100%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    0%{ -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes anti-spin {
    100%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    0%{ -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-webkit-keyframes spinreverse {
    0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    100%{ -webkit-transform: rotate(-360deg); transform: rotate(-360deg); }
}
@keyframes spinreverse {
    0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    100%{ -webkit-transform: rotate(-360deg); transform: rotate(-360deg); }
}

/*------------------------------------------------------------*\
                        Effets texte
\*------------------------------------------------------------*/
.text-3d{
    color: #fff;
    /*font-size: 12rem;*/
    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;
    /*letter-spacing: -7px;*/
    font-weight: 700;
    /*text-transform: uppercase;*/
    -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;
    /*letter-spacing: -7px;*/
    font-weight: 700;
    /*text-transform: uppercase;*/
    -webkit-animation: blur 0.5s ease-out infinite;
    animation: blur 0.5s ease-out infinite;
    text-shadow: 0px 0px 5px var(--pix-red), 0px 0px 3px var(--pix-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;
    }
}
/* ombres décalées les unes des autres de 1px */
.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);
}
/* intervertir les ombres donne effet inverse*/
.texte-ciselage{
    text-shadow: 1px 2px 0 rgba(0,0,0,0.4),
                -1px -2px 0 rgba(255,255,255,1);
}

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

.gliss-title{
    /*top: 12.5rem;*/
    animation-duration: 1.5s;
    animation-name: glissement;
    animation-iteration-count: 1;
}
@keyframes glissement {
    from{
        left: 100vw;
        /*width: 300%;*/
    }
    to{
        left: 0vw;
        /*width: 100%;*/
    }
}
.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       : 1s;
    animation-duration               : 1s;
}
@-webkit-keyframes fadeInOpacity{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@keyframes fadeInOpacity{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

/** parallax */
.parallax-container{
    width    : 100%;
    max-width: 100vw;
    margin   : 0 auto;
    position:r relative;
}
.parallax-element{
    min-height: 400px!important;
    height: 400px!important;
    width: 100vw!important;
    background: transparent!important;
}
.parallax-header{
    margin     : 0;
    padding    : 0;
    /*font-size  : 6.25rem;*/
    font-weight: 700;
    font-family: Viga;
    text-align : center;
    position   : relative;
    /*left       : 50%;*/
    /*top        : 40%;*/
    transform  : translate(-50%, -50%);
     /*text-shadow: 0px 0px 5px #fff, 0px 0px 7px #fff;*/
}
.parallax-title{
    position   : absolute!important;
    left       : 50%!important;
    top        : 100%!important;
    font-weight: 700;
    color      : var(--pix-red)!important;
    text-align : center;
    text-shadow: 0.02em 0.08em 0em #000000;
}
.parallax-title-1{
    /*text-align: left!important;*/
    /*font-size: 6.25rem;*/
}
/* Structure */
/*.pix-parallax{
    background-attachment: fixed;
    background-position  : top;
    background-repeat    : no-repeat;
    background-size      : cover;
    min-height           : 500px;
    background-image     : url('repair3-slider-bg.jpg');
}*/

/*@media (min-width: 768px){
    .pix-parallax-line{
        display: table;
        width  : 100%;
    }
    .pix-parallax-col{
        display       : table-cell;
        width         : 50%;
        vertical-align: middle;
    }
}*/
/* Sections */

@media (min-width: 768px){
    .pix-parallax-section{
        padding: 150px 0;
    }
}
.parallax-title-2{
    /*text-align: left!important;*/
    font-size: 5.25rem;
}
@media (min-width: 768px){
    .parallax-title-1{
        font-size: 6.25rem;
    }
}
@media (max-width: 767px){
    .parallax-title-1{
        font-size: 3.125rem;
    }
}
.pix-parallax-margin{
    padding: 15px;
}
@media (min-width: 768px){
    .pix-parallax-margin{
        padding:50px;
    }
}
/* Images */
.pix-parallax-img-fluid,
.pix-parallax-img-couvre{
    width    : 100%;
    max-width: 100%;
    height   : auto;
}
@media (min-width: 768px){
    .pix-parallax-img-fluid{
        width    : auto;
        max-width: 100%;
        height   : auto;
    }
    .pix-parallax-img-couvre{
        height    : 100%;
        min-height: 400px;
        object-fit: cover;
    }
}
.page-container-with-img{
    background-image: url(../img/parallax/parallax2.jpg);
    /*height: 100vh;
    min-height: 100vh;*/
    background-attachment: fixed;
    background-position  : top;
    /*background-repeat    : no-repeat;*/
    background-size      : cover;
}
/* Annule l'effet parallax pour les mobiles et tablettes */
/*@media only screen and (max-device-width: 991px){*/
@media only screen and (max-width: 991px){
    #parallax1,
    #parallax2,
    #parallax3,
    #parallax4{
        background-attachment: scroll;
        /*min-height: 400px;*/
    }
}
/* end parallax */

/* class de tests */
.hauteur-mini{
    min-height: 50vh!important;
    height: 50vh!important;
}
.hauteur-main-mini{
    min-height: 80vh;
}
.hauteur-mini2{
    min-height: 20rem!important;
    height: 20rem!important;
    border: solid black 2px!important;
}
.hauteur-mini2:after{
    content: 'OK';
}

.photo-brightness-50 img{
	filter        : brightness(50%);
	-webkit-filter: brightness(50%);
}
.photo-brightness-50 img:hover{
	filter        : brightness(100%);
	-webkit-filter: brightness(100%);
}