/* =========================================================================
   SO FA ! · première page : écrire, voter, le morceau
   1. Mise en page et vues   2. Présentation   3. Formulaire   4. Vote et morceau
   4b. Plan du morceau   5. Propositions partagées
   6. Modération   7. Lien vers le carnet   8. Éditeur en place (admin)
   ========================================================================= */

/* ---- 1. mise en page et vues ---------------------------------------------
   Grand écran : présentation, onglets Voter / Le morceau et leur contenu à
   gauche, formulaire collant à droite. Petit écran : présentation, puis trois
   onglets (Écrire, Voter, Le morceau) qui montrent une seule chose à la fois ;
   le script pose data-vue sur .depot. */
.depot{display:grid;grid-template-columns:minmax(0,1fr) 380px;grid-template-areas:"intro form" "actes form" "vues form" "texte form";
  gap:0 48px;align-items:start;padding-block:34px 52px}
.intro{grid-area:intro;padding-bottom:26px}
.actes-zone{grid-area:actes;padding-bottom:14px}
.vues{grid-area:vues}
.composer{grid-area:form}
.lyrics{grid-area:texte;min-width:0}
@media (min-width:961px){.vues [data-vue="ecrire"]{display:none}}
@media (max-width:960px){
  .depot{grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "actes" "vues" "form" "texte";gap:0;padding-block:26px 44px}
  .intro{padding-bottom:18px}
  .vues + .composer{margin-top:16px}
  .depot:not([data-vue="ecrire"]) .composer,.depot[data-vue="ecrire"] .lyrics{display:none}
}
.vues{display:flex;gap:4px;border-bottom:1px solid var(--rule);scroll-margin-top:70px}
.vues button{position:relative;display:inline-flex;align-items:baseline;gap:7px;padding:12px 12px 11px;background:none;border:0;
  cursor:pointer;font:600 clamp(19px,2.3vw,25px)/1 var(--display);color:var(--faint);transition:color .15s}
.vues button:hover{color:var(--soft)}
.vues button[aria-selected="true"]{color:var(--ink)}
.vues button[aria-selected="true"]::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:3px;border-radius:3px;background:var(--gamme)}
.vues .nb{font:500 12.5px/1 var(--mono);color:var(--faint)}
/* Les actes : une puce par acte ouvert, l'idée de celui qu'on regarde, et le
   petit formulaire pour en demander un (ou en créer un, pour l'admin). */
.actes-barre{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.acte-idee{margin-top:8px;font-size:14.5px;color:var(--soft)}
.acte-form{margin-top:12px;padding:12px 16px 14px;background:var(--wash);border-radius:16px}
.acte-form .field:first-child{margin-top:0}

/* ---- 2. présentation ---------------------------------------------------- */
.plumes{margin-top:18px;font-size:14.5px;color:var(--soft)}
.plumes b{color:var(--ink);font-weight:650}
.lede .mm{color:var(--ink);font-weight:700;background:linear-gradient(transparent 55%,var(--marker) 55%)}
.nouvelles{margin-top:20px;padding:14px 18px 12px;background:var(--panel);border:1px solid var(--rule);border-radius:18px;box-shadow:var(--shadow)}
.nouvelles-lab{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.nouvelles-lab::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--do);margin-right:8px;vertical-align:1px}
.nouvelles-lab .quand{letter-spacing:.04em;text-transform:none;color:var(--faint)}
.nouvelles-txt{white-space:pre-line;margin-top:6px;line-height:1.55;overflow-wrap:anywhere}
.nouvelles-txt a{color:var(--accent-ink)}
.nouvelles-txt.vide{color:var(--faint);font-size:14.5px}
.nouvelles-acts:not(:empty){margin-top:4px}

/* ---- 3. formulaire ------------------------------------------------------ */
.composer{position:sticky;top:calc(env(safe-area-inset-top,0px) + 70px);max-height:calc(100vh - 86px);overflow:auto;
  background:var(--panel);border:1px solid var(--rule);border-radius:24px;padding:24px 24px 22px;scroll-margin-top:80px;
  box-shadow:var(--shadow);outline:1.5px dashed var(--rule-strong);outline-offset:-9px}   /* le pointillé : la couture du canapé */
