/* ------- Polices spécifiques  --------*/

@font-face 
{
    font-family: 'dkpisang';    
    src: url('../fonts/dk_pisang-webfont.woff2') format('woff2'),
		url('../fonts/dk_pisang-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face 
{
    
    font-family: 'florida';
    src: url('../fonts/florida-webfont.woff2') format('woff2'),
         url('../fonts/florida-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* ---------- Styles ----------------- */
*, *:before, *:after 
{
    box-sizing: inherit;
}



body
{
	background-color:  rgb(21, 37, 63); /* couleur de fond noir */
	/*background-image: url("../img/fond_body.png");
	background-repeat: repeat-y;*/
	/* line-height:1; */
	font-size:14pt;
	letter-spacing:1px;
}

/* bandeau supérieur (conteneur logo OTempo) */
.header
{	
	background-image: url("../img/fond_body.png") no-repeat;
	z-index:1;
    position: fixed;
	height:145px;
	width: 100%;
	padding-top: 10px;
	padding-bottom: 10px;
}

/* image en haut de page (vague) */
.divImgHeader
{
	position:absolute;
	z-index:1;
	top:0px;    
	left: 0px;
	height:130px;
	width:100%;
	background: url("../img/header.png") no-repeat;
	background-size:100% 100%;
}

/* image en bas de page (vague) */
.divImgFooter
{
	position:absolute;
	z-index:1;
	bottom:0px;    
	left: 0px;
	height:120px;
	width:100%;
	background: url("../img/footer.png") no-repeat;
	background-size: 100% 100%;
}

.fondFooter
{
    height: 80px;
    width: 100%;
    position: fixed;
    overflow: auto;
    white-space: nowrap;
    margin: 30px 15px 0px 15px;
    left: 0px;
    bottom: 0px;
    cursor: default;
    position: fixed;
    z-index: 1;
    overflow: auto;
}

/* Logo OTempo */
.logo
{
	position: fixed;
	width: 100px;
	/*left: calc(50% - 60px);*/
	left:10px;
	top:10px;	
}

.logoFestival
{
	margin-top:0px;
	width:90%;
	max-width: 350px;
}

.center
{
	text-align: center;  
}

/* bloc titre de page : texte (salé, sucré, etc.) et fond blanc arrondi */
.titre
{
    width: 100%;
	position: fixed;
    margin: 100px 15px 0px 15px;		/* marges : haut = hauteur du logo, bas = hauteur du menu + marges*/
    max-width: calc(100% - 2em);
	text-align:center;
}


table
{
	width:100%;
}

.separateurGauche, .separateurDroite
{
	width:45%;
}

.separateurCentre
{
	color:white;
	font-family:florida;				
	font-size:16pt;
	text-align:center;
}

.separateur
{
	font-family:florida;				
	font-size:16pt;
	background-color:rgb(255, 75, 164); /* rose */
	height:3px;
}

.sousTitreAccueil
{
	color: white;
	text-align:center;
	font-family:dkpisang;					
}

.logos
{
	margin:15px;
	text-align: center;
	margin-left:auto;
	margin-right:auto;
}

/* ------------- LOGOS PARTENAIRES --------------- */
.imgPartenaire1, .imgPartenaire2, .imgPartenaire3
{
	margin-left:10px;
	margin-right:10px;
	width:auto;
	margin-top:15px;
}
.imgPartenaire1
{
    max-height: 50px;
    max-width:90px;
}
.imgPartenaire2
{
    max-height: 30px;
    max-width:90px;
}
.imgPartenaire3
{
    max-height: 50px;
    max-width:90px;
}


/* bloc scrollable */
.wrapper 
{
    padding: 175px 15px 100px 15px;		/* marges : haut = hauteur du logo+titre, bas = hauteur du menu + marges*/
    width: 100%;
	max-width: calc(100% - 1.5em);
}

/* Contenu de la page */
#main 
{
    position: relative;
    overflow: hidden;
    width: 100%;
	padding-bottom: 120px;		/* marge inférieure pour pouvoir voir tout le contenu malgré la vague */
	/*max-width:400px;*/
}

/* Titre de page (ex : sucre, sale) */
h2
{
	color:white;					/*couleur du texte = blanc*/
	text-transform:uppercase;		/*force le texte en majuscule*/
	margin-left:15px;
	Margin-top:10px;
	font-family: 'florida';
	font-size:24pt;
	line-height:0.5;
}

.col, .col-auto
{
	line-height: 100%;
}

.row
{
	margin-top:3px;
}

/* ---------- FOOD TRUCKS --------------- */
/* bloc complet du stand */
.stand
{
	margin-bottom:20px;
}

/* bloc de la ligne produit (libelle, description, prix, etc.) */
.produit
{	
	margin-left:5px;
}

/* libellé du stand */
.libelleStand
{
	width:200px;
	color:rgb(255, 75, 164);
	margin-left: auto;
	margin-right: auto;
	font-family:dkpisang;	
	font-weight:bold;				
	font-size:16pt;
	text-align:center;
	text-transform:uppercase;				/*force le texte en majuscule*/
	padding-top:2px;
	/*margin-bottom:15px;*/
}

.categorieProduit
{
	text-transform:uppercase;				/* force le texte en majuscule*/
	font-family: dkpisang;
	font-weight:bold;
	color:rgb(37,165, 199); 				/* couleur du texte (bleu)*/	
}

/* libellé produit & boisson */
.libelleProduit, .libelleBoisson, .libelleSousProduit
{
	text-transform:uppercase;				/* force le texte en majuscule*/
	font-family: dkpisang;
	font-weight:bold;
}
.libelleProduit, .libelleSousProduit
{
	color:rgb(37,165, 199); 				/* couleur du texte (bleu)*/
}
.libelleBoisson
{
	color:rgb(37,165, 199);			/* couleur du texte (bleu)*/
}

.libelleSousProduit::before
{
	content: "• ";	
}


.libelleBoisson::before
{
	content: "   ";	
}

/* Description du produit*/
.descriptionProduit
{
	font-family: dkpisang;
	font-size:10pt;
	color:rgb(255,255,255);					/* couleur du texte (blanc)*/
}

.decalage
{
	margin-left:5px;
}

/* Prix du produit */
.prix
{
	color:rgb(254,239,88);					/* jaune */
	font-family: dkpisang;
	padding-right:10px;	
	/*padding-top: 5px;*/
	/*text-transform:uppercase;*/				/* force le texte en majuscule*/
	min-width:50px;
	letter-spacing:1px;
	display: inline-block;
	text-align:right;
}

.precisionPrix
{
	font-family:dkpisang;
	font-size:8pt;	
	font-weight:normal;
	text-transform:none;
}

/* Prix boisson */
.boisson
{		
    display: inline-block;
    width:35px;	
    text-align: right;
	padding-right:0px;	
}

/* icone vege */
.vege
{	
	background: url("../img/vege.png") no-repeat ; 
	background-size:10px;	
	background-position: top 4px left;
}

/* ---------- BANDEAU MENU -------------- */
/* Blocs de bas de page*/
#nav {
    text-align: center;
    cursor: default;
    position: fixed;
    z-index: 1;
    overflow: auto;
    white-space: nowrap;
}

/* Bandeau de menu en bas de page */
.menu
{
	width: calc(100% - 30px);
	background-color: white;			/* couleur de fond : blanc*/
	border-radius: 60px;				/* arrondi */
	margin: 30px 15px 15px 15px;
    height: auto;
	left:0px;
    bottom: 0px;
}


/* éléments du menu de navigation*/
.itemMenu, .itemMenu:hover
{
	width:40px;	
	font-family: 'florida';
	font-size:8pt;
	color:rgb(255, 75, 164);				/*couleur du texte = rose*/
	text-decoration:none;
	text-transform:uppercase;
	text-align:center;	
	position: relative;
    display: inline-block;
    outline: 0;
    padding: 5px;
    text-decoration: none;
}

/* icone des éléments du menu de navigation */
.imgMenu
{
    height: 30px;
	width:auto;
}

/* -------------- PROGRAMMATION --------------- */
/* bloc jour de programme : titre + détail */
.jourProg
{
    text-align: center;
	margin-bottom: 30px;
}

/* titre du programme dun jour */
.titreJour
{
	/*width:140px;*/
	color:rgb(255, 75, 164);				/* rose */
	margin-left: auto;
	margin-right: auto;	
	font-family:dkpisang;	
	font-weight:bold;
	font-size:16pt;	
	text-align:center;
	text-transform:uppercase;				/*force le texte en majuscule*/
	padding-top:2px;			
	/*margin-bottom:15px;*/
}

/* sous titre du programme d'un jour (=ouverture/fermeture village) */
.sousTitreJour
{
	text-align:center;		
	color: rgb(254,239,88); 	/* jaune */
	margin: 5px;
	margin-right: auto;
	font-family:dkpisang;	
	text-align:center;
	text-transform:uppercase;				/*force le texte en majuscule*/
	border-style: none;
}

.ligneArtisteProg
{
	text-align:center;	
}

.scene, .horaire
{
	border-radius: 15px;						/* arrondi */
	padding:1px;
	width:100px;	
	font-family:dkpisang;					
	font-size:8.5pt;
	color:white;
	text-align:center;
	border-style: none;
	display: inline-block;
	padding-top: 2px;
}

.scene1
{
	color:rgb(37, 165, 199);	/* bleu */
	font-weight:bold;
}
.scene2
{
	color: rgb(255, 75, 164);		/* rose*/
	font-weight:bold;		
}

/* horaire programmation */
.horaire
{
	background-color:white;				/* couleur de fond : blanc */
	color:black;
	width:40px;		
	text-transform:uppercase;				/*force le texte en majuscule*/
	font-weight:bold;
}

/* nom artiste programmation */
.artiste
{
	color:white;
	font-family: dkpisang;
	font-size:14px;
	display: inline-block;
	width:110px;	
	text-align:left;
	margin:3px;					
	padding:3px;
	font-weight:bold;
}

/* -------------  + D'INFORMATIONS ------------- */
/* bloc d'info : titre + détail repliable*/
.blocInfo
{
    margin-bottom:20px;
    text-align: center;
}

/* titre pour deplier/replier le detail*/
.btnDepliant
{
	text-align:left;	
	margin-left: auto;
	margin-right: auto;
	margin-bottom:10px;
	font-family:dkpisang;	
	font-weight:bold;
	width:160px;
	background-color:transparent;
	color:rgb(37, 165, 199); 	/* bleu */
	text-transform:uppercase;				/*force le texte en majuscule*/
	margin-top:2px;
	border-style:none;
	border-bottom: rgb(37, 165, 199); 	/* bleu */
    border-bottom-style: solid;
    border-radius: 0;
}

.btnDepliant::before
{
	content: "> ";	
}

/* bloc repliable */
.divDepliant
{
    text-align: center;
}

.ligneInfo
{
	color:white;
	font-family: dkpisang;
	margin-left: 10px;
	margin-right: 10px;	
}

.sousTitreLigneInfo
{
	font-family: dkpisang;
	font-weight:bold;
	color:rgb(255, 75, 164)		/* rose */
}

.imgCashless
{
	max-height:150px;
	margin-bottom: 10px;
}

.rubriqueInfo
{
	color: rgb(254,239,88);			/* couleur : jaune */
	text-transform:uppercase;		/*force le texte en majuscule*/
}

/* bouton rond bleu*/
.btnBleu, .btnBleu:hover, .btnRose, .btnRose:hover, .btnjaune, .btnjaune:hover
{
	text-align:center;	
	border-radius: 10px;						/* arrondi */
	padding: 2px 10px;
	color:white;
	text-align:center;
	border-style: none;
}

.btnBleu
{
	background-color:rgb(37, 165, 199);		/* couleur de fond : bleu */
}
.btnRose
{
	background-color:rgb(255, 75, 164);		/* couleur de fond : rose */
}
.btnjaune
{
	background-color:rgb(254,239,88);		/* couleur de fond : jaune */
}

.rose
{
	color: rgb(255, 75, 164);		
}
.roseClair
{
	color:rgb(255,153,204);	
}
.bleu
{
	color:rgb(37, 165, 199);
}
.jaune
{
	color:rgb(254,239,88);	
}

/* --------------- ICONS ------------ */
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 48
}