/* ================================================================
   indexstyles.css — PDF Recap · Page principale SaaS
   Palette : Bleu marine + Teal (inspiré nouveau logo)
   Hero 100% CSS responsive — aucun transform:scale()
   ================================================================ */

/* ── Variables ───────────────────────────────────────────────── */
:root {
    /* Bleu principal (inchangé Tailwind primary) */
    --blue:        #2563eb;
    --blue-dark:   #1d4ed8;
    --blue-light:  #eff6ff;
    --navy:        #0f172a;
    --navy-soft:   #1e293b;

    /* Teal — couleur accent inspirée du logo */
    --teal:        #0891b2;
    --teal-dark:   #0e7490;
    --teal-light:  #e0f2fe;
    --teal-mid:    #7dd3fc;

    /* Texte & surfaces */
    --ink:         #0f172a;
    --ink-soft:    #1e293b;
    --body:        #374151;
    --muted:       #6b7280;
    --muted-light: #9ca3af;
    --border:      #e2e8f0;
    --border-soft: #f1f5f9;
    --bg:          #f8fafc;
    --white:       #ffffff;

    /* Ombres */
    --shadow-sm:   0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
    --shadow-md:   0 4px 16px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.05);
    --shadow-lg:   0 12px 40px rgba(15,23,42,.10), 0 4px 8px rgba(15,23,42,.06);
    --shadow-teal: 0 4px 20px rgba(8,145,178,.2);

    /* Rayons */
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   16px;
    --radius-xl:   20px;
}

/* ── Base ────────────────────────────────────────────────────── */

/* Compense la navbar fixe (h-16 = 4rem) lors des navigations par ancre */
html { scroll-padding-top: 4rem; }

body { font-family: 'Inter', sans-serif; }

/* ── Scrollbar ───────────────────────────────────────────────── */
.custom-scrollbar::-webkit-scrollbar       { width: 5px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--muted-light); }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* ================================================================
   ANIMATIONS
   ================================================================ */

@keyframes slideUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0);    }
}
.animate-slide-up { animation: slideUp 0.3s cubic-bezier(.16,1,.3,1) forwards; }

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.animate-fade-in { animation: fadeIn 0.35s ease forwards; }

@keyframes spin { to { transform: rotate(360deg); } }
.animate-spin { animation: spin .8s linear infinite; }

@keyframes blob {
    0%   { transform: translate(0,0)        scale(1);    }
    33%  { transform: translate(20px,-35px)  scale(1.06); }
    66%  { transform: translate(-14px,14px)  scale(0.95); }
    100% { transform: translate(0,0)        scale(1);    }
}
.animate-blob         { animation: blob 10s ease-in-out infinite; }
.animation-delay-2000 { animation-delay: 2s; }
.animation-delay-4000 { animation-delay: 4s; }

/* ================================================================
   HERO SECTION
   ================================================================ */

