@charset "utf-8";

:root {
  /*-- Couleurs --*/
  --color-violet: blueviolet;
  --color-vert: #92bc49;
  --color-bleu: #1084c5;
  --color-orange: #ffa800;
}

/*-- Texte Couleurs --*/
.color-blanc {
  color: white;
}

.color-noir {
  color: black;
}

.color-violet {
  color: var(--color-violet);
}

.color-vert {
  color: var(--color-vert);
}

.color-bleu {
  color: var(--color-bleu);
}

.color-orange {
  color: var(--color-orange);
}

/*-- Font écran Couleurs --*/

.bg-blanc {
  background-color: white;
}

.bg-noir {
  background-color: black;
}

.bg-violet {
  background-color: var(--color-violet);
}

.bg-vert {
  background-color: var(--color-vert);
}

.bg-bleu {
  background-color: var(--color-bleu);
}

.bg-orange {
  background-color: var(--color-orange);
}

/*-- Bordure Couleurs --*/

.bordure-blanc {
  border-color: white;
}

.bordure-noir {
  border-color: black;
}

.bordure-violet {
  border-color: var(--color-violet) !important;
}

.bordure-vert {
  border-color: var(--color-vert) !important;
}

.bordure-bleu {
  border-color: var(--color-bleu) !important;
}

.bordure-orange {
  border-color: var(--color-orange) !important;
}

/* --- Couleur image pointeur liste prestation --- */
#pagePrestations summary .color-img-violet {
  background-image: url("../images/sort-right-violet.svg");
}

#pagePrestations summary .color-img-vert {
  background-image: url("../images/sort-right-green.svg");
}

#pagePrestations summary .color-img-bleu {
  background-image: url("../images/sort-right-blue.svg");
}

#pagePrestations summary .color-img-orange {
  background-image: url("../images/sort-right-orange.svg");
}

#pagePrestations {
  margin: 3rem 0;
  min-height: 50vh;
}
main section#espacesVerts > ul {
  list-style-type: none
}
#pagePrestations summary {
  position: relative;
  list-style: none !important;
  -moz-list-style: none !important;
  -o-list-style: none !important;
  -webkit-list-style: none !important;
  -webkit-appearance: none !important;
  border-bottom: 3px solid;
  border-radius: 20px;
  text-align: center;
  font-size: 15px;
  line-height: 30px;
  font-weight: bold;
}

#pagePrestations summary::-webkit-details-marker {
  display: none !important;
}

summary::-webkit-details-marker {
  display: none !important;
}

#pagePrestations summary .before {
  position: absolute;
  top: 5px;
  left: 1rem;
  content: "";
  width: 25px;
  height: 25px;
  background-repeat: no-repeat;
}

#pagePrestations .card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: calc(95% - 0.5rem);
}

#pagePrestations .card>div {
  position: relative;
  max-width: 1320px;
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 1rem;
}

#pagePrestations .card p {
  text-align: justify;
}

#pagePrestations ul {
  margin: 1rem;
  padding: 0;
}

#btnDevis {
  position: fixed;
  z-index: 2000;
  top: auto;
  bottom: 14rem;
  right: 0;
  width: auto;
  height: 70px;
  padding: 0.5rem;
  border: none;
}

#btnDevis::before {
  position: absolute;
  content: "";
  top: 0;
  left: -49.5px;
  width: 50px;
  height: 70px;
  transform: translateX(1px);
  background-color: var(--color-vert);

  clip-path: polygon(100% 100%, 100% 0, 0 50%);
}

#btnDevis a {
  position: relative;
  display: flex;
  color: white;
  text-decoration: none;
}

#btnDevis a:hover {
  color: black;
  text-decoration: none;
}

#btnDevis i {
  font-size: 30px;
  margin-right: 1rem;
}

#btnDevis span {
  position: relative;
  display: inline-block;
  text-align: left;
  font-size: 16px;
  overflow-x: hidden;
  width: 0;
  transform: translateX(-10px);
}

#btnDevis a i {
  transform: translate(-15px, 2px);
}

#btnDevis a span {
  width: 100%;
}

/* ***************************************************************************************************
		MODULAR ELEMENTS : ELEMENTS MODULAIRES ==> [ avant-après, galerie... ]
****************************************************************************************************** */

#btnDevis::before {
  transform: translateX(0);
}

/* -- Avant - Après -- */

.avantApres {
  position: relative;
  top: 0;
  left: 0;
  margin: 0 auto;
  max-width: 500px;
  width: auto;
  height: auto;
  overflow: hidden;
  border: 3px solid var(--color-orange);
  border-radius: 5px;
}

