/* ================================================================
   ESTIMATION TUNNEL — Styles LP
   ================================================================ */

/* Fix critique : garantit que [hidden] masque toujours l'élément
   quel que soit le display déclaré ailleurs (loader bug fix)       */
[hidden] { display: none !important; }

/* ── LP Topbar ────────────────────────────────────────────────── */
.lp-topbar {
    background: var(--clr-primary, #1a3c5e);
    color: rgba(255,255,255,.88);
    padding: .65rem 0;
    font-size: .82rem;
    font-weight: 500;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.lp-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.lp-topbar__brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #fff;
    font-weight: 600;
}
.lp-topbar__sep { color: rgba(255,255,255,.35); }
.lp-topbar__zone { color: rgba(255,255,255,.6); font-weight: 400; }
.lp-topbar__phone {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: var(--clr-accent, #c9a84c);
    text-decoration: none;
    font-weight: 600;
    font-size: .85rem;
    transition: opacity .15s;
    white-space: nowrap;
}
.lp-topbar__phone:hover { opacity: .8; }

/* ── Section tunnel ───────────────────────────────────────────── */
.section--tunnel {
    padding: 2rem 0 3rem;
    min-height: calc(100vh - 44px);
    background: var(--clr-bg, #f8f7f4);
}

.tunnel-wrap {
    max-width: 680px;
    margin: 0 auto;
    background: var(--clr-white, #fff);
    border: 1px solid var(--clr-border, #e5e0d8);
    border-radius: var(--radius-lg, 16px);
    padding: 2.25rem 2.5rem;
    box-shadow: 0 4px 24px rgba(26,60,94,.07), 0 1px 4px rgba(26,60,94,.04);
}

/* ── En-tête de la carte ──────────────────────────────────────── */
.tunnel-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1.75rem;
    border-bottom: 1px solid var(--clr-border, #e5e0d8);
}
.tunnel-header__title {
    font-size: clamp(1.35rem, 2.5vw, 1.75rem);
    font-weight: 700;
    color: var(--clr-primary, #1a3c5e);
    margin: 0 0 .4rem;
    line-height: 1.2;
}
.tunnel-header__accent { color: var(--clr-accent, #c9a84c); }
.tunnel-header__sub {
    font-size: .82rem;
    color: var(--clr-text-muted, #6b7280);
    margin: 0;
    line-height: 1.5;
}

/* ── Progress ─────────────────────────────────────────────────── */
.tunnel-progress {
    height: 3px;
    background: var(--clr-border, #e5e0d8);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: .6rem;
}
.tunnel-progress__bar {
    height: 100%;
    background: var(--clr-accent, #c9a84c);
    border-radius: 999px;
    transition: width .4s ease;
}
.tunnel-steps-label {
    font-size: .78rem;
    color: var(--clr-text-muted, #6b7280);
    margin-bottom: 1.75rem;
    font-weight: 500;
}

/* ── Step ─────────────────────────────────────────────────────── */
.tunnel-step { animation: fadeInUp .28s ease both; }
.tunnel-step[hidden] { display: none !important; }
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.tunnel-step__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--clr-primary, #1a3c5e);
    margin-bottom: .35rem;
}
.tunnel-step__sub {
    color: var(--clr-text-muted, #6b7280);
    margin-bottom: 1.75rem;
    line-height: 1.6;
    font-size: .9rem;
}

/* ── Type grid ────────────────────────────────────────────────── */
.type-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .65rem;
    margin-bottom: 1.5rem;
}
.type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .45rem;
    padding: .9rem .6rem;
    border: 2px solid var(--clr-border, #e5e0d8);
    border-radius: var(--radius, 10px);
    cursor: pointer;
    transition: border-color .15s, background .15s;
    text-align: center;
    background: var(--clr-bg, #f8f7f4);
}
.type-card:hover { border-color: var(--clr-primary-light, #2d5f8e); background: #fff; }
.type-card:has(input:checked) {
    border-color: var(--clr-accent, #c9a84c);
    background: #fffbf2;
    box-shadow: 0 0 0 3px rgba(201,168,76,.12);
}
.type-card__icon { font-size: 1.5rem; line-height: 1; }
.type-card__label { font-size: .78rem; font-weight: 600; color: var(--clr-primary, #1a3c5e); }

/* ── Formulaire ───────────────────────────────────────────────── */
.form-section { margin-bottom: 1.5rem; }
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.form-group { margin-bottom: 1.1rem; }
.form-label {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    color: var(--clr-primary, #1a3c5e);
    margin-bottom: .35rem;
}
.required-star { color: var(--clr-accent, #c9a84c); }
.form-control {
    display: block;
    width: 100%;
    padding: .65rem 1rem;
    font-size: .95rem;
    border: 1.5px solid var(--clr-border, #d1cac0);
    border-radius: var(--radius, 10px);
    background: #fff;
    color: var(--clr-text, #1a1a2e);
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
    font-family: inherit;
}
.form-control:focus {
    outline: none;
    border-color: var(--clr-primary, #1a3c5e);
    box-shadow: 0 0 0 3px rgba(26,60,94,.1);
}
.form-control.has-error { border-color: #dc2626; }
.input-with-unit { position: relative; display: flex; align-items: center; }
.input-with-unit .form-control { padding-right: 3rem; }
.input-unit {
    position: absolute;
    right: .9rem;
    font-size: .82rem;
    color: var(--clr-text-muted, #6b7280);
    pointer-events: none;
}
.form-hint {
    font-size: .76rem;
    color: var(--clr-text-muted, #9ca3af);
    margin-top: .3rem;
    display: block;
}
.field-error {
    font-size: .78rem;
    color: #dc2626;
    margin-top: .3rem;
    font-weight: 500;
}

/* ── Toggle group ─────────────────────────────────────────────── */
.toggle-group { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }
.toggle-btn { cursor: pointer; }
.toggle-btn span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem 1rem;
    border: 1.5px solid var(--clr-border, #e5e0d8);
    border-radius: 999px;
    font-size: .84rem;
    font-weight: 500;
    color: var(--clr-text-muted, #6b7280);
    transition: border-color .15s, background .15s, color .15s;
    user-select: none;
}
.toggle-btn:has(input:checked) span {
    border-color: var(--clr-accent, #c9a84c);
    background: #fffbf2;
    color: var(--clr-primary, #1a3c5e);
    font-weight: 600;
}

/* ── Géolocalisation ──────────────────────────────────────────── */
.geo-block {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.geo-status { font-size: .8rem; color: var(--clr-text-muted, #6b7280); }
.geo-status.success { color: #16a34a; }
.geo-status.error   { color: #dc2626; }

/* ── Navigation du tunnel ─────────────────────────────────────── */
.tunnel-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--clr-border, #e5e0d8);
}
.tunnel-nav .btn--outline { min-width: 90px; }

/* ── Loading ──────────────────────────────────────────────────── */
.result-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 3.5rem 0;
    color: var(--clr-text-muted, #6b7280);
}
.result-loading__spinner {
    width: 38px;
    height: 38px;
    border: 3px solid var(--clr-border, #e5e0d8);
    border-top-color: var(--clr-accent, #c9a84c);
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Récap bar ────────────────────────────────────────────────── */
.result-recap-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.result-recap-bar__text {
    font-size: .85rem;
    color: var(--clr-text-muted, #6b7280);
    line-height: 1.5;
}
.result-recap-bar__text strong { color: var(--clr-primary, #1a3c5e); }
.result-recap-bar__badge {
    display: inline-flex;
    align-items: center;
    font-size: .75rem;
    font-weight: 600;
    color: var(--clr-primary, #1a3c5e);
    background: #fffbf2;
    border: 1px solid var(--clr-accent, #c9a84c);
    padding: .25rem .65rem;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Price showcase — zone dominante ─────────────────────────── */
.price-showcase {
    background: var(--clr-primary, #1a3c5e);
    border-radius: var(--radius-lg, 16px);
    padding: 2rem 1.75rem;
    margin-bottom: 1rem;
    position: relative;
    overflow: hidden;
}
.price-showcase::before {
    content: '';
    position: absolute;
    top: -50px; right: -50px;
    width: 200px; height: 200px;
    background: rgba(201,168,76,.07);
    border-radius: 50%;
    pointer-events: none;
}
.price-showcase__grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: 1rem;
    align-items: center;
    position: relative;
}
.price-showcase__side { text-align: center; }
.price-showcase__side-label {
    display: block;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: rgba(255,255,255,.45);
    font-weight: 600;
    margin-bottom: .35rem;
}
.price-showcase__side-value {
    display: block;
    font-size: clamp(1rem, 2.5vw, 1.35rem);
    font-weight: 600;
    color: rgba(255,255,255,.7);
    letter-spacing: -.01em;
}
.price-showcase__center {
    text-align: center;
    padding: .75rem 0;
    border-left: 1px solid rgba(255,255,255,.1);
    border-right: 1px solid rgba(255,255,255,.1);
}
.price-showcase__center-label {
    display: block;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--clr-accent, #c9a84c);
    font-weight: 700;
    margin-bottom: .5rem;
}
.price-showcase__center-value {
    display: block;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    color: #fff;
    letter-spacing: -.03em;
    font-family: 'Playfair Display', Georgia, serif;
    line-height: 1;
}

/* ── Signaux de confiance ─────────────────────────────────────── */
.result-trust-signals {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-bottom: .75rem;
    padding: .6rem 0;
}
.result-trust-signals span {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .75rem;
    color: #16a34a;
    font-weight: 600;
}

/* ── Mention légale compacte ──────────────────────────────────── */
.result-legal-note {
    font-size: .75rem;
    color: var(--clr-text-muted, #9ca3af);
    text-align: center;
    margin: 0 0 1.5rem;
    line-height: 1.5;
}

/* ── CTA Principal ────────────────────────────────────────────── */
.result-cta-primary {
    background: var(--clr-bg, #f8f7f4);
    border: 1.5px solid var(--clr-border, #e5e0d8);
    border-radius: var(--radius-lg, 16px);
    padding: 1.25rem 1.5rem;
    margin-bottom: .75rem;
}
.result-cta-primary__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
}
.result-cta-primary__text {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 0;
}
.result-cta-primary__text strong {
    font-size: .95rem;
    color: var(--clr-primary, #1a3c5e);
    font-weight: 700;
    display: block;
}
.result-cta-primary__text span {
    font-size: .8rem;
    color: var(--clr-text-muted, #6b7280);
    line-height: 1.5;
    display: block;
}
.result-cta-primary .btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
}

/* ── Séparateur "ou" ──────────────────────────────────────────── */
.result-cta-divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: .75rem 0;
}
.result-cta-divider::before,
.result-cta-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--clr-border, #e5e0d8);
}
.result-cta-divider span {
    font-size: .73rem;
    color: var(--clr-text-muted, #9ca3af);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
}

/* ── CTAs secondaires ─────────────────────────────────────────── */
.result-cta-secondary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .65rem;
    margin-bottom: 1.25rem;
}
.result-cta-secondary__btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    font-size: .85rem !important;
    padding: .65rem .9rem !important;
}

/* ── Recommencer ──────────────────────────────────────────────── */
.result-restart { text-align: center; }

/* ── Résultat insuffisant / erreur ────────────────────────────── */
.result-insufficient,
.result-error {
    text-align: center;
    padding: 2.5rem 1rem;
}
.result-insufficient__icon { margin-bottom: 1rem; }
.result-insufficient h3 { color: var(--clr-primary, #1a3c5e); margin-bottom: .75rem; }
.result-insufficient p { color: var(--clr-text-muted, #6b7280); max-width: 440px; margin: 0 auto 1.5rem; line-height: 1.6; font-size: .9rem; }
.result-insufficient__actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }

/* ── Étape 4 : formulaire de conversion ─────────────────────── */
.convert-back {
    background: none;
    border: none;
    color: var(--clr-text-muted, #6b7280);
    font-size: .82rem;
    cursor: pointer;
    padding: 0;
    margin-bottom: 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    transition: color .15s;
}
.convert-back:hover { color: var(--clr-primary, #1a3c5e); }
.convert-back:focus-visible { outline: 2px solid var(--clr-accent); outline-offset: 2px; border-radius: 4px; }

.convert-submit { margin-top: 1.25rem; }
.convert-hint {
    font-size: .75rem;
    color: var(--clr-text-muted, #9ca3af);
    text-align: center;
    margin-top: .5rem;
}
.btn-spinner {
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .6s linear infinite;
    margin-left: .4rem;
    vertical-align: middle;
}

/* ── Succès conversion ────────────────────────────────────────── */
.convert-success {
    text-align: center;
    padding: 2.5rem 1rem;
}
.convert-success__icon { font-size: 3rem; margin-bottom: 1rem; }
.convert-success h3 { color: var(--clr-primary, #1a3c5e); font-size: 1.25rem; margin-bottom: .75rem; }
.convert-success p { color: var(--clr-text-muted, #6b7280); line-height: 1.6; font-size: .9rem; }

/* ── LP Footer ────────────────────────────────────────────────── */
.lp-footer {
    padding: 1.1rem 0;
    background: var(--clr-bg, #f8f7f4);
    border-top: 1px solid var(--clr-border, #e5e0d8);
}
.lp-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: .75rem;
    color: var(--clr-text-muted, #9ca3af);
}
.lp-footer__links {
    display: flex;
    align-items: center;
    gap: .75rem;
}
.lp-footer__links a {
    color: var(--clr-text-muted, #9ca3af);
    text-decoration: none;
    transition: color .15s;
}
.lp-footer__links a:hover { color: var(--clr-primary, #1a3c5e); }

/* ── Focus states ─────────────────────────────────────────────── */
.btn:focus-visible,
.type-card:focus-within,
.toggle-btn:focus-within .toggle-btn span {
    outline: 2px solid var(--clr-accent, #c9a84c);
    outline-offset: 2px;
}

/* ── Responsive 768px ─────────────────────────────────────────── */
@media (max-width: 768px) {
    .tunnel-wrap { padding: 1.5rem 1.25rem; }
    .type-grid { grid-template-columns: repeat(3, 1fr); gap: .45rem; }
    .type-card { padding: .7rem .45rem; }
    .type-card__icon { font-size: 1.2rem; }
    .type-card__label { font-size: .72rem; }
    .form-row { grid-template-columns: 1fr; }
    .price-showcase { padding: 1.5rem 1.1rem; }
    .price-showcase__grid { gap: .6rem; }
    .price-showcase__center-value { font-size: clamp(1.75rem, 7vw, 2.25rem); }
    .price-showcase__side-value { font-size: 1rem; }
    .result-cta-primary__inner { flex-direction: column; align-items: stretch; gap: 1rem; }
    .result-cta-primary .btn { width: 100%; justify-content: center; }
    .result-cta-secondary { grid-template-columns: 1fr; }
    .tunnel-nav { flex-wrap: wrap; }
    .tunnel-nav .btn { width: 100%; justify-content: center; }
    .lp-topbar__zone { display: none; }
    .lp-footer__inner { flex-direction: column; text-align: center; gap: .5rem; }
}

/* ── Responsive 480px ─────────────────────────────────────────── */
@media (max-width: 480px) {
    .section--tunnel { padding: 1.25rem 0 2rem; }
    .tunnel-wrap { border-radius: var(--radius, 10px); padding: 1.25rem 1rem; }
    .type-grid { grid-template-columns: repeat(2, 1fr); }
    .toggle-group { gap: .35rem; }
    .toggle-btn span { padding: .4rem .8rem; font-size: .78rem; }
    .price-showcase__grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .price-showcase__center {
        border: none;
        border-top: 1px solid rgba(255,255,255,.1);
        border-bottom: 1px solid rgba(255,255,255,.1);
        padding: 1rem 0;
        order: -1;
    }
    .price-showcase__side { padding: .25rem 0; }
    .result-trust-signals { gap: .75rem; }
    .result-recap-bar { flex-direction: column; align-items: flex-start; gap: .4rem; }
}