.presentation-2-tile img {
  height: 245px !important;
}
/* Most of this CSS is used across the product pages I remade from scratch based on Ceros */

/* Variables */

: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-blue-darker: #2544bf;
  --afp-blue-darkest: #1b328c;
  --extremely-light-gray: rgba(0, 0, 0, 0.1);

  /* Font-size and lengths */
  --font-size: 22px;
  /* /!\ AFP titles won’t work properly if you change the font size or line-height. You’ll have to do some trial and error with the container paddings. Search for "Magic number" to find them all. */
  --line-height: 1.5em;
  --base-length: var(--font-size);

  /* Other */
  --max-height-landing-presentation-container: 1280px; /* Barely used, might me removed */
  --min-height-landing-presentation-container: min(
    var(--max-height-landing-presentation-container),
    max(100vh, 450px)
  );
  --max-width-presentation-content: 1280px;
}

/* 
        Sizes used as breakpoints

        @media (min-width:376px){

        }

        @media (min-width: 576px){

        }

        @media (min-width: 768px){

        }

        @media (min-width: 992px){

        }

        @media (min-width: 1200px){

        }

        @media (min-width: 1400px){

        }

        */

html,
body {
  margin: 0;
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
}

.afp-title {
  padding: 0.5em;

  text-transform: uppercase;
  font-weight: bold;
  line-height: var(--line-height);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

#main-container {
  font-family: "source-sans-pro", Source Sans Pro, Arial, sans-serif;
  font-size: 22px;
  font-size: var(--font-size);
  line-height: 1.5em;
  line-height: var(--line-height);
  background-color: white;
  background-color: var(--afp-white);
}

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

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

.display-none {
  display: none;
}

/* PAGE CSS */

/* This CSS is ordered in a loose "reading" order, from top to bottom, following the nesting. */

/* .presentation-container {
            max-height: var(--max-height-landing-presentation-container);
        } */

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

/* PRESENTATION CONTAINER 1 */

/* This is the equivalent of landing container on other pages. */

#presentation-1 {
  /* The combination of position and z-index is used for the overlap with presentation 2*/
  position: relative;

  z-index: 2;
  min-height: calc(1.2 * var(--min-height-landing-presentation-container));

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

  background-color: var(--afp-black);
  background-image: url("/communication/products/afp-photo/banniere_page_produit_photo.jpg");
  background-size: 130% auto;
  background-position-x: center;
  background-position-y: 60%;
  background-repeat: no-repeat;

  padding: calc(2 * var(--base-length)) calc(2 * var(--base-length)) 0;
}
@media (max-width: 992px) {
  #presentation-1 {
    background-position-y: 0%;
  }
}

@media (min-width: 768px) {
  #presentation-1 {
    display: block;
  }
}

#presentation-1-content {
  width: 100%;
}

/* Presentation 1 - Navbar */

#presentation-1-navbar {
  display: none;
}

@media (min-width: 768px) {
  #presentation-1-navbar {
    align-self: start;

    width: 100%;

    display: flex;
    justify-content: space-between;

    background-color: var(--afp-blue);
  }
  main ul.tips li, main ul.list_dotted li {
    font-size: 16px;
    line-height: 30px !important; 
    margin-bottom: 8px;
  }
}

#presentation-1-navbar-subcontainer {
  display: flex;
}

#navbar-logo-container {
  display: flex;
  align-items: center;
}

#navbar-logo {
  /* All those margin 0 !important are for Drupal, which replaces classes from img tags with another one. Which adds a margin of 10px. WHY. */
  /* Similar thing for height */
  margin: 0 !important;
  height: calc(3 * var(--base-length)) !important;
  width: auto;
}

.navbar-link {
  margin: auto;

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

  height: 100%;

  display: flex;
  align-items: center;

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

  /* Prevents user selection */
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;

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

.navbar-link:hover {
  cursor: pointer;
  text-decoration: none;
  color: var(--afp-white);
  background-color: var(--afp-blue-darker);
}

.navbar-link:active {
  background-color: var(--afp-blue-darkest);
}

#navbar-link-container {
  display: flex;
  justify-content: center;
}
.navbar-link-container {
  display: flex;
}
#link-request-trial-container {
  display: flex;

  text-decoration: none;
  padding: var(--base-length);
  gap: calc(0.25 * var(--base-length));

  /* Prevents user selection */
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
}

#link-request-trial-container:hover {
  cursor: pointer;
  background-color: var(--afp-blue-darker);
}

#link-request-trial-container:active {
  background-color: var(--afp-blue-darkest);
}

#link-request-trial-text {
  text-transform: uppercase;
  text-align: center;
  color: var(--afp-white);
  font-weight: bold;
}

#link-request-trial-svg-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

#svg-arrow-request-trial-navbar {
  height: var(--font-size);
  fill: var(--afp-white);
  stroke: var(--afp-white);
  stroke-width: var(--base-length);
}

/* Presentation 1 - Search picture central part */

#presentation-1-search-container {
  /* display: none; hidden for now */
  width: 100%;
}

#presentation-1-search-picture-container {
  margin: auto;
  width: 95%;

  display: flex;
  flex-direction: column;
  justify-content: center;

  gap: var(--base-length);
}

