/* reset */
* {
    margin: 0;
    /*padding: 0;*/ /*mis en commentaire le 05/11/2020 pour avoir les num
  des li dans les ol, mais je ne comprends pas pourquoi ça marche...*/
}

/* render html5 elements as block */
header, footer, section, aside, nav, article {
    display: block;
}

body {
    background: #BBCFE8;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #333;
    font-size: 18px;
    line-height: 25px;
    /*border: 3px solid green;*/
}
	
/* layout */

#wrapper {
    width: 1260px;            /* largeur du wrapper de la page web: 1260px */
    margin: 0 auto;           /* marges horizontales automatiques */
    margin-top: 20px;         /* marges verticales de 20 px*/
    margin-bottom: 20px;
    border: 3px solid #888;   /* bordure de 3px, grise, trait continu */
    background: #fff;         /* fond blanc  */
    border-radius: 10px 10px; /* bordure du wrapper: coins arrondis*/
    /* curved border radius */
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

nav {
    /*width: 1260px;*/ /* inutile: nav ds 1 elt block lui même de larg 1260px */
    height: 50px;      /* hauteur du nav */
    margin: 0 auto;    /* nav verticalement collé en haut contre le header */
    background: #3d6497; /* fond bleu */
    margin-top: -5px;
}

#main {
    /*width: 1260px;*/ /* inutile:main ds 1 elt block lui même de larg 1260px */
    /*height: 100%;*/
    display:flex;
    margin: 0 auto;
    /*border:5px solid red;*/
    padding-top: 0px;  /* marge interne en haut de 30px*/
    /*background: #fff url(../images/colbg.png) repeat-y;*/  /*fond: blanc */
                                /* image de fond répétée verticalement */
    
    /*overflow:hidden; *//*inutile*/   /* si contenu vertical de main qui dépasse: cacher */
                                       /* rq: ne sert que si la hauteur du
                                          conteneur de main est fixée, ici 
                                          ce n'est pas le cas. */
    /*min-height:500px;
    max-height:600px;*/
}

#sidebar {
    /*float: left;*/        /* placer le bloc comme un flottant positionné
                           à gauche */
    /*display: inline-block;*/
    /*vertical-align: top;*/
    padding-top: 30px;
    padding-left: 20px; /* marge interne gauche de 20px */
    width: 220px;       /* largeur du aside: 220px*/
    /*height: fit-content;*/
    /* Rq: 220+970=1190<1260: une largeur est inutilisée */
    /*border: solid blue 3px;*/
    border-right: 4px solid #bbcfe8; /*récup de l'ancienne couleur*/
}

#content {
    /*float: right;*/       /* placer le bloc comme un flottant positionné 
                           à droite */
    /*display: inline-block;*/
    /*vertical-align: top;*/
    padding-top: 30px;
    padding-left: 40px;
    width: 1000px;       /* largeur du bloc: 940px */
    margin-right: 30px; /* marge à droite de 30px Rq: 940+30=970*/
    /*border: solid pink 3px;*/
}


footer {
    /*width: 1260px*/;/* inutile:footer ds 1 elt block lui même de larg 1260px*/
    margin: 0 auto;
    clear: both;
}

/* basics */

h1,h2,h3,h4,h5,h6 {
    font-weight: bold;
    clear: both;
    color: #333;
}

a:link, a:visited {
	    color:#004C9A;  /* couleur des liens non encore visités,
                                déjà visités*/
	}

a:hover, a:active {
	     color: #333;
	 }

p {
    margin-bottom: 18px;
}

li {
    padding-left: 5px;
}

/* nav */

nav .menu {
    font-size: 16px;
    font-weight: bold;
}

nav .menu ul {
    margin: 0;
    padding: 17px 0 0 20px;
    list-style: none;
    line-height: normal;
}

nav .menu li {
    display: block;
    float: left;
}

nav .menu a {
    display: block;
    float: left;
    margin-right: 5px;
    padding: 0px 15px;
    text-decoration: none;
    color: #BBCFE8;
}

nav .menu a:hover {
    text-decoration: underline;
}

/** HEADER */

header {
    padding: 20px 0 0 0;
}

header>h1 {  /* titre de niv. 1 fils direct du header */
    float: left;
    margin: 0 0 18px 10px;
    width: 940px;
    font-size: 40px;  /* taille de police des*/
    line-height: 36px;
}

header>h1 a { /* lien (ancre) à l'intérieur d'un titre de niv. 1 fils
                 direct du header */
    /*color: #333;*/ /* inutile: couleur définie ci-dessous*/
    font-weight: bold;
    text-decoration: none;
}

header>h2 {  /* titre de niv. 2 fils direct du header */
    color: #777;  /* couleur: bleu foncé */
    clear: right;
    float: right;
    font-style: italic;
    font-size: 14px;
    margin: 14px 10px 18px 0;
}


/** ARTICLES **/

article img {
    border: none;
    -webkit-box-shadow: 3px 3px 7px #777;
    -moz-box-shadow: 3px 3px 7px #777;
}

#content p, ul, ol, hr {
    margin-bottom: 24px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
}
#content ul{
    padding: 0 0 0 20px;
}

#content ul ul, ol ol, ul ol, ol ul {
    margin-bottom: 0;
}

#content h1, h2, h3, h4, h5, h6 {
    color: #333;
    margin: 0 0 20px 0;
    line-height: 1.5em;
}
#ZoneAvecOverflowAuto{
    /*height: auto;*/
    overflow: auto;
}

.alignleft, img.alignleft {
    display: inline;
    float: left;
    margin-right: 10px;
}

.alignright, img.alignright {
    display: inline;
    float: right;
    margin-left: 10px;
}

.aligncenter, img.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

img.alignleft, img.alignright, img.aligncenter {
    margin-bottom: 5px;
}

/* sidebar and footer widget blocks */

aside h3 {
    font-size: 18px;
}

aside ul {
    padding: 0; /* pour bien les caler à gauche, suite à la modif 
du sélecteur * au début */
    list-style: square;
    color: #333;
    margin: -15px 0 15px 25px;
}

#footer-area {
    background: #3d6497;
    color: #FFF;
    font-size: 90%;
    padding: 18px 0;
    overflow: hidden;
    /* curved border radius */
    -moz-border-radius-bottomright: 8px;
    -moz-border-radius-bottomleft: 8px;
    -webkit-border-bottom-left-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
}

.footer-segment {
    float: left;
    margin-right: 20px;
    margin-left: 20px;
    width: 190px;
}

footer aside h4 {
    color: #faf0e6;
    font-size: 16px;
    line-height: 1.5em;
}

footer ul {
    list-style: none;
    margin: -15px 0;
}

footer a:link, footer a:visited {
		   color: #BBCFE8;
	       }

footer a:hover { 
    text-decoration: underline; 
}

footer p { 
    margin-top: -15px; 
    color: #faf0e6; 
}

/* pour avoir une liste (ul ou ol) sans puces*/
.listesanspuces {
    list-style: none;
}

table {
    border-collapse:collapse;
}

th,td {
    border:1px solid black;
    padding: 10px;
}
.tdfondgris {
    border:1px solid black;
    padding: 10px;
    background-color:#E5E8E8;
}