@font-face {font-family: carlito; src: url("../fonts/carlito.italic.ttf");font-display: swap;}
@font-face {font-family: Montserrat; src: url("../fonts/Montserrat-ExtraBold.ttf");font-display: swap;}
/*@font-face {font-family: Vladimir; src: url("../fonts/vladimir.ttf");font-display: swap;}*/
/*@font-face {font-family: Legende; src: url("../fonts/JMH Typewriter.ttf");font-display: swap;}*/

html{background:white;}

body{
	position:relative;
	min-width:1100px;
	width:1100px;
	margin:0 auto;
	min-height: 100vh;
	padding:0;
	font-family: 'carlito', sans-serif;
	border-top:0px solid red;
	}


nav a{text-decoration:none; }

#entete{
	background:white;
	background-image:url("../images/titre.webP");
	background-repeat:no-repeat;
	background-position:left 2px top 10px,0 0 ;
	background-size:100%, cover;
	width:100%;
	height:7em; }

#entete h1{color:white;opacity:0.0;font-size:60px; margin-top:0;}
	
#ligneNoire{
	width:100%;
	height:1.3em;
	margin:5px 0px;
	padding:0px;
	background:black;
	color:lightgray;
	text-align:end;
	font-size:1.4em; }
#ligneNoire a{text-decoration:none;padding-right:5px;color:white;}
#ligneNoire a>img{width:28px;vertical-align:middle;}


#menu {width:100%; font-size:1.3em;margin:0px auto;margin-bottom:10px;font-family: 'Montserrat', sans-serif;}
#menu a {color:#575757;}
#menu ul {padding:0;}
#menu li {color:#575757; display:inline-block; padding:5px; margin-right:5px;}
#menu li:hover>a{color:black;}
#menu li:hover{background:linear-gradient(to right,#ddd,white); color:white; transition:all 0.25s ease-in-out;}

#sousmenu {width:100%; font-size:1.1em;margin:5px auto;margin-bottom:10px;font-family: 'Montserrat', sans-serif;}
#sousmenu a {color:gray;}
#sousmenu ul {padding:0;}
#sousmenu li {color:green; display:inline-block; padding:5px; border-radius:3px;margin-right:5px;}
#sousmenu li:hover>a{color:black;}
#sousmenu li:hover{background:linear-gradient(to right,#ddd,white); color:white; transition:all 0.25s ease-in-out;}

#contenu{
	position:relative;
	overflow:hidden; }

article{
	position:relative;
	padding:10px 20px;
	background:#eee;
	font-family: 'carlito', sans-serif;
	font-size:1.4em;
	margin-bottom:20px; }

.article{
	position:relative;
	padding:10px 20px;
	background:#eee;
	font-family: 'carlito', sans-serif;
	font-size:1.4em;
	margin-bottom:20px; }

article:first-child{margin-top:0px;}
article:last-child{margin-bottom:5px;}

article header{
	font-style: italic;
	font-family: 'carlito', sans-serif;
	font-size:1.6em;
	color:black;
	text-shadow:1px 1px 1px gray; }

article h2,.article h2{
	margin:0px;
	font-style: italic;
	font-family: 'carlito', sans-serif;
	font-size:1.6em;
	font-weight:normal;
	color:black;
	text-shadow:1px 1px 1px gray;
}

article ul{text-align:left;}

article footer{
	position : absolute;
	font-style:italic;
	right:20px;
}

#pied{
	/*position:fixed;*/
	bottom:0;
	width:100%;
	height:85px;
	line-height:35px;
	background:linear-gradient(to bottom, #eee,#bbb);
	text-align:center;
	z-index: 1000;
	color:gray;
	font-style: italic;
	font-family: 'carlito', sans-serif;
	font-size:24px;
	transition: all 0.2s ease;
}

#pied a{color:black;text-decoration:none;}


/* ----------- GESTION PANIER ------------------------------- */
#petitPanier{display:inline-block;position:absolute;margin-left:-115px;width:120px;margin-top:30px;	color:black;background:#eee;border-radius:5px;font-size:1.5em;	}


/* ----------- MES MINIATURES (choisir/galerie)------------------------------- */
.miniatures{width:120px;max-height:120px;margin:5px;border-radius:5px;vertical-align:middle;box-shadow:1px 1px 5px black;}
.miniaturesP{width:80px;max-height:120px;margin:5px;border-radius:5px;vertical-align:middle;box-shadow:1px 1px 5px black;}
#gauche{width:20%;height:620px;float:left;overflow-y: auto;scrollbar-width: none;text-align:center;font-size:0.6em;}
#droite{width:74%;min-height:650px;margin-left:20%;margin-top:-30px;text-align:center;}
#engrand{max-width:95%;max-height:95%;margin:5px;box-shadow:2px 2px 5px black;text-align:center;margin-top:-20px;}
#monchoix{font-size:1em;}
#monmot{font-size:0.8em;color:black;font-weight:bold;border:0;background:white;}