@media (min-width: 768px) {
  #presentation-1-search-picture-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    flex-direction: row;
    align-items: center;
    width: 60%;
    max-width: calc(0.6 * var(--max-width-presentation-content));
  }
}

#search-picture-title-container {
  align-self: center;

  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (min-width: 768px) {
  #search-picture-title-container {
    display: block;
  }
}

#search-picture-title-part-1-container {
  /* Magic number */
  padding: 8.5px 0;
}

#search-picture-title-part-1 {
  background-color: var(--afp-blue);
  color: var(--afp-white);
}

#search-picture-title-part-2-container {
  /* Magic number */
  padding: 8.5px 0;
}

#search-picture-title-part-2 {
  background-color: var(--afp-black);
  color: var(--afp-white);
}

@media (min-width: 576px) {
  #search-picture-title-part-1-container {
    /* Magic number */
    padding: calc((59.4px - 39.6px) / 2) 0;
  }

  #search-picture-title-part-1 {
    font-size: calc(1.2 * var(--font-size));
    background-color: var(--afp-blue);
    color: var(--afp-white);
  }

  #search-picture-title-part-2-container {
    /* Magic number */
    padding: calc((59.4px - 39.6px) / 2) 0;
  }

  #search-picture-title-part-2 {
    font-size: calc(1.2 * var(--font-size));
    background-color: var(--afp-black);
    color: var(--afp-white);
  }
}

@media (min-width: 768px) {
  #search-picture-title-part-1-container {
    /* Magic number */
    padding: calc((50px - 33px) / 2) 0;
  }

  #search-picture-title-part-1 {
    font-size: var(--font-size);
    background-color: var(--afp-blue);
    color: var(--afp-white);
  }

  #search-picture-title-part-2-container {
    /* Magic number */
    padding: calc((50px - 33px) / 2) 0;
  }

  #search-picture-title-part-2 {
    font-size: var(--font-size);
    background-color: var(--afp-black);
    color: var(--afp-white);
  }
}

#search-picture-form {
  position: relative;

  flex-grow: 2;
}

#search-picture-input {
  display: flex;
  width: 100%;
  height: 60px;

  border: none;
  outline: none;
  border-radius: calc(2 * var(--base-length));

  padding: calc(0.5 * var(--base-length)) var(--base-length);
  background-color: var(--afp-white);
  font-size: var(--base-length);

  align-items: center;
}

#search-picture-button {
  flex-grow: 2;

  border-radius: calc(2 * var(--base-length));

  padding: calc(0.5 * var(--base-length)) var(--base-length);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--afp-white);
}

#search-picture-button:hover {
  cursor: pointer;
}

#search-picture-button:active {
  transform: scale(0.98);
}

#search-picture-svg-container {
  position: absolute;

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

  top: 50%;
  right: var(--base-length);
  height: var(--font-size);
  width: var(--font-size);

  transform: translateY(-50%);
  cursor: pointer;
}

#svg-arrow-search-picture {
  height: var(--font-size);
  fill: var(--afp-blue);
  stroke: var(--afp-blue);
  stroke-width: var(--base-length);
}

#search-picture-svg-container:hover #svg-arrow-search-picture {
  fill: var(--afp-blue-darker);
  stroke: var(--afp-blue-darker);
}

#search-picture-svg-container:active {
  transform: translateY(-50%) scale(0.96);
}

#search-picture-svg-container:active #svg-arrow-search-picture {
  fill: var(--afp-blue-darkest);
  stroke: var(--afp-blue-darkest);
}

#search-picture-text {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
}

/* Presentation 1 - Editorial title */

/* Not displayed on mobiles */
#presentation-1-title-container {
  display: none;
}

@media (min-width: 768px) {
  #presentation-1-title-container {
    display: block;

    position: absolute;
    bottom: calc(0.2 * var(--min-height-landing-presentation-container));
  }
}

#presentation-1-title-top-part-container {
  /* Magic number */
  padding: calc((43.6px - 33px) / 2) 0;
}

#presentation-1-title-top-part {
  background-color: var(--afp-white);
  color: var(--afp-black);
  font-size: calc(0.8 * var(--font-size));
}

#presentation-1-title-bot-part {
  padding: calc(0.5 * 0.8 * var(--font-size));
  color: var(--afp-white);
  background-color: var(--afp-blue);
  width: fit-content;
  width: -moz-fit-content;
}

#presentation-1-title-bot-part-main {
  text-transform: uppercase;
  font-size: calc(1.5 * var(--font-size));
  font-weight: bold;
}

#presentation-1-title-bot-part-sub {
  font-size: calc(0.7 * var(--font-size));
}

/* Presentation 2 */

#presentation-2 {
  /* Negative margins are the best. */
  margin-top: calc(-0.2 * var(--min-height-landing-presentation-container));

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

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

#presentation-2-content {
  padding-bottom: var(--base-length);

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

@media screen and (min-width: 651px) {
  .presentation-2-tile {
    width: 100%;
  }
}

.presentation-2-tile {
  padding: calc(0.8 * var(--base-length));
}

@media (min-width: 768px) {
  .presentation-2-tile {
    width: 50%;
  }
}

@media (min-width: 992px) {
  .presentation-2-tile {
    width: 33.3333333%;
  }
}

