@import "normalize.css" ;

@font-face {
  font-family: 'Montserrat';
  src: url('font/Montserrat/Montserrat-Italic.ttf')  format('truetype');
}

@font-face {
  font-family: 'Informatique icons';
  src: url('font/informatique_icons/Montserrat-Italic.ttf')  format('truetype');
}

:root {
  --theme-rouge: #fd341f;
  --theme-blanc-transparent: rgba(255,255,255,0.3);
  /*--theme-bleu-pale: rgba(151,219,246,1);*/
  --theme-bleu-pale: #8B4513;

  --theme-bleu-fonce: rgba(63,155,191,1);
  --theme-vert: #408450;
  --theme-blanc: white;
  --theme-noir: black;
  --theme-rose: #e91e63;
  --theme-jaune: #ffc107;
  --theme-orange: #ff5722;
  --theme-violet: #9c27b0;
  --theme-marron: #795548;

  --theme-bordure-rondeur: 0.5rem;
}

html {
  font-family:'Montserrat', sans-serif;
  font-size:30px;
}

#liste-cours {
  list-style-type:none;
}

.liste-cours-item {
  color:var(--theme-blanc);
  text-transform : capitalize;
  text-decoration:none;
}

#liste-cours li
 {
  position:relative;
  display:block;
  margin-bottom:0.25rem;
  background-color:var(--theme-blanc-transparent);
  border-radius:var(--theme-bordure-rondeur);
  padding:0.25rem;
  padding-left:1.50rem;
  box-shadow: 2px 2px var(--theme-blanc);
   padding-left: 2rem;
}

#liste-cours li::before
 {
   content:"";
   text-align:center;
   color:var(--theme-blanc);
   font-size:1.25rem;
   position:absolute;
   top:0.1rem;
   left:0.25rem;
   height:1rem;
   width:1rem;
   background-image: url('font/informatique_icons/processeur.png');
  background-size: contain;
  background-repeat: no-repeat;

   font-family:'Informatique icons', sans-serif;


}





fieldset {
  color:var(--theme-jaune);
  border-color: var(--theme-jaune);
  border-radius:var(--theme-bordure-rondeur);
}

input[type="text"],
textarea {
  display:block;
  width:100%;
  border:none;
  background-color:var(--theme-blanc-transparent);
  border-radius:var(--theme-bordure-rondeur);
}

#page-chargement-application{
  position:relative;
  height:100vh;
  background-image:url(illustration/connexion.jpeg);
  background-repeat:no-repeat;
  background-size:contain;
  background-position:bottom center;
  background-attachment:fixed;

  text-align:center;
  font-size:2rem;
  font-weight:normal;
  line-height:1.8rem;

  padding:10%;
  color:var(--theme-orange);
  text-shadow: 2px 2px var(--theme-blanc);
  animation: pulse 1.5s infinite;
  animation-direction: alternate;



}

@keyframes pulse {
  0% {
    /*background-color:var(--theme-bleu-fonce);*/
    background-color: #8B4513;
  }
  100% {
    /*background-color:var(--theme-bleu-pale);*/
    background-color: #8B4513;

  }
}



.page {
  position:relative;
  /*background-color:var(--theme-bleu-pale);*/
  background-color: #8B4513; /* marron standard */

  padding:5%;
  min-height: 100vh;
  box-sizing: border-box;

  background-image:url(illustration/student.png);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:right bottom;
  background-attachment:fixed;
  background-size: 40%;
  color:var(--theme-blanc);

/*border: 20px solid transparent;
  border-image: url('font/informatique_icons/processeur.png') 20 round;*/
}


.page h1{
  text-align:center;
  font-size:2rem;
  font-weight:normal;
  line-height:1.8rem;
  color:var(--theme-jaune);
  text-shadow: 2px 2px var(--theme-blanc);

}

.page h2,
.page p {
  background-color:var(--theme-blanc-transparent);
  border:0px transparent solid;
  border-radius:var(--theme-bordure-rondeur);
  padding:0.25rem;
}


.action{
  position:relative;
  display:block;
  text-decoration: none;
  font-family:sans-serif;
  background-color:#fd9f44;
  color:var(--theme-blanc);
  border:0px transparent solid;
  border-radius:var(--theme-bordure-rondeur);
  padding:0.25rem;
  font-size:1rem;
  text-align:center;
  width:50%;
  margin:0 auto;
  box-sizing: border-box;
  margin-top:0.25rem;
  margin-bottom:0.25rem;
  box-shadow: 2px 2px var(--theme-blanc);
}

.action:active {
  border:0px transparent solid;
}















