/*************************************
** OPINION CHRONOGRAPHE - RESPONSIVE.CSS
** Construction modulaire - VERSION FINALE
** Basé sur les templates réels Type 3 et Type 4
*************************************/

/*
 * BREAKPOINTS SYSTÈME (Mobile First)
 * ====================================
 * xs: 0-575px      (Très petits mobiles - iPhone SE)
 * sm: 576-767px    (Mobiles standards - iPhone 12/13)
 * md: 768-991px    (Tablettes - iPad portrait)
 * lg: 992-1199px   (Desktop petit - Laptops)
 * xl: 1200-1399px  (Desktop moyen)
 * xxl: 1400px+     (Desktop large)
 */

/* ============================================================================
   CRITIQUES : FIXES GLOBAUX MOBILE (désactiver FullPage.js)
   ============================================================================ */

@media screen and (max-width: 991px) {

    /* 🔥 FIX CRITIQUE #1 : Forcer le scroll sur mobile */
    html,
    body {
        overflow: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        height: auto !important;
        position: relative !important;
    }

    /* Désactiver FullPage.js complètement */
    body.fp-enabled,
    .fp-enabled body {
        overflow: auto !important;
        height: auto !important;
    }

    html.fp-enabled,
    .fp-enabled html {
        overflow: auto !important;
        height: auto !important;
    }

    /* 🔥 Container FullPage = normal */
    #fullpage {
        height: auto !important;
        position: relative !important;
        transform: none !important;
        -webkit-transform: none !important;
        transition: none !important;
    }

    /* 🔥 Sections FullPage = hauteur automatique + padding réduit */
    .fp-section,
    .section,
    div.section {
        height: auto !important;
        min-height: unset !important;
        position: relative !important;
        padding: 30px 0 !important;
        display: block !important;
        transform: none !important;
        -webkit-transform: none !important;
    }

    /* Première section (avec vidéo généralement) - Plus compacte */
    .section:first-child {
        min-height: 60vh !important;
        max-height: 80vh !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Dernière section (footer) */
    .section:last-child {
        padding: 0 !important;
        min-height: unset !important;
    }

    /* 🔥 TableCell = display block avec padding réduit */
    .fp-tableCell {
        height: auto !important;
        display: block !important;
        vertical-align: top !important;
        padding: 15px 0 !important;
    }

    /* Slides container */
    .fp-slides,
    .fp-slidesContainer {
        height: auto !important;
        position: relative !important;
        transform: none !important;
        -webkit-transform: none !important;
    }

    .fp-slide {
        height: auto !important;
        width: 100% !important;
        float: none !important;
        display: block !important;
        margin-bottom: 20px !important;
    }

    /* Cacher les contrôles FullPage */
    #fp-nav,
    .fp-slidesNav,
    .fp-controlArrow,
    .fp-controlArrow.fp-prev,
    .fp-controlArrow.fp-next {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* 🔥 FIX CRITIQUE #2 : Reset du body padding */
    body {
        padding-top: 0 !important;
        margin: 0 !important;
    }

    /* 🔥 FIX CRITIQUE #3 : Smooth scroll */
    html {
        scroll-behavior: smooth !important;
    }

    /* 🔥 FIX CRITIQUE #4 : Éviter les sections qui se chevauchent */
    .section + .section {
        margin-top: 0 !important;
    }
}

/* ============================================================================
   BASE - Optimisations globales
   ============================================================================ */

* {
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
}

/* ============================================================================
   MODULE 1 : FOOTER (#peidPages)
   ============================================================================ */

/* -----------------------------
   MOBILE (0-991px) - FIX COMPLET
   ----------------------------- */
@media screen and (max-width: 991px) {

    /* 🔥 Container principal - Reset complet */
    #peidPages {
        position: relative !important;
        height: auto !important;
        min-height: unset !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 40px 20px !important;
        margin: 0 !important;
        display: block !important;
        background-color: #000000 !important;
        overflow: visible !important;
    }

    /* Reset de la row */
    #peidPages > .row {
        width: 100% !important;
        margin: 0 !important;
        display: block !important;
    }

    /* 🔥 Image décorative - COMPLÈTEMENT masquée */
    #peidPages .imgPiedDePage,
    #peidPages .col-3.imgPiedDePage {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        width: 0 !important;
        overflow: hidden !important;
    }

    /* 🔥 Toutes les colonnes = full width */
    #peidPages .col-3,
    #peidPages .col-3:not(.imgPiedDePage) {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 20px 15px !important;
        margin: 0 0 30px 0 !important;
        display: block !important;
        float: none !important;
    }

    #peidPages .block4PiedDePage {
        width: 100% !important;
        margin-bottom: 0 !important;
    }
}

/* TRÈS PETITS MOBILES (0-575px) */
@media screen and (max-width: 575px) {

    #peidPages {
        padding: 30px 15px !important;
    }

    /* Titres */
    #peidPages h3 {
        font-size: 18px !important;
        font-weight: 600 !important;
        padding: 15px 0 !important;
        margin: 0 !important;
        text-align: center !important;
        letter-spacing: 0.1rem !important;
        color: #aaaaaa !important;
        display: block !important;
    }

    /* Liens */
    #peidPages .linkPiedDePage {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        padding: 12px 0 !important;
        margin: 0 !important;
        font-size: 14px !important;
        color: #878787 !important;
        text-decoration: none !important;
        transition: color 0.3s ease !important;
    }

    #peidPages .linkPiedDePage:hover {
        color: #F4711A !important;
    }

    /* Spans (textes) */
    #peidPages span {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        padding: 8px 0 !important;
        margin: 0 !important;
        font-size: 13px !important;
        color: #878787 !important;
        letter-spacing: 0.05rem !important;
    }

    #peidPages span a {
        color: #878787 !important;
        text-decoration: none !important;
        display: inline !important;
    }

    #peidPages span a:hover {
        color: #F4711A !important;
    }

    /* Séparateurs */
    #peidPages hr {
        border: 0 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
        margin: 20px auto !important;
        width: 80% !important;
        max-width: 300px !important;
    }

    /* Logo */
    #peidPages .piedLogo {
        width: 130px !important;
        height: auto !important;
        max-height: 90px !important;
        margin: 25px auto !important;
        display: block !important;
    }

    /* Réseaux sociaux */
    #peidPages .piedReseauxSociaux {
        width: 100% !important;
        max-width: 300px !important;
        margin: 20px auto 30px !important;
        padding: 0 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 15px !important;
    }

    #peidPages .piedReseauxSociaux .col-3 {
        width: auto !important;
        flex: 0 0 auto !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    #peidPages .piedReseauxSociaux a {
        width: 50px !important;
        height: 50px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #878787 !important;
        font-size: 22px !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border-radius: 50% !important;
        transition: all 0.3s ease !important;
        text-decoration: none !important;
    }

    #peidPages .piedReseauxSociaux a:hover {
        color: #F4711A !important;
        background: rgba(244, 113, 26, 0.15) !important;
        transform: scale(1.1) !important;
    }

    /* Formulaire newsletter */
    #peidPages .formPiedPage {
        width: 100% !important;
        max-width: 320px !important;
        margin: 20px auto 0 !important;
        padding: 0 !important;
        text-align: center !important;
        display: block !important;
        overflow: visible !important;
    }

    #peidPages .inputPiedPage {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 12px 0 !important;
        padding: 14px !important;
        font-size: 14px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.25) !important;
        color: #fff !important;
        border-radius: 6px !important;
        display: block !important;
        float: none !important;
    }

    #peidPages .inputPiedPage::placeholder {
        color: rgba(255, 255, 255, 0.5) !important;
    }

    #peidPages .btnPiedPage {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 14px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        display: block !important;
        float: none !important;
        border-radius: 6px !important;
        background-color: #6c757d !important;
        border-color: #6c757d !important;
        color: #fff !important;
    }

    #peidPages .btnPiedPage:hover {
        background-color: #5a6268 !important;
        border-color: #545b62 !important;
    }

    /* Messages Opinion Lovers */
    #peidPages .piedOpinionLoversMessage {
        display: block !important;
        text-align: center !important;
        color: #048d2f !important;
        font-size: 13px !important;
        margin: 10px 0 !important;
        padding: 5px !important;
    }

    #peidPages .piedOpinionLoversDes {
        display: block !important;
        text-align: center !important;
        color: #878787 !important;
        font-size: 12px !important;
        margin-top: 10px !important;
        text-decoration: underline !important;
    }

    #peidPages .piedOpinionLoversDes:hover {
        color: #F4711A !important;
    }
}

