/*
 * Correctif mobile - Single realisation
 * Objectif : sur mobile, le carrousel "Autres realisations" affiche 1 realisation par slide,
 * sans debordement ni slides blancs.
 */

@media (max-width: 768px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .single-realisation .fiche-real,
  .single-realisation .fiche-real .fullpage-wrapper,
  .single-realisation .detail-realisation,
  .single-realisation .detail-realisation .wrapper,
  .single-realisation .content-fiche,
  .single-realisation .blcListReal,
  .single-realisation .listReal,
  .single-realisation #slideRealFiche {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .single-realisation .content-fiche,
  .single-realisation .blcListReal {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  .single-realisation .blcIntro .row {
    display: block !important;
  }

  .single-realisation .blcIntro .col,
  .single-realisation .blcIntro .col.left,
  .single-realisation .blcIntro .col.right {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
  }

  .single-realisation img,
  .single-realisation .top-img img,
  .single-realisation #slider img,
  .single-realisation #slideRealFiche img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: cover;
  }

  /* Annule la regle mobile du theme qui cache certains .item et cree des slides blancs avec Slick. */
  .single-realisation #slideRealFiche .item,
  .single-realisation #slideRealFiche .slick-slide,
  .single-realisation #slideRealFiche .slick-slide > div,
  .single-realisation #slideRealFiche .slick-slide a.item {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .single-realisation #slideRealFiche .slick-list {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .single-realisation #slideRealFiche .slick-track {
    display: flex !important;
    align-items: stretch !important;
  }

  .single-realisation #slideRealFiche .slick-slide {
    height: auto !important;
    float: none !important;
  }

  .single-realisation #slideRealFiche .slick-slide > div {
    height: 100% !important;
  }

  .single-realisation #slideRealFiche a.item {
    margin: 0 !important;
    padding: 0 !important;
  }

  .single-realisation #slideRealFiche .img,
  .single-realisation #slideRealFiche .img img {
    width: 100% !important;
    max-width: 100% !important;
  }

  .single-realisation #slideRealFiche .slick-dots {
    position: static !important;
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 20px !important;
  }
}

/*
 * Correctif espace blanc en haut - Single realisation
 * fullPage.js transforme les sections en table-cell avec vertical-align: middle.
 * Sur la premiere section realisation, cela centre le bloc et cree un grand espace blanc au-dessus du header.
 * On force uniquement le hero realisation a commencer en haut.
 */
.single-realisation .secHearReal.fp-table,
.single-realisation .secHearReal .fp-tableCell {
  vertical-align: top !important;
}

.single-realisation .secHearReal .fp-tableCell,
.single-realisation .secHearReal .blcBanner,
.single-realisation .secHearReal .blcTop,
.single-realisation .secHearReal #slider {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.single-realisation .secHearReal {
  overflow: hidden;
}

/*
 * Correctif espace blanc haut header - Single realisation
 * Supprime les marges/paddings ajoutes par Twenty Twenty-One autour du contenu
 * et annule le centrage vertical fullPage.js sur la premiere section.
 */
body.single-realisation,
body.single-realisation #page,
body.single-realisation #content,
body.single-realisation #primary,
body.single-realisation #main,
body.single-realisation .site,
body.single-realisation .site-content,
body.single-realisation .content-area,
body.single-realisation .site-main,
body.single-realisation article,
body.single-realisation .fiche-real,
body.single-realisation #fullpage-single {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body.single-realisation .site-main > article > *:first-child,
body.single-realisation article > *:first-child,
body.single-realisation .fiche-real > *:first-child,
body.single-realisation #fullpage-single > *:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body.single-realisation .secHearReal.fp-section,
body.single-realisation .secHearReal.fp-table,
body.single-realisation .secHearReal .fp-tableCell {
  margin-top: 0 !important;
  padding-top: 0 !important;
  vertical-align: top !important;
}

body.single-realisation .secHearReal .fp-tableCell {
  display: block !important;
}

body.single-realisation .secHearReal .blcTop.dark {
  top: 0 !important;
  margin-top: 0 !important;
}

body.single-realisation .secHearReal #slider,
body.single-realisation .secHearReal .slider,
body.single-realisation .secHearReal .slider .item {
  margin-top: 0 !important;
}

/* La version desktop avait un padding-top de 55px sur le slide hero.
   On le retire et on compense seulement pour ne pas cacher l'image sous le menu. */
@media (min-width: 769px) {
  body.single-realisation .fiche-real .secHearReal .slider .item {
    padding-top: 0 !important;
  }

  body.single-realisation .fiche-real .secHearReal .slider .item .wrapper {
    padding-top: 55px !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 768px) {
  body.single-realisation .fiche-real .secHearReal .slider .item {
    padding-top: 85px !important;
  }
}