/*SOMMAIRE
== A - STYLES GENERAUX
== A1 - DÉFINITION DES VARIABLES
== A2 - HTML BODY
== A3 - MISE EN FORME DES TITRES 
== A4 - MISE EN FORME P, UL, OL, LI
== B - MISE EN FORME DES LIENS DE NAVIGATION
== C - GÉNÉRALITÉ SUR LES BLOCS DE LA PAGE
== C1 - BLOC CONTENEUR
== C2 - BLOC HEADER
== C3 - NAVIGATION HAUTE
== C4 - BANDEAU HAUT IMAGES
== C5 - MAIN
== C6 - NAVIGATION BASSE
== C7 - FOOTER
== R - CARTE GOOGLE MAP
== W - STYLE COMMUN À TOUTES LES PAGES
== Z - POINT DE RUPTURE
*/
/* == A - STYLES GENERAUX */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
/* 	 == A1 - DÉFINITION DES VARIABLES */ :root {
  --coul0: rgba(0, 0, 0, 1); /* noir */
  --coul1: rgba(80, 80, 80, 1); /* gris très foncé */
  --coul2: rgba(100, 100, 100, 1); /* gris foncé */
  --coul3: rgba(150, 150, 150, 1); /* gris moyen */
  --coul4: rgba(220, 220, 220, 1); /* gris clair */
  --coul5: rgba(255, 255, 255, 1); /* blanc */
  --coul6: rgba(200, 200, 200, 1); /*  */
  --coul7: rgba(0, 0, 255, 1); /* couleur des liens */
  --coul8: rgba(255, 150, 0, 1); /* orange */
  --coul9: rgba(255, 80, 0, 1); /* rouge */
  --espG: 5vw; /* Marge générale dans la largeur du document */
  --espB: clamp(8px, 1.0vw, 20px); /* espacement des blocs du document */
  --espInt: clamp(6px, 0.8vw, 12px);
  --logo_Ratio: 0.5; /* Ratio H/W du logo */
}
/* == A2 - HTML BODY */
html {
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
  font-size: 16px;
}
/* == A3 - MISE EN FORME DES TITRES */
h1, h2, h3, h4 {
  font-weight: normal;
  text-align: center;
  margin-bottom: var(--espInt);
}
h1 {
    font-size:clamp(1.6rem, 0.455rem + 5.727vw, 3rem);
	color: var(--coul8);
}
h2 {
font-size:clamp(1.4rem, 0.582rem + 4.091vw, 2.4rem);
	color: var(--coul8);
}
h3 {
  font-size: clamp(1.2rem, 0.709rem + 2.455vw, 1.8rem);
	color: var(--coul9);
}