.presentation-2-tile-content {
  position: relative;
  z-index: 2;
}

.presentation-2-tile-content > img {
  /* DRUPAL. PLEASE */
  margin: 0 !important;

  /* width: 100%; */
  height: auto;
}

.presentation-2-tile-title-container {
  width: 100%;

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

@media (min-width: 576px) {
  .presentation-2-tile-title-container {
    position: relative;
    bottom: 2rem;
    height: 110px;
    margin: auto;
    width: 84%;

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

.presentation-2-tile-title {
  line-height: 1.5em;
  font-size: calc(0.9 * var(--font-size));
  text-transform: uppercase;
  font-weight: bold;
}

.presentation-2-tile-description {
  line-height: 1.5em;
  font-size: calc(0.6 * var(--font-size));
}

.presentation-2-tile-photo-details {
  line-height: 1.5em;
  font-size: calc(0.6 * var(--font-size));
}

/* Presentation 2 bis */
#presentation-2bis {
  padding: 3rem 0;
}
.presentation-2bis-content {
  width: 95%;
  margin: auto;
  display: flex;
  flex-direction: row;
  gap: 2rem;
  justify-content: space-between;
}
.presentation-2bis-text {
  width: 65%;
}
.presentation-2bis-title {
  display: flex;
  flex-direction: row;
  gap: 2rem;
}
.presentation-2bis-title img {
  max-height: 300px;
  max-width: 100%;
  box-shadow: -21px 16px 1px var(--afp-blue);
}
.presentation-2bis-title h2 {
  background-color: var(--afp-black);
  color: var(--afp-white);
  font-weight: normal;
  font-size: 2rem;
  padding: 10px;
  display: inline;
  line-height: 3rem;
  width: fit-content;
  display: block;
}
.presentation-2bis-para p {
  margin: 2rem auto;
}
.button-2bis {
  width: fit-content;
  width: -moz-fit-content;
  font-weight: bold;
  margin: auto;
}
.button-2bis a {
  color: inherit;
}
.presentation-2bis-illustration iframe {
  min-height: 540px;
  border-radius: 20px;
}
@media screen and (min-width: 1400px) {
  .presentation-2bis-illustration iframe {
    min-width: 429px;
    min-height: 650px;
  }
  .presentation-2bis-title h2 {
    font-size: 2.3rem;
    line-height: 4rem;
  }
}
@media screen and (max-width: 1024px) {
  .presentation-2bis-content {
    flex-direction: column;
    align-items: center;
  }
  .presentation-2bis-text,
  .presentation-2bis-para p {
    width: 100%;
  }
}
@media screen and (max-width: 650px) {
  .presentation-2bis-title {
    display: block;
    width: unset;
  }
  .presentation-2bis-title img {
    max-height: none;
  }
}

/* Presentation 3 */

#presentation-3 {
  position: relative;
  z-index: 2;

  min-height: calc(1.3 * var(--min-height-landing-presentation-container));
  overflow: hidden;

  background-image: url("/communication/products/afp-photo/afp-photo-background-image-2.jpg");
  background-position: center;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}

#presentation-3-content-1 {
  /* Prevents user selection */
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;

  animation: 13s linear 0s infinite presentation-3-content-1-animation;
}

@keyframes presentation-3-content-1-animation {
  from {
    opacity: 1;
  }

  40% {
    opacity: 1;
  }

  45% {
    height: initial;
    width: initial;
    opacity: 0;
  }

  45.1% {
    height: 0;
    width: 0;
  }

  95% {
    height: 0;
    width: 0;
  }

  95.1% {
    height: initial;
    width: initial;
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

#presentation-3-content-2 {
  height: 0;
  width: 0;
  opacity: 0;

  /* Prevents user selection */
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;

  animation: 13s linear 0s infinite presentation-3-content-2-animation;
}

@keyframes presentation-3-content-2-animation {
  from {
    opacity: 0;
  }

  45% {
    height: 0;
    width: 0;
    opacity: 0;
  }

  45.1% {
    height: initial;
    width: initial;
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  94.9% {
    height: initial;
    width: initial;
    opacity: 0;
  }

  95% {
    height: 0;
    width: 0;
  }

  to {
    height: 0;
    width: 0;
    opacity: 0;
  }
}

.presentation-3-title-container {
  /* Magic number. */
  padding: calc((50px - 33px) / 2) 0;

  width: fit-content;
  width: -moz-fit-content;
  margin: auto;
}

.presentation-3-title {
  background-color: var(--afp-black);

  color: var(--afp-white);
  text-align: center;
  font-size: calc(1 * var(--font-size));
}

.presentation-3-subtitle-container {
  /* Magic number. */
  padding: calc((41px - 33px) / 2) 0;

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

  margin: auto;
  text-align: center;
}

.presentation-3-subtitle {
  background-color: var(--afp-blue);

  color: var(--afp-white);
  text-align: center;
  font-size: calc(0.9 * var(--font-size));
}

@media (min-width: 576px) {
  .presentation-3-title-container {
    /* Magic number. */
    padding: calc((74px - 49.5px) / 2) 0;
  }

  .presentation-3-title {
    background-color: var(--afp-black);
    font-size: calc(1.5 * var(--font-size));
    color: var(--afp-white);
  }

  .presentation-3-subtitle-container {
    /* Magic number. */
    padding: calc((68.8px - 46.2px) / 2) 0;
  }

  .presentation-3-subtitle {
    background-color: var(--afp-blue);
    font-size: calc(1.4 * var(--font-size));
    color: var(--afp-white);
  }
}

/* Presentation 4, 5, 6 - Common CSS */

.presentation-4-5-6-title-container {
  margin-bottom: var(--base-length);
}

.presentation-4-5-6-title-top-container {
  /* Magic number. */
  padding: calc((64.6px - 42.9px) / 2) 0;
}

.presentation-4-5-6-title-top {
  background-color: var(--afp-black);

  font-size: calc(1.3 * var(--font-size));
  color: var(--afp-white);
}

.presentation-4-5-6-title-bottom-container {
  /* Magic number. */
  padding: calc((84.4px - 56.1px) / 2) 0;
}

.presentation-4-5-6-title-bottom {
  background-color: var(--afp-blue);

  font-size: calc(1.7 * var(--font-size));
  color: var(--afp-white);
}

.presentation-4-5-6-text-container {
  width: 100%;
}

.presentation-4-5-6-text {
  margin-bottom: var(--base-length);
  text-align: justify;
}

.presentation-4-5-6-request-trial-container {
  display: flex;
  width: fit-content;
  width: -moz-fit-content;

  gap: calc(0.5 * var(--base-length));
  text-decoration: none;
  color: var(--afp-black);
}

.presentation-4-5-6-request-trial-container:hover {
  text-decoration: none;
}

.presentation-4-5-6-request-trial-svg-container {
  display: flex;
  align-items: center;
}

.presentation-4-5-6-request-trial-text {
  font-weight: bold;
}

/* Presentation 4 */

#presentation-4 {
  position: relative;
  z-index: 3;
  margin-top: calc(-4 * var(--base-length));
  padding-bottom: calc(2 * var(--base-length));
}

#presentation-4-content {
  width: 100%;
}

