/* ═══════════════════════════════════════════════════════════════════════════
   Cocon Estimateur — Styles Premium v2.0
   Mobile-first · ORPI Direct Habitat · Design premium
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Variables ──────────────────────────────────────────────────────────── */
:root {
    --est-primary:     #1a5276;
    --est-primary-h:   #154360;
    --est-primary-10:  rgba(26,82,118,.10);
    --est-primary-06:  rgba(26,82,118,.06);
    --est-accent:      #E30513;
    --est-accent-h:    #c00411;
    --est-success:     #27ae60;
    --est-error:       #e74c3c;
    --est-light:       #f4f6f8;
    --est-border:      #dce3ea;
    --est-text:        #2c3e50;
    --est-muted:       #7f8c8d;
    --est-radius:      12px;
    --est-shadow:      0 4px 24px rgba(0,0,0,.07);
    --est-shadow-lg:   0 8px 40px rgba(0,0,0,.10);
    --est-transition:  .2s ease;
    --est-font:        Roboto, -apple-system, 'Segoe UI', sans-serif;
}

/* ── Layout ──────────────────────────────────────────────────────────────── */
.cocon-est-page {
    background: var(--est-light);
    min-height: 80vh;
    font-family: var(--est-font);
}

.cocon-est-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 16px 60px;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.cocon-est-hero {
    background: linear-gradient(135deg, var(--est-primary) 0%, #2980b9 50%, #1a5276 100%);
    color: #fff;
    padding: 48px 16px 40px;
    text-align: center;
    margin-bottom: 32px;
    position: relative;
    overflow: hidden;
}
.cocon-est-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 70% 30%, rgba(255,255,255,.08) 0%, transparent 60%);
    pointer-events: none;
}

.cocon-est-hero h1 {
    font-size: clamp(1.5rem, 4vw, 2.4rem);
    font-weight: 800;
    margin: 0 0 12px;
    color: #fff;
    letter-spacing: -.02em;
    position: relative;
}

.cocon-est-subtitle {
    font-size: 1rem;
    opacity: .85;
    margin: 0;
    position: relative;
}

/* ── App container ──────────────────────────────────────────────────────── */
.cocon-est-app {
    background: #fff;
    border-radius: var(--est-radius);
    box-shadow: var(--est-shadow);
    padding: 32px 24px;
    margin-bottom: 40px;
    transition: box-shadow .3s ease;
}

.cocon-est-app:hover {
    box-shadow: var(--est-shadow-lg);
}

@media (min-width: 600px) {
    .cocon-est-app { padding: 40px 48px; }
    .cocon-est-container { padding: 0 20px 60px; }
}

/* ── Steps — transitions CSS ────────────────────────────────────────────── */
.cocon-est-step {
    display: none;
    opacity: 0;
    transform: translateY(12px);
}
.cocon-est-step.active {
    display: block;
    animation: estFadeSlideIn .35s ease forwards;
}
.cocon-est-step.fade-out {
    animation: estFadeSlideOut .2s ease forwards;
}

@keyframes estFadeSlideIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes estFadeSlideOut {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-8px); }
}

.cocon-est-step-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
    border-bottom: 2px solid var(--est-light);
    padding-bottom: 18px;
}

.step-num {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--est-primary), #2980b9);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: .95rem;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(26,82,118,.25);
}

.cocon-est-step-header h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    flex: 1;
    color: var(--est-text);
}

/* ── Progress dots ───────────────────────────────────────────────── */
.step-progress { display: flex; gap: 8px; margin-left: auto; }
.step-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--est-border);
    transition: all var(--est-transition);
}
.step-dot.active {
    background: var(--est-primary);
    transform: scale(1.15);
    box-shadow: 0 0 0 3px var(--est-primary-10);
}

/* ── Fields ─────────────────────────────────────────────────────────────── */
.cocon-est-fields { display: flex; flex-direction: column; gap: 22px; }

.field-group { display: flex; flex-direction: column; gap: 7px; }

.field-row { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }

.field-group label {
    font-size: .9rem;
    font-weight: 600;
    color: var(--est-text);
    display: flex;
    align-items: center;
    gap: 6px;
}
.field-group label .required { color: var(--est-accent); }
.field-group label svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--est-muted); }

