* {
    padding: 0;
    margin: 0;
}

html {
    width: 100%;
    font-size: 100%
}

body {
    width: 100%;
    font-size: 0, 75em;
}

/* .visually-hidden {
    display: none;
}

#pgCategoryModal {
    display: none;
} */

/* ********************** version mobile ***********************$ */

#conteneur {
    width: 100%;
    background-color: floralwhite;
    /*background-image: url('../../../images/bandeauNoel.jpg'); */
}

#bandeau {
    /* display: flex; */
    margin: 5px 0;
    box-sizing: border-box;
    display: block;
    max-width: 100%;
    height: 100px;
    /* background-image: url('../../../images/bandeauDeNoel.jpg'); */
    background-image: url('../../../images/Lever_soleil.png');
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: center;
    text-decoration: none;
    /* color: #000; */

}

#bandeau .logo {
    float: left;
    padding-top: 25px;
    padding-left: 5px;

}

#bandeau .title {

    padding-top: 20px;
    padding-left: 80px;
    font-family: 'comic sans ms', 'Helvetica', 'Arial', 'sans-serif';
    font-style: italic;
    font-size: 1.5em;
    text-align: center;
    text-indent: 5%;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .5);
    /*color: blanchedalmond;*/
    color: black;
}

#filnav ol {
    list-style-type: none;
    /* annule l'affichage des puces*/
}

#filnav ol li {
    display: inline-block;
}

#filnav ol li::before {
    content: '»';
    margin: 0 .5em 0 .5em;
}

#filnav ol li:first-child {
    display: none;
}

#textDefil {
    width: 100%;
    /* display:block; */
    height: 50px;
    /* background-color: aqua; */
}

#topbar3 {
    background-color: bisque;

}

#menu_bureau {
    display: none;
}



#colLeft {

    /* background-color: rgb(30, 246, 246); */
    margin-top: 5px;

}

#modLeft1 {
    background-color: rgb(220, 241, 241);
    margin: 5px;
}

#modLeft2 {
    /* background-color: rgb(202, 243, 78); */
    margin: 5px;

}


#modLeft3 {
    /* background-color: rgb(236, 90, 214); */
    margin: 5px;
    border: 1px solid red;

}

#contenu {
    padding: 10px;
    box-sizing: border-box;
    background-color: beige;
    /* background-color: rgb(205, 222, 232); */
    margin-top: 10px;
}

#colRight {
    /* background-color: aqua; */
    margin-top: 5px;


}

#modRight1 {
    /* background-color: rgb(234, 27, 78); */
    margin: 5px;

}

#modRight2 {
    /* background-color: blue; */
    margin: 5px;

}

#modRight3 {
    /* background-color: coral; */
    margin: 5px;
}

#footer {
    padding: 20px;
    box-sizing: border-box;
    background-color: blueviolet;

}

/* ******************** version mobile ********************* */

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


    /*#modLeft2 {
        display: none;
    }*/

    #modLeft3 {
        display: none;
    }
}

/* *********************** Fin version Mobile ******************* */

/* ************************** responsive video ************************* */
/* .video-responsive {
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
}

.video-responsive video {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
} */

/*  *********************** Version tablette **************************/

@media screen and (min-width:768px) {

    #bandeau .title {

        padding-top: 20px;
        padding-left: 80px;
        font-family: 'comic sans ms', 'Helvetica', 'Arial', 'sans-serif';
        font-style: italic;
        font-size: 2em;
        text-align: left;
        text-indent: 5%;
        text-shadow: 0 2px 4px rgba(0, 0, 0, .5);
    }

    #menu_bureau {
        display: none;
    }

    #topbar3 {
        background-color: bisque;

    }

    #contenant {
        padding: 5px;
        display: flex;
        justify-content: space-between;
        /* gap: 5px; */
        /* background-color: burlywood; */
    }

    #colLeft {
        width: 20%;
    }

    #modLeft1 {
        background-color: rgb(220, 241, 241);
        margin: 5px;
    }

    #modLeft2 {
        /* background-color: rgb(202, 243, 78); */
        margin: 5px;

    }


    #modLeft3 {
        /* background-color: rgb(236, 90, 214); */
        margin: 5px;


    }

    #contenu {
        width: 60%;

    }

    #colRight {
        width: 20%;

    }

}

/* ******************* fin version tablette ********************* */

