/* ============================================================
   PRISM MAIL — interface
   Palette reprise du site : nuit profonde, violet -> cyan.
   ============================================================ */

:root{
  --night:#0B0B1A; --surface:#14142B; --surface2:#1B1B38;
  --violet:#7C3AED; --cyan:#22D3EE; --gold:#FACC15;
  --green:#34D399; --red:#F43F5E;
  --text:#E5E7FF; --muted:#9CA3C4;
  --line:rgba(229,231,255,.10); --line-hi:rgba(229,231,255,.22);
  --grad:linear-gradient(120deg,var(--violet),var(--cyan));
  --r:12px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{
  font:15px/1.55 "Inter","Segoe UI",system-ui,sans-serif;
  background:var(--night);color:var(--text);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{display:block}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:6px}

/* ---------- boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 16px;border-radius:999px;border:1px solid transparent;
  font:inherit;font-size:.88rem;font-weight:600;cursor:pointer;
  transition:transform .2s,border-color .2s,background .2s,box-shadow .2s;
}
.btn--plein{background:var(--grad);color:#fff;box-shadow:0 6px 20px -8px rgba(124,58,237,.9)}
.btn--plein:hover{transform:translateY(-1px)}
.btn--fin{border-color:var(--line-hi);color:var(--text);background:rgba(229,231,255,.03)}
.btn--fin:hover{border-color:var(--cyan);background:rgba(34,211,238,.08)}
.btn--danger{color:#ffb4c0;border-color:rgba(244,63,94,.4)}
.btn--danger:hover{border-color:var(--red);background:rgba(244,63,94,.12)}
.btn--large{width:100%;padding:12px 16px;margin-bottom:16px}

/* ---------- champs ---------- */
input,select,textarea{
  width:100%;padding:11px 14px;border-radius:10px;
  background:rgba(11,11,26,.75);border:1px solid var(--line-hi);
  color:var(--text);font:inherit;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--cyan)}
textarea{resize:vertical;min-height:160px;line-height:1.6}
input[type=file]{padding:9px;background:transparent}
label{display:block;margin:16px 0 6px;font-size:.85rem;font-weight:600;color:var(--muted)}

