/* ecoute.css — la Phonothèque : fiches d'écoute + lecteur local intégré. */

.eco-app { max-width: 1020px; margin: 0 auto; padding: 22px 18px 70px; font-family: 'Source Sans 3', system-ui, sans-serif; color: #1c1b2e; }

.eco-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; align-items: flex-start; }
.eco-sur { margin: 0; font: 600 11.5px system-ui, sans-serif; text-transform: uppercase; letter-spacing: .06em; color: #6a6890; }
.eco-head h1 { margin: 2px 0 6px; font-family: 'Source Serif 4', Georgia, serif; font-size: 28px; }
.eco-sous { margin: 0 0 8px; max-width: 660px; font-size: 13.5px; color: #4a4a68; }
.eco-droits { margin: 10px 0 18px; padding: 8px 12px; border-radius: 8px; font-size: 12px;
  background: #fdf6ec; border: 1px solid rgba(180,83,9,.25); color: #7a5a1e; }

/* ── État du dossier local ── */
.eco-dossier { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 20px;
  padding: 10px 14px; border-radius: 10px; background: #eef0f7; border: 1px solid rgba(28,27,46,.12); font-size: 13px; }
.eco-dossier.ok { background: #f2f9f5; border-color: rgba(45,106,79,.3); }
.eco-dossier b { font-weight: 700; }

/* ── Grille des fiches ── */
.eco-coffret-titre { margin: 26px 0 4px; font-family: 'Source Serif 4', Georgia, serif; font-size: 18px; }
.eco-coffret-sous { margin: 0 0 12px; font-size: 12.5px; color: #6a6890; }
.eco-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.eco-carte { display: flex; gap: 14px; padding: 12px; border: 1px solid rgba(28,27,46,.1); border-radius: 12px;
  background: #fff; cursor: pointer; }
.eco-carte:hover { border-color: #6a6ab0; }
.eco-carte-pochette { width: 84px; height: 84px; flex: 0 0 84px; border-radius: 10px; overflow: hidden; }
.eco-carte-pochette svg { width: 100%; height: 100%; display: block; }
.eco-carte h3 { margin: 0 0 3px; font-size: 15px; font-family: 'Source Serif 4', Georgia, serif; }
.eco-carte-sous { margin: 0 0 6px; font-size: 12px; color: #6a6890; }
.eco-dispo { font: 700 10.5px system-ui, sans-serif; color: #2d6a4f; }
.eco-nondispo { font: 600 10.5px system-ui, sans-serif; color: #8a8896; }

/* ── Fiche détaillée ── */
.eco-fiche { display: grid; grid-template-columns: 250px 1fr; gap: 26px; }
@media (max-width: 720px) { .eco-fiche { grid-template-columns: 1fr; } }
.eco-fiche-pochette { border-radius: 14px; overflow: hidden; box-shadow: 0 10px 30px rgba(28,27,46,.25); }
.eco-fiche-pochette svg { width: 100%; height: auto; display: block; }
.eco-fiche h2 { margin: 2px 0 2px; font-family: 'Source Serif 4', Georgia, serif; font-size: 24px; }
.eco-fiche-sous { margin: 0 0 10px; font-size: 14px; color: #55537a; }
.eco-fiche-desc { font-size: 14.5px; line-height: 1.65; }
.eco-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.eco-tag { padding: 3px 11px; border-radius: 999px; background: #eef0f7; border: 1px solid rgba(28,27,46,.12);
  font: 600 11.5px system-ui, sans-serif; color: #4a4a68; }
.eco-liens { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.eco-lien { display: inline-block; padding: 5px 13px; border-radius: 999px; background: #eef0f7;
  border: 1px solid rgba(28,27,46,.12); font: 600 12px system-ui, sans-serif; color: #2a2850; text-decoration: none; }
.eco-lien:hover { background: #e2e5f2; }

/* ── Lecteur ── */
.eco-lecteur { margin: 16px 0; padding: 14px 16px; border-radius: 12px; background: #16182b; color: #eceef8; }
.eco-lecteur .indispo { color: #9aa0c0; font-size: 13px; margin: 0; }
.eco-barre { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.eco-temps { font: 600 11.5px system-ui, sans-serif; color: #9aa0c0; min-width: 42px; }
.eco-piste-barre { flex: 1; height: 6px; border-radius: 3px; background: #2a2e45; cursor: pointer; }
.eco-avancee { height: 100%; width: 0%; border-radius: 3px; background: linear-gradient(90deg, #e0b04c, #f0d090); }
.eco-cmds { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.eco-cmd { border: 1px solid rgba(236,238,248,.25); background: transparent; color: #eceef8;
  border-radius: 999px; cursor: pointer; font: 600 12.5px system-ui, sans-serif; padding: 7px 14px; }
.eco-cmd:hover { background: #262a3f; }
.eco-cmd.principal { background: #e0b04c; color: #16182b; border: 0; padding: 9px 20px; }
.eco-fichier { margin: 6px 0 0; font: 500 11px system-ui, sans-serif; color: #9aa0c0; }

/* ── Repères ── */
.eco-reperes { margin: 12px 0; }
.eco-repere { display: inline-block; margin: 0 6px 6px 0; padding: 4px 12px; border-radius: 999px;
  background: #fdf4f5; border: 1px solid rgba(181,24,43,.3); font: 600 12px system-ui, sans-serif;
  color: #7a1f1a; cursor: pointer; }
.eco-repere:hover { background: #fbe8ea; }
.eco-repere-ajout { display: flex; gap: 8px; margin-top: 8px; }
.eco-repere-ajout input { flex: 1; padding: 6px 10px; border: 1px solid rgba(28,27,46,.2); border-radius: 8px; font-size: 12.5px; }

/* ── Carnet d'écoute ── */
.eco-carnet { margin-top: 20px; border-top: 2px dashed rgba(28,27,46,.15); padding-top: 12px; }
.eco-carnet h3 { margin: 0 0 4px; font-family: 'Source Serif 4', Georgia, serif; font-size: 18px; }
.eco-carnet-note { margin: 0 0 12px; font-size: 12.5px; color: #6a6890; }
.eco-question { margin-bottom: 14px; }
.eco-question p { margin: 0 0 6px; font-size: 14px; font-weight: 600; }
.eco-question textarea { width: 100%; box-sizing: border-box; border: 1px solid rgba(28,27,46,.18);
  border-radius: 8px; padding: 8px 10px; font: 400 13.5px 'Source Sans 3', sans-serif; min-height: 64px; }
.eco-carnet-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.eco-retour { margin-bottom: 14px; }
.btn-eco { display: inline-block; border: 1px solid rgba(28,27,46,.2); background: #fff; border-radius: 999px;
  cursor: pointer; padding: 7px 16px; font: 600 12.5px system-ui, sans-serif; color: #1c1b2e; text-decoration: none; }
.btn-eco:hover { background: #eef0f7; }
.btn-eco.principal { background: #b5182b; color: #fff; border: 0; }

/* Sélecteur de plage : un coffret compte des dizaines de plages, il faut pouvoir choisir. */
.eco-plages { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin:10px 0 4px; }
.eco-plages label { font:600 12px system-ui, sans-serif; color:var(--ink-2, #4a4a68); }
.eco-plages select { max-width:min(100%, 460px); }

/* Renvois posés sur les autres pages — n'existent que si le coffret est là */
.eco-renvoi { margin: 28px 0 0; padding: 16px 18px; border: 1px solid var(--bordure, #e5e3dd);
  border-left: 3px solid var(--vert, #2d6a4f); border-radius: 0 10px 10px 0; background: #fbfbf8; }
.eco-renvoi h3 { margin: 0 0 10px; font-size: 1rem; color: var(--vert, #2d6a4f); }
.eco-renvoi ul { margin: 0; padding-left: 18px; }
.eco-renvoi li { margin-bottom: 8px; line-height: 1.5; }
.eco-renvoi-qui { color: #6b7280; font-size: .9em; }
.eco-renvoi-sous { color: #6b7280; font-size: .88em; }
.eco-avert { margin: 10px 0; padding: 9px 12px; font-size: .9rem; line-height: 1.5;
  border-left: 3px solid #b58a2b; background: rgba(181,138,43,.09); border-radius: 0 6px 6px 0; }
.eco-libre { margin: 10px 0; padding: 9px 12px; font-size: .9rem; line-height: 1.5;
  border-left: 3px solid #2d6a4f; background: rgba(45,106,79,.07); border-radius: 0 6px 6px 0; }
.eco-partage { margin: 10px 0 4px; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.eco-partage-ok { font-size: 12.5px; color: #2d6a4f; word-break: break-all; }

/* les pochettes peintes */
.eco-carte-pochette img, .eco-fiche-pochette img { width:100%; height:100%; object-fit:cover; display:block; }
.eco-fiche-pochette { position:relative; aspect-ratio:1; }
.eco-pochette-legende { position:absolute; left:0; right:0; bottom:0; padding:22px 12px 10px; font:600 12.5px/1.3 'Source Serif 4',Georgia,serif; color:#fffaf0;
  background:linear-gradient(180deg, rgba(14,26,32,0), rgba(14,26,32,.78)); text-align:center; }
.eco-carte-pochette { box-shadow:0 6px 14px -8px rgba(20,35,42,.5); }

/* la tête de chaque coffret : sa pochette, son titre */
.eco-coffret-tete { display:flex; align-items:center; gap:18px; margin:30px 0 12px; }
.eco-coffret-tete h2 { margin:0 0 4px; }
.eco-coffret-tete .eco-coffret-sous { margin:0; }
.eco-coffret-pochette { flex:0 0 96px; width:96px; height:96px; object-fit:cover; border-radius:12px;
  box-shadow:0 10px 24px -12px rgba(20,35,42,.6), 0 0 0 1px rgba(180,135,43,.35); transform:rotate(-2deg); }
.eco-carte-pochette { width:96px; height:96px; flex-basis:96px; }
@media (max-width:640px) { .eco-coffret-pochette { flex-basis:72px; width:72px; height:72px; } }

.eco-vide { margin:18px 0; padding:14px 16px; border:1px dashed rgba(20,35,42,.25); border-radius:12px; color:#4a5a63; font-size:14.5px; }
.eco-vide-note { border-style:solid; border-color:rgba(180,135,43,.35); background:#fbf7ef; }