:root {
  --couleur-vert: #0e4c53;
  --couleur-dore-old: #c69438;
  --couleur-dore: #B8985D;
}

.open-sans-light {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings:"wdth" 100;
}

.open-sans-normal {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:"wdth" 100;
}

.open-sans-bold {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings:"wdth" 100;
}

body {
  color: var(--couleur-vert);
}

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

.hr-dore {
	border: none;
	height: 3px;
	background-color: var(--couleur-dore);
	opacity:1;
	width:30%;
}
.hr-vert {
	border: none;
	height: 3px;
	background-color: var(--couleur-vert);
	opacity:1;
	width:30%;
}
.hr-blanc {
	border: none;
	height: 2px;
	background-color: white;
	opacity:1;
	width:30%;
}

.mw100px {
	max-width:100px;
}

#menu-haut .nav-link {
	color: var(--couleur-vert);
}

#greendeal-video {
	
}
#greendeal360 {
	scroll-margin-top: 76px;
}

.fond-texture {
	background-position: center;
    background-repeat: repeat;
    
    background-image: url("../images/bg-1920.jpg") 1x,
        url("../images/bg-2560.jpg") 1.25x,
        url("../images/bg-3200.jpg") 1.5x,
        url("../images/bg-5760.jpg") 3x
    );

    background-image: -webkit-image-set(
        url("../images/bg-1920.jpg") 1x,
        url("../images/bg-2560.jpg") 1.25x,
        url("../images/bg-3200.jpg") 1.5x,
        url("../images/bg-5760.jpg") 3x
    );
}

#greendeal-business {
	background-color:white;
	scroll-margin-top: 76px;
}
#greendeal-business img {
	height:100px;
}

#greendeal360 img {
	height:75px; 
}

.logo-client {
  max-height: 60px;
  width: auto;
  object-fit: contain;
}
.logo-client-mobile {
  max-height: 200px;
  width: auto;
  object-fit: contain;
}


.btn-dore {
  background-color: var(--couleur-dore);
  color: #fff;
  border: none;
  position: relative;
  overflow: hidden;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.btn-dore:hover {
  background-color: #c9aa6b; /* légèrement plus clair */
  box-shadow: 0 6px 20px rgba(184, 152, 93, 0.45);
}

.accompagner-bloc-in { 
	min-height:220px;
}

#experience {
	scroll-margin-top: 76px;
}

.card-step {
  position: relative;
  background: var(--couleur-vert);
  border-radius: 12px;
  padding: 2rem 1.5rem;
  min-height: 450px;
}

@media (max-width: 991px) {
	.card-step {
		min-height:100px;
	}
	.accompagner-bloc-in { 
		min-height:200px;
	}
}
@media (min-width: 992px) {
  .timeline .col-lg-3:not(:last-child) .card-step::after {
    content: "";
    position: absolute;
    top: -40px;
    right: -35px;
    width: 60px;
    height: 40px;
    background: url("../images/fleche.png") no-repeat center;
    background-size: contain;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .accompagner-bloc-in { 
		min-height:350px;
	}
}

/* CARTES */
.rotate {
  transform: rotateY(181deg);
}

.flip-card {
  width: 100%;
  height: 290px;
  perspective: 1600px;
  cursor:pointer;
}

.flip-card-inner {
  width: 100%;
  will-change: transform;
  height: 100%;
  position: relative;
  transition:transform 1s cubic-bezier(.68,-0.55,.27,1.55);
  transform-style: preserve-3d;
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  padding:20px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translateZ(0);
}

/* FACE ARRIÈRE */
.flip-card-back {
  transform: rotateY(181deg);
  text-align: center;
}

/* FORMULAIRE DE CONTACT */
#contact {
	scroll-margin-top: 76px;
}
.hp-field {
	display: none;
}

/* FOOTER */
footer {
	background-color: var(--couleur-vert);
	color: white;
}
#footer-coordonnees {
	line-height:2rem;
}

#footer-bottom {
	background-color: var(--couleur-dore);
	color: white;
}

/* CAROUSEL */
.carousel-item > div {
	 height: 300px;
}

.slide-wrapper {
	height:300px;
}