:root {
    --sfr-red: #e2001a;
    --dark-bg: #1a1a1a;
    --card-bg: #000000;
    --text-white: #ffffff;
    --text-grey: #cccccc;
    --light-grey: #f4f4f4;
}

#sfr-configurator-wrapper {
    scroll-margin-top:120px;
}
.step { display: none; animation: fadeIn 0.5s; }
        .step.active { display: block; }

        #step-1 {
            width: 100vw; /* 100% de la largeur de la fenêtre */
            position: relative;
            left: 50%;
            right: 50%;
            margin-left: -50vw; /* On tire vers la gauche pour annuler la marge du container */
            margin-right: -50vw; /* On tire vers la droite */
            
            /* L'image de fond */
            background-image: url('step-1-background.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            
            /* Espacement interne pour que le contenu ne colle pas aux bords haut/bas */
            padding-top: 40px;
            padding-bottom: 40px;
        }

        /* RECENTRAGE : On force le contenu interne à rester dans les 1200px */
        #step-1 > div {
            max-width: 1200px;
            margin-left: auto;
            margin-right: auto;
            padding-left: 20px; /* Sécurité pour mobile */
            padding-right: 20px;
        }



        #step-3 {
            width: 100vw; /* 100% de la largeur de la fenêtre */
            position: relative;
            left: 50%;
            right: 50%;
            margin-left: -50vw; /* On tire vers la gauche pour annuler la marge du container */
            margin-right: -50vw; /* On tire vers la droite */
            
            /* L'image de fond */
            background-image: url('background-tv.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            
            /* Espacement interne pour que le contenu ne colle pas aux bords haut/bas */
            padding-top: 40px;
            padding-bottom: 40px;
        }

        /* RECENTRAGE : On force le contenu interne à rester dans les 1200px */
        #step-3 > div {
            max-width: 1200px;
            margin-left: auto;
            margin-right: auto;
            padding-left: 20px; /* Sécurité pour mobile */
            padding-right: 20px;
        }

        
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        /* HEADER */
        #step-1 h1 { color: var(--sfr-red); font-size: 2.5rem; text-transform: uppercase; text-align: center;}
        #step-1 p.step-1-subtitle { font-size: 1.6rem; color: #FFF; margin-top: 10px; text-align: center; font-weight: 700;}
        #step-1 p.step-1-subtitle2 { font-size: 1.5rem; color: #111; margin-top: 20px; text-align: center; font-weight: 700;}
        #step-2 h2 { color: var(--sfr-red); font-size: 2.5rem; text-transform: uppercase; text-align: center;}
        #step-2 p.step-2-subtitle { font-size: 1.6rem; color: #000; margin-top: 10px; text-align: center; font-weight: 700;}

        #step-3 h2 { color: var(--sfr-red); font-size: 2.5rem; text-transform: uppercase; text-align: center;}
        #step-3 p.step-3-subtitle { font-size: 1.6rem; color: #fff; margin-top: 10px; text-align: center; font-weight: 700;}

        #step-2 .right-col .right-col-options {
            background: #FFF;
            padding: 20px;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
        }

        #step-1 h1, #step-2 h2, #step-3 h2, #step-4 h2, .channels-overlay h2 { display:none;}
        .himg {
            height: 70px;
            width: 450px;
            margin: 0 auto;
            max-width: 100%;
        }
        .himg img {height:100%; width:100%; object-fit: contain;}

        /* STEP 1: OFFRES */
        .offers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
        
        /* Wrapper pour aligner la carte et son bouton externe */
        .offer-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            padding-bottom: 25px; 
        }

        /* Carte Offre */
        .offer-card {
            width: 100%;
            background: linear-gradient(180deg, #111, #333);
            color: white;
            border-radius: 15px;
            padding: 30px 20px;
            text-align: center;
            position: relative;
            transition: transform 0.3s, box-shadow 0.3s;
            cursor: pointer;
            border: 2px solid transparent;
            z-index: 1;
            box-sizing: border-box;
            background: linear-gradient(180deg, #0a0a0a 0%, #1f0c0c 55%, #7a3030 100%);
            /*box-shadow: 0 15px 35px rgba(0,0,0,0.5);*/
        }

        .offer-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.3); }
        .offer-card.selected { border-color: var(--sfr-red); }

        .offer-title { font-size: 1.5rem; font-weight: 800; text-transform: uppercase; margin-bottom: 10px; height:50px; }
        .offer-speed { color: var(--sfr-red); font-weight: bold; margin-bottom: 20px; display: block; }
        .offer-tv-icon { font-size: 2rem; margin: 15px 0; }
        .offer-desc { font-size: 0.9rem; color: #FFF; margin-bottom: 20px; min-height: 40px;}
        
        .price-tag { font-size: 2.5rem; font-weight: 700; }
        .price-tag span { font-size: 1rem; }
        .options-layout .price-tag { font-size: 1rem; }
        .options-layout .price-tag span { font-size: 2.5rem; }
        .options-layout .price-tag em { font-weight:200; font-style: normal; }
        .engagement { font-size: 0.8rem; color: var(--text-grey); margin-top: 5px; display: block; }

        button.btn-offer {
            margin-top: 20px;
            padding: 10px 30px!important;
            border: 1px solid white;
            background: transparent;
            color: white;
            border-radius: 25px;
            text-transform: uppercase;
            cursor: pointer;
            transition: 0.3s;
        }
        button.btn-offer:hover { background: var(--sfr-red); border-color: var(--sfr-red); }

        /* TOGGLE MULTI */
        .multi-toggle-container-wrapper {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            margin-top: 20px;
        }
        .mentions {
            font-size: 0.8rem;
            color: #000;
            font-weight: 700;
            width:50%;
            text-align: left;
        }
        .multi-toggle-container {
            text-align: right;
            display: block;
            align-items: center;
            position: relative;
            width: 50%;
        }

        

        #sel-offer-desc {
            font-weight: 700;
        }

        .switch { position: relative; display: inline-block; width: 60px; height: 34px; margin: 0 15px; }
        .switch input { opacity: 0; width: 0; height: 0; }
        .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; }
        .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; }
        input:checked + .slider { background-color: var(--sfr-red); }
        input:checked + .slider:before { transform: translateX(26px); }

        @media (max-width: 600px) {
            .multi-toggle-container {
                width:100%;
            }
            .switch {
                width:100px;
            }
        }

        /* STEP 2: OPTIONS */
        .options-layout { display: flex; gap: 30px; flex-wrap: wrap; }
        
        .left-col {
            display: flex;
            flex-direction: column;
            gap: 20px;
            flex: 1; min-width: 300px;
        }

        /* Bloc SFR Multi Step 2 */
        .multi-bloc-step2 {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
            gap: 5px;
        }

        .right-col { flex: 2; min-width: 300px; }

        /* Carte Offre Carousel */
        .selected-offer-view {
            background: white;
            border-radius: 15px;
            padding: 30px;
            text-align: center;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
            position: relative;
        }
        .carousel-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
        .arrow { cursor: pointer; font-size: 2rem; color: #333; user-select: none; }
        .box-img { margin: 20px auto; display: block;  height: 200px; } 
        .box-img img { width: 100%; height: 100%; object-fit: contain; }

        /* Grille Options */
        .options-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px; }
        
        .option-card {
            background: white;
            border: 1px solid #ddd;
            border-radius: 10px;
            padding: 15px;
            cursor: pointer;
            transition: 0.2s;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
            overflow: hidden;
            min-height: 64px;
        }
        .option-card:hover { border-color: var(--sfr-red); }
        .option-card.active { border: 2px solid var(--sfr-red); background: #fff5f5; }
        
        .opt-head { display: flex; justify-content: space-between; align-items: start; margin-bottom: 10px; }
        .opt-title { font-weight: 900; font-size: 1rem; }
        .opt-price { color: var(--sfr-red); font-weight: bold; }
        .opt-add { text-align: right; color: var(--sfr-red); font-size: 1.5rem; }
        .opt-contenu {display:flex; flex-direction: row; justify-content: space-between; height: 100%; align-items: center;}
        .opt-desc {font-size: 0.9rem; color: #000; font-weight: 400; line-height: 1.2; padding-right: 4px;}
        .opt-img {height: 80px; width: 80px; padding-right: 10px;}
        .opt-img img {width: 100%; height: 100%; object-fit: contain;}

        /* Bouton + d'info */
        button.btn-info-plus {
            width: 24px; 
            height: 24px;
            background: var(--sfr-red);
            color: white;
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.2rem; font-weight: bold;
            cursor: pointer;
            position: absolute; top: 10px; right: 10px;
            z-index: 5; border: none; line-height: 1;
            padding:10px!important;
        }
        div.btn-info-plus-bqt {
            width: 24px;
            height: 24px;
            background: var(--sfr-red);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            font-weight: bold;
            cursor: pointer;
            position: absolute;
            top: 0;
            left: 0px;
            z-index: 5;
            border: none;
            line-height: 1;
            padding:10px!important;
        }

        .bouquet-card.highlight div.btn-info-plus-bqt {
            background: #fff;
            color: var(--sfr-red);
            top:unset;
            bottom:-40px;
        }

        /* Overlay Détail Option */
        .opt-overlay-details {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: #333; color: white;
            padding: 15px; box-sizing: border-box;
            display: flex; flex-direction: column;
            justify-content: center; align-items: center; text-align: center;
            opacity: 0; pointer-events: none; transition: opacity 0.3s;
            z-index: 10;
        }
        .opt-overlay-details.visible { opacity: 1; pointer-events: all; }

        button.btn-close-details {
            background: transparent; border: 1px solid white; color: white;
            padding: 2px 10px; border-radius: 10px; margin-top: 10px;
            font-size: 0.8rem; cursor: pointer;
        }

        /* STEP 3: BOUQUETS */
        /* --- STYLE BOUQUETS (Version Maquette 7 Cartes) --- */
        /****
        #bouquets-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr); 
            grid-auto-rows: 80px; 
            grid-auto-flow: dense; 
            gap: 20px;
            background-color: transparent; 
            padding: 30px;
            border-radius: 20px;
            border: 1px solid #555;
            margin-bottom: 30px;
        }

       
        .bouquet-card {
            background: white;
            border-radius: 15px;
            padding: 15px 10px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            box-sizing: border-box;
            position: relative;
            text-align: center;
            min-height: 180px; 
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }*/

        /* --- STYLE BOUQUETS (SCROLL HORIZONTAL) --- */

        #bouquets-container {
            display: grid;
            
            /* 1. ON FIXE LA HAUTEUR : 5 lignes de 80px (Hauteur max de vos cartes) */
            grid-template-rows: repeat(4, 100px);
            
            /* 2. ON LAISSE LES COLONNES SE CRÉER : Largeur fixe de 260px par colonne */
            grid-auto-columns: 260px;
            
            /* 3. FLUX VERS LA DROITE : Remplit verticalement puis crée une nouvelle colonne */
            grid-auto-flow: column dense; 
            
            /* 4. ACTIVER LE SCROLL */
            overflow-x: auto;
            overflow-y: hidden;
            
            /* GESTION ESPACES */
            gap: 20px;
            padding: 30px;
            background-color: #1a1a1a;
            border-radius: 25px;
            border: 1px solid #444;
            
            /* EFFET DE SNAP (L'arrêt du scroll se cale sur une carte) */
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            
            /* Ombre interne pour suggérer le scroll (facultatif) */
            box-shadow: inset -20px 0 20px -10px rgba(0,0,0,0.5);
        }

        .bouquet-card {
            /* ... styles existants ... */
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            background: white;
            border-radius: 18px;
            padding: 20px;
            transition: transform 0.2s;
            
            /* SNAP ALIGNMENT */
            scroll-snap-align: start;
        }

        /* CUSTOM SCROLLBAR (Pour que ce soit joli) */
        #bouquets-container::-webkit-scrollbar {
            height: 10px; /* Hauteur de la barre horizontale */
        }
        #bouquets-container::-webkit-scrollbar-track {
            background: #333;
            border-radius: 5px;
            margin: 20px; /* Marge pour ne pas coller aux bords */
        }
        #bouquets-container::-webkit-scrollbar-thumb {
            background: var(--sfr-red); /* Rouge SFR */
            border-radius: 5px;
        }
        #bouquets-container::-webkit-scrollbar-thumb:hover {
            background: #a30000;
        }


        /* Le wrapper permet de positionner les flèches par rapport au bloc */
        .bouquets-scroll-wrapper {
            /*position: relative;*/
            width: 100%;
            /* On s'assure que les flèches ne sortent pas de l'écran sur mobile */
            max-width: 100%; 
        }

        

        /* Style commun des boutons flèches */
        .bqt-nav-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%); /* Centre verticalement parfaitement */
            z-index: 10; /* Au-dessus des cartes */
            
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: none;
            
            background-color: white;
            color: var(--sfr-red); /* Rouge SFR */
            font-size: 1.5rem;
            font-weight: bold;
            cursor: pointer;
            
            box-shadow: 0 4px 10px rgba(0,0,0,0.5); /* Ombre portée pour ressortir du fond noir */
            transition: all 0.2s ease;
            
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .bqt-nav-btn:hover {
            background-color: var(--sfr-red);
            color: white;
            transform: translateY(-50%) scale(1.1); /* Petit zoom au survol */
        }

        .bqt-nav-btn:active {
            transform: translateY(-50%) scale(0.95); /* Petit clic */
        }

        /* Position Gauche */
        .bqt-nav-btn.prev {
            left: -15px; /* Déborde légèrement sur la gauche */
        }

        /* Position Droite */
        .bqt-nav-btn.next {
            right: -15px; /* Déborde légèrement sur la droite */
        }

        @media (min-width: 769px) {
            .bouquets-scroll-wrapper {
                position: relative;
            }
            .bqt-nav-btn.prev {
                left:-55px;
            }
            .bqt-nav-btn.next {
                right:-55px;
            }
            
        }

        /* Sur mobile, on cache souvent les flèches car on swipe avec le doigt */
        /*@media (max-width: 768px) {
            .bqt-nav-btn { display: none; }
        }*/

        /* CARTE HIGHLIGHT (Rouge - Famille) */
        .bouquet-card.highlight {
            /* C'est ici que la magie opère : Force la colonne 3 et prend 2 lignes */
            grid-column: 3; 
            grid-row: span 2; 
            
            /* Style Rouge "Drapé" */
            background: linear-gradient(135deg, #a30000 0%, #d40015 40%, #8a0000 100%);
            color: white;
            justify-content: center;
            z-index: 1;
        }

        /*.bqt-column2 {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
        }*/

        /* TEXTES */
        .bqt-title {
            color: var(--sfr-red); /* Rouge brique */
            font-weight: 900;
            font-size: 1.4rem;
            text-transform: uppercase;
            line-height: 1.1;
            margin-bottom: 5px;
        }
        .bouquet-card.highlight .bqt-title { color: white; font-size: 1.6rem; margin-bottom: 10px; }

        .bqt-desc {
            font-weight: 800;
            color: #222;
            font-size: 1.4rem;
        }
        .bouquet-card.highlight .bqt-desc { color: white; font-size: 1.4rem; }

        /* PRIX */
        button.bqt-price {
            font-size: 1.3rem;
            font-weight: 900;
            color: #222;
            line-height: 1;
            margin: 10px 0;
        }
        button.bqt-price span { font-size: 0.9rem; font-weight: normal; vertical-align: middle; }
        button.bqt-price sup { font-size: 1.2rem; vertical-align: top; }

        .bouquet-card.highlight .bqt-price { color: white; font-size: 2rem; }

        .bqt-actions {
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            align-items: center;
            margin-top: 20px;
            position: relative;
        }

        /* BOUTONS (Style Pilule avec contour rouge) */
        button.btn-bqt-add {
            background: transparent;
            border: 1px solid #c42727;
            color: #c42727;
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 0.7rem;
            font-weight: bold;
            cursor: pointer;
            transition: 0.2s;
            display: block;
            white-space: nowrap;
        }
        button.btn-bqt-add:hover { background: #c42727; color: white; }
        button.btn-bqt-add.added { background: #c42727; color: white; }

        /* Bouton spécifique carte rouge */
        .bouquet-card.highlight button.btn-bqt-add {
            border-color: white;
            color: white;
            font-size: 0.9rem;
            padding: 8px 20px;
        }
        .bouquet-card.highlight button.btn-bqt-add:hover { background: white; color: #c42727; }

        /* OVERLAY DÉTAIL BOUQUET */
        .bqt-overlay {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background-color: rgba(0, 0, 0, 0.85); /* Fond sombre */
            z-index: 2000; /* Au-dessus de tout */
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
            backdrop-filter: blur(5px);
        }

        .bqt-overlay.visible {
            opacity: 1;
            pointer-events: all;
        }

        .bqt-modal-content {
            background: white;
            padding: 20px;
            border-radius: 15px;
            width: 90%;
            max-width: 600px; /* Largeur max de l'image */
            text-align: center;
            position: relative;
            box-shadow: 0 20px 50px rgba(0,0,0,0.5);
        }

        /* Galerie d'images dans l'overlay */
        .bqt-gallery-scroll {
            max-height: 70vh; /* Hauteur max avant de scroller (70% de l'écran) */
            overflow-y: auto; /* Active le scroll vertical */
            margin-top: 10px;
            padding-right: 5px; /* Petit espace pour la scrollbar */
        }

        /* Style des images injectées */
        .bqt-gallery-img {
            width: 100%;
            height: auto;
            border-radius: 10px;
            margin-bottom: 15px; /* Espace entre chaque image */
            display: block;
           
        }

        /* Scrollbar personnalisée (optionnel, plus joli) */
        .bqt-gallery-scroll::-webkit-scrollbar { width: 6px; }
        .bqt-gallery-scroll::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
        .bqt-gallery-scroll::-webkit-scrollbar-track { background: transparent; }

        /* Croix de fermeture */
        .close-bqt {
            position: absolute;
            top: 10px; right: 15px;
            font-size: 2rem;
            font-weight: bold;
            color: #333;
            cursor: pointer;
            line-height: 1;
        }
        .close-bqt:hover { color: var(--sfr-red); }

        /* Curseur main sur le petit + */
        .bqt-plus { cursor: pointer; transition: transform 0.2s; }
        .bqt-plus:hover { transform: scale(1.2); color: var(--sfr-red); }
        .bouquet-card.highlight .bqt-plus { color: white; }

        /* RESPONSIVE */
        @media (max-width: 900px) {
            #bouquets-container { grid-template-columns: repeat(2, 1fr); }
            .bouquet-card.highlight { grid-column: auto; grid-row: auto; min-height: 250px; }
        }
        @media (max-width: 600px) {
            #bouquets-container { grid-template-columns: 1fr; }
        }

        /* RESPONSIVE : Sur mobile, on repasse en 1 colonne */
        @media (max-width: 768px) {
            #bouquets-container { grid-template-columns: 1fr; }
            .bouquet-card.highlight { grid-column: auto; grid-row: auto; min-height: 250px; }
        }

        /* STEP 4: RECAP */
        .recap-container { background: white; padding: 40px; border-radius: 15px; box-shadow: 0 5px 20px rgba(0,0,0,0.1); max-width: 800px; margin: 0 auto; }
        .recap-line { display: flex; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid #eee; }
        .recap-total { font-size: 1.5rem; font-weight: bold; color: var(--sfr-red); border-top: 2px solid #333; margin-top: 20px; padding-top: 20px; }
        
        .form-group { margin-top: 30px; }
        .form-group label { display: block; margin-bottom: 10px; font-weight: bold; }
        .form-control { width: 100%; padding: 15px; border: 1px solid #ccc; border-radius: 5px; font-size: 1rem; }

        /* STICKY FOOTER */
        .sticky-footer {
            position: fixed; bottom: 0; left: 0; width: 100%;
            background: var(--sfr-red); color: white;
            padding: 15px 0; display: flex; justify-content: space-between; align-items: center;
            box-shadow: 0 -5px 10px rgba(0,0,0,0.1); z-index: 100;
        }
        .footer-content { max-width: 1200px; margin: 0 auto; width: 100%; display: flex; justify-content: flex-start; align-items: center; padding: 0 20px; }
        .total-display { font-size: 1.5rem; font-weight: bold; }

        /* OVERLAY CHAINES */
        button.btn-channels-pill {
            background-color: var(--sfr-red);
            color: white;
            padding: 8px 25px;
            border-radius: 20px;
            font-size: 1rem!important;
            font-weight: bold;
            text-transform: none;
            border: none;
            cursor: pointer;
            margin-top: 15px;
            z-index: 2;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
            transition: transform 0.2s;
            width: 100%;
            padding:10px!important;
        }
        button.btn-channels-pill:hover { transform: scale(1.05); background-color: #be0016; }

        .channels-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background-color: rgba(0,0,0,0.85); z-index: 1000;
            display: flex; justify-content: center; align-items: center;
            backdrop-filter: blur(5px); opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
        }
        .channels-overlay.visible { opacity: 1; pointer-events: all; }

        .channels-modal {
            background: transparent; width: 90%; max-width: 900px;
            border-radius: 20px; padding: 30px; text-align: center;
            position: relative; 
            max-height: 80vh; display: flex; flex-direction: column;
        }
        .channels-modal h2 { color: #e2001a; font-size: 2rem; margin-bottom: 10px; }
        .channels-modal h3 { color: #FFF; font-size: 1.4rem; margin-bottom: 20px; }

        /*.logos-grid {
            display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: 15px; margin-bottom: 30px; overflow-y: auto; flex-grow: 1; padding: 10px;
        }*/
        .logos-grid {
            display: flex; flex-direction: column; gap: 15px; margin-bottom: 30px; overflow-y: auto; flex-grow: 1; padding: 10px;
        }
        .logos-grid p {
            margin:0; padding:0;
        }
        .channel-logo {
            background: white; height: 60px; border-radius: 8px;
            display: flex; align-items: center; justify-content: center;
            font-weight: bold; color: #333; font-size: 0.9rem; box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .btn-back-modal {
            background: transparent; border: 2px solid white; color: white;
            padding: 10px 40px; border-radius: 30px; font-size: 1.1rem;
            cursor: pointer; text-transform: uppercase; transition: 0.3s;
            width: 160px; text-align: center; margin: 0 auto;
        }
        .btn-back-modal:hover { background: white; color: #333; }


        /* Bouton Retour dans le footer */
        .btn-footer-back {
            background: transparent;
            border: 1px solid white;
            color: white;
            padding: 8px 25px;
            border-radius: 20px;
            cursor: pointer;
            font-size: 0.9rem;
            text-transform: uppercase;
            font-weight: bold;
            transition: 0.3s;
            margin-right: 20px; /* Espace avec le texte du prix */
        }

        .btn-footer-back:hover {
            background: white;
            color: var(--sfr-red);
        }
        
        .hidden { display: none; }



        /* --- NOUVEAU DESIGN STEP 1 --- */

        .configurator-container {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        .config-block {
            flex: 1;
            min-width: 300px;
            background: white;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            display: flex;
            flex-direction: column;
        }

        /* HEADER DES BLOCS (Les Toggle) */
        .config-header {
            display: flex;
            padding: 15px;
            gap: 15px;
        }

        /* Wrapper pour les boutons images TV */
        .tv-img-wrapper {
            flex: 1;
            cursor: pointer;
            transition: transform 0.2s ease;
            /* On enlève les bordures/fonds car l'image fait tout le travail */
            background: transparent;
            border: none;
            padding: 0;
        }

        .tv-img-wrapper:hover {
            transform: scale(1.02); /* Petit effet de zoom au survol */
        }

        .tv-img-wrapper img {
            width: 100%;
            height: auto;
            display: block; /* Supprime l'espace fantôme sous les images */
            border-radius: 15px; /* Optionnel : si vos images ont des coins carrés */
        }

        /* Wrapper pour les boutons images Vitesse */
        .speed-img-wrapper {
            flex: 1;
            cursor: pointer;
            transition: transform 0.2s ease;
            background: transparent;
            border: none;
            padding: 0;
        }

        .speed-img-wrapper:hover {
            transform: scale(1.02);
        }

        .speed-img-wrapper img {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 15px; 
        }

        /* Style pour les images visuelles dans les blocs de config */
        .config-visual-img {
            width: 100%;
            max-width: 90%; /* Ajustez selon la taille réelle de vos images */
            height: auto;
            display: block;
            margin: 10px auto 20px auto; /* Marges pour aérer */
        }

        .config-toggle {
            flex: 1;
            border: 1px solid #ddd;
            border-radius: 15px;
            padding: 15px 5px;
            text-align: center;
            cursor: pointer;
            transition: 0.3s;
            background: white;
            color: black;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .config-toggle .icon { font-size: 1.5rem; margin-bottom: 5px; }
        .config-toggle small { font-size: 0.8rem; }
        .config-toggle .speed-val { font-size: 1.4rem; font-weight: 900; line-height: 1; }

        /* ETAT ACTIF (Noir/Dégradé Rouge) */
        .config-toggle.active {
            background: linear-gradient(135deg, #1a1a1a 0%, #3a1a1a 50%, #7a3030 100%);
            color: white;
            border-color: transparent;
            box-shadow: 0 5px 10px rgba(0,0,0,0.3);
        }

        /* CORPS DES BLOCS */
        .config-body {
            padding: 20px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            align-items: center; /* Centre le contenu */
            text-align: left;
            position: relative;
        }

        #step-1 .config-body > div {
            width:100%;
        }

        /* Typo interne */
        .config-body h3 { font-size: 1.2rem; font-weight: bold; margin-bottom: 10px; align-self: flex-start;}
        .config-body p { color: #333; font-size: 0.95rem; margin-bottom: 20px; line-height: 1.4; align-self: flex-start;}

        /* Visuel Box (Simulation CSS) */
        .box-visual {
            width: 120px; height: 140px;
            background: #111;
            border-radius: 5px;
            margin: 10px auto;
            position: relative;
            box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
        }
        .box-visual::after {
            content: ''; position: absolute; bottom: 0; right: -20px;
            width: 40px; height: 80px; background: #222; border-radius: 2px;
        }

        /* Bouton rouge "Découvrir nos chaînes" */
        .btn-channels-red {
            background: var(--sfr-red);
            color: white;
            border: none;
            padding: 12px 20px;
            border-radius: 25px;
            font-weight: bold;
            cursor: pointer;
            width: 100%;
            margin-top: auto;
        }
        .btn-channels-red:hover { background: #a01515; }

        /* Speedometer Icon */
        .speedometer-icon {
            margin: 20px auto;
        }

        /* BARRE DE PRIX NOIRE (Bas de page Step 1) */
        .price-bar-step1 {
            background: transparent; /* Fond noir */
            color: white;
            border-radius: 50px; /* Bords très ronds comme maquette */
            padding: 10px 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border: 2px solid white;
            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
            margin-top: 10px;
        }

        .price-container { display: flex; align-items: flex-start; }
        .big-price { font-size: 3.5rem; font-weight: 900; line-height: 1; }
        .price-decimals { display: flex; flex-direction: column; justify-content: center; padding-left: 5px; }
        .price-decimals span:first-child { font-size: 1.2rem; font-weight: bold; }
        .per-month { font-size: 0.8rem; opacity: 0.8; }

        .engagement-text {
            font-size: 0.9rem;
            font-weight: bold;
            text-align: right;
            margin-right: 20px;
        }

        .btn-step1-continue {
            background: transparent;
            border: 1px solid white;
            color: white;
            padding: 8px 20px;
            border-radius: 20px;
            cursor: pointer;
            text-transform: uppercase;
            font-weight: bold;
        }
        .btn-step1-continue:hover { background: white; color: black; }

        /* Responsive Step 1 */
        @media (max-width: 768px) {
            .configurator-container { flex-direction: column; }
            .price-bar-step1 { flex-direction: column; padding: 20px; border-radius: 20px; gap: 10px; }
            .engagement-text { margin-right: 0; margin-bottom: 10px; }
        }







        /* --- STYLE STEP 4 (RECAP DASHBOARD) --- */

        .recap-layout {
            display: flex;
            gap: 20px;
            align-items: stretch; /* Les colonnes ont la même hauteur */
            justify-content: center;
            flex-wrap: wrap;
        }

        /* Colonne Image */
        .recap-col-img {
            flex: 0 0 300px; /* Largeur fixe */
        }
        .recap-main-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 20px;
            display: block;
        }

        /* Colonne Offre */
        .recap-col-offer {
            flex: 0 0 280px;
        }
        .recap-offer-card {
            background: #FFF;
            border: 1px solid #333; /* Bordure fine noire comme maquette */
            border-radius: 20px;
            padding: 30px 20px;
            text-align: center;
            height: 100%;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .recap-price-big {
            font-size: 2.5rem;
            font-weight: 900;
            line-height: 1;
        }

        /* Colonne Détails */
        .recap-col-details {
            flex: 1; /* Prend le reste de la place */
            min-width: 300px;
            background: #fff; /* Fond gris léger global ou transparent */
            border-radius: 20px;
            /* padding: 20px; Si besoin d'un fond global, sinon transparent */
        }

        .recap-mentions {
            font-size: 0.8rem;
            color: #666;
            margin-bottom: 20px;
        }

        /* Grille des options (Pilules grises) */
        .options-grid-list {
            display: grid;
            grid-template-columns: 1fr 1fr; /* 2 colonnes */
            gap: 10px;
            margin-bottom: 20px;
            max-height: 300px; /* Scroll si trop d'options */
            overflow-y: auto;
        }
        /* Cibler le tout premier élément de la liste */
        .options-grid-list > :first-child {
            grid-column: 1 / -1; 
            text-align: center;
            background-color: #ddd;
            font-size: 1rem;
        }

        .option-pill-item {
            background: transparent;
            border: 1px solid #ccc;
            border-radius: 10px;
            padding: 8px 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.9rem;
            font-weight: 500;
        }
        .option-pill-item.highlight {
            border-color:var(--sfr-red);
            background-color:var(--sfr-red);
            color:white;
            font-weight: 900;
            font-size: 1.4rem;
            text-transform: uppercase;
        }

        /* Barre Total */
        .recap-total-bar {
            background: transparent; 
            border: 1px solid var(--sfr-red);
            border-radius: 30px; /* Forme pilule */
            padding: 10px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: var(--sfr-red);
            font-weight: 900;
            font-size: 1.5rem;
            text-transform: lowercase;
            margin-bottom: 20px;
        }
        .recap-total-bar span:first-child { font-variant: small-caps; font-size: 1.2rem; }

        /* Formulaire */
        .form-input-pill {
            width: calc(100% - 30px);
            padding: 10px 15px;
            border: 1px solid #333;
            border-radius: 30px;
            background: transparent;
        }
        .btn-rdv-red {
            background: var(--sfr-red); /* Rouge plus foncé comme maquette */
            color: white;
            border: none;
            padding: 12px 30px;
            border-radius: 30px;
            font-weight: bold;
            font-size: 1.1rem;
            cursor: pointer;
            float: right; /* Aligné à droite */
        }
        .btn-rdv-red:hover { background: #a01010; }

        /* Scrollbar custom pour la liste options */
        .options-grid-list::-webkit-scrollbar { width: 5px; }
        .options-grid-list::-webkit-scrollbar-thumb { background: #ccc; border-radius: 5px; }

        /* Responsive */
        @media (max-width: 1000px) {
            .recap-layout { flex-direction: column; align-items: center; }
            .recap-col-img, .recap-col-offer, .recap-col-details { width: 100%; flex: auto; }
            .recap-main-img { max-height: 200px; object-fit: cover; }
        }


        /* CONTENEUR DU CONSENTEMENT */
        .consent-block {
            display: flex;
            align-items: flex-start; /* Aligne le cercle en haut du texte */
            gap: 15px;
            margin-bottom: 20px;
            cursor: pointer;
        }

        /* LA CHECKBOX PERSONNALISÉE (CERCLE ROUGE) */
        #consent-check {
            /* 1. On supprime le style par défaut du navigateur */
            -webkit-appearance: none;
            appearance: none;
            
            /* 2. On définit la taille et la forme (Cercle) */
            width: 24px;
            height: 24px;
            border-radius: 50%; /* C'est ça qui fait le rond */
            border: 2px solid #c42727; /* Bordure rouge SFR */
            background-color: white;
            
            /* 3. Mise en page */
            flex-shrink: 0; /* Empêche le cercle de s'écraser si le texte est long */
            cursor: pointer;
            position: relative;
            margin-top: 2px; /* Petit ajustement pour aligner avec la 1ère ligne de texte */
            transition: all 0.2s ease;
        }

        /* ETAT COCHÉ (CHECKED) */
        #consent-check:checked {
            background-color: #c42727; /* Le fond devient rouge */
        }

        /* PETIT "V" (CHECKMARK) QUAND C'EST COCHÉ */
        #consent-check:checked::after {
            content: '';
            position: absolute;
            top: 45%; left: 50%;
            transform: translate(-50%, -50%) rotate(45deg);
            width: 5px;
            height: 10px;
            border-bottom: 2px solid white;
            border-right: 2px solid white;
        }

        /* LE TEXTE DU LABEL */
        .consent-block label {
            font-size: 0.75rem;
            color: #555;
            line-height: 1.4;
            cursor: pointer;
            user-select: none; /* Empêche de surligner le texte en cliquant */
        }