/*
 .d8888b.  888             888                   
d88P  Y88b 888             888                   
Y88b.      888             888                   
 "Y888b.   888888 888  888 888  .d88b.  .d8888b  
    "Y88b. 888    888  888 888 d8P  Y8b 88K      
      "888 888    888  888 888 88888888 "Y8888b. 
Y88b  d88P Y88b.  Y88b 888 888 Y8b.          X88 
 "Y8888P"   "Y888  "Y88888 888  "Y8888   88888P' 
                       888                       
                  Y8b d88P                       
                   "Y88P"                        
*/
html {
  width: 100vw;
  max-width: 100%;
  padding: 0rem;
  margin: 0rem;
}

body {
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 400;
  font-size: 25px;
  padding: 0;
  background-color: white;
  width: 100%;
  /* margin-top: 4rem;
  margin-bottom: 0rem;
  margin-left: 0rem;
  margin-right: 0rem; */
  margin: 0;
}

header {
  padding: 5rem 0rem 0rem 0rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  position: relative
}

section {
  width: 70%;
  padding: 0rem 0rem 0rem 0rem;
  margin: 0 auto 0 auto;
}

aside {
  width: 60%;
  font-size: 3rem;
  font-weight: 200;
  padding-top: 4rem;
  padding-bottom: 12rem;
  margin: 0 auto 0 auto;
}

p {
  width: 100%;
  padding: 0rem 0rem 1rem 3rem;
  text-align: justify;
  margin: 0;
}

aside p {
  width: 100%;
  padding-left: 0rem;
  text-align: center;
}

/* ===== TITRES ======= */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Barlow', sans-serif;
  margin: 0;
}

h1 {
  font-weight: 900;
  font-size: 8rem;
  text-shadow:
    1px 0px 20px white,
    -1px 0px 20px white,
    0px 1px 20px white,
    0px -1px 20px white;
  text-align: center;
}

h2 {
  font-weight: 800;
  font-size: 3rem;
  padding: 4rem 0 2rem 0;
}

h3 {
  font-weight: 700;
  font-size: 2rem;
  padding: 3rem 0 1.5rem 0;
}

/* ===== LISTES NAVIGATION ======= */
nav {
  width: 100%;
  height: 5rem;
  background-color: #ea1c3f;
  padding: 0rem;
  /* positioner la barre de navigation en haut de la page */
  position: fixed;
  top: 0px;
  left: 0px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-size: 2rem;
  z-index: 1000;
}

nav>ul {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: right;
  padding: 0.2rem 3rem;
  font-weight: 600;
  color: white;
  margin: 0.5rem;
}

nav li {
  display: inline;
  margin: 0 1rem;
}

.brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  column-gap: 2rem;
  font-family: 'Barlow', sans-serif;
  font-weight: 800;
  font-size: 2rem;
  color: white;
  margin-left: 2rem;
  padding: 0rem;
}

/* ===== LIENS ======= */
a {
  color: #ea1c3f;
  /* retirer la ligne sous le lien */
  text-decoration: none;
}

a:hover,
a:hover:visited {
  background-color: #ea1c3f;
  color: white;
}

a:visited {
  color: color-mix(in HSL, #ea1c3f 60%, white);
}

nav a,
nav a:visited,
footer a,
footer a:visited,
thead th a,
thead th a:visited,
#retour-debut a,
#retour-debut a:visited {
  color: white;
}

nav a:hover,
nav a:visited:hover,
footer a:hover,
footer a:visited:hover,
thead th a:hover,
thead th a:visited:hover,
#retour-debut a:hover,
#retour-debut a:visited:hover {
  color: color-mix(in HSL, #ea1c3f 30%, white);
  background: none;
}

/* ===== LISTES NON ORDONNÉES ======= */
ul.basic-unordered-list {
  width: 90%;
  padding-left: 3rem;
  text-align: justify;
  list-style: none;
  margin-left: 0rem;
}

ul.basic-unordered-list li {
  margin-top: 1em;
  padding-left: 0em;
  text-indent: 0em;
}

ul.basic-unordered-list li:before {
  content: '\25BA';
  color: #ea1c3f;
  padding-right: 5px;
}

/* pour la page courante dans les liens de navigation */
li.page-courante {
  border-bottom: 5px solid white;
}

/* ===== LISTES ORDONNÉES ======= */
/* astuce pour avoir des puces rondes */
/* adapté de : https://stackoverflow.com/a/486662 */
ol.basic-ordered-list {
  width: 90%;
  padding-left: 3rem;
  counter-reset: item;
  margin-left: 0rem;
}

