/*Concerne l'intégralité du main */
main {
  width: 80%;
  margin: 0 auto;
  padding-bottom: 10vh;
}
/* je touche à ma boite section principale */
main section {
  margin: 50px 0;
}
/* je touche au phrase en caractere gras */
strong {
  font-family: "Poppins";
  font-weight: bold;
  font-size: 20px;
  line-height: 2.5;
}
/*Concerne les sous-titres des menus des politiques des données et à propos des cookies */
main h2 {
  color: var(--couleur-accent-un);
  /* margin: 30px 0; */
}
/*Concerne l'intégralité des textes */
main p {
  padding: 0;
}
/*concerne laes listes dans politiques de protection des donnees */
main li {
  margin: 0 55px;
}
/*******************************************************************************/
/******************** Les fleches qui ouvrent les sous-menus *******************/
/*Agit sur la vitesse des transitions pour faire apparaître un des sous-menus quand on clique sur une fléche*/
main details[open] summary ~ * {
  animation: sweep 1.5s ease-in-out;
}
/* Concerne l'animation de l'apparition des sous-catégories*/
@keyframes sweep {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
/****************************************************************/
/******************** A propos des cookies **********************/
/**********************TABLEAU************************************/
/* Concerne la mise en page du tableau */
main table:nth-of-type(1) {
  width: 90%;
  margin: 40px auto;
}
/* Concerne la mise en forme du tableau */
main table:nth-of-type(1) {
  width: 100%;
  margin: 20px auto;
}
/*Concerne la typographie et les éléments à l'intérieur du tableau */
main tr,
td,
th {
  border: var(--couleur-primary);
  border-style: inset;
  text-align: center;
  padding: 10px;
}
/*Enlève les tirets des menus*/
main summary {
  list-style: none;
  cursor: pointer;
}
/*********************************************************************/
/******************** Dernière section *******************************/
/***********************google analytics*****************************/
/* je touche aux derniers phrase google analytics */
main section:last-child {
  padding-bottom: 15px;
}
/*********************************************************************/
/******************** Media query ************************************/
/*********************************************************************/
/*********************************************************************/
/* Pour le format tablette  */
@media screen and (max-width: 1024px) {
  /* Concerne la largeur que le body occupe de la page */
  main {
    width: 90%;
  }
  /* Concerne les textes */
  main p {
    width: 100%;
    margin: 14px auto;
  }
  /* Concerne la taille de la typo et le centrage et des  les sous menus Politique de protection des données */
  main h2 {
    margin: 20px auto;
  }
  main li {
    font-size: 28px;
    width: 100%;
    margin: 0 5px;
  }
}
/*********************************************************************/
/* Concerne la version mobile */
@media screen and (max-width: 668px) {
  /* Concerne les textes */
  main p {
    width: 100%;
    margin: 20px auto;
  }
  /* Concerne les titres des sous catégories Politiques de protection des données */
  main h2 {
    font-size: 27px;
    margin: 30px auto;
  }
  /*Concerne les sous-texte*/
  main li {
    font-size: 15px;
    width: 100%;
    text-align: justify;
    margin: 0 5px;
  }
}