/* Charte OGLO AO — reprise de la charte OGLO π (« magazine éditorial pigmenté ») :
   papier crème, encre noir bleuté, filets gris, titres en EB Garamond,
   texte en Geist. La couleur encode un statut, jamais décorative. */
:root{
  --paper:#f4f1ea; --paper-hi:#fbf9f4; --ink:#1a1d24; --ink-soft:#3f3e3a;
  --rule:#9f9c93; --rule-soft:#d4ccba;
  --success:#1f5c3f; --danger:#c8321a; --warning:#e89211; --info:#a8d4b8; --excellent:#1a3a5f;
  --success-soft:#e7eee9; --danger-soft:#f6e3df; --warning-soft:#fbeed7; --info-soft:#e5f0e9;
  --info-mid:#c5e3cd; --hl:#fff59a;
  --serif:"EB Garamond", Garamond, Georgia, serif;
  --sans:"Geist", "Helvetica Neue", Arial, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--paper);color:var(--ink);font:14px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--ink);text-underline-offset:2px}
a:hover{color:var(--excellent)}

/* En-tête */
header.top{display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 24px;border-bottom:1px solid var(--ink);background:var(--paper);position:sticky;top:0;z-index:10}
.brand{display:flex;align-items:baseline;text-decoration:none;color:var(--ink)}
.brand .b1{font-family:var(--serif);font-size:22px;line-height:1}
.brand .b2{font-family:var(--serif);font-style:italic;font-weight:500;font-size:22px;line-height:1;margin-left:10px}
.top-right{display:flex;align-items:center;gap:16px}
.feedback{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--rule);border-radius:2px;background:var(--paper);padding:5px 12px;font-size:12px;color:var(--ink-soft);text-decoration:none}
.feedback:hover{color:var(--ink);border-color:var(--ink)}
.who{font-size:12px;color:var(--ink-soft)}
.logout{font-family:var(--serif);font-style:italic;font-size:13px;color:var(--ink-soft)}

/* Barre latérale */
.shell{display:flex;min-height:calc(100vh - 56px)}
.side{width:176px;flex-shrink:0;border-right:1px solid var(--rule);background:rgba(244,241,234,.6)}
.side-title{padding:20px 16px 0;margin:0 0 12px;font-size:.6rem;text-transform:uppercase;letter-spacing:.12em;font-weight:500;color:var(--ink-soft)}
.side ul{list-style:none;margin:0;padding:0}
.side a{display:flex;align-items:center;gap:10px;padding:8px 12px 8px 14px;font-size:.82rem;text-decoration:none;color:var(--ink);border-left:3px solid transparent}
.side a:hover{background:rgba(212,204,186,.3)}
.side a.on{border-left-color:var(--ink);font-weight:500;background:var(--rule-soft);letter-spacing:-.01em}
.side svg{width:16px;height:16px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
main{flex:1;min-width:0;padding:28px 32px 80px;max-width:1180px}

/* Titres */
h1{font-family:var(--serif);font-weight:400;font-size:30px;letter-spacing:-.01em;margin:0 0 24px;padding-bottom:16px;border-bottom:1px solid var(--rule)}
h2{font-family:var(--serif);font-weight:400;font-size:21px;margin:0 0 14px;display:flex;align-items:baseline;gap:12px}
h2 .num{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--ink-soft);min-width:18px}
h3{font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;font-weight:500;color:var(--ink-soft);margin:22px 0 8px}
.muted{color:var(--ink-soft);font-size:12.5px}
code{font-family:"Geist Mono",monospace;font-size:12px;background:var(--rule-soft);padding:0 4px}

/* Sections (pas de cartes : filets éditoriaux) */
.card{border-top:1px solid var(--ink);padding:20px 0 26px;margin:0 0 6px;background:transparent}
.card.muted{border-top-color:var(--rule);font-size:13px}

/* Messages */
.flash{padding:10px 14px;margin-bottom:16px;font-size:13px;border-left:3px solid}
.flash.ok{background:var(--success-soft);border-color:var(--success);color:var(--success)}
.flash.err{background:var(--danger-soft);border-color:var(--danger);color:var(--danger)}
.warn{background:var(--warning-soft);border-left:3px solid var(--warning);padding:12px 16px;margin-bottom:22px;font-size:13px}
.warn ul{margin:6px 0 0 18px;padding:0}
.ask{background:var(--paper-hi);border:1px solid var(--rule-soft);border-left:3px solid var(--ink);padding:12px 16px;font-size:13px}
.must{margin-top:8px;color:var(--danger);font-weight:500}
.auto{font-size:12px;color:var(--success);margin-top:3px;font-style:italic;font-family:var(--serif)}

/* Tableaux */
table{border-collapse:collapse;width:100%}
th,td{border-bottom:1px solid var(--rule-soft);padding:8px;text-align:left;vertical-align:top}
th{font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-soft);font-weight:500;border-bottom:1px solid var(--rule)}
td.num,th.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
tr.total td{font-weight:600;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);background:transparent}

