/* =========================================================================
   SO FA ! · première page : déposer un texte
   1. Mise en page   2. Présentation   3. Formulaire   4. Texte en cours
   5. Propositions partagées   6. Modération   7. Lien vers le carnet
   ========================================================================= */

/* ---- 1. mise en page ----------------------------------------------------
   Grand écran : présentation puis texte à gauche, formulaire collant à
   droite. Petit écran : présentation, formulaire, puis texte. */
.depot{display:grid;grid-template-columns:minmax(0,1fr) 380px;grid-template-areas:"intro form" "texte form";
  gap:0 48px;align-items:start;padding-block:34px 52px}
.intro{grid-area:intro;padding-bottom:30px}
.composer{grid-area:form}
.lyrics{grid-area:texte;min-width:0;border-top:1px solid var(--rule);padding-top:24px}
@media (max-width:960px){
  .depot{grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "form" "texte";gap:26px;padding-block:26px 44px}
  .intro{padding-bottom: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%)}

/* ---- 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:1.5px solid var(--ink);border-radius:16px;padding:22px 22px 20px;scroll-margin-top:80px;
  outline:1.5px dashed var(--rule-strong);outline-offset:-8px}   /* 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:6px}
.mode{margin-top:12px}
.mode button{flex:1;font-size:14px;padding:9px 12px}
.field input[type="file"]{padding:8px 10px;font-size:14.5px}
.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:10px;padding:10px 12px}
.field textarea{min-height:170px;resize:vertical}
.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. texte en cours -------------------------------------------------- */
.lyr-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.lyr-head h2{font-size:clamp(34px,4vw,46px)}
.chip{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;padding:4px 10px;border:1px solid var(--rule-strong);border-radius:999px;color:var(--soft)}
.lyr-intro{color:var(--soft);margin-top:10px;max-width:60ch}
.tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:16px}
.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[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.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(--mono);font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-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% 4px no-repeat,var(--wash);border-radius:14px;padding:18px 20px 12px;margin-block:12px}
.sec.hook .st{font-weight:620}
.sec.hook .sec-lab .line{background:color-mix(in srgb,var(--accent) 35%,transparent)}
.sec-act{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:6px}
.open-lab{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.slot{display:block;width:100%;text-align:left;border:1.5px dashed var(--rule-strong);border-radius:14px;padding:16px 18px;
  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(--accent);color:var(--ink);background:color-mix(in srgb,var(--accent) 6%,transparent)}
.slot b{display:block;margin-top:6px;font-weight:650;color:var(--accent-ink)}

/* ---- 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:12px;padding:12px 16px 10px;
  scroll-margin-top:90px;transition:box-shadow .3s ease}
.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)}
.prop-acts{margin-left:auto;display:flex;flex-wrap:wrap;gap:2px 14px}
.prop-acts .link-btn{font-size:13px;padding:2px 0}
.prop-acts .link-btn.arm{color:var(--do);text-decoration-color:currentColor}
.prop-text{white-space:pre-line;font-size:clamp(16.5px,1.6vw,18.5px);line-height:1.7;margin-top:4px;overflow-wrap:anywhere}
.prop-text a{color:var(--accent-ink)}
.prop audio{display:block;width:100%;margin-top:8px}
.variants > summary{display:inline-flex;align-items:center;gap:8px;cursor:pointer;list-style:none;
  font:600 14px/1.4 var(--body);color:var(--accent-ink);padding:4px 0}
.variants > summary::-webkit-details-marker{display:none}
.variants > summary::before{content:"";border-left:6px solid currentColor;border-block:4.5px solid transparent;transition:transform .15s}
.variants[open] > summary::before{transform:rotate(90deg)}
.variants .prop{margin-top:10px}

/* ---- 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%}

/* ---- 7. lien vers le carnet --------------------------------------------- */
.carnet-link{display:flex;flex-direction:column;gap:4px;margin-top:34px;padding:20px 22px;border:1.5px solid var(--ink);
  border-radius:14px;background:var(--panel);text-decoration:none;transition:border-color .18s;
  outline:1.5px dashed var(--rule-strong);outline-offset:-8px}
.carnet-link:hover{border-color:var(--accent)}
.carnet-link b{font-family:var(--display);font-weight:400;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}