.hero-section {
    position: relative;
    width: 100%;
    min-height: calc(100vh - 4rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    overflow: hidden;
    padding-top:    clamp(1.5rem, 4vh, 3rem);
    padding-bottom: clamp(1.5rem, 4vh, 3rem);
}

.hero-blobs {
    position: absolute; inset: 0;
    pointer-events: none; overflow: hidden; z-index: 0;
}
.blob {
    position: absolute; border-radius: 50%;
    filter: blur(72px); mix-blend-mode: multiply;
}
.blob-1 { width: 22rem; height: 22rem; background: #bae6fd; opacity: .2;  top: 20%;    left: 15%;  animation: blob 10s ease-in-out infinite; }
.blob-2 { width: 20rem; height: 20rem; background: #c7d2fe; opacity: .15; top: 28%;    right: 18%; animation: blob 10s ease-in-out 2s infinite; }
.blob-3 { width: 18rem; height: 18rem; background: #a5f3fc; opacity: .15; bottom: 18%; left: 48%;  animation: blob 10s ease-in-out 4s infinite; }

.hero-inner {
    position: relative; z-index: 1;
    width: 100%; max-width: 48rem;
    padding-left: 1rem; padding-right: 1rem;
    display: flex; flex-direction: column; align-items: center;
    gap: clamp(.5rem, 1vh, .9rem);
}

/* Badge */
.hero-badge {
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--white);
    border: 1px solid #bae6fd;
    border-radius: 999px;
    padding: .35rem .9rem;
    font-size: .75rem; font-weight: 600; color: var(--teal-dark);
    box-shadow: var(--shadow-sm); white-space: nowrap;
}
.hero-badge-dot { position: relative; display: inline-flex; width: .5rem; height: .5rem; }
.hero-badge-ping {
    position: absolute; inset: 0; border-radius: 50%;
    background: var(--teal); opacity: .7;
    animation: ping 1.5s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }
.hero-badge-dot::after {
    content: ''; position: relative; display: inline-flex;
    width: .5rem; height: .5rem; border-radius: 50%; background: var(--teal);
}

/* Titre — teal accent, fluide */
.hero-title {
    font-size: clamp(1.5rem, 2.8vw, 2.5rem);
    font-weight: 800; letter-spacing: -.03em; line-height: 1.2;
    color: var(--navy); text-align: center; margin: 0;
}
.hero-title-accent {
    display: inline;
    background: linear-gradient(135deg, var(--teal), var(--blue));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* Sous-titre */
.hero-subtitle {
    font-size: clamp(.875rem, 1.4vw, 1rem);
    color: var(--muted); text-align: center;
    line-height: 1.65; font-weight: 500; margin: 0; max-width: 36rem;
}

/* Upload box */
.upload-box {
    position: relative; width: 100%; max-width: 48rem;
    height: clamp(300px, 44vh, 520px);
    background: var(--white);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(226,232,240,.8);
    overflow: hidden;
    box-shadow:
        0 4px 6px -1px rgba(0,0,0,.05),
        0 20px 60px -10px rgba(8,145,178,.08),
        0 0 0 1px rgba(255,255,255,.8);
}

.upload-icon-wrap {
    width: 3.5rem; height: 3.5rem;
    background: var(--teal-light);
    border-radius: var(--radius-lg);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

/* Trust badges */
.hero-trust { display: flex; align-items: center; justify-content: center; gap: .75rem; flex-wrap: wrap; }
.trust-item { display: inline-flex; align-items: center; gap: .4rem; font-size: .75rem; font-weight: 600; color: var(--muted-light); white-space: nowrap; }
.trust-sep  { width: 1px; height: .75rem; background: var(--border); flex-shrink: 0; }

/* Drop zone drag-over */
#drop-zone.drag-over { background: var(--teal-light); border-color: var(--teal) !important; }

/* ================================================================
   FICHIERS (renderFiles)
   ================================================================ */

.file-item {
    background: var(--white); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: .7rem .85rem;
    display: flex; align-items: center; gap: .75rem;
    transition: border-color .15s, box-shadow .15s;
}
.file-item:hover { border-color: var(--teal-mid); box-shadow: var(--shadow-sm); }
.file-item-handle { cursor: grab; color: var(--muted-light); transition: color .15s; }
.file-item-handle:hover  { color: var(--muted); }
.file-item-handle:active { cursor: grabbing; }
.file-item-icon { width: 2rem; height: 2rem; background: #fef2f2; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.file-item-name { font-size: .8125rem; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-item-size { font-size: .72rem; color: var(--muted); margin-top: .05rem; }
.file-item-badge { width: 1.4rem; height: 1.4rem; background: var(--border-soft); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .68rem; font-weight: 700; color: var(--muted); flex-shrink: 0; }
.file-item-delete { padding: .3rem; border-radius: var(--radius-sm); color: var(--muted-light); transition: color .15s, background .15s; background: transparent; border: none; cursor: pointer; display: flex; align-items: center; }
.file-item-delete:hover { color: #dc2626; background: #fef2f2; }

/* ================================================================
   SECTION "COMMENT ÇA MARCHE ?"
   Nouveau design : fond navy avec grandes étapes numérotées
   ================================================================ */

.how-section {
    background: #f0fdfe; /* teal-50 : clairement différent du pricing navy */
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
}

/* Pas de séparateur en haut */
.how-section::before { display: none; }

.how-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 1;
}

/* Numéro large en arrière-plan — effet typographique */
.how-step-bg-num {
    font-size: 7rem;
    font-weight: 900;
    line-height: 1;
    color: rgba(8,145,178,.07);
    position: absolute;
    top: -1rem;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    user-select: none;
    letter-spacing: -.05em;
}

/* Icône de l'étape */
.how-step-icon {
    width: 3.5rem; height: 3.5rem;
    border-radius: var(--radius-lg);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 1.25rem;
    position: relative;
    z-index: 1;
}
.how-step-icon.s1 { background: rgba(8,145,178,.15); color: var(--teal-dark); }
.how-step-icon.s2 { background: rgba(8,145,178,.15); color: var(--teal-dark); }
.how-step-icon.s3 { background: rgba(8,145,178,.15); color: var(--teal-dark); }

/* Numéro de badge */
.how-step-num {
    width: 1.75rem; height: 1.75rem;
    border-radius: 50%;
    font-size: .72rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    position: absolute;
    top: -.4rem; right: -.4rem;
}
.how-step-icon.s1 .how-step-num { background: var(--teal);   color: #fff; }
.how-step-icon.s2 .how-step-num { background: var(--teal);   color: #fff; }
.how-step-icon.s3 .how-step-num { background: var(--teal);   color: #fff; }

/* Titre et texte de l'étape */
.how-step-title { font-size: 1.05rem; font-weight: 700; color: #0f172a; margin-bottom: .5rem; }
.how-step-desc  { font-size: .875rem; color: #475569; line-height: 1.65; max-width: 18rem; }

/* Connecteur entre étapes */
.how-connector {
    display: none;
}
@media (min-width: 768px) {
    .how-connector {
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(8,145,178,.35);
        flex-shrink: 0;
        margin-top: 1.75rem;
    }
}

/* ================================================================
   SECTION "LA MEILLEURE SOLUTION"
   Nouveau design : deux colonnes, fond clair, cartes avec accent teal
   ================================================================ */

.features-section {
    background: var(--bg);
    padding: 6rem 0;
    position: relative;
}

/* Pas de trait entre sections */
.features-section::before { display: none; }

.feature-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 1.75rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .25s, transform .25s, border-color .25s;
    position: relative;
    overflow: hidden;
}
/* Accent coloré en haut de chaque card */
.feature-card::before {
    content: '';
    position: absolute;
    top: 0; left: 1.75rem; right: 1.75rem;
    height: 2px;
    border-radius: 0 0 2px 2px;
    opacity: 0;
    transition: opacity .25s;
}
.feature-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: #bae6fd; }
.feature-card:hover::before { opacity: 1; }

/* Couleurs d'accent par position */
.feature-card:nth-child(1)::before,
.feature-card:nth-child(4)::before { background: linear-gradient(90deg, var(--teal), var(--blue)); }
.feature-card:nth-child(2)::before,
.feature-card:nth-child(5)::before { background: linear-gradient(90deg, var(--blue), #6366f1); }
.feature-card:nth-child(3)::before,
.feature-card:nth-child(6)::before { background: linear-gradient(90deg, #6366f1, var(--teal)); }

.feature-icon-wrap {
    width: 2.75rem; height: 2.75rem;
    background: var(--teal-light);
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    color: var(--teal-dark);
    margin-bottom: 1rem;
    transition: background .2s, transform .2s;
}
.feature-card:hover .feature-icon-wrap { background: #cffafe; transform: scale(1.08); }

/* Alternance de couleur d'icône */
/* Toutes les icônes feature : teal uniforme (surcharges nth-child supprimées) */

/* ================================================================
   PRICING
   ================================================================ */

.pricing-card {
    background: var(--navy-soft);
    border: 1px solid #334155;
    border-radius: var(--radius-xl);
    padding: 2rem;
    display: flex; flex-direction: column; height: 100%;
    transition: transform .25s, box-shadow .25s, border-color .25s;
}
.pricing-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.25); border-color: #475569; }

.pricing-card.popular {
    background: linear-gradient(135deg, var(--teal-dark), var(--teal));
    border: none; transform: scale(1.04); z-index: 2;
    box-shadow: 0 12px 40px rgba(8,145,178,.4);
}
.pricing-card.popular:hover { transform: scale(1.06) translateY(-3px); }

.billing-switch { position: relative; display: inline-block; width: 52px; height: 28px; }
.billing-switch input { opacity: 0; width: 0; height: 0; }
.billing-slider {
    position: absolute; cursor: pointer; inset: 0;
    background: #334155; border-radius: 999px;
    transition: background .3s; border: 1px solid #475569;
}
.billing-slider::before {
    content: ''; position: absolute;
    width: 20px; height: 20px; left: 3px; top: 3px;
    background: var(--white); border-radius: 50%;
    transition: transform .3s cubic-bezier(.34,1.56,.64,1);
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.billing-switch input:checked + .billing-slider { background: var(--teal); border-color: var(--teal); }
.billing-switch input:checked + .billing-slider::before { transform: translateX(24px); }

.plan-feature { display: flex; align-items: flex-start; gap: .6rem; font-size: .875rem; color: #cbd5e1; margin-bottom: .7rem; line-height: 1.5; }
.popular .plan-feature { color: rgba(255,255,255,.92); }
.plan-feature-check { width: 1rem; height: 1rem; flex-shrink: 0; margin-top: .15rem; color: var(--teal-mid); }
.popular .plan-feature-check { color: rgba(255,255,255,.9); }
.plan-divider { border: none; border-top: 1px solid rgba(255,255,255,.08); margin: 1.25rem 0; }
.popular .plan-divider { border-color: rgba(255,255,255,.25); }

/* ================================================================
   FAQ
   ================================================================ */

.faq-item { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--white); overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.faq-item:hover { border-color: #a5f3fc; }
.faq-item.open  { border-color: var(--teal-mid); box-shadow: 0 2px 12px rgba(8,145,178,.1); }
.faq-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 1.2rem 1.5rem; background: transparent; border: none; cursor: pointer; text-align: left; gap: 1.5rem; }
.faq-question { font-size: 1rem; font-weight: 600; color: var(--ink); line-height: 1.5; transition: color .15s; }
.faq-item.open .faq-question { color: var(--teal-dark); }
.faq-icon-wrap { width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--border-soft); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--muted); transition: background .2s, transform .3s cubic-bezier(.34,1.56,.64,1); }
.faq-item.open .faq-icon-wrap { background: var(--teal-light); color: var(--teal-dark); transform: rotate(180deg); }
.faq-answer-wrapper { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .35s cubic-bezier(.4,0,.2,1), opacity .25s ease; }
.faq-answer { padding: 0 1.5rem 1.25rem; font-size: .9375rem; color: var(--body); line-height: 1.75; border-top: 1px solid var(--border-soft); padding-top: 1rem; }

/* ================================================================
   QUOTA & SUCCÈS (injectés par main.js)
   ================================================================ */

.quota-bar { width: 100%; height: .3rem; background: var(--border); border-radius: 999px; overflow: hidden; }
.quota-bar-fill { height: 100%; border-radius: 999px; transition: width .8s cubic-bezier(.4,0,.2,1); }

.success-modal { background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%); border: 1px solid #a7f3d0; border-radius: var(--radius-xl); padding: 2rem; text-align: center; animation: slideUp .35s cubic-bezier(.16,1,.3,1) forwards; }
.success-icon { width: 3.5rem; height: 3.5rem; background: #d1fae5; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; box-shadow: 0 0 0 6px #ecfdf5; }
.success-meta { background: var(--white); border: 1px solid #d1fae5; border-radius: var(--radius-md); padding: .9rem 1.1rem; margin: 1rem 0 1.25rem; text-align: left; font-size: .875rem; }
.success-meta-row { display: flex; justify-content: space-between; align-items: center; padding: .28rem 0; border-bottom: 1px solid #f0fdf4; }
.success-meta-row:last-child { border-bottom: none; }
.success-meta-label { color: var(--muted); }
.success-meta-value { font-weight: 600; color: var(--ink); }
.success-meta-value.expiry { color: #d97706; }

/* ================================================================
   RESPONSIVE
   ================================================================ */

@media (max-width: 1024px) {
    .pricing-card.popular { transform: scale(1); }
    .pricing-card.popular:hover { transform: translateY(-4px); }
}
@media (max-width: 768px) {
    .upload-box { height: clamp(280px, 48vh, 440px); }
    .hero-inner  { gap: .75rem; }
    .how-section, .features-section { padding: 4rem 0; }
}
@media (max-width: 480px) {
    .hero-section  { padding-top: 1.5rem; padding-bottom: 1.5rem; }
    .hero-inner    { gap: .65rem; padding-left: .75rem; padding-right: .75rem; }
    .upload-box    { height: clamp(260px, 52vh, 380px); }
    .trust-sep     { display: none; }
    .hero-trust    { gap: .65rem; }
    .trust-item    { font-size: .7rem; }
    .how-step-bg-num { font-size: 5rem; }
}
@media (max-width: 360px) {
    .upload-box { height: clamp(240px, 55vh, 340px); }
}