.FFPMM {
    display: none; /* cache le texte sur petits écrans */
   }

.logo_petit{
    display: none; /* cache le logo petit */
}
.form_bar{
    width: 100%;
    height: 40px;
    background-color: #e2e4e6;
    display: flex;             /* Active Flexbox */
    justify-content: center;   /* Centre horizontalement */
    align-items: center;       /* Centre verticalement */
}

.search-box {
    display: flex;             /* Place input, bouton et image sur la même ligne */
    align-items: center;
    width: 350px;
    height: 25px;
    background: #fff;          /* fond blanc pour le champ */
    border-radius: 15px;
    padding: 0 10px;
}

/* input à l’intérieur */
.search-box input {
    flex: 1;                   /* prend toute la largeur dispo */
    border: none;
    outline: none;
    font-size: 16px;
}

/* bouton "submit" caché si tu veux uniquement l’icône */
.search-box button {
    display: none;
}

/* icône de recherche */
.search-box .sb {
    width: 18px;
    height: 18px;
    cursor: pointer;
}


/* les images de la barre */
.form_pic{
  display: flex;              /* met les images sur une ligne */
  justify-content: start ;    /* centre horizontalement */
  align-items: center;        /* centre verticalement */
  padding: 5px;
  width: 100%;
  background-color: #d3e6f9;  /* couleur de fond si besoin */
  border-top: #041c7c 1px solid; /* ligne en dessous */
}

.btn_top {
  background: linear-gradient(135deg, #ff416c, #ff4b2b);
  color: white;
  font-size: 0.8rem;
  font-weight: 500;
  border: none;
  border-radius: 50px;
  padding: 7px 40px;
  margin-top: 7px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(255, 65, 108, 0.4);
}

.btn_top:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 6px 15px rgba(255, 65, 108, 0.6);
  background: linear-gradient(135deg, #ff4b2b, #ff416c);
}

.btn_top:active {
  transform: scale(0.98);
  box-shadow: 0 2px 6px rgba(255, 65, 108, 0.4);
}
.text_entete{
    font-family: "Source Sans 3", sans-serif;
    font-size: 0.7rem;
    font-style: normal;
    text-align: left;
    color: #081589;
    margin: 0;
    padding: 0;
}


.form_pic div{
  flex: 1 1 auto;             /* chaque div prend la place qu’il faut */
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 3px;         
}

.form_pic img {
  height: 13vh;               /* hauteur = 20% de la fenêtre */
  width: auto;                /* garde les proportions */
  border-radius: 10px;        /* coins arrondis */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


/* la deuxieme barre */

/* Conteneur du menu */
div > ul {
    list-style: none;          /* supprime les puces */
    margin: 0;
    padding: 0;
    display: flex;             /* place les items sur une ligne */
    background-color: #081589; /* couleur de fond du menu */
    justify-content: center;   /* centre les items horizontalement */
    align-items: center;
}

/* Chaque élément de menu */
div > ul > li {
    margin: 5px 0px;            /* espace entre les liens */
    height: 18px;
 
}

/* Les liens */
div > ul > li > a {
    text-decoration: none;     /* supprime le souligné */
    color: white;              /* couleur du texte */
    font-weight: bold;
    padding: 10px 40px;        /* espace autour du texte */
    border-radius: 5px;        /* coins légèrement arrondis */
    transition: background 0.3s, color 0.3s; /* effet au survol */
    font-family: "Source Sans 3", sans-serif;
    font-size: 0.9rem;
    font-style: normal;

}

/* Effet au survol */
div > ul > li > a:hover {
    background-color: #0838f5; /* couleur plus foncée au survol */
    color: #fff;
}



/*responsive design */

@media (max-width: 600px) {
     div > ul > li > a {
        font-size: 10px;       /* réduit la taille sur petit écran */
        padding: 8px 28px;     /* ajuste aussi le padding si nécessaire */
        }
   .form_bar{
    display: none;  /* cache la barre de recherche sur petits écrans */
   }
   .search-box{
    display: none; /* cache la barre de recherche sur petits écrans */
   }
   .sb{
    display: none; /* cache la barre de recherche sur petits écrans */
   }
   .form_pic{
    display: none; /* cache les images sur petits écrans */
   }
   .FFPMM{
    display: block; /* affiche le texte sur petits écrans */
    font-size: 0.8rem;
    text-align: center;
    color: #081589;
    background-color:#dcdff6 ;
    padding: 3px 0;
    font-family: "Source Sans 3", sans-serif;
    font-weight: bold;
    font-style: normal;

   }
  
    .logo_petit{
     display: block; /* affiche le logo petit sur petits écrans */
        height: 70px;  /* hauteur du logo petit */
        width: auto;   /* garde les proportions */
        margin: 0 auto;
        
    }
    
    .pt_logo{
        background-color: #dcdff6;
    }

}


@media (min-width: 601px) and (max-width: 760px){
   .form_bar{
    display: none;  /* cache la barre de recherche sur petits écrans */
   }
   .search-box{
    display: none; /* cache la barre de recherche sur petits écrans */
   }
   .sb{
    display: none; /* cache la barre de recherche sur petits écrans */
   }
   .form_pic{
    display: none; /* cache les images sur petits écrans */
   }
    .logo_petit{
     display: block; /* affiche le logo petit sur petits écrans */
        height: 70px;  /* hauteur du logo petit */
        width: auto;   /* garde les proportions */
        margin: 0 auto;
        
    }
    .pt_logo{
        background-color: #f5fcb8;
    }
}


@media (min-width: 761px) and (max-width: 1024px) {
  .form_pic{
    display: none; /* cache les images sur petits écrans */
   }    

}