@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap");
#nextPageArrow {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 40px solid green;
  position: fixed;
  bottom: 20px;
  right: 20px;
  cursor: pointer;
}

.box {
  display: flex;
}

model-viewer {
  width: 600px;
  height: 400px;
  margin: 0, auto;
}

html body {
  font-family: Roboto, arial, sans-serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.4;
  color: #424242;
}
html body ul {
  padding: 0;
  margin: 0;
}
html body .wrapper {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
}

input, select, textarea,
button, a {
  outline: none !important;
  box-shadow: none !important;
}
input:active, input:visited, input:focus, select:active, select:visited, select:focus, textarea:active, textarea:visited, textarea:focus,
button:active,
button:visited,
button:focus, a:active, a:visited, a:focus {
  outline: none;
  box-shadow: none;
}

body {
  position: relative;
  padding: 0px 0 0 0px;
}

a {
  text-decoration: none !important;
}
a * {
  text-decoration: none !important;
}

li {
  list-style: none;
}

.wrapper {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}

img {
  max-width: 100%;
}

p strong {
  font-weight: 500 !important;
}

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

.flexCC {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flexCL {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.flexCR {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.flexTR {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.flexTL {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

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

.flexSSB {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}

.flexSC {
  flex-direction: column;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}

.flexTSB {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.flexTL {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

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

.fg1 {
  flex-grow: 1;
}

.fg2 {
  flex-grow: 2;
}

.fg3 {
  flex-grow: 3;
}

.fg4 {
  flex-grow: 4;
}

.fg5 {
  flex-grow: 5;
}

.fg6 {
  flex-grow: 6;
}

.fg7 {
  flex-grow: 7;
}

.fg8 {
  flex-grow: 8;
}

.ttup {
  text-transform: uppercase;
}

button.cleaner, a.cleaner {
  background: 0;
  border: none;
  border-radius: 0;
  padding: 0;
}

.roundor {
  margin-left: auto;
  margin-right: auto;
  border-radius: 50%;
  height: var(--radius);
  width: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cta {
  height: 40px;
  display: flex;
  padding: 0 20px;
  border-radius: 20px;
  color: white;
  transition: 0.25s all ease-out;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 300;
  border-width: 1px;
  border-style: solid;
  border-color: #86BC29;
}
.cta span {
  display: block;
  color: inherit;
  transition: 0.25s all ease-out;
}
.cta i {
  transition: 0.25s all ease-out;
  color: inherit;
}
.cta:hover {
  color: white;
}
.cta.ctaPrimary {
  background-color: #86BC29;
}
.cta.ctaPrimary:hover {
  background-color: #457d00;
}
.cta.ctaSecondary {
  background-color: white;
  color: #86BC29;
}
.cta.ctaSecondary:hover {
  background-color: #457d00;
  border-color: #457d00;
  color: white;
}
.cta.ctaLink {
  border: 0;
  text-transform: uppercase;
  color: #424242;
  padding: 0;
  border-radius: 0;
}
.cta.ctaLink:hover {
  color: #457d00;
}
.cta.ctaGreen {
  justify-content: space-between;
  border-color: white;
  color: white;
  text-transform: uppercase;
  background-color: #86BC29;
}
.cta.ctaGreen i {
  font-size: 20px;
}
.cta.ctaGreen span {
  font-weight: 400;
}
.cta.ctaGreen:hover {
  background-color: #457d00;
  border-color: #457d00;
}

header {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  background-color: white;
  padding: 15px 0;
}
header .logo img {
  height: 40px;
}
header .cta {
  margin-left: 20px;
}

footer {
  padding: 20px 0;
  background-color: #86BC29;
  color: white;
}

fieldset {
  margin-bottom: 15px;
}
fieldset label {
  display: block;
  margin-bottom: 5px;
  font-weight: 300;
  min-height: 22px;
}
fieldset label2 {
  display: block;
  margin-top : 5px;
  margin-bottom: 0px;
  font-weight: 300;
  min-height: 22px;
}
fieldset .basicInput {
  border: 2px solid #f5f9ec;
  background-color: white;
  height: 40px;
  border-top-left-radius: 13px;
  border-bottom-right-radius: 13px;
  padding: 0 10px;
  width: 100%;
}
fieldset .basicInput::-moz-placeholder {
  color: #bbb;
}
fieldset .basicInput::placeholder {
  color: #bbb;
}
fieldset:last-child:not(:first-child) {
  margin-bottom: 0;
}

.wrapperSelect {
  padding: 0 10px 0 0 !important;
}
.wrapperSelect select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image:url(/down_arrow.gif); background-repeat:no-repeat; background-position:calc(100% - 10px);  background-size: 12px;
  background-position: calc(100% - 20px) center;
  background-repeat: no-repeat;
  background-color: #efefef;
  background: none;
  border: none;
  width: 100%;
  height: 100%;
  padding-left: 10px;
  color: #424242;
}

.labelSpan {
  display: block;
  margin-bottom: 5px;
  font-weight: 300;
}

#etageDetails {
  border: 1px solid #f5f9ec;
  margin-bottom: 10px;
  padding-bottom: 10px;
  background-color: white;
}
#etageDetails > div {
  background-color: white;
  padding: 10px 10px 0 10px;
  margin-bottom: 0px;
}
#etageDetails fieldset {
  margin-bottom: 0px;
}
.video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.preview-image {
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
}

#video-container {
  width: 100%;
  height: 100%;
}

#video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#banniere {
  margin-top: 70px;
  background-position: center center;
  background-size: cover;
}
#banniere .innerBanniere {
  height: 680px;
}
#banniere .innerBanniere h1 {
  margin: 0;
  color: white;
  font-weight: 300;
  font-size: 55px;
}
#banniere .innerBanniere .step {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  width: 44px;
  margin: 20px auto 0;
  background-color: #86BC29;
  color: white;
  font-size: 16px;
  border-radius: 50%;
}
.cardForm.no-border-radius {
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
}

