/* Envoi du devis sans quitter la page : etat "envoi", sortie du formulaire, confirmation animee dans la carte.
   Memes courbes que l'accueil ; les boutons (.qs-again, .qs-call) suivent buttons.css. */

.quote-card {
    --qs-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --qs-draw: cubic-bezier(0.65, 0, 0.35, 1);
    scroll-margin-top: 96px;
}

/* ---------- envoi en cours : formulaire fige, filet de progression sous le liseré bleu ---------- */
.quote-card.is-sending .quote-body {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.quote-card.is-sending::after {
    content: "";
    position: absolute;
    inset: 2px 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #245cff 40%, #7aa2ff 60%, transparent);
    background-size: 60% 100%;
    background-repeat: no-repeat;
    animation: qsSweep 1.1s var(--qs-draw) infinite;
    pointer-events: none;
}

@keyframes qsSweep {
    from { background-position: -60% 0; }
    to { background-position: 160% 0; }
}

/* ---------- sortie du formulaire puis confirmation ---------- */
.quote-card.is-leaving > :not(.quote-frame):not(.quote-success) {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.34s var(--qs-ease), transform 0.34s var(--qs-ease);
    pointer-events: none;
}

.quote-card.is-sent > :not(.quote-frame):not(.quote-success) {
    display: none !important;
}

.quote-success {
    padding: 24px 22px 18px;
    text-align: center;
    outline: none;
}

.quote-success > * {
    opacity: 0;
    animation: qsRise 0.6s var(--qs-ease) forwards;
}

.qs-kicker { animation-delay: 0.7s !important; }
.qs-title { animation-delay: 0.78s !important; }
.qs-lead { animation-delay: 0.86s !important; }
.qs-warning { animation-delay: 0.9s !important; }
.qs-sheet { animation-delay: 0.9s !important; }
.qs-flow { animation-delay: 1.35s !important; }
.qs-actions { animation-delay: 1.6s !important; }

@keyframes qsRise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

/* pastille : cercle trace, coche tracee, halos, eclats */
.quote-success .qs-badge {
    position: relative;
    width: 58px;
    height: 58px;
    margin: 0 auto 12px;
    color: #16a34a;
    opacity: 1;
    animation: none;
}

.qs-badge svg {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.qs-ring {
    fill: rgba(22, 163, 74, 0.1);
    stroke-dasharray: 145;
    stroke-dashoffset: 145;
    animation: qsDraw 0.7s 0.1s var(--qs-draw) forwards;
}

.qs-check {
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation: qsDraw 0.45s 0.65s var(--qs-draw) forwards;
}

@keyframes qsDraw {
    to { stroke-dashoffset: 0; }
}

.qs-halo {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(22, 163, 74, 0.5);
    opacity: 0;
    animation: qsHalo 1.3s 0.95s var(--qs-ease) forwards;
}

.qs-halo-late {
    animation-delay: 1.2s;
}

@keyframes qsHalo {
    from { opacity: 0.9; transform: scale(0.9); }
    to { opacity: 0; transform: scale(2.1); }
}

.qs-badge b {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7px;
    height: 7px;
    margin: -3.5px 0 0 -3.5px;
    border-radius: 50%;
    background: #245cff;
    opacity: 0;
    animation: qsBurst 0.9s 0.95s var(--qs-ease) forwards;
}

.qs-badge b:nth-of-type(3n + 2) { background: #16a34a; width: 5px; height: 5px; }
.qs-badge b:nth-of-type(3n) { background: #f2b705; width: 6px; height: 6px; }

@keyframes qsBurst {
    0% { opacity: 1; transform: rotate(var(--a)) translateY(-38px) scale(0.5); }
    100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(-74px - var(--d))) scale(1); }
}

/* textes */
.quote-success .qs-title:focus { outline: none; }

.qs-kicker {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin: 0 0 10px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #0759b5;
}

.qs-kicker time {
    padding: 3px 8px;
    border: 1px solid rgba(36, 92, 255, 0.22);
    border-radius: 4px;
    background: rgba(36, 92, 255, 0.05);
    font-weight: 500;
    letter-spacing: 0.06em;
    color: #475569;
}

.qs-title {
    margin: 0 0 6px;
    font-size: clamp(1.15rem, 1rem + 0.8vw, 1.4rem);
    line-height: 1.2;
    color: #0b1220;
    text-wrap: balance;
}

.qs-lead {
    margin: 0 auto;
    max-width: 38ch;
    font-size: 0.86rem;
    line-height: 1.5;
    color: #475569;
}

.qs-lead strong {
    color: #0b1220;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.qs-warning {
    margin: 14px 0 0;
    padding: 10px 14px;
    border-radius: 6px;
    border: 1px solid #fed7aa;
    background: #fff7ed;
    color: #7c2d12;
    font-size: 0.85rem;
    line-height: 1.5;
}

/* fiche de demande : grille de cellules, filet de balayage a l'apparition */
.qs-sheet {
    position: relative;
    margin: 16px 0 0;
    border: 1px solid rgba(191, 204, 220, 0.95);
    border-radius: 6px;
    background: #ffffff;
    text-align: left;
    overflow: hidden;
}

.qs-sheet::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -46px;
    height: 46px;
    background: linear-gradient(180deg, transparent, rgba(36, 92, 255, 0.14) 85%, rgba(36, 92, 255, 0.5) 100%);
    border-bottom: 1px solid rgba(36, 92, 255, 0.55);
    opacity: 0;
    pointer-events: none;
    animation: qsScan 1.15s 1.05s var(--qs-draw) forwards;
}

@keyframes qsScan {
    0% { opacity: 1; top: -46px; }
    85% { opacity: 1; }
    100% { opacity: 0; top: 100%; }
}

.qs-sheet-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 7px 12px;
    border-bottom: 1px solid rgba(191, 204, 220, 0.95);
    background: #f4f7fb;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #475569;
}

