/* Fonctions locales communes (js/plus.js) : Ma musique, tests d’oreille, mode mains libres, plan de la semaine */
/* bord des champs : 3:1 au moins contre la carte, en clair (3,3) comme en sombre (4,4) */
:root{--field:color-mix(in srgb,var(--muted) 75%,var(--card))}
.u-hero h2{margin:0}.u-ic{width:44px;height:44px;flex:none;color:var(--violet)}
.u-file{cursor:pointer;text-align:center}
.u-modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.u-filters{gap:8px}.u-filters input,.u-filters select,.u-form select,.u-form input,.u-form textarea{flex:1;min-width:0;width:100%;font:inherit;padding:10px 12px;border-radius:var(--r-sm);border:2px solid var(--field);background:var(--card);color:var(--ink)}
.u-form label{display:flex;flex-direction:column;gap:4px;font-weight:700;font-size:.85rem}
.u-form label.row{flex-direction:row;align-items:center;min-height:44px}
.u-list{display:flex;flex-direction:column;gap:6px}
.u-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:2px solid var(--line);background:var(--card);border-radius:var(--r-md);padding:8px 10px;color:inherit;font:inherit}
.u-cov{width:42px;height:42px;flex:none;border-radius:var(--r-sm);background:var(--soft);background-size:cover;background-position:center}
.u-cov.big{width:72px;height:72px;border-radius:var(--r-md)}
.u-meta{display:flex;flex-direction:column;min-width:0;flex:1}
/* titres, artistes : retour à la ligne plutôt que coupure (taille de texte agrandie : rien ne déborde ni ne disparaît) */
.u-meta b,.u-meta span,.u-ell{min-width:0;max-width:100%;overflow-wrap:anywhere;white-space:normal}
.u-tags{display:flex;gap:4px;flex:none}.u-key{background:var(--blue-soft);color:var(--blue-t)}
.u-audio{width:100%}
.u-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,6.5em),1fr));gap:8px}.u-facts div{display:flex;flex-direction:column;min-width:0;overflow-wrap:anywhere;background:var(--soft);border-radius:var(--r-sm);padding:8px}
.u-note{background:var(--soft);border-left:4px solid var(--gold);padding:6px 10px;border-radius:var(--r-xs)}
.u-dot{width:10px;height:10px;border-radius:50%;background:var(--violet);animation:upulse 1s infinite alternate}
@keyframes upulse{from{opacity:.3}to{opacity:1}}
.u-carbtn{display:flex;align-items:center;gap:14px;width:100%;text-align:left;border:none;border-radius:var(--r-xl);padding:16px;background:linear-gradient(110deg,var(--blue),var(--brand));color:#fff;font:inherit;box-shadow:var(--glow) var(--brand)}
.u-carbtn>span:first-child svg{width:40px;height:40px}.u-carbtn>span:last-child{display:flex;flex-direction:column;gap:2px}.u-carbtn b{font-size:1.15rem}
.u-car{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:18px;min-height:60vh}
.u-carstate{font-size:1.1rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:var(--violet-t)}
.u-carq{font-size:1.7rem;font-weight:800;line-height:1.25;max-width:640px;overflow-wrap:anywhere}.u-carh{font-size:1.3rem;color:var(--muted)}
/* journal de digging, musique maîtrisée */
.u-digs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.u-digs li{display:flex;gap:10px;align-items:center;min-width:0}
.u-digs .u-cov{width:32px;height:32px;border-radius:var(--r-xs)}
.u-gold{color:var(--gold-t)}
.u-mast{display:flex;flex-direction:column;gap:4px;background:var(--gold-soft);border-radius:var(--r-md);padding:10px 12px}
.u-mast>b{font:800 1.4rem var(--display);color:var(--gold-t)}
.u-golddot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 2px var(--gold-t);vertical-align:1px}
/* Finitions design (nov. 2026) : boutons côte à côte de même hauteur, sur une ligne quand c'est possible */
.grid2>.btn.sm{display:flex;align-items:center;justify-content:center;gap:6px;min-height:48px;line-height:1.2}
.u-file{display:flex;align-items:center;justify-content:center}
/* Accessibilité (nov. 2026) : cibles de 44 px, contrastes AA, texte agrandi à 200 % sans débordement */
/* cases à cocher des formulaires : 22 px à l'écran, 44 px sous le doigt (zone invisible autour) */
.u-form input[type=checkbox]{appearance:none;-webkit-appearance:none;flex:none;width:44px;height:44px;margin:-11px -11px -11px 0;padding:0;border:none;background:none;display:grid;place-items:center;cursor:pointer;outline-offset:-6px}
.u-form input[type=checkbox]::before{content:"";width:22px;height:22px;box-sizing:border-box;border:2px solid var(--field);border-radius:var(--r-xs);background:var(--card) center/16px no-repeat}
.u-form input[type=checkbox]:checked::before{border-color:var(--violet-t);background-color:var(--violet-t);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .u-form input[type=checkbox]:checked::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23100d1a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}}
:root[data-theme="dark"] .u-form input[type=checkbox]:checked::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23100d1a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
/* blocs repliables des fiches : 44 px de haut */
.sheet details.card>summary{cursor:pointer;min-height:44px;box-sizing:border-box;padding-block:12px;margin-block:-12px}
/* champs et recherche de « Ma musique » : bord visible */
[data-ulib] .search{border-color:var(--field)}
/* jauge « bibliothèque reconnue » : remplissage or foncé sur piste claire cerclée, lisible sur le fond doré */
.u-mast .meter{background:var(--card);box-shadow:inset 0 0 0 1.5px var(--gold-t)}
/* paires de boutons de Ma musique : une colonne quand le texte agrandi ne tient plus sur deux */
:is([data-ulib],.u-stylex,.u-form) .grid2,.grid2:has(>[data-an]){grid-template-columns:repeat(auto-fit,minmax(min(100%,8.5em),1fr))}
:is([data-ulib],.u-stylex,.u-form) .grid2>*,.grid2:has(>[data-an])>*{min-width:0;overflow-wrap:anywhere}

