:root{
  --primary:#2563eb;
  --secondary:#22c55e;
  --threeary:#00d4ff;
  --dark:#0f172a;
  --light:#f8fafc;
}

.secu {
	  display:none;
}

/****   Form devis offre  ****/

.form-container{
  width:100%;max-width:1200px;background:white;border-radius:20px;
  padding:50px 40px;box-shadow:0 25px 50px rgba(0,0,0,0.1);position:relative;overflow:hidden;
}
.form-container::before{
  content:"";position:absolute;top:-50px;right:-50px;width:200px;height:200px;background:var(--threeary);border-radius:50%;opacity:0.15;
}
.form-container::after{
  content:"";position:absolute;bottom:-50px;left:-50px;width:250px;height:250px;background:var(--primary);border-radius:50%;opacity:0.15;
}
.badges{
  display:flex;justify-content:center;flex-wrap:wrap;gap:15px;margin:30px 0 30px 0;z-index:2;position:relative;
}
.badges span{
  background: linear-gradient(135deg,var(--secondary),var(--threeary));
  color:white;font-weight:600;padding:8px 16px;border-radius:50px;font-size:0.875rem;
  box-shadow:0 5px 15px rgba(0,0,0,0.1);transition:transform .2s ease;
}
.badges span:hover{transform:translateY(-3px);}
form{display:flex;flex-direction:column;gap:20px;z-index:2;position:relative;}
.row{display:flex;gap:20px;flex-wrap:wrap;}
.form-group{flex:1;display:flex;flex-direction:column;position:relative;opacity:0;transform:translateY(30px);transition:all .5s ease;margin-bottom:2rem;}
.form-group.show{opacity:1;transform:translateY(0);}
label{margin-bottom:6px;font-weight:600;color:var(--dark);}
input,textarea,select{
  padding:14px 16px;border-radius:12px;border:1px solid #cbd5e1;font-size:15px;transition:all .3s ease;
}
input:focus,textarea:focus,select:focus{
  border-color:var(--primary);box-shadow:0 0 15px rgba(37,99,235,0.2);outline:none;
}
textarea{min-height:120px;resize:vertical;}
.checkbox{display:flex;align-items:center;gap:10px;font-size:14px;}
.checkbox input{width:auto;}