section {
  padding: 33px 0 20px;
  background-color: white;
}
section .cardForm {
  padding: 20px;
  background-color: #f5f9ec;
  margin-bottom: 20px;
}
section .cardForm.green {
  background-color: #86BC29;
}
section .cardForm.green div,
section .cardForm.green h2,
section .cardForm.green label {
  color: white;
}
section.greenSection {
  background-color: #f5f9ec;
  padding-bottom: 20px;
}
section.greenSection1 {
  background-color: #f5f9ec;
  padding-bottom: 10px;
}
section.greenSection .cardForm {
  background-color: white;
  height: 100%;
}

h2 {
  font-size: 24px;
  font-weight: 300;
  margin: 0 0 10px 0;
}

h4 {
  font-size: 20px;
  font-weight: 300;
  margin: 0 0 10px 0;
}

.resumeBtn {
  margin-top: 12px;
}
.resumeBtn .cta span:first-child,
.resumeBtn .cta i:first-child {
  margin-right: 20px;
}

@media screen and (max-width: 767px) {
  #banniere {
    margin-top: 60px;
  }
  #banniere .innerBanniere {
    height: 320px;
  }
  #banniere h1 {
    font-size: 36px !important;
    text-align: center;
  }
  .resumeBtn {
    flex-direction: column;
  }
  .resumeBtn .cta {
    width: 100%;
  }
  .resumeBtn .cta:first-child {
    margin-bottom: 10px;
  }
  .cardForm {
    height: auto !important;
  }
  .resumePage .col-md-8 .green {
    margin-top: 24px;
  }
  .resumePage section:not(.greenSection) {
    padding-bottom: 72px;
  }
  .resumePage section .cardForm {
    height: auto !important;
  }
  .resumePage .greenSection .col-md-6:first-child {
    margin-bottom: 24px;
  }
  .indexPage .greenSection .cardForm.revealerRight {
    margin-bottom: 0;
  }
  #etageDetails .col-md-6 fieldset:first-child {
    margin-bottom: 8px;
  }
  .d-mobile-none {
    display: none !important;
  }
  .card-with-image img {
    margin-bottom: 24px;
  }
  .card-with-image .col-md-4:last-child img {
    margin-bottom: 0;
  }
}

#video-container {
  overflow: hidden; /* Cache les parties de la vidéo qui débordent */
  position: relative; /* Positionnement relatif pour le conteneur */
  width: 100%; /* Prend la largeur totale de la colonne */
  height: 0; /* Défini initialement à 0 */
  padding-top: 100%; /* Ratio pour la vidéo carrée 1:1 */
}

