/*====================BOURAHOUANE FARES RT1-FI-A2========================*/




body {
  background-color: #f4f4f9;
  font-family: 'Nunito Sans', sans-serif;   /* définision de ma police qe l'on retrouvera dans toute les pages  */
  color: #333333; 
  margin: 0;  /* Permet déviter le petit espacement de certain navigateurs comme edge */
}

hr {  /*permet de donner des attribue aux trait de séparation*/
  border: 0; /*permet de ne plus avoir l'épaisseur par defaut de la balise hr*/
  height: 1.2px;
  background-color: #ddd;
  margin: 30px 0;
}



nav{                          /* c'est la ou se trouve mon menu en haut de page */
  background-color: #d90429;  
  width: 100%;  /*l'élément (donc ma barre de navigation) prend tout la largeur de la page*/
  height: 100px;  /* définision d'un hauteur maximum */
  box-shadow: 0px 0px 15px rgba(255, 0, 0, 0.6); /*ajout d'un ombre avec : un decalage en x et y de 0 et un fondu de 15px de couleur rouge*/
  border-bottom: 3px solid white; /* définition d'une bordeur en bas de l'élément en blanc */ 
  border-top: 3px solid white; /* meme chose mais avec une bordure en haut de l'element en blanc */ 
}

nav ul{  /*permet de cibler uniquement la balise ul qui sont dans la balise nav ce qui correspond a mes boutton d'acces entre les differente page*/
  list-style: none; /*permet d'enlever les puces (les point noir des liste)*/
  display: flex;  /* propreiter qui permet d'aligner les element aux lieu de les avoir en cologne */
  justify-content: center; /* permet de centrer tout les element sur un meme axe */
  margin: 40px auto; /* c'est l'espacement qui il a entre les boutton */
}

nav ul li a{ /*cette balise cible maintenant les boutton de navigation */
  font-size: 20px;
  text-decoration: none;  /*permet d'enlever le soulignement par defaut des ligne hypertyexte*/
  color: white;
  padding: 15px 25px; /*le padding represente par exemple l'espacement entre le texte du bouton et le boutton (l'espacement interrieur en gros)*/
  text-transform: uppercase; /*permet de mettre des texte en majuscule*/
  font-weight: bolder;  /*mettre du texte ne gras*/
  transition: 0.4s; /*temps de transition si il y a un changement sur l'element*/
}

nav ul li a:hover{  /*le hover permet de faire des changment lorsque le curseur de l'utilisateur est sur l'element en quesiton (sur ma page lorsqu'on met le curseur sur un boutton on vois un chagment de taille)*/
  font-size: 1.5em; /*l'uniter em correspond a la taille relative du parent par exemple ici 1.5em signifique qu'il est 1,5 fois plus grand que le text original*/
  text-shadow: 0px 0px 15px white;
}

.pageactif{  /*cas ou on est deja sur page*/
  background-color: white;    
  color: #d90429;             
  border-radius: 5px; /* permet d'arrondire les bord lorsqu'il y a une bordure */
  pointer-events: none; /*permet d'enlever le curseur d'un lien hypertexte (eneleve l'effet qui pourrait indiquer que l'on pourrait cliquer sur le boutton)*/
}

header h1{
  text-transform: uppercase;
  text-align: center;
  padding: 5px;
}



footer { /*correspond a mon pied de page*/
  width: 100%;
  background-color: #2b2d42;
  border-top: 4px solid #d90429;
  padding: 25px 0;
  margin-top: 50px;
  text-align: center;
}

.piedpagephoto { /*correspond a la photo de profil dans le pied de page*/
  width: 30px;
  height: 30px;
  vertical-align: middle; /*cette class est atttribuer a une image est permet a l'image d'etre aligner par rapport aux texte */
  margin-right: 10px;
  text-shadow: 2px 2px rgba(0, 0, 0, 0.4);
}

.piedpagenom{ /* corespponf a mon nom qu'il y a dans le nom : BOURAHOUANE Fares RT-FI-A2 */
  color: #edf2f4;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);
  text-transform: uppercase;
  font-weight: bold;

}

.piedpagelien{ /* lien direct sur la page de l'iut */
  color: #edf2f4;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  font-size: 0.9em;
  transition: 0.3s;
}

.piedpagelien:hover { /*cela aggrandi le texte est le rend plus grand*/
  color: #d90429;
  text-decoration: none;
  font-size: 1.15em;
}

.bouttonhaut{  /*correspond aux boutton qui se situe en bas a droite pour remontrer en haut*/
  position: fixed;  /*c'est ce qui lui permet de rester aux premeir plan*/
  bottom: 75px; /* c'est l'espacement qu'il y a entre l'emement est le 'sol' de la page  */
  right: 20px;  /*meme chose mais pour le coter droit*/
  border: 2px solid #d90429;
  border-radius: 50%; /*permet d'arrondire l'image*/
  color: white;
  background-color: #ef233c;
  text-decoration: none;
  box-shadow: 0 2px 5px rgba(0,0,0,0.5);
  width: 40px;
  height: 40px;
  transition: 0.3s;
}

