: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);

    /* Other */
--nav-initial-height: 100px;
--max-height-landing-presentation-container: 1280px; /* Barely used, might me removed */
--min-height-landing-presentation-container: min(
  var(--max-height-landing-presentation-container),
  min(100vh, 100vw)
);
  }
  
/* 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 {
  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%;
  background-color: var(--afp-white);
}

#section-1, #section-2, #section-3 {
  padding: 3rem 0;
  position: relative;
}

/* Landing container */
#landing-container {
  min-height: var(--min-height-landing-presentation-container);

  padding: 0 var(--base-length);

  background-image: url("/communication/products/corporate/afp-corporate-bg-landing.jpg");
  background-size: cover;
}
.black-filter {
  min-height: var(--min-height-landing-presentation-container);
  width: 100%;
  background-color: rgba(0, 0, 0, 0.6);

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
  align-items: center;
  color: var(--afp-white);
}
.arrow {
  transform: translate(0px, 0px) rotate(180deg) scale(1, 1);
  position: relative;
  top: 4rem;
}
.landing-button {
  width: fit-content;
  width: -moz-fit-content;
  
  padding: 10px 20px;
  background-color: var(--afp-blue);
  border-radius: 50px;
  font-size: 1.3rem;
  position: absolute;
  top: 30px;
  right: 15px;
}
.landing-button:hover {
  background-color: var(--afp-blue-darker);
}
.h1-landing, .para-landing {
  width: 75%;   
}
.h1-landing {
  font-size: 4.7rem;
  text-transform: uppercase;
  font-weight: bold;
}
.justify {
  text-align: justify;
  font-size: 5rem;
}
.para-landing {
  font-size: 2rem;
  font-weight: 300;
}
@media screen and (max-width: 1200px) {
  .arrow {
      top: 0;
      margin: 3rem;
  }
  .h1-landing {
      font-size: 3rem;
      margin-top: 5rem;
  }
}

/* nav-bar */
#nav-bar {
  background-color: rgb(11, 14, 31);
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  gap: 2rem;
  color: var(--afp-white);
  text-transform: uppercase;
  font-size: 1.7rem;
  padding: 10px;
}
#nav-bar a:hover {
  text-decoration: underline !important;
}

/* Section 1 */
.flex-b1 {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  justify-content: space-around;
  width: 80%;
  margin: auto;
}
.img-b1 {
  width: fit-content;
  width: -moz-fit-content;
  margin: auto;
}
.iphone-b1 {
  position: relative;
  width: fit-content;
  width: -moz-fit-content;
  margin: auto;
}

#wallpaper-b1 {
  position: absolute;
  height: 86% !important;
  top: 0;
  bottom: 0;
  /* width: 96%; */
  height: 80%;
  /* border-radius: 38px; */
  left: 0;
  right: 0;
  margin: auto;
}
#iphone-frameb1 {
  position: relative;
  z-index: 1;
}
.flex-b1 div {
  flex: 1 1 0px;
}
.content-b1 {
  font-size: 1.3rem;
}
.content-b1 p {
  font-weight: 300;
  font-size: 1.2rem;
}
.h2-b1 {
  font-size: 3.5rem;
  text-transform: uppercase;
  font-weight: bold;
}
.h3-b1 {
  font-size: 2rem !important;
  font-weight: 100 !important;
  margin: 2rem auto !important;
  line-height: normal !important;
}
.content-b1 .para-title {
  font-size: 2rem;
  margin-top: 3rem;
  font-weight: 400;
}
label.button-b1 {
  position: relative;
}
.button-b1 {
  margin-top: 1rem;
  width: fit-content;
  width: -moz-fit-content;
  background-color: var(--afp-blue);
  font-size: 1.5rem;
  padding: 10px 20px;
  border-radius: 50px;
  color: var(--afp-white);
  cursor: pointer;
  text-align: center;
}
.button-b1:hover {
  background-color: var(--afp-blue-darker);
}
.text-b2 {
  background-color: rgb(10, 10, 10);
  color: var(--afp-white);
  position: absolute;
  top: 0rem;
  padding: 3rem 5rem;
  left: 0px;
  width: 51%;
  height: 100%;
  display: none;
  text-align: center;
}
.text-b2 .para-title {
  color: var(--afp-blue);
  font-weight: bold;
  font-size: 1.5rem;
  margin-bottom: 1.3rem;
}
.text-b2 .button-b1 {
  margin: auto;
  margin-top: 4rem;
}
#buttonCheck {
  display: none;
}
#buttonCheck:checked + #bloc-veille {
  display: block;
}