/* ---------- alertes ---------- */
.alerte{padding:11px 15px;border-radius:10px;margin-bottom:16px;font-size:.9rem;border:1px solid}
.alerte--ok{color:var(--green);border-color:rgba(52,211,153,.35);background:rgba(52,211,153,.08)}
.alerte--err{color:#ffb4c0;border-color:rgba(244,63,94,.35);background:rgba(244,63,94,.08)}
.alerte--info{color:var(--gold);border-color:rgba(250,204,21,.3);background:rgba(250,204,21,.07)}
.alerte--info a{color:var(--cyan);text-decoration:underline}
.alerte-inline{color:var(--gold)}
.gris{color:var(--muted)}

/* ============================================================
   CONNEXION
   ============================================================ */
.login{
  min-height:100vh;display:grid;place-items:center;padding:24px;
  background:
    radial-gradient(45% 40% at 25% 15%,rgba(124,58,237,.30),transparent 70%),
    radial-gradient(40% 35% at 78% 25%,rgba(34,211,238,.22),transparent 72%);
}
.login__box{
  width:100%;max-width:380px;padding:36px 32px;border-radius:20px;
  background:linear-gradient(160deg,var(--surface),rgba(20,20,43,.7));
  border:1px solid var(--line-hi);
  box-shadow:0 30px 60px -30px #000;
}
.login__marque{
  display:flex;align-items:center;gap:10px;margin-bottom:26px;
  font-family:"Orbitron",system-ui,sans-serif;font-weight:700;font-size:1.1rem;
}
.login__marque b{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.login__box .btn{width:100%;margin-top:22px}
.login__note{margin-top:18px;font-size:.8rem;color:var(--muted);line-height:1.5}

/* ============================================================
   APPLICATION
   ============================================================ */
.app{
  display:grid;
  grid-template-columns:230px 1fr;
  grid-template-rows:auto 1fr;
  grid-template-areas:"top top" "cote vue";
  min-height:100vh;
}

.top{
  grid-area:top;display:flex;align-items:center;gap:16px;
  padding:12px 20px;border-bottom:1px solid var(--line);
  background:rgba(11,11,26,.9);position:sticky;top:0;z-index:10;
}
.top__marque{
  display:flex;align-items:center;gap:9px;
  font-family:"Orbitron",system-ui,sans-serif;font-weight:700;font-size:.98rem;
}
.top__marque b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.top__rech{flex:1;max-width:420px;margin-left:8px}
.top__rech input{padding:8px 14px;border-radius:999px}
.top__compte{font-size:.85rem;color:var(--muted)}

.cote{
  grid-area:cote;padding:18px 14px;border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:3px;
}
.cote__lien{
  padding:9px 13px;border-radius:9px;font-size:.9rem;color:var(--muted);
  transition:background .2s,color .2s;
}
.cote__lien:hover{background:rgba(229,231,255,.05);color:var(--text)}
.cote__lien.est-actif{background:rgba(124,58,237,.18);color:var(--text);font-weight:600}

.vue{grid-area:vue;padding:24px 28px;max-width:1000px}
.vue__tete{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.vue__tete h1{font-family:"Orbitron",system-ui,sans-serif;font-size:1.35rem}
.compteur{font-size:.85rem;color:var(--muted)}
.vide{color:var(--muted);padding:40px 0}
.retour{color:var(--cyan);font-size:.88rem}

/* ---------- liste des messages ---------- */
.liste{list-style:none;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.ligne+.ligne{border-top:1px solid var(--line)}
.ligne__lien{
  display:grid;grid-template-columns:200px 1fr auto;gap:14px;align-items:center;
  padding:13px 16px;transition:background .18s;
}
.ligne__lien:hover{background:rgba(229,231,255,.04)}
.ligne__de,.ligne__sujet{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ligne__de{color:var(--muted);font-size:.9rem}
.ligne__sujet{font-size:.93rem}
.ligne__date{color:var(--muted);font-size:.8rem;white-space:nowrap}
.ligne.est-nonlu{background:rgba(124,58,237,.07)}
.ligne.est-nonlu .ligne__de,
.ligne.est-nonlu .ligne__sujet{color:var(--text);font-weight:600}

.pages{display:flex;align-items:center;gap:14px;justify-content:center;margin-top:20px;font-size:.85rem;color:var(--muted)}

/* ---------- message ---------- */
.msg{margin-top:14px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.msg__sujet{padding:20px 22px 0;font-family:"Orbitron",system-ui,sans-serif;font-size:1.2rem;line-height:1.35}
.msg__meta{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:14px 22px;font-size:.88rem;border-bottom:1px solid var(--line);
}
.msg__actions{display:flex;gap:8px;flex-wrap:wrap;padding:14px 22px;border-bottom:1px solid var(--line)}
.msg__actions form{display:flex;gap:8px;flex-wrap:wrap}

.pj{padding:14px 22px;border-bottom:1px solid var(--line)}
.pj__titre{font-size:.8rem;color:var(--muted);margin-bottom:9px;text-transform:uppercase;letter-spacing:.08em}
.pj__item{
  display:inline-block;margin:0 8px 8px 0;padding:8px 13px;
  border:1px solid var(--line-hi);border-radius:9px;font-size:.85rem;
}
.pj__item:hover{border-color:var(--cyan);background:rgba(34,211,238,.07)}

.msg__corps{padding:20px 22px}
.msg__texte{white-space:normal;word-break:break-word;line-height:1.65}
.msg__texte a{color:var(--cyan);text-decoration:underline}
.msg__html{width:100%;min-height:420px;border:0;border-radius:8px;background:#fff}

/* ---------- diffusion ---------- */
.cote__lien--diff{margin-bottom:10px;border:1px solid var(--line-hi)}
.inscrits{
  margin:18px 0;border:1px solid var(--line);border-radius:var(--r);
  background:rgba(20,20,43,.5);max-width:680px;
}
.inscrits summary{padding:12px 16px;cursor:pointer;font-size:.9rem;font-weight:600}
.inscrits summary:hover{background:rgba(229,231,255,.04)}
.inscrits ul{list-style:none;padding:0 16px 14px;font-size:.87rem;max-height:260px;overflow:auto}
.inscrits li{padding:4px 0;border-top:1px solid var(--line)}

/* ---------- ecriture ---------- */
.ecrire{max-width:760px}
.ecrire h1{font-family:"Orbitron",system-ui,sans-serif;font-size:1.25rem;margin-bottom:6px}
.ecrire__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width:820px){
  .app{grid-template-columns:1fr;grid-template-areas:"top" "cote" "vue"}
  .cote{
    flex-direction:row;overflow-x:auto;border-right:0;
    border-bottom:1px solid var(--line);padding:12px;
  }
  .cote__lien{white-space:nowrap}
  .btn--large{width:auto;margin:0 8px 0 0}
  .vue{padding:18px 16px}
  .ligne__lien{grid-template-columns:1fr auto;row-gap:3px}
  .ligne__de{grid-column:1/-1;font-size:.82rem}
  .top__compte{display:none}
}