.bouttonmenu{ /*meme chose que le boutton retrouner en haut mais permet d'aller sur la page principal */
  position: fixed;
  bottom: 20px;
  right: 20px;
  border: 2px solid #d90429;
  border-radius: 50%;
  color: white;
  background-color: #ef233c;
  text-decoration: none;
  box-shadow: 0 2px 5px rgba(0,0,0,0.5);
  width: 40px;
  height: 40px;
  transition: 0.3s;
}

.bouttonmenu:hover { /* pour les 2 boutton c'est l'aggrandisement lorsqu'on passe notre curseur dessus */
  transform: scale(1.20);
  box-shadow: 0 0 10px #9f0025;
}

.bouttonhaut:hover {
  transform: scale(1.20);
  box-shadow: 0 0 20px #9f0025;
}


/*les animation permet de faire plusieur chagement afin d'y voir un 'animation' sur un element*/

@keyframes fonduhaut{ /*permet de voir un element avec un fondu haut (voir page CV)*/
  0%{ /*a létape 0 on ne doit pas voir l'élément et il doit entre en peut plus pas */
    opacity: 0;
    transform: translateY(30px);
  }
  100% { /*puis a la fin de l'animation il redevien visible et retrouve son ordonner a l'orignine*/
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes fondubas{ /*permet de voir un element avec un fondu bas (voir page INTERESTS)*/
  0%{
    opacity: 0;
    transform: translateY(-50px);
  }
  50%{
    opacity: 0.5;
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes textrebond { /*fait un mini rebond que l'on voit sur la page principal*/
  25%{ transform: translateY(-30px); }
  100%{transform: translateX(0px);}
}


.indexbody{ /*utilisaton d'un body spécial afin d'avoir une couleur de fond différent mais toujour unifprme des autre page*/
  background: #2b2d42;
  color: white;
}

.indextitre{ /*correspond sur la page aux 'WELCOME INTO MY WEB SITE !'*/
  text-align: center;
  font-size: 2em;
  font-weight: bold;
}

.indextitre h1:hover{ /*on remarque que l'on utilise l'animation rebond-text expliquer jsute avant*/
  animation: textrebond 0.7s ease-in; /*le ease-in est une manier a l'animation de se presenter le esase in lui dit qu'aux debut de l'animation il est lent puis il est la rapide a la fin */
}

.indexdesc{ /*petite parti description en dessous de mon titre*/
  text-align: center;
  font-size: 0.60em;
  margin-bottom: 55px;
}

.indexlogo { /*logo qui est present en haut de page */
  width: 50px;
  height: 50px;
  margin-top: 20px;
  margin-left: 20px;
}


.cvpage{  /*c'est le contour blanc que l'on voit sur la page CV*/
  background-color: white;
  width: 80%;
  margin: 40px auto; /*ce margin permet de mettre un espacement en haut et en bas de 40px et de centrer autotmatiquement les espacement sur les coter */
  padding: 50px;
  border: 0.1px solid grey; 
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  animation: fonduhaut 0.7s ease-out; /*on réutilise l'animation que j'ai utiliser avant*/
}

.cvphoto { /*c'est ma magnifique photo que l'on voit sur le cv*/
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 2.5px solid grey;
  object-fit: cover;  /*cette proprieter permet de dire a l'image comment elle doit etre rogner si sa dimension ne convient pas ici le cover pet de remplir la cercle pour inserer la photo*/
  flex-shrink: 0; /* cela permet de ne pas rendre l'élément flexible ici cela permet de ne pas rendre l'emement ovale */
}

.titrecentre { /*correspond aux titres que l'on voit sur les differente section du CV : Contact Details , Educational Background , Academic Projects, etc*/
  color: #2b2d42;
  font-size: 1.2em;
  text-transform: uppercase;
  letter-spacing: 0.5px; /*cette proprieter perrmet de chnager l'espace entre les lettres*/
  display: inline-block; /*cette proporeiet permet par exemple aux bordure du s'appliquer uniquement aux text au lieu de s'appliquer a toute la largeur de la page*/
  border-bottom: 3px solid #d90429;
}

.cvmillieu{  /* cette class va permettre de structure  */
  display: grid;  /*cela active le mode grid qui va servire a faire la séparation entre la parti gauche de mon cv et sa parti droite*/
  grid-template-columns: 1fr 2fr; /*cette propriete nous permet de répartir l'espace entre les colonne on voi donc que la premier cologne prend 1 (33%)place alors que le 2eme colone prend l'equivalent de 2 (77%)*/
  gap: 50px; /* signifie l'espacement entre les 2 colonnes*/
}

.cventete{ /* permet a la photo aux titre principal du cv d'etre aligner */
  display: flex;
  align-items: center;
  gap: 30px;
  text-align: left;
  margin-bottom: 40px;
}

.cventetecontenu h2{ /* cela correspond aux haut titre dans l'entete */
  font-size: 2.5em;
  color: #2b2d42;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.cventetecontenu h3{ /* de meme mais pour la description de l'entete  */
  color: grey;
  font-weight: 600;
}

.cvmillieu dl { /* ca permet d'avoir un petit espacement entre les petit bail */
  margin-bottom: 20px;
}

.cvmillieu dt { /*c'est le petit titre en gars que l'on voit par exemple dans Educational Background : 2025 - 2028 (current) : */
  font-weight: bold;
  color: #2b2d42;
  font-size: 1.05em;
  margin-bottom: 5px;
}

.cvmillieu dd {  /* cela correspond aux contenu sur du cv */
  margin-left: 6px;
  padding-left: 15px;
  border-left: 3px solid #d90429;
  color: #444;
  line-height: 1.5;
}

.cvmillieu ul { /*utilisation des liste dans mon cv*/
  list-style: none;
  padding-left: 0; /*permet d'enlever le padding par defaut des liste*/
}

.cvmillieu li { /*permet d'aligner mes icones qui sont utiliser sur dans mes infromation personelle */
  margin-left: 6px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.cvsoft li{ /* correpsond aux boutton rouge */
  display: inline-block;
  padding: 5px 10px;
  text-align: center;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  background-color: #d90429;
  color: white;
}

.cvsoft a{  /*correpsond aux lien des boutton rouge de soft skill*/
  text-decoration: none;
  color: white;
  transition: 0.2s;
}

.cvsoft a:hover{
  text-shadow: 0px 0px 20px white;
  font-size: 1.2em;
}


.townpage { /*correspond aux contour de la page my town */
  width: 70%;
  margin: 40px auto;
  padding: 50px;
  border: 0.1px solid grey;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  animation: fonduhaut 1.2s ease-in;
  text-align: center;
  background-color: white;
}

.townpage iframe { /*correspond a la carte openstreet de la page town */
  width: 100%;
  height: 400px;
}

.townpage h2{
  font-weight: bold;
  font-size: 1.5em;
  color: #2b2d42;
  padding-bottom: 20px;
  border-bottom: 3px solid #d90429;
}

.townpage h3{
  font-weight: bold;
  font-size: 1.2em;
  text-transform: uppercase;
  color: #2b2d42;
  padding-bottom: 20px;
  border-bottom: 1px solid #d90429;
}

.townpage p{
  display: inline-block;
  border-left: 2px solid #d90429;
  padding-left: 5px;
}

.townpage audio{
  margin: 15px auto;
}


.videointer { /* correspond aux contour de l'iut */
  background-color: white;
  width: 80%;
  margin: 40px auto;
  padding: 50px;
  border: 0.1px solid grey;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  animation: fondubas 0.7s ease-in;
  text-align: center;
}

.videointer h2{
  font-weight: bold;
  font-size: 1.5em;
  color: #2b2d42;
  padding-bottom: 20px;
  border-bottom: 3px solid #d90429;
}


.iutpage {  /*contour present dans my iut*/
  background-color: white;
  width: 60%;
  margin: 40px auto;
  padding: 50px;
  border: 0.1px solid grey;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  animation: fondubas 0.7s ease-out;
  text-align: center;
}


.bookfilm{ /*le contour de la page book and film*/
  display: grid;
  grid-template-columns: 3fr 1fr; /*meme principe que pour le cv*/
  gap: 20px;
  background-color: white;
  width: 80%;
  margin: 40px auto;
  padding: 50px;
  border: 0.1px solid grey;
  border-bottom-left-radius: 20px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  animation: fonduhaut 0.7s ease-out; 
}

.bookfilm h2{
  display: inline-block;
  font-size: 2.5em;
  color: #2b2d42;
  margin-bottom: 5px;
  text-transform: uppercase;
  border-bottom: 3px solid #d90429;
}

.bookfilm em{
  font-size: 1.35em;
}

.bookfilm aside{ /* correspond aux contour rouge a droite de la page book and film ou il y a les images */
  background-color: #ef233c;
  color: white;
  text-align: center;
  height: 600px;
  width: 320px;
  text-transform: uppercase;
  font-weight: 600;
  border: 3px solid #d90429;
  border-bottom-left-radius: 50px;
  overflow-y: scroll; /* defini se qui si passe qui les element a l'intereur du conteneur depasse : donc ont peut scroller */
  object-fit: fill;
  scrollbar-color: white #2b2d42; /*change la couleur de la scrollbar*/
  padding: 10px;
}

.bookfilm img{ /*permet juste de mettre du contour sur les images*/
  border: 3px solid #2b2d42;
  border-radius: 10px;
  transition: 0.3s;
}

.bookfilm img:hover{ /*ajoute une petite animation sur les images */
  border: 5px solid white;
  border-radius: 3px;
  transform: scale(0.90); /*permet de reduire la taille de l'image*/
}

.bookfilm p { /* correspond a la ligne rouge a droit des description du film et livre */
  border-left: 2px solid #d90429;
  padding-left: 10px;
}