/** * ITS Rugby Live — Multiplex (/multiplex/). * * Structure empruntée aux plateformes vidéo (une ligne titre + recherche, des * catégories défilantes, une grille de vignettes), mais dans les couleurs du * site : fond vanilla, cartes blanches (Félix, 25/09 — le fond sombre a été * essayé puis écarté). Seul le cadre du lecteur reste noir, comme toute vidéo. * * Mobile d'abord (56 % de l'audience) : une colonne, le lecteur en haut, la * grille dessous. À partir de 900px le lecteur passe en deux colonnes avec son * panneau d'infos, et la grille en trois puis quatre vignettes par ligne. * * Tokens du site (itsrugby-common.css) uniquement, pas de coins arrondis (reset * global), pas de !important : on joue la spécificité. * * ⚠️ Cette feuille est soustraite au RUCSS (rocket_rucss_external_exclusions * dans its-rugby-live.php) : les vignettes étant injectées côté client, leurs * règles seraient élaguées du used-css sinon. */ /* Hauteur réservée (29/09, PageSpeed) : le contenu du multiplex est construit par le JS. Sans elle, le 1er affichage montrait la page presque vide avec le pied de page à ~280 px, puis le pied de page était éjecté quand le JS remplissait la zone : CLS 0,667 (score mobile 65). Un écran de haut suffit à mettre le pied de page hors champ dès le départ. */ .mplx { min-height: 100vh; } .mplx { /* ⚠️ Le clair du site est le VANILLA (#F2E5D2), jamais du blanc pur : le thème n'utilise pas `--white` du tout, c'était un import à moi (Félix, 26/09). Vaut aussi pour les voiles translucides posés sur les images. */ --mplx-gouttiere: max(clamp(16px, 3.4vw, 60px), calc(50vw - 760px)); /* ⚠️ Le voile des visuels n'est PAS --teal-dk. Étalé sur une photo entière, ce vert-là teinte tout le cliché en kaki (Félix, 26/09 : « un peu moins vert »). Il faut un noir qui garde juste assez de notre vert pour ne pas jurer avec la bande sombre autour. Composantes seules : elles servent dans des rgba() à opacités variables. */ --mplx-voile: 13, 19, 12; margin: 0 0 40px; } /* ⚠️ `display` posé par une classe l'emporte sur le [hidden] de la feuille du navigateur : sans cette règle, le bandeau de chargement restait affiché sous l'état vide. Spécificité (0-2-0), pas de !important. */ .mplx [hidden] { display: none; } /* ── Le bandeau du haut ──────────────────────────────────────── Barre pleine largeur sur le modèle des plateformes vidéo : le titre à gauche, la recherche au centre, l'état du direct à droite. Elle ouvre la page (il n'y a pas de haut de page ici) et porte le H1. Débordement pleine largeur depuis le conteneur : html et body sont en overflow-x:clip côté thème, le 100vw ne peut donc pas créer de scroll horizontal. Le -16px du haut annule le padding du conteneur de page. */ /* ── Une seule barre en haut ─────────────────────────────────── Le menu du site fait deux rangées : empilé sous le bandeau du multiplex, ça donnait deux barres de navigation l'une sur l'autre (Félix, 25/09). Sur cette page, le bandeau REMPLACE le menu : il porte le retour vers l'actu, la recherche, l'état du direct et les raccourcis. La barre d'onglets du bas (mobile et application) n'est pas touchée, la navigation reste complète. */ body.page-template-page-multiplex .site-header { display: none; } /* ⚠️ Le conteneur de page pose un padding en haut (24px ici, 16 ailleurs selon les règles du thème) : une marge négative en dur laissait une bande claire au-dessus du bandeau. On annule le padding pour cette page, c'est déterministe, plutôt que de deviner sa valeur. */ body.page-template-page-multiplex .container--page-body { padding-top: 0; } .mplx-bar { margin: 0 calc(50% - 50vw) 22px; padding: 0; background: var(--teal); } /* Mobile : le titre et les actions sur une ligne, la recherche sur la suivante. ⚠️ Un simple empilement laissait la pastille de compte flotter au milieu du bandeau, sous la recherche (Félix, 25/09). */ .mplx-bar-in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "brand nav right"; gap: 10px 18px; align-items: center; /* ⚠️ max-width et margin DÉCLARÉS exprès (30/09) : le CSS élagué de Rocket garde l'ancienne barre (`max-width:1280px; margin:0 auto`). Sans les annuler ici, la barre se resserrait au centre sur grand écran, décalée du hero et des rangées. */ max-width: none; margin: 0; padding: 12px var(--mplx-gouttiere); } .mplx-brand { grid-area: brand; } .mplx-nav { grid-area: nav; } .mplx-bar-right { grid-area: right; } /* ⚠️ Le scope .its-v2 impose `color:inherit` à tout h1/h2 porteur d'une classe (itsrugby-common.css). Pour les h1 la règle enchaîne QUATRE :not(), ce qui la met à (0,6,1) — un premier essai à (0,5,1) laissait le titre en vert sur le vert du bandeau, donc invisible. Il faut passer devant par la seule spécificité, sans !important (règle de la maison) : six classes + l'élément = (0,7,1). */ .mplx .mplx-bar h1.mplx-h1.mplx-h1.mplx-h1.mplx-h1.mplx-h1 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.3px; color: var(--vanilla); } /* Hors écran, à toutes les largeurs : « Multiplex » est le premier lien de la navigation, le titre ne sert plus qu'aux lecteurs d'écran (Félix, 26/09). */ .mplx .mplx-bar h1.mplx-h1.mplx-h1.mplx-h1.mplx-h1.mplx-h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ⚠️ NE PAS décaler le bandeau pour la barre d'administration : WordPress pose déjà `html { margin-top: 46px }` pour elle. Un second décalage ici ajoutait une bande vanilla de 46px au-dessus du bandeau (Félix, 25/09). */ /* Retour au site par le logo : un libellé n'apprend à personne où il mène. */ .mplx-brand { display: flex; align-items: center; gap: 12px; min-width: 0; } .mplx-logo { display: inline-flex; align-items: center; flex: 0 0 auto; } .mplx-logo img { display: block; width: 34px; height: 34px; object-fit: contain; } .mplx-logo-txt { font-size: 13px; font-weight: 800; color: var(--vanilla); } /* Bouton de bascule de la colonne (dans le bandeau). */ /* ── Navigation de la barre (OTT, 26/09) ─────────────────────── Accueil · Parcourir · En direct. Un soulignement vanilla marque la vue ouverte ; « En direct » n'apparaît que s'il y a un direct, avec la pastille rouge et le nombre. Pas de ☰ : la barre porte tout. */ .mplx-nav { display: flex; align-items: center; gap: 4px; min-width: 0; } .mplx-nav-lien { position: relative; display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; padding: 8px 10px; font-size: 13px; font-weight: 800; letter-spacing: .2px; white-space: nowrap; } .mplx-nav-txt { color: rgba(242, 229, 210, .72); } .mplx-nav-lien:hover .mplx-nav-txt, .mplx-nav-lien.is-on .mplx-nav-txt { color: var(--vanilla); } .mplx-nav-lien.is-on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 2px; background: var(--vanilla); } .mplx-nav-lien--direct .mplx-badge-dot { background: var(--red); } .mplx-nav-lien--direct .mplx-nav-txt { color: var(--vanilla); } .mplx-nav-n { padding: 1px 6px; background: var(--red); color: var(--vanilla); font-size: 11px; font-weight: 800; line-height: 1.4; } .mplx-corps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin-inline: calc(50% - 50vw); padding-inline: var(--mplx-gouttiere); } /* ── Le panneau des filtres ──────────────────────────────────── Un volet à droite (bureau) ou plein écran (téléphone), ouvert par le bouton « Filtres » de la barre. Filtres combinables, un groupe par dimension. */ .mplx-menu-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; background: rgba(242, 229, 210, .12); border: 0; color: var(--vanilla); cursor: pointer; } .mplx-menu-btn .mplx-menu-btn-n { position: absolute; top: -6px; right: -6px; } .mplx-menu-btn:hover, .mplx-menu-btn.is-actif { background: rgba(242, 229, 210, .22); } .mplx-menu-btn-n { padding: 1px 6px; background: var(--sage); color: var(--teal-dk); font-size: 11px; font-weight: 800; line-height: 1.4; } .mplx-side { display: none; } .mplx.is-side-on .mplx-side { display: flex; flex-direction: column; position: fixed; top: var(--mplx-top-offset, 0px); left: 0; bottom: 0; z-index: 9999; /* À GAUCHE, sous le ☰ qui l'ouvre (Félix, 26/09) ; plein écran sur téléphone et dans l'app (voir plus bas). */ width: min(380px, 100vw); padding: 0 0 24px; background: var(--vanilla); box-shadow: 8px 0 30px rgba(var(--mplx-voile), .35); overflow-y: auto; } @media (max-width: 899px) { .mplx.is-side-on .mplx-side { width: 100vw; right: 0; box-shadow: none; } } .mplx-side-tete { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 2px solid var(--border); } .mplx-side-h { flex: 1 1 auto; font-size: 13px; font-weight: 800; letter-spacing:0; text-transform:none; color: var(--teal); } .mplx-side-reset { padding: 6px 10px; background: none; border: 1px solid var(--border); color: var(--muted); font-family: var(--sans); font-size: 11px; font-weight: 800; cursor: pointer; } .mplx-side-reset:hover { border-color: var(--teal); color: var(--teal); } .mplx-side-close { width: 34px; height: 34px; padding: 0; background: none; border: 0; color: var(--teal); font-size: 16px; font-weight: 800; cursor: pointer; } .mplx-side-groupe { display: flex; flex-direction: column; padding-bottom: 6px; border-bottom: 1px solid var(--border); } .mplx-side-titre { padding: 14px 16px 6px; font-size: 10px; font-weight: 800; letter-spacing:0; text-transform:none; color: var(--muted); } .mplx-side-cats { display: flex; flex-direction: column; } .mplx-side-link { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 16px; background: none; border: 0; color: var(--teal); font-family: var(--sans); font-size: 13px; font-weight: 700; text-align: left; cursor: pointer; } .mplx-side-link:hover { background: var(--vanilla-d); } .mplx-side-link.is-on { background: var(--teal); color: var(--vanilla); } .mplx-side-link svg { flex: 0 0 auto; opacity: .8; } .mplx-side-lbl { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mplx-side-n { flex: 0 0 auto; font-size: 11px; font-weight: 800; color: var(--muted); } .mplx-side-link.is-on .mplx-side-n { color: var(--sage); } /* Le bouton « Retour au site », en pied de panneau. Le libellé est dans un span : `.its-v2 a[class]` impose sa couleur aux liens porteurs de classe. */ .mplx-side-retour { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 16px 16px 6px; padding: 13px 16px; background: var(--teal); } .mplx-side-filtres-tete { display: flex; align-items: center; gap: 12px; padding: 14px 16px 4px; } .mplx-side-retour svg { color: var(--sage); } .mplx-side-retour-txt { color: var(--vanilla); font-size: 12px; font-weight: 800; letter-spacing:0; text-transform:none; } .mplx-side-retour:hover { background: var(--teal-dk); } @media (max-width: 619px) { .mplx-side-link { padding: 13px 18px; font-size: 14px; } } /* ── Le panneau du lecteur, en mobile ────────────────────────── Empilé, chaque information sur sa ligne, il occupait presque un écran entier sous la vidéo pour dire trois choses (Félix, 25/09). On le réorganise en lignes utiles : l'état du match d'abord (pastille, compétition, chrono), le score ensuite, puis la dernière action. L'ordre du DOM sert le desktop, on le réagence ici avec `order` plutôt que de dupliquer le balisage. */ @media (max-width: 680px) { /* Largeur des vignettes et hauteur des flèches : voir --mplx-n et --mplx-fleche-top, plus bas. Plus rien de fixe ici. */ /* Plus de valeur en dur : le calcul suit la largeur de la vignette. */ .mplx-stage-info { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 10px; padding: 12px 14px 14px; } .mplx-stage-info > * { margin: 0; } /* ⚠️ TOUT enfant doit avoir son rang. Sans `order`, un élément vaut 0 et passe devant les autres : la barre d'actions, ajoutée après coup, se retrouvait AU-DESSUS de la compétition et du score (Félix, 26/09). Toute nouvelle ligne du panneau doit être inscrite ici. */ .mplx-stage-info .mplx-badge { order: 1; } .mplx-stage-comp { order: 2; } .mplx-stage-clock { order: 3; } .mplx-stage-board { order: 4; flex: 1 0 100%; } .mplx-stage-chapo { order: 5; flex: 1 0 100%; } .mplx-stage-events { order: 6; flex: 1 0 100%; } .mplx-stage-tv { order: 7; flex: 1 0 100%; } .mplx-stage-actes { order: 8; flex: 1 0 100%; margin-top: 10px; } .mplx-stage-link { order: 9; } .mplx-stage-pts { font-size: 22px; } .mplx-stage-name { font-size: 13px; } /* Une seule action : la suite est sur la fiche du match. */ .mplx-stage-ev:nth-child(n+2) { display: none; } } @media (max-width: 680px) { body.admin-bar { --mplx-top-offset: 46px; } /* (Le pop-up de menu a été retiré le 26/09.) */ } .mplx-bar-right { display: flex; align-items: center; gap: 16px; } .mplx-bar-live { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .3px; color: var(--vanilla); white-space: nowrap; } .mplx-bar-live .mplx-badge-dot { background: var(--red); } /* Connexion et compte : le menu du site étant masqué ici, c'est le seul accès. */ .mplx-login { display: inline-flex; align-items: center; flex: 0 0 auto; padding: 7px 13px; background: var(--sage); color: var(--teal-dk); font-size: 12px; font-weight: 800; letter-spacing: .3px; white-space: nowrap; } .mplx-login:hover { background: var(--vanilla); } /* ── Recherche (loupe + champ dépliable) ───────────────────── */ .mplx-search { display: flex; align-items: center; flex: 0 0 auto; margin: 0; } .mplx-search-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; background: rgba(242, 229, 210, .12); border: 0; color: var(--vanilla); cursor: pointer; } .mplx-search-btn:hover, .mplx-search.is-open .mplx-search-btn { background: rgba(242, 229, 210, .22); } .mplx-search-in { width: 0; padding: 0; border: 0; border-bottom: 1px solid transparent; background: transparent; color: var(--vanilla); font-family: var(--sans); font-size: 13px; font-weight: 700; opacity: 0; transition: width .2s ease, opacity .2s ease; } .mplx-search-in::placeholder { color: rgba(242, 229, 210, .55); } .mplx-search-in::-webkit-search-cancel-button { -webkit-appearance: none; } .mplx-search-in:focus { outline: 0; } .mplx-search.is-open .mplx-search-in { width: 220px; padding: 8px 10px; opacity: 1; border-bottom-color: rgba(242, 229, 210, .5); } .mplx-vide { margin: 8px 0 0; font-size: 14px; color: var(--muted); } @media (max-width: 619px) { /* Le champ ouvert prend une ligne entière sous la barre. */ .mplx-search.is-open .mplx-search-in { position: absolute; left: 8px; right: 8px; top: 100%; width: auto; padding: 12px; background: var(--teal); border-bottom: 2px solid var(--vanilla); } } .mplx-compte { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; max-width: 190px; padding: 4px 10px 4px 4px; background: rgba(242, 229, 210, .12); color: var(--vanilla); } .mplx-compte:hover { background: rgba(242, 229, 210, .22); } .mplx-compte-ini { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: 0 0 auto; background: var(--sage); color: var(--teal-dk); font-size: 11px; font-weight: 800; } .mplx-compte-nom { color: var(--vanilla); font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mplx-nav { display: flex; align-items: center; gap: 14px; } .mplx-nav-link { color: var(--sage); font-size: 12px; font-weight: 700; white-space: nowrap; } .mplx-nav-link:hover { color: var(--vanilla); } /* ── Pilules de catégories, sous la barre ────────────────────── Reprises de l'application Netflix (maquette mobile : « TV Shows / Movies / Categories » en pastilles sous l'en-tête). En mobile, filtrer ne doit pas obliger à ouvrir le menu : 56 % de l'audience est là. ⚠️ Mobile seulement : au-dessus de 900px le tiroir est à un clic et la page a déjà beaucoup de repères en haut. */ .mplx-pilules { display: none; } @media (max-width: 900px) { .mplx-pilules { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 0 var(--mplx-gouttiere) 12px; } .mplx-pilules::-webkit-scrollbar { display: none; } .mplx-pilule { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 6px 13px; background: rgba(242, 229, 210, .12); border: 1px solid rgba(242, 229, 210, .42); border-radius: 0; color: var(--vanilla); font-family: var(--sans); font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: background .15s ease, border-color .15s ease; } .mplx-pilule-txt { color: var(--vanilla); } .mplx-pilule-n { font-size: 11px; font-weight: 800; opacity: .7; } .mplx-pilule.is-on { background: var(--vanilla); border-color: var(--vanilla); } .mplx-pilule.is-on .mplx-pilule-txt { color: var(--teal); } .mplx-pilule.is-on .mplx-pilule-n { color: var(--teal); } } /* ── États de page ─────────────────────────────────────────────── */ .mplx-load { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 56px 16px; } .mplx-load-spin { width: 26px; height: 26px; border: 3px solid var(--border); border-top-color: var(--teal); border-radius: 0; animation: mplx-spin .7s linear infinite; } .mplx-load-txt { font-size: 12px; font-weight: 700; letter-spacing:0; text-transform:none; color: var(--muted); } @keyframes mplx-spin { to { transform: rotate(360deg); } } .mplx-demo { margin: 0 0 16px; padding: 11px 14px; background: var(--yellow); color: var(--vanilla); font-size: 12px; font-weight: 800; letter-spacing: .3px; } .mplx-err { padding: 18px 16px; background: var(--red-lt); border: 1px solid var(--red); color: var(--red); font-size: 13px; font-weight: 700; text-align: center; } .mplx-empty { padding: 44px 16px; background: var(--vanilla); border: 1px solid var(--border); text-align: center; } .mplx-empty-title { margin: 0 0 6px; font-size: 16px; font-weight: 800; color: var(--teal); } .mplx-empty-sub { margin: 0; font-size: 13px; color: var(--muted); } .mplx-soon { margin-top: 28px; text-align: left; } .mplx .mplx-soon h2.mplx-soon-title.mplx-soon-title.mplx-soon-title { margin: 0 0 12px; font-size: 12px; font-weight: 800; letter-spacing:0; text-transform:none; color: var(--teal); } .mplx-soon-list { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); } .mplx-soon-row { display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 12px; padding: 11px 13px; background: var(--vanilla); } .mplx-soon-hm { font-size: 14px; font-weight: 800; color: var(--teal); font-variant-numeric: tabular-nums; } .mplx-soon-main { min-width: 0; } .mplx-soon-teams { font-size: 13px; font-weight: 700; color: var(--teal); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mplx-soon-meta { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── Le lecteur ────────────────────────────────────────────────── */ /* ── La scène du lecteur, pleine largeur ─────────────────────── Même architecture que la bannière de « Parcourir » : la bande sombre touche les deux bords, son contenu revient s'aligner sur la colonne de lecture. ⚠️ On ne met PAS la vidéo elle-même en 100vw : en 16/9 sur 1920 elle ferait 1080px de haut et mangerait tout l'écran. C'est la BANDE qui est pleine largeur, la vidéo garde la largeur de contenu, comme les rangées. 576 = la moitié des 1152px de contenu. */ .mplx-stage { display: block; position: relative; margin-inline: calc(-1 * var(--mplx-gouttiere)); margin-bottom: 22px; padding: 0; background: var(--teal-dk); } /* ── La barre reste atteignable sur le lecteur aussi ─────────── Ici elle ne FLOTTE pas : le premier élément de la page est la vidéo, une barre posée dessus en masquerait le haut. Elle colle en défilant, garde son fond plein, et se soude à la bande sombre (plus de bandeau vanilla entre les deux, qui cassait l'effet salle de projection). */ /* ⚠️ PAS `position: sticky` : le thème pose `overflow-x: clip` sur html, et un axe en `clip` fait passer l'autre en `auto`, ce qui crée un conteneur de défilement et neutralise le collant. Mesuré : après 600px de défilement la barre était à -507, donc partie avec la page. En position fixe, elle tient. Le calage vient de sa hauteur réelle, mesurée en JS (--mplx-barre-h), parce qu'elle change avec la largeur : 69px en bureau, 58 en mobile. */ .mplx[data-vue="lecteur"] .mplx-bar { position: fixed; top: 0; left: 0; z-index: 6; width: 100vw; margin: 0; } /* ⚠️ Plus AUCUN décalage : la page commence par la vidéo et la barre se pose dessus, en transparence, comme sur la bannière (Félix, 26/09 : « pourquoi tu gardes pas le menu transparent sur la vidéo ? »). C'est aussi ce qui supprime pour de bon la bande sombre entre la barre et l'image. */ .mplx[data-vue="lecteur"] .mplx-corps { padding-top: 0; } body.admin-bar .mplx[data-vue="lecteur"] .mplx-bar { top: 32px; } /* Dans l'app, la barre fixée est le premier bloc porteur de fond : elle prend la réserve d'encoche en bordure de sa couleur (principe du 16/09, cf. its-app-shell.css), et sa hauteur mesurée l'inclut d'elle-même. */ html.is-app .mplx[data-vue="lecteur"] .mplx-bar { border-top: env(safe-area-inset-top, 0px) solid var(--teal); } /* Le bouton « Retour » de l'app, adopté en tête du bandeau (voir le JS). */ html.is-app .mplx-brand .its-app-back { margin-right: 2px; } /* ⚠️ Dans l'app, PAS la barre d'onglets en pilule du site : le multiplex est une zone à part, avec son propre menu (Félix, 26/09). Le bouton Retour et le logo ramènent au site. La réserve que la coquille laisse sous le contenu pour cette barre saute avec elle. */ html.is-app body.page-template-page-multiplex .its-app-tabbar { display: none; } html.is-app body.page-template-page-multiplex { padding-bottom: 0; } /* La sonde de géométrie (interrupteur « itsdbg », voir le JS). */ .mplx-sonde { position: fixed; left: 8px; right: 8px; bottom: 170px; z-index: 99999; margin: 0; padding: 8px; background: #1A1A1A; border: 2px solid #F2E5D2; color: #F2E5D2; font: 11px/1.5 monospace; white-space: pre-wrap; } @media screen and (max-width: 782px) { body.admin-bar .mplx[data-vue="lecteur"] .mplx-bar { top: 46px; } } .mplx-stage-media { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 78vh; background: #000; overflow: hidden; } .mplx-stage-media iframe { display: block; width: 100%; height: 100%; border: 0; } /* Facade : on n'injecte l'iframe qu'au clic (perf, et aucun cookie de plateforme posé avant un geste explicite du visiteur). */ .mplx-facade { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; display: flex; align-items: center; justify-content: center; background: #000; border: 0; cursor: pointer; } .mplx-facade-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .7; transition: opacity .2s; } .mplx-facade:hover .mplx-facade-img { opacity: .85; } .mplx-facade-play { position: relative; width: 0; height: 0; border-style: solid; border-width: 17px 0 17px 28px; border-color: transparent transparent transparent var(--vanilla); filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .6)); } .mplx-facade:hover .mplx-facade-play, .mplx-facade:focus-visible .mplx-facade-play { border-left-color: var(--sage); } .mplx-facade-hint { position: absolute; left: 0; right: 0; bottom: 14px; font-size: 11px; font-weight: 700; letter-spacing:0; text-transform:none; color: var(--vanilla); text-align: center; text-shadow: 0 1px 4px rgba(0, 0, 0, .7); } /* Pas de vidéo : le cadre porte le tableau de score, jamais un trou noir. */ .mplx-novid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 20px; text-align: center; background: var(--teal-dk); } .mplx-novid-board { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; width: 100%; max-width: 440px; } .mplx-novid-team { min-width: 0; font-size: 13px; font-weight: 700; color: var(--vanilla); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mplx-novid-team--away { text-align: right; } .mplx-novid-score { font-size: 34px; font-weight: 800; color: var(--vanilla); font-variant-numeric: tabular-nums; letter-spacing: 1px; } .mplx-novid-msg { font-size: 11px; font-weight: 700; letter-spacing:0; text-transform:none; color: var(--sage); } .mplx-stage-info { padding: 18px 16px 20px; background: var(--teal); color: var(--vanilla); } .mplx-stage-comp { margin: 10px 0 0; font-size: 11px; font-weight: 800; letter-spacing:0; text-transform:none; color: var(--sage); } .mplx-stage-board { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 10px 0 0; } .mplx-stage-name { min-width: 0; font-size: 14px; font-weight: 700; color: var(--vanilla); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mplx-stage-name--away { text-align: right; } .mplx-stage-pts { font-size: 26px; font-weight: 800; color: var(--vanilla); font-variant-numeric: tabular-nums; } .mplx-stage-clock { margin: 8px 0 0; font-size: 12px; font-weight: 700; color: var(--vanilla); } .mplx-stage-tv { margin: 8px 0 0; font-size: 11px; color: var(--sage); } .mplx-stage-events { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; } .mplx-stage-ev { display: grid; grid-template-columns: 34px 1fr; gap: 8px; align-items: baseline; font-size: 12px; color: var(--vanilla); } .mplx-stage-ev-min { font-weight: 800; color: var(--sage); font-variant-numeric: tabular-nums; } .mplx-stage-ev-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ⚠️ La couleur vit sur le span, pas sur le lien : `.its-v2 a[class]:not(…)` (itsrugby-common.css) impose `color:inherit` à tout lien porteur d'une classe, avec une spécificité qu'on ne peut pas dépasser proprement. Sans ce span, le libellé sortait en blanc sur le fond clair du bouton, illisible. */ .mplx-stage-link { display: inline-block; margin: 16px 0 0; padding: 9px 15px; background: var(--vanilla); font-size: 12px; font-weight: 800; letter-spacing:0; text-transform:none; } .mplx-stage-link-txt { color: var(--teal-dk); } .mplx-stage-link:hover { background: var(--vanilla-d); } /* Une rediffusion ne porte pas la pastille « Direct » du gabarit. */ .mplx-live.is-replay .mplx-badge { display: none; } .mplx-live.is-replay .mplx-stage-clock { color: var(--sage); } /* ── Catégories ────────────────────────────────────────────────── */ .mplx-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; } .mplx-chips::-webkit-scrollbar { display: none; } /* ── Bannière et rangées, à la Netflix ───────────────────────── Un match mis en avant, puis des rangées qui défilent horizontalement : le direct, les matchs à revoir, et une rangée par compétition. Les rangées remplacent les filtres — on parcourt au lieu de cliquer — et une rangée de quatre éléments ne donne pas la même impression de vide qu'une grille. */ .mplx-hero { position: relative; display: flex; align-items: flex-end; min-height: clamp(360px, 72vh, 820px); margin: 0 calc(-1 * var(--mplx-gouttiere)) 6px; background: var(--teal-dk); overflow: hidden; } .mplx-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity .7s ease, transform 9s ease-out; } .mplx-hero.is-ready .mplx-hero-img { opacity: 1; transform: scale(1); } .mplx-hero-voile { position: absolute; inset: 0; background: linear-gradient(to top, var(--vanilla) 0%, rgba(242, 229, 210, .92) 1%, rgba(242, 229, 210, .74) 2%, rgba(242, 229, 210, .50) 3.5%, rgba(242, 229, 210, .27) 5%, rgba(242, 229, 210, .10) 6.5%, rgba(242, 229, 210, 0) 8%), /* ⚠️ Un voile d'ensemble EN PLUS du dégradé latéral. Sur une photo claire — une pelouse en plein jour — le dégradé seul ne suffisait pas et le titre se perdait dans l'herbe (Félix, 26/09). Léger, il ne se voit pas sur une image sombre et sauve les images vives. */ linear-gradient(rgba(var(--mplx-voile), .22), rgba(var(--mplx-voile), .22)), linear-gradient(90deg, rgba(var(--mplx-voile), .94) 0%, rgba(var(--mplx-voile), .74) 40%, rgba(var(--mplx-voile), .26) 76%, rgba(var(--mplx-voile), .12) 100%); } .mplx-hero-txt { position: relative; padding: 30px var(--mplx-gouttiere) clamp(24px, 6vh, 72px); } .mplx-hero-titre, .mplx-hero-info { max-width: 740px; } .mplx-hero-quoi { display: inline-block; padding: 3px 9px; background: var(--sage); color: var(--teal-dk); font-size: 10px; font-weight: 800; letter-spacing:0; text-transform:none; } .mplx-hero.is-live .mplx-hero-quoi { background: var(--red); color: var(--vanilla); } .mplx-hero-titre { margin: 12px 0 0; font-size: clamp(28px, 4.2vw, 48px); font-weight: 800; line-height: 1.08; letter-spacing: -1px; color: var(--vanilla); } /* Vanille, pas sauge : la ligne d'information de la bannière suit la charte du bandeau (Félix, 26/09 : « ça en vanilla »). */ .mplx-hero-info { margin: 12px 0 0; font-size: 16px; color: var(--vanilla); } .mplx-hero-actes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 16px 0 0; } .mplx-hero-cta { display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px; background: var(--vanilla); font-size: 12px; font-weight: 800; letter-spacing:0; text-transform:none; } .mplx-hero-cta-txt { color: var(--teal-dk); } .mplx-hero-cta-ic { display: block; width: 0; height: 0; border-left: 9px solid var(--teal-dk); border-top: 6px solid transparent; border-bottom: 6px solid transparent; } /* ⚠️ La couleur du libellé va sur le span, pas sur le lien : la feuille du site force `color: inherit` sur tout `a[class]`, avec une spécificité qu'on ne peut pas dépasser sans !important (trois liens verts sur vert le 25/09). */ .mplx-hero-plus { display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px; background: rgba(242, 229, 210, .2); font-size: 12px; font-weight: 800; letter-spacing:0; text-transform:none; transition: background .18s ease, transform .18s ease; } .mplx-hero-plus:hover { background: rgba(242, 229, 210, .34); transform: scale(1.04); } .mplx-hero-plus:active { transform: scale(.98); } .mplx-hero-plus-txt { color: var(--vanilla); } .mplx-hero-plus-ic { display: block; width: 8px; height: 8px; border-right: 2px solid var(--vanilla); border-bottom: 2px solid var(--vanilla); transform: rotate(-45deg); } .mplx-hero-cta { transition: background .18s ease, transform .18s ease; } .mplx-hero-cta:hover { background: var(--vanilla-d); transform: scale(1.04); } .mplx-hero-cta:active { transform: scale(.98); } /* ── Puces de la bannière ────────────────────────────────────── La bannière tourne entre les directs : les puces disent combien il y en a et permettent d'aller droit à l'un d'eux. ⚠️ Elles sont le 5e enfant de .mplx-hero-txt, hors de la cascade d'entrée qui ne vise que les quatre premiers — elles apparaissent donc sans délai, ce qui est voulu : elles renseignent, elles ne se donnent pas en spectacle. */ /* ── Indicateur de rotation de la bannière ───────────────────── ⚠️ Deux tirets plats sous les boutons : on ne comprend ni ce qu'ils comptent, ni qu'ils vont changer (Félix, 26/09 : « deux vides dans le hero »). Le tiret actif se REMPLIT sur la durée de la rotation, et l'objet dit enfin quelque chose : une bannière suivante arrive, dans tant de temps. La durée vient du JS (`--mplx-puce-duree`) pour ne pas exister en deux endroits. */ .mplx-hero-puces { display: flex; gap: 8px; margin: 18px 0 0; } .mplx-hero-puce { position: relative; width: 30px; height: 5px; padding: 0; border: 0; background: rgba(242, 229, 210, .3); cursor: pointer; overflow: hidden; transition: background .2s ease, width .2s ease; } .mplx-hero-puce:hover { background: rgba(242, 229, 210, .58); } .mplx-hero-puce.is-on { width: 46px; background: rgba(242, 229, 210, .28); } .mplx-hero-puce.is-on::after { content: ""; position: absolute; inset: 0; transform-origin: left center; background: var(--vanilla); animation: mplx-puce-remplit var(--mplx-puce-duree, 9s) linear forwards; } @keyframes mplx-puce-remplit { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* Sans animation, le tiret actif reste simplement plein. */ @media (prefers-reduced-motion: reduce) { .mplx-hero-puce.is-on::after { animation: none; transform: scaleX(1); } } .mplx-hero.is-in .mplx-hero-txt > * { animation: mplx-monte .5s cubic-bezier(.2, .7, .3, 1) backwards; } .mplx-hero.is-in .mplx-hero-txt > *:nth-child(2) { animation-delay: .06s; } .mplx-hero.is-in .mplx-hero-txt > *:nth-child(3) { animation-delay: .12s; } .mplx-hero.is-in .mplx-hero-txt > *:nth-child(4) { animation-delay: .18s; } /* ⚠️ PAS de marge négative à droite. Elle faisait déborder les pistes jusqu'au bord de l'écran — l'effet « ça continue » des plateformes — mais laissait les vignettes coupées contre la vitre, sans respiration, et la page n'avait plus la même gouttière des deux côtés (Félix, 26/09 : « pas de marge à droite sur aucune page du multiplex »). Les rangées s'arrêtent maintenant sur la même gouttière que le texte. */ /* ⚠️ margin-right DÉCLARÉE exprès (30/09) : l'ancien CSS élagué de Rocket pose `margin-right: calc(50% - 50vw)`, les rangées filaient alors jusqu'au bord droit de l'écran, sans gouttière (Félix : « c'est collé à droite »). */ .mplx-rows { display: flex; flex-direction: column; gap: 26px; margin-right: 0; } /* ── Le bandeau flotte sur l'image ───────────────────────────── Chez Netflix la page COMMENCE par l'image : le logo et la navigation sont posés dessus, sur un dégradé. Chez nous une barre pleine occupait le haut et l'image ne commençait qu'en dessous, ce qui donne « un bloc posé sur une page » au lieu d'« une page qui est une image » (Félix, 26/09). ⚠️ Scopé à la vue « parcourir » ET à la présence effective d'une bannière : sur le lecteur, ou sur une page sans match, une barre en absolu se poserait par-dessus le contenu suivant. `has-hero` est posé par syncHero(). */ /* ⚠️ Plus scopé à « parcourir » : depuis le 26/09 le lecteur porte lui aussi une bannière tant que rien n'est choisi. `has-hero` suffit à dire qu'il y en a une, et c'est exactement la condition voulue. */ .mplx { position: relative; } /* ⚠️ Sur le lecteur, le dégradé vaut aussi SANS bannière : il se pose sur la vidéo. Et il laisse passer le geste (pointer-events) : sous lui vivent le titre et les commandes que YouTube pose en haut de son cadre ; seuls nos liens et boutons restent cliquables. */ .mplx.has-hero .mplx-bar, .mplx[data-vue="lecteur"] .mplx-bar { position: fixed; top: 0; left: 0; z-index: 6; width: 100vw; margin: 0; /* ⚠️ Dégradé COURT et léger : avec 34px de remplissage et un voile à 88 % jusqu'à mi-hauteur, la zone sous les liens restait presque noire et se lisait comme une bande sombre au-dessus de l'image (Félix, 26/09 : « la vidéo n'est pas étirée en dessous »). L'image doit se voir dès le bas des liens ; le voile ne sert qu'à garder le texte lisible. */ padding-bottom: 16px; background: linear-gradient(to bottom, rgba(var(--mplx-voile), .82) 0%, rgba(var(--mplx-voile), .58) 45%, rgba(var(--mplx-voile), .26) 78%, rgba(var(--mplx-voile), 0) 100%); transition: background .25s ease, padding-bottom .25s ease, box-shadow .25s ease; } /* ⚠️ Une fois l'image dépassée, la barre redevient pleine. Un dégradé posé sur les rangées ne porterait plus rien et le menu deviendrait illisible : c'est précisément ce que Félix a signalé le 26/09 (« on perd le menu »), aggravé par une barre qui défilait et disparaissait. Fixée + opaque, elle reste atteignable partout, comme celle de Netflix. */ /* ⚠️ La barre reste TRANSPARENTE en défilant (Félix, 27/09 : « tu peux pas laisser la barre transparente ? ») : même dégradé qu'en haut de page, il suffit à porter les liens sur les rangées. Plus de fond plein, ni teal (« ça devient vert ») ni sombre. `is-barre-collee` ne sert plus qu'à l'ombre, qui détache la barre du contenu qui passe dessous. */ .mplx.is-barre-collee .mplx-bar { box-shadow: 0 2px 14px rgba(var(--mplx-voile), .18); } .mplx[data-vue="lecteur"]:not(.is-barre-collee) .mplx-bar, .mplx[data-vue="lecteur"]:not(.is-barre-collee) .mplx-bar-in { pointer-events: none; } .mplx[data-vue="lecteur"]:not(.is-barre-collee) .mplx-brand, .mplx[data-vue="lecteur"]:not(.is-barre-collee) .mplx-nav, .mplx[data-vue="lecteur"]:not(.is-barre-collee) .mplx-bar-right { pointer-events: auto; } /* ⚠️ La barre d'administration de WordPress est elle-même fixée : sans ce décalage la nôtre passerait dessous. */ body.admin-bar .mplx[data-vue="parcourir"].has-hero .mplx-bar { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar .mplx[data-vue="parcourir"].has-hero .mplx-bar { top: 46px; } } /* La bannière reprend la hauteur libérée, et son texte descend sous le bandeau flottant. */ .mplx[data-vue="parcourir"].has-hero .mplx-hero { min-height: clamp(420px, 82vh, 900px); } /* ⚠️ Le bandeau de démonstration s'intercale entre le haut du bloc et la bannière : le bandeau flottant, ancré en haut, se posait alors sur LUI et plus sur l'image (75px de décalage, mesuré le 26/09). Il n'existe pas en production, mais c'est l'écran sur lequel on relit la page. On l'épingle en bas de l'écran, où il ne déforme plus rien. */ .mplx .mplx-demo { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; margin: 0; text-align: center; } .mplx-row { position: relative; min-width: 0; } .mplx .mplx-row h2.mplx-row-titre.mplx-row-titre.mplx-row-titre { margin: 0 0 12px; font-size: 16px; font-weight: 800; letter-spacing: -.3px; color: var(--teal); text-transform: none; } /* La piste défile horizontalement, une vignette s'aligne sous le doigt. */ .mplx-row-piste { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 0; scroll-behavior: smooth; scrollbar-width: none; /* ⚠️ AUCUN débord latéral. À 12px (la largeur d'un interstice), la vignette suivante commençait pile au bord visible et, à l'arrondi de sous-pixel près, un trait d'un ou deux pixels en restait (Félix, 26/09 : « le trait qui correspond à un bout de vidéo qui commence, c'est moche »). Sans débord, elle commence un interstice entier après le bord. La fiche dépliée perd 8 % sur les vignettes de bord, c'est sans importance. Le JS (MPLX_PISTE_MARGE) doit suivre. */ padding: 14px 0 34px; margin: -14px 0 -30px; } .mplx-row-piste::-webkit-scrollbar { display: none; } /* ⚠️ Un nombre ENTIER de vignettes par écran, jamais une vignette coupée au bord (Félix, 26/09 : « adapter le carrousel à la taille de l'écran »). La largeur se déduit de la piste : `100 %` vaut la largeur de la rangée. Le nombre par écran (--mplx-n) se règle par palier de largeur, et la flèche avance d'une page (JS, MPLX_PISTE_GAP doit rester égal au gap). */ .mplx-row-piste { --mplx-n: 5; } .mplx-row-piste > .mplx-card { flex: 0 0 calc((100% - (var(--mplx-n) - 1) * 12px) / var(--mplx-n)); scroll-snap-align: start; } @media (max-width: 1199px) { .mplx-row-piste { --mplx-n: 4; } } @media (max-width: 899px) { .mplx-row-piste { --mplx-n: 3; } } @media (max-width: 680px) { .mplx-row-piste { --mplx-n: 2; } } /* ⚠️ Le point d'ancrage de l'agrandissement suit la position dans la piste : une vignette de tête qui grandirait par son centre sortirait à gauche du cadre de défilement, donc serait rognée. */ .mplx-row-piste > .mplx-card:first-child .mplx-card-media, .mplx-row-piste > .mplx-card:first-child .mplx-card-plus { transform-origin: left center; left: 0; } .mplx-row-piste > .mplx-card:last-child .mplx-card-media, .mplx-row-piste > .mplx-card:last-child .mplx-card-plus { transform-origin: right center; } .mplx-row-piste > .mplx-card:last-child .mplx-card-plus { left: -16%; } /* ── Flèches de défilement ───────────────────────────────────── Elles sont visibles en permanence, seulement du côté où il reste quelque chose à voir. Au doigt aussi : on peut faire défiler la piste, mais rien ne dit qu'elle défile si on ne voit pas de flèche (Félix, 26/09). */ .mplx-row-piste-wrap { position: relative; } /* ⚠️ La flèche se cale sur le milieu de l'IMAGE, pas de la rangée : la hauteur dépend du format des vignettes, et une valeur unique ne peut pas convenir aux deux. En 16/9 une vignette de 236px donne une image de 133px, milieu à 66. En 9/16 (formats courts) une vignette de 158px donne 281px de haut, milieu à 140 — la flèche s'y retrouvait tout en haut (Félix, 26/09). */ .mplx-row-fleche { position: absolute; /* Milieu de la première image, mesuré en JS (majFleches) : la largeur des vignettes suit l'écran, donc leur hauteur aussi. */ top: var(--mplx-fleche-top, 66px); /* ⚠️ Au-dessus de la vignette survolée (z 6) : sinon le survol de la dernière vignette faisait passer celle-ci devant la flèche, qui « disparaissait à droite » (Félix, 26/09). Sans conflit avec la fiche dépliée : elle vit SOUS l'image, la flèche est au milieu de l'image. */ z-index: 7; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--border); background: var(--vanilla); box-shadow: 0 2px 10px rgba(var(--mplx-voile), .18); cursor: pointer; /* ⚠️ TOUJOURS visibles. Elles n'apparaissaient qu'au survol de la rangée : invisibles au doigt, où le survol n'existe pas, et introuvables même à la souris tant qu'on n'avait pas deviné qu'il fallait passer dessus (Félix, 26/09, deux fois). Une commande qu'il faut découvrir par hasard n'est pas une commande. Pleinement opaques au repos : une flèche à demi effacée passe encore pour absente sur une vignette claire (Félix, 26/09). */ opacity: 1; transform: translateY(-50%); transition: background .18s ease; } .mplx-row-fleche.is-prev { left: -8px; } .mplx-row-fleche.is-next { right: 12px; } .mplx-row-fleche:hover { background: var(--teal); } /* ⚠️ Au bout, la flèche s'ÉTEINT, elle ne disparaît pas (Félix, 26/09 : « toujours avoir la flèche présente ») : une commande qui saute d'un bord à l'autre se cherche. Seule une rangée qui tient entière n'en montre aucune. */ .mplx-row-fleche.is-off { opacity: .32; pointer-events: none; } .mplx-row-piste-wrap.is-fixe .mplx-row-fleche { display: none; } .mplx-row-fleche-ic { display: block; width: 9px; height: 9px; border-right: 2px solid var(--teal); border-bottom: 2px solid var(--teal); } .mplx-row-fleche.is-prev .mplx-row-fleche-ic { margin-left: 3px; transform: rotate(135deg); } .mplx-row-fleche.is-next .mplx-row-fleche-ic { margin-right: 3px; transform: rotate(-45deg); } .mplx-row-fleche:hover .mplx-row-fleche-ic { border-color: var(--vanilla); } /* Les rangées entrent en cascade au premier rendu, pas à chaque sondage. */ .mplx-rows.is-in > .mplx-row { animation: mplx-monte .5s cubic-bezier(.2, .7, .3, 1) backwards; } .mplx-rows.is-in > .mplx-row:nth-child(2) { animation-delay: .05s; } .mplx-rows.is-in > .mplx-row:nth-child(3) { animation-delay: .1s; } .mplx-rows.is-in > .mplx-row:nth-child(4) { animation-delay: .15s; } .mplx-rows.is-in > .mplx-row:nth-child(5) { animation-delay: .2s; } .mplx-rows.is-in > .mplx-row:nth-child(n+6) { animation-delay: .25s; } @keyframes mplx-monte { from { opacity: 0; transform: translateY(14px); } } /* ── La grille ─────────────────────────────────────────────────── */ .mplx-grid-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 24px 0 12px; } .mplx .mplx-grid-head h2.mplx-grid-title.mplx-grid-title.mplx-grid-title { margin: 0; font-size: 13px; font-weight: 800; letter-spacing:0; text-transform:none; color: var(--teal); } .mplx-grid-hint { font-size: 11px; color: var(--muted); } .mplx-card { position: relative; } .mplx-card-main { display: block; width: 100%; padding: 0; background: transparent; border: 0; text-align: left; cursor: pointer; } /* Devant ses voisines : dépliée, la fiche déborde de 8 % de chaque côté et passerait sous le pied de la vignette suivante. (La flèche de rangée, elle, reste au-dessus : z 7, voir plus bas.) ⚠️ Souris SEULEMENT. Au doigt, une vignette touchée garde `:hover` et `:focus-within` après l'appui : elle passait alors devant la flèche, qui « disparaissait des fois » en mobile (Félix, 26/09). Rien ne se déplie au doigt, donc rien n'a besoin de passer devant. */ @media (hover: hover) { .mplx-card:hover, .mplx-card:focus-within { z-index: 6; } } .mplx-card-media { position: relative; aspect-ratio: 16 / 9; background: var(--teal-dk); overflow: hidden; outline: 2px solid transparent; outline-offset: -2px; transition: outline-color .15s, box-shadow .3s ease, transform .3s cubic-bezier(.2, .7, .3, 1); } .mplx-card.is-active .mplx-card-media { outline-color: var(--vanilla); } /* Le liseré répond tout de suite (on sait sur quoi on est), l'agrandissement attend 300 ms : sans ce délai, balayer une rangée déplie dix fiches au passage. Au retrait, aucun délai, la vignette se referme aussitôt. */ /* ⚠️ Plus d'agrandissement au survol : la vignette grossissait de 16 % avec son image, et Félix n'en voulait pas (26/09 : « j'aime pas l'animation quand on passe sur une vidéo »). Le survol se lit au liseré et à l'image qui s'éclaircit, sans que rien ne bouge. */ .mplx-card:hover .mplx-card-media, .mplx-card:focus-within .mplx-card-media { outline-color: var(--teal); box-shadow: 0 8px 22px rgba(var(--mplx-voile), .28); } .mplx-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .72; transition: transform .55s cubic-bezier(.2, .7, .3, 1), opacity .28s ease; } .mplx-card:hover .mplx-card-img, .mplx-card:focus-within .mplx-card-img { opacity: .9; } .mplx-card-score { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; background: rgba(var(--mplx-voile), .4); } .mplx-card-abbr { font-size: 12px; font-weight: 800; letter-spacing: 1px; color: var(--sage); } .mplx-card-pts { font-size: 26px; font-weight: 800; color: var(--vanilla); font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); } .mplx-card-min { position: absolute; right: 8px; bottom: 8px; padding: 3px 7px; background: rgba(0, 0, 0, .75); color: var(--vanilla); font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; } /* ⚠️ En haut à DROITE (Félix, 26/09). En bas à gauche elle tombait sur les incrustations des diffuseurs — scores, chronos, logos de chaîne sont presque toujours posés là sur une image de match. Le coin haut droit est le seul que personne n'occupe. */ /* ⚠️ `text-size-adjust` verrouillé : la webview iOS agrandit d'autorité le texte de certains blocs, et une pastille de 10px peut y sortir bien plus grosse, au point d'occuper la vignette entière (Félix, 26/09, sur téléphone et dans l'app). Mesurée à 25 % de la vignette sur un navigateur de bureau à 396px, elle n'avait donc rien d'anormal côté CSS. ⚠️ Et un plafond de largeur en secours : quel que soit le libellé ou l'agrandissement, la pastille ne peut plus déborder de son image. */ .mplx-card-cam { position: absolute; right: 8px; top: 8px; max-width: calc(100% - 16px); padding: 4px 8px; background: var(--vanilla); color: var(--teal); font-size: 10px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* ⚠️ Bornée en dur : une pastille étirée à toute la vignette a été vue le 27/09 (Félix, « card avec pills complet »), sans que je puisse la reproduire (65×24px ici). Quoi qu'il arrive, elle ne peut plus s'étirer ni en largeur ni en hauteur. */ left: auto; bottom: auto; width: auto; height: auto; max-height: 2.4em; line-height: 1.4; } .mplx-card-jauge { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(242, 229, 210, .28); } .mplx-card-jauge-in { display: block; width: var(--mplx-avance, 0%); height: 100%; background: var(--red); transition: width .4s ease; } .mplx-card-body { padding: 8px 2px 0; } .mplx-card-comp { font-size: 11px; font-weight: 800; letter-spacing:0; text-transform:none; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mplx-card-teams { margin-top: 3px; font-size: 14px; font-weight: 700; color: var(--teal); line-height: 1.35; } .mplx-card:hover .mplx-card-teams { color: var(--teal-dk); } .mplx-card-last { margin-top: 4px; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .2s ease; } .mplx-card:hover .mplx-card-last { color: var(--teal); } /* ── La fiche qui se déplie ──────────────────────────────────── Elle vient recouvrir le pied de la vignette, exactement sous l'image une fois celle-ci agrandie : 143px = 133px d'image + les 10px qu'elle gagne vers le bas. Largeur 116 % décalée de -8 % : c'est la largeur de l'image agrandie. ⚠️ Valeurs en pixels assumées : la vignette a une largeur fixe (236px, 200px en mobile), un pourcentage de `top` se calculerait sur la HAUTEUR du parent et ne voudrait rien dire ici. */ /* ⚠️ Le panneau se cale sous l'IMAGE, calculé depuis la largeur de la vignette. `top: 143px` était juste pour une vignette de 236px et fausse partout ailleurs — même piège que la flèche et que le chiffre de classement. Le pourcentage se résout sur la largeur, exactement comme la hauteur de l'image, qui suit son rapport : 56,25 % = 9/16. */ .mplx-card-plus { position: absolute; left: -8%; top: calc(56.25% + 10px); z-index: 1; width: 116%; padding: 11px 12px 12px; background: var(--vanilla); border: 1px solid var(--border); box-shadow: 0 14px 34px rgba(var(--mplx-voile), .22); opacity: 0; visibility: hidden; /* Un fondu, sans glissement : même consigne que la vignette. Le délai reste, il évite de déplier dix fiches en balayant la rangée. */ transition: opacity .2s ease, visibility .2s; } .mplx-card:hover .mplx-card-plus, .mplx-card:focus-within .mplx-card-plus { opacity: 1; visibility: visible; transition-delay: .34s; } .mplx-card-actes { display: flex; align-items: center; gap: 8px; } .mplx-card-act { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 auto; padding: 0; border: 1px solid var(--teal); background: var(--vanilla); cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .15s ease; } .mplx-card-act:hover { transform: scale(1.09); } .mplx-card-act.is-play { background: var(--sage); border-color: var(--sage); } .mplx-card-act.is-play:hover { background: var(--teal); border-color: var(--teal); } .mplx-card-act.is-fiche:hover { background: var(--teal); } .mplx-card-act-play { display: block; width: 0; height: 0; margin-left: 2px; border-left: 9px solid var(--teal-dk); border-top: 6px solid transparent; border-bottom: 6px solid transparent; } .mplx-card-act.is-play:hover .mplx-card-act-play { border-left-color: var(--vanilla); } .mplx-card-act-ic { display: block; width: 8px; height: 8px; margin-left: -3px; border-right: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: rotate(-45deg); } .mplx-card-act.is-fiche:hover .mplx-card-act-ic { border-color: var(--vanilla); } .mplx-card-plus-etat { margin-left: auto; font-size: 12px; font-weight: 800; color: var(--teal); font-variant-numeric: tabular-nums; white-space: nowrap; } .mplx-card-plus-meta { margin-top: 7px; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── Pastille « Direct » ───────────────────────────────────────── */ .mplx-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; background: var(--red); } .mplx-badge-txt { font-size: 10px; font-weight: 800; letter-spacing:0; text-transform:none; color: var(--vanilla); } .mplx-badge-dot { width: 6px; height: 6px; background: var(--vanilla); border-radius: 0; animation: mplx-pulse 1.4s ease-in-out infinite; } .mplx-card-badge { position: absolute; top: 8px; left: 8px; } @keyframes mplx-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } } @media (prefers-reduced-motion: reduce) { .mplx-badge-dot { animation: none; } .mplx-load-spin { animation: none; } .mplx-hero.is-in .mplx-hero-txt > *, .mplx-rows.is-in > .mplx-row { animation: none; } .mplx-hero-img { transition: opacity .2s ease; transform: none; } .mplx-hero.is-ready .mplx-hero-img { transform: none; } .mplx-card-media, .mplx-card-img, .mplx-card-plus, .mplx-card-act, .mplx-card-jauge-in, .mplx-row-fleche { transition: none; } .mplx-card:hover .mplx-card-media, .mplx-card:focus-within .mplx-card-media { transform: none; transition: none; } .mplx-card:hover .mplx-card-img, .mplx-card:focus-within .mplx-card-img { transform: none; } .mplx-card:hover .mplx-card-plus, .mplx-card:focus-within .mplx-card-plus { transform: none; transition-delay: 0s; } .mplx-card-act:hover { transform: none; } .mplx-row-piste { scroll-behavior: auto; } } /* ⚠️ Au doigt (mobile, webview de l'app), les flèches RESTENT : une règle `display:none` ici les faisait disparaître dans l'app alors que Félix les demandait visibles partout (26/09, quatre retours). Ne pas la remettre. */ @media (hover: none) { /* Sans survol, la fiche dépliée ne s'ouvrirait jamais et masquerait le pied de vignette au premier appui : la vignette entière reste le seul geste. */ .mplx-card-plus { display: none; } } /* ── Écrans larges ────────────────────────────────────────────── */ /* ⚠️ La ligne unique n'arrive qu'à 1100px, pas à 760. Entre les deux, le titre, la recherche, le compteur, le menu et le compte ne tiennent pas côte à côte : les colonnes latérales, qui ne peuvent pas descendre sous la largeur de leur contenu, poussaient et le compteur venait se coller au bouton de recherche, au point de sembler en faire partie (Félix, 25/09). En dessous, on garde les deux lignes du mobile, qui ont toute la place. Colonnes en `auto 1fr auto` et non en fractions égales : une colonne latérale en `1fr` déborde dès que son contenu dépasse la fraction, et c'est exactement ce qui se passait. Ici chaque côté prend ce qu'il lui faut, la recherche occupe le reste et reste centrée par sa marge automatique. */ /* ⚠️ Même grille qu'en base, avec la zone « nav » : l'ancienne variante large (« brand right », d'avant la barre OTT) n'avait pas de place pour la navigation, qui tombait sur une seconde ligne à droite (Félix, 26/09 : « la barre de menu en desktop faut la revoir »). */ @media (min-width: 1100px) { .mplx-bar-in { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "brand nav right"; gap: 32px; padding: 14px var(--mplx-gouttiere); } .mplx-nav { gap: 10px; } .mplx-nav-lien { font-size: 14px; padding: 8px 12px; } .mplx-bar-right { justify-content: flex-end; } } /* Sous 620px la navigation secondaire s'efface : le bandeau doit rester lisible, le menu du site reste accessible en haut de page. */ /* Entre 620 et 1099px : deux lignes, mais la ligne du haut a la place de tout porter (titre, compteur, menu, compte). */ @media (min-width: 620px) and (max-width: 1099px) { .mplx-bar-in { gap: 12px 16px; } } @media (max-width: 619px) { /* La connexion reste : c'est le seul accès au compte sur cette page. Seul le nom s'efface, la pastille d'initiales suffit. */ .mplx-compte-nom { display: none; } .mplx-compte { padding: 4px; } .mplx-bar-right { gap: 8px; } /* (Le titre « Multiplex » est hors écran à toutes les largeurs depuis le 26/09 : c'est le premier lien de la navigation qui le porte.) */ .mplx-logo img { width: 28px; height: 28px; } .mplx-bar-in { gap: 8px 10px; } .mplx-nav { gap: 0; } .mplx-nav-lien { padding: 8px 7px; font-size: 12px; } .mplx-nav-lien.is-on::after { left: 7px; right: 7px; } } /* (Le tiroir plein écran a été retiré le 26/09.) */ body.admin-bar { --mplx-top-offset: 32px; } @media screen and (max-width: 782px) { body.admin-bar { --mplx-top-offset: 46px; } } @media (min-width: 900px) { .mplx-stage-info { padding: 22px 20px; } .mplx-soon-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1200px) { } /* ── Hauteur de bannière en mobile ───────────────────────────── 82vh sur un écran de 852px font 699px : la première rangée passait sous la ligne de flottaison et on arrivait sur une page sans un seul match. Chez Netflix la bannière mobile occupe la moitié de l'écran et les rangées se devinent dessous. 56 % de notre audience est sur mobile. ⚠️ Cette règle DOIT rester en dernier : voir la note ci-dessus. */ @media (max-width: 680px) { .mplx[data-vue="parcourir"].has-hero .mplx-hero { min-height: clamp(340px, 58vh, 520px); } } /* ── La scène : l'image en pleine largeur, les infos par-dessus ─ Félix, 26/09 : « netflix c'est pas comme ça, image en pleine largeur ». L'image occupait 53 % de l'écran avec un panneau de 533px à côté pour quatre lignes. Elle prend maintenant toute la largeur et les informations se posent dessus, en bas à gauche, exactement comme la bannière de « Parcourir ». ⚠️ Au-dessus de 900px seulement : sur un téléphone l'image ne fait que 220px de haut, un pavé d'informations posé dessus la recouvrirait en entier. En dessous, le panneau reste sous l'image. ⚠️ Ce bloc DOIT rester en fin de feuille : la requête média du panneau mobile se trouve très tôt dans le fichier et, à spécificité égale, c'est la règle la plus basse qui gagne. */ @media (min-width: 900px) { .mplx-stage-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 130px var(--mplx-gouttiere) 42px; z-index: 2; background: linear-gradient(to top, rgba(var(--mplx-voile), .97) 0%, rgba(var(--mplx-voile), .90) 30%, rgba(var(--mplx-voile), .60) 58%, rgba(var(--mplx-voile), .20) 84%, rgba(var(--mplx-voile), 0) 100%); /* Le clic doit atteindre la façade derrière le voile ; seuls les éléments eux-mêmes restent cliquables. */ pointer-events: none; } .mplx-stage-info > * { pointer-events: auto; max-width: 880px; } /* ⚠️ La composition du panneau latéral ne tient pas en pleine largeur. En colonne étroite, `1fr auto 1fr` centrait proprement le score entre les deux équipes ; étalé sur 880px, ça éclate « North Harbour », « 8 – 14 » et « Otago » aux trois coins, et le score — l'information du match — se retrouve à 26px sur une image plein écran (Félix, 26/09 : « la page intermédiaire elle est horrible »). On revient à UNE ligne, lue de gauche à droite, à la taille d'un titre de bannière. */ .mplx-stage-board { display: flex; align-items: baseline; justify-content: flex-start; gap: 16px; margin: 8px 0 0; } .mplx-stage-name { font-size: clamp(20px, 2.4vw, 38px); font-weight: 800; letter-spacing: -.8px; line-height: 1.05; overflow: visible; white-space: normal; } .mplx-stage-name--away { text-align: left; } .mplx-stage-pts { font-size: clamp(22px, 2.7vw, 42px); letter-spacing: -1px; line-height: 1.05; } .mplx-stage-comp { font-size: 13px; letter-spacing: 1.4px; } .mplx-stage-clock { margin-top: 10px; font-size: 14px; } .mplx-stage-events { margin-top: 12px; gap: 4px; } .mplx-stage-ev { font-size: 13px; } .mplx-stage-link { margin-top: 20px; padding: 12px 20px; font-size: 13px; } /* Sur un fond d'image, la liste des faits de jeu devient vite lourde : on garde les deux derniers, le reste est sur la fiche du match. */ .mplx-stage-events .mplx-stage-ev:nth-child(n+3) { display: none; } } /* ── Les deux boutons, sur image ─────────────────────────────── Félix, 26/09 : « c'est moche ». Un aplat vert vif posé sur une photo de diffuseur passe mal, quelle que soit la photo. Netflix ne met pas sa couleur de marque sur ses boutons de bannière : le principal est BLANC, le second translucide. Ce n'est pas renoncer à nos couleurs, c'est reconnaître qu'un bouton sur image doit être neutre pour rester lisible sur n'importe laquelle. ⚠️ La couleur des libellés vit sur le span : `.its-v2 a[class]` impose `color: inherit` aux liens (trois libellés verts sur vert le 25/09). */ .mplx-stage-actes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 22px 0 0; } /* ── Pouce (« j'aime ») ──────────────────────────────────────── Neutre sur image comme « Détails » ; vanilla plein une fois donné (charte teal/vanilla, 15/10). Le nombre disparaît tant qu'on ne l'a pas lu (span vide). */ .mplx-pouce { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border: 1px solid rgba(242, 229, 210, .35); background: transparent; color: var(--vanilla); font-family: var(--sans); font-size: 12px; font-weight: 800; cursor: pointer; transition: background .15s ease, border-color .15s ease; } .mplx-pouce:hover { border-color: var(--vanilla); background: rgba(242, 229, 210, .12); } .mplx-pouce-ic { display: inline-flex; width: 16px; height: 16px; } .mplx-pouce-ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .mplx-pouce-n { color: var(--vanilla); font-variant-numeric: tabular-nums; } .mplx-pouce-n:empty { display: none; } .mplx-pouce.is-on { background: var(--vanilla); border-color: var(--vanilla); color: var(--teal-dk); } .mplx-pouce.is-on .mplx-pouce-n { color: var(--teal-dk); } .mplx-pouce.is-on .mplx-pouce-ic svg { fill: var(--teal-dk); } .mplx-pouce.is-busy { opacity: .6; } /* Sur le lecteur, pendant la lecture seulement : à droite, à mi-hauteur, icône au-dessus du nombre (même dessin que dans le lecteur court). À la pause, c'est celui de la carte qui sert. */ .mplx-lecteur-pouce { position: absolute; right: 12px; top: 50%; z-index: 4; transform: translateY(-50%); flex-direction: column; gap: 2px; height: auto; min-width: 44px; padding: 8px 6px; border-color: transparent; border-radius: 0; background: rgba(var(--mplx-voile), .8); font-size: 11px; } .mplx-lecteur-pouce:hover { background: rgba(var(--mplx-voile), .96); border-color: transparent; } .mplx-lecteur-pouce.is-on { background: var(--vanilla); } .mplx-lecteur-pouce .mplx-pouce-ic, .mplx-lecteur-pouce .mplx-pouce-ic svg { width: 20px; height: 20px; } .mplx-stage:not(.is-lecture) .mplx-lecteur-pouce { display: none; } /* ── La barre s'efface pendant la lecture (voir le JS) ────────── En haut de page seulement : descendue sur les rangées (is-barre-collee), elle reste, on en a besoin pour naviguer. Le menu et la recherche restent atteignables par un passage de souris en haut de l'écran. */ .mplx[data-vue="lecteur"].is-lecture:not(.is-barre-collee) .mplx-bar { opacity: 0; transform: translateY(-10px); transition: opacity .25s ease, transform .25s ease; } .mplx[data-vue="lecteur"].is-lecture:not(.is-barre-collee) .mplx-bar:hover { opacity: 1; transform: none; } .mplx[data-vue="lecteur"].is-lecture:not(.is-barre-collee) .mplx-bar:focus-within { opacity: 1; transform: none; } /* ── Reprendre, depuis notre carte de pause ──────────────────── ⚠️ Il n'existe QUE pendant la carte de pause : ailleurs la vidéo n'est pas à l'arrêt, ou il n'y a pas de lecteur du tout. Le triangle est dessiné en bordures, pas en police d'icônes. */ /* ⚠️ Spécificité, pas ordre : le bloc d'apparence commun aux boutons pose un `display` lui aussi, et à une classe contre une c'est la règle la plus basse qui gagnait — le bouton restait affiché en permanence. Deux classes ici, quatre pour l'afficher, le résultat ne dépend plus de la position. */ .mplx-stage .mplx-stage-reprendre { display: none; } /* Vanilla plein (charte teal/vanilla, 15/10) : c'est NOTRE bouton lecture, celui de la bannière (Félix, 26/09 : « on peut pas remettre notre bouton play vert ? », vert retiré depuis). Les autres boutons sur image restent neutres. */ .mplx-stage.is-playing:not(.is-lecture) .mplx-stage-reprendre { display: inline-flex; align-items: center; gap: 9px; background: var(--vanilla); } .mplx-stage-reprendre::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent var(--teal-dk); } .mplx-stage-reprendre-txt { color: var(--teal-dk); } .mplx-stage-reprendre, .mplx-stage-details, .mplx-hero-cta { display: inline-flex; align-items: center; gap: 9px; padding: 12px 22px; border: 0; background: var(--vanilla); font-family: var(--sans); font-size: 13px; font-weight: 800; letter-spacing:0; text-transform:none; cursor: pointer; transition: background .18s ease, transform .18s ease; } .mplx-stage-details-txt, .mplx-hero-cta-txt { color: var(--teal-dk); } .mplx-stage-details:hover, .mplx-hero-cta:hover, .mplx-stage-reprendre:hover { background: var(--sage); transform: scale(1.03); } .mplx-stage-details:active, .mplx-hero-cta:active, .mplx-stage-reprendre:active { transform: scale(.98); } .mplx-hero-cta-ic { border-left-color: var(--teal-dk); } .mplx-stage-link, .mplx-hero-plus { display: inline-flex; align-items: center; gap: 9px; margin: 0; padding: 12px 22px; background: rgba(242, 229, 210, .18); font-size: 13px; font-weight: 800; letter-spacing:0; text-transform:none; transition: background .18s ease, transform .18s ease; } .mplx-stage-link-txt, .mplx-hero-plus-txt { color: var(--vanilla); } .mplx-stage-link:hover, .mplx-hero-plus:hover { background: rgba(242, 229, 210, .32); transform: scale(1.03); } /* Le libellé de compétition et la date passent en neutre : le vert sauge sur une photo verte de terrain se perdait. Le chrono garde sa couleur, lui : il signale le direct. */ .mplx-stage-comp { color: rgba(242, 229, 210, .8); } .mplx-live.is-replay .mplx-stage-clock { color: rgba(242, 229, 210, .72); } /* ── La fenêtre de détail ────────────────────────────────────── La fiche d'un service de streaming : un bandeau visuel qui porte le titre et les actions, puis les contenus proches en VIGNETTES. La liste de texte d'avant ressemblait à un tableau de gare (Félix, 26/09). Pas d'épisodes chez nous, donc trois rayons : les autres matchs des mêmes équipes, ceux de la même compétition, et nos vidéos. */ body.mplx-modal-ouverte { overflow: hidden; } .mplx-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: flex-start; justify-content: center; padding: 34px 24px; overflow-y: auto; overscroll-behavior: contain; } .mplx-modal-fond { position: fixed; inset: 0; background: rgba(var(--mplx-voile), .84); } /* ⚠️ C'est le CORPS de la fiche qui défile, pas la surimpression. Tant que c'était l'inverse, la barre d'onglets collante se calait sur le haut de l'ÉCRAN et flottait par-dessus le bandeau, le contenu passant derrière elle (Félix, 26/09). Un conteneur de défilement propre, et le collant retrouve son cadre. */ .mplx-modal-boite { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 900px; max-height: calc(100vh - 68px); margin: auto; background: var(--teal); box-shadow: 0 24px 60px rgba(0, 0, 0, .5); animation: mplx-monte .28s cubic-bezier(.2, .7, .3, 1) backwards; } .mplx-modal-fermer { position: absolute; top: 14px; right: 14px; z-index: 3; width: 36px; height: 36px; padding: 0; border: 0; background: rgba(var(--mplx-voile), .74); color: var(--vanilla); font-size: 15px; line-height: 1; cursor: pointer; transition: background .15s ease; } .mplx-modal-fermer:hover { background: rgba(var(--mplx-voile), .95); } /* ── Le bandeau ──────────────────────────────────────────────── Une image quand la diffusion en fournit une, sinon le tableau de score en grand : la fiche s'ouvre toujours sur un visuel. */ /* ⚠️ Une hauteur, pas un rapport : avec `aspect-ratio` plus un plafond de hauteur, c'est la LARGEUR qui cède — le bandeau tombait à 640px dans une boîte de 900 et laissait un vide à droite. L'image est en `cover`, elle se recadre toute seule. */ /* ⚠️ `min-height`, et le bandeau de texte dans le FLUX, pas en position absolue : depuis que le score, la date et le diffuseur y vivent, le contenu peut dépasser la hauteur d'image. En absolu il était rogné par l'`overflow: hidden`. Là, le cadre grandit avec son texte, et l'image reste en `cover` derrière. */ .mplx-modal-hero { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(280px, 40vh, 420px); overflow: hidden; background: var(--teal-dk); } .mplx-modal-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* ⚠️ Un voile VERT sur toute l'image, en plus du dégradé du bas. Les miniatures de match sont des pelouses en plein jour : le dégradé ne porte que le bas, et le titre restait posé sur du clair (Félix, 26/09). Notre teal plutôt que le noir du voile général : ici on veut teinter, pas seulement assombrir. */ .mplx-modal-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background: rgba(28, 61, 52, .38); pointer-events: none; } .mplx-modal-hero-score { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: clamp(38px, 7vw, 76px); font-weight: 800; letter-spacing: -2px; color: rgba(242, 229, 210, .13); font-variant-numeric: tabular-nums; } .mplx-modal-hero-bas { position: relative; z-index: 1; padding: 52px 30px 26px; background: linear-gradient(to top, rgba(var(--mplx-voile), .97) 0%, rgba(var(--mplx-voile), .88) 32%, rgba(var(--mplx-voile), .50) 64%, rgba(var(--mplx-voile), 0) 100%); } .mplx-modal-comp { margin: 0; font-size: 12px; font-weight: 800; letter-spacing:0; text-transform:none; color: var(--sage); } .mplx .mplx-modal p.mplx-modal-titre { margin: 6px 0 0; font-size: clamp(22px, 3.4vw, 36px); font-weight: 800; line-height: 1.08; letter-spacing: -.8px; color: var(--vanilla); } .mplx-modal-actes { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; } .mplx-modal-play, .mplx-modal-lien { display: inline-flex; align-items: center; gap: 9px; padding: 11px 20px; border: 0; font-family: var(--sans); font-size: 12px; font-weight: 800; letter-spacing:0; text-transform:none; cursor: pointer; transition: background .15s ease, transform .15s ease; } .mplx-modal-play { background: var(--vanilla); } .mplx-modal-play-txt { color: var(--teal-dk); } .mplx-modal-play::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent var(--teal-dk); } .mplx-modal-play:hover { background: var(--sage); transform: scale(1.03); } .mplx-modal-lien { background: rgba(242, 229, 210, .22); } .mplx-modal-lien-txt { color: var(--vanilla); } .mplx-modal-lien:hover { background: rgba(242, 229, 210, .34); transform: scale(1.03); } /* La fenêtre entière défile, comme sur n'importe quel service de streaming : le bandeau s'en va vers le haut et les rayons prennent la place. */ .mplx-modal-hero { flex: 0 0 auto; } .mplx-modal-corps { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 0 30px 30px; } .mplx-modal-meta { margin: 10px 0 0; font-size: 15px; font-weight: 700; color: var(--vanilla); font-variant-numeric: tabular-nums; } .mplx-modal-tv { margin: 5px 0 0; font-size: 13px; color: rgba(242, 229, 210, .78); } /* ── Les onglets de la fiche ─────────────────────────────────── Un soulignement, pas un bouton : la barre doit rester discrète sous le bandeau, qui porte déjà tout le poids visuel. */ /* ⚠️ Collante : la barre doit rester atteignable quand on descend dans le marquoir ou dans les rayons (Félix, 26/09). Fond plein obligatoire, sinon le contenu défile derrière et la barre devient illisible. Les marges négatives et le remplissage rendent le fond pleine largeur de la fenêtre. */ /* ⚠️ PLUS collante. Elle l'était pour rester atteignable en défilant, mais elle tranchait net la rangée d'étiquettes qui passait dessous, et ça se lit comme un défaut d'affichage (Félix, 26/09, deux fois). Un fondu n'aurait fait qu'adoucir la coupe. La fiche fait deux écrans : remonter pour changer d'onglet est un geste, pas une gêne. */ .mplx-modal-onglets { display: flex; gap: 22px; margin: 0 -30px 6px; padding: 14px 30px 0; background: var(--teal); border-bottom: 1px solid rgba(242, 229, 210, .16); } .mplx-modal-onglet { position: relative; padding: 0 0 11px; border: 0; background: none; font-family: var(--sans); font-size: 12px; font-weight: 800; letter-spacing:0; text-transform:none; cursor: pointer; } .mplx-modal-onglet-txt { color: rgba(242, 229, 210, .6); } .mplx-modal-onglet.is-on .mplx-modal-onglet-txt { color: var(--vanilla); } .mplx-modal-onglet.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--vanilla); } .mplx-modal-onglet:hover .mplx-modal-onglet-txt { color: var(--vanilla); } /* Le premier bloc d'une vue n'a pas besoin de sa marge haute : la barre d'onglets fait déjà la séparation. */ .mplx-modal-vue > .mplx-modal-bloc:first-child { margin-top: 20px; } .mplx-modal-bloc { margin: 26px 0 0; } /* ⚠️ La couleur est sur le SPAN, pas sur le titre : le scope `.its-v2` impose la sienne aux titres portant une classe, et les intitulés sortaient en `--teal`, soit la couleur du fond de la fenêtre. Invisibles. */ .mplx .mplx-modal h3.mplx-modal-soustitre { margin: 0 0 12px; font-size: 12px; font-weight: 800; letter-spacing:0; text-transform:none; } .mplx-modal-soustitre-txt { color: var(--sage); } /* ── Liste de définitions : « Où le voir » ───────────────────── Colonne d'intitulés à la largeur du plus long. Avec la grille des faits de jeu, taillée pour une minute, « Diffuseur TV » passait à la ligne et chevauchait sa valeur. */ .mplx-modal-def { display: grid; grid-template-columns: auto 1fr; gap: 4px 18px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid rgba(242, 229, 210, .1); font-size: 13px; } .mplx-modal-def:last-child { border-bottom: 0; } .mplx-modal-def-cle { font-size: 11px; font-weight: 800; letter-spacing:0; text-transform:none; color: var(--sage); white-space: nowrap; } .mplx-modal-def-val { color: var(--vanilla); } /* ── Le marquoir ─────────────────────────────────────────────── Trois colonnes : la minute, l'action, le score qu'elle produit. Un liseré de couleur dit le camp sans qu'on ait à lire l'abréviation. */ .mplx-modal-events { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; } .mplx-modal-ev { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: baseline; padding: 8px 12px 8px 10px; border-left: 3px solid transparent; background: rgba(242, 229, 210, .04); font-size: 13px; color: var(--vanilla); } .mplx-modal-ev.is-home { border-left-color: var(--vanilla); } .mplx-modal-ev.is-away { border-left-color: var(--sage); } .mplx-modal-ev-min { font-weight: 800; color: var(--sage); font-variant-numeric: tabular-nums; } .mplx-modal-ev-score { font-weight: 800; color: var(--vanilla); font-variant-numeric: tabular-nums; white-space: nowrap; } /* ── Un rayon de contenus proches ────────────────────────────── Des vignettes, pas des lignes : c'est la grammaire d'un service de streaming, et c'est la même que les rangées de la page. */ .mplx-modal-grille { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 16px 14px; } .mplx-modal-item { min-width: 0; } .mplx-modal-item-btn { display: block; width: 100%; padding: 0; border: 0; background: none; font-family: var(--sans); text-align: left; cursor: pointer; } .mplx-modal-item-media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--teal-dk); transition: transform .18s ease, box-shadow .18s ease; } .mplx-modal-item-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .mplx-modal-item-score { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; color: rgba(242, 229, 210, .5); font-variant-numeric: tabular-nums; } .mplx-modal-item-btn:hover .mplx-modal-item-media, .mplx-modal-item-btn:focus-visible .mplx-modal-item-media { transform: scale(1.04); box-shadow: 0 12px 28px rgba(var(--mplx-voile), .4); } .mplx-modal-item-body { display: block; padding: 8px 2px 0; } .mplx-modal-item-comp { display: block; font-size: 10px; font-weight: 800; letter-spacing:0; text-transform:none; color: rgba(242, 229, 210, .58); } .mplx-modal-item-teams { display: block; margin-top: 3px; font-size: 13px; font-weight: 700; line-height: 1.25; color: var(--vanilla); } .mplx-modal-item-etat { display: block; margin-top: 3px; font-size: 11px; font-weight: 700; color: var(--sage); font-variant-numeric: tabular-nums; } @media (max-width: 680px) { /* ⚠️ Plein écran, depuis le HAUT : en feuille remontant du bas, la fiche s'ouvrait à mi-écran avec la page encore visible au-dessus (Félix, 26/09 : « pourquoi s'ouvre si bas ? »). Sur un téléphone, une fiche est une page. */ .mplx-modal { padding: 0; align-items: flex-start; top: var(--mplx-top-offset, 0px); } .mplx-modal-boite { max-width: none; margin: 0; height: 100%; max-height: 100%; display: flex; flex-direction: column; } /* ⚠️ La croix sous la barre d'admin (via le décalage de .mplx-modal) et sous l'encoche de l'app : en plein écran elle passait dessous (Félix, 26/09 : « descends-la un peu »). Un peu plus grande, aussi. */ .mplx-modal-fermer { top: calc(16px + env(safe-area-inset-top, 0px)); right: 12px; width: 40px; height: 40px; font-size: 17px; } html.is-app .mplx-modal-boite { border-top: env(safe-area-inset-top, 0px) solid var(--teal-dk); } .mplx-modal-hero { flex: 0 0 auto; min-height: 200px; } .mplx-modal-hero-bas { padding: 56px 18px 18px; } .mplx-modal-corps { flex: 1 1 auto; overflow-y: auto; padding: 18px 18px 26px; } .mplx-modal-onglets { margin-inline: -18px; padding-inline: 18px; } .mplx-modal-grille { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px 10px; } } @media (prefers-reduced-motion: reduce) { .mplx-modal-boite { animation: none; } .mplx-stage-details, .mplx-stage-link, .mplx-hero-cta, .mplx-hero-plus { transition: none; } .mplx-stage-details:hover, .mplx-hero-cta:hover, .mplx-stage-link:hover, .mplx-hero-plus:hover { transform: none; } } /* ── Le voile latéral, sur toute la hauteur de l'image ───────── ⚠️ Posé sur le panneau d'infos, il s'arrêtait net à la hauteur où celui-ci commence : une arête horizontale traversait la photo de part en part. Un dégradé latéral doit couvrir toute l'image, sinon il se voit. `pointer-events: none` : le clic doit atteindre la façade vidéo dessous. */ @media (min-width: 900px) { .mplx-stage::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(var(--mplx-voile), .92) 0%, rgba(var(--mplx-voile), .78) 20%, rgba(var(--mplx-voile), .46) 44%, rgba(var(--mplx-voile), .14) 70%, rgba(var(--mplx-voile), 0) 100%); } } /* ── Vignette d'une vidéo éditoriale ─────────────────────────── Seconde famille du catalogue : les formats maison du Media Hub. Pas de score, pas de chrono, pas de pastille de direct — une image, un titre, une date. Elle réutilise la mécanique de la vignette de match (survol, ombre, zoom de l'image) mais pas son contenu. ⚠️ La zone cliquable est un , pas un