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

   /* 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);
  

  /* Font-size and lengths */
  --font-size: 20px;
  --font-size-offer: 30px;

  --afp-h2: calc(1.2 * var(--font-size));
  --afp-h3: calc(1.1 * var(--font-size));
  --afp-h2-padding: calc(var(--afp-h2) / 2);
  --afp-h3-padding: calc(var(--afp-h3) / 2);

  --base-length: var(--font-size);

  /* Base lengths */
  --quote-container-width: calc(95vw - 2 * var(--base-length));
  --break-at-large-max-width: 90%;
  --landing-presentation-container-min-height: calc(
    fit-content + var(--nav-initial-height)
  );
  --landing-presentation-container-min-height1: calc(
    -moz-fit-content + var(--nav-initial-height)
  );

  /* Flex properties */
  --direction-column-to-row-at-large: column;
  --order-1-2-at-large: 1;
  --order-2-1-at-large: 2;
  --justify-content-center-end-at-large: center;
  --align-items-center-stretch-at-large: center;

  /* 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)
  );
  --max-width-presentation-content: 1280px;
  --offer-button-display: block;
  --offer-column-hidden-display: none;
}

@media screen and (min-width: 992px) {
  :root {
    --font-size: 20px;
    --font-size-offer: 20px;

    --quote-container-width: 52vw;
    --break-at-large-max-width: 40%;
    --direction-column-to-row-at-large: row;
    --order-1-2-at-large: 2;
    --order-2-1-at-large: 1;
    --justify-content-center-end-at-large: end;
    --align-items-center-stretch-at-large: stretch;
    --landing-presentation-container-min-height: calc(
      100vh - var(--nav-initial-height)
    );
    --landing-presentation-container-min-height1: calc(
      100vh - var(--nav-initial-height)
    );

    --offer-button-display: none;
    --offer-column-hidden-display: block;
  }
}

/* Common CSS */

html,
body {
  margin: 0;

  text-size-adjust: none;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
}

#main-container,
#main-container * {
  box-sizing: border-box;
}

#main-container {
  background-color: white;
  background-color: var(--afp-white);
  font-family: "source-sans-pro", Source Sans Pro, Arial, sans-serif;
  font-size: 20px;
  font-size: var(--font-size);
  word-wrap: normal;
}

#main-container h2,
#main-container h3,
#main-container h4 {
  margin-top: 0;
  margin-bottom: 0;
}

.span-vertical-center {
  display: inline-flex;
  align-items: center;
}

.span-bold {
  font-weight: bold;
}

.display-none {
  display: none;
}

.presentation-content {
  width: 100%;
  max-width: var(--max-width-presentation-content);
  margin: 0 auto;
}

/* LANDING */
/*Nav Bar*/
#nav-bar {
  display: flex;
  width: 100%;
  background-color: var(--afp-black);
  color: var(--afp-white);
  justify-content: space-between;
  padding: 1em;
  align-items: center;
  height: 70px;
}

#nav-bar ul {
  list-style-type: none;
  display: flex;
  margin: 0;
  margin-left: 3em;
  padding: 0;
}

#nav-bar ul li {
  margin: 0 10px;
  cursor: pointer;
  font-size: 1.2rem;
  background: var(--afp-white);
  padding: 5px;
  color: var(--afp-black);
  font-weight: bold;
}
#nav-bar ul li:hover {
  background-color: var(--afp-secondary-grey-40);
}
.connect-button {
  background-color: var(--afp-blue);
  padding: 10px 20px;
  color: var(--afp-white);
  border-radius: 25px;
  width: fit-content;
  width: -moz-fit-content; 
  margin: auto;
  font-size: 1.2rem;
  position: absolute;
  right: 3rem;
}
@media screen and (max-width: 1136px) {
  #nav-bar ul {
      display: none;
  }
  .connect-button {
    right: 1rem;
  }
}
.connect-button:hover {
  background-color: var(--afp-blue-darker);
}
/* Landing Container (and children) CSS */
#landing-container {
  min-height: calc(var(--min-height-landing-presentation-container) - 120px);

  /* margin-top: var(--nav-initial-height); */
  padding: 0 var(--base-length);

  background-image: url("/communication/products/audio/afp-audio-girls.webp");
  background-size: cover;

  display: flex;
  justify-content: start;
  align-items: flex-end;
}

#landing-container-content {
  margin-bottom: calc(0.5 * var(--base-length));
}

#landing-container-title {
  max-width: 700px;
  margin-bottom: 3.5em;
}

#h2-landing-container {
  width: fit-content;
  width: -moz-fit-content;
  padding: var(--afp-h2-padding);

  background-color: var(--afp-black);

  color: var(--afp-white);
  text-transform: uppercase;
  font-weight: bold;
  font-size: var(--afp-h2);
  white-space: nowrap;
}

