: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;
  /* Additional colors - custom */
  --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 */
/* Landing Container (and children) CSS */
#landing-container {
  min-height: var(--min-height-landing-presentation-container);
  /* margin-top: var(--nav-initial-height); */
  padding: 0 var(--base-length);
  background-image: url("/communication/products/afp-factcheck/afp-factcheck-landing.jpg");
  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: 8em;
}
#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;
}
#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 {
  background-color: var(--afp-blue);
  color: var(--afp-white);
}
#presentation-container-3 {
  background-color: var(--afp-pink);
}
#presentation-container-4 {
  position: relative;
}
#presentation-container-4 .presentation-content {
  width: 90% !important;
}
#presentation-container-5 {
  background-color: var(--afp-light-blue);
}
#presentation-container-6 {
  background-color: var(--afp-black);
}
#presentation-container-7 {
  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-yellow);
  color: var(--afp-black);
  text-transform: uppercase !important;
}
#h3-presentation-2 {
  background-color: var(--afp-turquoise);
  color: var(--afp-black);
  text-transform: uppercase !important;
}
#h3-presentation-3 {
  background-color: var(--afp-light-blue);
  text-transform: uppercase !important;
}
.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;
}
.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)) !important;
  font-weight: bold !important;
  line-height: unset !important;
  letter-spacing: -1px !important;
  text-align: center !important;
  color: #000 !important;
}

.contact-header-container h3.h3-central-header {
  color: #FFF !important;
}

/* .page-node-type-afp-produit h2, .page-node-type-afp-produit h3.afp0623-swapcard__title {
        color: black;
      } */

.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-presentation {
  white-space: pre-line;
  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;
}
.slideshow-container {
  position: absolute;
  /* Magic numbers. Sorry. */
  top: 10%;
  left: 12.5%;
  width: 75%;
}
.slideshow-container > img {
  position: absolute;
  top: 0;
  left: 0;
  /* Drupal automatically adds up a class on img tags, with a margin of 10px. WHY?! */
  margin: 0 !important;
  width: 100%;
  height: auto;
  opacity: 0;
}
#slide-image-1 {
  animation: 21s linear 0s infinite slideshow;
}
#slide-image-2 {
  animation: 21s linear 3s infinite slideshow;
}
#slide-image-3 {
  animation: 21s linear 6s infinite slideshow;
}
#slide-image-4 {
  animation: 21s linear 9s infinite slideshow;
}
#slide-image-5 {
  animation: 21s linear 12s infinite slideshow;
}
#slide-image-6 {
  animation: 21s linear 15s infinite slideshow;
}
#slide-image-7 {
  animation: 21s linear 18s infinite slideshow;
}
@keyframes slideshow {
  0% {
    opacity: 0;
  }
  0.01% {
    opacity: 1;
  }
  14.28% {
    opacity: 1;
  }
  14.29% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.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, #offer-title-container-standard h4 {
  color: var(--afp-secondary-grey-100) !important;
}
#offer-title-container-full, #offer-title-container-full h4 {
  color: var(--afp-blue) !important;
}
#offer-title-container-custom,  #offer-title-container-custom h4 {
  color: var(--afp-pink) !important;;
}
.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;
}
.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 {
  display: block;
  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;
  text-decoration: none !important;
}
.contact-content-link:hover {
  background-color: var(--afp-blue-darker);
}

a {
  text-decoration: none;
  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 {
  display: none;
}