/* MOBILES MOYENS (576-767px) */
@media screen and (min-width: 576px) and (max-width: 767px) {

    #peidPages h3 {
        font-size: 20px !important;
    }

    #peidPages .linkPiedDePage,
    #peidPages span {
        font-size: 15px !important;
    }

    #peidPages .piedLogo {
        width: 150px !important;
        max-height: 105px !important;
    }

    #peidPages .formPiedPage {
        max-width: 400px !important;
    }
}

/* TABLETTES (768-991px) */
@media screen and (min-width: 768px) and (max-width: 991px) {

    #peidPages {
        padding: 50px 30px !important;
    }

    /* 2 colonnes sur tablette */
    #peidPages .col-3:not(.imgPiedDePage) {
        width: 50% !important;
        flex: 0 0 50% !important;
        float: left !important;
        padding: 20px !important;
    }

    #peidPages h3 {
        font-size: 22px !important;
        text-align: left !important;
    }

    #peidPages .linkPiedDePage,
    #peidPages span {
        text-align: left !important;
        padding-left: 0 !important;
        font-size: 16px !important;
    }

    #peidPages .piedLogo {
        width: 170px !important;
    }

    /* Formulaire côte à côte sur tablette */
    #peidPages .formPiedPage {
        max-width: 100% !important;
        text-align: left !important;
    }

    #peidPages .inputPiedPage {
        width: 60% !important;
        float: left !important;
        margin-right: 2% !important;
    }

    #peidPages .btnPiedPage {
        width: 38% !important;
        float: left !important;
    }
}

/* DESKTOP (992px+) */
@media screen and (min-width: 992px) {

    /* Reset les overrides mobile */
    #peidPages {
        /*position: absolute !important;*/
        height: 440px !important;
        padding: 0 !important;
    }

    #peidPages .col-3 {
        width: 25% !important;
        flex: 0 0 25% !important;
        float: left !important;
    }

    /* Afficher l'image déco sur desktop */
    #peidPages .imgPiedDePage {
        display: block !important;
        visibility: visible !important;
        height: auto !important;
        width: 25% !important;
    }
}

/* ============================================================================
   SOUS-PIED DE PAGE (Copyright)
   ============================================================================ */

@media screen and (max-width: 991px) {

    #sousPiedPage {
        width: 100% !important;
        height: auto !important;
        min-height: 60px !important;
        background-color: #000000 !important;
        text-align: center !important;
        padding: 20px 15px !important;
        margin: 0 !important;
        display: block !important;
        position: relative !important;
    }

    #sousPiedPage .col-12 {
        width: 100% !important;
    }

    #sousPiedPage span,
    #sousPiedPage span a {
        font-size: 12px !important;
        color: #878787 !important;
        letter-spacing: 0.05rem !important;
        text-align: center !important;
        display: block !important;
        line-height: 1.6 !important;
    }

    #sousPiedPage span a {
        text-decoration: none !important;
        margin-top: 5px !important;
        display: inline !important;
    }

    #sousPiedPage span a:hover {
        color: #F4711A !important;
    }
}

@media screen and (min-width: 576px) and (max-width: 991px) {
    #sousPiedPage span,
    #sousPiedPage span a {
        font-size: 14px !important;
    }
}

/* ============================================================================
   IMAGE DE FOND FOOTER (FullPage)
   ============================================================================ */

@media screen and (max-width: 991px) {
    #peidPagesImg {
        display: none !important;
        height: 0 !important;
        overflow: hidden !important;
    }
}

/* ============================================================================
   GALERIE INSTAGRAM FOOTER
   ============================================================================ */

@media screen and (max-width: 991px) {

    #peidPagesInstagram {
        width: 100% !important;
        padding: 30px 15px !important;
        background-color: #000000 !important;
    }

    #peidPagesInstagram .logoInstagram {
        text-align: center !important;
        margin-bottom: 25px !important;
    }

    #peidPagesInstagram .logoInstagram img {
        width: 70px !important;
        height: auto !important;
    }

    #peidPagesInstagram .imagesGalerie {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        margin: 0 !important;
    }

    #peidPagesInstagram .imagesGalerie > div {
        position: relative !important;
        overflow: hidden !important;
        border-radius: 8px !important;
        aspect-ratio: 1 !important;
    }

    #peidPagesInstagram .imagesGalerie img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    #peidPagesInstagram .imageVideo,
    #peidPagesInstagram .imageCarousel {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        color: rgba(255, 255, 255, 0.95) !important;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7) !important;
        font-size: 2rem !important;
    }
}

@media screen and (min-width: 576px) and (max-width: 767px) {
    #peidPagesInstagram .imagesGalerie {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    #peidPagesInstagram .imagesGalerie {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 12px !important;
    }
}

/* ============================================================================
   FIN DU MODULE 1 : FOOTER
   ============================================================================ */

/* ============================================================================
   MODULE 2 : SLIDES TYPE 3 et TYPE 4
   ============================================================================ */

/* -----------------------------
   MOBILE (0-991px) - Slides
   ----------------------------- */
@media screen and (max-width: 991px) {

    /* 🔥 Section slide = hauteur auto + padding réduit */
    .section.section-limite {
        height: auto !important;
        min-height: auto !important;
        padding: 60px 5% 80px !important;
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
    }

    /* Marge du header */
    .marginHeader-30,
    .marginHeader-90,
    .marginHeader {
        height: 0 !important;
        margin: 0 !important;
        display: none !important;
    }

    /*
     * Row du slide - Ordre NATUREL du HTML
     * Type 3 : col-md-7 (images) EN PREMIER → col-md-5 (texte)
     * Type 4 : col-md-5 (texte) EN PREMIER → col-md-7 (images)
     * Donc sur mobile, on respecte cet ordre
     */
    .section-limite > .row {
        width: 100% !important;
        margin: 0 !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important; /* Ordre naturel du HTML */
    }

    /* Colonnes = full width sur mobile */
    .colOpinionBox1,
    .colOpinionBox1-2,
    .colOpinionBox2 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 20px 15px !important;
        margin: 0 0 30px 0 !important;
    }

    /* Col 7 (images généralement) */
    .col-12.col-md-7 {
        width: 100% !important;
        flex: 0 0 100% !important;
        margin-bottom: 30px !important;
    }

    /* Col 5 (texte généralement) */
    .col-12.col-md-5 {
        width: 100% !important;
        flex: 0 0 100% !important;
        padding-bottom: 60px !important; /* Espace pour les boutons */
    }
}

