/* =========================================
   STYLE PRODUIT V9 (NO STOCK + BUTTON CONTRAST)
   ========================================= */

/* --- ANIMATIONS & GLOBAL --- */
@keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-15px); } 100% { transform: translateY(0px); } }
@keyframes shimmer { 0% { left: -100%; } 100% { left: 100%; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes zoomIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes rotateBadge { 0% { transform: rotate(-10deg) scale(0.9); } 50% { transform: rotate(10deg) scale(1.1); } 100% { transform: rotate(-10deg) scale(0.9); } }

.anim-fade-up { animation: fadeInUp 0.8s ease-out forwards; opacity: 0; }
.anim-zoom-in { animation: zoomIn 0.6s ease-out forwards; opacity: 0; }
.anim-rotate-in { animation: rotateBadge 5s ease-in-out infinite; }
.delay-1 { animation-delay: 0.1s; } .delay-2 { animation-delay: 0.2s; } .delay-3 { animation-delay: 0.3s; } .delay-4 { animation-delay: 0.4s; } .delay-5 { animation-delay: 0.5s; }

/* --- LAYOUT --- */
.saas-wrapper { max-width: 1200px; margin: 0 auto; padding-top: 120px; padding-bottom: 80px; padding-left: 12px; padding-right: 12px; }
.saas-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: stretch; margin-bottom: 60px; }

/* --- VISUEL --- */
.sticky-wrapper { position: sticky; top: 50px; }
.visual-card-3d {
    position: relative; background: #fff; border: 1px solid #E5E7EB; border-radius: 30px; padding: 15px;
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.08); transition: transform 0.3s;
}
.visual-card-3d:hover { transform: perspective(1000px) rotateX(1deg) rotateY(-1deg); }
.product-img-live { width: 100%; border-radius: 12px; display: block; }
.floating-anim { animation: float 6s ease-in-out infinite; }

.promo-sticker {
    position: absolute; top: -20px; right: -20px; background: #EF4444; color: white;
    width: 75px; height: 75px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.2rem; box-shadow: 0 10px 20px rgba(239, 68, 68, 0.4); transform: rotate(15deg);
}

