@charset "utf-8";
/* CSS Document */

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

body { background-color: #fff!important; color: #000!important; line-height: 1.875em!important; font-family: 'Nunito', sans-serif!important;}

h1 { font-size: 32px!important; color: #000; text-transform: uppercase;}
h3 { color: #889259;font-size: 24px!important;}
p {color: #707070; font-size: 18px;}
a { color: #889259;}
a:hover { color: #D6BEB8; transition: all 0.4s ease-out;}

.container-perso {
    width: 80%!important;
	 margin: 0 auto;
}

.fz14 { font-size: 14px!important; line-height: 18px!important;}
.fw600 { font-weight: 600;}
.mt40 { margin-top: 40px;}
.mt50 { margin-top: 55px;}
.mt60 { margin-top: 60px;}
.mt100 { margin-top: 100px;}
.mt-neg-200 { margin-top: -200px;}
.titre-home { font-size: 72px!important;}

.bg-rose { background-color:#D6BEB8; padding-top: 30px; padding-bottom: 30px; margin-top: 100px; color: #fff!important; }
.bg-rose2 { background-color:#D6BEB8; padding-top: 30px; padding-bottom: 30px; margin-top: 100px; color: #fff!important; border-bottom: solid 10px #56662F; }

.btn-rose { background-color: #D6BEB8; color: #fff; padding-left: 20px; padding-right: 20px; padding-top: 10px; padding-bottom: 10px; text-decoration: none; border-radius: 5px; border: solid 2px #D6BEB8;}
.btn-rose:hover { background-color: #fff; color: #D6BEB8;border: solid 2px #D6BEB8; transition: all 0.4s ease-out; }

.footer p { color:#56662F!important; }
.footer a { text-decoration: none!important;}

.footer2  { background-color:#D6BEB8;border-top: solid 10px #56662F;}
.footer2 a { color:#fff!important;text-decoration: none!important; }
.footer2 a:hover { color:#56662F!important; transition: all 0.4s ease-out; }
.footer2 p { color:#fff!important; }

.circle {
    width: 64px;
    height: 64px;
    background-color: #56662F; /* Vert */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
	left: 48%;
	margin-top: -30px;
}

.arrow {
 border: solid white;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 4px;
}

.bas{
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}

.btn-vert { background-color: #56662E; color: #ffffff; padding-left: 20px; padding-right: 20px; padding-top: 10px; padding-bottom: 10px; text-decoration: none; border-radius: 5px; border: solid 2px #ffffff;}
.btn-vert:hover { background-color: #ffffff; color: #56662E;border: solid 2px #56662E; transition: all 0.4s ease-out;}

.form-control { background-color: #F2F4F2;}

.titre-special { font-size: 62px!important; text-transform: none!important;}

/* Le avant/après */

.page{
  width:100%;
  height:100%;
  position:relative;
margin-top: 60px;
}



/* Our normalize css */
*{
  margin:0;
  box-sizing: border-box;
}

/* Our wrapper */
.wrapper{
  width: 100%; /* Utiliser 100% pour une largeur complète */
  max-width: 1150px; /* Conserver la largeur max désirée */
  height: 700px;
  position: relative; /* Changer à relative pour que le flux soit respecté */
  margin: 0 auto; /* Centrer avec margin auto */
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}



/* Our image information */
.before,
.after {
  width:100%;
  height:100%;
  background-repeat:no-repeat;
  background-color: white;
  background-size: cover;
  background-position: center;
  position: absolute;
  top:0;
  left:0;
  pointer-events:none;
  overflow: hidden;
}

.content-image{
  height:100%;
}

.after{
  width:125px;
}

.scroller{
  width: 50px;
  height:50px;
  position: absolute;
  left:100px;
  top:50%;
  transform:translateY(-50%);
  border-radius:50%;
  background-color: transparent;
  opacity:0.9;
  pointer-events:auto;
  cursor: pointer;
}

.scroller:hover{
  opacity:1;
}

.scrolling{
  pointer-events:none;
  opacity:1;
   z-index: 1;
}

.scroller__thumb{
  width:100%;
  height:100%;
  padding:5px;
}

.scroller:before,
.scroller:after{
  content:" ";
  display: block;
  width: 7px;
  height: 9999px;
  position: absolute;
  left: 50%;
  margin-left: -3.5px;
  z-index: 30;
  transition:0.1s;
}
.scroller:before{
  top:100%;
}
.scroller:after{
  bottom:100%;
}

/* If you want to cahnge the colors, make sure you change the fill in the svgs to match */
.scroller{
  border: 5px solid #fff;
}
.scroller:before,
.scroller:after{
  background: #fff;
}


.sous-titre { font-size: 22px!important;}

.menuiseries h3 {
	color: #707070;
	font-weight: 300;
	font-family: 'unna', serif!important;
	text-transform: uppercase;
}

.plants h3 {
	color: #707070;
	font-weight: 300;
	font-family: 'unna', serif!important;
	text-transform: uppercase;
	font-size: 18px!important;
}

.telecharger {
	font-size: 42px;
	background-color: #7B7F45;
	padding: 120px;
}

.big-button {
    background-color: #7B7F45; /* Couleur de fond verte */
    color: white; /* Couleur du texte */
    padding: 60px 120px; /* Espacement intérieur pour augmenter la taille */
    font-size: 36px; /* Taille du texte */
    border: none; /* Pas de bordure */
    border-radius: 5px; /* Bordures arrondies légèrement */
    cursor: pointer; /* Curseur en forme de pointeur pour indiquer qu'il s'agit d'un bouton cliquable */
    transition: background-color 0.3s; /* Animation de transition pour l'effet au survol */
}

.big-button:hover {
    background-color: #D6BEB8; /* Changement de couleur au survol */
}


@media (max-width: 992px) {
.circle {
    width: 64px;
    height: 64px;
    background-color: #56662F; /* Vert */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
	left: 47%;
	margin-top: -30px;
}
	
.bg-rose { background-color:#D6BEB8; padding-top: 30px; padding-bottom: 30px; margin-top: 50px; color: #fff!important; }
.mt100 { margin-top: 60px!important;}
.sous-titre { font-size: 18px!important; margin-top: 30px;}	
.mt60 { margin-top: 30px!important;}
.mt50 { margin-top: 20px!important;}
.mt-mobile { margin-top: 40px;}
.mt-neg-200 { margin-top: 05px;}	
}