/* YoungID Radio — PWA player (design d'après le template Lovable, rendu customizable) */ :root{ /* Tokens dérivés des réglages (--yidr-* injectés sur ) */ --p: var(--yidr-primary, #e4232f); --pf: #ffffff; /* texte sur la couleur primaire */ --bg: var(--yidr-bg, #0c0a0b); --surface: var(--yidr-surface, #1d1a1b); --text: var(--yidr-text, #ffffff); --muted: color-mix(in srgb, var(--text) 60%, transparent); --border: color-mix(in srgb, var(--text) 12%, transparent); --radius: 10px; --gradient-bg: radial-gradient(ellipse at top, color-mix(in srgb, var(--p) 32%, transparent), transparent 60%), var(--bg); --shadow-glow: 0 0 60px -10px color-mix(in srgb, var(--p) 60%, transparent); --shadow-card: 0 20px 60px -20px rgba(0,0,0,.6); --font-h: var(--yidr-font-heading, "Syne", sans-serif); --font-b: var(--yidr-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif); } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html,body{margin:0;height:100%} body{ background:var(--gradient-bg); background-attachment:fixed; color:var(--text); font-family:var(--font-b); -webkit-font-smoothing:antialiased; overflow:hidden; } /* ---------- Écrans (player / install) ---------- */ .yidr-screen{display:none;height:100dvh;flex-direction:column;overflow:hidden} .yidr-screen.is-active{display:flex} /* ---------- HEADER ---------- */ .yidr-header{ display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px; padding:max(env(safe-area-inset-top),16px) 20px 8px; } .yidr-brand{display:flex;min-width:0;align-items:center;gap:10px} .yidr-logo{ display:flex;height:36px;width:36px;flex-shrink:0;align-items:center;justify-content:center; border-radius:14px;background:var(--p);box-shadow:var(--shadow-glow);overflow:hidden } .yidr-logo svg{height:20px;width:20px;color:var(--pf)} .yidr-logo img{height:100%;width:100%;object-fit:cover} .yidr-brand b{font-family:var(--font-h);font-weight:800;font-size:16px;letter-spacing:-.01em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .yidr-live{ display:inline-flex;align-items:center;gap:6px;border-radius:999px; border:1px solid color-mix(in srgb, var(--p) 40%, transparent); background:color-mix(in srgb, var(--p) 10%, transparent);padding:4px 10px } .yidr-live .pip{position:relative;display:flex;height:6px;width:6px} .yidr-live .pip::before{content:"";position:absolute;inset:0;border-radius:999px;background:var(--p); opacity:.75;animation:yidr-ping 1.4s cubic-bezier(0,0,.2,1) infinite} .yidr-live .pip::after{content:"";position:relative;display:inline-flex;height:6px;width:6px;border-radius:999px;background:var(--p)} .yidr-live span{font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--p)} @keyframes yidr-ping{75%,100%{transform:scale(2);opacity:0}} /* ---------- MAIN (la clé du responsive : flex + justify-between + shrink) ---------- */ .yidr-main{ display:flex;flex:1;min-height:0;flex-direction:column;align-items:center;justify-content:space-between; padding:8px 20px max(env(safe-area-inset-bottom),16px); } /* Pochette : rétrécit toute seule (flex-shrink) ; object-cover gère le recadrage */ .yidr-cover{position:relative;margin:12px 0;width:100%;max-width:min(72vw,360px);aspect-ratio:1/1; flex:0 1 auto;min-height:0} .yidr-cover .glow{position:absolute;inset:8px;border-radius:22px; background:color-mix(in srgb, var(--p) 30%, transparent);filter:blur(48px)} .yidr-cover img{position:relative;height:100%;width:100%;border-radius:22px;object-fit:cover; box-shadow:var(--shadow-card);background:var(--surface);display:block} /* Métadonnées */ .yidr-meta{width:100%;padding:0 8px;text-align:center} .yidr-meta .tag{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.2em;color:var(--p)} .yidr-meta h1{font-family:var(--font-h);margin:6px 0 0;font-size:20px;font-weight:800;line-height:1.15; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere} .yidr-meta .artist{margin:4px 0 0;font-size:14px;color:color-mix(in srgb, var(--text) 80%, transparent); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .yidr-meta .album{margin:2px 0 0;font-size:12px;color:var(--muted); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Contrôles */ .yidr-controls{display:flex;width:100%;flex-direction:column;align-items:center;gap:16px;padding-top:12px} .yidr-buttons{display:flex;align-items:center;justify-content:center;gap:20px} .yidr-iconbtn{display:flex;height:44px;width:44px;align-items:center;justify-content:center;border-radius:999px; border:1px solid var(--border);background:color-mix(in srgb, var(--surface) 60%, transparent); color:var(--muted);cursor:pointer;text-decoration:none;transition:color .2s} .yidr-iconbtn:hover{color:var(--text)} /* hover Lovable : l'icône passe muted → texte */ .yidr-iconbtn svg{height:20px;width:20px} .yidr-iconbtn[hidden]{visibility:hidden} /* garde sa place → bouton play centré */ .yidr-play{position:relative;display:flex;height:72px;width:72px;align-items:center;justify-content:center; border:0;border-radius:999px;background:var(--p);color:var(--pf);box-shadow:var(--shadow-glow); cursor:pointer;transition:transform .12s} .yidr-play:active{transform:scale(.95)} /* Focus : pas de contour bleu par défaut au clic ; anneau primaire seulement au clavier */ .yidr-play:focus,.yidr-iconbtn:focus,.yidr-volume .mute:focus,.yidr-back:focus{outline:none} .yidr-play:focus-visible,.yidr-iconbtn:focus-visible,.yidr-volume .mute:focus-visible,.yidr-back:focus-visible{ outline:2px solid var(--p);outline-offset:2px} .yidr-play svg{height:28px;width:28px;grid-area:1/1} .yidr-play .ic{display:none} .yidr-play .ic-play{display:block;margin-left:3px} body[data-state="playing"] .yidr-play .ic-play{display:none} body[data-state="playing"] .yidr-play .ic-pause{display:block;margin-left:0} body[data-state="loading"] .yidr-play .ic-play{display:none} body[data-state="loading"] .yidr-play .ic-load{display:block;margin-left:0;animation:yidr-spin .9s linear infinite} @keyframes yidr-spin{to{transform:rotate(360deg)}} /* Volume */ .yidr-volume{display:flex;width:100%;max-width:384px;align-items:center;gap:12px;padding-top:4px} .yidr-volume .mute{flex-shrink:0;border:0;background:none;color:var(--muted);cursor:pointer;padding:0;display:flex; transition:color .2s;border-radius:6px} .yidr-volume .mute:hover{color:var(--text)} .yidr-volume .mute svg{height:20px;width:20px} /* Bascule d'icône pilotée par la classe .is-muted (le `hidden` JS ne marche pas sur du SVG) */ #yidr-mute-off{display:none} .yidr-volume .mute.is-muted #yidr-mute-on{display:none} .yidr-volume .mute.is-muted #yidr-mute-off{display:block} .yidr-volume .track{position:relative;flex:1;height:16px;display:flex;align-items:center} .yidr-volume .bar{height:4px;width:100%;border-radius:999px;background:color-mix(in srgb,var(--text) 14%,transparent);overflow:hidden} .yidr-volume .fill{height:100%;border-radius:999px;background:var(--p);width:90%} /* Rond de réglage au bout du remplissage (surtout utile au doigt sur mobile) */ .yidr-volume .thumb{position:absolute;top:50%;left:90%;height:16px;width:16px;margin-top:-8px;margin-left:-8px; border-radius:999px;background:var(--p);border:2px solid var(--bg);box-shadow:0 1px 4px rgba(0,0,0,.35); pointer-events:none;transition:transform .12s ease} .yidr-volume input:active~.thumb,.yidr-volume .track:hover .thumb{transform:scale(1.15)} /* L'input couvre toute la zone (44px de haut) pour une cible tactile confortable */ .yidr-volume input{position:absolute;left:0;right:0;top:50%;height:44px;width:100%;margin:0;transform:translateY(-50%); cursor:pointer;opacity:0;-webkit-appearance:none;appearance:none;background:transparent} .yidr-volume .num{width:28px;text-align:right;font-size:10px;font-variant-numeric:tabular-nums;color:var(--muted)} /* iOS/Safari : volume non réglable en JS → on masque la barre (boutons matériels) */ body.yidr-no-volume .yidr-volume{display:none} /* Bouton « Télécharger l'app … » sous le volume (ouvre l'écran d'install) ; espacement géré par le gap de .yidr-controls */ .yidr-download{display:flex;width:100%;max-width:384px;align-items:center;justify-content:center;gap:9px; padding:13px 18px;border:1px solid var(--border);border-radius:14px; background:color-mix(in srgb, var(--surface) 60%, transparent);color:var(--text); font-family:var(--font-h);font-size:14px;font-weight:800;cursor:pointer;transition:background .2s,border-color .2s} .yidr-download:hover{background:color-mix(in srgb, var(--p) 14%, transparent); border-color:color-mix(in srgb, var(--p) 40%, transparent)} .yidr-download:active{transform:scale(.99)} .yidr-download svg{height:18px;width:18px;color:var(--p);flex-shrink:0} /* ---------- ÉCRAN INSTALLER (design Lovable) ---------- */ .yidr-install{height:100dvh} .yidr-ibody{position:relative;flex:1;min-height:0;overflow-y:auto; padding:max(env(safe-area-inset-top),16px) 20px max(env(safe-area-inset-bottom),24px)} .yidr-ibody > *{margin-left:auto;margin-right:auto;max-width:384px} /* Bouton retour : absolu en haut à gauche, défile avec le contenu (pas fixed) */ .yidr-back{position:absolute;z-index:5;top:max(env(safe-area-inset-top),12px);left:16px; display:flex;height:36px;width:36px;align-items:center;justify-content:center;border-radius:999px; border:1px solid var(--border);background:color-mix(in srgb,var(--surface) 60%,transparent);color:var(--muted); cursor:pointer;transition:color .2s} .yidr-back:hover{color:var(--text)} .yidr-back svg{height:20px;width:20px} .yidr-ibody .icon{display:block;width:96px;height:96px;border-radius:24px;object-fit:cover;margin:8px auto 16px; box-shadow:var(--shadow-glow);border:1px solid var(--border)} .yidr-ibody h2{font-family:var(--font-h);font-weight:800;font-size:22px;margin:0 auto 8px;text-align:center} .yidr-ibody .lead{margin:0 auto 20px;color:var(--muted);font-size:14px;line-height:1.55;text-align:center} /* Atouts (3 chips) */ .yidr-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 auto 20px} .yidr-feat{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px;border-radius:12px;text-align:center; background:color-mix(in srgb,var(--surface) 40%,transparent);border:1px solid var(--border)} .yidr-feat .i{color:var(--p);display:flex} .yidr-feat .i svg{height:16px;width:16px} .yidr-feat .t{font-size:10px;font-weight:500;line-height:1.2;color:color-mix(in srgb,var(--text) 80%,transparent)} /* Sélecteur d'appareil (segmented) */ .yidr-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:0 auto 20px;padding:4px;border-radius:16px; background:color-mix(in srgb,var(--surface) 60%,transparent);border:1px solid var(--border)} .yidr-seg-btn{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;border:0;border-radius:12px; background:none;cursor:pointer;font-size:12px;font-weight:600;color:var(--muted);transition:color .2s,background .2s} .yidr-seg-btn svg{height:14px;width:14px} .yidr-seg-btn:hover{color:var(--text)} .yidr-seg-btn.is-active{background:var(--p);color:var(--pf)} .yidr-seg-note{margin:0 auto 16px;text-align:center;font-size:12px;color:var(--muted)} .yidr-seg-note[hidden]{display:none} /* affichée uniquement sur l'onglet auto-détecté */ /* Guide d'étapes */ .yidr-steps{border-radius:16px;border:1px solid var(--border);background:color-mix(in srgb,var(--surface) 60%,transparent);padding:8px 20px} .yidr-steps[hidden]{display:none} .yidr-step{display:flex;flex-direction:column;gap:12px;padding:16px 0} .yidr-step:not(:last-child){border-bottom:1px solid color-mix(in srgb,var(--border) 50%,transparent)} .yidr-step .row{display:flex;align-items:flex-start;gap:12px} .yidr-step .num{display:flex;height:28px;width:28px;flex-shrink:0;align-items:center;justify-content:center;border-radius:999px; background:color-mix(in srgb,var(--p) 15%,transparent);color:var(--p);font-size:12px;font-weight:800} .yidr-step .txt{flex:1;padding-top:3px;font-size:14px;line-height:1.5;color:color-mix(in srgb,var(--text) 90%,transparent)} .yidr-step .txt strong{font-weight:700;color:var(--text)} .yidr-step .txt .kbd{display:inline-flex;align-items:center;gap:4px;vertical-align:middle;border-radius:6px; background:color-mix(in srgb,var(--text) 12%,transparent);padding:2px 6px;font-weight:600} .yidr-step .txt .kbd svg{height:12px;width:12px} .yidr-step .ill{padding-left:40px} .yidr-steps-foot{margin:20px auto 0;text-align:center;font-size:12px;color:var(--muted)} /* Bouton « ‹ Retour » centré tout en bas de la page */ .yidr-back-link{display:flex;width:fit-content;align-items:center;gap:6px;margin:22px auto 6px;padding:10px 20px; border-radius:999px;border:1px solid var(--border);background:color-mix(in srgb,var(--surface) 60%,transparent); color:var(--muted);font-size:13px;font-weight:600;font-family:var(--font-b);cursor:pointer;transition:color .2s} .yidr-back-link:hover{color:var(--text)} .yidr-back-link svg{height:15px;width:15px} /* Encart "info / attention" (ex. astuce Safari Mac) */ .yidr-note{display:flex;align-items:flex-start;gap:8px;margin-left:40px;padding:10px 12px;border-radius:10px; border:1px solid color-mix(in srgb,var(--p) 30%,transparent);background:color-mix(in srgb,var(--p) 10%,transparent); font-size:12.5px;line-height:1.45;color:color-mix(in srgb,var(--text) 90%,transparent)} .yidr-note .ni{flex-shrink:0;display:flex;margin-top:1px;color:var(--p)} .yidr-note .ni svg{height:15px;width:15px} .yidr-note strong{color:var(--text);font-weight:700} /* Maquettes d'illustration (navigateur / téléphone) */ .yidr-mock{margin:0 auto;width:192px;overflow:hidden;border-radius:12px;border:1px solid var(--border); background:color-mix(in srgb,var(--text) 6%,transparent);padding:8px;box-shadow:0 1px 2px rgba(0,0,0,.25)} .yidr-mock .screen{position:relative;display:flex;flex-direction:column;aspect-ratio:16/9;overflow:hidden;border-radius:8px;background:var(--bg)} .yidr-mock.phone{width:128px;border-radius:20px} .yidr-mock.phone .screen{aspect-ratio:9/16} .yidr-mock.phone .appicon{height:24px;width:24px} .yidr-mock.phone .appicon svg{height:14px;width:14px} /* Lignes "squelette" de contenu (téléphone) */ .yidr-mock .line{height:6px;border-radius:999px;background:color-mix(in srgb,var(--text) 12%,transparent)} .yidr-mock .line.w16{width:64px} .yidr-mock .line.w12{width:48px} /* Overlays (bouton partage / menu / carte d'option) */ .yidr-mock .ov{position:absolute;z-index:10;display:flex;align-items:center;justify-content:center;color:var(--pf); background:color-mix(in srgb,var(--p) 90%,transparent);box-shadow:0 2px 6px rgba(0,0,0,.35)} .yidr-mock .ov svg{height:12px;width:12px} .yidr-mock .ov-bottom{bottom:8px;left:50%;transform:translateX(-50%);border-radius:999px;padding:6px} .yidr-mock .ov-br{bottom:8px;right:8px;border-radius:999px;padding:6px} /* bouton ••• Safari : bas-droite */ .yidr-mock .ov-tr{top:8px;right:6px;height:20px;width:20px;border-radius:999px} .yidr-mock .ov-label{top:6px;right:6px;border-radius:6px;padding:3px 7px;font-size:7px;font-weight:700} .yidr-mock .ov-card{position:absolute;z-index:10;top:50%;left:50%;transform:translate(-50%,-50%);width:96px; border-radius:8px;border:1px solid var(--border);background:color-mix(in srgb,var(--surface) 92%,transparent); padding:6px;text-align:center;font-size:8px;font-weight:600;line-height:1.2;color:var(--text)} /* Feuille / menu contextuel (iOS : menu •••, Partager, options) */ .yidr-mock .sheet{position:absolute;left:8px;right:8px;bottom:8px;z-index:10;display:flex;flex-direction:column;gap:3px; border-radius:8px;border:1px solid var(--border);background:color-mix(in srgb,var(--surface) 96%,transparent); padding:5px;box-shadow:0 6px 16px rgba(0,0,0,.45)} .yidr-mock .sheet .li{display:flex;align-items:center;gap:4px;font-size:7px;line-height:1.25; color:color-mix(in srgb,var(--text) 80%,transparent);padding:3px 5px;border-radius:4px;overflow:hidden;white-space:nowrap} .yidr-mock .sheet .li svg{height:9px;width:9px;flex-shrink:0} .yidr-mock .sheet .li.hl{background:color-mix(in srgb,var(--p) 90%,transparent);color:var(--pf);font-weight:700} /* Barres (haut/bas) dans le flux → le contenu ne les survole pas */ .yidr-mock .topbar{display:flex;height:20px;flex-shrink:0;align-items:center;gap:4px; border-bottom:1px solid var(--border);padding:0 8px} .yidr-mock .navbar{display:flex;height:22px;flex-shrink:0;align-items:center;justify-content:center; border-top:1px solid var(--border)} /* Zone centrale : occupe l'espace restant, contenu centré */ .yidr-mock .body{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:6px;padding:6px 8px} .yidr-mock .dot{height:8px;width:8px;flex-shrink:0;border-radius:999px} .yidr-mock .dot.r{background:rgba(239,68,68,.8)} .yidr-mock .dot.y{background:rgba(234,179,8,.8)} .yidr-mock .dot.g{background:rgba(34,197,94,.8)} .yidr-mock .addr{margin:0 8px;height:8px;flex:1;border-radius:999px;background:color-mix(in srgb,var(--text) 14%,transparent)} .yidr-mock .instchip{display:flex;align-items:center;gap:2px;flex-shrink:0;border-radius:4px; background:color-mix(in srgb,var(--p) 90%,transparent);padding:2px 4px;font-size:7px;font-weight:700;color:var(--pf)} .yidr-mock .instchip svg{height:9px;width:9px} .yidr-mock .appicon{display:flex;height:28px;width:28px;flex-shrink:0;align-items:center;justify-content:center;border-radius:8px; background:color-mix(in srgb,var(--p) 20%,transparent);color:var(--p)} .yidr-mock .appicon svg{height:16px;width:16px} .yidr-mock .cap{text-align:center;font-size:8px;line-height:1.2;color:var(--muted);padding:0 4px} .yidr-mock .navbtn{display:flex;align-items:center;justify-content:center;color:var(--muted)} .yidr-mock .navbtn svg{height:13px;width:13px} .yidr-mock .navbtn.sm svg{height:11px;width:11px} .yidr-mock .navbtn.hi{color:var(--p)} /* ---------- APP INSTALLÉE (PWA standalone) : pas de bouton/écran d'install ---------- */ body.yidr-standalone #yidr-install-open{display:none} body.yidr-standalone #yidr-screen-install{display:none !important} /* ---------- APP INSTALLÉE (PWA standalone) : pas de bouton/écran d'install ---------- */ body.yidr-standalone #yidr-install-open{display:none} body.yidr-standalone #yidr-screen-install{display:none !important}