@charset "UTF-8";
/*
--- Sommaire
section calendrier
  - couleur arrière plan calendrier
  - bordure



arrière plan
  - couleur de fond titre
  - couleur de fond du calendrier
  - couleur de font mensuel
  - couleur de fond jour du mois

quadrillage
  - couleur du quadrillage
  - épaisseur trait
  - padding
  - margin
  - coin arrondie


année
- couleur police annuel
- police annuel 
- taille police 

mois
- couleur police mensuel
- police mensuel
- taille police 
jour de la semaine
- couleur police hebdomadaire
- police hebdomadaire
- taille police 
jour du mois
- couleur police jour du mois
- police jour du mois
- taille police 

*/
/*      ---      POLICE   ---        */
/*   ---   Couleur des Fonds    ---   */
/*cadrillage et BORDURE*/
/*
$bordure_du_tableau = 0 ;
$couleur_bordure_tableau = "#08599C" ;
$hauteur_mini_cellule_date = 19 ;
$largeur_mini_cellule_date = 18 ;
$largeur_tableau = 170 ;
$avec_affichage_numero_semaine = true ;

*/
/*
$couleur_nom_numero_semaine = "#0071C6" ;
$couleur_numero_semaine = "#0071C6" ;
$couleur_jour_semaine = "#0071C6" ;
$couleur_nom_jour_week_end = "#0071C6" ;
$couleur_jour_week_end = "#0071C6" ;
$bordure_ligne_fin_semaine = 1 ;
$couleur_ligne_fin_semaine = "#FF0000" ;
$avec_continuite_couleur = true ;
$couleur_fond_mois = "#0071C6" ;
$url_image_fond_mois = "template_cal/bleu_gendarme/bleu-cyan-grand.png" ;
$alignement_horizontal_image_fond = "center" ;
$alignement_vertical_image_fond = "center" ;
$couleur_libre = "#0071C6" ;
$avec_marquage_du_jour_d_aujourd_hui = false ;
$couleur_jour_aujourd_hui = "#0D96FF" ;
$url_image_fond_cellule = "template_cal/bleu_gendarme/bleu-cyan-grand.png" ;
$url_image_fond_cellule_week_end = "template_cal/bleu_gendarme/bleu-cyan-grand.png" ;
$url_image_fond_cellule_nom_jour = "template_cal/bleu_gendarme/bleu-cyan-grand.png" ;
$url_image_fond_cellule_numero_semaine = "template_cal/bleu_gendarme/bleu-cyan-grand.png" ;
$couleur_bordure_cellule_non_vide = "#96957E" ;
$largeur_bordure_superieur = "0" ;
$largeur_bordure_inferieur = "1" ;
$largeur_bordure_gauche = "0" ;
$largeur_bordure_droite = "0" ;
$avec_bordure_cellule_num_jour = true ;
$avec_bordure_cellule_texte_jour = true ;
$avec_bordure_cellule_numero_semaine = true ;
$avec_bordure_cellule_nom_mois = true ;
$avec_bordure_cellules_vides = true ;
$url_image_fond_cellule_aujourd_hui = "" ;


$largeur_sel_mois_annee = "60" ;
$taille_police_sel_mois_annee = "16" ;
$couleur_sel_mois_annee = "#000000" ;

$couleur_fond_page_visiteur  = "#FFFEFC" ;
$espace_entre_cellule = 0  ;
$espace_entre_les_mois = 3  ;

$texte_jour_debut_calendrier_tous = "samedi" ;
$nombre_semaine_calendrier_tous = 6 ;
$offset_depart_calendrier_tous = -7 ;
$nombre_jour_avance_recul_calendrier_tous = 14 ;
$couleur_separateur_calendrier_tous = "#ADCFF2" ;




$choix_modele = "bleu_gendarme" ;

$espace_dans_cellule = 1 ;
$decalage_ligne = "0" ;
$avec_selection_champs_date_visteur = false ;


*/
body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-color: transparent;
  width: 100vw;
  height: 98vh;
}

