/* Studio avec Pier, page de connexion, page des accès, lecteur audio (11/11/2026). Thème clair, celui de l'appli Chant.
   Les règles « .la-… » (lecteur audio) servent aussi dans la fiche d'une chanson (index.html). */
@font-face{font-family:"Inter";src:url("/web/polices/inter.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("/web/polices/instrument-serif-italique.woff2") format("woff2");font-style:italic;font-weight:400;font-display:swap}

/* ------------------------------------------------------------ lecteur audio */
.la{--v:#7a2433;--t:#ebe6df;--d:#6b645d;outline:0}
.la-barre{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#fff;border:1px solid var(--t);border-radius:12px;padding:8px 10px}
.la-barre button,.la-barre select{font:inherit;font-size:.85rem;font-weight:600;border:1px solid #d9d2c8;background:#fff;border-radius:9px;padding:6px 9px;cursor:pointer;color:#1c1917}
.la-barre button:hover{background:#f4f0ea}
.la-lire{width:38px;height:38px;display:grid;place-items:center;padding:0!important;background:var(--v)!important;border-color:var(--v)!important}
.la-lire svg{width:18px;height:18px;fill:#fff}
.la-lire .i-pause,.la.joue .la-lire .i-lire{display:none}
.la.joue .la-lire .i-pause{display:block}
.la-piste{position:relative;flex:1 1 180px;height:22px;cursor:pointer;touch-action:none}
.la-piste::before{content:"";position:absolute;left:0;right:0;top:9px;height:4px;border-radius:4px;background:var(--t)}
.la-charge,.la-fait{position:absolute;left:0;top:9px;height:4px;border-radius:4px}
.la-charge{background:#d9d2c8}.la-fait{background:var(--v)}
.la-boucle{position:absolute;top:5px;height:12px;background:rgba(154,101,18,.25);border-radius:3px}
.la-tete{position:absolute;top:4px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--v);box-shadow:0 1px 3px rgba(0,0,0,.25)}
.la-bulle{position:absolute;bottom:22px;transform:translateX(-50%);background:#1c1917;color:#fff;font-size:.75rem;padding:2px 6px;border-radius:6px;pointer-events:none}
.la-temps{font-variant-numeric:tabular-nums;font-size:.85rem;color:var(--d);min-width:84px;text-align:center}
.la-ab.attente{background:#fbf1df!important}.la-ab.actif{background:#9a6512!important;color:#fff!important}
.la-barre select.la-vitesse{width:auto!important;margin:0;padding:6px 8px}
.la-barre input.la-volume{width:80px!important;margin:0;padding:0;border:0;box-shadow:none;accent-color:var(--v)}
.la-titre{font-size:.85rem;color:var(--d);margin:6px 2px 4px;min-height:1.2em}
.la-liste{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.la-liste li{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border:1px solid var(--t);border-radius:10px;padding:6px 8px;background:#fff}
.la-liste li.courante{border-color:var(--v);box-shadow:0 0 0 2px #f6e9eb}
.la-choisir{flex:1 1 200px;display:flex;align-items:center;gap:10px;background:none;border:0;text-align:left;font:inherit;cursor:pointer;padding:4px;color:#1c1917}
.la-num{width:24px;height:24px;border-radius:50%;background:#f4f0ea;display:grid;place-items:center;font-size:.75rem;font-weight:700;flex:none}
.la-nom{display:flex;flex-direction:column;word-break:break-word}.la-nom small{color:var(--d);font-size:.78rem}
.la-valider{font:inherit;font-size:.82rem;font-weight:600;border:1px solid #2f7a4f;color:#2f7a4f;background:#fff;border-radius:999px;padding:5px 12px;cursor:pointer}
.la-valider.oui{background:#2f7a4f;color:#fff}
.la-aide{font-size:.75rem;color:#a39b92;margin:8px 2px 0}

/* ------------------------------------------------------------ pages Studio / connexion / accès */
body.studio{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:#1c1917;background:#faf8f5;-webkit-font-smoothing:antialiased}
.studio *{box-sizing:border-box}
.studio header{position:sticky;top:0;z-index:5;background:rgba(250,248,245,.9);backdrop-filter:blur(12px);border-bottom:1px solid #ebe6df}
.studio .tete{max-width:980px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:14px;justify-content:space-between}
.studio .marque{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.1rem}
.studio .marque svg{width:30px;height:30px}.studio .marque rect{fill:#7a2433}.studio .marque path{stroke:#fff;stroke-width:2.2;fill:none;stroke-linecap:round}.studio .marque circle{fill:#fff}
.studio .marque em{font-family:"Instrument Serif",serif;font-weight:400;font-size:1.35rem;color:#7a2433}
.studio main{max-width:980px;margin:0 auto;padding:22px 20px 60px}
.studio h1{font-size:1.6rem;margin:0}
.studio .sous{color:#6b645d;margin:6px 0 18px}
.studio .bouton{font:inherit;font-weight:600;border-radius:10px;padding:9px 16px;border:1px solid #d9d2c8;background:#fff;cursor:pointer;color:#1c1917;text-decoration:none}
.studio .bouton.principal{background:#7a2433;border-color:#7a2433;color:#fff}
.studio .carte{background:#fff;border:1px solid #ebe6df;border-radius:14px;box-shadow:0 1px 2px rgba(28,25,23,.05),0 8px 28px -14px rgba(28,25,23,.18)}
.studio .chanson{margin:0 0 12px;overflow:hidden}
.studio .chanson>summary{list-style:none;cursor:pointer;padding:14px 18px;display:flex;align-items:center;gap:12px}
.studio .chanson>summary::-webkit-details-marker{display:none}
.studio .chanson .t{flex:1;min-width:0}.studio .chanson .t b{display:block}.studio .chanson .t span{color:#6b645d;font-size:.9rem}
.studio .statut{font-size:.78rem;font-weight:650;padding:4px 10px;border-radius:999px;background:#f4f0ea;color:#6b645d;white-space:nowrap}
.studio .statut.valide{background:#e7f3ec;color:#2f7a4f}.studio .statut.a_travailler{background:#fbf1df;color:#9a6512}
.studio .compteur{font-size:.8rem;color:#a39b92;white-space:nowrap}
.studio .corps{padding:4px 18px 18px;display:grid;gap:18px}
.studio h3{font-size:.75rem;text-transform:uppercase;letter-spacing:.07em;color:#6b645d;margin:0 0 8px}
.studio .statuts{display:flex;gap:8px;flex-wrap:wrap}
.studio .statuts button{font:inherit;font-weight:600;border:1px solid #d9d2c8;background:#fff;border-radius:999px;padding:7px 14px;cursor:pointer}
.studio .statuts button.pris[data-statut="valide"]{background:#2f7a4f;border-color:#2f7a4f;color:#fff}
.studio .statuts button.pris[data-statut="a_travailler"]{background:#9a6512;border-color:#9a6512;color:#fff}
.studio .statuts button.pris[data-statut=""]{background:#1c1917;color:#fff}
.studio .cases{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.studio .cases label{display:flex;gap:10px;align-items:center;cursor:pointer;padding:4px 0}
.studio .cases input{width:18px;height:18px;accent-color:#7a2433}
.studio .remarques{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:8px}
.studio .remarque{border-left:3px solid #7a2433;background:#faf8f5;border-radius:8px;padding:8px 12px;display:flex;gap:10px;align-items:flex-start}
.studio .remarque.faite{border-color:#2f7a4f;opacity:.65}.studio .remarque.faite .txt{text-decoration:line-through}
.studio .remarque .txt{flex:1;white-space:pre-wrap}
.studio .remarque small{display:block;color:#6b645d;font-size:.78rem;margin-top:2px}
.studio .remarque button{font:inherit;font-size:.78rem;border:0;background:none;color:#6b645d;cursor:pointer;text-decoration:underline}
.studio form.ajout{display:flex;gap:8px}
.studio input[type=text],.studio input[type=password],.studio textarea,.studio select{font:inherit;background:#fff;border:1px solid #d9d2c8;border-radius:10px;padding:9px 12px;width:100%}
.studio input:focus,.studio textarea:focus,.studio select:focus{outline:0;border-color:#7a2433;box-shadow:0 0 0 3px #f6e9eb}
.studio .note{background:#fbf1df;color:#6b4a0e;border-radius:10px;padding:10px 14px;margin:0 0 16px}
.studio .vide{color:#a39b92;font-style:italic;margin:0}
.studio .identifier{margin-top:28px}
.studio .toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(80px);background:#1c1917;color:#fff;padding:10px 18px;border-radius:12px;transition:transform .25s;z-index:20}
.studio .toast.vu{transform:translateX(-50%) translateY(0)}

/* connexion */
.studio.connexion{min-height:100vh;display:grid;place-items:center;padding:20px}
.connexion .boite{width:min(380px,100%);padding:30px 28px}
.connexion .marque{justify-content:center;margin-bottom:18px}
.connexion label{display:block;font-weight:600;font-size:.88rem;color:#6b645d;margin:0 0 14px}
.connexion label input{margin-top:6px}
.connexion .bouton{width:100%;padding:12px}
.connexion .erreur{background:#f6e9eb;color:#7a2433;border-radius:10px;padding:9px 12px;margin:0 0 14px;font-weight:550}
.connexion p.petit{font-size:.8rem;color:#a39b92;text-align:center;margin:16px 0 0}