.close {
  cursor: pointer;
  position: absolute;
  top: 1rem;
  right: 2rem;
  font-size: 4rem;
  font-weight: 300;
}
.img-b1 img {
  max-height: 90vh;
}
@media screen and (max-width: 1200px) {
  .flex-b1 {
      flex-direction: column;
      gap: 5rem;
  }
  .content-b1, .text-b2 {
      width: 100%;
      height: initial;
      margin-bottom: 3.5rem;
  }
  .text-b2 {
  padding: 3rem 1rem;
  }
  .text-b2 .button-b1 {
      font-size: 1.3rem;
  }
  .close {
      top: 1rem;
      right: 1rem;
      font-size: 3rem;
  }
}
/* section 2 */
#section-2 {
  background-color: #0A0A0A;
  color: white;
  padding: 3rem 1rem;
}
.flex-b2 {
  display: flex;
  flex-direction: row;
  gap: 3rem;
  width: 80%;
  margin: auto;
  font-size: 1.1rem;
  justify-content: space-around;
}
.illustration-b2 {
  align-self: center;
  width: 67%;
}
.content-b2 {
  width: 30%;
  text-align: end;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  align-items: flex-end;
}
.vidyard-player-container {
  width: 80%;
}
.flex-b2 h4 {
  font-weight: 300;
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  color: var(--afp-white);
  text-transform: initial;
  letter-spacing: normal;
  margin-top: 0;
}

.content-b2 h2 {
  font-size: 3.8rem;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 0;
}
.content-b2 h3 {
  font-size: 2rem !important;
  font-weight: 400 !important;
  margin-bottom: 1rem !important;
  color: var(--afp-white) !important;
  line-height: normal !important;
  margin-top: 0 !important;
}
@media screen and (max-width: 1200px) {
  .flex-b2 {
      flex-direction: column;
  }
  .content-b2 {
      width: 100%;
      text-align: start;
      align-items: flex-start;
  }
  .illustration-b2 {
      width: 100%;
  }
  .content-b2 h2 {
      font-size: 2rem;
      margin-top: 0 !important;
  }
  .vidyard-player-container {
      width: 100%;
      margin: auto;
  }
}

/* Section 3 */
#section-3 {
  padding: 0;
  overflow: hidden;
}
.bloc-height {
  min-height: 772px;
}
#buttonCheck2 {
  display: none;
}
#buttonCheck2:checked + #bloc-xp {
  display: block;
}
.flex-b3 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 80%;
  margin: auto;
}
.flex-b3 div {
  flex: 1 1 0px;
}
.text-padding {
  padding: 3rem 2rem 0 0;
}
.img-b3 img {
  width: 138%;
  max-width: none;
}
@media screen and (min-width: 1201px) and (max-width: 1648px) {
  .img-b3 img {
      width: 207%;
  }
}
@media screen and (max-width: 1200px) {
  .flex-b3 {
      flex-direction: column;
      gap: 5rem;
  }
  .bloc-height {
      min-height: initial;
  }
  .text-padding {
      padding-right: 0;
  }
  .h2-b1 {
      font-size: 2.5rem;
  }
  .img-b3 img {
      max-width: 100%;
      margin-bottom: 3rem;
  }
}

/*Section 4  */
#section-4 {
  background-image: url("/communication/products/corporate/afp-corporate-mic.jpg");
  background-position-x: center;
  background-size: cover;
}
#blue-filter {
  padding: 5rem 0;
  width: 100%;
  background-color: rgba(60, 84, 225, 0.7);
  color: white;
}
.flex-b4 {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  max-width: 1280px;
  margin: auto;
}
.text-b4 {
  color: var(--afp-black);
  background-color: var(--afp-white);
  font-size: 1.5rem;
  font-weight: 300;
  padding: 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3rem;
  
}
.text-b4 h3 {
  text-transform: uppercase !important;
  font-size: 3rem !important;
  font-weight: 700 !important;
  line-height: normal !important;
}

.text-b4 p {
  font-size: 24px;
  font-weight: 300;
}

@media screen and (max-width: 1200px) {
  .flex-b4 {
      flex-direction: column;
      width: 90%;
  }
}


/* 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: 0 !important;
}
#main-container #wallpaper-b1 {
  margin: auto !important;
}