#full-calendrier {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: auto;
  padding: 5px;
  padding-bottom: 10px;
  background-color: rgb(233, 226, 211);
  border: solid 1px rgb(208, 199, 184);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
}

.cal-titre {
  background-color: red;
  background-color: rgba(0, 0, 0, 0);
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding-top: 1px;
  padding-bottom: 1px;
}

.call-aside {
  display: none;
  flex-direction: row;
  justify-content: center;
  width: 75px;
  height: 10vh;
  background-color: rgba(221, 11, 11, 0);
}

.calendar-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  width: 100%;
  height: 100%;
  background-color: rgb(246, 242, 234);
  justify-content: center;
  gap: 1px;
  padding: 10px;
  margin-top: 10px;
}
.month-block {
  width: 280px;
  height: 280px;
  min-width: 280px;
  min-height: 280px;
  background-color: rgb(248, 245, 239);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  vertical-align: middle;
  margin-top: 5px; /* Réduire l'espace au-dessus du nom du mois */
  margin-bottom: 5px; /* Réduire l'espace en dessous du nom du mois */
  text-align: center; /* Assurez-vous que le texte est centré */
  margin: 5px;
  padding: 10px; /* Ajustez le padding intérieur autour de la table */
}
@media screen and (max-width: 1600px) {
  .month-block {
    width: 220px;
    height: 220px;
    min-width: 220px;
    min-height: 220px;
  }
}

.month-block {
  border: 1px solid rgb(212, 204, 191);
  border-radius: 12px;
}

.month-block h5 {
  margin-top: 0.1em;
  margin-bottom: 0.1em;
}

.tableday {
  background-color: rgba(0, 0, 0, 0);
  width: 100%;
  height: 80%;
}

tbody {
  border-top: rgb(212, 204, 191) solid 1px;
  border-radius: 12px;
}

.tableday,
tbody,
td,
th,
tr {
  border-bottom: rgb(212, 204, 191) solid 1px;
  border-left: rgb(212, 204, 191) solid 1px;
}

.dayOfWeek {
  height: 26.6666666667px;
  color: rgb(42, 41, 38);
}

table {
  /* ... autres styles ... */
  border-collapse: collapse;
}
table td {
  padding: 0em;
  table-layout: fixed;
  color: rgb(34, 33, 31);
}

tr {
  height: 40px;
  width: 26.6666666667px;
  border-bottom: rgb(212, 204, 191) solid 1px;
  border-left: rgb(212, 204, 191) solid 1px;
  border-right: rgb(212, 204, 191) solid 1px;
}

th {
  border-bottom: rgb(212, 204, 191) solid 1px;
  border-left: rgb(212, 204, 191) solid 1px;
  font-size: 0.8em;
  width: 26.6666666667px;
  height: 40px;
}

.thHebdo {
  color: rgb(110, 103, 93);
  background-color: rgba(0, 0, 0, 0);
}

#cal-central {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 85%;
}

.largeurLigne {
  border-bottom: solid black 2px;
}