#video {
  position: absolute; /* Positionnement absolu par rapport à son parent */
  top: 50%;
  left: 50%;
  width: 120%; /* Augmente la largeur pour compenser le décalage */
  height: 120%; /* Augmente la hauteur pour compenser le décalage */
  transform: translate(-50%, -50%); /* Centre la vidéo correctement */
  object-fit: cover; /* Garantit que la vidéo couvre l'espace disponible sans déformation */
}
.no-border-radius {
  border-radius: 0 !important;
}


.produit-section {
  margin-bottom: 0px;
}

.produit-titre {
  font-size: 24px;
}

.produit-features {
  display: flex;
  flex-direction: column;
}

.produit-label {
  font-weight: bold;
}

.produit-valeur {
  color: #333;
}
.icon-wrapper, .text-wrapper {
  display: inline-block;
  vertical-align: top;
}

.custom-icon {
  font-size: 3rem;
  margin-bottom: 10px;
  margin-right: 8px;
}

.text-wrapper {
  font-size: 2rem;
  color: #424242;
}

.deperditions-style {
  font-size: 70px;
  color: rgb(132,189,0);
  border-left: 20%;  
  font-weight: 400;
}

#card-form-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
#card-form-container2 {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: rgb(247, 248, 244);
}
#deperditions-container {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.align-right-content > * {
  text-align: right;
}
.bouton-emetteur {
  width: 120px; 
  border-radius: 20px;
  height: 100px;
  margin: 10px; 
  font-size: 18px; 
}

.bouton-emetteur:active {
  position: relative;
  top: 2px;
}

@keyframes draw {
  from {
      stroke-dasharray: 0, 100;
  }
  to {
      stroke-dasharray: 100, 0;
  }
}
.cardForm {
  border-bottom-right-radius: 25px;
  border-top-left-radius: 25px;
}

/*--------------------------------------------------------------------------------------------*/

.carousel-control-prev,
.carousel-control-next {
  width: 10%;
  opacity: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.arrow-container {
  width: 65px;
  height: 75px;
}

.carousel-control-prev .arrow-container {
  transform: rotate(90deg);
}

.carousel-control-next .arrow-container {
  transform: rotate(-90deg);
}

.more-arrows {
  width: 150%;
  height: 150%;
}

.more-arrows polygon {
  fill: #808080;  /* Gris */
  transition: all .2s ease-out;
}

.more-arrows:hover polygon {
  fill: #606060;  /* Gris plus foncé au survol */
}

.more-arrows:hover polygon.arrow-bottom {
  transform: translateY(-18px);
}

.more-arrows:hover polygon.arrow-top {
  transform: translateY(18px);
}

polygon.arrow-middle {
  opacity: 0.75;
}

polygon.arrow-top {
  opacity: 0.5
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
  background-color: rgba(0,0,0,0.1);
}
.carousel-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 650px; /* Ajustez selon vos besoins */
  padding: 0px;
  color: #51534A;
  text-align: center; /* Centre tout le texte */
}

.carousel-item .product-name {
  font-size: 28px; /* Taille augmentée */
  font-weight: bold;
  margin-bottom: 0px;
  width: 100%; /* Assure que le texte prend toute la largeur */
}
.cardForm {
  margin-bottom: 0; /* Supprime la marge inférieure si elle existe */
}

.row + .row .cardForm {
  border-top: none; /* Supprime la bordure supérieure de la deuxième ligne si nécessaire */
}

.carousel-item video {
  width: 61%;
  height: 94%; /* Utilisez une hauteur fixe au lieu de max-height pour un meilleur contrôle */
  object-fit: cover; /* Cela rognera la vidéo pour remplir le conteneur */
  object-position: center; /* Centre le contenu de la vidéo */
  margin: 15px auto; /* Centrer horizontalement avec des marges automatiques */
  display: block; /* Nécessaire pour que margin: auto fonctionne */
}
#myCarousel .carousel-item {
  box-shadow: 0 2px 5px rgba(81, 83, 74, 0.2); /* Ombre légère avec la couleur #51534A */
}



/* Effet d'ombre pour les contrôles du carrousel */
#myCarousel .carousel-control-prev,
#myCarousel .carousel-control-next {
  filter: drop-shadow(0 3px 4px rgba(81, 83, 74, 0.3));
}

/* Effet d'ombre pour d'autres éléments si nécessaire */
.cardForm, .revealerLeft {
  box-shadow: 0 2px 5px rgba(81, 83, 74, 0.2);
}