/* TRÈS PETITS MOBILES (0-575px) */
@media screen and (max-width: 575px) {

    .section.section-limite {
        padding: 60px 15px 80px !important;
    }

    /* Titres */
    .colOpinionBox1 h2 {
        font-size: 24px !important;
        line-height: 1.3 !important;
        margin-bottom: 15px !important;
        text-align: center !important;
    }

    .colOpinionBox1 h3 {
        font-size: 18px !important;
        line-height: 1.4 !important;
        margin-bottom: 15px !important;
        text-align: center !important;
    }

    .colOpinionBox1 h4 {
        font-size: 16px !important;
        line-height: 1.4 !important;
        margin-bottom: 10px !important;
    }

    /* Séparateurs */
    .colOpinionBox1 hr {
        width: 80% !important;
        margin: 20px auto !important;
        border-color: rgba(255, 255, 255, 0.3) !important;
    }

    /* Paragraphes */
    .colOpinionBox1 p {
        font-size: 14px !important;
        line-height: 1.6 !important;
        margin-bottom: 15px !important;
        text-align: center !important;
        padding: 0 10px !important;
    }

    /* Carousel / Images */
    .corp-img-basic,
    .corp-img-unique {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    /* Image du carousel */
    .carousel-item img,
    .carousel-image,
    .carouselOrigine img {
        max-height: 40vh !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        display: block !important;
    }

    /* 🎨 Indicateurs carousel - VERSION BELLE */
    .bloc-color-concept {
        width: 100% !important;
        padding: 12px !important;
        margin-bottom: 15px !important;
        border-radius: 10px !important;
        background-color: rgba(89, 89, 89, 0.3) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }

    .carousel-indicators {
        position: relative !important;
        bottom: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .carousel-indicators button {
        width: 10px !important;
        height: 10px !important;
        border-radius: 50% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 2px solid rgba(255, 255, 255, 0.5) !important;
        background-color: transparent !important;
        opacity: 1 !important;
        transition: all 0.3s ease !important;
    }

    /* Indicator actif - ORANGE et plus gros */
    .carousel-indicators button.active {
        background-color: #F4711A !important;
        border-color: #F4711A !important;
        width: 12px !important;
        height: 12px !important;
        transform: scale(1.2) !important;
    }

    /* Hover sur les indicators (tablettes/desktop avec souris) */
    @media (hover: hover) {
        .carousel-indicators button:hover:not(.active) {
            background-color: rgba(255, 255, 255, 0.3) !important;
            border-color: rgba(255, 255, 255, 0.8) !important;
        }
    }

    /* Contrôles carousel */
    .carousel-control-prev,
    .carousel-control-next {
        width: 40px !important;
        height: 40px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        opacity: 0.8 !important;
    }

    .carousel-control-prev {
        left: 10px !important;
    }

    .carousel-control-next {
        right: 10px !important;
    }

    /* Drapeau français */
    .colOpinionBox1 > div[style*="justify-content: center"] {
        margin: 20px auto 30px !important;
    }

    /* 🔥 BOUTONS - FIX CRITIQUE */
    .colOpinionBox1 .btn,
    .colOpinionBox1 .opinionSlide-btn-t,
    .colOpinionBox1 a.btn {
        width: 100% !important;
        max-width: 280px !important;
        margin: 20px auto !important;
        padding: 14px 20px !important;
        font-size: 16px !important;
        display: block !important;
        text-align: center !important;
        border-radius: 6px !important;
        min-height: 50px !important; /* Touch-friendly */
    }

    /* Boutons multiples */
    .colOpinionBox1 .mt-3 {
        width: 100% !important;
        margin-top: 20px !important;
        margin-bottom: 30px !important;
        padding-bottom: 20px !important;
    }

    .colOpinionBox1 .lien-orange {
        display: block !important;
        width: 100% !important;
        max-width: 280px !important;
        margin: 15px auto !important;
        padding: 14px 20px !important;
        text-align: center !important;
        text-decoration: none !important;
        background: rgba(244, 113, 26, 0.1) !important;
        border: 2px solid #F4711A !important;
        border-radius: 6px !important;
        transition: all 0.3s ease !important;
        min-height: 50px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .colOpinionBox1 .lien-orange:hover {
        background: rgba(244, 113, 26, 0.2) !important;
        transform: translateY(-2px) !important;
    }

    .colOpinionBox1 .lien-orange h4 {
        margin: 0 !important;
        color: #F4711A !important;
        font-size: 16px !important;
    }

    /* Texte "scroll down" */
    .text-parf-d {
        margin-top: 30px !important;
        margin-bottom: 20px !important;
        text-align: center !important;
        font-size: 14px !important;
        color: rgba(255, 255, 255, 0.7) !important;
    }

    .text-parf-d i {
        font-size: 24px !important;
        animation: bounce 2s infinite !important;
    }

    @keyframes bounce {
        0%, 20%, 50%, 80%, 100% {
            transform: translateY(0);
        }
        40% {
            transform: translateY(-10px);
        }
        60% {
            transform: translateY(-5px);
        }
    }
}

/* MOBILES MOYENS (576-767px) */
@media screen and (min-width: 576px) and (max-width: 767px) {

    .colOpinionBox1 h2 {
        font-size: 28px !important;
    }

    .colOpinionBox1 h3 {
        font-size: 20px !important;
    }

    .colOpinionBox1 p {
        font-size: 15px !important;
    }

    .carousel-item img,
    .carousel-image,
    .carouselOrigine img {
        max-height: 50vh !important;
    }

    .colOpinionBox1 .btn,
    .colOpinionBox1 .lien-orange {
        max-width: 350px !important;
    }
}

/* TABLETTES (768-991px) */
@media screen and (min-width: 768px) and (max-width: 991px) {

    .section.section-limite {
        padding: 80px 5% 100px !important;
    }

    /* Sur tablette, garder le layout 2 colonnes en mode row */
    .section-limite > .row {
        flex-direction: row !important;
    }

    /*
     * Sur tablette, on respecte l'ordre naturel du HTML
     * Les colonnes prennent leur taille respective
     */
    .col-12.col-md-7 {
        width: 58.333% !important; /* 7/12 */
        flex: 0 0 58.333% !important;
    }

    .col-12.col-md-5 {
        width: 41.667% !important; /* 5/12 */
        flex: 0 0 41.667% !important;
        padding: 30px 25px 50px !important;
    }

    .colOpinionBox1 h2 {
        font-size: 32px !important;
        text-align: left !important;
    }

    .colOpinionBox1 h3 {
        font-size: 22px !important;
        text-align: left !important;
    }

    .colOpinionBox1 p {
        font-size: 16px !important;
        text-align: left !important;
        padding: 0 !important;
    }

    .colOpinionBox1 hr {
        margin: 20px 0 !important;
        width: 100% !important;
    }

    .carousel-item img,
    .carousel-image,
    .carouselOrigine img {
        max-height: 60vh !important;
    }

    .colOpinionBox1 .btn,
    .colOpinionBox1 .lien-orange {
        max-width: 100% !important;
        margin: 20px 0 !important;
    }
}

/* DESKTOP (992px+) */
@media screen and (min-width: 992px) {

    /* Reset les styles mobile, laisser le CSS de base gérer */
    .section.section-limite {
        padding: 0 5% !important; /* Padding de base */
        min-height: 100vh !important;
    }

    .section-limite > .row {
        flex-direction: row !important;
        height: 100% !important;
    }
}

/* ============================================================================
   FIN DU MODULE 2 : SLIDES TYPE 3 et TYPE 4
   ============================================================================ */

/* ============================================================================
   MODULE 3 : HEADER & NAVIGATION
   ============================================================================ */

/* -----------------------------
   MOBILE (0-991px) - Header & Logo
   ----------------------------- */
@media screen and (max-width: 991px) {

    /* Header container */
    #header {
        position: relative !important;
        width: 100% !important;
        padding: 15px 20px !important;
        background: transparent !important;
        z-index: 100 !important;
    }

    #header .row {
        width: 100% !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    #header .col-2 {
        width: auto !important;
        flex: 0 0 auto !important;
        padding: 0 !important;
    }
}

/* Très petits mobiles */
@media screen and (max-width: 575px) {

    #header {
        padding: 10px 15px !important;
    }

    /* Logo header - PETIT */
    .logoHeader {
        height: 35px !important;
        width: auto !important;
        max-width: 90px !important;
        display: block !important;
    }
}

/* Mobiles moyens */
@media screen and (min-width: 576px) and (max-width: 767px) {

    .logoHeader {
        height: 40px !important;
        width: auto !important;
        max-width: 110px !important;
    }
}

/* Tablettes */
@media screen and (min-width: 768px) and (max-width: 991px) {

    .logoHeader {
        height: 50px !important;
        width: auto !important;
        max-width: 130px !important;
    }
}

/* ============================================================================
   MODULE 3 : TOGGLE - Cacher icônes quand menu ouvert (SEULEMENT ÇA)
   ============================================================================ */

