/* RESET <a> & <ul> */
.ulReset {
  list-style: none;
  padding: 0;
}

a {
  text-decoration: none;
  color: var(--color-white);
}

textarea {
  resize: none;
}

/* ROOT COLOR PADDING */

:root {
  --color-blackLogo: #000e0d;
  --color-blackLogoTransparent: rgb(0, 14, 13, 0.9);
  --color-typoText: #f0ebe5;
  --color-typoTitle: #f0ebe5;
  --color-lightGreen: #4caf50;
  --color-midGreen: #3e4a3d;
  --color-Green: #2d3a2e;
  --color-darkGreen: #1c2a1f;
  --color-darkGreenTransparent: rgb(28, 42, 31, 0.9);
  --color-grey: #898989;
  --color-transparent: rgb(0, 0, 0, 0);

  --padding-xs: 4px;
  --padding-s: 8px;
  --padding-m: 12px;
  --padding-l: 16px;
  --padding-xl: 32px;

  --transition: ease-in-out 0.3s;
  scroll-behavior: smooth;
}

/* CSS FONT */

@font-face {
  font-family: "Quicksand";
  src: url("./Fonts/Quicksand/Quicksand-VariableFont_wght.ttf")
    format("truetype");
}

@font-face {
  font-family: "Josefin Sans";
  src: url("./Fonts/Josefin_Sans/JosefinSans-VariableFont_wght.ttf")
  format("truetype");
}

@font-face {
  font-family: "Roboto";
  src: url("./Fonts/Roboto/Roboto-VariableFont_wdth\,wght.ttf")
  format("truetype");
}

/* CSS BODY */

.flexBody {
  display: flex;
  flex-direction: column;
  padding: 0 10.417vw 0 10.417vw;
  background-color: var(--color-midGreen);
  align-items: center;
}

/* CSS TYPO */

h1 {
  font-size: 34px;
}

h2 {
  font-size: 26px;
  font-family: "Quicksand";
}

a {
  font-size: 18px;
}

p {
  font-size: 18px;
}

/* CSS HEADER */

.backgroundHeader {
  background-color: var(--color-blackLogo);
}

.typoNav {
  font-family: "Roboto";
  color: var(--color-typoText);
}

.logoHeader {
  width: 50px;
  height: 50px;
  transition: var(--transition);
}

.logoHeader:hover {
  transform: scale(1.1);
}

.typoTitle {
  color: var(--color-typoTitle);
  font-family: "Josefin Sans";
}

.headerFlex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navFlex {
  display: flex;
  align-items: center;
  gap: 1em;
}

.headerPadding {
  padding: var(--padding-l);
}

.navTransform {
  transition: var(--transition);
  cursor: pointer;
}

.navTransform:hover {
  color: var(--color-lightGreen);
}

.transformA {
  transition: var(--transition);
  position: relative;
  color: var(--color-typoText);
  text-decoration: none;
}

.transformA:before {
  content: "";
  position: absolute;
  bottom: -2px;
  height: 1px;
  width: 0;
  background: var(--color-lightGreen);
  border-radius: 1em;
  transition: width 0.3s ease;
}

.transformA:hover {
  color: var(--color-lightGreen);
}

.transformA:hover:before {
  width: 100%;
}

.buttonTypo {
  font-family: "Roboto";
  color: var(--color-typoText);
}

.buttonTransform {
  transition: var(--transition);
  border-radius: 100em;
  border: solid var(--color-darkGreen) 1px;
  background-color: var(--color-midGreen);
  cursor: pointer;
}

.buttonTransform:hover {
  border: solid var(--color-lightGreen) 1px;
  background-color: var(--color-Green);
}

.buttonPadding {
  padding: 0.5em 1em;
}

.buttonSize {
  width: 185px;
  height: 50px;
}

.menuBurger {
  background-image: url(./images/menuBurger.png);
  background-size: cover;
  width: 50px;
  height: 50px;
  cursor: pointer;
}

/* CSS MAIN */

.titre {
  text-align: center;
  color: var(--color-typoTitle);
  font-family: "Josefin Sans";
  padding-bottom: var(--padding-l);
  padding-top: var(--padding-l);
}

.flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1em;
  flex-wrap: wrap;
}