@media (max-width:960px){.composer{position:static;max-height:none;overflow:visible}}
.composer h2{font-size:30px}
.composer .sub{font-size:14.5px;color:var(--soft);margin-top:10px}
/* Le pseudo, obligatoire, en tête du formulaire ; rouge tant qu'il manque après un essai. */
.pseudo{padding:12px 14px 14px;background:var(--wash);border-radius:16px}
.pseudo .req{margin-left:6px;font:500 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--do)}
.pseudo.manque input{border-color:var(--do);outline:2px solid color-mix(in srgb,var(--do) 30%,transparent);outline-offset:1px}
.mode{margin-top:12px}
.mode button{flex:1;font-size:14px;padding:9px 12px}
/* Le passage dont on écrit une variante, rappelé au-dessus du texte. */
.contexte{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-top:14px;padding:10px 14px;
  background:var(--wash);border-radius:14px;font-size:14.5px;color:var(--soft)}
.contexte b{color:var(--ink);font-weight:650}
.contexte .link-btn{margin-left:auto;font-size:13.5px}
.field input[type="file"]{padding:8px 10px;font-size:14.5px}
.field input[type="file"]::file-selector-button{font:600 14px/1 var(--body);color:var(--ink);background:var(--wash);
  border:1px solid var(--rule-strong);border-radius:999px;padding:8px 14px;margin-right:10px;cursor:pointer}
.notes-live{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 4px}
.notes-live mark.n{background:color-mix(in srgb,var(--c) 17%,transparent);box-shadow:inset 0 -2px 0 var(--c);padding:0 2px}
.field{display:flex;flex-direction:column;gap:6px;margin-top:14px}
.field label{font-size:14px;font-weight:650}
.field .help{font-size:13px;color:var(--faint);line-height:1.4}
.field .help a{color:var(--accent-ink)}
.a-glisser{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.a-glisser .word{font-size:13.5px;padding:4px 10px}
.field select,.field input,.field textarea{width:100%;font:400 16px/1.5 var(--body);color:var(--ink);background:var(--paper);
  border:1px solid var(--rule-strong);border-radius:14px;padding:10px 14px}
.field textarea{min-height:170px;resize:vertical}
@media (max-width:960px){.field textarea{min-height:130px}}
.field select:focus-visible,.field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.field .label-row{display:flex;align-items:baseline;gap:8px}
.count{margin-left:auto;font-size:12.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.status-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-top:10px;min-height:1.5em}
.status{font-size:13.5px;color:var(--soft);line-height:1.45}
.after{display:flex;flex-wrap:wrap;gap:4px 16px}
.out{width:100%;margin-top:10px;font:400 14px/1.45 var(--mono);color:var(--ink);background:var(--paper);
  border:1px solid var(--accent);border-radius:10px;padding:10px;min-height:120px}
.draft{font-size:12.5px;color:var(--faint);margin-top:12px}

/* Quand l'API ne répond pas, le script pose .api-off sur <html> : les textes
   « api » cèdent la place aux textes « noapi » et WhatsApp devient l'envoi principal. */
.api-off [data-when="api"],:root:not(.api-off) [data-when="noapi"]{display:none!important}
.api-off #f-wa{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

/* ---- 4. vote et morceau ------------------------------------------------- */
.tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:16px}
.vote-intro{color:var(--soft);margin-top:16px;max-width:62ch}
/* Les catégories du vote (puces de base.css), chacune avec son compte ; pâles quand elles sont vides. */
.cats{margin-top:12px}
.cats button.vide:not([aria-selected="true"]){opacity:.6}
.cat-vide{color:var(--faint);margin-top:16px}
.morceau-tete{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;margin-top:16px}
.morceau-tete .ordre-info{margin:0}
.toggle{display:inline-flex;align-items:center;gap:9px;padding:8px 14px;border-radius:999px;border:1px solid var(--rule-strong);
  background:none;cursor:pointer;font:600 14px/1.2 var(--body)}
