/*
 * tarifs.css — Styles spécifiques à la page /tarifs TechAstro (Lot 1).
 *
 * Complète aurora.css (tokens, polices, utilitaires HUD).
 * Reproduit fidèlement la maquette Tarifs.dc.html.
 * Classes préfixées ta-t-* pour éviter les collisions.
 * Zéro CDN, zéro inline runtime, CSP self.
 *
 * Sections :
 *   1. Reset & base tarifs (fond clair, override ta-theme)
 *   2. Animations (drift, rise — identiques à vitrine.css)
 *   3. Fond animé (blobs radiaux)
 *   4. Header (glass sticky — repris de vitrine.css)
 *   5. Hero section
 *   6. Flow cards (3 étapes résumées)
 *   7. Blocs principaux (dev / cadence / maintenance)
 *   8. Curseur (slider)
 *   9. Barre récap budget
 *  10. FAQ
 *  11. Footer
 *  12. Flashes
 *  13. Responsive (~860px)
 *
 * @author TechAstro / ModuleTarifs Lot 1
 * @since  2026-06-28
 */

/* ═══════════════════════════════════════════════════════════════════
   1. RESET & BASE TARIFS
   ═══════════════════════════════════════════════════════════════════ */

body.ta-theme {
    background-color: #eaf1fb;
    background-image: none;
    color: var(--c-navy);
    scroll-behavior: smooth;
    overflow-x: hidden;
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-thumb { background: rgba(26,111,255,.25); border-radius: 10px; }
::-webkit-scrollbar-track { background: transparent; }

::selection { background: var(--c-blue); color: #fff; }

.ta-t-page { position: relative; min-height: 100vh; width: 100%; }

a { text-decoration: none; color: inherit; }

/* ═══════════════════════════════════════════════════════════════════
   2. ANIMATIONS
   ═══════════════════════════════════════════════════════════════════ */

@keyframes ta-t-drift {
    0%   { transform: translate(0,0) scale(1); }
    50%  { transform: translate(4%,-3%) scale(1.08); }
    100% { transform: translate(0,0) scale(1); }
}
@keyframes ta-t-drift2 {
    0%   { transform: translate(0,0) scale(1); }
    50%  { transform: translate(-5%,4%) scale(1.12); }
    100% { transform: translate(0,0) scale(1); }
}
@keyframes ta-t-rise {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════
   3. FOND ANIMÉ (blobs)
   ═══════════════════════════════════════════════════════════════════ */

.ta-t-blobs {
    position: fixed; inset: 0; z-index: 0;
    pointer-events: none; overflow: hidden;
}
.ta-t-blob {
    position: absolute; border-radius: 50%;
}
.ta-t-blob--1 {
    top: -20%; left: -12%; width: 55vw; height: 55vw;
    background: radial-gradient(circle, rgba(26,111,255,.34), transparent 62%);
    filter: blur(44px);
    animation: ta-t-drift 18s ease-in-out infinite;
}
.ta-t-blob--2 {
    top: 12%; right: -16%; width: 50vw; height: 50vw;
    background: radial-gradient(circle, rgba(120,90,255,.28), transparent 62%);
    filter: blur(48px);
    animation: ta-t-drift2 22s ease-in-out infinite;
}
.ta-t-blob--3 {
    bottom: -24%; left: 26%; width: 52vw; height: 52vw;
    background: radial-gradient(circle, rgba(60,200,230,.24), transparent 62%);
    filter: blur(52px);
    animation: ta-t-drift 26s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════════
   4. HEADER (glass sticky)
   ═══════════════════════════════════════════════════════════════════ */

.ta-t-header {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 34px;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    background: rgba(234,241,251,.62);
    border-bottom: 1px solid rgba(255,255,255,.6);
}
.ta-t-logo {
    display: flex; align-items: center; gap: 11px;
}
.ta-t-wordmark {
    font-family: var(--font-mono);
    font-size: 13px; letter-spacing: .28em; color: var(--c-navy);
}
.ta-t-nav {
    display: flex; align-items: center; gap: 30px;
}
.ta-t-nav__link {
    font-family: var(--font-mono);
    font-size: 12px; letter-spacing: .06em; color: #5b6b8c;
    transition: color .2s;
}
.ta-t-nav__link:hover,
.ta-t-nav__link--active { color: var(--c-blue); }
.ta-t-nav__cta {
    font-family: var(--font-mono);
    font-size: 12px; letter-spacing: .06em; color: var(--c-blue);
    border: 1px solid rgba(26,111,255,.3); border-radius: 999px;
    padding: 9px 18px; transition: background .2s, color .2s;
}
.ta-t-nav__cta:hover { background: var(--c-blue); color: #fff; }

/* ═══════════════════════════════════════════════════════════════════
   5. HERO
   ═══════════════════════════════════════════════════════════════════ */

.ta-t-hero {
    position: relative; z-index: 1;
    max-width: 880px; margin: 0 auto;
    padding: 80px 34px 56px; text-align: center;
}
.ta-t-hero__badge {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
    color: var(--c-blue);
    background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.85);
    border-radius: 999px; padding: 8px 16px; margin-bottom: 26px;
    animation: ta-t-rise .6s cubic-bezier(.2,.9,.3,1) both;
}
.ta-t-hero__title {
    font-family: var(--font-display); font-weight: 600;
    font-size: 54px; line-height: 1.05; letter-spacing: -.02em;
    margin: 0 auto 20px; max-width: 760px; color: var(--c-navy);
    animation: ta-t-rise .6s cubic-bezier(.2,.9,.3,1) .05s both;
}
.ta-t-hero__grad {
    background: linear-gradient(110deg, var(--c-blue), var(--c-violet));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ta-t-hero__sub {
    font-size: 17px; line-height: 1.65; color: #5b6b8c;
    max-width: 580px; margin: 0 auto;
    animation: ta-t-rise .6s cubic-bezier(.2,.9,.3,1) .1s both;
}

/* ═══════════════════════════════════════════════════════════════════
   6. FLOW CARDS (résumé des 3 temps)
   ═══════════════════════════════════════════════════════════════════ */

.ta-t-flow {
    position: relative; z-index: 1;
    max-width: 1060px; margin: 0 auto;
    padding: 0 34px 24px;
}
.ta-t-flow__grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px;
}
.ta-t-flow__card {
    position: relative;
    background: rgba(255,255,255,.55); backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,.85); border-radius: 22px;
    padding: 26px 24px;
    box-shadow: 0 16px 40px -24px rgba(26,60,140,.4);
}
.ta-t-flow__tag {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
    color: var(--c-blue); margin-bottom: 14px;
}
.ta-t-flow__card-title {
    font-family: var(--font-display); font-weight: 600;
    font-size: 19px; margin: 0 0 8px; color: var(--c-navy);
}
.ta-t-flow__card-desc {
    font-size: 13.5px; line-height: 1.6; color: #5b6b8c; margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   7. BLOCS PRINCIPAUX (3 colonnes)
   ═══════════════════════════════════════════════════════════════════ */

.ta-t-blocks {
    position: relative; z-index: 1;
    max-width: 1160px; margin: 0 auto;
    padding: 48px 34px 28px;
}
.ta-t-blocks__grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 20px; align-items: stretch;
}
.ta-t-block {
    background: rgba(255,255,255,.6); backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.85); border-radius: 24px;
    padding: 32px 30px;
    box-shadow: 0 16px 40px -22px rgba(26,60,140,.4);
    display: flex; flex-direction: column;
}
.ta-t-block__icon {
    display: inline-flex; width: 50px; height: 50px; border-radius: 15px;
    align-items: center; justify-content: center; color: #fff;
    background: linear-gradient(135deg, var(--c-blue), var(--c-violet));
    margin-bottom: 20px;
    box-shadow: 0 12px 28px -10px rgba(26,111,255,.55);
}
.ta-t-block__icon--green {
    background: linear-gradient(135deg, #1f9d4d, var(--c-blue));
    box-shadow: 0 12px 28px -10px rgba(31,157,77,.45);
}
.ta-t-block__step {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
    color: #9aa8c6; margin-bottom: 10px;
}
.ta-t-block__title {
    font-family: var(--font-display); font-weight: 600;
    font-size: 24px; margin: 0 0 6px; color: var(--c-navy);
}
.ta-t-block__desc {
    font-size: 14px; line-height: 1.6; color: #5b6b8c; margin: 0 0 22px;
}
.ta-t-block__from {
    font-family: var(--font-mono); font-size: 13px; color: #9aa8c6; margin-bottom: 6px;
}
.ta-t-block__price {
    display: flex; align-items: baseline; gap: 10px; margin-bottom: 22px;
}
.ta-t-block__price-amount {
    font-family: var(--font-display); font-weight: 600;
    font-size: 46px; line-height: 1; color: var(--c-navy);
}
.ta-t-block__price-amount--blue { color: var(--c-blue); font-size: 40px; }
.ta-t-block__price-amount--green { color: #1f9d4d; }
.ta-t-block__price-unit {
    font-family: var(--font-mono); font-size: 13px; color: #9aa8c6;
}
.ta-t-block__features { margin-top: auto; }
.ta-t-feature {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 7px 0; font-size: 13.5px; color: var(--c-navy);
}
.ta-t-feature__check { color: #1f9d4d; flex: none; margin-top: 1px; }

/* ═══════════════════════════════════════════════════════════════════
   8. CURSEUR (slider cadence)
   ═══════════════════════════════════════════════════════════════════ */

.ta-t-slider-row {
    display: flex; align-items: flex-end;
    justify-content: space-between; margin-bottom: 16px;
}
.ta-t-slider-hours {
    text-align: right;
}
.ta-t-slider-hours__value {
    font-family: var(--font-display); font-weight: 600;
    font-size: 20px; color: var(--c-navy);
}
.ta-t-slider-hours__unit {
    font-family: var(--font-mono); font-size: 10.5px; color: #9aa8c6; letter-spacing: .06em;
}

input[type=range].ta-t-slider {
    width: 100%; height: 6px; cursor: pointer; accent-color: var(--c-blue);
}

.ta-t-slider-bounds {
    display: flex; justify-content: space-between; margin-top: 7px;
    font-family: var(--font-mono); font-size: 10.5px; color: #9aa8c6; letter-spacing: .04em;
}
.ta-t-cadence-badge {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 18px; padding: 13px 16px; border-radius: 14px;
    background: linear-gradient(110deg, rgba(26,111,255,.1), rgba(120,90,255,.1));
    border: 1px solid rgba(26,111,255,.18);
}
.ta-t-cadence-badge__left {
    display: flex; align-items: center; gap: 9px;
}
.ta-t-cadence-badge__dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--c-blue);
}
.ta-t-cadence-badge__name {
    font-family: var(--font-display); font-weight: 600;
    font-size: 14.5px; color: var(--c-navy);
}
.ta-t-cadence-badge__rate {
    font-family: var(--font-mono); font-size: 11.5px; color: #5b6b8c;
}

/* ═══════════════════════════════════════════════════════════════════
   9. BARRE RÉCAP BUDGET
   ═══════════════════════════════════════════════════════════════════ */

.ta-t-recap {
    position: relative; z-index: 1;
    max-width: 1160px; margin: 0 auto;
    padding: 24px 34px 40px;
}
.ta-t-recap__inner {
    position: relative; overflow: hidden;
    background: rgba(255,255,255,.62); backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border: 1px solid rgba(255,255,255,.85); border-radius: 26px;
    padding: 34px 36px;
    box-shadow: 0 20px 50px -26px rgba(26,60,140,.45);
    display: flex; align-items: center;
    justify-content: space-between; gap: 28px; flex-wrap: wrap;
}
.ta-t-recap__info { min-width: 240px; }
.ta-t-recap__label {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
    color: var(--c-blue); margin-bottom: 8px;
}
.ta-t-recap__title {
    font-family: var(--font-display); font-weight: 600;
    font-size: 22px; margin: 0; color: var(--c-navy);
}
.ta-t-recap__title span { color: var(--c-blue); }
.ta-t-recap__sub {
    font-size: 13px; color: #9aa8c6; margin: 8px 0 0;
    font-family: var(--font-mono);
}
.ta-t-recap__total {
    display: flex; align-items: baseline; gap: 10px;
}
.ta-t-recap__total-amount {
    font-family: var(--font-display); font-weight: 700;
    font-size: 52px; line-height: 1;
    background: linear-gradient(110deg, var(--c-blue), var(--c-violet));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ta-t-recap__total-unit {
    font-family: var(--font-mono); font-size: 13px; color: #9aa8c6;
}
.ta-t-recap__cta {
    background: linear-gradient(110deg, var(--c-blue), var(--c-violet));
    color: #fff; border-radius: 14px; border: none; cursor: pointer;
    font-family: var(--font-mono); font-size: 13px; letter-spacing: .08em;
    padding: 16px 28px;
    box-shadow: 0 14px 34px -10px rgba(26,111,255,.6);
    transition: transform .18s, box-shadow .25s;
}
.ta-t-recap__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 44px -10px rgba(26,111,255,.65);
}

/* ═══════════════════════════════════════════════════════════════════
   10. FAQ
   ═══════════════════════════════════════════════════════════════════ */

.ta-t-faq {
    position: relative; z-index: 1;
    max-width: 880px; margin: 0 auto; padding: 24px 34px 80px;
}
.ta-t-faq__title {
    text-align: center; margin-bottom: 28px;
}
.ta-t-faq__title h2 {
    font-family: var(--font-display); font-weight: 600;
    font-size: 30px; letter-spacing: -.01em; margin: 0; color: var(--c-navy);
}
.ta-t-faq__item {
    background: rgba(255,255,255,.55); backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.8); border-radius: 18px;
    padding: 22px 24px; margin-bottom: 14px;
}
.ta-t-faq__q {
    font-family: var(--font-display); font-weight: 600;
    font-size: 16px; margin: 0 0 8px; color: var(--c-navy);
}
.ta-t-faq__a {
    font-size: 14px; line-height: 1.6; color: #5b6b8c; margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   11. FOOTER
   ═══════════════════════════════════════════════════════════════════ */

.ta-t-footer {
    position: relative; z-index: 1;
    border-top: 1px solid rgba(26,60,140,.1);
    padding: 30px 34px;
    display: flex; align-items: center;
    justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.ta-t-footer__brand {
    display: flex; align-items: center; gap: 10px;
}
.ta-t-footer__wordmark {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; color: #7a89aa;
}
.ta-t-footer__copy {
    font-family: var(--font-mono); font-size: 11px; color: #9aa8c6; letter-spacing: .04em;
}
.ta-t-footer__cta {
    font-family: var(--font-mono); font-size: 11px; color: var(--c-blue); letter-spacing: .06em;
}

/* ═══════════════════════════════════════════════════════════════════
   12. FLASHES
   ═══════════════════════════════════════════════════════════════════ */

.ta-t-flashes {
    position: relative; z-index: 10;
    max-width: 880px; margin: 16px auto 0; padding: 0 34px;
}
.ta-t-flash {
    padding: 12px 18px; border-radius: 12px; margin-bottom: 10px;
    font-size: 14px; font-family: var(--font-body);
}
.ta-t-flash--success { background: rgba(40,167,69,.12); color: #1a5c2a; border: 1px solid rgba(40,167,69,.3); }
.ta-t-flash--error   { background: rgba(220,53,69,.12);  color: #7b1c28; border: 1px solid rgba(220,53,69,.3);  }
.ta-t-flash--info    { background: rgba(26,111,255,.1);   color: #0a3399; border: 1px solid rgba(26,111,255,.25); }

/* ═══════════════════════════════════════════════════════════════════
   13. RESPONSIVE (~860px)
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 860px) {
    .ta-t-flow__grid,
    .ta-t-blocks__grid { grid-template-columns: 1fr; }
    .ta-t-hero__title  { font-size: 36px; }
    .ta-t-nav          { gap: 14px; }
    .ta-t-recap__inner { flex-direction: column; align-items: flex-start; }
    .ta-t-recap__total-amount { font-size: 36px; }
}