.field-group input[type="text"],
.field-group input[type="number"],
.field-group input[type="email"],
.field-group input[type="tel"],
.field-group select {
    height: 48px;
    border: 1.5px solid var(--est-border);
    border-radius: 10px;
    padding: 0 14px;
    font-size: 1rem;
    color: var(--est-text);
    font-family: var(--est-font);
    transition: border-color var(--est-transition), box-shadow var(--est-transition);
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    -webkit-appearance: none;
}

.field-group input:focus,
.field-group select:focus {
    outline: none;
    border-color: var(--est-primary);
    box-shadow: 0 0 0 4px var(--est-primary-10);
}

.field-group input::placeholder { color: #b0b8c0; }

.field-hint { font-size: .82rem; color: var(--est-muted); margin: 0; }

.field-checkbox { flex-direction: row; align-items: flex-start; gap: 10px; }
.field-checkbox label { font-weight: 400; cursor: pointer; }
.rgpd-label { font-size: .84rem; }

/* ── Surface slider ──────────────────────────────────────────────────────── */
.surface-slider-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.surface-slider-row {
    display: flex;
    align-items: center;
    gap: 14px;
}
.surface-slider-row input[type="range"] {
    flex: 1;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(to right, var(--est-primary) 0%, var(--est-primary) var(--val, 50%), var(--est-border) var(--val, 50%), var(--est-border) 100%);
    border-radius: 99px;
    outline: none;
    cursor: pointer;
}
.surface-slider-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--est-primary);
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
    cursor: pointer;
    transition: transform .15s;
}
.surface-slider-row input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}
.surface-slider-row input[type="range"]::-moz-range-thumb {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--est-primary);
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
    cursor: pointer;
}
.surface-slider-val {
    min-width: 70px;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--est-primary);
    background: var(--est-light);
    border-radius: 8px;
    padding: 6px 10px;
}

/* ── Autocomplete ────────────────────────────────────────────────────────── */
.autocomplete-wrapper { position: relative; }

.autocomplete-list {
    position: absolute;
    z-index: 100;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: #fff;
    border: 1.5px solid var(--est-border);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,.12);
    list-style: none;
    margin: 0; padding: 6px 0;
    max-height: 260px;
    overflow-y: auto;
}

.autocomplete-list li {
    padding: 12px 16px;
    cursor: pointer;
    font-size: .92rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background var(--est-transition);
    border-radius: 6px;
    margin: 0 4px;
}

.autocomplete-list li:hover { background: var(--est-light); }
.commune-dept { color: var(--est-muted); font-size: .82rem; }

/* ── Radio cards — Type bien ─────────────────────────────────────────────── */
.radio-group { display: flex; gap: 12px; flex-wrap: wrap; }

.radio-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border: 2px solid var(--est-border);
    border-radius: 12px;
    cursor: pointer;
    transition: all var(--est-transition);
    font-size: .95rem;
    background: #fff;
    min-width: 140px;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}

.radio-card:hover {
    border-color: var(--est-primary);
    box-shadow: 0 2px 12px rgba(26,82,118,.12);
}

.radio-card input[type="radio"] { display: none; }

.radio-card .radio-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--est-light);
    transition: all var(--est-transition);
    flex-shrink: 0;
}
.radio-card .radio-icon svg {
    width: 20px;
    height: 20px;
    color: var(--est-muted);
    transition: color var(--est-transition);
}

.radio-card:has(input:checked),
.radio-card.selected {
    border-color: var(--est-primary);
    background: var(--est-primary-06);
    box-shadow: 0 0 0 3px var(--est-primary-10);
}
.radio-card:has(input:checked) .radio-icon,
.radio-card.selected .radio-icon {
    background: var(--est-primary);
}
.radio-card:has(input:checked) .radio-icon svg,
.radio-card.selected .radio-icon svg {
    color: #fff;
}
.radio-card:has(input:checked) .radio-label,
.radio-card.selected .radio-label {
    color: var(--est-primary);
    font-weight: 700;
}