/* This is a workaround given the frustrating nature of inline heights (they ignore the paddings, always)*/
#h2-subtitle-container {
  margin: calc(0.28 * var(--base-length)) 0 calc(0.45 * var(--base-length));
}

#h2-subtitle {
  padding: var(--afp-h3-padding);
  background-color: var(--afp-blue);

  line-height: 1.6;
  text-transform: uppercase;
  font-size: var(--afp-h3);
  font-weight: bold;
  color: var(--afp-white);

  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
@media screen and (min-width: 1400px) {
  #h2-landing-container {
    font-size: 2.5rem;
  }
  #h2-subtitle {
    font-size: 2.2rem;
  }
}
#landing-link-button {
  display: block;
  margin-bottom: var(--base-length);

  width: fit-content;
  width: -moz-fit-content;

  padding: var(--base-length);
  background-color: var(--afp-blue);

  text-decoration: none;
  color: var(--afp-white);
  font-weight: bold;
}

#landing-link-button:hover {
  background-color: var(--afp-blue-darker);
}

/* PRESENTATION CONTAINERS */

/* Presentation Containers (and children) CSS */
.presentation-container {
  padding: var(--nav-initial-height) var(--base-length) 0;
}

/* Individual variations */
#presentation-container-2,
#presentation-container-1 {
  background-color: var(--afp-blue);
  color: var(--afp-white);
  scroll-margin-top: 140px;
}
#center {
  flex-direction: initial;
  justify-content: center;
}
#surlefil {
  height: 502px;
}
.afp-audio {
  height: 690px;
}
@media screen and (min-width: 600px) {
  #center {
    justify-content: end;
  }
  #surlefil {
    width: 532px;
    height: 220px;
  }
  .afp-audio {
    width: 532px;
    height: 421px;
  }
}
@media screen and (max-width: 336px) {
  #surlefil {
    position: relative;
    right: 42px;
  }
}

#presentation-container-3 {
  background-color: var(--afp-white);
  scroll-margin-top: 140px;
}

#presentation-container-3.presentation-container {
  padding-top: 3rem;
}
#presentation-3-text-container {
  align-self: flex-start;
}

#presentation-container-4 {
  background-color: var(--afp-turquoise);
  text-align: center;
  padding-bottom: calc(2 * var(--base-length));
  scroll-margin-top: 140px;
}
.h2-b4 {
  font-size: 2rem;
  font-weight: 700;
}
.bloc4-content {
  display: flex;
  gap: 3rem;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 3rem auto;
}
.bloc4-content div {
  flex: 1 1 0px;
}
.bg-img {
  width: 175px;
  height: 175px;
  margin: auto;
  background: var(--afp-secondary-grey-10);
  padding: 25px;
  border-radius: 101%;
  display: flex;
  align-items: center;
}
.bg-img svg {
  margin: auto;
}
.b4-button {
  background-color: var(--afp-blue);
  padding: 10px 20px;
  color: var(--afp-white);
  border-radius: 25px;
  width: fit-content;
  width: -moz-fit-content; 
  margin: auto;
  margin-top: 2rem;
  font-size: 1.5rem;
}
.b4-button:hover {
  background-color: var(--afp-blue-darker);
}
#presentation-container-5 {
  background-color: var(--afp-blue);
  padding-bottom: calc(2 * var(--base-length));
}

.presentation-container-body {
  display: flex;
  flex-direction: var(--direction-column-to-row-at-large);
  gap: var(--base-length);
  justify-content: space-evenly;
  align-items: var(--align-items-center-stretch-at-large);
}

.presentation-text-container {
  max-width: var(--break-at-large-max-width);
  margin-bottom: var(--base-length);
  align-self: center;
}

#presentation-container-2 .presentation-text-container {
  order: var(--order-1-2-at-large);
}

#presentation-container-2 .presentation-illustration-container {
  order: var(--order-2-1-at-large);
}



h3.h3-presentation {
  padding: var(--afp-h3-padding);
  width: fit-content;
  width: -moz-fit-content;

  font-weight: bold;
  text-transform: uppercase;
  font-size: var(--afp-h3);
}

/* Individual variations */
#h3-presentation-1 {
  background-color: var(--afp-pink);
  color: var(--afp-black);
}

#h3-presentation-2 {
  background-color: var(--afp-turquoise);
  color: var(--afp-black);
}

#h3-presentation-3 {
  background-color: var(--afp-turquoise);
}

.h3-subheader-presentation-container {
  margin: calc(0.25 * var(--base-length)) 0 calc(0.45 * var(--base-length));
}

