:root {
  /* Official colors - style guide */
  --afp-blue: #325aff;
  --afp-black: #000;
  --afp-white: #fff;
  
  /* sub main colors */
  --afp-pink: #FF6E6E;
  --afp-yellow: #FFD223;
  --afp-orange: #FFA050;
  --afp-turquoise: #7DFAAF;
  --afp-purple: #CD73FA;
  --afp-light-blue: #87EBFA;
  --afp-darker-white: #F5F5F7;
  
  /* secondary colors */
  --afp-secondary-grey-100: #9B9187;
  --afp-secondary-grey-80: #AFA79F;
  --afp-secondary-grey-60: #C3BDB7;
  --afp-secondary-grey-40: #D7D3CF;
  --afp-secondary-grey-20: #EBE9E7;
  --afp-secondary-grey-10: #F5F4F3;
  
  
  /* Additional colors - custom */
  --afp-light-green: #7DFAAF;
  --afp-darker-green: #65ce8f;
  --afp-lighter-bleu: #E8F8EB;
  --afp-darker-orange: #e06f12;
  --afp-darker-pink: #d96e6e;
  --afp-blue-darker: #2544bf;
  --extremely-light-gray: rgba(0, 0, 0, 0.1);
  }
  
/* BASE CSS */
html {
  font-family: 'Source Sans Pro', Arial, sans-serif;
}
/*
Josh's Custom CSS Reset
https://www.joshwcomeau.com/css/custom-css-reset/
*/
*, *::before, *::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html, body {
  height: 100%;
}
body {
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
input, button, textarea, select {
  font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
a {
  color: inherit;
  text-decoration: none !important;
}
#main-container {
  margin: auto;
  width: 100%;
}
/* landing container */
#landing-container {
  background-color: var(--afp-blue);
  padding-top: 2.5rem;
}
.landing-content {
  display: flex;
  color: var(--afp-white);
  flex-direction: row;
  justify-content: space-between;
  gap: 2rem;
  width: 85%;
  margin: auto;
  position: relative;
}
.landing-content h1 {
  font-size: 7rem;
  font-weight: 700;
}
.h2-landing {
  font-size: 3rem;
  font-weight: normal;
  margin: 2rem 0;
  width: 65%;
}
.general-button {
  background-color: var(--afp-pink);
  padding: 10px 20px;
  font-size: 1.5rem;
  width: fit-content;
  width: -moz-fit-content;
  border-radius: 20px;
}
.general-button:hover {
  background-color: var(--afp-darker-pink);
}
.landing-presentation {
  align-self: center;
}
.landing-illustration {
  position: relative;
}
.landing-illustration img {
  position: relative;
  top: 148px;
}
@media screen and (max-width: 1181px) {
  .landing-content h1 {
      font-size: 5rem;
  }
  .h2-landing {
      font-size: 2rem;
  }
}
@media screen and (max-width: 992px) {
  .landing-content {
      flex-direction: column;
  }
  .h2-landing {
      width: 100%;
  }

  .flex-b4 div {
    flex: 1 1 100%;
  }
}
@media screen and (max-width: 627px) {
  .landing-illustration img {
      top: 88px;
  }
.landing-content h1 {
      font-size: 4rem;
  }
}
@media screen and (min-width: 1500px) {
  .landing-illustration img {
      top: 143px;
  }
} 
@media screen and (min-width: 1900px) {
  .landing-illustration img {
      top: 174px;
  }
}

@media screen and (min-width: 993px) {
  .flex-b4 div {
    flex: 1 1 0px;
  }
}

/* explore button */
.bounce-animation {
  font-size: 2rem;
  animation: myBounceAnim 3300ms ease 0s both running infinite;
  width: fit-content;
  margin: auto;
  margin-top: 7rem;
  margin-bottom: 2rem;
}
.bounce-animation .arrow {
  width: fit-content;
  margin: auto;
}
@keyframes myBounceAnim {
0% {
  transform: translateY(Opx);
}
  45% {
      transform: translateY(0px);
  }
  67% {
      transform: translateY(-30px);
  }
  73% {
      transform: translateY(0px);
  }
  78% {
      transform: translateY(-15px);
  }
  89% {
      transform: translateY(0px);
  }
  100% {
      transform: translateY(0);
  }
}

/* Section 1 */
#section-1 {
  padding: 3rem 0;
}
.flex-b1 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 2rem;
  width: 85%;
  margin: auto;
}
.flex-b1 div {
  flex: 1 1 0px;
}
.h2-b1 {
  font-size: 4rem;
  font-weight: bold;
}
.para-b1 {
  font-size: 2rem;
  margin: 2rem 0;
}
.img-b1 img{
  margin: auto;
}
@media screen and (max-width: 992px) {
  .flex-b1 {
      flex-direction: column;
  }
}

