/* ===== Lecteur DÉPLIÉ repensé (charte B « Le fil ») : page crème (encre en sombre), à plat, ronds seulement pour la lecture et les points. Chargé après charte-b.css et charte-b-lecteur.css. Ne touche ni la barre du bas fermée ni les pages. Les couleurs viennent de --creme / --encre / --encre-2 / --encre-3 / --filet du site : sombre.css les inverse tout seul. ===== */ #vue.luna-lecteur { /* fond d'origine (dégradé de la pochette, luna.css) ; les règles ci-dessous lisent --encre (texte), --creme (fond du bouton plein : texte sombre dessus) */ --encre: var(--luna-creme); --encre-2: var(--luna-c2); --encre-3: color-mix(in oklab, var(--luna-creme) 30%, transparent); --filet: var(--luna-fil); --creme: var(--luna-fond2); } #vue.luna-lecteur[hidden], #vue.luna-lecteur [hidden] { display: none !important; } #vue.luna-lecteur .luna-bord, #vue.luna-lecteur .luna-voile, #vue.luna-lecteur .luna-poignee, #vue.luna-lecteur .luna-fermer, #vue.luna-lecteur .luna-mini, #vue.luna-lecteur .luna-sous, #vue.luna-lecteur .luna-dl, #vue.luna-lecteur .luna-eq, #vue.luna-lecteur .luna-encours .luna-x em, #vue.luna-lecteur .luna-ajout .luna-p, #vue.luna-lecteur .luna-ajout small, #vue.luna-lecteur .luna-ajout .luna-prix, #vue.luna-lecteur .luna-hum .luna-ch button i, #vue.luna-lecteur [data-ordre]:not(.luna-melanger) .luna-ic { display: none !important; } @media (min-width: 900px) { #vue.luna-lecteur .luna-melanger .luna-ic { display: none !important; } } /* bureau : inchangé ; au téléphone l'icône ⤨ de Mélanger doit se voir */ /* ----- « En écoute » ----- */ #vue .luna-etiq { margin: 0 !important; font: 500 13px/1.2 var(--texte); font-variant-caps: all-small-caps; letter-spacing: .08em; text-transform: none; color: var(--luna-etiq, var(--ambre)); } /* petites capitales espacées, ambre (7/10/25 : touches du haut du lecteur) */ #vue .luna-etiq #vLbl, #vue .luna-etiq span { color: var(--luna-etiq, var(--ambre)); letter-spacing: .08em; } #vue .luna-etiq i { width: 6px; height: 6px; position: relative; top: 1.2px; background: var(--ambre); box-shadow: none; animation: none; } /* pastille de 6 px, centrée sur la hauteur des petites capitales */ #vue .luna-etiq #vMode { margin-left: -4px; } /* le « · » à égale distance de « DIRECT » et d'« EXTRAIT » (écart du gap + interlettrage rattrapé) */ #vue.luna-lit .luna-etiq i { animation: luna-pouls 2s ease-in-out infinite; } /* pulse discret, seulement pendant la lecture */ @keyframes luna-pouls { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } @media (prefers-reduced-motion: reduce) { #vue.luna-lit .luna-etiq i { animation: none; } } #vue .luna-meta .luna-att { color: var(--encre-2); } /* « Single · 5 janv. 2026 · 4 min 50 » : date et durée en retrait, type plein, séparateurs ambre */ #vue .luna-meta .luna-sep { color: var(--ambre); } #vue .luna-meta.luna-prov { margin: 0 0 6px; font: 500 17px/1.3 var(--texte); letter-spacing: 0; text-transform: none; color: var(--encre); } #vue #vDuree { margin: 0 0 6px; } @media (max-width: 899px) { #vue #vDuree { margin: 0 0 14px; } } /* téléphone : le bouton « Ajouter » suit, autant d'air dessous que le titre au-dessus */ #vue .luna-prov a { color: var(--encre); text-decoration: none; } #vue .luna-prov a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; } #vue .luna-tags { display: flex; margin: 0; font: 500 16px/1.3 var(--texte); color: var(--encre); } #vue .luna-tags span { display: inline-flex; align-items: center; gap: 8px; } #vue .luna-tags span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ambre); flex: none; } #vue .luna-vi { margin: 2px 0 0; font: 400 15px/1.35 var(--texte); color: var(--encre-2); } #vue .luna-vi:empty { display: none; } /* barre fine : 2 px, partie lue en encre ; poignée carrée au survol */ #vue .luna-prog { margin-top: 20px; } #vue .luna-barre { height: 2px; background: var(--encre-3); } #vue .luna-barre i { background: var(--ambre); } /* partie jouée en ambre, comme le mini-lecteur */ #vue .luna-barre i::after { width: 10px; height: 10px; border-radius: 0; right: -5px; top: -4px; background: var(--ambre); opacity: 0; } #vue .luna-barre:hover i::after, #vue .luna-barre:focus-visible i::after { opacity: 1; } #vue .luna-temps { margin-top: 10px; font: 500 14px/1 var(--texte); color: var(--encre-2); } /* commandes : précédent, lecture (rond 64 encre plein), suivant ; ♥ à droite */ #vue .luna-cmd { display: flex; align-items: center; gap: 26px; margin-top: 18px; } #vue .luna-sk { color: var(--encre); width: 44px; height: 44px; } #vue .luna-sk svg { width: 28px; height: 28px; } #vue .luna-jouer { width: 64px; height: 64px; background: var(--encre); color: var(--creme) !important; box-shadow: none; } #vue .luna-jouer svg { width: 26px; height: 26px; } #vue .luna-lat { color: var(--encre); font: 500 14px/1 var(--texte); margin-left: auto; } #vue .luna-lat[aria-pressed="true"] { color: var(--encre); } #vue .luna-lat[aria-pressed="true"] .luna-ic { fill: var(--ambre); stroke: var(--encre); } /* achat : niveau 1 « Ajouter · 2 € » (pavé contour encre 48), niveau 2 « L'EP entier », état « ✓ Dans ton panier » */ #vue .luna-ajout { display: flex; justify-content: center; align-items: center; width: 100%; height: 48px; margin-top: 22px; padding: 0 28px; border: 1.5px solid var(--encre); background: transparent; color: var(--encre); opacity: 1; } #vue .luna-ajout .luna-x { flex: none; } #vue .luna-ajout .luna-x b { font: 600 16px/1 var(--texte); } #vue .luna-dans { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin: 22px 0 0; font: 500 16px/1.3 var(--texte); color: var(--encre-2); min-height: 48px; align-content: center; } #vue .luna-lien { font: 500 17px/1.3 var(--texte); color: var(--encre); text-decoration: none; text-align: left; } #vue .luna-lien:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; } #vue .luna-entier-ligne { display: flex; align-items: baseline; gap: 14px; margin: 18px 0 0; } #vue .luna-entier { display: inline; margin: 0; padding: 0; font: 600 15px/1.2 var(--texte); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; } #vue .luna-entier[disabled] { text-decoration: none; font-weight: 500; color: var(--encre-2); cursor: default; } #vue .luna-offre-l { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0; } #vue .luna-offre-note { margin: 6px 0 0; font: 400 14px/1.3 var(--texte); color: var(--encre-2); } #vue .luna-offre { display: block; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--filet); font: 500 15px/1.3 var(--texte); color: var(--encre-2); } #vue .luna-pts { display: inline-flex; gap: 7px; flex: none; } #vue .luna-pts i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--encre-3); box-sizing: border-box; } #vue .luna-pts i.luna-p { background: var(--encre); border-color: var(--encre); } /* ----- « Ensuite » ----- */ #vue .luna-volet { color: var(--encre); background: none; box-shadow: none; } #vue .luna-tete { display: block; padding: 0; } #vue .luna-tete h2 { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; width: auto; margin: 0 0 4px; padding-left: 14px; border-left: 6px solid var(--ambre); font: 900 40px/1 var(--titre); text-transform: uppercase; } #vue .luna-tete h2 small { display: inline; margin: 0; font: 500 14px/1.2 var(--texte); letter-spacing: 0; text-transform: none; color: var(--encre-2); } #vue .luna-regl { display: flex; flex-direction: column; padding: 14px 0 0; } #vue .luna-ligne { border-top: 1px solid var(--filet); padding: 10px 0; gap: 6px 18px; flex-wrap: wrap; } #vue .luna-regl > .luna-ligne:first-child { order: 2; border-top: 0; padding-top: 2px; } #vue .luna-ch { font: 600 14px/1 var(--texte); color: var(--encre-2); gap: 6px 14px; } #vue .luna-hum .luna-ch { gap: 6px 6px; flex-wrap: nowrap; } #vue .luna-ch button { color: var(--encre-2); padding: 8px 0; } #vue .luna-ch .luna-on, #vue .luna-ch button[aria-pressed="true"] { color: var(--encre); } #vue .luna-ch .luna-on .luna-ic, #vue .luna-ch button[aria-pressed="true"] .luna-ic { color: inherit; } #vue .luna-ch .luna-on::after, #vue .luna-ch button[aria-pressed="true"]::after { bottom: 0; background: var(--ambre); } #vue .luna-hum .luna-ch { flex: 1; justify-content: flex-start; } #vue .luna-ch #vCoeurs { margin-left: auto; } #vue .luna-ch #vCoeurs:disabled { opacity: 1; color: var(--encre-2); } /* ≥ 4,5:1 même à 0 */ #vue .luna-ch button:disabled { opacity: 1; color: var(--encre-2); cursor: default; } /* « Plus récents d'abord », rythmes sans titre : grisés par le curseur seulement, texte ≥ 4,5:1 (l'ancien opacity .4 donnait 2,24:1) */ #vue .luna-ch #vCoeurs .luna-ic { width: 18px; height: 18px; } #vue .luna-ch #vCoeurs.luna-on { color: var(--encre); } /* ligne en cours (même forme que les autres, trait ambre + point) */ #vue .luna-encours { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto 30px; gap: 0 12px; align-items: center; margin: 6px 0 0; padding: 10px var(--sb, 0px) 10px 14px; border-left: 6px solid var(--ambre); border-bottom: 1px solid var(--filet); background: none; } #vue .luna-encours img { width: 48px; height: 48px; } #vue .luna-encours .luna-x b { font: 600 16px/1.2 var(--texte); display: flex; align-items: center; gap: 8px; } #vue .luna-encours .luna-x b::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ambre); flex: none; } #vue .luna-encours .luna-x small { font: 400 14px/1.3 var(--texte); color: var(--encre-2); } #vue .luna-encours .luna-du { grid-column: 3; grid-row: 1; align-self: center; justify-self: end; font: 500 13px/1 var(--texte); color: var(--encre-2); font-variant-numeric: tabular-nums; } #vue .luna-ach-fixe { display: none; } /* l'achat du titre en cours est déjà dans la colonne de lecture : une seule fois */ #vue .luna-ach { font: 600 14px/1.2 var(--texte); color: var(--encre); white-space: nowrap; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; cursor: pointer; background: none; border: 0; padding: 6px 0; } #vue .luna-ach.luna-ok { font-weight: 500; color: var(--encre-2); text-decoration: none; cursor: default; } /* lignes de la liste */ #vue .luna-file { padding: 0; margin-top: 0; -webkit-mask-image: none; mask-image: none; } #vue .luna-file > li { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto 30px; grid-template-areas: "im x du po" "im x ac po"; gap: 0 12px; align-items: center; padding: 10px 0; background: none; border-bottom: 1px solid var(--filet); cursor: pointer; position: relative; } #vue .luna-file > li > img { grid-area: im; width: 48px; height: 48px; } #vue .luna-file > li > .luna-x { grid-area: x; } #vue .luna-file > li > .luna-du { grid-area: du; justify-self: end; align-self: end; font: 500 13px/1 var(--texte); color: var(--encre-2); font-variant-numeric: tabular-nums; } #vue .luna-file > li > .luna-ach { grid-area: ac; justify-self: end; align-self: start; } @media (max-width: 899px) { /* prix de lancement (« Ajouter · 1,50 € » : +18 px sur le bouton) : titre inchangé, la place vient de la poignée et de l'intervalle avant le bouton */ #vue .luna-file > li:has(> .luna-ach:not(.luna-ok)) { grid-template-columns: 48px minmax(0, 1fr) auto 18px; } #vue .luna-file > li > .luna-ach:not(.luna-ok) { margin-left: -7px; } #vue .luna-file > li:has(> .luna-ach:not(.luna-ok)) > .luna-poig { width: 22px; margin-right: -2px; justify-self: end; position: relative; } #vue .luna-file > li:has(> .luna-ach:not(.luna-ok)) > .luna-poig::before { content: ""; position: absolute; inset: 0 0 0 -8px; } /* zone tactile 30 px comme avant */ } #vue .luna-file > li > .luna-poig { grid-area: po; width: 30px; height: 40px; color: var(--encre-2); } /* ≥ 3:1 */ #vue .luna-file .luna-x b { font: 600 16px/1.2 var(--texte); white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--encre); } #vue .luna-file .luna-x small { font: 400 14px/1.3 var(--texte); color: var(--encre-2); margin-top: 2px; } #vue .luna-file .luna-x small .luna-r { color: var(--encre-2); } @media (max-width: 899px) { #vue .luna-file .luna-x small .luna-sous-hum { display: none; } } /* téléphone : sous-titre = sortie seule, sans l'humeur */ #vue .luna-file > li > .luna-pl { position: absolute; left: 4px; top: 50%; margin-top: -20px; width: 40px; height: 40px; border: 1.5px solid var(--encre); border-radius: 50%; background: var(--creme); color: var(--encre); display: none; place-items: center; pointer-events: none; } #vue .luna-file > li > .luna-pl svg { width: 16px; height: 16px; margin-left: 2px; } @media (hover: hover) { #vue .luna-file > li:hover > .luna-pl { display: grid; } #vue .luna-file > li:hover { background: color-mix(in oklab, var(--encre) 4%, transparent); } } /* 24/10/2026 : au tactile, plus de ▶ sur la pochette, la ligne entière lance le titre ; le ▶ n'apparaît qu'au survol à la souris (choix de Brice) */ #vue .luna-file > li.luna-prise { background: var(--creme); margin: 0 -10px; padding: 10px; box-shadow: 0 0 0 1.5px var(--encre); transform: none; } #vue .luna-file > li.luna-trou::before, #vue .luna-file > li.luna-trou::after { background: var(--ambre); } #vue .luna-file > li.luna-vide { color: var(--encre-2); display: block; cursor: default; } #vue .luna-panierlien { display: block; flex: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--encre-3); font: 600 16px/1.3 var(--texte); } /* ===== Ordinateur ===== */ @media (min-width: 900px) { #vue .luna-hautlbl, #vue .luna-aime { display: none; } #vue .luna-lat-aime { display: flex; } #vue .luna-cmd { gap: 0; } /* précédent · lecture · suivant · ♥ tiennent dans la colonne (les marges de 24 px suffisent) : sans cela le ♥ débordait sous « Ensuite » */ #vue .luna-princ { display: flex; flex-direction: column; min-width: 0; min-height: 0; } #vue .luna-cote { grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; padding: 48px 28px 24px; } /* pochette 55 vw d'origine : la colonne « Ensuite » prend 330 px */ #vue .luna-file > li { grid-template-areas: "im x du po" "im ac ac po"; } #vue .luna-file > li > .luna-ach { justify-self: start; align-self: start; padding: 2px 0 0; } #vue .luna-encours { grid-template-columns: 48px minmax(0, 1fr) auto 30px; } #vue .luna-encours .luna-ach-fixe { grid-column: 2; justify-self: start; } #vue .luna-corps { position: static; padding: 0; display: flex; flex-direction: column; flex: 1; } #vue .luna-prog { margin-top: auto; } #vue .luna-suivant { display: none; } #vue .luna-volet { position: static; display: flex; flex-direction: column; min-height: 0; padding-left: 20px; border-left: 1px solid var(--filet); } #vue .luna-encours { display: grid; } #vue .luna-file { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } #vue .luna-tete h2 { font-size: 40px; } } /* ===== Téléphone : plein écran, tout dans une seule vue qui défile ===== */ @media (max-width: 899px) { #vue.luna-lecteur[open] { overflow-anchor: none; display: block; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } #vue .luna-hautlbl { display: none; } /* pas de barre ajoutée : le haut est celui d'origine (pochette + voile, boutons ronds, bande Safari) */ #vue .luna-reduire, #vue .luna-aime { position: fixed; color: #fff; z-index: 5; } /* d'origine (luna.css), mais fixes : la vue défile */ #vue.luna-lecteur .luna-bord { display: block !important; } #vue .luna-lat-aime { display: none; } #vue .luna-poch { position: relative; width: 100%; height: min(100vw, 400px); margin: 0; } #vue .luna-cote { display: block; padding: 0; } #vue .luna-corps { position: relative; z-index: 2; padding: 0 22px; margin-top: -35.3px; margin-bottom: calc(-1 * (24px + env(safe-area-inset-bottom, 0px))); } /* luna.css décale ce bloc de bottom: 24px + zone sûre vers le haut (position: relative) sans libérer la place : 24 px de vide en trop au-dessus de « Ensuite » ; la marge négative rend cette place */ /* le titre remonte sur le fondu de la pochette, comme à l'origine (même haut de titre : 0 px d'écart) */ #vue .luna-etiq { margin: var(--fb-reserve, 0px) 0 0 !important; } /* titre d'une ligne : réserve d'une ligne, comme à l'origine (le bas du titre ne bouge pas) */ /* Mouvement réduit : la règle générale (base.css : transition-duration .01 ms sur tout) transformait le calcul de la réserve et de la marge du titre en un glissement de 2 images (le titre d'une ligne « descendait » d'une ligne au lancement). Ici : aucun glissement, la mise en page est posée d'emblée. */ #vue .luna-corps, #vue .luna-etiq, #vue .luna-titre { transition: none !important; } #vue .luna-cmd { justify-content: center; gap: 36px; margin-top: 14px; } #vue .luna-ajout { margin-top: 18px; } #vue .luna-suivant { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 18px; padding: 12px 0; border-top: 1px solid var(--filet); } #vue .luna-suivant img { width: 48px; height: 48px; box-shadow: none; } #vue .luna-suivant .luna-x em { color: var(--encre-2); font: 500 13px/1 var(--texte); letter-spacing: 0; text-transform: none; } #vue .luna-suivant .luna-x b { font: 600 16px/1.2 var(--texte); } #vue .luna-suivant .luna-x small { color: var(--encre-2); } #vue .luna-voir { color: var(--encre); font: 500 15px/1 var(--texte); } #vue .luna-volet { position: static; display: flex; flex-direction: column; padding: 28px 20px calc(40px + env(safe-area-inset-bottom, 0px)); } #vue .luna-tete h2 { font-size: 30px; } #vue .luna-file { overflow: visible; } #vue .luna-file > li { grid-template-columns: 48px minmax(0, 1fr) auto 30px; } /* Téléphone : on ne garde que la ligne Ensuite / Coups de cœur / Déjà écoutés (+ Mélanger) ; la spécificité (#vue.luna-lecteur) suffit, sans !important */ #vue.luna-lecteur .luna-suivant, #vue.luna-lecteur .luna-voile, #vue.luna-lecteur .luna-poignee, #vue.luna-lecteur .luna-hum, #vue.luna-lecteur #vLegende, #vue.luna-lecteur .luna-encours { display: none; } } /* ===== Passe 3 (21/10) ===== */ /* Filtres et ordre : l'état actif = soulignement ambre 3 px (l'ambre = un état) ; « Tout » est actif tant qu'aucun filtre ne l'est */ #vue .luna-ch button { position: relative; } #vue .luna-ch .luna-on::after, #vue .luna-ch button[aria-pressed="true"]::after, #vue .luna-ch .luna-def::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 3px; background: var(--ambre); } #vue .luna-ch .luna-def { color: var(--encre); } /* Cibles au doigt ≥ 44 px, sans changer l'aspect (zone de toucher en pseudo-élément) */ @media (max-width: 899px), (pointer: coarse) { #vue .luna-ach, #vue .luna-lien, #vue .luna-entier, #vue .luna-barre { position: relative; } #vue .luna-ach::before, #vue .luna-lien::before { content: ""; position: absolute; inset: -10px -8px; } #vue .luna-entier::before { content: ""; position: absolute; inset: -14px -8px; } #vue .luna-barre::before { content: ""; position: absolute; left: 0; right: 0; top: -21px; bottom: -21px; } #vue .luna-ch button::before { content: ""; position: absolute; inset: -7px -5px; } } /* ===== Passe 4 : une seule ligne « Ensuite · ♥ Coups de cœur · Récents · ⤨ » (les humeurs et « Plus récents d'abord » restent sur la page Musique) ===== */ #vue .luna-regl { display: block; padding: 6px 0 0; } #vue .luna-onglets { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--filet); } #vue .luna-ong-def { flex: 1; min-width: 0; display: flex; gap: 0 18px; } /* trois onglets tiennent sur une ligne : ni défilement, ni fondu */ #vue .luna-ong-c, #vue .luna-ong-rc { display: none; } @container (max-width: 329px) { #vue .luna-ong-rl { display: none; } #vue .luna-ong-rc { display: inline; } } /* « Déjà écoutés » en entier dès que la place le permet, sinon « Écoutés » */ #vue .luna-volet { container-type: inline-size; } @container (max-width: 372px) { #vue .luna-ong-l { display: none; } #vue .luna-ong-c { display: inline; } #vue .luna-ong-def { gap: 0 14px; } } #vue .luna-onglets button[data-ong] { position: relative; flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0; font: 600 16px/1 var(--texte); color: var(--encre-2); white-space: nowrap; } #vue .luna-onglets button[data-ong][aria-pressed="true"] { color: var(--encre); } #vue .luna-onglets button[data-ong][aria-pressed="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; background: var(--ambre); } #vue .luna-onglets button[data-ong] .luna-ic { width: 18px; height: 18px; } @container (max-width: 300px) { #vue .luna-ong-def { gap: 0 8px; } #vue .luna-onglets button[data-ong] { gap: 5px; } } /* 320 px : tout tient sur la ligne */ #vue .luna-melanger { flex: none; width: 44px; height: 44px; display: grid; place-items: center; color: var(--encre-2); } #vue .luna-melanger .luna-ic { width: 22px; height: 22px; } #vue .luna-melanger[aria-pressed="true"] { color: var(--ambre); } #vue .luna-file > li.luna-ong-note { margin: 0; padding: 14px 0 0; border: 0; font: 400 15px/1.4 var(--texte); color: var(--encre-2); display: block; cursor: default; } #vue .luna-garde { margin: 10px 0 0; font: 600 15px/1.3 var(--texte); color: var(--encre); } /* ♥ du titre en cours : plus grand, bien visible */ #vue .luna-aime .luna-ic, #vue .luna-lat-aime .luna-ic { width: 28px; height: 28px; } /* « Voir tout » ≡ de la ligne « Ensuite » : retiré de la vue dépliée (la liste est dessous) */ #vue .luna-voir { display: none; } /* Passe 5 : légende de l'onglet (hauteur réservée), bulle du ♥ du lecteur fermé */ #vue .luna-legende { margin: 0; padding: 10px 0 0; min-height: 3.1em; font: 400 14px/1.35 var(--texte); color: var(--encre-2); } #bulleCoeur { position: fixed; z-index: 2147483000; max-width: min(300px, calc(100vw - 16px)); padding: 11px 14px; background: var(--encre, #1e1220); color: var(--creme, #f5f3ee); font: 500 14px/1.35 var(--texte); } /* Passe 6 : rythme, voix et instruments du titre en cours sur UNE ligne (retour à la ligne naturel si ça dépasse, pas de troncature) */ @media (max-width: 899px) { #vue .luna-tags, #vue .luna-vi { display: inline; font: 400 15px/1.35 var(--texte); } /* rythme et voix : même police, même taille, même ligne de base */ #vue .luna-tags span { display: inline; } /* (inline-flex : la puce vide décalait la ligne de base) */ #vue .luna-tags span::before { display: inline-block; vertical-align: .05em; margin-right: 8px; } /* puce centrée entre le milieu des minuscules et celui des capitales */ #vue .luna-tags:has(+ .luna-vi:not(:empty))::after { content: " · "; font: 400 15px/1.35 var(--texte); color: var(--encre-2); } } /* Collection (FR et EN : charte-b.css n'est pas chargé en EN) : un seul bouton ; case à plat « clé USB » juste au-dessus (zone de toucher 44 px) */ html body .usb-bloc { display: flex; flex-direction: column; align-items: flex-start; gap: 0; width: 400px; max-width: 100%; } /* même composant que la case « clé USB » du panier (base.css l.244-249), repris ici pour la page Collection */ .usb-bloc .case { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; margin-top: 0; padding-block: 8px; font-size: 15px; line-height: 1.35; cursor: pointer; } .usb-bloc .case input { appearance: none; -webkit-appearance: none; flex: 0 0 24px; width: 24px; height: 24px; margin: 0; border: 1.5px solid var(--encre); border-radius: 0; background: transparent; cursor: pointer; display: grid; place-items: center; } .usb-bloc .case input:checked { background: var(--encre); } .usb-bloc .case input:checked::after { content: ""; width: 10px; height: 5px; border-left: 2px solid var(--creme); border-bottom: 2px solid var(--creme); transform: rotate(-45deg) translate(1px, -1px); } .usb-bloc .case input:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; } .usb-bloc .coll-btn { margin-top: 8px; } /* Bouton de la lettre (« Recevoir mon titre » / « Get my track », FR et EN, toutes pages) : 17 px et même graisse que les autres liens à flèche ; flèche proportionnée ; zone de toucher gardée (52 px au téléphone) */ html body .acc-lettre .lettre .fleche { font-size: 17px; font-weight: 500; } html body .acc-lettre .lettre .fleche svg { width: 18px; height: 18px; } /* ===== Lecteur déplié, téléphone : « fondu » (22/10). Étiquette, titre et « Ajouter » posés sur le fondu du bas de pochette ; lecteur.js (creerVues) place #vAjout et #vDans sous le titre et pose --va-h. ===== */ @media (max-width: 899px) { #vue .luna-corps { margin-top: calc(-1 * var(--va-h, 190px)) !important; } #vue .luna-corps .luna-etiq { margin: 0 !important; } #vue .luna-corps .luna-titre { margin: 8px 0 14px; } #vue .luna-corps > #vAjout { margin-top: 0; } #vue .luna-corps > #vDans { margin: 0; } #vue .luna-corps > #vSortie { margin-top: 22px; } /* pochette assombrie (maquette v5 validée le 22/10) : ombre presque noire teintée à 22 % de --luna-fond, puis léger fond en fondu sur le titre ; --va-h = bas de la pochette au haut du titre (lecteur.js) */ #vue .luna-poch::after { background: linear-gradient(180deg, var(--luna-haut, rgba(0,0,0,.42)) 0, color-mix(in oklab, var(--luna-haut, #000) 60%, transparent) 36px, transparent 130px), linear-gradient(to top, var(--luna-fond) 0px, var(--luna-fond) 90px, color-mix(in oklab, var(--luna-fond) 93%, transparent) 103px, color-mix(in oklab, var(--luna-fond) 81%, transparent) 116px, color-mix(in oklab, var(--luna-fond) 63%, transparent) 130px, color-mix(in oklab, var(--luna-fond) 32%, transparent) max(calc(var(--va-h, 190px) - 24px), 142px), color-mix(in oklab, var(--luna-fond) 10%, transparent) calc(var(--va-h, 190px) - 6px), transparent calc(var(--va-h, 190px) + 6px)), linear-gradient(to top, color-mix(in oklab, color-mix(in oklab, var(--luna-fond) 22%, #000) 77%, transparent) 0px, color-mix(in oklab, color-mix(in oklab, var(--luna-fond) 22%, #000) 77%, transparent) calc(var(--va-h, 190px) + 8px), color-mix(in oklab, color-mix(in oklab, var(--luna-fond) 22%, #000) 72%, transparent) calc(var(--va-h, 190px) + 25px), color-mix(in oklab, color-mix(in oklab, var(--luna-fond) 22%, #000) 64%, transparent) calc(var(--va-h, 190px) + 32px), color-mix(in oklab, color-mix(in oklab, var(--luna-fond) 22%, #000) 50%, transparent) calc(var(--va-h, 190px) + 40px), color-mix(in oklab, color-mix(in oklab, var(--luna-fond) 22%, #000) 33%, transparent) calc(var(--va-h, 190px) + 48px), color-mix(in oklab, color-mix(in oklab, var(--luna-fond) 22%, #000) 18%, transparent) calc(var(--va-h, 190px) + 56px), color-mix(in oklab, color-mix(in oklab, var(--luna-fond) 22%, #000) 6%, transparent) calc(var(--va-h, 190px) + 64px), transparent calc(var(--va-h, 190px) + 72px)); } } /* iPhone SE (écran ≤ 600 px de haut) : marge resserrée sous la pochette pour que la ligne « Ensuite » apparaisse au premier écran */ @media (max-width: 899px) and (max-height: 600px) { #vue .luna-corps > #vSortie { margin-top: 8px; } } /* Volet déplié : humeurs (texte, actif = soulignement ambre) puis « Plus récents d'abord » à droite, même ligne si la place le permet */ #vue .luna-hum { display: flex; align-items: center; justify-content: space-between; } #vue .luna-hum #vHumeurs { flex: 0 1 auto; } #vue .luna-hum #vOrdreLigne { flex: none; margin-left: auto; } /* Indice « Swipe ↑ » : téléphone tactile seulement, à droite de la ligne « Ensuite », même gris que la note « Les titres d'EP… » */ #vue .luna-swipe { display: none; } @media (max-width: 899px) and (pointer: coarse) { #vue .luna-tete h2 { position: relative; } #vue .luna-tete h2 .luna-swipe { display: inline-flex; align-items: center; gap: 4px; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font: 400 13px/1 var(--texte); letter-spacing: 0; text-transform: none; color: var(--encre-2); white-space: nowrap; pointer-events: none; } #vue .luna-tete h2 { flex-wrap: nowrap; justify-content: flex-start; white-space: nowrap; padding-right: 76px; } /* ENSUITE · compteur à gauche, l'indice réservé à droite */ #vue .luna-tete h2 small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* si la place manque, seul le compteur se coupe */ #vue .luna-swipe svg { width: 7px; height: 8.5px; display: block; } #vue .luna-swipe svg path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } } /* Ligne de « Ensuite » qui lance la lecture : elle s'éclaire (accent, à plat) puis s'éteint, ~600 ms (lecteur.js : luna-eclat, phase reprise si la liste est reconstruite) */ @keyframes luna-eclat { 0% { background-color: transparent; } 20% { background-color: color-mix(in srgb, var(--ambre) 46%, #000); } 100% { background-color: transparent; } } /* ambre mêlé de noir (≈ 107, 78, 27), opaque au pic : l'ambre transparent sur le bleu du lecteur virait au gris-kaki */ @keyframes luna-eclat-txt { 0% { color: var(--encre-2); } 20% { color: rgba(255, 255, 255, .85); } 100% { color: var(--encre-2); } } /* artiste et durée restent lisibles (≥ 4,5:1) sur l'ambre sombre */ @keyframes luna-eclat-sec { 0%, 100% { background-color: color-mix(in srgb, var(--ambre) 46%, #000); } } @keyframes luna-eclat-txt-sec { 0%, 100% { color: rgba(255, 255, 255, .85); } } #vue .luna-file > li.luna-eclat, #vue .luna-encours.luna-eclat { animation: luna-eclat 600ms linear 1; } #vue .luna-file > li.luna-eclat .luna-x small, #vue .luna-file > li.luna-eclat > .luna-du { animation: luna-eclat-txt 600ms linear 1; animation-delay: inherit; } @media (prefers-reduced-motion: reduce) { #vue .luna-file > li.luna-eclat, #vue .luna-encours.luna-eclat { animation: luna-eclat-sec 400ms linear 1 !important; } /* l'éclat reste (sans progression) malgré la règle globale base.css:287 */ #vue .luna-file > li.luna-eclat .luna-x small, #vue .luna-file > li.luna-eclat > .luna-du { animation: luna-eclat-txt-sec 400ms linear 1 !important; } }