#presentation-4-photos-container {
  position: relative;
  width: 100%;
  padding-bottom: 5%;

  margin-bottom: var(--base-length);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#presentation-4-photos-container-background {
  position: absolute;
  z-index: 2;
  width: 75%;
  height: 100%;
  top: 0;
  left: 0;

  background-color: var(--afp-blue);
}

#presentation-4-photos-container > img {
  /* DRUPAL. I BEG YOU. */
  margin: 0px !important;

  position: relative;
  z-index: 3;
  width: calc(33.33333% - 2%);
  height: fit-content;
  height: -moz-fit-content;

  padding-bottom: 3.3333%;
}

#presentation-4-description-container {
  width: 100%;

  display: flex;
  flex-direction: column;
  padding: 0 var(--base-length);
}

.svg-arrow-request-trial {
  height: calc(0.8 * var(--font-size));
  fill: var(--afp-black);
  stroke: var(--afp-black);
  stroke-width: var(--font-size);
}

@media (min-width: 768px) {
  #presentation-4-content {
    display: flex;
  }

  #presentation-4-photos-container {
    width: 65%;
  }

  #presentation-4-description-container {
    width: 35%;
  }
}

/* Presentation 5 */
#presentation-5-content {
  margin-bottom: calc(2 * var(--base-length));
}

#presentation-5-description-container {
  width: 100%;
  padding: 0 var(--base-length);
}

#presentation-5-title-top-container,
#presentation-5-title-bottom-container {
  width: fit-content;
  width: -moz-fit-content;

  margin-left: auto;
  text-align: right;
}

#presentation-5-illustration-container {
  width: 100%;
}

#presentation-5-illustration {
  /* DRUPAAAAAL. */
  margin: 0px !important;

  width: 100%;
  height: auto;
}

#presentation-5-request-trial-container {
  margin-left: auto;
}

@media (min-width: 768px) {
  #presentation-5-content {
    display: flex;
    flex-direction: row-reverse;
  }

  #presentation-5-illustration-container {
    width: 55%;
  }

  #presentation-5-description-container {
    width: 45%;
  }
}

/* Presentation 6 */
#presentation-6-content {
  margin-bottom: calc(2 * var(--base-length));
}

#presentation-6-title-top-container {
  /* custom line-height and padding due to commas */
  /* Magic number */
  line-height: 2.5em;
  padding: calc((60px - 55px) / 2) 0;
}

#presentation-6-description-container {
  width: 100%;
  padding: 0 calc(2 * var(--base-length)) var(--base-length)
    calc(2 * var(--base-length));
}

#presentation-6-illustration-container {
  width: 100%;
  padding-bottom: calc(3 * var(--base-length));
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

#presentation-6-illustration {
  /* Drupal. */
  margin: 0px !important;

  width: calc(100% - 3 * var(--base-length));
  height: auto;
  box-shadow: calc(1 * var(--base-length)) calc(1 * var(--base-length)) 0px
    calc(0.25 * var(--base-length)) var(--afp-blue);
}

@media (min-width: 768px) {
  #presentation-6-content {
    display: flex;
  }

  #presentation-6-illustration-container {
    width: 50%;
  }

  #presentation-6-description-container {
    width: 50%;
  }
}

/* Presentation 7 */