ol.basic-ordered-list li {
  display: block;
  margin-bottom: 0.5em;
}

ol.basic-ordered-list li::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  content: counter(item);
  counter-increment: item;
  background-color: #ea1c3f;
  color: white;
  font-style: italic;
  font-weight: 700;
  font-family: 'Barlow', sans-serif;
  font-size: 1.5rem;
  margin-left: 0em;
  margin-right: 1rem;
  border-radius: 9999px;
  width: 2rem;
  height: 2rem;
}

/* ===== PIED de PAGE ======= */
footer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  width: 100vw;
  background-color: #ea1c3f;
  padding: 0rem;
  margin: 5rem 0rem 0rem 0rem;
}

div.footer-item {
  flex: 1;
  font-size: 2rem;
  font-weight: 200;
  color: white;
  text-align: center;
  padding: 1rem;
  margin: 0rem;
}

/* =========== TABLEAUX ================= */
/* source : https://developer.mozilla.org/fr/docs/Learn/CSS/Building_blocks/Styling_tables */
/* espacement */

table {
  table-layout: fixed;
  width: 70%;
  border-collapse: collapse;
  border: 3px solid #ea1c3f;
  margin-left: auto;
  margin-right: auto;
}

tbody td {
  text-align: left;
  padding: 0.25rem 0rem 0.25rem 10%;
  border-left: 3px solid #ea1c3f;
  border-right: 3px solid #ea1c3f;
}

thead th {
  font-family: 'Barlow', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  background-color: #ea1c3f;
  color: white;
}

thead th:nth-child(1) {
  width: 50%;
}

thead th:nth-child(2) {
  width: 50%;
}

th,
td {
  padding: 20px;
}

/* Alternance de couleur */

tbody tr:nth-child(odd) {
  background-color: white;
}

tbody tr:nth-child(even) {
  background-color: color-mix(in HSL, #ea1c3f 20%, white);
}

/* ======== BOUTON RETOUR DÉBUT ======== */
#retour-debut {
  position: fixed;
  display: flex;
  bottom: 10vh;
  right: 3vh;
  font-family: 'Barlow', sans-serif;
  font-weight: 900;
  font-size: 3rem;
  background-color: #ea1c3f;
  width: 5rem;
  height: 5rem;
  align-items: baseline;
  justify-content: center;
  border-radius: 9999px;
}

/* ======== IMAGES ======== */

.container-image-texte {
  width: 100%;
  padding: 0 0 1rem 3rem;
  display: grid;
  grid-template-rows: 1fr;
  gap: 0 2rem;
}

.avec_ratio-1-3 {
  grid-template-columns: 1fr 3fr;
}

.avec_ratio-3-1 {
  grid-template-columns: 3fr 1fr;
}

.avec_ratio-1-2 {
  grid-template-columns: 1fr 2fr;
}

.avec_ratio-1-1 {
  grid-template-columns: 1fr 1fr;
}

.container-image-texte img,
video {
  width: 100%;
}

.container-image-texte p,
ul {
  margin: 0;
  padding: 0 0 1rem 0;
}

.a_gauche_du_texte {
  float: left;
  padding: 0rem 2rem 1rem 3rem;
  margin: 0;
}

.top-image-maillage {
  background-image: url('../assets/images/img02_maillage.png');
}

.top-image-montagne {
  background-image: url('../assets/images/img04_montagne.png');
}

.top-image-cri {
  background-image: url('../assets/images/img06_cri.png');
}
.container-image-solo {
  position: relative;
  margin: 0;
  padding: 0;
  display: inline-block;
}
.legende-image {
  font-size: 1rem;
  font-weight: 300;
  font-style: italic;
  color: #aaaaaa;
  position: absolute;
  right: 0;
  margin: 0;
}

.in-top-position {
  bottom: -1.2rem;
  padding: 1rem 2rem 0 0;
}

.in-corpus-position {
  bottom: -0.7rem;
  padding: 0.2rem 0.7rem 0 0;
}

/*
8888888888                   888                      
888                          888                      
888                          888                      
8888888     .d88b.  88888b.  888888  .d88b.  .d8888b  
888        d88""88b 888 "88b 888    d8P  Y8b 88K      
888        888  888 888  888 888    88888888 "Y8888b. 
888        Y88..88P 888  888 Y88b.  Y8b.          X88 
888         "Y88P"  888  888  "Y888  "Y8888   88888P'
*/

