.gridFormation {
  margin: 0 auto;
  display: grid;
  grid-template-columns: 100px 1fr;
  grid-template-rows: auto;
  width: 95%;
  gap: 10px;
  /*background-color: tomato;*/
}
.formationG {
  grid-column:1;
  font-size: 90%;
  /*! background-color: aqua; */
}
.formationD {
  grid-column:2;
  font-size: 90%;
  /*! background-color: lime; */
}

/* XXXXXXXXXX MEDIAS XXXXXXXXXXXX */
/* XXXX A5 portrait XXXX */
@media only screen and (max-width : 768px) and (orientation : portrait) {
  .gridFormation {
    display: block;
    margin-left:5px;
  }
  .formationG {margin-top:5px;}
  .formationD {margin-left:10px;}
}


/* XXXX A5 paysage XXXX */
@media only screen and (max-width : 1024px) and (orientation : landscape) {

 .gridFormation {
    grid-template-columns: 22% 1fr;
 }
 .formationG {}
 .formationD {}


}

/* XXXX Tablette portrait XXXX */
@media only screen  and (min-width : 769px) and (max-width : 834px) and (orientation : portrait) {

  .gridFormation {
    display: block;
    margin-left:5px;
  }
  .formationG {margin-top:10px;}
  .formationD {margin-top:5px;margin-left:10px;}
  
}



/* XXXX Tablette paysage XXXX */
@media only screen  and (min-width : 1025px) and (max-width : 1112px) and (orientation : landscape) {

 .gridFormation {
    grid-template-columns: 20% 1fr;
 }
 .formationG {}
 .formationD {}

}