.flexCenterSection {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.flexCenterText {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.flexCenterCard {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}

.flexCenterIcone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
}

.sectionSite {
  background-color: var(--color-darkGreen);
  padding: var(--padding-xl);
}
.texte {
  color: var(--color-typoText);
  font-family: "Roboto";
}

.texteCenter {
  color: var(--color-typoText);
  font-family: "Roboto";
  text-align: center;
}

.texteInput {
  font-family: "Roboto";
  color: var(--color-typoText);
}

.relative {
  position: relative;
}
.absolute {
  position: absolute;
}

.paddingCard {
  padding: var(--padding-l);
}

.paddingBox {
  padding: var(--padding-m);
}

.sectionBorder {
  width: 80%;
  border: 1px solid var(--color-midGreen);
  border-radius: 1em;
}

.flexTitreLeft {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: left;
  width: 100%;
  gap: 1em;
}

.flexTitreRight {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: right;
  width: 100%;
  gap: 1em;
}

.titreAlignLeft {
  text-align: left;
}

.titreAlignRight {
  text-align: right;
}

.decoLogo {
  min-width: 70px;
  height: 70px;
  border-radius: 25em;
  background-color: var(--color-Green);
  border: solid 1px var(--color-midGreen);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* CSS SECTION PROFIL */

.logoEntreprise {
  background-image: url(./images/logoEntreprise.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  min-width: 50px;
  height: 50px;
}

.flexProfil {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  gap: 1em;
}

.flexJustifTexte {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.lineHeight {
  line-height: 32px;
}

.cardProfil {
  width: 580px;
  min-height: 580px;
  background-color: var(--color-Green);
  border-radius: 1em;
  border: solid 1px var(--color-midGreen);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.cardPhoto {
  background-image: url(./images/photoProfil.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 580px;
  min-height: 580px;
  border-radius: 1em;
  border: solid 1px var(--color-midGreen);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* CSS GRID GALLERY */

.logoPhoto {
  background-image: url(./images/logoPhoto.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  min-width: 50px;
  height: 50px;
}

.galleryGrid {
  display: grid;
  gap: 1em;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.imgGrid {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.pics {
  width: 400px;
  height: 400px;
  border-radius: 10px;
  border: solid 2px var(--color-lightGrey);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  border: solid 1px var(--color-midGreen);
  z-index: 3;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.pics:hover {
  transform: scale(1.2);
  z-index: 4;
}

.pics::after {
  content: "Chantier 2025";
  position: absolute;
  bottom: 10px;
  right: 10px;
  color: var(--color-typoText);
  font-size: 14px;
  font-family: "Roboto", Tahoma, Geneva, Verdana, sans-serif;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2; /* pour que le texte soit au-dessus de l'overlay */
}

.pics::before {
  content: "";
  position: absolute;
  inset: 0;
  /* background-color: rgba(0, 0, 0, 0.4); */
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.pics:hover::before {
  opacity: 1; /* overlay visible au hover */
}

.pics:hover::after {
  opacity: 1; /* texte visible au hover */
}

/* CSS SECTION MISSIONS */

.logoSecateur {
  background-image: url(./images/logoSecateur.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  min-width: 50px;
  height: 50px;
}

.titreCenter {
  text-align: center;
}

.flexMission {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  gap: 1em;
  /* flex-wrap: wrap; */
}

.flexChoose {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.backgroundMissions {
  background-image: url(./images/overlayMain.jpg);
  padding: var(--padding-xl);
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  position: relative;
}

.backgroundMissions::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--color-darkGreenTransparent);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

.backgroundMissions > * {
  z-index: 10;
  position: relative;
}

.cardMission {
  width: 400px;
  height: 400px;
  background-color: var(--color-Green);
  border: solid 1px var(--color-midGreen);
  border-radius: 1em;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.iconMissions {
  background-color: var(--color-midGreen);
  background-size: contain;
  border: 1px solid var(--color-lightGreen);
  border-radius: 100%;
  width: 175px;
  height: 175px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.iconPenser {
  background-image: url(./images/logoPenser.png);
  background-size: contain;
  background-position: center;
  width: 150px;
  height: 150px;
}
.iconAmenager {
  background-image: url(./images/logoAmenager.png);
  background-size: contain;
  background-position: center;
  width: 150px;
  height: 150px;
}
.iconEntretenir {
  background-image: url(./images/logoFeuille.png);
  background-size: contain;
  background-position: center;
  width: 125px;
  height: 125px;
}

.numeroUn {
  position: absolute;
  background-image: url(./images/numero1Color.png);
  background-size: contain;
  /* background-position: center; */
  width: 100px;
  height: 100px;
  top: -35px;
  left: -50px;
}

.numeroDeux {
  position: absolute;
  background-image: url(./images/numero2Color.png);
  background-size: contain;
  /* background-position: center; */
  width: 100px;
  height: 100px;
  top: -35px;
  left: -50px;
}

.numeroTrois {
  position: absolute;
  background-image: url(./images/numero3Color.png);
  background-size: contain;
  /* background-position: center; */
  width: 100px;
  height: 100px;
  top: -35px;
  left: -50px;
}

.cardWhyChoose {
  width: 880px;
  height: 230px;
  background-color: var(--color-Green);
  border: solid 1px var(--color-midGreen);
  border-radius: 1em;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.subPourquoi {
  background-color: var(--color-midGreen);
  border: 1px solid var(--color-lightGreen);
  border-radius: 1em;
  right: -8.5%;
  top: 20%;
  bottom: 20%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.textZen {
  align-items: center;
  text-align: center;
  color: var(--color-typoTitle);
  font-family: "Roboto";
}

/* CSS ENVIE DE VERT AU BUREAU */

.logoPlante {
  background-image: url(./images/logoPlante.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  min-width: 50px;
  height: 50px;
  border-radius: 25em;
}

.flexEnvie {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  gap: 1em;
}

.flexCenterTextEnvie {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 190px;
}

.flexPlanteBureau {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1em;
}

.cardPlanteBureau {
  background-color: var(--color-Green);
  width: 1000px;
  padding: 1em 10em;
  color: var(--color-typoText);
  border: solid 1px var(--color-midGreen);
  border-radius: 1em;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.bulleUn {
  background-image: url(./images/bulle1.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 175px;
  height: 175px;
  left: -87.5px;
  border-radius: 25em;
  border: var(--color-lightGreen) 1px solid;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.bulleDeux {
  background-image: url(./images/bulle2.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 175px;
  height: 175px;
  right: -87.5px;
  border-radius: 25em;
  border: var(--color-lightGreen) 1px solid;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.cardEnvie {
  width: 363px;
  height: 755px;
  background-color: var(--color-Green);
  border: solid 1px var(--color-midGreen);
  border-radius: 1em;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.imgEnvie1,
.imgEnvie2,
.imgEnvie3 {
  width: auto;
  height: 565px;
  background-size: cover;
  background-repeat: no-repeat;
  border-top-left-radius: 1em;
  border-top-right-radius: 1em;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  background-position: center;
}

.imgEnvie1::after,
.imgEnvie2::after,
.imgEnvie3::after {
  content: "©Jardins Cachés - 2025";
  position: absolute;
  bottom: 10px;
  right: 10px;
  color: var(--color-typoTitle);
  font-size: 14px;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}

.imgEnvie1::before,
.imgEnvie2::before,
.imgEnvie3::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.imgEnvie1:hover::before,
.imgEnvie2:hover::before,
.imgEnvie3:hover::before {
  opacity: 1; /* overlay visible au hover */
}

.imgEnvie1:hover::after,
.imgEnvie2:hover::after,
.imgEnvie3:hover::after {
  opacity: 1; /* texte visible au hover */
}

/* CSS FORM CONTACTEZ NOUS */

.logoContact {
  background-image: url(./images/logoContact.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  min-width: 50px;
  height: 50px;
}

.formFlexRow {
  display: flex;
  flex-direction: row;
  border-radius: 1em;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.formFlexColumn {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

.formInfoFlexColumn {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

.cardForm {
  width: 370px;
  height: 590px;
  background-color: var(--color-Green);
  border-radius: 1em 0 0 1em;
  border: solid 1px var(--color-midGreen);
}

.inputSize {
  width: 100%;
  background-color: var(--color-midGreen);
  border-radius: 1em;
  border: none;
  border: solid 1px var(--color-darkGreen);
  padding: var(--padding-xs);
}

.texteInput::placeholder {
  color: var(--color-grey);
}

.inputSize:focus {
  border: solid 1px var(--color-lightGreen);
  outline: none;
}

.imgForm {
  width: 295px;
  height: 590px;
  background-image: url(./images/overlayMain.jpg);
  border-top: solid 1px var(--color-midGreen);
  border-bottom: solid 1px var(--color-midGreen);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.cardFormInfo {
  width: 295px;
  height: 590px;
  background-color: var(--color-Green);
  border-radius: 0 1em 1em 0;
  border-top: solid 1px var(--color-midGreen);
  border-right: solid 1px var(--color-midGreen);
  border-bottom: solid 1px var(--color-midGreen);
}

.iconInfo {
  background-color: var(--color-midGreen);
  background-size: contain;
  border: 1px solid var(--color-lightGreen);
  border-radius: 100%;
  width: 90px;
  height: 90px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.iconeInfoTel {
  background-image: url(./images/tel.png);
  background-size: contain;
  background-position: center;
  width: 60px;
  height: 60px;
}

.iconeInfoMail {
  background-image: url(./images/email.png);
  background-size: contain;
  background-position: center;
  width: 60px;
  height: 60px;
}

.iconeInfoInsta {
  background-image: url(./images/instagram.png);
  background-size: contain;
  background-position: center;
  width: 60px;
  height: 60px;
  transition: var(--transition);
}

.iconeInfoInsta:hover {
  transform: scale(1.1);
}

.aSize {
  display: block;
  width: 60px;
  height: 60px;
}

/* CSS FOOTER */

.footerFlex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.backgroundFooter {
  background-image: url(./images/overlayFooter.jpg);
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}

.backgroundFooter::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--color-blackLogoTransparent);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

.backgroundFooter > * {
  z-index: 10;
  position: relative;
}

.flexNavFooter {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.borderFooter {
  border: 1px solid var(--color-midGreen);
  height: 175px;
}

.logoFooter {
  background-image: url(./images/logoJardinsCaches.png);
  width: 187px;
  height: 187px;
  border-radius: 1em;
  border: 1px solid var(--color-midGreen);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  transition: var(--transition);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.logoFooter:hover {
  transform: scale(1.1);
}

/* MEDIA QUERRIES */

/* DESKTOP */

@media screen and (min-width: 1660px) {
  .blockedSectionWidth {
    width: 1505px;
  }

  .menuBurger {
    display: none;
  }

  .subPourquoiCopie {
    display: none;
  }
}

/* DESKTOP (PETIT ECRAN) */

@media screen and (min-width: 1280px) and (max-width: 1660px) {
  .menuBurger {
    display: none;
  }

  .flexBody {
    display: flex;
    flex-direction: column;
    padding: 0;
    background-color: none;
    align-items: unset;
  }

  .subPourquoiCopie {
    display: none;
  }
}

/* TABLET */

@media screen and (min-width: 768px) and (max-width: 1280px) {
  .flexBody {
    display: flex;
    flex-direction: column;
    padding: 0;
    background-color: none;
    align-items: unset;
  }

  .logoHeader:hover {
    transform: none;
  }

  .navQuerries {
    display: none;
  }

  .menuBurger {
    position: relative;
    /* transition: var(--transition); */
  }

  .navQuerries.visible {
    padding: var(--padding-m);
    position: absolute;
    display: block;
    top: 100px;
    right: 15px;
    width: 300px;
    height: 500px;
    background-color: var(--color-Green);
    border-radius: 1em;
    border: var(--color-midGreen) 1px solid;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }

  .navQuerries.visible ul {
    display: flex;
    text-align: center;
    flex-direction: column;
    height: 475px;
    justify-content: space-evenly;
    align-items: center;
  }

  .flexProfil {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    gap: 1em;
  }

  .galleryGrid {
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
  }

  .pics:hover {
    transform: none;
    z-index: 4;
  }

  .pics1 {
    grid-column: 1/2;
    grid-row: 1/2;
  }

  .pics2 {
    grid-column: 2/3;
    grid-row: 1/2;
  }

  .pics3 {
    grid-column: 1/2;
    grid-row: 2/3;
  }

  .pics4 {
    grid-column: 2/3;
    grid-row: 2/3;
  }

  .pics5 {
    grid-column: 1/2;
    grid-row: 3/4;
  }

  .pics6 {
    grid-column: 2/3;
    grid-row: 3/4;
  }

  .flexMission {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    gap: 3em;
    flex-wrap: wrap;
  }

  .cardWhyChoose {
    width: 550px;
    height: 230px;
    background-color: var(--color-Green);
    border: solid 1px var(--color-midGreen);
    border-radius: 1em;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }

  .subPourquoi {
    background-color: var(--color-midGreen);
    border: 1px solid var(--color-lightGreen);
    border-radius: 1em;
    right: -13.5%;
    top: 20%;
    bottom: 20%;
  }

  .subPourquoiCopie {
    display: none;
  }

  .cardPlanteBureau {
    background-color: var(--color-Green);
    width: 670px;
    padding: 5em 1em;
    color: var(--color-typoText);
    border: solid 1px var(--color-midGreen);
    border-radius: 1em;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }

  .bulleUn {
    background-image: url(./images/bulle1.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 125px;
    height: 125px;
    left: 31.25px;
    top: -62.5px;
    border-radius: 25em;
    border: var(--color-lightGreen) 1px solid;
  }

  .bulleDeux {
    display: none;
  }

  .flexEnvie {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    gap: 1em;
    flex-wrap: wrap;
  }

  .imgForm {
    display: none;
  }

  .footerFlex {
    display: flex;
    flex-direction: column;
    gap: 1em;
    text-align: center;
  }

  .logoFooter:hover {
    transform: none;
  }

  .borderFooter {
    border: 1px solid var(--color-midGreen);
    width: 175px;
    height: 1px;
  }
}

/* MOBILE */

@media screen and (min-width: 300px) and (max-width: 768px) {
  .flexBody {
    display: flex;
    flex-direction: column;
    padding: 0;
    background-color: none;
    align-items: unset;
  }

  .paddingCard {
    padding: 16px 0px;
  }

  .logoHeader:hover {
    transform: none;
  }

  .navQuerries {
    display: none;
  }

  .menuBurger {
    position: relative;
  }

  .navQuerries.visible {
    padding: var(--padding-m);
    position: absolute;
    display: block;
    top: 100px;
    right: 15px;
    width: 300px;
    height: 500px;
    background-color: var(--color-Green);
    border-radius: 1em;
    border: var(--color-midGreen) 1px solid;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }

  .navQuerries.visible ul {
    display: flex;
    text-align: center;
    flex-direction: column;
    height: 475px;
    justify-content: space-evenly;
    align-items: center;
  }

  .flexProfil {
    width: auto;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    gap: 1em;
  }

  .cardProfil {
    width: 363px;
  }

  .cardPhoto {
    width: 363px;
  }

  .galleryGrid {
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(1, 1fr);
  }

  .pics {
    width: 363px;
    height: 363px;
  }

  .pics:hover {
    transform: none;
    z-index: 4;
  }

  .pics1 {
    grid-column: 1/2;
    grid-row: 1/2;
  }

  .pics2 {
    grid-column: 1/2;
    grid-row: 2/3;
  }

  .pics3 {
    grid-column: 1/2;
    grid-row: 3/4;
  }

  .pics4 {
    grid-column: 1/2;
    grid-row: 4/5;
  }

  .pics5 {
    grid-column: 1/2;
    grid-row: 5/6;
  }

  .pics6 {
    grid-column: 1/2;
    grid-row: 6/7;
  }

  .flexMission {
    width: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    gap: 3em;
    flex-wrap: wrap;
  }

  .cardMission {
    width: 363px;
  }

  .numeroUn,
  .numeroDeux,
  .numeroTrois {
    display: none;
  }

  .cardWhyChoose {
    width: 363px;
    height: 375px;
    background-color: var(--color-Green);
    border: solid 1px var(--color-midGreen);
    border-radius: 1em;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }

  .subPourquoi {
    display: none;
  }

  .cardPlanteBureau {
    background-color: var(--color-Green);
    width: 363px;
    padding: 1em;
    color: var(--color-typoText);
    border: solid 1px var(--color-midGreen);
    border-radius: 1em;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }

  .bulleUn {
    display: none;
  }

  .bulleDeux {
    display: none;
  }

  .flexEnvie {
    width: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    gap: 1em;
    flex-wrap: wrap;
  }

  .cardEnvie {
    width: 363px;
    height: auto;
  }

  .flexCenterTextEnvie {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .formFlexRow {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 1em;
    box-shadow: none;
  }

  .cardForm {
    width: 363px;
    height: 590px;
    background-color: var(--color-Green);
    border-radius: 1em;
    border: solid 1px var(--color-midGreen);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }

  .cardFormInfo {
    width: 363px;
    height: 590px;
    background-color: var(--color-Green);
    border-radius: 1em;
    border: solid 1px var(--color-midGreen);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }

  .imgForm {
    display: none;
  }

  .footerFlex {
    display: flex;
    flex-direction: column;
    gap: 1em;
    text-align: center;
  }

  .logoFooter:hover {
    transform: none;
  }

  .borderFooter {
    border: 1px solid var(--color-midGreen);
    width: 175px;
    height: 1px;
  }
}

/* CSS ADMIN, MENTION LÉGALES & POLITIQUES DE CONFIDENTIALITÉ */

/* MENTIONS LEGALES CSS */

.flexTextMention {
  width: 100%;
  display: flex;
  justify-content: left;
  gap: 1em;
}

.logoMention {
  background-image: url(./images/fichier.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  min-width: 50px;
  height: 50px;
}

.logoPolitique {
  background-image: url(./images/confidentialite.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  min-width: 50px;
  height: 50px;
}

.logoProprieteIntellectuelle {
  background-image: url(./images/proprieteIntellectuelle.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  min-width: 50px;
  height: 50px;
}

.logoGestion {
  background-image: url(./images/gestion.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  min-width: 50px;
  height: 50px;
}

/* CONNECT ADMIN CSS */

.cardFormConnect {
  border-radius: 1em;
  background-color: var(--color-Green);
  border: var(--color-midGreen) 1px solid;
  width: 400px;
  height: 300px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.flexConnect {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

/* PANNEAU ADMIN CSS */

.typoAdmin {
  font-family: "Roboto";
  color: var(--color-typoText);
}

.selectOptionTransform {
  transition: var(--transition);
  border-radius: 100em;
  border: solid var(--color-darkGreen) 1px;
  background-color: var(--color-midGreen);
  cursor: pointer;
  padding: 0.5em 1em;
}

.selectOptionTransform:hover {
  border: solid var(--color-lightGreen) 1px;
  background-color: var(--color-Green);
}

.selectOptionTransform:focus {
  border: solid 1px var(--color-lightGreen);
  outline: none;
}

.file::file-selector-button {
  transition: var(--transition);
  color: var(--color-typoText);
  border-radius: 1em;
  background-color: var(--color-midGreen);
  border: var(--color-darkGreen) 1px solid;
  padding: 0.5em 1em;
  cursor: pointer;
}

.file::file-selector-button:hover {
  border: solid var(--color-lightGreen) 1px;
  background-color: var(--color-Green);
}

.flexFormAdmin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1em;
}

.cardFormAdmin {
  border-radius: 1em;
  background-color: var(--color-Green);
  border: var(--color-midGreen) 1px solid;
  width: auto;
  height: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  color: var(--color-typoText);
  padding: var(--padding-m);
}

.cardFormAdminPics {
  border-radius: 1em;
  background-color: var(--color-Green);
  border: var(--color-midGreen) 1px solid;
  width: 350px;
  height: 550px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  color: var(--color-typoText);
  padding: var(--padding-m);
}

/* CSS CHANGE PLANTE & PLANTE / CANGE PHOTO & GALLERY */

.paddingChangePlante {
  padding: var(--padding-l);
}

.flexCardChangePlante {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1em;
}

.cardChangePlante {
  border-radius: 1em;
  background-color: var(--color-Green);
  border: var(--color-midGreen) 1px solid;
  width: 700px;
  height: 500px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  color: var(--color-typoText);
  padding: var(--padding-m);
}

.imagePanelAdmin {
  width: 300px;
  height: 300px;
  object-fit: cover;
  border-radius: 1em;
  border: var(--color-midGreen) 1px solid;
}

/* CSS FORM ADMIN */

.flexMessageAdmin {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: left;
  gap: 1em;
}

.cardMessageAdmin {
  border-radius: 1em;
  background-color: var(--color-Green);
  border: var(--color-midGreen) 1px solid;
  width: 500px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  padding: var(--padding-m);
}

/* CSS LOGOUT ADMIN */

.btnMarg {
  margin: 1em;
}