.burger, label span {
        display: none;
}
nav {
        grid-area: nav;                             /* Nom de la zone GRILLE */
        background-color: #f9d499;
        display: flex;                              /* je fais de "nav" un conteneur    */
        justify-content: right;                     /* placer le menu à droite */
}
#navToggle{
        display: none;
}
nav ul{
        padding: 0;
        margin: 0;
        margin-top: 5px;
        margin-bottom: 5px;
        margin-right: 75px;
        list-style: none;                           /* j'enlève les puces de la liste */
        display: flex;                              /* je fais du "liste menu" un conteneur     */
                                                    /* => l'axe horizontal est le principal */
                                                    /*    et on s'aligne à gauche           */
        flex-direction: row;                        /* flex mets tout en horizontal DONC je passe en Colonne  */  
}           
nav ul li {
        position: relative;
        padding-left: 3.5vw;
        font-size: clamp(4px, 3vw, 30px);          /* taille de la police en variable */
        position: relative;                         /* on pourra positionner le sous menu en absolu par rapport au "li" courant */
        white-space: nowrap;                        /* pour éviter le retour à la ligne du même élément */
}
nav ul li a{
        text-decoration: none;                      /* j'enlève les soulignés des liens */
        font-weight: 700;                           /* lettre plus grasse  */
        color: blue;                              /* couleur texte */  
        border-bottom: 2px solid blue;    
        border-left: 1px solid transparent;
        border-right: 1px solid transparent;

}
nav ul li  a:hover{                                 /* si je survole lien */
        color: white;                             /* couleur du texte */
        background-color: blue;                   /* fond du texte */ 
        border: 1px solid rgb(255, 255, 255);                  /* bordure du texte */  
        border-radius: 5px;                         /* coin arrondi de la bordure */
        transition: 0.3s;                           /* tout cela en 0.5 sec */
        pointer-events: auto;                       /* mon pointeur souris est opérationnel  */
}

nav ul li a span{                                    /* position  couleur ... de la petite flèche */
        color: blue;
        color: red;
        position: absolute;
        right: -40px;
/*        width: 25px;  */
}


/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++  */
nav ul ul {     
        position: absolute;
        left: 0px;
        top: 82%;
        flex-direction: column;
        background-color: #f9d499;
/*                background-color: #a1f999;   */
        padding-bottom: 10px;
        opacity: 0;                                     /* pour que on ne le voit pas en arrivant */
        pointer-events: none;                           /* la souris ne change pas */
/*        transform: translateY(-200%);                 /* j'envoie le menu 2 dans les cintres pour mieux le faire redescendre */
        transform: translatex(+200%);
}
nav ul ul li {
        float: none;
        white-space: nowrap;                            /* pour éviter le retour à la ligne du même élément */
        font-size: clamp(10px, 3vw, 30px);
        padding-bottom: 5px;
}
nav ul li:hover ul {                                    /* je pointe in items de la list 1 et j'agis sur la liste 2 */
        opacity: 1;
        pointer-events: auto;
        transition: 0.6s;
/*        transform: translateY(0%);                    /* envoyé dans les cintres, je le fait redescandre au moment du hover  */
        transform: translatex(0);
}

/* ───────────────────────────────────────────────────────────────────────────────────────────────────── */
/*   ECRAN COMPRIS ENTRE  500 et 900 px */
/* ───────────────────────────────────────────────────────────────────────────────────────────────────── */
@media screen and (min-width: 501px) and  (max-width: 900px)  {
nav ul li {
        font-size: 3.5vw;
}    
}

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

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

.burger{
        display: block;
/*        position: fixed;  */
position: absolute;
        top: 8px;
        right: 10px;
}
label span {
        color: blue;
        cursor: pointer;
        position: relative;
        right: 10px;
}
article {
         display: block;
}   
footer {
        display: none;
} 
nav {
        position: fixed;
        background-color: transparent;
        top: 45px;
        height: 100%;
        transform: translatex(-150%);           /* pour sortie le menu vers la droite donc invisible */
                                                /* si onclique sur lez BURGER alors on voit le menu  */        
        transition: 0.5s;
}
.menu-1 {
        flex-direction: column;
        padding-top: 10px;
        background-color: #f9d499; 
        height: 160px;
        width: auto;
}
.menu-2 {
        background-color: #f9d499; 
        left: 109px;
        padding-top: 5px;
}
nav ul li{
        margin-bottom: 10px;
        font-size: 3.5vw;
/*        border: 1px solid black;  */
} 
nav ul li a{
         font-size: 16px;
}
nav ul li  a:hover{                                 /* si je survole lien */
        color: red;                             /* couleur du texte */
        background-color: transparent;                   /* fond du texte */ 
        border: 0px solid rgb(255, 255, 255);                  /* bordure du texte */  
        border-radius: 0px;                         /* coin arrondi de la bordure */
        transition: 0.2s;                           /* tout cela en 0.5 sec */
        pointer-events: auto;                       /* mon pointeur souris est opérationnel  */
}
        /* si checked alors action sur la zone NAV */
#navToggle:checked + nav {
        transform: translateX(0);
}
nav ul li span {                                    /* position  couleur ... de la petite flèche */
        right: 130px;
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

nav ul ul {   
        background-color: red;  
        left: 110px;
        top: -35%;
        opacity: 0;                                     /* pour que on ne le voit pas en arrivant */
        pointer-events: none;                           /* la souris ne change pas */
        transform: translatex(+0%);  
}
nav ul ul li {
        float: none;
        white-space: nowrap;                            /* pour éviter le retour à la ligne du même élément */
        font-size: clamp(10px, 3vw, 30px);
        padding-bottom: 5px;
        padding-right: 5px;
}
nav ul li:hover ul {                                    /* je pointe in items de la list 1 et j'agis sur la liste 2 */
        opacity: 1;
        pointer-events: auto;
        transition: 0s;
        transform: translatex(+0%); 
}
}