#presentation-7 {
  padding: var(--base-length);
  background-color: var(--afp-blue);
  margin-bottom: calc(2 * var(--base-length));
  max-height: none;
}

#presentation-7-content {
  display: flex;
  flex-wrap: wrap;
  max-width: var(--max-width-presentation-content);
  /* justify-content: center; */
}

#presentation-7-title-container {
  margin-bottom: var(--base-length);
  width: 100%;
}

#presentation-7-title-top {
  display: inline-flex;

  align-items: center;
  gap: 0.25em;

  background-color: var(--afp-black);
  color: var(--afp-white);
  font-size: calc(1.3 * var(--font-size));
}

#presentation-7-title-logo {
  display: inline-block;
  height: 1em !important; /* AFP.com has some dumb CSS, I tell you */
  width: auto;
}

#presentation-7-title-bottom-container {
  padding: calc((64.6px - 42.9px) / 2) 0;
}

#presentation-7-title-bottom {
  background-color: var(--afp-white);
  color: var(--afp-blue);
  font-size: calc(1.3 * var(--font-size));
}

/* Presentation 8 */

#presentation-8 {
  max-height: unset;
}

#presentation-8-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: var(--max-width-presentation-content);

  padding: 0 calc(1 * var(--base-length));
}

#presentation-8-title-container {
  margin-bottom: calc(2 * var(--base-length));
}

#presentation-8-title-top {
  display: inline-block;
  width: 100%;
  background-color: var(--afp-black);
  color: var(--afp-white);
  font-size: calc(1.45 * var(--font-size));
  text-align: center;
}

#presentation-8-title-bottom {
  display: inline-block;
  width: 100%;

  background-color: var(--afp-blue);
  color: var(--afp-white);
  font-size: calc(1.2 * var(--font-size));
  text-align: center;
}

@media (min-width: 376px) {
  #presentation-8-title-top-container {
    /* Magic number */
    padding: calc((64.6px - 42.9px) / 2) 0;
    text-align: center;
  }

  #presentation-8-title-top {
    display: inline;
    font-size: calc(1.3 * var(--font-size));
  }

  #presentation-8-title-bottom-container {
    /* Magic number */
    padding: calc((59.4px - 39.6px) / 2) 0;
    text-align: center;
  }

  #presentation-8-title-bottom {
    display: inline;
    font-size: calc(1.2 * var(--font-size));
  }
}

@media (min-width: 576px) {
  #presentation-8-title-top-container {
    /* Magic number */
    padding: calc((74px - 49.5px) / 2) 0;
  }

  #presentation-8-title-top {
    font-size: calc(1.5 * var(--font-size));
  }

  #presentation-8-title-bottom-container {
    /* Magic number */
    padding: calc((74px - 49.5px) / 2) 0;
  }

  #presentation-8-title-bottom {
    font-size: calc(1.5 * var(--font-size));
  }
}

@media (min-width: 768px) {
  #presentation-8-title-top-container {
    /* Magic number */
    padding: calc((99px - 66px) / 2) 0;
  }

  #presentation-8-title-top {
    font-size: calc(2 * var(--font-size));
  }

  #presentation-8-title-bottom-container {
    /* Magic number */
    padding: calc((99px - 66px) / 2) 0;
  }

  #presentation-8-title-bottom {
    font-size: calc(2 * var(--font-size));
  }
}

#presentation-8-offers-container {
  position: relative;
  height: fit-content;
  height: -moz-fit-content;

  margin-bottom: calc(2 * var(--base-length));

  display: flex;
  width: 100%;
  padding-top: calc(2 * var(--base-length));
}

@media (min-width: 992px) {
  #presentation-8-offers-container {
    gap: 33.33333333%;
    padding-bottom: calc(2 * var(--base-length));
  }
}

.presentation-8-offers-button {
  position: absolute;
  z-index: 3;

  top: calc(15 * var(--base-length));
  transform: translateY(-50%);

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

  border: none;

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

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

  cursor: pointer;
}

.presentation-8-offers-button:hover {
  background-color: var(--afp-blue-darker);
}

.presentation-8-offers-button:active {
  background-color: var(--afp-blue-darkest);
}

#presentation-8-offers-button-left {
  left: calc(-0.5 * var(--base-length));
}

#presentation-8-offers-button-right {
  right: calc(-0.5 * var(--base-length));
}

.svg-arrow-offers {
  height: calc(1 * var(--font-size));
  fill: var(--afp-white);
  stroke: var(--afp-white);
  stroke-width: var(--base-length);
}

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

.offer-column {
  width: 100%;
  box-shadow: 0px 0px calc(0.5 * var(--font-size)) 0px
    var(--afp-secondary-grey-10);
  padding: calc(1.5 * var(--base-length));
  background-color: var(--afp-white);
}

@media screen and (max-width: 992px) {
  #presentation-8-offers-container {
    display: block;
  }
  .offer-column-display-none {
    /* border: 1px solid var(--afp-secondary-grey-100); */
    margin: 1em auto;
  }
  .offer-column-list {
    padding-left: 0;
  }
}

.offer-column-title {
  margin: var(--base-length);

  text-transform: uppercase;
  font-size: calc(2 * var(--font-size));
  font-weight: bold;
  text-align: center;
  color: var(--afp-blue);
}

