section {
        padding: 0;
        margin: 0;
        grid-area: section ;                    /* Je nomme la partie de la grille     */
        background-color: yellow;               /* couleur de fond      */
        border-top: 1px solid black;            /* bordure haute        */
        border-bottom: 1px solid black;         /* bordure basse        */
        padding-top: 0px;                       /* Marges intérieur Haut  */
        padding-bottom: 0px;                    /*    et bas              */
        margin: 0px;                            /* Pas de marge extérieure   */
        /**************** Mise en forme du texte ***************/    
        color: blue;                          /* couleur du texte */             
        font-size: clamp( 20px, 2vw, 35px);     /* size du texte variable */
        font-weight: 700;                       /* gras */
        font-family: 'Anton';                   /* Police ANTON */
        letter-spacing: 0.6vw;                    /* espace entre les lettre
        /**************** Mise en forme du texte ***************/    
        display: flex;                          /* je fais du "section" un conteneur    */
                                                /* => l'axe horizontal est le principal */
                                                /*    et on s'aligne à gauche           */
        justify-content: center;                /* centrer horizontalement le texte                     */
        align-items: center;                    /* centrer verticalement le texte       */
   height: 50px;
}
section .petit{
        display: none;
}
section .grand{
        display: flex;
}

/* ───────────────────────────────────────────────────────────────────────────────────────────────────── */
/*   ECRAN COMPRIS ENTRE  500 et 900 px */
/* ───────────────────────────────────────────────────────────────────────────────────────────────────── */
@media screen and (min-width: 501px) and  (max-width: 900px)  {

section{
        display: none;   
}

}

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

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

section{
        border-top: 0px solid black;          /* bordure haute        */
        padding-top: 3px;                       /* Marges intérieur Haut               */
        padding-bottom: 3px;                    /*    et bas                           */
        margin: 0px;                            /* Pas de marge.                       */
        /**************** Mise en forme du texte ***************/    
        font-size: 5vw;                         /* size du texte variable 7% du viewport càd de la taille écran*/
        /**************** Mise en forme du texte ***************/    
        width: auto;
}
section .petit{
        display: flex;
        justify-content: space-between;
}
section .grand{
        display: none;
}


}