/* section-2 */
#section-2 {
  padding: 3rem 0;
  padding-top: 4rem;
  min-height: 745px;
}
.accordion {
  width: 85%;
  margin: auto;
  position: relative;
}
#section-2 summary {
  display: flex;
  gap: 1rem;
  width: fit-content;
  cursor: pointer;
  position: relative;
  z-index: 1;
}
.flex-b2 {
  display: flex;
  flex-wrap: wrap;
}
.flex-b2 div {
  flex: 1 1 0px;
}
details[open] summary .h3-b2 {
  color: var(--afp-black);
}
details {
  margin-bottom: 3rem;
}
details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}
.h2-b2 {
  font-size: 2.5rem;
  font-weight: bold;
}
.text-b2 {
  text-align: center;
  margin-top: 1.7rem;
}
.para-b2 {
  font-size: 2rem;
  margin: 2rem 0;
}
.hide {
  display: none;
}
.flex-b2 {
  position: absolute;
  top: -2rem;
}
details summary:hover {
  color: var(--afp-blue) !important;
}
details[open] summary .h2-b2 {
  color: var(--afp-blue) !important;
}
.svg-container {
  position: relative;
  display: flex;
  width: fit-content;
  width: -moz-fit-content; 
}
.svg-container img {
  position: relative;
  z-index: 1;
}
.absolute {
  width: fit-content;
}

.video-container {
  position: absolute;
  /* Magic numbers. Sorry. */
  top: 5%;
  left: 12%;
  width: 76%;
  height: 84%;
  background-color: #000;
  overflow: hidden;
  border-radius: 16px;
}
@media screen and (max-width: 1120px) {
  .flex-b2 {
      position: initial;
      display: block;
  }
  .absolute {
      margin: auto;
      margin-top: 2rem;
  }
  details[open] summary .h2-b2, details summary .h2-b2 {
      margin: auto;
  }
  .text-b2 {
      margin-top: 0;
  }
}

/* Section 3 */
#section-3 {
  padding: 3rem 0;
}
.flex-b3 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 2rem;
  width: 85%;
  margin: auto;
}

.h2-b3 {
  font-size: 4rem;
  font-weight: bold;
}
.text-b3 {
  width: 40%;
}
.video-b3 {
  width: 55%;
}
.para-b3 {
  font-size: 2rem;
  margin: 2rem 0;
}
.svg-container3 {
  position: relative;
  display: flex;
  width: fit-content;
  width: -moz-fit-content;
  margin: auto;
}
.svg-container3 img {
  position: relative;
  z-index: 1;
}

.video-container3 {
  position: absolute;
  /* Magic numbers. Sorry. */
  top: 5%;
  left: 8%;
  width: 84%;
  height: 84%;
  background-color: #000;
  box-shadow: 0px 0px 30px black;
  overflow: hidden;
}
@media screen and (max-width: 1120px) {
  .flex-b3 {
      flex-direction: column;
  }
  .text-b3, .video-b3 {
      width: 100%;
  }
}

/* Section 4 */
#section-4 {
  padding: 3rem 0;
}
.b4-content {
  width: 85%;
  margin: auto;
}
.flex-b4 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
  text-align: center;
}


.h2-b4 {
  font-size: 4rem;
  font-weight: bold;
  margin-bottom: 3rem;
}
.card-b4 {
  box-shadow: rgb(0 0 0 / 50%) 0px 2px 10px 0px;
  border-radius: 10px;
  padding: 3rem;
  display: flex;
  flex-direction: row;
}
.card-b4 img {
  margin: auto;
  align-self: baseline;
}
.card-b4 h3 {
  font-size: 2rem;
  font-weight: bold;
  margin-top: 2rem;
}
.hidden-b4 {
  display: none;
  font-size: 2rem;
  align-self: center;
}
.card-b4:hover .illustration-b4 {
  display: none;
}
.card-b4:hover .hidden-b4 {
  display: block;
}

/* Section 5 */
#section-5 {
  padding: 3rem 0;
  background-color: var(--afp-blue);
}
.b5-content {
  width: 85%;
  margin: auto;
  text-align: center;
}
.h2-b5 {
  font-size: 4rem;
  font-weight: bold;
  margin-bottom: 3rem;
  color: var(--afp-white);
}

/* Drupal adaptation */
.node-type-afp-produit .panel-pane.pane-entity-view.pane-node .line.mb1.bgblue.line.relative.mb2.pt1.pb2.pa0m, .info_social.mb2, #breadcrumb.line.hidem {
  display: none;
}
body {
  overflow-x: initial;
  }
#main-container .img_margin {
  margin: auto !important;
}
.absolute {
  position: relative;
}
.accordion .h2-b2 {
color: #000 !important;
}
.h2-b4 {
color: #000 !important;
}