.avantApres .avant,
.avantApres .apres {
  position: absolute;
  z-index: 15;
  top: 0.5rem;
  width: 80px;
  height: 20px;
  background-color: black;
  border-radius: 10px;
}

.avantApres .avant p,
.avantApres .apres p {
  padding: 0 !important;
  color: white;
  transform: translate(0.85rem, 2px) !important;
}

.avantApres .avant {
  left: 1rem;
}

.avantApres .apres {
  left: calc(85% - 3rem);
}

.avantApres>div {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

.avantApres>div:nth-child(1) {
  z-index: 2;
  transform: translateX(50%);
  overflow-x: hidden;
}

.avantApres>div:nth-child(1) img {
  transform: translateX(-50%);
}

.avantApres>div:nth-child(2) {
  position: absolute;
  z-index: 1;
}

.avantApres .ligne1,
.avantApres .ligne2 {
  position: absolute;
  z-index: 20;
  width: 2px;
  height: 45%;
}

.avantApres .cercle {
  position: absolute;
  z-index: 20;
  top: 45%;
  left: 46.5%;
  width: 7%;
  height: 10%;
  border: 2px solid #ffa800;
  border-radius: 50%;
}

.avantApres .ligne1 {
  top: 0;
  left: 50%;
}

.avantApres .ligne2 {
  top: 55.5%;
  left: 50%;
}

.avantApres img {
  position: relative;
  min-width: 100%;
  width: auto;
  height: 200px;
  vertical-align: bottom;
}

.groupText {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
}

/* --- Galerire --- */

.galerie {
  position: relative;
  display: flex;
  top: 0;
  left: 0;
  max-width: fit-content;
  overflow: hidden;
  border: 3px solid var(--color-orange);
  border-radius: 5px;
}

.galerie ul {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-width: max-content;
  column-gap: 4em;
  row-gap: 1em;
  margin: 0;
  padding: 0;
}

.galerie li {
  position: relative;
  overflow: hidden;
}

.galerie li img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

.galerie #groupText {
  position: relative;
}

.zoom {
  position: relative;
  z-index: 5;
  margin-bottom: 1rem;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  text-align: center;
}

.zoom img {
  max-width: 600px;
  width: 100%;
  height: 0;
  vertical-align: bottom;
}

/* ***************************************************************************************************
		MEDIA QUERIES : GESTION TAILLE ECRAN
****************************************************************************************************** */

/* SMALL SCREEN : smartphone à partir de 576px */
@media (min-width: 576px) {}

/* MEDIUM SCREEN : Tablette à partir de 768px */
@media (min-width: 768px) {}

/* WIDE SCREEN : Tablette et Ordinateur (desktop) à partir de 992px */
@media (min-width: 992px) {

  /* --- PRESTATION --- */
  #pagePrestations summary {
    font-size: 26px;
    line-height: 32px;
  }

  #pagePrestations .card {
    flex-direction: row;
    margin: 3rem 0;
    min-height: 85vh;
  }

  #pagePrestations .card>div {
    width: 50%;
    padding: 1rem;
  }

  .avantApres .apres {
    left: calc(85% - 1rem);
  }

  .avantApres img {
    height: 350px;
  }

  /* --- Galerie --- */
 

  .galerie li {
    height: 15vh;
  }

  .galerie li img {
    width: 10vw;
    height: 100%;
    vertical-align: bottom;
  }

  .zoom {
    position: absolute;
    z-index: 5;
    margin-bottom: 0;
    top: 1rem;
    left: 0;
    width: 100%;
    height: auto;
    text-align: center;
  }

  /* --- Bouton devis --- */

  #btnDevis {
    top: calc(50% - 50px - 0.5rem);
    bottom: auto;
  }

  #btnDevis a i {
    transform: translate(7px, 2px);
  }

  #btnDevis a:hover i {
    animation: animateDevisIOpen 0.5s linear;
    transform: translate(-15px, 2px);
  }

  #btnDevis a span {
    width: 0;
  }

  #btnDevis a:hover span {
    animation: animateDevisSpanOpen 1s linear;
    width: 100%;
  }

  @keyframes animateDevisIOpen {
    0% {
      transform: translate(7px, 2px);
    }

    100% {
      transform: translate(-15px, 2px);
    }
  }

  @keyframes animateDevisSpanOpen {
    0% {
      width: 0;
    }

    25% {
      width: 25%;
    }

    50% {
      width: 50%;
    }

    75% {
      width: 75%;
    }

    100% {
      width: 100%;
    }
  }
}

/* VERY LARGE SCREEN : affichage pour les écrans Xlarges (desktop) à partir de 1200px */
@media (min-width: 1200px) {}