/* =========================================================================
   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; }
}

/* =========================================================================
   MONTÉE EN GAMME : accueil + catalogue (23/10/2026)
   Mouvement uniquement sur transform / opacity (règle qualite.md).
   ========================================================================= */

/* Garde mouvement : l'état initial masqué ne s'applique que si JS est actif ET
   le mouvement autorisé. Sans JS ou en mouvement réduit, .motion-ok est absente
   de <html>, donc tout reste visible. Posée très tôt (script en-tête) : pas de flash. */
html.motion-ok [data-reveal] { opacity: 0; }
html.motion-ok [data-rule]   { transform: scaleX(0); }

/* Ombre teintée vert plutôt que noir pur */
.shadow-aixtras { box-shadow: 0 18px 40px -22px rgba(42, 92, 35, 0.35); }

/* Filet or signature, sous les sur-titres de section */
.rule-gold {
    display: block;
    width: 2.5rem;
    height: 2px;
    background: #C4A034;
    border-radius: 2px;
    transform-origin: left center;
    margin-top: 0.75rem;
}
.rule-gold.is-center { margin-left: auto; margin-right: auto; transform-origin: center; }

/* Hero accueil : crème chaud + filet or en pied (remplace les pastilles) */
.hero-upgraded { background-color: #fcfaf5; position: relative; }
.hero-upgraded::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(196, 160, 52, 0.55), transparent);
}

/* Carte de preuve du hero (exemple de prix) */
.proof-card {
    background: #fff;
    border: 1px solid rgba(196, 160, 52, 0.35);
    border-radius: 1.25rem;
    box-shadow: 0 18px 40px -22px rgba(42, 92, 35, 0.35);
    position: relative;
}
.proof-card::after {
    content: '';
    position: absolute;
    left: 1.5rem; right: 1.5rem; bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(196, 160, 52, 0.6), transparent);
}

/* Lien texte or souligné (second CTA du hero) */
.link-gold {
    color: #8a6f1b;                 /* or assombri : contraste suffisant sur fond crème */
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(196, 160, 52, 0.5);
    text-underline-offset: 4px;
    transition: text-decoration-color 0.2s ease, color 0.2s ease;
}
.link-gold:hover { color: #2A5C23; text-decoration-color: #2A5C23; }

/* Chiffres alignés (prix et stats) */
.tnum { font-variant-numeric: tabular-nums; }

/* ── Catalogue : en-tête de famille ── */
.catalogue-families { display: flex; flex-direction: column; gap: 3.5rem; }
.catalogue-family.is-hidden { display: none; }
.family-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid #eef0ee;
    position: relative;
}
.family-head__filet {
    position: absolute;
    left: 0; bottom: -1px;
    width: 3rem; height: 2px;
    background: #C4A034;
    transform-origin: left center;
}
.family-head__icon {
    width: 3rem; height: 3rem;
    border-radius: 0.9rem;
    background: #f1f6f0;
    color: #2A5C23;
    display: flex; align-items: center; justify-content: center;
    flex: none;
}
.family-head__desc { font-size: 0.8125rem; color: #6b7280; margin-top: 0.125rem; }
.family-count { margin-left: auto; font-size: 0.75rem; color: #6b7280; white-space: nowrap; flex: none; }

/* ── Catalogue : carte allégée + carte populaire ── */
/* Remplace le "generic card look" : plus de bordure grise systématique,
   on s'appuie sur le fond blanc, le rayon et un filet or en pied (signature). */
.product-card {
    background: #fff;
    border-radius: 1rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 24px -18px rgba(42, 92, 35, 0.25);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-card::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(196, 160, 52, 0.45), transparent);
}
.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -22px rgba(42, 92, 35, 0.35);
}
.product-card--popular {
    border: 1px solid #C4A034;
    box-shadow: 0 14px 34px -20px rgba(196, 160, 52, 0.55);
}
.product-card--popular::after { height: 0; }