/* Styles par défaut (portrait) */
.app { padding: 16px; }

/* En paysage */
@media (orientation: landscape) {
  .app { display: grid; grid-template-columns: 1fr 2fr; gap: 16px; }
}

/* En portrait : optionnel, on affiche un bandeau qui invite à pivoter */
.rotate-hint { display: none; }
@media (orientation: portrait) {
  .rotate-hint {
    position: fixed; inset: 0;
    display: grid; place-items: center;
    background: rgba(0,0,0,.75); color: #fff;
    padding: 2rem; text-align: center;
    /* gère les encoches (iPhone) */
    padding-left: calc(1rem + env(safe-area-inset-left));
    padding-right: calc(1rem + env(safe-area-inset-right));
    padding-top: calc(1rem + env(safe-area-inset-top));
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  }
}

/* Configuration des sections de pages */

html {
	width: 100vw;
	height: 100vh;
	/*overflow:hidden; */
}

body{
	height: 98%;
	width: 98%;
	/* overflow:hidden; */
	background-image:linear-gradient(white,rgba(0,0,0,0.7));
}

p,h1,h2,h3,h4,h5,h6,li, button, label{
	font-family:arial;
	color:black;
}

.texte_blanc {
	color:white;
}

.pas_de_marges{
	margin:0;
}

.centrer{
	margin:auto;
	text-align:center;
}

.bordures_noires{
	border:1px solid black;
}

.inline_block{
	display:inline-block !important;
}

#global {
	display:block;
	margin:auto;
	padding:0;
	width:96%;
	height:96vh;
}

#menu{
	display:inline-block;
	height:6vh;
	width:100%;
	margin-bottom:10px;
	vertical-align:top;
}

.quitter_admin{
	background-color:red !important;
	color:yellow !important;
}
	
#menu_voiture{
	display:inline-block;
	height:6vh;
	width:60%;
	margin-bottom:10px;
	vertical-align:top;
}

#menu_calendrier{
	text-align:right;
	display:inline-block;
	height:6vh;
	width:38%;
	margin-bottom:10px;
	vertical-align:top;
	float:right;
}

#en-tete{
	height:12vh;
	width:100%;
	margin:auto;
	text-align:center;
}

#pied-de-page{
	display:flex;
	height:2vh;
	width:100%;
	margin-top:10px;
}

#contenuIndex{
	display:block;
	width:100%;
	height:77vh;
}

#contenu_resa_admin{
	display:block;
	width:100%;
	height:72vh;
	overflow:auto;
}

.en_tete_calendrier{
	display: block;
    width: 100%;
}

.calendrier{
	display: block;
    width: 100%;
	height:100%;
	overflow-y:auto;
}

.cellule_en_tete{
	display: inline-block;
    border: 1px solid black;
    width: 15.5%;
	margin:auto;
    vertical-align: top;
    text-align: center;
    font-size: 1.5vh;
	height:2vh
}

.cellule_en_tete_date{
	display: inline-block;
    border: 1px solid black;
    width: 5%;
	margin:auto;
    vertical-align: top;
    text-align: center;
    font-size: 1.5vh;
	height:2vh
}

.cellule_vide{
	display: inline-block;
    width: 48%;
    height:98%;
	margin:auto;
	cursor:pointer;
	font-size:1.2vh;
	background-color: white;
	vertical-align: top;
}

.petitBouton{
	display:inline-block;
	vertical-align:top;
	width:6vw;
	padding:4px;
	background-color:#00447A;
	color:white;
	border-radius:15px;
	box-shadow: 6px 6px 6px black;
	font-size:1vw;
	font-family:arial;
	margin:auto;
	margin-top:3px;
	cursor:pointer;
}

.boutonPlus{
	display:inline-block;
	vertical-align:top;
	width:4vw;
	padding:4px;
	background-color:#00447A;
	color:white;
	border-radius:15px;
	box-shadow: 6px 6px 6px black;
	font-size:1.1vw;
	font-family:arial;
	margin:auto;
	margin-top:3px;
	cursor:pointer;
}

.bouton_valider{
	display:inline-block;
	vertical-align:top;
	width:20vw;
	padding:4px;
	background-color:yellow;
	color:red;
	border-radius:15px;
	box-shadow: 6px 6px 6px black;
	font-size:1.1vw;
	font-family:arial;
	margin:auto;
	margin-top:3px;
	cursor:pointer;
	animation-duration: .8s;
	animation-name: clignoter;
	animation-iteration-count: infinite;
	transition: none;
}

@keyframes clignoter {
  0%   { opacity:1; }
  40%   {opacity:0.2; }
  100% { opacity:1; }
}

.bulle_reservation {
	display:none;
	position:absolute;
	background-color:rgba(255,255,255,0.9);
	border:1px solid black;
	border-radius:15px;
	width: 12vw;
    padding: 5px;
	margin-left:2vw;
}

.utilisateur_connecte{
	font-size: 2.2vh;
    margin: 0;
	width:49%;
	height:100%;
	vertical-align:top;
}

.legende{
	width:49%;
	height:100%;
	vertical-align:top;
	text-align:center;
}

.cellule_legende {
	display:inline-block;
	width: 18% !important;
    height: 90% !important;
	font-weight:bold;
	font-size:1.5vh !important;
	vertical-align:top;
}

.demi_pied{
	display:block;
	width:100%;
	height:49%;
}

/* Configuration pour les PCs et tablette en paysage */
@media (orientation: landscape)
  and (min-width: 1200px)
{
	.titre{
		margin:0;
	}
	
	.bouton{
		display:inline-block;
		vertical-align:top;
		width:11vw;
		padding:4px;
		background-color:#00447A;
		color:white;
		border-radius:15px;
		box-shadow: 6px 6px 6px black;
		font-size:1.1vw;
		font-family:arial;
		margin:auto;
		margin-top:3px;
		cursor:pointer;
	}
}


/* Configuration pour les téléphones */
@media (orientation: landscape)
  and (max-width: 899px)
  and (max-height: 480px)
  and (hover: none) and (pointer: coarse)
{ 
	.titre{
		margin:0;
		font-size: 5vh;
	}
	
	.bouton{
		display:inline-block;
		vertical-align:top;
		width:12vw;
		padding:4px;
		background-color:#00447A;
		color:white;
		border-radius:15px;
		box-shadow: 6px 6px 6px black;
		font-size:1.5vw;
		font-family:arial;
		margin:auto;
		margin-top:3px;
		cursor:pointer;
	}
}