@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

body {
      position: relative;
      background-color: var(--bgColor);
}
main {
      position: relative;
}
main::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url(../src/imgs/aaa.svg);
      background-position: top;
      background-size: cover;
      background-repeat: no-repeat;
      z-index: 5;
}
main:after {
      content: '';
      background: linear-gradient(180deg, rgba(240, 238, 238, 0) 30%, rgba(42, 42, 42, 1) 100%);
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 200px;
      z-index: 10;
}
html {
      scroll-padding-top: 100px; /* prevent overlap with sticky navbar */
      scroll-behavior: smooth;
}

/* -------------------------------------------------------------------------- */
/*                                ABOUT SECTION                               */
/* -------------------------------------------------------------------------- */

#about {
      min-height: 60vh;
      padding-top: 100px;
}
.aboutColG,
.aboutColD {
      width: 48%;
}
.aboutColG {
      display: flex;
      flex-direction: column;
      justify-content: center;
}

/* --------------------------------- HEADER --------------------------------- */

#about .textContainer {
      background-color: var(--pictoBackground);
      border-radius: 7px;
      padding: 15px;
}

/* --------------------------------- PICTOS --------------------------------- */

.pictosContainer {
      column-gap: 40px;
      row-gap: 10px;

      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      align-items: center;
      gap: 10px;
}

.littleCard {
      justify-content: flex-start;
}

.pictosContainer .picto {
      background-color: var(--pictoBackground);
      padding: 10px;
      margin-right: 5px;
      border-radius: 7px;
      aspect-ratio: 1/1;
}
.littleCard img {
      width: 20px;
      transition: transform 0.3s ease;
}

.pictosContainer span {
      font-weight: 800;
}
.pictosContainer p {
      font-weight: 300;
      font-size: 14px;
}
.littleCard:hover img {
      filter: brightness(0) saturate(100%) invert(75%) sepia(98%) saturate(551%) hue-rotate(19deg) brightness(101%) contrast(98%);
      transform: rotate(30deg);
}
.piscine {
      display: none;
}

/* --------------------------------- IFRAME --------------------------------- */

#about iframe {
      border-radius: 10px;
      margin-top: 25px;
}

/* --------------------------------- Button --------------------------------- */
#about .aboutBtn {
      display: block;
}
#about .buttonContainer {
      width: 150px;
}
#about .plusSymbolContainer {
      width: 35%;
}

/* ---------------------------------- GRID ---------------------------------- */

.aboutColD .gridImgContainer {
      height: 60%;
}

.aboutColD .bgAboutImg1 {
      background-image: url('../src/imgs/About/grid/1.png');
      background-position: left;
      background-size: cover;
      width: 100%;
}
.aboutColD .bgAboutImg2 {
      background-image: url('../src/imgs/About/grid/2.png');
      background-position: center;
      background-size: cover;
      width: 20%;
}
.aboutColD .bgAboutImg3 {
      background-image: url('../src/imgs/About/grid/3.png');
      background-position: center;
      background-size: cover;
      width: 20%;
}
.aboutColD .bgAboutImg4 {
      background-image: url('../src/imgs/About/grid/4.png');
      background-position: center;
      background-size: cover;
      width: 20%;
}

.aboutBgImgActive {
      width: 100% !important;
}

/* -------------------------------------------------------------------------- */
/*                               PHOTOS SECTION                               */
/* -------------------------------------------------------------------------- */

/* ---------------------------------- Grid ---------------------------------- */
#photos .fakeTitle {
      font-size: 2rem !important;
}

.reseauxIcon img {
      width: 40px;
}
.reseauxIcon a {
      transition: all 0.3s ease;
}
.reseauxIcon a:hover {
      transform: scale(1.1);
}

.photoGrid {
      gap: 10px;
      display: grid;
      grid-template-columns: 1fr 2fr 2fr;
      grid-template-rows: 1fr 1fr;
      grid-template-areas:
            'a b c'
            'd b c';
}

.photoGrid .photo1 {
      grid-area: a;
      object-fit: cover;
      height: 100%;
}
.photoGrid .photo2 {
      grid-area: d;
      object-fit: cover;
      height: 100%;
}
.photoGrid .photo3 {
      grid-area: b;
      object-fit: cover;
      height: 100%;
}
.photoGrid .photo4 {
      grid-area: c;
      object-fit: cover;
      height: 100%;
}

