/* =========================================================================
   Evenprod Medias — back-office
   Interface d'outil : dense, lisible, sans décoration inutile.
   ========================================================================= */

:root{
  --violet-900:#1B0730; --violet-800:#2E0A4A; --violet-700:#3F0F63;
  --violet-600:#51147B; --violet-500:#771F99; --violet-100:#EDE3F3; --violet-050:#F7F2FA;
  --magenta:#CF16B9; --magenta-sombre:#8E0C7F;
  --teal:#097E6B; --teal-clair:#30B09B;
  --encre:#1A1220; --encre-douce:#4A3D55; --encre-pale:#7A6B86;
  --fond:#F6F3F8; --carte:#FFFFFF; --trait:#E2D9E9;
  --rayon:8px; --barre:236px;
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0; background:var(--fond); color:var(--encre);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
h1,h2,h3{margin:0; line-height:1.2; letter-spacing:-.015em}
h1{font-size:1.45rem; font-weight:800}
h2{font-size:1.02rem; font-weight:700}
h3{font-size:.9rem; font-weight:700}
p{margin:0}
:focus-visible{outline:2px solid var(--magenta); outline-offset:2px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --------------------------------------------------------------- gabarit */
.appli{display:flex; min-height:100vh}

.barre{
  width:var(--barre); flex:none; background:var(--violet-800); color:#fff;
  padding:1.1rem .8rem; position:sticky; top:0; height:100vh; overflow-y:auto;
}
.barre-marque{display:flex; align-items:center; gap:.5rem; padding:0 .35rem 1.1rem; font-weight:800; letter-spacing:-.03em}
.barre-sigle{width:30px;height:30px;border-radius:50%;background:#fff;color:var(--violet-600);
  display:grid;place-items:center;font-size:.72rem;font-weight:800;letter-spacing:-.05em;flex:none}
.barre-marque small{display:block;font-size:.56rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#C9AEDA}

.barre h4{font-size:.6rem; letter-spacing:.13em; text-transform:uppercase; color:#9E7CB5; margin:1.1rem .35rem .35rem}
.barre nav{display:grid; gap:1px}
.barre nav a{
  display:flex; align-items:center; gap:.5rem; padding:.5rem .6rem; border-radius:6px;
  font-size:.87rem; font-weight:600; color:#DCCBE7;
}
.barre nav a:hover{background:rgba(255,255,255,.09); color:#fff}
.barre nav a.actif{background:var(--violet-600); color:#fff}
.barre .compteur{
  margin-left:auto; background:var(--magenta); color:#fff; border-radius:999px;
  font-size:.66rem; font-weight:800; padding:.05rem .38rem; min-width:18px; text-align:center;
}
.barre-pied{margin-top:1.4rem; padding:.7rem .35rem 0; border-top:1px solid rgba(255,255,255,.14); font-size:.78rem; color:#B694CB}
.barre-pied a{display:block; padding:.25rem 0}
.barre-pied a:hover{color:#fff}

.zone{flex:1; min-width:0; display:flex; flex-direction:column}
.zone-tete{
  background:var(--carte); border-bottom:1px solid var(--trait);
  padding:1rem 1.6rem; display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  position:sticky; top:0; z-index:20;
}
.zone-corps{padding:1.6rem; flex:1}

@media(max-width:860px){
  .appli{flex-direction:column}
  .barre{width:100%; height:auto; position:static; padding:.8rem}
  .barre nav{grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); display:grid}
  .barre h4{display:none}
  .barre-pied{display:none}
  .zone-corps{padding:1rem}
  .zone-tete{padding:.8rem 1rem; position:static}
}

/* ---------------------------------------------------------------- pièces */
.carte{background:var(--carte); border:1px solid var(--trait); border-radius:var(--rayon); padding:1.1rem 1.25rem}
.carte + .carte{margin-top:1rem}
.carte-tete{display:flex; align-items:center; gap:.7rem; margin-bottom:.9rem; flex-wrap:wrap}
.carte-tete h2{margin-right:auto}

.tuiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.8rem; margin-bottom:1.2rem}
.tuile{background:var(--carte); border:1px solid var(--trait); border-radius:var(--rayon); padding:.9rem 1rem}
.tuile .v{font-size:1.65rem; font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums; line-height:1.1}
.tuile .l{font-size:.72rem; color:var(--encre-pale); letter-spacing:.05em; text-transform:uppercase; margin-top:.15rem}
.tuile.alerte{border-color:var(--magenta); background:#FDF2FB}
.tuile.alerte .v{color:var(--magenta-sombre)}

.grille2{display:grid; gap:1rem}
@media(min-width:1000px){ .grille2{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)} }

/* --------------------------------------------------------------- tableau */
.tableau-boite{overflow-x:auto; border:1px solid var(--trait); border-radius:var(--rayon); background:var(--carte)}
table{border-collapse:collapse; width:100%; font-size:.87rem}
th,td{padding:.6rem .8rem; text-align:left; border-bottom:1px solid var(--trait); vertical-align:middle}
th{font-size:.68rem; text-transform:uppercase; letter-spacing:.09em; color:var(--encre-pale); font-weight:700; white-space:nowrap; background:var(--violet-050)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--violet-050)}
td.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
td.actions{text-align:right; white-space:nowrap}
.td-titre{font-weight:600}
.td-titre small{display:block; font-weight:400; color:var(--encre-pale); font-size:.76rem}

.miniature{width:78px; height:44px; border-radius:4px; object-fit:cover; background:var(--violet-100); flex:none}

/* --------------------------------------------------------------- étiquettes */
.etiquette{
  display:inline-block; font-size:.66rem; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; padding:.16rem .45rem; border-radius:4px; white-space:nowrap;
}
.e-publie{background:#DDF0EA; color:#065647}
.e-attente{background:#FDECC8; color:#7A4F04}
.e-brouillon{background:#E9E5EC; color:#5A4E63}
.e-direct{background:#FBE3F7; color:var(--magenta-sombre)}
.e-prevu{background:var(--violet-100); color:var(--violet-600)}
.e-termine{background:#E9E5EC; color:#5A4E63}
.e-serie{background:#E1F5EE; color:var(--teal)}
.e-emission{background:var(--violet-100); color:var(--violet-600)}
.e-rejete{background:#FBE1E1; color:#8E1010}

/* --------------------------------------------------------------- boutons */
.bouton{
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  padding:.5rem .85rem; border-radius:6px; border:1px solid var(--trait);
  background:var(--carte); color:var(--encre); font-size:.84rem; font-weight:600;
  cursor:pointer; font-family:inherit; transition:background .12s, border-color .12s;
}
.bouton:hover{background:var(--violet-050); border-color:var(--violet-100)}
.b-primaire{background:var(--violet-600); border-color:var(--violet-600); color:#fff}
.b-primaire:hover{background:var(--violet-500); border-color:var(--violet-500)}
.b-magenta{background:var(--magenta); border-color:var(--magenta); color:#fff}
.b-magenta:hover{background:#B4129F; border-color:#B4129F}
.b-vert{background:var(--teal); border-color:var(--teal); color:#fff}
.b-vert:hover{background:#0A6B5B; border-color:#0A6B5B}
.b-petit{padding:.28rem .55rem; font-size:.76rem}
.b-danger{color:#9B1616; border-color:#F0D5D5}
.b-danger:hover{background:#FDF0F0; border-color:#E9BFBF}
.boutons{display:flex; gap:.4rem; flex-wrap:wrap; align-items:center}

/* ----------------------------------------------------------- formulaires */
.champ{display:block; margin-bottom:.9rem}
.champ > span{display:block; font-size:.76rem; font-weight:700; color:var(--encre-douce); margin-bottom:.28rem}
.champ .aide{font-weight:400; color:var(--encre-pale); font-size:.74rem; margin-top:.25rem; display:block}
input[type=text],input[type=email],input[type=password],input[type=url],
input[type=datetime-local],input[type=search],select,textarea{
  width:100%; padding:.52rem .7rem; border:1px solid var(--trait); border-radius:6px;
  font-size:.9rem; font-family:inherit; background:var(--carte); color:var(--encre);
}
textarea{resize:vertical; min-height:80px}
input:focus,select:focus,textarea:focus{border-color:var(--violet-500); outline:none;
  box-shadow:0 0 0 3px rgba(119,31,153,.12)}
.ligne{display:grid; gap:.8rem}
@media(min-width:700px){ .ligne-2{grid-template-columns:1fr 1fr} .ligne-3{grid-template-columns:1fr 1fr 1fr} }
.case{display:flex; align-items:flex-start; gap:.5rem; margin-bottom:.55rem; font-size:.87rem; cursor:pointer}
.case input{margin-top:.22rem; flex:none; width:16px; height:16px; accent-color:var(--violet-600)}
.case span small{display:block; color:var(--encre-pale); font-size:.76rem; font-weight:400}

/* ------------------------------------------------------------- éditeur */
.editeur-outils{
  display:flex; flex-wrap:wrap; gap:.2rem; padding:.35rem;
  border:1px solid var(--trait); border-bottom:0; border-radius:6px 6px 0 0; background:var(--violet-050);
}
.editeur-outils button{
  padding:.28rem .5rem; border:0; background:transparent; border-radius:4px;
  font-size:.8rem; font-weight:700; cursor:pointer; color:var(--encre-douce); font-family:inherit;
}
.editeur-outils button:hover{background:var(--violet-100); color:var(--violet-600)}
.editeur{
  min-height:280px; padding:.9rem 1rem; border:1px solid var(--trait); border-radius:0 0 6px 6px;
  background:var(--carte); font-size:.95rem; line-height:1.65; overflow-y:auto;
}
.editeur:focus{outline:none; border-color:var(--violet-500)}
.editeur h3{font-size:1.1rem; margin:1rem 0 .4rem}
.editeur p{margin:0 0 .7rem}
.editeur blockquote{margin:.8rem 0; padding-left:.9rem; border-left:3px solid var(--magenta); color:var(--violet-600); font-weight:600}
.editeur ul,.editeur ol{margin:0 0 .7rem; padding-left:1.3rem}

/* --------------------------------------------------------------- divers */
.message{padding:.7rem 1rem; border-radius:6px; font-size:.87rem; font-weight:600; margin-bottom:1rem}
.m-succes{background:#DDF0EA; color:#065647}
.m-erreur{background:#FBE3F7; color:var(--magenta-sombre)}

.vide{padding:2.5rem 1rem; text-align:center; color:var(--encre-pale); font-size:.9rem}

.filtres{display:flex; gap:.35rem; flex-wrap:wrap; margin-bottom:1rem}
.filtres a{padding:.32rem .7rem; border-radius:999px; border:1px solid var(--trait);
  font-size:.8rem; font-weight:600; background:var(--carte)}
.filtres a.actif{background:var(--violet-600); border-color:var(--violet-600); color:#fff}

.journal-ligne{display:flex; gap:.6rem; padding:.45rem 0; border-bottom:1px solid var(--trait); font-size:.82rem}
.journal-ligne:last-child{border-bottom:0}
.journal-ligne .quand{color:var(--encre-pale); margin-left:auto; white-space:nowrap; font-size:.76rem}

/* bandeau du direct en cours */
.bandeau-direct{
  background:var(--magenta); color:#fff; border-radius:var(--rayon);
  padding:.9rem 1.1rem; display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; margin-bottom:1rem;
}
.bandeau-direct .pastille{width:8px;height:8px;border-radius:50%;background:#fff;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.bandeau-direct .pastille{animation:none}}
.bandeau-direct .bouton{margin-left:auto; background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.4); color:#fff}
.bandeau-direct .bouton:hover{background:rgba(255,255,255,.28)}

/* bloc « prêt à poster » */
.poster{border:1px solid var(--teal-clair); background:#F2FBF8; border-radius:var(--rayon); padding:1rem 1.1rem}
.poster h3{color:var(--teal); display:flex; align-items:center; gap:.4rem}
.poster textarea{
  margin-top:.6rem; font-size:.85rem; line-height:1.5; min-height:150px;
  background:var(--carte); border-color:#BFE6DC;
}

.connexion{min-height:100vh; display:grid; place-items:center; background:var(--violet-800); padding:1.5rem}
.connexion-boite{background:var(--carte); border-radius:12px; padding:2rem; width:100%; max-width:390px}
.connexion-marque{display:flex; align-items:center; gap:.6rem; justify-content:center; margin-bottom:1.4rem; font-weight:800; letter-spacing:-.03em}
.connexion-boite .barre-sigle{background:var(--violet-600); color:#fff; width:36px; height:36px; font-size:.8rem}
.rappel{margin-top:1.2rem; padding:.75rem .9rem; background:var(--violet-050); border-radius:6px; font-size:.78rem; color:var(--encre-douce); line-height:1.5}
.rappel code{background:var(--carte); padding:.05rem .3rem; border-radius:3px; font-size:.76rem; border:1px solid var(--trait)}