.offer-column-payment-type {
  width: 100%;

  padding: calc(0.5 * 1.3 * var(--font-size));
  background-color: var(--afp-black);

  font-size: calc(1.3 * var(--font-size));
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
  color: var(--afp-white);
}

#offer-photo-quotas .offer-column-payment-type {
  background-color: var(--afp-blue);
}
.offer-column-list {
  /* padding-left: 0; */
  margin: 1em auto;
}

.offer-column-list-item {
  /* text-transform: uppercase; */
  text-align: center;
  list-style-type: none;
  margin-bottom: calc(0.5 * var(--base-length));
  font-size: calc(0.95 * var(--font-size));
}

@media (min-width: 576px) {
  .svg-arrow-offers {
    height: calc(2 * var(--font-size));
  }

  .offer-column {
    width: calc(80% - 2 * var(--base-length));
    margin: auto;
  }
}

@media screen and (max-width: 768px) {
  /* .wrapper .photo {
    width: 100% !important;
    text-align: center;
  } */
  .wrapper.clearfix .text {
    width: 95% !important;
    margin: auto;
    text-align: center !important;
  }
}

@media (min-width: 992px) {
  .presentation-8-offers-button {
    display: none;
  }

  .offer-column {
    width: 33.33333333%;
    margin: unset;
    box-shadow: rgb(0 0 0 / 50%) 0px 2px 4px 0px;

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

  .offer-column-display-none {
    display: block;
  }

  #offer-photo-wire {
    border-style: solid none solid solid;
    border-color: var(--afp-blue);
    border-width: 2px;
  }

  #offer-photo-quotas {
    position: absolute;
    top: 0;
    height: 100%;
    left: 33.33333%;
  }

  #offer-per-unit {
    border-style: solid solid solid none;
    border-color: var(--afp-blue);
    border-width: 2px;
  }

  .offer-column-payment-type {
    max-width: 82%;
    margin: 1.2em auto;
  }

  #offer-photo-quotas .offer-column-list-item {
    margin-bottom: calc(0.65 * var(--base-length));
    font-size: calc(1.05 * var(--font-size));
  }
}

#presentation-8-request-trial-button {
  margin-bottom: calc(2 * var(--base-length));

  border: none;
  border-radius: calc(2 * 1.5 * var(--font-size));

  display: inline-flex;

  padding: calc(0.5 * 1.5 * var(--font-size)) calc(2 * 1.5 * var(--font-size));
  background-color: var(--afp-blue);

  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  font-family: inherit;
  font-size: calc(1.5 * var(--font-size));
  font-weight: bold;
  color: var(--afp-white);

  cursor: pointer;
}

#presentation-8-request-trial-button:hover {
  background-color: var(--afp-blue-darker);
}

#presentation-8-request-trial-button:active {
  transform: scale(0.95);
}

/* Presentation 9 */

/* This ensures elememnts are overlapping proprely without adding z-index and position relative everywhere by end */
#presentation-9-content,
#presentation-9-content * {
  position: relative;
  z-index: 1;
}

#presentation-9-content {
  margin-bottom: calc(2 * var(--base-length));
}

@media (min-width: 576px) {
  #presentation-9-content {
    padding: calc(2 * var(--base-length));
  }
}

#presentation-9-legend-background-content-wide {
  display: none;
}

@media (min-width: 768px) {
  #presentation-9-legend-background-content-wide {
    display: block;

    position: absolute;
    z-index: 0;
    left: 0;
    bottom: 0;

    width: 100%;
    height: calc(10 * var(--base-length));

    background-color: var(--afp-blue);
  }
}

#presentation-9-title-container {
  position: relative;
  z-index: 3;
  width: fit-content;
  width: -moz-fit-content;
  margin: auto;
}

@media (min-width: 768px) {
  #presentation-9-title-container {
    margin-left: calc(2 * var(--base-length));
  }
}

#presentation-9-title-top-container {
  padding: calc((64.6px - 42.9px) / 2) 0;
  width: fit-content;
  width: -moz-fit-content;
}

#presentation-9-title-top {
  padding: calc(0.5 * 1.3 * var(--font-size));

  background-color: var(--afp-black);
  color: var(--afp-white);
  font-size: calc(1.3 * var(--font-size));
  text-align: center;
}

#presentation-9-title-bottom-container {
  padding: calc((74px - 49.5px) / 2) 0;
  width: fit-content;
  width: -moz-fit-content;
}

#presentation-9-title-bottom {
  padding: calc(0.5 * 1.5 * var(--font-size));

  background-color: var(--afp-blue);
  color: var(--afp-white);
  font-size: calc(1.5 * var(--font-size));
  text-align: center;
}

#presentation-9-illustrations-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(2 * var(--base-length));

  margin-top: calc(2 * var(--base-length));
}

@media (min-width: 768px) {
  #presentation-9-illustrations-container {
    margin-top: calc(-2 * var(--base-length));

    display: flex;
    flex-direction: row;
    align-items: stretch;
  }
}