.photoGrid img {
      border-radius: 10px;
      transition: all 0.3s ease;
}

/* --------------------------------- Button --------------------------------- */

#photos .buttonContainer {
      width: 220px;
}
#photos .plusSymbolContainer {
      width: 20%;
}

/* -------------------------------------------------------------------------- */
/*                                SECTION AVIS                                */
/* -------------------------------------------------------------------------- */
#avis {
      z-index: 30;
}
.avisColG {
      width: 60%;
}
.avisColD {
      width: 40%;
}

/* ---------------------------------- AVIS ---------------------------------- */

.avisContainer {
      gap: 10px;
}
.avis {
      background-color: var(--pictoBackground);
      border-radius: 7px;
      padding: 15px;
      width: 25%;
      transition: all 0.3s ease;
}
.avis img {
      margin: 15px 0;
      width: 15px;
}
.avis .textContent {
      font-size: 14px;
}
.starsContainer {
      background-color: #232323;
      border-radius: 7px;
      padding: 10px;
      margin-top: 15px;
      width: fit-content;
      gap: 8px;
      justify-self: flex-end;
}
.starsContainer img {
      width: 15px;
      margin: 0;
}

.avis:hover {
      transform: scale(1.05);
}

/* --------------------------------- BUTTON --------------------------------- */
.avisBtn {
      width: 200px;
      display: block;
}
#avis .buttonContainer {
      width: 100%;
}
#avis .plusSymbolContainer {
      width: 20%;
}

/* ---------------------------------- imgs ---------------------------------- */

.avisColD {
      gap: 10px;
}
.avisColD img {
      border-radius: 10px;
      width: 100%;
}
.avisImg2,
.avisImgContainer2 {
      margin-bottom: 100px;
}
.avisImg4,
.avisImgContainer4 {
      margin-bottom: 150px;
}

.avisImgContainer {
      overflow: hidden;
      border-radius: 10px;
}

/* -------------------------------------------------------------------------- */
/*                                 ScrollToTop                                */
/* -------------------------------------------------------------------------- */

.scrollToTop {
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 999999999;
      background-color: var(--pictoBackground);
      border-radius: 50%;
      padding: 10px;
      cursor: pointer;
      transition: all 0.3s ease;
      aspect-ratio: 1/1;
      width: 20px;
      height: 20px;
}

.scrollToTop img {
      width: 20px;
      transform: rotate(180deg);
}

.scrollToTop:hover {
      transform: scale(1.1);
      background-color: var(--lightGreen);
}
.scrollToTop:hover img {
      filter: brightness(0);
}

/* -------------------------------------------------------------------------- */
/*                                   LOADER                                   */
/* -------------------------------------------------------------------------- */

.loader {
      height: 100vh;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      background-color: var(--bgColor);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      transition: all 0.5s ease-in-out;
}

.loader img {
      width: 200px;
}

/* -------------------------------------------------------------------------- */
/*                                  MAIL SENT                                 */
/* -------------------------------------------------------------------------- */

.mailSentContent {
      height: 100vh;
      text-align: center;
      background-color: var(--pictoBackground);
      position: relative;
}
.mailSentContent .fakeTitle {
      font-size: 2rem !important;
}
.mailSentContent::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url('../src/imgs/headerGrid/cerclesHeader.png');
      background-position: top;
      background-repeat: no-repeat;
      background-size: cover;
      z-index: 1;
}
.mailSentContent .mainContent {
      z-index: 5;
}
.mailSentContent .fakeTitle {
      font-size: 3rem;
}
.returnToHomeBtn {
      margin-left: auto;
      margin-right: auto;
}
.returnToHomeBtn .plusSymbolContainer {
      width: 20%;
}
.returnToHomeBtn .buttonContainer {
      width: 280px;
}

/* -------------------------------------------------------------------------- */
/*                  MENTIONS LEGALE + politique de confidentialité            */
/* -------------------------------------------------------------------------- */
.mainMentions,
.politiqueMain {
      position: relative;
      overflow: hidden;
}
.mainMentions::before,
.politiqueMain::before {
      background-size: cover;
}