/* pastille de style de la découverte du jour : petite à l'écran, 44 px de haut sous le doigt */
#udisc button.pill{position:relative;border:none;cursor:pointer;margin-block:6px}
#udisc button.pill::after{content:"";position:absolute;inset:-12px -4px}
/* mode mains libres : consignes de sécurité au volant (feuille avant le premier démarrage, rappel en puces sur l’écran et dans les réglages) */
.u-carsafe{max-width:30em;margin-top:auto;text-align:left}
.u-carsafe ul{margin:2px 0 0;padding-left:1.2em;display:flex;flex-direction:column;gap:2px}
.u-note[data-carsafe] ul{margin:4px 0 0;padding-left:1.2em;display:flex;flex-direction:column;gap:2px}
.u-carsafety .clist li{margin-bottom:6px}
.u-carblack{position:fixed;inset:0;z-index:50;background:#000;display:flex;align-items:flex-end;justify-content:center;padding:0 16px calc(24px + env(safe-area-inset-bottom))}
.u-carblack[hidden]{display:none}
.u-carhint{color:#2a2a2a;font-size:.8rem;margin:0}
.u-carout{position:absolute;top:calc(10px + env(safe-area-inset-top));right:10px;width:48px;height:48px;border:none;border-radius:50%;background:#000;color:#3a3a3a;display:grid;place-items:center}
.u-carout svg{width:24px;height:24px}
body:has(.u-carblack:not([hidden])) .toast{opacity:0}
/* Ma musique : les deux boutons d'ajout tiennent chacun sur une ligne ; bibliothèque vide : étapes numérotées */
[data-ulib] .u-hero .grid2>.u-file{padding-inline:12px}
.u-empty ol.clist{gap:8px}
.u-dighead{flex-wrap:wrap;gap:2px 10px}.u-dighead>span{white-space:nowrap}