@media screen and (min-width:1400px) {



    #conteneur {

        width: 1620px;
        margin: 0 auto;
        padding: 10px;
        box-sizing: border-box;
    }

    #bandeau .title {

        padding-top: 20px;
        padding-left: 80px;
        font-family: 'comic sans ms', 'Helvetica', 'Arial', 'sans-serif';
        font-style: italic;
        font-size: 2em;
        text-align: left;
        text-indent: 5%;
        text-shadow: 0 2px 4px rgba(0, 0, 0, .5);
    }

    #menu_bureau {

        display: block;
        margin-top: 10px;
        padding: 5px;

        /* background-color: blue; */
    }


    #colLeft {
        width: 20%;
    }

    #modLeft2 {
        /* background-color: rgb(202, 243, 78); */
        margin: 5px;

    }


    #modLeft3 {
        /* background-color: rgb(236, 90, 214); */
        margin: 5px;
        border: 1px solid red;
    }

    #contenu {
        width: 60%;

    }

    #colRight {
        width: 25%;

    }

    #ligne4modDiapo {
        width: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
    }




    /* Traitement des des 4 modules diapos */

    #ligne4modDiapo.diapo {
        float: left;
    }

    /* premier modules */

    #ligne4modDiapo.n1>.diapo {
        width: 100%;
    }

    #ligne4modDiapo.n1>.diapo>div.inner {
        margin: 5px 0;
    }

    /* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ */
    /* Présence de 2 modules premier modules */
    #ligne4modDiapo.n2>.diapo {
        width: 50%;
    }

    #ligne4modDiapo.n2>.diapo>div.inner {
        margin: 5px 3px 5px 0;
    }

    /* Présence de 2 modules Deuxième module */
    #ligne4modDiapo.n2>.diapo+div {
        width: 50%;
    }

    #ligne4modDiapo.n2>.diapo+div>div.inner {
        margin: 5px 0px 5px 3px;
    }

    /* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ */
    /* Presence de 3 modules -> premier module */
    #ligne4modDiapo.n3>.diapo {
        width: 33.33%;
        height: auto;
    }

    #ligne4modDiapo.n3>.diapo>div.inner {
        margin: 5px 3px 5px 3px;
    }

    /* Presence de 3 modules -> deuxième module */
    #ligne4modDiapo.n3>.diapo+div {
        width: 33.33%;

    }

    #ligne4modDiapo.n3>.diapo+div>div.inner {
        margin: 5px 3px 5px 3px;
    }

    /* Presence de 3 modules -> Troisième modules */
    #ligne4modDiapo.n3>.diapo+div+div {
        width: 33.33%;
    }

    #ligne4modDiapo.n3>.diapo+div+div>div.inner {
        margin: 5px Opx 5px 3px;
    }

    /* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ */
    /* Presence de 4 modules -> premier modules */
    #ligne4modDiapo.n4>.diapo {
        width: 25%;
    }

    #ligne4modDiapo.n4>.diapo>div.inner {
        margin: 5px 3px 5px 0;
    }

    /* Presence de 4 modules -> deuxième modules */
    #ligne4modDiapo.n4>.diapo+div {
        width: 25%;
    }

    #ligne4modDiapo.n4>.diapo+div>div.inner {
        margin: 5px 3px 5px 3px;
    }

    /* Presence de 4 modules -> troisième modules */
    #ligne4modDiapo.n4>.diapo+div+div {
        width: 25%;
    }

    #ligne4modDiapo.n4>.diapo+div+div>div.inner {
        margin: 5px 3px 5px 3px;
    }

    /* Presence de 4 modules ->quatrième modules */
    #ligne4modDiapo.n4>.diapo+div+div+div {
        width: 25%;
    }

    #ligne4modDiapo.n4>.diapo+div+div+div>div.inner {
        margin: 5px 0px 5px 3px;
    }

    /* FIN Traitement des  4 modules diapos */


    #footer {

        clear: both;
        background-color: blueviolet;
        margin-top: 10px;
    }
}

/* Phoca glery */
/* .galvideo {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1200px;
    
    margin: 70px auto 0;
    

}

.video {
    width: 200px;
    height: 150px;
    margin: 10px;
    

}

.video p {
    text-align: center;
}

.video video {
    width: 100%;
    height: auto;

} */

/* fin phoca galery */

/* ***************texte defilant***************** */
/* .marquee-txt {
    
    max-width: 100%;
    font-size: xx-large;
    color: blue;
    margin-top: 1em auto 2em;
    border: 10px solid #F0F0FF;
    overflow: hidden;
    box-shadow: 0 .25em .5em #CCC, inset 0 0 1em .25em #CCC;
} */

/* le bloc défilant */
/* .marquee-txt> :first-child {
 */
/*     display: inline-block; */
/* modèle de boîte en ligne */
/*     padding-right: 2em; */
/* un peu d'espace pour la transition */
/*     padding-left: 100%; */
/* placement à droite du conteneur */
/*     white-space: nowrap; */
/* pas de passage à la ligne */
/*     animation-name: defilement-rtl;
 */
/* référence à la règle @keyframes mise en oeuvre */
/*     animation-duration: 15s;
 */
/* valeur à ajuster suivant la longueur du message */
/*     animation-iteration-count: infinite;
 */
/* boucle continue */
/*     animation-timing-function: linear;
 */
/* pas vraiment utile ici */

/* } */

/* @keyframes defilement-rtl {
    0% {
        transform: translate3d(0, 0, 0);
        /* position initiale à droite */
/*     }
 */
/*     100% {
/*         transform: translate3d(-100%, 0, 0);   
/*     } */
/* } */

/* ***************fin texte defilant***************** */
/* Affichage ligne dans affichage article en blog */
/* .blog-item {
    border-width:1px;
    border-bottom-style: dotted;
    border-bottom-color:#036;
    padding-bottom: 10px;
    margin-bottom: 10px;
}
.page-header{
    text-align: center;
    margin-block-end: 20px;
    font-style: italic;
    
    
} */
/*  fin Affichage ligne dans affichage article en blog */