/* ── Etat general cards ──────────────────────────────────────────────── */
.radio-group--etat {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.radio-card--etat {
    flex-direction: column;
    text-align: center;
    padding: 18px 14px;
    gap: 6px;
    border-radius: 14px;
    position: relative;
    overflow: hidden;
}
.radio-card--etat::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    opacity: 0;
    transition: opacity var(--est-transition);
}
.radio-card--etat:has(input:checked)::before { opacity: 1; }
.radio-card--etat[data-etat="excellent"]::before { background: rgba(39,174,96,.06); }
.radio-card--etat[data-etat="bon"]::before { background: rgba(46,204,113,.06); }
.radio-card--etat[data-etat="moyen"]::before { background: rgba(241,196,15,.06); }
.radio-card--etat[data-etat="travaux"]::before { background: rgba(231,76,60,.06); }
.radio-card--etat[data-etat="renover"]::before { background: rgba(192,57,43,.06); }

.etat-icon {
    font-size: 1.6rem;
    line-height: 1;
    position: relative;
}
.etat-label { font-size: .9rem; font-weight: 700; position: relative; }
.etat-desc { font-size: .78rem; color: var(--est-muted); font-weight: 400; position: relative; }

/* ── DPE selector — Barre horizontale ────────────────────────────────────── */
.dpe-selector {
    display: flex;
    gap: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.dpe-option {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 52px;
    cursor: pointer;
    font-weight: 800;
    font-size: 1.1rem;
    border: none;
    transition: all var(--est-transition);
    position: relative;
}

.dpe-option input { display: none; }

.dpe-option:hover {
    filter: brightness(1.1);
    z-index: 1;
}
.dpe-option:has(input:checked) {
    transform: scaleY(1.15);
    z-index: 2;
    box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
.dpe-option:has(input:checked)::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid currentColor;
}

/* Couleurs DPE 2026 */
.dpe-a, .dpe-option.dpe-a { background: #009a44; color: #fff; }
.dpe-b, .dpe-option.dpe-b { background: #51b747; color: #fff; }
.dpe-c, .dpe-option.dpe-c { background: #b0cd42; color: #333; }
.dpe-d, .dpe-option.dpe-d { background: #f9d000; color: #333; }
.dpe-e, .dpe-option.dpe-e { background: #f4a10d; color: #fff; }
.dpe-f, .dpe-option.dpe-f { background: #ea560d; color: #fff; }
.dpe-g, .dpe-option.dpe-g { background: #d7221f; color: #fff; }
.dpe-unknown { background: var(--est-light); color: var(--est-muted); }

.dpe-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 14px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 1rem;
    min-width: 36px;
}

/* ── Periode construction — cards visuelles ───────────────────────── */
.radio-group--periode {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
}
.radio-card--periode {
    text-align: center;
    padding: 14px 12px;
    border-radius: 10px;
    font-size: .88rem;
    font-weight: 600;
    position: relative;
    overflow: hidden;
}
.radio-card--periode::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0; right: 0;
    height: 3px;
    background: var(--est-primary);
    transform: scaleX(0);
    transition: transform var(--est-transition);
}
.radio-card--periode:has(input:checked)::after {
    transform: scaleX(1);
}

/* ── Prestations — Chips visuels ─────────────────────────────────────────── */
.prestations-grid { display: flex; flex-wrap: wrap; gap: 10px; }

.presta-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1.5px solid var(--est-border);
    border-radius: 24px;
    cursor: pointer;
    font-size: .88rem;
    transition: all var(--est-transition);
    background: #fff;
    user-select: none;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

.presta-chip:hover {
    border-color: var(--est-primary);
    box-shadow: 0 2px 8px rgba(26,82,118,.1);
}

.presta-chip input { display: none; }

.presta-chip .presta-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.presta-chip .presta-icon svg {
    width: 18px;
    height: 18px;
    color: var(--est-muted);
    transition: color var(--est-transition);
}

.presta-chip:has(input:checked) {
    background: var(--est-primary-06);
    border-color: var(--est-primary);
    color: var(--est-primary);
    font-weight: 600;
}
.presta-chip:has(input:checked) .presta-icon svg {
    color: var(--est-primary);
}

.presta-chip--minus:has(input:checked) {
    background: rgba(231,76,60,.06);
    border-color: var(--est-error);
    color: var(--est-error);
}
.presta-chip--minus:has(input:checked) .presta-icon svg {
    color: var(--est-error);
}

/* ── Preview indicatif ───────────────────────────────────────────────────── */
.cocon-est-preview {
    background: linear-gradient(135deg, var(--est-light), #eef2f7);
    border: 1px solid var(--est-border);
    border-radius: 10px;
    padding: 14px 18px;
    margin: 24px 0;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: .92rem;
    transition: all var(--est-transition);
}

.preview-label { color: var(--est-muted); }
.preview-price {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--est-primary);
    transition: all .3s ease;
}
.preview-hint  { font-size: .78rem; color: var(--est-muted); }

/* ── Boutons ─────────────────────────────────────────────────────────────── */
.cocon-est-btn-next,
.cocon-est-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--est-accent), var(--est-accent-h));
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 15px 32px;
    font-size: 1.05rem;
    font-weight: 700;
    font-family: var(--est-font);
    cursor: pointer;
    margin-top: 28px;
    transition: all var(--est-transition);
    width: 100%;
    box-shadow: 0 4px 16px rgba(227,5,19,.25);
    letter-spacing: .01em;
}

.cocon-est-btn-next:hover,
.cocon-est-btn-primary:hover {
    background: linear-gradient(135deg, var(--est-accent-h), #a00310);
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(227,5,19,.3);
}
.cocon-est-btn-next:active,
.cocon-est-btn-primary:active {
    transform: translateY(0);
}

.cocon-est-btn-back {
    background: none;
    border: 2px solid var(--est-border);
    border-radius: 12px;
    padding: 13px 22px;
    font-size: .92rem;
    color: var(--est-text);
    cursor: pointer;
    transition: all var(--est-transition);
    font-family: var(--est-font);
    font-weight: 600;
}
.cocon-est-btn-back:hover {
    border-color: var(--est-primary);
    color: var(--est-primary);
    background: var(--est-primary-06);
}

.cocon-est-btn-row { display: flex; gap: 12px; margin-top: 28px; }
.cocon-est-btn-row .cocon-est-btn-next { flex: 1; margin-top: 0; }

/* ── Loader spinner premium ──────────────────────────────────────────────── */
.cocon-est-loader {
    text-align: center;
    padding: 60px 20px;
}

.loader-spinner {
    width: 56px; height: 56px;
    border: 4px solid var(--est-light);
    border-top-color: var(--est-accent);
    border-right-color: var(--est-primary);
    border-radius: 50%;
    animation: estSpin .7s linear infinite;
    margin: 0 auto 20px;
}
.loader-text {
    color: var(--est-muted);
    font-size: .95rem;
    animation: estPulse 1.5s ease infinite;
}

@keyframes estSpin { to { transform: rotate(360deg); } }
@keyframes estPulse {
    0%, 100% { opacity: .6; }
    50% { opacity: 1; }
}

/* ── Resultat premium ────────────────────────────────────────────────────── */
.cocon-est-result {
    animation: estResultIn .5s ease forwards;
}

@keyframes estResultIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.result-main {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
    background: linear-gradient(135deg, var(--est-light) 0%, #eef2f7 100%);
    border-radius: 16px;
    padding: 28px 24px;
    margin-bottom: 28px;
    border: 1px solid var(--est-border);
}

@media (min-width: 560px) {
    .result-main {
        grid-template-columns: 1fr auto;
        padding: 32px;
    }
}

/* ── Jauge visuelle prix ──────────────────────────────── */
.result-gauge {
    width: 100%;
    margin: 16px 0 20px;
    position: relative;
}
.result-gauge__track {
    height: 12px;
    background: linear-gradient(to right, #27ae60, #f1c40f, #e67e22, var(--est-accent));
    border-radius: 99px;
    position: relative;
    overflow: visible;
}
.result-gauge__marker {
    position: absolute;
    top: -6px;
    width: 24px; height: 24px;
    background: #fff;
    border: 3px solid var(--est-primary);
    border-radius: 50%;
    transform: translateX(-50%);
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
    transition: left .6s cubic-bezier(.16,1,.3,1);
}
.result-gauge__labels {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: .82rem;
    color: var(--est-muted);
}
.result-gauge__labels strong {
    color: var(--est-text);
    font-weight: 700;
}

.result-price-block { }

.result-fourchette {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.fourchette-bound {
    font-size: clamp(1.5rem, 4vw, 2.1rem);
    font-weight: 800;
    color: var(--est-primary);
    letter-spacing: -.02em;
    line-height: 1.1;
}

.fourchette-separator { color: var(--est-muted); font-size: 1.4rem; }

.fourchette-unit { font-size: 1rem; color: var(--est-muted); align-self: flex-end; margin-bottom: 4px; }

.result-central {
    font-size: 1rem;
    color: var(--est-text);
    margin-bottom: 6px;
}
.result-central strong {
    font-size: 1.15rem;
    color: var(--est-primary);
}

.result-m2 {
    font-size: .92rem;
    color: var(--est-muted);
    margin-bottom: 4px;
}

.result-meta { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
@media (min-width: 560px) { .result-meta { align-items: flex-end; } }

/* ── Badge confiance premium ──────────────────── */
.result-badge {
    font-size: .88rem;
    padding: 8px 16px;
    border-radius: 24px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.badge-robuste  { background: rgba(39,174,96,.12);  color: #1e8449; border: 1px solid rgba(39,174,96,.2); }
.badge-limite   { background: rgba(241,196,15,.15);  color: #b7791f; border: 1px solid rgba(241,196,15,.25); }
.badge-indicatif{ background: rgba(127,140,141,.12); color: #636e72; border: 1px solid rgba(127,140,141,.2); }

/* ── DPE badge large ──────────────────────────── */
.result-dpe-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}
.result-dpe {
    font-size: 1.2rem;
    font-weight: 800;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}
.dpe-source-label { font-size: .8rem; color: var(--est-muted); }

/* ── Comparables gros ─────────────────────────── */
.result-comparables-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.result-comparables {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--est-primary);
}
.result-comparables-label {
    font-size: .82rem;
    color: var(--est-muted);
}

/* Disclaimer */
.cocon-est-disclaimer {
    background: #fef9e7;
    border: 1px solid #f9d25b;
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 28px;
}

.cocon-est-disclaimer p {
    font-size: .82rem;
    color: #6b5c00;
    margin: 0;
    line-height: 1.55;
}

/* ── Lead form premium ──────────────────────────────────────────── */
.cocon-est-lead-form {
    background: linear-gradient(135deg, #f8f9fb 0%, #eef1f5 100%);
    border: 1px solid rgba(26,82,118,.12);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,.04);
}
.lead-form-header {
    background: linear-gradient(135deg, var(--est-primary), #2980b9);
    color: #fff;
    padding: 22px 24px 18px;
}
.cocon-est-lead-form h3 {
    font-size: 1.15rem;
    margin: 0 0 6px;
    font-weight: 700;
    color: #fff;
}
.lead-form-subtitle {
    font-size: .85rem;
    color: rgba(255,255,255,.75);
    margin: 0;
}
.lead-form-body {
    padding: 24px;
}
@media (min-width: 600px) {
    .lead-form-body { padding: 24px 28px 28px; }
    .lead-form-header { padding: 22px 28px 18px; }
}
.lead-form-body .field-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 16px;
}
@media (min-width: 560px) {
    .lead-form-body .field-row { grid-template-columns: 1fr 1fr; }
}
.lead-form-body .field-group {
    margin-bottom: 14px;
}
.lead-form-body label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: var(--est-text);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.lead-form-body input[type="text"],
.lead-form-body input[type="email"],
.lead-form-body input[type="tel"] {
    width: 100%;
    border: 1.5px solid var(--est-border);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: .92rem;
    font-family: var(--est-font);
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
}
.lead-form-body input:focus {
    border-color: var(--est-primary);
    box-shadow: 0 0 0 3px var(--est-primary-10);
    outline: none;
}

/* Horizon chips */
.lead-horizon-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.horizon-chip { cursor: pointer; }
.horizon-chip input { display: none; }
.horizon-chip span {
    display: inline-block;
    padding: 8px 16px;
    border: 1.5px solid var(--est-border);
    border-radius: 20px;
    font-size: .82rem;
    font-weight: 500;
    color: var(--est-text);
    background: #fff;
    transition: all .2s;
}
.horizon-chip input:checked + span {
    background: var(--est-primary);
    color: #fff;
    border-color: var(--est-primary);
}
.horizon-chip:hover span { border-color: var(--est-primary); }

/* Toggle rappel */
.lead-options { margin: 18px 0; }
.lead-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: .88rem;
}
.lead-toggle input { display: none; }
.toggle-slider {
    display: inline-block;
    width: 44px; min-width: 44px; height: 24px;
    background: #ccc;
    border-radius: 12px;
    position: relative;
    transition: background .2s;
    flex-shrink: 0;
}
.toggle-slider::after {
    content: '';
    width: 20px; height: 20px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 2px; left: 2px;
    transition: transform .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.lead-toggle input:checked + .toggle-slider { background: var(--est-primary); }
.lead-toggle input:checked + .toggle-slider::after { transform: translateX(20px); }
.toggle-text { color: var(--est-text); font-weight: 500; }

/* Footer */
.lead-footer { margin-top: 20px; text-align: center; }
.cocon-est-btn-submit {
    display: inline-block;
    background: linear-gradient(135deg, var(--est-primary), #2980b9);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 14px 36px;
    font-size: 1rem;
    font-weight: 700;
    font-family: var(--est-font);
    cursor: pointer;
    transition: all .2s;
    letter-spacing: .3px;
    box-shadow: 0 4px 16px rgba(26,82,118,.25);
}
.cocon-est-btn-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(26,82,118,.3);
}
.lead-privacy { font-size: .75rem; color: var(--est-muted); margin-top: 12px; }
.lead-privacy a { color: var(--est-primary); text-decoration: underline; }

/* Success */
.lead-success-msg { text-align: center; padding: 32px 24px; }
.success-icon {
    width: 60px; height: 60px;
    background: var(--est-success);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0 auto 14px;
    box-shadow: 0 4px 16px rgba(39,174,96,.3);
}
.success-title { font-size: 1.15rem; font-weight: 700; color: var(--est-text); margin: 0 0 6px; }
.success-text { font-size: .88rem; color: var(--est-muted); margin: 0; }

/* CTA cocon */
.cocon-est-cta-row { text-align: center; }

.cocon-est-cta {
    display: inline-block;
    color: var(--est-primary);
    text-decoration: none;
    font-size: .92rem;
    font-weight: 600;
    padding: 12px 24px;
    border: 2px solid var(--est-primary);
    border-radius: 10px;
    transition: all var(--est-transition);
}
.cocon-est-cta:hover { background: var(--est-primary); color: #fff; }

/* Erreur */
.cocon-est-error {
    text-align: center;
    padding: 30px;
    color: var(--est-error);
}

/* ── Module Historique ───────────────────────────────────────────────────── */
.cocon-est-historique {
    background: #fff;
    border-radius: var(--est-radius);
    box-shadow: var(--est-shadow);
    padding: 32px 24px;
    margin-bottom: 40px;
}
@media (min-width: 600px) {
    .cocon-est-historique { padding: 36px 40px; }
}

.cocon-est-historique h2 { font-size: 1.3rem; margin: 0 0 8px; }

.hist-result {
    background: var(--est-light);
    border-radius: var(--est-radius);
    padding: 20px 24px;
    margin-top: 24px;
}

.hist-value-block { display: flex; flex-direction: column; gap: 10px; }

.hist-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .95rem;
    border-bottom: 1px solid var(--est-border);
    padding-bottom: 10px;
}
.hist-row:last-child { border-bottom: none; padding-bottom: 0; }
.hist-row--reel { color: var(--est-muted); }
.hist-row strong { font-size: 1.05rem; }
.gain-positive { color: var(--est-success); }
.gain-negative { color: var(--est-error); }
.hist-source { font-size: .78rem; color: var(--est-muted); margin-top: 12px; }

/* ── Admin styles ────────────────────────────────────────────────────────── */
.cocon-est-admin-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
    margin: 20px 0;
}
.stat-card {
    background: #fff;
    border: 1px solid var(--est-border);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    transition: box-shadow var(--est-transition);
}
.stat-card:hover { box-shadow: var(--est-shadow); }
.stat-number { font-size: 2rem; font-weight: 800; color: var(--est-primary); }
.stat-label  { font-size: .85rem; color: var(--est-muted); margin-top: 4px; }

.cocon-est-filters {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

/* ── Nature bien (Ancien / Neuf) ────────────────────────────────────────── */
.radio-group--nature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.radio-group--nature .radio-card {
    text-align: center;
}

/* ── Coefficient étage ──────────────────────────────────────────────────── */
.field-etage-coeff select {
    width: 100%;
}

.field-etage-coeff .field-hint {
    margin-top: 6px;
    font-size: 0.85rem;
    transition: color 0.2s;
}

/* ── Info étage dans résultat ───────────────────────────────────────────── */
.cocon-est-etage-info {
    background: var(--est-primary-06, rgba(26,82,118,.06));
    border-left: 3px solid var(--est-primary, #1a5276);
    padding: 12px 16px;
    border-radius: 6px;
    margin: 16px 0;
    font-size: 0.92rem;
    color: var(--est-text, #2c3e50);
}

.cocon-est-etage-info p {
    margin: 0;
}

/* ── Bloc VEFA à proximité ──────────────────────────────────────────────── */
.cocon-est-vefa-bloc {
    background: linear-gradient(135deg, #f0f9ff 0%, #e8f4fd 100%);
    border: 1px solid #bce0fd;
    border-radius: var(--est-radius, 12px);
    padding: 20px 24px;
    margin: 20px 0;
}

.cocon-est-vefa-bloc h3 {
    margin: 0 0 10px;
    font-size: 1.1rem;
    color: var(--est-primary, #1a5276);
}

.cocon-est-vefa-bloc p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--est-text, #2c3e50);
    line-height: 1.5;
}

.dpe-option.dpe-selected { transform: scale(1.15); box-shadow: 0 0 0 3px #333; z-index: 1; }


/* DPE sélectionné — plus visible */
.dpe-option.dpe-selected,
.dpe-option:has(input:checked) {
    transform: scale(1.35) !important;
    box-shadow: 0 0 0 3px #1a1a1a, 0 4px 12px rgba(0,0,0,0.3) !important;
    z-index: 2 !important;
    border-radius: 8px !important;
    font-weight: 900 !important;
    font-size: 1.1rem !important;
}
.dpe-option:not(.dpe-selected):not(:has(input:checked)) {
    opacity: 0.5;
}

/* ═══ Timeline positionnement marché (alignement estimateur agence) ═══ */
.cocon-est-timeline-wrap {
    margin-top: 1.2rem;
    padding: 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}
.cocon-est-timeline-wrap .timeline-label {
    display: block;
    font-size: .85rem;
    color: #64748b;
    margin-bottom: .5rem;
    font-weight: 500;
}
.cocon-est-timeline {
    position: relative;
}
#cocon-est-timeline-slider {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(to right, #ef4444 0%, #f59e0b 40%, #3b82f6 60%, #1C376A 100%);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
#cocon-est-timeline-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #1C376A;
    cursor: pointer;
    border: 3px solid white;
    box-shadow: 0 2px 6px rgba(28, 55, 106, .3);
}
#cocon-est-timeline-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #1C376A;
    cursor: pointer;
    border: 3px solid white;
}
.timeline-labels {
    display: flex;
    justify-content: space-between;
    margin-top: .5rem;
    font-size: .75rem;
    color: #94a3b8;
}
.timeline-labels span.is-active {
    color: #1C376A;
    font-weight: 700;
}
.timeline-value {
    text-align: center;
    margin-top: .5rem;
    font-size: .9rem;
    color: #1C376A;
    font-weight: 600;
}

/* ═══ Prestations appart/maison distinctes ═══ */
.cocon-est-presta-appart,
.cocon-est-presta-maison {
    margin-top: 1rem;
}