.toggle .dots i{width:6px;height:6px}
.toggle:hover{background:var(--wash)}
.toggle[aria-pressed="true"]{background:var(--wash);border-color:var(--soft)}
.ordre-info{margin-top:12px;font-size:13.5px;color:var(--faint)}
.legend{display:flex;flex-wrap:wrap;gap:6px}
.legend span{font-family:var(--mono);font-size:12px;padding:2px 8px;border-radius:999px;color:var(--c);
  background:color-mix(in srgb,var(--c) 14%,transparent)}

.sec{padding-block:20px 8px}
.sec-lab{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.sec-lab .l{font-family:var(--display);font-size:16px;font-weight:600;color:var(--ink);flex:none}
.sec-lab .by{font-size:13.5px;color:var(--faint);flex:none}
.sec-lab .line{flex:1;height:1px;background:var(--rule)}
.sec.hook{background:var(--gamme) top / 100% 3px no-repeat,var(--wash);border-radius:20px;padding:20px 22px 14px;margin-block:12px}
.sec.hook .st{font-weight:560}
.sec.hook .sec-lab .line{background:var(--rule-strong)}
.sec-act{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:6px}
.slot{display:block;width:100%;text-align:left;border:1.5px dashed var(--rule-strong);border-radius:20px;padding:16px 20px;
  background:none;color:var(--soft);cursor:pointer;font:400 16px/1.5 var(--body);transition:border-color .18s,color .18s,background-color .18s}
.slot:hover{border-color:var(--soft);color:var(--ink);background:var(--wash)}
.slot b{display:block;margin-top:6px;font-weight:650;color:var(--accent-ink)}

/* ---- 4b. plan du morceau ------------------------------------------------ */
.plan{margin-top:20px;padding:22px 22px 18px;background:var(--panel);border:1px solid var(--rule);border-radius:24px;box-shadow:var(--shadow)}
.plan h3{font-size:24px}
.plan-aide{color:var(--soft);font-size:15px;margin-top:6px}
.plan-list{list-style:none;margin:14px 0 0;padding:0}
.plan-bloc{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--wash);border-radius:16px}
.plan-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.plan-txt b{font-size:14.5px;font-weight:650}
.plan-txt span{font-size:14px;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plan-acts{display:flex;gap:4px;flex:none}
.plan-btn{width:34px;height:34px;border-radius:999px;border:1px solid var(--rule-strong);background:var(--panel);
  color:var(--ink);cursor:pointer;font:600 15px/1 var(--body)}
.plan-btn:hover{background:var(--paper)}
.plan-btn:disabled{opacity:.35;cursor:default}
.plan-ins{padding:4px 0 4px 12px}
.plan-ins .link-btn{font-size:13px;color:var(--faint)}
.plan-menu{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 4px}
.plan-menu .word{font-size:13.5px;text-align:left}
.morceau-vide{margin-top:18px;padding:18px 20px;border:1.5px dashed var(--rule-strong);border-radius:20px;color:var(--soft)}
.morceau-vide a{font-weight:650;color:var(--accent-ink);white-space:nowrap}

/* ---- 5. propositions partagées ------------------------------------------ */
.props{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.prop{background:var(--panel);border:1px solid var(--rule);border-radius:18px;padding:12px 16px 10px;
  scroll-margin-top:90px;transition:box-shadow .3s ease;box-shadow:0 1px 2px rgba(80,60,40,.04)}
.prop.fresh{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 55%,transparent)}
.prop.is-masked{opacity:.55;border-style:dashed}
.prop-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;font-size:13.5px;color:var(--faint)}
.prop-meta b{color:var(--ink);font-weight:650}
.prop-meta .m::before{content:"· "}
.prop-flag{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--do)}
/* Le « j'aime » : un cœur et son compte, rempli quand on aime. */
.aime{display:inline-flex;align-items:center;gap:6px;align-self:center;margin-right:4px;padding:4px 11px 4px 9px;
  border:1px solid var(--rule-strong);border-radius:999px;background:var(--paper);color:var(--soft);cursor:pointer;
  font:650 13.5px/1 var(--body);font-variant-numeric:tabular-nums;transition:background-color .15s,border-color .15s,color .15s}
