@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

/* Pour les polices importées */
/* @font-face {
  font-family: 'FontName';
  src: url();
} */

/* L'étoile attribut le  style à TOUS les éléments */
/* Elle permet d'annuler tous les réglages par défaut */
* {
  margin: 0;
  padding: 0;
}

/* Les styles doivent s'annoncer dans l'ordre des balises HTML */
/* Les balises inférieures hériteront automatiquement des attributs notifiés dans body ou main */

body {
  font-family: "Montserrat", sans-serif;
  background: url(../../../asets/background/texture-papier-kraft.png)
    center/cover;
  /* Viewport height VH = 100% de l'écran de l'utilisateur */
  min-height: 100vh;
}

/* boite principale du site */
main {
  min-height: 400px;
  width: 90%;
  background: rgb(245 245 245 / 57%);
  /* Centrer la boite horizontalement */
  margin: auto;
  padding: 15px;
  border: 2px solid #4259a5;
  border-radius: 10px;
  box-shadow: 4px 8px 8px #000000e3;
}

/* FLEXBOX sert à répartir équitablement des éléments dans leur bloc  parent*/
.flexbox,
.grid,
.absoluteR {
  border: 2px solid black;
  padding: 10px;
  margin-top: 20px;
}
/* PARENT du  flex  */
/* C'est  dans cet l'élément que l'on déclare la disposition flex. Tous les réglages d'alignement-répartition se font ensuite dans la console du navigateur */
.flexbox ul {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
/* ELEMENTS à répartir */
.flexbox li {
  list-style: none;
  height: 150px;
  width: 150px;
  margin: 10px;
  background: blue;
  /* Pour centrer l'élément unique de ces boites  */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* GRID sert à répartir des éléments ,de façon personnalisée,  dans leur bloc  parent*/
/* PARENT du grid */
.grid-container {
  display: grid;
  grid-template-columns: 30% 70%;
}
/* ENFANTS du grid */
.grid img {
  width: 60%;
  margin: auto;
}
form {
  display: grid;
  /* dans la répartition il faut 2 colonnes et 3 lignes */
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  /* on dessine la façon dont les éléments seront répartis dans le grid */
  grid-template-areas:
    "i1 i2"
    "ta ta"
    "vi bt";
}
/* on attribut aux éléments le code qui lui correspond dans l'areas  */
textarea {
  grid-area: ta;
  /* interdire le redimensionnement manuel de l'élément textarea  */
  resize: none;
}
#btn-submit {
  grid-area: bt;
  /* montrer que l'élément est cliquable */
  cursor: pointer;
  transition: 0.2s;
}
#btn-submit:hover {
  background: blue;
  color: whitesmoke;
}
/* on formate les différents éléments */
input,
textarea {
  margin: 5px;
  padding: 10px;
  border: solid 1px darkblue;
  border-radius: 5px;
  height: 40px;
  font-size: 1.1rem;
  font-family: "Montserrat", sans-serif;
}

/* la position ABSOLUTE  sert à placer un élément n'importe où dans  le body*/
#circle1 {
  height: 60px;
  width: 60px;
  background: red;
  border-radius: 90px;
  position: absolute;
  top: 0;
  right: 0;
}
/* si on veut contraindre l'élément à se positionner dans son bloc parent, il faut donner à ce parent la postion RELATIVE*/
.absoluteR {
  height: 150px;
  position: relative;
}
#circle2 {
  height: 60px;
  width: 60px;
  background: green;
  border-radius: 90px;
  position: absolute;
  /* pour positionner un élément absolute en chevauchement */
  top: -20px;
  right: -20px;
}
#circle3 {
  height: 60px;
  width: 60px;
  background: blue;
  border-radius: 90px;
  position: absolute;
  /* pour centrer un élément absolute par rapport à ses bords */
  left: 50%;
  /* pour rectifier le centrage par rapport à son centre */
  transform: translate(-50%);
}

/* Réglage des TITRES */
/* Les tailles de polices peuvent être en REM  (fixe)
ou en VW (%variable selon la largeur de l'écran)*/
h1 {
  text-transform: uppercase;
  letter-spacing: 5px;
  text-align: center;
  font-size: 4vw;
  font-weight: 900;
  text-shadow: 4px 8px 8px #000000e3;
  color: #4259a5;
  margin-bottom: 20px;
}

h2 {
  font-size: 3vw;
  font-style: italic;
}

/* RESPONSIVE  */
/* Ceci désigne le fait que quel que soit la taille de l'écran, la page reste lisible, sans débordement. */
/*  1. tester avec la console à 100%, la largeur à partir de laquelle il y a un débordement */
/* 2. faire les modifications nécessaires  :
-  passer les éléments des FLEX et GRID en alignement BLOCK
- réduire et recentrer les images*/
@media screen and (max-width: 900px) {
  .grid-container {
    display: block;
  }
  .grid-container img {
    width: 20%;
    margin: auto;
    display: block;
  }
}
/* 3. Continuer à réduire la largeur de l'écran, pour repérer le 2ème débordement et faire d'autre modifications nécessaires*/
@media screen and (max-width: 640px) {
  .flexbox ul {
    flex-direction: column;
    align-items: center;
  }
  form {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas:
      "i1"
      "i2"
      "ta"
      "bt";
  }
  input,
  textarea {
    font-size: 0.8em;
  }
}