/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/

/*      POUR CACHER ou DECACHER, on joue sur les DISPLAY */
.rideau2 {              /* Rideau des listes */
    display:contents;
/*    display: none;   */
}
.rideau1 {              /* Rideau qui cache */
    display: flex;
    display: none;  
    justify-content: center;
    font-size: clamp(10px, 5.5vw ,40px) ;
    color: blue;
    font-weight: 700;
 }

/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/

table {
    width: 40%;
    table-layout: fixed;
    border: 0px solid black;
    margin: 0;
    padding: 0;
    margin-bottom: 10px;
    border-collapse: collapse; /* Fusionne les bordures */
}
.latable {
    display: flex;
    justify-content: center;
}
td {
    border: 1px solid black;
    font-size: clamp(10px, 1.1vw, 18px); 
}
.NP {
    padding-left: 1vw;
}
.NUMERO{
    color: red;
    font-weight: 700;
    text-align: center;
}
.titrecolonne {
    font-size: 1.2vw; 
    font-size: clamp(10px, 1.1vw, 18px);   
    color: black;
    font-weight: 700;
    text-align: center;
    background-color: rgba(242, 160, 60, 0.4);    
}
.titre1, .titre2, .titre3, .s-titre1, .s-titre2, .s-titre3 {
    margin: 0;
    padding: 0;
    padding-top: 0px;
    height: auto;
    text-align: center;
}
.titre1 td {
    color: blue;
    background-color: rgba(0, 0, 255, 0.2);
    font-size: 2vw;
    font-weight: 700;
}
.s-titre1 td {
    color: blue;
    background-color: rgba(0, 0, 255, 0.2);
    font-size: 1.3vw;  
    font-weight: 500;
}
.titre2 td {
    color: green;
    background-color: rgba(1, 128, 0, 0.1);
    font-size: 2vw;
    font-weight: 700;
}
.s-titre2 td {
    color: green;
    background-color: rgba(1, 128, 0, 0.1);
    font-size: 1.3vw;
    font-weight: 500;
}
.titre3 td {
    color: red;
    background-color: rgba(255, 0, 0, 0.2);
    font-size: 2vw;
    font-weight: 700;
}
.s-titre3 td {
    color: red;
    background-color: rgba(255, 0, 0, 0.2);
    font-size: 1.3vw;
    font-weight: 500;
}
.separateur {
    height: 2vw;
}
td:nth-child( 0){
    background-color: red;
}


/* ───────────────────────────────────────────────────────────────────────────────────────────────────── */
/*   ECRAN INFERIEUR A 900px */
/* ───────────────────────────────────────────────────────────────────────────────────────────────────── */

@media screen and (max-width: 900px)  {
table {
    width: 50%;
}
}
/* ───────────────────────────────────────────────────────────────────────────────────────────────────── */
/*   ECRAN INFERIEUR A 500px */
/* ───────────────────────────────────────────────────────────────────────────────────────────────────── */

@media screen and (max-width: 500px)  {
table {
    width: 70%;
}
}