/*@import "normalize.css" ;

@font-face {
  font-family: 'Montserrat';
  src: url('font/Montserrat/Montserrat-Italic.ttf')  format('truetype');
}

@font-face {
  font-family: 'Informatique icons';
  src: url('font/informatique_icons/Montserrat-Italic.ttf')  format('truetype');
}

:root {
  --theme-rouge: #fd341f;
  --theme-blanc-transparent: rgba(255,255,255,0.3);
  --theme-bleu-pale: rgba(151,219,246,1);
  --theme-bleu-fonce: rgba(63,155,191,1);
  --theme-vert: #408450;
  --theme-blanc: white;
  --theme-noir: black;
  --theme-rose: #e91e63;
  --theme-jaune: #ffc107;
  --theme-orange: #ff5722;
  --theme-violet: #9c27b0;
  --theme-marron: #795548;

  --theme-bordure-rondeur: 0.5rem;
}

html {
  font-family:'Montserrat', sans-serif;
  font-size:30px;
}

#liste-chapitre-web-interactif, #liste-chapitre-reseautique, #liste-chapitre-programmation-multijoueur {
  list-style-type:none;
}

.liste-cours-item {
  color:var(--theme-vert);
  text-transform : capitalize;
  text-decoration:none;
}

#liste-chapitre-web-interactif li,
#liste-chapitre-reseautique li,
#liste-chapitre-programmation-multijoueur li {
  position:relative;
  display:block;
  margin-bottom:0.25rem;
  background-color:var(--theme-blanc-transparent);
  border-radius:var(--theme-bordure-rondeur);
  padding:0.25rem;
  padding-left:1.50rem;
  box-shadow: 2px 2px var(--theme-blanc);
   padding-left: 2rem;
}

#liste-chapitre-web-interactif li::before ,
#liste-chapitre-reseautique li::before ,
#liste-chapitre-programmation-multijoueur li::before {
   content:"";
   text-align:center;
   color:var(--theme-vert);
   font-size:1.25rem;
   position:absolute;
   top:0.1rem;
   left:0.25rem;
   height:1rem;
   width:1rem;
   background-image: url('font/informatique_icons/informatique.png');
  background-size: contain;
  background-repeat: no-repeat;

   font-family:'Informatique icons', sans-serif;


}

fieldset {
  color:var(--theme-jaune);
  border-color: var(--theme-jaune);
  border-radius:var(--theme-bordure-rondeur);
}

input[type="text"],
textarea {
  display:block;
  width:100%;
  border:none;
  background-color:var(--theme-blanc-transparent);
  border-radius:var(--theme-bordure-rondeur);
}

#page-chargement-application{
  position:relative;
  height:100vh;
  background-image:url(illustration/connexion.jpeg);
  background-repeat:no-repeat;
  background-size:contain;
  background-position:bottom center;
  background-attachment:fixed;

  text-align:center;
  font-size:2rem;
  font-weight:normal;
  line-height:1.8rem;

  padding:10%;
  color:var(--theme-orange);
  text-shadow: 2px 2px var(--theme-vert);
  animation: pulse 1.5s infinite;
  animation-direction: alternate;
}

@keyframes pulse {
  0% {
    background-color:var(--theme-bleu-fonce);
  }
  100% {
    background-color:var(--theme-bleu-pale);
  }
}



.page {
  position:relative;
  background-color:var(--theme-bleu-pale);
  padding:5%;
  min-height: 100vh;
  box-sizing: border-box;

  background-image:url(illustration/student.png);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:right bottom;
  background-attachment:fixed;
  background-size: 40%;
  color:var(--theme-vert);
}


.page h1{
  text-align:center;
  font-size:2rem;
  font-weight:normal;
  line-height:1.8rem;
  color:var(--theme-jaune);
  text-shadow: 2px 2px var(--theme-blanc);

}

.page h2,
.page p {
  background-color:var(--theme-blanc-transparent);
  border:0px transparent solid;
  border-radius:var(--theme-bordure-rondeur);
  padding:0.25rem;
}


.action{
  position:relative;
  display:block;
  text-decoration: none;
  font-family:sans-serif;
  background-color:#fd9f44;
  color:var(--theme-blanc);
  border:0px transparent solid;
  border-radius:var(--theme-bordure-rondeur);
  padding:0.25rem;
  font-size:1rem;
  text-align:center;
  width:50%;
  margin:0 auto;
  box-sizing: border-box;
  margin-top:0.25rem;
  margin-bottom:0.25rem;
  box-shadow: 2px 2px var(--theme-blanc);
}

.action:active {
  border:0px transparent solid;
}
*/