body/*page entière : pas de marge extérieure, couleur de fond mauve foncé */
{
    display: block;
    margin: 0px; 
    background-color: #E8CCDB;
    color: #8E2083; /* Le texte  du bloc central de la page sera bordeaux */
}

/* mes deux polices de caractère aux différents formats copiées dans le dossier styles */
@font-face 
{
    font-family: 'league_spartanbold';
    src: url('leaguespartan-bold-webfont.eot');
    src: url('leaguespartan-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('leaguespartan-bold-webfont.woff2') format('woff2'),
         url('leaguespartan-bold-webfont.woff') format('woff'),
         url('leaguespartan-bold-webfont.ttf') format('truetype'),
         url('leaguespartan-bold-webfont.svg#league_spartanbold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face 
{
    font-family: 'poppinsmedium';
    src: url('poppins-medium-webfont.eot');
    src: url('poppins-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('poppins-medium-webfont.woff2') format('woff2'),
         url('poppins-medium-webfont.woff') format('woff'),
         url('poppins-medium-webfont.ttf') format('truetype'),
         url('poppins-medium-webfont.svg#poppinsmedium') format('svg');
    font-weight: normal;
    font-style: normal;

}

/*CARACTERISTIQUES DES POLICES*/
.resp-font
{
    font-size: clamp(0.5rem, calc(0.5rem + 0.5vw), 0.8rem);
}

/*polices, tailles des polices et alignement pour les titres, les listes, les espaces de saisie et le texte */
h1, h2, h3, h6 /* police pour les titres */
{
    font-family: 'league_spartanbold', Verdana, serif;   
}

h1
{
    text-align: center;
    text-shadow: 2px 2px 5px #A39DA0;
    font-size: clamp(0.8rem, calc(1rem + 1vw), 1.8rem);
}

h2
{
    text-align: center;
    font-size: clamp(0.7rem, calc(0.7rem + 0.9vw), 1.5rem);
}

h3
{
    text-align: left;
    font-size: clamp(0.6rem, calc(0.7rem + 0.8vw), 1.3rem);
}

h6
{
    text-align: center;
    font-size: clamp(0.4rem, calc(0.6rem + 0.7vw), 1rem);
}

p, li, .btn
{
    font-family: 'poppinsmedium', Arial, serif;  
}

textarea, text
{
    font-family: 'poppinsmedium', Arial, serif; 
}

.h1 
{
    margin-bottom: 0rem;
    font-weight: 900;
}

.h2 
{
    line-height: 0.5;
}

/* LIENS*/
a, a:hover
{
    color: #FFFFFF;
    text-decoration: none;
}

a:focus 
{
    outline: -webkit-focus-ring-color auto 0px;
}

/*CLASSES DE COULEURS ET COULEURS DES LIENS */
.vert, .vert a:hover
{
    color: #97BB27; 
}

.rose, .rose a:hover 
{
    color: #DC056C; 
}

.turquoise, .turquoise a:hover 
{
    color: #00A0B8; 
}

.vertF, .vertF a:hover, .vertF th
{
    color: #3CAE3D;
}

.orange, .orange a:hover
{
    color: #F57800; 
}

.violet, .violet a:hover, .violet a
{
    color: #8E2083
}

.fondFonce
{
  background-color: #E8CCDB;
}

.fondClair
{
  background-color: #F3DAE8;
}

.transparent
{
    color: transparent; 
}


/*BOUTONS DU MENU */
button:focus 
{
  outline: 0px dotted;
  outline: 0px auto -webkit-focus-ring-color;
}

.btn 
{
    border: 2px solid transparent;
    border-radius: 12px;
    color: white;
    font-size: clamp(1rem, calc(0.5rem + 1vw), 1.5rem);
    margin-top: 5px;
    margin-bottom: 5px;
    margin-right: 6px;
    margin-left: 6px;
    text-align: center;
    text-decoration: none;
    font-family: 'poppinsmedium', Arial, serif;
    transition-duration: 0.4s;
    cursor: pointer;  
}

/*une couleur pour chaque bouton du menu */
.button1 {background-color: #00A0B8; border: 2px solid #00A0B8;} /* turquoise */
.button2 {background-color: #97BB27; border: 2px solid #97BB27;} /* vert vif */
.button3 {background-color: #DC056C; border: 2px solid #DC056C;} /* rose */ 
.button4 {background-color: #8E2083; border: 2px solid #8E2083;} /* violet */ 
.button5 {background-color: #F57800; border: 2px solid #F57800;} /* orange */
.button6 {background-color: #3CAE3D; border: 2px solid #3CAE3D;} /* vert foncé */

/*changement de couleur quand on survole le bouton ou quand on est dans la page du bouton */
.button1Bis 
{
  background-color: transparent;
  border: 2px solid #00A0B8;
  color: #00A0B8;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

.button1:hover 
{
  background-color: transparent;
  color: #00A0B8;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

.button2Bis 
{
  background-color: transparent;
  border: 2px solid #97BB27;
  color: #97BB27;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

.button2:hover 
{
  background-color: transparent;
  color: #97BB27;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

.button3Bis 
{
  background-color: transparent;
  border: 2px solid #DC056C;
  color: #DC056C;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

.button3:hover 
{
  background-color: transparent;
  color: #DC056C;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

.button4Bis 
{
  background-color: transparent;
  border: 2px solid #8E2083;
  color: #8E2083;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

.button4:hover 
{
  background-color: transparent;
  color: #8E2083;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

.button5Bis 
{
  background-color: transparent;
  border: 2px solid #F57800;
  color: #F57800;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

.button5:hover 
{
  background-color: transparent;
  color: #F57800;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

.button6Bis 
{
  background-color: transparent;
  border: 2px solid #3CAE3D;
  color: #3CAE3D;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
.button6:hover 
{
  background-color: transparent;
  color: #3CAE3D;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

/*STYLES DES DIFFERENTS BLOCS*/

#global /*bloc central de la page*/
  {
    background-color: #F3DAE8; 
    color: #8E2083; /* Le texte  du bloc central de la page sera bordeaux */
    width: 100%;
  }

.container-xl 
{
    width: 80%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

/*propriétés de mes blocs de fin de la page index + image page résultat */
#realisation, #personnalite, #defibut, #imageResultat
{
    padding: 5px;/* espace à l'intérieur de mes blocs */
    border: 2px solid transparent;
    border-radius: 12px;
    color: white;
    width: 100%;

}
/* couleur de fond des 3 blocs page index*/
#realisation
{
    background-color: #00A0B8;
}

#personnalite
{
    background-color: #97BB27;
}

#defibut
{
    background-color: #DC056C;
}

/*CORRECTION DES PARAMTRES PAR DEFAUT DU card-header*/
.card-header 
{
    background-color: rgba(0, 0, 0, 0);
    border-bottom: 0px solid rgba(0, 0, 0, 0);
}

/*propriétés des différentes parties du formulaire */
.input-group, .input-group-text, .form-control 
{
  font-size: calc(0.5rem + 0.5vw); 
}

.form-control, .imput 
{
  color: #000000;
  border: 1px solid #8E2083;
}

.form-control:focus 
{
    color: #495057;
    background-color: #fff;
    border-color: #8E2083;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(142,32,131,0.25);
}

.input-group-text 
{
    font-family: 'poppinsmedium', Arial, serif;
    font-weight: 600;
    color: #FFFFFF;
    background-color: #8E2083;
    border: 1px solid #8E2083;
}

input[type="date" i] 
{
    padding-left: 20px;
    border: 1px solid #8E2083;
}

textarea {
  height: 130px;
  width: 72%;
  padding: 12px;
  border: 1px solid #8E2083;
  border-radius: 4px;
  resize: vertical;
}
/*paramètre de tous les boutons de formulaire*/
input[type=submit], input[type=button] {
  color: white;
  padding: 12px 20px;
  margin-top: 20px;
  border-radius: 4px;
  cursor: pointer;
  float: center;
  font-size: calc(0.5rem + 1vw);
  font-family: 'poppinsmedium', Arial, serif;
}

/*bouton envoyer du formulaire de contact*/
.contact input[type=submit] {
  background-color: #F57800;
  border: 2px solid #F57800;
}
.contact input[type=submit]:hover {
  color: #F57800;
}

/*bouton envoyer  et Retour*/
.membre input[type=submit] 
{
  background-color: #3CAE3D;
  border: 2px solid #3CAE3D;
}

.membre input[type=submit]:hover 
{
  color: #3CAE3D;
}

/*bouton donnees*/
.donnees input[type=submit] 
{
  background-color: #DC056C;
  border: 2px solid #DC056C;
}

.donnees input[type=submit]:hover 
{
  color: #DC056C;
}
input[type=button]:focus 
{
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
input[type=submit]:hover, input[type=button]:hover {
  background-color: transparent;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
input[type=button]:focus 
{
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

input:focus
{
    outline: transparent;
}

label {
  margin-bottom: 0rem;
  font-family: 'poppinsmedium', Arial, serif; 
}

#resultats
{
    background-color: #FFFFFF;
    border: 2px solid #3CAE3D;
    border-radius: 12px;
    color: #8E2083;
}

.tableDefi
{
  width: 98%;
  margin: 0.5rem;
}

.table th
{
    border: 2px solid #8E2083;
    border-collapse: collapse;
    font-family: 'poppinsmedium', Arial, serif;
    font-size: clamp(0.4rem, calc(0.6rem + 0.7vw), 1rem);
    height: 16.66%;
}

.liste td
{
    border: 2px solid #8E2083;
    border-collapse: collapse;
    font-family: 'poppinsmedium', Arial, serif;
    font-size: clamp(0.4rem, calc(0.6rem + 0.7vw), 1rem);
    height: 16.66%;
}

.profil tr, .profil td,  .periodes tr, .periodes td 
{
    border: 2px solid #8E2083;
    padding-top: 0.7rem;
    padding-right: 0.3rem;
    padding-bottom: 0.7rem;
    padding-left: 0.3rem;
    text-align: center;
    vertical-align: middle;
    color :#8E2083;
    font-weight: bold;
}

.titreTable tr, .titreTable td 
{
    border: 2px solid transparent;
    padding-top: 0.7rem;
    padding-right: 0.3rem;
    padding-bottom: 0.7rem;
    padding-left: 0.3rem;
    text-align: center;
    vertical-align: middle;
}

/*MA SCROLLBAR*/
/* width */
::-webkit-scrollbar {
  width: 20px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #3CAE3D; 
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #b30000; 
}

/*Toute ma page moins le footer pour mettre le footer en bas de page quand la page est trop petite*/
.bloc-principal 
{
  min-height: calc(100vh - 140px)
}

/*FOOTER*/
footer
{
    width: 100%;
    height: 70px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-family: 'poppinsmedium', Arial, serif;
}

footer a
{
    font-family: 'poppinsmedium', Arial, serif;
    text-decoration: none;
    color: #8E2083; 
    text-shadow: 2px 2px 5px #A39DA0;  
}

/*MEDIA QUERIES*/
/*AFFICHAGE A PARTIR DES ECRANS DE TAILLE MOYENNE*/
@media (min-width: 768px) {

  .profil tbody 
  {
    width: 700px;
    margin-right: auto;
    margin-left: auto;
  }

}

/*AFFICHAGE A PARTIR DES ECRANS DE GRANDE TAILLE*/
@media (min-width: 992px) {

  .input-group 
  {
    width: 700px;
    margin-right: auto;
    margin-left: auto;
  }
 
}


/*AFFICHAGE POUR TRES GRAND ECRAN*/
@media (min-width: 1200px) {
  body 
  {
    background-color: #E8CCDB;
    background-image: url("../images/fond.png");
  }

  h1
  {
    text-align: left;
  }

  #navbar-list
  {
    background-color: #F3DAE8;
  }

  #global
  {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: -1px;
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 20px;
    padding-bottom: 50px;
  }

  #navbar-list
  {
    width: 100%;
    margin-top: 0px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .btn 
  {
    padding: 10px 7px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 6px;
    margin-left: 6px;
    display: inline-block;
    font-family: 'poppinsmedium', Arial, serif;
    transition-duration: 0.4s;
    cursor: pointer;  
  }

  #imageResultat 
  {
    margin-bottom: 20px;
  }

  footer
  {
    width: 80%;
    margin-top: -1px;
  }

}