/* new 2023 :
                          color-full blue
                          margin-(x)-xs et xl
                           */

                          /* _____________ colors _____________*/

                      .bloc, .bloc-shadow, .bloc-grey, .bloc-blue, .bloc-white, .bloc-red, .bloc-black, .bloc-orange{padding: 15px; background: #efefef; border-radius: 8px; border: 1px solid #ccc; box-sizing: border-box;} /* before color */

.bloc-grey{
    background: #efefef;
}

.bloc-blue{
    background: #dfe5ec;

}
.bloc-white{
    background: #fff;
}
.bloc-shadow{
    box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, .2);
    background: #fff;
}
.bloc-orange{
    background: #f8d7a9;

}
.bloc-red{
    background: #cd511a;

    color:#fff;
}
.bloc-black{
    background: #000;

}

.bloc-full-white,.bloc-full-grey,.bloc-full-black,.bloc-full-yellow,.bloc-full-orange,.bloc-full-red,.bloc-full-blue,.bloc-full-green{ padding: 15px; border-radius: 8px; border: none; box-sizing: border-box; } /* before color */

.bloc-full-white{
    background: #fff;
}
.bloc-full-grey{
    background: #efefef;
}
.bloc-full-black{
    background: #333;
    color:#fff;
}
.bloc-full-yellow{
    background: #ffcd26;
}
.bloc-full-orange{
    background: #f8d7a9;
}
.bloc-full-red{
    background: #cd511a;
    color:#fff;
}
.bloc-full-blue{
    background: #dfe5ec;
}
.bloc-full-green{
    background: #5cb209;
}