.presentation-9-illustration-container {
  width: 85%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (min-width: 768px) {
  .presentation-9-illustration-container {
    width: 50%;
  }
}

.presentation-9-storytelling-image-link {
  display: block;
  width: 100%;
}

#presentation-9-illustrations-container img {
  /* … drupal. */
  margin: 0px !important;

  width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  .presentation-9-illustration {
    margin-bottom: var(--base-length);
  }
}

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

  color: var(--afp-white);
  text-transform: uppercase;

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

.presentation-9-illustration-legend-title {
  font-weight: bold;
}

/* Presentation 10 */

#presentation-10 {
  max-height: unset;
  margin-bottom: calc(2 * var(--base-length));
}

#presentation-10-title-container {
  position: relative;
  z-index: 2;

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

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

#presentation-10-title-top-container {
  padding: calc((64.6px - 42.9px) / 2) 0;
  width: fit-content;
  width: -moz-fit-content;
}

#presentation-10-title-top {
  padding: calc(0.5 * 1.3 * var(--font-size));

  background-color: var(--afp-black);
  color: var(--afp-white);
  font-size: calc(1.3 * var(--font-size));
  text-align: center;
}

#presentation-10-title-bottom-container {
  padding: calc((74px - 49.5px) / 2) 0;
  width: fit-content;
  width: -moz-fit-content;
}

#presentation-10-title-bottom {
  padding: calc(0.5 * 1.5 * var(--font-size));

  background-color: var(--afp-blue);
  color: var(--afp-white);
  font-size: calc(1.5 * var(--font-size));
  text-align: center;
}

.presentation-10-slideshow-button {
  display: none;
}

#presentantion-10-slideshow-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--base-length);
}

.presentation-10-slide-container {
  display: flex;
  flex-direction: column;

  text-decoration: none;
}

.presentation-10-slide-image {
  width: 100%;
  height: auto;
}

#presentation-10-slideshow-small-buttons-container {
  display: none;
}

.presentation-10-slide-description-container {
  margin-bottom: var(--base-length);
}

.presentation-10-slide-title {
  display: inline-block;
  width: 100%;

  background-color: var(--afp-black);
  color: var(--afp-white);
  font-size: calc(1.3 * var(--font-size));
  text-align: center;
}

.presentation-10-description {
  padding: calc(0.5 * 1em);
  background-color: var(--afp-blue);
  padding-right: 21px;
  text-transform: uppercase;
  color: var(--afp-white);
  font-weight: bold;
}

@media (min-width: 768px) {
  #presentation-10-slideshow-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
  }

  .presentation-10-slide-container {
    width: 50%;

    display: flex;
    flex-direction: column;

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

  .presentation-10-slide-description-container {
    height: 100%;

    display: flex;
    flex-direction: column;
  }

  .presentation-10-slide-title {
    font-size: calc(0.9 * var(--font-size));
  }

  .presentation-10-description {
    flex-grow: 2;

    display: flex;
    align-items: center;

    font-size: calc(0.9 * var(--font-size));
  }
}

@media (min-width: 992px) {
  #presentation-10-content {
    padding: 0 calc(2 * var(--base-length)) calc(2 * var(--base-length));
  }

  .presentation-10-slideshow-button {
    position: absolute;
    z-index: 3;

    top: 50%;
    transform: translateY(-50%);

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

    border: none;

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

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

    cursor: pointer;
  }

  #presentation-10-slideshow-button-left {
    left: calc(-1.5 * var(--base-length));
  }

  #presentation-10-slideshow-button-right {
    right: calc(-1.5 * var(--base-length));
  }

  .svg-arrow-slideshow {
    height: calc(1.5 * var(--font-size));
    fill: var(--afp-white);
    stroke: var(--afp-white);
    stroke-width: var(--base-length);
  }

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

  #presentation-10-slideshow-container {
    position: relative;
    margin-top: calc(-5 * var(--base-length));
  }

  .presentation-10-slide-container {
    width: 100%;
    position: relative;
    margin-bottom: var(--base-length);
  }

  .slide-display-none {
    display: none;
  }

  .presentation-10-slide-container > img {
    /* Drupal! Again. */
    margin: 0px !important;

    width: 66.6666%;
    height: auto;
  }

  .presentation-10-slide-description-container {
    display: block;

    height: unset;

    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);

    width: 40%;
    padding: var(--base-length);

    background-color: var(--afp-blue);
  }

  .presentation-10-slide-title-container {
    margin-bottom: var(--base-length);
  }

  .presentation-10-slide-title {
    background-color: var(--afp-white);
    color: var(--afp-black);
    font-size: 22px;
    text-align: center;
  }

  .presentation-10-description {
    display: block;

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

  #presentation-10-slideshow-small-buttons-container {
    display: flex;
    justify-content: center;
    gap: calc(2 * var(--base-length));
  }

  input.slideshow-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(1.5 * var(--base-length));
    height: calc(1.5 * var(--base-length));
    border: calc(0.15 * var(--base-length)) solid var(--afp-black);

    border-radius: 50%;
    background-color: black;

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

  input.slideshow-small-button::before {
    content: "";

    width: calc(1.6 * var(--base-length));
    height: calc(1.6 * var(--base-length));
    flex-shrink: 0;

    border-radius: 50%;
    background-color: var(--afp-blue);

    transform: scale(0);
    transition: 120ms transform ease-in-out;
  }

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

  input.slideshow-small-button:hover {
    opacity: 0.9;
    cursor: pointer;
  }

  input.slideshow-small-button:checked:hover {
    opacity: 1;
  }
}

