header {
        grid-area: header;                              /* Nom de la zone GRILLE */
        background-color: transparent;
        background-color: #fce5c1;
        display: flex;                                  /* je fais du "header" un conteneur     */
                                                        /* => l'axe horizontal est le principal */
                                                        /*    et on s'aligne à gauche           */
        flex-direction: row-reverse;                     /* on s'aligne sur la ligne mais pas à gch donc à droite    */
                                                        /*  ROW  ==>  à gauche donc le texte à gch puis le logo (cf html) */
                                                        /*  ROW-REVERS ==> à droite donc le texte à droite et le logo à gch du text */
        align-items: center;                            /* ON CENTRE LE TEXTE verticalement     */   
}
.logo-header {
        margin-right: auto;                             /* Pour alignement de l'image vers la gauche */     
        width: auto;                                    /* On spécifie largeur                  */
        height: 100%;                                   /*     et hauteur de l'image "logo"     */

        opacity: 1;                                     /* l'opacité sera de 1 */
        transition: opacity 2s ease;                    /* l'opacité changera en 4s */        
        @starting-style {                               /* on définit l'état initial de l'objet */        
                opacity: 0;
        }
}
.text-header{
        color: blue;   
        font-size: clamp(15px, 2vw ,35px);            /* size du texte variable */  
        font-weight: bold;                              /* gras */
        font-family: 'roboto';                          /* Police ROBOTO */
        text-shadow: 3px 2px 4px #f317d2 ;            /* Ombre pour donner la profondeur */  
        letter-spacing: 0.5vw;                            /* Espace ntre les lettres */
        padding-right: 20px;
        transform: scaleY(3);                           /* la hauteur des lmettre X3 */   
}

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

        /*  header ne change pas */
        .logo-header {
                display: none;
        }
}

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

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

        header {
                display: none;
        }
}