/* ========== styleBase.css : thème sombre ========== */

/* Media mobile spécifique au thème sombre */
@media only screen and (max-device-width: 768px) and (min-resolution: 160dpi) {
	body{font-size: max(25pt,min(1.8vh,2vw))!important;}
	p{font-size: max(25pt,min(1.8vh,2vw))!important;}
}

/* BODY sombre + fond image */
body{
	user-select: none;
	background-image: url('/DAS/img/BG/bg1000.png');
	background-repeat:no-repeat;
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
	font-family: 'Open Sans Condensed';
	font-size: max(15pt,min(1.8vh,2vw));
	margin:0;
	color:#FFF;
	-webkit-font-smoothing: subpixel-antialiased;
	overflow: hidden;
}

@media screen and (max-width:1000px) { 
	body{ background-image: url('/DAS/img/BG/bg1000.png'); }
}

@media screen and (min-width:1000px) { 
	body{ background-image: url('/DAS/img/BG/bg1500.png'); }
}

@media screen and (min-width:2000px) { 
	body{ background-image: url('/DAS/img/BG/bg2000.png'); }
}

/* overlay sombre */
#overlay{
	position:fixed;
	top:0;
	width: 100%;
    height: 100%;
	background: linear-gradient(90deg, rgba(204, 51, 45, 0.14) 0%, rgba(0, 150, 203, 0.28) 100%);
	background-repeat:no-repeat;
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
	backdrop-filter: blur(3px) contrast(0.8) brightness(0.8);
	z-index:-1;
}

/* logo marque : pas de filtre */
.logoMarque img{
	filter:none;
}

/* layout spécifique sombre */
.wrap{
	min-height: 800px;
    min-width: 100%;
    position: relative;
    top: 0px;
}

/* MENU : couleur liens + hover pour sombre */
#menu a{
	color:#ddd;
}
#menu a:hover{
	color : #fff;
	text-shadow: 0px 0px 4px rgb(255, 255, 255);
}

/* contenu sombre */
#content{
	height: 84vh;
    padding: 1.5vh 7vw;
    overflow-x: auto;
    overflow-y: auto;
    display: flex;
    flex-direction: row;
    align-content: flex-start;
    align-items: flex-start;
    justify-content: space-around;
    row-gap: 2vh;
    flex-wrap: wrap;
}

/* z-index plus bas que le menu blanc (on garde 10 ici) */

/* RESPONSIVE sombre */
@media only screen and (max-device-width: 768px) {
	#menu {
		font-size: min(25pt, max(3vw, 3vh)) !important ;
        height: 4vh !important;
        position: fixed;
        right: 0 !important;
        width: 100%;
        display: flex;
        top: 4vh !important;
        z-index: 10;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        background: #00000091;
        justify-content: space-evenly;
	}
	
	.wrap{
		display: flex;
		flex-wrap: wrap;
		align-content: center;
		flex-direction: row;
		justify-content: space-around;
		min-width: 100%;
	}
	
	#content{
		padding: 1vh 7vw !important;
		height: 90vh!important;
		align-content: flex-start!important;
	}
	
	#main{
		top:8vh!important;
	}
}

/* formulaire sombre (fond foncé) */
.form .field i {
	border-right: 1px solid #3c3c3c;
	box-shadow: 1px 0 0 #303030;
	color: #999;
}

/* inputs sombres */
.form input[type=text],
.form input[type=number],
.form input[type=password],
.form textarea,
.form select {
	border: none;
	box-shadow: 
		inset 0 0 5px rgba(0,0,0,0.2),
		inset 0 3px 2px rgba(0,0,0,0.2);
	background: #3a3a3a;
	color: #fff;
}

