/* ========================================================== MAGICALRADIO3D - HEADER PREMIUM V1 VISUEL UNIQUEMENT AUCUNE FONCTION JAVASCRIPT MODIFIEE ========================================================== */ /* ------------------------------------------------------- RESERVE LA PLACE DU HEADER FIXE ------------------------------------------------------- */ body[data-page="home"] .site-shell{ padding-top:145px !important; } /* ------------------------------------------------------- HEADER GLOBAL ------------------------------------------------------- */ body[data-page="home"] .topbar.panel{ position:fixed !important; top:12px !important; left:50% !important; transform:translateX(-50%) !important; width:min( 1450px, calc(100vw - 34px) ) !important; max-width:1450px !important; z-index:10000 !important; display:grid !important; grid-template-columns: 235px minmax(0,1fr) auto 215px !important; grid-template-areas: "brand nav tools user"; align-items:center !important; gap:14px !important; padding: 11px 14px !important; margin:0 !important; border: 1px solid rgba(91,182,255,.55) !important; border-radius: 22px !important; background: radial-gradient( circle at 12% 10%, rgba(132,54,255,.18), transparent 29% ), radial-gradient( circle at 86% 30%, rgba(22,191,255,.10), transparent 31% ), linear-gradient( 110deg, rgba(6,15,42,.96), rgba(9,12,34,.97) ) !important; backdrop-filter: blur(22px) saturate(145%) !important; -webkit-backdrop-filter: blur(22px) saturate(145%) !important; box-shadow: 0 0 0 1px rgba(169,59,255,.16), 0 0 28px rgba(36,174,255,.13), 0 20px 55px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.08) !important; } /* lumière supérieure */ body[data-page="home"] .topbar.panel::before{ content:""; position:absolute; left:4%; right:4%; top:-1px; height:1px; background: linear-gradient( 90deg, transparent, #b530ff, #22d3ff, transparent ); box-shadow: 0 0 14px rgba(65,203,255,.8); pointer-events:none; } /* ------------------------------------------------------- LOGO + IDENTITE ------------------------------------------------------- */ body[data-page="home"] .brand-wrap{ grid-area:brand; display:grid !important; grid-template-columns: 76px minmax(0,1fr); align-items:center !important; gap:12px !important; min-width:0; } body[data-page="home"] .logo-img{ width:76px !important; height:76px !important; padding:4px !important; margin:0 !important; object-fit:contain !important; border-radius: 20px !important; border: 1px solid rgba(114,185,255,.40) !important; background: radial-gradient( circle, rgba(117,74,255,.20), rgba(5,10,28,.6) ) !important; box-shadow: 0 0 12px rgba(54,209,255,.42), 0 0 25px rgba(184,50,255,.30), inset 0 0 14px rgba(255,255,255,.06) !important; } body[data-page="home"] .brand-wrap .eyebrow{ margin-bottom: 3px !important; font-size: 9px !important; font-weight: 900 !important; letter-spacing: .20em !important; color: #62ddff !important; } body[data-page="home"] .brand-wrap h1{ margin:0 !important; font-size: 25px !important; line-height: 1 !important; letter-spacing: -.04em !important; color: #fff !important; text-shadow: 0 0 18px rgba(107,107,255,.25); } /* on allège le header : le slogan long reste inutile ici */ body[data-page="home"] .brand-wrap p{ display:none !important; } /* ------------------------------------------------------- VRAIE BARRE DE NAVIGATION ------------------------------------------------------- */ body[data-page="home"] .nav{ grid-area:nav; display:flex !important; flex-wrap:nowrap !important; align-items:center !important; justify-content:center !important; gap:3px !important; min-width:0; padding: 5px !important; margin:0 !important; border: 1px solid rgba(116,129,255,.17); border-radius: 18px; background: linear-gradient( 180deg, rgba(20,27,69,.52), rgba(7,13,38,.50) ); box-shadow: inset 0 1px 0 rgba(255,255,255,.035); } body[data-page="home"] .nav a{ position:relative; display:flex !important; align-items:center; justify-content:center; min-height: 38px; padding: 8px 10px !important; border: 1px solid transparent !important; border-radius: 13px !important; background: transparent !important; color: rgba(233,238,255,.79) !important; font-size: 11px !important; font-weight: 750 !important; line-height: 1.1; white-space: nowrap; transition: .18s ease; } body[data-page="home"] .nav a:hover{ color: #fff !important; transform: translateY(-1px); background: rgba(75,89,180,.20) !important; border-color: rgba(96,187,255,.22) !important; box-shadow: 0 7px 17px rgba(0,0,0,.22) !important; } body[data-page="home"] .nav a.active{ color: #fff !important; background: linear-gradient( 135deg, #7758ff, #247dff ) !important; border-color: rgba(83,205,255,.55) !important; box-shadow: 0 0 17px rgba(41,158,255,.36), inset 0 1px 0 rgba(255,255,255,.20) !important; } /* petites icones visuelles, liens inchangés */ body[data-page="home"] .nav a:nth-child(1)::before{ content:"⌂"; margin-right:5px; } body[data-page="home"] .nav a:nth-child(2)::before{ content:"♩"; margin-right:5px; } body[data-page="home"] .nav a:nth-child(3)::before{ content:"♥"; margin-right:5px; } body[data-page="home"] .nav a:nth-child(4)::before{ content:"♟"; margin-right:5px; } body[data-page="home"] .nav a:nth-child(5)::before{ content:"▣"; margin-right:5px; } body[data-page="home"] .nav a:nth-child(6)::before{ content:"♫"; margin-right:5px; } body[data-page="home"] .nav a:nth-child(7)::before{ content:"◆"; margin-right:5px; } /* ------------------------------------------------------- ACTIONS : VISION / FLASH / SOUTIEN ------------------------------------------------------- */ body[data-page="home"] .header-live-tools{ grid-area:tools; display:grid !important; grid-template-columns: 1fr 1fr !important; gap: 5px !important; align-items:center !important; min-width: 185px; } body[data-page="home"] .header-live-tools > *{ min-height: 32px !important; margin: 0 !important; padding: 6px 10px !important; border-radius: 999px !important; font-size: 10px !important; font-weight: 900 !important; line-height: 1 !important; white-space: nowrap; } /* La Vision */ body[data-page="home"] #openVisionVideo{ color: #fff8dc !important; border: 1px solid rgba(255,196,56,.65) !important; background: linear-gradient( 135deg, rgba(166,93,0,.66), rgba(55,31,10,.82) ) !important; box-shadow: 0 0 16px rgba(255,173,31,.21) !important; } /* Flash live */ body[data-page="home"] #openFlashLive{ color: #fff !important; border: 1px solid rgba(255,64,105,.55) !important; background: linear-gradient( 135deg, rgba(197,25,62,.92), rgba(105,13,42,.93) ) !important; box-shadow: 0 0 16px rgba(255,45,92,.23) !important; } /* soutien sur toute la largeur */ body[data-page="home"] #tipSupportBtn{ grid-column: 1 / -1; display:flex !important; align-items:center; justify-content:center; color: #fff !important; border: 1px solid rgba(255,88,226,.45) !important; background: linear-gradient( 105deg, #e92fca, #8952ff 55%, #28c9e8 ) !important; box-shadow: 0 0 19px rgba(227,54,255,.28) !important; } body[data-page="home"] #tipSupportText{ font-size: 9px !important; letter-spacing: .015em; } /* ------------------------------------------------------- COMPTE UTILISATEUR ------------------------------------------------------- */ body[data-page="home"] .login-status-box{ grid-area:user; display:flex !important; align-items:center !important; justify-content:flex-end !important; gap: 5px !important; flex-wrap: wrap !important; padding: 7px !important; border: 1px solid rgba(119,133,255,.16) !important; border-radius: 17px !important; background: rgba(9,16,42,.52) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important; } body[data-page="home"] .login-status-box .soft, body[data-page="home"] .login-status-box button, body[data-page="home"] .login-status-box a{ min-height: 31px; padding: 6px 9px !important; border-radius: 11px !important; font-size: 9px !important; white-space: nowrap; } body[data-page="home"] #loginStatusText{ width: 100%; padding: 2px 5px; font-size: 10px !important; text-align: right; color: rgba(231,235,255,.82) !important; } /* ------------------------------------------------------- HOVER GLOBAL HEADER ------------------------------------------------------- */ body[data-page="home"] .topbar button, body[data-page="home"] .topbar a{ transition: transform .18s ease, filter .18s ease, box-shadow .18s ease; } body[data-page="home"] .topbar button:hover, body[data-page="home"] .topbar a:hover{ filter: brightness(1.10); } /* ------------------------------------------------------- ECRANS PLUS ETROITS ------------------------------------------------------- */ @media(max-width:1280px){ body[data-page="home"] .site-shell{ padding-top: 180px !important; } body[data-page="home"] .topbar.panel{ grid-template-columns: 220px minmax(0,1fr) 210px !important; grid-template-areas: "brand nav user" "brand tools user"; row-gap: 7px !important; } body[data-page="home"] .header-live-tools{ display:flex !important; flex-direction: row !important; justify-content: center !important; } body[data-page="home"] #tipSupportBtn{ grid-column: auto; } body[data-page="home"] .nav{ flex-wrap: wrap !important; } } @media(max-width:900px){ body[data-page="home"] .site-shell{ padding-top: 215px !important; } body[data-page="home"] .topbar.panel{ grid-template-columns: 180px minmax(0,1fr) !important; grid-template-areas: "brand user" "nav nav" "tools tools"; width: calc(100vw - 18px) !important; } body[data-page="home"] .logo-img{ width: 58px !important; height: 58px !important; } body[data-page="home"] .brand-wrap{ grid-template-columns: 58px 1fr; } body[data-page="home"] .brand-wrap h1{ font-size: 20px !important; } } /* ========================================================= HEADER FIX V2 - vrai header fixe - tailles réduites - ne change aucune fonction ========================================================= */ /* on enlève la dépendance à body[data-page="home"] */ .site-shell{ padding-top: 118px !important; } /* vrai header fixe viewport */ .topbar.panel{ position: fixed !important; top: 10px !important; left: 50% !important; transform: translateX(-50%) !important; width: min(1380px, calc(100vw - 28px)) !important; max-width: 1380px !important; z-index: 99999 !important; display: grid !important; grid-template-columns: 250px minmax(0,1fr) 250px 210px !important; align-items: center !important; gap: 12px !important; padding: 10px 12px !important; border-radius: 20px !important; box-sizing: border-box !important; } /* si un parent gêne le fixed */ .page-shell, .site-shell, main, body{ transform: none !important; } /* identité plus compacte */ .brand-wrap{ display: grid !important; grid-template-columns: 64px 1fr !important; gap: 10px !important; align-items: center !important; } .logo-img{ width: 64px !important; height: 64px !important; border-radius: 16px !important; } .brand-wrap h1{ font-size: 18px !important; line-height: 1 !important; margin: 0 !important; } .brand-wrap .eyebrow{ font-size: 9px !important; letter-spacing: .18em !important; } .brand-wrap p{ display: block !important; margin: 2px 0 0 0 !important; font-size: 11px !important; line-height: 1.2 !important; color: rgba(255,255,255,.78) !important; } /* vraie barre nav plus propre */ .nav{ display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; gap: 4px !important; padding: 5px !important; border-radius: 16px !important; min-width: 0 !important; } .nav a{ min-height: 34px !important; padding: 7px 10px !important; font-size: 10px !important; border-radius: 11px !important; white-space: nowrap !important; } /* bloc actions live plus compact */ .header-live-tools{ display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 5px !important; min-width: 220px !important; } .header-live-tools > *{ min-height: 30px !important; font-size: 10px !important; padding: 6px 8px !important; border-radius: 999px !important; } #tipSupportBtn{ grid-column: 1 / -1 !important; } /* bloc user plus compact */ .login-status-box{ display: flex !important; flex-wrap: wrap !important; justify-content: flex-end !important; gap: 5px !important; padding: 6px !important; border-radius: 16px !important; } .login-status-box .soft, .login-status-box button, .login-status-box a{ min-height: 30px !important; font-size: 10px !important; padding: 6px 8px !important; border-radius: 10px !important; } #loginStatusText{ width: 100% !important; text-align: right !important; font-size: 10px !important; } /* responsive */ @media (max-width: 1450px){ .site-shell{ padding-top: 128px !important; } .topbar.panel{ width: calc(100vw - 20px) !important; grid-template-columns: 220px minmax(0,1fr) 220px 190px !important; } .nav a{ font-size: 9px !important; padding: 7px 8px !important; } } @media (max-width: 1150px){ .site-shell{ padding-top: 170px !important; } .topbar.panel{ grid-template-columns: 220px 1fr !important; grid-template-areas: "brand user" "nav nav" "tools tools" !important; row-gap: 8px !important; } .nav{ flex-wrap: wrap !important; } .header-live-tools{ width: 100% !important; } } /* ========================================================== HEADER V4 VISION CACHEE FLASH LIVE SORTI DU HEADER ========================================================== */ /* La Vision reste dans le DOM pour ne casser aucun JS, mais n'est plus visible. */ #openVisionVideo{ display:none !important; } /* Le header ne contient maintenant qu'un bouton principal d'action : Soutenir. */ .header-live-tools{ display:flex !important; align-items:center !important; justify-content:center !important; min-width:0 !important; padding:0 !important; } .header-live-tools #tipSupportBtn{ width:100% !important; min-width:180px !important; min-height:38px !important; padding:8px 16px !important; border-radius:999px !important; font-size:10px !important; font-weight:900 !important; letter-spacing:.02em; background: linear-gradient( 105deg, #e82cc9, #8657ff 55%, #27cce9 ) !important; border: 1px solid rgba(255,255,255,.25) !important; box-shadow: 0 0 24px rgba(213,47,255,.26), 0 10px 24px rgba(0,0,0,.28) !important; } /* Avec moins d'actions au centre, on redonne un peu plus de place au nom du site. */ .topbar.panel{ grid-template-columns: 350px minmax(0,1fr) 225px !important; } /* ========================================================== HEADER V5 - STRUCTURE FINALE Cette règle passe après les anciennes règles. ========================================================== */ /* place nécessaire pour le header fixe */ body[data-page="home"] .site-shell{ padding-top:165px !important; } /* ----------------------------------------------------- HEADER : PREMIERE LIGNE + BARRE MENU DEUXIEME LIGNE ----------------------------------------------------- */ body[data-page="home"] .topbar.panel{ position:fixed !important; top:10px !important; left:50% !important; transform: translateX(-50%) !important; width: min(1420px, calc(100vw - 30px)) !important; max-width: 1420px !important; z-index: 999999 !important; display:grid !important; grid-template-columns: minmax(360px,1fr) 230px 190px !important; grid-template-areas: "brand tools user" "nav nav nav" !important; align-items:center !important; column-gap: 16px !important; row-gap: 10px !important; padding: 12px 15px !important; overflow: visible !important; } /* ----------------------------------------------------- IDENTITE : SEULE SUR LA PREMIERE LIGNE ----------------------------------------------------- */ body[data-page="home"] .brand-wrap{ grid-area: brand !important; display:grid !important; grid-template-columns: 68px auto !important; align-items:center !important; justify-content:start !important; gap: 13px !important; width: auto !important; min-width: 350px !important; } body[data-page="home"] .brand-wrap > div{ display:flex !important; flex-direction:column !important; align-items:flex-start !important; justify-content:center !important; min-width: 260px !important; } body[data-page="home"] .brand-wrap .eyebrow{ display:block !important; width:auto !important; margin: 0 0 5px !important; font-size: 9px !important; white-space: nowrap !important; } body[data-page="home"] .brand-wrap h1{ display:block !important; width:auto !important; margin: 0 !important; font-size: 27px !important; line-height: 1 !important; white-space: nowrap !important; overflow: visible !important; } body[data-page="home"] .brand-wrap p{ display:none !important; } /* ----------------------------------------------------- NAVIGATION : SEULE SUR LA DEUXIEME LIGNE ----------------------------------------------------- */ body[data-page="home"] .nav{ grid-area: nav !important; display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 5px !important; align-items:center !important; justify-content:center !important; gap: 5px !important; } body[data-page="home"] .nav a{ flex: 1 1 0 !important; min-width: 0 !important; max-width: 190px; min-height: 35px !important; padding: 7px 10px !important; font-size: 10px !important; overflow: visible !important; text-overflow: clip !important; white-space: nowrap !important; } /* ----------------------------------------------------- VISION : PLUS AFFICHEE ----------------------------------------------------- */ body[data-page="home"] #openVisionVideo{ display:none !important; } /* ----------------------------------------------------- ZONE HAUTE : SOUTIEN UNIQUEMENT ----------------------------------------------------- */ body[data-page="home"] .header-live-tools{ grid-area: tools !important; display:flex !important; flex-direction:row !important; justify-content:center !important; align-items:center !important; width: 100% !important; min-width: 0 !important; } body[data-page="home"] .header-live-tools > *:not(#tipSupportBtn){ display:none !important; } body[data-page="home"] #tipSupportBtn{ display:flex !important; width: 100% !important; min-width: 190px !important; min-height: 36px !important; align-items:center !important; justify-content:center !important; } /* ----------------------------------------------------- UTILISATEUR : NOM + ROUE DENTEE ----------------------------------------------------- */ body[data-page="home"] .login-status-box{ grid-area: user !important; position: relative !important; display:grid !important; grid-template-columns: minmax(0,1fr) 40px !important; align-items:center !important; gap: 7px !important; width: 100% !important; padding: 6px 7px !important; overflow: visible !important; } body[data-page="home"] #loginStatusText{ grid-column: 1 !important; width: auto !important; padding: 0 4px !important; text-align: right !important; white-space: nowrap !important; } body[data-page="home"] #headerGearBtn{ grid-column: 2 !important; width: 38px !important; min-width: 38px !important; height: 38px !important; min-height: 38px !important; padding: 0 !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius: 12px !important; font-size: 20px !important; cursor: pointer; background: rgba(255,255,255,.07) !important; border: 1px solid rgba(255,255,255,.13) !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important; } body[data-page="home"] #headerGearBtn:hover{ background: rgba(101,105,255,.18) !important; box-shadow: 0 0 18px rgba(74,165,255,.24) !important; } /* ----------------------------------------------------- MENU DEROULANT DE LA ROUE DENTEE ----------------------------------------------------- */ body[data-page="home"] .header-user-dropdown{ position:absolute !important; top: calc(100% + 10px) !important; right: 0 !important; width: 220px !important; display:none !important; flex-direction: column !important; gap: 7px !important; padding: 10px !important; border-radius: 16px !important; border: 1px solid rgba(93,166,255,.30) !important; background: linear-gradient( 150deg, rgba(11,20,48,.98), rgba(7,12,31,.99) ) !important; box-shadow: 0 20px 50px rgba(0,0,0,.56), 0 0 24px rgba(79,95,255,.15) !important; backdrop-filter: blur(18px); z-index: 1000001 !important; } body[data-page="home"] .login-status-box.header-menu-open .header-user-dropdown{ display:flex !important; } body[data-page="home"] .header-user-dropdown > *{ position:static !important; display:flex !important; width: 100% !important; min-height: 36px !important; box-sizing: border-box !important; align-items:center !important; justify-content:flex-start !important; padding: 8px 11px !important; margin: 0 !important; border-radius: 10px !important; font-size: 11px !important; text-align: left !important; } /* ----------------------------------------------------- PETITS ECRANS ----------------------------------------------------- */ @media(max-width:1100px){ body[data-page="home"] .site-shell{ padding-top: 205px !important; } body[data-page="home"] .topbar.panel{ grid-template-columns: minmax(300px,1fr) 190px !important; grid-template-areas: "brand user" "tools tools" "nav nav" !important; } body[data-page="home"] .nav{ flex-wrap: wrap !important; } body[data-page="home"] .nav a{ flex: 1 1 130px !important; } } /* ========================================================== HEADER V5.1 - TEXTES PLUS LISIBLES AUCUN POSITIONNEMENT / AUCUNE FONCTION MODIFIEE ========================================================== */ /* identité */ body[data-page="home"] .brand-wrap .eyebrow{ font-size:10px !important; font-weight:900 !important; letter-spacing:.17em !important; } body[data-page="home"] .brand-wrap h1{ font-size:31px !important; font-weight:900 !important; line-height:1 !important; } /* barre de navigation */ body[data-page="home"] .nav a{ font-size:12px !important; font-weight:800 !important; padding: 8px 11px !important; min-height: 37px !important; } /* bouton soutien */ body[data-page="home"] #tipSupportBtn{ font-size:11px !important; font-weight:900 !important; } body[data-page="home"] #tipSupportText{ font-size:11px !important; font-weight:900 !important; } /* utilisateur */ body[data-page="home"] #loginStatusText{ font-size:11px !important; font-weight:700 !important; } /* menu de la roue dentée */ body[data-page="home"] .header-user-dropdown > *{ font-size:12px !important; font-weight:700 !important; } /* écrans un peu plus petits */ @media(max-width:1250px){ body[data-page="home"] .brand-wrap h1{ font-size:27px !important; } body[data-page="home"] .nav a{ font-size:11px !important; } } /* ========================================================== HEADER V5.2 - LISIBILITE RENFORCEE AUCUN POSITIONNEMENT MODIFIE ========================================================== */ body[data-page="home"] .brand-wrap .eyebrow{ font-size:11px !important; letter-spacing:.16em !important; } body[data-page="home"] .brand-wrap h1{ font-size:34px !important; font-weight:900 !important; } body[data-page="home"] .nav a{ font-size:13px !important; font-weight:850 !important; min-height:39px !important; padding: 9px 12px !important; } body[data-page="home"] #tipSupportBtn, body[data-page="home"] #tipSupportText{ font-size:12px !important; font-weight:900 !important; } body[data-page="home"] #loginStatusText{ font-size:12px !important; font-weight:800 !important; } body[data-page="home"] #headerGearBtn{ font-size:22px !important; } body[data-page="home"] .header-user-dropdown > *{ font-size:13px !important; } /* garde une taille raisonnable sur écrans plus petits */ @media(max-width:1250px){ body[data-page="home"] .brand-wrap h1{ font-size:30px !important; } body[data-page="home"] .nav a{ font-size:12px !important; } } /* ========================================================== HEADER V5.3 REGLE DEFINITIVE DE FONCTIONNEMENT - PAS FIXE - PAS STICKY - NE SUIT PAS LE SCROLL - RESTE DANS LE FLUX NORMAL DE LA PAGE - NE PASSE PAS DEVANT LES POPUPS ========================================================== */ /* Le header redevient un élément normal de la page. On garde position:relative uniquement pour les éléments internes comme le menu roue dentée. */ body[data-page="home"] .topbar.panel{ position:relative !important; top:auto !important; left:auto !important; right:auto !important; bottom:auto !important; transform:none !important; width:100% !important; max-width:none !important; margin:0 !important; z-index:10 !important; /* indispensable : le menu utilisateur peut sortir du header, mais le header lui-même n'est plus au-dessus des modales. */ overflow:visible !important; } /* Les anciens CSS avaient ajouté une grosse réserve parce que le header était fixed. Elle n'est plus nécessaire. */ body[data-page="home"] .site-shell{ padding-top:18px !important; } /* Le dropdown utilisateur reste utilisable, mais dans une couche raisonnable. Les vraies modales du site restent au-dessus. */ body[data-page="home"] .header-user-dropdown{ z-index:50 !important; } /* Sécurité supplémentaire : le header ne doit jamais devenir sticky par une ancienne règle. */ body[data-page="home"] header.topbar{ position:relative !important; top:auto !important; } /* Responsive : aucune réserve artificielle sur tablette. */ @media(max-width:1250px){ body[data-page="home"] .site-shell{ padding-top:12px !important; } } @media(max-width:900px){ body[data-page="home"] .site-shell{ padding-top:8px !important; } }