/* FEUILLE DE STYLES POUR TOUS LES STYLES DE L'APPLICATION SAUF LES MENUS */
/* variables */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root
{
    --main-bg-color : #e8dcd0;
    --onglets-bg-color :  #F1A607;
    --texte-accentue-color : #000000;
    --texte-discret-color : #000000 ;
    
}
/*@media only screen and (orientation:portrait){
  body {
    transform: rotate(90deg);
  }
}*/

/* Style de base pour la page (couleur fond : vert pâle, couleur texte : noir) */
.basePage 
{  
    background-color : white;
    color:black;
    font:11px Arial,Helvetica, sans-serif;
}
/*html { display:inline; }*/

/*@media only screen and (orientation:portrait){

  html {

   height: 100%;
   width: 250%;
   margin-left: 20%;
   -webkit-transform: rotate(180deg);

   -moz-transform: rotate(180deg);

   -o-transform: rotate(180deg);

   -ms-transform: rotate(180deg);

   transform: rotate(180deg);

  }

}*/




/* Style pour le titre (couleur du texte : rouge) */
.titre 
{
    background-color : white;
    color : var(--texte-accentue-color);
    font:30px Arial, Helvetica, sans-serif;
    text-align:center;
}

/* Style pour le texte de 2ème niveau du titre */
.texteNiveau2
{
    font:22px Arial, Helvetica, sans-serif;
}

/* Style pour le texte associé à l'onglet Accueil (couleur : bleu foncé avec 
mise en gras et en italique) */
.texteAccueil
{
    background-color:white;
    color:#000000;       
    font:16px Arial, Helvetica, sans-serif;
    font-style:italic;
    text-align:left;
}
.texteAccueil2
{
    background-color:white;
    color:#000000;       
    font:16px Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-style:italic;
    text-align:center;
}
/*Style pour gérer les images de la page d'accueil'*/
    .arrondie2 {
    border:2px solid #F1A607;
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
    border-radius:7px;
    }
    
/*Style pour gérer l'image de pied de page*/
.image2{
    max-width: 30%;
}
/* Style pour le texte dans les différentes balises citées */
td,tr,div,p 
{
    font:13px Arial, Helvetica, sans-serif;
}

/* STYLES POUR LES TABLEAUX QUADRILLÉS */

/* Style des tableaux avec quadrillage : gris foncé épaisseur 1px, espacement de 
3px entre la bordure gauche de chaque cellule et le texte */
table.tabQuadrille td
{
    border-bottom:1px solid #777777;
    border-right:1px solid #777777;
    border-left:1px solid #777777;
    border-top:1px solid #777777;
    padding-left:5px;
} 

/* Style pour les lignes d'en-tête des tableaux quadrillés : fond avec nuances 
de jaune */
tr.enTeteTabQuad 
{
    background-color:#FFECA9;
    color:black;
    height:21px;
    text-align:center;
} 

/* 2ème style pour les en-têtes des tableaux quadrillés : fond jaune */
/*tr.enTete2TabQuad 
{
    background-color:#F1A607;
    color:black;
    text-align:left;
} */

/* Style pour les lignes (autres que les en-têtes) des tableaux quadrillés : 
fond écru */
tr.ligneTabQuad 
{
    background-color:#F1A607;
    color:black;
    text-align:left;
}

/* STYLES POUR LES TABLEAUX NON QUADRILLÉS */

/* Style des tableaux sans quadrillage : gris foncé épaisseur 1px, fond écru */
table.tabNonQuadrille 
{
    background-color:#F5F4F4;
    color:black;
    border: 1px solid black;
}

/* Style pour les lignes d'en-tête des tableaux non quadrillés : fond avec 
nuances de jaune et trait bas pour séparer l'en-tête du corps du tableau */
tr.enTeteTabNonQuad td
{
    background-color:#ffeca9;
    color:black;
    height:21px;
    text-align:center;
    border-bottom:1px solid #777777;
    padding: 10px;
} 

/* Style pour les lignes (autres que les en-têtes) des tableaux non quadrillés : 
fond écru, hauteur plus importante et espacement de 3px entre la bordure gauche 
de chaque cellule et le texte */
tr.ligneTabNonQuad td
{
    color:black;
    text-align:center;
    height:30px;
    padding: 10px;
} 

/* STYLES POUR LES ERREURS */

/* Style pour les messages d'erreur affichés en bas de page (couleur : bleu) */
.msgErreur
{
    background-color:var(--main-bg-color);
    color:red;
    font-size:18px;
}

/* Style pour les erreurs de saisie dans les tableaux d'offres d'hébergement 
(couleur : rouge de base) */
.erreur
{
    background-color:white;
    color:red;
}

/* STYLES POUR LES ATTRIBUTIONS */

/* Fond gris */
td.absenceOffre
{
    background-color:#FFCC33;
    color:black;
    width:30px;
    text-align:center;
}

/* Fond blanc */
td.reserveSiLien
{
    background-color:#FFCC33;
    color:black;
    width:30px;
    text-align:center;
}

/* Fond jaune */
td.reserve
{
    background-color:#FFCC33;
    color:black;
    width:30px;
    text-align:center;
}

/* Fond vert */
td.libre
{
    background-color:#FFCC33;
    color:black;
    width:30px;
    text-align:center;
}

#entete{
    clear: both;
    width: 100%; /* largeur des 2 div (menu2 + menu3) */
    margin: 0 auto; /* centrage horizontal automatique */
}
.entete_bouton{
    float: left;
    margin: 0;
    width: 12%;
    height: 25px;
}
#entete_identite{
    color:white;
    float: right;
    margin: 5;
    width: 60%;
    
    
    text-align: right;
}

/*Pied de page*/
.footer{
    color:#13304F;
    font:20px Helvetica, sans-serif;
}