/* autofill sombre */
.form input:-webkit-autofill,
.form input:-webkit-autofill:hover, 
.form input:-webkit-autofill:focus,
.form textarea:-webkit-autofill,
.form textarea:-webkit-autofill:hover,
.form textarea:-webkit-autofill:focus,
.form select:-webkit-autofill,
.form select:-webkit-autofill:hover,
.form select:-webkit-autofill:focus {
  border: 0px solid #000;
  -webkit-text-fill-color: #999;
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2),
		inset 0 3px 2px rgba(0,0,0,0.2);
  transition: background-color 5000s ease-in-out 0s !important;
}

/* bouton sombre */
.form button {
	color: #aaa;
    border: none;
}

/* titre form sombre */
.form .title{
	color:#DDD;
}

/* checkbox container : plus petit */
.checkboxContainer{
	width: min(45vw,45vh);
}

/* tabs résultats : fond sombre */
.resultTabs{
	background-color: #00000055;
    box-shadow: 0 0 8px 1px #000000ba;
}

.resultStage{
	border-bottom: 1px solid #999;
    color: #2b2b2b;
    width: 19%;
    height: 4vh;
    text-shadow: 0 0 6px #ffffffb8;
    font-size: max(25pt, min(2vh, 2vw));
    cursor: pointer;
}

/* cellules droite bleues */
.resultTab .cellRight{
	color:#0095cb;
	font-weight:bolder;
}

/* tableaux resultats sombres */
.resultTab thead tr{
	background-color:#0080afb8;
}

.resultTab tr{
	border:none;
	border-bottom:1px solid #005471;
	text-align: center;
	background-color:#030715b8;
}

.resultTab tbody tr:hover{
	background-color:#004a65b8;
}

/* listes véhicules sombres */
.carList{
	text-align: center;
    background-color: #030715b8;
    width: 94%;
    border: 1px solid #005471;
}

.carList2{
    text-align: center;
    background-color: #030715b8;
    width: 43%;
    margin: 3%;
    display: flex;
    border: 1px solid #005471;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: stretch;
    justify-content: flex-start;
    row-gap: 2vh;
	min-height:fit-content;
    height: -webkit-fill-available;
    align-items: stretch;
}

.carList2 h4, .carList h4{
	background: #0080afb8;
    margin: 0 0 20px;
    padding: 14px;
}

/* liens véhicules sombre */
.selectCar{
	color: #ffffff;
    text-decoration: none;
    font-size: max(20pt, min(1.6vh, 2vw));
    line-height: 25px;
    text-shadow: 0px 0px 8px #000000;
    display: inline-block;
    transition: color 500ms;
    font-weight: bold;
}

.selectCar:hover{
	color:#0095cb;
	transition: color 300ms;
}

.selectGen{
	color: #FFF;
    text-decoration: none;
    font-weight: normal;
    width: 95%;
    transition: font-weight 500ms, color 500ms, font-size 500ms;
}

.selectGen:hover{
	color:#0095cb;
	font-size:max(25pt,min(2vh,2vw));
	font-weight:bold;
	transition: font-weight 300ms, color 300ms, font-size 300ms;
}

/* ariane pleine largeur en sombre */
.ariane{
	width: 100%;
}

/* reseller image sans filtre inversé */
.reseller img{
	width: min(10vw, 10vh);
}

/* bouton : texte blanc en sombre */
.button{
	color:#fff;
}

/* svg border sombre */
.svg-container{
	border: 1px solid #ffffff14;
}

/* tableau historique sombre */
.histoTable{
	border-collapse: collapse;
	border-spacing: 10px;
}

.histoTable thead tr{
	background-color:#0080afb8;
	height:40px;
}

.histoTable tr{
	border:none;
	border-bottom:1px solid #005471;
	text-align: center;
	background-color:#030715b8;
}

.histoTable tbody tr:hover{
	background-color:#004a65b8;
}

.histoTable td,
.histoTable th{
	border:none;
}

.histoTable a {
	color:#5cd5ff;
	text-decoration:none;
}

.histoTable img{ 
	margin-top: 7px;
}