/* =========================================================================
   aixtras-public.css — Styles utilitaires partagés (pages publiques)
   ========================================================================= */

/* ── Global ── */
html { scroll-behavior: smooth; }

/* ══════════════════════════════════════════════════════
   HERO PATTERNS — une classe par page
   (le .hero-pattern de base = variante or/crème, la plus courante)
══════════════════════════════════════════════════════ */

/* Or/crème — index, catalogue, application, reset, mentions… */
.hero-pattern,
.hero-pattern-gold {
    background-color: #fcfaf5;
    background-image: radial-gradient(rgba(196, 160, 52, 0.1) 1px, transparent 1px);
    background-size: 24px 24px;
}

/* Vert doux — comment-ca-marche, faq */
.hero-pattern-green {
    background-color: #fcfaf5;
    background-image: radial-gradient(rgba(42, 92, 35, 0.05) 1px, transparent 1px);
    background-size: 24px 24px;
}

/* Vert doux login */
.hero-pattern-login {
    background-color: #fcfaf5;
    background-image: radial-gradient(rgba(42, 92, 35, 0.08) 1px, transparent 1px);
    background-size: 24px 24px;
}

/* Vert foncé — devenir-partenaire ← CRITIQUE */
.hero-pattern-dark {
    background-color: #1e4519;
    background-image: radial-gradient(rgba(196, 160, 52, 0.15) 1px, transparent 1px);
    background-size: 24px 24px;
}

/* ── Catalogue : cartes produits et filtres ── */
.card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04);
    border-color: #C4A034;
}
.product-card {
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.product-card.hidden {
    display: none !important;
}
.filter-btn.active {
    background-color: #2A5C23 !important;
    color: #ffffff !important;
    border-color: #2A5C23 !important;
}

/* ── Comment-ça-marche : ligne de processus ── */
@media (min-width: 1024px) {
    .process-line::after {
        content: '';
        position: absolute;
        top: 50px;
        left: 50%;
        width: 100%;
        height: 2px;
        border-top: 2px dashed #e5e7eb;
        z-index: -1;
    }
    .step-card:last-child .process-line::after { display: none; }
}

/* ── FAQ : accordéon ── */
.faq-answer {
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}
.faq-item.is-open .faq-answer { max-height: 500px; opacity: 1; }
.faq-icon { transition: transform 0.3s ease; }
.faq-item.is-open .faq-icon { transform: rotate(180deg); }

/* ── Login : onglets & bannière forfait ── */
.tab-content { display: none; animation: fadeInUp 0.4s ease-out; }
.tab-content.active { display: block; }
.forfait-banner {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid #86efac;
    animation: slideDown 0.5s ease-out;
}

/* ── Animations partagées ── */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeInUp 0.6s ease-out; }

/* ── Catalogue : skeleton loader ── */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: 0.5rem;
}
@keyframes skeleton-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}