/**********************************************/
/* Mini Framework pour GRID Layout  ===================================*/

/* Memo : 
grid-template : grid-template-rows / grid-template-columns
EXEMPLE -> grid-template 60% 20px / 200px 1rem 

grid-area : grid-row-start / grid-column-start / grid-row-end / grid-column-end
EXEMPLE -> grid-area : 1 / 1 / 3 / 2

Voir aussi les utilitaires pour Flex de BOOTSTRAP 5, 
qui marchent bien avec Grid Layout.
Voir https://getbootstrap.com/docs/5.1/utilities/flex/
*/

/********************   Mobile First ********************/
/* Rappel : par défaut Grid Layout a un flow en 'rows', par opposition à Flex Layout qui est par defaut en 'columns' */

.d-grid, 
.d-grid-interne {
  display:grid;
  gap: 1rem;
  min-width: 0;
}

.grid__autocol {
  grid-template-columns: repeat(auto-fit, minmax(300px, 400px));
}

.grid__2col-allmedias{
  grid-template-columns: repeat(2, 1fr);
}

.grid__12-allmedias{
  grid-template-columns: 1fr 2fr;
}

.grid__13-allmedias{
  grid-template-columns: 1fr 3fr;
}

/********************   Tablettes et desktop ********************/
@media screen and (min-width: 768px) {

  .grid__2col{
    grid-template-columns: repeat(2, 1fr);
  }

  .grid__3col{
    grid-template-columns: repeat(3, 1fr);
  }

  .grid__4col{
    grid-template-columns: repeat(4, 1fr);
  }

  .grid__12{
    grid-template-columns: 1fr 2fr;
  }

  .grid__21 {
    grid-template-columns: 2fr 1fr;
  }

  .grid__13{
    grid-template-columns: 1fr 3fr;
  }

  .grid__31{
    grid-template-columns: minmax(10px, 3fr) minmax(10px, 1fr);
  }

  .grid__14{
    grid-template-columns: 1fr 4fr;
  }

  .grid__41{
    grid-template-columns: 4fr 1fr;
  }

  .grid__34{
    grid-template-columns: 3fr 4fr;
  }
}

/************** HEADER ***************/


/************** FOOTER ***************/
.grid__footer {
  gap: 4rem;
  justify-items: center;
}

@media screen and (min-width: 992px) {
  .grid__footer {
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 2rem;
    justify-items: center;
  }
}

.copy_credits {
  display: grid;
  gap: 1rem;
}

@media screen and (min-width: 992px) {
  .copy_credits {
    display: flex;
    justify-content: space-between;
  }
}

/**********************************************/
/* UTILITAIRES  ==============================*/

/* Effet de calque **************/
/* Tous les items sont exactement dans le même aréa. Il vont alors s'empliler dans l'ordre d'apparition dans le DOM */
/* Ex. : image PUIS texte  = le texte apparaîtra au-dessus de l'image */
.d-superpose * {
  grid-area: 1 / 1 / 1 / 1;
}

/* Par defaut une grille a un flow = row */
/* gaf = grid-auto-flow */
.gaf-column {
  grid-auto-flow: column;
}


/* Items : centrés horizontalement et verticalement */
.items_center {
  place-items: center;
}

/* Items : Alignement horizontale Items */
.justify-items--center{ justify-items: center; }
.justify-items--center{ justify-items: center; }

/* Self : Alignement vertical */
.align-self--center { align-self: center; }
.align-self--bottom { align-self: end; }

/* Self : Alignement horizontal */
.justify-self--center { justify-self: center; }


/* Spéciales */
.grid__liste_logos {
  justify-content: center;
  align-items: center;
}