/* ============================================================
   BOURGOGNE LOGISTIQUE – devis.css
   Style: Industrial-Blueprint · Panneau à coins coupés · Multi-Step
   Mobile-first · Vanilla CSS · BEM · No framework
   ============================================================ */

/* ==============================================================
   PAGE WRAPPER
   ============================================================== */
.devis-page {
    /* fond légèrement différencié pour la page devis */
    background-color: var(--brand);
}

.devis-main {
    position: relative;
    padding-block: var(--spacing-xl) calc(var(--spacing-xl) + var(--spacing-lg));
    overflow: hidden;
    min-height: calc(100dvh - var(--header-h));
}

/* ==============================================================
   DÉCORATION DE FOND
   ============================================================== */
.devis-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.devis-bg__dots {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
}

.devis-bg__glow {
    position: absolute;
    border-radius: 50%;
    will-change: transform;
}

.devis-bg__glow--1 {
    width: clamp(280px, 45vw, 640px);
    height: clamp(280px, 45vw, 640px);
    top: -10%;
    right: -8%;
    border: 1px solid rgba(28, 156, 63, 0.16);
    box-shadow:
        0 0 0 48px rgba(28, 156, 63, 0.02),
        0 0 0 96px rgba(28, 156, 63, 0.015);
}

.devis-bg__glow--2 {
    width: clamp(200px, 35vw, 480px);
    height: clamp(200px, 35vw, 480px);
    bottom: 5%;
    left: -5%;
    border: 1px solid rgba(148, 163, 184, 0.1);
}

/* ==============================================================
   EN-TÊTE DE PAGE
   ============================================================== */
.devis-header {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-bottom: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

.devis-header__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: clamp(0.6875rem, 1.2vw, 0.8125rem);
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

.devis-header__eyebrow svg {
    flex-shrink: 0;
}

.devis-header__title {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 6vw, 4.5rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.08;
    color: var(--text);
}

.devis-header__title-accent {
    color: var(--accent);
}

.devis-header__desc {
    font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
    color: var(--text-muted);
    max-width: 52ch;
    text-align: center;
    line-height: 1.7;
}

/* ==============================================================
   LAYOUT WRAPPER : carte + colonne réassurance
   ============================================================== */
.devis-wrapper {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    align-items: start;
}

@media (min-width: 1024px) {
    .devis-wrapper {
        grid-template-columns: 1fr 300px;
        gap: var(--spacing-lg) var(--spacing-md);
    }
}

/* ==============================================================
   CARTE GLASSMORPHISM
   ============================================================== */
.devis-card {
    position: relative;
    background-color: rgba(30, 41, 59, 0.88);
    border: 1px solid var(--line);
    clip-path: var(--clip-panel);
    /* Axes dissociés : sur un écran de 360px, 1,5rem de chaque côté
       amputait la largeur utile des champs. */
    padding-block: clamp(1.25rem, 4vw, 2.5rem);
    padding-inline: clamp(1rem, 4vw, 2.5rem);
    /* Empêche le débordement dans la cellule grid */
    min-width: 0;
    width: 100%;
}

.devis-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(var(--accent), var(--accent)) top right / 20px 2px no-repeat,
        linear-gradient(var(--accent), var(--accent)) top right / 2px 20px no-repeat,
        linear-gradient(var(--accent), var(--accent)) bottom left / 20px 2px no-repeat,
        linear-gradient(var(--accent), var(--accent)) bottom left / 2px 20px no-repeat;
    opacity: 0.6;
}

/* ==============================================================
   BARRE DE PROGRESSION
   ============================================================== */
.devis-progress {
    position: relative;
    margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.devis-progress__track {
    position: absolute;
    top: 18px;
    left: 0;
    right: 0;
    height: 3px;
    background-color: rgba(226, 232, 240, 0.1);
    border-radius: 999px;
    z-index: 0;
}

.devis-progress__fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), #38d36f);
    width: 0%;
    transition: width 0.5s var(--transition-smooth);
    box-shadow: 0 0 10px rgba(28, 156, 63, 0.5);
    will-change: width;
}

.devis-progress__steps {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.devis-progress__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

.devis-progress__step-dot {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--brand-light);
    border: 2px solid rgba(226, 232, 240, 0.15);
    font-size: 0.875rem;
    font-weight: 700;
    font-family: var(--font-display);
    color: var(--text-muted);
    transition:
        background-color 0.35s var(--transition-smooth),
        border-color 0.35s var(--transition-smooth),
        color 0.35s var(--transition-smooth),
        box-shadow 0.35s var(--transition-smooth);
}

