/* ================================================== CORRECTION THEME YASI ONE NETTOYAGE ANCIEN STYLE ================================================== */ /* Suppression anciens fonds colorés */ #page.site, .site-info, #google_translate_widget-4, #google_translate_element, .entry-title, h1.entry-title, .elementor-tab-title, .elementor-tab-content, .woocommerce-loop-product__title, bdi { background-image:none !important; background:#111111 !important; color:#eeeeee !important; } /* TITRES */ .entry-title, .page-title, h1.entry-title, h2.entry-title, .elementor-heading-title { font-family: Arial, sans-serif !important; color:#D4AF37 !important; background:none !important; } /* LOGO */ h1.site-title, h1.site-title a { background:none !important; color:#D4AF37 !important; border:none !important; } /* DESCRIPTION DU SITE */ .site-description, p.site-description { background:none !important; color:#E8C766 !important; font-family:Arial,sans-serif !important; } /* MENU */ .asthir-main-nav ul li a { color:#eeeeee !important; font-family:Arial,sans-serif !important; } .asthir-main-nav ul li a:hover { color:#D4AF37 !important; } /* PRODUITS WOOCOMMERCE */ .woocommerce ul.products li.product .woocommerce-loop-product__title { background:#111 !important; color:#D4AF37 !important; text-transform:none !important; } .woocommerce ul.products li.product { background:#111 !important; border:1px solid rgba(212,175,55,.3) !important; border-radius:15px !important; } /* PRIX */ bdi, .woocommerce-Price-amount { background:#111 !important; color:#E8C766 !important; font-size:20px !important; } /* ELEMENTOR ACCORDEON */ .elementor-accordion-item, .elementor-tab-title, .elementor-tab-content { background:#111 !important; border-color:#D4AF37 !important; } .elementor-accordion-title, .elementor-active .elementor-accordion-title { color:#D4AF37 !important; } /* GOOGLE TRADUCTION */ #google_translate_element, #google_translate_widget-4 { background:#111 !important; border:1px solid #D4AF37 !important; } /* IMAGES */ .alignnone, .wp-image-8741, .wp-image-8763, .wp-image-9425, .wp-image-9746 { border-color:#D4AF37 !important; border-width:1px !important; padding:8px !important; } /* FOOTER */ .site-info, #colophon { background:#050505 !important; color:#cccccc !important; font-size:14px !important; } /* CORRECTION GLOBALE DES SPANS */ .entry-content span { font-family:inherit !important; color:inherit !important; overflow:visible !important; } /* CACHE ANCIEN TITRE */ h1.site-title { display:none !important; } /* TRANSITION */ a, button, img { transition:.3s ease !important; } /* Bloc tableau abonnement - correction fond blanc */ table tr td { background:#111111 !important; color:#eeeeee !important; border:1px solid rgba(212,175,55,.35) !important; padding:12px !important; } /* Ligne au survol */ table tr:hover td { background:#1a1a1a !important; color:#E8C766 !important; } /* Bordure du tableau */ table { background:#111111 !important; border-collapse:collapse !important; border-radius:12px !important; overflow:hidden !important; } /* Première colonne (durée) */ table td:first-child { color:#D4AF37 !important; font-weight:700 !important; } /* Prix */ table td:nth-child(2) { color:#E8C766 !important; font-weight:800 !important; } /* ================================================== BOUTON WOOCOMMERCE "VOIR LES PRODUITS" NOIR & OR PREMIUM ================================================== */ .woocommerce a.button.product_type_grouped, .woocommerce ul.products li.product a.button { background:linear-gradient( 135deg, #E8C766, #B88A28 ) !important; color:#111111 !important; border:2px solid #D4AF37 !important; border-radius:50px !important; padding:12px 25px !important; font-weight:700 !important; text-transform:uppercase !important; letter-spacing:.5px !important; display:inline-block !important; } /* Texte du bouton */ .woocommerce a.button.product_type_grouped span { color:#111111 !important; } /* Survol */ .woocommerce a.button.product_type_grouped:hover, .woocommerce ul.products li.product a.button:hover { background:#111111 !important; color:#D4AF37 !important; border-color:#D4AF37 !important; transform:translateY(-2px); } /* Suppression ancien style Yasi */ .woocommerce a.button.product_type_grouped::before { display:none !important; } /* ================================================== BOUTON ACHETER MAINTENANT NOIR & OR PREMIUM ================================================== */ a[style*="background: #ffb300"], a[style*="background:#ffb300"] { background:linear-gradient( 135deg, #E8C766, #B88A28 ) !important; color:#111111 !important; border:2px solid #D4AF37 !important; border-radius:50px !important; padding:18px 45px !important; font-size:20px !important; font-weight:800 !important; text-decoration:none !important; display:inline-block !important; box-shadow:0 8px 20px rgba(0,0,0,.45) !important; } /* Emoji panier */ a[style*="background: #ffb300"] img, a[style*="background:#ffb300"] img { filter:none !important; vertical-align:middle !important; margin-right:8px !important; } /* Hover */ a[style*="background: #ffb300"]:hover, a[style*="background:#ffb300"]:hover { background:#111111 !important; color:#D4AF37 !important; border-color:#D4AF37 !important; transform:translateY(-3px); box-shadow:0 12px 25px rgba(212,175,55,.25) !important; } /* ================================================== BLOC ABONNEMENT - NETTOYAGE YASI ONE NOIR & OR PREMIUM ================================================== */ /* Conteneurs principaux */ div[style*="font-family: 'Montserrat'"] { background:#111111 !important; border-radius:14px !important; box-shadow:0 10px 25px rgba(0,0,0,.45) !important; color:#eeeeee !important; } /* Titres */ div[style*="font-family: 'Montserrat'"] h2 { color:#D4AF37 !important; } div[style*="font-family: 'Montserrat'"] h3 { background:#151515 !important; border:2px solid #D4AF37 !important; color:#eeeeee !important; } /* Bloc IMPORTANT rouge */ div[style*="border: 2px solid #d9534f"] { background:#151515 !important; border:2px solid #D4AF37 !important; } div[style*="border: 2px solid #d9534f"] p { color:#E8C766 !important; } /* Cartes abonnements */ div[style*="background: #dcfce7"], div[style*="background:#dcfce7"] { background:#111111 !important; border-left:10px solid #D4AF37 !important; color:#eeeeee !important; } div[style*="background: #ffedd5"], div[style*="background:#ffedd5"] { background:#111111 !important; border-left:10px solid #B88A28 !important; color:#eeeeee !important; } /* Prix */ div[style*="background: #dcfce7"] span, div[style*="background:#dcfce7"] span, div[style*="background: #ffedd5"] span, div[style*="background:#ffedd5"] span { color:#E8C766 !important; } /* Texte secondaire */ div[style*="margin-top: 10px"] { color:#cccccc !important; } div[style*="margin-top: 10px"] strong { color:#D4AF37 !important; } /* Bloc paiement */ div[style*="background: #f0fdf4"], div[style*="background:#f0fdf4"] { background:#151515 !important; border:2px solid #D4AF37 !important; color:#eeeeee !important; } /* Bouton formulaire */ button[style*="background-color: orange"] { background:linear-gradient( 135deg, #E8C766, #B88A28 ) !important; color:#111 !important; border:2px solid #D4AF37 !important; border-radius:50px !important; padding:15px 40px !important; font-size:18px !important; font-weight:700 !important; } button[style*="background-color: orange"]:hover { background:#111 !important; color:#D4AF37 !important; } /* Jetpack contact form */ .contact-form { background:#111 !important; border:1px solid rgba(212,175,55,.4) !important; border-radius:14px !important; padding:25px !important; } .contact-form label { color:#E8C766 !important; } .contact-form input, .contact-form textarea { background:#1a1a1a !important; color:white !important; border:1px solid #D4AF37 !important; } .contact-form input[type="submit"] { background:linear-gradient( 135deg, #E8C766, #B88A28 ) !important; color:#111 !important; border-radius:50px !important; font-weight:800 !important; } /* ================================================== PAGE CONTACT - NOIR & OR PREMIUM ================================================== */ /* Conteneur de la page contact */ .page-content, .entry-content { color:#eeeeee !important; } /* Texte d'introduction */ .entry-content p { color:#dddddd !important; font-size:16px; } /* Bloc formulaire Jetpack */ .contact-form { background:#111111 !important; border:1px solid rgba(212,175,55,.4) !important; border-radius:16px !important; padding:30px !important; box-shadow:0 10px 25px rgba(0,0,0,.45) !important; } /* Labels */ .contact-form label { color:#E8C766 !important; font-weight:700 !important; display:block !important; margin-bottom:8px !important; } /* Champs */ .contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="url"], .contact-form textarea { width:100% !important; background:#1a1a1a !important; color:#ffffff !important; border:1px solid #D4AF37 !important; border-radius:10px !important; padding:14px !important; box-sizing:border-box !important; } /* Placeholder */ .contact-form input::placeholder, .contact-form textarea::placeholder { color:#999999 !important; } /* Zone commentaire */ .contact-form textarea { min-height:180px !important; } /* Focus */ .contact-form input:focus, .contact-form textarea:focus { border-color:#E8C766 !important; box-shadow:0 0 12px rgba(212,175,55,.35) !important; outline:none !important; } /* Bouton envoyer */ .contact-form input[type="submit"], .contact-form .pushbutton-wide { background:linear-gradient( 135deg, #E8C766, #B88A28 ) !important; color:#111111 !important; border:2px solid #D4AF37 !important; border-radius:50px !important; padding:14px 35px !important; font-size:17px !important; font-weight:800 !important; cursor:pointer !important; } /* Hover bouton */ .contact-form input[type="submit"]:hover, .contact-form .pushbutton-wide:hover { background:#111111 !important; color:#D4AF37 !important; } /* Titre de page contact */ .entry-title { color:#D4AF37 !important; background:none !important; } /* ================================================== TITRES DE PAGES - NOIR & OR ================================================== */ .entry-header.asthir-page { background:#111111 !important; padding:35px 20px !important; border-radius:14px !important; border:1px solid rgba(212,175,55,.35) !important; margin-bottom:30px !important; } /* Titre Contact, Pages, Articles */ .entry-header.asthir-page h1, h1.NEOX2 { background:none !important; background-image:none !important; color:#D4AF37 !important; font-family:Arial,sans-serif !important; font-size:38px !important; font-weight:800 !important; text-transform:uppercase !important; margin:0 !important; } /* Effet premium */ .entry-header.asthir-page h1::after { content:""; display:block; width:80px; height:3px; background:#D4AF37; margin:15px auto 0; border-radius:5px; } /* MENU NEOX2 - STYLE BLANC PREMIUM */ .asthir-main-nav { background: #ffffff !important; box-shadow: 0 5px 20px rgba(0,0,0,0.08); border-radius: 0 0 18px 18px; padding: 12px 0; } .main-navigation ul { display: flex; justify-content: center; align-items: center; gap: 8px; } .main-navigation ul li a { color: #111827 !important; font-size: 15px; font-weight: 600; padding: 12px 18px; border-radius: 30px; transition: all .3s ease; } .main-navigation ul li a:hover, .main-navigation ul li.current-menu-item a { background: #ffb300; color: #000 !important; } /* Sous-menu */ .main-navigation ul ul { background: #ffffff; border-radius: 15px; padding: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.15); width: 280px; } .main-navigation ul ul li a { color:#1f2937 !important; padding:10px 15px; font-size:14px; border-radius:10px; } .main-navigation ul ul li a:hover { background:#fff3cd; color:#000 !important; } /* Bouton menu mobile */ .menu-toggle { background:#ffb300 !important; color:#000 !important; border-radius:30px; padding:12px 25px; font-weight:bold; } .asthir-main-nav { background:#ffffff; box-shadow:0 4px 15px rgba(0,0,0,0.08); } .main-navigation a { color:#222 !important; } .main-navigation a:hover { color:#ffb300 !important; } .asthir-main-nav { background:#ffffff; box-shadow:0 4px 15px rgba(0,0,0,0.08); } .main-navigation a { color:#222 !important; } .main-navigation a:hover { color:#ffb300 !important; } /* Fond général du site */ body { background: #111111 !important; color: #ffffff; } /* Zone principale des pages */ .ast-container, .site-content, .entry-content, .page-content { background: #111111 !important; color: #ffffff; } /* Titres des pages */ .entry-title, .entry-header h1 { color: #ffb300 !important; } /* Menu */ .asthir-main-nav { background:#0b0b0b !important; border-bottom:2px solid #ffb300; } .main-navigation a { color:#ffffff !important; } .main-navigation a:hover, .main-navigation .current-menu-item a { background:#ffb300; color:#000 !important; } /* Blocs WooCommerce / abonnements */ .woocommerce, .woocommerce-page { background:#111111; } /* MENU THEME DARK OR */ .asthir-main-nav { background: #111111 !important; border-bottom: 2px solid #d4af37; } .asthir-main-nav .menu a { color: #f5c542 !important; font-weight: 600; text-transform: uppercase; transition: 0.3s; } .asthir-main-nav .menu a:hover { color: #ffffff !important; background: #d4af37; border-radius: 8px; } /* Menu actif */ .asthir-main-nav .current-menu-item > a { color: #ffffff !important; background: #d4af37; border-radius: 8px; } /* Sous-menu */ .asthir-main-nav .sub-menu { background: #151515 !important; border: 1px solid #d4af37; } .asthir-main-nav .sub-menu a { color: #f5c542 !important; } .asthir-main-nav .sub-menu a:hover { background: #d4af37; color: #000 !important; } /* Bouton mobile */ .menu-toggle { background: #d4af37 !important; color: #000 !important; } /* Titres des pages - thème Dark & Or */ .entry-title, .entry-header, .asthir-page { background: #111111 !important; } .entry-title { color: #d4af37 !important; font-weight: 700; text-align: center; } /* ===== STYLE PREMIUM IMAGES PRODUITS ===== */ /* Bloc produit footer */ .product_list_widget li { display: flex; align-items: center; gap: 18px; padding: 15px 0; } /* Images produits footer */ .product_list_widget img { width: 105px !important; height: 130px !important; object-fit: contain !important; background: linear-gradient(145deg,#111,#000); padding: 8px; border-radius: 16px; border: 1px solid rgba(212,175,55,.25); box-shadow: 0 8px 20px rgba(0,0,0,.6), inset 0 0 15px rgba(212,175,55,.08); transition: all .35s ease; } /* Animation souris footer */ .product_list_widget img:hover { transform: translateY(-5px) scale(1.06); border-color: #D4AF37; box-shadow: 0 12px 30px rgba(212,175,55,.35), 0 0 15px rgba(212,175,55,.3); } /* Images boutique */ .woocommerce ul.products li.product img { height: 300px !important; width: 100% !important; object-fit: contain !important; background: linear-gradient(145deg,#111,#000); padding: 15px; border-radius: 22px; border: 1px solid rgba(212,175,55,.25); transition: .35s ease; } /* Effet souris boutique */ .woocommerce ul.products li.product img:hover { transform: scale(1.03); border-color:#D4AF37; } /* Texte produit */ .product-title { color:#fff; transition:.3s ease; } .product_list_widget li:hover .product-title { color:#D4AF37; } /* =========================== THEME DARK & OR GLOBAL =========================== */ /* Fond général */ html, body { background: #111111 !important; color: #f5f5f5 !important; } /* Toutes les zones principales */ .site, .site-content, .site-main, .content-area, .ast-container, .container, .page, .post, article, .entry-content, .page-content, .entry-header { background: #111111 !important; color: #f5f5f5 !important; } /* Titres */ .entry-title, h1, h2, h3, h4, h5, h6 { color: #d4af37 !important; background: transparent !important; } /* Cartes */ .wp-block-group, .wp-block-columns, .wp-block-column { background: #1b1b1b; border-radius: 12px; } /* Paragraphes */ p, li, span { color: #f5f5f5; } /* ========================= CARTES UNIFORMES ========================= */ .wp-block-group, .wp-block-column, .wp-block-cover, article, .entry-content > div, .woocommerce .product, .product, .card { background: #1b1b1b !important; color: #f5f5f5 !important; border: 1px solid rgba(212,175,55,.35); border-radius: 14px !important; box-shadow: 0 8px 22px rgba(0,0,0,.35); overflow: hidden; transition: .25s ease; } .wp-block-group:hover, .product:hover, .card:hover{ transform: translateY(-3px); box-shadow:0 14px 28px rgba(0,0,0,.45); } /* ========================= BOUTONS ========================= */ button, input[type=submit], .wp-element-button, .button, a.button, .wc-block-components-button { background:#d4af37 !important; color:#111 !important; border:none !important; border-radius:50px !important; padding:14px 34px !important; font-weight:700; font-size:16px; text-decoration:none; transition:.25s; } button:hover, input[type=submit]:hover, .button:hover, a.button:hover{ background:#f3cd63 !important; color:#000 !important; transform:translateY(-2px); } .info-box{ background:#1b1b1b; border-left:5px solid #d4af37; border-radius:14px; padding:20px; color:#fff; } /* Sections accueil Dark & Gold */ .home .entry-content section, .home .entry-content > div { background:#1b1b1b !important; border-radius:14px; padding:30px; margin-bottom:30px; border:1px solid rgba(212,175,55,.35); box-shadow:0 8px 20px rgba(0,0,0,.35); } .home h2, .home h3 { color:#d4af37 !important; text-align:center; font-weight:700; } /* ========================= BOUTONS TELECHARGEMENT EFFET DARK & OR ========================= */ a[href*="telechargez-neox2-apk"], a[href*="installer-neox2-et-golden-smart"] { position: relative; overflow: hidden; transition: all .35s ease; box-shadow: 0 5px 15px rgba(212,175,55,.25); } /* Effet au survol */ a[href*="telechargez-neox2-apk"]:hover, a[href*="installer-neox2-et-golden-smart"]:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(212,175,55,.55); } /* Premier bouton or */ a[href*="telechargez-neox2-apk"]:hover { background:#f3cd63 !important; color:#000 !important; } /* Deuxième bouton contour or */ a[href*="installer-neox2-et-golden-smart"]:hover { background:#d4af37 !important; color:#111 !important; } /* Harmonisation boutons téléchargement */ .entry-content a[href*="telechargez-neox2-apk-3-5"], .entry-content a[href*="installer-neox2-et-golden-smart"] { background: #ffb300 !important; color: #000 !important; border-radius: 50px !important; font-weight: 700 !important; padding: 18px 40px !important; display: inline-block !important; text-decoration: none !important; box-shadow: 0 0 15px rgba(255,179,0,.7) !important; transition: .3s ease !important; } /* Même effet lumière que les autres boutons */ .entry-content a[href*="telechargez-neox2-apk-3-5"]:hover, .entry-content a[href*="installer-neox2-et-golden-smart"]:hover { color: #000 !important; transform: translateY(-3px); box-shadow: 0 0 10px #ffb300, 0 0 25px #ffb300, 0 0 40px rgba(255,179,0,.8) !important; } /* ============================== BLOC TELECHARGEMENT NEOX2 ============================== */ .neox2-download { text-align:center; padding:50px 20px; } .neox2-download h2 { color:#D4AF37; font-size:32px; font-weight:800; } .neox2-download p { color:#ddd; font-size:18px; margin-bottom:30px; } .neox2-download-buttons { display:flex; justify-content:center; gap:20px; flex-wrap:wrap; } /* Boutons */ .neox2-download .neox2-main-btn { display:inline-flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#F7D774,#D4AF37,#B8860B); color:#000 !important; padding:15px 35px; border-radius:50px; font-weight:800; font-size:17px; text-decoration:none; box-shadow:0 8px 20px rgba(212,175,55,.35); transition:.35s; } .neox2-download .neox2-main-btn:hover { transform:translateY(-4px); box-shadow:0 12px 30px rgba(212,175,55,.55); } /* ================================== BOUTONS TELECHARGEMENT NEOX2 ================================== */ .neox2-download .neox2-main-btn { display:inline-flex; align-items:center; justify-content:center; background:linear-gradient( 135deg, #F7D774, #D4AF37 ); color:#000 !important; padding:11px 26px; border-radius:40px; font-size:15px; font-weight:800; text-decoration:none !important; box-shadow: 0 6px 16px rgba(212,175,55,.35); transition:all .35s ease; } /* Effet curseur dessus */ .neox2-download .neox2-main-btn:hover { background:linear-gradient( 135deg, #222, #000 ) !important; color:#D4AF37 !important; transform:translateY(-3px); box-shadow: 0 10px 25px rgba(212,175,55,.45); } /* Quand on clique */ .neox2-download .neox2-main-btn:active { transform:translateY(-1px); box-shadow: 0 5px 12px rgba(212,175,55,.25); } /* ================================== BOUTONS TELECHARGEMENT NEOX2 ================================== */ .neox2-download-buttons { display:flex; justify-content:center; gap:20px; flex-wrap:wrap; } .neox2-download .neox2-main-btn { display:inline-flex; align-items:center; justify-content:center; width:240px; height:48px; background:linear-gradient( 135deg, #F7D774, #D4AF37 ); color:#000 !important; border-radius:40px; font-size:15px; font-weight:800; text-decoration:none !important; box-shadow: 0 6px 16px rgba(212,175,55,.35); transition:all .35s ease; } /* Effet curseur */ .neox2-download .neox2-main-btn:hover { background:linear-gradient( 135deg, #222, #000 ) !important; color:#D4AF37 !important; transform:translateY(-3px); box-shadow: 0 10px 25px rgba(212,175,55,.45); } /* Mobile */ @media(max-width:600px){ .neox2-download .neox2-main-btn { width:100%; max-width:280px; } } /* ===================================== BOUTONS PREMIUM TELECHARGEMENT NEOX2 ===================================== */ .neox2-download-buttons { display:flex; justify-content:center; align-items:center; gap:25px; flex-wrap:wrap; } .neox2-download .neox2-main-btn { display:flex; align-items:center; justify-content:center; width:290px; height:58px; padding:0 25px; background:linear-gradient( 135deg, #F8DC82, #D4AF37, #B8860B ); color:#000 !important; border-radius:50px; font-size:16px; font-weight:900; letter-spacing:.3px; text-align:center; text-decoration:none !important; box-shadow: 0 8px 25px rgba(212,175,55,.35), inset 0 1px 0 rgba(255,255,255,.4); transition:all .35s ease; } /* Effet curseur */ .neox2-download .neox2-main-btn:hover { background:linear-gradient( 135deg, #1a1a1a, #000 ) !important; color:#D4AF37 !important; transform:translateY(-5px); box-shadow: 0 15px 35px rgba(212,175,55,.45); } /* Effet clic */ .neox2-download .neox2-main-btn:active { transform:translateY(-2px); } /* Version mobile */ @media(max-width:600px){ .neox2-download .neox2-main-btn { width:90%; max-width:320px; height:55px; font-size:15px; } } /* Taille finale boutons téléchargement */ .neox2-download .neox2-main-btn { width:320px; height:62px; padding:0 30px; font-size:16px; } @media(max-width:600px){ .neox2-download .neox2-main-btn { width:90%; max-width:330px; height:58px; font-size:15px; } } /* Ajustement final largeur boutons téléchargement */ .neox2-download .neox2-main-btn { width:350px; height:64px; padding:0 35px; font-size:16px; white-space:nowrap; } @media(max-width:600px){ .neox2-download .neox2-main-btn { width:95%; max-width:350px; height:58px; font-size:15px; } } /* =================================== TITRES CATEGORIES MAGNUM OTT =================================== */ /* Tous les titres de catégories */ .entry-content h2, .entry-content h3, .entry-content h4 { color:#D4AF37 !important; font-weight:900 !important; text-transform:none; margin-top:35px; margin-bottom:15px; } /* Titres principaux */ .entry-content h2 { font-size:32px; } /* Pays et catégories */ .entry-content h3 { font-size:24px; line-height:1.3; } /* Petit effet premium sous les titres */ .entry-content h3::after { content:""; display:block; width:70px; height:3px; background:#D4AF37; border-radius:10px; margin-top:10px; } /* Version mobile */ @media(max-width:600px){ .entry-content h2 { font-size:26px; } .entry-content h3 { font-size:21px; } } /* Correction visibilité titres Magnum OTT */ .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h2 a, .entry-content h3 a, .entry-content h4 a { color:#D4AF37 !important; opacity:1 !important; visibility:visible !important; -webkit-text-fill-color:#D4AF37 !important; } /* Style titres pays */ .entry-content h3 { font-size:24px !important; font-weight:900 !important; line-height:1.4 !important; } /* ================================= HARMONISATION PAGE MAGNUM OTT ================================= */ /* Fond contenu */ .entry-content { background:#0b0b0b; color:#fff; } /* Texte général */ .entry-content p, .entry-content li { color:#ffffff !important; } /* Titres catégories */ .entry-content h2, .entry-content h3, .entry-content h4 { color:#D4AF37 !important; } /* Liens */ .entry-content a { color:#D4AF37; } /* Listes */ .entry-content ul { color:#fff; } /* Fond page Magnum OTT uniquement */ body.page-id-XXXX { background:#0b0b0b !important; } /* Zone principale */ body.page-id-XXXX .site-content, body.page-id-XXXX .content-area, body.page-id-XXXX .entry-content { background:#0b0b0b !important; } /* Texte */ body.page-id-XXXX p, body.page-id-XXXX li { color:#ffffff !important; } /* Correction accordéon Magnum OTT */ .Rich_Web_Tabs_Accordion_Content_1543657696 > div { background: #1b1b1b !important; border: 1px solid rgba(212,175,55,0.35) !important; border-radius: 14px !important; padding: 25px !important; } /* Texte contenu accordéon */ .Rich_Web_Tabs_Accordion_Content_1543657696 p, .Rich_Web_Tabs_Accordion_Content_1543657696 li, .Rich_Web_Tabs_Accordion_Content_1543657696 span { color: #eeeeee !important; font-size: 16px !important; line-height: 1.7 !important; } /* Titres pays */ .Rich_Web_Tabs_Accordion_Content_1543657696 h3, .Rich_Web_Tabs_Accordion_Content_1543657696 h4 { color: #D4AF37 !important; font-weight: 700 !important; margin-top: 18px !important; } /* Supprime l'ancien fond crème */ .Rich_Web_Tabs_Accordion_Content_1543657696 { --rw_tabs_content_bgc-1543657696: #1b1b1b !important; } /* Correction forcée contenu Magnum OTT */ .Rich_Web_Tabs_Accordion_Content_1543657696, .Rich_Web_Tabs_Accordion_Content_1543657696 *, .rw_tabs_acd_cont1543657696, .rw_tabs_acd_cont1543657696 * { background-color: #1b1b1b !important; color: #eeeeee !important; } .Rich_Web_Tabs_Accordion_Content_1543657696 h1, .Rich_Web_Tabs_Accordion_Content_1543657696 h2, .Rich_Web_Tabs_Accordion_Content_1543657696 h3, .Rich_Web_Tabs_Accordion_Content_1543657696 h4 { color: #D4AF37 !important; } .Rich_Web_Tabs_Accordion_Content_1543657696 p, .Rich_Web_Tabs_Accordion_Content_1543657696 li { color: #eeeeee !important; } /* Correction accordéons Magnum OTT - style NEOX2 */ [class^="rw_tabs_acd_cont"] .etab-editor-content { background: #1b1b1b !important; color: #eeeeee !important; padding: 25px !important; border-radius: 12px !important; } /* Texte des chaînes */ [class^="rw_tabs_acd_cont"] .etab-editor-content p, [class^="rw_tabs_acd_cont"] .etab-editor-content strong { color: #eeeeee !important; font-size: 16px !important; line-height: 1.8 !important; } /* Titres en gras */ [class^="rw_tabs_acd_cont"] .etab-editor-content strong { font-weight: 600 !important; } /* Tous les contenus du plugin Rich Web Tabs */ div[class*="rw_tabs_acd_cont"]{ background:#1b1b1b !important; color:#f5f5f5 !important; } div[class*="rw_tabs_acd_cont"] *{ color:#f5f5f5 !important; } div[class*="rw_tabs_acd_cont"] p, div[class*="rw_tabs_acd_cont"] strong, div[class*="rw_tabs_acd_cont"] li, div[class*="rw_tabs_acd_cont"] span, div[class*="rw_tabs_acd_cont"] h1, div[class*="rw_tabs_acd_cont"] h2, div[class*="rw_tabs_acd_cont"] h3, div[class*="rw_tabs_acd_cont"] h4{ color:#f5f5f5 !important; } /* Harmonisation complète des accordéons */ .Rich_Web_Tabs_Accordion_Content, [class*="Rich_Web_Tabs_Accordion_Content"], [class*="rw_tabs_acd_cont"], [class*="rw_tabs_acd_cont"] > div, [class*="rw_tabs_acd_cont"] .etab-editor-content{ background:#1b1b1b !important; background-color:#1b1b1b !important; color:#f5f5f5 !important; border:1px solid rgba(212,175,55,.35) !important; border-radius:12px !important; box-shadow:0 8px 20px rgba(0,0,0,.35) !important; } [class*="rw_tabs_acd_cont"] *{ color:#f5f5f5 !important; } /* Design premium des titres Rich Web Tabs */ [class*="Rich_Web_Tabs_h3"] { background: #1b1b1b !important; background-color: #1b1b1b !important; color: #ffffff !important; border: 1px solid rgba(212,175,55,.35) !important; border-radius: 12px !important; box-shadow: 0 5px 15px rgba(0,0,0,.35) !important; } /* Quand l'onglet est ouvert */ [class*="Rich_Web_Tabs_h3"].active { background: #111111 !important; color: #D4AF37 !important; } /* Texte du titre */ [class*="rw_tabs_act_st_title"] { color: #ffffff !important; font-weight: 700 !important; } /* Titre actif */ [class*="Rich_Web_Tabs_h3"].active [class*="rw_tabs_act_st_title"] { color: #D4AF37 !important; } /* Correction bandeau blanc Rich Web Tabs */ .Rich_Web_Tabs_h3_91525866, .Rich_Web_Tabs_h3_91525866 *, .Rich_Web_Tabs_h3, .Rich_Web_Tabs_h3 *, .rw_tabs_act_st_div_l91525866, .rw_tabs_act_st_l91525866, .rw_tabs_act_st_r91525866, .rw_tabs_act_st_title, .arrowDown91525866, .collapseIcon91525866 { background: #1b1b1b !important; background-color: #1b1b1b !important; background-image: none !important; color: #ffffff !important; } /* Onglet ouvert */ .Rich_Web_Tabs_h3_91525866.active { background: #111111 !important; border-color: #D4AF37 !important; } /* Texte */ .rw_tabs_act_st_title { color: #D4AF37 !important; } /* Harmonisation de tous les titres Rich Web Tabs */ h3[class^="Rich_Web_Tabs_h3_"] { background: #1b1b1b !important; background-color: #1b1b1b !important; background-image: none !important; color: #ffffff !important; border-radius: 12px !important; border: 1px solid rgba(212,175,55,.35) !important; box-shadow: 0 5px 15px rgba(0,0,0,.30) !important; } /* Onglet ouvert */ h3[class^="Rich_Web_Tabs_h3_"].active { background: #111111 !important; } /* Texte des titres */ h3[class^="Rich_Web_Tabs_h3_"] .rw_tabs_act_st_title { color: #ffffff !important; font-weight: 700 !important; } /* Titre actif en doré */ h3[class^="Rich_Web_Tabs_h3_"].active .rw_tabs_act_st_title { color: #D4AF37 !important; } /* Supprime les éléments décoratifs blancs du plugin */ h3[class^="Rich_Web_Tabs_h3_"] span, h3[class^="Rich_Web_Tabs_h3_"] div { background-image: none !important; } /* Fond du contenu ouvert Rich Web Tabs */ [class*="rw_tabs_acd_cont"] > div, [class*="rw_tabs_acd_cont"] .etab-editor-content { background: #1b1b1b !important; background-color: #1b1b1b !important; color: #eeeeee !important; border: 1px solid rgba(212,175,55,.25) !important; border-radius: 12px !important; padding: 20px !important; } /* Texte des chaînes */ [class*="rw_tabs_acd_cont"] p, [class*="rw_tabs_acd_cont"] strong { color: #eeeeee !important; } /* Supprime les fonds blancs internes */ [class*="rw_tabs_acd_cont"] * { background-color: transparent; } .home .woocommerce-message { display: none !important; } .asthir-wbreadcrump { background: #111111 !important; background-color: #111111 !important; color: #eeeeee !important; border: none !important; box-shadow: none !important; } .asthir-wbreadcrump .container { background: transparent !important; } .asthir-wbreadcrump .woocommerce-breadcrumb { background: transparent !important; color: #eeeeee !important; } .asthir-wbreadcrump .woocommerce-breadcrumb a { color: #D4AF37 !important; } .asthir-wbreadcrump .woocommerce-breadcrumb a:hover { color: #ffffff !important; } /* ================================ MENU NEOX2 - STYLE PREMIUM ================================ */ .main-header-menu, .ast-header-navigation { font-family: Arial, Helvetica, sans-serif; } /* Liens principaux */ .main-header-menu > .menu-item > a { color: #f5f5f5 !important; font-weight: 600; font-size: 15px; padding: 12px 16px !important; border-radius: 8px; transition: all 0.25s ease; } /* Survol */ .main-header-menu > .menu-item > a:hover { color: #000 !important; background: #D4AF37 !important; transform: translateY(-1px); } /* Élément actif */ .main-header-menu > .current-menu-item > a, .main-header-menu > .current-menu-ancestor > a { color: #000 !important; background: #D4AF37 !important; } /* ================================ SOUS-MENU ================================ */ .main-header-menu .sub-menu { background: #151515 !important; border: 1px solid rgba(212,175,55,0.35); border-radius: 10px; padding: 8px; box-shadow: 0 12px 30px rgba(0,0,0,0.45); } /* Liens du sous-menu */ .main-header-menu .sub-menu a { color: #eeeeee !important; background: transparent !important; font-size: 14px; font-weight: 500; padding: 10px 14px !important; border-radius: 7px; transition: all 0.2s ease; } /* Survol sous-menu */ .main-header-menu .sub-menu a:hover { color: #000 !important; background: #D4AF37 !important; } /* ================================ FLÈCHES ================================ */ .main-header-menu .menu-item-has-children > a::after { color: #D4AF37 !important; } /* ================================ MOBILE ================================ */ @media (max-width: 921px) { .main-header-menu > .menu-item > a { padding: 13px 16px !important; font-size: 15px; } .main-header-menu .sub-menu { background: #151515 !important; border: none; box-shadow: none; border-radius: 8px; } .main-header-menu .sub-menu a { padding: 11px 18px !important; } } /* ========================================================= NEOX2 - ACCORDEON CHAÎNES TV - DESIGN PREMIUM ========================================================= */ .elementor-widget-accordion .elementor-accordion { display: flex; flex-direction: column; gap: 12px; } /* Chaque bloc pays */ .elementor-widget-accordion .elementor-accordion-item { border: 1px solid #e8eaf0 !important; border-radius: 16px !important; overflow: hidden; background: #ffffff; box-shadow: 0 4px 18px rgba(20, 30, 50, 0.06); transition: all .3s ease; } .elementor-widget-accordion .elementor-accordion-item:hover { box-shadow: 0 8px 28px rgba(20, 30, 50, 0.10); transform: translateY(-1px); } /* Titre */ .elementor-widget-accordion .elementor-tab-title { position: relative; display: flex !important; align-items: center; min-height: 64px; padding: 17px 22px !important; border: 0 !important; background: #ffffff; cursor: pointer; transition: all .25s ease; } /* Titre ouvert */ .elementor-widget-accordion .elementor-tab-title.elementor-active { background: linear-gradient(135deg, #f7f9fc 0%, #eef2f7 100%); } /* Nom du pays */ .elementor-widget-accordion .elementor-accordion-title { order: 2; margin-left: 12px; font-size: 17px; font-weight: 700; letter-spacing: .2px; color: #18202d; text-decoration: none !important; } /* Icône + / - */ .elementor-widget-accordion .elementor-accordion-icon { order: 3; margin-left: auto; width: 34px; height: 34px; display: flex !important; align-items: center; justify-content: center; border-radius: 50%; background: #f1f3f7; color: #273142; font-size: 13px; transition: all .3s ease; } .elementor-widget-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon { background: #18202d; color: #ffffff; transform: rotate(180deg); } /* Contenu */ .elementor-widget-accordion .elementor-tab-content { border: 0 !important; padding: 22px !important; background: #fafbfc; line-height: 1.7; color: #505866; } /* Paragraphes existants */ .elementor-widget-accordion .elementor-tab-content p { margin: 0; } /* Tables existantes */ .elementor-widget-accordion .elementor-tab-content table { width: 100% !important; border-collapse: separate !important; border-spacing: 0 6px !important; } /* Cellules */ .elementor-widget-accordion .elementor-tab-content td { border: 0 !important; padding: 9px 13px !important; background: #ffffff; border-radius: 8px; } /* Première colonne des tableaux */ .elementor-widget-accordion .elementor-tab-content td:first-child { font-weight: 700; color: #7a8494; } /* Deuxième colonne */ .elementor-widget-accordion .elementor-tab-content td:last-child { color: #202735; font-weight: 500; } /* Listes séparées par
*/ .elementor-widget-accordion .elementor-tab-content { font-size: 14px; } /* Mobile */ @media (max-width: 767px) { .elementor-widget-accordion .elementor-accordion { gap: 9px; } .elementor-widget-accordion .elementor-tab-title { min-height: 58px; padding: 14px 15px !important; } .elementor-widget-accordion .elementor-accordion-title { font-size: 15px; } .elementor-widget-accordion .elementor-accordion-icon { width: 30px; height: 30px; } .elementor-widget-accordion .elementor-tab-content { padding: 15px !important; font-size: 13px; } .elementor-widget-accordion .elementor-tab-content td { padding: 8px 9px !important; } } /* ===================================================== NEOX2APP — BOXTV + IPTV AMELIORATION VISUELLE DE LA PAGE EXISTANTE ===================================================== */ /* Largeur et respiration générale */ body { overflow-x: hidden; } .elementor-widget-container { box-sizing: border-box; } /* ===================================================== TITRES ===================================================== */ h1, h2, h3 { letter-spacing: -0.02em; } h1 { line-height: 1.08; } h2 { line-height: 1.15; margin-bottom: 20px; } h3 { line-height: 1.25; } /* ===================================================== SECTIONS ===================================================== */ .elementor-section, .e-con { transition: all .25s ease; } /* ===================================================== BOUTONS ===================================================== */ .elementor-button { border-radius: 10px !important; font-weight: 700 !important; padding: 15px 28px !important; transition: all .25s ease !important; } .elementor-button:hover { transform: translateY(-2px); } /* ===================================================== IMAGES ===================================================== */ .elementor-widget-image img { border-radius: 14px; } /* ===================================================== CARTES / BLOCS ===================================================== */ .elementor-widget-image, .elementor-widget-text-editor, .elementor-widget-heading { box-sizing: border-box; } /* ===================================================== TABLEAUX ===================================================== */ table { width: 100%; border-collapse: collapse; margin: 25px 0; background: #fff; border-radius: 12px; overflow: hidden; } table th { padding: 15px; text-align: left; font-weight: 700; } table td { padding: 14px 15px; border-top: 1px solid #e9e9e9; } table tr:hover td { background: #fafafa; } /* ===================================================== LISTES ===================================================== */ .elementor-widget-text-editor ul { padding-left: 22px; } .elementor-widget-text-editor li { margin-bottom: 8px; line-height: 1.6; } /* ===================================================== ACCORDEONS ===================================================== */ .elementor-accordion .elementor-tab-title { border-bottom: 1px solid #e8e8e8 !important; padding: 20px !important; font-weight: 700 !important; } .elementor-accordion .elementor-tab-content { padding: 20px !important; line-height: 1.7; border-bottom: 1px solid #e8e8e8 !important; } /* ===================================================== ESPACEMENT DES BLOCS ===================================================== */ .elementor-widget-text-editor { line-height: 1.7; } /* ===================================================== WOOCOMMERCE / PRIX ===================================================== */ .woocommerce .price, .woocommerce-Price-amount { font-weight: 800; } .woocommerce div.product p.price, .woocommerce div.product span.price { font-size: 28px; } /* ===================================================== PRODUITS ===================================================== */ .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { border: 1px solid #e8e8e8; border-radius: 16px; padding: 22px; background: #fff; box-shadow: 0 8px 25px rgba(0,0,0,.05); transition: transform .25s ease, box-shadow .25s ease; } .woocommerce ul.products li.product:hover, .woocommerce-page ul.products li.product:hover { transform: translateY(-4px); box-shadow: 0 14px 35px rgba(0,0,0,.09); } /* ===================================================== FORMULAIRES / CHAMPS ===================================================== */ input, textarea, select { border-radius: 8px !important; } /* ===================================================== MOBILE ===================================================== */ @media (max-width: 767px) { h1 { font-size: 36px !important; } h2 { font-size: 28px !important; } h3 { font-size: 22px !important; } .elementor-button { width: 100%; text-align: center; } table { font-size: 14px; } table th, table td { padding: 10px; } } /* ========================================================== NEOX2APP — BOXTV / IPTV 12 MOIS DESIGN PREMIUM — NOIR / BLANC / OR ========================================================== */ body.page-id-XXXX { --neox-black: #111111; --neox-black-soft: #1a1a1a; --neox-white: #ffffff; --neox-offwhite: #f7f7f5; --neox-gold: #c9a227; --neox-gold-light: #d8b84c; --neox-text: #222222; --neox-grey: #666666; --neox-border: #e8e8e8; } /* ========================================================== BASE ========================================================== */ body.page-id-XXXX { background: var(--neox-white); color: var(--neox-text); } body.page-id-XXXX .elementor-widget-text-editor { color: var(--neox-text); } body.page-id-XXXX p { line-height: 1.7; } /* ========================================================== TITRES ========================================================== */ body.page-id-XXXX h1, body.page-id-XXXX h2, body.page-id-XXXX h3, body.page-id-XXXX h4 { color: var(--neox-black); letter-spacing: -0.025em; } body.page-id-XXXX h1 { font-weight: 800; line-height: 1.05; } body.page-id-XXXX h2 { font-weight: 800; line-height: 1.15; } body.page-id-XXXX h3 { font-weight: 750; } /* ========================================================== LIENS ========================================================== */ body.page-id-XXXX a { transition: color .25s ease, background-color .25s ease, border-color .25s ease, transform .25s ease; } body.page-id-XXXX a:hover { color: var(--neox-gold); } /* ========================================================== BOUTONS — NOIR + OR ========================================================== */ body.page-id-XXXX .elementor-button, body.page-id-XXXX a.button, body.page-id-XXXX .woocommerce a.button, body.page-id-XXXX .woocommerce button.button, body.page-id-XXXX .woocommerce input.button { background: var(--neox-black); color: #fff !important; border: 1px solid var(--neox-gold); border-radius: 10px; padding: 15px 28px; font-weight: 750; letter-spacing: .01em; box-shadow: 0 5px 18px rgba(0,0,0,.10); transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease; } body.page-id-XXXX .elementor-button:hover, body.page-id-XXXX a.button:hover, body.page-id-XXXX .woocommerce a.button:hover, body.page-id-XXXX .woocommerce button.button:hover { background: var(--neox-gold); color: var(--neox-black) !important; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(201,162,39,.22); } /* ========================================================== IMAGES ========================================================== */ body.page-id-XXXX .elementor-widget-image img { border-radius: 16px; } body.page-id-XXXX .elementor-widget-image img { transition: transform .35s ease, box-shadow .35s ease; } /* ========================================================== CARTES ELEMENTOR ========================================================== */ body.page-id-XXXX .elementor-widget-icon-box, body.page-id-XXXX .elementor-widget-image-box { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; border-radius: 16px; } body.page-id-XXXX .elementor-widget-icon-box:hover, body.page-id-XXXX .elementor-widget-image-box:hover { transform: translateY(-4px); } /* ========================================================== ICONES — OR ========================================================== */ body.page-id-XXXX .elementor-icon { color: var(--neox-gold); } body.page-id-XXXX .elementor-icon-list-icon { color: var(--neox-gold); } /* ========================================================== LISTES / CHECKS ========================================================== */ body.page-id-XXXX .elementor-icon-list-text { line-height: 1.55; } body.page-id-XXXX .elementor-icon-list-icon i, body.page-id-XXXX .elementor-icon-list-icon svg { color: var(--neox-gold); } /* ========================================================== SECTIONS ALTERNÉES ========================================================== */ /* À appliquer aux sections que tu veux mettre légèrement en retrait visuellement. */ body.page-id-XXXX .neox-section-light { background: var(--neox-offwhite); } /* ========================================================== CARTES PREMIUM ========================================================== */ body.page-id-XXXX .neox-card { background: var(--neox-white); border: 1px solid var(--neox-border); border-radius: 16px; box-shadow: 0 8px 30px rgba(0,0,0,.055); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } body.page-id-XXXX .neox-card:hover { transform: translateY(-4px); border-color: rgba(201,162,39,.55); box-shadow: 0 14px 38px rgba(0,0,0,.09); } /* ========================================================== OFFRES IPTV ========================================================== */ body.page-id-XXXX .neox-offer { background: #fff; border: 1px solid var(--neox-border); border-radius: 18px; box-shadow: 0 8px 28px rgba(0,0,0,.06); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } body.page-id-XXXX .neox-offer:hover { transform: translateY(-5px); border-color: var(--neox-gold); box-shadow: 0 16px 40px rgba(0,0,0,.10); } /* Offre mise en avant */ body.page-id-XXXX .neox-offer.featured { border: 2px solid var(--neox-gold); } /* ========================================================== PRIX ========================================================== */ body.page-id-XXXX .woocommerce-Price-amount, body.page-id-XXXX .price { color: var(--neox-black); font-weight: 800; } body.page-id-XXXX .neox-price { color: var(--neox-gold); } /* ========================================================== BADGES ========================================================== */ body.page-id-XXXX .neox-badge { display: inline-block; background: var(--neox-gold); color: var(--neox-black); padding: 6px 12px; border-radius: 30px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; } /* ========================================================== CARACTÉRISTIQUES TECHNIQUES ========================================================== */ body.page-id-XXXX .neox-spec { background: var(--neox-offwhite); border: 1px solid var(--neox-border); border-radius: 14px; padding: 22px; transition: border-color .25s ease, transform .25s ease; } body.page-id-XXXX .neox-spec:hover { border-color: var(--neox-gold); transform: translateY(-3px); } body.page-id-XXXX .neox-spec strong { color: var(--neox-black); } /* ========================================================== ACCORDÉONS ELEMENTOR ========================================================== */ body.page-id-XXXX .elementor-accordion .elementor-tab-title { background: #fff; border-bottom: 1px solid var(--neox-border); padding: 20px 22px !important; font-weight: 700; transition: background .25s ease, color .25s ease; } body.page-id-XXXX .elementor-accordion .elementor-tab-title:hover { color: var(--neox-gold); background: var(--neox-offwhite); } body.page-id-XXXX .elementor-accordion .elementor-tab-title.elementor-active { color: var(--neox-gold); background: var(--neox-black); } body.page-id-XXXX .elementor-accordion .elementor-tab-content { background: #fff; padding: 22px !important; line-height: 1.7; border-bottom: 1px solid var(--neox-border); } /* ========================================================== FAQ ========================================================== */ body.page-id-XXXX .neox-faq { max-width: 900px; margin-left: auto; margin-right: auto; } /* ========================================================== CTA FINAL — NOIR / OR ========================================================== */ body.page-id-XXXX .neox-final-cta { background: linear-gradient( 135deg, #0b0b0b, #181818 ); border-radius: 20px; padding: 60px 35px; text-align: center; } body.page-id-XXXX .neox-final-cta h2 { color: #fff; margin-bottom: 15px; } body.page-id-XXXX .neox-final-cta p { color: #d5d5d5; } body.page-id-XXXX .neox-final-cta .elementor-button { background: var(--neox-gold); color: var(--neox-black) !important; border-color: var(--neox-gold); } body.page-id-XXXX .neox-final-cta .elementor-button:hover { background: #fff; color: var(--neox-black) !important; } /* ========================================================== TABLEAUX TECHNIQUES ========================================================== */ body.page-id-XXXX table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--neox-border); border-radius: 14px; overflow: hidden; background: #fff; } body.page-id-XXXX th { background: var(--neox-black); color: #fff; padding: 15px; text-align: left; } body.page-id-XXXX td { padding: 14px 15px; border-bottom: 1px solid var(--neox-border); } body.page-id-XXXX tr:last-child td { border-bottom: 0; } body.page-id-XXXX tr:hover td { background: #faf9f4; } /* ========================================================== ESPACEMENT ========================================================== */ body.page-id-XXXX .elementor-widget-heading { margin-bottom: 10px; } body.page-id-XXXX .elementor-widget-text-editor { margin-bottom: 10px; } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 767px) { body.page-id-XXXX h1 { font-size: 38px !important; } body.page-id-XXXX h2 { font-size: 29px !important; } body.page-id-XXXX h3 { font-size: 22px !important; } body.page-id-XXXX .elementor-button { width: 100%; text-align: center; padding: 14px 20px !important; } body.page-id-XXXX .neox-card, body.page-id-XXXX .neox-offer { border-radius: 14px; } } ```css /* NEOX2APP - BOXTV IPTV - DESIGN NOIR BLANC OR */ .neox-box-page{ --noir:#0b0b0b; --or:#c9a227; --or-clair:#e1c45a; --blanc:#fff; --gris:#f6f5f1; --texte:#222; --bordure:#e5e1d8; max-width:1200px; margin:0 auto; color:var(--texte); font-family:inherit; line-height:1.7; } .neox-box-page *{ box-sizing:border-box; } /* HERO */ .neox-hero{ display:grid!important; grid-template-columns:1fr 0.85fr; gap:55px; align-items:center; margin:20px 0 70px!important; padding:60px!important; background:var(--noir)!important; color:#fff!important; border-radius:24px!important; } .neox-hero h1{ margin:0 0 8px!important; color:#fff!important; font-size:48px!important; line-height:1.05!important; font-weight:900!important; } .neox-hero h2{ margin:0 0 25px!important; color:var(--or-clair)!important; font-size:22px!important; } .neox-eyebrow{ display:block; margin-bottom:12px; color:var(--or-clair)!important; font-size:13px; font-weight:900; letter-spacing:3px; text-transform:uppercase; } .neox-hero-intro{ color:#ddd!important; font-size:18px; max-width:560px; margin-bottom:25px!important; } .neox-checks{ list-style:none!important; margin:0 0 28px!important; padding:0!important; } .neox-checks li{ position:relative; padding:6px 0 6px 30px!important; color:#fff!important; } .neox-checks li:before{ content:"✓"; position:absolute; left:0; color:var(--or-clair); font-weight:900; } .neox-main-button{ display:inline-block!important; padding:14px 28px!important; background:var(--or)!important; color:#111!important; border-radius:7px!important; text-decoration:none!important; font-weight:900!important; } .neox-main-button:hover{ background:#fff!important; color:#111!important; } .neox-free{ margin-left:15px; color:#ddd!important; font-size:14px; font-weight:700; } .neox-hero-image{ display:flex!important; align-items:center; justify-content:center; min-height:360px; padding:25px!important; background:#fff!important; border-radius:18px!important; box-shadow:0 20px 50px rgba(0,0,0,.35)!important; } .neox-hero-image img{ width:100%!important; max-height:360px!important; object-fit:contain!important; margin:0!important; } /* TITRES */ .neox-section{ margin-bottom:75px!important; } .neox-section-title{ text-align:center!important; margin-bottom:38px!important; } .neox-section-title span{ display:block; color:var(--or)!important; font-size:12px; font-weight:900; letter-spacing:3px; text-transform:uppercase; } .neox-section-title h2{ margin:8px 0 0!important; color:var(--noir)!important; font-size:34px!important; font-weight:900!important; } .neox-section-title h2:after{ content:""; display:block; width:45px; height:3px; margin:15px auto 0; background:var(--or)!important; } /* CARTES */ .neox-included{ display:grid!important; grid-template-columns:repeat(3,1fr); gap:22px; } .neox-card{ padding:32px 25px!important; text-align:center!important; background:#fff!important; border:1px solid var(--bordure)!important; border-radius:16px!important; box-shadow:0 8px 25px rgba(0,0,0,.05)!important; } .neox-card:hover{ border-color:var(--or)!important; transform:translateY(-4px); } .neox-icon{ width:62px; height:62px; display:flex!important; align-items:center; justify-content:center; margin:0 auto 18px!important; background:var(--noir)!important; color:var(--or-clair)!important; border-radius:50%; font-weight:900; } .neox-card h3{ margin:0 0 7px!important; color:var(--noir)!important; font-size:19px!important; font-weight:900!important; } .neox-card p{ margin:0!important; color:#777!important; font-size:14px!important; } /* OFFRES */ .neox-offers{ display:grid!important; grid-template-columns:repeat(2,1fr); gap:25px; } .neox-offer{ position:relative; padding:35px!important; background:#fff!important; border:1px solid var(--bordure)!important; border-radius:18px!important; box-shadow:0 10px 30px rgba(0,0,0,.06)!important; } .neox-offer.featured{ border:2px solid var(--or)!important; } .neox-offer.featured:before{ content:"RECOMMANDÉ"; position:absolute; top:0; right:0; padding:7px 14px; background:var(--or)!important; color:#111!important; font-size:10px; font-weight:900; } .neox-offer h3{ margin:0 0 8px!important; color:var(--noir)!important; font-size:24px!important; font-weight:900!important; } .neox-offer-sub{ color:var(--or)!important; font-size:13px; font-weight:900; margin-bottom:20px; } .neox-offer img{ display:block!important; width:180px!important; height:180px!important; object-fit:contain!important; margin:10px auto 20px!important; } .neox-offer ul{ list-style:none!important; margin:0 0 25px!important; padding:0!important; } .neox-offer li{ padding:8px 0!important; border-bottom:1px solid #eee!important; } .neox-offer li:before{ content:"✓"; margin-right:9px; color:var(--or)!important; font-weight:900; } .neox-offer-button{ display:inline-block!important; padding:12px 23px!important; background:var(--noir)!important; color:#fff!important; border-radius:7px!important; text-decoration:none!important; font-weight:800!important; } .neox-offer-button:hover{ background:var(--or)!important; color:#111!important; } /* DETAILS */ .neox-detail{ padding:55px!important; background:var(--gris)!important; border-radius:22px!important; } .neox-detail-intro{ display:grid!important; grid-template-columns:1fr 1fr; gap:40px; align-items:center; margin-bottom:40px; } .neox-detail-intro img{ width:100%!important; max-height:360px!important; object-fit:contain!important; background:#fff!important; border-radius:16px!important; } .neox-detail h3{ margin:0 0 15px!important; color:var(--noir)!important; font-size:25px!important; font-weight:900!important; } /* ACCORDÉONS */ .neox-accordion details{ margin:10px 0!important; background:#fff!important; border:1px solid var(--bordure)!important; border-radius:10px!important; overflow:hidden; } .neox-accordion summary{ position:relative; padding:18px 50px 18px 22px!important; cursor:pointer; color:var(--noir)!important; font-weight:800!important; list-style:none!important; } .neox-accordion summary::-webkit-details-marker{ display:none; } .neox-accordion summary:after{ content:"+"; position:absolute; right:20px; color:var(--or)!important; font-size:24px; } .neox-accordion details[open] summary:after{ content:"−"; } .neox-content{ padding:0 22px 22px!important; color:#444!important; } /* BANNIÈRE */ .neox-banner{ margin:35px 0!important; text-align:center!important; } .neox-banner img{ max-width:100%!important; height:auto!important; border-radius:12px!important; } /* FIN */ .neox-final{ margin:70px 0 30px!important; padding:55px 35px!important; text-align:center!important; background:var(--noir)!important; border-radius:20px!important; } .neox-final h2{ color:#fff!important; font-size:32px!important; font-weight:900!important; } .neox-final p{ color:#ccc!important; } /* MOBILE */ @media(max-width:850px){ .neox-hero{ grid-template-columns:1fr!important; padding:40px 25px!important; } .neox-hero h1{ font-size:38px!important; } .neox-included{ grid-template-columns:1fr!important; } .neox-offers{ grid-template-columns:1fr!important; } .neox-detail{ padding:30px 20px!important; } .neox-detail-intro{ grid-template-columns:1fr!important; } } @media(max-width:480px){ .neox-hero{ padding:30px 18px!important; } .neox-hero h1{ font-size:32px!important; } .neox-main-button{ width:100%!important; text-align:center!important; } .neox-free{ display:block; margin:15px 0 0!important; } .neox-section-title h2{ font-size:27px!important; } } ``` /* ========================================================= CORRECTION ACCORDEONS - NEOX2APP ========================================================= */ .neox-box-page .neox-accordion details { background: #111111 !important; border: 1px solid #c9a227 !important; border-radius: 10px !important; margin: 12px 0 !important; overflow: hidden !important; } .neox-box-page .neox-accordion summary { background: #111111 !important; color: #ffffff !important; padding: 18px 50px 18px 22px !important; font-weight: 800 !important; } .neox-box-page .neox-accordion summary:hover { background: #191919 !important; color: #e1c45a !important; } .neox-box-page .neox-accordion details[open] summary { color: #e1c45a !important; border-bottom: 1px solid #333333 !important; } /* CONTENU DE L'ACCORDÉON */ .neox-box-page .neox-accordion .neox-content { background: #181818 !important; color: #eeeeee !important; padding: 22px 25px !important; } .neox-box-page .neox-accordion .neox-content p { color: #eeeeee !important; } .neox-box-page .neox-accordion .neox-content ul { background: transparent !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } .neox-box-page .neox-accordion .neox-content li { background: transparent !important; color: #eeeeee !important; border-bottom: 1px solid #303030 !important; padding: 10px 0 10px 25px !important; margin: 0 !important; position: relative; } .neox-box-page .neox-accordion .neox-content li:last-child { border-bottom: none !important; } .neox-box-page .neox-accordion .neox-content li::before { content: "✓"; position: absolute; left: 0; color: #e1c45a !important; font-weight: 900; } /* LE + / - */ .neox-box-page .neox-accordion summary::after { color: #e1c45a !important; font-weight: 900 !important; } ```css /* ========================================================= IMAGES DES OFFRES - SUPPRESSION DU FOND BLANC ========================================================= */ .neox-box-page .neox-offer { background: #111111 !important; border-color: #333333 !important; } .neox-box-page .neox-offer h3 { color: #ffffff !important; } .neox-box-page .neox-offer-sub { color: #e1c45a !important; } /* Le paragraphe qui contient l'image */ .neox-box-page .neox-offer p { background: transparent !important; margin: 0 !important; padding: 0 !important; } /* Image elle-même */ .neox-box-page .neox-offer p img, .neox-box-page .neox-offer > img { display: block !important; width: 200px !important; height: 200px !important; max-width: 100% !important; object-fit: contain !important; margin: 15px auto 25px !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* Suppression des éventuels blocs blancs WordPress autour */ .neox-box-page .neox-offer p, .neox-box-page .neox-offer figure, .neox-box-page .neox-offer .wp-block-image { background: transparent !important; border: 0 !important; box-shadow: none !important; } /* Texte des listes */ .neox-box-page .neox-offer li { color: #eeeeee !important; border-color: #303030 !important; } /* Bouton */ .neox-box-page .neox-offer-button { background: #c9a227 !important; color: #111111 !important; } .neox-box-page .neox-offer-button:hover { background: #ffffff !important; color: #111111 !important; } /* Version mobile */ @media(max-width:480px) { .neox-box-page .neox-offer p img, .neox-box-page .neox-offer > img { width: 170px !important; height: 170px !important; } } ``` /* ========================================================= NEOX2APP - CORRECTION DEFINITIVE DES BLOCS IMAGES ========================================================= */ /* Tous les wrappers WordPress dans les cartes */ .neox-box-page .neox-offer p, .neox-box-page .neox-offer figure, .neox-box-page .neox-offer .wp-block-image, .neox-box-page .neox-offer .wp-block-image.aligncenter, .neox-box-page .neox-offer .wp-block-image.alignnone, .neox-box-page .neox-offer .wp-block-image.alignwide { background: transparent !important; background-color: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 auto 25px !important; } /* Image Magnum + Neo TV */ .neox-box-page .neox-offer img, .neox-box-page .neox-offer p img, .neox-box-page .neox-offer figure img, .neox-box-page .neox-offer .wp-block-image img { display: block !important; width: 220px !important; height: 220px !important; max-width: 220px !important; object-fit: contain !important; margin: 15px auto 25px !important; padding: 0 !important; background: transparent !important; background-color: transparent !important; border: none !important; border-width: 0 !important; border-radius: 0 !important; box-shadow: none !important; opacity: 1 !important; } /* Le lien autour de l'image */ .neox-box-page .neox-offer a:has(img) { display: block !important; width: fit-content !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* Le paragraphe qui contient le lien */ .neox-box-page .neox-offer p:has(img) { display: block !important; width: 100% !important; background: transparent !important; background-color: transparent !important; border: 0 !important; box-shadow: none !important; } /* IMPORTANT : si le thème applique un fond blanc à tous les éléments */ .neox-box-page .neox-offer *, .neox-box-page .neox-offer *::before, .neox-box-page .neox-offer *::after { box-shadow: none; } /* Carte entière */ .neox-box-page .neox-offer { background-color: #111111 !important; background-image: none !important; border: 1px solid #333333 !important; } /* Carte recommandée */ .neox-box-page .neox-offer.featured { background-color: #111111 !important; border: 2px solid #c9a227 !important; } /* Texte de la carte */ .neox-box-page .neox-offer h3, .neox-box-page .neox-offer h4, .neox-box-page .neox-offer p, .neox-box-page .neox-offer li { background: transparent !important; background-color: transparent !important; } /* Texte blanc */ .neox-box-page .neox-offer p, .neox-box-page .neox-offer li { color: #eeeeee !important; } /* Titres */ .neox-box-page .neox-offer h3 { color: #ffffff !important; } /* Or */ .neox-box-page .neox-offer .neox-offer-sub { color: #e1c45a !important; } /* Survol image : aucun carré blanc */ .neox-box-page .neox-offer a:hover, .neox-box-page .neox-offer a:hover img { background: transparent !important; background-color: transparent !important; box-shadow: none !important; } /* ===================================================== DEUX CARTES OFFRES — MÊME STYLE ===================================================== */ .neox-box-page .neox-offers { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 25px !important; } /* LES DEUX CARTES */ .neox-box-page .neox-offer, .neox-box-page .neox-offer.featured { background: #111111 !important; background-color: #111111 !important; border: 2px solid #c9a227 !important; border-radius: 18px !important; box-shadow: 0 8px 30px rgba(0,0,0,.18) !important; } /* Même effet au survol */ .neox-box-page .neox-offer:hover, .neox-box-page .neox-offer.featured:hover { border-color: #e1c45a !important; box-shadow: 0 12px 35px rgba(201,162,39,.18) !important; transform: translateY(-4px); } /* SUPPRIME LE BANDEAU "RECOMMANDÉ" */ .neox-box-page .neox-offer.featured::before { display: none !important; } /* TITRES */ .neox-box-page .neox-offer h3 { color: #ffffff !important; } /* SOUS-TITRES */ .neox-box-page .neox-offer .neox-offer-sub { color: #e1c45a !important; } /* TEXTE */ .neox-box-page .neox-offer li { color: #eeeeee !important; border-bottom: 1px solid #333333 !important; } /* CHECKS */ .neox-box-page .neox-offer li::before { color: #e1c45a !important; } /* IMAGES */ .neox-box-page .neox-offer img, .neox-box-page .neox-offer p img, .neox-box-page .neox-offer figure img { background: transparent !important; background-color: transparent !important; border: 0 !important; box-shadow: none !important; } /* BOUTONS */ .neox-box-page .neox-offer-button { background: #c9a227 !important; color: #111111 !important; border: 1px solid #e1c45a !important; } .neox-box-page .neox-offer-button:hover { background: #ffffff !important; color: #111111 !important; } /* ========================================================= NEOX2 — DESIGN PREMIUM NOIR / BLANC / OR REMPLACE L'ANCIEN CSS ========================================================= */ .neox2-page { --black: #070707; --black-2: #0d0d0d; --black-3: #141414; --black-4: #1b1b1b; --white: #ffffff; --text: #eeeeee; --muted: #a8a8a8; --gold: #c8a43a; --gold-light: #e5c968; --gold-dark: #92751d; background: var(--black); color: var(--text); font-family: inherit; line-height: 1.7; width: 100%; } .neox2-page *, .neox2-page *::before, .neox2-page *::after { box-sizing: border-box; } .neox2-page img { max-width: 100%; height: auto; } .neox2-page a { text-decoration: none !important; } /* ========================================================= HERO — GROSSE ZONE PREMIUM ========================================================= */ .neox2-hero { position: relative; max-width: 1240px; margin: 25px auto 90px; padding: 75px 70px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 70px; background: radial-gradient( circle at 85% 45%, rgba(200,164,58,.16), transparent 34% ), linear-gradient( 135deg, #111111 0%, #090909 100% ); border: 1px solid rgba(200,164,58,.35); border-radius: 28px; box-shadow: 0 25px 70px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04); overflow: hidden; } .neox2-hero::before { content: ""; position: absolute; width: 300px; height: 300px; right: -120px; top: -120px; border-radius: 50%; border: 1px solid rgba(200,164,58,.15); box-shadow: 0 0 0 35px rgba(200,164,58,.03), 0 0 0 70px rgba(200,164,58,.02); pointer-events: none; } .neox2-kicker, .neox2-label, .neox2-section-title > span { display: inline-flex; align-items: center; gap: 10px; color: var(--gold-light); font-size: 12px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 16px; } .neox2-kicker::before, .neox2-label::before, .neox2-section-title > span::before { content: ""; width: 28px; height: 1px; background: var(--gold); } .neox2-hero h1 { color: var(--white) !important; font-size: clamp(42px, 5vw, 68px) !important; line-height: 1 !important; letter-spacing: -1.5px; margin: 0 0 24px !important; font-weight: 900 !important; } .neox2-hero h1 strong { color: var(--gold-light); } .neox2-hero-text { color: #cfcfcf !important; font-size: 19px; line-height: 1.7; max-width: 600px; margin-bottom: 30px; } .neox2-checks { display: grid; gap: 11px; margin: 0 0 32px; } .neox2-checks div { color: #f2f2f2; font-size: 16px; font-weight: 500; display: flex; align-items: center; gap: 12px; } .neox2-checks div::before { content: "✓"; display: flex; align-items: center; justify-content: center; width: 23px; height: 23px; min-width: 23px; border-radius: 50%; background: rgba(200,164,58,.12); border: 1px solid rgba(200,164,58,.45); color: var(--gold-light); font-size: 12px; font-weight: 900; } .neox2-checks div::first-letter { color: inherit; } .neox2-main-button, .neox2-offer-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 14px 28px; background: linear-gradient( 135deg, var(--gold-light), var(--gold) ); color: #080808 !important; border: 1px solid var(--gold-light); border-radius: 8px; font-size: 14px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; box-shadow: 0 10px 30px rgba(200,164,58,.18); transition: transform .25s ease, box-shadow .25s ease, background .25s ease; } .neox2-main-button:hover, .neox2-offer-button:hover { transform: translateY(-3px); background: #fff; color: #080808 !important; border-color: #fff; box-shadow: 0 15px 35px rgba(255,255,255,.10); } /* IMAGE HERO */ .neox2-hero-image { min-height: 360px; display: flex; align-items: center; justify-content: center; position: relative; } .neox2-hero-image::before { content: ""; position: absolute; width: 330px; height: 330px; border-radius: 50%; background: radial-gradient( circle, rgba(200,164,58,.16), rgba(200,164,58,.04) 45%, transparent 70% ); filter: blur(2px); } .neox2-hero-image img { position: relative; z-index: 2; display: block; width: 340px !important; max-width: 100% !important; height: auto !important; object-fit: contain; background: transparent !important; border: 0 !important; box-shadow: none !important; filter: drop-shadow(0 25px 30px rgba(0,0,0,.65)) drop-shadow(0 0 25px rgba(200,164,58,.08)); } /* ========================================================= SECTIONS ========================================================= */ .neox2-section { max-width: 1240px; margin: 0 auto 100px; padding: 0 35px; } .neox2-section-title { max-width: 760px; margin: 0 auto 50px; text-align: center; } .neox2-section-title h2, .neox2-text h2, .neox2-install h2, .neox2-links-section h2, .neox2-final-cta h2 { color: var(--white) !important; font-size: clamp(32px, 4vw, 48px) !important; line-height: 1.1 !important; letter-spacing: -.8px; margin: 0 0 18px !important; font-weight: 800 !important; } .neox2-section-title p { color: var(--muted); font-size: 17px; } /* ========================================================= OFFRES — CARTES PREMIUM ========================================================= */ .neox2-offers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .neox2-offer { position: relative; background: linear-gradient( 145deg, #171717, #0e0e0e ) !important; border: 1px solid #292929 !important; border-radius: 20px; padding: 38px 30px; text-align: center; box-shadow: 0 15px 45px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.025); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; } .neox2-offer:hover { transform: translateY(-8px); border-color: rgba(200,164,58,.65) !important; box-shadow: 0 25px 60px rgba(0,0,0,.45), 0 0 35px rgba(200,164,58,.06); } .neox2-featured { border-color: var(--gold) !important; background: linear-gradient( 145deg, #1b1b1b, #101010 ) !important; } .neox2-featured::before { content: "RECOMMANDÉ"; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); padding: 7px 16px; background: var(--gold); color: #090909; border-radius: 30px; font-size: 10px; font-weight: 900; letter-spacing: 1.5px; } .neox2-duration, .neox2-badge { display: block; color: var(--gold-light); font-size: 11px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 15px; } .neox2-offer h3 { color: #fff !important; font-size: 25px !important; line-height: 1.2 !important; margin: 0 0 18px !important; } .neox2-price { color: var(--gold-light); font-size: 46px; line-height: 1; font-weight: 900; margin-bottom: 28px; } .neox2-price small { display: block; color: #888; font-size: 12px; font-weight: 500; margin-top: 10px; } .neox2-offer ul { list-style: none !important; margin: 0 0 28px !important; padding: 0 !important; text-align: left; } .neox2-offer li { position: relative; color: #d5d5d5 !important; padding: 11px 0 11px 28px !important; border-bottom: 1px solid #292929; } .neox2-offer li:last-child { border-bottom: 0; } .neox2-offer li::before { content: "✓"; position: absolute; left: 0; top: 11px; color: var(--gold-light); font-weight: 900; } .neox2-offer-button { width: 100%; } /* ========================================================= PRESENTATION ========================================================= */ .neox2-presentation { display: grid; grid-template-columns: 1fr 1fr; gap: 75px; align-items: center; } .neox2-text p { color: #c5c5c5; font-size: 17px; line-height: 1.8; margin-bottom: 18px; } .neox2-presentation-image { position: relative; display: flex; justify-content: center; align-items: center; padding: 30px; } .neox2-presentation-image::before { content: ""; position: absolute; width: 80%; height: 80%; border-radius: 50%; background: rgba(200,164,58,.08); filter: blur(55px); } .neox2-presentation-image img { position: relative; z-index: 2; max-width: 100% !important; width: 500px; height: auto !important; background: transparent !important; border: 0 !important; border-radius: 18px; box-shadow: 0 30px 60px rgba(0,0,0,.45); } .neox2-info-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-top: 30px; } .neox2-info-grid div { background: #111; border: 1px solid #292929; border-radius: 12px; padding: 18px; transition: border-color .2s ease; } .neox2-info-grid div:hover { border-color: rgba(200,164,58,.45); } .neox2-info-grid strong { display: block; color: var(--gold-light); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; } .neox2-info-grid span { color: #eee; } /* ========================================================= ÉTAPES ========================================================= */ .neox2-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; } .neox2-step { position: relative; background: #101010; border: 1px solid #292929; border-radius: 16px; padding: 28px 24px; transition: .25s ease; } .neox2-step:hover { transform: translateY(-5px); border-color: rgba(200,164,58,.45); } .neox2-step > span { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(200,164,58,.10); border: 1px solid rgba(200,164,58,.4); color: var(--gold-light); font-size: 18px; font-weight: 900; margin-bottom: 22px; } .neox2-step h3 { color: #fff !important; font-size: 19px !important; margin-bottom: 10px !important; } .neox2-step p { color: #999; } /* ========================================================= COMPATIBILITÉ ========================================================= */ .neox2-dark-section { max-width: none; padding: 90px 30px; background: linear-gradient( 180deg, #0d0d0d, #111111 ); border-top: 1px solid #222; border-bottom: 1px solid #222; } .neox2-dark-section .neox2-section-title { max-width: 900px; } .neox2-compatibility { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; } .neox2-compat { background: #181818; border: 1px solid #2d2d2d; border-radius: 16px; padding: 32px 20px; text-align: center; transition: .25s ease; } .neox2-compat:hover { border-color: var(--gold); transform: translateY(-4px); } .neox2-compat strong { display: block; color: var(--gold-light); font-size: 19px; margin-bottom: 7px; } .neox2-compat span { color: #aaa; } .neox2-note { max-width: 900px; margin: 35px auto 0; text-align: center; color: #777; font-size: 14px; } /* ========================================================= INSTALLATION ========================================================= */ .neox2-install { display: grid; grid-template-columns: 1.2fr .8fr; gap: 55px; align-items: center; } .neox2-install-card { position: relative; background: linear-gradient( 145deg, #181818, #101010 ); border: 1px solid var(--gold); border-radius: 18px; padding: 35px; box-shadow: 0 20px 50px rgba(0,0,0,.35); } .neox2-install-card > span { display: block; color: var(--gold-light); font-size: 34px; margin-bottom: 12px; } .neox2-install-card h3 { color: #fff !important; } .neox2-install-card p { color: #aaa; } /* ========================================================= LIENS ========================================================= */ .neox2-links-section { max-width: 900px; margin: 0 auto 90px; padding: 0 30px; } .neox2-links { display: grid; gap: 12px; } .neox2-links a { display: flex; align-items: center; gap: 18px; padding: 18px 22px; background: #111; border: 1px solid #292929; border-radius: 12px; color: #eee !important; transition: .25s ease; } .neox2-links a:hover { transform: translateX(5px); border-color: var(--gold); color: var(--gold-light) !important; } .neox2-links span { color: var(--gold); font-weight: 900; font-size: 18px; } /* ========================================================= CTA FINAL ========================================================= */ .neox2-final-cta { position: relative; max-width: 1240px; margin: 0 auto 60px; padding: 80px 30px; text-align: center; background: radial-gradient( circle at center, rgba(200,164,58,.11), transparent 50% ), #111; border: 1px solid rgba(200,164,58,.55); border-radius: 24px; box-shadow: 0 25px 60px rgba(0,0,0,.35); } .neox2-final-cta > span { display: block; color: var(--gold-light); font-size: 11px; font-weight: 900; letter-spacing: 4px; margin-bottom: 14px; } .neox2-final-cta h2 { max-width: 750px; margin-left: auto !important; margin-right: auto !important; } .neox2-final-cta p { max-width: 650px; margin: 0 auto 30px; color: #aaa; } /* ========================================================= FORCE TEXT — WORDPRESS ========================================================= */ .neox2-page p, .neox2-page li, .neox2-page span { color: inherit; } .neox2-page h1, .neox2-page h2, .neox2-page h3, .neox2-page h4, .neox2-page h5 { color: #fff !important; } .neox2-page hr { border: 0 !important; border-top: 1px solid #292929 !important; margin: 55px 0 !important; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 950px) { .neox2-hero { grid-template-columns: 1fr; padding: 55px 35px; text-align: center; gap: 45px; } .neox2-hero-text { margin-left: auto; margin-right: auto; } .neox2-checks { text-align: left; max-width: 430px; margin-left: auto; margin-right: auto; } .neox2-hero-image { min-height: 280px; } .neox2-offers, .neox2-steps { grid-template-columns: 1fr 1fr; } .neox2-presentation, .neox2-install { grid-template-columns: 1fr; gap: 45px; } .neox2-compatibility { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .neox2-hero { margin: 12px 10px 60px; padding: 42px 22px; border-radius: 18px; } .neox2-hero h1 { font-size: 40px !important; letter-spacing: -1px; } .neox2-hero-text { font-size: 16px; } .neox2-hero-image { min-height: 220px; } .neox2-hero-image::before { width: 230px; height: 230px; } .neox2-hero-image img { width: 245px !important; } .neox2-section { padding: 0 18px; margin-bottom: 65px; } .neox2-section-title { margin-bottom: 32px; } .neox2-section-title h2, .neox2-text h2, .neox2-install h2, .neox2-links-section h2, .neox2-final-cta h2 { font-size: 31px !important; } .neox2-offers, .neox2-steps, .neox2-compatibility, .neox2-info-grid { grid-template-columns: 1fr; } .neox2-offer { padding: 32px 24px; } .neox2-main-button { width: 100%; text-align: center; } .neox2-presentation-image { padding: 10px; } .neox2-dark-section { padding: 65px 18px; } .neox2-install-card { padding: 28px 22px; } .neox2-links-section { padding: 0 18px; margin-bottom: 60px; } .neox2-final-cta { margin: 0 10px 35px; padding: 55px 20px; border-radius: 18px; } } ``` /* ========================================================= NEOX2 PREMIUM DESIGN — NOIR / BLANC / OR VERSION SOBRE ET HARMONIEUSE ========================================================= */ .n2-premium { --black: #050505; --black-2: #0b0b0b; --black-3: #111111; --gold: #c9a227; --gold-light: #e2c35b; --white: #ffffff; --text: #f5f5f5; --muted: #999999; --border: rgba(255,255,255,.09); --gold-border: rgba(201,162,39,.28); width: 100%; margin: 0; padding: 0; background: var(--black); color: var(--text); font-family: inherit; line-height: 1.6; } .n2-premium *, .n2-premium *::before, .n2-premium *::after { box-sizing: border-box; } .n2-premium a { text-decoration: none; } .n2-wrap { width: min(1140px, calc(100% - 40px)); margin: 0 auto; } /* ========================================================= HERO ========================================================= */ .n2-hero { padding: 90px 0 95px; background: var(--black); } .n2-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 70px; } .n2-kicker { display: inline-block; margin-bottom: 18px; color: var(--gold-light); font-size: 11px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; } .n2-hero h1 { max-width: 650px; margin: 0 0 24px; color: var(--white); font-size: clamp(42px, 5vw, 68px); line-height: 1.02; font-weight: 500; letter-spacing: -1.8px; } .n2-hero h1 span, .n2-install h2 span, .n2-final h2 span { color: var(--gold-light); } .n2-lead { max-width: 590px; margin: 0; color: #aaa; font-size: 17px; line-height: 1.75; } .n2-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .n2-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 25px; border-radius: 2px; font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; transition: .2s ease; } .n2-btn-gold { color: #080808; background: var(--gold); } .n2-btn-gold:hover { color: #080808; background: var(--gold-light); transform: translateY(-2px); } .n2-btn-light { color: var(--white); border: 1px solid rgba(255,255,255,.22); background: transparent; } .n2-btn-light:hover { color: var(--gold-light); border-color: var(--gold); } .n2-trust { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 25px; color: #888; font-size: 12px; } .n2-trust span::first-letter { color: var(--gold); } /* ========================================================= HERO VISUEL ========================================================= */ .n2-hero-visual { display: flex; justify-content: center; } .n2-hero-card { position: relative; width: min(380px, 100%); min-height: 430px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid var(--gold-border); background: linear-gradient( 145deg, #151515 0%, #0b0b0b 100% ); } .n2-hero-card::before { content: ""; position: absolute; top: 25px; right: 25px; bottom: 25px; left: 25px; border: 1px solid rgba(255,255,255,.05); } .n2-card-label { position: absolute; top: 22px; left: 22px; color: var(--gold-light); font-size: 10px; font-weight: 800; letter-spacing: 1.8px; } .n2-hero-logo { position: relative; color: var(--white); font-size: 42px; font-weight: 700; letter-spacing: 3px; } .n2-hero-logo strong { display: block; margin-top: 4px; color: var(--gold); font-size: 13px; letter-spacing: 5px; text-align: center; } .n2-hero-duration { position: absolute; bottom: 35px; display: flex; flex-direction: column; align-items: center; color: #777; } .n2-hero-duration small { font-size: 9px; letter-spacing: 2px; } .n2-hero-duration strong { margin-top: 4px; color: var(--white); font-size: 20px; letter-spacing: 2px; } /* ========================================================= SECTIONS ========================================================= */ .n2-section { padding: 85px 0; } .n2-section-dark { background: var(--black-2); } .n2-title { max-width: 680px; margin: 0 auto 50px; text-align: center; } .n2-title > span { color: var(--gold-light); font-size: 10px; font-weight: 800; letter-spacing: 2.5px; } .n2-title h2 { margin: 10px 0 15px; color: var(--white); font-size: clamp(32px, 4vw, 48px); line-height: 1.1; font-weight: 500; } .n2-title p { max-width: 610px; margin: 0 auto; color: var(--muted); font-size: 14px; } /* ========================================================= AVANTAGES ========================================================= */ .n2-benefits { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .n2-benefit { min-height: 190px; display: flex; flex-direction: column; padding: 30px 25px; border-right: 1px solid var(--border); } .n2-benefit:last-child { border-right: 0; } .n2-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; margin-bottom: 25px; color: var(--gold-light); border: 1px solid var(--gold-border); font-size: 10px; font-weight: 800; } .n2-benefit h3 { margin: 0 0 8px; color: var(--white); font-size: 16px; font-weight: 600; } .n2-benefit p { margin: 0; color: #858585; font-size: 13px; line-height: 1.6; } /* ========================================================= OFFRE ========================================================= */ .n2-offer-section { background: #080808; } .n2-offer { display: grid; grid-template-columns: 1fr 330px; border: 1px solid var(--gold-border); background: var(--black-3); } .n2-offer-left { padding: 55px; } .n2-offer-kicker { color: var(--gold-light); font-size: 10px; font-weight: 800; letter-spacing: 2px; } .n2-offer-left h3 { margin: 15px 0 20px; color: var(--white); font-size: 38px; line-height: 1.05; font-weight: 500; } .n2-offer-left p { max-width: 520px; margin: 0 0 25px; color: #999; font-size: 14px; } .n2-offer-left ul { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 25px; margin: 0; padding: 0; list-style: none; color: #bbb; font-size: 13px; } .n2-offer-left li::first-letter { color: var(--gold); } .n2-offer-right { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 45px 35px; text-align: center; border-left: 1px solid var(--border); background: #0d0d0d; } .n2-offer-right > span { color: var(--gold-light); font-size: 10px; font-weight: 800; letter-spacing: 2px; } .n2-price { margin: 8px 0 20px; color: var(--white); font-size: 58px; line-height: 1; font-weight: 600; } .n2-price small { margin-left: 4px; color: var(--gold); font-size: 24px; } .n2-offer-right .n2-btn { width: 100%; } .n2-note { margin-top: 15px; color: #666; font-size: 10px; } /* ========================================================= APPAREILS ========================================================= */ .n2-devices { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--border); border-left: 1px solid var(--border); } .n2-device { min-height: 155px; display: flex; flex-direction: column; justify-content: center; padding: 25px 18px; text-align: center; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); background: #101010; } .n2-device strong { margin-bottom: 15px; color: var(--gold); font-size: 12px; letter-spacing: 1px; } .n2-device h3 { margin: 0 0 5px; color: var(--white); font-size: 14px; } .n2-device p { margin: 0; color: #777; font-size: 11px; } /* ========================================================= STATS ========================================================= */ .n2-stats { padding: 45px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: #050505; } .n2-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); } .n2-stats-grid > div { padding: 10px 25px; text-align: center; border-right: 1px solid var(--border); } .n2-stats-grid > div:last-child { border-right: 0; } .n2-stats strong { display: block; color: var(--gold-light); font-size: 29px; font-weight: 600; } .n2-stats span { display: block; margin-top: 5px; color: #777; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; } /* ========================================================= INSTALLATION ========================================================= */ .n2-install { display: grid; grid-template-columns: 1fr .8fr; align-items: center; gap: 80px; } .n2-install h2 { max-width: 550px; margin: 0 0 18px; color: var(--white); font-size: clamp(34px, 4vw, 50px); line-height: 1.05; font-weight: 500; } .n2-install-text > p { max-width: 560px; margin: 0; color: #999; font-size: 14px; } .n2-steps { margin-top: 30px; } .n2-step { display: grid; grid-template-columns: 45px 1fr; gap: 15px; padding: 17px 0; border-bottom: 1px solid var(--border); } .n2-step > strong { color: var(--gold); font-size: 12px; letter-spacing: 1px; } .n2-step h3 { margin: 0 0 4px; color: var(--white); font-size: 14px; } .n2-step p { margin: 0; color: #777; font-size: 12px; } .n2-install-box { min-height: 400px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--gold-border); background: linear-gradient( 145deg, #141414, #080808 ); } .n2-install-box > div { text-align: center; } .n2-install-box span { display: block; color: var(--white); font-size: 35px; font-weight: 700; letter-spacing: 4px; } .n2-install-box strong { display: block; color: var(--gold); font-size: 12px; letter-spacing: 4px; } .n2-install-box small { display: block; margin-top: 30px; color: #777; font-size: 11px; } /* ========================================================= AIDE ========================================================= */ .n2-help { padding: 65px 0; background: var(--black-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .n2-help-inner { display: flex; align-items: center; justify-content: space-between; gap: 50px; } .n2-help h2 { max-width: 620px; margin: 0 0 8px; color: var(--white); font-size: 32px; line-height: 1.1; font-weight: 500; } .n2-help p { margin: 0; color: #888; font-size: 13px; } /* ========================================================= CTA FINAL ========================================================= */ .n2-final { padding: 100px 0; text-align: center; background: #050505; } .n2-final h2 { max-width: 760px; margin: 0 auto 18px; color: var(--white); font-size: clamp(38px, 5vw, 58px); line-height: 1.02; font-weight: 500; } .n2-final p { margin: 0 auto 28px; color: #888; font-size: 14px; } /* ========================================================= TABLETTE ========================================================= */ @media (max-width: 1000px) { .n2-hero-grid { grid-template-columns: 1fr; gap: 55px; } .n2-hero-content { text-align: center; } .n2-lead { margin-left: auto; margin-right: auto; } .n2-buttons, .n2-trust { justify-content: center; } .n2-benefits { grid-template-columns: 1fr 1fr; } .n2-benefit:nth-child(2) { border-right: 0; } .n2-devices { grid-template-columns: repeat(3, 1fr); } .n2-install { grid-template-columns: 1fr; gap: 50px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 700px) { .n2-wrap { width: min(100% - 28px, 1140px); } .n2-section { padding: 65px 0; } .n2-hero { padding: 65px 0 70px; } .n2-hero h1 { font-size: 43px; } .n2-lead { font-size: 15px; } .n2-buttons { flex-direction: column; } .n2-btn { width: 100%; } .n2-trust { flex-direction: column; gap: 7px; } .n2-hero-card { min-height: 350px; } .n2-benefits { grid-template-columns: 1fr; } .n2-benefit { min-height: auto; border-right: 0; } .n2-offer { grid-template-columns: 1fr; } .n2-offer-left { padding: 35px 25px; } .n2-offer-left h3 { font-size: 32px; } .n2-offer-left ul { grid-template-columns: 1fr; } .n2-offer-right { padding: 35px 25px; border-top: 1px solid var(--border); border-left: 0; } .n2-devices { grid-template-columns: 1fr 1fr; } .n2-device { min-height: 140px; } .n2-stats-grid { grid-template-columns: 1fr 1fr; row-gap: 25px; } .n2-stats-grid > div { border-right: 0; } .n2-install { gap: 40px; } .n2-install-box { min-height: 300px; } .n2-help-inner { flex-direction: column; align-items: stretch; text-align: center; } .n2-help h2 { font-size: 28px; } .n2-final { padding: 75px 0; } } /* ========================================================= PETIT MOBILE ========================================================= */ @media (max-width: 430px) { .n2-devices { grid-template-columns: 1fr; } .n2-stats-grid { grid-template-columns: 1fr; } .n2-stats-grid > div { padding: 12px 10px; } } /* ========================================================= NEOX2 PRO CSS COMPLET — VERSION CORRIGÉE ========================================================= */ /* --------------------------------------------------------- VARIABLES --------------------------------------------------------- */ .neox2-pro-page { --neox2-radius: 18px; --neox2-max: 1120px; width: 100%; max-width: 100%; margin: 0 auto; overflow: hidden; font-family: inherit; } /* --------------------------------------------------------- RESET LOCAL --------------------------------------------------------- */ .neox2-pro-page *, .neox2-pro-page *::before, .neox2-pro-page *::after { box-sizing: border-box; } .neox2-pro-page img { display: block; max-width: 100%; height: auto; } .neox2-pro-page a { text-decoration: none; } .neox2-pro-page p { margin-top: 0; } .neox2-pro-page h1, .neox2-pro-page h2, .neox2-pro-page h3 { margin-top: 0; } /* --------------------------------------------------------- SECTIONS --------------------------------------------------------- */ .neox2-section { width: min(var(--neox2-max), calc(100% - 40px)); margin: 0 auto; padding: 85px 0; } .neox2-section-heading { width: 100%; max-width: 760px; margin: 0 auto 50px; text-align: center; } .neox2-section-heading > span, .neox2-media-content > span, .neox2-speed span, .neox2-final > span { display: inline-block; margin-bottom: 12px; font-size: 12px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; } .neox2-section-heading h2, .neox2-media-content h2, .neox2-speed h2, .neox2-final h2 { margin-bottom: 18px; font-size: clamp(30px, 4vw, 48px); line-height: 1.08; font-weight: 800; } .neox2-section-heading p { margin-bottom: 0; font-size: 17px; line-height: 1.7; opacity: .75; } /* --------------------------------------------------------- BOUTONS --------------------------------------------------------- */ .neox2-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border-radius: 9px; font-size: 14px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease; } .neox2-btn:hover { transform: translateY(-3px); } /* --------------------------------------------------------- HERO --------------------------------------------------------- */ .neox2-hero { width: min(var(--neox2-max), calc(100% - 40px)); min-height: 630px; margin: 0 auto; padding: 65px 0; display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 70px; align-items: center; } .neox2-hero-content { max-width: 650px; } .neox2-badge { display: inline-flex; margin-bottom: 22px; padding: 8px 15px; border-radius: 50px; font-size: 12px; font-weight: 800; letter-spacing: 1.5px; } .neox2-hero h1 { margin-bottom: 25px; font-size: clamp(42px, 6vw, 72px); line-height: .98; font-weight: 900; } .neox2-hero-text { max-width: 600px; margin-bottom: 28px; font-size: 20px; line-height: 1.65; opacity: .8; } .neox2-check-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 25px; margin-bottom: 35px; } .neox2-check-list div { font-size: 15px; font-weight: 600; } .neox2-hero-image { display: flex; align-items: center; justify-content: center; } .neox2-hero-image img { width: 100%; max-width: 400px; margin: 0 auto; border-radius: 20px; box-shadow: 0 25px 65px rgba(0,0,0,.18); transition: transform .25s ease; } .neox2-hero-image img:hover { transform: translateY(-5px); } /* --------------------------------------------------------- FEATURES --------------------------------------------------------- */ .neox2-features { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .neox2-feature { padding: 30px; border-radius: var(--neox2-radius); transition: transform .2s ease; } .neox2-feature:hover { transform: translateY(-5px); } .neox2-icon, .neox2-content-icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; border-radius: 14px; font-size: 24px; } .neox2-feature h3, .neox2-content-card h3, .neox2-step h3 { margin-bottom: 12px; font-size: 20px; line-height: 1.2; } .neox2-feature p, .neox2-content-card p, .neox2-step p { margin-bottom: 0; font-size: 15px; line-height: 1.7; opacity: .75; } /* --------------------------------------------------------- PRODUITS / ABONNEMENTS IMPORTANT : - images non déformées - aucun overlay - aucun rectangle noir --------------------------------------------------------- */ .neox2-products { width: min(900px, 100%); margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 35px; align-items: start; justify-content: center; } .neox2-product { display: block; width: 100%; max-width: 410px; margin: 0 auto; overflow: hidden; border-radius: 18px; background: transparent; line-height: 0; box-shadow: none; transition: transform .25s ease; } .neox2-product:hover { transform: translateY(-6px); } .neox2-product img { display: block; width: 100%; max-width: 100%; height: auto; margin: 0; object-fit: contain; border-radius: 18px; box-shadow: 0 15px 40px rgba(0,0,0,.14); transition: box-shadow .25s ease, transform .25s ease; } .neox2-product:hover img { transform: none; box-shadow: 0 22px 50px rgba(0,0,0,.20); } /* Désactivation de l'ancien bandeau noir */ .neox2-product-info { display: none !important; } /* --------------------------------------------------------- CONTENU --------------------------------------------------------- */ .neox2-content-grid { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } .neox2-content-card { padding: 35px; border-radius: var(--neox2-radius); } .neox2-content-card h3 { font-size: 23px; } /* --------------------------------------------------------- IMAGE + TEXTE --------------------------------------------------------- */ .neox2-media { width: min(var(--neox2-max), calc(100% - 40px)); margin: 0 auto; padding: 85px 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 70px; align-items: center; } .neox2-media-image img { width: 100%; height: auto; border-radius: var(--neox2-radius); box-shadow: 0 20px 50px rgba(0,0,0,.12); } .neox2-media-content p { font-size: 16px; line-height: 1.8; opacity: .75; } .neox2-media-content .neox2-btn { margin-top: 15px; } /* --------------------------------------------------------- CODE ACTIVATION --------------------------------------------------------- */ .neox2-code { text-align: center; } .neox2-code-image { width: 100%; max-width: 1000px; margin: 0 auto 25px; overflow: hidden; border-radius: var(--neox2-radius); box-shadow: 0 15px 45px rgba(0,0,0,.12); } .neox2-code-image img { width: 100%; height: auto; } .neox2-note { display: inline-block; padding: 14px 20px; border-radius: 8px; font-size: 14px; } /* --------------------------------------------------------- ÉTAPES 01 — 02 — 03 HORIZONTAL --------------------------------------------------------- */ .neox2-step-grid { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px; align-items: stretch; } .neox2-step { min-width: 0; padding: 35px; border-radius: var(--neox2-radius); } .neox2-step > span { display: block; margin-bottom: 25px; font-size: 40px; line-height: 1; font-weight: 900; opacity: .25; } .neox2-step h3 { margin-bottom: 12px; } .neox2-step p { margin-bottom: 0; } /* --------------------------------------------------------- SPEEDTEST --------------------------------------------------------- */ .neox2-speed { width: min(var(--neox2-max), calc(100% - 40px)); margin: 20px auto 80px; padding: 70px; border-radius: 25px; } .neox2-speed > div { max-width: 700px; } .neox2-speed p { margin-bottom: 28px; font-size: 17px; line-height: 1.7; } /* --------------------------------------------------------- FAQ --------------------------------------------------------- */ .neox2-faq-list { width: min(850px, 100%); margin: 0 auto; } .neox2-faq-list details { padding: 22px 0; border-bottom: 1px solid rgba(0,0,0,.12); } .neox2-faq-list summary { position: relative; cursor: pointer; padding-right: 40px; font-size: 17px; font-weight: 700; list-style: none; } .neox2-faq-list summary::-webkit-details-marker { display: none; } .neox2-faq-list summary::after { content: "+"; position: absolute; right: 0; top: -4px; font-size: 24px; font-weight: 400; } .neox2-faq-list details[open] summary::after { content: "−"; } .neox2-faq-list details p { max-width: 700px; margin: 15px 0 0; font-size: 15px; line-height: 1.7; opacity: .75; } /* --------------------------------------------------------- CTA FINAL --------------------------------------------------------- */ .neox2-final { width: 100%; margin-top: 30px; padding: 100px 20px; text-align: center; } .neox2-final p { margin: 0 auto 30px; font-size: 17px; opacity: .8; } /* ========================================================= TABLETTE ========================================================= */ @media (max-width: 900px) { .neox2-hero { grid-template-columns: 1fr; gap: 45px; text-align: center; } .neox2-hero-content { max-width: 700px; margin: 0 auto; } .neox2-hero-text { margin-left: auto; margin-right: auto; } .neox2-check-list { width: min(500px, 100%); margin-left: auto; margin-right: auto; text-align: left; } .neox2-hero-image img { max-width: 360px; } .neox2-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } .neox2-media { grid-template-columns: 1fr; gap: 45px; } .neox2-media-image { max-width: 700px; margin: 0 auto; } /* * IMPORTANT : * Les 3 étapes restent horizontales sur tablette. */ .neox2-step-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; } .neox2-step { padding: 25px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 700px) { .neox2-section { width: calc(100% - 28px); padding: 65px 0; } .neox2-hero { width: calc(100% - 28px); min-height: auto; padding: 45px 0 65px; } .neox2-hero h1 { font-size: 40px; } .neox2-hero-text { font-size: 17px; } .neox2-check-list { grid-template-columns: 1fr; text-align: center; } .neox2-check-list div { font-size: 14px; } .neox2-btn { width: 100%; } /* ----------------------------------------------------- PRODUITS MOBILE ----------------------------------------------------- */ .neox2-products { width: min(100%, 430px); grid-template-columns: 1fr; gap: 25px; } .neox2-product { width: 100%; max-width: 100%; } .neox2-product img { width: 100%; height: auto; object-fit: contain; } /* ----------------------------------------------------- FEATURES ----------------------------------------------------- */ .neox2-features { grid-template-columns: 1fr; } /* ----------------------------------------------------- CONTENT ----------------------------------------------------- */ .neox2-content-grid { grid-template-columns: 1fr; } /* ----------------------------------------------------- MEDIA ----------------------------------------------------- */ .neox2-media { width: calc(100% - 28px); padding: 65px 0; } /* ----------------------------------------------------- ÉTAPES MOBILE ----------------------------------------------------- */ .neox2-step-grid { grid-template-columns: 1fr; gap: 18px; } .neox2-step { padding: 28px; } /* ----------------------------------------------------- SPEED ----------------------------------------------------- */ .neox2-speed { width: calc(100% - 28px); margin-bottom: 60px; padding: 45px 25px; } /* ----------------------------------------------------- TITRES ----------------------------------------------------- */ .neox2-section-heading { margin-bottom: 38px; } .neox2-section-heading h2, .neox2-media-content h2, .neox2-speed h2, .neox2-final h2 { font-size: 32px; } /* ----------------------------------------------------- CTA FINAL ----------------------------------------------------- */ .neox2-final { padding: 75px 20px; } } /* ========================================================= NEOX2 PRO SECTION "SIMPLE & RAPIDE" DESIGN SOBRE / PREMIUM ========================================================= */ /* --------------------------------------------------------- TITRE --------------------------------------------------------- */ .neox2-pro-page .neox2-steps .neox2-section-heading { max-width: 760px; margin: 0 auto 55px; text-align: center; } .neox2-pro-page .neox2-steps .neox2-section-heading > span { display: block; margin-bottom: 10px; font-size: 12px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; opacity: .65; } .neox2-pro-page .neox2-steps .neox2-section-heading h2 { margin: 0; font-size: clamp(32px, 4vw, 46px); line-height: 1.1; font-weight: 800; } /* --------------------------------------------------------- CONTENEUR --------------------------------------------------------- */ .neox2-pro-page .neox2-step-grid { position: relative; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; width: 100% !important; gap: 0 !important; align-items: stretch !important; } /* --------------------------------------------------------- TRAIT ENTRE LES ÉTAPES --------------------------------------------------------- */ .neox2-pro-page .neox2-step-grid::before { content: ""; position: absolute; top: 31px; left: 16%; right: 16%; height: 1px; opacity: .18; z-index: 0; } /* --------------------------------------------------------- CARTE --------------------------------------------------------- */ .neox2-pro-page .neox2-step { position: relative; z-index: 1; display: flex !important; flex-direction: column !important; align-items: center !important; flex: 1 1 0 !important; width: 33.333% !important; min-height: 245px; margin: 0 !important; padding: 0 35px !important; text-align: center; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; transition: transform .25s ease; } /* --------------------------------------------------------- NUMÉRO --------------------------------------------------------- */ .neox2-pro-page .neox2-step > span { position: relative; z-index: 2; display: flex !important; align-items: center; justify-content: center; width: 62px; height: 62px; margin: 0 auto 28px !important; border-radius: 50%; font-size: 17px !important; font-weight: 800 !important; line-height: 1 !important; opacity: 1 !important; box-shadow: 0 8px 25px rgba(0,0,0,.12); transition: transform .25s ease, box-shadow .25s ease; } /* --------------------------------------------------------- HOVER --------------------------------------------------------- */ .neox2-pro-page .neox2-step:hover { transform: translateY(-5px); } .neox2-pro-page .neox2-step:hover > span { transform: scale(1.08); box-shadow: 0 12px 30px rgba(0,0,0,.18); } /* --------------------------------------------------------- TITRE --------------------------------------------------------- */ .neox2-pro-page .neox2-step h3 { width: 100%; margin: 0 0 12px !important; font-size: 19px !important; line-height: 1.3 !important; font-weight: 800 !important; } /* --------------------------------------------------------- TEXTE --------------------------------------------------------- */ .neox2-pro-page .neox2-step p { width: 100%; max-width: 260px; margin: 0 auto !important; font-size: 14px !important; line-height: 1.7 !important; opacity: .65; } /* ========================================================= TABLETTE ========================================================= */ @media (max-width: 900px) and (min-width: 701px) { .neox2-pro-page .neox2-step { padding: 0 18px !important; min-height: 235px; } .neox2-pro-page .neox2-step > span { width: 56px; height: 56px; margin-bottom: 23px !important; } .neox2-pro-page .neox2-step h3 { font-size: 17px !important; } .neox2-pro-page .neox2-step p { font-size: 13px !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 700px) { .neox2-pro-page .neox2-steps .neox2-section-heading { margin-bottom: 40px; } .neox2-pro-page .neox2-step-grid { display: flex !important; flex-direction: column !important; gap: 0 !important; } /* On retire le trait sur mobile */ .neox2-pro-page .neox2-step-grid::before { display: none; } .neox2-pro-page .neox2-step { width: 100% !important; min-height: auto; padding: 0 10px 42px !important; } .neox2-pro-page .neox2-step:last-child { padding-bottom: 0 !important; } .neox2-pro-page .neox2-step > span { width: 56px; height: 56px; margin-bottom: 20px !important; } .neox2-pro-page .neox2-step h3 { font-size: 19px !important; } } /* ========================================================= NEOX2 IPTV 4K REFONTE VISUELLE - PAGE EXISTANTE WORDPRESS ========================================================= */ /* --------------------------------------------------------- LARGEUR ET ESPACEMENT DU CONTENU --------------------------------------------------------- */ .entry-content.asthir-page { max-width: 1120px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 25px !important; padding-right: 25px !important; } /* --------------------------------------------------------- TITRE PRINCIPAL --------------------------------------------------------- */ .entry-content.asthir-page > h2:first-child { max-width: 850px !important; margin: 0 auto 25px !important; text-align: center !important; font-size: clamp(34px, 5vw, 52px) !important; line-height: 1.08 !important; font-weight: 800 !important; } /* --------------------------------------------------------- PREMIER PARAGRAPHE --------------------------------------------------------- */ .entry-content.asthir-page > h2:first-child + p { max-width: 760px !important; margin: 0 auto 45px !important; text-align: center !important; font-size: 17px !important; line-height: 1.8 !important; } /* --------------------------------------------------------- TITRES DE SECTION --------------------------------------------------------- */ .entry-content.asthir-page h3 { max-width: 100% !important; margin-top: 70px !important; margin-bottom: 25px !important; font-size: clamp(25px, 3vw, 34px) !important; line-height: 1.2 !important; font-weight: 800 !important; } /* --------------------------------------------------------- "NOS OFFRES" --------------------------------------------------------- */ .entry-content.asthir-page > h3:first-of-type { margin-top: 30px !important; text-align: center !important; } /* --------------------------------------------------------- GRANDE IMAGE D'ABONNEMENT --------------------------------------------------------- */ .entry-content.asthir-page > h3:first-of-type + img { display: block !important; width: auto !important; max-width: 360px !important; height: auto !important; margin: 30px auto 55px !important; border-radius: 18px !important; box-shadow: 0 15px 40px rgba(0,0,0,.12) !important; } /* --------------------------------------------------------- COMMENT ACHETER --------------------------------------------------------- */ .entry-content.asthir-page ol { max-width: 850px !important; margin: 25px auto 40px !important; padding: 0 !important; list-style: none !important; counter-reset: neoxorder !important; } .entry-content.asthir-page ol li { position: relative !important; counter-increment: neoxorder !important; min-height: 60px !important; margin: 12px 0 !important; padding: 18px 25px 18px 75px !important; box-sizing: border-box !important; border-radius: 14px !important; background: rgba(0,0,0,.035) !important; line-height: 1.5 !important; } .entry-content.asthir-page ol li::before { content: "0" counter(neoxorder) !important; position: absolute !important; left: 18px !important; top: 50% !important; transform: translateY(-50%) !important; font-size: 15px !important; font-weight: 800 !important; } /* --------------------------------------------------------- LES DEUX OFFRES NEOX2 / MAGNUM --------------------------------------------------------- */ .entry-content.asthir-page div[style*="display: flex"] { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: center !important; align-items: flex-start !important; gap: 35px !important; width: 100% !important; margin: 35px auto 55px !important; } /* Images */ .entry-content.asthir-page div[style*="display: flex"] img { display: block !important; width: 280px !important; max-width: 100% !important; height: auto !important; margin: 0 !important; object-fit: contain !important; border-radius: 18px !important; box-shadow: 0 12px 35px rgba(0,0,0,.13) !important; transition: transform .25s ease, box-shadow .25s ease !important; } /* Hover */ .entry-content.asthir-page div[style*="display: flex"] a:hover img { transform: translateY(-7px) !important; box-shadow: 0 20px 45px rgba(0,0,0,.18) !important; } /* --------------------------------------------------------- TEXTE GENERAL --------------------------------------------------------- */ .entry-content.asthir-page p { max-width: 850px !important; margin-left: auto !important; margin-right: auto !important; font-size: 16px !important; line-height: 1.8 !important; } /* --------------------------------------------------------- LISTES --------------------------------------------------------- */ .entry-content.asthir-page > ul { max-width: 850px !important; margin: 20px auto !important; padding-left: 25px !important; } .entry-content.asthir-page > ul li { margin-bottom: 10px !important; line-height: 1.7 !important; } /* --------------------------------------------------------- IMAGE APK --------------------------------------------------------- */ .entry-content.asthir-page img[src*="NEOX2-APK"] { display: block !important; width: 480px !important; max-width: 100% !important; height: auto !important; margin: 30px auto !important; border-radius: 12px !important; transition: transform .25s ease !important; } .entry-content.asthir-page img[src*="NEOX2-APK"]:hover { transform: translateY(-4px) !important; } /* --------------------------------------------------------- IMAGES : JAMAIS D'ECRASEMENT --------------------------------------------------------- */ .entry-content.asthir-page img { height: auto !important; } /* --------------------------------------------------------- SECTIONS PLUS AEREES --------------------------------------------------------- */ .entry-content.asthir-page h3 + p { margin-top: 0 !important; } /* --------------------------------------------------------- DERNIER LIEN "NOS ABONNEMENTS" --------------------------------------------------------- */ .entry-content.asthir-page a[href="https://neox2app.fr"] { display: block !important; width: fit-content !important; margin: 35px auto 20px !important; padding: 14px 28px !important; border-radius: 10px !important; font-weight: 700 !important; transition: transform .2s ease !important; } .entry-content.asthir-page a[href="https://neox2app.fr"]:hover { transform: translateY(-3px) !important; } /* ========================================================= TABLETTE ========================================================= */ @media (max-width: 900px) and (min-width: 701px) { .entry-content.asthir-page { padding-left: 20px !important; padding-right: 20px !important; } .entry-content.asthir-page div[style*="display: flex"] { gap: 20px !important; } .entry-content.asthir-page div[style*="display: flex"] img { width: 250px !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 700px) { .entry-content.asthir-page { padding-left: 16px !important; padding-right: 16px !important; } .entry-content.asthir-page > h2:first-child { font-size: 34px !important; } .entry-content.asthir-page > h2:first-child + p { font-size: 15px !important; } .entry-content.asthir-page h3 { margin-top: 50px !important; font-size: 26px !important; } /* OFFRES */ .entry-content.asthir-page div[style*="display: flex"] { flex-direction: column !important; flex-wrap: nowrap !important; align-items: center !important; gap: 22px !important; } .entry-content.asthir-page div[style*="display: flex"] img { width: 260px !important; max-width: 90% !important; } /* LISTE */ .entry-content.asthir-page ol li { padding: 17px 18px 17px 65px !important; } /* TEXTES */ .entry-content.asthir-page p { font-size: 15px !important; } } /* ========================================================= PETIT MOBILE ========================================================= */ @media (max-width: 480px) { .entry-content.asthir-page > h2:first-child { font-size: 30px !important; } .entry-content.asthir-page h3 { font-size: 23px !important; } .entry-content.asthir-page div[style*="display: flex"] img { width: 235px !important; } } /* ========================================================= NEOX2 - COMMENT ACHETER VERSION SOBRE & PREMIUM ========================================================= */ .entry-content.asthir-page ol { position: relative !important; display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 0 !important; max-width: 1000px !important; margin: 40px auto 55px !important; padding: 0 !important; list-style: none !important; counter-reset: neoxstep !important; } /* ligne entre les étapes */ .entry-content.asthir-page ol::before { content: ""; position: absolute; top: 24px; left: 16.66%; right: 16.66%; height: 1px; background: currentColor; opacity: .15; z-index: 0; } /* chaque étape */ .entry-content.asthir-page ol li { position: relative !important; z-index: 1 !important; counter-increment: neoxstep !important; display: block !important; min-height: 0 !important; margin: 0 !important; padding: 58px 30px 10px !important; text-align: center !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; line-height: 1.6 !important; transition: none !important; } /* numéro */ .entry-content.asthir-page ol li::before { content: "0" counter(neoxstep) !important; position: absolute !important; top: 0 !important; left: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 48px !important; height: 48px !important; transform: translateX(-50%) !important; border-radius: 50% !important; background: #fff !important; border: 1px solid rgba(0,0,0,.12) !important; font-size: 13px !important; font-weight: 800 !important; box-shadow: 0 5px 18px rgba(0,0,0,.08) !important; } /* pas d'effet hover */ .entry-content.asthir-page ol li:hover { transform: none !important; box-shadow: none !important; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 700px) { .entry-content.asthir-page ol { display: flex !important; flex-direction: column !important; gap: 22px !important; margin-top: 30px !important; } .entry-content.asthir-page ol::before { display: none !important; } .entry-content.asthir-page ol li { padding: 60px 25px 8px !important; } } /* ========================================================= NEOX2 - ZONE PARTAGER NETTOYAGE ET CENTRAGE ========================================================= */ /* Conteneur du partage */ .entry-content.asthir-page ~ .sharedaddy, .entry-content.asthir-page .sharedaddy, .entry-content.asthir-page + .sharedaddy { width: 100% !important; max-width: 900px !important; margin: 60px auto 45px !important; padding: 25px 20px !important; box-sizing: border-box !important; text-align: center !important; border: 0 !important; } /* Titre "Partager" */ .entry-content.asthir-page ~ .sharedaddy .sd-title, .entry-content.asthir-page .sharedaddy .sd-title, .sharedaddy .sd-title { display: block !important; width: 100% !important; margin: 0 0 20px !important; padding: 0 !important; text-align: center !important; font-size: 15px !important; font-weight: 700 !important; } /* Liste des boutons */ .sharedaddy .sd-content { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; margin: 0 auto !important; padding: 0 !important; } /* UL */ .sharedaddy .sd-content > ul { display: flex !important; align-items: center !important; justify-content: center !important; flex-wrap: wrap !important; gap: 9px !important; width: 100% !important; max-width: 700px !important; margin: 0 auto !important; padding: 0 !important; list-style: none !important; } /* Chaque bouton */ .sharedaddy .sd-content li { display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } /* Liens */ .sharedaddy .sd-content li a { display: flex !important; align-items: center !important; justify-content: center !important; min-width: 42px !important; height: 42px !important; padding: 0 13px !important; box-sizing: border-box !important; border-radius: 10px !important; text-decoration: none !important; } /* ========================================================= MASQUER LES ÉLÉMENTS VIDES / DOUBLONS ========================================================= */ /* boutons sans véritable contenu */ .sharedaddy .sd-content li:empty { display: none !important; } /* éléments Plus inutiles */ .sharedaddy .sd-content li.share-more { display: none !important; } /* "J'aime ça" */ .sharedaddy .sd-like { margin: 25px auto 0 !important; text-align: center !important; } /* ========================================================= "PERSONNALISER LES BOUTONS" ========================================================= */ .sharedaddy .sharing-hidden { display: none !important; } /* ========================================================= SUPPRESSION DES CERCLES VIDES ========================================================= */ .sharedaddy .sd-button .sharing-screen-reader-text { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 700px) { .sharedaddy { max-width: 100% !important; margin: 45px auto 35px !important; padding: 20px 10px !important; } .sharedaddy .sd-content > ul { gap: 7px !important; } .sharedaddy .sd-content li a { min-width: 38px !important; height: 38px !important; padding: 0 10px !important; } } /* ========================================================= NEOX2 - SUPPRESSION DES 3 CERCLES VIDES ========================================================= */ /* éléments vides générés par le module de partage */ .sharedaddy li:empty, .sd-sharing li:empty, .sharedaddy .sd-content > ul > li:empty { display: none !important; } /* liens/boutons qui ne contiennent aucune icône ou aucun texte */ .sharedaddy .sd-content > ul > li > a:empty, .sharedaddy .sd-content > ul > li > span:empty { display: none !important; } /* éventuels éléments graphiques vides */ .sharedaddy .sd-content > ul > li > a > span:empty, .sharedaddy .sd-content > ul > li > span > span:empty { display: none !important; } /* nettoyage de l'espace restant */ .sharedaddy .sd-content > ul { justify-content: center !important; align-items: center !important; gap: 8px !important; } /* supprimer les éventuels boutons "Plus" inutiles */ .sharedaddy li.share-more, .sharedaddy li.share-end { display: none !important; } /* ========================================================= NEOX2 - COMMENT ACHETER SUPPRESSION DES CERCLES + DESIGN PROPRE ========================================================= */ .entry-content.asthir-page ol { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; max-width: 1000px !important; margin: 40px auto 55px !important; padding: 0 !important; list-style: none !important; counter-reset: none !important; } /* Supprime complètement les anciens cercles */ .entry-content.asthir-page ol li::before { content: none !important; display: none !important; } /* Chaque étape */ .entry-content.asthir-page ol li { position: relative !important; display: block !important; min-height: 120px !important; margin: 0 !important; padding: 25px 25px 25px 70px !important; box-sizing: border-box !important; text-align: left !important; border-radius: 14px !important; background: rgba(0,0,0,.025) !important; line-height: 1.6 !important; list-style: none !important; box-shadow: none !important; transform: none !important; } /* Numéro simple, sans cercle */ .entry-content.asthir-page ol li { counter-increment: neoxstep !important; } .entry-content.asthir-page ol li::after { content: "0" counter(neoxstep) !important; position: absolute !important; left: 22px !important; top: 25px !important; font-size: 13px !important; font-weight: 800 !important; opacity: .55 !important; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 700px) { .entry-content.asthir-page ol { display: flex !important; flex-direction: column !important; gap: 14px !important; margin-top: 30px !important; } .entry-content.asthir-page ol li { min-height: auto !important; padding: 22px 20px 22px 65px !important; } .entry-content.asthir-page ol li::after { left: 20px !important; top: 22px !important; } } /* ========================================================= NEOX2 IPTV 4K DESIGN FINAL — VERSION PREMIUM Page : /neox2-iptv-abonnement-4k/ ========================================================= */ /* ========================================================= 01 — CONTENEUR ========================================================= */ .entry-content.asthir-page { width: 100% !important; max-width: 1120px !important; margin: 0 auto !important; padding: 30px 35px 90px !important; box-sizing: border-box !important; } /* ========================================================= 02 — TYPOGRAPHIE ========================================================= */ .entry-content.asthir-page h2, .entry-content.asthir-page h3 { letter-spacing: -0.4px !important; } .entry-content.asthir-page p { line-height: 1.8 !important; } /* ========================================================= 03 — HERO ========================================================= */ .entry-content.asthir-page > h2:first-child { max-width: 900px !important; margin: 15px auto 25px !important; text-align: center !important; font-size: clamp(36px, 5vw, 54px) !important; line-height: 1.06 !important; font-weight: 800 !important; } .entry-content.asthir-page > h2:first-child + p { max-width: 780px !important; margin: 0 auto 55px !important; text-align: center !important; font-size: 17px !important; line-height: 1.85 !important; } /* ========================================================= 04 — TITRES DE SECTIONS ========================================================= */ .entry-content.asthir-page h3 { max-width: 900px !important; margin: 80px auto 30px !important; font-size: clamp(26px, 3vw, 34px) !important; line-height: 1.15 !important; font-weight: 800 !important; } /* petit détail sous les titres */ .entry-content.asthir-page h3::after { content: ""; display: block; width: 42px; height: 3px; margin-top: 14px; border-radius: 10px; } /* ========================================================= 05 — NOS OFFRES ========================================================= */ .entry-content.asthir-page > h3:first-of-type { margin-top: 20px !important; text-align: center !important; } .entry-content.asthir-page > h3:first-of-type::after { margin-left: auto !important; margin-right: auto !important; } /* image principale */ .entry-content.asthir-page > h3:first-of-type + img { display: block !important; width: auto !important; max-width: 370px !important; height: auto !important; margin: 35px auto 65px !important; border-radius: 20px !important; box-shadow: 0 18px 50px rgba(0,0,0,.12) !important; } /* ========================================================= 06 — COMMENT ACHETER ========================================================= */ .entry-content.asthir-page h3:has(+ ol) { text-align: center !important; } .entry-content.asthir-page h3:has(+ ol)::after { margin-left: auto !important; margin-right: auto !important; } /* grille */ .entry-content.asthir-page ol { position: relative !important; display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 22px !important; max-width: 980px !important; margin: 40px auto 50px !important; padding: 0 !important; list-style: none !important; counter-reset: neoxstep !important; } /* ligne discrète */ .entry-content.asthir-page ol::before { content: ""; position: absolute; top: 24px; left: 16%; right: 16%; height: 1px; background: currentColor; opacity: .12; } /* étape */ .entry-content.asthir-page ol li { position: relative; z-index: 1; counter-increment: neoxstep; min-height: 120px; margin: 0 !important; padding: 60px 25px 20px !important; text-align: center !important; line-height: 1.65 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* numéro */ .entry-content.asthir-page ol li::before { content: "0" counter(neoxstep) !important; position: absolute; top: 0; left: 50%; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; transform: translateX(-50%); border-radius: 50%; background: #fff; border: 1px solid rgba(0,0,0,.12); font-size: 13px; font-weight: 800; box-shadow: 0 5px 18px rgba(0,0,0,.07); } /* ========================================================= 07 — OFFRES NEOX2 / MAGNUM ========================================================= */ .entry-content.asthir-page div[style*="display: flex"] { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: center !important; align-items: flex-start !important; gap: 30px !important; width: 100% !important; margin: 35px auto 65px !important; } /* carte */ .entry-content.asthir-page div[style*="display: flex"] > a { display: flex !important; align-items: center !important; justify-content: center !important; width: 300px !important; padding: 18px !important; box-sizing: border-box !important; border-radius: 20px !important; background: rgba(0,0,0,.025) !important; box-shadow: 0 10px 32px rgba(0,0,0,.06) !important; transition: transform .25s ease, box-shadow .25s ease !important; } /* image */ .entry-content.asthir-page div[style*="display: flex"] img { display: block !important; width: auto !important; max-width: 100% !important; height: 380px !important; object-fit: contain !important; margin: 0 !important; border-radius: 13px !important; } /* hover */ .entry-content.asthir-page div[style*="display: flex"] > a:hover { transform: translateY(-6px) !important; box-shadow: 0 20px 45px rgba(0,0,0,.12) !important; } /* ========================================================= 08 — TEXTE APRÈS LES OFFRES ========================================================= */ .entry-content.asthir-page div[style*="display: flex"] + p { max-width: 800px !important; margin: 0 auto 25px !important; text-align: center !important; } /* prix */ .entry-content.asthir-page div[style*="display: flex"] + p + ul { max-width: 650px !important; margin: 25px auto 55px !important; padding: 0 !important; list-style: none !important; } .entry-content.asthir-page div[style*="display: flex"] + p + ul li { padding: 17px 25px; border-radius: 12px; text-align: center; font-weight: 700; background: rgba(0,0,0,.035); } /* ========================================================= 09 — APK ========================================================= */ .entry-content.asthir-page img[src*="NEOX2-APK"] { display: block !important; width: 480px !important; max-width: 90% !important; height: auto !important; margin: 30px auto 60px !important; border-radius: 13px !important; box-shadow: 0 10px 30px rgba(0,0,0,.08) !important; } /* ========================================================= 10 — CONTENU ========================================================= */ .entry-content.asthir-page h3:not(:first-of-type) { max-width: 900px !important; margin-left: auto !important; margin-right: auto !important; } .entry-content.asthir-page h3:not(:first-of-type) ~ p { max-width: 850px !important; margin-left: auto !important; margin-right: auto !important; line-height: 1.85 !important; } /* ========================================================= 11 — LISTES ========================================================= */ .entry-content.asthir-page > ul { max-width: 850px !important; margin: 25px auto !important; padding: 0 !important; list-style: none !important; } .entry-content.asthir-page > ul li { position: relative; margin-bottom: 8px !important; padding: 11px 15px 11px 35px !important; line-height: 1.7 !important; } .entry-content.asthir-page > ul li::before { content: "✓"; position: absolute; left: 7px; font-weight: 800; } /* ========================================================= 12 — IMAGES ========================================================= */ .entry-content.asthir-page img { max-width: 100% !important; height: auto !important; } /* ========================================================= 13 — LIEN FINAL ========================================================= */ .entry-content.asthir-page a[href="https://neox2app.fr"] { display: block !important; width: fit-content !important; margin: 45px auto 20px !important; padding: 14px 28px !important; border-radius: 10px !important; font-weight: 700 !important; box-shadow: 0 8px 25px rgba(0,0,0,.08); transition: transform .2s ease, box-shadow .2s ease !important; } .entry-content.asthir-page a[href="https://neox2app.fr"]:hover { transform: translateY(-3px) !important; box-shadow: 0 14px 32px rgba(0,0,0,.12) !important; } /* ========================================================= 14 — PARTAGE ========================================================= */ .entry-content.asthir-page ~ .sharedaddy, .entry-content.asthir-page .sharedaddy { max-width: 900px !important; margin: 65px auto 45px !important; padding: 25px 20px !important; text-align: center !important; } .sharedaddy .sd-title { display: block !important; margin: 0 0 18px !important; text-align: center !important; } .sharedaddy .sd-content > ul { display: flex !important; align-items: center !important; justify-content: center !important; flex-wrap: wrap !important; gap: 8px !important; margin: 0 auto !important; padding: 0 !important; } .sharedaddy .sd-content li { margin: 0 !important; padding: 0 !important; } /* ========================================================= 15 — TABLETTE ========================================================= */ @media (max-width: 900px) and (min-width: 701px) { .entry-content.asthir-page { padding-left: 22px !important; padding-right: 22px !important; } .entry-content.asthir-page div[style*="display: flex"] { gap: 18px !important; } .entry-content.asthir-page div[style*="display: flex"] > a { width: 270px !important; } .entry-content.asthir-page div[style*="display: flex"] img { height: 340px !important; } } /* ========================================================= 16 — MOBILE ========================================================= */ @media (max-width: 700px) { .entry-content.asthir-page { padding: 20px 16px 60px !important; } .entry-content.asthir-page > h2:first-child { font-size: 34px !important; } .entry-content.asthir-page > h2:first-child + p { font-size: 15px !important; margin-bottom: 35px !important; } .entry-content.asthir-page h3 { margin-top: 55px !important; font-size: 26px !important; } /* étapes */ .entry-content.asthir-page ol { display: flex !important; flex-direction: column !important; gap: 12px !important; margin-top: 30px !important; } .entry-content.asthir-page ol::before { display: none !important; } .entry-content.asthir-page ol li { min-height: 0 !important; padding: 58px 20px 20px !important; } /* offres */ .entry-content.asthir-page div[style*="display: flex"] { flex-direction: column !important; align-items: center !important; gap: 20px !important; } .entry-content.asthir-page div[style*="display: flex"] > a { width: min(300px, 90%) !important; } .entry-content.asthir-page div[style*="display: flex"] img { width: auto !important; height: auto !important; max-height: 400px !important; } } /* ========================================================= 17 — PETIT MOBILE ========================================================= */ @media (max-width: 480px) { .entry-content.asthir-page { padding-left: 13px !important; padding-right: 13px !important; } .entry-content.asthir-page > h2:first-child { font-size: 30px !important; } .entry-content.asthir-page h3 { font-size: 23px !important; } .entry-content.asthir-page div[style*="display: flex"] > a { width: 250px !important; } } ```css /* ========================================================= NEOX2 — PAGE ABONNEMENT IPTV CSS WORDPRESS — VERSION CORRIGÉE ========================================================= */ /* ========================================================= VARIABLES ========================================================= */ .neox2-page { --neox-gold: #d8b23f; --neox-gold-light: #e6c85a; --neox-bg: #0d0d0d; --neox-surface: #151515; --neox-surface-2: #1b1b1b; --neox-border: rgba(216,178,63,.22); --neox-text: #f4f4f4; --neox-muted: #a7a7a7; width: 100% !important; max-width: 1240px !important; margin: 0 auto !important; padding: 40px 35px 90px !important; box-sizing: border-box !important; color: var(--neox-text); } /* ========================================================= RESET LOCAL ========================================================= */ .neox2-page *, .neox2-page *::before, .neox2-page *::after { box-sizing: border-box; } .neox2-page img { max-width: 100%; height: auto; } .neox2-page h1, .neox2-page h2, .neox2-page h3, .neox2-page p { margin-top: 0; } .neox2-page a { text-decoration: none !important; } /* ========================================================= HERO ========================================================= */ .neox2-hero { position: relative; display: grid !important; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); align-items: center; gap: 70px; min-height: 500px; margin: 0 auto 100px !important; padding: 65px 75px !important; background: radial-gradient( circle at 85% 35%, rgba(216,178,63,.11), transparent 32% ), linear-gradient( 135deg, #101010, #151515 ); border: 1px solid var(--neox-border); border-radius: 22px; overflow: hidden; box-shadow: 0 25px 70px rgba(0,0,0,.35); } .neox2-hero::before { content: ""; position: absolute; width: 260px; height: 260px; top: -130px; right: -100px; border-radius: 50%; background: rgba(216,178,63,.08); filter: blur(2px); pointer-events: none; } .neox2-hero-content { position: relative; z-index: 2; max-width: 650px; } .neox2-kicker, .neox2-label { display: inline-block; margin-bottom: 15px; color: var(--neox-gold); font-size: 12px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; } .neox2-hero h1 { margin-bottom: 25px !important; font-size: clamp(42px, 5vw, 64px) !important; line-height: 1.02 !important; font-weight: 850 !important; letter-spacing: -1.8px; } .neox2-hero-text { max-width: 590px; margin-bottom: 30px !important; color: #bdbdbd; font-size: 17px; line-height: 1.8; } /* ========================================================= CHECKS HERO ========================================================= */ .neox2-checks { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px 25px; margin-bottom: 35px; } .neox2-checks div { color: #d3d3d3; font-size: 14px; line-height: 1.5; } .neox2-checks div::first-letter { color: var(--neox-gold); } /* ========================================================= BOUTON PRINCIPAL ========================================================= */ .neox2-main-button { display: inline-flex !important; align-items: center; justify-content: center; min-height: 52px; padding: 0 30px; border-radius: 8px; background: linear-gradient( 135deg, var(--neox-gold-light), var(--neox-gold) ); color: #111 !important; font-size: 12px; font-weight: 900; letter-spacing: .8px; box-shadow: 0 10px 28px rgba(216,178,63,.16); transition: transform .25s ease, box-shadow .25s ease; } .neox2-main-button:hover { transform: translateY(-3px); color: #111 !important; box-shadow: 0 15px 35px rgba(216,178,63,.25); } /* ========================================================= IMAGE HERO ========================================================= */ .neox2-hero-image { position: relative; display: flex; align-items: center; justify-content: center; min-height: 350px; } .neox2-hero-image::before { content: ""; position: absolute; width: 300px; height: 300px; border-radius: 50%; background: rgba(216,178,63,.08); filter: blur(25px); } .neox2-hero-image img { position: relative; z-index: 2; width: auto !important; max-width: 270px !important; max-height: 390px; object-fit: contain; filter: drop-shadow(0 25px 35px rgba(0,0,0,.5)); transition: transform .35s ease; } .neox2-hero-image img:hover { transform: translateY(-7px) rotate(1deg); } /* ========================================================= SECTIONS ========================================================= */ .neox2-section { width: 100%; margin: 0 auto 100px; padding: 0; } .neox2-section-title { max-width: 750px; margin: 0 auto 45px; text-align: center; color: var(--neox-muted); font-size: 13px; line-height: 1.7; } .neox2-section-title h2 { margin: 10px 0 12px !important; color: var(--neox-text); font-size: clamp(30px,4vw,42px) !important; line-height: 1.1 !important; font-weight: 850 !important; } .neox2-section-title h2::after { content: ""; display: block; width: 45px; height: 3px; margin: 18px auto 0; border-radius: 20px; background: var(--neox-gold); } /* ========================================================= OFFRES ========================================================= */ .neox2-offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 1060px; margin: 0 auto; /* IMPORTANT : laisse le badge dépasser si nécessaire */ overflow: visible !important; } .neox2-offer { position: relative; display: flex; flex-direction: column; min-height: 405px; padding: 34px 30px 30px; background: linear-gradient( 160deg, #171717, #111 ); border: 1px solid rgba(255,255,255,.055); border-radius: 16px; box-shadow: 0 15px 40px rgba(0,0,0,.25); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; /* CORRECTION DU BADGE */ overflow: visible !important; } .neox2-offer:hover { transform: translateY(-7px); border-color: var(--neox-border); box-shadow: 0 22px 50px rgba(0,0,0,.35); } /* Offre mise en avant */ .neox2-offer.neox2-featured { position: relative; border-color: rgba(216,178,63,.5); background: linear-gradient( 160deg, #1b1913, #111 ); box-shadow: 0 20px 55px rgba(216,178,63,.08); overflow: visible !important; } .neox2-duration { display: inline-block; margin-bottom: 20px; color: var(--neox-muted); font-size: 11px; font-weight: 800; letter-spacing: 2px; } .neox2-offer h3 { margin-bottom: 14px !important; color: var(--neox-text); font-size: 22px !important; font-weight: 800 !important; } .neox2-price { margin-bottom: 28px; color: var(--neox-gold); font-size: 38px; line-height: 1; font-weight: 900; } .neox2-price small { color: #858585; font-size: 12px; font-weight: 500; } .neox2-offer ul { flex: 1; margin: 0 0 25px; padding: 0; list-style: none; } .neox2-offer li { position: relative; margin-bottom: 12px; padding-left: 19px; color: #bdbdbd; font-size: 13px; line-height: 1.5; } .neox2-offer li::before { content: "✓"; position: absolute; left: 0; color: var(--neox-gold); font-weight: 800; } .neox2-offer-button { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; border-radius: 7px; background: var(--neox-gold); color: #111 !important; font-size: 11px; font-weight: 900; letter-spacing: 1px; transition: transform .2s ease, background .2s ease; } .neox2-offer-button:hover { transform: translateY(-2px); background: var(--neox-gold-light); color: #111 !important; } /* ========================================================= BADGE 12 MOIS — CORRIGÉ ========================================================= */ .neox2-badge { position: absolute; /* Le badge reste entièrement visible dans la carte. */ top: 10px; right: 18px; padding: 7px 14px; border-radius: 20px; background: var(--neox-gold); color: #111; font-size: 10px; font-weight: 900; letter-spacing: 1px; line-height: 1.2; white-space: nowrap; z-index: 50; } /* ========================================================= PRESENTATION ========================================================= */ .neox2-presentation { display: grid !important; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; gap: 80px; max-width: 1080px; margin-left: auto !important; margin-right: auto !important; padding: 70px !important; background: var(--neox-surface); border: 1px solid rgba(255,255,255,.045); border-radius: 20px; } .neox2-presentation .neox2-text { color: #aaa; font-size: 15px; line-height: 1.85; } .neox2-presentation h2 { margin: 8px 0 22px !important; color: var(--neox-text); font-size: 38px !important; line-height: 1.1 !important; } .neox2-info-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-top: 30px; } .neox2-info-grid > div { padding: 17px; background: #101010; border: 1px solid rgba(255,255,255,.04); border-radius: 9px; color: #bdbdbd; font-size: 12px; line-height: 1.5; } .neox2-info-grid strong { display: block; margin-bottom: 6px; color: var(--neox-gold); font-size: 11px; } .neox2-presentation-image { display: flex; align-items: center; justify-content: center; } .neox2-presentation-image img { display: block; width: 100% !important; max-width: 500px !important; height: auto !important; border-radius: 13px; box-shadow: 0 20px 45px rgba(0,0,0,.35); } /* ========================================================= ETAPES ========================================================= */ .neox2-steps { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); max-width: 1080px; margin: 0 auto; border: 1px solid rgba(255,255,255,.05); border-radius: 16px; overflow: hidden; } .neox2-step { position: relative; min-height: 235px; padding: 30px 25px; background: #151515; border-right: 1px solid rgba(255,255,255,.06); color: #929292; font-size: 13px; line-height: 1.7; } .neox2-step:last-child { border-right: 0; } .neox2-step > h3 { margin: 35px 0 15px !important; color: var(--neox-text); font-size: 19px !important; line-height: 1.2 !important; } .neox2-step:hover { background: #191919; } /* ========================================================= COMPATIBILITE ========================================================= */ .neox2-dark-section { max-width: 1080px; margin-left: auto !important; margin-right: auto !important; padding: 65px 55px !important; background: #111; border-top: 1px solid rgba(216,178,63,.1); border-bottom: 1px solid rgba(216,178,63,.1); } .neox2-compatibility { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 15px; max-width: 950px; margin: 0 auto; } .neox2-compat { min-height: 110px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; background: #171717; border: 1px solid rgba(255,255,255,.055); border-radius: 11px; color: #999; font-size: 12px; line-height: 1.5; } .neox2-compat strong { display: block; margin-bottom: 9px; color: var(--neox-gold); font-size: 13px; letter-spacing: 1px; } .neox2-note { max-width: 700px; margin: 25px auto 0 !important; text-align: center; color: #707070; font-size: 12px; } /* ========================================================= INSTALLATION ========================================================= */ .neox2-install { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(280px,.75fr); gap: 60px; max-width: 1080px; margin: 0 auto; align-items: center; } .neox2-install > div:first-child { color: #a7a7a7; font-size: 15px; line-height: 1.85; } .neox2-install h2 { margin: 7px 0 22px !important; color: var(--neox-text); font-size: 38px !important; line-height: 1.1 !important; } .neox2-install-card { padding: 35px; background: linear-gradient( 145deg, #191714, #121212 ); border: 1px solid rgba(216,178,63,.35); border-radius: 16px; color: #9f9f9f; font-size: 14px; line-height: 1.7; } .neox2-install-card > h3 { margin: 15px 0 12px !important; color: var(--neox-text); font-size: 22px !important; } /* ========================================================= LIENS UTILES ========================================================= */ .neox2-links-section { max-width: 900px; margin: 0 auto 100px; text-align: center; } .neox2-links-section h2 { margin-bottom: 30px !important; color: var(--neox-text); font-size: 32px !important; } .neox2-links { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 15px; max-width: 700px; margin: 0 auto; } .neox2-links a { display: flex; align-items: center; gap: 16px; min-height: 70px; padding: 16px 20px; background: #151515; border: 1px solid rgba(255,255,255,.05); border-radius: 10px; color: #aaa !important; font-size: 13px; text-align: left; transition: transform .2s ease, border-color .2s ease, background .2s ease; } .neox2-links a:hover { transform: translateY(-3px); border-color: var(--neox-border); background: #191919; } /* ========================================================= CTA FINAL ========================================================= */ .neox2-final-cta { position: relative; max-width: 1080px; margin: 0 auto; padding: 75px 40px; text-align: center; background: radial-gradient( circle at center, rgba(216,178,63,.08), transparent 55% ), #111; border: 1px solid rgba(216,178,63,.22); border-radius: 22px; overflow: hidden; } .neox2-final-cta > h2 { margin: 8px 0 15px !important; color: var(--neox-text); font-size: clamp(30px,4vw,44px) !important; line-height: 1.1 !important; } .neox2-final-cta > p { max-width: 600px; margin: 0 auto 30px; color: #969696; line-height: 1.7; } /* ========================================================= TABLETTE ========================================================= */ @media (max-width: 1000px) { .neox2-page { padding-left: 22px !important; padding-right: 22px !important; } .neox2-hero { grid-template-columns: 1fr .7fr; gap: 35px; padding: 50px 45px !important; } .neox2-hero h1 { font-size: 45px !important; } .neox2-presentation { gap: 40px; padding: 45px !important; } .neox2-offers { gap: 15px; } .neox2-offer { padding-left: 22px; padding-right: 22px; } .neox2-steps { grid-template-columns: repeat(2,1fr); } .neox2-step:nth-child(2) { border-right: 0; } .neox2-step:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.06); } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 700px) { .neox2-page { padding: 25px 15px 60px !important; } /* HERO */ .neox2-hero { grid-template-columns: 1fr; gap: 35px; min-height: auto; margin-bottom: 70px !important; padding: 40px 25px !important; text-align: center; border-radius: 17px; } .neox2-hero-content { max-width: none; } .neox2-hero h1 { font-size: 36px !important; } .neox2-hero-text { margin-left: auto; margin-right: auto; font-size: 15px; } .neox2-checks { grid-template-columns: 1fr; text-align: left; gap: 9px; } .neox2-main-button { width: 100%; } .neox2-hero-image { min-height: 280px; } .neox2-hero-image img { max-width: 220px !important; max-height: 310px; } /* OFFRES */ .neox2-offers { grid-template-columns: 1fr; max-width: 390px; gap: 25px; padding-top: 10px; } .neox2-offer { min-height: 380px; overflow: visible !important; } /* Sur mobile, le badge reste dans la carte et ne sera pas coupé. */ .neox2-badge { top: 10px; right: 15px; font-size: 9px; padding: 6px 11px; } /* PRESENTATION */ .neox2-presentation { grid-template-columns: 1fr; gap: 40px; padding: 30px 23px !important; border-radius: 16px; } .neox2-presentation h2, .neox2-install h2 { font-size: 30px !important; } .neox2-info-grid { grid-template-columns: 1fr; } /* ETAPES */ .neox2-steps { grid-template-columns: 1fr; max-width: 420px; } .neox2-step { min-height: auto; padding: 28px 25px 30px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.06); } .neox2-step:last-child { border-bottom: 0; } .neox2-step > h3 { margin-top: 20px !important; } /* COMPATIBILITE */ .neox2-dark-section { padding: 45px 20px !important; } .neox2-compatibility { grid-template-columns: repeat(2,1fr); } /* INSTALLATION */ .neox2-install { grid-template-columns: 1fr; gap: 30px; } /* LIENS */ .neox2-links { grid-template-columns: 1fr; max-width: 420px; } /* CTA */ .neox2-final-cta { padding: 55px 25px; } } /* ========================================================= PETIT MOBILE ========================================================= */ @media (max-width: 430px) { .neox2-page { padding-left: 10px !important; padding-right: 10px !important; } .neox2-hero { padding: 35px 20px !important; } .neox2-hero h1 { font-size: 32px !important; } .neox2-section-title h2 { font-size: 29px !important; } .neox2-compatibility { grid-template-columns: 1fr; } .neox2-final-cta { padding-left: 20px; padding-right: 20px; } .neox2-badge { right: 12px; top: 10px; } } ``` /* ===================================================== NEOX2 - BLOC ACHETER MAINTENANT ===================================================== */ .neox2-achat { width: 100%; max-width: 900px; margin: 35px auto 20px; padding: 0 15px; box-sizing: border-box; } .neox2-achat-titre { display: block !important; width: 100%; margin: 0 0 25px !important; padding: 0 !important; color: #111827 !important; font-size: 24px !important; line-height: 1.5 !important; visibility: visible !important; opacity: 1 !important; } .neox2-achat-titre span { color: #0000ff !important; } .neox2-achat-titre small { display: inline; color: #0000ff !important; font-size: 20px; font-weight: 400; } /* LES DEUX IMAGES */ .neox2-produits { display: flex !important; justify-content: center; align-items: flex-start; gap: 30px; width: 100%; margin: 0 auto; padding: 0; box-sizing: border-box; } .neox2-produit { display: block !important; width: 270px !important; max-width: 270px !important; margin: 0 !important; padding: 0 !important; line-height: 0 !important; text-decoration: none !important; visibility: visible !important; opacity: 1 !important; } .neox2-produit img { display: block !important; width: 270px !important; max-width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; visibility: visible !important; opacity: 1 !important; border: 0 !important; border-radius: 10px; box-sizing: border-box; } /* EFFET AU SURVOL */ .neox2-produit:hover img { opacity: 0.9 !important; transform: translateY(-3px); transition: 0.2s ease; } /* RETOUR ACCUEIL */ .neox2-retour { width: 100%; text-align: center !important; margin: 30px auto !important; } .neox2-retour a { color: #2563eb !important; font-weight: 600 !important; text-decoration: none !important; } .neox2-retour a:hover { text-decoration: underline !important; } /* ===================================================== MOBILE ===================================================== */ @media screen and (max-width: 700px) { .neox2-achat { width: 100%; padding: 0 12px; margin-top: 30px; } .neox2-achat-titre { font-size: 20px !important; text-align: left; } .neox2-achat-titre small { display: block; margin-top: 4px; font-size: 17px; } .neox2-produits { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 20px; } .neox2-produit { width: 100% !important; max-width: 300px !important; } .neox2-produit img { width: 100% !important; max-width: 300px !important; height: auto !important; } } /* ===== PAGE INSTALLATION NEOX2 ===== */ /* Texte général de la page */ body { color: #111111; } /* Contenu de l'article */ .entry-content, .entry-content p, .entry-content li, .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6, .entry-content strong, .entry-content span { color: #111111 !important; } /* Titres violets du guide */ .entry-content h2, .entry-content h3 { color: #4338ca !important; } /* Texte du bandeau violet */ .entry-content div[style*="background: #4338ca"] h2, .entry-content div[style*="background: #4338ca"] p { color: #ffffff !important; } /* Codes 816134 et 2257663 */ .entry-content div[style*="background: #020617"] { color: #ffffff !important; } /* Textes verts */ .entry-content p[style*="#16a34a"] { color: #16a34a !important; } /* Liens */ .entry-content a { color: #2563eb !important; } /* Images */ .entry-content img { opacity: 1 !important; visibility: visible !important; } /* ================================================== BLOC ACHETER MAINTENANT ================================================== */ .entry-content h3 { opacity: 1 !important; visibility: visible !important; } /* Les images d'achat */ .entry-content img.wp-image-24719, .entry-content img.wp-image-24720 { display: inline-block !important; visibility: visible !important; opacity: 1 !important; width: 269px !important; height: auto !important; max-width: 100% !important; } /* Liens contenant les images */ .entry-content a:has(img.wp-image-24719), .entry-content a:has(img.wp-image-24720) { display: inline-block !important; visibility: visible !important; opacity: 1 !important; } /* ================================================== MOBILE ================================================== */ @media (max-width: 600px) { .entry-content img.wp-image-24719, .entry-content img.wp-image-24720 { display: block !important; width: 100% !important; max-width: 300px !important; height: auto !important; margin: 15px auto !important; } } /* ========================================================= NEOX2 — PAGE INSTALLATION DESIGN PREMIUM ========================================================= */ /* --------------------------------------------------------- COULEURS --------------------------------------------------------- */ :root { --neox-gold: #d8b23f; --neox-gold-light: #e6c85a; --neox-bg: #0d0d0d; --neox-card: #151515; --neox-card-2: #1b1b1b; --neox-text: #f4f4f4; --neox-muted: #b5b5b5; --neox-border: rgba(216,178,63,.22); } /* --------------------------------------------------------- FOND --------------------------------------------------------- */ body { background: var(--neox-bg) !important; } /* --------------------------------------------------------- CONTENU --------------------------------------------------------- */ .entry-content { color: var(--neox-text) !important; } /* --------------------------------------------------------- GRAND BLOC PRINCIPAL --------------------------------------------------------- */ .entry-content div[style*="background: #fff"] { background: linear-gradient( 145deg, #151515, #101010 ) !important; border: 1px solid rgba(216,178,63,.18) !important; border-top: 1px solid rgba(216,178,63,.18) !important; border-radius: 0 0 18px 18px !important; color: var(--neox-muted) !important; box-shadow: 0 20px 55px rgba(0,0,0,.30); } /* --------------------------------------------------------- TEXTE --------------------------------------------------------- */ .entry-content div[style*="background: #fff"] p { color: #bdbdbd !important; font-size: 15px !important; line-height: 1.85 !important; } .entry-content div[style*="background: #fff"] p strong { color: var(--neox-gold-light) !important; font-weight: 800 !important; visibility: visible !important; } /* --------------------------------------------------------- TITRES ÉTAPES --------------------------------------------------------- */ .entry-content h3[style] { margin: 55px 0 20px !important; padding: 22px 24px !important; color: var(--neox-text) !important; background: linear-gradient( 145deg, #191919, #131313 ) !important; border: 1px solid rgba(255,255,255,.06) !important; border-left: 4px solid var(--neox-gold) !important; border-radius: 12px !important; font-size: 21px !important; line-height: 1.3 !important; font-weight: 800 !important; box-shadow: 0 12px 35px rgba(0,0,0,.25); } /* Numéro des étapes */ .entry-content h3[style]::first-letter { color: var(--neox-gold); } /* --------------------------------------------------------- IMAGES --------------------------------------------------------- */ .entry-content div[style*="background: #fff"] img { display: block; width: auto !important; max-width: 100% !important; height: auto !important; margin: 25px auto !important; border-radius: 14px !important; border: 1px solid rgba(255,255,255,.06); box-shadow: 0 18px 45px rgba(0,0,0,.40); } /* --------------------------------------------------------- LIENS DOWNLOAD --------------------------------------------------------- */ .entry-content div[style*="background: #fff"] ul { margin: 20px 0 35px !important; padding: 22px 25px 22px 42px !important; background: #111 !important; border: 1px solid rgba(255,255,255,.05); border-radius: 12px; list-style: none !important; } .entry-content div[style*="background: #fff"] li { position: relative; margin: 0 0 12px !important; padding-left: 20px; color: #bdbdbd !important; line-height: 1.6; } .entry-content div[style*="background: #fff"] li:last-child { margin-bottom: 0 !important; } .entry-content div[style*="background: #fff"] li::before { content: "✓"; position: absolute; left: 0; color: var(--neox-gold); font-weight: 900; } .entry-content div[style*="background: #fff"] li a { color: var(--neox-gold-light) !important; font-weight: 700 !important; text-decoration: none !important; } .entry-content div[style*="background: #fff"] li a:hover { color: #fff !important; } /* --------------------------------------------------------- BLOC ANDROID TV / FIRESTICK --------------------------------------------------------- */ .entry-content div[style*="#f8fafc"] { margin: 25px 0 30px !important; padding: 24px !important; background: linear-gradient( 145deg, #191714, #121212 ) !important; border: 1px solid rgba(216,178,63,.25) !important; border-left: 4px solid var(--neox-gold) !important; border-radius: 12px !important; color: #bdbdbd !important; box-shadow: 0 12px 35px rgba(0,0,0,.25); } .entry-content div[style*="#f8fafc"] p { color: #bdbdbd !important; margin-bottom: 10px !important; } .entry-content div[style*="#f8fafc"] strong { color: var(--neox-gold-light) !important; } /* --------------------------------------------------------- CODES 816134 / 2257663 --------------------------------------------------------- */ .entry-content div[style*="#020617"] { display: block !important; width: fit-content !important; min-width: 180px; margin: 20px auto 25px !important; padding: 15px 28px !important; text-align: center; background: linear-gradient( 135deg, var(--neox-gold-light), var(--neox-gold) ) !important; color: #111 !important; border: 0 !important; border-radius: 10px !important; font-size: 27px !important; font-weight: 900 !important; letter-spacing: 3px; box-shadow: 0 12px 30px rgba(216,178,63,.18); } /* --------------------------------------------------------- TEXTE "GO" --------------------------------------------------------- */ .entry-content div[style*="background: #fff"] p strong { color: var(--neox-gold-light) !important; } /* --------------------------------------------------------- MESSAGE INSTALLATION RÉUSSIE --------------------------------------------------------- */ .entry-content p[style*="#16a34a"] { margin: 20px 0 !important; padding: 13px 17px !important; color: var(--neox-gold-light) !important; background: rgba(216,178,63,.07) !important; border: 1px solid rgba(216,178,63,.18) !important; border-radius: 9px; font-weight: 800 !important; } /* --------------------------------------------------------- BONNES PRATIQUES --------------------------------------------------------- */ .entry-content div[style*="#f1f5f9"] { margin-top: 55px !important; padding: 28px !important; background: linear-gradient( 145deg, #191714, #111 ) !important; border: 1px solid rgba(216,178,63,.28) !important; border-radius: 16px !important; color: #bdbdbd !important; box-shadow: 0 18px 45px rgba(0,0,0,.30); } .entry-content div[style*="#f1f5f9"] h4 { margin: 0 0 18px !important; color: var(--neox-gold) !important; font-size: 21px !important; font-weight: 850 !important; background: transparent !important; } .entry-content div[style*="#f1f5f9"] p { color: #bdbdbd !important; } .entry-content div[style*="#f1f5f9"] ul { margin: 15px 0 !important; padding: 0 0 0 25px !important; background: transparent !important; border: 0 !important; } .entry-content div[style*="#f1f5f9"] li { color: #bdbdbd !important; } /* --------------------------------------------------------- TOUS LES LIENS --------------------------------------------------------- */ .entry-content a { transition: color .2s ease, opacity .2s ease; } /* --------------------------------------------------------- MOBILE --------------------------------------------------------- */ @media (max-width: 700px) { .entry-content div[style*="background: #fff"] { padding: 20px !important; border-radius: 0 0 15px 15px !important; } .entry-content div[style*="background: #fff"] p { font-size: 14px !important; line-height: 1.75 !important; } .entry-content h3[style] { margin-top: 38px !important; padding: 18px 18px !important; font-size: 18px !important; } .entry-content div[style*="#f8fafc"] { padding: 20px !important; } .entry-content div[style*="#020617"] { min-width: 160px; padding: 14px 24px !important; font-size: 23px !important; } .entry-content div[style*="#f1f5f9"] { padding: 22px !important; margin-top: 40px !important; } .entry-content div[style*="#f1f5f9"] h4 { font-size: 18px !important; } } /* --------------------------------------------------------- TRÈS PETIT MOBILE --------------------------------------------------------- */ @media (max-width: 430px) { .entry-content div[style*="background: #fff"] { padding: 16px !important; } .entry-content h3[style] { font-size: 17px !important; } .entry-content div[style*="#020617"] { min-width: 145px; font-size: 21px !important; letter-spacing: 2px; } } /* ========================================================= CORRECTION INTRODUCTION + BONNES PRATIQUES ========================================================= */ /* Paragraphe d'introduction */ .entry-content p[style*="margin-bottom: 18px"] { display: block !important; visibility: visible !important; opacity: 1 !important; color: #c5c5c5 !important; background: transparent !important; font-size: 16px !important; line-height: 1.85 !important; margin: 0 0 25px !important; padding: 0 !important; } .entry-content p[style*="margin-bottom: 18px"] strong { color: #e6c85a !important; font-weight: 800 !important; } /* ========================================================= SUPPRIMER LA GROSSE AMPOULE ========================================================= */ .entry-content div[style*="#f1f5f9"] h4 img.emoji { display: none !important; } /* Titre Bonnes pratiques */ .entry-content div[style*="#f1f5f9"] h4 { display: block !important; color: #d8b23f !important; font-size: 20px !important; padding: 0 !important; margin: 0 0 18px !important; } /* NEOX2 - correction des couleurs du texte */ /* Texte général sur les fonds clairs */ .page-id-11384 .neox2-page { color: #222222 !important; } /* Paragraphes et listes */ .page-id-11384 .neox2-page p, .page-id-11384 .neox2-page li { color: #222222 !important; } /* Titres */ .page-id-11384 .neox2-page h1, .page-id-11384 .neox2-page h2, .page-id-11384 .neox2-page h3, .page-id-11384 .neox2-page h4 { color: #111111 !important; } /* Zone sombre : texte blanc */ .page-id-11384 .neox2-dark-section, .page-id-11384 .neox2-dark-section p, .page-id-11384 .neox2-dark-section h2, .page-id-11384 .neox2-dark-section h3, .page-id-11384 .neox2-dark-section li { color: #ffffff !important; } /* Boutons */ .page-id-11384 .neox2-main-button, .page-id-11384 .neox2-offer-button { color: #ffffff !important; } /* ========================================================= NEOX2 — PAGE ABONNEMENT CORRECTION TEXTE INVISIBLE PALETTE OFFICIELLE NEOX2 ========================================================= */ :root { --neox-gold: #d8b23f; --neox-gold-light: #e6c85a; --neox-bg: #0d0d0d; --neox-card: #151515; --neox-card-2: #1b1b1b; --neox-text: #f4f4f4; --neox-muted: #a7a7a7; } /* ========================================================= FOND ========================================================= */ body { background: #0d0d0d !important; } /* ========================================================= TEXTE GÉNÉRAL ========================================================= */ .entry-content { color: #f4f4f4 !important; } .entry-content p { color: #bdbdbd !important; } .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4 { color: #f4f4f4 !important; } /* ========================================================= PETITS LABELS DORÉS ========================================================= */ .entry-content .neox2-kicker, .entry-content .neox2-label { color: #d8b23f !important; } /* ========================================================= NOS ABONNEMENTS ========================================================= */ .entry-content .neox2-section-title { color: #a7a7a7 !important; } .entry-content .neox2-section-title h2 { color: #f4f4f4 !important; } /* ========================================================= CARTES ABONNEMENTS ========================================================= */ .entry-content .neox2-offer { background: linear-gradient( 160deg, #171717, #111111 ) !important; border-color: rgba(255,255,255,.07) !important; color: #f4f4f4 !important; } .entry-content .neox2-offer h3 { color: #f4f4f4 !important; } .entry-content .neox2-offer p, .entry-content .neox2-offer li { color: #bdbdbd !important; } .entry-content .neox2-duration { color: #a7a7a7 !important; } .entry-content .neox2-price { color: #d8b23f !important; } .entry-content .neox2-price small { color: #858585 !important; } /* ========================================================= LISTES CARTES ========================================================= */ .entry-content .neox2-offer li::before { color: #d8b23f !important; } /* ========================================================= BOUTONS ========================================================= */ .entry-content .neox2-offer-button, .entry-content .neox2-main-button { background: linear-gradient( 135deg, #e6c85a, #d8b23f ) !important; color: #111111 !important; } .entry-content .neox2-offer-button:hover, .entry-content .neox2-main-button:hover { color: #111111 !important; } /* ========================================================= PRÉSENTATION ========================================================= */ .entry-content .neox2-presentation { background: #151515 !important; border-color: rgba(255,255,255,.06) !important; color: #f4f4f4 !important; } .entry-content .neox2-presentation h2 { color: #f4f4f4 !important; } .entry-content .neox2-presentation .neox2-text { color: #bdbdbd !important; } /* ========================================================= BLOCS INFORMATIONS ========================================================= */ .entry-content .neox2-info-grid > div { background: #101010 !important; color: #bdbdbd !important; border-color: rgba(255,255,255,.05) !important; } .entry-content .neox2-info-grid strong { color: #d8b23f !important; } /* ========================================================= ÉTAPES ========================================================= */ .entry-content .neox2-step { background: #151515 !important; color: #999999 !important; border-color: rgba(255,255,255,.06) !important; } .entry-content .neox2-step h3 { color: #f4f4f4 !important; } .entry-content .neox2-step p { color: #a7a7a7 !important; } /* ========================================================= COMPATIBILITÉ ========================================================= */ .entry-content .neox2-dark-section { background: #111111 !important; color: #f4f4f4 !important; } .entry-content .neox2-compat { background: #171717 !important; color: #a7a7a7 !important; border-color: rgba(255,255,255,.06) !important; } .entry-content .neox2-compat strong { color: #d8b23f !important; } .entry-content .neox2-note { color: #707070 !important; } /* ========================================================= INSTALLATION ========================================================= */ .entry-content .neox2-install > div:first-child { color: #a7a7a7 !important; } .entry-content .neox2-install h2 { color: #f4f4f4 !important; } .entry-content .neox2-install-card { background: linear-gradient( 145deg, #191714, #121212 ) !important; color: #a7a7a7 !important; border-color: rgba(216,178,63,.35) !important; } .entry-content .neox2-install-card h3 { color: #f4f4f4 !important; } /* ========================================================= LIENS UTILES ========================================================= */ .entry-content .neox2-links-section h2 { color: #f4f4f4 !important; } .entry-content .neox2-links a { background: #151515 !important; color: #bdbdbd !important; border-color: rgba(255,255,255,.06) !important; } .entry-content .neox2-links a:hover { color: #f4f4f4 !important; border-color: rgba(216,178,63,.35) !important; } /* ========================================================= CTA FINAL ========================================================= */ .entry-content .neox2-final-cta { background: radial-gradient( circle at center, rgba(216,178,63,.08), transparent 55% ), #111111 !important; border-color: rgba(216,178,63,.22) !important; color: #f4f4f4 !important; } .entry-content .neox2-final-cta h2 { color: #f4f4f4 !important; } .entry-content .neox2-final-cta p { color: #969696 !important; } /* ========================================================= LIENS GÉNÉRAUX ========================================================= */ .entry-content a { color: #e6c85a !important; } .entry-content a:hover { color: #ffffff !important; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 700px) { .entry-content .neox2-offer h3 { color: #f4f4f4 !important; } .entry-content .neox2-offer li { color: #bdbdbd !important; } .entry-content .neox2-presentation .neox2-text { color: #bdbdbd !important; } .entry-content .neox2-step { color: #a7a7a7 !important; } .entry-content .neox2-compat { color: #a7a7a7 !important; } } /* ========================================================= NEOX2 — CORRECTION VISIBILITÉ TEXTE ========================================================= */ /* Texte général de toutes les cartes */ .neox2-page, .neox2-page p, .neox2-page li { color: #bdbdbd !important; } /* TOUS les titres */ .neox2-page h1, .neox2-page h2, .neox2-page h3, .neox2-page h4 { color: #f4f4f4 !important; opacity: 1 !important; visibility: visible !important; } /* Labels */ .neox2-page .neox2-kicker, .neox2-page .neox2-label, .neox2-page .neox2-duration { color: #d8b23f !important; } /* Texte du HERO */ .neox2-page .neox2-hero-text { color: #bdbdbd !important; } /* Cases informations */ .neox2-page .neox2-info-grid > div { color: #bdbdbd !important; background: #101010 !important; } .neox2-page .neox2-info-grid strong { color: #e6c85a !important; } /* Étapes */ .neox2-page .neox2-step { color: #bdbdbd !important; background: #151515 !important; } .neox2-page .neox2-step h3 { color: #f4f4f4 !important; } .neox2-page .neox2-step::first-line { color: #d8b23f !important; } /* Compatibilité */ .neox2-page .neox2-compat { color: #bdbdbd !important; background: #171717 !important; } .neox2-page .neox2-compat strong { color: #e6c85a !important; } /* Note compatibilité */ .neox2-page .neox2-note { color: #8f8f8f !important; } /* Installation */ .neox2-page .neox2-install > div:first-child { color: #bdbdbd !important; } .neox2-page .neox2-install h2 { color: #f4f4f4 !important; } .neox2-page .neox2-install-card { color: #bdbdbd !important; background: #151515 !important; } .neox2-page .neox2-install-card h3 { color: #f4f4f4 !important; } /* Liens utiles */ .neox2-page .neox2-links a { color: #bdbdbd !important; background: #151515 !important; } .neox2-page .neox2-links a:hover { color: #f4f4f4 !important; } /* CTA FINAL */ .neox2-page .neox2-final-cta h2 { color: #f4f4f4 !important; } .neox2-page .neox2-final-cta p { color: #a7a7a7 !important; } /* Boutons */ .neox2-page .neox2-main-button, .neox2-page .neox2-offer-button { color: #111 !important; } /* Prix */ .neox2-page .neox2-price { color: #d8b23f !important; } .neox2-page .neox2-price small { color: #858585 !important; } /* Listes abonnements */ .neox2-page .neox2-offer li { color: #bdbdbd !important; } .neox2-page .neox2-offer li::before { color: #d8b23f !important; } /* ========================================================= NEOX2 — CORRECTION DES 2 BLOCS INVISIBLES ========================================================= */ /* 1 — TITRE : Abonnement IPTV NeoX2 */ .neox2-page h1, .neox2-page .neox2-hero h1 { color: #f4f4f4 !important; opacity: 1 !important; visibility: visible !important; display: block !important; } /* 2 — TEXTE DE PRÉSENTATION */ .neox2-page .neox2-presentation .neox2-text, .neox2-page .neox2-presentation p { color: #bdbdbd !important; opacity: 1 !important; visibility: visible !important; display: block !important; } /* Texte exact de présentation */ .neox2-page .neox2-presentation { color: #bdbdbd !important; } .neox2-page .neox2-presentation h2 { color: #f4f4f4 !important; opacity: 1 !important; } .neox2-page .neox2-presentation strong { color: #e6c85a !important; } /* ========================================================= NEOX2 — BLOC INSTALLATION ========================================================= */ /* Petit titre INSTALLATION */ .neox2-page .neox2-install .neox2-label { color: #d8b23f !important; opacity: 1 !important; visibility: visible !important; } /* Grand titre */ .neox2-page .neox2-install h2 { color: #f4f4f4 !important; opacity: 1 !important; visibility: visible !important; display: block !important; } /* Texte à gauche */ .neox2-page .neox2-install > div:first-child, .neox2-page .neox2-install > div:first-child p { color: #bdbdbd !important; opacity: 1 !important; visibility: visible !important; display: block !important; } /* Carte "Besoin d'aide ?" */ .neox2-page .neox2-install-card { background: linear-gradient( 145deg, #191714, #121212 ) !important; color: #bdbdbd !important; border: 1px solid rgba(216,178,63,.35) !important; opacity: 1 !important; visibility: visible !important; } /* Texte dans la carte */ .neox2-page .neox2-install-card p { color: #bdbdbd !important; opacity: 1 !important; visibility: visible !important; } /* Titre "Besoin d'aide ?" */ .neox2-page .neox2-install-card h3 { color: #f4f4f4 !important; opacity: 1 !important; visibility: visible !important; } /* Le symbole ✓ */ .neox2-page .neox2-install-card::first-letter { color: #d8b23f !important; } /* Tous les éléments texte de cette section */ .neox2-page .neox2-install, .neox2-page .neox2-install * { opacity: 1; visibility: visible; } /* On remet les couleurs après la règle ci-dessus */ .neox2-page .neox2-install h2, .neox2-page .neox2-install-card h3 { color: #f4f4f4 !important; } .neox2-page .neox2-install p, .neox2-page .neox2-install-card { color: #bdbdbd !important; } /* ========================================================= NEOX2 — SURCOUCHE FINALE PAGE ABONNEMENT NE PAS SUPPRIMER LES ANCIENS CSS ========================================================= */ /* --------------------------------------------------------- TEXTE GÉNÉRAL --------------------------------------------------------- */ .neox2-page { color: #f4f4f4 !important; } .neox2-page p { color: #bdbdbd !important; } .neox2-page h1, .neox2-page h2, .neox2-page h3, .neox2-page h4 { color: #f4f4f4 !important; opacity: 1 !important; visibility: visible !important; } /* --------------------------------------------------------- HERO --------------------------------------------------------- */ .neox2-page .neox2-hero { background: radial-gradient( circle at 85% 35%, rgba(216,178,63,.12), transparent 32% ), linear-gradient( 135deg, #101010, #151515 ) !important; } .neox2-page .neox2-hero h1 { color: #f4f4f4 !important; } .neox2-page .neox2-hero-text { color: #bdbdbd !important; } /* --------------------------------------------------------- LABELS --------------------------------------------------------- */ .neox2-page .neox2-kicker, .neox2-page .neox2-label, .neox2-page .neox2-duration { color: #d8b23f !important; } /* --------------------------------------------------------- CHECKS --------------------------------------------------------- */ .neox2-page .neox2-checks div { color: #d3d3d3 !important; } /* --------------------------------------------------------- OFFRES --------------------------------------------------------- */ .neox2-page .neox2-offer { background: linear-gradient( 160deg, #171717, #111111 ) !important; color: #f4f4f4 !important; } .neox2-page .neox2-offer h3 { color: #f4f4f4 !important; } .neox2-page .neox2-offer li { color: #bdbdbd !important; } .neox2-page .neox2-price { color: #d8b23f !important; } .neox2-page .neox2-price small { color: #858585 !important; } /* --------------------------------------------------------- PRÉSENTATION --------------------------------------------------------- */ .neox2-page .neox2-presentation { background: #151515 !important; color: #bdbdbd !important; } .neox2-page .neox2-presentation h2 { color: #f4f4f4 !important; } .neox2-page .neox2-presentation p, .neox2-page .neox2-presentation .neox2-text { color: #bdbdbd !important; } .neox2-page .neox2-presentation strong { color: #e6c85a !important; } /* --------------------------------------------------------- INFORMATIONS --------------------------------------------------------- */ .neox2-page .neox2-info-grid > div { background: #101010 !important; color: #bdbdbd !important; } .neox2-page .neox2-info-grid strong { color: #d8b23f !important; } /* --------------------------------------------------------- ÉTAPES --------------------------------------------------------- */ .neox2-page .neox2-step { background: #151515 !important; color: #a7a7a7 !important; } .neox2-page .neox2-step h3 { color: #f4f4f4 !important; } .neox2-page .neox2-step p { color: #a7a7a7 !important; } /* --------------------------------------------------------- COMPATIBILITÉ --------------------------------------------------------- */ .neox2-page .neox2-dark-section { background: #111111 !important; color: #f4f4f4 !important; } .neox2-page .neox2-compat { background: #171717 !important; color: #a7a7a7 !important; } .neox2-page .neox2-compat strong { color: #d8b23f !important; } .neox2-page .neox2-note { color: #858585 !important; } /* --------------------------------------------------------- INSTALLATION --------------------------------------------------------- */ .neox2-page .neox2-install { color: #bdbdbd !important; } .neox2-page .neox2-install h2 { color: #f4f4f4 !important; } .neox2-page .neox2-install > div:first-child { color: #bdbdbd !important; } .neox2-page .neox2-install > div:first-child p { color: #bdbdbd !important; } .neox2-page .neox2-install-card { background: linear-gradient( 145deg, #191714, #121212 ) !important; color: #bdbdbd !important; } .neox2-page .neox2-install-card h3 { color: #f4f4f4 !important; } .neox2-page .neox2-install-card p { color: #bdbdbd !important; } /* --------------------------------------------------------- LIENS --------------------------------------------------------- */ .neox2-page .neox2-links-section h2 { color: #f4f4f4 !important; } .neox2-page .neox2-links a { background: #151515 !important; color: #bdbdbd !important; } .neox2-page .neox2-links a:hover { color: #f4f4f4 !important; } /* --------------------------------------------------------- CTA FINAL --------------------------------------------------------- */ .neox2-page .neox2-final-cta { background: radial-gradient( circle at center, rgba(216,178,63,.08), transparent 55% ), #111111 !important; color: #f4f4f4 !important; } .neox2-page .neox2-final-cta h2 { color: #f4f4f4 !important; } .neox2-page .neox2-final-cta p { color: #969696 !important; } /* --------------------------------------------------------- BOUTONS --------------------------------------------------------- */ .neox2-page .neox2-main-button, .neox2-page .neox2-offer-button { background: linear-gradient( 135deg, #e6c85a, #d8b23f ) !important; color: #111111 !important; } /* --------------------------------------------------------- MOBILE --------------------------------------------------------- */ @media (max-width: 700px) { .neox2-page p { color: #bdbdbd !important; } .neox2-page h1, .neox2-page h2, .neox2-page h3, .neox2-page h4 { color: #f4f4f4 !important; } .neox2-page .neox2-offer li { color: #bdbdbd !important; } } /* ========================================================= NEOX2 — HARMONISATION PREMIUM SURCOUCHE FINALE À COLLER TOUT EN BAS DU CSS ADDITIONNEL ========================================================= */ /* ========================================================= BASE ========================================================= */ .neox2-page { background: #0d0d0d !important; color: #f4f4f4 !important; } .neox2-page p { color: #bdbdbd !important; } .neox2-page h1, .neox2-page h2, .neox2-page h3, .neox2-page h4 { color: #f4f4f4 !important; } /* ========================================================= HERO ========================================================= */ .neox2-page .neox2-hero { background: radial-gradient( circle at 85% 30%, rgba(216,178,63,.14), transparent 35% ), linear-gradient( 135deg, #101010, #181818 ) !important; border-color: rgba(216,178,63,.25) !important; } .neox2-page .neox2-kicker, .neox2-page .neox2-label { color: #d8b23f !important; } .neox2-page .neox2-hero h1 { color: #ffffff !important; } .neox2-page .neox2-hero-text { color: #c4c4c4 !important; } /* ========================================================= CHECKS HERO ========================================================= */ .neox2-page .neox2-checks div { color: #dddddd !important; } .neox2-page .neox2-checks div::first-letter { color: #d8b23f !important; } /* ========================================================= BOUTONS ========================================================= */ .neox2-page .neox2-main-button, .neox2-page .neox2-offer-button { background: linear-gradient( 135deg, #e6c85a, #d8b23f ) !important; color: #111111 !important; border: none !important; } .neox2-page .neox2-main-button:hover, .neox2-page .neox2-offer-button:hover { background: linear-gradient( 135deg, #f0d36b, #e6c85a ) !important; color: #111111 !important; } /* ========================================================= TITRES DE SECTIONS ========================================================= */ .neox2-page .neox2-section-title { color: #999999 !important; } .neox2-page .neox2-section-title h2 { color: #ffffff !important; } .neox2-page .neox2-section-title h2::after { background: #d8b23f !important; } /* ========================================================= OFFRES ========================================================= */ .neox2-page .neox2-offers { align-items: stretch !important; } .neox2-page .neox2-offer { background: linear-gradient( 145deg, #191919, #111111 ) !important; border: 1px solid rgba(255,255,255,.07) !important; box-shadow: 0 18px 45px rgba(0,0,0,.30) !important; } .neox2-page .neox2-offer:hover { border-color: rgba(216,178,63,.45) !important; box-shadow: 0 25px 55px rgba(0,0,0,.40) !important; } .neox2-page .neox2-offer.neox2-featured { background: linear-gradient( 145deg, #211e16, #111111 ) !important; border: 1px solid rgba(216,178,63,.65) !important; transform: translateY(-8px); box-shadow: 0 25px 60px rgba(216,178,63,.10) !important; } .neox2-page .neox2-duration { color: #a8a8a8 !important; } .neox2-page .neox2-offer h3 { color: #ffffff !important; } .neox2-page .neox2-price { color: #d8b23f !important; } .neox2-page .neox2-price small { color: #888888 !important; } .neox2-page .neox2-offer li { color: #c1c1c1 !important; } .neox2-page .neox2-offer li::before { color: #d8b23f !important; } .neox2-page .neox2-badge { background: #d8b23f !important; color: #111111 !important; } /* ========================================================= PRÉSENTATION ========================================================= */ .neox2-page .neox2-presentation { background: linear-gradient( 145deg, #171717, #111111 ) !important; border: 1px solid rgba(255,255,255,.07) !important; box-shadow: 0 20px 55px rgba(0,0,0,.28) !important; } .neox2-page .neox2-presentation h2 { color: #ffffff !important; } .neox2-page .neox2-presentation .neox2-text, .neox2-page .neox2-presentation p { color: #bdbdbd !important; } .neox2-page .neox2-presentation strong { color: #e6c85a !important; } /* ========================================================= PETITS BLOCS 01 / 02 / 03 / 04 ========================================================= */ .neox2-page .neox2-info-grid > div { background: #101010 !important; border: 1px solid rgba(216,178,63,.12) !important; color: #bdbdbd !important; } .neox2-page .neox2-info-grid > div:hover { border-color: rgba(216,178,63,.35) !important; background: #151515 !important; } .neox2-page .neox2-info-grid strong { color: #d8b23f !important; } /* ========================================================= ACHAT ET ACTIVATION ========================================================= */ .neox2-page .neox2-steps { background: #111111 !important; border: 1px solid rgba(216,178,63,.16) !important; box-shadow: 0 20px 50px rgba(0,0,0,.28) !important; } .neox2-page .neox2-step { background: linear-gradient( 180deg, #181818, #141414 ) !important; color: #a7a7a7 !important; } .neox2-page .neox2-step:hover { background: linear-gradient( 180deg, #1d1d1d, #161616 ) !important; } .neox2-page .neox2-step h3 { color: #ffffff !important; } .neox2-page .neox2-step p { color: #a9a9a9 !important; } /* ========================================================= COMPATIBILITÉ ========================================================= */ .neox2-page .neox2-dark-section { background: linear-gradient( 145deg, #111111, #0d0d0d ) !important; border-top: 1px solid rgba(216,178,63,.20) !important; border-bottom: 1px solid rgba(216,178,63,.20) !important; } .neox2-page .neox2-compat { background: #171717 !important; border: 1px solid rgba(255,255,255,.07) !important; color: #a9a9a9 !important; transition: transform .2s ease, border-color .2s ease; } .neox2-page .neox2-compat:hover { transform: translateY(-4px); border-color: rgba(216,178,63,.35) !important; } .neox2-page .neox2-compat strong { color: #d8b23f !important; } .neox2-page .neox2-note { color: #777777 !important; } /* ========================================================= INSTALLATION ========================================================= */ .neox2-page .neox2-install { color: #bdbdbd !important; } .neox2-page .neox2-install h2 { color: #ffffff !important; } .neox2-page .neox2-install > div:first-child, .neox2-page .neox2-install > div:first-child p { color: #bdbdbd !important; } .neox2-page .neox2-install-card { background: linear-gradient( 145deg, #211e17, #121212 ) !important; border: 1px solid rgba(216,178,63,.35) !important; box-shadow: 0 20px 50px rgba(0,0,0,.30) !important; color: #bdbdbd !important; } .neox2-page .neox2-install-card h3 { color: #ffffff !important; } .neox2-page .neox2-install-card p { color: #bdbdbd !important; } /* ========================================================= LIENS UTILES ========================================================= */ .neox2-page .neox2-links-section h2 { color: #ffffff !important; } .neox2-page .neox2-links a { background: #151515 !important; border: 1px solid rgba(255,255,255,.07) !important; color: #bdbdbd !important; } .neox2-page .neox2-links a:hover { background: #1b1b1b !important; border-color: rgba(216,178,63,.35) !important; color: #ffffff !important; } /* ========================================================= CTA FINAL ========================================================= */ .neox2-page .neox2-final-cta { background: radial-gradient( circle at center, rgba(216,178,63,.12), transparent 60% ), #111111 !important; border: 1px solid rgba(216,178,63,.30) !important; box-shadow: 0 20px 60px rgba(0,0,0,.30) !important; } .neox2-page .neox2-final-cta h2 { color: #ffffff !important; } .neox2-page .neox2-final-cta p { color: #a7a7a7 !important; } /* ========================================================= ESPACEMENT DES SECTIONS ========================================================= */ .neox2-page .neox2-section { margin-bottom: 90px !important; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 700px) { .neox2-page { padding-left: 15px !important; padding-right: 15px !important; } .neox2-page .neox2-offer.neox2-featured { transform: none; } .neox2-page .neox2-presentation, .neox2-page .neox2-install { color: #bdbdbd !important; } .neox2-page .neox2-step { border-right: 0 !important; } .neox2-page .neox2-compatibility { gap: 12px !important; } } /* ========================================================= PETIT MOBILE ========================================================= */ @media (max-width: 430px) { .neox2-page { padding-left: 10px !important; padding-right: 10px !important; } .neox2-page .neox2-offer { padding-left: 22px !important; padding-right: 22px !important; } .neox2-page .neox2-final-cta { padding-left: 20px !important; padding-right: 20px !important; } } /* ========================================================= NEOX2 — DESIGN PREMIUM / DARK GOLD Page : /neox2-abonnement-iptv/ ========================================================= */ /* ---------- VARIABLES ---------- */ :root { --neo-bg: #08090b; --neo-bg-soft: #0d0f12; --neo-card: #111318; --neo-card-hover: #15181d; --neo-white: #f5f3ee; --neo-text: #e9e7e1; --neo-muted: #a5a5a2; --neo-muted-2: #7f817f; --neo-gold: #e9b44c; --neo-gold-light: #f4ca72; --neo-gold-dark: #b98527; --neo-border: rgba(255,255,255,.09); --neo-border-gold: rgba(233,180,76,.28); --neo-radius: 18px; } /* ========================================================= 1. BASE ========================================================= */ body { background: radial-gradient( circle at 50% -10%, rgba(233,180,76,.055), transparent 42% ), var(--neo-bg) !important; color: var(--neo-text); } /* ========================================================= 2. CONTENEUR PRINCIPAL ========================================================= */ .entry-content, .wp-site-blocks, .site-main, main { color: var(--neo-text); } .entry-content { max-width: 1180px; margin-left: auto; margin-right: auto; } /* ========================================================= 3. TOUS LES TEXTES — CORRECTION DES BLOCS INVISIBLES ========================================================= */ /* Paragraphes */ .entry-content p, .entry-content .wp-block-paragraph, .entry-content li { color: var(--neo-text) !important; } /* Texte secondaire */ .entry-content .lead, .entry-content .subtitle, .entry-content .description, .entry-content .text-muted { color: var(--neo-muted) !important; } /* Titres */ .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 { color: var(--neo-white) !important; } /* Texte dans les sections/cartes */ .entry-content section p, .entry-content article p, .entry-content div p, .entry-content span { color: inherit; } /* ========================================================= 4. LIENS ========================================================= */ .entry-content a { color: var(--neo-text); text-decoration: none; } .entry-content a:hover { color: var(--neo-gold-light); } /* ========================================================= 5. TITRE PRINCIPAL ========================================================= */ .entry-content h1 { color: var(--neo-white) !important; font-size: clamp(38px, 5vw, 68px); line-height: 1.05; letter-spacing: -1.8px; font-weight: 700; margin-bottom: 24px; } /* ========================================================= 6. TITRES DE SECTIONS ========================================================= */ .entry-content h2 { color: var(--neo-white) !important; font-size: clamp(28px, 3.5vw, 46px); line-height: 1.12; letter-spacing: -1px; font-weight: 650; margin-top: 0; margin-bottom: 18px; } .entry-content h3 { color: var(--neo-white) !important; font-size: 21px; line-height: 1.25; font-weight: 650; } /* ========================================================= 7. PETITS LABELS ========================================================= */ .entry-content h4, .entry-content .eyebrow, .entry-content .label, .entry-content .small-title { color: var(--neo-gold) !important; text-transform: uppercase; letter-spacing: 2px; font-size: 12px; font-weight: 700; } /* ========================================================= 8. TEXTE INTRODUCTIF ========================================================= */ .entry-content > p:first-of-type, .entry-content .lead { color: var(--neo-muted) !important; font-size: 18px; line-height: 1.75; } /* ========================================================= 9. SECTIONS ========================================================= */ .entry-content section { position: relative; padding-top: 80px; padding-bottom: 80px; } /* ligne discrète entre sections */ .entry-content section + section { border-top: 1px solid rgba(255,255,255,.055); } /* ========================================================= 10. CARTES ========================================================= */ .entry-content article, .entry-content .card, .entry-content .box, .entry-content .feature-card, .entry-content .pricing-card, .entry-content .info-card { background: linear-gradient( 145deg, rgba(255,255,255,.035), rgba(255,255,255,.012) ) !important; border: 1px solid var(--neo-border) !important; border-radius: var(--neo-radius); box-shadow: 0 20px 60px rgba(0,0,0,.24); color: var(--neo-text) !important; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease; } .entry-content article:hover, .entry-content .card:hover, .entry-content .box:hover, .entry-content .feature-card:hover, .entry-content .pricing-card:hover, .entry-content .info-card:hover { transform: translateY(-4px); border-color: var(--neo-border-gold) !important; box-shadow: 0 24px 70px rgba(0,0,0,.32), 0 0 35px rgba(233,180,76,.055); } /* ========================================================= 11. BLOC INSTALLATION ========================================================= */ .entry-content h2 + p, .entry-content h3 + p { max-width: 780px; } .entry-content strong { color: var(--neo-white); font-weight: 650; } /* ========================================================= 12. CHECK / VALIDATION ========================================================= */ .entry-content li::marker { color: var(--neo-gold); } .entry-content li strong { color: var(--neo-white); } /* ========================================================= 13. BOUTONS ========================================================= */ .entry-content .wp-block-button__link, .entry-content .button, .entry-content button, .entry-content a.button { background: linear-gradient( 135deg, var(--neo-gold-light), var(--neo-gold) ) !important; color: #111 !important; border: 1px solid rgba(255,255,255,.15) !important; border-radius: 999px !important; padding: 13px 25px !important; font-weight: 700; letter-spacing: .1px; box-shadow: 0 8px 30px rgba(233,180,76,.16); transition: transform .25s ease, box-shadow .25s ease, filter .25s ease; } .entry-content .wp-block-button__link:hover, .entry-content .button:hover, .entry-content button:hover, .entry-content a.button:hover { color: #111 !important; transform: translateY(-2px); box-shadow: 0 12px 35px rgba(233,180,76,.25); filter: brightness(1.06); } /* ========================================================= 14. LIENS SECONDAIRES ========================================================= */ .entry-content a:not(.wp-block-button__link):not(.button) { transition: color .2s ease; } .entry-content a:not(.wp-block-button__link):not(.button):hover { color: var(--neo-gold-light); } /* ========================================================= 15. BLOCS "INSTALLATION" ========================================================= */ .entry-content .installation, .entry-content .installation-box, .entry-content .install-box { position: relative; background: linear-gradient( 145deg, rgba(233,180,76,.065), rgba(255,255,255,.018) ) !important; border: 1px solid rgba(233,180,76,.20) !important; border-radius: 20px; padding: clamp(25px, 4vw, 45px); overflow: hidden; } /* petite lumière élégante */ .entry-content .installation::before, .entry-content .installation-box::before, .entry-content .install-box::before { content: ""; position: absolute; width: 240px; height: 240px; top: -150px; right: -100px; background: radial-gradient( circle, rgba(233,180,76,.10), transparent 70% ); pointer-events: none; } /* ========================================================= 16. SUPPRESSION DES GROSSES AMPOULES / DÉCORATIONS ========================================================= */ /* Si ton constructeur utilise une ampoule dans un bloc */ .entry-content .bulb, .entry-content .lightbulb, .entry-content .ampoule, .entry-content .idea-icon, .entry-content .icon-bulb { display: none !important; } /* Icônes décoratives très grosses */ .entry-content svg[width="80"], .entry-content svg[width="90"], .entry-content svg[width="100"], .entry-content svg[width="120"] { max-width: 42px; max-height: 42px; } /* ========================================================= 17. ICÔNES ========================================================= */ .entry-content svg { color: var(--neo-gold); } .entry-content .icon, .entry-content .icon-pill { color: var(--neo-gold); background: rgba(233,180,76,.08); border: 1px solid rgba(233,180,76,.16); border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; } /* ========================================================= 18. TABLEAUX ========================================================= */ .entry-content table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--neo-card); border: 1px solid var(--neo-border); border-radius: 16px; overflow: hidden; color: var(--neo-text) !important; } .entry-content th { background: rgba(233,180,76,.08); color: var(--neo-gold-light) !important; font-weight: 700; } .entry-content td, .entry-content th { padding: 16px; border-bottom: 1px solid var(--neo-border); } .entry-content td { color: var(--neo-text) !important; } /* ========================================================= 19. LISTES ========================================================= */ .entry-content ul, .entry-content ol { color: var(--neo-text) !important; } .entry-content ul li, .entry-content ol li { margin-bottom: 10px; line-height: 1.65; } /* ========================================================= 20. BLOCS DE CODE / INFORMATIONS ========================================================= */ .entry-content code { background: rgba(255,255,255,.07); color: var(--neo-gold-light); border: 1px solid rgba(255,255,255,.08); padding: 3px 7px; border-radius: 6px; } .entry-content pre { background: #050607 !important; border: 1px solid var(--neo-border); border-radius: 16px; color: var(--neo-text); } /* ========================================================= 21. SEPARATEURS ========================================================= */ .entry-content hr { border: 0; height: 1px; background: linear-gradient( 90deg, transparent, rgba(233,180,76,.28), transparent ); margin: 55px 0; } /* ========================================================= 22. IMAGES ========================================================= */ .entry-content img { border-radius: 16px; } .entry-content figure { margin: 0; } /* ========================================================= 23. MOBILE ========================================================= */ @media (max-width: 768px) { .entry-content { padding-left: 18px; padding-right: 18px; } .entry-content section { padding-top: 55px; padding-bottom: 55px; } .entry-content h1 { font-size: 38px; letter-spacing: -1px; } .entry-content h2 { font-size: 30px; letter-spacing: -.6px; } .entry-content h3 { font-size: 19px; } .entry-content > p:first-of-type, .entry-content .lead { font-size: 16px; line-height: 1.7; } .entry-content article, .entry-content .card, .entry-content .box, .entry-content .feature-card, .entry-content .pricing-card, .entry-content .info-card { padding: 24px !important; } .entry-content .wp-block-button__link, .entry-content .button { width: 100%; text-align: center; } } /* ========================================================= 24. CORRECTION CRITIQUE : TEXTE INVISIBLE ========================================================= */ /* Certains thèmes / constructeurs mettent parfois opacity:0, visibility:hidden ou une couleur blanche sur fond clair. On rétablit uniquement le contenu de cette page. */ .entry-content p, .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6, .entry-content li, .entry-content span { opacity: 1; visibility: visible; } /* ========================================================= 25. EMPÊCHE LES ANIMATIONS DU THÈME DE CACHER LE TEXTE ========================================================= */ .entry-content [style*="opacity: 0"], .entry-content [style*="visibility: hidden"] { opacity: 1 !important; visibility: visible !important; } /* ========================================================= 26. FINITION PREMIUM ========================================================= */ .entry-content strong { color: var(--neo-gold-light); } .entry-content h2 strong, .entry-content h3 strong { color: var(--neo-white); } .entry-content blockquote { margin: 30px 0; padding: 22px 26px; background: rgba(233,180,76,.045); border-left: 2px solid var(--neo-gold); border-radius: 0 14px 14px 0; color: var(--neo-muted) !important; } /* ========================================================= 27. ACCESSIBILITÉ / CONTRASTE ========================================================= */ .entry-content p, .entry-content li { text-shadow: none !important; } /* ========================================================= 28. SCROLLBAR — PETITE TOUCHE PREMIUM ========================================================= */ ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background: #070809; } ::-webkit-scrollbar-thumb { background: #292a2c; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: var(--neo-gold-dark); } /* ========================================================= NEOX2 V2 — NOUVEAU DESIGN PREMIUM ========================================================= */ /* ========================================================= NEOX2 V2 — DESIGN PREMIUM DARK GOLD ========================================================= */ /* ---------- VARIABLES ---------- */ :root { --neo2-bg: #070809; --neo2-bg-2: #0b0d10; --neo2-card: #101318; --neo2-card-2: #14171c; --neo2-white: #f7f5ef; --neo2-text: #deddd7; --neo2-muted: #999b98; --neo2-gold: #e7b34b; --neo2-gold-light: #f5cd79; --neo2-gold-dark: #9f7021; --neo2-line: rgba(255,255,255,.08); --neo2-gold-line: rgba(231,179,75,.28); --neo2-radius: 20px; } /* ========================================================= 1 — FOND GLOBAL ========================================================= */ body { background: radial-gradient( circle at 50% 0%, rgba(231,179,75,.08), transparent 35% ), linear-gradient( 180deg, #070809 0%, #090b0e 45%, #070809 100% ) !important; color: var(--neo2-text) !important; } /* ========================================================= 2 — CONTENU PRINCIPAL ========================================================= */ .entry-content { max-width: 1200px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 25px; padding-right: 25px; } /* ========================================================= 3 — TEXTES ========================================================= */ .entry-content p, .entry-content li { color: var(--neo2-text); } .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 { color: var(--neo2-white) !important; } .entry-content a { color: var(--neo2-text); } .entry-content a:hover { color: var(--neo2-gold-light); } /* ========================================================= 4 — HERO ========================================================= */ .entry-content h1 { font-size: clamp(42px, 6vw, 76px) !important; line-height: 1.02 !important; letter-spacing: -2.8px !important; font-weight: 800 !important; max-width: 900px; margin-top: 20px !important; margin-bottom: 24px !important; } .entry-content h1 + p { max-width: 720px; font-size: 19px; line-height: 1.75; color: var(--neo2-muted) !important; } /* petit label NEOX2 */ .entry-content h1::before { content: "NEOX2"; display: block; color: var(--neo2-gold); font-size: 12px; line-height: 1; letter-spacing: 4px; font-weight: 800; margin-bottom: 20px; } /* ========================================================= 5 — BOUTONS ========================================================= */ .entry-content a.wp-block-button__link, .entry-content .wp-element-button, .entry-content a.button, .entry-content button { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 14px 28px !important; border-radius: 999px !important; background: linear-gradient( 135deg, var(--neo2-gold-light), var(--neo2-gold) ) !important; color: #101010 !important; border: 1px solid rgba(255,255,255,.16) !important; font-weight: 800 !important; letter-spacing: .2px; box-shadow: 0 10px 35px rgba(231,179,75,.15); transition: transform .25s ease, box-shadow .25s ease, filter .25s ease; } .entry-content a.wp-block-button__link:hover, .entry-content .wp-element-button:hover, .entry-content a.button:hover, .entry-content button:hover { transform: translateY(-3px); filter: brightness(1.07); box-shadow: 0 16px 45px rgba(231,179,75,.25); } /* ========================================================= 6 — TITRES DE SECTIONS ========================================================= */ .entry-content h2 { font-size: clamp(30px, 4vw, 48px) !important; line-height: 1.08 !important; letter-spacing: -1.4px !important; font-weight: 750 !important; margin-bottom: 20px !important; } .entry-content h3 { font-size: 22px !important; line-height: 1.2 !important; font-weight: 750 !important; } /* ========================================================= 7 — LABELS ========================================================= */ .entry-content h2::before { content: ""; display: block; width: 38px; height: 3px; margin-bottom: 18px; border-radius: 10px; background: linear-gradient( 90deg, var(--neo2-gold), transparent ); } /* ========================================================= 8 — SECTIONS ========================================================= */ .entry-content section { padding-top: 95px !important; padding-bottom: 95px !important; } .entry-content section + section { border-top: 1px solid var(--neo2-line); } /* ========================================================= 9 — CARTES ========================================================= */ .entry-content article, .entry-content .card, .entry-content .box, .entry-content .feature-card, .entry-content .pricing-card, .entry-content .info-card { position: relative; background: linear-gradient( 145deg, rgba(255,255,255,.045), rgba(255,255,255,.012) ) !important; border: 1px solid var(--neo2-line) !important; border-radius: var(--neo2-radius) !important; box-shadow: 0 20px 60px rgba(0,0,0,.28); overflow: hidden; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; } .entry-content article:hover, .entry-content .card:hover, .entry-content .box:hover, .entry-content .feature-card:hover, .entry-content .pricing-card:hover, .entry-content .info-card:hover { transform: translateY(-6px); border-color: var(--neo2-gold-line) !important; box-shadow: 0 28px 80px rgba(0,0,0,.4), 0 0 40px rgba(231,179,75,.06); } /* ========================================================= 10 — OFFRES / PRIX ========================================================= */ /* prix */ .entry-content article h3, .entry-content .pricing-card h3 { color: var(--neo2-white) !important; } .entry-content article strong, .entry-content .pricing-card strong { color: var(--neo2-gold-light); } /* ========================================================= 11 — METTRE L'OFFRE 12 MOIS EN AVANT ========================================================= */ .entry-content article:nth-child(3), .entry-content .pricing-card:nth-child(3) { border-color: var(--neo2-gold-line) !important; background: linear-gradient( 145deg, rgba(231,179,75,.10), rgba(255,255,255,.018) ) !important; box-shadow: 0 25px 75px rgba(0,0,0,.35), 0 0 45px rgba(231,179,75,.07); } /* ========================================================= 12 — LISTES DES OFFRES ========================================================= */ .entry-content article li::marker, .entry-content .pricing-card li::marker { color: var(--neo2-gold); } .entry-content article li, .entry-content .pricing-card li { line-height: 1.65; } /* ========================================================= 13 — BLOCS D'INFORMATIONS ========================================================= */ .entry-content article::before, .entry-content .card::before, .entry-content .feature-card::before, .entry-content .info-card::before { content: ""; position: absolute; top: 0; left: 0; width: 70px; height: 1px; background: linear-gradient( 90deg, var(--neo2-gold), transparent ); opacity: .8; } /* ========================================================= 14 — CHIFFRES 01 / 02 / 03 / 04 ========================================================= */ .entry-content h2 + p { color: var(--neo2-muted) !important; max-width: 760px; line-height: 1.75; } /* ========================================================= 15 — INSTALLATION ========================================================= */ .entry-content blockquote { background: linear-gradient( 145deg, rgba(231,179,75,.07), rgba(255,255,255,.015) ) !important; border-left: 3px solid var(--neo2-gold) !important; border-radius: 0 18px 18px 0; padding: 28px !important; color: var(--neo2-muted) !important; } /* ========================================================= 16 — TABLEAUX ========================================================= */ .entry-content table { background: var(--neo2-card) !important; border: 1px solid var(--neo2-line) !important; border-radius: 18px; overflow: hidden; } .entry-content th { background: rgba(231,179,75,.09) !important; color: var(--neo2-gold-light) !important; } .entry-content td { color: var(--neo2-text) !important; border-color: var(--neo2-line) !important; } /* ========================================================= 17 — IMAGES ========================================================= */ .entry-content img { border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.3); } /* ========================================================= 18 — LIENS UTILES ========================================================= */ .entry-content a:not(.wp-block-button__link):not(.button) { transition: color .2s ease, opacity .2s ease; } .entry-content a:not(.wp-block-button__link):not(.button):hover { color: var(--neo2-gold-light) !important; } /* ========================================================= 19 — FOOTER / CTA FINAL ========================================================= */ .entry-content h2:last-of-type { margin-top: 0; } /* ========================================================= 20 — CORRECTION VISIBILITÉ ========================================================= */ .entry-content p, .entry-content li, .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 { opacity: 1 !important; visibility: visible !important; } /* ========================================================= 21 — MOBILE ========================================================= */ @media (max-width: 768px) { .entry-content { padding-left: 18px !important; padding-right: 18px !important; } .entry-content section { padding-top: 60px !important; padding-bottom: 60px !important; } .entry-content h1 { font-size: 40px !important; letter-spacing: -1.5px !important; } .entry-content h2 { font-size: 31px !important; letter-spacing: -.8px !important; } .entry-content h3 { font-size: 20px !important; } .entry-content h1 + p { font-size: 16px; line-height: 1.7; } .entry-content a.wp-block-button__link, .entry-content .wp-element-button, .entry-content a.button { width: 100%; text-align: center; } .entry-content article, .entry-content .card, .entry-content .box, .entry-content .feature-card, .entry-content .pricing-card, .entry-content .info-card { border-radius: 17px !important; } } /* ========================================================= 22 — PETITE FINITION ========================================================= */ ::selection { background: var(--neo2-gold); color: #111; } /* ========================================================= NEOX2 — STYLE PREMIUM DARK / GOLD ========================================================= */ :root { --neo-bg: #08090b; --neo-card: #111318; --neo-card-2: #15171c; --neo-white: #f7f5ef; --neo-text: #deddd8; --neo-muted: #999994; --neo-gold: #e9b44c; --neo-gold-light: #f5ce79; --neo-border: rgba(255,255,255,.09); } /* PAGE */ body { background: var(--neo-bg) !important; color: var(--neo-text) !important; } .entry-content { max-width: 1180px; margin: auto; color: var(--neo-text) !important; } /* TEXTES */ .entry-content p, .entry-content li { color: var(--neo-text) !important; line-height: 1.7; } .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4 { color: var(--neo-white) !important; } .entry-content h1 { font-size: clamp(40px, 6vw, 68px); line-height: 1.05; font-weight: 700; letter-spacing: -2px; } .entry-content h2 { font-size: clamp(30px, 4vw, 46px); line-height: 1.1; margin-bottom: 20px; } .entry-content h3 { font-size: 22px; } /* TEXTE SECONDAIRE */ .entry-content > p:first-of-type { color: var(--neo-muted) !important; font-size: 18px; } /* SECTIONS */ .entry-content section { padding-top: 70px; padding-bottom: 70px; } /* CARTES */ .entry-content article, .entry-content .card, .entry-content .pricing-card, .entry-content .feature-card, .entry-content .info-card { background: linear-gradient( 145deg, rgba(255,255,255,.045), rgba(255,255,255,.015) ) !important; border: 1px solid var(--neo-border) !important; border-radius: 18px; box-shadow: 0 18px 50px rgba(0,0,0,.28); transition: .25s ease; } .entry-content article:hover, .entry-content .card:hover, .entry-content .pricing-card:hover, .entry-content .feature-card:hover, .entry-content .info-card:hover { transform: translateY(-4px); border-color: rgba(233,180,76,.35) !important; box-shadow: 0 25px 65px rgba(0,0,0,.38); } /* PRIX / GOLD */ .entry-content strong { color: var(--neo-gold-light); } /* LISTES */ .entry-content li::marker { color: var(--neo-gold); } /* BOUTONS */ .entry-content a.button, .entry-content .wp-block-button__link, .entry-content button { background: linear-gradient( 135deg, var(--neo-gold-light), var(--neo-gold) ) !important; color: #111 !important; border: 0 !important; border-radius: 999px !important; padding: 14px 28px !important; font-weight: 700; box-shadow: 0 8px 28px rgba(233,180,76,.18); transition: .25s ease; } .entry-content a.button:hover, .entry-content .wp-block-button__link:hover, .entry-content button:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 12px 35px rgba(233,180,76,.28); } /* LIENS */ .entry-content a { color: var(--neo-text); } .entry-content a:hover { color: var(--neo-gold-light); } /* TABLEAUX */ .entry-content table { background: var(--neo-card) !important; color: var(--neo-text) !important; border: 1px solid var(--neo-border); } .entry-content th { background: rgba(233,180,76,.08); color: var(--neo-gold-light) !important; } .entry-content td { color: var(--neo-text) !important; } /* IMAGES */ .entry-content img { border-radius: 16px; } /* SEPARATEURS */ .entry-content hr { border: 0; height: 1px; background: linear-gradient( 90deg, transparent, rgba(233,180,76,.3), transparent ); margin: 50px 0; } /* MOBILE */ @media (max-width: 768px) { .entry-content { padding-left: 18px; padding-right: 18px; } .entry-content section { padding-top: 50px; padding-bottom: 50px; } .entry-content h1 { font-size: 40px; letter-spacing: -1px; } .entry-content h2 { font-size: 30px; } .entry-content > p:first-of-type { font-size: 16px; } .entry-content a.button, .entry-content .wp-block-button__link { width: 100%; text-align: center; } } /* ===== NEOX2 - Design système complet v2 ===== */ :root { --gold: #d8b23f; --gold-light: #e6c85a; --bg: #0d0d0d; --card: #151515; --surface: #1b1b1b; --text: #f4f4f4; --text-2: #a7a7a7; --border: rgba(216,178,63,.22); } body, .entry-content, article { background-color: var(--bg) !important; color: var(--text-2); } .entry-content, article { max-width: 1100px !important; margin: 0 auto; padding: 0 24px; } .entry-content h1, .entry-title { background: linear-gradient(90deg, var(--gold), var(--gold-light)); -webkit-background-clip: text; background-clip: text; color: transparent !important; } .entry-content h3, article h3 { color: var(--gold-light) !important; font-size: 1.3em; margin: 56px 0 18px !important; padding-left: 16px; position: relative; border: none !important; } .entry-content h3::before, article h3::before { content: ""; position: absolute; left: 0; top: 6px; width: 4px; height: 20px; background: var(--gold); border-radius: 2px; } .entry-content p, article p { line-height: 1.8; color: var(--text-2); } .entry-content strong, article strong { color: var(--gold-light); } .entry-content a, article a { color: var(--gold); border-bottom: 1px solid rgba(216,178,63,.4); text-decoration: none; } .entry-content a:hover { color: var(--gold-light); } /* Grille de cartes (fonctionnalités, conseils, alternatives) */ .neox-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 24px 0; } .neox-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 20px; box-shadow: 0 4px 14px rgba(0,0,0,.35); transition: transform .15s ease, border-color .15s ease; } .neox-card:hover { transform: translateY(-3px); border-color: rgba(216,178,63,.5); } .neox-card .icon { font-size: 1.6em; margin-bottom: 8px; display: block; } .neox-card h4 { color: var(--gold-light); margin: 0 0 6px; font-size: 1em; } .neox-card p { margin: 0; font-size: .92em; } /* Badges type hero (⚡ 📺 ⭐) */ .neox-badges { display: flex; flex-wrap: wrap; gap: 14px; margin: 24px 0; justify-content: center; } .neox-badge { background: var(--surface); border: 1px solid var(--border); border-radius: 30px; padding: 10px 20px; font-size: .9em; color: var(--gold-light); font-weight: 600; } /* Étapes numérotées (tutoriel) */ .neox-steps { counter-reset: step; margin: 24px 0; } .neox-step { display: flex; gap: 16px; align-items: flex-start; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 16px 20px; margin-bottom: 12px; } .neox-step::before { counter-increment: step; content: counter(step); background: linear-gradient(135deg, var(--gold), var(--gold-light)); color: #0d0d0d; font-weight: 800; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .neox-step p { margin: 0; color: var(--text); } /* Tableau */ .entry-content table, article table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--border); margin: 24px 0; border-radius: 8px; overflow: hidden; } .entry-content th, article th { background: var(--surface); color: var(--gold-light); text-transform: uppercase; font-size: .8em; letter-spacing: .05em; padding: 14px 16px; border: 1px solid var(--border); } .entry-content td, article td { padding: 14px 16px; border: 1px solid var(--border); color: var(--text); } /* FAQ en cartes */ .neox-faq { display: flex; flex-direction: column; gap: 12px; margin: 24px 0; } .neox-faq-item { background: var(--card); border-left: 3px solid var(--gold); border-radius: 8px; padding: 18px 22px; box-shadow: 0 4px 14px rgba(0,0,0,.3); } .neox-faq-item .q { color: var(--gold-light); font-weight: 700; margin-bottom: 8px; display: block; } .neox-faq-item .r { color: var(--text-2); margin: 0; } /* Bannière CTA finale */ .neox-cta { background: linear-gradient(135deg, rgba(216,178,63,.15), rgba(21,21,21,.9)); border: 1px solid var(--border); border-radius: 14px; padding: 40px 30px; text-align: center; margin: 50px 0; } .neox-cta h3 { margin: 0 0 12px !important; padding-left: 0 !important; } .neox-cta h3::before { display: none; } .neox-cta a.neox-btn { display: inline-block; margin-top: 14px; background: linear-gradient(135deg, var(--gold), var(--gold-light)); color: #0d0d0d !important; font-weight: 800; padding: 14px 36px; border-radius: 30px; border-bottom: none; box-shadow: 0 6px 20px rgba(216,178,63,.35); transition: transform .15s ease; } .neox-cta a.neox-btn:hover { transform: translateY(-3px); } @media (max-width: 640px) { .entry-content h3, article h3 { font-size: 1.1em; } .neox-cta { padding: 28px 18px; } } /* ===== NEOX2 - Durcissement anti-conflit thème ===== */ .entry-content .neox-card, article .neox-card, .entry-content .neox-faq-item, article .neox-faq-item, .entry-content .neox-step, article .neox-step, .entry-content .neox-cta, article .neox-cta { background-color: var(--card) !important; color: var(--text-2) !important; } .entry-content .neox-card *, article .neox-card *, .entry-content .neox-faq-item *, article .neox-faq-item *, .entry-content .neox-step *, article .neox-step * { color: inherit !important; } .entry-content .neox-card h4, article .neox-card h4, .entry-content .neox-faq-item .q, article .neox-faq-item .q { color: var(--gold-light) !important; } .entry-content .neox-badge, article .neox-badge { background-color: var(--surface) !important; color: var(--gold-light) !important; } .entry-content .neox-cta, article .neox-cta { background: linear-gradient(135deg, rgba(216,178,63,.15), rgba(21,21,21,.9)) !important; } .entry-content .neox-cta h3, article .neox-cta h3 { color: var(--gold-light) !important; } .entry-content .neox-cta p, article .neox-cta p { color: var(--text-2) !important; } /* Filet de sécurité : tout div/section générique dans le contenu reste transparent, pas blanc */ .entry-content div, article div { background-color: transparent; } /* ===== Images "Acheter Maintenant" côte à côte, réduites ===== */ .neox-cta-images { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin: 24px 0; } .neox-cta-images img { max-width: 44%; height: auto; border-radius: 10px; box-shadow: 0 4px 14px rgba(0,0,0,.35); } @media (max-width: 480px) { .neox-cta-images img { max-width: 47%; } } /* ===== NEOX2 - Finitions : bouton lien sécurisé + réseaux sociaux ===== */ /* Réduire et recolorer le bouton "lien de téléchargement sécurisé" (ciblé par son URL, pas de modif HTML nécessaire) */ a[href*="installer-neox2-et-golden-smart"] { display: inline-block !important; width: auto !important; background: linear-gradient(135deg, #d8b23f, #e6c85a) !important; color: #0d0d0d !important; font-weight: 700 !important; padding: 8px 20px !important; border-radius: 20px !important; border-bottom: none !important; font-size: .9em !important; box-shadow: 0 3px 10px rgba(216,178,63,.3) !important; } a[href*="installer-neox2-et-golden-smart"]:hover { background: linear-gradient(135deg, #e6c85a, #d8b23f) !important; } /* Supprimer les barres/séparateurs inutiles autour du bloc de partage */ .sharedaddy hr, .sd-title hr, .entry-content hr, article hr, .post hr, hr.wp-block-separator { display: none !important; } /* Recolorer les boutons de réseaux sociaux (Jetpack Sharing) dans la palette NEOX2 */ .sd-content ul li a, .sharedaddy .sd-content a, .share-facebook a, .share-twitter a, .share-x a, .share-whatsapp a, .share-pinterest a, .share-linkedin a, .share-telegram a, .share-reddit a, .share-tumblr a { background-color: #151515 !important; border: 1px solid rgba(216,178,63,.3) !important; color: #d8b23f !important; } .sd-content ul li a:hover { background-color: #d8b23f !important; color: #0d0d0d !important; border-color: #d8b23f !important; } .sd-title { color: #e6c85a !important; } /* ========================================================= PAGE PAIEMENT — HARMONISATION COMPLÈTE ========================================================= */ /* ========================================================= 1. LARGEUR GÉNÉRALE ========================================================= */ .page .entry-content { width: 760px; max-width: calc(100% - 30px); margin: 0 auto; padding: 20px 0 50px; box-sizing: border-box; } /* Suppression du titre WordPress "paiement" */ .page .entry-content > h1:first-child, .page .entry-title { display: none !important; } /* ========================================================= 2. SUPPRESSION DES GRANDES ILLUSTRATIONS ========================================================= */ .page .entry-content img { display: none !important; } /* ========================================================= 3. TITRE "CHOISISSEZ VOTRE ABONNEMENT" ========================================================= */ .page .entry-content h2 { width: 100%; box-sizing: border-box; margin: 0 0 28px; padding: 20px 25px; text-align: center; font-size: 28px; line-height: 1.2; font-weight: 800; border-radius: 10px; } /* ========================================================= 4. TEXTE D'AVERTISSEMENT ========================================================= */ .page .entry-content h2 + p { margin-top: 0; } /* ========================================================= 5. BLOC "DANS LE FORMULAIRE..." ========================================================= */ .page .entry-content h3 { width: 100%; box-sizing: border-box; margin: 28px 0 18px; padding: 16px 20px; text-align: center; font-size: 16px; line-height: 1.45; font-weight: 700; border-radius: 10px; } /* ========================================================= 6. TEXTES DE DESCRIPTION ========================================================= */ .page .entry-content p { line-height: 1.5; } /* ========================================================= 7. OFFRES NEOX2 / MAGNUM ========================================================= */ /* Les deux offres */ .page .entry-content p:has(strong) { box-sizing: border-box; } /* Prix */ .page .entry-content strong { font-weight: 800; } /* ========================================================= 8. BLOC INFORMATIONS APRÈS LES OFFRES ========================================================= */ .page .entry-content h3 + p { line-height: 1.5; } /* ========================================================= 9. BOUTON FORMULAIRE ========================================================= */ .page .entry-content a { transition: all .2s ease; } /* Lien "formulaire" */ .page .entry-content a[href*="formulaire"] { display: block; width: 130px; height: 50px; margin: 40px auto 28px; line-height: 50px; text-align: center; border-radius: 30px; font-size: 15px; font-weight: 800; text-decoration: none; box-sizing: border-box; } /* ========================================================= 10. LIGNE AVANT LE FORMULAIRE ========================================================= */ .page .entry-content a[href*="formulaire"]::after { content: ""; display: block; width: 480px; max-width: 100%; height: 1px; margin: 25px auto 0; } /* ========================================================= 11. FORMULAIRE ========================================================= */ .page .entry-content form { width: 100%; max-width: 760px; margin: 30px auto 0; padding: 25px; box-sizing: border-box; border-radius: 12px; } /* ========================================================= 12. LABELS ========================================================= */ .page .entry-content form label { display: block; margin: 0 0 7px; font-size: 14px; font-weight: 700; } /* ========================================================= 13. CHAMPS ========================================================= */ .page .entry-content form input[type="text"], .page .entry-content form input[type="email"], .page .entry-content form input[type="url"], .page .entry-content form input[type="tel"], .page .entry-content form textarea { display: block; width: 100%; box-sizing: border-box; min-height: 45px; padding: 10px 13px; margin: 0 0 12px; border-radius: 7px; } /* ========================================================= 14. COMMENTAIRE ========================================================= */ .page .entry-content form textarea { height: 145px; min-height: 145px; resize: vertical; } /* ========================================================= 15. BOUTON ENVOYER ========================================================= */ .page .entry-content form input[type="submit"], .page .entry-content form button[type="submit"] { display: block; width: 100%; height: 50px; margin-top: 8px; border: 0; border-radius: 28px; font-size: 16px; font-weight: 800; cursor: pointer; } /* ========================================================= 16. ESPACEMENTS GÉNÉRAUX ========================================================= */ .page .entry-content > p { margin-top: 10px; margin-bottom: 10px; } /* ========================================================= 17. MOBILE ========================================================= */ @media (max-width: 767px) { .page .entry-content { width: 100%; max-width: calc(100% - 20px); padding: 15px 0 35px; } .page .entry-content h2 { font-size: 23px; padding: 17px 15px; } .page .entry-content h3 { font-size: 14px; padding: 14px 12px; } .page .entry-content form { padding: 18px 15px; } .page .entry-content a[href*="formulaire"] { width: 125px; height: 46px; line-height: 46px; } } /* ========================================================= 18. PETITS TÉLÉPHONES ========================================================= */ @media (max-width: 480px) { .page .entry-content { max-width: calc(100% - 14px); } .page .entry-content h2 { font-size: 21px; } .page .entry-content form { padding: 15px 12px; } } ```css /* ========================================= NEOX2 — PAGE PAIEMENT ========================================= */ .paiement-page { width: 100%; max-width: 820px; margin: 30px auto; padding: 0; font-family: 'Montserrat', Arial, sans-serif; color: #f4f4f4; box-sizing: border-box; } .paiement-page *, .paiement-page *::before, .paiement-page *::after { box-sizing: border-box; } /* ========================================= BLOCS PRINCIPAUX ========================================= */ .paiement-bloc { width: 100%; background: #151515; padding: 30px; margin: 0 0 20px 0; border: 1px solid rgba(216,178,63,.22); border-radius: 14px; box-shadow: 0 10px 25px rgba(0,0,0,.35); } /* ========================================= TITRE ========================================= */ .paiement-titre { text-align: center; margin-bottom: 20px; } .paiement-titre h2 { margin: 0; color: #d8b23f; font-size: 26px; font-weight: 600; } /* ========================================= ALERTE ========================================= */ .paiement-alerte { width: 100%; margin: 0 0 20px 0; padding: 17px; background: #1b1b1b; border: 1px solid #d8b23f; border-radius: 10px; text-align: center; box-shadow: 0 6px 18px rgba(0,0,0,.25); } .paiement-alerte p { margin: 0; color: #f4f4f4; font-weight: 600; line-height: 1.6; } .paiement-alerte strong, .paiement-alerte u { color: #e6c85a; } /* ========================================= INSTRUCTIONS ========================================= */ .paiement-instructions { width: 100%; padding: 18px; margin-bottom: 25px; background: #1b1b1b; border: 1px solid rgba(216,178,63,.45); border-radius: 14px; text-align: center; font-size: 17px; font-weight: 600; line-height: 1.6; color: #f4f4f4; } .paiement-instructions strong { color: #d8b23f; } /* ========================================= CARTES ABONNEMENTS ========================================= */ .paiement-offres { display: flex; width: 100%; gap: 20px; margin-bottom: 25px; align-items: stretch; } .paiement-offre { flex: 1 1 0; min-width: 0; min-height: 190px; padding: 25px 20px; background: #151515; border: 1px solid rgba(216,178,63,.35); border-radius: 14px; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; box-shadow: 0 8px 20px rgba(0,0,0,.25); transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; } .paiement-offre:hover { border-color: #d8b23f; transform: translateY(-2px); box-shadow: 0 12px 25px rgba(0,0,0,.4); } /* ========================================= CARTES NEOX2 / MAGNUM ========================================= */ .paiement-neox2 { border-top: 4px solid #d8b23f; color: #f4f4f4; } .paiement-magnum { border-top: 4px solid #e6c85a; color: #f4f4f4; } /* ========================================= TITRE DES OFFRES ========================================= */ .paiement-offre-titre { color: #f4f4f4; font-size: 20px; font-weight: 600; line-height: 1.4; } /* ========================================= PRIX ========================================= */ .paiement-prix { margin-top: 8px; color: #d8b23f; font-size: 28px; font-weight: bold; } ```css /* ========================================= À ÉCRIRE — CORRECTION VISIBILITÉ ========================================= */ .paiement-a-ecrire { display: block !important; visibility: visible !important; opacity: 1 !important; margin-top: 15px !important; padding: 8px 14px !important; background: #1b1b1b !important; border: 1px solid rgba(216,178,63,.45) !important; border-radius: 8px !important; color: #f4f4f4 !important; font-size: 15px !important; line-height: 1.4 !important; font-weight: 600 !important; text-align: center !important; } .paiement-a-ecrire strong { display: inline-block !important; visibility: visible !important; opacity: 1 !important; margin-left: 4px !important; color: #e6c85a !important; font-size: 17px !important; font-weight: 700 !important; } /* Sécurité supplémentaire pour les deux abonnements */ .paiement-neox2 .paiement-a-ecrire, .paiement-magnum .paiement-a-ecrire { color: #f4f4f4 !important; } .paiement-neox2 .paiement-a-ecrire strong, .paiement-magnum .paiement-a-ecrire strong { color: #e6c85a !important; } ``` /* ========================================= INFORMATION PAIEMENT ========================================= */ .paiement-info { width: 100%; padding: 17px; background: #1b1b1b; border: 1px solid rgba(216,178,63,.45); border-radius: 12px; text-align: center; font-size: 16px; font-weight: 600; line-height: 1.6; color: #f4f4f4; } /* ========================================= BOUTON FORMULAIRE ========================================= */ .paiement-bouton-zone { width: 100%; margin: 25px 0; text-align: center; } .paiement-bouton { display: inline-block; background: #d8b23f; color: #0d0d0d; padding: 15px 40px; border: 1px solid #e6c85a; border-radius: 25px; font-size: 18px; font-family: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 6px 18px rgba(216,178,63,.18); transition: background .2s ease, transform .2s ease, box-shadow .2s ease; } .paiement-bouton:hover { background: #e6c85a; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(216,178,63,.28); } /* ========================================= FORMULAIRE ========================================= */ .paiement-formulaire { width: 100%; margin: 0; padding: 30px; background: #151515; border: 1px solid rgba(216,178,63,.22); border-radius: 14px; box-shadow: 0 10px 25px rgba(0,0,0,.35); color: #f4f4f4; } /* ========================================= FOND GLOBAL ========================================= */ body { background-color: #0d0d0d; } /* ========================================= MOBILE ========================================= */ @media (max-width: 700px) { .paiement-page { width: calc(100% - 24px); margin: 20px auto; } .paiement-bloc, .paiement-formulaire { padding: 20px; } .paiement-titre h2 { font-size: 23px; } .paiement-instructions { font-size: 15px; padding: 15px; } .paiement-offres { flex-direction: column; gap: 15px; } .paiement-offre { width: 100%; min-height: 170px; } .paiement-offre-titre { font-size: 18px; } .paiement-prix { font-size: 26px; } .paiement-a-ecrire { font-size: 14px; padding: 8px 12px; } .paiement-a-ecrire strong { font-size: 16px; } .paiement-info { font-size: 14px; } .paiement-alerte { font-size: 14px; } } ``` ```css id="w8r3j2" /* ===================================================== NEOX2 PREMIUM IDENTITÉ VISUELLE OFFICIELLE ===================================================== */ .n2-premium { --n2-black: #0d0d0d; --n2-card: #151515; --n2-surface: #1b1b1b; --n2-gold: #d8b23f; --n2-gold-light: #e6c85a; --n2-text: #f4f4f4; --n2-muted: #a7a7a7; --n2-border: rgba(216,178,63,.22); width: 100%; margin: 0; padding: 0; background: var(--n2-black); color: var(--n2-text); font-family: 'Montserrat', Arial, sans-serif; line-height: 1.6; box-sizing: border-box; } .n2-premium *, .n2-premium *::before, .n2-premium *::after { box-sizing: border-box; } .n2-premium a { text-decoration: none; } .n2-wrap { width: calc(100% - 40px); max-width: 1120px; margin: 0 auto; } /* ===================================================== HERO ===================================================== */ .n2-hero { padding: 80px 0; background: radial-gradient(circle at 80% 30%, rgba(216,178,63,.10), transparent 35%), var(--n2-black); } .n2-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 70px; align-items: center; } .n2-kicker, .n2-title > span, .n2-offer-kicker { display: inline-block; color: var(--n2-gold); font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; } .n2-hero h1 { margin: 14px 0 20px; color: var(--n2-text); font-size: clamp(38px, 5vw, 64px); line-height: 1.05; font-weight: 700; } .n2-lead { max-width: 620px; margin: 0 0 30px; color: var(--n2-muted); font-size: 18px; line-height: 1.8; } /* ===================================================== BOUTONS ===================================================== */ .n2-buttons { display: flex; flex-wrap: wrap; gap: 14px; } .n2-btn { display: inline-flex; justify-content: center; align-items: center; min-height: 48px; padding: 12px 25px; border-radius: 25px; font-size: 15px; font-weight: 700; transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease; } .n2-btn-gold { background: var(--n2-gold); border: 1px solid var(--n2-gold-light); color: var(--n2-black); box-shadow: 0 6px 20px rgba(216,178,63,.16); } .n2-btn-gold:hover { background: var(--n2-gold-light); color: var(--n2-black); transform: translateY(-2px); } .n2-btn-dark { background: var(--n2-surface); border: 1px solid var(--n2-border); color: var(--n2-text); } .n2-btn-dark:hover { border-color: var(--n2-gold); color: var(--n2-gold-light); transform: translateY(-2px); } .n2-trust { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 25px; color: var(--n2-muted); font-size: 13px; } /* ===================================================== HERO CARD ===================================================== */ .n2-hero-visual { display: flex; justify-content: center; } .n2-hero-card { position: relative; width: 100%; max-width: 390px; min-height: 420px; padding: 35px; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient( 145deg, #1b1b1b, #111111 ); border: 1px solid rgba(216,178,63,.40); border-radius: 22px; box-shadow: 0 25px 60px rgba(0,0,0,.55), inset 0 0 40px rgba(216,178,63,.04); } .n2-card-label { color: var(--n2-gold); font-size: 12px; font-weight: 700; letter-spacing: 2px; } .n2-hero-logo { text-align: center; color: var(--n2-text); font-size: 48px; font-weight: 700; line-height: 1; letter-spacing: 3px; } .n2-hero-logo strong { display: block; margin-top: 10px; color: var(--n2-gold); font-size: 18px; letter-spacing: 5px; } .n2-hero-duration { padding-top: 20px; border-top: 1px solid var(--n2-border); text-align: center; } .n2-hero-duration small { display: block; color: var(--n2-muted); font-size: 11px; letter-spacing: 2px; } .n2-hero-duration strong { display: block; margin-top: 5px; color: var(--n2-gold-light); font-size: 25px; } .n2-hero-price { text-align: center; color: var(--n2-gold); font-size: 42px; font-weight: 700; } .n2-hero-price span { font-size: 22px; } /* ===================================================== SECTIONS ===================================================== */ .n2-section { padding: 85px 0; background: var(--n2-black); } .n2-section-dark { background: var(--n2-card); } .n2-title { max-width: 720px; margin: 0 auto 45px; text-align: center; } .n2-title h2 { margin: 10px 0 12px; color: var(--n2-text); font-size: 36px; line-height: 1.2; } .n2-title p { margin: 0; color: var(--n2-muted); font-size: 16px; } /* ===================================================== AVANTAGES ===================================================== */ .n2-benefits { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .n2-benefit { display: flex; gap: 20px; align-items: flex-start; padding: 25px; background: var(--n2-surface); border: 1px solid var(--n2-border); border-radius: 14px; transition: border-color .2s ease, transform .2s ease; } .n2-benefit:hover { border-color: var(--n2-gold); transform: translateY(-2px); } .n2-icon { flex: 0 0 48px; width: 48px; height: 48px; display: flex; justify-content: center; align-items: center; border: 1px solid var(--n2-gold); border-radius: 10px; color: var(--n2-gold); font-weight: 700; font-size: 13px; } .n2-benefit h3 { margin: 0 0 6px; color: var(--n2-text); font-size: 18px; } .n2-benefit p { margin: 0; color: var(--n2-muted); font-size: 14px; } /* ===================================================== OFFRE ===================================================== */ .n2-offer { display: grid; grid-template-columns: 1.3fr .7fr; overflow: hidden; background: var(--n2-card); border: 1px solid rgba(216,178,63,.35); border-radius: 18px; box-shadow: 0 15px 40px rgba(0,0,0,.35); } .n2-offer-left { padding: 40px; } .n2-offer-left h3 { margin: 12px 0 15px; color: var(--n2-text); font-size: 32px; line-height: 1.15; } .n2-offer-left p { max-width: 580px; color: var(--n2-muted); } .n2-offer-left ul { margin: 25px 0 0; padding: 0; list-style: none; } .n2-offer-left li { margin: 10px 0; color: var(--n2-text); } .n2-offer-left li::first-letter { color: var(--n2-gold); } .n2-offer-right { padding: 40px 30px; display: flex; flex-direction: column; justify-content: center; align-items: center; background: var(--n2-surface); border-left: 1px solid var(--n2-border); text-align: center; } .n2-offer-duration { color: var(--n2-muted); font-size: 12px; font-weight: 700; letter-spacing: 2px; } .n2-price { display: block; margin: 5px 0 20px; color: var(--n2-gold); font-size: 64px; line-height: 1; } .n2-price span { font-size: 28px; } .n2-note { margin-top: 12px; color: var(--n2-muted); font-size: 12px; } /* ===================================================== COMPATIBILITÉ ===================================================== */ .n2-devices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .n2-device { min-height: 165px; padding: 25px; background: var(--n2-surface); border: 1px solid var(--n2-border); border-radius: 14px; transition: border-color .2s ease, transform .2s ease; } .n2-device:hover { border-color: var(--n2-gold); transform: translateY(-2px); } .n2-device > strong { color: var(--n2-gold); font-size: 13px; letter-spacing: 1px; } .n2-device h3 { margin: 12px 0 5px; color: var(--n2-text); font-size: 18px; } .n2-device p { margin: 0; color: var(--n2-muted); font-size: 14px; } /* ===================================================== STATISTIQUES ===================================================== */ .n2-stats { padding: 45px 0; background: #111111; border-top: 1px solid var(--n2-border); border-bottom: 1px solid var(--n2-border); } .n2-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); } .n2-stats-grid > div { padding: 10px 20px; text-align: center; border-right: 1px solid var(--n2-border); } .n2-stats-grid > div:last-child { border-right: 0; } .n2-stats strong { display: block; color: var(--n2-gold); font-size: 30px; line-height: 1.2; } .n2-stats span { display: block; margin-top: 6px; color: var(--n2-muted); font-size: 13px; } /* ===================================================== INSTALLATION ===================================================== */ .n2-install { display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: center; } .n2-install-text h2 { margin: 12px 0 15px; color: var(--n2-text); font-size: 38px; line-height: 1.15; } .n2-install-text > p { color: var(--n2-muted); } .n2-steps { margin-top: 30px; } .n2-step { display: flex; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--n2-border); } .n2-step:last-child { border-bottom: 0; } .n2-step-number { flex: 0 0 45px; width: 45px; height: 45px; display: flex; justify-content: center; align-items: center; border-radius: 10px; background: var(--n2-surface); border: 1px solid var(--n2-gold); color: var(--n2-gold); font-size: 13px; font-weight: 700; } .n2-step-info h3 { margin: 0 0 4px; color: var(--n2-text); font-size: 17px; } .n2-step-info p { margin: 0; color: var(--n2-muted); font-size: 14px; } .n2-install-box { min-height: 360px; display: flex; flex-direction: column; justify-content: center; align-items: center; background: radial-gradient( circle, rgba(216,178,63,.12), transparent 55% ), var(--n2-card); border: 1px solid rgba(216,178,63,.35); border-radius: 20px; box-shadow: 0 20px 50px rgba(0,0,0,.4); text-align: center; } .n2-install-box span { color: var(--n2-text); font-size: 48px; font-weight: 700; letter-spacing: 3px; } .n2-install-box strong { margin-top: 5px; color: var(--n2-gold); font-size: 18px; letter-spacing: 5px; } .n2-install-box small { margin-top: 25px; color: var(--n2-muted); } /* ===================================================== AIDE ===================================================== */ .n2-help { padding: 45px 0; background: var(--n2-card); border-top: 1px solid var(--n2-border); border-bottom: 1px solid var(--n2-border); } .n2-help-inner { display: flex; justify-content: space-between; align-items: center; gap: 30px; } .n2-help h2 { margin: 8px 0; color: var(--n2-text); font-size: 28px; } .n2-help p { margin: 0; color: var(--n2-muted); } /* ===================================================== CTA FINAL ===================================================== */ .n2-final { padding: 90px 0; text-align: center; background: radial-gradient( circle at center, rgba(216,178,63,.10), transparent 45% ), var(--n2-black); } .n2-final h2 { margin: 12px 0 15px; color: var(--n2-text); font-size: clamp(34px, 5vw, 52px); line-height: 1.1; } .n2-final p { margin: 0 auto 30px; color: var(--n2-muted); } /* ===================================================== MOBILE ===================================================== */ @media (max-width: 850px) { .n2-hero { padding: 60px 0; } .n2-hero-grid, .n2-install { grid-template-columns: 1fr; gap: 40px; } .n2-hero-content { text-align: center; } .n2-lead { margin-left: auto; margin-right: auto; } .n2-buttons, .n2-trust { justify-content: center; } .n2-benefits { grid-template-columns: 1fr; } .n2-offer { grid-template-columns: 1fr; } .n2-offer-right { border-left: 0; border-top: 1px solid var(--n2-border); } .n2-devices { grid-template-columns: repeat(2, 1fr); } .n2-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 0; } .n2-stats-grid > div:nth-child(2) { border-right: 0; } .n2-help-inner { flex-direction: column; text-align: center; } } @media (max-width: 600px) { .n2-wrap { width: calc(100% - 28px); } .n2-section { padding: 60px 0; } .n2-hero h1 { font-size: 38px; } .n2-title h2 { font-size: 29px; } .n2-hero-card { min-height: 350px; padding: 25px; } .n2-hero-logo { font-size: 38px; } .n2-benefit { padding: 20px; } .n2-offer-left, .n2-offer-right { padding: 28px 22px; } .n2-offer-left h3 { font-size: 27px; } .n2-price { font-size: 55px; } .n2-devices { grid-template-columns: 1fr; } .n2-stats-grid { grid-template-columns: 1fr 1fr; } .n2-stats-grid > div { border-right: 0; border-bottom: 1px solid var(--n2-border); } .n2-stats-grid > div:nth-last-child(-n+2) { border-bottom: 0; } .n2-install-text h2 { font-size: 31px; } .n2-buttons { flex-direction: column; } .n2-btn { width: 100%; } .n2-final { padding: 70px 0; } } ``` ```css id="v2j7k4" /* ===================================================== NEOX2 PREMIUM CORRECTION VISIBILITÉ DES TEXTES ===================================================== */ /* Texte général */ .n2-premium { color: #f4f4f4 !important; } /* ===================================================== TITRES ===================================================== */ .n2-premium h1, .n2-premium h2, .n2-premium h3, .n2-premium h4, .n2-premium h5, .n2-premium h6 { color: #f4f4f4 !important; opacity: 1 !important; visibility: visible !important; } /* ===================================================== PARAGRAPHES ===================================================== */ .n2-premium p { color: #a7a7a7 !important; opacity: 1 !important; visibility: visible !important; } /* ===================================================== TEXTES DANS LES CARTES ===================================================== */ .n2-premium .n2-benefit, .n2-premium .n2-device, .n2-premium .n2-offer, .n2-premium .n2-offer-left, .n2-premium .n2-offer-right, .n2-premium .n2-step, .n2-premium .n2-step-info, .n2-premium .n2-install-box, .n2-premium .n2-help, .n2-premium .n2-final { color: #f4f4f4 !important; } /* ===================================================== TEXTE SECONDAIRE ===================================================== */ .n2-premium .n2-lead, .n2-premium .n2-benefit p, .n2-premium .n2-device p, .n2-premium .n2-offer-left p, .n2-premium .n2-note, .n2-premium .n2-step-info p, .n2-premium .n2-install-box small, .n2-premium .n2-help p, .n2-premium .n2-final p { color: #a7a7a7 !important; opacity: 1 !important; } /* ===================================================== TITRES DES CARTES ===================================================== */ .n2-premium .n2-benefit h3, .n2-premium .n2-device h3, .n2-premium .n2-step-info h3, .n2-premium .n2-offer-left h3, .n2-premium .n2-help h2, .n2-premium .n2-final h2 { color: #f4f4f4 !important; opacity: 1 !important; } /* ===================================================== LISTE DE L'OFFRE ===================================================== */ .n2-premium .n2-offer-left ul { color: #f4f4f4 !important; } .n2-premium .n2-offer-left li { color: #f4f4f4 !important; opacity: 1 !important; visibility: visible !important; } /* ===================================================== ÉLÉMENTS DORÉS ===================================================== */ .n2-premium .n2-kicker, .n2-premium .n2-title > span, .n2-premium .n2-offer-kicker, .n2-premium .n2-card-label, .n2-premium .n2-icon, .n2-premium .n2-device > strong, .n2-premium .n2-offer-duration, .n2-premium .n2-price, .n2-premium .n2-hero-price, .n2-premium .n2-hero-duration strong, .n2-premium .n2-hero-logo strong, .n2-premium .n2-install-box strong { color: #d8b23f !important; opacity: 1 !important; visibility: visible !important; } /* ===================================================== NOMS / ÉLÉMENTS IMPORTANTS ===================================================== */ .n2-premium strong { opacity: 1 !important; visibility: visible !important; } .n2-premium .n2-price span, .n2-premium .n2-hero-price span { color: #e6c85a !important; } /* ===================================================== TRUST ===================================================== */ .n2-premium .n2-trust, .n2-premium .n2-trust span { color: #a7a7a7 !important; opacity: 1 !important; visibility: visible !important; } /* ===================================================== STATISTIQUES ===================================================== */ .n2-premium .n2-stats { color: #f4f4f4 !important; } .n2-premium .n2-stats strong { color: #d8b23f !important; opacity: 1 !important; visibility: visible !important; } .n2-premium .n2-stats span { color: #a7a7a7 !important; opacity: 1 !important; visibility: visible !important; } /* ===================================================== INSTALLATION ===================================================== */ .n2-premium .n2-step-number { color: #d8b23f !important; background: #1b1b1b !important; border-color: rgba(216,178,63,.45) !important; } .n2-premium .n2-step-info h3 { color: #f4f4f4 !important; } .n2-premium .n2-step-info p { color: #a7a7a7 !important; } /* ===================================================== HERO ===================================================== */ .n2-premium .n2-hero-content h1 { color: #f4f4f4 !important; } .n2-premium .n2-lead { color: #a7a7a7 !important; } .n2-premium .n2-hero-logo { color: #f4f4f4 !important; } .n2-premium .n2-hero-logo strong { color: #d8b23f !important; } .n2-premium .n2-hero-duration small { color: #a7a7a7 !important; } .n2-premium .n2-hero-duration strong { color: #e6c85a !important; } /* ===================================================== BOUTONS ===================================================== */ .n2-premium .n2-btn-gold { background: #d8b23f !important; color: #0d0d0d !important; border-color: #e6c85a !important; } .n2-premium .n2-btn-dark { background: #1b1b1b !important; color: #f4f4f4 !important; border-color: rgba(216,178,63,.35) !important; } /* ===================================================== SÉCURITÉ VISIBILITÉ ===================================================== */ .n2-premium h1, .n2-premium h2, .n2-premium h3, .n2-premium p, .n2-premium li, .n2-premium span, .n2-premium strong { visibility: visible !important; opacity: 1 !important; } /* ===================================================== EMPÊCHE LES STYLES DU THÈME DE BLANCHIR LES BLOCS ===================================================== */ .n2-premium .n2-benefit, .n2-premium .n2-device, .n2-premium .n2-offer, .n2-premium .n2-step, .n2-premium .n2-install-box { background-color: #151515 !important; } /* Surface secondaire */ .n2-premium .n2-offer-right, .n2-premium .n2-stats, .n2-premium .n2-help { background-color: #1b1b1b !important; } ``` debut