.h3-subheader-presentation {
  padding: var(--afp-h3-padding);
  background-color: var(--afp-black);

  line-height: 1.6;
  text-transform: uppercase;
  font-size: var(--afp-h3);
  font-weight: bold;
  color: var(--afp-white);

  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

@media screen and (min-width: 1400px) {
  h3.h3-presentation  {
    font-size: 2rem;
  }
  .h3-subheader-presentation {
    font-size: 1.6rem;
  }
}

.presentation-central-header {
  margin-bottom: calc(2 * var(--base-length));

  display: flex;
  justify-content: center;
}

h3.h3-central-header {
  font-size: calc(2 * var(--font-size));
  font-weight: bold;
  letter-spacing: -1px;
  text-align: center;
}

.form-header-container {
  width: fit-content;
  width: -moz-fit-content;
  margin: auto;
  margin-bottom: calc(2 * var(--base-length));
}

.form-header-container h3 {
  font-size: calc(1.2 * var(--font-size));
  text-transform: uppercase;
  text-align: center;
  font-weight: 900;
}

.text-presentation {
  margin: calc(2 * var(--base-length)) 0;
  font-size: var(--font-size);
}

.trial-request {
  display: flex;

  width: fit-content;
  width: -moz-fit-content;

  background-color: var(--afp-black);

  justify-content: center;
  align-items: center;
  gap: calc(0.75 * var(--base-length));

  font-size: var(--font-size);
  color: var(--afp-white);

  border-radius: 30px;
  padding: 10px 30px;
}

.trial-request:hover {
  background-color: var(--afp-secondary-grey-100);
  cursor: pointer;
}

.svg-arrow-container {
  height: calc(1.75 * var(--font-size));
  width: fit-content;
  width: -moz-fit-content;
}

.svg-arrow {
  height: 100%;
  fill: var(--afp-white);
  stroke: var(--afp-white);
  stroke-width: var(--base-length);
}

.svg-arrow-left {
  transform: scale(-1, 1);
}

.svg-arrow path {
  stroke: 20;
  width: 100%;
  height: 100%;
}

.presentation-illustration-container {
  width: 100%;

  display: flex;
  flex-direction: column;
  justify-content: end;
  align-self: end;
}

.presentation-illustration-video-container {
  width: 100%;

  display: flex;
  flex-direction: column;
  justify-content: end;
}

.svg-container {
  position: relative;

  display: flex;
}
.video-container {
  position: absolute;
  /* Magic numbers. Sorry. */
  top: 5.5%;
  left: 11.75%;
  width: 77%;
}

.presentation-video-container {
  height: 100%;

  display: flex;
  justify-content: var(--justify-content-center-end-at-large);
  align-items: center;
}

.presentation-video-player-container {
  width: 90%;
}

.offer-button {
  display: var(--offer-button-display);
  position: absolute;
  top: 50%;

  width: calc(3 * var(--base-length));
  height: calc(3 * var(--base-length));

  border-radius: 50%;
  border: none;

  padding: calc(0.5 * var(--base-length));
  background-color: var(--afp-blue);
}

.offer-button:hover {
  cursor: pointer;
  background-color: var(--afp-blue-darker);
}

.offer-button:active {
  transform: scale(0.98);
}

#offer-right-button {
  right: calc(0px + var(--base-length));
}

.offer-title-container {
  padding: var(--base-length);
  border-bottom: 1px solid var(--extremely-light-gray);
}

/* Individual variations */
#offer-title-container-standard {
  color: var(--afp-secondary-grey-100);
}

#offer-title-container-full {
  color: var(--afp-blue);
}

#offer-title-container-custom {
  color: var(--afp-pink);
}

.offer-title {
  margin-bottom: calc(0.3 * var(--base-length));
}

.offer-title h4 {
  text-transform: uppercase;
  font-weight: bold;
  font-size: calc(1.2 * var(--font-size-offer));
}

.offer-subtitle {
  font-size: var(--font-size-offer);
}

.offer-column {
  width: var(--break-at-large-max-width);
  height: fit-content;
  height: -moz-fit-content;
  align-self: var(--align-self-center-stretch-at-large);

  margin-bottom: var(--base-length);

  box-shadow: 0px 0px 16px 0px var(--extremely-light-gray);
  display: flex;
  flex-direction: column;

  text-align: center;
}

.offer-column-hidden {
  display: var(--offer-column-hidden-display);
}

#offer-column-full {
  border: 1px solid var(--afp-blue);
}

.offer-section {
  padding: 12px;
  min-height: 78px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid var(--extremely-light-gray);
  font-size: 18px;
}