.color-red{color:#cd511a}
.bg-red{background-color:#cd511a}

.color-dark-red{color:#aa312d}
.bg-dark-red{background-color:#aa312d}

.color-orange{color:#e57f12}
.bg-orange{background-color:#e57f12}

.color-light-yellow{color:#ffe694}
.bg-light-yellow{background-color:#ffe694}

.color-yellow{color:#ffcd26}
.bg-yellow{background-color:#ffcd26}

.color-dark-yellow{color:#fab600}
.bg-dark-yellow{background-color:#fab600}

.color-green{color:#57a116}
.bg-green{background-color:#57a116}

.color-dark-green{color:#57a116}
.bg-dark-green{background-color:#57a116}

.color-light-green{color:#55a607}
.bg-light-green{background-color:#55a607}

.color-blue{color:#3972ac}
.bg-blue{background-color:#3972ac}

.color-dark-blue{color:#1a4c7e}
.bg-dark-blue{background-color:#1a4c7e}

.color-light-blue{color:#528ccd}
.bg-light-blue{background-color:#528ccd}

.color-pink{color:#f8d7a9}
.bg-pink{background-color:#f8d7a9}

.color-turquoise{color:#12a28f}
.bg-turquoise{background-color:#12a28f}


.color-gold{color:#e99740}
.bg-gold{background-color:#e99740}

.color-white{ color: #FFF; }
.bg-white{ background: #FFF; }

.color-black{ color: #000; }
.bg-black{ background: #000; }

.color-grey{ color: #777; }
.bg-grey{ background: #777; }

.color-light-grey{ color: #ddd; }
.bg-light-grey{ background: #ddd;  }

.color-dark-grey{ color: #333; }
.bg-dark-grey{ background: #333; }


.text-shadow-btn{ text-shadow: 0px 1px 1px rgba(0,0,0,0.8); }

.tshadow-white{ text-shadow: 0px 0px 20px rgba(255,255,255,0.5); }
.tshadow-white-raid{ text-shadow: 1px 1px 0px rgba(255,255,255,0.5); }

.tshadow-dark{ text-shadow: 0px 0px 20px rgba(0,0,0,0.5); }
.tshadow-dark-raid{ text-shadow: 1px 1px 0px rgba(0,0,0,0.5); }

.box-shadow-s{ box-shadow: 0px 0px 5px rgba(0,0,0,0.5); }
.box-shadow-m{ box-shadow: 0px 0px 10px rgba(0,0,0,0.4); }
.box-shadow-l{ box-shadow: 0px 0px 15px rgba(0,0,0,0.3); }
.box-shadow-xl{ box-shadow: 0px 0px 20px rgba(0,0,0,0.2); }

/* _____________background_____________*/

.bg-dark-xs{ background-color: rgba(0,0,0,0.1); }
.bg-dark-s { background-color: rgba(0,0,0,0.3); }
.bg-dark-m { background-color: rgba(0,0,0,0.5); }
.bg-dark-l { background-color: rgba(0,0,0,0.9); }
.bg-dark-xl{ background-color: rgba(0,0,0,1); }

.bg-light-xs{ background-color: rgba(255,255,255,0.1); }
.bg-light-s { background-color: rgba(255,255,255,0.3); }
.bg-light-m { background-color: rgba(255,255,255,0.5); }
.bg-light-l { background-color: rgba(255,255,255,0.9); }
.bg-light-xl{ background-color: rgba(255,255,255,1); }

/* _____________opacity_____________*/

.opacity-xs{ opacity:0.9 }
.opacity-s { opacity:0.7 }
.opacity-m { opacity:0.5 }
.opacity-l { opacity:0.3 }
.opacity-xl{ opacity:0.1 }

/* _____________space_____________*/

.padding-s{ padding: 3px; }
.padding-m{ padding: 6px; }
.padding-l{ padding: 9px; }
.padding-xl{ padding: 12px; }
.padding-xxl{ padding: 24px; }

.nomargin, .no-margin{ margin: 0 }
.nopadding,.no-padding{ padding: 0 }

.margin-top-xs{ margin-top : 5px }
.margin-top-s{ margin-top : 10px }
.margin-top-m{ margin-top : 20px }
.margin-top-l{ margin-top : 30px }
.margin-top-xl{ margin-top : 40px }

.margin-bottom-xs{ margin-bottom : 5px }
.margin-bottom-s{ margin-bottom : 10px }
.margin-bottom-m{ margin-bottom : 20px }
.margin-bottom-l{ margin-bottom : 30px }
.margin-bottom-xl{ margin-bottom : 40px }

.margin-left-xs{ margin-left : 5px }
.margin-left-s{ margin-left : 10px }
.margin-left-m{ margin-left : 20px }
.margin-left-l{ margin-left : 30px }
.margin-left-xl{ margin-left : 40px }

.margin-right-xs{ margin-right : 5px }
.margin-right-s{ margin-right : 10px }
.margin-right-m{ margin-right : 20px }
.margin-right-l{ margin-right : 30px }
.margin-right-xl{ margin-right : 40px }

/* _____________font_____________*/

.font-size-xs{ font-size: 8px }
.font-size-s{ font-size: 10px }
.font-size-m{ font-size: 13px }
.font-size-l{ font-size: 16px }
.font-size-xl{ font-size: 20px }
.font-size-xxl{ font-size: 24px }

/* _____________ btn _____________*/



.btn-primary, .btn-simple, .btn-transparent, .btn-blue, .btn-white, .btn-black, .btn-dark-grey, .btn-grey, .btn-green, .btn-yellow, .btn-orange, .btn-red, .btn-disabled{
    display: inline-block;
    cursor: pointer;
    border-radius: 2px;
    padding: 6px 10px;
    margin-bottom:4px;
    font-size: 15px;
    font-weight: 400;
    text-decoration: none;
    text-align: center;
    border: none;
    -moz-user-select: none; /* Firefox */
    -webkit-user-select: none; /* Chrome, Safari, Opéra depuis la version 15 */
    -ms-user-select: none; /* Internet explorer depuis la version 10 et Edge */
    user-select: none; /* Propriété standard */
    outline: none;
}

.btn-primary:hover, .btn-simple:hover, .btn-blue:hover, .btn-white:hover, .btn-black:hover, .btn-dark-grey:hover, .btn-grey:hover, .btn-green:hover, .btn-yellow:hover, .btn-orange:hover, .btn-red:hover{
    filter:brightness(105%);
    transition:ease 0.15s all;
    box-shadow:0px 2px 5px rgba(0,0,0,0.1);
}

.btn-transparent{

}
.btn-transparent:hover{
    background: rgba(0,0,0,0.1);
}

.btn-small{
    padding: 4px 8px;
    font-size: 13px;
}

.btn-simple{
    color: #333;
    background-color: #ffca10;
    border-bottom: 1px solid #db9b13;
}

.btn-black{
    color: #fff;
    background-color: #222;
    border-bottom: 1px solid #000;
}

.btn-dark-grey{
    color: #fff;
    background-color: #555;
    border-bottom: 1px solid #333;
}

.btn-grey, .btn-disabled{
    color: #333;
    background-color: #dfdfdf;
    border-bottom: 1px solid #ccc;
}

.btn-disabled{
    opacity: 0.5;
    cursor: default;
}

.btn-blue{
    color: #FFF;
    background-color: #4b89cf;
    border-bottom: 1px solid #196fa6;
}

.btn-white{
    color: #333;
    background-color: #fff;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.btn-green, .btn-primary{
    color: #FFF;
    background-color: #5cb209;
    border-bottom: 1px solid #47840c;
}

.btn-yellow{
    color: #333;
    background-color: #ffca10;
    border-bottom: 1px solid #db9b13;
}
.btn-orange{
    color: #FFF;
    background-color: #ff8f22;
}
.btn-red{
    color: #FFF;
    background-color: #ea4c48;
}
/*
.btn:hover, .btn-blue:hover, .btn-green:hover, .btn-yellow:hover, .btn-orange:hover, .btn-red:hover, .btn1:hover, .btn2:hover, .btn3:hover{
filter: brightness(110%);
}*/

.btn-big{
    font-size: 17px;
    font-weight: 400;
}
.btn-txt-white{
    color: #fff;
}
.btn-txt-black{
    color: #000;
}


/* _____________badge_____________*/

.badge{
    border-radius:3px;
    padding: 3px 6px;
}

.badge-s{border-radius:3px;padding: 2px 5px;font-size: 12px;}
.badge-xs{border-radius:2px;padding: 1px 3px;font-size: 10px;}

/* _____________ bubble _____________*/

.bubble, .bubble-xxs, .bubble-xs, .bubble-s, .bubble-l, .bubble-xl, .bubble-xxl{
    border-radius:50%;
    width:36px;
    min-width:36px;
    height:36px;
    font-size: 16px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.bubble-xxs{ font-size: 8px; width:12px; min-width:12px; height:12px; }
.bubble-xs{ font-size: 10px; width:18px; min-width:18px; height:18px; }
.bubble-s{ font-size: 12px; width:24px; min-width:24px; height:24px; }
.bubble{}
.bubble-l{ font-size: 20px; width:48px; min-width:48px; height:48px; }
.bubble-xl{ font-size: 24px; width:64px; min-width:64px; height:64px; }
.bubble-xxl{ font-size: 48px; width:96px; min-width:96px; height:96px; }

/* _____________border_____________*/

.noborder{ border:none; }

.border-radius-s{ border-radius:3px  }
.border-radius-m{ border-radius:6px  }
.border-radius-l{ border-radius:10px  }

.border-light-s{ border: 1px solid rgba(255,255,255,0.3) }
.border-light-m{ border: 1px solid rgba(255,255,255,0.5) }
.border-light-l{ border: 1px solid rgba(255,255,255,0.9) }

.border-dark-s{ border: 1px solid rgba(0,0,0,0.3) }
.border-dark-m{ border: 1px solid rgba(0,0,0,0.5) }
.border-dark-l{ border: 1px solid rgba(0,0,0,0.9) }

.border-bottom{ border-width: 0px 0px 1px 0px;}

.dotted{ border-style: dotted;}
.dashed{ border-style: dashed;}

.space-xxs{ clear: both; height: 1px}
.space-xs{ clear: both; height: 5px}
.space-s{ clear: both; height: 10px}
.space-m{ clear: both; height: 20px}
.space-l{ clear: both; height: 30px}
.space-xl{ clear: both; height: 40px}
.space-xxl{ clear: both; height: 50px}

hr{
    clear: both; height: 30px; border:none;display: block; width: 100%;margin:0;
}

.w10{width:10%;}
.w15{width:15%;}
.w20{width:20%;}
.w22{width:22%;}
.w25{width:25%;}
.w30{width:30%;}
.w40{width:40%;}
.w50{width:50%;}
.w60{width:60%;}
.w70{width:70%;}
.w75{width:75%;}
.w80{width:80%;}
.w90{width:90%;}
.w100{width: 100%;}

/* _____________ size _____________*/

.font-size-xxs{ font-size: 8px }
.font-size-xs{ font-size: 10px }
.font-size-s{ font-size: 12px }
.font-size-m{ font-size: 14px }
.font-size-l{ font-size: 16px }
.font-size-xl{ font-size: 18px }
.font-size-xxl{ font-size: 20px }

.xsmall{ font-size: 10px }
.small{ font-size: 12px }
.normal{ font-size: 14px }
.large{ font-size: 16px }
.xlarge{ font-size: 18px }
.xxlarge{ font-size: 20px }
.xxxlarge{ font-size: 22px }
.xxxxlarge{ font-size: 30px }
.xxxxxlarge{ font-size: 40px }

.lh-50{ line-height:50%; }
.lh-100{ line-height:100%; }
.lh-150{ line-height:150%; }

/* _____________ align _____________*/

.align-right{
    text-align: right;
}
.align-left{
    text-align: left;
}
.align-center{
    text-align: center;
}

.float-right{
    float: right;
}
.float-left{
    float: left;
}
.float-none{
    float: none;
}

.float-left-c2{
    float: left;
    width: 48%;
    margin-right: 4%;
}
.float-right-c2{
    float: right;
    width: 48%;
    margin-left: 4%;
}

/* _____________ decoration _____________*/

.decoration-none{
    text-decoration:none;
}
.decoration-underline{
    text-decoration:underline;
}
.decoration-through{
    text-decoration:line-through;
}


.cursor-pointer{
    cursor: pointer;
}

/* _____________ case _____________*/

.normalcase{
    text-transform:none;
}
.up, .uppercase{
    text-transform:uppercase;
}
.low, .lowercase{
    text-transform:lowercase;
}

.bold{ font-weight: bold;  }
.regular{ font-weight: 400; }
.light{ font-weight: 100; }

/* _____________ display _____________*/

.d-inline{
    display: inline;
}
.d-block{
    display: block;
}
.d-inline-block{
    display: inline-block;
}
.d-none{
    display: none;
}
.d-flex{
    display: flex;
}

/* _____________ pos _____________*/

.pos-relative{
    position: relative;
}
.pos-absolute{
    position: absolute;
}
.pos-fixed{
    position: fixed;
}

/* _____________ center _____________*/

.flex-center{
    display: flex;
    justify-content: center;
    align-items: center;
}
.flex-center-x{
    display: flex;
    justify-content: center;
}
.flex-center-y{
    display: flex;
    align-items: center;
}

.flex-end{
    display: flex;
    justify-content:flex-end;
}
.flex-start{
    display: flex;
    justify-content:flex-start;
}

.flex-between{
    display: flex;
    justify-content: space-between;
}

.flex-wrap{
    flex-wrap:wrap;
}
.flex-nowrap{
    flex-wrap:nowrap;
}

.flex-around{
    display: flex;
    justify-content: space-around;
}

.flex{
    display: flex;
    align-items: center;
}
.flex-row{
    display: flex;
    flex-direction: row;
}

.flex-column{
    display: flex;
    flex-direction: column;
}

.video {
    width: 100%;
    height: 54vw;
    max-height: 560px;
}
.c2 .video {
    width: 100%;
    height: 280px;
}

.ratio {
    position: relative;
    display: block;
}
.ratio iframe {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
}
.ratio img {
    display: block;
    width: 100%;
    height: auto;
}


/* _____________ code _____________*/

textarea.code {
    padding: 10px;
    background:#333;
    color:yellow;
    width: 100%;
    border: none;
    overflow: auto;
    min-height: 30px;
    font-size: 12px;
    font-family: verdana;
    margin: 5px 0px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

/* _____________ zoning _____________*/

.zoning{
    margin: 20px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #efefef;
    min-height: 300px;
    color: #444;
}

/* _____________ cols _____________*/

.c2,.c3,.c4,.c5,.c6,.c7,.c8,.c9,.c10,.c12,
.mob-c2,.mob-c3,.mob-c4,.mob-c5,.mob-c6,.mob-c7,.mob-c8,.mob-c9,.mob-c10,.mob-c12{
    display: flex;
    justify-content: space-between;
}

/* var(--c-space, 20px);
calc( 100% / 2 - var(--c-space) );*/

.c2 > .c { width: 48% }
.c3 > .c { width: 30.5% }
.c3 > .cc { width: 65.2% }
.c4 > .c { width: 22% }
.c4 > .cc { width: 48% }
.c4 > .ccc { width: 74% }
.c5 > .c { width: 17% }
.c5 > .cc { width: 37.7% }
.c5 > .ccc { width: 58.5% }
.c5 > .cccc { width: 79.3% }

.c6 > .c { width: 13.5% }
.c6 > .cc { width: 30.7% }
.c6 > .ccc { width: 48% }
.c6 > .cccc { width: 65% }
.c6 > .ccccc { width: 82.5% }

.c7 > .c { width: 12% }
.c8 > .c { width: 10% }
.c9 > .c { width: 8.5% }
.c10 > .c { width: 7.5% }
.c12 > .c { width: 6.2% }

.list-flex-auto::after {
    content: "";
    flex: auto;
}

/* _____________ tinymce _____________*/

#tinymce {
    box-sizing: border-box;
}

#tinymce .c2,
#tinymce .c3,
#tinymce .c4,
#tinymce .c5,
#tinymce .c6,
#tinymce .c7,
#tinymce .c8,
#tinymce .c9,
#tinymce .c10,
#tinymce .c12{
    border:1px dashed rgba(0,0,0,0.5);
    background:#efefef;
    width:100%;
    padding:10px;
    margin-bottom: 20px;
    box-sizing: border-box;
}

#tinymce .c{
    border:1px dashed rgba(0,0,0,0.5);
    background:#fff;
}

/* _____________ mobile _____________*/


@media screen and (max-width: 1280px)
{

    .mob-hide, .nomob{ display: none }
    body .mob-show, body .mobonly { display: block; }
    .desktoponly{ display:none; }

    body.open .mob-open-hide{ display: none }

    /* Colonne petites on Mob */
    .mob-max{
        max-width:360px; margin:10px auto;
    }

    .c2,.c3,.c4,.c5,.c6{
        flex-flow: column;
    }
    .mob-row-reverse{
        flex-direction: row-reverse;
    }
    .mob-column-reverse{
        flex-direction: column-reverse;
    }

    /* pas de * car ça ne prend pas le dessus */
    .c2 > .c { width: 100% }
    .c3 > [class^="c"] { width: 100% }
    .c4 > [class^="c"] { width: 100% }
    .c5 > [class^="c"] { width: 100% }
    .c6 > [class^="c"] { width: 100% }
    .c7 > [class^="c"] { width: 100%}
    .c8 > [class^="c"] { width: 100% }

    .mob-c2, .mob-c3, .mob-c4, .mob-c5, .mob-c6, .mob-c7, .mob-c8, .mob-c9, .mob-c10, .mob-c11, .mob-c12{ flex-flow:row; flex-wrap: wrap; }

    .mob-c2 > .c { width: 48% }
    .mob-c3 > [class^="c"] { width: 30.5% }
    .mob-c4 > [class^="c"] { width: 22% }
    .mob-c5 > [class^="c"] { width: 17% }
    .mob-c6 > [class^="c"] { width: 13.5% }
    .mob-c7 > [class^="c"] { width: 12%}
    .mob-c8 > [class^="c"] { width: 10% }
    .mob-c9 > [class^="c"] { width: 8.5% }
    .mob-c10 > [class^="c"] { width: 7.5% }
    .mob-c12 > [class^="c"] { width: 6.2% }

    .mob-w100{ width:100% }
    .mob-w75{  width:75% }
    .mob-w50{  width:50% }
    .mob-w25{  width:25% }
    .mob-row{ flex-flow: row; }
    .mob-column{ flex-flow: column; }

    .mob-center{display:flex; justify-content: center;}

    .margin-s-onmob{ margin:5px 0px }
    .margin-m-onmob{ margin:10px 0px }
    .margin-l-onmob{ margin:20px 0px }

    .mob-align-right{text-align: right;}
    .mob-align-left{text-align: left;}
    .mob-align-center{text-align: center;}
    .mob-wrap{ flex-wrap: wrap; }

}

.mob-hide,.nomob{}
.mob-show, .mobonly{ display:none; }
.desktoponly{ display:block; }