.devis-progress__step-check {
    position: absolute;
    opacity: 0;
    transition: opacity 0.3s var(--transition-smooth);
    color: #fff;
}

.devis-progress__step-num {
    transition: opacity 0.3s var(--transition-smooth);
}

/* État actif */
.devis-progress__step.is-active .devis-progress__step-dot {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(28, 156, 63, 0.22);
}

/* État complété */
.devis-progress__step.is-done .devis-progress__step-dot {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.devis-progress__step.is-done .devis-progress__step-check {
    opacity: 1;
}

.devis-progress__step.is-done .devis-progress__step-num {
    opacity: 0;
}

.devis-progress__step-label {
    font-size: clamp(0.6875rem, 1.2vw, 0.8125rem);
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: color 0.3s var(--transition-smooth);
}

.devis-progress__step.is-active .devis-progress__step-label {
    color: var(--text);
}

.devis-progress__step.is-done .devis-progress__step-label {
    color: var(--accent);
}

/* ==============================================================
   ÉTAPES DU FORMULAIRE (transitions de glissement)
   ============================================================== */
.devis-step {
    border: none;
    padding: 0;
    min-width: 0;
    /* État de départ pour l'animation */
    opacity: 1;
    transform: translateX(0);
    transition:
        opacity 0.4s var(--transition-smooth),
        transform 0.4s var(--transition-smooth);
}

/* État masqué (étape inactive) */
.devis-step[hidden] {
    display: none;
}

/* Classe d'animation : entre depuis la droite */
.devis-step--enter-right {
    animation: stepEnterRight 0.42s var(--transition-smooth) forwards;
}

/* Classe d'animation : entre depuis la gauche */
.devis-step--enter-left {
    animation: stepEnterLeft 0.42s var(--transition-smooth) forwards;
}

@keyframes stepEnterRight {
    from {
        opacity: 0;
        transform: translateX(48px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes stepEnterLeft {
    from {
        opacity: 0;
        transform: translateX(-48px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.devis-step__legend {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
    margin-bottom: 0.5rem;
    float: none; /* reset browser default */
    width: 100%;
}

.devis-step__legend-num {
    font-size: clamp(0.6875rem, 1.1vw, 0.8125rem);
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.1em;
    opacity: 0.85;
}

.devis-step__desc {
    font-size: clamp(0.875rem, 1.3vw, 0.9375rem);
    color: var(--text-muted);
    margin-bottom: var(--spacing-md);
    line-height: 1.6;
}

/* ==============================================================
   RADIO CARDS
   ============================================================== */
.radio-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
    gap: 0.875rem;
    margin-bottom: var(--spacing-md);
}

.radio-card {
    cursor: pointer;
}

.radio-card__input {
    /* Masqué visuellement mais accessible */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.radio-card__body {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 1.125rem 1rem;
    background-color: rgba(15, 23, 42, 0.55);
    border: 1.5px solid var(--line);
    clip-path: var(--clip-panel-sm);
    transition:
        border-color 0.25s var(--transition-smooth),
        background-color 0.25s var(--transition-smooth),
        transform 0.22s var(--transition-smooth);
    cursor: pointer;
    /* Touch-friendly */
    min-height: 120px;
    height: 100%;
}

/* Repères d'angle sur les coins non coupés */
.radio-card__body::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(var(--accent), var(--accent)) top right / 12px 2px no-repeat,
        linear-gradient(var(--accent), var(--accent)) top right / 2px 12px no-repeat,
        linear-gradient(var(--accent), var(--accent)) bottom left / 12px 2px no-repeat,
        linear-gradient(var(--accent), var(--accent)) bottom left / 2px 12px no-repeat;
    opacity: 0;
    transition: opacity 0.3s var(--transition-smooth);
}

.radio-card__body:hover {
    border-color: rgba(28, 156, 63, 0.48);
    background-color: rgba(28, 156, 63, 0.07);
    transform: translateY(-2px);
}

.radio-card__body:hover::after {
    opacity: 1;
}

.radio-card__input:focus-visible + .radio-card__body {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* État sélectionné */
.radio-card__input:checked + .radio-card__body {
    border-color: var(--accent);
    background-color: rgba(28, 156, 63, 0.1);
}

.radio-card__input:checked + .radio-card__body::after {
    opacity: 1;
}

.radio-card__icon {
    color: var(--text-muted);
    transition: color 0.25s var(--transition-smooth);
    flex-shrink: 0;
}

.radio-card__input:checked + .radio-card__body .radio-card__icon {
    color: var(--accent);
}

.radio-card__title {
    font-family: var(--font-display);
    font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
}

.radio-card__sub {
    font-size: clamp(0.75rem, 1.1vw, 0.8125rem);
    color: var(--text-muted);
    line-height: 1.4;
}

/* Badge check (coin supérieur droit) */
.radio-card__check {
    position: absolute;
    top: 0.625rem;
    right: 0.625rem;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: 0;
    transform: scale(0.5);
    transition:
        opacity 0.25s var(--transition-smooth),
        transform 0.25s var(--transition-smooth);
}

.radio-card__input:checked + .radio-card__body .radio-card__check {
    opacity: 1;
    transform: scale(1);
}

/* ==============================================================
   CHAMPS DE FORMULAIRE
   ============================================================== */
.devis-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-bottom: var(--spacing-sm);
}

.devis-field:last-of-type {
    margin-bottom: 0;
}

/* Ligne à deux colonnes (prénom + nom) */
.devis-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

@media (min-width: 540px) {
    .devis-row {
        grid-template-columns: 1fr 1fr;
    }

    .devis-row .devis-field {
        margin-bottom: 0;
    }
}

.devis-field__label {
    font-size: clamp(0.8125rem, 1.2vw, 0.875rem);
    font-weight: 600;
    color: var(--text);
    letter-spacing: 0.01em;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.devis-field__required {
    color: var(--accent);
    font-size: 0.9em;
}

.devis-field__input-wrap {
    position: relative;
}

/* Input & Select – styles communs */
.devis-field__input,
.devis-field__select,
.devis-field__textarea {
    width: 100%;
    padding: 0.8125rem 1rem;
    background-color: rgba(15, 23, 42, 0.6);
    border: 1.5px solid var(--line);
    clip-path: var(--clip-panel-sm);
    color: var(--text);
    font-family: var(--font-body);
    font-size: clamp(0.875rem, 1.3vw, 0.9375rem);
    line-height: 1.5;
    /* Touch-friendly */
    min-height: 48px;
    appearance: none;
    -webkit-appearance: none;
    transition:
        border-color 0.22s var(--transition-smooth),
        background-color 0.22s var(--transition-smooth),
        box-shadow 0.22s var(--transition-smooth);
    outline: none;
}

.devis-field__input::placeholder,
.devis-field__textarea::placeholder {
    color: rgba(148, 163, 184, 0.8);
}

/* Focus */
.devis-field__input:focus,
.devis-field__select:focus,
.devis-field__textarea:focus {
    border-color: var(--accent);
    background-color: rgba(15, 23, 42, 0.85);
}

/* Validation en temps réel : valide */
.devis-field__input.is-valid,
.devis-field__select.is-valid,
.devis-field__textarea.is-valid {
    border-color: var(--accent);
    background-color: rgba(28, 156, 63, 0.05);
}

/* Validation en temps réel : erreur */
.devis-field__input.is-error,
.devis-field__select.is-error,
.devis-field__textarea.is-error {
    border-color: #ef4444;
    background-color: rgba(239, 68, 68, 0.05);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

/* Sélects : flèche personnalisée */
.devis-field__select {
    padding-right: 2.75rem;
    cursor: pointer;
}

.devis-field__select option {
    background-color: var(--brand-light);
    color: var(--text);
}

.devis-field__select-arrow {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--text-muted);
}

/* Input date */
.devis-field__input--date {
    color-scheme: dark;
}

/* Textarea */
.devis-field__textarea {
    resize: vertical;
    min-height: 110px;
    padding-bottom: 2rem; /* espace pour le compteur */
}

/* Compteur de caractères */
.devis-field__count {
    position: absolute;
    bottom: 0.5rem;
    right: 0.875rem;
    font-size: 0.6875rem;
    color: var(--text-muted);
    pointer-events: none;
}

/* Hint */
.devis-field__hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Messages d'erreur */
.devis-field__error {
    font-size: 0.75rem;
    color: #f87171;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    line-height: 1.4;
    animation: errorFadeIn 0.22s var(--transition-smooth);
}

.devis-field__error[hidden] {
    display: none;
}

.devis-field__error::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='7' cy='7' r='6' stroke='%23f87171' stroke-width='1.5'/%3E%3Cpath d='M7 4v3.5M7 9.5v.5' stroke='%23f87171' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

@keyframes errorFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==============================================================
   RÉCAPITULATIF ÉTAPE 3
   ============================================================== */
.devis-recap {
    margin-bottom: var(--spacing-md);
    padding: 1.125rem 1.25rem;
    background-color: rgba(28, 156, 63, 0.07);
    border: 1px solid rgba(28, 156, 63, 0.22);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    animation: recapEnter 0.38s var(--transition-smooth);
}

.devis-recap[hidden] {
    display: none;
}

@keyframes recapEnter {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.devis-recap__header {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--accent);
    margin-bottom: 0.5rem;
}

.devis-recap__sentence {
    font-size: clamp(0.9375rem, 1.4vw, 1rem);
    color: var(--text);
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.devis-recap__sentence strong {
    font-weight: 700;
    color: var(--text);
}

.devis-recap__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.devis-recap__tag {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    background-color: rgba(226, 232, 240, 0.07);
    border: 1px solid rgba(226, 232, 240, 0.12);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ==============================================================
   CHECKBOX RGPD
   ============================================================== */
.devis-field--checkbox {
    margin-top: 0.25rem;
}

.devis-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
}

.devis-checkbox__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.devis-checkbox__box {
    position: relative;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    clip-path: var(--clip-panel-xs);
    border: 1.5px solid rgba(226, 232, 240, 0.2);
    background-color: rgba(15, 23, 42, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    transition:
        border-color 0.22s var(--transition-smooth),
        background-color 0.22s var(--transition-smooth),
        box-shadow 0.22s var(--transition-smooth);
}

.devis-checkbox__check {
    color: #fff;
    opacity: 0;
    transform: scale(0.5);
    transition:
        opacity 0.22s var(--transition-smooth),
        transform 0.22s var(--transition-smooth);
}

.devis-checkbox__input:checked + .devis-checkbox__box {
    background-color: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(28, 156, 63, 0.18);
}

.devis-checkbox__input:checked + .devis-checkbox__box .devis-checkbox__check {
    opacity: 1;
    transform: scale(1);
}

.devis-checkbox__input:focus-visible + .devis-checkbox__box {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.devis-checkbox__label {
    font-size: clamp(0.8125rem, 1.2vw, 0.875rem);
    color: var(--text-muted);
    line-height: 1.55;
}

/* Lien politique de confidentialité — hors du <label> (un lien imbriqué
   dans un label cocherait la case au clic). Aligné sous le texte du
   consentement : largeur de la case + gouttière. */
.devis-checkbox__policy {
    margin-top: 0.375rem;
    padding-left: calc(22px + 0.75rem);
    font-size: clamp(0.8125rem, 1.2vw, 0.875rem);
    line-height: 1.55;
}

.devis-checkbox__link {
    display: inline-flex;
    align-items: center;
    /* Cible tactile confortable sans casser le rythme typographique */
    min-height: 32px;
    color: var(--accent-text);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s var(--transition-smooth);
}

.devis-checkbox__link:hover,
.devis-checkbox__link:focus-visible {
    color: #4ade80;
}

@media (pointer: coarse) {
    .devis-checkbox__link {
        min-height: 44px;
    }
}

/* ==============================================================
   BANDEAU RÉASSURANCE ÉCONOMIES TRANSPORT
   ============================================================== */
.devis-reassurance {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1rem 1.25rem;
    margin-bottom: var(--spacing-md);
    background: rgba(28, 156, 63, 0.08);
    border: 1px solid rgba(28, 156, 63, 0.25);
    border-radius: var(--radius);
    color: var(--text);
}

.devis-reassurance svg {
    flex-shrink: 0;
    color: var(--accent);
    margin-top: 0.125rem;
}

.devis-reassurance p {
    font-size: 0.875rem;
    line-height: 1.55;
    margin: 0;
    color: var(--text-muted);
}

.devis-reassurance strong {
    color: var(--text);
}

/* ==============================================================
   BOUTONS DE NAVIGATION ENTRE ÉTAPES
   ============================================================== */
/* Mobile-first : boutons empilés pleine largeur (« Suivant » d'abord,
   d'où column-reverse : il reste le premier au regard comme au doigt),
   puis alignés en ligne dès qu'il y a la place. */
.devis-nav {
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 0.875rem;
    margin-top: var(--spacing-md);
}

.devis-nav__btn {
    flex-shrink: 0;
    justify-content: center;
}

@media (min-width: 480px) {
    .devis-nav {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .devis-nav--right {
        justify-content: flex-end;
    }
}

.devis-nav__btn--back {
    gap: 0.375rem;
}

/* ==============================================================
   BOUTON ENVOI : spinner de chargement
   ============================================================== */
.devis-submit {
    position: relative;
    min-width: 200px;
    justify-content: center;
}

.devis-submit__label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition:
        opacity 0.25s var(--transition-smooth),
        transform 0.25s var(--transition-smooth);
}

.devis-submit__spinner {
    display: none;
    align-items: center;
    gap: 0.625rem;
}

.devis-submit.is-loading .devis-submit__label {
    display: none;
}

.devis-submit.is-loading .devis-submit__spinner {
    display: inline-flex;
}

.devis-submit__spin {
    animation: spinnerRotate 0.9s linear infinite;
    will-change: transform;
    flex-shrink: 0;
}

@keyframes spinnerRotate {
    to {
        transform: rotate(360deg);
    }
}

/* ==============================================================
   ÉTAT SUCCESS
   ============================================================== */
.devis-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    text-align: center;
    padding: var(--spacing-lg) var(--spacing-md);
    animation: successEnter 0.55s var(--transition-smooth);
}

.devis-success[hidden] {
    display: none;
}

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

.devis-success__icon {
    animation: successIconPulse 0.7s var(--transition-smooth) 0.15s both;
}

@keyframes successIconPulse {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    70% {
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.devis-success__title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text);
}

.devis-success__desc {
    font-size: clamp(0.9375rem, 1.5vw, 1rem);
    color: var(--text-muted);
    max-width: 48ch;
    line-height: 1.7;
}

.devis-success__desc strong {
    color: var(--text);
    font-weight: 600;
}

.devis-success__cta {
    margin-top: var(--spacing-xs);
}

/* ==============================================================
   BLOC RÉASSURANCE LATÉRAL
   ============================================================== */
.devis-trust {
    position: relative;
    z-index: 1;
}

/* Ce bloc était masqué (`display: none`) sous 1024px : les visiteurs
   mobiles — l'essentiel du trafic — ne voyaient donc jamais « Réponse
   sous 24h » ni « Devis sans engagement », juste avant de valider leur
   demande. Il est désormais affiché partout, en grille compacte sous le
   formulaire sur petit écran, puis en liste verticale dans la colonne
   latérale à partir de 1024px. */
.devis-trust__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 0.25rem;
}

.devis-trust__item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid rgba(226, 232, 240, 0.07);
    clip-path: var(--clip-panel-sm);
    transition: background-color 0.22s var(--transition-smooth);
}

/* ≥ 1024px : colonne latérale — liste continue, séparateurs fins */
@media (min-width: 1024px) {
    .devis-trust__list {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .devis-trust__item {
        padding: 1.125rem 1rem;
        border: none;
        border-bottom: 1px solid rgba(226, 232, 240, 0.07);
        clip-path: none;
        border-radius: var(--radius);
    }

    .devis-trust__item:last-child {
        border-bottom: none;
    }
}

.devis-trust__item:hover {
    background-color: rgba(226, 232, 240, 0.03);
}

.devis-trust__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    clip-path: var(--clip-panel-sm);
    background-color: transparent;
    border: 1.5px solid var(--line-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
}

.devis-trust__title {
    display: block;
    font-size: clamp(0.8125rem, 1.2vw, 0.9375rem);
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.125rem;
}

.devis-trust__desc {
    font-size: clamp(0.75rem, 1.1vw, 0.8125rem);
    color: var(--text-muted);
    line-height: 1.5;
}

/* ==============================================================
   MEDIA QUERIES COMPLÉMENTAIRES
   ============================================================== */

/* Tablette et au-delà */
@media (min-width: 640px) {
    .radio-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 900px) {
    .radio-cards {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Le bloc `@media (max-width: 480px)` qui vivait ici est devenu inutile :
   la pile des boutons est désormais le défaut mobile (voir .devis-nav) et
   le padding de .devis-card part directement de sa borne basse fluide. */