/* Presentation 11 */

#presentation-11-content {
  margin-bottom: calc(2 * var(--base-length));
}

#presentation-11-title-container {
  margin-left: var(--base-length);
  margin-bottom: var(--base-length);
}

#presentation-11-title-top-container {
  padding: calc((64.6px - 42.9px) / 2) 0;
  width: fit-content;
  width: -moz-fit-content;
}

#presentation-11-title-top {
  padding: calc(0.5 * 1.3 * var(--font-size));

  background-color: var(--afp-black);
  color: var(--afp-white);
  font-size: calc(1.3 * var(--font-size));
  text-align: center;
}

#presentation-11-title-bottom-container {
  padding: calc((74px - 49.5px) / 2) 0;
  width: fit-content;
  width: -moz-fit-content;
}

#presentation-11-title-bottom {
  padding: calc(0.5 * 1.5 * var(--font-size));

  background-color: var(--afp-blue);
  color: var(--afp-white);
  font-size: calc(1.5 * var(--font-size));
  text-align: center;
}

#presentation-11-description {
  margin: 0 var(--base-length) var(--base-length);

  font-size: calc(0.9 * var(--font-size));
  text-align: justify;
  text-transform: uppercase;
  font-weight: bold;
}

#presentation-11-illustrations-container {
  display: flex;
  flex-direction: column;
  gap: calc(0.5 * var(--base-length));
}

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

  padding: var(--base-length);
  background-size: cover;
  background-position: center;

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

#presentation-11-illustration-1 {
  background-image: linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.4),
      rgba(0, 0, 0, 0.4)
    ),
    url("/communication/products/afp-photo/afp-photo-presentation-11-image-1.jpg");
}

#presentation-11-illustration-2 {
  background-image: linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.4),
      rgba(0, 0, 0, 0.4)
    ),
    url("/communication/products/afp-photo/afp-photo-presentation-11-image-2.jpg");
}

#presentation-11-illustration-3 {
  background-image: linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.4),
      rgba(0, 0, 0, 0.4)
    ),
    url("/communication/products/afp-photo/afp-photo-presentation-11-image-3.jpg");
}

#presentation-11-illustration-4 {
  background-image: linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.4),
      rgba(0, 0, 0, 0.4)
    ),
    url("/communication/products/afp-photo/afp-photo-presentation-11-image-4.jpg");
}

.presentation-11-illustration-title {
  text-transform: uppercase;
  font-weight: bold;
}

@media (min-width: 768px) {
  #presentation-11-title-container {
    margin-left: calc(3 * var(--base-length));
    margin-bottom: var(--base-length);
  }

  #presentation-11-title-top-container {
    padding: calc((64.6px - 42.9px) / 2) 0;
    width: fit-content;
    width: -moz-fit-content;
  }

  #presentation-11-title-top {
    padding: calc(0.5 * 1.3 * var(--font-size));

    background-color: var(--afp-black);
    color: var(--afp-white);
    font-size: calc(1.3 * var(--font-size));
    text-align: center;
  }

  #presentation-11-title-bottom-container {
    padding: calc((74px - 49.5px) / 2) 0;
    width: fit-content;
    width: -moz-fit-content;
  }

  #presentation-11-title-bottom {
    padding: calc(0.5 * 1.5 * var(--font-size));

    background-color: var(--afp-blue);
    color: var(--afp-white);
    font-size: calc(1.5 * var(--font-size));
    text-align: center;
  }

  #presentation-11-description {
    margin: 0 calc(3 * var(--base-length)) calc(2 * var(--base-length));
    font-size: calc(1.05 * var(--font-size));
    text-transform: uppercase;
    font-weight: bold;
  }

  #presentation-11-illustrations-container {
    flex-direction: row;
  }

  .presentation-11-illustration {
    width: 25%;
  }

  .presentation-11-illustration:after {
    content: "";
    display: block;
    padding-bottom: 25%;
  }

  .presentation-11-illustration-title {
    text-transform: uppercase;
    font-weight: bold;
  }
}
@media screen and (max-width: 576px) {
  #presentation-1 {
    min-height: 65vh;
    padding: 3px;
  }
}
/* drupal adpatation */
.node-type-afp-produit
  .panel-pane.pane-entity-view.pane-node
  .line.mb1.bgblue.line.relative.mb2.pt1.pb2.pa0m,
#breadcrumb.line.hidem {
  display: none;
}
.info_social.mb2 {
  display: none;
}
a {
  text-decoration: none !important;
}

main a {
  font-weight: unset !important;
}

.photo:before {
  content: unset !important;
}

.page-node-type-afp-produit a:hover {
  color: unset !important;
}


@media (max-width: 768px) {
  .oli-scarff {
    width: 100%;
    clear: both;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }

  .oli-scarff-image {
    float: left;
    width: 30% !important;
    margin-right: 10px; 
    text-align: center;
  }
}

@media (min-width: 769px) {
  .oli-scarff {
    width: 100%;clear: both;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .oli-scarff-image {
    flex-basis: 20%;
  }
}

.oli-scarff-image {
  float: left;
  margin-right: 10px;
}