#Footer {
   position: fixed;
   bottom : 0;
   right : 100;
}

/*img {
    max-width: 20%;
}*/
input::placeholder{
    text-align: center;
    font-weight: bold;
    color: black
}
.info_form{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.info_form:nth-child(1){
    margin-top: 10px;
}
.form_connexion .element_form{
    padding: 10px;
    width: 90%;
    border-style: none ;
}
.ligneTabNonQuad input{
    background-color: #E4E4E3;
}
.form_connexion{
    margin-top: 5%;
}
.enTeteTabNonQuad td{
    font-size: 150%;
}
.boutons{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.button_form{
    padding-top: 10px;
}
.inscription_bouton button{
    border-style: none;
    background: none;
}
.inscription_bouton a{
    text-decoration: none;
    color: black;
}
.bouton_valider{
    
    background-color: #FFDA6F;
}
.inscription_bouton{
    padding-left: 5px;
    padding-bottom: 5px;
}
/*page Activite*/
.button_admin{
    border: none;
    outline: 0;
    padding: 12px;
    color: white;
    background-color: #000;
    text-align: center;
    cursor: pointer;
    width: 100%;
    font-size: 15px;
    margin-bottom: 5px;
}
.container_card{
    display: flex;
    flex-direction: row;
}
.card{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    width: 400px;
    height: 400px;
    margin: auto;
    text-align: center;
    font-family: arial;
    position: relative;
    margin-bottom: 25px;
}
.card_util{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    width: 300px;
    height: 300px;
    margin: auto;
    text-align: center;
    font-family: arial;
    position: relative;
    margin-bottom: 25px;
    margin-top: 10px;
}
.descriptCard{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.descriptCard p:nth-child(3){
    padding: 10px;
}
.descriptCard p:nth-child(4){
    padding: 10px;
}

.price{
    color: grey;
    font-size: 22px;
}

.card .button_personne{
    border: none;
    outline: 0;
    padding: 12px;
    color: white;
    background-color: #000;
    text-align: center;
    cursor: pointer;
    width: 100%;
    height: 25%;
    font-size: 20px;
    margin-bottom: 5px;
    position: absolute;
    bottom: 0;
    left: 0; 
}
.bouton_inscrit{
    border: none;
    outline: 0;
    padding: 12px;
    color: white;
    background-color: #000;
    text-align: center;
    cursor: pointer;
    font-size: 15px;
    margin-bottom: 1px;
}
.form_inscription input{
    text-align: center;
}
.card .fonctionnalités_bouton{
     border-color: white;
    outline: 0;
    padding: 15px;
    color: white;
    background-color: #000;
    text-align: center;
    cursor: pointer;
    font-size: 15px;
}
.card buttton:hover{
    opacity: 0.7;
}
.partie_admin{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.footer{
    position: relative;
    color:#13304F;
    font:20px Helvetica, sans-serif;
}
#Footer {
    position: fixed;
    bottom : 0;
    right : 100;
 }
 .form_connexion .entete_version{
     position: absolute;
     bottom: 0;
 }
/*Css Page Accueil */

.container{
    text-align: center;
    color:#000000;       
}
.container p{
    font-size: 180%;
}
#caroussel {
    width: 600px;
    height: 400px;
    overflow:hidden;
    border: 1px solid #000000;
    background-color:#ffeca9;
}
.images{
    display:flex;
    animation-duration: 15s;
    animation-name: mesImages;
    animation-iteration-count: infinite;
}
.images img{
    width: 640px;
    height: 400px;
}

@keyframes mesImages {
    0% {
        transform: translateX(0);
    }
    25%{
        transform: translateX(-640px);
    }
    50%{
        transform: translateX(-1280px);
    }
    75%{
        transform: translateX(-1880px);
    }
    100%{
        transform: translateX(0);
    }
}
#frmIdentification input{
    cursor: pointer;
    margin-top: 20%;
}
.container_footer{
    margin-top: 10px;
}
.form_connexion .basePage{
    position: absolute;
    bottom: 0;
    right:  0;
}
.back{
    padding: 10px;
}
body.connection .basePage{
    position: absolute;
    bottom: 0;
    right: 0;
}
/*CSS Billetterie*/
.card_billetterie{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    width: 400px;
    height: 250px;
    margin: auto;
    text-align: center;
    font-family: arial;
    position: relative;
    margin-bottom: 10px;
    margin-top: 10px;
}
.card_admin_billet{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    width: 350px;
    height: 200px;
    margin: auto;
    text-align: center;
    font-family: arial;
    position: relative;
    margin-bottom: 10px;
    margin-top: 10px;
}
.card_billetterie .fonctionnalités_bouton_billetterie{
    border-color: white;
    outline: 0;
    padding: 10px;
    color: white;
    background-color: #000;
    text-align: center;
    cursor: pointer;
    font-size: 15px;
}
.card_billetterie buttton:hover{
    opacity: 0.7;
}
.card_billetterie .descriptCard_Billetterie{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px;
}
.descriptCard_Billetterie p{
    padding: 4px;
}
.add_buttton{
    padding: 5px;
    margin-bottom: 10px;
    margin-top: 10px;
}
.add_children{
    font-size: 120%;
}
#mySearch{
    padding:15px;
    border-radius: 10px;
  }
  #searchbar{
      padding: 8px;
  }
  #searchbar[type=text] {
     width: 30%;
     -webkit-transition: width 0.15s ease-in-out;
     transition: width 0.15s ease-in-out;
     text-align: center;
  }

  /* When the input field gets focus,
       change its width to 100% */
  #searchbar[type=text]:focus {
    width: 40%;
  }
  .bouton_retour{
      margin-top: 10px;
  }