table {
  margin: auto;
}

thead {
  background-color: rgb(1, 150, 198);
  color: white;
}

th {
  padding-right: 1em;
  padding-left: 1em;
  padding-top: 0.3em;
  padding-bottom: 0.3em;
}

tr.odd {
  background-color: #E8E8E8;
}


tr.even {
  background-color: #C0C0C0;
}

caption {
  font-style: italic;
  caption-side: bottom;
  color: rgb(1, 150, 198);
  letter-spacing: 1px;
}

td {
  padding-right: 1em;
  padding-left: 1em;
}




h { font-size: 6; }

h { font-size: 5; }

h { font-size: 4; }

h { font-size: 3; }

h { font-size: 2; }

h { font-size: 1; }


h3 {
  font-style: italic;
  color: rgb(1, 165, 218);
}

h2 {
  color: rgb(1, 150, 198);
}

h1 {
  font-style: italic;
  text-align: center;
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

blockquote {
  font-style: italic;
}

.contenu a {
  color: #658200;
}

.contenu a:visited {
  color: #83b217;
}


.contenu a[href^="http://"] {
  background-image: url(img/external-link.svg);
  background-position: center right;
  background-repeat: no-repeat;
  background-size: 1em;
  padding-right: 1em;
}

.contenu a[href^="http://"]:visited {
  background-image: url(img/external-link-visited.svg);
}

.contenu a[href^="https://"] {
  background-image: url(img/external-link.svg);
  background-position: center right;
  background-repeat: no-repeat;
  background-size: 1em;
  padding-right: 1em;
}

.contenu a[href^="https://"]:visited {
  background-image: url(img/external-link-visited.svg);
}


body {
  text-align: justify;
  font-family: Lato, Arial, Tahoma, sans-serif;
  margin: 0;
  padding: 0;
}




/*
Structure :
  <div class="entete">
    ...
  </div>
  <div class="page">
    <header>
    <h1 class="title">...</h1>
    ...
    </header>
    <nav id="#TOC">
      <div class=menutitle>Table des matières</div>
      <ul>
        ...
      </ul>
    </nav>
    <div class="contenu">
      ..
    </div>
*/

/*
  <div class="entete">
    <img src="$top$logo-upa.png" alt="UPA">
    <nav id="mainmenu">
      <div class="menutitle">Menu</div>
        <ul>
          ...
        </ul>
      </div>
    </nav>
  </div>
*/

.entete {
    background-color: white;
    text-align: center;
    width: 100%;
    position: fixed;
    top: 0;
    padding-bottom: 1rem;
    padding-top: 0rem;
    height: 5.6rem;
    line-height: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    z-index: 1001 /* > 1000 pour passer par dessus les cartes Leaflet */
}



.entete img {
    height: 3rem;
    margin: 0 auto;
    display: inline-block;
    padding: 0.3rem;
    box-sizing: border-box;
    width: auto;
    flex-shrink: 0;
}

/*

    <nav id="mainmenu">
      <div class="menutitle">Menu</div>
        <ul>
          ...
        </ul>
      </div>
    </nav>

    <nav id="#TOC">
      <div class=menutitle>Table des matières</div>
      <ul>
        ...
      </ul>
    </nav>

*/

nav {
    line-height: normal;
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background-color: #E8E8E8;
    z-index: 5000;
}

.menutitle {
    padding: 0.3rem;
    box-sizing: border-box;
    margin: 0;
}

nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: inherit;
}

nav li {
    display: flex;
    flex-direction: inherit;
    padding: 0;
    margin: 0;
}

nav a {
    text-decoration: none;
    color: inherit;
    height: 1.6rem;
    padding: 0.3rem;
    box-sizing: border-box;
    display: inline-block;
    background-color: #E8E8E8;
    white-space: nowrap;
}

nav a:hover {
    background-color: #C0C0C0;
}

#TOC {
    position: fixed;
    right: 0;
    margin-right: 0;
    top: 3rem;
}

#TOC > ul > li > ul {
    font-size: 0.8rem;
    font-style: italic;
}

#TOC {
    align-items: flex-end;
}
#TOC ul {
    align-items: flex-end;
}
#TOC li {
    align-items: flex-end;
}

@media only screen and (not (min-width: 70rem)) {
    nav:not(:hover) > *:not(.menutitle) { display: none; }
}

@media only screen and (min-width: 70rem) {
    #mainmenu > .menutitle { display: none; }
    #mainmenu {
        flex-direction: row;
    }
    #mainmenu > ul {
        justify-content: space-between;
        width: 70rem;
    }
    #searchForm {
        position: fixed;
        top: 0;
        right: 0;
    }
    #TOC:not(:hover) > *:not(.menutitle) { display: none; }
}

.map {
    /* configure the size of the map */
    width: 80%;
    height: 40rem;
    margin: auto;
}



@media only screen and (min-width: 70rem) {
    .video-container {
        position: relative;
        width: 100%;
        padding-bottom: 56.25%;
    }
}

@media only screen and (not (min-width: 70rem)) {
    .video-container {
        position: relative;
        width: 80%;
        margin: auto;
        padding-bottom: 45.0%;
    }
}
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}



/* Le contenu principal, dans lequel on trouve le titre (balise header), puis le
 contenu.
*/

.page { padding-top: 5.6rem; }

/* titre : l'image doit faire toute la largeur
   mais le titre est sur la partie centrale.
*/

header {
    background-image: url('bandeau.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
	height: 12rem;
    width: 100%;
    z-index: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: white;
    box-sizing: border-box;
    padding: 0;
    text-align: center;
    font-style: italic;
}

header p {
    font-size: 2.0rem;
    font-weight: bold;
}
header h1 {
    font-size: 2.8rem;
    color: white;
}

.contenu {
    background-color: white;
    padding: 0.3rem;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

p {
    margin-top: 0;
}

h1, h2, h3 {
    column-span: all;
}


.contenu h1 {
    scroll-margin-top: 6.6rem;
}

.contenu h2 {
    scroll-margin-top: 6.6rem;
}

.contenu h3 {
    scroll-margin-top: 6.6rem;
}

.contenu h4 {
    scroll-margin-top: 6.6rem;
}

.contenu h5 {
    scroll-margin-top: 6.6rem;
}

.contenu h6 {
    scroll-margin-top: 6.6rem;
}


.contenu ul {
    padding-left: 1em;
}



@media only screen and (min-width: 70rem) {
    .contenu {
        width: 70rem;
    }
    .text3col {
        column-count: 3;
        column-gap: 4rem;
    }

    .container3col {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 69.4rem;
    }

    .col1o3 {
        width: 20.46666666666667rem;
    }

    .col2o3 {
        width: 44.93333333333334rem;
    }

}

footer {
    background-color: #13232c;
    color: white;
    box-sizing: border-box;
    padding: 1rem;
    text-align: center;
}