.form-footer{text-align:center;font-size:13px;margin-top:15px;color:#64748b;}
.promo-badge{
  position:absolute;
  top:20px;
  right:20px;
  background: #041741;
  color:white;
  font-weight:bold;
  padding:15px 2px 27px 2px;
  border-radius:50%;
  box-shadow:0 5px 15px rgba(0,0,0,0.15);
  font-size:0.85rem;
  text-align:center;
  z-index:5;
  transform: rotate(-15deg);
}

.fade-out{
opacity:0;
pointer-events:none;
transition:0.3s ease;
}

/****   Form contact  ****/

 .contact-card {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 12px 24px rgba(0,0,0,0.12);
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    max-width: 1200px;
    width: 95%;
    transition: all 0.3s ease;
	margin:auto;
  }

  .contact-info, .contact-form {
  flex: 1 1 300px;
  min-width: 300px;
  box-sizing: border-box;
  padding: 40px; 
  display: flex;
  flex-direction: column;
  justify-content: flex-start; 
}

  .contact-info {
    background: #fafafa;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 16px;
    color: #333333;
  }
  
  .contact-info h2, 
.contact-form h2 {
  margin: 0 0 20px 0; 
  font-weight: 600;
  color: #111111;
  line-height: 1.2;
}

  .contact-info p {
    margin: 4px 0;
  }

  .contact-form form {
    display: flex;
    flex-direction: column;
    gap: 16px;
	width: 100%; 
  }

  .contact-form input,
  .contact-form textarea {
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid #2563eb;
    font-size: 14px;
    transition: border 0.2s ease;
	width: 100%; 
    box-sizing: border-box;
  }

  .contact-form input:focus,
  .contact-form textarea:focus {
    border-color: #007bff;
    outline: none;
  }

  .contact-form button {
    padding: 14px;
    border-radius: 8px;
    border: none;
    background: #007bff;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.2s ease;
  }

  .contact-form button:hover {
    background: #0056b3;
  }
  
  /*** devis  ***/

.vweb-devis-form-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.vweb-devis-form {
    background: #fff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    font-family: 'Arial', sans-serif;
}

/* Labels */
.vweb-label {
    display: block;
    margin: 15px 0 10px;
    font-weight: 600;
    font-size: 1rem;
    color: #222;
    font-family: 'Segoe UI', Roboto, sans-serif;
}

/* Inputs, textarea, select */
.vweb-input,
.vweb-textarea,
.vweb-select {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    margin-bottom: 20px;
    border-radius: 6px;
    border: 1px solid #ccc;
    font-size: 1em;
    box-sizing: border-box;
    background: #c3f2fc;
    transition: all 0.25s ease;
}

.vweb-input:focus,
.vweb-textarea:focus,
.vweb-select:focus {
    border-color: #2563eb;
    outline: none;
    box-shadow: 0 0 8px rgba(37,99,235,0.2);
}

/* Flex & double bloc */
.vweb-flex-desktop,
.double-bloc,
.vweb-double-bloc {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    align-items: center;
}

/* Bloc */
.bloc {
    flex: 1 1 300px;
    border: 1px solid #2563eb;
    padding: 15px 15px 25px 15px;
    border-radius: 8px;
    background: #f9f9f9;
    transition: 0.3s;
    margin-top: 1rem;
}

.bloc:hover {
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

/* Icône */
.icon {
    border: 0;
    background: none;
    padding-right: 5px;
}

/* Inputs invisibles mais cliquables */
input[type="radio"],
input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    margin: 0;
    cursor: pointer;
}

/* Labels custom */
label {
    position: relative;
    padding-left: 30px;
    cursor: pointer;
    display: inline-block;
    margin-bottom: 0.8rem;
    font-size: 0.95rem;
    color: #333;
    transition: color 0.3s;
}

/* Cercle / case déco */
label span {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 2px solid #00d4ff;
    background: #fff;
    transition: all 0.3s;
}

/* Forme spécifique */
.vweb-radio-group label span {
    border-radius: 50%;
}

.checkbox-group label span {
    border-radius: 6px;
}

/* Hover */
label:hover span {
    border-color: #2563eb;
}

/* Focus */
input[type="radio"]:focus + span,
input[type="checkbox"]:focus + span {
    box-shadow: 0 0 0 3px rgba(37,99,235,0.3);
}

/* Checked */
input[type="radio"]:checked + span,
input[type="checkbox"]:checked + span {
    background: #00d4ff;
    transform: translateY(-50%) scale(0.8);
    animation: checkedAnim 0.2s forwards;
}

@keyframes checkedAnim {
    0% { transform: translateY(-50%) scale(0); }
    100% { transform: translateY(-50%) scale(0.8); }
}

/* Offres cachées */
.vweb-offres-cachees {
    max-height: 0;
    overflow: hidden;
    margin-top: 0;
    transition: max-height 0.5s ease, margin-top 0.5s ease;
}

.vweb-offres-cachees.active {
    max-height: 500px;
    margin-top: 15px;
}

/* Hover inputs */
input:hover,
select:hover {
    border-color: #00cfff;
}

/* Divers */
#toStep2 {
    text-align: left;
}

.vweb-confirmation {
    margin-top: 2rem;
}

#backToStep1 {
    margin-right: 20px;
}

@media (max-width: 1024px) {
  /* On empile les radios et checkboxes */
  .vweb-flex-desktop {
    flex-direction: column; 
    align-items: flex-start;
    gap: 12px;
  }
  
  .vweb-flex-desktop label {
    width: 100%;
    padding: 2px 35px;
  }

  /* Ajustements mineurs de confort sur tablette/mobile */
  .vweb-devis-form {
    padding: 20px;
  }
  
  .vweb-devis-form-container {
    margin: 20px auto;
  }
}

@media(max-width:768px){
	.row{flex-direction:column;}
	.promo-badge{display:none;}
	.vweb-double-bloc, .double-bloc {
		flex-direction: column;
	}
	.vweb-flex-desktop,
	.checkbox-group {
		flex-direction: column;
		gap: 1px;
	}
	.double-bloc {
		align-items: flex-start;
	}
	 .double-bloc .checkbox-group {
        display: flex;         
        flex-direction: column; 
        gap: 10px; 
		height:100%;
		align-items: flex-start;
    }
	.double-bloc .checkbox-group label {
        text-align: left; /* assure que le texte du label est à gauche */
    }
	#backToStep1 {
	   margin-right:0;
    }
	.bloc {
		padding: 15px;
		max-height:250px;
	}
	#heiresp
	{
		max-height:190px;
		
	}
}