.qs-sheet-head .qs-ref {
    margin-left: auto;
    padding: 2px 7px;
    border: 1px solid rgba(36, 92, 255, 0.25);
    border-radius: 4px;
    background: rgba(36, 92, 255, 0.06);
    font-weight: 500;
    letter-spacing: 0.06em;
    color: #0759b5;
}

.qs-sheet-head::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #16a34a;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18);
}

.qs-recap {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    background: #ffffff;
    gap: 0;
}

.qs-recap div {
    min-width: 0;
    padding: 7px 12px 8px;
    border-bottom: 1px solid rgba(191, 204, 220, 0.6);
    background: #ffffff;
    opacity: 0;
    animation: qsCell 0.45s calc(0.95s + var(--i, 0) * 0.07s) var(--qs-ease) forwards;
}

.qs-recap .is-left { border-right: 1px solid rgba(191, 204, 220, 0.6); }
.qs-recap div:last-child { border-bottom: 0; }
.qs-recap .is-wide { grid-column: 1 / -1; }

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

.qs-recap dt {
    margin: 0 0 2px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #64748b;
}

.qs-recap dd {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: 0.84rem;
    font-weight: 500;
    line-height: 1.3;
    color: #0b1220;
    overflow-wrap: anywhere;
}

.qs-dot {
    flex: none;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--c);
    box-shadow: inset 0 0 0 1px rgba(7, 18, 37, 0.22);
}

/* suivi de dossier : Recu, Analyse, Conseil, Devis */
.qs-flow {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.qs-flow::before,
.qs-flow::after {
    content: "";
    position: absolute;
    left: 12.5%;
    right: 12.5%;
    top: 9px;
    height: 2px;
    background: rgba(36, 92, 255, 0.16);
}

.qs-flow::after {
    right: auto;
    width: 25%;
    background: #245cff;
    transform-origin: left;
    transform: scaleX(0);
    animation: qsLine 0.8s 1.5s var(--qs-draw) forwards;
}

@keyframes qsLine {
    to { transform: scaleX(1); }
}

.qs-flow li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 0 4px;
    text-align: center;
}

.qs-node {
    position: relative;
    z-index: 1;
    width: 20px;
    height: 20px;
    margin-bottom: 8px;
    border-radius: 50%;
    border: 2px solid rgba(36, 92, 255, 0.3);
    background: #ffffff;
    box-sizing: border-box;
}

.qs-flow b {
    font-size: 0.86rem;
    color: #0b1220;
}

.qs-flow span {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.64rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
}

.qs-flow .is-done .qs-node {
    border-color: #245cff;
    background: #245cff;
}

.qs-flow .is-done .qs-node::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 5px;
    height: 9px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.qs-flow .is-active .qs-node {
    border-color: #245cff;
    animation: qsPulse 1.8s 2.1s ease-out infinite;
}

.qs-flow .is-active .qs-node::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: #245cff;
}

.qs-flow .is-active span { color: #0759b5; }

@keyframes qsPulse {
    0% { box-shadow: 0 0 0 0 rgba(36, 92, 255, 0.45); }
    80%, 100% { box-shadow: 0 0 0 9px rgba(36, 92, 255, 0); }
}

/* actions */
.qs-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
}

