/* ░▒▓ INDEX.CSS - Styles spécifiques à la page d'index ▓▒░ */
/*
/* ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ */
/* ▓▓ RÈGLES DE BASE (mobile first) ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ */
/* ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ */
/*
/* ▒▒▒▒▒▒▒▒▒▒▒▒ */
/* Arrière-plan */
/* ▒▒▒▒▒▒▒▒▒▒▒▒ */
#lines {
  opacity: 1;
}

#lines .l1,
#lines .l2 {
  transform: translate(-60rem, -60rem);
}

#lines .l3,
#lines .l4,
#lines .l5,
#lines .l6 {
  transform: translate(0, -60rem);
}

#lines .l7,
#lines .l8 {
  transform: translate(60rem, -60rem);
}

/* ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ */
/* Section d'introduction */
/* ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ */
main header {
  position: fixed;
  top: 0;
  left: 0;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  height: calc(100% - var(--mainMenuThickness));
}

main header::after {
  content: "";
  order: 1;
  display: block;
  height: var(--logoHeight);
}

main header>* {
  flex: 1 0 0;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
  min-height: 0;
}

#logoWrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - var(--mainMenuThickness));
}

#logoWrapper {
  order: 2;
}

#logo {
  position: absolute;
  left: 50%;
  top: 50%;
  height: clamp(50rem, 220vmin, 67rem);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

main header p {
  order: 3;
  font-family: "blockletter", sans-serif;
  font-size: var(--LFontSize);
}

/* ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ */
/* Contenu principal */
/* ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ */
main .SContentWrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 0;
}

main h2 {
  text-align: center;
  font-size: var(--XLFontSize);
  margin-bottom: var(--XXLFontSize);
}

main h2 span:first-of-type {
  display: block;
  font-size: calc(var(--XXLFontSize) * 2);
  line-height: 1em;
}

/* Styles associés à l'image d'illustration enlevée pour la recherche de stage en 2022/2023
main .imgWrapper {
  margin: var(--XLFontSize) 0 var(--XXLFontSize) 0;
  max-height: 23rem;
}

main .imgWrapper img {
  z-index: -1;
  flex: 1 0 0;
  object-position: top;
  object-fit: cover;
  width: 80%;
  max-width: 16rem;
  min-height: 0;
}
*/
main p .gray {
	font-size: 1.5em;
}

/* ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ */
/* ▓▓ RESPONSIVE ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ */
/* ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ */
/*
/* ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ */
/* Mobile horizontal */
/* ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ */
@media screen and (orientation: landscape) {

  /* ░░░░░░░░░░░░░░░░░░░░░░ */
  /* Section d'introduction */
  /* ░░░░░░░░░░░░░░░░░░░░░░ */
  main header {
    height: 100%;
    padding-left: var(--mainMenuThickness);
  }

  #logoWrapper {
    height: 100%;
  }

  #logo {
    left: calc(50% + var(--mainMenuThickness) / 2);
    height: clamp(32rem, 160vmin, 67rem);
  }

  /* ░░░░░░░░░░░░░░░░░ */
  /* Contenu principal */
  /* ░░░░░░░░░░░░░░░░░ */
  main .imgWrapper {
    max-height: 21rem;
  }

  main .imgWrapper img {
    object-fit: contain;
    max-height: 46rem;
  }
}

/* ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ */
/* Tablette horizontale */
/* ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ */
@media screen and (min-width: 640px) and (min-height: 480px) and (orientation: landscape) {

  /* ░░░░░░░░░░░░░░░░░░░ */
  /* Structure des pages */
  /* ░░░░░░░░░░░░░░░░░░░ */
  #pageWrapper {
    padding: var(--XXLFontSize)var(--XXLFontSize)var(--XXLFontSize) calc(var(--mainMenuThickness) +var(--XXLFontSize));
  }

  /* ░░░░░░░░░░░░░░░░░░░░░░ */
  /* Section d'introduction */
  /* ░░░░░░░░░░░░░░░░░░░░░░ */
  main header h1 {
    text-indent: initial;
  }
}

/* ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ */
/* ▓▓ ANIMATIONS ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ */
/* ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ */
/*
/* ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ */
/* Structure des pages */
/* ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ */
html,
body {
  height: 100%;
  overflow-y: hidden;
}

html.animateIntro,
html.animateIntro>body {
  animation: 0s 2.75s delayOverflow forwards;
}

@keyframes delayOverflow {
  to {
    height: initial;
    overflow-y: auto;
  }
}

/* ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ */
/* Section d'introduction */
/* ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ */
html.animateIntro main header {
  animation: 0.25s 2.5s hideIntro forwards ease-out;
}

@keyframes hideIntro {
  to {
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}

#logo {
  opacity: 0;
}

html.animateIntro #logo {
  animation: 0.25s 1.25s showLogo forwards ease-out;
}

@keyframes showLogo {
  to {
    opacity: 1;
  }
}

/* ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ */
/* Contenu principal */
/* ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ */
main .SContentWrapper {
  -webkit-transform: translateY(100vh);
  -ms-transform: translateY(100vh);
  transform: translateY(100vh);
}

html.animateIntro main .SContentWrapper {
  animation: 0.25s 2.5s showContent forwards ease-out;
}

@keyframes showContent {
  to {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}