.offer-footer {
  padding: calc(2 * var(--base-length)) var(--base-length);

  text-transform: uppercase;
  font-size: var(--font-size-offer);
  font-weight: bold;
  cursor: pointer;
}

#offer-footer-standard {
  color: white;
  background-color: var(--afp-secondary-grey-100);
}

#offer-footer-full {
  color: white;
  background-color: var(--afp-blue);
}

#offer-footer-custom {
  color: white;
  background-color: var(--afp-pink);
}

.presentation-container-footer {
  padding: var(--base-length) 0;

  display: flex;
  justify-content: center;
  align-items: center;
}

#presentation-3-footer-span {
  color: white;
  font-size: calc(0.6 * var(--font-size));
  text-align: center;
}

.quotes-container {
  max-width: var(--quote-container-width);
  margin: auto;

  display: flex;
  align-items: center;
}

.quote-container {
  width: 0;
  order: 1;
}

.quote-hidden {
  visibility: hidden;
  order: 2;
}

.quote {
  margin-bottom: var(--base-length);
  width: var(--quote-container-width);
  text-align: center;
  font-size: calc(1.6 * var(--font-size));
}

#quote-container-1 .quote {
  font-size: calc(1.2 * var(--font-size));
}

@media (min-width: 576px) {
  #quote-container-1 .quote {
    font-size: calc(1.4 * var(--font-size));
  }
}

.quote-attribution {
  width: var(--quote-container-width);
  text-align: center;
  font-size: calc(1.2 * var(--font-size));
  font-style: italic;
  font-weight: bold;
}

.quotes-small-buttons-container {
  display: flex;

  max-width: 650px;

  margin: auto;

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

  flex-direction: row;
  justify-content: center;
  gap: 7%;
}

input.quote-small-button {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  appearance: none;
  /* For iOS < 15 to remove gradient background */
  background-color: unset;
  /* Not removed via appearance */
  margin: 0;

  font: inherit;
  color: var(--afp-secondary-grey-100);
  width: calc(2 * var(--base-length));
  height: calc(2 * var(--base-length));
  border: calc(0.15 * var(--base-length)) solid #68b7c0;
  border-radius: 50%;

  display: flex;
  justify-content: center;
  align-items: center;
}

input.quote-small-button::before {
  /* Empty content = dumb width and height??? (even with display set to different values) On Firefox and Chrome at least*/

  content: "         ";
  width: calc(0.5 * var(--base-length));
  height: calc(0.5 * var(--base-length));
  border-radius: 50%;
  border: calc(0.8 * var(--base-length)) solid var(--afp-blue);
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset calc(2 * var(--base-length)) calc(2 * var(--base-length))
    var(--afp-white);
}

.quote-small-button:checked::before {
  transform: scale(1);
}

.quotes-company-buttons-container {
  max-width: 650px;
  margin: auto;

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

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3%;
}

.quote-company-label {
  width: 17%;
}

.quotes-company-buttons-container img {
  width: 100%;
  height: auto;

  background-color: var(--afp-white);
  border: 0px;
}

.company-button:hover {
  cursor: pointer;
}

/* Contact */

.contact-container {
  width: 85%;
  margin: auto;

  box-shadow: 0px 0px 16px 0px var(--extremely-light-gray);

  background-color: var(--afp-black);
  color: var(--afp-white);
}

.contact-header-container {
  padding: var(--base-length);
}

.contact-header-container h3 {
  text-align: center;
  font-size: calc(1.5 * var(--font-size));
}

.contact-content-container {
  padding: var(--base-length) calc(4 * var(--base-length))
    calc(2 * var(--base-length));

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

@media (min-width: 768px) {
  .contact-content-container {
    flex-direction: row;
    align-items: stretch;
  }
}

.contact-content-column {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

@media (min-width: 768px) {
  .contact-content-column {
    width: 33%;
  }
}

.contact-content-text {
  padding: calc(3 * var(--base-length)) 0;
  font-size: calc(1.7 * var(--font-size));
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
}

.contact-content-link {
  width: fit-content;
  width: -moz-fit-content;

  padding: var(--base-length) calc(4 * var(--base-length));
  text-align: center;
  text-transform: uppercase;
  background: var(--afp-blue);
  font-size: calc(1.4 * var(--font-size));
  font-weight: bold;
  cursor: pointer;
}


a {
  text-decoration: none !important;
  color: inherit;
}
/* remove drupal title */
.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;
}
.list_dotted li:before {
  display: none;
}

.page-node-type-afp-produit h2.h2-b4 {
  color: black !important;;
}

.page-node-type-afp-produit .presentation-content .h2-b4 {
  color: black !important;
  font-size: 3rem;
}