@media screen and (max-width: 991px) {

    /*
     * 🔥 QUAND MENU OUVERT - Cacher les icônes SAUF le X
     * - Montre : cachée
     * - Panier : caché
     * - Menu toggle : garder l'icône (X) mais cacher le texte "menu"
     */

    /* Menu principal ouvert */
    .show-sidebar .montreSlide,
    .show-sidebar .pannierSlide,
    .show-sidebar .iconColorChangeText {
        display: none !important;
    }

    /* Menu Mon Compte ouvert */
    .show-menuMonCompte .montreSlide,
    .show-menuMonCompte .pannierSlide,
    .show-menuMonCompte .iconColorChangeText {
        display: none !important;
    }

    /* Menu Langue ouvert */
    .show-menuLangue .montreSlide,
    .show-menuLangue .pannierSlide,
    .show-menuLangue .iconColorChangeText {
        display: none !important;
    }

    /* 🔥 PANIER OUVERT - Cacher SEULEMENT les icônes du toggle, PAS le X du panier ! */
    .show-panier .toggle .montreSlide,
    .show-panier .toggle .pannierSlide,
    .show-panier .toggle .iconColorChangeText {
        display: none !important;
    }

    /* 🔥 Bloquer le scroll de la page derrière quand panier ouvert */
    body.show-panier {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100vh !important;
    }
}

/* ============================================================================
   FIX : .bloc-color-concept qui prend tout l'écran
   ============================================================================ */

@media screen and (max-width: 991px) {

    /* 🔥 FIX CRITIQUE : Masquer le bloc gris sur les slides Type 3 et 4 */
    .colOpinionBox1-2 .bloc-color-concept {
        display: none !important;
    }

    /* Si masqué, mettre les indicators directement sous l'image */
    .colOpinionBox1-2 .carousel-indicators {
        position: relative !important;
        margin: 15px 0 0 0 !important;
        padding: 0 !important;
    }
}

/* ============================================================================
   FIN DU MODULE 3 : HEADER & MENU
   ============================================================================ */

/* ============================================================================
   MODULE 4 : PAGE HOME - Texte vidéo cover
   ============================================================================ */

@media screen and (max-width: 991px) {

    /* Container du texte sur la vidéo */
    .coverVideo {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 2 !important;
        pointer-events: none !important;
    }

    .coverVideo .rowCoverVideo {
        width: 100% !important;
        text-align: center !important;
        padding: 0 20px !important;
    }

    .textCoverVideo {
        display: block !important;
        text-align: center !important;
    }
}

@media screen and (max-width: 575px) {

    /* Ligne 1 : "OPINION CHRONOGRAPHE" */
    .textCoverVideo-ling1 {
        display: block !important;
        font-size: 28px !important;
        font-weight: 700 !important;
        letter-spacing: 0.15rem !important;
        color: #fff !important;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7) !important;
        margin-bottom: 15px !important;
        line-height: 1.2 !important;
    }

    /* Ligne 2 : sous-titre */
    .textCoverVideo-ling2 {
        display: block !important;
        font-size: 16px !important;
        font-weight: 400 !important;
        letter-spacing: 0.1rem !important;
        color: #FFFFFF !important;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
        line-height: 1.4 !important;
    }
}

@media screen and (min-width: 576px) and (max-width: 767px) {

    .textCoverVideo-ling1 {
        font-size: 36px !important;
        margin-bottom: 20px !important;
    }

    .textCoverVideo-ling2 {
        font-size: 18px !important;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {

    .textCoverVideo-ling1 {
        font-size: 48px !important;
        margin-bottom: 25px !important;
    }

    .textCoverVideo-ling2 {
        font-size: 22px !important;
    }
}

/* ============================================================================
   FIN MODULE 4 : HOME PAGE
   ============================================================================ */

/* ============================================================================
   MODULE 5 : SLIDE TYPE 6 (Configurateur avec cercles de couleur)
   ============================================================================ */

@media screen and (max-width: 991px) {

    /* Section Type 6 */
    .section.section-limite {
        /* Déjà géré par Module 2 */
    }
}

@media screen and (max-width: 991px) {

    /* Colonne gauche (texte + cercles) et droite (carousel) en column */
    .section-limite .colOpinionBox {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 20px 15px !important;
        order: 2 !important; /* Texte en second */
    }

    .section-limite .col-lg-8.colOpinionBox {
        order: 1 !important; /* Carousel en premier */
        margin-bottom: 30px !important;
    }

    /* Bloc concept (barre) - MASQUER */
    #colonne-concept.bloc-color-concept {
        display: none !important;
    }
}

@media screen and (max-width: 575px) {

    /* Titres du configurateur */
    #titres h1 {
        font-size: 28px !important;
        text-align: center !important;
        margin-bottom: 15px !important;
    }

    #titres h2 {
        font-size: 18px !important;
        text-align: center !important;
        margin-bottom: 15px !important;
    }

    #titres hr {
        width: 80% !important;
        margin: 20px auto !important;
    }

    /* Textes présentation */
    .presentationConceptTitre {
        font-size: 16px !important;
        display: block !important;
        margin-bottom: 10px !important;
        text-align: center !important;
        color: #F4711A !important;
    }

    .presentationConcept {
        font-size: 14px !important;
        line-height: 1.6 !important;
        text-align: center !important;
        margin-bottom: 20px !important;
    }

    .textTypeOpinion {
        font-size: 14px !important;
        text-align: center !important;
        width: 100% !important;
        margin-bottom: 20px !important;
    }

    /* 🎨 CERCLES DE COULEUR - Responsive */
    .configCercleColor {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 15px !important;
        margin: 20px auto 30px !important;
        max-width: 100% !important;
        padding: 0 10px !important;
    }

    .configCercleColor .cercle {
        width: 50px !important;
        height: 50px !important;
        border-radius: 50% !important;
        display: block !important;
        flex: 0 0 auto !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        border: 3px solid rgba(255, 255, 255, 0.3) !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    }

    .configCercleColor .cercle:hover {
        transform: scale(1.15) !important;
        border-color: rgba(255, 255, 255, 0.8) !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5) !important;
    }

    /* Couleurs des cercles */
    #bleu_azur { background-color: #007bff !important; }
    #bleu_france { background-color: #0055a4 !important; }
    #jaune { background-color: #ffd700 !important; }
    #orange { background-color: #F4711A !important; }
    #rouge { background-color: #dc3545 !important; }
    #kaki { background-color: #8b7355 !important; }
    #vert { background-color: #28a745 !important; }
    #blanc { background-color: #ffffff !important; }
    #noir { background-color: #000000 !important; border-color: #fff !important; }

    /* 🔥 BOUTON CONFIGURER - Fix responsive */
    .btnConfigureOpinion {
        width: 100% !important;
        max-width: 280px !important;
        margin: 30px auto 20px !important;
        padding: 14px 20px !important;
        font-size: 16px !important;
        display: block !important;
        text-align: center !important;
        border-radius: 6px !important;
        min-height: 50px !important;
    }

    .mt-auto.d-flex.justify-content-end {
        width: 100% !important;
        justify-content: center !important;
        margin-top: 20px !important;
    }

    /* Carousel Type 6 */
    .carousel-concept {
        width: 100% !important;
        margin: 0 auto !important;
    }

    .carouselConfigurateur {
        width: 100% !important;
    }

    .carouselConfigurateur img {
        max-height: 40vh !important;
        width: auto !important;
        max-width: 100% !important;
    }

    /* 🎨 Indicators carousel Type 6 - BEAUX */
    .carouselConfigurateur .carousel-indicators {
        position: absolute !important;
        bottom: 10px !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 auto !important;
        padding: 8px 15px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        background: rgba(0, 0, 0, 0.4) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border-radius: 20px !important;
        width: auto !important;
        max-width: 200px !important;
    }

    .carouselConfigurateur .carousel-indicators button {
        width: 10px !important;
        height: 10px !important;
        border-radius: 50% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 2px solid rgba(255, 255, 255, 0.5) !important;
        background-color: transparent !important;
        opacity: 1 !important;
        transition: all 0.3s ease !important;
    }

    .carouselConfigurateur .carousel-indicators button.active {
        background-color: #F4711A !important;
        border-color: #F4711A !important;
        width: 12px !important;
        height: 12px !important;
        transform: scale(1.2) !important;
    }

    /* Contrôles prev/next */
    .carouselConfigurateur .carousel-control-prev,
    .carouselConfigurateur .carousel-control-next {
        width: 40px !important;
        height: 40px !important;
        opacity: 0.8 !important;
    }
}