.social-proof-animated { display: flex; align-items: center; gap: 15px; margin-top: 25px; justify-content: center; }
.avatars-group { display: flex; padding-left: 10px; }
.av-circle { width: 40px; height: 40px; border-radius: 50%; border: 3px solid #fff; margin-left: -12px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); background-color: #eee; }
.count-badge-social { background: #111; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; }
.proof-text { font-size: 0.9rem; font-weight: 600; color: #4B5563; }

/* --- INTERFACE --- */
.tags-wrapper { display: flex; gap: 10px; margin-bottom: 20px; }
.tag-pill { padding: 6px 12px; border-radius: 6px; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; }
.gradient-blue { background: #E0F2FE; color: #0369A1; }
.gradient-red { background: #FEE2E2; color: #991B1B; }
.product-title-lg { font-size: 2.8rem; font-weight: 800; line-height: 1.1; margin: 0 0 20px; color: #111; }
.meta-live { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid #E5E7EB; }
.price-live-wrap { display: flex; flex: 1 1 auto; min-width: 0; flex-direction: column; gap: 6px; }
.price-live { font-size: 2.2rem; font-weight: 700; color: #111; line-height: 1; }
.price-legal-note {
    font-size: 0.82rem;
    line-height: 1.35;
    color: #475569;
    font-weight: 600;
    max-width: 360px;
}
.rating-live { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; cursor: pointer; white-space: nowrap; }
.review-count-text { white-space: nowrap; }
.star-rating { color: #F59E0B; } 

.desc-glass { font-size: 1.1rem; line-height: 1.6; color: #374151; margin-bottom: 30px; background: #ffffff; padding: 20px; border-radius: 12px; }

.action-zone-premium { background: #fff; border: 1px solid #E5E7EB; border-radius: 20px; padding: 30px; box-shadow: 0 20px 40px -10px rgba(0,0,0,0.05); }
.selector-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.label-qty { font-weight: 700; font-size: 1.1rem; }
/* --- QTY SELECTOR : FLAT & MODERN (Le standard propre) --- */
.qty-stepper-neon { display: flex; border: 1px solid #E5E7EB; border-radius: 12px; overflow: hidden; width: 150px; background: #fff; }
.qty-stepper-neon button { width: 50px; height: 45px; background: transparent; border: none; color: #6B7280; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
.qty-stepper-neon button:hover { background: #F3F4F6; color: #111; }
.qty-stepper-neon input { flex: 1; border: none; border-left: 1px solid #E5E7EB; border-right: 1px solid #E5E7EB; text-align: center; font-weight: 600; font-size: 1.1rem; color: #111; outline: none; width: 100%; }

/* Masquer les flèches du navigateur */
.qty-stepper-neon input::-webkit-outer-spin-button, .qty-stepper-neon input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-stepper-neon input[type=number] { -moz-appearance: textfield; }

/* BOUTON AVEC CONTRASTE AMÉLIORÉ */
.btn-shimmer-effect {
    width: 100%; background: #000; color: #fff; border: none; padding: 20px; border-radius: 12px;
    font-size: 1.2rem; font-weight: 700; cursor: pointer; position: relative; overflow: hidden;
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); display: block;
}
.btn-shimmer-effect:hover {
    transform: translateY(-4px) scale(1.01); /* Léger grossissement */
    box-shadow: 0 15px 35px rgba(0,0,0,0.4); /* Ombre plus forte et sombre */
    background: #111; /* Reste très noir pour le contraste max avec le blanc */
}
.btn-content { display: flex; justify-content: center; align-items: center; gap: 12px; position: relative; z-index: 2; }
.shimmer-line {
    position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.2), transparent);
    transform: skewX(-25deg); animation: shimmer 3s infinite;
}

.purchase-terms-note {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    margin: 14px 0 0;
    color: #047857;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}
.purchase-terms-note i {
    margin-top: 2px;
    flex-shrink: 0;
}

/* --- ICONS PAIEMENT FIX --- */
.trust-icons-row {
    margin-top: 25px;
    display: flex;
    flex-wrap: wrap; /* Permet de passer à la ligne sur petit écran */
    gap: 12px;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: #64748B;
}

/* Force la police FontAwesome pour éviter les carrés vides */
.trust-icons-row i.fa-brands {
    font-family: "Font Awesome 6 Brands";
    font-style: normal;
    transition: transform 0.2s ease;
}

/* Couleurs officielles au survol (Optionnel, rend le tout plus vivant) */
.trust-icons-row .fa-cc-visa:hover { color: #1A1F71; }
.trust-icons-row .fa-cc-mastercard:hover { color: #EB001B; }
.trust-icons-row .fa-cc-amex:hover { color: #006FCF; }
.trust-icons-row .fa-apple-pay:hover { color: #000; }
.trust-icons-row .fa-paypal { color: #00457C; } /* PayPal toujours coloré pour confiance */

/* Séparateur vertical discret */
.secure-separator {
    display: inline-block;
    width: 1px;
    height: 24px;
    background-color: #E2E8F0;
    margin: 0 10px;
}

/* Label de sécurité */
.secure-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: #10B981; /* Vert confiance */
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.secure-label i {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

/* Responsive : sur mobile, on met le texte en dessous pour éviter que ce soit trop serré */
@media (max-width: 480px) {
    .trust-icons-row {
        gap: 15px;
    }
    .secure-separator { display: none; }
    .secure-label {
        width: 100%;
        justify-content: center;
        margin-top: 5px;
    }
}

/* --- ONGLETS --- */
.tabs-modern-container { margin-top: 60px; border-top: 1px solid #E5E7EB; padding-top: 60px; }
.tabs-nav-ios { display: flex; justify-content: center; gap: 15px; margin-bottom: 40px; flex-wrap: wrap; }
/* --- STYLE DES BOUTONS ONGLETS (Desktop & Mobile) --- */
.tab-btn {
    background: #F3F4F6;       /* Fond gris clair pour dire "je suis un bouton" */
    border: 1px solid #E5E7EB; /* Une bordure fine pour la définition */
    font-size: 1rem;
    font-weight: 600;
    color: #4B5563;            /* Texte gris foncé (plus lisible) */
    padding: 12px 25px;
    cursor: pointer;
    border-radius: 50px;       /* Forme arrondie "pilule" */
    transition: all 0.2s ease; /* Animation fluide */
    
    /* Pour centrer le contenu parfaitement */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Effet au survol (uniquement quand on passe la souris dessus) */
.tab-btn:hover {
    background: #E5E7EB;       /* Devient un peu plus foncé */
    color: #111;               /* Le texte devient noir */
    transform: translateY(-2px); /* Le bouton remonte légèrement */
}

/* --- ÉTAT ACTIF (Le bouton sélectionné) --- */
.tab-btn.active {
    color: #fff;
    background: #000;          /* Noir profond */
    border-color: #000;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15); /* Ombre portée */
    transform: translateY(0);  /* Reste fixe */
}

/* --- FIX SPÉCIFIQUE MOBILE --- */
/* Ce bloc s'assure que sur mobile, le texte n'est pas trop gros dans les boutons */
@media (max-width: 600px) {
    .tab-btn {
        padding: 12px 5px;     /* Moins d'espace sur les côtés */
        font-size: 0.85rem;    /* Texte un peu plus petit */
        background: #F9FAFB;   /* Fond très légèrement plus clair sur mobile */
    }
}
.tab-btn.active { color: #fff; background: #000; box-shadow: 0 4px 15px rgba(0,0,0,0.15); }
.bubble-count { background: #E5E7EB; font-size: 0.75rem; padding: 2px 8px; border-radius: 12px; margin-left: 6px; vertical-align: middle; color: #000; }

.tab-pane { display: none; animation: fadeInUp 0.4s ease; }
.tab-pane.active { display: block; }
.content-box-glass { max-width: 800px; margin: 0 auto; font-size: 1.1rem; line-height: 1.8; color: #374151; }

/* GARANTIE */
.guarantee-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; max-width: 1000px; margin: 0 auto; }
.guarantee-card {
    background: #F9FAFB; padding: 30px; border-radius: 16px; text-align: center; border: 1px solid #E5E7EB;
    transition: 0.3s; display: flex; flex-direction: column; align-items: center;
}
.guarantee-card:hover { transform: translateY(-5px); background: #fff; box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
.g-icon { color: #000; margin-bottom: 15px; }
.guarantee-card .g-icon {font-size: 3rem;margin-bottom: 15px;}
.guarantee-card h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 10px; }
.guarantee-card p { font-size: 0.95rem; color: #6B7280; line-height: 1.5; }

/* Responsive */
@media (max-width: 900px) {
    .saas-grid { grid-template-columns: 1fr; gap: 40px; }
    /* Réduit le vide (blanc) interne pour agrandir l'image */
    .visual-card-3d {padding: 15px; /* On passe de 40px à 15px */ margin-top: -40px;        /* Remonte le bloc vers le haut (translation) */
        max-width: 95%;           /* Permet au rectangle d'utiliser presque toute la largeur */ margin-left: auto; margin-right: auto; }

    /* Force l'image à occuper tout l'espace restant */
    .product-img-live { border-radius: 10px; }
    /* 2. LE CAROUSEL GARANTIES (Mobile uniquement) */
    .guarantee-grid { 
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        
        /* Espacement entre les cartes */
        gap: 15px; 
        
        /* IMPORTANT : On annule les marges du site pour toucher les bords de l'écran */
        margin-left: 0px; 
        margin-right: -20px;
        
        /* Padding interne : Décale la 1ère carte du bord gauche */
        padding-left: 20px; 
        padding-right: 20px; /* Espace à la fin */
        padding-bottom: 30px;

        /* Fluidité et Magnétisme */
        -webkit-overflow-scrolling: touch; 
        scroll-snap-type: x mandatory; 
        
        /* Cache la scrollbar */
        scrollbar-width: none; 
        -ms-overflow-style: none;
    }
    
    .guarantee-grid::-webkit-scrollbar { display: none; }

    /* 3. LES CARTES */
    .guarantee-card {
        /* On force la carte à faire 80% de l'écran (et pas 85% ou 100%) */
        /* Plus le % est petit, plus on voit le voisin de droite */
        min-width: 60vw; 
        width: 60vw;     
        
        flex-shrink: 0;
        margin-bottom: 0;
        
        /* ALIGNEMENT GAUCHE : C'est ça qui crée l'effet "décalé" */
        scroll-snap-align: start; 
        
        /* (Optionnel) Ajout d'une bordure visible pour bien délimiter */
        border: 1px solid #E2E8F0;
    }
    .saas-wrapper { padding-top: 100px; }
}

/* --- FIX MOBILE : PRIX ET ÉTOILES EMPILÉS --- */
@media (max-width: 600px) {
    .meta-live {
        flex-direction: column; /* Force l'affichage en colonne */
        align-items: flex-start; /* Aligne le tout à gauche */
        gap: 5px; /* Réduit l'espace entre le prix et les étoiles */
    }
}

/* --- FIX MOBILE : ONGLETS PLEINE LARGEUR --- */
@media (max-width: 600px) {
    .tabs-nav-ios {
        display: flex;
        width: 100%;             /* Force le conteneur à prendre 100% de la largeur */
        justify-content: space-between; 
        gap: 8px;                /* Espace réduit entre les boutons */
        flex-wrap: nowrap;       /* Interdit le retour à la ligne */
        margin-bottom: 30px;     /* Espace sous les onglets */
        overflow-x: visible;     /* Désactive le scroll */
    }

    .tab-btn {
        flex: 1;                 /* MAGIQUE : Force chaque bouton à prendre une taille égale (1/3) */
        text-align: center;      /* Centre le texte dans le bouton */
        padding: 10px 2px;       /* Réduit le padding latéral pour éviter que le texte dépasse */
        font-size: 0.85rem;      /* Ajuste la police pour que "Description" rentre bien */
        border-radius: 12px;     /* Réduit un peu l'arrondi pour un format plus "bloc" */
        display: flex;           /* Flex interne pour centrer verticalement */
        align-items: center;
        justify-content: center;
    }
    
    /* Cache les bulles de comptage (ex: Avis(5)) si ça prend trop de place */
    .bubble-count {
        display: none; 
    }
}



/* =========================================
   TOOLBAR & PAGINATION
   ========================================= */

/* BARRE DE FILTRES */
.reviews-toolbar {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 30px; flex-wrap: wrap; gap: 15px;
}

.toolbar-group { display: flex; gap: 15px; }

.saas-select {
    padding: 10px 20px;
    border: 1px solid #E5E7EB;
    border-radius: 50px; /* Style pilule */
    background-color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    appearance: none; /* Enlève le style natif moche */
    /* Ajout d'une petite flèche custom en background SVG encoded ou simple unicode */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23111%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 15px top 50%;
    background-size: 10px auto;
    padding-right: 40px;
    transition: 0.2s;
}

.saas-select:hover { border-color: #000; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.saas-select:focus { outline: none; border-color: #000; }

.results-count { font-size: 0.85rem; color: #9CA3AF; font-weight: 600; }

/* PAGINATION */
.saas-pagination { margin-top: 40px; display: flex; justify-content: center; }
.saas-pagination ul {
    display: flex; list-style: none; padding: 0; gap: 8px; margin: 0;
}

.saas-pagination .page-numbers {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #E5E7EB;
    color: #4B5563;
    font-weight: 700;
    text-decoration: none;
    transition: 0.2s;
}

.saas-pagination .page-numbers:hover {
    border-color: #000; color: #000;
}

.saas-pagination .page-numbers.current {
    background: #000; color: #fff; border-color: #000;
    transform: scale(1.1);
}

/* Responsive Filtres */
@media (max-width: 600px) {
    .reviews-toolbar { flex-direction: column; align-items: stretch; }
    .toolbar-group { flex-direction: column; }
    .saas-select { width: 100%; }
    .results-count { text-align: center; }
}

/* =========================================
   POPUP SUCCESS AVIS
   ========================================= */
.review-success-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.review-success-modal.active { opacity: 1; visibility: visible; }

.review-modal-content {
    background: #fff; width: 90%; max-width: 400px;
    padding: 40px; border-radius: 20px; text-align: center;
    transform: translateY(20px); transition: transform 0.3s ease;
    border: 1px solid #E5E7EB;
    box-shadow: 0 20px 50px -10px rgba(0,0,0,0.2);
}

.review-success-modal.active .review-modal-content { transform: translateY(0); }

.r-icon-check {
    width: 70px; height: 70px; background: #D1FAE5; color: #10B981;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 2rem; margin: 0 auto 20px;
}

.r-title { font-size: 1.5rem; font-weight: 800; color: #111; margin-bottom: 10px; }
.r-msg { color: #6B7280; margin-bottom: 25px; line-height: 1.5; font-size: 1rem; }

.btn-close-modal {
    background: #111; color: #fff; border: none; padding: 12px 30px;
    border-radius: 50px; font-weight: 700; cursor: pointer; width: 100%;
    transition: 0.2s;
}
.btn-close-modal:hover { background: #333; transform: scale(1.02); }

/* ==============================================================================================================================================
   STYLE DESCRIPTION LONGUE (TEMPLATE PART)
   ============================================================================================================================================== */

/* =========================================
   1. CONTAINER BREAKOUT (CORRIGÉ & CENTRÉ)
   ========================================= */
.saas-mega-wrapper {
    /* Largeur viewport */
    width: 85vw; 
    max-width: 100vw; /* Sécurité anti-scroll horizontal */
    
    /* On réinitialise la position pour éviter le décalage "left" */
    position: relative;
    left: auto;
    right: auto;
    
    /* CALCUL MAGIQUE : Centre le bloc de 85vw quel que soit le parent */
    /* 50% du parent - 42.5vw (moitié de la largeur voulue) */
    margin-left: calc(50% - 42.5vw);
    margin-right: calc(50% - 42.5vw);
    
    /* CRUCIAL : force le padding à être inclus DANS les 85vw */
    box-sizing: border-box;
    
    /* Le reste du style */
    background: #ffffff;
    border-radius: 40px;
    padding: 80px 60px;
    box-shadow: 0 50px 100px -20px rgba(0,0,0,0.08);
    margin-top: 40px;
    margin-bottom: 80px;
    border: 1px solid #F3F4F6;
    overflow: hidden;
    font-family: 'Outfit', sans-serif;
    color: #111;
}

/* On override les parents pour être sûr */
.tab-pane .content-box-glass {
    width: 100%;
    max-width: none;
    padding: 0;
    background: transparent;
}

/* 2. HEADER */
.mega-header {
    text-align: center;
    max-width: 1100px;
    margin: 0 auto 100px auto;
}

.tech-badge {
    background: #111; color: #fff;
    padding: 10px 25px; border-radius: 50px;
    font-weight: 700; font-size: 0.9rem; text-transform: uppercase;
    margin-bottom: 25px; display: inline-block;
}

.mega-header h2 {
    font-size: 4rem;
    font-weight: 900; line-height: 1.1;
    margin-bottom: 30px; letter-spacing: -2px;
}

.gradient-text-anim {
    background: linear-gradient(90deg, #111 0%, #2563eb 50%, #111 100%);
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: gradient-move 5s linear infinite;
}

.mega-intro { font-size: 1.5rem; color: #666; line-height: 1.6; max-width: 900px; margin: 0 auto; }

/* 3. SECTION SPLIT (Desktop par défaut) */
.mega-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    align-items: center;
    margin-bottom: 150px;
    padding: 0 20px;
}
.mega-section:last-child { margin-bottom: 100px; }

/* 4. IMAGES & STATS */
.ms-image { position: relative; }

.img-shadow {
    width: 100%; height: auto;
    border-radius: 30px;
    box-shadow: 0 40px 80px -20px rgba(0,0,0,0.15);
    border: 1px solid rgba(0,0,0,0.05);
    transition: transform 0.4s ease;
}
.mega-section:hover .img-shadow { transform: scale(1.01); }

.float-stat {
    position: absolute; background: #fff; color: #111;
    padding: 15px 30px; border-radius: 50px;
    font-weight: 800; font-size: 1rem;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
    display: flex; align-items: center; gap: 10px; z-index: 5;
    animation: float-slow 5s ease-in-out infinite;
}
.float-stat i { color: var(--theme-color); font-size: 1.2rem; }

.top-right { top: 40px; right: -30px; }
.top-left { top: 40px; left: -30px; }
.bottom-right { bottom: 40px; right: -30px; }
.bottom-left { bottom: 40px; left: -30px; }

/* 5. CONTENU TEXTE */
.ms-content { padding: 10px; }

.step-badge {
    font-size: 6rem; font-weight: 900; color: rgba(0,0,0,0.04);
    line-height: 1; margin-bottom: -40px; margin-left: -5px;
    pointer-events: none;
}

.ms-content h3 {
    font-size: 3rem; font-weight: 800; margin-bottom: 20px;
    position: relative; line-height: 1.1;
}

.ms-lead {
    font-size: 1.25rem; color: #555; margin-bottom: 50px;
    line-height: 1.6; border-left: 4px solid var(--theme-color);
    padding-left: 30px;
}

/* Grilles Features (UNIFORMISÉES) */
.grid-features-2 { display: grid; grid-template-columns: 1fr; gap: 30px; }
.feat-box {
    display: flex; gap: 20px; align-items: flex-start;
    background: #F9FAFB; padding: 25px; border-radius: 20px;
    transition: 0.3s;
}
.feat-box:hover { background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.05); transform: translateY(-5px); }
.feat-box i {
    font-size: 2rem; color: var(--theme-color); flex-shrink: 0;
    background: #fff; padding: 10px; border-radius: 12px;
}
.feat-box strong { display: block; font-size: 1.2rem; margin-bottom: 8px; color: #111; }
.feat-box span { font-size: 1rem; color: #666; line-height: 1.5; }

/* Blocs Highlight */
.highlight-card {
    background: #fff; border: 2px solid #F3F4F6;
    padding: 30px; border-radius: 24px; transition: 0.3s;
    display: flex; gap: 25px; align-items: center;
}
.highlight-card:hover { border-color: var(--theme-color); box-shadow: 0 15px 40px rgba(0,0,0,0.05); }
.hc-icon { font-size: 2.5rem; color: var(--theme-color); }
.hc-text strong { display: block; font-size: 1.2rem; margin-bottom: 5px; }
.hc-text p { margin: 0; color: #666; font-size: 1rem; }
.mt-20 { margin-top: 20px; }

/* 6. BANNIÈRE ÉCOLOGIQUE (BOTTOM) */
.eco-banner {
    background: #ecfdf5; 
    margin-top: 100px;
    border-radius: 40px; padding: 60px;
    border: 1px solid #d1fae5;
}
.eco-wrapper {
    display: flex; align-items: center; justify-content: space-between; gap: 40px;
    max-width: 1200px; margin: 0 auto;
}
.eco-icon { font-size: 4rem; color: #10b981; }
.eco-text h3 { font-size: 2.5rem; color: #065f46; margin-bottom: 10px; font-weight: 800; }
.eco-text p { font-size: 1.2rem; color: #047857; margin: 0; }
.eco-stat {
    background: #fff; padding: 20px 40px; border-radius: 20px;
    text-align: center; font-size: 1.2rem; font-weight: 700; color: #10b981;
}
.eco-stat span { display: block; font-size: 3rem; font-weight: 900; line-height: 1; color: #059669; }

/* 7. THÈMES COULEURS */
.theme-blue { --theme-color: #3b82f6; }
.theme-purple { --theme-color: #8b5cf6; }
.theme-green { --theme-color: #10b981; }
.theme-orange { --theme-color: #f97316; }
.theme-pink { --theme-color: #ec4899; }
.theme-dark { --theme-color: #111; }

/* 8. ANIMATIONS */
@keyframes float-slow {
    0% { transform: translateY(0); } 50% { transform: translateY(-15px); } 100% { transform: translateY(0); }
}
@keyframes gradient-move {
    0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; }
}
.anim-fade-up { animation: fadeInUp 0.8s ease forwards; }

/* =========================================
   9. RESPONSIVE (LOGIQUE DE RE-ORDER)
   ========================================= */
@media (max-width: 1200px) {
    .mega-header h2 { font-size: 3.5rem; }
    .mega-section { gap: 60px; }
}

@media (max-width: 900px) {
    /* --- FIX DU WRAPPER (Breakout désactivé) --- */
    .saas-mega-wrapper {
        width: 100%;
        margin: 0 auto 40px auto; 
        left: auto; right: auto; margin-left: 0; margin-right: 0; /* Reset des marges négatives */
        border-radius: 24px; padding: 40px 20px;
    }
    
    .mega-header h2 { font-size: 2.8rem; }
    
    /* --- RÉORGANISATION DES SECTIONS (TITRE -> IMAGE -> RESTE) --- */
    
    .mega-section {
        display: flex;          /* On passe en flex pour gérer l'ordre */
        flex-direction: column; /* Colonne verticale */
        gap: 0;                 /* Le gap est géré manuellement ci-dessous */
        margin-bottom: 80px;
        padding: 0;
    }

    /* ASTUCE : display: contents fait disparaître la div ".ms-content" du flux.
       Ses enfants (h3, p, grid) deviennent des enfants directs de .mega-section 
       et peuvent être mélangés avec l'image */
    .ms-content {
        display: contents; 
    }

    /* ORDRE 1 : Titre et Sous-titre et Badge */
    .step-badge, 
    .ms-content h3, 
    .ms-content .ms-lead {
        order: 1;
        text-align: center; /* Centrer le texte sur mobile */
    }
    
    .ms-content h3 { font-size: 2.2rem; margin-top: 10px; }
    .ms-content .ms-lead { margin-bottom: 30px; border-left: none; padding-left: 0; }
    
    /* ORDRE 2 : L'image */
    .ms-image {
        order: 2;
        margin-bottom: 40px; /* Espace sous l'image avant les features */
    }

    /* ORDRE 3 : Le reste (Features, Grilles, Cards) */
    .grid-features-2,
    .highlight-card {
        order: 3;
    }

    /* Ajustements mobile spécifiques */
    .reverse-mobile { display: flex; flex-direction: column; } /* Reset */
    
    .eco-wrapper { flex-direction: column; text-align: center; }
    .float-stat { right: 10px; left: auto; top: 10px; bottom: auto; padding: 10px 20px; font-size: 0.9rem; }
}

/* =======================================================================================
   STYLE OFFRE LIMITÉE (LTD)
   ========================================= */
/* =========================================
   STYLE LTD SIDEBAR (V2 - CLEAN RED)
   ========================================= */

.ltd-sidebar-box {
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 25px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* En-tête : Badge + Stock */
.ltd-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.flash-badge {
    background: #047857;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.stock-text {
    font-size: 0.85rem;
    color: #047857;
    font-weight: 600;
}

/* Texte principal */
.ltd-main-text {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #1F2937; /* Gris foncé lisible */
    margin: 0 0 15px 0;
}

.ltd-main-text strong {
    color: #047857;
    font-weight: 800;
}

/* Timer Horizontal */
.timer-sidebar { display: flex; justify-content: center; align-items: center; background: #fff; padding: 10px; border-radius: 8px; border: 1px solid #E5E7EB; margin-bottom: 15px; gap: 8px;}
.t-unit { text-align: center; width: 45px; /* Largeur fixe pour éviter que ça bouge */}
.t-unit span { display: block; font-size: 1.25rem; font-weight: 800; line-height: 1; color: #111; font-variant-numeric: tabular-nums; /* Empêche les chiffres de sautiller */}
.t-unit small { font-size: 0.65rem; text-transform: uppercase; color: #6B7280; font-weight: 600;} 
.t-sep { font-weight: 700; color: #D1D5DB; margin-top: -10px; /* Remonter un peu les deux points */}

/* Barre de progression */
.progress-container { width: 100%; height: 6px; background: #E5E7EB; border-radius: 10px; overflow: hidden; margin-bottom: 8px;}
.progress-bar-red {height: 100%; background: linear-gradient(90deg, #EF4444, #B91C1C); border-radius: 10px;}
.sub-text-stock {font-size: 0.75rem; color: #065F46; font-style: italic; text-align: center;}

/* =========================================
   BOUTON STICKY MOBILE — Clone du vrai bouton
   ========================================= */
.product-sticky-bar {
    display: none;
}
@media (max-width: 768px) {
    .product-sticky-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9990;
        padding: 12px 16px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-top: 1px solid rgba(15, 23, 42, 0.06);
        box-shadow: 0 -4px 24px rgba(15, 23, 42, 0.08);
        transform: translateY(100%);
        opacity: 0;
        transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                    opacity 0.3s ease;
        display: block;
    }
    .product-sticky-bar.is-visible {
        transform: translateY(0);
        opacity: 1;
    }
    .product-sticky-bar.is-dismissed {
        transform: translateY(100%);
        opacity: 0;
        pointer-events: none;
    }
    /* Le bouton cloné prend toute la largeur du conteneur */
    .product-sticky-bar > .btn-shimmer-effect {
        width: 100%;
    }

    /* Espace en bas de page pour ne pas cacher le contenu */
    body.single-product {
        padding-bottom: 80px;
    }
}