/* -------------------------------------------------------------------------- */
/*                                   LAPTOP                                   */
/* -------------------------------------------------------------------------- */

@media (max-width: 1537px) {
      /* --------------------------------- HEADER --------------------------------- */
      header {
            padding-top: 100px;
            padding-bottom: 100px;
      }

      .headerContent {
            width: 100%;
      }
      /* ---------------------------------- ABOUT --------------------------------- */
      #about {
            flex-wrap: wrap;
      }

      /* .headerGridContainer {
            align-items: flex-start;
      } */
      /* .aboutColD .gridImgContainer {
            height: 100%;
      } */
      .pictosContainer {
            grid-template-columns: repeat(auto-fill, minmax(157px, 1fr));
      }
      /* ---------------------------------- AVIS ---------------------------------- */
      .avisColG {
            width: 100%;
      }
      .avisColD {
            width: 50%;
            margin-left: auto;
            margin-right: auto;
      }
      .avis {
            width: 46%;
      }
      .avisContainer {
            justify-content: space-between;
      }
      /* --------------------------------- FOOTER --------------------------------- */
      footer ul {
            flex-direction: column;
      }
      .postFooterSection {
            align-items: flex-start;
            margin-top: 50px;
      }
      /* .footerContentContainer {
            gap: 15px;
            flex-direction: column-reverse;
      }
      .footerColD {
            width: 100%;
      }
      .footerColG {
            width: 50%;
            margin-left: auto;
            margin-right: auto;
      } */
      .postFooterSection img {
            margin-right: 0;
      }
      /* --------------------------------- GALERIE -------------------------------- */
      .galerieHeader {
            height: 40vh;
      }
      .galeryGrid {
            grid-template-columns: 1fr 1fr 1fr;
      }
}

/* -------------------------------------------------------------------------- */
/*                                  TABLETTE                                  */
/* -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
      header {
            height: auto;
      }
      #headerVid {
            display: none;
      }
      .abeille {
            margin-left: auto;
            margin-right: auto;
            display: block;
            position: relative;
            width: 40px;
      }
      nav {
            display: none !important;
      }
      nav.navMobile {
            display: flex !important;
      }
      section,
      header,
      footer,
      .navMobile {
            padding-left: 50px;
            padding-right: 50px;
      }
      header .fakeTitle {
            font-size: 2rem;
      }
      .littleCard:hover img {
            transform: none;
            filter: none;
      }
      .mt200 {
            margin-top: 100px;
      }
      .footerColG {
            width: 100%;
      }
}

/* -------------------------------------------------------------------------- */
/*                                  TElEPHONE                                 */
/* -------------------------------------------------------------------------- */

@media (max-width: 768px) {
      main::before {
            background-repeat: no-repeat;
            background-size: auto;
      }
      header h1 {
            text-align: center !important;
      }
      p {
            font-size: 14px;
      }
      .abeille {
            display: none;
      }
      section,
      header,
      footer,
      .navMobile {
            padding-left: 25px;
            padding-right: 25px;
      }
      /* ------------------------------ INDEX HEADER ------------------------------ */

      .mobileHeaderText {
            display: block;
      }
      .headerText {
            display: none;
      }
      .text-justify {
            text-align: left;
      }
      .headerTitleBtn {
            flex-wrap: wrap;
            gap: 15px;
      }
      .headerColG,
      .headerColD {
            width: 100%;
      }
      .headerColD {
            justify-content: flex-start;
      }
      header .fakeTitle {
            text-align: center;
            font-size: 2.2rem !important;
      }
      .headerColD .buttonContainer {
            margin-left: auto;
            margin-right: auto;
      }
      .buttonHeader {
            margin-left: auto;
            margin-right: auto;
      }
      header .buttonContainer {
            width: 200px;
            margin-top: 15px;
            margin-bottom: 15px;
      }
      header .buttonTextContainer p {
            font-size: 14px;
      }
      .gridImgContainer {
            height: 240px;
      }
      .articleContainer {
            flex-direction: column;
            background-color: transparent;
      }
      .articleContainer .imgFleche {
            transform: none;
      }
      .articleBtn .buttonContainer {
            background-color: var(--buttonBackground);
      }
      /* ---------------------------------- INDEX --------------------------------- */

      #about .aboutBtn {
            width: 180px;
      }
      #about .buttonContainer {
            width: 60%;
      }
      .littleCard {
            gap: 5px;
      }
      .aboutColD {
            height: auto;
      }
      .piscine {
            display: flex;
      }
      .avisColG .fakeTitle {
            flex-wrap: wrap;
            justify-content: center;
            text-align: center;
      }
      .avisColG .fakeTitle h2 {
            font-size: 1.5rem;
            margin-bottom: 10px;
      }
      .avisColD {
            width: 100%;
            margin-top: 50px;
      }
      .avisColG .fakeTitle h2 {
            margin-top: 10px;
      }
      .avisImg4,
      .avisImgContainer4 {
            margin-bottom: 50px;
      }
      .avisImg2,
      .avisImgContainer2 {
            margin-bottom: 30px;
      }
      .photoGrid {
            grid-template-columns: 1fr 1fr;
            grid-template-areas:
                  'a b'
                  'c d';
            gap: 8px;
      }
      .photoGrid img {
            border-radius: 7px;
      }
      .photoSubTitle {
            text-align: center;
      }
      .aboutColD .gridImgContainer {
            height: 300px;
      }
      /* --------------------------------- GALERIE -------------------------------- */
      .galeryGrid {
            grid-template-columns: 1fr;
      }
      .galerieHeader h2,
      .avisHeader h2 {
            font-size: 1.3rem;
            text-align: left;
      }
      .galerieHeader .fakeTitle p,
      .avisHeader .fakeTitle p {
            text-align: left;
      }
      /* --------------------------------- FOOTER --------------------------------- */
      .footerColD,
      .footerColG {
            width: 100% !important;
      }
      .priceCard {
            grid-template-columns: 1fr;
      }
      .priceCard .price {
            justify-self: flex-start;
      }
      .postFooterSection {
            flex-direction: column;
            align-items: center;
      }
      .postFooterSection ul {
            text-align: center;
      }
      .postFooterSection img {
            margin: 15px 0;
      }
      .dateText {
            display: none;
      }
      #date,
      #date2 {
            width: 100%;
      }
      #date::after,
      #date2::after {
            content: attr(placeholder);
            color: #fff;
            position: absolute;
            top: 50%;
            left: 10px;
            transform: translateY(-50%);
      }

      /* ------------- MENTIONS LEGALES + POLITIQUE DE CONFIDENTIALITE ------------ */
      .mainMentions .fakeTitle,
      .politiqueMain .fakeTitle {
            line-height: 30px;
      }
      /* --------------------------------- COOKIES -------------------------------- */
      body #tarteaucitronRoot div#tarteaucitronAlertBig {
            max-width: -webkit-fill-available !important;
            margin-right: auto !important;
            flex-wrap: wrap !important;
      }
}

