/* 1. GRIDS */
#container_grids,
#container_grids_plus {
  display: grid;
  grid-gap: 30px;
  align-content: center;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-column-gap: 20px
  grid-row-gap: 20px
  justify-items: stretch
  align-items: stretch
}
.grid__item {
  height: 100px;
  border-radius: 8px;
  background: burlywood;
  text-align: center;
  align-content: center;
  min-height: 200px;
}






/* 2. PLUS */

/* COUNTER */
/* https://developer.mozilla.org/fr/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters */
#container_grids_plus  {
  counter-reset: section;
}
#container_grids_plus  
.grid__item::before {
  counter-increment: section;
  content: counter(section);
  margin-top: -100px;
  display: block;
}




/* BACKGROUNDS */
/* https://developer.mozilla.org/fr/docs/Web/CSS/background */


/* VARIABLES */
/* VERIABLES on leur attribue une valeure...
qu'on peut réutiliser plusieurs fois !!! */
:root {
  --backcolor: rgb(223, 169, 99);
  --frontcolor: brown;
}




/* !IMPORTANT, outrepasser les styles "inline", valeurs attribuées directement dans les éléments (HTML) */
#container_grids_plus 
.grid__item {
  font-weight: bold;
  border: 1px solid var(--frontcolor);
  color: var(--frontcolor);
  
  /* https://developer.mozilla.org/fr/docs/Web/CSS/background-size */
  background-size: cover !important;
  background-position: center center !important;
}



/* CIBLAGE complexe */
/* https://learn.shayhowe.com/advanced-html-css/complex-selectors/ */
#container_grids_plus 
.grid__item:hover {
  color: #FFF;
  text-shadow: 0px 0px 5px var(--frontcolor);  
}
#container_grids_plus 
.grid__item:not(:hover) {
  background-image: unset !important;
  background-color: var(--backcolor) !important;
}

/* ENFANTS dernier dans la classe .wrapper_container */
/* https://developer.mozilla.org/fr/docs/Web/CSS/:last-child */
#wrapper 
.wrapper_container:last-child {
  margin-bottom: 6rem;
}

/* NTH */
/* https://developer.mozilla.org/fr/docs/Web/CSS/background-size */