/* Atelier CM — feuille unique, sans étape de build (mutualisé OVH oblige). */

:root{
  --ground:#EEF0EB; --surface:#FBFCF9; --sunk:#E4E7DF;
  --ink:#141813; --muted:#5B645A; --faint:#828C80;
  --line:#D2D8CB; --line-strong:#B6BFB0;
  --accent:#1E5A49; --accent-soft:#DCE8E1;
  --ochre:#8C6412; --ochre-soft:#F0E7CF;
  --rust:#8E3527; --rust-soft:#F2DDD7;
  --r:3px;
}
@media (prefers-color-scheme: dark){
  :root{
    --ground:#0F120E; --surface:#181C17; --sunk:#131711;
    --ink:#E6EAE1; --muted:#98A194; --faint:#78826F;
    --line:#2B312A; --line-strong:#3D453B;
    --accent:#5FBFA0; --accent-soft:#1A2B24;
    --ochre:#D2A03F; --ochre-soft:#2C2415;
    --rust:#E0806A; --rust-soft:#2E1B16;
  }
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--ground); color:var(--ink);
  font-family:Archivo,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
.mono,code,kbd{font-family:"IBM Plex Mono",ui-monospace,monospace}
.num{font-variant-numeric:tabular-nums}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:2px}

/* ---- barre ---- */
.bar{
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  padding:0 24px; height:54px;
  background:var(--surface); border-bottom:1px solid var(--line-strong);
  position:sticky; top:0; z-index:20;
}
.bar .logo{font-weight:700; letter-spacing:-.02em; font-size:15px; text-decoration:none; color:var(--ink)}
.bar nav{display:flex; gap:2px; margin-left:8px}
.bar nav a{
  font-size:12.5px; font-weight:500; text-decoration:none; color:var(--muted);
  padding:6px 11px; border-radius:var(--r);
}
.bar nav a:hover{background:var(--sunk); color:var(--ink)}
.bar nav a[aria-current]{background:var(--accent-soft); color:var(--accent)}
.bar .droite{margin-left:auto; display:flex; align-items:center; gap:14px}

.wrap{max-width:1440px; margin:0 auto; padding:26px 24px 80px}
.etroit{max-width:820px}

h1{font-size:24px; font-weight:700; letter-spacing:-.022em; margin:0 0 3px}
h2{font-size:16px; font-weight:600; letter-spacing:-.012em; margin:0 0 12px}
h3{font-size:13px; font-weight:600; margin:0 0 8px}
.sous{color:var(--muted); font-size:13px; margin:0 0 22px}
.entete{display:flex; align-items:flex-start; gap:18px; flex-wrap:wrap; margin-bottom:22px}
.entete .droite{margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap}

.eyebrow{
  font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint);
}

/* ---- boutons ---- */
.btn{
  display:inline-flex; align-items:center; gap:7px;
  font:inherit; font-size:12.5px; font-weight:500;
  padding:7px 13px; border:1px solid var(--line-strong); border-radius:var(--r);
  background:var(--surface); color:var(--ink); cursor:pointer; text-decoration:none;
  white-space:nowrap;
}
.btn:hover{background:var(--sunk)}
.btn.primaire{background:var(--accent); border-color:var(--accent); color:var(--ground)}
.btn.primaire:hover{filter:brightness(1.12)}
.btn.danger{color:var(--rust); border-color:var(--rust)}
.btn.danger:hover{background:var(--rust-soft)}
.btn.mini{font-size:11.5px; padding:4px 9px}
.btn:disabled{opacity:.45; cursor:not-allowed}

/* ---- champs ---- */
label{display:block; font-size:11.5px; font-weight:600; color:var(--muted); margin-bottom:5px}
input[type=text],input[type=password],input[type=time],input[type=datetime-local],input[type=url],select,textarea{
  width:100%; font:inherit; font-size:13.5px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line-strong);
  border-radius:var(--r); padding:8px 10px;
}
textarea{line-height:1.55; resize:vertical; min-height:90px}
input:focus,select:focus,textarea:focus{border-color:var(--accent); outline:none}
.champ{margin-bottom:14px}
.rang{display:flex; gap:12px; flex-wrap:wrap}
.rang>*{flex:1; min-width:150px}

/* ---- cartes / panneaux ---- */
.carte{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:20px; margin-bottom:18px}
.grille2{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:18px}

/* ---- messages ---- */
.flash{
  border-left:2px solid var(--accent); background:var(--accent-soft);
  padding:11px 15px; border-radius:0 var(--r) var(--r) 0; margin-bottom:18px; font-size:13px;
}
.flash.erreur{border-left-color:var(--rust); background:var(--rust-soft); color:var(--rust)}