.aime svg{width:15px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
.aime:hover{border-color:var(--do);color:var(--do)}
.aime[aria-pressed="true"]{border-color:var(--do);color:var(--do);background:color-mix(in srgb,var(--do) 10%,var(--paper))}
.aime[aria-pressed="true"] svg{fill:currentColor}
.prop-par{margin-top:8px;font-size:13px;color:var(--faint);overflow-wrap:anywhere}
/* Admin : l'acte d'une proposition, à changer d'un choix dans la liste. */
.acte-choix{font:600 13px/1.2 var(--body);color:var(--soft);background:var(--paper);border:1px solid var(--rule-strong);
  border-radius:999px;padding:2px 8px;cursor:pointer}
.prop-acts{margin-left:auto;display:flex;flex-wrap:wrap;gap:2px 14px}
.prop-acts .link-btn{font-size:13px;padding:2px 0}
.link-btn.arm{color:var(--do);text-decoration-color:currentColor}   /* « Confirmer le retrait » ou « … la suppression » */
.prop-text{white-space:pre-line;font-size:clamp(16px,1.5vw,17.5px);line-height:1.6;margin-top:4px;overflow-wrap:anywhere}
.prop-text a{color:var(--accent-ink)}
.prop audio{display:block;width:100%;margin-top:8px}

/* ---- 6. modération (adresse …/#moderation) ------------------------------ */
.modbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:16px;padding:12px 14px;
  border:1.5px dashed var(--do);border-radius:12px;font-size:14px}
.modbar b{font-weight:650}
.modbar input{flex:1 1 160px;min-width:0;font:400 15px/1.3 var(--body);color:var(--ink);background:var(--paper);
  border:1px solid var(--rule-strong);border-radius:8px;padding:7px 10px}
.modbar .btn{padding:8px 14px;font-size:14px}
.modbar .status{flex-basis:100%}
.demandes{margin-top:16px;padding:20px 22px;background:var(--panel);border:1px solid var(--rule);border-radius:24px;box-shadow:var(--shadow)}
.demandes h3{font-size:22px}
.demandes-vide{color:var(--faint);font-size:14.5px;margin-top:6px}
.demandes-liste{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.demande{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:10px 14px;background:var(--wash);border-radius:16px}
.demande-txt{flex:1 1 220px;min-width:0;display:flex;flex-direction:column}
.demande-txt b{font-size:14.5px;font-weight:650}
.demande-txt span{font-size:14px;color:var(--soft);overflow-wrap:anywhere}
.demande-acts{display:flex;flex-wrap:wrap;gap:4px 14px}

/* ---- 7. lien vers le carnet --------------------------------------------- */
.carnet-link{display:flex;flex-direction:column;gap:4px;margin-top:34px;padding:22px 24px;border:1px solid var(--rule);
  border-radius:24px;background:var(--panel);text-decoration:none;transition:border-color .18s;box-shadow:var(--shadow);
  outline:1.5px dashed var(--rule-strong);outline-offset:-9px}
.carnet-link:hover{border-color:var(--rule-strong)}
.carnet-link b{font-family:var(--display);font-weight:600;font-size:24px;line-height:1.1}
.carnet-link b::after{content:" →";color:var(--accent-ink)}
.carnet-link .d{color:var(--soft);font-size:15.5px}

/* ---- 8. éditeur en place (admin) ---------------------------------------- */
.editeur{display:flex;flex-direction:column;gap:10px;margin:6px 0 4px}
.editeur textarea{width:100%;font:400 17px/1.7 var(--body);color:var(--ink);background:var(--panel);
  border:1px solid var(--rule-strong);border-radius:16px;padding:12px 16px;resize:vertical}
.editeur-ici{font-size:14px;color:var(--soft);display:flex;align-items:center;gap:6px}
.editeur-acts{display:flex;flex-wrap:wrap;gap:8px}
.admin-edit{color:var(--accent-ink)}