table {
  border: 2px solid #000000;
  background-color : #f0f0f0 ;
  width: 100%;
  max-width: 900px;
  border-spacing:0;
  table-layout:fixed;
  box-shadow: 4px 4px 8px #202020; /*droite,bas,diffusion,couleur*/
}



@media (min-width:600px) { /* Sur écran large */
  table {
	margin: 1.2rem 0.5rem 0.5rem 0.5rem; /* haut droite bas gauche */	  
  }
  table th {
    background-color:#b5b5b5;
    border-right: 1px solid #000000; 
    border-bottom: 1px solid black;
  }
  table th:last-child{
    border-right:none;
  }

  table td {
    padding:0.4rem;
    border-right: 1px solid #000000;  
  }
  table td:last-child{
    border:none;
  }

  table tr:nth-child(even) {
    background-color:#ffffff;
  }

  table tr:hover {
    background-color: #e0e0ff;
  }
}
/* Pour rendre le tableau "responsive"
(il s'affiche par bloc en cas d'écran étroit)*/
@media (max-width: 600px){
  table {
	box-shadow:none;
	margin: 1.2rem 0rem 0.5rem -0.3rem; /* haut droite bas gauche */	  	
}
  
  table th {
    display: none;
  }
  table tr{
    display: block;
    border-bottom:1px solid black;
  }
  table tr:first-child{border:none;display:none;}
  table tr:last-child{border:none;}
  
  table tr:nth-child(odd) {
    background-color:#ffffff;
  }

/* Crée un espace avant et après la bordure de séparation des cellules*/
  table tr::after{
    content:'⁣⁣\2063';   /* Caractère invisible (+U2063) pour afficher une ligne supplémentaire */
    font-size:0.2rem;
  }
  table tr::before{
    content:'\2063';   /* Caractère invisible (+U2063) pour afficher une ligne supplémentaire */
    font-size:0.2rem;
  }

  table td {
    display: block;
    text-align: right;
  }
  table td::before {
    content: attr(col);   /* Affiche la catégorie à gauche */
    float: left;
    font-weight: bold;
  }
  table td:first-child{   /* Souligne le thème */
    text-decoration: underline;
  }
}