/* compte a rebours avant remise a zero du formulaire */
.qs-reset {
    position: relative;
    margin: 14px 0 0;
    padding-top: 10px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.64rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
    opacity: 0;
    animation: qsRise 0.5s 1.9s var(--qs-ease) forwards;
}

.qs-reset b {
    display: inline-block;
    min-width: 1.4ch;
    color: #0759b5;
    font-variant-numeric: tabular-nums;
}

.qs-reset-bar {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: rgba(36, 92, 255, 0.14);
    overflow: hidden;
}

.qs-reset-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #245cff;
    transform-origin: left;
    animation: qsCountdown 10s linear forwards;
}

.quote-success.is-paused .qs-reset-bar::after { animation-play-state: paused; }

@keyframes qsCountdown {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

.quote-success.is-closing {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease, transform 0.4s var(--qs-ease);
}

@media (max-width: 560px) {
    .quote-success { padding: 20px 16px 16px; }
    .qs-flow b { font-size: 0.8rem; }
    .qs-flow span { font-size: 0.58rem; }
    .qs-actions > * { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .quote-card.is-sending::after { animation: none; background-position: 50% 0; }
    .quote-card.is-leaving > :not(.quote-frame):not(.quote-success) { transition: none; }
    .quote-success > *,
    .qs-ring,
    .qs-check,
    .qs-flow::after,
    .qs-recap div,
    .qs-sheet {
        animation-duration: 0.01s !important;
        animation-delay: 0s !important;
    }
    .qs-halo,
    .qs-badge b,
    .qs-sheet::after { display: none; }
    .qs-flow .is-active .qs-node { animation: none; }
}

/* ---------- fluidite du formulaire (accueil et contact : composant commun) ---------- */

/* boutons d'action : replies en douceur (Retour au premier ecran, Continuer / Envoyer a la derniere etape),
   en ligne comme en colonne ; les transitions ne jouent qu'apres le premier affichage (.is-ready) pour ne rien
   animer au chargement */
.quote-form .quote-actions :is(.step-prev, .step-next, .step-submit) {
    overflow: hidden;
    white-space: nowrap;
    max-width: 100%;
    max-height: 80px;
}

.quote-form .quote-actions :is(.step-prev, .step-next, .step-submit).is-collapsed {
    flex-grow: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: -5px !important;
    border-width: 0 !important;
    opacity: 0;
    box-shadow: none !important;
    pointer-events: none;
}

.quote-card.is-ready .quote-form .quote-actions :is(.step-prev, .step-next, .step-submit) {
    transition:
        max-width 0.42s var(--qs-ease),
        max-height 0.42s var(--qs-ease),
        min-height 0.42s var(--qs-ease),
        flex-grow 0.42s var(--qs-ease),
        padding 0.42s var(--qs-ease),
        margin 0.42s var(--qs-ease),
        border-width 0.42s var(--qs-ease),
        opacity 0.28s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.24s ease,
        transform 0.24s var(--qs-ease) !important;
}

/* reponse immediate au clic sur les choix (couleurs, listes, onglets) */
.quote-card.is-ready :is(.color-swatches button, .quote-tab, .field input, .field select, .field textarea) {
    transition-property: background-color, border-color, color, box-shadow, transform, opacity;
    transition-duration: 0.22s;
    transition-timing-function: var(--qs-ease);
}

@media (prefers-reduced-motion: reduce) {
    .quote-card.is-ready .quote-form .quote-actions :is(.step-prev, .step-next, .step-submit) { transition: none !important; }
}

/* l'ecran d'etape (glissement existant) demarre juste apres le debut du changement de hauteur :
   le bloc a deja gagne de la place quand le contenu devient visible */
.quote-card.is-ready .quote-form .quote-step.active {
    animation-delay: 0.1s;
}

/* telephone : formulaire sans animation (glissement d'etape, apparition des blocs, fausse progression, pastilles, filet lumineux, replis de boutons). Le panneau d'envoi et de confirmation garde ses animations.
   Les etats changent d'un coup : moins de travail pour le telephone, plus de clignotement ni de saccades pendant la saisie. */
@media (max-width: 700px), (hover: none) {
    .quote-card::before,
    .quote-card .quote-choice,
    .quote-card .quote-choice *,
    .quote-card .quote-chosen,
    .quote-card .quote-forms,
    .quote-card .quote-forms *,
    .quote-card .quote-forms *::before,
    .quote-card .quote-forms *::after,
    .quote-card.is-ready .quote-form .quote-actions :is(.step-prev, .step-next, .step-submit) {
        animation: none !important;
        transition: none !important;
    }
}