/* Formulaires */
input[type=text],input[type=number],input[type=date],input[type=password],select,textarea{
  width:100%;padding:7px 9px;border:1px solid var(--rule);border-radius:2px;font:inherit;font-size:13.5px;background:var(--paper-hi);color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink);background:#fff}
input.small{width:84px;text-align:right;font-variant-numeric:tabular-nums}
input[type=checkbox]{accent-color:var(--ink)}
input[type=file]{font-size:12.5px}
label{display:block;font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-soft);margin-bottom:4px;font-weight:500}
label:has(input[type=checkbox]){text-transform:none;letter-spacing:0;font-size:14px;color:var(--ink);font-weight:400}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px 20px}
.grid .wide{grid-column:1/-1}
.row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.row>*{flex:0 0 auto}

/* Boutons — charte π : niveau 1 plein encre, niveau 2 filet, niveau 3 structurant, danger en italique */
.btn{display:inline-block;background:var(--ink);color:var(--paper);border:1px solid var(--ink);border-radius:0;padding:7px 16px;font:500 .7rem/1.4 var(--sans);text-transform:uppercase;letter-spacing:.08em;cursor:pointer;text-decoration:none}
.btn:hover{opacity:.9;color:var(--paper)}
.btn.ghost{background:var(--paper);color:var(--ink-soft);border-color:var(--rule)}
.btn.ghost:hover{border-color:var(--ink);color:var(--ink);opacity:1}
.btn.ocre{background:var(--paper);color:var(--ink);border-color:var(--ink);border-radius:4px;padding:9px 20px}
.btn.ocre:hover{background:var(--ink);color:var(--paper);opacity:1}
.btn.big{font-size:.8rem;padding:12px 28px}
.btn.link{background:none;border:none;color:var(--danger);font:italic 14px var(--serif);text-transform:none;letter-spacing:0;padding:2px 4px}
.btn.link:hover{text-decoration:underline;opacity:1}

/* Étiquettes */
.tag{display:inline-block;font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;padding:2px 7px;border-radius:2px;background:var(--rule-soft);color:var(--ink);font-weight:500;margin-left:4px;vertical-align:1px}
.tag.found{background:var(--success-soft);color:var(--success)}
.tag.miss{background:var(--danger);color:var(--paper)}
.tag.cat{background:transparent;border:1px solid var(--rule);color:var(--ink-soft)}
.extrait{font:italic 13.5px/1.4 var(--serif);color:var(--ink-soft);margin:4px 0 0 4px}
details summary{cursor:pointer;color:var(--ink-soft);font-size:12px}
.steps{display:flex;flex-wrap:wrap;margin:-8px 0 22px;border-bottom:1px solid var(--rule-soft)}
.steps a{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;text-decoration:none;padding:8px 0;margin-right:22px;color:var(--ink-soft);border-bottom:2px solid transparent}
.steps a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.pill-ok{color:var(--success)} .pill-ko{color:var(--danger)}
.hl{background:var(--hl)}

/* Suggestions de cotraitants */
.suggest{border:1px solid var(--rule-soft);background:var(--paper-hi);padding:12px 16px;margin:16px 0}
.suggest h3{margin-top:2px}
.chip{background:var(--paper);border:1px solid var(--rule);color:var(--ink);border-radius:2px;padding:3px 10px;margin:2px 4px 2px 0;font:inherit;font-size:12.5px;cursor:pointer}
.chip:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)}

@media (max-width:760px){
  .side{display:none}
  main{padding:20px 16px 60px}
  header.top{padding:0 16px}
  .who{display:none}
  th,td{padding:6px 4px}
}

/* Pièces justificatives des cotraitants */
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:1px dashed var(--rule);background:var(--paper-hi);padding:26px 16px;text-align:center;cursor:pointer;text-transform:none;letter-spacing:0;font-size:13px;color:var(--ink)}
.drop input{display:none}
.drop .drop-t{font-family:var(--serif);font-size:18px}
.drop.over{border-color:var(--ink);background:#fff}
.drop.busy{opacity:.6}
.drop.busy .drop-t::after{content:" — envoi en cours…"}
tr.old td{opacity:.55}
.st{font-size:12px}
.st-ok{color:var(--success)} .st-expire{color:var(--danger);font-weight:500} .st-bientot{color:#a3620a;font-weight:500}
.st-inconnu,.st-sans_objet{color:var(--ink-soft)}
.tag.warnt{background:var(--warning-soft);color:#a3620a}
td select,td input[type=date]{font-size:12.5px;padding:4px 6px}
table.jm th,table.jm td{text-align:center;white-space:nowrap;padding:6px}
table.jm th:first-child,table.jm td:first-child{text-align:left}
table.jm a.st{text-decoration:none;font-size:14px}