/* Google font */
@import url(https://fonts.googleapis.com/css?family=Arimo:400,700,400italic,700italic);
@import url(https://fonts.googleapis.com/css?family=Cabin:400,600,700);
/* #Site Styles
================================================== */


   :root{
      --pf-blue:#5fb0ff;
      --pf-green:#5ad18a;
      --pf-red:#ff5e6b;
      --pf-yellow:#ffd45a;
    }
    body{background:linear-gradient(180deg,#0b1220 0%, #0c1117 100%);}
    .blue {color:var(--pf-blue)} /* PointFlash Blue */
    .green {color:var(--pf-green)} /* PointFlash Green */
    .red {color:var(--pf-red)} /* PointFlash Red */
    .yellow {color:var(--pf-yellow)} /* PointFlash Yellow */
    .navbar{background:#0e1520 !important;border-bottom:1px solid rgba(255,255,255,.08)}
    .hero{padding:64px 0}
    .badge-soft{background:rgba(95,176,255,.12); color:#b9daff; border:1px solid rgba(95,176,255,.25)}
    .shadow-soft{box-shadow:0 10px 30px rgba(0,0,0,.35)}
    .card-dark{background:#111827;border:1px solid #1f2937}
    .text-muted{color:#a1a7b3 !important}
    .btn-pf{background:v#5fb0ff; color:#0b1020; border:0}
    .btn-outline-pf{border:1px solid #5fb0ff; color:#5fb0ff; background:transparent}
    .btn-outline-pf:hover{background:rgba(95,176,255,.1)}
    .list-check li{margin:.35rem 0}
    .list-check li::marker{content:"✓ "; color:var(--pf-green)}
    .section{padding:64px 0}
    .footer{background:#070b12;border-top:1px solid rgba(255,255,255,.08)}
    /* Make hero preview full width and keep 16:9 ratio using Bootstrap ratio utilities */
    .hero-preview{margin-top:1.5rem}
    /* Card titles in dark */
    .card h3, .card h4{color:#fff}










/* test chatGPT */
html,
html a {
    -webkit-font-smoothing: antialiased
}

html {
    -ms-overflow-style: scrollbar;
}

body {
    font: 1.29em/1.29em 'Arimo', sans-serif;
    color: #c6d5e3;
    background: url(../images/body-bg-dark.png) repeat 0 0 #000;

}

a,
a:active,
a:focus,
a:hover,
a:visited {
    color: #c6d5e3;
    outline: 0
}

a:active,
a:focus,
a:visited {
    text-decoration: none
}

.logoHeader {
    max-width: 80%;
    max-height: 10rem !important;
    margin-top: 1rem;

}

.logoNav {
    width: 70%;
}

.photo-cover {
    display: block;
    width: auto;
    height: 100%;
    object-fit: cover;
}

.no-padding {
    padding: 0;
}

.mt-n1 {
    margin-top: -0.25rem !important;
}

.mt-n2 {
    margin-top: -0.5rem !important;
}

.mb-n1 {
    margin-bottom: -0.25rem !important;
}

.mb-n2 {
    margin-bottom: -0.5rem !important;
}

.zc10 {
    z-index: 10;
}

.bg-boutonCarousel {
    background-color: black;
    box-shadow: 6px 3px 10px rgba(2, 117, 216, 0.356);
    overflow-wrap: break-word;
}

.bg-boutonCarousel:hover {
    box-shadow: 6px 3px 10px rgba(2, 117, 216, 0.5);
    overflow-wrap: break-word;
}

.marquee-rtl {
    overflow: hidden;
    /* masque tout ce qui dépasse */
}

.marquee-rtl> :first-child {
    display: inline-block;
    /* modèle de boîte en ligne */
    padding-right: 2em;
    /* un peu d'espace pour la transition */
    padding-left: 100%;
    /* placement à droite du conteneur */
    white-space: nowrap;
    /* pas de passage à la ligne */
    animation: defilement-rtl 90s infinite linear;
}

@keyframes defilement-rtl {
    0% {
        transform: translate3d(0, 0, 0);
        /* position initiale à droite */
    }

    100% {
        transform: translate3d(-100%, 0, 0);
        /* position finale à gauche */
    }
}

.lastTitre {
    border: 0px solid rgba(2, 117, 216, 1);
    border-radius: 10px;
    /* instruction standard */
    -moz-border-radius: 10px;
    /* spécifique Mozilla */
    -webkit-border-radius: 10px;
    /* spécifique WebKit (Safari, Chrome etc.) */
    -opera-border-radius: 10px;
    /* spécifique Opera */
    /*box-shadow: 10px 5px 5px rgba( 255, 255, 255, 0.45 ) !important; */
    box-shadow: 6px 3px 10px rgba(2, 117, 216, 0.356);
    overflow-wrap: break-word;
}

.lastTitre:hover {
    border: 0px solid rgba(2, 117, 216, 1);
    border-radius: 13px;
    /* instruction standard */
    -moz-border-radius: 13px;
    /* spécifique Mozilla */
    -webkit-border-radius: 13px;
    /* spécifique WebKit (Safari, Chrome etc.) */
    -opera-border-radius: 13px;
    /* spécifique Opera */
    /*box-shadow: 10px 5px 5px rgba( 255, 255, 255, 0.45 ) !important; */
    box-shadow: 6px 3px 10px rgba(2, 117, 216, 0.5);
    overflow-wrap: break-word;
}

.lastTitre-div-photo {
    height: 10rem;
    padding: 0;
    line-height: 10rem;
    vertical-align: middle;
}

.lastTitre-infos {
    height: 4rem;
}


.horizontal-scrollable>.row {
    overflow-x: auto;
    white-space: nowrap;
}

.horizontal-scrollable>.row>.lastTitre {
    display: inline-block;
    float: none;
}

/* Decorations */

.col-xs-4 {
    color: white;
    font-size: 24px;
    padding-bottom: 20px;
    padding-top: 18px;
}

.col-xs-4:nth-child(2n+1) {
    background: green;
}

.col-xs-4:nth-child(2n+2) {
    background: black;
}

#message {
    height: 100%;
    min-height: 16rem;
}

.blur-grayscale {
    filter: blur(3px) grayscale(1);
    -webkit-filter: blur(3px) grayscale(1);
    -moz-filter: blur(3px) grayscale(1);
    -o-filter: blur(3px) grayscale(1);
    -ms-filter: blur(3px) grayscale(1);
}

.blur-grayscale:hover {
    filter: blur(0px) grayscale(0);
    -webkit-filter: blur(0px) grayscale(0);
    -moz-filter: blur(0px) grayscale(0);
    -o-filter: blur(0px) grayscale(0);
    -ms-filter: blur(0px) grayscale(0);
}

.pochette {
    vertical-align: middle;
    object-fit: cover;
    background-size: 100% 100%;
    border-radius: 10px;
    box-shadow: 6px 3px 10px rgba(2, 117, 216, 0.356);
}


/**social bar*/

.fl-fl {
    background: #000000;
    text-transform: uppercase;
    letter-spacing: 3px;
    padding: 4px;
    width: 190px;
    position: fixed;
    right: -145px;
    z-index: 10000;
    font: normal normal 10px Arial;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
    box-shadow: 6px 3px 10px rgba(2, 117, 216, 0.356);
    overflow-wrap: break-word;
}

.social {
    font-size: 20px;
    color: #fff;
    padding: 10px 0;
    width: 40px;
    margin-left: 8px;
}


.fl-fl:hover {
    right: 0;
    box-shadow: 6px 3px 10px rgba(2, 117, 216, 0.603);
    overflow-wrap: break-word;
}

.fl-fl a {
    color: #fff !important;
    text-decoration: none;
    text-align: center;
    line-height: 43px !important;
    vertical-align: top !important;
}

.float-fb {
    top: 240px;
}

.float-tw {
    top: 295px;
}

.float-gp {
    top: 350px;
}

.float-rs {
    top: 405px;
}

.float-ig {
    top: 460px;
}

.float-pn {
    top: 515px;
}

/**fin social bar*/




/*admin*/
/* side bar */
.sidebar {
    z-index: 10;
    box-shadow: 6px 3px 10px rgba(2, 117, 216, 0.356);
}

.ulAdmin {
    width: 100%;
}

.liAdmin {
    list-style-type: none;
    width: 100%;
    line-height: 3rem;

}

.liAdmin a {
    text-decoration: none;


}

/**fin side bar*/
/*fin admin*/




@media screen and (min-width: 400px) {
    .titrage {
        font-size: 2rem
    }
}

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

    figure#audioplayer {
        width: 100%;
        padding: .2rem;
    }

    figure#audioplayer figcaption div {
        padding: .4rem;
    }

}

@media screen and (max-width: 450px) {
    figure#audioplayer figcaption {
        width: 16rem;
    }

}

@media screen and (max-width: 400px) {
    figure#audioplayer figcaption {
        width: 14rem;
    }

}

.bg-lecteur {
    background-color: black;
    opacity: 0.7;
    min-height: 90%;
    max-height: 90% !important;
    min-width: 90%;
}

.compdv {
    min-height: 100%;
}

#carousel {
    min-height: 75vh !important;
    vertical-align: middle;
}

.jeux {
    width: 100%;
    max-height: 70vh !important;
}

.containJeux {
    min-height: 70vh !important;
}

.Com {
    max-height: 75vh !important;
    min-height: 75vh !important;
    max-width: 100%;
    width: auto;
    /*or 70%, or what you want*/
    height: auto;
    /*or 70%, or what you want
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;*/
}

.rotateFDJ {
    transform: rotate(-10deg);
}


.memberProfil {
    margin-top: 1rem;
    margin-bottom: 1rem;
    text-align: center;
}

h10 {
    font-size: 5rem;
    width: 100%;
}

.memberProfil img {
    width: 7rem;
    height: 7rem;
    border: 0.1rem solid rgba(0, 0, 0, 0.1);
}

.memberProfil nick {
    margin-top: 0.5rem;
    margin-bottom: 0;
    /*background-color: rgba(0, 0, 0, 0.5);*/
}

/*.bg-nav {
	background-color: rgba(0, 0, 0, 0.70);
	max-height: 15rem !important;
}*/


.price {
    font-size: 3rem !important;
}