/*Reset CSS*/
*{
    margin: 0px;
    padding: 0px;
}

body {
    font-family: "verdana";
    width: 1200px;
    background-color: white;
    margin-left: auto;
    margin-right: auto;
}

nav {
    width: 1190px;                  /*largeur de page  utilisée, 7*170px, OK le 28-07-23 */
    /*margin: 0 auto;*/
    background-color: lightgrey;  /* Couleur du fond du menu de premier niveau, OK le 30-08-25 */
    position: absolute;             /* absolute cadre le menu à gauche, relative le cadre au milieu */
    top: 0px;                       /* décale de 0 px le haut de l'ensemble, OK le 28-07-23  */
    text-decoration: none;          /* ajouté le 30-8-25 */
}

nav ul {
    list-style-type: none;          /* none enlève les puces des options du premier niveau, OK le 28-07-23 */
}

nav ul li {                          /* agit sur la première ligne du menu */
    /*float : left;  */             /* pour aligner les premiers éléments du menu sur la première ligne */
    /*width: 10%;    */             /* ??? chaque élément disposera de 25% de la largeur de la page */
    /*text-align: left;*/
   font-size: 14px;                 /* règle la taille de tous les caractères, OK le 29-08-25*/
   font-weight: bold;
}

nav ul li ul li {
    background-color: lightgrey; /* colore les fonds des sous-menus,  OK le 29-08-25 */
    width: 150px;
}

/*nav ul::after {*/ /*pour éviter que la hauteur soit nulle ??? */
    /*content: "";
    display: table;
    clear: both;
}*/

nav a {
    display: block;
    text-decoration: none;
    color: black;
    border-bottom: 2px solid transparent;   /* pour éviter que l'apparition de la bordure ne fasse bouger le texte */
    padding: 10px 0 px;                     /* pour centrer le texte en hauteur */
  }  

nav a:hover {     
    background-color: lightgrey;          /* couleur du fond des sous-menu. Ok le 29/08/25*/
    color: red;                           /* couleur du texte au passage de la souris. Ok le 29/08/25*/
}

/*.sous{
    display: none;
    box-shadow: 0px 1px 2px red;
    background-color: none;
    }*/
    
nav > ul li:hover .sous {   /* fait apparaitre le block de texte des sous-menu (voir HTML) */
    display: block;
}

.sous li {
    /*float: none;*/
    width: 170px;           /* largeur des sous-menus, ok le 28-07-23 */
    text-align: left;       /* cadrage du texte, ici à gauche */
    font-weight: lighter;
}

/*.sous a{
    /*width: 10Opx; */        /* Largeur des sous-menus padding ?/
    /*border-bottom: none;*/
/*}*/

sous a:hover {
    /*border-bottom: 1px;*/
    /*background-color: RGBa(200,200,200,0.1);*/
    background-color: yellow; /* colore le sous-menu pointé par la souris, grey OK le 28-07-23 */
    color: white;           /* colore les caractères en blanc, OK le 28-07-23 */
}

.sous {
    display: none;                    /*Empêche la visualisation du sous-menu tant que la souris n'est pas passée sur le sous-menu */
    box-shadow: red;               /* 0px 1px 2px + couleur, OK #CCC*/
    /*background-color: pink;*/       /* couleur de fond des sous-menus */
    color: white;
    position: absolute;
    /*width: 10%;*/ /* ? */
    /*Z-index: 1000;*/
}

nav ul li {
    float: left;        /* pour mettre les titres a l'horizontale */
    width: 170px;       /* OK */
    text-align: left;   /* OK */
    position: relative; /* Rangement des sous-menus lles uns en dessous des autres */
}