@media screen and (min-width: 576px) and (max-width: 767px) {

    #titres h1 {
        font-size: 36px !important;
    }

    #titres h2 {
        font-size: 22px !important;
    }

    .presentationConceptTitre {
        font-size: 18px !important;
    }

    .presentationConcept {
        font-size: 15px !important;
    }

    .configCercleColor .cercle {
        width: 55px !important;
        height: 55px !important;
    }

    .carouselConfigurateur img {
        max-height: 50vh !important;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {

    /* Sur tablette, garder 2 colonnes */
    .section-limite .col-lg-4.colOpinionBox {
        width: 40% !important;
        flex: 0 0 40% !important;
        order: 1 !important;
        padding-right: 30px !important;
    }

    .section-limite .col-lg-8.colOpinionBox {
        width: 60% !important;
        flex: 0 0 60% !important;
        order: 2 !important;
    }

    #titres h1 {
        font-size: 42px !important;
        text-align: left !important;
    }

    #titres h2 {
        font-size: 26px !important;
        text-align: left !important;
    }

    #titres hr {
        width: 100% !important;
        margin: 20px 0 !important;
    }

    .presentationConceptTitre,
    .presentationConcept,
    .textTypeOpinion {
        text-align: left !important;
    }

    .configCercleColor {
        justify-content: flex-start !important;
    }

    .configCercleColor .cercle {
        width: 60px !important;
        height: 60px !important;
    }

    .mt-auto.d-flex.justify-content-end {
        justify-content: flex-end !important;
    }

    .btnConfigureOpinion {
        margin: 30px 0 20px 0 !important;
    }

    .carouselConfigurateur img {
        max-height: 60vh !important;
    }
}

/* ============================================================================
   FIN MODULE 5 : SLIDE TYPE 6
   ============================================================================ */

/* ============================================================================
   MODULE 6 : PANIER
   ============================================================================ */

@media screen and (max-width: 991px) {

    /* 🔥 Header du panier avec logo et X */
    .panier-header {
        position: sticky !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        background: #212121 !important;
        z-index: 1000 !important;
        padding: 15px 20px !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
    }

    .panier-header-content {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
    }

    /* Logo dans le header du panier */
    .panier-header .logoHeader {
        height: 35px !important;
        width: auto !important;
    }

    /* 🔥 BOUTON X DE FERMETURE DU PANIER - La bonne classe */
    .panier-close-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border: none !important;
        border-radius: 8px !important;
        color: #fff !important;
        font-size: 24px !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .panier-close-btn:hover {
        background: rgba(244, 113, 26, 0.2) !important;
        color: #F4711A !important;
        transform: rotate(90deg) !important;
    }

    .panier-close-btn i {
        font-size: 24px !important;
    }

    /* Container panier */
    #panier {
        padding: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* 🔥 WIDTH 100% pour recapPanier et panier-summary */
    .recapPanier,
    .panier-summary,
    #recapPanier {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 20px 0 !important;
        padding: 20px 15px !important;
    }

    /* Titre panier */
    .titlePanier {
        font-size: 24px !important;
        padding: 20px 15px !important;
        margin-bottom: 20px !important;
        text-align: center !important;
    }

    /* Items du panier responsive */
    .panier-item-row {
        display: block !important;
        padding: 15px !important;
        margin-bottom: 15px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border-radius: 8px !important;
    }

    /* Totaux */
    .panier-total-row {
        display: flex !important;
        justify-content: space-between !important;
        padding: 10px 0 !important;
        font-size: 15px !important;
    }

    .panier-grand-total {
        border-top: 2px solid rgba(255, 255, 255, 0.2) !important;
        margin-top: 10px !important;
        padding-top: 15px !important;
        font-size: 18px !important;
        font-weight: bold !important;
    }

    /* Boutons panier */
    .panier-checkout-btn {
        width: 100% !important;
        max-width: 100% !important;
        margin: 20px 0 !important;
        padding: 16px !important;
        font-size: 16px !important;
        min-height: 50px !important;
    }

    /* Sections du panier */
    .panier-section-title {
        font-size: 18px !important;
        margin-bottom: 15px !important;
    }

    /* Mode paiement */
    .panier-mode-paiement-section {
        width: 100% !important;
        padding: 20px 15px !important;
    }
}

@media screen and (max-width: 575px) {

    .panier-header {
        padding: 10px 15px !important;
    }

    .panier-header .logoHeader {
        height: 30px !important;
    }

    .panier-close-btn {
        width: 40px !important;
        height: 40px !important;
        font-size: 20px !important;
    }

    .panier-close-btn i {
        font-size: 20px !important;
    }

    .titlePanier {
        font-size: 20px !important;
        padding: 15px !important;
    }

    .recapPanier,
    .panier-summary {
        padding: 15px 10px !important;
    }

    .panier-total-row {
        font-size: 14px !important;
    }

    .panier-grand-total {
        font-size: 16px !important;
    }
}

/* ============================================================================
   FIN MODULE 6 : PANIER
   ============================================================================ */

/* ============================================================================
   MODULE 7 : BOUTIQUE (Index + Article produit)
   ============================================================================ */