/* ----------- LES THEMES (themes/themexx)------------------------------- */
#lesthemes{min-height:75vh;font-size:1.3em;}
#lesthemes .listingMinatures{height:170px;}
.diapo{width:280px;height:260px;text-align:center;vertical-align:middle;display:inline-block;margin:10px;box-shadow:2px 2px 5px black;}
.listingMinatures{width:90%;margin:10px auto;vertical-align: middle;display:inline-block;}
.listingMinaturesP{height:80%;margin:10px auto;vertical-align: middle;display:inline-block;}
.legende{font-family: 'carlito', sans-serif;font-size:0.8em;line-height:0.8em;color:gray;}


/* ----------- MON TABLEAU (motcles) ---------------------------------- */
.mon-tableau{border-collapse:collapse;box-shadow:5px 5px 50px gray;margin:10px 5px 30px 5px;}
.mon-tableau th,.mon-tableau td{padding:0.5em 0.5em 0.2em 0.5em;}
.mon-tableau tbody tr:nth-child(odd){background-color:#ccc;}
.mon-tableau tbody tr:nth-child(even){background-color:#eee;}
.mon-tableau thead{	background-image:linear-gradient(to bottom,#00aadd,#0088aa);color:white;border-right:1pt solid black;border-left:1pt solid black;}
.mon-tableau tbody td{border:1px solid black;border-style:none solid;}
.mon-tableau tbody{border-bottom:1pt solid black;border-right:1pt solid black;}
.mon-tableau .listingMinatures{width:90px;height:60px;border:1px solid blue;}
.mon-tableau .listingMinaturesP{height:90px;width:60px;border:1px solid red;}
/* ############################# vient de motscles *############################################### */
.mon-tableau {width:80%;}
.mon-tableau td,.mon-tableau input,.mon-tableau textarea {font-size:0.8em;}
.mon-tableau .petit{width:54px;display:inline-block;}
#listeMotsCles{position: fixed;left:calc(50% + 340px);top:14em;width:200px;}
#listeMotsCles textarea{font-size:0.8em;overflow-y: scroll;resize:none;box-shadow:1px 1px 5px gray;}
.mon-tableau .grand{width:85%;}

/* ----------- css spécifiques pour la PAGE D'ACCUEIL ----------- */
#zero .listingMinatures{height:180px;}
#une{min-height:420px;}

#deux img{width:700px;max-width:90%;box-shadow:2px 2px 2px black;margin-left:30px;}
#deuxBis{column-count: 2;}
#deuxBis h3{color:navy;margin-top:10px;}
.blanche{box-shadow:2px 2px 2px white;}
.noire{box-shadow:2px 2px 2px black;width:70%;margin:0 20px;float:left;}


/* -----------  la page de CONNEXION  ----------- */
#infosgauche{width:60%;display:inline-block;vertical-align:middle;}
#infosdroite{width:35%;;display:inline-block;padding:10px;}
#infosgauche input,#infosgauche textarea,#infosgauche select{font-size:1em;margin-bottom:5px;}
#courriel{width:400px;}
#infosgauche label{display: block; width: 150px;float: left;vertical-align:middle;}


/* ----------- PLANCHE (motcles / themexx) ------------*/
#planche{position:fixed;top:0;left:50%;margin:0 auto;margin-left:0px;width:0px; height:0px;	background:white;
	display:block;text-align:center;opacity:0;transition: all 0.5s;overflow:hidden;}


/* ################################################################################################################################################################ */
/* ###############################################################    ZONE DE TRAVAIL POUR MOBILE     ############################################################# */
/* ################################################################################################################################################################ */


@media only screen and (orientation: landscape) { /* s'applique à tous les dispositifs en mode paysage / horizontal */
	#droite{width:78%;margin-left:20%;}
	#engrand{width:100%;} 
	#limage{height:75vh;}
	/* l'écran moncompte */
	#infosgauche #annuler,#infosgauche #confirmer{width:49%;font-size:0.65em;height:2em;}
}

@media only screen and (orientation: portrait) 	{ /* s'applique à tous les dispositifs en mode portrait / vertical  */
	/*#entete{height:4em;} */
	#deuxBis{column-count: 1;} 
	#deux img{width:100%;} 
	#sousmenu li {width:31%;text-align:center;} 
	#limage{max-width:85vw;}
	/* l'écran moncompte */	
	#infosgauche{width:100%;}
	#infosdroite{width:100%;}
	#infosgauche input {display:inline-block;width:50%;}
	#infosgauche label {width:25%;}
	#infosgauche #annuler,#infosgauche #confirmer{width:49%;background:gray;color:white;font-size:0.65em;}
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.8) and (-webkit-max-device-pixel-ratio: 2.99){ /* telephones android basique JAUNE les ipads aussi,iphone11*/
	body{border-top:20px solid yellow;}
    html,#pied {font-size:24px;} 
	#entete{height:5.5em;}
	#menu{font-size:2.3em;}
    #ligneNoire{height:45px;font-size:35px;background:linear-gradient(to bottom left, black 70%, white);} 
	#ligneNoire a>img{height:50px;width:50px;}
    body,#pied,#ligneNoire{width:98%;}
	#petitPanier{font-size:0.75em;margin-top:2em;}
	/* l'écran moncompte */
	#infosgauche input {display:inline-block;width:70%;}
	#quigenre{width:3em;display:inline-block;}
	#infosgauche label {width:25%;}
	#lesthemes{min-height:75vh;font-size:1.1em;}
	
	#gauche{width:250px;}
	#droite{width:950px;}
	.miniatures{max-width:unset;width:200px;margin:5px;border-radius:5px;vertical-align:middle;box-shadow:1px 1px 5px black;}
	.miniaturesP{max-height:unset;width:130px;margin:5px;border-radius:5px;vertical-align:middle;box-shadow:1px 1px 5px black;}
	
	
	.legende{font-size:1em;margin-top:-10px;}
}

@media only screen and (-webkit-min-device-pixel-ratio: 3) { /*iphone 10,XS,12,13, samsung Oppo A95  VERT*/
	body{border-top:20px solid green;}
	html,#pied {font-size:35px;} 
	body,#pied,#ligneNoire{width:98%;}
	#entete{height:3.5em;}
	#menu{font-size:1.3em;}
	#ligneNoire{height:45px;font-size:35px;background:linear-gradient(to bottom left, black 70%, white);} 
	#ligneNoire a>img{height:50px;width:50px;}
	#petitPanier{font-size:1.2em;margin-top:1.3em;width:150px;margin-left:-135px;opacity:0.5;}
	article{font-size;1.4em;}
	.noire{box-shadow:2px 2px 2px black;width:100%;margin:10px 0px;}
	
	#gauche{width:250px;}
	#droite{width:950px;}
	.miniatures{max-width:unset;width:200px;margin:5px;border-radius:5px;vertical-align:middle;box-shadow:1px 1px 5px black;}
	.miniaturesP{max-height:unset;width:130px;margin:5px;border-radius:5px;vertical-align:middle;box-shadow:1px 1px 5px black;}
	
	.legende{font-size:0.5em;margin-top:0px;}
	
	/* l'écran moncompte */
	#infosgauche input {display:inline-block;width:70%;}
	#quigenre{width:3em;display:inline-block;}
	#infosgauche label {width:25%;}
	
	#menu li{margin-bottom:5px;} /* séparer un peu les lignes du menu */
	
	/* page motcles */
	.mon-tableau{width:74%}
	.mon-tableau .listingMinatures{width:210px;height:140px;border:1px solid blue;}
	.mon-tableau .listingMinaturesP{height:210px;width:160px;border:1px solid red;}
	.mon-tableau .petit{width:2em;}
	.mon-tableau input[type="checkbox"] {transform: scale(2);margin-left:15px;}
}




@media only screen and (-webkit-min-device-pixel-ratio: 1.8) and (orientation: portrait) {  /* telephones verticaux */
	.diapo{padding-top:20px;width:30%;height:300px;}
	/* page motcles */
	.mon-tableau{font-size:0.9em;}
	#listeMotsCles{position: fixed;left:75%;top:20em;}
	#listeMotsCles textarea{font-size:0.6em;}
	
	/* theme */
	#limage{width:100%;}
}
	
@media only screen and (-webkit-min-device-pixel-ratio: 1.8) and (orientation: landscape) { /* telephones horizontaux */
	.diapo{padding-top:20px;width:300px;height:250px;font-size:0.8em;}
	#gauche{height:50vh;}
	#limage{height:75vh;}
	#entete{height:250px;}
	#listeMotsCles{position: fixed;left:calc(50% + 560px);top:10em;}
	#listeMotsCles textarea{font-size:0.8em;overflow-y: scroll;resize:none;box-shadow:1px 1px 5px gray;}
}