/* Portail des outils. Tout le vocabulaire visuel vient de /shared/ui.css (dont le rail
   de navigation) : ici, uniquement la mise en page propre au portail — l'accueil-vitrine,
   la connexion, les comptes, le journal, les services. */

/* ------------------------------------------------------------------ accueil-vitrine */
.home .stack{gap:var(--sp-6)}
.eyebrow{font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--wine);margin-bottom:var(--sp-2)}
.hero{display:flex;flex-direction:column;gap:var(--sp-4)}
.hero h1{margin-bottom:var(--sp-3);text-wrap:balance}
.hero__text{color:var(--fg-muted);max-width:var(--w-prose)}
.hero__cta{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.hero__cta .inline-msg{flex-basis:100%}
.btn--lg{min-height:48px;padding:var(--sp-2) var(--sp-5);font-size:var(--fs-md);font-weight:600}
.btn--locked{opacity:.55;cursor:not-allowed}
.icon--ext{width:14px;height:14px;opacity:.7}
.section-head__aside{margin-left:auto;font-size:var(--fs-xs);color:var(--fg-subtle)}

/* Cartes-listes : une carte, des lignes séparées d'un filet — jamais une carte par ligne. */
.list-card{display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-4);box-shadow:var(--sh-1)}
.news__row{display:grid;grid-template-columns:7.5rem auto minmax(0,1fr);gap:var(--sp-4);
  align-items:center;padding:var(--sp-3) var(--sp-5);border-bottom:1px solid var(--border);
  font-size:var(--fs-sm)}
.news__row:last-child{border-bottom:0}
.news__empty{padding:var(--sp-4) var(--sp-5)}
.date{font:var(--fs-xs)/1.4 var(--font-mono);color:var(--fg-subtle);font-variant-numeric:tabular-nums}
.news__more{border-top:1px solid var(--border)}
.news__more summary{padding:var(--sp-3) var(--sp-5);font-size:var(--fs-sm);color:var(--fg-muted);
  cursor:pointer}
.news__more summary:hover{color:var(--fg)}
.news__more .news__row:first-of-type{border-top:1px solid var(--border)}

.soon{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--sp-4)}
.soon__card{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-4) var(--sp-5);
  border:1px dashed var(--border-strong);border-radius:var(--r-4)}
.soon__card b{font:650 var(--fs-md)/var(--lh-tight) var(--font-display);color:var(--fg-muted)}
.soon__card p{font-size:var(--fs-sm);color:var(--fg-muted)}
.soon__card .chip{align-self:flex-start;margin-top:auto}

.tool{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-3) var(--sp-5);
  border-bottom:1px solid var(--border);color:inherit;text-decoration:none;
  transition:background var(--dur-2) var(--ease)}
.tool:last-child{border-bottom:0}
a.tool:hover{background:var(--surface-2)}
.tool__ico{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-3);
  background:var(--wine-soft);color:var(--wine);flex:none}
.tool__ico .icon{width:20px;height:20px}
.tool__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.tool__text b{font:650 var(--fs-lg)/var(--lh-tight) var(--font-display);letter-spacing:-.01em}
.tool__text span{font-size:var(--fs-sm);color:var(--fg-muted)}
.tool__text .badge{align-self:flex-start;margin-top:var(--sp-1)}
.tool__go{margin-left:auto;color:var(--fg-subtle);flex:none;transform:rotate(-90deg);
  transition:transform var(--dur-2) var(--ease),color var(--dur-2) var(--ease)}
a.tool:hover .tool__go{color:var(--wine);transform:rotate(-90deg) translateY(3px)}
.tool--locked{opacity:.72}
.tool--locked .tool__ico{background:var(--surface-sunk);color:var(--fg-subtle)}

.ask{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:var(--sp-1);
  font-size:var(--fs-sm)}

/* ------------------------------------------------------------------ connexion, déconnexion */
.login-page{display:grid;place-items:center;padding:var(--sp-5)}
.login-box{width:100%;max-width:26rem}
.login-brand{margin-bottom:var(--sp-2)}
.login-brand h1{font-size:var(--fs-xl)}
.login-foot{margin-top:var(--sp-4);text-align:center;
  font-size:var(--fs-xs);color:var(--fg-subtle)}

/* ------------------------------------------------------------------ administration */
.admin-panel[hidden]{display:none}
.admin-panel > .card + .card{margin-top:var(--sp-5)}
.not-admin .card__title{margin-bottom:var(--sp-2)}