@media screen and (max-width: 991px) {

    /* ========================================
       PAGE BOUTIQUE INDEX (Liste des produits)
       ======================================== */

    .pageBoutiqueClass {
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 15px !important;
    }

    /* Titre de la boutique */
    .pageBoutiqueTitre {
        width: 100% !important;
        text-align: center !important;
        padding: 30px 20px !important;
        margin-bottom: 20px !important;
    }

    .pageBoutiqueTitre h2 {
        font-size: 18px !important;
        margin-bottom: 10px !important;
    }

    .pageBoutiqueTitre h1 {
        font-size: 28px !important;
        margin: 0 auto 15px !important;
    }

    .pageBoutiqueTitre hr {
        width: 80% !important;
        margin: 0 auto !important;
    }

    /* Grille des produits */
    .tableau-produits {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .tableau-produits .row {
        gap: 20px !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* Cartes produits - 1 par ligne sur mobile, CENTRÉES */
    .produitPageCol3 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin: 0 auto 20px auto !important;
        padding: 0 15px !important;
        display: block !important;
    }

    .produitPageCard {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        text-decoration: none !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
        transition: transform 0.3s ease !important;
        margin: 0 auto !important;
        border: none !important;
        background: rgba(0, 0, 0, 0.3) !important;
    }

    .produitPageCard:hover {
        transform: translateY(-5px) !important;
    }

    .produit-page-card-img {
        width: 100% !important;
        height: auto !important;
        max-height: 400px !important;
        object-fit: contain !important;
        display: block !important;
        margin: 0 auto !important;
        padding: 30px 20px !important;
        background: rgba(255, 255, 255, 0.02) !important;
        border: none !important;
    }

    /* 🔥 Forcer aussi sur .produitPageCard img */
    .produitPageCard img {
        border: none !important;
    }

    .produitPageCard:hover img {
        border: 2px #d57829 solid !important;
    }

    /* Info produit centrée */
    .produitPageCard .corp-text-product,
    .produitPageCard .text-center {
        text-align: center !important;
        padding: 15px !important;
    }

    .produitPageCard h3,
    .produitPageCard h4,
    .produitPageCard .h3,
    .produitPageCard .h4 {
        text-align: center !important;
        margin: 0 auto !important;
    }

    .produitPageCard .prix,
    .produitPageCard .price {
        text-align: center !important;
        display: block !important;
    }

    .produitShow {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        font-size: 40px !important;
        color: rgba(255, 255, 255, 0.8) !important;
        opacity: 0 !important;
        transition: opacity 0.3s ease !important;
    }

    .produitPageCard:hover .produitShow {
        opacity: 1 !important;
    }

    /* ========================================
       PAGE ARTICLE PRODUIT (Détail)
       ======================================== */

    /* Bouton retour boutique */
    .btn-panier {
        width: 100% !important;
        max-width: 280px !important;
        margin: 20px auto !important;
        display: block !important;
        text-align: center !important;
        padding: 12px !important;
    }

    /* Container principal article */
    .pageBoutiqueClass {
        max-width: 100% !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }

    .pageBoutiqueClass .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 15px !important;
        overflow-x: hidden !important;
    }

    .pageBoutiqueClass .row {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        overflow-x: hidden !important;
    }

    /* 🔥 Layout 2 colonnes → 1 colonne sur mobile */
    .superposer-phone1,
    .superposer-phone1-t1 {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Colonne 1 : Images (en haut) */
    .colProduit1 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        order: 1 !important;
        margin: 0 0 30px 0 !important;
        padding: 0 15px !important;
        display: block !important;
    }

    /* Colonne 2 : Texte + Form (en bas) */
    .colProduit2 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        order: 2 !important;
        margin: 0 !important;
        padding: 0 15px !important;
        padding-left: 15px !important;
        display: block !important;
    }

    /* 🔥 FORCER les col-6 à être 100% */
    .pageBoutiqueClass .col-6 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Titres dans la colonne produit */
    .colProduit2 h2,
    .colProduit2 h1 {
        text-align: center !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .colProduit2 .ms-5 {
        margin-left: 0 !important;
    }

    .colProduit2 hr {
        width: 80% !important;
        margin: 15px auto !important;
    }

    /* Bloc couleur avec prix */
    .bloc-color-product {
        display: none !important;
    }

    /* Container image produit */
    .corp-img-product {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        overflow: hidden !important;
    }

    .corp-img-product img {
        max-height: 350px !important;
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        border-radius: 8px !important;
        object-fit: contain !important;
    }

    /* Carousel produit */
    .slideProduit-fp-tableCell-modif {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        overflow: hidden !important;
    }

    .slideProduit-fp-tableCell-modif .carousel-inner {
        border-radius: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .slideProduit-fp-tableCell-modif .carousel-item {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .slideProduit-fp-tableCell-modif .carousel-item img {
        max-height: 350px !important;
        width: auto !important;
        max-width: 100% !important;
        object-fit: contain !important;
    }

    /* Indicators carousel produit */
    .corp-img-product .carousel-indicators {
        position: relative !important;
        margin: 20px 0 0 0 !important;
        padding: 10px !important;
        background: rgba(0, 0, 0, 0.3) !important;
        backdrop-filter: blur(10px) !important;
        border-radius: 15px !important;
        width: auto !important;
        max-width: 200px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        display: flex !important;
        gap: 8px !important;
    }

    .corp-img-product .carousel-indicators button {
        width: 10px !important;
        height: 10px !important;
        border-radius: 50% !important;
        margin: 0 !important;
        border: 2px solid rgba(255, 255, 255, 0.5) !important;
        background-color: transparent !important;
        opacity: 1 !important;
    }

    .corp-img-product .carousel-indicators button.active {
        background-color: #F4711A !important;
        border-color: #F4711A !important;
        width: 12px !important;
        height: 12px !important;
        transform: scale(1.2) !important;
    }

    /* Contrôles carousel */
    .slideProduit-fp-tableCell-modif .carousel-control-prev,
    .slideProduit-fp-tableCell-modif .carousel-control-next {
        width: 40px !important;
        height: 40px !important;
        opacity: 0.8 !important;
    }

    /* Textes produit */
    .text-titre-p {
        font-size: 24px !important;
        font-weight: bold !important;
        text-align: center !important;
        margin: 20px 0 15px !important;
        color: #fff !important;
        display: block !important;
        width: 100% !important;
    }

    .colProduit2 p {
        text-align: center !important;
        font-size: 15px !important;
        line-height: 1.6 !important;
        margin-bottom: 15px !important;
        color: #fff !important;
        display: block !important;
    }

    /* 🔥 Margin header - Réduire sur mobile */
    .marginHeader-90 {
        margin-top: 70px !important;
        height: 70px !important;
    }

    /* Prix produit */
    .prixProduitModal {
        display: block !important;
        text-align: center !important;
        font-size: 28px !important;
        font-weight: bold !important;
        color: #F4711A !important;
        margin: 20px 0 !important;
    }

    .prixProduitModalsup {
        font-size: 24px !important;
    }

    /* Formulaire ajout panier */
    .colProduit2 form {
        width: 100% !important;
        margin: 20px 0 !important;
    }

    .colProduit2 form .form-group,
    .colProduit2 form .mb-3 {
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 15px !important;
    }

    .colProduit2 form label {
        display: block !important;
        text-align: center !important;
        margin-bottom: 8px !important;
        font-size: 16px !important;
    }

    .colProduit2 form input,
    .colProduit2 form select {
        width: 100% !important;
        max-width: 200px !important;
        margin: 0 auto !important;
        padding: 10px !important;
        font-size: 16px !important;
        text-align: center !important;
        background: rgba(50, 50, 50, 0.8) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        color: #fff !important;
        border-radius: 6px !important;
    }

    /* Options du select mobile */
    .colProduit2 form select option {
        background: #2a2a2a !important;
        color: #fff !important;
    }

    .colProduit2 form select:focus,
    .colProduit2 form input:focus {
        outline: none !important;
        border-color: #F4711A !important;
        box-shadow: 0 0 0 3px rgba(244, 113, 26, 0.2) !important;
        background: rgba(60, 60, 60, 0.9) !important;
    }

    /* Boutons ajout panier */
    .corp-btn-product,
    .opinionBox-btn-t,
    .btn-ajpanier-Sup {
        width: 100% !important;
        max-width: 280px !important;
        margin: 15px auto !important;
        display: block !important;
        padding: 14px 20px !important;
        font-size: 16px !important;
        text-align: center !important;
        border-radius: 6px !important;
        min-height: 50px !important;
    }

    /* Margin helper */
    .margin-top-box150 {
        margin-top: 30px !important;
    }
}

/* Très petits mobiles */
@media screen and (max-width: 575px) {

    .pageBoutiqueTitre h1 {
        font-size: 24px !important;
    }

    .pageBoutiqueTitre h2 {
        font-size: 16px !important;
    }

    .produit-page-card-img {
        max-height: 250px !important;
    }

    /* 🔥 Images article - PLUS PETITES sur mobile */
    .corp-img-product img,
    .slideProduit-fp-tableCell-modif img,
    .carousel-item img {
        max-height: 250px !important;
    }

    /* 🔥 Réduire margin entre image et texte */
    .colProduit1 {
        margin-bottom: 20px !important;
    }

    /* 🔥 Bouton retour plus compact */
    .btn-panier {
        padding: 10px !important;
        font-size: 14px !important;
        margin: 15px auto !important;
    }

    .text-titre-p {
        font-size: 20px !important;
        margin-top: 10px !important;
    }

    .prixProduitModal {
        font-size: 24px !important;
        margin: 15px 0 !important;
    }

    .prixProduitModalsup {
        font-size: 20px !important;
    }

    /* 🔥 Formulaire plus compact */
    .colProduit2 form {
        margin: 15px 0 !important;
    }

    .colProduit2 form .mb-3,
    .colProduit2 form .form-group {
        margin-bottom: 10px !important;
    }

    /* 🔥 Bouton ajouter panier plus compact */
    .corp-btn-product,
    .opinionBox-btn-t {
        padding: 12px 16px !important;
        font-size: 15px !important;
        min-height: 48px !important;
    }
}

/* Tablettes (768-991px) - 2 colonnes pour la liste */
@media screen and (min-width: 768px) and (max-width: 991px) {

    .produitPageCol3 {
        width: calc(50% - 10px) !important;
        flex: 0 0 calc(50% - 10px) !important;
        max-width: calc(50% - 10px) !important;
    }

    .colProduit2 h2,
    .colProduit2 h1,
    .colProduit2 p,
    .text-titre-p,
    .prixProduitModal {
        text-align: left !important;
    }

    .corp-btn-product,
    .opinionBox-btn-t {
        margin: 15px 0 !important;
    }
}

/* ============================================================================
   FIN MODULE 7 : BOUTIQUE
   ============================================================================ */

/* ============================================================================
   MODULE 7 BIS : BOUTIQUE DESKTOP - Amélioration article
   ============================================================================ */

/* Desktop (992px et plus) */
@media screen and (min-width: 992px) {

    /* 🔥 Empêcher overflow horizontal */
    body,
    html {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    .pageBoutiqueClass {
        padding: 40px 0 !important;
        overflow-x: hidden !important;
        max-width: 100% !important;
    }

    .pageBoutiqueClass .container-fluid {
        max-width: 1400px !important;
        margin: 0 auto !important;
        padding: 0 60px !important;
        overflow-x: hidden !important;
    }

    /* Bouton retour */
    .btn-panier {
        margin-bottom: 40px !important;
        padding: 12px 30px !important;
        font-size: 16px !important;
    }

    /* 🔥 Row avec gap - Mais pas d'overflow */
    .pageBoutiqueClass .row {
        gap: 60px !important;
        margin: 0 !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Colonne image - Plus d'espace */
    .pageBoutiqueClass .col-md-6:first-of-type {
        flex: 0 0 45% !important;
        max-width: 45% !important;
    }

    /* Colonne texte - Plus d'espace */
    .pageBoutiqueClass .col-md-6:last-of-type {
        flex: 0 0 calc(55% - 60px) !important;
        max-width: calc(55% - 60px) !important;
    }

    /* Container image - Mieux centré */
    .corp-img-product {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 500px !important;
        background: rgba(255, 255, 255, 0.02) !important;
        border-radius: 12px !important;
        padding: 30px !important;
        position: relative !important;
    }

    /* 🔥 Carousel - Centrage vertical parfait */
    .corp-img-product .carousel {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .corp-img-product .carousel-inner {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        min-height: 500px !important;
    }

    .corp-img-product .carousel-item {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 500px !important;
    }

    /* Images plus grandes sur desktop */
    .corp-img-product img,
    .carousel-item img {
        max-height: 500px !important;
        width: auto !important;
        max-width: 100% !important;
        object-fit: contain !important;
        margin: auto !important;
    }

    /* Carousel indicators - Plus beaux */
    .carousel-indicators {
        position: absolute !important;
        bottom: 5px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        display: flex !important;
        gap: 10px !important;
        margin: 0 !important;
    }

    .carousel-indicators button {
        width: 12px !important;
        height: 12px !important;
        border-radius: 50% !important;
        border: 2px solid rgba(255, 255, 255, 0.5) !important;
        background: transparent !important;
        opacity: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        transition: all 0.3s ease !important;
    }

    .carousel-indicators button.active {
        background: #F4711A !important;
        border-color: #F4711A !important;
        transform: scale(1.3) !important;
    }

    /* Contrôles carousel */
    .carousel-control-prev,
    .carousel-control-next {
        width: 50px !important;
        height: 50px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        background: rgba(0, 0, 0, 0.5) !important;
        border-radius: 50% !important;
        opacity: 0.7 !important;
    }

    .carousel-control-prev:hover,
    .carousel-control-next:hover {
        opacity: 1 !important;
        background: rgba(244, 113, 26, 0.8) !important;
    }

    .carousel-control-prev {
        left: 10px !important;
    }

    .carousel-control-next {
        right: 10px !important;
    }

    /* Colonne texte - Meilleur spacing */
    .pageBoutiqueClass .col-md-6 .px-3 {
        padding: 0 40px !important;
    }

    /* Titres */
    .pageBoutiqueClass h1 {
        font-size: 42px !important;
        margin-bottom: 20px !important;
    }

    .pageBoutiqueClass h2 {
        font-size: 20px !important;
        margin-bottom: 10px !important;
        color: rgba(255, 255, 255, 0.7) !important;
    }

    .pageBoutiqueClass h3 {
        font-size: 32px !important;
        margin: 30px 0 20px !important;
        color: #F4711A !important;
    }

    .pageBoutiqueClass hr {
        width: 120px !important;
        border-color: #F4711A !important;
        border-width: 2px !important;
        margin: 20px 0 !important;
        opacity: 1 !important;
    }

    /* Description */
    .pageBoutiqueClass p {
        font-size: 16px !important;
        line-height: 1.8 !important;
        margin-bottom: 20px !important;
        color: rgba(255, 255, 255, 0.9) !important;
    }

    /* Prix */
    .pageBoutiqueClass .fs-4 {
        font-size: 36px !important;
        display: block !important;
        margin: 30px 0 !important;
    }

    /* Formulaire */
    .pageBoutiqueClass form {
        margin: 30px 0 !important;
    }

    .pageBoutiqueClass form label {
        font-size: 16px !important;
        margin-bottom: 8px !important;
        color: rgba(255, 255, 255, 0.9) !important;
        display: block !important;
    }

    .pageBoutiqueClass form select,
    .pageBoutiqueClass form input[type="number"] {
        width: 100% !important;
        padding: 12px 16px !important;
        font-size: 16px !important;
        background: rgba(50, 50, 50, 0.8) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        color: #fff !important;
        border-radius: 6px !important;
        margin-bottom: 20px !important;
    }

    /* Options du select */
    .pageBoutiqueClass form select option {
        background: #2a2a2a !important;
        color: #fff !important;
        padding: 10px !important;
    }

    .pageBoutiqueClass form select:focus,
    .pageBoutiqueClass form input[type="number"]:focus {
        outline: none !important;
        border-color: #F4711A !important;
        box-shadow: 0 0 0 3px rgba(244, 113, 26, 0.2) !important;
        background: rgba(60, 60, 60, 0.9) !important;
    }

    /* Bouton ajouter au panier */
    .pageBoutiqueClass .btn-primary {
        width: 100% !important;
        padding: 16px !important;
        font-size: 18px !important;
        font-weight: 600 !important;
        margin-top: 20px !important;
        margin-bottom: 40px !important;
        border-radius: 8px !important;
        transition: all 0.3s ease !important;
    }

    .pageBoutiqueClass .btn-primary:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 20px rgba(244, 113, 26, 0.4) !important;
    }
}

/* Grands écrans (1400px+) */
@media screen and (min-width: 1400px) {

    .pageBoutiqueClass .container-fluid {
        max-width: 1600px !important;
        padding: 0 80px !important;
    }

    .corp-img-product {
        min-height: 600px !important;
    }

    .corp-img-product img,
    .carousel-item img {
        max-height: 600px !important;
    }

    .pageBoutiqueClass h1 {
        font-size: 48px !important;
    }

    .pageBoutiqueClass h3 {
        font-size: 36px !important;
    }
}

/* ============================================================================
   FIN MODULE 7 BIS : BOUTIQUE DESKTOP
   ============================================================================ */

/* ============================================================================
   MODULE 9 : FULLSCREEN SCROLL - Container seul, pas le body
   ============================================================================ */

/* -----------------------------
   FIX 1 : bodyConfigMontre - Fullscreen avec scroll interne
   ----------------------------- */

@media screen and (max-width: 991px) {

    .configBlockBodyMontres {
        display: unset;
    }
    /* Bloquer le body QUAND bodyConfigMontre est visible */
    body:has(#bodyConfigMontre:not(.hidden)) {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100vh !important;
    }

    /* Container - Fullscreen avec scroll INTERNE */
    #bodyConfigMontre:not(.hidden),
    .configBlockBodyMontres:not(.hidden) {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 20px 15px 120px !important;
        margin: 0 !important;
        background: #000 !important;
        /*z-index: 9999 !important;*/
    }

    /* Products container */
    #bodyConfigMontre .products-container,
    .configBlockBodyMontres .products-container {
        display: grid !important;
        grid-template-columns: 1fr !important;
        max-width: 600px !important;
        width: 100% !important;
        margin: 0 auto !important;
        gap: 30px !important;
        padding: 0 !important;
    }

    /* Product cards */
    #bodyConfigMontre .product-card,
    .configBlockBodyMontres .product-card {
        display: flex !important;
        flex-direction: column !important;
        padding: 20px !important;
        margin: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    #bodyConfigMontre .product-image-wrapper,
    .configBlockBodyMontres .product-image-wrapper {
        max-width: 200px !important;
        height: 200px !important;
        margin: 0 auto 15px !important;
    }

    #bodyConfigMontre .product-image-wrapper img,
    .configBlockBodyMontres .product-image-wrapper img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }

    #bodyConfigMontre .product-title,
    .configBlockBodyMontres .product-title {
        font-size: 1.4rem !important;
        text-align: center !important;
        margin: 0 0 10px 0 !important;
    }

    #bodyConfigMontre .product-description,
    .configBlockBodyMontres .product-description {
        font-size: 0.9rem !important;
        text-align: center !important;
        margin: 0 0 10px 0 !important;
    }

    #bodyConfigMontre .product-price,
    .configBlockBodyMontres .product-price {
        font-size: 1.2rem !important;
        text-align: center !important;
        margin: 0 0 10px 0 !important;
    }

    #bodyConfigMontre .detail-link,
    .configBlockBodyMontres .detail-link {
        display: block !important;
        text-align: center !important;
        margin: 0 0 15px 0 !important;
    }

    #bodyConfigMontre .product-actions,
    .configBlockBodyMontres .product-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }

    #bodyConfigMontre .btn-primary,
    #bodyConfigMontre .btn-secondary,
    .configBlockBodyMontres .btn-primary,
    .configBlockBodyMontres .btn-secondary {
        width: 100% !important;
        padding: 12px !important;
        text-align: center !important;
        display: block !important;
    }
}

/* -----------------------------
   FIX 2 : watchChoiceModal - Onglets réduits
   ----------------------------- */

@media screen and (max-width: 991px) {

    .watch-config-modal {
        width: 95% !important;
        height: 85vh !important;
        padding: 15px !important;
    }

    .watch-config-modal-header h2 {
        font-size: 1.1rem !important;
    }

    .watch-color-tabs {
        flex-direction: column !important;
        max-height: 260px !important;
        overflow-y: auto !important;
        border-radius: 10px !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        gap: 0 !important;
        padding: 0 !important;
        margin-bottom: 15px !important;
    }

    .watch-color-tab {
        width: 100% !important;
        padding: 10px 14px !important;
        font-size: 0.9rem !important;
        border-radius: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        justify-content: flex-start !important;
    }

    .watch-color-tab:last-child {
        border-bottom: none !important;
    }

    .watch-color-tab.active {
        background: rgba(244, 113, 26, 0.15) !important;
        border-left: 3px solid #F4711A !important;
        padding-left: 11px !important;
    }

    .watch-color-indicator {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
    }
}

/* -----------------------------
   FIX 3 : divLogoWatch - Masquer
   ----------------------------- */

@media screen and (max-width: 991px) {

    #divLogoWatch {
        display: none !important;
    }
}

/* -----------------------------
   FIX 4 : btnAddToCart - Centré
   ----------------------------- */

@media screen and (max-width: 991px) {

    #btnAddToCart {
        position: fixed !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        bottom: 20px !important;
        width: calc(100% - 40px) !important;
        max-width: 400px !important;
        /*z-index: 10000 !important;*/
    }

    /* Masquer tooltip desktop */
    #cartTooltip {
        display: none !important;
        visibility: hidden !important;
    }

    /* Modal preview mobile */
    #cartPreviewModal {
        display: none;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
        z-index: 10000;
        transform: translateY(100%);
        transition: transform 0.3s ease;
        max-height: 75vh;
        overflow-y: auto;
    }

    #cartPreviewModal.visible {
        display: block;
        transform: translateY(0);
    }

    .cart-preview-header {
        padding: 18px;
        border-bottom: 1px solid #eee;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: sticky;
        top: 0;
        background: white;
        z-index: 10;
    }

    .cart-preview-header h3 {
        margin: 0;
        font-size: 1.15rem;
        color: #333;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .cart-preview-close {
        background: none;
        border: none;
        font-size: 22px;
        color: #999;
        cursor: pointer;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .cart-preview-content {
        padding: 18px;
    }

    /* Styles tooltip réutilisés */
    .cart-preview-content h4 {
        margin: 0 0 12px 0;
        font-size: 18px;
        font-weight: 700;
        color: #333;
    }

    .cart-preview-content .cart-base-item {
        display: flex;
        justify-content: space-between;
        padding: 14px;
        background: #f8f8f8;
        border-radius: 10px;
        margin-bottom: 12px;
    }

    .cart-preview-content .cart-item-label {
        font-weight: 600;
        color: #333;
        font-size: 15px;
    }

    .cart-preview-content .cart-item-price {
        font-weight: 700;
        color: #F4711A;
        font-size: 16px;
    }

    .cart-preview-content .cart-options-section {
        margin: 12px 0;
    }

    .cart-preview-content .cart-section-title {
        font-size: 15px;
        font-weight: 600;
        color: #666;
        margin: 0 0 8px 0;
        padding-bottom: 6px;
        border-bottom: 1px solid #eee;
    }

    .cart-preview-content .cart-items-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .cart-preview-content .cart-items-list li {
        display: flex;
        justify-content: space-between;
        padding: 8px 0;
        border-bottom: 1px solid #f5f5f5;
        font-size: 13px;
    }

    .cart-preview-content .cart-items-list li:last-child {
        border-bottom: none;
    }

    .cart-preview-content .cart-total-section {
        margin-top: 15px;
        padding-top: 12px;
        border-top: 2px solid #F4711A;
    }

    .cart-preview-content .cart-total-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px;
    }

    .cart-preview-content .cart-total-price {
        font-size: 22px;
        font-weight: 700;
        color: #F4711A;
    }

    .cart-preview-content .cart-delivery-info {
        margin-top: 12px;
        padding: 10px;
        background: #fff8f0;
        border-radius: 8px;
        border-left: 3px solid #F4711A;
    }

    .cart-preview-content .cart-delivery-info p {
        margin: 0;
        font-size: 12px;
        color: #666;
        line-height: 1.4;
    }

    .cart-preview-actions {
        padding: 16px;
        border-top: 1px solid #eee;
        display: flex;
        gap: 10px;
        position: sticky;
        bottom: 0;
        background: white;
    }

    .cart-preview-btn {
        flex: 1;
        padding: 13px;
        border-radius: 10px;
        font-size: 0.95rem;
        font-weight: 600;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    .cart-preview-btn-cancel {
        background: #f5f5f5;
        color: #666;
    }

    .cart-preview-btn-confirm {
        background: linear-gradient(135deg, #ff8c3a 0%, #F4711A 100%);
        color: white;
    }

}

/* Tablette */
@media screen and (min-width: 768px) and (max-width: 991px) {

    #bodyConfigMontre:not(.hidden),
    .configBlockBodyMontres:not(.hidden) {
        padding: 30px 20px 130px !important;
    }

    #bodyConfigMontre .products-container,
    .configBlockBodyMontres .products-container {
        max-width: 700px !important;
        gap: 35px !important;
    }

    #bodyConfigMontre .product-image-wrapper,
    .configBlockBodyMontres .product-image-wrapper {
        max-width: 240px !important;
        height: 240px !important;
    }

    #btnAddToCart {
        max-width: 500px !important;
    }
}

