div.orgfroid-calculator.orgfroid-debit-puissance-eau .orgfroid-dpe-results-grid {
grid-template-columns: 1fr 1fr 1fr !important;
}
@media (max-width: 767px) {
div.orgfroid-calculator.orgfroid-debit-puissance-eau .orgfroid-dpe-results-grid {
grid-template-columns: 1fr 1fr !important;
}
}
@media (max-width: 479px) {
div.orgfroid-calculator.orgfroid-debit-puissance-eau .orgfroid-dpe-results-grid {
grid-template-columns: 1fr !important;
}
} div.orgfroid-calculator .orgfroid-input-suffix--select {
appearance: auto !important;
-webkit-appearance: auto !important;
border: none !important;
background: transparent !important;
font-size: 13px !important;
font-weight: 600 !important;
color: var(--orgfroid-text) !important;
padding: 0 8px !important;
cursor: pointer !important;
min-width: 60px !important;
} div.orgfroid-calculator .orgfroid-radio-group {
display: flex !important;
gap: 12px !important;
width: 100% !important;
}
@media (max-width: 639px) {
div.orgfroid-calculator .orgfroid-radio-group {
flex-direction: column !important;
}
}
div.orgfroid-calculator .orgfroid-radio-card {
flex: 1 !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
padding: 14px 18px !important;
border: 2px solid var(--orgfroid-border) !important;
border-radius: 10px !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
background: #fff !important;
}
div.orgfroid-calculator .orgfroid-radio-card:hover {
border-color: var(--orgfroid-primary) !important;
background: var(--orgfroid-primary-light) !important;
}
div.orgfroid-calculator .orgfroid-radio-card--active {
border-color: var(--orgfroid-primary) !important;
background: var(--orgfroid-primary-light) !important;
}
div.orgfroid-calculator .orgfroid-radio-card input[type="radio"] {
display: none !important;
}
div.orgfroid-calculator .orgfroid-radio-card-icon {
flex-shrink: 0 !important;
width: 40px !important;
height: 40px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: var(--orgfroid-primary-light) !important;
border-radius: 10px !important;
color: var(--orgfroid-primary) !important;
}
div.orgfroid-calculator .orgfroid-radio-card--active .orgfroid-radio-card-icon {
background: var(--orgfroid-primary) !important;
color: #fff !important;
}
div.orgfroid-calculator .orgfroid-radio-card--active .orgfroid-radio-card-icon svg {
stroke: #fff !important;
}
div.orgfroid-calculator .orgfroid-radio-card-content {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
}
div.orgfroid-calculator .orgfroid-radio-card-content strong {
font-size: 14px !important;
color: var(--orgfroid-text) !important;
}
div.orgfroid-calculator .orgfroid-radio-card-content small {
font-size: 12px !important;
color: var(--orgfroid-light) !important;
} div.orgfroid-calculator .orgfroid-field-hint {
display: block !important;
font-size: 12px !important;
color: var(--orgfroid-light) !important;
margin-top: 4px !important;
} div.orgfroid-calculator .orgfroid-dpe-velocity-card {
background: #fff !important;
border: 1px solid var(--orgfroid-border) !important;
border-radius: 10px !important;
padding: 20px 24px !important;
margin-bottom: 20px !important;
}
div.orgfroid-calculator .orgfroid-dpe-velocity-header {
display: flex !important;
align-items: center !important;
gap: 14px !important;
margin-bottom: 16px !important;
}
div.orgfroid-calculator .orgfroid-dpe-velocity-icon {
width: 44px !important;
height: 44px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: var(--orgfroid-primary-light) !important;
border-radius: 10px !important;
flex-shrink: 0 !important;
}
div.orgfroid-calculator .orgfroid-dpe-velocity-title {
font-size: 13px !important;
font-weight: 500 !important;
color: var(--orgfroid-light) !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
}
div.orgfroid-calculator .orgfroid-dpe-velocity-value {
font-size: 22px !important;
font-weight: 700 !important;
color: var(--orgfroid-text) !important;
} div.orgfroid-calculator .orgfroid-dpe-velocity-bar-wrapper {
position: relative !important;
margin-bottom: 12px !important;
}
div.orgfroid-calculator .orgfroid-dpe-velocity-bar {
display: flex !important;
height: 32px !important;
border-radius: 8px !important;
overflow: hidden !important;
}
div.orgfroid-calculator .orgfroid-dpe-velocity-zone {
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 11px !important;
font-weight: 600 !important;
color: #fff !important;
}
div.orgfroid-calculator .orgfroid-dpe-velocity-zone--low {
flex: 1 !important;
background: #f39c12 !important;
}
div.orgfroid-calculator .orgfroid-dpe-velocity-zone--ok {
flex: 2 !important;
background: var(--orgfroid-primary) !important;
}
div.orgfroid-calculator .orgfroid-dpe-velocity-zone--high {
flex: 1 !important;
background: var(--orgfroid-error, #e74c3c) !important;
}
div.orgfroid-calculator .orgfroid-dpe-velocity-marker {
position: absolute !important;
top: -6px !important;
width: 3px !important;
height: 44px !important;
background: var(--orgfroid-text) !important;
border-radius: 2px !important;
transition: left 0.4s ease !important;
left: 50% !important;
}
div.orgfroid-calculator .orgfroid-dpe-velocity-marker::after {
content: '' !important;
position: absolute !important;
top: -4px !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 0 !important;
height: 0 !important;
border-left: 5px solid transparent !important;
border-right: 5px solid transparent !important;
border-top: 6px solid var(--orgfroid-text) !important;
}
div.orgfroid-calculator .orgfroid-dpe-velocity-status {
font-size: 13px !important;
font-weight: 500 !important;
text-align: center !important;
margin: 0 !important;
padding-top: 4px !important;
}
div.orgfroid-calculator .orgfroid-dpe-velocity-status--low {
color: #f39c12 !important;
}
div.orgfroid-calculator .orgfroid-dpe-velocity-status--ok {
color: var(--orgfroid-primary) !important;
}
div.orgfroid-calculator .orgfroid-dpe-velocity-status--high {
color: var(--orgfroid-error, #e74c3c) !important;
}