/** STRUCTURE **
------------------------------------------------------------
------------------------------------------------------------

Couleurs de la charte
    Transparent
   #FFFFFF : Blanc
   #303048 : Bleu noir
   #00E0FE : Bleu ciel */

@font-face {
    font-family: 'Archivo', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Archivo-bold', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

:root {
    --main-light:  #FFFFFF;
    --main-dark:   #1F2D3D;
    --main-color1: #00E0FE;

    --main-font:         "Archivo", sans-serif ;
    --main-font-regular: "Archivo", sans-serif ;
    --main-font-bold:   "Archivo-bold", sans-serif ;
    --main-font-fa: 'Font Awesome 5 Pro' ;

    --main-light-test:  #FFFFFFAA;
    --main-dark-test:   #303048AA;
}
body {
    margin: 0;
    padding: 0;
    background: var(--main-dark);
}

li {
    list-style-type: none;
}

input:focus-visible {
    outline: 0;
}
.container, .container-fluid, .container-lg,
.container-md, .container-sm,
.container-xl, .container-xxl {
    width: calc(100% - 1.5rem);
}
.container-full {
    width: 100%!important;
    max-width: 100%!important;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
.post-content {
    padding: 0 .75rem;
}
.sub-container .row {
    margin: 0;
}
a.btn {
    text-decoration: none!important;
}
.hide {
    display: none;
}
@media (max-width: 990px) {
    .hide-mobile {
        display: none;
    }
}
@media (min-width: 991px) {
    .hide-desktop {
        display: none;
    }
}

/* EN CAS DE BLOCS IMBRIQUÉS DE MANIÈRE IMPRÉVUES
------------------------------------------------------------*/

.offset-lg-2 .offset-lg-2 {
    margin-left: 0;
}
.col-lg-8 .col-lg-8 {
    width: 100%;
}
.container-fluid .container-fluid {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}
.offset-lg-2.col-lg-8  .container {
    -margin-left: 0rem!important;
    width: calc( 100% )!important;
    max-width: calc( 100%  )!important;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}


/* YOUTUBE  **--------------------------------------------------
------------------------------------------------------------*/
.container iframe {
    width: 100% !important;
    -min-height: 400px !important;
    position: relative;
    aspect-ratio: 16/9;
}
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* ratio 16/9 */
/ / padding-bottom: 75 %; /* ratio 4/3 */
/ / padding-bottom: 100 %; /* ratio 1/1 */
/ / padding-bottom: 66.66 %; /* ratio 3/2 */
/ / padding-bottom: 62.5 %; /* 8/5 Aspect Ratio */
    height: 0;
    overflow: hidden;
    clear: both;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.wp-video {
    width: 100% !important;
}
.wp-video video {
    aspect-ratio: 16 / 9;
}


/* add bootstrap  **-----------------------------------------
------------------------------------------------------------*/
@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 100vw;
    }
}
.row.equal-cols {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.row.equal-cols:before,
.row.equal-cols:after {
    display: block;
}

.row.equal-cols > [class*='col-'] {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.row.equal-cols > [class*='col-'] > * {
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0;
}
h1.color-light {
    color: var(--main-light);
}

/** POPUP **
------------------------------------------------------------
------------------------------------------------------------*/
#popup {
    position: fixed;
    overflow: scroll;
    top: 20px;
    bottom: 20px;
    left: 20%;
    right: 20%;
    border: 3px solid #000;
    background: #FFF;
    padding: 10px 20px;
    transition: .3s;
    display: none;
    opacity: 0;
}

#closePopup {
    position: fixed;
    border: 3px solid #000;
    background: #FFF;
    padding: 2px 20px;
    width: 70px;
    right: 24%;
    cursor: pointer;
}

#popup p {
    font-size: 15px;
}

#popup h1 {
    font-size: 20px;
    margin-top: 40px;
}

.popin {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #FFFE;
    opacity: 0;
    transition: .3s;
    z-index: 111111;
}
.popinContent {
    position: absolute;
    width: 98%;
    height: 98%;
    top: 1%;
    left: 1%;
    transition: .3s;
}
.popinContent img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.btclose {
    position: absolute;
    width: 38px;
    height: 38px;
    right: 1.5%;
    top: 2.5%;
    z-index: 11112;
    text-align: center;
    line-height: 25px;
    cursor: pointer;
    background: #FFFC;
    border-radius: 5px;
}