.carousel-item .product-description {
  font-size: 15px; /* Taille augmentée */
  margin-top: 0px;
  max-width: 100%;
  overflow-y: auto;
  max-height: 120px; /* Augmenté pour accommoder le texte plus grand */
  padding: 20 20px; /* Ajoute un peu d'espace sur les côtés */
  line-height: 1.4; /* Améliore la lisibilité */
}
.carousel-control-prev,
.carousel-control-next {
  width: 10%;
  opacity: 1;
}

.prev-product-preview,
.next-product-preview {
  width: 100px;
  height: 100px;
  background-size: cover;
  background-position: center;
  border-radius: 50%;
  border: 2px solid white;
  transition: transform 0.3s ease;
}

.prev-product-preview:hover,
.next-product-preview:hover {
  transform: scale(1.1);
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
  background-color: rgba(0,0,0,0.1);
}
/* Styles pour la barre de défilement de la description */
.carousel-item .product-description::-webkit-scrollbar {
  width: 5px;
}

.carousel-item .product-description::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.carousel-item .product-description::-webkit-scrollbar-thumb {
  background: #888;
}

.carousel-item .product-description::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: #51534A;
}
/*--------------------------------------------------------------------------------------------*/


/* CSS pour centrer verticalement le contenu dans .produit-section */
.vertical-center {
  display: flex-start;
  flex-direction: column;
  justify-content: center; /* Centre verticalement le contenu */
  height: 100%; /* Assurez-vous que le parent a une hauteur définie */
}

.btn-custom {
  background-color: rgb(247, 247, 247); 
  border-color: #9b9b9b;
  color: white; 
  border: 0px;
}

.btn-custom.active {
  background-color: rgb(223, 223, 223);; 
  color: white;
}
label {
  margin-bottom: 0; /* Annule la marge par défaut en bas */
  line-height: normal; /* Ajustez ceci si nécessaire */
  display: flex; /* Utilisez flex pour centrer verticalement le texte à l'intérieur du label */
  align-items: center; /* Centre verticalement le texte du label */
}
.inline-container {
  display: flex;
  align-items: center; /* Assure que les enfants sont centrés verticalement */
  gap: 10px; /* Espace entre les éléments */
}

label {
  margin-bottom: 0; /* Supprime la marge par défaut */
  display: flex;
  align-items: center; /* Centre le contenu du label verticalement */
}

.form-select {
  flex-grow: 1;
  flex-basis: 66%; /* Commence à environ deux tiers de la largeur */
}

input[type="number"] {
  flex-grow: 1;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.bi-arrow-repeat {
  font-size: 20px; /* Taille de l'icône de chargement */
}

#unique-arrow-wrapper {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#unique-arrow-wrapper svg {
  width: 120px;
  height: auto;
  margin: 0 2rem;
  cursor: pointer;
  overflow: visible;
}
#unique-arrow-wrapper svg polygon,
#unique-arrow-wrapper svg path {
  transition: all 0.5s cubic-bezier(0.2, 1, 0.3, 1);
}
#unique-arrow-wrapper svg:hover polygon,
#unique-arrow-wrapper svg path {
  transition: all 0.5s cubic-bezier(0.2, 1, 0.3, 1);
}
#unique-arrow-wrapper svg:hover path {
  fill: none;
  stroke: #78d86c;  
}


#unique-arrow-wrapper svg:hover .arrow {
  animation: arrow-anim 2.5s cubic-bezier(0.2, 1, 0.3, 1) infinite;
}
#unique-arrow-wrapper svg:hover .arrow-fixed {
  animation: arrow-fixed-anim 2.5s cubic-bezier(0.2, 1, 0.3, 1) infinite;
}

@keyframes arrow-anim {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  5% {
    transform: translateY(-0.1rem);
  }
  100% {
    transform: translateY(1rem);
    opacity: 0;
  }
}
@keyframes arrow-fixed-anim {
  5% {
    opacity: 0;
  }
  20% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}

.btn-custom {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 10px;
  transition: background-color 0.3s ease;
}

.btn-custom:hover {
  background-color: #f0f0f0;
}

.donnees-cachees {
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease, max-height 0.5s ease;
  max-height: 0;
  overflow: hidden;
}

.donnees-visibles {
  display: block;
  opacity: 1;
  max-height: 200px; /* Adjust according to content height */
}

.wrapperSelect {
  margin-top: 10px; /* Adjust as needed */
}