/* ----------- Styles appliqués à l'affichage des Tarifs de Locations ---------*/

	@charset "utf-8";
		
	* {
		
		box-sizing: border-box;
	
		--blanc: #ffffff;
		--bleu_fonce: #3b5a78;
		--creme: #ffeecc;
		--gris_clair: #e7e7e7;
		--violet: #bd212d;
		--violet_clair: #c86b6b;
	}

	body {
		margin: 0px;
		padding: 0px;
		background-color: var(--creme);
		width: auto;
	}

	#contenu_tarifs {
		padding: 0px;
		width: 90%;
		font: normal 16px Arial, Helvetica, sans-serif;
		margin: auto;
		overflow: hidden;
	}

	.titre_page {
		width: 50%;
		text-align: center;
		font: bold 35px Arial, Helvetica, sans-serif;
		border: 1px solid transparent;
		color: var(--blanc);
		background: var(--violet_clair);
		margin: 40px auto 80px auto;
		line-height: 60px;
		border-radius: 20px;
	}

	.conteneur_tarifs {
		width: 90%;
		margin: auto;
	}

	.conteneur_tarifs p {
		font: bold 16px Arial, Helvetica, sans-serif;
		color: var(--bleu_fonce);
		padding: 50px 0px 50px 110px;
	}

	table.visu_tarifs {
		font: normal 16px Arial, Helvetica, sans-serif;
		border: 1px solid var(--violet);
		border-collapse: collapse;
		width: 90%;
		margin: 0px auto 0px auto;
		color: var(--violet);
		background-color: var(--gris_clair);
	}

	table.visu_tarifs th {
		border: 1px solid var(--violet);
		padding: 10px;
		text-align: center;
		line-height: 40px;
		color: var(--bleu_fonce);
	}

	.visu_tarifs td.titre {
		border: 1px solid var(--violet);
		color: var(--bleu_fonce);
		font-weight: bold;
		text-align: center;
		padding: 10px;
	}
		
	table.visu_tarifs td.data {
		border: 1px solid var(--violet);
		padding: 10px;
		font-weight: bold;
		text-align: center;
		min-width: 130px;
	}
	
	table#tarifs {
		margin-bottom: 50px;
	}

	
/*****************************************************/
/* Media Queries pour les ecrans inferieurs à 640 px */
/*****************************************************/


@media (max-width: 641px) {

		* {
			box-sizing: border-box;
		}
		
		/* passer body (et tous les éléments de largeur fixe) en largeur automatique */
		body {
			width: auto;
			height: auto;
			margin: 0px;
			padding: 0px;
		}
		
		/**********************************************************************************/
		/* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */
		/**********************************************************************************/
		img,    
		table,    
		td,    
		blockquote,    
		code,    
		pre,    
		textarea,    
		input,    
		iframe,    
		object,    
		embed,    
		video {
			max-width: 100%;
		}
		
		/*********************************/
		/* conserver le ratio des images */
		/*********************************/
		
		img {
			height: auto;
		}
		
		/**************************/
		/* gestion des mots longs */
		/**************************/
		
		textarea,
		table,
		td,
		th,
		code,
		pre,
		samp {
			hyphens: auto;
			word-wrap: break-word; /* passage à la ligne forcé */
		}
		
		code,
		pre,
		samp {
			white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
		}
		
		/************************************************************************/
		/* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */
		/************************************************************************/
		
		#contenu_tarifs {
			width: 100%;
			border: none;
			margin: auto;
		}
		
		.conteneur_tarifs {
			width: 100%;
			padding: 0px 5px 0px 5px;
			min-height: auto;
			margin: 0px;
			border-right: none;
		}
		
		.conteneur_tarifs p {
			padding: 50px 0px 50px 10px;
		}
				
		.titre_contenu {
			width: 100%;
		}
		
		.titre_page {
			width: 90%;
			padding: 10px;
			margin: 50px auto 50px auto;
		}
	
/*------------------------------ Tableau des Tarifs --------------------------*/

    table.visu_tarifs td:before { 
      content: attr(data-title);       
    }
      
    .visu_tarifs table,   
    .visu_tarifs th, 
    .visu_tarifs td, 
    .visu_tarifs tr { 
      display: block; 
    }

		table.visu_tarifs {
			width: 90%;
		}
		
    table.visu_tarifs th { 
      display: none;
    }

		.visu_tarifs td.titre {
			text-align: left;
			padding-left: 20px;
      padding-top: 20px;
		}
			
		table.visu_tarifs td.data {
			text-align: right;
			padding-right: 30px;
		}
		
    table.visu_tarifs td:first-child {
    }

		/* gestion des bordures avec l'id des tableaux pour les supprimer */		
    table#tarifs td {
			border: none;
    }
		
    table#periodes td {
			border: none;
    }