.occuper {
  background-image: linear-gradient(to top right, #d9b2a6 50%, transparent 50%);
  background-image: linear-gradient(to bottom left, #d9b2a6 50%, #d9b2a6 50%);
}

.fermer {
  background-color: gray;
}

.endClose {
  background-image: linear-gradient(to top right, gray 50%, transparent 50%);
}

.onClose {
  background-image: linear-gradient(to bottom left, gray 50%, transparent 50%);
}

.am {
  background-image: linear-gradient(to top right, #d9b2a6 50%, transparent 50%);
}

.pm {
  background-image: linear-gradient(to bottom left, #d9b2a6 50%, transparent 50%);
}

.turnOver {
  background-color: #d9b2a6;
  background-image: linear-gradient(45deg, transparent 48%, rgba(255, 255, 255, 0.95) 48%, rgba(255, 255, 255, 0.95) 52%, transparent 52%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.jour {
  font-size: 0.8em;
}

.weekSam {
  color: rgb(47, 45, 42);
}

.weekDim {
  color: rgb(47, 45, 42);
}

.jourSemaine {
  color: rgb(58, 56, 52);
}

.samJour {
  color: rgb(47, 45, 42);
}

.dimJour {
  color: rgb(47, 45, 42);
}

.cal-push1 {
  display: block;
  background-color: rgba(255, 0, 0, 0);
  color: rgb(58, 56, 52);
  margin: 10px;
  width: 30px;
  height: 30px;
}

.other-month {
  visibility: visible;
  color: rgb(176, 168, 155);
}

.titreAnnee {
  color: rgb(95, 88, 79);
}

.cal-push2 {
  display: none;
  background-color: purple;
}

.cal-push3 {
  display: none;
  background-color: blue;
}

.cal-push4 {
  display: none;
  background-color: green;
}

.trHebdo {
  background-color: rgba(17, 0, 255, 0.643);
}

.thHebdo {
  display: table-cell;
}

.week-number {
  display: table-cell;
  color: rgb(110, 103, 93);
  background-color: rgb(241, 236, 227);
}

.embouthaut {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.emboutbas {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.affYear {
  display: none;
  color: rgb(122, 114, 103);
}

.affMonth {
  color: rgb(31, 30, 28);
}

/*------------------------------------------------------*/
.dayOfWeek {
  color: rgb(42, 41, 38);
}

tr,
td {
  width: 34px;
  height: 18px;
}

h5 {
  color: rgb(31, 30, 28);
  font-size: 1em;
  padding-bottom: 5px;
}

td {
  font-size: 0.75em;
}

.nbweek {
  color: red;
}

/* flex_cal.css */
.navigation-container {
  text-align: center;
  margin: 10px 0;
}

.navigation-container button {
  padding: 5px 10px;
  margin: 0 5px;
  cursor: pointer;
}

.calendar-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

.year-nav,
.month-nav {
  display: flex;
  align-items: center;
}

.year-label,
.month-label {
  font-size: 1.2em;
  margin: 0 10px;
}

.month-nav {
  display: none; /* Cachez ceci par défaut et affichez-le via JavaScript si nécessaire */
}

.form-calendar {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 0px;
  color: black;
}

.fcannee {
  background-color: rgba(0, 0, 0, 0);
  font-size: 1em;
}

.fcmois {
  background-color: rgba(0, 0, 0, 0);
  font-size: 1em;
}

.arrow {
  font-size: 27px;
}

.hauteurCase1l {
  font-size: 0.8em;
}

/* Afficher les flèches de navigation trimestrielle via JavaScript en fonction de la taille de l'écran */
@media (min-width: 900px) {
  .month-nav {
    display: flex;
  }
}
/* Pour les petits écrans, n'afficher qu'un seul mois */
@media (orientation: landscape) and (max-width: 1250px) {
  .month-block,
  .cal-pushyear {
    display: none;
  } /* Cachez d'abord tous les mois */
  .month-1 {
    display: block;
  } /* Affichez seulement le premier mois */
}
/* Pour les petits écrans, n'afficher qu'un seul mois */
@media (orientation: portrait) and (max-width: 650px) {
  .month-block,
  .cal-pushyear {
    display: none;
  } /* Cachez d'abord tous les mois */
  .month-1 {
    display: block;
  } /* Affichez seulement le premier mois */
}
@media (min-width: 1251px) {
  .month-block,
  .cal-pushyear {
    display: none;
  } /* Cachez d'abord tous les mois */
  .month-1,
  .month-2 {
    display: block;
  } /* Affichez seulement le premier mois */
}
.call_annee {
  display: none;
}

.turnOver {
  background-color: #d9b2a6;
  background-image: linear-gradient(45deg, transparent 48%, rgba(255, 255, 255, 0.95) 48%, rgba(255, 255, 255, 0.95) 52%, transparent 52%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: -1;
}

.startHolliday {
  background-image: linear-gradient(45deg, #d9b2a6 50% 50%, transparent 50% 100%), linear-gradient(225deg, grey 50% 50%, transparent 50% 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.endHolliday {
  background-image: linear-gradient(45deg, grey 50% 50%, transparent 50% 100%), linear-gradient(225deg, #d9b2a6 50% 50%, transparent 50% 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.turnOver {
  background-color: #d9b2a6;
  background-image: linear-gradient(45deg, transparent 48%, rgba(255, 255, 255, 0.95) 48%, rgba(255, 255, 255, 0.95) 52%, transparent 52%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: -1;
}

.startHolliday {
  background-image: linear-gradient(45deg, #d9b2a6 50% 50%, transparent 50% 100%), linear-gradient(225deg, grey 50% 50%, transparent 50% 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.endHolliday {
  background-image: linear-gradient(45deg, grey 50% 50%, transparent 50% 100%), linear-gradient(225deg, #d9b2a6 50% 50%, transparent 50% 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.turnOver {
  background-color: transparent;
  /* Utilisation de 'ellipse' au lieu de 'circle' */
  /* 'farthest-side' force le gradient à toucher les bords du conteneur */
  background-image: radial-gradient(ellipse farthest-side at 100% 50%, #2ecc71 100%, transparent 100%);
  background-repeat: no-repeat;
  /* On définit la largeur à 50% et la hauteur à 100% */
  background-size: 50% 100%;
  /* On le plaque bien à droite */
  background-position: right center;
  /* Pour éviter que le contenu (chiffre) ne touche le bord du rond */
  padding: 0;
}

.turnOver {
  background-color: transparent;
  /* On dessine deux ellipses : une à gauche, une à droite */
  background-image: radial-gradient(ellipse farthest-side at 0% 50%, #d9b2a6 100%, transparent 100%), radial-gradient(ellipse farthest-side at 100% 50%, #d9b2a6 100%, transparent 100%); /* Le demi-rond à droite */
  background-repeat: no-repeat;
  /* On définit la taille de chaque demi-rond */
  /* 40% de largeur laisse un vide de 20% au milieu (40 + 20 + 40 = 100) */
  background-size: 40% 100%, 40% 100%;
  /* On place le premier à gauche (0%) et le second à droite (100%) */
  background-position: left center, right center;
}

.turnOver {
  background-color: transparent;
  /* On dessine deux ellipses : une à gauche, une à droite */
  background-image: radial-gradient(ellipse farthest-side at 0% 50%, #d9b2a6 100%, transparent 100%), radial-gradient(ellipse farthest-side at 100% 50%, #d9b2a6 100%, transparent 100%); /* Le demi-rond à droite */
  background-repeat: no-repeat;
  /* On définit la taille de chaque demi-rond */
  /* 40% de largeur laisse un vide de 20% au milieu (40 + 20 + 40 = 100) */
  background-size: 40% 100%, 40% 100%;
  /* On place le premier à gauche (0%) et le second à droite (100%) */
  background-position: left center, right center;
}

.occuper {
  background-image: linear-gradient(to top right, #d9b2a6 50%, transparent 50%);
  background-image: linear-gradient(to bottom left, #d9b2a6 50%, #d9b2a6 50%);
}

.am {
  background-image: linear-gradient(to top right, #d9b2a6 50%, transparent 50%);
}

.am {
  background-image: radial-gradient(ellipse farthest-side at 0% 50%, #d9b2a6 100%, transparent 100%);
  background-size: 50% 100%;
  background-position: left center;
  background-repeat: no-repeat;
}

.pm {
  background-image: linear-gradient(to bottom left, #d9b2a6 50%, transparent 50%);
}

.pm {
  background-image: radial-gradient(ellipse farthest-side at 100% 50%, #d9b2a6 100%, transparent 100%);
  background-size: 50% 100%;
  background-position: right center;
  background-repeat: no-repeat;
}