:root{ /* --magenta est aussi la couleur des arcs du logo (logo.svg, qui ne peut pas lire ces variables) : changer l'un = changer l'autre. */ --magenta-rvb:224,64,224; --magenta:rgb(var(--magenta-rvb)); --rouge-coeur-rvb:255,77,109; --rouge-coeur:rgb(var(--rouge-coeur-rvb)); --rouge-erreur-rvb:248,113,113; --rouge-erreur:rgb(var(--rouge-erreur-rvb)); --rouge-erreur-fonce:#e5484d; --rouge-suppression:#d00000; --orange:#e39a4e; --fond:#121016; --fond2:#1b1922; --cote:#0c0b10; --texte:#f2f2f5; --gris:#9a97a5; --bord:rgba(255,255,255,.08); --bleu:#4cc9f0; --taille-point-lecture:.44rem; /* diamètre des points bleus clignotants « en lecture » */ } *{box-sizing:border-box} html,body{height:100%;margin:0} /* Tout élément amené à l'écran (ancre, 📍, touche Tab) s'arrête sous le bandeau de lecture fixé. */ html{scroll-padding-top:7rem} body{ font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; background:var(--fond);color:var(--texte);min-height:100vh; display:flex;flex-direction:column; } a{color:inherit;text-decoration:none} /* ===== Structure application ===== */ /* .app s'allonge avec le contenu (au moins la hauteur de l'écran) : le menu latéral « collant » reste ainsi à l'écran sur toute la longueur de la page. */ .app{display:flex;flex:1 0 auto} .colonne{flex:1;display:flex;flex-direction:column;min-width:0} /* Barre du haut */ .barre{ display:flex;align-items:center;gap:.6rem; padding:1rem 1.2rem;border-bottom:1px solid var(--bord); } .barre .marque{flex:0 1 auto;min-width:0;font-weight:400;font-style:italic;font-family:Georgia,'Times New Roman',serif;font-size:1.1rem;display:inline-flex;align-items:center;gap:.5rem} .barre .marque .logo-mini{width:42px;height:auto;border-radius:7px;flex:0 0 auto} /* Texte de la marque : masqué sur mobile (le logo suffit) pour laisser la place au titre au centre ; réaffiché sur ordinateur. */ .barre .marque .marque-nom{display:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Titre de la page, centré dans la barre du haut (remplace les

par page) ; il ne prend que la place laissée par le logo et les boutons. */ .titre-page{flex:1 1 0;min-width:0;text-align:center;font-weight:600;font-size:1.15rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Titre-bouton des pages à listes d'écoute : bouton léger (cadre fin) autour du titre et, dessous en petit, du tri en cours ; un titre long est coupé (…), la ligne de tri reste entière. */ .titre-tri{display:inline-flex;flex-direction:column;align-items:center;max-width:100%;padding:.15rem .8rem;border:1px solid rgba(var(--magenta-rvb),.35);border-radius:10px;background:none;color:inherit;font:inherit;line-height:1.2;cursor:pointer;transition:background .15s,border-color .15s} .titre-tri:active{background:rgba(var(--magenta-rvb),.12);border-color:rgba(var(--magenta-rvb),.65)} @media (hover:hover){.titre-tri:hover{background:rgba(var(--magenta-rvb),.12);border-color:rgba(var(--magenta-rvb),.65)}} .titre-tri-nom{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .titre-tri-ligne{font-size:.72rem;font-weight:400;color:var(--gris);white-space:nowrap} .langues{flex:0 0 auto;display:flex;gap:.6rem;align-items:center} .langues .drapeau{display:inline-flex;opacity:.55;transition:opacity .15s;padding-bottom:4px;border-bottom:2px solid transparent} .langues .drapeau img{width:26px;height:auto;display:block;border-radius:3px} .langues .drapeau.actif{opacity:1;border-bottom-color:var(--magenta)} @media (hover:hover){.langues .drapeau:hover{opacity:.85}} /* Loupe de la barre du haut : déplie/replie la ligne de recherche placée juste dessous. */ .bouton-loupe{flex:0 0 auto;background:none;border:0;padding:0 .2rem;font-size:1.25rem;line-height:1;cursor:pointer;opacity:.75} @media (hover:hover){.bouton-loupe:hover{opacity:1}} /* Bouton 🔀 lecture aléatoire : allumé (souligné magenta, comme le drapeau actif) quand le mode est actif. */ .bouton-aleatoire{flex:0 0 auto;background:none;color:var(--bleu);border:0;border-bottom:2px solid transparent;padding:0 .2rem 4px;font-size:1.25rem;line-height:1;cursor:pointer;opacity:.45} @media (hover:hover){.bouton-aleatoire:hover{opacity:.8}} .bouton-aleatoire.actif{opacity:1;border-bottom-color:var(--magenta)} .ligne-recherche{padding:.5rem 1.2rem;border-bottom:1px solid var(--bord)} .ligne-recherche[hidden]{display:none} .ligne-recherche input{width:100%;padding:.55rem .8rem;border-radius:10px;border:1px solid var(--bord);background:rgba(255,255,255,.06);color:#fff;font-size:1rem;font-family:inherit} /* Contenu (marge basse pour laisser la place à la barre du bas sur mobile) */ .contenu{flex:1;padding:.75rem 1.2rem 6rem} /* ===== Barre latérale (ordinateur) — cachée sur mobile ===== */ .cote{display:none} .logo-cote{display:flex;flex-direction:column;align-items:center;gap:.4rem;margin:.2rem .4rem .6rem} .logo-cote .logo-img{width:154px;max-width:100%;height:auto;border-radius:14px} .logo-cote .logo-nom{font-weight:400;font-style:italic;font-family:Georgia,'Times New Roman',serif;font-size:.9rem;text-align:center;line-height:1.15} .menu{display:flex;flex-direction:column;gap:.2rem} .menu .item{ display:flex;align-items:center;gap:.7rem;padding:.5rem .8rem; border-radius:10px;color:var(--gris);font-weight:600;min-width:0; } .menu .item .ico{font-size:1.2rem;flex:0 0 auto} .menu .item .txt-bloc{display:flex;flex-direction:column;min-width:0;line-height:1.2;gap:3px} .menu .item .email-compte{ font-size:.72rem;color:var(--bleu);font-weight:500; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } @media (hover:hover){.menu .item:hover{background:rgba(255,255,255,.06);color:#fff}} .menu .item.actif{background:rgba(var(--rouge-coeur-rvb),.15);color:#fff} /* Boutons admin (barre latérale) : seuls à porter une icône, accent magenta discret, regroupés. */ .menu .item-admin{color:var(--magenta)} @media (hover:hover){.menu .item-admin:hover{background:rgba(var(--rouge-coeur-rvb),.10);color:#fff}} .menu .item-admin.actif{background:rgba(var(--rouge-coeur-rvb),.18);color:#fff} .menu .premier-admin{margin-top:.6rem;padding-top:.9rem;border-top:1px solid var(--bord)} /* ===== Barre du bas (mobile) — cachée sur ordinateur ===== */ .bas{ position:fixed;left:0;right:0;bottom:0;display:flex;z-index:10; background:var(--cote);border-top:1px solid var(--bord); } .bas .item{ flex:1;display:flex;flex-direction:column;align-items:center;gap:.15rem; padding:.55rem 0;color:var(--gris);font-size:.68rem;font-weight:600;text-align:center; } .bas .item .ico{font-size:1.35rem} .bas .item.actif{color:var(--magenta)} /* ===== Zone « bientôt disponible » ===== */ .vide{max-width:560px;margin:3rem auto 0;text-align:center} .vide h1{font-size:1.5rem;margin-bottom:.6rem} .vide p{color:var(--gris);line-height:1.5;margin:.5rem 0 1.2rem} /* ===== Page avec formulaire (ex : donner mon avis) ===== */ .carte-page{max-width:560px;margin:1.5rem auto 0} .carte-page .sous{color:var(--gris);margin:0 0 1.2rem;line-height:1.4} /* Ligne « contacte-nous directement » (page Donner mon avis) : un peu détachée du bouton et légèrement plus grande. */ .carte-page .avis-contact{margin-top:1.1rem;font-size:1.05rem} .carte-page .bouton{margin-top:1.3rem} .carte-page h2{font-size:1.1rem;margin:1.7rem 0 .5rem} textarea{ width:100%;padding:.7rem .8rem;border-radius:10px;border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06);color:#fff;font-size:1rem;font-family:inherit;resize:vertical; } textarea::placeholder{color:rgba(255,255,255,.4)} /* ===== Boutons ===== */ .bouton{ display:inline-block;padding:.8rem 1.4rem;border:0;border-radius:10px; background:var(--magenta);color:#fff;font-size:1.05rem;font-weight:700;cursor:pointer; } @media (hover:hover){.bouton:hover{opacity:.92}} .bouton.secondaire{background:rgba(255,255,255,.12)} .bouton.vert{background:#74c9a4} .bouton.bleu{background:#7fb0dd} .bouton.rouge{background:var(--rouge-suppression)} /* toute suppression + « Confirmer » de la fenêtre de confirmation */ .bouton.orange{background:var(--orange)} /* Fenêtre de confirmation (inc-layout.php) : centrée, fond de page assombri derrière */ .fenetre-confirmation{border:1px solid var(--bord);border-radius:14px;background:var(--fond2);color:var(--texte);padding:1.2rem 1.3rem;width:min(26rem,90vw);box-shadow:0 10px 40px rgba(0,0,0,.6)} .fenetre-confirmation::backdrop{background:rgba(0,0,0,.6)} .fenetre-confirmation p{margin:0 0 1.1rem;line-height:1.45} .fc-boutons{display:flex;justify-content:flex-end;gap:.6rem;flex-wrap:wrap} .fc-boutons .bouton{padding:.55rem 1.1rem;font-size:.95rem} /* ===== Page connexion (écran centré, sans barre latérale) ===== */ .centre{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem} .carte{ background:var(--fond2);border:1px solid rgba(255,255,255,.1); border-radius:16px;padding:2rem;max-width:420px;width:100%; } .carte h1{margin:0 0 1.2rem;font-size:1.5rem;text-align:center} label{display:block;margin:.8rem 0 .3rem;font-size:.95rem;color:var(--gris)} input[type=email],input[type=password],input[type=url],input[type=text]{ width:100%;padding:.7rem .8rem;border-radius:10px;border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06);color:#fff;font-size:1rem; } input::placeholder{color:rgba(255,255,255,.4)} select{ width:100%;padding:.7rem .8rem;border-radius:10px;border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06);color:#fff;font-size:1rem;font-family:inherit; } select option{color:#000} /* la liste déroulante native s'ouvre sur fond clair */ .deux-boutons{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem} .deux-boutons .bouton{flex:1 1 40%;text-align:center} .aide{font-size:.85rem;color:var(--gris);margin:.7rem 0 0;text-align:center} .note-droits{font-size:1rem;line-height:1.4;color:var(--texte);margin:.2rem 0 1.3rem;text-align:center} .message{padding:.8rem 1rem;border-radius:10px;margin-bottom:1rem;font-size:.95rem} .message.ok{background:rgba(52,211,153,.18);border:1px solid rgba(52,211,153,.45)} .message.erreur{background:rgba(var(--rouge-erreur-rvb),.18);border:1px solid rgba(var(--rouge-erreur-rvb),.45)} .lien-bas{text-align:center;margin-top:1rem;font-size:.9rem;color:var(--gris)} /* Lien d'action présenté comme un lien mais qui est en réalité un bouton de soumission (ex. « Mot de passe perdu ou se connecter par email » : il soumet l'email déjà saisi). */ .lien-bas .lien-clic{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer} @media (hover:hover){.lien-bas .lien-clic:hover{color:var(--texte)}} /* Encadré « Supprimer mon compte » (page Mon compte) : action irréversible, isolée en rouge. */ .zone-danger{margin-top:2rem;padding:1rem;border:1px solid rgba(var(--rouge-erreur-rvb),.45);border-radius:12px;background:rgba(var(--rouge-erreur-rvb),.08)} .zone-danger h2{margin-top:0} /* ===== Console d'administration ===== */ .admin{max-width:1200px;margin:1.2rem auto 0} .admin h2{font-size:1.15rem;margin:1.8rem 0 .7rem;padding-bottom:.3rem;border-bottom:1px solid var(--bord)} .admin .sous{color:var(--gris);margin:0 0 1rem;line-height:1.4} .admin .vide-section{color:var(--gris);font-style:italic;margin:.5rem 0 1rem} .carte-morceau{background:var(--fond2);border:1px solid var(--bord);border-radius:14px;padding:.65rem .8rem;margin-bottom:.7rem;font-size:.9rem} .carte-morceau h3{margin:0 0 .2rem;font-size:1.1rem} .carte-morceau .meta{color:var(--gris);font-size:.76rem;margin:0;line-height:1.3;word-break:break-word;min-width:0} .carte-morceau .note-auto{background:rgba(var(--rouge-coeur-rvb),.12);border:1px solid rgba(var(--rouge-coeur-rvb),.3);border-radius:8px;padding:.35rem .6rem;font-size:.82rem;margin:.15rem 0 .45rem} .carte-morceau audio{width:100%;margin:.2rem 0 .5rem} .actions-morceau{display:flex;flex-wrap:wrap;gap:.6rem;align-items:flex-end} .actions-morceau .champ-style{flex:1 1 220px} .actions-morceau label{margin:.2rem 0 .3rem} .actions-morceau .bouton{padding:.65rem 1.1rem;font-size:.95rem} .barre-actions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:flex-end} /* Bouton « Message à poster » (vue En prod) : date de dernière copie en petit sous le libellé. */ .barre-actions .js-msg-poster{text-align:center;line-height:1.15} .msg-copie-date{display:block;font-size:.68rem;font-weight:400;opacity:.75;margin-top:.15rem} .msg-copie-date:empty{display:none} /* Édition d'un morceau (page Modérer) : 2 lignes pleine largeur. LIGNE 1 = lecteur (élargi) + la ligne méta (email déposant · Shazam + icône · origine tronquée). LIGNE 2 = titre, style, artiste, site, lien (5 champs). Empilé sur mobile. */ .edit-morceau{display:flex;flex-direction:column;gap:.4rem;margin:.15rem 0 .45rem} .ed-ligne1{display:flex;align-items:center;gap:.7rem;min-width:0} .ed-rang{display:flex;gap:.7rem;align-items:flex-end} .edit-morceau .cellule{flex:1 1 0;display:flex;flex-direction:column;min-width:0} .edit-morceau label{margin:.05rem 0 .15rem;font-size:.78rem;color:var(--gris)} /* Petite flèche « ↗ » cliquable accolée au libellé (site auteur / lien source) : ouvre l'URL. */ .lien-ouvrir{font-size:.7rem;text-decoration:none;color:var(--bleu);font-weight:700} @media (hover:hover){.lien-ouvrir:hover{text-decoration:underline}} .edit-morceau input,.edit-morceau select{width:100%;padding:.3rem .45rem;font-size:.85rem} /* Lecteur de la console : boutons ⏮/⏭ de part et d'autre, contrôle audio aminci (24px). Largeur fixe (élargie) en ligne 1, la méta occupant le reste. */ .ed-ligne1 .lecteur-apercu{flex:0 0 360px} .lecteur-apercu{display:flex;align-items:center;gap:.25rem;width:100%} .lecteur-apercu audio{flex:1 1 auto;min-width:0;height:24px} .saut-apercu{flex:0 0 auto;background:var(--fond2);border:1px solid var(--bord);border-radius:6px;color:inherit;cursor:pointer;padding:.15rem .3rem;font-size:.85rem;line-height:1} @media (hover:hover){.saut-apercu:hover{background:var(--bord)}} /* Point bleu « en lecture » : invisible hors lecture (aucun décalage), clignotant pendant (dessin commun : « Point bleu clignotant » plus bas). */ .point-lecture-apercu{display:none} .en-lecture .point-lecture-apercu{display:inline-block;flex:0 0 auto} /* Zone méta (à droite du lecteur) empilée sur DEUX lignes : ligne 1 = email + date + Shazam + icône ; ligne 2 = métadonnées d'origine. Chaque ligne tronquée indépendamment (l'icône Shazam n'est donc plus rognée par les métadonnées). */ .ed-ligne1 .meta{flex:1 1 auto;margin:0;display:flex;flex-direction:column;justify-content:center;gap:.1rem;min-width:0} .ed-ligne1 .meta .meta-fixe{max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ed-ligne1 .meta .meta-origine{max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Icône Shazam (déduit de l'état) : ✓ non reconnu = OK, ✗ reconnu = alerte droit d'auteur, ? non abouti. */ .ico-shazam{display:inline-block;padding:.05rem .45rem;border-radius:1rem;font-size:.72rem;font-weight:700;line-height:1.3;border:1px solid;vertical-align:middle;white-space:nowrap} .ico-shazam.reconnu{background:rgba(46,160,67,.18);border-color:rgba(46,160,67,.5);color:#2ea043} .ico-shazam.non-reconnu{background:rgba(var(--rouge-erreur-rvb),.2);border-color:rgba(var(--rouge-erreur-rvb),.55);color:var(--rouge-erreur-fonce)} .ico-shazam.non-abouti{background:rgba(245,159,0,.18);border-color:rgba(245,159,0,.55);color:#f59f00} /* Pied de carte : boutons d'action (la méta est passée sous le lecteur). */ .carte-pied{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem 1.5rem;flex-wrap:wrap;margin-top:.4rem} .carte-pied .barre-actions{flex:0 0 auto} /* Boutons d'action de la console : moitié moins hauts que le bouton standard. */ .barre-actions .bouton{padding:.4rem .9rem;font-size:.9rem} .form-supprimer{margin-left:auto} /* Vue « Feedback » de la console : tuile = lecteur + infos compactes (2 lignes) puis groupes */ .fb-tuile{background:var(--fond2);border:1px solid var(--bord);border-radius:14px;padding:1rem 1.1rem;margin-bottom:1rem} .fb-morceau audio{width:100%;height:38px;margin-bottom:.3rem} .fb-morceau .fb-infos{margin:0;font-size:.9rem;line-height:1.4} .fb-morceau .fb-titre{font-weight:600} .fb-morceau .fb-sous{color:var(--gris);font-size:.85rem} .fb-groupe{border-top:1px solid var(--bord);margin-top:.5rem;padding-top:.5rem} .fb-qui{font-size:.82rem;color:var(--gris);margin:0 0 .3rem} .fb-ligne{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;padding:.2rem 0} .fb-ligne .fb-type{font-weight:600} .fb-ligne .fb-type-retrait{color:var(--rouge-erreur)} /* demande de retrait (droit d'auteur) : attire l'œil de l'admin */ .fb-actions{display:inline-flex;gap:.4rem;margin-left:auto} .fb-actions .bouton{padding:.3rem .7rem;font-size:.85rem} .fb-commentaire-item{font-style:italic;margin:.2rem 0;padding:.2rem 0} .fb-badge{margin:.3rem 0 0} .fb-badge a{color:var(--magenta);text-decoration:none;font-size:.85rem} .admin-filtre{display:flex;flex-wrap:wrap;gap:.5rem .8rem;align-items:flex-end;background:var(--fond2);border:1px solid var(--bord);border-radius:12px;padding:.7rem .8rem;margin-bottom:1rem} .admin-filtre .champ-vue{display:flex;gap:.9rem;align-items:center;align-self:flex-end;padding-bottom:.35rem} .admin-filtre .champ-vue label{display:flex;align-items:center;gap:.35rem;margin:0;color:var(--texte);font-weight:600;font-size:.95rem;cursor:pointer} .admin-filtre input[type=radio]{width:auto;min-width:0;padding:0;border:0;background:none;accent-color:var(--magenta)} .admin-filtre .champ{display:flex;flex-direction:column;gap:.2rem} .admin-filtre label{margin:0;font-size:.78rem;color:var(--gris)} .admin-filtre input{padding:.5rem .65rem;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;font-size:.9rem} .admin-filtre input[type=search]{width:180px} .admin-filtre input[type=date]{color-scheme:dark;width:150px} .admin-filtre .reinit{color:var(--gris);font-size:.85rem;align-self:center} .badge-style{display:inline-block;background:rgba(255,255,255,.1);border-radius:20px;padding:.1rem .6rem;font-size:.75rem;color:var(--texte);margin-left:.4rem} /* ===== Catalogue (accueil : grille de styles → liste d'un style) ===== */ .catalogue{margin:1.2rem 0 0} .cat-vide{color:var(--gris);font-style:italic;line-height:1.5} /* Vue grille : une tuile par style (2 de large sur mobile, 3 sur ordinateur) */ .style-grille{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem} /* Tuile = fond « dégradé maillé » multi-teintes (couleurs par style ci-dessous), taille fixe identique, nom en bas + compteur en coin. */ .style-tuile{position:relative;height:150px;border-radius:14px;overflow:hidden;border:1px solid var(--bord); display:flex;align-items:flex-end;padding:.7rem;color:#fff;text-decoration:none; background: radial-gradient(circle at 18% 20%, var(--c1), transparent 58%), radial-gradient(circle at 82% 28%, var(--c2), transparent 55%), radial-gradient(circle at 50% 92%, var(--c3), transparent 62%), var(--c2); transition:transform .12s, box-shadow .12s} @media (hover:hover){.style-tuile:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(0,0,0,.45)}} .style-tuile-nom{position:relative;z-index:2;font-weight:800;font-size:1.02rem;line-height:1.15;text-shadow:0 1px 6px rgba(0,0,0,.55)} .style-tuile-nb{position:absolute;top:.55rem;right:.6rem;z-index:2;font-size:.72rem;font-weight:700;color:#fff;background:rgba(0,0,0,.35);border-radius:20px;padding:.08rem .5rem} .style-tuile.vide{filter:grayscale(.9) brightness(.55);opacity:.55;pointer-events:none;cursor:default} /* Palette « dégradé maillé » par style (source unique des couleurs de tuile) */ .st-decouvertes{--c1:#ff4d6d;--c2:#b5179e;--c3:#7209b7} .st-pop{--c1:#ff7eb3;--c2:#ff4d6d;--c3:#a4133c} .st-rock{--c1:#ff6b6b;--c2:#c9184a;--c3:#6a040f} .st-electro{--c1:#48e5ff;--c2:#2d6cdf;--c3:#14135a} .st-rap{--c1:#c77dff;--c2:#7b2cbf;--c3:#3c096c} .st-soul{--c1:#ffd166;--c2:#fb8500;--c3:#9a3412} .st-latino{--c1:#ff9e00;--c2:#ff5400;--c3:#bc3908} .st-ambient{--c1:#80ffea;--c2:#48bfe3;--c3:#1b4965} .st-monde{--c1:#80ed99;--c2:#38a3a5;--c3:#16697a} /* Message flottant (afficherMessage, inc-layout.php) : bandeau opaque en haut de l'écran, coche verte (réussite) ou croix rouge (erreur) qui se trace dans un rond pâle ; effacé au bout de 2 s (réussite) ou 4 s (erreur) */ .bandeau-message{position:fixed;left:50%;top:1rem;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:.7rem;width:max-content;max-width:min(30rem,92vw);padding:.7rem 1.1rem .7rem .75rem;background:var(--fond2);color:var(--texte);border:1px solid rgba(255,255,255,.12);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.55);font-size:.95rem;line-height:1.35;opacity:1;transition:opacity .3s;pointer-events:none} .bandeau-message.efface{opacity:0} .bm-symbole{flex:0 0 auto;width:1.7rem;height:1.7rem} .bm-rond{fill:rgba(52,211,153,.14)} .bandeau-message.erreur .bm-rond{fill:rgba(var(--rouge-erreur-rvb),.14)} .bm-trait{fill:none;stroke:#34d399;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;animation:bm-trace .35s ease-out .1s forwards} .bandeau-message.erreur .bm-trait{stroke:var(--rouge-erreur)} @keyframes bm-trace{to{stroke-dashoffset:0}} @media(prefers-reduced-motion:reduce){.bm-trait{animation:none;stroke-dashoffset:0}} /* Section de style = accordéon natif
/ */ .style-bloc{background:var(--fond2);border:1px solid var(--bord);border-radius:12px;margin-bottom:.7rem;overflow:hidden} .style-tete{cursor:pointer;padding:.85rem 1rem;font-weight:700;display:flex;align-items:center;gap:.6rem;list-style:none;user-select:none} .style-tete::-webkit-details-marker{display:none} .style-tete::before{content:"❯";color:var(--bleu);font-size:1.8rem;transition:transform .15s} .style-bloc[open] .style-tete::before{transform:rotate(90deg)} @media (hover:hover){.style-tete:hover{background:rgba(255,255,255,.03)}} .style-compteur{margin-left:auto;background:rgba(255,255,255,.1);border-radius:20px;padding:.05rem .6rem;font-size:.8rem;color:var(--gris);font-weight:600} /* Liste des morceaux d'un style + bloc compact (1 ligne sur ordi) */ .liste-morceaux{padding:.2rem .6rem .6rem} .morceau{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;padding:.55rem .3rem;border-top:1px solid var(--bord)} .liste-morceaux .morceau:first-child{border-top:0} .aime-form,.feedback{margin:0} .aime{display:inline-flex;align-items:center;gap:.3rem;background:none;border:0;padding:0;font-size:.9rem;color:var(--gris);cursor:pointer;white-space:nowrap} @media (hover:hover){.aime:hover{color:#fff}} /* Damier de notes ❤️ : 2×2 petits cœurs remplis dans le sens de lecture selon la note (n0 à n4) ; « a-supprimer » = marqué à supprimer par son déposant (4 cœurs vides, barrés en diagonale). */ .damier{display:inline-grid;grid-template-columns:repeat(2,.62rem);grid-auto-rows:.62rem;font-size:.66rem;line-height:.62rem;text-align:center} .damier i{font-style:normal;color:rgba(255,255,255,.35)} .damier i::before{content:"\2661"} /* ♡ cœur vide */ .damier.n1 i:nth-child(-n+1),.damier.n2 i:nth-child(-n+2), .damier.n3 i:nth-child(-n+3),.damier.n4 i:nth-child(-n+4){color:var(--rouge-coeur)} .damier.n1 i:nth-child(-n+1)::before,.damier.n2 i:nth-child(-n+2)::before, .damier.n3 i:nth-child(-n+3)::before,.damier.n4 i:nth-child(-n+4)::before{content:"\2665"} /* ♥ cœur plein */ .damier.a-supprimer{background:linear-gradient(to top right,transparent calc(50% - 1px),var(--rouge-coeur) calc(50% - 1px),var(--rouge-coeur) calc(50% + 1px),transparent calc(50% + 1px))} /* Morceau retiré d'une playlist sans recharger la page : sa ligne est masquée. */ .morceau.retire{display:none} .morceau .infos{flex:1 1 32%;min-width:0;display:flex;align-items:baseline;gap:.4rem;flex-wrap:wrap} /* Titre sur 1 ligne, coupé par « … » s'il est trop long (titre complet au survol) ; 2 lignes au plus sur mobile. Sur ordinateur, toutes les infos tiennent sur 1 ligne : seul le titre se comprime (l'artiste est plafonné à 30 % de la largeur, coupé par « … » au-delà) ; sur mobile, les infos passent à la ligne (voir le seuil unique, en fin de fichier). */ .morceau .infos .titre{font-weight:600;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} a.lien-artiste{color:inherit;text-decoration:underline} /* lien vers le site de l'auteur : souligné comme tout lien */ .morceau .infos .artiste{color:var(--texte);font-size:.9rem} .morceau .infos .badge-style{margin-left:0} .morceau select{min-width:0;padding:.3rem .4rem;font-size:.8rem} /* Menu « ➕ Playlist » : panneau dépliable à cases (une par playlist, cochée si le morceau y est) */ .menu-playlists{position:relative} .menu-playlists-tete{list-style:none;cursor:pointer;font-size:.8rem;padding:.3rem .6rem;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:rgba(255,255,255,.06);white-space:nowrap} .menu-playlists-tete::-webkit-details-marker{display:none} .menu-playlists[open] .menu-playlists-tete{border-color:var(--magenta)} .menu-playlists-panneau{position:absolute;right:0;top:calc(100% + .3rem);z-index:6;min-width:13rem;max-width:80vw;max-height:16rem;overflow-y:auto;padding:.4rem;background:var(--fond2);border:1px solid rgba(255,255,255,.18);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.5);display:flex;flex-direction:column;gap:.1rem} .menu-playlists-panneau label{display:flex;align-items:center;gap:.5rem;margin:0;padding:.45rem .5rem;border-radius:6px;cursor:pointer;font-size:.9rem;color:var(--texte)} @media (hover:hover){.menu-playlists-panneau label:hover{background:rgba(255,255,255,.06)}} .menu-playlists-panneau input{accent-color:var(--magenta);width:1.05rem;height:1.05rem;flex:0 0 auto} .menu-playlists-nouvelle{margin-top:.2rem;padding:.45rem .5rem;border:0;border-top:1px solid var(--bord);background:none;color:var(--gris);text-align:left;font-size:.9rem;cursor:pointer} @media (hover:hover){.menu-playlists-nouvelle:hover{color:#fff}} .menu-playlists-nouvelle[hidden]{display:none} .menu-playlists-creer{display:flex;gap:.4rem;margin-top:.2rem;padding:.4rem .2rem 0;border-top:1px solid var(--bord)} .menu-playlists-creer[hidden]{display:none} .menu-playlists-creer input{flex:1 1 auto;min-width:0;padding:.5rem .6rem;font-size:16px;border-radius:6px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff} .menu-playlists-creer .bouton-mini{margin-left:0} .bouton-mini{padding:.4rem .7rem;border:0;border-radius:8px;background:var(--magenta);color:#fff;font-weight:600;cursor:pointer;margin-left:.3rem} /* 💬 Feedback (contribution auditeur) : le bouton déplie un petit formulaire adaptatif */ .feedback-tete{cursor:pointer;font-size:.85rem;color:var(--gris);white-space:nowrap;list-style:none} @media (hover:hover){.feedback-tete:hover{color:var(--texte)}} .feedback-tete::-webkit-details-marker{display:none} .feedback[open]{flex-basis:100%;order:6} .feedback-form{display:flex;flex-wrap:wrap;gap:.5rem;align-items:flex-end;margin-top:.5rem;padding:.6rem;background:rgba(255,255,255,.04);border:1px solid var(--bord);border-radius:10px} .feedback-form label{display:flex;flex-direction:column;gap:.2rem;font-size:.8rem;color:var(--gris)} .feedback-form select,.feedback-form input{padding:.35rem .5rem;font-size:.85rem} .feedback-form .fb-commentaire{flex:0 1 220px} .feedback-form .fb-commentaire input{width:100%} .feedback-form .fb-retrait{flex-direction:row;align-items:center;gap:.4rem;color:var(--texte)} .feedback-lien{font-size:.85rem;color:var(--gris);white-space:nowrap} @media (hover:hover){.feedback-lien:hover{color:var(--texte)}} /* Symboles des boutons de lecture (▶ ⏸ ⏮ ⏭ 🔀 📍) : dessins vectoriels dans la couleur du bouton (currentColor), et non des caractères, que les téléphones remplacent par des emoji colorés. Posés par icone() (inc-layout.php) : . */ .ic{display:inline-block;width:1em;height:1em;vertical-align:middle;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat} .ic-lecture{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.5v15l12.5-7.5z'/%3E%3C/svg%3E")} .ic-pause{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 4.5h4v15h-4zM13.5 4.5h4v15h-4z'/%3E%3C/svg%3E")} .ic-prec{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5h2.5v14H5zM19 5v14L8.5 12z'/%3E%3C/svg%3E")} .ic-suiv{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.5 5H19v14h-2.5zM5 5v14l10.5-7z'/%3E%3C/svg%3E")} .ic-aller{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3Cpath d='M10.9 13h2.2l-.7 9.5h-.8z'/%3E%3C/svg%3E")} .ic-aleatoire{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h3.5c5 0 6 10 11 10H21M3 17h3.5c2 0 3.2-1.6 4.2-3.5M13.3 10.5c1-1.9 2.2-3.5 4.2-3.5H21M18 4l3 3-3 3M18 14l3 3-3 3'/%3E%3C/g%3E%3C/svg%3E")} /* Bouton ▶ en tête de chaque ligne (confie le morceau au lecteur du bandeau) */ .bouton-lecture{flex:0 0 auto;width:34px;height:34px;border-radius:50%;border:1px solid var(--bord);background:rgba(255,255,255,.06);color:var(--texte);font-size:.85rem;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer} @media (hover:hover){.bouton-lecture:hover{background:rgba(var(--rouge-coeur-rvb),.2);color:#fff}} .morceau.en-lecture .bouton-lecture{border-color:var(--bleu);color:var(--bleu)} .morceau .infos .cadenas-prive{font-size:.68em;opacity:.7;align-self:center} .morceau .infos .duree{color:var(--gris);font-size:.8rem;font-variant-numeric:tabular-nums} /* Infos discrètes (écoutes, date d'ajout, lien d'origine) calées à droite, contre les actions */ .morceau .infos .meta{margin-left:auto;display:inline-flex;align-items:baseline;gap:.7rem;color:var(--gris);font-size:.78rem;white-space:nowrap;font-variant-numeric:tabular-nums} .lien-origine{text-decoration:underline} /* lien vers la vidéo d'origine (lignes et bandeau) : souligné comme tout lien */ .morceau .infos .lien-origine{color:var(--gris)} @media (hover:hover){.morceau .infos .lien-origine:hover{color:var(--texte)}} /* Bandeau de lecture : seul lecteur de la page, fixé en haut du contenu pendant le défilement */ .bandeau-lecteur{position:sticky;top:0;z-index:5;margin:-.75rem -1.2rem .75rem;padding:.5rem 1.2rem;background:var(--fond2);border-bottom:1px solid var(--bord);display:flex;align-items:center;gap:.4rem .9rem;flex-wrap:wrap} .bandeau-lecteur[hidden]{display:none} .bl-infos{flex:3 1 220px;min-width:0;display:flex;align-items:baseline;gap:.45rem;overflow:hidden;white-space:nowrap} .bl-point{flex:0 0 auto;align-self:center} .bl-infos .cadenas-prive{flex:0 0 auto;align-self:center;font-size:.68em;opacity:.7} .bl-infos .cadenas-prive[hidden]{display:none} .bl-titre{font-weight:600;overflow:hidden;text-overflow:ellipsis;min-width:0} .bl-sous{color:var(--texte);font-size:.9rem;overflow:hidden;text-overflow:ellipsis;min-width:0} /* Date d'ajout + lien d'origine du morceau en cours : dans le bandeau sur téléphone seulement (sur PC, ils restent dans les listes — voir le seuil unique, en fin de fichier). */ .bl-origine{display:none;color:var(--gris);font-size:.8rem;gap:.6rem;flex:0 0 auto;font-variant-numeric:tabular-nums} .bl-origine .lien-origine{color:var(--gris)} /* Actions sur le morceau en cours (💬 Réagir, ➕ Playlist) : dans le bandeau sur téléphone seulement (sur PC, elles restent dans chaque ligne — voir le seuil unique, en fin de fichier). */ .bl-actions{display:none} .bl-commandes{flex:2 1 320px;min-width:0;display:flex;align-items:center;gap:.4rem} .bl-jouer{flex:0 0 auto;width:38px;height:38px;border-radius:50%;border:0;background:var(--magenta);color:#fff;font-size:.95rem;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0} .bl-temps{flex:0 0 auto;color:var(--gris);font-size:.78rem;font-variant-numeric:tabular-nums} .bl-progression{flex:1 1 auto;min-width:60px;accent-color:var(--magenta)} /* Damier ❤️ du morceau en cours, même dessin que dans les listes : deux exemplaires, un seul visible — sur PC en tête de ligne (bl-aimer-pc), sur téléphone au bout des commandes (bl-aimer-tel, voir le seuil unique, en fin de fichier). */ .bl-aimer{flex:0 0 auto;display:inline-flex;align-items:center;align-self:center} .bl-aimer-tel{display:none} .bl-aimer[hidden]{display:none} .bl-aller{flex:0 0 auto;background:none;color:var(--bleu);border:0;font-size:1.05rem;line-height:1;cursor:pointer;padding:0 .1rem;opacity:.8} @media (hover:hover){.bl-aller:hover{opacity:1}} .bl-aller-titre{display:none} /* 📍 en haut à droite du bandeau : téléphone seulement (voir le seuil unique, en fin de fichier) */ .saut{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:1px solid var(--bord);background:rgba(255,255,255,.06);color:var(--texte);cursor:pointer;font-size:.75rem;line-height:1;display:inline-flex;align-items:center;justify-content:center;padding:0} @media (hover:hover){.saut:hover{background:rgba(var(--rouge-coeur-rvb),.2);color:#fff}} /* Mes playlists : création + retrait + suppression */ .creer-playlist{display:flex;gap:.6rem;margin:1.2rem 0 0;flex-wrap:wrap} .creer-playlist input{flex:1 1 240px;padding:.6rem .8rem;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;font-size:1rem} .creer-playlist input::placeholder{color:rgba(255,255,255,.4)} .supprimer-playlist{flex-basis:100%;margin:.4rem 0 0;padding-top:.6rem;border-top:1px solid var(--bord)} .supprimer-playlist .bouton{padding:.5rem .9rem;font-size:.9rem} /* Tableau de bord (page-admin-tableau-de-bord.php) */ .stat-cartes{display:flex;flex-wrap:wrap;gap:.8rem;margin:.5rem 0 1rem} .stat-carte{flex:1 1 130px;background:var(--fond2);border:1px solid var(--bord); border-radius:12px;padding:.9rem 1rem;display:flex;flex-direction:column;gap:.15rem} .stat-chiffre{font-size:1.9rem;font-weight:700;color:var(--texte);line-height:1} .stat-libelle{font-size:.85rem;color:var(--gris);font-weight:600} .stat-detail{font-size:.75rem;color:var(--magenta);font-weight:600} .stat-table{width:100%;border-collapse:collapse;margin:.3rem 0 1rem} .stat-table th{text-align:left;font-size:.78rem;color:var(--gris);font-weight:600; padding:.4rem .6rem;border-bottom:1px solid var(--bord)} .stat-table td{padding:.45rem .6rem;border-bottom:1px solid var(--bord);font-size:.92rem} .stat-table .stat-nombre{text-align:right;font-weight:700} .stat-table .stat-alerte td{color:var(--rouge-erreur)} .stat-table .stat-fort td{font-weight:700} /* lignes de total */ /* Cellule d'actions (Imports en échec) : les 2 formulaires côte à côte, boutons petits et non gras. */ .stat-actions{display:flex;gap:.4rem;flex-wrap:nowrap;justify-content:flex-end} .stat-actions .stat-action{display:inline-block;margin:0} .stat-actions .bouton{padding:.3rem .6rem;font-size:.78rem;font-weight:500;white-space:pre-line;text-align:center} .statut-ok{color:#4dd08a;font-weight:600} .statut-attente{color:var(--gris);font-style:italic} .stat-avis{background:var(--fond2);border:1px solid var(--bord);border-radius:10px; padding:.7rem .9rem;margin:.5rem 0} .stat-avis-meta{font-size:.78rem;color:var(--gris);margin:0 0 .3rem} .stat-avis-meta .bouton{padding:.25rem .55rem;font-size:.75rem;font-weight:500;margin-left:.5rem} .stat-avis-message{margin:0;line-height:1.4;white-space:pre-line} /* Point bleu clignotant « en lecture » : dessin unique pour le bandeau, la console admin, et devant le titre du morceau en cours de lecture et le nom de sa playlist. */ .bl-point,.en-lecture .point-lecture-apercu, .morceau.en-lecture .titre::before,.style-bloc.en-lecture .style-nom::before{ width:var(--taille-point-lecture);height:var(--taille-point-lecture);border-radius:50%; background:var(--bleu);box-shadow:0 0 4px var(--bleu);animation:point-lecture 1.8s ease-in-out infinite; } .morceau.en-lecture .titre::before,.style-bloc.en-lecture .style-nom::before{ content:'';display:inline-block;margin-right:.38rem;vertical-align:middle; } @keyframes point-lecture{0%,100%{opacity:1}50%{opacity:.2}} /* Ligne « style + bouton » (import TikTok et dépôt MP3) */ .ligne-style-bouton{display:flex;align-items:center;gap:.6rem;margin-top:.9rem} .ligne-style-bouton input[type=url]{flex:1 1 auto;min-width:0} .ligne-style-bouton select{flex:0 1 auto;min-width:0} .ligne-style-bouton .bouton{flex:0 0 auto;margin-top:0;white-space:nowrap} /* Page « Charger mes musiques » (dépôt MP3) */ .carte-page-charger{max-width:760px;margin-top:0} .carte-page-charger .accueil-auteur{margin:.2rem 0 .7rem;font-size:.9rem;color:var(--gris)} .carte-page-charger label{margin:.45rem 0 .2rem} .carte-page-charger .ligne-style-bouton{margin-top:.7rem} .carte-page-charger .ligne-style-bouton .bouton{margin-top:0} /* Titre de la section de dépôt */ .charger-titre{font-size:1.3rem;margin:0 0 .7rem} /* Zone de dépôt : on masque le bouton natif du navigateur (texte non traduisible, dans la langue du navigateur) et on affiche notre propre texte, traduit. Le clic sur toute la zone ouvre quand même le sélecteur (input caché mais inclus dans le