/* TonTonFlix V231 RC — mail de bienvenue simplifié + page installation PWA ; visuels applicatifs inchangés. */ :root{--orange:#ff6500;--purple:#9d32ff;--bg:#000;--panel:#111;--text:#f5f5f5;--muted:#aaa} *{box-sizing:border-box}html,body{margin:0;background:#000;color:var(--text);font-family:Arial,sans-serif;min-height:100%}body{display:flex;justify-content:center}.hidden{display:none!important}.mobile-shell{width:min(100vw,853px);min-height:100vh;background:#000}.reference-screen{position:relative;width:100%;background-repeat:no-repeat;background-position:top center;background-size:100% auto}.auth-reference{aspect-ratio:853/1844;background-image:url('/assets/reference/01_connexion.png')}.home-reference{aspect-ratio:853/1844;background-image:url('/assets/reference/02_accueil.png')}.profile-reference{aspect-ratio:853/1844;background-image:url('/assets/reference/06_profil_fond.png')}.version-badge{position:absolute;z-index:5;right:3.4%;top:1.2%;padding:.32em .65em;border:1px solid rgba(255,101,0,.65);border-radius:999px;background:rgba(0,0,0,.72);color:#ff7a1a;font-size:clamp(10px,2.2vw,16px);font-weight:700;letter-spacing:.04em}.auth-version{top:auto;bottom:1.2%;right:3.5%;opacity:.9}.home-version{top:3.4%;right:3.5%}.profile-version{top:auto;bottom:9.1%;right:4%;font-size:clamp(9px,1.9vw,14px);opacity:.9}.login-hotspots{position:absolute;inset:0;margin:0;pointer-events:none} .login-hotspots input{position:absolute;left:19.2%;width:65.5%;height:4.6%;border:0;outline:0;background:transparent!important;color:#eee;font-size:clamp(16px,3.4vw,29px);line-height:1;padding:0 1%;border-radius:0;box-shadow:none!important;appearance:none;-webkit-appearance:none;pointer-events:auto} #loginUsername{top:70.58%;height:3.35%} .password-wrap{position:static} #loginPassword{top:75.93%;padding-right:2%} .eye-btn{position:absolute;right:10.3%;top:75.55%;height:4.8%;width:10%;border:0;background:transparent;color:transparent;cursor:pointer;pointer-events:auto} .login-submit{position:absolute;left:10.3%;right:10.3%;top:81.35%;height:4.85%;border:0;background:transparent;color:transparent;cursor:pointer;pointer-events:auto} .forgot-btn{position:absolute;left:29%;right:29%;top:87.05%;height:3.1%;border:0;background:transparent;color:transparent;cursor:pointer;pointer-events:auto} .form-error{position:absolute;left:10%;right:10%;top:90.2%;margin:0;text-align:center;color:#ff5a55;font-size:clamp(11px,2vw,16px);text-shadow:0 1px 2px #000;pointer-events:none} .hotspot{position:absolute;border:0;background:transparent;cursor:pointer}.home-news{right:3%;top:40.1%;width:20%;height:4.2%}.home-recent{right:3%;top:70.0%;width:20%;height:4.2%}.nav-home{left:2%;width:23%;bottom:1.8%;height:7.2%}.home-search{left:4%;right:4%;top:17.4%;height:5.2%}.make-request{left:4%;width:45%;top:24%;height:14.4%}.my-requests{right:4%;width:45%;top:24%;height:14.4%}.nav-search{left:25%;width:25%;bottom:1.8%;height:7.2%}.nav-requests{left:50%;width:25%;bottom:1.8%;height:7.2%}.nav-profile{right:2%;width:23%;bottom:1.8%;height:7.2%}.profile-logout{left:3.2%;right:3.2%;top:72.0%;height:6.3%}.profile-home{left:4%;width:22%;bottom:1.5%;height:7.4%}.welcome-overlay{display:none}.legacy-screen{width:100%;min-height:100vh;padding:22px;background:linear-gradient(#090909,#000)}.back-home{border:1px solid #ff6500;background:#111;color:#ff6500;border-radius:10px;padding:10px 14px}.search-bar input{width:100%;margin:20px 0;padding:16px;border:1px solid #ff6500;border-radius:14px;background:#111;color:#fff;font-size:18px}.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.poster-card{background:#111;border:1px solid #5a2a0a;border-radius:12px;overflow:hidden}.poster-card img{width:100%;aspect-ratio:2/3;object-fit:cover}.poster-info{padding:10px}.poster-title{font-weight:700}.poster-year{color:#aaa;font-size:13px}.dashboard h2{color:#ff6500}.stat-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.stat-cards>div{background:#111;border:1px solid #333;padding:14px;border-radius:12px;display:flex;justify-content:space-between}.filter-toggle{display:flex;gap:8px;margin:18px 0}.filter-btn{padding:10px 12px;background:#111;color:#aaa;border:1px solid #333;border-radius:999px}.filter-btn.active{color:#fff;border-color:#ff6500}.request-row{display:grid;grid-template-columns:70px 1fr auto;gap:12px;align-items:center;background:#111;border:1px solid #333;border-radius:12px;margin:10px 0;padding:10px}.request-row img{width:70px;height:100px;object-fit:cover;border-radius:8px}.status-pill,.status-select{font-size:12px}.toast{position:fixed;z-index:50;left:50%;bottom:30px;transform:translateX(-50%);background:#222;border:1px solid #ff6500;padding:12px 18px;border-radius:999px}.modal-overlay{position:fixed;z-index:40;inset:0;background:rgba(0,0,0,.8);display:grid;place-items:center;padding:20px}.modal-card{position:relative;max-width:520px;width:100%;background:#111;border:1px solid #7330aa;border-radius:18px;padding:18px;display:flex;gap:15px}.modal-poster{width:38%;object-fit:cover}.modal-close{position:absolute;right:10px;top:8px;background:none;border:0;color:#fff;font-size:28px}.modal-info button{background:#8b25e5;color:#fff;border:0;padding:12px;border-radius:10px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(min-width:854px){.mobile-shell{box-shadow:0 0 80px rgba(255,101,0,.12)}} /* Écran 03 — reconstruction isolée v0.0.2 */ .request-reference{aspect-ratio:853/1844;background-image:url('/assets/reference/03_faire_une_demande_fond.png')} .request-back{left:1.5%;top:3.7%;width:8%;height:5%;z-index:30} .request-filter{top:21.05%;height:3.4%;z-index:30}.request-filter-all{left:3%;width:15%}.request-filter-movie{left:20%;width:17%}.request-filter-tv{left:38%;width:18%}.request-filter-emby{left:57%;width:31%} .request-search-surface{position:absolute;z-index:20;left:12.2%;top:16.02%;width:70.8%;height:4.15%;background:linear-gradient(90deg,#0b0b0b 0%,#0d0d0d 58%,#0a0a0a 100%);pointer-events:none} .request-search-input{position:absolute;z-index:21;left:13.0%;top:16.66%;width:68.5%;height:2.75%;margin:0;padding:0;border:0;outline:0;background:transparent!important;color:#f4f4f4!important;font:400 clamp(17px,3.05vw,26px)/1.15 Arial,sans-serif;box-shadow:none!important;appearance:none;-webkit-appearance:none;caret-color:#fff} .request-search-input::placeholder{color:#929292;opacity:1} .request-search-input::-webkit-search-cancel-button{display:none} /* Flex, pas Grid : chaque carte garde sa vraie hauteur et pousse la suivante. */ .request-dynamic-results{position:absolute;z-index:25;left:3.05%;right:3.05%;top:28.55%;height:49.15%;overflow-y:auto;overflow-x:hidden;background:#000;padding:0 0 3.2%;display:flex;flex-wrap:wrap;align-content:flex-start;align-items:flex-start;gap:12px 2.4%;scrollbar-width:none} .request-dynamic-results.hidden{display:none!important}.request-dynamic-results::-webkit-scrollbar{display:none} .request-result-card{box-sizing:border-box;width:48.8%;flex:0 0 48.8%;display:block;border:1px solid #8f4319;border-radius:13px;overflow:hidden;background:#070707} .request-result-poster-wrap{position:relative;width:100%;height:0;padding-top:150%;overflow:hidden;background:#111} .request-result-poster{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:center} .request-result-info{display:block;padding:3.4% 5% 4%;background:#070707} .request-result-title{font-size:clamp(14px,2.8vw,22px);line-height:1.15;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .request-result-meta{font-size:clamp(11px,2.1vw,17px);line-height:1.2;color:#aaa;margin-top:2%} .request-result-btn{display:block;width:100%;margin-top:4%;padding:3.2% 2%;border:1px solid #ff6500;border-radius:7px;background:#050505;color:#ff6500;font-weight:700;font-size:clamp(10px,2.05vw,16px)} .request-result-btn.available{border-color:#4d8518;color:#70b82b}.request-empty{width:100%;text-align:center;color:#aaa;padding:12% 5%} .request-nav-home,.request-nav-search,.request-nav-requests,.request-nav-profile{bottom:1.8%;height:7.2%;z-index:30}.request-nav-home{left:2%;width:23%}.request-nav-search{left:25%;width:25%}.request-nav-requests{left:50%;width:25%}.request-nav-profile{right:2%;width:23%} /* Écran 04 — Mes demandes v0.0.2 */ .myrequests-reference{aspect-ratio:853/1844;background-image:url('/assets/reference/04_mes_demandes.png')} .myrequests-back{left:1%;top:3.5%;width:8%;height:5%;z-index:35} .myrequests-live{position:absolute;z-index:24;left:2.6%;right:2.6%;top:16.2%;height:63.6%;background:#000;overflow:hidden} .myrequests-filters{height:5.2%;display:flex;gap:1.2%;align-items:center;overflow-x:auto;scrollbar-width:none;padding:0 .1% 1.1%}.myrequests-filters::-webkit-scrollbar{display:none} .myreq-filter{flex:0 0 auto;height:86%;padding:0 2.8%;border:1px solid #333;border-radius:999px;background:#090909;color:#eee;font-size:clamp(12px,2.35vw,20px);white-space:nowrap}.myreq-filter.active{background:#ff6500;border-color:#ff6500;color:#fff}.myreq-filter span::before{content:' ('}.myreq-filter span::after{content:')'} .myrequests-cards{height:94.8%;overflow-y:auto;scrollbar-width:none;padding:0 0 2.5%}.myrequests-cards::-webkit-scrollbar{display:none} .myreq-card{position:relative;display:grid;grid-template-columns:29.5% 1fr;min-height:19.1%;margin:0 0 1.45%;border:1px solid #5b2a0d;border-radius:14px;overflow:hidden;background:linear-gradient(90deg,#070707,#030303)} .myreq-poster{width:100%;height:100%;min-height:185px;object-fit:cover;background:#111} .myreq-body{min-width:0;padding:4.3% 4.5% 3.6%;display:flex;flex-direction:column} .myreq-title{font-size:clamp(17px,3.2vw,28px);font-weight:700;line-height:1.08;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .myreq-meta{margin-top:2%;color:#c8c8c8;font-size:clamp(11px,2.15vw,18px)} .myreq-status{margin-top:auto;font-size:clamp(12px,2.3vw,19px);font-weight:700;text-transform:uppercase}.myreq-status.pending{color:#ff761b}.myreq-status.in_progress{color:#39aaff}.myreq-status.available{color:#62c52e}.myreq-status.refused{color:#ff3535} .myreq-note{margin-top:2.4%;color:#bbb;font-size:clamp(10px,1.9vw,16px)} .myreq-admin-select{margin-top:auto;width:100%;border:1px solid #ff6500;border-radius:7px;background:#080808;color:#eee;padding:2.6%;font-size:clamp(10px,1.9vw,15px)} .myreq-empty{padding:15% 5%;text-align:center;color:#aaa;font-size:clamp(14px,2.7vw,22px)} .myrequests-new{left:2.5%;right:2.5%;top:80.1%;height:5.4%;z-index:35} .myrequests-nav-home,.myrequests-nav-search,.myrequests-nav-requests,.myrequests-nav-profile{bottom:1.8%;height:7.2%;z-index:35}.myrequests-nav-home{left:2%;width:23%}.myrequests-nav-search{left:25%;width:25%}.myrequests-nav-requests{left:50%;width:25%}.myrequests-nav-profile{right:2%;width:23%} /* Écran 04 — correctif final filtres + bas de page */ .myrequests-live{ left:2.6%; right:2.6%; top:16.2%; height:64.05%; background:#000; overflow:hidden; } .myrequests-filters{ width:100%; height:5.2%; display:grid; grid-template-columns:1.02fr 1.20fr 1.20fr 1.30fr 1.12fr; gap:.75%; align-items:center; overflow:visible; padding:0 0 1.1%; } .myreq-filter{ min-width:0; width:100%; height:86%; padding:0 .25em; font-size:clamp(10px,1.85vw,16px); white-space:nowrap; overflow:visible; } .myrequests-cards{ height:94.8%; overflow-y:auto; overflow-x:hidden; background:#000; padding:0 0 2.5%; } /* Écran 04 — état vide cinéma + correction définitive du bas */ .myrequests-live{ height:64.35%; background:#000; } .myrequests-live::after{ content:""; position:absolute; z-index:-1; left:0;right:0;bottom:0; height:2.5%; background:#000; } .myrequests-cards{position:relative;background:#000;padding-bottom:0} .myreq-empty{ box-sizing:border-box; height:100%; padding:8% 4% 4%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#eee; overflow:hidden; } .myreq-reel-scene{position:relative;width:min(58%,360px);aspect-ratio:1.25/1;margin:-4% auto 5%} .myreq-reel{position:absolute;left:21%;top:4%;width:58%;aspect-ratio:1;border:2px solid #a24a13;border-radius:50%;background:radial-gradient(circle at center,#090909 0 10%,#1a1a1a 11% 18%,#070707 19% 100%);box-shadow:0 0 28px rgba(255,101,0,.16);animation:myreqReelSpin 18s linear infinite} .myreq-reel::before{content:"";position:absolute;inset:8%;border:1px solid #555;border-radius:50%} .myreq-reel::after{content:"";position:absolute;left:43%;top:43%;width:14%;height:14%;border:2px solid #b45a1b;border-radius:50%;background:#050505} .myreq-reel i{position:absolute;width:23%;height:23%;border:2px solid #555;border-radius:50%;background:#000} .myreq-reel i:nth-child(1){left:38.5%;top:10%}.myreq-reel i:nth-child(2){right:12%;top:32%}.myreq-reel i:nth-child(3){right:22%;bottom:11%}.myreq-reel i:nth-child(4){left:22%;bottom:11%}.myreq-reel i:nth-child(5){left:12%;top:32%} .myreq-filmstrip{position:absolute;left:5%;right:2%;bottom:5%;height:25%;border-top:3px solid #a24a13;border-bottom:3px solid #a24a13;border-radius:50%;transform:rotate(-7deg);opacity:.9;overflow:hidden} .myreq-filmstrip b{display:inline-block;width:10%;height:72%;margin:1.7% 2.3%;border:1px solid #a24a13;background:#080808} .myreq-empty-title{font-size:clamp(18px,3.4vw,29px);font-weight:700;line-height:1.2}.myreq-empty-title strong{color:#ff6500} .myreq-empty-subtitle{margin-top:2.2%;color:#aaa;font-size:clamp(12px,2.25vw,19px)} .myreq-empty-action{margin-top:5%;min-width:52%;padding:2.7% 5%;border:1px solid #ff6500;border-radius:10px;background:#ff6500;color:#fff;font-weight:800;font-size:clamp(12px,2.35vw,19px);cursor:pointer;box-shadow:0 0 20px rgba(255,101,0,.16)} .myreq-empty-action:active{transform:scale(.985)} @keyframes myreqReelSpin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){.myreq-reel{animation:none}} /* masque la dernière trace du visuel de référence juste avant l'encart inférieur */ .myrequests-reference::after{content:"";position:absolute;z-index:23;left:2.6%;right:2.6%;top:79.75%;height:.7%;background:#000;pointer-events:none} /* Écran 04 — raccord inférieur propre (sans masquer l'encart CTA) */ .myrequests-live{ height:63.55%; /* 16.2 + 63.55 = 79.75 : la zone dynamique s'arrête avant l'encart */ } .myrequests-reference::after{ content:""; position:absolute; z-index:25; left:2.6%; right:2.6%; top:79.74%; height:.36%; /* couvre uniquement la fine trace du PNG, jusqu'à 80.10% */ background:#000; pointer-events:none; } /* Écran 04 — raccord final validé : aucune trace du décor entre la zone vide et le CTA */ .myrequests-reference::after{ content:""; position:absolute; z-index:25; left:2.6%; right:2.6%; top:79.45%; height:.72%; background:#000; pointer-events:none; } /* Écran 04 — raccord inférieur structurel v0.0.2 Le CTA est désormais un vrai bloc HTML/CSS : plus de raccord dépendant du PNG. */ .myrequests-reference::after{content:none!important;display:none!important} .myrequests-live{top:16.2%;height:63.25%!important;bottom:auto!important} .myrequests-cta{ position:absolute;z-index:30;left:2.6%;right:2.6%;top:79.45%;height:9.15%; box-sizing:border-box;display:flex;align-items:center;justify-content:space-between; padding:0 5.1% 0 5.3%;background:#050505;border:1px solid #6d3212;border-radius:11px; overflow:hidden; } .myrequests-cta::before{content:"";position:absolute;inset:-1px;background:linear-gradient(90deg,rgba(255,101,0,.035),transparent 52%);pointer-events:none} .myrequests-cta-copy{position:relative;z-index:1;display:flex;flex-direction:column;gap:.38em;min-width:0} .myrequests-cta-copy strong{color:#ff6500;font-size:clamp(12px,2.35vw,20px);line-height:1;font-weight:800;white-space:nowrap} .myrequests-cta-copy span{color:#aaa;font-size:clamp(10px,1.85vw,15px);line-height:1.15;white-space:nowrap} .myrequests-cta-arrow{position:relative;z-index:1;flex:0 0 auto;width:10.5%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:#ff6500;color:#fff;font-size:clamp(22px,4.5vw,38px);font-weight:400;line-height:1} .myrequests-new{left:2.6%!important;right:2.6%!important;top:79.45%!important;height:9.15%!important;z-index:36!important} /* ---------- Écran 29 : Catalogue TonTonFlix officiel ---------- */ .catalog-reference{aspect-ratio:851/1847;background-image:url('/assets/reference/29_catalogue_tontonflix_fond.png');background-size:100% auto;background-position:top center;overflow:hidden} .catalog-back{left:1.2%;top:3.3%;width:8%;height:5%;z-index:75} .catalog-dynamic{position:absolute;z-index:35;left:3.2%;right:3.2%;top:17.4%;bottom:10.8%;display:flex;flex-direction:column;gap:1.05%;overflow:hidden} .catalog-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1%;flex:0 0 8.8%;min-height:68px} .catalog-stat{min-width:0;border:1px solid #5a2a0a;border-radius:10px;background:linear-gradient(180deg,rgba(16,16,16,.98),rgba(5,5,5,.98));display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-items:center;column-gap:6%;padding:8% 7%;box-shadow:inset 0 0 18px rgba(255,101,0,.03)} .catalog-stat>span{grid-row:1/3;color:#ff6500;font-size:clamp(18px,4.2vw,34px)} .catalog-stat small{color:#cfcfcf;font-size:clamp(8px,1.65vw,13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .catalog-stat strong{font-size:clamp(14px,3.1vw,25px);font-weight:500;line-height:1;color:#fff} .catalog-stat-sync strong{font-size:clamp(9px,1.7vw,14px);color:#49a7ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .catalog-tools{display:grid;grid-template-columns:1fr 20%;gap:1.4%;flex:0 0 4.9%;min-height:40px} .catalog-search{position:static;width:100%;height:100%;border:1px solid #292929!important;border-radius:9px!important;outline:none;background:#0b0b0b!important;color:#eee!important;padding:0 4%;font-size:clamp(12px,2.25vw,18px);font-family:Arial,sans-serif} .catalog-search::placeholder{color:#777!important;opacity:1} .catalog-filters-btn{height:100%;border:1px solid #ff6500;border-radius:9px;background:#090909;color:#ff6500;font-weight:700;font-size:clamp(10px,1.9vw,15px)} .catalog-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4%;flex:0 0 4.0%;min-height:34px} .catalog-filter{position:static;height:100%;border:1px solid #333;border-radius:999px;background:#090909;color:#ddd;font-size:clamp(10px,1.95vw,16px);cursor:pointer} .catalog-filter.active{background:#ff6500;border-color:#ff6500;color:#fff} .catalog-cards{position:relative;z-index:37;flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:0 0 28%;scrollbar-width:none} .catalog-cards::-webkit-scrollbar{display:none} .catalog-card{display:grid;grid-template-columns:19% minmax(0,1fr) auto;gap:3%;align-items:center;min-height:126px;margin:0 0 1.5%;padding:1.7%;border:1px solid #5a2a0a;border-radius:11px;background:rgba(4,4,4,.96);cursor:pointer} .catalog-card-poster{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:6px;background:#111} .catalog-card-main{min-width:0;align-self:start;padding-top:2%} .catalog-card-title{font-size:clamp(15px,3vw,25px);font-weight:700;line-height:1.08;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .catalog-card-meta{margin-top:2%;color:#aaa;font-size:clamp(10px,1.95vw,16px)} .catalog-card-tags{margin-top:4%;display:flex;gap:4px;flex-wrap:wrap}.catalog-card-tag{padding:.25em .55em;border-radius:999px;background:#171717;color:#bbb;font-size:clamp(8px,1.55vw,12px)} .catalog-card-action{align-self:center;border:1px solid #ff6500;border-radius:7px;background:#070707;color:#ff6500;padding:.85em 1em;font-size:clamp(9px,1.8vw,14px);font-weight:700;white-space:nowrap} .catalog-empty{margin:10% 0;text-align:center;color:#888;font-size:clamp(13px,2.4vw,19px)} .catalog-bottom-decor{position:absolute;z-index:45;left:0;bottom:4.5%;width:100%;height:auto;pointer-events:none;user-select:none} #catalogScreen .canonical-bottom-nav{bottom:1.35%!important;z-index:100!important} @media(max-width:520px){.catalog-card{grid-template-columns:25% minmax(0,1fr);}.catalog-card-action{grid-column:2;width:100%;}.catalog-stat{padding:6% 5%;}.catalog-stat>span{display:none}} /* ---------- Écran 06 : Profil officiel — fond neutre + contenu dynamique ---------- */ #profileScreen.profile-reference{ position:relative; aspect-ratio:853/1844; min-height:0; background-color:#000; background-image:url('/assets/reference/06_profil_fond.png'); background-size:100% auto; background-position:top center; background-repeat:no-repeat; overflow:hidden; } #profileScreen .profile-dynamic{ position:absolute; z-index:35; left:3.2%; right:3.2%; top:clamp(150px,39vw,333px); bottom:calc(var(--ttf-nav-bottom,0px) + var(--ttf-nav-height,84px)); display:flex; flex-direction:column; gap:clamp(7px,1.8vw,14px); overflow-y:auto; overflow-x:hidden; padding:0 0 clamp(120px,29vw,235px); scrollbar-width:none; overscroll-behavior:contain; } #profileScreen .profile-dynamic::-webkit-scrollbar{display:none} .profile-identity-card{ flex:0 0 auto; min-height:clamp(116px,28vw,218px); display:grid; grid-template-columns:clamp(100px,27vw,205px) minmax(0,1fr); align-items:center; gap:clamp(10px,2.6vw,20px); padding:clamp(8px,1.8vw,14px) clamp(12px,2.6vw,22px); border:1px solid rgba(255,255,255,.10); border-radius:clamp(15px,3.5vw,25px); background:linear-gradient(120deg,rgba(20,20,20,.98),rgba(5,5,5,.98)); box-shadow:inset 0 0 30px rgba(255,101,0,.025),0 8px 24px rgba(0,0,0,.38); } .profile-avatar-dynamic{ position:relative; width:100%; aspect-ratio:1/1; display:grid; place-items:center; overflow:hidden; border:3px solid #ff6500; border-radius:50%; background:#070707; box-shadow:0 0 16px rgba(255,101,0,.24); } .profile-avatar-dynamic img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top} .profile-avatar-dynamic span{display:none} .profile-identity-copy{min-width:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:clamp(6px,1.4vw,11px)} .profile-name-row{width:100%;display:flex;align-items:center;gap:8px;min-width:0} .profile-name-row strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;font-size:clamp(22px,5.1vw,40px);line-height:1;font-weight:700} .profile-name-edit{flex:0 0 auto;border:0;background:transparent;color:#ff6500;font-size:clamp(22px,5vw,38px);line-height:1;padding:2px 4px;cursor:pointer} .profile-role-badge{display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:.45em .8em;border:1px solid #6b350d;border-radius:999px;background:rgba(78,35,7,.42);color:#ff7a1a;font-size:clamp(11px,2.45vw,19px);line-height:1;white-space:nowrap} .profile-role-badge span{font-size:1.15em}.profile-role-badge b{font-weight:500;overflow:hidden;text-overflow:ellipsis} .profile-member-since{max-width:100%;color:#aaa;font-size:clamp(10px,2.05vw,16px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .profile-menu-card{ position:relative; flex:0 0 auto; width:100%; min-height:clamp(62px,15vw,116px); display:grid; grid-template-columns:clamp(48px,12vw,92px) minmax(0,1fr) auto auto; align-items:center; gap:clamp(8px,2vw,16px); padding:clamp(7px,1.6vw,13px) clamp(11px,2.5vw,20px); border:1px solid rgba(255,255,255,.09); border-radius:clamp(13px,3vw,22px); background:linear-gradient(120deg,rgba(17,17,17,.985),rgba(5,5,5,.985)); color:#fff; text-align:left; cursor:pointer; box-shadow:inset 0 0 24px rgba(255,101,0,.02); } .profile-menu-card:active{transform:scale(.992)} .profile-card-icon{ width:clamp(44px,10.5vw,82px); aspect-ratio:1/1; display:grid; place-items:center; border:1px solid #5d2c09; border-radius:clamp(10px,2.4vw,17px); color:#ff6500; font-size:clamp(22px,5vw,40px); } .profile-card-icon svg{width:58%;height:58%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .profile-card-copy{min-width:0;display:block} .profile-card-copy strong{display:block;color:#eee;font-size:clamp(15px,3.4vw,27px);line-height:1.05;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .profile-card-copy small{display:block;margin-top:clamp(4px,1vw,8px);color:#aaa;font-size:clamp(9px,2vw,15px);line-height:1.25} .profile-card-arrow{color:#ff6500;font-size:clamp(28px,6vw,46px);font-weight:300;line-height:1} .profile-card-status{padding:.55em .9em;border:1px solid #5f310c;border-radius:999px;color:#ff7a1a;background:rgba(20,12,5,.7);font-size:clamp(9px,1.9vw,14px);white-space:nowrap} .profile-activity-card{min-height:clamp(78px,19vw,146px)} .profile-activity-counts{display:grid;grid-template-columns:1fr;gap:2px;min-width:clamp(86px,20vw,150px);padding:7px 9px;border:1px solid #2a211b;border-radius:10px;background:rgba(5,5,5,.72);font-size:clamp(8px,1.75vw,13px);line-height:1.2;white-space:nowrap} .profile-activity-counts span{display:flex;justify-content:space-between;gap:8px}.profile-activity-counts b{font-weight:500} .profile-activity-counts .pending{color:#ff8a2b}.profile-activity-counts .accepted{color:#35a7ff}.profile-activity-counts .available{color:#78c72a}.profile-activity-counts .refused{color:#ff3138} .profile-admin-card{border-color:rgba(142,58,205,.28)} .profile-card-icon.admin,.profile-card-arrow.admin{color:#a74cff;border-color:#4f2468} .profile-logout-card{border-color:rgba(139,18,18,.55);background:linear-gradient(120deg,rgba(34,8,8,.94),rgba(12,3,3,.985));min-height:clamp(56px,13vw,100px)} .profile-logout-card .profile-card-copy strong,.profile-card-icon.logout,.profile-card-arrow.logout{color:#ff3b3f} .profile-card-icon.logout{border-color:#672023} .profile-bottom-decor{ position:absolute; z-index:800; left:0; width:100%; height:auto; bottom:calc(var(--ttf-nav-bottom,0px) + var(--ttf-nav-height,84px) - clamp(52px,13.8vw,118px)); pointer-events:none; user-select:none; } #profileScreen .canonical-bottom-nav{z-index:1000!important} #profileScreen .cbn-profile{color:#ff6500!important} .profile-version{z-index:850;top:auto;bottom:calc(var(--ttf-nav-bottom,0px) + var(--ttf-nav-height,84px) + 4px);right:3.6%;font-size:clamp(8px,1.75vw,13px);opacity:.9} .profile-legacy-hotspot{display:none!important;pointer-events:none!important} @media(max-width:520px){ #profileScreen .profile-dynamic{top:152px;gap:8px} .profile-identity-card{grid-template-columns:102px minmax(0,1fr);min-height:118px;padding:8px 11px} .profile-menu-card{min-height:63px;padding:7px 10px;grid-template-columns:46px minmax(0,1fr) auto auto;gap:8px} .profile-activity-card{min-height:78px} .profile-card-copy strong{font-size:15px}.profile-card-copy small{font-size:9px} .profile-card-status{font-size:9px;padding:.5em .75em} .profile-activity-counts{min-width:83px;font-size:8px;padding:6px 7px} } /* ---------- Écran 07 : Espace administration ---------- */ #adminScreen.admin-reference{ background:#000 url('/assets/reference/07_espace_administration_haut.png') top center/100% auto no-repeat!important; min-height:100dvh!important;height:100dvh!important;max-height:100dvh!important; aspect-ratio:auto!important;overflow:hidden!important; } #adminScreen .admin-back{ left:1.5%!important;top:2.8%!important;width:8.8%!important;height:7%!important;z-index:90!important; } #adminScreen .admin-dynamic{ position:absolute;z-index:20;left:3.5%;right:3.5%;top:31.2%; bottom:calc(var(--ttf-nav-height,84px) + 0.9dvh); overflow-y:auto;overflow-x:hidden;scrollbar-width:none; padding:0 0 clamp(120px,30vw,155px); overscroll-behavior:contain;-webkit-overflow-scrolling:touch; } #adminScreen .admin-dynamic::-webkit-scrollbar{display:none} #adminScreen .admin-panel, #adminScreen .admin-action-card{ background:linear-gradient(180deg,rgba(16,16,16,.985),rgba(7,7,7,.985)); border:1px solid rgba(255,101,0,.22);border-radius:11px; box-shadow:0 7px 18px rgba(0,0,0,.36); } #adminScreen .admin-dashboard-panel{padding:0 7px 7px;margin-bottom:8px;overflow:hidden} #adminScreen .admin-panel-heading{ min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:8px; padding:8px 7px 5px;border-bottom:1px solid rgba(255,255,255,.07);margin:0; } #adminScreen .admin-panel-heading h2{margin:0;color:#ff7a1a;font-size:clamp(12px,3.2vw,15px);line-height:1.1;font-weight:800} #adminScreen .admin-dashboard-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:8px 0 2px} #adminScreen .admin-stat{ min-width:0;min-height:104px;border-radius:9px;border:1px solid rgba(255,255,255,.10); display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center; padding:10px 4px 8px;background:rgba(4,4,4,.78); } #adminScreen .admin-stat-icon{ width:30px;height:30px;border:2px solid currentColor;border-radius:50%;display:grid;place-items:center; font-size:18px;line-height:1;margin-bottom:5px;font-weight:700;color:#ff6500; } #adminScreen .admin-stat-sync .admin-stat-icon{color:#68c821} #adminScreen .admin-stat-users .admin-stat-icon{color:#ff6500} #adminScreen .admin-stat-value{display:block;color:#fff;font-size:clamp(18px,5.3vw,27px);line-height:1.05;font-weight:700} #adminScreen .admin-stat-value-sync{font-size:clamp(17px,4.5vw,24px)} #adminScreen .admin-stat-label{display:block;min-height:28px;margin-top:5px;color:#d0d0d0;font-size:clamp(7px,1.95vw,9.2px);line-height:1.18} #adminScreen .admin-stat-label-sync b{color:#68c821;font-weight:800} #adminScreen .admin-action-card{ width:100%;appearance:none;-webkit-appearance:none;border-radius:11px;display:grid; grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:10px; padding:10px 11px;margin-bottom:8px;color:#fff;text-align:left;cursor:pointer; } #adminScreen .admin-action-icon{ width:54px;height:54px;display:grid;place-items:center;border-radius:17px; border:1px solid rgba(255,101,0,.38);background:rgba(10,10,10,.82); color:#ff7a1a;font-size:clamp(24px,5.3vw,34px);line-height:1;font-weight:700; } #adminScreen .admin-action-copy{min-width:0;display:flex;flex-direction:column;gap:4px} #adminScreen .admin-action-copy strong{display:block;font-size:clamp(10px,3vw,14px);line-height:1.12;font-weight:700} #adminScreen .admin-action-copy small{display:block;color:#cfcfcf;font-size:clamp(8px,2vw,10px);line-height:1.25} #adminScreen .admin-action-side{display:flex;align-items:center;gap:10px;justify-self:end;padding-left:6px} #adminScreen .admin-action-count{ min-width:38px;height:38px;padding:0 10px;border-radius:999px;display:grid;place-items:center; background:rgba(255,138,0,.16);border:1px solid rgba(255,138,0,.28); color:#ffbe39;font-size:clamp(18px,4vw,26px);font-weight:800; } #adminScreen .admin-action-chevron{display:block;color:#ff7a1a;font-size:clamp(26px,5.8vw,38px);line-height:1;font-weight:700} #adminScreen .admin-bottom-decor-wrap{ position:absolute;z-index:26;left:0;right:0;bottom:calc(var(--ttf-nav-height,84px) - clamp(26px,6.5vw,32px)); height:clamp(154px,39vw,198px);overflow:hidden;pointer-events:none;user-select:none; -webkit-mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.18) 10%, rgba(0,0,0,.55) 18%, #000 30%, #000 100%); mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.18) 10%, rgba(0,0,0,.55) 18%, #000 30%, #000 100%); } #adminScreen .admin-bottom-decor{ position:absolute;left:50%;bottom:0;width:min(132%,1160px);height:auto;max-width:none;object-fit:cover;object-position:center bottom; transform:translateX(-50%);display:block; } #adminScreen .canonical-bottom-nav{z-index:100!important} #adminScreen .cbn-profile{color:#ff6500} @media(max-width:430px){ #adminScreen .admin-dynamic{top:30.8%;padding-bottom:clamp(118px,30vw,150px)} #adminScreen .admin-panel-heading{min-height:44px} #adminScreen .admin-dashboard-grid{gap:4px} #adminScreen .admin-stat{min-height:100px} #adminScreen .admin-stat-icon{width:28px;height:28px;font-size:16px} #adminScreen .admin-action-card{grid-template-columns:56px minmax(0,1fr) auto;gap:9px;padding:9px 10px} #adminScreen .admin-action-icon{width:48px;height:48px;border-radius:15px;font-size:clamp(21px,4.9vw,28px)} #adminScreen .admin-action-side{gap:8px;padding-left:4px} } /* ---------- Écran 28 : Gestion des rôles utilisateurs ---------- */ #rolesScreen.roles-reference{ background:#000 url('/assets/reference/28_gestion_roles_utilisateurs_haut.png') top center/100% auto no-repeat!important; aspect-ratio:853/1844; overflow:hidden!important; } #rolesScreen .roles-back{left:1.8%;top:2.7%;width:8.8%;height:6.4%;z-index:90} #rolesScreen .roles-dynamic{ position:absolute;z-index:20;left:3.5%;right:3.5%;top:24.2%; bottom:calc(var(--ttf-nav-height,84px) + 1.2%); overflow-y:auto;overflow-x:hidden;scrollbar-width:none; padding:0 0 clamp(185px,46vw,255px); overscroll-behavior:contain;-webkit-overflow-scrolling:touch; } #rolesScreen .roles-dynamic::-webkit-scrollbar{display:none} #rolesScreen .roles-panel{ background:linear-gradient(180deg,rgba(16,16,16,.985),rgba(7,7,7,.985)); border:1px solid rgba(255,101,0,.24);border-radius:12px; box-shadow:0 7px 18px rgba(0,0,0,.36);padding:0 10px 10px;margin-bottom:10px; } #rolesScreen .roles-panel-heading{ min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:8px; padding:9px 4px 6px;border-bottom:1px solid rgba(255,255,255,.07);margin:0 0 8px; } #rolesScreen .roles-panel-heading-slim{min-height:40px} #rolesScreen .roles-panel-heading h2{margin:0;color:#ff7a1a;font-size:clamp(12px,3.2vw,15px);line-height:1.1;font-weight:800} #rolesScreen .roles-intro{margin:0 4px 10px;color:#d7d7d7;font-size:clamp(9px,2.2vw,12px);line-height:1.38} #rolesScreen .roles-alert{ display:grid;grid-template-columns:34px minmax(0,1fr);gap:9px;align-items:center; margin:0 0 10px;padding:10px;border-radius:10px; border:1px solid rgba(255,131,51,.28);background:linear-gradient(180deg,rgba(61,28,8,.46),rgba(14,9,4,.82)); } #rolesScreen .roles-alert-icon{ width:32px;height:32px;border-radius:50%;display:grid;place-items:center; border:1px solid rgba(255,131,51,.38);background:rgba(23,12,5,.88);font-size:17px;color:#ffb05c; } #rolesScreen .roles-alert-copy{min-width:0;display:flex;flex-direction:column;gap:3px} #rolesScreen .roles-alert-copy strong{color:#ffb05c;font-size:clamp(9px,2.25vw,11px);line-height:1.2} #rolesScreen .roles-alert-copy small{color:#d1d1d1;font-size:clamp(8px,1.95vw,10px);line-height:1.25} #rolesScreen .roles-search-shell{ display:grid;grid-template-columns:20px minmax(0,1fr);align-items:center;gap:8px; padding:10px 11px;border-radius:10px;border:1px solid rgba(255,255,255,.09);background:rgba(9,9,9,.82); color:#8f8f8f; } #rolesScreen .roles-search-shell input{ width:100%;border:0;outline:none;background:transparent;color:#f2f2f2; font-size:clamp(10px,2.35vw,12px);pointer-events:none; } #rolesScreen .roles-user-list{display:flex;flex-direction:column} #rolesScreen .roles-user-row{ display:grid;grid-template-columns:38px minmax(0,1fr) auto 14px;align-items:center;gap:9px; min-height:56px;padding:8px 4px;border-bottom:1px solid rgba(255,255,255,.06); } #rolesScreen .roles-user-row:last-child{border-bottom:0} #rolesScreen .roles-user-row-button{ width:100%;appearance:none;-webkit-appearance:none;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer; } #rolesScreen .roles-user-avatar{ width:38px;height:38px;border-radius:50%;display:grid;place-items:center; font-size:12px;font-weight:800;color:#fff;border:1px solid rgba(255,255,255,.14);overflow:hidden; } #rolesScreen .roles-user-avatar.large{width:48px;height:48px;font-size:14px} #rolesScreen .roles-user-avatar-damien{background:linear-gradient(135deg,#ff8d3a,#6e2d08)} #rolesScreen .roles-user-avatar-sophie{background:linear-gradient(135deg,#ffd36d,#8c5b11)} #rolesScreen .roles-user-avatar-leo{background:linear-gradient(135deg,#ffab6e,#934c17)} #rolesScreen .roles-user-avatar-emma{background:linear-gradient(135deg,#ff7a1a,#7d3000)} #rolesScreen .roles-user-avatar-thomas{background:linear-gradient(135deg,#d69348,#6b4013)} #rolesScreen .roles-user-avatar-julie{background:linear-gradient(135deg,#ffb86d,#7b4110)} #rolesScreen .roles-user-copy{min-width:0;display:flex;flex-direction:column;gap:2px} #rolesScreen .roles-user-copy strong{display:block;color:#fff;font-size:clamp(11px,2.9vw,13px);line-height:1.1;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #rolesScreen .roles-user-copy small{display:block;color:#b3b3b3;font-size:clamp(8px,2vw,10px);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #rolesScreen .roles-user-role{ padding:.5em .8em;border-radius:999px;border:1px solid rgba(255,255,255,.12); background:rgba(27,27,27,.84);color:#ddd;font-size:clamp(8px,1.9vw,9.5px);white-space:nowrap; } #rolesScreen .roles-user-role.is-admin{border-color:rgba(255,131,51,.34);background:rgba(60,24,6,.62);color:#ffb05c} #rolesScreen .roles-user-chevron{color:#ff7a1a;font-size:clamp(18px,4vw,24px);line-height:1} #rolesScreen .roles-selected-badge{color:#ffb05c;font-size:clamp(8px,1.8vw,9px);font-weight:700} #rolesScreen .roles-selected-summary{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-bottom:10px} #rolesScreen .roles-selected-identity{display:grid;grid-template-columns:48px minmax(0,1fr);gap:10px;align-items:center} #rolesScreen .roles-current-role-card{ display:grid;grid-template-columns:32px minmax(0,1fr);gap:9px;align-items:center;padding:10px; border-radius:10px;border:1px solid rgba(255,131,51,.25);background:linear-gradient(180deg,rgba(60,24,8,.38),rgba(12,8,6,.78)); } #rolesScreen .roles-current-role-icon{ width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,131,51,.35);background:rgba(23,11,5,.85);color:#ffb05c; } #rolesScreen .roles-current-role-card strong{display:block;color:#ffb05c;font-size:clamp(10px,2.5vw,12px)} #rolesScreen .roles-current-role-card small{display:block;color:#d9d9d9;font-size:clamp(8px,1.95vw,10px);line-height:1.25;margin-top:2px} #rolesScreen .roles-role-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} #rolesScreen .roles-choice-card{ position:relative;padding:11px 10px 10px;border-radius:11px;border:1px solid rgba(255,255,255,.1);background:rgba(8,8,8,.8); min-height:96px;display:flex;flex-direction:column;gap:5px; } #rolesScreen .roles-choice-card strong{color:#fff;font-size:clamp(10px,2.6vw,12px)} #rolesScreen .roles-choice-card small{color:#d0d0d0;font-size:clamp(8px,1.95vw,10px);line-height:1.25} #rolesScreen .roles-choice-card.selected{border-color:rgba(255,131,51,.52);box-shadow:0 0 0 1px rgba(255,131,51,.15) inset;background:linear-gradient(180deg,rgba(60,24,8,.34),rgba(10,8,7,.84))} #rolesScreen .roles-choice-card.selected strong{color:#ffb05c} #rolesScreen .roles-choice-card.muted{opacity:.92} #rolesScreen .roles-choice-check{position:absolute;right:9px;top:8px;color:#ffb05c;font-size:14px;line-height:1} #rolesScreen .roles-choice-check.hollow{color:#6b6b6b} #rolesScreen .roles-primary-button, #rolesScreen .roles-secondary-button{ width:100%;appearance:none;-webkit-appearance:none;border-radius:12px;cursor:pointer; display:flex;align-items:center;justify-content:center;text-align:center; font-size:clamp(11px,3vw,14px);font-weight:800;letter-spacing:.02em; margin-bottom:10px;padding:14px 12px; } #rolesScreen .roles-primary-button{ border:1px solid rgba(255,255,255,.12);color:#fff;background:linear-gradient(180deg,#ff8b2d,#db5c00); box-shadow:0 0 18px rgba(255,101,0,.22); } #rolesScreen .roles-secondary-button{ border:1px solid rgba(255,131,51,.36);color:#ffe4cb;background:linear-gradient(180deg,#4b2b12,#24140a); box-shadow:0 0 18px rgba(255,101,0,.08); } #rolesScreen .roles-primary-button:active, #rolesScreen .roles-secondary-button:active{transform:scale(.985)} #rolesScreen .roles-bottom-decor-wrap{ position:absolute;z-index:26;left:0;right:0;bottom:calc(var(--ttf-nav-height,84px) - clamp(26px,6.5vw,32px)); height:clamp(156px,39vw,205px);overflow:hidden;pointer-events:none;user-select:none; -webkit-mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.18) 10%, rgba(0,0,0,.55) 18%, #000 30%, #000 100%); mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.18) 10%, rgba(0,0,0,.55) 18%, #000 30%, #000 100%); } #rolesScreen .roles-bottom-decor{ position:absolute;left:50%;bottom:0;width:min(132%,1160px);height:auto;max-width:none;object-fit:cover;object-position:center bottom; transform:translateX(-50%);display:block; } #rolesScreen .canonical-bottom-nav{z-index:100!important} #rolesScreen .cbn-profile{color:#ff6500} @media(max-width:430px){ #rolesScreen .roles-dynamic{top:23.5%;padding-bottom:clamp(180px,45vw,245px)} #rolesScreen .roles-panel{padding:0 8px 8px;margin-bottom:8px} #rolesScreen .roles-user-row{grid-template-columns:34px minmax(0,1fr) auto 12px;gap:7px;min-height:52px;padding:7px 3px} #rolesScreen .roles-user-avatar{width:34px;height:34px;font-size:11px} #rolesScreen .roles-user-avatar.large{width:42px;height:42px;font-size:13px} #rolesScreen .roles-role-choices{gap:6px} #rolesScreen .roles-choice-card{min-height:92px;padding:10px 8px 9px} #rolesScreen .roles-primary-button, #rolesScreen .roles-secondary-button{margin-bottom:8px;padding:13px 10px} } /* Navigation officielle TonTonFlix — 5 onglets, commune à tous les panneaux */ .canonical-bottom-nav{position:absolute;left:3.2%;right:3.2%;bottom:1.35%;height:7.9%;z-index:90;display:grid;grid-template-columns:repeat(5,1fr);align-items:center;padding:.35% 1.1%;border:1px solid rgba(255,255,255,.10);border-radius:clamp(20px,5vw,42px);background:linear-gradient(180deg,rgba(22,22,22,.99),rgba(8,8,8,.99));box-shadow:0 -8px 24px rgba(0,0,0,.75)} .cbn-item{position:relative;height:100%;border:0;background:transparent;color:#8e8e8e;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.08em;font:inherit;font-size:clamp(9px,2.25vw,17px);cursor:pointer;padding:0} .cbn-icon{display:block;color:inherit;font-family:Arial,sans-serif;font-weight:700;font-size:clamp(22px,5.1vw,39px);line-height:.9} .cbn-badge{position:absolute;top:4%;left:58%;min-width:1.45em;height:1.45em;padding:0 .3em;border-radius:999px;background:#ed1c24;color:#fff;display:grid;place-items:center;font-size:.78em;line-height:1} #appScreen .cbn-home,#requestScreen .cbn-requests,#myRequestsScreen .cbn-requests,#catalogScreen .cbn-library,#profileScreen .cbn-profile,#adminScreen .cbn-profile,#rolesScreen .cbn-profile{color:#ff6500} /* Neutralise les anciens hotspots 4 onglets : la barre officielle ci-dessus prend le relais. */ .nav-home,.nav-search,.nav-requests,.nav-profile,.request-nav-home,.request-nav-search,.request-nav-requests,.request-nav-profile,.myrequests-nav-home,.myrequests-nav-search,.myrequests-nav-requests,.myrequests-nav-profile,.catalog-nav-home,.catalog-nav-search,.catalog-nav-requests,.catalog-nav-profile,.profile-home,.profile-nav-search,.profile-nav-requests,.admin-nav-home,.admin-nav-search,.admin-nav-requests,.admin-nav-profile,.roles-nav-home,.roles-nav-search,.roles-nav-requests,.roles-nav-profile{pointer-events:none!important} /* Aide contextuelle déplacée vers Paramètres > Aide. IMPORTANT : masques décoratifs sous les couches interactives. */ .request-reference::after{content:"";position:absolute;z-index:10;left:2.6%;right:2.6%;top:76.85%;height:8.15%;background:#000;border-radius:10px;pointer-events:none!important} .myrequests-reference::before{content:"";position:absolute;z-index:10;left:2.6%;right:2.6%;top:79.35%;height:9.45%;background:#000;border-radius:10px;pointer-events:none!important} .myrequests-live{height:63.15%!important} .myrequests-cta,.myrequests-new{display:none!important} /* Les contrôles de Faire une demande restent explicitement au-dessus du décor. */ .request-back,.request-filter{pointer-events:auto!important;z-index:60!important} .request-search-input{pointer-events:auto!important;z-index:61!important} .request-dynamic-results{z-index:50!important} .canonical-bottom-nav{pointer-events:auto!important;z-index:100!important} .canonical-bottom-nav .cbn-item{pointer-events:auto!important} .account-reference{aspect-ratio:853/1844;background-image:url('/assets/reference/13_mon_compte.png')} .account-back{left:1%;top:3%;width:8%;height:7%}.account-avatar{left:65%;top:18%;width:29%;height:6%}.account-firstname{left:5%;top:27%;width:90%;height:5.5%}.account-identifier{left:5%;top:32.5%;width:90%;height:5.5%}.account-email{left:5%;top:38%;width:90%;height:5.5%}.account-password{left:5%;top:43.5%;width:90%;height:6%}.account-notifications{left:5%;top:57%;width:90%;height:6%}.account-sessions{left:50%;top:70%;width:44%;height:5%} /* Écran 14 — Notifications */ .notifications-reference{aspect-ratio:853/1844;background-image:url('/assets/reference/14_notifications.png')} .notifications-back{left:1%;top:3%;width:8%;height:7%;z-index:60} .notifications-all-app{right:5%;top:22%;width:22%;height:4%;z-index:60} .notifications-app-1{right:5%;top:27%;width:13%;height:5%}.notifications-app-2{right:5%;top:32%;width:13%;height:5%}.notifications-app-3{right:5%;top:37%;width:13%;height:5%}.notifications-app-4{right:5%;top:42%;width:13%;height:5%}.notifications-app-5{right:5%;top:47%;width:13%;height:5%} .notifications-all-email{right:5%;top:53%;width:22%;height:4%;z-index:60} .notifications-email-1{right:5%;top:58%;width:13%;height:5%}.notifications-email-2{right:5%;top:63%;width:13%;height:5%}.notifications-email-3{right:5%;top:68%;width:13%;height:5%}.notifications-email-4{right:5%;top:73%;width:13%;height:5%} .notifications-reference .cbn-profile{color:#ff6500} /* Écran 15 — Mon activité */ .activity-reference{aspect-ratio:853/1844;background-image:url('/assets/reference/15_mon_activite.png')} .activity-back{left:1%;top:3%;width:8%;height:7%;z-index:60} .activity-all-requests{right:3%;top:33%;width:34%;height:5%;z-index:60} .activity-reference .cbn-profile{color:#ff6500} /* Écran 16 — Ajouter un utilisateur */ .add-user-reference{aspect-ratio:853/1844;background-image:url('/assets/reference/16_ajouter_utilisateur.png')} .add-user-back{left:1%;top:3%;width:8%;height:7%;z-index:60} .add-user-form{left:4%;right:4%;top:23%;height:56%;z-index:40} .add-user-cancel{left:35%;right:35%;top:75%;height:5%;z-index:60} .add-user-reference .cbn-profile{color:#ff6500} /* Écran 17 : Modifier un utilisateur */ .edit-user-reference{aspect-ratio:853/1844;background-image:url('/assets/reference/17_modifier_utilisateur.png')} .edit-user-back{left:1.5%;top:3.4%;width:9%;height:5%} .edit-user-save{left:5.5%;right:5.5%;top:52.5%;height:5.2%} .edit-user-reset{left:5%;right:5%;top:62.2%;height:5.2%} .edit-user-disable{left:5%;right:5%;top:67.4%;height:5.2%} .edit-user-delete{left:5%;right:5%;top:72.6%;height:5.2%} .edit-user-reference .cbn-profile{color:#ff6500} .roles-edit-user{left:5%;right:5%;top:30%;height:29%;z-index:3} /* Screen 18 — reset password */ .reset-password-reference{aspect-ratio:853/1844;background-image:url('/assets/reference/18_reinitialiser_mot_de_passe.png')} .reset-password-back{left:1.5%;top:3.4%;width:9%;height:5%} .reset-password-form{left:6%;right:6%;top:34%;height:20%} .reset-password-force{left:6%;right:6%;top:55%;height:9%} .reset-password-submit{left:6%;right:6%;top:71.5%;height:5.5%} .reset-password-cancel{left:35%;right:35%;top:77%;height:4%} .reset-password-reference .cbn-profile{color:#ff6500} /* Écran 19 — Détail demande admin */ .admin-request-detail-reference{aspect-ratio:1024/1536;background-image:url('/assets/reference/19_detail_demande_admin.png')} .admin-request-detail-close{left:76%;top:10%;width:7%;height:6%;z-index:70} .admin-request-accept{left:20%;top:56%;width:61%;height:6%;z-index:70} .admin-request-reject{left:20%;top:63%;width:61%;height:13%;z-index:70} .admin-request-available{left:20%;top:77%;width:61%;height:6%;z-index:70} .admin-request-close-bottom{left:20%;top:84%;width:61%;height:5%;z-index:70} /* Écran 20 — Configuration Emby */ .emby-config-reference{aspect-ratio:853/1844;background-image:url('/assets/reference/20_configuration_emby.png')} .emby-config-back{left:2%;top:3.5%;width:8%;height:5%} .emby-config-test{left:7%;top:67%;width:86%;height:5%} .emby-config-save{left:6%;top:75%;width:88%;height:5%} .emby-config-cancel{left:38%;top:80%;width:24%;height:4%} .emby-config-reference .canonical-bottom-nav{bottom:1.7%} .emby-config-reference .cbn-profile{color:#a74cff} /* FIX navigation Recherche officielle + écran 04 décor bas */ .search-reference{aspect-ratio:1024/1536;background-image:url('/assets/reference/05_recherche.png')} .main-search-input{position:absolute;z-index:36;left:14%;top:15.8%;width:70%;height:4.5%;border:0;outline:0;background:transparent;color:#eee;font-size:clamp(15px,2.7vw,24px);font-family:Arial,sans-serif;padding:0} .main-search-input::placeholder{color:transparent} .search-bottom-mask{position:absolute;z-index:32;left:0;right:0;bottom:0;height:10.4%;background:#000;pointer-events:none} .search-canonical-nav{z-index:40!important} .search-canonical-nav .cbn-search{color:#ff6500} /* La zone dynamique s'arrête avant le décor inférieur validé (toupie). */ .myrequests-live{height:58.6%!important} .myrequests-cards{height:94.8%!important} /* ACCUEIL 02 VALIDÉ — visuel définitif intégré sans zoom ni masque. */ .home-search{display:none!important} .home-reference::before,.home-reference::after{display:none!important;content:none!important} /* Recherche : le visuel 05 garde strictement son ratio 1024/1536. Le panneau n'est plus forcé au ratio 853/1844 et n'est jamais étiré. */ .search-reference{ aspect-ratio:1024/1536!important; min-height:0!important; background-image:url('/assets/reference/05_recherche.png')!important; background-size:100% auto!important; background-position:top center!important; background-repeat:no-repeat!important; } .main-search-input{top:15.8%!important} .search-bottom-mask{display:none!important} .search-reference .canonical-bottom-nav{bottom:1.7%!important} .search-canonical-nav .cbn-search{color:#ff6500} /* 05 RECHERCHE VALIDÉ — 13/08/2026 Visuel sans barre inférieure dessinée : la navigation canonique HTML occupe l'espace réservé. */ .search-reference{ aspect-ratio:853/1844!important; min-height:0!important; background-image:url('/assets/reference/05_recherche.png')!important; background-size:100% 100%!important; background-position:top center!important; background-repeat:no-repeat!important; } .search-bottom-mask{display:none!important} .search-reference .canonical-bottom-nav{bottom:1.7%!important;z-index:40!important} .search-canonical-nav .cbn-search{color:#ff6500!important} .main-search-input{left:13%;top:13.2%!important;width:72%;height:4.2%} /* 05 RECHERCHE — dégager davantage le décor cinéma inférieur. Correction CODE uniquement : le visuel validé reste inchangé. */ .search-reference .canonical-bottom-nav{ bottom:.35%!important; height:6.7%!important; padding:.20% 1.1%!important; } /* 05 RECHERCHE — correctif final code uniquement. 1) La barre canonique reste STRICTEMENT identique à tous les autres panneaux. 2) Le champ HTML masque le faux placeholder dessiné dans la plaquette afin d'éviter la superposition. */ .search-reference .canonical-bottom-nav{ bottom:1.35%!important; height:7.9%!important; padding:.35% 1.1%!important; } .main-search-input{ left:13.8%!important; top:12.72%!important; width:72.5%!important; height:3.55%!important; padding:0 .6%!important; border:0!important; border-radius:0!important; outline:0!important; background:#0b0b0b!important; color:#f2f2f2!important; caret-color:#ff6500!important; font-size:clamp(15px,2.7vw,24px)!important; line-height:1!important; box-shadow:none!important; appearance:none!important; -webkit-appearance:none!important; } .main-search-input::placeholder{color:#929292!important;opacity:1!important} .main-search-input::-webkit-search-cancel-button{display:none!important} /* 05 RECHERCHE — alignement final du vrai champ sur la plaquette. Code uniquement. La barre de navigation reste la barre canonique commune. */ .search-reference .canonical-bottom-nav{ left:3.2%!important; right:3.2%!important; bottom:1.35%!important; height:7.9%!important; padding:.35% 1.1%!important; } .main-search-input{ left:13.75%!important; top:12.72%!important; width:72.35%!important; height:3.55%!important; padding:0 .65%!important; background:#080909!important; border:0!important; border-radius:0!important; box-shadow:none!important; outline:none!important; color:#f2f2f2!important; caret-color:#ff6500!important; } /* 05 RECHERCHE — champ dynamique final. Au repos le champ est transparent et laisse voir la plaquette. Au focus / pendant la saisie, le fond noir du champ masque le texte imprimé dans la plaquette. La navigation reprend EXACTEMENT la règle canonique commune. */ .search-reference .canonical-bottom-nav{ left:3.2%!important; right:3.2%!important; bottom:1.35%!important; height:7.9%!important; padding:.35% 1.1%!important; z-index:100!important; } .main-search-input{ background:transparent!important; border:0!important; box-shadow:none!important; outline:0!important; } .main-search-input::placeholder{color:transparent!important} .main-search-input:focus, .main-search-input:not(:placeholder-shown){ background:#000!important; } .main-search-input:focus::placeholder{color:#929292!important;opacity:1!important} /* 05 RECHERCHE — correction réelle du champ (13/08/2026). IMPORTANT : au focus vide, on ne masque RIEN et le placeholder HTML reste invisible. Le masque n'apparaît qu'une fois qu'une vraie valeur est saisie. */ .main-search-input, .main-search-input:focus{ background:transparent!important; border:0!important; box-shadow:none!important; outline:0!important; } .main-search-input::placeholder, .main-search-input:focus::placeholder{ color:transparent!important; opacity:0!important; } .main-search-input:not(:placeholder-shown){ background:#000!important; } /* FIX 04 Mes demandes — état vide : masque intégral des cartes imprimées de la plaquette. La barre canonique reste STRICTEMENT inchangée. */ #myRequestsScreen .myrequests-live{ top:16.2%!important; height:69.6%!important; bottom:auto!important; background:#000!important; overflow:hidden!important; z-index:24!important; } #myRequestsScreen .myrequests-cards{ height:94.8%!important; background:#000!important; overflow-y:auto!important; overflow-x:hidden!important; } #myRequestsScreen .myreq-empty{ height:100%!important; box-sizing:border-box!important; } /* Neutralise les anciens masques/CTA qui pouvaient créer une bande parasite. */ #myRequestsScreen.myrequests-reference::before, #myRequestsScreen.myrequests-reference::after{ content:none!important; display:none!important; } #myRequestsScreen .myrequests-cta, #myRequestsScreen .myrequests-new{display:none!important} /* FIX 04 ciblé v2 — ne masque QUE les anciennes cartes imprimées. Préserve intégralement le décor inférieur et la barre canonique. */ #myRequestsScreen .myrequests-live{ top:16.2%!important; height:63.15%!important; bottom:auto!important; background:#000!important; overflow:hidden!important; } #myRequestsScreen .myrequests-cards{ height:94.8%!important; background:#000!important; overflow-y:auto!important; overflow-x:hidden!important; } #myRequestsScreen.myrequests-reference::before{ content:""!important; display:block!important; position:absolute!important; z-index:23!important; left:2.6%!important; right:2.6%!important; top:79.2%!important; height:8.35%!important; background:#000!important; border-radius:0!important; pointer-events:none!important; } #myRequestsScreen.myrequests-reference::after{content:none!important;display:none!important} /* FIX 04 v3 — le décor inférieur de la plaquette repasse DEVANT la zone noire. On réaffiche uniquement la tranche basse de 04_mes_demandes.png en premier plan. La barre canonique reste au-dessus et n'est pas modifiée. */ #myRequestsScreen.myrequests-reference::before{ content:""!important; display:block!important; position:absolute!important; z-index:23!important; left:0!important; right:0!important; top:79.2%!important; bottom:6.9%!important; height:auto!important; background-image:url('/assets/reference/04_mes_demandes.png')!important; background-size:100% 100%!important; background-position:center center!important; background-repeat:no-repeat!important; clip-path:inset(79.2% 0 6.9% 0)!important; transform:scaleY(4.55)!important; transform-origin:center 79.2%!important; pointer-events:none!important; } #myRequestsScreen .canonical-bottom-nav{z-index:60!important} /* ========================================================== ÉCRAN 04 — 04_mes_demandes.png VALIDÉ (13/08/2026) Nouveau fond propre : aucun ancien contenu à masquer. La zone dynamique s'arrête avant le décor cinéma inférieur. ========================================================== */ #myRequestsScreen.myrequests-reference::before, #myRequestsScreen.myrequests-reference::after{ content:none!important; display:none!important; background:none!important; clip-path:none!important; transform:none!important; } #myRequestsScreen .myrequests-live{ left:2.6%!important; right:2.6%!important; top:16.2%!important; height:54.5%!important; bottom:auto!important; z-index:24!important; background:#000!important; overflow:hidden!important; } #myRequestsScreen .myrequests-cards{ height:94.8%!important; overflow-y:auto!important; overflow-x:hidden!important; background:#000!important; padding-bottom:0!important; } #myRequestsScreen .myreq-empty{ height:100%!important; box-sizing:border-box!important; padding:6% 4% 3%!important; } #myRequestsScreen .myrequests-cta, #myRequestsScreen .myrequests-new{ display:none!important; } #myRequestsScreen .canonical-bottom-nav{ z-index:60!important; } /* ============================================================ ÉCRAN 05 — 05_recherche.png VALIDÉ (13/08/2026) Fond épuré : aucune carte de résultat ni barre basse dessinée. Le champ HTML reste réel et la navigation canonique reste commune. Ce bloc final neutralise les anciens correctifs de masquage du visuel précédent. ============================================================ */ #searchScreen.search-reference{ aspect-ratio:853/1844!important; min-height:0!important; background-image:url('/assets/reference/05_recherche.png')!important; background-size:100% 100%!important; background-position:top center!important; background-repeat:no-repeat!important; } #searchScreen .search-bottom-mask{display:none!important} #searchScreen .main-search-input, #searchScreen .main-search-input:focus, #searchScreen .main-search-input:not(:placeholder-shown){ position:absolute!important; z-index:61!important; left:13.25%!important; top:13.35%!important; width:72.7%!important; height:4.05%!important; margin:0!important; padding:0 .6%!important; border:0!important; border-radius:0!important; outline:0!important; background:transparent!important; color:#f2f2f2!important; caret-color:#ff6500!important; font:400 clamp(15px,2.7vw,24px)/1 Arial,sans-serif!important; box-shadow:none!important; appearance:none!important; -webkit-appearance:none!important; } #searchScreen .main-search-input::placeholder, #searchScreen .main-search-input:focus::placeholder{ color:#929292!important; opacity:1!important; } #searchScreen .main-search-input::-webkit-search-cancel-button{display:none!important} #searchScreen .canonical-bottom-nav{ left:3.2%!important; right:3.2%!important; bottom:1.35%!important; height:7.9%!important; padding:.35% 1.1%!important; z-index:100!important; } #searchScreen .search-canonical-nav .cbn-search{color:#ff6500!important} /* 05 RECHERCHE — champ + filtres interactifs (13/08/2026) */ #searchScreen .main-search-input, #searchScreen .main-search-input:focus, #searchScreen .main-search-input:not(:placeholder-shown){ top:14.05%!important; height:3.25%!important; line-height:1.15!important; display:block!important; padding:0 .6%!important; transform:none!important; } #searchScreen .search-filter-hit{ position:absolute;z-index:62;top:19.72%;height:3.55%;border:0;background:transparent;cursor:pointer;border-radius:999px;padding:0; } #searchScreen .search-filter-all{left:3.25%;width:16.9%} #searchScreen .search-filter-movie{left:22.15%;width:19.25%} #searchScreen .search-filter-tv{left:43.35%;width:19.25%} #searchScreen .search-filter-emby{left:64.35%;width:31.5%} #searchScreen .search-filter-hit.active:not(.search-filter-all){box-shadow:inset 0 0 0 2px #ff6500,0 0 12px rgba(255,101,0,.28);background:rgba(255,101,0,.10)} #searchScreen .search-filter-all:not(.active){box-shadow:inset 0 0 0 2px #555;background:rgba(0,0,0,.62)} #searchScreen .main-search-results{position:absolute;z-index:45;left:3.2%;right:3.2%;top:25%;bottom:11%;overflow:auto;background:rgba(0,0,0,.94);padding:12px;border-radius:14px} #searchScreen .main-search-results.hidden{display:none!important} #searchScreen .main-search-results .request-result-card{margin-bottom:10px} /* 05 RECHERCHE — recalage définitif sur le visuel validé. IMPORTANT : code uniquement, aucun élément du PNG n'est modifié. */ #searchScreen .main-search-input, #searchScreen .main-search-input:focus, #searchScreen .main-search-input:not(:placeholder-shown){ left:13.25%!important; top:16.75%!important; width:72.7%!important; height:3.0%!important; padding:0 .6%!important; margin:0!important; line-height:normal!important; transform:none!important; background:transparent!important; border:0!important; box-shadow:none!important; outline:0!important; color:#f2f2f2!important; caret-color:#ff6500!important; } #searchScreen .main-search-input::placeholder, #searchScreen .main-search-input:focus::placeholder{ color:#929292!important; opacity:1!important; } #searchScreen .search-filter-hit{ top:22.05%!important; height:3.55%!important; z-index:62!important; border:0!important; outline:0!important; cursor:pointer!important; border-radius:999px!important; } #searchScreen .search-filter-all{left:3.25%!important;width:16.9%!important} #searchScreen .search-filter-movie{left:22.15%!important;width:19.25%!important} #searchScreen .search-filter-tv{left:43.35%!important;width:19.25%!important} #searchScreen .search-filter-emby{left:64.35%!important;width:31.5%!important} /* Aucun contour parasite : le clic reste réel, l'état actif est indiqué discrètement. */ #searchScreen .search-filter-hit, #searchScreen .search-filter-hit.active, #searchScreen .search-filter-all:not(.active){ box-shadow:none!important; background:transparent!important; } #searchScreen .search-filter-hit.active:not(.search-filter-all){ box-shadow:inset 0 0 0 2px #ff6500!important; background:rgba(255,101,0,.08)!important; } /* 05 RECHERCHE — recalage propre sur 05_recherche.png neutre (13/08/2026) */ #searchScreen .main-search-input, #searchScreen .main-search-input:focus, #searchScreen .main-search-input:not(:placeholder-shown){ left:13.8%!important; top:15.05%!important; width:70.8%!important; height:3.45%!important; padding:0!important; margin:0!important; border:0!important; outline:0!important; background:transparent!important; box-shadow:none!important; transform:none!important; color:#f2f2f2!important; font:400 clamp(15px,2.7vw,24px)/1 Arial,sans-serif!important; } /* Le texte indicatif est déjà imprimé dans le PNG : ne jamais le doubler en HTML. */ #searchScreen .main-search-input::placeholder, #searchScreen .main-search-input:focus::placeholder{color:transparent!important;opacity:0!important} /* Hitboxes mesurées sur les quatre ovales du PNG. */ #searchScreen .search-filter-hit{ top:20.55%!important; height:3.55%!important; padding:0!important; border:0!important; outline:0!important; border-radius:999px!important; background:transparent!important; box-shadow:none!important; } #searchScreen .search-filter-all{left:3.85%!important;width:16.8%!important} #searchScreen .search-filter-movie{left:22.5%!important;width:18.55%!important} #searchScreen .search-filter-tv{left:43.1%!important;width:19.75%!important} #searchScreen .search-filter-emby{left:64.9%!important;width:28.25%!important} /* Un seul état actif, y compris Tous. */ #searchScreen .search-filter-hit.active, #searchScreen .search-filter-all.active, #searchScreen .search-filter-movie.active, #searchScreen .search-filter-tv.active, #searchScreen .search-filter-emby.active{ background:rgba(255,101,0,.08)!important; box-shadow:inset 0 0 0 2px #ff6500!important; } /* 05 RECHERCHE — correctif final interaction, sans toucher au PNG */ #searchScreen .main-search-input, #searchScreen .main-search-input:focus, #searchScreen .main-search-input:not(:placeholder-shown){ left:13.7%!important; top:14.78%!important; width:70.5%!important; height:3.45%!important; padding:0!important; background:#000!important; color:#f2f2f2!important; line-height:1!important; } #searchScreen .main-search-input::placeholder, #searchScreen .main-search-input:focus::placeholder{ color:#929292!important; opacity:1!important; } /* Les boutons du PNG restent le dessin de référence. Les hitboxes sont invisibles. */ #searchScreen .search-filter-hit{ top:20.55%!important; height:3.55%!important; border:0!important; outline:0!important; box-shadow:none!important; background:transparent!important; } #searchScreen .search-filter-all{left:3.85%!important;width:16.8%!important} #searchScreen .search-filter-movie{left:22.5%!important;width:18.55%!important} #searchScreen .search-filter-tv{left:43.1%!important;width:19.75%!important} #searchScreen .search-filter-emby{left:64.9%!important;width:28.25%!important} /* État actif sans second ovale : teinte orange intérieure uniquement. */ #searchScreen .search-filter-hit.active{ background:rgba(255,101,0,.22)!important; box-shadow:none!important; } /* === 05 RECHERCHE — FIX AUTORITAIRE 13-08-2026 === Coordonnées prises directement sur le PNG 853x1844. Ce bloc est volontairement le dernier afin d'écraser tous les anciens essais. */ #searchScreen .main-search-input, #searchScreen .main-search-input:focus, #searchScreen .main-search-input:not(:placeholder-shown){ left:14.45%!important; /* intérieur du cadre, après la loupe */ top:15.22%!important; width:68.2%!important; /* s'arrête avant le micro */ height:3.15%!important; padding:0!important; margin:0!important; border:0!important; outline:0!important; box-shadow:none!important; border-radius:0!important; background:transparent!important; color:#f2f2f2!important; caret-color:#ff6500!important; font:400 clamp(15px,2.7vw,24px)/1 Arial,sans-serif!important; line-height:normal!important; appearance:none!important; -webkit-appearance:none!important; } /* Le placeholder visible est celui du PNG, jamais celui du HTML. */ #searchScreen .main-search-input::placeholder, #searchScreen .main-search-input:focus::placeholder{ color:transparent!important; opacity:0!important; } /* Dès qu'on tape, le fond noir du champ efface uniquement le texte imprimé du PNG. */ #searchScreen .main-search-input:not(:placeholder-shown){ background:#000!important; } /* Hitboxes = ovales du PNG (853x1844), sans aucun dessin lorsqu'elles sont inactives. */ #searchScreen .search-filter-hit{ top:20.50%!important; height:3.58%!important; margin:0!important; padding:0!important; border:0!important; outline:0!important; border-radius:999px!important; background:transparent!important; box-shadow:none!important; transform:none!important; } #searchScreen .search-filter-all{left:3.75%!important;width:16.90%!important} #searchScreen .search-filter-movie{left:22.50%!important;width:18.55%!important} #searchScreen .search-filter-tv{left:43.05%!important;width:19.75%!important} #searchScreen .search-filter-emby{left:64.85%!important;width:28.30%!important} /* Un seul état actif : contour orange exactement DANS l'ovale existant, sans second ovale ni décalage. */ #searchScreen .search-filter-hit.active{ background:rgba(255,101,0,.055)!important; box-shadow:inset 0 0 0 2px #ff6500!important; } /* 05 RECHERCHE — micro-ajustement vertical validé sur capture utilisateur. Descend ensemble le champ et les 4 sélections, sans modifier X/dimensions. */ #searchScreen .main-search-input, #searchScreen .main-search-input:focus, #searchScreen .main-search-input:not(:placeholder-shown){ top:15.48%!important; } #searchScreen .search-filter-hit{ top:20.78%!important; } /* === RECHERCHE : contrôles 100% CODE, même principe que MES DEMANDES === */ #searchScreen .main-search-input, #searchScreen .main-search-input:focus, #searchScreen .main-search-input:not(:placeholder-shown){ left:13.6%!important; top:15.35%!important; width:70.0%!important; height:3.45%!important; padding:0 .35em!important; border:0!important; outline:0!important; box-shadow:none!important; background:#000!important; color:#f2f2f2!important; caret-color:#ff6500!important; font:400 clamp(15px,2.7vw,24px)/1.1 Arial,sans-serif!important; } #searchScreen .main-search-input::placeholder, #searchScreen .main-search-input:focus::placeholder{color:#a7a7a7!important;opacity:1!important} #searchScreen .search-filter-hit{ top:20.65%!important; height:3.62%!important; display:flex!important;align-items:center!important;justify-content:center!important;gap:.55em!important; box-sizing:border-box!important;margin:0!important;padding:0 .55em!important; border:1px solid #4b4b4b!important;border-radius:999px!important; background:#050505!important;box-shadow:none!important;outline:0!important;transform:none!important; color:#f2f2f2!important;font:500 clamp(12px,2.25vw,20px)/1 Arial,sans-serif!important; white-space:nowrap!important;cursor:pointer!important; } #searchScreen .search-filter-all{left:3.45%!important;width:17.15%!important} #searchScreen .search-filter-movie{left:22.15%!important;width:19.0%!important} #searchScreen .search-filter-tv{left:42.85%!important;width:20.0%!important} #searchScreen .search-filter-emby{left:64.55%!important;width:29.0%!important} #searchScreen .search-filter-hit .sf-icon{font-size:1.18em;line-height:1;color:#fff} #searchScreen .search-filter-hit .sf-check{color:#79d900;border:1.5px solid #79d900;border-radius:50%;width:1.45em;height:1.45em;display:inline-flex;align-items:center;justify-content:center} #searchScreen .search-filter-hit.active{ border-color:#ff6500!important;background:linear-gradient(180deg,#ff6900,#e94f00)!important; color:#fff!important;box-shadow:none!important; } #searchScreen .search-filter-hit.active .sf-icon{color:#fff!important;border-color:#fff!important} /* 21_fiche_film_serie.png — visuel validé */ #detailModal.modal-overlay{ position:fixed; inset:0; z-index:120; overflow-y:auto; background:#000; display:block; padding:0; } #detailModal.modal-overlay.hidden{display:none!important} #detailModal .modal-card{ position:relative; width:min(100vw, 430px); min-height:calc(min(100vw,430px) * 2.1686747); margin:0 auto; border:0; border-radius:0; padding:0; overflow:hidden; background:#000 url('/assets/reference/21_fiche_film_serie.png') top center/100% auto no-repeat; box-shadow:none; } #detailModal .modal-close{ position:absolute; left:2.5%; top:1.8%; width:16%; height:4%; z-index:10; opacity:0; cursor:pointer; } #detailModal .modal-poster{ position:absolute; left:3.4%; top:6.3%; width:31.8%; height:29.4%; object-fit:cover; border-radius:12px; opacity:0; } #detailModal .modal-info{position:absolute; inset:0; pointer-events:none} #detailModal #modalTitle,#detailModal #modalMeta,#detailModal #modalOverview, #detailModal #modalRequestBtn,#detailModal #modalError{position:absolute; margin:0; opacity:0; pointer-events:auto} #detailModal #modalTitle{left:39%;top:6.4%;width:42%;height:4%} #detailModal #modalMeta{left:39%;top:10%;width:42%;height:3%} #detailModal #modalOverview{left:6%;top:38.5%;width:72%;height:8%} #detailModal #modalRequestBtn{left:6%;top:81%;width:43%;height:6%} #detailModal #modalError{left:6%;top:87%;width:88%} /* 13/08/2026 — Recherche : résultats sur 2 colonnes, sans bande noire vide à droite */ #searchScreen .main-search-results{ display:flex!important;flex-wrap:wrap!important;align-content:flex-start!important;align-items:flex-start!important; gap:12px 2.4%!important;padding:12px!important; } #searchScreen .main-search-results.hidden{display:none!important} #searchScreen .main-search-results .request-result-card{ width:48.8%!important;flex:0 0 48.8%!important;margin:0!important;cursor:pointer!important; } /* 21 — fiche plein format téléphone */ #detailModal .modal-card{width:min(100vw,853px)!important;min-height:calc(min(100vw,853px) * 2.16178)!important} #detailModal .modal-poster{opacity:1!important} #detailModal #modalTitle,#detailModal #modalMeta,#detailModal #modalOverview{opacity:1!important;color:#fff!important;z-index:12!important;background:#000!important;padding:2px 4px!important} #detailModal #modalTitle{font-size:clamp(18px,4.4vw,38px)!important} #detailModal #modalMeta{font-size:clamp(12px,2.7vw,22px)!important;color:#bbb!important} #detailModal #modalOverview{font-size:clamp(12px,2.6vw,21px)!important;line-height:1.35!important;overflow:hidden!important} #detailModal #modalRequestBtn{opacity:1!important;z-index:15!important;background:transparent!important;color:transparent!important;border:0!important} /* 13/08/2026 — Recherche : cartes pleine largeur, lisibles, sans bande noire à droite */ #searchScreen .main-search-results{ display:block!important; padding:12px!important; } #searchScreen .main-search-results.hidden{display:none!important} #searchScreen .main-search-results .request-result-card{ width:100%!important; max-width:none!important; margin:0 0 12px!important; display:grid!important; grid-template-columns:36% 64%!important; min-height:220px!important; cursor:pointer!important; } #searchScreen .main-search-results .request-result-poster-wrap{ width:100%!important; height:100%!important; min-height:220px!important; padding-top:0!important; } #searchScreen .main-search-results .request-result-info{ padding:7% 6%!important; display:flex!important; flex-direction:column!important; justify-content:center!important; } #searchScreen .main-search-results .request-result-title{font-size:clamp(18px,4.2vw,30px)!important;white-space:normal!important} #searchScreen .main-search-results .request-result-meta{font-size:clamp(13px,2.8vw,20px)!important;margin-top:4%!important} #searchScreen .main-search-results .request-result-btn{font-size:clamp(12px,2.6vw,18px)!important;margin-top:8%!important;padding:5% 3%!important} /* Fiche 21 : toujours à la largeur réelle du téléphone, jamais réduite en vignette */ #detailModal{width:100vw!important;max-width:none!important} #detailModal .modal-card{width:100vw!important;max-width:853px!important;margin:0 auto!important} /* 14/08/2026 — Fiche 21 : données réelles propres, sans superposition parasite */ body.detail-open{overflow:hidden!important} #detailModal .modal-info{font-family:Arial,sans-serif!important;color:#f2f2f2!important} #detailModal #modalTitle,#detailModal #modalMeta,#detailModal #modalOverview, #detailModal #modalGenres,#detailModal #modalDirector,#detailModal #modalCast,#detailModal #modalOrigin,#detailModal #modalAudio{ position:absolute!important;z-index:22!important;opacity:1!important;box-sizing:border-box!important; background:#000!important;color:#f2f2f2!important;margin:0!important;pointer-events:none!important; } #detailModal #modalTitle{left:39%!important;top:6.35%!important;width:54%!important;height:3.1%!important;padding:0 1%!important;font-size:clamp(18px,4.3vw,36px)!important;font-weight:700!important;overflow:hidden!important} #detailModal #modalMeta{left:39%!important;top:9.55%!important;width:54%!important;height:2.2%!important;padding:0 1%!important;font-size:clamp(12px,2.7vw,22px)!important;color:#ddd!important} #detailModal #modalGenres{left:39%!important;top:12.35%!important;width:54%!important;height:2.4%!important;padding:.35% 1%!important;font-size:clamp(11px,2.4vw,19px)!important;color:#a84cff!important;overflow:hidden!important} #detailModal #modalDirector{left:62%!important;top:22.2%!important;width:31%!important;height:2.2%!important;font-size:clamp(11px,2.25vw,18px)!important;overflow:hidden!important} #detailModal #modalCast{left:62%!important;top:24.75%!important;width:31%!important;height:4.5%!important;font-size:clamp(10px,2.1vw,17px)!important;line-height:1.3!important;overflow:hidden!important} #detailModal #modalOrigin{left:62%!important;top:29.35%!important;width:31%!important;height:2.2%!important;font-size:clamp(10px,2.1vw,17px)!important;overflow:hidden!important} #detailModal #modalAudio{left:62%!important;top:31.9%!important;width:31%!important;height:2.2%!important;font-size:clamp(10px,2.1vw,17px)!important;overflow:hidden!important} #detailModal #modalOverview{ left:5.4%!important;top:37.2%!important;width:89.2%!important;height:6.25%!important; padding:1.2% 1.5%!important;background:rgba(7,7,7,.96)!important;border-radius:0!important; font-size:clamp(11px,2.35vw,19px)!important;line-height:1.48!important;overflow:hidden!important; } /* Le PNG 21 contient une zone séries illustrative. Sur un film on la recouvre proprement. */ #detailModal #modalMovieSeriesMask{display:none;position:absolute;left:2.5%;top:55.85%;width:95%;height:13.5%;z-index:20;background:#000;border-radius:12px;pointer-events:none} #detailModal #modalMovieSeriesMask.visible{display:block} #detailModal #modalError{z-index:30!important;color:#ff6b6b!important;background:#000!important} /* 14/08/2026 — FICHE 21 reconstruite sur fond neutre validé */ #detailModal.modal-overlay{position:fixed!important;inset:0!important;z-index:120!important;overflow-y:auto!important;background:#000!important;padding:0!important} #detailModal.modal-overlay.hidden{display:none!important} #detailModal .modal-card{position:relative!important;width:100vw!important;max-width:853px!important;min-height:2161px!important;margin:0 auto!important;padding:0!important;border:0!important;border-radius:0!important;overflow:hidden!important;background:#000 url('/assets/reference/21_fiche_film_serie.png') top center/100% auto no-repeat!important;box-shadow:none!important} #detailModal .modal-close{position:absolute!important;left:2%!important;top:1%!important;width:18%!important;height:5%!important;z-index:50!important;opacity:0!important;cursor:pointer!important} #detailModal .detail-content{position:absolute!important;left:4.2%!important;right:4.2%!important;top:7.4%!important;bottom:15.5%!important;z-index:10!important;overflow-y:auto!important;padding:1.5%!important;box-sizing:border-box!important;font-family:Arial,sans-serif!important;color:#eee!important;scrollbar-width:none!important} #detailModal .detail-content::-webkit-scrollbar{display:none!important} #detailModal .detail-hero{display:grid!important;grid-template-columns:34% 1fr!important;gap:4%!important;align-items:start!important} #detailModal .modal-poster{position:static!important;width:100%!important;height:auto!important;aspect-ratio:2/3!important;object-fit:cover!important;border:1.5px solid #ff6500!important;border-radius:12px!important;opacity:1!important;background:#090909!important} #detailModal .detail-main{min-width:0!important} #detailModal #modalTitle{position:static!important;width:auto!important;height:auto!important;opacity:1!important;background:transparent!important;color:#fff!important;margin:0 0 2%!important;padding:0!important;font-size:clamp(21px,5vw,42px)!important;line-height:1.08!important;font-weight:700!important;overflow:visible!important} #detailModal #modalMeta{position:static!important;width:auto!important;height:auto!important;opacity:1!important;background:transparent!important;color:#bbb!important;margin:0 0 3%!important;padding:0!important;font-size:clamp(12px,2.8vw,22px)!important} #detailModal #modalGenres{position:static!important;width:auto!important;height:auto!important;opacity:1!important;background:transparent!important;color:#a84cff!important;margin:0 0 4%!important;padding:0!important;font-size:clamp(11px,2.5vw,19px)!important} #detailModal .detail-rating{display:grid!important;grid-template-columns:auto 1fr!important;column-gap:8px!important;align-items:center!important;margin:2% 0 5%!important;font-size:clamp(18px,4vw,32px)!important}.detail-rating .star{color:#ffad00!important;font-size:1.5em!important}.detail-rating small{grid-column:2;color:#999;font-size:.55em!important} #detailModal .detail-facts{display:grid!important;grid-template-columns:42% 58%!important;gap:10px 6px!important;margin:0!important;font-size:clamp(10px,2.15vw,17px)!important}.detail-facts dt{color:#bbb!important}.detail-facts dd{margin:0!important;color:#eee!important;line-height:1.25!important} #detailModal .detail-box{margin-top:3%!important;padding:3%!important;border:1px solid #252525!important;border-radius:12px!important;background:rgba(5,5,5,.88)!important;box-sizing:border-box!important} #detailModal .detail-box h4{margin:0 0 2%!important;color:#a43cff!important;font-size:clamp(14px,3vw,24px)!important}.detail-box p{margin:0!important;font-size:clamp(11px,2.35vw,18px)!important;line-height:1.45!important} #detailModal #modalOverview{position:static!important;width:auto!important;height:auto!important;opacity:1!important;background:transparent!important;color:#eee!important;padding:0!important;overflow:visible!important} #detailModal .detail-status{border:1px solid #4b8d22!important;border-radius:9px!important;padding:2.5%!important;color:#7adf3b!important;font-weight:700!important;font-size:clamp(12px,2.6vw,20px)!important} #detailModal .detail-request-state{font-size:clamp(12px,2.5vw,19px)!important;color:#ddd!important} #detailModal .detail-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:3%!important}.detail-actions h4{grid-column:1/-1!important} #detailModal #modalRequestBtn,#detailModal #modalMyRequestsBtn{position:static!important;width:auto!important;height:auto!important;opacity:1!important;padding:4%!important;border-radius:9px!important;font-weight:700!important;font-size:clamp(11px,2.4vw,18px)!important;cursor:pointer!important} #detailModal #modalRequestBtn{background:linear-gradient(135deg,#6321a7,#8c35d5)!important;color:#fff!important;border:1px solid #a84cff!important} #detailModal #modalMyRequestsBtn{background:#071d2d!important;color:#35a8ff!important;border:1px solid #168ce0!important} #detailModal #modalError{position:static!important;opacity:1!important;background:transparent!important;color:#ff6b6b!important;margin:2% 0!important} #detailModal #modalSeriesSection.hidden{display:none!important} @media(max-width:520px){#detailModal .modal-card{min-height:calc(100vw * 2.53286)!important}.detail-facts{gap:7px 4px!important}} /* 14/08/2026 — FICHE 21 : correction finale en flux + barre canonique identique à Recherche */ #detailModal .modal-card{ width:min(100vw,853px)!important; max-width:853px!important; min-height:calc(min(100vw,853px) * 2.53224)!important; overflow:hidden!important; background:#000 url('/assets/reference/21_fiche_film_serie.png') top center/100% 100% no-repeat!important; } #detailModal .detail-content{ position:relative!important; left:auto!important; right:auto!important; top:auto!important; bottom:auto!important; width:91.6%!important; height:auto!important; margin:7.6% auto 0!important; padding:0 1.5% 18%!important; overflow:visible!important; box-sizing:border-box!important; z-index:20!important; } #detailModal .detail-hero{display:grid!important;grid-template-columns:34% minmax(0,1fr)!important;gap:4.5%!important;align-items:start!important} #detailModal .modal-poster{position:static!important;width:100%!important;height:auto!important;aspect-ratio:2/3!important;object-fit:cover!important;border:2px solid #ff6500!important;border-radius:10px!important;opacity:1!important} #detailModal .detail-main{position:static!important;min-width:0!important;overflow:visible!important} #detailModal #modalTitle,#detailModal #modalMeta,#detailModal #modalGenres,#detailModal .detail-rating,#detailModal .detail-facts,#detailModal .detail-facts dt,#detailModal .detail-facts dd{position:static!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:auto!important;height:auto!important;max-width:none!important;background:transparent!important;overflow:visible!important;opacity:1!important;transform:none!important} #detailModal #modalTitle{font-size:clamp(20px,4.7vw,40px)!important;line-height:1.08!important;margin:0 0 2.5%!important;padding:0!important} #detailModal #modalMeta{font-size:clamp(12px,2.6vw,21px)!important;line-height:1.3!important;margin:0 0 2.5%!important;padding:0!important} #detailModal #modalGenres{font-size:clamp(11px,2.35vw,19px)!important;line-height:1.3!important;margin:0 0 4%!important} #detailModal .detail-rating{margin:2% 0 4%!important} #detailModal .detail-facts{display:grid!important;grid-template-columns:max-content minmax(0,1fr)!important;gap:8px 12px!important;margin:0!important;padding:0!important} #detailModal .detail-facts dt{white-space:nowrap!important;color:#bbb!important;font-size:clamp(10px,2.05vw,17px)!important} #detailModal .detail-facts dd{margin:0!important;color:#eee!important;font-size:clamp(10px,2.05vw,17px)!important;line-height:1.35!important;word-break:normal!important;overflow-wrap:anywhere!important} #detailModal .detail-box{position:relative!important;clear:both!important;margin:3.2% 0 0!important;padding:3%!important;width:100%!important;height:auto!important;min-height:0!important;overflow:visible!important;background:rgba(5,5,5,.91)!important} #detailModal #modalOverview{position:static!important;display:block!important;width:auto!important;height:auto!important;max-height:none!important;margin:0!important;padding:0!important;background:transparent!important;overflow:visible!important;white-space:normal!important;word-break:normal!important;overflow-wrap:break-word!important} #detailModal #modalError{display:none!important} #detailModal .detail-canonical-nav{ position:absolute!important;left:3.2%!important;right:3.2%!important;bottom:1.35%!important;height:7.9%!important; z-index:100!important;display:grid!important;grid-template-columns:repeat(5,1fr)!important;align-items:center!important; padding:.35% 1.1%!important;border:1px solid rgba(255,255,255,.10)!important;border-radius:clamp(20px,5vw,42px)!important; background:linear-gradient(180deg,rgba(22,22,22,.99),rgba(8,8,8,.99))!important;box-shadow:0 -8px 24px rgba(0,0,0,.75)!important; } #detailModal .detail-canonical-nav .cbn-item{height:100%!important;border:0!important;background:transparent!important;color:#8e8e8e!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:.08em!important;font:inherit!important;font-size:clamp(9px,2.25vw,17px)!important;padding:0!important} #detailModal .detail-canonical-nav .cbn-icon{font-family:Arial,sans-serif!important;font-weight:700!important;font-size:clamp(22px,5.1vw,39px)!important;line-height:.9!important} #detailModal .detail-canonical-nav .cbn-search{color:#ff6500!important} @media(max-width:520px){#detailModal .modal-card{min-height:253.224vw!important}#detailModal .detail-facts{gap:6px 8px!important}} /* 14/08/2026 — FICHE 21 : ratio natif 853x1844, aucun étirement, aucun débordement horizontal */ #detailModal.modal-overlay{ overflow-x:hidden!important; overflow-y:auto!important; } #detailModal .modal-card{ width:min(100vw,853px)!important; max-width:853px!important; height:auto!important; min-height:0!important; aspect-ratio:853/1844!important; margin:0 auto!important; overflow:hidden!important; background:#000 url('/assets/reference/21_fiche_film_serie.png') top center/100% 100% no-repeat!important; } #detailModal .detail-content{ position:absolute!important; left:4.2%!important; right:4.2%!important; top:7.3%!important; bottom:15.2%!important; width:auto!important; height:auto!important; margin:0!important; padding:0!important; overflow-y:auto!important; overflow-x:hidden!important; box-sizing:border-box!important; scrollbar-width:none!important; } #detailModal .detail-content::-webkit-scrollbar{display:none!important} #detailModal .detail-hero{width:100%!important;max-width:100%!important;grid-template-columns:34% minmax(0,1fr)!important;gap:4.5%!important;box-sizing:border-box!important} #detailModal .detail-main{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important} #detailModal .detail-facts{width:100%!important;max-width:100%!important;grid-template-columns:max-content minmax(0,1fr)!important;box-sizing:border-box!important} #detailModal .detail-facts dt,#detailModal .detail-facts dd{background:transparent!important;box-shadow:none!important;max-width:100%!important} #detailModal #modalOverview{max-width:100%!important;box-sizing:border-box!important;overflow-wrap:anywhere!important} #detailModal .detail-box{max-width:100%!important;box-sizing:border-box!important;overflow:hidden!important} /* La barre 21 utilise STRICTEMENT le composant canonique global, sans tailles/polices locales. */ #detailModal .detail-canonical-nav{ left:3.2%!important; right:3.2%!important; bottom:1.35%!important; height:7.9%!important; } #detailModal .detail-canonical-nav .cbn-search{color:#ff6500!important} @media(max-width:520px){ #detailModal .modal-card{min-height:0!important;height:auto!important;aspect-ratio:853/1844!important} #detailModal .detail-content{left:4.2%!important;right:4.2%!important;top:7.3%!important;bottom:15.2%!important} #detailModal .detail-facts{gap:6px 7px!important} } /* 14/08/2026 — Fiche 21 : neutralisation définitive des anciens calques/coordonnées */ #detailModal .detail-content{ top:7.4%!important; bottom:15.4%!important; display:block!important; } #detailModal .detail-hero{ display:grid!important; grid-template-columns:35% minmax(0,1fr)!important; gap:4%!important; align-items:start!important; width:100%!important; } #detailModal .detail-main{display:block!important;min-width:0!important;overflow:visible!important} #detailModal .detail-main #modalTitle, #detailModal .detail-main #modalMeta, #detailModal .detail-main #modalGenres, #detailModal .detail-main #modalDirector, #detailModal .detail-main #modalCast, #detailModal .detail-main #modalOrigin, #detailModal .detail-main #modalAudio, #detailModal .detail-main #modalRating{ position:static!important; inset:auto!important; width:auto!important; height:auto!important; min-width:0!important; max-width:100%!important; opacity:1!important; background:transparent!important; background-image:none!important; box-shadow:none!important; color:#eee!important; overflow:visible!important; clip:auto!important; transform:none!important; } #detailModal .detail-main #modalTitle{color:#fff!important;margin:0 0 7px!important;font-size:clamp(19px,4.7vw,34px)!important;line-height:1.08!important} #detailModal .detail-main #modalMeta{color:#ddd!important;margin:0 0 7px!important;font-size:clamp(12px,2.7vw,18px)!important} #detailModal .detail-main #modalGenres{color:#a84cff!important;margin:0 0 8px!important;font-size:clamp(11px,2.4vw,17px)!important} #detailModal .detail-rating{position:static!important;margin:5px 0 10px!important;background:transparent!important} #detailModal .detail-facts{display:grid!important;grid-template-columns:max-content minmax(0,1fr)!important;gap:6px 8px!important;width:100%!important;margin:0!important;padding:0!important} #detailModal .detail-facts dt, #detailModal .detail-facts dd{ position:static!important; inset:auto!important; width:auto!important; height:auto!important; min-width:0!important; max-width:100%!important; margin:0!important; padding:0!important; background:transparent!important; background-image:none!important; box-shadow:none!important; overflow:visible!important; opacity:1!important; color:#eee!important; font-size:clamp(9px,2.05vw,15px)!important; line-height:1.32!important; overflow-wrap:anywhere!important; } #detailModal .detail-facts dt{color:#bbb!important;white-space:nowrap!important} #detailModal .detail-box{position:relative!important;z-index:2!important;clear:both!important;width:100%!important;height:auto!important;min-height:0!important;margin:14px 0 0!important;padding:14px!important;overflow:visible!important} #detailModal .detail-box #modalOverview{position:static!important;inset:auto!important;width:auto!important;height:auto!important;max-height:none!important;background:transparent!important;background-image:none!important;box-shadow:none!important;overflow:visible!important;opacity:1!important;white-space:normal!important;line-height:1.4!important} #detailModal #modalError{display:none!important} #requestScreen .request-result-card{cursor:pointer!important} @media(max-width:430px){ #detailModal .detail-hero{grid-template-columns:36% minmax(0,1fr)!important;gap:4%!important} #detailModal .detail-box{padding:12px!important;margin-top:12px!important} } /* 14/08/2026 — Fiche 21 : décor inférieur au PREMIER PLAN, barre validée inchangée */ #detailModal .modal-card::after{ content:""; position:absolute; left:0; right:0; bottom:7.8%; height:16.5%; z-index:80; pointer-events:none; background-image:url('/assets/reference/21_fiche_film_serie.png'); background-repeat:no-repeat; background-size:100% auto; background-position:center bottom; } #detailModal .detail-content{z-index:20!important;padding-bottom:12%!important} #detailModal .detail-canonical-nav{z-index:100!important} /* 14/08/2026 — Écran 05 : le décor cinéma inférieur reste au premier plan devant les résultats. */ #searchScreen.search-reference::after{ content:""; position:absolute; left:0; right:0; bottom:7.8%; height:16.5%; z-index:80; pointer-events:none; background-image:url('/assets/reference/05_recherche.png'); background-repeat:no-repeat; background-size:100% auto; background-position:center bottom; } #searchScreen .main-search-results{z-index:45!important;padding-bottom:15%!important} #searchScreen .canonical-bottom-nav{z-index:100!important} /* 14/08/2026 — Fiche 21 : finition validée, contenu toujours accessible au-dessus du décor */ #detailModal .detail-content{ bottom:15.4%!important; padding-bottom:38%!important; scroll-padding-bottom:38%!important; overscroll-behavior:contain; } #detailModal .detail-hero{margin-bottom:2px!important} #detailModal .detail-box{margin-top:10px!important;padding:12px!important} #detailModal .detail-box #modalOverview{line-height:1.32!important} #detailModal .detail-facts{gap:5px 8px!important} #detailModal .detail-canonical-nav{z-index:100!important} #detailModal .modal-card::after{z-index:80!important} @media(max-width:430px){ #detailModal .detail-content{padding-bottom:42%!important;scroll-padding-bottom:42%!important} #detailModal .detail-box{margin-top:9px!important;padding:11px!important} } /* 14/08/2026 — Recherche : décor inférieur complet, au premier plan, sans découpe. Le décor occupe ~24% du PNG 05 ; le conteneur précédent à 16.5% le tronquait. */ #searchScreen.search-reference::after{ bottom:7.8%!important; height:24%!important; overflow:visible!important; background-size:100% auto!important; background-position:center bottom!important; background-repeat:no-repeat!important; z-index:80!important; } #searchScreen .main-search-results{ z-index:45!important; padding-bottom:24%!important; } #searchScreen .canonical-bottom-nav{z-index:100!important} /* 14/08/2026 — Recherche : les résultats défilent derrière le décor, sans réserver de vide. */ #searchScreen .main-search-results{ bottom:11%!important; padding-bottom:0!important; scroll-padding-bottom:0!important; } #searchScreen.search-reference::after{ z-index:80!important; pointer-events:none!important; } #searchScreen .canonical-bottom-nav{z-index:100!important} /* 14/08/2026 — Recherche : le noir du PNG de décor ne masque plus les cartes. Le décor reste au premier plan, mais son fond noir se fusionne avec le contenu qui défile dessous. */ #searchScreen.search-reference::after{ mix-blend-mode:screen!important; isolation:auto!important; } #searchScreen .main-search-results{ bottom:11%!important; padding-bottom:0!important; } /* 14/08/2026 — Recherche : architecture 3 couches SANS duplication. 1) fond 05 uniquement jusqu'avant le décor ; 2) résultats ; 3) décor original au premier plan ; nav au-dessus. On réutilise le PNG original, sans le modifier. */ #searchScreen.search-reference{ background-image:none!important; overflow:hidden!important; isolation:isolate!important; } #searchScreen.search-reference::before{ content:""; position:absolute; inset:0 0 24% 0; z-index:0; pointer-events:none; background-image:url('/assets/reference/05_recherche.png'); background-repeat:no-repeat; background-size:100% auto; background-position:top center; } #searchScreen.search-reference::after{ content:""; position:absolute; left:0!important; right:0!important; bottom:7.8%!important; height:24%!important; z-index:80!important; pointer-events:none!important; background-image:url('/assets/reference/05_recherche.png')!important; background-repeat:no-repeat!important; background-size:100% auto!important; background-position:center bottom!important; mix-blend-mode:normal!important; opacity:1!important; } #searchScreen .main-search-results{ z-index:45!important; bottom:11%!important; padding-bottom:0!important; scroll-padding-bottom:0!important; } #searchScreen .main-search-input, #searchScreen .search-filter-hit{z-index:62!important} #searchScreen .canonical-bottom-nav{z-index:100!important} /* 14/08/2026 — Recherche : décor en FIN de résultats, pas en calque fixe. Les cartes s'enchaînent sans vide, puis le décor complet apparaît naturellement. */ #searchScreen.search-reference::after{ content:none!important; display:none!important; background:none!important; } #searchScreen .main-search-results{ bottom:11%!important; padding:12px!important; scroll-padding-bottom:0!important; } #searchScreen .main-search-results::after{ content:""; display:block; width:calc(100% + 24px); aspect-ratio:1024/370; margin:0 -12px -12px; pointer-events:none; background-image:url('/assets/reference/05_recherche.png'); background-repeat:no-repeat; background-size:100% auto; background-position:center bottom; } #searchScreen .canonical-bottom-nav{z-index:100!important} /* 14/08/2026 — Recherche : décor conditionnel définitif. Sans recherche : décor standard visible. Avec résultats : décor après la liste. */ #searchScreen.search-reference:not(.search-has-results)::after{ content:""!important; display:block!important; position:absolute!important; left:0!important;right:0!important;bottom:7.8%!important; height:24%!important; z-index:80!important; pointer-events:none!important; background-image:url('/assets/reference/05_recherche.png')!important; background-repeat:no-repeat!important; background-size:100% auto!important; background-position:center bottom!important; mix-blend-mode:normal!important; } #searchScreen.search-reference.search-has-results::after{content:none!important;display:none!important} #searchScreen.search-reference:not(.search-has-results) .main-search-results::after{content:none!important;display:none!important} #searchScreen.search-reference.search-has-results .main-search-results::after{ content:""!important;display:block!important;width:calc(100% + 24px)!important; aspect-ratio:1024/370!important;margin:0 -12px -12px!important; pointer-events:none!important;background-image:url('/assets/reference/05_recherche.png')!important; background-repeat:no-repeat!important;background-size:100% auto!important;background-position:center bottom!important; } /* Toasts : toujours au-dessus de la navigation inférieure. */ .toast{z-index:300!important;bottom:calc(11% + 14px)!important;max-width:90%!important;text-align:center!important} /* 14/08/2026 — Recherche : architecture finale du décor. Le décor inférieur est un overlay transparent indépendant : les résultats défilent derrière, sans espace réservé ; nav au-dessus. */ #searchScreen.search-reference{ background-image:none!important; overflow:hidden!important; isolation:isolate!important; } #searchScreen.search-reference::before{ content:""!important; display:block!important; position:absolute!important; inset:0!important; z-index:0!important; pointer-events:none!important; background-image:url('/assets/reference/05_recherche.png')!important; background-repeat:no-repeat!important; background-size:100% auto!important; background-position:top center!important; } /* Neutralise toutes les anciennes variantes de décor conditionnel / fin de liste. */ #searchScreen.search-reference::after{content:none!important;display:none!important;background:none!important} #searchScreen .main-search-results::after{content:none!important;display:none!important;background:none!important} #searchScreen .search-bottom-mask{ display:block!important; position:absolute!important; left:0!important;right:0!important; bottom:7.8%!important; height:24%!important; z-index:80!important; pointer-events:none!important; background-image:url('/assets/reference/05_recherche_decor_overlay.png')!important; background-repeat:no-repeat!important; background-size:100% 100%!important; background-position:center bottom!important; } #searchScreen .main-search-results{ z-index:45!important; bottom:11%!important; padding:12px!important; padding-bottom:12px!important; scroll-padding-bottom:0!important; overflow-y:auto!important; } #searchScreen .main-search-input,#searchScreen .search-filter-hit{z-index:62!important} #searchScreen .canonical-bottom-nav{z-index:100!important} /* Les notifications restent devant la barre. */ .toast{z-index:300!important;bottom:calc(11% + 14px)!important} /* 14/08/2026 — Recherche : séparation définitive des couches. La page (haut + décor + nav) reste fixe. Seule la liste de résultats scrolle. */ #searchScreen.search-reference{ position:relative!important; overflow:hidden!important; } #searchScreen .main-search-results{ position:absolute!important; left:2.7%!important; right:2.7%!important; top:24.1%!important; bottom:7.8%!important; height:auto!important; overflow-y:auto!important; overflow-x:hidden!important; z-index:45!important; background:#000!important; padding:10px 10px 26vh!important; margin:0!important; box-sizing:border-box!important; overscroll-behavior:contain!important; -webkit-overflow-scrolling:touch!important; scrollbar-gutter:stable!important; } #searchScreen .search-bottom-mask{ position:absolute!important; left:0!important; right:0!important; bottom:7.8%!important; height:24%!important; z-index:80!important; pointer-events:none!important; margin:0!important; transform:none!important; } #searchScreen .canonical-bottom-nav{ position:absolute!important; z-index:100!important; } /* 14/08/2026 — RECHERCHE : assets séparés validés. 05_recherche_fond.png = habillage supérieur neutre. 05_recherche_decor.png = décor inférieur RGBA réellement transparent. Les résultats scrollent derrière le décor ; la nav reste au premier plan. */ #searchScreen.search-reference{ background:#000!important; background-image:none!important; overflow:hidden!important; isolation:isolate!important; } #searchScreen.search-reference::before{ content:""!important; display:block!important; position:absolute!important; inset:0!important; z-index:0!important; pointer-events:none!important; background-image:url('/assets/reference/05_recherche_fond.png')!important; background-repeat:no-repeat!important; background-size:100% auto!important; background-position:top center!important; } #searchScreen.search-reference::after, #searchScreen .main-search-results::after{ content:none!important; display:none!important; background:none!important; } #searchScreen .main-search-results{ position:absolute!important; left:2.7%!important; right:2.7%!important; top:24.1%!important; bottom:7.8%!important; height:auto!important; z-index:45!important; overflow-y:auto!important; overflow-x:hidden!important; background:transparent!important; padding:10px 10px 27vh!important; margin:0!important; box-sizing:border-box!important; overscroll-behavior:contain!important; -webkit-overflow-scrolling:touch!important; } #searchScreen .main-search-results.hidden{display:none!important} #searchScreen .search-bottom-mask{ display:block!important; position:absolute!important; left:0!important; right:0!important; bottom:7.8%!important; height:auto!important; aspect-ratio:1926/816!important; z-index:80!important; pointer-events:none!important; background-image:url('/assets/reference/05_recherche_decor.png')!important; background-repeat:no-repeat!important; background-size:100% 100%!important; background-position:center bottom!important; margin:0!important; transform:none!important; } #searchScreen .main-search-input, #searchScreen .search-filter-hit{z-index:62!important} #searchScreen .canonical-bottom-nav{z-index:100!important} .toast{z-index:300!important;bottom:calc(11% + 14px)!important} /* ============================================================ 14/08/2026 — RECHERCHE : STRUCTURE PROPRE DÉFINITIVE Deux assets séparés : fond supérieur + décor RGBA. Le champ/filtres sont du vrai HTML ; seule la liste scrolle. ============================================================ */ #searchScreen.search-reference{ position:relative!important; aspect-ratio:853/1844!important; min-height:0!important; overflow:hidden!important; background:#000!important; background-image:none!important; isolation:isolate!important; } #searchScreen.search-reference::before{ content:""!important; display:block!important; position:absolute!important; left:0!important; right:0!important; top:0!important; height:24.5%!important; z-index:1!important; pointer-events:none!important; background:url('/assets/reference/05_recherche_fond.png') top center/100% auto no-repeat!important; } #searchScreen.search-reference::after, #searchScreen .main-search-results::after{content:none!important;display:none!important} /* Barre de recherche : dessinée en code, toujours visible. */ #searchScreen .main-search-input, #searchScreen .main-search-input:focus, #searchScreen .main-search-input:not(:placeholder-shown){ display:block!important; position:absolute!important; left:4.5%!important; top:15.0%!important; width:91%!important; height:4.25%!important; z-index:70!important; box-sizing:border-box!important; margin:0!important; padding:0 4.2%!important; border:1px solid #4b4b4b!important; border-radius:999px!important; outline:none!important; background:rgba(8,8,8,.96)!important; color:#f2f2f2!important; caret-color:#ff6500!important; box-shadow:none!important; font:400 clamp(14px,2.65vw,23px)/1 Arial,sans-serif!important; appearance:none!important; -webkit-appearance:none!important; } #searchScreen .main-search-input::placeholder, #searchScreen .main-search-input:focus::placeholder{ color:#9b9b9b!important; opacity:1!important; } #searchScreen .main-search-input:focus{border-color:#ff6500!important} #searchScreen .main-search-input::-webkit-search-cancel-button{display:none!important} /* Filtres : une seule rangée sous le champ. */ #searchScreen .search-filter-hit{ position:absolute!important; top:20.25%!important; height:3.7%!important; z-index:70!important; box-sizing:border-box!important; margin:0!important; padding:0!important; border:1px solid #555!important; border-radius:999px!important; outline:0!important; background:rgba(0,0,0,.88)!important; box-shadow:none!important; color:#fff!important; } #searchScreen .search-filter-all{left:3.2%!important;width:17.7%!important} #searchScreen .search-filter-movie{left:22.3%!important;width:19.2%!important} #searchScreen .search-filter-tv{left:43.0%!important;width:19.2%!important} #searchScreen .search-filter-emby{left:63.7%!important;width:32.8%!important} #searchScreen .search-filter-hit.active{ border-color:#ff6500!important; background:#ff6500!important; box-shadow:none!important; } #searchScreen .search-filter-emby.active{background:rgba(0,0,0,.9)!important;border-color:#63df00!important} /* Une seule vraie zone scrollable. Elle va derrière le décor jusqu'à la nav. */ #searchScreen .main-search-results{ display:block!important; position:absolute!important; left:2.7%!important; right:2.7%!important; top:24.7%!important; bottom:7.9%!important; height:auto!important; z-index:40!important; box-sizing:border-box!important; margin:0!important; padding:0 0 27%!important; border:0!important; border-radius:0!important; background:transparent!important; overflow-x:hidden!important; overflow-y:scroll!important; overscroll-behavior:contain!important; -webkit-overflow-scrolling:touch!important; touch-action:pan-y!important; scrollbar-width:thin!important; } #searchScreen .main-search-results.hidden{display:none!important} #searchScreen .main-search-results .request-result-card{position:relative!important;z-index:1!important;margin:0 0 10px!important} /* Décor transparent : calque fixe, ne prend AUCUNE place et ne capture aucun geste. */ #searchScreen .search-bottom-mask{ display:block!important; position:absolute!important; left:0!important; right:0!important; bottom:7.9%!important; width:100%!important; height:auto!important; aspect-ratio:1926/816!important; z-index:80!important; margin:0!important; padding:0!important; pointer-events:none!important; background:url('/assets/reference/05_recherche_decor.png') center bottom/100% 100% no-repeat!important; transform:none!important; } #searchScreen .canonical-bottom-nav{ position:absolute!important; left:3.2%!important;right:3.2%!important;bottom:1.35%!important; z-index:100!important; } .toast{z-index:300!important;bottom:calc(11% + 14px)!important} /* 14/08/2026 — RECHERCHE : nettoyage final, un seul décor DOM. Aucun pseudo-element ni background ne peut réinjecter le décor. */ #searchScreen.search-reference::after, #searchScreen .main-search-results::before, #searchScreen .main-search-results::after{content:none!important;display:none!important;background:none!important;background-image:none!important;} #searchScreen .search-bottom-mask{ display:block!important;position:absolute!important;left:0!important;right:0!important;bottom:7.9%!important; width:100%!important;height:auto!important;aspect-ratio:1926/816!important;z-index:80!important; margin:0!important;padding:0!important;pointer-events:none!important;background:none!important;background-image:none!important; overflow:visible!important;transform:none!important; } #searchScreen .search-bottom-mask>img{ display:block!important;width:100%!important;height:100%!important;object-fit:fill!important;object-position:center bottom!important; margin:0!important;padding:0!important;pointer-events:none!important;user-select:none!important; } #searchScreen .main-search-results{ top:24.7%!important;bottom:7.9%!important;z-index:40!important;overflow-y:auto!important; padding:0 0 43%!important;background:transparent!important; } #searchScreen .main-search-results .request-result-card{z-index:1!important;} #searchScreen .canonical-bottom-nav{z-index:100!important;} /* 14/08/2026 — RECHERCHE : correction ratio décor. Le PNG conserve strictement son ratio intrinsèque 1926x816. */ #searchScreen .search-bottom-mask{ display:block!important; position:absolute!important; left:0!important; right:auto!important; bottom:7.9%!important; width:100%!important; height:auto!important; aspect-ratio:auto!important; z-index:80!important; margin:0!important; padding:0!important; overflow:visible!important; pointer-events:none!important; background:none!important; background-image:none!important; transform:none!important; } #searchScreen .search-bottom-mask > img{ display:block!important; position:relative!important; width:100%!important; max-width:100%!important; height:auto!important; max-height:none!important; aspect-ratio:auto!important; object-fit:contain!important; object-position:center bottom!important; margin:0!important; padding:0!important; transform:none!important; pointer-events:none!important; } #searchScreen .main-search-results{ z-index:40!important; padding-bottom:48%!important; } #searchScreen .canonical-bottom-nav{z-index:100!important;} /* 14/08/2026 — RECHERCHE : source unique du décor inférieur. IMPORTANT : le décor est rendu UNIQUEMENT par l'IMG du DOM. Tous les anciens backgrounds/pseudo-elements sont neutralisés. */ #searchScreen.search-reference::after, #searchScreen .main-search-results::before, #searchScreen .main-search-results::after { content: none !important; display: none !important; background: none !important; background-image: none !important; } #searchScreen .search-bottom-mask { display: block !important; position: absolute !important; left: 0 !important; right: 0 !important; bottom: 7.9% !important; width: 100% !important; height: auto !important; aspect-ratio: auto !important; z-index: 80 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; pointer-events: none !important; background: none !important; background-image: none !important; transform: none !important; } #searchScreen .search-bottom-mask > img { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; max-height: none !important; object-fit: contain !important; object-position: center bottom !important; margin: 0 !important; padding: 0 !important; transform: none !important; pointer-events: none !important; } #searchScreen .main-search-results { z-index: 40 !important; padding-bottom: 48% !important; } #searchScreen .canonical-bottom-nav { z-index: 100 !important; } /* 14/08/2026 — RECHERCHE CLEAN LAYER v2 Autorité finale : un seul décor, rendu uniquement par l'IMG .search-bottom-mask > img. */ #searchScreen.search-reference { background:#000!important; background-image:none!important; overflow:hidden!important; isolation:isolate!important; } #searchScreen.search-reference::before { content:""!important; display:block!important; position:absolute!important; inset:0!important; z-index:0!important; pointer-events:none!important; background:url('/assets/reference/05_recherche_fond.png') top center/100% auto no-repeat!important; } #searchScreen.search-reference::after, #searchScreen .main-search-results::before, #searchScreen .main-search-results::after, #searchScreen .search-bottom-mask::before, #searchScreen .search-bottom-mask::after { content:none!important; display:none!important; background:none!important; background-image:none!important; } #searchScreen .search-bottom-mask { position:absolute!important; left:0!important; right:0!important; bottom:7.9%!important; width:100%!important; height:auto!important; z-index:80!important; pointer-events:none!important; overflow:visible!important; background:none!important; background-image:none!important; margin:0!important; padding:0!important; } #searchScreen .search-bottom-mask > img { display:block!important; position:static!important; width:100%!important; height:auto!important; max-width:none!important; max-height:none!important; object-fit:contain!important; margin:0!important; padding:0!important; } #searchScreen .main-search-results { z-index:40!important; overflow-y:auto!important; padding-bottom:48%!important; background:none!important; background-image:none!important; } #searchScreen .canonical-bottom-nav { z-index:100!important; } /* 14/08/2026 — RECHERCHE : neutralisation DEFINITIVE des anciens décors hérités. Le seul décor autorisé est l'IMG enfant de .search-bottom-mask. */ #searchScreen.search-reference.search-has-results::after, #searchScreen.search-reference:not(.search-has-results)::after, #searchScreen.search-reference.search-has-results .main-search-results::after, #searchScreen.search-reference:not(.search-has-results) .main-search-results::after, #searchScreen.search-reference .main-search-results::after, #searchScreen.search-reference .main-search-results::before { content:none!important; display:none!important; background:none!important; background-image:none!important; } #searchScreen.search-reference .search-bottom-mask { display:block!important; position:absolute!important; left:0!important; right:0!important; bottom:7.9%!important; width:100%!important; height:auto!important; z-index:80!important; pointer-events:none!important; background:none!important; background-image:none!important; margin:0!important; padding:0!important; } #searchScreen.search-reference .search-bottom-mask > img { display:block!important; width:100%!important; height:auto!important; object-fit:contain!important; margin:0!important; padding:0!important; } /* ACCUEIL DYNAMIQUE — fond + avatar + décor séparés */ .home-reference{aspect-ratio:auto!important;min-height:100dvh!important;background:#000!important;overflow-y:auto!important;overflow-x:hidden!important;padding-bottom:clamp(122px,27vw,220px)!important} .home-hero{position:relative;width:100%;height:clamp(220px,52vw,445px);background:url('/assets/reference/02_accueil_fond.png') top center/100% auto no-repeat;pointer-events:none} .home-welcome{position:absolute;z-index:8;top:clamp(160px,38vw,325px);right:4.5%;display:flex;align-items:center;gap:clamp(8px,2vw,18px)} .home-avatar{width:clamp(78px,18vw,150px);height:auto;display:block;filter:drop-shadow(0 4px 10px rgba(0,0,0,.7))} .home-greeting{text-align:right;display:flex;flex-direction:column;text-shadow:0 2px 5px #000}.home-greeting strong{font-size:clamp(20px,4.6vw,38px);font-weight:500;line-height:1.05}.home-greeting span{font-family:cursive;font-style:italic;color:#ff6500;font-size:clamp(14px,3.2vw,27px);line-height:1.1;margin-top:4px} .home-live{position:relative;z-index:5;margin-top:0;padding:0 3.4%;display:flex;flex-direction:column;gap:clamp(12px,2.6vw,22px)} .home-actions{display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,2vw,16px)} .home-action-card{position:relative;min-height:clamp(100px,23vw,190px);border:1px solid #8a3b00;border-radius:14px;background:linear-gradient(145deg,rgba(23,15,8,.96),rgba(3,3,3,.98));color:#fff;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;padding:clamp(10px,2.2vw,17px);text-align:left;box-shadow:inset 0 0 24px rgba(255,101,0,.025)} .home-action-card>b{font-size:clamp(24px,6vw,50px);color:#ff6500}.home-action-card strong{display:block;font-size:clamp(15px,3.4vw,28px);line-height:1.08}.home-action-card em{font-style:normal;color:#ff6500}.home-action-card small{display:block;margin-top:7px;color:#ddd;font-size:clamp(9px,2.05vw,16px);line-height:1.25}.home-action-card i{font-style:normal;color:#ff6500;font-size:clamp(25px,5vw,40px)}.home-action-card u{position:absolute;right:7%;top:5%;text-decoration:none;background:#f0182d;color:#fff;border-radius:999px;min-width:26px;height:26px;padding:0 7px;display:grid;place-items:center;font-weight:700;font-size:13px} .home-section{min-width:0}.home-section header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.home-section h2{margin:0;color:#eee;font-size:clamp(15px,3.15vw,26px);font-weight:600;white-space:nowrap}.home-section-icon{color:#ff6500}.home-section header button{border:0;background:none;color:#ff6500;font-size:clamp(12px,2.45vw,18px);cursor:pointer;white-space:nowrap;padding:4px} .home-news-list{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding-bottom:3px;min-height:0}.home-news-list::-webkit-scrollbar{display:none}.home-news-card{flex:0 0 31%;min-width:0;border:1px solid #7a3200;border-radius:10px;background:#080808;color:#fff;padding:0;overflow:hidden;text-align:left;cursor:pointer;scroll-snap-align:start}.home-news-poster{width:100%;aspect-ratio:2/3;background:#111;overflow:hidden;display:grid;place-items:center}.home-news-poster img{display:block;width:100%;height:100%;object-fit:cover}.home-news-no-poster{font-size:28px}.home-news-copy{padding:6px 7px 8px}.home-news-copy strong{display:block;font-size:clamp(10px,2.2vw,16px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.home-news-copy small{display:block;color:#aaa;font-size:clamp(8px,1.8vw,13px);margin-top:3px}.home-empty{color:#969696;margin:4px 0 2px;padding:8px 0;font-size:clamp(11px,2.4vw,17px)} .home-recent-summary{width:min(78%,640px);min-height:clamp(66px,15vw,120px);border:1px solid #6f3a18;border-radius:12px;background:rgba(8,8,8,.94);color:#fff;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:10px 14px;text-align:left}.home-recent-summary>b{color:#ff6500;font-size:clamp(26px,6vw,48px);line-height:1}.home-recent-summary span{font-size:clamp(11px,2.35vw,19px);line-height:1.2}.home-recent-summary small{display:block;color:#aaa;margin-top:4px}.home-recent-summary i{font-style:normal;color:#ff6500;font-size:26px}.home-recent-summary.home-zero{opacity:.82} .home-bottom-decor{position:absolute;z-index:18;left:0;bottom:clamp(70px,15.5vw,132px);width:100%;height:auto;pointer-events:none}.home-reference .canonical-bottom-nav{z-index:40!important;bottom:1.7%!important}.home-reference .cbn-home{color:#ff6500}.home-reference .canonical-bottom-nav .cbn-badge.hidden{display:none!important} @media(max-width:520px){.home-hero{height:220px}.home-welcome{top:168px;right:4%}.home-live{gap:13px}.home-actions{gap:8px}.home-action-card{padding:9px}.home-section h2{font-size:15px}.home-recent-summary{width:80%}} /* ====================================================================== 14/08/2026 — NAVIGATION CANONIQUE GLOBALE + ACCUEIL V3 Une seule geometrie pour tous les ecrans. Aucune variante locale. ====================================================================== */ :root{ --ttf-nav-side:clamp(10px,3vw,16px); --ttf-nav-bottom:0px; --ttf-nav-height:clamp(72px,16vw,84px); --ttf-nav-radius:clamp(22px,6vw,30px); } /* La navigation a exactement la meme place sur tous les panneaux. */ .canonical-bottom-nav, .search-reference .canonical-bottom-nav, .home-reference .canonical-bottom-nav, #myRequestsScreen .canonical-bottom-nav, #searchScreen .canonical-bottom-nav, #catalogScreen .canonical-bottom-nav, .emby-config-reference .canonical-bottom-nav{ position:fixed!important; left:50%!important; right:auto!important; bottom:var(--ttf-nav-bottom)!important; transform:translateX(-50%)!important; width:min(calc(100vw - (2 * var(--ttf-nav-side))), calc(853px - (2 * var(--ttf-nav-side))))!important; height:var(--ttf-nav-height)!important; min-height:var(--ttf-nav-height)!important; max-height:var(--ttf-nav-height)!important; margin:0!important; padding:5px 8px!important; grid-template-columns:repeat(5,minmax(0,1fr))!important; align-items:center!important; border:1px solid rgba(255,255,255,.11)!important; border-radius:var(--ttf-nav-radius)!important; background:linear-gradient(180deg,rgba(22,22,22,.985),rgba(7,7,7,.99))!important; box-shadow:0 -7px 22px rgba(0,0,0,.72)!important; z-index:1000!important; pointer-events:auto!important; } .canonical-bottom-nav .cbn-item{ min-width:0!important;height:100%!important;margin:0!important;padding:4px 2px!important; display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important; gap:3px!important;border:0!important;background:transparent!important; font-family:Arial,sans-serif!important;font-size:clamp(10px,2.45vw,12px)!important;line-height:1!important; font-weight:400!important;color:#aaa!important;text-align:center!important; } .canonical-bottom-nav .cbn-item .cbn-icon{ display:block!important;font-size:clamp(20px,5vw,25px)!important;line-height:1!important;height:auto!important; } .canonical-bottom-nav .cbn-item.active, .home-reference .canonical-bottom-nav .cbn-home{color:#ff6500!important} .canonical-bottom-nav .cbn-badge{ position:absolute!important;top:2px!important;margin-left:24px!important; min-width:18px!important;height:18px!important;padding:0 5px!important;border-radius:999px!important; display:grid!important;place-items:center!important;background:#f0182d!important;color:#fff!important; font-size:10px!important;font-weight:700!important;line-height:1!important; } .canonical-bottom-nav .cbn-badge.hidden{display:none!important} /* Toasts : toujours juste au-dessus de la barre canonique. */ .toast{ z-index:1200!important; bottom:calc(var(--ttf-nav-bottom) + var(--ttf-nav-height) + 10px)!important; max-width:min(90vw,520px)!important; } /* Recherche : le decor transparent se cale sur la meme reference basse. */ #searchScreen .search-bottom-mask{ bottom:calc(var(--ttf-nav-bottom) + var(--ttf-nav-height) - 1px)!important; z-index:800!important; } #searchScreen .main-search-results{ bottom:calc(var(--ttf-nav-bottom) + var(--ttf-nav-height))!important; } /* --------------------------- ACCUEIL V3 --------------------------- */ .home-reference{ position:relative!important; min-height:100dvh!important; height:auto!important; background:#000!important; overflow-x:hidden!important; overflow-y:auto!important; padding-bottom:calc(var(--ttf-nav-height) + var(--ttf-nav-bottom) + clamp(150px,34vw,220px))!important; } .home-hero{ width:100%!important; height:clamp(220px,50vw,330px)!important; background:url('/assets/reference/02_accueil_fond.png') top center/100% auto no-repeat!important; } .home-welcome{ top:clamp(168px,39vw,250px)!important; right:3.3%!important; gap:clamp(5px,1.4vw,10px)!important; align-items:center!important; } .home-avatar{ width:clamp(72px,17vw,112px)!important; max-width:20vw!important; flex:0 0 auto!important; } .home-greeting{max-width:66vw!important;text-align:right!important} .home-greeting strong{ font-size:clamp(19px,4.5vw,30px)!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; } .home-greeting span{ font-size:clamp(13px,3.15vw,21px)!important; white-space:nowrap!important; } .home-live{ position:relative!important; z-index:5!important; margin-top:0!important; padding:0 3.2%!important; gap:clamp(14px,3vw,20px)!important; } .home-actions{gap:clamp(8px,2vw,14px)!important} .home-action-card{ min-height:clamp(100px,24vw,150px)!important; border-radius:14px!important; padding:clamp(9px,2vw,14px)!important; } .home-action-card>b{font-size:clamp(28px,6vw,40px)!important} .home-action-card strong{font-size:clamp(15px,3.6vw,23px)!important} .home-action-card small{font-size:clamp(9px,2.15vw,14px)!important} .home-section h2{font-size:clamp(15px,3.2vw,22px)!important} .home-section header button{font-size:clamp(12px,2.6vw,16px)!important} .home-recent-summary{width:min(80%,620px)!important} /* Le decor bas est une couche independante et se place toujours juste au-dessus de la nav. */ .home-bottom-decor{ position:absolute!important; left:0!important;right:0!important; bottom:calc(var(--ttf-nav-bottom) + var(--ttf-nav-height) - 1px)!important; width:100%!important;height:auto!important; z-index:800!important;pointer-events:none!important; } /* Le contenu ne doit jamais passer sous le decor / la barre. */ #appScreen .home-live{padding-bottom:clamp(12px,3vw,24px)!important} @media(max-width:520px){ .home-hero{height:220px!important} .home-welcome{top:166px!important;right:3%!important} .home-avatar{width:72px!important} .home-greeting strong{font-size:19px!important} .home-greeting span{font-size:13px!important} .home-live{gap:14px!important} } /* ============================================================ ÉCRAN 04 — MES DEMANDES : ARCHITECTURE NEUTRE VALIDÉE 14/08/2026 Fond + décor bas transparent + corbeau séparé pour futur Easter Egg. Tout le contenu fonctionnel reste construit en HTML/CSS/JS. ============================================================ */ #myRequestsScreen.myrequests-reference{ aspect-ratio:853/1844!important; min-height:0!important; background-color:#000!important; background-image:url('/assets/reference/04_mes_demandes_fond.png')!important; background-size:100% 100%!important; background-position:top center!important; background-repeat:no-repeat!important; overflow:hidden!important; } #myRequestsScreen.myrequests-reference::before, #myRequestsScreen.myrequests-reference::after{ content:none!important; display:none!important; background:none!important; } #myRequestsScreen .myrequests-live{ position:absolute!important; left:2.6%!important; right:2.6%!important; top:16.6%!important; bottom:29.0%!important; height:auto!important; z-index:30!important; background:transparent!important; overflow:hidden!important; } #myRequestsScreen .myrequests-filters{ position:relative!important; z-index:34!important; height:auto!important; min-height:4.4%!important; padding:0 0 1.1%!important; background:transparent!important; } #myRequestsScreen .myrequests-cards{ position:relative!important; z-index:33!important; height:calc(100% - 5.4%)!important; overflow-y:auto!important; overflow-x:hidden!important; background:transparent!important; padding:0 0 18%!important; scrollbar-width:none!important; } #myRequestsScreen .myrequests-cards::-webkit-scrollbar{display:none!important} #myRequestsScreen .myrequests-decor-bas{ position:absolute!important; z-index:42!important; left:0!important; bottom:7.7%!important; width:100%!important; height:auto!important; object-fit:contain!important; pointer-events:none!important; user-select:none!important; } #myRequestsScreen .myrequests-crow-easteregg{ position:absolute!important; z-index:43!important; right:7.2%!important; bottom:14.4%!important; width:27.5%!important; height:auto!important; object-fit:contain!important; pointer-events:none!important; user-select:none!important; transform-origin:50% 100%!important; } #myRequestsScreen .canonical-bottom-nav{ z-index:60!important; } #myRequestsScreen .myrequests-back{ z-index:61!important; } /* ============================================================ MES DEMANDES — FINITION 14/08/2026 Corrige le tassement du bandeau et des filtres sans toucher aux PNG. ============================================================ */ #myRequestsScreen.myrequests-reference{ background-size:100% auto!important; background-position:top center!important; } #myRequestsScreen .myrequests-live{ top:18.2%!important; bottom:27.5%!important; overflow:hidden!important; } #myRequestsScreen .myrequests-filters{ display:flex!important; align-items:center!important; gap:clamp(6px,1.5vw,10px)!important; min-height:46px!important; height:42px!important; padding:0 1px 8px!important; margin:0!important; overflow-x:auto!important; overflow-y:visible!important; scrollbar-width:none!important; } #myRequestsScreen .myrequests-filters::-webkit-scrollbar{display:none!important} #myRequestsScreen .myreq-filter{ flex:0 0 auto!important; height:34px!important; min-height:34px!important; padding:0 clamp(12px,3.2vw,18px)!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; border-radius:999px!important; line-height:1!important; font-size:clamp(11px,2.75vw,14px)!important; font-weight:600!important; white-space:nowrap!important; } #myRequestsScreen .myrequests-cards{ height:calc(100% - 50px)!important; padding-top:7px!important; padding-bottom:clamp(125px,30vw,175px)!important; overflow-y:auto!important; overflow-x:hidden!important; } #myRequestsScreen .myreq-card{ margin-bottom:10px!important; } #myRequestsScreen .myrequests-decor-bas{ bottom:calc(var(--ttf-nav-bottom) + var(--ttf-nav-height) - 1px)!important; width:100%!important; height:auto!important; } #myRequestsScreen .myrequests-crow-easteregg{ right:7.5%!important; bottom:calc(var(--ttf-nav-bottom) + var(--ttf-nav-height) + 7.5%)!important; width:26%!important; height:auto!important; } @media(max-width:520px){ #myRequestsScreen .myrequests-live{top:18.4%!important;bottom:27.5%!important} #myRequestsScreen .myrequests-filters{height:40px!important;min-height:40px!important;gap:6px!important;padding-bottom:7px!important} #myRequestsScreen .myreq-filter{height:32px!important;min-height:32px!important;padding:0 11px!important;font-size:11px!important} #myRequestsScreen .myrequests-cards{height:calc(100% - 47px)!important;padding-top:7px!important} } /* ============================================================ MES DEMANDES — CORRECTION GEOMETRIE FINALE 14/08/2026 - 5 filtres visibles sur une seule ligne, non écrasés - décor inférieur plus bas, légèrement derrière la barre canonique - corbeau recalé indépendamment à son emplacement de référence ============================================================ */ #myRequestsScreen .myrequests-live{ top:17.4%!important; bottom:27.5%!important; } #myRequestsScreen .myrequests-filters{ display:grid!important; grid-template-columns:1fr 1.18fr 1.18fr 1.28fr 1.08fr!important; column-gap:4px!important; align-items:center!important; width:100%!important; height:42px!important; min-height:46px!important; padding:3px 0 5px!important; margin:0!important; overflow:visible!important; } #myRequestsScreen .myreq-filter{ box-sizing:border-box!important; width:100%!important; min-width:0!important; max-width:none!important; height:34px!important; min-height:34px!important; padding:0 3px!important; margin:0!important; display:flex!important; align-items:center!important; justify-content:center!important; border-radius:999px!important; font-size:clamp(9px,2.35vw,11px)!important; line-height:1!important; letter-spacing:-.1px!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:clip!important; } #myRequestsScreen .myrequests-cards{ height:calc(100% - 47px)!important; padding-top:7px!important; padding-bottom:150px!important; } #myRequestsScreen .myrequests-decor-bas{ left:3%!important; right:auto!important; width:94%!important; max-width:none!important; bottom:calc(var(--ttf-nav-bottom) + var(--ttf-nav-height) - 23px)!important; transform:none!important; } #myRequestsScreen .myrequests-crow-easteregg{ right:7.5%!important; width:22%!important; max-width:none!important; bottom:calc(var(--ttf-nav-bottom) + var(--ttf-nav-height) + 10.5%)!important; transform:none!important; } @media(max-width:520px){ #myRequestsScreen .myrequests-live{top:17.4%!important;bottom:27.5%!important} #myRequestsScreen .myrequests-filters{ display:grid!important; grid-template-columns:1fr 1.18fr 1.18fr 1.28fr 1.08fr!important; column-gap:3px!important; height:40px!important; min-height:40px!important; padding:3px 0 5px!important; } #myRequestsScreen .myreq-filter{ width:100%!important; min-width:0!important; height:32px!important; min-height:32px!important; padding:0 2px!important; font-size:10px!important; } #myRequestsScreen .myrequests-cards{height:calc(100% - 45px)!important;padding-top:7px!important} #myRequestsScreen .myrequests-decor-bas{ left:3%!important; width:94%!important; bottom:calc(var(--ttf-nav-bottom) + var(--ttf-nav-height) - 23px)!important; } #myRequestsScreen .myrequests-crow-easteregg{ right:7.5%!important; width:22%!important; bottom:calc(var(--ttf-nav-bottom) + var(--ttf-nav-height) + 10.5%)!important; } } /* ============================================================ MES DEMANDES — ALIGNEMENT DECOR BAS SUR LA REFERENCE ACCUEIL 14/08/2026 La ligne de base du decor doit etre identique a l'Accueil : le visuel descend derriere la barre canonique au lieu de flotter trop haut. ============================================================ */ #myRequestsScreen .myrequests-decor-bas{ left:3%!important; width:94%!important; bottom:calc(var(--ttf-nav-bottom) + var(--ttf-nav-height) - 134px)!important; } #myRequestsScreen .myrequests-crow-easteregg{ right:7.5%!important; width:22%!important; bottom:calc(var(--ttf-nav-bottom) + var(--ttf-nav-height) - 5px)!important; } @media(max-width:520px){ #myRequestsScreen .myrequests-decor-bas{ left:3%!important; width:94%!important; bottom:calc(var(--ttf-nav-bottom) + var(--ttf-nav-height) - 134px)!important; } #myRequestsScreen .myrequests-crow-easteregg{ right:7.5%!important; width:22%!important; bottom:calc(var(--ttf-nav-bottom) + var(--ttf-nav-height) - 5px)!important; } } /* ============================================================ MES DEMANDES — BASE DECOR = ACCUEIL (REFERENCE GLOBALE) 14/08/2026 Le decor bas reprend exactement la ligne de base de l'Accueil. ============================================================ */ #myRequestsScreen .myrequests-decor-bas{ left:0!important; right:0!important; width:100%!important; bottom:calc(var(--ttf-nav-bottom) + var(--ttf-nav-height) - 1px)!important; transform:none!important; } #myRequestsScreen .myrequests-crow-easteregg{ right:7.5%!important; width:22%!important; bottom:calc(var(--ttf-nav-bottom) + var(--ttf-nav-height) + 10.5%)!important; transform:none!important; } @media(max-width:520px){ #myRequestsScreen .myrequests-decor-bas{ left:0!important; right:0!important; width:100%!important; bottom:calc(var(--ttf-nav-bottom) + var(--ttf-nav-height) - 1px)!important; } #myRequestsScreen .myrequests-crow-easteregg{ right:7.5%!important; width:22%!important; bottom:calc(var(--ttf-nav-bottom) + var(--ttf-nav-height) + 10.5%)!important; } } /* ============================================================ MES DEMANDES — SCROLL DERRIERE DECOR + BASE BASSE STANDARD 14/08/2026 Même principe que Recherche : - la zone des cartes descend jusqu'à la navigation - les cartes défilent derrière le décor - le décor reste fixe devant les cartes - la navigation canonique reste au premier plan ============================================================ */ #myRequestsScreen.myrequests-reference{ overflow:hidden!important; isolation:isolate!important; } #myRequestsScreen .myrequests-live{ position:absolute!important; left:2.6%!important; right:2.6%!important; top:17.4%!important; bottom:calc(var(--ttf-nav-bottom) + var(--ttf-nav-height) - 8px)!important; height:auto!important; z-index:40!important; overflow:hidden!important; background:transparent!important; } #myRequestsScreen .myrequests-cards{ position:relative!important; height:calc(100% - 45px)!important; overflow-y:auto!important; overflow-x:hidden!important; background:transparent!important; padding-top:7px!important; padding-bottom:43%!important; box-sizing:border-box!important; overscroll-behavior:contain!important; -webkit-overflow-scrolling:touch!important; } #myRequestsScreen .myreq-card{ position:relative!important; z-index:1!important; } #myRequestsScreen .myrequests-decor-bas{ position:absolute!important; display:block!important; left:0!important; right:0!important; bottom:calc(var(--ttf-nav-bottom) + var(--ttf-nav-height) - 10px)!important; width:100%!important; height:auto!important; max-width:none!important; z-index:80!important; margin:0!important; padding:0!important; pointer-events:none!important; user-select:none!important; transform:none!important; } #myRequestsScreen .myrequests-crow-easteregg{ position:absolute!important; right:7.5%!important; bottom:calc(var(--ttf-nav-bottom) + var(--ttf-nav-height) + 9.5%)!important; width:22%!important; height:auto!important; max-width:none!important; z-index:85!important; pointer-events:none!important; user-select:none!important; transform:none!important; } #myRequestsScreen .canonical-bottom-nav{ z-index:100!important; } @media(max-width:520px){ #myRequestsScreen .myrequests-live{ top:17.4%!important; bottom:calc(var(--ttf-nav-bottom) + var(--ttf-nav-height) - 8px)!important; } #myRequestsScreen .myrequests-cards{ height:calc(100% - 45px)!important; padding-bottom:43%!important; } #myRequestsScreen .myrequests-decor-bas{ bottom:calc(var(--ttf-nav-bottom) + var(--ttf-nav-height) - 10px)!important; } #myRequestsScreen .myrequests-crow-easteregg{ right:7.5%!important; width:22%!important; bottom:calc(var(--ttf-nav-bottom) + var(--ttf-nav-height) + 9.5%)!important; } } /* ============================================================ MES DEMANDES — DECOR BAS RAS DE LA BARRE CANONIQUE 14/08/2026 Même logique visuelle que Recherche : le décor reste devant les cartes, mais sa masse visuelle est descendue derrière la nav. ============================================================ */ #myRequestsScreen .myrequests-decor-bas{ bottom:calc(var(--ttf-nav-bottom) + var(--ttf-nav-height) - clamp(92px,22vw,112px))!important; } #myRequestsScreen .myrequests-crow-easteregg{ bottom:calc(var(--ttf-nav-bottom) + var(--ttf-nav-height) - clamp(16px,3.5vw,24px))!important; } @media(max-width:520px){ #myRequestsScreen .myrequests-decor-bas{ bottom:calc(var(--ttf-nav-bottom) + var(--ttf-nav-height) - 98px)!important; } #myRequestsScreen .myrequests-crow-easteregg{ bottom:calc(var(--ttf-nav-bottom) + var(--ttf-nav-height) - 18px)!important; } } /* ============================================================ MES DEMANDES — CORBEAU ENTRE LA POUPEE ET LE MASQUE 14/08/2026 Position uniquement : PNG inchangé. ============================================================ */ #myRequestsScreen .myrequests-crow-easteregg{ left:52%!important; right:auto!important; width:18%!important; transform:translateX(-50%)!important; bottom:calc(var(--ttf-nav-bottom) + var(--ttf-nav-height) - clamp(18px,4vw,26px))!important; } @media(max-width:520px){ #myRequestsScreen .myrequests-crow-easteregg{ left:53%!important; right:auto!important; width:19%!important; transform:translateX(-50%)!important; bottom:calc(var(--ttf-nav-bottom) + var(--ttf-nav-height) - 20px)!important; } } /* 14/08/2026 — RECHERCHE : décor bas abaissé au ras de la barre canonique. On conserve le scroll derrière le décor ; seule la position verticale change. */ #searchScreen .search-bottom-mask{ bottom:5.5%!important; } #searchScreen .canonical-bottom-nav{ z-index:100!important; } /* 14/08/2026 — RECHERCHE : décor encore abaissé pour supprimer totalement la bande noire au-dessus de la barre canonique. */ #searchScreen .search-bottom-mask{ bottom:3.3%!important; } /* ====================================================================== 14/08/2026 — CORRECTION AUTORITAIRE RECHERCHE + FICHE 21 - bandeau Recherche prolongé verticalement jusqu'aux contrôles - décor Recherche abaissé pour que le sol touche/chevauche la nav - fiche 21 : suppression du faux doublon de décor - fiche 21 : barre canonique strictement identique aux autres écrans ====================================================================== */ /* RECHERCHE — le visuel supérieur garde le même X mais est légèrement étiré vers le bas. Les contrôles HTML restent au-dessus (z-index 70). */ #searchScreen.search-reference::before{ height:24.5%!important; transform:scaleY(1.12)!important; transform-origin:top center!important; background-position:top center!important; } /* RECHERCHE — le PNG RGBA comporte quelques pixels transparents sous le sol. On descend donc le calque de 10px derrière la barre afin que le décor visible arrive réellement à ras de la navigation, sans bande noire. */ #searchScreen.search-reference .search-bottom-mask{ bottom:calc(var(--ttf-nav-bottom) + var(--ttf-nav-height) - 10px)!important; } #searchScreen.search-reference .search-bottom-mask > img{ display:block!important; width:100%!important; height:auto!important; } /* La liste continue jusque derrière le décor et jusqu'au haut de la nav. */ #searchScreen .main-search-results{ bottom:calc(var(--ttf-nav-bottom) + var(--ttf-nav-height))!important; z-index:40!important; } #searchScreen .search-bottom-mask{z-index:800!important;pointer-events:none!important} #searchScreen .canonical-bottom-nav{z-index:1000!important} /* FICHE 21 — le fond validé contient déjà son décor inférieur : l'ancien pseudo-calque qui recopiait le bas de l'image créait un second décor. */ #detailModal .modal-card::after{ content:none!important; display:none!important; background:none!important; background-image:none!important; } /* FICHE 21 — neutralise toutes les anciennes coordonnées locales de la barre. Même géométrie fixe que la barre canonique globale, sans translate parasite. */ #detailModal .detail-canonical-nav{ position:fixed!important; left:50%!important; right:auto!important; bottom:var(--ttf-nav-bottom)!important; transform:translateX(-50%)!important; width:min(calc(100vw - (2 * var(--ttf-nav-side))), calc(853px - (2 * var(--ttf-nav-side))))!important; height:var(--ttf-nav-height)!important; min-height:var(--ttf-nav-height)!important; max-height:var(--ttf-nav-height)!important; margin:0!important; padding:5px 8px!important; grid-template-columns:repeat(5,minmax(0,1fr))!important; align-items:center!important; border:1px solid rgba(255,255,255,.11)!important; border-radius:var(--ttf-nav-radius)!important; background:linear-gradient(180deg,rgba(22,22,22,.985),rgba(7,7,7,.99))!important; box-shadow:0 -7px 22px rgba(0,0,0,.72)!important; z-index:1000!important; pointer-events:auto!important; } #detailModal .detail-canonical-nav .cbn-item{ min-width:0!important; height:100%!important; margin:0!important; padding:4px 2px!important; display:flex!important; flex-direction:column!important; justify-content:center!important; align-items:center!important; gap:3px!important; border:0!important; background:transparent!important; font-family:Arial,sans-serif!important; font-size:clamp(10px,2.45vw,12px)!important; line-height:1!important; font-weight:400!important; color:#aaa!important; text-align:center!important; } #detailModal .detail-canonical-nav .cbn-icon{ display:block!important; font-size:clamp(20px,5vw,25px)!important; line-height:1!important; height:auto!important; } #detailModal .detail-canonical-nav .cbn-search{color:#ff6500!important} /* Le contenu de la fiche ne doit jamais passer sous la barre fixe. */ #detailModal .detail-content{ bottom:calc(var(--ttf-nav-height) + var(--ttf-nav-bottom) + 18px)!important; padding-bottom:18px!important; scroll-padding-bottom:18px!important; } /* ====================================================================== 14/08/2026 — RECHERCHE / FICHE : CORRECTION GEOMETRIQUE AUTORITAIRE But : supprimer les deux bandes noires visibles et fiabiliser la fiche. ====================================================================== */ /* Le PNG du bandeau contient lui-même une grande zone noire sous le visuel. L'étirer ne rapproche donc pas visuellement le bandeau des contrôles. On rapproche les contrôles HTML du visuel au lieu de déformer l'image. */ #searchScreen.search-reference{ /* Le visuel utile du PNG 05_recherche_fond.png se termine vers 24,1 % de sa LARGEUR. Les coordonnées du bloc supérieur sont donc désormais liées à la largeur du panneau, et non à sa hauteur. */ --search-header-visible-end:calc(min(100vw, 853px) * 0.241); --search-input-top:calc(var(--search-header-visible-end) + 1px); --search-input-height:clamp(40px, 9.2vw, 46px); --search-filter-top:calc(var(--search-input-top) + var(--search-input-height) + clamp(8px, 2vw, 12px)); --search-filter-height:clamp(36px, 8vw, 42px); --search-results-top:calc(var(--search-filter-top) + var(--search-filter-height) + clamp(8px, 2vw, 12px)); } #searchScreen.search-reference::before{ transform:none!important; height:24.5%!important; background-size:100% auto!important; background-position:top center!important; } #searchScreen .main-search-input, #searchScreen .main-search-input:focus, #searchScreen .main-search-input:not(:placeholder-shown){ top:var(--search-input-top)!important; height:var(--search-input-height)!important; } #searchScreen .search-filter-hit{ top:var(--search-filter-top)!important; height:var(--search-filter-height)!important; } #searchScreen .main-search-results{ top:var(--search-results-top)!important; } /* Le PNG transparent du décor possède une marge alpha basse. On fait donc réellement passer le bas du calque derrière la barre canonique. Ainsi le sol visible rejoint la barre sans aucun liseré noir. */ #searchScreen.search-reference .search-bottom-mask{ bottom:calc(var(--ttf-nav-bottom) + var(--ttf-nav-height) - 46px)!important; } #searchScreen.search-reference .search-bottom-mask > img{ display:block!important; width:100%!important; height:auto!important; object-fit:contain!important; object-position:center bottom!important; } #searchScreen .main-search-results{ bottom:var(--ttf-nav-bottom)!important; padding-bottom:48%!important; } #searchScreen .search-bottom-mask{z-index:800!important} #searchScreen .canonical-bottom-nav{z-index:1000!important} /* FICHE : suppression définitive de toute copie de décor ajoutée par CSS. */ #detailModal .modal-card::before, #detailModal .modal-card::after{ content:none!important; display:none!important; background:none!important; background-image:none!important; } /* FICHE : la barre est fixée au viewport avec des bords calculés sur la largeur canonique max 853px. Pas de translate => aucun risque de demi-barre. */ #detailModal .detail-canonical-nav{ position:fixed!important; left:max(var(--ttf-nav-side), calc((100vw - 853px)/2 + var(--ttf-nav-side)))!important; right:max(var(--ttf-nav-side), calc((100vw - 853px)/2 + var(--ttf-nav-side)))!important; width:auto!important; bottom:var(--ttf-nav-bottom)!important; transform:none!important; height:var(--ttf-nav-height)!important; min-height:var(--ttf-nav-height)!important; max-height:var(--ttf-nav-height)!important; margin:0!important; z-index:2000!important; } #detailModal .detail-content{ bottom:calc(var(--ttf-nav-height) + var(--ttf-nav-bottom) + 10px)!important; padding-bottom:22%!important; scroll-padding-bottom:22%!important; } /* ====================================================================== 15/08/2026 — RESPONSIVE MOBILE MULTI-RÉSOLUTIONS (AUTORITÉ FINALE) Référence visuelle conservée à 390x844, mais géométrie basée sur : - largeur pour les bandeaux supérieurs, - hauteur dynamique (dvh) pour la barre et les décors inférieurs, - zones de contenu scrollables indépendantes. Cible : petits/tall téléphones sans étirement du décor ni bande noire. ====================================================================== */ :root{ --ttf-panel-w:min(100vw, 853px); --ttf-safe-bottom:env(safe-area-inset-bottom, 0px); --ttf-nav-bottom:0px; --ttf-nav-core-height:clamp(60px, 8.5dvh, 84px); --ttf-nav-height:calc(var(--ttf-nav-core-height) + var(--ttf-safe-bottom)); --ttf-nav-side:clamp(8px, 2.7vw, 16px); --ttf-nav-radius:clamp(20px, 5.5vw, 30px); /* Largeur maxi des grands décors 3:2 sur les écrans courts. 46.21dvh = 390px à la hauteur de référence 844px. */ --ttf-decor-wide:min(100%, 46.21dvh); /* Décors 3:2 (Demandes/Catalogue/Profil) : moins agressifs sur écrans courts. */ --ttf-tall-decor-wide:min(100%, 52dvh); } html,body{min-height:100%;background:#000} body{overflow-x:hidden} .mobile-shell{width:min(100vw,853px);max-width:853px;min-height:100dvh;margin:0 auto;background:#000} /* Les cinq écrans principaux utilisent désormais le vrai viewport du téléphone, jamais un aspect-ratio fixe 390x844. */ #appScreen.home-reference, #searchScreen.search-reference, #myRequestsScreen.myrequests-reference, #catalogScreen.catalog-reference, #profileScreen.profile-reference{ width:100%!important; height:100dvh!important; min-height:100dvh!important; max-height:100dvh!important; aspect-ratio:auto!important; position:relative!important; overflow:hidden!important; background-color:#000!important; isolation:isolate!important; } /* Barre canonique : même géométrie et même ancrage sur toutes les résolutions. */ .canonical-bottom-nav, .search-reference .canonical-bottom-nav, .home-reference .canonical-bottom-nav, #myRequestsScreen .canonical-bottom-nav, #searchScreen .canonical-bottom-nav, #catalogScreen .canonical-bottom-nav, #profileScreen .canonical-bottom-nav, .emby-config-reference .canonical-bottom-nav, #detailModal .detail-canonical-nav{ position:fixed!important; left:50%!important; right:auto!important; bottom:0!important; transform:translateX(-50%)!important; width:min(calc(100vw - (2 * var(--ttf-nav-side))), calc(853px - (2 * var(--ttf-nav-side))))!important; height:var(--ttf-nav-height)!important; min-height:var(--ttf-nav-height)!important; max-height:var(--ttf-nav-height)!important; padding:5px 7px max(5px,var(--ttf-safe-bottom))!important; margin:0!important; z-index:1000!important; } .canonical-bottom-nav .cbn-item, #detailModal .detail-canonical-nav .cbn-item{ font-size:clamp(9px,1.35dvh,12px)!important; gap:clamp(2px,.4dvh,4px)!important; padding:3px 1px!important; } .canonical-bottom-nav .cbn-item .cbn-icon, #detailModal .detail-canonical-nav .cbn-icon{ font-size:clamp(18px,2.8dvh,25px)!important; } .canonical-bottom-nav .cbn-badge{top:2px!important;min-width:17px!important;height:17px!important;font-size:9px!important} /* --------------------------- ACCUEIL --------------------------- */ #appScreen.home-reference{padding:0!important;overflow:hidden!important} #appScreen .home-hero{ position:absolute!important;left:0!important;top:0!important;width:100%!important; height:calc(var(--ttf-panel-w) * .505)!important; min-height:0!important;max-height:none!important; background:url('/assets/reference/02_accueil_fond.png') top center/100% auto no-repeat!important; } #appScreen .home-welcome{ /* Accueil : le bloc avatar + salutation reste entierement dans la zone cinema, au-dessus des deux cartes d'action sur toutes les largeurs mobile. */ top:calc(var(--ttf-panel-w) * .315)!important; right:3.5%!important; gap:clamp(6px,1.5vw,12px)!important; } #appScreen .home-avatar{width:clamp(62px,17vw,145px)!important} #appScreen .home-greeting strong{font-size:clamp(18px,4.5vw,36px)!important} #appScreen .home-greeting span{font-size:clamp(12px,3vw,25px)!important} #appScreen .home-live{ position:absolute!important; left:0!important;right:0!important; top:calc(var(--ttf-panel-w) * .495)!important; bottom:var(--ttf-nav-height)!important; z-index:20!important; margin:0!important; padding:0 3.2% calc(min(34.33vw,15.86dvh) + 26px)!important; overflow-y:auto!important;overflow-x:hidden!important; overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important; } #appScreen .home-bottom-decor{ position:absolute!important; left:50%!important;right:auto!important; width:var(--ttf-decor-wide)!important;height:auto!important; bottom:calc(var(--ttf-nav-height) - clamp(7px,1.2dvh,11px))!important; transform:translateX(-50%)!important; z-index:800!important; } #appScreen .canonical-bottom-nav{z-index:1000!important} /* Sur écrans courts, les cartes d'accueil se compactent sans changer le style. */ @media (max-height:700px){ #appScreen .home-action-card{min-height:clamp(82px,15dvh,105px)!important;padding:8px!important} #appScreen .home-action-card strong{font-size:clamp(14px,3.4vw,18px)!important} #appScreen .home-action-card small{font-size:clamp(8px,2vw,11px)!important;margin-top:4px!important} #appScreen .home-live{gap:9px!important} } /* --------------------------- RECHERCHE --------------------------- */ #searchScreen.search-reference{ --search-header-visible-end:calc(var(--ttf-panel-w) * .241); --search-input-top:calc(var(--search-header-visible-end) + 1px); --search-input-height:clamp(38px, 5.2dvh, 46px); --search-filter-gap:clamp(6px, .95dvh, 10px); --search-filter-height:clamp(34px, 4.6dvh, 42px); --search-filter-top:calc(var(--search-input-top) + var(--search-input-height) + var(--search-filter-gap)); --search-results-top:calc(var(--search-filter-top) + var(--search-filter-height) + var(--search-filter-gap)); background:#000!important; } #searchScreen.search-reference::before{ inset:0!important;height:auto!important;transform:none!important; background:url('/assets/reference/05_recherche_fond.png') top center/100% auto no-repeat!important; } #searchScreen .main-search-input, #searchScreen .main-search-input:focus, #searchScreen .main-search-input:not(:placeholder-shown){ top:var(--search-input-top)!important; height:var(--search-input-height)!important; font-size:clamp(12px,3.45vw,16px)!important; } #searchScreen .search-filter-hit{ top:var(--search-filter-top)!important; height:var(--search-filter-height)!important; font-size:clamp(10px,2.7vw,13px)!important; } #searchScreen .main-search-results{ top:var(--search-results-top)!important; /* Les résultats s'arrêtent physiquement au bord supérieur de la barre canonique. */ bottom:var(--ttf-nav-height)!important; padding:0 0 calc(44vw + 18px)!important; overflow-y:auto!important;overflow-x:hidden!important; overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important; } #searchScreen .main-search-results .request-result-card{ min-height:clamp(158px,52vw,220px)!important; margin-bottom:clamp(7px,1.2dvh,12px)!important; } #searchScreen .main-search-results .request-result-poster-wrap{min-height:clamp(158px,52vw,220px)!important} #searchScreen.search-reference .search-bottom-mask{ display:block!important; position:absolute!important; left:50%!important;right:auto!important; width:100%!important;max-width:853px!important; height:auto!important;aspect-ratio:auto!important; /* Décor Recherche abaissé : le bas du masque arrive au ras de la barre canonique. */ bottom:calc(var(--ttf-nav-height) - clamp(44px,11vw,54px))!important; transform:translateX(-50%)!important; margin:0!important;padding:0!important; overflow:visible!important; z-index:800!important; } #searchScreen.search-reference .search-bottom-mask>img{ display:block!important;position:static!important; width:100%!important;height:auto!important;max-width:none!important;max-height:none!important; object-fit:contain!important;object-position:center bottom!important; margin:0!important;padding:0!important; } #searchScreen .canonical-bottom-nav{z-index:1000!important} /* --------------------------- MES DEMANDES --------------------------- */ #myRequestsScreen.myrequests-reference{ background-image:url('/assets/reference/04_mes_demandes_fond.png')!important; background-size:100% auto!important;background-position:top center!important;background-repeat:no-repeat!important; --requests-content-top:calc(var(--ttf-panel-w) * .377); --requests-filters-h:clamp(36px,4.75dvh,40px); } #myRequestsScreen .myrequests-live{ position:absolute!important; left:2.6%!important;right:2.6%!important; top:var(--requests-content-top)!important; bottom:calc(var(--ttf-nav-height) - 6px)!important; height:auto!important;overflow:hidden!important;z-index:40!important; } #myRequestsScreen .myrequests-filters{ height:var(--requests-filters-h)!important;min-height:var(--requests-filters-h)!important; padding:2px 0 5px!important;column-gap:clamp(2px,.75vw,4px)!important; } #myRequestsScreen .myreq-filter{ height:calc(var(--requests-filters-h) - 7px)!important;min-height:0!important; font-size:clamp(8px,2.45vw,10px)!important;padding:0 1px!important; } #myRequestsScreen .myrequests-cards{ height:calc(100% - var(--requests-filters-h))!important; padding:6px 0 calc(var(--ttf-nav-height) + min(66.67vw,30.81dvh) + 14px)!important; overflow-y:auto!important;overflow-x:hidden!important; } #myRequestsScreen .myreq-card{min-height:clamp(150px,45vw,190px)!important;margin-bottom:clamp(7px,1.2dvh,10px)!important} #myRequestsScreen .myreq-poster{min-height:clamp(150px,45vw,190px)!important} #myRequestsScreen .myreq-title{font-size:clamp(15px,4.2vw,18px)!important} #myRequestsScreen .myreq-meta{font-size:clamp(10px,2.8vw,12px)!important} #myRequestsScreen .myreq-status{font-size:clamp(11px,3vw,13px)!important} #myRequestsScreen .myreq-note,#myRequestsScreen .myreq-admin-select{font-size:clamp(9px,2.5vw,11px)!important} #myRequestsScreen .myrequests-decor-bas{ position:absolute!important; left:50%!important;right:auto!important; width:var(--ttf-tall-decor-wide)!important;height:auto!important; /* Decor remonte pour mieux reveler le masque et le corbeau sur toutes les hauteurs. */ bottom:calc(var(--ttf-nav-height) - clamp(54px,16vw,68px))!important; transform:translateX(-50%)!important; z-index:800!important; } #myRequestsScreen .myrequests-crow-easteregg{ left:53%!important;right:auto!important; width:min(19vw,8.78dvh)!important;height:auto!important; /* Le corbeau suit legerement la remontee du decor. */ bottom:calc(var(--ttf-nav-height) + clamp(6px,1.6vw,10px))!important; transform:translateX(-50%)!important; z-index:850!important; } #myRequestsScreen .canonical-bottom-nav{z-index:1000!important} /* --------------------------- CATALOGUE --------------------------- */ #catalogScreen.catalog-reference{ background-image:url('/assets/reference/29_catalogue_tontonflix_fond.png')!important; background-size:100% auto!important;background-position:top center!important;background-repeat:no-repeat!important; --catalog-content-top:calc(var(--ttf-panel-w) * .377); } #catalogScreen .catalog-dynamic{ position:absolute!important;left:3.2%!important;right:3.2%!important; top:var(--catalog-content-top)!important; bottom:calc(var(--ttf-nav-height) - 5px)!important; height:auto!important;gap:clamp(6px,.8dvh,10px)!important;overflow:hidden!important; } #catalogScreen .catalog-stats{flex:0 0 clamp(60px,8.2dvh,74px)!important;min-height:0!important} #catalogScreen .catalog-tools{flex:0 0 clamp(38px,5.1dvh,44px)!important;min-height:0!important} #catalogScreen .catalog-tabs{flex:0 0 clamp(32px,4.25dvh,38px)!important;min-height:0!important} #catalogScreen .catalog-cards{ padding-bottom:calc(var(--ttf-nav-height) + min(66.67vw,30.81dvh) + 14px)!important; overflow-y:auto!important;overscroll-behavior:contain!important; } #catalogScreen .catalog-card{min-height:clamp(104px,17dvh,126px)!important} #catalogScreen .catalog-bottom-decor{ position:absolute!important;left:50%!important;right:auto!important; width:var(--ttf-tall-decor-wide)!important;height:auto!important; bottom:calc(var(--ttf-nav-height) - clamp(24px,4.05dvh,38px))!important; transform:translateX(-50%)!important;z-index:800!important; } #catalogScreen .canonical-bottom-nav{z-index:1000!important} /* --------------------------- PROFIL --------------------------- */ #profileScreen.profile-reference{ background-image:url('/assets/reference/06_profil_fond.png')!important; background-size:100% auto!important;background-position:top center!important;background-repeat:no-repeat!important; --profile-content-top:calc(var(--ttf-panel-w) * .39); } #profileScreen .profile-dynamic{ position:absolute!important;left:3.2%!important;right:3.2%!important; top:var(--profile-content-top)!important; bottom:var(--ttf-nav-height)!important; height:auto!important; gap:clamp(6px,.95dvh,8px)!important; padding:0 0 calc(min(66.67vw,30.81dvh) + 20px)!important; overflow-y:auto!important;overflow-x:hidden!important; } #profileScreen .profile-identity-card{ grid-template-columns:clamp(82px,26vw,110px) minmax(0,1fr)!important; min-height:clamp(104px,14dvh,118px)!important; padding:clamp(7px,1.1dvh,9px) clamp(9px,2.6vw,12px)!important; } #profileScreen .profile-menu-card{ min-height:clamp(56px,7.5dvh,64px)!important; padding:clamp(6px,.9dvh,8px) clamp(9px,2.4vw,12px)!important; grid-template-columns:clamp(42px,11vw,48px) minmax(0,1fr) auto auto!important; gap:clamp(6px,1.8vw,9px)!important; } #profileScreen .profile-activity-card{min-height:clamp(70px,9.4dvh,80px)!important} #profileScreen .profile-logout-card{min-height:clamp(54px,7.2dvh,62px)!important} #profileScreen .profile-card-copy strong{font-size:clamp(13px,3.9vw,16px)!important} #profileScreen .profile-card-copy small{font-size:clamp(8px,2.3vw,10px)!important} #profileScreen .profile-bottom-decor{ position:absolute!important;left:50%!important;right:auto!important; width:var(--ttf-tall-decor-wide)!important;height:auto!important; bottom:calc(var(--ttf-nav-height) - clamp(10px,1.8dvh,18px))!important; transform:translateX(-50%)!important;z-index:800!important; } #profileScreen .profile-version{ top:clamp(8px,1.4dvh,12px)!important; right:3.6%!important; bottom:auto!important; z-index:920!important; } #profileScreen .canonical-bottom-nav{z-index:1000!important} /* Très petits téléphones : priorité à la lisibilité et au scroll, jamais à l'écrasement horizontal. */ @media (max-width:350px){ .canonical-bottom-nav .cbn-item{font-size:9px!important} #myRequestsScreen .myreq-filter{font-size:8px!important;letter-spacing:-.25px!important} #searchScreen .search-filter-hit{font-size:9px!important} #profileScreen .profile-card-status{display:none!important} #profileScreen .profile-activity-counts{min-width:72px!important;font-size:7.5px!important;padding:5px!important} } /* Correctif de stabilité : neutralise les anciennes règles Recherche plus spécifiques qui utilisaient left:0 / bottom:-46px et prenaient le dessus sur le responsive. */ #searchScreen.search-reference .search-bottom-mask{ left:50%!important;right:auto!important; width:100%!important;max-width:853px!important; bottom:calc(var(--ttf-nav-height) - clamp(44px,11vw,54px))!important; transform:translateX(-50%)!important; } #searchScreen.search-reference .search-bottom-mask>img{ width:100%!important;height:auto!important;object-fit:contain!important;object-position:center bottom!important; } /* -------------------- PANNEAUX VISUELS LEGACY / SOUS-PAGES -------------------- Les écrans encore basés sur une plaquette complète gardent leurs hotspots en %. L'image et les hotspots sont donc adaptés ensemble au viewport : aucune coupe verticale et aucune barre de navigation qui flotte hors écran. */ @media (max-width:853px){ .reference-screen:not(.home-reference):not(.search-reference):not(.myrequests-reference):not(.catalog-reference):not(.profile-reference){ width:100%!important; height:100dvh!important; min-height:100dvh!important; max-height:100dvh!important; aspect-ratio:auto!important; background-size:100% 100%!important; background-position:center center!important; overflow:hidden!important; } } /* Fiche film/série : même adaptation plein viewport ; le fond de référence et les coordonnées en % restent synchronisés, tandis que la nav garde sa taille canonique indépendante de la résolution. */ #detailModal.modal-overlay{ padding:0!important; overflow:hidden!important; place-items:start center!important; } #detailModal .modal-card{ width:min(100vw,853px)!important; max-width:853px!important; height:100dvh!important; min-height:100dvh!important; max-height:100dvh!important; aspect-ratio:auto!important; margin:0 auto!important; background-size:100% 100%!important; background-position:center center!important; overflow:hidden!important; } #detailModal .detail-content{ top:7.4%!important; bottom:calc(var(--ttf-nav-height) + 8px)!important; overflow-y:auto!important; overscroll-behavior:contain!important; -webkit-overflow-scrolling:touch!important; padding-bottom:18px!important; scroll-padding-bottom:18px!important; } /* 15/08/2026 — ACCUEIL : lisibilité du sous-titre de salutation. Renforce uniquement le contraste de « Qu’est-ce qu’on regarde ? » sans déplacer le bloc validé. */ #appScreen .home-greeting span{ color:#ff7200!important; font-weight:600!important; text-shadow: 0 1px 1px #000, 0 2px 3px #000, 0 0 6px rgba(0,0,0,.98)!important; -webkit-text-stroke:.18px rgba(0,0,0,.9); background:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.52) 18%,rgba(0,0,0,.72) 100%)!important; border-radius:8px!important; padding:2px 5px 3px 10px!important; } /* ============================================================ MES DEMANDES — SUPPRESSION D'UNE DEMANDE (15/08/2026) Le bouton reste utilisable pour tous les statuts et n'affecte pas la geometrie responsive validee de la carte. ============================================================ */ #myRequestsScreen .myreq-actions{ margin-top:auto!important; display:flex!important; align-items:center!important; gap:clamp(6px,1.6vw,9px)!important; width:100%!important; min-width:0!important; } #myRequestsScreen .myreq-actions .myreq-admin-select{ margin-top:0!important; flex:1 1 auto!important; min-width:0!important; width:auto!important; } #myRequestsScreen .myreq-delete{ flex:0 0 auto!important; height:clamp(30px,7.5vw,34px)!important; padding:0 clamp(8px,2.2vw,12px)!important; border:1px solid #ff3535!important; border-radius:7px!important; background:rgba(70,0,0,.28)!important; color:#ff4a4a!important; font-size:clamp(8px,2.15vw,10px)!important; font-weight:800!important; letter-spacing:.15px!important; white-space:nowrap!important; cursor:pointer!important; } #myRequestsScreen .myreq-delete:active{transform:scale(.97)!important} #myRequestsScreen .myreq-delete:disabled{opacity:.45!important;cursor:default!important} #myRequestsScreen .myreq-actions > .myreq-delete:first-child{margin-left:auto!important} /* ============================================================ TON TON FLIX — CONFIRMATION INTERNE DE SUPPRESSION (15/08/2026) Remplace la boîte native du navigateur. Aucun impact sur la géométrie de Mes demandes ni sur les décors validés. ============================================================ */ .ttf-confirm-overlay{ position:fixed!important; inset:0!important; z-index:5000!important; display:flex!important; align-items:center!important; justify-content:center!important; padding:clamp(16px,5vw,26px)!important; background:rgba(0,0,0,.82)!important; backdrop-filter:blur(4px)!important; -webkit-backdrop-filter:blur(4px)!important; } .ttf-confirm-card{ width:min(100%,390px)!important; border:1px solid #ff6500!important; border-radius:18px!important; background:linear-gradient(180deg,#171717 0%,#090909 100%)!important; box-shadow:0 18px 55px rgba(0,0,0,.72),0 0 22px rgba(255,101,0,.12)!important; padding:clamp(18px,5vw,24px)!important; color:#fff!important; text-align:center!important; } .ttf-confirm-icon{ width:48px!important;height:48px!important; margin:0 auto 10px!important; display:grid!important;place-items:center!important; border:1px solid #ff3434!important;border-radius:50%!important; background:rgba(130,0,0,.22)!important; color:#ff4343!important;font-size:22px!important; } .ttf-confirm-heading{ color:#ff6500!important; font-size:clamp(17px,4.8vw,21px)!important; font-weight:900!important; letter-spacing:.2px!important; } .ttf-confirm-media{ margin:12px 0 8px!important; color:#fff!important; font-size:clamp(14px,4vw,17px)!important; font-weight:700!important; line-height:1.32!important; overflow-wrap:anywhere!important; } .ttf-confirm-text{ color:#aaa!important; font-size:clamp(11px,3vw,13px)!important; margin-bottom:18px!important; } .ttf-confirm-actions{ display:grid!important; grid-template-columns:1fr 1fr!important; gap:10px!important; } .ttf-confirm-actions button{ height:44px!important; border-radius:10px!important; font-weight:900!important; font-size:12px!important; cursor:pointer!important; } .ttf-confirm-cancel{ border:1px solid #666!important; background:#171717!important; color:#ddd!important; } .ttf-confirm-delete{ border:1px solid #ff3434!important; background:linear-gradient(180deg,#a00 0%,#6f0000 100%)!important; color:#fff!important; } .ttf-confirm-delete:focus-visible,.ttf-confirm-cancel:focus-visible{ outline:2px solid #ff6500!important; outline-offset:2px!important; } /* ====================================================================== 15/08/2026 — ECRAN 03 FAIRE UNE DEMANDE OFFICIEL Fond neutre + contrôles code + contenu scrollable + décor séparé. Autorité finale : ces règles neutralisent les anciens hotspots/ratios figés. ====================================================================== */ #requestScreen.request-reference{ width:100%!important; height:100dvh!important; min-height:100dvh!important; max-height:100dvh!important; aspect-ratio:auto!important; position:relative!important; overflow:hidden!important; isolation:isolate!important; background-color:#000!important; background-image:url('/assets/reference/03_faire_une_demande_fond.png')!important; background-size:100% auto!important; background-position:top center!important; background-repeat:no-repeat!important; --request-panel-w:min(100vw,853px); --request-header-end:calc(var(--request-panel-w) * .365); --request-input-h:clamp(40px,5.25dvh,48px); --request-gap:clamp(7px,.95dvh,10px); --request-filter-h:clamp(34px,4.7dvh,42px); --request-filter-top:calc(var(--request-header-end) + var(--request-input-h) + var(--request-gap)); --request-results-title-top:calc(var(--request-filter-top) + var(--request-filter-h) + var(--request-gap)); --request-results-top:calc(var(--request-results-title-top) + clamp(28px,4dvh,34px)); } #requestScreen.request-reference::before, #requestScreen.request-reference::after{content:none!important;display:none!important} #requestScreen .request-back-visible{ position:absolute!important;z-index:70!important; left:1.2%!important;top:2.7%!important; width:clamp(34px,9vw,50px)!important;height:clamp(38px,5.4dvh,52px)!important; border:0!important;background:transparent!important;color:#fff!important; font:300 clamp(35px,9vw,52px)/1 Arial,sans-serif!important; text-shadow:0 2px 5px #000!important;cursor:pointer!important;padding:0!important; } #requestScreen .request-controls{position:absolute!important;z-index:60!important;left:3.2%!important;right:3.2%!important;top:var(--request-header-end)!important;height:auto!important} #requestScreen .request-search-input, #requestScreen .request-search-input:focus, #requestScreen .request-search-input:not(:placeholder-shown){ position:relative!important;inset:auto!important;left:auto!important;right:auto!important;top:auto!important; display:block!important;width:100%!important;height:var(--request-input-h)!important; box-sizing:border-box!important;margin:0!important; padding:0 clamp(14px,4vw,22px)!important; border:1px solid #ff6500!important;border-radius:999px!important; outline:0!important;background:rgba(4,4,4,.96)!important;color:#f3f3f3!important; font:400 clamp(12px,3.45vw,16px)/1 Arial,sans-serif!important; box-shadow:none!important;appearance:none!important;-webkit-appearance:none!important;caret-color:#fff!important; } #requestScreen .request-search-input::placeholder{color:#9c9c9c!important;opacity:1!important} #requestScreen .request-search-input::-webkit-search-cancel-button{display:none!important} #requestScreen .request-filters{ display:grid!important;grid-template-columns:.86fr .92fr .96fr 1.58fr!important; gap:clamp(5px,1.3vw,9px)!important;width:100%!important;height:var(--request-filter-h)!important; margin-top:var(--request-gap)!important;overflow:visible!important; } #requestScreen .request-filter{ position:relative!important;inset:auto!important;left:auto!important;right:auto!important;top:auto!important; width:100%!important;height:100%!important;min-width:0!important; display:flex!important;align-items:center!important;justify-content:center!important;gap:clamp(3px,.8vw,6px)!important; padding:0 clamp(4px,1.3vw,8px)!important; border:1px solid #3c3c3c!important;border-radius:999px!important;background:#080808!important;color:#fff!important; font:600 clamp(9px,2.45vw,12px)/1 Arial,sans-serif!important;white-space:nowrap!important;cursor:pointer!important;z-index:1!important; } #requestScreen .request-filter.active{background:#ff6500!important;border-color:#ff6500!important;color:#fff!important} #requestScreen .request-filter-emby.active{background:#0b0b0b!important;border-color:#79e500!important;color:#fff!important} #requestScreen .rf-icon{font-size:.92em!important}.request-filter .rf-check{display:grid!important;place-items:center!important;width:1.45em!important;height:1.45em!important;border:1px solid #79e500!important;border-radius:50%!important;color:#79e500!important} #requestScreen .request-results-title{ position:absolute!important;z-index:42!important;left:3.2%!important;right:3.2%!important;top:var(--request-results-title-top)!important; height:clamp(26px,3.7dvh,32px)!important;display:flex!important;align-items:center!important;gap:7px!important; color:#fff!important;font:800 clamp(13px,3.55vw,17px)/1 Arial,sans-serif!important; } #requestScreen .request-results-title>span{color:#ff6500!important;font-size:1.35em!important} #requestScreen .request-results-title.hidden{display:none!important} #requestScreen .request-dynamic-results{ position:absolute!important;z-index:40!important; left:3.2%!important;right:3.2%!important;top:var(--request-results-top)!important; height:auto!important;bottom:var(--ttf-nav-height)!important; display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important; align-content:start!important;align-items:start!important;gap:clamp(8px,2.2vw,12px)!important; margin:0!important;padding:0 0 calc(min(34vw,16dvh) + 24px)!important; overflow-y:auto!important;overflow-x:hidden!important;background:transparent!important; scrollbar-width:none!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important; } #requestScreen .request-dynamic-results.hidden{display:none!important} #requestScreen .request-dynamic-results::-webkit-scrollbar{display:none!important} #requestScreen .request-result-card{ box-sizing:border-box!important;width:100%!important;max-width:none!important;flex:none!important; display:block!important;margin:0!important;overflow:hidden!important; border:1px solid #71350f!important;border-radius:clamp(10px,2.6vw,14px)!important;background:#050505!important;cursor:pointer!important; } #requestScreen .request-result-poster-wrap{position:relative!important;width:100%!important;height:auto!important;min-height:0!important;padding-top:132%!important;overflow:hidden!important;background:#111!important} #requestScreen .request-result-poster{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important} #requestScreen .request-result-info{display:block!important;padding:clamp(7px,2vw,11px)!important;background:#050505!important} #requestScreen .request-result-title{font-size:clamp(13px,3.4vw,17px)!important;line-height:1.12!important;font-weight:700!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important} #requestScreen .request-result-meta{font-size:clamp(10px,2.55vw,12px)!important;color:#aaa!important;margin-top:4px!important} #requestScreen .request-result-btn{width:100%!important;margin-top:8px!important;padding:clamp(8px,2.2vw,11px) 4px!important;border:1px solid #ff6500!important;border-radius:7px!important;background:#050505!important;color:#ff6500!important;font-weight:800!important;font-size:clamp(9px,2.4vw,12px)!important} #requestScreen .request-result-btn.available{border-color:#62bd17!important;color:#74d51d!important} #requestScreen .request-empty{grid-column:1/-1!important;width:100%!important;text-align:center!important;color:#aaa!important;padding:9dvh 5%!important;font-size:clamp(12px,3vw,15px)!important} #requestScreen .request-howto{ position:absolute!important;z-index:35!important;left:3.2%!important;right:3.2%!important; bottom:calc(var(--ttf-nav-height) + min(34vw,16dvh) + clamp(10px,1.8dvh,16px))!important; min-height:clamp(68px,9.6dvh,84px)!important;box-sizing:border-box!important; display:grid!important;grid-template-columns:clamp(38px,10vw,48px) minmax(0,1fr) clamp(30px,8vw,38px)!important;align-items:center!important;gap:clamp(8px,2.2vw,12px)!important; padding:clamp(8px,1.3dvh,11px) clamp(10px,2.7vw,15px)!important; border:1px solid #5a2a0a!important;border-radius:clamp(10px,2.5vw,14px)!important;background:rgba(6,6,6,.95)!important;color:#ddd!important; } #requestScreen .request-howto.hidden{display:none!important} #requestScreen .request-howto-icon{color:#ff6500!important;font-size:clamp(27px,7vw,35px)!important;text-align:center!important} #requestScreen .request-howto strong{display:block!important;color:#ff6500!important;font-size:clamp(12px,3.3vw,16px)!important;line-height:1.05!important} #requestScreen .request-howto p{margin:5px 0 0!important;color:#ddd!important;font-size:clamp(9px,2.45vw,12px)!important;line-height:1.25!important} #requestScreen .request-howto-arrow{display:grid!important;place-items:center!important;width:100%!important;aspect-ratio:1!important;border:1px solid #ff6500!important;border-radius:50%!important;color:#ff6500!important;font-size:clamp(20px,5.5vw,28px)!important} #requestScreen .request-bottom-decor{ position:absolute!important;z-index:800!important;left:50%!important;right:auto!important; bottom:calc(var(--ttf-nav-height) - clamp(8px,1.8vw,12px))!important; width:100%!important;max-width:941px!important;height:auto!important; transform:translateX(-50%)!important;pointer-events:none!important;user-select:none!important; } #requestScreen .canonical-bottom-nav{z-index:1000!important} #requestScreen .canonical-bottom-nav .cbn-requests{color:#ff6500!important} @media(max-width:350px){ #requestScreen.request-reference{--request-header-end:calc(var(--request-panel-w) * .37)} #requestScreen .request-filters{grid-template-columns:.82fr .88fr .9fr 1.45fr!important;gap:3px!important} #requestScreen .request-filter{font-size:8px!important;padding:0 2px!important} #requestScreen .request-dynamic-results{grid-template-columns:1fr!important} #requestScreen .request-howto{grid-template-columns:34px minmax(0,1fr) 30px!important} } @media(max-height:620px){ #requestScreen .request-howto{display:none!important} } /* ====================================================================== 15/08/2026 — ECRAN 03 V12 : résultats compacts + scroll tactile fiable. COMMENT ÇA MARCHE est supprimé du DOM. Autorité finale écran 03. ====================================================================== */ #requestScreen .request-howto{display:none!important} #requestScreen .request-dynamic-results{ position:absolute!important; left:3.2%!important; right:3.2%!important; top:var(--request-results-top)!important; bottom:auto!important; width:auto!important; height:calc(100dvh - var(--request-results-top) - var(--ttf-nav-height))!important; min-height:0!important; max-height:none!important; display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; grid-auto-rows:max-content!important; align-content:start!important; align-items:start!important; gap:clamp(7px,1.8vw,10px)!important; margin:0!important; padding:0 0 calc(min(34vw,16dvh) + 26px)!important; overflow-y:scroll!important; overflow-x:hidden!important; overscroll-behavior-y:contain!important; -webkit-overflow-scrolling:touch!important; touch-action:pan-y!important; pointer-events:auto!important; scrollbar-width:none!important; z-index:40!important; } #requestScreen .request-dynamic-results.hidden{display:none!important} #requestScreen .request-dynamic-results::-webkit-scrollbar{display:none!important} /* Cartes plus proches de la maquette : image compacte, infos et bouton toujours visibles. */ #requestScreen .request-result-card{ width:100%!important; min-width:0!important; height:auto!important; min-height:0!important; display:flex!important; flex-direction:column!important; overflow:hidden!important; border:1px solid #71350f!important; border-radius:clamp(9px,2.3vw,13px)!important; background:#050505!important; } #requestScreen .request-result-poster-wrap{ position:relative!important; width:100%!important; height:auto!important; min-height:0!important; padding:0!important; aspect-ratio:4/3!important; overflow:hidden!important; background:#111!important; flex:none!important; } #requestScreen .request-result-poster{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; object-fit:cover!important; object-position:center 28%!important; } #requestScreen .request-result-info{ display:flex!important; flex-direction:column!important; gap:2px!important; padding:clamp(6px,1.55vw,9px)!important; min-height:0!important; background:#050505!important; } #requestScreen .request-result-title{ font-size:clamp(12px,3.15vw,16px)!important; line-height:1.08!important; font-weight:700!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; } #requestScreen .request-result-meta{ font-size:clamp(9px,2.35vw,11px)!important; line-height:1.1!important; margin:1px 0 0!important; color:#aaa!important; } #requestScreen .request-result-btn{ width:100%!important; min-height:clamp(28px,3.8dvh,34px)!important; margin:5px 0 0!important; padding:4px 3px!important; border:1px solid #ff6500!important; border-radius:6px!important; background:#050505!important; color:#ff6500!important; font-size:clamp(8px,2.15vw,10px)!important; line-height:1!important; font-weight:800!important; white-space:nowrap!important; } #requestScreen .request-result-btn.available{border-color:#62bd17!important;color:#74d51d!important} /* Le décor reste au premier plan et la navbar au-dessus, sans capturer le scroll. */ #requestScreen .request-bottom-decor{pointer-events:none!important;z-index:800!important} #requestScreen .canonical-bottom-nav{z-index:1000!important} @media(max-width:350px){ #requestScreen .request-dynamic-results{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px!important} #requestScreen .request-result-title{font-size:11px!important} #requestScreen .request-result-meta{font-size:8px!important} #requestScreen .request-result-btn{font-size:7.5px!important;min-height:27px!important} } /* 15/08/2026 — ÉCRAN 13 MON COMPTE : intégration en couches Bandeau cinéma + contenu HTML interactif + décor bas séparé + nav canonique. */ #accountScreen.account-reference{ background:#000!important; background-image:none!important; overflow:hidden!important; min-height:100dvh!important; height:100dvh!important; aspect-ratio:auto!important; } #accountScreen .account-header-art{ position:absolute;z-index:5;left:0;top:0;width:100%;height:auto; pointer-events:none;user-select:none; } #accountScreen .account-back{ left:1.4%!important;top:2.4%!important;width:9%!important;height:7%!important;z-index:80!important; } #accountScreen .account-dynamic{ position:absolute;z-index:20;left:3.25%;right:3.25%;top:15.2%; bottom:calc(var(--ttf-nav-height,84px) + 1.8dvh); overflow-y:auto;overflow-x:hidden;scrollbar-width:none; padding:0 0 clamp(145px,38vw,215px); overscroll-behavior:contain;-webkit-overflow-scrolling:touch; } #accountScreen .account-dynamic::-webkit-scrollbar{display:none} #accountScreen .account-identity-card, #accountScreen .account-panel, #accountScreen .account-privacy-note{ background:linear-gradient(180deg,rgba(15,15,15,.98),rgba(7,7,7,.98)); border:1px solid rgba(255,101,0,.54);border-radius:14px; box-shadow:0 8px 22px rgba(0,0,0,.38); } #accountScreen .account-identity-card{ display:grid;grid-template-columns:clamp(72px,21vw,96px) minmax(0,1fr) auto; align-items:center;gap:clamp(8px,2.5vw,14px);padding:10px 12px;margin-bottom:8px; } #accountScreen .account-avatar-wrap{ width:clamp(72px,21vw,96px);aspect-ratio:1;border:2px solid #ff6500;border-radius:50%;overflow:hidden;background:#050505; } #accountScreen .account-avatar-image{width:100%;height:100%;display:block;object-fit:cover;object-position:center} #accountScreen .account-identity-copy{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:5px} #accountScreen .account-identity-copy>strong{font-size:clamp(21px,6.2vw,30px);line-height:1;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} #accountScreen .account-role-pill{display:inline-flex;align-items:center;gap:6px;border-radius:8px;padding:5px 9px;background:linear-gradient(90deg,#3b1603,#211006);color:#ff6500;font-size:clamp(10px,2.7vw,13px)} #accountScreen .account-avatar-btn{ border:1px solid #ff6500;border-radius:8px;background:#080808;color:#ff6500;padding:9px 10px;font-size:clamp(9px,2.2vw,12px);font-weight:700;white-space:nowrap;cursor:pointer; } #accountScreen .account-panel{overflow:hidden;margin-bottom:8px;padding:0 7px} #accountScreen .account-panel h2{margin:8px 5px 4px;color:#ff6500;font-size:clamp(12px,3.2vw,15px);line-height:1.2} #accountScreen .account-security h2{color:#72be21} #accountScreen .account-row{ width:100%;min-height:clamp(49px,6.6dvh,59px);display:grid;grid-template-columns:42px minmax(0,1fr) auto auto;align-items:center;gap:8px; border:0;border-bottom:1px solid rgba(255,255,255,.08);background:transparent;color:#fff;padding:5px 4px;text-align:left;cursor:pointer; } #accountScreen .account-row:last-child{border-bottom:0} #accountScreen .static-row{cursor:default} #accountScreen .account-row-icon{width:34px;height:34px;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center;font-size:18px} #accountScreen .account-row-icon.orange,#accountScreen .account-row-arrow.orange{color:#ff6500} #accountScreen .account-row-icon.purple,#accountScreen .account-row-arrow.purple{color:#9d32ff} #accountScreen .account-row-icon.green{color:#69b51c} #accountScreen .account-row-copy{min-width:0;display:flex;flex-direction:column;gap:2px} #accountScreen .account-row-copy strong{font-size:clamp(12px,3.3vw,15px);line-height:1.15;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #accountScreen .account-row-copy small{font-size:clamp(9px,2.35vw,11px);line-height:1.2;color:#a9a9a9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #accountScreen .account-row-arrow{font-size:29px;line-height:1}.account-row-arrow.muted{color:#888} #accountScreen .account-password-action, #accountScreen .account-session-action{ border:1px solid #7533b7;border-radius:6px;padding:7px 8px;color:#a850ff;font-weight:700;font-size:clamp(7px,1.9vw,9px);white-space:nowrap; } #accountScreen .account-session-action{border-color:#4f8e17;color:#72be21} #accountScreen .account-side-value{color:#a850ff;font-size:clamp(10px,2.6vw,12px);white-space:nowrap} #accountScreen .account-toggle{width:42px;height:24px;border-radius:999px;background:#7b2bd0;padding:3px;display:flex;justify-content:flex-end;align-items:center} #accountScreen .account-toggle i{width:18px;height:18px;border-radius:50%;background:#fff;display:block} #accountScreen .account-privacy-note{display:flex;align-items:center;gap:10px;padding:8px 11px;color:#aaa;margin-bottom:4px} #accountScreen .account-privacy-note>span{font-size:24px;color:#ff6500} #accountScreen .account-privacy-note p{margin:0;font-size:clamp(8px,2.1vw,10px);line-height:1.35} #accountScreen .account-bottom-decor{ position:absolute;z-index:55;left:50%;bottom:calc(var(--ttf-nav-height,84px) - clamp(58px,14vw,66px)); width:min(118%,1000px);height:auto;transform:translateX(-50%);pointer-events:none;user-select:none; } #accountScreen .canonical-bottom-nav{z-index:100!important} #accountScreen .cbn-profile{color:#ff6500} @media(max-width:430px){ #accountScreen .account-dynamic{top:14.8%;padding-bottom:clamp(145px,39vw,175px)} #accountScreen .account-identity-card{grid-template-columns:72px minmax(0,1fr);grid-template-areas:'avatar copy' 'action action'} #accountScreen .account-avatar-wrap{grid-area:avatar;width:72px} #accountScreen .account-identity-copy{grid-area:copy} #accountScreen .account-avatar-btn{grid-area:action;width:100%;padding:7px 8px} #accountScreen .account-password-action{font-size:7px;padding:6px 5px} #accountScreen .account-session-action{font-size:6.8px;padding:6px 5px} } /* 15/08/2026 — ÉCRAN 14 NOTIFICATIONS : fond + contenu HTML + décor bas séparé */ #notificationsScreen.notifications-reference{ background:#000 url('/assets/reference/14_notifications_fond.png') top center/100% auto no-repeat!important; min-height:100dvh!important;height:100dvh!important;max-height:100dvh!important; aspect-ratio:auto!important;overflow:hidden!important; } #notificationsScreen .notifications-back{ left:1.2%!important;top:3.0%!important;width:8.5%!important;height:7%!important;z-index:90!important; } #notificationsScreen .notifications-dynamic{ position:absolute;z-index:20;left:3.8%;right:3.8%;top:17.4%; bottom:calc(var(--ttf-nav-height,84px) + 1.2dvh); overflow-y:auto;overflow-x:hidden;scrollbar-width:none; padding:0 0 clamp(160px,42vw,220px); overscroll-behavior:contain;-webkit-overflow-scrolling:touch; } #notificationsScreen .notifications-dynamic::-webkit-scrollbar{display:none} #notificationsScreen .notifications-intro-card, #notificationsScreen .notifications-panel, #notificationsScreen .notifications-privacy-note{ background:linear-gradient(180deg,rgba(16,16,16,.985),rgba(7,7,7,.985)); border:1px solid rgba(255,101,0,.18);border-radius:10px; box-shadow:0 7px 18px rgba(0,0,0,.36); } #notificationsScreen .notifications-intro-card{ min-height:51px;display:flex;align-items:center;gap:12px;padding:8px 13px;margin-bottom:8px; } #notificationsScreen .notifications-intro-icon{ flex:0 0 36px;width:36px;height:36px;border:1px solid #ff6500;border-radius:50%; display:grid;place-items:center;color:#ff6500;font-size:19px; } #notificationsScreen .notifications-intro-card p{margin:0;color:#cfcfcf;font-size:clamp(10px,2.75vw,13px);line-height:1.35} #notificationsScreen .notifications-intro-card strong{color:#ff6500;font-weight:500} #notificationsScreen .notifications-panel{overflow:hidden;margin-bottom:8px;padding:0 6px 2px} #notificationsScreen .notifications-panel-header{ min-height:49px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 6px 5px; } #notificationsScreen .notifications-panel-header h2{margin:0 0 2px;color:#ff6500;font-size:clamp(12px,3.2vw,15px);line-height:1.1} #notificationsScreen .notifications-panel-header small{display:block;color:#9c9c9c;font-size:clamp(8px,2.15vw,10px);line-height:1.2} #notificationsScreen .notifications-all{ flex:0 0 auto;border:0;background:transparent;color:#a94cff;font-size:clamp(8px,2.3vw,10px);font-weight:600;padding:8px 3px;cursor:pointer; } #notificationsScreen .notification-row{ width:100%;min-height:clamp(43px,5.9dvh,51px);display:grid; grid-template-columns:38px minmax(0,1fr) 40px;align-items:center;gap:8px; padding:4px 5px;border:0;border-top:1px solid rgba(255,255,255,.07);background:transparent;color:#fff;text-align:left;cursor:pointer; } #notificationsScreen .notification-icon{ width:31px;height:31px;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center;font-size:17px;font-weight:700; } #notificationsScreen .notification-icon.green{color:#6ecb21} #notificationsScreen .notification-icon.orange{color:#ff6500} #notificationsScreen .notification-icon.red{color:#f52222} #notificationsScreen .notification-icon.gold{color:#f0b51b} #notificationsScreen .notification-icon.purple{color:#9d32ff} #notificationsScreen .notification-copy{min-width:0;display:flex;flex-direction:column;gap:2px} #notificationsScreen .notification-copy strong{font-size:clamp(10.5px,2.9vw,13px);line-height:1.12;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #notificationsScreen .notification-copy small{font-size:clamp(7.5px,2vw,9.5px);line-height:1.2;color:#9f9f9f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #notificationsScreen .notification-switch{ width:38px;height:22px;border-radius:999px;background:#3d3d3d;padding:3px;display:flex;align-items:center;justify-content:flex-start;transition:.18s ease; } #notificationsScreen .notification-switch i{display:block;width:16px;height:16px;border-radius:50%;background:#d7d7d7;box-shadow:0 1px 4px rgba(0,0,0,.5);transition:.18s ease} #notificationsScreen .notification-switch.on{background:#7d2fe0;justify-content:flex-end} #notificationsScreen .notification-switch.on i{background:#fff} #notificationsScreen .notifications-privacy-note{display:flex;align-items:center;gap:10px;padding:8px 11px;color:#a7a7a7;margin-bottom:3px} #notificationsScreen .notifications-privacy-note>span{font-size:24px;color:#ff6500} #notificationsScreen .notifications-privacy-note p{margin:0;font-size:clamp(8px,2.1vw,10px);line-height:1.35} #notificationsScreen .notifications-bottom-decor{ position:absolute;z-index:55;left:50%;bottom:calc(var(--ttf-nav-height,84px) - clamp(48px,12vw,58px)); width:min(117%,1000px);height:auto;transform:translateX(-50%);pointer-events:none;user-select:none; } #notificationsScreen .canonical-bottom-nav{z-index:100!important} #notificationsScreen .cbn-profile{color:#ff6500} @media(max-width:430px){ #notificationsScreen .notifications-dynamic{top:17.2%;padding-bottom:clamp(158px,41vw,180px)} #notificationsScreen .notifications-panel-header{min-height:45px} #notificationsScreen .notification-row{grid-template-columns:36px minmax(0,1fr) 38px;gap:6px} #notificationsScreen .notification-copy small{font-size:7.6px} } /* 15/08/2026 — ÉCRAN 15 MON ACTIVITÉ : fond + contenu HTML dynamique + décor bas séparé */ #activityScreen.activity-reference{ background:#000 url('/assets/reference/15_mon_activite_fond.png') top center/100% auto no-repeat!important; min-height:100dvh!important;height:100dvh!important;max-height:100dvh!important; aspect-ratio:auto!important;overflow:hidden!important; } #activityScreen .activity-back{ left:1.1%!important;top:2.6%!important;width:8.5%!important;height:7%!important;z-index:90!important; } #activityScreen .activity-dynamic{ position:absolute;z-index:20;left:2.7%;right:2.7%;top:17.0%; bottom:calc(var(--ttf-nav-height,84px) + .7dvh); overflow-y:auto;overflow-x:hidden;scrollbar-width:none; padding:0 0 clamp(112px,29vw,145px); overscroll-behavior:contain;-webkit-overflow-scrolling:touch; } #activityScreen .activity-dynamic::-webkit-scrollbar{display:none} #activityScreen .activity-panel, #activityScreen .activity-privacy-note{ background:linear-gradient(180deg,rgba(14,14,14,.985),rgba(6,6,6,.985)); border:1px solid rgba(255,101,0,.50);border-radius:11px; box-shadow:0 7px 18px rgba(0,0,0,.36); } #activityScreen .activity-panel{padding:0 9px 11px;margin-bottom:9px;overflow:hidden} #activityScreen .activity-panel-header{ min-height:42px;display:flex;align-items:center;justify-content:space-between;gap:8px; padding:9px 6px 6px;border-bottom:1px solid rgba(255,255,255,.07); } #activityScreen .activity-panel-header>div:first-child{min-width:0} #activityScreen .activity-panel-header h2{ margin:0;color:#aa55ff;font-size:clamp(11px,3vw,14px);line-height:1.15;font-weight:700; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } #activityScreen .activity-panel-header h2 span{margin-right:4px} #activityScreen .activity-panel-header small{ display:block;color:#8d8d8d;font-size:clamp(7px,1.9vw,9px);margin-top:2px; } #activityScreen .activity-period{ flex:0 0 auto;border:1px solid rgba(145,71,203,.3);border-radius:7px;padding:6px 8px; color:#b05cff;background:rgba(5,5,5,.72);font-size:clamp(7px,2vw,9px);white-space:nowrap; } #activityScreen .activity-stats{ display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;padding:9px 0 1px; } #activityScreen .activity-stat{ min-width:0;min-height:102px;border:1px solid rgba(255,255,255,.10);border-radius:9px; display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center; padding:9px 4px 8px;background:rgba(4,4,4,.78); } #activityScreen .activity-stat-icon{ width:30px;height:30px;border:2px solid currentColor;border-radius:50%;display:grid;place-items:center; font-size:18px;line-height:1;margin-bottom:5px;font-weight:700; } #activityScreen .activity-stat small{ min-height:28px;color:#d0d0d0;font-size:clamp(6px,1.65vw,8px);line-height:1.18;font-weight:700; display:flex;align-items:center;justify-content:center; } #activityScreen .activity-stat strong{color:#fff;font-size:clamp(20px,5.6vw,27px);line-height:1;margin-top:3px;font-weight:500} #activityScreen .activity-stat.purple{color:#a24cff} #activityScreen .activity-stat.orange{color:#ff6500} #activityScreen .activity-stat.green{color:#68c821} #activityScreen .activity-stat.blue{color:#1aa7ff} #activityScreen .activity-stat.red{color:#ff2b30} #activityScreen .activity-link{ flex:0 0 auto;border:0;background:transparent;color:#ff6500;font-size:clamp(7px,1.95vw,9px); padding:6px 0;cursor:pointer;white-space:nowrap; } #activityScreen .activity-link span{font-size:18px;line-height:0;vertical-align:-2px;margin-left:3px} #activityScreen .activity-clear{font-size:clamp(7px,1.8vw,8.5px)} #activityScreen .activity-recent-list, #activityScreen .activity-search-list{display:flex;flex-direction:column} #activityScreen .activity-request-row{ min-height:60px;display:grid;grid-template-columns:43px minmax(0,1fr) auto 14px;gap:8px;align-items:center; padding:5px 2px;border-bottom:1px solid rgba(255,255,255,.07);cursor:pointer; } #activityScreen .activity-request-row:last-child{border-bottom:0} #activityScreen .activity-request-poster{ width:43px;height:55px;object-fit:cover;border-radius:4px;background:#111;display:block; } #activityScreen .activity-request-copy{min-width:0;display:flex;flex-direction:column;gap:2px} #activityScreen .activity-request-title{ color:#fff;font-size:clamp(10px,2.65vw,12px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } #activityScreen .activity-request-meta{color:#9b9b9b;font-size:clamp(7px,1.9vw,9px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #activityScreen .activity-request-date{color:#ff6500;font-size:clamp(7px,1.8vw,8.5px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #activityScreen .activity-request-status{ border:1px solid currentColor;border-radius:5px;padding:4px 6px;font-size:clamp(6.5px,1.75vw,8px);font-weight:700;white-space:nowrap; } #activityScreen .activity-request-status.pending{color:#ff6500} #activityScreen .activity-request-status.in_progress{color:#6fc71e} #activityScreen .activity-request-status.available{color:#1aa7ff} #activityScreen .activity-request-status.refused{color:#ff2b30} #activityScreen .activity-request-chevron{color:#aaa;font-size:24px;line-height:1} #activityScreen .activity-search-row{ min-height:33px;display:grid;grid-template-columns:22px minmax(0,1fr) auto 20px 12px;gap:6px;align-items:center; padding:4px 3px;border-bottom:1px solid rgba(255,255,255,.07);color:#ddd;cursor:pointer; } #activityScreen .activity-search-row:last-child{border-bottom:0} #activityScreen .activity-search-icon{color:#aaa;font-size:18px} #activityScreen .activity-search-query{font-size:clamp(8px,2.25vw,10px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #activityScreen .activity-search-date{font-size:clamp(6.5px,1.75vw,8px);color:#929292;white-space:nowrap} #activityScreen .activity-search-repeat{color:#a94cff;font-size:19px;line-height:1} #activityScreen .activity-search-chevron{color:#aaa;font-size:19px;line-height:1} #activityScreen .activity-empty{ min-height:74px;display:grid;place-items:center;padding:14px 12px;color:#8e8e8e;font-size:clamp(8px,2.2vw,10px);text-align:center; } #activityScreen .activity-privacy-note{ border-color:rgba(255,101,0,.38);display:flex;align-items:center;gap:10px;padding:11px 12px;color:#aaa;margin-bottom:4px;min-height:68px; } #activityScreen .activity-privacy-note>span{font-size:24px;color:#ff6500} #activityScreen .activity-privacy-note p{margin:0;font-size:clamp(7.5px,2vw,9.5px);line-height:1.35} #activityScreen .activity-recent-panel{min-height:170px} #activityScreen .activity-search-panel{min-height:132px} #activityScreen .activity-recent-list .activity-empty{min-height:104px} #activityScreen .activity-search-list .activity-empty{min-height:82px} #activityScreen .activity-bottom-decor-wrap{ position:absolute;z-index:26;left:0;right:0;bottom:calc(var(--ttf-nav-height,84px) - clamp(12px,3vw,16px)); height:clamp(236px,59vw,308px);overflow:hidden;pointer-events:none;user-select:none;background:transparent; } #activityScreen .activity-bottom-decor{ position:absolute;left:50%;bottom:0;width:min(164%,1480px);height:auto;max-width:none;transform:translateX(-50%);display:block; } #activityScreen .canonical-bottom-nav{z-index:100!important} #activityScreen .cbn-profile{color:#ff6500} @media(max-width:430px){ #activityScreen .activity-dynamic{top:16.4%;padding-bottom:clamp(84px,20vw,102px)} #activityScreen .activity-panel-header{min-height:38px;padding-top:7px} #activityScreen .activity-stats{gap:4px} #activityScreen .activity-stat{min-height:94px;padding-left:3px;padding-right:3px} #activityScreen .activity-stat-icon{width:27px;height:27px;font-size:16px} #activityScreen .activity-request-row{grid-template-columns:40px minmax(0,1fr) auto 12px;gap:6px;min-height:57px} #activityScreen .activity-request-poster{width:40px;height:52px} #activityScreen .activity-request-status{padding:4px 5px} #activityScreen .activity-search-row{grid-template-columns:18px minmax(0,1fr) auto 18px 10px;gap:5px} } #activityScreen button.activity-request-row, #activityScreen button.activity-search-row{width:100%;border-left:0;border-right:0;background:transparent;color:inherit;text-align:left;font:inherit} #activityScreen button.activity-request-row, #activityScreen button.activity-search-row{border:0;border-bottom:1px solid rgba(255,255,255,.07);background:transparent;color:inherit;text-align:left;font:inherit;padding-top:4px;padding-bottom:4px} #activityScreen button.activity-request-row:last-child, #activityScreen button.activity-search-row:last-child{border-bottom:0} /* 16/08/2026 — ÉCRAN 19 DEMANDES À TRAITER : intégration en 2 PNG Fond haut validé + contenu HTML recréé + décor bas séparé au premier plan. */ #adminRequestDetailScreen.admin-request-detail-reference{ background:#000 url('/assets/reference/19_detail_demande_admin_fond.png') top center/100% auto no-repeat!important; aspect-ratio:853/1844!important; min-height:100dvh!important;height:100dvh!important;max-height:100dvh!important; overflow:hidden!important; } #adminRequestDetailScreen .admin-request-detail-back-btn{ position:absolute;left:1.6%;top:2.4%;width:9.2%;height:6.8%;z-index:95; display:grid;place-items:center;border:0;background:transparent;color:#ff8a2a; font-size:clamp(28px,6vw,42px);line-height:1; } #adminRequestDetailScreen .admin-request-detail-dynamic{ position:absolute;z-index:20;left:3.2%;right:3.2%;top:17.4%; bottom:calc(var(--ttf-nav-height,84px) + .8dvh); overflow-y:auto;overflow-x:hidden;scrollbar-width:none; padding:0 0 clamp(180px,45vw,250px); overscroll-behavior:contain;-webkit-overflow-scrolling:touch; } #adminRequestDetailScreen .admin-request-detail-dynamic::-webkit-scrollbar{display:none} #adminRequestDetailScreen .admin-request-panel{ background:linear-gradient(180deg,rgba(17,17,17,.985),rgba(7,7,7,.985)); border:1px solid rgba(255,101,0,.28);border-radius:12px; box-shadow:0 10px 24px rgba(0,0,0,.38);padding:0 10px 10px;margin-bottom:10px;overflow:hidden; } #adminRequestDetailScreen .admin-request-panel-heading{ min-height:42px;display:flex;align-items:center;justify-content:space-between;gap:8px; padding:9px 4px 6px;border-bottom:1px solid rgba(255,255,255,.08);margin:0 0 10px; } #adminRequestDetailScreen .admin-request-panel-heading-slim{min-height:39px} #adminRequestDetailScreen .admin-request-panel-heading h2{ margin:0;color:#a850ff;font-size:clamp(11px,3vw,14px);line-height:1.1;font-weight:800;letter-spacing:.01em; } #adminRequestDetailScreen .admin-request-inline-close{ border:0;background:transparent;color:#8d8d8d;font-size:24px;line-height:1;pointer-events:none; } #adminRequestDetailScreen .admin-request-main-grid{ display:grid;grid-template-columns:minmax(112px,37%) minmax(0,1fr);gap:12px;align-items:start; } #adminRequestDetailScreen .admin-request-poster-card{ border:1px solid rgba(255,255,255,.08);border-radius:11px;background:#090909;padding:6px; } #adminRequestDetailScreen .admin-request-poster-art{ position:relative;aspect-ratio:2/3;border-radius:8px;overflow:hidden; background:linear-gradient(180deg,#2b0f08 0%,#6e2600 24%,#d76a09 58%,#170702 100%); } #adminRequestDetailScreen .poster-sun{ position:absolute;left:18%;top:8%;width:64%;aspect-ratio:1;border-radius:50%; background:radial-gradient(circle at center,#ffcf7a 0%,#ff8a1d 28%,rgba(255,102,0,.92) 52%,rgba(120,25,0,.2) 75%,transparent 76%); opacity:.95; } #adminRequestDetailScreen .poster-figure{ position:absolute;bottom:16%;width:19%;background:linear-gradient(180deg,#2b140b,#150803);border-radius:22px 22px 10px 10px; box-shadow:0 0 18px rgba(0,0,0,.24); } #adminRequestDetailScreen .poster-figure::before{ content:'';position:absolute;left:28%;top:-12%;width:44%;aspect-ratio:1;border-radius:50%;background:#2a1308; } #adminRequestDetailScreen .poster-figure-a{left:28%;height:40%} #adminRequestDetailScreen .poster-figure-b{left:52%;height:47%} #adminRequestDetailScreen .poster-shadow{ position:absolute;left:0;right:0;bottom:0;height:36%;background:linear-gradient(180deg,transparent,rgba(0,0,0,.18) 25%,rgba(0,0,0,.72) 100%); } #adminRequestDetailScreen .poster-title-block{ position:absolute;left:0;right:0;bottom:6%;text-align:center;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.7); } #adminRequestDetailScreen .poster-title-block strong{display:block;font-size:clamp(18px,4.8vw,30px);letter-spacing:.16em;font-weight:800} #adminRequestDetailScreen .poster-title-block small{display:block;font-size:clamp(7px,1.8vw,10px);letter-spacing:.16em;margin-top:2px} #adminRequestDetailScreen .admin-request-main-copy h3{ margin:0 0 6px;color:#fff;font-size:clamp(18px,4.2vw,26px);line-height:1.08;font-weight:700; } #adminRequestDetailScreen .admin-request-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:9px} #adminRequestDetailScreen .admin-request-tag{ display:inline-flex;align-items:center;min-height:24px;padding:4px 8px;border-radius:7px; background:rgba(23,23,23,.92);border:1px solid rgba(255,255,255,.1);color:#d6d6d6;font-size:clamp(8px,2vw,10px); } #adminRequestDetailScreen .admin-request-tag.is-purple{border-color:rgba(156,66,255,.35);color:#bb73ff;background:rgba(42,13,64,.46)} #adminRequestDetailScreen .admin-request-facts{margin:0;display:flex;flex-direction:column;gap:7px} #adminRequestDetailScreen .admin-request-facts div{display:grid;grid-template-columns:minmax(78px,100px) minmax(0,1fr);gap:8px;align-items:start} #adminRequestDetailScreen .admin-request-facts dt{margin:0;color:#989898;font-size:clamp(8px,2vw,10px);line-height:1.25} #adminRequestDetailScreen .admin-request-facts dd{margin:0;color:#efefef;font-size:clamp(8px,2.05vw,10.5px);line-height:1.3} #adminRequestDetailScreen .admin-request-note-list{margin:2px 0 0 18px;padding:0;color:#d8d8d8} #adminRequestDetailScreen .admin-request-note-list li{margin:0 0 8px;font-size:clamp(8.5px,2.15vw,10.5px);line-height:1.4} #adminRequestDetailScreen .admin-request-note-list li::marker{color:#a850ff} #adminRequestDetailScreen .admin-request-action-btn{ width:100%;appearance:none;-webkit-appearance:none;border-radius:12px;cursor:pointer; display:grid;grid-template-columns:38px minmax(0,1fr);gap:10px;align-items:center; text-align:left;padding:11px 12px;margin-bottom:10px;background:rgba(8,8,8,.92); } #adminRequestDetailScreen .admin-request-action-icon{ width:34px;height:34px;border-radius:50%;border:2px solid currentColor;display:grid;place-items:center; font-size:18px;font-weight:700;line-height:1; } #adminRequestDetailScreen .admin-request-action-copy{min-width:0;display:flex;flex-direction:column;gap:3px} #adminRequestDetailScreen .admin-request-action-copy strong{color:currentColor;font-size:clamp(10px,2.6vw,12px);line-height:1.15} #adminRequestDetailScreen .admin-request-action-copy small{color:#d0d0d0;font-size:clamp(8px,1.95vw,10px);line-height:1.28} #adminRequestDetailScreen .admin-request-action-btn.is-green{border:1px solid rgba(108,207,42,.55);color:#73d52a;box-shadow:0 0 0 1px rgba(66,130,24,.12) inset} #adminRequestDetailScreen .admin-request-action-btn.is-red{border:1px solid rgba(255,54,54,.46);color:#ff3f3f;box-shadow:0 0 0 1px rgba(130,16,16,.1) inset} #adminRequestDetailScreen .admin-request-action-btn.is-blue{border:1px solid rgba(31,152,255,.46);color:#24a0ff;box-shadow:0 0 0 1px rgba(14,67,123,.1) inset} #adminRequestDetailScreen .admin-request-reject-card{ border:1px solid rgba(255,54,54,.26);border-radius:12px;padding:10px 10px 9px;margin-bottom:10px;background:linear-gradient(180deg,rgba(34,8,8,.58),rgba(10,6,6,.94)); } #adminRequestDetailScreen .admin-request-reject-card .admin-request-action-btn{margin-bottom:8px;background:transparent} #adminRequestDetailScreen .admin-request-reject-label{display:block;color:#bfbfbf;font-size:clamp(8px,1.95vw,10px);margin:0 0 5px} #adminRequestDetailScreen .admin-request-select{ width:100%;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:#0b0b0b;color:#e4e4e4; min-height:38px;padding:8px 10px;font-size:clamp(8px,2vw,10px);outline:none; } #adminRequestDetailScreen .admin-request-reject-help{display:block;color:#969696;font-size:clamp(7.5px,1.85vw,9px);margin-top:6px} #adminRequestDetailScreen .admin-request-list-back{ width:100%;appearance:none;-webkit-appearance:none;border-radius:12px;border:1px solid rgba(156,66,255,.28); background:linear-gradient(180deg,rgba(18,18,18,.96),rgba(9,9,9,.96));color:#b266ff; min-height:48px;padding:13px 12px;margin-bottom:8px;font-size:clamp(11px,2.9vw,13px);font-weight:800;letter-spacing:.03em;cursor:pointer; } #adminRequestDetailScreen .admin-request-bottom-decor-wrap{ position:absolute;z-index:55;left:0;right:0;bottom:calc(var(--ttf-nav-height,84px) - clamp(22px,5.5vw,28px)); height:clamp(164px,41vw,214px);overflow:hidden;pointer-events:none;user-select:none; -webkit-mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.18) 10%, rgba(0,0,0,.6) 20%, #000 32%, #000 100%); mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.18) 10%, rgba(0,0,0,.6) 20%, #000 32%, #000 100%); } #adminRequestDetailScreen .admin-request-bottom-decor{ position:absolute;left:50%;bottom:0;width:min(132%,1160px);height:auto;max-width:none;object-fit:cover;object-position:center bottom; transform:translateX(-50%);display:block; } #adminRequestDetailScreen .canonical-bottom-nav{z-index:100!important} #adminRequestDetailScreen .cbn-profile{color:#ff6500} @media(max-width:430px){ #adminRequestDetailScreen .admin-request-detail-dynamic{top:17.2%;padding-bottom:clamp(186px,46vw,248px)} #adminRequestDetailScreen .admin-request-panel{padding:0 8px 8px;margin-bottom:8px} #adminRequestDetailScreen .admin-request-main-grid{grid-template-columns:minmax(102px,35%) minmax(0,1fr);gap:10px} #adminRequestDetailScreen .admin-request-facts div{grid-template-columns:76px minmax(0,1fr);gap:6px} #adminRequestDetailScreen .admin-request-action-btn{grid-template-columns:34px minmax(0,1fr);gap:9px;padding:10px} } /* 16/08/2026 — V40 : Demandes à traiter alimentées par les vraies demandes */ #adminRequestDetailScreen .admin-request-queue-panel{padding-bottom:8px} #adminRequestDetailScreen .admin-request-panel-heading h2 b{ display:inline-grid;place-items:center;min-width:22px;height:22px;margin-left:5px;padding:0 6px;border-radius:999px; background:rgba(168,80,255,.18);border:1px solid rgba(168,80,255,.28);color:#c27aff;font-size:.82em; } #adminRequestDetailScreen .admin-pending-list{display:flex;flex-direction:column;gap:6px} #adminRequestDetailScreen .admin-pending-row{ width:100%;appearance:none;-webkit-appearance:none;border:1px solid rgba(255,255,255,.08);border-radius:10px; background:linear-gradient(180deg,rgba(14,14,14,.96),rgba(7,7,7,.96));color:#fff; display:grid;grid-template-columns:42px minmax(0,1fr) auto 14px;gap:9px;align-items:center; min-height:58px;padding:6px 8px;text-align:left;cursor:pointer; } #adminRequestDetailScreen .admin-pending-row.selected{ border-color:rgba(255,101,0,.65);box-shadow:0 0 0 1px rgba(255,101,0,.12) inset,0 0 16px rgba(255,101,0,.08); } #adminRequestDetailScreen .admin-pending-row img, #adminRequestDetailScreen .admin-pending-placeholder{ width:42px;height:48px;border-radius:5px;object-fit:cover;background:#111;display:grid;place-items:center;color:#ff6500; } #adminRequestDetailScreen .admin-pending-copy{min-width:0;display:flex;flex-direction:column;gap:3px} #adminRequestDetailScreen .admin-pending-copy strong{font-size:clamp(10px,2.7vw,12px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #adminRequestDetailScreen .admin-pending-copy small{font-size:clamp(7.5px,1.95vw,9.5px);color:#9d9d9d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #adminRequestDetailScreen .admin-pending-date{color:#ff8a2a;font-size:clamp(7px,1.75vw,8.5px);white-space:nowrap} #adminRequestDetailScreen .admin-pending-chevron{color:#ff6500;font-size:22px;line-height:1} #adminRequestDetailScreen .admin-request-loading, #adminRequestDetailScreen .admin-request-empty{ width:100%;border:1px solid rgba(255,101,0,.22);border-radius:12px;background:rgba(10,10,10,.95); color:#a8a8a8;text-align:center;padding:22px 12px;margin-bottom:10px; } #adminRequestDetailScreen .admin-request-empty{display:flex;flex-direction:column;gap:5px} #adminRequestDetailScreen .admin-request-empty strong{color:#ff7a1a;font-size:clamp(12px,3.1vw,15px)} #adminRequestDetailScreen .admin-request-empty small{font-size:clamp(8px,2.1vw,10px)} #adminRequestDetailScreen .admin-request-real-poster{ display:block;width:100%;aspect-ratio:2/3;object-fit:cover;object-position:center;border-radius:8px;background:#090909; } @media(max-width:430px){ #adminRequestDetailScreen .admin-pending-row{grid-template-columns:38px minmax(0,1fr) auto 12px;gap:7px;min-height:54px;padding:5px 6px} #adminRequestDetailScreen .admin-pending-row img, #adminRequestDetailScreen .admin-pending-placeholder{width:38px;height:44px} #adminRequestDetailScreen .admin-pending-date{max-width:74px;overflow:hidden;text-overflow:ellipsis} } /* 16/08/2026 — cycle de vie des demandes : motif de refus visible dans Mes demandes */ #myRequestsScreen .myreq-refusal-reason{ margin-top:clamp(4px,1.2vw,7px); padding:clamp(5px,1.4vw,8px) clamp(7px,1.8vw,10px); border-left:2px solid #ff3535; border-radius:5px; background:rgba(90,0,0,.16); color:#d8d8d8; font-size:clamp(8px,2.05vw,10px); line-height:1.3; } #myRequestsScreen .myreq-refusal-reason strong{color:#ff4a4a} /* 16/08/2026 — V42 : demande de série par saisons Panneau validé raccord TonTonFlix : noir/orange, accents violets, saisons Emby réelles. */ body.season-request-open{overflow:hidden!important} .season-request-overlay{ position:fixed;z-index:2200;inset:0;background:rgba(0,0,0,.78); display:flex;align-items:center;justify-content:center;padding:clamp(10px,2.5vw,22px); backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px); } .season-request-card{ position:relative;width:min(94vw,690px);max-height:min(92dvh,1120px);overflow:hidden; border:1.5px solid #ff6500;border-radius:18px;background:linear-gradient(180deg,#090909,#050505 60%,#090909); color:#eee;box-shadow:0 22px 70px rgba(0,0,0,.82),0 0 26px rgba(255,101,0,.10); } .season-request-hero{ position:relative;min-height:clamp(160px,27vw,220px);display:grid; grid-template-columns:clamp(82px,18vw,126px) minmax(0,1fr) clamp(88px,20vw,142px); align-items:center;gap:clamp(8px,2vw,15px);padding:clamp(18px,3vw,26px) clamp(16px,3.5vw,28px); overflow:hidden;border-bottom:1px solid rgba(255,255,255,.06); background: radial-gradient(circle at 84% 56%,rgba(255,101,0,.12),transparent 34%), linear-gradient(90deg,#090909 0%,#070707 52%,#100a05 100%); } .season-request-hero::after{ content:"";position:absolute;right:-2%;bottom:-10%;width:34%;height:64%;opacity:.52;pointer-events:none; background:repeating-linear-gradient(0deg,rgba(255,117,26,.18) 0 2px,transparent 2px 14px),linear-gradient(180deg,transparent,rgba(255,101,0,.08)); clip-path:polygon(8% 65%,22% 45%,36% 56%,48% 35%,62% 50%,74% 25%,100% 36%,100% 100%,0 100%); } .season-request-clipboard{ position:relative;z-index:3;width:clamp(70px,15vw,102px);aspect-ratio:.72;border-radius:9px; justify-self:center;display:flex;flex-direction:column;justify-content:center;gap:9%;padding:28% 22%; color:#62d323;font-weight:900;font-size:clamp(12px,2.4vw,18px); background:linear-gradient(90deg,#6e3514 0 10%,#d98a42 11% 18%,#eee7d9 19% 86%,#8a4b20 87% 100%); border:2px solid #9d5525;box-shadow:0 8px 24px rgba(0,0,0,.55);transform:rotate(-4deg); } .season-request-clipboard::before{ content:"";position:absolute;left:32%;right:32%;top:-6%;height:16%;border-radius:999px;background:#8c8c8c;border:2px solid #383838; } .season-request-hero-copy{position:relative;z-index:4;min-width:0} .season-request-hero-copy h2{margin:0;color:#f5f5f5;font-size:clamp(22px,4.3vw,38px);line-height:1.02;font-weight:900;letter-spacing:.01em} .season-request-hero-copy h2 strong{color:#ff6500;font-weight:900} .season-request-hero-copy p{margin:clamp(12px,2vw,18px) 0 0;color:#cfcfcf;font-size:clamp(10px,2.15vw,15px);line-height:1.48} .season-request-cinema{position:relative;z-index:3;align-self:stretch;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8%} .season-popcorn{position:relative;z-index:3;font-size:clamp(38px,8vw,70px);filter:drop-shadow(0 4px 10px rgba(0,0,0,.65))} .season-projector-beam{ position:absolute;left:-45%;top:24%;width:145%;height:38%;opacity:.62;transform:rotate(4deg);transform-origin:left center; background:linear-gradient(90deg,rgba(220,240,255,.72),rgba(188,221,245,.15) 72%,transparent);clip-path:polygon(0 45%,100% 0,100% 100%,0 58%); filter:blur(1px); } .season-request-close{position:absolute;z-index:10;right:12px;top:10px;width:38px;height:38px;border:0;background:rgba(0,0,0,.42);color:#d8d8d8;border-radius:50%;font-size:30px;line-height:1;cursor:pointer} .season-request-scroll{max-height:calc(min(92dvh,1120px) - clamp(160px,27vw,220px));overflow-y:auto;overflow-x:hidden;scrollbar-width:none;padding:clamp(12px,2.8vw,22px)} .season-request-scroll::-webkit-scrollbar{display:none} .season-request-section{padding:clamp(10px,2vw,16px);border-radius:12px;background:linear-gradient(180deg,rgba(20,20,20,.98),rgba(10,10,10,.98));border:1px solid rgba(255,255,255,.07)} .season-request-section h3{margin:0 0 10px;color:#ff7416;font-size:clamp(14px,3vw,21px);font-weight:900} .season-request-list{display:flex;flex-direction:column;gap:0;border:1px solid rgba(255,255,255,.13);border-radius:10px;overflow:hidden} .season-request-loading{padding:28px 14px;text-align:center;color:#aaa;font-size:clamp(10px,2.2vw,14px)} .season-request-row{ width:100%;min-height:clamp(64px,10vw,82px);display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:12px; border:0;border-bottom:1px solid rgba(255,255,255,.10);background:linear-gradient(90deg,#0b0b0b,#111);color:#eee;padding:10px 14px;text-align:left;cursor:pointer; } .season-request-row:last-child{border-bottom:0} .season-request-row:disabled{cursor:default;opacity:1} .season-request-box{width:28px;height:28px;border:2px solid #ff6500;border-radius:5px;display:grid;place-items:center;color:#111;background:#ff6500;font-size:19px;font-weight:900} .season-request-row.is-selected .season-request-box,.season-request-row.is-missing .season-request-box{border-color:#9950ff;background:#9950ff;color:#090909} .season-request-row.is-missing:not(.is-selected) .season-request-box{background:transparent;color:transparent} .season-request-row.is-available .season-request-box{border-color:#57c51d;background:transparent;color:#57c51d} .season-request-row.is-requested .season-request-box{border-color:#ff8a1e;background:transparent;color:#ff8a1e} .season-request-row-copy{min-width:0;display:flex;flex-direction:column;gap:3px} .season-request-row-copy strong{font-size:clamp(13px,2.8vw,19px);line-height:1.1;color:#fff} .season-request-row-copy small{font-size:clamp(9px,2vw,13px);color:#aaa} .season-request-status-badge{min-width:clamp(118px,25vw,170px);padding:8px 11px;border:1px solid #e96c00;border-radius:8px;color:#ff7a00;font-size:clamp(9px,2.1vw,14px);text-align:center;white-space:nowrap;background:#0a0a0a} .season-request-row.is-available .season-request-status-badge{border-color:rgba(86,197,29,.22);background:rgba(36,83,12,.34);color:#62d323} .season-request-row.is-requested .season-request-status-badge{border-color:rgba(255,138,30,.35);color:#ff9b42;background:rgba(89,40,4,.28)} .season-request-all{ width:100%;min-height:clamp(74px,12vw,94px);margin-top:12px;display:grid;grid-template-columns:34px 38px minmax(0,1fr) auto;align-items:center;gap:10px; padding:10px 13px;border:1px solid #9b4fff;border-radius:10px;background:linear-gradient(90deg,rgba(17,9,23,.94),rgba(18,18,18,.95));color:#eee;text-align:left;cursor:pointer; } .season-request-all:disabled{opacity:.5;cursor:default} .season-request-all .season-request-check{width:28px;height:28px;border:2px solid #9b4fff;border-radius:5px;display:grid;place-items:center;color:#090909;background:transparent;font-weight:900;font-size:19px} .season-request-all.is-selected .season-request-check{background:#9b4fff} .season-request-star{color:#ad5cff;font-size:38px;line-height:1} .season-request-all-copy{display:flex;flex-direction:column;gap:3px;min-width:0}.season-request-all-copy strong{font-size:clamp(12px,2.6vw,17px)}.season-request-all-copy small{color:#bdbdbd;font-size:clamp(9px,2vw,13px)} .season-request-recommended{border:1px solid rgba(155,79,255,.45);border-radius:7px;padding:8px 12px;color:#b36cff;background:rgba(78,32,119,.28);font-size:clamp(9px,2vw,13px);white-space:nowrap} .season-request-info{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:center;margin-top:12px;padding:12px 14px;border:1px solid rgba(255,255,255,.13);border-radius:10px;background:#101010;color:#cfcfcf} .season-request-info>span{width:30px;height:30px;border:2px solid #9b4fff;border-radius:50%;display:grid;place-items:center;color:#b36cff;font-size:19px;font-weight:800}.season-request-info p{margin:0;font-size:clamp(9px,2vw,13px);line-height:1.45} .season-request-comment-label{display:block;margin:16px 2px 8px;color:#ff7416;font-size:clamp(12px,2.6vw,18px);font-weight:900} .season-request-comment{display:block;width:100%;min-height:70px;resize:vertical;border:1px solid rgba(255,255,255,.16);border-radius:8px;background:#0b0b0b;color:#eee;padding:12px 14px;font:inherit;font-size:clamp(10px,2.1vw,14px);outline:none}.season-request-comment:focus{border-color:#ff6500} .season-request-counter{text-align:right;color:#aaa;font-size:clamp(9px,1.9vw,12px);padding:5px 2px 0} .season-request-error{min-height:18px;margin:4px 2px 6px;color:#ff5555;font-size:clamp(9px,2vw,13px)} .season-request-submit,.season-request-cancel{width:100%;min-height:52px;border-radius:8px;font-weight:900;font-size:clamp(13px,2.8vw,19px);cursor:pointer} .season-request-submit{border:0;background:linear-gradient(90deg,#b53a00,#ff6500,#d94800);color:#fff;box-shadow:0 0 20px rgba(255,101,0,.12)} .season-request-submit:disabled{filter:grayscale(.75);opacity:.48;cursor:default} .season-request-cancel{margin-top:10px;border:1px solid rgba(255,255,255,.13);background:#101010;color:#bdbdbd} /* Fiche série : état réel saison par saison. */ #detailModal .detail-series-availability{display:flex!important;flex-direction:column!important;gap:7px!important} #detailModal .detail-season-row{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;padding:9px 10px!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:8px!important;background:#090909!important} #detailModal .detail-season-row>span{display:flex!important;flex-direction:column!important;gap:2px!important}.detail-season-row strong{color:#eee!important;font-size:clamp(10px,2.3vw,14px)!important}.detail-season-row small{color:#888!important;font-size:clamp(8px,1.8vw,11px)!important}.detail-season-row b{font-size:clamp(8px,1.9vw,12px)!important;white-space:nowrap!important}.detail-season-row.is-available b{color:#62c727!important}.detail-season-row.is-missing b{color:#ff7900!important} /* Mes demandes : précise les saisons et la progression Emby sans changer le visuel global. */ #myRequestsScreen .myreq-seasons{display:flex;flex-direction:column;gap:2px;margin-top:4px;padding:5px 7px;border-left:2px solid #9d32ff;background:rgba(54,20,83,.16);border-radius:0 5px 5px 0} #myRequestsScreen .myreq-seasons strong{color:#c07cff;font-size:clamp(8px,2vw,10px);font-weight:700} #myRequestsScreen .myreq-seasons small{color:#aaa;font-size:clamp(7px,1.75vw,9px);line-height:1.2} @media(max-width:520px){ .season-request-overlay{padding:7px} .season-request-card{width:97vw;max-height:95dvh;border-radius:15px} .season-request-hero{grid-template-columns:66px minmax(0,1fr) 74px;min-height:142px;padding:16px 12px;gap:8px} .season-request-scroll{max-height:calc(95dvh - 142px);padding:10px} .season-request-status-badge{min-width:100px;padding:7px 6px} .season-request-all{grid-template-columns:30px 30px minmax(0,1fr);gap:7px} .season-request-recommended{grid-column:2/4;justify-self:stretch;text-align:center;padding:6px 8px} } /* V42 — le bandeau du panneau reprend directement le visuel validé. */ .season-request-card{display:flex;flex-direction:column} .season-request-hero{ flex:0 0 auto;display:block!important;min-height:0!important;aspect-ratio:684/232!important;padding:0!important; background:#050505 url('/assets/reference/22_choix_saisons_bandeau.png') center/100% 100% no-repeat!important; border-bottom:0!important; } .season-request-hero::after{display:none!important} .season-request-clipboard,.season-request-cinema{display:none!important} .season-request-hero-copy{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} .season-request-close{right:1.2%!important;top:5%!important;width:8%!important;height:30%!important;background:transparent!important;color:transparent!important;border-radius:0!important} .season-request-scroll{flex:1 1 auto;min-height:0;max-height:none!important} @media(max-width:520px){ .season-request-hero{min-height:0!important;aspect-ratio:684/232!important;padding:0!important;grid-template-columns:none!important} .season-request-scroll{max-height:none!important} } /* 16/08/2026 — V43 : FICHE FILM / SÉRIE UNIQUE ET ADAPTABLE Un seul panneau dynamique. L'en-tête change FILM/SÉRIE selon le média. Deux visuels : bandeau cinéma haut + décor bas DeLorean / Interceptor au premier plan. */ #detailModal.modal-overlay{ position:fixed!important; inset:0!important; z-index:1200!important; display:block!important; overflow:hidden!important; padding:0!important; background:#000!important; } #detailModal.modal-overlay.hidden{display:none!important} #detailModal .modal-card{ position:relative!important; width:min(100vw,853px)!important; max-width:853px!important; height:100dvh!important; min-height:100dvh!important; max-height:100dvh!important; margin:0 auto!important; padding:0!important; overflow:hidden!important; border:0!important; border-radius:0!important; box-shadow:none!important; background:#000!important; isolation:isolate!important; } #detailModal .detail-cinema-header{ position:absolute!important; z-index:4!important; left:0!important; top:0!important; width:100%!important; height:clamp(138px,34vw,290px)!important; margin:0!important; padding:0!important; background:#000 url('/assets/reference/21_fiche_film_serie_haut.png') top center/100% auto no-repeat!important; pointer-events:none!important; } #detailModal .detail-cinema-header::after{ content:""; position:absolute; inset:auto 0 0; height:34%; background:linear-gradient(to bottom,rgba(0,0,0,0),#000 94%); pointer-events:none; } #detailModal .detail-header-copy{ position:absolute!important; z-index:2!important; left:31%!important; top:17%!important; width:46%!important; text-align:left!important; text-shadow:0 2px 10px #000!important; } #detailModal .detail-header-copy h2{ display:flex!important; flex-wrap:wrap!important; align-items:baseline!important; gap:.18em!important; margin:0 0 .22em!important; padding:0!important; font-family:Arial,sans-serif!important; font-size:clamp(27px,7.6vw,62px)!important; line-height:.92!important; font-weight:950!important; letter-spacing:-.045em!important; color:#f4f4f4!important; text-transform:uppercase!important; } #detailModal .detail-header-copy h2 strong{ color:#ff6500!important; font-weight:950!important; } #detailModal .detail-header-copy p{ margin:0!important; padding:0!important; color:#d8d8d8!important; font-size:clamp(9px,2.25vw,17px)!important; line-height:1.27!important; max-width:96%!important; } #detailModal .detail-header-copy p b{color:#ff6500!important;font-weight:700!important} #detailModal .modal-close{ position:absolute!important; z-index:95!important; left:2.2%!important; top:1.5%!important; width:auto!important; min-width:21%!important; height:6%!important; display:flex!important; align-items:center!important; gap:5px!important; padding:0!important; border:0!important; background:transparent!important; color:#ddd!important; opacity:1!important; font-size:clamp(10px,2.6vw,17px)!important; cursor:pointer!important; } #detailModal .modal-close span:first-child{ color:#fff!important; font-size:clamp(28px,7vw,50px)!important; font-weight:200!important; line-height:.8!important; } #detailModal .detail-content{ position:absolute!important; z-index:20!important; left:3.2%!important; right:3.2%!important; top:clamp(138px,34vw,290px)!important; bottom:calc(var(--ttf-nav-height,84px) + .7dvh)!important; width:auto!important; height:auto!important; margin:0!important; padding:3px 0 clamp(190px,47vw,280px)!important; overflow-y:auto!important; overflow-x:hidden!important; scrollbar-width:none!important; overscroll-behavior:contain!important; -webkit-overflow-scrolling:touch!important; box-sizing:border-box!important; font-family:Arial,sans-serif!important; color:#eee!important; } #detailModal .detail-content::-webkit-scrollbar{display:none!important} #detailModal .detail-hero{ display:grid!important; grid-template-columns:34% minmax(0,1fr)!important; gap:4.4%!important; align-items:start!important; margin:0 0 9px!important; padding:10px!important; border:1px solid rgba(255,101,0,.72)!important; border-radius:13px!important; background:linear-gradient(180deg,rgba(18,18,18,.99),rgba(7,7,7,.99))!important; box-shadow:0 8px 22px rgba(0,0,0,.35)!important; } #detailModal .modal-poster{ position:static!important; width:100%!important; height:auto!important; aspect-ratio:2/3!important; object-fit:cover!important; border:1.5px solid #ff6500!important; border-radius:10px!important; opacity:1!important; background:#090909!important; } #detailModal .detail-main{position:static!important;min-width:0!important;overflow:visible!important} #detailModal #modalTitle, #detailModal #modalMeta, #detailModal #modalGenres, #detailModal .detail-rating, #detailModal .detail-facts, #detailModal .detail-facts dt, #detailModal .detail-facts dd{ position:static!important; left:auto!important;right:auto!important;top:auto!important;bottom:auto!important; width:auto!important;height:auto!important;max-width:none!important; opacity:1!important;transform:none!important;background:transparent!important;overflow:visible!important; } #detailModal #modalTitle{ margin:0 0 3px!important; padding:0!important; color:#fff!important; font-size:clamp(22px,5.4vw,40px)!important; line-height:1.06!important; font-weight:800!important; } #detailModal #modalMeta{ margin:0 0 4px!important; padding:0!important; color:#bcbcbc!important; font-size:clamp(12px,2.95vw,20px)!important; line-height:1.3!important; } #detailModal #modalGenres{ margin:0 0 8px!important; padding:0!important; color:#ad52ff!important; font-size:clamp(11px,2.55vw,18px)!important; line-height:1.3!important; } #detailModal .detail-rating{ display:grid!important; grid-template-columns:auto 1fr!important; column-gap:7px!important; align-items:center!important; margin:2px 0 9px!important; font-size:clamp(19px,4.6vw,34px)!important; } #detailModal .detail-rating .star{color:#ffad00!important;font-size:1.45em!important} #detailModal .detail-rating small{grid-column:2!important;color:#888!important;font-size:.5em!important} #detailModal .detail-facts{ display:grid!important; grid-template-columns:39% 61%!important; gap:6px 5px!important; margin:0!important; font-size:clamp(10px,2.45vw,16px)!important; line-height:1.32!important; } #detailModal .detail-facts dt{color:#9f9f9f!important;white-space:nowrap!important} #detailModal .detail-facts dd{margin:0!important;color:#eee!important;min-width:0!important} #detailModal .detail-box{ position:relative!important; display:block!important; width:100%!important; height:auto!important; min-height:0!important; margin:0 0 9px!important; padding:11px 12px!important; border:1px solid rgba(255,255,255,.13)!important; border-radius:12px!important; background:linear-gradient(180deg,rgba(15,15,15,.985),rgba(6,6,6,.985))!important; box-shadow:0 7px 18px rgba(0,0,0,.28)!important; overflow:visible!important; } #detailModal .detail-box.hidden{display:none!important} #detailModal .detail-box h4{ margin:0 0 8px!important; padding:0!important; color:#a84cff!important; font-size:clamp(13px,3.1vw,20px)!important; line-height:1.1!important; font-weight:800!important; letter-spacing:.02em!important; } #detailModal #modalOverview{ position:static!important; width:auto!important;height:auto!important; margin:0!important;padding:0!important; opacity:1!important;background:transparent!important;color:#dedede!important; font-size:clamp(11px,2.6vw,16px)!important; line-height:1.48!important; overflow:visible!important; } #detailModal .detail-status{ padding:8px 10px!important; border:1px solid rgba(102,199,39,.62)!important; border-radius:8px!important; background:#071006!important; color:#6bd12d!important; font-size:clamp(11px,2.55vw,16px)!important; } #detailModal .detail-request-state{ color:#d5d5d5!important; font-size:clamp(11px,2.6vw,16px)!important; line-height:1.35!important; } #detailModal .detail-actions{ display:grid!important; grid-template-columns:1fr 1fr!important; gap:8px!important; } #detailModal .detail-actions h4{grid-column:1/-1!important;margin-bottom:2px!important} #detailModal #modalRequestBtn, #detailModal #modalMyRequestsBtn{ position:static!important; width:100%!important; height:auto!important; min-height:46px!important; margin:0!important; padding:9px 8px!important; border-radius:8px!important; opacity:1!important; font-size:clamp(10px,2.45vw,15px)!important; line-height:1.12!important; font-weight:800!important; cursor:pointer!important; } #detailModal #modalRequestBtn{ border:1px solid #9f42ff!important; background:linear-gradient(90deg,#7b24bd,#a83ef1)!important; color:#fff!important; } #detailModal #modalRequestBtn:disabled{opacity:.46!important;filter:grayscale(.45)!important;cursor:default!important} #detailModal #modalMyRequestsBtn{ border:1px solid #159fe9!important; background:#071018!important; color:#39b7ff!important; } #detailModal #modalError{ position:static!important; width:auto!important;height:auto!important; margin:3px 0 0!important;padding:0!important; opacity:1!important;background:transparent!important;color:#ff5b5b!important; font-size:clamp(8px,1.9vw,12px)!important; } #detailModal .detail-series-availability{display:flex!important;flex-direction:column!important;gap:7px!important} #detailModal .detail-season-row{ display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important; padding:9px 10px!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:8px!important;background:#090909!important; } #detailModal .detail-season-row>span{display:flex!important;flex-direction:column!important;gap:2px!important} #detailModal .detail-season-row strong{color:#eee!important;font-size:clamp(9px,2.2vw,14px)!important} #detailModal .detail-season-row small{color:#888!important;font-size:clamp(8px,1.8vw,11px)!important} #detailModal .detail-season-row b{font-size:clamp(8px,1.9vw,12px)!important;white-space:nowrap!important} #detailModal .detail-season-row.is-available b{color:#62c727!important} #detailModal .detail-season-row.is-missing b{color:#ff7900!important} #detailModal .detail-bottom-decor-wrap{ position:absolute!important; z-index:800!important; left:0!important; right:0!important; bottom:calc(var(--ttf-nav-height,84px) - clamp(25px,6vw,32px))!important; height:clamp(145px,37vw,235px)!important; overflow:hidden!important; pointer-events:none!important; user-select:none!important; -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.14) 9%,rgba(0,0,0,.52) 20%,#000 34%,#000 100%)!important; mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.14) 9%,rgba(0,0,0,.52) 20%,#000 34%,#000 100%)!important; } #detailModal .detail-bottom-decor{ position:absolute!important; left:50%!important; bottom:0!important; width:min(132%,1160px)!important; height:auto!important; max-width:none!important; transform:translateX(-50%)!important; display:block!important; object-fit:cover!important; object-position:center bottom!important; } #detailModal .detail-canonical-nav{z-index:1000!important} #detailModal .detail-canonical-nav .cbn-search{color:#ff6500!important} #detailModal.is-series .detail-header-copy{width:49%!important} #detailModal.is-series .detail-header-copy h2 strong{color:#ff6500!important} #detailModal.is-movie .detail-header-copy h2 strong{color:#ff6500!important} @media(max-width:430px){ #detailModal .detail-header-copy{left:30.5%!important;top:16%!important;width:49%!important} #detailModal .detail-header-copy h2{font-size:clamp(26px,7.45vw,34px)!important} #detailModal .detail-header-copy p{font-size:clamp(8.5px,2.15vw,10.5px)!important} #detailModal .detail-content{padding-bottom:clamp(190px,48vw,225px)!important} #detailModal .detail-hero{grid-template-columns:35% minmax(0,1fr)!important;gap:4%!important;padding:9px!important} #detailModal .detail-facts{grid-template-columns:40% 60%!important;font-size:clamp(7.6px,1.85vw,9.2px)!important;gap:5px 4px!important} #detailModal .detail-actions{gap:6px!important} #detailModal #modalRequestBtn,#detailModal #modalMyRequestsBtn{font-size:clamp(8px,2vw,9.5px)!important;padding:8px 5px!important} } #detailModal #detailHeaderFocus{color:#d8d8d8!important;font-weight:400!important} /* 16/08/2026 — V44 : Fiche détail / choix des saisons - le décor bas passe nettement devant la fiche, sans coupure noire visible - la sélection de saisons reste individuelle, avec option globale */ #detailModal .detail-content{ bottom:calc(var(--ttf-nav-height,84px) + .25dvh)!important; padding-bottom:clamp(150px,38vw,215px)!important; scroll-padding-bottom:clamp(150px,38vw,215px)!important; } #detailModal .detail-bottom-decor-wrap{ z-index:950!important; bottom:calc(var(--ttf-nav-height,84px) + clamp(10px,2.6vw,18px))!important; height:clamp(172px,43vw,252px)!important; -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.34) 7%,rgba(0,0,0,.78) 16%,#000 27%,#000 100%)!important; mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.34) 7%,rgba(0,0,0,.78) 16%,#000 27%,#000 100%)!important; } #detailModal .detail-bottom-decor-wrap::before{ content:""; position:absolute; left:0; right:0; top:-28px; height:56px; background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.88)); pointer-events:none; } #detailModal .detail-bottom-decor{ width:min(137%,1200px)!important; } #detailModal .detail-canonical-nav{z-index:1100!important} .season-request-row[aria-pressed='true'] .season-request-box, .season-request-all[aria-pressed='true'] .season-request-check{ box-shadow:0 0 0 1px rgba(255,255,255,.14) inset,0 0 12px rgba(155,79,255,.24); } .season-request-row:not(:disabled):active, .season-request-all:not(:disabled):active{ transform:scale(.995); } .season-request-row:focus-visible, .season-request-all:focus-visible, .season-request-submit:focus-visible, .season-request-cancel:focus-visible{ outline:2px solid rgba(255,101,0,.75); outline-offset:2px; } @media(max-width:430px){ #detailModal .detail-content{ padding-bottom:clamp(158px,40vw,208px)!important; scroll-padding-bottom:clamp(158px,40vw,208px)!important; } #detailModal .detail-bottom-decor-wrap{ bottom:calc(var(--ttf-nav-height,84px) + clamp(8px,2vw,14px))!important; height:clamp(168px,41vw,226px)!important; } } #detailModal .detail-season-row.is-unknown b{color:#d7a04c!important} #detailModal .detail-season-row.is-unknown{border-color:rgba(215,160,76,.16)!important} /* 16/08/2026 — V46 : lisibilité renforcée des fiches Film / Série sur téléphone */ @media(max-width:430px){ #detailModal .detail-hero{ grid-template-columns:32% minmax(0,1fr)!important; gap:4.5%!important; padding:10px!important; } #detailModal #modalTitle{ font-size:clamp(26px,6.6vw,31px)!important; line-height:1.08!important; margin-bottom:5px!important; } #detailModal #modalMeta{ font-size:clamp(13px,3.35vw,15px)!important; line-height:1.34!important; margin-bottom:6px!important; } #detailModal #modalGenres{ font-size:clamp(12px,3vw,14px)!important; line-height:1.35!important; margin-bottom:10px!important; } #detailModal .detail-rating{ font-size:clamp(24px,6vw,29px)!important; margin:4px 0 12px!important; } #detailModal .detail-facts{ grid-template-columns:38% 62%!important; gap:7px 6px!important; font-size:clamp(11.5px,2.95vw,13px)!important; line-height:1.34!important; } #detailModal .detail-box h4{ font-size:clamp(14px,3.5vw,16px)!important; margin-bottom:9px!important; } #detailModal #modalOverview, #detailModal .detail-status, #detailModal .detail-request-state{ font-size:clamp(12px,3.05vw,13.5px)!important; line-height:1.48!important; } #detailModal #modalRequestBtn, #detailModal #modalMyRequestsBtn{ min-height:48px!important; padding:10px 8px!important; font-size:clamp(11px,2.9vw,13px)!important; line-height:1.16!important; } #detailModal .detail-box{ padding:12px 13px!important; } #detailModal .detail-season-row strong{ font-size:clamp(11px,2.9vw,13px)!important; } #detailModal .detail-season-row small, #detailModal .detail-season-row b{ font-size:clamp(10px,2.55vw,11px)!important; } } /* 16/08/2026 — V47 : app mobile only - suppression du libellé "Retour" sur la fiche (flèche seule) - lecture nettement plus confortable sur téléphone pour Film / Série */ #detailModal .modal-close{ min-width:0!important; width:40px!important; height:40px!important; gap:0!important; justify-content:flex-start!important; font-size:0!important; } #detailModal .modal-close span:last-child{display:none!important} #detailModal .modal-close span:first-child{ font-size:clamp(30px,8vw,38px)!important; } @media(max-width:560px){ #detailModal .detail-cinema-header{ height:clamp(150px,36vw,210px)!important; background-size:100% 100%!important; } #detailModal .detail-header-copy{ left:30.5%!important; top:14.5%!important; width:50%!important; } #detailModal .detail-header-copy h2{ font-size:clamp(31px,8.1vw,42px)!important; line-height:.94!important; } #detailModal .detail-header-copy p{ font-size:clamp(11.5px,2.95vw,14px)!important; line-height:1.34!important; max-width:100%!important; } #detailModal .detail-content{ top:clamp(150px,36vw,210px)!important; left:3%!important; right:3%!important; padding-bottom:clamp(158px,39vw,210px)!important; scroll-padding-bottom:clamp(158px,39vw,210px)!important; } #detailModal .detail-hero{ grid-template-columns:33% minmax(0,1fr)!important; gap:4.2%!important; padding:12px!important; border-radius:14px!important; } #detailModal .modal-poster{ border-width:2px!important; border-radius:11px!important; } #detailModal #modalTitle{ font-size:clamp(28px,7vw,34px)!important; line-height:1.08!important; margin-bottom:6px!important; } #detailModal #modalMeta{ font-size:clamp(14px,3.55vw,17px)!important; line-height:1.35!important; margin-bottom:7px!important; } #detailModal #modalGenres{ font-size:clamp(12.5px,3.15vw,15px)!important; line-height:1.38!important; margin-bottom:10px!important; } #detailModal .detail-rating{ font-size:clamp(26px,6.4vw,31px)!important; margin:5px 0 12px!important; } #detailModal .detail-rating small{ font-size:.56em!important; } #detailModal .detail-facts{ grid-template-columns:36% 64%!important; gap:8px 6px!important; font-size:clamp(12px,3vw,14px)!important; line-height:1.38!important; } #detailModal .detail-box{ padding:13px 14px!important; margin-bottom:10px!important; border-radius:13px!important; } #detailModal .detail-box h4{ font-size:clamp(15px,3.8vw,17px)!important; margin-bottom:10px!important; } #detailModal #modalOverview, #detailModal .detail-status, #detailModal .detail-request-state{ font-size:clamp(13px,3.2vw,14.5px)!important; line-height:1.56!important; } #detailModal #modalRequestBtn, #detailModal #modalMyRequestsBtn{ min-height:50px!important; padding:11px 9px!important; font-size:clamp(12px,2.95vw,13.5px)!important; line-height:1.16!important; } #detailModal .detail-season-row{ padding:10px 11px!important; } #detailModal .detail-season-row strong{ font-size:clamp(12px,3vw,13.5px)!important; } #detailModal .detail-season-row small, #detailModal .detail-season-row b{ font-size:clamp(10.5px,2.55vw,12px)!important; } #detailModal .detail-bottom-decor-wrap{ bottom:calc(var(--ttf-nav-height,84px) + clamp(8px,2vw,14px))!important; height:clamp(172px,42vw,215px)!important; } } /* 16/08/2026 — V48 : flèche retour fiche Film/Série identique à « Mes demandes » */ #detailModal .modal-close{ position:absolute!important; z-index:1600!important; left:1.2%!important; top:2.7%!important; width:clamp(34px,9vw,50px)!important; height:clamp(38px,5.4dvh,52px)!important; min-width:0!important; display:block!important; padding:0!important; margin:0!important; border:0!important; background:transparent!important; opacity:1!important; color:transparent!important; cursor:pointer!important; font-size:0!important; line-height:1!important; } #detailModal .modal-close span{display:none!important} #detailModal .modal-close::before{ content:""!important; position:absolute!important; left:10px!important; top:50%!important; width:14px!important; height:14px!important; border-left:3px solid #fff!important; border-bottom:3px solid #fff!important; transform:translateY(-50%) rotate(45deg)!important; transform-origin:center!important; filter:drop-shadow(0 2px 3px rgba(0,0,0,.9))!important; pointer-events:none!important; } /* ====================================================================== 16/08/2026 — Configuration Emby : intégration en 2 PNG validés Bandeau haut dédié + décor bas cinéma/horreur, tout en conservant la zone centrale et les hotspots existants. ====================================================================== */ #embyConfigScreen.emby-config-reference{ background:#000 url('/assets/reference/20_configuration_emby.png') top center/100% 100% no-repeat!important; isolation:isolate!important; overflow:hidden!important; } #embyConfigScreen .emby-config-top-banner{ position:absolute; z-index:14; left:0; top:0; width:100%; height:auto; display:block; pointer-events:none; user-select:none; } #embyConfigScreen .emby-config-back, #embyConfigScreen .emby-config-test, #embyConfigScreen .emby-config-save, #embyConfigScreen .emby-config-cancel{ z-index:32!important; } #embyConfigScreen .emby-config-bottom-decor-wrap{ position:absolute; z-index:26; left:0; right:0; bottom:calc(var(--ttf-nav-height,84px) - clamp(18px,4vw,24px)); height:clamp(160px,39vw,222px); overflow:hidden; pointer-events:none; user-select:none; background:transparent; -webkit-mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.16) 10%, rgba(0,0,0,.60) 23%, #000 36%, #000 100%); mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.16) 10%, rgba(0,0,0,.60) 23%, #000 36%, #000 100%); } #embyConfigScreen .emby-config-bottom-decor{ position:absolute; left:50%; bottom:0; width:min(138%,1220px); max-width:none; height:auto; display:block; transform:translateX(-50%); } #embyConfigScreen .canonical-bottom-nav{z-index:1000!important} #embyConfigScreen .cbn-profile{color:#ff6500!important} @media(max-width:430px){ #embyConfigScreen .emby-config-bottom-decor-wrap{ bottom:calc(var(--ttf-nav-height,84px) - clamp(14px,3.6vw,20px)); height:clamp(148px,38vw,194px); } #embyConfigScreen .emby-config-bottom-decor{ width:min(146%,1120px); } } /* ====================================================================== 16/08/2026 — V50 CONFIGURATION EMBY : vraie interface HTML mobile-only Les deux PNG validés ne servent plus qu'au bandeau haut et au décor bas. Toute la partie centrale est codée, éditable et scrollable. ====================================================================== */ #embyConfigScreen.emby-config-reference{ position:relative!important; width:100%!important; height:100dvh!important; min-height:100dvh!important; max-height:100dvh!important; aspect-ratio:auto!important; overflow:hidden!important; background:#000!important; background-image:none!important; isolation:isolate!important; } #embyConfigScreen .emby-config-top-banner{ position:absolute!important;z-index:5!important;left:0!important;top:0!important;width:100%!important;height:auto!important;display:block!important;pointer-events:none!important;user-select:none!important; } #embyConfigScreen .emby-config-back{ position:absolute!important;z-index:90!important;left:0!important;top:0!important;width:14%!important;height:clamp(54px,13vw,88px)!important;border:0!important;background:transparent!important;cursor:pointer!important; } #embyConfigScreen .emby-config-dynamic{ position:absolute!important;z-index:20!important;left:2.5%!important;right:2.5%!important;top:35.4vw!important;bottom:calc(var(--ttf-nav-height,84px) + .6dvh)!important; overflow-y:auto!important;overflow-x:hidden!important;scrollbar-width:none!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior:contain!important; padding:8px 0 clamp(168px,42vw,220px)!important; } #embyConfigScreen .emby-config-dynamic::-webkit-scrollbar{display:none!important} #embyConfigScreen .emby-config-panel, #embyConfigScreen .emby-config-note{ width:100%!important;margin:0 0 8px!important;padding:12px 12px 10px!important;border:1px solid rgba(255,255,255,.105)!important;border-radius:12px!important; background:linear-gradient(180deg,rgba(16,16,16,.985),rgba(7,7,7,.985))!important;box-shadow:0 8px 22px rgba(0,0,0,.28)!important; } #embyConfigScreen .emby-config-panel h2{ margin:0 0 8px!important;padding:0 2px 8px!important;border-bottom:1px solid rgba(255,255,255,.075)!important;color:#a94cff!important;font-size:clamp(13px,3.25vw,17px)!important;line-height:1.15!important;font-weight:900!important; } #embyConfigScreen .emby-config-panel h2 span{color:#a94cff!important} #embyConfigScreen .emby-config-row{ position:relative!important;display:grid!important;grid-template-columns:40px minmax(0,1fr) minmax(132px,46%)!important;gap:8px!important;align-items:center!important; min-height:76px!important;padding:8px 2px!important;border-bottom:1px solid rgba(255,255,255,.07)!important; } #embyConfigScreen .emby-config-row:last-child{border-bottom:0!important} #embyConfigScreen .emby-config-icon{ width:34px!important;height:34px!important;border:1.5px solid #9336f1!important;border-radius:50%!important;display:grid!important;place-items:center!important;color:#b15dff!important;font-size:19px!important; } #embyConfigScreen .emby-config-label{min-width:0!important;display:flex!important;flex-direction:column!important;gap:3px!important;color:#eee!important} #embyConfigScreen .emby-config-label strong{font-size:clamp(11px,2.75vw,14px)!important;line-height:1.22!important;font-weight:700!important} #embyConfigScreen .emby-config-label strong b{color:#a94cff!important} #embyConfigScreen .emby-config-label strong em{color:#a94cff!important;font-style:normal!important;font-weight:700!important} #embyConfigScreen .emby-config-label small{color:#9b9b9b!important;font-size:clamp(9px,2.2vw,11.5px)!important;line-height:1.25!important} #embyConfigScreen .emby-config-control{min-width:0!important;display:flex!important;align-items:center!important;min-height:42px!important;border:1px solid rgba(255,255,255,.16)!important;border-radius:8px!important;background:#0b0b0b!important;overflow:hidden!important} #embyConfigScreen .emby-config-control input{ width:100%!important;min-width:0!important;min-height:40px!important;margin:0!important;padding:9px 10px!important;border:0!important;outline:0!important;background:transparent!important;color:#f2f2f2!important;font:inherit!important;font-size:clamp(11px,2.7vw,14px)!important;caret-color:#a94cff!important; } #embyConfigScreen .emby-config-control input::placeholder{color:#777!important;opacity:1!important} #embyConfigScreen .emby-config-row-url{padding-bottom:22px!important} #embyConfigScreen .emby-config-example{position:absolute!important;right:2px!important;bottom:5px!important;width:46%!important;color:#777!important;font-size:clamp(8px,1.95vw,10px)!important} #embyConfigScreen .emby-key-control button{flex:0 0 40px!important;align-self:stretch!important;border:0!important;background:transparent!important;color:#a94cff!important;font-size:18px!important;cursor:pointer!important} #embyConfigScreen .emby-config-row-key{padding-bottom:30px!important} #embyConfigScreen .emby-config-help{position:absolute!important;right:2px!important;bottom:5px!important;border:0!important;background:transparent!important;color:#a94cff!important;font-size:clamp(8.5px,2.05vw,10.5px)!important;cursor:pointer!important;padding:0!important} #embyConfigScreen .emby-config-toggle-row{grid-template-columns:40px minmax(0,1fr) auto!important} #embyConfigScreen .emby-config-toggle{ width:52px!important;height:30px!important;padding:3px!important;border:1px solid rgba(168,76,255,.55)!important;border-radius:999px!important;background:#29133c!important;cursor:pointer!important;transition:.18s ease!important; } #embyConfigScreen .emby-config-toggle span{display:block!important;width:22px!important;height:22px!important;border-radius:50%!important;background:#fff!important;transform:translateX(0)!important;transition:.18s ease!important;box-shadow:0 1px 5px rgba(0,0,0,.45)!important} #embyConfigScreen .emby-config-toggle.is-on{background:linear-gradient(90deg,#7425c6,#9e3cff)!important} #embyConfigScreen .emby-config-toggle.is-on span{transform:translateX(20px)!important} #embyConfigScreen .emby-test-panel{padding-bottom:11px!important} #embyConfigScreen .emby-test-box{ display:grid!important;grid-template-columns:42px minmax(0,1fr)!important;gap:8px!important;align-items:center!important;padding:10px!important;border:1px dashed rgba(169,76,255,.52)!important;border-radius:10px!important;background:rgba(15,8,20,.42)!important; } #embyConfigScreen .emby-test-icon{width:34px!important;height:34px!important;display:grid!important;place-items:center!important;color:#a94cff!important;font-size:24px!important} #embyConfigScreen .emby-test-box>div{display:flex!important;flex-direction:column!important;gap:3px!important} #embyConfigScreen .emby-test-box>div strong{font-size:clamp(11px,2.75vw,14px)!important;color:#f1f1f1!important} #embyConfigScreen .emby-test-box>div small{font-size:clamp(9px,2.15vw,11px)!important;line-height:1.3!important;color:#aaa!important} #embyConfigScreen .emby-test-button{ grid-column:1/-1!important;width:100%!important;min-height:43px!important;margin-top:4px!important;border:1px solid #9e3cff!important;border-radius:7px!important;background:#0b0b0b!important;color:#b963ff!important;font-size:clamp(11px,2.7vw,14px)!important;font-weight:800!important;cursor:pointer!important; } #embyConfigScreen .emby-test-state{grid-column:1/-1!important;margin:0!important;text-align:center!important;color:#888!important;font-size:clamp(8.5px,2.05vw,10.5px)!important;line-height:1.25!important} #embyConfigScreen .emby-test-state.is-success{color:#67c829!important} #embyConfigScreen .emby-test-state.is-error{color:#ff5555!important} #embyConfigScreen .emby-config-save{ position:static!important;width:100%!important;min-height:48px!important;margin:3px 0 8px!important;padding:10px 12px!important;border:0!important;border-radius:8px!important;background:linear-gradient(90deg,#7025c5,#9e3cff,#7824d4)!important;color:#fff!important;font-size:clamp(12px,3vw,15px)!important;font-weight:900!important;cursor:pointer!important;box-shadow:0 0 18px rgba(151,61,255,.18)!important; } #embyConfigScreen .emby-config-cancel{ position:static!important;width:100%!important;min-height:43px!important;margin:0 0 8px!important;border:1px solid rgba(255,255,255,.11)!important;border-radius:8px!important;background:#0d0d0d!important;color:#bdbdbd!important;font-size:clamp(11px,2.65vw,13.5px)!important;font-weight:800!important;cursor:pointer!important; } #embyConfigScreen .emby-config-note{display:grid!important;grid-template-columns:36px minmax(0,1fr)!important;gap:10px!important;align-items:center!important;color:#aaa!important;padding:11px 12px!important} #embyConfigScreen .emby-config-note>span{font-size:27px!important;color:#a94cff!important} #embyConfigScreen .emby-config-note p{margin:0!important;font-size:clamp(9px,2.15vw,11px)!important;line-height:1.35!important} #embyConfigScreen .emby-config-note strong{color:#bd70ff!important;font-weight:700!important} #embyConfigScreen .emby-config-bottom-decor-wrap{ position:absolute!important;z-index:60!important;left:0!important;right:0!important;bottom:calc(var(--ttf-nav-height,84px) - clamp(18px,4.2vw,24px))!important;height:clamp(155px,39vw,210px)!important;overflow:hidden!important;pointer-events:none!important;user-select:none!important;background:transparent!important; -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.18) 10%,rgba(0,0,0,.62) 22%,#000 36%,#000 100%)!important;mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.18) 10%,rgba(0,0,0,.62) 22%,#000 36%,#000 100%)!important; } #embyConfigScreen .emby-config-bottom-decor{position:absolute!important;left:50%!important;bottom:0!important;width:min(143%,1220px)!important;max-width:none!important;height:auto!important;display:block!important;transform:translateX(-50%)!important} #embyConfigScreen .canonical-bottom-nav{z-index:1000!important} #embyConfigScreen .cbn-profile{color:#ff6500!important} @media(max-width:430px){ #embyConfigScreen .emby-config-dynamic{top:35.4vw!important;padding-top:6px!important;padding-bottom:clamp(162px,41vw,194px)!important} #embyConfigScreen .emby-config-panel{padding:10px 10px 9px!important} #embyConfigScreen .emby-config-row{grid-template-columns:36px minmax(0,1fr) minmax(125px,46%)!important;gap:7px!important;min-height:72px!important;padding-top:7px!important;padding-bottom:7px!important} #embyConfigScreen .emby-config-row-url{padding-bottom:22px!important} #embyConfigScreen .emby-config-row-key{padding-bottom:29px!important} #embyConfigScreen .emby-config-icon{width:31px!important;height:31px!important;font-size:17px!important} #embyConfigScreen .emby-config-toggle-row{grid-template-columns:36px minmax(0,1fr) auto!important} #embyConfigScreen .emby-config-bottom-decor-wrap{height:clamp(148px,37vw,180px)!important} } /* ====================================================================== 16/08/2026 — V52 : Gestion des rôles réelle, correction isolée IMPORTANT : overrides strictement limités à #rolesScreen. Aucune règle globale de navigation n'est modifiée. ====================================================================== */ #rolesScreen .roles-back{ position:absolute!important; z-index:92!important; left:1.2%!important; top:1.6%!important; width:10.5%!important; height:7%!important; border:0!important; background:transparent!important; cursor:pointer!important; } /* Masque la flèche ronde dessinée dans l'ancien bandeau et recrée la même flèche blanche simple que sur "Mes demandes". */ #rolesScreen::before{ content:""; position:absolute; z-index:89; left:0; top:0; width:14%; height:9%; background:#000; pointer-events:none; } #rolesScreen .roles-back::before{ content:""; position:absolute; left:33%; top:31%; width:13px; height:13px; border-left:2.4px solid #f2f2f2; border-bottom:2.4px solid #f2f2f2; transform:rotate(45deg); filter:drop-shadow(0 1px 2px #000); } #rolesScreen .roles-dynamic{ top:18.2%!important; bottom:calc(var(--ttf-nav-height,84px) + .6dvh)!important; padding-bottom:clamp(240px,60vw,340px)!important; } #rolesScreen .roles-search-shell input{ pointer-events:auto!important; font-size:clamp(11px,2.55vw,13px)!important; } #rolesScreen .roles-empty-state{ padding:18px 12px; text-align:center; color:#bdbdbd; font-size:clamp(10px,2.35vw,12px); line-height:1.35; } #rolesScreen .roles-user-row-button.active{ background:linear-gradient(90deg,rgba(58,26,7,.4),rgba(9,9,9,.12))!important; box-shadow:inset 0 0 0 1px rgba(255,131,51,.18)!important; border-radius:10px!important; } #rolesScreen button.roles-choice-card{ appearance:none; -webkit-appearance:none; cursor:pointer; text-align:left; color:inherit; } #rolesScreen .roles-choice-card:disabled, #rolesScreen .roles-secondary-button:disabled{ opacity:.48!important; cursor:default!important; } @media(max-width:430px){ #rolesScreen .roles-dynamic{ top:17.9%!important; padding-bottom:clamp(250px,62vw,345px)!important; } #rolesScreen .roles-back::before{ width:12px; height:12px; border-left-width:2.2px; border-bottom-width:2.2px; } } /* ====================================================================== 16/08/2026 — V53 AJOUTER UN UTILISATEUR Écran 16 uniquement : 2 PNG validés (haut + décor bas) et centre HTML/CSS. Aucun sélecteur global n'est modifié ici. ====================================================================== */ #addUserScreen.add-user-reference{ width:100%!important; height:100dvh!important; min-height:100dvh!important; max-height:100dvh!important; aspect-ratio:auto!important; position:relative!important; overflow:hidden!important; isolation:isolate!important; background:#000!important; } #addUserScreen .add-user-top-banner{ position:absolute!important; z-index:10!important; left:0!important; top:0!important; width:100%!important; height:clamp(198px,48vw,280px)!important; display:block!important; object-fit:cover!important; object-position:top center!important; pointer-events:none!important; user-select:none!important; } #addUserScreen .add-user-back{ position:absolute!important; z-index:90!important; left:0!important; top:0!important; width:14%!important; height:clamp(56px,13vw,88px)!important; border:0!important; background:transparent!important; cursor:pointer!important; } #addUserScreen .add-user-dynamic{ position:absolute!important; z-index:20!important; left:3.2%!important; right:3.2%!important; top:clamp(205px,49vw,286px)!important; bottom:calc(var(--ttf-nav-height,84px) + .5dvh)!important; overflow-y:auto!important; overflow-x:hidden!important; scrollbar-width:none!important; -webkit-overflow-scrolling:touch!important; overscroll-behavior:contain!important; padding:3px 0 clamp(245px,59vw,340px)!important; } #addUserScreen .add-user-dynamic::-webkit-scrollbar{display:none!important} #addUserScreen .add-user-private-note, #addUserScreen .add-user-panel{ width:100%!important; border:1px solid rgba(255,101,0,.26)!important; border-radius:13px!important; background:linear-gradient(180deg,rgba(17,17,17,.99),rgba(6,6,6,.99))!important; box-shadow:0 8px 22px rgba(0,0,0,.34)!important; } #addUserScreen .add-user-private-note{ display:grid!important; grid-template-columns:42px minmax(0,1fr)!important; align-items:center!important; gap:10px!important; padding:11px 12px!important; margin:0 0 9px!important; border-color:rgba(165,76,255,.48)!important; } #addUserScreen .add-user-private-icon{ width:38px!important; height:38px!important; display:grid!important; place-items:center!important; border:1px solid rgba(165,76,255,.62)!important; border-radius:11px!important; color:#b45cff!important; font-size:19px!important; background:rgba(37,10,54,.45)!important; } #addUserScreen .add-user-private-note div{min-width:0!important} #addUserScreen .add-user-private-note strong{ display:block!important; color:#f1f1f1!important; font-size:clamp(11.5px,2.9vw,14px)!important; line-height:1.3!important; } #addUserScreen .add-user-private-note small{ display:block!important; margin-top:3px!important; color:#b85cff!important; font-size:clamp(10.5px,2.55vw,12px)!important; line-height:1.3!important; } #addUserScreen .add-user-panel{ padding:5px 12px 12px!important; margin:0!important; } #addUserScreen .add-user-field{ width:100%!important; min-height:78px!important; display:grid!important; grid-template-columns:42px minmax(0,.85fr) minmax(138px,1.15fr)!important; grid-template-rows:auto!important; align-items:center!important; gap:9px!important; padding:10px 0!important; border-bottom:1px solid rgba(255,255,255,.075)!important; color:#eee!important; } #addUserScreen .add-user-field-icon{ width:38px!important; height:38px!important; display:grid!important; place-items:center!important; border:1px solid rgba(165,76,255,.55)!important; border-radius:50%!important; color:#b35cff!important; font-size:18px!important; background:#0b0610!important; } #addUserScreen .add-user-field-copy{min-width:0!important} #addUserScreen .add-user-field-copy strong{ display:block!important; color:#e8e8e8!important; font-size:clamp(12px,3vw,14px)!important; line-height:1.18!important; font-weight:700!important; } #addUserScreen .add-user-field-copy strong b, #addUserScreen .add-user-role-fieldset legend strong b{color:#b75cff!important} #addUserScreen .add-user-field-copy strong em{ color:#b75cff!important; font-style:normal!important; font-weight:500!important; } #addUserScreen .add-user-field-copy small{ display:block!important; margin-top:4px!important; color:#999!important; font-size:clamp(9.5px,2.35vw,11px)!important; line-height:1.25!important; } #addUserScreen .add-user-field>input, #addUserScreen .add-user-password-input-wrap{ width:100%!important; min-width:0!important; height:46px!important; border:1px solid rgba(255,255,255,.15)!important; border-radius:8px!important; background:#080808!important; color:#f4f4f4!important; box-shadow:none!important; } #addUserScreen .add-user-field>input{ padding:0 12px!important; outline:none!important; font:500 clamp(12px,2.9vw,14px)/1 Arial,sans-serif!important; } #addUserScreen .add-user-field input::placeholder{color:#777!important;opacity:1!important} #addUserScreen .add-user-field input:focus, #addUserScreen .add-user-password-input-wrap:focus-within{ border-color:rgba(169,76,255,.82)!important; box-shadow:0 0 0 2px rgba(155,55,255,.10)!important; } #addUserScreen .add-user-password-field{ grid-template-rows:auto auto auto!important; } #addUserScreen .add-user-password-input-wrap{ position:relative!important; display:flex!important; align-items:center!important; } #addUserScreen .add-user-password-input-wrap input{ width:100%!important; height:100%!important; border:0!important; outline:0!important; background:transparent!important; color:#f4f4f4!important; padding:0 42px 0 12px!important; font:500 clamp(12px,2.9vw,14px)/1 Arial,sans-serif!important; } #addUserScreen .add-user-eye{ position:absolute!important; right:4px!important; top:4px!important; width:36px!important; height:36px!important; border:0!important; border-radius:50%!important; background:transparent!important; color:#b65cff!important; font-size:17px!important; cursor:pointer!important; } #addUserScreen .add-user-strength{ grid-column:3!important; display:grid!important; grid-template-columns:repeat(4,1fr)!important; gap:5px!important; margin-top:-3px!important; } #addUserScreen .add-user-strength i{ height:3px!important; border-radius:3px!important; background:#292929!important; } #addUserScreen .add-user-strength.score-1 i:nth-child(-n+1), #addUserScreen .add-user-strength.score-2 i:nth-child(-n+2), #addUserScreen .add-user-strength.score-3 i:nth-child(-n+3), #addUserScreen .add-user-strength.score-4 i:nth-child(-n+4){background:#a83cff!important} #addUserScreen .add-user-strength-text{ grid-column:3!important; color:#a4a4a4!important; font-size:clamp(9px,2.2vw,10.5px)!important; line-height:1.2!important; } #addUserScreen .add-user-role-fieldset{ margin:0!important; padding:12px 0 11px!important; border:0!important; border-bottom:1px solid rgba(255,255,255,.075)!important; min-width:0!important; } #addUserScreen .add-user-role-fieldset legend{ width:100%!important; display:grid!important; grid-template-columns:42px auto 1fr!important; align-items:center!important; gap:9px!important; padding:0!important; color:#eee!important; } #addUserScreen .add-user-role-fieldset legend>span{ width:38px!important; height:38px!important; display:grid!important; place-items:center!important; border:1px solid rgba(165,76,255,.55)!important; border-radius:50%!important; color:#b35cff!important; font-size:18px!important; } #addUserScreen .add-user-role-fieldset legend strong{font-size:clamp(12px,3vw,14px)!important} #addUserScreen .add-user-role-fieldset legend small{color:#999!important;font-size:clamp(9.5px,2.3vw,11px)!important} #addUserScreen .add-user-role-options{ width:calc(100% - 51px)!important; margin:9px 0 0 51px!important; display:grid!important; grid-template-columns:1fr 1fr!important; gap:9px!important; } #addUserScreen .add-user-role-card{ min-height:82px!important; position:relative!important; display:grid!important; grid-template-columns:24px minmax(0,1fr)!important; grid-template-rows:auto auto!important; align-content:center!important; gap:3px 7px!important; padding:10px!important; border:1px solid rgba(255,255,255,.15)!important; border-radius:9px!important; background:#090909!important; color:#ddd!important; text-align:left!important; cursor:pointer!important; } #addUserScreen .add-user-role-card.selected{ border-color:#9e43ff!important; background:linear-gradient(180deg,rgba(59,19,88,.42),rgba(9,9,9,.96))!important; box-shadow:0 0 0 1px rgba(165,76,255,.12) inset!important; } #addUserScreen .add-user-role-radio{ position:absolute!important; right:8px!important; top:7px!important; color:#a74cff!important; font-size:15px!important; } #addUserScreen .add-user-role-symbol{ grid-row:1/3!important; align-self:center!important; color:#b55cff!important; font-size:24px!important; } #addUserScreen .add-user-role-card strong{font-size:clamp(11px,2.8vw,13px)!important;color:#fff!important} #addUserScreen .add-user-role-card small{font-size:clamp(9px,2.25vw,10.5px)!important;color:#999!important} #addUserScreen .add-user-info-note{ display:grid!important; grid-template-columns:34px minmax(0,1fr)!important; gap:9px!important; align-items:start!important; padding:11px 8px!important; color:#bbb!important; } #addUserScreen .add-user-info-note>span{color:#b35cff!important;font-size:25px!important;line-height:1!important} #addUserScreen .add-user-info-note p{margin:0!important;font-size:clamp(9.5px,2.35vw,11.5px)!important;line-height:1.38!important} #addUserScreen .add-user-info-note strong{color:#b65cff!important} #addUserScreen .add-user-error{ min-height:18px!important; margin:0 4px 7px!important; color:#ff5b5b!important; font-size:clamp(10px,2.4vw,12px)!important; line-height:1.3!important; text-align:center!important; } #addUserScreen .add-user-submit, #addUserScreen .add-user-cancel-button{ width:100%!important; min-height:48px!important; border-radius:9px!important; font-size:clamp(12px,3vw,14px)!important; font-weight:800!important; cursor:pointer!important; } #addUserScreen .add-user-submit{ border:1px solid #aa50ff!important; background:linear-gradient(90deg,#7924bd,#9c32e4)!important; color:#fff!important; box-shadow:0 0 18px rgba(150,42,226,.20)!important; } #addUserScreen .add-user-submit:disabled{opacity:.55!important;cursor:default!important} #addUserScreen .add-user-cancel-button{ margin-top:8px!important; border:1px solid rgba(255,255,255,.10)!important; background:#0a0a0a!important; color:#bbb!important; } #addUserScreen .add-user-bottom-decor-wrap{ position:absolute!important; z-index:27!important; left:0!important; right:0!important; bottom:calc(var(--ttf-nav-height,84px) - clamp(22px,5.4vw,30px))!important; height:clamp(176px,43vw,235px)!important; overflow:hidden!important; pointer-events:none!important; user-select:none!important; -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.14) 9%,rgba(0,0,0,.55) 20%,#000 34%,#000 100%)!important; mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.14) 9%,rgba(0,0,0,.55) 20%,#000 34%,#000 100%)!important; } #addUserScreen .add-user-bottom-decor{ position:absolute!important; left:50%!important; bottom:0!important; width:min(143%,1230px)!important; max-width:none!important; height:auto!important; display:block!important; transform:translateX(-50%)!important; } #addUserScreen .canonical-bottom-nav{z-index:1000!important} #addUserScreen .cbn-profile{color:#ff6500!important} @media(max-width:430px){ #addUserScreen .add-user-top-banner{height:clamp(190px,47vw,215px)!important} #addUserScreen .add-user-dynamic{top:clamp(196px,48vw,220px)!important;padding-bottom:clamp(250px,61vw,305px)!important} #addUserScreen .add-user-panel{padding-left:10px!important;padding-right:10px!important} #addUserScreen .add-user-field{ grid-template-columns:38px minmax(0,.82fr) minmax(130px,1.18fr)!important; gap:7px!important; min-height:74px!important; } #addUserScreen .add-user-field-icon{width:34px!important;height:34px!important;font-size:16px!important} #addUserScreen .add-user-field>input,#addUserScreen .add-user-password-input-wrap{height:44px!important} #addUserScreen .add-user-role-fieldset legend{grid-template-columns:38px auto 1fr!important;gap:7px!important} #addUserScreen .add-user-role-fieldset legend>span{width:34px!important;height:34px!important;font-size:16px!important} #addUserScreen .add-user-role-options{width:calc(100% - 45px)!important;margin-left:45px!important;gap:7px!important} #addUserScreen .add-user-role-card{min-height:78px!important;padding:8px!important} #addUserScreen .add-user-bottom-decor-wrap{height:clamp(168px,42vw,205px)!important} } /* 16/08/2026 — V54 : retour Ajouter un utilisateur La flèche est dans le PNG validé ; cette zone invisible couvre largement la flèche pour garantir le clic/tap sur mobile sans modifier le visuel. */ #addUserScreen .add-user-back{ left:0!important; top:0!important; width:20%!important; height:clamp(76px,19vw,112px)!important; z-index:500!important; display:block!important; pointer-events:auto!important; touch-action:manipulation!important; -webkit-tap-highlight-color:transparent!important; background:rgba(255,255,255,.001)!important; } #addUserScreen .add-user-back:focus-visible{ outline:2px solid rgba(255,101,0,.75)!important; outline-offset:-6px!important; border-radius:12px!important; } /* ====================================================================== 16/08/2026 — V58 COMPTES UTILISATEURS RÉELS Écrans 17/18 uniquement + boîte changement obligatoire du mot de passe. Le haut et le décor bas des plaquettes existantes sont conservés ; la zone centrale factice est masquée et remplacée par du vrai HTML/CSS dynamique. ====================================================================== */ #rolesScreen .roles-user-role.is-disabled{border-color:rgba(255,65,72,.45)!important;background:rgba(65,10,14,.72)!important;color:#ff6b72!important} #rolesScreen #rolesEditSelected:disabled{opacity:.45!important;cursor:default!important} #editUserScreen.edit-user-reference, #resetPasswordScreen.reset-password-reference{ width:100%!important;height:100dvh!important;min-height:100dvh!important;max-height:100dvh!important; aspect-ratio:auto!important;position:relative!important;overflow:hidden!important;isolation:isolate!important; background-color:#000!important;background-size:100% 100%!important;background-position:center center!important; } #editUserScreen .edit-user-back, #resetPasswordScreen .reset-password-back{ position:absolute!important;z-index:90!important;left:0!important;top:0!important;width:14%!important;height:clamp(56px,13vw,88px)!important;background:transparent!important;border:0!important; } #editUserScreen .edit-user-dynamic, #resetPasswordScreen .reset-password-dynamic{ position:absolute!important;z-index:20!important;left:3.2%!important;right:3.2%!important; top:clamp(240px,28.6vh,286px)!important;bottom:calc(var(--ttf-nav-height,84px) + .6dvh)!important; overflow-y:auto!important;overflow-x:hidden!important;scrollbar-width:none!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior:contain!important; padding:7px 0 clamp(215px,53vw,300px)!important;background:#000!important; } #editUserScreen .edit-user-dynamic::-webkit-scrollbar, #resetPasswordScreen .reset-password-dynamic::-webkit-scrollbar{display:none!important} #editUserScreen .edit-user-panel, #resetPasswordScreen .reset-password-panel{ width:100%!important;margin:0 0 10px!important;border:1px solid rgba(255,101,0,.25)!important;border-radius:13px!important; background:linear-gradient(180deg,rgba(17,17,17,.99),rgba(6,6,6,.99))!important;box-shadow:0 8px 22px rgba(0,0,0,.35)!important; } #editUserScreen .edit-user-summary{display:grid!important;grid-template-columns:62px minmax(0,1fr)!important;gap:12px!important;align-items:center!important;padding:13px!important} #editUserScreen .edit-user-avatar, #resetPasswordScreen .reset-password-avatar{width:58px!important;height:58px!important;border-radius:50%!important;display:grid!important;place-items:center!important;color:#fff!important;font-size:18px!important;font-weight:900!important;border:1px solid rgba(255,101,0,.55)!important} #editUserScreen .edit-user-summary-copy h2, #resetPasswordScreen .reset-password-user-card h2{margin:0!important;color:#fff!important;font-size:clamp(20px,5vw,25px)!important;line-height:1.05!important} #editUserScreen .edit-user-summary-copy small, #resetPasswordScreen .reset-password-user-card small{display:block!important;margin-top:6px!important;color:#a8a8a8!important;font-size:clamp(10px,2.45vw,12px)!important;line-height:1.35!important} #editUserScreen .edit-user-role-pill, #resetPasswordScreen #resetPasswordUserRole{display:inline-block!important;margin-top:7px!important;border:1px solid rgba(170,76,255,.55)!important;border-radius:7px!important;padding:5px 8px!important;color:#b75cff!important;font-size:clamp(10px,2.5vw,12px)!important} #editUserScreen .edit-user-role-pill.disabled{border-color:rgba(255,65,72,.55)!important;color:#ff686f!important} #editUserScreen #editUserRealForm{padding:4px 12px 12px!important} #editUserScreen .edit-user-field{display:grid!important;grid-template-columns:minmax(0,.9fr) minmax(150px,1.1fr)!important;gap:10px!important;align-items:center!important;min-height:73px!important;border-bottom:1px solid rgba(255,255,255,.075)!important} #editUserScreen .edit-user-field span strong{display:block!important;color:#eee!important;font-size:clamp(12px,3vw,14px)!important} #editUserScreen .edit-user-field span small{display:block!important;margin-top:4px!important;color:#929292!important;font-size:clamp(9.5px,2.35vw,11px)!important;line-height:1.25!important} #editUserScreen .edit-user-field input{ width:100%!important;height:45px!important;border:1px solid rgba(255,255,255,.15)!important;border-radius:8px!important;background:#080808!important;color:#fff!important;outline:0!important;padding:0 11px!important;font-size:clamp(12px,2.9vw,14px)!important } #editUserScreen .edit-user-field input:focus{border-color:rgba(169,76,255,.82)!important;box-shadow:0 0 0 2px rgba(155,55,255,.10)!important} #editUserScreen .edit-user-role-fieldset{border:0!important;margin:12px 0 8px!important;padding:0!important} #editUserScreen .edit-user-role-fieldset legend{color:#a94cff!important;font-weight:900!important;font-size:clamp(12px,3vw,14px)!important;margin-bottom:8px!important} #editUserScreen .edit-user-role-options{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important} #editUserScreen .edit-user-role-card{min-height:82px!important;border:1px solid rgba(255,255,255,.13)!important;border-radius:10px!important;background:#090909!important;color:#ddd!important;display:grid!important;grid-template-columns:28px 1fr!important;grid-template-rows:auto auto!important;align-items:center!important;text-align:left!important;padding:10px!important;cursor:pointer!important} #editUserScreen .edit-user-role-card>span{grid-row:1/3!important;color:#a94cff!important;font-size:21px!important} #editUserScreen .edit-user-role-card strong{font-size:clamp(11px,2.8vw,13px)!important;color:#fff!important} #editUserScreen .edit-user-role-card small{font-size:clamp(9px,2.2vw,10.5px)!important;color:#8e8e8e!important} #editUserScreen .edit-user-role-card.selected{border-color:#a94cff!important;background:linear-gradient(180deg,rgba(61,18,91,.55),rgba(12,7,16,.95))!important} #editUserScreen .edit-user-error, #resetPasswordScreen .reset-password-error{min-height:18px!important;margin:6px 0!important;color:#ff686f!important;font-size:clamp(10px,2.4vw,12px)!important} #editUserScreen .edit-user-save-button, #resetPasswordScreen .reset-password-submit-button{width:100%!important;min-height:49px!important;border:0!important;border-radius:9px!important;background:linear-gradient(90deg,#7c24d6,#a63cff)!important;color:#fff!important;font-weight:900!important;font-size:clamp(12px,3vw,14px)!important;cursor:pointer!important} #editUserScreen .edit-user-sensitive{padding:12px!important} #editUserScreen .edit-user-sensitive h3{margin:0 0 8px!important;color:#ff6500!important;font-size:clamp(13px,3.2vw,16px)!important} #editUserScreen .edit-user-sensitive button{width:100%!important;min-height:62px!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.08)!important;background:transparent!important;color:#eee!important;display:grid!important;grid-template-columns:34px minmax(0,1fr) 14px!important;gap:9px!important;align-items:center!important;text-align:left!important;padding:8px 2px!important;cursor:pointer!important} #editUserScreen .edit-user-sensitive button:last-child{border-bottom:0!important} #editUserScreen .edit-user-sensitive button>span{font-size:22px!important;color:#ff7a1a!important} #editUserScreen .edit-user-sensitive button strong{display:block!important;font-size:clamp(11px,2.8vw,13px)!important} #editUserScreen .edit-user-sensitive button small{display:block!important;margin-top:3px!important;color:#999!important;font-size:clamp(9px,2.2vw,10.5px)!important} #editUserScreen .edit-user-sensitive button.danger>span, #editUserScreen .edit-user-sensitive button.danger strong{color:#ff4148!important} #editUserScreen .edit-user-security-note{margin:0 0 10px!important;padding:11px 12px!important;border:1px solid rgba(255,101,0,.30)!important;border-radius:10px!important;background:#100b07!important;color:#d5bda9!important;font-size:clamp(9.5px,2.35vw,11px)!important;line-height:1.35!important} #resetPasswordScreen .reset-password-user-card{display:grid!important;grid-template-columns:62px minmax(0,1fr)!important;gap:12px!important;align-items:center!important;padding:13px!important} #resetPasswordScreen #resetPasswordRealForm{padding:14px!important} #resetPasswordScreen #resetPasswordRealForm>p:first-child{margin:0 0 16px!important;color:#c9c9c9!important;font-size:clamp(11px,2.75vw,13px)!important;line-height:1.4!important} #resetPasswordScreen #resetPasswordRealForm label{display:block!important;margin-bottom:16px!important} #resetPasswordScreen #resetPasswordRealForm label>strong{display:block!important;margin-bottom:7px!important;color:#a94cff!important;font-size:clamp(11px,2.8vw,13px)!important} #resetPasswordScreen .reset-password-input-wrap{display:flex!important;align-items:center!important;width:100%!important;height:48px!important;border:1px solid rgba(255,255,255,.16)!important;border-radius:9px!important;background:#080808!important;overflow:hidden!important} #resetPasswordScreen .reset-password-input-wrap input{flex:1!important;min-width:0!important;height:100%!important;border:0!important;outline:0!important;background:transparent!important;color:#fff!important;padding:0 12px!important;font-size:14px!important} #resetPasswordScreen .reset-password-eye{width:44px!important;height:100%!important;border:0!important;background:transparent!important;color:#b25cff!important;font-size:18px!important} #resetPasswordScreen .reset-password-force-button{width:100%!important;min-height:82px!important;border:1px solid rgba(169,76,255,.35)!important;border-radius:11px!important;background:#0b0b0b!important;color:#ddd!important;display:grid!important;grid-template-columns:34px minmax(0,1fr) 44px!important;gap:9px!important;align-items:center!important;text-align:left!important;padding:10px!important;cursor:pointer!important} #resetPasswordScreen .reset-password-force-button>span{color:#b25cff!important;font-size:23px!important} #resetPasswordScreen .reset-password-force-button strong{display:block!important;font-size:clamp(11px,2.7vw,13px)!important} #resetPasswordScreen .reset-password-force-button small{display:block!important;margin-top:4px!important;color:#929292!important;font-size:clamp(9px,2.2vw,10.5px)!important} #resetPasswordScreen .reset-password-force-button i{width:42px!important;height:24px!important;border-radius:999px!important;background:#383838!important;position:relative!important} #resetPasswordScreen .reset-password-force-button i::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#aaa;transition:.18s!important} #resetPasswordScreen .reset-password-force-button.active i{background:#8d2ad9!important} #resetPasswordScreen .reset-password-force-button.active i::after{left:21px;background:#fff} #resetPasswordScreen .reset-password-cancel-button{width:100%!important;min-height:45px!important;margin-top:9px!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:9px!important;background:#0b0b0b!important;color:#c5c5c5!important;font-weight:800!important} #editUserScreen .canonical-bottom-nav, #resetPasswordScreen .canonical-bottom-nav{z-index:1000!important} .force-password-overlay{position:fixed;z-index:9999;inset:0;background:rgba(0,0,0,.94);display:grid;place-items:center;padding:18px} .force-password-card{width:min(100%,420px);border:1px solid rgba(255,101,0,.5);border-radius:16px;background:linear-gradient(180deg,#141414,#080808);padding:22px;color:#fff;box-shadow:0 24px 70px #000} .force-password-icon{font-size:34px;text-align:center}.force-password-card h2{margin:10px 0 8px;text-align:center;color:#ff6500;font-size:21px}.force-password-card p{margin:0 0 18px;color:#c8c8c8;font-size:13px;line-height:1.45;text-align:center}.force-password-card label{display:block;margin:12px 0;color:#b75cff;font-weight:800;font-size:12px}.force-password-card input{display:block;width:100%;height:48px;margin-top:7px;padding:0 12px;border:1px solid #383838;border-radius:9px;background:#080808;color:#fff;outline:0;font-size:15px}.force-password-card input:focus{border-color:#a94cff}.force-password-error{min-height:20px;margin:6px 0;color:#ff6268;font-size:12px}.force-password-card button{width:100%;min-height:49px;border:0;border-radius:9px;background:linear-gradient(90deg,#ff6500,#9d32ff);color:#fff;font-weight:900;font-size:13px} @media(max-width:430px){ #editUserScreen .edit-user-dynamic,#resetPasswordScreen .reset-password-dynamic{top:clamp(222px,27.5vh,258px)!important;padding-bottom:clamp(210px,52vw,275px)!important} #editUserScreen .edit-user-field{grid-template-columns:42% 58%!important;gap:7px!important} #editUserScreen .edit-user-summary,#resetPasswordScreen .reset-password-user-card{grid-template-columns:54px minmax(0,1fr)!important} #editUserScreen .edit-user-avatar,#resetPasswordScreen .reset-password-avatar{width:50px!important;height:50px!important;font-size:15px!important} } /* ====================================================================== 16/08/2026 — V59 : corrections comptes / connexion ====================================================================== */ /* Les champs réels masquent maintenant les textes "Identifiant" et "Mot de passe" qui sont imprimés dans le PNG de connexion. */ #authScreen .login-hotspots input{ background:#111214!important; border-radius:10px!important; color:#fff!important; caret-color:#ff6500!important; padding:0 12px!important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.055)!important; } #authScreen .login-hotspots input:focus{ box-shadow:inset 0 0 0 1px rgba(255,101,0,.42),0 0 0 2px rgba(255,101,0,.06)!important; } #authScreen .login-hotspots input:-webkit-autofill, #authScreen .login-hotspots input:-webkit-autofill:hover, #authScreen .login-hotspots input:-webkit-autofill:focus{ -webkit-text-fill-color:#fff!important; -webkit-box-shadow:0 0 0 1000px #111214 inset!important; caret-color:#ff6500!important; transition:background-color 9999s ease-out 0s!important; } .forgot-password-overlay{ position:fixed;inset:0;z-index:5000;display:flex;align-items:center;justify-content:center; padding:18px;background:rgba(0,0,0,.86);backdrop-filter:blur(3px); } .forgot-password-card{ position:relative;width:min(100%,420px);border:1px solid rgba(255,101,0,.55);border-radius:18px; background:linear-gradient(180deg,#151515,#070707);box-shadow:0 20px 65px rgba(0,0,0,.72);padding:24px 18px 18px;color:#fff; } .forgot-password-close{position:absolute;right:12px;top:9px;border:0;background:transparent;color:#aaa;font-size:30px;line-height:1;cursor:pointer} .forgot-password-icon{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;margin:0 auto 12px;border:1px solid rgba(255,101,0,.45);background:#1a0e06;font-size:24px} .forgot-password-card h2{margin:0;text-align:center;color:#ff6500;font-size:21px;line-height:1.1} .forgot-password-card>p{margin:11px auto 18px;max-width:350px;color:#c7c7c7;text-align:center;font-size:13px;line-height:1.45} .forgot-password-card label{display:block;margin:0 0 6px;color:#ddd;font-size:12px;font-weight:700} .forgot-password-card input{width:100%;height:48px;border:1px solid #383838;border-radius:10px;outline:0;background:#0d0d0d;color:#fff;padding:0 13px;font-size:16px} .forgot-password-card input:focus{border-color:#ff6500;box-shadow:0 0 0 2px rgba(255,101,0,.09)} .forgot-password-message{min-height:19px;margin:8px 2px 10px;color:#bdbdbd;font-size:11px;line-height:1.35} .forgot-password-message.success{color:#7cda3d} .forgot-password-message.error{color:#ff686f} .forgot-password-card form>button{width:100%;height:46px;border-radius:10px;font-weight:900;cursor:pointer} #forgotPasswordSubmit{border:1px solid #ff6500;background:linear-gradient(180deg,#ff740f,#e55b00);color:#fff} #forgotPasswordCancel{margin-top:8px;border:1px solid #333;background:#111;color:#bbb} /* Le PNG 17 est une ancienne maquette complète. On conserve uniquement son bandeau supérieur et on masque tout l'ancien faux contenu avant d'afficher le vrai formulaire. */ #editUserScreen.edit-user-reference{isolation:isolate!important} #editUserScreen.edit-user-reference::before{ content:"";position:absolute;z-index:2;left:0;right:0;top:15.1%;bottom:0;background:#000;pointer-events:none; } #editUserScreen .edit-user-dynamic{ z-index:20!important; top:clamp(154px,16.4dvh,178px)!important; padding-bottom:clamp(205px,51vw,275px)!important; } #editUserScreen .edit-user-back{z-index:90!important} #editUserScreen .canonical-bottom-nav{z-index:1000!important} @media(max-width:430px){ #editUserScreen .edit-user-dynamic{top:clamp(150px,16.2dvh,170px)!important} } /* ====================================================================== 16/08/2026 — V60 : reset mot de passe directement depuis Gestion des rôles Strictement limité à #rolesScreen. ====================================================================== */ #rolesScreen .roles-reset-password-button{ min-height:54px!important; flex-direction:column!important; gap:5px!important; border-color:rgba(169,76,255,.42)!important; background:linear-gradient(180deg,rgba(55,21,82,.72),rgba(24,11,34,.92))!important; color:#f2e5ff!important; } #rolesScreen .roles-reset-password-button.has-pending-reset{ border-color:rgba(255,101,0,.74)!important; background:linear-gradient(180deg,rgba(88,34,6,.9),rgba(40,17,5,.96))!important; box-shadow:0 0 0 1px rgba(255,101,0,.16) inset,0 0 18px rgba(255,101,0,.13)!important; } #rolesScreen .roles-reset-password-badge{ display:inline-flex!important; align-items:center!important; justify-content:center!important; min-height:20px!important; padding:3px 8px!important; border-radius:999px!important; border:1px solid rgba(255,137,53,.55)!important; background:rgba(28,12,4,.86)!important; color:#ff9a4a!important; font-size:clamp(8px,2vw,9.5px)!important; line-height:1!important; letter-spacing:.04em!important; font-weight:900!important; } #rolesScreen .roles-reset-password-badge.hidden{display:none!important} #rolesScreen .roles-dynamic{ padding-bottom:clamp(330px,82vw,450px)!important; } @media(max-width:430px){ #rolesScreen .roles-dynamic{padding-bottom:clamp(340px,84vw,455px)!important} #rolesScreen .roles-reset-password-button{min-height:58px!important} } /* ====================================================================== 16/08/2026 — V61 : suppression de l'ancien faux utilisateur "Julie" sur l'écran Réinitialiser le mot de passe. On conserve uniquement la partie haute du visuel validé ; toute la zone utilisateur est désormais 100 % dynamique et issue du vrai compte choisi. ====================================================================== */ #resetPasswordScreen.reset-password-reference{ background:#000!important; } #resetPasswordScreen.reset-password-reference::before{ content:""; position:absolute; z-index:1; left:0;right:0;top:0; height:clamp(158px,36vw,205px); background-image:url('/assets/reference/18_reinitialiser_mot_de_passe.png'); background-repeat:no-repeat; background-position:top center; background-size:100% auto; pointer-events:none; } #resetPasswordScreen .reset-password-dynamic{ top:clamp(170px,38vw,218px)!important; } #resetPasswordScreen .reset-password-back{z-index:90!important} #resetPasswordScreen .canonical-bottom-nav{z-index:1000!important} @media(max-width:430px){ #resetPasswordScreen.reset-password-reference::before{ height:clamp(154px,36vw,178px); } #resetPasswordScreen .reset-password-dynamic{ top:clamp(165px,38vw,188px)!important; padding-bottom:clamp(210px,52vw,275px)!important; } } /* 16/08/2026 — V63 : alerte admin des demandes en attente sur l'accueil */ #appScreen .home-admin-pending{ width:100%;min-height:clamp(58px,13vw,86px); border:1px solid rgba(255,101,0,.58);border-radius:13px; background:linear-gradient(100deg,rgba(30,14,4,.97),rgba(8,8,8,.98)); color:#fff;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:10px; padding:clamp(9px,2vw,14px) clamp(11px,2.7vw,18px);text-align:left;cursor:pointer; box-shadow:inset 0 0 22px rgba(255,101,0,.04); } #appScreen .home-admin-pending.hidden{display:none!important} #appScreen .home-admin-pending-icon{ width:clamp(34px,8vw,52px);height:clamp(34px,8vw,52px);display:grid;place-items:center; border:1px solid rgba(255,101,0,.5);border-radius:10px;color:#ff6500;background:rgba(15,8,3,.9); font-size:clamp(19px,4.8vw,30px); } #appScreen .home-admin-pending-copy{min-width:0;display:flex;flex-direction:column;gap:3px} #appScreen .home-admin-pending-copy small{font-size:clamp(8px,2vw,11px);font-weight:800;letter-spacing:.09em;color:#ff7a1a} #appScreen .home-admin-pending-copy strong{font-size:clamp(13px,3.25vw,18px);line-height:1.12;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #appScreen .home-admin-pending-count{ min-width:clamp(28px,7vw,40px);height:clamp(28px,7vw,40px);padding:0 7px;display:grid;place-items:center; border-radius:999px;background:#ff6500;color:#fff;font-size:clamp(12px,3vw,16px);font-weight:900; } #appScreen .home-admin-pending>i{font-style:normal;color:#ff6500;font-size:clamp(24px,5vw,34px)} #appScreen .home-admin-pending.has-pending{ border-color:#ff6500;box-shadow:0 0 18px rgba(255,101,0,.13),inset 0 0 22px rgba(255,101,0,.05); } #appScreen .home-admin-pending.is-clear{border-color:rgba(255,101,0,.28);opacity:.88} #appScreen .home-admin-pending.is-clear .home-admin-pending-count{background:#252525;color:#aaa} #appScreen .home-admin-pending:active{transform:scale(.992)} /* V64 — Réglages Newsletter administrateur */ #newsletterSettingsScreen.newsletter-settings-screen{height:100dvh;min-height:100dvh;background:radial-gradient(circle at 82% 8%,rgba(255,101,0,.16),transparent 28%),linear-gradient(#050505,#000);overflow:hidden} #newsletterSettingsScreen .newsletter-settings-back{position:absolute;z-index:90;left:8px;top:8px;width:48px;height:48px;border:0;background:transparent;color:#fff;font-size:38px;line-height:1;cursor:pointer} #newsletterSettingsScreen .newsletter-settings-header{position:absolute;z-index:10;left:7%;right:6%;top:4.2%;padding-left:42px} #newsletterSettingsScreen .newsletter-settings-eyebrow{color:#ff6500;font-size:10px;font-weight:900;letter-spacing:.16em} #newsletterSettingsScreen .newsletter-settings-header h1{margin:4px 0 5px;color:#fff;font-size:clamp(27px,7vw,42px);line-height:.98}.newsletter-settings-header h1 strong{color:#ff6500} #newsletterSettingsScreen .newsletter-settings-header p{margin:0;color:#bdbdbd;font-size:clamp(11px,2.7vw,14px);line-height:1.35} #newsletterSettingsScreen .newsletter-settings-scroll{position:absolute;z-index:20;left:3%;right:3%;top:19%;bottom:calc(var(--ttf-nav-height,84px) + 1dvh);overflow-y:auto;padding-bottom:24px;scrollbar-width:none}#newsletterSettingsScreen .newsletter-settings-scroll::-webkit-scrollbar{display:none} #newsletterSettingsScreen .newsletter-settings-panel{margin-bottom:10px;padding:14px;border:1px solid rgba(255,101,0,.26);border-radius:14px;background:linear-gradient(180deg,rgba(18,18,18,.98),rgba(7,7,7,.98));box-shadow:0 9px 26px rgba(0,0,0,.28)} #newsletterSettingsScreen .newsletter-settings-panel h2{margin:0 0 12px;color:#ff7b22;font-size:14px;letter-spacing:.04em} #newsletterSettingsScreen .newsletter-settings-row{display:flex;align-items:center;justify-content:space-between;gap:14px}.newsletter-settings-row>div{display:flex;flex-direction:column;gap:4px}.newsletter-settings-row strong{font-size:14px}.newsletter-settings-row small{color:#aaa;font-size:11px;line-height:1.3} #newsletterSettingsScreen .newsletter-toggle{flex:0 0 48px;width:48px;height:28px;border:1px solid #4a4a4a;border-radius:999px;background:#222;padding:3px;cursor:pointer}.newsletter-toggle span{display:block;width:20px;height:20px;border-radius:50%;background:#888;transition:.18s}.newsletter-toggle[aria-pressed="true"]{border-color:#9d32ff;background:#5d168f}.newsletter-toggle[aria-pressed="true"] span{transform:translateX(20px);background:#fff} #newsletterSettingsScreen .newsletter-field{display:flex;flex-direction:column;gap:7px;margin:0 0 12px;color:#ddd;font-size:12px;font-weight:700}.newsletter-field input,.newsletter-field select{width:100%;height:46px;border:1px solid #333;border-radius:10px;background:#0a0a0a;color:#fff;padding:0 12px;font-size:14px;outline:none}.newsletter-field input:focus,.newsletter-field select:focus{border-color:#ff6500} #newsletterSettingsScreen .newsletter-time-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px} #newsletterSettingsScreen .newsletter-help{margin:0 0 12px;color:#bdbdbd;font-size:11px;line-height:1.45}.newsletter-schedule-summary{margin:4px 0 0;padding:10px 12px;border-radius:9px;background:#111;border:1px solid #292929;color:#d4d4d4;font-size:11px;line-height:1.4}.newsletter-schedule-summary strong{color:#ff7b22} #newsletterSettingsScreen .newsletter-action{width:100%;min-height:48px;border-radius:11px;font-weight:900;font-size:12px;letter-spacing:.02em;cursor:pointer}.newsletter-action.primary{border:1px solid #ff7b22;background:linear-gradient(180deg,#ff7a1a,#d85200);color:#fff}.newsletter-action.secondary{border:1px solid #8733cc;background:#160b20;color:#c477ff}.newsletter-action:disabled{opacity:.48;cursor:default} #newsletterSettingsScreen .newsletter-settings-state{min-height:20px;margin:9px 4px 0;text-align:center;color:#aaa;font-size:11px}.newsletter-settings-state.ok{color:#70c83a}.newsletter-settings-state.error{color:#ff5c57} #newsletterSettingsScreen .canonical-bottom-nav{z-index:1000!important} /* ====================================================================== 16/08/2026 — V65 : Newsletter TonTonFlix — bandeau haut validé Seul l'écran Newsletter est concerné. La partie centrale reste 100% codée. ====================================================================== */ #newsletterSettingsScreen.newsletter-settings-screen{ background:#000!important; isolation:isolate!important; } #newsletterSettingsScreen .newsletter-settings-banner{ position:absolute!important; z-index:12!important; left:0!important; top:0!important; width:100%!important; height:clamp(170px,39vw,260px)!important; display:block!important; object-fit:cover!important; object-position:center top!important; pointer-events:none!important; user-select:none!important; } #newsletterSettingsScreen .newsletter-settings-header{ display:none!important; } #newsletterSettingsScreen .newsletter-settings-back{ position:absolute!important; z-index:90!important; left:0!important; top:0!important; width:14%!important; height:clamp(54px,13vw,88px)!important; border:0!important; background:transparent!important; color:transparent!important; font-size:0!important; cursor:pointer!important; } #newsletterSettingsScreen .newsletter-settings-scroll{ top:clamp(184px,42vw,278px)!important; z-index:20!important; } #newsletterSettingsScreen .canonical-bottom-nav{ z-index:1000!important; } @media(max-width:430px){ #newsletterSettingsScreen .newsletter-settings-banner{ height:clamp(168px,39vw,190px)!important; } #newsletterSettingsScreen .newsletter-settings-scroll{ top:clamp(180px,42vw,202px)!important; } } /* ====================================================================== 18/08/2026 — V68 : flèche retour harmonisée sur Recherche, Bibliothèque, Profil et Demandes à traiter, en reprenant le style de « Mes demandes ». ====================================================================== */ .panel-back-chevron{ position:absolute!important; z-index:92!important; left:1.2%!important; top:2.7%!important; width:clamp(34px,9vw,50px)!important; height:clamp(38px,5.4dvh,52px)!important; min-width:0!important; display:block!important; padding:0!important; margin:0!important; border:0!important; background:transparent!important; color:transparent!important; cursor:pointer!important; font-size:0!important; line-height:1!important; } .panel-back-chevron::before{ content:""!important; position:absolute!important; left:10px!important; top:50%!important; width:14px!important; height:14px!important; border-left:3px solid #fff!important; border-bottom:3px solid #fff!important; transform:translateY(-50%) rotate(45deg)!important; transform-origin:center!important; filter:drop-shadow(0 2px 3px rgba(0,0,0,.9))!important; pointer-events:none!important; } #searchScreen .search-screen-back{z-index:80!important} #catalogScreen .catalog-back{z-index:80!important;left:1.2%!important;top:2.7%!important} #profileScreen .profile-screen-back{z-index:80!important} /* Demandes à traiter : masque l'ancien double retour et recrée la même flèche. */ #adminRequestDetailScreen::before{ content:""; position:absolute; z-index:89; left:0; top:0; width:14%; height:9%; background:#000; pointer-events:none; } #adminRequestDetailScreen .admin-request-detail-back-btn{ position:absolute!important; z-index:92!important; left:1.2%!important; top:2.7%!important; width:clamp(34px,9vw,50px)!important; height:clamp(38px,5.4dvh,52px)!important; min-width:0!important; display:block!important; padding:0!important; margin:0!important; border:0!important; background:transparent!important; color:transparent!important; cursor:pointer!important; font-size:0!important; line-height:1!important; } #adminRequestDetailScreen .admin-request-detail-back-btn span{display:none!important} #adminRequestDetailScreen .admin-request-detail-back-btn::before{ content:""!important; position:absolute!important; left:10px!important; top:50%!important; width:14px!important; height:14px!important; border-left:3px solid #fff!important; border-bottom:3px solid #fff!important; transform:translateY(-50%) rotate(45deg)!important; transform-origin:center!important; filter:drop-shadow(0 2px 3px rgba(0,0,0,.9))!important; pointer-events:none!important; } /* ====================================================================== 18/08/2026 — V69 : harmonisation fine du positionnement des flèches retour sur tous les panneaux secondaires, en gardant la référence validée de Recherche / Bibliothèque. ====================================================================== */ #myRequestsScreen .myrequests-back, #accountScreen .account-back, #notificationsScreen .notifications-back, #activityScreen .activity-back, #adminScreen .admin-back, #rolesScreen .roles-back, #newsletterSettingsScreen .newsletter-settings-back, #embyConfigScreen .emby-config-back{ position:absolute!important; z-index:90!important; left:1.2%!important; top:2.7%!important; width:clamp(34px,9vw,50px)!important; height:clamp(38px,5.4dvh,52px)!important; min-width:0!important; display:block!important; padding:0!important; margin:0!important; border:0!important; background:transparent!important; color:transparent!important; font-size:0!important; line-height:1!important; cursor:pointer!important; } #myRequestsScreen .myrequests-back::before, #accountScreen .account-back::before, #notificationsScreen .notifications-back::before, #activityScreen .activity-back::before, #adminScreen .admin-back::before, #rolesScreen .roles-back::before, #newsletterSettingsScreen .newsletter-settings-back::before, #embyConfigScreen .emby-config-back::before{ content:""!important; position:absolute!important; left:10px!important; top:50%!important; width:14px!important; height:14px!important; border-left:3px solid #fff!important; border-bottom:3px solid #fff!important; transform:translateY(-50%) rotate(45deg)!important; transform-origin:center!important; filter:drop-shadow(0 2px 3px rgba(0,0,0,.9))!important; pointer-events:none!important; } /* Le panneau Demandes à traiter reste très légèrement plus haut pour coller au bandeau. */ #adminRequestDetailScreen .admin-request-detail-back-btn{ left:1.2%!important; top:2.45%!important; } /* ====================================================================== 18/08/2026 — V70 : correction du dédoublement des flèches retour Sur plusieurs panneaux secondaires, le chevron apparaissait deux fois. On remplace le pseudo-élément par un SVG de fond unique. ====================================================================== */ #myRequestsScreen .myrequests-back, #accountScreen .account-back, #notificationsScreen .notifications-back, #activityScreen .activity-back, #adminScreen .admin-back, #rolesScreen .roles-back, #newsletterSettingsScreen .newsletter-settings-back, #embyConfigScreen .emby-config-back{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='15 4 7 12 15 20' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important; background-repeat:no-repeat!important; background-position:8px 50%!important; background-size:18px 18px!important; } #myRequestsScreen .myrequests-back::before, #accountScreen .account-back::before, #notificationsScreen .notifications-back::before, #activityScreen .activity-back::before, #adminScreen .admin-back::before, #rolesScreen .roles-back::before, #newsletterSettingsScreen .newsletter-settings-back::before, #embyConfigScreen .emby-config-back::before{ content:none!important; display:none!important; } /* ====================================================================== 16/08/2026 — V71 : suppression des flèches CSS en double. Ces bandeaux PNG contiennent déjà leur flèche blanche validée. Le bouton reste présent uniquement comme zone tactile transparente. ====================================================================== */ #myRequestsScreen .myrequests-back, #accountScreen .account-back, #notificationsScreen .notifications-back, #activityScreen .activity-back, #adminScreen .admin-back, #newsletterSettingsScreen .newsletter-settings-back, #embyConfigScreen .emby-config-back{ background:none!important; background-image:none!important; color:transparent!important; font-size:0!important; border:0!important; box-shadow:none!important; } #myRequestsScreen .myrequests-back::before, #myRequestsScreen .myrequests-back::after, #accountScreen .account-back::before, #accountScreen .account-back::after, #notificationsScreen .notifications-back::before, #notificationsScreen .notifications-back::after, #activityScreen .activity-back::before, #activityScreen .activity-back::after, #adminScreen .admin-back::before, #adminScreen .admin-back::after, #newsletterSettingsScreen .newsletter-settings-back::before, #newsletterSettingsScreen .newsletter-settings-back::after, #embyConfigScreen .emby-config-back::before, #embyConfigScreen .emby-config-back::after{ content:none!important; display:none!important; } /* ====================================================================== 16/08/2026 — V72 : flèche unique harmonisée. Principe correct : on masque la flèche imprimée dans le PNG et on garde UNE seule flèche CSS/SVG commune, exactement au même emplacement que Recherche / Bibliothèque. ====================================================================== */ #myRequestsScreen::after, #accountScreen::after, #notificationsScreen::after, #activityScreen::after, #adminScreen::after, #newsletterSettingsScreen::after, #embyConfigScreen::after{ content:""!important; position:absolute!important; z-index:89!important; left:0!important; top:0!important; width:clamp(38px,9.5vw,66px)!important; height:clamp(66px,7.2dvh,78px)!important; pointer-events:none!important; background: linear-gradient(to right,#000 0%,#000 78%,rgba(0,0,0,.88) 88%,transparent 100%), linear-gradient(to bottom,#000 0%,#000 82%,rgba(0,0,0,.9) 91%,transparent 100%)!important; } #myRequestsScreen .myrequests-back, #accountScreen .account-back, #notificationsScreen .notifications-back, #activityScreen .activity-back, #adminScreen .admin-back, #newsletterSettingsScreen .newsletter-settings-back, #embyConfigScreen .emby-config-back{ position:absolute!important; z-index:92!important; left:1.2%!important; top:2.7%!important; width:clamp(34px,9vw,50px)!important; height:clamp(38px,5.4dvh,52px)!important; padding:0!important; margin:0!important; border:0!important; background-color:transparent!important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='15 4 7 12 15 20' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important; background-repeat:no-repeat!important; background-position:8px 50%!important; background-size:18px 18px!important; color:transparent!important; font-size:0!important; line-height:1!important; box-shadow:none!important; cursor:pointer!important; } #myRequestsScreen .myrequests-back::before, #myRequestsScreen .myrequests-back::after, #accountScreen .account-back::before, #accountScreen .account-back::after, #notificationsScreen .notifications-back::before, #notificationsScreen .notifications-back::after, #activityScreen .activity-back::before, #activityScreen .activity-back::after, #adminScreen .admin-back::before, #adminScreen .admin-back::after, #newsletterSettingsScreen .newsletter-settings-back::before, #newsletterSettingsScreen .newsletter-settings-back::after, #embyConfigScreen .emby-config-back::before, #embyConfigScreen .emby-config-back::after{ content:none!important; display:none!important; } /* ====================================================================== 16/08/2026 — V73 : correction ciblée Mes demandes + Configuration Emby. La flèche d'origine est retirée directement du PNG ; on conserve une seule flèche CSS commune. Le masque V72 est désactivé pour ne plus rogner CONFIGURATION EMBY. ====================================================================== */ #myRequestsScreen::after, #embyConfigScreen::after{ content:none!important; display:none!important; } /* 16/08/2026 — V74 : Mes demandes — le PNG réellement utilisé (04_mes_demandes_fond.png) a été nettoyé de sa flèche imprimée. La flèche CSS unique de V72 reste la seule flèche affichée. */ /* ====================================================================== 16/08/2026 — V75 : compatibilité iPhone / Safari iOS / PWA standalone Aucun changement visuel de la charte : uniquement viewport, safe areas, clavier, champs de saisie et interactions tactiles. ====================================================================== */ :root{ --ttf-safe-top:env(safe-area-inset-top, 0px); --ttf-safe-right:env(safe-area-inset-right, 0px); --ttf-safe-left:env(safe-area-inset-left, 0px); } html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; background:#000; } html,body{ width:100%; max-width:100%; overscroll-behavior-y:none; } body{ min-height:100dvh; min-height:-webkit-fill-available; -webkit-tap-highlight-color:transparent; } button,a,[role="button"]{ touch-action:manipulation; -webkit-tap-highlight-color:transparent; } input,textarea,select,button{ -webkit-appearance:none; appearance:none; } /* Safari iOS zoome automatiquement sur un champ dont le texte est < 16px. */ html.ttf-ios input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), html.ttf-ios textarea, html.ttf-ios select{ font-size:16px!important; } html.ttf-ios input, html.ttf-ios textarea, html.ttf-ios select{ -webkit-user-select:text; user-select:text; } /* Les écrans standalone utilisent la vraie hauteur visuelle fournie par JS. */ html.ttf-ios.ttf-standalone .mobile-shell{ min-height:var(--ttf-visual-height,100dvh)!important; } html.ttf-ios.ttf-standalone .reference-screen:not(.auth-reference){ max-height:var(--ttf-visual-height,100dvh); } /* La barre basse absorbe la zone du Home Indicator. */ html.ttf-ios .canonical-bottom-nav, html.ttf-ios #detailModal .detail-canonical-nav{ padding-bottom:max(5px,var(--ttf-safe-bottom))!important; } /* Pendant la saisie, on libère la zone du clavier au lieu de laisser la nav recouvrir les champs. Elle réapparaît dès que le clavier se ferme. */ html.ttf-ios.ios-keyboard-open .canonical-bottom-nav, html.ttf-ios.ios-keyboard-open #detailModal .detail-canonical-nav{ opacity:0!important; pointer-events:none!important; transform:translate(-50%,calc(100% + var(--ttf-safe-bottom)))!important; transition:opacity .12s ease,transform .12s ease!important; } /* Évite le rebond horizontal et les sélections accidentelles sur les visuels. */ .reference-screen img[aria-hidden="true"], .canonical-bottom-nav, .cbn-item{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; } @supports (-webkit-touch-callout:none){ .mobile-shell{min-height:-webkit-fill-available} } /* ====================================================================== 17/08/2026 — V81 : Bibliothèque mobile — statut de synchro lisible + décor bas moins envahissant + scroll tactile renforcé. Modifications strictement limitées à #catalogScreen. ====================================================================== */ #catalogScreen .catalog-cards{ -webkit-overflow-scrolling:touch!important; touch-action:pan-y!important; overscroll-behavior:contain!important; padding-bottom:calc(min(66.67vw,30.81dvh) + 34px)!important; } #catalogScreen .catalog-bottom-decor{ bottom:calc(var(--ttf-nav-height) - clamp(24px,4.05dvh,38px))!important; z-index:800!important; } @media(max-width:520px){ #catalogScreen .catalog-stat{ display:flex!important; flex-direction:column!important; align-items:flex-start!important; justify-content:center!important; gap:4px!important; padding:7px 6px!important; } #catalogScreen .catalog-stat>span{display:none!important} #catalogScreen .catalog-stat small{ display:block!important; width:100%!important; max-width:100%!important; font-size:clamp(6.4px,1.55vw,7.4px)!important; line-height:1.05!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; } #catalogScreen .catalog-stat strong{ display:block!important; width:100%!important; max-width:100%!important; font-size:clamp(13px,3.3vw,16px)!important; line-height:1!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; } #catalogScreen .catalog-stat-sync small{ font-size:clamp(5.8px,1.42vw,6.7px)!important; letter-spacing:-.01em!important; } #catalogScreen .catalog-stat-sync strong{ color:#49a7ff!important; font-size:clamp(7.5px,1.85vw,9px)!important; } } /* ====================================================================== 17/08/2026 — V87 : Espace Administration — décor détouré sans fade. Le PNG possède déjà un fond transparent : on ne masque plus le haut du décor afin de conserver tronçonneuse, revolver, badge, masque et fouet entièrement opaques. ====================================================================== */ #adminScreen .admin-bottom-decor-wrap{ -webkit-mask-image:none!important; mask-image:none!important; } #adminScreen .admin-bottom-decor{ opacity:1!important; } /* ====================================================================== 17/08/2026 — V88 : Espace Administration — flèche harmonisée sans masque. L'ancienne flèche a été retirée directement du PNG du bandeau. Le masque large qui rognait le titre est désactivé ; la flèche CSS commune conserve exactement la même position que sur les autres panneaux. ====================================================================== */ #adminScreen::after{ content:none!important; display:none!important; } /* 17/08/2026 — V89 : Accueil — distinction Nouveautés / Dernièrement ajoutés */ .home-recent-summary span>strong{display:block;color:#fff;font-size:inherit;font-weight:700;line-height:1.15} .home-recent-summary span>small{white-space:normal} /* V90 — Accueil : différencie les deux « Voir tout ». */ #catalogScreen .catalog-context{ flex:0 0 auto; display:flex; align-items:center; gap:8px; min-height:34px; padding:7px 10px; border:1px solid rgba(255,101,0,.45); border-radius:9px; background:linear-gradient(90deg,rgba(255,101,0,.10),rgba(8,8,8,.92)); color:#ddd; } #catalogScreen .catalog-context.hidden{display:none!important} #catalogScreen .catalog-context strong{color:#ff6500;font-size:clamp(10px,2.35vw,13px);white-space:nowrap} #catalogScreen .catalog-context span{font-size:clamp(8px,1.95vw,11px);line-height:1.2;color:#bbb} #catalogScreen .catalog-card:has(.catalog-card-action){position:relative} /* ====================================================================== 17/08/2026 — V91 : cartes statistiques Bibliothèque premium. Le rendu est entièrement HTML/CSS : les valeurs Emby restent dynamiques. ====================================================================== */ #catalogScreen .catalog-stats-premium{ display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:clamp(5px,1.25vw,8px)!important; flex:0 0 clamp(72px,9.6dvh,88px)!important; min-height:72px!important; } #catalogScreen .catalog-stats-premium .catalog-stat{ position:relative!important; min-width:0!important; height:100%!important; box-sizing:border-box!important; display:grid!important; grid-template-columns:clamp(24px,6.6vw,31px) minmax(0,1fr)!important; grid-template-rows:auto 1fr!important; align-items:center!important; column-gap:clamp(4px,1vw,7px)!important; padding:clamp(6px,1.5vw,9px)!important; overflow:hidden!important; border:1px solid rgba(255,101,0,.64)!important; border-radius:clamp(10px,2.7vw,14px)!important; background: radial-gradient(circle at 18% 0%,rgba(255,106,0,.15),transparent 48%), linear-gradient(180deg,rgba(17,17,17,.99),rgba(4,4,4,.99))!important; box-shadow: inset 0 0 20px rgba(255,101,0,.035), 0 4px 12px rgba(0,0,0,.32)!important; } #catalogScreen .catalog-stats-premium .catalog-stat::after{ content:""; position:absolute; left:16%;right:16%;bottom:5px; height:1px; background:linear-gradient(90deg,transparent,rgba(255,110,0,.85),transparent); box-shadow:0 0 7px rgba(255,101,0,.55); pointer-events:none; } #catalogScreen .catalog-stats-premium .catalog-stat-icon{ grid-column:1!important; grid-row:1!important; width:clamp(24px,6.6vw,31px)!important; height:clamp(24px,6.6vw,31px)!important; display:grid!important; place-items:center!important; border-radius:50%!important; color:#ff7900!important; border:1px solid rgba(255,118,0,.5)!important; background:radial-gradient(circle at 40% 30%,#1b1b1b,#080808 72%)!important; box-shadow:inset 0 0 8px rgba(255,101,0,.08),0 2px 5px rgba(0,0,0,.45)!important; } #catalogScreen .catalog-stats-premium .catalog-stat-icon svg{ width:64%!important; height:64%!important; fill:none!important; stroke:currentColor!important; stroke-width:1.8!important; stroke-linecap:round!important; stroke-linejoin:round!important; } #catalogScreen .catalog-stats-premium .catalog-stat-movies .catalog-stat-icon svg circle:not(:first-child){fill:currentColor!important;stroke:none!important} #catalogScreen .catalog-stats-premium .catalog-stat-series .catalog-stat-icon svg rect:nth-of-type(2){fill:currentColor!important;stroke:none!important} #catalogScreen .catalog-stats-premium .catalog-stat-collections .catalog-stat-icon svg path:first-child{fill:rgba(255,121,0,.2)!important} #catalogScreen .catalog-stats-premium .catalog-stat-label{ grid-column:2!important; grid-row:1!important; min-width:0!important; color:#f0f0f0!important; font-size:clamp(7px,1.65vw,9.5px)!important; font-weight:650!important; line-height:1.05!important; letter-spacing:0!important; text-transform:none!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; } #catalogScreen .catalog-stats-premium .catalog-stat-value{ grid-column:1 / 3!important; grid-row:2!important; align-self:end!important; display:block!important; width:100%!important; max-width:100%!important; padding:0 0 5px!important; color:#fff!important; font-size:clamp(17px,4.4vw,23px)!important; font-weight:650!important; line-height:.95!important; letter-spacing:-.025em!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; text-shadow:0 2px 8px rgba(0,0,0,.8)!important; } #catalogScreen .catalog-stats-premium .catalog-stat-sync .catalog-stat-value{ color:#21bfff!important; font-size:clamp(8px,2vw,11px)!important; font-weight:750!important; letter-spacing:0!important; padding-bottom:7px!important; } #catalogScreen .catalog-stats-premium .catalog-stat-sync .catalog-stat-icon{ color:#ff7900!important; } @media(max-width:390px){ #catalogScreen .catalog-stats-premium{ gap:4px!important; flex-basis:70px!important; } #catalogScreen .catalog-stats-premium .catalog-stat{ grid-template-columns:22px minmax(0,1fr)!important; padding:5px!important; column-gap:3px!important; } #catalogScreen .catalog-stats-premium .catalog-stat-icon{ width:22px!important;height:22px!important; } #catalogScreen .catalog-stats-premium .catalog-stat-label{font-size:6.5px!important} #catalogScreen .catalog-stats-premium .catalog-stat-value{font-size:16px!important} #catalogScreen .catalog-stats-premium .catalog-stat-sync .catalog-stat-value{font-size:7.4px!important} } /* ====================================================================== 17/08/2026 — V92 : Bibliothèque — valeurs centrées + recherche premium. Les compteurs restent dynamiques ; modification visuelle uniquement. ====================================================================== */ #catalogScreen .catalog-stats-premium .catalog-stat-value{ text-align:center!important; justify-self:center!important; align-self:end!important; padding-left:0!important; padding-right:0!important; } #catalogScreen .catalog-stats-premium .catalog-stat-sync .catalog-stat-value{ text-align:center!important; } #catalogScreen .catalog-tools{ display:grid!important; grid-template-columns:minmax(0,1fr) clamp(78px,19.5%,98px)!important; gap:clamp(6px,1.4vw,9px)!important; min-height:42px!important; } #catalogScreen .catalog-search{ position:static!important; width:100%!important; height:100%!important; box-sizing:border-box!important; border:1px solid rgba(255,101,0,.68)!important; border-radius:clamp(11px,2.8vw,14px)!important; outline:none!important; color:#f4f4f4!important; caret-color:#ff7900!important; padding:0 clamp(13px,3vw,18px) 0 clamp(39px,9.4vw,47px)!important; font-family:Arial,sans-serif!important; font-size:clamp(12px,2.7vw,15px)!important; background-color:#080808!important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='6.5' fill='none' stroke='%23ff7900' stroke-width='2'/%3E%3Cpath d='m16 16 4 4' fill='none' stroke='%23ff7900' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"), radial-gradient(circle at 9% 0%,rgba(255,106,0,.12),transparent 45%), linear-gradient(180deg,rgba(17,17,17,.99),rgba(5,5,5,.99))!important; background-repeat:no-repeat,no-repeat,no-repeat!important; background-position:clamp(12px,3vw,16px) center,center,center!important; background-size:clamp(18px,4.5vw,22px) clamp(18px,4.5vw,22px),100% 100%,100% 100%!important; box-shadow: inset 0 0 18px rgba(255,101,0,.035), 0 3px 10px rgba(0,0,0,.28)!important; transition:border-color .16s ease,box-shadow .16s ease!important; } #catalogScreen .catalog-search::placeholder{ color:#8f8f8f!important; opacity:1!important; } #catalogScreen .catalog-search:focus{ border-color:#ff7900!important; box-shadow: inset 0 0 20px rgba(255,101,0,.06), 0 0 0 1px rgba(255,121,0,.2), 0 0 14px rgba(255,101,0,.12)!important; } #catalogScreen .catalog-filters-btn{ height:100%!important; min-width:0!important; border:1px solid rgba(255,101,0,.78)!important; border-radius:clamp(11px,2.8vw,14px)!important; color:#ff7900!important; background: radial-gradient(circle at 20% 0%,rgba(255,106,0,.13),transparent 46%), linear-gradient(180deg,#121212,#050505)!important; box-shadow: inset 0 0 16px rgba(255,101,0,.04), 0 3px 10px rgba(0,0,0,.28)!important; font-size:clamp(9px,2vw,11px)!important; font-weight:800!important; letter-spacing:.015em!important; white-space:nowrap!important; cursor:pointer!important; transition:border-color .16s ease,background .16s ease,transform .08s ease!important; } #catalogScreen .catalog-filters-btn:active{ transform:scale(.98)!important; } #catalogScreen .catalog-filters-btn:hover, #catalogScreen .catalog-filters-btn:focus-visible{ border-color:#ff8c19!important; background: radial-gradient(circle at 20% 0%,rgba(255,106,0,.19),transparent 50%), linear-gradient(180deg,#17120e,#070707)!important; outline:none!important; } @media(max-width:390px){ #catalogScreen .catalog-tools{ grid-template-columns:minmax(0,1fr) 82px!important; gap:5px!important; } #catalogScreen .catalog-search{ padding-left:36px!important; background-position:11px center,center,center!important; background-size:18px 18px,100% 100%,100% 100%!important; font-size:12px!important; } #catalogScreen .catalog-filters-btn{font-size:8.5px!important} } /* ====================================================================== 17/08/2026 — V93 : Bibliothèque — libellés stats agrandis + filtres premium. Modification visuelle uniquement : les valeurs restent dynamiques via Emby. ====================================================================== */ #catalogScreen .catalog-stats-premium{ flex-basis:clamp(88px,11.2dvh,104px)!important; min-height:88px!important; } #catalogScreen .catalog-stats-premium .catalog-stat{ grid-template-columns:1fr!important; grid-template-rows:auto auto 1fr!important; justify-items:center!important; align-items:center!important; row-gap:clamp(2px,.45dvh,4px)!important; column-gap:0!important; padding:clamp(6px,1.4vw,8px) clamp(4px,1vw,6px)!important; } #catalogScreen .catalog-stats-premium .catalog-stat-icon{ grid-column:1!important; grid-row:1!important; width:clamp(25px,6.7vw,31px)!important; height:clamp(25px,6.7vw,31px)!important; justify-self:center!important; } #catalogScreen .catalog-stats-premium .catalog-stat-label{ grid-column:1!important; grid-row:2!important; width:100%!important; min-width:0!important; display:block!important; color:#f5f5f5!important; font-size:clamp(8.2px,2.05vw,10.5px)!important; font-weight:750!important; line-height:1.05!important; text-align:center!important; white-space:normal!important; overflow:visible!important; text-overflow:clip!important; text-wrap:balance!important; } #catalogScreen .catalog-stats-premium .catalog-stat-value{ grid-column:1!important; grid-row:3!important; align-self:center!important; justify-self:center!important; padding:1px 0 5px!important; font-size:clamp(18px,4.6vw,24px)!important; line-height:1!important; } #catalogScreen .catalog-stats-premium .catalog-stat-sync .catalog-stat-label{ font-size:clamp(7.8px,1.95vw,10px)!important; line-height:1.08!important; } #catalogScreen .catalog-stats-premium .catalog-stat-sync .catalog-stat-value{ font-size:clamp(8.4px,2.05vw,10.8px)!important; line-height:1.05!important; padding-bottom:6px!important; } /* Filtres : même langage visuel que les cartes stats et la recherche. */ #catalogScreen .catalog-tabs{ gap:clamp(6px,1.35vw,9px)!important; flex-basis:clamp(38px,4.9dvh,44px)!important; min-height:38px!important; } #catalogScreen .catalog-filter{ position:relative!important; height:100%!important; min-width:0!important; border:1px solid rgba(255,101,0,.52)!important; border-radius:999px!important; color:#e8e8e8!important; background: radial-gradient(circle at 18% 0%,rgba(255,106,0,.10),transparent 48%), linear-gradient(180deg,#121212,#050505)!important; box-shadow: inset 0 0 14px rgba(255,101,0,.035), 0 3px 9px rgba(0,0,0,.25)!important; font-size:clamp(9.5px,2.15vw,11.5px)!important; font-weight:750!important; letter-spacing:.012em!important; cursor:pointer!important; transition:border-color .16s ease,background .16s ease,color .16s ease,box-shadow .16s ease,transform .08s ease!important; } #catalogScreen .catalog-filter::after{ content:""; position:absolute; left:22%;right:22%;bottom:4px; height:1px; background:linear-gradient(90deg,transparent,rgba(255,110,0,.55),transparent); opacity:.55; pointer-events:none; } #catalogScreen .catalog-filter.active{ border-color:#ff7900!important; color:#fff!important; background: radial-gradient(circle at 20% 0%,rgba(255,210,150,.23),transparent 44%), linear-gradient(180deg,#ff7900,#e95600)!important; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 13px rgba(255,101,0,.16), 0 4px 10px rgba(0,0,0,.28)!important; } #catalogScreen .catalog-filter.active::after{ background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent); opacity:.75; } #catalogScreen .catalog-filter:active{transform:scale(.98)!important} #catalogScreen .catalog-filter:not(.active):hover, #catalogScreen .catalog-filter:not(.active):focus-visible{ border-color:#ff7900!important; color:#ff9a42!important; outline:none!important; } @media(max-width:390px){ #catalogScreen .catalog-stats-premium{ gap:4px!important; flex-basis:86px!important; min-height:86px!important; } #catalogScreen .catalog-stats-premium .catalog-stat{ padding:5px 3px!important; row-gap:2px!important; } #catalogScreen .catalog-stats-premium .catalog-stat-icon{ width:24px!important;height:24px!important; } #catalogScreen .catalog-stats-premium .catalog-stat-label{ font-size:7.8px!important; line-height:1.05!important; } #catalogScreen .catalog-stats-premium .catalog-stat-sync .catalog-stat-label{ font-size:7.2px!important; } #catalogScreen .catalog-stats-premium .catalog-stat-value{ font-size:17px!important; } #catalogScreen .catalog-stats-premium .catalog-stat-sync .catalog-stat-value{ font-size:7.6px!important; } #catalogScreen .catalog-tabs{gap:5px!important} #catalogScreen .catalog-filter{font-size:8.8px!important} } /* ====================================================================== 17/08/2026 — V94 : harmonisation premium des recherches et filtres. Écrans concernés : Recherche, Faire une demande, Mes demandes. Aucun changement fonctionnel : style uniquement. ====================================================================== */ /* ---------- RECHERCHE ---------- */ #searchScreen .main-search-input, #searchScreen .main-search-input:focus, #searchScreen .main-search-input:not(:placeholder-shown){ box-sizing:border-box!important; border:1px solid rgba(255,101,0,.72)!important; border-radius:clamp(12px,3vw,15px)!important; outline:none!important; color:#f4f4f4!important; caret-color:#ff7900!important; padding:0 clamp(14px,3.2vw,18px) 0 clamp(41px,9.7vw,49px)!important; font-family:Arial,sans-serif!important; font-size:clamp(12px,3vw,16px)!important; background-color:#080808!important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='6.5' fill='none' stroke='%23ff7900' stroke-width='2'/%3E%3Cpath d='m16 16 4 4' fill='none' stroke='%23ff7900' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"), radial-gradient(circle at 9% 0%,rgba(255,106,0,.12),transparent 45%), linear-gradient(180deg,rgba(17,17,17,.99),rgba(5,5,5,.99))!important; background-repeat:no-repeat,no-repeat,no-repeat!important; background-position:clamp(12px,3vw,16px) center,center,center!important; background-size:clamp(18px,4.5vw,22px) clamp(18px,4.5vw,22px),100% 100%,100% 100%!important; box-shadow:inset 0 0 18px rgba(255,101,0,.04),0 3px 10px rgba(0,0,0,.28)!important; transition:border-color .16s ease,box-shadow .16s ease!important; } #searchScreen .main-search-input::placeholder, #searchScreen .main-search-input:focus::placeholder{color:#909090!important;opacity:1!important} #searchScreen .main-search-input:focus{ border-color:#ff7900!important; box-shadow:inset 0 0 20px rgba(255,101,0,.065),0 0 0 1px rgba(255,121,0,.2),0 0 14px rgba(255,101,0,.13)!important; } #searchScreen .search-filter-hit{ border:1px solid rgba(255,101,0,.52)!important; border-radius:999px!important; color:#e8e8e8!important; background:radial-gradient(circle at 18% 0%,rgba(255,106,0,.10),transparent 48%),linear-gradient(180deg,#121212,#050505)!important; box-shadow:inset 0 0 14px rgba(255,101,0,.035),0 3px 9px rgba(0,0,0,.25)!important; font-weight:750!important; letter-spacing:.01em!important; transition:border-color .16s ease,background .16s ease,color .16s ease,box-shadow .16s ease,transform .08s ease!important; } #searchScreen .search-filter-hit.active:not(.search-filter-emby){ border-color:#ff7900!important; color:#fff!important; background:radial-gradient(circle at 20% 0%,rgba(255,210,150,.23),transparent 44%),linear-gradient(180deg,#ff7900,#e95600)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 13px rgba(255,101,0,.16),0 4px 10px rgba(0,0,0,.28)!important; } #searchScreen .search-filter-emby.active{ border-color:#69d900!important; color:#fff!important; background:radial-gradient(circle at 20% 0%,rgba(121,229,0,.14),transparent 46%),linear-gradient(180deg,#11170c,#050505)!important; box-shadow:inset 0 0 14px rgba(121,229,0,.05),0 0 12px rgba(121,229,0,.10),0 4px 10px rgba(0,0,0,.28)!important; } #searchScreen .search-filter-hit:active{transform:scale(.98)!important} #searchScreen .search-filter-hit:not(.active):hover, #searchScreen .search-filter-hit:not(.active):focus-visible{border-color:#ff7900!important;color:#ff9a42!important;outline:none!important} /* ---------- FAIRE UNE DEMANDE ---------- */ #requestScreen .request-search-input, #requestScreen .request-search-input:focus, #requestScreen .request-search-input:not(:placeholder-shown){ border:1px solid rgba(255,101,0,.72)!important; border-radius:clamp(12px,3vw,15px)!important; color:#f4f4f4!important; caret-color:#ff7900!important; padding:0 clamp(14px,3.2vw,18px) 0 clamp(41px,9.7vw,49px)!important; background-color:#080808!important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='6.5' fill='none' stroke='%23ff7900' stroke-width='2'/%3E%3Cpath d='m16 16 4 4' fill='none' stroke='%23ff7900' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"), radial-gradient(circle at 9% 0%,rgba(255,106,0,.12),transparent 45%), linear-gradient(180deg,rgba(17,17,17,.99),rgba(5,5,5,.99))!important; background-repeat:no-repeat,no-repeat,no-repeat!important; background-position:clamp(12px,3vw,16px) center,center,center!important; background-size:clamp(18px,4.5vw,22px) clamp(18px,4.5vw,22px),100% 100%,100% 100%!important; box-shadow:inset 0 0 18px rgba(255,101,0,.04),0 3px 10px rgba(0,0,0,.28)!important; } #requestScreen .request-search-input:focus{ border-color:#ff7900!important; box-shadow:inset 0 0 20px rgba(255,101,0,.065),0 0 0 1px rgba(255,121,0,.2),0 0 14px rgba(255,101,0,.13)!important; } #requestScreen .request-filter{ border:1px solid rgba(255,101,0,.52)!important; border-radius:999px!important; color:#e8e8e8!important; background:radial-gradient(circle at 18% 0%,rgba(255,106,0,.10),transparent 48%),linear-gradient(180deg,#121212,#050505)!important; box-shadow:inset 0 0 14px rgba(255,101,0,.035),0 3px 9px rgba(0,0,0,.25)!important; font-weight:750!important; transition:border-color .16s ease,background .16s ease,color .16s ease,box-shadow .16s ease,transform .08s ease!important; } #requestScreen .request-filter.active:not(.request-filter-emby){ border-color:#ff7900!important; color:#fff!important; background:radial-gradient(circle at 20% 0%,rgba(255,210,150,.23),transparent 44%),linear-gradient(180deg,#ff7900,#e95600)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 13px rgba(255,101,0,.16),0 4px 10px rgba(0,0,0,.28)!important; } #requestScreen .request-filter-emby.active{ border-color:#69d900!important; color:#fff!important; background:radial-gradient(circle at 20% 0%,rgba(121,229,0,.14),transparent 46%),linear-gradient(180deg,#11170c,#050505)!important; box-shadow:inset 0 0 14px rgba(121,229,0,.05),0 0 12px rgba(121,229,0,.10),0 4px 10px rgba(0,0,0,.28)!important; } #requestScreen .request-filter:active{transform:scale(.98)!important} #requestScreen .request-filter:not(.active):hover, #requestScreen .request-filter:not(.active):focus-visible{border-color:#ff7900!important;color:#ff9a42!important;outline:none!important} /* ---------- MES DEMANDES ---------- */ #myRequestsScreen .myrequests-filters{ gap:clamp(4px,1vw,7px)!important; padding:2px 1px 6px!important; } #myRequestsScreen .myreq-filter{ position:relative!important; height:calc(var(--requests-filters-h) - 7px)!important; min-height:0!important; padding:0 clamp(7px,1.75vw,10px)!important; border:1px solid rgba(255,101,0,.48)!important; border-radius:999px!important; color:#e8e8e8!important; background:radial-gradient(circle at 18% 0%,rgba(255,106,0,.10),transparent 48%),linear-gradient(180deg,#121212,#050505)!important; box-shadow:inset 0 0 12px rgba(255,101,0,.03),0 3px 8px rgba(0,0,0,.23)!important; font-size:clamp(8.5px,2.15vw,10.5px)!important; font-weight:750!important; gap:clamp(3px,.7vw,5px)!important; transition:border-color .16s ease,background .16s ease,color .16s ease,box-shadow .16s ease,transform .08s ease!important; } #myRequestsScreen .myreq-filter span{ display:inline-grid!important; place-items:center!important; min-width:1.55em!important; height:1.55em!important; padding:0 .35em!important; border-radius:999px!important; background:rgba(255,255,255,.07)!important; color:#cfcfcf!important; font-size:.9em!important; line-height:1!important; } #myRequestsScreen .myreq-filter span::before, #myRequestsScreen .myreq-filter span::after{content:none!important;display:none!important} #myRequestsScreen .myreq-filter.active{ border-color:#ff7900!important; color:#fff!important; background:radial-gradient(circle at 20% 0%,rgba(255,210,150,.23),transparent 44%),linear-gradient(180deg,#ff7900,#e95600)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 12px rgba(255,101,0,.15),0 4px 9px rgba(0,0,0,.26)!important; } #myRequestsScreen .myreq-filter.active span{ background:rgba(0,0,0,.20)!important; color:#fff!important; } #myRequestsScreen .myreq-filter:active{transform:scale(.98)!important} #myRequestsScreen .myreq-filter:not(.active):hover, #myRequestsScreen .myreq-filter:not(.active):focus-visible{border-color:#ff7900!important;color:#ff9a42!important;outline:none!important} @media(max-width:390px){ #searchScreen .main-search-input, #requestScreen .request-search-input{padding-left:37px!important;background-position:11px center,center,center!important;background-size:18px 18px,100% 100%,100% 100%!important} #searchScreen .search-filter-hit, #requestScreen .request-filter{font-size:8.6px!important} #myRequestsScreen .myreq-filter{font-size:8px!important;padding:0 6px!important;gap:2px!important} #myRequestsScreen .myreq-filter span{min-width:1.45em!important;height:1.45em!important;padding:0 .28em!important} } /* ====================================================================== 17/08/2026 — V95 : boutons d’action premium harmonisés. Recherche, Faire une demande et Bibliothèque profitent désormais du même rendu premium noir/orange (et vert pour disponible). ====================================================================== */ #catalogScreen .catalog-card-action, #searchScreen .request-result-btn, #requestScreen .request-result-btn{ position:relative!important; overflow:hidden!important; isolation:isolate!important; border-radius:12px!important; border:1px solid rgba(255,123,0,.88)!important; background: radial-gradient(circle at 50% 0%,rgba(255,133,20,.16),transparent 56%), linear-gradient(180deg,rgba(18,18,18,.98),rgba(5,5,5,.99))!important; color:#ff8a14!important; text-transform:uppercase!important; letter-spacing:.04em!important; font-weight:800!important; box-shadow: inset 0 1px 0 rgba(255,191,120,.12), inset 0 0 18px rgba(255,111,0,.055), 0 0 0 1px rgba(255,94,0,.06), 0 8px 18px rgba(0,0,0,.28)!important; text-shadow:0 0 10px rgba(255,120,0,.16)!important; transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease, color .14s ease!important; } #catalogScreen .catalog-card-action::before, #searchScreen .request-result-btn::before, #requestScreen .request-result-btn::before{ content:""; position:absolute; left:10px;right:10px;top:0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,205,145,.72),transparent); opacity:.9; pointer-events:none; } #catalogScreen .catalog-card-action::after, #searchScreen .request-result-btn::after, #requestScreen .request-result-btn::after{ content:""; position:absolute; left:18%;right:18%;bottom:4px; height:1px; background:linear-gradient(90deg,transparent,rgba(255,125,0,.95),transparent); box-shadow:0 0 8px rgba(255,101,0,.45); pointer-events:none; } #catalogScreen .catalog-card-action:active, #searchScreen .request-result-btn:active, #requestScreen .request-result-btn:active{ transform:translateY(1px) scale(.992)!important; box-shadow: inset 0 1px 0 rgba(255,191,120,.1), inset 0 0 18px rgba(255,111,0,.07), 0 4px 11px rgba(0,0,0,.24)!important; } #searchScreen .request-result-btn, #requestScreen .request-result-btn{ min-height:clamp(38px,4.7dvh,46px)!important; padding:clamp(9px,2vw,12px) 10px!important; } #searchScreen .request-result-btn{ font-size:clamp(12px,2.55vw,18px)!important; } #requestScreen .request-result-btn{ font-size:clamp(8.5px,2.2vw,10.8px)!important; margin-top:6px!important; } #catalogScreen .catalog-card-action{ min-height:clamp(38px,4.7dvh,46px)!important; padding:clamp(10px,1.65vw,12px) 12px!important; font-size:clamp(10px,1.95vw,14px)!important; } #searchScreen .request-result-btn.available, #requestScreen .request-result-btn.available{ border-color:rgba(106,214,26,.88)!important; background: radial-gradient(circle at 50% 0%,rgba(128,255,69,.12),transparent 56%), linear-gradient(180deg,rgba(10,17,8,.98),rgba(4,8,3,.99))!important; color:#78e427!important; box-shadow: inset 0 1px 0 rgba(196,255,162,.09), inset 0 0 18px rgba(112,215,43,.06), 0 0 0 1px rgba(74,179,13,.08), 0 8px 18px rgba(0,0,0,.28)!important; text-shadow:0 0 10px rgba(112,215,43,.16)!important; } #searchScreen .request-result-btn.available::after, #requestScreen .request-result-btn.available::after{ background:linear-gradient(90deg,transparent,rgba(120,228,39,.92),transparent)!important; box-shadow:0 0 8px rgba(120,228,39,.28)!important; } #searchScreen .request-result-btn.available:disabled, #requestScreen .request-result-btn.available:disabled{ opacity:1!important; -webkit-text-fill-color:currentColor!important; } /* ====================================================================== 17/08/2026 — V96 : fiche détail premium harmonisée. Disponibilité et actions rapides adoptent le rendu premium du reste de l’application (orange / vert / bleu, glow discret, relief). ====================================================================== */ #detailModal .detail-status{ position:relative!important; overflow:hidden!important; padding:11px 12px!important; border-radius:12px!important; font-weight:800!important; letter-spacing:.01em!important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 0 18px rgba(0,0,0,.08), 0 8px 18px rgba(0,0,0,.28)!important; } #detailModal .detail-status::before, #detailModal #modalRequestBtn::before, #detailModal #modalMyRequestsBtn::before{ content:""; position:absolute; left:10px;right:10px;top:0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,228,195,.72),transparent); pointer-events:none; } #detailModal .detail-status::after, #detailModal #modalRequestBtn::after, #detailModal #modalMyRequestsBtn::after{ content:""; position:absolute; left:18%;right:18%;bottom:4px; height:1px; background:linear-gradient(90deg,transparent,rgba(255,125,0,.95),transparent); box-shadow:0 0 8px rgba(255,101,0,.4); pointer-events:none; } #detailModal .detail-status.is-available{ border:1px solid rgba(106,214,26,.9)!important; background: radial-gradient(circle at 50% 0%,rgba(128,255,69,.12),transparent 56%), linear-gradient(180deg,rgba(10,17,8,.98),rgba(4,8,3,.99))!important; color:#78e427!important; text-shadow:0 0 10px rgba(112,215,43,.16)!important; } #detailModal .detail-status.is-available::after{ background:linear-gradient(90deg,transparent,rgba(120,228,39,.92),transparent)!important; box-shadow:0 0 8px rgba(120,228,39,.28)!important; } #detailModal .detail-status.is-partial{ border:1px solid rgba(255,143,32,.88)!important; background: radial-gradient(circle at 50% 0%,rgba(255,133,20,.14),transparent 56%), linear-gradient(180deg,rgba(18,18,18,.98),rgba(7,7,7,.99))!important; color:#ff9a2e!important; } #detailModal .detail-status.is-missing{ border:1px solid rgba(255,143,32,.82)!important; background: radial-gradient(circle at 50% 0%,rgba(255,133,20,.12),transparent 56%), linear-gradient(180deg,rgba(18,18,18,.98),rgba(7,7,7,.99))!important; color:#ff8a14!important; } #detailModal #modalRequestBtn, #detailModal #modalMyRequestsBtn{ position:relative!important; overflow:hidden!important; isolation:isolate!important; min-height:48px!important; border-radius:12px!important; text-transform:uppercase!important; letter-spacing:.04em!important; box-shadow: inset 0 1px 0 rgba(255,191,120,.12), inset 0 0 18px rgba(255,111,0,.055), 0 0 0 1px rgba(255,94,0,.06), 0 8px 18px rgba(0,0,0,.28)!important; transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease, color .14s ease!important; } #detailModal #modalRequestBtn:active, #detailModal #modalMyRequestsBtn:active{ transform:translateY(1px) scale(.992)!important; } #detailModal #modalRequestBtn.is-request, #detailModal #modalRequestBtn.is-series{ border:1px solid rgba(255,123,0,.88)!important; background: radial-gradient(circle at 50% 0%,rgba(255,133,20,.16),transparent 56%), linear-gradient(180deg,rgba(18,18,18,.98),rgba(5,5,5,.99))!important; color:#ff8a14!important; text-shadow:0 0 10px rgba(255,120,0,.16)!important; } #detailModal #modalRequestBtn.is-available, #detailModal #modalRequestBtn.is-disabled-premium{ border:1px solid rgba(106,214,26,.88)!important; background: radial-gradient(circle at 50% 0%,rgba(128,255,69,.12),transparent 56%), linear-gradient(180deg,rgba(10,17,8,.98),rgba(4,8,3,.99))!important; color:#78e427!important; text-shadow:0 0 10px rgba(112,215,43,.16)!important; opacity:1!important; filter:none!important; } #detailModal #modalRequestBtn.is-available::after, #detailModal #modalRequestBtn.is-disabled-premium::after{ background:linear-gradient(90deg,transparent,rgba(120,228,39,.92),transparent)!important; box-shadow:0 0 8px rgba(120,228,39,.28)!important; } #detailModal #modalMyRequestsBtn, #detailModal #modalMyRequestsBtn.is-history{ border:1px solid rgba(0,183,255,.88)!important; background: radial-gradient(circle at 50% 0%,rgba(60,187,255,.13),transparent 56%), linear-gradient(180deg,rgba(8,16,22,.98),rgba(4,9,13,.99))!important; color:#39b7ff!important; text-shadow:0 0 10px rgba(57,183,255,.16)!important; box-shadow: inset 0 1px 0 rgba(190,233,255,.08), inset 0 0 18px rgba(57,183,255,.045), 0 0 0 1px rgba(57,183,255,.05), 0 8px 18px rgba(0,0,0,.28)!important; } #detailModal #modalMyRequestsBtn::after{ background:linear-gradient(90deg,transparent,rgba(57,183,255,.92),transparent)!important; box-shadow:0 0 8px rgba(57,183,255,.25)!important; } @media(max-width:430px){ #detailModal #modalRequestBtn, #detailModal #modalMyRequestsBtn{ min-height:46px!important; padding:8px 6px!important; font-size:clamp(8.6px,2.18vw,10px)!important; } } /* ====================================================================== 17/08/2026 — V97 : harmonisation premium globale. Objectif : appliquer le même traitement premium sur Mes demandes vide, Profil, Mon compte, Notifications, Mon activité, Espace administration et Configuration Emby, pour une cohérence visuelle complète. ====================================================================== */ /* ---------- Base premium partagée : panneaux / cartes ---------- */ #myRequestsScreen .myreq-empty, #profileScreen .profile-identity-card, #profileScreen .profile-menu-card, #accountScreen .account-identity-card, #accountScreen .account-panel, #accountScreen .account-privacy-note, #notificationsScreen .notifications-intro-card, #notificationsScreen .notifications-panel, #notificationsScreen .notifications-privacy-note, #activityScreen .activity-panel, #activityScreen .activity-privacy-note, #adminScreen .admin-panel, #adminScreen .admin-action-card, #embyConfigScreen .emby-config-panel, #embyConfigScreen .emby-config-note{ position:relative!important; overflow:hidden!important; isolation:isolate!important; } #myRequestsScreen .myreq-empty::before, #profileScreen .profile-identity-card::before, #profileScreen .profile-menu-card::before, #accountScreen .account-identity-card::before, #accountScreen .account-panel::before, #accountScreen .account-privacy-note::before, #notificationsScreen .notifications-intro-card::before, #notificationsScreen .notifications-panel::before, #notificationsScreen .notifications-privacy-note::before, #activityScreen .activity-panel::before, #activityScreen .activity-privacy-note::before, #adminScreen .admin-panel::before, #adminScreen .admin-action-card::before, #embyConfigScreen .emby-config-panel::before, #embyConfigScreen .emby-config-note::before{ content:""; position:absolute; left:10px; right:10px; top:0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,228,195,.72),transparent); pointer-events:none; } #myRequestsScreen .myreq-empty::after, #profileScreen .profile-identity-card::after, #profileScreen .profile-menu-card::after, #accountScreen .account-identity-card::after, #accountScreen .account-panel::after, #accountScreen .account-privacy-note::after, #notificationsScreen .notifications-intro-card::after, #notificationsScreen .notifications-panel::after, #notificationsScreen .notifications-privacy-note::after, #activityScreen .activity-panel::after, #activityScreen .activity-privacy-note::after, #adminScreen .admin-panel::after, #adminScreen .admin-action-card::after, #embyConfigScreen .emby-config-panel::after, #embyConfigScreen .emby-config-note::after{ content:""; position:absolute; left:18%; right:18%; bottom:4px; height:1px; background:linear-gradient(90deg,transparent,rgba(255,125,0,.88),transparent); box-shadow:0 0 8px rgba(255,101,0,.32); pointer-events:none; } /* ---------- Mes demandes : état vide premium ---------- */ #myRequestsScreen .myreq-empty{ border:1px solid rgba(255,101,0,.26)!important; border-radius:18px!important; background: radial-gradient(circle at 50% 0%, rgba(255,126,18,.12), transparent 52%), linear-gradient(180deg,rgba(16,16,16,.985),rgba(5,5,5,.995))!important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 0 22px rgba(255,101,0,.04), 0 10px 24px rgba(0,0,0,.34)!important; } #myRequestsScreen .myreq-empty-title{font-weight:900!important;letter-spacing:.01em!important} #myRequestsScreen .myreq-empty-title strong{ color:#ff7a14!important; text-shadow:0 0 12px rgba(255,116,0,.16)!important; } #myRequestsScreen .myreq-empty-action{ position:relative!important; overflow:hidden!important; border:1px solid rgba(255,123,0,.88)!important; border-radius:12px!important; background: radial-gradient(circle at 50% 0%,rgba(255,210,150,.22),transparent 42%), linear-gradient(180deg,#ff7b00,#ea5600)!important; color:#fff!important; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 14px rgba(255,101,0,.16), 0 8px 18px rgba(0,0,0,.28)!important; } #myRequestsScreen .myreq-empty-action::before{ content:"";position:absolute;left:10px;right:10px;top:0;height:1px; background:linear-gradient(90deg,transparent,rgba(255,247,235,.78),transparent); } #myRequestsScreen .myreq-empty-action::after{ content:"";position:absolute;left:18%;right:18%;bottom:4px;height:1px; background:linear-gradient(90deg,transparent,rgba(255,247,235,.92),transparent); } /* ---------- Profil premium ---------- */ #profileScreen .profile-identity-card, #profileScreen .profile-menu-card{ background: radial-gradient(circle at 50% 0%, rgba(255,126,18,.10), transparent 54%), linear-gradient(120deg,rgba(20,20,20,.985),rgba(5,5,5,.99))!important; border-color:rgba(255,101,0,.28)!important; box-shadow: inset 0 1px 0 rgba(255,255,255,.045), inset 0 0 22px rgba(255,101,0,.03), 0 10px 24px rgba(0,0,0,.36)!important; } #profileScreen .profile-menu-card{ transition:transform .12s ease, border-color .16s ease, box-shadow .16s ease!important; } #profileScreen .profile-menu-card:active{transform:translateY(1px) scale(.992)!important} #profileScreen .profile-menu-card:hover, #profileScreen .profile-menu-card:focus-visible{ border-color:rgba(255,121,0,.46)!important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 0 24px rgba(255,101,0,.04), 0 0 0 1px rgba(255,101,0,.06), 0 10px 24px rgba(0,0,0,.36)!important; outline:none!important; } #profileScreen .profile-card-icon{ background:linear-gradient(180deg,rgba(18,18,18,.98),rgba(7,7,7,.99))!important; box-shadow:inset 0 0 14px rgba(255,101,0,.035),0 4px 10px rgba(0,0,0,.24)!important; } #profileScreen .profile-role-badge, #profileScreen .profile-card-status{ position:relative!important; overflow:hidden!important; border-color:rgba(255,122,26,.38)!important; background: radial-gradient(circle at 50% 0%,rgba(255,129,24,.12),transparent 58%), linear-gradient(180deg,rgba(28,16,8,.98),rgba(10,8,6,.99))!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 4px 10px rgba(0,0,0,.2)!important; } #profileScreen .profile-admin-card{border-color:rgba(169,76,255,.34)!important} #profileScreen .profile-admin-card::after{background:linear-gradient(90deg,transparent,rgba(169,76,255,.9),transparent)!important;box-shadow:0 0 8px rgba(169,76,255,.25)!important} #profileScreen .profile-admin-card .profile-card-icon, #profileScreen .profile-admin-card .profile-card-status{ background: radial-gradient(circle at 50% 0%,rgba(169,76,255,.12),transparent 56%), linear-gradient(180deg,rgba(19,13,25,.98),rgba(7,5,10,.99))!important; border-color:rgba(169,76,255,.42)!important; } #profileScreen .profile-logout-card{border-color:rgba(255,68,73,.36)!important} #profileScreen .profile-logout-card::after{background:linear-gradient(90deg,transparent,rgba(255,60,66,.92),transparent)!important;box-shadow:0 0 8px rgba(255,60,66,.25)!important} #profileScreen .profile-logout-card .profile-card-icon{ background: radial-gradient(circle at 50% 0%,rgba(255,70,73,.12),transparent 56%), linear-gradient(180deg,rgba(27,10,10,.98),rgba(11,4,4,.99))!important; } #profileScreen .profile-activity-counts{ border-color:rgba(255,101,0,.24)!important; background: linear-gradient(180deg,rgba(8,8,8,.9),rgba(4,4,4,.92))!important; box-shadow:inset 0 0 14px rgba(255,101,0,.03)!important; } /* ---------- Mon compte premium ---------- */ #accountScreen .account-identity-card, #accountScreen .account-panel, #accountScreen .account-privacy-note{ border-color:rgba(255,101,0,.28)!important; background: radial-gradient(circle at 50% 0%, rgba(255,126,18,.10), transparent 56%), linear-gradient(180deg,rgba(16,16,16,.985),rgba(6,6,6,.992))!important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 0 22px rgba(255,101,0,.03), 0 10px 24px rgba(0,0,0,.36)!important; } #accountScreen .account-avatar-wrap{ box-shadow:0 0 16px rgba(255,101,0,.18)!important; } #accountScreen .account-role-pill, #accountScreen .account-avatar-btn, #accountScreen .account-password-action, #accountScreen .account-session-action, #accountScreen .account-side-value{ position:relative!important; overflow:hidden!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 4px 10px rgba(0,0,0,.18)!important; } #accountScreen .account-role-pill, #accountScreen .account-avatar-btn{ border-color:rgba(255,123,0,.38)!important; background: radial-gradient(circle at 50% 0%,rgba(255,129,24,.13),transparent 58%), linear-gradient(180deg,rgba(27,16,8,.98),rgba(10,8,5,.99))!important; } #accountScreen .account-password-action{ border-color:rgba(169,76,255,.42)!important; background: radial-gradient(circle at 50% 0%,rgba(169,76,255,.12),transparent 56%), linear-gradient(180deg,rgba(19,13,25,.98),rgba(7,5,10,.99))!important; } #accountScreen .account-session-action{ border-color:rgba(111,199,30,.42)!important; background: radial-gradient(circle at 50% 0%,rgba(111,199,30,.10),transparent 56%), linear-gradient(180deg,rgba(10,17,8,.98),rgba(4,8,3,.99))!important; } #accountScreen .account-row{ transition:background .14s ease, border-color .14s ease!important; } #accountScreen .account-row:not(.static-row):hover, #accountScreen .account-row:not(.static-row):focus-visible{ background:linear-gradient(90deg,rgba(255,101,0,.06),rgba(0,0,0,0))!important; outline:none!important; } #accountScreen .account-toggle{ background:linear-gradient(90deg,#2b153f,#6f28c7)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 4px 10px rgba(0,0,0,.22)!important; } /* ---------- Notifications premium ---------- */ #notificationsScreen .notifications-intro-card, #notificationsScreen .notifications-panel, #notificationsScreen .notifications-privacy-note{ border-color:rgba(255,101,0,.28)!important; background: radial-gradient(circle at 50% 0%, rgba(255,126,18,.10), transparent 56%), linear-gradient(180deg,rgba(16,16,16,.985),rgba(6,6,6,.992))!important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 0 22px rgba(255,101,0,.03), 0 10px 24px rgba(0,0,0,.36)!important; } #notificationsScreen .notifications-all{ border:1px solid rgba(169,76,255,.4)!important; border-radius:999px!important; padding:7px 10px!important; background: radial-gradient(circle at 50% 0%,rgba(169,76,255,.14),transparent 56%), linear-gradient(180deg,rgba(18,12,23,.98),rgba(7,5,10,.99))!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 4px 10px rgba(0,0,0,.2)!important; } #notificationsScreen .notification-row{ transition:background .14s ease!important; } #notificationsScreen .notification-row:hover, #notificationsScreen .notification-row:focus-visible{ background:linear-gradient(90deg,rgba(255,101,0,.055),rgba(0,0,0,0))!important; outline:none!important; } #notificationsScreen .notification-icon{ background:linear-gradient(180deg,rgba(18,18,18,.98),rgba(7,7,7,.99))!important; box-shadow:inset 0 0 14px rgba(255,101,0,.03),0 4px 10px rgba(0,0,0,.22)!important; } #notificationsScreen .notification-switch{ box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 4px 10px rgba(0,0,0,.24)!important; } #notificationsScreen .notification-switch.on{ background:linear-gradient(90deg,#6d23c1,#a34bff)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.11),0 0 12px rgba(163,75,255,.14),0 4px 10px rgba(0,0,0,.24)!important; } /* ---------- Mon activité premium ---------- */ #activityScreen .activity-panel, #activityScreen .activity-privacy-note{ border-color:rgba(255,101,0,.28)!important; background: radial-gradient(circle at 50% 0%, rgba(255,126,18,.10), transparent 56%), linear-gradient(180deg,rgba(16,16,16,.985),rgba(6,6,6,.992))!important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 0 22px rgba(255,101,0,.03), 0 10px 24px rgba(0,0,0,.36)!important; } #activityScreen .activity-period, #activityScreen .activity-link, #activityScreen .activity-clear, #activityScreen .activity-request-status{ position:relative!important; overflow:hidden!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 4px 10px rgba(0,0,0,.18)!important; } #activityScreen .activity-period{ border-color:rgba(169,76,255,.42)!important; background: radial-gradient(circle at 50% 0%,rgba(169,76,255,.13),transparent 56%), linear-gradient(180deg,rgba(18,12,23,.98),rgba(7,5,10,.99))!important; } #activityScreen .activity-stats{padding-top:10px!important} #activityScreen .activity-stat{ position:relative!important; overflow:hidden!important; background: linear-gradient(180deg,rgba(11,11,11,.98),rgba(4,4,4,.99))!important; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), inset 0 0 16px rgba(255,101,0,.02), 0 8px 18px rgba(0,0,0,.24)!important; } #activityScreen .activity-stat::before{ content:"";position:absolute;left:10px;right:10px;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,228,195,.55),transparent); } #activityScreen .activity-stat::after{ content:"";position:absolute;left:18%;right:18%;bottom:4px;height:1px;background:linear-gradient(90deg,transparent,currentColor,transparent);opacity:.56;box-shadow:0 0 8px currentColor; } #activityScreen .activity-request-row, #activityScreen .activity-search-row{ border-radius:10px!important; transition:background .14s ease!important; } #activityScreen .activity-request-row:hover, #activityScreen .activity-search-row:hover, #activityScreen .activity-request-row:focus-visible, #activityScreen .activity-search-row:focus-visible{ background:linear-gradient(90deg,rgba(255,101,0,.055),rgba(0,0,0,0))!important; outline:none!important; } /* ---------- Espace administration premium ---------- */ #adminScreen .admin-panel, #adminScreen .admin-action-card{ border-color:rgba(255,101,0,.28)!important; background: radial-gradient(circle at 50% 0%, rgba(255,126,18,.10), transparent 56%), linear-gradient(180deg,rgba(16,16,16,.985),rgba(6,6,6,.992))!important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 0 22px rgba(255,101,0,.03), 0 10px 24px rgba(0,0,0,.36)!important; } #adminScreen .admin-stat{ position:relative!important; overflow:hidden!important; background:linear-gradient(180deg,rgba(10,10,10,.985),rgba(4,4,4,.99))!important; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), inset 0 0 16px rgba(255,101,0,.02), 0 8px 18px rgba(0,0,0,.24)!important; } #adminScreen .admin-stat::before{ content:"";position:absolute;left:10px;right:10px;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,228,195,.55),transparent); } #adminScreen .admin-stat::after{ content:"";position:absolute;left:18%;right:18%;bottom:4px;height:1px;background:linear-gradient(90deg,transparent,currentColor,transparent);opacity:.56;box-shadow:0 0 8px currentColor; } #adminScreen .admin-action-card{ transition:transform .12s ease, border-color .16s ease, box-shadow .16s ease!important; } #adminScreen .admin-action-card:hover, #adminScreen .admin-action-card:focus-visible{ border-color:rgba(255,121,0,.44)!important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 0 24px rgba(255,101,0,.04), 0 0 0 1px rgba(255,101,0,.06), 0 10px 24px rgba(0,0,0,.36)!important; outline:none!important; } #adminScreen .admin-action-icon, #adminScreen .admin-action-count{ box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 4px 10px rgba(0,0,0,.22)!important; } #adminScreen .admin-action-icon{ background:linear-gradient(180deg,rgba(18,18,18,.98),rgba(7,7,7,.99))!important; } #adminScreen .admin-action-count{ background: radial-gradient(circle at 50% 0%,rgba(255,176,57,.18),transparent 56%), linear-gradient(180deg,rgba(47,27,7,.98),rgba(20,12,4,.99))!important; border-color:rgba(255,183,79,.34)!important; } /* ---------- Configuration Emby premium ---------- */ #embyConfigScreen .emby-config-panel, #embyConfigScreen .emby-config-note{ border-color:rgba(169,76,255,.34)!important; background: radial-gradient(circle at 50% 0%, rgba(169,76,255,.12), transparent 56%), linear-gradient(180deg,rgba(16,16,16,.985),rgba(6,6,6,.992))!important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 0 24px rgba(169,76,255,.04), 0 10px 24px rgba(0,0,0,.36)!important; } #embyConfigScreen .emby-config-icon{ background:linear-gradient(180deg,rgba(18,12,23,.98),rgba(7,5,10,.99))!important; box-shadow:inset 0 0 14px rgba(169,76,255,.04),0 4px 10px rgba(0,0,0,.22)!important; } #embyConfigScreen .emby-config-control input, #embyConfigScreen .emby-url-control, #embyConfigScreen .emby-key-control{ box-shadow:inset 0 0 18px rgba(169,76,255,.03),0 4px 10px rgba(0,0,0,.22)!important; } #embyConfigScreen .emby-config-control input:focus, #embyConfigScreen .emby-url-control:focus-within, #embyConfigScreen .emby-key-control:focus-within{ border-color:#ba6dff!important; box-shadow:inset 0 0 18px rgba(169,76,255,.05),0 0 0 1px rgba(169,76,255,.16),0 0 14px rgba(169,76,255,.10)!important; } #embyConfigScreen .emby-config-help, #embyConfigScreen .emby-test-button, #embyConfigScreen .emby-config-save, #embyConfigScreen .emby-config-cancel{ position:relative!important; overflow:hidden!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 18px rgba(0,0,0,.28)!important; } #embyConfigScreen .emby-config-help::before, #embyConfigScreen .emby-test-button::before, #embyConfigScreen .emby-config-save::before, #embyConfigScreen .emby-config-cancel::before{ content:"";position:absolute;left:10px;right:10px;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,247,235,.72),transparent); } #embyConfigScreen .emby-config-help::after, #embyConfigScreen .emby-test-button::after, #embyConfigScreen .emby-config-save::after, #embyConfigScreen .emby-config-cancel::after{ content:"";position:absolute;left:18%;right:18%;bottom:4px;height:1px;background:linear-gradient(90deg,transparent,rgba(169,76,255,.88),transparent);box-shadow:0 0 8px rgba(169,76,255,.24); } #embyConfigScreen .emby-test-button, #embyConfigScreen .emby-config-cancel, #embyConfigScreen .emby-config-help{ background: radial-gradient(circle at 50% 0%,rgba(169,76,255,.12),transparent 56%), linear-gradient(180deg,rgba(18,12,23,.98),rgba(7,5,10,.99))!important; } #embyConfigScreen .emby-config-save{ background: radial-gradient(circle at 50% 0%,rgba(231,188,255,.24),transparent 44%), linear-gradient(90deg,#6f23c2,#a34bff,#7b25d5)!important; } #embyConfigScreen .emby-config-toggle{ box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 4px 10px rgba(0,0,0,.22)!important; } #embyConfigScreen .emby-test-box{ border-color:rgba(169,76,255,.44)!important; background: radial-gradient(circle at 50% 0%,rgba(169,76,255,.09),transparent 58%), linear-gradient(180deg,rgba(17,11,21,.82),rgba(8,6,11,.88))!important; } /* ====================================================================== 17/08/2026 — V100 : Mes demandes — état vide premium non rogné. Compacte uniquement le contenu de l'état vide afin que le CTA reste entièrement visible dans la zone dynamique, sans modifier le décor bas. ====================================================================== */ #myRequestsScreen .myreq-empty{ justify-content:flex-start!important; overflow:visible!important; padding:clamp(8px,2.2vw,12px) 4% clamp(10px,2.8vw,14px)!important; } #myRequestsScreen .myreq-reel-scene{ width:min(48%,300px)!important; margin:0 auto clamp(8px,2.2vw,12px)!important; flex:0 0 auto!important; } #myRequestsScreen .myreq-empty-title{ font-size:clamp(17px,3.2vw,27px)!important; line-height:1.15!important; flex:0 0 auto!important; } #myRequestsScreen .myreq-empty-subtitle{ margin-top:clamp(5px,1.4vw,8px)!important; font-size:clamp(11px,2.15vw,18px)!important; flex:0 0 auto!important; } #myRequestsScreen .myreq-empty-action{ margin-top:clamp(10px,2.8vw,15px)!important; min-height:clamp(38px,4.8dvh,46px)!important; padding:clamp(8px,2vw,11px) clamp(18px,5vw,28px)!important; flex:0 0 auto!important; } @media(max-width:430px){ #myRequestsScreen .myreq-reel-scene{width:min(46%,245px)!important} #myRequestsScreen .myreq-empty{padding-top:8px!important} #myRequestsScreen .myreq-empty-action{min-height:38px!important} } /* ====================================================================== 17/08/2026 — V101 : connexion premium codée (aucun nouveau visuel). Le fond 01_connexion.png reste inchangé. Seul le formulaire HTML/CSS interactif est harmonisé avec le thème premium TonTonFlix. ====================================================================== */ #authScreen .login-hotspots{ z-index:20!important; } #authScreen .login-hotspots::before{ content:""; position:absolute; z-index:-1; left:7.2%; right:7.2%; top:68.55%; bottom:2.85%; border:1px solid rgba(255,101,0,.30); border-radius:clamp(16px,3.8vw,25px); background: radial-gradient(circle at 50% 0%,rgba(255,126,18,.115),transparent 45%), linear-gradient(180deg,rgba(16,16,16,.955),rgba(5,5,5,.975)); box-shadow: inset 0 1px 0 rgba(255,255,255,.055), inset 0 0 26px rgba(255,101,0,.035), 0 12px 34px rgba(0,0,0,.46); pointer-events:none; } #authScreen .login-hotspots::after{ content:""; position:absolute; z-index:-1; left:22%; right:22%; bottom:3.25%; height:1px; background:linear-gradient(90deg,transparent,rgba(255,122,0,.85),transparent); box-shadow:0 0 10px rgba(255,101,0,.30); pointer-events:none; } #authScreen .login-hotspots input{ left:19.2%!important; width:65.5%!important; border:1px solid rgba(255,112,0,.42)!important; border-radius:clamp(9px,2.3vw,13px)!important; background: radial-gradient(circle at 12% 0%,rgba(255,106,0,.09),transparent 48%), linear-gradient(180deg,rgba(18,18,18,.995),rgba(7,7,7,.995))!important; color:#fff!important; caret-color:#ff7900!important; padding:0 clamp(12px,2.8vw,17px)!important; box-shadow: inset 0 1px 0 rgba(255,255,255,.045), inset 0 0 16px rgba(255,101,0,.035), 0 5px 14px rgba(0,0,0,.30)!important; text-shadow:0 1px 1px rgba(0,0,0,.3)!important; transition:border-color .16s ease,box-shadow .16s ease,background .16s ease!important; } #authScreen .login-hotspots input::placeholder{ color:#7f7f7f!important; opacity:1!important; } #authScreen .login-hotspots input:focus{ border-color:#ff7900!important; background: radial-gradient(circle at 12% 0%,rgba(255,106,0,.12),transparent 48%), linear-gradient(180deg,rgba(20,20,20,.995),rgba(8,8,8,.995))!important; box-shadow: inset 0 1px 0 rgba(255,255,255,.055), inset 0 0 18px rgba(255,101,0,.05), 0 0 0 1px rgba(255,121,0,.14), 0 0 14px rgba(255,101,0,.12), 0 5px 14px rgba(0,0,0,.30)!important; } #authScreen #loginUsername{ top:70.35%!important; height:4.05%!important; } #authScreen #loginPassword{ top:75.55%!important; height:4.05%!important; padding-right:12%!important; } #authScreen .eye-btn{ z-index:22!important; right:15.1%!important; top:75.55%!important; width:8.5%!important; height:4.05%!important; display:grid!important; place-items:center!important; border:0!important; border-left:1px solid rgba(255,101,0,.22)!important; background:transparent!important; color:#ff7100!important; font-size:clamp(15px,3.3vw,24px)!important; text-shadow:0 0 8px rgba(255,101,0,.16)!important; cursor:pointer!important; pointer-events:auto!important; } #authScreen .eye-btn span{pointer-events:none!important} #authScreen .login-submit{ z-index:22!important; left:10.3%!important; right:10.3%!important; top:81.15%!important; height:4.9%!important; display:flex!important; align-items:center!important; justify-content:center!important; gap:clamp(8px,2vw,13px)!important; border:1px solid rgba(255,136,28,.90)!important; border-radius:clamp(10px,2.5vw,14px)!important; background: radial-gradient(circle at 50% 0%,rgba(255,235,205,.28),transparent 43%), linear-gradient(180deg,#ff7b00,#e95700)!important; color:#fff!important; font-size:clamp(17px,3.8vw,29px)!important; line-height:1!important; font-weight:700!important; text-transform:none!important; letter-spacing:.01em!important; cursor:pointer!important; pointer-events:auto!important; box-shadow: inset 0 1px 0 rgba(255,255,255,.24), inset 0 -1px 0 rgba(104,28,0,.24), 0 0 16px rgba(255,101,0,.18), 0 8px 18px rgba(0,0,0,.34)!important; text-shadow:0 1px 2px rgba(0,0,0,.34)!important; transition:transform .10s ease,box-shadow .14s ease,filter .14s ease!important; } #authScreen .login-submit::before{ content:""; position:absolute; left:13%;right:13%;top:0;height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.90),transparent); pointer-events:none; } #authScreen .login-submit:active{ transform:translateY(1px) scale(.992)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 4px 12px rgba(0,0,0,.30)!important; } #authScreen .forgot-btn{ z-index:22!important; left:25%!important; right:25%!important; top:86.65%!important; height:3.25%!important; border:0!important; border-radius:999px!important; background:transparent!important; color:#ff7900!important; font-size:clamp(12px,2.7vw,20px)!important; font-weight:500!important; text-shadow:0 0 9px rgba(255,101,0,.12)!important; cursor:pointer!important; pointer-events:auto!important; } #authScreen .forgot-btn:hover, #authScreen .forgot-btn:focus-visible{ color:#ff9a42!important; outline:none!important; background:rgba(255,101,0,.045)!important; } #authScreen .form-error{ z-index:23!important; left:11%!important; right:11%!important; top:89.65%!important; min-height:2.3%!important; padding:.45em .7em!important; border-radius:9px!important; color:#ff777b!important; font-size:clamp(9px,2.05vw,14px)!important; line-height:1.25!important; background:rgba(34,5,6,.72)!important; text-shadow:none!important; } #authScreen .form-error:empty{background:transparent!important;padding:0!important} #authScreen .auth-version{ z-index:30!important; border-color:rgba(255,119,0,.75)!important; background: radial-gradient(circle at 50% 0%,rgba(255,130,0,.13),transparent 58%), linear-gradient(180deg,rgba(16,16,16,.94),rgba(5,5,5,.96))!important; color:#ff8a19!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 4px 12px rgba(0,0,0,.28)!important; } #authScreen .login-hotspots input:-webkit-autofill, #authScreen .login-hotspots input:-webkit-autofill:hover, #authScreen .login-hotspots input:-webkit-autofill:focus{ -webkit-text-fill-color:#fff!important; -webkit-box-shadow:0 0 0 1000px #101010 inset,0 0 0 1px rgba(255,121,0,.15)!important; caret-color:#ff7900!important; } /* Mot de passe oublié : même langage premium. */ .forgot-password-overlay{ background:rgba(0,0,0,.88)!important; backdrop-filter:blur(5px)!important; -webkit-backdrop-filter:blur(5px)!important; } .forgot-password-card{ overflow:hidden!important; border:1px solid rgba(255,101,0,.38)!important; border-radius:20px!important; background: radial-gradient(circle at 50% 0%,rgba(255,126,18,.12),transparent 50%), linear-gradient(180deg,rgba(18,18,18,.995),rgba(5,5,5,.995))!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.055),inset 0 0 26px rgba(255,101,0,.035),0 24px 70px rgba(0,0,0,.76)!important; } .forgot-password-card::before{ content:"";position:absolute;left:12px;right:12px;top:0;height:1px; background:linear-gradient(90deg,transparent,rgba(255,226,190,.78),transparent); } .forgot-password-card::after{ content:"";position:absolute;left:20%;right:20%;bottom:5px;height:1px; background:linear-gradient(90deg,transparent,rgba(255,125,0,.90),transparent);box-shadow:0 0 8px rgba(255,101,0,.28); } .forgot-password-icon{ border-color:rgba(255,123,0,.62)!important; background:radial-gradient(circle at 45% 30%,rgba(255,128,20,.18),rgba(14,9,6,.98) 70%)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 15px rgba(255,101,0,.10)!important; } .forgot-password-card input{ border-color:rgba(255,112,0,.34)!important; background:linear-gradient(180deg,#121212,#070707)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.04),inset 0 0 15px rgba(255,101,0,.03)!important; } .forgot-password-card input:focus{ border-color:#ff7900!important; box-shadow:inset 0 0 16px rgba(255,101,0,.04),0 0 0 1px rgba(255,121,0,.12),0 0 12px rgba(255,101,0,.10)!important; } #forgotPasswordSubmit, #forgotPasswordCancel{ position:relative!important; overflow:hidden!important; border-radius:12px!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 7px 16px rgba(0,0,0,.28)!important; } #forgotPasswordSubmit{ border-color:rgba(255,136,28,.90)!important; background:radial-gradient(circle at 50% 0%,rgba(255,235,205,.25),transparent 43%),linear-gradient(180deg,#ff7b00,#e95700)!important; } #forgotPasswordCancel{ border-color:rgba(255,101,0,.24)!important; background:linear-gradient(180deg,#121212,#070707)!important; color:#d0d0d0!important; } @media(max-width:430px){ #authScreen .login-hotspots::before{left:7.5%;right:7.5%;top:68.45%;bottom:2.7%!important} #authScreen #loginUsername{top:70.30%!important} #authScreen #loginPassword{top:75.50%!important} #authScreen .eye-btn{top:75.50%!important} #authScreen .login-submit{top:81.10%!important} #authScreen .forgot-btn{top:86.60%!important} } /* ====================================================================== 17/08/2026 — V102 : connexion premium — panneau recentré. Le fond premium encadre uniquement les contrôles de connexion et ne recouvre plus le slogan bas intégré au visuel 01_connexion.png. ====================================================================== */ #authScreen .login-hotspots::before{ top:68.55%!important; bottom:9.05%!important; } #authScreen .login-hotspots::after{ bottom:9.45%!important; } #authScreen .form-error{ top:89.55%!important; min-height:1.9%!important; max-height:2.2%!important; overflow:hidden!important; } @media(max-width:430px){ #authScreen .login-hotspots::before{top:68.45%!important;bottom:9.0%!important} #authScreen .login-hotspots::after{bottom:9.4%!important} } /* ====================================================================== 17/08/2026 — V103 : Accueil — slogan de bienvenue premium plus lisible. Aucun visuel modifié : uniquement le texte HTML/CSS validé. ====================================================================== */ #appScreen .home-greeting span{ align-self:flex-end!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; max-width:min(78vw,430px)!important; padding:4px 11px 5px!important; margin-top:5px!important; border:1px solid rgba(255,119,0,.58)!important; border-radius:999px!important; background: radial-gradient(circle at 50% 0%,rgba(255,126,18,.16),transparent 55%), linear-gradient(180deg,rgba(13,13,13,.88),rgba(3,3,3,.92))!important; color:#ff8617!important; font-family:Arial,Helvetica,sans-serif!important; font-style:italic!important; font-size:clamp(13px,3.25vw,26px)!important; font-weight:800!important; line-height:1.08!important; letter-spacing:.005em!important; white-space:nowrap!important; text-shadow: 0 1px 1px #000, 0 2px 3px #000, 0 0 8px rgba(255,112,0,.18)!important; -webkit-text-stroke:0!important; box-shadow: inset 0 1px 0 rgba(255,221,181,.08), inset 0 0 14px rgba(255,101,0,.035), 0 4px 12px rgba(0,0,0,.52)!important; } #appScreen .home-greeting span::before{ content:""; width:5px; height:5px; margin-right:7px; flex:0 0 auto; border-radius:50%; background:#ff7600; box-shadow:0 0 7px rgba(255,118,0,.65); } @media(max-width:430px){ #appScreen .home-greeting span{ max-width:72vw!important; padding:3px 8px 4px!important; font-size:clamp(12px,3vw,15px)!important; } #appScreen .home-greeting span::before{ width:4px;height:4px;margin-right:5px; } } /* ====================================================================== 17/08/2026 — V104 : Accueil — salutation premium. Aucun visuel modifié : le prénom reste dynamique et est simplement mis en valeur en HTML/CSS au-dessus du slogan V103. ====================================================================== */ #appScreen .home-greeting strong{ align-self:flex-end!important; display:inline-flex!important; align-items:baseline!important; justify-content:flex-end!important; gap:clamp(3px,.8vw,6px)!important; max-width:68vw!important; overflow:visible!important; color:#f4f4f4!important; font-family:Arial,Helvetica,sans-serif!important; font-size:clamp(20px,4.75vw,32px)!important; font-weight:800!important; line-height:1!important; letter-spacing:-.018em!important; white-space:nowrap!important; text-shadow:0 2px 4px #000,0 0 10px rgba(0,0,0,.88)!important; } #appScreen .home-greeting-hello{ color:#f1f1f1!important; font-size:.78em!important; font-weight:650!important; letter-spacing:.025em!important; } #appScreen .home-greeting-name{ position:relative!important; display:inline-block!important; padding:0 .05em .12em!important; color:#ff8a16!important; font-size:1.08em!important; font-weight:900!important; letter-spacing:-.025em!important; text-shadow: 0 2px 3px #000, 0 0 8px rgba(255,111,0,.18), 0 0 15px rgba(255,111,0,.10)!important; } #appScreen .home-greeting-name::after{ content:""; position:absolute; left:7%;right:7%;bottom:0; height:1px; border-radius:999px; background:linear-gradient(90deg,transparent,#ff7900 20%,#ffb25f 50%,#ff7900 80%,transparent); box-shadow:0 0 6px rgba(255,112,0,.48); pointer-events:none; } #appScreen .home-greeting-bang{ color:#ff7900!important; font-size:1.02em!important; font-weight:900!important; text-shadow:0 0 8px rgba(255,112,0,.25)!important; } @media(max-width:430px){ #appScreen .home-greeting strong{ max-width:66vw!important; gap:3px!important; font-size:clamp(18px,4.65vw,22px)!important; } #appScreen .home-greeting-hello{font-size:.8em!important} #appScreen .home-greeting-name{font-size:1.06em!important} } /* ====================================================================== 17/08/2026 — V105 : Accueil — correction salutation premium. Le cartouche V103 reste réservé au slogan. La salutation redevient une seule ligne propre : Salut [prénom] !, sans capsules autour des mots. ====================================================================== */ #appScreen .home-greeting > strong > span{ align-self:auto!important; display:inline-block!important; max-width:none!important; margin:0!important; padding:0!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; font-family:Arial,Helvetica,sans-serif!important; font-style:normal!important; line-height:1!important; white-space:nowrap!important; } #appScreen .home-greeting > strong > span::before, #appScreen .home-greeting > strong > span::after{ content:none!important; display:none!important; } #appScreen .home-greeting > strong{ gap:4px!important; padding:0!important; border:0!important; background:transparent!important; box-shadow:none!important; } #appScreen .home-greeting > strong .home-greeting-hello{ color:#f4f4f4!important; font-size:1em!important; font-weight:650!important; letter-spacing:0!important; text-shadow:0 2px 4px #000,0 0 8px rgba(0,0,0,.9)!important; } #appScreen .home-greeting > strong .home-greeting-name{ color:#ff8617!important; font-size:1em!important; font-weight:900!important; letter-spacing:-.015em!important; text-shadow:0 2px 3px #000,0 0 9px rgba(255,111,0,.22)!important; } #appScreen .home-greeting > strong .home-greeting-bang{ color:#ff8617!important; font-size:1em!important; font-weight:900!important; text-shadow:0 0 8px rgba(255,112,0,.22)!important; } /* V103 : le cartouche est exclusivement le slogan, enfant direct du bloc. */ #appScreen .home-greeting > span{ align-self:flex-end!important; } @media(max-width:430px){ #appScreen .home-greeting > strong{ font-size:clamp(18px,4.65vw,22px)!important; gap:3px!important; } } /* ====================================================================== 17/08/2026 — V106 : Mes demandes — cartes premium. Harmonisation visuelle des cartes de demandes avec le langage premium global (cartes, badges, actions et informations secondaires). ====================================================================== */ #myRequestsScreen .myreq-card{ position:relative!important; overflow:hidden!important; isolation:isolate!important; display:grid!important; grid-template-columns:30% 1fr!important; gap:0!important; min-height:clamp(168px,46vw,210px)!important; border:1px solid rgba(255,121,0,.34)!important; border-radius:18px!important; background: radial-gradient(circle at 50% 0%, rgba(255,133,20,.13), transparent 54%), linear-gradient(135deg,rgba(18,18,18,.985),rgba(6,6,6,.995))!important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 0 22px rgba(255,101,0,.045), 0 10px 24px rgba(0,0,0,.34)!important; } #myRequestsScreen .myreq-card::before{ content:""; position:absolute; left:10px; right:10px; top:0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,219,168,.76),transparent); pointer-events:none; } #myRequestsScreen .myreq-card::after{ content:""; position:absolute; left:18%; right:18%; bottom:4px; height:1px; background:linear-gradient(90deg,transparent,rgba(255,125,0,.92),transparent); box-shadow:0 0 8px rgba(255,101,0,.34); pointer-events:none; } #myRequestsScreen .myreq-poster{ width:100%!important; height:100%!important; min-height:clamp(168px,46vw,210px)!important; object-fit:cover!important; background:#090909!important; border-right:1px solid rgba(255,121,0,.14)!important; box-shadow:inset -1px 0 0 rgba(255,255,255,.03)!important; } #myRequestsScreen .myreq-body{ position:relative!important; z-index:1!important; min-width:0!important; padding:12px 13px 12px 13px!important; display:flex!important; flex-direction:column!important; } #myRequestsScreen .myreq-title{ font-size:clamp(16px,4.1vw,24px)!important; line-height:1.08!important; font-weight:900!important; color:#f7f7f7!important; white-space:normal!important; display:-webkit-box!important; -webkit-line-clamp:2!important; -webkit-box-orient:vertical!important; overflow:hidden!important; text-shadow:0 1px 0 rgba(0,0,0,.72)!important; } #myRequestsScreen .myreq-meta{ margin-top:6px!important; color:#c9c9c9!important; font-size:clamp(10px,2.55vw,13px)!important; letter-spacing:.01em!important; } #myRequestsScreen .myreq-seasons{ margin-top:8px!important; padding:7px 9px!important; border-left:2px solid #a04aff!important; border-radius:0 10px 10px 0!important; background:linear-gradient(90deg,rgba(74,18,109,.34),rgba(14,8,20,.14))!important; } #myRequestsScreen .myreq-seasons strong{ color:#cb93ff!important; font-size:clamp(9px,2.15vw,10.5px)!important; letter-spacing:.03em!important; text-transform:uppercase!important; } #myRequestsScreen .myreq-seasons small{ color:#b7b7b7!important; font-size:clamp(8px,1.95vw,9.5px)!important; } #myRequestsScreen .myreq-status{ align-self:flex-start!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; min-height:30px!important; margin-top:10px!important; padding:0 12px!important; border-radius:999px!important; border:1px solid rgba(255,121,0,.72)!important; background: radial-gradient(circle at 50% 0%,rgba(255,168,63,.16),transparent 60%), linear-gradient(180deg,rgba(22,22,22,.98),rgba(7,7,7,.99))!important; color:#ff9a22!important; font-size:clamp(10px,2.45vw,12px)!important; font-weight:900!important; letter-spacing:.04em!important; text-transform:uppercase!important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(255,109,0,.06), 0 6px 14px rgba(0,0,0,.22)!important; text-shadow:0 0 10px rgba(255,121,0,.16)!important; } #myRequestsScreen .myreq-status.pending{ border-color:rgba(255,130,28,.82)!important; color:#ff9b2a!important; } #myRequestsScreen .myreq-status.in_progress{ border-color:rgba(63,181,255,.82)!important; background: radial-gradient(circle at 50% 0%,rgba(114,215,255,.15),transparent 60%), linear-gradient(180deg,rgba(11,18,24,.98),rgba(5,8,11,.99))!important; color:#54c2ff!important; text-shadow:0 0 10px rgba(63,181,255,.16)!important; } #myRequestsScreen .myreq-status.available{ border-color:rgba(116,220,41,.84)!important; background: radial-gradient(circle at 50% 0%,rgba(141,255,88,.14),transparent 60%), linear-gradient(180deg,rgba(11,18,8,.98),rgba(4,8,3,.99))!important; color:#79e32c!important; text-shadow:0 0 10px rgba(116,220,41,.16)!important; } #myRequestsScreen .myreq-status.refused{ border-color:rgba(255,78,78,.8)!important; background: radial-gradient(circle at 50% 0%,rgba(255,123,123,.12),transparent 60%), linear-gradient(180deg,rgba(22,10,10,.98),rgba(9,4,4,.99))!important; color:#ff6868!important; text-shadow:0 0 10px rgba(255,78,78,.18)!important; } #myRequestsScreen .myreq-note{ margin-top:8px!important; padding:8px 9px!important; border-left:2px solid rgba(255,121,0,.82)!important; border-radius:0 10px 10px 0!important; background:linear-gradient(90deg,rgba(62,29,8,.28),rgba(10,10,10,.08))!important; color:#c5c5c5!important; font-size:clamp(8.7px,2.18vw,10px)!important; line-height:1.35!important; } #myRequestsScreen .myreq-refusal-reason{ margin-top:8px!important; padding:8px 9px!important; border:1px solid rgba(255,85,85,.34)!important; border-radius:12px!important; background:linear-gradient(180deg,rgba(32,9,9,.94),rgba(13,4,4,.98))!important; color:#ffc7c7!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.03)!important; } #myRequestsScreen .myreq-refusal-reason strong{color:#ff7575!important} #myRequestsScreen .myreq-actions{ margin-top:12px!important; gap:8px!important; align-items:stretch!important; } #myRequestsScreen .myreq-actions .myreq-admin-select{ flex:1 1 auto!important; min-height:40px!important; padding:0 12px!important; border:1px solid rgba(255,123,0,.82)!important; border-radius:12px!important; background: radial-gradient(circle at 50% 0%,rgba(255,133,20,.14),transparent 56%), linear-gradient(180deg,rgba(18,18,18,.98),rgba(5,5,5,.99))!important; color:#fff!important; font-size:clamp(9px,2.2vw,10px)!important; font-weight:800!important; letter-spacing:.02em!important; box-shadow: inset 0 1px 0 rgba(255,191,120,.08), inset 0 0 18px rgba(255,111,0,.05), 0 8px 18px rgba(0,0,0,.22)!important; } #myRequestsScreen .myreq-delete{ position:relative!important; overflow:hidden!important; isolation:isolate!important; flex:0 0 auto!important; min-width:94px!important; min-height:40px!important; padding:0 14px!important; border:1px solid rgba(255,77,77,.86)!important; border-radius:12px!important; background: radial-gradient(circle at 50% 0%,rgba(255,136,136,.14),transparent 58%), linear-gradient(180deg,rgba(28,8,8,.98),rgba(10,3,3,.99))!important; color:#ff6363!important; font-size:clamp(9px,2.15vw,10px)!important; font-weight:900!important; letter-spacing:.04em!important; box-shadow: inset 0 1px 0 rgba(255,200,200,.08), inset 0 0 18px rgba(255,77,77,.05), 0 8px 18px rgba(0,0,0,.24)!important; text-shadow:0 0 10px rgba(255,77,77,.14)!important; } #myRequestsScreen .myreq-delete::before{ content:""; position:absolute; left:10px;right:10px;top:0;height:1px; background:linear-gradient(90deg,transparent,rgba(255,232,232,.76),transparent); } #myRequestsScreen .myreq-delete::after{ content:""; position:absolute; left:18%;right:18%;bottom:4px;height:1px; background:linear-gradient(90deg,transparent,rgba(255,107,107,.88),transparent); box-shadow:0 0 8px rgba(255,77,77,.18); } #myRequestsScreen .myreq-delete:active{ transform:translateY(1px) scale(.992)!important; } #myRequestsScreen .myreq-actions > .myreq-delete:first-child{ margin-left:0!important; width:100%!important; } @media (max-width:430px){ #myRequestsScreen .myreq-body{padding:10px 10px 11px 10px!important} #myRequestsScreen .myreq-title{font-size:clamp(15px,4vw,18px)!important} #myRequestsScreen .myreq-meta{font-size:clamp(9.5px,2.5vw,11px)!important} #myRequestsScreen .myreq-status{min-height:28px!important;padding:0 10px!important} #myRequestsScreen .myreq-delete{min-width:82px!important;padding:0 10px!important} } /* ====================================================================== 17/08/2026 — V107 : corrections premium ciblées. - Fiche Film/Série : boutons Action rapide contenus et alignés. - Mes demandes admin : menu select natif forcé en thème sombre. ====================================================================== */ #detailModal .detail-actions{ display:grid!important; grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important; grid-template-areas: "title title" "request history"!important; column-gap:10px!important; row-gap:10px!important; align-items:stretch!important; min-height:0!important; height:auto!important; overflow:hidden!important; padding-bottom:13px!important; } #detailModal .detail-actions h4{ grid-area:title!important; margin:0!important; } #detailModal #modalRequestBtn{ grid-area:request!important; align-self:stretch!important; justify-self:stretch!important; width:100%!important; min-width:0!important; max-width:100%!important; margin:0!important; transform:none!important; } #detailModal #modalMyRequestsBtn{ grid-area:history!important; align-self:stretch!important; justify-self:stretch!important; width:100%!important; min-width:0!important; max-width:100%!important; margin:0!important; transform:none!important; } #detailModal #modalRequestBtn:active, #detailModal #modalMyRequestsBtn:active{ transform:translateY(1px) scale(.992)!important; } @media(max-width:380px){ #detailModal .detail-actions{ grid-template-columns:1fr!important; grid-template-areas: "title" "request" "history"!important; } } #myRequestsScreen .myreq-admin-select{ color-scheme:dark!important; -webkit-appearance:auto!important; appearance:auto!important; background-color:#080808!important; color:#f4f4f4!important; } #myRequestsScreen .myreq-admin-select option{ background:#101010!important; color:#f4f4f4!important; font-weight:700!important; } #myRequestsScreen .myreq-admin-select option:checked{ background:#8a3a00!important; color:#fff!important; } /* ====================================================================== 17/08/2026 — V108 : fiche Film/Série — neutralisation définitive des anciens hotspots/coordonnées du bouton d'action. L'ancien top:81% / left:6% ne doit jamais agir sur les boutons HTML. ====================================================================== */ #detailModal .detail-actions{ min-height:112px!important; height:auto!important; overflow:hidden!important; padding:13px 14px 16px!important; box-sizing:border-box!important; } #detailModal #modalRequestBtn, #detailModal #modalMyRequestsBtn{ position:static!important; inset:auto!important; top:auto!important; right:auto!important; bottom:auto!important; left:auto!important; width:100%!important; height:auto!important; min-height:50px!important; max-width:100%!important; margin:0!important; transform:none!important; box-sizing:border-box!important; } #detailModal #modalRequestBtn{ grid-column:1!important; grid-row:2!important; } #detailModal #modalMyRequestsBtn{ grid-column:2!important; grid-row:2!important; } @media(max-width:380px){ #detailModal .detail-actions{ min-height:174px!important; } #detailModal #modalRequestBtn{ grid-column:1!important; grid-row:2!important; } #detailModal #modalMyRequestsBtn{ grid-column:1!important; grid-row:3!important; } } /* ====================================================================== 17/08/2026 — V109 : Mes demandes — ouverture de la fiche au clic. La carte entière est interactive, hors contrôles admin / suppression. ====================================================================== */ #myRequestsScreen .myreq-card{ cursor:pointer!important; transition:border-color .15s ease,box-shadow .15s ease,transform .12s ease!important; } #myRequestsScreen .myreq-card:hover, #myRequestsScreen .myreq-card:focus-visible{ border-color:rgba(255,132,25,.62)!important; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 24px rgba(255,101,0,.055), 0 0 0 1px rgba(255,101,0,.07), 0 10px 24px rgba(0,0,0,.38)!important; outline:none!important; } #myRequestsScreen .myreq-card:active{transform:scale(.996)!important} #myRequestsScreen .myreq-actions, #myRequestsScreen .myreq-actions *{cursor:auto} #myRequestsScreen .myreq-actions button, #myRequestsScreen .myreq-actions select{cursor:pointer!important} /* ====================================================================== 17/08/2026 — V111 : Accueil — carte « Dernièrement ajoutés » en thème premium Harmonisation visuelle avec les autres composants premium. ====================================================================== */ .home-recent-summary{ position:relative!important; width:min(82%,680px)!important; min-height:clamp(74px,16vw,126px)!important; display:grid!important; grid-template-columns:auto minmax(0,1fr) auto!important; align-items:center!important; gap:12px!important; padding:12px 16px!important; border-radius:18px!important; border:1px solid rgba(255,126,22,.78)!important; background: radial-gradient(circle at 16% 50%,rgba(255,112,0,.16),transparent 0 22%), linear-gradient(180deg,rgba(25,16,9,.97) 0%,rgba(7,7,7,.99) 100%)!important; box-shadow: inset 0 0 0 1px rgba(255,162,77,.06), inset 0 0 26px rgba(255,112,0,.08), 0 8px 22px rgba(0,0,0,.42)!important; overflow:hidden!important; text-align:left!important; isolation:isolate; } .home-recent-summary::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background: linear-gradient(90deg,rgba(255,149,51,.12) 0%,rgba(255,149,51,0) 26%,rgba(255,149,51,0) 100%), linear-gradient(180deg,rgba(255,255,255,.035),transparent 34%); z-index:0; } .home-recent-summary > *{ position:relative; z-index:1; } .home-recent-summary b{ min-width:42px; display:flex; align-items:baseline; justify-content:flex-start; color:#ff7a00!important; font-size:clamp(30px,6.9vw,50px)!important; font-weight:800; line-height:1; text-shadow:0 0 14px rgba(255,119,0,.22); } .home-recent-summary span{ display:flex!important; flex-direction:column; gap:4px; min-width:0; font-size:inherit!important; } .home-recent-summary span > strong{ display:block!important; color:#fff!important; font-size:clamp(13px,2.9vw,20px)!important; font-weight:800!important; line-height:1.08!important; letter-spacing:.02em; text-transform:none; } .home-recent-summary span > small{ display:block!important; margin-top:0!important; color:#c9c9c9!important; font-size:clamp(9px,2vw,13px)!important; line-height:1.18!important; } .home-recent-summary i{ width:34px; height:34px; display:grid; place-items:center; border-radius:999px; border:1px solid rgba(255,126,22,.55); background:linear-gradient(180deg,rgba(31,20,11,.96),rgba(10,10,10,.98)); color:#ff7a00!important; font-style:normal; font-size:22px!important; line-height:1; box-shadow:inset 0 0 14px rgba(255,120,0,.09),0 0 14px rgba(255,120,0,.06); } .home-recent-summary.home-zero{ opacity:.9!important; } .home-recent-summary:active{ transform:translateY(1px); } @media(max-width:520px){ .home-recent-summary{ width:100%!important; padding:11px 13px!important; gap:10px!important; border-radius:16px!important; } .home-recent-summary b{ min-width:34px; font-size:clamp(28px,7.2vw,40px)!important; } .home-recent-summary span > strong{ font-size:clamp(12px,3vw,16px)!important; } .home-recent-summary span > small{ font-size:clamp(8px,2.15vw,11px)!important; } .home-recent-summary i{ width:30px; height:30px; font-size:20px!important; } } /* ====================================================================== 17/08/2026 — V112 : Accueil — harmonisation premium complète. Cartes principales, alerte administrateur, nouveautés et boutons Voir tout. Aucun changement fonctionnel ni visuel bitmap. ====================================================================== */ /* --- Actions principales --- */ #appScreen .home-action-card{ position:relative!important; overflow:hidden!important; isolation:isolate!important; border:1px solid rgba(255,126,22,.72)!important; border-radius:18px!important; background: radial-gradient(circle at 13% 50%,rgba(255,118,0,.14),transparent 0 25%), linear-gradient(145deg,rgba(24,16,9,.985),rgba(5,5,5,.995))!important; box-shadow: inset 0 0 0 1px rgba(255,162,77,.05), inset 0 0 24px rgba(255,101,0,.05), 0 8px 20px rgba(0,0,0,.36)!important; transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease!important; } #appScreen .home-action-card::before{ content:""; position:absolute; left:12px;right:12px;top:0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,217,171,.72),transparent); pointer-events:none; } #appScreen .home-action-card::after{ content:""; position:absolute; left:18%;right:18%;bottom:4px; height:1px; background:linear-gradient(90deg,transparent,rgba(255,125,0,.92),transparent); box-shadow:0 0 8px rgba(255,101,0,.26); pointer-events:none; } #appScreen .home-action-card>b{ width:clamp(38px,9vw,54px)!important; height:clamp(38px,9vw,54px)!important; display:grid!important; place-items:center!important; border:1px solid rgba(255,126,22,.52)!important; border-radius:14px!important; background:linear-gradient(180deg,rgba(31,20,11,.98),rgba(9,9,9,.99))!important; color:#ff7900!important; font-size:clamp(21px,4.8vw,30px)!important; line-height:1!important; box-shadow:inset 0 0 14px rgba(255,120,0,.08),0 4px 12px rgba(0,0,0,.28)!important; text-shadow:0 0 10px rgba(255,121,0,.18)!important; } #appScreen .home-action-card strong{ font-weight:900!important; letter-spacing:.01em!important; text-shadow:0 1px 0 rgba(0,0,0,.8)!important; } #appScreen .home-action-card small{ color:#c9c9c9!important; } #appScreen .home-action-card i{ width:32px!important; height:32px!important; display:grid!important; place-items:center!important; border:1px solid rgba(255,126,22,.46)!important; border-radius:999px!important; background:linear-gradient(180deg,rgba(28,18,10,.98),rgba(8,8,8,.99))!important; color:#ff7900!important; font-size:22px!important; box-shadow:inset 0 0 12px rgba(255,120,0,.07)!important; } #appScreen .home-action-card u{ min-width:27px!important; height:27px!important; border:1px solid rgba(255,116,116,.52)!important; background:linear-gradient(180deg,#ff3544,#bd0e22)!important; box-shadow:0 0 12px rgba(255,35,57,.18),inset 0 1px 0 rgba(255,255,255,.16)!important; } #appScreen .home-action-card:hover, #appScreen .home-action-card:focus-visible{ border-color:rgba(255,137,35,.96)!important; box-shadow: inset 0 0 0 1px rgba(255,162,77,.07), inset 0 0 28px rgba(255,101,0,.07), 0 0 0 1px rgba(255,101,0,.06), 0 10px 24px rgba(0,0,0,.4)!important; outline:none!important; } #appScreen .home-action-card:active{transform:translateY(1px) scale(.994)!important} /* --- Carte Administration sur l'accueil --- */ #appScreen .home-admin-pending{ position:relative!important; overflow:hidden!important; isolation:isolate!important; border:1px solid rgba(255,126,22,.70)!important; border-radius:17px!important; background: radial-gradient(circle at 10% 50%,rgba(255,118,0,.14),transparent 0 24%), linear-gradient(100deg,rgba(25,16,9,.985),rgba(6,6,6,.995))!important; box-shadow: inset 0 0 0 1px rgba(255,162,77,.05), inset 0 0 24px rgba(255,101,0,.05), 0 8px 20px rgba(0,0,0,.34)!important; } #appScreen .home-admin-pending::before{ content:""; position:absolute; left:12px;right:12px;top:0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,217,171,.70),transparent); pointer-events:none; } #appScreen .home-admin-pending::after{ content:""; position:absolute; left:18%;right:18%;bottom:4px; height:1px; background:linear-gradient(90deg,transparent,rgba(255,125,0,.90),transparent); box-shadow:0 0 8px rgba(255,101,0,.24); pointer-events:none; } #appScreen .home-admin-pending-icon{ border-radius:13px!important; border-color:rgba(255,126,22,.52)!important; background:linear-gradient(180deg,rgba(31,20,11,.98),rgba(9,9,9,.99))!important; box-shadow:inset 0 0 14px rgba(255,120,0,.08),0 4px 12px rgba(0,0,0,.26)!important; } #appScreen .home-admin-pending-count{ border:1px solid rgba(255,139,35,.5)!important; background:linear-gradient(180deg,#ff7d08,#ce4d00)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 12px rgba(255,101,0,.14)!important; } #appScreen .home-admin-pending.is-clear{ opacity:1!important; border-color:rgba(255,126,22,.48)!important; } #appScreen .home-admin-pending.is-clear .home-admin-pending-count{ border-color:rgba(160,160,160,.24)!important; background:linear-gradient(180deg,#2a2a2a,#171717)!important; color:#aaa!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important; } #appScreen .home-admin-pending.has-pending{ border-color:#ff7900!important; box-shadow: inset 0 0 0 1px rgba(255,162,77,.06), inset 0 0 26px rgba(255,101,0,.06), 0 0 18px rgba(255,101,0,.11), 0 8px 22px rgba(0,0,0,.36)!important; } /* --- Titres de sections + Voir tout --- */ #appScreen .home-section header{ margin-bottom:9px!important; } #appScreen .home-section h2{ font-weight:800!important; letter-spacing:.01em!important; text-shadow:0 1px 0 #000!important; } #appScreen .home-section-icon{ text-shadow:0 0 8px rgba(255,101,0,.18)!important; } #appScreen .home-section header button{ position:relative!important; border:1px solid rgba(255,126,22,.42)!important; border-radius:999px!important; background:linear-gradient(180deg,rgba(26,17,10,.94),rgba(7,7,7,.97))!important; color:#ff8216!important; padding:6px 10px!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 4px 10px rgba(0,0,0,.22)!important; font-weight:800!important; } #appScreen .home-section header button:active{transform:translateY(1px)!important} /* --- Nouveautés --- */ #appScreen .home-news-list{ gap:10px!important; padding:2px 1px 5px!important; } #appScreen .home-news-card{ position:relative!important; isolation:isolate!important; border:1px solid rgba(255,126,22,.58)!important; border-radius:15px!important; background: radial-gradient(circle at 50% 0%,rgba(255,126,22,.08),transparent 44%), linear-gradient(180deg,rgba(16,16,16,.99),rgba(4,4,4,.995))!important; box-shadow: inset 0 0 0 1px rgba(255,162,77,.035), inset 0 0 18px rgba(255,101,0,.025), 0 7px 16px rgba(0,0,0,.30)!important; transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease!important; } #appScreen .home-news-card::after{ content:""; position:absolute; left:16%;right:16%;bottom:3px; height:1px; background:linear-gradient(90deg,transparent,rgba(255,125,0,.78),transparent); box-shadow:0 0 7px rgba(255,101,0,.18); pointer-events:none; } #appScreen .home-news-poster{ position:relative!important; background:linear-gradient(180deg,#141414,#080808)!important; border-bottom:1px solid rgba(255,126,22,.18)!important; } #appScreen .home-news-poster::after{ content:""; position:absolute; inset:auto 0 0 0; height:24%; pointer-events:none; background:linear-gradient(180deg,transparent,rgba(0,0,0,.48)); } #appScreen .home-news-copy{ padding:8px 8px 10px!important; background:linear-gradient(180deg,rgba(14,14,14,.94),rgba(6,6,6,.98))!important; } #appScreen .home-news-copy strong{ color:#f6f6f6!important; font-weight:800!important; } #appScreen .home-news-copy small{ color:#aaa!important; } #appScreen .home-news-card:hover, #appScreen .home-news-card:focus-visible{ border-color:rgba(255,138,37,.9)!important; box-shadow: inset 0 0 0 1px rgba(255,162,77,.05), inset 0 0 20px rgba(255,101,0,.04), 0 0 0 1px rgba(255,101,0,.05), 0 9px 20px rgba(0,0,0,.34)!important; outline:none!important; } #appScreen .home-news-card:active{transform:translateY(1px) scale(.992)!important} @media(max-width:520px){ #appScreen .home-action-card{ border-radius:16px!important; padding:9px!important; } #appScreen .home-action-card>b{ width:38px!important; height:38px!important; border-radius:12px!important; font-size:21px!important; } #appScreen .home-action-card i{ width:27px!important; height:27px!important; font-size:19px!important; } #appScreen .home-admin-pending{ border-radius:15px!important; gap:8px!important; } #appScreen .home-section header button{ padding:5px 8px!important; font-size:11px!important; } #appScreen .home-news-card{ border-radius:13px!important; } } /* ====================================================================== 17/08/2026 — V113 : barre de navigation officielle PREMIUM validée. Indépendante des panneaux : même géométrie/position sur TOUS les écrans. ====================================================================== */ :root{ --ttf-nav-bottom:max(7px, env(safe-area-inset-bottom, 0px)); --ttf-nav-height:clamp(74px,16vw,86px); --ttf-nav-side:clamp(10px,2.7vw,14px); --ttf-nav-radius:clamp(24px,6vw,30px); } .canonical-bottom-nav, #detailModal .detail-canonical-nav{ position:fixed!important; left:50%!important; right:auto!important; bottom:var(--ttf-nav-bottom)!important; transform:translateX(-50%)!important; width:min(calc(100vw - (2 * var(--ttf-nav-side))), 424px)!important; height:var(--ttf-nav-height)!important; min-height:var(--ttf-nav-height)!important; max-height:var(--ttf-nav-height)!important; display:grid!important; grid-template-columns:repeat(5,minmax(0,1fr))!important; align-items:center!important; margin:0!important; padding:6px 8px!important; overflow:visible!important; border:1px solid rgba(255,130,28,.72)!important; border-radius:var(--ttf-nav-radius)!important; background: radial-gradient(ellipse at 50% 0%,rgba(255,132,30,.10),transparent 58%), linear-gradient(180deg,rgba(22,20,18,.985),rgba(5,5,5,.995))!important; box-shadow: inset 0 1px 0 rgba(255,221,185,.10), inset 0 0 22px rgba(255,105,0,.045), 0 0 0 1px rgba(255,91,0,.04), 0 0 17px rgba(255,103,0,.14), 0 12px 28px rgba(0,0,0,.72)!important; backdrop-filter:blur(14px) saturate(1.05)!important; -webkit-backdrop-filter:blur(14px) saturate(1.05)!important; z-index:2000!important; pointer-events:auto!important; } .canonical-bottom-nav::before, #detailModal .detail-canonical-nav::before{ content:""!important; position:absolute!important; left:22px!important;right:22px!important;top:0!important;height:1px!important; border-radius:999px!important; background:linear-gradient(90deg,transparent,rgba(255,199,135,.58),rgba(255,126,22,.95),rgba(255,199,135,.58),transparent)!important; box-shadow:0 0 10px rgba(255,112,0,.30)!important; pointer-events:none!important; } .canonical-bottom-nav .cbn-item, #detailModal .detail-canonical-nav .cbn-item{ position:relative!important; min-width:0!important; height:100%!important; margin:0!important; padding:5px 1px 4px!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:5px!important; border:0!important; border-radius:18px!important; background:transparent!important; color:#a9a9a9!important; font-family:Arial,sans-serif!important; font-size:clamp(10px,2.5vw,12px)!important; font-weight:500!important; line-height:1!important; text-align:center!important; text-shadow:0 1px 2px rgba(0,0,0,.8)!important; transition:color .16s ease,transform .12s ease,background .16s ease!important; } .canonical-bottom-nav .cbn-item .cbn-icon, #detailModal .detail-canonical-nav .cbn-item .cbn-icon{ position:relative!important; z-index:1!important; display:grid!important; place-items:center!important; width:30px!important; height:27px!important; font-size:clamp(21px,5.1vw,25px)!important; line-height:1!important; color:#aaa!important; filter:drop-shadow(0 1px 1px #000)!important; } .canonical-bottom-nav .cbn-item.active, .canonical-bottom-nav .cbn-home.active, #detailModal .detail-canonical-nav .cbn-item.active{ color:#ff7900!important; background:radial-gradient(circle at 50% 42%,rgba(255,118,0,.10),transparent 66%)!important; text-shadow:0 0 10px rgba(255,112,0,.22)!important; } .canonical-bottom-nav .cbn-item.active .cbn-icon, #detailModal .detail-canonical-nav .cbn-item.active .cbn-icon{ color:#ff7900!important; filter:drop-shadow(0 0 7px rgba(255,116,0,.54))!important; } /* Accueil est actif sur son écran même si une ancienne règle locale subsiste. */ #appScreen .canonical-bottom-nav .cbn-home{color:#ff7900!important;background:radial-gradient(circle at 50% 42%,rgba(255,118,0,.10),transparent 66%)!important} #appScreen .canonical-bottom-nav .cbn-home .cbn-icon{color:#ff7900!important;filter:drop-shadow(0 0 7px rgba(255,116,0,.54))!important} .canonical-bottom-nav .cbn-item:active{transform:translateY(1px) scale(.97)!important} .canonical-bottom-nav .cbn-badge{ position:absolute!important; top:2px!important; left:50%!important; margin-left:10px!important; min-width:17px!important; height:17px!important; padding:0 4px!important; display:grid!important; place-items:center!important; border:1px solid rgba(255,145,55,.65)!important; border-radius:999px!important; background:#1b0c04!important; color:#ff7a00!important; box-shadow:0 0 8px rgba(255,98,0,.18)!important; font-size:9px!important; font-weight:800!important; } .canonical-bottom-nav .cbn-badge.hidden{display:none!important} @media(max-width:430px){ .canonical-bottom-nav,#detailModal .detail-canonical-nav{width:calc(100vw - 20px)!important;padding-left:5px!important;padding-right:5px!important} .canonical-bottom-nav .cbn-item,#detailModal .detail-canonical-nav .cbn-item{font-size:10px!important;gap:4px!important} } html.ttf-ios.ios-keyboard-open .canonical-bottom-nav, html.ttf-ios.ios-keyboard-open #detailModal .detail-canonical-nav{ transform:translate(-50%,calc(100% + env(safe-area-inset-bottom,0px) + 20px))!important; } /* ---------- V113 : fenêtre premium d'édition du compte ---------- */ .account-edit-overlay{ position:fixed;inset:0;z-index:5000;display:grid;place-items:center;padding:18px; background:rgba(0,0,0,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); } .account-edit-overlay.hidden{display:none!important} .account-edit-card{ position:relative;width:min(92vw,410px);padding:24px 20px 19px;border:1px solid rgba(255,122,19,.70);border-radius:20px; background:radial-gradient(circle at 50% 0%,rgba(255,123,19,.12),transparent 52%),linear-gradient(180deg,#17120e,#070707 54%,#030303); box-shadow:inset 0 1px 0 rgba(255,224,191,.08),0 0 22px rgba(255,104,0,.12),0 20px 50px rgba(0,0,0,.65);color:#fff; } .account-edit-card::before{content:"";position:absolute;left:24px;right:24px;top:0;height:1px;background:linear-gradient(90deg,transparent,#ff993a,transparent);box-shadow:0 0 8px rgba(255,122,0,.24)} .account-edit-close{position:absolute;right:12px;top:10px;width:34px;height:34px;border:0;background:transparent;color:#aaa;font-size:26px;cursor:pointer} .account-edit-kicker{color:#ff7900;font-size:11px;font-weight:900;letter-spacing:.16em;margin-bottom:5px} .account-edit-card h2{margin:0;color:#fff;font-size:22px;line-height:1.1}.account-edit-card>p{margin:8px 0 18px;color:#aaa;font-size:12px;line-height:1.45} .account-edit-field label,.account-edit-password-fields label{display:flex;flex-direction:column;gap:7px;margin:0 0 12px;color:#d5d5d5;font-size:12px;font-weight:700} .account-edit-field input,.account-edit-password-fields input{ width:100%;height:48px;padding:0 13px;border:1px solid rgba(255,124,22,.48);border-radius:12px;background:#080808;color:#fff;font-size:16px;outline:none; box-shadow:inset 0 0 14px rgba(255,105,0,.025); } .account-edit-field input:focus,.account-edit-password-fields input:focus{border-color:#ff7a00;box-shadow:0 0 0 1px rgba(255,122,0,.15),0 0 12px rgba(255,105,0,.10)} .account-edit-error{min-height:18px;margin:2px 0 10px;color:#ff6363;font-size:11px} .account-edit-actions{display:grid;grid-template-columns:1fr 1.15fr;gap:9px}.account-edit-actions button{min-height:43px;border-radius:12px;font-weight:900;font-size:11px;letter-spacing:.04em} #accountEditCancel{border:1px solid #444;background:#0b0b0b;color:#bbb}#accountEditSave{border:1px solid #ff7a00;background:linear-gradient(180deg,#ff7b00,#dc5300);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 7px 16px rgba(0,0,0,.28)} #profileAvatarDynamic{cursor:pointer} /* ---------- Bibliothèque : vrais filtres avancés + chargement progressif ---------- */ #catalogScreen .catalog-advanced-filters{ display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end;margin-top:-3px;padding:10px;border:1px solid rgba(255,121,0,.32);border-radius:13px; background:linear-gradient(180deg,rgba(18,15,12,.98),rgba(6,6,6,.99));box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 8px 18px rgba(0,0,0,.24); } #catalogScreen .catalog-advanced-filters.hidden{display:none!important} #catalogScreen .catalog-advanced-filters label{display:flex;flex-direction:column;gap:5px;color:#aaa;font-size:9px;text-transform:uppercase;letter-spacing:.08em} #catalogScreen .catalog-advanced-filters select{height:38px;padding:0 34px 0 11px;border:1px solid rgba(255,123,0,.48);border-radius:10px;background:#080808;color:#fff;font-size:12px} #catalogScreen #catalogResetFilters{height:38px;padding:0 11px;border:1px solid rgba(255,123,0,.45);border-radius:10px;background:#0a0a0a;color:#ff850f;font-weight:800;font-size:9px} #catalogScreen .catalog-load-more{width:100%;min-height:44px;margin:7px 0 14px;border:1px solid rgba(255,123,0,.7);border-radius:12px;background:linear-gradient(180deg,#15100b,#060606);color:#ff870f;font-weight:900;letter-spacing:.05em} #catalogScreen .catalog-context{display:flex;align-items:center;justify-content:space-between;gap:8px} #catalogScreen .catalog-context>span:first-child{display:flex;flex-direction:column;min-width:0} #catalogScreen .catalog-context-back{flex:0 0 auto;border:1px solid rgba(255,123,0,.55);border-radius:999px;background:#090909;color:#ff850f;padding:7px 10px;font-size:9px;font-weight:800} /* ---------- Mon activité : période réellement interactive ---------- */ #activityScreen .activity-period{display:flex!important;align-items:center!important;gap:5px!important} #activityScreen .activity-period select{max-width:132px;border:0!important;background:transparent!important;color:#c26cff!important;font:inherit!important;font-size:inherit!important;text-align:right!important;outline:none!important;padding:0 2px!important} #activityScreen .activity-period select option{background:#0b0b0b;color:#fff} /* V113 — onglet actif cohérent, même quand les vieux HTML n'ont pas la classe active. */ #searchScreen .canonical-bottom-nav .cbn-search, #catalogScreen .canonical-bottom-nav .cbn-library, #requestScreen .canonical-bottom-nav .cbn-requests, #myRequestsScreen .canonical-bottom-nav .cbn-requests, #profileScreen .canonical-bottom-nav .cbn-profile, #accountScreen .canonical-bottom-nav .cbn-profile, #notificationsScreen .canonical-bottom-nav .cbn-profile, #activityScreen .canonical-bottom-nav .cbn-profile, #adminScreen .canonical-bottom-nav .cbn-profile, #rolesScreen .canonical-bottom-nav .cbn-profile, #addUserScreen .canonical-bottom-nav .cbn-profile, #editUserScreen .canonical-bottom-nav .cbn-profile, #resetPasswordScreen .canonical-bottom-nav .cbn-profile, #embyConfigScreen .canonical-bottom-nav .cbn-profile, #newsletterSettingsScreen .canonical-bottom-nav .cbn-profile, #adminRequestDetailScreen .canonical-bottom-nav .cbn-profile{ color:#ff7900!important; background:radial-gradient(circle at 50% 42%,rgba(255,118,0,.10),transparent 66%)!important; text-shadow:0 0 10px rgba(255,112,0,.22)!important; } #searchScreen .canonical-bottom-nav .cbn-search .cbn-icon, #catalogScreen .canonical-bottom-nav .cbn-library .cbn-icon, #requestScreen .canonical-bottom-nav .cbn-requests .cbn-icon, #myRequestsScreen .canonical-bottom-nav .cbn-requests .cbn-icon, #profileScreen .canonical-bottom-nav .cbn-profile .cbn-icon, #accountScreen .canonical-bottom-nav .cbn-profile .cbn-icon, #notificationsScreen .canonical-bottom-nav .cbn-profile .cbn-icon, #activityScreen .canonical-bottom-nav .cbn-profile .cbn-icon, #adminScreen .canonical-bottom-nav .cbn-profile .cbn-icon, #rolesScreen .canonical-bottom-nav .cbn-profile .cbn-icon, #addUserScreen .canonical-bottom-nav .cbn-profile .cbn-icon, #editUserScreen .canonical-bottom-nav .cbn-profile .cbn-icon, #resetPasswordScreen .canonical-bottom-nav .cbn-profile .cbn-icon, #embyConfigScreen .canonical-bottom-nav .cbn-profile .cbn-icon, #newsletterSettingsScreen .canonical-bottom-nav .cbn-profile .cbn-icon, #adminRequestDetailScreen .canonical-bottom-nav .cbn-profile .cbn-icon{ color:#ff7900!important; filter:drop-shadow(0 0 7px rgba(255,116,0,.54))!important; } .canonical-bottom-nav .cbn-icon svg, #detailModal .detail-canonical-nav .cbn-icon svg{ width:24px!important;height:24px!important;display:block!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important; } #accountScreen .account-preferences .static-row .account-side-value{font-size:clamp(8px,2vw,10px)!important;max-width:38%!important;white-space:normal!important;text-align:right!important;line-height:1.15!important;color:#bdbdbd!important} /* ============================================================ 25/08/2026 — V114 : panneau « Quoi de neuf ? » ============================================================ */ body.whats-new-open{overflow:hidden!important} .whats-new-overlay{ position:fixed;inset:0;z-index:12000;display:grid;place-items:center;padding:18px max(16px,env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); background:rgba(0,0,0,.84);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); animation:whatsNewFadeIn .18s ease-out both; } .whats-new-overlay.whats-new-leaving{animation:whatsNewFadeOut .18s ease-in both} @keyframes whatsNewFadeIn{from{opacity:0}to{opacity:1}} @keyframes whatsNewFadeOut{from{opacity:1}to{opacity:0}} .whats-new-card{ position:relative;width:min(92vw,410px);max-height:min(86dvh,760px);overflow:auto;padding:20px 18px 18px;border:1px solid rgba(255,119,16,.78);border-radius:22px;color:#fff; background: radial-gradient(circle at 50% -8%,rgba(255,143,40,.17),transparent 37%), radial-gradient(circle at 10% 76%,rgba(255,94,0,.06),transparent 34%), linear-gradient(180deg,#17110d 0%,#090807 44%,#030303 100%); box-shadow:inset 0 1px 0 rgba(255,239,215,.09),inset 0 0 30px rgba(255,106,0,.035),0 0 28px rgba(255,92,0,.16),0 28px 70px rgba(0,0,0,.72); scrollbar-width:none;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch; } .whats-new-card::-webkit-scrollbar{display:none} .whats-new-card::before{content:"";position:absolute;left:28px;right:28px;top:0;height:1px;background:linear-gradient(90deg,transparent,#ffc276,transparent);box-shadow:0 0 12px rgba(255,133,33,.35)} .whats-new-close{position:absolute;z-index:2;right:10px;top:9px;width:36px;height:36px;border:0;background:transparent;color:#aaa;font-size:27px;line-height:1;cursor:pointer} .whats-new-close:focus-visible{outline:1px solid #ff7a00;border-radius:50%} .whats-new-brand{display:flex;align-items:center;gap:11px;padding:0 36px 13px 0} .whats-new-brand img{width:46px;height:46px;object-fit:contain;flex:0 0 46px;filter:drop-shadow(0 2px 5px rgba(0,0,0,.6))} .whats-new-brand>div{display:flex;flex-direction:column;min-width:0} .whats-new-brand strong{font-size:24px;line-height:1;font-weight:950;letter-spacing:.015em;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.6)} .whats-new-brand strong span{color:#ff7100} .whats-new-brand small{margin-top:6px;color:#c7c0b9;font-size:9px;line-height:1.25;letter-spacing:.025em} .whats-new-rule{height:1px;margin:0 0 15px;background:linear-gradient(90deg,transparent,rgba(255,122,17,.72),transparent);box-shadow:0 0 6px rgba(255,116,0,.18)} .whats-new-heading{text-align:center;padding:0 5px 10px} .whats-new-kicker{display:flex;justify-content:center;align-items:center;gap:6px;margin-bottom:8px} .whats-new-kicker span,.whats-new-kicker b{display:inline-flex;align-items:center;min-height:22px;padding:0 8px;border-radius:999px;border:1px solid rgba(255,117,14,.42);background:#0a0806;color:#ff850c;font-size:8px;font-weight:900;letter-spacing:.08em} .whats-new-kicker b{color:#b9b9b9;border-color:#333;font-weight:800} .whats-new-heading h2{margin:0;color:#fff;font-size:clamp(25px,7vw,31px);line-height:1.04;font-weight:950;letter-spacing:-.02em;text-shadow:0 0 18px rgba(255,104,0,.12)} .whats-new-heading p{margin:8px auto 0;max-width:330px;color:#b7b1ab;font-size:11px;line-height:1.42} .whats-new-list{display:grid;gap:8px;margin:3px 0 15px} .whats-new-item{display:grid;grid-template-columns:45px minmax(0,1fr);gap:10px;align-items:center;min-height:70px;padding:10px 11px;border:1px solid rgba(255,112,10,.25);border-radius:14px;background:linear-gradient(120deg,rgba(20,16,12,.94),rgba(5,5,5,.96));box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 7px 14px rgba(0,0,0,.22)} .whats-new-item-icon{width:42px;height:42px;display:grid;place-items:center;border:1px solid rgba(255,121,16,.58);border-radius:50%;color:#ff7a00;background:radial-gradient(circle at 50% 0%,rgba(255,120,16,.13),transparent 60%),#090807;box-shadow:inset 0 0 12px rgba(255,101,0,.04)} .whats-new-item-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .whats-new-item strong{display:block;margin-bottom:3px;color:#fff;font-size:12px;line-height:1.2} .whats-new-item p{margin:0;color:#aaa39c;font-size:9.5px;line-height:1.35} .whats-new-cta{position:relative;width:100%;min-height:48px;border:1px solid #ff8517;border-radius:13px;background:radial-gradient(circle at 50% 0%,rgba(255,218,173,.25),transparent 45%),linear-gradient(180deg,#ff7a00,#df5400);color:#fff;font-size:12px;font-weight:950;letter-spacing:.08em;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 16px rgba(255,100,0,.14),0 9px 18px rgba(0,0,0,.32);cursor:pointer} .whats-new-cta:active{transform:translateY(1px)} .whats-new-cta:focus-visible{outline:2px solid rgba(255,181,95,.75);outline-offset:2px} .whats-new-footnote{margin:11px 8px 0;text-align:center;color:#777;font-size:8.5px;line-height:1.35}.whats-new-footnote strong{color:#a9a9a9} #profileScreen .profile-whatsnew-card{border-color:rgba(255,121,0,.38)!important} #profileScreen .profile-whatsnew-icon{padding:3px!important;overflow:hidden!important;border-color:rgba(255,129,30,.55)!important} #profileScreen .profile-whatsnew-icon img{width:100%;height:100%;object-fit:contain;display:block} #profileScreen .profile-whatsnew-card .profile-card-copy strong{color:#ff820a!important} @media(max-width:370px){ .whats-new-overlay{padding:10px 10px calc(10px + env(safe-area-inset-bottom))} .whats-new-card{width:100%;max-height:90dvh;padding:17px 14px 15px;border-radius:18px} .whats-new-brand img{width:42px;height:42px;flex-basis:42px} .whats-new-brand strong{font-size:21px}.whats-new-brand small{font-size:8px} .whats-new-item{min-height:64px;padding:8px 9px}.whats-new-item-icon{width:38px;height:38px}.whats-new-list{gap:6px} } /* ====================================================================== 25/08/2026 — V115 : identité visuelle officielle TonTonFlix. Le logo validé est superposé en HTML/CSS : aucun panneau de référence n'est régénéré ni retouché. Il remplace le clap lorsqu'il sert de marque. ====================================================================== */ .boot-splash{ position:fixed;inset:0;z-index:20000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px; padding:max(22px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left)); background:radial-gradient(circle at 50% 42%,rgba(255,117,0,.11),transparent 32%),#000; opacity:1;transition:opacity .2s ease; } .boot-splash.boot-splash-leaving{opacity:0;pointer-events:none} .boot-brand{display:flex;align-items:center;justify-content:center;gap:10px} .boot-brand img{width:clamp(48px,12vw,66px);height:clamp(48px,12vw,66px);object-fit:contain;border-radius:20%;filter:drop-shadow(0 2px 5px rgba(0,0,0,.65));} .boot-title{font-size:clamp(29px,8vw,48px);line-height:1;font-weight:950;letter-spacing:-.035em;color:#fff;text-shadow:0 3px 18px rgba(0,0,0,.7)} .boot-title span{color:#ff7100} .boot-slogan{color:#c9c2bb;font-size:clamp(11px,2.8vw,15px);font-style:italic;letter-spacing:.015em} .boot-version{position:absolute;right:max(15px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));padding:5px 9px;border:1px solid rgba(255,112,0,.42);border-radius:999px;background:rgba(10,8,6,.82);color:#ff8617;font-size:10px;font-weight:800;letter-spacing:.05em} #authScreen .auth-brand-logo{ /* V116 : couvre réellement le clap imprimé dans le panneau, au lieu d'être décalé à droite. */ position:absolute;z-index:18;left:75%;top:2.82%;width:14.8%;height:auto;display:block;object-fit:contain; filter:drop-shadow(0 1px 3px rgba(0,0,0,.62));pointer-events:none; } #appScreen .home-hero .home-brand-logo{display:none!important} .whats-new-brand img,#profileScreen .profile-whatsnew-icon img{border-radius:20%} @media(prefers-reduced-motion:reduce){.boot-splash{transition:none}} /* ====================================================================== 25/08/2026 — V116 : correctif intégration du logo officiel. Recalage exact sur les claps de marque des panneaux Connexion/Accueil, suppression des halos épais de V115 et présence plus discrète ailleurs. ====================================================================== */ /* ====================================================================== 25/08/2026 — V117 : intégration propre du logo sur le bandeau Accueil. Seul le bandeau haut 02_accueil_fond.png est retouché localement : le clap de marque est retiré et le logo officiel est intégré à sa place. Aucun autre élément de l'Accueil (contenu, cartes, décor, navigation) ne change. ====================================================================== */ /* ====================================================================== 25/08/2026 — V118 : page Connexion validée intégrée telle quelle. Aucun visuel n'est régénéré. Le PNG validé remplace 01_connexion.png. Les contrôles HTML restent fonctionnels via des hotspots transparents. L'Accueil et la navigation ne sont pas modifiés. ====================================================================== */ #authScreen.auth-reference{ min-height:100dvh!important; aspect-ratio:auto!important; background-image:url('/assets/reference/01_connexion.png')!important; background-size:auto 100dvh!important; background-position:top center!important; background-repeat:no-repeat!important; } #authScreen .auth-brand-logo, #authScreen .auth-version{display:none!important} /* Le formulaire suit le même canevas que le PNG (967 × 1626), centré. */ #authScreen .login-hotspots{ position:absolute!important; inset:auto!important; top:0!important; left:50%!important; width:59.471dvh!important; /* 967 / 1626 × 100 */ height:100dvh!important; transform:translateX(-50%)!important; margin:0!important; pointer-events:none!important; z-index:20!important; } #authScreen .login-hotspots::before, #authScreen .login-hotspots::after{display:none!important} /* Les champs ne recouvrent que la zone de texte imprimée dans le PNG. */ #authScreen .login-hotspots input{ position:absolute!important; left:23.0%!important; width:49.5%!important; height:3.05%!important; border:0!important; border-radius:2px!important; outline:0!important; background:rgba(12,12,12,.985)!important; color:#dedede!important; caret-color:#ff7900!important; box-shadow:none!important; text-shadow:none!important; padding:0 1.2%!important; font-family:Arial,sans-serif!important; font-size:clamp(14px,1.82dvh,20px)!important; font-weight:400!important; line-height:1!important; pointer-events:auto!important; appearance:none!important; -webkit-appearance:none!important; } #authScreen .login-hotspots input::placeholder{color:#8f8f8f!important;opacity:1!important} #authScreen .login-hotspots input:focus{ background:rgba(12,12,12,.995)!important; box-shadow:none!important; border:0!important; } #authScreen #loginUsername{top:80.32%!important} #authScreen #loginPassword{top:84.13%!important;padding-right:1.2%!important} /* L'œil, le bouton et le lien existent déjà graphiquement dans le PNG : les éléments HTML ne servent ici que de zones tactiles. */ #authScreen .eye-btn{ position:absolute!important; left:73.7%!important; right:auto!important; top:84.10%!important; width:7.2%!important; height:3.25%!important; border:0!important; background:transparent!important; color:transparent!important; box-shadow:none!important; text-shadow:none!important; padding:0!important; pointer-events:auto!important; cursor:pointer!important; } #authScreen .eye-btn span{color:transparent!important} #authScreen .login-submit{ position:absolute!important; left:17.35%!important; right:auto!important; top:88.15%!important; width:63.8%!important; height:3.60%!important; border:0!important; border-radius:0!important; background:transparent!important; color:transparent!important; box-shadow:none!important; text-shadow:none!important; padding:0!important; pointer-events:auto!important; cursor:pointer!important; } #authScreen .login-submit::before{display:none!important} #authScreen .login-submit span{color:transparent!important} #authScreen .forgot-btn{ position:absolute!important; left:34.5%!important; right:auto!important; top:91.95%!important; width:31.0%!important; height:2.45%!important; border:0!important; border-radius:0!important; background:transparent!important; color:transparent!important; box-shadow:none!important; text-shadow:none!important; padding:0!important; pointer-events:auto!important; cursor:pointer!important; } #authScreen .form-error{ position:absolute!important; left:24%!important; right:24%!important; top:94.0%!important; min-height:0!important; max-height:none!important; margin:0!important; color:#ff7a00!important; background:rgba(0,0,0,.78)!important; border-radius:6px!important; font-size:clamp(9px,1.2dvh,13px)!important; line-height:1.2!important; text-align:center!important; overflow:visible!important; pointer-events:none!important; } /* Sur un écran exceptionnellement large, on conserve le PNG entier sans l'étirer. */ @media (min-aspect-ratio: 967/1626){ #authScreen.auth-reference{background-size:100% auto!important;min-height:168.15vw!important} #authScreen .login-hotspots{width:100%!important;height:168.15vw!important} } /* ====================================================================== 25/08/2026 — V119 : affichage intégral de la page Connexion validée. Correction CSS uniquement : le PNG V118 n'est ni recadré ni régénéré. Il occupe exactement la surface de l'écran, et les hotspots suivent ce même repère plein écran. Aucun autre écran n'est modifié. ====================================================================== */ #authScreen.auth-reference{ width:100%!important; height:100dvh!important; min-height:100dvh!important; max-height:100dvh!important; aspect-ratio:auto!important; overflow:hidden!important; background-image:url('/assets/reference/01_connexion.png')!important; background-size:100% 100%!important; background-position:0 0!important; background-repeat:no-repeat!important; } #authScreen .login-hotspots{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; transform:none!important; margin:0!important; } @media (min-aspect-ratio: 967/1626){ #authScreen.auth-reference{ width:100%!important; height:100dvh!important; min-height:100dvh!important; max-height:100dvh!important; background-size:100% 100%!important; } #authScreen .login-hotspots{ width:100%!important; height:100%!important; } } /* ====================================================================== 25/08/2026 — V120 : correction finale de l'écran Connexion. - Le PNG validé conserve son ratio natif 967×1626 : aucun étirement. - Le formulaire utilise exactement le même repère que le PNG. - Les champs réels se fondent dans les champs imprimés, y compris avec l'autoremplissage Chrome/Safari, sans gros rectangles noirs visibles. - Aucun autre écran n'est modifié. ====================================================================== */ #authScreen.auth-reference{ width:100%!important; height:auto!important; min-height:0!important; max-height:none!important; aspect-ratio:967 / 1626!important; overflow:hidden!important; background-image:url('/assets/reference/01_connexion.png')!important; background-size:100% auto!important; background-position:top center!important; background-repeat:no-repeat!important; } #authScreen .login-hotspots{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; transform:none!important; margin:0!important; pointer-events:none!important; z-index:20!important; } #authScreen .login-hotspots input{ position:absolute!important; left:22.0%!important; width:50.0%!important; height:2.75%!important; margin:0!important; padding:0 1.15%!important; border:0!important; border-radius:0!important; outline:0!important; background:rgba(10,10,10,.22)!important; -webkit-backdrop-filter:blur(5px) brightness(.88)!important; backdrop-filter:blur(5px) brightness(.88)!important; color:#dedede!important; caret-color:#ff7900!important; box-shadow:none!important; text-shadow:none!important; font-family:Arial,sans-serif!important; font-size:clamp(16px,3.15vw,22px)!important; font-weight:400!important; line-height:1!important; appearance:none!important; -webkit-appearance:none!important; pointer-events:auto!important; } #authScreen #loginUsername{top:80.63%!important} #authScreen #loginPassword{top:84.48%!important;padding-right:1.15%!important} #authScreen .login-hotspots input::placeholder{ color:#8d8d8d!important; opacity:1!important; } #authScreen .login-hotspots input:focus{ background:rgba(10,10,10,.26)!important; box-shadow:none!important; } #authScreen .login-hotspots input:-webkit-autofill, #authScreen .login-hotspots input:-webkit-autofill:hover, #authScreen .login-hotspots input:-webkit-autofill:focus, #authScreen .login-hotspots input:-webkit-autofill:active{ -webkit-text-fill-color:#dedede!important; caret-color:#ff7900!important; -webkit-box-shadow:0 0 0 1000px rgba(10,10,10,.14) inset!important; box-shadow:0 0 0 1000px rgba(10,10,10,.14) inset!important; border:0!important; transition:background-color 9999s ease-out 0s!important; } #authScreen .eye-btn{ left:73.8%!important; right:auto!important; top:84.36%!important; width:7.2%!important; height:3.05%!important; } #authScreen .login-submit{ left:17.35%!important; right:auto!important; top:88.15%!important; width:63.8%!important; height:3.60%!important; } #authScreen .forgot-btn{ left:34.5%!important; right:auto!important; top:91.95%!important; width:31.0%!important; height:2.45%!important; } #authScreen .form-error{ left:24%!important; right:24%!important; top:94.0%!important; } /* ====================================================================== 25/08/2026 — V121 : écran Connexion adaptatif, sans étirement. - Le visuel validé conserve son ratio natif 967×1626. - Il remplit la hauteur du téléphone (recadrage latéral seulement si le téléphone est plus étroit que le ratio source) : aucun étirement. - Le formulaire suit EXACTEMENT le même canevas que l'image rendue. - Les champs sont transparents à vide ; au focus/avec une valeur, leur fond reprend la teinte intérieure du champ imprimé pour éviter les rectangles noirs de V119/V120. - Aucun autre écran n'est concerné. ====================================================================== */ #authScreen.auth-reference{ width:100%!important; height:100dvh!important; min-height:100dvh!important; max-height:100dvh!important; aspect-ratio:auto!important; overflow:hidden!important; background-image:url('/assets/reference/01_connexion.png')!important; background-size:auto 100dvh!important; background-position:top center!important; background-repeat:no-repeat!important; } /* Canevas du PNG rendu à hauteur écran : 967 / 1626 = 0,594711... */ #authScreen .login-hotspots{ position:absolute!important; inset:auto!important; top:0!important; left:50%!important; width:59.4710947dvh!important; height:100dvh!important; transform:translateX(-50%)!important; margin:0!important; pointer-events:none!important; z-index:20!important; } #authScreen .login-hotspots input{ left:22.0%!important; width:50.0%!important; height:2.75%!important; margin:0!important; padding:0 1.15%!important; border:0!important; border-radius:2px!important; outline:0!important; background:transparent!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; color:#dedede!important; caret-color:#ff7900!important; box-shadow:none!important; text-shadow:none!important; font-family:Arial,sans-serif!important; font-size:clamp(16px,1.82dvh,20px)!important; font-weight:400!important; line-height:1!important; appearance:none!important; -webkit-appearance:none!important; pointer-events:auto!important; } /* Le placeholder est déjà imprimé dans le PNG : on ne le redessine pas. */ #authScreen .login-hotspots input::placeholder{ color:transparent!important; opacity:0!important; } /* Masque discret uniquement quand l'utilisateur saisit/édite une valeur. */ #authScreen .login-hotspots input:focus, #authScreen .login-hotspots input:not(:placeholder-shown){ background:rgb(17,17,17)!important; box-shadow:none!important; } #authScreen .login-hotspots input:-webkit-autofill, #authScreen .login-hotspots input:-webkit-autofill:hover, #authScreen .login-hotspots input:-webkit-autofill:focus, #authScreen .login-hotspots input:-webkit-autofill:active{ -webkit-text-fill-color:#dedede!important; caret-color:#ff7900!important; -webkit-box-shadow:0 0 0 1000px rgb(17,17,17) inset!important; box-shadow:0 0 0 1000px rgb(17,17,17) inset!important; transition:background-color 9999s ease-out 0s!important; } #authScreen #loginUsername{top:80.63%!important} #authScreen #loginPassword{top:84.48%!important;padding-right:1.15%!important} #authScreen .eye-btn{left:73.8%!important;top:84.36%!important;width:7.2%!important;height:3.05%!important} #authScreen .login-submit{left:17.35%!important;top:88.15%!important;width:63.8%!important;height:3.60%!important} #authScreen .forgot-btn{left:34.5%!important;top:91.95%!important;width:31%!important;height:2.45%!important} #authScreen .form-error{left:24%!important;right:24%!important;top:94%!important} /* V121.1 — fondu des zones de saisie pour qu'aucun bord de masque ne se lise. */ #authScreen .login-hotspots input:focus, #authScreen .login-hotspots input:not(:placeholder-shown){ background:linear-gradient(90deg,rgba(17,17,17,0) 0%,rgb(17,17,17) 3%,rgb(17,17,17) 97%,rgba(17,17,17,0) 100%)!important; } /* ====================================================================== 25/08/2026 — V123 : recalage connexion sur le NOUVEAU 01_connexion.png. Le nouveau visuel source mesure 851 × 1847. La V122 conservait encore le canevas 967 × 1626 de l'ancien visuel : les zones HTML ne correspondaient donc plus aux champs/boutons visibles. Aucun visuel ni autre écran modifié. ====================================================================== */ #authScreen.auth-reference{ width:100%!important; height:100dvh!important; min-height:100dvh!important; max-height:100dvh!important; aspect-ratio:auto!important; overflow:hidden!important; background-image:url('/assets/reference/01_connexion.png')!important; background-size:auto 100dvh!important; background-position:top center!important; background-repeat:no-repeat!important; } /* Même canevas que le PNG rendu : 851 / 1847 = 0,460747... */ #authScreen .login-hotspots{ position:absolute!important; inset:auto!important; top:0!important; left:50%!important; width:46.0747158dvh!important; height:100dvh!important; transform:translateX(-50%)!important; margin:0!important; pointer-events:none!important; z-index:20!important; } /* Zones de saisie placées sur les champs imprimés du nouveau PNG. */ #authScreen .login-hotspots input{ position:absolute!important; margin:0!important; border:0!important; outline:0!important; border-radius:2px!important; background:transparent!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; color:#dedede!important; caret-color:#ff7900!important; box-shadow:none!important; text-shadow:none!important; padding:0 .7%!important; font-family:Arial,sans-serif!important; font-size:clamp(16px,1.9dvh,21px)!important; font-weight:400!important; line-height:1!important; pointer-events:auto!important; appearance:none!important; -webkit-appearance:none!important; } #authScreen .login-hotspots input::placeholder{color:transparent!important;opacity:0!important} #authScreen .login-hotspots input:focus, #authScreen .login-hotspots input:not(:placeholder-shown){ background:linear-gradient(90deg,rgba(17,17,17,0) 0%,rgb(17,17,17) 3%,rgb(17,17,17) 97%,rgba(17,17,17,0) 100%)!important; } #authScreen .login-hotspots input:-webkit-autofill, #authScreen .login-hotspots input:-webkit-autofill:hover, #authScreen .login-hotspots input:-webkit-autofill:focus, #authScreen .login-hotspots input:-webkit-autofill:active{ -webkit-text-fill-color:#dedede!important; caret-color:#ff7900!important; -webkit-box-shadow:0 0 0 1000px rgb(17,17,17) inset!important; box-shadow:0 0 0 1000px rgb(17,17,17) inset!important; transition:background-color 9999s ease-out 0s!important; } #authScreen #loginUsername{ left:19.0%!important; top:73.63%!important; width:62.0%!important; height:3.79%!important; } #authScreen #loginPassword{ left:19.0%!important; top:78.18%!important; width:57.0%!important; height:3.79%!important; } #authScreen .eye-btn{ position:absolute!important; left:77.0%!important; top:78.18%!important; width:10.0%!important; height:3.79%!important; border:0!important; background:transparent!important; color:transparent!important; box-shadow:none!important; padding:0!important; pointer-events:auto!important; cursor:pointer!important; } #authScreen .login-submit{ position:absolute!important; left:12.1%!important; top:82.62%!important; width:75.8%!important; height:3.68%!important; border:0!important; background:transparent!important; color:transparent!important; box-shadow:none!important; padding:0!important; pointer-events:auto!important; cursor:pointer!important; } #authScreen .forgot-btn{ position:absolute!important; left:29%!important; top:86.35%!important; width:42%!important; height:2.9%!important; border:0!important; background:transparent!important; color:transparent!important; box-shadow:none!important; padding:0!important; pointer-events:auto!important; cursor:pointer!important; } #authScreen .form-error{ position:absolute!important; left:18%!important; right:18%!important; top:89.05%!important; margin:0!important; min-height:0!important; color:#ff7a00!important; background:rgba(0,0,0,.84)!important; border-radius:6px!important; font-size:clamp(9px,1.15dvh,13px)!important; line-height:1.2!important; text-align:center!important; pointer-events:none!important; } /* ====================================================================== 25/08/2026 — V124 : Easter Eggs, couche non intrusive. Aucun panneau ni asset visuel n'est modifié : seuls des hotspots invisibles et des effets temporaires sont ajoutés sur les écrans publics. ====================================================================== */ .easter-secret-hotspot{ position:absolute;border:0;background:transparent!important;padding:0;margin:0; opacity:0;z-index:70;cursor:default;-webkit-tap-highlight-color:transparent;touch-action:manipulation; } #appScreen .easter-projection-hotspot{ left:28.5%;top:calc(var(--ttf-panel-w) * .055);width:12.5%;height:calc(var(--ttf-panel-w) * .12); } #catalogScreen .easter-vhs-hotspot{ left:18%;top:2.2%;width:64%;height:12.5%;z-index:65;touch-action:none; } #appScreen .home-bottom-decor{pointer-events:auto!important;-webkit-tap-highlight-color:transparent} #myRequestsScreen .myrequests-crow-easteregg{pointer-events:auto!important;-webkit-tap-highlight-color:transparent;cursor:default} .easter-egg-reveal{ position:fixed;left:50%;top:17%;transform:translate(-50%,-12px);z-index:5000; width:min(84vw,560px);padding:14px 18px;border:1px solid rgba(255,112,0,.75);border-radius:16px; background:rgba(3,3,3,.93);box-shadow:0 12px 44px rgba(0,0,0,.78),inset 0 0 28px rgba(255,101,0,.08); color:#fff;text-align:center;pointer-events:none;opacity:0;animation:easterReveal 2.45s ease forwards; font-family:Arial,sans-serif; } .easter-egg-reveal strong{display:block;color:#ff7100;font-size:clamp(17px,4.6vw,25px);letter-spacing:.045em} .easter-egg-reveal small{display:block;margin-top:5px;color:#cfc7bf;font-size:clamp(10px,2.7vw,14px)} @keyframes easterReveal{0%{opacity:0;transform:translate(-50%,-18px) scale(.96)}12%,82%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-7px) scale(.98)}} /* V126 — Mode Projection : mini-scène 100% CSS/JS, aucun asset modifié. */ .easter-projection-experience{ position:fixed;inset:0;z-index:4600;overflow:hidden;pointer-events:none; background:rgba(0,0,0,.18);opacity:1;transition:opacity .42s ease; isolation:isolate; } .easter-projector-vignette{ position:absolute;inset:-4%;z-index:4; background:radial-gradient(ellipse at 50% 48%,rgba(0,0,0,0) 35%,rgba(0,0,0,.18) 58%,rgba(0,0,0,.78) 100%); box-shadow:inset 0 0 110px rgba(0,0,0,.78); animation:easterProjectorFlicker .16s steps(2,end) infinite; } .easter-projector-beam{ position:absolute;z-index:1;left:-28vw;top:-10vh;width:120vw;height:92vh; transform:rotate(-7deg);transform-origin:0 50%;opacity:0; background:conic-gradient(from 79deg at 0 50%,transparent 0deg,rgba(255,233,183,.06) 3deg,rgba(255,226,165,.17) 9deg,rgba(255,244,214,.07) 16deg,transparent 21deg); filter:blur(7px);transition:opacity .55s ease; } .easter-projector-grain{ position:absolute;inset:-35%;z-index:3;opacity:.16;mix-blend-mode:screen; background-image: radial-gradient(circle at 17% 33%,rgba(255,255,255,.9) 0 .55px,transparent .75px), radial-gradient(circle at 73% 61%,rgba(255,255,255,.7) 0 .45px,transparent .7px), radial-gradient(circle at 41% 82%,rgba(255,255,255,.55) 0 .5px,transparent .75px); background-size:9px 11px,13px 15px,17px 19px; animation:easterProjectorGrain .22s steps(2,end) infinite; } .easter-projector-scan{ position:absolute;inset:0;z-index:2;opacity:.13; background:repeating-linear-gradient(to bottom,rgba(255,255,255,.11) 0 1px,transparent 1px 5px); } .easter-projection-countdown{ position:absolute;z-index:7;inset:0;display:grid;place-items:center; background:radial-gradient(circle,rgba(50,43,31,.18) 0 24%,rgba(0,0,0,.74) 66%,rgba(0,0,0,.92) 100%); transition:opacity .28s ease,transform .28s ease; } .easter-projection-countdown::before,.easter-projection-countdown::after{ content:"";position:absolute;background:rgba(255,240,207,.18); } .easter-projection-countdown::before{left:50%;top:0;bottom:0;width:1px} .easter-projection-countdown::after{top:50%;left:0;right:0;height:1px} .easter-projection-countdown span{ width:min(46vw,230px);aspect-ratio:1;border:2px solid rgba(255,236,197,.62);border-radius:50%; display:grid;place-items:center;color:#f3e7cf;font:700 clamp(76px,24vw,150px)/1 Georgia,serif; text-shadow:0 0 20px rgba(255,157,54,.28);box-shadow:0 0 0 12px rgba(255,255,255,.025); animation:easterCountdownTick .62s ease both; } .easter-projection-countdown span.tick{animation:easterCountdownTick .62s ease both} .easter-projection-caption{ position:absolute;z-index:8;left:50%;top:50%;width:min(82vw,520px);transform:translate(-50%,-50%) scale(.96); padding:18px 20px;text-align:center;border:1px solid rgba(255,111,0,.68);border-radius:18px; background:rgba(3,3,3,.82);box-shadow:0 16px 55px rgba(0,0,0,.82),inset 0 0 32px rgba(255,105,0,.08); opacity:0;transition:opacity .45s ease .08s,transform .45s ease .08s; font-family:Arial,sans-serif; } .easter-projection-caption strong{display:block;color:#ff7200;font-size:clamp(22px,6.2vw,34px);letter-spacing:.055em} .easter-projection-caption small{display:block;margin-top:7px;color:#e7ddd2;font-size:clamp(12px,3.2vw,17px);letter-spacing:.025em} .easter-projection-experience.is-running .easter-projection-countdown{opacity:0;transform:scale(1.04)} .easter-projection-experience.is-running .easter-projector-beam{opacity:1} .easter-projection-experience.is-running .easter-projection-caption{opacity:1;transform:translate(-50%,-50%) scale(1)} .easter-projection-experience.is-ending{opacity:0} body.easter-projection-mode .mobile-shell{animation:easterProjectionExposure .23s steps(2,end) infinite} @keyframes easterProjectorFlicker{0%{opacity:.76}35%{opacity:.91}60%{opacity:.8}100%{opacity:.88}} @keyframes easterProjectorGrain{0%{transform:translate(-2%,-1%)}25%{transform:translate(1%,2%)}50%{transform:translate(2%,-2%)}75%{transform:translate(-1%,1%)}100%{transform:translate(0,0)}} @keyframes easterCountdownTick{0%{transform:scale(.72);opacity:.15}28%{transform:scale(1.08);opacity:1}100%{transform:scale(.96);opacity:.92}} @keyframes easterProjectionExposure{0%,100%{filter:brightness(.82) contrast(1.06)}50%{filter:brightness(.96) contrast(1.1)}} /* V127 — Mode VHS : mini-scène analogique 100% CSS/JS, aucun asset modifié. */ .easter-vhs-experience{ position:fixed;inset:0;z-index:4600;overflow:hidden;pointer-events:none; background:rgba(0,0,0,.08);opacity:1;transition:opacity .38s ease;isolation:isolate; } .easter-vhs-chroma{ position:absolute;inset:0;z-index:1;opacity:.18;mix-blend-mode:screen; background:linear-gradient(90deg,rgba(255,0,45,.13),transparent 17%,transparent 83%,rgba(0,214,255,.13)); animation:easterVhsChroma .24s steps(2,end) infinite; } .easter-vhs-scanlines{ position:absolute;inset:0;z-index:3;opacity:.28; background:repeating-linear-gradient(to bottom,rgba(255,255,255,.12) 0 1px,rgba(0,0,0,.12) 1px 3px,transparent 3px 5px); } .easter-vhs-noise{ position:absolute;inset:-16%;z-index:4;opacity:.12;mix-blend-mode:screen; background-image: radial-gradient(circle at 21% 37%,rgba(255,255,255,.92) 0 .7px,transparent .95px), radial-gradient(circle at 63% 74%,rgba(255,255,255,.72) 0 .55px,transparent .85px), radial-gradient(circle at 84% 18%,rgba(255,255,255,.6) 0 .5px,transparent .8px); background-size:7px 9px,11px 13px,15px 17px; animation:easterVhsNoise .16s steps(2,end) infinite; } .easter-vhs-tracking-band{ position:absolute;left:-3%;right:-3%;top:-16%;height:16%;z-index:5;opacity:.68; background:linear-gradient(to bottom,transparent,rgba(255,255,255,.17) 42%,rgba(0,0,0,.34) 52%,rgba(255,255,255,.12) 61%,transparent); filter:blur(.5px);animation:easterVhsTracking 1.15s linear infinite; } .easter-vhs-osd,.easter-vhs-timecode{ position:absolute;z-index:8;color:rgba(255,255,255,.9);font-family:"Courier New",monospace; font-weight:700;letter-spacing:.08em;text-shadow:2px 2px 0 rgba(0,0,0,.8); } .easter-vhs-osd-top{left:5.5vw;right:5.5vw;top:max(3.5vh,22px);display:flex;justify-content:space-between;font-size:clamp(15px,4.2vw,23px)} .easter-vhs-timecode{right:5.5vw;bottom:max(4vh,26px);font-size:clamp(14px,3.8vw,21px)} .easter-vhs-caption{ position:absolute;z-index:9;left:50%;top:50%;transform:translate(-50%,-46%) scale(.98); width:min(84vw,560px);padding:15px 18px;border:1px solid rgba(255,112,0,.72);border-radius:14px; background:rgba(0,0,0,.72);box-shadow:0 12px 46px rgba(0,0,0,.72);text-align:center;opacity:0; transition:opacity .26s ease,transform .26s ease;font-family:Arial,sans-serif; } .easter-vhs-caption strong{display:block;color:#ff7200;font-size:clamp(21px,6vw,33px);letter-spacing:.055em} .easter-vhs-caption small{display:block;margin-top:6px;color:#e7ddd2;font-size:clamp(11px,3vw,16px);letter-spacing:.02em} .easter-vhs-experience.is-playing .easter-vhs-caption{opacity:1;transform:translate(-50%,-50%) scale(1)} .easter-vhs-experience.is-ending{opacity:0} body.easter-vhs-mode .mobile-shell{animation:easterVhsPicture .18s steps(2,end) infinite} @keyframes easterVhsPicture{0%,100%{filter:contrast(1.06) saturate(.82) brightness(.92);transform:translateX(0)}35%{filter:contrast(1.14) saturate(.72) brightness(.86);transform:translateX(-.7px)}65%{filter:contrast(1.03) saturate(.9) brightness(.96);transform:translateX(.8px)}} @keyframes easterVhsChroma{0%,100%{transform:translateX(-1px)}50%{transform:translateX(1.5px)}} @keyframes easterVhsNoise{0%{transform:translate(-1.5%,-1%)}25%{transform:translate(.8%,1.4%)}50%{transform:translate(1.2%,-.9%)}75%{transform:translate(-.6%,.7%)}100%{transform:translate(0,0)}} @keyframes easterVhsTracking{0%{transform:translateY(0)}100%{transform:translateY(132vh)}} /* V133 — NEVER SLEEP AGAIN : rafale multi-directionnelle 100% CSS/JS, aucun asset modifié. */ .easter-freddy-experience{ position:fixed;inset:0;z-index:4720;overflow:hidden;pointer-events:none;opacity:1; background:rgba(0,0,0,.05);transition:opacity .58s ease;isolation:isolate; } .easter-freddy-night{ position:absolute;inset:0;z-index:1;opacity:0; background: radial-gradient(circle at 50% 44%,rgba(110,0,0,.22),transparent 34%), radial-gradient(circle at 15% 18%,rgba(255,59,0,.055),transparent 22%), linear-gradient(180deg,rgba(0,0,0,.72),rgba(13,0,0,.93)); transition:opacity .34s ease; } .easter-freddy-static{ position:absolute;inset:-12%;z-index:2;opacity:0;mix-blend-mode:screen; background-image: repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px), repeating-linear-gradient(90deg,transparent 0 17px,rgba(255,70,20,.012) 18px 19px); animation:easterFreddyStatic .17s steps(2,end) infinite;transition:opacity .25s ease; } .easter-freddy-fog{ position:absolute;z-index:3;left:-30%;width:160%;height:30vh;border-radius:50%;opacity:0;filter:blur(26px); background:linear-gradient(90deg,transparent,rgba(120,0,0,.12),rgba(210,28,0,.055),transparent); } .easter-freddy-fog.fog-a{top:17%;animation:easterFreddyFogA 4.4s ease-in-out infinite alternate} .easter-freddy-fog.fog-b{top:62%;transform:scaleX(-1);animation:easterFreddyFogB 5.1s ease-in-out infinite alternate} .easter-freddy-slashes{position:absolute;z-index:5;inset:0;opacity:0;transition:opacity .12s ease .18s} .easter-freddy-slashes .slash{ position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h,3px);border-radius:55%; transform-origin:var(--origin,left) center; transform:rotate(var(--r)) scaleX(0) skewX(-13deg);opacity:0; background:linear-gradient(90deg,transparent 0,#3b0200 5%,#b71004 19%,#ff4215 43%,#ff8a38 52%,#d51d08 67%,#5f0500 88%,transparent 100%); box-shadow:0 0 6px rgba(255,45,0,.68),0 0 16px rgba(145,0,0,.58),0 1px 0 rgba(0,0,0,.92); filter:blur(var(--blur,.12px)); animation:easterFreddySlash var(--dur,.34s) cubic-bezier(.12,.84,.19,1) var(--delay,0s) forwards; } .easter-freddy-slashes .slash::after{ content:"";position:absolute;left:6%;right:7%;top:50%;height:1px;transform:translateY(-50%); background:linear-gradient(90deg,transparent,rgba(255,190,135,.16) 18%,rgba(255,224,196,.7) 50%,rgba(255,95,42,.2) 82%,transparent); opacity:.76; } .easter-freddy-slashes .slash:nth-child(3n){filter:blur(.45px);opacity:.82} .easter-freddy-slashes .slash:nth-child(5n){box-shadow:0 0 9px rgba(255,55,0,.72),0 0 24px rgba(105,0,0,.72)} .easter-freddy-caption{ position:absolute;z-index:8;left:50%;top:64%;width:min(90vw,620px);transform:translate(-50%,-46%) scale(.94);opacity:0;text-align:center; padding:18px 20px 17px;border-top:1px solid rgba(255,77,22,.26);border-bottom:1px solid rgba(255,77,22,.18); background:linear-gradient(90deg,transparent,rgba(0,0,0,.68) 13%,rgba(6,0,0,.82) 50%,rgba(0,0,0,.68) 87%,transparent); text-shadow:0 3px 20px #000;transition:opacity .35s ease,transform .45s cubic-bezier(.2,.9,.2,1); } .easter-freddy-caption strong{display:block;color:#ff5a20;font-size:clamp(23px,6.5vw,38px);font-weight:1000;letter-spacing:.07em;text-shadow:0 0 9px rgba(255,45,0,.36),2px 1px 0 #350000} .easter-freddy-caption small{display:block;margin-top:7px;color:#d7cdc8;font-size:clamp(11px,3vw,16px);letter-spacing:.025em} .easter-freddy-experience.is-started .easter-freddy-night{opacity:1} .easter-freddy-experience.is-started .easter-freddy-static{opacity:.62} .easter-freddy-experience.is-started .easter-freddy-fog{opacity:1} .easter-freddy-experience.is-started .easter-freddy-slashes{opacity:1} .easter-freddy-experience.show-caption .easter-freddy-caption{opacity:1;transform:translate(-50%,-50%) scale(1)} .easter-freddy-experience.is-ending{opacity:0} body.easter-freddy-mode .mobile-shell{animation:easterFreddyDream .2s steps(2,end) 7} @keyframes easterFreddyDream{0%,100%{filter:brightness(.7) contrast(1.13) saturate(.76);transform:translate(0,0) scale(1)}25%{filter:brightness(.83) contrast(1.25) saturate(.68);transform:translate(-.7px,.2px) scale(1.002)}55%{filter:brightness(.63) contrast(1.18) saturate(.62);transform:translate(.8px,-.4px) scale(1.001)}80%{filter:brightness(.78) contrast(1.21) saturate(.72);transform:translate(-.2px,.5px) scale(1.003)}} @keyframes easterFreddyStatic{0%{transform:translate(-1.2%,-.6%)}25%{transform:translate(.6%,1.1%)}50%{transform:translate(1.1%,-.8%)}75%{transform:translate(-.5%,.7%)}100%{transform:translate(0,0)}} @keyframes easterFreddyFogA{from{transform:translateX(-5%) scaleX(.94)}to{transform:translateX(7%) scaleX(1.06)}} @keyframes easterFreddyFogB{from{transform:translateX(5%) scaleX(-1)}to{transform:translateX(-7%) scaleX(-1.08)}} @keyframes easterFreddySlash{ 0%{transform:rotate(var(--r)) scaleX(0) skewX(-13deg);opacity:0} 20%{opacity:.38} 64%{transform:rotate(var(--r)) scaleX(1.055) skewX(-13deg);opacity:1} 100%{transform:rotate(var(--r)) scaleX(1) skewX(-13deg);opacity:.86} } body.easter-crow-mode .mobile-shell{animation:easterCrowFlash .42s ease 2} @keyframes easterCrowFlash{0%,100%{filter:none}50%{filter:grayscale(.7) contrast(1.12) brightness(1.12)}} @media(prefers-reduced-motion:reduce){ .easter-egg-reveal,.easter-projection-experience *,.easter-vhs-experience *,.easter-freddy-experience *,body.easter-projection-mode .mobile-shell,body.easter-vhs-mode .mobile-shell, body.easter-freddy-mode .mobile-shell,body.easter-crow-mode .mobile-shell{animation:none!important;transition:none!important} .easter-egg-reveal{opacity:1;transform:translate(-50%,0)} .easter-projector-grain,.easter-projector-scan,.easter-vhs-noise,.easter-vhs-tracking-band,.easter-freddy-static{display:none} .easter-vhs-caption,.easter-freddy-caption{opacity:1;transform:translate(-50%,-50%) scale(1)} .easter-freddy-night,.easter-freddy-fog,.easter-freddy-slashes{opacity:1} .easter-freddy-slashes .slash{transform:rotate(var(--r)) scaleX(1) skewX(-13deg)} } /* V205 — le contenu du classement défile réellement derrière le décor bas au premier plan. La réserve basse crée une zone de défilement même avec peu d’utilisateurs. */ /* ====================================================================== 25/08/2026 — V128 : classement visible des découvreurs. Interface 100% HTML/CSS : aucun asset visuel existant n'est modifié. ====================================================================== */ #profileScreen .profile-ranking-card{border-color:rgba(255,171,45,.42)!important} #profileScreen .profile-ranking-card::after{background:linear-gradient(90deg,transparent,rgba(255,183,55,.95),transparent)!important;box-shadow:0 0 9px rgba(255,153,0,.28)!important} #profileScreen .profile-ranking-card .profile-card-icon.ranking{ color:#ffc15a!important;font-size:22px!important; background:radial-gradient(circle at 50% 20%,rgba(255,185,72,.18),transparent 58%),linear-gradient(180deg,rgba(29,19,7,.98),rgba(8,6,3,.99))!important; border-color:rgba(255,171,45,.5)!important; } .ranking-screen{ position:relative;width:100%;height:100dvh;min-height:100dvh;overflow:hidden; background: radial-gradient(circle at 50% 0%,rgba(255,112,0,.18),transparent 31%), radial-gradient(circle at 88% 34%,rgba(255,168,45,.06),transparent 28%), linear-gradient(180deg,#090909 0%,#030303 58%,#000 100%); color:#f8f8f8; } .ranking-screen::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.018) 4px);} .ranking-header{ position:absolute;z-index:5;left:0;right:0;top:0;min-height:154px; padding:max(24px,env(safe-area-inset-top)) 22px 18px 66px; display:flex;align-items:flex-end;border-bottom:1px solid rgba(255,114,0,.22); background:linear-gradient(180deg,rgba(5,5,5,.78),rgba(6,6,6,.96)); box-shadow:0 14px 30px rgba(0,0,0,.34); } .ranking-header span{display:block;color:#ff7a12;font-size:11px;font-weight:900;letter-spacing:.16em;margin-bottom:6px} .ranking-header h1{margin:0;font-size:clamp(24px,7vw,34px);line-height:.98;text-transform:uppercase;letter-spacing:-.035em} .ranking-header p{margin:8px 0 0;color:#aaa;font-size:12px;line-height:1.3;max-width:500px} .ranking-back{ position:absolute;left:17px;top:max(25px,env(safe-area-inset-top));width:38px;height:38px;border-radius:12px; border:1px solid rgba(255,126,20,.55);background:rgba(9,9,9,.92);color:#ff7a12;font-size:30px;line-height:30px; display:grid;place-items:center;padding:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 6px 16px rgba(0,0,0,.32); } .ranking-scroll{ position:absolute;z-index:2;left:0;right:0;top:154px;bottom:var(--ttf-nav-height); overflow-y:scroll;overflow-x:hidden; padding:16px 14px clamp(280px,68vw,520px); scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;touch-action:pan-y; } .ranking-scroll::-webkit-scrollbar{display:none} .ranking-me-card,.ranking-board{ position:relative;overflow:hidden;border:1px solid rgba(255,116,0,.3);border-radius:18px; background:radial-gradient(circle at 50% 0%,rgba(255,132,24,.10),transparent 48%),linear-gradient(180deg,rgba(19,19,19,.98),rgba(5,5,5,.99)); box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 12px 26px rgba(0,0,0,.34); } .ranking-me-card::after,.ranking-board::after{content:"";position:absolute;left:17%;right:17%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,#ff7a12,transparent);box-shadow:0 0 8px rgba(255,110,0,.35)} .ranking-me-card{padding:16px 15px 15px;margin-bottom:14px} .ranking-me-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px} .ranking-me-kicker{font-size:10px;font-weight:900;letter-spacing:.16em;color:#ff8424} .ranking-me-top>strong{font-size:30px;line-height:1;color:#ffc16a;text-shadow:0 0 14px rgba(255,137,31,.16)} .ranking-progress-copy{display:flex;align-items:baseline;gap:8px;margin-top:2px}.ranking-progress-copy b{font-size:25px}.ranking-progress-copy span{font-size:12px;color:#a8a8a8} .ranking-progress-track{height:7px;border-radius:99px;margin:11px 0 14px;background:#161616;border:1px solid rgba(255,255,255,.045);overflow:hidden} .ranking-progress-track i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#d94b00,#ff8a19,#ffc15e);box-shadow:0 0 12px rgba(255,104,0,.36);transition:width .35s ease} .ranking-secret-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .ranking-secret{min-height:42px;border:1px solid rgba(255,255,255,.07);border-radius:11px;background:#0b0b0b;padding:8px 9px;display:flex;align-items:center;gap:8px;font-size:10px;font-weight:800;line-height:1.15;letter-spacing:.02em} .ranking-secret b{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11px} .ranking-secret.found{color:#f2f2f2;border-color:rgba(255,120,20,.23)}.ranking-secret.found b{color:#ff8b2b;background:rgba(255,111,0,.10);border:1px solid rgba(255,120,20,.3)} .ranking-secret.locked{color:#666}.ranking-secret.locked b{color:#777;background:#111;border:1px solid #222} .ranking-board{padding:15px 12px 12px}.ranking-board-title{display:flex;align-items:flex-end;justify-content:space-between;padding:0 3px 12px;gap:12px} .ranking-board-title span{display:block;font-size:9px;font-weight:900;letter-spacing:.15em;color:#ff7a12}.ranking-board-title h2{margin:2px 0 0;font-size:22px;text-transform:uppercase}.ranking-board-title small{color:#8f8f8f;font-size:10px;padding-bottom:2px} .ranking-table-head{display:grid;grid-template-columns:54px minmax(0,1fr) 68px;gap:7px;padding:7px 8px;color:#666;font-size:8px;font-weight:900;letter-spacing:.12em;border-top:1px solid #171717;border-bottom:1px solid #171717}.ranking-table-head span:last-child{text-align:right} .ranking-rows{display:grid;gap:7px;padding-top:8px}.ranking-row{display:grid;grid-template-columns:54px minmax(0,1fr) 68px;gap:7px;align-items:center;min-height:58px;padding:7px 8px;border-radius:13px;border:1px solid rgba(255,255,255,.055);background:linear-gradient(180deg,#0c0c0c,#070707)} .ranking-row.is-me{border-color:rgba(255,124,20,.42);background:radial-gradient(circle at 50% 0%,rgba(255,112,0,.09),transparent 58%),linear-gradient(180deg,#111,#080808);box-shadow:inset 0 0 18px rgba(255,101,0,.035)} .ranking-rank{font-size:16px;font-weight:1000;color:#8d8d8d;text-align:center}.ranking-rank.podium{font-size:23px} .ranking-user{min-width:0;display:flex;align-items:center;gap:9px}.ranking-avatar{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,126,20,.32);background:linear-gradient(180deg,#21160c,#0c0906);color:#ff9a40;font-size:11px;letter-spacing:.04em}.ranking-user>span{min-width:0;display:flex;align-items:center;gap:6px}.ranking-user strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.ranking-user small{flex:none;font-size:7px;font-weight:900;color:#ff8b2b;border:1px solid rgba(255,126,20,.3);border-radius:99px;padding:2px 4px} .ranking-score{text-align:right;white-space:nowrap}.ranking-score strong{font-size:21px;color:#ff8a24}.ranking-score small{font-size:10px;color:#777} .ranking-loading,.ranking-empty{text-align:center;padding:28px 12px;color:#999;font-size:12px;line-height:1.45}.ranking-empty small{color:#666}.ranking-footnote{margin:13px 8px 0;color:#696969;font-size:10px;line-height:1.45;text-align:center} .ranking-bottom-decor{ position:absolute;z-index:12;left:50%;bottom:calc(var(--ttf-nav-height) - 2px); width:100%;max-width:none;height:auto;transform:translateX(-50%); pointer-events:none;user-select:none;-webkit-user-drag:none; } .ranking-screen .canonical-bottom-nav{z-index:20!important} /* V212 — hotspot invisible aligné sur l'Anneau du PNG 1536×1024. Le décor reste au premier plan ; seul le cercle de l'Anneau devient interactif. */ .ranking-ring-secret{ position:absolute;z-index:14;left:4.2vw;bottom:calc(var(--ttf-nav-height) + 9vw); width:24vw;height:18vw;min-width:82px;min-height:62px;max-width:142px;max-height:106px; padding:0;border:0;border-radius:50%;background:transparent;box-shadow:none;outline:none; touch-action:manipulation;-webkit-tap-highlight-color:transparent;cursor:pointer; } .ranking-ring-secret:focus-visible{outline:1px solid rgba(255,170,55,.34);outline-offset:3px} /* ====================================================================== V212 — « UNE APPLICATION POUR LES GOUVERNER TOUTES ! » Animation intégralement CSS/JS, sans nouvel asset et sans modifier le décor. ====================================================================== */ .easter-onering-experience{ position:fixed;z-index:10060;inset:0;overflow:hidden;pointer-events:none;opacity:1; isolation:isolate;background:#000;color:#ffe3a0; } .easter-onering-experience>div{position:absolute;inset:0} .easter-onering-dark{ z-index:1;background: radial-gradient(circle at 16% 78%,rgba(255,91,0,.25) 0%,rgba(130,33,0,.12) 18%,transparent 38%), radial-gradient(circle at 50% 56%,rgba(124,45,2,.10),transparent 50%), linear-gradient(180deg,rgba(0,0,0,.94),rgba(2,0,0,.985)); } .easter-onering-dark::after{ content:"";position:absolute;inset:0;opacity:.34; background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,173,72,.025) 4px); } .easter-onering-glow{ z-index:2;inset:auto;left:16%;top:78%;width:1px;height:1px; border-radius:50%;box-shadow:0 0 70px 38px rgba(255,83,0,.12),0 0 150px 86px rgba(255,121,0,.06); opacity:0;transform:scale(.25); } .easter-onering-experience.is-running .easter-onering-glow{animation:oneringGlow 2.8s ease-in-out infinite alternate} .easter-onering-runes{z-index:3;inset:auto;left:16%;top:78%;width:1px;height:1px;opacity:0} .easter-onering-runes i{ position:absolute;left:0;top:0;width:22vmin;height:22vmin;border:1px solid rgba(255,149,39,.46);border-radius:50%; transform:translate(-50%,-50%) scale(.2);box-shadow:0 0 8px rgba(255,108,0,.38),inset 0 0 13px rgba(255,108,0,.16); } .easter-onering-runes i:nth-child(2){width:34vmin;height:34vmin;animation-delay:.42s!important} .easter-onering-runes i:nth-child(3){width:48vmin;height:48vmin;animation-delay:.84s!important} .easter-onering-experience.is-running .easter-onering-runes{opacity:1} .easter-onering-experience.is-running .easter-onering-runes i{animation:oneringRunePulse 2.6s ease-out infinite} .easter-onering-embers{z-index:5;overflow:hidden;opacity:0} .easter-onering-embers i{ position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);border-radius:50%; background:#ffb24f;box-shadow:0 0 5px #ff6a00,0 0 12px rgba(255,73,0,.58);opacity:0; } .easter-onering-experience.is-running .easter-onering-embers{opacity:1} .easter-onering-experience.is-running .easter-onering-embers i{animation:oneringEmber var(--dur) ease-out var(--delay) infinite} .easter-onering-flare{ z-index:6;opacity:0;background:radial-gradient(circle at 50% 50%,rgba(255,210,115,.22),rgba(255,103,0,.06) 24%,transparent 58%); } .easter-onering-experience.is-morphing .easter-onering-flare{animation:oneringFlare .55s ease-out 1} .easter-onering-caption{ z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center; padding:8dvh 5vw 12dvh;opacity:0;transform:scale(.965);filter:blur(4px); } .easter-onering-experience.show-caption .easter-onering-caption{opacity:1;transform:scale(1);filter:blur(0);transition:opacity .8s ease .35s,transform .9s ease .35s,filter .9s ease .35s} .onering-line{display:block;max-width:min(92vw,920px);text-transform:uppercase;text-wrap:balance} .onering-line-main{font-size:clamp(34px,9.2vw,78px);line-height:1;font-weight:950;letter-spacing:.035em} .onering-line-sub{margin-top:12px;font-size:clamp(20px,5.6vw,46px);line-height:1.12;font-weight:850;letter-spacing:.045em} .onering-article,.onering-object,.onering-all{display:inline-block;will-change:transform,filter,opacity,color;text-shadow} .onering-object,.onering-all{color:#ffc35a;text-shadow:0 0 10px rgba(255,123,0,.28),0 2px 18px rgba(0,0,0,.72)} .onering-ornament{display:block;margin:15px 0;color:#c87926;font-size:clamp(14px,4vw,25px);opacity:.72;text-shadow:0 0 12px rgba(255,126,0,.35)} .onering-bang{opacity:0;display:inline-block;transform:scale(.35) rotate(-10deg)} .easter-onering-experience.is-morphing .onering-object, .easter-onering-experience.is-morphing .onering-all{ animation:oneringWordBurn .48s cubic-bezier(.55,0,.8,.3) both; } .easter-onering-experience.is-morphing .onering-article{animation:oneringArticleBurn .48s ease both} .easter-onering-experience.is-transformed .onering-article, .easter-onering-experience.is-transformed .onering-object, .easter-onering-experience.is-transformed .onering-all{ color:#ffe08c;text-shadow:0 0 7px #fff1bf,0 0 20px rgba(255,151,37,.76),0 0 50px rgba(255,78,0,.34); animation:oneringWordReturn .82s cubic-bezier(.2,.9,.25,1.08) both; } .easter-onering-experience.is-transformed .onering-object{color:#ffd16e} .easter-onering-experience.is-transformed .onering-bang{opacity:1;animation:oneringBang .65s cubic-bezier(.2,.9,.2,1.2) both} .easter-onering-experience.is-transformed .easter-onering-runes i{border-color:rgba(255,207,112,.7);box-shadow:0 0 12px rgba(255,182,70,.65),inset 0 0 18px rgba(255,115,0,.25)} /* V214 — réponses visuelles calées sur les repères du fichier audio de l'Anneau. */ .easter-onering-experience.phase-build .easter-onering-glow{ filter:brightness(1.32) saturate(1.18); } .easter-onering-experience.phase-build .easter-onering-runes i{ border-color:rgba(255,178,73,.62); box-shadow:0 0 10px rgba(255,137,32,.54),inset 0 0 16px rgba(255,105,0,.22); } .easter-onering-experience.audio-impact .easter-onering-flare{animation:oneringAudioImpact .42s ease-out 1} .easter-onering-experience.audio-impact-major .easter-onering-flare{animation:oneringAudioImpactMajor .62s ease-out 1} .easter-onering-experience.phase-finale .easter-onering-caption{ filter:brightness(1.18); transform:scale(1.025); transition:filter .4s ease,transform .55s cubic-bezier(.2,.9,.25,1); } .easter-onering-experience.phase-finale .onering-object, .easter-onering-experience.phase-finale .onering-all{ text-shadow:0 0 9px #fff4c9,0 0 30px rgba(255,167,52,.94),0 0 72px rgba(255,76,0,.46); } .easter-onering-experience.phase-decay .easter-onering-embers{opacity:.22;transition:opacity .5s ease} .easter-onering-experience.phase-decay .easter-onering-runes{opacity:.28;transition:opacity .5s ease} .easter-onering-experience.is-ending{opacity:0;transition:opacity .65s ease} @keyframes oneringGlow{0%{opacity:.38;transform:scale(.7)}100%{opacity:.95;transform:scale(1.25)}} @keyframes oneringRunePulse{0%{opacity:0;transform:translate(-50%,-50%) scale(.12)}25%{opacity:.75}100%{opacity:0;transform:translate(-50%,-50%) scale(2.15)}} @keyframes oneringEmber{0%{opacity:0;transform:translate3d(0,18px,0) scale(.4)}18%{opacity:.85}100%{opacity:0;transform:translate3d(var(--drift),-32vh,0) scale(1.25)}} @keyframes oneringFlare{0%{opacity:0;transform:scale(.7)}35%{opacity:1;transform:scale(1.12)}100%{opacity:0;transform:scale(1.5)}} @keyframes oneringWordBurn{0%{opacity:1;filter:blur(0) brightness(1);transform:translateY(0) scale(1)}55%{opacity:.92;filter:blur(1px) brightness(2.1);transform:translateY(-2px) scale(1.04)}100%{opacity:0;filter:blur(9px) brightness(3);transform:translateY(-10px) scale(.92)}} @keyframes oneringArticleBurn{0%{opacity:1;filter:blur(0)}100%{opacity:.2;filter:blur(5px)}} @keyframes oneringWordReturn{0%{opacity:0;filter:blur(10px) brightness(2.4);transform:translateY(10px) scale(1.08)}55%{opacity:1;filter:blur(0) brightness(1.55);transform:translateY(-2px) scale(.99)}100%{opacity:1;filter:blur(0) brightness(1);transform:translateY(0) scale(1)}} @keyframes oneringBang{0%{opacity:0;transform:scale(.25) rotate(-12deg)}70%{opacity:1;transform:scale(1.35) rotate(4deg)}100%{opacity:1;transform:scale(1) rotate(0)}} @keyframes oneringAudioImpact{0%{opacity:0;transform:scale(.72)}35%{opacity:.72;transform:scale(1.03)}100%{opacity:0;transform:scale(1.36)}} @keyframes oneringAudioImpactMajor{0%{opacity:0;transform:scale(.68)}28%{opacity:1;transform:scale(1.08)}100%{opacity:0;transform:scale(1.62)}} @media (prefers-reduced-motion:reduce){ .easter-onering-experience *{animation:none!important;transition:none!important} .easter-onering-experience.show-caption .easter-onering-caption{opacity:1!important;filter:none!important;transform:none!important} } @media(max-width:350px){.ranking-header{padding-left:60px}.ranking-secret-grid{grid-template-columns:1fr}.ranking-table-head,.ranking-row{grid-template-columns:46px minmax(0,1fr) 58px}.ranking-avatar{width:30px;height:30px}.ranking-user strong{font-size:11px}} /* ====================================================================== 25/08/2026 — V131 : BELIEVE IN ANGELS — nuée organique de corbeaux. Effets 100% CSS/JS : 3 profondeurs, trajectoires irrégulières et battements. Aucun asset visuel existant n'est modifié. ====================================================================== */ .easter-crow-experience{ position:fixed;inset:0;z-index:4700;overflow:hidden;pointer-events:none;opacity:1; background:rgba(0,0,0,.08);transition:opacity .62s ease;isolation:isolate; } .easter-crow-night{ position:absolute;inset:0;z-index:1;opacity:0; background: radial-gradient(ellipse at 54% 24%,rgba(180,194,215,.14),transparent 30%), radial-gradient(ellipse at 18% 74%,rgba(55,63,76,.18),transparent 38%), linear-gradient(180deg,rgba(2,5,10,.68),rgba(0,0,0,.96)); transition:opacity .48s ease; } .easter-crow-moon{ position:absolute;z-index:2;left:54%;top:12%;width:min(42vw,210px);aspect-ratio:1;border-radius:50%;opacity:0; transform:translate(-50%,-18%) scale(.82);filter:blur(.4px); background:radial-gradient(circle at 44% 38%,rgba(233,238,247,.38),rgba(176,190,210,.11) 48%,rgba(130,145,165,.025) 70%,transparent 72%); box-shadow:0 0 80px rgba(198,210,229,.10);transition:opacity 1.1s ease .18s,transform 1.5s ease .12s; } .easter-crow-mist{ position:absolute;z-index:3;left:-25%;width:150%;height:25vh;border-radius:50%;opacity:0;filter:blur(22px); background:linear-gradient(90deg,transparent 0,rgba(180,192,210,.045) 18%,rgba(215,224,237,.08) 50%,rgba(170,183,202,.035) 79%,transparent 100%); transition:opacity .9s ease; } .easter-crow-mist.mist-one{top:39%;animation:easterCrowMistA 6s ease-in-out infinite alternate} .easter-crow-mist.mist-two{top:69%;transform:scaleX(-1);animation:easterCrowMistB 7.2s ease-in-out infinite alternate} .easter-crow-flock{position:absolute;inset:0;z-index:6;opacity:0;transition:opacity .24s ease .06s;perspective:700px} .easter-crow-track{ position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;will-change:transform,opacity; filter:blur(var(--crow-blur)) drop-shadow(0 4px 5px rgba(0,0,0,.86)); } .easter-crow-track.layer-far{mix-blend-mode:multiply} .easter-crow-track.layer-near{filter:drop-shadow(0 8px 10px rgba(0,0,0,.94))} .easter-crow-bird{ position:absolute;left:calc(var(--crow-size) * -.5);top:calc(var(--crow-size) * -.24);width:var(--crow-size);height:calc(var(--crow-size) * .56); opacity:var(--crow-opacity);transform-origin:50% 50%;will-change:transform; } .crow-body{ position:absolute;z-index:3;left:36%;top:39%;width:31%;height:29%;border-radius:58% 48% 52% 56%;background:#010203; box-shadow:calc(var(--crow-size) * .17) calc(var(--crow-size) * -.035) 0 calc(var(--crow-size) * -.075) #010203; } .crow-body::before{ content:"";position:absolute;right:-39%;top:-4%;width:48%;height:46%;background:#010203; clip-path:polygon(0 28%,100% 0,50% 48%,100% 100%,0 72%);transform:rotate(-3deg); } .crow-body::after{ content:"";position:absolute;left:-28%;top:32%;width:38%;height:45%;background:#010203; clip-path:polygon(100% 20%,0 0,29% 50%,0 100%,100% 76%); } .crow-wing{ position:absolute;z-index:2;top:11%;width:48%;height:55%;background:#010203;transform-origin:80% 82%; animation:easterCrowWing var(--flap) cubic-bezier(.42,0,.58,1) var(--flap-delay) infinite alternate; will-change:transform; } .crow-wing.wing-left{right:48%;clip-path:polygon(100% 78%,79% 23%,61% 61%,43% 4%,30% 52%,10% 18%,0 42%,23% 100%)} .crow-wing.wing-right{left:48%;transform-origin:20% 82%;clip-path:polygon(0 78%,21% 23%,39% 61%,57% 4%,70% 52%,90% 18%,100% 42%,77% 100%);animation-direction:alternate-reverse} .easter-crow-track.layer-near .easter-crow-bird{filter:contrast(1.12)} .easter-crow-caption{ position:absolute;z-index:12;left:50%;top:54%;width:min(90vw,620px);padding:22px 14px;text-align:center; transform:translate(-50%,-43%) scale(.91);opacity:0;transition:opacity .72s ease,transform .85s cubic-bezier(.15,.8,.17,1); text-shadow:0 4px 28px rgba(0,0,0,1);font-family:Georgia,'Times New Roman',serif; } .easter-crow-caption::before{ content:"";position:absolute;left:50%;top:50%;width:min(78vw,450px);height:min(48vw,260px);transform:translate(-50%,-50%); background:radial-gradient(ellipse,rgba(202,214,233,.10),rgba(150,165,188,.025) 55%,transparent 74%);filter:blur(7px); } .easter-crow-caption strong{position:relative;display:block;color:#f3f4f7;font-size:clamp(26px,7.6vw,47px);line-height:1.02;letter-spacing:.11em;font-weight:700;text-shadow:0 0 20px rgba(226,234,248,.28),0 5px 25px #000} .easter-crow-caption small{position:relative;display:block;margin-top:12px;color:rgba(224,227,234,.86);font:italic 400 clamp(11px,3.35vw,17px)/1.35 Georgia,'Times New Roman',serif;letter-spacing:.025em} .easter-crow-experience.is-awake .easter-crow-night,.easter-crow-experience.is-awake .easter-crow-moon,.easter-crow-experience.is-awake .easter-crow-mist,.easter-crow-experience.is-awake .easter-crow-flock{opacity:1} .easter-crow-experience.is-awake .easter-crow-moon{transform:translate(-50%,0) scale(1)} .easter-crow-experience.is-revealed .easter-crow-caption{opacity:1;transform:translate(-50%,-50%) scale(1)} .easter-crow-experience.is-revealed .easter-crow-flock{opacity:.46;transition:opacity .8s ease} .easter-crow-experience.is-ending{opacity:0} body.easter-crow-mode .mobile-shell{animation:easterCrowCinemaPulse 1.55s ease-in-out 2;filter:grayscale(.82) contrast(1.18) brightness(.46)} @keyframes easterCrowCinemaPulse{0%,100%{filter:grayscale(.82) contrast(1.18) brightness(.46)}42%{filter:grayscale(.96) contrast(1.28) brightness(.58)}56%{filter:grayscale(.68) contrast(1.11) brightness(.39)}} @keyframes easterCrowMistA{from{transform:translate3d(-4%,0,0) scaleX(.92)}to{transform:translate3d(7%,2vh,0) scaleX(1.08)}} @keyframes easterCrowMistB{from{transform:translate3d(6%,0,0) scaleX(-1)}to{transform:translate3d(-6%,-2vh,0) scaleX(-1.06)}} @keyframes easterCrowWing{0%{transform:rotateZ(-32deg) scaleY(.55)}48%{transform:rotateZ(4deg) scaleY(.88)}100%{transform:rotateZ(31deg) scaleY(1.08)}} @media(prefers-reduced-motion:reduce){ .easter-crow-experience *{animation:none!important;transition:none!important} .easter-crow-flock,.easter-crow-mist{display:none!important} .easter-crow-experience .easter-crow-night,.easter-crow-experience .easter-crow-moon,.easter-crow-experience .easter-crow-caption{opacity:1!important} .easter-crow-experience .easter-crow-moon{transform:translate(-50%,0) scale(1)!important} .easter-crow-experience .easter-crow-caption{transform:translate(-50%,-50%) scale(1)!important} } /* ====================================================================== 25/08/2026 — V134 : Matrix / pilule + verrou de connexion automatique. Pur HTML/CSS/JS : le PNG de connexion validé reste strictement inchangé. ====================================================================== */ #authScreen .matrix-pill-secret{ position:absolute;z-index:86;left:77.2%;top:64.0%;width:7.6%;aspect-ratio:2.2/1; padding:0;border:0;background:transparent;transform:rotate(-17deg);cursor:pointer; display:flex;overflow:hidden;border-radius:999px;box-shadow:0 1px 4px rgba(0,0,0,.9),0 0 5px rgba(255,255,255,.12); -webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:opacity .2s ease,transform .2s ease; } #authScreen .matrix-pill-secret:active{transform:rotate(-17deg) scale(.9)} #authScreen .matrix-pill-secret.matrix-pill-hidden{opacity:0!important;pointer-events:none!important;visibility:hidden!important} #authScreen .matrix-pill-half{flex:1 1 50%;height:100%;display:block;box-shadow:inset 0 1px 2px rgba(255,255,255,.55),inset 0 -2px 3px rgba(0,0,0,.45)} #authScreen .matrix-pill-blue{background:linear-gradient(135deg,#62d9ff 0%,#0a80db 45%,#06478f 100%)} #authScreen .matrix-pill-red{background:linear-gradient(135deg,#ff7b79 0%,#e22d2b 46%,#7f0808 100%)} .matrix-easter-experience{position:fixed;z-index:12000;inset:0;overflow:hidden;background:rgba(0,4,0,.74);opacity:0;pointer-events:none;transition:opacity .16s ease} .matrix-easter-experience.is-running{opacity:1} .matrix-rain{position:absolute;inset:-30% 0 0;filter:drop-shadow(0 0 5px rgba(80,255,112,.8))} .matrix-rain-column{position:absolute;top:-55%;width:5%;color:#62ff78;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:clamp(9px,2.7vw,18px);line-height:1.02;text-align:center;white-space:nowrap;text-shadow:0 0 6px #20ff50;animation:matrixFall 2.6s linear infinite} .matrix-scan{position:absolute;inset:0;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.025) 0 1px,rgba(0,0,0,.14) 2px 4px);mix-blend-mode:screen;opacity:.5} .matrix-vignette{position:absolute;inset:0;background:radial-gradient(circle at 50% 44%,transparent 20%,rgba(0,10,0,.22) 55%,rgba(0,0,0,.88) 100%)} .matrix-message{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.92);display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;opacity:0;animation:matrixMessage 2.55s ease .32s forwards} .matrix-message strong{color:#7dff8b;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:clamp(25px,8vw,56px);letter-spacing:.12em;text-shadow:0 0 12px rgba(70,255,100,.9)} .matrix-message small{color:#b7ffbe;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:clamp(10px,2.8vw,18px);letter-spacing:.13em} @keyframes matrixFall{0%{transform:translateY(-10%)}100%{transform:translateY(185%)}} @keyframes matrixMessage{0%,12%{opacity:0;transform:translate(-50%,-50%) scale(.88)}25%,68%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.04)}} @media(prefers-reduced-motion:reduce){.matrix-rain-column{animation:none}.matrix-message{animation:none;opacity:1}.matrix-easter-experience{transition:none}} #adminScreen .admin-matrix-reset{border-color:rgba(70,255,110,.28)} #adminScreen .admin-matrix-reset .admin-action-icon{color:#62ff78;border-color:rgba(70,255,110,.38);text-shadow:0 0 9px rgba(70,255,110,.28)} /* ====================================================================== 25/08/2026 — V135 : pilule Matrix tactile + placement discret. Correction CSS uniquement : aucun asset visuel n'est modifié. La zone tactile reste confortable (~50 px sur mobile) tandis que la capsule visible est volontairement beaucoup plus petite et sans halo. ====================================================================== */ #authScreen .matrix-pill-secret{ left:68.0%!important; top:54.0%!important; width:11.0%!important; height:5.2%!important; aspect-ratio:auto!important; z-index:120!important; display:block!important; overflow:visible!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; transform:none!important; opacity:1; pointer-events:auto!important; touch-action:manipulation!important; cursor:pointer!important; -webkit-tap-highlight-color:transparent!important; -webkit-user-select:none!important; user-select:none!important; } #authScreen .matrix-pill-secret .matrix-pill-half{display:none!important} #authScreen .matrix-pill-secret::before{ content:""; position:absolute; left:50%; top:52%; width:34%; height:14%; min-height:4px; border-radius:999px; background:linear-gradient(90deg,#9f2626 0 48%,#1f5c82 52% 100%); box-shadow:inset 0 1px 1px rgba(255,255,255,.28),0 1px 2px rgba(0,0,0,.72); filter:saturate(.72) brightness(.76); opacity:.82; transform:translate(-50%,-50%) rotate(-19deg); transform-origin:center; pointer-events:none; transition:transform .08s ease,filter .08s ease,opacity .08s ease; } #authScreen .matrix-pill-secret:active{transform:none!important} #authScreen .matrix-pill-secret:active::before{ transform:translate(-50%,-50%) rotate(-19deg) scale(.88); filter:saturate(.9) brightness(.92); opacity:1; } #authScreen .matrix-pill-secret:focus-visible{ outline:1px dashed rgba(110,255,135,.38)!important; outline-offset:-10px!important; } #authScreen .matrix-pill-secret.matrix-pill-hidden{ opacity:0!important; pointer-events:none!important; visibility:hidden!important; } /* ====================================================================== 25/08/2026 — V136 : fiche Film/Série + Easter Egg DeLorean - supprime le filet de contenu visible entre le décor voitures et la nav - hotspot limité à la DeLorean, sans toucher au PNG validé - voyage temporel entièrement CSS/JS ====================================================================== */ #detailModal .detail-bottom-decor-wrap{ bottom:calc(var(--ttf-nav-bottom,7px) + var(--ttf-nav-height,84px) - 7px)!important; background:#000!important; } #detailModal .detail-bottom-decor{z-index:1!important;} #detailModal .detail-delorean-easteregg{ position:absolute!important; z-index:4!important; left:0!important; bottom:0!important; width:54%!important; height:82%!important; display:block!important; pointer-events:auto!important; touch-action:manipulation!important; -webkit-tap-highlight-color:transparent!important; background:transparent!important; cursor:pointer!important; } @media(max-width:430px){ #detailModal .detail-bottom-decor-wrap{ bottom:calc(var(--ttf-nav-bottom,7px) + var(--ttf-nav-height,84px) - 7px)!important; } #detailModal .detail-delorean-easteregg{width:56%!important;height:84%!important;} } /* Le nouveau message Matrix est volontairement plus long : il reste lisible sans déborder. */ .matrix-message{width:min(92vw,760px)!important;gap:0!important;} .matrix-message strong{ max-width:100%!important; font-size:clamp(21px,6.1vw,46px)!important; line-height:1.12!important; letter-spacing:.075em!important; text-wrap:balance; } .easter-delorean-experience{ position:fixed;z-index:12500;inset:0;overflow:hidden;pointer-events:none; background:#010509;opacity:0;transition:opacity .18s ease; } .easter-delorean-experience.is-running{opacity:1;} .easter-delorean-blackout{ position:absolute;z-index:1;inset:0; background:radial-gradient(ellipse at 50% 58%,rgba(15,65,80,.12),rgba(0,0,0,.80) 62%,#000 100%); } .easter-delorean-tunnel{ position:absolute;z-index:2;left:50%;top:50%;width:145vmax;height:145vmax; transform:translate(-50%,-50%) scale(.12) rotate(0deg);opacity:0; border-radius:50%; background: repeating-radial-gradient(circle at center,transparent 0 3.2%,rgba(91,221,255,.12) 3.5% 3.9%,transparent 4.2% 7.4%), conic-gradient(from 0deg,transparent,rgba(65,195,255,.14),transparent 16%,rgba(255,126,0,.11),transparent 31%,rgba(83,222,255,.12),transparent 51%,rgba(255,143,25,.10),transparent 73%,rgba(80,217,255,.13),transparent); filter:blur(.2px) contrast(1.15); animation:easterDeloreanTunnel 2.45s cubic-bezier(.11,.64,.23,1) .10s forwards; } .easter-delorean-streaks{position:absolute;z-index:3;inset:0;overflow:hidden;opacity:0;transition:opacity .12s ease .08s;} .easter-delorean-streaks i{ position:absolute;left:-45vw;top:var(--y);width:var(--w);height:2px;border-radius:999px; background:linear-gradient(90deg,transparent,rgba(177,240,255,.94) 42%,rgba(255,148,44,.88)); box-shadow:0 0 7px rgba(104,224,255,.75),0 0 18px rgba(255,128,20,.26); opacity:var(--op);transform:skewX(-24deg); animation:easterDeloreanStreak var(--dur) cubic-bezier(.12,.72,.24,1) var(--delay) 3; } .easter-delorean-flash{ position:absolute;z-index:5;inset:-15%;opacity:0; background:radial-gradient(circle at 44% 58%,#fff 0 1%,rgba(161,241,255,.96) 3%,rgba(76,201,255,.42) 10%,rgba(255,132,20,.20) 18%,transparent 38%); mix-blend-mode:screen;animation:easterDeloreanFlash 2.5s ease .18s forwards; } .easter-delorean-speed{ position:absolute;z-index:6;left:50%;top:48%;transform:translate(-50%,-50%) scale(.58); display:flex;align-items:flex-end;gap:8px;opacity:0; font-family:ui-monospace,SFMono-Regular,Consolas,monospace;text-shadow:0 0 14px rgba(86,222,255,.82),0 0 30px rgba(255,118,0,.38); animation:easterDeloreanSpeed 2.7s cubic-bezier(.2,.8,.2,1) .30s forwards; } .easter-delorean-speed strong{color:#eaffff;font-size:clamp(72px,24vw,150px);line-height:.78;letter-spacing:-.08em;} .easter-delorean-speed small{color:#ff8b24;font-size:clamp(18px,5vw,34px);font-weight:900;letter-spacing:.12em;padding-bottom:.08em;} .easter-delorean-caption{ position:absolute;z-index:9;left:50%;top:50%;width:min(90vw,700px);padding:22px 18px; transform:translate(-50%,-44%) scale(.90);opacity:0;text-align:center; border:1px solid rgba(104,220,255,.36);border-radius:18px; background:linear-gradient(180deg,rgba(3,10,14,.94),rgba(2,2,2,.96)); box-shadow:0 0 34px rgba(78,205,255,.22),inset 0 0 24px rgba(255,122,0,.05); transition:opacity .36s ease,transform .42s cubic-bezier(.2,.8,.2,1); } .easter-delorean-caption strong{display:block;color:#f5fbff;font-size:clamp(28px,8vw,48px);line-height:1;letter-spacing:.075em;font-weight:1000;text-shadow:0 0 14px rgba(113,225,255,.54);} .easter-delorean-caption small{display:block;margin-top:12px;color:#ff9a38;font-size:clamp(13px,3.7vw,20px);line-height:1.35;font-weight:750;letter-spacing:.01em;} .easter-delorean-experience.is-running .easter-delorean-streaks{opacity:1;} .easter-delorean-experience.show-caption .easter-delorean-speed{opacity:0!important;transition:opacity .18s ease;} .easter-delorean-experience.show-caption .easter-delorean-caption{opacity:1;transform:translate(-50%,-50%) scale(1);} .easter-delorean-experience.is-ending{opacity:0;transition:opacity .52s ease;} body.easter-delorean-mode .mobile-shell{animation:easterDeloreanShake .18s linear 9;filter:brightness(.60) contrast(1.15) saturate(.78);} @keyframes easterDeloreanTunnel{ 0%{opacity:0;transform:translate(-50%,-50%) scale(.10) rotate(0deg)} 18%{opacity:.72} 78%{opacity:.92;transform:translate(-50%,-50%) scale(1.08) rotate(14deg)} 100%{opacity:0;transform:translate(-50%,-50%) scale(1.72) rotate(19deg)} } @keyframes easterDeloreanStreak{ 0%{transform:translateX(0) skewX(-24deg) scaleX(.15);opacity:0} 18%{opacity:var(--op)} 100%{transform:translateX(155vw) skewX(-24deg) scaleX(1.25);opacity:0} } @keyframes easterDeloreanFlash{ 0%,13%,100%{opacity:0;transform:scale(.55)} 18%{opacity:.95;transform:scale(.82)} 25%{opacity:.14;transform:scale(1.02)} 34%{opacity:.72;transform:scale(1.18)} 48%{opacity:.10;transform:scale(1.35)} } @keyframes easterDeloreanSpeed{ 0%{opacity:0;transform:translate(-50%,-50%) scale(.58);filter:blur(7px)} 22%{opacity:1;filter:blur(0)} 66%{opacity:1;transform:translate(-50%,-50%) scale(1)} 100%{opacity:0;transform:translate(-50%,-50%) scale(1.34);filter:blur(4px)} } @keyframes easterDeloreanShake{0%,100%{transform:translate(0,0)}25%{transform:translate(-1px,1px)}50%{transform:translate(1px,-1px)}75%{transform:translate(1px,1px)}} @media(prefers-reduced-motion:reduce){ .easter-delorean-experience *{animation:none!important;transition:none!important;} .easter-delorean-tunnel,.easter-delorean-streaks,.easter-delorean-flash{display:none!important;} .easter-delorean-speed{opacity:0!important;} .easter-delorean-caption{opacity:1!important;transform:translate(-50%,-50%) scale(1)!important;} body.easter-delorean-mode .mobile-shell{animation:none!important;filter:brightness(.72)!important;} } /* ====================================================================== 25/08/2026 — V137 : signatures typographiques propres à chaque Easter Egg. CSS/JS uniquement. Aucun asset image n'est modifié. ====================================================================== */ /* L'annonce de découverte devient un simple sceau discret : elle ne concurrence plus le vrai message final propre à chaque secret. */ .easter-egg-reveal{ top:auto!important;bottom:max(96px,calc(env(safe-area-inset-bottom) + 92px))!important; width:auto!important;max-width:min(78vw,430px)!important;padding:7px 12px!important; border:0!important;border-radius:999px!important;background:rgba(0,0,0,.72)!important; box-shadow:0 6px 22px rgba(0,0,0,.58)!important;backdrop-filter:blur(7px); font-family:Arial,sans-serif!important;animation:easterRevealSeal 2.25s ease forwards!important; } .easter-egg-reveal strong{display:none!important} .easter-egg-reveal small{margin:0!important;color:rgba(255,255,255,.78)!important;font-size:11px!important;letter-spacing:.12em!important;text-transform:uppercase!important;font-weight:800} @keyframes easterRevealSeal{0%{opacity:0;transform:translate(-50%,8px) scale(.94)}14%,78%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,5px) scale(.98)}} /* PROJECTION — carton de séance, lumière chaude et filets cinéma. */ .easter-projection-caption{ width:min(88vw,620px)!important;padding:22px 18px!important;border:0!important;border-radius:0!important; background:transparent!important;box-shadow:none!important;font-family:Georgia,'Times New Roman',serif!important; text-shadow:0 3px 18px #000!important; } .easter-projection-caption::before{content:"✦ TONTONFLIX ✦";display:block;margin-bottom:13px;color:#d7a65b;font-size:clamp(9px,2.8vw,14px);letter-spacing:.28em;font-weight:700;opacity:.9} .easter-projection-caption .projection-rule{display:block;width:min(66vw,390px);height:1px;margin:11px auto;background:linear-gradient(90deg,transparent,#e2b36c 24%,#fff0cb 50%,#e2b36c 76%,transparent);box-shadow:0 0 12px rgba(255,198,105,.38)} .easter-projection-caption strong{color:#f7e8c8!important;font-size:clamp(30px,8.7vw,56px)!important;letter-spacing:.12em!important;font-weight:700!important;text-transform:uppercase;text-shadow:0 0 12px rgba(255,199,111,.38),0 4px 25px #000!important;animation:v137ProjectionTitle 1.5s ease-in-out infinite alternate} .easter-projection-caption small{margin-top:10px!important;color:#d8c6a8!important;font:italic 400 clamp(12px,3.4vw,18px)/1.4 Georgia,'Times New Roman',serif!important;letter-spacing:.08em!important} @keyframes v137ProjectionTitle{from{filter:brightness(.92);text-shadow:0 0 7px rgba(255,199,111,.24),0 4px 25px #000}to{filter:brightness(1.12);text-shadow:0 0 18px rgba(255,199,111,.52),0 4px 25px #000}} /* VHS — vrai OSD magnétoscope, sans carte ni contour orange. */ .easter-vhs-caption{ width:min(88vw,580px)!important;padding:16px 20px!important;border:0!important;border-radius:0!important; background:transparent!important;box-shadow:none!important;text-align:left!important; font-family:'Courier New',ui-monospace,monospace!important;filter:contrast(1.1); } .easter-vhs-caption .vhs-rec{display:block;color:#ff4e4e;font:bold clamp(10px,3vw,14px)/1 'Courier New',monospace;letter-spacing:.18em;margin-bottom:7px;text-shadow:2px 2px 0 #000;animation:v137VhsRec .72s steps(1,end) infinite} .easter-vhs-caption strong{position:relative;display:inline-block!important;color:#f5f5f1!important;font:900 clamp(31px,10vw,58px)/.94 'Courier New',monospace!important;letter-spacing:.06em!important;text-shadow:3px 0 rgba(255,0,55,.48),-3px 0 rgba(0,225,255,.44),2px 3px 0 #000!important;animation:v137VhsTitle .21s steps(2,end) infinite} .easter-vhs-caption strong::after{content:attr(data-text);position:absolute;inset:0;color:rgba(255,255,255,.5);clip-path:inset(44% 0 34% 0);transform:translateX(2px);mix-blend-mode:screen} .easter-vhs-caption small{display:block!important;margin-top:9px!important;color:#e9e9e4!important;font:bold clamp(10px,3.1vw,15px)/1.35 'Courier New',monospace!important;letter-spacing:.08em!important;text-shadow:2px 2px 0 #000!important} @keyframes v137VhsRec{0%,48%{opacity:1}49%,100%{opacity:.18}} @keyframes v137VhsTitle{0%,100%{transform:translateX(0);filter:blur(0)}33%{transform:translateX(-1px)}66%{transform:translateX(1px);filter:blur(.18px)}} /* FREDDY — lettres lacérées, irrégulières et sans popup générique. */ .easter-freddy-caption{ width:min(94vw,760px)!important;padding:8px 10px!important;border:0!important;border-radius:0!important; background:transparent!important;box-shadow:none!important;overflow:visible!important; transform:translate(-50%,-50%) rotate(-2deg) scale(.94)!important; } .easter-freddy-caption strong{position:relative;display:inline-block!important;color:#c82c17!important;font-family:Impact,'Arial Black','Arial Narrow',sans-serif!important;font-size:clamp(42px,13vw,88px)!important;line-height:.82!important;font-weight:1000!important;letter-spacing:-.035em!important;text-transform:uppercase;transform:skewX(-8deg);filter:drop-shadow(0 4px 0 #170000) drop-shadow(0 0 11px rgba(255,35,0,.3));text-shadow:3px -2px 0 #521006,-2px 2px 0 #2b0500!important;clip-path:polygon(0 5%,9% 0,17% 9%,28% 1%,39% 7%,49% 0,58% 9%,69% 1%,79% 8%,90% 0,100% 6%,97% 28%,100% 44%,96% 59%,100% 78%,95% 100%,84% 94%,75% 100%,63% 91%,51% 100%,42% 92%,29% 100%,18% 91%,7% 100%,2% 85%,5% 68%,0 52%,4% 31%);animation:v137FreddyCut .16s steps(2,end) 6} .easter-freddy-caption strong::before,.easter-freddy-caption strong::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none} .easter-freddy-caption strong::before{color:#f05a28;clip-path:polygon(0 13%,100% 2%,100% 28%,0 38%);transform:translate(-3px,-2px);opacity:.72} .easter-freddy-caption strong::after{color:#7b110a;clip-path:polygon(0 62%,100% 48%,100% 74%,0 88%);transform:translate(4px,3px);opacity:.9} .easter-freddy-caption small{margin-top:16px!important;color:#c8b8b2!important;font:italic 500 clamp(11px,3.2vw,16px)/1.3 Georgia,serif!important;letter-spacing:.04em!important;text-shadow:0 2px 7px #000!important} .easter-freddy-experience.show-caption .easter-freddy-caption{transform:translate(-50%,-50%) rotate(-2deg) scale(1)!important} @keyframes v137FreddyCut{0%,100%{translate:0 0}35%{translate:-2px 1px}70%{translate:2px -1px}} /* THE CROW — typographie gothique/mystique qui flotte dans la brume. */ .easter-crow-caption{width:min(92vw,720px)!important;padding:10px 12px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important} .easter-crow-caption .crow-ornament{display:block;color:rgba(214,222,235,.54);font-size:clamp(13px,4vw,20px);margin:4px auto 8px;text-shadow:0 0 12px rgba(225,235,255,.36)} .easter-crow-caption strong{font-family:Georgia,'Times New Roman',serif!important;font-size:clamp(34px,10vw,66px)!important;line-height:.92!important;letter-spacing:.16em!important;font-weight:500!important;color:#eef0f4!important;text-transform:uppercase;text-shadow:0 0 8px rgba(220,230,245,.26),0 0 30px rgba(170,188,216,.20),0 8px 28px #000!important;filter:blur(.15px);animation:v137CrowBreath 2.2s ease-in-out infinite alternate} .easter-crow-caption small{margin-top:14px!important;color:rgba(218,222,230,.72)!important;font:italic 400 clamp(11px,3.3vw,17px)/1.45 Georgia,'Times New Roman',serif!important;letter-spacing:.045em!important;text-shadow:0 4px 12px #000!important} @keyframes v137CrowBreath{from{letter-spacing:.145em;filter:blur(.28px);opacity:.82}to{letter-spacing:.18em;filter:blur(0);opacity:1}} /* MATRIX — terminal vert, code/glitch et curseur, sans cadre. */ .matrix-message{width:min(94vw,820px)!important;gap:6px!important;text-align:left!important;align-items:flex-start!important;padding:18px 20px!important;background:linear-gradient(90deg,rgba(0,18,3,.72),rgba(0,5,0,.28),transparent)!important;border-left:2px solid rgba(84,255,104,.72);box-shadow:-10px 0 34px rgba(16,255,64,.10)!important} .matrix-message .matrix-prompt{display:block;color:#4cff69;font:600 clamp(9px,2.7vw,14px)/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.07em;opacity:.72;text-shadow:0 0 7px rgba(50,255,90,.65);margin-bottom:6px} .matrix-message strong{position:relative!important;display:inline!important;color:#70ff7f!important;font-family:ui-monospace,SFMono-Regular,Consolas,monospace!important;font-size:clamp(24px,6.7vw,49px)!important;line-height:1.12!important;letter-spacing:.045em!important;font-weight:800!important;text-align:left!important;text-shadow:0 0 5px #25ff4b,0 0 17px rgba(35,255,75,.48)!important;animation:v137MatrixGlitch .34s steps(2,end) 4} .matrix-message strong::before,.matrix-message strong::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none;opacity:.38} .matrix-message strong::before{color:#baffc1;clip-path:inset(8% 0 62% 0);transform:translateX(-2px)} .matrix-message strong::after{color:#1eff4e;clip-path:inset(58% 0 10% 0);transform:translateX(2px)} .matrix-message .matrix-cursor{display:inline-block;color:#78ff85;font:700 clamp(18px,5.2vw,34px)/1 ui-monospace,monospace;animation:v137MatrixCursor .56s steps(1,end) infinite;text-shadow:0 0 8px #35ff58} @keyframes v137MatrixGlitch{0%,100%{transform:translateX(0)}25%{transform:translateX(-2px)}50%{transform:translateX(1px)}75%{transform:translateX(2px)}} @keyframes v137MatrixCursor{0%,46%{opacity:1}47%,100%{opacity:0}} /* DELOREAN — phrase temporelle électrique, sans carte noire. */ .easter-delorean-caption{width:min(94vw,760px)!important;padding:10px 12px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important} .easter-delorean-caption .delorean-electric-line{display:block;width:min(80vw,520px);height:2px;margin:12px auto;background:linear-gradient(90deg,transparent,#61dfff 19%,#fff 48%,#ff8a27 75%,transparent);box-shadow:0 0 8px #66e2ff,0 0 19px rgba(255,125,33,.45);animation:v137TimeLine .56s ease-in-out infinite alternate} .easter-delorean-caption strong{color:#f7fdff!important;font-family:'Arial Narrow',Arial,sans-serif!important;font-size:clamp(38px,11vw,72px)!important;line-height:.9!important;letter-spacing:.055em!important;font-weight:1000!important;font-style:italic;transform:skewX(-8deg);text-shadow:-3px 0 0 rgba(64,211,255,.58),3px 0 0 rgba(255,128,32,.58),0 0 16px rgba(120,232,255,.72),0 0 34px rgba(255,127,28,.28)!important;animation:v137TimePulse .76s ease-in-out infinite alternate} .easter-delorean-caption small{margin-top:15px!important;color:#ffaf65!important;font-family:'Arial Narrow',Arial,sans-serif!important;font-size:clamp(15px,4.2vw,23px)!important;line-height:1.28!important;font-weight:800!important;letter-spacing:.025em!important;text-shadow:0 0 8px rgba(255,125,32,.44),0 3px 15px #000!important} @keyframes v137TimeLine{from{filter:brightness(.78);transform:scaleX(.91)}to{filter:brightness(1.35);transform:scaleX(1)}} @keyframes v137TimePulse{from{filter:brightness(.92);transform:skewX(-8deg) scale(.98)}to{filter:brightness(1.16);transform:skewX(-8deg) scale(1.015)}} @media(prefers-reduced-motion:reduce){ .easter-projection-caption strong,.easter-vhs-caption strong,.easter-vhs-caption .vhs-rec,.easter-freddy-caption strong,.easter-crow-caption strong,.matrix-message strong,.matrix-message .matrix-cursor,.easter-delorean-caption strong,.easter-delorean-caption .delorean-electric-line{animation:none!important} } /* V138 — HIGHLANDER : épée secrète sur Recherche + Quickening 100% CSS/JS. Aucun asset image n'est modifié. */ #searchScreen .highlander-sword-secret{ position:absolute!important; right:5.2%!important; top:auto!important; bottom:calc(var(--ttf-nav-height) + clamp(7px,1.2dvh,12px))!important; width:8.8%!important; height:18.4%!important; z-index:790!important; margin:0!important; padding:0!important; border:0!important; outline:0!important; background:transparent!important; box-shadow:none!important; cursor:pointer!important; -webkit-tap-highlight-color:transparent!important; touch-action:manipulation!important; transform:rotate(72deg)!important; transform-origin:50% 86%!important; opacity:.94!important; } #searchScreen .highlander-sword-secret:focus-visible{outline:1px dashed rgba(255,255,255,.24)!important;outline-offset:2px!important} #searchScreen .highlander-sword-secret>span{position:absolute!important;display:block!important;pointer-events:none!important} #searchScreen .highlander-sword-blade{ left:46%!important;bottom:33%!important;width:7%!important;height:67%!important; border-radius:80% 80% 22% 22%!important; background:linear-gradient(90deg,#262a2d 0%,#a5aeb5 27%,#f7fbff 49%,#78828a 70%,#171a1d 100%)!important; clip-path:polygon(50% 0,92% 7%,68% 100%,28% 100%,8% 7%)!important; box-shadow:0 0 3px rgba(230,243,255,.32),1px 0 0 rgba(255,255,255,.3)!important; opacity:.58!important; } #searchScreen .highlander-sword-guard{ left:17%!important;bottom:28%!important;width:67%!important;height:6%!important; border-radius:70% 18% 70% 18%!important; background:linear-gradient(90deg,#352716,#b9853b 27%,#e1bb70 50%,#7c572a 76%,#2a1c10)!important; box-shadow:0 1px 2px #000,0 0 3px rgba(255,189,91,.28)!important; opacity:.8!important; } #searchScreen .highlander-sword-grip{ left:40%!important;bottom:5%!important;width:18%!important;height:25%!important; border-radius:25%!important; background:repeating-linear-gradient(0deg,#14110f 0 8%,#5f4529 9% 15%,#1b1714 16% 24%)!important; box-shadow:inset 1px 0 rgba(255,214,145,.16),0 2px 3px #000!important; opacity:.92!important; } #searchScreen .highlander-sword-pommel{ left:38%!important;bottom:0!important;width:22%!important;height:7%!important;border-radius:50%!important; background:radial-gradient(circle at 45% 35%,#d3aa65 0 18%,#6c4927 42%,#21160e 78%)!important; box-shadow:0 1px 3px #000!important;opacity:.88!important; } #searchScreen .highlander-sword-secret:active{transform:rotate(72deg) scale(.98)!important} body.easter-highlander-mode{overflow:hidden!important} .easter-highlander-experience{position:fixed;inset:0;z-index:2147482500;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .18s ease;background:rgba(0,4,9,.08)} .easter-highlander-experience.is-running{opacity:1} .easter-highlander-sky{position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,rgba(77,170,255,.16),transparent 36%),linear-gradient(rgba(0,8,19,.08),rgba(0,1,7,.54));opacity:0;animation:highlanderSky 4.4s ease forwards} .easter-highlander-electric{position:absolute;inset:-7%;filter:drop-shadow(0 0 7px #62baff) drop-shadow(0 0 18px rgba(108,197,255,.55))} .easter-highlander-bolt{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:3px;transform-origin:0 50%;transform:rotate(var(--rot)) scaleX(0);background:linear-gradient(90deg,transparent 0,#dfffff 13%,#78cfff 42%,#fff 68%,transparent 100%);clip-path:polygon(0 30%,18% 0,29% 63%,46% 12%,58% 72%,72% 18%,100% 48%,82% 68%,69% 46%,55% 100%,43% 42%,26% 86%,14% 51%);opacity:0;animation:highlanderBolt var(--dur) steps(2,end) var(--delay) 3} .easter-highlander-flash{position:absolute;inset:0;background:#e9f8ff;opacity:0;mix-blend-mode:screen;animation:highlanderFlash 4.25s steps(1,end) forwards} .easter-highlander-sword-ghost{position:absolute;left:50%;top:52%;width:9px;height:min(58vh,470px);transform:translate(-50%,-50%) rotate(-8deg);opacity:0;filter:drop-shadow(0 0 7px #a8e3ff) drop-shadow(0 0 22px #309fff);animation:highlanderSwordRise 4.5s ease forwards} .easter-highlander-sword-ghost::before{content:"";position:absolute;left:1px;top:0;width:7px;height:78%;clip-path:polygon(50% 0,100% 7%,69% 100%,29% 100%,0 7%);background:linear-gradient(90deg,#497a9a,#fff 48%,#8bd7ff 66%,#254a68)} .easter-highlander-sword-ghost::after{content:"";position:absolute;left:-34px;top:77%;width:78px;height:8px;border-radius:70% 16% 70% 16%;background:linear-gradient(90deg,#5a3c17,#e5b95c 45%,#fff1a7 52%,#7e541e);box-shadow:0 0 9px rgba(255,220,129,.45)} .easter-highlander-caption{position:absolute;left:50%;top:51%;transform:translate(-50%,-50%) scale(.86);width:min(94vw,900px);text-align:center;opacity:0;filter:blur(5px);transition:opacity .48s ease,transform .55s cubic-bezier(.18,.8,.24,1),filter .5s ease} .easter-highlander-experience.show-caption .easter-highlander-caption{opacity:1;filter:blur(0);transform:translate(-50%,-50%) scale(1)} .easter-highlander-caption::before,.easter-highlander-caption::after{content:"";display:block;width:min(76vw,620px);height:2px;margin:12px auto;background:linear-gradient(90deg,transparent,#62c6ff 20%,#fff 50%,#62c6ff 80%,transparent);box-shadow:0 0 8px #5bc8ff,0 0 24px rgba(52,159,255,.72);animation:highlanderLine .32s ease-in-out infinite alternate} .easter-highlander-caption strong{position:relative;display:block;color:#ecfbff;font-family:Impact,'Arial Narrow','Arial Black',sans-serif;font-size:clamp(37px,11vw,82px);font-style:italic;font-weight:1000;line-height:.9;letter-spacing:.035em;text-transform:uppercase;text-shadow:-3px 0 0 rgba(60,142,255,.58),3px 0 0 rgba(210,247,255,.48),0 0 9px #fff,0 0 22px #5ac5ff,0 0 48px rgba(52,130,255,.72);filter:drop-shadow(0 5px 15px #000);animation:highlanderTitle 1.05s ease-in-out infinite alternate} .easter-highlander-caption small{display:block;margin-top:13px;color:#9ddcff;font:700 clamp(10px,3.2vw,16px)/1.35 'Arial Narrow',Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase;text-shadow:0 0 9px rgba(82,188,255,.8),0 3px 12px #000} .easter-highlander-experience.is-ending{opacity:0;transition:opacity .48s ease} @keyframes highlanderSky{0%{opacity:0}12%{opacity:1}80%{opacity:1}100%{opacity:.12}} @keyframes highlanderBolt{0%,100%{transform:rotate(var(--rot)) scaleX(0);opacity:0}11%{opacity:1}18%{transform:rotate(var(--rot)) scaleX(1);opacity:1}31%{opacity:.24}44%{transform:rotate(var(--rot)) scaleX(.55);opacity:0}} @keyframes highlanderFlash{0%,8%,14%,24%,35%,100%{opacity:0}9%,15%,25%{opacity:.72}10%,16%,26%{opacity:.08}36%{opacity:.34}37%{opacity:0}} @keyframes highlanderSwordRise{0%,12%{opacity:0;transform:translate(-50%,-40%) rotate(-8deg) scale(.72)}25%,78%{opacity:.7;transform:translate(-50%,-50%) rotate(-8deg) scale(1)}100%{opacity:0;transform:translate(-50%,-58%) rotate(-8deg) scale(1.06)}} @keyframes highlanderLine{from{filter:brightness(.8);transform:scaleX(.91)}to{filter:brightness(1.5);transform:scaleX(1)}} @keyframes highlanderTitle{from{filter:brightness(.92);letter-spacing:.03em}to{filter:brightness(1.24);letter-spacing:.055em}} @media(prefers-reduced-motion:reduce){ .easter-highlander-bolt,.easter-highlander-flash,.easter-highlander-sword-ghost,.easter-highlander-caption::before,.easter-highlander-caption::after,.easter-highlander-caption strong{animation:none!important} .easter-highlander-sky{animation:none!important;opacity:.7!important} } /* ========================================================================== */ /* V139 — CINEMATIC EASTER EGGS: cible visuelle de la maquette validée */ /* Aucun asset image : uniquement CSS/JS. */ /* ========================================================================== */ /* PROJECTION — salle noire, halo réel, poussière et compte-à-rebours cinéma */ .easter-projection-experience{background:radial-gradient(circle at 18% 86%,rgba(255,132,32,.12),transparent 28%),rgba(0,0,0,.72)!important} .easter-projector-cone{position:absolute;left:-12vw;bottom:-10vh;width:92vw;height:92vh;clip-path:polygon(0 88%,100% 0,100% 100%,0 100%);background:linear-gradient(115deg,rgba(255,179,77,.02),rgba(255,198,122,.22) 48%,rgba(255,255,230,.05));filter:blur(6px);mix-blend-mode:screen;opacity:.8;animation:v139Cone 3.7s ease-in-out infinite alternate} .easter-projector-dust{position:absolute;inset:0;opacity:.42;background-image:radial-gradient(circle,#fff 0 1px,transparent 1.5px),radial-gradient(circle,#ffd39b 0 1px,transparent 1.5px);background-size:31px 27px,47px 43px;background-position:0 0,13px 19px;filter:blur(.2px);animation:v139Dust 7s linear infinite} .easter-projector-reel{position:absolute;bottom:5.5vh;width:70px;height:70px;border:6px solid rgba(255,160,55,.25);border-radius:50%;box-shadow:0 0 24px rgba(255,129,32,.18),inset 0 0 0 7px rgba(0,0,0,.8);animation:v139Reel .78s linear infinite;opacity:.7} .easter-projector-reel::before,.easter-projector-reel::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:52px;background:rgba(255,183,92,.25);transform-origin:50% 50%;transform:translate(-50%,-50%) rotate(0)} .easter-projector-reel::after{transform:translate(-50%,-50%) rotate(90deg)} .easter-projector-reel.reel-a{left:4vw}.easter-projector-reel.reel-b{left:20vw;transform:scale(.72);animation-direction:reverse} .easter-projection-countdown span{font-size:clamp(100px,40vw,260px)!important;color:#fff1cf!important;text-shadow:0 0 8px rgba(255,239,196,.7),0 0 46px rgba(255,141,36,.38),0 14px 35px #000!important;font-family:Georgia,serif!important;font-weight:900!important;mix-blend-mode:screen} .easter-projection-countdown::before,.easter-projection-countdown::after{content:"";position:absolute;left:50%;top:50%;border:2px solid rgba(255,235,196,.42);border-radius:50%;transform:translate(-50%,-50%);width:min(58vw,330px);aspect-ratio:1} .easter-projection-countdown::after{width:min(44vw,245px)} .easter-projection-caption{top:58%!important;text-shadow:0 8px 34px #000!important} .easter-projection-caption strong{font-size:clamp(42px,12vw,86px)!important;letter-spacing:.12em!important;color:#ffe2aa!important;text-shadow:0 0 12px rgba(255,194,104,.6),0 0 42px rgba(255,114,20,.3),0 7px 20px #000!important} /* VHS — dérèglement analogique plus violent et "sale" */ .easter-vhs-experience{background:rgba(0,0,0,.34)!important;filter:saturate(.68) contrast(1.2)} .easter-vhs-head-switch{position:absolute;left:-10%;right:-10%;bottom:1%;height:13%;background:repeating-linear-gradient(0deg,rgba(255,255,255,.13) 0 2px,rgba(0,0,0,.42) 2px 7px);filter:blur(1px);opacity:.58;animation:v139HeadSwitch .19s steps(2,end) infinite} .easter-vhs-tear{position:absolute;left:-5%;width:110%;height:9%;background:linear-gradient(90deg,transparent,rgba(0,255,255,.2),rgba(255,0,90,.24),transparent);mix-blend-mode:screen;filter:blur(2px);opacity:0} .easter-vhs-tear.tear-a{top:26%;animation:v139VhsTear 1.2s steps(2,end) .4s infinite}.easter-vhs-tear.tear-b{top:64%;animation:v139VhsTear 1.55s steps(2,end) .1s infinite reverse} .easter-vhs-tracking-band{height:14%!important;box-shadow:0 0 34px rgba(255,255,255,.2)!important} .easter-vhs-scanlines{opacity:.62!important;background-size:100% 4px!important} .easter-vhs-caption{transform:translate(-50%,-50%) skewX(-2deg)!important;background:rgba(0,0,0,.24)!important;padding:16px 18px!important;border-left:4px solid rgba(245,245,230,.85)!important} .easter-vhs-caption strong{font-size:clamp(48px,15vw,98px)!important;letter-spacing:.04em!important;text-shadow:3px 0 #f33,-3px 0 #35d9ff,0 0 4px #fff!important} .easter-vhs-osd,.easter-vhs-timecode{font-size:clamp(18px,5vw,30px)!important;text-shadow:2px 2px 0 #000,0 0 7px rgba(255,255,255,.75)!important} /* FREDDY — rouge cauchemar, lacérations beaucoup plus présentes */ .easter-freddy-bloodglow{position:absolute;inset:0;background:radial-gradient(circle at 50% 56%,rgba(140,0,0,.46),transparent 48%),linear-gradient(135deg,rgba(90,0,0,.38),transparent 55%);mix-blend-mode:screen;animation:v139Blood 1.1s ease-in-out infinite alternate} .easter-freddy-slashes .slash{box-shadow:0 0 5px #ff5235,0 0 16px rgba(255,28,0,.72),0 0 34px rgba(130,0,0,.42)!important;background:linear-gradient(90deg,transparent,#ff9a77 10%,#fff2dd 48%,#ff3b1f 65%,transparent)!important} .easter-freddy-caption{top:53%!important;transform:translate(-50%,-50%) rotate(-3deg)!important} .easter-freddy-caption strong{font-family:Impact,'Arial Black',sans-serif!important;font-size:clamp(46px,14vw,100px)!important;letter-spacing:-.025em!important;clip-path:polygon(0 3%,100% 0,97% 24%,100% 43%,95% 61%,100% 83%,96% 100%,2% 97%,5% 78%,0 58%,4% 35%);color:#f6b09b!important;text-shadow:-3px 5px 0 #300,0 0 7px #ff4327,0 0 28px rgba(255,0,0,.64)!important;filter:contrast(1.4) saturate(1.35)} .easter-freddy-caption small{color:#d8a295!important;letter-spacing:.08em!important} /* MATRIX — "mur" de code vert, terminal plus profond et lumineux */ .matrix-easter-experience{background:#000!important} .matrix-horizon{position:absolute;left:50%;top:50%;width:160vw;height:80vh;transform:translate(-50%,-40%) perspective(480px) rotateX(68deg);background-image:linear-gradient(rgba(20,255,62,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(20,255,62,.12) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to bottom,transparent,#000 28%,#000 75%,transparent);opacity:.38;animation:v139Grid 2.4s linear infinite} .matrix-code-bloom{position:absolute;inset:0;background:radial-gradient(circle at 50% 52%,rgba(0,255,60,.28),transparent 34%);mix-blend-mode:screen;animation:v139MatrixBloom .68s ease-in-out infinite alternate} .matrix-rain-column{font-size:clamp(12px,3.2vw,23px)!important;line-height:1.03!important;text-shadow:0 0 5px #2cff53,0 0 10px rgba(30,255,65,.7)!important} .matrix-message{left:5%!important;right:5%!important;top:52%!important;transform:translateY(-50%)!important;width:auto!important;border-left:3px solid #43ff65!important;background:linear-gradient(90deg,rgba(0,20,3,.88),rgba(0,9,0,.52) 65%,transparent)!important;box-shadow:-14px 0 42px rgba(0,255,60,.18)!important;padding:22px 18px!important} .matrix-message strong{font-size:clamp(31px,8.6vw,64px)!important;line-height:1.02!important;letter-spacing:.02em!important;text-transform:uppercase;text-shadow:0 0 5px #49ff68,0 0 14px #1cff47,0 0 36px rgba(0,255,40,.48)!important} .matrix-message .matrix-prompt{font-size:clamp(12px,3.4vw,19px)!important;color:#8dff9c!important} /* CROW — nuée plus dramatique, lune froide et tempête en profondeur */ .easter-crow-moon{position:absolute;right:8vw;top:9vh;width:min(31vw,180px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 38% 36%,#f1f5ff,#bfc8d4 50%,#6a7480 72%,transparent 74%);filter:blur(.3px) drop-shadow(0 0 34px rgba(210,225,255,.28));opacity:.26;mix-blend-mode:screen} .easter-crow-storm{position:absolute;inset:-15%;background:radial-gradient(ellipse at 30% 26%,rgba(111,126,148,.18),transparent 28%),radial-gradient(ellipse at 72% 40%,rgba(70,82,103,.28),transparent 34%),linear-gradient(160deg,rgba(15,19,27,.2),rgba(0,0,0,.75));filter:blur(9px);animation:v139Storm 2.2s ease-in-out infinite alternate} .easter-crow-caption strong{font-size:clamp(43px,12.5vw,88px)!important;letter-spacing:.08em!important;text-shadow:0 0 7px rgba(230,238,255,.34),0 0 25px rgba(150,169,200,.26),0 12px 36px #000!important} /* DELOREAN — vortex, grille de route, arcs électriques et 88 MPH massif */ .easter-delorean-roadgrid{position:absolute;left:50%;bottom:-16%;width:180vw;height:70vh;transform:translateX(-50%) perspective(430px) rotateX(66deg);background-image:linear-gradient(rgba(57,206,255,.21) 1px,transparent 1px),linear-gradient(90deg,rgba(255,129,32,.18) 1px,transparent 1px);background-size:55px 38px;mask-image:linear-gradient(to top,#000,transparent 88%);animation:v139Road .55s linear infinite} .easter-delorean-rings{position:absolute;left:50%;top:46%;width:22vmin;aspect-ratio:1;border:3px solid rgba(132,235,255,.75);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 12px #7de9ff,0 0 42px rgba(255,117,23,.65),inset 0 0 26px rgba(112,226,255,.42);animation:v139Rings .65s ease-out infinite} .easter-delorean-arcs{position:absolute;inset:0;background:conic-gradient(from 45deg at 50% 45%,transparent 0 10%,rgba(109,226,255,.24) 11%,transparent 13% 31%,rgba(255,128,30,.22) 32%,transparent 35% 61%,rgba(141,235,255,.26) 62%,transparent 65%);filter:blur(2px);mix-blend-mode:screen;animation:v139Arcs .72s linear infinite} .easter-delorean-speed strong{font-size:clamp(116px,38vw,280px)!important;line-height:.75!important;color:#fff!important;text-shadow:-6px 0 0 #2ed9ff,6px 0 0 #ff7b1e,0 0 20px #fff,0 0 54px rgba(40,202,255,.8)!important;transform:skewX(-12deg)} .easter-delorean-speed small{font-size:clamp(24px,7vw,52px)!important;letter-spacing:.22em!important;color:#ffb266!important} .easter-delorean-caption strong{font-size:clamp(48px,14vw,98px)!important;text-shadow:-4px 0 #33dbff,4px 0 #ff7d1d,0 0 16px #fff,0 0 48px rgba(34,210,255,.58)!important} /* HIGHLANDER — Quickening massif, pluie d'éclairs et halo central */ .easter-highlander-halo{position:absolute;left:50%;top:50%;width:min(86vw,720px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,255,255,.28) 0,rgba(70,184,255,.22) 18%,rgba(36,110,255,.09) 44%,transparent 69%);filter:blur(5px);mix-blend-mode:screen;animation:v139Halo .52s ease-in-out infinite alternate} .easter-highlander-electric{filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 12px #58c8ff) drop-shadow(0 0 30px rgba(47,119,255,.62))!important} .easter-highlander-bolt{height:4px!important;background:linear-gradient(90deg,transparent,#fff 9%,#a6ecff 28%,#fff 54%,#4baeff 72%,transparent)!important} .easter-highlander-flash{mix-blend-mode:screen!important} .easter-highlander-sword-ghost{height:min(68vh,560px)!important;filter:drop-shadow(0 0 7px #fff) drop-shadow(0 0 20px #63cfff) drop-shadow(0 0 46px rgba(56,122,255,.85))!important} .easter-highlander-caption strong{font-size:clamp(48px,13.5vw,104px)!important;letter-spacing:.01em!important;text-shadow:-4px 0 rgba(66,129,255,.7),4px 0 rgba(222,250,255,.7),0 0 9px #fff,0 0 28px #5ac5ff,0 0 64px rgba(39,96,255,.9)!important} @keyframes v139Cone{from{opacity:.47;transform:rotate(-1.2deg)}to{opacity:.9;transform:rotate(1.1deg)}} @keyframes v139Dust{to{background-position:120px 210px,-90px 160px}} @keyframes v139Reel{to{rotate:360deg}} @keyframes v139HeadSwitch{0%{transform:translateX(-4px)}50%{transform:translateX(5px)}100%{transform:translateX(-2px)}} @keyframes v139VhsTear{0%,72%{opacity:0;transform:translateX(0) skewX(0)}74%{opacity:.72;transform:translateX(-8%) skewX(-9deg)}77%{opacity:.3;transform:translateX(6%) skewX(4deg)}81%,100%{opacity:0}} @keyframes v139Blood{from{opacity:.45;filter:brightness(.7)}to{opacity:.88;filter:brightness(1.28)}} @keyframes v139Grid{to{background-position:0 44px,44px 0}} @keyframes v139MatrixBloom{from{opacity:.42}to{opacity:.9}} @keyframes v139Storm{from{transform:translate(-2%,-1%) scale(1.02);opacity:.56}to{transform:translate(2%,1.5%) scale(1.08);opacity:.92}} @keyframes v139Road{to{background-position:0 38px,55px 0}} @keyframes v139Rings{0%{opacity:0;transform:translate(-50%,-50%) scale(.45)}45%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(4.2)}} @keyframes v139Arcs{to{transform:rotate(360deg) scale(1.05)}} @keyframes v139Halo{from{opacity:.46;transform:translate(-50%,-50%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%) scale(1.12)}} @media (prefers-reduced-motion:reduce){ .easter-projector-cone,.easter-projector-dust,.easter-projector-reel,.easter-vhs-head-switch,.easter-vhs-tear,.easter-freddy-bloodglow,.matrix-horizon,.matrix-code-bloom,.easter-crow-storm,.easter-delorean-roadgrid,.easter-delorean-rings,.easter-delorean-arcs,.easter-highlander-halo{animation:none!important} } /* ========================================================================== */ /* V140 — moteur Canvas cinématique */ /* Particules dynamiques par Easter Egg, sans aucun asset image supplémentaire */ /* ========================================================================== */ .easter-cinematic-canvas{ position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none; opacity:.96;mix-blend-mode:screen;filter:saturate(1.08) contrast(1.04); } .easter-canvas-vhs{z-index:8;mix-blend-mode:screen;opacity:.72;filter:contrast(1.2) saturate(.55)} .easter-canvas-freddy{z-index:6;mix-blend-mode:screen;opacity:.82} .easter-canvas-matrix{z-index:3;mix-blend-mode:screen;opacity:.9;filter:contrast(1.18)} .easter-canvas-crow{z-index:5;mix-blend-mode:screen;opacity:.58;filter:blur(.15px)} .easter-canvas-delorean{z-index:7;mix-blend-mode:screen;opacity:1;filter:saturate(1.2) contrast(1.05)} .easter-canvas-highlander{z-index:7;mix-blend-mode:screen;opacity:1;filter:contrast(1.12) saturate(1.08)} .easter-canvas-projection{z-index:4;mix-blend-mode:screen;opacity:.92} /* Finition "maquette" : profondeur accrue tout en laissant les panneaux sous-jacents intacts. */ .easter-projection-experience::after, .easter-delorean-experience::after, .easter-highlander-experience::after, .easter-crow-experience::after, .matrix-easter-experience::after{ content:"";position:absolute;inset:0;pointer-events:none;z-index:2; background:radial-gradient(circle at 50% 48%,transparent 24%,rgba(0,0,0,.18) 64%,rgba(0,0,0,.58) 100%); } .easter-projection-caption,.easter-vhs-caption,.easter-freddy-caption,.easter-crow-caption,.easter-delorean-caption,.easter-highlander-caption,.matrix-message{z-index:30!important} .easter-projection-countdown,.easter-vhs-osd,.easter-vhs-timecode,.easter-delorean-speed{z-index:28!important} @media(prefers-reduced-motion:reduce){ .easter-cinematic-canvas{display:none!important} } /* ========================================================================== */ /* V141 — correctif MODE PROJECTION : titre toujours contenu dans le mobile */ /* Correction ciblée uniquement sur le message final Projection. */ /* ========================================================================== */ .easter-projection-caption{ box-sizing:border-box!important; width:100%!important; max-width:100vw!important; padding-left:14px!important; padding-right:14px!important; overflow:visible!important; } .easter-projection-caption strong{ display:block!important; box-sizing:border-box!important; width:100%!important; max-width:100%!important; margin:0 auto!important; padding:0!important; font-size:clamp(27px,8.25vw,56px)!important; line-height:1!important; letter-spacing:.045em!important; white-space:nowrap!important; text-align:center!important; overflow:visible!important; } @media (max-width:360px){ .easter-projection-caption{padding-left:8px!important;padding-right:8px!important} .easter-projection-caption strong{font-size:8.05vw!important;letter-spacing:.025em!important} } /* ================================================================ V143 — Préférence locale des signatures sonores des Easter Eggs ================================================================ */ #accountScreen .account-easter-sounds .account-row-copy{min-width:0;} #accountScreen .account-sound-status{margin-left:auto;color:#ff7a00;font-size:clamp(9px,2.3vw,11px);font-weight:800;letter-spacing:.03em;white-space:nowrap;} #accountScreen .account-easter-sounds[aria-pressed="false"] .account-sound-status{color:#8f8f8f;} #accountScreen .account-easter-sounds[aria-pressed="false"] .account-toggle{background:#343434!important;justify-content:flex-start!important;} #accountScreen .account-easter-sounds .account-toggle{flex:0 0 42px;} /* ====================================================================== V148 — Easter Egg Predator sur le masque de la Bibliothèque. Déclencheur : appui long. Effets 100% CSS/JS, aucun asset image modifié. ====================================================================== */ #catalogScreen .predator-mask-secret{ position:absolute!important; z-index:930!important; left:50%!important; bottom:calc(var(--ttf-nav-height) + clamp(22px,4.8dvh,48px))!important; width:29%!important; height:clamp(96px,15.5dvh,148px)!important; transform:translateX(-50%)!important; display:block!important; background:transparent!important; border:0!important; outline:0!important; opacity:0!important; pointer-events:auto!important; touch-action:none!important; -webkit-tap-highlight-color:transparent!important; user-select:none!important; -webkit-user-select:none!important; -webkit-touch-callout:none!important; cursor:pointer!important; } body.easter-predator-mode{overflow:hidden!important} .easter-predator-experience{ position:fixed;inset:0;z-index:2147482700;pointer-events:none;overflow:hidden; opacity:0;background:rgba(0,2,0,.08);transition:opacity .2s ease; } .easter-predator-experience.is-running{opacity:1} .easter-predator-dark{ position:absolute;inset:0; background:radial-gradient(circle at 50% 45%,transparent 0 24%,rgba(0,0,0,.25) 52%,rgba(0,0,0,.78) 100%); animation:predatorHuntPulse 1.15s ease-in-out infinite alternate; } .easter-predator-vision{ position:absolute;inset:-4%;opacity:.42;mix-blend-mode:screen; background: linear-gradient(90deg,transparent 0 49.7%,rgba(142,255,87,.22) 49.8% 50.2%,transparent 50.3%), linear-gradient(0deg,transparent 0 49.7%,rgba(142,255,87,.18) 49.8% 50.2%,transparent 50.3%), repeating-linear-gradient(0deg,rgba(120,255,68,.035) 0 1px,transparent 1px 5px); filter:contrast(1.25) saturate(1.15); animation:predatorVisionGlitch .14s steps(2,end) infinite; } .easter-predator-reticle{ position:absolute;left:50%;top:44%;width:min(44vw,220px);aspect-ratio:1;border:1px solid rgba(150,255,87,.35); border-radius:50%;transform:translate(-50%,-50%) scale(.82);opacity:0; box-shadow:0 0 18px rgba(116,255,62,.16),inset 0 0 18px rgba(116,255,62,.08); animation:predatorReticle 3.7s ease forwards; } .easter-predator-reticle::before,.easter-predator-reticle::after{content:"";position:absolute;background:rgba(153,255,92,.38);box-shadow:0 0 7px rgba(129,255,68,.55)} .easter-predator-reticle::before{left:50%;top:-16%;width:1px;height:132%;transform:translateX(-50%)} .easter-predator-reticle::after{top:50%;left:-16%;height:1px;width:132%;transform:translateY(-50%)} .easter-predator-blood{position:absolute;inset:0;overflow:hidden;filter:drop-shadow(0 0 5px rgba(105,255,0,.55))} .easter-predator-drip{ position:absolute;top:-18%;left:var(--x);width:var(--w);height:var(--h);border-radius:50% 50% 62% 62% / 16% 16% 84% 84%; opacity:0;transform:translateY(-10vh) scaleY(.35);transform-origin:50% 0; background:linear-gradient(90deg,#173d00 0%,#75ff00 23%,#d4ff69 48%,#5be500 68%,#123600 100%); box-shadow:0 0 8px rgba(115,255,0,.62),0 0 18px rgba(83,220,0,.22); animation:predatorBloodFall var(--dur) cubic-bezier(.18,.72,.25,1) var(--delay) forwards; } .easter-predator-drip::after{content:"";position:absolute;left:50%;bottom:-10px;width:calc(var(--w) * .72);height:calc(var(--w) * .72);border-radius:50%;transform:translateX(-50%);background:#74ff00;box-shadow:0 0 8px rgba(115,255,0,.72)} .easter-predator-caption{ position:absolute;left:50%;top:52%;width:min(94vw,840px);transform:translate(-50%,-50%) scale(.88); text-align:center;opacity:0;filter:blur(4px);transition:opacity .36s ease,transform .42s cubic-bezier(.2,.8,.2,1),filter .38s ease; } .easter-predator-experience.show-caption .easter-predator-caption{opacity:1;filter:blur(0);transform:translate(-50%,-50%) scale(1)} .easter-predator-caption::before,.easter-predator-caption::after{content:"";display:block;width:min(78vw,560px);height:2px;margin:12px auto;background:linear-gradient(90deg,transparent,#6dff00 22%,#d9ff91 50%,#6dff00 78%,transparent);box-shadow:0 0 7px #73ff00,0 0 20px rgba(99,255,0,.48)} .easter-predator-caption strong{ display:block;color:#baff5c;font-family:Impact,'Arial Narrow','Arial Black',sans-serif;font-size:clamp(35px,10.5vw,78px);line-height:.92; font-weight:1000;letter-spacing:.035em;text-transform:uppercase;font-style:italic; text-shadow:-2px 0 0 #173600,2px 0 0 #e2ff9e,0 0 8px #8cff2c,0 0 25px rgba(80,255,0,.7),0 6px 18px #000; clip-path:polygon(0 8%,100% 0,98% 90%,82% 100%,67% 91%,53% 100%,38% 92%,22% 100%,2% 92%); animation:predatorTitleGlitch .72s steps(2,end) infinite; } .easter-predator-caption small{display:block;margin-top:12px;color:#d6ffad;font:800 clamp(10px,3vw,16px)/1.3 'Arial Narrow',Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;text-shadow:0 0 8px rgba(105,255,0,.55),0 3px 10px #000} .easter-predator-experience.is-ending{opacity:0;transition:opacity .5s ease} @keyframes predatorHuntPulse{from{filter:brightness(.88)}to{filter:brightness(.65)}} @keyframes predatorVisionGlitch{0%,100%{transform:translate(0,0)}25%{transform:translate(-2px,1px)}50%{transform:translate(2px,-1px)}75%{transform:translate(1px,2px)}} @keyframes predatorReticle{0%{opacity:0;transform:translate(-50%,-50%) scale(1.45)}18%{opacity:.72}42%,75%{opacity:.45;transform:translate(-50%,-50%) scale(.78)}100%{opacity:0;transform:translate(-50%,-50%) scale(.72)}} @keyframes predatorBloodFall{0%{opacity:0;transform:translateY(-10vh) scaleY(.3)}8%{opacity:.95}70%{opacity:.98}100%{opacity:.82;transform:translateY(118vh) scaleY(1.1)}} @keyframes predatorTitleGlitch{0%,84%,100%{transform:skewX(-5deg) translateX(0);filter:brightness(1)}88%{transform:skewX(-5deg) translateX(-3px);filter:brightness(1.35)}92%{transform:skewX(-5deg) translateX(2px);filter:brightness(.85)}} @media(prefers-reduced-motion:reduce){ .easter-predator-dark,.easter-predator-vision,.easter-predator-reticle,.easter-predator-drip,.easter-predator-caption strong{animation:none!important} .easter-predator-drip{opacity:.72!important;transform:translateY(45vh)!important} } /* V149 — interrupteur Beta test version (Administration) */ .admin-beta-test-state{min-width:46px;padding:5px 8px;border-radius:999px;border:1px solid rgba(255,122,0,.65);font-weight:900;font-size:.78rem;letter-spacing:.06em;text-align:center;color:#aaa;background:#151515;box-shadow:inset 0 0 0 1px rgba(255,255,255,.025)} .admin-beta-test-state.is-on{color:#ff7a00;background:rgba(255,105,0,.10);box-shadow:0 0 14px rgba(255,105,0,.14),inset 0 0 0 1px rgba(255,130,0,.10)} .admin-beta-test-state.is-off{color:#63d26f;border-color:rgba(99,210,111,.62);background:rgba(99,210,111,.08)} /* V150/V158 — Easter Egg Star Wars déplacé sur le TIE Fighter du décor bas Profil. */ #profileScreen .profile-starwars-secret{ position:absolute!important; z-index:950!important; left:18.2%!important; bottom:calc(var(--ttf-nav-height) + clamp(36px,6.4dvh,68px))!important; width:clamp(92px,23vw,128px)!important; height:clamp(120px,20dvh,164px)!important; transform:translateX(-50%)!important; border:0!important;background:transparent!important;padding:0!important;cursor:pointer!important;outline:none!important; opacity:0!important; pointer-events:auto!important; touch-action:manipulation!important; -webkit-tap-highlight-color:transparent!important; filter:none!important; } #profileScreen .profile-starwars-secret.is-armed, #profileScreen .profile-starwars-secret:focus-visible{ transform:translateX(-50%) scale(1.04)!important; } .easter-starwars-mode{background:#000!important} .easter-starwars-experience{ position:fixed;inset:0;z-index:6500;pointer-events:none;overflow:hidden; background:radial-gradient(circle at 50% 48%,rgba(7,18,52,.52),rgba(0,0,0,.95) 62%); } .easter-starwars-space,.easter-starwars-vignette,.easter-starwars-stars,.easter-starwars-sabers,.easter-starwars-caption{position:absolute;inset:0} .easter-starwars-space{background:linear-gradient(180deg,rgba(3,6,18,.12),rgba(0,0,0,.8))} .easter-starwars-vignette{background:radial-gradient(circle at 50% 50%,rgba(0,0,0,0) 38%,rgba(0,0,0,.44) 70%,rgba(0,0,0,.78) 100%)} .easter-starwars-stars span{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;opacity:.9;box-shadow:0 0 12px currentColor} .easter-starwars-stars .star-0{background:#fff3bf}.easter-starwars-stars .star-1{background:#b9deff}.easter-starwars-stars .star-2{background:#ffffff}.easter-starwars-stars .star-3{background:#ffe19a}.easter-starwars-stars .star-4{background:#d6ebff}.easter-starwars-stars .star-5{background:#ffffff} .easter-starwars-stars span:nth-child(1){left:8%;top:16%}.easter-starwars-stars span:nth-child(2){left:18%;top:24%}.easter-starwars-stars span:nth-child(3){left:30%;top:14%}.easter-starwars-stars span:nth-child(4){left:44%;top:22%}.easter-starwars-stars span:nth-child(5){left:58%;top:16%}.easter-starwars-stars span:nth-child(6){left:71%;top:24%}.easter-starwars-stars span:nth-child(7){left:85%;top:15%}.easter-starwars-stars span:nth-child(8){left:12%;top:39%}.easter-starwars-stars span:nth-child(9){left:26%;top:33%}.easter-starwars-stars span:nth-child(10){left:39%;top:44%}.easter-starwars-stars span:nth-child(11){left:52%;top:36%}.easter-starwars-stars span:nth-child(12){left:67%;top:42%}.easter-starwars-stars span:nth-child(13){left:80%;top:34%}.easter-starwars-stars span:nth-child(14){left:90%;top:40%}.easter-starwars-stars span:nth-child(15){left:6%;top:62%}.easter-starwars-stars span:nth-child(16){left:19%;top:58%}.easter-starwars-stars span:nth-child(17){left:31%;top:67%}.easter-starwars-stars span:nth-child(18){left:46%;top:60%}.easter-starwars-stars span:nth-child(19){left:59%;top:69%}.easter-starwars-stars span:nth-child(20){left:75%;top:58%}.easter-starwars-stars span:nth-child(21){left:88%;top:66%}.easter-starwars-stars span:nth-child(22){left:13%;top:81%}.easter-starwars-stars span:nth-child(23){left:28%;top:86%}.easter-starwars-stars span:nth-child(24){left:40%;top:79%}.easter-starwars-stars span:nth-child(25){left:54%;top:88%}.easter-starwars-stars span:nth-child(26){left:66%;top:80%}.easter-starwars-stars span:nth-child(27){left:81%;top:86%}.easter-starwars-stars span:nth-child(28){left:92%;top:79%}.easter-starwars-stars span:nth-child(29){left:36%;top:8%}.easter-starwars-stars span:nth-child(30){left:63%;top:8%}.easter-starwars-stars span:nth-child(31){left:4%;top:28%}.easter-starwars-stars span:nth-child(32){left:95%;top:28%}.easter-starwars-stars span:nth-child(33){left:7%;top:50%}.easter-starwars-stars span:nth-child(34){left:96%;top:53%}.easter-starwars-stars span:nth-child(35){left:22%;top:75%}.easter-starwars-stars span:nth-child(36){left:73%;top:74%} .easter-starwars-experience.is-running .easter-starwars-stars span{animation:easterStarTwinkle 1.9s ease-in-out infinite} .easter-starwars-experience.is-running .easter-starwars-stars span:nth-child(odd){animation-duration:2.35s} .easter-starwars-sabers{display:grid;place-items:center} .easter-starwars-sabers .saber{position:absolute;left:50%;top:44%;width:6px;height:0;border-radius:999px;transform-origin:50% 100%;opacity:0} .easter-starwars-sabers .saber::before,.easter-starwars-sabers .saber::after{content:'';position:absolute;left:50%;transform:translateX(-50%)} .easter-starwars-sabers .saber::before{bottom:-18px;width:34px;height:12px;border-radius:999px;background:linear-gradient(90deg,#1c1c1c 0%,#a3a3a3 22%,#2d2d2d 44%,#c2843a 58%,#202020 100%);box-shadow:0 0 0 1px rgba(255,255,255,.08)} .easter-starwars-sabers .saber::after{bottom:0;width:100%;height:100%;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.96),currentColor 82%)} .easter-starwars-sabers .saber.blue{color:#63c8ff;transform:translate(-50%,-50%) rotate(-32deg)} .easter-starwars-sabers .saber.gold{color:#ffc86b;transform:translate(-50%,-50%) rotate(32deg)} .easter-starwars-experience.is-running .easter-starwars-sabers .saber{height:28vh;opacity:1;transition:height .75s cubic-bezier(.21,.9,.32,1.02),opacity .3s ease} .easter-starwars-sabers .saber.blue::after{box-shadow:0 0 12px rgba(80,183,255,.92),0 0 22px rgba(80,183,255,.52),0 0 42px rgba(80,183,255,.32)} .easter-starwars-sabers .saber.gold::after{box-shadow:0 0 12px rgba(255,193,84,.92),0 0 22px rgba(255,193,84,.5),0 0 42px rgba(255,193,84,.28)} .easter-starwars-caption{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:0 24px 13.5dvh;text-align:center;opacity:0;transform:translateY(18px) scale(.98)} .easter-starwars-caption strong{display:block;max-width:min(92vw,740px);font-size:clamp(28px,7.8vw,56px);line-height:1.02;font-weight:900;letter-spacing:.08em;text-transform:uppercase;background:linear-gradient(180deg,#fff1a8 0%,#ffce69 34%,#c1842c 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 16px rgba(255,196,99,.12),0 2px 18px rgba(0,0,0,.42)} .easter-starwars-caption small{display:block;margin-top:12px;max-width:min(86vw,620px);font-size:clamp(15px,3.7vw,22px);line-height:1.35;color:#dce7ff;text-shadow:0 0 12px rgba(99,163,255,.2),0 2px 10px rgba(0,0,0,.45)} .easter-starwars-experience.show-caption .easter-starwars-caption{opacity:1;transform:translateY(0) scale(1);transition:opacity .42s ease,transform .42s ease} .easter-starwars-experience.is-ending{opacity:0;transition:opacity .48s ease} @keyframes easterStarTwinkle{0%,100%{opacity:.34;transform:scale(.84)}50%{opacity:1;transform:scale(1.45)}} /* V151 — Harmonisation cinématique Predator / Star Wars */ .easter-predator-experience{backdrop-filter:blur(1.1px)} .easter-predator-experience .easter-cinematic-canvas{mix-blend-mode:screen;opacity:.9} .easter-predator-dark{background:radial-gradient(circle at 50% 45%,rgba(11,28,10,.18),rgba(0,0,0,.88) 70%)} .easter-predator-vision::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(180deg,rgba(128,255,78,.03) 0 2px,rgba(0,0,0,0) 2px 8px);opacity:.9} .easter-predator-blood{filter:drop-shadow(0 0 8px rgba(122,255,67,.32))} .easter-starwars-experience .easter-cinematic-canvas{mix-blend-mode:screen;opacity:.95} .easter-starwars-experience.is-running .easter-starwars-sabers .saber.blue{animation:easterStarwarsHumBlue 2.2s ease-in-out infinite alternate} .easter-starwars-experience.is-running .easter-starwars-sabers .saber.gold{animation:easterStarwarsHumGold 2s ease-in-out infinite alternate} @keyframes easterStarwarsHumBlue{0%{filter:brightness(.94)}100%{filter:brightness(1.16)}} @keyframes easterStarwarsHumGold{0%{filter:brightness(.96)}100%{filter:brightness(1.14)}} /* V153 — Profil : le contenu défile derrière le décor bas, comme sur les autres panneaux. */ #profileScreen .profile-dynamic{ z-index:30!important; } #profileScreen .profile-bottom-decor{ z-index:900!important; bottom:calc(var(--ttf-nav-height) - clamp(14px,1.8dvh,18px))!important; pointer-events:none!important; } #profileScreen .profile-version{ z-index:930!important; } #profileScreen .canonical-bottom-nav{ z-index:1000!important; } /* V155 — Profil : décor légèrement abaissé pour chevaucher la nav et supprimer le liseret noir. */ /* V157 — Profil : raccord final décor/navigation. Le PNG contient une marge alpha importante sous le sol : on descend donc le bloc jusque près du bas du viewport afin que la partie visible du sol passe derrière la barre de navigation et supprime tout espace noir. */ #profileScreen .profile-bottom-decor{ bottom:calc(var(--ttf-nav-bottom, 7px) - 6px)!important; z-index:900!important; pointer-events:none!important; } #profileScreen .canonical-bottom-nav{ z-index:2000!important; } /* ====================================================================== V172 — RECHERCHE / HIGHLANDER Katana horizontal intégré entre le bandeau Recherche et la barre de recherche. Aucun asset image n'est modifié. ====================================================================== */ #searchScreen.search-reference{ /* On réserve une bande discrète sous le bandeau pour l'épée, puis tous les contrôles de recherche suivent automatiquement ce nouveau départ. */ --highlander-strip-height:clamp(28px,3.3dvh,34px); --search-input-top:calc(var(--search-header-visible-end) + var(--highlander-strip-height) + 2px)!important; } #searchScreen .highlander-sword-secret{ position:absolute!important; left:55%!important; right:auto!important; top:calc(var(--search-header-visible-end) + 2px)!important; bottom:auto!important; width:min(53%,250px)!important; height:clamp(26px,3.05dvh,31px)!important; z-index:92!important; margin:0!important; padding:0!important; border:0!important; outline:0!important; background:transparent!important; box-shadow:none!important; cursor:pointer!important; -webkit-tap-highlight-color:transparent!important; touch-action:manipulation!important; transform:translateX(-50%) rotate(-1deg)!important; transform-origin:50% 50%!important; opacity:.96!important; } #searchScreen .highlander-sword-secret:active{ transform:translateX(-50%) rotate(-1deg) scale(.985)!important; } /* L'épée CSS est redessinée dans son conteneur horizontal : lame à gauche, poignée à droite. Le hotspot reste l'objet lui-même. */ #searchScreen .highlander-sword-blade{ left:1%!important; top:43%!important; bottom:auto!important; width:72%!important; height:15%!important; border-radius:55% 8% 8% 55%!important; clip-path:polygon(0 50%,5% 8%,100% 18%,100% 82%,5% 92%)!important; background:linear-gradient(180deg,#22272b 0%,#aab5bd 25%,#f8fcff 48%,#8c989f 68%,#181c1f 100%)!important; box-shadow:0 -1px 1px rgba(255,255,255,.24),0 1px 2px rgba(0,0,0,.92),0 0 4px rgba(218,240,255,.22)!important; opacity:.72!important; } #searchScreen .highlander-sword-guard{ left:71%!important; top:16%!important; bottom:auto!important; width:3.8%!important; height:69%!important; border-radius:62% 18% 62% 18%!important; background:linear-gradient(90deg,#322313,#8f642f 24%,#e2b86c 50%,#8a5d28 76%,#2a1c10)!important; box-shadow:0 0 3px #000,0 0 3px rgba(255,190,92,.24)!important; opacity:.86!important; } #searchScreen .highlander-sword-grip{ left:74.5%!important; top:37%!important; bottom:auto!important; width:18.5%!important; height:27%!important; border-radius:18%!important; background:repeating-linear-gradient(90deg,#15120f 0 9%,#65482a 10% 16%,#1d1814 17% 25%)!important; box-shadow:inset 0 1px rgba(255,218,153,.14),0 1px 3px #000!important; opacity:.96!important; } #searchScreen .highlander-sword-pommel{ left:92.5%!important; top:31%!important; bottom:auto!important; width:6.5%!important; height:39%!important; border-radius:50%!important; background:radial-gradient(circle at 40% 36%,#d4aa64 0 17%,#6b4827 42%,#21160e 79%)!important; box-shadow:0 1px 3px #000!important; opacity:.92!important; } /* V174 — Matrix : synchro sur le fichier audio utilisateur (10,266 s). Le message n'est plus piloté par une animation CSS fixe : app.js le déclenche sur la montée principale du morceau, via la position réelle du lecteur audio. */ .matrix-easter-experience .matrix-message{ opacity:0!important; animation:none!important; transition:opacity .34s ease,transform .42s cubic-bezier(.18,.8,.24,1),filter .36s ease!important; filter:blur(4px)!important; } .matrix-easter-experience.show-message .matrix-message{ opacity:1!important; filter:blur(0)!important; } .matrix-easter-experience.is-building .matrix-code-bloom{ filter:brightness(1.32) saturate(1.18)!important; } .matrix-easter-experience.is-building .matrix-horizon{ opacity:.58!important; transition:opacity .45s ease!important; } .matrix-easter-experience.is-peak .matrix-code-bloom{ filter:brightness(1.75) saturate(1.3)!important; } .matrix-easter-experience.is-peak .matrix-rain{ filter:drop-shadow(0 0 8px rgba(80,255,112,.95)) brightness(1.18)!important; } .matrix-easter-experience.is-final .matrix-message{ opacity:.82!important; } .matrix-easter-experience.is-final .matrix-horizon, .matrix-easter-experience.is-final .matrix-code-bloom{ opacity:.26!important; transition:opacity .52s ease!important; } .matrix-easter-experience.is-ending{ opacity:0!important; transition:opacity .56s ease!important; } @media(prefers-reduced-motion:reduce){ .matrix-easter-experience .matrix-message{opacity:1!important;filter:none!important;transition:none!important} } /* ========================================================================== */ /* V180 — HIGHLANDER / QUICKENING CINÉMATIQUE */ /* Phrase seule sur l'intro parlée, puis katana + énergie jusqu'à la musique. */ /* ========================================================================== */ .highlander-v180.easter-highlander-experience{ background:rgba(0,2,7,.62)!important; transition:opacity .2s ease!important; } .highlander-v180 .easter-highlander-sky{ opacity:1!important; animation:none!important; background: radial-gradient(circle at 50% 49%,rgba(44,116,180,.10),transparent 24%), radial-gradient(ellipse at 50% 100%,rgba(20,60,105,.22),transparent 58%), linear-gradient(180deg,rgba(0,0,0,.86),rgba(0,5,13,.74) 58%,rgba(0,0,0,.9))!important; } .highlander-v180-vignette{ position:absolute;inset:-6%;z-index:2; box-shadow:inset 0 0 20vmin 10vmin rgba(0,0,0,.92); background:radial-gradient(circle at 50% 48%,transparent 0 24%,rgba(0,0,0,.15) 50%,rgba(0,0,0,.68) 100%); transition:opacity .6s ease; } .highlander-v180 .easter-highlander-caption{ z-index:40!important;top:50%!important;opacity:1!important;filter:none!important; transform:translate(-50%,-50%) scale(.94)!important; transition:none!important; } .highlander-v180 .easter-highlander-caption::before, .highlander-v180 .easter-highlander-caption::after{display:none!important} .highlander-v180 .easter-highlander-caption strong{ display:block!important; font-family:Impact,'Arial Black','Arial Narrow',sans-serif!important; font-size:clamp(40px,11.5vw,92px)!important; line-height:.92!important; letter-spacing:.055em!important; color:#edf6ff!important; text-shadow:0 2px 0 #647b8d,0 5px 0 rgba(0,0,0,.68),0 0 10px rgba(235,249,255,.58),0 0 34px rgba(78,169,238,.24)!important; filter:drop-shadow(0 14px 26px rgba(0,0,0,.88))!important; animation:v180TitleBreathe 1.3s ease-in-out infinite alternate!important; } .highlander-v180.phase-build .easter-highlander-caption strong{ animation:v180TitleCharge .24s steps(2,end) infinite!important; text-shadow:-2px 0 rgba(77,174,255,.7),2px 0 rgba(255,255,255,.65),0 0 15px #dff7ff,0 0 48px rgba(64,161,255,.58)!important; } .highlander-v180.break-title .easter-highlander-caption{ animation:v180TitleBreak .48s cubic-bezier(.2,.75,.3,1) forwards!important; } .highlander-v180 .easter-highlander-halo{ z-index:8!important;opacity:.08!important;animation:none!important; width:min(72vw,600px)!important; background:radial-gradient(circle,rgba(255,255,255,.38) 0,rgba(101,204,255,.18) 17%,rgba(35,113,255,.07) 42%,transparent 69%)!important; transition:opacity .42s ease,transform .5s ease,filter .45s ease!important; } .highlander-v180.phase-build .easter-highlander-halo{opacity:.28!important;filter:blur(4px) brightness(1.2)!important} .highlander-v180.phase-quickening .easter-highlander-halo{ opacity:.72!important;transform:translate(-50%,-50%) scale(1.08)!important; animation:v180HaloPulse .58s ease-in-out infinite alternate!important; } .highlander-v180.phase-peak .easter-highlander-halo{opacity:.95!important;filter:blur(2px) brightness(1.7)!important} .highlander-v180-energy-column{ position:absolute;z-index:7;left:50%;top:-15%;width:min(32vw,220px);height:130%; transform:translateX(-50%) scaleX(.22);opacity:0; background:linear-gradient(90deg,transparent,rgba(77,186,255,.08) 18%,rgba(237,252,255,.55) 48%,rgba(83,190,255,.11) 82%,transparent); filter:blur(8px);mix-blend-mode:screen; } .highlander-v180.phase-quickening .highlander-v180-energy-column{ opacity:.5;animation:v180EnergyColumn .48s ease-in-out infinite alternate; } .highlander-v180.phase-peak .highlander-v180-energy-column{opacity:.78;filter:blur(5px) brightness(1.5)} .highlander-v180 .easter-highlander-sword-ghost{ z-index:18!important;left:50%!important;top:53%!important;width:12px!important;height:min(70vh,580px)!important; transform:translate(-50%,-50%) rotate(-6deg) scaleY(.28)!important;transform-origin:50% 88%!important; opacity:0!important;animation:none!important; filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 14px #7fdbff) drop-shadow(0 0 38px rgba(43,132,255,.8))!important; transition:opacity .2s ease,transform .48s cubic-bezier(.15,.85,.2,1),filter .3s ease!important; } .highlander-v180.phase-quickening .easter-highlander-sword-ghost{ opacity:1!important;transform:translate(-50%,-50%) rotate(-6deg) scaleY(1)!important; animation:v180SwordAlive .52s ease-in-out infinite alternate!important; } .highlander-v180.phase-peak .easter-highlander-sword-ghost{ filter:drop-shadow(0 0 7px #fff) drop-shadow(0 0 20px #b6efff) drop-shadow(0 0 60px rgba(36,122,255,1))!important; } .highlander-v180 .easter-highlander-sword-ghost::before{ left:2px!important;width:8px!important;height:80%!important; background:linear-gradient(90deg,#1d4c6f 0,#b9ecff 24%,#fff 48%,#b4eaff 70%,#173d61 100%)!important; box-shadow:inset 0 0 4px #fff,0 0 9px #7edcff!important; } .highlander-v180 .easter-highlander-sword-ghost::after{ left:-42px!important;top:79%!important;width:96px!important;height:10px!important; background:linear-gradient(90deg,#30200c,#b98631 28%,#f2d790 50%,#b27a27 72%,#26180a)!important; box-shadow:0 0 8px rgba(255,224,154,.6),0 0 22px rgba(70,170,255,.28)!important; } .highlander-v180-blade-core{ position:absolute;left:50%;top:2%;width:2px;height:76%;transform:translateX(-50%); background:#fff;box-shadow:0 0 6px #fff,0 0 18px #77d8ff,0 0 36px #268aff; opacity:.88;animation:v180BladeCore .32s ease-in-out infinite alternate; } .highlander-v180-rings{position:absolute;z-index:12;left:50%;top:51%;width:1px;height:1px;opacity:0} .highlander-v180-rings i{ position:absolute;left:0;top:0;width:18vmin;aspect-ratio:1;border:2px solid rgba(175,232,255,.85);border-radius:50%; transform:translate(-50%,-50%) scale(.18);opacity:0;box-shadow:0 0 10px #a5e9ff,0 0 28px rgba(45,154,255,.62); } .highlander-v180-rings i:nth-child(2){animation-delay:.11s!important} .highlander-v180-rings i:nth-child(3){animation-delay:.22s!important} .highlander-v180.phase-quickening .highlander-v180-rings{opacity:1} .highlander-v180.phase-quickening .highlander-v180-rings i{animation:v180Ring 1.25s ease-out infinite} .highlander-v180 .easter-highlander-electric{z-index:14!important;inset:-8%!important;opacity:0;filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 14px #67d1ff) drop-shadow(0 0 32px rgba(39,110,255,.8))!important} .highlander-v180.phase-quickening .easter-highlander-electric{opacity:1} .highlander-v180 .easter-highlander-bolt{ height:3px!important;opacity:0!important; background:linear-gradient(90deg,transparent,#fff 7%,#bceeff 26%,#fff 52%,#55baff 72%,transparent)!important; animation:v180Bolt var(--dur) steps(2,end) var(--delay) 1!important; } .highlander-v180 .easter-highlander-flash{ z-index:25!important;opacity:0!important;background:#eafaff!important;animation:v180Flash .42s ease-out forwards!important; } .highlander-v180-sparks,.highlander-v180-shards{position:absolute;z-index:20;left:50%;top:51%;width:1px;height:1px;pointer-events:none} .highlander-v180-spark{ position:absolute;width:var(--s);height:calc(var(--s) * 5);border-radius:50%; background:linear-gradient(#fff,#8fdfff,transparent);box-shadow:0 0 7px #8edcff; transform-origin:50% 0;opacity:0; } .highlander-v180.phase-quickening .highlander-v180-spark{animation:v180Spark .72s ease-out var(--sd) 1} .highlander-v180-shard{ position:absolute;width:2px;height:16px;background:linear-gradient(#fff,#70c8ff,transparent);opacity:0;box-shadow:0 0 7px #60c9ff; } .highlander-v180.phase-quickening .highlander-v180-shard{animation:v180Shard .58s ease-out var(--hd) 1} .highlander-v180.impact .easter-highlander-halo{filter:blur(2px) brightness(1.65)!important} .highlander-v180.impact-major .easter-highlander-halo{filter:blur(1px) brightness(2.2)!important;transform:translate(-50%,-50%) scale(1.2)!important} .highlander-v180.impact-major .highlander-v180-energy-column{opacity:.95!important;filter:blur(3px) brightness(2)!important} .highlander-v180.phase-finale .easter-highlander-sword-ghost{animation:v180SwordFinal .18s steps(2,end) infinite!important} .highlander-v180.phase-finale .easter-highlander-halo{animation:v180FinalHalo .34s ease-in-out infinite alternate!important} .highlander-v180.phase-decay .easter-highlander-electric, .highlander-v180.phase-decay .highlander-v180-rings, .highlander-v180.phase-decay .highlander-v180-energy-column{opacity:.18!important;transition:opacity .55s ease!important} .highlander-v180.phase-decay .easter-highlander-sword-ghost{filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 14px #74cfff)!important} .highlander-v180.is-ending{opacity:0!important;transition:opacity .62s ease!important} @keyframes v180TitleBreathe{from{transform:scale(.985);filter:brightness(.9)}to{transform:scale(1.015);filter:brightness(1.14)}} @keyframes v180TitleCharge{0%,100%{transform:translateX(0) scale(1.01)}25%{transform:translateX(-1px) scale(1.02)}50%{transform:translateX(2px) scale(1.01)}75%{transform:translateX(-2px) scale(1.025)}} @keyframes v180TitleBreak{0%{opacity:1;filter:blur(0);transform:translate(-50%,-50%) scale(1)}34%{opacity:1;filter:brightness(2.2) blur(.4px);transform:translate(-50%,-50%) scale(1.06)}100%{opacity:0;filter:blur(12px);transform:translate(-50%,-50%) scale(1.34)}} @keyframes v180HaloPulse{from{transform:translate(-50%,-50%) scale(.98);filter:blur(5px) brightness(1)}to{transform:translate(-50%,-50%) scale(1.09);filter:blur(3px) brightness(1.35)}} @keyframes v180EnergyColumn{from{transform:translateX(-50%) scaleX(.24);filter:blur(9px) brightness(.85)}to{transform:translateX(-50%) scaleX(.58);filter:blur(5px) brightness(1.35)}} @keyframes v180SwordAlive{from{transform:translate(-50%,-50%) rotate(-6.35deg) scaleY(1);filter:brightness(.95)}to{transform:translate(-50%,-50%) rotate(-5.65deg) scaleY(1.012);filter:brightness(1.25)}} @keyframes v180BladeCore{from{opacity:.58}to{opacity:1}} @keyframes v180Ring{0%{opacity:.78;transform:translate(-50%,-50%) scale(.18)}72%{opacity:.28}100%{opacity:0;transform:translate(-50%,-50%) scale(5.2)}} @keyframes v180Bolt{0%,16%{opacity:0;transform:rotate(var(--rot)) scaleX(0)}24%{opacity:1;transform:rotate(var(--rot)) scaleX(.35)}43%{opacity:.96;transform:rotate(var(--rot)) scaleX(1)}61%{opacity:.35;transform:rotate(var(--rot)) scaleX(.72)}100%{opacity:0;transform:rotate(var(--rot)) scaleX(1)}} @keyframes v180Flash{0%{opacity:.92}18%{opacity:.34}100%{opacity:0}} @keyframes v180Spark{0%{opacity:1;transform:rotate(var(--a)) translateY(-1vmin) scaleY(.35)}100%{opacity:0;transform:rotate(var(--a)) translateY(calc(var(--d) * -1)) scaleY(1.35)}} @keyframes v180Shard{0%{opacity:.9;transform:rotate(var(--a)) translateY(-2vmin) rotate(var(--r)) scaleY(.4)}100%{opacity:0;transform:rotate(var(--a)) translateY(calc(var(--d) * -1)) rotate(calc(var(--r) + 150deg)) scaleY(1.4)}} @keyframes v180SwordFinal{0%,100%{transform:translate(-50%,-50%) rotate(-6deg) scaleY(1);filter:brightness(1.3)}50%{transform:translate(-49.5%,-50%) rotate(-5.5deg) scaleY(1.012);filter:brightness(2.1)}} @keyframes v180FinalHalo{from{transform:translate(-50%,-50%) scale(1.04);filter:brightness(1.6)}to{transform:translate(-50%,-50%) scale(1.28);filter:brightness(2.45)}} @media (prefers-reduced-motion:reduce){ .highlander-v180 .easter-highlander-caption strong, .highlander-v180 .easter-highlander-halo, .highlander-v180 .highlander-v180-energy-column, .highlander-v180 .easter-highlander-sword-ghost, .highlander-v180 .highlander-v180-blade-core, .highlander-v180 .highlander-v180-rings i, .highlander-v180 .easter-highlander-bolt, .highlander-v180 .highlander-v180-spark, .highlander-v180 .highlander-v180-shard{animation:none!important} } /* V201 — progression automatique Emby des séries demandées */ #myRequestsScreen .myreq-status.in_progress.partial{ border-color:rgba(255,178,52,.88)!important; background: radial-gradient(circle at 50% 0%,rgba(255,197,88,.18),transparent 60%), linear-gradient(180deg,rgba(28,19,7,.98),rgba(11,7,2,.99))!important; color:#ffc15a!important; text-shadow:0 0 10px rgba(255,174,45,.22)!important; } #myRequestsScreen .myreq-episode-progress{ color:#ffbd61!important; font-weight:800!important; letter-spacing:.02em!important; } #activityScreen .activity-request-status.in_progress.partial{ color:#ffb646!important; } /* ====================================================================== 27/08/2026 — V206 : décor bas Newsletter au premier plan. Le formulaire reste dans sa propre zone scrollable et défile derrière le PNG transparent, qui ne capte aucun geste tactile. ====================================================================== */ #newsletterSettingsScreen .newsletter-settings-scroll{ z-index:20!important; overflow-y:scroll!important; overflow-x:hidden!important; -webkit-overflow-scrolling:touch!important; overscroll-behavior-y:contain!important; touch-action:pan-y!important; padding-bottom:clamp(280px,67vw,520px)!important; } #newsletterSettingsScreen .newsletter-settings-bottom-decor{ position:absolute!important; z-index:60!important; left:50%!important; bottom:calc(var(--ttf-nav-height,84px) - 2px)!important; width:100%!important; max-width:none!important; height:auto!important; display:block!important; transform:translateX(-50%)!important; pointer-events:none!important; user-select:none!important; -webkit-user-drag:none!important; } #newsletterSettingsScreen .canonical-bottom-nav{z-index:1000!important;} #newsletterSettingsScreen .newsletter-settings-scroll::-webkit-scrollbar{display:none!important;} /* ====================================================================== V210 — réactivité tactile / navigation instantanée ====================================================================== */ button,a,[role="button"],[data-cbn],.hotspot,.cbn-item{ touch-action:manipulation; -webkit-tap-highlight-color:transparent; } [data-cbn],.hotspot,.cbn-item{ -webkit-user-select:none; user-select:none; } /* Le retour visuel reste très court : aucune animation ne retarde le changement d'écran. */ [data-cbn]:active,.hotspot:active,.cbn-item:active{ transition-duration:.04s!important; }