* {  /*reset général à la base, qui de plus supprimera toute marge sur les listes li  */
    margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body{
    width: 90%;
    margin: 0 auto;
}
header{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
ul{
    list-style-type: none;
}

nav {
    margin: 1rem auto;
 /*pour centrer le bloc nav (menu) */
}

nav a {
/* on habille les liens a couleur, etc. */
    text-decoration: none;
/* on stabilise les hauteurs des liens pour un positionnement facile des sous-listes  */
    height: 100%;
/* astuce pour centrer verticalement et horizontalement le texte du lien au sein de son li */
/* on déclare la balise a comme un container flex et on distribue les 2 attributs de centrage horizontal et vertical*/
    display: flex;
    align-items: center;
    justify-content: center;
}

.dropdown a{
    display: flex;
    justify-content: left;
}

    nav ul {
        /* suppression des puces de tous les listes de la barre de navigation */
            list-style: none;
    }
        ul.navbar-nav {
        /* gestion en container flex du premier niveau : les items seront placés horizontalement */
            display: flex;
        /* centration verticale des items (li) */
            align-items: center;
            flex-direction: row;
            position: relative;
        }

        ul.dropdown {
        /* pour sortir les sous-menus du flux (se supperpose sur le texte qui suit), on déclare un attribut "position" */
            position: relative;
        /* pour le faire initialement disparaître */
            display: none;
        }

nav li {
    /* pour répartir régulièrement toute la place disponible, les items sont tous déclarés flex:1 */
        flex:1;
       
    /* centrer le texte à l'intérieur de chaque item */
        text-align:center;
       
    }
.navbar-nav>li:hover ul.dropdown {
/* appraition du sous-menu au survol de son entete */
    display: block;
    background-color: #eef3f7;
    padding-left: 1rem;
}

.navbar-nav>li:hover>a{
    text-decoration:underline;
}

nav ul > li:not(:last-child) {
    border-right: 2px solid #d9e4ed;
}

.nav-item{
    text-align: center; 
    background-image: url(img/bkg_menu_demarches.jpg);
    background-size:contain;
    background-repeat:repeat;
    height: 3rem;
}
a{
    text-decoration: none;

}
.home{
    display: flex;
}

.home a{
    color: #5e79ba;
}
.home li{
    list-style-type: none;
}

.col-lg-4 ul{
    padding: 1rem;
}

.col-lg-4 ul>li:not(:first-child){
    padding-top: 0.5rem;
}
h1,h3{
    font-size:1.3rem;
    background-color: #0e5f96;
    color: white;
    padding: 0.5rem;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    margin-top: 0.5rem;
    font-weight: 500;
    padding-left: 3rem;
}

.row.main, aside div{
    background-color: #f1f6f8;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    box-shadow: #dadada 0rem 0.2rem ;
}

aside div{
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    margin-bottom: 1rem;
}

aside ul{
    padding: 1rem;
}

aside div>a{
    display: flex;
    justify-content: end;
    padding-right: 1rem;
    font-weight: 700;
}

aside li>a{
    color: black;
}

main .col-lg-4{
    padding: 10px;
}

div .title{
    background-color: #9c2f03;
}

footer div>ul{
    display: grid;
    grid-template-columns: 5% 15% 15% 15% 15%;
    grid-gap: 2%; /* 5 colonnes égales */
    background-color: #008bd3; /* Couleur de fond */
    color: #fff; /* Couleur du texte */
    text-align: left;
    padding: 1em;
}


footer a {
color: white;
}



.col-lg-4 a, aside a {
    text-decoration: none;
    color: #4891d5;
}

.row.main{
    --bs-gutter-x: 0rem;
}

footer{
    background-color: #00327b;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

footer li>ul{
    list-style-type: disc;
    color: #3fbcfb;
    padding-left: 1rem;
}

.end{
    text-align: center;
    padding-bottom: 1em;
}

main p{
    color: #297eb6;
    font-size: large;
    font-weight: 700;
}

.picture{
    color: #3b77b6;
}
.picture>img{
   width: 85px;
   height: 85px;
}

.date, aside .actus>a{
    color: #9c2f03;
}

@media screen and (max-width:780px) {
    footer div>ul{
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-gap: 7%;
    }
    
}

@media screen and (max-width:700px) {
    footer div>ul{
        grid-template-columns:2fr ;
        padding-bottom: 12rem;
    }
    
}




@media screen and (max-width: 500px) {
    body{
        width: 100%;
    }

    header{
        display: unset;
    }

    form{
        display: flex;
        justify-content: space-between;
        padding-top: 1rem;
    }
    #rechercheInput{
        width: 86%;
    } 
    #ok_recherche{
        width: 10%;
    }
   

    .item{
        padding: 10px;
        border-bottom: 2px solid #18659a;
        text-align: center; 
        background-image: url(img/bkg_menu_demarches.jpg);
        background-repeat: no-repeat;
    }

    nav{
        width: 100%;
    }

    ul.navbar-nav{
        display: flex;
        flex-direction: column;
    }

    .nav-item{width: 100%;
        height: 50px;
    }

    .navbar-nav>li:hover ul.dropdown {
        /* appraition du sous-menu au survol de son entete */
            display: none;
        }


    a{
        text-decoration: none;
        height: 3rem;
    }

    main p{
        font-size: unset;
        font-weight: unset;
    }



    nav a {
        height: inherit;
    }

    aside div>div{
        margin-top: 45px;
    }

    
   

    
}