:root{
  --paper:#F2ECE0;
  --ink:#20211D;
  --muted:#6B6A60;
  --accent:#8A5A3A;
  --line:#DCD6C7;

  --papier: var(--paper);
  --papier-elevee: color-mix(in srgb, var(--paper) 100%, white 4%);
  --papier-journal: color-mix(in srgb, var(--paper) 92%, var(--ink) 6%);
  --encre: var(--ink);
  --encre-vive: color-mix(in srgb, var(--ink) 88%, black 12%);
  --encre-douce: var(--muted);
  --ligne: var(--line);
  --marque: var(--accent);
  --sur-marque: color-mix(in srgb, var(--accent) 12%, var(--paper) 88%);
  --ombre-marque: color-mix(in srgb, var(--accent) 75%, black 25%);
  --sur-accent: color-mix(in srgb, var(--accent) 14%, var(--paper) 86%);
  --ombre-accent: color-mix(in srgb, var(--accent) 75%, black 25%);
  --surlignage: color-mix(in srgb, var(--accent) 24%, var(--paper) 76%);
  --rayon:8px;
  --rayon-bouton:6px;
  --grain:none;
}
.marque-app .puce{background:var(--marque)}

.onglets{display:flex;gap:.4rem;padding:.7rem 1.25rem 0;border-bottom:1.4px solid var(--ligne);overflow-x:auto}
.onglets button{background:none;border:none;font-family:"Source Sans 3",sans-serif;font-weight:600;font-size:.86rem;
  color:var(--encre-douce);padding:.6rem .9rem;border-radius:10px 10px 0 0;cursor:pointer;min-height:44px;white-space:nowrap;
  border-bottom:3px solid transparent}
.onglets button.actif{color:var(--marque);border-bottom-color:var(--marque);background:var(--sur-marque)}

/* Fil de discussion */
.fil-serveur{display:flex;flex-direction:column;gap:.55rem;min-height:200px}
.msg{display:flex;gap:.65rem;align-items:flex-start}
.msg .avatar-msg{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-family:"Newsreader",serif;font-weight:600;font-size:.82rem;flex:none;background:var(--papier-journal);color:var(--marque)}
.msg.bot .avatar-msg{background:var(--marque);color:var(--sur-marque)}
.msg .corps-msg{flex:1;min-width:0}
.msg .entete-msg{display:flex;gap:.5rem;align-items:baseline}
.msg .pseudo{font-weight:700;font-size:.86rem;color:var(--encre-vive)}
.msg.bot .pseudo{color:var(--marque)}
.msg .heure-msg{font-size:.68rem;color:var(--encre-douce)}
.msg .texte-msg{font-size:.9rem;line-height:1.5;white-space:pre-line}
.badge-bot{font-size:.6rem;font-weight:700;text-transform:uppercase;background:var(--marque);color:var(--sur-marque);
  padding:.05rem .35rem;border-radius:4px;margin-left:.2rem}

/* Sondage */
.carte-sondage{background:var(--papier-elevee);border:1.4px solid var(--ligne);border-radius:var(--rayon);padding:.8rem .9rem;
  margin-top:.4rem;display:flex;flex-direction:column;gap:.5rem;max-width:360px}
.carte-sondage .question-sondage{font-weight:700;font-size:.9rem}
.option-sondage{position:relative;border:1.4px solid var(--ligne);border-radius:8px;padding:.5rem .7rem;cursor:pointer;
  overflow:hidden;background:var(--papier);min-height:44px;display:flex;align-items:center;font-size:.85rem}
.option-sondage .barre{position:absolute;inset:0;background:var(--sur-marque);width:0%;transition:width .5s ease;z-index:0}
.option-sondage span{position:relative;z-index:1;display:flex;justify-content:space-between;width:100%}
.option-sondage.votee{border-color:var(--marque)}
.total-votes{font-size:.72rem;color:var(--encre-douce)}

/* Zone de saisie type Discord */
.barre-commande{position:sticky;bottom:0;background:var(--papier);padding-top:.6rem}
.barre-commande form{display:flex;gap:.6rem}
.barre-commande input{flex:1;font-family:"Source Sans 3",monospace;font-size:.88rem;border:1.4px solid var(--ligne);
  border-radius:var(--rayon-bouton);padding:.7rem .9rem;background:var(--papier-elevee);color:var(--encre);min-height:44px}
.barre-commande input:focus-visible{border-color:var(--marque)}
.aide-commandes{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.5rem}
.aide-commandes button{font-family:"Source Sans 3",monospace;font-size:.74rem;background:var(--papier-journal);
  border:1.4px solid var(--ligne);border-radius:6px;padding:.35rem .6rem;cursor:pointer;color:var(--encre);min-height:36px}

/* Administration */
.regle-mod{display:flex;align-items:center;gap:.8rem;padding:.8rem;background:var(--papier-elevee);border:1.4px solid var(--ligne);
  border-radius:var(--rayon)}
.regle-mod + .regle-mod{margin-top:.55rem}
.regle-mod .txt{flex:1}
.regle-mod .txt b{display:block;font-size:.9rem;color:var(--encre-vive)}
.regle-mod .txt span{font-size:.78rem;color:var(--encre-douce)}
.interrupteur{position:relative;width:46px;height:26px;flex:none;background:var(--ligne);border-radius:20px;border:none;
  cursor:pointer;min-width:44px}
.interrupteur::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;
  transition:transform .2s ease}
.interrupteur.actif{background:var(--marque)}
.interrupteur.actif::after{transform:translateX(20px)}

.liste-programmes{display:flex;flex-direction:column;gap:.6rem}
.msg-programme{display:flex;gap:.8rem;align-items:flex-start;padding:.8rem;background:var(--papier-elevee);
  border:1.4px solid var(--ligne);border-radius:var(--rayon)}
.msg-programme .quand{font-family:"Source Sans 3",monospace;font-size:.74rem;color:var(--marque);flex:none;width:130px}
.formulaire-programme{display:flex;flex-direction:column;gap:.6rem;background:var(--papier-elevee);border:1.4px solid var(--ligne);
  border-radius:var(--rayon);padding:1rem;margin-top:.9rem}
.formulaire-programme label{font-size:.8rem;font-weight:600;color:var(--encre-vive)}
.formulaire-programme input, .formulaire-programme textarea{width:100%;font-family:"Source Sans 3",sans-serif;font-size:.88rem;
  border:1.4px solid var(--ligne);border-radius:6px;padding:.55rem .7rem;background:var(--papier);color:var(--encre);min-height:44px}
.formulaire-programme textarea{min-height:70px;resize:vertical}

/* Membres */
.liste-membres{display:flex;flex-direction:column;gap:.5rem}
.membre-item{display:flex;gap:.7rem;align-items:center;padding:.6rem .8rem;background:var(--papier-elevee);
  border:1.4px solid var(--ligne);border-radius:var(--rayon);font-size:.86rem}
.membre-item .avatar-msg{width:30px;height:30px;font-size:.74rem}
.membre-item .quand-inscrit{margin-left:auto;font-size:.72rem;color:var(--encre-douce)}

@media (max-width:640px){
  .regle-mod{flex-wrap:wrap}
  .msg-programme{flex-direction:column}
  .msg-programme .quand{width:auto}
}