/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/*      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;
 }
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
article {
/*border: 5px solid rgb(249, 6, 6);  */
    width: 90%;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
article .rideau2 .ecran {
    margin: 0;
    padding: 0;
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: #f9d499;
    width: 50%;
    height: auto;
    min-height: 300px;
    text-align: left;
    border: 3px solid blue; 
    border-radius: 25px;
}
article .rideau2 .ecran p a{
    margin-left: 10px;
    text-decoration: none;
    font-size: 2.5vw;
    font-weight: 700;
    padding: 5px 30px;
    pointer-events: stroke ;                   /* pour que le pointeur de la souris ne change pas en passant dessus */
    transition: 0.2s;
}
article .rideau2 .ecran p a:hover{
    color: white;
    border: 1px solid black;
    background-color: #835306;
    background-color:blue;
    border-radius: 20px ;
}
/* ───────────────────────────────────────────────────────────────────────────────────────────────────── */
/*   ECRAN supérieur A 1200px */
/* ───────────────────────────────────────────────────────────────────────────────────────────────────── */

@media screen and (min-width: 2000px)  {
    article .rideau2 .ecran p a{

        font-size: 48px;
    }
}

/* ───────────────────────────────────────────────────────────────────────────────────────────────────── */
/*   ECRAN COMPRIS ENTRE  500 et 900 px */
/* ───────────────────────────────────────────────────────────────────────────────────────────────────── */
@media screen and (min-width: 501px) and  (max-width: 900px)  {
    article .rideau2 .ecran {
        width: 60%;
    }    
    article .rideau2 .ecran p a{
        padding: 0;
        font-size: 3.5vw;
    }
}

/* ───────────────────────────────────────────────────────────────────────────────────────────────────── */
/*   ECRAN INFERIEUR A 500px */
/* ───────────────────────────────────────────────────────────────────────────────────────────────────── */

@media screen and (max-width: 500px)  {

    article .rideau2 .ecran {
        width: 60%;
    }    
    article .rideau2 .ecran p a{
        padding: 0;
        font-size: 4vw;
    /*    font-size: clamp(10px,3vw, 30px); */
    }
}