/* ---- pastilles d'état ---- */
.pastille{
  display:inline-block; font-family:"IBM Plex Mono",monospace;
  font-size:9.5px; letter-spacing:.07em; text-transform:uppercase; font-weight:500;
  padding:2px 6px; border-radius:2px; white-space:nowrap;
}
.p-draft{background:var(--sunk); color:var(--muted)}
.p-queued{background:var(--accent-soft); color:var(--accent)}
.p-publishing{background:var(--ochre-soft); color:var(--ochre)}
.p-published{background:var(--accent); color:var(--ground)}
.p-failed{background:var(--rust-soft); color:var(--rust)}
.p-manual{background:var(--ochre-soft); color:var(--ochre)}

/* ---- la semaine ---- */
.semaine{overflow-x:auto; border:1px solid var(--line); background:var(--line)}
.semaine table{border-collapse:collapse; width:100%; min-width:1080px; background:var(--line)}
.semaine th,.semaine td{background:var(--surface); vertical-align:top; padding:0}
.semaine thead th{
  padding:9px 12px; text-align:left; font-size:11px; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; color:var(--muted);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5;
}
.semaine thead th.aujourdhui{color:var(--accent)}
.semaine th.client{
  width:190px; padding:14px 12px; text-align:left; vertical-align:top;
  border-right:1px solid var(--line);
}
.semaine th.client .nom{font-size:13.5px; font-weight:600; display:flex; align-items:center; gap:7px}
.semaine th.client .puce{width:8px; height:8px; border-radius:50%; flex:none}
.semaine th.client .meta{font-size:11px; color:var(--faint); font-weight:400; margin-top:4px}
.semaine th.client .actions{display:flex; gap:5px; margin-top:9px; flex-wrap:wrap}
.semaine td{border-top:1px solid var(--line); border-left:1px solid var(--line); padding:7px; min-width:132px}

.fiche{
  display:block; text-decoration:none; color:inherit;
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  background:var(--ground); margin-bottom:6px;
}
.fiche:hover{border-color:var(--accent)}
.fiche img{display:block; width:100%; height:78px; object-fit:cover; background:var(--sunk)}
.fiche .corps{padding:6px 8px 7px}
.fiche .heure{font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--faint)}
.fiche .txt{
  font-size:11.5px; line-height:1.35; color:var(--muted); margin-top:3px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.vide{
  display:block; text-align:center; color:var(--faint); font-size:11px;
  border:1px dashed var(--line-strong); border-radius:var(--r); padding:12px 4px;
}

/* ---- file d'attente ---- */
.file{display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:12px}
.tuile{
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
  overflow:hidden; position:relative;
}
.tuile.passee{opacity:.42}
.tuile img{display:block; width:100%; aspect-ratio:4/5; object-fit:cover; background:var(--sunk)}
.tuile .pied{padding:7px 9px 8px}
.tuile .nom{font-size:11.5px; word-break:break-all; line-height:1.35}
.tuile .rang{
  position:absolute; top:6px; left:6px; font-family:"IBM Plex Mono",monospace;
  font-size:10px; font-weight:600; background:var(--ink); color:var(--ground);
  padding:2px 6px; border-radius:2px; min-width:0; flex:none;
}
.tuile[draggable=true]{cursor:grab}
.tuile.attrape{opacity:.4}

/* ---- tableaux ---- */
table.liste{width:100%; border-collapse:collapse; font-size:13px}
table.liste th{
  text-align:left; font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted); padding:9px 12px; border-bottom:1px solid var(--line);
}
table.liste td{padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top}
table.liste tr:last-child td{border-bottom:0}

.erreur-texte{color:var(--rust); font-size:12px; line-height:1.45}
.aide{font-size:11.5px; color:var(--faint); margin-top:5px; line-height:1.45}

/* ---- composer ---- */
.composer{display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr); gap:24px; align-items:start}
@media(max-width:860px){.composer{grid-template-columns:1fr}}
.apercu{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--surface)}
.apercu img{display:block; width:100%; background:var(--sunk)}
.apercu .legende{padding:12px 14px; font-size:13px; line-height:1.55; white-space:pre-wrap; border-top:1px solid var(--line)}
.variante{
  border:1px solid var(--line); border-radius:var(--r); padding:12px 14px;
  margin-bottom:10px; background:var(--surface); font-size:13px; line-height:1.55; white-space:pre-wrap;
}
.variante .btn{margin-top:9px}

/* ---- porte ---- */
.porte{max-width:340px; margin:16vh auto; padding:0 24px}