/* TITRES */
/* barlow-black */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 900;
  src: local(''),
    url('../assets/fonts/Barlow-Black.woff') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../assets/fonts/Barlow-Black.woff2') format('woff');
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* barlow-black-italic */
@font-face {
  font-family: 'Barlow';
  font-style: italic;
  font-weight: 900;
  src: local(''),
    url('../assets/fonts/Barlow-BlackItalic.woff') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../assets/fonts/Barlow-BlackItalic.woff2') format('woff');
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* barlow-extrabold */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 800;
  src: local(''),
    url('../assets/fonts/Barlow-ExtraBold.woff') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../assets/fonts/Barlow-ExtraBold.woff2') format('woff');
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* barlow-extrabold-italic */
@font-face {
  font-family: 'Barlow';
  font-style: italic;
  font-weight: 800;
  src: local(''),
    url('../assets/fonts/Barlow-ExtraBoldItalic.woff') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../assets/fonts/Barlow-ExtraBoldItalic.woff2') format('woff');
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* barlow-bold */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  src: local(''),
    url('../assets/fonts/Barlow-Bold.woff') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../assets/fonts/Barlow-Bold.woff2') format('woff');
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* barlow-bold-italic */
@font-face {
  font-family: 'Barlow';
  font-style: italic;
  font-weight: 700;
  src: local(''),
    url('../assets/fonts/Barlow-BoldItalic.woff') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../assets/fonts/Barlow-BoldItalic.woff2') format('woff');
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* barlow-semibold */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  src: local(''),
    url('../assets/fonts/Barlow-SemiBold.woff') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../assets/fonts/Barlow-SemiBold.woff2') format('woff');
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* barlow-semibold-italic */
@font-face {
  font-family: 'Barlow';
  font-style: italic;
  font-weight: 600;
  src: local(''),
    url('../assets/fonts/Barlow-SemiBoldItalic.woff') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../assets/fonts/Barlow-SemiBoldItalic.woff2') format('woff');
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* CORPS DE TEXTE */
/* source-sans-pro-200 - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 200;
  src: local(''),
    url('../assets/fonts/source-sans-pro-v21-latin-200.woff2') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../assets/fonts/source-sans-pro-v21-latin-200.woff') format('woff');
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* source-sans-pro-200italic - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 200;
  src: local(''),
    url('../assets/fonts/source-sans-pro-v21-latin-200italic.woff2') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */

    url('../assets/fonts/source-sans-pro-v21-latin-200italic.woff') format('woff');
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* source-sans-pro-300 - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  src: local(''),
    url('../assets/fonts/source-sans-pro-v21-latin-300.woff2') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../assets/fonts/source-sans-pro-v21-latin-300.woff') format('woff');
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* source-sans-pro-300italic - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 300;
  src: local(''),
    url('../assets/fonts/source-sans-pro-v21-latin-300italic.woff2') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */

    url('../assets/fonts/source-sans-pro-v21-latin-300italic.woff') format('woff');
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* source-sans-pro-regular - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: local(''),
    url('../assets/fonts/source-sans-pro-v21-latin-regular.woff2') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../assets/fonts/source-sans-pro-v21-latin-regular.woff') format('woff');
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* source-sans-pro-italic - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 400;
  src: local(''),
    url('../assets/fonts/source-sans-pro-v21-latin-italic.woff2') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../assets/fonts/source-sans-pro-v21-latin-italic.woff') format('woff');
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* source-sans-pro-600 - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  src: local(''),
    url('../assets/fonts/source-sans-pro-v21-latin-600.woff2') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../assets/fonts/source-sans-pro-v21-latin-600.woff') format('woff');
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* source-sans-pro-600italic - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 600;
  src: local(''),
    url('../assets/fonts/source-sans-pro-v21-latin-600italic.woff2') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */

    url('../assets/fonts/source-sans-pro-v21-latin-600italic.woff') format('woff');
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* source-sans-pro-700 - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 700;
  src: local(''),
    url('../assets/fonts/source-sans-pro-v21-latin-700.woff2') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../assets/fonts/source-sans-pro-v21-latin-700.woff') format('woff');
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* source-sans-pro-700italic - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 700;
  src: local(''),
    url('../assets/fonts/source-sans-pro-v21-latin-700italic.woff2') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */

    url('../assets/fonts/source-sans-pro-v21-latin-700italic.woff') format('woff');
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* source-sans-pro-900 - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 900;
  src: local(''),
    url('../assets/fonts/source-sans-pro-v21-latin-900.woff2') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../assets/fonts/source-sans-pro-v21-latin-900.woff') format('woff');
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* source-sans-pro-900italic - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 900;
  src: local(''),
    url('../assets/fonts/source-sans-pro-v21-latin-900italic.woff2') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */

    url('../assets/fonts/source-sans-pro-v21-latin-900italic.woff') format('woff');
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}