/* ═══════════════════════════════════════════════════════════ LE RADAR — Le fil étudiant du Québec Design éditorial, texte d'abord. Pensé pour les jeunes adultes : typographie expressive, identité couleur par source, sobre et clair. ═══════════════════════════════════════════════════════════ */ :root { --bg: #ffffff; --bg-soft: #f6f6f4; --ink: #16181c; --ink-soft: #44474d; --muted: #80858c; --rule: #e7e7e3; --rule-strong: #14161a; --accent: #6c2163; /* pourpre de marque (bleu QC + rouge Canada) */ --accent-dark: #4f1749; --live: #c8102e; /* rouge « en direct » — sémantique diffusion live */ --live-dark: #9c0c24; --radio: #003da5; /* bleu officiel du Québec — volet radio / syntoniseur */ --radio-bright: #5d9be0; /* version éclaircie pour le bandeau sombre */ --tuner-bg: #111317; --serif: "Source Serif 4", Georgia, "Times New Roman", serif; --sans: "Inter", system-ui, -apple-system, sans-serif; --maxw: 800px; --pad: 24px; color-scheme: light; } [data-theme="dark"] { --bg: #0e0f12; --bg-soft: #181a1e; --ink: #f1f2f4; --ink-soft: #c2c6cd; --muted: #888d96; --rule: #26282d; --rule-strong: #f1f2f4; --tuner-bg: #1a1c21; --accent: #cf7ec1; /* pourpre éclairci pour lisibilité sur fond sombre */ --accent-dark: #b85fa8; color-scheme: dark; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; /* Empêche le pan horizontal (iPad portrait, textes longs, RTL). overflow-x:clip seul est mal géré sur certains Safari → hidden d’abord. */ overflow-x: hidden; overflow-x: clip; max-width: 100%; width: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background 240ms ease, color 240ms ease; overflow-x: hidden; overflow-x: clip; max-width: 100%; width: 100%; position: relative; /* iPad : pas de glissement latéral du document */ overscroll-behavior-x: none; touch-action: pan-y; } /* Conteneurs principaux : jamais plus larges que le viewport */ .masthead, .masthead-inner, .tuner, .tuner-inner, .wire, .filters-panel, .news-list, .news-hero, .brief-rail, .news-tail { max-width: 100%; min-width: 0; } .masthead, .tuner, .wire { overflow-x: clip; } /* * Scripts RTL (arabe, farsi, hébreu, ourdou) : * le shell UI reste LTR (pas de dir=rtl sur ), seul le contenu * éditorial lit de droite à gauche — évite le basculement du tuner/filtres. */ html[data-script-dir="rtl"] .wire-title, html[data-script-dir="rtl"] .wire-status, html[data-script-dir="rtl"] .news-updated, html[data-script-dir="rtl"] .article-title, html[data-script-dir="rtl"] .article-brief, html[data-script-dir="rtl"] .article-byline, html[data-script-dir="rtl"] .article-eyebrow, html[data-script-dir="rtl"] .article-time, html[data-script-dir="rtl"] .article-meta, html[data-script-dir="rtl"] .filters-toggle__label, html[data-script-dir="rtl"] .filters-compact__text { direction: rtl; unicode-bidi: plaintext; text-align: start; } /* Slogan sous le wordmark : RTL pour la lecture, mais toujours centré (text-align:start le collait à droite en arabe / farsi / hébreu). */ html[data-script-dir="rtl"] .wordmark-full { direction: rtl; unicode-bidi: plaintext; text-align: center; } html[data-script-dir="rtl"] .wordmark-mark { /* Titre de marque centré ; bidi naturel pour le texte traduit */ unicode-bidi: plaintext; text-align: center; } /* Filet si un ancien cache a encore dir=rtl sur */ html[dir="rtl"] { direction: ltr; /* force le chrome en LTR */ } html[dir="rtl"] body { overflow-x: clip; } a { color: inherit; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .hidden { display: none !important; } /* ─────────────── MASTHEAD ─────────────── */ .masthead { border-bottom: 2px solid var(--rule-strong); } /* En thème sombre, --rule-strong est presque blanc : ce trait apparaissait comme une ligne blanche juste au-dessus du module radio. On l'adoucit. */ [data-theme="dark"] .masthead { border-bottom-color: var(--rule); } .masthead-inner { max-width: var(--maxw); margin: 0 auto; padding: 12px var(--pad) 16px; } .masthead-top { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); padding-bottom: 12px; border-bottom: 1px solid var(--rule); } .masthead-date { font-weight: 600; } .masthead-actions { display: flex; align-items: center; gap: 8px; } .masthead-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--rule); border-radius: 999px; background: transparent; color: var(--ink-soft); padding: 0; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: border-color 140ms ease, color 140ms ease, transform 140ms ease, background 140ms ease; } .masthead-icon svg { width: 15px; height: 15px; } .theme-toggle { cursor: pointer; } @media (hover: hover) and (pointer: fine) { .theme-toggle:hover, .masthead-home:hover, .masthead-rss:hover, .masthead-solitaire:hover, .masthead-coffee:hover { border-color: var(--accent); color: var(--accent); } .masthead-ataraxia:hover { border-color: #c8102e; background: color-mix(in srgb, #c8102e 10%, transparent); } } .theme-toggle:active, .masthead-home:active, .masthead-rss:active, .masthead-ataraxia:active, .masthead-solitaire:active, .masthead-coffee:active { transform: scale(0.9); } /* Ataraxia : seul bouton rouge du header (tomate Pomodoro, hors thème accent). */ .masthead-ataraxia { border-color: var(--rule); } .masthead-ataraxia .masthead-tomato, .masthead-solitaire .masthead-card, .masthead-coffee .masthead-coffee-emoji { font-size: 15px; line-height: 1; display: block; color: unset; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; } .masthead-home.is-active, .masthead-home[aria-current="page"] { border-color: color-mix(in srgb, var(--accent) 55%, var(--rule)); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); } .masthead-icon:focus { outline: none; } .masthead-icon:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .masthead-brand { padding-top: 16px; text-align: center; max-width: 100%; min-width: 0; } .wordmark { text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; max-width: 100%; box-sizing: border-box; padding: 0 2px; } /* * Hiérarchie typo (tous viewports) : LE RADAR > titre À la une > .wire-title. * --radar-wordmark-size max et min restent strictement au-dessus de * --radar-lead-title-size, dont le plancher reste lui-même au-dessus du * .wire-title « Le fil étudiant » (1.4rem). */ :root { /* LE-RADAR.ca : un cran au-dessus de l’ancien « LE RADAR » */ --radar-wordmark-size: clamp(2.05rem, 6.8vw + 0.3rem, 4.25rem); --radar-lead-title-size: clamp(1.55rem, 4.1vw + 0.15rem, 2.55rem); } /* block (pas flex) : le texte traduit (ex. inuktitut) peut se couper sur plusieurs lignes sans déborder du viewport mobile/tablette. */ .wordmark-mark { font-family: var(--serif); font-weight: 700; font-size: var(--radar-wordmark-size); letter-spacing: -0.02em; line-height: 1.05; color: var(--ink); display: block; width: 100%; max-width: 100%; text-align: center; overflow-wrap: anywhere; word-break: break-word; hyphens: none; box-sizing: border-box; } .wordmark-brand { white-space: nowrap; } .wordmark-emoji { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-weight: 400; font-size: 0.92em; line-height: 1; display: inline; white-space: nowrap; } .wordmark-full { font-size: clamp(10px, 2.6vw, 11.5px); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 600; line-height: 1.45; text-align: center; max-width: min(40rem, 100%); width: 100%; box-sizing: border-box; padding: 0 4px; white-space: normal; overflow-wrap: anywhere; word-break: break-word; hyphens: none; } /* Scripts longs (inuktitut, arabe, farsi, ourdou, hébreu…) : resserrer le wordmark */ html[lang="iu"] .wordmark-mark, html[data-translate="iu"] .wordmark-mark, html[data-translate="iu-latn"] .wordmark-mark, html[lang="ar"] .wordmark-mark, html[data-translate="ar"] .wordmark-mark, html[data-script-dir="rtl"] .wordmark-mark { /* Toujours ≥ lead-title (max 2.1) */ font-size: clamp(1.55rem, 5.2vw + 0.25rem, 2.95rem); letter-spacing: 0; line-height: 1.12; } html[lang="iu"], html[data-translate="iu"], html[data-translate="iu-latn"], html[lang="ar"], html[data-translate="ar"], html[data-script-dir="rtl"] { --radar-lead-title-size: clamp(1.2rem, 3.6vw + 0.1rem, 2.1rem); } html[lang="iu"] .wordmark-full, html[data-translate="iu"] .wordmark-full, html[data-translate="iu-latn"] .wordmark-full, html[lang="ar"] .wordmark-full, html[data-translate="ar"] .wordmark-full, html[data-script-dir="rtl"] .wordmark-full { letter-spacing: 0.04em; font-size: clamp(10px, 2.4vw, 11px); line-height: 1.5; } @media (max-width: 720px) { :root { --radar-wordmark-size: clamp(1.85rem, 7.6vw, 2.95rem); /* Plancher > .wire-title (1.4rem) et < --radar-wordmark-size. */ --radar-lead-title-size: clamp(1.55rem, 4.8vw, 1.85rem); } .wordmark-mark { line-height: 1.08; } .wordmark-full { letter-spacing: 0.06em; font-size: clamp(9.5px, 2.8vw, 11px); } html[lang="iu"] .wordmark-mark, html[data-translate="iu"] .wordmark-mark, html[data-translate="iu-latn"] .wordmark-mark { font-size: clamp(1.45rem, 5.8vw, 2.2rem); } html[lang="iu"], html[data-translate="iu"], html[data-translate="iu-latn"] { --radar-lead-title-size: clamp(1.15rem, 4vw, 1.65rem); } } @media (min-width: 721px) and (max-width: 1024px) { :root { --radar-wordmark-size: clamp(2.15rem, 4.8vw, 3.6rem); --radar-lead-title-size: clamp(1.45rem, 2.8vw, 2.35rem); } html[lang="iu"] .wordmark-mark, html[data-translate="iu"] .wordmark-mark, html[data-translate="iu-latn"] .wordmark-mark { font-size: clamp(1.6rem, 3.6vw, 2.6rem); } html[lang="iu"], html[data-translate="iu"], html[data-translate="iu-latn"] { --radar-lead-title-size: clamp(1.25rem, 2.4vw, 1.95rem); } } /* ─────────────── TUNER (sticky) ─────────────── */ .tuner { position: sticky; top: 0; /* Au-dessus du fil / bouton traduction : le popover volume sort sous la barre et ne doit pas passer sous .translate-control (même z-index + DOM plus bas). */ z-index: 100; background: var(--tuner-bg); color: #fff; box-shadow: 0 1px 0 rgba(0,0,0,0.3), 0 6px 22px -16px rgba(0,0,0,0.7); } .tuner-inner { max-width: var(--maxw); margin: 0 auto; padding: 10px var(--pad); display: flex; align-items: center; gap: 12px; } .tuner-controls { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; container-type: inline-size; container-name: tuner-controls; } .tuner-label { flex-shrink: 0; } /* Coral « en ondes » — partagé avec le titre d’émission (À l’antenne) sur bureau. */ .tuner { --tuner-onair-live: #ff7d6e; --tuner-onair-idle: rgba(255, 255, 255, 0.42); } .tuner-onair { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 800; letter-spacing: 0.14em; color: var(--tuner-onair-idle); white-space: nowrap; } .tuner-onair::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.25); transition: background 200ms ease; } .tuner.is-playing .tuner-onair { color: var(--tuner-onair-live); } .tuner.is-playing .tuner-onair::before { background: var(--live); animation: onairPulse 1.6s ease-out infinite; } .tuner.is-external .tuner-onair { color: var(--radio-bright); } .tuner.is-external .tuner-onair::before { background: var(--radio-bright); } @keyframes onairPulse { 0% { box-shadow: 0 0 0 0 rgba(200,16,46,0.55); } 100% { box-shadow: 0 0 0 7px rgba(200,16,46,0); } } .tuner-step { flex-shrink: 0; width: 42px; height: 42px; padding: 0; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.72); border-radius: 10px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease, box-shadow 120ms ease; box-shadow: 0 4px 12px -4px rgba(0,0,0,0.45); } .tuner-step:hover { color: rgba(255,255,255,0.95); background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.28); transform: scale(1.04); } .tuner-step:active { transform: scale(0.93); } .tuner-step svg { width: 20px; height: 20px; display: block; } .tuner-dial { position: relative; flex: 1 1 0; min-width: 0; width: 0; } .tuner-actions { display: flex; align-items: center; gap: 9px; flex-shrink: 0; margin-left: auto; } .tuner-select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; } .tuner-now { pointer-events: none; position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 36px; min-width: 0; width: 100%; padding: 3px 24px 3px 11px; border: 1px solid rgba(255,255,255,0.16); border-radius: 9px; background: rgba(255,255,255,0.05); overflow: hidden; transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease; } .tuner-dial:hover .tuner-now { border-color: rgba(255,255,255,0.32); background: rgba(255,255,255,0.08); } /* Lecture live : synthétiseur rouge sur tous les formats (mobile, tablette, bureau). Avant : seulement ≤600px ; EN ONDES restait le seul signal sur grand écran. */ .tuner.is-playing .tuner-now { border-color: rgba(255, 125, 110, 0.7); background: rgba(200, 16, 46, 0.1); box-shadow: 0 0 0 1px rgba(200, 16, 46, 0.22); } .tuner.is-playing .tuner-dial:hover .tuner-now { border-color: rgba(255, 125, 110, 0.85); background: rgba(200, 16, 46, 0.14); } .tuner.is-external .tuner-now { border-color: rgba(93, 155, 224, 0.55); background: rgba(0, 61, 165, 0.1); box-shadow: none; } .tuner.is-external .tuner-dial:hover .tuner-now { border-color: rgba(93, 155, 224, 0.7); background: rgba(0, 61, 165, 0.14); } .tuner-now::after { content: "▾"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-family: var(--sans); font-size: 10px; color: rgba(255,255,255,0.5); line-height: 1; pointer-events: none; } .tuner-now-name { display: block; min-width: 0; font-family: var(--serif); font-weight: 600; font-size: 14px; line-height: 1.15; color: var(--radio-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 0.7s cubic-bezier(0.33, 1, 0.68, 1); } .tuner-now-name.is-crossfading { opacity: 0; } .tuner-now-sub-rotate { display: grid; min-width: 0; width: 100%; overflow: hidden; grid-template-columns: minmax(0, 1fr); } .tuner-now-sub-rotate > .tuner-now-sub { grid-area: 1 / 1; width: 100%; max-width: 100%; } .tuner-now-sub { display: block; min-width: 0; font-size: 11px; color: rgba(255,255,255,0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 0.7s cubic-bezier(0.33, 1, 0.68, 1); } .tuner-now-sub-rotate.is-rotating > .tuner-now-sub { opacity: 0; transition: opacity 0.75s cubic-bezier(0.33, 1, 0.68, 1); pointer-events: none; } .tuner-now-sub-rotate.is-rotating > .tuner-now-sub.is-active { opacity: 1; } .tuner-now-sub.is-crossfading, .tuner-now-sub-rotate.is-rotating > .tuner-now-sub.is-crossfading { opacity: 0; transition: opacity 0.7s cubic-bezier(0.33, 1, 0.68, 1); } .tuner-now-sub-rotate:not(.is-rotating) > .tuner-now-sub--air { display: none; } .tuner-now-sub-rotate.is-empty { display: none; } .tuner-now-sub-text { display: inline-block; white-space: nowrap; } /* Défilement droite → gauche (dial / filtres). GPU pour limiter le flou. */ .is-marquee { text-overflow: clip; } .is-marquee > .tuner-now-sub-text { animation: tunerMarquee var(--marquee-duration, 12s) linear infinite alternate; will-change: transform; backface-visibility: hidden; transform: translateZ(0); } @keyframes tunerMarquee { 0%, 14% { transform: translate3d(0, 0, 0); } 86%, 100% { transform: translate3d(var(--marquee-shift, 0), 0, 0); } } /* Panneau antenne : jamais de marquee (ellipsis + title au survol). */ .tuner-nowair-title, .tuner-nowair-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tuner-nowair-title.is-marquee, .tuner-nowair-sub.is-marquee { text-overflow: ellipsis; } .tuner-nowair-title.is-marquee > .tuner-now-sub-text, .tuner-nowair-sub.is-marquee > .tuner-now-sub-text { animation: none !important; transform: none !important; display: inline; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } @media (prefers-reduced-motion: reduce) { .is-marquee { text-overflow: ellipsis; } .is-marquee > .tuner-now-sub-text { animation: none; } .tuner-now-sub-rotate.is-rotating > .tuner-now-sub { transition: none; } .tuner-nowair-body { transition: none; } } .tuner-play { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; border: none; background: var(--live); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 120ms ease, background 120ms ease, box-shadow 120ms ease; box-shadow: 0 6px 18px -6px rgba(200,16,46,0.7); } .tuner-play:hover { background: var(--live-dark); transform: scale(1.06); } .tuner-play:active { transform: scale(0.93); } .tuner-play:disabled { background: rgba(255,255,255,0.12); box-shadow: none; cursor: not-allowed; transform: none; } .tuner-play.is-external { background: var(--radio); box-shadow: 0 6px 18px -6px rgba(0,61,165,0.65); } .tuner-play.is-external:hover { background: #0049c2; } .tuner-play svg { width: 20px; height: 20px; } .tuner-play .ico-play { margin-left: 2px; } .tuner-play .ico-external { width: 18px; height: 18px; } .tuner-cast { flex-shrink: 0; display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 42px; height: 42px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 50%; background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.72); cursor: pointer; transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease; } .tuner-cast:hover { color: rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.28); } .tuner-cast:active { transform: scale(0.93); } .tuner-cast:disabled { opacity: 0.38; cursor: not-allowed; transform: none; } .tuner-cast.is-unavailable { opacity: 0.3; color: rgba(255, 255, 255, 0.32); border-color: rgba(255, 255, 255, 0.07); background: rgba(255, 255, 255, 0.025); cursor: not-allowed; transform: none; pointer-events: none; } .tuner-cast.is-unavailable:hover { color: rgba(255, 255, 255, 0.32); border-color: rgba(255, 255, 255, 0.07); background: rgba(255, 255, 255, 0.025); } .tuner-cast.is-casting { color: #7eb8ff; border-color: rgba(93, 155, 224, 0.62); background: rgba(0, 61, 165, 0.18); box-shadow: 0 0 0 1px rgba(93, 155, 224, 0.22); } .tuner-cast.is-casting:hover { color: #9ecaff; border-color: rgba(93, 155, 224, 0.78); background: rgba(0, 61, 165, 0.26); } .tuner-cast svg { width: 20px; height: 20px; display: block; } .tuner-eq { flex-shrink: 0; display: none; align-items: flex-end; gap: 2px; height: 18px; padding: 0 2px; } @media (min-width: 600px) { .tuner-eq { display: flex; } } .tuner-eq span { width: 3px; height: 4px; background: var(--live); border-radius: 2px; opacity: 0.9; } .tuner.is-playing .tuner-eq span { animation: eq 760ms ease-in-out infinite; } .tuner.is-playing .tuner-eq span:nth-child(2) { animation-duration: 1000ms; } .tuner.is-playing .tuner-eq span:nth-child(3) { animation-duration: 600ms; animation-delay: 90ms; } .tuner.is-playing .tuner-eq span:nth-child(4) { animation-duration: 880ms; animation-delay: 40ms; } @keyframes eq { 0%,100% { height: 4px; } 50% { height: 16px; } } .tuner-vol { position: relative; flex-shrink: 0; display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,0.5); overflow: visible; } .tuner-vol-btn { display: flex; align-items: center; justify-content: center; padding: 4px; margin: -4px; border: 0; background: none; color: inherit; cursor: pointer; border-radius: 7px; transition: color 0.15s ease, background 0.15s ease; } .tuner-vol-btn:hover { color: rgba(255,255,255,0.85); } .tuner-vol-btn .ico-vol, .tuner-vol-btn .ico-vol-mute { width: 16px; height: 16px; display: block; } /* L'icône reflète la zone d'amplification (curseur masqué sur mobile). */ .tuner.is-boosted .tuner-vol-btn { color: #ff7d6e; } .tuner-vol.is-muted .tuner-vol-btn[aria-pressed="true"] { color: #ff7d6e; border-color: rgba(255, 125, 110, 0.72); background: rgba(255, 125, 110, 0.14); box-shadow: 0 0 0 1px rgba(255, 125, 110, 0.22); } .tuner-vol.is-muted .tuner-vol-btn[aria-pressed="true"]:hover { color: #ff9a90; border-color: rgba(255, 125, 110, 0.88); background: rgba(255, 125, 110, 0.22); } .tuner-vol-track { --vol-thumb: 16px; --vol-ratio: 0.5; --vol-base: 100%; --vol-boost: 0%; width: 100%; min-width: 108px; flex-shrink: 1; display: flex; flex-direction: column; gap: 4px; overflow: visible; } .tuner-vol-slider { position: relative; min-height: var(--vol-thumb); overflow: visible; display: flex; align-items: center; touch-action: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } .tuner-vol-rail { position: absolute; left: calc(var(--vol-thumb) / 2); right: calc(var(--vol-thumb) / 2); top: 50%; height: 5px; transform: translateY(-50%); border-radius: 3px; background: rgba(255, 255, 255, 0.12); pointer-events: none; overflow: visible; } .tuner-vol-zone--boost { position: absolute; left: 50%; right: 0; top: 0; bottom: 0; border-radius: 0 3px 3px 0; background: rgba(255, 125, 110, 0.1); opacity: 0; transition: opacity 140ms ease; } .tuner-vol-track.is-boost .tuner-vol-zone--boost { opacity: 1; } .tuner-vol-fill { position: absolute; top: 0; height: 100%; border-radius: 3px; pointer-events: none; } .tuner-vol-fill--base { left: 0; width: calc(var(--vol-base) * 0.5); max-width: 50%; background: var(--radio-bright); z-index: 1; } .tuner-vol-fill--boost { left: 50%; width: calc(var(--vol-boost) * 0.5); max-width: 50%; background: #ff7d6e; z-index: 2; } .tuner-vol-tick { position: absolute; top: 50%; z-index: 3; width: 2px; height: 9px; border-radius: 1px; transform: translate(-50%, -50%); background: rgba(255, 255, 255, 0.34); pointer-events: none; } .tuner-vol-tick--100 { left: 50%; height: 11px; background: rgba(255, 255, 255, 0.58); } .tuner-vol-thumb { position: absolute; top: 50%; left: var(--vol-x); z-index: 4; box-sizing: border-box; width: var(--vol-thumb); height: var(--vol-thumb); margin: 0; padding: 0; border-radius: 50%; border: 2px solid rgba(12, 14, 18, 0.22); background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.48); transform: translate(-50%, -50%); pointer-events: none; transition: left 140ms ease, border-color 140ms ease, box-shadow 140ms ease; } .tuner-vol-track.is-boost .tuner-vol-thumb { border-color: rgba(255, 125, 110, 0.55); box-shadow: 0 1px 8px rgba(255, 90, 70, 0.35); } .tuner-vol-labels { position: relative; display: block; height: 10px; overflow: visible; font-size: 9px; font-weight: 600; line-height: 1; letter-spacing: 0; color: rgba(255, 255, 255, 0.34); user-select: none; } .tuner-vol-labels span { position: absolute; top: 0; white-space: nowrap; } /* Mute dans la bulle volume — masqué au bureau (curseur en ligne). */ .tuner-vol-mute-btn { display: none; flex-shrink: 0; align-items: center; justify-content: center; box-sizing: border-box; width: 42px; height: 42px; padding: 0; margin: 0; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 50%; background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.72); cursor: pointer; transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease; } .tuner-vol-mute-btn .ico-vol-mute { width: 20px; height: 20px; display: block; overflow: visible; } .tuner-vol-mute-btn:hover { color: rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.28); } .tuner-vol-mute-btn:active { transform: scale(0.93); } .tuner-vol.is-muted .tuner-vol-mute-btn[aria-pressed="true"] { color: #ff7d6e; border-color: rgba(255, 125, 110, 0.72); background: rgba(255, 125, 110, 0.14); box-shadow: 0 0 0 1px rgba(255, 125, 110, 0.22); } .tuner-vol.is-muted .tuner-vol-mute-btn[aria-pressed="true"]:hover { color: #ff9a90; border-color: rgba(255, 125, 110, 0.88); background: rgba(255, 125, 110, 0.22); } .tuner-vol-label--min { left: calc(var(--vol-thumb) / 2); transform: translateX(0); } .tuner-vol-label--mid { left: 50%; transform: translateX(-50%); } .tuner-vol-label--max { left: calc(100% - var(--vol-thumb) / 2); transform: translateX(-100%); color: rgba(255, 154, 144, 0.72); } /* Variantes Cast : une seule visible selon la largeur (voir media queries). .hidden / [hidden] masquent toutes les variantes quand Cast n'est pas prêt. */ .tuner-cast--bar { display: flex; } .tuner-cast--bar.hidden, .tuner-cast--bar[hidden] { display: none !important; } html.is-firefox .tuner-cast--bar.hidden, html.is-firefox .tuner-cast--bar[hidden] { display: flex !important; } .tuner-cast--mobile { display: none; } .tuner-cast--popover { display: none; } /* Bureau : le popover interne ne change pas la mise en page en ligne. */ .tuner-vol-popover { display: contents; } .tuner-volume { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; margin: 0; cursor: pointer; touch-action: none; opacity: 0; -webkit-appearance: none; appearance: none; } .tuner-vol-slider:has(.tuner-volume:focus-visible) { outline: 2px solid var(--radio-bright); outline-offset: 3px; border-radius: 6px; } .tuner-volume::-webkit-slider-runnable-track { -webkit-appearance: none; height: var(--vol-thumb); background: transparent; border: none; } .tuner-volume::-webkit-slider-thumb { -webkit-appearance: none; width: max(var(--vol-thumb), 44px); height: max(var(--vol-thumb), 44px); border: none; background: transparent; cursor: pointer; } .tuner-volume::-moz-range-track { height: var(--vol-thumb); background: transparent; border: none; } .tuner-volume::-moz-range-thumb { width: max(var(--vol-thumb), 44px); height: max(var(--vol-thumb), 44px); border: none; background: transparent; cursor: pointer; } .tuner-vol-track.is-dragging .tuner-vol-thumb { transition: none; } .tuner-vol.is-muted .tuner-vol-track { opacity: 0.42; } /* Sans Web Audio : curseur 0–100 %, pas de zone boost ni de 200 %. (Sur mobile moderne le 200 % reste affiché — voir GAIN_UI_MAX dans app.js.) */ .tuner-vol--no-boost .tuner-vol-zone--boost, .tuner-vol--no-boost .tuner-vol-tick--100, .tuner-vol--no-boost .tuner-vol-label--max { display: none; } .tuner-vol--no-boost .tuner-vol-label--mid { left: calc(100% - var(--vol-thumb) / 2); transform: translateX(-100%); } .tuner-vol--no-boost .tuner-vol-fill--base { width: var(--vol-base); max-width: 100%; } /* Grand bureau (≥1100 px) : curseur volume en ligne + mute au clic sur l'icône. */ @media (min-width: 1100px) { .tuner-now { min-height: 42px; } .tuner-actions { align-self: center; min-height: 42px; /* Dès le premier paint : ne pas pousser play+volume tout à droite. */ margin-left: 0; } .tuner-vol { align-self: center; height: 42px; /* Largeur fixe — pas de croissance pendant le load (ni via cqw ni flex). */ flex: 0 0 auto; flex-shrink: 0; max-width: 168px; min-width: 0; } .tuner-vol-slot { display: flex; align-items: center; height: 42px; overflow: visible; flex: 0 0 auto; max-width: 120px; min-width: 0; } /* Largeur fixe compacte (pas clamp/cqw : trop large tant que le conteneur est full-width). */ .tuner-vol-track { width: 112px; max-width: 112px; min-width: 96px; flex: 0 0 112px; height: 42px; justify-content: center; gap: 0; position: relative; overflow: visible; } .tuner-vol-slider { min-height: 0; height: 100%; width: 100%; } .tuner-vol-labels { position: absolute; left: 0; right: 0; bottom: 0; overflow: visible; } .tuner-vol-btn { flex-shrink: 0; width: 42px; height: 42px; padding: 0; margin: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.72); cursor: pointer; transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease; } .tuner-vol-btn:hover { color: rgba(255,255,255,0.95); background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.28); } .tuner-vol-btn:active { transform: scale(0.93); } .tuner-vol-btn .ico-vol, .tuner-vol-btn .ico-vol-mute { width: 20px; height: 20px; } .tuner.is-boosted .tuner-vol-btn { color: #ff7d6e; border-color: rgba(255,125,110,0.35); } } /* Tablette / mobile : volume en popover — libère l'espace du synthétiseur. */ @media (max-width: 1099.98px) { .tuner-now { min-height: 42px; } .tuner-actions { gap: 6px; align-self: center; align-items: center; min-height: 42px; } .tuner-vol { align-self: center; height: 42px; } .tuner-vol-btn { width: 42px; height: 42px; padding: 0; margin: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.72); transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease; } .tuner-vol-btn:hover { color: rgba(255,255,255,0.95); background: rgba(255,255,255,0.12); } .tuner-vol-btn:active { transform: scale(0.93); } .tuner-vol-btn .ico-vol, .tuner-vol-btn .ico-vol-mute { width: 20px; height: 20px; } .tuner.is-boosted .tuner-vol-btn { color: #ff7d6e; border-color: rgba(255,125,110,0.35); } .tuner-vol-slot { position: absolute; top: calc(100% + 10px); right: 0; /* Au sein du tuner (z-index 100) : au-dessus des autres contrôles du synthé */ z-index: 20; box-sizing: border-box; /* 100vw + 100dvw (min = le plus étroit des deux) : jamais hors écran. Pas de % ici — il se résoudrait contre .tuner-vol (~42 px), pas le viewport. */ width: min(300px, calc(100vw - 20px), calc(100dvw - 20px)); min-width: 0; padding: 12px 14px 10px; background: #22252c; border: 1px solid rgba(255,255,255,0.14); border-radius: 12px; box-shadow: 0 14px 34px -14px rgba(0,0,0,0.85); opacity: 0; transform: translateY(-6px) scale(0.96); transform-origin: top right; pointer-events: none; transition: opacity 0.16s ease, transform 0.16s ease; } /* Petite flèche pointant vers l'icône volume. */ .tuner-vol-slot::before { content: ""; position: absolute; top: -5px; right: 15px; width: 10px; height: 10px; background: #22252c; border-left: 1px solid rgba(255,255,255,0.14); border-top: 1px solid rgba(255,255,255,0.14); transform: rotate(45deg); } .tuner-vol.is-open .tuner-vol-slot { opacity: 1; transform: none; pointer-events: auto; } .tuner-vol-popover { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; width: 100%; } .tuner-vol-slot .tuner-vol-mute-btn { display: flex; flex: 0 0 34px; width: 34px; height: 34px; margin: 0; } .tuner-vol-slot .tuner-vol-mute-btn .ico-vol-mute { width: 18px; height: 18px; } .tuner-vol-slot .tuner-vol-track { flex: 1 1 auto; min-width: 0; width: auto; gap: 4px; } .tuner-vol-slot .tuner-vol-slider { min-height: 34px; height: 34px; width: 100%; } .tuner-vol-slot .tuner-vol-labels { position: relative; width: 100%; height: 11px; margin-top: 1px; font-size: 8px; font-variant-numeric: tabular-nums; letter-spacing: 0; color: rgba(255, 255, 255, 0.38); } .tuner-vol-slot .tuner-vol-label--max { color: rgba(255, 154, 144, 0.62); } /* Sous 1100 px : pas de cast « barre bureau ». */ .tuner-cast--bar { display: none !important; } .tuner-cast--popover { display: none; flex: 0 0 34px; width: 34px; height: 34px; margin: 0; } .tuner-cast--popover svg { width: 18px; height: 18px; } /* Téléphone : cast dans le popover volume (voir max-width 599.98). */ .tuner-cast--popover:not(.hidden):not([hidden]) { display: flex; } .tuner-cast--popover.hidden, .tuner-cast--popover[hidden] { display: none !important; } html.is-firefox .tuner-cast--popover, html.is-firefox .tuner-cast--popover.hidden, html.is-firefox .tuner-cast--popover[hidden] { display: flex !important; } .tuner-vol.is-open .tuner-vol-btn { color: rgba(255,255,255,0.95); } /* Tablette / demi-laptop (600–1099) : cast dans la barre d'actions. */ .tuner-cast--mobile:not(.hidden):not([hidden]) { display: flex; } .tuner-cast--mobile.hidden, .tuner-cast--mobile[hidden] { display: none !important; } html.is-firefox .tuner-cast--mobile, html.is-firefox .tuner-cast--mobile.hidden, html.is-firefox .tuner-cast--mobile[hidden] { display: flex !important; } } /* Téléphone étroit : pastille EN ONDES masquée (le synthétiseur rouge global signale déjà le live). Seuil bas pour ne pas traiter une demi-fenêtre laptop comme un téléphone. */ @media (max-width: 599.98px) { .tuner-inner { padding: 8px var(--pad); gap: 8px; } .tuner-controls { gap: 6px; } .tuner-label { display: none; } .tuner-vol-slot { width: min(292px, calc(100vw - 16px), calc(100dvw - 16px)); } .tuner-step { box-shadow: 0 3px 10px -4px rgba(0,0,0,0.4); } /* Téléphone : cast uniquement dans le popover volume (pas dans la barre). */ .tuner-cast--mobile { display: none !important; } html.is-firefox .tuner-cast--mobile { display: none !important; } /* Popover cast : visible quand le SDK l'active (retirant .hidden). */ .tuner-cast--popover:not(.hidden):not([hidden]) { display: flex; } } @media (prefers-reduced-motion: reduce) { .tuner-vol-slot { transition: none; } } .tuner-nowair { display: none; flex-shrink: 1; align-items: flex-start; gap: 10px; min-width: 0; max-width: 340px; padding-left: 14px; border-left: none; } .tuner-nowair-label { flex-shrink: 0; margin-top: 2px; font-size: 9px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tuner-onair-idle, rgba(255, 255, 255, 0.42)); white-space: nowrap; } .tuner-nowair-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } /* Fondu antenne : changement de poste ou bascule CHOQ */ .tuner-nowair { transition: opacity 0.3s ease; } .tuner-nowair.is-swapping { opacity: 0; } @media (prefers-reduced-motion: reduce) { .tuner-nowair { transition: none; } .tuner-nowair.is-swapping { opacity: 1; } } .tuner-nowair-title { margin: 0; font-family: var(--serif); font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--radio-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Mobile / tablette : teinte live un peu plus claire (lisibilité). */ .tuner.is-playing .tuner-nowair-title { color: #ff9a90; } .tuner-nowair-sub { margin: 0; font-size: 10px; font-weight: 500; line-height: 1.25; color: rgba(255, 255, 255, 0.48); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tuner-nowair.is-empty .tuner-nowair-title { font-style: italic; font-weight: 500; color: rgba(255, 255, 255, 0.55); } @media (min-width: 1100px) { /* * Grille finale dès le premier paint (voir aussi