:root {/*initialise des variable dans tout le document*/
  --couleurBleu: #187ac5;
  --couleurFoncee: #0e436c;
  --couleurTresFoncee: #092a44;
  --couleurClaire: #e6f3ff;
  --couleurAccent: #ff6b6b;
}

body {
  margin: 0;
  font-family: 'Roboto', sans-serif;/*aplication de la police d'écriture sur tout le site*/
  line-height: 1.6;
  color: #333;
}

#header {
  width: 100%;
  height: 40vh;/*les unité vh et vw son des unité qui ce réfère à la hauteur et largeur de l'écran*/
  background-image: url("Data/Images/carousel.jpg");
  background-repeat: no-repeat;
  background-size: 300%;/*paramètre indispensable pour mon "carousel", il augment la taille de l'image de fond pour n'en voir qu'une partie*/
  background-position-x: left;/*décale l'image de fond pour ne montrer que l'image attribué au menu (je décale l'image de fond dans le JS en fonction de quelle bouton du menu on survolle*/
  background-position-y: center;
  position: relative;
  display: flex;
  justify-content: center; /* centrage horizontal */
  align-items: center; /* centrage vertical */
  transition: background-position-x 3s ease;/*les transitions me permettent d'adoussir les changement de style*/
}

a {
  text-decoration: none;
  font-style: italic;
  color: var(--couleurTresFoncee);/*ici j'utilise une variable d'éclarée plus haut*/
  font-weight: bold;
}

.Titre {
  position: absolute;
  text-align: center;
  color: white;
  /*background-color: hsla(0, 0%, 0%, 70%);*/
  padding: 2rem;
  border-radius: 10px;
  display: flex;
  justify-content: center; /* centrage horizontal */
  align-items: center; /* centrage vertical */
  height: 20vh;
}

.Titre h1 {
  font-size: 4vw;
}

.carousel img {
  width: 100vh;
  height: auto;
}

nav {
  display: flex;
  position: sticky;
  justify-content: center;
  top: 0;
  overflow: hidden;
  background-color: var(--couleurTresFoncee);
  transition: all 1s ease;/*autre exemple de transition*/
}

nav div {
  background-color: var(--couleurTresFoncee);
  padding: 1rem 0;
  display: flex;
  border-radius: 5px;/*arrondit les angles*/
  transition: all 1s ease;
}

nav div a {
  color: white;
  text-decoration: none; /*empèche le style apliqué de base sur les liens*/
  font-style: normal;
  font-weight: bold;
  padding: 0.1rem 1rem;
  margin: 0 0.5rem;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

nav div a.active {/*style pour diférencier des autre "onglet" et savoir dans quelle page on est*/
  background-color: var(--couleurBleu);
  /*color: var(--couleurAccent);*/
}

nav div a:hover{/*changement de la couleur au passage de la souris*/
  background-color: var(--couleurFoncee);
}

main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.paragraphe {
  margin-bottom: 3rem;/*rem est une unité qui se réfère à la taille de la police du support d'affichage*/
}

h2 {
  color: var(--couleurBleu);
  border-bottom: 2px solid var(--couleurBleu);
  padding-bottom: 0.5rem;
  width: 60%;
  text-align: justify;
}

footer {
  background-color: var(--couleurFoncee);
  color: white;
  padding: 2rem 0;
}

.footer {
  display: flex;
  justify-content: space-around;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-section {
  flex: 1;
  margin: 0 1rem;
}

.footer-section h3 {
  color: var(--couleurAccent);
}

.footer-section a {
  color: white;
  text-decoration: none;
  display: block;
  margin-bottom: 0.5rem;
}

.droits-réservé {
  text-align: center;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1); /*créer une bare en haut de l'élément*/
}

#pallette_projet {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 50px;
}

#pallette_projet a {
  width: 20vw;
  height: 20vw;
  display: flex;
  justify-content: center; /* centrage horizontal */
  align-items: center; /* centrage vertical */
  transition: all 1.0s ease-in-out;
  margin: 2vw;
  background-image: radial-gradient(#0e446d 0%, var(--couleurBleu) 20%, transparent 75%);/*ici je créer un dégrader pour les background des différent projet*/
}

#pallette_projet a img {
  width: 100%;
  height: auto;
}

#pallette_projet a:hover {/*corespond à l'appele de fonction JS onmousover*/
  /* background-image: radial-gradient(#0e446d 0%, var(--couleurBleu) 20%, transparent 40%); */
  box-shadow: 2px #000000;/*créer une ombre*/
  border-radius: 50%;
  box-shadow: 8px 8px 5px hsl(0, 0%, 15%), 13px 13px 5px hsl(0, 0%, 25%);
  /* filter: drop-shadow(8px 8px 0px hsl(175, 100.00%, 50.00%)); */
  transform: scale(1.15);/*augmente la taille de l'élément*/
}

@media (max-width: 800px) {/*définit un style particulier en fonction de la taille maximal de l'écran ici d'un téléphone permetant un meilleur affichage sur tout les appareil (très utiliser pour faire des sites "responsive" mais encore en développemnt dans mon cas)*/
  .footer {
    flex-direction: column;
  }
  
  .footer-section {
    margin-bottom: 1rem;
  }
}