/*PAGE A PROPOS*/

body {
    background-color: #f8f9fa;
    font-family: Arial, sans-serif;
    background: url(../../img/bg1.jpg) no-repeat center fixed;
    -webkit-background-size: cover; /* pour anciens Chrome et Safari */
    background-size: cover; /* version standardisée */        
}
main{

}
.hero {
    background: url(../../img/bgtitle02.jpg) no-repeat top fixed;
    /*background-size: contain; */
    -webkit-background-size: cover; /* pour anciens Chrome et Safari */
    background-size: cover; /* version standardisée */      
    padding: 50px;

  /*
    min-width:1290px;
    width:100%;
    min-height:400px;
    height:auto;
    */
    
    text-align: center;
    color: white;    
}

.title{
  text-shadow: 2px 2px 8px rgba(0,0,0,0.89);
}
.content {
    margin: 20px;
}
h2 {
    margin-top: 30px;
}
/*.footer {
    background-color: #343a40;
    color: white;
    text-align: center;
    padding: 20px 0;
    position: relative;
    bottom: 0;
    width: 100%;
}
*/
/*********************************************************
MISE EN FORME POUR BODY
*********************************************************/

.shadow{
-webkit-box-shadow: 31px 31px 10px 0px rgba(0,0,0,0.89);
-moz-box-shadow: 31px 31px 10px 0px rgba(0,0,0,0.89);
box-shadow: 31px 31px 10px 0px rgba(0,0,0,0.89);
}


/*********************************************************
MISE EN FORME POUR INDEX
*********************************************************/
.gc01{
    background-color:#fff;
    margin-right:0.5em;
    padding:0.2em;
}
.display-7{
    font-size: 2rem;
}

section{
    position: relative;  
}

/* Mise en forme pour l'image Kanji dans l'index */
#kanjiMG{
    position:absolute;
    top: 1.2em; 
    right: 24px;
    z-index: 99;
    max-width:7em;
    box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0);
    -webkit-box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0); 
}

.kanji{
  margin:0;
  padding:0;
  background: url(../../img/pngegg.png) no-repeat center; 
  -webkit-background-size: 32%; /* pour anciens Chrome et Safari */
  background-size: 32%; /* version standardisée */
}
/*****************************************************************************************************
MISE EN FORME PROFILE
*****************************************************************************************************/
#PhotoIdProfile {
    max-width:12em;
    width: 100%; /* Largeur de l'image */
    max-height:12em;
    height: 100%; /* Hauteur de l'image */
    padding:0.4em;
    background-color:#fff;
    border-radius: 50%; /* Rend l'image circulaire */
    object-fit: cover; /* Récadre l'image pour qu'elle remplisse le cercle sans déformation */
}
/*****************************************************************************************************
MISE EN FORME GESTION UTILISATEUR
*****************************************************************************************************/
.img-circle {
    width: 50px; /* Largeur de l'image */
    height: 50px; /* Hauteur de l'image */
    border-radius: 50%; /* Rend l'image circulaire */
    object-fit: cover; /* Récadre l'image pour qu'elle remplisse le cercle sans déformation */
}

/*****************************************************************************************************
MISE EN FORME GESTION TECHNIQES
*****************************************************************************************************/

.cercle {
  overflow: hidden;
  -webkit-border-radius:50%;
  -moz-border-radius:50%;
  border-radius:50%;
  width: 250px;
  height: 250px;
  margin-top: 42px;
}


/*****************************************************************************************************
MISE EN FORME POUR LE FORMULAIRE DE RECHERCHE DANS NAV
*****************************************************************************************************/

.navbar .form-inline {
    margin-left: auto; /* Aligne le formulaire à droite */
}
/*****************************************************************************************************
MISE EN FORME IMG portrait
*****************************************************************************************************/


/******************************************************
POUR LES IMPRESSIONS
******************************************************/
@media screen and (min-width: 200px) and (max-width: 775px) {
  #kanjiMG{
      display: none;
    }

  #cMoral{
      display: none;
  }  


}

/******************************************************
POUR LES ECRANS min-width: 776px - max-width: 992px
******************************************************/
@media screen and (min-width: 776px) and (max-width: 992px) {
  
#kanjiMG{
    position:absolute;
    top: 4em; 
    right: 7px;
    z-index: 99;
    box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0);
    -webkit-box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0); 
  }
  
}

/******************************************************
POUR LES IMPRESSIONS
******************************************************/
@media print {
  #menu, #footer, aside {
    display:none;
  }
  body {
    font-size:120%;
    color:
black;
  }
}