/* -----------------------Styles appliqués au Calendrier ---------------------*/

@charset "utf-8";

* {
    box-sizing: border-box;

		--beige: #fee27f !important;
		--blanc: #ffffff !important;
		--bleu: #0000ff !important;
		--bleu_fonce: #11286c !important;
		--bleu_pale: #5f9eff !important;
		--brun: #b77e4b !important;
		--creme: #ffeecc !important;
		--marron: #752000 !important;
		--noir: #000000 !important;
		--olive: #75742c !important;
		--rouge: #ff0000 !important;
		--vert_clair: #01f701  !important;
		--vert_fonce: #059c46 !important;
		--violet: #c7274f !important;

}

html {
  margin: 0px !important;
  padding: 0px !important;
}

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

.clear {
	clear: both;
}

#conteneur_calendrier {
	width: 95%;
  max-width: 950px;
  margin: auto;
}

/*---------------- Titre du Calendrier ---------------------------------------*/

#titre {
  font: bold 16px Arial, Helvetica, sans-serif;
  text-decoration: none;
	color: var(--creme);
	background-color: #cc3333;
	text-align: center;
	margin: 20px auto 0px auto;
  width: 95%;
  line-height: 30px;
	border-radius: 5px;
}

/*------------------------- Choix des Villas ----------------------------------*/

#choix_villa {
	display: flex;
	justify-content: center;
  font: normal 15px Arial, Helvetica, sans-serif;
  color: var(--marron);
	width: fit-content;
  margin: 15px auto 0px auto;
}

#choix_villa .item label {
  font-weight: bold;
  height: 30px;
  padding-right: 10px;
}

select#nom_location, select#an_res {
  font: normal 14px Arial, Helvetica, sans-serif;
  height: 35px;
  cursor: pointer;
  text-align: center;
  margin: 0px 40px 0px 0px;
	background-color: var(--blanc);
	color: var(--noir);
	border-radius: 10px;
}

select#nom_location {
  width: 210px;
}

select#nom_location option[data-etat='desactive'] {
	background-color: var(--rouge);
	color: var(--blanc);
}

select#an_res {
  width: 80px;
}

/*---------------- Bouton de Validation du Choix d'un Gite -------------------*/

input.submit {
  background-color: var(--bleu_pale);
  color: var(--blanc);
  height: 30px;
  width: 40px;
  font: bold 13px Arial, Helvetica, sans-serif;
  cursor: pointer;
  border: solid 1px var(--bleu);
  border-radius: 10px;
}

input.submit:hover {
  background-color: var(--beige);
  color: var(--marron);
  border: solid 1px var(--noir);
}

/*---------------- Types des Périodes ----------------------------------------*/

.conteneur_periodes {
  margin: 10px;
}

.ligne_types_periodes {
  font: normal 12px Arial, Helvetica, sans-serif;
  color: var(--noir);
  width: 80%;
  margin: auto;
  display: grid;
  grid-gap: 10px 20px;
}

.grid_Visiteur {
  grid-template-columns: repeat(3, 1fr);
}

.grid_Administration {
  grid-template-columns: repeat(4, 1fr);
}

.types_periodes {
  text-align: center;
	line-height: 25px;
}

.cube_periode {
  width: 30px;
  height: 15px;
  display: inline-block;
  vertical-align: middle;
}

.intitule_periode {
  padding-left: 10px;
  display: inline-block;
  width: 120px;
	text-align: left;
}

/*---------------- Affichage du Calendrier -----------------------------------*/

#contenu_calendrier {
  margin: auto;
  text-align: center;
}

#calendrier li {
	list-style: none;
}

.mois_calendrier {
  display: inline-block;
  width: 230px;
  height: 150px;
  padding: 0px 10px 0px 10px;
  background-color: var(--creme);
	font-family: Arial, Helvetica, sans-serif;
}

.titre_mois {
/* le nom du mois */
  font: bold 13px Arial, Helvetica, sans-serif;
	line-height: 30px;
	color: var(--vert_fonce);
  text-align: left;
  padding-left: 15px;
}

.libelle {
/* ligne en haut des jours de la semaine */
	width: 210px;
	margin: auto;
	padding: 0px;
	color: #34254a;
	text-align: center;
}

.libelle li {
/* ligne des jours de la semaine - L M M J V S D - */
	float : left;
	width : 30px;
	font-size: 12px;
	background-color: var(--bleu_fonce);
	color: var(--creme);
  list-style-type: none;
}

.ligne {
/*  ligne de 7 jours (semaine) */
	width: 210px;
	margin: auto;
	padding: 0px;
	font-size: 12px;
	text-align: center;
}

.ligne li {
/*   numéro de jour de chaque ligne */
	float : left;
	width : 30px;
  list-style-type: none;
  line-height: 15px;
}

li.aujourdhui, .aujourdhui {
	/* l'apparence de la date du jour */
	background-color: var(--vert_fonce);
	color: var(--blanc);
	font-weight: bold ;
  list-style-type: none;
}

li.option, li.libre, li.reserve, li.bloque_visiteur, li.bloque {
  list-style-type: none;
  font-weight: bold;
}

.libre {
	/* date libre */
	background-color: var(--creme);
  color: var(--marron);
}

.option {
	/* date en option */
	background-color: var(--bleu);
	color: var(--creme);
}

.reserve, .bloque_visiteur {
	/* date en état reservé */
	background-color: var(--violet);
	color: var(--creme);
}

.bloque {
	/* date en bloquée */
	background-color: var(--rouge);
	color: var(--creme);
}

.bloque_abritel{
	background-color: var(--brun);
	color: var(--creme);
}

.bloque_airbnb{
	background-color: var(--olive);
	color: var(--creme);
}

        /*****************************************************/
        /* Media Queries pour les écrans inférieurs à 540 px */
        /*****************************************************/


@media (max-width: 590px) {

    /* passer body (et tous les éléments de largeur fixe) en largeur automatique */
    body {
      min-width: 240px;
      width: auto;
    }

    /**********************************************************************************/
    /* 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 */
    }

    /**********************************/
    /* masquer les éléments superflus */
    /**********************************/

    .hide_mobile {
        display: none !important;
    }

    #conteneur_calendrier{
      width: auto;
    }

/*-------------------------- Choix des Villas --------------------------------*/

    #choix_villa {
			flex-direction: column;
			gap: 10px 0px;
			margin-bottom: 20px;
     }

    #choix_villa input {
      margin: initial;
    }

/*-------------------------- Types des Périodes ------------------------------*/

		.ligne_types_periodes {
			grid-template-columns: repeat(3, 1fr);
			width: initial;
		}

    .intitule_periode {
			line-height: 20px;
			text-align: center;
			display: block;
			width: auto;
    }

		.types_periodes:last-child .intitule_periode {
			text-align: center;
		}
		
} /* fin @media */

          /******************************************************/
          /* Réduire de façon harmonieuse toutes les tailles    */
          /* de polices en orientation paysage                  */
          /******************************************************/

@media (max-device-width:768px) and (orientation: landscape) {

    html {
     -webkit-text-size-adjust: 100%;
    }

} /* fin @media */