/* == A4 - MISE EN FORME P, UL, OL, LI */
p, ul, ol, table, h4, .explication {
  font-size: clamp(1.1rem, 0.900rem + 0.889vw, 1.4rem);
  margin-bottom: var();
}
p:first-letter {
  font-weight: bold;
  font-size: clamp(1.2rem, 0.667rem + 2.370vw, 2rem);
  margin-right: 0.2rem;
}
ul li, ol li {
  list-style-position: outside;
  list-style-type: disc;
  font-style: italic;
  margin-left: 2.5rem;
  margin-bottom: 0.2rem;
}
/* == B - MISE EN FORME DES LIENS DE NAVIGATION  */
a {
  text-decoration: underline;
  padding: 0.4vw 1.2vw;
  border-radius: 0.5vw;
  color: var(--coul7);
  background-color: var(--coul4);
  transition: all 0.6s ease;
}
a:hover, a:focus, a:active {
  color: var(--coul5);
  text-decoration: none;
  background-color: var(--coul2);
}
#navH a{
  font-size: clamp(1.2rem, 0.933rem + 1.185vw, 1.4rem);
}
main a{
  font-size: clamp(1.1rem, 0.900rem + 0.889vw, 1.4rem);
}
.pageAct {
font-size:  clamp(1.2rem, 0.933rem + 1.185vw, 1.6rem);
	text-align: center
}
.pageAct > *:nth-child(2){	/* mise en forme du lien de la page active */
	font-size: clamp(0.7rem, 0.500rem + 0.889vw, 1rem);
	font-weight: bold;
	color: var(--coul9);
}
/* == C - GÉNÉRALITÉ SUR LES BLOCS DE LA PAGE */
/* == C1 - BLOC CONTENEUR */
#container {
  position: relative;
  display: flex; /*footer en bas de la page */
  flex-direction: column; /*footer en bas de la page */
  min-height: 100vh; /*footer en bas de la page */
  background: linear-gradient(90deg, var(--coul1) 0%, var(--coul5)50%, var(--coul1)100%);
}
/* == C2 - BLOC HEADER */
header {
  --largeur: clamp(40px, 8vw, 80px);
  --titre: clamp(10px, 3.1vw, 35px);
  --titreECO: 2.5;
  position: relative;
  display: flex;
  justify-content: space-between;
  column-gap: var(--espG);
  padding: var(--espB) var(--espG);
  background-color: var(--coul1);
  margin-bottom: var(--espB);
}
header > div:nth-child(2) {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--coul8);
  font-size: var(--titre);
}
header > div:nth-child(2) > div:nth-child(2) {
  color: var(--coul9);
  font-size: calc(var(--titre) * var(--titreECO));
  font-weight: bold;
  text-shadow: -.0em -.1em .05em rgba(255, 80, 0, 0.6);
}
.logo {
  width: var(--largeur);
  display: block;
  height: calc(var(--largeur) * var(--logo_Ratio));
  padding: 0.5vw;
  background: url("../01-pictos/logo.png") center center no-repeat;
  background-size: contain;
}
.logo:hover {
  background: url("../01-pictos/logoSurvol.png")center center no-repeat;
  background-size: contain;
  cursor: pointer;
}
.quitter {
  display: block;
  height: 3vw;
  width: clamp(40px, 3vw, 50px);
  padding: 0.5vw;
  background: url("../01-pictos/quitter.png") center center no-repeat;
  background-size: contain;
}
.quitter:hover {
  background: url("../01-pictos/quitter-hover.png")center center no-repeat;
  background-size: contain;
  cursor: pointer;
}
/* == C3 -  NAVIGATION HAUTE */
#navH {
  font-size: calc(1rem + (var(--pasTexte) * 2));
  padding: var(--espB);
}
/* == C4 - BANDEAU HAUT IMAGES */
#bandeau_H .slideshow {
  width: 100%;
  aspect-ratio: 189 / 45;
  margin-bottom: var(--espB);
}
/* == C5 - MAIN */
main {
  position: relative;
  flex-grow: 1;
  margin-bottom: var(--espB);
}
/* == H - MAIN */
main {
  flex-grow: 1;
}
/* == C7 - FOOTER */
footer {
  align-items: center;
  column-gap: var(--espG);
  padding: var(--espB);
  background-color: var(--coul1);
}
footer > div:nth-child(1) span {
  font-weight: bold;
}
footer > div:nth-child(1) {
  color: var(--coul5);
}
/* CARTE GOOGLE MAP */
#map {
  position: relative;
  flex-grow: 1;
  z-index: 0;
}
.Cgoogle span {
  font-weight: bold;
  z-index: 30;
}
/* == W - STYLE COMMUN À TOUTES LES PAGES */
/* mise en colonnes flex */
.colonnes {
  position: relative;
  display: flex;
  justify-content: center;
  column-gap: 5vw;
  row-gap: 1vw;
  flex-wrap: wrap;
}
.colonnes > * {
  position: relative;
}
.explication {
  text-align: center;
  font-size: clamp(0.9rem, 0.700rem + 0.889vw, 1.2rem);
  font-style: italic;
  margin: var(--espInt) 0;
}
/*---------- mise en forme des images à l'intérieur des blocs ----------*/
.imgLdemi, .imgRdemi, .imgTotal {
  --paddingBloc: clamp(5px, 0.6vw, 10px);
  --epBord: 1px;
  box-sizing: border-box;
  padding: var(--paddingBloc);
  background-color: var(--coul1);
}
.imgLdemi img, .imgRdemi img, .imgTotal img {
  box-sizing: border-box;
  display: block;
  border-style: solid;
  border-color: var(--coul5);
  border-width: var(--epBord) var(--epBord) 0 var(--epBord);
}
.imgLdemi figcaption, .imgRdemi figcaption, .imgTotal figcaption {
  font-weight: bold;
  padding: 0.1vw 1vw;
  background: linear-gradient(90deg, var(--coul1) 0%, var(--coul5)50%, var(--coul1)100%);
  border-style: solid;
  border-color: var(--coul5);
  border-width: 0 var(--epBord) var(--epBord) var(--epBord);
  text-align: center;
}
.imgLdemi {
  width: 50%;
  float: left;
  margin: var(--espInt) var(--espInt) var(--espInt) 0;
}
.imgRdemi {
  float: right;
  width: 50%;
  margin: var(--espInt) 0 var(--espInt) var(--espInt);
}
.imgRdemi img {
  width: 100%;
}
.imgLdemi img {
  width: 100%;
}
.imgTotal {
  width: 100%;
  margin: var(--espInt) 0;
}
.imgTotal img {
  width: 100%;
}
.en-cours {
  cursor: not-allowed;
}
.footerBas {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
/* MISE EN FORME DES TABLEAUX */
.tableau {
  border-collapse: collapse;
  margin-bottom: var(--espB);
}
.tableau td {
  border: 2px solid var(--coul3);
  padding: 5px 10px;
  vertical-align: middle;
}
.tableau td:nth-child(2) {
  width: 60%;
}
.tableau td:nth-child(1) {
  width: 20%;
}
hr {
  width: 80%;
  height: 3px;
  border-radius: 2px;
  margin: var(--espB) auto;
  background: linear-gradient(90deg, var(--coul5) 0%, var(--coul1)50%, var(--coul5)100%);
}
/* == bloc video */
.blocVideo {
  --widthVideo: ;
  position: relative;
}
video {
  display: block;
  width: 100%;
  max-width: var(--widthVideo);
  height: auto;
  margin: 0 auto;
}
/* == Z - POINT DE RUPTURE */
@media screen and (max-width: 800px) {

  /* == C4 - BANDEAU HAUT IMAGES */
  #bandeau_H {
    --diapW: 95vw;
  }
} /* FIN des media query */