/* -------------------------------------------------------------------------- */
/*                               PETIT TELEPHONE                              */
/* -------------------------------------------------------------------------- */

@media (max-width: 415px) {
      #tarteaucitronAlertBig button {
            width: 49% !important;
      }
      #tarteaucitronAlertBig button:nth-child(4) {
            margin-top: 10px !important;
            width: 100% !important;
      }
}

/* -------------------------------------------------------------------------- */
/*                          2K screens and 4K screens                         */
/* -------------------------------------------------------------------------- */

@media (min-width: 2500px) {
      section,
      header,
      footer,
      .navG,
      .navD {
            padding-left: 400px;
            padding-right: 400px;
      }
      .abeille {
            left: 7%;
      }
      .footerColD {
            width: 69%;
      }
      .footerColG {
            width: 29%;
      }
      .langSelectorContainer {
            right: 400px;
      }
      .pictosContainer {
            grid-template-columns: 1fr 1fr 1fr;
      }
}

/* -------------------------------------------------------------------------- */
/*                                    AUTRE                                   */
/* -------------------------------------------------------------------------- */

@media (max-width: 1175px) {
      .avis {
            width: 100%;
      }
}

@media (max-width: 1155px) {
      .navG {
            gap: 30px;
      }
      .logoNav {
            width: 70%;
      }
}

@media (max-width: 1400px) {
      .aboutColG,
      .aboutColD {
            width: 100%;
      }
      .aboutColD {
            height: 300px;
            align-items: flex-start;
            margin-top: 25px;
      }
      .footerContentContainer {
            gap: 15px;
            flex-direction: column-reverse;
      }
      .footerColD {
            width: 100%;
      }
      .footerColG {
            width: 50%;
            margin-left: auto;
            margin-right: auto;
      }
}

@media (min-width: 1024px) and (max-width: 1537px) {
      .headerContent {
            width: 70%;
      }
}

@media (min-width: 1538px) and (max-width: 1591px) {
      .pictosContainer {
            grid-template-columns: 1fr 1fr 1fr;
      }
}

@media (min-width: 1460px) and (max-width: 1537px) {
      header {
            padding-top: 30px;
            padding-bottom: 0px;
      }
      .headerContent {
            width: 55%;
      }
      .buttonHeader .buttonContainer {
            width: 210px;
      }
      .avisColG {
            width: 60%;
      }
      .avisColD {
            width: 40%;
            padding-top: 95px;
      }
      .avis {
            width: 24%;
      }
      .avisContainer {
            justify-content: flex-start;
      }
      .avisBtn {
            margin-top: 30px;
      }
      .footerColG {
            width: 35%;
      }
      .footerColD {
            width: 62%;
      }
      .footerColD .fakeTitle {
            margin-bottom: 25px;
      }
      footer ul {
            flex-direction: row;
      }
      p {
            font-size: 13px !important;
      }
      .galeryGrid {
            grid-template-columns: 1fr 1fr 1fr;
      }
      .navLi a,
      .navD p {
            font-size: 14px;
            transition: all 0.3s ease;
      }
}