/* Petit mobile */
@media screen and (max-width: 575px) {

    #bodyConfigMontre:not(.hidden),
    .configBlockBodyMontres:not(.hidden) {
        padding: 15px 10px 110px !important;
    }

    #bodyConfigMontre .products-container,
    .configBlockBodyMontres .products-container {
        gap: 25px !important;
    }

    #bodyConfigMontre .product-card,
    .configBlockBodyMontres .product-card {
        padding: 18px !important;
    }

    #bodyConfigMontre .product-image-wrapper,
    .configBlockBodyMontres .product-image-wrapper {
        max-width: 170px !important;
        height: 170px !important;
    }

    #bodyConfigMontre .product-title,
    .configBlockBodyMontres .product-title {
        font-size: 1.2rem !important;
    }

    .watch-color-tabs {
        max-height: 230px !important;
        height: 100px;
    }

    .watch-color-tab {
        padding: 9px 12px !important;
        font-size: 0.85rem !important;
    }

    .watch-color-indicator {
        width: 18px !important;
        height: 18px !important;
    }

    #btnAddToCart {
        bottom: 15px !important;
        max-width: 360px !important;
        padding: 12px !important;
        font-size: 14px !important;
    }
}

/* ============================================================================
   FIN MODULE 9
   ============================================================================ */