@font-face{font-family:'WTVSans';src:url('../fonts/Poppins-Light.ttf') format('truetype');font-weight:300;font-display:block} @font-face{font-family:'WTVSans';src:url('../fonts/Poppins-Regular.ttf') format('truetype');font-weight:400;font-display:block} @font-face{font-family:'WTVSans';src:url('../fonts/Poppins-Medium.ttf') format('truetype');font-weight:500;font-display:block} @font-face{font-family:'WTVSans';src:url('../fonts/Poppins-Bold.ttf') format('truetype');font-weight:700;font-display:block} /* ===================================================================== WTV — 1920x1080 COMPATIBILITE : Tizen 6.0 embarque Chromium 76. Interdits dans ce fichier, ils ne fonctionnent pas sur la TV : - inset (Chromium 87) -> top/left/right/bottom - gap en flex (Chromium 84) -> margin sur les enfants - aspect-ratio (Chromium 88) -> hauteurs fixes ===================================================================== */ :root{ --ink:#000; --panel:#181818; --panel-hi:#232323; --white:#FFF; --text:#E5E5E5; --grey:#A0A0A0; --grey-dim:#6E6E6E; --red:#E50914; --safe:52px; --ease:cubic-bezier(.25,.46,.45,.94); } *{margin:0;padding:0;box-sizing:border-box} html,body{ width:1920px;height:1080px;overflow:hidden; background:var(--ink);color:var(--text); font-family:'WTVSans','Samsung One','BreezeSans',Arial,sans-serif; -webkit-font-smoothing:antialiased;cursor:none; } /* La lecture AVPlay se fait sur un plan video SOUS la page web. Il faut rendre transparents TOUS les calques au-dessus, y compris : s'il reste noir, on entend le son sans voir l'image. */ html.is-playing, html.is-playing body, html.is-playing #app, html.is-playing .screen, html.is-playing #avplayer{background:transparent !important} html.is-playing #app{background-color:transparent} #avplayer,#html5player{ position:absolute;top:0;left:0;width:1920px;height:1080px; background:transparent;z-index:0; } #html5player{object-fit:contain;visibility:hidden} html.is-playing #html5player{visibility:visible} #app{position:absolute;top:0;left:0;width:1920px;height:1080px;z-index:10;background:var(--ink)} .screen{position:absolute;top:0;left:0;width:1920px;height:1080px;display:none;background:transparent;overflow:hidden;z-index:3} .screen.is-active{display:block} #screen-player{background:transparent} /* ===================================================================== Barre superieure ===================================================================== */ .topnav{ position:absolute;z-index:20;top:0;left:0;width:1920px;height:124px; padding:0 var(--safe); } .navscrim{display:none} /* Le voile est porte par la barre elle-meme : un calque exterieur passerait au-dessus, l'ecran formant desormais son propre contexte. Sa hauteur s'arrete juste sous la barre. A 230 pixels il mordait sur le titre de la premiere rangee, qui se retrouvait a moitie assombri sans raison visible — le voile est la pour detacher la barre du contenu qui passe dessous, pas pour teinter la page. */ .topnav:after{ content:"";position:absolute;top:0;left:0;width:1920px;height:168px; z-index:-1;opacity:0;transition:opacity .3s var(--ease); background:linear-gradient(180deg,#000 0%,#000 48%,rgba(0,0,0,.82) 72%,rgba(0,0,0,0) 100%); } body.is-scrolled .topnav:after{opacity:1} .brandmark{ position:absolute;left:var(--safe);top:22px; line-height:0;white-space:nowrap; } .brandmark em{font-style:normal;color:var(--red)} .brandmark__mark{ display:inline-block;width:78px;height:78px;border-radius:14px; vertical-align:middle; } .profiles .brandmark__mark{width:88px;height:88px;border-radius:16px} .navgroup{position:absolute;left:50%;top:22px;white-space:nowrap;transform:translateX(-50%)} .navlink{ display:inline-block;background:none;border:0;color:var(--text); font-weight:400;font-size:30px;line-height:1;padding:16px 28px;margin-right:6px;border-radius:999px; vertical-align:middle; -webkit-transition:background-color .16s var(--ease), color .16s var(--ease), -webkit-transform .16s var(--ease); transition:background-color .16s var(--ease), color .16s var(--ease), transform .16s var(--ease); } .navlink.is-active{font-weight:500;color:var(--white)} .navlink--icon{padding:14px 20px;line-height:0} .navlink--icon svg{vertical-align:middle;display:inline-block} /* La pastille blanche. Elle remplace l'anneau blanc sur fond sombre : a trois metres, un aplat se lit avant un contour, et le leger agrandissement dit ou l'on est avant meme qu'on ait lu le mot. */ .navlink.is-focused{ background:var(--white);color:#111;font-weight:500;box-shadow:none; -webkit-transform:scale(1.07);transform:scale(1.07); } .navlink--icon.is-focused{color:#111} /* L'engrenage vit dans le coin de l'ECRAN, ou l'heure se trouvait. Il est donc pose sur la barre elle-meme et non dans le groupe d'onglets : ce dernier porte un `transform` pour se centrer, et un element transforme devient le repere de ses enfants positionnes — l'engrenage se calait alors contre le bord droit des onglets. Le retrait de 20 pixels compense le rembourrage interne du bouton : c'est l'icone, pas sa zone cliquable, qui doit s'aligner sur la marge. */ .navlink--corner{position:absolute;right:32px;top:30px;margin-right:0} .clock{display:none} /* ===================================================================== Bandeau vedette ===================================================================== */ /* Un liseré très fin. Sur un fond noir, une image sombre se fond dans la page et le bandeau n'a plus de contour : le trait lui rend son bord sans l'encadrer. */ .billboard{ position:relative;margin:124px var(--safe) 0;height:600px; border-radius:12px;overflow:hidden; border:1px solid rgba(255,255,255,.15); } .billboard__art{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center} .detail__poster,.billboard{box-shadow:none} .billboard__scrim{ position:absolute;top:0;left:0;width:100%;height:100%; background: linear-gradient(90deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.62) 44%,rgba(0,0,0,.1) 74%), linear-gradient(0deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,0) 48%); } .billboard__body{position:absolute;left:56px;bottom:52px;width:820px} .billboard__title{font-size:60px;font-weight:700;line-height:1.06;color:var(--white)} .billboard__meta{font-size:22px;color:var(--text);margin-top:18px} .billboard__meta span:not(:last-child):after{content:"\00a0 \2022\00a0 ";color:var(--grey-dim)} .billboard__plot{font-size:23px;line-height:1.42;color:var(--text);margin-top:14px;max-height:110px;overflow:hidden} .billboard__actions{margin-top:28px;white-space:nowrap} .billboard__badges{position:absolute;right:44px;bottom:52px;white-space:nowrap} .badge{ display:inline-block;background:rgba(30,30,30,.88);border-radius:999px; padding:12px 22px;font-size:20px;color:var(--text);margin-left:12px; } .badge i{display:inline-block;width:10px;height:10px;border-radius:2px;background:var(--red);margin-right:10px} .btn{ display:inline-block;background:rgba(78,78,78,.72);border:0;border-radius:8px; color:var(--white);font-weight:500;font-size:27px;line-height:1;padding:22px 38px;margin-right:14px; transition:background .18s var(--ease);vertical-align:middle; } /* Le blanc est reserve a la selection, partout dans l'interface. Un bouton principal au repos porte donc le rouge de l'application — il devient blanc quand on arrive dessus, comme tous les autres. C'est deja la regle sur l'ecran de connexion. */ .btn--primary{background:var(--red);color:#fff} /* Un halo blanc sur un bouton deja blanc ne se voit pas : « Lecture » avait exactement la meme apparence selectionne ou non. Anneau a deux tons — sombre au contact du bouton, clair a l'exterieur — pour qu'il se detache sur une affiche claire comme sur un fond sombre. */ .btn.is-focused{ background:var(--white);color:#000; box-shadow:0 0 0 3px rgba(0,0,0,.82), 0 0 0 7px rgba(255,255,255,.92); } .btn__play{ display:inline-block;width:0;height:0;margin-right:14px; border-left:17px solid currentColor;border-top:11px solid transparent;border-bottom:11px solid transparent; vertical-align:middle; } /* Boutons de la fiche : pastilles arrondies, alignees sur une ligne. */ .pill{ display:inline-block;background:rgba(38,38,42,.82);border:1px solid rgba(255,255,255,.24); border-radius:999px;color:var(--white);font-weight:500;font-size:25px;line-height:1; padding:20px 32px;margin-right:16px;vertical-align:middle; transition:background .16s var(--ease),color .16s var(--ease); } .pill.is-focused{ background:var(--white);color:#000;border-color:var(--white); box-shadow:0 0 0 3px rgba(0,0,0,.82), 0 0 0 7px rgba(255,255,255,.92); } .pill.is-on{background:var(--red);color:#fff;border-color:var(--red)} .pill--love.is-on{background:var(--red);color:#fff;border-color:var(--red)} .pill__ico{ display:inline-block;width:34px;height:34px;margin-right:14px;vertical-align:middle; border:2px solid currentColor;border-radius:50%;position:relative; } .pill__ico--play:after{ content:"";position:absolute;left:11px;top:8px;width:0;height:0; border-left:12px solid currentColor;border-top:8px solid transparent;border-bottom:8px solid transparent; } .pill__ico--restart{border-style:solid;border-top-color:transparent} .pill__ico--plus:after,.pill__ico--plus:before{ content:"";position:absolute;background:currentColor; } /* La croix de « Retirer de la reprise » : le meme trait que le plus, croise. Aucune image, aucun fichier en plus. */ .pill__ico--close:after,.pill__ico--close:before{ content:"";position:absolute;background:currentColor; left:14px;top:7px;width:2px;height:16px; } .pill__ico--close:before{-webkit-transform:rotate(45deg);transform:rotate(45deg)} .pill__ico--close:after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)} .pill__ico--plus:before{left:14px;top:7px;width:2px;height:16px} .pill__ico--plus:after{left:7px;top:14px;width:16px;height:2px} .pill__ico--glyph{border:0;border-radius:0;font-size:26px;line-height:34px;text-align:center;width:30px} /* ===================================================================== Rails ===================================================================== */ .home__scroll{position:absolute;top:0;left:0;width:1920px; transition:transform .18s cubic-bezier(.22,.61,.36,1);will-change:transform; -webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0); -webkit-backface-visibility:hidden;backface-visibility:hidden} .rails{position:relative;padding-bottom:90px} .rails--top{padding-top:150px} .rail{margin-bottom:34px} .rail__head{padding:0 var(--safe);margin-bottom:16px;white-space:nowrap;overflow:hidden} .rail__title{ display:inline-block;font-size:30px;font-weight:500;color:var(--white); vertical-align:middle;max-width:1300px;overflow:hidden;text-overflow:ellipsis; } .rail__more{ display:inline-block;font-size:19px;color:var(--grey); letter-spacing:.08em;text-transform:uppercase;margin-left:20px;vertical-align:middle; } /* La piste garde une hauteur fixe meme sans vignettes : on peut donc vider les rails eloignes sans que la page bouge d'un pixel. */ .rail__track{ position:relative; padding:0 var(--safe);white-space:nowrap; height:548px; transition:transform .18s cubic-bezier(.22,.61,.36,1); will-change:transform; } .rail--wide .rail__track{height:352px} /* --- Cartes --- */ .card{ display:inline-block;vertical-align:top;background:none;border:0;padding:0; margin-right:16px;position:relative;text-align:left; } .card__art{ display:block;width:100%;height:462px;border-radius:10px;overflow:hidden; background:#141414 center center no-repeat;background-size:cover; position:relative; } /* Repli quand le serveur ne fournit pas d'affiche : le titre sur la vignette, plutot qu'un rectangle gris muet. */ .card__art .fallback{ position:absolute;left:0;right:0;top:0;bottom:0;padding:18px; display:block;font-size:22px;font-weight:500;line-height:1.25; color:var(--text);background:#181818;overflow:hidden; } .card--tall{width:306px} .card--wide{width:472px} .card--wide .card__art{height:266px} .card--tall.is-focused{width:880px} .card.is-focused .card__art{box-shadow:0 0 0 5px var(--white)} .card__badge{ position:absolute;top:14px;left:14px;background:var(--red);color:#fff; font-weight:700;font-size:16px;line-height:1;letter-spacing:.1em;padding:8px 12px;border-radius:4px; } .card__num{ position:absolute;bottom:14px;right:14px;font-weight:500;font-size:20px;line-height:1;color:var(--white); background:rgba(0,0,0,.75);padding:6px 10px;border-radius:4px; } /* Le lettrage d'affiche, pose sur la vignette une fois elargie. Au repos la vignette est une affiche verticale : le titre y est deja imprime, et le logo n'aurait pas la place. Il n'apparait donc qu'au focus, ou l'image devient un paysage — et la ou le titre ecrit dessous ne faisait plus que repeter ce que l'image dit mieux. */ .card__logo{ position:absolute;left:0;bottom:0;width:0;height:0; background-repeat:no-repeat;background-position:left bottom;background-size:contain; } .card.is-focused.has-logo .card__logo{left:34px;bottom:26px;width:340px;height:124px} .card.is-focused.has-logo .card__label b{visibility:hidden} /* ===================================================================== Intro Un calque noir plein ecran, au-dessus de tout, qui s'efface en fondu. Le fond reste noir pendant le fondu : sans lui, la fin de la video laisserait apparaitre un cadre vide le temps de la transition. ===================================================================== */ .intro{ position:fixed;left:0;top:0;width:1920px;height:1080px;z-index:9000; background:#000;opacity:1; -webkit-transition:opacity .55s var(--ease);transition:opacity .55s var(--ease); } .intro.is-out{opacity:0} .intro__video{width:100%;height:100%;object-fit:cover;background:#000} /* Écran de préparation du catalogue. Il remplace le noir entre le jingle et les profils et ne déclenche aucun appel éditorial supplémentaire. */ .cook{background:#050505;text-align:center} .cook__inner{position:absolute;left:0;top:0;width:1920px;height:1080px;padding-top:322px} .cook__logo{width:112px;height:112px;object-fit:contain;margin-bottom:34px} .cook__title{font-size:50px;font-weight:600;color:#fff;letter-spacing:-1px} .cook__sub{font-size:24px;color:#9b9b9b;margin-top:14px} .cook__bar{position:relative;width:500px;height:6px;margin:44px auto 0;background:#232323;border-radius:99px;overflow:hidden} .cook__bar i{position:absolute;left:-42%;top:0;width:42%;height:100%;background:#e50914;border-radius:99px;animation:cookbar 1.25s infinite linear} .cook__dots{margin-top:27px} .cook__dots i{display:inline-block;width:9px;height:9px;border-radius:50%;background:#777;margin:0 6px;animation:cookdot 1s infinite ease-in-out} .cook__dots i:nth-child(2){animation-delay:.14s}.cook__dots i:nth-child(3){animation-delay:.28s} @keyframes cookbar{0%{left:-42%}100%{left:100%}} @keyframes cookdot{0%,70%,100%{opacity:.28;transform:scale(.82)}35%{opacity:1;transform:scale(1)}} /* Vignette elargie sans vraie image paysage : l'affiche est posee entiere sur une plaque sombre plutot que recadree au hasard. Le logo n'y est pas repris. Une affiche verticale porte deja son titre imprime, et le lettrage TMDB venait se poser par-dessus — deux fois le meme mot, decales de quelques pixels. Il ne reparait qu'avec une vraie image de decor, qui, elle, ne porte pas de texte. */ /* Restreint aux vignettes VERTICALES elargies. Sans cette restriction la regle attrapait aussi les vignettes du Direct et du Sport, dont le visuel est un LOGO de chaine pose en 60 % de large sur une plaque : une fois focalisees, elles se retrouvaient avec leur logo etire sur toute la hauteur. */ .card--tall.is-focused.no-deco .card__art{ background-size:auto 100%; background-position:50% 50%; background-color:#0e0e0e; } .card--tall.is-focused.no-deco .card__logo{display:none} .card--tall.is-focused.no-deco .card__label b{visibility:visible} /* Les cotes de l'affiche posee entiere. Ils etaient noirs, et deux bandes noires dans une vignette elargie ne se lisent pas comme un choix mais comme une image qui n'a pas fini de charger. Ils portent maintenant la meme affiche, agrandie et floutee assez pour qu'aucun detail ne se lise : l'oeil y voit un fond, pas une seconde image. La plaque ne se montre que dans ce cas precis — vignette elargie, aucun decor disponible — et une seule vignette est elargie a la fois, donc un seul flou a calculer. */ .card__blur, .card__sharp{ position:absolute;left:0;top:0;width:100%;height:100%;display:block; background:center center no-repeat; opacity:0; pointer-events:none; -webkit-transition:opacity .20s cubic-bezier(.2,.72,.2,1); transition:opacity .20s cubic-bezier(.2,.72,.2,1); } .card__blur{ background-size:cover; -webkit-filter:blur(24px);filter:blur(24px); -webkit-transform:scale(1.18);transform:scale(1.18); opacity:0; } /* L'affiche nette, entiere, par-dessus la plaque. */ .card__sharp{background-size:auto 100%;opacity:0} /* Ces deux couches ne doivent JAMAIS rester visibles quand un vrai backdrop est affiché. C'etait la cause du double visuel / image fantome visible sur les miniatures. */ .card--tall.is-focused.no-deco .card__blur{opacity:.5} .card--tall.is-focused.no-deco .card__sharp{opacity:1} /* En grille la vignette ne s'elargit pas : elle garde la forme d'une affiche, il n'y a donc aucun cote a combler et rien a flouter. */ .grid .card__blur, .grid .card__sharp{display:none} .card__resume{position:absolute;left:0;right:0;bottom:0;height:8px;background:rgba(120,120,120,.8)} .card__resume i{display:block;height:100%;background:var(--red)} /* Le titre sous la vignette : lisible a trois metres sans survol */ .card__label{ display:block;padding:13px 4px 0;width:100%; font-size:20px;font-weight:500;color:var(--text);line-height:1.25; white-space:normal;height:86px;overflow:hidden; } .card__label b{ display:block;font-weight:500; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .card__label span{display:block;font-size:17px;font-weight:400;color:var(--grey);margin-top:5px} .card.is-focused .card__label b{color:var(--white)} /* Top 10 */ .rank{display:inline-block;vertical-align:top;white-space:nowrap} .rank__num{ display:inline-block;vertical-align:top; font-size:400px;font-weight:700;line-height:.86;color:transparent; -webkit-text-stroke:6px #6E6E6E;letter-spacing:-.06em;margin-right:-46px; } /* Le bloc d'informations sous le rail actif */ /* Le bloc occupe TOUJOURS la meme place. Le montrer ou le cacher avec display changeait la hauteur du rail, donc la position de tous les rails suivants : chaque deplacement vertical reflowait la colonne. visibility n'a aucun cout de mise en page. La largeur est volontairement courte. Une ligne de mille trois cents pixels oblige l'oeil a repartir de l'autre bout de l'ecran a chaque retour a la ligne, et a trois metres on perd la ligne suivante. Mille pixels tiennent dans un seul regard. */ .rail__info{ padding:6px var(--safe) 0;max-width:1010px; height:118px;overflow:hidden;visibility:hidden; } .rail.has-focus .rail__info{visibility:visible} .rail__info .meta{font-size:23px;font-weight:500;color:var(--white)} .rail__info .meta span:not(:last-child):after{content:"\00a0 \2022\00a0 ";color:var(--grey)} .rail__info .plot{font-size:24px;font-weight:400;line-height:1.32;color:var(--text);margin-top:9px;max-height:64px;overflow:hidden} .rail__info .why{font-size:21px;color:var(--red);margin-top:6px} /* ===================================================================== Grille ===================================================================== */ .gridhead{padding:150px var(--safe) 22px} .gridhead__eyebrow{font-size:20px;letter-spacing:.2em;color:var(--grey);text-transform:uppercase} .gridhead__title{font-size:48px;font-weight:700;color:var(--white);margin-top:10px} .gridhead__count{font-size:22px;color:var(--grey);margin-top:8px} .grid{position:absolute;top:326px;left:0;width:1920px;height:754px;padding:0 var(--safe);overflow:hidden} .grid__inner{position:relative;transition:transform .22s linear} .grid .card{margin-bottom:18px;margin-right:15px} .grid .card--tall{width:231px} .grid .card--wide{width:344px} .grid .card__art{height:347px;border-radius:8px} .grid .card--wide .card__art{height:194px} /* Pas d'elargissement en grille : cela reflowerait toute la page a chaque deplacement */ .grid .card--tall.is-focused{width:231px} .grid .card__label{height:56px;padding-top:10px;font-size:19px} .grid .card__label span{font-size:16px;margin-top:3px} .searchbox{ width:900px;height:84px;margin-top:16px;padding:0 28px; background:var(--panel);border:3px solid #3A3A3A;border-radius:8px; color:var(--white);font-weight:400;font-size:30px;line-height:1;outline:0; } .searchbox.is-focused{border-color:var(--white)} /* ===================================================================== Fiche detail ===================================================================== */ .hero{position:relative} .hero--detail{position:absolute;top:0;left:0;width:1920px;height:1080px;overflow:hidden} .hero__art{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center top;opacity:0;transition:opacity .4s var(--ease)} .hero__art.is-on{opacity:1} /* Repli quand on n'a que l'affiche verticale : etiree plein cadre elle coupait les visages. Floutee et agrandie, elle ne sert plus que d'ambiance, le temps que le vrai fond TMDB arrive. */ .hero__art--blur{ -webkit-filter:blur(30px) brightness(.5);filter:blur(30px) brightness(.5); -webkit-transform:scale(1.18);transform:scale(1.18); } .hero__scrim{ position:absolute;top:0;left:0;width:100%;height:100%; background: linear-gradient(0deg,#000 4%,rgba(0,0,0,.92) 22%,rgba(0,0,0,.55) 46%,rgba(0,0,0,.18) 70%,rgba(0,0,0,.45) 100%), linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.34) 42%,rgba(0,0,0,0) 72%); } /* Colonne defilante : la fiche depasse desormais l'ecran */ .detail__scroll{position:absolute;top:0;left:0;width:1920px;transition:transform .22s linear;will-change:transform} .detail{position:relative;padding:404px var(--safe) 0;width:1300px} .detail--series{padding-top:300px} .detail__extra{position:relative;padding:34px 0 100px} /* Logo du titre fourni par TMDB. A defaut, le titre reste en texte. */ .detail__logo{ height:172px;width:820px;margin-bottom:6px;display:none; background-repeat:no-repeat;background-position:left bottom;background-size:contain; } .detail__logo.is-on{display:block} /* Pastilles d'information sous le titre */ .chips{margin-top:18px;white-space:nowrap} .chip{ display:inline-block;background:rgba(28,28,30,.72);border:1px solid rgba(255,255,255,.22); border-radius:999px;padding:8px 20px;margin-right:12px;font-size:20px;color:var(--text); vertical-align:middle; } .chip--note{background:rgba(255,255,255,.16);color:#fff;font-weight:500} .chip--qual{background:var(--red);border-color:var(--red);color:#fff;font-weight:500;letter-spacing:.04em} /* Le synopsis dans son cadre, comme sur les fiches de cinema */ .plotbox{ margin-top:20px;width:1180px;border:1px solid rgba(255,255,255,.2); border-radius:16px;background:rgba(16,16,18,.55);padding:22px 26px; } .plotbox.is-empty{display:none} .seasonshost{margin:0} /* Casting */ .cast{white-space:nowrap;padding:0 var(--safe) 26px} .actor{ display:inline-block;vertical-align:top;background:none;border:0;padding:0; width:196px;margin-right:22px;text-align:center; } .actor__face{ width:172px;height:172px;border-radius:50%;margin:0 auto; background:#181818 center center no-repeat;background-size:cover; border:4px solid transparent; } .actor.is-focused .actor__face{border-color:var(--white)} .actor__name{font-size:21px;color:var(--text);margin-top:12px;font-weight:500; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .actor__role{font-size:18px;color:var(--grey);margin-top:4px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .actor.is-focused .actor__name{color:var(--white)} /* Ecran acteur */ .actorhead{padding:140px var(--safe) 24px;white-space:nowrap} .actorhead__face{ display:inline-block;vertical-align:middle;width:180px;height:180px;border-radius:50%; background:#181818 center center no-repeat;background-size:cover;margin-right:32px; } .actorhead>div{display:inline-block;vertical-align:middle} .actor__scroll{position:absolute;top:370px;left:0;width:1920px;height:710px;overflow:hidden} .actor__inner{position:relative;transition:transform .22s linear} .detail__eyebrow{font-size:20px;letter-spacing:.2em;color:var(--grey);text-transform:uppercase} .detail__title{font-size:64px;font-weight:700;color:var(--white);line-height:1.06;text-shadow:0 4px 24px rgba(0,0,0,.8)} .detail__title.is-off{display:none} .detail__meta{font-size:23px;color:var(--text);margin-top:14px} .detail__plot{font-size:23px;line-height:1.44;color:var(--text);max-height:100px;overflow:hidden} /* Deux corrections liees. La rangee n'avait que la largeur de la colonne de texte, 1196 px, alors que l'ecran en offre 1816 : sur la television, ou la police rend plus large, « J'adore » sortait du cadre et devenait inatteignable. On lui donne la largeur reelle, et on autorise le retour a la ligne comme filet de securite. La marge negative compense celle des boutons : rien ne bouge tant qu'ils tiennent sur une seule ligne. */ .detail__actions{margin-top:24px;margin-bottom:-14px;width:1816px} .detail__actions .pill,.detail__actions .btn{margin-bottom:14px} /* Reactions */ .react{margin-top:22px;white-space:nowrap} .rcell{display:inline-block;text-align:center;margin-right:22px;vertical-align:top} .rbtn{ display:block;background:rgba(70,70,70,.5);border:3px solid rgba(255,255,255,.4); border-radius:50%;width:84px;height:84px;color:var(--white);font-weight:400;font-size:34px;line-height:78px; text-align:center;transition:background .16s var(--ease); } .rbtn.is-focused{background:var(--white);color:#000;border-color:var(--white)} .rbtn.is-on{background:var(--white);color:#000;border-color:var(--white)} .rbtn--love.is-on{background:var(--red);color:#fff;border-color:var(--red)} .rbtn__label{font-size:19px;color:var(--grey);margin-top:10px;width:84px} /* Saisons et episodes */ /* Selecteur de saison : un seul bouton, qui ouvre la liste. Une rangee de pastilles debordait des la douzieme saison. */ .seasons{margin-top:26px} .seasonbtn{ display:inline-block;background:rgba(70,70,70,.55);border:3px solid rgba(255,255,255,.28); border-radius:999px;color:var(--white);font-weight:500;font-size:25px;line-height:1; padding:18px 34px; } .seasonbtn:after{content:" \25BE";color:var(--grey)} .seasonbtn.is-focused{background:var(--white);color:#000;border-color:var(--white)} .seasonbtn.is-focused:after{color:#000} .seasonbtn__count{font-size:20px;color:var(--grey);margin-left:14px;font-weight:400} .seasonbtn.is-focused .seasonbtn__count{color:#444} .spanel{ position:absolute;top:0;right:0;width:560px;height:1080px; background:rgba(10,10,10,.97);padding:70px 44px;display:none;z-index:32; } .spanel.is-on{display:block} .spanel__title{font-size:38px;font-weight:700;color:var(--white);margin-bottom:28px} .spanel__wrap{height:880px;overflow:hidden} .spanel__inner{position:relative;transition:transform .22s linear} .season{ display:block;width:100%;text-align:left;background:none;border:0;border-radius:8px; color:var(--text);font-weight:400;font-size:26px;line-height:1;padding:22px 24px;margin-bottom:6px; } .season.is-active{color:var(--white);font-weight:500} .season.is-active:after{content:" \2713";color:var(--red);float:right} .season.is-focused{background:var(--white);color:#000} .season.is-focused:after{color:#000} .season em{font-style:normal;font-size:20px;color:var(--grey);margin-left:14px} .season.is-focused em{color:#444} .episodes{margin-top:22px} .episodes__inner{position:relative;transition:transform .22s linear} /* Une ligne = le bouton de lecture, puis la coche. Deux boutons cote a cote : un bouton imbrique dans un autre serait invalide, et Focus ne saurait pas lequel viser. */ .eprow{display:flex;align-items:center;margin-bottom:12px} .eprow > * + *{margin-left:18px} .episodes__hint{ font-size:19px;color:var(--grey-dim);margin:0 0 16px 14px; } .ep{ flex:1 1 auto;min-width:0;display:block;text-align:left;background:none;border:0; border-radius:10px;padding:14px;color:var(--text); transition:background .16s var(--ease); } .epmark{ flex:0 0 auto;width:92px;height:92px;border-radius:50%;border:3px solid rgba(255,255,255,.28); background:none;color:rgba(255,255,255,.42);font-size:40px;line-height:1;font-weight:700; transition:background .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease); } .eprow.is-seen .epmark{background:var(--red);border-color:var(--red);color:#fff} .epmark.is-focused{background:var(--white);border-color:var(--white);color:#000} .ep.is-focused{background:rgba(255,255,255,.14);box-shadow:0 0 0 4px var(--white)} .ep__no{display:inline-block;vertical-align:middle;font-size:34px;color:var(--grey);width:56px;text-align:center} .ep__still{ display:inline-block;vertical-align:middle;width:250px;height:141px;border-radius:8px; background:#141414 center center no-repeat;background-size:cover;position:relative;margin-right:24px; } .ep__still i{position:absolute;left:0;bottom:0;height:6px;background:var(--red)} /* Vu jusqu'au bout. La pastille suffit a l'affirmer ; l'attenuation dit la meme chose en peripherie, pour que la liste se lise d'un coup d'oeil sans avoir a chercher les coches une par une. */ .ep__seen{ position:absolute;right:8px;bottom:8px;width:38px;height:38px;border-radius:50%; background:var(--red);color:#fff;font-size:22px;line-height:38px;text-align:center;font-weight:700; } .eprow.is-seen .ep__still, .eprow.is-seen .ep__no{opacity:.45} .eprow.is-seen .ep__title{color:var(--grey)} .eprow.is-seen .ep.is-focused .ep__still, .eprow.is-seen .ep.is-focused .ep__no{opacity:1} .eprow.is-seen .ep.is-focused .ep__title{color:var(--white)} .ep__body{display:inline-block;vertical-align:middle;width:600px} .ep__title{font-size:25px;font-weight:500;color:var(--white)} .ep__title em{font-style:normal;font-weight:400;font-size:20px;color:var(--grey);margin-left:16px} .ep__plot{font-size:20px;line-height:1.35;color:var(--grey);margin-top:8px;max-height:56px;overflow:hidden} /* ===================================================================== Connexion IPTV — version partage ===================================================================== */ #screen-setup{background:#050505;overflow:hidden} .setup{position:absolute;left:0;top:0;width:1920px;height:1080px;overflow:hidden} .setup__glow{ position:absolute;left:-260px;bottom:-380px;width:1120px;height:1120px;border-radius:50%; background:radial-gradient(circle,rgba(229,9,20,.26) 0%,rgba(111,0,8,.12) 34%,rgba(0,0,0,0) 70%); pointer-events:none; } .setup__intro{position:absolute;left:150px;top:155px;width:600px} .setup__logo{display:block;width:92px;height:92px;border-radius:19px;margin-bottom:62px} .setup__kicker{font-size:20px;letter-spacing:5px;font-weight:600;color:#AEB7C7;margin:0 0 22px} .setup__hero{font-size:76px;line-height:1.02;letter-spacing:-2px;font-weight:700;color:#fff;margin:0 0 28px} .setup__hero em{font-style:normal;color:var(--red)} .setup__lead{width:545px;font-size:26px;line-height:1.5;color:#AEB7C7;margin:0 0 38px} .setup__trust{white-space:nowrap} .setup__trust span{ display:inline-block;padding:12px 18px;margin-right:10px;border:1px solid rgba(255,255,255,.14); border-radius:999px;background:rgba(255,255,255,.045);font-size:18px;color:#D7DCE5; } .setup__card{ position:absolute;right:135px;top:90px;width:820px;min-height:830px;padding:58px 58px 44px; border:1px solid rgba(255,255,255,.12);border-radius:26px;background:rgba(20,20,22,.94); box-shadow:0 34px 90px rgba(0,0,0,.46); } .setup__cardtop{margin-bottom:30px} .setup__title{font-size:44px;line-height:1.1;font-weight:650;color:#fff;margin:0 0 14px} .setup__sub{width:690px;font-size:21px;line-height:1.45;color:#AEB7C7;margin:0} .tabs{margin:0 0 30px;white-space:nowrap} .tab{ display:inline-block;background:#29292D;border:0;color:#AEB7C7;font-weight:500; font-size:22px;line-height:1;padding:16px 25px;margin-right:10px;border-radius:999px; } .tab.is-active{color:#fff;background:#414147} .tab.is-focused{background:#fff;color:#000;box-shadow:0 0 0 4px rgba(255,255,255,.17)} .pane{display:none} .pane.is-active{display:block} .field{display:block;margin-bottom:22px} .field span{display:block;font-size:19px;color:#AEB7C7;margin-bottom:9px} .field input{ box-sizing:border-box;display:block;width:100%;height:76px;padding:0 22px;background:#101012; border:2px solid #35353A;border-radius:12px;color:#fff;font-weight:400;font-size:25px; line-height:1;outline:0; } .field input.is-focused{border-color:#fff;background:#18181B;box-shadow:0 0 0 3px rgba(255,255,255,.08)} .setup__twocol{white-space:nowrap} .field--half{display:inline-block;width:330px;vertical-align:top;margin-right:22px} .field--half.field--last{margin-right:0} .field__hint{font-size:18px;color:#7F8898;margin-top:-6px} .setup__actions{margin-top:30px;white-space:nowrap} .setup__actions .btn{height:68px;font-size:23px;padding:0 32px;margin-right:12px} /* 4.11.30 — CTA rouge au repos : le blanc est réservé au focus TV. */ #screen-setup .setup__actions .btn--primary{background:var(--red);color:#fff} #screen-setup .setup__actions .btn--primary.is-focused{background:#fff;color:#000} .setup__cancel{background:#29292D;color:#fff} .setup__cancel.is-focused{background:#fff;color:#000} .setup__error{margin-top:20px;font-size:20px;color:var(--red);min-height:27px} .setup__note{font-size:17px;line-height:1.4;color:#737C8C;margin:12px 0 0} /* Reglages */ .settings{position:absolute;top:290px;left:0;width:1920px;height:760px;padding:0 var(--safe);overflow:hidden} .settings__inner{position:relative;transition:transform .22s linear} .setting{ display:block;width:1000px;background:var(--panel);border:0;border-radius:8px; padding:28px 32px;margin-bottom:14px;color:var(--text);text-align:left; } .setting.is-focused{background:var(--white);color:#000} .setting.is-focused .setting__value{color:#333} .setting__label{display:inline-block;font-size:26px;font-weight:500;width:600px} .setting__value{display:inline-block;font-size:21px;color:var(--grey);text-align:right;width:320px} /* Profils — 4.11.14 : panneau gauche plus affirmé, sans logo */ #screen-profiles{background:#050505;overflow:hidden} .profiles__backdrops{position:absolute;top:0;left:0;width:100%;height:100%;background:#050505;overflow:hidden} .profiles__backdrop{ position:absolute;top:0;right:0;width:78%;height:100%; background-size:cover;background-position:center center;background-repeat:no-repeat; opacity:0;-webkit-transform:scale(1.015);transform:scale(1.015); -webkit-transition:opacity .9s ease;transition:opacity .9s ease; } .profiles__backdrop.is-on{opacity:1} .profiles__shade{ position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none; background: linear-gradient(90deg,#050505 0%,#050505 22%,rgba(5,5,5,.98) 29%,rgba(5,5,5,.86) 38%,rgba(5,5,5,.46) 51%,rgba(5,5,5,.12) 66%,rgba(5,5,5,.10) 100%), linear-gradient(0deg,rgba(5,5,5,.44) 0%,rgba(5,5,5,0) 34%,rgba(5,5,5,.08) 100%); } .profiles{position:absolute;top:0;left:0;width:1920px;height:1080px;text-align:left;z-index:2} .profiles__eyebrow{position:absolute;left:174px;top:150px;font-size:34px;font-weight:500;color:rgba(255,255,255,.92)} .profiles__row{ position:absolute;left:174px;top:224px;width:760px;height:780px; white-space:normal;display:block; } .profile-slot{position:relative;width:720px;height:158px;margin:0 0 16px 0;overflow:visible} .profile{ display:block;position:absolute;left:0;top:0;background:none;border:0;padding:0; width:680px;height:158px;text-align:left;color:var(--grey);overflow:visible; } .profile__face{ position:absolute;left:0;top:20px;width:112px;height:112px;border-radius:10px; font-size:48px;font-weight:700;line-height:112px;text-align:center;color:rgba(0,0,0,.42); border:4px solid transparent;background-size:cover;background-position:center; -webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:left center;transform-origin:left center; -webkit-transition:border-color .18s var(--ease),-webkit-transform .18s var(--ease),box-shadow .18s var(--ease); transition:border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease); } .profile__face.has-img{color:transparent} .profile__name{ position:absolute;left:174px;top:58px;margin:0;font-size:31px;font-weight:500;color:rgba(255,255,255,.58); opacity:.76;-webkit-transform:translateX(0);transform:translateX(0); -webkit-transition:color .18s var(--ease),opacity .18s var(--ease),-webkit-transform .18s var(--ease); transition:color .18s var(--ease),opacity .18s var(--ease),transform .18s var(--ease); } .profile.is-focused{z-index:4} .profile.is-focused .profile__face{ border-color:var(--white);-webkit-transform:scale(1.43);transform:scale(1.43); box-shadow:0 0 0 1px rgba(0,0,0,.65),0 16px 42px rgba(0,0,0,.42); } .profile.is-focused .profile__name{ color:var(--white);opacity:1;-webkit-transform:translateX(18px);transform:translateX(18px);font-size:39px;font-weight:600; } .profile--add .profile__face{background-color:rgba(255,255,255,.10);color:rgba(255,255,255,.65);font-size:54px;font-weight:300} .profile--add.is-focused .profile__face{background-color:rgba(255,255,255,.16);color:#fff} .profile-edit{ position:absolute;left:-68px;top:60px;width:38px;height:38px;border:0;background:transparent; color:rgba(255,255,255,.52);padding:0;border-radius:50%;opacity:.42; -webkit-transition:opacity .16s var(--ease),background .16s var(--ease),-webkit-transform .16s var(--ease); transition:opacity .16s var(--ease),background .16s var(--ease),transform .16s var(--ease); } .profile-edit svg{width:28px;height:28px;display:block;margin:5px} .profile.is-focused + .profile-edit{opacity:.95;color:#fff} .profile-edit.is-focused{opacity:1;background:rgba(255,255,255,.18);-webkit-transform:scale(1.18);transform:scale(1.18);color:#fff} /* Édition du profil — mise en page TV propre, sans logo */ #screen-profile-edit{ background:linear-gradient(90deg,#050505 0%,#090909 55%,#050505 100%); } .profileedit{ position:absolute;inset:0;text-align:left; padding:0; } .profileedit__eyebrow{ position:absolute;left:190px;top:150px;width:1100px; margin:0;font-size:48px;line-height:1.08;font-weight:650; color:#fff;white-space:nowrap; } .profileedit__body{ position:absolute;left:190px;top:285px;width:1420px;height:520px; display:flex;align-items:flex-start; } .profileedit__body > * + *{margin-left:110px} .profileedit__preview{ flex:0 0 310px;width:310px;height:310px;border-radius:18px; background-size:cover;background-position:center; font-size:116px;line-height:310px;text-align:center;font-weight:700; color:rgba(0,0,0,.40); box-shadow:0 0 0 4px rgba(255,255,255,.16),0 24px 70px rgba(0,0,0,.42); } .profileedit__form{ flex:0 0 760px;width:760px;padding-top:2px; } .profileedit__label{ display:block;margin:0 0 14px; font-size:25px;line-height:1.25;font-weight:500; color:rgba(255,255,255,.72); } .profileedit__input{ display:block;box-sizing:border-box;width:760px;height:82px; margin:0 0 34px;padding:0 24px; border:3px solid rgba(255,255,255,.20);border-radius:9px; background:#171717;color:#fff;outline:none; font-size:32px;font-weight:500; } .profileedit__input.is-focused,.profileedit__input:focus{ border-color:#fff;background:#1c1c1c; } .profileedit__btn{ display:block;box-sizing:border-box;width:430px;height:74px; margin:0 0 18px;padding:0 24px; border:3px solid rgba(255,255,255,.20);border-radius:8px; background:rgba(255,255,255,.08);color:#fff; font-size:25px;font-weight:500;text-align:center; -webkit-transition:border-color .16s var(--ease),background .16s var(--ease),-webkit-transform .16s var(--ease); transition:border-color .16s var(--ease),background .16s var(--ease),transform .16s var(--ease); } .profileedit__btn.is-focused{ border-color:#fff;background:rgba(255,255,255,.16); -webkit-transform:scale(1.025);transform:scale(1.025); } .profileedit__btn--primary{ margin-top:28px;background:var(--red);color:#fff;border-color:var(--red);font-weight:650; } .profileedit__btn--primary.is-focused{ background:#fff;color:#080808;border-color:#fff; box-shadow:0 0 0 3px rgba(0,0,0,.82), 0 0 0 7px rgba(255,255,255,.92); } /* Galerie d'images de profil */ .avatars{position:absolute;top:300px;left:0;width:1920px;height:740px;padding:0 var(--safe);overflow:hidden} .avatars__inner{position:relative;transition:transform .22s linear} .avatar{ display:inline-block;vertical-align:top;background:none;border:0;padding:0; width:200px;height:200px;margin:0 26px 26px 0;border-radius:12px; background-size:cover;background-position:center; box-shadow:0 0 0 4px transparent;transition:box-shadow .16s var(--ease); } .avatar.is-focused{box-shadow:0 0 0 6px var(--white)} .avatar.is-current{box-shadow:0 0 0 4px var(--red)} .avatar.is-current.is-focused{box-shadow:0 0 0 6px var(--white)} /* Ecran d'attente des recommandations */ .coldstart{padding:190px var(--safe) 0;max-width:1100px} .coldstart h2{font-size:52px;font-weight:700;color:var(--white)} .coldstart p{font-size:26px;line-height:1.5;color:var(--grey);margin-top:20px} .coldstart ul{margin-top:26px;list-style:none} .coldstart li{font-size:24px;color:var(--text);margin-bottom:14px;padding-left:30px;position:relative} .coldstart li:before{content:"";position:absolute;left:0;top:12px;width:11px;height:11px;border-radius:2px;background:var(--red)} /* ===================================================================== Lecteur ===================================================================== */ .osd{ position:absolute;top:0;left:0;width:1920px;height:1080px;opacity:0; transition:opacity .28s var(--ease); background:linear-gradient(0deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,0) 32%,rgba(0,0,0,0) 68%,rgba(0,0,0,.8) 100%); } .osd.is-on{opacity:1} .osd__top{position:absolute;top:var(--safe);left:var(--safe);width:1500px} .osd__eyebrow{font-size:20px;letter-spacing:.2em;color:var(--grey);text-transform:uppercase} .osd__title{font-size:50px;font-weight:700;color:var(--white);margin-top:14px} .osd__bottom{position:absolute;bottom:var(--safe);left:var(--safe);width:1816px} .bar{position:relative;height:8px;background:rgba(255,255,255,.3);border-radius:4px} .bar__ghost{position:absolute;left:0;top:0;height:100%;background:rgba(255,255,255,.55);border-radius:4px;width:0} .seek-tag{ position:absolute;bottom:26px;transform:translateX(-50%); background:var(--white);color:#000;font-size:20px;font-weight:500; padding:8px 14px;border-radius:6px;white-space:nowrap;display:none; } .osd.is-seeking .seek-tag{display:block} .osd.is-seeking .bar__fill{background:var(--white)} .bar__fill{position:absolute;left:0;top:0;height:100%;width:0;background:var(--red);border-radius:4px} /* --- Direct --------------------------------------------------------- Un flux en direct n'a pas de duree : le serveur annonce une fenetre glissante, si bien que la barre se remplissait puis repartait a zero, comme si le programme recommencait. On la montre donc pleine, avec un point au bout : c'est la convention de toutes les chaines, et elle se lit d'un coup d'oeil depuis le canape. */ .bar.is-direct .bar__fill{width:100%} .bar.is-direct .bar__ghost{display:none} .bar.is-direct:after{ content:'';position:absolute;right:-5px;top:50%; width:18px;height:18px;margin-top:-9px;border-radius:50%; background:var(--red);box-shadow:0 0 0 4px rgba(9,9,11,.9); } .osd__times{font-size:22px;color:var(--text);margin-top:14px} .osd__times span:last-child{float:right} .osd__hint{font-size:20px;color:var(--grey);margin-top:26px;clear:both} .spinner{position:absolute;top:508px;left:900px;width:120px;display:none;text-align:center} .spinner.is-on{display:block} .spinner i{display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--red);margin:0 5px;animation:pulse 1s infinite var(--ease)} .spinner i:nth-child(2){animation-delay:.15s} .spinner i:nth-child(3){animation-delay:.3s} @keyframes pulse{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}} .playererr{position:absolute;top:470px;left:410px;width:1100px;font-size:28px;color:var(--red);text-align:center;display:none} .playererr.is-on{display:block} .toast{ position:absolute;bottom:var(--safe);left:660px;width:600px;text-align:center; background:var(--panel-hi);border-left:5px solid var(--red);padding:20px 30px;border-radius:8px; font-size:23px;opacity:0;transition:opacity .25s var(--ease);z-index:99; } .toast.is-on{opacity:1} .empty{padding:60px var(--safe);font-size:26px;color:var(--grey)} @media (prefers-reduced-motion:reduce){*{transition-duration:.01ms !important;animation-duration:.01ms !important}} /* ===================================================================== Options de lecture : pistes audio et sous-titres ===================================================================== */ /* Colonne flexible plutot que positions fixes : la barre de rubriques passe sur deux lignes selon le flux (une chaine ajoute « Chaîne », un flux fusionne ajoute « Qualité »). Avec un `top` fige, la fenetre de defilement passait dessous. */ .opts{ position:absolute;top:0;right:0;width:720px;height:1080px; background:rgba(10,10,10,.96);padding:52px 44px 30px;display:none;z-index:30; } .opts.is-on{display:flex;flex-direction:column} .opts__title{flex:0 0 auto;font-size:38px;font-weight:700;color:var(--white);margin-bottom:6px} .opts__hint{flex:0 0 auto;font-size:19px;color:var(--grey);margin-bottom:20px;min-height:26px;line-height:1.3} /* Barre de rubriques. Une seule rubrique est montee a la fois : c'est ce qui evite qu'une piste audio numero neuf pousse les sous-titres sous le bord de l'ecran. */ /* `gap` en flexbox n'existe qu'a partir de Chromium 84 ; la television est en Chromium 76 et l'ignore purement et simplement. Les elements y etaient donc COLLES depuis toujours. Remplace par des marges, qui marchent partout. */ .opts__tabs > * { margin:0 10px 10px 0 } .optset > * + * { margin-left:18px } .opts__tabs{ flex:0 0 auto;display:flex;flex-wrap:wrap; padding-bottom:18px;margin-bottom:14px;border-bottom:2px solid rgba(255,255,255,.10); } .otab{ background:rgba(255,255,255,.07);border:0;border-radius:999px; padding:12px 22px;color:var(--grey);font-size:21px;font-weight:500;line-height:1; } .otab.is-active{color:var(--white);background:rgba(255,255,255,.16)} .otab.is-focused{background:var(--white);color:#000} /* Fenetre de defilement : c'est `.opts__inner` que Focus translate, exactement comme la grille ou les reglages. */ .opts__scroll{ flex:1 1 auto;position:relative;min-height:0;overflow:hidden; } .opts__inner{will-change:transform} .opts__group{font-size:22px;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin:26px 0 12px} .opts__group:first-child{margin-top:6px} .opt{ display:block;width:100%;text-align:left;background:none;border:0;border-radius:8px; padding:18px 22px;margin-bottom:6px;color:var(--text);font-weight:400;font-size:25px;line-height:1.15; } .opt.is-focused{background:var(--white);color:#000} .opt.is-on:after{content:"\2713";float:right;color:var(--red);font-weight:700} .opt.is-on.is-focused:after{color:#000} .opt__sub{display:block;font-size:19px;color:var(--grey);margin-top:5px} .opt.is-focused .opt__sub{color:#555} .opts__empty{font-size:21px;color:var(--grey-dim);padding:6px 22px 14px;line-height:1.4} /* Releve brut : lisible a l'ecran mais compact, et surtout non tronque — c'est le contenu exact qui sert au diagnostic. */ .opts__dump{font-size:17px;line-height:1.45;padding:2px 22px 6px;word-break:break-all;color:var(--grey)} /* Reglage a valeur : Gauche/Droite change la valeur sans quitter la ligne. */ .optset{ display:flex;align-items:center;justify-content:space-between; width:100%;background:none;border:0;border-radius:8px; padding:18px 22px;margin-bottom:6px;color:var(--text);font-size:25px;line-height:1.15;text-align:left; } .optset.is-focused{background:var(--white);color:#000} .optset__val{color:var(--red);font-weight:500;white-space:nowrap} .optset.is-focused .optset__val{color:#000} .optset__arrow{opacity:.55;font-weight:400} /* Sous-titres rendus par l'app quand la TV ne les incruste pas. Taille, graisse, couleur, contour et hauteur sont pilotes en ligne depuis les reglages : rien n'est fige ici. */ .subs{ position:absolute;left:200px;bottom:130px;width:1520px;text-align:center; font-size:40px;line-height:1.3;color:#fff; display:none;z-index:25;pointer-events:none; } .subs.is-on{display:block} .subs__line{ display:inline-block; background:var(--subs-bg,transparent); padding:var(--subs-pad,0); border-radius:6px; } .subs__line + .subs__line{margin-top:4px} /* Pendant le reglage de l'apparence, le panneau occupe les 720 px de droite : l'echantillon se retracte a gauche pour rester lisible a cote. Sa HAUTEUR, elle, reste celle du reglage — sinon « Hauteur a l'ecran » serait le seul reglage qu'on ne pourrait pas voir agir. */ .subs.is-preview{left:60px;width:1100px} /* Diagnostic de lecture */ .diag{ position:absolute;top:120px;left:52px;width:900px;z-index:40;display:none; background:rgba(0,0,0,.88);border-left:5px solid var(--red);padding:24px 28px;border-radius:8px; } .diag.is-on{display:block} .diag h4{font-size:24px;color:var(--white);margin-bottom:14px} .diag div{font-size:20px;color:var(--text);line-height:1.6;word-break:break-all} .diag b{color:var(--red);font-weight:500} /* Saisie de la cle TMDB */ .keypanel{ position:absolute;top:0;left:0;width:1920px;height:1080px; background:rgba(0,0,0,.96);padding:190px var(--safe) 0;display:none;z-index:35; } .keypanel.is-on{display:block} .keypanel h3{font-size:52px;font-weight:700;color:var(--white);margin-bottom:18px} .keypanel p{font-size:24px;line-height:1.5;color:var(--grey);max-width:1100px;margin-bottom:34px} .keypanel input{ display:block;width:1100px;height:88px;padding:0 26px;background:var(--panel); border:3px solid #3A3A3A;border-radius:8px;color:var(--white); font-weight:400;font-size:30px;line-height:1;outline:0;margin-bottom:30px; } .keypanel input.is-focused{border-color:var(--white);background:var(--panel-hi)} .keypanel__actions{white-space:nowrap} .keypanel__state{font-size:23px;color:var(--red);margin-top:26px;min-height:30px} /* ===================================================================== Ambiance : deux halos rouges deplaces en transform. On n'anime QUE transform : la TV compose le calque sans redessiner la page. Animer un degrade par background-position ferait ramer. ===================================================================== */ .ambience{ position:absolute;top:0;left:0;width:1920px;height:1080px; z-index:1;pointer-events:none; } /* Degrade fixe : aucun calcul par image, cout nul a l'affichage. L'animation, meme en transform, obligeait la TV a recomposer la page en permanence pendant qu'on naviguait. */ .ambience i{position:absolute;display:block} .ambience .a1{ left:0;top:0;width:1920px;height:1080px; /* 4.11.6 — deux radial-gradient sur 1920x1080. Sans promotion en couche, le moteur les repeignait a chaque changement au-dessus d'eux. Promus, ils sont peints une fois puis composes. */ -webkit-transform:translateZ(0);transform:translateZ(0); will-change:transform; background: radial-gradient(1200px 900px at 8% -10%, rgba(229,9,20,.26) 0%, rgba(229,9,20,.07) 45%, rgba(0,0,0,0) 72%), radial-gradient(1100px 850px at 100% 108%, rgba(150,10,32,.22) 0%, rgba(90,6,20,.06) 48%, rgba(0,0,0,0) 74%); } .ambience .a2{display:none} body.no-ambience .ambience{display:none} /* Vignettage bas : assoit l'image, cout nul */ .vignette{ position:absolute;top:0;left:0;width:1920px;height:1080px;z-index:6;pointer-events:none; background: linear-gradient(0deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.3) 13%,rgba(0,0,0,0) 27%), linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 14%); } /* Rien de tout cela pendant la lecture : le plan video doit rester nu */ html.is-playing .ambience, html.is-playing .vignette{display:none} /* Rappel discret du raccourci Retour, visible seulement en cours de navigation */ .backhint{ position:absolute;top:44px;right:132px;z-index:21; font-size:19px;color:var(--grey-dim);opacity:0; transition:opacity .3s var(--ease);pointer-events:none; } body.is-scrolled .backhint{opacity:1} .backhint b{color:var(--grey);font-weight:400} /* ===================================================================== Sport Une vignette ne represente plus un flux mais une CHAINE : le visuel est un logo, pas une image de programme. On le pose donc sur une plaque sombre en `contain` — un `cover` deformerait tous les logos. ===================================================================== */ .rail--chan .card__art, .grid--chan .card__art{ background-color:#131313; background-size:60% auto; background-repeat:no-repeat; background-position:50% 46%; border:1px solid rgba(255,255,255,.07); } .rail--chan .card.is-focused .card__art, .grid--chan .card.is-focused .card__art{border-color:transparent} /* Multiplex : le numero de canal n'etant publie nulle part, la vignette annonce combien de canaux elle ouvre. */ .card__deck{ position:absolute;top:12px;right:12px; font-size:16px;font-weight:500;line-height:1; padding:6px 12px;border-radius:999px; background:rgba(0,0,0,.66);color:var(--white); border:1px solid rgba(255,255,255,.22); } /* Releve de fusion : deux colonnes, lisibles a trois metres */ .diaglist{position:relative;padding:0 var(--safe) 60px} .diagrow{display:block;width:100%;padding:11px 14px;text-align:left; background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.07); color:var(--text);font-family:inherit;white-space:nowrap;overflow:hidden;border-radius:6px} .diagrow.is-focused{background:var(--panel-hi)} .diagrow b{display:inline-block;width:520px;font-size:22px;font-weight:500;color:var(--white); overflow:hidden;text-overflow:ellipsis;vertical-align:middle} .diagrow span{font-size:22px;color:var(--grey)} /* ===================================================================== Vignettes de match Aucune source gratuite ne fournit d'image de match : la vignette est composee a partir de l'embleme de la competition et des deux ecussons. Elle doit repondre a trois questions dans cet ordre, lisibles a trois metres : qui joue, a quelle heure, sur quelle chaine. Au repos elle est verticale, aux dimensions d'une affiche de film. Au focus la carte s'elargit a 880 pixels et la meme composition se remet a l'horizontale — c'est la grammaire deja en place pour les films, il n'y a rien de nouveau a apprendre. ===================================================================== */ .matchslot{position:relative} .mtile{background:#101010} /* --- vignette illustree --- Quand une grille a fourni une photo du programme, elle passe en fond sous un voile sombre (compose en JS, dans `fondMatch`). Le voile suffit a tenir le contraste sur une image sombre ; sur une pelouse en plein soleil il ne suffit pas, et c'est l'ombre portee qui reprend le relais. Elle ne coute rien quand il n'y a pas de photo — la regle n'est simplement pas appliquee. Les ecussons, eux, montent d'un cran en luminosite : poses sur une photo plutot que sur du noir, les logos sombres se perdaient. */ .mcard.has-photo .mtile__comp span, .mcard.has-photo .mteam b, .mcard.has-photo .mfoot__chan, .mcard.has-photo .mfoot__hour, .mcard.has-photo .mvs{text-shadow:0 1px 3px rgba(0,0,0,.85)} .mcard.has-photo .mteam b{color:#fff} .mcard.has-photo .mtile__foot{background:rgba(9,9,11,.72)} .mcard.has-photo.is-en-direct .mtile__foot{background:rgba(74,10,13,.86)} /* --- barre d'accent : la couleur de la competition, et rien d'autre --- */ .mtile__bar{position:absolute;left:0;right:0;top:0;height:6px;background:#5A5A5A} /* --- competition, en haut --- */ .mtile__comp{position:absolute;left:0;right:0;top:30px;text-align:center;white-space:nowrap} /* L'embleme est pose sur une pastille blanche : le logo de la Ligue des champions est bleu marine sur transparent et se perd sinon dans le fond noir. `background-size` en pourcentage tient lieu de marge interieure — `padding` n'agit pas sur une image de fond. */ .mtile__emb{ display:inline-block;vertical-align:middle;margin-right:9px; width:38px;height:38px;border-radius:50%;background-color:#fff; background-repeat:no-repeat;background-position:50% 50%;background-size:66% 66%; } .mtile__comp span{ display:inline-block;vertical-align:middle;max-width:224px; font-size:16px;font-weight:500;letter-spacing:.11em;text-transform:uppercase; color:var(--grey);overflow:hidden;text-overflow:ellipsis; } /* `.mtile__comp span` porte deja un display : une simple classe ne pesait pas assez lourd pour l'annuler, et les deux libelles s'affichaient l'un derriere l'autre — « CONFERENCE LG. UEFA EUROP », coupe en plein mot. */ .mtile__comp span.mcomp--long{display:none} /* --- l'affiche, au centre --- Les deux equipes sont cote a cote des le repos. Empilees, elles passaient sous la bande de l'heure : deux ecussons de 86 pixels et deux noms ne tiennent pas dans les 462 pixels de la vignette. */ .mtile__duel{position:absolute;left:0;right:0;top:140px;text-align:center;white-space:nowrap} .mteam{display:inline-block;width:124px;vertical-align:top} .mcrest{ display:block;margin:0 auto;width:104px;height:104px; background-repeat:no-repeat;background-position:50% 50%;background-size:contain; font-style:normal;font-size:28px;font-weight:700;line-height:104px; color:var(--grey-dim);letter-spacing:.04em; } /* Deux lignes autorisees, hauteur fixe : « Olympiakos Piraeus » passe en entier au lieu d'etre coupe, et rien ne descend plus bas pour autant. */ .mteam b{ display:block;margin-top:12px;padding:0 4px;height:52px;overflow:hidden; font-size:21px;font-weight:500;line-height:1.2;color:var(--white); /* `white-space` est en `nowrap` sur la rangee pour tenir les deux equipes sur une ligne. Il faut le relacher ici, sinon le nom ne peut pas passer sur deux lignes et deborde de sa colonne. */ white-space:normal; } .mvs{ display:inline-block;width:46px;vertical-align:top;padding-top:42px; font-size:19px;color:var(--grey-dim); } .mvs__tiret{font-style:normal} .mvs__mot{display:none} .mscore{ display:block;font-size:22px;font-weight:700;color:var(--white);letter-spacing:.02em; } /* --- la bande du bas : la chaine au repos, l'heure au focus --- */ .mtile__foot{ position:absolute;left:0;right:0;bottom:0;height:72px; background:#191919;text-align:center; } .mfoot__chan{ display:inline-block;padding:0 14px;max-width:100%; font-size:26px;font-weight:700;line-height:72px;color:var(--white);letter-spacing:.01em; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:top; } .mfoot__hour{display:none} .mfoot__chan.is-live:before{ content:"";display:inline-block;width:14px;height:14px;border-radius:50%; background:var(--white);margin-right:12px;vertical-align:middle; -webkit-animation:mpulse 1.6s infinite;animation:mpulse 1.6s infinite; } @-webkit-keyframes mpulse{0%,100%{opacity:1}50%{opacity:.25}} @keyframes mpulse{0%,100%{opacity:1}50%{opacity:.25}} /* ===================================================================== Le chiffre geant, a gauche de la vignette Meme trait ajoure que le Top 10, meme chevauchement — mais il ne classe rien : il donne l'heure, l'heure au-dessus des minutes. « 20h45 » sur une seule ligne serait deux fois trop large pour la place laissee entre deux vignettes ; empile, il se lit d'un coup d'oeil et occupe exactement la hauteur de l'affiche. Des le coup d'envoi, les deux etages cedent la place a un seul nombre, la minute de jeu, en rouge. C'est le seul chiffre de l'application qui bouge tout seul. ===================================================================== */ .mcard{width:498px} .mrank{ display:inline-block;vertical-align:top;width:210px;height:462px; margin-right:-18px;padding-top:26px;text-align:right;font-style:normal; } .mrank b{ display:block;font-size:184px;line-height:.94;font-weight:700; letter-spacing:-.06em;color:transparent;-webkit-text-stroke:5px #6E6E6E; } .mrank--min{padding-top:0} .mrank--min b{font-size:232px;line-height:462px} .mbody{display:inline-block;vertical-align:top;width:306px;white-space:normal} /* ===================================================================== Match en cours : la vignette entiere passe au rouge. Le rouge de l'application ne sert qu'a ca. Une rangee de vignettes rouges par principe l'aurait vide de son sens ; ici, une seule tuile rouge au milieu de six sombres se lit a trois metres sans effort. ===================================================================== */ .mcard.is-en-direct .mtile{background:#2E0709} .mcard.is-en-direct .mtile__bar{background:var(--red) !important} .mcard.is-en-direct .mtile__foot{background:#4A0A0D} .mcard.is-en-direct .mtile__comp span{color:#EFB4B6} .mcard.is-en-direct .mvs{color:#C08D8F} .mcard.is-en-direct .mcrest{color:#C08D8F} .mcard.is-en-direct .mrank b{-webkit-text-stroke-color:var(--red)} /* ===================================================================== La meme vignette, une fois selectionnee : 880 pixels de large. La composition se remet a l'horizontale, cadree a gauche. ===================================================================== */ .mcard.is-focused{width:1072px} .mcard.is-focused .mbody{width:880px} .mcard.is-focused .mrank b{-webkit-text-stroke-color:#9A9A9A} .mcard.is-focused .mtile__comp{left:44px;right:auto;top:40px;text-align:left} .mcard.is-focused .mtile__emb{width:46px;height:46px;margin-right:14px} .mcard.is-focused .mcomp--court{display:none} .mcard.is-focused .mcomp--long{ display:inline-block;max-width:700px;font-size:19px; } .mcard.is-focused .mtile__duel{left:44px;right:auto;top:124px;text-align:left} .mcard.is-focused .mteam{width:296px} .mcard.is-focused .mcrest{width:128px;height:128px;line-height:128px;font-size:36px} .mcard.is-focused .mteam b{margin-top:16px;height:62px;font-size:26px;text-align:center} .mcard.is-focused .mvs{ width:96px;padding-top:52px;font-size:18px; letter-spacing:.14em;text-transform:uppercase;text-align:center; } .mcard.is-focused .mvs__tiret{display:none} .mcard.is-focused .mvs__mot{display:block;font-style:normal} .mcard.is-focused .mscore{font-size:30px} .mcard.is-focused .mtile__foot{ left:44px;right:44px;bottom:30px;height:auto;background:none;text-align:left; } .mcard.is-focused .mfoot__hour{ display:inline-block;vertical-align:baseline;font-style:normal; font-size:40px;font-weight:700;line-height:1;color:var(--white);letter-spacing:.02em; } .mcard.is-focused .mfoot__chan{ padding:0;margin-left:20px;font-size:21px;font-weight:400;line-height:1; color:var(--grey);vertical-align:baseline; } .mcard.is-en-direct.is-focused .mfoot__chan{color:#C08D8F} .mcard.is-focused .mfoot__chan.is-live:before{display:none} /* Vignette d'evenement : la pastille rouge reste reservee au direct, une heure a venir se contente d'un fond neutre. */ /* L'heure doit se lire d'un fauteuil, comme « DIRECT ». Elle etait posee en gris translucide et en graisse moyenne : a trois metres, on voyait la pastille sans lire le chiffre. Meme graisse et meme presence que le direct, mais en noir — le rouge reste reserve a ce qui se joue maintenant. */ .card__badge--heure{ background:rgba(0,0,0,.88);color:var(--white);font-weight:700; border:1px solid rgba(255,255,255,.34); } .ecard .card__label b{font-size:21px} /* Ligne d'explication quand la rangee « Ce soir » reste vide */ .matchnote{ padding:26px var(--safe) 40px; font-size:22px;color:var(--grey-dim); } /* ===================================================================== Direct — grille des chaines Trois colonnes, rangees de hauteur constante : la navigation se fait par indice, sans jamais mesurer la page. Les largeurs sont figees en pixels pour la meme raison. Le compte, au pixel : 1920 - 2 x 52 de marge = 1816 utiles. 3 x 568 + 2 x 48 de gouttiere = 1800, plus 8 px de respiration a gauche pour que l'anneau blanc du focus ne soit pas rogne par le masque de defilement. La piste interieure est declaree a 1856 px afin que la marge droite de la troisieme vignette ne provoque pas de retour a la ligne : Chromium 76 n'a pas `gap`. Rangee = 320 (image) + 66 (legende) + 34 (respiration) = 420. Fenetre de 856 px : deux rangees pleines et l'amorce de la troisieme, qui signale qu'il y a une suite. ===================================================================== */ .rails--flat{padding-top:130px;padding-bottom:0} .chanwrap{padding:0 var(--safe)} /* --- Filtre --- */ /* Pas d'overflow:hidden ici : c'est lui qui coupait l'anneau blanc du focus en haut et en bas de la pastille. */ .chanbar{height:76px;padding-top:9px;white-space:nowrap} .chanpill{ display:inline-block;vertical-align:top; height:58px;padding:0 34px; border:0;border-radius:29px;background:rgba(255,255,255,.07); font-family:inherit;font-size:24px;font-weight:500;line-height:58px; color:var(--grey); } /* Tant qu'il n'y avait qu'une pastille, aucun ecart n'etait necessaire. Depuis « Replay », elles se touchaient. Une marge entre voisines — pas de `gap`, la television est en Chromium 76 qui l'ignore. */ .chanpill + .chanpill{margin-left:16px} .chanpill.is-on{background:var(--red);color:#fff} .chanpill.is-focused{box-shadow:0 0 0 4px var(--white);color:var(--white)} /* --- Fenetre de defilement --- */ .chanview{position:relative;height:856px;overflow:hidden} .chan__inner{ position:relative;width:1856px;padding:8px 0 0 8px; transition:transform .22s linear;will-change:transform; } /* --- Vignette --- */ .chan{ display:inline-block;vertical-align:top; width:568px;margin:0 48px 34px 0; background:none;border:0;padding:0;text-align:center; font-family:inherit; } .chan__art{ position:relative;display:block;width:568px;height:320px; border-radius:10px;overflow:hidden; background:#141414 center center no-repeat;background-size:cover; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); } /* Une image de programme derriere un logo blanc le rend illisible : on l'assombrit d'un cran, comme sur une chaine de television. */ .chan__art.has-art:before{ content:"";position:absolute;top:0;left:0;width:100%;height:100%; background:rgba(0,0,0,.34); } .chan.is-focused .chan__art{box-shadow:0 0 0 5px var(--white)} /* Le logo est pose au centre, jamais etire : `contain` garde les proportions des pastilles fournies par le bouquet. */ .chan__logo{ position:absolute;top:50%;left:50%; width:252px;height:140px;margin:-70px 0 0 -126px; background:center center no-repeat;background-size:contain; } .chan__logo--text{ display:block;width:460px;margin-left:-230px; font-style:normal;font-size:30px;font-weight:500;line-height:1.2; color:var(--white);overflow:hidden; } /* Pastille de lecture, en bas a gauche comme sur la reference */ .chan__play{ position:absolute;left:18px;bottom:20px;width:38px;height:38px; border-radius:50%;background:rgba(0,0,0,.55); box-shadow:inset 0 0 0 1px rgba(255,255,255,.5); } .chan__play:after{ content:"";position:absolute;top:12px;left:15px; border-left:11px solid rgba(255,255,255,.92); border-top:7px solid transparent;border-bottom:7px solid transparent; } /* Avancement du programme en cours */ .chan__bar{ position:absolute;left:0;bottom:0;width:100%;height:6px; background:rgba(255,255,255,.22); } .chan__bar i{display:block;height:100%;background:var(--white)} .chan__fav{ position:absolute;top:14px;right:18px; font-size:26px;line-height:1;color:var(--red); text-shadow:0 1px 4px rgba(0,0,0,.9); } /* --- Legende sous la vignette --- */ /* Hauteur figee : quand le programme arrive, le titre remplace le nom de la chaine et une seconde ligne apparait. Si le bloc grandissait, toutes les rangees suivantes se decaleraient et les positions mises en cache pour la navigation deviendraient fausses. */ .chan__label{ display:block;width:100%;height:66px;padding:12px 8px 0; overflow:hidden;text-align:center; } .chan__label b{ display:block;font-size:24px;font-weight:400;line-height:1.2; color:var(--text); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .chan__label span{ display:block;margin-top:3px;font-size:18px;font-weight:400; line-height:1.15;color:var(--grey); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .chan.is-focused .chan__label b{color:var(--white)} /* Transitions discrètes entre profils/ecrans et changements de visuel. */ .ui-fade{ position:absolute;top:0;left:0;width:1920px;height:1080px;z-index:90; background:#000;opacity:0;pointer-events:none; -webkit-transition:opacity .22s var(--ease);transition:opacity .22s var(--ease); } .ui-fade.is-on{opacity:1} .card__art{ -webkit-transition:box-shadow .16s var(--ease),-webkit-filter .18s var(--ease),opacity .18s var(--ease); transition:box-shadow .16s var(--ease),filter .18s var(--ease),opacity .18s var(--ease); -webkit-filter:blur(0);filter:blur(0); } /* Transition visuelle douce poster <-> backdrop : le flou masque le cut sans flash noir. 6px reste lisible et suffisamment leger sur TV. */ .card__art.is-art-switching{ -webkit-filter:blur(6px);filter:blur(6px);opacity:.90; } /* ------------------------------------------------------------------ Navigation horizontale : micro fondu sombre + blur leger. L'animation ne touche ni la largeur de la carte ni la piste : aucune reflow supplementaire sur Tizen. Elle masque uniquement le changement poster -> backdrop et donne une entree/sortie moins brutale. */ .card__art.is-nav-leaving{ -webkit-animation:wtvCardLeave .48s cubic-bezier(.22,.61,.25,1) both; animation:wtvCardLeave .48s cubic-bezier(.22,.61,.25,1) both; } .card__art.is-nav-arriving{ -webkit-animation:wtvCardArrive .48s cubic-bezier(.18,.72,.2,1) both; animation:wtvCardArrive .48s cubic-bezier(.18,.72,.2,1) both; } /* Petite respiration AVANT le changement de focus. */ .card__art.is-nav-preleave{ -webkit-animation:wtvCardPreLeave .15s cubic-bezier(.3,.55,.35,1) both; animation:wtvCardPreLeave .15s cubic-bezier(.3,.55,.35,1) both; } /* ================================================================ 4.4.9 — Navigation performance pass Les elements mobiles sont promus au compositeur. On ne demande pas au navigateur de repeindre tout le rail pendant un deplacement. ================================================================ */ .rail__track{ will-change:transform; -webkit-transform:translateZ(0); transform:translateZ(0); -webkit-backface-visibility:hidden; backface-visibility:hidden; } .card{ -webkit-backface-visibility:hidden; backface-visibility:hidden; } .card__art{ will-change:opacity,transform,filter; -webkit-transform:translateZ(0); transform:translateZ(0); -webkit-backface-visibility:hidden; backface-visibility:hidden; } /* Overrides plus legers que le blur 4px precedent : meme sensation sombre/soft, beaucoup moins de rasterisation sur TV. */ @-webkit-keyframes wtvCardPreLeave{ 0%{-webkit-filter:brightness(1);opacity:1;-webkit-transform:translateZ(0) scale(1)} 100%{-webkit-filter:brightness(.62);opacity:.80;-webkit-transform:translateZ(0) scale(.994)} } @keyframes wtvCardPreLeave{ 0%{filter:brightness(1);opacity:1;transform:translateZ(0) scale(1)} 100%{filter:brightness(.62);opacity:.80;transform:translateZ(0) scale(.994)} } @-webkit-keyframes wtvCardLeave{ 0%{-webkit-filter:brightness(.62);opacity:.80;-webkit-transform:translateZ(0) scale(.994)} 45%{-webkit-filter:brightness(.46);opacity:.69;-webkit-transform:translateZ(0) scale(.99)} 100%{-webkit-filter:brightness(.78);opacity:.94;-webkit-transform:translateZ(0) scale(.997)} } @keyframes wtvCardLeave{ 0%{filter:brightness(.62);opacity:.80;transform:translateZ(0) scale(.994)} 45%{filter:brightness(.46);opacity:.69;transform:translateZ(0) scale(.99)} 100%{filter:brightness(.78);opacity:.94;transform:translateZ(0) scale(.997)} } @-webkit-keyframes wtvCardArrive{ 0%{-webkit-filter:brightness(.46);opacity:.68;-webkit-transform:translateZ(0) scale(.99)} 38%{-webkit-filter:brightness(.64);opacity:.83;-webkit-transform:translateZ(0) scale(.994)} 72%{-webkit-filter:brightness(.87);opacity:.96;-webkit-transform:translateZ(0) scale(.998)} 100%{-webkit-filter:brightness(1);opacity:1;-webkit-transform:translateZ(0) scale(1)} } @keyframes wtvCardArrive{ 0%{filter:brightness(.46);opacity:.68;transform:translateZ(0) scale(.99)} 38%{filter:brightness(.64);opacity:.83;transform:translateZ(0) scale(.994)} 72%{filter:brightness(.87);opacity:.96;transform:translateZ(0) scale(.998)} 100%{filter:brightness(1);opacity:1;transform:translateZ(0) scale(1)} } /* ================================================================ 4.5.1 — Compositor-first cards Avant : .card--tall passait de 306 a 880 px au focus. Le moteur devait recalculer toute la piste horizontale a chaque fleche. La carte garde maintenant sa largeur de mise en page ; seul son visuel deborde en surimpression. Les offsetLeft ne changent plus pendant la navigation. ================================================================ */ .rail .card--tall{ width:306px; contain:layout style; } .rail .card--tall.is-focused{ width:306px; z-index:30; } .rail .card--tall .card__art{ width:306px; transition:width .30s cubic-bezier(.2,.72,.2,1), opacity .30s cubic-bezier(.2,.72,.2,1), -webkit-filter .30s cubic-bezier(.2,.72,.2,1); transition:width .30s cubic-bezier(.2,.72,.2,1), opacity .30s cubic-bezier(.2,.72,.2,1), filter .30s cubic-bezier(.2,.72,.2,1); -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); } .rail .card--tall.is-focused .card__art{ width:880px; } .rail .card--tall.is-focused .card__label{ width:540px; } .rail .card--tall.is-focused + .card, .rail .rank + .card{ /* no-op volontaire : aucun push des voisins */ } /* Le rail actif passe au-dessus des voisins pendant l'expansion. */ .rail.has-focus{position:relative;z-index:20} /* contain paint n'est PAS applique au rail actif : le visuel selectionne doit pouvoir deborder. Les rails non actifs sont moins chers a repeindre. */ .rail:not(.has-focus){contain:layout style;} /* ================================================================ 4.5.2 — Expansion lisible, sans recouvrir le film suivant Retour au comportement de mise en page attendu : la carte selectionnee prend sa place dans le rail et pousse doucement les voisines. On retire l'overlay 880px qui masquait la vignette suivante. ================================================================ */ .rail .card--tall{ width:306px; contain:none; transition:width .38s cubic-bezier(.16,.84,.22,1); -webkit-transition:width .38s cubic-bezier(.16,.84,.22,1); } .rail .card--tall.is-focused{ width:880px; z-index:2; } .rail .card--tall .card__art{ width:100%; transition:opacity .34s cubic-bezier(.2,.72,.2,1), -webkit-filter .34s cubic-bezier(.2,.72,.2,1); transition:opacity .34s cubic-bezier(.2,.72,.2,1), filter .34s cubic-bezier(.2,.72,.2,1); } .rail .card--tall.is-focused .card__art{ width:100%; } .rail .card--tall.is-focused .card__label{ width:540px; } /* Le rail n'a plus besoin de passer au-dessus de ses voisins. */ .rail.has-focus{z-index:auto} .rail:not(.has-focus){contain:none} /* Le deplacement horizontal accompagne l'expansion au lieu de la combattre : meme easing et duree voisine. */ .rail__track{ transition:transform .32s cubic-bezier(.16,.84,.22,1); -webkit-transition:-webkit-transform .32s cubic-bezier(.16,.84,.22,1); } /* ================================================================ 4.5.3 — Vertical smooth + Top 10 layout fix ================================================================ */ /* Le wrapper du Top 10 suit maintenant réellement l'agrandissement de sa carte. En inline-block, certains moteurs Tizen gardaient une largeur intermédiaire pendant la transition : le rang suivant passait dessous, d'où les chiffres 1/2 qui disparaissaient ou 3/4 collés. */ .rail--top10 .rank{ display:inline-flex; vertical-align:top; align-items:flex-start; overflow:visible; } .rail--top10 .rank__num{ flex:0 0 auto; /* Le -46px global faisait passer le bord gauche de l'affiche sous le chiffre du Top 10 sur certains Tizen. On garde un vrai espace : aucune partie de la miniature n'est masquee/coupee a gauche. */ margin-right:18px; } .rail--top10 .card--tall{ flex:0 0 auto; } /* La grosse colonne verticale reste sur sa couche composite pendant les rafales Haut/Bas. */ .home__scroll{ will-change:transform; -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); -webkit-backface-visibility:hidden; backface-visibility:hidden; transition:transform .30s cubic-bezier(.16,.84,.22,1); -webkit-transition:-webkit-transform .30s cubic-bezier(.16,.84,.22,1); } /* ================================================================ 4.5.4 — Sport card geometry repair Les cartes match ont leur propre composition : [heure geante 192px] + [affiche 306px]. Les regles generiques .card--tall de Films avaient repris la main et forçaient tout le bouton a 306px : les heures debordaient alors sur les matchs suivants. On reverrouille ici la geometrie Sport. ================================================================ */ .rail--match .mcard{ width:498px; transition:width .34s cubic-bezier(.16,.84,.22,1); -webkit-transition:width .34s cubic-bezier(.16,.84,.22,1); contain:none; } .rail--match .mcard .mrank{ width:210px; flex:0 0 210px; } .rail--match .mcard .mbody{ width:306px; } .rail--match .mcard.is-focused{ width:1072px; } .rail--match .mcard.is-focused .mbody{ width:880px; } .rail--match .mcard .card__art{ width:100%; } .rail--match .mcard.is-focused .card__art{ width:100%; } /* ================================================================ 4.5.6 — Vertical navigation pipeline Pendant Haut/Bas, l'ancienne carte revient instantanement a 306 px et la nouvelle RESTE a 306 px le temps que la colonne termine son glide. Une fois la colonne stabilisee, la nouvelle carte s'ouvre seule. On ne fait donc plus simultanement: 1) scroll vertical, 2) shrink 880->306, 3) grow 306->880, 4) changement d'art. C'etait le drop FPS le plus visible sur Tizen. ================================================================ */ body.nav-vertical-moving .rail .card--tall{ transition:none !important; -webkit-transition:none !important; } body.nav-vertical-moving .rail .card--tall.is-focused{ width:306px !important; } body.nav-vertical-moving .rail .card--tall .card__art{ transition:none !important; -webkit-transition:none !important; } body.nav-vertical-moving .rail--match .mcard{ transition:none !important; -webkit-transition:none !important; } body.nav-vertical-moving .rail--match .mcard.is-focused{ width:498px !important; } body.nav-vertical-moving .rail--match .mcard.is-focused .mbody{ width:306px !important; } /* Apres le glide vertical, expansion un peu plus courte et plus douce. */ .rail .card--tall{ transition:width .30s cubic-bezier(.16,.84,.22,1); -webkit-transition:width .30s cubic-bezier(.16,.84,.22,1); } .home__scroll{ transition:transform .28s cubic-bezier(.16,.84,.22,1); -webkit-transition:-webkit-transform .28s cubic-bezier(.16,.84,.22,1); } /* ================================================================ 4.5.7 — Vertical artwork handoff Pendant Haut/Bas la carte ne montre JAMAIS un backdrop horizontal dans ses 306 px. Elle conserve le poster entier avec fond floute, puis le backdrop arrive une fois l'expansion terminee. ================================================================ */ body.nav-vertical-moving .rail .card--tall.is-focused.vertical-entering, .rail .card--tall.is-focused.vertical-entering{ background:#0e0e0e; } body.nav-vertical-moving .rail .card--tall.is-focused.vertical-entering .card__blur, body.nav-vertical-moving .rail .card--tall.is-focused.vertical-entering .card__sharp, .rail .card--tall.is-focused.vertical-entering .card__blur, .rail .card--tall.is-focused.vertical-entering .card__sharp{ opacity:1 !important; } /* L'image de fond principale peut deja etre prete derriere les couches poster. Leur disparition progressive revele le backdrop au lieu de montrer une frame noire. */ .rail .card--tall.is-focused .card__blur, .rail .card--tall.is-focused .card__sharp{ will-change:opacity; } /* Le cadrage poster doit rester entier pendant l'entree verticale. */ .rail .card--tall.is-focused.vertical-entering .card__sharp{ background-size:auto 100% !important; background-position:50% 50% !important; } .rail .card--tall.is-focused.vertical-entering .card__blur{ background-size:cover !important; background-position:50% 50% !important; } /* ================================================================ 4.5.9 — Netflix-like artwork + vertical motion pass Objectifs: - aucune image de vignette ne doit etre coupee ; - le passage poster <-> backdrop traverse un noir tres court plutot que de laisser deux images se superposer ; - Haut/Bas demarre doucement puis accelere, tout en restant court. ================================================================ */ /* Les affiches verticales restent entierement visibles au repos. Le ratio de la carte est presque identique a celui d'un poster TMDB, donc les eventuelles bandes sont minimes mais aucun bord n'est rogne. */ .rail .card--tall:not(.is-focused) .card__art, .grid .card--tall .card__art{ background-size:contain; background-position:50% 50%; background-color:#0b0b0b; } /* Une vignette selectionnee prend un vrai ratio 16:9. 462 * 16 / 9 = 821.33 : 822 px garde le ratio sans crop et allege aussi le reflow par rapport aux 880 px precedents. */ .rail .card--tall.is-focused{ width:822px; } .rail .card--tall.is-focused .card__art{ width:100%; } .rail .card--tall.is-focused:not(.no-deco) .card__art{ background-size:contain; background-position:50% 50%; background-color:#080808; } .rail .card--tall.is-focused .card__label{ width:540px; } /* Les Top 10 suivent exactement la meme geometrie : le nombre reste a gauche mais ne recouvre jamais le premier pixel du visuel. */ .rail--top10 .card--tall.is-focused{ width:822px; } .rail--top10 .rank__num{ margin-right:22px; } /* Noir de transition pose AU-DESSUS de toutes les couches artwork. Il masque donc a la fois background-image, blur et sharp, ce qui supprime la frame fantome poster/backdrop sur certains Tizen. */ .card__art:after{ content:""; position:absolute; z-index:50; left:0;top:0;right:0;bottom:0; border-radius:inherit; background:#000; opacity:0; pointer-events:none; -webkit-transition:opacity .11s cubic-bezier(.32,0,.68,1); transition:opacity .11s cubic-bezier(.32,0,.68,1); -webkit-transform:translateZ(0); transform:translateZ(0); } .card__art.is-blackout:after{opacity:1} .card__art.is-blackout-out:after{ opacity:0; -webkit-transition-duration:.15s; transition-duration:.15s; -webkit-transition-timing-function:cubic-bezier(.16,.76,.24,1); transition-timing-function:cubic-bezier(.16,.76,.24,1); } /* L'ancien blur/brightness de navigation coute du raster et donne une sensation de faible FPS. Le fondu noir suffit : aucune animation de filtre pendant les fleches. */ .card__art.is-art-switching, .card__art.is-nav-preleave, .card__art.is-nav-leaving, .card__art.is-nav-arriving{ -webkit-filter:none !important; filter:none !important; opacity:1 !important; -webkit-animation:none !important; animation:none !important; } .card__art{ will-change:opacity,transform; } /* Haut/Bas : petit ease-in au depart, acceleration franche ensuite et atterrissage propre. 230 ms garde une sensation immediate. */ .home__scroll{ transition:transform .23s cubic-bezier(.44,.03,.24,1); -webkit-transition:-webkit-transform .23s cubic-bezier(.44,.03,.24,1); } /* L'expansion arrive juste apres le glide, courte et sans rebond. */ .rail .card--tall{ transition:width .23s cubic-bezier(.18,.72,.18,1); -webkit-transition:width .23s cubic-bezier(.18,.72,.18,1); } .rail--match .mcard{ transition:width .23s cubic-bezier(.18,.72,.18,1); -webkit-transition:width .23s cubic-bezier(.18,.72,.18,1); } /* Tant que Haut/Bas est en cours, aucune expansion ni artwork horizontal ne se calcule. Le poster entier sert de frame stable pendant le glide. */ body.nav-vertical-moving .rail .card--tall.is-focused{ width:306px !important; } body.nav-vertical-moving .rail .card--tall.is-focused .card__art{ background-size:contain !important; background-position:50% 50% !important; background-color:#0b0b0b !important; } /* Les couches de secours ne doivent jamais concurrencer un vrai backdrop. */ .rail .card--tall.is-focused:not(.no-deco) .card__blur, .rail .card--tall.is-focused:not(.no-deco) .card__sharp{ opacity:0 !important; } /* ================================================================ 4.6.0 — Stable artwork pipeline + Top 10 geometry Principe : une carte n'a qu'UNE image visible a la fois. Les anciennes couches poster floute/net avaient fini par survivre une frame de trop sur certains Tizen et se retrouvaient au-dessus du backdrop. Elles sont desactivees dans les rails : poster et backdrop utilisent uniquement le background de .card__art, avec le voile noir pour le handoff. ================================================================ */ /* Une seule couche d'image dans les rails = aucune superposition possible. */ .rail .card__blur, .rail .card__sharp{ display:none !important; opacity:0 !important; background-image:none !important; } /* Poster vertical : toujours entier. Aucun zoom/crop au repos ni pendant une entree verticale. */ .rail .card--tall .card__art{ background-size:contain; background-position:50% 50%; background-color:#0b0b0b; } /* Backdrop selectionne : lui aussi entier. Le 16/9 reste centre et les rares ratios atypiques gagnent de fines bandes plutot qu'un bord coupe. */ .rail .card--tall.is-focused:not(.no-deco) .card__art{ background-size:contain !important; background-position:50% 50% !important; background-color:#080808 !important; } /* Le fallback sans backdrop reste propre : poster entier, fond noir. */ .rail .card--tall.is-focused.no-deco .card__art{ background-size:contain !important; background-position:50% 50% !important; background-color:#0b0b0b !important; } /* Top 10 : retour a une geometrie inline simple, celle qui etait stable dans la 4.2.0. Pas de flex sur le wrapper rank : Tizen 6 changeait parfois l'offsetParent pendant l'expansion. */ .rail--top10 .rank{ display:inline-block !important; vertical-align:top !important; white-space:nowrap; overflow:visible !important; } .rail--top10 .rank__num{ display:inline-block !important; vertical-align:top !important; margin-right:18px !important; } .rail--top10 .card--tall{ display:inline-block !important; vertical-align:top !important; } /* Transition d'art : noir tres court, sans filtre ni couche poster en plus. */ .card__art:after{ -webkit-transition:opacity .10s cubic-bezier(.32,0,.68,1) !important; transition:opacity .10s cubic-bezier(.32,0,.68,1) !important; } .card__art.is-blackout-out:after{ -webkit-transition-duration:.17s !important; transition-duration:.17s !important; -webkit-transition-timing-function:cubic-bezier(.16,.78,.22,1) !important; transition-timing-function:cubic-bezier(.16,.78,.22,1) !important; } /* Haut/Bas : court, acceleration progressive et fin sans cassure. */ .home__scroll{ transition:transform .24s cubic-bezier(.42,.02,.22,1) !important; -webkit-transition:-webkit-transform .24s cubic-bezier(.42,.02,.22,1) !important; } /* La carte reste etroite pendant le glide, puis s'ouvre vite. */ .rail .card--tall{ transition:width .22s cubic-bezier(.18,.72,.18,1) !important; -webkit-transition:width .22s cubic-bezier(.18,.72,.18,1) !important; } body.nav-vertical-moving .rail .card--tall.is-focused{ width:306px !important; } /* Pendant le glide vertical, le voile noir est prioritaire. On ne revele pas un poster intermediaire au-dessus du futur backdrop. */ body.nav-vertical-moving .rail .card--tall.is-focused.vertical-entering .card__art:after, .rail .card--tall.is-focused.vertical-entering .card__art:after{ opacity:1; } /* ================================================================ 4.6.1 — Single-image rails / backdrop-ready expansion ================================================================ */ /* Une seule vraie surface bitmap dans les cartes verticales. */ .card__img{ position:absolute;left:0;top:0;width:100%;height:100%; display:block;object-fit:contain;object-position:50% 50%; background:#0b0b0b;pointer-events:none; -webkit-transform:translateZ(0);transform:translateZ(0); -webkit-backface-visibility:hidden;backface-visibility:hidden; } .rail .card--tall .card__art{background-image:none !important} /* Une carte ne devient paysage QUE quand un vrai backdrop est decode. */ .rail .card--tall.is-focused{width:306px !important} .rail .card--tall.is-focused.deco-ready{width:822px !important} .rail .card--tall.is-focused.deco-ready .card__img{ object-fit:contain;object-position:50% 50%;background:#080808; } .rail .card--tall.is-focused.no-deco .card__img{ object-fit:contain;object-position:50% 50%;background:#0b0b0b; } body.nav-vertical-moving .rail .card--tall.is-focused.deco-ready{ width:306px !important; } /* Top 10 : le rang a une vraie largeur reservee. Aucun margin negatif, aucun flex, aucun chevauchement avec la vignette. */ .rail--top10 .rank{ display:inline-block !important;position:relative;vertical-align:top !important; white-space:nowrap;overflow:visible !important;margin-right:16px; } .rail--top10 .rank__num{ display:inline-block !important;vertical-align:top !important; width:214px !important;margin:0 12px 0 0 !important; text-align:right;box-sizing:border-box; } .rail--top10 .card--tall{ display:inline-block !important;vertical-align:top !important; } /* Mouvement plus court : 60 Hz visuel sans sensation de latence. */ .home__scroll{ transition:transform .205s cubic-bezier(.42,.02,.20,1) !important; -webkit-transition:-webkit-transform .205s cubic-bezier(.42,.02,.20,1) !important; } .rail__track{ transition:transform .18s cubic-bezier(.20,.72,.20,1) !important; -webkit-transition:-webkit-transform .18s cubic-bezier(.20,.72,.20,1) !important; } .rail .card--tall{ transition:width .19s cubic-bezier(.18,.76,.18,1) !important; -webkit-transition:width .19s cubic-bezier(.18,.76,.18,1) !important; } /* ================================================================ 4.7.0 — Correctif navigation Ce bloc est ajoute EN FIN DE FICHIER et n'ecrase que ce qui est liste ci-dessous. Le supprimer restaure exactement la 4.6.1. ================================================================ */ /* --- 1. Fin de la promotion GPU systematique ------------------- Chaque .card__art, son voile :after et son obtenaient leur propre couche compositeur. Avec ~8 rails remplis x ~12 cartes cela faisait plus de 300 textures a maintenir sur une TV qui alloue 128-256 Mo au navigateur. C'est la cause des deux symptomes a la fois : - le thrash de couches -> sensation de 15 fps ; - la desynchronisation raster / boite -> vignette coupee. Le compositeur Tizen ne re-rasterise pas une couche imbriquee pendant que la largeur de son parent est animee : il conserve le dernier raster et le decoupe a la nouvelle taille. D'ou 306/822 = 37 % d'image visible dans un sens, 63 % de noir dans l'autre. Aucune carte n'est plus promue. Les seules couches conservees sont celles qui bougent reellement : .rail__track et .home__scroll. */ .card, .card__art, .card__img, .card__art:after{ will-change:auto !important; -webkit-transform:none !important; transform:none !important; -webkit-backface-visibility:visible !important; backface-visibility:visible !important; } /* --- 2. Plus de fenetre de decoupe sur une boite qui change de largeur. overflow:hidden + couche perimee = tranche d'image. Le rayon des coins passe sur l'image elle-meme. --------------------- */ .rail .card--tall .card__art{overflow:visible} .rail .card--tall .card__img{border-radius:10px} /* --- 3. Expansion instantanee ---------------------------------- Aucune frame intermediaire, donc aucune desynchronisation possible. Seule l'image fait un fondu. */ .rail .card--tall, .rail--match .mcard{ -webkit-transition:none !important; transition:none !important; } .rail .card--tall .card__img{ -webkit-transition:opacity .13s linear; transition:opacity .13s linear; } /* --- 4. Rafale de touches -------------------------------------- Tant que la touche est maintenue, la vignette reste etroite et les deplacements sont instantanes. Une seule expansion en fin de rafale au lieu d'une par appui. */ body.is-fast-nav .rail .card--tall.is-focused, body.is-fast-nav .rail .card--tall.is-focused.deco-ready{ width:306px !important; } body.is-fast-nav .home__scroll, body.is-fast-nav .rail__track{ -webkit-transition:none !important; transition:none !important; } /* ================================================================ 4.7.1 — Rafale : affiche verticale conservee ================================================================ */ /* Le lettrage TMDB fait 340 px de large : dans une vignette de 306 px il debordait, et il masquait le titre texte (visibility:hidden). Pendant une rafale — ou tant que le decor n'est pas pret — la vignette reste une affiche verticale : pas de logo, titre visible. */ .rail .card--tall.is-focused:not(.deco-ready).has-logo .card__logo{ width:0 !important;height:0 !important; } .rail .card--tall.is-focused:not(.deco-ready).has-logo .card__label b{ visibility:visible !important; } /* ================================================================ 4.7.2 — Écran de recherche Deux colonnes : saisie a gauche, resultats en direct a droite. Aucune mesure de page pendant la navigation : la grille de suggestions est reguliere, donc Focus.custom y repond sans getBoundingClientRect — seul le nombre de colonnes est releve sur le rendu, une fois par deplacement. Cet ecran ne pose PAS de fond a lui. Il portait `background:var(--ink)`, un noir opaque, alors que `#app` fournit deja ce meme noir en dessous. Le seul effet de cette ligne etait donc de masquer les halos rouges de `.ambience`, qui se trouvent entre les deux : la recherche etait le seul ecran de l'application a s'ouvrir sur du noir plat. Comme tous les autres ecrans, elle est maintenant transparente et laisse passer l'ambiance. ================================================================ */ .srch{ position:absolute;left:0;top:0;width:1920px;height:1080px; padding:118px var(--safe) 60px; } /* --- Colonne de gauche ---------------------------------------- Retrecie de 620 a 452 px. Elle prenait un tiers de l'ecran pour un champ de saisie et deux phrases, pendant que les resultats — la seule chose qu'on regarde vraiment — se serraient dans ce qui restait et se faisaient rogner sur leur bord gauche. Les largeurs de cette colonne sont toutes identiques et volontaires : champ, bouton, phrase d'aide et recherches recentes forment un bloc d'un seul tenant. Si l'une change, les autres suivent. */ .srch__side{ position:absolute;left:var(--safe);top:132px;width:452px; } .srch__eyebrow{ font-size:20px;letter-spacing:.2em;color:var(--grey);text-transform:uppercase; } .srch__title{ font-size:44px;font-weight:700;color:var(--white); margin-top:10px;letter-spacing:-1px;line-height:1.08; } .srch__field{ position:relative;margin-top:34px;width:452px; } .srch__ico{ position:absolute;left:26px;top:50%;margin-top:-15px; color:var(--grey-dim);pointer-events:none; } .srch__field .searchbox{ width:452px;height:88px;margin:0;padding:0 22px 0 70px; background:var(--panel);border:3px solid #2E2E2E;border-radius:12px; color:var(--white);font-size:31px;font-weight:400;line-height:1;outline:0; } .srch__field .searchbox::-webkit-input-placeholder{color:var(--grey-dim)} .srch__field .searchbox.is-focused{ border-color:var(--white);background:var(--panel-hi); } .srch__field .searchbox.is-focused + .srch__ico, .srch__field .searchbox.is-focused ~ .srch__ico{color:var(--white)} .srch__hint{ margin-top:30px;width:452px; font-size:21px;line-height:1.45;color:var(--grey-dim); } .srch__recent{margin-top:30px;width:452px} .srch__recent:empty{display:none} .srch__recent h4{ font-size:18px;letter-spacing:.18em;text-transform:uppercase; color:var(--grey-dim);font-weight:500;margin-bottom:14px; } .rchip{ display:inline-block;vertical-align:top; max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; margin:0 12px 12px 0;padding:13px 22px; background:var(--panel);border:2px solid transparent;border-radius:99px; color:var(--text);font-size:21px;font-weight:400;line-height:1; } .rchip.is-focused{background:var(--white);color:#000;border-color:var(--white)} /* --- Colonne de droite ---------------------------------------- */ .srch__main{ position:absolute;left:552px;top:132px;width:1316px;height:900px; } /* La ligne « Suggestions · 30 sur 120 » a ete retiree : elle enoncait un chiffre que la grille montre deja, et poussait les affiches de quarante pixels vers le bas pour rien. Il ne reste que le temoin de recherche, pose en absolu pour ne plus rien decaler. */ .srch__bar{ position:absolute;right:6px;top:-2px;height:26px;white-space:nowrap;z-index:2; } .srch__spin{ display:none;vertical-align:middle; } .srch__spin.is-on{display:inline-block} .srch__spin i{ display:inline-block;width:9px;height:9px;border-radius:50%; background:var(--red);margin:0 3px; -webkit-animation:pulse 1s infinite var(--ease);animation:pulse 1s infinite var(--ease); } .srch__spin i:nth-child(2){-webkit-animation-delay:.15s;animation-delay:.15s} .srch__spin i:nth-child(3){-webkit-animation-delay:.3s;animation-delay:.3s} /* Grille de QUATRE colonnes. Des inline-block de largeur fixe plutot que du flex : la geometrie reste calculable. 4 x 308 + 3 x 28 = 1316, la largeur exacte de la colonne. Le dernier de chaque rangee ne porte pas de gouttiere, sinon la rangee deborde de 28 px et la quatrieme carte tombe a la ligne. Cinq colonnes tenaient dans la largeur, mais a 240 px l'affiche est trop petite pour ce qu'elle doit montrer : un visage, un titre grave dans l'image. Quatre cartes de 308 px laissent respirer chaque affiche — c'est la difference entre une liste et une vitrine. ATTENTION : le nombre de colonnes n'est PAS ecrit en dur dans le JavaScript. `searchNav` le mesure sur le rendu reel — les cartes qui partagent la meme ordonnee. C'est precisement la divergence entre ces deux endroits qui faisait sauter le curseur, et c'est aussi ce qui permet de changer ce chiffre ici sans toucher a la navigation. */ /* Le halo de focus deborde de 4 px hors de l'affiche. `overflow:hidden` le tranchait donc sur la premiere rangee, sur la colonne de gauche et sur celle de droite — le contour n'etait complet qu'au milieu. Six pixels de marge interieure suffisent : le rognage d'un bloc se fait sur sa boite de REMPLISSAGE, pas sur son contenu, donc cette marge fait partie de la zone visible. La marge negative annule le decalage pour que la grille reste alignee sur le titre. */ .srch__live{ position:relative;margin:14px 0 0 -6px; width:1328px;height:900px;padding:6px; white-space:normal; } .scard{ display:inline-block;vertical-align:top; width:308px;margin:0 28px 30px 0; background:none;border:0;padding:0;text-align:left; } .scard:nth-child(4n){margin-right:0} /* 308 x 462 : le rapport 2/3 exact d'une affiche. La boite etait en 240 x 360, deja en 2/3 — mais les visuels que rend le fournisseur ne sont pas tous des affiches, et `cover` rognait alors sans menagement. Le rapport juste ne supprime pas le recadrage des images hors format ; il garantit seulement qu'une vraie affiche, elle, n'est jamais coupee. */ .scard__art{ position:relative;display:block;width:308px;height:462px; border-radius:10px;background:#101010;overflow:hidden; } .scard__art img{ position:absolute;left:0;top:0;width:100%;height:100%; display:block;object-fit:cover;object-position:50% 50%;background:#101010; } /* Repli quand aucune image : l'initiale du titre, pas un trou noir. */ .scard__ph{ position:absolute;left:0;top:0;right:0;bottom:0; font-size:64px;font-weight:700;color:#2C2C2C; text-align:center;line-height:462px; } .scard__kind{ position:absolute;left:14px;top:14px; padding:7px 13px;border-radius:5px; background:rgba(0,0,0,.72);color:var(--white); font-size:15px;font-weight:500;letter-spacing:.09em;text-transform:uppercase; } .scard__kind--live{background:var(--red)} .scard__label{ display:block;width:308px;height:58px;padding-top:11px;overflow:hidden; } .scard__label b{ display:block;font-size:24px;font-weight:400;color:var(--text); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .scard__label span{ display:block;margin-top:4px;font-size:18px;color:var(--grey-dim); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .scard.is-focused .scard__art{box-shadow:0 0 0 4px var(--white)} .scard.is-focused .scard__label b{color:var(--white)} /* --- Etat vide ------------------------------------------------- */ .srch__empty{ position:absolute;left:0;top:210px;width:1328px;text-align:center; } .srch__empty.is-off{display:none} .srch__mark{ width:78px;height:78px;object-fit:contain;opacity:.22;margin-bottom:26px; } .srch__empty p{font-size:25px;color:var(--grey-dim);line-height:1.5} /* --- Grille complete (bouton Chercher) ------------------------- */ #search-grid[hidden]{display:none} #screen-search .grid{top:150px;height:880px} /* La grille de resultats defile pour son propre compte quand le bouton Chercher a developpe les soixante resultats. Meme mecanique que la grille de categorie : un inner translate, un parent qui rogne. */ .srch__live{overflow:hidden} .srch__inner{ position:relative; -webkit-transition:-webkit-transform .22s linear; transition:transform .22s linear; } /* ================================================================ 4.7.3 — Cadrage du bandeau vedette Le bandeau fait 1816 x 600, soit un ratio de 3,03:1. Une image TMDB est en 16/9 (1,78:1). En background-size:cover, le moteur mettait donc l'image a l'echelle sur la LARGEUR : hauteur reelle 1021 px pour une boite de 600, soit 42 % de l'image perdus en haut et en bas. C'est ce zoom force qui coupait les tetes et decadrait tout. L'image est desormais mise a l'echelle sur la HAUTEUR : aucun rognage vertical, l'affiche est vue telle qu'elle a ete cadree. Elle occupe alors les 1067 px de droite, et le voile noir se charge de sa limite gauche — ce qui donne aussi un fond franc au texte. ================================================================ */ .billboard{background:#0B0B0B} .billboard__art{ background-size:auto 100%; /* hauteur pleine, zero rognage vertical */ background-position:right center; /* le sujet reste dans la moitie droite */ background-repeat:no-repeat; background-color:#0B0B0B; } /* Le degrade est opaque jusqu'a 45 %, soit au-dela du bord gauche de l'image (41,3 %) : la coupure est donc invisible, et le titre comme le synopsis se posent sur du noir plein plutot que sur un fond d'image clair. Il s'efface ensuite en trois paliers pour ne pas laisser de bande grise en travers du visuel. */ .billboard__scrim{ background: linear-gradient(90deg, #0B0B0B 0%, #0B0B0B 45%, rgba(11,11,11,.70) 58%, rgba(11,11,11,.22) 73%, rgba(11,11,11,0) 88%), linear-gradient(0deg, rgba(11,11,11,.85) 0%, rgba(11,11,11,.15) 34%, rgba(11,11,11,0) 52%); } /* Le bloc de texte tient entierement dans la zone opaque. */ .billboard__body{width:740px} /* 110 px pour des lignes de 32,7 px : la quatrieme etait tranchee en deux dans le sens de la hauteur. Trois lignes nettes valent mieux qu'une demi-quatrieme. */ .billboard__plot{max-height:98px} /* Bande-annonce integree — chargee uniquement sur action utilisateur. */ .trailer{ display:none !important; position:fixed !important; left:0 !important; top:0 !important; width:1920px !important; height:1080px !important; min-width:1920px !important; min-height:1080px !important; margin:0 !important; padding:0 !important; overflow:hidden !important; z-index:2147483000 !important; background:#000 !important; } .trailer.is-on{display:block !important} .trailer__frame{ position:absolute !important; left:0 !important; top:0 !important; width:1920px !important; height:1080px !important; margin:0 !important; padding:0 !important; overflow:hidden !important; background:#000 !important; } .trailer__frame iframe, #trailer-frame{ display:block !important; position:absolute !important; left:0 !important; top:0 !important; width:1920px !important; height:1080px !important; min-width:1920px !important; min-height:1080px !important; max-width:1920px !important; max-height:1080px !important; margin:0 !important; padding:0 !important; border:0 !important; background:#000 !important; } /* v4.10.1 — feedback de chargement trailer */ .trailer__loader > * + * { margin-top:26px } .trailer__loader{ position:absolute !important; left:0 !important; top:0 !important; width:1920px !important; height:1080px !important; z-index:5 !important; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#000; color:#fff; pointer-events:none; } .trailer__loader.is-hidden{ display:none !important; } .trailer__spinner{ width:70px; height:70px; border-radius:50%; border:7px solid rgba(255,255,255,.18); border-top-color:#fff; animation:wtvTrailerSpin .85s linear infinite; } .trailer__loadingText{ font-size:28px; font-weight:600; letter-spacing:.2px; } @keyframes wtvTrailerSpin{ from{transform:rotate(0deg)} to{transform:rotate(360deg)} } #trailer-warmup{ position:fixed !important; left:-10px !important; top:-10px !important; width:1px !important; height:1px !important; opacity:.001 !important; pointer-events:none !important; border:0 !important; z-index:-1 !important; } /* v4.10.6 — dernier filet de sécurité si aucune affiche n'existe nulle part. */ .fallback--poster{ position:absolute; left:0;top:0;right:0;bottom:0; display:flex; align-items:center; justify-content:center; padding:26px; text-align:center; font-size:25px; line-height:1.18; font-weight:700; color:#f2f2f2; background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.01)), #111; overflow:hidden; } /* ================================================================ 4.11.7 — attente de l'ecran Sport La fusion des chaines dure plusieurs secondes sur un gros bouquet. Un texte fixe pendant ce temps se lit comme un plantage ; une progression se lit comme un travail en cours. La jauge n'anime que sa largeur — aucune propriete qui declenche un repaint. ================================================================ */ .sportload{ padding:64px 0 0 60px; max-width:520px; } .sportload__txt{ margin:0 0 18px; font-size:26px; color:rgba(255,255,255,.72); } .sportload__bar{ height:6px; border-radius:3px; background:rgba(255,255,255,.12); overflow:hidden; } .sportload__bar i{ display:block; height:100%; width:0; background:var(--red); -webkit-transition:width .18s linear; transition:width .18s linear; } /* ================================================================ 4.11.7 — vignettes de match : retour au format affiche Trois choses partaient de la meme idee — occuper l'espace laisse libre entre deux vignettes — et se retournaient contre elle : - le chiffre geant (`.mrank`) debordait de 18 pixels sur la vignette voisine par construction (`margin-right:-18px`). A l'ecran, l'heure d'un match se lit par-dessus l'affiche du suivant, et l'oeil ne sait plus a laquelle elle appartient. L'heure est deja dans la bande du bas : elle y reste, seule. - la barre d'accent (`.mtile__bar`) posait un liseré de couleur en haut de chaque tuile. Six vignettes cote a cote donnaient six couleurs differentes sur une seule ligne : c'est du bruit, pas de l'information — le nom et l'embleme de la competition sont deja juste en dessous. - l'elargissement au focus (498 -> 1072 px) recouvrait deux vignettes voisines. Sur une rangee de matchs, contrairement a un rail de films, les cartes sont toutes de meme importance : rien ne justifie qu'une seule prenne la place de trois. La selection se marque maintenant comme sur les autres rails : un contour rouge. Aucune geometrie ne bouge, donc aucun reflow de la piste pendant la navigation. ================================================================ */ /* --- plus de chiffre geant, plus de debordement --- */ .mrank{display:none !important} .mcard{width:306px !important} .mbody{width:306px !important} /* --- plus de liseré de competition --- */ .mtile__bar{display:none !important} .mtile__comp{top:24px !important} /* --- le focus ne change plus la geometrie --- */ .mcard.is-focused{width:306px !important} .mcard.is-focused .mbody{width:306px !important} .mcard.is-focused .mtile__comp{left:0 !important;right:0 !important;top:24px !important;text-align:center !important} .mcard.is-focused .mtile__emb{width:38px !important;height:38px !important;margin-right:9px !important} .mcard.is-focused .mcomp--court{display:inline-block !important} .mcard.is-focused .mtile__comp span.mcomp--long{display:none !important} .mcard.is-focused .mtile__duel{left:0 !important;right:0 !important;top:140px !important;text-align:center !important} .mcard.is-focused .mteam{width:124px !important} .mcard.is-focused .mcrest{width:104px !important;height:104px !important;line-height:104px !important;font-size:28px !important} .mcard.is-focused .mteam b{margin-top:12px !important;height:52px !important;font-size:21px !important} .mcard.is-focused .mvs{ width:46px !important;padding-top:42px !important;font-size:19px !important; letter-spacing:normal !important;text-transform:none !important; } .mcard.is-focused .mvs__tiret{display:inline !important} .mcard.is-focused .mvs__mot{display:none !important} .mcard.is-focused .mscore{font-size:22px !important} .mcard.is-focused .mtile__foot{ left:0 !important;right:0 !important;bottom:0 !important;height:72px !important; background:#191919 !important;text-align:center !important; } .mcard.is-en-direct.is-focused .mtile__foot{background:#4A0A0D !important} .mcard.is-focused .mfoot__hour{display:none !important} .mcard.is-focused .mfoot__chan{ padding:0 14px !important;margin-left:0 !important; font-size:26px !important;font-weight:700 !important;line-height:72px !important; color:var(--white) !important;vertical-align:top !important; } .mcard.is-en-direct.is-focused .mfoot__chan{color:var(--white) !important} .mcard.is-focused .mfoot__chan.is-live:before{display:inline-block !important} /* --- le contour rouge, seule marque de selection --- */ .mcard .mtile{ border-radius:6px; -webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent; -webkit-transition:box-shadow .14s var(--ease);transition:box-shadow .14s var(--ease); } .mcard.is-focused .mtile{ -webkit-box-shadow:0 0 0 5px var(--red);box-shadow:0 0 0 5px var(--red); } /* ================================================================ 4.11.8 — l'affiche de match La tuile reprend la grammaire d'une affiche : lavis de competition en haut, ecussons au centre, noms, puis heure et chaine en bas. Rien n'est telecharge en plus — ecussons et embleme etaient deja la, seule la mise en page change. Une vignette ne peut donc jamais etre noire : elle est composee, pas rapportee. Toutes les mesures sont fixes (306 x 462). Aucune ne depend du contenu, donc la piste ne se remesure jamais pendant la navigation. ================================================================ */ .rail--match .card__label{display:none} .mcard .mtile{ position:relative; width:306px;height:462px; background-color:#0A0A0C; background-repeat:no-repeat; border-radius:8px; overflow:hidden; } /* Le voile. Un seul degrade continu : deux aplats superposes laissent une arete horizontale nette, tres visible sur un fond teinte. */ .mcard .mtile:before{ content:"";position:absolute;left:0;right:0;top:0;bottom:0; background:-webkit-linear-gradient(top, rgba(10,10,12,.30) 0%, rgba(10,10,12,.10) 26%, rgba(10,10,12,.55) 52%, rgba(10,10,12,.88) 74%, rgba(10,10,12,.97) 100%); background:linear-gradient(to bottom, rgba(10,10,12,.30) 0%, rgba(10,10,12,.10) 26%, rgba(10,10,12,.55) 52%, rgba(10,10,12,.88) 74%, rgba(10,10,12,.97) 100%); pointer-events:none; } /* Le voile est un pseudo-element, donc le PREMIER enfant de la tuile : en ordre de peinture il passe sous tout ce qui suit. Aucune regle de z-index n'est necessaire. 4.11.9 — il y avait ici `.mcard .mtile > *{position:relative}`, pour remonter le contenu au-dessus du voile. Mais `.mtile__comp`, `.mtile__duel` et `.mtile__foot` sont justement des enfants directs : la regle ecrasait leur `position:absolute` et les remettait dans le flux. La bande chaine se retrouvait au milieu de la vignette et les ecussons en dessous d'elle. */ /* --- competition --- */ .mtile__comp{top:34px !important} .mtile__emb{width:30px;height:30px;margin-right:8px} .mtile__comp span{ max-width:210px;font-size:14px;letter-spacing:.14em; color:rgba(255,255,255,.62); } /* --- les deux camps --- */ .mtile__duel{top:130px !important} .mteam{width:118px} .mcrest{width:92px;height:92px;line-height:92px;font-size:24px} .mteam b{ margin-top:16px;height:50px;font-size:20px;line-height:1.18; font-weight:600;color:#fff; } .mvs{width:52px;padding-top:34px;font-size:17px;color:rgba(255,255,255,.42)} .mscore{font-size:22px} /* --- l'heure, en rouge, au-dessus de la bande --- Elle etait masquee au repos et ne revenait qu'au focus, parce que le chiffre geant s'en chargeait. Le chiffre geant est parti : l'heure reprend sa place, visible en permanence. */ .mcard .mfoot__hour{ display:block !important; position:absolute;left:0;right:0;bottom:106px; font-style:normal;text-align:center; font-size:36px;font-weight:600;line-height:1;letter-spacing:.02em; color:rgba(255,255,255,.94); } /* --- la bande chaine --- */ .mcard .mtile__foot{ height:64px !important; background:rgba(20,20,24,.96) !important; border-top:1px solid rgba(255,255,255,.07); } .mcard .mfoot__chan{ font-size:21px;font-weight:600;line-height:64px; color:#fff;letter-spacing:.01em; } /* --- en direct : le lavis passe au rouge, rien d'autre ne bouge --- */ .mcard.is-en-direct .mtile{ background-image:-webkit-linear-gradient(340deg, rgba(229,9,20,.34) 0%, rgba(229,9,20,.11) 34%, rgba(9,9,11,0) 62%) !important; background-image:linear-gradient(160deg, rgba(229,9,20,.34) 0%, rgba(229,9,20,.11) 34%, rgba(9,9,11,0) 62%) !important; } .mcard.is-en-direct .mtile__foot{background:rgba(58,10,13,.96) !important} .mcard.is-en-direct .mtile__comp span{color:#EFB4B6} .mcard.is-en-direct .mfoot__hour{font-size:26px;font-weight:700;color:var(--red)} /* --- selection --- */ .mcard.is-focused .mtile{ -webkit-box-shadow:0 0 0 5px var(--red);box-shadow:0 0 0 5px var(--red); } .mcard.is-focused .mfoot__hour{display:block !important} /* 4.11.19 — le profil actif remplace le W dans la barre principale. */ .homeprofile{ position:absolute;left:var(--safe);top:22px;width:78px;height:78px; padding:0;border:0;border-radius:14px;background:transparent;color:#fff; box-shadow:0 0 0 4px transparent;overflow:visible; -webkit-transition:-webkit-transform .16s var(--ease),box-shadow .16s var(--ease); transition:transform .16s var(--ease),box-shadow .16s var(--ease); } .homeprofile__face{ display:block;width:78px;height:78px;border-radius:14px; background:#E50914 center/cover no-repeat; color:rgba(0,0,0,.42);font-size:34px;font-weight:700;line-height:78px;text-align:center; } .homeprofile.is-focused{ box-shadow:0 0 0 5px #fff;-webkit-transform:scale(1.10);transform:scale(1.10); } /* Galerie dynamique : choix simple Films / Séries / Anime / WTV. */ .avatar-tabs{ position:absolute;left:var(--safe);top:268px;height:66px;white-space:nowrap;z-index:4; } .avatar-tab{ display:inline-block;height:56px;margin:0 12px 0 0;padding:0 24px; border:2px solid rgba(255,255,255,.18);border-radius:999px; background:rgba(255,255,255,.06);color:rgba(255,255,255,.68); font-size:22px;font-weight:500; } .avatar-tab.is-active{background:#fff;color:#090909;border-color:#fff} .avatar-tab.is-focused{box-shadow:0 0 0 3px #fff} .avatars{top:352px;height:688px} .avatar{width:190px;height:190px} /* ========================================================= 4.11.21 — Profil : mise en page robuste Tizen (sans flex-gap) ========================================================= */ #screen-profile-edit{background:#090909;} .profileedit__eyebrow{ left:170px;top:160px;width:1400px; font-size:50px;line-height:1.1;font-weight:700; } .profileedit__body{ position:absolute;left:170px;top:330px;width:1500px;height:500px; display:block; } .profileedit__preview{ position:absolute;left:0;top:0; width:300px;height:300px;line-height:300px; border-radius:18px;font-size:112px; } .profileedit__form{ position:absolute;left:410px;top:0; width:830px;padding:0;margin:0; } .profileedit__label{ margin:0 0 16px 0;font-size:25px;line-height:32px; } .profileedit__input{ width:830px;height:86px;margin:0 0 34px 0; } .profileedit__btn{ width:470px;height:76px;margin:0 0 20px 0; } .profileedit__btn--primary{margin-top:30px;} /* Galerie de profils inspirée de l'écran Netflix : titre à gauche, profil courant à droite, puis rayons horizontaux clairement séparés. */ #screen-avatars{background:#0a0a0a;overflow:hidden;} .avatarhead{ position:absolute;left:145px;right:145px;top:92px;height:118px; border-bottom:1px solid rgba(255,255,255,.12); } .avatarhead__copy{position:absolute;left:0;top:0;} .avatarhead__title{ margin:0;color:#fff;font-size:46px;line-height:1.08;font-weight:700; } .avatarhead__subtitle{ margin:14px 0 0;color:rgba(255,255,255,.62);font-size:24px;line-height:1.2; } .avatarhead__current{ position:absolute;right:0;top:0;height:86px;white-space:nowrap; } .avatarhead__name{ display:inline-block;vertical-align:middle;margin-right:24px; color:#fff;font-size:28px;line-height:86px;font-weight:600; } .avatarhead__face{ display:inline-block;vertical-align:middle;width:86px;height:86px; border-radius:13px;background:#E50914 center 22%/cover no-repeat; color:rgba(0,0,0,.42);font-size:34px;font-weight:700;line-height:86px;text-align:center; } .avatarhead__status{ position:absolute;left:145px;top:218px;margin:0; color:rgba(255,255,255,.5);font-size:20px; } .avatars.avatars--rows{ position:absolute;left:0;top:245px;width:1920px;height:805px; padding:0;overflow:hidden; } .avatars__inner--rows{ position:relative;width:100%;padding:0 0 40px 0; transition:transform .22s linear; } .avatarrow{ position:relative;width:100%;height:190px;margin:0; } .avatarrow__label{ position:absolute;left:145px;top:58px;width:180px; color:rgba(255,255,255,.78);font-size:27px;line-height:34px;font-weight:600; } .avatarrow__track{ position:absolute;left:340px;top:18px;height:160px;white-space:nowrap; } .avatarrow .avatar{ display:inline-block;vertical-align:top; width:154px;height:154px;margin:0 20px 0 0;padding:0; border:0;border-radius:13px;background-size:cover;background-position:center 22%; box-shadow:0 0 0 4px transparent; transition:box-shadow .14s var(--ease),transform .14s var(--ease); } .avatarrow .avatar.is-focused{ box-shadow:0 0 0 6px #fff; -webkit-transform:scale(1.07);transform:scale(1.07); } .avatarrow .avatar.is-current{box-shadow:0 0 0 4px var(--red);} .avatarrow .avatar.is-current.is-focused{box-shadow:0 0 0 6px #fff;} /* ========================================================= 4.11.23 — Écran profils : présence visuelle type Netflix ========================================================= */ .profiles__eyebrow{ left:300px;top:150px; font-size:42px;font-weight:600; } .profiles__row{ left:300px;top:235px;width:820px;height:820px; } .profile-slot{width:780px;height:162px;margin:0 0 12px 0;} .profile{width:760px;height:162px;} .profile__face{ left:0;top:10px;width:138px;height:138px;border-radius:12px; line-height:138px;font-size:56px;border-width:4px; -webkit-transform-origin:left center;transform-origin:left center; } .profile__name{ left:214px;top:54px;font-size:35px;font-weight:500; } .profile.is-focused .profile__face{ -webkit-transform:scale(1.47);transform:scale(1.47); box-shadow:0 0 0 1px rgba(0,0,0,.7),0 18px 48px rgba(0,0,0,.48); } .profile.is-focused .profile__name{ font-size:45px;font-weight:650; -webkit-transform:translateX(28px);transform:translateX(28px); } .profile-edit{ left:-76px;top:58px;width:42px;height:42px; } .profile-edit svg{width:30px;height:30px;margin:6px;} .profile--add .profile__face{font-size:62px;} .profiles__shade{ background: linear-gradient(90deg,#050505 0%,#050505 25%,rgba(5,5,5,.98) 33%,rgba(5,5,5,.88) 42%,rgba(5,5,5,.46) 55%,rgba(5,5,5,.12) 70%,rgba(5,5,5,.08) 100%), linear-gradient(0deg,rgba(5,5,5,.42) 0%,rgba(5,5,5,0) 34%,rgba(5,5,5,.08) 100%); } /* Galerie : icônes un peu plus grandes, lignes plus aérées. */ .avatars.avatars--rows{top:238px;height:820px;} .avatarrow{height:196px;} .avatarrow__label{left:145px;top:64px;width:185px;font-size:28px;} .avatarrow__track{left:350px;top:15px;height:172px;} .avatarrow .avatar{width:166px;height:166px;margin-right:22px;border-radius:14px;} .avatarrow .avatar.is-focused{-webkit-transform:scale(1.09);transform:scale(1.09);} \n\n/* 4.11.26 — suppression de profil */ .profileedit__btn--danger{ margin-top:34px; color:#ff5a5f; border-color:rgba(255,90,95,.38); background:rgba(229,9,20,.08); } .profileedit__btn--danger.is-focused{ color:#fff; border-color:#e50914; background:#e50914; box-shadow:0 0 0 2px rgba(229,9,20,.28); }