@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Familjen+Grotesk:wght@400;500;600;700&display=swap');

    :root {
        --accent: #E8014F;
        --accent-hover: #c70144;
        --font-body: 'Plus Jakarta Sans', sans-serif;
        --font-display: 'Familjen Grotesk', sans-serif;
    }

    *, *::before, *::after { box-sizing: border-box; }

    body {
        font-family: var(--font-body);
        background: #fff;
        color: #1a1a2e;
        font-size: 15px;
        line-height: 1.65;
        -webkit-font-smoothing: antialiased;
    }

    h1,h2,h3,h4,h5,h6 { font-family: var(--font-display); line-height: 1.2; }
    p,span,small,.small,.text-muted,.lead,label,input,button { font-family: var(--font-body); }

    .text-accent { color: var(--accent) !important; }
    .bg-accent   { background-color: var(--accent) !important; }
    .fw-black    { font-weight: 700; letter-spacing: -.5px; }

    /* ===== PRODUCT CARDS ===== */
    .product-card-premium {
        border: none; border-radius: 1.5rem !important;
        transition: all .4s cubic-bezier(.165,.84,.44,1);
        background: #fff; height: 100%;
    }
    .product-card-premium:hover { transform: translateY(-8px); box-shadow: 0 24px 50px rgba(0,0,0,.11) !important; }

    /* ===== IMAGE WRAPPER — aspect-ratio carré, cohérent partout ===== */
    .img-wrapper {
        border-radius: 1.2rem !important;
        overflow: hidden;
        aspect-ratio: 1 / 1;
        width: 100%;
    }
    .img-wrapper img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
    .product-card-premium:hover .img-wrapper img { transform: scale(1.08); }
    .img-wrapper-tall { aspect-ratio: 4 / 3; }

    /* ===== BUTTONS ===== */
    .btn-accent {
        background: var(--accent); color: #fff; border: none;
        padding: 10px 24px; border-radius: 50px;
        font-weight: 600; font-family: var(--font-body);
        transition: all .3s;
    }
    .btn-accent:hover { background: var(--accent-hover); color:#fff; transform:scale(1.04); }

    .glass-dark { background:rgba(255,255,255,.05); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.1); }

    /* ===== CAROUSEL ===== */
    .carousel-section-title { font-family:var(--font-display); font-weight:700; letter-spacing:-.5px; }
    .carousel-nav-btn {
        width:40px; height:40px; border-radius:50%;
        border:2px solid #e0e0e0; background:#fff;
        display:flex; align-items:center; justify-content:center;
        cursor:pointer; transition:all .3s; font-size:1rem; flex-shrink:0;
    }
    .carousel-nav-btn:hover { background:var(--accent); border-color:var(--accent); color:#fff; }
    .carousel-nav-btn-dark { border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.1); color:#fff; }
    .carousel-nav-btn-dark:hover { background:var(--accent); border-color:var(--accent); }
    .carousel-dots { display:flex; gap:6px; align-items:center; }
    .carousel-dot { width:8px; height:8px; border-radius:50%; background:#ddd; cursor:pointer; transition:all .3s; }
    .carousel-dot.active { width:20px; border-radius:10px; background:var(--accent); }
    .carousel-dot-dark { background:rgba(255,255,255,.3); }
    .carousel-dot-dark.active { background:var(--accent); }
    .carousel-track-wrapper { overflow:hidden; }
    .carousel-track { display:flex; gap:1.25rem; transition:transform .45s cubic-bezier(.25,.46,.45,.94); will-change:transform; }
    .carousel-slide { flex-shrink:0; }

    /* ===== COUNTDOWN ===== */
    .countdown-box { min-width:64px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); border-radius:1rem; padding:12px 14px; text-align:center; backdrop-filter:blur(6px); }
    .countdown-box .num { font-family:var(--font-display); font-size:1.8rem; font-weight:700; line-height:1; }
    .countdown-box .lbl { font-family:var(--font-body); font-size:.62rem; opacity:.6; text-transform:uppercase; letter-spacing:1.5px; }

    /* ===== OFFRE EXCLUSIVE ===== */
    .exclusive-carousel-wrapper { overflow:hidden; border-radius:1.5rem; }
    .exclusive-carousel-track { display:flex; gap:1rem; transition:transform .45s cubic-bezier(.25,.46,.45,.94); }
    .exclusive-slide { flex-shrink:0; width:calc(50% - .5rem); }
    .card-exclusive { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:1.5rem; padding:.85rem; backdrop-filter:blur(8px); transition:all .35s; }
    .card-exclusive:hover { background:rgba(255,255,255,.14); transform:translateY(-6px); box-shadow:0 20px 40px rgba(0,0,0,.3); }
    .card-exclusive .img-wrapper { aspect-ratio:1/1; border-radius:1rem !important; }
    .card-exclusive .item-name { font-family:var(--font-display); font-weight:600; font-size:.88rem; color:#fff; margin-top:.6rem; margin-bottom:.2rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .card-exclusive .item-ref  { font-family:var(--font-body); font-size:.68rem; color:rgba(255,255,255,.4); margin-bottom:.45rem; }
    .card-exclusive .item-price { font-family:var(--font-display); font-weight:700; color:var(--accent); font-size:.98rem; }
    .card-exclusive .item-old-price { font-family:var(--font-body); font-size:.76rem; color:rgba(255,255,255,.35); text-decoration:line-through; margin-left:.3rem; }

    /* ===== STATS ===== */
    .stat-number { font-family:var(--font-display); font-size:3rem; font-weight:700; line-height:1; color:var(--accent); }

    /* ===== TESTIMONIALS ===== */
    .testimonial-card { border:none; border-radius:1.5rem; padding:1.75rem; background:#f8f9fa; transition:all .3s; }
    .testimonial-card:hover { background:#fff; box-shadow:0 15px 40px rgba(0,0,0,.08); transform:translateY(-4px); }
    .avatar { width:46px; height:46px; border-radius:50%; object-fit:cover; }
    .stars { color:#E8014F; letter-spacing:2px; }

    /* ===== SCROLL REVEAL ===== */
    .reveal { opacity:0; transform:translateY(28px); transition:opacity .6s ease,transform .6s ease; }
    .reveal.visible { opacity:1; transform:translateY(0); }

    /* ===== BADGE ===== */
    .badge-promo { position:absolute; top:12px; right:12px; background:var(--accent); color:#fff; border-radius:50px; padding:3px 10px; font-family:var(--font-body); font-size:.66rem; font-weight:700; z-index:5; }

    /* ===== MARQUEE ===== */
    .marquee-wrapper { overflow:hidden; background:var(--accent); padding:12px 0; }
    .marquee-track { display:flex; gap:3rem; white-space:nowrap; animation:marquee 22s linear infinite; }
    @keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
    .marquee-item { display:flex; align-items:center; gap:.5rem; color:#fff; font-family:var(--font-body); font-weight:600; font-size:.8rem; text-transform:uppercase; letter-spacing:1.5px; }

    /* ===== ÉTAPES ===== */
    .step-number { width:52px; height:52px; border-radius:50%; background:var(--accent); color:#fff; font-family:var(--font-display); font-size:1.3rem; font-weight:700; display:flex; align-items:center; justify-content:center; margin:0 auto 1rem; flex-shrink:0; }
    .step-connector { position:absolute; top:26px; left:calc(50% + 26px); width:calc(100% - 52px); height:2px; background:repeating-linear-gradient(90deg,var(--accent) 0,var(--accent) 6px,transparent 6px,transparent 14px); opacity:.25; }

    /* ===== EDITORIAL ===== */
    .editorial-quote { font-family:var(--font-display); font-size:clamp(1.20rem,2.4vw,1.8rem); font-weight:600; line-height:1.35; letter-spacing:-.3px; color:#1a1a2e; }
    .editorial-quote em { color:var(--accent); font-style:normal; }
    .editorial-tag { display:inline-block; border:1.5px solid #ddd; border-radius:50px; padding:4px 14px; font-size:.74rem; font-weight:600; color:#999; text-transform:uppercase; letter-spacing:1px; }

    /* ===== FAQ ===== */
    .faq-item { border-bottom:1px solid #f0f0f0; padding:1.2rem 0; cursor:pointer; }
    .faq-item:last-child { border-bottom:none; }
    .faq-question { font-family:var(--font-display); font-weight:600; font-size:.98rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; color:#1a1a2e; user-select:none; }
    .faq-icon { width:30px; height:30px; border-radius:50%; background:#f4f4f4; display:flex; align-items:center; justify-content:center; font-size:.82rem; flex-shrink:0; transition:all .3s; }
    .faq-item.open .faq-icon { background:var(--accent); color:#fff; transform:rotate(45deg); }
    .faq-answer { font-family:var(--font-body); font-size:.88rem; color:#666; line-height:1.7; max-height:0; overflow:hidden; transition:max-height .4s ease,padding .3s ease; }
    .faq-item.open .faq-answer { max-height:200px; padding-top:.7rem; }

    /* ===== BLOG ===== */
    .blog-card { border:1px solid #f0f0f0; border-radius:1.5rem; padding:1.75rem; background:#fff; transition:all .3s; height:100%; }
    .blog-card:hover { box-shadow:0 16px 40px rgba(0,0,0,.07); transform:translateY(-4px); border-color:transparent; }
    .blog-tag { display:inline-block; background:#fff0f4; color:var(--accent); border-radius:50px; padding:3px 12px; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; margin-bottom:.75rem; }
    .blog-title { font-family:var(--font-display); font-weight:600; font-size:1.02rem; line-height:1.35; margin-bottom:.7rem; color:#1a1a2e; }
    .blog-excerpt { font-family:var(--font-body); font-size:.87rem; color:#888; line-height:1.65; margin-bottom:.9rem; }
    .blog-meta { font-family:var(--font-body); font-size:.73rem; color:#bbb; }

    /* ===== TABLET 768–1023 ===== */
    @media (min-width: 768px) and (max-width: 1023px) {
        .carousel-track { gap: 1rem !important; }
        .product-card-premium.p-3 { padding: .75rem !important; }
        .product-card-premium h5  { font-size: .95rem !important; }
        .product-card-premium h6  { font-size: .85rem !important; }
    }

    /* ===== MOBILE ===== */
    @media (max-width: 767px) {
        /* Layout */
        .hero-img-col    { display: none !important; }
        .px-5            { padding-left: 1rem !important; padding-right: 1rem !important; }
        .p-5             { padding: 1.5rem 1rem !important; }
        .p-4             { padding: 1rem !important; }
        .p-4.p-md-5      { padding: 1.25rem !important; }
        .mx-2            { margin-left: .5rem !important; margin-right: .5rem !important; }
        .rounded-5       { border-radius: 1.25rem !important; }
        .mb-5            { margin-bottom: 2.5rem !important; }
        .mt-5            { margin-top: 2.5rem !important; }

        /* Typography */
        .display-3, .display-4, .display-5 { font-size: clamp(1.5rem, 7vw, 2.2rem) !important; }
        .editorial-quote { font-size: 1rem !important; }
        .stat-number     { font-size: 2rem; }
        h2.fw-black      { font-size: clamp(1.35rem, 5.5vw, 1.8rem) !important; }

        /* Countdown */
        .countdown-box       { min-width: 52px; padding: 8px 10px; }
        .countdown-box .num  { font-size: 1.35rem; }

        /* Steps */
        .step-connector { display: none !important; }
        .step-number    { width: 44px; height: 44px; font-size: 1.1rem; }

        /* Carousel — 2 cards visible, small but readable */
        .carousel-track { gap: .7rem !important; }
        .carousel-nav-btn { width: 34px; height: 34px; font-size: .85rem; }

        /* Product cards on mobile */
        .product-card-premium { border-radius: 1rem !important; }
        .product-card-premium.p-3  { padding: .6rem !important; }
        .product-card-premium.p-4  { padding: .75rem !important; }
        .product-card-premium h5,
        .product-card-premium h6   { font-size: .82rem !important; }
        .product-card-premium .text-accent,
        .product-card-premium .item-price { font-size: .88rem !important; }
        .product-card-premium p.text-muted { font-size: .67rem !important; }

        /* img-wrapper: keep square aspect-ratio, let width drive height */
        .img-wrapper { border-radius: .75rem !important; }

        /* Cart button smaller on mobile */
        .btn-accent.rounded-circle { padding: 6px !important; font-size: .75rem; }
        .btn-accent.rounded-pill   { padding: 5px 10px !important; font-size: .75rem; }

        /* Exclusive carousel */
        /* .exclusive-slide          { width: calc(52% - .35rem) !important; } */
        .card-exclusive           { padding: .65rem !important; border-radius: 1rem !important; }
        .card-exclusive .img-wrapper { border-radius: .65rem !important; }
        .card-exclusive .item-name   { font-size: .78rem !important; }
        .card-exclusive .item-price  { font-size: .82rem !important; }

        /* Categories grid */
        .col-4.text-center .product-card-premium { padding: .75rem .4rem !important; }
        .col-4.text-center .product-card-premium .bi { font-size: 1.5rem !important; }
        .col-4.text-center .fw-bold { font-size: .72rem !important; }
        .col-4.text-center .text-muted { display: none; }

        /* Blog cards */
        .blog-card { padding: 1.25rem; }

        /* Testimonials */
        .testimonial-card { padding: 1.25rem; }

        /* FAQ */
        .faq-question { font-size: .88rem; }
    }

    @media (max-width: 400px) {
        /* .exclusive-slide { width: calc(58% - .35rem) !important; } */
        .carousel-track  { gap: .5rem !important; }
    }
    #track-vedettes{
        margin-bottom: 2em;
    }
    .cart-icon {
    background: none !important;
    padding: 0;
    border-radius: 0;
    font-size: inherit ;
    color: #E8014F !important
}
.active_card{
    color: #FFF !important;
    background: #00c853  !important
}