/* Confirmation d'envoi animée : enveloppe qui part, puis coche de validation.
   Chargée uniquement par les pages Contact et Cotation. */

.send { display: grid; place-items: center; min-height: 440px; padding: 44px 26px; background: #fff; border: 2px solid var(--brand); border-radius: 22px; box-shadow: 0 18px 44px rgba(var(--brand-rgb), .14); text-align: center; }
.send[hidden] { display: none; }
.send__flight, .send__done { display: none; }
.send.is-flying .send__flight { display: block; }
.send.is-done .send__done { display: block; }

/* ---------- Étape 1 : l'enveloppe ---------- */
.env { position: relative; width: 176px; height: 118px; margin: 26px auto 30px; perspective: 700px; }
.send.is-flying .env { animation: env-fly 1.95s cubic-bezier(.22, 1, .36, 1) forwards; }
@keyframes env-fly {
    0%, 60% { transform: translate(0, 0) scale(1) rotate(0); opacity: 1; }
    68% { transform: translate(0, 12px) scale(.97) rotate(-2deg); opacity: 1; }
    100% { transform: translate(110px, -300px) scale(.5) rotate(16deg); opacity: 0; }
}

.env__back { position: absolute; inset: 0; border-radius: 12px; background: var(--brand-dark); }
.env__letter { position: absolute; left: 15px; right: 15px; bottom: 15px; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 9px; height: 92px; padding: 0 16px; border-radius: 8px; background: #fff; box-shadow: 0 6px 18px rgba(var(--brand-ink-rgb), .22); }
.env__letter i { display: block; height: 7px; border-radius: 4px; background: var(--brand-soft); }
.env__letter i:nth-child(1) { width: 62%; background: var(--brand-tint); }
.env__letter i:nth-child(2) { width: 100%; }
.env__letter i:nth-child(3) { width: 86%; }
.env__letter i:nth-child(4) { width: 46%; }
.send.is-flying .env__letter { animation: env-letter 1.95s cubic-bezier(.22, 1, .36, 1) forwards; }
@keyframes env-letter {
    0%, 12% { transform: translateY(-64px); }
    44%, 100% { transform: translateY(0); }
}

.env__front { position: absolute; inset: 0; z-index: 2; border-radius: 12px; background: var(--brand); clip-path: polygon(0 100%, 0 28%, 50% 70%, 100% 28%, 100% 100%); }
.env__flap { position: absolute; left: 0; right: 0; top: 0; z-index: 3; height: 66%; background: var(--brand-2); border-radius: 12px 12px 0 0; clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top center; backface-visibility: visible; }
.send.is-flying .env__flap { animation: env-flap 1.95s ease-in-out forwards; }
@keyframes env-flap {
    0% { transform: rotateX(0deg); }
    10%, 40% { transform: rotateX(-172deg); }
    58%, 100% { transform: rotateX(0deg); }
}

.env__seal { position: absolute; left: 50%; top: 56%; z-index: 4; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--brand-tint); color: var(--brand-ink); font-family: "Raleway", sans-serif; font-weight: 800; font-size: 11px; letter-spacing: .5px; transform: translate(-50%, -50%) scale(0); }
.send.is-flying .env__seal { animation: env-seal 1.95s cubic-bezier(.34, 1.56, .64, 1) forwards; }
@keyframes env-seal {
    0%, 56% { transform: translate(-50%, -50%) scale(0); }
    66% { transform: translate(-50%, -50%) scale(1.25); }
    74%, 100% { transform: translate(-50%, -50%) scale(1); }
}

.send__label { margin: 0; font-family: "Raleway", sans-serif; font-weight: 700; font-size: 17px; color: var(--brand-ink); }
.send__label::after { content: ""; display: inline-block; width: 1.2em; text-align: left; animation: send-dots 1.4s steps(4) infinite; }
@keyframes send-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75%, 100% { content: "..."; } }

/* ---------- Étape 2 : la confirmation ---------- */
.check { position: relative; width: 112px; height: 112px; margin: 6px auto 24px; }
.check svg { position: relative; z-index: 2; width: 100%; height: 100%; }
.check circle { fill: var(--brand); transform-origin: center; }
.send.is-done .check circle { animation: ck-pop .6s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes ck-pop { from { transform: scale(0); } to { transform: scale(1); } }
.check__mark { fill: none; stroke: #fff; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.send.is-done .check__mark { animation: ck-draw .5s .34s cubic-bezier(.22, 1, .36, 1) forwards; }
@keyframes ck-draw { to { stroke-dashoffset: 0; } }

.check__burst { position: absolute; inset: 0; z-index: 1; }
.check__burst span { position: absolute; left: 50%; top: 50%; width: var(--s); height: var(--s); margin: calc(var(--s) / -2); border-radius: 50%; background: var(--c); opacity: 0; }
.send.is-done .check__burst span { animation: ck-burst .95s .28s cubic-bezier(.22, 1, .36, 1) forwards; }
@keyframes ck-burst {
    0% { transform: translate(0, 0) scale(.3); opacity: 1; }
    100% { transform: translate(var(--x), var(--y)) scale(.2); opacity: 0; }
}

.send__done h2 { margin: 0 0 10px; font-family: "Raleway", sans-serif; font-weight: 800; font-size: clamp(24px, 3vw, 32px); color: var(--brand-ink); }
.send__done p { max-width: 420px; margin: 0 auto 26px; font-size: 16px; line-height: 1.7; color: #4a5568; }
.send__again { cursor: pointer; }
.send__error { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; padding: 13px 18px; border: 1px solid #f3b3ad; border-radius: 12px; background: #fdecea; color: #a3271b; font-weight: 600; text-align: left; }

/* ---------- Si la personne a demandé moins d'animations ---------- */
@media (prefers-reduced-motion: reduce) {
    .send .env, .send .env__letter, .send .env__flap, .send .env__seal,
    .send .check circle, .send .check__mark, .send .check__burst span, .send__label::after { animation: none !important; }
    .check__mark { stroke-dashoffset: 0; }
}

@media (max-width: 575px) { .send { min-height: 380px; padding: 32px 18px; } }