/* services techniques */
.service{display:flex;flex-direction:column;gap:var(--sp-3)}
.service__head{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.service__head .icon{color:var(--wine)}
.service__head h3{margin-right:var(--sp-1)}
.service p{font-size:var(--fs-sm);color:var(--fg-muted);max-width:var(--w-prose)}
.service code{font-family:var(--font-mono);font-size:var(--fs-xs)}
.service__url{align-self:flex-start;color:var(--fg-muted);background:var(--surface-sunk);
  border-radius:var(--r-1);padding:3px var(--sp-2);overflow-wrap:anywhere}
.service--off{opacity:.8}
.service--off .service__head .icon{color:var(--fg-subtle)}

/* ------------------------------------------------------------------ comptes */
.users{display:flex;flex-direction:column;gap:var(--sp-4)}

.user{display:flex;flex-direction:column;gap:var(--sp-4)}
.user--off{opacity:.66}
.user--off:hover,.user--off:focus-within{opacity:1}

.user__head{display:flex;align-items:baseline;gap:var(--sp-3);flex-wrap:wrap}
.user__name{font-family:var(--font-display);font-size:var(--fs-lg);font-weight:650;
  letter-spacing:-.01em}
.user__id{font:var(--fs-xs)/1.4 var(--font-mono);color:var(--fg-muted);
  background:var(--surface-sunk);border-radius:var(--r-1);padding:2px var(--sp-2)}
.user__seen{margin-left:auto;font-size:var(--fs-xs);color:var(--fg-subtle)}

.roles{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5)}
.roles__item{min-height:auto;font-size:var(--fs-sm);color:var(--fg)}

/* Les droits s'enregistrent à la bascule : le retour d'état se place SUR la même
   ligne que les cases, pas en bas de carte — c'est là que le regard est. */
.user__roles{display:flex;align-items:center;gap:var(--sp-4) var(--sp-5);flex-wrap:wrap}
.user__roles .inline-msg{margin-left:auto;flex:none}

.user__actions{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
  padding-top:var(--sp-3);border-top:1px solid var(--border)}

/* ------------------------------------------------------------------ journal */
.journal-summary{display:flex;flex-direction:column;gap:var(--sp-3);
  margin-bottom:var(--sp-5)}
.journal-filters{margin-bottom:var(--sp-3)}
.journal-filters .select{min-height:32px;padding:var(--sp-1) var(--sp-3);
  font-size:var(--fs-sm);width:auto}
.journal-filters .input{min-height:32px}
.journal-me{font-size:var(--fs-sm);color:var(--fg-muted);white-space:nowrap}

/* Le tableau défile dans son cadre : la page, elle, ne déborde jamais en largeur. */
.journal-table-wrap{overflow-x:auto;border:1px solid var(--border);
  border-radius:var(--r-3);background:var(--surface)}
.journal-table-wrap--flat{border:0;border-radius:0;background:transparent}
.journal-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);
  line-height:var(--lh-ui)}
.journal-table th{text-align:left;font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--fg-muted);
  padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--border);
  white-space:nowrap;background:var(--surface-sunk)}
.journal-table td{padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--border);
  vertical-align:top}
.journal-table tbody tr:last-child td{border-bottom:0}
.journal-table--summary th:first-child,.journal-table--summary td:first-child{
  white-space:nowrap}
.journal-table--summary td{font-size:var(--fs-xs)}
.journal-table--summary th{white-space:normal}
.journal-table--summary .badge{margin-left:var(--sp-2)}
.journal-when{white-space:nowrap;font-variant-numeric:tabular-nums}
.journal-when .muted{display:block}
.journal-event{min-width:12rem}
.journal-event .badge{margin-right:var(--sp-2);vertical-align:middle}
.journal-label{vertical-align:middle}
.journal-ip{font-size:var(--fs-xs);white-space:nowrap}
.journal-detail{display:flex;flex-direction:column;gap:2px;
  color:var(--fg-muted);font-size:var(--fs-xs);min-width:9rem;max-width:24rem;
  overflow-wrap:anywhere}
.journal-path{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--fg-subtle)}
.journal-kv b{font-weight:600;color:var(--fg-muted)}
.journal-row--echec td,.journal-row--refus td{background:var(--bad-soft)}
.journal-foot{margin-top:var(--sp-3);gap:var(--sp-3)}
.journal-table-wrap .empty{margin:0}

/* ------------------------------------------------------------------ mon compte */
.account{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  align-items:start}
.account__actions{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;
  align-self:end}

@media (max-width:600px){
  .news__row{grid-template-columns:1fr;gap:var(--sp-1)}
  .news__row .chip{justify-self:start}
  .user__seen{margin-left:0;width:100%}
}